/* ==========================================================================
   GRIDCUTTER — style.css
   Shared across index.html and gridcutter.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    --brand:          oklch(47% 0.18 264);
    --brand-dark:     oklch(39% 0.18 264);
    --brand-light:    oklch(94% 0.04 264);
    --brand-xlight:   oklch(97% 0.015 264);
    --surface-0:      oklch(99% 0.005 264);
    --surface-1:      oklch(97% 0.008 264);
    --surface-2:      oklch(94% 0.012 264);
    --surface-3:      oklch(90% 0.016 264);
    --text-primary:   oklch(18% 0.015 264);
    --text-secondary: oklch(45% 0.02  264);
    --text-tertiary:  oklch(62% 0.015 264);
    --border-subtle:  oklch(88% 0.02 264);
    --border-mid:     oklch(80% 0.03 264);
    --green:          oklch(52% 0.15 155);
    --green-surface:  oklch(96% 0.04 155);
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
    --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem;
    --text-lg:1.25rem; --text-xl:1.625rem; --text-2xl:2.25rem;
    --text-3xl:clamp(2.5rem,5vw + 1rem,4rem);
    --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
    --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
    font-family:'Source Serif 4',Georgia,serif;
    background:var(--surface-0);
    color:var(--text-primary);
    font-size:var(--text-base);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
.f-display { font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-0.03em; line-height:1.05; }
.f-label   { font-family:'Archivo',sans-serif; font-weight:600; font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container { max-width:1160px; margin-inline:auto; padding-inline:var(--sp-5); }
@media(min-width:768px){ .container { padding-inline:var(--sp-7); } }
.section     { padding-block:var(--sp-9); }
.section-alt { background:var(--surface-1); }

/* --------------------------------------------------------------------------
   5. NAV (shared)
   -------------------------------------------------------------------------- */
.nav { position:sticky; top:0; z-index:200; background:color-mix(in oklch,var(--surface-0) 88%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border-subtle); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:60px; gap:var(--sp-6); }
.nav-logo { display:flex; align-items:center; gap:var(--sp-2); font-family:'Archivo',sans-serif; font-weight:900; font-size:1.1rem; letter-spacing:-0.04em; color:var(--text-primary); }
.nav-logo-mark { width:28px; height:28px; background:var(--brand); border-radius:7px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:5px; }
.nav-logo-mark span { background:white; border-radius:1px; display:block; }
.nav-logo-mark span:nth-child(n+4) { opacity:.5; }
.nav-links { display:none; gap:var(--sp-6); align-items:center; list-style:none; }
@media(min-width:768px){ .nav-links { display:flex; } }
.nav-links a { font-family:'Archivo',sans-serif; font-weight:500; font-size:var(--text-sm); color:var(--text-secondary); transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color:var(--brand); }
.nav-links a.active { font-weight:700; }
.nav-cta { display:none; }
@media(min-width:640px){ .nav-cta { display:flex; } }

/* --------------------------------------------------------------------------
   6. BUTTONS (shared)
   -------------------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:var(--sp-2); font-family:'Archivo',sans-serif; font-weight:700; font-size:var(--text-sm); padding:10px var(--sp-5); border-radius:8px; cursor:pointer; transition:opacity .15s,transform .15s var(--ease-out-quart); border:none; }
.btn:hover  { opacity:.88; transform:translateY(-1px); }
.btn:active { transform:translateY(0); opacity:1; }
.btn-primary { background:var(--brand); color:white; box-shadow:0 2px 12px oklch(47% .18 264/.3); }
.btn-ghost   { background:transparent; color:var(--text-secondary); border:1px solid var(--border-mid); }
.btn-ghost:hover { color:var(--text-primary); border-color:var(--text-tertiary); }

/* --------------------------------------------------------------------------
   7. MOBILE MENU (shared)
   -------------------------------------------------------------------------- */
.mobile-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:none; border:1px solid var(--border-mid); border-radius:8px; cursor:pointer; color:var(--text-secondary); }
@media(min-width:768px){ .mobile-toggle { display:none; } }
.mobile-menu { display:none; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5) var(--sp-5); border-top:1px solid var(--border-subtle); background:var(--surface-0); }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:'Archivo',sans-serif; font-weight:500; font-size:var(--text-sm); color:var(--text-secondary); padding:var(--sp-2) 0; }
.mobile-menu a:hover { color:var(--brand); }

/* --------------------------------------------------------------------------
   8. FOOTER (shared)
   -------------------------------------------------------------------------- */
.footer { background:var(--surface-1); border-top:1px solid var(--border-subtle); padding-block:var(--sp-7); }
.footer-inner { display:flex; flex-direction:column; gap:var(--sp-7); }
@media(min-width:768px){ .footer-inner { flex-direction:row; justify-content:space-between; gap:var(--sp-8); } }
.footer-brand p { font-size:var(--text-sm); color:var(--text-secondary); max-width:34ch; margin-top:var(--sp-3); line-height:1.6; }
.footer-cols { display:flex; gap:var(--sp-8); flex-wrap:wrap; }
.footer-col-title { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-primary); margin-bottom:var(--sp-3); }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:var(--sp-2); }
.footer-col a { font-size:var(--text-sm); color:var(--text-secondary); transition:color .15s; }
.footer-col a:hover { color:var(--brand); }
.footer-bottom { border-top:1px solid var(--border-subtle); padding-top:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
@media(min-width:640px){ .footer-bottom { flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-bottom p { font-family:'Archivo',sans-serif; font-size:var(--text-xs); color:var(--text-tertiary); }
.footer-bottom { margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   9. PRIVACY BADGE (shared)
   -------------------------------------------------------------------------- */
.privacy-badge { display:inline-flex; align-items:center; gap:var(--sp-2); padding:6px var(--sp-3); background:var(--green-surface); border-radius:100px; }
.privacy-dot   { width:7px; height:7px; border-radius:50%; background:var(--green); }
.privacy-badge span { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green); }

/* --------------------------------------------------------------------------
   10. REVEAL ANIMATION (shared)
   -------------------------------------------------------------------------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease-out-quart),transform .55s var(--ease-out-quart); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }
.reveal-delay-3 { transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){ .reveal,.phone-frame,.chip { animation:none; transition:opacity .3s; } }


/* ==========================================================================
   INDEX.HTML — PAGE-SPECIFIC STYLES
   ========================================================================== */

/* HERO */
.hero { padding-block:var(--sp-9); }
.hero-layout { display:grid; grid-template-columns:1fr; gap:var(--sp-8); align-items:center; }
@media(min-width:900px){ .hero-layout { grid-template-columns:1fr 400px; } }
.hero-eyebrow { display:inline-flex; align-items:center; gap:var(--sp-2); padding:6px var(--sp-3); background:var(--green-surface); border-radius:100px; margin-bottom:var(--sp-5); }
.hero-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.hero-eyebrow span { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green); }
.hero h1 { font-size:var(--text-3xl); margin-bottom:var(--sp-5); max-width:14ch; }
.hero h1 em { font-style:italic; color:var(--brand); }
.hero-body { font-size:var(--text-lg); color:var(--text-secondary); max-width:52ch; margin-bottom:var(--sp-6); font-weight:300; line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-7); }
.hero-link { font-family:'Archivo',sans-serif; font-weight:500; font-size:var(--text-sm); color:var(--text-secondary); text-decoration:underline; text-underline-offset:3px; transition:color .15s; }
.hero-link:hover { color:var(--brand); }
.hero-trust { display:flex; flex-wrap:wrap; gap:var(--sp-5); }
.trust-item { display:flex; align-items:center; gap:var(--sp-2); font-family:'Archivo',sans-serif; font-size:var(--text-sm); font-weight:500; color:var(--text-secondary); }

/* PHONE MOCKUP */
.hero-visual { position:relative; padding-inline:28px; }
.phone-frame { position:relative; z-index:1; background:white; border-radius:28px; border:1px solid var(--border-subtle); box-shadow:0 24px 80px oklch(18% .015 264/.12),0 4px 16px oklch(18% .015 264/.06); overflow:hidden; animation:float 7s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.phone-notch { width:80px; height:20px; background:var(--surface-2); border-radius:0 0 14px 14px; margin:12px auto 0; }
.phone-ig-header { padding:var(--sp-4); display:flex; align-items:center; gap:var(--sp-3); border-bottom:1px solid var(--border-subtle); }
.ig-avatar-ring { width:44px; height:44px; border-radius:50%; padding:2px; background:conic-gradient(from 0deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433); flex-shrink:0; }
.ig-avatar-inner { width:100%; height:100%; border-radius:50%; background:var(--surface-2); border:2px solid white; }
.ig-meta { flex:1; }
.ig-username { font-family:'Archivo',sans-serif; font-weight:700; font-size:var(--text-sm); color:var(--text-primary); }
.ig-stats-row { display:flex; gap:var(--sp-4); }
.ig-stat { font-family:'Archivo',sans-serif; font-size:var(--text-xs); color:var(--text-tertiary); }
.ig-stat strong { color:var(--text-secondary); }
.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--border-subtle); }
.ig-cell { aspect-ratio:1; overflow:hidden; }
.ig-cell-fill { width:100%; height:100%; }
.ig-cell:nth-child(1) .ig-cell-fill { background:oklch(82% .12 264); }
.ig-cell:nth-child(2) .ig-cell-fill { background:oklch(72% .14 264); }
.ig-cell:nth-child(3) .ig-cell-fill { background:oklch(62% .16 264); }
.ig-cell:nth-child(4) .ig-cell-fill { background:oklch(78% .13 264); }
.ig-cell:nth-child(5) .ig-cell-fill { background:oklch(55% .17 264); }
.ig-cell:nth-child(6) .ig-cell-fill { background:oklch(48% .18 264); }
.ig-cell:nth-child(7) .ig-cell-fill { background:oklch(70% .14 264); }
.ig-cell:nth-child(8) .ig-cell-fill { background:oklch(50% .17 264); }
.ig-cell:nth-child(9) .ig-cell-fill { background:oklch(40% .18 264); }
.phone-badge { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3); background:var(--green-surface); border-radius:10px; }
.phone-badge span { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; color:var(--green); }
.chip { position:absolute; z-index:10; background:white; border:1px solid var(--border-subtle); border-radius:12px; padding:var(--sp-2) var(--sp-3); box-shadow:0 4px 16px oklch(18% .015 264/.1); }
.chip-label { font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); }
.chip-value { font-family:'Archivo',sans-serif; font-size:var(--text-sm); font-weight:800; color:var(--brand); letter-spacing:-.02em; }
.chip-left  { left:0; top:40%; animation:float 8s 1s ease-in-out infinite; }
.chip-right { right:0; top:22%; animation:float 6s .5s ease-in-out infinite reverse; }
@media(max-width:900px){ .chip { display:none; } }

/* GRID TYPES SECTION */
.grid-types-layout { display:grid; grid-template-columns:1fr; gap:var(--sp-5); margin-top:var(--sp-7); }
@media(min-width:640px){ .grid-types-layout { grid-template-columns:repeat(3,1fr); } }
.grid-type { padding:var(--sp-6); border:1px solid var(--border-subtle); border-radius:16px; transition:border-color .2s,box-shadow .2s; cursor:pointer; display:block; }
.grid-type:hover { border-color:var(--brand); box-shadow:0 0 0 3px oklch(47% .18 264/.08); }
.grid-type.featured { border-color:var(--brand); background:var(--brand-xlight); }
.mini-preview { display:grid; gap:2px; border-radius:8px; overflow:hidden; margin-bottom:var(--sp-5); width:100%; max-width:120px; grid-template-columns:repeat(3,1fr); }
.mini-cell { aspect-ratio:3/4; background:var(--surface-2); border-radius:2px; }
.mini-cell.on       { background:var(--brand); }
.mini-cell.on-med   { background:oklch(65% .16 264); }
.mini-cell.on-light { background:oklch(78% .12 264); }
.grid-type-name  { font-family:'Archivo',sans-serif; font-weight:800; font-size:var(--text-lg); letter-spacing:-.02em; color:var(--text-primary); margin-bottom:var(--sp-2); }
.grid-type-desc  { font-size:var(--text-sm); color:var(--text-secondary); line-height:1.6; max-width:32ch; }
.grid-type-count { margin-top:var(--sp-4); font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; color:var(--brand); }

/* HOW IT WORKS SECTION */
.how-layout { display:grid; grid-template-columns:1fr; gap:var(--sp-8); align-items:start; }
@media(min-width:900px){ .how-layout { grid-template-columns:1fr 1fr; } }
.how-steps { display:flex; flex-direction:column; }
.how-step { display:grid; grid-template-columns:40px 1fr; gap:var(--sp-4); padding-bottom:var(--sp-6); position:relative; }
.how-step:not(:last-child)::before { content:''; position:absolute; left:20px; top:40px; bottom:0; width:1px; background:linear-gradient(to bottom,var(--border-mid),transparent); }
.step-num   { width:40px; height:40px; border-radius:50%; background:var(--brand); color:white; font-family:'Archivo',sans-serif; font-weight:800; font-size:var(--text-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-body  { padding-top:8px; }
.step-title { font-family:'Archivo',sans-serif; font-weight:700; font-size:var(--text-base); color:var(--text-primary); margin-bottom:var(--sp-2); }
.step-desc  { font-size:var(--text-sm); color:var(--text-secondary); max-width:42ch; line-height:1.65; }
.demo-panel { background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:20px; padding:var(--sp-5); box-shadow:0 8px 32px oklch(18% .015 264/.06); }
.demo-panel-label { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:var(--sp-4); }
.demo-dropzone { border:1.5px dashed var(--border-mid); border-radius:12px; padding:var(--sp-6) var(--sp-4); text-align:center; margin-bottom:var(--sp-4); background:var(--surface-1); }
.demo-dropzone-icon { width:36px; height:36px; margin:0 auto var(--sp-3); background:var(--surface-2); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.demo-dropzone p { font-family:'Archivo',sans-serif; font-size:var(--text-sm); font-weight:600; color:var(--text-secondary); }
.demo-dropzone small { font-size:var(--text-xs); color:var(--text-tertiary); }
.demo-tabs { display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.demo-tab { flex:1; padding:8px; border-radius:8px; font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; text-align:center; }
.demo-tab.active       { background:var(--brand); color:white; }
.demo-tab:not(.active) { background:var(--surface-2); color:var(--text-secondary); }
.demo-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border-radius:8px; overflow:hidden; margin-bottom:var(--sp-4); }
.demo-mini-cell { aspect-ratio:3/4; }
.demo-mini-cell:nth-child(1) { background:oklch(82% .12 264); }
.demo-mini-cell:nth-child(2) { background:oklch(65% .16 264); }
.demo-mini-cell:nth-child(3) { background:oklch(47% .18 264); }

/* FEATURES GRID */
.features-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:20px; overflow:hidden; margin-top:var(--sp-7); }
@media(min-width:640px){ .features-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .features-grid { grid-template-columns:repeat(3,1fr); } }
.feature-item { background:var(--surface-0); padding:var(--sp-6); transition:background .2s; }
.feature-item:hover { background:var(--brand-xlight); }
.feature-number { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; color:var(--brand); margin-bottom:var(--sp-4); letter-spacing:.04em; }
.feature-title  { font-family:'Archivo',sans-serif; font-weight:700; font-size:var(--text-base); color:var(--text-primary); margin-bottom:var(--sp-3); line-height:1.3; }
.feature-desc   { font-size:var(--text-sm); color:var(--text-secondary); line-height:1.65; max-width:38ch; }

/* BLOG LIST */
.blog-list { margin-top:var(--sp-7); border-top:1px solid var(--border-subtle); }
.blog-item { display:grid; grid-template-columns:1fr; gap:var(--sp-2); padding:var(--sp-5) 0; border-bottom:1px solid var(--border-subtle); }
@media(min-width:640px){ .blog-item { grid-template-columns:100px 1fr auto; align-items:baseline; gap:var(--sp-6); } }
.blog-item:hover .blog-title { color:var(--brand); }
.blog-category { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); }
.blog-title { font-family:'Archivo',sans-serif; font-weight:600; font-size:var(--text-base); color:var(--text-primary); transition:color .15s; line-height:1.4; }
.blog-arrow { color:var(--text-tertiary); font-family:'Archivo',sans-serif; font-size:var(--text-sm); transition:color .15s,transform .15s; white-space:nowrap; }
.blog-item:hover .blog-arrow { color:var(--brand); transform:translateX(3px); }

/* CTA STRIP */
.cta-strip { background:var(--brand); border-radius:20px; padding:var(--sp-7); display:flex; flex-direction:column; gap:var(--sp-5); align-items:flex-start; }
@media(min-width:640px){ .cta-strip { flex-direction:row; align-items:center; justify-content:space-between; } }
.cta-strip h2 { font-size:var(--text-2xl); color:white; max-width:22ch; }
.cta-strip p  { color:oklch(87% .06 264); font-size:var(--text-sm); font-weight:300; max-width:38ch; margin-top:var(--sp-2); }
.btn-cta-inverse { background:white; color:var(--brand); font-family:'Archivo',sans-serif; font-weight:800; font-size:var(--text-sm); padding:12px var(--sp-6); border-radius:10px; white-space:nowrap; display:inline-flex; align-items:center; gap:var(--sp-2); transition:opacity .15s,transform .15s; flex-shrink:0; }
.btn-cta-inverse:hover { opacity:.9; transform:translateY(-1px); }


/* ==========================================================================
   GRIDCUTTER.HTML — PAGE-SPECIFIC STYLES
   ========================================================================== */

/* TOOL LAYOUT */
.tool-wrap { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); padding-block:var(--sp-5); align-items:start; }
@media(min-width:768px) {
  .tool-wrap {
    grid-template-columns:minmax(260px,320px) minmax(0,1fr);
    gap:var(--sp-5);
    padding-block:var(--sp-6);
  }
}
@media(min-width:1100px){
  .tool-wrap {
    grid-template-columns:320px minmax(0,1fr);
    gap:var(--sp-6);
  }
}

/* SIDEBAR */
.sidebar { display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
@media(min-width:768px){ .sidebar { position:sticky; top:80px; } }
.panel { background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:16px; padding:var(--sp-5); }
.panel-title { font-family:'Archivo',sans-serif; font-weight:800; font-size:var(--text-base); letter-spacing:-.02em; color:var(--text-primary); margin-bottom:var(--sp-4); display:flex; align-items:center; gap:var(--sp-2); }
.panel-title svg { color:var(--brand); flex-shrink:0; }

/* UPLOAD ZONE */
.upload-zone { border:1.5px dashed var(--border-mid); border-radius:12px; padding:var(--sp-6) var(--sp-4); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--sp-3); cursor:pointer; transition:border-color .2s,background .2s; background:var(--surface-1); min-height:140px; }
.upload-zone:hover,
.upload-zone.drag-over { border-color:var(--brand); background:var(--brand-xlight); }
.upload-zone.drag-over { border-style:solid; }
.upload-icon { width:40px; height:40px; background:var(--surface-2); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.upload-zone p     { font-family:'Archivo',sans-serif; font-weight:600; font-size:var(--text-sm); color:var(--text-secondary); }
.upload-zone small { font-size:var(--text-xs); color:var(--text-tertiary); }
.upload-zone input { display:none; }
.file-info { display:none; margin-top:var(--sp-3); padding:var(--sp-3); background:var(--green-surface); border-radius:10px; align-items:center; gap:var(--sp-2); }
.file-info.show { display:flex; }

/* GRID PICKER */
.grid-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
.grid-option { border:1.5px solid var(--border-subtle); border-radius:10px; padding:var(--sp-3) var(--sp-2); display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); cursor:pointer; transition:border-color .15s,background .15s; background:var(--surface-1); }
.grid-option:hover,
.grid-option.active { border-color:var(--brand); background:var(--brand-xlight); }
.grid-option-preview { display:grid; gap:2px; border-radius:4px; overflow:hidden; width:48px; }
.gc { border-radius:1px; background:var(--surface-3); aspect-ratio:3/4; }
.gc.on       { background:var(--brand); }
.gc.on-med   { background:oklch(65% .16 264); }
.gc.on-light { background:oklch(78% .12 264); }
.grid-option-label { font-family:'Archivo',sans-serif; font-weight:700; font-size:var(--text-xs); color:var(--text-secondary); letter-spacing:-.01em; }
.grid-option.active .grid-option-label { color:var(--brand); }
.grid-option-count { font-family:'Archivo',sans-serif; font-size:10px; font-weight:600; color:var(--text-tertiary); }
.grid-option.active .grid-option-count { color:oklch(60% .16 264); }

/* FORMAT PILLS */
.format-pills { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.pill { font-family:'Archivo',sans-serif; font-size:var(--text-xs); font-weight:700; padding:6px var(--sp-3); border-radius:100px; border:1.5px solid var(--border-mid); color:var(--text-secondary); cursor:pointer; transition:all .15s; background:transparent; }
.pill:hover  { border-color:var(--brand); color:var(--brand); }
.pill.active { background:var(--brand); border-color:var(--brand); color:white; }

/* STATS ROW */
.stat-row  { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
.stat-item { background:var(--surface-1); border-radius:10px; padding:var(--sp-3); }
.stat-label { font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:4px; }
.stat-value { font-family:'Archivo',sans-serif; font-weight:800; font-size:var(--text-sm); color:var(--text-primary); letter-spacing:-.02em; }

/* CANVAS AREA */
.canvas-area { display:flex; flex-direction:column; gap:var(--sp-5); min-width:0; }
.canvas-header { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.canvas-title  { font-family:'Archivo',sans-serif; font-weight:800; font-size:var(--text-xl); letter-spacing:-.03em; color:var(--text-primary); }
.canvas-sub    { font-family:'Archivo',sans-serif; font-size:var(--text-xs); color:var(--text-tertiary); margin-top:2px; }
.canvas-stage  { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:20px; padding:var(--sp-4); display:flex; align-items:center; justify-content:center; min-height:320px; position:relative; overflow:hidden; }
@media(min-width:640px){
  .canvas-stage { padding:var(--sp-5); min-height:380px; }
}
@media(min-width:960px){
  .canvas-stage { padding:var(--sp-6); min-height:420px; }
}
.canvas-empty  { display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); text-align:center; }
.canvas-empty-icon { width:64px; height:64px; background:var(--surface-2); border-radius:16px; display:flex; align-items:center; justify-content:center; }
.canvas-empty h3 { font-family:'Archivo',sans-serif; font-weight:700; font-size:var(--text-lg); color:var(--text-primary); }
.canvas-empty p  { font-size:var(--text-sm); color:var(--text-secondary); max-width:32ch; }

/* PREVIEW GRID */
.preview-wrap { display:none; margin:auto; flex:0 0 auto; }
.preview-grid { display:grid; gap:3px; border-radius:12px; overflow:hidden; box-shadow:0 8px 40px oklch(18% .015 264/.15); }
.preview-cell { aspect-ratio:3/4; overflow:hidden; position:relative; }
.preview-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.cell-badge { position:absolute; top:var(--sp-2); left:var(--sp-2); background:oklch(10% .01 264/.6); color:white; font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; padding:3px 7px; border-radius:100px; backdrop-filter:blur(4px); }

/* AD SLOTS */
.ad-slot       { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); }
.ad-slot-label { font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); }
.ad-slot-728   { width:100%; max-width:728px; height:90px; margin-inline:auto; }
.ad-slot-300   { width:100%; height:250px; }

/* DOWNLOAD PANEL */
.download-panel { background:var(--brand-xlight); border:1.5px solid oklch(85% .06 264); border-radius:16px; padding:var(--sp-5); flex-direction:column; gap:var(--sp-4); display:none; }
.download-grid  { display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media(min-width:640px){ .download-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:960px){ .download-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.download-thumb { background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:10px; overflow:hidden; cursor:pointer; transition:box-shadow .15s,transform .15s; }
.download-thumb:hover { transform:translateY(-2px); box-shadow:0 6px 20px oklch(47% .18 264/.2); }
.download-thumb-img  { aspect-ratio:3/4; background:var(--surface-2); overflow:hidden; }
.download-thumb-img img { width:100%; height:100%; object-fit:cover; }
.download-thumb-foot { padding:var(--sp-2); display:flex; align-items:center; justify-content:space-between; }
.download-thumb-num  { font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; color:var(--text-tertiary); }

/* POSTING NOTE */
.posting-note { background:var(--surface-0); border-radius:10px; padding:var(--sp-3) var(--sp-4); display:flex; align-items:flex-start; gap:var(--sp-3); border:1px solid var(--border-subtle); }
.posting-note svg { flex-shrink:0; margin-top:2px; color:var(--brand); }
.posting-note p { font-size:var(--text-xs); color:var(--text-secondary); line-height:1.6; }
.posting-note strong { font-family:'Archivo',sans-serif; font-weight:700; color:var(--text-primary); }

@media(max-width:767px){
  .tool-wrap { gap:var(--sp-4); }
  .tool-wrap > .sidebar,
  .tool-wrap > .canvas-area {
    display:contents;
  }
  .tool-panel { order:10; }
  .tool-panel-upload { order:1; }
  .tool-panel-preview-head { order:2; }
  .tool-panel-preview-stage { order:3; }
  .tool-panel-error { order:4; }
  .tool-panel-ratio { order:5; }
  .tool-panel-grid { order:6; }
  .tool-panel-format { order:7; }
  .tool-panel-summary { order:8; }
  .tool-panel-downloads { order:9; }
  .tool-panel-info { order:10; }
  .tool-panel-advanced { order:11; }
  .canvas-area { gap:var(--sp-4); }
  .canvas-header { margin-bottom:calc(var(--sp-4) * -1); }
  .panel { padding:var(--sp-4); }
  .download-panel { padding:var(--sp-4); }
  .download-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    max-width:400px;
    margin-inline:auto;
    gap:10px;
  }
  .download-thumb-img {
    aspect-ratio:3/4;
  }
  .download-thumb-foot {
    padding:8px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .download-thumb-foot .btn {
    width:100%;
    justify-content:center;
    padding:7px 8px;
  }
  .download-thumb-num {
    text-align:center;
  }
  .posting-note { padding:var(--sp-3); }
  .ad-slot-300 { display:none; }

  /* banner buttons */
    #cookieBanner .cookie-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    #cookieBanner .cookie-bottom-bar p {
        width: 100%;
    }
    #cookieBanner .cookie-bottom-bar .cookie-buttons {
        width: 100%;
    }
}