:root {
  --bg:#f5f6f8; --bg-card:#ffffff; --bg-hover:#f0f1f4; --bg-col:#f8f9fb;
  --border:#dfe1e6; --text:#172b4d; --muted:#6b778c; --dim:#8993a4;
  --accent:#4c6ef5; --accent2:#dbe4ff;
  --green:#2f9e44; --green2:#d3f9d8;
  --blue:#339af0; --blue2:#d0ebff;
  --yellow:#f08c00; --yellow2:#fff3bf;
  --red:#e03131; --red2:#ffe3e3;
  --r:10px;
  --sans:'Noto Sans SC',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg);color:var(--text)}

.hdr{background:var(--bg-card);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100}
.hdr h1{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.hdr h1 span{color:var(--accent)}
.hdr-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr-user{font-size:13px;color:var(--accent);cursor:pointer;font-weight:500;white-space:nowrap}
.hdr-user:hover{text-decoration:underline}
.filter-switch{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap}
.filter-switch input{display:none}
.filter-track{width:32px;height:18px;border-radius:9px;background:var(--border);position:relative;transition:background .2s}
.filter-track::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.filter-switch input:checked+.filter-track{background:var(--accent)}
.filter-switch input:checked+.filter-track::after{transform:translateX(14px)}
.filter-switch.on{color:var(--text)}
.sync-switch{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap}
.sync-switch input{display:none}
.sync-track{width:36px;height:20px;border-radius:10px;background:var(--border);position:relative;transition:background .2s}
.sync-track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sync-switch input:checked+.sync-track{background:var(--accent)}
.sync-switch input:checked+.sync-track::after{transform:translateX(16px)}
.sync-switch.on .sync-switch-label{color:var(--text)}
.sync-switch.state-syncing .sync-track{background:#3b82f6!important;animation:sync-pulse 1.5s infinite}
.sync-switch.state-warning .sync-track{background:#f59e0b!important}
.sync-switch.state-error .sync-track{background:#ef4444!important}
.sync-switch.state-error .sync-switch-label{color:#ef4444}
@keyframes sync-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.hdr-time{font-size:12px;color:var(--muted);font-family:var(--mono)}
.sync-indicator{position:relative;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg-card);cursor:pointer;transition:all .15s}
.sync-indicator:hover{border-color:var(--accent)}
.sync-dot{width:10px;height:10px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 3px rgba(137,147,164,.12)}
.sync-indicator.state-disabled .sync-dot{background:var(--dim);box-shadow:0 0 0 3px rgba(137,147,164,.12)}
.sync-indicator.state-idle .sync-dot{background:var(--green);box-shadow:0 0 0 3px rgba(47,158,68,.12)}
.sync-indicator.state-syncing .sync-dot{background:var(--blue);box-shadow:0 0 0 3px rgba(51,154,240,.12);animation:syncpulse 1.2s infinite}
.sync-indicator.state-pending .sync-dot,.sync-indicator.state-paused .sync-dot{background:var(--yellow);box-shadow:0 0 0 3px rgba(240,140,0,.12)}
.sync-indicator.state-error .sync-dot{background:var(--red);box-shadow:0 0 0 3px rgba(224,49,49,.12)}
.sync-label{font-size:12px;color:var(--muted);font-family:var(--mono)}
.sync-pop{display:none;position:absolute;top:calc(100% + 8px);right:0;width:300px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);box-shadow:0 12px 32px rgba(23,43,77,.14);z-index:150}
.sync-indicator.open .sync-pop{display:block}
.sync-pop-title{font-size:13px;font-weight:600;margin-bottom:8px}
.sync-pop-line{font-size:12px;color:var(--muted);line-height:1.5;margin-top:3px;word-break:break-word}
@keyframes syncpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.6}}

.btn{padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px;cursor:pointer;font-family:var(--sans);transition:all .15s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent2);border-color:var(--accent);color:var(--accent)}
.btn-primary:hover{background:var(--accent);color:#fff}

.stats{display:flex;gap:14px;padding:14px 24px;border-bottom:1px solid var(--border)}
.st{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:12px 18px;min-width:120px}
.st .n{font-family:var(--mono);font-size:26px;font-weight:600}
.st .l{font-size:12px;color:var(--muted);margin-top:2px}

.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg-card)}
.tab{padding:11px 20px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;user-select:none}
.tab:hover{color:var(--text)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-add{padding:11px 14px;font-size:16px;color:var(--dim);cursor:pointer;user-select:none}
.tab-add:hover{color:var(--accent)}

.chip-bar{display:flex;align-items:center;gap:8px;padding:8px 24px;border-bottom:1px solid var(--border);background:var(--bg-card);flex-wrap:wrap;min-height:40px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:14px;font-size:12px;background:var(--accent2);color:var(--accent);user-select:none;white-space:nowrap}
.chip.on{background:var(--accent);color:#fff;cursor:pointer}
.chip .chip-x{font-weight:700;margin-left:2px;font-size:14px;line-height:1}
.chip-search{border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:12px;background:var(--bg);color:var(--text);width:160px;outline:none;margin-left:auto;font-family:var(--sans)}
.chip-search:focus{border-color:var(--accent)}

.vw{display:none;padding:24px}
.vw.on{display:block}

.board{display:flex;gap:14px;overflow-x:auto;min-height:55vh;padding-bottom:16px}
.col{flex:1;min-width:270px;background:var(--bg-col);border-radius:var(--r);border:1px solid var(--border);display:flex;flex-direction:column}
.col-hd{padding:12px 14px;font-size:13px;font-weight:600;letter-spacing:.5px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.col-hd .cnt{font-family:var(--mono);font-size:11px;background:var(--border);padding:1px 7px;border-radius:8px}
.col-bd{padding:10px;flex:1;display:flex;flex-direction:column;gap:8px}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px;transition:all .15s;cursor:default;position:relative}
.card:has(.dd.on){z-index:10}
.card:hover{border-color:var(--accent2);transform:translateY(-1px)}
.card .t{font-size:13px;font-weight:500;margin-bottom:6px;line-height:1.4}
.card .m{display:flex;flex-wrap:wrap;gap:5px;font-size:11px;align-items:center}
.card .p{font-size:10px;color:var(--dim);margin-top:6px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-decoration:none}.card .p:hover{text-decoration:underline}
.due{display:inline-flex;align-items:center;font-size:11px;font-weight:500}
.due.overdue{color:var(--red)}
.due:not(.overdue){color:var(--dim)}

.b{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 4px;border-radius:12px;font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;background:none;color:var(--text)}
.b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.b:hover{background:var(--bg-hover)}
.b-todo::before{background:#8993a4}
.b-in-progress::before{background:#339af0}
.b-review::before{background:#f08c00}
.b-done::before{background:#2f9e44}
.b-high::before{background:#e03131}
.b-medium::before{background:#f08c00}
.b-low::before{background:#8993a4}
.b-proj::before{display:none}.b-proj{cursor:default;background:none}
.b-who::before{display:none}
.b-tag::before{display:none}

.proj-s{margin-bottom:22px}
.proj-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.proj-h h2{font-size:15px;font-weight:600}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}

.mem-s{margin-bottom:22px}
.mem-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mem-av{width:34px;height:34px;border-radius:50%;background:var(--accent2);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.mem-nm{font-size:15px;font-weight:600}
.mem-st{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono)}
.mem-tasks{padding-left:44px;display:flex;flex-direction:column;gap:6px}

.empty{text-align:center;padding:50px 20px;color:var(--dim);font-size:13px}

/* Modal */
.modal-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:200;align-items:center;justify-content:center}
.modal-bg.on{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;width:420px;max-width:90vw}
.modal h2{font-size:16px;margin-bottom:16px}
.modal label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;margin-top:12px}
.modal input,.modal select{width:100%;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;font-family:var(--sans)}
.modal input:focus,.modal select:focus{outline:none;border-color:var(--accent)}
.field-err{font-size:12px;color:var(--red);margin-top:4px;min-height:0;line-height:16px;transition:min-height .15s}
.field-err:empty{min-height:0}
#new-project.input-err{border-color:var(--red)}
.proj-cb{position:relative}
.proj-dd{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;margin-top:2px;max-height:200px;overflow-y:auto;z-index:210;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.proj-dd.on{display:block}
.proj-dd-item{padding:8px 12px;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-dd-item:hover,.proj-dd-item.active{background:var(--bg-hover)}
.modal .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.ai-title-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.ai-title-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.ai-title-row label{font-size:13px;color:var(--text);cursor:pointer;margin:0}
#title-input-wrap{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease,margin .3s ease;margin-top:0}
#title-input-wrap.show{max-height:80px;opacity:1;margin-top:0}
.btn-loading{position:relative;pointer-events:none;opacity:.8}
.btn-loading::after{content:'';position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}

/* Dropdown */
.dd-wrap{position:relative;display:inline-block;z-index:1}
.dd-wrap.open{z-index:100}
.dd{display:none;position:absolute;top:100%;left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:4px;z-index:100;min-width:80px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.dd.on{display:block}
.dd-item{padding:4px 10px;border-radius:4px;font-size:11px;cursor:pointer;white-space:nowrap}
.dd-item:hover{background:var(--bg-hover)}

/* Split dropdown button */
.split-dd{position:relative;display:inline-flex}
.split-dd > .btn-primary:not(.btn-arrow){border-radius:6px 0 0 6px;border-right:none}
.split-dd .btn-arrow{border-radius:0 6px 6px 0;border-left:1px solid rgba(0,0,0,.1);padding:7px 8px;min-width:24px;display:flex;align-items:center;justify-content:center}
.split-dd .btn-arrow::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.split-dd .dd{right:0;left:auto;min-width:100px;margin-top:2px}
.split-dd .dd-item{padding:6px 12px;font-size:12px}

/* File mention autocomplete */
.file-mention-dd{display:none;position:fixed;z-index:270;width:min(560px,calc(100vw - 24px));max-height:420px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden;font-size:13px;flex-direction:column}
.file-mention-dd.on{display:flex}
.fm-tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;scrollbar-width:none}
.fm-tabs::-webkit-scrollbar{display:none}
.fm-tab{padding:8px 12px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .15s;user-select:none}
.fm-tab:hover{color:var(--text)}
.fm-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.fm-results{overflow-y:auto;flex:1;max-height:360px}
.fm-item{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;cursor:pointer;transition:background .1s}
.fm-item:hover,.fm-item.active{background:var(--bg-hover)}
.fm-item.disabled{opacity:.55;cursor:not-allowed}
.fm-item.disabled:hover{background:none}
.fm-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center;line-height:20px;margin-top:1px}
.fm-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.fm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:18px;color:var(--text)}
.fm-path{font-size:11px;line-height:15px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.fm-mtime{flex-shrink:0;font-size:11px;line-height:18px;color:var(--dim);white-space:nowrap;padding-left:8px;margin-top:1px;font-family:var(--mono)}
.fm-author{flex-shrink:0;font-size:11px;line-height:18px;color:var(--dim);white-space:nowrap;padding-left:6px;margin-top:1px}
.fm-author::before{content:'\00b7\00a0'}
.fm-empty{padding:16px;text-align:center;color:var(--muted);font-size:12px}
.fm-hint{display:flex;align-items:center;gap:10px;padding:7px 10px;border-top:1px solid var(--border);color:var(--dim);font-size:11px;line-height:14px;flex-shrink:0;background:var(--bg-card);user-select:none}
.fm-hint span{white-space:nowrap}
.fm-key{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--muted);font-family:var(--mono);font-size:10px;line-height:1}
/* File mention link in view mode */
.file-mention-link{color:#2563eb;text-decoration:underline;cursor:pointer;display:inline;white-space:nowrap}
.file-mention-link:hover{color:#1d4ed8}
.file-mention-link.broken{color:var(--red);text-decoration:line-through;cursor:default}
.file-mention-icon{font-size:.85em;margin-right:2px}

/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:var(--green2);color:var(--green);border:1px solid var(--green);padding:10px 16px;border-radius:8px;font-size:13px;z-index:300;transform:translateY(80px);opacity:0;transition:all .3s}
.toast.on{transform:translateY(0);opacity:1}
.toast.err{background:var(--red2);color:var(--red);border-color:var(--red)}

/* Task Toast */
.task-toast-stack{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}
.task-toast-stack>*{pointer-events:auto}
.task-toast{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;min-width:280px;max-width:380px;box-shadow:0 4px 16px rgba(0,0,0,.12);transform:translateX(120%);opacity:0;transition:transform .35s ease,opacity .35s ease;overflow:hidden}
.task-toast.on{transform:translateX(0);opacity:1}
.tt-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg)}
.tt-hdr-label{font-size:12px;font-weight:500;color:var(--green)}
.tt-close{background:none;border:none;font-size:16px;color:var(--dim);cursor:pointer;padding:2px 4px;line-height:1}
.tt-close:hover{color:var(--text)}
.task-toast .card{border:none;border-radius:0;padding:10px 12px}
.task-toast .card:hover{border-color:transparent;transform:none}

/* Detail Overlay */
#detail-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-card);z-index:250;flex-direction:column;opacity:0;transition:opacity .2s}
#detail-overlay.on{display:flex;opacity:1}
.detail-header{display:flex;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border);gap:12px;flex-shrink:0}
.detail-header .detail-back{font-size:20px;cursor:pointer;color:var(--muted);padding:4px 8px;border-radius:4px;transition:all .15s;line-height:1}
.detail-header .detail-back:hover{background:var(--bg-hover);color:var(--text)}
#detail-title{flex:1;font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#detail-copy-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;cursor:pointer;font-family:var(--sans);transition:all .15s;display:flex;align-items:center;gap:4px}
#detail-copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.detail-body{display:flex;flex:1;overflow:hidden}
.detail-center{flex:1;padding:24px 32px;overflow-y:auto;max-width:100%}
#detail-md-content{font-size:14px;line-height:1.7;max-width:760px}
#detail-md-content h1{font-size:22px;font-weight:700;margin:20px 0 12px;border-bottom:1px solid var(--border);padding-bottom:8px}
#detail-md-content h2{font-size:18px;font-weight:600;margin:16px 0 8px}
#detail-md-content h3{font-size:15px;font-weight:600;margin:12px 0 6px}
#detail-md-content h4{font-size:14px;font-weight:600;margin:10px 0 6px}
#detail-md-content h5{font-size:13px;font-weight:600;margin:8px 0 4px}
#detail-md-content h6{font-size:12px;font-weight:600;margin:8px 0 4px;color:var(--muted)}
#detail-md-content p{margin:8px 0}
#detail-md-content ul,#detail-md-content ol{margin:8px 0;padding-left:24px}
#detail-md-content li{margin:4px 0}
#detail-md-content code{background:var(--bg-col);padding:2px 6px;border-radius:3px;font-family:var(--mono);font-size:13px}
#detail-md-content pre{position:relative;background:#1e1e2e;color:#cdd6f4;padding:16px;border-radius:8px;overflow-x:auto;margin:12px 0}
#detail-md-content pre code{background:none;padding:0;color:inherit;font-size:13px}
#detail-md-content blockquote{border-left:3px solid var(--accent);padding-left:12px;color:var(--muted);margin:8px 0;background:var(--bg-col);border-radius:0 4px 4px 0;padding:8px 12px}
#detail-md-content a{color:var(--accent);text-decoration:none}
#detail-md-content a:hover{text-decoration:underline}
#detail-md-content table{border-collapse:collapse;width:100%;margin:12px 0}
#detail-md-content th,#detail-md-content td{border:1px solid var(--border);padding:8px 12px;text-align:left;font-size:13px}
#detail-md-content th{background:var(--bg-col);font-weight:600}
#detail-md-content img{max-width:100%;height:auto;border-radius:8px;display:block;margin:12px auto;cursor:zoom-in;box-shadow:0 2px 8px rgba(0,0,0,.08)}
/* Markdown Editor */
#detail-editor{width:100%;min-height:400px;border:1px solid var(--border);border-radius:8px;padding:16px;font-family:var(--mono);font-size:14px;line-height:1.7;color:var(--text);background:var(--bg);resize:vertical;tab-size:2}
#detail-editor:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(76,110,245,.12)}
.editor-toolbar{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.editor-status{margin-left:auto;font-size:12px;color:var(--dim);font-family:var(--mono)}
.editor-status.dirty{color:var(--yellow)}
.editor-status.saving{color:var(--accent)}
.editor-status.saved{color:var(--green)}
#detail-sidebar{width:320px;border-left:1px solid var(--border);padding:20px;overflow-y:auto;flex-shrink:0;background:var(--bg-col)}
.detail-prop-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.detail-prop-label{font-size:12px;color:var(--muted);font-weight:500;flex-shrink:0;min-width:60px}
.detail-prop-value{display:flex;align-items:center;justify-content:flex-end;flex:1}
.detail-prop-static{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.detail-due-clickable{font-size:13px;color:var(--text);cursor:pointer;transition:color .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.detail-due-clickable:hover{color:var(--accent)}
.detail-due-empty{color:var(--dim)}
.detail-due-overdue,.detail-due-overdue:hover{color:var(--red)}
.detail-branch-value{gap:6px}
.detail-branch-name{font-size:12px;font-family:var(--mono);color:var(--accent);background:var(--hover);padding:2px 6px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.detail-branch-copy{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;border-radius:4px;display:flex;align-items:center;transition:color .15s}
.detail-branch-copy:hover{color:var(--accent)}
#detail-file-path{font-size:12px;font-family:var(--mono);color:var(--accent);cursor:pointer;text-decoration:none;display:block;margin-top:8px;padding:8px 0;border-bottom:1px solid var(--border)}
#detail-file-path:hover{text-decoration:underline}
#detail-loading{display:flex;align-items:center;justify-content:center;flex:1;color:var(--dim);font-size:14px;gap:8px}
.detail-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#detail-error{display:none;text-align:center;padding:40px;color:var(--red);font-size:14px}
#detail-error.on{display:block}
#detail-empty-body{color:var(--dim);font-style:italic}

/* AI Buttons */
.ai-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;cursor:pointer;font-family:var(--sans);transition:all .15s;display:flex;align-items:center;gap:4px;font-weight:500;white-space:nowrap}
.ai-btn:hover{filter:brightness(.95)}
.ai-btn:disabled{opacity:.5;cursor:not-allowed}
.ai-btn.loading{position:relative;color:transparent!important;pointer-events:none}
.ai-btn.loading::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;top:50%;left:50%;margin:-7px 0 0 -7px}
.ai-claude-btn{border-color:#d97706;background:#fffbeb;color:#92400e}
.ai-claude-btn:hover{background:#fef3c7;border-color:#d97706}
.ai-codex-btn{border-color:#059669;background:#ecfdf5;color:#065f46}
.ai-codex-btn:hover{background:#d1fae5;border-color:#059669}

/* AI Activity */
#ai-activity{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);max-width:760px}
.ai-activity-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.ai-thread{border:1px solid var(--border);border-left:3px solid #d97706;border-radius:10px;background:var(--bg-card);margin-bottom:14px;overflow:hidden}
.ai-thread.thread-codex{border-left-color:#059669}
.thread-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg-col)}
.thread-badge{font-weight:600;padding:2px 8px;border-radius:999px;font-size:11px}
.thread-badge.thread-claude{background:#fef3c7;color:#92400e}
.thread-badge.thread-codex{background:#d1fae5;color:#065f46}
.thread-title{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-meta{font-size:11px;color:var(--muted);font-family:var(--mono)}
.thread-status{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--bg-hover);color:var(--muted)}
.thread-status.running{background:#eff6ff;color:#2563eb}
.thread-status.queued{background:#fffbeb;color:#b45309}
.thread-status.error,.thread-status.timeout,.thread-status.killed{background:#fef2f2;color:#dc2626}
.thread-count{font-size:11px;color:var(--muted);margin-left:auto}
.thread-body{padding:12px}
.thread-messages{display:flex;flex-direction:column;gap:10px}
.msg-bubble{padding:0 0 0 0}
.msg-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg)}
.msg-card.ai{background:#fffaf0}
.msg-card.user{background:#eff6ff}
.msg-head{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap}
.msg-author{font-weight:600;color:var(--text)}
.msg-card.ai .msg-author{color:#b45309}
.msg-card.user .msg-author{color:#2563eb}
.msg-content{font-size:13px;line-height:1.65;word-break:break-word}
.msg-content h1,.msg-content h2,.msg-content h3{margin:8px 0 4px}
.msg-content p{margin:6px 0}
.msg-content pre{position:relative;background:#1e1e2e;color:#cdd6f4;padding:12px;border-radius:6px;overflow-x:auto;margin:8px 0;font-size:12px}
.msg-content code{background:var(--bg-col);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:12px}
.msg-content img,.ai-entry-body img{max-width:100%;height:auto;border-radius:6px;margin:8px 0;cursor:zoom-in}
.thread-spinner{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--dim);font-size:12px}
.thread-spinner .detail-spinner{width:16px;height:16px}
.comment-input-wrapper{position:relative;display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.comment-input{flex:1;min-height:40px;max-height:120px;resize:none;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;line-height:1.5}
.comment-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(76,81,191,.08)}
.comment-send-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:12px;cursor:pointer;font-family:var(--sans)}
.comment-send-btn:disabled{opacity:.5;cursor:not-allowed}
.slash-menu{position:absolute;bottom:100%;left:0;right:60px;margin-bottom:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);max-height:240px;overflow-y:auto;z-index:260;display:none}
.slash-menu.on{display:block}
.slash-empty{padding:12px 14px;color:var(--muted);font-size:12px;text-align:center}
.slash-item{display:flex;align-items:baseline;gap:8px;padding:8px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border)}
.slash-item:last-child{border-bottom:none}
.slash-item:hover,.slash-item.active{background:#f3f4f6}
.slash-item-name{font-weight:600;color:var(--text);white-space:nowrap;min-width:140px}
.slash-item-desc{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.slash-hint{position:absolute;left:0;right:60px;top:100%;color:var(--muted);font-size:11px;font-style:italic;padding:4px 2px 0;display:none}
.slash-hint.on{display:block}
.slash-hint-skill{color:var(--accent);font-weight:600;font-style:normal}
.msg-skill{font-size:11px;color:var(--accent);background:var(--accent2);border-radius:999px;padding:1px 7px}
.session-expired{margin-top:12px;padding:10px 12px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2;color:#991b1b;font-size:12px}
.session-expired button{margin-top:8px;padding:6px 10px;border:1px solid #dc2626;border-radius:6px;background:#fff;color:#dc2626;cursor:pointer}
.thread-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}
.thread-actions .ai-action-btn{opacity:1}
.ai-entry{border:1px solid var(--border);border-radius:8px;margin-bottom:12px;overflow:hidden;transition:all .15s}
.ai-entry-claude{border-left:3px solid #d97706}
.ai-entry-codex{border-left:3px solid #059669}
.ai-entry-header{display:flex;align-items:center;padding:8px 14px;background:var(--bg-col);border-bottom:1px solid var(--border);gap:8px;font-size:12px}
.ai-entry-tool{font-weight:600;padding:2px 8px;border-radius:4px;font-size:11px}
.ai-entry-claude .ai-entry-tool{background:#fef3c7;color:#92400e}
.ai-entry-codex .ai-entry-tool{background:#d1fae5;color:#065f46}
.ai-entry-time{color:var(--muted);font-size:11px;font-family:var(--mono)}
.ai-entry-actions{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.ai-entry:hover .ai-entry-actions{opacity:1}
.ai-action-btn{padding:2px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:11px;cursor:pointer;font-family:var(--sans);transition:all .15s}
.ai-action-btn:hover{border-color:var(--accent);color:var(--accent)}
.ai-kill-btn{margin-left:auto;padding:2px 10px;border-radius:4px;border:1px solid var(--red);background:var(--red2);color:var(--red);font-size:11px;cursor:pointer;font-family:var(--sans);font-weight:500;transition:all .15s}
.ai-kill-btn:hover{background:var(--red);color:#fff}
.ai-entry-body{padding:14px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:500px;overflow-y:auto}
.ai-entry-body h1,.ai-entry-body h2,.ai-entry-body h3,.ai-entry-body h4{margin:8px 0 4px}
.ai-entry-body p{margin:6px 0}
.ai-entry-body pre{position:relative;background:#1e1e2e;color:#cdd6f4;padding:12px;border-radius:6px;overflow-x:auto;margin:8px 0;font-size:12px}
.ai-entry-body code{background:var(--bg-col);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:12px}
.ai-entry-body pre code{background:none;padding:0}
.ai-entry-running .ai-entry-body{color:var(--dim);font-style:italic;display:flex;align-items:center;gap:8px}
.ai-entry-queued .ai-entry-body{color:var(--dim);font-style:italic}
.ai-entry-error .ai-entry-body{color:var(--red)}
.code-copy-btn{position:absolute;top:8px;right:8px;border:1px solid rgba(255,255,255,.16);background:rgba(30,30,46,.88);color:#e2e8f0;padding:4px 8px;border-radius:6px;font-size:11px;font-family:var(--sans);cursor:pointer;opacity:0;transition:opacity .15s,border-color .15s}
pre:hover .code-copy-btn{opacity:1}
.code-copy-btn:hover{border-color:rgba(255,255,255,.4)}
.mermaid-wrapper{margin:12px 0;text-align:center;overflow-x:auto}
.mermaid-wrapper svg{max-width:100%;height:auto}
.mermaid-error{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--red2);border:1px solid rgba(224,49,49,.18);color:var(--red);font-size:12px;text-align:left}
.image-fallback-link{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;border:1px dashed var(--border);background:var(--bg-col);color:var(--accent);font-size:12px;text-decoration:none;word-break:break-all}
.image-fallback-link:hover{text-decoration:underline}
#lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;align-items:center;justify-content:center;flex-direction:column;padding:24px}
#lightbox-overlay.on{display:flex}
#lightbox-overlay img{max-width:min(92vw,1400px);max-height:82vh;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#fff}
#lightbox-caption{margin-top:14px;color:#fff;font-size:13px;max-width:min(92vw,900px);text-align:center;word-break:break-word}

/* Queue Sidebar */
.btn-icon{position:relative;padding:7px 10px;display:inline-flex;align-items:center}
.btn-icon svg{width:18px;height:18px;stroke:var(--muted);stroke-width:2;fill:none}
.btn-icon:hover svg{stroke:var(--text)}
.queue-badge{display:none;position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.queue-badge.on{display:block}
.queue-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:280;opacity:0;transition:opacity .25s}
.queue-overlay.on{display:block;opacity:1}
.queue-sidebar{position:fixed;top:0;right:-320px;width:320px;height:100vh;background:var(--bg-card);border-left:1px solid var(--border);z-index:290;transition:right .25s ease;display:flex;flex-direction:column;box-shadow:-4px 0 16px rgba(0,0,0,.08)}
.queue-sidebar.on{right:0}
.queue-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.queue-sidebar-title{font-size:15px;font-weight:600}
.queue-sidebar-close{font-size:20px;cursor:pointer;color:var(--muted);background:none;border:none;padding:4px 8px;border-radius:4px;transition:all .15s}
.queue-sidebar-close:hover{background:var(--bg-hover);color:var(--text)}
.queue-tabs{display:flex;border-bottom:1px solid var(--border)}
.queue-tab{flex:1;padding:10px 6px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;text-align:center;border-bottom:2px solid transparent;position:relative;transition:all .15s;user-select:none}
.queue-tab:hover{color:var(--text)}
.queue-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.queue-tab-badge{display:none;position:absolute;top:4px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.queue-tab-badge.on{display:block}
.queue-tab-count{font-size:10px;font-family:var(--mono);margin-left:3px;color:var(--dim)}
.queue-tab-content{display:none;flex:1;overflow-y:auto;padding:10px}
.queue-tab-content.on{display:block}
.qcard{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:all .15s;position:relative}
.qcard:hover{border-color:var(--accent2);transform:translateY(-1px)}
.qcard.qcard-unread::after{content:'';position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.qcard.qcard-dragging{opacity:.5;border-style:dashed}
.qcard-title{font-size:13px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:60px}
.qcard-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.qcard-tool{font-weight:600;padding:1px 6px;border-radius:4px;font-size:10px}
.qcard-tool-claude{background:#fef3c7;color:#92400e}
.qcard-tool-codex{background:#d1fae5;color:#065f46}
.qcard-time{font-family:var(--mono);font-size:11px}
.qcard-status{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.qcard-status-completed{background:var(--green)}
.qcard-status-error{background:var(--red)}
.qcard-status-running{background:var(--blue);animation:qpulse 1.5s infinite}
.qcard-status-queued{background:var(--yellow)}
@keyframes qpulse{0%,100%{opacity:1}50%{opacity:.4}}
.qcard-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.qcard:hover .qcard-actions{opacity:1}
.qcard-action-btn{padding:2px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);font-size:11px;cursor:pointer;transition:all .15s;color:var(--muted)}
.qcard-action-btn:hover{border-color:var(--accent);color:var(--accent)}
.qcard-action-btn.danger{color:var(--red)}
.qcard-action-btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.qcard-error{font-size:11px;color:var(--text);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard-spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:qspin .6s linear infinite;margin-right:4px}
@keyframes qspin{to{transform:rotate(360deg)}}
.qcard-empty{text-align:center;padding:30px 10px;color:var(--dim);font-size:13px}

/* ── Mobile Base Classes (hidden on desktop, shown via media query) ── */
.hdr-overflow-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);cursor:pointer;font-size:18px;color:var(--text);flex-shrink:0}
.hdr-overflow-menu{display:none;position:absolute;top:100%;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:6px 0;min-width:180px;z-index:150}
.hdr-overflow-menu.on{display:block}
.hdr-overflow-item{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;color:var(--text);cursor:pointer;min-height:44px;box-sizing:border-box}
.hdr-overflow-item:hover{background:var(--bg-hover)}
.hdr-overflow-sep{height:1px;background:var(--border);margin:4px 0}
.col-hd .expand-icon{display:none;margin-left:4px;font-size:10px;transition:transform .2s}
.col.expanded .col-hd .expand-icon{transform:rotate(90deg)}
.detail-sidebar-toggle{display:none;align-items:center;justify-content:space-between;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;border-bottom:1px solid var(--border);background:var(--bg-col)}
#detail-status-bar{display:none;flex-wrap:wrap;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg-col);font-size:12px;align-items:center}
.toggle-arrow{font-size:10px;transition:transform .2s}
#detail-sidebar.collapsed .toggle-arrow{transform:rotate(-90deg)}
.mobile-filter-bar{display:none;gap:6px;padding:8px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobile-filter-pill{padding:6px 12px;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);font-size:12px;cursor:pointer;white-space:nowrap;user-select:none;min-height:32px;display:flex;align-items:center;gap:4px}
.mobile-filter-pill.on{background:var(--accent2);border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════════
   TABLET BREAKPOINT ≤768px
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  /* Header */
  .hdr{padding:10px 12px;gap:8px;padding-top:calc(10px + var(--safe-top));flex-wrap:wrap;position:relative}
  .hdr h1{font-size:15px;order:1;flex:1 1 auto}
  .hdr-user{font-size:12px}
  #btn-settings,#btn-logout{display:none!important}
  .hdr-r{gap:8px;flex-wrap:nowrap}
  .filter-switch{display:none}
  .hdr-time{display:none}
  #sw-sync{display:none}
  .hdr-overflow-btn{display:inline-flex}

  /* Stats */
  .stats{display:none}

  /* Chip bar */
  .chip-bar{padding:6px 12px;overflow-x:auto;flex-wrap:nowrap;gap:6px}
  .chip-search{width:120px;flex-shrink:0}

  /* Tabs */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{padding:11px 14px;font-size:13px;white-space:nowrap;flex-shrink:0;min-height:44px;display:flex;align-items:center}

  /* View */
  .vw{padding:14px}

  /* Board -> list (Kanban only, not Pipeline) */
  .board:not(.board-pipeline){flex-direction:column;overflow-x:hidden}
  .board:not(.board-pipeline) .col{min-width:0!important;flex:none;width:100%}
  .board:not(.board-pipeline) .col-hd .expand-icon{display:inline}
  .board:not(.board-pipeline) .col-bd{display:none}
  .board:not(.board-pipeline) .col.expanded .col-bd{display:flex}
  .board:not(.board-pipeline) .col-hd{cursor:pointer;min-height:44px}
  .board-pipeline{overflow-x:auto}
  .mobile-filter-bar{display:flex}

  /* Card compact */
  .card{padding:10px}
  .card .t{font-size:13px}
  .card .p{font-size:10px}

  /* Project grid */
  .proj-grid{grid-template-columns:1fr}

  /* Modal */
  .modal{width:95vw;max-width:95vw;max-height:90vh;overflow-y:auto;padding:20px 16px;border-radius:12px}
  .modal input,.modal select{min-height:44px;font-size:16px}
  .modal textarea{font-size:16px}
  .modal .btns{flex-direction:column;gap:10px}
  .modal .btns .btn,.modal .btns .split-dd{width:100%;min-height:44px;justify-content:center}
  .split-dd{flex-direction:row;width:100%}
  .split-dd>.btn-primary:not(.btn-arrow){flex:1}

  /* Detail overlay */
  .detail-body{flex-direction:column}
  .detail-sidebar-toggle{display:flex}
  #detail-status-bar{display:flex}
  #detail-sidebar{width:100%;border-left:none;border-top:1px solid var(--border);max-height:40vh;overflow-y:auto}
  #detail-sidebar.collapsed{max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;border-top:none}
  #detail-sidebar.collapsed #detail-props,#detail-sidebar.collapsed #detail-file-path{display:none}
  .detail-center{padding:16px;flex:1;min-height:0}
  .detail-header{padding:10px 12px;padding-top:calc(10px + var(--safe-top));gap:6px;flex-wrap:wrap}
  #detail-title{font-size:15px;order:1;flex:1 1 calc(100% - 100px)}
  .detail-header .detail-back{order:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:22px}
  #detail-edit-btn,#detail-copy-btn{min-height:36px;font-size:12px;padding:6px 10px}
  #detail-claude-btn,#detail-codex-btn{min-height:36px;font-size:11px;padding:5px 10px}
  .detail-prop-row{padding:10px 0;min-height:44px}

  /* Queue sidebar -> fullscreen */
  .queue-sidebar{width:100vw;right:-100vw;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
  .queue-sidebar.on{right:0}

  /* Toasts */
  .task-toast-stack{bottom:calc(20px + var(--safe-bottom));right:12px;left:12px}
  .task-toast{min-width:0;max-width:100%}
  .toast{bottom:calc(20px + var(--safe-bottom));left:12px;right:12px;text-align:center}

  /* Lightbox */
  #lightbox-overlay{padding:12px;padding-top:calc(12px + var(--safe-top));padding-bottom:calc(12px + var(--safe-bottom))}

  /* Dropdown touch targets */
  .dd-item{padding:8px 10px;min-height:36px}
}

/* ═══════════════════════════════════════════
   SMALL PHONE BREAKPOINT ≤480px
   ═══════════════════════════════════════════ */
@media(max-width:480px){
  .hdr h1{font-size:14px}
  .hdr{padding:8px 10px;gap:6px}
  .tab{padding:10px 10px;font-size:12px}
  .vw{padding:10px}
  .card{padding:8px}
  .card .t{font-size:12px}
  .card .m{font-size:10px}
  .detail-center{padding:12px}
  #detail-md-content{font-size:13px}
  .detail-header{padding:8px 10px}
  #detail-title{flex-basis:calc(100% - 50px)}
  #detail-claude-btn,#detail-codex-btn{font-size:10px;padding:4px 8px}
  .btn{min-height:38px}

  /* Modal bottom sheet */
  .modal{padding:16px 12px;border-radius:16px 16px 0 0;max-height:85vh;margin-top:auto}
  .modal-bg.on{align-items:flex-end}

  /* Dropdown bottom sheet */
  .dd{position:fixed;bottom:0;left:0;right:0;top:auto;border-radius:16px 16px 0 0;max-height:50vh;overflow-y:auto;z-index:250;box-shadow:0 -4px 16px rgba(0,0,0,.15)}
  .dd-item{padding:12px 16px;min-height:44px;font-size:14px}
}

/* Login page */
.login-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:500;flex-direction:column;align-items:center;justify-content:center}
.login-overlay.on{display:flex}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px 20px;width:420px;max-width:100vw;max-height:100dvh;overflow-y:auto;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.08)}
.login-card h1{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--text)}
.quiz-title-hero{font-size:24px;font-weight:800;color:var(--text);margin-bottom:8px}
.quiz-countdown-hero{font-size:inherit;font-weight:inherit;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:1px;line-height:1.1;vertical-align:baseline;transition:color .3s}
.quiz-countdown-hero.urgent{color:var(--red);animation:countdown-pulse .8s ease-in-out infinite}
@keyframes countdown-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media(max-width:768px){.login-card{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;padding:16px 14px;display:flex;flex-direction:column}.login-step{flex:1;display:none!important;flex-direction:column;overflow:hidden}.login-step.on{display:flex!important}}
.login-card .login-subtitle{font-size:13px;color:var(--muted);margin-bottom:8px}
.login-btn{width:100%;padding:9px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .15s;margin-top:4px}
.login-btn:hover{filter:brightness(1.1)}
.login-btn:active{transform:scale(.98)}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
.login-error{font-size:12px;color:var(--red);min-height:14px;margin-top:2px}
.quiz-options{text-align:left;margin:8px 0}
.quiz-option{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;transition:all .15s;margin-bottom:4px;font-size:12px;line-height:1.4;color:var(--text)}
.quiz-option:hover{border-color:var(--accent);background:var(--accent2)}
.quiz-option.selected{border-color:var(--accent);background:var(--accent2)}
.quiz-option input[type="checkbox"]{margin-top:1px;accent-color:var(--accent);flex-shrink:0;width:14px;height:14px}
.quiz-name{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;margin:8px 0 2px;box-sizing:border-box;background:var(--bg);color:var(--text)}
.quiz-name:focus{outline:none;border-color:var(--accent)}
.quiz-submit-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;width:100%}
.quiz-submit-row .login-btn{width:auto;flex:1;margin-top:0}
.quiz-countdown{display:none}
.quiz-toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--accent2);color:var(--accent);padding:6px 16px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none}
.quiz-toast.show{opacity:1}
.login-members{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.login-member{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);cursor:pointer;transition:all .15s;text-align:left}
.login-member:hover{border-color:var(--accent);background:var(--accent2)}
.login-member-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent2);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex-shrink:0}
.login-member-name{font-size:14px;font-weight:500;color:var(--text)}
.login-step{display:none}
.login-step.on{display:block}
.login-back{font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:20px;display:inline-block;transition:color .15s}
.login-back:hover{color:var(--text)}