:root {
  --bg: #f7f8fa; --card: #ffffff; --ink: #22272e; --muted: #6b7280;
  --accent: #0e4e8e; --accent-soft: #e3edf7; --border: #e3e7ec;
  --ok: #1a7f4e; --ok-soft: #e2f4ea; --warn: #a16207; --warn-soft: #fdf3d7;
  --danger: #b42318; --danger-soft: #fdecea;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { background: #ffffff; color: var(--ink); padding: 0 28px; display: flex; align-items: center; gap: 26px; height: 64px; border-bottom: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(20,30,50,.06); }
.topbar .brand { display: flex; align-items: center; }
.topbar .brand img { height: 40px; display: block; }
.topbar .brand .brandtext { font-weight: 700; font-size: 17px; color: var(--accent); letter-spacing: .3px; }
.topbar .brand .brandtext span { color: #c22026; }
.topbar nav { display: flex; gap: 20px; }
.topbar nav a { color: #3d4654; font-size: 14px; font-weight: 600; }
.topbar nav a:hover { color: var(--accent); text-decoration: none; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: var(--muted); }
.topbar .rolechip { background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin-left: 6px; }
.topbar form { margin: 0; }
.topbar button { background: #fff; border: 1px solid var(--border); color: #3d4654; border-radius: 6px; padding: 6px 13px; cursor: pointer; font-size: 13px; }
.topbar button:hover { border-color: var(--accent); color: var(--accent); }

.wrap { max-width: 1080px; margin: 28px auto; padding: 0 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; }
.card h2 { margin: 0 0 4px; font-size: 17px; }
.card .sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 2px solid var(--border); }
td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }

.badge { display: inline-block; border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.b-preparing { background: var(--warn-soft); color: var(--warn); }
.b-shipped, .b-in_transit, .b-customs { background: var(--accent-soft); color: var(--accent); }
.b-delivered { background: var(--ok-soft); color: var(--ok); }
.b-pending_review { background: var(--warn-soft); color: var(--warn); }
.b-published { background: var(--ok-soft); color: var(--ok); }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
label .zh { color: var(--muted); font-weight: 400; }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
button.primary { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 14px; }
button.small { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
button.ghost { background: #fff; color: var(--danger); border: 1px solid var(--danger); border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; }

.notice { border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice.err { background: var(--danger-soft); color: var(--danger); }
.firewall { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }

.auth { max-width: 420px; margin: 60px auto; }
.auth .logo { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 18px; }
.auth .logo span { color: var(--accent); }
.mono { font-family: ui-monospace, monospace; font-size: 13px; }
.muted { color: var(--muted); font-size: 13px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
details summary { cursor: pointer; color: var(--accent); font-size: 14px; margin: 6px 0; }

/* ---------- v2: excel-style project grid ---------- */
.xl-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.xl-toolbar input[type=text] { max-width:340px; }
.xl-toolbar .count { color:var(--muted); font-size:13px; }
.xl { width:100%; border-collapse:collapse; font-size:13.5px; background:#fff;
      border:1px solid #b8c4d0; box-shadow:0 1px 3px rgba(15,30,64,.08); }
.xl th { background:#eef2f7; border:1px solid #c9d3dd; color:#334155; font-size:12px;
         text-transform:uppercase; letter-spacing:.4px; padding:7px 10px; position:sticky; top:0; }
.xl td { border:1px solid #dde5ec; padding:7px 10px; }
.xl tr.row { cursor:pointer; }
.xl tr.row:nth-child(even) td { background:#fafcfe; }
.xl tr.row:hover td { background:#eaf2ff; }
.xl .num { text-align:right; font-variant-numeric:tabular-nums; }
.xl .corner { background:#e3e9f0; width:34px; text-align:center; color:#8a97a5; font-weight:600; }

/* ---------- v2: cleaner review desk (Fable-style, dark) ---------- */
.desk { background:#12151c; border-radius:12px; border:1px solid #232a36; color:#dfe5ee;
        padding:0; overflow:hidden; }
.desk .deskbar { display:flex; align-items:center; gap:8px; padding:9px 14px; background:#181d27;
        border-bottom:1px solid #232a36; flex-wrap:wrap; }
.desk .deskbar .fname { font-weight:700; font-size:14px; }
.desk .deskbar .chip { border-radius:99px; padding:2px 10px; font-size:11.5px; font-weight:700; }
.chip.ready { background:#173a2a; color:#5ade9a; }
.chip.awaiting { background:#3a3117; color:#dec25a; }
.chip.translating { background:#17293a; color:#5aa9de; }
.desk button { background:#232b3a; border:1px solid #33405a; color:#dfe5ee; border-radius:6px;
        padding:6px 12px; font-size:13px; cursor:pointer; }
.desk button:hover { background:#2b3550; }
.desk button.good { background:#14532d; border-color:#166534; color:#bbf7d0; }
.desk button.warn { background:#571f1f; border-color:#7c2d2d; color:#fecaca; }
.desk button.primary { background:#1d4ed8; border-color:#3b82f6; color:#fff; }
.desk button.active { outline:2px solid #3b82f6; }
.desk .pill { background:#232b3a; border-radius:99px; padding:3px 10px; font-size:12px; color:#9fb0c8; }
.desk input[type=text] { background:#0d1017; border:1px solid #33405a; color:#dfe5ee; border-radius:6px;
        padding:6px 9px; font-size:13px; width:auto; }
.panes { display:flex; gap:0; min-height:480px; }
.pane { flex:1; overflow:auto; max-height:74vh; position:relative; background:#0d1017; }
.pane + .pane { border-left:1px solid #232a36; }
.pane .lbl { position:sticky; top:0; left:0; z-index:5; background:#181d27cc; color:#9fb0c8;
        font-size:11px; letter-spacing:.6px; padding:4px 10px; }
.pgwrap { position:relative; display:inline-block; margin:10px; }
.pgwrap img { display:block; box-shadow:0 0 0 1px #2a3140, 0 8px 20px rgba(0,0,0,.5); }
.rbox { position:absolute; background:rgba(255,60,60,.30); border:1.5px solid #ff5555; cursor:move; }
.rbox.sel { background:rgba(255,140,0,.35); border-color:#ffa500; }
.rbox .hd { position:absolute; right:-5px; bottom:-5px; width:10px; height:10px; background:#ffa500;
        border-radius:2px; cursor:nwse-resize; }
.hit { position:absolute; outline:2px dashed #38bdf8; background:rgba(56,189,248,.18); pointer-events:none; }
.trrow { display:grid; grid-template-columns: 30px 1fr 1fr 52px; gap:8px; padding:7px 10px;
        border-bottom:1px solid #1d2430; align-items:start; font-size:13px; }
.trrow.hd { color:#9fb0c8; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.trrow .en { color:#c8d2e0; word-break:break-word; }
.trrow textarea { background:#0d1017; border:1px solid #33405a; color:#dfe5ee; border-radius:6px;
        min-height:34px; font-size:13px; padding:5px 8px; width:100%; }
.trrow input { background:#0d1017; border:1px solid #33405a; color:#dfe5ee; border-radius:6px;
        font-size:12px; padding:4px 6px; width:100%; }
.trrow .sug { color:#7d8ea8; font-size:11.5px; margin-top:3px; }
.trrow .sug a { color:#5aa9de; cursor:pointer; }
.trrow .skiphint { color:#6b7a90; font-size:11.5px; font-style:italic; }
.trsplit { display:flex; min-height:480px; }
.trsplit .trlist { flex:0 0 46%; max-height:74vh; overflow:auto; border-right:1px solid #232a36; }
.trsplit .trprev { flex:1; max-height:74vh; overflow:auto; background:#0d1017; padding:10px; }
.trsplit .trprev img { max-width:100%; box-shadow:0 0 0 1px #2a3140; }
.valreport { padding:8px 12px; font-size:12.5px; }
.valreport .ok { color:#5ade9a; } .valreport .bad { color:#f87171; }
.queue-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.queue-item:hover { background:#f6f9fd; }
.stagechip { border-radius:99px; padding:2px 10px; font-size:11.5px; font-weight:700; }
.stagechip.redact { background:#fee2e2; color:#b91c1c; }
.stagechip.translate { background:#dbeafe; color:#1d4ed8; }
.stagechip.summary { background:#fef3c7; color:#b45309; }

/* ---------- v3: spreadsheet tabs + inline-edit cells ---------- */
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:10px; flex-wrap:wrap; }
.tabs .tab { padding:7px 14px; font-size:13px; font-weight:600; color:var(--muted); border:1px solid transparent;
  border-bottom:none; border-radius:8px 8px 0 0; }
.tabs .tab.on { background:#fff; color:var(--accent); border-color:var(--border); box-shadow:0 -2px 0 var(--accent) inset; }
.tabs .tab .tc { background:var(--accent-soft); color:var(--accent); border-radius:99px; padding:0 7px; font-size:11px; margin-left:4px; }
.xl.sheet th .en { font-weight:400; text-transform:none; letter-spacing:0; color:#94a3b8; font-size:10px; }
.xl.sheet td { padding:2px 4px; }
.xl.sheet input.cell, .xl.sheet select.cell { width:100%; min-width:70px; border:1px solid transparent; background:transparent;
  padding:5px 6px; font-size:13px; border-radius:4px; }
.xl.sheet input.cell.wide { min-width:130px; }
.xl.sheet input.cell:hover, .xl.sheet select.cell:hover { border-color:#d6dde6; background:#fff; }
.xl.sheet input.cell:focus, .xl.sheet select.cell:focus { border-color:var(--accent); background:#fff; outline:none; }
.xl.sheet td.code { font-weight:700; color:var(--accent); white-space:nowrap; }
.xl.sheet select.life { font-size:11px; color:var(--muted); min-width:60px; }
.uplink { cursor:pointer; color:var(--accent); font-weight:700; }
.addrow { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 14px; }
.addrow label { margin:0 0 3px; }
.addrow input, .addrow select { padding:7px 9px; }
@media (max-width:900px){ .addrow { grid-template-columns:1fr 1fr; } }