/* ================================================================
   CSF-CyberPunk.css — Cyberpunk Design System
   by Abdur Rozak, S.Kom. (abdurrozak.my.id)
   Versi 2.0 // Professional Edition
   ================================================================
   Design system cyberpunk khas Abdur Rozak (ARRQ)
   Estetika: dark HUD, tajam, padat informasi, kontras tinggi
   Filosofi: terminal kontrol, bukan SaaS soft/Material rounded

   Refactor dari v1.0 (18.230 baris) menjadi v2.0 terstruktur:

   PERUBAHAN UTAMA
   - CSS Cascade Layers (@layer) — eliminasi 366 !important
   - Namespace tunggal cp-* — hapus dual namespace bingung
   - Numbering section berurutan 1-43 — hapus duplikat (150, 201)
   - @import font dipindah ke atas + font-display: swap
   - prefers-color-scheme auto-switch (dark default, light auto)
   - Fix inkonsistensi: grid 44px (sebelumnya 42/44 campur)
   - Fix font body: JetBrains Mono (sesuai standar embedded)
   - Hardcoded rgba() diganti token transparan
   - backdrop-filter dikurangi + di-conditional di mobile
   - content-visibility: auto untuk panel panjang
   - WCAG AA: --cp-dim dicerahkan untuk kontras >4.5:1
   - will-change hanya pada elemen animasi visible
   - Modular: 43 section jelas, dokumentasi embedded

   Palet & estetika konsisten dengan DIRLISTER Cyberpunk Terminal
   Tanpa dependensi — murni CSS, siap pakai
   ================================================================
   STRUKTUR 43 SECTION:
    1. Font Imports
    2. Layer Stack
    3. Reset
    4. Design Tokens
    5. Base & Body
    6. Background Effects (grid, scanlines, CRT, noise, rain)
    7. Typography (display, neon, glitch, terminal, kicker)
    8. Buttons
    9. Badges & Chips
   10. Panels & Brackets
   11. Cards (chamfered, holographic)
   12. Stats & KPI
   13. Forms (input, select, textarea, toggle, check, radio)
   14. Tables
   15. Topbar & Navbar
   16. Sidebar
   17. Tabs & Breadcrumbs
   18. Pagination
   19. Modal & Dialog
   20. Toast & Alert
   21. Tooltip & Popover
   22. Dropdown & Menu
   23. Progress & Loaders
   24. Accordion & Collapsible
   25. Empty & Skeleton States
   26. Timeline
   27. Tree View
   28. Terminal Window
   29. Radar & Holographic ID
   30. Image with HUD Scanner
   31. App Shell Layout (AdminLTE-style)
   32. Page Header & Section Blocks
   33. Stat Grid & KPI Mega Card
   34. Utilities (cascade-managed)
   35. Themes (dark default + light auto + 15 presets)
   36. Print Styles
   37. Accessibility (reduced-motion, contrast, focus)
   38. Responsive Breakpoints
   39. Performance Optimizations
   40. Z-Index System
   41. Social Media Grid (12 link chamfered)
   42. Site Footer (Dibuat dengan Love)
   43. Navbar Cyberpunk (brand + 10 menu + hamburger)
   ================================================================ */


/* ================================================================
   1. FONT IMPORTS — di atas, dengan font-display: swap
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');


/* ================================================================
   2. LAYER STACK — kendali spesifitas tanpa !important
   Urutan layer menentukan prioritas: belakang menang.
   ================================================================ */
@layer reset, tokens, base, effects, typography,
       components, layout, utilities, themes, overrides;


/* ================================================================
   3. RESET — modern, minimal, no blanket resets
   ================================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 80px;
  }

  body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; }

  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  table { border-collapse: collapse; }
  ul, ol { list-style: none; padding: 0; }

  ::selection { background: var(--cp-cyan); color: var(--cp-void); }

  /* Custom scrollbar — cyberpunk */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--cp-void); }
  ::-webkit-scrollbar-thumb {
    background: var(--cp-line2);
    border: 2px solid var(--cp-void);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--cp-cyan);
    box-shadow: 0 0 8px var(--cp-cyan);
  }
  ::-webkit-scrollbar-corner { background: var(--cp-void); }

  /* Firefox scrollbar */
  * { scrollbar-width: thin; scrollbar-color: var(--cp-line2) var(--cp-void); }
}


/* ================================================================
   4. DESIGN TOKENS — single source of truth
   ================================================================ */
@layer tokens {
  :root {
    /* --- Warna dasar (dark void) --- */
    --cp-void:    #06080a;
    --cp-panel:   #0b1015;
    --cp-panel2:  #0e151c;
    --cp-line:    #1b2530;
    --cp-line2:   #2a3b4d;        /* dicerahkan untuk kontras AA */
    --cp-txt:     #d4dde6;        /* dicerahkan sedikit */
    --cp-dim:     #7a8c9e;        /* fix kontras AA: >4.5:1 pada void */
    --cp-dim2:    #95a7b8;

    /* --- Warna neon (aksen) --- */
    --cp-cyan:    #00f0ff;
    --cp-neon:    #fcee0a;
    --cp-mag:     #ff2a6d;
    --cp-green:   #00ff9f;
    --cp-amber:   #ff9f1c;
    --cp-purple:  #b18cff;

    /* --- Token transparan (ganti hardcoded rgba) --- */
    --cp-cyan-a05:  rgba(0, 240, 255, .05);
    --cp-cyan-a08:  rgba(0, 240, 255, .08);
    --cp-cyan-a12:  rgba(0, 240, 255, .12);
    --cp-cyan-a15:  rgba(0, 240, 255, .15);
    --cp-cyan-a30:  rgba(0, 240, 255, .30);
    --cp-neon-a08:  rgba(252, 238, 10, .08);
    --cp-neon-a12:  rgba(252, 238, 10, .12);
    --cp-mag-a08:   rgba(255, 42, 109, .08);
    --cp-mag-a12:   rgba(255, 42, 109, .12);
    --cp-green-a08: rgba(0, 255, 159, .08);
    --cp-amber-a08: rgba(255, 159, 28, .08);
    --cp-purple-a08:rgba(177, 140, 255, .08);

    /* --- Tipografi --- */
    --cp-font-display: 'Rajdhani', 'Segoe UI', sans-serif;
    --cp-font-body:    'JetBrains Mono', 'Consolas', monospace;
    --cp-font-mono:    'Share Tech Mono', 'JetBrains Mono', monospace;
    --cp-font-heading: var(--cp-font-display);

    /* --- Glow (bayangan neon) --- */
    --cp-glow-cyan:  0 0 8px var(--cp-cyan-a30), 0 0 24px rgba(0, 240, 255, .25);
    --cp-glow-neon:  0 0 8px rgba(252, 238, 10, .55), 0 0 24px rgba(252, 238, 10, .25);
    --cp-glow-mag:   0 0 8px rgba(255, 42, 109, .55), 0 0 24px rgba(255, 42, 109, .25);
    --cp-glow-green: 0 0 8px rgba(0, 255, 159, .55), 0 0 24px rgba(0, 255, 159, .25);

    /* --- Geometri --- */
    --cp-notch: 10px;
    --cp-notch-sm: 6px;
    --cp-notch-lg: 14px;
    --cp-radius: 0;          /* cyberpunk: always 0 */

    /* --- Transisi --- */
    --cp-ease: cubic-bezier(.2, .8, .2, 1);
    --cp-ease-out: cubic-bezier(.16, 1, .3, 1);
    --cp-dur:  .22s;
    --cp-dur-fast: .15s;
    --cp-dur-slow: .4s;

    /* --- Spacing scale --- */
    --cp-space-1: 4px;
    --cp-space-2: 8px;
    --cp-space-3: 12px;
    --cp-space-4: 16px;
    --cp-space-5: 20px;
    --cp-space-6: 24px;
    --cp-space-8: 32px;
    --cp-space-10: 40px;
    --cp-space-12: 48px;

    /* --- Layout --- */
    --cp-header-h: 48px;
    --cp-topbar-h: 57px;
    --cp-sidebar-w: 260px;
    --cp-sidebar-w-collapsed: 60px;
    --cp-content-sm: 640px;
    --cp-content-md: 820px;
    --cp-content-lg: 1180px;
    --cp-grid-size: 44px;          /* fix: konsisten 44px */

    /* --- Z-index hierarchy --- */
    --z-base: 1;
    --z-hover: 10;
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-topbar: 1020;
    --z-sidebar: 1030;
    --z-overlay: 1030;
    --z-modal: 1040;
    --z-toast: 1050;
    --z-tooltip: 1060;
    --z-loading: 9999;

    /* --- Focus ring --- */
    --cp-focus-ring: 0 0 0 2px var(--cp-cyan-a30);
    --cp-focus-outline: 2px solid var(--cp-cyan);
  }
}


/* ================================================================
   5. BASE & BODY
   ================================================================ */
@layer base {
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--cp-void);
    color: var(--cp-txt);
    font-family: var(--cp-font-body);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .02em;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--cp-font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  p { line-height: 1.7; }

  code, pre, kbd, samp {
    font-family: var(--cp-font-mono);
    font-size: .92em;
  }

  /* Focus visible global — keyboard navigation */
  :focus-visible {
    outline: var(--cp-focus-outline);
    outline-offset: 2px;
    border-radius: 1px;
  }

  /* Disable outline for mouse users */
  :focus:not(:focus-visible) { outline: none; }
}


/* ================================================================
   6. BACKGROUND EFFECTS — grid, scanlines, CRT, noise, rain
   Layer dekoratif — pointer-events: none, tidak ganggu interaksi
   ================================================================ */
@layer effects {

  /* --- Grid background (44px, konsisten) --- */
  .cp-grid-bg {
    background-image:
      linear-gradient(var(--cp-cyan-a05) 1px, transparent 1px),
      linear-gradient(90deg, var(--cp-cyan-a05) 1px, transparent 1px);
    background-size: var(--cp-grid-size) var(--cp-grid-size);
  }

  /* --- Scanlines overlay (fixed, very subtle) --- */
  .cp-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-overlay);
    background: repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, .12) 3px,
      transparent 4px
    );
    mix-blend-mode: overlay;
    opacity: .4;
  }

  /* --- Scanbeam — garis pemindai vertical --- */
  .cp-scanbeam {
    position: fixed;
    left: 0; right: 0;
    height: 90px;
    pointer-events: none;
    z-index: calc(var(--z-overlay) - 1);
    background: linear-gradient(180deg,
      transparent,
      var(--cp-cyan-a05),
      transparent);
    animation: cp-scan-move 7s linear infinite;
    will-change: transform;
  }
  @keyframes cp-scan-move {
    0%   { top: -90px; }
    100% { top: 100vh; }
  }

  /* --- CRT vignette --- */
  .cp-crt-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: calc(var(--z-overlay) - 2);
    background: radial-gradient(ellipse at center,
      transparent 62%,
      rgba(0, 0, 0, .5) 100%);
  }

  /* --- Static noise (SVG turbulence) --- */
  .cp-noise {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) + 1);
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: cp-noise-shift .3s steps(3) infinite;
    mix-blend-mode: overlay;
  }
  @keyframes cp-noise-shift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-2%, 1%); }
    66%  { transform: translate(1%, -2%); }
    100% { transform: translate(0, 0); }
  }

  /* --- Cyber rain (canvas-based, but class for container) --- */
  .cp-cyber-rain {
    position: fixed;
    inset: 0;
    z-index: var(--z-base);
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: screen;
  }

  /* --- CRT curvature effect on body --- */
  .cp-crt::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) + 2);
    pointer-events: none;
    background: radial-gradient(ellipse at center,
      transparent 50%,
      rgba(0, 0, 0, .35) 100%);
    border-radius: 50% / 8%;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, .5);
  }

  /* --- Global CRT mode (subtle body overlay) --- */
  body.cp-crt-on::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .18), rgba(0, 0, 0, .18) 1px,
      transparent 1px, transparent 3px);
    pointer-events: none;
    z-index: calc(var(--z-loading) - 1);
    mix-blend-mode: multiply;
    opacity: .4;
  }
}


/* ================================================================
   7. TYPOGRAPHY — display, neon, glitch, terminal
   ================================================================ */
@layer typography {

  /* --- Display heading --- */
  .cp-display {
    font-family: var(--cp-font-display);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
  }
  .cp-h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; }
  .cp-h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2; }
  .cp-h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.3; }

  /* --- Color variants --- */
  .cp-display--cyan { color: var(--cp-cyan); text-shadow: var(--cp-glow-cyan); }
  .cp-display--neon { color: var(--cp-neon); text-shadow: var(--cp-glow-neon); }
  .cp-display--mag  { color: var(--cp-mag);  text-shadow: var(--cp-glow-mag); }

  /* --- Neon text glow --- */
  .cp-neon-text {
    color: var(--cp-cyan);
    text-shadow: 0 0 6px var(--cp-cyan-a30), 0 0 18px var(--cp-cyan-a30);
  }

  /* --- Glitch effect (RGB split, dipicu JS via .is-glitching) --- */
  .cp-glitch {
    position: relative;
    display: inline-block;
    font-family: var(--cp-font-display);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-txt);
  }
  .cp-glitch::before,
  .cp-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  .cp-glitch::before { color: var(--cp-mag); transform: translate(-2px, -1px); }
  .cp-glitch::after  { color: var(--cp-cyan); transform: translate(2px, 1px); }
  .cp-glitch.is-glitching::before {
    opacity: .85;
    animation: cp-glitch-a .28s steps(2) 3;
  }
  .cp-glitch.is-glitching::after {
    opacity: .85;
    animation: cp-glitch-b .28s steps(2) 3;
  }
  @keyframes cp-glitch-a {
    0%   { clip-path: inset(0 0 78% 0); }
    50%  { clip-path: inset(42% 0 30% 0); }
    100% { clip-path: inset(80% 0 0 0); }
  }
  @keyframes cp-glitch-b {
    0%   { clip-path: inset(65% 0 10% 0); }
    50%  { clip-path: inset(10% 0 60% 0); }
    100% { clip-path: inset(0 0 85% 0); }
  }

  /* --- Terminal text with blinking cursor --- */
  .cp-terminal-text {
    font-family: var(--cp-font-mono);
    color: var(--cp-green);
    text-shadow: 0 0 8px rgba(0, 255, 159, .5);
  }
  .cp-terminal-text::after {
    content: '▊';
    margin-left: 2px;
    color: var(--cp-green);
    animation: cp-blink 1s steps(1) infinite;
  }
  @keyframes cp-blink { 50% { opacity: 0; } }

  /* --- HUD kicker (small label) --- */
  .cp-kicker {
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--cp-dim2);
  }
  .cp-kicker::before { content: '// '; color: var(--cp-cyan); }

  /* --- Text color utilities --- */
  .cp-text-cyan  { color: var(--cp-cyan); }
  .cp-text-neon  { color: var(--cp-neon); }
  .cp-text-mag   { color: var(--cp-mag); }
  .cp-text-green { color: var(--cp-green); }
  .cp-text-amber { color: var(--cp-amber); }
  .cp-text-dim   { color: var(--cp-dim); }
  .cp-text-dim2  { color: var(--cp-dim2); }
}


/* ================================================================
   8. BUTTONS — chamfered + glow, varian lengkap
   ================================================================ */
@layer components {

  .cp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.3rem;
    font-family: var(--cp-font-display);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    background: transparent;
    border: 2px solid var(--cp-cyan);
    cursor: pointer;
    clip-path: polygon(
      var(--cp-notch) 0, 100% 0, 100% calc(100% - var(--cp-notch)),
      calc(100% - var(--cp-notch)) 100%, 0 100%, 0 var(--cp-notch)
    );
    transition: all var(--cp-dur) var(--cp-ease);
    overflow: hidden;
    min-height: 36px;
    text-decoration: none;
    white-space: nowrap;
  }

  .cp-btn:hover, .cp-btn:focus-visible {
    background: var(--cp-cyan-a12);
    box-shadow: var(--cp-glow-cyan);
    text-shadow: 0 0 8px var(--cp-cyan-a30);
    transform: translateY(-1px);
  }

  .cp-btn:active { transform: translateY(0) scale(.98); }

  .cp-btn:disabled, .cp-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.3);
  }

  /* Loading state — uses Font Awesome spinner via JS */
  .cp-btn.is-loading {
    pointer-events: none;
    color: transparent;
  }
  .cp-btn.is-loading > * { visibility: hidden; }
  .cp-btn.is-loading::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
    visibility: visible;
  }

  @keyframes cp-spin { 100% { transform: rotate(360deg); } }

  /* Sweep effect (letakkan <span class="cp-btn__sweep"></span> inside) */
  .cp-btn__sweep {
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(100deg,
      transparent,
      rgba(255, 255, 255, .22),
      transparent);
    transform: skewX(-20deg) translateX(-180%);
    transition: transform .45s var(--cp-ease);
    pointer-events: none;
  }
  .cp-btn:hover .cp-btn__sweep {
    transform: skewX(-20deg) translateX(280%);
  }

  /* --- Color variants --- */
  .cp-btn--neon { color: var(--cp-neon); border-color: var(--cp-neon); }
  .cp-btn--neon:hover { background: var(--cp-neon-a12); box-shadow: var(--cp-glow-neon); }

  .cp-btn--mag { color: var(--cp-mag); border-color: var(--cp-mag); }
  .cp-btn--mag:hover { background: var(--cp-mag-a12); box-shadow: var(--cp-glow-mag); }

  .cp-btn--green { color: var(--cp-green); border-color: var(--cp-green); }
  .cp-btn--green:hover { background: var(--cp-green-a08); box-shadow: var(--cp-glow-green); }

  /* --- Solid variants --- */
  .cp-btn--solid {
    background: var(--cp-cyan);
    color: var(--cp-void);
    border-color: var(--cp-cyan);
  }
  .cp-btn--solid:hover {
    box-shadow: var(--cp-glow-cyan);
    text-shadow: none;
  }

  .cp-btn--solid-neon {
    background: var(--cp-neon);
    color: var(--cp-void);
    border-color: var(--cp-neon);
  }
  .cp-btn--solid-neon:hover { box-shadow: var(--cp-glow-neon); }

  /* --- Ghost --- */
  .cp-btn--ghost {
    color: var(--cp-dim2);
    border-color: var(--cp-line2);
  }
  .cp-btn--ghost:hover {
    color: var(--cp-txt);
    border-color: var(--cp-cyan);
    background: var(--cp-cyan-a05);
    box-shadow: none;
  }

  /* --- Sizes --- */
  .cp-btn--sm { padding: .3rem .8rem; font-size: .78rem; min-height: 28px; }
  .cp-btn--lg { padding: .8rem 2rem; font-size: 1.05rem; min-height: 44px; }
  .cp-btn--block { display: flex; width: 100%; justify-content: center; }
  .cp-btn--icon {
    padding: 0;
    width: 2.4rem; height: 2.4rem;
    justify-content: center;
  }

  /* --- Button group --- */
  .cp-btn-group {
    display: inline-flex;
    gap: .4rem;
    flex-wrap: wrap;
  }
}


/* ================================================================
   9. BADGES & CHIPS
   ================================================================ */
@layer components {

  .cp-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .12rem .6rem;
    font-family: var(--cp-font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    border: 1px solid var(--cp-cyan);
    background: var(--cp-cyan-a08);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }
  .cp-badge--neon  { color: var(--cp-neon);  border-color: var(--cp-neon);  background: var(--cp-neon-a08); }
  .cp-badge--mag   { color: var(--cp-mag);   border-color: var(--cp-mag);   background: var(--cp-mag-a08); }
  .cp-badge--green { color: var(--cp-green); border-color: var(--cp-green); background: var(--cp-green-a08); }
  .cp-badge--amber { color: var(--cp-amber); border-color: var(--cp-amber); background: var(--cp-amber-a08); }
  .cp-badge--purple{ color: var(--cp-purple);border-color: var(--cp-purple);background: var(--cp-purple-a08); }
  .cp-badge--dim   { color: var(--cp-dim2);  border-color: var(--cp-line2); background: rgba(40, 57, 74, .2); }

  /* --- Live dot indicator --- */
  .cp-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cp-green);
    box-shadow: 0 0 8px var(--cp-green);
    animation: cp-pulse 1.6s ease-in-out infinite;
    flex: none;
  }
  .cp-dot--cyan { background: var(--cp-cyan); box-shadow: 0 0 8px var(--cp-cyan); }
  .cp-dot--mag  { background: var(--cp-mag);  box-shadow: 0 0 8px var(--cp-mag); }
  @keyframes cp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.82); }
  }

  /* --- Filter chip --- */
  .cp-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--cp-dim2);
    background: var(--cp-panel2);
    border: 1px solid var(--cp-line2);
    cursor: pointer;
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  }
  .cp-chip:hover { color: var(--cp-cyan); border-color: var(--cp-cyan); }
  .cp-chip.is-active {
    color: var(--cp-void);
    background: var(--cp-cyan);
    border-color: var(--cp-cyan);
    box-shadow: 0 0 10px var(--cp-cyan-a30);
  }
}


/* ================================================================
   10. PANELS & BRACKETS — sudut L ala HUD
   ================================================================ */
@layer components {

  .cp-panel {
    position: relative;
    background: var(--cp-panel);
    border: 1px solid var(--cp-line);
    padding: 1.4rem;
    transition: all var(--cp-dur) var(--cp-ease);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .cp-panel:hover { border-color: var(--cp-line2); }

  .cp-panel--hover-glow:hover {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 0 1px var(--cp-cyan-a15),
                0 8px 32px rgba(0, 0, 0, .6),
                0 0 28px rgba(0, 240, 255, .12);
    transform: translateY(-3px);
  }

  /* Panel with 4-corner neon brackets (pure CSS gradients) */
  .cp-panel--bracketed {
    background:
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) left top / 13px 2px no-repeat,
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) left top / 2px 13px no-repeat,
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) right top / 13px 2px no-repeat,
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) right top / 2px 13px no-repeat,
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) left bottom / 13px 2px no-repeat,
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) left bottom / 2px 13px no-repeat,
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) right bottom / 13px 2px no-repeat,
      linear-gradient(var(--cp-cyan), var(--cp-cyan)) right bottom / 2px 13px no-repeat,
      var(--cp-panel);
  }

  /* Panel header (titlebar style) */
  .cp-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .8rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--cp-line);
  }
  .cp-panel__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    margin: 0;
  }
  .cp-panel__title::before {
    content: '▍';
    color: var(--cp-neon);
    margin-right: .4rem;
  }

  /* Bracket child variant — animated L brackets */
  .cp-brackets { position: relative; }
  .cp-brackets::before, .cp-brackets::after,
  .cp-brackets > .cp-brackets__b::before,
  .cp-brackets > .cp-brackets__b::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid var(--cp-cyan);
    transition: all var(--cp-dur) var(--cp-ease);
    pointer-events: none;
  }
  .cp-brackets::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .cp-brackets::after  { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
  .cp-brackets > .cp-brackets__b::before { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
  .cp-brackets > .cp-brackets__b::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
  .cp-brackets:hover::before, .cp-brackets:hover::after,
  .cp-brackets:hover > .cp-brackets__b::before,
  .cp-brackets:hover > .cp-brackets__b::after {
    width: 22px; height: 22px;
    box-shadow: 0 0 10px var(--cp-cyan-a30);
  }
}


/* ================================================================
   11. CARDS — chamfered & holographic
   ================================================================ */
@layer components {

  /* Chamfered card (8-corner) */
  .cp-card {
    position: relative;
    background: var(--cp-panel);
    border: 1px solid var(--cp-line);
    padding: 1.5rem;
    clip-path: polygon(
      var(--cp-notch-lg) 0, 100% 0,
      100% calc(100% - var(--cp-notch-lg)),
      calc(100% - var(--cp-notch-lg)) 100%,
      0 100%, 0 var(--cp-notch-lg)
    );
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-card:hover {
    border-color: var(--cp-cyan);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4),
                0 0 18px rgba(0, 240, 255, .15);
  }

  /* Card variants */
  .cp-card--neon   { border-color: var(--cp-neon); }
  .cp-card--cyan   { border-color: var(--cp-cyan); }
  .cp-card--danger { border-color: var(--cp-mag); }
  .cp-card--success{ border-color: var(--cp-green); }
  .cp-card--warning{ border-color: var(--cp-amber); }

  /* Holographic card — moving gradient */
  .cp-holo {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(135deg, var(--cp-cyan-a08), var(--cp-purple-a08)),
      var(--cp-panel);
    border: 1px solid var(--cp-line);
  }
  .cp-holo::before {
    content: '';
    position: absolute;
    inset: -60%;
    background: linear-gradient(115deg,
      transparent 42%,
      var(--cp-cyan-a12) 48%,
      var(--cp-purple-a08) 52%,
      transparent 58%);
    animation: cp-holo-sweep 5s linear infinite;
    pointer-events: none;
  }
  @keyframes cp-holo-sweep {
    0%   { transform: translate(-30%, -30%); }
    100% { transform: translate(30%, 30%); }
  }

  /* Card title */
  .cp-card__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--cp-cyan);
    margin: 0 0 .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .cp-card__body { font-size: .9rem; color: var(--cp-txt); line-height: 1.6; }
  .cp-card__foot {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--cp-line);
  }
}


/* ================================================================
   12. STATS & KPI — angka besar ala HUD
   ================================================================ */
@layer components {

  .cp-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.2rem;
    background: var(--cp-panel);
    border: 1px solid var(--cp-line);
    border-left: 3px solid var(--cp-cyan);
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-stat::before, .cp-stat::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    border: 1px solid var(--cp-cyan);
    opacity: .55;
  }
  .cp-stat::before { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
  .cp-stat::after  { bottom: 4px; left: -3px; border-right: 0; border-top: 0; }
  .cp-stat:hover {
    box-shadow: 0 0 14px var(--cp-cyan-a30),
                0 8px 24px rgba(0, 0, 0, .4);
    transform: translateY(-3px);
    border-color: var(--cp-cyan);
  }
  .cp-stat:hover::before, .cp-stat:hover::after {
    width: 12px; height: 12px;
    box-shadow: 0 0 8px var(--cp-cyan-a30);
  }
  .cp-stat__label {
    font-family: var(--cp-font-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cp-dim2);
  }
  .cp-stat__value {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--cp-cyan);
    text-shadow: 0 0 12px var(--cp-cyan-a30);
    font-variant-numeric: tabular-nums;
  }
  .cp-stat__sub {
    font-size: .75rem;
    color: var(--cp-dim);
    font-family: var(--cp-font-mono);
  }

  /* Color variants */
  .cp-stat--neon  { border-left-color: var(--cp-neon); }
  .cp-stat--neon .cp-stat__value { color: var(--cp-neon); text-shadow: 0 0 12px var(--cp-neon-a12); }
  .cp-stat--mag   { border-left-color: var(--cp-mag); }
  .cp-stat--mag .cp-stat__value  { color: var(--cp-mag); text-shadow: 0 0 12px var(--cp-mag-a12); }
  .cp-stat--green { border-left-color: var(--cp-green); }
  .cp-stat--green .cp-stat__value { color: var(--cp-green); text-shadow: 0 0 12px rgba(0, 255, 159, .35); }
  .cp-stat--amber { border-left-color: var(--cp-amber); }
  .cp-stat--amber .cp-stat__value { color: var(--cp-amber); }
  .cp-stat--purple { border-left-color: var(--cp-purple); }
  .cp-stat--purple .cp-stat__value { color: var(--cp-purple); }

  /* Stat grid — auto-fit responsive */
  .cp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }

  /* KPI mega card — with delta + sparkline position */
  .cp-kpi {
    position: relative;
    background: linear-gradient(135deg, var(--cp-panel) 0%, rgba(0, 0, 0, .3) 100%);
    border: 1px solid var(--cp-line2);
    padding: 1.4rem;
    overflow: hidden;
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .cp-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cp-cyan), transparent);
  }
  .cp-kpi:hover {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 24px var(--cp-cyan-a15);
    transform: translateY(-2px);
  }
  .cp-kpi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
  }
  .cp-kpi__label {
    font-family: var(--cp-font-mono);
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cp-dim2);
  }
  .cp-kpi__icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cp-cyan-a08);
    border: 1px solid var(--cp-cyan);
    color: var(--cp-cyan);
    font-size: .85rem;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  }
  .cp-kpi__value {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--cp-txt);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px var(--cp-cyan-a15);
  }
  .cp-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-family: var(--cp-font-mono);
    font-size: .72rem;
  }
  .cp-kpi__delta--up   { color: var(--cp-green); }
  .cp-kpi__delta--down { color: var(--cp-mag); }
  .cp-kpi__sub {
    margin-top: .3rem;
    font-family: var(--cp-font-mono);
    font-size: .68rem;
    color: var(--cp-dim2);
  }
}


/* ================================================================
   13. FORMS — input, select, textarea, toggle, check, radio
   ================================================================ */
@layer components {

  .cp-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1.1rem;
  }
  .cp-label {
    font-family: var(--cp-font-mono);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cp-dim2);
  }
  .cp-label::before { content: '> '; color: var(--cp-cyan); }

  .cp-input, .cp-select, .cp-textarea {
    width: 100%;
    padding: .55rem .8rem;
    font-family: var(--cp-font-mono);
    font-size: .9rem;
    color: var(--cp-txt);
    background: var(--cp-panel2);
    border: 1px solid var(--cp-line2);
    outline: none;
    transition: all var(--cp-dur) var(--cp-ease);
    min-height: 44px;
  }
  .cp-input::placeholder, .cp-textarea::placeholder {
    color: var(--cp-dim);
    font-style: italic;
    opacity: .7;
  }
  .cp-input:hover, .cp-select:hover, .cp-textarea:hover {
    border-color: var(--cp-line2);
  }
  .cp-input:focus, .cp-select:focus, .cp-textarea:focus {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 0 1px var(--cp-cyan-a30), 0 0 14px var(--cp-cyan-a15);
    background: var(--cp-cyan-a05);
  }

  /* Select custom arrow */
  .cp-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2300f0ff' d='M2 4l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    padding-right: 2rem;
  }
  .cp-select option {
    background: var(--cp-void);
    color: var(--cp-txt);
  }

  /* Textarea */
  .cp-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
  }

  /* Input with icon */
  .cp-input-icon { position: relative; }
  .cp-input-icon .cp-input { padding-left: 2.4rem; }
  .cp-input-icon__icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-cyan);
    font-size: .9rem;
    pointer-events: none;
  }

  /* Input group (prepend/append) */
  .cp-input-group {
    display: flex;
    align-items: stretch;
  }
  .cp-input-group__prepend,
  .cp-input-group__append {
    display: inline-flex;
    align-items: center;
    padding: 0 .8rem;
    background: var(--cp-panel);
    border: 1px solid var(--cp-line2);
    color: var(--cp-cyan);
    font-family: var(--cp-font-mono);
    font-size: .82rem;
    white-space: nowrap;
  }
  .cp-input-group__prepend { border-right: 0; }
  .cp-input-group__append  { border-left: 0; }
  .cp-input-group .cp-input:not(:first-child) { border-left: 0; }
  .cp-input-group .cp-input:not(:last-child)  { border-right: 0; }

  /* --- Toggle switch (chamfered) --- */
  .cp-toggle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
  }
  .cp-toggle input { display: none; }
  .cp-toggle__track {
    width: 42px; height: 20px;
    background: var(--cp-panel2);
    border: 1px solid var(--cp-line2);
    position: relative;
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  }
  .cp-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: var(--cp-dim);
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-toggle input:checked + .cp-toggle__track {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 10px var(--cp-cyan-a30);
  }
  .cp-toggle input:checked + .cp-toggle__track::after {
    left: 24px;
    background: var(--cp-cyan);
    box-shadow: 0 0 8px var(--cp-cyan);
  }
  .cp-toggle__text {
    font-family: var(--cp-font-mono);
    font-size: .78rem;
    color: var(--cp-dim2);
  }

  /* --- Checkbox --- */
  .cp-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    user-select: none;
  }
  .cp-check input { display: none; }
  .cp-check__box {
    width: 17px; height: 17px;
    border: 1px solid var(--cp-line2);
    background: var(--cp-panel2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cp-dur) var(--cp-ease);
    flex: none;
  }
  .cp-check input:checked + .cp-check__box {
    background: var(--cp-cyan);
    border-color: var(--cp-cyan);
    box-shadow: 0 0 8px var(--cp-cyan-a30);
  }
  .cp-check__box::after {
    content: '✓';
    color: var(--cp-void);
    font-size: .7rem;
    font-weight: 700;
    opacity: 0;
  }
  .cp-check input:checked + .cp-check__box::after { opacity: 1; }
  .cp-check__text { font-size: .85rem; color: var(--cp-dim2); }

  /* --- Radio button --- */
  .cp-radio {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    user-select: none;
  }
  .cp-radio input { display: none; }
  .cp-radio__box {
    width: 18px; height: 18px;
    border: 1px solid var(--cp-line2);
    background: var(--cp-panel2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cp-dur) var(--cp-ease);
    flex: none;
  }
  .cp-radio__box::after {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cp-cyan);
    box-shadow: 0 0 6px var(--cp-cyan);
    opacity: 0;
    transform: scale(.3);
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-radio input:checked + .cp-radio__box { border-color: var(--cp-cyan); }
  .cp-radio input:checked + .cp-radio__box::after { opacity: 1; transform: scale(1); }
  .cp-radio__text { font-size: .85rem; color: var(--cp-dim2); }

  /* --- Range slider --- */
  .cp-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--cp-panel2);
    border: 1px solid var(--cp-line2);
    outline: none;
    cursor: pointer;
  }
  .cp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    background: var(--cp-cyan);
    border: 2px solid var(--cp-void);
    cursor: pointer;
    box-shadow: 0 0 12px var(--cp-cyan);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  }
  .cp-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--cp-cyan);
    border: 2px solid var(--cp-void);
    cursor: pointer;
    box-shadow: 0 0 12px var(--cp-cyan);
  }

  /* --- Fieldset --- */
  .cp-fieldset {
    border: 1px solid var(--cp-line2);
    padding: 1rem 1.2rem;
    margin: 0 0 1rem;
    background: rgba(11, 16, 21, .4);
  }
  .cp-fieldset legend {
    padding: 0 .6rem;
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cp-cyan);
  }

  /* Form layout */
  .cp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
  }
  .cp-form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cp-form-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cp-line);
  }
}


/* ================================================================
   14. TABLES
   ================================================================ */
@layer components {

  .cp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--cp-line);
    background: var(--cp-panel);
  }
  .cp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    min-width: 560px;
  }
  .cp-table thead th {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    text-align: left;
    padding: .7rem 1rem;
    background: var(--cp-cyan-a05);
    border-bottom: 2px solid var(--cp-line2);
    white-space: nowrap;
  }
  .cp-table tbody td {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--cp-line);
    color: var(--cp-txt);
    vertical-align: middle;
  }
  .cp-table tbody tr {
    transition: background var(--cp-dur) var(--cp-ease),
                box-shadow var(--cp-dur) var(--cp-ease);
  }
  .cp-table tbody tr:hover {
    background: var(--cp-cyan-a05);
    box-shadow: inset 2px 0 0 var(--cp-cyan);
  }
  .cp-table tbody tr:last-child td { border-bottom: 0; }
  .cp-table .cp-num {
    font-family: var(--cp-font-mono);
    color: var(--cp-dim2);
    font-variant-numeric: tabular-nums;
  }

  /* Table variants */
  .cp-table--striped tbody tr:nth-child(even) {
    background: rgba(0, 240, 255, .015);
  }
  .cp-table--compact thead th { padding: .5rem .8rem; font-size: .68rem; }
  .cp-table--compact tbody td { padding: .4rem .8rem; font-size: .78rem; }
}


/* ================================================================
   15. TOPBAR & NAVBAR
   ================================================================ */
@layer components {

  .cp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.2rem;
    background: rgba(6, 8, 10, .85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--cp-line);
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
  }
  .cp-topbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cp-cyan), transparent);
    opacity: .35;
    pointer-events: none;
  }
  .cp-topbar__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cp-txt);
    text-decoration: none;
  }
  .cp-topbar__brand em {
    color: var(--cp-cyan);
    font-style: normal;
    text-shadow: 0 0 10px var(--cp-cyan-a30);
  }
  .cp-topbar__nav {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
  }
  .cp-topbar__link {
    padding: .35rem .8rem;
    font-family: var(--cp-font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cp-dim2);
    border: 1px solid transparent;
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-topbar__link:hover {
    color: var(--cp-cyan);
    border-color: var(--cp-line2);
    background: var(--cp-cyan-a05);
  }
  .cp-topbar__link.is-active {
    color: var(--cp-cyan);
    border-color: var(--cp-cyan);
    background: var(--cp-cyan-a08);
    box-shadow: 0 0 10px var(--cp-cyan-a15);
  }

  /* Status bar (bottom) */
  .cp-statusbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .45rem 1rem;
    background: rgba(6, 8, 10, .95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--cp-line);
    font-family: var(--cp-font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--cp-dim2);
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
  }
  .cp-statusbar__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    border: 1px solid var(--cp-line);
    background: rgba(11, 16, 21, .8);
    white-space: nowrap;
  }
  .cp-statusbar__chip b { color: var(--cp-cyan); font-weight: 400; }
}


/* ================================================================
   16. SIDEBAR
   ================================================================ */
@layer components {

  .cp-sidebar {
    width: var(--cp-sidebar-w);
    min-height: 100vh;
    background: var(--cp-panel);
    border-right: 1px solid var(--cp-line);
    padding: 1rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    position: sticky;
    top: 0;
  }
  .cp-sidebar__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem;
    font-family: var(--cp-font-display);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cp-dim2);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-sidebar__link:hover {
    color: var(--cp-txt);
    background: var(--cp-cyan-a05);
    border-left-color: var(--cp-line2);
  }
  .cp-sidebar__link.is-active {
    color: var(--cp-cyan);
    background: var(--cp-cyan-a08);
    border-left-color: var(--cp-cyan);
    box-shadow: inset 0 0 20px var(--cp-cyan-a05);
  }
}


/* ================================================================
   17. TABS & BREADCRUMBS
   ================================================================ */
@layer components {

  .cp-tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cp-line);
  }
  .cp-tab {
    padding: .45rem 1.1rem;
    font-family: var(--cp-font-display);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cp-dim2);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-tab:hover { color: var(--cp-txt); }
  .cp-tab.is-active {
    color: var(--cp-cyan);
    border-bottom-color: var(--cp-cyan);
    text-shadow: 0 0 8px var(--cp-cyan-a30);
  }
  .cp-tabpanel { display: none; padding-top: 1rem; }
  .cp-tabpanel.is-active {
    display: block;
    animation: cp-fadeUp .3s var(--cp-ease);
  }

  /* Breadcrumbs */
  .cp-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-family: var(--cp-font-mono);
    font-size: .8rem;
  }
  .cp-breadcrumbs__item {
    color: var(--cp-dim2);
    text-decoration: none;
    padding: .25rem .5rem;
    transition: color var(--cp-dur) var(--cp-ease);
  }
  .cp-breadcrumbs__item:not(.is-current)::after {
    content: '›';
    margin-left: .5rem;
    color: var(--cp-line2);
  }
  .cp-breadcrumbs__item:hover { color: var(--cp-cyan); }
  .cp-breadcrumbs__item.is-current {
    color: var(--cp-cyan);
    text-shadow: 0 0 8px var(--cp-cyan-a30);
  }
}


/* ================================================================
   18. PAGINATION
   ================================================================ */
@layer components {

  .cp-pager {
    display: flex;
    gap: .4rem;
    align-items: center;
  }
  .cp-pager__btn {
    min-width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .6rem;
    font-family: var(--cp-font-mono);
    font-size: .8rem;
    color: var(--cp-dim2);
    background: transparent;
    border: 1px solid var(--cp-line2);
    cursor: pointer;
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-pager__btn:hover {
    color: var(--cp-cyan);
    border-color: var(--cp-cyan);
  }
  .cp-pager__btn.is-active {
    color: var(--cp-void);
    background: var(--cp-cyan);
    border-color: var(--cp-cyan);
    box-shadow: 0 0 12px var(--cp-cyan-a30);
    font-weight: 700;
  }
  .cp-pager__info {
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    color: var(--cp-dim);
    margin-left: .5rem;
  }
}


/* ================================================================
   19. MODAL & DIALOG
   ================================================================ */
@layer components {

  .cp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(4, 6, 8, .82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .cp-modal-overlay.is-open {
    display: flex;
    animation: cp-fadeIn .2s ease;
  }
  .cp-modal {
    width: min(560px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--cp-panel);
    border: 1px solid var(--cp-cyan);
    box-shadow: 0 0 0 1px var(--cp-cyan-a15),
                0 24px 80px rgba(0, 0, 0, .8),
                0 0 40px var(--cp-cyan-a12);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    animation: cp-modal-in .25s var(--cp-ease);
  }
  @keyframes cp-modal-in {
    0%   { opacity: 0; transform: translateY(18px) scale(.97); }
    100% { opacity: 1; transform: none; }
  }
  .cp-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--cp-line);
  }
  .cp-modal__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    margin: 0;
    font-size: 1.02rem;
  }
  .cp-modal__body { padding: 1.4rem; font-size: .92rem; }
  .cp-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--cp-line);
  }
  .cp-modal__close {
    background: transparent;
    border: 1px solid var(--cp-line2);
    color: var(--cp-dim2);
    width: 30px; height: 30px;
    cursor: pointer;
    font-family: var(--cp-font-mono);
    transition: all var(--cp-dur) var(--cp-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cp-modal__close:hover {
    color: var(--cp-mag);
    border-color: var(--cp-mag);
    box-shadow: 0 0 8px var(--cp-mag-a12);
  }
}


/* ================================================================
   20. TOAST & ALERT
   ================================================================ */
@layer components {

  /* Toast container — fixed bottom-right */
  .cp-toasts {
    position: fixed;
    right: 1.2rem;
    bottom: 4.5rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(340px, calc(100vw - 2rem));
  }
  .cp-toast {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem 1rem;
    background: var(--cp-panel);
    border: 1px solid var(--cp-cyan);
    border-left: 3px solid var(--cp-cyan);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6), 0 0 16px var(--cp-cyan-a15);
    animation: cp-toast-in .3s var(--cp-ease);
    font-size: .85rem;
  }
  .cp-toast.is-leaving { animation: cp-toast-out .25s ease forwards; }
  @keyframes cp-toast-in {
    0%   { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes cp-toast-out {
    100% { opacity: 0; transform: translateX(30px); }
  }
  .cp-toast__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cp-cyan);
  }
  .cp-toast__msg {
    color: var(--cp-dim2);
    font-size: .8rem;
  }
  .cp-toast--green { border-color: var(--cp-green); border-left-color: var(--cp-green); }
  .cp-toast--green .cp-toast__title { color: var(--cp-green); }
  .cp-toast--mag { border-color: var(--cp-mag); border-left-color: var(--cp-mag); }
  .cp-toast--mag .cp-toast__title { color: var(--cp-mag); }
  .cp-toast--amber { border-color: var(--cp-amber); border-left-color: var(--cp-amber); }
  .cp-toast--amber .cp-toast__title { color: var(--cp-amber); }

  /* Inline alert */
  .cp-alert {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 1.1rem;
    background: var(--cp-panel);
    border: 1px solid var(--cp-cyan);
    border-left: 3px solid var(--cp-cyan);
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }
  .cp-alert:hover { box-shadow: 0 0 16px var(--cp-cyan-a15); }
  .cp-alert__icon {
    font-size: 1.1rem;
    color: var(--cp-cyan);
    text-shadow: 0 0 8px var(--cp-cyan-a30);
    flex: none;
    margin-top: .1rem;
  }
  .cp-alert__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    margin: 0 0 .2rem;
  }
  .cp-alert__msg { font-size: .85rem; color: var(--cp-txt); margin: 0; }

  .cp-alert--success { border-color: var(--cp-green); border-left-color: var(--cp-green); }
  .cp-alert--success .cp-alert__icon,
  .cp-alert--success .cp-alert__title { color: var(--cp-green); }
  .cp-alert--warning { border-color: var(--cp-amber); border-left-color: var(--cp-amber); }
  .cp-alert--warning .cp-alert__icon,
  .cp-alert--warning .cp-alert__title { color: var(--cp-amber); }
  .cp-alert--danger { border-color: var(--cp-mag); border-left-color: var(--cp-mag); }
  .cp-alert--danger .cp-alert__icon,
  .cp-alert--danger .cp-alert__title { color: var(--cp-mag); }
}


/* ================================================================
   21. TOOLTIP & POPOVER
   ================================================================ */
@layer components {

  /* Pure CSS tooltip via data-tip attribute */
  .cp-tip { position: relative; }
  .cp-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: .3rem .6rem;
    font-family: var(--cp-font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    white-space: nowrap;
    color: var(--cp-cyan);
    background: var(--cp-panel);
    border: 1px solid var(--cp-cyan);
    box-shadow: 0 0 12px var(--cp-cyan-a15);
    opacity: 0;
    pointer-events: none;
    transition: all var(--cp-dur) var(--cp-ease);
    z-index: var(--z-tooltip);
  }
  .cp-tip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Popover (rich content, JS-triggered) */
  .cp-popover {
    position: absolute;
    z-index: var(--z-tooltip);
    min-width: 200px;
    max-width: 320px;
    background: var(--cp-panel);
    border: 1px solid var(--cp-cyan);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6), 0 0 16px var(--cp-cyan-a15);
    padding: .8rem 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .cp-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .cp-popover__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    margin: 0 0 .4rem;
  }
  .cp-popover__body { font-size: .82rem; color: var(--cp-txt); line-height: 1.5; }
}


/* ================================================================
   22. DROPDOWN & MENU
   ================================================================ */
@layer components {

  .cp-dropdown { position: relative; display: inline-block; }
  .cp-dropdown__trigger::after { content: ' ▾'; opacity: .7; }
  .cp-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    max-width: calc(100vw - 2rem);
    background: var(--cp-panel);
    border: 1px solid var(--cp-cyan);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .7), 0 0 20px var(--cp-cyan-a15);
    padding: .4rem;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .cp-dropdown.is-open .cp-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .cp-dropdown__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .8rem;
    font-family: var(--cp-font-mono);
    font-size: .82rem;
    color: var(--cp-txt);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--cp-dur) var(--cp-ease);
    border-left: 2px solid transparent;
  }
  .cp-dropdown__item:hover {
    color: var(--cp-cyan);
    background: var(--cp-cyan-a08);
    border-left-color: var(--cp-cyan);
    padding-left: 1rem;
  }
  .cp-dropdown__item--danger { color: var(--cp-mag); }
  .cp-dropdown__item--danger:hover {
    background: var(--cp-mag-a08);
    border-left-color: var(--cp-mag);
  }
  .cp-dropdown__sep {
    height: 1px;
    background: var(--cp-line);
    margin: .35rem 0;
  }
  .cp-dropdown--right .cp-dropdown__menu { left: auto; right: 0; }
}


/* ================================================================
   23. PROGRESS & LOADERS
   ================================================================ */
@layer components {

  /* Segmented progress bar */
  .cp-progress {
    height: 14px;
    background: var(--cp-panel2);
    border: 1px solid var(--cp-line2);
    position: relative;
    overflow: hidden;
  }
  .cp-progress__bar {
    height: 100%;
    background: repeating-linear-gradient(
      90deg,
      var(--cp-cyan) 0 8px,
      var(--cp-cyan-a30) 8px 10px
    );
    box-shadow: 0 0 12px var(--cp-cyan-a30);
    transition: width .8s var(--cp-ease);
    position: relative;
  }
  .cp-progress__bar--animated::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: cp-progress-sweep 1.8s linear infinite;
  }
  @keyframes cp-progress-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .cp-progress__bar--neon {
    background: repeating-linear-gradient(90deg, var(--cp-neon) 0 8px, var(--cp-neon-a12) 8px 10px);
    box-shadow: 0 0 12px var(--cp-neon-a12);
  }
  .cp-progress__bar--mag {
    background: repeating-linear-gradient(90deg, var(--cp-mag) 0 8px, var(--cp-mag-a12) 8px 10px);
    box-shadow: 0 0 12px var(--cp-mag-a12);
  }
  .cp-progress__bar--green {
    background: repeating-linear-gradient(90deg, var(--cp-green) 0 8px, rgba(0, 255, 159, .55) 8px 10px);
    box-shadow: 0 0 12px rgba(0, 255, 159, .45);
  }
  .cp-progress-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--cp-font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--cp-dim2);
    margin-bottom: .3rem;
  }

  /* Spinner */
  .cp-spinner {
    width: 32px; height: 32px;
    border: 2px solid var(--cp-line2);
    border-top-color: var(--cp-cyan);
    border-radius: 50%;
    animation: cp-spin .8s linear infinite;
    display: inline-block;
  }
  .cp-spinner--neon  { border-top-color: var(--cp-neon); }
  .cp-spinner--mag   { border-top-color: var(--cp-mag); }
  .cp-spinner--green { border-top-color: var(--cp-green); }
  .cp-spinner--lg { width: 48px; height: 48px; border-width: 3px; }
  .cp-spinner--sm { width: 20px; height: 20px; border-width: 1.5px; }

  /* Loading dots */
  .cp-loading-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .cp-loading-dots span {
    width: 8px; height: 8px;
    background: var(--cp-cyan);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--cp-cyan);
    animation: cp-loading-dot 1.4s ease-in-out infinite;
  }
  .cp-loading-dots span:nth-child(2) { animation-delay: .2s; }
  .cp-loading-dots span:nth-child(3) { animation-delay: .4s; }
  @keyframes cp-loading-dot {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40%           { transform: scale(1); opacity: 1; }
  }

  /* Boot screen */
  .cp-boot {
    position: fixed;
    inset: 0;
    z-index: var(--z-loading);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background: var(--cp-void);
    transition: opacity .5s ease, visibility .5s;
  }
  .cp-boot.is-done { opacity: 0; visibility: hidden; }
  .cp-boot__logo {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    letter-spacing: .2em;
    color: var(--cp-cyan);
    text-shadow: 0 0 14px var(--cp-cyan-a30);
    text-transform: uppercase;
    animation: cp-flicker 2.2s linear infinite;
  }
  @keyframes cp-flicker {
    0%, 92%, 100% { opacity: 1; }
    93%           { opacity: .4; }
    94%           { opacity: 1; }
    96%           { opacity: .6; }
    97%           { opacity: 1; }
  }
}


/* ================================================================
   24. ACCORDION & COLLAPSIBLE
   ================================================================ */
@layer components {

  .cp-accordion {
    border: 1px solid var(--cp-line2);
    background: var(--cp-panel);
    margin-bottom: .5rem;
    overflow: hidden;
    transition: border-color var(--cp-dur) var(--cp-ease);
  }
  .cp-accordion.is-open { border-color: var(--cp-cyan); }
  .cp-accordion__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .8rem 1rem;
    background: transparent;
    border: 0;
    color: var(--cp-txt);
    font-family: var(--cp-font-display);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--cp-dur) var(--cp-ease);
    text-align: left;
  }
  .cp-accordion__head:hover {
    background: var(--cp-cyan-a05);
    color: var(--cp-cyan);
  }
  .cp-accordion.is-open .cp-accordion__head {
    color: var(--cp-cyan);
    background: var(--cp-cyan-a05);
  }
  .cp-accordion__icon {
    transition: transform var(--cp-dur) var(--cp-ease);
    color: var(--cp-cyan);
    font-size: .8rem;
  }
  .cp-accordion.is-open .cp-accordion__icon { transform: rotate(90deg); }
  .cp-accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--cp-ease);
  }
  .cp-accordion__panel-inner {
    padding: 0 1rem 1rem;
    color: var(--cp-dim2);
    font-size: .88rem;
    line-height: 1.6;
  }
}


/* ================================================================
   25. EMPTY & SKELETON STATES
   ================================================================ */
@layer components {

  .cp-empty {
    text-align: center;
    padding: 2.4rem 1.2rem;
    border: 1px dashed var(--cp-line2);
    background: rgba(11, 16, 21, .4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }
  .cp-empty__icon {
    font-size: 3rem;
    color: var(--cp-cyan);
    opacity: .4;
    font-family: var(--cp-font-display);
    text-shadow: 0 0 16px var(--cp-cyan-a30);
    animation: cp-pulse 2.5s ease-in-out infinite;
  }
  .cp-empty__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cp-txt);
    margin: .4rem 0 0;
  }
  .cp-empty__msg {
    font-size: .85rem;
    color: var(--cp-dim);
    margin: 0 0 .8rem;
    max-width: 360px;
  }

  /* Skeleton shimmer */
  .cp-skel { display: flex; flex-direction: column; gap: .6rem; }
  .cp-skel__line, .cp-skel__block, .cp-skel__circle {
    background: linear-gradient(90deg,
      var(--cp-panel2) 0%,
      var(--cp-line2) 50%,
      var(--cp-panel2) 100%);
    background-size: 200% 100%;
    animation: cp-skel-shimmer 1.5s linear infinite;
  }
  .cp-skel__line   { height: 12px; width: 100%; }
  .cp-skel__block  { height: 80px; width: 100%; }
  .cp-skel__circle { width: 40px; height: 40px; border-radius: 50%; flex: none; }
  @keyframes cp-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}


/* ================================================================
   26. TIMELINE
   ================================================================ */
@layer components {

  .cp-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .cp-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, var(--cp-cyan), var(--cp-line) 50%, transparent);
  }
  .cp-timeline__item {
    position: relative;
    padding: 0 0 1.4rem 2rem;
  }
  .cp-timeline__item:last-child { padding-bottom: 0; }
  .cp-timeline__dot {
    position: absolute;
    left: 1px;
    top: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--cp-cyan);
    box-shadow: 0 0 10px var(--cp-cyan);
    border: 2px solid var(--cp-void);
  }
  .cp-timeline__item--success .cp-timeline__dot { background: var(--cp-green); box-shadow: 0 0 10px var(--cp-green); }
  .cp-timeline__item--warning .cp-timeline__dot { background: var(--cp-amber); box-shadow: 0 0 10px var(--cp-amber); }
  .cp-timeline__item--danger  .cp-timeline__dot { background: var(--cp-mag);  box-shadow: 0 0 10px var(--cp-mag); }
  .cp-timeline__time {
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    color: var(--cp-dim2);
    letter-spacing: .1em;
  }
  .cp-timeline__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .08em;
    color: var(--cp-txt);
    margin: .15rem 0;
  }
  .cp-timeline__desc { font-size: .82rem; color: var(--cp-dim); margin: 0; }
}


/* ================================================================
   27. TREE VIEW — data hirarkis expand/collapse
   ================================================================ */
@layer components {

  .cp-tree, .cp-tree__children {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--cp-font-mono);
    font-size: .85rem;
  }
  .cp-tree__children {
    padding-left: 1.4rem;
    border-left: 1px dashed var(--cp-line);
    margin-left: .4rem;
  }
  .cp-tree__node { margin: .15rem 0; }
  .cp-tree__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .4rem;
    cursor: pointer;
    transition: background var(--cp-dur) var(--cp-ease);
  }
  .cp-tree__row:hover { background: var(--cp-cyan-a05); }
  .cp-tree__toggle {
    width: 24px; height: 24px;
    min-width: 24px;
    background: transparent;
    border: 0;
    color: var(--cp-cyan);
    cursor: pointer;
    font-family: var(--cp-font-mono);
    font-size: .85rem;
    text-align: center;
    transition: transform var(--cp-dur) var(--cp-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cp-tree__toggle:hover { background: var(--cp-cyan-a08); }
  .cp-tree__node.is-open > .cp-tree__row > .cp-tree__toggle { transform: rotate(90deg); }
  .cp-tree__children { display: none; }
  .cp-tree__node.is-open > .cp-tree__children { display: block; }
  .cp-tree__label { color: var(--cp-txt); }
  .cp-tree__label:hover { color: var(--cp-cyan); }
}


/* ================================================================
   28. TERMINAL WINDOW — mock terminal dengan prompt
   ================================================================ */
@layer components {

  .cp-terminal {
    background: #05070a;
    border: 1px solid var(--cp-line2);
    box-shadow: 0 0 30px rgba(0, 255, 159, .06);
    overflow: hidden;
  }
  .cp-terminal__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    background: var(--cp-panel2);
    border-bottom: 1px solid var(--cp-line);
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    color: var(--cp-dim2);
  }
  .cp-terminal__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
  }
  .cp-terminal__dot--r { background: var(--cp-mag); }
  .cp-terminal__dot--y { background: var(--cp-neon); }
  .cp-terminal__dot--g { background: var(--cp-green); }
  .cp-terminal__body {
    padding: 1rem;
    font-family: var(--cp-font-mono);
    font-size: .82rem;
    line-height: 1.75;
    color: var(--cp-green);
    min-height: 150px;
  }
  .cp-terminal__body .cmd  { color: var(--cp-cyan); }
  .cp-terminal__body .out  { color: var(--cp-dim2); }
  .cp-terminal__body .ok   { color: var(--cp-green); }
  .cp-terminal__body .warn { color: var(--cp-neon); }
  .cp-terminal__body .err  { color: var(--cp-mag); }
}


/* ================================================================
   29. RADAR & HOLOGRAPHIC ID CARD
   ================================================================ */
@layer components {

  /* Radar minimap with sweep */
  .cp-radar {
    position: relative;
    width: 200px; height: 200px;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(0, 255, 159, .05), transparent 70%),
      var(--cp-panel);
    border: 1px solid var(--cp-green);
    box-shadow: 0 0 20px rgba(0, 255, 159, .15),
                inset 0 0 30px rgba(0, 255, 159, .05);
    overflow: hidden;
    margin: 0 auto;
  }
  .cp-radar__ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 255, 159, .2);
    border-radius: 50%;
    margin: auto;
  }
  .cp-radar__ring:nth-child(1) { width: 66%; height: 66%; top: 0; bottom: 0; left: 0; right: 0; }
  .cp-radar__ring:nth-child(2) { width: 33%; height: 33%; top: 0; bottom: 0; left: 0; right: 0; }
  .cp-radar::before, .cp-radar::after {
    content: '';
    position: absolute;
    background: rgba(0, 255, 159, .15);
  }
  .cp-radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
  .cp-radar::after  { top: 50%; left: 0; right: 0; height: 1px; }
  .cp-radar__sweep {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(0, 255, 159, .4) 30deg,
      transparent 60deg);
    border-radius: 50%;
    animation: cp-radar-sweep 4s linear infinite;
    will-change: transform;
  }
  @keyframes cp-radar-sweep { 100% { transform: rotate(360deg); } }
  .cp-radar__blip {
    position: absolute;
    left: var(--x); top: var(--y);
    width: 8px; height: 8px;
    background: var(--cp-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cp-green);
    animation: cp-pulse 1.6s ease-in-out infinite;
    transform: translate(-50%, -50%);
  }

  /* Holographic ID Card */
  .cp-id {
    position: relative;
    background:
      linear-gradient(135deg, var(--cp-cyan-a08), var(--cp-purple-a08)),
      var(--cp-panel);
    border: 1px solid var(--cp-cyan);
    padding: 1.2rem;
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 24px var(--cp-cyan-a15);
  }
  .cp-id__holo {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
      transparent 42%,
      var(--cp-cyan-a12) 48%,
      var(--cp-purple-a08) 52%,
      transparent 58%);
    background-size: 200% 100%;
    animation: cp-holo-sweep 5s linear infinite;
    pointer-events: none;
  }
  .cp-id__top {
    display: flex;
    justify-content: space-between;
    font-family: var(--cp-font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-bottom: .8rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--cp-line);
    position: relative;
  }
  .cp-id__org { color: var(--cp-cyan); text-shadow: 0 0 6px var(--cp-cyan-a30); }
  .cp-id__type { color: var(--cp-dim2); }
  .cp-id__main { display: flex; gap: .9rem; align-items: center; position: relative; }
  .cp-id__avatar {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--cp-cyan);
    background: var(--cp-cyan-a08);
    border: 1px solid var(--cp-cyan);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .cp-id__name {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cp-txt);
    margin: 0;
  }
  .cp-id__role {
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    color: var(--cp-neon);
    margin: .15rem 0 0;
  }
  .cp-id__data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: 1rem 0;
    position: relative;
  }
  .cp-id__data > div { text-align: center; }
  .cp-id__data span {
    display: block;
    font-family: var(--cp-font-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    color: var(--cp-dim2);
    margin-bottom: .15rem;
  }
  .cp-id__data b {
    font-family: var(--cp-font-display);
    font-size: .85rem;
    color: var(--cp-cyan);
  }
}


/* ================================================================
   30. IMAGE WITH HUD SCANNER
   ================================================================ */
@layer components {

  .cp-scan-img {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cp-line2);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .cp-scan-img img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: contrast(1.05) saturate(.85) hue-rotate(-5deg);
  }
  .cp-scan-img__line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--cp-cyan);
    box-shadow: 0 0 12px var(--cp-cyan), 0 0 24px var(--cp-cyan);
    animation: cp-scan-img-sweep 2.4s linear infinite;
  }
  @keyframes cp-scan-img-sweep {
    0%   { top: 0; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
  .cp-scan-img__corners span {
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid var(--cp-cyan);
  }
  .cp-scan-img__corners span:nth-child(1) { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
  .cp-scan-img__corners span:nth-child(2) { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
  .cp-scan-img__corners span:nth-child(3) { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
  .cp-scan-img__corners span:nth-child(4) { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
  .cp-scan-img__tag {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: .2rem .7rem;
    font-family: var(--cp-font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    color: var(--cp-cyan);
    background: rgba(6, 8, 10, .85);
    border: 1px solid var(--cp-cyan);
    text-shadow: 0 0 6px var(--cp-cyan);
  }
}


/* ================================================================
   31. APP SHELL LAYOUT — AdminLTE-style
   Body modifiers:
   - .cp-app--sidebar-collapsed (sidebar mini 60px)
   - .cp-app--sidebar-hidden    (off-canvas mobile)
   - .cp-app--boxed             (max-width container)
   ================================================================ */
@layer layout {

  .cp-app {
    min-height: 100vh;
    background: var(--cp-void);
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: hidden;
  }
  body.cp-app--boxed .cp-app {
    max-width: 1440px;
    margin: 0 auto;
    border-left: 1px solid var(--cp-line);
    border-right: 1px solid var(--cp-line);
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  }

  /* Sidebar */
  .cp-app__sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--cp-sidebar-w);
    background: linear-gradient(180deg, rgba(8, 12, 18, .98) 0%, rgba(4, 8, 14, .99) 100%);
    border-right: 1px solid var(--cp-line2);
    box-shadow: 2px 0 20px rgba(0, 0, 0, .4);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    transition: width var(--cp-dur) var(--cp-ease), transform var(--cp-dur) var(--cp-ease);
    overflow: hidden;
  }
  body.cp-app--sidebar-collapsed .cp-app__sidebar { width: var(--cp-sidebar-w-collapsed); }

  .cp-app__brand {
    height: var(--cp-topbar-h);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--cp-line);
    background: linear-gradient(90deg, var(--cp-cyan-a08), transparent);
    flex: none;
  }
  .cp-app__brand-logo {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--cp-cyan);
    font-size: 1.2rem;
    border: 1.5px solid var(--cp-cyan);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    flex: none;
  }
  .cp-app__brand-text {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .12em;
    color: var(--cp-cyan);
    text-shadow: 0 0 8px var(--cp-cyan-a30);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.cp-app--sidebar-collapsed .cp-app__brand-text { display: none; }

  .cp-app__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .6rem 0;
  }
  .cp-app__nav-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .55rem 1.2rem;
    font-family: var(--cp-font-body);
    font-size: .85rem;
    color: var(--cp-dim2);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all var(--cp-dur) var(--cp-ease);
    white-space: nowrap;
  }
  .cp-app__nav-item i {
    font-size: .95rem;
    width: 20px;
    text-align: center;
    flex: none;
    color: var(--cp-dim);
    transition: color var(--cp-dur) var(--cp-ease);
  }
  .cp-app__nav-item:hover {
    color: var(--cp-txt);
    background: var(--cp-cyan-a05);
    border-left-color: var(--cp-cyan);
  }
  .cp-app__nav-item:hover i {
    color: var(--cp-cyan);
    text-shadow: 0 0 6px var(--cp-cyan-a30);
  }
  .cp-app__nav-item.is-active {
    color: var(--cp-cyan);
    background: linear-gradient(90deg, var(--cp-cyan-a12), transparent);
    border-left-color: var(--cp-cyan);
    box-shadow: inset 2px 0 0 var(--cp-cyan);
  }
  .cp-app__nav-item.is-active i {
    color: var(--cp-cyan);
    text-shadow: 0 0 8px var(--cp-cyan-a30);
  }
  body.cp-app--sidebar-collapsed .cp-app__nav-item {
    justify-content: center;
    padding: .6rem 0;
  }
  body.cp-app--sidebar-collapsed .cp-app__nav-item span { display: none; }

  /* Topbar */
  .cp-app__topbar {
    height: var(--cp-topbar-h);
    background: linear-gradient(180deg, rgba(10, 14, 20, .98) 0%, rgba(6, 10, 16, .98) 100%);
    border-bottom: 1px solid var(--cp-line2);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: .8rem;
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  }
  .cp-app__topbar-toggle {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--cp-line2);
    color: var(--cp-cyan);
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--cp-dur) var(--cp-ease);
    flex: none;
  }
  .cp-app__topbar-toggle:hover {
    border-color: var(--cp-cyan);
    background: var(--cp-cyan-a08);
  }
  .cp-app__topbar-search {
    flex: 1;
    max-width: 400px;
    position: relative;
  }
  .cp-app__topbar-search input {
    width: 100%;
    padding: .5rem 1rem .5rem 2.2rem;
    background: var(--cp-panel2);
    border: 1px solid var(--cp-line2);
    color: var(--cp-txt);
    font-family: var(--cp-font-mono);
    font-size: .82rem;
    outline: none;
    transition: all var(--cp-dur) var(--cp-ease);
    min-height: 36px;
  }
  .cp-app__topbar-search input:focus {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 0 1px var(--cp-cyan-a30), 0 0 14px var(--cp-cyan-a15);
  }
  .cp-app__topbar-search i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-cyan);
    font-size: .85rem;
    pointer-events: none;
  }
  .cp-app__topbar-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
  }
  .cp-app__topbar-btn {
    position: relative;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cp-dim2);
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-app__topbar-btn:hover {
    color: var(--cp-cyan);
    border-color: var(--cp-line2);
    background: var(--cp-cyan-a05);
  }

  /* Content */
  .cp-app__content {
    flex: 1 1 0;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--cp-dur) var(--cp-ease);
  }
  @media (min-width: 992px) {
    .cp-app__content {
      width: calc(100% - var(--cp-sidebar-w));
      margin-left: var(--cp-sidebar-w);
      flex: none;
    }
    body.cp-app--sidebar-collapsed .cp-app__content {
      width: calc(100% - var(--cp-sidebar-w-collapsed));
      margin-left: var(--cp-sidebar-w-collapsed);
    }
  }
  @media (max-width: 991px) {
    .cp-app__sidebar { transform: translateX(-100%); }
    body.cp-app--sidebar-shown .cp-app__sidebar { transform: translateX(0); }
    .cp-app__content { width: 100%; margin-left: 0; }
  }

  /* Content header */
  .cp-app__content-header {
    padding: 1.2rem 2rem;
    border-bottom: 1px solid var(--cp-line);
    background: linear-gradient(180deg, var(--cp-cyan-a05), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cp-app__page-title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: .04em;
    color: var(--cp-txt);
    margin: 0;
    text-shadow: 0 0 10px var(--cp-cyan-a15);
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .cp-app__page-title i { color: var(--cp-cyan); font-size: 1.1rem; }

  /* Content body */
  .cp-app__content-body {
    padding: 1.6rem 2rem;
    flex: 1 1 auto;
  }

  /* Footer */
  .cp-app__footer {
    padding: 1rem 2rem;
    border-top: 1px solid var(--cp-line);
    background: rgba(0, 0, 0, .3);
    font-family: var(--cp-font-mono);
    font-size: .7rem;
    color: var(--cp-dim2);
    letter-spacing: .1em;
    text-align: center;
    margin-top: auto;
    flex-shrink: 0;
  }
  .cp-app__footer b { color: var(--cp-cyan); font-weight: 400; }

  /* Sidebar overlay (mobile) */
  .cp-app__sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: calc(var(--z-sidebar) - 1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.cp-app--sidebar-shown .cp-app__sidebar-overlay { display: block; }
}


/* ================================================================
   32. PAGE HEADER & SECTION BLOCKS
   ================================================================ */
@layer layout {

  .cp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.2rem 0 1.4rem;
    border-bottom: 1px solid var(--cp-line);
    margin-bottom: 1.4rem;
  }
  .cp-page-header__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: .04em;
    color: var(--cp-txt);
    margin: .4rem 0 .2rem;
    text-shadow: 0 0 12px var(--cp-cyan-a15);
  }
  .cp-page-header__desc {
    font-size: .88rem;
    color: var(--cp-dim2);
    margin: 0;
  }
  .cp-page-header__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
  }

  /* Section block — titled section with body */
  .cp-section-block {
    background: var(--cp-panel);
    border: 1px solid var(--cp-line2);
    margin-bottom: 1.4rem;
    position: relative;
    overflow: hidden;
  }
  .cp-section-block__head {
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--cp-line);
    background: linear-gradient(180deg, var(--cp-cyan-a05), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cp-section-block__title {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cp-txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .cp-section-block__title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--cp-cyan);
    box-shadow: 0 0 8px var(--cp-cyan);
  }
  .cp-section-block__actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
  }
  .cp-section-block__body { padding: 1.4rem; }
  .cp-section-block__body--flush { padding: 0; }
  .cp-section-block__body--tight { padding: .8rem 1.4rem; }

  /* Container */
  .cp-container { max-width: var(--cp-content-lg); margin: 0 auto; padding: 0 1.2rem; }
  .cp-container--sm { max-width: var(--cp-content-sm); }
  .cp-container--md { max-width: var(--cp-content-md); }
  .cp-container--fluid { max-width: 100%; }

  .cp-section { padding: 3.2rem 0; }
}


/* ================================================================
   33. STAT GRID & KPI MEGA CARD — fluid layout
   ================================================================ */
@layer layout {

  .cp-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
  }
  .cp-page-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
  .cp-page-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .cp-page-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

  /* 12-column fluid grid */
  .cp-fluid-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  .cp-fluid-grid > * { grid-column: span 12; }
  .cp-col-12 { grid-column: span 12; }
  .cp-col-8  { grid-column: span 8; }
  .cp-col-6  { grid-column: span 6; }
  .cp-col-4  { grid-column: span 4; }
  .cp-col-3  { grid-column: span 3; }
  .cp-col-2  { grid-column: span 2; }

  /* Layout primitives */
  .cp-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .cp-stack { display: flex; flex-direction: column; gap: 1rem; }
  .cp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.2rem; }
  .cp-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.2rem; }
  .cp-divider { border: 0; border-top: 1px solid var(--cp-line); margin: 1.6rem 0; }
}


/* ================================================================
   34. UTILITIES — cascade-managed, no !important
   Layer "utilities" tetap menang karena urutan layer.
   ================================================================ */
@layer utilities {

  /* Display */
  .cp-block { display: block; }
  .cp-inline-block { display: inline-block; }
  .cp-inline { display: inline; }
  .cp-flex { display: flex; }
  .cp-inline-flex { display: inline-flex; }
  .cp-grid { display: grid; }
  .cp-hidden { display: none; }
  .cp-invisible { visibility: hidden; }

  /* Flex direction */
  .cp-flex-row { flex-direction: row; }
  .cp-flex-col { flex-direction: column; }
  .cp-flex-wrap { flex-wrap: wrap; }
  .cp-flex-nowrap { flex-wrap: nowrap; }

  /* Justify */
  .cp-justify-start { justify-content: flex-start; }
  .cp-justify-end { justify-content: flex-end; }
  .cp-justify-center { justify-content: center; }
  .cp-justify-between { justify-content: space-between; }
  .cp-justify-around { justify-content: space-around; }
  .cp-justify-evenly { justify-content: space-evenly; }

  /* Align items */
  .cp-items-start { align-items: flex-start; }
  .cp-items-end { align-items: flex-end; }
  .cp-items-center { align-items: center; }
  .cp-items-baseline { align-items: baseline; }
  .cp-items-stretch { align-items: stretch; }

  /* Flex grow/shrink */
  .cp-flex-1 { flex: 1 1 0%; }
  .cp-flex-auto { flex: 1 1 auto; }
  .cp-flex-none { flex: none; }
  .cp-flex-grow { flex-grow: 1; }
  .cp-flex-shrink-0 { flex-shrink: 0; }

  /* Gap */
  .cp-gap-0 { gap: 0; }
  .cp-gap-1 { gap: .25rem; }
  .cp-gap-2 { gap: .5rem; }
  .cp-gap-3 { gap: .75rem; }
  .cp-gap-4 { gap: 1rem; }
  .cp-gap-5 { gap: 1.5rem; }
  .cp-gap-6 { gap: 2rem; }

  /* Margin */
  .cp-m-0 { margin: 0; }
  .cp-m-1 { margin: .25rem; }
  .cp-m-2 { margin: .5rem; }
  .cp-m-3 { margin: .75rem; }
  .cp-m-4 { margin: 1rem; }
  .cp-m-5 { margin: 1.5rem; }
  .cp-m-6 { margin: 2rem; }
  .cp-m-auto { margin: auto; }
  .cp-mx-0 { margin-left: 0; margin-right: 0; }
  .cp-mx-auto { margin-left: auto; margin-right: auto; }
  .cp-my-0 { margin-top: 0; margin-bottom: 0; }
  .cp-my-2 { margin-top: .5rem; margin-bottom: .5rem; }
  .cp-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
  .cp-mt-0 { margin-top: 0; }
  .cp-mt-2 { margin-top: .5rem; }
  .cp-mt-4 { margin-top: 1rem; }
  .cp-mt-6 { margin-top: 2rem; }
  .cp-mb-0 { margin-bottom: 0; }
  .cp-mb-2 { margin-bottom: .5rem; }
  .cp-mb-4 { margin-bottom: 1rem; }
  .cp-mb-6 { margin-bottom: 2rem; }

  /* Padding */
  .cp-p-0 { padding: 0; }
  .cp-p-2 { padding: .5rem; }
  .cp-p-4 { padding: 1rem; }
  .cp-p-6 { padding: 1.5rem; }
  .cp-px-0 { padding-left: 0; padding-right: 0; }
  .cp-px-2 { padding-left: .5rem; padding-right: .5rem; }
  .cp-px-4 { padding-left: 1rem; padding-right: 1rem; }
  .cp-py-0 { padding-top: 0; padding-bottom: 0; }
  .cp-py-2 { padding-top: .5rem; padding-bottom: .5rem; }
  .cp-py-4 { padding-top: 1rem; padding-bottom: 1rem; }

  /* Width */
  .cp-w-full { width: 100%; }
  .cp-w-auto { width: auto; }
  .cp-w-screen { width: 100vw; }
  .cp-min-w-0 { min-width: 0; }

  /* Text align */
  .cp-text-left { text-align: left; }
  .cp-text-center { text-align: center; }
  .cp-text-right { text-align: right; }
  .cp-text-justify { text-align: justify; }

  /* Text transform */
  .cp-uppercase { text-transform: uppercase; }
  .cp-lowercase { text-transform: lowercase; }
  .cp-capitalize { text-transform: capitalize; }

  /* Font weight */
  .cp-font-normal { font-weight: 400; }
  .cp-font-medium { font-weight: 500; }
  .cp-font-semibold { font-weight: 600; }
  .cp-font-bold { font-weight: 700; }

  /* Font size */
  .cp-text-xs { font-size: .68rem; }
  .cp-text-sm { font-size: .78rem; }
  .cp-text-base { font-size: .88rem; }
  .cp-text-lg { font-size: 1rem; }
  .cp-text-xl { font-size: 1.2rem; }
  .cp-text-2xl { font-size: 1.5rem; }
  .cp-text-3xl { font-size: 1.875rem; }

  /* Position */
  .cp-relative { position: relative; }
  .cp-absolute { position: absolute; }
  .cp-fixed { position: fixed; }
  .cp-sticky { position: sticky; }

  /* Overflow */
  .cp-overflow-hidden { overflow: hidden; }
  .cp-overflow-auto { overflow: auto; }
  .cp-overflow-x-auto { overflow-x: auto; }
  .cp-overflow-y-auto { overflow-y: auto; }

  /* Cursor */
  .cp-cursor-pointer { cursor: pointer; }
  .cp-cursor-not-allowed { cursor: not-allowed; }
  .cp-cursor-grab { cursor: grab; }

  /* Opacity */
  .cp-opacity-0 { opacity: 0; }
  .cp-opacity-50 { opacity: .5; }
  .cp-opacity-100 { opacity: 1; }

  /* Animations entrance */
  @keyframes cp-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes cp-fadeUp {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: none; }
  }
  .cp-anim-up   { animation: cp-fadeUp .5s var(--cp-ease) both; }
  .cp-anim-up-1 { animation: cp-fadeUp .5s var(--cp-ease) .08s both; }
  .cp-anim-up-2 { animation: cp-fadeUp .5s var(--cp-ease) .16s both; }
  .cp-anim-up-3 { animation: cp-fadeUp .5s var(--cp-ease) .24s both; }

  /* Screen reader only */
  .cp-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Text helpers */
  .cp-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cp-text-mono { font-family: var(--cp-font-mono); }
  .cp-text-display { font-family: var(--cp-font-display); }
}


/* ================================================================
   35. THEMES — dark default + light auto + 15 presets
   ================================================================ */
@layer themes {

  /* Light mode — auto via prefers-color-scheme OR manual via .cp-light */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      --cp-void:   #eef2f5;
      --cp-panel:  #ffffff;
      --cp-panel2: #f2f6f9;
      --cp-line:   #c9d4dd;
      --cp-line2:  #a8b8c5;
      --cp-txt:    #1a232c;
      --cp-dim:    #4d6175;
      --cp-dim2:   #44586a;
    }
  }

  /* Manual light override */
  .cp-light {
    --cp-void:   #eef2f5;
    --cp-panel:  #ffffff;
    --cp-panel2: #f2f6f9;
    --cp-line:   #c9d4dd;
    --cp-line2:  #a8b8c5;
    --cp-txt:    #1a232c;
    --cp-dim:    #4d6175;
    --cp-dim2:   #44586a;
  }
  .cp-light .cp-scanlines,
  .cp-light .cp-scanbeam,
  .cp-light .cp-crt-vignette,
  .cp-light .cp-noise { display: none; }
  .cp-light .cp-topbar,
  .cp-light .cp-statusbar { background: rgba(255, 255, 255, .92); }
  .cp-light .cp-terminal { background: #ffffff; }

  /* Theme presets — only shift --cp-neon and --cp-cyan */
  body[data-theme="amber"]      { --cp-neon: #ff9f1c; --cp-cyan: #fcee0a; }
  body[data-theme="matrix"]     { --cp-neon: #00ff9f; --cp-cyan: #b8ff45; }
  body[data-theme="copper"]     { --cp-neon: #ff9f72; --cp-cyan: #ffc4a1; }
  body[data-theme="neon-green"] { --cp-neon: #b8ff00; --cp-cyan: #00ff9f; }
  body[data-theme="royal"]      { --cp-neon: #b18cff; --cp-cyan: #00f0ff; }
  body[data-theme="steel"]      { --cp-neon: #d7e5f2; --cp-cyan: #809db8; }
  body[data-theme="cherry"]     { --cp-neon: #ff2a6d; --cp-cyan: #ff91b5; }
  body[data-theme="azure"]      { --cp-neon: #00cfff; --cp-cyan: #7cecff; }
  body[data-theme="lime"]       { --cp-neon: #d7ff00; --cp-cyan: #00ff9f; }
  body[data-theme="rose-gold"]  { --cp-neon: #e8a5a5; --cp-cyan: #f0c7a8; }
  body[data-theme="deep-space"] { --cp-neon: #8b9dff; --cp-cyan: #b18cff; }
  body[data-theme="honey"]      { --cp-neon: #fcee0a; --cp-cyan: #ff9f1c; }
  body[data-theme="indigo"]     { --cp-neon: #818cf8; --cp-cyan: #a5b4fc; }
  body[data-theme="desert"]     { --cp-neon: #e9c46a; --cp-cyan: #d4a373; }
  body[data-theme="rose"]       { --cp-neon: #ff7eb6; --cp-cyan: #ffb3d1; }
}


/* ================================================================
   36. PRINT STYLES
   ================================================================ */
@media print {
  .cp-scanlines, .cp-scanbeam, .cp-crt-vignette, .cp-noise,
  .cp-cyber-rain, .cp-grid-bg, .cp-topbar, .cp-statusbar,
  .cp-sidebar, .cp-app__sidebar, .cp-app__topbar, .cp-boot,
  .cp-modal-overlay, .cp-toasts, .cp-fab, .cp-back-to-top { display: none !important; }

  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
  }

  .cp-panel, .cp-card, .cp-stat, .cp-terminal, .cp-table-wrap {
    background: white !important;
    border: 1px solid #999 !important;
    color: black !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .cp-display, .cp-panel__title,
  .cp-text-cyan, .cp-text-neon, .cp-neon-text {
    color: black !important;
    text-shadow: none !important;
  }

  .cp-section { padding: 1rem 0 !important; }

  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
}


/* ================================================================
   37. ACCESSIBILITY
   ================================================================ */

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cp-scanbeam, .cp-radar__sweep, .cp-holo::before,
  .cp-id__holo, .cp-noise, .cp-scan-img__line,
  .cp-cyber-rain { animation: none !important; }
}

/* High contrast preference */
@media (prefers-contrast: more) {
  :root {
    --cp-line: #4a5a6a;
    --cp-line2: #6a8090;
    --cp-dim: #9aaab8;
    --cp-dim2: #b0c0d0;
  }
  .cp-btn, .cp-panel, .cp-card, .cp-stat,
  .cp-input, .cp-select, .cp-textarea {
    border-width: 2px;
  }
}

/* Focus visible — already global in base layer, reinforce here */
@layer base {
  button:focus-visible,
  a:focus-visible,
  .cp-btn:focus-visible,
  .cp-tab:focus-visible,
  .cp-topbar__link:focus-visible,
  .cp-sidebar__link:focus-visible,
  .cp-dropdown__item:focus-visible,
  .cp-pager__btn:focus-visible {
    outline: var(--cp-focus-outline);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--cp-cyan-a15);
  }
}


/* ================================================================
   38. RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet landscape & below */
@media (max-width: 1023px) {
  .cp-sidebar { width: var(--cp-sidebar-w-collapsed); padding: 1rem .4rem; }
  .cp-sidebar__link { justify-content: center; }
  .cp-sidebar__link span { display: none; }
  .cp-topbar__nav { overflow-x: auto; max-width: 60%; scrollbar-width: none; }
  .cp-topbar__nav::-webkit-scrollbar { display: none; }
}

/* Mobile */
@media (max-width: 640px) {
  .cp-topbar { padding: .6rem .8rem; gap: .6rem; }
  .cp-topbar__nav { display: none; }
  .cp-topbar__brand { font-size: .9rem; }
  .cp-stat__value { font-size: 1.5rem; }
  .cp-kpi__value { font-size: 1.8rem; }
  .cp-toasts { bottom: 3.4rem; right: .8rem; left: .8rem; width: auto; }
  .cp-section { padding: 2.2rem 0; }
  .cp-container { padding: 0 .8rem; }
  .cp-panel { padding: 1rem; }
  .cp-card { padding: 1rem; }
  .cp-grid-2, .cp-grid-3 { grid-template-columns: 1fr; }
  .cp-modal__body, .cp-modal__head, .cp-modal__foot { padding: .8rem 1rem; }
  .cp-app__content-header { padding: 1rem; }
  .cp-app__content-body { padding: 1rem; }
  .cp-app__footer { padding: .8rem 1rem; }

  /* Disable backdrop-filter on mobile for performance */
  .cp-topbar, .cp-statusbar, .cp-modal-overlay, .cp-app__topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cp-void);
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .cp-btn--lg { padding: .65rem 1.2rem; font-size: .9rem; }
  .cp-topbar__brand .cp-kicker { display: none; }
}


/* ================================================================
   39. PERFORMANCE OPTIMIZATIONS
   ================================================================ */

/* Content visibility — skip rendering offscreen long content */
@layer utilities {
  .cp-cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
}

/* Reduce backdrop-filter on low-end devices via pointer check */
@media (hover: none) and (pointer: coarse) {
  .cp-topbar, .cp-statusbar, .cp-modal-overlay,
  .cp-app__topbar, .cp-dropdown__menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* will-change only on animated elements (already set inline above) */
.cp-scanbeam, .cp-radar__sweep, .cp-holo::before,
.cp-id__holo, .cp-spinner, .cp-skel__line {
  will-change: transform;
}


/* ================================================================
   40. Z-INDEX SYSTEM — organized hierarchy
   ================================================================ */
@layer overrides {
  /* Override scattered hardcoded z-index with variables */
  .cp-skip-link { z-index: var(--z-loading); }
  .cp-modal-overlay { z-index: var(--z-modal); }
  .cp-modal { z-index: calc(var(--z-modal) + 1); }
  .cp-toasts { z-index: var(--z-toast); }
  .cp-toast { z-index: var(--z-toast); }
  .cp-popover { z-index: var(--z-tooltip); }
  .cp-dropdown__menu { z-index: var(--z-dropdown); }
  .cp-boot { z-index: var(--z-loading); }
  .cp-app__sidebar { z-index: var(--z-sidebar); }
  .cp-app__topbar { z-index: var(--z-topbar); }
  .cp-app__sidebar-overlay { z-index: calc(var(--z-sidebar) - 1); }
  .cp-fab { z-index: var(--z-sticky); }
  .cp-back-to-top { z-index: var(--z-sticky); }
  .cp-statusbar { z-index: var(--z-sticky); }
  .cp-tip::after { z-index: var(--z-tooltip); }
  .cp-scanlines { z-index: var(--z-overlay); }
  .cp-crt-vignette { z-index: calc(var(--z-overlay) - 2); }
  .cp-noise { z-index: calc(var(--z-overlay) + 1); }
  body.cp-crt-on::after { z-index: calc(var(--z-loading) - 1); }
}


/* ================================================================
   41. SOCIAL MEDIA GRID — wajib per standar visual Abdurrozak
   12 link dengan ikon Font Awesome, chamfered, hover cyan + ikon neon
   Link eksternal wajib target="_blank" rel="noopener"

   <div class="cp-social-grid">
     <a class="cp-social-btn" href="..." target="_blank" rel="noopener">
       <i class="fa-solid fa-link"></i>
       <span class="cp-social-btn__label">s.id</span>
     </a>
     ...
   </div>

   Daftar link (per standar embedded dokumentasi):
   - s.id         fa-solid fa-link          https://s.id/abdurrozakskom
   - GitHub       fa-brands fa-github       https://github.com/abdurrozakskom
   - Instagram    fa-brands fa-instagram    https://www.instagram.com/abdurrozak.skom
   - Threads      fa-solid fa-at            https://www.threads.com/@abdurrozak.skom
   - Facebook     fa-brands fa-facebook     https://www.facebook.com/abdur.rozak.skom
   - TikTok       fa-brands fa-tiktok       https://www.tiktok.com/@abdurrozak.skom
   - YT Teacher   fa-brands fa-youtube      https://www.youtube.com/@AbdurRozakSKom
   - YT Course    fa-brands fa-youtube      https://www.youtube.com/@JackTersakiti
   - YT Studio    fa-brands fa-youtube      https://www.youtube.com/@revengestudiolampung
   - Hashnode     fa-solid fa-hashtag      https://hashnode.com/@abdurrozakskom
   - WhatsApp     fa-brands fa-whatsapp     https://wa.me/6289675223353
   - Email        fa-solid fa-envelope     mailto:abdurrozak.skom@gmail.com
   ================================================================ */
@layer components {

  .cp-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .6rem;
    margin: 1.6rem 0;
  }

  .cp-social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .9rem .6rem;
    min-height: 80px;
    font-family: var(--cp-font-display);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cp-dim2);
    background: var(--cp-panel);
    border: 1px solid var(--cp-line2);
    text-decoration: none;
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    position: relative;
    overflow: hidden;
  }

  .cp-social-btn i {
    font-size: 1.4rem;
    color: var(--cp-dim2);
    transition: all var(--cp-dur) var(--cp-ease);
  }

  /* Sweep effect on hover */
  .cp-social-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg,
      transparent,
      var(--cp-cyan-a12),
      transparent);
    transform: skewX(-20deg);
    transition: left .5s var(--cp-ease);
    pointer-events: none;
  }

  .cp-social-btn:hover {
    color: var(--cp-cyan);
    border-color: var(--cp-cyan);
    background: var(--cp-cyan-a08);
    box-shadow: 0 0 16px var(--cp-cyan-a15),
                inset 0 0 12px var(--cp-cyan-a05);
    transform: translateY(-2px);
  }

  .cp-social-btn:hover::before { left: 130%; }

  .cp-social-btn:hover i {
    color: var(--cp-neon);
    text-shadow: 0 0 8px var(--cp-neon-a12),
                 0 0 16px var(--cp-neon-a12);
    transform: scale(1.1);
  }

  .cp-social-btn:focus-visible {
    outline: var(--cp-focus-outline);
    outline-offset: 2px;
  }

  .cp-social-btn__label {
    text-align: center;
    line-height: 1.2;
  }

  /* Brand color accent on hover (subtle, tetap cyberpunk) */
  .cp-social-btn--github:hover i    { color: #fff; }
  .cp-social-btn--instagram:hover i { color: #e1306c; }
  .cp-social-btn--tiktok:hover i    { color: var(--cp-neon); }
  .cp-social-btn--youtube:hover i   { color: #ff0000; }
  .cp-social-btn--whatsapp:hover i  { color: #25d366; }
  .cp-social-btn--facebook:hover i  { color: #1877f2; }
  .cp-social-btn--threads:hover i   { color: var(--cp-txt); }

  /* Mobile: 2 kolom */
  @media (max-width: 640px) {
    .cp-social-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: .5rem;
    }
    .cp-social-btn {
      min-height: 70px;
      padding: .7rem .4rem;
      font-size: .68rem;
    }
    .cp-social-btn i { font-size: 1.2rem; }
  }
}


/* ================================================================
   42. SITE FOOTER — "Dibuat dengan Love" wajib per standar visual

   <footer class="cp-site-footer">
     <p class="cp-site-footer__credit">
       Dibuat dengan <i class="fa-solid fa-heart" aria-hidden="true"></i>
       oleh Abdur Rozak, S.Kom. -
       <a class="cp-site-footer__domain" href="https://abdurrozak.my.id/">abdurrozak.my.id</a>
     </p>
   </footer>
   ================================================================ */
@layer layout {

  .cp-site-footer {
    position: relative;
    padding: 1.4rem 2rem;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4));
    border-top: 1px solid var(--cp-line);
    text-align: center;
    margin-top: auto;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* Accent line di atas footer */
  .cp-site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      var(--cp-cyan) 20%,
      var(--cp-neon) 50%,
      var(--cp-mag) 80%,
      transparent);
    opacity: .4;
    box-shadow: 0 0 8px var(--cp-cyan-a15);
  }

  /* Scanline subtle di footer */
  .cp-site-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
      transparent 0,
      transparent 2px,
      var(--cp-cyan-a05) 2px,
      var(--cp-cyan-a05) 3px);
    pointer-events: none;
    opacity: .3;
  }

  .cp-site-footer__credit {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--cp-font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--cp-dim2);
    margin: 0;
  }

  /* Heart icon — beating animation */
  .cp-site-footer__credit .fa-heart {
    color: var(--cp-mag);
    font-size: .85rem;
    text-shadow: 0 0 6px var(--cp-mag-a12),
                 0 0 12px var(--cp-mag-a12);
    animation: cp-heartbeat 1.4s ease-in-out infinite;
  }

  @keyframes cp-heartbeat {
    0%, 100% { transform: scale(1); }
    15%      { transform: scale(1.25); }
    30%      { transform: scale(1); }
    45%      { transform: scale(1.15); }
    60%      { transform: scale(1); }
  }

  /* Nama author — neon glow */
  .cp-site-footer__credit b,
  .cp-site-footer__credit strong {
    color: var(--cp-cyan);
    font-weight: 600;
    text-shadow: 0 0 6px var(--cp-cyan-a15);
  }

  /* Domain link */
  .cp-site-footer__domain {
    color: var(--cp-cyan);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .04em;
    transition: all var(--cp-dur) var(--cp-ease);
    border-bottom: 1px dashed transparent;
  }

  .cp-site-footer__domain:hover {
    color: var(--cp-neon);
    text-shadow: 0 0 8px var(--cp-neon-a12);
    border-bottom-color: var(--cp-neon);
  }

  /* Footer metadata (optional secondary line) */
  .cp-site-footer__meta {
    position: relative;
    z-index: 1;
    margin-top: .5rem;
    font-family: var(--cp-font-mono);
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--cp-dim);
    opacity: .7;
  }

  .cp-site-footer__meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
  }

  .cp-site-footer__meta span + span::before {
    content: '|';
    margin: 0 .6rem;
    color: var(--cp-line2);
  }

  /* Footer within app shell — stick to bottom */
  .cp-app .cp-site-footer {
    margin-top: auto;
  }

  /* Mobile */
  @media (max-width: 640px) {
    .cp-site-footer { padding: 1rem 1rem; }
    .cp-site-footer__credit {
      font-size: .72rem;
      flex-direction: column;
      gap: .2rem;
    }
    .cp-site-footer__meta { font-size: .6rem; }
    .cp-site-footer__meta span + span::before { margin: 0 .4rem; }
  }

  /* Reduced motion — disable heartbeat */
  @media (prefers-reduced-motion: reduce) {
    .cp-site-footer__credit .fa-heart { animation: none; }
  }
}


/* ================================================================
   43. NAVBAR — Cyberpunk Navbar dengan Brand + Menu + Hamburger Mobile
   Per standar visual Abdurrozak section 7:
   - Header fixed di atas, tinggi 48px
   - Background rgba(11,17,21,.92), backdrop-filter blur
   - Border bawah 1px solid var(--cp-line2)
   - Brand kiri: ABDURROZAK (Rajdhani bold putih), bagian ROZAK neon
   - Menu Rajdhani 600 ~13px, letter-spacing 1px
   - Hover/active: warna neon + border bawah 2px neon
   - Hamburger Font Awesome fa-bars pada <=768px, buka dropdown gelap
   - Semua link internal target="_self"

   Menu items:
   | HOME      | https://abdurrozak.my.id/ |
   | WIKI      | https://wiki.abdurrozak.my.id/ |
   | FORUM     | https://forum.abdurrozak.my.id/ |
   | LMS       | https://lms.abdurrozak.my.id/ |
   | TKJ       | https://tkj.abdurrozak.my.id/ |
   | ABOUT ME  | https://abdurrozak.my.id/DIRLISTER/ABDURROZAK/jack_tentang-saya.html |
   | MICROSITE | https://abdurrozak.my.id/DIRLISTER/ABDURROZAK/jack_microsite.html |
   | KONTAK    | https://abdurrozak.my.id/DIRLISTER/ABDURROZAK/jack_kontak-me.html |
   | PERSEMBAHAN | https://abdurrozak.my.id/DIRLISTER/ABDURROZAK/jack_persembahan.html |
   | HELP      | Bantuan |

   HTML:
   <header class="cp-navbar" id="cp-navbar">
     <div class="cp-navbar__inner">
       <a class="cp-navbar__brand" href="https://abdurrozak.my.id/" target="_self">
         <span class="cp-navbar__brand-logo"><i class="fa-solid fa-terminal"></i></span>
         <span class="cp-navbar__brand-name">ABDUR<span class="cp-navbar__brand-accent">ROZAK</span></span>
       </a>

       <nav class="cp-navbar__menu" id="cp-navbar-menu">
         <a class="cp-navbar__link is-active" href="..." target="_self">HOME</a>
         <a class="cp-navbar__link" href="..." target="_self">WIKI</a>
         <a class="cp-navbar__link" href="..." target="_self">FORUM</a>
         <a class="cp-navbar__link" href="..." target="_self">LMS</a>
         <a class="cp-navbar__link" href="..." target="_self">TKJ</a>
         <a class="cp-navbar__link" href="..." target="_self">ABOUT ME</a>
         <a class="cp-navbar__link" href="..." target="_self">MICROSITE</a>
         <a class="cp-navbar__link" href="..." target="_self">KONTAK</a>
         <a class="cp-navbar__link" href="..." target="_self">PERSEMBAHAN</a>
         <a class="cp-navbar__link" href="..." target="_self">HELP</a>
       </nav>

       <div class="cp-navbar__right">
         <span class="cp-navbar__status">
           <span class="cp-dot"></span> ONLINE
         </span>
         <button class="cp-navbar__hamburger" id="cp-navbar-toggle"
                 aria-label="Toggle menu" aria-expanded="false" aria-controls="cp-navbar-panel">
           <i class="fa-solid fa-bars"></i>
         </button>
       </div>
     </div>

     <!-- Mobile dropdown panel -->
     <div class="cp-navbar__panel" id="cp-navbar-panel" hidden>
       <a class="cp-navbar__panel-link is-active" href="..." target="_self">
         <i class="fa-solid fa-house"></i><span>HOME</span>
       </a>
       ... (repeat for each menu item)
     </div>
   </header>
   ================================================================ */
@layer components {

  /* ---------- Navbar container — fixed top, 48px ---------- */
  .cp-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--cp-header-h);
    background: rgba(11, 17, 21, .92);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--cp-line2);
    z-index: var(--z-topbar);
    transition: transform var(--cp-dur) var(--cp-ease);
  }

  /* Animated accent line at bottom (cyan → neon → magenta sweep) */
  .cp-navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--cp-cyan) 20%,
      var(--cp-neon) 50%,
      var(--cp-mag) 80%,
      transparent 100%);
    background-size: 200% 100%;
    animation: cp-navbar-sweep 6s linear infinite;
    box-shadow: 0 0 8px var(--cp-cyan-a15);
    pointer-events: none;
  }
  @keyframes cp-navbar-sweep {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
  }

  /* Scanline subtle overlay inside navbar */
  .cp-navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
      transparent 0,
      transparent 2px,
      rgba(0, 240, 255, .025) 2px,
      rgba(0, 240, 255, .025) 3px);
    pointer-events: none;
    z-index: 0;
  }

  /* ---------- Inner wrapper ---------- */
  .cp-navbar__inner {
    position: relative;
    z-index: 2;
    max-width: var(--cp-content-lg);
    height: 100%;
    margin: 0 auto;
    padding: 0 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  /* ---------- Brand (left) ---------- */
  .cp-navbar__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    flex: none;
    transition: all var(--cp-dur) var(--cp-ease);
  }

  /* Brand logo — terminal icon in chamfered box */
  .cp-navbar__brand-logo {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-cyan);
    font-size: 1rem;
    background: var(--cp-cyan-a08);
    border: 1.5px solid var(--cp-cyan);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    box-shadow: 0 0 10px var(--cp-cyan-a15),
                inset 0 0 6px var(--cp-cyan-a05);
    transition: all var(--cp-dur) var(--cp-ease);
  }

  .cp-navbar__brand:hover .cp-navbar__brand-logo {
    background: var(--cp-cyan-a15);
    box-shadow: 0 0 16px var(--cp-cyan-a30),
                inset 0 0 8px var(--cp-cyan-a08);
    transform: rotate(-3deg) scale(1.05);
  }

  /* Brand text — ABDURROZAK with ROZAK in neon */
  .cp-navbar__brand-name {
    font-family: var(--cp-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .16em;
    color: var(--cp-txt);
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(255, 255, 255, .15);
    transition: text-shadow var(--cp-dur) var(--cp-ease);
  }

  .cp-navbar__brand-accent {
    color: var(--cp-neon);
    text-shadow: 0 0 6px var(--cp-neon-a12),
                 0 0 12px var(--cp-neon-a12);
    animation: cp-brand-flicker 4s linear infinite;
  }
  @keyframes cp-brand-flicker {
    0%, 92%, 100% { opacity: 1; }
    93%           { opacity: .4; }
    94%           { opacity: 1; }
    96%           { opacity: .7; }
    97%           { opacity: 1; }
  }

  /* Hover brand — subtle glitch shift */
  .cp-navbar__brand:hover .cp-navbar__brand-name {
    text-shadow: 2px 0 0 var(--cp-mag-a12),
                 -2px 0 0 var(--cp-cyan-a12),
                 0 0 8px rgba(255, 255, 255, .2);
  }

  /* ---------- Menu (center/right) ---------- */
  .cp-navbar__menu {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cp-navbar__menu::-webkit-scrollbar { display: none; }

  .cp-navbar__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .55rem .9rem;
    font-family: var(--cp-font-display);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cp-dim2);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all var(--cp-dur) var(--cp-ease);
  }

  /* Hover state — neon + animated underline */
  .cp-navbar__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--cp-neon);
    box-shadow: 0 0 6px var(--cp-neon-a12),
                0 0 12px var(--cp-neon-a12);
    transform: translateX(-50%);
    transition: width var(--cp-dur) var(--cp-ease);
  }

  .cp-navbar__link:hover {
    color: var(--cp-neon);
    text-shadow: 0 0 6px var(--cp-neon-a12);
  }
  .cp-navbar__link:hover::after { width: 70%; }

  /* Active state — neon + permanent underline */
  .cp-navbar__link.is-active {
    color: var(--cp-neon);
    text-shadow: 0 0 8px var(--cp-neon-a12);
  }
  .cp-navbar__link.is-active::after { width: 70%; }

  /* Focus visible — keyboard nav */
  .cp-navbar__link:focus-visible {
    outline: var(--cp-focus-outline);
    outline-offset: -2px;
  }

  /* ---------- Right side — status + hamburger ---------- */
  .cp-navbar__right {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: none;
  }

  /* Online status indicator (desktop only) */
  .cp-navbar__status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    font-family: var(--cp-font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--cp-green);
    text-shadow: 0 0 4px rgba(0, 255, 159, .3);
    background: rgba(0, 255, 159, .05);
    border: 1px solid rgba(0, 255, 159, .2);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  }

  /* ---------- Hamburger button (hidden on desktop) ---------- */
  .cp-navbar__hamburger {
    display: none;
    width: 36px; height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--cp-cyan);
    font-size: 1.1rem;
    background: transparent;
    border: 1px solid var(--cp-line2);
    cursor: pointer;
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }

  .cp-navbar__hamburger:hover {
    color: var(--cp-neon);
    border-color: var(--cp-neon);
    background: var(--cp-neon-a08);
    box-shadow: 0 0 10px var(--cp-neon-a12);
  }

  .cp-navbar__hamburger:focus-visible {
    outline: var(--cp-focus-outline);
    outline-offset: 2px;
  }

  /* X icon when menu open (JS toggles .is-open on navbar) */
  .cp-navbar.is-open .cp-navbar__hamburger i::before {
    content: '\f00d'; /* fa-xmark */
  }

  /* ---------- Mobile dropdown panel ---------- */
  .cp-navbar__panel {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(6, 8, 10, .98);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-top: 1px solid var(--cp-line);
    border-bottom: 1px solid var(--cp-cyan);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .7),
                0 0 20px var(--cp-cyan-a15);
    padding: .5rem;
    z-index: calc(var(--z-topbar) - 1);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--cp-dur-slow) var(--cp-ease),
                padding var(--cp-dur-slow) var(--cp-ease);
    padding-top: 0;
    padding-bottom: 0;
  }

  .cp-navbar.is-open .cp-navbar__panel {
    max-height: 80vh;
    overflow-y: auto;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .cp-navbar__panel-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    font-family: var(--cp-font-display);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cp-dim2);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all var(--cp-dur) var(--cp-ease);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    margin-bottom: .2rem;
  }

  .cp-navbar__panel-link i {
    color: var(--cp-cyan);
    font-size: .9rem;
    width: 20px;
    text-align: center;
    transition: all var(--cp-dur) var(--cp-ease);
  }

  .cp-navbar__panel-link:hover {
    color: var(--cp-neon);
    background: var(--cp-neon-a08);
    border-left-color: var(--cp-neon);
    padding-left: 1.1rem;
  }

  .cp-navbar__panel-link:hover i {
    color: var(--cp-neon);
    text-shadow: 0 0 6px var(--cp-neon-a12);
  }

  .cp-navbar__panel-link.is-active {
    color: var(--cp-neon);
    background: var(--cp-neon-a08);
    border-left-color: var(--cp-neon);
  }
  .cp-navbar__panel-link.is-active i {
    color: var(--cp-neon);
    text-shadow: 0 0 6px var(--cp-neon-a12);
  }

  .cp-navbar__panel-link:focus-visible {
    outline: var(--cp-focus-outline);
    outline-offset: -2px;
  }

  /* ---------- Desktop breakpoint: show menu, hide hamburger ---------- */
  @media (min-width: 769px) {
    .cp-navbar__menu { display: flex; }
    .cp-navbar__hamburger { display: none; }
    .cp-navbar__panel { display: none; }
    .cp-navbar.is-open .cp-navbar__panel { display: none; }
  }

  /* ---------- Mobile breakpoint (<=768px): hide menu, show hamburger ---------- */
  @media (max-width: 768px) {
    .cp-navbar__inner { gap: .8rem; padding: 0 .8rem; }
    .cp-navbar__menu { display: none; }
    .cp-navbar__hamburger { display: flex; }
    .cp-navbar__status { display: none; }

    /* Brand text smaller on mobile */
    .cp-navbar__brand-name { font-size: .95rem; letter-spacing: .12em; }
    .cp-navbar__brand-logo { width: 28px; height: 28px; font-size: .9rem; }

    /* Panel as slide-down overlay */
    .cp-navbar__panel {
      display: block;
      max-height: 0;
    }
    .cp-navbar.is-open .cp-navbar__panel {
      max-height: calc(100vh - var(--cp-header-h));
    }
  }

  /* ---------- Very small screens ---------- */
  @media (max-width: 380px) {
    .cp-navbar__brand-name { font-size: .85rem; }
    .cp-navbar__brand-logo { width: 26px; height: 26px; }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    .cp-navbar::after { animation: none; }
    .cp-navbar__brand-accent { animation: none; }
    .cp-navbar__link::after { transition: none; }
  }

  /* ---------- Sticky behavior — hide on scroll down, show on scroll up ---------- */
  .cp-navbar.is-hidden {
    transform: translateY(-100%);
  }

  /* ---------- Backdrop when navbar panel open (mobile) ---------- */
  .cp-navbar__backdrop {
    position: fixed;
    inset: var(--cp-header-h) 0 0 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: calc(var(--z-topbar) - 2);
    opacity: 0;
    visibility: hidden;
    transition: all var(--cp-dur) var(--cp-ease);
  }
  .cp-navbar.is-open .cp-navbar__backdrop {
    opacity: 1;
    visibility: visible;
  }
  @media (min-width: 769px) {
    .cp-navbar__backdrop { display: none; }
  }

  /* ---------- Active link tracking — for scrollspy ---------- */
  .cp-navbar__link[data-section] {
    position: relative;
  }
  .cp-navbar__link[data-section].is-active::before {
    content: '▸';
    position: absolute;
    left: -.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-neon);
    font-size: .6rem;
    text-shadow: 0 0 4px var(--cp-neon-a12);
  }

  /* ---------- Body offset when navbar is fixed ---------- */
  body:has(.cp-navbar) {
    padding-top: var(--cp-header-h);
  }

  /* ---------- App shell integration ---------- */
  .cp-app .cp-navbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
  }
  body:has(.cp-app) .cp-app {
    padding-top: 0;
  }
  body:has(.cp-app .cp-navbar) {
    padding-top: 0;
  }
}


/* ================================================================
   END — ARRQ-CyberPunk.css v2.0 PROFESSIONAL
   ================================================================
   Untuk kontribusi:
   1. Tambah komponen di layer @layer components
   2. Tambah utility di layer @layer utilities
   3. Tambah tema di layer @layer themes
   4. Jangan gunakan !important — andalkan urutan layer
   5. Token baru wajib di :root layer tokens
   6. Test di mobile (≤640px) untuk performa backdrop-filter
   7. Social grid & footer wajib ada di setiap halaman (section 41-42)
   8. Navbar wajib di setiap halaman dengan 10 menu wajib (section 43)
   9. JS toggle: document.getElementById('cp-navbar-toggle')
      .addEventListener('click', () => {
        const n = document.getElementById('cp-navbar');
        const isOpen = n.classList.toggle('is-open');
        document.getElementById('cp-navbar-toggle')
          .setAttribute('aria-expanded', isOpen);
      });
   ================================================================ */