/* ============================================================
   THE SHOP — "Matrix" theme
   Phosphor green on black, terminal type, digital-rain backdrop.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=Oswald:wght@600;700&display=swap');

:root{
  /* surfaces */
  --bg:#000600;
  --bg-elev:#03110a;
  --card:rgba(var(--accent-rgb),.045);
  --card-hi:rgba(var(--accent-rgb),.10);
  --card-solid:rgba(7,18,11,.5);
  --line:rgba(var(--accent-rgb),.16);
  --line-hi:rgba(var(--accent-rgb),.42);

  /* text */
  --text:#b8ffc6;
  --muted:#5fae74;
  --faint:#3c6e4a;

  /* matrix green — the ONLY accent */
  --accent-rgb:0,255,65;   /* drives every translucent accent; themed below */
  --grn:#00ff41;
  --grn-mid:#00c42f;
  --grn-deep:#008f11;
  --grn-pale:#caffd6;
  --on-grn:#001b06;     /* text on a green fill */
  --amber:#ffb000;      /* "ok" quality / mechanic warm tone */
  --red:#ff4d4d;        /* redo / destructive */
  --body:#00ff41;       /* bodywork role */
  --mech:#ffb000;       /* mechanic role */
  /* iOS17 mesh-gradient blobs — tonal greens */
  --m1:rgba(0,255,65,.32);
  --m2:rgba(0,235,140,.24);
  --m3:rgba(30,255,170,.20);
  --m4:rgba(0,150,70,.30);

  --grad:linear-gradient(135deg,#39ff7a,#00ff41 50%,#00b82a);
  --grad-soft:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.12));

  --r-xl:22px; --r-lg:18px; --r:13px; --r-sm:10px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.8);
  --glow:0 0 26px -4px rgba(var(--accent-rgb),.5);
  --ease:cubic-bezier(.22,.8,.18,1);
  --spring:cubic-bezier(.34,1.56,.4,1);
  --mono:"Share Tech Mono",ui-monospace,"Courier New",monospace;
  --disp:"VT323","Share Tech Mono",monospace;
  --navh:66px;
}

/* ===== PLATINUM theme — black & red, same font/everything ===== */
[data-theme="platinum"]{
  --bg:#0a0203;
  --bg-elev:#160506;
  --card-solid:rgba(22,6,8,.5);
  /* white writing on red — keep the red surfaces/borders, just lighten text */
  --text:#ffffff;
  --muted:#e4dadb;
  --faint:#9c8b8d;

  --accent-rgb:255,77,89;
  --grn:#ff4d59;
  --grn-mid:#ff2f3d;
  --grn-deep:#d11f2b;
  --grn-pale:#ffffff;
  --on-grn:#2a0005;
  --body:#ff4d59;
  /* mesh blobs — tonal reds */
  --m1:rgba(255,77,89,.32);
  --m2:rgba(255,60,110,.24);
  --m3:rgba(210,30,60,.26);
  --m4:rgba(150,24,44,.30);

  --grad:linear-gradient(135deg,#ff8088,#ff4d59 50%,#ff2533);
}
/* platinum: keep red surfaces/borders/glows, but push the rest of the writing + icons to white
   (they keep their red text-shadow, so white text glows red) */
[data-theme="platinum"] .section-title,
[data-theme="platinum"] .stat-value,
[data-theme="platinum"] .a-stat .v,
[data-theme="platinum"] .a-row .rv,
[data-theme="platinum"] .a-col .cv,
[data-theme="platinum"] .a-col.today .cl,
[data-theme="platinum"] .p-time,
[data-theme="platinum"] .p-row a,
[data-theme="platinum"] .p-chev,
[data-theme="platinum"] .filter-label,
[data-theme="platinum"] .role,
[data-theme="platinum"] .t-cam,
[data-theme="platinum"] .searchbar-ic,
[data-theme="platinum"] .navbtn.active,
[data-theme="platinum"] .tile .tile-plate,
[data-theme="platinum"] .tile .tile-multi,
[data-theme="platinum"] .lb-counter,
[data-theme="platinum"] .lb-frame-hint,
[data-theme="platinum"] .theme-tick,
[data-theme="platinum"] .s-mark,
[data-theme="platinum"] .s-word{ color:#fff }

/* ===== GLASS theme — iOS clear glass: light, frosted, system font, blue accent ===== */
[data-theme="glass"]{
  --bg:#e8edf5;
  --bg-elev:#f3f6fb;
  --card:rgba(255,255,255,.5);
  --card-hi:rgba(255,255,255,.72);
  --card-solid:rgba(255,255,255,.62);
  --line:rgba(0,0,0,.1);
  --line-hi:rgba(10,132,255,.45);

  --text:#0b1424;
  --muted:#6c7686;
  --faint:#a7afbd;

  --accent-rgb:10,132,255;        /* iOS blue */
  --grn:#0a84ff;
  --grn-mid:#0a84ff;
  --grn-deep:#0060df;
  --grn-pale:#0a2540;             /* dark headings on light bg */
  --on-grn:#ffffff;
  --body:#0a84ff;
  --amber:#ff9f0a;
  --red:#ff3b30;
  /* mesh blobs — iOS light: blue / cyan / lilac */
  --m1:rgba(10,132,255,.26);
  --m2:rgba(90,200,250,.22);
  --m3:rgba(175,82,222,.18);
  --m4:rgba(48,176,255,.22);

  --grad:linear-gradient(135deg,#4fabff,#0a84ff 55%,#0060df);
  --shadow:0 18px 50px -16px rgba(20,40,80,.35);
  --glow:0 6px 22px -6px rgba(10,132,255,.5);

  --mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
}
/* light frosted surfaces (override the hardcoded dark ones) */
[data-theme="glass"] body{ background:
  radial-gradient(60vw 50vh at 12% -8%, rgba(10,132,255,.20), transparent 60%),
  radial-gradient(55vw 45vh at 100% 0%, rgba(175,82,222,.16), transparent 60%),
  radial-gradient(60vw 55vh at 80% 100%, rgba(255,159,10,.12), transparent 60%),
  var(--bg); }
[data-theme="glass"] .bg-grain{ display:none }
[data-theme="glass"] .topbar{ background:rgba(255,255,255,.55); border-bottom-color:rgba(0,0,0,.08) }
[data-theme="glass"] .profile-bottombar{ background:linear-gradient(0deg,rgba(255,255,255,.82),rgba(255,255,255,.45)); border-top-color:rgba(0,0,0,.08) }
[data-theme="glass"] .pt-menubtn{ background:none; color:var(--grn) }
[data-theme="glass"] .bottomnav{ background:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.62)); border-top-color:rgba(0,0,0,.08) }
[data-theme="glass"] .sheet{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(245,248,252,.8)); border-color:rgba(0,0,0,.1) }
[data-theme="glass"] .confirm-box{ background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,247,251,.92)) }
[data-theme="glass"] .tile{ background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.32)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
[data-theme="glass"] .p-avatar{ background:linear-gradient(135deg,#dfe7f2,#eef3fa) }
[data-theme="glass"] .btn-addtask{ background:rgba(255,255,255,.6); border-color:rgba(0,0,0,.12); color:var(--grn); text-shadow:none }
[data-theme="glass"] .gear-btn{ background:rgba(255,255,255,.6); color:var(--grn) }
[data-theme="glass"] #splash .s-word::before,[data-theme="glass"] #splash .s-word::after{ content:none }
[data-theme="glass"] .section-title{ text-shadow:none }
[data-theme="glass"] .tk-word{ text-shadow:0 2px 14px rgba(10,132,255,.25) }
[data-theme="glass"] ::selection{ background:rgba(10,132,255,.25); color:#0b1424 }

/* ===== DARK GLASS theme — iOS dark frosted glass: deep charcoal, vibrant blur, blue accent ===== */
[data-theme="darkglass"]{
  --bg:#070910;
  --bg-elev:#11141d;
  --card:rgba(255,255,255,.07);
  --card-hi:rgba(255,255,255,.13);
  --card-solid:rgba(28,32,44,.55);
  --line:rgba(255,255,255,.1);
  --line-hi:rgba(10,132,255,.5);

  --text:#f2f5fa;
  --muted:#99a2b2;
  --faint:#5a6373;

  --accent-rgb:10,132,255;        /* iOS blue */
  --grn:#0a84ff;
  --grn-mid:#409cff;
  --grn-deep:#0060df;
  --grn-pale:#eaf4ff;
  --on-grn:#ffffff;
  --body:#0a84ff;
  --amber:#ff9f0a;
  --red:#ff453a;
  /* mesh blobs — iOS dark: blue / indigo / teal / purple */
  --m1:rgba(10,132,255,.32);
  --m2:rgba(94,92,230,.26);
  --m3:rgba(48,209,200,.20);
  --m4:rgba(150,82,255,.24);

  --grad:linear-gradient(135deg,#5cb0ff,#0a84ff 55%,#0060df);
  --shadow:0 18px 50px -14px rgba(0,0,0,.72);
  --glow:0 6px 26px -6px rgba(10,132,255,.55);

  --mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
}
/* dark frosted surfaces (override the hardcoded matrix ones) */
[data-theme="darkglass"] body{ background:
  radial-gradient(60vw 50vh at 12% -8%, rgba(10,132,255,.24), transparent 60%),
  radial-gradient(55vw 45vh at 100% 0%, rgba(175,82,222,.20), transparent 60%),
  radial-gradient(60vw 55vh at 80% 100%, rgba(48,209,88,.12), transparent 62%),
  var(--bg); }
[data-theme="darkglass"] .bg-grain{ opacity:.35 }
[data-theme="darkglass"] .topbar{ background:rgba(17,20,29,.55); border-bottom-color:rgba(255,255,255,.08) }
[data-theme="darkglass"] .profile-bottombar{ background:linear-gradient(0deg,rgba(17,20,29,.86),rgba(17,20,29,.4)); border-top-color:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%) }
[data-theme="darkglass"] .pt-menubtn{ background:none; color:var(--grn) }
[data-theme="darkglass"] .bottomnav{ background:linear-gradient(0deg,rgba(12,15,22,.84),rgba(12,15,22,.6)); border-top-color:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(24px) saturate(170%); backdrop-filter:blur(24px) saturate(170%) }
[data-theme="darkglass"] .sheet{ background:linear-gradient(180deg,rgba(30,34,46,.86),rgba(18,21,30,.8)); border-color:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(30px) saturate(170%); backdrop-filter:blur(30px) saturate(170%) }
[data-theme="darkglass"] .confirm-box{ background:linear-gradient(180deg,rgba(32,36,48,.93),rgba(20,23,32,.93)); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px) }
[data-theme="darkglass"] .tile{ background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
[data-theme="darkglass"] .p-avatar{ background:linear-gradient(135deg,#1c2230,#262d3c) }
[data-theme="darkglass"] .btn-addtask{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:var(--grn); text-shadow:none }
[data-theme="darkglass"] .gear-btn{ background:rgba(255,255,255,.08); color:var(--grn) }
[data-theme="darkglass"] #splash .s-word::before,[data-theme="darkglass"] #splash .s-word::after{ content:none }
[data-theme="darkglass"] .section-title{ text-shadow:none }
[data-theme="darkglass"] .tk-word{ text-shadow:0 2px 18px rgba(10,132,255,.4) }
[data-theme="darkglass"] ::selection{ background:rgba(10,132,255,.32); color:#fff }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  min-height:100vh;
  padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 16px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-transform:uppercase; /* everything renders in caps, incl. typed text (data stays as-is) */
}
input,textarea,select,button{text-transform:uppercase}
.hidden{display:none !important}
img{display:block}
::selection{background:rgba(var(--accent-rgb),.32); color:#fff}

/* faint scanline + vignette backdrop */
.bg-grain{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,.6) 100%);
  opacity:.5}

/* iOS 17-style mesh-gradient wallpaper: soft tonal colour blobs that melt together under a
   heavy blur and drift slowly — two counter-rotating layers for organic, living depth.
   Blob colours (--m1..--m4) are themed per palette, so every theme gets its own mood. */
/* static mesh wallpaper — the scanline below provides the motion (cheaply) */
.bg-glow{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 48% at 22% 26%, var(--m1), transparent 66%),
    radial-gradient(44% 52% at 80% 20%, var(--m2), transparent 68%),
    radial-gradient(48% 54% at 28% 82%, var(--m3), transparent 70%),
    radial-gradient(46% 52% at 80% 78%, var(--m4), transparent 70%);
  filter:blur(40px) saturate(130%)}
/* glowing scanline sweeping up & down — it's an OVERLAY (in front of content), so it never triggers a
   backdrop-filter re-blur; the GPU just slides one translucent layer = extremely light */
.scanline{position:fixed; left:0; right:0; top:0; height:150px; z-index:65; pointer-events:none; opacity:.75;
  background:linear-gradient(to bottom, transparent, rgba(var(--accent-rgb),.05) 42%, rgba(var(--accent-rgb),.17) 50%, rgba(var(--accent-rgb),.05) 58%, transparent);
  animation:scan 6s ease-in-out infinite alternate}
@keyframes scan{ from{transform:translate3d(0,0,0)} to{transform:translate3d(0,calc(100vh - 150px),0)} }
@media (prefers-reduced-motion:reduce){ .scanline{animation:none; opacity:0} }

/* ============================================================ SPLASH */
#splash{position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px}
#splash .s-mark{font-size:60px; line-height:1; color:var(--grn); filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),.7));
  animation:markIn .8s var(--spring) both, flick 2.4s steps(1) infinite 1s}
@keyframes flick{0%,97%,100%{opacity:1} 98%{opacity:.5} 99%{opacity:.85}}
#splash .s-word{font-family:var(--disp); font-weight:400; letter-spacing:6px; font-size:30px; text-transform:uppercase; color:var(--grn); text-shadow:0 0 18px rgba(var(--accent-rgb),.6)}
#splash .s-word::before{content:"> "; color:var(--grn-deep)}
#splash .s-word::after{content:"_"; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#splash .s-bar{width:140px; height:3px; border-radius:3px; overflow:hidden; background:rgba(var(--accent-rgb),.14)}
#splash .s-bar > i{display:block; height:100%; width:40%; background:var(--grad); border-radius:3px; box-shadow:var(--glow); animation:load 1s var(--ease) infinite}
@keyframes markIn{from{opacity:0; transform:scale(.5) rotate(-25deg)} to{opacity:1; transform:none}}
@keyframes load{0%{transform:translateX(-130%)}100%{transform:translateX(380%)}}

/* ============================================================ HOME/SEARCH/STATS top padding (no top bar now) */
#homeView, #searchView, #statsView{padding-top:max(14px,calc(env(safe-area-inset-top) + 8px))}
/* settings gear — fixed top-right */
.gear-btn{position:fixed; top:max(10px,calc(env(safe-area-inset-top) + 4px)); right:12px; z-index:45;
  width:28px; height:28px; border-radius:9px; cursor:pointer; opacity:.45;
  background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.4); transition:.25s var(--spring)}
.gear-btn:hover{opacity:.85}
.gear-btn:active{transform:scale(.88) rotate(40deg); opacity:1}

/* theme picker (settings modal) */
.set-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:2px 0 12px}
/* long-pressing Home to open settings must not start a text selection on the popup */
#settingsOverlay, .bottomnav{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.theme-list{display:flex; flex-direction:column; gap:10px}
.theme-opt{display:flex; align-items:center; gap:14px; width:100%; cursor:pointer; font-family:var(--mono);
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; color:var(--text); transition:.2s var(--spring)}
.theme-opt:active{transform:scale(.98)}
.theme-opt.active{border-color:var(--line-hi); box-shadow:0 0 0 1px var(--line-hi), var(--glow)}
.theme-swatch{width:34px; height:34px; border-radius:9px; flex:0 0 auto; border:1px solid rgba(255,255,255,.18)}
.sw-matrix{background:linear-gradient(135deg,#000600 40%,#00ff41)}
.sw-platinum{background:linear-gradient(135deg,#0a0203 40%,#ff4d59)}
.sw-glass{background:linear-gradient(135deg,#eef3fb 40%,#0a84ff); border-color:rgba(0,0,0,.18)}
.sw-darkglass{background:linear-gradient(135deg,#11141d 38%,#0a84ff)}
.theme-name{flex:1; text-align:left; font-size:16px; text-transform:uppercase; letter-spacing:1px}
.theme-tick{opacity:0; color:var(--grn); font-size:18px; font-weight:700}
.theme-opt.active .theme-tick{opacity:1}
.brand h1::before{content:"> "; color:var(--grn-deep)}

/* ============================================================ VIEWS */
.view{max-width:1000px; margin:0 auto; animation:viewIn .45s var(--ease)}
@keyframes viewIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.section-title{font-size:13px; margin:20px 18px 12px; color:var(--grn); text-transform:uppercase; letter-spacing:2px; display:flex; align-items:center; justify-content:center; gap:14px; text-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
/* lines either side: brightest next to the text, fading toward the ends */
.section-title::before,.section-title::after{content:""; flex:1; height:1px}
.section-title::before{background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.55))}
.section-title::after{background:linear-gradient(90deg, rgba(var(--accent-rgb),.55), transparent)}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 18px 4px}
/* hackery right-leaning parallelograms: TL + BR deep-curved, TR + BL pointed */
.stat{position:relative; background:var(--card); border:1px solid var(--line-hi); border-radius:14px 0 14px 0; padding:8px 6px 7px; text-align:center; display:flex; flex-direction:column; gap:2px; overflow:hidden; transform:skewX(-8deg); transition:transform .25s var(--spring), border-color .25s, box-shadow .25s}
.stat > *{transform:skewX(8deg)} /* keep text upright */
.stat:hover{transform:skewX(-8deg) translateY(-3px); box-shadow:var(--glow)}
.stat-value{font-family:var(--disp); font-size:30px; font-weight:400; line-height:1; color:var(--grn); text-shadow:0 0 12px rgba(var(--accent-rgb),.4)}
.stat-label{font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}

/* ============================================================ IG GRID */
.ig-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:0 5px}
@media(min-width:640px){ .ig-grid{gap:8px; padding:0 8px} }

/* the 4th home stat IS the Add button — juicy embossed fill in the stat parallelogram shape,
   blank by design, with a satisfying press (skew preserved across states) */
.stat-add{cursor:pointer; -webkit-appearance:none; padding:0; -webkit-tap-highlight-color:transparent;
  border:1px solid var(--grn-deep);
  background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)), linear-gradient(to top, var(--grn-deep) 0%, var(--grn-mid) 100%);
  box-shadow:
    0 4px 3px 1px rgba(var(--accent-rgb),.20),
    0 7px 18px -2px rgba(0,0,0,.6),
    0 -3px 6px rgba(0,0,0,.35),
    0 -3px 5px rgba(var(--accent-rgb),.25),
    inset 0 1.5px 1px rgba(255,255,255,.55),
    inset 0 -3px 8px rgba(0,0,0,.3)}
.stat-add:hover{transform:skewX(-8deg) translateY(-3px); filter:brightness(1.06);
  box-shadow:
    0 4px 3px 1px rgba(var(--accent-rgb),.22),
    0 9px 20px -2px rgba(0,0,0,.62),
    0 -3px 6px rgba(0,0,0,.35),
    0 -3px 5px rgba(var(--accent-rgb),.28),
    inset 0 1.5px 1px rgba(255,255,255,.6),
    inset 0 -3px 8px rgba(0,0,0,.3)}
.stat-add:active{transform:skewX(-8deg) translateY(1px) scale(.97);
  box-shadow:
    0 2px 5px rgba(0,0,0,.5),
    inset 0 0 6px 2px rgba(0,0,0,.45),
    inset 0 0 26px rgba(0,0,0,.28)}
.stat-tap{cursor:pointer; -webkit-appearance:none; font:inherit}
.stat-tap:active{transform:skewX(-8deg) scale(.96)}

/* ===== All-tasks full-screen panel (opened from the Tasks stat) ===== */
.tasks-overlay{position:fixed; inset:0; z-index:80; background:var(--bg); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; animation:fadeIn .25s ease; padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.tasks-overlay.hidden{display:none}
.tasks-topbar{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; padding:11px 16px; padding-top:max(11px,calc(env(safe-area-inset-top) + 6px)); background:linear-gradient(180deg,var(--bg) 60%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.tasks-title{font-family:var(--disp); font-size:26px; font-weight:400; letter-spacing:1px; text-transform:uppercase; color:var(--grn-pale); margin:0}
.tasks-list{padding:6px 16px}
.at-car{display:flex; align-items:center; gap:8px; font-family:var(--disp); font-size:19px; letter-spacing:.5px; text-transform:uppercase; color:var(--grn-pale); margin:20px 0 9px; padding-bottom:7px; border-bottom:1px solid var(--line); cursor:pointer}
.at-car:first-child{margin-top:6px}
.at-car::before{content:"//"; color:var(--grn-deep); font-size:15px}
.at-task{display:flex; align-items:center; gap:12px; background:var(--card-solid); border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin-bottom:7px; cursor:pointer; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transition:transform .15s var(--spring)}
.at-task:active{transform:scale(.985)}
.at-task.mech{border-color:rgba(255,176,0,.42); box-shadow:inset 3px 0 0 var(--mech)}
.at-check{width:22px; height:22px; flex:0 0 auto; border-radius:7px; border:2px solid var(--line-hi); display:flex; align-items:center; justify-content:center; color:var(--grn); font-size:13px; font-weight:800}
.at-check.on{border-color:var(--grn); box-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
.at-task.mech .at-check{color:var(--mech)} .at-task.mech .at-check.on{border-color:var(--mech)}
.at-text{flex:1; font-size:14.5px; letter-spacing:.3px}
.at-task.done .at-text{color:var(--muted)}
.tile{position:relative; aspect-ratio:1/1; overflow:hidden; cursor:pointer; border-radius:8px;
  background:linear-gradient(135deg,rgba(7,19,11,.5),rgba(9,32,18,.5)); border:1px solid var(--line);
  opacity:0; transform:translateY(14px) scale(.98); animation:tileIn .5s var(--ease) forwards;
  box-shadow:0 3px 9px -3px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.13), inset 0 -10px 16px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--spring), box-shadow .3s, border-color .3s}
@media(min-width:640px){ .tile{border-radius:12px} }
@keyframes tileIn{to{opacity:1; transform:none}}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.tile:hover{transform:translateY(-4px); border-color:var(--line-hi); z-index:2;
  box-shadow:var(--glow), inset 0 1px 1px rgba(255,255,255,.14), inset 0 -10px 16px -8px rgba(0,0,0,.4)}
.tile:hover img{transform:scale(1.08)}
.tile:active{transform:scale(.94);
  box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 2px 7px 1px rgba(0,0,0,.5), inset 0 0 22px rgba(0,0,0,.32)}
/* "+" tile in the photos grid → add a photo */
.tile-add{display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; cursor:pointer; -webkit-appearance:none; color:var(--grn);
  background:rgba(var(--accent-rgb),.06); border:1.5px dashed var(--line-hi); border-radius:8px; transition:.2s var(--spring)}
.tile-add:hover{background:rgba(var(--accent-rgb),.12)}
.tile-add:active{transform:scale(.93)}
.tile-add svg{filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.5))}
@media(min-width:640px){ .tile-add{border-radius:12px} }
.tile .tile-ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; opacity:.2}
.tile .tile-grad{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.9) 2%, rgba(0,20,6,.18) 40%, transparent 62%); pointer-events:none}
/* hacker corner-bracket frame on each tile */
.tile::before,.tile::after{content:""; position:absolute; width:14px; height:14px; pointer-events:none; opacity:.55; transition:.3s var(--ease); z-index:3}
.tile::before{top:6px; left:6px; border-top:2px solid var(--grn); border-left:2px solid var(--grn)}
.tile::after{bottom:14px; right:6px; border-bottom:2px solid var(--grn); border-right:2px solid var(--grn)}
.tile:hover::before,.tile:hover::after{opacity:1; width:20px; height:20px}
.tile .tile-plate{position:absolute; left:9px; bottom:11px; right:9px; font-family:var(--disp); font-weight:400; font-size:14px; letter-spacing:1px; color:var(--grn); text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 12px rgba(var(--accent-rgb),.6); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* iOS clear + dark glass themes: white tile writing for readability over photos */
[data-theme="glass"] .tile .tile-plate,[data-theme="darkglass"] .tile .tile-plate{color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.9)}
.tile .tile-bar{position:absolute; left:8px; right:8px; bottom:6px; height:3px; background:rgba(var(--accent-rgb),.18); border-radius:3px; overflow:hidden}
.tile .tile-bar > i{display:block; height:100%; background:var(--grn); border-radius:3px; box-shadow:0 0 8px rgba(var(--accent-rgb),.8)}
.tile.full .tile-bar > i{background:var(--grn-pale); box-shadow:0 0 10px rgba(var(--accent-rgb),1)}
.tile .tile-check{position:absolute; top:8px; right:8px; width:23px; height:23px; border-radius:50%; background:var(--grn); color:var(--on-grn); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; box-shadow:0 0 14px rgba(var(--accent-rgb),.7)}
.tile .tile-multi{position:absolute; top:8px; right:8px; color:var(--grn); font-size:15px; text-shadow:0 2px 6px rgba(0,0,0,.9)}
.tile .tile-cap{position:absolute; left:0; right:0; bottom:0; padding:14px 7px 5px; font-size:9px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.95); background:linear-gradient(to top, rgba(0,0,0,.8), transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none}
.tile .tile-tag{position:absolute; top:7px; left:7px; font-size:9px; font-weight:700; letter-spacing:.4px; padding:4px 7px; border-radius:7px; text-transform:uppercase; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.tile-tag.urgent{background:#ff2a2a; color:#fff; box-shadow:0 3px 12px rgba(255,40,40,.5)}
.tile-tag.overdue{background:#ff2a2a; color:#fff}
.tile-tag.due{background:rgba(0,0,0,.62); color:var(--grn); border:1px solid var(--line-hi)}
.tile-tag.sold{background:var(--grn); color:var(--on-grn); box-shadow:0 0 14px rgba(var(--accent-rgb),.6)}
.tile.is-part .tile-plate{bottom:8px}

.tile.skel{animation:none; opacity:1; background:linear-gradient(100deg,#04130b 30%,#0a2b16 50%,#04130b 70%); background-size:220% 100%; animation:shimmer 1.3s linear infinite; border-color:var(--line)}
@keyframes shimmer{to{background-position:-220% 0}}

/* ============================================================ SEARCH */
/* search bar pinned to the bottom of the search view (thumb height), above the nav */
#searchView{padding-bottom:84px}
.searchbar{position:fixed; left:0; right:0; bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 12px); z-index:45;
  display:flex; align-items:center; gap:9px; width:min(100% - 24px,560px); margin:0 auto; padding:6px 8px 6px 15px;
  background:var(--card-solid); border:1px solid var(--line-hi); border-radius:30px;
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 12px 32px -6px rgba(0,0,0,.6), 0 0 24px rgba(var(--accent-rgb),.14)}
.searchbar-ic{flex:0 0 auto; color:var(--grn); filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.5))}
.searchbar .search{flex:1; min-width:0; background:none; border:none; border-radius:0; padding:11px 2px; color:var(--text); font-size:16px; font-family:var(--mono)}
.searchbar .search:focus{outline:none; box-shadow:none}
.searchbar .search::placeholder{color:var(--muted)}
/* up/down filter stepper embedded on the right of the field */
/* funnel icon opens a pop-up of filter options (above the bar) */
.filter-btn{position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; cursor:pointer; color:var(--grn); background:rgba(var(--accent-rgb),.1); border:1px solid var(--line-hi); transition:.15s var(--spring)}
.filter-btn:active{transform:scale(.9)}
.filter-btn.open{background:rgba(var(--accent-rgb),.24)}
.filter-btn svg{filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.5))}
.filter-btn.active-filter::after{content:""; position:absolute; top:5px; right:5px; width:9px; height:9px; border-radius:50%; background:var(--grn); border:1.5px solid var(--bg-elev); box-shadow:0 0 6px var(--grn)}
.filter-menu{position:absolute; bottom:calc(100% + 12px); right:0; z-index:46; min-width:184px;
  background:linear-gradient(180deg,rgba(7,19,11,.97),rgba(0,8,3,.97)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line-hi); border-radius:14px; padding:6px; box-shadow:var(--shadow), 0 0 30px rgba(var(--accent-rgb),.12); animation:popIn .18s var(--ease); transform-origin:bottom right}
.filter-menu.hidden{display:none}
.filter-opt{display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:14px; color:var(--text); padding:11px 14px; border-radius:9px; transition:.15s; text-transform:uppercase; letter-spacing:.4px}
.filter-opt:active{transform:scale(.97)}
.filter-opt.active{background:var(--grad); color:var(--on-grn)}
.filter-opt:not(.active):hover{background:rgba(var(--accent-rgb),.12); color:var(--grn)}

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

/* ============================================================ ANALYTICS */
.a-wrap{padding:14px 16px}
.a-pagetitle{font-family:var(--disp); font-size:30px; text-align:center; margin:2px 0 16px; letter-spacing:1px; text-transform:uppercase; color:var(--grn-pale); text-shadow:0 0 14px rgba(var(--accent-rgb),.45)}
.a-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:6px}
.a-stat{background:var(--card-solid); border:1px solid var(--line-hi); border-radius:var(--r); padding:15px; position:relative; overflow:hidden;
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%)}
.a-stat::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--grad)}
.a-stat .v{font-family:var(--disp); font-size:40px; line-height:.9; color:var(--grn); text-shadow:0 0 12px rgba(var(--accent-rgb),.5)}
.a-stat .l{font-size:12px; font-weight:600; color:var(--text); text-transform:uppercase; letter-spacing:.6px; margin-top:7px}
.a-stat .sub{font-size:11.5px; color:var(--muted); margin-top:3px}

.a-card{background:var(--card-solid); border:1px solid var(--line-hi); border-radius:var(--r-lg); padding:16px; margin-top:12px;
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%)}
.a-card h3{font-family:var(--disp); font-size:22px; font-weight:400; margin:0 0 14px; letter-spacing:1px; text-transform:uppercase; color:var(--grn-pale); display:flex; align-items:center; gap:8px}
.a-card h3::before{content:"//"; color:var(--grn-deep); font-size:16px}
.a-head{display:flex; align-items:center; justify-content:flex-end; margin-bottom:14px}
.a-head h3{margin:0}
.a-toggle{display:flex; gap:4px; background:rgba(var(--accent-rgb),.06); border:1px solid var(--line); border-radius:11px; padding:3px}
.seg{background:none; border:none; color:var(--text); font-family:var(--mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:7px 14px; border-radius:8px; cursor:pointer; transition:.2s var(--spring)}
.seg:active{transform:scale(.92)}
.seg.active{background:var(--grad); color:var(--on-grn); box-shadow:0 0 12px rgba(var(--accent-rgb),.4)}
.a-cap{text-align:center; color:var(--text); margin:12px 0 0; font-size:13px}

/* horizontal labelled bars */
.a-row{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.a-row:last-child{margin-bottom:0}
.a-row .rk{flex:0 0 92px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.a-row .rt{flex:1; height:14px; background:rgba(var(--accent-rgb),.07); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.a-row .rt > i{display:block; height:100%; border-radius:8px; transition:width .6s var(--ease)}
.a-row .rv{flex:0 0 auto; font-family:var(--disp); font-size:18px; color:var(--grn); min-width:30px; text-align:right}
.bar-grn > i{background:var(--grad); box-shadow:0 0 10px rgba(var(--accent-rgb),.5)}
.bar-amber > i{background:linear-gradient(90deg,#cc8d00,var(--amber))}
.bar-red > i{background:linear-gradient(90deg,#cc2f2f,var(--red))}
.bar-mech > i{background:linear-gradient(90deg,#cc8d00,var(--amber))}

/* weekly column chart */
.a-week{display:flex; align-items:flex-end; justify-content:space-between; gap:7px; height:130px; padding-top:8px}
.a-week.year{gap:4px}
.a-col{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.a-col .bar{width:100%; max-width:34px; background:var(--grad); border-radius:7px 7px 3px 3px; min-height:4px; box-shadow:0 0 10px rgba(var(--accent-rgb),.35); transition:height .6s var(--ease)}
.a-week.year .a-col .bar{max-width:18px; border-radius:5px 5px 2px 2px}
.a-col.today .bar{box-shadow:0 0 16px rgba(var(--accent-rgb),.8)}
.a-col .cv{font-family:var(--disp); font-size:16px; color:var(--grn)}
.a-week.year .a-col .cv{font-size:12px}
.a-col .cl{font-size:10px; color:var(--text); text-transform:uppercase}
.a-week.year .a-col .cl{font-size:9px}
.a-col.today .cl{color:var(--grn)}
.a-empty{color:var(--faint); font-size:13px; text-align:center; padding:14px 0}

/* ============================================================ PROFILE */
.profile{padding-top:max(8px,calc(env(safe-area-inset-top) + 6px)); padding-bottom:34px; animation:profIn .4s var(--ease)}
@keyframes profIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
/* floating menu trigger top-right; dropdown stacks beneath it (right-aligned) */
.profile-topbar{position:fixed; top:max(10px,calc(env(safe-area-inset-top) + 4px)); right:12px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px}
/* bare 3-dots icon, no circle */
.pt-menubtn{width:40px; height:40px; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--grn);
  background:none; border:none; box-shadow:none;
  transition:.2s var(--spring)}
.pt-menubtn:active{transform:scale(.9)}
.pt-menubtn svg{filter:drop-shadow(0 1px 4px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(var(--accent-rgb),.5))}
.pt-menubtn .ic-close{display:none}
.pt-menubtn.open{transform:rotate(90deg)}
.pt-menubtn.open .ic-dots{display:none}
.pt-menubtn.open .ic-close{display:block}
.pt-menu{z-index:40; min-width:210px; transform-origin:top right;
  background:linear-gradient(180deg,rgba(7,19,11,.96),rgba(0,8,3,.96)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line-hi); border-radius:14px; padding:6px; box-shadow:var(--shadow), 0 0 30px rgba(var(--accent-rgb),.12); animation:popIn .2s var(--ease)}
.pt-menu.hidden{display:none}

/* bottom control bar — back + centered title + status, near the thumb */
.profile-bottombar{position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; align-items:center; gap:12px;
  padding:11px 14px; padding-bottom:max(11px,calc(env(safe-area-inset-bottom) + 8px));
  background:linear-gradient(0deg,rgba(0,6,0,.97),rgba(0,6,0,.55));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.profile-bottombar .back-btn{flex:0 0 auto}
.pt-center{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px} /* back-btn (left) and cover (right) balance it */
/* leaf-shaped cover thumbnail (same shape as the Home stat panels) */
.pt-cover{flex:0 0 auto; width:46px; height:46px; padding:0; cursor:pointer; overflow:hidden; border:1px solid var(--line-hi);
  border-radius:14px 0 14px 0; transform:skewX(-8deg); background:rgba(var(--accent-rgb),.08); box-shadow:var(--glow); transition:.2s var(--spring)}
.pt-cover:active{transform:skewX(-8deg) scale(.92)}
.pt-cover img{width:100%; height:100%; object-fit:cover; display:block; transform:skewX(8deg) scale(1.22)}
.pt-cover.empty img{display:none}
.pt-title{display:block; max-width:100%; padding:0; min-width:0;
  font-family:var(--disp); font-size:24px; line-height:1; letter-spacing:.5px; text-transform:uppercase; color:var(--grn-pale); text-shadow:0 0 12px rgba(var(--accent-rgb),.35)}
#ptTitleText{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
#ptTitleText:active{transform:scale(.97)}
.pt-status{display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap}

/* quick name-edit sheet: show part name OR make/model, plus a ghost "Discard" */
#nameOverlay:not(.name-part) #nm_partname{display:none}
#nameOverlay.name-part #nm_carrow{display:none}
.name-actions{display:flex; gap:12px; margin-top:2px}
.name-actions .btn-juicy{flex:1; font-size:20px}
.btn-juicy.ghost{background-image:none; background:var(--card-hi); border-color:var(--line-hi); color:var(--text); text-shadow:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.3)}
.btn-juicy.ghost:active{transform:translateY(1px) scale(.99); box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.pt-mi{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:14px; color:var(--text); padding:12px 14px; border-radius:9px; transition:.15s}
.pt-mi .pt-ic{flex:0 0 auto; color:var(--grn)}
.pt-mi:active{transform:scale(.97)}
.pt-mi:hover{background:rgba(var(--accent-rgb),.12); color:var(--grn)}
/* the complete/sold action stands out — accent fill */
.pt-mi.primary{background:var(--grad); color:var(--on-grn); font-weight:700; margin-top:3px; box-shadow:0 0 16px rgba(var(--accent-rgb),.4)}
.pt-mi.primary .pt-ic{color:var(--on-grn)}
.pt-mi.primary:hover{background:var(--grad); filter:brightness(1.08); color:var(--on-grn)}
/* glassy grey/white 5-sided "back" button — rectangle with a point on its left */
/* leaf shape, mirrored horizontally vs the cover (skew + radius flipped) */
.back-btn{width:46px; height:46px; border-radius:0 14px 0 14px; cursor:pointer; padding:0; transform:skewX(8deg);
  display:flex; align-items:center; justify-content:center; color:var(--grn);
  background:rgba(var(--accent-rgb),.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line-hi); box-shadow:var(--glow);
  transition:.2s var(--spring)}
.back-btn:hover{background:rgba(var(--accent-rgb),.16)}
.back-btn:active{transform:skewX(8deg) scale(.88)}
.back-btn svg{transform:skewX(-8deg); filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.5))}

@keyframes spin{to{transform:rotate(360deg)}}

/* bio block — status + details + big centered time */
.p-bio{padding:16px 20px 6px; text-align:center}
.p-desc{color:var(--muted); font-size:14px}
.p-time{margin-top:8px; font-family:var(--disp); font-size:18px; letter-spacing:.5px; color:var(--grn); text-shadow:0 0 12px rgba(var(--accent-rgb),.4)}
.status-pill,.due-pill,.urgent-pill{font-size:11px; font-weight:700; padding:5px 13px; border-radius:18px; text-transform:uppercase; letter-spacing:.5px}
.status-pill.active{background:rgba(var(--accent-rgb),.14); color:var(--grn)}
.status-pill.done{background:var(--grn); color:var(--on-grn)}
.urgent-pill{background:#ff2a2a; color:#fff}
.due-pill.overdue{background:rgba(255,77,77,.18); color:var(--red)}
.due-pill.soon{background:rgba(255,176,0,.18); color:var(--amber)}
.due-pill.ok{background:rgba(var(--accent-rgb),.14); color:var(--grn)}

/* car-part pricing cards at the top of a part profile */
.p-pricing{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:6px 20px 4px}
/* same skewed-parallelogram shape as the Home page stat panels */
.pp{position:relative; overflow:hidden; background:var(--card-solid); border:1px solid var(--line-hi); border-radius:14px 0 14px 0; padding:12px 12px 11px; text-align:center; transform:skewX(-8deg); cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%)}
.pp > *{transform:skewX(8deg)} /* keep contents upright */
.pp-edit{width:100%; min-width:0; background:rgba(var(--accent-rgb),.12); border:1px solid var(--line-hi); border-radius:7px; color:var(--text); font-family:var(--disp); font-size:20px; text-align:center; padding:4px 4px}
.pp-edit:focus{outline:none; box-shadow:0 0 0 1px var(--grn)}
.pp-v{font-family:var(--disp); font-size:24px; line-height:1; color:var(--grn); text-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
.pp-l{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:5px}

.p-meta{padding:14px 20px 0; display:flex; flex-direction:column; gap:8px}
.p-row{font-size:14px; display:flex; gap:12px; align-items:center}
.p-row .k{color:var(--muted); font-size:10px; min-width:74px; text-transform:uppercase; letter-spacing:.5px}
.p-row a{color:var(--grn); text-decoration:none; font-weight:600}
.p-note{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; margin:12px 20px 0; font-size:14px; line-height:1.5}

/* segmented Gallery / Tasks control — fully-rounded pill with a sliding indicator */
.seg-tabs{position:relative; display:flex; margin:18px 16px 14px; padding:4px; border-radius:999px;
  background:var(--card-solid); border:1px solid var(--line-hi); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.seg-ind{position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px;
  background:var(--grad); box-shadow:0 0 14px rgba(var(--accent-rgb),.4); transition:transform .32s var(--spring); z-index:0}
.seg-tabs.p1 .seg-ind{transform:translateX(100%)}
.seg-tab{position:relative; z-index:1; flex:1; background:none; border:none; cursor:pointer;
  font-family:var(--disp); font-size:19px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);
  padding:11px 0; border-radius:999px; transition:color .25s}
.seg-tab.active{color:var(--on-grn)}
/* the two sliding panes */
.panes{position:relative; overflow:hidden; transition:height .32s var(--spring)}
.panes-track{display:flex; transition:transform .32s var(--spring)}
.panes.p1 .panes-track{transform:translateX(-100%)}
.pane{flex:0 0 100%; min-width:0; align-self:flex-start; padding-bottom:8px}

.p-section{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; margin-top:8px; position:relative}
.p-section::before{content:""; position:absolute; top:0; left:20px; right:20px; height:1px; background:linear-gradient(90deg,var(--line),transparent)}
.p-section h3{font-family:var(--disp); font-size:22px; margin:0; letter-spacing:1px; text-transform:uppercase; color:var(--grn-pale)}
.p-section .count{font-size:11px; color:var(--muted)}
/* collapsible photos */
.p-collapse{width:100%; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left}
.p-chev{display:inline-block; transition:transform .25s var(--ease); color:var(--grn)}
.p-collapse.collapsed .p-chev{transform:rotate(-90deg)}
.p-collapsible{overflow:hidden; transition:max-height .3s var(--ease), opacity .25s, margin .3s}
.p-collapsible.collapsed{max-height:0 !important; opacity:0; margin-top:0; margin-bottom:0; pointer-events:none}
/* gallery thumbs always fill the square tile uniformly */
.ig-grid .tile img{width:100%; height:100%; object-fit:cover; object-position:center}

/* ---- tasks ---- */
.tasks{display:flex; flex-direction:column; gap:7px; padding:0 20px}
.task{display:flex; align-items:center; gap:12px; background:var(--card-solid); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border:1px solid var(--line); border-radius:12px; padding:12px 14px; transition:transform .15s var(--spring), background .2s, box-shadow .2s, border-color .2s; animation:tileIn .35s var(--ease) both; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.task.checked{background:rgba(var(--accent-rgb),.04); border-color:rgba(var(--accent-rgb),.1)}
.task.dragging{box-shadow:var(--glow); border-color:var(--line-hi); opacity:.96; transform:scale(1.02); cursor:grabbing}
.task.selected{border-color:var(--line-hi); box-shadow:0 0 0 1px var(--line-hi), var(--glow); touch-action:none; cursor:grab}
/* role / quality / delete only appear once a task is long-pressed */
.t-tools{display:none; align-items:center; gap:8px}
.task.selected .t-tools{display:flex; animation:toolsIn .2s var(--ease)}
@keyframes toolsIn{from{opacity:0; transform:translateX(6px)} to{opacity:1; transform:none}}
.check{width:26px; height:26px; flex:0 0 auto; border-radius:8px; border:2px solid var(--line-hi); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--grn); transition:.25s var(--spring)}
.check:active{transform:scale(.8)}
.check.on{background:transparent; border-color:var(--grn); color:var(--grn); box-shadow:0 0 12px rgba(var(--accent-rgb),.45)}
.task .t-text{flex:1; font-size:14.5px; transition:.25s; letter-spacing:.3px}
.task.checked .t-text{color:var(--muted)} /* done = dimmed, never crossed out */
/* MECH tasks read amber (--mech) instead of the theme accent so BODY vs MECH is obvious at a glance */
.task.mech{border-color:rgba(255,176,0,.42); box-shadow:inset 3px 0 0 var(--mech)}
.task.mech .role{color:var(--mech)}
.task.mech .role svg{filter:drop-shadow(0 0 4px rgba(255,176,0,.55))}
.task.mech .check{color:var(--mech)}
.task.mech .check.on{border-color:var(--mech); color:var(--mech); box-shadow:0 0 12px rgba(255,176,0,.45)}
.task.mech .t-new{background:var(--mech); color:#241400}
/* a done task's quality light colours its outline + fill: amber = ok, red = redo (good stays default) */
.task.q-ok{border-color:rgba(255,176,0,.5); background:linear-gradient(90deg,rgba(255,176,0,.1),var(--card-solid) 45%); box-shadow:inset 3px 0 0 var(--amber)}
.task.q-ok .check.on{border-color:var(--amber); color:var(--amber); box-shadow:0 0 12px rgba(255,176,0,.45)}
.task.q-redo{border-color:rgba(255,77,77,.55); background:linear-gradient(90deg,rgba(255,77,77,.1),var(--card-solid) 45%); box-shadow:inset 3px 0 0 var(--red)}
.task.q-redo .check.on{border-color:var(--red); color:var(--red); box-shadow:0 0 12px rgba(255,77,77,.45)}
/* role = theme-coloured icon (spray can = body, engine = mechanic) */
.role{display:flex; align-items:center; justify-content:center; padding:2px; cursor:pointer; color:var(--grn); background:none; border:none; transition:.2s var(--spring)}
.role:active{transform:scale(.85)}
.role svg{filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.5))}
/* quality = a glowing status light: green good · amber ok · red redo */
.qual{width:14px; height:14px; flex:0 0 auto; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.18); transition:.2s var(--spring)}
.qual:active{transform:scale(.82)}
.qual.good{background:#2bd24a; box-shadow:0 0 8px 1px rgba(43,210,74,.85)}
.qual.ok{background:#ffb000; box-shadow:0 0 8px 1px rgba(255,176,0,.8)}
.qual.redo{background:#ff3b30; box-shadow:0 0 8px 1px rgba(255,59,48,.85)}
/* email-style attachment paperclip, theme-coloured, sits next to ✕ */
.t-cam{display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--grn); cursor:pointer; padding:2px 3px; transition:.2s; line-height:1}
.t-cam:active{transform:scale(.8)}
.t-cam svg{filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.45))}
.t-del{background:none; border:none; color:var(--faint); font-size:15px; cursor:pointer; padding:2px 4px; transition:.2s}
.t-del:active{color:var(--red); transform:scale(.85)}
.t-new{font-size:8.5px; color:var(--on-grn); background:var(--grn); font-weight:700; margin-left:7px; padding:2px 6px; border-radius:5px; letter-spacing:.5px; vertical-align:middle}

/* quick add */
.quick{margin:16px 20px 0}
.qlabel{font-size:10px; color:var(--muted); margin-bottom:9px; display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.5px}
.dotc{width:9px; height:9px; border-radius:50%}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:var(--card); color:var(--text); padding:9px 13px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--mono); text-transform:uppercase; letter-spacing:.4px; transition:.2s var(--spring)}
.chip:active{transform:scale(.9)}
.chip.body{border-color:var(--line-hi)} .chip.body:active{background:rgba(var(--accent-rgb),.16)}
.chip.mech{border-color:rgba(255,176,0,.4)} .chip.mech:active{background:rgba(255,176,0,.16)}
.addrow{display:flex; gap:10px; margin:14px 20px 12px; align-items:stretch}
.addrow input{flex:1; background:var(--card-solid); border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--text); font-size:15px; font-family:var(--mono)}
.addrow input:focus{outline:none; border-color:transparent; box-shadow:0 0 0 1px var(--grn)}
/* Add task button: green text, black fill + outline, slanted parallelogram (matches home stats) */
.btn-addtask{flex:0 0 auto; padding:0 22px; cursor:pointer; font-family:var(--mono); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px;
  color:var(--grn); background:#000; border:1.5px solid #000; border-radius:14px 0 14px 0; transform:skewX(-8deg);
  box-shadow:0 0 0 1px var(--line-hi), 0 0 14px rgba(var(--accent-rgb),.25); transition:.2s var(--spring); text-shadow:0 0 8px rgba(var(--accent-rgb),.5)}
.btn-addtask > span{display:inline-block; transform:skewX(8deg)}
.btn-addtask:active{transform:skewX(-8deg) scale(.93)}

/* ============================================================ BUTTONS */
.btn{position:relative; overflow:hidden; border:1px solid transparent; border-radius:12px; padding:13px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--mono); text-align:center; text-transform:uppercase; letter-spacing:.6px; transition:transform .18s var(--spring), filter .2s, box-shadow .2s}
.btn:active{transform:scale(.95)}
.btn-primary{background:var(--grad); color:var(--on-grn); box-shadow:var(--glow)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--card); border-color:var(--line); color:var(--grn)}
.btn-ghost:hover{background:var(--card-hi)}
.btn-green{background:var(--grad); color:var(--on-grn); box-shadow:var(--glow)}
.btn-danger{background:rgba(255,77,77,.12); color:var(--red); border-color:rgba(255,77,77,.4)}
.btn-block{width:100%} .btn-sm{padding:10px 13px; font-size:12px}

/* satisfying embossed buttons in the new/edit forms (Save / Add car / Delete) */
.btn-juicy{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer; -webkit-appearance:none; user-select:none;
  height:54px; padding:0 22px; border-radius:16px; border:1px solid var(--grn-deep); color:var(--on-grn);
  background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)), linear-gradient(to top, var(--grn-deep) 0%, var(--grn-mid) 100%);
  font-family:var(--disp); font-size:23px; line-height:1; letter-spacing:1px; text-transform:uppercase; text-shadow:0 1px 1px rgba(255,255,255,.3);
  box-shadow:0 4px 3px 1px rgba(var(--accent-rgb),.18), 0 7px 18px -3px rgba(0,0,0,.55), 0 -3px 6px rgba(0,0,0,.32), 0 -3px 5px rgba(var(--accent-rgb),.22), inset 0 1.5px 1px rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.3);
  transition:all .18s ease}
.btn-juicy:hover{filter:brightness(1.06)}
.btn-juicy:active{transform:translateY(1px) scale(.99); box-shadow:0 2px 5px rgba(0,0,0,.5), inset 0 0 6px 2px rgba(0,0,0,.45), inset 0 0 26px rgba(0,0,0,.28)}
.btn-juicy.danger{border-color:#7c1117; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35);
  background-image:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16)), linear-gradient(to top, #7c1117 0%, #c62833 100%);
  box-shadow:0 4px 3px 1px rgba(198,40,51,.22), 0 7px 18px -3px rgba(0,0,0,.55), 0 -3px 6px rgba(0,0,0,.32), 0 -3px 5px rgba(198,40,51,.25), inset 0 1.5px 1px rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.3)}
/* file picker: bare row + a satisfying "Choose File" button */
.form input.file-juicy{background:none; border:none; padding:6px 2px; color:var(--muted); font-size:13px}
.file-juicy::-webkit-file-upload-button,
.file-juicy::file-selector-button{-webkit-appearance:none; cursor:pointer; margin-right:12px;
  padding:11px 18px; border-radius:13px; border:1px solid #8f9092; color:#5a5a5a;
  background-image:linear-gradient(to top, #d8d9db 0%, #fff 82%, #fdfdfd 100%);
  font-family:var(--disp); font-size:18px; letter-spacing:.5px; text-transform:uppercase; text-shadow:0 1px #fff;
  box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -2px 5px rgba(0,0,0,.12); transition:all .18s ease}
.file-juicy::file-selector-button:active{transform:translateY(1px) scale(.98); box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 0 5px 2px rgba(0,0,0,.4)}
/* placeholders double as field labels now — keep them clear (not the yellow plate) */
.form input:not(.plate-input)::placeholder,.form textarea::placeholder{color:var(--muted); opacity:1}
/* car-part mode: swap reg plate → part name, drop colour, reveal pricing (toggled by the checkbox) */
#newOverlay:not(.part-mode) #n_partname,#editOverlay:not(.part-mode) #e_partname{display:none}
#newOverlay.part-mode #n_reg,#newOverlay.part-mode #n_colour,
#editOverlay.part-mode #e_reg,#editOverlay.part-mode #e_colour{display:none}
.part-fields{display:none; flex-direction:column; gap:14px}
#newOverlay.part-mode .part-fields,#editOverlay.part-mode .part-fields{display:flex}
.ripple{position:absolute; border-radius:50%; transform:scale(0); background:rgba(var(--accent-rgb),.3); pointer-events:none; animation:ripple .6s var(--ease)}
@keyframes ripple{to{transform:scale(2.6); opacity:0}}

/* number plate — authentic UK */
.plate{position:relative; font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:1.5px; background:linear-gradient(180deg,#ffe24a,#ffd400); color:#0a0a0a; padding:5px 10px 5px 21px; border-radius:6px; font-size:15px; border:1px solid rgba(0,0,0,.35); text-transform:uppercase; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.4)}
.plate::before{content:"UK"; position:absolute; left:0; top:0; bottom:0; width:15px; background:linear-gradient(180deg,#2b4cff,#1a37e6); color:#fff; font-size:6.5px; font-weight:700; letter-spacing:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:2px; border-radius:5px 0 0 5px}

/* ============================================================ BOTTOM NAV */
.bottomnav{position:fixed; left:0; right:0; bottom:0; z-index:50; height:calc(var(--navh) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  display:flex; align-items:stretch;
  background:linear-gradient(0deg,rgba(0,8,2,.98),rgba(0,8,2,.82));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--line)}
.nav-ind{position:absolute; top:9px; height:46px; width:33.3333%; pointer-events:none; transition:transform .42s var(--spring)}
.nav-ind::before{content:""; position:absolute; inset:0 18%; border-radius:14px; background:var(--grad-soft); border:1px solid var(--line-hi); box-shadow:var(--glow)}
.navbtn{position:relative; z-index:1; flex:1; background:none; border:none; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; transition:color .3s}
.navbtn svg{stroke:currentColor; transition:transform .3s var(--spring)}
.navbtn:active svg{transform:scale(.82)}
.navbtn.active{color:var(--grn)}
.navbtn.add{color:var(--grn)}
.navbtn.add svg{stroke:url(#fabgrad)}

/* ============================================================ OVERLAY / SHEET */
.overlay{position:fixed; inset:0; background:rgba(0,4,0,.72); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); z-index:70; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.overlay.hidden{display:none}
.sheet{background:linear-gradient(180deg,rgba(7,19,11,.86),rgba(0,8,3,.9)); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--line-hi); border-bottom:none; border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; max-width:560px; max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:12px 22px calc(30px + env(safe-area-inset-bottom)); position:relative; box-shadow:0 -20px 60px rgba(0,0,0,.7), 0 0 60px rgba(var(--accent-rgb),.08); animation:slideUp .42s var(--spring)}
@keyframes slideUp{from{transform:translateY(100%)} to{transform:none}}
.sheet-grip{width:42px; height:5px; border-radius:5px; background:var(--line-hi); margin:6px auto 16px}
.sheet-close{position:absolute; top:15px; right:17px; background:var(--card); border:1px solid var(--line); color:var(--grn); width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:15px; transition:.2s var(--spring)}
.sheet-close:active{transform:scale(.85) rotate(90deg)}
.sheet-title{font-family:var(--disp); margin:0 0 18px; font-size:28px; font-weight:400; letter-spacing:1px; text-transform:uppercase; color:var(--grn-pale); text-align:center}

/* form */
.form{display:flex; flex-direction:column; gap:14px}
.form label{display:flex; flex-direction:column; gap:7px; font-size:10px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.6px}
.form input,.form textarea{background:var(--card-solid); border:1px solid var(--line); border-radius:11px; padding:13px 14px; color:var(--text); font-size:16px; font-family:var(--mono); transition:border-color .2s, box-shadow .2s}
.form input:focus,.form textarea:focus{outline:none; border-color:transparent; box-shadow:0 0 0 1px var(--grn)}
.form textarea{resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.checkbox{flex-direction:row !important; align-items:center; gap:10px !important; letter-spacing:0 !important; color:var(--text) !important; font-size:14px !important; padding:13px 2px}
.checkbox input{width:22px; height:22px; accent-color:var(--grn)}
.plate-input{position:relative; font-family:"Oswald",sans-serif !important; letter-spacing:3px; text-transform:uppercase; font-weight:700; text-align:center; background:linear-gradient(180deg,#ffe24a,#ffd400) !important; color:#0a0a0a !important; font-size:22px !important; border:1px solid rgba(0,0,0,.4) !important}
.plate-input::placeholder{color:rgba(0,0,0,.4)}

/* ---- confirm modal ---- */
.confirm-box{background:linear-gradient(180deg,#06200f,#020a04); border:1px solid var(--line-hi); border-radius:var(--r-lg); width:100%; max-width:380px; margin:auto; padding:24px 22px; text-align:center; box-shadow:var(--shadow), 0 0 50px rgba(var(--accent-rgb),.1); animation:popIn .3s var(--spring)}
@keyframes popIn{from{transform:scale(.85); opacity:0} to{transform:none; opacity:1}}
.confirm-box .c-icon{font-size:34px; margin-bottom:10px}
.confirm-box h3{font-family:var(--disp); font-size:24px; font-weight:400; margin:0 0 8px; letter-spacing:1px; text-transform:uppercase; color:var(--grn-pale)}
.confirm-box p{color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 20px}
.confirm-box p b{color:var(--text)}
.confirm-actions{display:flex; gap:10px}
.confirm-actions .btn{flex:1}
#confirmOverlay{align-items:center; padding:24px}

/* ============================================================ LIGHTBOX */
.lightbox{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; animation:fadeIn .25s ease}
.lightbox.hidden{display:none}
.lightbox img{max-width:96vw; max-height:78vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.9), 0 0 50px rgba(var(--accent-rgb),.12); touch-action:none; will-change:transform; cursor:zoom-in}
.lightbox.zoomed img{cursor:grab; border-radius:0; box-shadow:none}
.lb-close{position:absolute; top:max(18px,env(safe-area-inset-top)); left:18px; z-index:2; background:rgba(var(--accent-rgb),.1); border:1px solid var(--line); color:var(--grn); width:42px; height:42px; border-radius:50%; font-size:18px; cursor:pointer; transition:.2s var(--spring)}
.lb-close:active{transform:scale(.85) rotate(90deg)}
.lb-counter{position:absolute; top:max(20px,calc(env(safe-area-inset-top) + 4px)); right:18px; z-index:2; font-family:var(--mono); font-size:14px; letter-spacing:1px; color:var(--grn); background:rgba(0,0,0,.5); border:1px solid var(--line); padding:5px 11px; border-radius:20px; text-shadow:0 0 8px rgba(var(--accent-rgb),.5); pointer-events:none}
.lb-caption{position:absolute; top:calc(max(20px,env(safe-area-inset-top)) + 40px); left:18px; right:70px; z-index:2; font-family:var(--disp); font-size:22px; letter-spacing:.5px; text-transform:uppercase; color:var(--grn-pale); text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 14px rgba(var(--accent-rgb),.4); pointer-events:none}
.lb-actions{position:absolute; bottom:calc(30px + env(safe-area-inset-bottom)); display:flex; gap:11px}
/* cover-crop framing mode */
.lb-frame{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:none; z-index:3; pointer-events:none;
  border:2px solid var(--grn); border-radius:8px; box-shadow:0 0 0 100vmax rgba(0,0,0,.66), 0 0 18px rgba(var(--accent-rgb),.5)}
.lb-frame-hint{position:absolute; left:0; right:0; bottom:-30px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.5px; color:var(--grn); text-shadow:0 0 8px rgba(0,0,0,.9)}
.lb-cover-actions{position:absolute; bottom:calc(30px + env(safe-area-inset-bottom)); z-index:4; display:none; gap:11px}
.lightbox.cover-mode .lb-frame{display:block}
.lightbox.cover-mode .lb-cover-actions{display:flex}
.lightbox.cover-mode .lb-actions, .lightbox.cover-mode .lb-caption{display:none}

/* ============================================================ TOAST */
.toast{position:fixed; left:50%; bottom:calc(var(--navh) + 26px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:rgba(4,19,11,.96); border:1px solid var(--line-hi); color:var(--text); padding:13px 20px; border-radius:12px; font-size:14px; z-index:110; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:toastIn .4s var(--spring); max-width:90vw}
@keyframes toastIn{from{transform:translate(-50%,16px); opacity:0} to{transform:translate(-50%,0); opacity:1}}
.toast.ok{border-color:var(--line-hi)} .toast.err{border-color:rgba(255,77,77,.6)}

/* ============================================================ MISC */
/* translucent panels everywhere — blur keeps text legible over the backdrop */
.stat, .addrow input, .confirm-box{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.confirm-box{ background:linear-gradient(180deg,rgba(8,26,14,.9),rgba(2,10,5,.92)) }

@media(min-width:980px){ .stats,.a-wrap{max-width:1000px;margin:0 auto} .a-grid{grid-template-columns:repeat(4,1fr)} }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  .tk-word{animation:none}
}