/* iCandy — translucent candy plastic, the iMac G3 flavors brought up to date.
   Five flavors (Blueberry, Strawberry, Tangerine, Grape, Lime) picked from jelly beans in the header
   (theme-icandy.js); the flavor drives every accent. Fine Aqua pinstripes, frosted panels with a glossy candy
   band, gel-capsule buttons with a wet highlight, Fredoka display type. Motion is all transform / opacity:
   jelly squish on press, a gummy page marker in the rail that wobbles when it lands, sprinkles from primary
   buttons, a lava-lamp of candy light drifting behind the page. Dark mode is candy under blacklight.
   All motion stops under prefers-reduced-motion. */

/* ---------- Palette ---------- */
html[data-theme="icandy"] {
  color-scheme: light;
  --ic-a: #36a3ff; --ic-b: #0a6fe0; --ic-soft: #dff0ff;          /* blueberry (default flavor) */
  --tint: var(--ic-a); --accent: var(--ic-b); --accent-2: #ff3b7f; --accent-3: #8a5cff;
  --font: "Outfit", "Quicksand", system-ui, sans-serif;
  --ic-display: "Fredoka", "Outfit", system-ui, sans-serif;
  --ic-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
  --bg: #f4f7fb; --panel: rgba(255, 255, 255, .82); --panel-2: #f7faff; --border: #dce6f2;
  --text: #13233a; --muted: #6a7a90; --input-bg: #ffffff; --link: var(--ic-b);
  --green: #13a05a; --red: #e8294f; --amber: #c27a00; --orange: #ef6a12;
  --radius: 22px; --radius-btn: 999px; --radius-input: 14px;
  --surface: rgba(255, 255, 255, .9); --surface-border-color: rgba(160, 185, 215, .45);
  --ic-gloss: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .18) 48%, rgba(255, 255, 255, 0) 52%);
  --grad-brand: linear-gradient(90deg, #36a3ff, #ff3b7f 30%, #ff9a1e 52%, #8a5cff 74%, #5ad12a);
  --grad-primary: var(--ic-gloss), linear-gradient(180deg, var(--ic-a), var(--ic-b));
  --grad-primary-hover: var(--ic-gloss), linear-gradient(180deg, color-mix(in srgb, var(--ic-a) 85%, #fff), var(--ic-b));
  --grad-success: var(--ic-gloss), linear-gradient(180deg, #4ad883, #13a05a);
  --grad-danger: var(--ic-gloss), linear-gradient(180deg, #ff6b88, #e0234a);
  --grad-warn: var(--ic-gloss), linear-gradient(180deg, #ffc35a, #f08a12);
  --grad-info: var(--ic-gloss), linear-gradient(180deg, #a98aff, #7444f0);
  --btn-soft: var(--ic-gloss), linear-gradient(180deg, #ffffff, #e9f0f8);
  --btn-soft-hover: var(--ic-gloss), linear-gradient(180deg, #ffffff, #dfe9f5);
  --app-bg: #f4f7fb;
  --elev: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 6px rgba(20, 50, 90, .06), 0 20px 40px -26px rgba(20, 60, 120, .35);
  --shadow: 0 20px 40px -26px rgba(20, 60, 120, .35);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--ic-a) 35%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--ic-b) 60%, transparent);
  --glow1: transparent; --glow2: transparent; --glow-blend: normal;
  --ic-lift: 0 28px 50px -24px color-mix(in srgb, var(--ic-b) 50%, transparent), 0 8px 18px -12px rgba(20, 50, 90, .25);
  --ic-stripe: rgba(30, 80, 140, .035);
  --ic-jelly: linear(0, .21 4.6%, .74 13.2%, 1.07 22%, 1.16 28.4%, 1.12 34.9%, .98 45.6%, .96 52.4%, 1.003 66.3%, 1.007 76%, 1);
  --ic-out: cubic-bezier(.22, 1, .36, 1);
}
html[data-theme="icandy"][data-ic-flavor="strawberry"] { --ic-a: #ff5a8a; --ic-b: #e01e5a; --ic-soft: #ffe1ea; }
html[data-theme="icandy"][data-ic-flavor="tangerine"]  { --ic-a: #ffa53a; --ic-b: #f06a00; --ic-soft: #ffebd6; }
html[data-theme="icandy"][data-ic-flavor="grape"]      { --ic-a: #ab7cff; --ic-b: #7240e8; --ic-soft: #ece2ff; }
html[data-theme="icandy"][data-ic-flavor="lime"]       { --ic-a: #7ae04a; --ic-b: #2fa514; --ic-soft: #e4f8d8; }
html[data-theme="icandy"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #0b0d1a; --panel: rgba(24, 28, 52, .8); --panel-2: #151a33; --border: #2a3156;
  --text: #f1f4ff; --muted: #9aa3c7; --input-bg: #10142a; --link: var(--ic-a);
  --green: #5cf29a; --red: #ff6b8b; --amber: #ffc65c; --orange: #ff9a4c;
  --surface: rgba(22, 26, 50, .92); --surface-border-color: rgba(120, 140, 220, .22);
  --ic-gloss: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, 0) 52%);
  --btn-soft: var(--ic-gloss), linear-gradient(180deg, #232a4d, #1a1f3b);
  --btn-soft-hover: var(--ic-gloss), linear-gradient(180deg, #2b3360, #222846);
  --app-bg: #0b0d1a;
  --elev: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 46px -28px rgba(0, 0, 0, .85);
  --ic-lift: 0 0 0 1px color-mix(in srgb, var(--ic-a) 35%, transparent), 0 24px 50px -22px color-mix(in srgb, var(--ic-a) 45%, transparent);
  --ic-stripe: rgba(150, 170, 255, .03);
}

/* ---------- Motion vocabulary (transform / opacity only) ---------- */
@keyframes ic-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes ic-drift { 0% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(-6vw, 5vh, 0) rotate(160deg); } 100% { transform: translate3d(0, 0, 0) rotate(360deg); } }
@keyframes ic-throb { 50% { opacity: .3; transform: scale(1.22); } }
@keyframes ic-rise { from { transform: scaleY(0); } }
@keyframes ic-boing { 30% { transform: scale(1.12, .9); } 55% { transform: scale(.95, 1.06); } 80% { transform: scale(1.02, .98); } }
@keyframes ic-float { to { opacity: 1; transform: none; } }
@keyframes ic-draw { from { transform: scaleX(0); } }
@keyframes ic-jiggle { 25% { transform: scale(1.08, .92); } 50% { transform: scale(.96, 1.05); } 75% { transform: scale(1.02, .98); } }
@keyframes ic-shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }

/* ---------- Page: Aqua pinstripes over drifting candy light ---------- */
html[data-theme="icandy"][data-mode] body {
  background: repeating-linear-gradient(0deg, var(--ic-stripe) 0 2px, transparent 2px 4px), var(--app-bg);
}
html[data-theme="icandy"][data-mode] ::selection { background: var(--ic-soft); color: var(--text); }
html[data-theme="icandy"][data-mode="dark"] ::selection { background: color-mix(in srgb, var(--ic-b) 55%, #000); color: #fff; }
/* the lava lamp: four candy blobs painted once on one layer, then only rotated/translated */
html[data-theme="icandy"][data-mode] body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none; left: -15vw; top: -15vh; width: 130vw; height: 130vh;
  mix-blend-mode: normal; opacity: .5; will-change: transform; transform-origin: 55% 45%;
  background:
    radial-gradient(28vmax 28vmax at 80% 12%, color-mix(in srgb, var(--ic-a) 55%, transparent), transparent 70%),
    radial-gradient(24vmax 24vmax at 12% 78%, rgba(255, 90, 140, .35), transparent 70%),
    radial-gradient(20vmax 20vmax at 70% 85%, rgba(255, 170, 60, .3), transparent 70%),
    radial-gradient(18vmax 18vmax at 25% 20%, rgba(130, 220, 80, .25), transparent 70%);
  animation: ic-drift 70s ease-in-out infinite;
}
html[data-theme="icandy"][data-mode="dark"] body::before { opacity: .38; }
html[data-theme="icandy"][data-mode] body::after { content: none; }
html[data-theme="icandy"][data-mode] :is(#app-view, #login-view, #modal-root) { position: relative; z-index: 1; }
html[data-theme="icandy"][data-mode] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="icandy"][data-mode] ::-webkit-scrollbar-thumb { background: var(--grad-primary); border-radius: 99px; border: 3px solid var(--bg); }
html[data-theme="icandy"][data-mode] ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Header: frosted plastic with the flavor jelly beans ---------- */
html[data-theme="icandy"][data-mode] .topbar {
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--surface-border-color);
  background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: none; isolation: isolate;
}
/* the header's plastic: flat at the top of the page, a floating candy pill once you scroll (scroll-driven, no script) */
html[data-theme="icandy"][data-mode] .topbar::before {
  content: ""; position: absolute; inset: 6px 14px; z-index: -1; pointer-events: none; border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 97%, transparent); border: 1px solid var(--surface-border-color);
  box-shadow: 0 14px 34px -18px rgba(20, 50, 90, .45), 0 1px 0 rgba(255, 255, 255, .7) inset;
  opacity: 0; transform: scale(.96, .7);
}
@supports (animation-timeline: scroll()) {
  html[data-theme="icandy"][data-mode] .topbar::before { animation: ic-float linear both; animation-timeline: scroll(root block); animation-range: 0 100px; }
}
@supports not (animation-timeline: scroll()) { html[data-theme="icandy"][data-mode] .topbar::before { opacity: 1; transform: none; } }
html[data-theme="icandy"][data-mode] .brand {
  font-family: var(--ic-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor; display: inline-flex; align-items: center; gap: 10px;
}
html[data-theme="icandy"][data-mode] .crumb.current { background: var(--grad-primary); color: #fff; border-radius: 999px; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
html[data-theme="icandy"][data-mode] .crumb-back { border-radius: 999px; }
html[data-theme="icandy"][data-mode] .ic-beans { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
html[data-theme="icandy"][data-mode] .ic-bean {
  width: 18px; height: 14px; padding: 0; border: 0; cursor: pointer; border-radius: 50% / 60%;
  background: var(--ic-gloss), linear-gradient(170deg, var(--b-a), var(--b-b));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 3px 8px -3px var(--b-b);
  transition: transform .5s var(--ic-jelly);
}
html[data-theme="icandy"][data-mode] .ic-bean:hover { transform: translateY(-2px) rotate(-8deg) scale(1.12); }
html[data-theme="icandy"][data-mode] .ic-bean[aria-pressed="true"] { transform: scale(1.25); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--b-a), 0 4px 10px -3px var(--b-b); }
html[data-theme="icandy"][data-mode] .ic-bean:focus-visible { outline: 2px solid var(--b-b); outline-offset: 3px; }
@media (max-width: 760px) { html[data-theme="icandy"][data-mode] .ic-beans { gap: 5px; } }

/* ---------- Type ---------- */
html[data-theme="icandy"][data-mode] :is(h1, h2, h3) { font-family: var(--ic-display); font-weight: 600; letter-spacing: -.01em; }
html[data-theme="icandy"][data-mode] .section-head h2 {
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1; font-weight: 700;
  background: linear-gradient(100deg, var(--text) 35%, var(--ic-b) 70%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="icandy"][data-mode] .section-head h2 { position: relative; padding-bottom: 12px; }
html[data-theme="icandy"][data-mode] .section-head h2::after {
  content: ""; position: absolute; left: 2px; bottom: 0; width: 84px; height: 7px; border-radius: 99px; transform-origin: 0 50%;
  background: repeating-linear-gradient(-45deg, var(--ic-a) 0 7px, #fff 7px 11px, var(--accent-2) 11px 18px, #fff 18px 22px);
  box-shadow: 0 3px 8px -3px var(--ic-b); animation: ic-draw .9s var(--ic-jelly) .15s backwards;
}
html[data-theme="icandy"][data-mode="dark"] .section-head h2::after {
  background: repeating-linear-gradient(-45deg, var(--ic-a) 0 7px, rgba(255, 255, 255, .85) 7px 11px, var(--accent-2) 11px 18px, rgba(255, 255, 255, .85) 18px 22px);
}
html[data-theme="icandy"][data-mode] :is(.stat .label, .sc-bal-label, table thead th, .sc-day, .ov-l) { font-family: var(--ic-mono); letter-spacing: .03em; }
html[data-theme="icandy"][data-mode] :is(.stat .value, .sc-bal-num, td, .num, .money) { font-variant-numeric: tabular-nums; }

/* ---------- Surfaces: frosted candy shells with a glossy flavor band ---------- */
html[data-theme="icandy"][data-mode] .card {
  background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: var(--radius); box-shadow: var(--elev);
  transition: transform .6s var(--ic-jelly), box-shadow .35s var(--ic-out), border-color .25s;
}
html[data-theme="icandy"][data-mode] .card::before { height: 4px; opacity: 1; background: var(--grad-primary); }
html[data-theme="icandy"][data-mode] .card:hover { transform: translateY(-4px); box-shadow: var(--ic-lift); border-color: color-mix(in srgb, var(--ic-a) 40%, var(--surface-border-color)); }
@supports (animation-timeline: view()) {
  html[data-theme="icandy"][data-mode] .station-main .card:not(.station-card) { animation: ic-pop linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
}
html[data-theme="icandy"][data-mode] :is(.card, .stat)::after {
  content: ""; position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  opacity: 0; transform: translate(var(--ic-gx, -300px), var(--ic-gy, -300px)); transition: opacity .35s;
}
html[data-theme="icandy"][data-mode="dark"] :is(.card, .stat)::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--ic-a) 30%, transparent), transparent); }
html[data-theme="icandy"][data-mode] :is(.card, .stat).ic-lit::after { opacity: 1; }
html[data-theme="icandy"][data-mode] .stat { position: relative; overflow: hidden; }
html[data-theme="icandy"][data-mode] .stat:hover .value { animation: ic-jiggle .6s var(--ic-out); }
html[data-theme="icandy"][data-mode] .stat { border-radius: 20px; border: 1px solid var(--surface-border-color); background: var(--surface); box-shadow: var(--elev); }
html[data-theme="icandy"][data-mode] .stat .value { font-family: var(--ic-display); font-weight: 600; letter-spacing: -.01em; }
html[data-theme="icandy"][data-mode] .stat .label { text-transform: uppercase; font-size: 10.5px; }

/* ---------- Controls: Aqua gel capsules that squish ---------- */
html[data-theme="icandy"][data-mode] .btn {
  border-radius: var(--radius-btn); font-weight: 600; position: relative; overflow: hidden;
  transition: transform .5s var(--ic-jelly), background .2s, color .2s, border-color .2s;
}
html[data-theme="icandy"][data-mode] .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: none; }
html[data-theme="icandy"][data-mode] .btn:active { transform: scale(.93, .9); transition-duration: .1s; }
html[data-theme="icandy"][data-mode] .btn.primary { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); border-color: color-mix(in srgb, var(--ic-b) 70%, #000); }
/* a highlight sweeps across a primary capsule on hover */
html[data-theme="icandy"][data-mode] .btn.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-120%) skewX(-20deg);
}
html[data-theme="icandy"][data-mode] .btn.primary:hover::after { animation: ic-shine .8s var(--ic-out); }
html[data-theme="icandy"][data-mode] :is(input, select, textarea) { border-radius: var(--radius-input); transition: border-color .2s, box-shadow .2s; }
html[data-theme="icandy"][data-mode] :is(input, select, textarea):focus { border-color: var(--ic-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ic-a) 22%, transparent); outline: none; }
html[data-theme="icandy"][data-mode] :is(.chip, .badge) { border-radius: 999px; }
html[data-theme="icandy"][data-mode] input[type="checkbox"], html[data-theme="icandy"][data-mode] input[type="radio"] { accent-color: var(--ic-b); }

/* ---------- Tables ---------- */
html[data-theme="icandy"][data-mode] table thead th { text-transform: uppercase; font-size: 10.5px; color: var(--muted); font-weight: 500; }
html[data-theme="icandy"][data-mode] table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ic-soft) 35%, transparent); }
html[data-theme="icandy"][data-mode="dark"] table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
html[data-theme="icandy"][data-mode] table tbody tr:hover { background: color-mix(in srgb, var(--ic-a) 12%, transparent); }
html[data-theme="icandy"][data-mode] table tbody td:first-child { transition: box-shadow .3s var(--ic-out); }
html[data-theme="icandy"][data-mode] table tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--ic-a); }

/* ---------- Station rail: a gummy marker that wobbles when it lands ---------- */
html[data-theme="icandy"][data-mode] .station-rail-left { border-radius: 26px; }
html[data-theme="icandy"][data-mode] .station-tabs-v { position: relative; }
html[data-theme="icandy"][data-mode] .station-tabs-v .tab {
  border-radius: 999px; border: 0; box-shadow: none; background: transparent; position: relative; z-index: 1;
  transition: color .25s, transform .5s var(--ic-jelly);
}
html[data-theme="icandy"][data-mode] .station-tabs-v .tab:hover { background: transparent; color: var(--text); transform: translateX(4px); }
html[data-theme="icandy"][data-mode] .station-tabs-v .tab.ic-on { background: transparent; color: #fff; box-shadow: none; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
html[data-theme="icandy"][data-mode] .station-tabs-v .tab.active:not(.ic-on) { background: transparent; box-shadow: none; color: var(--text); font-weight: 700; }
html[data-theme="icandy"][data-mode] .station-tabs-v .tab.ic-on .muted { color: inherit; opacity: .85; }
html[data-theme="icandy"][data-mode] .ic-gummy {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; border-radius: 999px;
  background: var(--grad-primary); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45) inset, 0 10px 22px -12px var(--ic-b);
  transform-origin: 50% 50%; will-change: transform;
}

/* ---------- Calendar: today is a jelly bean ---------- */
html[data-theme="icandy"][data-mode] .cal .day { border-radius: 18px; transition: transform .55s var(--ic-jelly), border-color .2s; }
html[data-theme="icandy"][data-mode] .cal .day:hover { transform: translateY(-3px) scale(1.02); }
html[data-theme="icandy"][data-mode] .cal .day .num { font-family: var(--ic-display); font-weight: 600; }
html[data-theme="icandy"][data-mode] .cal .day.today .num {
  display: inline-grid; place-items: center; min-width: 32px; height: 26px; border-radius: 50% / 60%; color: #fff;
  background: var(--grad-primary); box-shadow: 0 5px 12px -5px var(--ic-b);
}

/* ---------- Dashboard: every store is its own flavor ---------- */
html[data-theme="icandy"][data-mode] .station-grid > * { animation: ic-pop .8s var(--ic-jelly) backwards; }
html[data-theme="icandy"][data-mode] .station-grid > :nth-child(2) { animation-delay: .08s; }
html[data-theme="icandy"][data-mode] .station-grid > :nth-child(n+3) { animation-delay: .16s; }
/* the gradients are re-declared here so they pick up each card's own flavor */
html[data-theme="icandy"][data-mode] .station-grid > .station-card { --grad-primary: var(--ic-gloss), linear-gradient(180deg, var(--ic-a), var(--ic-b)); }
html[data-theme="icandy"][data-mode] .station-grid > .station-card:nth-child(5n+2) { --ic-a: #ff5a8a; --ic-b: #e01e5a; --ic-soft: #ffe1ea; }
html[data-theme="icandy"][data-mode] .station-grid > .station-card:nth-child(5n+3) { --ic-a: #ffa53a; --ic-b: #f06a00; --ic-soft: #ffebd6; }
html[data-theme="icandy"][data-mode] .station-grid > .station-card:nth-child(5n+4) { --ic-a: #ab7cff; --ic-b: #7240e8; --ic-soft: #ece2ff; }
html[data-theme="icandy"][data-mode] .station-grid > .station-card:nth-child(5n+5) { --ic-a: #7ae04a; --ic-b: #2fa514; --ic-soft: #e4f8d8; }
html[data-theme="icandy"][data-mode] .station-card { padding: 24px; }
html[data-theme="icandy"][data-mode] .station-card h3 { font-size: 22px; }
html[data-theme="icandy"][data-mode] .station-card .sc-badge { border-radius: 999px; font-family: var(--ic-mono); font-weight: 500; }
html[data-theme="icandy"][data-mode] .sc-owed { border-radius: 999px; font-family: var(--ic-mono); }
html[data-theme="icandy"][data-mode] .sc-balance.sc-live {
  border-radius: 20px; padding: 16px; border: 1px solid color-mix(in srgb, var(--ic-a) 30%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--ic-soft) 85%, transparent), transparent 75%);
}
html[data-theme="icandy"][data-mode="dark"] .sc-balance.sc-live { background: linear-gradient(165deg, color-mix(in srgb, var(--ic-b) 22%, transparent), transparent 75%); }
html[data-theme="icandy"][data-mode] .sc-live .sc-bal-num { font-family: var(--ic-display); font-weight: 700; font-size: 32px; letter-spacing: -.02em; color: var(--text); }
html[data-theme="icandy"][data-mode] .sc-live .sc-bal-suffix { font-family: var(--ic-mono); font-weight: 500; color: var(--muted); font-size: 12px; }
html[data-theme="icandy"][data-mode] .sc-live .sc-bal-num.sc-tick { animation: ic-boing .7s var(--ic-out); }
html[data-theme="icandy"][data-mode] .sc-spark rect { transform-box: fill-box; transform-origin: 50% 100%; animation: ic-rise .9s var(--ic-jelly) backwards; fill: color-mix(in srgb, var(--ic-a) 45%, transparent); }
html[data-theme="icandy"][data-mode] .sc-spark rect:nth-child(3n+2) { animation-delay: .05s; }
html[data-theme="icandy"][data-mode] .sc-spark rect:nth-child(3n+3) { animation-delay: .1s; }
html[data-theme="icandy"][data-mode] .sc-spark rect.now { fill: var(--ic-b); }
html[data-theme="icandy"][data-mode] .sc-spark.store rect { fill: color-mix(in srgb, var(--accent-2) 35%, transparent); }
html[data-theme="icandy"][data-mode] .sc-spark.store rect.now { fill: var(--accent-2); }
html[data-theme="icandy"][data-mode] .sc-cash-box { border-radius: 16px; background: var(--surface); border-color: var(--surface-border-color); }
html[data-theme="icandy"][data-mode] .sc-cash-box.now { border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 9%, var(--surface)); }
html[data-theme="icandy"][data-mode] .station-card .sc-live .sc-cash-v.sc-bal-num { font-family: var(--ic-display) !important; font-size: 18px !important; color: var(--text); }
html[data-theme="icandy"][data-mode] .station-card .sc-live .sc-cash-box.now .sc-cash-v.sc-bal-num { color: var(--green); }
html[data-theme="icandy"][data-mode] .sc-flag { border-radius: 999px; font-family: var(--ic-mono); }
/* a void / no-sale / red flag: a cherry gel chip with a halo that throbs */
html[data-theme="icandy"][data-mode] .sc-flag.hot { position: relative; isolation: isolate; color: #fff; background: var(--grad-danger); border-color: transparent; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
html[data-theme="icandy"][data-mode] .sc-flag.hot::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(255, 70, 110, .45); animation: ic-throb 2.2s ease-in-out infinite;
}
html[data-theme="icandy"][data-mode] .sc-live .sc-day { border-top: 1px dashed var(--surface-border-color); }
html[data-theme="icandy"][data-mode] .sc-prices .gp { border-radius: 999px; font-family: var(--ic-mono); }

/* ---------- Feature pages ---------- */
html[data-theme="icandy"][data-mode] .pay-hist-chips > * { border-radius: 999px; }
html[data-theme="icandy"][data-mode] .pay-hist-total { font-family: var(--ic-display); }
html[data-theme="icandy"][data-mode] .pump-card { border-radius: 20px; }
html[data-theme="icandy"][data-mode] .pump-progress-track { border-radius: 99px; overflow: hidden; }
html[data-theme="icandy"][data-mode] .pump-progress-fill { border-radius: 99px; background: var(--grad-primary); }

/* ---------- Pop-ups bounce in from @starting-style ---------- */
html[data-theme="icandy"][data-mode] .modal {
  border-radius: 28px; border: 1px solid var(--surface-border-color);
  transition: opacity .25s var(--ic-out), transform .6s var(--ic-jelly);
}
@starting-style { html[data-theme="icandy"][data-mode] .modal { opacity: 0; transform: translateY(20px) scale(.9); } }
html[data-theme="icandy"][data-mode] .modal-backdrop { background: rgba(15, 30, 60, .28); transition: opacity .25s ease-out; }
@starting-style { html[data-theme="icandy"][data-mode] .modal-backdrop { opacity: 0; } }
html[data-theme="icandy"][data-mode] .login-card { border-radius: 30px; animation: ic-pop .8s var(--ic-jelly); }

html[data-theme="icandy"][data-mode] .ic-ripple {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)); will-change: transform, opacity;
}
/* flavor flood: a wash of the new flavor spreading from the bean you picked */
.ic-flood { position: fixed; z-index: 9998; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; will-change: transform, opacity; }

/* ---------- Sprinkles (spawned by theme-icandy.js from primary buttons) ---------- */
.ic-sprinkle {
  position: fixed; z-index: 9999; width: 8px; height: 3px; border-radius: 2px; pointer-events: none;
  left: 0; top: 0; will-change: transform, opacity;
}

/* ---------- Page entrance ---------- */
html[data-theme="icandy"][data-mode] .station-main > * { animation: ic-pop .75s var(--ic-jelly) backwards; }
html[data-theme="icandy"][data-mode] .station-main > :nth-child(2) { animation-delay: .06s; }
html[data-theme="icandy"][data-mode] .station-main > :nth-child(3) { animation-delay: .12s; }
html[data-theme="icandy"][data-mode] .station-main > :nth-child(4) { animation-delay: .18s; }
html[data-theme="icandy"][data-mode] .station-main > :nth-child(n+5) { animation-delay: .24s; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html[data-theme="icandy"][data-mode] .section-head h2 { font-size: clamp(26px, 8vw, 36px); }
  html[data-theme="icandy"][data-mode] .sc-live .sc-bal-num { font-size: 26px; }
  html[data-theme="icandy"][data-mode] body::before { animation: none; }
}

/* ---------- Own motion, not the shared "sculpted forms" layer (see styles.css) ---------- */
html[data-theme="icandy"][data-mode]:root { --form-shadow: var(--elev); --form-lit: transparent; --form-shade: transparent; --form-cast: transparent; }
html[data-theme="icandy"][data-mode]:root :is(.card, .stat, .station-card, .add-card, .cal .day:not(.empty)) { transition: transform .6s var(--ic-jelly), border-color .25s !important; }
html[data-theme="icandy"][data-mode]:root :is(.card, .station-card, .add-card):hover { transform: translateY(-4px) !important; --form-shadow: var(--ic-lift); }
html[data-theme="icandy"][data-mode]:root :is(.station-card, .stat, .pump-card).ic-tilt {
  transform: perspective(900px) translateY(-5px) rotateX(var(--ic-rx, 0deg)) rotateY(var(--ic-ry, 0deg)) !important;
  transition: transform .14s ease-out, border-color .25s !important; box-shadow: var(--ic-lift);
}
html[data-theme="icandy"][data-mode]:root .cal .day:not(.empty):hover { transform: translateY(-3px) scale(1.02) !important; }
html[data-theme="icandy"][data-mode]:root :is(.btn, .tab, .seg button) { transition: transform .5s var(--ic-jelly), color .2s, background-color .2s, border-color .2s !important; }
html[data-theme="icandy"][data-mode]:root .btn:active { transform: scale(.93, .9) !important; transition-duration: .1s !important; }
html[data-theme="icandy"][data-mode]:root .btn.primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 22px -12px var(--ic-b) !important; }
html[data-theme="icandy"][data-mode]:root .station-tabs-v .tab { box-shadow: none !important; }
html[data-theme="icandy"][data-mode]:root .station-tabs-v .tab:active { transform: scale(.97) !important; }

/* ---------- Stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="icandy"] *, html[data-theme="icandy"] *::before, html[data-theme="icandy"] *::after { animation: none !important; transition: none !important; }
  html[data-theme="icandy"][data-mode] .topbar::before { opacity: 1; transform: none; }
}


/* ---------- Pointers: this theme's own arrow, and a ring for anything you can press (the shared rule in
   styles.css reads --cur-hand everywhere and keeps the I-beam in text fields) ---------- */
html[data-theme="icandy"] { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237cc4ff'/%3E%3Cstop offset='1' stop-color='%230a6fe0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 3 L4 24 L9.6 18.6 L13.6 27 L17.4 25.4 L13.6 17.2 L21 17.2 Z' fill='url(%23g)' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3; }
html[data-theme="icandy"] :is(a, button, .btn, [role="button"], .tab, select, summary, label, .station-card, .add-card, .cal .day:not(.empty), .chip, input[type="checkbox"], input[type="radio"], input[type="range"]) { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='9' fill='%23ff5a8a' stroke='%23ffffff' stroke-width='2'/%3E%3Cellipse cx='13.5' cy='12.5' rx='4' ry='2.6' fill='%23ffffff' opacity='.75'/%3E%3C/svg%3E") 16 16; }


/* ---------- Selected segment / tab / pill: the theme's pill colour with text that reads on it, in light and dark
   (the shared style puts white text on --grad-primary, which vanishes on a light pill) ---------- */
html[data-theme="icandy"][data-mode] :is(.seg button.active, .tab.active, .pill.active) { background: var(--grad-primary); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .25); }