/* ============================================================
   thisuseful, premium utility design system
   Default = cool porcelain. Dark mode = midnight glass.
   ============================================================ */
:root{
  --bg:#f4f7fc; --bg-alt:#eaf0f9; --surface:#ffffffd9; --surface-2:#f1f5fb; --surface-3:#e4ebf6;
  --border:#12244a14; --border-strong:#12244a26;
  --text:#0b1730; --muted:#58677f; --faint:#8995a8;
  --brand:#1268e8; --brand-2:#0547ad; --brand-3:#f2b625; --brand-ink:#ffffff;
  --brand-soft:#1268e814; --brand-soft-2:#f2b6251a;
  --ok:#00c758; --warn:#f99c00; --err:#fb2c36; --info:#3080ff;
  --shadow-sm:0 2px 8px rgba(17,45,91,.06);
  --shadow:0 14px 38px rgba(17,45,91,.09);
  --shadow-lg:0 26px 70px rgba(17,45,91,.16);
  --shadow-warm:0 12px 32px rgba(18,104,232,.22);
  --radius:16px; --radius-sm:11px; --radius-lg:24px;
  --grad:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  --grad-2:linear-gradient(135deg,var(--brand-3) 0%,var(--brand-2) 100%);
  --maxw:1200px;
}
:root[data-theme="dark"]{
  --bg:#07101f; --bg-alt:#0a1629; --surface:#101d32e8; --surface-2:#14233b; --surface-3:#1b2d49;
  --border:#b9d3ff14; --border-strong:#b9d3ff2b;
  --text:#f5f8ff; --muted:#a9b7cb; --faint:#6f809a;
  --brand:#54a0ff; --brand-2:#1e6de0; --brand-3:#f5c451; --brand-ink:#06101f;
  --brand-soft:#54a0ff1b; --brand-soft-2:#f5c4511c;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow:0 10px 30px rgba(0,0,0,.25);
  --shadow-lg:0 24px 60px rgba(0,0,0,.38); --shadow-warm:0 8px 28px rgba(224,122,88,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-color:var(--bg);
  background-image:radial-gradient(circle at 12% 8%,rgba(18,104,232,.11),transparent 30%),radial-gradient(circle at 88% 18%,rgba(242,182,37,.09),transparent 26%),linear-gradient(rgba(18,36,74,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(18,36,74,.025) 1px,transparent 1px);
  background-size:auto,auto,40px 40px,40px 40px;
  background-attachment:fixed;
  color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

.container{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(16px,5vw,32px);
}
.narrow{max-width:800px}

/* ===== Header ===== */
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
}
header.site.scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:var(--shadow-sm)}
header.site .container{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.22rem;color:var(--text);letter-spacing:-.02em;text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mark{
  width:40px;height:40px;border-radius:11px;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:var(--shadow-warm);
}
.logo-img{width:46px;height:46px;object-fit:contain;flex:none;filter:drop-shadow(0 5px 8px rgba(30,74,150,.18))}
.logo-text{font-weight:850;letter-spacing:-.035em;font-size:1.08em}
nav.site{display:flex;align-items:center;gap:2px}
nav.site a{
  color:var(--muted);font-weight:600;font-size:.95rem;padding:10px 14px;border-radius:9px;transition:.15s;
}
nav.site a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font-size:18px;cursor:pointer;align-items:center;justify-content:center;
}
@media(max-width:768px){
  .nav-toggle{display:inline-flex}
  nav.site{
    position:absolute;top:68px;right:clamp(16px,5vw,24px);left:clamp(16px,5vw,24px);
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-lg);padding:8px;
    transform-origin:top;transform:scaleY(.95);opacity:0;pointer-events:none;transition:.18s;
  }
  nav.site.open{transform:scaleY(1);opacity:1;pointer-events:auto}
  nav.site a{padding:14px 16px}
}

/* ===== Hero Section ===== */
.hero{text-align:center;padding:clamp(48px,8vw,84px) 0 24px}
.hero h1{
  font-size:clamp(2.4rem,6vw,3.6rem);margin:0 0 16px;letter-spacing:-.04em;line-height:1.1;font-weight:800;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--muted);margin:0 auto 32px;max-width:680px;font-size:clamp(1.05rem,2.5vw,1.25rem)}
.search{max-width:640px;margin:0 auto 48px;position:relative}
.search input{
  width:100%;padding:16px 20px 16px 52px;border-radius:14px;border:1px solid var(--border-strong);
  color:var(--text);font-size:1.05rem;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s;
  background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 18px center;background-size:20px 20px;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft),var(--shadow-warm)}

/* ===== Categories ===== */
.cat{
  --accent:var(--brand);
  margin:48px 0 20px;font-size:.9rem;font-weight:800;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:12px;
}
.cat::before{content:"";width:12px;height:28px;border-radius:6px;background:var(--accent);flex:none;box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 45%,transparent)}
.cat::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 35%,transparent),transparent)}
.cat a{color:var(--brand);font-weight:700;text-decoration:none;margin-left:8px;font-size:.85rem}

/* ===== Category Accordion ===== */
.grid-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px}
.grid-controls .count-note{color:var(--muted);font-size:.9rem;font-weight:600}
#expandAll{padding:9px 18px;font-weight:700;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;cursor:pointer;color:var(--muted);transition:.15s}
#expandAll:hover{background:var(--surface-3);border-color:var(--border-strong);color:var(--text)}
.catsec{margin:12px 0}
.cat-toggle{
  --accent:var(--brand);width:100%;display:flex;align-items:center;gap:14px;
  padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);cursor:pointer;font:inherit;text-align:left;
  transition:border-color .15s,box-shadow .15s;
}
.cat-toggle:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:var(--shadow)}
.cat-toggle .dot{width:12px;height:28px;border-radius:6px;background:var(--accent);flex:none;box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 45%,transparent)}
.cat-toggle .cat-name{font-weight:800;font-size:1.1rem;color:var(--text);flex:1;letter-spacing:-.01em}
.cat-toggle .cat-count{color:var(--accent);font-size:.85rem;font-weight:700;
  background:color-mix(in srgb,var(--accent) 14%,transparent);padding:4px 12px;border-radius:999px;flex:none}
.cat-toggle .chev{color:var(--muted);font-size:1.4rem;line-height:1;flex:none;transition:transform .2s}
.cat-toggle[aria-expanded="true"] .chev{transform:rotate(90deg)}
.cat-body{padding:16px 0 6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.tcard{
  --accent:var(--brand);
  display:flex;flex-direction:column;gap:2px;position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s;
  overflow:hidden;
}
.tcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--brand-2)));
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);border-color:transparent}
.tcard:hover::before{transform:scaleX(1)}
.tcard:hover .ico{transform:scale(1.08) rotate(-3deg)}
.tcard .ico{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  display:grid;place-items:center;font-size:24px;margin-bottom:12px;transition:transform .2s;
}
.tcard .ico svg{width:24px;height:24px}
.tcard h3{margin:0 0 5px;font-size:1.08rem;color:var(--text);font-weight:700;letter-spacing:-.01em}
.tcard p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.empty{color:var(--muted);text-align:center;padding:60px 20px}

/* ===== Tool Page Header ===== */
.tool-head{padding:clamp(32px,5vw,48px) 0 8px}
.tool-head h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:4px 0 10px;letter-spacing:-.03em;font-weight:800;color:var(--text)}
.tool-head p{color:var(--muted);margin:0;font-size:1.1rem}
.crumb{font-size:.9rem;color:var(--faint);margin-bottom:10px}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{text-decoration:underline}

/* ===== Cards ===== */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(20px,4vw,32px);margin:24px 0;
}
.card h2{font-size:1.3rem;margin-top:24px;margin-bottom:12px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.card p{color:var(--text)}

/* ===== Form Elements ===== */
label{font-size:.9rem;color:var(--muted);font-weight:600;display:block;margin:16px 0 8px}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],
input[type=search],input[type=color],select,textarea{
  width:100%;font:inherit;font-size:16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  padding:12px 14px;background:var(--surface-2);color:var(--text);transition:.2s;-webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--brand-soft)}
input::placeholder{color:var(--faint)}
textarea{min-height:160px;resize:vertical;line-height:1.6;font-family:inherit}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 15px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
input[type=color]{padding:4px;height:54px;cursor:pointer}
input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:var(--surface-3);padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--brand);cursor:pointer;box-shadow:var(--shadow-warm);border:3px solid var(--surface)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--brand);cursor:pointer;border:3px solid var(--surface)}

.row{display:flex;flex-wrap:wrap;gap:16px}
.row>div{flex:1;min-width:160px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
button{
  font:inherit;font-weight:600;font-size:.96rem;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  padding:12px 20px;min-height:46px;background:var(--surface-2);color:var(--text);cursor:pointer;transition:.18s;
}
button:hover{background:var(--surface-3);border-color:var(--brand);transform:translateY(-1px)}
button:active{transform:translateY(1px)}
button.primary{background:var(--grad);color:var(--brand-ink);border-color:transparent;box-shadow:var(--shadow-warm)}
button.primary:hover{filter:brightness(1.08);box-shadow:0 6px 22px -4px rgba(229,77,94,.4);transform:translateY(-2px)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}

.range{display:flex;align-items:center;gap:16px}
.range input[type=range]{flex:1}
.check{display:flex;align-items:center;gap:10px;margin:12px 0}
.check input{width:auto;height:20px;width:20px;accent-color:var(--brand)}
.check label{margin:0;font-size:.95rem;color:var(--text)}

/* ===== Stats/Results ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:12px}
.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 14px;text-align:center}
.stat b{display:block;font-size:1.8rem;color:var(--brand);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.stat span{font-size:.85rem;color:var(--muted);font-weight:500}
.out{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;
  margin-top:16px;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,"JetBrains Mono","Fira Code","SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:.94rem;min-height:20px;
}
.big-out{font-size:clamp(1.8rem,5vw,2.4rem);font-weight:800;color:var(--brand);text-align:center;padding:20px 0;letter-spacing:-.02em;word-break:break-word}
.copied{color:var(--ok);font-weight:700;font-size:.88rem;margin-left:8px}
.err{color:var(--err);font-weight:600}
.note{color:var(--muted);font-size:.9rem}
.mono{font-family:ui-monospace,"JetBrains Mono","Fira Code","SF Mono",SFMono-Regular,Menlo,Consolas,monospace}

/* ===== Ad Slots ===== */
.ad-slot{
  margin:32px 0;min-height:120px;display:grid;place-items:center;
  background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  color:var(--faint);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
}

/* ===== Side Ad Rails ===== */
.ad-rail{display:none}
@media(min-width:1440px){
  .ad-rail{display:grid;place-items:center;position:fixed;top:96px;width:160px;height:600px;margin:0;z-index:5;text-align:center;line-height:1.5}
  .ad-rail.left{left:calc(50% - 720px)}
  .ad-rail.right{right:calc(50% - 720px)}
}
@media(min-width:1720px){
  .ad-rail{width:300px;height:600px}
  .ad-rail.left{left:calc(50% - 860px)}
  .ad-rail.right{right:calc(50% - 860px)}
}

/* ===== Content / FAQ ===== */
.content{margin:32px 0}
.content h2{font-size:clamp(1.25rem,3vw,1.5rem);margin-top:32px;letter-spacing:-.02em;font-weight:700;color:var(--text)}
.content p{color:var(--muted);line-height:1.65}
.content code{background:var(--surface-2);padding:2px 8px;border-radius:6px;font-family:ui-monospace,"JetBrains Mono",Menlo,monospace;font-size:.9em}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 20px;margin:12px 0;transition:.2s}
.faq details[open]{box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;color:var(--text);font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋";color:var(--brand);font-weight:700;margin-right:12px}
.faq details[open] summary::before{content:"－"}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:8px 0 8px 42px}
.steps li::before{content:counter(s);position:absolute;left:0;top:6px;width:28px;height:28px;border-radius:9px;
  background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:.85rem}

/* ===== Dropzone ===== */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:clamp(32px,6vw,48px) 24px;text-align:center;
  cursor:pointer;background:var(--surface-2);transition:.2s}
.dropzone:hover{border-color:var(--brand);background:var(--surface-3)}
.dropzone.drag{border-color:var(--brand);background:var(--brand-soft)}
.dropzone .big{font-size:50px;margin-bottom:8px}

/* ===== Preview Area ===== */
.preview img{max-width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:16px}

/* ===== Progress Bars ===== */
.bar{height:12px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin-top:14px}
.bar>i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s}
.bar-fill{height:100%;width:0%;transition:width .25s ease}
.bar-fill.weak{background:var(--err);width:25%}
.bar-fill.fair{background:var(--warn);width:50%}
.bar-fill.strong{background:var(--ok);width:75%}
.bar-fill.very{background:var(--ok);width:100%}

/* ===== Marketing Pages ===== */
.page-hero{text-align:center;padding:clamp(40px,6vw,60px) 0 12px}
.page-hero .badge{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:18px;
  background:var(--grad);color:#fff;font-size:34px;box-shadow:var(--shadow-warm);margin-bottom:18px}
.page-hero h1{font-size:clamp(2rem,5vw,2.8rem);margin:0 0 12px;letter-spacing:-.03em;font-weight:800;
  background:linear-gradient(115deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{color:var(--muted);max-width:640px;margin:0 auto;font-size:1.1rem}
.updated{display:inline-block;margin-top:16px;padding:6px 16px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--muted);font-size:.85rem;font-weight:600}

/* ===== Highlight Grid ===== */
.highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:32px 0}
.highlight{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);transition:transform .18s}
.highlight:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.highlight .hi{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:24px;margin-bottom:14px;
  background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.highlight h3{margin:0 0 6px;font-size:1.06rem;font-weight:700;color:var(--text)}
.highlight p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}

/* ===== Documentation/Help ===== */
.doc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:clamp(24px,4vw,40px);margin:28px 0}
.doc section{scroll-margin-top:80px}
.doc h2{font-size:1.2rem;margin:28px 0 12px;display:flex;align-items:center;gap:12px;letter-spacing:-.01em;color:var(--text)}
.doc>section:first-child h2{margin-top:0}
.doc h2 .n{width:36px;height:36px;border-radius:10px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:16px;flex:none}
.doc p,.doc li{color:var(--muted)}
.doc ul{padding-left:24px;margin:10px 0}.doc li{margin:6px 0}
.doc a{font-weight:600;color:var(--brand)}

/* ===== Contact Grid ===== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:32px 0}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 26px;
  box-shadow:var(--shadow-sm);text-align:center;transition:transform .18s,box-shadow .18s;display:block}
.contact-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--brand) 45%,transparent);text-decoration:none}
.contact-card .ci{width:60px;height:60px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;
  font-size:28px;background:var(--grad);color:#fff;box-shadow:var(--shadow-warm)}
.contact-card h3{margin:0 0 8px;font-size:1.1rem;color:var(--text)}
.contact-card p{margin:0 0 10px;color:var(--muted);font-size:.95rem}
.contact-card .link{font-weight:700;color:var(--brand)}

/* ===== Footer ===== */
footer.site{border-top:1px solid var(--border);background:var(--bg-alt);margin-top:64px;padding:36px 0}
footer.site .container{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
footer.site a{color:var(--muted);font-size:.9rem;font-weight:500}
footer.site a:hover{text-decoration:underline}
footer.site .copy{color:var(--faint);font-size:.86rem}

/* ===== QR Canvas ===== */
.qr-canvas{display:grid;place-items:center;margin-top:16px}

/* ===== Responsive ===== */
@media(max-width:640px){
  header.site .container{padding:0 16px}
  nav.site{position:static;width:auto;height:auto;background:none;box-shadow:none;padding:0}
  nav.site.open{width:auto;height:auto;position:static;background:none;box-shadow:none;padding:0}
  nav.site a{padding:8px 10px}
  .hero h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .search{padding:0 16px}
  .grid{grid-template-columns:1fr;gap:16px}
  .card{padding:20px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .btns{flex-direction:column}
  button{width:100%}
  .tcard{padding:18px}
}

/* ===== Header Actions ===== */
.header-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface);
  color:var(--text);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;min-height:0}
.icon-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
#installBtn{font-size:15px;gap:6px;width:auto;padding:0 14px;font-weight:700}

/* ===== Save/Favorite Button ===== */
.fav-btn{display:inline-block;margin:8px 0 0;background:var(--surface-2);border:1px solid var(--border);
  color:var(--muted);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:700;cursor:pointer;min-height:0}
.fav-btn:hover{border-color:var(--border-strong);color:var(--text)}
.fav-btn.on{background:color-mix(in srgb,var(--warn) 16%,transparent);border-color:var(--warn);color:var(--warn)}

/* ===== Quick Access Section ===== */
.quick{margin:8px 0 4px}
.quick-head{font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--text);margin:20px 0 14px;display:flex;align-items:center;gap:10px}
.quick-head::before{content:"";width:10px;height:24px;border-radius:5px;background:var(--brand);margin-right:10px;box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 45%,transparent)}

/* ===== Apps Page ===== */
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:32px 0}
.app-card{--accent:var(--brand);display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s;overflow:hidden;position:relative}
.app-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.app-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.app-card:hover::before{transform:scaleX(1)}
.app-top{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.app-ico{width:72px;height:72px;border-radius:17px;overflow:hidden;background:var(--surface-2);
  box-shadow:0 10px 24px rgba(7,18,48,.18),0 1px 2px rgba(7,18,48,.16);flex:none}
.app-icon-img{display:block;width:100%;height:100%;object-fit:cover}
.app-card h3{margin:0 0 4px;font-size:1.18rem;letter-spacing:-.01em;color:var(--text)}
.app-card .app-cat{color:var(--muted);font-size:.86rem;font-weight:600}
.app-card p{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0 0 20px}
.app-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;
  border-radius:12px;padding:9px 16px;font-weight:600;border:1px solid #000;transition:.18s;text-decoration:none}
.store-badge:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:transparent}
.store-badge svg{width:24px;height:24px;flex:none}
.store-badge .sb-small{font-size:.6rem;font-weight:500;line-height:1;display:block;opacity:.9;letter-spacing:.02em}
.store-badge .sb-big{font-size:1.05rem;font-weight:700;line-height:1.2;display:block}
.store-badge.soon,.store-badge.pending{background:var(--surface-2);color:var(--muted);border-color:var(--border-strong);cursor:default}
.store-badge.soon:hover,.store-badge.pending:hover{transform:none;box-shadow:none}

/* ===== Sports Page ===== */
.sport-tabs{margin:24px 0 8px}
.sport-group{margin:0 0 14px}
.sport-group-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.sport-group-row{display:flex;flex-wrap:wrap;gap:8px}
.sport-tab{padding:9px 15px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);font-weight:700;font-size:.88rem;cursor:pointer;transition:.18s}
.sport-tab:hover{border-color:var(--brand);color:var(--text)}
.sport-tab.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-warm)}
.sports-status{color:var(--muted);font-size:.88rem;margin:12px 0 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.game-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px 18px;transition:border-color .15s}
.game-card:hover{box-shadow:var(--shadow);border-color:var(--border-strong)}
.game-state{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.game-state .st-pre{color:var(--brand)}
.game-state .st-final{color:var(--faint)}
.live-badge{display:inline-flex;align-items:center;gap:6px;color:#fff;background:#ef4444;
  padding:3px 10px;border-radius:999px;font-size:.7rem;letter-spacing:.04em}
.live-badge .pulse{width:7px;height:7px;border-radius:50%;background:#fff;animation:livePulse 1.4s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
.team-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.team-row img{width:30px;height:30px;object-fit:contain;flex:none;background:transparent}
.team-row .tname{flex:1;font-weight:600;font-size:.98rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-row .tscore{font-weight:800;font-size:1.3rem;color:var(--text);letter-spacing:-.02em;min-width:32px;text-align:right}
.team-row.lose{opacity:.5}
.game-meta{margin-top:10px;color:var(--muted);font-size:.82rem;border-top:1px solid var(--border);padding-top:10px}
.sports-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 20px}
.sports-note{color:var(--faint);font-size:.8rem;margin-top:24px;text-align:center;line-height:1.6}
.spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.consent-panel{position:fixed;z-index:100;right:20px;bottom:20px;max-width:520px;padding:22px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:flex-end;gap:24px}.consent-panel strong{font-size:1rem}.consent-panel p{margin:6px 0 0;color:var(--muted);font-size:.86rem;line-height:1.55}.consent-actions{display:flex;gap:8px;flex:none}.consent-actions button{white-space:nowrap;padding:9px 13px;min-height:40px;font-size:.83rem}@media(max-width:640px){.consent-panel{left:12px;right:12px;bottom:12px;align-items:stretch;flex-direction:column}.consent-actions button{width:auto;flex:1}}

/* ===== 2026 premium refresh ===== */
.page-label{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.hero{text-align:center;padding:clamp(64px,10vw,112px) 0 28px}
.hero h1{color:var(--text);background:none;-webkit-background-clip:initial;background-clip:initial}
.hero p{max-width:720px;font-size:clamp(1.05rem,2.5vw,1.22rem)}
.home-hero{position:relative}
.home-hero::before{content:"";position:absolute;width:min(720px,90vw);height:360px;left:50%;top:26px;transform:translateX(-50%);z-index:-1;background:radial-gradient(ellipse,rgba(18,104,232,.14),transparent 67%);filter:blur(12px);pointer-events:none}
.home-hero h1{font-family:inherit;font-size:clamp(3.25rem,8vw,6.7rem);font-weight:850;letter-spacing:-.075em;max-width:980px;margin-inline:auto;line-height:.94}
.home-hero h1 span{background:linear-gradient(100deg,var(--brand) 12%,#529dff 55%,var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.eyebrow,.section-kicker{font-size:.76rem!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)!important;margin-bottom:18px!important}
.hero-proof{display:flex;justify-content:center;flex-wrap:wrap;margin:8px auto 0;color:var(--muted);font-size:.86rem}
.hero-proof span{padding:0 20px;border-right:1px solid var(--border-strong)}
.hero-proof span:last-child{border-right:0}.hero-proof b{color:var(--text)}
.featured{margin:56px 0 88px}.library-head{margin:0 0 22px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.section-heading h2,.principles>h2{font-family:inherit;font-size:clamp(2rem,4vw,3.3rem);font-weight:820;letter-spacing:-.055em;line-height:1.08;margin:0 0 8px}
.section-heading p{margin:0;color:var(--muted)}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{display:flex;min-height:300px;flex-direction:column;padding:30px;background:linear-gradient(145deg,#08172f,#102c58);color:#f7faff;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);transition:.25s;box-shadow:0 18px 45px rgba(11,34,72,.16);position:relative;overflow:hidden}
.feature-card::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-75px;top:-85px;background:rgba(83,158,255,.18);filter:blur(2px)}
.feature-card:nth-child(2){background:linear-gradient(145deg,#0758ce,#1783f5)}.feature-card:nth-child(3){background:linear-gradient(145deg,#6e4a05,#d99b10)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none}
.feature-card .feature-no{font-family:inherit;font-weight:750;opacity:.65}.feature-card h3{font-family:inherit;font-size:1.75rem;font-weight:800;margin:auto 0 12px;letter-spacing:-.04em}
.feature-card p{color:inherit;opacity:.78;margin:0 0 24px;line-height:1.6}.feature-link{font-size:.88rem;font-weight:800}
.principles{margin:96px 0 40px;padding:clamp(30px,6vw,64px);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,#dcecff),color-mix(in srgb,var(--surface) 94%,#fff5cf));border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.principles>h2{max-width:650px;margin-bottom:42px}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.principle-grid article>span{font-family:inherit;color:var(--brand);font-weight:800}.principle-grid h3{font-size:1.08rem;margin:12px 0 8px}.principle-grid p{color:var(--muted);margin:0}
.editor-note{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:44px;padding-top:28px;border-top:1px solid var(--border-strong)}.editor-note p{max-width:720px;margin:0;color:var(--muted)}.editor-note a{white-space:nowrap;font-weight:700}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 42%,var(--border))}.tcard:hover .ico{transform:translateY(-2px)}
.icon-btn{width:42px;height:42px;font-size:0}.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-button{width:auto!important;padding:0 13px!important;gap:7px}.install-button span{font-size:.86rem}
.nav-toggle{font-size:0;flex-direction:column}.nav-toggle span{display:block;width:18px;height:1.5px;background:currentColor;transition:.2s}.nav-toggle span+span{margin-top:5px}.nav-toggle.is-open span:first-child{transform:translateY(3.25px) rotate(45deg)}.nav-toggle.is-open span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media(max-width:820px){.featured-grid,.principle-grid{grid-template-columns:1fr}.feature-card{min-height:240px}.editor-note{align-items:flex-start;flex-direction:column}.hero-proof{gap:10px}.hero-proof span{border:0;padding:0 8px}}

/* ===== Responsive for Apps + Sports ===== */
@media(max-width:768px){
  .app-grid{grid-template-columns:1fr;gap:16px}
  .games{grid-template-columns:1fr}
  .app-actions{flex-direction:column;align-items:stretch}
  .app-actions .store-badge{justify-content:center}
  .sport-tab{padding:8px 13px;font-size:.84rem}
}