:root{
    --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --panel3:#20293a; --border:#2a3240;
    --text:#e6edf3; --muted:#8b96a5;
    --up:#51cf66; --down:#ff6b6b; --amber:#ffd43b; --strong:#a78bfa; --accent:#4dabf7;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;}
  .wrap{max-width:960px;margin:0 auto;padding:14px 14px 40px;}
  header{padding:6px 2px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;}
  .headText{flex:1;min-width:220px;}
  header h1{font-size:1.22rem;margin:0 0 4px;font-weight:700;letter-spacing:.2px;}
  header p{margin:0;color:var(--muted);font-size:.8rem;}
  .langSwitch{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:4px;flex-shrink:0;}
  .langBtn{background:transparent;border:none;color:var(--muted);font-size:.78rem;font-weight:700;
    padding:6px 10px;border-radius:7px;cursor:pointer;}
  .langBtn.active{background:var(--accent);color:#00203a;}
  #status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted);
    margin-top:8px;padding:4px 10px;border:1px solid var(--border);border-radius:20px;background:var(--panel);}
  #status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);}
  #status.live .dot{background:var(--up);box-shadow:0 0 6px var(--up);}
  #status.stale .dot{background:var(--amber);}
  #status.error .dot{background:var(--down);}
  #retryBtn{margin-left:6px;background:var(--panel3);border:1px solid var(--border);color:var(--text);
    border-radius:14px;padding:2px 10px;font-size:.7rem;cursor:pointer;display:none;}
  #status.error #retryBtn, #status.stale #retryBtn{display:inline-block;}

  .picker{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin:14px 0;}
  .picker h2{font-size:.9rem;margin:0 0 4px;font-weight:700;}
  .picker .hint{font-size:.72rem;color:var(--muted);margin-bottom:10px;line-height:1.5;}
  .curGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;align-items:start;}
  /* #25 (reworked): selected currencies render as static cards; the only
     interactions are the color swatch (top-left), the ✕ remove button
     (bottom-right, hover "Remove currency") and the trailing + slot. */
  .curChip{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:8px 6px 18px;
    text-align:center;user-select:none;position:relative;border-top-width:3px;border-top-style:solid;}
  .curChip.selected{background:#173049;}
  .curChip .code{font-weight:700;font-size:.86rem;}
  .curChip .name{font-size:.6rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* per-currency color swatch over the chip's top-left corner; the native
     color input opens the OS color picker. */
  .curChip .chipColor{position:absolute;top:3px;left:4px;width:14px;height:14px;padding:0;border:none;
    border-radius:4px;background:none;cursor:pointer;}
  .curChip .chipColor::-webkit-color-swatch-wrapper{padding:0;}
  .curChip .chipColor::-webkit-color-swatch{border:1px solid rgba(255,255,255,.35);border-radius:4px;}
  .curChip .chipColor::-moz-color-swatch{border:1px solid rgba(255,255,255,.35);border-radius:4px;}
  /* bottom-right remove button: quiet by default, red + filled on hover */
  .curChip .chipRemove{position:absolute;right:3px;bottom:3px;width:16px;height:16px;padding:0;border:none;
    background:transparent;color:var(--muted);font-size:.62rem;line-height:1;cursor:pointer;border-radius:4px;}
  .curChip .chipRemove:hover{color:#fff;background:var(--down);}
  /* trailing + slot: click to open the search field; hidden once 12 are set */
  .addSlot{min-height:58px;border:1px dashed var(--border);border-radius:10px;display:flex;align-items:center;
    justify-content:center;cursor:pointer;color:var(--muted);position:relative;user-select:none;}
  .addSlot:hover,.addSlot:focus-visible{border-color:var(--accent);color:var(--accent);outline:none;}
  .addSlot .plus{font-size:1.3rem;line-height:1;}
  .addSlot.searching{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:6px;border-style:solid;
    border-color:var(--accent);padding:6px;cursor:default;}
  .addSlot.searching:hover{color:var(--muted);}
  #catalogSearch{width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);
    border-radius:8px;padding:6px 9px;font-size:.78rem;}
  #catalogSearch:focus{border-color:var(--accent);outline:none;}
  .slotResults{display:flex;flex-direction:column;gap:4px;max-height:196px;overflow-y:auto;}
  .slotResults .curChip{padding:7px 6px 7px;cursor:pointer;border-top:none;}
  .slotResults .curChip:hover{border-color:var(--accent);background:var(--panel3);}
  .slotEmpty{font-size:.7rem;color:var(--muted);text-align:center;padding:6px 0;}
  .pickerFoot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:.74rem;color:var(--muted);flex-wrap:wrap;gap:8px;}
  #pickerCount.atCap{color:var(--amber);font-weight:700;}
  .applyPick{background:var(--accent);border:none;color:#00203a;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.8rem;}
  .applyPick:disabled{opacity:.4;cursor:not-allowed;}

  .rangebar{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px;}
  .rbtn{background:var(--panel2);border:1px solid var(--border);color:var(--muted);
    font-size:.76rem;font-weight:600;padding:6px 12px;border-radius:16px;cursor:pointer;}
  .rbtn.active{background:var(--accent);color:#00203a;border-color:var(--accent);}
  .customrange{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 14px;font-size:.76rem;color:var(--muted);}
  .customrange input[type=date]{background:var(--panel2);border:1px solid var(--border);color:var(--text);
    border-radius:8px;padding:5px 8px;font-size:.76rem;}
  .customrange button{background:var(--panel3);border:1px solid var(--border);color:var(--text);
    border-radius:8px;padding:5px 12px;font-size:.76rem;cursor:pointer;font-weight:600;}

  .widget{margin:14px 0;}
  .widget .cards,.widget .rangePos,.widget .converter,.widget .rank,.widget .panel{margin:0;}
  .widgetBar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--panel2);
    border:1px solid var(--border);border-radius:10px;margin-bottom:6px;}
  .widgetHandle{cursor:grab;color:var(--muted);font-size:.9rem;touch-action:none;padding:2px 4px;user-select:none;}
  .widgetHandle:active{cursor:grabbing;}
  .widgetTitle{flex:1;font-size:.78rem;font-weight:700;color:var(--text);}
  /* #26: the .widgetTitle header bar is the single source of truth for a
     widget's title. The inner h2/.sectionTitle elements inside widget bodies
     are kept only as i18n text sources for syncWidgetTitles() and are never
     displayed, so no widget shows its title twice. */
  .widgetBody h2, .widgetBody .sectionTitle{display:none;}
  .widgetToggle{background:var(--panel3);border:1px solid var(--border);color:var(--text);
    width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:.9rem;line-height:1;padding:0;}
  .widget.collapsed .widgetBody{display:none;}
  .widget.dragging{z-index:1000;opacity:.95;box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:none;}
  .widgetPlaceholder{border:2px dashed var(--accent);border-radius:12px;background:var(--panel2);opacity:.4;margin:14px 0;}

  .cards{display:grid;gap:10px;margin:14px 0;}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 10px;
    cursor:pointer;position:relative;transition:transform .35s ease, border-color .15s ease;}
  .card:hover{border-color:var(--accent);}
  .card:active{transform:scale(0.98);}
  .card .pair{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.5px;}
  .card .rate{font-size:1.22rem;font-weight:700;margin:4px 0 2px;font-variant-numeric:tabular-nums;}
  .card .chg{font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums;}
  .chg.up{color:var(--up);} .chg.down{color:var(--down);} .chg.neutral{color:var(--muted);}
  .cardBody{transition:opacity .2s ease;}
  .swapHint{position:absolute;top:6px;right:8px;font-size:.62rem;color:var(--muted);opacity:.6;
    transition:opacity .15s ease;}
  .card:hover .swapHint{opacity:1;}

  .sectionTitle{font-size:.9rem;font-weight:700;margin:18px 2px 8px;}
  .sectionHint{font-size:.74rem;color:var(--muted);margin:-4px 2px 10px;line-height:1.5;}

  .rangePos{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin:14px 0;}
  .rangePos h2{font-size:.9rem;margin:0 0 4px;font-weight:700;}
  .rangePos .hint{font-size:.72rem;color:var(--muted);margin-bottom:12px;line-height:1.5;}
  .rangeItem{background:var(--panel2);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
  .rangeItem:last-child{margin-bottom:0;}
  .rangeHead{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;font-weight:700;margin-bottom:8px;}
  .rangeHead .pct{font-size:.76rem;font-weight:700;}
  .rangeTrack{position:relative;height:8px;border-radius:4px;background:var(--panel3);margin-bottom:6px;}
  .rangeFill{position:absolute;top:0;left:0;height:100%;border-radius:4px;}
  .rangeMarker{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;
    border:2px solid #0d1117;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(255,255,255,.35);}
  .rangeEnds{display:flex;justify-content:space-between;font-size:.68rem;font-weight:700;margin-top:2px;}
  .rangeMinMax{display:flex;justify-content:space-between;font-size:.64rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:6px;}
  .rangeStatus{font-size:.68rem;color:var(--muted);margin-top:6px;}
  .rangeStatus b{font-weight:700;}

  .converter{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin:14px 0;}
  .converter h2{font-size:.9rem;margin:0 0 10px;font-weight:700;}
  .convRow{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
  .convRow input[type=number]{flex:1;min-width:110px;background:var(--panel2);border:1px solid var(--border);
    color:var(--text);border-radius:8px;padding:9px 10px;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;}
  .convRow select{background:var(--panel2);border:1px solid var(--border);color:var(--text);
    border-radius:8px;padding:9px 10px;font-size:.9rem;font-weight:600;}
  .convResults{display:grid;gap:8px;}
  .convResult{background:var(--panel2);border-radius:8px;padding:10px;}
  .convResult .lbl{font-size:.68rem;color:var(--muted);font-weight:600;}
  .convResult .val{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px;}

  .trendGrid{display:grid;gap:10px;}
  .trendCard{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 12px 14px;}
  .trendCard .head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .trendCard .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .trendCard .name{font-weight:700;font-size:.86rem;}
  .trendCard .bigchg{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:6px;}
  .trendCard .rangeLabel{font-size:.66rem;color:var(--muted);margin-bottom:10px;}
  .strengthRow{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;color:var(--muted);margin-bottom:3px;}
  /* #37: compact volatility line, styled like .strengthRow so the card
     stays calm; no color coding, since unlike direction/quality the raw
     magnitude is relative and unit-labeled rather than good/bad. */
  .volRow{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;color:var(--muted);margin-bottom:8px;}
  .volRow .volVal{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
  .gauge{height:7px;border-radius:4px;background:var(--panel2);overflow:hidden;margin-bottom:10px;}
  .gauge i{display:block;height:100%;border-radius:4px;}
  .miniRow{display:flex;gap:6px;}
  .miniBadge{flex:1;background:var(--panel2);border-radius:8px;padding:5px 4px;text-align:center;}
  .miniBadge .lbl{font-size:.6rem;color:var(--muted);font-weight:600;}
  .miniBadge .val{font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;}
  .miniBadge .tag{font-size:.56rem;margin-top:1px;font-weight:600;letter-spacing:.3px;}
  .miniBadge .tag.volTag{color:var(--muted);}

  .rank{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin:14px 0;}
  .rank h2{font-size:.9rem;margin:0 0 10px;font-weight:700;}
  /* #28: all four children stay vertically centered against the row's real
     height, including when a long currency name (e.g. "British Pound (GBP)")
     wraps to two lines on narrow viewports. min-width:0 lets .name shrink to
     its flex share and wrap instead of overflowing and misaligning the row. */
  .rankrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--border);}
  .rankrow:first-child{border-top:none;}
  .rankrow .badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:700;color:#0d1117;flex-shrink:0;}
  .rankrow .name{flex:1;min-width:0;font-weight:600;font-size:.88rem;}
  .rankrow .val{font-weight:700;font-variant-numeric:tabular-nums;font-size:.88rem;}
  .rankrow .bar{height:6px;border-radius:4px;background:var(--panel2);flex:2;overflow:hidden;position:relative;}
  .rankrow .bar i{position:absolute;top:0;bottom:0;border-radius:4px;}

  /* #36: correlation matrix - color encodes r from -1 (red) through 0 (gray)
     to +1 (green); cells are tappable to flip the matrix sign convention. */
  .corrWrap{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin:14px 0;}
  .corrScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .corrMatrix{display:grid;gap:3px;min-width:max-content;
    /* columns = 1 row-head column + one column per selected currency; set from JS (#36) */
    grid-template-columns:46px repeat(var(--corr-n,3), minmax(46px,1fr));}
  .corrCell{display:flex;align-items:center;justify-content:center;min-width:46px;height:34px;
    border-radius:6px;font-size:.68rem;font-weight:600;color:var(--text);
    font-variant-numeric:tabular-nums;cursor:default;user-select:none;}
  .corrCell.corner{background:transparent;}
  .corrCell.colHead,.corrCell.rowHead{background:var(--panel2);color:var(--text);
    font-weight:700;font-size:.7rem;min-width:46px;}
  .corrCell.rowHead{justify-content:flex-start;padding-left:6px;}
  .corrCell.valCell{cursor:pointer;}
  .corrCell.valCell.off{opacity:.25;}

  /* #41: tabbed presentation mode (ADR-0010). The tab bar scrolls
     horizontally on narrow screens instead of wrapping; panels reuse the
     same .widget markup as single-page mode. */
  .tabBar{display:flex;gap:6px;margin:14px 0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tabBar[hidden]{display:none;}
  .tabBtn{background:var(--panel2);border:1px solid var(--border);color:var(--muted);
    font-size:.78rem;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;
    white-space:nowrap;flex-shrink:0;}
  .tabBtn.active{background:var(--accent);border-color:var(--accent);color:#00203a;}
  .tabBar::after{content:'';flex:0 0 1px;}
  /* drag-to-reorder and collapse are single-page affordances (ADR-0010) */
  body.tabs-mode .widgetHandle, body.tabs-mode .widgetToggle{display:none;}

  .panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 10px 6px;margin:14px 0;}
  .panel .head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:0 4px 4px;}
  .panel h2{font-size:.9rem;margin:0;font-weight:700;}
  .panel .rule{font-size:.72rem;color:var(--muted);padding:0 4px 8px;line-height:1.5;}
  .panel .rule b{color:var(--text);}
  .legend{display:flex;gap:8px;flex-wrap:wrap;padding:0 4px 8px;}
  .legend .item{display:flex;flex-direction:column;gap:2px;font-size:.72rem;color:var(--muted);cursor:pointer;
    user-select:none;padding:5px 10px;border-radius:10px;border:1px solid var(--border);background:var(--panel2);}
  .legend .item.off{opacity:.35;}
  .legend .item .row{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--text);}
  .legend .item .mean{font-size:.62rem;color:var(--muted);}
  .legend .sw{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.25);}
  .chartbox{position:relative;width:100%;height:280px;touch-action:pan-y;}
  canvas{width:100%;height:100%;display:block;}
  #tooltip,#tooltip2{position:absolute;pointer-events:none;background:#0d1117;border:1px solid var(--border);
    border-radius:8px;padding:8px 10px;font-size:.74rem;line-height:1.5;color:var(--text);
    box-shadow:0 6px 18px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,-100%);white-space:nowrap;
    transition:opacity .1s;z-index:5;}
  .errBox{background:var(--panel);border:1px solid var(--down);border-radius:12px;padding:16px;text-align:left;
    color:var(--text);font-size:.85rem;margin:14px 0;}
  .errBox h3{margin:0 0 8px;font-size:.9rem;text-align:center;}
  .errBox .diag{background:var(--panel2);border-radius:8px;padding:10px;font-size:.72rem;font-family:monospace;
    color:var(--muted);margin:10px 0;white-space:pre-wrap;word-break:break-all;}
  .errBox .actions{text-align:center;}
  .errBox button{margin-top:6px;background:var(--down);border:none;color:#1a0000;font-weight:700;
    padding:8px 18px;border-radius:8px;cursor:pointer;font-size:.8rem;}
  .errBox a{color:var(--accent);}
  /* #20: export/import of app settings (see ADR-0004 amendment) */
  .settingsBar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
  .settingsBtn{background:var(--panel2);border:1px solid var(--border);color:var(--muted);
    font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:16px;cursor:pointer;}
  .settingsBtn:hover{color:var(--text);border-color:var(--accent);}

  /* #33: beginner/experienced display-mode toggle. Elements carrying the
     .explainable class are static explanatory text - hidden in experienced
     mode, shown in beginner mode (the default). Dynamic, data-dependent
     text (per-pair range-position sentences, legend chips, values) is never
     tagged and is unaffected by the mode. */
  body.mode-experienced .explainable{display:none;}
  .modeBar{display:flex;gap:0;justify-content:center;margin-top:10px;}
  #layoutBar{margin-top:6px;}
  .modeBtn{background:var(--panel2);border:1px solid var(--border);color:var(--muted);
    font-size:.72rem;font-weight:600;padding:6px 14px;cursor:pointer;}
  .modeBtn:first-child{border-radius:16px 0 0 16px;}
  .modeBtn:last-child{border-radius:0 16px 16px 0;}
  .modeBtn.active{background:var(--accent);border-color:var(--accent);color:#00203a;}

  footer{color:var(--muted);font-size:.72rem;text-align:center;padding:18px 6px 4px;line-height:1.6;}
  @media (min-width:520px){
    .cards{grid-template-columns:repeat(3,1fr);}
    .trendGrid{grid-template-columns:repeat(3,1fr);}
    .convResults{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .card{padding:9px 6px;}
    .card .rate{font-size:.98rem;}
    .card .pair{font-size:.62rem;}
    header h1{font-size:1.06rem;}
    .chartbox{height:230px;}
    .miniBadge .val{font-size:.68rem;}
  }