:root{
  --bg:#f7f9fc; --card:#ffffff; --text:#0f172a; --muted:#5b6472; --border:#e5e9f2;
  --accent:#2563eb; --accent-2:#7c3aed; --shadow:0 12px 32px rgba(15,23,42,.08); --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
html,body{overflow:hidden}

/* Header (full-width) */
.topbar{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--border);padding:8px 12px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.brand-bar{width:100%;max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(90deg,#60a5fa,#a78bfa);padding:10px 16px;border-radius:16px;box-shadow:0 6px 18px rgba(124,58,237,.25)}
.brand-logo{width:22px;height:22px;object-fit:contain}
.brand-text{color:#fff;font-weight:800;letter-spacing:.4px}

/* 3-column centered page */
.page-wrap{height:calc(100vh - 56px - 60px);display:grid;grid-template-columns:minmax(12px,1fr) minmax(0,1100px) minmax(12px,1fr);column-gap:16px;align-items:start}
.layout{grid-column:2;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;height:100%;overflow:auto;position:relative}

/* Side ads */
.ad-side{position:sticky;top:72px;height:calc(100vh - 120px);display:block}
.ad-left{grid-column:1}.ad-right{grid-column:3}
.ad-side .adsbygoogle{width:200px;max-width:100%;height:auto;margin-inline:auto;border:1px dashed var(--border);border-radius:12px}

/* Tabs (equal widths) */
.tabs.grid{max-width:920px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;border-bottom:1px solid var(--border);padding:6px}
.tab{appearance:none;border:none;background:#eef2ff;color:#1e40af;padding:10px 0;border-radius:999px;font-weight:600;cursor:pointer;width:100%}
.tab.active{background:linear-gradient(90deg,#60a5fa,#a78bfa);color:#fff}
.tab:focus{outline:2px solid #93c5fd;outline-offset:2px}

/* Form */
.panel{display:grid;gap:12px;padding:8px 6px}
.panel-centered{max-width:920px;margin:0 auto}
.row{width:100%;max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr 240px 48px 1fr 240px;gap:12px;align-items:end;justify-items:stretch}
.field{display:grid;gap:6px}
.field>span{font-size:13px;color:var(--muted)}
input,select{font:inherit;padding:12px;border-radius:12px;border:1px solid var(--border);background:#fff}
input:focus,select:focus{outline:2px solid #bfdbfe;outline-offset:1px}
.swap{border:1px solid var(--border);border-radius:12px;height:44px;background:#f3f4f6;cursor:pointer}

/* Actions & result */
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#f8fafc;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#60a5fa,#a78bfa);border:none;color:#fff;font-weight:600}
.pretty-box{width:100%;max-width:920px;margin:6px auto 0;border:1px solid var(--border);background:#f8fafc;border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pretty-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.center{text-align:center}.muted{color:var(--muted);font-size:14px}

/* Common conversions */
.common-line{display:flex;gap:10px;overflow:auto;padding:6px 2px;margin-top:6px;justify-content:center}
.common-line a{white-space:nowrap;text-decoration:none;color:#0f172a;background:#f1f5f9;border:1px solid var(--border);padding:8px 10px;border-radius:999px;font-size:14px}
.common-line a:hover{background:#e2e8f0}

/* Bottom ad */
.ad-bottom-thin{position:sticky;bottom:0;z-index:50;background:var(--card);border-top:1px solid var(--border);padding:2px 4px;box-shadow:0 -4px 18px rgba(0,0,0,.06)}
.ad-bottom-thin .adsbygoogle{height:60px;max-height:60px}

/* ==== MOBILE: fluid tabs + no scroll + no overflow ==== */
@media (max-width: 480px){

  /* Use real mobile viewport height set via JS */
  .page-wrap{
    grid-template-columns: 1fr;
    height: calc(var(--vh) * 100 - 52px - 48px); /* header 52 + bottom ad 48 */
  }

  /* The card itself must not scroll on phones */
  .layout{ grid-column:1; padding:10px; overflow:hidden; }

  /* Safety: never allow horizontal overflow */
  html, body { overflow-x:hidden; }
  img, svg, canvas, iframe, video { max-width:100%; height:auto; }

  /* Brand bar */
  .brand-bar{ max-width:560px; padding:8px 12px; border-radius:14px }
  .brand-logo{ width:20px; height:20px }
  .brand-text{ font-size:.95rem }

  /* ✅ Tabs: responsive GRID that auto-fits, equal widths, wraps as needed */
  .tabs.grid{
    max-width:560px;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap:8px;
    padding:6px 6px;
    border-bottom:1px solid var(--border);
  }
  .tabs.grid .tab{ min-width:0; padding:9px 0 } /* equal looking chips */

  /* Single-column form; compact, centered */
  .row{
    grid-template-columns:1fr;
    max-width:560px;
    gap:8px;
    margin:2px auto 0;
  }
  .field>span{ font-size:12px }
  input,select{ padding:10px; border-radius:10px }
  .swap{ height:40px; border-radius:10px }

  /* Actions and result box */
  .actions{ margin-top:2px; justify-content:center }
  .btn{ padding:9px 12px; border-radius:10px }
  .pretty-box{
    max-width:560px;
    margin:6px auto 0;
    padding:10px;
    border-radius:12px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .pretty-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
  .muted{ font-size:12px; text-align:center }

  /* Common chips: stay one line with horizontal swipe (no vertical growth) */
  .common-line{
    max-width:560px; margin:0 auto; overflow-x:auto; overflow-y:hidden;
    gap:8px; padding:4px 0;
  }
  .common-line::-webkit-scrollbar{ height:0 }

  /* Ads: keep small so everything fits without scrolling */
  .ad-inline-mobile{ margin:6px auto 0; max-width:560px }
  .ad-bottom-thin .adsbygoogle{ height:48px; max-height:48px }
  .ad-side{ display:none }
}

/* Safety: prevent any rogue element from causing horizontal overflow */
img, svg, canvas, iframe, video { max-width: 100%; height: auto; }

.footer{display:grid;place-items:center;padding:12px;color:var(--muted)}