/* Adify — dark production theme, matching the user's concept sheets.
   Dark navy, slate cards, vivid purple primary. No light-theme tokens remain.
   Plain CSS, no build step. Edit the :root tokens to restyle everywhere.

   MODERN CSS3 SYSTEM (mobile, <1024px — desktop >=1024px is untouched below):
   Custom Properties, Grid/Flexbox, container queries, clamp(), dvh/svh,
   aspect-ratio, min()/max(), backdrop-filter glass, layered gradients,
   gradient borders, colour-mix() (with fallbacks), :has()/:is()/:where(),
   :focus-visible, scroll-snap, touch-action, transform/opacity-only motion,
   text-wrap: balance/pretty, line-clamp. Every modern feature below has a
   solid fallback directly above it, so older browsers still get a clean app. */
:root{
  --bg:#0A0E1C; --bg2:#0E1426; --card:#131A2E; --card2:#1A2338; --card3:#1E2942;
  --border:#232E4A; --border2:#2E3B5C;
  --text:#F1F5F9; --muted:#94A3B8; --muted2:#64748B;
  --purple:#8B5CF6; --purple2:#7C3AED; --purple-soft:rgba(139,92,246,.16);
  --green:#22C55E; --amber:#F59E0B; --red:#EF4444; --blue:#38BDF8;
  --radius:18px; --radius-sm:12px; --shadow:0 8px 24px rgba(0,0,0,.35);
  /* Modern design-system tokens (mobile app shell; harmless on desktop). */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --radius-lg:20px; --radius-xl:24px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 8px 24px rgba(0,0,0,.38);
  --shadow-glow:0 10px 28px rgba(139,92,246,.45);
  --glass:rgba(12,18,34,.72);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration:180ms;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scrollbar-color:#2E3B5C #0A0E1C;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1,"liga" 1}
a{color:#C4B5FD}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;width:100%;background:#0F172A;color:var(--text);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.25)}
label{font-weight:600;font-size:13px;display:block;margin:14px 0 6px;color:#E2E8F0}
::placeholder{color:var(--muted2)}

/* ---------- Shell (desktop — UNCHANGED) ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex-shrink:0;background:#0C1222;border-right:1px solid var(--border);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.02em;margin:2px 8px 18px}
.logo-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--purple),var(--purple2));display:grid;place-items:center;font-size:17px}
.sidebar h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:20px 8px 8px}
.navlink{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;color:#CBD5E1;text-decoration:none;font-size:14px;font-weight:500}
.navlink .ic{width:20px;text-align:center;opacity:.85}
.navlink.active,.navlink:hover{background:var(--purple-soft);color:#fff}
.navlink.active{box-shadow:inset 2px 0 0 var(--purple)}
.main{flex:1;min-width:0;padding:22px 24px 40px;max-width:1440px;margin:0 auto;width:100%}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.topbar h1{margin:0;font-size:22px;letter-spacing:-.01em}
.crumb{color:var(--muted);font-size:13px;margin:0 0 2px}
.pill{margin-left:auto;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;white-space:nowrap}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#F59E0B,#EC4899);display:grid;place-items:center;font-weight:800;font-size:14px}
.hamburger{display:none}

/* ---------- Cards, grids, buttons (desktop — UNCHANGED) ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h2{margin:0 0 6px;font-size:17px}
.card h3{margin:0 0 6px;font-size:15px}
.card p{margin:6px 0}
.muted{color:var(--muted);font-size:14px}
.small{font-size:12px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.btn{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;border:0;border-radius:12px;padding:12px 18px;min-height:44px;font-weight:700}
.btn:hover{filter:brightness(1.1)}
.btn-outline{background:transparent;color:#E2E8F0;border:1px solid var(--border2);border-radius:12px;padding:12px 18px;min-height:44px;font-weight:600}
.btn-ghost{background:transparent;color:#C4B5FD;border:0;padding:10px 12px;min-height:44px;font-weight:600}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.badge{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.badge.green{background:rgba(34,197,94,.15);color:#4ADE80}
.badge.amber{background:rgba(245,158,11,.15);color:#FBBF24}
.badge.red{background:rgba(239,68,68,.15);color:#FCA5A5}
.badge.purple{background:var(--purple-soft);color:#C4B5FD}
.badge.gray{background:rgba(148,163,184,.15);color:#CBD5E1}
.stat{font-size:26px;font-weight:800;line-height:1.1}
.stat-label{font-size:13px;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.thumb{border-radius:14px;aspect-ratio:4/3;background:linear-gradient(135deg,#1E293B,#312E81 55%,#581C87);border:1px solid var(--border);display:grid;place-items:center;position:relative;overflow:hidden}
.thumb span{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);border:1px solid var(--border);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700}
.thumb .prod{font-size:13px;color:#E2E8F0;text-align:center;padding:0 16px}
.thumb.tall{aspect-ratio:3/4}
.bar{height:8px;background:#1E293B;border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px}
.bar .g{background:var(--green)} .bar .p{background:var(--purple)} .bar .a{background:var(--amber)} .bar .r{background:var(--red)}
.row{display:flex;align-items:center;gap:12px}
.row .grow{flex:1;min-width:0}
.divider{height:1px;background:var(--border);margin:14px 0}
.empty{text-align:center;padding:28px 12px;color:var(--muted)}
.empty h3{color:var(--text)}
.skeleton{height:15px;background:#1E293B;border-radius:8px;margin:10px 0;animation:pulse 1.2s infinite alternate}
@keyframes pulse{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
.notice{background:#1E293B;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:14px}
.notice.err{border-color:#7F1D1D;color:#FECACA}
.notice.ok{border-color:#14532D;color:#BBF7D0}
.switch{position:relative;width:46px;height:26px;appearance:none;background:#334155;border-radius:99px;cursor:pointer;padding:0}
.switch:checked{background:var(--purple)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.switch:checked::after{left:23px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tab{background:var(--card2);border:1px solid var(--border);color:#CBD5E1;border-radius:999px;padding:9px 14px;font-weight:600;min-height:40px}
.tab.on{background:var(--purple);border-color:var(--purple);color:#fff}
.sticky-action{position:sticky;bottom:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ==========================================================================
   MOBILE APP SHELL — modern CSS3 only, <1024px.
   Desktop >=1024px is untouched: every rule in this block is inside the
   media query, and the mobile-only sections stay display:none on desktop.
   ========================================================================== */
.mobile-top{display:none}
.bottomnav{display:none}
.quick-actions,.example-carousel{display:none}

@media (max-width:1023px){
  /* --- App shell: grid areas, dvh, safe areas, no horizontal overflow --- */
  html,body{overflow-x:hidden;overscroll-behavior-y:contain}
  body{background:var(--bg);-webkit-tap-highlight-color:transparent}
  .shell{
    display:grid;
    grid-template-areas:"app";
    grid-template-columns:minmax(0,1fr);
    min-height:100vh;min-height:100svh;min-height:100dvh;
  }
  .main{
    grid-area:app;min-width:0;
    container-type:inline-size; /* enables the @container rules below */
    padding:var(--space-4) var(--space-4) calc(140px + env(safe-area-inset-bottom));
    max-width:100%;
  }
  .sidebar{display:none}
  .sidebar.open{display:block;position:fixed;inset:0 auto 0 0;z-index:60;width:min(280px,84vw);box-shadow:24px 0 48px rgba(0,0,0,.55)}
  .hamburger{display:inline-flex;min-width:44px;min-height:44px;padding:0 10px;align-items:center;justify-content:center}

  /* --- Sticky glass app header (solid fallback, then blur + saturate) --- */
  .topbar{display:none}
  .mobile-top{
    display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:40;
    margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
    padding:calc(10px + env(safe-area-inset-top)) var(--space-4) 10px;
    background:var(--glass);
    background:color-mix(in oklab, #0A0E1C 78%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    backdrop-filter:blur(20px) saturate(1.6);
    border-bottom:1px solid var(--border);
  }
  .mobile-top .logo{font-size:17px}
  .mobile-top .logo-mark{width:30px;height:30px;font-size:15px}
  .mobile-top .pill{padding:7px 11px;font-size:12px}
  .mobile-top .avatar{width:32px;height:32px;font-size:13px;flex-shrink:0}

  /* --- Fluid type, balanced headings, pretty body (mobile only) --- */
  .card h2{font-size:clamp(17px,4.6vw,20px);text-wrap:balance;letter-spacing:-.01em}
  .card h3{font-size:clamp(14px,3.8vw,16px);text-wrap:balance}
  .card p,.muted{text-wrap:pretty}
  .hero .card:first-child h2{font-size:clamp(24px,7vw,30px) !important;line-height:1.12}

  /* --- Cards: layered shadows, gradient border on the hero, lift on focus --- */
  .card{
    padding:var(--space-4);margin-bottom:var(--space-3);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-1),var(--shadow-2);
    transition:transform var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out);
  }
  .card:has(:focus-visible){transform:translateY(-2px);box-shadow:var(--shadow-2),var(--shadow-glow)}
  /* :where() keeps this zero-specificity, so page rules can override it freely. */
  :where(.stat-chips .card,.grid .card,.car-card){min-width:0;overflow-wrap:anywhere}
  .hero-card{
    position:relative;overflow:hidden;isolation:isolate;
    border:1px solid transparent; /* gradient-border fallback: plain border above */
    background:
      linear-gradient(var(--card),var(--card)) padding-box,
      linear-gradient(135deg,var(--purple),var(--blue),var(--purple2)) border-box;
  }
  .hero-card::before{ /* layered radial glow, behind content */
    content:"";position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(120% 90% at 85% 0%,rgba(139,92,246,.38),transparent 55%),
      radial-gradient(90% 70% at 0% 100%,rgba(56,189,248,.20),transparent 60%);
  }
  .hero-title{
    background:linear-gradient(180deg,#FFFFFF 30%,#DDD6FE 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero .thumb{aspect-ratio:16/10}

  /* --- Buttons / inputs: app sizes, gradient primaries, press physics --- */
  :is(.btn,.btn-outline,.btn-ghost){
    min-height:48px;padding:12px 16px;border-radius:13px;
    touch-action:manipulation;
    transition:transform var(--duration) var(--ease-spring),filter var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out);
  }
  .btn{box-shadow:0 6px 18px rgba(124,58,237,.38)}
  :is(.btn,.btn-outline,.btn-ghost,.tab,.chip,.bottomnav a):active{transform:scale(.97)}
  input,textarea,select{min-height:48px;font-size:16px;padding:12px 14px}
  input[type="file"]{padding:10px 12px}
  label{margin:12px 0 6px}
  .chip{min-height:40px;padding:8px 13px}
  .tab{min-height:40px;padding:9px 12px;font-size:13px}

  /* --- Segmented tabs: one pill control, gradient active, wraps --- */
  .tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:4px}
  .tabs .tab{flex:1 1 auto;background:transparent;border:0;text-align:center;white-space:nowrap}
  .tabs .tab.on{background:linear-gradient(135deg,var(--purple),var(--purple2));box-shadow:var(--shadow-glow)}
  .tabs .chip{flex:1 1 auto;justify-content:center}
  /* Soft colour-mix badge tints (fallbacks are the rgba rules in the base section). */
  .badge.green{background:color-mix(in oklab,var(--green) 16%,transparent)}
  .badge.amber{background:color-mix(in oklab,var(--amber) 16%,transparent)}
  .badge.red{background:color-mix(in oklab,var(--red) 16%,transparent)}
  .badge.purple{background:color-mix(in oklab,var(--purple) 18%,transparent)}

  /* --- Home: glass stat row, gradient icon tiles, snap carousel --- */
  .stat-chips{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);
    background:var(--glass);
    background:color-mix(in oklab,#131A2E 82%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-2);margin-bottom:var(--space-3);
  }
  .stat-chips .card{padding:12px 10px;margin-bottom:0;text-align:center;background:transparent;border:0;box-shadow:none}
  .stat-chips .stat{font-size:clamp(18px,5.4vw,22px)}
  .stat-chips .stat-label{font-size:11px}
  .quick-actions{display:block}
  .qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
  .qa-tile{
    background:var(--card2);border:1px solid var(--border);border-radius:14px;
    padding:12px 6px 10px;min-height:76px;color:var(--text);font-weight:700;
    font-size:12px;line-height:1.25;touch-action:manipulation;
    transition:transform var(--duration) var(--ease-spring),background var(--duration) var(--ease-out);
  }
  .qa-tile .qa-ic{
    display:grid;place-items:center;width:40px;height:40px;margin:0 auto 6px;border-radius:12px;
    background:linear-gradient(135deg,var(--purple),var(--purple2));
    box-shadow:0 6px 16px rgba(124,58,237,.40);font-size:19px;
  }
  .qa-tile:active{background:var(--purple-soft);transform:scale(.97)}
  .example-carousel{display:block}
  .carousel{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
    padding:2px 16px 12px;margin:0 -16px;scrollbar-width:none;
  }
  .carousel::-webkit-scrollbar{display:none}
  .car-card{
    flex:0 0 min(68vw,240px);scroll-snap-align:start;
    background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:10px;
    box-shadow:var(--shadow-2);
  }
  .car-card .thumb{aspect-ratio:4/3}
  .car-card p{margin:8px 0 0}
  .car-card p,.car-card .prod{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* Layered gradient Example visuals (labelled Example in the markup). */
  .thumb{
    background:
      radial-gradient(80% 90% at 80% 10%,rgba(139,92,246,.45),transparent 60%),
      radial-gradient(70% 80% at 10% 90%,rgba(56,189,248,.28),transparent 55%),
      linear-gradient(135deg,#1E293B,#312E81 55%,#581C87);
  }

  /* --- Grids: single column, no overflow --- */
  .grid,.grid2,.grid3{grid-template-columns:1fr !important;gap:12px;min-width:0}
  .grid .card,.grid2 .card,.grid3 .card{min-width:0;overflow-wrap:anywhere}
  .row{flex-wrap:wrap}
  .row .btn,.row .btn-outline{flex:1 1 auto}

  /* --- Sticky Create summary: above the nav, static on field focus --- */
  .sticky-action{
    bottom:calc(96px + env(safe-area-inset-bottom));padding:14px;
    background:var(--glass);
    background:color-mix(in oklab,#131A2E 88%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
  }
  .page:focus-within .sticky-action{position:static;margin-top:12px}

  /* --- Floating glass bottom nav (solid fallback, then blur + saturate) --- */
  .bottomnav{
    display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr 1fr;align-items:end;
    position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;
    background:var(--glass);
    background:color-mix(in oklab,#0C1222 82%,transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    backdrop-filter:blur(20px) saturate(1.6);
    border:1px solid var(--border);border-radius:var(--radius-xl);
    padding:6px 6px 6px;
    box-shadow:var(--shadow-2),0 0 0 1px rgba(255,255,255,.04) inset;
    user-select:none;-webkit-user-select:none;touch-action:manipulation;
  }
  .bottomnav a{
    text-align:center;text-decoration:none;color:var(--muted);font-size:11px;font-weight:700;
    padding:6px 2px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;line-height:1.1;
  }
  .bottomnav a.active{color:#fff}
  .bottomnav a.active:not(:has(.plus)){color:#C4B5FD}
  .bottomnav .plus{
    width:48px;height:48px;margin:-26px auto 2px;border-radius:50%;
    background:linear-gradient(135deg,var(--purple),var(--purple2));
    color:#fff;display:grid;place-items:center;font-size:24px;
    box-shadow:var(--shadow-glow),0 0 0 2px #0C1222;
    border:2px solid #0C1222;
  }
  .bottomnav a:has(.plus){color:#fff}

  /* --- Shimmer skeleton (transform/opacity-friendly gradient animation) --- */
  .skeleton{
    background:linear-gradient(100deg,#1E293B 30%,#2B3A5E 50%,#1E293B 70%);
    background-size:200% 100%;animation:shimmer 1.6s var(--ease-out) infinite;
  }
  @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
}

/* --- Container queries (mobile only in practice: .main is a container
       only inside the mobile media query above; desktop .main is not) --- */
@container (min-width:380px){
  .qa-grid{grid-template-columns:repeat(3,1fr)}
  .stat-chips{grid-template-columns:repeat(3,1fr)}
}
@container (max-width:359px){
  .qa-grid{grid-template-columns:repeat(3,1fr)}
  .qa-tile{font-size:11px}
}

/* --- Reduced motion: kill all of it, including the shimmer --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .skeleton{animation:none}
}