/* ═══════════════════════════════════════════════════════════════
   V27 ChainForge Design System — Shared CSS
   Blueprint grid + amber markers + DM Mono typography
   ═══════════════════════════════════════════════════════════════ */

:root {
    --cf-void: #06080C;
    --cf-dark: #0A0E14;
    --cf-card: #0D1117;
    --cf-amber: #F59E0B;
    --cf-green: #22C55E;
    --cf-red: #EF4444;
    --cf-cyan: #06B6D4;
    --cf-purple: #A855F7;
    --cf-border: rgba(245,158,11,0.10);
    --cf-grid-color: rgba(245,158,11,0.04);
    --cf-grid-size: 40px;
    --cf-text: #FAFAFA;
    --cf-text-muted: #71717A;
    --cf-mono: 'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;
}

/* ─── Blueprint Grid Background ─── */
.cf-page {
    min-height: 100vh;
    background:
        repeating-linear-gradient(0deg, var(--cf-grid-color) 0 1px, transparent 1px var(--cf-grid-size)),
        repeating-linear-gradient(90deg, var(--cf-grid-color) 0 1px, transparent 1px var(--cf-grid-size));
    background-size: var(--cf-grid-size) var(--cf-grid-size);
}

/* ─── Card with amber corner markers ─── */
.cf-card {
    background: var(--cf-card);
    border: 1px solid var(--cf-border);
    border-radius: 2px;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.cf-card:hover {
    border-color: rgba(245,158,11,0.25);
    box-shadow: 0 0 20px rgba(245,158,11,0.05);
}
.cf-card::before, .cf-card::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid var(--cf-amber);
    opacity: 0.25;
    pointer-events: none;
}
.cf-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.cf-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ─── Label with ■ prefix ─── */
.cf-label {
    font-family: var(--cf-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
    margin-bottom: 0.5rem;
}
.cf-label::before {
    content: '■ ';
    color: var(--cf-amber);
}

/* ─── Buttons ─── */
.cf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-family: var(--cf-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
}
.cf-btn--primary {
    color: var(--cf-void);
    background: var(--cf-amber);
}
.cf-btn--primary:hover {
    box-shadow: 0 0 20px rgba(245,158,11,0.3);
}
.cf-btn--ghost {
    color: var(--cf-text-muted);
    background: transparent;
    border: 1px solid var(--cf-border);
}
.cf-btn--ghost:hover {
    border-color: var(--cf-amber);
    color: var(--cf-amber);
}

/* ─── Divider ─── */
.cf-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--cf-amber) 50%, transparent 100%);
    opacity: 0.15;
    margin: 1.5rem 0;
    position: relative;
}
.cf-divider::after {
    content: '◆';
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    font-size: 8px;
    color: var(--cf-amber);
    opacity: 0.4;
}

/* ─── Hero Section ─── */
.cf-hero {
    position: relative;
    padding: 2.5rem 0 1.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    min-height: 220px;
}
.cf-hero__canvas {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: calc(100% + 40px);
    opacity: 0.7;
    z-index: 0;
}
.cf-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}
.cf-hero__title {
    font-family: var(--cf-mono);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--cf-text);
    text-shadow: 0 0 40px rgba(245,158,11,0.15);
    margin: 0;
}
.cf-hero__title span {
    color: var(--cf-amber);
}
.cf-hero__subtitle {
    font-family: var(--cf-mono);
    font-size: 12px;
    color: var(--cf-text-muted);
    margin-top: 0.75rem;
    max-width: 400px;
}

/* ─── Footer ─── */
.cf-footer {
    text-align: center;
    padding: 2rem 0 1rem;
    font-family: var(--cf-mono);
    font-size: 10px;
    color: var(--cf-text-muted);
    opacity: 0.4;
}

/* ─── Mono Numbers ─── */
.cf-num {
    font-family: var(--cf-mono);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   V27 AUTO-UPGRADE LAYER
   Automatically re-styles V25/V26 elements inside .cf-page
   so bulk-converted pages get the V27 look without blade edits
   ═══════════════════════════════════════════════════════════════ */

/* ─── Force V27 background & font on .cf-page ─── */
.cf-page {
    background-color: var(--cf-void) !important;
    color: var(--cf-text) !important;
}

/* ─── Auto-upgrade V25 glass cards → V27 cf-card style ─── */
.cf-page [class*="v25-glass"],
.cf-page [class*="v25-card"],
.cf-page [class*="v26-card"],
.cf-page [class*="v26-glass"],
.cf-page [class*="n-stat-card"],
.cf-page [style*="glass-frost"],
.cf-page [style*="glass-card"],
.cf-page .rounded-2xl[style*="rgba(255,255,255"],
.cf-page .rounded-xl[style*="rgba(255,255,255"] {
    background: var(--cf-card) !important;
    border: 1px solid var(--cf-border) !important;
    border-radius: 2px !important;
    backdrop-filter: none !important;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.cf-page [class*="v25-glass"]:hover,
.cf-page [class*="v25-card"]:hover,
.cf-page [class*="v26-card"]:hover,
.cf-page [class*="v26-glass"]:hover,
.cf-page [class*="n-stat-card"]:hover {
    border-color: rgba(245,158,11,0.25) !important;
    box-shadow: 0 0 20px rgba(245,158,11,0.05) !important;
}

/* Amber corner markers on upgraded cards */
.cf-page [class*="v25-glass"]::before,
.cf-page [class*="v25-card"]::before,
.cf-page [class*="v26-card"]::before,
.cf-page [class*="v26-glass"]::before {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border: 1px solid var(--cf-amber) !important;
    opacity: 0.25 !important;
    pointer-events: none !important;
    top: -1px !important; left: -1px !important;
    border-right: none !important; border-bottom: none !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    inset: auto !important;
}
.cf-page [class*="v25-glass"]::after,
.cf-page [class*="v25-card"]::after,
.cf-page [class*="v26-card"]::after,
.cf-page [class*="v26-glass"]::after {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border: 1px solid var(--cf-amber) !important;
    opacity: 0.25 !important;
    pointer-events: none !important;
    bottom: -1px !important; right: -1px !important;
    border-left: none !important; border-top: none !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    inset: auto !important;
    top: auto !important; left: auto !important;
}

/* ─── Auto-upgrade rounded borders → sharp V27 ─── */
.cf-page [class*="rounded-2xl"],
.cf-page [class*="rounded-xl"],
.cf-page [class*="rounded-lg"] {
    border-radius: 2px !important;
}

/* ─── Auto-upgrade old gradient borders → amber border ─── */
.cf-page [style*="border-image"],
.cf-page [style*="border-gradient"] {
    border-image: none !important;
    border: 1px solid var(--cf-border) !important;
}

/* ─── Auto-upgrade old background orbs/grid → hide ─── */
.cf-page .v25-bg-orbs,
.cf-page .v25-bg-grid,
.cf-page .v25-bg-noise,
.cf-page [class*="v25-bg-orb"],
.cf-page [class*="v26-nebula-bg"] {
    display: none !important;
}

/* ─── Auto-upgrade holographic cards ─── */
.cf-page [class*="holographic"] {
    background: var(--cf-card) !important;
    border: 1px solid var(--cf-border) !important;
    border-image: none !important;
    border-radius: 2px !important;
}

/* ─── Auto-upgrade typography to DM Mono for headers ─── */
.cf-page h1,
.cf-page h2,
.cf-page h3 {
    font-family: var(--cf-mono) !important;
    letter-spacing: -0.02em;
}
.cf-page h1 { font-weight: 800; }
.cf-page h2 { font-weight: 700; }

/* ─── Auto-upgrade stat values → mono ─── */
.cf-page [class*="stat"] [class*="value"],
.cf-page [class*="text-2xl"][class*="font-black"],
.cf-page [class*="text-3xl"][class*="font-bold"],
.cf-page [x-count-up] {
    font-family: var(--cf-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* ─── Auto-upgrade labels → cf-label style ─── */
.cf-page [class*="text-muted"][class*="uppercase"][class*="tracking"],
.cf-page [class*="text-text-muted"][class*="uppercase"],
.cf-page [class*="tracking-wider"][class*="uppercase"] {
    font-family: var(--cf-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
}

/* ─── Auto-upgrade buttons ─── */
.cf-page [class*="v25-btn"],
.cf-page [class*="v26-btn"] {
    font-family: var(--cf-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
}

/* ─── Auto-upgrade dividers/separators ─── */
.cf-page hr,
.cf-page [class*="divider"],
.cf-page [class*="separator"] {
    border-color: var(--cf-border) !important;
    opacity: 0.3;
}

/* ─── Auto-upgrade V25 accent colors → amber ─── */
.cf-page [style*="--v25-amber"],
.cf-page [style*="--v25-cyan"] {
    --v25-amber: var(--cf-amber);
    --v25-cyan: var(--cf-amber);
}

/* ─── Kill V26 nebula specific effects inside cf-page ─── */
.cf-page [class*="nebula-glow"],
.cf-page [class*="nebula-particle"],
.cf-page [class*="holographic"]::before {
    display: none !important;
}

/* ─── Auto-upgrade tab buttons ─── */
.cf-page [role="tab"],
.cf-page [class*="tab-btn"],
.cf-page [class*="tab-item"] {
    font-family: var(--cf-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    border-radius: 2px !important;
}
.cf-page [role="tab"][aria-selected="true"],
.cf-page [role="tab"].active,
.cf-page [class*="tab-btn"].active {
    border-color: var(--cf-amber) !important;
    color: var(--cf-amber) !important;
}

/* ─── Auto-upgrade badge/tags ─── */
.cf-page [class*="badge"],
.cf-page [class*="tag-"] {
    border-radius: 2px !important;
    font-family: var(--cf-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
}

/* ─── Auto-upgrade input fields ─── */
.cf-page input[type="text"],
.cf-page input[type="number"],
.cf-page input[type="search"],
.cf-page input[type="email"],
.cf-page select,
.cf-page textarea {
    background: var(--cf-dark) !important;
    border: 1px solid var(--cf-border) !important;
    border-radius: 2px !important;
    color: var(--cf-text) !important;
    font-family: var(--cf-mono) !important;
    font-size: 12px !important;
}
.cf-page input:focus,
.cf-page select:focus,
.cf-page textarea:focus {
    border-color: var(--cf-amber) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(245,158,11,0.2) !important;
}

/* ─── Auto-upgrade tables ─── */
.cf-page table {
    border-collapse: collapse;
    width: 100%;
}
.cf-page th {
    font-family: var(--cf-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--cf-text-muted) !important;
    border-bottom: 1px solid var(--cf-border) !important;
    padding: 0.75rem 1rem !important;
}
.cf-page td {
    font-family: var(--cf-mono) !important;
    font-size: 12px !important;
    border-bottom: 1px solid rgba(245,158,11,0.05) !important;
    padding: 0.625rem 1rem !important;
}
.cf-page tr:hover td {
    background: rgba(245,158,11,0.03) !important;
}

/* ─── Green/red color tokens remain consistent ─── */
.cf-page .text-green-500, .cf-page .text-green-400,
.cf-page [class*="profit"], .cf-page [style*="--v25-profit"],
.cf-page [style*="--v26-profit"] { color: var(--cf-green) !important; }
.cf-page .text-red-500, .cf-page .text-red-400,
.cf-page [class*="loss"], .cf-page [style*="--v25-loss"],
.cf-page [style*="--v26-loss"] { color: var(--cf-red) !important; }

/* ─── Hide old V25/V26 nebula ambient backgrounds inside cf-page ─── */
.cf-page > .fixed[aria-hidden="true"],
.cf-page .fixed.inset-0.pointer-events-none.-z-10 {
    display: none !important;
}

/* ─── Hide old page headers when cf-hero is present (safety net) ─── */
.cf-hero ~ .cf-page .n26-entrance:first-child,
.cf-hero ~ div > .n26-entrance:first-child {
    display: none !important;
}

/* ─── Hide leftover V25 agentic labels ─── */
.cf-page .v25-agentic-label,
.cf-page [class*="v25-agentic"] {
    display: none !important;
}

/* ─── Scrollbar V27 style ─── */
.cf-page ::-webkit-scrollbar { width: 4px; height: 4px; }
.cf-page ::-webkit-scrollbar-track { background: var(--cf-void); }
.cf-page ::-webkit-scrollbar-thumb { background: var(--cf-border); border-radius: 0; }
.cf-page ::-webkit-scrollbar-thumb:hover { background: var(--cf-amber); }