:root {
  color-scheme: light;
  --ground:#e9efe8; --surface:#ffffff; --raised:#f5f8f4;
  --border:#e0e6df; --rule:#e9eee8; --control:#cfd8cf;
  --text:#111814; --muted:#59645c; --faint:#6e7770;
  --primary:#14382a; --green:#2f6b4f;
  --negative:#c53a30; --warning:#9b641e;
  --radius:16px; --radius-control:9px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Segoe UI",sans-serif;
  --mono:"SF Mono","SFMono-Regular","Menlo",monospace;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--text); font:14px/1.5 var(--font); }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--green); text-decoration:none; }

.boot { display:grid; place-items:center; min-height:100vh; color:var(--muted); }
.login-wrap { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; }
.login-hero { background:var(--primary); color:#f7fbf8; padding:56px; display:flex; flex-direction:column; justify-content:space-between; }
.login-hero h1 { font-size:34px; margin:0 0 10px; letter-spacing:-.02em; }
.login-hero p { color:rgba(247,251,248,.72); max-width:420px; }
.login-hero .tag { font-size:12px; letter-spacing:.14em; color:rgba(247,251,248,.55); }
.login-panel { display:grid; place-items:center; padding:40px; background:var(--surface); }
.login-card { width:min(360px,100%); }
.login-card h2 { margin:0 0 4px; font-size:22px; }
.login-card .sub { color:var(--muted); margin:0 0 24px; font-size:13px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:12px; color:var(--muted); }
.field input, .field select, .field textarea {
  border:1px solid var(--control); border-radius:var(--radius-control); padding:9px 11px; background:var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid rgba(47,107,79,.25); border-color:var(--green); }
.field .hint { font-size:12px; color:var(--faint); }
.field .error { font-size:12px; color:var(--negative); }
.btn { border:1px solid var(--control); background:var(--surface); border-radius:var(--radius-control); padding:8px 14px; cursor:pointer; }
.btn:hover { border-color:var(--green); }
.btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.primary:hover { background:#1c4a37; }
.btn.danger { color:var(--negative); border-color:#e8c7c3; }
.btn.ghost { border-color:transparent; background:transparent; color:var(--muted); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.login-card .btn.primary { width:100%; padding:10px; }
.login-error { min-height:20px; color:var(--negative); font-size:13px; margin-top:10px; }

.shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.rail { background:var(--primary); color:rgba(247,251,248,.82); padding:18px 14px; display:flex; flex-direction:column; gap:18px; }
.rail .brand { display:flex; align-items:center; gap:10px; padding:4px 8px 12px; border-bottom:1px solid #27483b; }
.rail .brand b { color:#fff; font-size:15px; letter-spacing:.02em; }
.rail .brand span { font-size:11px; color:rgba(247,251,248,.55); display:block; }
.rail nav { display:flex; flex-direction:column; gap:2px; overflow:auto; }
.rail .nav-title { font-size:11px; letter-spacing:.12em; color:rgba(247,251,248,.45); padding:12px 10px 4px; }
.rail a { color:rgba(247,251,248,.82); padding:7px 10px; border-radius:8px; display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.rail a:hover { background:#234538; color:#fff; }
.rail a.active { background:#305044; color:#fff; }
.rail a .count { font-size:11px; color:rgba(247,251,248,.5); }
.rail .foot { margin-top:auto; font-size:11px; color:rgba(247,251,248,.45); padding:10px; border-top:1px solid #27483b; }
.rail .foot-logout { margin-top:6px; }
.rail .foot-logout a { padding:0; color:inherit; }

.main { padding:26px 30px 60px; max-width:1240px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.topbar .crumb { color:var(--muted); font-size:13px; }
.userbox { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:12px; background:var(--raised); color:var(--muted); border:1px solid var(--border); }
.badge.write { background:#e9f1ea; color:var(--primary); border-color:#cfe0d4; }
.badge.readonly { background:#fff8ea; color:var(--warning); border-color:#f0dfc2; }
.badge.lock { background:#fff3f1; color:var(--negative); border-color:#f3d4d0; }

h1.page-title { font-size:26px; margin:0 0 4px; letter-spacing:-.01em; }
.page-sub { color:var(--muted); font-size:13px; margin:0 0 22px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; cursor:pointer; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--green); transform:translateY(-1px); }
.card .label { font-size:15px; font-weight:600; }
.card .meta { color:var(--muted); font-size:12px; margin-top:6px; display:flex; justify-content:space-between; }
.section-title { font-size:12px; letter-spacing:.1em; color:var(--faint); margin:28px 0 10px; }

.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar input[type=search], .toolbar select { border:1px solid var(--control); border-radius:var(--radius-control); padding:7px 10px; background:var(--surface); }
.toolbar .spacer { flex:1; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table.grid { width:100%; border-collapse:collapse; font-size:13px; }
table.grid th { text-align:left; padding:10px 14px; background:var(--raised); color:var(--muted); font-weight:500; font-size:12px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.grid td { padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top; }
table.grid tr:last-child td { border-bottom:0; }
table.grid tbody tr { cursor:pointer; }
table.grid tbody tr:hover { background:var(--raised); }
.empty { padding:36px; text-align:center; color:var(--faint); font-size:13px; }
.pager { display:flex; align-items:center; gap:10px; justify-content:flex-end; padding:12px 14px; color:var(--muted); font-size:12px; border-top:1px solid var(--rule); }

.detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.detail-head h1 { margin:0; font-size:24px; }
.detail-head .sub { color:var(--muted); font-size:13px; margin-top:4px; }
.detail-actions { display:flex; gap:8px; }
.sections { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.9fr); gap:16px; align-items:start; }
.section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
.section h3 { margin:0 0 12px; font-size:14px; }
.kv { display:grid; grid-template-columns:150px 1fr; gap:8px 14px; font-size:13px; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; word-break:break-word; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.form-grid .field.full { grid-column:1/-1; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.history { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:12px; }
.history li { border-left:2px solid var(--rule); padding-left:10px; }
.history .when { color:var(--faint); }
.history .what { color:var(--muted); }
.history .diff { color:var(--text); font-family:var(--mono); font-size:11px; margin-top:2px; word-break:break-all; }

.toast { position:fixed; right:22px; bottom:22px; max-width:360px; background:var(--primary); color:#fff; padding:11px 14px; border-radius:10px; font-size:13px; box-shadow:0 10px 30px rgba(20,42,30,.18); z-index:50; }
.toast.error { background:#7d2a24; }
.toast[hidden] { display:none; }
.modal-mask { position:fixed; inset:0; background:rgba(16,28,20,.44); display:grid; place-items:center; z-index:40; }
.modal { background:var(--surface); border-radius:14px; padding:20px; width:min(420px,92vw); }
.modal h3 { margin:0 0 8px; font-size:16px; }
.modal p { color:var(--muted); font-size:13px; margin:0 0 14px; }

@media (max-width: 900px) {
  .login-wrap { grid-template-columns:1fr; }
  .login-hero { display:none; }
  .shell { grid-template-columns:1fr; }
  .rail { flex-direction:row; align-items:center; overflow:auto; padding:10px 12px; }
  .rail .brand, .rail .nav-title, .rail .foot { display:none; }
  .rail nav { flex-direction:row; }
  .main { padding:18px 14px 40px; }
  .sections { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
}