:root{
  --bg0:#0a0d18; --bg1:#0e1322; --card:#131a2d; --surface:#10162a;
  --line:#222b4a; --line-soft:#1a2138;
  --ink:#e9ecf6; --ink-2:#9aa3c0; --ink-3:#7d859d;
  --gold:#d8b46e; --gold-dim:#96825a; --gold-ink:#191305;
  --red:#e0665f; --green:#5fbf8f;
  --shadow-1:0 1px 2px #00000040;
  --shadow-2:0 10px 30px #00000059, 0 2px 8px #00000040;
  --body-bg:
    radial-gradient(1200px 600px at 80% -10%, #16204014 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #2a1f3a10 0%, transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 40%,var(--bg0));
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans JP',system-ui,sans-serif;
  --serif:'Shippori Mincho',serif;
  color-scheme: dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg0:#f6f3ec; --bg1:#fdfcf9; --card:#ffffff; --surface:#efe9da;
    --line:#ddd6c4; --line-soft:#e9e3d3;
    --ink:#1c1a24; --ink-2:#524d5c; --ink-3:#6a6574;
    --gold:#a97a2e; --gold-dim:#7e6845; --gold-ink:#fdfcf9;
    --red:#c23d36; --green:#237a54;
    --shadow-1:0 1px 2px #4a3b2014;
    --shadow-2:0 10px 30px #4a3b2026, 0 2px 8px #4a3b2014;
    --body-bg:
      radial-gradient(1200px 600px at 80% -10%, #a97a2e14 0%, transparent 60%),
      radial-gradient(900px 500px at -10% 30%, #52334d0d 0%, transparent 60%),
      linear-gradient(180deg,var(--bg0),var(--bg1) 40%,var(--bg0));
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  --bg0:#f6f3ec; --bg1:#fdfcf9; --card:#ffffff; --surface:#efe9da;
  --line:#ddd6c4; --line-soft:#e9e3d3;
  --ink:#1c1a24; --ink-2:#524d5c; --ink-3:#6a6574;
  --gold:#a97a2e; --gold-dim:#7e6845; --gold-ink:#fdfcf9;
  --red:#c23d36; --green:#237a54;
  --shadow-1:0 1px 2px #4a3b2014;
  --shadow-2:0 10px 30px #4a3b2026, 0 2px 8px #4a3b2014;
  --body-bg:
    radial-gradient(1200px 600px at 80% -10%, #a97a2e14 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #52334d0d 0%, transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 40%,var(--bg0));
  color-scheme: light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .new-badge,
  :root:not([data-theme="dark"]) .skip-link{ background:color-mix(in srgb, var(--gold) 80%, black); }
}
:root[data-theme="light"] .new-badge,
:root[data-theme="light"] .skip-link{ background:color-mix(in srgb, var(--gold) 80%, black); }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
body{
  background:var(--body-bg);
  color:var(--ink); font-family:var(--sans); min-height:100vh;
  font-feature-settings:'palt';
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s, color .2s;
}
::selection{background:var(--gold); color:var(--gold-ink)}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px; border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}
button:focus-visible, a:focus-visible, input:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}

.skip-link{
  position:absolute; top:-100px; left:12px; z-index:1000;
  background:var(--gold); color:var(--gold-ink); font-family:var(--mono); font-size:12px;
  padding:10px 16px; border-radius:0 0 8px 8px; text-decoration:none; transition:top .15s;
}
.skip-link:focus{top:0;}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

header{padding:26px clamp(16px,4vw,48px) 0; max-width:1800px; margin:0 auto;}
.masthead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
h1{font-family:var(--serif); font-weight:700; font-size:clamp(24px,3.2vw,36px); letter-spacing:.06em; line-height:1.1;}
h1 .sub{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.28em;
  color:var(--gold); margin-top:8px; text-transform:uppercase;
}
h1 .sub::before{content:''; width:22px; height:1px; background:var(--gold); flex-shrink:0;}

.statusbar{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; color:var(--ink-3);}
.status-info{display:flex; align-items:center; gap:8px;}
.status-actions{display:flex; align-items:center; gap:14px;}
.statusbar .dot{width:7px; height:7px; border-radius:99px; background:var(--ink-3); flex-shrink:0;}
.statusbar.live .dot{background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2.2s infinite;}
.statusbar.loading .dot{background:var(--red); box-shadow:0 0 8px var(--red); animation:pulse 1s infinite;}
.statusbar.err .dot{background:var(--gold); box-shadow:0 0 8px var(--gold);}
.statusbar.stale .dot{background:var(--gold); box-shadow:0 0 8px var(--gold); animation:pulse 1.6s infinite;}
.statusbar.stale{color:var(--gold);}
.statusbar.offline .dot{background:var(--ink-3);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.health-banner{
  max-width:1800px; margin:10px auto 0; padding:10px clamp(16px,4vw,48px);
  font-family:var(--mono); font-size:11px; color:var(--gold);
  background:color-mix(in srgb, var(--gold) 10%, transparent);
  border-top:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

#refreshBtn,#trBtn,#topicBtn,#themeBtn{
  background:none; border:1px solid var(--line); border-radius:6px;
  color:var(--ink-2); font-family:var(--mono); font-size:11.5px;
  padding:8px 17px; cursor:pointer; letter-spacing:.08em;
  transition:color .15s, border-color .15s, background-color .15s, transform .1s;
}
#refreshBtn:hover,#trBtn:hover,#topicBtn:hover,#themeBtn:hover{
  color:var(--gold); border-color:var(--gold-dim);
  background:color-mix(in srgb, var(--gold) 7%, transparent);
}
#refreshBtn:active,#trBtn:active,#topicBtn:active,#themeBtn:active{transform:translateY(1px);}
#refreshBtn:disabled{opacity:.5; cursor:default; transform:none;}
#trBtn,#topicBtn{color:var(--gold); border-color:var(--gold-dim);}
#trBtn.off,#topicBtn.off{color:var(--ink-3); border-color:var(--line);}

.tape{
  margin:18px 0 0; border:1px solid var(--line-soft); border-radius:10px;
  overflow:hidden; background:var(--card); box-shadow:var(--shadow-1);
  transition:background-color .2s, border-color .2s, opacity .25s;
}
.tape.tape-loading{opacity:.35;}
.tape .tradingview-widget-container{height:46px;}

.sessions{
  margin:14px 0 0; border:1px solid var(--line-soft); border-radius:10px;
  background:var(--card); padding:14px 16px 12px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:background-color .2s, border-color .2s;
}
.sessions .cap{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3); margin-bottom:10px;}
.cap h2{font:inherit; letter-spacing:inherit; color:inherit;}
.sessions .cap h2::before, .calendar .cap h2::before, .watchlist .cap h2::before{
  content:''; display:inline-block; width:14px; height:1px;
  background:var(--gold-dim); margin-right:8px; vertical-align:middle;
}
.sess-track{position:relative; height:122px;}
.hourgrid span{position:absolute; top:0; bottom:0; width:1px; background:var(--line-soft);}
.hourgrid label{position:absolute; bottom:-2px; transform:translateX(-50%); font-family:var(--mono); font-size:9px; color:var(--ink-3);}
.sess-row{position:absolute; left:0; right:0; height:13px;}
.sess-bar{
  position:absolute; height:100%; border-radius:99px;
  background:color-mix(in srgb, var(--ink-3) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--ink-3) 32%, transparent);
}
.sess-bar.live{
  background:linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-color:var(--gold-dim);
  box-shadow:0 0 12px color-mix(in srgb, var(--gold) 30%, transparent);
}
.sess-bar b{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-weight:500; font-size:9px; letter-spacing:.15em;
  color:var(--ink-2); white-space:nowrap;
}
.sess-bar.live b{color:var(--gold-ink); font-weight:600;}
.now-cursor{position:absolute; top:-4px; bottom:8px; width:1px; background:var(--gold); box-shadow:0 0 10px var(--gold);}
.now-cursor::after{content:'現在'; position:absolute; top:-4px; left:5px; font-family:var(--mono); font-size:9px; letter-spacing:.15em; color:var(--gold);}

.calendar, .watchlist{
  width:320px; flex-shrink:0; position:sticky; top:14px;
  border:1px solid var(--line-soft); border-radius:10px;
  background:var(--card); padding:14px 16px 12px; box-shadow:var(--shadow-1);
  transition:background-color .2s, border-color .2s;
  display:flex; flex-direction:column; height:var(--panel-height, calc(100vh - 28px));
}
.calendar:has(.cal-widget:empty), .watchlist:has(.wl-widget:empty){height:auto;}
.calendar .cap, .watchlist .cap{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3);
}
.calendar .cap button, .watchlist .cap button{
  background:none; border:none; color:var(--gold-dim); cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; padding:2px 4px;
  transition:color .15s;
}
.calendar .cap button:hover, .watchlist .cap button:hover{color:var(--gold);}

.wl-searchwrap{margin-top:10px; position:relative;}
.wl-searchwrap::before{
  content:'⌕'; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:14px; pointer-events:none;
}
#wlSearch{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:var(--sans); font-size:12.5px;
  padding:8px 12px 8px 32px;
  transition:background-color .2s, border-color .15s, box-shadow .15s;
}
#wlSearch::placeholder{color:var(--ink-3);}
#wlSearch:focus{
  outline:none; border-color:var(--gold-dim);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent);
}
.wl-results{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5;
  max-height:280px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line-soft); border-radius:8px;
  box-shadow:var(--shadow-2);
}
.wl-result{
  appearance:none; -webkit-appearance:none; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:none; border-bottom:1px solid var(--line-soft);
  padding:9px 12px; cursor:pointer; text-align:left; font:inherit;
  color:var(--ink-2); transition:background-color .15s, color .15s;
}
.wl-result:last-child{border-bottom:none;}
.wl-result:hover{background:color-mix(in srgb, var(--gold) 8%, transparent); color:var(--ink);}
.wl-result-name{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wl-result-sym{font-family:var(--mono); font-size:10px; color:var(--ink-3); flex-shrink:0;}
.wl-result-note{padding:10px 12px; font-size:11.5px; color:var(--ink-3);}

.cal-tools{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; flex-wrap:wrap;}
#calImpBtn{
  background:none; border:1px solid var(--line); border-radius:6px;
  color:var(--ink-2); font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  padding:4px 10px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s;
}
#calImpBtn:hover{color:var(--gold); border-color:var(--gold-dim);}
#calImpBtn.on{color:var(--gold); border-color:var(--gold); background:color-mix(in srgb, var(--gold) 14%, transparent);}
.cal-note{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); letter-spacing:.02em;}

.cal-widget{
  margin-top:10px; flex:1; height:auto; min-height:0; overflow:hidden; border-radius:8px; border:1px solid var(--line-soft);
  overscroll-behavior:contain; touch-action:pan-y;
}
.cal-widget:empty{display:none;}
.cal-widget .tradingview-widget-container{height:100%;}
.wl-widget{margin-top:10px;}
.wl-widget:empty{margin-top:0;}

.wl-quote{
  border:1px solid var(--line-soft); border-radius:8px; background:var(--surface);
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.wl-quote-header{display:flex; align-items:center; gap:10px;}
.wl-quote-namewrap{min-width:0; flex:1;}
.wl-quote-name{
  font-size:13px; color:var(--ink); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wl-quote-sym{font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.04em;}
.wl-pin-btn{
  appearance:none; -webkit-appearance:none; flex-shrink:0;
  background:none; border:1px solid var(--line); border-radius:6px;
  width:30px; height:30px; font-size:14px; line-height:1; cursor:pointer;
  color:var(--ink-3); transition:color .15s, border-color .15s, transform .1s;
}
.wl-pin-btn:hover{color:var(--gold); border-color:var(--gold-dim);}
.wl-pin-btn:active{transform:translateY(1px);}
.wl-pin-btn.on{color:var(--gold); border-color:var(--gold-dim);}
.wl-quote-price{font-family:var(--mono); font-size:26px; font-weight:600; color:var(--ink); line-height:1.1;}
.wl-quote-change{font-size:12.5px; font-weight:500;}
.wl-quote-change.pos{color:var(--green);}
.wl-quote-change.neg{color:var(--red);}
.wl-quote-range{display:flex; align-items:center; gap:8px;}
.wl-quote-range-label{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); flex-shrink:0;}
.wl-quote-range-track{
  position:relative; flex:1; height:4px; border-radius:99px;
  background:color-mix(in srgb, var(--ink-3) 25%, transparent);
}
.wl-quote-range-marker{
  position:absolute; top:50%; width:9px; height:9px; border-radius:99px;
  background:var(--gold); box-shadow:0 0 6px color-mix(in srgb, var(--gold) 50%, transparent);
  transform:translate(-50%, -50%);
}
.wl-quote-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding-top:2px; border-top:1px solid var(--line-soft);}
.wl-quote-cell{display:flex; flex-direction:column; gap:2px; padding-top:8px;}
.wl-quote-cell-label{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); letter-spacing:.04em;}
.wl-quote-cell-value{font-family:var(--mono); font-size:12px; color:var(--ink-2);}
.wl-quote-updated{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); text-align:right;}

.wl-pinned{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
.wl-pinned:empty{display:none;}
.wl-pinned-row{
  appearance:none; -webkit-appearance:none; width:100%;
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px;
  padding:8px 10px; cursor:pointer; text-align:left; font:inherit;
  color:var(--ink-2); transition:border-color .15s, background-color .15s;
}
.wl-pinned-row:hover{border-color:var(--gold-dim);}
.wl-pinned-row.active{border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, var(--surface));}
.wl-pinned-name{
  flex:1; min-width:0; font-size:11.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wl-pinned-price{font-family:var(--mono); font-size:11px; color:var(--ink-2); flex-shrink:0;}
.wl-pinned-change{font-family:var(--mono); font-size:10px; flex-shrink:0; min-width:52px; text-align:right;}
.wl-pinned-change.pos{color:var(--green);}
.wl-pinned-change.neg{color:var(--red);}

.controls{
  max-width:1800px; margin:16px auto 0; padding:0 clamp(16px,4vw,48px);
  display:flex; flex-direction:column; gap:28px;
}
.chips{display:grid; grid-template-columns:repeat(12, 1fr); gap:8px;}
.chip{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font:inherit; line-height:normal;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  padding:8px 16px; border-radius:6px; border:1px solid var(--line);
  color:var(--ink-2); cursor:pointer; background:var(--surface); user-select:none;
  text-align:center; white-space:normal;
  transition:border-color .15s, color .15s, background-color .2s, transform .1s;
}
.chip:hover{border-color:var(--gold-dim); color:var(--ink);}
.chip:active{transform:translateY(1px);}
.chip.on{
  border-color:var(--gold); color:var(--gold); font-weight:500;
  background:color-mix(in srgb, var(--gold) 16%, var(--bg0));
}
.search-row{align-self:flex-end; display:flex; align-items:center; gap:10px;}
.searchwrap{position:relative;}
.searchwrap::before{
  content:'⌕'; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:14px; pointer-events:none;
}
#search{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:var(--sans); font-size:13px;
  padding:8px 12px 8px 32px; width:280px;
  transition:background-color .2s, border-color .15s, width .25s ease, box-shadow .15s;
}
#search::placeholder{color:var(--ink-3);}
#search:focus{
  outline:none; border-color:var(--gold-dim); width:320px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent);
}
.genre-select{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:var(--sans); font-size:13px;
  padding:8px 32px 8px 12px; cursor:pointer; max-width:180px;
  transition:background-color .2s, border-color .15s, box-shadow .15s;
}
.genre-select:hover{border-color:var(--gold-dim);}
.genre-select:focus{
  outline:none; border-color:var(--gold-dim);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent);
}

main{
  max-width:1800px; margin:0 auto; padding:18px clamp(16px,4vw,48px) 60px;
  display:flex; gap:14px; align-items:flex-start;
}
.grid{flex:1; min-width:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:13px;}

.card{
  --src:var(--gold);
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 16px 15px; display:flex; flex-direction:column; gap:9px;
  text-decoration:none; color:inherit; box-shadow:var(--shadow-1);
  transition:transform .16s ease, border-color .2s, box-shadow .2s, background-color .2s;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--src), transparent 70%);
  opacity:0; transition:opacity .2s;
}
.card:hover{transform:translateY(-2px); border-color:var(--gold-dim); box-shadow:var(--shadow-2);}
.card:hover::before{opacity:.9;}

.card.is-new{animation:card-enter .5s cubic-bezier(.22,.7,.35,1) both;}
@keyframes card-enter{
  from{opacity:0; transform:translateY(8px) scale(.985);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.card .meta{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.meta-left{display:flex; align-items:center; gap:6px; min-width:0;}
.meta-right{display:flex; align-items:center; gap:7px; flex-shrink:0;}

.src-badge{
  --src-ink:var(--src);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  padding:3px 9px; border-radius:99px; white-space:nowrap;
  color:var(--src-ink);
  border:1px solid color-mix(in srgb, var(--src) 42%, transparent);
  background:color-mix(in srgb, var(--src) 9%, transparent);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .src-badge{--src-ink:color-mix(in srgb, var(--src) 60%, black);}
}
:root[data-theme="light"] .src-badge{--src-ink:color-mix(in srgb, var(--src) 60%, black);}
.src-badge .genre{opacity:.8; margin-left:6px; padding-left:7px; border-left:1px solid currentColor;}

.new-badge{
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; font-weight:600;
  color:var(--gold-ink); background:var(--gold); padding:2px 7px; border-radius:99px;
  white-space:nowrap; box-shadow:0 0 10px color-mix(in srgb, var(--gold) 35%, transparent);
}
.sentiment{font-size:12px; line-height:1; white-space:nowrap;}
.sentiment.pos{color:var(--green);}
.sentiment.neg{color:var(--red);}
.card time{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); white-space:nowrap;}

.card h3{font-size:15px; font-weight:500; line-height:1.55; color:var(--ink); transition:color .15s;}
.card:hover h3{color:color-mix(in srgb, var(--gold) 25%, var(--ink));}
.card .orig{
  font-size:10.5px; color:var(--ink-3); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.card p{
  font-size:12.5px; color:var(--ink-2); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card .lang{font-family:var(--mono); font-size:9px; color:var(--ink-3); letter-spacing:.1em; margin-top:auto;}

#grid .empty, #grid .loading{
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:var(--ink-3); font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  border:1px dashed var(--line); border-radius:12px;
}

footer{max-width:1800px; margin:0 auto; padding:10px clamp(16px,4vw,48px) 40px; font-size:11px; color:var(--ink-3); line-height:1.9;}
footer .rule{border-top:1px solid var(--line-soft); padding-top:16px;}
footer a{color:var(--gold-dim); text-decoration:none; transition:color .15s;}
footer a:hover{color:var(--gold); text-decoration:underline; text-underline-offset:3px;}
footer .links{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;}

#scaleWrap{width:1900px;}

@media (max-width:640px){
  #scaleWrap{width:100%;}
  header, .controls, main, footer{max-width:100%; padding-left:14px; padding-right:14px;}
  .masthead{flex-direction:column; align-items:flex-start; gap:10px;}
  .statusbar{flex-direction:column; align-items:flex-start; gap:10px; width:100%;}
  .status-actions{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:100%;}
  #refreshBtn,#trBtn,#topicBtn,#themeBtn{
    padding:8px 10px; font-size:10px; text-align:center; min-width:0; white-space:normal; line-height:1.3;
    min-height:44px; display:flex; align-items:center; justify-content:center;
  }
  .chips{width:100%; grid-template-columns:repeat(auto-fill, minmax(102px,1fr));}
  .chip{padding:10px 10px;}
  .search-row{align-self:stretch; width:100%; flex-direction:column; gap:8px;}
  .searchwrap{width:100%;}
  #search{width:100%; padding-top:11px; padding-bottom:11px;}
  #search:focus{width:100%;}
  .genre-select{width:100%; max-width:100%; min-height:44px;}
  #calImpBtn{padding:8px 12px;}
  main{flex-direction:column;}
  .calendar, .watchlist{position:static; width:100%; height:auto;}
  .cal-widget{flex:none; height:300px;}
  .cal-note{display:none;}
  .grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }