:root{color-scheme:dark;--bg:#070b12;--surface:#0e151f;--line:#26364b;--line2:#344a64;--text:#f4f7fb;--muted:#99a9bc;--blue:#43b6ff;--gold:#efc56f;--green:#36d399;--amber:#f1ad4e;--red:#ed6873;--shadow:0 18px 55px #0005}
*{box-sizing:border-box}html{font-family:Inter,"Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 68% -20%,#14466e45,transparent 34%),linear-gradient(155deg,#070b12,#0a111a 58%,#080c13)}button,input,select{font:inherit}button{cursor:pointer}.shell{width:min(1240px,100%);margin:auto;padding-inline:24px}
.topbar{height:68px;border-bottom:1px solid var(--line);background:#070b12e8;backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.nav{height:100%;display:flex;align-items:center;gap:36px}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-weight:850;font-size:18px}.mark{width:35px;height:35px;display:grid;place-items:center;border:1px solid #546982;background:#101a27;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-size:11px;color:var(--gold)}nav{display:flex;height:100%;align-items:center;gap:24px;font-size:14px;color:#74859a}nav a,nav span{height:100%;display:flex;align-items:center}nav a{color:#c9d5e3;text-decoration:none;border-bottom:2px solid var(--blue)}.region{margin-left:auto;border:1px solid #2c4b64;background:#0c2031;color:#9cdcff;padding:7px 10px;font-size:12px;font-weight:800;border-radius:4px}
main{padding-block:34px 72px}.search-panel,.panel,.item-head,.metric{background:linear-gradient(145deg,#101923f2,#0c131df2);border:1px solid var(--line);box-shadow:var(--shadow)}.search-panel{padding:26px;border-radius:8px;border-top:2px solid #3b88b8}.title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.eyebrow{margin:0 0 6px;color:var(--blue);font-size:12px;letter-spacing:.12em;font-weight:850}h1,h2,p{margin-top:0}h1{font-size:30px;letter-spacing:-.045em;margin-bottom:0}h2{font-size:20px;margin-bottom:0;letter-spacing:-.025em}.source-state{font-size:13px;color:#b3c3d4;display:flex;align-items:center;gap:9px}.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green)}
form{display:grid;grid-template-columns:minmax(280px,1fr) 180px auto;gap:12px;align-items:end}.search-wrap{position:relative}.field label,.search-wrap>label,.control-group>label{display:block;color:#b9c7d7;font-size:13px;font-weight:750;margin:0 0 7px}.search-box{height:50px;display:flex;align-items:center;border:1px solid var(--line2);background:#080e16;border-radius:5px;padding-inline:14px;transition:.18s}.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #43b6ff1c}.search-box svg{width:20px;fill:none;stroke:#8497ac;stroke-width:2;margin-right:10px}.search-box input{width:100%;background:transparent;border:0;outline:0;color:var(--text);font-size:16px}.search-box input::placeholder{color:#687a8e}.field select,.control-group select{height:50px;width:100%;border:1px solid var(--line2);background:#080e16;color:var(--text);border-radius:5px;padding:0 36px 0 13px}.primary{height:50px;border:0;border-radius:5px;background:linear-gradient(135deg,#238fcf,#44baff);color:#06101a;font-weight:900;padding-inline:25px;box-shadow:0 8px 25px #269dde35}.primary:hover{filter:brightness(1.08)}.primary:disabled{opacity:.6}.suggestions{position:absolute;top:81px;left:0;right:0;z-index:30;background:#0c141f;border:1px solid var(--line2);box-shadow:0 18px 45px #000a;max-height:360px;overflow:auto}.suggestion{display:grid;grid-template-columns:44px 1fr auto;align-items:center;width:100%;padding:9px 12px;color:var(--text);border:0;border-bottom:1px solid #1d2a3b;background:transparent;text-align:left}.suggestion:hover{background:#152537}.suggestion img{width:36px;height:36px}.suggestion strong{display:block;font-size:14px}.suggestion small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.suggestion em{font-style:normal;color:#7d91a6;font-size:11px}.search-help{margin:12px 0 0;color:#7f91a6;font-size:12px}
.result{margin-top:20px}.item-head{padding:20px 22px;border-radius:8px;display:flex;align-items:center;justify-content:space-between}.item-identity{display:flex;align-items:center;gap:16px}.item-icon{width:82px;height:82px;background:#080d14;border:1px solid var(--line2);display:grid;place-items:center;border-radius:6px}.item-icon img{width:78px;height:78px;object-fit:contain}.id-line{display:flex;align-items:center;gap:8px;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:#7f94ab;margin-bottom:7px}.id-line button{border:1px solid #34475c;color:#9bb0c5;background:#101a27;border-radius:3px;font-size:11px;padding:3px 6px}.item-identity h2{font-size:24px;margin-bottom:6px}.item-identity p{margin:0;color:var(--muted);font-size:13px}.sync-meta{text-align:right;display:grid;gap:4px}.sync-meta span,.sync-meta small{font-size:12px;color:#788ba0}.sync-meta strong{font-size:15px}.notice{margin-top:12px;border-left:3px solid var(--amber);background:#251c10;border-block:1px solid #5b4422;padding:12px 15px;color:#f2d69d;font-size:13px}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}.metric{padding:17px 18px;border-radius:7px;min-height:112px}.metric span{display:block;font-size:12px;color:#8fa1b5;margin-bottom:13px}.metric strong{display:block;font-size:24px;line-height:1.1}.metric small{display:block;font-size:11px;color:#71859b;margin-top:9px}.state-text{font-size:18px!important}.state-text.good{color:var(--green)}.state-text.warn{color:var(--amber)}.state-text.bad{color:var(--red)}
.panel{margin-top:12px;border-radius:8px;padding:22px}.panel-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.legend{display:flex;gap:15px;color:#8395a9;font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend i,.freshness-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.fresh{background:var(--green)}.aging{background:var(--amber)}.stale{background:var(--red)}.none{background:#5d6c7d}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:#8092a7;font-size:11px;letter-spacing:.04em;font-weight:750;padding:11px 13px;border-bottom:1px solid var(--line)}td{padding:14px 13px;border-bottom:1px solid #1d2a3a}tr:last-child td{border-bottom:0}.city-name{font-weight:800}.city-sub{display:block;color:#6e8298;font-size:11px;margin-top:3px}.price{font-variant-numeric:tabular-nums;font-weight:750}.muted-price{color:#687a8e}.updated{display:flex;align-items:center;gap:8px;color:#aab8c8;font-size:12px}.updated small{display:block;color:#6f8195}.loading-cell{text-align:center;color:#8597aa;padding:38px}.city-cards{display:none}
.history-controls{align-items:center}.control-group{display:flex;align-items:end;gap:10px}.control-group>label{align-self:center;margin:0}.control-group select{height:38px;width:160px;font-size:13px}.segmented{height:38px;display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}.segmented button{min-width:52px;background:#0a111a;border:0;border-left:1px solid var(--line);color:#8ea0b5;font-size:12px;font-weight:800}.segmented button:first-child{border-left:0}.segmented button.active{background:#204866;color:#cdeeff}.chart-summary{display:flex;gap:38px;padding:10px 0 18px}.chart-summary span{font-size:11px;color:#7f92a7;display:block;margin-bottom:5px}.chart-summary strong{font-size:16px}.chart-wrap{height:310px;position:relative;background:linear-gradient(#0a1119b5,#080e16b5);border:1px solid #213046;padding:8px}.chart-wrap canvas{width:100%;height:100%}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#7c8ea3;font-size:14px}.chart-key{display:flex;justify-content:center;gap:24px;margin-top:12px;color:#8294a8;font-size:11px}.chart-key span{display:flex;align-items:center;gap:7px}.price-line{width:18px;border-top:2px solid var(--blue)}.volume-bar{width:13px;height:8px;background:#2b455e}
footer{border-top:1px solid var(--line);color:#6e8094;font-size:12px;padding:22px 0 30px}footer .shell{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:850px){nav{display:none}.shell{padding-inline:16px}main{padding-top:20px}form{grid-template-columns:1fr 145px}.primary{grid-column:1/-1}.summary-grid{grid-template-columns:1fr 1fr}.desktop-table{display:none}.city-cards{display:grid;gap:8px}.city-card{border:1px solid #223247;background:#0a111a;padding:14px}.city-card-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:13px}.city-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.city-card-grid span{display:block;color:#7f91a6;font-size:11px;margin-bottom:5px}.city-card-grid strong{font-size:16px}.city-card-foot{display:flex;justify-content:space-between;color:#73869a;font-size:11px;border-top:1px solid #1c2a3a;margin-top:13px;padding-top:10px}.panel{padding:17px}.history-controls{align-items:flex-start;gap:16px}.control-group{align-items:stretch;flex-wrap:wrap}.control-group>label{width:100%}.chart-wrap{height:260px}}
@media(max-width:560px){.topbar{height:60px}.brand{font-size:16px}.region{font-size:10px;padding:6px 7px}.search-panel{padding:18px 15px}.title-row{align-items:start}.source-state{font-size:0;margin-top:7px}h1{font-size:25px}form{display:flex;flex-direction:column;align-items:stretch}.primary{width:100%}.item-head{padding:15px;align-items:flex-start}.item-icon{width:68px;height:68px}.item-icon img{width:64px;height:64px}.item-identity{gap:11px}.item-identity h2{font-size:19px}.sync-meta{display:none}.summary-grid{grid-template-columns:1fr 1fr;gap:8px}.metric{min-height:103px;padding:14px}.metric strong{font-size:19px}.panel-head{align-items:start;gap:12px}.legend{display:none}.history-controls{flex-direction:column}.control-group{width:100%}.control-group select{flex:1;min-width:130px}.segmented{flex:1}.segmented button{min-width:0;flex:1}.chart-summary{gap:0;justify-content:space-between}.chart-summary strong{font-size:14px}.chart-wrap{height:230px}footer .shell{display:block}footer span{display:block;margin-bottom:5px}}