:root { --bg:#f3f4f6; --card:#fff; --line:#e5e7eb; --ink:#1f2937; --mute:#6b7280; --accent:#2563eb; --red:#dc2626; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
button { font:inherit; color:inherit; }
.muted { color:var(--mute); }
.small { font-size:12px; }
.nowrap { white-space:nowrap; }

.topbar { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); padding:8px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; justify-content:space-between; }
.tb-left, .tb-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.brand { font-size:15px; }
.pages { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.pages button { border:0; background:#fff; padding:6px 12px; cursor:pointer; }
.pages button + button { border-left:1px solid var(--line); }
.pages button.on { background:var(--ink); color:#fff; }
.status { flex-basis:100%; font-size:12px; min-height:16px; }
.btn { border:1px solid var(--line); background:#fff; border-radius:6px; padding:5px 12px; cursor:pointer; }
.btn:hover { border-color:#9ca3af; }
.btn.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.link { border:0; background:none; color:var(--accent); cursor:pointer; padding:0; font-size:12px; }

main { padding:10px 10px 60px; max-width:1400px; margin:0 auto; }
.page { display:none; }
.page.on { display:block; }
.hint { margin:2px 4px 8px; font-size:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; }

/* 方塊 */
.grid-stack-item-content { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.blk { display:flex; flex-direction:column; height:100%; }
.blk-head { display:flex; align-items:center; gap:6px; padding:6px 10px; border-bottom:1px solid var(--line); background:#fafafa; cursor:move; user-select:none; min-height:33px; }
.blk-head .grip { color:#9ca3af; }
.blk-title { font-weight:600; font-size:13px; flex:1; }
.tog { border:1px solid var(--line); background:#fff; border-radius:5px; font-size:12px; padding:1px 8px; cursor:pointer; }
.blk-body { padding:10px; overflow:auto; flex:1; }
.collapsed .blk-body { display:none; }
.collapsed .blk-head { border-bottom:0; }
.grid-stack-placeholder > .placeholder-content { border:1px dashed #9ca3af; border-radius:8px; background:rgba(0,0,0,.04) !important; }

/* 頁籤 */
.co-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.co-tab { position:relative; border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 16px; cursor:pointer; white-space:nowrap; }
.co-tab.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:6px; vertical-align:middle; }

/* 營收、公司 */
.rev { display:flex; gap:28px; flex-wrap:wrap; margin-bottom:8px; }
.big { font-size:20px; font-weight:700; }
.bar { height:8px; background:#eef0f3; border-radius:4px; overflow:hidden; margin:6px 0; }
.bar span { display:block; height:100%; background:#4b5563; }
.co { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.co-name { font-size:20px; font-weight:700; }
.ring-btn { border:1px solid var(--line); background:#fff; border-radius:10px; padding:4px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.ring-btn:hover { border-color:#9ca3af; }
.tag-pending { display:inline-block; border:1px dashed #9ca3af; border-radius:4px; font-size:11px; padding:0 5px; color:var(--mute); margin-left:6px; vertical-align:middle; font-weight:400; }

/* 待辦 */
.todo-list { list-style:none; margin:0; padding:0; }
.todo { border:1px solid var(--line); border-radius:6px; padding:6px 8px; margin-bottom:6px; background:#fff; }
.todo-row { display:flex; align-items:center; gap:6px; }
.todo-grip { cursor:grab; color:#9ca3af; padding:0 2px; }
.rank { font-size:11px; color:var(--mute); border:1px solid var(--line); border-radius:4px; padding:0 4px; }
.todo-title { flex:1; font-weight:600; }
.lv { font-size:11px; border-radius:4px; padding:0 6px; border:1px solid var(--line); white-space:nowrap; }
.lv-高 { background:#111827; color:#fff; border-color:#111827; }
.lv-中 { background:#e5e7eb; }
.lv-低 { background:#fff; color:var(--mute); }
.todo-meta { font-size:12px; margin:2px 0 2px 22px; }
.subs { margin:2px 0 0 22px; padding-left:16px; font-size:12px; }
.more { margin-left:38px; }
.sortable-ghost { opacity:.35; }

/* 人、清單 */
.mini { width:100%; border-collapse:collapse; }
.mini td { padding:4px 2px; border-bottom:1px solid var(--line); }
.missing { color:var(--red); font-weight:600; }
.people, .plain { list-style:none; margin:0; padding:0; }
.people li, .plain li { padding:4px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; }
.add-row { display:flex; gap:6px; margin-top:8px; }
.add-row input { flex:1; min-width:0; border:1px dashed #9ca3af; border-radius:6px; padding:4px 8px; font:inherit; }

/* 表格 */
.filters { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.filters select { font:inherit; padding:3px 6px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.table-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th, .tbl td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th { font-size:12px; color:var(--mute); font-weight:600; white-space:nowrap; }
.tbl th.sortable { cursor:pointer; }
.tbl th.sortable::after { content:" ↕"; color:#c0c4cc; }
.tbl th.sortable.on { color:var(--ink); }
.tbl th.sortable.on::after { content:" ↑"; color:var(--ink); }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl tr.us td { background:#f5f8ff; font-weight:600; }
.tbl tr.total td { font-weight:700; }
.sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:8px; }

.eq-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.eq-head h2 { margin:0; font-size:18px; }
.eq-body { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; margin-top:14px; }
.eq-body .table-wrap { flex:1; min-width:280px; }

@media (max-width: 767px) {
  .topbar { padding:8px; }
  .tb-right { gap:6px; }
  #modeLabel { flex-basis:100%; font-size:12px; }
  .pages button { padding:5px 9px; }
  main { padding:6px 4px 60px; }
}