:root { --fg:#1d232b; --muted:#66707c; --line:#dfe3e8; --bg:#fff; --soft:#f5f7f9; --accent:#1f6feb; --danger:#c62828; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.top { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--fg); }
.top nav { display:flex; gap:16px; align-items:center; } .who { color:var(--muted); }
.crumbs { padding:10px 20px; background:var(--soft); border-bottom:1px solid var(--line); }
main { padding:16px 20px 40px; max-width:1400px; margin:0 auto; }
.hint { color:var(--muted); } .error { color:var(--danger); }
.button, button { display:inline-block; padding:6px 14px; border:1px solid var(--line); border-radius:6px; background:var(--soft); color:var(--fg); font:inherit; cursor:pointer; }
.button:hover, button:hover { border-color:var(--accent); text-decoration:none; }
button.danger { color:var(--danger); }
input { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; }
.login { max-width:360px; margin:15vh auto; text-align:center; }
.drop { border:2px dashed var(--line); border-radius:10px; padding:16px; text-align:center; margin-bottom:16px; }
.drop.over { border-color:var(--accent); background:#eef4ff; }
.drop input[type=file] { display:none; } .drop label { cursor:pointer; } .link { color:var(--accent); }
table.files { width:100%; border-collapse:collapse; }
.files th, .files td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.files th { color:var(--muted); font-weight:500; }
.num { text-align:right; white-space:nowrap; } .folder { font-weight:600; }
.actions { white-space:nowrap; } .actions details { display:inline-block; margin-left:10px; }
.actions summary { cursor:pointer; color:var(--accent); }
.actions form { display:flex; gap:6px; margin-top:6px; }
.mkdir { display:flex; gap:8px; margin-top:16px; } .mkdir input { min-width:260px; }
.readme { margin-top:24px; padding:16px 20px; border:1px solid var(--line); border-radius:10px; }
.readme table { border-collapse:collapse; } .readme td, .readme th { border:1px solid var(--line); padding:4px 8px; }
.readme pre, pre.text { background:var(--soft); padding:10px; overflow:auto; }
.viewbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.viewbar h1 { font-size:20px; margin:8px 0; word-break:break-all; }
.pdftools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 10px; }
.pdftools .seg { display:inline-flex; } .pdftools .seg button { border-radius:0; margin-left:-1px; }
.pdftools .seg button:first-child { border-radius:6px 0 0 6px; } .pdftools .seg button:last-child { border-radius:0 6px 6px 0; }
.pdftools button.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.notice { background:#fff8e1; border:1px solid #f0d58a; border-radius:8px; padding:6px 12px; }
.pdfview { display:grid; grid-template-columns:1fr 320px; gap:12px; height:78vh; }
.pages { overflow:auto; border:1px solid var(--line); background:#e8ebef; padding:12px; cursor:grab; }
.pages.panning { cursor:grabbing; user-select:none; }
.pdfview[data-tool=pin] .overlay, .pdfview[data-tool=box] .overlay { cursor:crosshair; }
.page { position:relative; margin:0 auto 12px; background:#fff; box-shadow:0 1px 4px #0003; }
.page canvas { position:absolute; inset:0; width:100%; height:100%; }
.page .overlay { position:absolute; inset:0; }
.pageno { position:absolute; left:6px; bottom:-1px; font-size:11px; color:var(--muted); pointer-events:none; }
.mark { position:absolute; padding:0; font:600 12px/1 system-ui, sans-serif; cursor:pointer; }
.mark.pin { width:24px; height:24px; margin:-24px 0 0 -2px; border-radius:12px 12px 12px 2px; background:var(--danger); color:#fff; border:2px solid #fff; box-shadow:0 1px 3px #0006; }
.mark.box { border:2px solid var(--danger); background:#c628280d; border-radius:2px; }
.mark.box .num { position:absolute; left:-2px; top:-20px; background:var(--danger); color:#fff; padding:3px 6px; border-radius:4px 4px 0 0; }
.mark.ghost { border-style:dashed; pointer-events:none; }
.mark.resolved { opacity:.45; filter:grayscale(1); }
.mark.flash, .comments li.flash { outline:3px solid var(--accent); outline-offset:2px; }
.popover { position:absolute; z-index:5; width:260px; margin:6px 0 0 6px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 16px #0003; cursor:auto; }
.popover textarea, .replyform textarea { width:100%; font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; resize:vertical; }
.row { display:flex; gap:6px; margin-top:6px; }
.comments { overflow:auto; border:1px solid var(--line); border-radius:8px; padding:0 12px; }
.comments h2 { font-size:16px; margin:12px 0 8px; }
.comments ol { list-style:none; margin:0; padding:0; }
.comments li { padding:8px; margin-bottom:8px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.comments li.resolved { opacity:.6; }
.comments .head { color:var(--muted); font-size:13px; } .comments .head b { color:var(--danger); }
.comments .text { margin:4px 0; white-space:pre-wrap; }
.comments .reply { margin:6px 0 0 10px; padding-left:8px; border-left:2px solid var(--line); font-size:14px; }
.comments .replyform button { padding:3px 10px; font-size:13px; }
.badge { display:inline-block; margin-left:6px; padding:0 7px; border-radius:9px; background:#fdecea; color:var(--danger); font-size:12px; }
img.image { max-width:100%; }
.drawing { position:relative; height:78vh; border:1px solid var(--line); overflow:hidden; background:#fff; cursor:grab; touch-action:none; }
.drawing img { position:absolute; left:0; top:0; user-select:none; -webkit-user-drag:none; }
.drawing .status { padding:16px; color:var(--muted); }
.newtoken { background:#fff8e1; border:1px solid #f0d58a; border-radius:10px; padding:10px 16px; }
.newtoken code { font-size:14px; word-break:break-all; }
@media (max-width:900px) { .pdfview { grid-template-columns:1fr; height:auto; } .pages { height:70vh; } .comments { max-height:60vh; } }
@media (max-width:700px) { .files th:nth-child(3), .files td:nth-child(3), .files th:nth-child(4), .files td:nth-child(4) { display:none; } }