/* =================================================================
   VLAN Calculator — Anavem
   Complete stylesheet with dark mode support
   ================================================================= */

/* ── Reset & Variables ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg0:#f8fafc;--bg1:#ffffff;--bg2:#f1f5f9;--bg3:#e2e8f0;
  --tx0:#0f172a;--tx1:#475569;--tx2:#94a3b8;
  --cyan:#06b6d4;--cyan-l:#0891b2;--cyan-d:#0e7490;
  --purple:#8b5cf6;--purple-l:#7c3aed;
  --emerald:#10b981;--emerald-l:#059669;
  --amber:#f59e0b;--amber-l:#d97706;
  --brd:#e2e8f0;--brd2:#cbd5e1;
  --crit:#ef4444;--warn:#eab308;--info:#06b6d4;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --hdr-bg:rgba(255,255,255,.95);
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --radius:6px;
}

/* ── Dark Mode ────────────────────────────────────────────────── */
body.dark{
  --bg0:#0f172a;--bg1:#1e293b;--bg2:#1e293b;--bg3:#334155;
  --tx0:#f1f5f9;--tx1:#cbd5e1;--tx2:#64748b;
  --brd:#334155;--brd2:#475569;
  --hdr-bg:rgba(15,23,42,.95);
  --shadow:0 1px 3px rgba(0,0,0,.3);
}
body.dark .lang-btn.on{background:var(--cyan);color:#0f172a}
body.dark .btn-p{background:var(--cyan);color:#0f172a}
body.dark .tab-btn.active{background:var(--cyan);color:#0f172a;border-color:var(--cyan)}
body.dark .vlan-badge.normal{background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.4)}
body.dark .vlan-badge.extended{background:rgba(6,182,212,.2);border-color:rgba(6,182,212,.4)}
body.dark .vlan-badge.reserved{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.4)}
body.dark .vlan-badge.default{background:rgba(148,163,184,.15);border-color:rgba(148,163,184,.3)}
body.dark .inp:focus{border-color:var(--cyan)}
body.dark .inp{background:var(--bg0);color:var(--tx0);border-color:var(--brd)}
body.dark .select-input{background:var(--bg0);color:var(--tx0);border-color:var(--brd)}
body.dark .card{background:var(--bg1);border-color:var(--brd)}
body.dark .result-table tbody tr:hover{background:rgba(6,182,212,.08)}
body.dark .info-box{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.25)}
body.dark .warn-box{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25)}
body.dark .code-block{background:var(--bg3);border-color:var(--brd2)}
body.dark .pcp-row:nth-child(even){background:rgba(255,255,255,.02)}
body.dark .vlan-row:hover{background:rgba(6,182,212,.08)}

/* ── Base ─────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg0);color:var(--tx0);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;transition:background .3s,color .3s}
a{color:var(--cyan);text-decoration:none;transition:color .2s}
a:hover{color:var(--cyan-l)}

/* ── Header ───────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--brd);transition:background .3s}
.hdr-top{border-bottom:1px solid var(--brd);background:var(--bg2)}
.hdr-top-in{max-width:1400px;margin:0 auto;padding:0 1.5rem;height:28px;display:flex;align-items:center;justify-content:space-between}
.hdr-top-l{display:flex;align-items:center;gap:.5rem;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2)}
.hdr-top-l .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hdr-top-r{display:flex;align-items:center;gap:1rem}
.hdr-top-r a{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2);transition:color .2s}.hdr-top-r a:hover{color:var(--tx0)}
.hdr-in{max-width:1400px;margin:0 auto;padding:0 1.5rem;height:56px;display:flex;align-items:center;justify-content:space-between}
.hdr-l{display:flex;align-items:center;gap:.75rem}
.logo{font-size:1.35rem;font-weight:900;letter-spacing:-.04em;text-decoration:none}
.logo-g{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-t{color:var(--tx0);-webkit-text-fill-color:var(--tx0)}
.logo:hover .logo-t{color:var(--cyan);-webkit-text-fill-color:var(--cyan)}
.badge{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--bg1);background:var(--cyan);padding:2px 8px}
.hdr-nav{display:flex;align-items:center;gap:.25rem}
.hdr-nav a{font-size:.8rem;font-weight:600;color:var(--tx1);padding:.4rem .75rem;transition:all .2s;text-decoration:none;display:flex;align-items:center;gap:.35rem}
.hdr-nav a:hover{color:var(--cyan);background:rgba(6,182,212,.06)}
.hdr-nav a svg{width:14px;height:14px}
.hdr-r{display:flex;align-items:center;gap:.5rem}

/* ── Theme Toggle ─────────────────────────────────────────────── */
.btn-theme{background:0;border:1px solid var(--brd);padding:5px;cursor:pointer;color:var(--tx2);display:flex;align-items:center;transition:all .2s}
.btn-theme:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-theme svg{width:16px;height:16px}

/* ── Language Toggle ──────────────────────────────────────────── */
.lang-toggle{display:flex;border:1px solid var(--brd);overflow:hidden}
.lang-btn{font-family:var(--sans);font-size:.65rem;font-weight:800;padding:3px 8px;background:transparent;color:var(--tx2);border:none;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}
.lang-btn.on{background:var(--tx0);color:var(--bg0)}
.lang-btn:hover:not(.on){color:var(--tx0)}

/* ── Back Link ────────────────────────────────────────────────── */
.bk{display:flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:var(--tx1);transition:color .2s;text-decoration:none}.bk:hover{color:var(--cyan)}
.bk svg{width:16px;height:16px}

/* ── Hamburger Nav Toggle ─────────────────────────────────────── */
.nav-toggle{display:none;background:0;border:1px solid var(--brd);padding:6px;cursor:pointer;color:var(--tx1);align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle svg{display:block}

/* Dropdown nav when open on mobile */
@media(max-width:1024px){
  .hdr-nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--hdr-bg);backdrop-filter:blur(16px);border-bottom:2px solid var(--cyan);padding:.5rem 0;z-index:200;animation:mIn .15s ease-out}
  .hdr-nav.open a{padding:.65rem 1.25rem;font-size:.85rem;border-bottom:1px solid var(--brd)}
  .hdr-nav.open a:last-child{border-bottom:none}
}

/* ── Main Container ───────────────────────────────────────────── */
.mc{max-width:1400px;margin:0 auto;padding:1.5rem;width:100%;flex:1}

/* ── Install Banner (PWA) ─────────────────────────────────────── */
.install-banner{display:none;align-items:center;justify-content:center;gap:.75rem;padding:.6rem 1rem;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff;font-size:.8rem;font-weight:600}
.install-banner.v{display:flex}
.install-banner button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.75rem;font-weight:700;padding:4px 12px;cursor:pointer}
.install-banner .dismiss{background:0;border:0;color:rgba(255,255,255,.6);cursor:pointer;font-size:1rem}

/* ── Counter Bar ──────────────────────────────────────────────── */
.counter-bar{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg2);font-size:.75rem;color:var(--tx2);font-weight:600;transition:background .3s}
.counter-bar strong{color:var(--cyan);font-family:var(--mono);font-weight:800}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{text-align:center;padding:2.5rem 1.5rem 2rem}
.hero h1{font-size:2rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:.5rem}
.hero p.sub{color:var(--tx1);margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}
.hero-badges{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}
.hero-badge{display:flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;color:var(--tx2)}
.hero-badge svg{width:14px;height:14px;color:var(--cyan)}

/* ── Tabs ─────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;margin-bottom:1.5rem;border-bottom:2px solid var(--brd);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab-btn{font-family:var(--sans);font-size:.8rem;font-weight:700;padding:.65rem 1.25rem;border:none;background:transparent;color:var(--tx2);cursor:pointer;transition:all .2s;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px;text-transform:uppercase;letter-spacing:.05em}
.tab-btn:hover{color:var(--tx0);background:rgba(6,182,212,.05)}
.tab-btn.active{color:var(--cyan);border-bottom-color:var(--cyan);background:transparent}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── Cards / Sections ─────────────────────────────────────────── */
.card{background:var(--bg1);border:1px solid var(--brd);padding:1.5rem;margin-bottom:1.5rem;transition:background .3s,border-color .3s}
.card-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.card-title svg{width:16px;height:16px;color:var(--cyan)}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-size:.85rem;font-weight:600;padding:.5rem 1rem;border:1px solid var(--brd);background:0;color:var(--tx0);cursor:pointer;transition:all .2s}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-p{background:var(--cyan);border-color:var(--cyan);color:#fff}.btn-p:hover{background:var(--cyan-l);border-color:var(--cyan-l);color:#fff}
.btn svg{width:16px;height:16px}
.btn-sm{font-size:.75rem;padding:.35rem .7rem}
.btn-group{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Form Inputs ──────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.form-field{display:flex;flex-direction:column;gap:.35rem}
.form-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2)}
.inp{font-family:var(--sans);font-size:.9rem;padding:.55rem .85rem;background:var(--bg1);border:1px solid var(--brd);color:var(--tx0);transition:border-color .2s;width:100%}
.inp:focus{outline:none;border-color:var(--cyan)}
.inp::placeholder{color:var(--tx2)}
.select-input{font-family:var(--sans);font-size:.9rem;padding:.55rem .85rem;background:var(--bg1);border:1px solid var(--brd);color:var(--tx0);transition:border-color .2s;width:100%;cursor:pointer}
.select-input:focus{outline:none;border-color:var(--cyan)}
.helper-text{font-size:.72rem;color:var(--tx2);margin-top:.2rem}

/* ── Result Table ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--brd);margin-bottom:1rem}
.result-table{width:100%;border-collapse:collapse;font-size:.825rem}
.result-table th{background:var(--bg2);padding:.65rem .85rem;text-align:left;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx1);border-bottom:1px solid var(--brd);white-space:nowrap}
.result-table td{padding:.55rem .85rem;border-bottom:1px solid var(--brd);vertical-align:middle}
.result-table tbody tr{transition:background .15s}
.result-table tbody tr:last-child td{border-bottom:none}
.vlan-row:hover{background:rgba(6,182,212,.06)}
.td-mono{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--purple-l)}
.td-addr{font-family:var(--mono);font-size:.78rem;color:var(--tx1)}
.td-num{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--tx0)}

/* ── VLAN Range Badges ────────────────────────────────────────── */
.vlan-badge{display:inline-block;padding:2px 8px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.vlan-badge.default{background:rgba(148,163,184,.12);color:#64748b;border:1px solid rgba(148,163,184,.3)}
.vlan-badge.normal{background:rgba(16,185,129,.1);color:#059669;border:1px solid rgba(16,185,129,.3)}
.vlan-badge.reserved{background:rgba(245,158,11,.1);color:#d97706;border:1px solid rgba(245,158,11,.3)}
.vlan-badge.extended{background:rgba(6,182,212,.1);color:#0e7490;border:1px solid rgba(6,182,212,.3)}

/* ── VLAN ID Lookup ───────────────────────────────────────────── */
.lookup-wrap{display:flex;gap:.5rem;align-items:flex-end;margin-bottom:1.5rem;flex-wrap:wrap}
.lookup-wrap .inp{max-width:180px}
.lookup-result{background:var(--bg2);border:1px solid var(--brd);padding:1.25rem;animation:mIn .2s ease-out}
.lr-row{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.5rem}
.lr-row:last-child{margin-bottom:0}
.lr-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2);min-width:80px}
.lr-val{font-size:.88rem;color:var(--tx0);font-weight:500}
.lr-val.mono{font-family:var(--mono);font-weight:700;color:var(--purple-l)}

/* ── Range Legend ─────────────────────────────────────────────── */
.range-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-bottom:1.5rem}
.range-item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border:1px solid var(--brd);background:var(--bg1)}
.range-color{width:4px;border-radius:2px;align-self:stretch;flex-shrink:0;min-height:40px}
.range-color.default{background:#94a3b8}
.range-color.normal{background:var(--emerald)}
.range-color.reserved{background:var(--amber)}
.range-color.extended{background:var(--cyan)}
.range-info{}
.range-ids{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--tx0);margin-bottom:.15rem}
.range-name{font-size:.82rem;font-weight:600;color:var(--tx1);margin-bottom:.2rem}
.range-desc{font-size:.75rem;color:var(--tx2);line-height:1.5}

/* ── 802.1Q Frame ─────────────────────────────────────────────── */
.frame-viz{border:1px solid var(--brd);overflow:hidden;margin-bottom:1.5rem}
.frame-row{display:flex;align-items:stretch;min-height:60px}
.frame-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;border-right:1px solid var(--brd);text-align:center;transition:background .2s}
.frame-cell:last-child{border-right:none}
.frame-cell.highlight{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.3)}
.frame-cell.highlight .fc-label{color:var(--cyan)}
.fc-label{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);margin-bottom:.25rem}
.fc-bytes{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--tx0)}
.fc-hex{font-family:var(--mono);font-size:.65rem;color:var(--tx2);margin-top:.2rem}
.frame-cell.dst{flex:2}
.frame-cell.src{flex:2}
.frame-cell.tpid{flex:1.5;background:rgba(139,92,246,.06);border-color:rgba(139,92,246,.2)}
.frame-cell.tpid .fc-label{color:var(--purple)}
.frame-cell.tci{flex:2;background:rgba(6,182,212,.06);border-color:rgba(6,182,212,.2)}
.frame-cell.tci .fc-label{color:var(--cyan)}
.frame-cell.etype{flex:1.5}
.frame-cell.payload{flex:5}
.frame-cell.fcs{flex:1}
.tci-breakdown{display:flex;font-size:.62rem;color:var(--tx2);gap:.4rem;margin-top:.2rem;flex-wrap:wrap;justify-content:center}
.tci-bit{padding:1px 4px;background:var(--bg3);border:1px solid var(--brd)}

/* ── PCP Table ────────────────────────────────────────────────── */
.pcp-table{width:100%;border-collapse:collapse;font-size:.82rem}
.pcp-table th{background:var(--bg2);padding:.5rem .85rem;text-align:left;font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx1);border-bottom:1px solid var(--brd)}
.pcp-table td{padding:.5rem .85rem;border-bottom:1px solid var(--brd)}
.pcp-row:nth-child(even){background:rgba(0,0,0,.015)}
.pcp-val{font-family:var(--mono);font-weight:700;color:var(--purple-l);font-size:.8rem}
.pcp-name{font-weight:600;color:var(--tx0)}
.pcp-desc{color:var(--tx1);font-size:.78rem}
.pcp-bar{height:8px;background:var(--brd);border-radius:2px;overflow:hidden;min-width:80px}
.pcp-fill{height:100%;border-radius:2px;transition:width .3s}

/* ── Info & Warn Boxes ────────────────────────────────────────── */
.info-box{padding:1rem 1.25rem;border:1px solid rgba(6,182,212,.2);background:rgba(6,182,212,.06);margin-bottom:1rem}
.info-box p{font-size:.85rem;color:var(--tx1);line-height:1.7}
.warn-box{padding:1rem 1.25rem;border:1px solid rgba(245,158,11,.2);background:rgba(245,158,11,.06);margin-bottom:1rem}
.warn-box p{font-size:.85rem;color:var(--tx1);line-height:1.7}
.box-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan);margin-bottom:.4rem}
.warn-box .box-title{color:var(--amber-l)}

/* ── Code Block ───────────────────────────────────────────────── */
.code-block{font-family:var(--mono);font-size:.8rem;background:var(--bg2);border:1px solid var(--brd);padding:1rem 1.25rem;color:var(--tx0);line-height:1.8;overflow-x:auto;white-space:pre}
.code-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);margin-bottom:.35rem}

/* ── Topology Diagram ─────────────────────────────────────────── */
.topo{border:1px solid var(--brd);padding:1.5rem;text-align:center;margin-bottom:1rem}
.topo-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);margin-bottom:1rem}
.topo-svg{max-width:100%;height:auto}

/* ── Two-column layout ────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}

/* ── Section Divider ──────────────────────────────────────────── */
.sec-div{border:none;border-top:1px solid var(--brd);margin:1.5rem 0}

/* ── Trunk Config Builder ─────────────────────────────────────── */
.trunk-output{font-family:var(--mono);font-size:.82rem;background:var(--bg2);border:1px solid var(--brd);padding:1rem;color:var(--tx0);line-height:1.9;min-height:120px;white-space:pre;overflow-x:auto}

/* ── Copy Feedback ────────────────────────────────────────────── */
.copy-btn{gap:.3rem;font-size:.75rem;padding:.35rem .65rem}
.copy-btn.copied{color:#22c55e;border-color:#22c55e}

/* ── Ad Units ─────────────────────────────────────────────────── */
.ad-unit{margin:1.5rem 0;min-height:90px;overflow:hidden}

/* ── SEO Text ─────────────────────────────────────────────────── */
.seo-text{max-width:860px;margin:0 auto;padding:1.5rem 0}
.seo-text p{font-size:.85rem;color:var(--tx1);line-height:1.7;margin-bottom:.85rem}
.seo-text p:last-child{margin-bottom:0}

/* ── Empty / Placeholder ──────────────────────────────────────── */
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--tx2)}
.empty-state svg{width:44px;height:44px;margin-bottom:.75rem;opacity:.35}
.empty-state p{font-size:.85rem}

/* ── Modal ────────────────────────────────────────────────────── */
@keyframes mIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ── Footer ───────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--brd);margin-top:auto;transition:border-color .3s}
.ft-in{max-width:1400px;margin:0 auto;padding:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.ft-c{font-size:.8rem;color:var(--tx2)}
.ft-l{display:flex;gap:1.5rem;list-style:none}
.ft-l a{font-size:.8rem;color:var(--tx2);transition:color .2s}.ft-l a:hover{color:var(--cyan)}

/* ── Responsive: Tablet ───────────────────────────────────────── */
@media(max-width:1024px){
  .hdr-top{display:none}
  .hdr-nav{display:none}
  .hdr{position:sticky;top:0}
  .nav-toggle{display:inline-flex}
  .hdr-in{height:48px;position:relative}
  .hero h1{font-size:1.5rem}
  .hero{padding:1.75rem 1rem 1.25rem}
  .two-col{grid-template-columns:1fr}
  .frame-viz{overflow-x:auto}
  .range-legend{grid-template-columns:1fr 1fr}
  .ft-in{flex-direction:column;text-align:center;padding:1rem}
  .ft-l{gap:1rem}
  .bk span{display:none}
  .tabs{gap:0}
  .tab-btn{font-size:.72rem;padding:.5rem .85rem}
}

/* ── Responsive: Phone ────────────────────────────────────────── */
@media(max-width:480px){
  .hdr-in{padding:0 .75rem;height:48px}
  .mc{padding:.75rem}
  .logo{font-size:1.1rem}
  .badge{font-size:.6rem;padding:1px 6px}
  .hero h1{font-size:1.2rem}
  .hero{padding:1.25rem .75rem 1rem}
  .form-grid{grid-template-columns:1fr}
  .range-legend{grid-template-columns:1fr}
  .card{padding:1rem}
  .two-col{grid-template-columns:1fr}
  .lookup-wrap{flex-direction:column;align-items:stretch}
  .lookup-wrap .inp{max-width:100%}
  .btn-group{flex-direction:column}
  .tabs{border-bottom:1px solid var(--brd)}
  .tab-btn{font-size:.68rem;padding:.45rem .6rem;letter-spacing:.02em}
}