/* ==========================================================================
   FŪD KIT — hand-drawn UI kit extracted from the landing-v2 layout.

   Canonical source of the FudTruk visual language: tokens (colors, fonts,
   doodles, wobbly radii, ink shadows) + reusable `fk-` components.

   Usage: load this file BEFORE any page/skin stylesheet.
   Everything is namespaced (`--fk-*` vars, `.fk-*` classes) so it can be
   loaded into logged-in layouts alongside theme.css without collisions.

   Live style guide: /landing-v2/ui-kit.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* palette (sampled from approved landing art) */
  --fk-cream: #fdeed0;
  --fk-paper: #fff8e8;          /* lighter surface for inputs / table rows */
  --fk-ink: #151515;
  --fk-pink: #f38f9d;
  --fk-pink-deep: #e03b63;
  --fk-teal: #43b2a1;
  --fk-yellow: #f8b521;
  --fk-orange: #f96402;
  --fk-purple: #9a5fd0;
  --fk-night: #0f100f;          /* footer / dark surfaces */

  /* type */
  --fk-font-display: 'Luckiest Guy', cursive;
  --fk-font-body: 'Baloo 2', system-ui, sans-serif;

  /* hand-drawn doodle art, inline so no extra requests */
  --fk-doodle-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3 L25 15 L37 20 L25 25 L20 37 L15 25 L3 20 L15 15 Z' fill='%23f8b521' stroke='%23151515' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fk-doodle-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20 33 C6 22 2 13 8 7 C13 2 19 5 20 10 C21 5 27 2 32 7 C38 13 34 22 20 33 Z' fill='%23e03b63' stroke='%23151515' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fk-doodle-dashes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Cpath d='M5 22 L13 12 M14 26 L22 16 M23 29 L31 19' stroke='%23151515' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --fk-doodle-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M58 30 L40.5 37.6 L38.7 56.6 L26 42.4 L7.3 46.5 L17 30 L7.3 13.5 L26 17.6 L38.7 3.4 L40.5 22.4 Z' fill='%23f8b521' stroke='%23151515' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fk-doodle-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 32'%3E%3Cpath d='M4 20 Q20 12 38 16' stroke='%23151515' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M34 6 L54 16 L36 27 Z' fill='%23151515'/%3E%3C/svg%3E");
  --fk-brush-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 Q60 3 110 7 T216 6' stroke='%23151515' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --fk-brush-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 Q60 3 110 7 T216 6' stroke='%23e03b63' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --fk-doodle-scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50' preserveAspectRatio='none'%3E%3Cpath d='M14 30 C18 12 88 4 108 16 C120 24 104 42 58 45 C28 47 8 41 14 28 C19 16 78 8 100 14' stroke='%23151515' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --fk-doodle-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cpath d='M2 6 Q12 1 22 6 T42 6 T62 6 T82 6 T102 6 T122 6 T142 6 T162 6 T182 6 T202 6 T222 6 T238 6' stroke='%23151515' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --fk-doodle-gloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M3 9 Q9 2 23 3' stroke='white' stroke-opacity='.75' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* illustrated finish: paper grain, sketch hatching, rough "inked" edges */
  --fk-tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --fk-tex-hatch-ink: repeating-linear-gradient(-48deg, rgba(21, 21, 21, .035) 0 2px, transparent 2px 10px);
  --fk-tex-hatch-light: repeating-linear-gradient(-48deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 10px);
  --fk-filter-rough: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6'/%3E%3C/filter%3E%3C/svg%3E#r");
  /* gentler wobble for interactive elements — long soft waves, no chop */
  --fk-filter-rough-subtle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='rs'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='1' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.5'/%3E%3C/filter%3E%3C/svg%3E#rs");

  /* hand-drawn banner ribbons (swallowtail ends + fold shadows) */
  --fk-banner-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 90' preserveAspectRatio='none'%3E%3Cpath d='M40 24 L8 17 L21 44 L8 71 L40 64 Z' fill='%23e39c0e' stroke='%23151515' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M320 24 L352 17 L339 44 L352 71 L320 64 Z' fill='%23e39c0e' stroke='%23151515' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M40 24 L54 32 L40 40 Z' fill='%23a86f08'/%3E%3Cpath d='M320 24 L306 32 L320 40 Z' fill='%23a86f08'/%3E%3Cpath d='M37 19 Q108 10 180 13 Q252 10 323 18 L325 65 Q250 76 179 73 Q106 76 35 66 Z' fill='%23f8b521' stroke='%23151515' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fk-banner-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 90' preserveAspectRatio='none'%3E%3Cpath d='M40 24 L8 17 L21 44 L8 71 L40 64 Z' fill='%23b52c4e' stroke='%23151515' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M320 24 L352 17 L339 44 L352 71 L320 64 Z' fill='%23b52c4e' stroke='%23151515' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M40 24 L54 32 L40 40 Z' fill='%237d1e36'/%3E%3Cpath d='M320 24 L306 32 L320 40 Z' fill='%237d1e36'/%3E%3Cpath d='M37 19 Q108 10 180 13 Q252 10 323 18 L325 65 Q250 76 179 73 Q106 76 35 66 Z' fill='%23e03b63' stroke='%23151515' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* wobbly "drawn with a marker" corner sets */
  --fk-wobble-box: 26px 20px 24px 18px / 20px 26px 18px 24px;
  --fk-wobble-card: 30px 22px 28px 20px / 22px 30px 20px 28px;
  --fk-wobble-pill: 30px 26px 32px 24px / 26px 32px 24px 30px;
  --fk-wobble-tight: 14px 11px 13px 10px / 11px 14px 10px 13px;
  --fk-wobble-blob: 48% 52% 46% 54% / 54% 46% 52% 48%;

  /* ink outlines + offset hard shadows */
  --fk-line: 3px solid var(--fk-ink);
  --fk-line-thin: 2px solid var(--fk-ink);
  --fk-shadow-panel: 4px 5px 0 var(--fk-ink);
  --fk-shadow-btn: 3px 4px 0 var(--fk-ink);
  --fk-shadow-sm: 2px 2.5px 0 var(--fk-ink);
  --fk-focus-ring: 0 0 0 3px rgba(224, 59, 99, .35);
}

/* --------------------------------------------------------------------------
   2. BASE HELPERS
   -------------------------------------------------------------------------- */
.fk-display { font-family: var(--fk-font-display); letter-spacing: .02em; line-height: 1; filter: var(--fk-filter-rough-subtle); }
.fk-tilt-l { transform: rotate(-.4deg); }
.fk-tilt-r { transform: rotate(.35deg); }
.fk-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* display heading with a pink brush underline (hero "Love it!" treatment) */
.fk-underline { position: relative; display: inline-block; }
.fk-underline::after {
  content: ""; position: absolute; left: 0; right: 8%; bottom: -.18em; height: .16em;
  background: var(--fk-brush-pink) center / 100% 100% no-repeat; transform: rotate(-1.6deg);
}
.fk-underline--ink::after { background-image: var(--fk-brush-ink); }

/* rough hand-inked edges — text and borders wobble like a marker drawing.
   Applied to short-text components by default; use .fk-rough anywhere else. */
.fk-rough { filter: var(--fk-filter-rough); }

/* scribble-circled emphasis ("chef's pick!") */
.fk-circled { position: relative; z-index: 0; display: inline-block; padding: 2px 10px; }
.fk-circled::after {
  content: ""; position: absolute; inset: -6px -12px; z-index: -1;
  background: var(--fk-doodle-scribble) center / 100% 100% no-repeat;
}

/* hand-drawn squiggle divider */
.fk-hr {
  border: 0; height: 12px; margin: 22px 0;
  background: var(--fk-doodle-squiggle) left center / 240px 12px repeat-x;
  opacity: .8;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.fk-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--fk-font-body); font-weight: 800; text-transform: uppercase;
  font-size: 16px; letter-spacing: .02em; text-decoration: none;
  padding: 12px 28px; border-radius: var(--fk-wobble-pill);
  border: var(--fk-line); box-shadow: 4px 6px 0 var(--fk-ink);
  background: var(--fk-cream); color: var(--fk-ink);
  cursor: pointer; transition: transform .08s ease, box-shadow .08s ease;
  white-space: nowrap; transform: rotate(-.5deg);
  filter: var(--fk-filter-rough-subtle);
}
/* sticker-gloss shine — the "this is pushable" comic cue */
.fk-btn::before {
  content: ""; position: absolute; top: 4px; left: 12px; width: 22px; height: 10px;
  background: var(--fk-doodle-gloss) center / contain no-repeat; pointer-events: none;
}
.fk-btn:hover { transform: translate(2px, 3px) rotate(-.5deg); box-shadow: 2px 3px 0 var(--fk-ink); }
.fk-btn:active { transform: translate(4px, 6px) rotate(-.5deg); box-shadow: 0 0 0 var(--fk-ink); }
.fk-btn:focus-visible { outline: none; box-shadow: 4px 6px 0 var(--fk-ink), var(--fk-focus-ring); }
.fk-btn:disabled, .fk-btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--fk-shadow-sm);
}
.fk-btn:disabled::before, .fk-btn--xs::before { display: none; }
.fk-btn--pink   { background: var(--fk-pink-deep); color: #fff; }
.fk-btn--teal   { background: var(--fk-teal); color: #fff; }
.fk-btn--yellow { background: var(--fk-yellow); color: var(--fk-ink); }
.fk-btn--purple { background: var(--fk-purple); color: #fff; }
.fk-btn--ink    { background: var(--fk-ink); color: var(--fk-cream); }
.fk-btn--sm { padding: 9px 22px; font-size: 14px; }
.fk-btn--xs { padding: 5px 14px; font-size: 12.5px; box-shadow: var(--fk-shadow-sm); }

/* --------------------------------------------------------------------------
   4. PANELS & CARDS
   -------------------------------------------------------------------------- */
.fk-panel {
  position: relative; background: var(--fk-cream); color: var(--fk-ink);
  background-image: var(--fk-tex-hatch-ink), var(--fk-tex-grain);
  border: var(--fk-line); border-radius: var(--fk-wobble-box);
  box-shadow: var(--fk-shadow-panel); padding: 24px 28px;
  /* second "traced" pen line just inside the border */
  outline: 2px solid rgba(21, 21, 21, .22); outline-offset: -8px;
  filter: var(--fk-filter-rough-subtle);
}
.fk-panel--card { border-radius: var(--fk-wobble-card); }
.fk-panel--pink   { background-color: var(--fk-pink); background-image: var(--fk-tex-hatch-light), var(--fk-tex-grain); }
.fk-panel--teal   { background-color: var(--fk-teal); background-image: var(--fk-tex-hatch-light), var(--fk-tex-grain); }
.fk-panel--yellow { background-color: var(--fk-yellow); background-image: var(--fk-tex-hatch-light), var(--fk-tex-grain); }
.fk-panel--paper  { background-color: var(--fk-paper); }

/* chalkboard — the food-truck specials board (dark slate, chalk lines) */
.fk-chalkboard {
  position: relative; background: #232a26; color: #f5efe2;
  background-image: var(--fk-tex-grain);
  border: 10px solid #8a5a33; border-radius: 10px 8px 11px 9px / 9px 11px 8px 10px;
  outline: 2px dashed rgba(245, 239, 226, .5); outline-offset: -10px;
  box-shadow: var(--fk-shadow-panel); padding: 26px 30px;
  filter: var(--fk-filter-rough-subtle);
}
.fk-chalkboard .fk-chalk-title {
  font-family: var(--fk-font-display); font-size: 30px; letter-spacing: .05em;
  color: var(--fk-yellow); text-shadow: 2px 2px 0 rgba(0, 0, 0, .4); margin-bottom: 12px;
}
.fk-chalkboard .fk-chalk-line {
  display: flex; align-items: baseline; gap: 12px; font-weight: 700; padding: 6px 0;
}
.fk-chalkboard .fk-chalk-line .dots {
  flex: 1; border-bottom: 2px dotted rgba(245, 239, 226, .55); transform: translateY(-4px);
}
.fk-chalkboard .fk-chalk-price { font-family: var(--fk-font-display); color: var(--fk-pink); font-size: 20px; }

/* corner doodles for panels (opt-in) */
.fk-panel--doodled::before {
  content: ""; position: absolute; top: -18px; left: -12px; width: 34px; height: 34px;
  background: var(--fk-doodle-star) center / contain no-repeat; transform: rotate(-14deg);
}
.fk-panel--doodled::after {
  content: ""; position: absolute; top: -20px; right: -8px; width: 30px; height: 26px;
  background: var(--fk-doodle-dashes) center / contain no-repeat;
}

/* section heading banner — hand-drawn ribbon with swallowtail ends */
.fk-ribbon {
  display: inline-block; position: relative; color: var(--fk-ink);
  background: var(--fk-banner-yellow) center / 100% 100% no-repeat;
  font-family: var(--fk-font-display); font-size: 28px; letter-spacing: .05em;
  padding: 15px 64px 22px; white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .14); transform: rotate(-1.4deg);
}
.fk-ribbon--pink { background-image: var(--fk-banner-pink); color: var(--fk-cream); }
/* absolutely centered over the top edge of a .fk-panel (landing style) */
.fk-ribbon--over { position: absolute; top: -44px; left: 50%; transform: translateX(-50%) rotate(-1.4deg); z-index: 2; }

/* dashboard stat card */
.fk-stat { text-align: center; padding: 18px 16px; }
.fk-stat .fk-stat-num {
  font-family: var(--fk-font-display); font-size: 42px; line-height: 1;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .1);
}
.fk-stat .fk-stat-label {
  text-transform: uppercase; font-weight: 800; font-size: 13px; letter-spacing: .04em; margin-top: 6px;
}

/* --------------------------------------------------------------------------
   5. CHIPS, BADGES, DOODLES
   -------------------------------------------------------------------------- */
/* irregular hand-drawn circle (step numbers, counts, avatars) */
.fk-chip {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--fk-wobble-blob); border: 2.5px solid var(--fk-ink);
  background: var(--fk-pink-deep); color: #fff; font-weight: 800; font-size: 15px;
  transform: rotate(-6deg); box-shadow: 1.5px 2px 0 var(--fk-ink);
  filter: var(--fk-filter-rough-subtle);
}
.fk-chip--teal   { background: var(--fk-teal); }
.fk-chip--yellow { background: var(--fk-yellow); color: var(--fk-ink); }
.fk-chip--purple { background: var(--fk-purple); }
.fk-chip--r { transform: rotate(5deg); }

/* small status pill (order states, plan tiers, etc.) */
.fk-badge {
  display: inline-block; padding: 3px 12px 4px; border-radius: var(--fk-wobble-pill);
  border: var(--fk-line-thin); box-shadow: 1.5px 2px 0 var(--fk-ink);
  font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
  background: var(--fk-paper); color: var(--fk-ink); transform: rotate(-.6deg);
  filter: var(--fk-filter-rough-subtle);
}
.fk-badge--pink   { background: var(--fk-pink-deep); color: #fff; }
.fk-badge--teal   { background: var(--fk-teal); color: #fff; }
.fk-badge--yellow { background: var(--fk-yellow); }
.fk-badge--ink    { background: var(--fk-ink); color: var(--fk-cream); }

/* standalone doodle sprites — set width/height inline or via context */
.fk-doodle { display: inline-block; width: 30px; height: 30px; background: center / contain no-repeat; }
.fk-doodle--star   { background-image: var(--fk-doodle-star); transform: rotate(-14deg); }
.fk-doodle--heart  { background-image: var(--fk-doodle-heart); transform: rotate(-10deg); }
.fk-doodle--dashes { background-image: var(--fk-doodle-dashes); }
.fk-doodle--burst  { background-image: var(--fk-doodle-burst); transform: rotate(12deg); }
.fk-doodle--arrow  { background-image: var(--fk-doodle-arrow); width: 46px; height: 26px; transform: rotate(-3deg); }

/* --------------------------------------------------------------------------
   6. FORMS
   -------------------------------------------------------------------------- */
.fk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.fk-label {
  font-weight: 800; text-transform: uppercase; font-size: 13.5px; letter-spacing: .03em;
}
.fk-input, .fk-select, .fk-textarea {
  font-family: var(--fk-font-body); font-size: 16px; font-weight: 600;
  padding: 11px 18px; background: var(--fk-paper); color: var(--fk-ink);
  border: var(--fk-line); border-radius: var(--fk-wobble-tight); outline: none; width: 100%;
  filter: var(--fk-filter-rough-subtle);
}
.fk-textarea { min-height: 96px; resize: vertical; }
.fk-input:focus, .fk-select:focus, .fk-textarea:focus { box-shadow: var(--fk-focus-ring); }
.fk-input[aria-invalid="true"], .fk-input.fk-invalid { border-color: var(--fk-pink-deep); }
.fk-help { font-size: 13.5px; font-weight: 600; opacity: .75; }
.fk-error-text { font-size: 13.5px; font-weight: 700; color: var(--fk-pink-deep); }
.fk-checkbox { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.fk-checkbox input { width: 20px; height: 20px; accent-color: var(--fk-pink-deep); }

/* joined input + button (newsletter treatment) */
.fk-join { display: flex; }
.fk-join .fk-input {
  border-right: 0; border-radius: 18px 0 0 14px / 22px 0 0 16px;
}
.fk-join .fk-join-btn {
  font-family: var(--fk-font-body); font-weight: 800; text-transform: uppercase; font-size: 15px;
  padding: 11px 24px; background: var(--fk-pink-deep); color: #fff;
  border: var(--fk-line); border-radius: 0 16px 20px 0 / 0 20px 14px 0; cursor: pointer;
  white-space: nowrap; box-shadow: 3px 3px 0 var(--fk-ink);
}
.fk-join .fk-join-btn:hover { filter: brightness(1.08); }

/* --------------------------------------------------------------------------
   7. TABLES
   -------------------------------------------------------------------------- */
.fk-table-wrap { overflow-x: auto; }
.fk-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--fk-paper); border: var(--fk-line);
  border-radius: var(--fk-wobble-tight); box-shadow: var(--fk-shadow-panel);
  font-size: 15.5px;
  filter: var(--fk-filter-rough-subtle);
}
.fk-table th {
  background: var(--fk-yellow); text-transform: uppercase; font-size: 13px;
  letter-spacing: .04em; font-weight: 800; text-align: left;
  padding: 11px 16px; border-bottom: var(--fk-line);
}
.fk-table td { padding: 11px 16px; border-bottom: 2px dashed rgba(21, 21, 21, .25); font-weight: 600; }
.fk-table tr:last-child td { border-bottom: 0; }
.fk-table tbody tr:hover { background: var(--fk-cream); }
.fk-table th:first-child { border-top-left-radius: 12px; }
.fk-table th:last-child { border-top-right-radius: 9px; }

/* --------------------------------------------------------------------------
   8. NAV PILLS / TABS
   -------------------------------------------------------------------------- */
.fk-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.fk-tab {
  display: inline-block; padding: 8px 20px; text-decoration: none;
  font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .02em;
  border: var(--fk-line-thin); border-radius: var(--fk-wobble-pill);
  background: var(--fk-paper); color: var(--fk-ink); box-shadow: var(--fk-shadow-sm);
  transform: rotate(-.4deg); filter: var(--fk-filter-rough-subtle);
}
.fk-tab:nth-child(even) { transform: rotate(.4deg); }
.fk-tab:hover { background: var(--fk-cream); }
.fk-tab.is-active, .fk-tab[aria-current] {
  background: var(--fk-pink-deep); color: #fff; box-shadow: var(--fk-shadow-btn);
}

/* --------------------------------------------------------------------------
   9. ALERTS / FLASH MESSAGES
   -------------------------------------------------------------------------- */
.fk-alert {
  position: relative; display: flex; align-items: center; gap: 14px;
  border: var(--fk-line); border-radius: var(--fk-wobble-tight);
  box-shadow: var(--fk-shadow-sm); padding: 13px 18px;
  font-weight: 700; background: var(--fk-paper); transform: rotate(-.25deg);
  margin-bottom: 16px;
  filter: var(--fk-filter-rough-subtle);
}
.fk-alert::before {
  content: ""; flex-shrink: 0; width: 26px; height: 26px;
  background: var(--fk-doodle-star) center / contain no-repeat;
}
.fk-alert--success { background: #d8f0e9; }
.fk-alert--success::before { background-image: var(--fk-doodle-star); }
.fk-alert--error { background: #fbdbe2; }
.fk-alert--error::before { background-image: var(--fk-doodle-heart); filter: grayscale(.2); }
.fk-alert--warn { background: #fdeab8; }
.fk-alert--warn::before { background-image: var(--fk-doodle-burst); }

/* --------------------------------------------------------------------------
   10. DENSE MODE — logged-in / admin screens
   Wrap a work surface in .fk-dense to tighten everything: smaller type,
   tighter padding, calmer tilts. Playfulness stays in color + ink lines.
   -------------------------------------------------------------------------- */
.fk-dense { font-size: 14.5px; }
.fk-dense .fk-btn { padding: 7px 16px; font-size: 13px; box-shadow: var(--fk-shadow-sm); transform: none; }
.fk-dense .fk-btn::before { display: none; }
.fk-dense .fk-btn:hover { transform: translate(1px, 1.5px); box-shadow: 1px 1px 0 var(--fk-ink); }
.fk-dense .fk-panel { padding: 14px 16px; border-radius: var(--fk-wobble-tight); box-shadow: var(--fk-shadow-sm); }
.fk-dense .fk-ribbon { font-size: 17px; padding: 9px 40px 14px; }
.fk-dense .fk-field { margin-bottom: 10px; gap: 4px; }
.fk-dense .fk-input, .fk-dense .fk-select, .fk-dense .fk-textarea { padding: 7px 12px; font-size: 14px; }
.fk-dense .fk-label { font-size: 12px; }
.fk-dense .fk-table { font-size: 13.5px; box-shadow: var(--fk-shadow-sm); }
.fk-dense .fk-table th { padding: 7px 12px; font-size: 11.5px; }
.fk-dense .fk-table td { padding: 7px 12px; }
.fk-dense .fk-tab { padding: 5px 14px; font-size: 12.5px; transform: none; }
.fk-dense .fk-alert { padding: 9px 14px; transform: none; }
.fk-dense .fk-stat .fk-stat-num { font-size: 30px; }
.fk-dense .fk-chip { width: 26px; height: 26px; font-size: 13px; }
/* crisp edges for work surfaces — the illustrated wobble stays on public pages */
.fk-dense .fk-btn, .fk-dense .fk-badge, .fk-dense .fk-chip,
.fk-dense .fk-tab, .fk-dense .fk-ribbon, .fk-dense .fk-display,
.fk-dense .fk-table, .fk-dense .fk-alert, .fk-dense .fk-chalkboard,
.fk-dense .fk-input, .fk-dense .fk-select, .fk-dense .fk-textarea { filter: none; }
.fk-dense .fk-panel { outline: none; background-image: var(--fk-tex-grain); filter: none; }