/* ============================================================================
   SCRIBBLE THEME — "MS-paint mouse-drawn"
   ----------------------------------------------------------------------------
   Hand-drawn skin over the OG Sluice layout. Activated via body.scribble.
   - White paper background with subtle dot grain
   - Caveat / Patrick Hand fonts everywhere
   - SVG turbulence wobble filter embedded as a data: URL so every border,
     shape and stroke renders shaky like it was drawn with a mouse
   - Crayon palette: pink / blue / green / yellow on white
   - Slight per-card tilt for that "I drew this in MS Paint" energy
   ============================================================================ */

body.scribble {
  --paper:     #fffdf5;
  --paper-2:   #fff5d4;
  --paper-3:   #fff0c2;
  --ink:       #1a1a1a;
  --ink-soft:  #555;
  --ink-faint: #888;
  --crayon-pink:   #ff8ec7;
  --crayon-pink-2: #ff5e94;
  --crayon-blue:   #5fb8ff;
  --crayon-blue-2: #3a9eff;
  --crayon-green:  #5cd685;
  --crayon-green-2:#2d7a40;
  --crayon-yellow: #ffec99;
  --crayon-yellow-2:#ffd43b;
  --crayon-red:    #ff5e5e;
  --crayon-red-2:  #cc3333;
  --crayon-purple: #c266ff;
  --crayon-orange: #ffa94d;

  /* Override Sluice tokens with paper-and-ink */
  --bg-deep:      var(--paper) !important;
  --bg-primary:   var(--paper) !important;
  --bg-card:      var(--paper) !important;
  --bg-elevated:  var(--paper-2) !important;
  --bg-hover:     var(--paper-2) !important;
  --border:       var(--ink) !important;
  --border-subtle: rgba(26,26,26,0.18) !important;
  --text-primary:   var(--ink) !important;
  --text-secondary: var(--ink-soft) !important;
  --text-muted:     var(--ink-faint) !important;
  --accent:        var(--crayon-pink-2) !important;
  --accent-bright: var(--crayon-pink) !important;
  --accent-dim:    rgba(255,142,199,0.18) !important;
  --accent-glow:   rgba(255,142,199,0.35) !important;
  --green:    var(--crayon-green-2) !important;
  --green-dim:rgba(45,122,64,0.14) !important;
  --red:      var(--crayon-red-2) !important;
  --red-dim:  rgba(204,51,51,0.14) !important;
  --yellow:   var(--crayon-yellow-2) !important;

  --font-script: 'Caveat', cursive;
  --font-print:  'Patrick Hand', cursive;
  --font-arch:   'Architects Daughter', cursive;
  --font-mono:   'JetBrains Mono', monospace;
  /* Heavyweight marker font for display-scale text. Caveat is a flowing
     script and looks spindly when blown up next to the wobble filter —
     Permanent Marker holds its weight and reads as actually drawn with a
     marker. Use --font-marker for tickers, MC pills, action buttons,
     section headers, the wordmark. Keep --font-script for smaller
     handwriting. */
  --font-marker: 'Permanent Marker', 'Caveat Brush', 'Caveat', cursive;

  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-print), cursive !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Apply hand-drawn fonts to most elements */
body.scribble,
body.scribble input,
body.scribble button,
body.scribble textarea,
body.scribble select,
body.scribble div,
body.scribble span:not([class*="mono"]),
body.scribble a {
  font-family: var(--font-print), cursive;
}
body.scribble * { font-feature-settings: normal; }

/* Paper texture: subtle dot grain */
body.scribble::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.018) 1px, transparent 1px);
  background-size: 16px 16px, 9px 9px;
  background-position: 0 0, 8px 8px;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
body.scribble::after { display: none !important; }

/* Cancel Sluice's dark accent glows */
body.scribble {
  background-image: none !important;
}

/* ─── Reusable wobble filter as a data URL ──────────────────────────────
   We bake an SVG filter into a CSS variable so any element can reference it
   with `filter: var(--wobble)`. The turbulence + displacement makes
   straight edges look hand-drawn. */
body.scribble {
  --wobble: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='w' x='-5%25' y='-5%25' width='110%25' height='110%25'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='3' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.4'/></filter></svg>#w");
  --wobble-strong: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='w' x='-5%25' y='-5%25' width='110%25' height='110%25'><feTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='2' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='3.4'/></filter></svg>#w");
  --wobble-soft:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='w' x='-5%25' y='-5%25' width='110%25' height='110%25'><feTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='3' seed='11' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='1.6'/></filter></svg>#w");
}

/* ─── App shell ────────────────────────────────────────────────────────── */
body.scribble .app {
  background: transparent !important;
}

/* ─── TOPBAR ───────────────────────────────────────────────────────────── */
body.scribble .topbar {
  background: transparent !important;
  border-bottom: none !important;
  position: relative;
}

/* ─── BRAND: replace Sluice droplet + wordmark with scribble terminal ─────
   Hide the original sluice SVG + "Sluice" text. Synthesize "scribble terminal"
   as a hand-lettered Caveat wordmark with a small wobbly brain icon (the
   scribble-app mark from the design handoff). */
body.scribble .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
}
body.scribble .brand .brand-icon > svg { display: none !important; }
/* Hand-drawn trading-chart icon: black L-axis, jagged ink trendline rising
   to a pink dot, with a yellow-highlighter swipe under the climb and two
   crayon dots at the inflection points. Reads as "scribble + chart going
   up" at any size. The wobble filter is intentional — straight lines look
   wrong on this theme. */
body.scribble .brand .brand-icon {
  width: 38px !important;
  height: 38px !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><defs><filter id='w' x='-10%25' y='-10%25' width='120%25' height='120%25'><feTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='2' seed='9' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.6'/></filter></defs><g filter='url(%23w)'><path d='M5 38 L 13 30 L 18 33 L 24 24 L 30 18 L 38 6' stroke='%23ffec99' stroke-width='5.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'/><path d='M5 5 L 5 39 L 40 39' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round'/><path d='M5 38 L 13 30 L 18 33 L 24 24 L 30 18 L 38 6' stroke='%231a1a1a' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/><circle cx='13' cy='30' r='2.2' fill='%235fb8ff' stroke='%231a1a1a' stroke-width='1.2'/><circle cx='24' cy='24' r='2.2' fill='%235cd685' stroke='%231a1a1a' stroke-width='1.2'/><circle cx='38' cy='6'  r='3.2' fill='%23ff5e94' stroke='%231a1a1a' stroke-width='1.6'/></g></svg>")
    center/contain no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  transform: rotate(-2deg);
}
body.scribble .brand-name {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px;
  text-transform: none !important;
}
body.scribble .brand-name::before {
  content: "scribble";
  font-family: 'Caveat', cursive !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  text-transform: lowercase !important;
  line-height: 1 !important;
  transform: rotate(-1deg);
  display: inline-block;
}
body.scribble .brand-name::after {
  content: "terminal";
  font-family: 'Patrick Hand', cursive !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--ink-soft) !important;
  text-transform: lowercase !important;
  line-height: 1 !important;
  transform: rotate(0.6deg);
  display: inline-block;
}
body.scribble .brand-tag { display: none !important; }
@media (max-width: 800px) {
  body.scribble .brand-name { display: inline-flex !important; }
  body.scribble .brand-name::before { font-size: 22px !important; }
  body.scribble .brand-name::after  { font-size: 14px !important; }
}

body.scribble .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'><path d='M0 2 Q 25 0.5 50 2 T 100 2 T 150 2.5 T 200 2' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 200px 4px;
  pointer-events: none;
}

body.scribble .topbar-logo,
body.scribble .topbar-title,
body.scribble .topbar-brand {
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  font-size: 28px !important;
  transform: rotate(-1deg);
}
body.scribble .topbar-nav a,
body.scribble .topbar-link,
body.scribble .nav-link {
  font-family: var(--font-script) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  text-transform: lowercase !important;
}
body.scribble .topbar-nav a.active,
body.scribble .topbar-link.active,
body.scribble .nav-link.active {
  color: var(--crayon-pink-2) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: var(--crayon-pink-2) !important;
  text-underline-offset: 4px !important;
}

/* Topbar buttons / inputs */
body.scribble .topbar input,
body.scribble .topbar button,
body.scribble .topbar [class*="btn"] {
  background: #fff !important;
  border: 2.2px solid var(--ink) !important;
  border-radius: 22px !important;
  color: var(--ink) !important;
  font-family: var(--font-print) !important;
  filter: var(--wobble);
  box-shadow: none !important;
}
body.scribble .topbar input:focus {
  outline: none !important;
  border-color: var(--crayon-blue) !important;
}

body.scribble .topbar [class*="btn"]:hover {
  background: var(--crayon-yellow) !important;
}

/* Connect / wallet button — yellow scribble pill */
body.scribble #connect-btn,
body.scribble [data-connect],
body.scribble .topbar-connect {
  background: var(--crayon-yellow) !important;
  border: 2.5px solid var(--ink) !important;
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* ─── Token strip / scrolling ticker ──────────────────────────────────── */
body.scribble .token-strip,
body.scribble .scroll-strip,
body.scribble .ticker-strip,
body.scribble [class*="ticker"] {
  background: transparent !important;
  border: none !important;
  position: relative;
}

body.scribble .token-strip-item,
body.scribble [class*="ticker-item"] {
  font-family: var(--font-script) !important;
  font-size: 17px !important;
  color: var(--ink) !important;
}

/* ─── PULSE COLUMNS (the 3 lanes) ─────────────────────────────────────── */
body.scribble .pulse-col {
  background: var(--paper) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 8px !important;
  filter: var(--wobble);
  position: relative;
  margin: 4px;
}
body.scribble .pulse-col + .pulse-col {
  /* slight tilt */
}
body.scribble #pulse-col-new        { transform: rotate(-0.3deg); }
body.scribble #pulse-col-graduating { transform: rotate(0.2deg); }
body.scribble #pulse-col-migrated   { transform: rotate(-0.2deg); }

/* Lane header */
body.scribble .pulse-col-header {
  background: transparent !important;
  border-bottom: none !important;
  color: var(--ink) !important;
  position: relative;
  padding: 14px 14px 10px !important;
}
/* Wavy underline under each header */
body.scribble .pulse-col-header::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'><path d='M0 2 Q 25 0.5 50 2 T 100 2 T 150 2.5 T 200 2' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 200px 4px;
  pointer-events: none;
}

body.scribble .pulse-col-title {
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  text-transform: lowercase !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
/* Crayon dot before each title — different color per lane */
body.scribble .pulse-col-title::before {
  content: "";
  display: inline-block;
  width: 16px !important; height: 16px !important;
  background: var(--crayon-pink) !important;
  border: 2px solid var(--ink);
  border-radius: 50% !important;
  filter: var(--wobble);
  margin-right: 4px;
  flex-shrink: 0;
  align-self: center;
  animation: none !important;
}
body.scribble #pulse-col-new .pulse-col-title::before        { background: var(--crayon-pink) !important; }
body.scribble #pulse-col-graduating .pulse-col-title::before { background: var(--crayon-blue) !important; }
body.scribble #pulse-col-migrated .pulse-col-title::before   { background: var(--crayon-green) !important; }

body.scribble .pulse-col-count {
  font-family: var(--font-print) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  padding: 1px 10px !important;
  filter: var(--wobble);
}

body.scribble .pulse-col-list {
  padding: 12px !important;
  gap: 10px !important;
  background: transparent !important;
}

/* ─── HEADER CONTROLS (search, presets) ──────────────────────────────── */
body.scribble .pulse-header-controls {
  border-bottom: none !important;
  position: relative;
  padding: 8px 14px 10px !important;
}
body.scribble .pulse-header-controls::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'><path d='M0 2 Q 25 0.5 50 2 T 100 2 T 150 2.5 T 200 2' fill='none' stroke='%231a1a1a' stroke-width='1.2' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 200px 4px;
  pointer-events: none;
  opacity: .5;
}

body.scribble .pulse-search-input {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 22px !important;
  color: var(--ink) !important;
  font-family: var(--font-print) !important;
  font-size: 14px !important;
  filter: var(--wobble);
  padding: 5px 12px !important;
}
body.scribble .pulse-search-input::placeholder {
  color: var(--ink-faint) !important;
  font-family: var(--font-print) !important;
  font-style: italic;
}
body.scribble .pulse-search-input:focus {
  outline: none !important;
  border-color: var(--crayon-blue) !important;
}

/* Filter / preset buttons — small wobbly pills */
body.scribble .pulse-preset-btn,
body.scribble .pulse-filter-btn,
body.scribble .pulse-icon-btn {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 18px !important;
  color: var(--ink) !important;
  font-family: var(--font-print) !important;
  filter: var(--wobble);
  box-shadow: none !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
}
body.scribble .pulse-preset-btn:hover,
body.scribble .pulse-filter-btn:hover,
body.scribble .pulse-icon-btn:hover {
  background: var(--crayon-yellow) !important;
  color: var(--ink) !important;
}
body.scribble .pulse-preset-btn.active,
body.scribble .pulse-filter-btn.active {
  background: var(--crayon-yellow-2) !important;
  color: var(--ink) !important;
}

/* ─── PULSE CARDS ────────────────────────────────────────────────────── */
body.scribble .pulse-card {
  background: #fffdf5 !important;
  border: 2.3px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  filter: var(--wobble);
  padding: 12px !important;
  position: relative;
  transition: transform .15s, background .15s !important;
}
/* Per-card tilt — pseudo-random based on nth-child so it's stable */
body.scribble .pulse-col-list > .pulse-card:nth-child(7n)   { transform: rotate(-0.5deg); }
body.scribble .pulse-col-list > .pulse-card:nth-child(7n+1) { transform: rotate(0.4deg); }
body.scribble .pulse-col-list > .pulse-card:nth-child(7n+2) { transform: rotate(-0.2deg); }
body.scribble .pulse-col-list > .pulse-card:nth-child(7n+3) { transform: rotate(0.6deg); }
body.scribble .pulse-col-list > .pulse-card:nth-child(7n+4) { transform: rotate(-0.4deg); }
body.scribble .pulse-col-list > .pulse-card:nth-child(7n+5) { transform: rotate(0.3deg); }
body.scribble .pulse-col-list > .pulse-card:nth-child(7n+6) { transform: rotate(-0.6deg); }

body.scribble .pulse-card:hover {
  background: var(--crayon-yellow) !important;
  transform: rotate(0deg) translate(-1px, -2px) !important;
  z-index: 5 !important;
}

/* ─── Token icon — circle stroke with wobble ─────────────────────────── */
body.scribble .pc-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: 2.5px solid var(--ink) !important;
  background: var(--paper-2) !important;
  filter: var(--wobble);
  box-shadow: none !important;
  font-family: var(--font-script) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  overflow: visible !important;
  position: relative;
}
body.scribble .pc-icon > img {
  border-radius: 50% !important;
  border: 1.5px solid var(--ink);
}
/* Crayon-colored fallback bg per platform */
body.scribble .pc-icon.border-pumpfun  { background: var(--crayon-green) !important; }
body.scribble .pc-icon.border-migrated { background: var(--crayon-blue) !important; }
body.scribble .pc-icon.border-meteora  { background: var(--crayon-purple) !important; }
body.scribble .pc-icon.border-printr   { background: var(--crayon-yellow-2) !important; }
body.scribble .pc-icon.border-mayhem   { background: var(--crayon-pink) !important; }

/* Platform badge — small wobbly circle in bottom-right */
body.scribble .pc-icon::after {
  content: "";
  position: absolute;
  bottom: -4px; right: -4px;
  width: 20px; height: 20px;
  border: 2px solid var(--ink);
  background: var(--crayon-pink) center/60% 60% no-repeat;
  border-radius: 50%;
  filter: var(--wobble);
  z-index: 2;
}
body.scribble .pc-icon.border-pumpfun::after  { background-color: var(--crayon-green); }
body.scribble .pc-icon.border-migrated::after { background-color: var(--crayon-blue); }
body.scribble .pc-icon.border-meteora::after  { background-color: var(--crayon-purple); }
body.scribble .pc-icon.border-printr::after   { background-color: var(--crayon-yellow-2); }
body.scribble .pc-icon.border-mayhem::after   { background-color: var(--crayon-pink); }

/* Ticker + age */
body.scribble .pc-ticker {
  font-family: var(--font-script) !important;
  color: var(--ink) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}
body.scribble .pc-age {
  font-family: var(--font-print) !important;
  color: var(--crayon-green-2) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.scribble .pc-age::before { content: "⏱ "; opacity: .8; }

/* MC — handwritten yellow highlighter pill */
body.scribble .pc-mc {
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: var(--crayon-yellow) !important;
  padding: 1px 8px !important;
  font-size: 19px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 6px !important;
  filter: var(--wobble);
  letter-spacing: -0.01em !important;
  line-height: 1.1;
}
/* Sluice paints pc-mc inline-style color based on value — override it */
body.scribble .pc-mc[style] { color: var(--ink) !important; }

body.scribble .pc-vol {
  font-family: var(--font-print) !important;
  color: var(--ink-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ─── BUY button ─────────────────────────────────────────────────────── */
body.scribble .pc-buy-btn {
  background: var(--crayon-green) !important;
  color: var(--ink) !important;
  border: 2.3px solid var(--ink) !important;
  border-radius: 22px !important;
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  filter: var(--wobble);
  box-shadow: none !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 18px !important;
}
body.scribble .pc-buy-btn .sol-logo { display: none !important; }
body.scribble .pc-buy-btn:hover {
  background: var(--crayon-green-2) !important;
  color: #fff !important;
  transform: translate(-1px, -1px);
}
body.scribble .pc-buy-btn:active {
  transform: translate(1px, 1px);
}

/* ─── Mobile tabs ────────────────────────────────────────────────────── */
body.scribble .pulse-tab {
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  background: #fff !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 18px !important;
  text-transform: lowercase !important;
  filter: var(--wobble);
  font-size: 17px !important;
}
body.scribble .pulse-tab.active {
  background: var(--crayon-yellow) !important;
  color: var(--ink) !important;
}

/* ─── Empty state ────────────────────────────────────────────────────── */
body.scribble .pulse-empty {
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  color: var(--ink-faint) !important;
  font-size: 28px !important;
  text-align: center;
  padding: 48px 16px !important;
}
body.scribble .pulse-empty::before {
  content: "¯\\_(ツ)_/¯";
  display: block;
  font-family: var(--font-print);
  font-size: 24px;
  margin-bottom: 8px;
}

/* ─── Scrollbars ─────────────────────────────────────────────────────── */
body.scribble ::-webkit-scrollbar { width: 10px; height: 10px; }
body.scribble ::-webkit-scrollbar-track { background: transparent; }
body.scribble ::-webkit-scrollbar-thumb {
  background: var(--ink) !important;
  border-radius: 999px !important;
  border: 2px solid var(--paper);
}

/* ─── Intro overlay ──────────────────────────────────────────────────── */
body.scribble #intro-overlay {
  background: var(--paper) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
body.scribble #intro-overlay::before {
  content: "scribble.";
  font-family: var(--font-script);
  font-size: 96px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  transform: rotate(-3deg);
  animation: scribbleBob 2.6s ease-in-out infinite;
  display: block;
  margin-bottom: 18px;
}
body.scribble #intro-overlay::after {
  content: "drawn with a mouse, on purpose ✎";
  font-family: var(--font-print);
  font-size: 22px;
  color: var(--ink-soft);
  transform: rotate(1deg);
}
body.scribble #intro-overlay .intro-drop,
body.scribble #intro-overlay .intro-title,
body.scribble #intro-overlay .intro-sub { display: none !important; }
@keyframes scribbleBob {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(0deg) translateY(-6px); }
}

/* ─── Watchlist chips ────────────────────────────────────────────────── */
body.scribble .wl-chip,
body.scribble .wl-scroll > * {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  filter: var(--wobble);
  font-family: var(--font-print) !important;
  color: var(--ink) !important;
}

/* ─── Monitor panel ──────────────────────────────────────────────────── */
body.scribble .monitor-panel {
  background: var(--paper) !important;
  border-left: 2.5px solid var(--ink) !important;
  color: var(--ink) !important;
}
body.scribble .monitor-header {
  background: var(--crayon-yellow) !important;
  color: var(--ink) !important;
  border-bottom: 2px dashed var(--ink) !important;
}
body.scribble .mh-tab {
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  background: #fff !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  text-transform: lowercase !important;
  filter: var(--wobble);
}
body.scribble .mh-tab.active {
  background: var(--crayon-pink) !important;
  color: var(--ink) !important;
}

/* ─── Generic buttons / inputs / selects everywhere ──────────────────── */
body.scribble button:not(.pulse-tab):not(.pc-buy-btn):not(.pulse-preset-btn):not(.pulse-filter-btn):not(.pulse-icon-btn):not([data-mode]):not([data-accent]) {
  font-family: var(--font-print) !important;
  color: var(--ink);
}
body.scribble input[type="text"],
body.scribble input[type="search"],
body.scribble input[type="number"] {
  font-family: var(--font-print) !important;
  color: var(--ink) !important;
}

/* ─── Text-color utilities (red/green/yellow tints) ──────────────────── */
body.scribble [style*="color: var(--green)"],
body.scribble [style*="color:var(--green)"],
body.scribble .text-green,
body.scribble .pos {
  color: var(--crayon-green-2) !important;
}
body.scribble [style*="color: var(--red)"],
body.scribble [style*="color:var(--red)"],
body.scribble .text-red,
body.scribble .neg {
  color: var(--crayon-red-2) !important;
}

/* ─── Rendered "preview" hover popups inherit theme ──────────────────── */
body.scribble .icon-preview {
  border: 2px solid var(--ink) !important;
  border-radius: 6px !important;
  filter: var(--wobble);
  background: #fff !important;
}

/* ─── Mode segmented (Tweaks panel) — paper style ────────────────────── */
body.scribble .wlt-tweaks {
  font-family: var(--font-print) !important;
}

/* ─── Footer / status bar ───────────────────────────────────────────── */
body.scribble .footer,
body.scribble .status-bar {
  background: transparent !important;
  border-top: none !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-print) !important;
  position: relative;
}
body.scribble .footer::before,
body.scribble .status-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'><path d='M0 2 Q 25 0.5 50 2 T 100 2 T 150 2.5 T 200 2' fill='none' stroke='%231a1a1a' stroke-width='1.2' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 200px 4px;
  opacity: .5;
}

/* ─── Trade view, monitor, etc. — keep readable ──────────────────────── */
body.scribble .trade-view,
body.scribble .token-card,
body.scribble .panel,
body.scribble .card {
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 6px !important;
  filter: var(--wobble);
  color: var(--ink) !important;
}

/* ─── Modals ─────────────────────────────────────────────────────────── */
body.scribble .modal,
body.scribble [class*="modal"] {
  font-family: var(--font-print) !important;
}
body.scribble .modal-content,
body.scribble [class*="modal-content"] {
  background: var(--paper) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 8px !important;
  filter: var(--wobble);
}

/* ─── Toast notifications ────────────────────────────────────────────── */
body.scribble .toast,
body.scribble .qb-toast,
body.scribble [class*="toast"] {
  background: var(--crayon-green) !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 8px !important;
  filter: var(--wobble);
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  transform: rotate(-1deg);
}

/* ─── Wallet dropdown / connect popover ──────────────────────────────── */
body.scribble .dropdown,
body.scribble [class*="dropdown"] {
  background: var(--paper) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 6px !important;
  filter: var(--wobble);
  color: var(--ink) !important;
}

/* ─── Override text on coloured Sluice elements ──────────────────────── */
body.scribble [class*="green"],
body.scribble [class*="up"] {
  color: var(--crayon-green-2);
}

/* ─── Prevent compounded filters from blurring text inside cards ──────
   (filter: url() on a parent affects children. We isolate text content
   from the wobble by removing it from inner text wrappers.) */
body.scribble .pulse-card .pc-body,
body.scribble .pulse-card .pc-row1,
body.scribble .pulse-card .pc-row2,
body.scribble .pulse-card .pc-ticker,
body.scribble .pulse-card .pc-vol,
body.scribble .pulse-card .pc-age {
  filter: none !important;
}
/* Don't double-wobble nested elements that already have their own filter */
body.scribble .pulse-col .pulse-card,
body.scribble .pulse-card .pc-icon,
body.scribble .pulse-card .pc-mc,
body.scribble .pulse-card .pc-buy-btn {
  /* These have their own wobble; the parent's wobble is already
     applied to them via inheritance, so no extra adjustment needed,
     but keep their borders crisp by isolating text. */
}

/* ============================================================================
   SCRIBBLE-ONLY: socials/mayhem meta row (trade.fun-style layout, scribbled)
   ============================================================================
   .pc-scribble-meta is rendered into every pulse card by tracker.js but stays
   hidden in every theme except scribble. It sits between row1 (ticker/age) and
   row2 (mc/vol) and shows the twitter handle inline as 𝕏 @handle ↗ plus other
   social pills, then a wobbly red MAYHEM banner if is_mayhem.
   ============================================================================ */

body:not(.scribble) .pc-scribble-meta { display: none !important; }

/* In scribble we replace the icon socials with the inline handle row. */
body.scribble .pc-row1 .pc-socials { display: none !important; }

body.scribble .pc-scribble-meta {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px 0;
  font-family: var(--font-print) !important;
  font-size: 13px;
  line-height: 1.1;
  filter: none !important;
}

body.scribble .pcs-social {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 3px;
  background: #fff !important;
  border: 1.8px solid var(--ink) !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  filter: var(--wobble);
  font-family: var(--font-print) !important;
  font-size: 13px !important;
  line-height: 1.1;
  cursor: pointer;
  transition: background .12s ease;
}
body.scribble .pcs-social:hover { background: var(--crayon-yellow) !important; }

body.scribble .pcs-x-glyph {
  font-family: 'Caveat', cursive !important;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-right: 2px;
}
body.scribble .pcs-handle {
  font-family: 'Caveat', cursive !important;
  font-weight: 700;
  font-size: 17px;
  color: var(--crayon-blue-2);
  letter-spacing: -0.01em;
}
body.scribble .pcs-arrow {
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 2px;
}

body.scribble .pcs-tg,
body.scribble .pcs-web {
  font-family: 'Caveat', cursive !important;
  font-weight: 700;
  font-size: 16px;
  text-transform: lowercase;
  padding: 1px 9px 2px;
}
body.scribble .pcs-tg { color: #2a8ad6; }
body.scribble .pcs-web { color: #2d7a40; }

/* MAYHEM tag — wobbly red banner with a flickering flame */
body.scribble .pcs-mayhem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 3px;
  background: var(--crayon-red) !important;
  color: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 6px !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  filter: var(--wobble-strong);
  transform: rotate(-2deg);
  text-transform: uppercase;
  animation: scribbleMayhemWobble 3.2s ease-in-out infinite;
}
body.scribble .pcs-flame {
  font-size: 14px;
  filter: drop-shadow(0 0 0.4px rgba(0,0,0,0.6));
  animation: scribbleFlameFlicker 1.4s ease-in-out infinite;
}
@keyframes scribbleMayhemWobble {
  0%, 100% { transform: rotate(-2deg) translate(0, 0); }
  33%      { transform: rotate(-1deg) translate(0.5px, -0.5px); }
  66%      { transform: rotate(-3deg) translate(-0.5px, 0.5px); }
}
@keyframes scribbleFlameFlicker {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.1) translateY(-1px); }
}

/* Mayhem cards: extra red ink border + drop-shadow, like "redrawn over with marker" */
body.scribble .pulse-card.is-mayhem {
  border-color: var(--crayon-red-2) !important;
  border-width: 2.6px !important;
  box-shadow: 1px 1.5px 0 var(--crayon-red) !important;
}
body.scribble .pulse-card.is-mayhem:hover {
  background: #ffe5e5 !important;
}

/* ============================================================================
   SCRIBBLE-ONLY: hide non-essential nav (only Pulse + Monitor remain)
   ============================================================================
   Per the brief: "only have pulse and monitor available on scribble version, all
   other features are not relevant for this version."
   ============================================================================ */
body.scribble #nav-algo,
body.scribble #nav-copytrade,
body.scribble #nav-account,
body.scribble #nav-portfolio,
body.scribble #nav-trades,
body.scribble #nav-instruments,
body.scribble #nav-leaderboard,
body.scribble #nav-trade,
body.scribble [data-page="algo"],
body.scribble [data-page="copytrade"],
body.scribble [data-page="account"] {
  display: none !important;
}

/* Render the two visible nav links scribble-native (lowercase Caveat with
   wavy underline on the active item). */
body.scribble #nav-pulse,
body.scribble #nav-monitor {
  font-family: 'Caveat', cursive !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
  letter-spacing: -0.01em !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  color: var(--ink-soft) !important;
}
body.scribble #nav-pulse svg,
body.scribble #nav-monitor svg {
  display: none !important;
}
body.scribble #nav-pulse.active,
body.scribble #nav-monitor.active {
  color: var(--crayon-pink-2) !important;
  border-bottom: none !important;
  text-decoration: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: var(--crayon-pink-2) !important;
  text-underline-offset: 4px !important;
}

/* Mobile bottom-bar — same scope reduction. */
body.scribble #mbb-algo,
body.scribble #mbb-copytrade,
body.scribble #mbb-account,
body.scribble #mbb-portfolio,
body.scribble #mbb-theme,
body.scribble [data-mbb="algo"],
body.scribble [data-mbb="copytrade"],
body.scribble [data-mbb="account"] {
  display: none !important;
}

/* Logout + theme picker are hidden in scribble (brief: strip everything
   that isn't pulse/monitor). */
body.scribble .topbar-logout,
body.scribble .topbar-logout-btn,
body.scribble #theme-picker,
body.scribble .theme-picker,
body.scribble #theme-btn {
  display: none !important;
}

/* ─── Empty state (pre-tracking screen): swap Sluice mascot/copy ─────────
   The default mascot SVG (the goggled green droplet) and the "Trade analytics
   from the Sluice indexer..." copy are Sluice-branded — replace them with the
   scribble chart icon and scribble-native copy so nothing reads as Sluice. */
body.scribble .empty-state .mascot { display: none !important; }
body.scribble .empty-state .mascot-wrap {
  width: 200px !important;
  height: 200px !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><defs><filter id='w' x='-10%25' y='-10%25' width='120%25' height='120%25'><feTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='2' seed='9' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.6'/></filter></defs><g filter='url(%23w)'><path d='M5 38 L 13 30 L 18 33 L 24 24 L 30 18 L 38 6' stroke='%23ffec99' stroke-width='5.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'/><path d='M5 5 L 5 39 L 40 39' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round'/><path d='M5 38 L 13 30 L 18 33 L 24 24 L 30 18 L 38 6' stroke='%231a1a1a' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/><circle cx='13' cy='30' r='2.2' fill='%235fb8ff' stroke='%231a1a1a' stroke-width='1.2'/><circle cx='24' cy='24' r='2.2' fill='%235cd685' stroke='%231a1a1a' stroke-width='1.2'/><circle cx='38' cy='6' r='3.2' fill='%23ff5e94' stroke='%231a1a1a' stroke-width='1.6'/></g></svg>")
    center/contain no-repeat !important;
  filter: none !important;
  margin-bottom: 14px !important;
  transform: rotate(-3deg);
  animation: scribbleEmptyBob 3.6s ease-in-out infinite;
}
@keyframes scribbleEmptyBob {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(0deg) translateY(-6px); }
}

body.scribble .empty-state p {
  font-family: 'Caveat', cursive !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  text-transform: lowercase !important;
  font-size: 0 !important;     /* collapse original wording */
}
body.scribble .empty-state p::before {
  content: "paste a wallet ✎";
  font-family: 'Caveat', cursive;
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: lowercase;
  display: inline-block;
  transform: rotate(-1deg);
}

body.scribble .empty-state .sub {
  font-family: 'Patrick Hand', cursive !important;
  color: var(--ink-soft) !important;
  letter-spacing: 0 !important;
  font-size: 0 !important;     /* collapse "Sluice indexer" copy */
  margin-top: 4px !important;
}
body.scribble .empty-state .sub::before {
  content: "scribble terminal will draw their trades here";
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: var(--ink-soft);
  display: inline-block;
  transform: rotate(0.4deg);
}

/* ============================================================================
   SCRIBBLE-ONLY: TOKEN-VIEW REDESIGN
   ============================================================================
   Strip the dense Sluice token-view (live trades / holders / traders / pnl
   bar / fee panels) and surface only what matters: ticker · name · socials ·
   MC · chart · buy. The chart canvas itself gets the wobble filter applied
   to its wrapper, so lightweight-charts renders real candles with real data
   that LOOK hand-drawn.
   ============================================================================ */

/* — Hide the Sluice clutter on the token page — */
body.scribble #token-fav-btn,
body.scribble .tv-toggle-bar,
body.scribble #tv-trades-header,
body.scribble #tv-trades,
body.scribble #tv-holders-header,
body.scribble #tv-holders,
body.scribble #tv-traders-header,
body.scribble #tv-traders,
body.scribble #tt-sig-bar,
body.scribble #tt-filter-bar,
body.scribble .trade-pnl-bar,
body.scribble .tv-itw-btn,
body.scribble #topbar-itw-btn,
body.scribble .token-topbar .token-stats .ts:not(:first-child) {
  display: none !important;
}

/* — Token-view shell — */
body.scribble #token-view.active {
  background: transparent !important;
}
body.scribble .token-view {
  gap: 12px !important;
  padding: 16px 18px !important;
}

/* — Topbar: icon + ticker/name/mint + MC + socials, all hand-drawn — */
body.scribble .token-topbar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
}
body.scribble .token-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

body.scribble .token-icon-lg {
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px !important;
  border: 2.5px solid var(--ink) !important;
  background: var(--paper-2) !important;
  filter: var(--wobble) !important;
  box-shadow: none !important;
  font-family: 'Caveat', cursive !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  overflow: visible !important;
  position: relative;
}
body.scribble .token-icon-lg > img {
  border-radius: 12px !important;
  border: 1.5px solid var(--ink) !important;
}
body.scribble .token-icon-lg.border-mayhem {
  border-color: var(--crayon-red-2) !important;
  background: var(--crayon-pink) !important;
  box-shadow: 1px 2px 0 var(--crayon-red) !important;
}

body.scribble .token-id {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  filter: none !important;
}
body.scribble .token-id > div {
  filter: none !important;
}

body.scribble .token-ticker {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 38px !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  transform: rotate(-1deg);
}
body.scribble .token-name-full {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 18px !important;
  color: var(--ink-soft) !important;
  margin-left: 6px !important;
  letter-spacing: 0 !important;
  transform: rotate(0.5deg);
}
body.scribble .token-mint-copy {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  background: transparent !important;
  border: 1.5px dashed var(--ink-faint) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  align-self: flex-start;
  cursor: pointer;
}
body.scribble .token-mint-copy:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}

/* MC pill — biggest thing on the row, yellow highlighter */
body.scribble .token-stats {
  margin-left: auto !important;
  filter: none !important;
}
body.scribble .token-topbar .token-stats .ts:first-child {
  background: var(--crayon-yellow) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  filter: var(--wobble) !important;
  transform: rotate(-1.5deg);
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
body.scribble .token-topbar .token-stats .ts-val {
  font-family: 'Caveat', cursive !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  filter: none !important;
}
body.scribble .token-topbar .token-stats .ts-label {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
  filter: none !important;
  opacity: 0.75;
}

/* Socials row — render the Sluice icon links as scribble pills */
body.scribble .token-socials {
  display: inline-flex !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  filter: none !important;
}
body.scribble .token-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 50% !important;
  color: var(--ink) !important;
  filter: var(--wobble) !important;
  transition: background .12s ease !important;
}
body.scribble .token-social:hover {
  background: var(--crayon-yellow) !important;
}
body.scribble .token-social svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--ink) !important;
  filter: none !important;
}

/* — Main row: chart left, trade panel right (responsive stack on mobile) — */
body.scribble .token-main-row {
  gap: 14px !important;
}

/* — Timeframe bar — */
body.scribble .tf-bar {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  display: flex !important;
  gap: 6px !important;
  padding: 4px 0 8px 0 !important;
  flex-wrap: wrap !important;
}
body.scribble .tf-btn {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  height: auto !important;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  filter: var(--wobble) !important;
  text-transform: lowercase !important;
}
body.scribble .tf-btn:hover {
  background: var(--paper-2) !important;
}
body.scribble .tf-btn.active {
  background: var(--crayon-yellow) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
body.scribble .tf-btn.tf-reset {
  background: var(--paper-2) !important;
}

/* — CHART: paper canvas with wobble applied so candles render hand-drawn —
   Lightweight-charts paints candles to a <canvas>; CSS filters apply to the
   rasterized canvas, so turbulence + displacement runs over the rendered
   candles. The chart logic stays untouched — only the visual is scribbled. */
body.scribble .token-chart-wrap {
  background: var(--paper) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 10px !important;
  filter: var(--wobble-soft) !important;
  padding: 6px !important;
  position: relative;
  min-height: 320px !important;
  transform: rotate(-0.2deg);
}
body.scribble .token-chart-wrap canvas {
  filter: contrast(1.05) saturate(1.1) !important;
}

/* — TRADE PANEL — */
body.scribble .token-right {
  background: var(--paper) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  filter: var(--wobble) !important;
  width: 320px !important;
  flex: 0 0 320px !important;
  box-shadow: none !important;
}
body.scribble .token-right > * {
  filter: none !important;
}

body.scribble .trade-tabs {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
body.scribble .trade-tab {
  flex: 1 !important;
  background: #fff !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--ink) !important;
  filter: var(--wobble) !important;
  text-transform: lowercase !important;
}
body.scribble .trade-tab.active-buy {
  background: var(--crayon-green) !important;
  color: var(--ink) !important;
}
body.scribble .trade-tab.active-sell {
  background: var(--crayon-red) !important;
  color: #fff !important;
}

body.scribble .trade-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.scribble .trade-input-wrap {
  background: #fff !important;
  border: 2.3px solid var(--ink) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  filter: var(--wobble) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.scribble .trade-input-wrap > * { filter: none !important; }
body.scribble .trade-input-label {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
body.scribble .trade-input {
  font-family: 'Caveat', cursive !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
}
body.scribble .trade-input::placeholder {
  color: var(--ink-faint) !important;
  font-style: italic !important;
}

body.scribble .trade-presets {
  /* Don't !important the display — switchTradeTab() toggles inline
     display:none on the inactive Buy/Sell row. The base CSS rule already
     sets display: grid, so we just override the layout details. */
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}
body.scribble .trade-preset {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  padding: 5px 0 !important;
  font-family: 'Caveat', cursive !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  filter: var(--wobble) !important;
  cursor: pointer;
}
body.scribble .trade-preset:hover {
  background: var(--crayon-yellow) !important;
}

/* Compact slippage/prio/tip controls — keep but tiny */
body.scribble .trade-settings-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-family: 'Patrick Hand', cursive !important;
}
body.scribble .trade-slippage {
  background: #fff !important;
  border: 1.6px solid var(--ink) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  filter: var(--wobble) !important;
  font-size: 12px !important;
  color: var(--ink-soft) !important;
  /* Don't !important the display — switchTradeTab() toggles inline
     display:none on the inactive Tip box (#trade-tip-buy / #trade-tip-sell)
     and was being overridden, rendering both Tip controls at once. */
  align-items: center !important;
  gap: 5px !important;
  flex: 1 1 0 !important;
  min-width: 70px !important;
}
body.scribble .trade-slippage:not([style*="display:none"]) {
  display: flex;
}
body.scribble .trade-slippage > * { filter: none !important; }
body.scribble .trade-slippage-label {
  font-family: 'Patrick Hand', cursive !important;
  text-transform: lowercase !important;
  font-size: 12px !important;
  color: var(--ink-soft) !important;
}
body.scribble .trade-slippage input {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  outline: none !important;
}

/* Big Buy / Sell action button — the most important thing on the panel */
body.scribble .trade-btn {
  width: 100% !important;
  border: 2.8px solid var(--ink) !important;
  border-radius: 12px !important;
  padding: 14px 0 !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;
  filter: var(--wobble-strong) !important;
  cursor: pointer !important;
  transform: rotate(-0.5deg);
  transition: transform .12s ease, background .15s ease !important;
  margin-top: 6px !important;
}
body.scribble .trade-btn:hover {
  transform: rotate(-0.5deg) translate(-1px, -2px) !important;
}
body.scribble .trade-btn:active {
  transform: rotate(-0.5deg) translate(1px, 1px) !important;
}
body.scribble .trade-btn-buy {
  background: var(--crayon-green) !important;
  color: var(--ink) !important;
}
body.scribble .trade-btn-sell {
  background: var(--crayon-red) !important;
  color: #fff !important;
}

/* Mobile stack: chart on top, trade below */
@media (max-width: 900px) {
  body.scribble .token-main-row {
    flex-direction: column !important;
  }
  body.scribble .token-right {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  body.scribble .token-ticker { font-size: 30px !important; }
  body.scribble .token-topbar .token-stats .ts:first-child { padding: 4px 10px !important; }
  body.scribble .token-topbar .token-stats .ts-val { font-size: 22px !important; }
}

/* ============================================================================
   GLOBAL: replace remaining straight/clean shapes with hand-drawn wobble.
   The brief: anything that still reads as a clean rectangle should look like
   a marker drew it. Scoped to body.scribble so other themes are untouched.
   ============================================================================ */

/* Surfaces that commonly stay rect-and-clean: panels, cards, popovers,
   side-rails, modal frames, toasts, tooltips, segmented bars. */
body.scribble .monitor-panel,
body.scribble .panel,
body.scribble .panel-card,
body.scribble .side-panel,
body.scribble .pulse-modal,
body.scribble .pulse-modal-inner,
body.scribble .pfp-overlay,
body.scribble .pfp-card,
body.scribble .filter-popover,
body.scribble .pp-modal,
body.scribble .pp-card,
body.scribble .modal,
body.scribble .modal-card,
body.scribble .modal-shell,
body.scribble .tooltip,
body.scribble .popover,
body.scribble .menu,
body.scribble .context-menu,
body.scribble .wl-bar,
body.scribble .wl-item,
body.scribble .mon-card,
body.scribble .mon-item,
body.scribble .mon-row,
body.scribble .mh-tabs,
body.scribble .pulse-tabs,
body.scribble .pulse-tab-bar,
body.scribble .mobile-bottom-bar,
body.scribble .mbb,
body.scribble .quick-actions,
body.scribble .quick-action,
body.scribble .action-bar,
body.scribble .filter-bar,
body.scribble .preset-bar,
body.scribble .pfm-pill,
body.scribble .footer-bar,
body.scribble .topbar-search,
body.scribble .search-popover,
body.scribble .topbar-search-input,
body.scribble .pulse-modal-section {
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  filter: var(--wobble) !important;
  background: var(--paper) !important;
  box-shadow: none !important;
}

/* Direct children of wobbled shells get filter: none so text stays crisp */
body.scribble .monitor-panel > *,
body.scribble .panel > *,
body.scribble .modal-card > *,
body.scribble .filter-popover > *,
body.scribble .popover > *,
body.scribble .menu > *,
body.scribble .wl-item > *,
body.scribble .mon-card > * {
  filter: none;
}

/* Generic inputs / selects / textareas — round the corners + wobble */
body.scribble input:not(.pulse-search-input):not([type='range']):not([type='checkbox']):not([type='radio']),
body.scribble select,
body.scribble textarea {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-family: var(--font-print) !important;
  filter: var(--wobble) !important;
  outline: none !important;
}
body.scribble input:focus,
body.scribble select:focus,
body.scribble textarea:focus {
  border-color: var(--crayon-blue) !important;
}

/* Pill / chip-shaped tabs in the watchlist + monitor headers */
body.scribble .wl-toggle-btn,
body.scribble .mh-tab,
body.scribble .pulse-tab,
body.scribble [role="tab"] {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  filter: var(--wobble) !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-transform: lowercase !important;
  padding: 4px 12px !important;
  font-size: 16px !important;
}
body.scribble .wl-toggle-btn.active,
body.scribble .mh-tab.active,
body.scribble .pulse-tab.active,
body.scribble [role="tab"][aria-selected="true"] {
  background: var(--crayon-yellow) !important;
}

/* Generic rectangular badges — ones that use [class*="-pill"] / "badge" / "tag" */
body.scribble .badge,
body.scribble .tag,
body.scribble [class*="-pill"],
body.scribble [class*="-chip"],
body.scribble [class*="-badge"] {
  border: 1.8px solid var(--ink) !important;
  border-radius: 999px !important;
  filter: var(--wobble) !important;
  font-family: var(--font-print) !important;
}

/* Icon pills (ones already round get sharper wobble; rect ones get rounded) */
body.scribble .icon-btn,
body.scribble .square-btn,
body.scribble .square-icon,
body.scribble .circle-btn {
  border-radius: 999px !important;
  border: 2px solid var(--ink) !important;
  filter: var(--wobble) !important;
}

/* Progress / segmented bars get a wobble + ink stroke */
body.scribble .progress,
body.scribble .progress-bar,
body.scribble .segmented,
body.scribble .seg-control {
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  filter: var(--wobble) !important;
  background: var(--paper-2) !important;
}

/* Table-like rows — keep the ink underline scribble (avoid borderless rect) */
body.scribble table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}
body.scribble table th,
body.scribble table td {
  border-bottom: 1.8px solid var(--ink) !important;
  font-family: var(--font-print) !important;
}

/* Mobile bottom-bar nav: a wobbly paper shelf */
body.scribble .mobile-nav,
body.scribble .mobile-bottom-bar {
  background: var(--paper) !important;
  border-top: 2.5px solid var(--ink) !important;
  filter: none !important;
}
body.scribble .mobile-nav > *,
body.scribble .mobile-bottom-bar > * {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
}

/* ============================================================================
   SCRIBBLE-ONLY: pulse-card coin name (TICKER + name + age all on row1)
   ============================================================================
   Cards now show full coin name next to the ticker. Hand-printed Patrick
   Hand, slightly smaller and tilted so it reads as a hand-written caption
   rather than a competing label.
   ============================================================================ */
body.scribble .pc-name {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0.85;
  max-width: 130px !important;
  transform: rotate(0.4deg);
  filter: none !important;
}

/* ============================================================================
   SCRIBBLE-ONLY: Topbar nav buttons — remove the rectangular surround
   ============================================================================
   Per the brief: "remove the square surrounding them, just keep them as
   scribble". Strip every paint, padding, border — the wavy underline on
   active is the only frame the nav needs.
   ============================================================================ */
body.scribble #nav-pulse,
body.scribble #nav-monitor {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  margin: 0 4px !important;
  font-family: 'Caveat', cursive !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-soft) !important;
  filter: none !important;
  height: auto !important;
  line-height: 1.1 !important;
  position: relative;
}
body.scribble #nav-pulse:hover,
body.scribble #nav-monitor:hover {
  background: transparent !important;
  color: var(--ink) !important;
}
body.scribble #nav-pulse.active,
body.scribble #nav-monitor.active {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  color: var(--crayon-pink-2) !important;
  text-decoration: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: var(--crayon-pink-2) !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 2px !important;
}

/* ============================================================================
   SCRIBBLE-ONLY: MONITOR (wallet tracker) — trade.fun-memescope card layout
   ============================================================================
   Reskin .mon-tx rows as dense memescope-style cards but rendered scribble:
   round wobbly icon, bold ticker + small coin name underneath, BUY/SELL chip
   on a coloured pill, stats column (SOL · MC) right-aligned, ink border.
   ============================================================================ */
body.scribble .monitor-panel {
  background: var(--paper) !important;
  border-left: 3px solid var(--ink) !important;
  color: var(--ink) !important;
  filter: none !important;
}

body.scribble .mon-list {
  padding: 8px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}

body.scribble .mon-tx {
  background: #fffdf5 !important;
  border: 2.3px solid var(--ink) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  filter: var(--wobble) !important;
  display: grid !important;
  grid-template-columns: 52px 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "icon body  stats"
    "icon body  time" !important;
  align-items: center !important;
  gap: 4px 12px !important;
  box-shadow: 1px 2px 0 rgba(26,26,26,0.08) !important;
  position: relative;
  cursor: pointer !important;
  transition: background .12s ease, transform .12s ease !important;
}
body.scribble .mon-tx:hover {
  background: var(--paper-2) !important;
  transform: translate(-1px, -2px);
}

/* Wobbly per-card tilt for hand-drawn variety */
body.scribble .mon-tx:nth-child(5n)   { transform: rotate(-0.25deg); }
body.scribble .mon-tx:nth-child(5n+1) { transform: rotate(0.2deg); }
body.scribble .mon-tx:nth-child(5n+2) { transform: rotate(-0.15deg); }
body.scribble .mon-tx:nth-child(5n+3) { transform: rotate(0.3deg); }
body.scribble .mon-tx:nth-child(5n+4) { transform: rotate(-0.3deg); }
body.scribble .mon-tx:hover {
  transform: rotate(0deg) translate(-1px, -2px) !important;
}

/* BUY card slight green tint, SELL card slight pink tint */
body.scribble .mon-tx.tx-buy {
  border-left-width: 5px !important;
  border-left-color: var(--crayon-green-2) !important;
}
body.scribble .mon-tx.tx-sell {
  border-left-width: 5px !important;
  border-left-color: var(--crayon-red-2) !important;
}

body.scribble .mon-tx > * { filter: none !important; }

/* Round wobbly token icon (left col) */
body.scribble .mon-icon {
  grid-area: icon !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2.3px solid var(--ink) !important;
  background: var(--paper-2) !important;
  filter: var(--wobble) !important;
  box-shadow: none !important;
  font-family: 'Caveat', cursive !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
body.scribble .mon-icon img {
  border-radius: 50% !important;
  border: 1.4px solid var(--ink) !important;
}
body.scribble .mon-icon.border-mayhem {
  border-color: var(--crayon-red-2) !important;
  background: var(--crayon-pink) !important;
}

/* Body block (middle col): ticker + name + tiny stats */
body.scribble .mon-body {
  grid-area: body !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}
body.scribble .mon-body > * { filter: none !important; }

body.scribble .mon-row1 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  flex-wrap: wrap !important;
}
body.scribble .mon-row1 > * { filter: none !important; }

/* Wallet handle: Caveat + tinted by data-wallet color (handled inline) */
body.scribble .mon-wallet {
  font-family: 'Caveat', cursive !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
}
body.scribble .mon-wallet.named {
  font-family: 'Caveat', cursive !important;
}

/* BUY / SELL pill — the most colorful element on the card */
body.scribble .mon-action {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 10px 2px !important;
  border: 1.8px solid var(--ink) !important;
  border-radius: 999px !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  filter: var(--wobble) !important;
  line-height: 1 !important;
}
body.scribble .mon-action.buy {
  background: var(--crayon-green) !important;
  color: var(--ink) !important;
}
body.scribble .mon-action.sell {
  background: var(--crayon-red) !important;
  color: #fff !important;
}

/* Token ticker — bold Caveat, links to chart on click */
body.scribble .mon-ticker {
  font-family: 'Caveat', cursive !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
  line-height: 1 !important;
}

/* Bottom row: SOL amount + token amount + MC + mint link */
body.scribble .mon-row2 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 14px !important;
  margin-top: 2px !important;
  flex-wrap: wrap !important;
}
body.scribble .mon-row2 > * { filter: none !important; }

body.scribble .mon-sol {
  font-family: 'Caveat', cursive !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
body.scribble .mon-tok {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
}
body.scribble .mon-mcap {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  background: var(--crayon-yellow) !important;
  border: 1.8px solid var(--ink) !important;
  border-radius: 5px !important;
  padding: 0 6px !important;
  filter: var(--wobble) !important;
  color: var(--ink) !important;
}
body.scribble .mon-mcap[style*="color"] { color: var(--ink) !important; }
body.scribble .mon-mint-link {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  text-decoration: none !important;
  border: 1.5px dashed var(--ink-faint) !important;
  border-radius: 4px !important;
  padding: 0 6px !important;
}
body.scribble .mon-mint-link:hover {
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

/* Right column: time stamp top, stats bottom — keeps the card scannable */
body.scribble .mon-time {
  grid-area: time !important;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 12px !important;
  color: var(--ink-faint) !important;
  text-align: right !important;
  align-self: end !important;
  white-space: nowrap !important;
}

/* Monitor header (the panel title bar) */
body.scribble .monitor-header {
  background: var(--crayon-yellow) !important;
  color: var(--ink) !important;
  border-bottom: 2px dashed var(--ink) !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  filter: none !important;
}

/* Wallet input on the monitor — handwritten input pill */
body.scribble #wallet-input,
body.scribble .wallet-input {
  font-family: 'Caveat', cursive !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  background: #fff !important;
  border: 2.2px solid var(--ink) !important;
  border-radius: 22px !important;
  filter: var(--wobble) !important;
  color: var(--ink) !important;
  padding: 6px 14px !important;
}

/* ============================================================================
   FONT WEIGHT PASS — swap display-scale text from Caveat to Permanent Marker
   ============================================================================
   At 20px+ Caveat's flowing script reads thin and pixelated next to all the
   wobble around it. Permanent Marker is a single-weight bold marker font
   that holds its strokes when blown up; we use it for the headings, tickers,
   MC pills, action buttons, MAYHEM banner — anywhere display weight matters.
   Caveat / Patrick Hand stay for body, captions, social pills.
   ============================================================================ */

/* Brand wordmark: marker for "scribble", Patrick Hand stays for "terminal" */
body.scribble .brand-name::before {
  font-family: var(--font-marker) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Topbar nav (pulse / monitor) — wordmark-weight marker */
body.scribble #nav-pulse,
body.scribble #nav-monitor {
  font-family: var(--font-marker) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Connect / wallet pill — marker so it pops */
body.scribble #connect-btn,
body.scribble [data-connect],
body.scribble .topbar-connect {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
}

/* Pulse column titles ("new" / "soon" / "migrated") */
body.scribble .pulse-col-title {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
}

/* Pulse card ticker, MC pill, BUY button */
body.scribble .pc-ticker {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
}
body.scribble .pc-mc {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}
body.scribble .pc-buy-btn {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  letter-spacing: 0.02em !important;
}

/* MAYHEM banner — bold marker stamp */
body.scribble .pcs-mayhem {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
}

/* Token-view ticker, MC label, big buttons */
body.scribble .token-ticker {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 36px !important;
  letter-spacing: 0 !important;
}
body.scribble .token-topbar .token-stats .ts-val {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  letter-spacing: 0 !important;
}
body.scribble .trade-tab {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: 0.02em !important;
}
body.scribble .trade-input {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  letter-spacing: 0 !important;
}
body.scribble .trade-btn {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
}

/* Monitor cards — ticker, BUY/SELL chip, wallet handle, MC chip */
body.scribble .mon-ticker {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
}
body.scribble .mon-action {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}
body.scribble .mon-wallet {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}
body.scribble .mon-mcap {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}
body.scribble .mon-sol {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

/* Empty-state headline */
body.scribble .empty-state p::before {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
}

/* Intro overlay headline */
body.scribble #intro-overlay::before {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 88px !important;
}

/* Toasts */
body.scribble .toast,
body.scribble .qb-toast,
body.scribble [class*="toast"] {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
}

/* Stronger anti-aliasing for marker font — kills the pixelated edge */
body.scribble [style*="Permanent Marker"],
body.scribble .pc-ticker,
body.scribble .token-ticker,
body.scribble .pulse-col-title,
body.scribble .pc-mc,
body.scribble .ts-val,
body.scribble .trade-btn,
body.scribble .pcs-mayhem,
body.scribble .mon-ticker,
body.scribble .pc-buy-btn,
body.scribble .trade-tab,
body.scribble .trade-input,
body.scribble #nav-pulse,
body.scribble #nav-monitor,
body.scribble .brand-name::before,
body.scribble .empty-state p::before,
body.scribble #intro-overlay::before {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: 0 0 0.4px currentColor;
}

/* ============================================================================
   SCRIBBLE-ONLY: chart trade markers — replace Sluice droplet with B / S
   ============================================================================
   The droplet mascot is Sluice branding; the user wants it gone in scribble.
   Hide the inner SVG/img and render a wobbly hand-drawn capital letter ring
   instead — green B for buys, red S for sells, yellow D for dev trades.
   The JS continues to position the marker via transform: translate(-50%,-100%)
   so we only restyle the inside.
   ============================================================================ */
body.scribble .droplet-marker {
  width: 28px !important;
  height: 28px !important;
  border: 2.2px solid var(--ink) !important;
  border-radius: 50% !important;
  background: var(--paper) !important;
  box-shadow: 1px 1.5px 0 rgba(26,26,26,0.22) !important;
  filter: var(--wobble) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-marker) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0 0.4px currentColor;
}
/* Hide the original Sluice droplet SVG / dev-droplet img */
body.scribble .droplet-marker svg,
body.scribble .droplet-marker img {
  display: none !important;
}
/* Letter via ::before so we don't fight with the JS innerHTML payload */
body.scribble .droplet-marker.buy::before  { content: "B"; }
body.scribble .droplet-marker.sell::before { content: "S"; }
body.scribble .droplet-marker.dev::before  { content: "D"; }
body.scribble .droplet-marker.buy {
  background: #d6f7e0 !important;
  color: var(--crayon-green-2) !important;
  border-color: var(--crayon-green-2) !important;
  filter: var(--wobble) !important;
}
body.scribble .droplet-marker.sell {
  background: #ffe1e1 !important;
  color: var(--crayon-red-2) !important;
  border-color: var(--crayon-red-2) !important;
  filter: var(--wobble) !important;
}
/* Dev override: yellow paper, ink stroke, ink "D" — sits on top of buy/sell */
body.scribble .droplet-marker.dev {
  background: var(--crayon-yellow) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 17px !important;
}
/* Hover: bigger but no scale-translate fighting (the base rule already applies
   transform: translate(-50%,-100%) scale(1.3) which still works) */
body.scribble .droplet-marker:hover {
  background: var(--crayon-yellow) !important;
  z-index: 20 !important;
}
body.scribble .droplet-marker.buy:hover {
  background: #b9efc9 !important;
}
body.scribble .droplet-marker.sell:hover {
  background: #ffc9c9 !important;
}

/* ============================================================================
   SCRIBBLE-ONLY: search popup matches the scribble side panel design
   ============================================================================
   Backdrop: warm paper-tinted dim instead of cold dark blur
   Modal:    wobbly paper card with ink border + offset shadow
   Header:   handwritten input + wavy ink underline divider
   Results:  each row is a small chip — Permanent Marker ticker, Patrick Hand
             name, yellow highlighter MC pill, all wobbled
   ============================================================================ */
body.scribble .search-modal-backdrop {
  background: rgba(26, 24, 18, 0.55) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

body.scribble .search-modal {
  background: #fffdf5 !important;
  border: 2.6px solid var(--ink) !important;
  border-radius: 12px !important;
  filter: var(--wobble) !important;
  box-shadow: 2px 4px 0 rgba(26,26,26,0.18) !important;
  color: var(--ink) !important;
  margin-top: 10vh !important;
  transform: rotate(-0.4deg);
}
body.scribble .search-modal > * { filter: none !important; }

body.scribble .search-modal-header {
  background: transparent !important;
  border: none !important;
  padding: 14px 18px 10px !important;
  position: relative;
}
/* Wavy ink underline below the input — replaces the flat 1px border */
body.scribble .search-modal-header::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'><path d='M0 2 Q 25 0.5 50 2 T 100 2 T 150 2.5 T 200 2' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 200px 4px;
  pointer-events: none;
}
body.scribble .search-modal-header svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--ink) !important;
  filter: var(--wobble);
}

body.scribble .search-modal-input {
  font-family: 'Caveat', cursive !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: transparent !important;
  letter-spacing: -0.01em !important;
}
body.scribble .search-modal-input::placeholder {
  color: var(--ink-faint) !important;
  font-style: italic;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

body.scribble .search-kbd,
body.scribble .topbar-search .search-hint-kbd {
  background: #fff !important;
  color: var(--ink-soft) !important;
  border: 1.6px solid var(--ink) !important;
  border-radius: 5px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
  filter: var(--wobble);
}

/* Scrollable results — paper, scribbled scrollbar */
body.scribble .search-modal-results {
  background: transparent !important;
  padding-bottom: 8px !important;
  scrollbar-color: var(--ink) transparent !important;
}
body.scribble .search-modal-results::-webkit-scrollbar-thumb {
  background: var(--ink) !important;
  border-radius: 999px !important;
  border: 2px solid var(--paper);
}

body.scribble .search-section-label {
  font-family: 'Permanent Marker', cursive !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--crayon-pink-2) !important;
  letter-spacing: 0.04em !important;
  text-transform: lowercase !important;
  padding: 12px 18px 6px !important;
  text-shadow: 0 0 0.4px currentColor;
  -webkit-font-smoothing: antialiased;
  transform: rotate(-0.5deg);
}

/* Each result row is a small wobbly paper chip — same vocabulary as a pulse card */
body.scribble .search-result-item {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  margin: 6px 12px !important;
  padding: 10px 12px !important;
  filter: var(--wobble) !important;
  cursor: pointer !important;
  transition: background .12s ease, transform .1s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
body.scribble .search-result-item > * { filter: none !important; }
body.scribble .search-result-item:hover,
body.scribble .search-result-item.active {
  background: var(--crayon-yellow) !important;
  transform: translate(-1px, -2px) !important;
}
body.scribble .search-result-item:nth-child(odd)  { transform: rotate(-0.2deg); }
body.scribble .search-result-item:nth-child(even) { transform: rotate(0.2deg); }
body.scribble .search-result-item:hover { transform: rotate(0deg) translate(-1px, -2px) !important; }

body.scribble .search-result-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid var(--ink) !important;
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  font-family: 'Caveat', cursive !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  filter: var(--wobble) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
body.scribble .search-result-icon img {
  border-radius: 50% !important;
}

body.scribble .search-result-ticker {
  font-family: var(--font-marker) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 0.4px currentColor;
  -webkit-font-smoothing: antialiased;
}
body.scribble .search-result-name {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  letter-spacing: 0 !important;
  max-width: 160px !important;
}
body.scribble .search-result-row2 {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  gap: 8px !important;
}
body.scribble .search-result-mc {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: var(--crayon-yellow) !important;
  border: 1.4px solid var(--ink) !important;
  border-radius: 4px !important;
  padding: 0 5px !important;
  filter: var(--wobble) !important;
  color: var(--ink) !important;
}
body.scribble .search-result-vol {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 13px !important;
}
body.scribble .search-result-age {
  font-family: 'Patrick Hand', cursive !important;
  font-size: 13px !important;
  color: var(--ink-faint) !important;
}
body.scribble .search-empty {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--ink-faint) !important;
  padding: 50px 18px !important;
  transform: rotate(-0.5deg);
}
body.scribble .search-empty::before {
  content: "¯\\_(ツ)_/¯ ";
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

/* Topbar search input on scribble pages — a small wobbly paper pill */
body.scribble .topbar-search input {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  font-family: 'Caveat', cursive !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  filter: var(--wobble) !important;
  height: 34px !important;
  padding: 0 36px 0 14px !important;
}
body.scribble .topbar-search input::placeholder {
  color: var(--ink-faint) !important;
  font-style: italic;
}
body.scribble .topbar-search input:focus {
  outline: none !important;
  border-color: var(--crayon-blue) !important;
  box-shadow: 1px 2px 0 rgba(26,26,26,0.12) !important;
}
body.scribble .topbar-search-btn {
  background: transparent !important;
  border: none !important;
  color: var(--ink) !important;
}
body.scribble .topbar-search-btn:hover {
  color: var(--crayon-pink-2) !important;
}
body.scribble .topbar-search .fav-btn {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 50% !important;
  filter: var(--wobble) !important;
  color: var(--crayon-pink-2) !important;
}