/* =========================================================================
   Aquario ONE - Admin // Flat Console design system (макет, dark theme)
   Альтернатива v1 (Refined Glass): плоские контрастные поверхности,
   тонкие чёткие границы, плотная сетка, точечный azure-акцент, быстрый motion.
   Те же имена классов, что и в v1 - общий app.js работает без изменений.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --- Фон / поверхности (плоские, без стекла) --- */
  --bg-0:        #08090c;
  --bg-1:        #0c0e12;
  --bg-2:        #111319;
  --bg-3:        #161922;
  --panel:       #101218;
  --panel-2:     #15171f;

  /* --- «Стекло» переосмыслено как плоские тональные ступени --- */
  --glass:       rgba(255, 255, 255, 0.035);
  --glass-2:     rgba(255, 255, 255, 0.05);
  --glass-3:     rgba(255, 255, 255, 0.08);
  --glass-brand: rgba(0, 141, 210, 0.12);
  --stroke:      rgba(255, 255, 255, 0.08);
  --stroke-2:    rgba(255, 255, 255, 0.16);
  --stroke-soft: rgba(255, 255, 255, 0.05);

  /* --- Бренд (azure Aquario = #008DD2) --- */
  --brand:       #008DD2;
  --brand-600:   #0277b3;
  --brand-400:   #1c9ee0;
  --brand-300:   #57bff5;
  --brand-200:   #9bd9fb;
  --cyan:        #22d3ee;
  --amber:       #f5b14a;

  /* --- Текст --- */
  --text-1:      #e7edf4;
  --text-2:      #95a3b6;
  --text-3:      #5b6878;
  --text-on-brand: #04111c;

  /* --- Статусы --- */
  --ok:          #34d399;
  --warn:        #f5b14a;
  --danger:      #f76d6d;
  --info:        #4cb8f0;

  /* --- Радиусы (мельче, строже) --- */
  --r-xs: 5px;  --r-sm: 7px;  --r: 9px;  --r-lg: 11px;  --r-xl: 14px;  --r-pill: 999px;

  /* --- Тени (минимальные, плоские) --- */
  --shadow-1:  0 1px 1px rgba(0,0,0,.4);
  --shadow-2:  0 1px 2px rgba(0,0,0,.5);
  --shadow-3:  0 6px 20px -10px rgba(0,0,0,.7);
  --glow-brand: 0 0 0 1px rgba(0,141,210,.5);
  --glow-soft:  0 0 0 1px rgba(0,141,210,.25);

  /* --- Motion (быстрый, snappy) --- */
  --ease:        cubic-bezier(.3,.8,.4,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --spring:      cubic-bezier(.34,1.4,.5,1);
  --t-fast: .12s;  --t: .18s;  --t-slow: .34s;

  --sidebar-w: 246px;
  --topbar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-1);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,141,210,.08), transparent 60%),
    var(--bg-0);
  -webkit-font-smoothing: antialiased;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -.005em;
  overflow: hidden;
}
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(0,141,210,.35); }

/* ---- Фон: без «блобов» (плоско), только тонкая статичная сетка ---------- */
.bg-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-ambient .blob { display: none; }
.bg-ambient .grid {
  position: absolute; inset: 0; opacity: .6;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
}
.bg-ambient .vignette { display: none; }

/* ========================================================================
   Каркас
   ======================================================================== */
.app { position: relative; z-index: 1; height: 100vh; display: grid;
  grid-template-columns: var(--sidebar-w) 1fr; }

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--stroke);
  display: flex; flex-direction: column; overflow: hidden;
}
.sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px;
  border-bottom: 1px solid var(--stroke-soft); }
.sidebar__brand .mark {
  width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--brand); border: 1px solid var(--brand-400);
}
.sidebar__brand .mark img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.sidebar__brand .name { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.sidebar__brand .name span { color: var(--brand-300); }
.sidebar__brand .sub { font-size: 10px; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; }

.nav { padding: 8px 10px; overflow-y: auto; flex: 1; }
.nav__label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-3); padding: 14px 10px 6px; font-weight: 600; }
.nav__item {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; margin: 1px 0; border-radius: var(--r-sm);
  color: var(--text-2); cursor: pointer; font-weight: 500; font-size: 13.5px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__item svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
.nav__item .badge { margin-left: auto; }
.nav__item:hover { background: var(--glass); color: var(--text-1); }
.nav__item.active { color: var(--text-1); background: var(--glass-3); }
.nav__item.active svg { opacity: 1; color: var(--brand-300); }
.nav__item.active::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 18px; border-radius: 2px; background: var(--brand);
}

.sidebar__foot { padding: 10px; border-top: 1px solid var(--stroke-soft); }
.userchip { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-fast); }
.userchip:hover { background: var(--glass); }
.avatar { width: 32px; height: 32px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; color: #fff; background: var(--brand-600); border: 1px solid var(--brand-400); }
.userchip .meta { line-height: 1.25; }
.userchip .meta b { font-size: 12.5px; font-weight: 600; }
.userchip .meta small { color: var(--text-3); font-size: 11px; }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  border-bottom: 1px solid var(--stroke); background: var(--bg-1);
}
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
.breadcrumb b { color: var(--text-1); font-weight: 600; }
.breadcrumb svg { width: 14px; height: 14px; opacity: .5; }

.search {
  margin-left: 6px; display: flex; align-items: center; gap: 8px; min-width: 240px;
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r-sm);
  padding: 7px 12px; color: var(--text-3); transition: border var(--t-fast); }
.search:focus-within { border-color: var(--brand); }
.search svg { width: 15px; height: 15px; }
.search input { background: none; border: none; outline: none; color: var(--text-1); font-size: 13px; width: 100%; }
.search kbd { font-size: 10px; color: var(--text-3); border: 1px solid var(--stroke);
  border-radius: 4px; padding: 1px 5px; font-family: 'JetBrains Mono', monospace; }

.topbar__spacer { flex: 1; }

.content { flex: 1; overflow-y: auto; padding: 18px 20px 26px; background: var(--bg-0); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 2px 0 18px; }
.page-head h1 { font-size: 23px; }
.page-head .desc { color: var(--text-2); margin-top: 5px; font-size: 13px; }

/* ========================================================================
   Атомы (плоские)
   ======================================================================== */
.card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
}
.card::after { display: none; }            /* без стеклянного блика */
.card__pad { padding: 16px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--stroke); }
.card__head h3 { font-size: 14px; }
.card__head .sub { color: var(--text-3); font-size: 12px; }

.card-hover { transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.card-hover:hover { border-color: var(--stroke-2); background: var(--panel-2); }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  height: 34px; padding: 0 13px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; font-weight: 600; border: 1px solid var(--stroke); position: relative; overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  color: var(--text-1); background: var(--bg-2);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--glass-3); border-color: var(--stroke-2); }
.btn:active { transform: scale(.985); }
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand-400); }
.btn--primary:hover { background: var(--brand-400); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--glass); color: var(--text-1); }
.btn--sm { height: 29px; padding: 0 10px; font-size: 12.5px; }
.btn--icon { width: 34px; padding: 0; }
.btn--icon.btn--sm { width: 29px; }

.ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none;
  background: rgba(255,255,255,.22); animation: ripple .5s var(--ease-out); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* чипы / теги */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text-2);
  transition: all var(--t-fast); cursor: default; }
.chip--brand { background: var(--glass-brand); border-color: rgba(0,141,210,.4); color: var(--brand-200); }
.chip--amber { background: rgba(245,177,74,.12); border-color: rgba(245,177,74,.35); color: var(--amber); }
.chip.is-click { cursor: pointer; }
.chip.is-click:hover { border-color: var(--stroke-2); color: var(--text-1); }
.chip .x { opacity: .5; }  .chip .x:hover { opacity: 1; }

/* бейджи / точки */
.badge { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 700; }
.badge--brand { background: rgba(0,141,210,.16); color: var(--brand-200); }
.badge--ok { background: rgba(52,211,153,.14); color: var(--ok); }
.badge--warn { background: rgba(245,177,74,.14); color: var(--warn); }
.badge--danger { background: rgba(247,109,109,.14); color: var(--danger); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--danger { background: var(--danger); }

.statepill { display: inline-flex; align-items: center; gap: 8px; height: 31px; padding: 0 12px;
  border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--stroke);
  font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.statepill .pulse { position: relative; }
.statepill .pulse::after { content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--ok); opacity:0; animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0%{opacity:.7; transform:scale(.6);} 100%{opacity:0; transform:scale(1.6);} }

/* инпут */
.input { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px;
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r-sm); color: var(--text-1);
  transition: border var(--t-fast); }
.input:focus-within { border-color: var(--brand); }
.input input, .input select { background: none; border: none; outline: none; color: var(--text-1); width: 100%; font-size: 13px; }
.input svg { width: 15px; height: 15px; color: var(--text-3); }

/* переключатель */
.switch { width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--glass-3);
  border: 1px solid var(--stroke); position: relative; cursor: pointer; transition: background var(--t); flex:0 0 auto; }
.switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition: transform var(--t) var(--spring); }
.switch.on { background: var(--brand); border-color: var(--brand-400); }
.switch.on::after { transform: translateX(16px); }

/* сегменты / табы */
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-2); border: 1px solid var(--stroke);
  border-radius: var(--r-sm); }
.segmented button { border: none; background: none; color: var(--text-2); font-weight: 600; font-size: 12.5px;
  padding: 5px 12px; border-radius: var(--r-xs); cursor: pointer; transition: all var(--t-fast); }
.segmented button:hover { color: var(--text-1); }
.segmented button.active { background: var(--glass-3); color: var(--text-1); }

.tabs { display: flex; gap: 2px; }
.tab { padding: 8px 13px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 600; cursor: pointer;
  font-size: 13px; position: relative; transition: color var(--t-fast), background var(--t-fast); display:flex; align-items:center; gap:7px; }
.tab:hover { color: var(--text-1); background: var(--glass); }
.tab.active { color: var(--text-1); background: var(--glass-3); }
.tab.active::after { content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--brand); border-radius:2px; }
.tab .count { font-size: 11px; color: var(--text-3); }
.tab.active .count { color: var(--brand-300); }

/* таблица */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; padding: 10px 14px; color: var(--text-3); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--stroke); background: var(--bg-1); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--stroke-soft); color: var(--text-1); }
.table tbody tr { transition: background var(--t-fast); cursor: pointer; }
.table tbody tr:hover { background: var(--glass); }
.table tbody tr:last-child td { border-bottom: none; }
.t-mono { font-family: 'JetBrains Mono', monospace; color: var(--text-2); font-size: 12px; }

/* прогресс */
.meter { height: 5px; border-radius: var(--r-pill); background: var(--glass-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand); }

/* утилиты */
.muted { color: var(--text-3); }  .dim { color: var(--text-2); }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.gap-6{gap:6px;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-20{gap:20px;}
.mt-4{margin-top:4px;} .mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;} .mt-24{margin-top:24px;}
.grid { display: grid; gap: 14px; }
.fw-600{font-weight:600;} .fw-700{font-weight:700;}
.fs-12{font-size:12px;} .fs-13{font-size:13px;} .fs-22{font-size:22px;} .fs-28{font-size:26px;}

/* Motion: появление (короче и строже, чем в v1) */
.reveal { opacity: 0; transform: translateY(8px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 0; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }