.studio { max-width: 48rem; }
.studio label { display: block; margin: 1rem 0; }
.studio input:not([type=checkbox]), .studio select, .studio textarea { display: block; width: 100%; margin-top: .4rem; padding: .7rem; border: 1px solid hsl(var(--border)); border-radius: .6rem; background: hsl(var(--background)); color: hsl(var(--foreground)); }
.studio textarea { font-family: ui-monospace, monospace; font-size: .95rem; }
.studio button { padding: .6rem 1rem; border: 1px solid hsl(var(--border)); border-radius: .6rem; margin: .3rem; }
.studio button.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.studio [hidden] { display: none !important; }
#cloud-posts { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
#cloud-posts .post { display: block; padding: 1.4rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--background)); transition: background .2s; }
#cloud-posts .post:hover { background: hsl(var(--muted)); }
#cloud-posts .post h3 { font-weight: 500; font-size: 1.15rem; margin: .5rem 0; }
#cloud-posts .post .meta, #cloud-posts .post p { color: hsl(var(--muted-foreground)); font-size: .85rem; }
#online-article { max-width: none; }
#online-article img { max-width: 100%; }
.online-toc { margin-top: 2rem; border-left: 1px solid hsl(var(--border)); padding: 1rem; }
.online-toc a { display: block; font-size: .85rem; padding: .35rem 0; color: hsl(var(--muted-foreground)); }
.online-toc a.active { color: hsl(var(--primary)); font-weight: 600; }
.task-button { display: inline-block; border: 1px solid hsl(var(--border)); border-radius: .6rem; padding: .65rem 1rem; }
.task-auth [hidden] { display: none !important; }
.task-card:hover { background: hsl(var(--muted) / .5); }
.task-badge { padding: .2rem .55rem; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.task-badge.done { background: #22c55e20; color: #15803d; }
.task-badge.overdue { background: #ef444420; color: #dc2626; }
.dark .task-badge.done { color: #86efac; }
.dark .task-badge.overdue { color: #fca5a5; }
.task-progress { display: block; width: 100%; height: .55rem; margin-top: 1rem; accent-color: hsl(var(--primary)); }
#task-body { overflow-wrap: anywhere; }
#task-body pre { max-width: 100%; overflow-x: auto; }
#task-editor-preview { padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; }
@media (max-width: 1023px) { header-component.expanded #headerExpandConetent { background: hsl(var(--background) / .97); border: 1px solid hsl(var(--border)); border-radius: 1rem; padding: 1rem; box-shadow: 0 12px 30px #0002; max-height: calc(100vh - 6rem); overflow-y: auto; } }