/* 工作台壳 + 本产品专用零件。只从 tokens.css 取值。 */
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
button { font: inherit; }
.svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* 顶部一行：产品名 · 页签 · 任务入口 · 我 */
.topbar { display: flex; align-items: center; gap: var(--s-5); height: 56px; padding: 0 var(--s-5); }
.topbar .brand { font-weight: 600; font-size: var(--fs-h); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.topbar .brand .mark { width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: var(--ink-fg); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.topbar .tabs { display: flex; gap: 2px; }
.topbar .tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--t2); font-weight: 500; cursor: pointer; }
.topbar .tabs button:hover { color: var(--text); }
.topbar .tabs button[aria-current] { background: var(--island); color: var(--text); }
.topbar .sp { flex: 1; }
.topbar .task { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); border: 0; background: transparent; color: var(--t2); cursor: pointer; }
.topbar .task:hover { background: var(--island); color: var(--text); }
.topbar .task .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: var(--acc-fg); font: 600 11px/18px var(--mono); text-align: center; }
.topbar .me { width: 32px; height: 32px; border-radius: 50%; background: var(--island-3); color: var(--t2); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

/* 工作区：两座岛 */
.work { display: grid; gap: var(--gap); padding: 0 var(--gap) var(--gap); min-height: calc(100vh - 56px); align-items: start; }
.work.a { grid-template-columns: 360px minmax(0, 1fr); }
.work.c { grid-template-columns: 360px minmax(0, 1fr) 300px; }
.work.b { grid-template-columns: minmax(0, 1fr); }
.work.b .results { padding-bottom: 240px; }
.composer { bottom: 0; margin: 0 calc(-1 * var(--gap)); border-radius: var(--r-island) var(--r-island) 0 0; padding-left: var(--s-6); padding-right: var(--s-6); }
.pane { background: var(--island); border-radius: var(--r-island); min-width: 0; }
.pane.results { padding: var(--s-5) var(--s-6) var(--s-7); }
.pane.side { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: var(--gap); align-self: start; max-height: calc(100vh - 56px - var(--gap)); overflow: auto; }
.pane.tasks { padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--gap); align-self: start; max-height: calc(100vh - 56px - var(--gap)); overflow: auto; }

/* 参数区：模型、提示词、参考图、比例质量、张数、生成 */
.model { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--island-2); cursor: pointer; }
.model:hover { background: var(--island-3); }
.model .ic { width: 24px; height: 24px; border-radius: 6px; background: var(--island-3); display: grid; place-items: center; font: 600 10px var(--mono); color: var(--t2); }
.model .nm { font-weight: 500; }
.model .sub { font-size: var(--fs-xs); color: var(--t3); }
.model .ch { margin-left: auto; color: var(--t3); }
.lab { font-size: var(--fs-xs); color: var(--t3); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.lab .acts { display: flex; gap: 2px; }
.lab .acts button { height: 22px; padding: 0 8px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--t2); font-size: var(--fs-xs); cursor: pointer; }
.lab .acts button:hover { background: var(--island-3); color: var(--text); }
.prompt { position: relative; }
.prompt .textarea { min-height: 120px; background: var(--island-2); resize: none; padding-bottom: 28px; }
.prompt .count { position: absolute; right: 10px; bottom: 8px; font: 500 11px var(--mono); color: var(--t3); }
.ref { display: flex; gap: 8px; flex-wrap: wrap; }
.ref .r { position: relative; width: 56px; height: 56px; border-radius: var(--r-xs); background: var(--island-3); display: grid; place-items: center; color: var(--t3); font-size: 11px; overflow: hidden; }
.ref .r.add { border: 1.5px dashed var(--t3); background: transparent; cursor: pointer; font-size: 18px; } .ref .r.add:hover { border-color: var(--text); color: var(--text); }
.ref .r .x { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--ink-fg); font-size: 10px; display: grid; place-items: center; cursor: pointer; }
.ref .lim { align-self: center; font-size: var(--fs-xs); color: var(--t3); }
.row2 { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.opts.eq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .opts.eq button { padding: 0; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opts button { height: 28px; padding: 0 10px; border-radius: var(--r-xs); border: 0; background: var(--island-3); color: var(--t2); font: 500 11px/1 var(--mono); cursor: pointer; }
.opts button:hover { color: var(--text); } .opts button[aria-pressed="true"] { background: var(--ink); color: var(--ink-fg); }
.opts button .tag { margin-left: 4px; font-size: 10px; height: auto; padding: 0; background: transparent; color: var(--warn); }
.opts button[aria-pressed="true"] .tag { color: var(--warn); }
.gen { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.gen .cost { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--t3); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.gen .cost b { color: var(--warn); font-weight: 500; }
.gen .pill { width: 100%; }

/* 结果区 */
.results .head { margin-bottom: var(--s-5); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.pic { position: relative; border-radius: var(--r-ctl); overflow: hidden; background: var(--island-2); aspect-ratio: 3 / 4; cursor: pointer; width: 100%; padding: 0; border: 0; outline: none; }
.pic:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.pic.sq { aspect-ratio: 1 / 1; } .pic.tall { aspect-ratio: 9 / 16; }
.pic .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; color: var(--t3); font-size: var(--fs-xs); background: var(--island-2); }
.pic .ph.img { background: var(--island-3); color: var(--t2); font-size: var(--fs-s); }
.pic .ratio { position: absolute; right: 8px; top: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font: 500 10px/14px var(--mono); }
.pic .bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: var(--fs-xs); display: flex; justify-content: flex-end; gap: 4px; opacity: 0; transition: opacity var(--dur) var(--ease); }
.pic:is(:hover, :focus-visible) .bar { opacity: 1; }
.pic .bar button { height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-xs); background: rgba(255,255,255,.14); color: #fff; font-size: 11px; cursor: pointer; }
.pic .bar button:hover { background: rgba(255,255,255,.26); }
.pic.gen { cursor: default; }
.pic.gen .ph { display: flex; flex-direction: column; gap: 10px; }
.pic.gen .progress { width: 56%; }
.pic.fail .ph { color: var(--bad); gap: 8px; display: flex; flex-direction: column; } .pic.fail { outline: 1px dashed var(--bad); outline-offset: -1px; }
.pic.fail .ph button { height: 26px; padding: 0 10px; border: 1px solid var(--bad); border-radius: var(--r-xs); background: transparent; color: var(--bad); font-size: 11px; cursor: pointer; }
.progress { height: 4px; border-radius: 2px; background: var(--island-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--acc); transition: width 300ms var(--ease); }
.batch { margin-bottom: var(--s-6); }
.batch .bh { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.batch .bh .p { font-size: var(--fs-s); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.batch .bh .m { font: 500 11px var(--mono); color: var(--t3); white-space: nowrap; }
.batch .bh .st { margin-left: auto; font: 500 11px var(--mono); color: var(--t3); white-space: nowrap; }
.batch .bh .st.ok { color: var(--ok); } .batch .bh .st.run { color: var(--acc); }
.empty { padding: var(--s-8) var(--s-5); text-align: center; color: var(--t3); }
.empty .h { color: var(--t2); margin-bottom: 4px; }

/* 任务侧栏（方向 C） */
.trow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-xs); cursor: pointer; }
.trow:hover { background: var(--island-2); }
.trow .th { width: 40px; height: 40px; border-radius: 6px; background: var(--island-3); }
.trow .t { font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .m { font-size: 11px; color: var(--t3); font-family: var(--mono); margin-top: 2px; }
.trow .st { font: 500 11px var(--mono); color: var(--t3); } .trow .st.ok { color: var(--ok); } .trow .st.run { color: var(--acc); } .trow .st.bad { color: var(--bad); }

/* 方向 B：底部作曲条 */
.composer { position: sticky; bottom: var(--gap); background: var(--island); border-radius: var(--r-island); padding: var(--s-4) var(--s-5); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; box-shadow: var(--shadow-pop); }
.composer .left { display: flex; flex-direction: column; gap: 8px; }
.composer .mid { display: flex; flex-direction: column; gap: 10px; }
.composer .mid .textarea { min-height: 64px; max-height: 160px; background: var(--island-2); resize: none; }
.composer .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.composer .chips .opts button { height: 26px; }
.composer .chips .sep { width: 1px; height: 16px; background: var(--line-2); margin: 0 4px; }
.composer .right { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 160px; }
.composer .right .cost { font-size: var(--fs-xs); color: var(--t3); text-align: right; }
.composer .right .cost b { color: var(--warn); font-weight: 500; }

/* 公共 */
.note { position: fixed; right: 16px; bottom: 16px; z-index: 50; } .note .tag { color: var(--t2); }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: var(--island-2); color: var(--t3); font-size: 11px; }
.kbd { font: 500 10px var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--island-3); color: var(--t3); }
@media (max-width: 1100px) { .work.c { grid-template-columns: 320px minmax(0, 1fr); } .work.c .tasks { display: none; } }
@media (max-width: 900px) { .work.a, .work.c { grid-template-columns: 1fr; } .pane.side { order: -1; } }

/* ===== 定稿壳：A + 可收任务栏 ===== */
.work.ac { grid-template-columns: 360px minmax(0, 1fr) 300px; }
.work.ac.tasks-hidden { grid-template-columns: 360px minmax(0, 1fr); }
.work.ac.tasks-hidden .pane.tasks { display: none; }
.topbar .task[aria-pressed="true"], .topbar .task[aria-current] { background: var(--island); color: var(--text); }
.pane.tasks .th-row { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: 8px; }
.pane.tasks .th-row b { font-weight: 600; font-size: var(--fs-s); }
.pane.tasks .th-row .acts { display: flex; gap: 2px; }
.pane.tasks .th-row .acts button { height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--t3); font-size: var(--fs-xs); cursor: pointer; }
.pane.tasks .th-row .acts button:hover { background: var(--island-2); color: var(--text); }
.trow.unread .t { font-weight: 500; } .trow.unread .th { outline: 2px solid var(--acc); outline-offset: -2px; }
.trow .th.img { background: var(--island-3); }

/* 下拉菜单 */
.menu { position: absolute; z-index: 30; min-width: 320px; background: var(--island-2); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); padding: 6px; }
.menu .mi { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-xs); cursor: pointer; }
.menu .mi:hover, .menu .mi[aria-selected="true"] { background: var(--island-3); }
.menu .mi .ic { width: 28px; height: 28px; border-radius: 7px; background: var(--island-3); display: grid; place-items: center; font: 600 10px var(--mono); color: var(--t2); }
.menu .mi[aria-selected="true"] .ic { background: var(--ink); color: var(--ink-fg); }
.menu .mi .nm { font-weight: 500; font-size: var(--fs-s); } .menu .mi .sub { font-size: 11px; color: var(--t3); }
.menu .mi .pr { font: 500 11px var(--mono); color: var(--t3); white-space: nowrap; }
.menu .mh { padding: 6px 10px 4px; font-size: 11px; color: var(--t3); }
.menu .sep { height: 1px; background: var(--line); margin: 4px 0; }
.rel { position: relative; }

/* 对话框 / 遮罩 / 提示条 */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; display: grid; place-items: center; }
.dialog { width: 440px; max-width: calc(100vw - 32px); background: var(--island); border-radius: var(--r-island); padding: var(--s-5); box-shadow: var(--shadow-pop); }
.dialog h3 { margin: 0 0 6px; font-size: var(--fs-h); font-weight: 600; }
.dialog .d { color: var(--t2); font-size: var(--fs-s); margin-bottom: var(--s-4); }
.dialog .f { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-3); }
.dialog .f label { font-size: var(--fs-xs); color: var(--t3); }
.dialog .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--s-4); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 45; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--island-2); box-shadow: var(--shadow-pop); font-size: var(--fs-s); }
.toast button { height: 24px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--island-3); color: var(--text); font-size: var(--fs-xs); cursor: pointer; }
.toast.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.toast.bad::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.sheet-note { font-size: var(--fs-xs); color: var(--t3); }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.9); display: grid; grid-template-rows: 1fr auto; }
.lightbox .img { place-self: center; width: min(60vh, 70vw); aspect-ratio: 3 / 4; border-radius: var(--r-ctl); background: var(--island-3); display: grid; place-items: center; color: var(--t2); }
.lightbox .foot { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); color: rgba(255,255,255,.75); font-size: var(--fs-s); }
.lightbox .foot .p { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox .foot .m { font: 500 11px var(--mono); color: rgba(255,255,255,.5); }
.lightbox .x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.8); font-size: 20px; cursor: pointer; }
.lightbox .x:hover { background: rgba(255,255,255,.12); }
.lightbox .nav-l, .lightbox .nav-r { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.8); font-size: 22px; cursor: pointer; }
.lightbox .nav-l { left: 16px; } .lightbox .nav-r { right: 16px; }
.lightbox .nav-l:hover, .lightbox .nav-r:hover { background: rgba(255,255,255,.12); }

/* 登录 */
.login { min-height: 100vh; display: grid; place-items: center; }
.login .card { text-align: left; align-items: stretch; width: 360px; background: var(--island); border-radius: var(--r-island); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.login .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-h); margin-bottom: 4px; }
.login .brand .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--ink-fg); display: grid; place-items: center; font-size: 13px; }
.login .f { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .login .f .input { width: 100%; }
.login .f label { font-size: var(--fs-xs); color: var(--t2); text-align: left; }
.login .err { color: var(--bad); font-size: var(--fs-s); }
.login .rem { display: flex; align-items: center; gap: 10px; font-size: var(--fs-s); color: var(--t2); } .login .rem .switch { flex: none; }
.login .foot { font-size: var(--fs-xs); color: var(--t2); }

/* 模板页 */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.tpl { background: var(--island-2); border-radius: var(--r-panel); padding: var(--s-4); display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.tpl:hover { background: var(--island-3); }
.tpl .n { font-weight: 500; }
.tpl .p { font-size: var(--fs-s); color: var(--t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl .m { font: 500 11px var(--mono); color: var(--t3); display: flex; justify-content: space-between; }
.tpl .m .lock { color: var(--t3); }

/* 任务整页 */
.tlist { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px 100px 120px; gap: var(--s-4); align-items: center; height: 72px; padding: 0 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.tl:hover { background: var(--island-2); } .tl:last-child { border-bottom: 0; }
.tl .th { width: 56px; height: 56px; border-radius: 6px; background: var(--island-3); }
.tl .t { font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .m, .tl .tm { font: 400 12px var(--mono); color: var(--t3); }
.tl .st { font: 500 11px var(--mono); color: var(--t3); text-align: right; } .tl .st.ok { color: var(--ok); } .tl .st.run { color: var(--acc); } .tl .st.bad { color: var(--bad); }
.tl .acts { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; }
.tl:hover .acts { opacity: 1; }
.dayh { font-size: var(--fs-xs); color: var(--t3); padding: var(--s-4) 8px 6px; position: sticky; top: 0; background: var(--island); }

/* 后台 */
.admin { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--gap); padding: 0 var(--gap) var(--gap); }
.admin .anav { background: var(--island); border-radius: var(--r-island); padding: var(--s-4) var(--s-2); display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--gap); align-self: start; }
.admin .anav button { height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--t2); text-align: left; cursor: pointer; }
.admin .anav button:hover { color: var(--text); } .admin .anav button[aria-current] { background: var(--island-2); color: var(--text); }
.admin .amain { background: var(--island); border-radius: var(--r-island); padding: var(--s-5) var(--s-6) var(--s-7); min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-6); }
.stat { background: var(--island-2); border-radius: var(--r-panel); padding: var(--s-4); }
.stat .k { font-size: var(--fs-xs); color: var(--t3); margin-bottom: 6px; }
.stat .v { font: 600 24px/28px var(--mono); }
.stat .v small { display: block; font-size: 12px; color: var(--t3); font-weight: 400; margin: 4px 0 0; font-family: var(--font); white-space: nowrap; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 500; font-size: var(--fs-xs); color: var(--t3); padding: 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-s); vertical-align: middle; }
.table td.num + td { padding-left: 24px; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table td:has(> .acts), .table td.acts { text-align: right; }
.table .acts { display: inline-flex; gap: 2px; justify-content: flex-end; }
.table .acts button { height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: transparent; color: var(--text); font-size: var(--fs-xs); cursor: pointer; }
.table .acts button:hover { background: var(--island-3); color: var(--text); }
.table .acts button.danger { color: var(--bad); }
.st-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.st-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t3); }
.st-dot.ok::before { background: var(--ok); } .st-dot.bad::before { background: var(--bad); } .st-dot.warn::before { background: var(--warn); }
.filters { display: flex; gap: 8px; align-items: center; margin-bottom: var(--s-4); flex-wrap: wrap; }
.filters .select, .filters .input { width: auto; height: 32px; }
.filters .sp { flex: 1; }
.logrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 160px 120px 80px; gap: var(--s-4); align-items: start; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.logrow:last-child { border-bottom: 0; }
.logrow .th { width: 64px; height: 64px; border-radius: 6px; background: var(--island-3); }
.logrow .who { font-size: var(--fs-xs); color: var(--t3); margin-bottom: 4px; font-family: var(--mono); }
.logrow .p { font-size: var(--fs-s); line-height: 20px; }
.logrow .m { font: 400 11px var(--mono); color: var(--t3); line-height: 18px; }
.logrow .st { font: 500 11px var(--mono); text-align: right; color: var(--t3); } .logrow .st.ok { color: var(--ok); } .logrow .st.bad { color: var(--bad); }
.setrow { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.setrow:last-child { border-bottom: 0; }
.setrow label { color: var(--t2); padding-top: 6px; }
.setrow .c { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.setrow .c .input { background: var(--island-2); }
.setrow .c .hint { font-size: var(--fs-xs); color: var(--t3); }
.sec-h { font-size: var(--fs-h); font-weight: 600; margin: var(--s-6) 0 var(--s-3); } .sec-h:first-child { margin-top: 0; }
.subtabs { display: flex; gap: 2px; margin-bottom: var(--s-4); }
.subtabs button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--t2); font-size: var(--fs-s); cursor: pointer; }
.subtabs button[aria-pressed="true"] { background: var(--island-2); color: var(--text); }
.state-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 60; display: flex; gap: 4px; background: var(--island-2); padding: 4px; border-radius: var(--r-pill); box-shadow: var(--shadow-pop); }
.state-nav button { height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--t2); font-size: 11px; cursor: pointer; }
.state-nav button[aria-pressed="true"] { background: var(--ink); color: var(--ink-fg); }
.hidden { display: none !important; }
@media (max-width: 1100px) { .work.ac { grid-template-columns: 360px minmax(0, 1fr); } .work.ac .pane.tasks { display: none; } }