:root{
  --bg:#f4f6f9; --panel:#fff; --line:#d9dee6; --text:#1d2430; --muted:#6b7585; --accent:#1c5fd6; --accent-soft:#e7efff;
  --sel:#1c5fd6; --head:#eef2f7; --danger:#c92a2a;
  font-family: system-ui, -apple-system, "Segoe UI", "Rubik", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14171c; --panel:#1c2027; --line:#323844; --text:#e6e9ee; --muted:#9aa3b2; --accent:#5b8ff0; --accent-soft:#22324f; --head:#232833; --sel:#6d9cff }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}
.hidden{display:none!important}
button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 10px;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.ghost{border-color:transparent;background:transparent;font-size:18px}
button.danger{color:var(--danger)}
input,select{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 9px}

.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 8px 30px rgba(0,0,0,.08);width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;position:relative}
.card.wide{max-width:820px;max-height:86vh;overflow:auto}
.card h1{font-size:20px;margin:0 0 4px}
.card label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.err{color:var(--danger);min-height:1em;font-size:14px}

#app{display:flex;flex-direction:column;height:100%}
.top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.title{font-weight:700;font-size:16px;white-space:nowrap}
.search{position:relative;flex:0 1 280px;min-width:160px}
.search input{width:100%}
.results{position:absolute;top:110%;right:0;left:0;min-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);max-height:60vh;overflow:auto;z-index:50}
.results .r{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--line);font-size:14px}
.results .r:hover,.results .r.on{background:var(--accent-soft)}
.results .r small{display:block;color:var(--muted);font-size:12px}
.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tools button{padding:4px 8px;font-size:13px}
.swatches{display:inline-flex;gap:3px;margin-inline-start:4px}
.swatches i{width:18px;height:18px;border-radius:4px;border:1px solid var(--line);cursor:pointer;display:inline-block}
.spacer{flex:1}
.presence{display:flex;gap:4px}
.presence span{font-size:12px;color:#fff;border-radius:12px;padding:2px 8px;white-space:nowrap}
.conn{width:10px;height:10px;border-radius:50%;background:#aaa;display:inline-block}
.conn.on{background:#2f9e44}.conn.off{background:#e03131}
.menu{position:relative}
.pop{position:absolute;left:0;top:110%;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);display:flex;flex-direction:column;min-width:240px;z-index:60;padding:6px}
.pop a,.pop button{border:0;text-align:right;padding:8px 10px;border-radius:6px;text-decoration:none;color:inherit;font-size:14px;background:transparent}
.pop a:hover,.pop button:hover{background:var(--accent-soft)}
.pop .me{padding:6px 10px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);margin-bottom:4px}
.banner{background:#fff3bf;color:#5c4400;padding:6px 12px;font-size:14px;text-align:center}

.gridWrap{flex:1;overflow:auto;position:relative;background:var(--panel)}
.grid{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}
.grid td,.grid th{border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 7px;height:26px;vertical-align:middle;white-space:pre-wrap;word-break:break-word;position:relative;outline:none;line-height:1.35}
.grid th{background:var(--head);color:var(--muted);font-weight:500;font-size:12px;position:sticky;top:0;z-index:3;height:22px;padding:2px;user-select:none}
.grid th.rn,.grid td.rn{background:var(--head);color:var(--muted);font-size:11px;text-align:center;position:sticky;right:0;z-index:2;width:40px;padding:0;user-select:none}
.grid th.rn{z-index:4}
.grid td.c{text-align:center}
.grid td.sel{box-shadow:inset 0 0 0 2px var(--sel);z-index:1}
.grid td.editing{box-shadow:inset 0 0 0 2px var(--sel);background:var(--panel)!important;color:var(--text)!important;cursor:text}
.grid td.hit{background:#fff3a3!important;color:#222!important}
.grid tr.rowsel td.rn{background:var(--accent-soft);color:var(--accent);font-weight:700}
.grid td .peer{position:absolute;top:-1px;left:-1px;font-size:10px;color:#fff;padding:0 4px;border-radius:3px 3px 0 0;transform:translateY(-100%);white-space:nowrap;z-index:5;pointer-events:none}
.grid td.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:var(--flash,#ffe066)}100%{}}
.grid th .rs{position:absolute;left:-3px;top:0;bottom:0;width:6px;cursor:col-resize}

.tabs{display:flex;gap:2px;padding:4px 8px;background:var(--head);border-top:1px solid var(--line);overflow-x:auto;flex-shrink:0}
.tabs button{border-radius:0 0 8px 8px;border-top:0;white-space:nowrap;font-size:14px;background:transparent;border-color:transparent}
.tabs button.on{background:var(--panel);border-color:var(--line);font-weight:700;color:var(--accent)}

.ctx{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:90;padding:5px;display:flex;flex-direction:column;min-width:200px}
.ctx button{border:0;text-align:right;padding:7px 10px;background:transparent;font-size:14px;border-radius:6px}
.ctx button:hover{background:var(--accent-soft)}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 0}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.x{position:absolute;left:12px;top:12px;border:0;background:transparent;font-size:18px}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list td,table.list th{border-bottom:1px solid var(--line);padding:6px;text-align:right;vertical-align:top}
table.list th{color:var(--muted);font-weight:500}
.row-form{display:flex;gap:6px;flex-wrap:wrap;align-items:end}
.row-form input,.row-form select{min-width:0;flex:1 1 120px}
.muted{color:var(--muted);font-size:13px}
.toast{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:8px 16px;border-radius:8px;z-index:120;font-size:14px}

body.viewer .edit-only, body:not(.admin) .admin-only{display:none!important}

@media (max-width:700px){
  .top{gap:6px;padding:6px 8px}
  .title{font-size:14px;max-width:40vw;overflow:hidden;text-overflow:ellipsis}
  .search{order:10;flex:1 1 100%}
  .tools{order:11;width:100%}
  .tools button{font-size:12px}
  .presence span{font-size:11px;padding:1px 6px}
  .grid{font-size:13px}
}