/* FudTruk · Carnival Theme v1
   ----------------------------------------------------------------------
   Shared stylesheet for all theme-v1 pages.
   Extracted from Mockups/v1/claude/fudtruk/02-carnival/index.html.
   No gradients. Flat colors only. Inline SVG/SVG patterns OK.
*/

:root{
  --teal:#3FB6C9;
  --pink:#F257A4;
  --lemon:#F5D042;
  --tang:#F3743C;
  --lav:#C4A7E7;
  --cream:#FFFBEE;
  --ink:#1F1530;
  --paper:#FFFDF4;
}

*{ box-sizing:border-box }
html,body{ margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:'Fredoka',system-ui,sans-serif }
h1,h2,h3,h4{ font-family:'Chewy',cursive;margin:0;font-weight:400;letter-spacing:1px }
a{ color:inherit }

.wrap{ max-width:1200px;margin:0 auto;padding:0 24px }
section{ padding:54px 24px;border-top:4px solid var(--ink);position:relative }
section.teal{ background:var(--teal) }
section.pink{ background:var(--pink);color:var(--paper) }
section.lav{ background:var(--lav) }
section.lemon{ background:var(--lemon) }
section.tang{ background:var(--tang);color:var(--paper) }
section.cream{ background:var(--cream) }
section.paper{ background:var(--paper) }

.s-title{ display:flex;align-items:baseline;gap:16px;margin-bottom:24px;flex-wrap:wrap }
.s-title h2{ font-size:48px;color:var(--ink) }
section.pink .s-title h2{ color:var(--lemon) }
section.tang .s-title h2{ color:var(--lemon) }
.s-title .tag{ background:var(--ink);color:var(--lemon);padding:6px 14px;border:3px solid var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:12px;border-radius:20px }

/* === CONFETTI BAR === */
.confetti{ height:42px;background:var(--ink);display:flex;align-items:center;justify-content:center;gap:18px;color:var(--lemon);font-family:'Chewy',cursive;font-size:18px;letter-spacing:3px;border-bottom:4px solid var(--ink);padding:0 12px;text-align:center }
.confetti .sp{ display:inline-block;width:12px;height:12px;border-radius:50% }
.confetti .sp.pk{ background:var(--pink) }
.confetti .sp.tg{ background:var(--tang) }
.confetti .sp.lv{ background:var(--lav) }
.confetti .sp.tl{ background:var(--teal) }

/* === NAV === */
.nav{ display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:var(--paper);border-bottom:4px solid var(--ink);flex-wrap:wrap;gap:10px }
.logo{ font-family:'Chewy',cursive;font-size:38px;color:var(--pink);display:flex;align-items:center;gap:10px;letter-spacing:1px;text-decoration:none }
.logo .face{ width:46px;height:46px;background:var(--tang);border:4px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px }
.logo.brand-image{ width:220px;line-height:0 }
.logo.brand-image img{ display:block;width:100%;height:auto;border-radius:14px;box-shadow:3px 3px 0 var(--ink) }
.nav-links{ display:flex;gap:6px;align-items:center;flex-wrap:wrap }
.nav-links a{ padding:8px 14px;border:3px solid var(--ink);background:var(--cream);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;border-radius:20px;text-decoration:none;color:var(--ink) }
.nav-links a.active{ background:var(--lemon) }
.nav-links a:hover{ background:var(--lemon) }
.passkey{ display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--ink);color:var(--lemon);border:3px solid var(--ink);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;border-radius:20px;text-decoration:none }
.passkey .k{ width:14px;height:14px;background:var(--tang);border:1px solid var(--lemon);border-radius:3px }
.domain-switch{ font-size:12px;color:var(--ink);font-weight:700 }

/* === HERO === */
.hero{ display:grid;grid-template-columns:1.1fr 1fr;gap:36px;padding:60px 24px;align-items:center }
.hero h1{ font-size:82px;line-height:.95;color:var(--ink) }
.hero h1 em{ font-style:normal;color:var(--pink) }
.hero h1 .wob{ color:var(--tang);display:inline-block;transform:rotate(-4deg) }
.hero .sub{ font-size:14px;text-transform:uppercase;letter-spacing:4px;color:var(--pink);font-weight:700;margin-bottom:10px;background:var(--lemon);display:inline-block;padding:6px 14px;border:3px solid var(--ink);border-radius:20px }
.hero p{ font-size:18px;margin:16px 0 22px;max-width:520px;line-height:1.55 }

.cta{ display:flex;gap:10px;flex-wrap:wrap }
.btn{ display:inline-block;padding:14px 22px;border:3px solid var(--ink);background:var(--pink);color:var(--paper);font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size:13px;cursor:pointer;border-radius:26px;box-shadow:5px 5px 0 var(--ink) }
.btn.lemon{ background:var(--lemon);color:var(--ink) }
.btn.teal{ background:var(--teal);color:var(--ink) }
.btn.tang{ background:var(--tang);color:var(--paper) }
.btn.lav{ background:var(--lav);color:var(--ink) }
.btn.paper{ background:var(--paper);color:var(--ink) }
.btn.ink{ background:var(--ink);color:var(--lemon) }
.btn.sm{ padding:8px 14px;font-size:11px;box-shadow:3px 3px 0 var(--ink) }
.btn.full{ display:block;width:100%;text-align:center;box-sizing:border-box }
.btn:hover{ transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink) }
.btn.sm:hover{ box-shadow:4px 4px 0 var(--ink) }

/* === BIG CARTOON TRUCK === */
.bigtruck{ background:var(--lemon);border:4px solid var(--ink);padding:30px;position:relative;border-radius:30px;box-shadow:8px 8px 0 var(--ink) }
.bigtruck .body{ background:var(--pink);border:4px solid var(--ink);border-radius:20px 20px 10px 10px;padding:20px;text-align:center;position:relative }
.bigtruck .body .eye{ display:inline-block;width:50px;height:50px;background:var(--cream);border:4px solid var(--ink);border-radius:50%;margin:0 6px;position:relative;vertical-align:middle }
.bigtruck .body .eye:after{ content:"";position:absolute;top:10px;left:10px;width:20px;height:20px;background:var(--ink);border-radius:50% }
.bigtruck .body .eye:before{ content:"";position:absolute;top:12px;left:24px;width:8px;height:8px;background:var(--paper);border-radius:50%;z-index:1 }
.bigtruck .body .mouth{ display:inline-block;margin-left:8px;width:70px;height:36px;background:var(--ink);border:4px solid var(--ink);border-radius:0 0 36px 36px;position:relative;vertical-align:middle }
.bigtruck .body .mouth:after{ content:"";position:absolute;top:0;left:8px;width:16px;height:10px;background:var(--paper) }
.bigtruck .body .mouth:before{ content:"";position:absolute;top:0;left:30px;width:16px;height:10px;background:var(--paper) }
.bigtruck .body .nameplate{ margin-top:10px;font-family:'Chewy',cursive;font-size:26px;color:var(--lemon);letter-spacing:2px }
.bigtruck .wheels{ display:flex;justify-content:space-between;padding:0 30px;margin-top:10px }
.bigtruck .w{ width:50px;height:50px;background:var(--ink);border:4px solid var(--ink);border-radius:50%;position:relative }
.bigtruck .w:after{ content:"";position:absolute;inset:10px;background:var(--lemon);border-radius:50%;border:3px solid var(--ink) }
.bigtruck .stars{ position:absolute;top:-12px;right:20px;font-family:'Chewy',cursive;color:var(--pink);font-size:30px;transform:rotate(10deg) }

/* === NEAR ME / MAP === */
.near{ display:grid;grid-template-columns:1.1fr 1fr;gap:24px }
.map{ background:var(--tang);border:4px solid var(--ink);padding:22px;min-height:380px;position:relative;color:var(--paper);border-radius:24px;box-shadow:6px 6px 0 var(--ink) }
.map h3{ color:var(--paper);font-size:26px;margin-bottom:6px }
.festival{ display:inline-block;background:var(--ink);color:var(--lemon);padding:4px 10px;border:2px solid var(--ink);font-weight:700;font-size:11px;letter-spacing:1.5px;border-radius:10px }
.pin{ position:absolute;display:flex;align-items:center;gap:6px;z-index:2 }
.pin .d{ width:20px;height:20px;background:var(--lemon);border:3px solid var(--ink);border-radius:50% }
.pin .d.r{ background:var(--pink) }
.pin .d.t{ background:var(--teal) }
.pin .d.v{ background:var(--lav) }
.pin .lbl{ background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:2px 8px;font-weight:700;font-size:11px;border-radius:10px }

.truck-list{ display:flex;flex-direction:column;gap:12px }
.truck{ background:var(--paper);border:3px solid var(--ink);padding:14px;display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;border-radius:20px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink) }
.truck:hover{ transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink) }
.truck .ico{ width:56px;height:56px;background:var(--pink);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:28px;border-radius:50% }
.truck .ico.r{ background:var(--tang) }
.truck .ico.t{ background:var(--teal) }
.truck .ico.l{ background:var(--lemon) }
.truck .ico.v{ background:var(--lav) }
.truck h4{ font-family:'Chewy',cursive;font-size:20px;color:var(--ink);margin:0;letter-spacing:1px }
.truck .meta{ font-size:12px;opacity:.75 }
.abierto{ background:var(--teal);color:var(--ink);border:2px solid var(--ink);padding:4px 10px;font-weight:700;font-size:10px;letter-spacing:1.5px;border-radius:10px;white-space:nowrap }
.abierto.closed{ background:var(--cream);opacity:.7 }
.abierto.soon{ background:var(--lemon) }
.abierto.live{ background:var(--pink);color:var(--paper) }

/* === MENU === */
.menu{ display:grid;grid-template-columns:1fr 1fr;gap:24px }
.menu-card{ background:var(--paper);border:4px solid var(--ink);padding:24px;position:relative;border-radius:24px;box-shadow:6px 6px 0 var(--ink) }
.menu-card .sticker{ position:absolute;top:-14px;right:18px;background:var(--pink);color:var(--paper);padding:6px 14px;border:3px solid var(--ink);font-family:'Chewy',cursive;font-size:16px;letter-spacing:2px;border-radius:20px;transform:rotate(4deg) }
.menu-card h3{ font-size:34px;color:var(--ink) }
.menu-card .sub{ color:var(--pink);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:2px;margin-bottom:14px }
.item{ display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:3px dotted var(--lav) }
.item:last-child{ border-bottom:0 }
.item .name{ font-weight:700;font-size:16px }
.item .desc{ font-size:12px;opacity:.75;margin-top:2px }
.item .price{ font-family:'Chewy',cursive;color:var(--tang);font-size:28px;white-space:nowrap }
.mods{ margin-top:6px;display:flex;flex-wrap:wrap;gap:6px }
.mod{ background:var(--lemon);border:2px solid var(--ink);padding:3px 10px;font-size:11px;font-weight:700;border-radius:12px }
.mod.r{ background:var(--pink);color:var(--paper) }
.mod.t{ background:var(--teal) }
.mod.v{ background:var(--lav) }

/* === FLOW (4-step) === */
.flow{ display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px }
.step{ background:var(--paper);border:4px solid var(--ink);padding:22px;text-align:center;position:relative;border-radius:24px;box-shadow:6px 6px 0 var(--ink) }
.step .num{ position:absolute;top:-20px;left:-20px;width:50px;height:50px;background:var(--tang);color:var(--paper);border:4px solid var(--ink);font-family:'Chewy',cursive;font-size:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:3px 3px 0 var(--ink) }
.step h3{ font-size:22px;color:var(--ink);margin:6px 0 }
.step p{ font-size:13px;margin:0 }
.qr{ width:120px;height:120px;margin:10px auto;background:var(--paper);border:3px solid var(--ink);padding:5px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:1px;border-radius:12px }
.qr span{ background:var(--paper) }
.qr span.on{ background:var(--ink) }
.complete{ background:var(--teal);color:var(--ink);border:3px solid var(--ink);display:inline-block;padding:8px 14px;font-family:'Chewy',cursive;font-size:14px;margin-top:8px;letter-spacing:1.5px;border-radius:14px }

/* === MODES === */
.modes{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px }
.mode{ background:var(--paper);border:3px solid var(--ink);padding:18px;text-align:center;border-radius:24px;box-shadow:5px 5px 0 var(--ink) }
.mode .icn{ font-size:46px }
.mode h3{ font-size:22px;color:var(--ink);margin:8px 0 4px }
.mode p{ font-size:12px;margin:0 }
.mode .fee{ margin-top:10px;display:inline-block;background:var(--lemon);border:2px solid var(--ink);padding:3px 10px;font-size:11px;font-weight:700;border-radius:12px }
.mode.sel{ background:var(--tang);color:var(--paper) }
.mode.sel h3{ color:var(--paper) }
.mode.sel .fee{ background:var(--lemon);color:var(--ink) }
.modesel{ margin-top:18px;background:var(--ink);color:var(--cream);border:4px solid var(--ink);padding:22px;display:grid;grid-template-columns:1.3fr 1fr;gap:22px;border-radius:24px;box-shadow:6px 6px 0 var(--pink) }
.modesel .lbl{ font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--lemon);font-size:11px }
.modesel .seat{ font-family:'Chewy',cursive;font-size:30px;color:var(--lemon);margin:8px 0 }
.radios{ display:flex;flex-direction:column;gap:6px }
.radio{ display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font-weight:700;font-size:13px;border-radius:12px }
.radio.sel{ background:var(--tang);color:var(--paper) }

/* === WALLET === */
.wallet-grid{ display:grid;grid-template-columns:1fr 1.2fr;gap:26px }
.wallet{ background:var(--pink);color:var(--paper);border:4px solid var(--ink);padding:24px;position:relative;border-radius:24px;box-shadow:8px 8px 0 var(--ink) }
.wallet h3{ color:var(--lemon);font-size:36px }
.wallet .bal{ font-family:'Chewy',cursive;font-size:58px;color:var(--paper);margin:6px 0 4px }
.wallet .vendors{ display:flex;gap:6px;flex-wrap:wrap;margin-top:14px }
.wallet .v{ background:var(--paper);color:var(--ink);padding:6px 10px;border:2px solid var(--ink);font-weight:700;font-size:12px;border-radius:10px }

/* === NOTIFS / PHONE === */
.notifs{ display:grid;grid-template-columns:1fr 1fr;gap:24px }
.phone{ background:var(--tang);padding:10px;max-width:320px;margin:0 auto;border:4px solid var(--ink);border-radius:32px }
.phone .screen{ background:var(--paper);padding:12px;min-height:460px;border:3px solid var(--ink);border-radius:22px }
.push{ background:var(--paper);border:2px solid var(--ink);padding:10px 12px;margin-bottom:10px;border-radius:14px;border-left:6px solid var(--pink) }
.push .app{ font-size:10px;font-weight:700;color:var(--pink);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px }
.push .title{ font-weight:700;font-size:14px }
.push .body{ font-size:13px;margin-top:2px }
.sms{ background:var(--teal);border:2px solid var(--ink);padding:10px 12px;margin-bottom:10px;border-radius:14px }
.sms .from{ font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase }
.sub-actions{ display:flex;gap:8px;margin-top:8px }

/* === DASHBOARD === */
.dash{ display:grid;grid-template-columns:1.4fr 1fr;gap:24px }
.card{ background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:22px;border-radius:24px;box-shadow:5px 5px 0 var(--ink) }
.qrow{ display:grid;grid-template-columns:40px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:2px dotted var(--lav);font-size:13px }
.qrow:last-child{ border-bottom:0 }
.tok{ width:40px;height:40px;background:var(--lemon);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Chewy',cursive;border-radius:50% }
.stat{ font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;padding:3px 10px;border:2px solid var(--ink);background:var(--teal);border-radius:10px }
.stat.w{ background:var(--lemon) }
.stat.r{ background:var(--pink);color:var(--paper) }
.stat.d{ background:var(--cream) }
.tgl{ display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:2px dotted var(--lav);font-weight:700 }
.tgl:last-child{ border-bottom:0 }
.sw{ width:44px;height:24px;background:var(--cream);border:2px solid var(--ink);position:relative;border-radius:14px }
.sw.on{ background:var(--teal) }
.sw .knob{ position:absolute;top:1px;left:1px;width:18px;height:18px;background:var(--paper);border:2px solid var(--ink);border-radius:50% }
.sw.on .knob{ left:auto;right:1px }

/* === ORDER OPS === */
.ops-grid{ display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start }
.ticket-board{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px }
.ticket{ background:var(--paper);border:4px solid var(--ink);border-radius:22px;padding:16px;box-shadow:5px 5px 0 var(--ink) }
.ticket .top{ display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px }
.ticket .id{ font-family:'Chewy',cursive;font-size:28px;color:var(--tang);line-height:1 }
.ticket .meta{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.75 }
.ticket ul{ list-style:none;padding:0;margin:10px 0 0;font-size:13px;line-height:1.55 }
.ticket li{ border-top:2px dotted var(--lav);padding:6px 0 }
.ticket .actions{ display:flex;gap:6px;flex-wrap:wrap;margin-top:12px }
.make-board{ display:grid;grid-template-columns:repeat(2,1fr);gap:14px }
.make-card{ background:var(--paper);border:4px solid var(--ink);border-radius:22px;padding:16px;box-shadow:5px 5px 0 var(--ink) }
.make-card h3{ color:var(--ink);font-size:26px;display:flex;justify-content:space-between;gap:12px;align-items:baseline }
.make-card .count{ font-family:'Chewy',cursive;color:var(--tang);font-size:34px;line-height:1;white-space:nowrap }
.make-card .breakdown{ margin-top:10px;border-top:3px dotted var(--lav);padding-top:10px;font-size:13px;line-height:1.65 }
.make-card .breakdown div{ display:flex;justify-content:space-between;gap:10px }
.handoff-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px }
.handoff{ background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:14px;text-align:center;box-shadow:4px 4px 0 var(--ink) }
.handoff b{ font-family:'Chewy',cursive;color:var(--tang);font-size:26px;display:block }
.handoff span{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.75 }
.stock-meter{ height:16px;background:var(--cream);border:3px solid var(--ink);border-radius:12px;overflow:hidden;margin-top:8px }
.stock-meter i{ display:block;height:100%;background:var(--teal) }
.stock-meter.warn i{ background:var(--lemon) }
.stock-meter.danger i{ background:var(--pink) }

/* === PROMO CARDS === */
.promo{ display:grid;grid-template-columns:1fr 1fr;gap:24px }
.promo-card{ border:4px solid var(--ink);padding:26px;position:relative;border-radius:24px;box-shadow:8px 8px 0 var(--ink) }
.promo-card.cat{ background:var(--lemon);color:var(--ink) }
.promo-card.ch{ background:var(--teal);color:var(--ink) }
.promo-card.tg{ background:var(--tang);color:var(--paper) }
.promo-card.pk{ background:var(--pink);color:var(--paper) }
.promo-card h3{ font-size:36px;margin:6px 0 10px }
.promo-card.cat h3{ color:var(--pink) }
.promo-card.ch h3{ color:var(--ink) }
.promo-card.tg h3{ color:var(--lemon) }
.promo-card.pk h3{ color:var(--lemon) }
.promo-card .tag{ font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:11px;color:var(--pink) }
.promo-card.ch .tag{ color:var(--ink) }
.promo-card.tg .tag,.promo-card.pk .tag{ color:var(--lemon) }
.event-tile{ background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:14px;margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-radius:16px }
.stile{ text-align:center }
.stile .big{ font-family:'Chewy',cursive;font-size:34px;color:var(--tang) }
.stile .lbl{ font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.7 }

/* === DIRECTORY GRID (used by trucks.html, events.html) === */
.dir-filters{ display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;align-items:center }
.dir-filters label{ font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-right:4px }
.chip{ padding:8px 14px;border:3px solid var(--ink);background:var(--paper);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;border-radius:20px;cursor:pointer;text-decoration:none;color:var(--ink) }
.chip.sel{ background:var(--pink);color:var(--paper) }
.chip:hover{ background:var(--lemon) }

.dir-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px }
.tcard{ background:var(--paper);border:4px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column }
.tcard:hover{ transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink) }
.tcard .photo{ height:140px;background:var(--lemon);border-bottom:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:64px;position:relative }
.tcard .photo.pk{ background:var(--pink) }
.tcard .photo.tg{ background:var(--tang) }
.tcard .photo.tl{ background:var(--teal) }
.tcard .photo.lv{ background:var(--lav) }
.tcard .photo .badge-status{ position:absolute;top:10px;right:10px }
.tcard .body{ padding:18px }
.tcard h3{ font-size:24px;color:var(--ink);margin:0 0 4px }
.tcard .cuisine{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--pink) }
.tcard .where{ font-size:13px;margin-top:8px;color:var(--ink);opacity:.85 }
.tcard .row{ display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px }
.tcard .dist{ font-family:'Chewy',cursive;color:var(--tang);font-size:18px }

/* === EVENT TILE (events.html) === */
.ecard{ background:var(--paper);border:4px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column }
.ecard:hover{ transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink) }
.ecard .banner{ background:var(--pink);color:var(--paper);padding:18px;border-bottom:4px solid var(--ink);display:flex;justify-content:space-between;align-items:center }
.ecard .banner.tg{ background:var(--tang) }
.ecard .banner.tl{ background:var(--teal);color:var(--ink) }
.ecard .banner.lv{ background:var(--lav);color:var(--ink) }
.ecard .banner.lemon{ background:var(--lemon);color:var(--ink) }
.ecard .banner h3{ font-size:28px;color:inherit }
.ecard .banner .when{ background:var(--ink);color:var(--lemon);padding:4px 10px;font-weight:700;font-size:11px;letter-spacing:1.5px;border-radius:10px;text-transform:uppercase }
.ecard .body{ padding:18px }
.ecard .meta{ font-size:13px;line-height:1.5 }
.ecard .stats-row{ display:flex;gap:14px;margin-top:12px;font-size:12px }
.ecard .stats-row b{ font-family:'Chewy',cursive;font-size:22px;color:var(--tang);display:block }

/* === FORM === */
.form{ background:var(--paper);border:4px solid var(--ink);border-radius:24px;padding:28px;box-shadow:8px 8px 0 var(--ink) }
.field{ margin-bottom:18px }
.field label{ display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;color:var(--ink) }
.field input,.field select,.field textarea{ width:100%;padding:12px 14px;border:3px solid var(--ink);background:var(--cream);font-family:'Fredoka',sans-serif;font-size:15px;color:var(--ink);border-radius:14px;outline:none }
.field input:focus,.field select:focus,.field textarea:focus{ background:var(--lemon) }
.field .help{ font-size:11px;opacity:.7;margin-top:4px }
.field-row{ display:grid;grid-template-columns:1fr 1fr;gap:14px }

.checkbox{ display:flex;align-items:flex-start;gap:10px;font-size:13px;margin-bottom:10px }
.checkbox .box{ width:22px;height:22px;background:var(--paper);border:3px solid var(--ink);border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--pink) }
.checkbox.checked .box{ background:var(--lemon) }

/* === FEATURE BULLETS === */
.feat-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px }
.feat{ background:var(--paper);border:4px solid var(--ink);border-radius:20px;padding:18px;box-shadow:5px 5px 0 var(--ink) }
.feat .icn{ font-size:36px;display:block;margin-bottom:6px }
.feat h4{ font-size:20px;margin:0 0 6px }
.feat p{ font-size:13px;margin:0;line-height:1.5 }

/* === STATS BAR === */
.stats-bar{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 }
.stat-tile{ background:var(--paper);border:3px solid var(--ink);padding:16px;text-align:center;border-radius:18px }
.stat-tile b{ font-family:'Chewy',cursive;font-size:32px;color:var(--tang);display:block;line-height:1 }
.stat-tile .lbl{ font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px;opacity:.75 }

/* === BREADCRUMB === */
.crumbs{ font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.7;margin-bottom:14px }
.crumbs a{ color:var(--pink);text-decoration:none }
.crumbs a:hover{ text-decoration:underline }

/* === CHECK-IN WIDGET === */
.checkin{ background:var(--ink);color:var(--cream);padding:22px;border-radius:24px;box-shadow:8px 8px 0 var(--lemon);border:4px solid var(--ink) }
.checkin h3{ color:var(--lemon);font-size:28px;margin-bottom:6px }
.checkin .ci-bar{ height:14px;background:var(--cream);border:3px solid var(--lemon);border-radius:8px;overflow:hidden;margin:14px 0;position:relative }
.checkin .ci-bar i{ display:block;height:100%;background:var(--teal) }
.checkin .ci-actions{ display:grid;grid-template-columns:1fr 1fr;gap:8px }

/* === FOOTER === */
footer{ background:var(--ink);color:var(--cream);padding:40px 24px }
footer .foot-top{ max-width:1200px;margin:0 auto 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px }
.domains{ display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1200px;margin:0 auto }
.dom{ border:3px solid var(--pink);padding:14px;border-radius:16px }
.dom .d{ font-family:'Chewy',cursive;color:var(--lemon);font-size:24px;letter-spacing:1px }
.dom .t{ font-size:12px;opacity:.85;margin-top:4px }
footer .foot-links{ max-width:1200px;margin:24px auto 0;text-align:center;font-size:12px;opacity:.7 }
footer .foot-links a{ color:var(--lemon);text-decoration:none;margin:0 8px }

/* === RESPONSIVE === */
@media (max-width:900px){
  .hero,.near,.menu,.notifs,.dash,.promo,.domains,.wallet-grid,.modesel,.field-row,.feat-grid,.stats-bar,.ops-grid,.make-board,.handoff-grid{ grid-template-columns:1fr }
  .flow,.modes,.ticket-board{ grid-template-columns:1fr 1fr }
  .hero h1{ font-size:56px }
  .nav{ padding:14px 18px }
  .logo.brand-image{ width:190px }
  .nav-links{ width:100%;justify-content:center }
  .domain-switch{ display:none }
}
@media (max-width:560px){
  .flow,.modes,.stats-bar,.ticket-board{ grid-template-columns:1fr }
  .hero h1{ font-size:42px }
  .s-title h2{ font-size:34px }
}

/* === WORKFLOW DIAGRAM === */
.workflow{ display:grid;grid-template-columns:repeat(4,1fr);gap:18px }
.swim{ background:var(--paper);border:4px solid var(--ink);border-radius:24px;padding:18px;box-shadow:8px 8px 0 var(--ink);position:relative }
.swim h3{ font-size:24px;letter-spacing:1px;margin-bottom:10px }
.swim.visitor{ background:var(--teal) } .swim.visitor h3{ color:var(--ink) }
.swim.vendor{ background:var(--lemon) } .swim.vendor h3{ color:var(--ink) }
.swim.admin{ background:var(--tang);color:var(--paper) } .swim.admin h3{ color:var(--lemon) }
.swim.share{ background:var(--lav) } .swim.share h3{ color:var(--ink) }
.swim .lane-tag{ position:absolute;top:-14px;left:14px;background:var(--ink);color:var(--lemon);padding:4px 10px;font-family:'Chewy',cursive;font-size:14px;letter-spacing:2px;border-radius:10px;border:3px solid var(--ink) }

.flow-step{ background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:6px;text-decoration:none;display:block;box-shadow:3px 3px 0 var(--ink);font-size:13px;line-height:1.3 }
.flow-step:hover{ transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pink) }
.flow-step .num{ display:inline-block;background:var(--pink);color:var(--paper);font-family:'Chewy',cursive;font-size:11px;letter-spacing:1px;padding:1px 7px;border-radius:8px;margin-right:6px;border:2px solid var(--ink);vertical-align:middle }
.flow-step b{ display:block;font-size:14px;line-height:1.2 }
.flow-step .file{ font-size:10px;opacity:.6;font-family:monospace;letter-spacing:0;margin-top:2px;display:block }
.flow-arrow{ text-align:center;font-size:22px;color:var(--ink);font-weight:700;margin:2px 0 }
.flow-arrow.lemon{ color:var(--lemon) }
.flow-arrow.pink{ color:var(--pink) }

.cross-flow{ background:var(--ink);color:var(--cream);border-radius:24px;padding:24px;margin-top:18px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--pink) }
.cross-flow h3{ color:var(--lemon);font-size:28px;margin-bottom:14px }
.cross-flow .x-grid{ display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center }
.cross-flow .x-card{ background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:14px;text-align:center;text-decoration:none;display:block;box-shadow:4px 4px 0 var(--lemon) }
.cross-flow .x-card:hover{ transform:translate(-1px,-1px) }
.cross-flow .x-card b{ display:block;font-family:'Chewy',cursive;color:var(--pink);font-size:18px;letter-spacing:1px }
.cross-flow .x-card .file{ font-size:10px;opacity:.6;font-family:monospace;margin-top:4px;display:block }
.cross-flow .x-arrow{ font-size:36px;color:var(--lemon);font-weight:700;text-align:center }

@media (max-width:1100px){
  .workflow{ grid-template-columns:1fr 1fr }
  .cross-flow .x-grid{ grid-template-columns:1fr;gap:8px }
  .cross-flow .x-arrow{ transform:rotate(90deg) }
}
@media (max-width:560px){ .workflow{ grid-template-columns:1fr } }

/* === FUDCITO SKIN ===
   Latino-first sister brand. Same structure, warmer palette:
   marigold + salmon + lime cilantro + papel-picado pink. Apply
   by adding `class="fudcito"` to <body>. */
body.fudcito{
  --teal:#4FBF8A;          /* lime cilantro replaces teal */
  --pink:#E8456E;          /* papel-picado pink */
  --lemon:#F4B431;         /* deeper marigold */
  --tang:#E25822;          /* warm salmon-tang */
  --lav:#F4A8C4;           /* rosa pastel replaces lavender */
  --cream:#FFF6E0;         /* warmer cream */
  --ink:#2A1B23;           /* mole-dark ink */
  --paper:#FFFDF4;
}
body.fudcito .logo{ color:var(--tang) }
body.fudcito .logo .face{ background:var(--lemon) }
body.fudcito .hero h1 em{ color:var(--tang) }
body.fudcito .hero h1 .wob{ color:var(--pink) }

/* papel picado divider — flat shapes only */
.papel-picado{
  height:36px;background:var(--ink);
  display:flex;align-items:center;justify-content:space-around;padding:0 8px;
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)
}
.papel-picado .pp{
  width:42px;height:24px;background:var(--lemon);
  clip-path:polygon(0 0,100% 0,100% 60%,80% 100%,60% 60%,40% 100%,20% 60%,0 100%)
}
.papel-picado .pp.r{ background:var(--pink) }
.papel-picado .pp.g{ background:var(--teal) }
.papel-picado .pp.t{ background:var(--tang) }
.papel-picado .pp.v{ background:var(--lav) }

/* bilingual subtitle */
.bilingual{ font-size:13px;text-transform:uppercase;letter-spacing:3px;font-weight:700;color:var(--tang);margin-top:6px }
.bilingual em{ font-style:normal;color:var(--ink);opacity:.6;font-size:11px;letter-spacing:2px }