/* 2) /web/assets/styles.css */
:root{
  --bg: #0b0f1a;
  --card: #111a2e;
  --card2: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #22c55e;
  --danger: #ef4444;
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --sidebar: 260px;
  font-synthesis-weight: none;
}

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(34,197,94,.12), transparent 60%),
              radial-gradient(900px 700px at 90% 20%, rgba(59,130,246,.10), transparent 55%),
              var(--bg);
  color: var(--text);
}

body.dark{
  --bg: #070a12;
  --card: #0b1223;
  --card2: #0a1020;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,.07);
}

a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; }

.container{
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
  backdrop-filter: blur(8px);
}

.brand{
  font-weight: 800;
  letter-spacing: .4px;
  font-size: 18px;
  margin-bottom: 14px;
}

.nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.nav a{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
}

.nav a.router-link-active{
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,.04);
}

.sidebar .bottom{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main{
  padding: 22px;
}

.grid{
  display: grid;
  gap: 14px;
}

.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.card h2{
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--text);
}

.muted{ color: var(--muted); }
.row{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.stack{ display:flex; flex-direction: column; gap: 10px; }

.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
}

.btn{
  cursor: pointer;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  transition: transform .04s ease, background .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.08); }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
}
.btn.danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  min-width: 260px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.toast .title{ font-weight: 700; margin-bottom: 4px; }
.toast .msg{ color: var(--muted); font-size: 13px; }

@media (max-width: 920px){
  .container{ grid-template-columns: 1fr; }
  .sidebar{ position: relative; height: auto; }
  .sidebar .bottom{ position: static; margin-top: 14px; }
  :root{ --sidebar: 1fr; }
  .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; }
}

/* Top bar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.iconbtn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.sidebar-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 950;
}

.sidebar.drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar);
  z-index: 960;
  transform: translateX(-110%);
  transition: transform .18s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%), rgba(0,0,0,.35);
}

.sidebar.drawer.open{
  transform: translateX(0);
}