/* =========================================================================
   peak-brand.css — GENERATED. DO NOT EDIT THIS FILE.
   -------------------------------------------------------------------------
   Source:  packages/peak-brand/src/tokens/*.css + primitives.css
   Script:  scripts/sync-tokens.js
   To update: edit the source files and run `npm run sync-tokens` from the
              monorepo root. Commit the source AND the regenerated copies.
   ========================================================================= */

/* ============================================================================
   @peak/brand — Color tokens
   ============================================================================
   Canonical PEAK color palette. Every surface consumes THESE values, not
   hex literals. If you're tempted to write `#d90037` in a consumer file,
   use var(--peak-red) instead.

   Reconciliation notes (from the Apr 2026 audit):
   - The three drifted reds (#a30029, #b0002d, #b8002f) were collapsed
     into a single --peak-red-hover = #a30029 (marketing + driver.js value).
   - App background reconciled to #121212 (marketing site value), since
     marketing is the public-facing brand surface that other people link to.
   - Material-design semantic colors (#66bb6a, #2196f3, #ff9800) are rejected
     in favor of the more refined platform palette (#2ecc71, #3498db, #f39c12)
     already used by Dashboard, Devices, and Settings.
   ========================================================================= */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────
     The one hue allowed to draw attention on PEAK surfaces. Use for CTA
     buttons, primary indicators, and the button halo — nothing else. */
  --peak-red:          #d90037;
  --peak-red-hover:    #a30029;
  --peak-red-pressed:  #7a001f;
  --peak-red-glow:     rgba(217, 0, 55, 0.25);
  --peak-red-tint:     rgba(217, 0, 55, 0.08);   /* for subtle red-tinted surfaces */

  /* ── Surface scale (deepest → raised) ──────────────────────────────────
     Use in order of elevation. Auth screens use the deepest; main app
     starts at --peak-bg; cards live on --peak-bg-surface; popovers and
     elevated headers on --peak-bg-elevated. */
  --peak-bg-deepest:   #0a0a0a;   /* auth backdrop, onboarding fullscreen */
  --peak-bg:           #121212;   /* primary app background */
  --peak-bg-surface:   #1c1c1c;   /* cards, input fields */
  --peak-bg-elevated:  #2a2a2a;   /* raised cards, popovers, header strips */
  --peak-bg-hover:     #323232;   /* row/cell hover state */

  /* ── Borders ───────────────────────────────────────────────────────────
     Three weights. Subtle = hairlines inside cards. Default = dividers
     between sections. Strong = focused/hovered input borders. */
  --peak-border-subtle:  #2a2a2a;
  --peak-border:         #3a3a3a;
  --peak-border-strong:  #4a4a4a;

  /* ── Text scale (primary → muted) ──────────────────────────────────────
     Primary for titles and hero numbers. Body for most content.
     Secondary for supporting captions. Muted for disabled/placeholder. */
  --peak-text-primary:    #ffffff;
  --peak-text-body:       #ededed;
  --peak-text-secondary:  #b0b0b0;
  --peak-text-tertiary:   #888888;
  --peak-text-muted:      #666666;

  /* ── Semantic (status) palette ─────────────────────────────────────────
     Each semantic color has a solid value (used for text, icons, ring
     strokes) and a low-opacity tint (used for pill/chip backgrounds).
     Keep these pairs consistent so all status surfaces feel identical. */
  --peak-success:        #2ecc71;
  --peak-success-tint:   rgba(46, 204, 113, 0.15);
  --peak-success-glow:   rgba(46, 204, 113, 0.40);

  --peak-warning:        #f39c12;
  --peak-warning-tint:   rgba(243, 156, 18, 0.20);
  --peak-warning-glow:   rgba(243, 156, 18, 0.40);

  --peak-info:           #3498db;
  --peak-info-tint:      rgba(52, 152, 219, 0.15);
  --peak-info-glow:      rgba(52, 152, 219, 0.40);

  --peak-danger:         #e74c3c;
  --peak-danger-tint:    rgba(231, 76, 60, 0.15);
  --peak-danger-text:    #ff8a8a;     /* soft red for body text in error blocks */

  --peak-neutral:        #999999;
  --peak-neutral-tint:   rgba(153, 153, 153, 0.15);

  /* ── Scheduled / pending (no Material analog in platform) ──────────── */
  --peak-pending:        #9b59b6;
  --peak-pending-tint:   rgba(155, 89, 182, 0.20);


  /* ═════════════════════════════════════════════════════════════════════
     BACKWARD-COMPAT ALIASES
     -----------------------------------------------------------------
     Historical token names used before @peak/brand existed. They alias
     to the canonical --peak-* values so existing code keeps working.
     New code should always use --peak-* directly. Aliases will be
     removed surface-by-surface once grep confirms no references remain.
     ═════════════════════════════════════════════════════════════════════ */

  /* ── electron-app/src/ui/styles/global.css historical names ───────── */
  --background-color:      var(--peak-bg);
  --surface-color:         var(--peak-bg-elevated);
  --on-background-color:   var(--peak-text-body);
  --border-color:          var(--peak-border);
  --border-color-2:        var(--peak-border-strong);
  --accent-color:          var(--peak-red);
  --success-color:         var(--peak-success);
  --warning-color:         var(--peak-warning);
  --info-color:            var(--peak-info);
  --idle-color:            var(--peak-neutral);

  /* ── electron-app/src/ui/views/LoginForm/LoginForm.css historical ─── */
  --bg-app:                var(--peak-bg-deepest);
  --bg-card:               var(--peak-bg);
  --bg-input:              var(--peak-bg-surface);
  --bg-input-focus:        var(--peak-bg-elevated);
  --border-subtle:         var(--peak-border-subtle);
  --border-focus:          var(--peak-border);
  --accent-red:            var(--peak-red);
  --accent-red-hover:      var(--peak-red-hover);
  --accent-glow:           var(--peak-red-glow);
  --text-primary:          var(--peak-text-primary);
  --text-secondary:        var(--peak-text-secondary);
  --text-muted:            var(--peak-text-muted);

  /* ── backend-server/public/ui/styles/landing.css historical ───────── */
  --bg-panel:              var(--peak-bg-surface);
  --bg-header:             var(--peak-bg-elevated);
  --border-highlight:      var(--peak-border-strong);
  --accent-primary:        var(--peak-red);
  --status-green:          var(--peak-success);
  --status-blue:           var(--peak-info);
  --status-orange:         var(--peak-warning);
  --text-tertiary:         var(--peak-text-tertiary);
}


/* ============================================================================
   @peak/brand — Typography tokens
   ============================================================================
   One sans, one mono. Modular scale on a 1.125 ratio. Tracking values are
   deliberate — tight on titles, wide on uppercase chips, normal everywhere
   else. No decorative tracking for mood.

   Inter is loaded from system or self-hosted. LoginForm already used Inter;
   this token unifies the family across all surfaces.
   ========================================================================= */

:root {
  /* ── Font stacks ──────────────────────────────────────────────────────
     Inter is the canonical sans. We keep a robust fallback chain so the
     app renders cleanly even before Inter loads (FOUT) or on systems
     where it isn't installed. */
  --peak-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, Helvetica, Arial, sans-serif;

  --peak-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New',
                    monospace;

  /* ── Size scale (1.125 minor-third, 16px base) ────────────────────────
     Use semantic names, not raw sizes. If you need something outside the
     scale, propose an addition rather than reaching for a literal rem. */
  --peak-text-xs:    0.72rem;   /* 11.5px — chip labels, captions, micro-copy */
  --peak-text-sm:    0.85rem;   /* 13.6px — secondary body, table labels */
  --peak-text-base:  1rem;      /* 16px   — body default */
  --peak-text-md:    1.125rem;  /* 18px   — prominent body, lead paragraph */
  --peak-text-lg:    1.35rem;   /* 21.6px — app wordmark, section h1 */
  --peak-text-xl:    1.75rem;   /* 28px   — auth screen title */
  --peak-text-2xl:   2.25rem;   /* 36px   — dashboard hero number */
  --peak-text-3xl:   3rem;      /* 48px   — marketing hero only */

  /* ── Weight scale ─────────────────────────────────────────────────────
     Four weights. Bold reserved for titles and hero numbers — everywhere
     else uses 500 (ui defaults) or 600 (emphasis). */
  --peak-weight-regular:  400;
  --peak-weight-medium:   500;
  --peak-weight-semi:     600;
  --peak-weight-bold:     700;

  /* ── Tracking (letter-spacing) ────────────────────────────────────────
     - tight: wordmarks, big titles, hero numbers. Makes the text feel
       intentional and premium.
     - normal: everything non-decorative.
     - relaxed: subtle emphasis on paragraph text (rare).
     - wide: uppercase chip/badge labels only. 0.5px (not 0.05em) matches
       the platform's chip convention in Devices.css / Settings.css. */
  --peak-tracking-tight:    -0.015em;
  --peak-tracking-tighter:  -0.02em;
  --peak-tracking-normal:    0;
  --peak-tracking-relaxed:   0.02em;
  --peak-tracking-wide:      0.5px;

  /* ── Line heights ─────────────────────────────────────────────────────
     Titles pack tight; body breathes. */
  --peak-leading-tight:   1.1;
  --peak-leading-snug:    1.25;
  --peak-leading-normal:  1.4;
  --peak-leading-relaxed: 1.6;

  /* ── Backward-compat aliases ──────────────────────────────────────── */
  --font-family-sans:  var(--peak-font-sans);
  --font-family-mono:  var(--peak-font-mono);
  --font-stack:        var(--peak-font-sans);  /* LoginForm historical name */
  --font-main:         var(--peak-font-sans);  /* landing.css historical name */
  --font-mono:         var(--peak-font-mono);  /* landing.css historical name */
}


/* ============================================================================
   @peak/brand — Space tokens
   ============================================================================
   Everything PEAK does sits on a 4px grid. Use named space tokens for
   padding, margin, and gap. If you're tempted to write `padding: 13px`
   you're probably violating the grid — round to 12 or 16.

   Scale rationale: 4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 covers 95% of
   real UI needs. Larger gaps (96, 128) are specific to marketing
   hero sections and should be handled locally, not tokenized.
   ========================================================================= */

:root {
  --peak-space-0:   0;
  --peak-space-1:   4px;    /* hairline separator, tight icon-text gap */
  --peak-space-2:   8px;    /* chip padding, small gaps */
  --peak-space-3:   12px;   /* list-item padding */
  --peak-space-4:   16px;   /* default card padding, section gaps */
  --peak-space-5:   24px;   /* generous card padding, large gaps */
  --peak-space-6:   32px;   /* section separation */
  --peak-space-7:   48px;   /* major section gap */
  --peak-space-8:   64px;   /* marketing hero top padding */
}


/* ============================================================================
   @peak/brand — Border-radius tokens
   ============================================================================
   Four steps. Smaller radii feel "technical" (inputs, dropdowns). Larger
   radii feel "soft" (cards, modals). Pills are only for chips/badges.
   ========================================================================= */

:root {
  --peak-radius-sm:   4px;     /* inputs, small buttons, dropdowns */
  --peak-radius-md:   6px;     /* default buttons, list items */
  --peak-radius-lg:   10px;    /* cards, panels */
  --peak-radius-xl:   16px;    /* modals, hero cards */
  --peak-radius-pill: 999px;   /* chips, status badges */
  --peak-radius-full: 50%;     /* circular controls, avatars */
}


/* ============================================================================
   @peak/brand — Shadow tokens
   ============================================================================
   Elevation system. Small number = close to surface. Larger = floating
   farther off. The brand halo is reserved exclusively for the main
   control button / primary CTA in the "ready to earn" state.

   Anti-pattern: do not animate shadow opacity above 15% for ambient
   effects. It stops reading as "elevation" and starts reading as
   "gaming RGB" (see BRAND.md §6).
   ========================================================================= */

:root {
  /* ── Elevation ─────────────────────────────────────────────────────── */
  --peak-shadow-sm:     0 2px 6px rgba(0, 0, 0, 0.35);
  --peak-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.50);
  --peak-shadow-lg:     0 8px 25px rgba(0, 0, 0, 0.60);
  --peak-shadow-xl:     0 12px 35px rgba(0, 0, 0, 0.70);
  --peak-shadow-card:   0 24px 48px -12px rgba(0, 0, 0, 0.50);  /* auth card */

  /* ── Brand halo ────────────────────────────────────────────────────── */
  /* Ambient PEAK-red glow for the primary control in its ready state.
     Used on .main-control-btn and nowhere else. */
  --peak-halo-ambient:  0 0 16px rgba(217, 0, 55, 0.07);
  --peak-halo-idle:     0 0 20px rgba(217, 0, 55, 0.10);
  --peak-halo-hover:    0 0 22px rgba(217, 0, 55, 0.14);

  /* ── Insets (input depth) ──────────────────────────────────────────── */
  --peak-inset-input:   inset 0 2px 4px rgba(0, 0, 0, 0.30);
  --peak-inset-subtle:  inset 0 1px 1px rgba(255, 255, 255, 0.08);
  --peak-inset-raised:  inset 0 1px 1px rgba(255, 255, 255, 0.15);

  /* ── Backward-compat aliases ──────────────────────────────────────── */
  --shadow-card:   var(--peak-shadow-card);
  --shadow-depth:  var(--peak-shadow-lg);
  --shadow-input:  var(--peak-inset-input);
}


/* ============================================================================
   @peak/brand — Motion tokens
   ============================================================================
   Motion acknowledges state, it does not decorate. See BRAND.md §5 rule
   "Motion exists to acknowledge state, not to decorate":
     - Under 400ms for UI transitions
     - Under 5% amplitude for ambient animations (breathing, pulsing)
     - No parallax, no hover wiggles, no scroll-driven animation in chrome
   ========================================================================= */

:root {
  /* ── Duration scale ─────────────────────────────────────────────────── */
  --peak-dur-instant:   80ms;    /* focus ring, active state press */
  --peak-dur-fast:      150ms;   /* button hover, tooltip show */
  --peak-dur-normal:    280ms;   /* default UI transition */
  --peak-dur-slow:      400ms;   /* modal enter/exit, panel slide */
  --peak-dur-slower:    600ms;   /* page-level transitions, toast dismiss */

  /* Ambient loops — very long on purpose. If a user actively notices
     one of these animations playing, it's too fast/too loud. */
  --peak-dur-breathe:   5000ms;  /* ambient halo breathing */
  --peak-dur-pulse:     2200ms;  /* status dot pulsing */

  /* ── Easing curves ─────────────────────────────────────────────────── */
  --peak-ease-out:      cubic-bezier(0.4, 0, 0.2, 1);      /* default UI */
  --peak-ease-in-out:   cubic-bezier(0.4, 0, 0.4, 1);      /* symmetric transitions */
  --peak-ease-morph:    cubic-bezier(0.65, 0, 0.35, 1);    /* iOS-style icon morph */
  --peak-ease-emphasis: cubic-bezier(0.2, 0, 0, 1);        /* Material emphasis curve */
  --peak-ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);     /* modal/card entrance */
}


/* ============================================================================
   @peak/brand — Effect tokens
   ============================================================================
   The signature PEAK visual motifs, distilled from the surfaces the brand
   already feels right on: the marketing landing page (peakminer.app) and
   the web dashboard (backend-server/public/ui/). These are the effects
   that give PEAK its "shine". They are defined as tokens so every surface
   renders them identically, and so they can be refined in one place.

   Rules:
   - Every effect here is subtle by default. Amplitudes are tuned for
     "trust signal", not "gaming RGB". If you need to dial something up,
     do it in a new modifier rather than bumping the base value.
   - The diagonal stripe motif (45° for ambient, -45° for current-state)
     is a brand signature. Do not introduce new stripe angles.
   - Brand red (#d90037) is the only color permitted in the ambient
     "brand halo" effect. Blue (#3498db) is the only secondary motif
     color, reserved for "currently active" indicators.
   ========================================================================= */

:root {
  /* ── Ambient surface texture ────────────────────────────────────────────
     The fixed backdrop that makes PEAK feel like a real product instead
     of a flat terminal. Two radial gradients (brand red at left, info
     blue at right) sit under a 50px grid at ~2% opacity. Assign to a
     `body { background: }` with `background-attachment: fixed` so it
     never scrolls away. */
  --peak-texture-grid:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  --peak-texture-grid-size:
    50px 50px, 50px 50px;

  --peak-texture-ambient:
    radial-gradient(circle at 15% 50%, rgba(217, 0, 55, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(52, 152, 219, 0.05) 0%, transparent 40%);

  /* Compact variant for the fixed 800×600 Electron window — the full
     landing-site texture is tuned for 1400+ wide and reads as busy in
     a small window. */
  --peak-texture-ambient-compact:
    radial-gradient(circle at 20% 20%, rgba(217, 0, 55, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(52, 152, 219, 0.04) 0%, transparent 50%);

  /* ── Diagonal stripe motifs ────────────────────────────────────────────
     PEAK's signature "in progress" language. Two forms:

     --peak-stripes-current     animated info-blue traffic tape for the
                                actively earning / processing bar in graphs
                                and hero mocks. Pair with
                                `animation: peak-stripe-flow 30s linear infinite`.

     --peak-stripes-brand       static brand-red ghost stripes at 3% opacity,
                                used in the landing hero as an ambient texture.
                                Purely decorative. */
  --peak-stripes-current:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgba(52, 152, 219, 0.30) 5px,
      rgba(52, 152, 219, 0.30) 10px
    );
  --peak-stripes-current-size: 28px 28px;

  --peak-stripes-brand:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(217, 0, 55, 0.03) 10px,
      rgba(217, 0, 55, 0.03) 20px
    );

  /* ── Accent line (card hover) ──────────────────────────────────────────
     The 1px gradient that appears at the top of a card when the user
     hovers it — transparent → brand red → info blue → transparent.
     Applied via .peak-card::before; the token exists so other surfaces
     (section headers, modal tops, etc.) can reuse the exact same
     gradient without eyeballing the stops. */
  --peak-accent-line:
    linear-gradient(90deg, transparent, var(--peak-red), var(--peak-info), transparent);

  --peak-accent-line-subtle:
    linear-gradient(90deg, transparent, var(--peak-border-strong), transparent);

  /* ── Logo / CTA radial sheen ───────────────────────────────────────────
     Used on the PEAK logo-mark and brand CTA buttons. A 45° shine that
     sweeps across a rotated element to imply polish. */
  --peak-sheen:
    linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.40), transparent);

  /* ── Text glows ────────────────────────────────────────────────────────
     Reserved for single values that represent active earnings or a
     primary hero metric. Never apply to body copy — the glow makes
     small text illegible. */
  --peak-glow-earnings:  0 0 15px rgba(46, 204, 113, 0.40);
  --peak-glow-focus:     0 0 8px  rgba(255, 255, 255, 0.55);
  --peak-glow-info:      0 0 12px rgba(52, 152, 219, 0.50);

  /* ── Ring filter drop-shadows (SVG) ────────────────────────────────────
     The main control button's ring uses these as filter: drop-shadow()
     values so the stroke lights up softly rather than from a flat glow.
     Mapping state → token here keeps ring colors cohesive with chip/
     badge colors of the same semantic meaning. */
  --peak-ring-success:   drop-shadow(0 0 6px rgba(46, 204, 113, 0.40));
  --peak-ring-info:      drop-shadow(0 0 6px rgba(52, 152, 219, 0.40));
  --peak-ring-warning:   drop-shadow(0 0 4px rgba(243, 156, 18, 0.30));
  --peak-ring-pending:   drop-shadow(0 0 6px rgba(155, 89, 182, 0.40));
}

/* ── Shared keyframes exposed at :root level ──────────────────────────
   `peak-stripe-flow` is the 30-second diagonal-stripe scroll used by the
   .peak-stripes-current effect. Exposed here (not inside primitives.css)
   so consumers that compose their own stripe element can still attach
   the animation without pulling in the class layer. */
@keyframes peak-stripe-flow {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 0; }
}

/* Very slow ambient breathing for brand halos. Amplitude kept under ±5%
   (see BRAND.md §5). Any faster or louder reads as a UI warning. */
@keyframes peak-halo-breathe {
  0%, 100% { opacity: 0.80; }
  50%      { opacity: 1.00; }
}

/* Status dot pulse — used for "connecting" / "pending" states only.
   Never apply to idle states; a pulsing dot while idle suggests the app
   is doing something when it isn't, which erodes trust. */
@keyframes peak-dot-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1.00; }
}


/* ============================================================================
   @peak/brand — Primitives
   ============================================================================
   Reusable composed classes that ARE the PEAK look. Every surface (Electron,
   web dashboard, marketing, marketplace, admin) can use these same classes
   with the same markup and render identically. Primitives are composed from
   the token layers — do not add new values here; add them in
   packages/peak-brand/src/tokens/*.css first.

   Classes prefix with `peak-` to avoid collision with any per-surface class
   names. BEM-style double-underscore is used for child elements and
   double-dash for modifiers (e.g. .peak-card__body, .peak-chip--success).

   Naming convention:
     .peak-<block>                  — base block
     .peak-<block>__<element>       — internal element
     .peak-<block>--<modifier>      — variant
   ========================================================================= */

/* ──────────────────────────────────────────────────────────────────────────
   1. peak-surface
   --------------------------------------------------------------------------
   The canonical PEAK body backdrop: deep #121212 with fixed radial
   brand/info ambient gradients and a 2% 50px grid. Gives every screen
   quiet depth without competing with content. Apply to <body> or to the
   outermost layout div of a full-screen view.

   Modifiers:
     --compact    lower-amplitude gradients for small windows (Electron)
     --flat       removes gradients, keeps grid only (auth/login screens)
   ────────────────────────────────────────────────────────────────────── */
.peak-surface {
  background-color: var(--peak-bg);
  background-image: var(--peak-texture-ambient), var(--peak-texture-grid);
  background-size: 100% 100%, 100% 100%, var(--peak-texture-grid-size);
  background-attachment: fixed;
}

.peak-surface--compact {
  background-image: var(--peak-texture-ambient-compact), var(--peak-texture-grid);
  background-size: 100% 100%, 100% 100%, var(--peak-texture-grid-size);
}

.peak-surface--flat {
  background-color: var(--peak-bg);
  background-image: var(--peak-texture-grid);
  background-size: var(--peak-texture-grid-size);
  background-attachment: fixed;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. peak-card
   --------------------------------------------------------------------------
   The signature PEAK card. 1px hairline border, 10px radius, a subtle
   accent-line at the top that illuminates on hover (transparent → red →
   blue → transparent). This is the motif that makes PEAK feel like
   "mining control software" rather than generic SaaS.

   Structure:
     <div class="peak-card peak-card--hoverable">
       <div class="peak-card__header">…</div>
       <div class="peak-card__body">…</div>
     </div>

   Modifiers:
     --hoverable    lifts 2px + lights the accent line on :hover
     --elevated     starts on a brighter surface (#2a2a2a vs #1c1c1c)
     --flush        removes padding (for card bodies that manage their own)
     --danger       red-tinted border, used for destructive-action modals
   ────────────────────────────────────────────────────────────────────── */
.peak-card {
  position: relative;
  background-color: var(--peak-bg-surface);
  border: 1px solid var(--peak-border-subtle);
  border-radius: var(--peak-radius-lg);
  overflow: hidden;
  transition:
    border-color  var(--peak-dur-normal) var(--peak-ease-out),
    transform     var(--peak-dur-normal) var(--peak-ease-out),
    box-shadow    var(--peak-dur-normal) var(--peak-ease-out),
    background    var(--peak-dur-normal) var(--peak-ease-out);
}

.peak-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--peak-accent-line-subtle);
  opacity: 0.5;
  pointer-events: none;
  transition:
    opacity var(--peak-dur-normal) var(--peak-ease-out),
    height  var(--peak-dur-normal) var(--peak-ease-out),
    background var(--peak-dur-normal) var(--peak-ease-out);
}

.peak-card--elevated {
  background-color: var(--peak-bg-elevated);
  border-color: var(--peak-border);
  box-shadow: var(--peak-shadow-md);
}

.peak-card--hoverable {
  cursor: pointer;
}

.peak-card--hoverable:hover {
  border-color: var(--peak-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--peak-shadow-lg);
}

.peak-card--hoverable:hover::before {
  opacity: 1;
  height: 2px;
  background: var(--peak-accent-line);
}

.peak-card--danger {
  border-color: rgba(231, 76, 60, 0.30);
}
.peak-card--danger::before {
  background: linear-gradient(90deg, transparent, var(--peak-danger), transparent);
  opacity: 0.6;
}

.peak-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--peak-space-3) var(--peak-space-4);
  background-color: var(--peak-bg-elevated);
  border-bottom: 1px solid var(--peak-border-subtle);
}

.peak-card__title {
  margin: 0;
  font-size: var(--peak-text-sm);
  font-weight: var(--peak-weight-semi);
  color: var(--peak-text-body);
  display: flex;
  align-items: center;
  gap: var(--peak-space-2);
}

.peak-card__body {
  padding: var(--peak-space-4);
}

.peak-card--flush .peak-card__body { padding: 0; }


/* ──────────────────────────────────────────────────────────────────────────
   3. peak-chip
   --------------------------------------------------------------------------
   Canonical status pill. 0.75em uppercase, 0.5px tracking, 3px×10px
   padding, pill radius. Every "status" badge across PEAK should use
   .peak-chip + a tone modifier — no more bespoke pill styles per view.

   Structure:
     <span class="peak-chip peak-chip--success">Mining</span>

   Tones:
     --neutral (default)   gray, for idle/offline
     --success             green, for mining/earning/active
     --info                blue, for benchmarking/loading
     --warning             orange, for stopping/attention
     --danger              red, for errors/offline-critical
     --pending             purple, for scheduled/waiting
     --brand               PEAK red, for brand-primary indicators (rare)
   ────────────────────────────────────────────────────────────────────── */
.peak-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--peak-radius-pill);
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-xs);
  font-weight: var(--peak-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--peak-tracking-wide);
  white-space: nowrap;
  border: 1px solid transparent;
  background-color: var(--peak-neutral-tint);
  color: var(--peak-neutral);
  user-select: none;
  transition:
    background-color var(--peak-dur-fast) var(--peak-ease-out),
    color            var(--peak-dur-fast) var(--peak-ease-out);
}

.peak-chip--success  { background: var(--peak-success-tint); color: var(--peak-success); }
.peak-chip--info     { background: var(--peak-info-tint);    color: var(--peak-info); }
.peak-chip--warning  { background: var(--peak-warning-tint); color: var(--peak-warning); }
.peak-chip--danger   { background: var(--peak-danger-tint);  color: var(--peak-danger); }
.peak-chip--pending  { background: var(--peak-pending-tint); color: var(--peak-pending); }
.peak-chip--brand    { background: var(--peak-red-tint);     color: var(--peak-red); }

/* Dot prefix — a small leading dot of the chip's tone color. Use for
   chips that represent live state (e.g. a running miner) so the eye
   picks them out in dense lists. */
.peak-chip__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--peak-radius-full);
  background-color: currentColor;
  margin-right: 6px;
  flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
   4. peak-stat
   --------------------------------------------------------------------------
   Large, refined statistic display — the "dashboard hero number" look.
   Light-weight gradient-text value with an uppercase muted caption.

   Structure:
     <div class="peak-stat">
       <div class="peak-stat__value">128</div>
       <div class="peak-stat__label">Active Miners</div>
     </div>

   Modifiers:
     --center           centers value and label
     --value-md         smaller value (1.5rem) for inline contexts
     --value-success    green tint for positive metrics
     --value-neutral    flat white, no gradient (for small numbers)
   ────────────────────────────────────────────────────────────────────── */
.peak-stat {
  display: flex;
  flex-direction: column;
  gap: var(--peak-space-1);
}

.peak-stat--center {
  align-items: center;
  text-align: center;
}

.peak-stat__value {
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-2xl);
  font-weight: var(--peak-weight-regular);
  letter-spacing: var(--peak-tracking-tighter);
  line-height: var(--peak-leading-tight);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--peak-text-primary);   /* fallback for browsers without bg-clip */
}

.peak-stat--value-md .peak-stat__value { font-size: var(--peak-text-lg); }

.peak-stat--value-neutral .peak-stat__value {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--peak-text-primary);
}

.peak-stat--value-success .peak-stat__value {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--peak-success);
  text-shadow: var(--peak-glow-earnings);
}

.peak-stat__label {
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-xs);
  font-weight: var(--peak-weight-semi);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--peak-text-tertiary);
}


/* ──────────────────────────────────────────────────────────────────────────
   5. peak-earnings
   --------------------------------------------------------------------------
   Signature PEAK earnings display: the dollar figure that glows green
   WHEN there are real earnings, and stays a calm neutral white when
   zero. Showing a vibrant-green "$0.00" is semantically dishonest, so
   the glow is opt-in via .peak-earnings--active.

   Structure:
     <span class="peak-earnings peak-earnings--active">$12.83</span>
   ────────────────────────────────────────────────────────────────────── */
.peak-earnings {
  color: var(--peak-text-body);
  font-family: var(--peak-font-sans);
  font-weight: var(--peak-weight-semi);
  font-variant-numeric: tabular-nums;
  transition:
    color        var(--peak-dur-slow) var(--peak-ease-out),
    text-shadow  var(--peak-dur-slow) var(--peak-ease-out);
  white-space: nowrap;
}

.peak-earnings--active {
  color: var(--peak-success);
  text-shadow: var(--peak-glow-earnings);
}


/* ──────────────────────────────────────────────────────────────────────────
   6. peak-btn
   --------------------------------------------------------------------------
   Button grammar. Three intents × three sizes. Only .peak-btn--primary
   uses the brand red — every other button is secondary/ghost so the
   eye knows where the single committing action lives on a screen.

   Structure:
     <button class="peak-btn peak-btn--primary">Start mining</button>
     <button class="peak-btn peak-btn--secondary peak-btn--sm">Cancel</button>

   Intents:
     --primary    brand red, for the single main action per screen
     --secondary  hairline border, neutral color
     --ghost      transparent, appears on hover only
     --danger     red, for destructive actions (delete, force-stop)
     --success    green, used sparingly for "claim earnings" etc.

   Sizes:
     --sm         28px tall
     (default)    36px tall
     --lg         44px tall
   ────────────────────────────────────────────────────────────────────── */
.peak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--peak-space-2);
  height: 36px;
  padding: 0 var(--peak-space-4);
  border: 1px solid transparent;
  border-radius: var(--peak-radius-md);
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-sm);
  font-weight: var(--peak-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    background-color 0.12s ease,
    border-color     0.12s ease,
    color            0.12s ease,
    opacity          0.12s ease;
  box-sizing: border-box;
}

.peak-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10), 0 0 0 3px var(--peak-red);
}

.peak-btn:disabled,
.peak-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — single most important action on a screen. Brand red. */
.peak-btn--primary {
  background-color: var(--peak-red);
  color: #ffffff;
}
.peak-btn--primary:hover {
  background-color: var(--peak-red-hover);
  opacity: 0.95;
}
.peak-btn--primary:active {
  background-color: var(--peak-red-pressed);
}

/* Secondary — hairline outline. For complementary, safe actions. */
.peak-btn--secondary {
  background-color: transparent;
  border-color: var(--peak-border);
  color: var(--peak-text-body);
}
.peak-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--peak-border-strong);
  color: var(--peak-text-primary);
}

/* Ghost — no chrome by default; appears on :hover. Use in toolbars. */
.peak-btn--ghost {
  background-color: transparent;
  color: var(--peak-text-secondary);
}
.peak-btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--peak-text-primary);
}

/* Danger — confirm-delete / force-stop. Red with a subtle border so it
   looks distinct from the primary brand red CTA. */
.peak-btn--danger {
  background-color: transparent;
  border-color: rgba(231, 76, 60, 0.35);
  color: var(--peak-danger);
}
.peak-btn--danger:hover {
  background-color: var(--peak-danger-tint);
  border-color: var(--peak-danger);
  color: #ff8a8a;
}

/* Success — "claim" / "collect". Reserved for positive financial events. */
.peak-btn--success {
  background-color: var(--peak-success);
  color: #0a1d12;
}
.peak-btn--success:hover {
  background-color: #27b360;
}
.peak-btn--success:active {
  background-color: #219d52;
}

/* Sizes */
.peak-btn--sm { height: 28px; padding: 0 var(--peak-space-3); font-size: var(--peak-text-xs); gap: 6px; }
.peak-btn--lg { height: 44px; padding: 0 var(--peak-space-5); font-size: var(--peak-text-base); }

/* Icon-only square variant — keep aspect ratio 1:1. */
.peak-btn--icon { padding: 0; width: 36px; }
.peak-btn--icon.peak-btn--sm { width: 28px; }
.peak-btn--icon.peak-btn--lg { width: 44px; }

.peak-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.peak-btn svg.icon,
.peak-btn svg[stroke],
.peak-btn svg[fill="none"] {
  fill: none !important;
  stroke: currentColor;
}
.peak-btn svg:not([stroke]):not([fill="none"]):not(.icon) {
  fill: currentColor;
}
.peak-btn--lg svg { width: 18px; height: 18px; }
.peak-btn--sm svg { width: 14px; height: 14px; }

/* Block utility — expands to full parent width */
.peak-btn--block {
  display: flex !important;
  width: 100% !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Legacy Button Aliases
   Maps legacy .btn classes directly to canonical Peak button styles so that
   any existing platform code inherits identical snappy tokens and layout.
   ────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--peak-space-2);
  height: 36px;
  padding: 0 var(--peak-space-4);
  border: 1px solid transparent;
  border-radius: var(--peak-radius-md);
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-sm);
  font-weight: var(--peak-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  box-sizing: border-box;
  background-color: var(--peak-red);
  color: #ffffff;
  transition:
    background-color 0.12s ease,
    border-color     0.12s ease,
    color            0.12s ease,
    opacity          0.12s ease;
}

.btn:hover {
  background-color: var(--peak-red-hover);
  opacity: 0.95;
}

.btn:active {
  background-color: var(--peak-red-pressed);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10), 0 0 0 3px var(--peak-red);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background-color: var(--peak-red) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.btn-primary:hover {
  background-color: var(--peak-red-hover) !important;
  opacity: 0.95 !important;
}

.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--peak-border) !important;
  color: var(--peak-text-body) !important;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--peak-border-strong) !important;
  color: var(--peak-text-primary) !important;
}

.btn-sm,
.btn-small {
  height: 28px !important;
  padding: 0 var(--peak-space-3) !important;
  font-size: var(--peak-text-xs) !important;
  gap: 6px !important;
}

.btn-block {
  display: flex !important;
  width: 100% !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   7. peak-segmented
   --------------------------------------------------------------------------
   Connected border-box button group / segmented control ("split button").
   Unified styling inspired by the Wallets view toggle:
   - Clean outer border with subtle 6px corner radius
   - Crisp internal vertical dividers between buttons
   - Zero gap, zero inner container padding (flat connected border box)
   - Flat active fill matching the surface color
   - Micro-interaction active state on click
   - Standard 36px control height aligning with .btn-secondary & .btn-primary
   - Support for text labels, count badges, and crisp SVG icons
   ────────────────────────────────────────────────────────────────────── */
.peak-segmented {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 1px solid var(--border-color-2, var(--peak-border-subtle, rgba(255, 255, 255, 0.08))) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.peak-segmented .peak-segmented__btn,
.peak-segmented .seg-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0 16px !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--idle-color, #999999) !important;
  font-family: inherit !important;
  font-size: 0.8125rem !important; /* 13px */
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Crisp vertical divider between adjacent buttons */
.peak-segmented .peak-segmented__btn + .peak-segmented__btn,
.peak-segmented .seg-btn + .seg-btn,
.peak-segmented .peak-segmented__btn + .seg-btn,
.peak-segmented .seg-btn + .peak-segmented__btn {
  border-left: 1px solid var(--border-color-2, var(--peak-border-subtle, rgba(255, 255, 255, 0.08))) !important;
}

/* Hover state */
.peak-segmented .peak-segmented__btn:hover:not(.peak-segmented__btn--active):not(.active),
.peak-segmented .seg-btn:hover:not(.peak-segmented__btn--active):not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--on-background-color, #ffffff) !important;
}

/* Active / Selected state - clean, flat surface fill */
.peak-segmented .peak-segmented__btn--active,
.peak-segmented .peak-segmented__btn.active,
.peak-segmented .seg-btn.active {
  background: var(--surface-color, #2a2a2a) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Click micro-interaction for icons */
.peak-segmented .peak-segmented__btn:active svg,
.peak-segmented .seg-btn:active svg {
  transform: scale(0.92) !important;
}

/* ─── Size Modifiers ─── */

/* Large (36px control height) — standard button group matching .btn-secondary */
.peak-segmented--lg {
  height: 36px !important;
}
.peak-segmented--lg .peak-segmented__btn,
.peak-segmented--lg .seg-btn {
  padding: 0 16px !important;
  font-size: 0.8125rem !important;
}
.peak-segmented--lg .peak-segmented__btn--icon-only,
.peak-segmented--lg .seg-btn.peak-segmented__btn--icon-only {
  width: 36px !important;
  padding: 0 !important;
}

/* Medium (32px control height) */
.peak-segmented--md {
  height: 32px !important;
}
.peak-segmented--md .peak-segmented__btn,
.peak-segmented--md .seg-btn {
  padding: 0 12px !important;
  font-size: 0.78rem !important;
}
.peak-segmented--md .peak-segmented__btn--icon-only,
.peak-segmented--md .seg-btn.peak-segmented__btn--icon-only {
  width: 32px !important;
  padding: 0 !important;
}

/* Small (28px compact height) */
.peak-segmented--sm {
  height: 28px !important;
}
.peak-segmented--sm .peak-segmented__btn,
.peak-segmented--sm .seg-btn {
  padding: 0 10px !important;
  font-size: 0.75rem !important;
}
.peak-segmented--sm .peak-segmented__btn--icon-only,
.peak-segmented--sm .seg-btn.peak-segmented__btn--icon-only {
  width: 28px !important;
  padding: 0 !important;
}

/* Icon-only button helper (e.g. grid/list switcher) */
.peak-segmented .peak-segmented__btn--icon-only,
.peak-segmented .seg-btn.peak-segmented__btn--icon-only {
  aspect-ratio: 1 !important;
  width: 36px;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.peak-segmented .peak-segmented__btn--icon-only svg,
.peak-segmented .seg-btn.peak-segmented__btn--icon-only svg {
  display: block !important;
}

/* Numeric Count Badge within a Segmented Item */
.peak-segmented__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--idle-color, #999999) !important;
  line-height: 1.2 !important;
  margin-left: 2px !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}

.peak-segmented .peak-segmented__btn:hover .peak-segmented__badge,
.peak-segmented .seg-btn:hover .peak-segmented__badge {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--on-background-color, #ffffff) !important;
}

.peak-segmented .peak-segmented__btn--active .peak-segmented__badge,
.peak-segmented .peak-segmented__btn.active .peak-segmented__badge,
.peak-segmented .seg-btn.active .peak-segmented__badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   8. peak-stripe-current
   --------------------------------------------------------------------------
   Apply to an element to give it the signature "in progress" diagonal-
   stripe treatment. Used on the current-bar in the web dashboard's
   earnings graph. The stripe motion is slow on purpose — fast stripes
   read as "loading bar", slow stripes read as "actively earning".

   Usage:
     <div class="peak-stripe-current" style="height: 100px">…</div>
   ────────────────────────────────────────────────────────────────────── */
.peak-stripe-current {
  background-color: rgba(52, 152, 219, 0.10);
  background-image: var(--peak-stripes-current);
  background-size: var(--peak-stripes-current-size);
  border: 1px solid var(--peak-info);
  animation: peak-stripe-flow 30s linear infinite;
}


/* ──────────────────────────────────────────────────────────────────────────
   9. peak-field
   --------------------------------------------------------------------------
   Input/select/textarea. Inset-lit, hairline border, brand-red focus ring.

   Structure:
     <label class="peak-field">
       <span class="peak-field__label">Wallet address</span>
       <input class="peak-field__input" type="text">
     </label>
   ────────────────────────────────────────────────────────────────────── */
.peak-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.peak-field__label {
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-xs);
  font-weight: var(--peak-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--peak-tracking-wide);
  color: var(--peak-text-tertiary);
}

.peak-field__input,
.peak-field__select,
.peak-field__textarea {
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-sm);
  color: var(--peak-text-body);
  background-color: var(--peak-bg-surface);
  border: 1px solid var(--peak-border);
  border-radius: var(--peak-radius-md);
  padding: 0 12px;
  height: 36px;
  box-shadow: var(--peak-inset-input);
  transition:
    border-color var(--peak-dur-fast) var(--peak-ease-out),
    box-shadow   var(--peak-dur-fast) var(--peak-ease-out),
    background   var(--peak-dur-fast) var(--peak-ease-out);
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

.peak-field__textarea {
  height: auto;
  padding: 10px 12px;
  line-height: var(--peak-leading-normal);
  resize: vertical;
}

.peak-field__input:hover,
.peak-field__select:hover,
.peak-field__textarea:hover {
  background-color: var(--peak-bg-elevated);
  border-color: var(--peak-border-strong);
}

.peak-field__input:focus,
.peak-field__select:focus,
.peak-field__textarea:focus {
  border-color: var(--peak-red);
  box-shadow: var(--peak-inset-input), 0 0 0 3px rgba(217, 0, 55, 0.15);
  background-color: var(--peak-bg-elevated);
}


/* ──────────────────────────────────────────────────────────────────────────
   10. peak-section
   --------------------------------------------------------------------------
   Section heading — the small uppercase label + bigger subtitle pattern
   used as a section marker on the marketing site. Works just as well in
   a dense app panel.

   Structure:
     <header class="peak-section">
       <div class="peak-section__eyebrow">Dashboard</div>
       <h2 class="peak-section__title">Today's earnings</h2>
     </header>
   ────────────────────────────────────────────────────────────────────── */
.peak-section { margin-bottom: var(--peak-space-5); }

.peak-section__eyebrow {
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-xs);
  font-weight: var(--peak-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--peak-text-tertiary);
  margin-bottom: var(--peak-space-1);
}

.peak-section__title {
  margin: 0;
  font-family: var(--peak-font-sans);
  font-size: var(--peak-text-lg);
  font-weight: var(--peak-weight-semi);
  color: var(--peak-text-primary);
  letter-spacing: var(--peak-tracking-tight);
}


/* ──────────────────────────────────────────────────────────────────────────
   11. peak-divider
   --------------------------------------------------------------------------
   Thin separator line. Horizontal by default.
   ────────────────────────────────────────────────────────────────────── */
.peak-divider {
  border: none;
  border-top: 1px solid var(--peak-border-subtle);
  margin: var(--peak-space-4) 0;
  height: 0;
}

.peak-divider--vertical {
  border-top: none;
  border-left: 1px solid var(--peak-border-subtle);
  height: auto;
  width: 0;
  margin: 0 var(--peak-space-3);
  align-self: stretch;
}


/* ──────────────────────────────────────────────────────────────────────────
   12. peak-mono
   --------------------------------------------------------------------------
   Monospace + tabular-nums utility. Use on any element that displays
   hash-like data (wallet addresses, hex shares, job IDs).
   ────────────────────────────────────────────────────────────────────── */
.peak-mono {
  font-family: var(--peak-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}


/* ──────────────────────────────────────────────────────────────────────────
   13. peak-logo-mark
   --------------------------------------------------------------------------
   The brand logo tile — brand-red gradient square with a sheen animation
   and inner glow. Shared by the marketing nav and (eventually) the
   Electron app titlebar. Single source of truth so every surface renders
   the mark identically.

   Structure:
     <div class="peak-logo-mark" aria-hidden="true"></div>
     <!-- optionally pair with a wordmark span -->
     <span class="peak-wordmark">PEAK</span>
   ────────────────────────────────────────────────────────────────────── */
.peak-logo-mark {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: var(--peak-radius-sm);
  background: linear-gradient(135deg, var(--peak-red), #a00028);
  box-shadow: 0 0 10px var(--peak-red-glow);
  overflow: hidden;
  flex-shrink: 0;
}

.peak-logo-mark::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--peak-sheen);
  transform: rotate(45deg);
  animation: peak-logo-sheen 3s infinite;
  pointer-events: none;
}

@keyframes peak-logo-sheen {
  0%   { transform: translateX(-100%) rotate(45deg); }
  20%  { transform: translateX(100%)  rotate(45deg); }
  100% { transform: translateX(100%)  rotate(45deg); }
}

.peak-wordmark {
  font-family: var(--peak-font-sans);
  font-weight: var(--peak-weight-bold);
  font-size: var(--peak-text-md);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--peak-text-primary);
}

/* ==========================================================================
   STAT CARD COMPONENT
   ========================================================================== */
.stat-card {
  background: var(--peak-surface);
  border: 1px solid var(--peak-border);
  border-radius: var(--peak-radius-md);
  padding: var(--peak-space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82px;
  box-sizing: border-box;
}

.stat-label {
  font-size: var(--peak-text-xs);
  color: var(--peak-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--peak-space-1);
  font-weight: var(--peak-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: var(--peak-radius-sm);
  background: var(--peak-surface-active);
  color: var(--peak-text-secondary);
}

.stat-primary {
  font-size: var(--peak-text-xl);
  font-weight: var(--peak-weight-medium);
  color: var(--peak-text-primary);
  line-height: 32px;
  margin-bottom: 0;
}

.stat-secondary {
  font-size: var(--peak-text-sm);
  color: var(--peak-text-tertiary);
  margin-top: var(--peak-space-1);
}

/* ==========================================================================
   LOG VIEWER COMPONENT
   ========================================================================== */
.log-viewer,
.logs-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--peak-space-2);
}

.logs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: var(--peak-space-2);
}

.logs-header-left {
  display: flex;
  align-items: baseline;
  gap: var(--peak-space-3);
}

.logs-header h4 {
  margin: 0;
  color: var(--peak-text-primary);
  font-size: var(--peak-text-sm);
  font-weight: var(--peak-weight-semibold);
}

.log-status {
  font-size: var(--peak-text-xs);
  color: var(--peak-text-tertiary);
}

.logs-header-actions {
  display: flex;
  align-items: center;
  gap: var(--peak-space-2);
}

.log-action-btn {
  background: var(--peak-surface);
  border: 1px solid var(--peak-border);
  color: var(--peak-text-secondary);
  font-size: var(--peak-text-xs);
  padding: 4px 10px;
  border-radius: var(--peak-radius-sm);
  cursor: pointer;
  transition: all var(--peak-motion-fast);
}

.log-action-btn:hover {
  background: var(--peak-surface-hover);
  color: var(--peak-text-primary);
  border-color: var(--peak-border-strong);
}

/* Canonical Copy Button & Feedback Styling across all UI surfaces */
.peak-btn--copied,
.peak-btn.copied,
.copy-btn.copied,
.copy-addr-btn.copied,
.copy-dest-btn.copied,
.liquidity-copy-btn.copied,
.liquidity-copy-btn.liquidity-copy-success,
.mp-copy-btn.copied,
.log-action-btn.copied,
.table-btn-icon.copied,
.table-btn-copy.copied {
  background: rgba(46, 204, 113, 0.16) !important;
  border-color: var(--peak-success, #2ecc71) !important;
  color: var(--peak-success, #2ecc71) !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.22) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

.peak-btn--copied svg,
.peak-btn.copied svg,
.copy-btn.copied svg,
.copy-addr-btn.copied svg,
.copy-dest-btn.copied svg,
.liquidity-copy-btn.copied svg,
.mp-copy-btn.copied svg,
.table-btn-icon.copied svg,
.table-btn-copy.copied svg {
  stroke: var(--peak-success, #2ecc71) !important;
}

@keyframes peakCheckPop {
  0% { transform: scale(0.65); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.peak-icon--check {
  display: inline-block;
  vertical-align: middle;
  transform-origin: center;
  animation: peakCheckPop 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.logs-container {
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--peak-text-secondary);
  font-family: var(--peak-font-mono);
  font-size: 0.85rem;
  padding: var(--peak-space-3);
  border-radius: var(--peak-radius-md);
  border: 1px solid var(--peak-border);
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.log-line {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 1px 0;
  line-height: 1.4;
  width: 100%;
}

.log-timestamp {
  color: var(--peak-text-tertiary);
  margin-right: var(--peak-space-3);
  min-width: 80px;
  flex-shrink: 0;
  user-select: none;
  font-size: 0.9em;
}

.log-source {
  color: var(--peak-info);
  margin-right: var(--peak-space-2);
  flex-shrink: 0;
  user-select: none;
  font-size: 0.9em;
}

.log-content {
  flex: 1;
  word-break: break-all;
  min-width: 0;
}

.log-line.log-error,
.log-line.log-stderr {
  color: var(--peak-error);
}

.log-line.log-warn,
.log-line.log-warning {
  color: var(--peak-warning);
}

.log-line.log-info,
.log-line.log-stdout {
  color: var(--peak-text-primary);
}

.logs-loading,
.logs-error,
.logs-empty {
  padding: var(--peak-space-5);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--peak-radius-md);
  color: var(--peak-text-tertiary);
  text-align: center;
  border: 1px dashed var(--peak-border);
  margin: auto;
  width: 100%;
  box-sizing: border-box;
}

.logs-error {
  color: var(--peak-error);
  border-color: rgba(231, 76, 60, 0.3);
  background: rgba(231, 76, 60, 0.05);
}

/* ==========================================================================
   Universal Custom Scrollbar (Across All Views, Modals & Components)
   ========================================================================== */

/* Firefox standard scrollbar properties */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--peak-border-subtle, var(--border-color-2, #444)) transparent;
}

/* Chrome, Edge, Safari, Electron webkit scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--peak-border-subtle, var(--border-color-2, #444));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--peak-text-tertiary, var(--idle-color, #777));
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==========================================================================
   Universal Numeric Input Reset (Across All Views, Modals & Components)
   Strips unstyled native browser spin buttons so dark-themed inputs stay clean
   ========================================================================== */

/* Chrome, Safari, Edge, Opera, Electron webkit spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox standard textfield appearance */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Universal Password Reveal Button Reset (Hides duplicate Edge/Chromium native eye icons) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   Custom PEAK Stepper Component (Opt-in for integer/counter inputs)
   ========================================================================== */
.peak-stepper-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.peak-stepper-wrap input[type="number"] {
  padding-right: 28px !important;
}

.peak-stepper-controls {
  position: absolute;
  right: 4px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 8px);
  width: 20px;
  justify-content: center;
  gap: 1px;
}

.peak-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: transparent;
  border: none;
  color: var(--peak-text-tertiary, var(--idle-color, #777));
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.peak-stepper-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--peak-text-primary, var(--on-background-color, #e0e0e0));
}

.peak-stepper-btn:active {
  color: var(--peak-red, var(--accent-color, #d90037));
}