@layer base,theme,layout,components,animations,pages;
@layer base {
  :root {
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-full:100px;
    --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-mono:'Space Grotesk','JetBrains Mono','Fira Code',monospace;
    --z-bg:-1;
    --z-content:1;
    --z-card:10;
    --z-nav:100;
    --z-sidebar:150;
    --z-modal:200;
    --z-toast:300;
    --z-glow:9999;
    --transition-theme:background 0.5s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease
  }
  *,*::before,*::after {
    margin:0;
    padding:0;
    box-sizing:border-box
  }
  html {
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    scroll-behavior:smooth
  }
  body {
    font-family:var(--font-sans);
    background:var(--bg-base);
    color:var(--text-primary);
    min-height:100vh;
    line-height:1.6;
    overflow-x:hidden;
    transition:var(--transition-theme)
  }
  a {
    color:var(--accent);
    text-decoration:none
  }
  a:hover {
    text-decoration:underline
  }
  img {
    max-width:100%;
    height:auto;
    display:block
  }
  button,input,select,textarea {
    font-family:inherit;
    font-size:inherit
  }
  ::-webkit-scrollbar {
    width:6px;
    height:6px
  }
  ::-webkit-scrollbar-track {
    background:transparent
  }
  ::-webkit-scrollbar-thumb {
    background:var(--scrollbar-thumb);
    border-radius:3px
  }
  ::-webkit-scrollbar-thumb:hover {
    background:var(--scrollbar-hover)
  }
  .font-mono {
    font-family:var(--font-mono)
  }
  @media print {
    .cyber-nav,.bg-layer,.theme-toggle,.cyber-toast {
      display:none !important
    }
    body {
      background:#fff !important;
      color:#000 !important
    }
    .cyber-card {
      background:#fff !important;
      border:1px solid #ccc !important;
      box-shadow:none !important
    }
    .main-content {
      padding:0 !important
    }
  }
}

@layer theme {
  [data-theme="cyber"],:root {
    --bg-deep:#030308;
    --bg-base:#030308;
    --card-base:#12121f;
    --card-elevated:#1a1a2e;
    --bg-card:linear-gradient(135deg,rgba(18,18,31,0.75),rgba(26,26,46,0.7));
    --bg-card-flat:#12121f;
    --bg-card-hover:#1a1a2e;
    --bg-frosted:rgba(15,23,42,0.93);
    --bg-input:rgba(0,0,0,0.3);
    --bg-table-head:rgba(6,182,212,0.1);
    --bg-table-hover:rgba(6,182,212,0.05);
    --cyan-primary:#06b6d4;
    --cyan-glow:rgba(6,182,212,0.4);
    --purple-primary:#8b5cf6;
    --purple-glow:rgba(139,92,246,0.4);
    --emerald-primary:#10b981;
    --accent:#06b6d4;
    --accent-glow:rgba(6,182,212,0.4);
    --accent2:#8b5cf6;
    --accent2-glow:rgba(139,92,246,0.4);
    --brand-start:#3b82f6;
    --brand-end:#8b5cf6;
    --emerald:#10b981;
    --color-success:#10b981;
    --color-danger:#ef4444;
    --color-warning:#f59e0b;
    --color-info:#60a5fa;
    --text-primary:#f8fafc;
    --text-secondary:#94a3b8;
    --text-muted:#64748b;
    --border-subtle:rgba(255,255,255,0.08);
    --border-card:rgba(255,255,255,0.08);
    --border-hover:rgba(139,92,246,0.3);
    --border-nav:rgba(255,255,255,0.08);
    --radius-lg:24px;
    --radius-md:16px;
    --shadow-card:none;
    --shadow-hover:0 12px 28px rgba(0,0,0,0.4),0 0 20px rgba(139,92,246,0.15),0 0 60px rgba(139,92,246,0.05);
    --shadow-nav:none;
    --badge-progress-bg:rgba(6,182,212,0.15);
    --badge-progress-color:#06b6d4;
    --badge-progress-border:rgba(6,182,212,0.3);
    --badge-done-bg:rgba(16,185,129,0.15);
    --badge-done-color:#10b981;
    --badge-done-border:rgba(16,185,129,0.3);
    --badge-void-bg:rgba(239,68,68,0.15);
    --badge-void-color:#ef4444;
    --badge-void-border:rgba(239,68,68,0.3);
    --progress-a:linear-gradient(90deg,#06b6d4,#22d3ee);
    --progress-b:linear-gradient(90deg,#8b5cf6,#a78bfa);
    --progress-glow-a:0 0 16px rgba(6,182,212,0.4);
    --progress-glow-b:0 0 16px rgba(139,92,246,0.4);
    --rank-gold:linear-gradient(135deg,#fbbf24,#f59e0b);
    --rank-silver:linear-gradient(135deg,#94a3b8,#cbd5e1);
    --rank-silver-text:#0f172a;
    --rank-bronze:linear-gradient(135deg,#b45309,#d97706);
    --stat-color-1:#a78bfa;
    --stat-color-2:#f472b6;
    --stat-color-3:#fb923c;
    --stat-color-4:#34d399;
    --stat-color-5:#60a5fa;
    --progress-a:linear-gradient(90deg,#06b6d4,#22d3ee);
    --progress-b:linear-gradient(90deg,#8b5cf6,#a78bfa);
    --progress-glow-a:0 0 16px rgba(6,182,212,0.4);
    --progress-glow-b:0 0 16px rgba(139,92,246,0.4);
    --rank-gold:linear-gradient(135deg,#fbbf24,#f59e0b);
    --rank-silver:linear-gradient(135deg,#94a3b8,#cbd5e1);
    --rank-silver-text:#0f172a;
    --rank-bronze:linear-gradient(135deg,#b45309,#d97706);
    --scrollbar-thumb:rgba(148,163,184,0.3);
    --scrollbar-hover:rgba(148,163,184,0.5);
    --glow-card:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.25),transparent 50%);
    --input-focus-shadow:0 0 0 2px rgba(6,182,212,0.2);
    --nav-active-bg:linear-gradient(135deg,#3b82f6,#8b5cf6);
    --nav-hover-bg:rgba(59,130,246,0.15);
    --nav-hover-color:#60a5fa;
    --nav-hover-border:rgba(59,130,246,0.3);
    --deco-type:cyber
  }
  [data-theme="rainbow"] {
    --bg-deep:#faf8ff;
    --card-base:rgba(255,255,255,0.7);
    --card-elevated:rgba(255,255,255,0.85);
    --cyan-primary:#06b6d4;
    --cyan-glow:rgba(6,182,212,0.4);
    --purple-primary:#8b5cf6;
    --purple-glow:rgba(139,92,246,0.4);
    --emerald-primary:#10b981;
    --bg-base:#faf8ff;
    --bg-card:rgba(255,255,255,0.6);
    --bg-card-flat:#ffffff;
    --bg-card-hover:rgba(255,255,255,0.88);
    --bg-frosted:rgba(255,255,255,0.6);
    --bg-input:rgba(255,255,255,0.6);
    --bg-table-head:linear-gradient(135deg,rgba(192,132,252,0.08),rgba(244,114,182,0.08));
    --bg-table-hover:rgba(192,132,252,0.04);
    --accent:#d946ef;
    --accent-glow:rgba(217,70,239,0.25);
    --accent2:#f472b6;
    --accent2-glow:rgba(244,114,182,0.2);
    --brand-start:#c084fc;
    --brand-end:#f472b6;
    --emerald:#34d399;
    --color-success:#34d399;
    --color-danger:#fb7185;
    --color-warning:#fbbf24;
    --color-info:#60a5fa;
    --text-primary:#1e1b4b;
    --text-secondary:#6b7280;
    --text-muted:#9ca3af;
    --border-subtle:rgba(0,0,0,0.06);
    --border-card:rgba(255,255,255,0.5);
    --border-hover:rgba(192,132,252,0.3);
    --border-nav:rgba(255,255,255,0.5);
    --shadow-card:0 2px 16px rgba(0,0,0,0.04),0 1px 4px rgba(0,0,0,0.02);
    --shadow-hover:0 12px 36px rgba(192,132,252,0.2),0 4px 12px rgba(0,0,0,0.06);
    --shadow-nav:0 2px 16px rgba(0,0,0,0.04);
    --badge-progress-bg:rgba(96,165,250,0.12);
    --badge-progress-color:#60a5fa;
    --badge-progress-border:transparent;
    --badge-done-bg:rgba(52,211,153,0.12);
    --badge-done-color:#34d399;
    --badge-done-border:transparent;
    --badge-void-bg:rgba(251,113,133,0.12);
    --badge-void-color:#fb7185;
    --badge-void-border:transparent;
    --stat-color-1:#a78bfa;
    --stat-color-2:#f472b6;
    --stat-color-3:#fb923c;
    --stat-color-4:#34d399;
    --stat-color-5:#60a5fa;
    --progress-a:linear-gradient(90deg,#f472b6,#e879f9);
    --progress-b:linear-gradient(90deg,#60a5fa,#22d3ee);
    --progress-glow-a:none;
    --progress-glow-b:none;
    --rank-gold:linear-gradient(135deg,#fbbf24,#f59e0b);
    --rank-silver:linear-gradient(135deg,#c084fc,#a78bfa);
    --rank-silver-text:#fff;
    --rank-bronze:linear-gradient(135deg,#f472b6,#fb7185);
    --scrollbar-thumb:rgba(0,0,0,0.1);
    --scrollbar-hover:rgba(0,0,0,0.2);
    --glow-card:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(192,132,252,0.15),transparent 50%);
    --input-focus-shadow:0 0 0 3px rgba(217,70,239,0.12);
    --nav-active-bg:linear-gradient(135deg,#c084fc,#f472b6);
    --nav-hover-bg:rgba(217,70,239,0.1);
    --nav-hover-color:#d946ef;
    --nav-hover-border:transparent;
    --deco-type:rainbow
  }
  .brand-gradient {
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
  }
  .text-accent {
    color:var(--accent)
  }
  .text-success {
    color:var(--color-success)
  }
  .text-danger {
    color:var(--color-danger)
  }
  .text-muted {
    color:var(--text-muted)
  }
  .sensitive {
    filter:blur(4px);
    cursor:pointer;
    transition:filter 0.3s;
    user-select:none
  }
  .sensitive:hover {
    filter:blur(0)
  }
}

@layer layout {
  .bg-layer {
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:var(--z-bg);
    overflow:hidden
  }
  .bg-grid {
    position:absolute;
    inset:0
  }
  .bg-deco {
    position:absolute;
    border-radius:50%;
    filter:blur(100px)
  }
  [data-theme="cyber"] .bg-grid {
    background-image:linear-gradient(rgba(6,182,212,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,0.06) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 0%,transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 0%,transparent 70%)
  }
  [data-theme="cyber"] .deco-1 {
    width:600px;
    height:600px;
    top:-10%;
    left:-10%;
    background:radial-gradient(circle,rgba(6,182,212,0.4) 0%,transparent 70%);
    opacity:0.3;
    animation:pulse-slow 8s ease-in-out infinite
  }
  [data-theme="cyber"] .deco-2 {
    width:500px;
    height:500px;
    bottom:-5%;
    right:-5%;
    background:radial-gradient(circle,rgba(139,92,246,0.4) 0%,transparent 70%);
    opacity:0.25;
    animation:pulse-slow 10s ease-in-out infinite reverse
  }
  [data-theme="cyber"] .deco-3,[data-theme="cyber"] .deco-4 {
    display:none
  }
  [data-theme="cyber"] .bg-stars {
    display:block;
    position:absolute;
    inset:0;
    overflow:hidden
  }
  [data-theme="rainbow"] .bg-grid {
    background-image:linear-gradient(rgba(192,132,252,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(192,132,252,0.04) 1px,transparent 1px);
    background-size:48px 48px
  }
  [data-theme="rainbow"] .deco-1 {
    width:500px;
    height:500px;
    top:-10%;
    left:-5%;
    background:linear-gradient(135deg,#c084fc,#818cf8);
    opacity:0.3;
    animation:float 20s ease-in-out infinite
  }
  [data-theme="rainbow"] .deco-2 {
    width:400px;
    height:400px;
    top:20%;
    right:-5%;
    background:linear-gradient(135deg,#f472b6,#fb923c);
    opacity:0.25;
    animation:float 20s ease-in-out infinite -7s
  }
  [data-theme="rainbow"] .deco-3 {
    width:350px;
    height:350px;
    bottom:-5%;
    left:30%;
    background:linear-gradient(135deg,#34d399,#22d3ee);
    opacity:0.25;
    animation:float 20s ease-in-out infinite -14s
  }
  [data-theme="rainbow"] .deco-4 {
    width:300px;
    height:300px;
    top:50%;
    left:10%;
    background:linear-gradient(135deg,#fbbf24,#fb923c);
    opacity:0.2;
    animation:float 20s ease-in-out infinite -3s
  }
  [data-theme="rainbow"] .bg-stars {
    display:none
  }
  .star {
    position:absolute;
    width:3px;
    height:3px;
    background:rgba(255,255,255,0.6);
    border-radius:50%;
    animation:twinkle 3s ease-in-out infinite
  }
  .cyber-nav {
    position:fixed;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:20px 14px;
    z-index:var(--z-nav);
    background:var(--bg-frosted);
    backdrop-filter:blur(24px) saturate(1.8);
    border:1px solid var(--border-nav);
    border-radius:24px;
    box-shadow:var(--shadow-nav);
    transition:var(--transition-theme)
  }
  .nav-logo {
    width:44px;
    height:44px;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 16px var(--accent-glow)
  }
  .nav-logo svg {
    width:22px;
    height:22px;
    color:white
  }
  .nav-menu {
    display:flex;
    flex-direction:column;
    gap:12px
  }
  .nav-create-btn {
    width:44px;
    height:44px;
    border-radius:12px;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#10b981;
    color:#fff;
    transition:all 0.2s;
    margin-bottom:4px
  }
  .nav-create-btn svg {
    width:20px;
    height:20px
  }
  .nav-create-btn:hover {
    background:#059669;
    transform:scale(1.08)
  }
  .nav-item {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:var(--text-muted);
    text-decoration:none;
    transition:all 0.3s;
    cursor:pointer
  }
  .nav-item svg {
    width:20px;
    height:20px
  }
  .nav-item:hover {
    background:var(--nav-hover-bg);
    color:var(--nav-hover-color);
    border-color:var(--nav-hover-border);
    transform:scale(1.08);
    text-decoration:none
  }
  .nav-item.active {
    background:var(--nav-active-bg);
    color:white;
    box-shadow:0 4px 16px var(--accent-glow)
  }
  .brand-header {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-bottom:32px
  }
  .brand-title {
    font-size:22px;
    font-weight:800;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing:3px
  }
  .system-status-bar {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    background:rgba(16,185,129,0.1);
    border:1px solid rgba(16,185,129,0.2);
    border-radius:var(--radius-full)
  }
  .status-dots {
    display:flex;
    gap:3px
  }
  .status-dot {
    width:3px;
    height:14px;
    background:var(--emerald);
    border-radius:2px;
    animation:pulse-bar 1.5s ease-in-out infinite
  }
  .status-dot:nth-child(2) {
    animation-delay:0.1s
  }
  .status-dot:nth-child(3) {
    animation-delay:0.2s
  }
  .status-text {
    font-size:11px;
    font-weight:700;
    color:var(--emerald);
    letter-spacing:2px;
    text-transform:uppercase
  }
  .main-content {
    position:relative;
    z-index:var(--z-content);
    padding: 36px 36px 36px 100px;
    max-width: 1600px;
    margin: 0 auto
  }
  .theme-toggle {
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    background:var(--bg-frosted);
    backdrop-filter:blur(20px);
    border:1px solid var(--border-nav);
    border-radius:var(--radius-full);
    box-shadow:var(--shadow-nav)
  }
  .theme-toggle button {
    padding:8px 16px;
    border:none;
    border-radius:var(--radius-full);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    background:transparent;
    color:var(--text-muted);
    transition:all 0.3s
  }
  .theme-toggle button.active {
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    color:white;
    box-shadow:0 2px 8px var(--accent-glow)
  }
  .theme-toggle button:hover:not(.active) {
    color:var(--text-primary)
  }
  /* ===== 右上角容器（主题切换 + 用户信息） ===== */
  .topbar-right {
    position:fixed;
    top:24px;
    right:24px;
    z-index:var(--z-nav);
    display:flex;
    align-items:center;
    gap:12px
  }
  .topbar-user {
    display:flex;
    align-items:center;
    gap:10px;
    padding:4px;
    background:var(--bg-frosted);
    backdrop-filter:blur(20px);
    border:1px solid var(--border-nav);
    border-radius:var(--radius-full);
    transition:all 0.2s;
    cursor:default
  }
  .topbar-user:hover {
    border-color:var(--accent);
    background:rgba(6,182,212,0.1)
  }
  .topbar-avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-input);
    border:2px solid var(--border-subtle);
    flex-shrink:0
  }
  .topbar-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
  }
  .topbar-avatar-placeholder {
    font-size:13px;
    font-weight:700;
    color:var(--accent)
  }
  .topbar-nickname {
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
    white-space:nowrap;
    max-width:80px;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .topbar-divider {
    width:1px;
    height:24px;
    background:var(--border-nav);
    flex-shrink:0
  }
  .topbar-logout-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    transition:all 0.2s;
    flex-shrink:0;
    padding:0
  }
  .topbar-logout-btn:hover {
    color:#ef4444;
    background:rgba(239,68,68,0.1)
  }
  @media (max-width:768px) {
    .cyber-nav {
      left:50%;
      top:auto;
      bottom:20px;
      transform:translateX(-50%);
      flex-direction:row;
      padding:14px 18px;
      border-radius:var(--radius-full)
    }
    .nav-logo {
      display:none
    }
    .nav-menu {
      flex-direction:row;
      gap:10px
    }
    .main-content {
      padding:36px 20px 100px
    }
    .brand-title {
      font-size:18px
    }
    .topbar-right {
      top:12px;
      right:12px
    }
    .topbar-divider,
    .topbar-logout-btn {
      display:none
    }
    .topbar-nickname {
      display:none
    }
    .topbar-user {
      display:none
    }
  }
  @media (max-width:480px) {
    .brand-title {
      font-size:16px
    }
    .nav-item {
      width:40px;
      height:40px
    }
    .nav-item svg {
      width:16px;
      height:16px
    }
  }
}

@layer components {
  .cyber-card {
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--card-base),var(--card-elevated));
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:20px;
    transition:all 0.3s ease
  }
  .cyber-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.1),transparent 60%);
    opacity:0;
    transition:opacity 0.3s ease;
    pointer-events:none
  }
  .cyber-card:hover::before {
    opacity:1
  }
  .cyber-card:hover {
    border-color:rgba(139,92,246,0.3);
    box-shadow:0 8px 16px rgba(0,0,0,0.3),0 0 16px rgba(139,92,246,0.1)
  }
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px);
  backdrop-filter:blur(24px) saturate(1.8)
}
[data-theme="cyber"] .cyber-card:hover {
  background:linear-gradient(135deg,rgba(18,18,31,0.85),rgba(26,26,46,0.8))
}
[data-theme="rainbow"] .cyber-card:hover {
  background:rgba(255,255,255,0.75)
}
[data-theme="rainbow"] .cyber-card.rainbow-border {
  border:none
}
[data-theme="rainbow"] .cyber-card.rainbow-border::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius-lg);
  padding:1.5px;
  background:linear-gradient(135deg,#c084fc,#f472b6,#fb923c,#fbbf24,#34d399,#60a5fa);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.4;
  transition:opacity 0.3s;
  pointer-events:none
}
[data-theme="rainbow"] .cyber-card.rainbow-border:hover::after {
  opacity:1
}
.card-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-subtle)
}
.card-header-split {
  justify-content:space-between
}
.card-header-left {
  display:flex;
  align-items:center;
  gap:12px
}
.card-header-right {
  display:flex;
  align-items:center;
  gap:8px
}
.card-icon {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px
}
[data-theme="cyber"] .card-icon {
  background:rgba(6,182,212,0.1);
  border:1px solid rgba(6,182,212,0.3)
}
[data-theme="cyber"] .card-icon svg {
  color:#06b6d4
}
[data-theme="rainbow"] .card-icon {
  background:rgba(217,70,239,0.1)
}
[data-theme="rainbow"] .card-icon svg {
  color:#d946ef
}
.card-icon svg {
  width:16px;
  height:16px
}
.card-title {
  font-size:14px;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.5px
}
[data-theme="cyber"] .card-title {
  text-transform:uppercase;
  letter-spacing:1px
}
.cyber-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  font-size:13px;
  font-weight:600;
  color:white;
  border:none;
  cursor:pointer;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
  box-shadow:0 4px 12px var(--accent-glow);
  transition:all 0.3s
}
.cyber-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px var(--accent-glow)
}
.cyber-btn:active {
  transform:translateY(0)
}
.cyber-btn:disabled {
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none
}
.cyber-btn.secondary {
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  box-shadow:none
}
.cyber-btn.secondary:hover {
  border-color:var(--border-hover);
  color:var(--accent)
}
.cyber-btn.danger {
  background:linear-gradient(135deg,#ef4444,#dc2626)
}
.cyber-btn.soft {
  background:rgba(217,70,239,0.1);
  color:var(--accent);
  box-shadow:none
}
.cyber-btn.soft:hover {
  background:rgba(217,70,239,0.18)
}
.cyber-table-container {
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-subtle)
}
[data-theme="cyber"] .cyber-table-container {
  background:rgba(0,0,0,0.3)
}
[data-theme="rainbow"] .cyber-table-container {
  background:rgba(255,255,255,0.5)
}
.cyber-table {
  width:100%;
  border-collapse:collapse
}
.cyber-table thead {
  display:table-header-group
}
.cyber-table thead th {
  background:var(--bg-table-head);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:12px;
  text-align:left
}
[data-theme="cyber"] .cyber-table thead th {
  border-bottom:2px solid rgba(6,182,212,0.3)
}
[data-theme="rainbow"] .cyber-table thead th {
  border-bottom:2px solid rgba(192,132,252,0.15)
}
.cyber-table tbody tr {
  border-bottom:1px solid var(--border-subtle);
  transition:all 0.3s
}
.cyber-table tbody tr:hover {
  background:var(--bg-table-hover)
}
[data-theme="cyber"] .cyber-table tbody tr:hover {
  transform:translateX(4px)
}
.cyber-table td {
  padding:12px;
  font-size:13px
}
.cyber-label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:6px
}
.cyber-input,[data-theme="rainbow"] .cyber-input,[data-theme="rainbow"] .cyber-input:focus,.cyber-input::placeholder {
  color:var(--text-muted)
}
.cyber-input.invalid {
  border-color:var(--color-danger);
  box-shadow:0 0 0 2px rgba(239,68,68,0.2)
}
.cyber-input.valid {
  border-color:var(--color-success)
}
.field-error {
  color:var(--color-danger);
  font-size:0.75rem;
  margin-top:0.25rem
}
.cyber-search {
  position:relative
}
.cyber-search input {
  width:100%;
  padding:10px 14px 10px 40px;
  font-size:14px;
  color:var(--text-primary);
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  outline:none;
  transition:all 0.3s
}
.cyber-search input:focus {
  border-color:var(--accent);
  box-shadow:var(--input-focus-shadow)
}
.cyber-search svg {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:var(--text-muted)
}
.cyber-modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  z-index:var(--z-modal);
  display:none;
  align-items:center;
  justify-content:center;
  animation:fadeIn 0.2s ease
}
.cyber-modal-overlay.active {
  display:flex
}
.cyber-modal {
  background:var(--bg-card-flat);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:32px;
  max-width:600px;
  width:90%;
  max-height:85vh;
  overflow-y:auto;
  animation:slideUp 0.3s ease;
  box-shadow:var(--shadow-hover)
}
.cyber-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  border-radius:var(--radius-full)
}
.cyber-badge.progress {
  background:var(--badge-progress-bg);
  color:var(--badge-progress-color);
  border:1px solid var(--badge-progress-border)
}
.cyber-badge.completed {
  background:var(--badge-done-bg);
  color:var(--badge-done-color);
  border:1px solid var(--badge-done-border)
}
.cyber-badge.voided {
  background:var(--badge-void-bg);
  color:var(--badge-void-color);
  border:1px solid var(--badge-void-border)
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px
}
.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:20px;
  text-align:center;
  transition:all 0.3s
}
.stat-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover)
}
.stat-label {
  font-size:11px;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px
}
.stat-value {
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:800
}
.stat-card:nth-child(1) .stat-value {
  color:#a78bfa;
  text-shadow:0 0 20px rgba(167,139,252,0.3)
}
.stat-card:nth-child(2) .stat-value {
  color:#f472b6;
  text-shadow:0 0 20px rgba(244,114,182,0.3)
}
.stat-card:nth-child(3) .stat-value {
  color:#fb923c;
  text-shadow:0 0 20px rgba(251,146,60,0.3)
}
.stat-card:nth-child(4) .stat-value {
  color:#34d399;
  text-shadow:0 0 20px rgba(52,211,153,0.3)
}
.stat-card:nth-child(5) .stat-value {
  color:#60a5fa;
  text-shadow:0 0 20px rgba(96,165,250,0.3)
}
.stat-card:nth-child(6) .stat-value {
  color:#10b981;
  text-shadow:0 0 20px rgba(16,185,129,0.3)
}
.stat-value {
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:800
}

.cyber-toast {
  position:fixed;
  top:24px;
  right:24px;
  padding:12px 24px;
  color:white;
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  z-index:var(--z-toast);
  animation:slideInRight 0.3s ease
}
.cyber-toast.success {
  background:var(--color-success)
}
.cyber-toast.error {
  background:var(--color-danger)
}
.cyber-toast.info {
  background:var(--color-info)
}
.skeleton {
  background:linear-gradient(90deg,rgba(128,128,128,0.06) 25%,rgba(128,128,128,0.12) 50%,rgba(128,128,128,0.06) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm)
}
.skeleton-text {
  height:14px;
  margin-bottom:8px
}
.skeleton-text:last-child {
  width:60%
}
.skeleton-card {
  height:120px;
  border-radius:var(--radius-md)
}
.cyber-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 20px;
  text-align:center
}
.cyber-empty-icon {
  font-size:48px;
  margin-bottom:16px;
  opacity:0.6
}
.cyber-empty-text {
  font-size:16px;
  color:var(--text-secondary);
  margin-bottom:8px
}
.cyber-empty-hint {
  font-size:13px;
  color:var(--text-muted)
}
.cyber-error {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 20px;
  text-align:center
}
.cyber-error-icon {
  font-size:48px;
  margin-bottom:16px
}
.cyber-error-text {
  font-size:16px;
  color:var(--color-danger);
  margin-bottom:16px
}

.nav-avatar-btn {
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  border:2px solid var(--border-subtle);
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-input)
}
.nav-avatar-btn:hover {
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(6,182,212,0.3);
  transform:scale(1.08)
}
.nav-avatar-btn:hover @media (max-width:1200px) {
  .stats-grid {
    grid-template-columns:repeat(3,1fr)
  }
}
@media (max-width:768px) {
  .cyber-card {
    padding:20px
  }
  .stat-card {
    padding:16px
  }
  .stat-value {
    font-size:20px
  }
  .stats-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .cyber-modal {
    padding:24px;
    width:95%
  }
}
@media (max-width:480px) {
  .card-title {
    font-size:12px
  }
  .stat-label {
    font-size:10px
  }
  .stat-value {
    font-size:18px
  }
  .cyber-nav }

@layer animations {
  @keyframes pulse-slow {
    0%,100% {
      opacity:0.3;
      transform:scale(1)
    }
    50% {
      opacity:0.5;
      transform:scale(1.1)
    }
  }
  @keyframes pulse-bar {
    0%,100% {
      opacity:0.3;
      transform:scaleY(0.7)
    }
    50% {
      opacity:1;
      transform:scaleY(1)
    }
  }
  @keyframes twinkle {
    0%,100% {
      opacity:0.3
    }
    50% {
      opacity:1
    }
  }
  @keyframes float {
    0%,100% {
      transform:translate(0,0) scale(1)
    }
    25% {
      transform:translate(30px,-20px) scale(1.05)
    }
    50% {
      transform:translate(-20px,20px) scale(0.95)
    }
    75% {
      transform:translate(10px,-10px) scale(1.02)
    }
  }
  @keyframes barGrow {
    from {
      opacity:0;
      transform:scaleY(0)
    }
    to {
      opacity:1;
      transform:scaleY(1)
    }
  }
  @keyframes fadeIn {
    from {
      opacity:0
    }
    to {
      opacity:1
    }
  }
  @keyframes fadeInUp {
    from {
      opacity:0;
      transform:translateY(16px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
  @keyframes slideUp {
    from {
      opacity:0;
      transform:translateY(24px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
  @keyframes slideInRight {
    from {
      opacity:0;
      transform:translateX(100%)
    }
    to {
      opacity:1;
      transform:translateX(0)
    }
  }
  @keyframes slideOutRight {
    from {
      opacity:1;
      transform:translateX(0)
    }
    to {
      opacity:0;
      transform:translateX(100%)
    }
  }
  @keyframes shimmer {
    0% {
      background-position:-200% 0
    }
    100% {
      background-position:200% 0
    }
  }
  @keyframes rainbow-shift {
    0% {
      background-position:0% 50%
    }
    50% {
      background-position:100% 50%
    }
    100% {
      background-position:0% 50%
    }
  }
  .page-enter {
    animation:fadeInUp 0.2s ease-out
  }
  .page-exit {
    opacity:0;
    transition:opacity 0.15s
  }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
      transition-duration:0.01ms !important;
      animation-duration:0.01ms !important
    }
  }
}