/* ── HEADER ── */

    /* ── TICKER ── */
    .ticker { background:rgba(255,209,102,.06); border-bottom:1px solid rgba(255,209,102,.12); padding:9px 0; overflow:hidden; }
    .ticker-track { display:flex; white-space:nowrap; animation:mqt 40s linear infinite; }
    .t-item { font-size:11px; letter-spacing:2px; padding:0 24px; color:rgba(255,209,102,.55); }
    .t-item b { color:rgba(255,255,255,.8); font-weight:normal; }
    @keyframes mqt{ to{transform:translateX(-50%)} }

    /* ── HERO ── */
    .hero {
      text-align:center; padding:64px 20px 44px;
      background:radial-gradient(ellipse at 50% 0%,rgba(255,209,102,.08),transparent 60%);
      position:relative; overflow:hidden;
    }
    .hero-meta { font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.3); position:relative; z-index:1; }
    .hero-meta span { color:rgba(255,209,102,.6); }

    /* ── CONVERTER ── */
    .converter { max-width:860px; margin:0 auto; padding:40px 24px 0; }
    .conv-card {
      padding:36px 40px;
      background:rgba(255,255,255,.025); border:1px solid rgba(255,209,102,.2);
      position:relative; overflow:hidden;
    }
    .conv-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
    .conv-title { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:3px; color:var(--white); margin-bottom:24px; }
    .conv-title span { color:var(--gold); }

    .conv-body { display:grid; grid-template-columns:1fr auto auto 1fr; gap:12px; align-items:end; margin-bottom:20px; }
    .conv-field label { font-size:8px; letter-spacing:3px; color:rgba(255,255,255,.3); text-transform:uppercase; display:block; margin-bottom:8px; }
    .conv-field input, .conv-field select {
      width:100%; padding:14px 16px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,209,102,.2);
      color:#fff; font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:1px;
      outline:none; transition:border-color .3s, background .3s;
      -webkit-appearance:none; appearance:none;
    }
    .conv-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(255,209,102,.6)'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
    .conv-field input:focus, .conv-field select:focus { border-color:var(--gold); background:rgba(255,209,102,.04); }
    .conv-field select option { background:#0e0810; color:#fff; }
    .conv-arrow { font-size:28px; color:rgba(255,209,102,.5); align-self:center; padding-bottom:2px; }
    .conv-swap {
      padding:14px 16px; background:rgba(255,209,102,.08); border:1px solid rgba(255,209,102,.2);
      color:var(--gold); cursor:pointer; font-size:22px; align-self:flex-end;
      transition:background .3s, transform .4s;
    }
    .conv-swap:hover { background:rgba(255,209,102,.2); transform:rotate(180deg); }
    .conv-result {
      font-family:'Bebas Neue',sans-serif; font-size:clamp(24px,4vw,44px);
      background:linear-gradient(135deg,var(--gold),var(--white));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      text-align:center; min-height:54px; animation:rPop .3s cubic-bezier(.16,1,.3,1);
    }
    @keyframes rPop{ from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }

    @media(max-width:640px){
      .conv-body { grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; }
      .conv-arrow { display:none; }
      .conv-swap  { grid-column:span 2; }
      .conv-card  { padding:24px 20px; }
    }

    /* ── CONTROLS ── */
    .controls { max-width:1300px; margin:32px auto 0; padding:0 24px; }
    .ctrl-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .ctrl-label { font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.3); text-transform:uppercase; flex-shrink:0; }

    .base-btn {
      padding:7px 16px; background:transparent; border:1px solid rgba(255,209,102,.18);
      color:rgba(255,209,102,.5); cursor:pointer; font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:2px;
      transition:border-color .3s, color .3s, background .3s;
    }
    .base-btn:hover, .base-btn.active { border-color:var(--gold); color:#000; background:var(--gold); }

    .search-wrap { margin-left:auto; position:relative; }
    .search-input {
      padding:9px 36px 9px 14px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,209,102,.2);
      color:#fff; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1px;
      outline:none; width:200px; transition:border-color .3s, width .4s;
    }
    .search-input:focus { border-color:var(--gold); width:260px; }
    .search-input::placeholder { color:rgba(255,255,255,.25); }
    .search-clear {
      position:absolute; right:10px; top:50%; transform:translateY(-50%);
      background:none; border:none; color:rgba(255,209,102,.4); cursor:pointer;
      font-size:16px; padding:0; display:none;
    }
    .search-clear.show { display:block; }

    /* ── RATE GRID ── */
    .rates-wrap { max-width:1300px; margin:24px auto 0; padding:0 24px 100px; }
    .rates-meta { font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.25); margin-bottom:20px; }
    .rates-meta b { color:rgba(255,209,102,.7); }

    .rates-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }

    .rcard {
      padding:20px 16px;
      background:rgba(255,255,255,.02); border:1px solid rgba(255,209,102,.1);
      position:relative; overflow:hidden; cursor:pointer;
      transition:border-color .35s, box-shadow .35s, transform .25s, background .3s;
    }
    .rcard::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:translateX(-100%); animation:scanG 4s linear infinite; }
    @keyframes scanG{ to{transform:translateX(100%)} }
    .rcard:nth-child(2n)::after  { animation-delay:-.8s }
    .rcard:nth-child(3n)::after  { animation-delay:-1.6s }
    .rcard:nth-child(4n)::after  { animation-delay:-2.4s }
    .rcard:nth-child(5n)::after  { animation-delay:-3.2s }
    .rcard:hover { border-color:rgba(255,209,102,.5); box-shadow:0 12px 40px rgba(255,209,102,.1); transform:translateY(-3px); background:rgba(255,209,102,.04); }
    .rcard.base-card { border-color:var(--gold); background:rgba(255,209,102,.07); }
    .rcard.hidden { display:none; }

    .rcard-flag { font-size:22px; display:block; margin-bottom:8px; }
    .rcard-code { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--white); display:block; line-height:1; }
    .rcard-name { font-size:9px; letter-spacing:1px; color:rgba(255,255,255,.3); display:block; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .rcard-rate { font-family:'Bebas Neue',sans-serif; font-size:clamp(18px,2.5vw,28px); color:var(--gold); display:block; line-height:1; }
    .rcard-unit { font-size:8px; letter-spacing:1px; color:rgba(255,255,255,.2); display:block; margin-top:4px; }

    /* ya tooltip on hover */
    .rcard-tip {
      position:absolute; inset:0; padding:12px;
      background:rgba(6,6,8,.94);
      font-family:'Zen Kaku Gothic New',sans-serif; font-size:11px; line-height:1.7;
      color:rgba(255,255,255,.7);
      opacity:0; transition:opacity .25s;
      display:flex; align-items:center; justify-content:center; text-align:center;
      pointer-events:none;
    }
    .rcard:hover .rcard-tip { opacity:1; }

    .no-results { grid-column:1/-1; text-align:center; padding:60px 20px; font-size:12px; letter-spacing:3px; color:rgba(255,255,255,.2); }

    /* ── YA COMMENT ── */
    .ya-comment {
      max-width:1300px; margin:0 auto; padding:0 24px;
    }
    .ya-inner {
      padding:28px 36px;
      background:rgba(255,209,102,.04); border-left:4px solid var(--gold);
      position:relative; overflow:hidden;
    }
    .ya-inner::before { content:'✌️'; position:absolute; right:20px; top:8px; font-size:60px; opacity:.05; }

    /* ── LOADING / ERROR ── */
    .state-panel { text-align:center; padding:80px 20px; }
    .loading-ring { width:52px; height:52px; border-radius:50%; border:3px solid rgba(255,209,102,.15); border-top-color:var(--gold); animation:spin .8s linear infinite; margin:0 auto 20px; }
    .loading-txt { font-size:10px; letter-spacing:3px; color:rgba(255,255,255,.3); animation:eyebBlink 1s ease-in-out infinite; }
    .error-icon { font-size:52px; margin-bottom:16px; display:block; }
    .error-txt { font-size:11px; letter-spacing:2px; color:rgba(255,80,80,.6); margin-bottom:28px; }
    .retry-btn {
      padding:12px 32px; background:transparent; border:1px solid rgba(255,209,102,.4);
      color:var(--gold); cursor:pointer; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px;
      transition:background .3s, color .3s;
    }
    .retry-btn:hover { background:var(--gold); color:#000; }

    /* ── FOOTER ── */

    @media(max-width:1100px){ .rates-grid{ grid-template-columns:repeat(4,1fr); } }
    @media(max-width:800px) { .rates-grid{ grid-template-columns:repeat(3,1fr); } }
    @media(max-width:560px) { .rates-grid{ grid-template-columns:repeat(2,1fr); } }