:root { --bg:#f8fafc; --fg:#111827; --mut:#6b7280; --line:#e5e7eb; --card:#fff; --acc:#2563eb; --ok:#059669; --warn:#b45309; --side:#1f2937; --sidefg:#e5e7eb; --row:34px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1220; --fg:#e5e7eb; --mut:#9ca3af; --line:#1f2a3c; --card:#111a2b; --acc:#60a5fa; --side:#0f172a; } }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display:none !important; }
button { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:6px; padding:6px 12px; cursor:pointer; }
button.pri { background:var(--acc); color:#fff; border-color:var(--acc); }
button.mini { padding:0 7px; font-size:13px; line-height:20px; }
input, select, textarea { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
textarea { width:100%; min-height:120px; resize:vertical; }
a { color:var(--acc); }
.login { display:flex; align-items:center; justify-content:center; height:100%; }
.login form { display:flex; flex-direction:column; gap:10px; width:min(320px, 90vw); }
.shell { display:grid; grid-template-columns: 230px 1fr; height:100%; }
.side { background:var(--side); color:var(--sidefg); padding:12px 8px; overflow:auto; display:flex; flex-direction:column; gap:1px; }
.side a { color:var(--sidefg); text-decoration:none; padding:5px 10px; border-radius:6px; display:flex; justify-content:space-between; }
.side a.on, .side a:hover { background:#374151; }
.brand { font-weight:700; padding:4px 10px 10px; letter-spacing:.5px; }
.side-h { margin-top:14px; padding:4px 10px; color:#9ca3af; font-size:12px; text-transform:uppercase; display:flex; justify-content:space-between; }
.side-foot { margin-top:auto; padding-top:14px; font-size:13px; }
.count { color:#9ca3af; font-size:12px; }
.side .count.overdue { background:#dc2626; color:#fff; border-radius:9px; padding:0 6px; font-weight:600; }
.side .count.overdue:empty { display:none; }
main { overflow:auto; padding:0 20px 90px; }
.capture { position:sticky; top:0; z-index:5; display:flex; gap:8px; padding:12px 0; background:var(--bg); }
.capture input { flex:1; padding:9px 12px; font-size:16px; }
h2 { margin:6px 0 12px; font-size:20px; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.chip { border:1px solid var(--line); border-radius:999px; padding:3px 11px; background:var(--card); cursor:pointer; font-size:14px; }
.chip.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.it { display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border-top:1px solid var(--line); }
.it:first-child { border-top:0; }
.it .t { flex:1; cursor:pointer; }
.it .meta { color:var(--mut); font-size:13px; }
.it input[type=checkbox] { margin-top:4px; width:18px; height:18px; }
.empty { color:var(--mut); padding:24px; text-align:center; }
.tag { display:inline-block; font-size:12px; border-radius:4px; padding:0 6px; margin-right:4px; background:#e0e7ff; color:#3730a3; }
.tag.st { background:#dcfce7; color:#166534; }
.tag.warn { background:#fef3c7; color:#92400e; }
@media (prefers-color-scheme: dark) { .tag { background:#1e293b; color:#c7d2fe; } .tag.st { background:#052e1b; color:#86efac; } .tag.warn { background:#3b2a07; color:#fcd34d; } }
.clarify { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; max-width:720px; }
.clarify .title { font-size:20px; width:100%; margin-bottom:10px; }
.keys { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.keys button kbd { font-size:11px; color:var(--mut); margin-left:6px; }
.hint { color:var(--warn); font-size:13px; }
.grid2 { display:grid; grid-template-columns: 140px 1fr; gap:8px 12px; align-items:center; }
/* table */
.tbl-wrap { border:1px solid var(--line); border-radius:8px; background:var(--card); overflow:auto; height:calc(100vh - 210px); position:relative; }
.tbl { display:grid; min-width:1100px; }
.tr { display:grid; grid-template-columns: 2.4fr .9fr 1fr 1.3fr .9fr .9fr 1fr .8fr .6fr .6fr .9fr; height:var(--row); border-bottom:1px solid var(--line); }
.tr > div { padding:6px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.th { position:sticky; top:0; background:var(--card); z-index:2; font-weight:600; font-size:13px; cursor:pointer; user-select:none; }
.tg { font-weight:600; background:var(--bg); padding:6px 8px; height:var(--row); border-bottom:1px solid var(--line); }
.cell-edit { width:100%; padding:2px 4px; }
/* board */
.board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:10px; overflow:auto; }
.col { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px; min-height:200px; }
.col.over { outline:2px dashed var(--acc); }
.col h3 { margin:2px 4px 8px; font-size:14px; text-transform:capitalize; }
.card { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:7px 9px; margin-bottom:6px; cursor:grab; font-size:14px; }
/* outline */
.ol { max-width:860px; }
.ol-row { display:flex; align-items:center; min-height:30px; }
.ol-row .bul { width:22px; text-align:center; cursor:pointer; color:var(--mut); user-select:none; flex:none; }
.ol-row .bul.has { color:var(--fg); font-weight:700; }
.ol-row input { flex:1; border:0; background:transparent; padding:4px 2px; border-radius:4px; }
.ol-row input:focus { outline:none; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.crumbs { color:var(--mut); margin-bottom:8px; font-size:14px; }
.crumbs a { cursor:pointer; }
.suggest { position:absolute; z-index:20; background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.15); min-width:180px; }
.suggest div { padding:5px 10px; cursor:pointer; }
.suggest div.on { background:var(--acc); color:#fff; }
.help { color:var(--mut); font-size:13px; margin-top:14px; }
/* panel (item editor) */
.panel { position:fixed; top:0; right:0; bottom:0; width:min(480px, 100vw); background:var(--card); border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(0,0,0,.12); padding:16px; overflow:auto; z-index:30; }
.panel .row { margin-bottom:10px; }
.panel label { display:block; font-size:12px; color:var(--mut); margin-bottom:2px; }
.panel input, .panel select { width:100%; }
.palette { position:fixed; top:12vh; left:50%; transform:translateX(-50%); width:min(520px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.25); z-index:40; padding:8px; }
.palette input { width:100%; font-size:16px; }
.palette div div { padding:6px 10px; cursor:pointer; border-radius:6px; }
.palette div div.on { background:var(--acc); color:#fff; }
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:8px 14px; border-radius:8px; z-index:50; }
.review li { margin-bottom:14px; }
.review li > label { font-weight:600; }
.tabs { display:none; }
.more a { display:block; padding:12px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg); }
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { display:none; }
  main { padding:0 12px calc(80px + env(safe-area-inset-bottom)); }
  .tabs { display:grid; grid-template-columns: repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; background:var(--side); padding-bottom:env(safe-area-inset-bottom); z-index:25; }
  .tabs a { color:var(--sidefg); text-align:center; padding:14px 0; text-decoration:none; font-size:14px; }
  .tabs a.on { color:#fff; background:#374151; }
  .it { padding:12px; }
  .grid2 { grid-template-columns: 1fr; }
  .keys button { padding:10px 14px; }
  .tbl-wrap { height:calc(100vh - 260px); }
}
@media (max-width: 760px) { .pc-only { display:none; } }
/* ---- v2 additions ---- */
.acct { display:block; font-weight:400; font-size:12px; color:#9ca3af; letter-spacing:0; }
.who { color:#9ca3af; font-size:12px; padding:4px 10px 8px; }
.support { background:#7c2d12; color:#fff; font-size:12px; padding:6px 10px; border-radius:6px; margin:0 4px 8px; }
.tag.red, .overdue { background:#fee2e2; color:#991b1b; }
.it.overdue-row .t > div:first-child { color:#b91c1c; font-weight:600; }
.tag.asg { background:#fef9c3; color:#854d0e; }
.tag.bot { background:#ede9fe; color:#5b21b6; }
.tag.appr { background:#ffedd5; color:#9a3412; }
@media (prefers-color-scheme: dark) { .tag.red { background:#450a0a; color:#fecaca; } .tag.asg { background:#3a2e05; color:#fde68a; } .tag.bot { background:#2e1065; color:#ddd6fe; } .tag.appr { background:#431407; color:#fed7aa; } }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.box { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:14px; }
.box h3 { margin:0 0 8px; font-size:15px; }
.tabsel { display:flex; gap:6px; margin-bottom:12px; }
table.grid { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px; font-size:14px; }
table.grid th, table.grid td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.grid th { font-size:12px; color:var(--mut); font-weight:600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; word-break:break-all; }
.secret { background:#fef3c7; color:#92400e; padding:8px; border-radius:6px; }
.form-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0; }
.form-row label { font-size:13px; color:var(--mut); }
.out { border-left:3px solid #8b5cf6; padding:4px 10px; margin:8px 0; }
.out pre { white-space:pre-wrap; margin:4px 0 0; font:13px/1.4 ui-monospace, monospace; max-height:240px; overflow:auto; }
.hist { font-size:13px; color:var(--mut); }
.hist div { padding:2px 0; }
.readonly-note { color:var(--mut); font-size:13px; margin:0 0 10px; }
.seats { font-size:14px; }
.seats b { font-size:18px; }
@media (max-width: 760px) { table.grid { font-size:13px; } .hide-phone { display:none; } }
/* v2 additions: role-based visibility, table columns, scrollable admin tables */
body:not(.p-write) .need-write, body:not(.p-manage) .need-manage, body:not(.p-admin) .need-admin,
body:not(.p-super) .need-super, body:not(.p-export-account) .need-export-account { display:none !important; }
.tr { grid-template-columns: 2.4fr .8fr 1fr 1.2fr 1fr .9fr .9fr 1fr .8fr .6fr .9fr; }
.tbl-scroll { overflow-x:auto; }
.panel label > input, .panel label > select, .panel label > textarea { margin-top:2px; color:var(--fg, inherit); font-size:15px; }
.form-row label { font-size:14px; }
.support a { color:#fff; }
/* Inbox list + clarify one by one (2026-10-13) */
.inbox-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.inbox-head h2 { margin:0; }
.inbox-head .count { color:var(--mut); font-weight:normal; }
.clarify-start.big { font-size:16px; padding:10px 18px; }
.inbox-row { cursor:pointer; }
.inbox-row:hover, .inbox-row:focus { background:rgba(37,99,235,.06); outline:none; }
.notes-preview { color:var(--mut); font-size:13px; margin-top:2px; overflow-wrap:anywhere; }
.clarify-nav { margin:4px 0 0; }
@media (max-width: 700px) { .inbox-head .clarify-start { width:100%; } .clarify-nav button { flex:1; min-height:44px; } .inbox-row { padding:12px; } }