* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 14px var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--highlight); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { letter-spacing: -.015em; text-wrap: balance; }
.btn { height:var(--h-md); padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink-2); font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:background .12s,border-color .12s; }
.btn:hover { border-color:var(--accent); color:var(--accent-ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:500; }
.btn.primary:hover { background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover { background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }
.btn.danger { background:var(--paper); border-color:var(--error); color:var(--error); }
.btn.sm { height:var(--h-sm); padding:0 10px; font-size:12px; }
.icon-btn { width:var(--h-md); height:var(--h-md); border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink-2); display:grid; place-items:center; }
.icon-btn.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }
.chip { height:var(--h-sm); padding:0 11px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); background:transparent; color:var(--muted); font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.chip[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500; }
.tag { padding:2px 8px; border-radius:var(--radius-pill); background:var(--line); color:var(--ink-2); font-size:10px; }
.tag.accent { background:var(--accent-soft); color:var(--accent-ink); }
.tag.warn { background:var(--warn-soft); color:var(--warn); }
.tag.good { background:var(--good-soft); color:var(--good); }
.field { display:flex; flex-direction:column; gap:6px; }
.field>label, label { font-size:12px; color:var(--muted); }
.input,.select,select,input[type="text"],input[type="password"],input[type="url"],input[type="number"] { min-height:var(--h-md); padding:0 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--panel); color:var(--ink); font-size:13px; }
textarea { min-height:62px; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--panel); color:var(--ink); font-size:13px; line-height:1.6; resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); outline:none; }
.notice { display:flex; gap:10px; padding:11px 13px; border-radius:var(--radius-sm); font-size:13px; line-height:1.6; }
.notice.good { border:1px solid var(--good); background:var(--good-soft); color:var(--good); }
.notice.warn { border:1px solid var(--warn); background:var(--warn-soft); color:var(--warn); }
.notice.error { border:1px solid var(--error); background:var(--error-soft); color:var(--error); }
.progress { height:5px; border-radius:var(--radius-pill); background:var(--line); overflow:hidden; }
.progress>i { display:block; height:100%; background:var(--accent); transition:width .2s; }
.skeleton { height:11px; border-radius:4px; background:var(--line); animation:sk 1.4s ease-in-out infinite; }
@keyframes sk { 0%,100%{opacity:.55} 50%{opacity:1} }
.empty { text-align:center; padding:80px 20px; color:var(--muted); }
.empty h2 { font:600 22px var(--serif); color:var(--ink-2); margin:12px 0 6px; }
dialog { width:min(92vw,640px); border:1px solid var(--line); border-radius:var(--radius-lg); padding:0; background:var(--panel); color:var(--ink); box-shadow:var(--shadow-md); }
dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(2px); }
.global-rail { background:var(--paper); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:14px 0 16px; gap:6px; position:sticky; top:0; height:100dvh; z-index:35; }
.global-brand { width:34px; height:34px; margin-bottom:12px; display:grid; place-items:center; border-radius:7px; background:var(--ink); color:var(--paper); font:700 15px var(--serif); text-decoration:none; }
.global-rail-item { width:40px; height:40px; padding:0; border:0; border-radius:var(--radius); background:transparent; color:var(--muted); display:grid; place-items:center; text-decoration:none; }
.global-rail-item span { display:none; }
.global-rail-item:hover,.global-rail-item[aria-current="page"] { background:var(--accent-soft); color:var(--accent-ink); }
.global-rail-spacer { flex-grow:1; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); }
.dialog-header h3 { font:600 19px var(--serif); margin:0; }
.dialog-body { padding:20px 22px; display:flex; flex-direction:column; gap:16px; max-height:70vh; overflow-y:auto; }
.dialog-footer { display:flex; justify-content:flex-end; gap:8px; padding:14px 22px; border-top:1px solid var(--line); }
/* Phones (any orientation ≤880) and short landscape viewports drop the vertical
   rail for a bottom tab bar. The width must match the app-shell collapse in
   styles.css / media.css so the rail never lingers as a full-height column
   inside a single-column grid (which made landscape phones unreadable). */
@media (max-width:880px), (orientation: landscape) and (max-height: 480px) {
  .btn,.icon-btn { min-height:var(--h-touch); }
  .skeleton{animation:none;}
  .global-rail { position:fixed; inset:auto 0 0; height:auto; flex-direction:row; justify-content:space-around; padding:6px 0 calc(6px + env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--line); }
  .global-brand,.global-rail-spacer { display:none; }
  .global-rail-item { width:auto; height:52px; flex:1; gap:3px; font-size:10px; }
  .global-rail-item span { display:block; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }