/* ==========================================================================
   ChaosOS — Dark Cartoonish Futuristic Theme
   ========================================================================== */

:root{
  --bg-0:#07080c;
  --bg-1:#0d0f16;
  --bg-2:#12151d;
  --card:#141824;
  --card-2:#191d2b;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --text-0:#f2f3f7;
  --text-1:#c3c7d6;
  --text-2:#888ea3;
  --purple:#a855f7;
  --pink:#ff5ec4;
  --cyan:#22d3ee;
  --green:#34e89e;
  --amber:#ffcb3d;
  --red:#ff5c7a;
  --blue:#5b8cff;
  --glow-purple: 0 0 24px rgba(168,85,247,.45);
  --glow-cyan: 0 0 24px rgba(34,211,238,.45);
  --glow-pink: 0 0 24px rgba(255,94,196,.45);
  --glow-green: 0 0 24px rgba(52,232,158,.45);
  --glow-amber: 0 0 24px rgba(255,203,61,.45);
  --glow-red: 0 0 24px rgba(255,92,122,.45);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(circle at 15% -10%, rgba(168,85,247,.14), transparent 40%),
              radial-gradient(circle at 90% 0%, rgba(34,211,238,.12), transparent 45%),
              radial-gradient(circle at 50% 100%, rgba(255,94,196,.10), transparent 40%),
              var(--bg-0);
  color: var(--text-0);
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
.font-comic{ font-family:'Fredoka', 'Baloo 2', system-ui, sans-serif; }
h1,h2,h3,h4{ font-family:'Fredoka','Baloo 2',system-ui,sans-serif; letter-spacing:.2px; margin:0; }
a{ color:inherit; text-decoration:none; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--purple),var(--cyan)); border-radius:10px; }
::selection{ background: rgba(168,85,247,.4); }

/* Layout */
#app-root{ display:flex; min-height:100vh; }
.sidebar{
  width: 92px;
  background: linear-gradient(180deg, rgba(20,24,36,.9), rgba(10,12,18,.9));
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding: 16px 0; gap: 4px; position:sticky; top:0; height:100vh; z-index:40;
  backdrop-filter: blur(14px); overflow-y:auto;
}
.sidebar .brand{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,var(--purple),var(--cyan));
  box-shadow: var(--glow-purple);
  font-size:24px; margin-bottom:12px; animation: floaty 4s ease-in-out infinite;
  overflow:hidden; flex-shrink:0;
}
.sidebar .brand img{ width:100%; height:100%; object-fit:cover; border-radius:16px; }
.nav-item{
  width:64px; height:60px; border-radius:18px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; color:var(--text-2);
  cursor:pointer; transition: all .25s var(--ease-bounce); position:relative;
  font-size:10px; font-weight:600; margin: 2px 0; flex-shrink:0;
}
.nav-item i{ font-size:17px; }
.nav-item:hover{ color:var(--text-0); background: rgba(255,255,255,.05); transform: translateY(-2px) scale(1.05); }
.nav-item.active{ color:#fff; background: linear-gradient(145deg, rgba(168,85,247,.25), rgba(34,211,238,.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--glow-purple); }
.nav-item.active::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:4px;height:22px;border-radius:4px; background: linear-gradient(var(--purple),var(--cyan));
}

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 26px; gap:14px; border-bottom:1px solid var(--line);
  background: rgba(10,12,18,.55); backdrop-filter: blur(12px); position:sticky; top:0; z-index:30;
  flex-wrap:wrap;
}
.topbar-left{ display:flex; align-items:center; gap:12px; }
.page-title{ font-size:22px; font-weight:700; }
.page-sub{ font-size:12px; color:var(--text-2); margin-top:2px; }
.topbar-right{ display:flex; align-items:center; gap:10px; }

.pill{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background: rgba(255,255,255,.04); border:1px solid var(--line); font-size:13px; font-weight:600;
  cursor:pointer; transition: all .2s var(--ease-bounce); color:var(--text-1);
}
.pill:hover{ transform: translateY(-2px); border-color: var(--line-strong); }

.icon-btn{
  width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text-1); cursor:pointer;
  position:relative; transition: all .2s var(--ease-bounce);
}
.icon-btn:hover{ transform: translateY(-2px) rotate(-4deg); color:#fff; border-color: var(--line-strong); }
.badge-dot{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:999px;
  background: linear-gradient(135deg,var(--red),var(--pink)); font-size:10px; display:flex; align-items:center;
  justify-content:center; font-weight:700; padding:0 4px; box-shadow: var(--glow-pink);
}

.content{ flex:1; padding: 22px 26px 60px; max-width:1400px; width:100%; margin:0 auto; }

/* Cards */
.card{
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--card);
  border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; position:relative; overflow:hidden;
  backdrop-filter: blur(10px);
  transition: transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ border-color: var(--line-strong); }
.card.hoverable:hover{ transform: translateY(-4px); }
.card-glow-purple{ box-shadow: var(--glow-purple); }
.card-glow-cyan{ box-shadow: var(--glow-cyan); }
.card-glow-pink{ box-shadow: var(--glow-pink); }
.card-glow-green{ box-shadow: var(--glow-green); }
.card-glow-amber{ box-shadow: var(--glow-amber); }
.card-glow-red{ box-shadow: var(--glow-red); }

.grid{ display:grid; gap:18px; }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 720px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .sidebar{ width:70px; }
  .nav-item{ width:52px; height:52px; font-size:8px;}
  .content{ padding:16px; }
}

.stat-num{ font-size:30px; font-weight:800; font-family:'Fredoka',sans-serif; }
.stat-label{ font-size:12px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.stat-icon{
  width:44px;height:44px;border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-bottom:10px;
}

.btn{
  border:none; cursor:pointer; font-weight:700; border-radius:14px; padding:10px 18px;
  font-family:inherit; font-size:14px; display:inline-flex; align-items:center; gap:8px;
  transition: all .18s var(--ease-bounce); color:#0c0e14;
}
.btn:active{ transform: scale(.94); }
.btn-primary{ background: linear-gradient(135deg,var(--purple),var(--cyan)); color:#fff; box-shadow: var(--glow-purple); }
.btn-primary:hover{ transform: translateY(-2px) scale(1.03); }
.btn-ghost{ background: rgba(255,255,255,.06); color:var(--text-0); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--line-strong); transform: translateY(-2px); }
.btn-danger{ background: linear-gradient(135deg,var(--red),#ff8a5c); color:#fff; }
.btn-sm{ padding:6px 12px; font-size:12px; border-radius:10px; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }

input, select, textarea{
  background: rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text-0);
  border-radius: 12px; padding:10px 12px; font-family:inherit; font-size:14px; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease; width:100%;
}
input:focus, select:focus, textarea:focus{ border-color: var(--purple); box-shadow: 0 0 0 3px rgba(168,85,247,.18); }
label{ font-size:12px; color:var(--text-2); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; display:block;}
.field{ margin-bottom:12px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; }
.row > *{ flex:1; min-width:120px; }

/* Section headers */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-title{ font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; }
.section-title i{ font-size:16px; }

/* Task groups (hourly planner, 4 PM - 12 AM) */
.time-block{ margin-bottom:16px; }
.time-head{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; margin-bottom:10px;
  font-weight:800; font-size:14px;
  background: linear-gradient(90deg, rgba(168,85,247,.14), transparent); color:var(--purple);
}
.time-head.now{ background: linear-gradient(90deg, rgba(34,211,238,.22), transparent); color:var(--cyan); box-shadow: inset 0 0 0 1px rgba(34,211,238,.3); }

.task-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background: rgba(255,255,255,.03); border:1px solid var(--line); margin-bottom:8px;
  transition: all .2s var(--ease-bounce);
}
.task-item:hover{ border-color: var(--line-strong); transform: translateX(3px); }
.task-item.done{ opacity:.55; }
.task-item.done .task-text{ text-decoration: line-through; }
.checkbox{
  width:26px;height:26px;border-radius:10px; border:2px solid var(--line-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .2s var(--ease-bounce);
  background: rgba(255,255,255,.03);
}
.checkbox.checked{ background: linear-gradient(135deg,var(--green),var(--cyan)); border-color:transparent; box-shadow: var(--glow-green); }
.checkbox.checked i{ color:#082; }
.task-text{ flex:1; font-size:14px; }
.tag{ font-size:10px; padding:3px 9px; border-radius:999px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.tag-high{ background: rgba(255,92,122,.18); color:var(--red); }
.tag-med{ background: rgba(255,203,61,.18); color:var(--amber); }
.tag-low{ background: rgba(52,232,158,.18); color:var(--green); }
.icon-x{ color:var(--text-2); cursor:pointer; padding:4px; }
.icon-x:hover{ color:var(--red); }

/* Progress bars */
.progress{ height:10px; border-radius:999px; background: rgba(255,255,255,.06); overflow:hidden; position:relative; }
.progress > div{ height:100%; border-radius:999px; transition: width .5s var(--ease-bounce); }
.progress.p-purple > div{ background: linear-gradient(90deg,var(--purple),var(--cyan)); }
.progress.p-green > div{ background: linear-gradient(90deg,var(--green),var(--cyan)); }
.progress.p-red > div{ background: linear-gradient(90deg,var(--red),var(--amber)); }
.progress.p-amber > div{ background: linear-gradient(90deg,var(--amber),var(--red)); }

/* Health tracker rings */
.health-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .health-grid{ grid-template-columns:repeat(2,1fr); } }
.ring-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.ring{ width:96px;height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; }
.ring svg{ transform: rotate(-90deg); }
.ring .ring-emoji{ position:absolute; font-size:26px; }

/* Slider inputs (health metrics + planner work-window) */
input[type="range"]{
  -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
  background: linear-gradient(90deg,var(--purple),var(--cyan)); outline:none; cursor:pointer; padding:0;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow: 0 0 0 4px rgba(168,85,247,.35), 0 2px 6px rgba(0,0,0,.4);
  cursor:pointer; transition: transform .15s var(--ease-bounce);
}
input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.15); }
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:none;
  background:#fff; box-shadow: 0 0 0 4px rgba(168,85,247,.35), 0 2px 6px rgba(0,0,0,.4); cursor:pointer;
}
input[type="range"]::-moz-range-track{ height:6px; border-radius:999px; background: linear-gradient(90deg,var(--purple),var(--cyan)); }
.health-slider{ margin-top:8px; }

/* Color swatch (used for note color picker) */
.color-swatch{ font-size:26px; padding:8px; border-radius:14px; cursor:pointer; background: rgba(255,255,255,.03); border:1px solid var(--line); transition: all .2s var(--ease-bounce); }
.color-swatch:hover{ transform: scale(1.15); }
.color-swatch.selected{ box-shadow: 0 0 0 2px #fff, var(--glow-purple); }

/* Calendar */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal-dow{ text-align:center; font-size:11px; color:var(--text-2); font-weight:700; padding-bottom:6px; text-transform:uppercase;}
.cal-cell{
  min-height:82px; border-radius:14px; background: rgba(255,255,255,.03); border:1px solid var(--line);
  padding:8px; font-size:12px; position:relative; cursor:pointer; transition: all .2s ease;
}
.cal-cell:hover{ border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.cal-cell.today{ border-color: var(--purple); box-shadow: var(--glow-purple); }
.cal-cell.empty{ opacity:.25; cursor:default; }
.cal-date{ font-weight:700; font-size:12px; margin-bottom:4px; }
.cal-dot{ width:6px;height:6px;border-radius:50%; display:inline-block; margin-right:3px; }
.cal-evt{ font-size:9px; padding:2px 5px; border-radius:6px; margin-top:2px; background: rgba(168,85,247,.2); color:#e6d5ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Notes */
.note-card{ background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:18px; padding:16px; transition: all .2s var(--ease-bounce); position:relative; min-height:140px; display:flex; flex-direction:column;}
.note-card:hover{ transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--glow-purple); }
.note-pin{ position:absolute; top:10px; right:10px; cursor:pointer; color: var(--text-2); }
.note-pin.pinned{ color:var(--amber); }

/* Comic badge */
.comic-badge{
  font-family:'Fredoka',sans-serif; font-weight:800; padding:6px 14px; border-radius:10px; display:inline-flex; align-items:center; gap:6px;
  transform: rotate(-2deg); border:2px solid #fff2; text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}

/* ===================== MODALS / OVERLAYS ===================== */
.overlay{
  position:fixed; inset:0; background: rgba(4,5,8,.72); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
  animation: overlayIn .2s ease;
}
@keyframes overlayIn{ from{opacity:0;} to{opacity:1;} }
.modal-box{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--card);
  border:1px solid var(--line-strong); border-radius:24px; padding:26px; max-width:480px; width:100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), var(--glow-purple);
  animation: modalPop .35s var(--ease-bounce);
  max-height:88vh; overflow-y:auto;
}
@keyframes modalPop{ 0%{ opacity:0; transform: scale(.7) translateY(20px); } 100%{ opacity:1; transform: scale(1) translateY(0); } }
.modal-close{ position:absolute; top:16px; right:16px; cursor:pointer; }

/* Toast / notification */
.toast-stack{ position:fixed; bottom:24px; right:24px; z-index:250; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.toast{
  background: var(--card); border:1px solid var(--line-strong); border-radius:14px; padding:12px 16px; display:flex; gap:10px; align-items:center;
  min-width:260px; max-width:340px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toastIn .3s var(--ease-bounce);
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(60px);} to{opacity:1; transform:translateX(0);} }
.toast i{ font-size:18px; }

/* Notification panel */
.notif-panel{
  position:absolute; top:60px; right:26px; width:340px; max-height:440px; overflow-y:auto; z-index:100;
  background: var(--card); border:1px solid var(--line-strong); border-radius:18px; padding:14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: modalPop .25s var(--ease-bounce);
}
.notif-item{ padding:10px 12px; border-radius:12px; background: rgba(255,255,255,.03); margin-bottom:8px; font-size:13px; display:flex; gap:10px; }
.notif-item i{ margin-top:2px; }
.notif-time{ font-size:10px; color:var(--text-2); margin-top:2px; }

/* Empty state */
.empty-state{ text-align:center; padding:40px 20px; color:var(--text-2); }
.empty-state .emoji{ font-size:44px; display:block; margin-bottom:10px; }

/* Utility */
.flex{ display:flex; } .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-10{gap:10px;} .gap-14{gap:14px;} .mt-6{margin-top:6px;} .mt-10{margin-top:10px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;}
.text-2{ color:var(--text-2); } .text-1{ color:var(--text-1); } .small{ font-size:12px; } .fw{ font-weight:700; }
.center{ text-align:center; }
.hidden{ display:none !important; }
.pulse{ animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ box-shadow: 0 0 0 rgba(168,85,247,0);} 50%{ box-shadow: var(--glow-purple);} }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px);} }
.spin{ animation: spin 6s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg);} }

.warn-banner{
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:16px; margin-bottom:16px;
  border:1px solid rgba(255,92,122,.4); background: rgba(255,92,122,.1); color:#ffd7de; font-weight:700; font-size:13px;
  animation: shakeSm .5s ease;
}
@keyframes shakeSm{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

/* ===================== SPLASH SCREEN ===================== */
.splash-screen{
  position:fixed; inset:0; z-index:500; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background: var(--bg-0);
  background: radial-gradient(circle at 20% -10%, rgba(168,85,247,.16), transparent 40%),
              radial-gradient(circle at 85% 10%, rgba(34,211,238,.14), transparent 45%),
              var(--bg-0);
  transition: opacity .4s ease, visibility .4s ease;
}
.splash-screen.fade-out{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-logo{ width:96px; height:96px; border-radius:26px; box-shadow: var(--glow-purple); animation: floaty 3s ease-in-out infinite; }
.splash-title{ font-family:'JetBrains Mono', monospace; font-size:34px; font-weight:800; letter-spacing:1px; color:#fff; }
.splash-title .splash-zero{ color: var(--red); }
.splash-sub{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-2); }
.splash-bar{ width:200px; height:5px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; margin-top:6px; }
.splash-bar-fill{ height:100%; width:40%; background: linear-gradient(90deg,var(--purple),var(--cyan),var(--red)); border-radius:999px; animation: splashLoad 1.1s ease-in-out infinite; }
@keyframes splashLoad{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(250%); } }

/* ===================== AUTH SCREEN (Login / Signup) ===================== */
.auth-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background: radial-gradient(circle at 15% -10%, rgba(168,85,247,.16), transparent 40%),
              radial-gradient(circle at 90% 0%, rgba(34,211,238,.14), transparent 45%),
              radial-gradient(circle at 50% 100%, rgba(255,94,196,.10), transparent 40%),
              var(--bg-0);
}
.auth-card{
  width:100%; max-width:420px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--card);
  border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding:34px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), var(--glow-purple);
  animation: modalPop .35s var(--ease-bounce);
}
.auth-logo-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px; }
.auth-logo-wrap img{ width:64px; height:64px; border-radius:18px; box-shadow: var(--glow-purple); }
.auth-brand-text{ font-family:'JetBrains Mono', monospace; font-size:24px; font-weight:800; color:#fff; letter-spacing:.5px; }
.auth-brand-text .z{ color:var(--red); }
.auth-tagline{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-2); text-align:center; }
.auth-tagline .hl{ color:var(--red); }
.auth-tabs{ display:flex; gap:8px; margin-bottom:20px; background: rgba(255,255,255,.04); border-radius:14px; padding:4px; }
.auth-tab{ flex:1; text-align:center; padding:10px; border-radius:11px; font-weight:700; font-size:13px; cursor:pointer; color:var(--text-2); transition: all .2s var(--ease-bounce); }
.auth-tab.active{ background: linear-gradient(135deg,var(--purple),var(--cyan)); color:#fff; box-shadow: var(--glow-purple); }
.auth-error{ background: rgba(255,92,122,.12); border:1px solid rgba(255,92,122,.4); color:#ffd7de; font-size:13px; font-weight:600; padding:10px 14px; border-radius:12px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.auth-hint{ font-size:11px; color:var(--text-2); text-align:center; margin-top:16px; line-height:1.6; }
.auth-hint b{ color:var(--text-1); }

/* ===================== ADMIN PANEL ===================== */
.user-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:14px; background: rgba(255,255,255,.03); border:1px solid var(--line); margin-bottom:8px; flex-wrap:wrap; }
.user-avatar{ width:38px; height:38px; border-radius:12px; background: linear-gradient(135deg,var(--purple),var(--cyan)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:14px; flex-shrink:0; }
.user-info{ flex:1; min-width:140px; }
.user-name{ font-weight:700; font-size:14px; }
.user-email{ font-size:11px; color:var(--text-2); }
.role-badge{ font-size:10px; padding:4px 10px; border-radius:999px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.role-badge.admin{ background: rgba(255,203,61,.18); color:var(--amber); }
.role-badge.user{ background: rgba(34,211,238,.15); color:var(--cyan); }

/* ===================== ROUTINE TAB ===================== */
.routine-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px;
  background: rgba(255,255,255,.03); border:1px solid var(--line); margin-bottom:8px;
  transition: all .2s var(--ease-bounce);
}
.routine-item:hover{ border-color: var(--line-strong); transform: translateX(3px); }
.routine-icon{ width:38px;height:38px;border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; background: rgba(168,85,247,.15); color:var(--purple); flex-shrink:0; }
.routine-text{ flex:1; font-size:14px; }
.routine-time{ font-size:11px; color:var(--text-2); font-weight:700; }

/* Disabled calendar cell (past dates) */
.cal-cell.past{ opacity:.35; cursor:not-allowed; }
.cal-cell.past:hover{ background: rgba(255,255,255,.03); border-color: var(--line); }

/* Install banner (PWA) */
.install-banner{
  display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; margin-bottom:16px;
  border:1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.08); color:#c8f4ff; font-size:13px; font-weight:600;
}
.install-banner button{ margin-left:auto; }