/* =========================================================
   PROHOR — Routine Flow — Base Styles & Design Tokens
   Theme: "Night to Dawn" — deep navy → gold sunrise
   ========================================================= */

:root{
  /* ---- Color: dark (default) ---- */
  --bg-0:#0B0F1A;
  --bg-1:#131B2E;
  --bg-2:#1C2740;
  --bg-3:#26314A;
  --border:#2B3654;

  --text-1:#F4F1E8;
  --text-2:#AEB6CC;
  --text-3:#7C87A3;

  --accent-gold:#E8B054;
  --accent-gold-dim:#B5893D;
  --accent-teal:#4FD1C5;
  --accent-rose:#E8636F;
  --accent-violet:#7D6BAE;

  --shadow-1: 0 4px 16px rgba(0,0,0,.35);
  --shadow-2: 0 10px 30px rgba(0,0,0,.45);

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;

  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --transition-fast:.15s ease;
  --transition-med:.3s cubic-bezier(.4,0,.2,1);
}

body.light{
  --bg-0:#F6F5F0;
  --bg-1:#FFFFFF;
  --bg-2:#F0EEE6;
  --bg-3:#E6E3D8;
  --border:#DDD9CC;

  --text-1:#1D2130;
  --text-2:#4A5164;
  --text-3:#767E93;

  --shadow-1: 0 4px 16px rgba(20,20,10,.08);
  --shadow-2: 0 10px 30px rgba(20,20,10,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-1);
  font-family:var(--font-body);
  transition: background var(--transition-med), color var(--transition-med);
  min-height:100vh;
}

h1,h2,h3{ font-family:var(--font-display); margin:0; }

button, input, select, textarea{
  font-family:var(--font-body);
  color:inherit;
}

::selection{ background:var(--accent-gold); color:#1D2130; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---- Topbar ---- */
.topbar{
  display:flex;
  align-items:center;
  gap:24px;
  padding:16px 32px;
  background:var(--bg-1);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:50;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, #2B3A67 0%, var(--accent-violet) 55%, var(--accent-gold) 100%);
  box-shadow:0 0 16px rgba(232,176,84,.35);
  flex-shrink:0;
}
.brand-text h1{ font-size:20px; font-weight:800; letter-spacing:.5px; line-height:1; }
.brand-text span{ font-size:11px; color:var(--text-3); letter-spacing:1.5px; text-transform:uppercase; }

.search-wrap{
  flex:1; max-width:420px;
  display:flex; align-items:center; gap:10px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:9px 14px;
  transition:border-color var(--transition-fast);
}
.search-wrap:focus-within{ border-color:var(--accent-gold); }
.search-wrap i{ color:var(--text-3); }
.search-wrap input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text-1); font-size:14px;
}

.topbar-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }

.icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer; color:var(--text-2);
  transition:all var(--transition-fast);
}
.icon-btn:hover{ background:var(--bg-3); color:var(--accent-gold); transform:translateY(-1px); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:all var(--transition-fast);
  position:relative; overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent-gold-dim), var(--accent-gold));
  color:#1D2130;
}
.btn-primary:hover{ box-shadow:0 4px 14px rgba(232,176,84,.4); transform:translateY(-1px); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text-2); }
.btn-ghost:hover{ background:var(--bg-2); }
.btn-danger{ background:var(--accent-rose); color:#fff; }
.btn-danger:hover{ filter:brightness(1.08); }

/* ripple */
.btn::after{
  content:''; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.5);
  width:8px; height:8px; opacity:0;
  transform:scale(1); left:var(--rx,50%); top:var(--ry,50%);
  pointer-events:none;
}
.btn.rippling::after{
  animation:ripple .5s ease-out;
}
@keyframes ripple{
  0%{ opacity:.5; transform:translate(-50%,-50%) scale(0); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(26); }
}

/* ---- App Shell / Layout ---- */
.app-shell{ padding:24px 32px 60px; max-width:1440px; margin:0 auto; }

.panel-title{
  font-size:15px; font-weight:700; letter-spacing:.3px;
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px; color:var(--text-1);
}
.panel-title i{ color:var(--accent-gold); }

/* ---- Toolbar ---- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:20px 0;
  flex-wrap:wrap;
}
.filter-group{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:7px 14px; font-size:13px; font-weight:500;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:999px; color:var(--text-2); cursor:pointer;
  transition:all var(--transition-fast);
}
.chip:hover{ border-color:var(--accent-gold); color:var(--text-1); }
.chip.active{ background:var(--accent-gold); color:#1D2130; border-color:var(--accent-gold); font-weight:700; }

.sort-group{ display:flex; align-items:center; gap:8px; color:var(--text-3); }
.sort-group select{
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 12px; font-size:13px;
  color:var(--text-1); cursor:pointer;
}

/* ---- Content Grid ---- */
.content-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:24px;
  align-items:start;
}

@media (max-width: 980px){
  .content-grid{ grid-template-columns:1fr; }
}

/* ---- Empty state ---- */
.empty-state{
  text-align:center; padding:60px 20px; color:var(--text-3);
}
.empty-state i{ font-size:32px; color:var(--accent-gold-dim); margin-bottom:10px; display:block; }

/* ---- Toast ---- */
.toast-container{
  position:fixed; bottom:24px; right:24px; z-index:999;
  display:flex; flex-direction:column; gap:10px;
}
.toast{
  background:var(--bg-2); border:1px solid var(--border);
  border-left:4px solid var(--accent-gold);
  padding:12px 18px; border-radius:var(--radius-sm);
  font-size:13px; color:var(--text-1);
  box-shadow:var(--shadow-2);
  animation:toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}
.toast.error{ border-left-color:var(--accent-rose); }
.toast.success{ border-left-color:var(--accent-teal); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);} }
@keyframes toastOut{ to{ opacity:0; transform:translateX(30px);} }

/* ---- Responsive: topbar ---- */
@media (max-width: 720px){
  .topbar{ flex-wrap:wrap; padding:12px 16px; }
  .search-wrap{ order:3; max-width:100%; }
  .app-shell{ padding:16px; }
}