@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}
@font-face{
  font-family:'Rajdhani'; font-style:normal; font-weight:500; font-display:swap;
  src: url('fonts/rajdhani-500.woff2') format('woff2');
}
@font-face{
  font-family:'Rajdhani'; font-style:normal; font-weight:600; font-display:swap;
  src: url('fonts/rajdhani-600.woff2') format('woff2');
}
@font-face{
  font-family:'Rajdhani'; font-style:normal; font-weight:700; font-display:swap;
  src: url('fonts/rajdhani-700.woff2') format('woff2');
}
@font-face{
  font-family:'Share Tech Mono'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/sharetech-mono.woff2') format('woff2');
}

:root{
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Rajdhani', 'Inter', sans-serif;
  --font-mono: 'Share Tech Mono', 'Consolas', monospace;
  --bg: #08050f;
  --bg2: #120a24;
  --panel: #150c2b;
  --panel-border: #3a2a5c;
  /* system: cool hologram chrome — borders, labels, readouts, controls */
  --system: #cfeaff;
  --system2: #8fd8ff;
  --system-dim: #4d7a99;
  /* accent: warm violet/magenta — atmosphere, energy, progress, emotion */
  --accent: #a855f7;
  --accent2: #e9d5ff;
  --accent3: #7c3aed;
  --magenta: #ff5fd0;
  --text: #ece4ff;
  --text-dim: #9184b8;
  --danger: #ff4a6b;
  --gold: #ffcf5c;
  --e-rank: #8a8aa3;
  --d-rank: #4ade80;
  --c-rank: #38bdf8;
  --b-rank: #a78bfa;
  --a-rank: #fb923c;
  --s-rank: #ffd54a;
}

/* HUD corner brackets — the one signature motif, used sparingly on true
   "system window" moments only (status card, quest announcement, quest info). */
.hud-frame{ position:relative; }
.hud-frame::before, .hud-frame::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border-color: var(--system2); border-style:solid; opacity:0.85;
}
.hud-frame::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.hud-frame::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.hud-frame .hud-corner-tr, .hud-frame .hud-corner-bl{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border-color: var(--system2); border-style:solid; opacity:0.85;
}
.hud-corner-tr{ top:-1px; right:-1px; border-width:2px 2px 0 0; }
.hud-corner-bl{ bottom:-1px; left:-1px; border-width:0 0 2px 2px; }

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html,body{
  margin:0; padding:0; height:100%;
  background: radial-gradient(ellipse at top, #2a1250 0%, #08050f 60%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  overscroll-behavior: none;
}

body{
  display:flex; flex-direction:column;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

.hidden{ display:none !important; }

/* ---------- Ambient atmosphere: living background ---------- */
#ambientBg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.glow-orb{ position:absolute; border-radius:50%; filter: blur(50px); will-change: transform, opacity; }
.orb1{
  width:260px; height:260px; top:-70px; left:-60px;
  background: radial-gradient(circle, rgba(168,85,247,0.65), transparent 70%);
  animation: orbDrift1 21s ease-in-out infinite;
}
.orb2{
  width:230px; height:230px; bottom:8%; right:-70px;
  background: radial-gradient(circle, rgba(255,95,208,0.5), transparent 70%);
  animation: orbDrift2 26s ease-in-out infinite; animation-delay:-8s;
}
.orb3{
  width:210px; height:210px; top:42%; left:55%;
  background: radial-gradient(circle, rgba(143,216,255,0.38), transparent 70%);
  animation: orbDrift3 19s ease-in-out infinite; animation-delay:-13s;
}
.orb4{
  width:180px; height:180px; top:65%; left:-50px;
  background: radial-gradient(circle, rgba(56,189,248,0.4), transparent 70%);
  animation: orbDrift2 24s ease-in-out infinite; animation-delay:-4s;
}
.orb5{
  width:150px; height:150px; top:6%; right:8%;
  background: radial-gradient(circle, rgba(255,213,74,0.22), transparent 70%);
  animation: orbDrift3 30s ease-in-out infinite; animation-delay:-6s;
}
@keyframes orbDrift1{
  0%,100%{ transform: translate(0,0) scale(1); opacity:0.65; }
  35%{ transform: translate(36px,26px) scale(1.18); opacity:1; }
  70%{ transform: translate(-18px,44px) scale(0.92); opacity:0.55; }
}
@keyframes orbDrift2{
  0%,100%{ transform: translate(0,0) scale(1); opacity:0.6; }
  40%{ transform: translate(-40px,-24px) scale(1.15); opacity:0.95; }
  75%{ transform: translate(20px,-40px) scale(0.9); opacity:0.5; }
}
@keyframes orbDrift3{
  0%,100%{ transform: translate(0,0) scale(1); opacity:0.5; }
  50%{ transform: translate(-30px,30px) scale(1.2); opacity:0.85; }
}

.rune-circle{
  position:absolute; top:50%; left:50%; margin:-170px 0 0 -170px; opacity:0.1;
  animation: runeSpin 90s linear infinite; will-change: transform;
}
@keyframes runeSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.energy-beam{
  position:absolute; top:-20%; left:-30%; width:60%; height:180%;
  background: linear-gradient(100deg, transparent 40%, rgba(143,216,255,0.14) 48%, rgba(255,95,208,0.2) 50%, rgba(143,216,255,0.14) 52%, transparent 60%);
  transform: rotate(12deg) translateX(-140%);
  animation: beamSweep 17s ease-in infinite;
}
@keyframes beamSweep{
  0%,55%{ transform: rotate(12deg) translateX(-140%); opacity:0; }
  60%{ opacity:0.9; }
  78%{ transform: rotate(12deg) translateX(220%); opacity:0.9; }
  85%,100%{ transform: rotate(12deg) translateX(220%); opacity:0; }
}

.crack-svg{ position:absolute; inset:0; width:100%; height:100%; }
.crack{ fill:none; stroke: var(--accent); stroke-width:1.3; filter: drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 10px var(--magenta)); }
.crack.c1{ animation: crackFlicker 4.6s infinite; }
.crack.c2{ animation: crackFlicker 5.8s infinite; animation-delay:-2.1s; stroke: var(--magenta); }
.crack.c3{ animation: crackFlicker 3.7s infinite; animation-delay:-0.8s; stroke: var(--system2); filter: drop-shadow(0 0 5px var(--system2)) drop-shadow(0 0 10px var(--system)); }
.crack.c4{ animation: crackFlicker 6.4s infinite; animation-delay:-3.4s; stroke: var(--magenta); }
@keyframes crackFlicker{
  0%,100%{ opacity:0.08; }
  3%{ opacity:0.7; }
  6%{ opacity:0.05; }
  9%{ opacity:0.55; }
  12%{ opacity:0.1; }
  45%{ opacity:0.15; }
  48%{ opacity:0.8; }
  52%{ opacity:0.1; }
  80%{ opacity:0.12; }
}

.grain-layer{
  position:absolute; inset:-20% -20% -20% -20%; width:140%; height:140%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity:0.05; mix-blend-mode:overlay; animation: grainShift 0.9s steps(3) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); }
  33%{ transform:translate(-1.5%,1%); }
  66%{ transform:translate(1%,-1.5%); }
  100%{ transform:translate(0,0); }
}

.spark{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background: var(--system2); box-shadow: 0 0 6px 1px var(--system2), 0 0 12px 2px rgba(168,85,247,0.6);
  bottom:-10px; opacity:0; animation: sparkRise linear infinite;
}
.s1{ left:12%; animation-duration:9s; animation-delay:0s; }
.s2{ left:28%; animation-duration:12s; animation-delay:-3s;
  background: var(--magenta); box-shadow: 0 0 6px 1px var(--magenta), 0 0 12px 2px rgba(168,85,247,0.6); }
.s3{ left:48%; animation-duration:10s; animation-delay:-6s; }
.s4{ left:65%; animation-duration:14s; animation-delay:-2s;
  background: var(--magenta); box-shadow: 0 0 6px 1px var(--magenta), 0 0 12px 2px rgba(168,85,247,0.6); }
.s5{ left:80%; animation-duration:11s; animation-delay:-8s; }
.s6{ left:92%; animation-duration:13s; animation-delay:-5s;
  background: var(--gold); box-shadow: 0 0 6px 1px var(--gold), 0 0 12px 2px rgba(255,213,74,0.5); }
@keyframes sparkRise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  8%{ opacity:0.9; }
  50%{ transform: translateY(-48vh) translateX(14px); opacity:0.6; }
  92%{ opacity:0; }
  100%{ transform: translateY(-95vh) translateX(-8px); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .glow-orb, .crack, .grain-layer, .spark, .rune-circle, .energy-beam{ animation: none !important; opacity:0.08; }
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: linear-gradient(180deg, #170b30 0%, rgba(23,11,48,0.4) 100%);
  border-bottom: 1px solid var(--panel-border);
  position: sticky; top:0; z-index: 20;
}
.brand{
  font-family: var(--font-display); font-weight: 700; letter-spacing: 3px; font-size: 18px;
  background: linear-gradient(90deg, var(--system), var(--system2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 20px rgba(143,216,255,0.35);
}
.topbar-xp{ flex:1; max-width: 55%; margin-left: 16px; }
.xp-mini-label{ font-family: var(--font-mono); font-size: 12px; color: var(--system-dim); text-align:right; margin-bottom:3px; letter-spacing:0.5px; }
.xp-mini-label span{ color: var(--system); }
.xp-mini-bar{ height:6px; border-radius:4px; background:#241448; overflow:hidden; border:1px solid var(--panel-border); }
.xp-mini-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--accent3), var(--accent), var(--magenta)); transition: width .4s ease; }

/* Main area */
main{ flex:1; overflow-y:auto; padding: 14px 14px 90px; position:relative; z-index:1; }

.panel{
  background: linear-gradient(160deg, var(--panel) 0%, #170b2e 100%);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 0 0 1px rgba(168,85,247,0.03), 0 8px 24px rgba(0,0,0,0.35);
  position: relative;
}
.panel-title{
  font-family: var(--font-display); font-size: 14px; letter-spacing: 1.5px; color: var(--system);
  font-weight:700; margin-bottom: 12px; text-transform: uppercase;
  display:flex; align-items:baseline; gap:8px;
}
.panel-sub{ color: var(--text-dim); font-size:12px; letter-spacing:0; text-transform:none; font-weight:400; }

/* Status panel */
.status-panel{
  padding-top: 22px;
  background: linear-gradient(160deg, #1a0e34 0%, #170b2e 100%);
  border: 1px solid rgba(143,216,255,0.3);
  box-shadow: 0 0 0 1px rgba(143,216,255,0.08), 0 0 50px rgba(168,85,247,0.15), 0 8px 24px rgba(0,0,0,0.45);
}
.status-frame-label{
  font-family: var(--font-display); text-align:center; font-size:13px; letter-spacing:6px; color: var(--system);
  text-shadow: 0 0 12px rgba(143,216,255,0.6); margin-bottom:16px; font-weight:700;
}
.status-header{ display:flex; align-items:center; gap:18px; margin-bottom:18px; justify-content:center; }
.status-level{
  font-family: var(--font-mono); font-size:52px; font-weight:400; line-height:1; color: var(--system);
  text-shadow: 0 0 24px rgba(143,216,255,0.6);
  display:flex; flex-direction:column; align-items:center; letter-spacing:-1px;
}
.status-level-label{ font-family: var(--font-display); font-size:12px; letter-spacing:3px; color: var(--text-dim); font-weight:700; margin-top:4px; }
.status-header-info{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.status-rank-badge{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size:16px; font-weight:800;
  border: 2px solid var(--accent);
  background: radial-gradient(circle, rgba(168,85,247,0.25), transparent);
  color: var(--accent2);
  box-shadow: 0 0 18px rgba(168,85,247,0.35);
}
.status-class{ font-size:15px; color: var(--text); font-weight:600; }
.status-title{
  font-size:13px; color: var(--gold); font-style:italic; letter-spacing:0.5px;
  text-shadow: 0 0 10px rgba(255,207,92,0.4);
}

.xp-bar-wrap{ margin-bottom: 14px; }
.xp-bar{ height:14px; border-radius:8px; background:#1c1038; overflow:hidden; border:1px solid var(--panel-border); }
.xp-fill{
  height:100%; width:0%; background: linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2));
  transition: width .5s ease; box-shadow: 0 0 12px rgba(168,85,247,0.6) inset; position:relative; overflow:hidden;
}
.xp-fill::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: xpShimmer 3.2s ease-in-out infinite;
}
@keyframes xpShimmer{ 0%{ left:-50%; } 100%{ left:150%; } }
@media (prefers-reduced-motion: reduce){ .xp-fill::after{ animation:none !important; display:none; } }
.xp-text{ font-family: var(--font-mono); text-align:center; font-size:13px; color:var(--system-dim); margin-top:6px; letter-spacing:1px; }

.streak-row{ display:flex; gap:10px; flex-wrap:wrap; }
.streak-chip{
  background:#201242; border:1px solid var(--panel-border); border-radius:20px;
  padding:6px 14px; font-size:13px; font-weight:600;
}

/* Stats list */
.stats-list{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.stat-row{
  display:flex; align-items:center; gap:8px; background:#1c1038; border:1px solid var(--panel-border);
  border-radius:10px; padding:8px 10px;
}
.stat-icon{ width:18px; height:18px; color: var(--system); filter: drop-shadow(0 0 4px rgba(143,216,255,0.5)); flex-shrink:0; }
.stat-name{ font-family: var(--font-display); font-size:14px; font-weight:700; color:var(--system); letter-spacing:1px; flex:1; }
.stat-val{ font-family: var(--font-mono); font-size:16px; font-weight:400; color: var(--text); }
.stat-plus{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--system2);
  background: rgba(143,216,255,0.08); color: var(--system); font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.stat-plus:disabled{ opacity:0.25; }

/* Mini calendar (7 day strip) */
.mini-calendar{ display:flex; gap:6px; justify-content:space-between; }
.mini-day{
  flex:1; aspect-ratio: 1; border-radius:8px; background:#1c1038; border:1px solid var(--panel-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; gap:4px; color:var(--text-dim);
}
.mini-day.done{ background: linear-gradient(160deg, rgba(143,216,255,0.18), rgba(168,85,247,0.18)); border-color: var(--system2); color:var(--text); }
.mini-day .dot{ width:6px; height:6px; border-radius:50%; background:#3a2a5c; }
.mini-day.done .dot{ background: var(--system); box-shadow:0 0 6px var(--system); }

/* Quests */
.quest-line-card{
  background: linear-gradient(135deg, rgba(143,216,255,0.1), rgba(168,85,247,0.12));
  border:1px solid var(--system2); border-radius:10px; padding:14px; margin-bottom:14px; cursor:pointer;
}
.quest-line-name{ font-family: var(--font-display); font-weight:700; font-size:17px; color: var(--system); letter-spacing:0.5px; }
.quest-line-sub{ font-family: var(--font-mono); font-size:13px; color: var(--system-dim); margin-top:4px; display:flex; justify-content:space-between; }
.quest-line-arrow{ color: var(--system); }
.quest-section-label{
  font-family: var(--font-display); font-size:13px; letter-spacing:2px; color:var(--text-dim); font-weight:700;
  margin: 12px 0 8px; text-transform:uppercase;
}
.quest-list{ display:flex; flex-direction:column; gap:8px; margin-bottom: 6px;}
.quest-item{
  background:#1c1038; border:1px solid var(--panel-border); border-radius:12px; padding:12px;
  display:flex; align-items:center; gap:12px;
}
.quest-item.done{ border-color: var(--accent); background: linear-gradient(160deg, rgba(168,85,247,0.15), rgba(10,14,31,0.4)); }
.quest-check{
  width:28px; height:28px; min-width:28px; border-radius:6px; border:2px solid var(--system2);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--system); cursor:pointer;
}
.quest-item.done .quest-check{ background: var(--system2); color:#08050f; }
.quest-body{ flex:1; min-width:0; cursor:pointer; }
.quest-name{ font-weight:700; font-size:15px; }
.quest-sub{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.quest-right{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.quest-bracket{ font-family: var(--font-mono); font-size:15px; font-weight:400; color:var(--system); font-variant-numeric: tabular-nums; }
.quest-xp{ font-size:12px; color: var(--gold); font-weight:700; white-space:nowrap; }
.quest-del{ color: var(--text-dim); font-size:16px; cursor:pointer; padding:2px 4px; }
.quest-all-done{ text-align:center; color:var(--gold); font-size:13px; font-weight:700; padding-top:6px; }

/* Quest info modal (system-window flavor) */
.modal-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-title-row .modal-title{ margin-bottom:0; }
.modal-close{ color: var(--text-dim); font-size:16px; cursor:pointer; padding:4px; }
.quest-flavor{
  font-family: var(--font-mono); font-size:14px; color: var(--system); font-style:normal; text-align:center;
  margin-bottom:16px; line-height:1.5; text-shadow: 0 0 10px rgba(143,216,255,0.4);
}
.goal-label{ font-family: var(--font-display); text-align:center; font-size:13px; letter-spacing:3px; color:var(--system-dim); font-weight:700; text-decoration:underline; margin-bottom:10px; }
.goal-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.goal-row{ display:flex; justify-content:space-between; font-size:14px; padding:6px 0; border-bottom:1px solid #241448; }
.goal-check{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--system-dim); }
.quest-warning{
  font-size:12px; color: var(--danger); text-align:center; line-height:1.6;
  border-top:1px solid var(--panel-border); padding-top:12px; letter-spacing:0.3px;
}

/* Exercise list */
.exercise-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.exercise-item{
  background:#1c1038; border:1px solid var(--panel-border); border-radius:12px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.exercise-item:active{ background:#241448; }
.exercise-main .exercise-name{ font-weight:700; font-size:15px; }
.exercise-main .exercise-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.exercise-cat{
  font-size:11px; padding:3px 8px; border-radius:10px; letter-spacing:1px; font-weight:700;
  border:1px solid var(--panel-border); color: var(--text-dim);
}
.exercise-cat.strength{ color: var(--a-rank); border-color: var(--a-rank); }
.exercise-cat.cardio{ color: var(--d-rank); border-color: var(--d-rank); }
.exercise-cat.mind{ color: var(--b-rank); border-color: var(--b-rank); }

.recent-logs{ display:flex; flex-direction:column; gap:8px; }
.recent-log-item{ font-size:14px; color:var(--text-dim); display:flex; justify-content:space-between; border-bottom:1px solid #241448; padding-bottom:8px; }
.recent-log-item b{ color:var(--text); }
.empty-note{ color: var(--text-dim); font-size:14px; text-align:center; padding: 10px 0; }

/* Calendar */
.calendar-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.btn-icon{ background:#241448; border:1px solid var(--panel-border); color:var(--text); width:32px; height:32px; border-radius:8px; font-size:16px; }
.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.cal-cell{
  font-family: var(--font-mono);
  aspect-ratio: 1; border-radius:8px; background:#1c1038; border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-dim); position:relative;
}
.cal-cell.pad{ background:transparent; border:none; }
.cal-cell.done{ background: linear-gradient(160deg, rgba(143,216,255,0.2), rgba(168,85,247,0.25)); border-color: var(--system2); color:var(--text); font-weight:700; }
.cal-cell.today{ box-shadow: 0 0 0 2px var(--system); }
.cal-cell.selected{ box-shadow: 0 0 0 2px var(--gold); }
.day-detail{ font-size:14px; color:var(--text-dim); line-height:1.6; }

/* Reminders */
.reminder-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.reminder-item{ display:flex; align-items:center; gap:12px; background:#1c1038; border:1px solid var(--panel-border); border-radius:12px; padding:10px 14px; }
.reminder-time{ font-family: var(--font-mono); font-size:19px; font-weight:400; color: var(--system); font-variant-numeric: tabular-nums; }
.reminder-label{ flex:1; font-size:14px; color:var(--text-dim); }
.switch{ position:relative; width:42px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:#4c2d80; border-radius:24px; cursor:pointer; transition:.2s; }
.slider:before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#dce4ff; border-radius:50%; transition:.2s; }
input:checked + .slider{ background: var(--accent); }
input:checked + .slider:before{ transform: translateX(18px); }
.hint{ font-size:12px; color:var(--text-dim); margin-top:8px; line-height:1.5; }

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  color:#fff; border:none; border-radius:10px; padding:12px 20px; font-weight:700; font-size:14px;
  letter-spacing:1px; box-shadow: 0 0 20px rgba(168,85,247,0.4); width:100%; font-size:15px;
}
.btn-secondary{
  background:#201242; border:1px solid var(--panel-border); color:var(--text);
  border-radius:10px; padding:11px 16px; font-weight:600; font-size:14px; margin-top:4px;
}
.btn-secondary.full, .btn-primary.full, .btn-danger.full{ width:100%; }
.btn-danger{ background: rgba(255,74,107,0.1); border:1px solid var(--danger); color: var(--danger); border-radius:10px; padding:11px 16px; font-weight:600; font-size:14px; margin-top:8px; }

/* Bottom nav */
.bottombar{
  position: fixed; bottom:0; left:0; right:0; z-index: 30;
  display:flex; background: #170b2e; border-top:1px solid var(--panel-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.navbtn{
  flex:1; background:none; border:none; color:var(--text-dim); display:flex; flex-direction:column;
  align-items:center; gap:3px; font-size:11px; padding:6px 0; letter-spacing:0.5px; font-family: var(--font-display); font-weight:600;
}
.navicon{ width:20px; height:20px; }
.navbtn.active{ color: var(--system); text-shadow: 0 0 10px rgba(143,216,255,0.6); }

/* Overlays */
.overlay{
  position:fixed; inset:0; z-index:100; background: rgba(2,3,10,0.88);
  display:flex; align-items:center; justify-content:center; backdrop-filter: blur(4px);
  animation: fadeIn .25s ease; overflow:hidden; perspective: 900px;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.overlay::before{
  content:""; position:absolute; left:0; right:0; height:3px; top:0;
  background: linear-gradient(90deg, transparent, var(--system2), transparent);
  box-shadow: 0 0 20px 4px rgba(143,216,255,0.7);
  animation: scanSweep 1.1s ease-out;
}
@keyframes scanSweep{ from{ top:0; opacity:1; } to{ top:100%; opacity:0; } }
.overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 50%, rgba(207,234,255,0.9), rgba(168,85,247,0.3) 40%, transparent 70%);
  animation: flashBurst .5s steps(2,end);
}
@keyframes flashBurst{
  0%{ opacity:0.85; }
  35%{ opacity:0; }
  50%{ opacity:0.35; }
  65%{ opacity:0; }
  100%{ opacity:0; }
}

.levelup-box{ text-align:center; padding: 34px 30px; background: #0a0614; }
.levelup-box::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.16;
  background-image:
    linear-gradient(rgba(168,85,247,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,0.5) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 80%);
}
.levelup-box::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-26px; height:22px; z-index:0;
  background: radial-gradient(ellipse at 50% 50%, rgba(168,85,247,0.55), transparent 75%);
  filter: blur(4px); transform: scaleY(0.4);
}
.levelup-box > *{ position:relative; z-index:1; }
.notif-tilt{
  animation: sysGlitchIn .75s cubic-bezier(.2,1,.3,1) both,
             notifIdleFloat 5.5s ease-in-out .75s infinite;
}
@keyframes sysGlitchIn{
  0%{ transform: rotateX(26deg) rotateY(-22deg) scale(.8) translateX(-10px); opacity:0;
      filter: drop-shadow(0 0 0 transparent); }
  8%{ opacity:1; transform: rotateX(10deg) rotateY(14deg) scale(.92) translateX(6px);
      filter: drop-shadow(4px 0 0 rgba(255,95,208,0.7)) drop-shadow(-4px 0 0 rgba(143,216,255,0.7)); }
  16%{ opacity:0.25; transform: rotateX(4deg) rotateY(-10deg) scale(.97) translateX(-4px); }
  24%{ opacity:1; transform: rotateX(12deg) rotateY(6deg) scale(1.01) translateX(3px);
      filter: drop-shadow(-3px 0 0 rgba(255,95,208,0.6)) drop-shadow(3px 0 0 rgba(143,216,255,0.6)); }
  32%{ opacity:0.5; transform: rotateX(2deg) rotateY(-3deg) scale(.99); }
  45%{ opacity:1; transform: rotateX(7deg) rotateY(-9deg) scale(1); filter:none; }
  100%{ transform: rotateX(5deg) rotateY(-7deg) scale(1); opacity:1; filter:none; }
}
@keyframes notifIdleFloat{
  0%,100%{ transform: rotateX(5deg) rotateY(-7deg) translateY(0); }
  50%{ transform: rotateX(3deg) rotateY(-4deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){ .notif-tilt{ animation: none !important; transform:none !important; } }
.notif-header{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px; }
.notif-icon{
  width:20px; height:20px; color: var(--system); border:1.5px solid var(--system2); border-radius:5px;
  padding:4px; box-sizing:content-box; filter: drop-shadow(0 0 6px rgba(143,216,255,0.6));
}
.notif-badge{
  font-family: var(--font-mono); font-size:13px; letter-spacing:3px; color: var(--system);
  border:1.5px solid var(--system2); border-radius:4px; padding:6px 14px;
  text-shadow: 0 0 8px rgba(143,216,255,0.5); box-shadow: inset 0 0 12px rgba(143,216,255,0.08);
}
.levelup-title{
  font-family: var(--font-display); font-size: 44px; font-weight:700; letter-spacing:6px;
  background: linear-gradient(90deg, var(--system), var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 40px rgba(143,216,255,0.5); margin-bottom:10px;
}
.rankup-title{ background: linear-gradient(90deg, var(--gold), var(--a-rank)); -webkit-background-clip:text; background-clip:text; }
.levelup-sub{ font-family: var(--font-mono); color: var(--text); font-size:15px; margin-bottom:24px; white-space:pre-line; }

/* Jagged circuit-step neon frame — the signature "system window" border */
.jagged-frame{ position:relative; }
.jagged-bar{ position:absolute; pointer-events:none; will-change: opacity, filter, background-position; }
.jagged-bar.top, .jagged-bar.bottom{
  left:-8px; right:-8px; height:19px;
  background: linear-gradient(90deg, var(--accent3), var(--accent) 20%, var(--accent2) 35%, var(--accent) 50%, var(--accent3) 65%, var(--accent) 80%, var(--accent2) 95%, var(--accent3));
  background-size: 240% 100%;
  filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 13px var(--magenta)) drop-shadow(0 0 22px rgba(124,58,237,0.55));
  clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 96% 92%, 96% 12%, 92% 12%, 92% 82%, 88% 82%, 88% 8%, 84% 8%, 84% 62%, 80% 62%, 80% 100%, 76% 100%, 76% 18%, 72% 18%, 72% 88%, 68% 88%, 68% 5%, 64% 5%, 64% 72%, 60% 72%, 60% 95%, 56% 95%, 56% 15%, 52% 15%, 52% 85%, 48% 85%, 48% 10%, 44% 10%, 44% 78%, 40% 78%, 40% 100%, 36% 100%, 36% 20%, 32% 20%, 32% 90%, 28% 90%, 28% 6%, 24% 6%, 24% 65%, 20% 65%, 20% 96%, 16% 96%, 16% 10%, 12% 10%, 12% 80%, 8% 80%, 8% 15%, 4% 15%, 4% 95%, 0% 95%);
  animation: neonFlicker 3.4s infinite, currentTravelX 1.8s steps(9) infinite;
}
.jagged-bar.top{ top:-15px; animation-delay:0s, 0s; }
.jagged-bar.bottom{ bottom:-15px; transform: scaleY(-1); animation-delay:-1.7s, -0.9s; }
.jagged-bar.left, .jagged-bar.right{
  top:-8px; bottom:-8px; width:19px;
  background: linear-gradient(180deg, var(--accent3), var(--accent) 20%, var(--accent2) 35%, var(--accent) 50%, var(--accent3) 65%, var(--accent) 80%, var(--accent2) 95%, var(--accent3));
  background-size: 100% 240%;
  filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 13px var(--magenta)) drop-shadow(0 0 22px rgba(124,58,237,0.55));
  clip-path: polygon(0% 0%, 90% 0%, 90% 4%, 15% 4%, 15% 8%, 95% 8%, 95% 12%, 10% 12%, 10% 16%, 100% 16%, 100% 20%, 8% 20%, 8% 24%, 85% 24%, 85% 28%, 5% 28%, 5% 32%, 90% 32%, 90% 36%, 20% 36%, 20% 40%, 100% 40%, 100% 44%, 12% 44%, 12% 48%, 95% 48%, 95% 52%, 5% 52%, 5% 56%, 90% 56%, 90% 60%, 15% 60%, 15% 64%, 100% 64%, 100% 68%, 8% 68%, 8% 72%, 85% 72%, 85% 76%, 10% 76%, 10% 80%, 95% 80%, 95% 84%, 5% 84%, 5% 88%, 90% 88%, 90% 92%, 12% 92%, 12% 96%, 100% 96%, 100% 100%, 0% 100%);
  animation: neonFlicker 3.4s infinite, currentTravelY 1.8s steps(9) infinite;
}
.jagged-bar.left{ left:-15px; animation-delay:-0.6s, -0.3s; }
.jagged-bar.right{ right:-15px; transform: scaleX(-1); animation-delay:-2.4s, -1.5s; }
@keyframes currentTravelX{ from{ background-position: 0% 0; } to{ background-position: -140% 0; } }
@keyframes currentTravelY{ from{ background-position: 0 0%; } to{ background-position: 0 -140%; } }
@keyframes neonFlicker{
  0%,100%{ opacity:1; filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 13px var(--magenta)) drop-shadow(0 0 22px rgba(124,58,237,0.55)); }
  4%{ opacity:0.75; }
  7%{ opacity:1; filter: drop-shadow(0 0 9px var(--accent)) drop-shadow(0 0 18px var(--magenta)) drop-shadow(0 0 28px rgba(124,58,237,0.6)); }
  9%{ opacity:0.6; }
  11%{ opacity:1; }
  62%{ opacity:1; }
  64%{ opacity:0.8; }
  66%{ opacity:1; filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 17px var(--magenta)) drop-shadow(0 0 26px rgba(124,58,237,0.58)); }
}
@media (prefers-reduced-motion: reduce){ .jagged-bar{ animation:none !important; } }

/* Notification windows get a chunkier, brighter frame to match the
   reference "system window" look (thicker bars, hotter bloom). */
.levelup-box .jagged-bar.top, .levelup-box .jagged-bar.bottom{ height:28px; }
.levelup-box .jagged-bar.left, .levelup-box .jagged-bar.right{ width:28px; }
.levelup-box .jagged-bar.top{ top:-23px; }
.levelup-box .jagged-bar.bottom{ bottom:-23px; }
.levelup-box .jagged-bar.left{ left:-23px; }
.levelup-box .jagged-bar.right{ right:-23px; }
.levelup-box .jagged-bar{
  filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 18px var(--magenta)) drop-shadow(0 0 30px rgba(124,58,237,0.7));
}
.status-panel .jagged-bar.top, .status-panel .jagged-bar.bottom{ height:13px; opacity:0.85; }
.status-panel .jagged-bar.left, .status-panel .jagged-bar.right{ width:13px; opacity:0.85; }
.status-panel .jagged-bar.top{ top:-11px; }
.status-panel .jagged-bar.bottom{ bottom:-11px; }
.status-panel .jagged-bar.left{ left:-11px; }
.status-panel .jagged-bar.right{ right:-11px; }

/* Lightning-bolt corner shards — the diagonal light bursting past
   the frame corners in the reference, distinct from the edge teeth. */
.jagged-bolt{
  position:absolute; width:26px; height:44px; pointer-events:none;
  background: linear-gradient(160deg, var(--accent2), var(--accent) 45%, var(--magenta) 100%);
  clip-path: polygon(55% 0%, 18% 42%, 42% 42%, 8% 100%, 88% 46%, 58% 46%);
  filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 16px var(--magenta));
  animation: boltFlicker 2.3s infinite;
  will-change: opacity, filter;
}
.jagged-bolt.tl{ top:-30px; left:-16px; transform: rotate(-18deg); animation-delay:-0.4s; }
.jagged-bolt.tr{ top:-30px; right:-16px; transform: rotate(198deg) scaleX(-1); animation-delay:-1.1s; }
.jagged-bolt.bl{ bottom:-30px; left:-16px; transform: rotate(162deg) scaleX(-1); animation-delay:-1.7s; }
.jagged-bolt.br{ bottom:-30px; right:-16px; transform: rotate(18deg) scaleX(-1) scaleY(-1); animation-delay:-0.9s; }
@keyframes boltFlicker{
  0%,100%{ opacity:0.9; }
  6%{ opacity:0.3; }
  10%{ opacity:1; filter: drop-shadow(0 0 9px var(--accent)) drop-shadow(0 0 22px var(--magenta)); }
  14%{ opacity:0.5; }
  18%{ opacity:0.95; }
  70%{ opacity:0.9; }
  74%{ opacity:0.4; }
  78%{ opacity:1; filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 20px var(--magenta)); }
}
@media (prefers-reduced-motion: reduce){ .jagged-bolt{ animation:none !important; } }
.levelup-box .jagged-bolt{ width:38px; height:64px; }
.levelup-box .jagged-bolt.tl, .levelup-box .jagged-bolt.tr{ top:-42px; }
.levelup-box .jagged-bolt.bl, .levelup-box .jagged-bolt.br{ bottom:-42px; }
.levelup-box .jagged-bolt.tl, .levelup-box .jagged-bolt.bl{ left:-22px; }
.levelup-box .jagged-bolt.tr, .levelup-box .jagged-bolt.br{ right:-22px; }
.status-panel .jagged-bolt{ width:20px; height:34px; opacity:0.85; }

/* Modal (generic form) */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(2,3,10,0.75); z-index:90;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-sheet{
  background: var(--panel); border:1px solid var(--panel-border); border-radius: 18px 18px 0 0;
  width:100%; max-width: 480px; padding: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  animation: slideUp .25s ease;
}
@keyframes slideUp{ from{ transform: translateY(100%);} to{ transform: translateY(0);} }
.modal-title{ font-family: var(--font-display); font-size:19px; font-weight:700; margin-bottom:16px; color:var(--system); letter-spacing:1px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.field input, .field select{
  width:100%; background:#170b2e; border:1px solid var(--panel-border); border-radius:8px;
  padding:11px 12px; color:var(--text); font-size:15px;
}
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-select{
  border:1px solid var(--panel-border); border-radius:20px; padding:8px 14px; font-size:13px; color:var(--text-dim); cursor:pointer;
}
.chip-select.active{ border-color: var(--system2); color: var(--system); background: rgba(143,216,255,0.1); }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.modal-actions .btn-secondary{ margin-top:0; }

/* Onboarding */
.onboard-overlay{
  background: radial-gradient(ellipse at 50% 30%, #3a1470 0%, #08050f 70%);
  z-index: 200; padding: 0 28px;
}
.onboard-box{ text-align:center; display:flex; flex-direction:column; align-items:center; animation: popIn .5s cubic-bezier(.2,1.4,.4,1); }
.onboard-rune{ margin-bottom: 18px; filter: drop-shadow(0 0 20px rgba(143,216,255,0.5)); }
.onboard-brand{
  font-family: var(--font-display); font-weight:700; letter-spacing:6px; font-size:16px; color: var(--system);
  text-shadow: 0 0 14px rgba(143,216,255,0.6); margin-bottom:18px;
}
.onboard-headline{
  font-family: var(--font-display); font-size:32px; font-weight:700; line-height:1.25; color:#fff; margin-bottom:14px;
  background: linear-gradient(90deg, #fff, var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 30px rgba(168,85,247,0.4);
}
.onboard-sub{ font-size:15px; color: var(--text-dim); line-height:1.6; margin-bottom:32px; max-width:320px; }
.onboard-box .btn-primary{ max-width:280px; }

/* scrollbar */
::-webkit-scrollbar{ width:0; height:0; }