/* Complya — design system (teal). */
:root{
  --primary:#0F766E; --primary-600:#0E6A63; --primary-700:#0B5853; --primary-050:#ECFDF8; --primary-100:#CFFAF0;
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#F8FAFB; --line:#E4E8EC; --line-2:#EDF0F3;
  --ink:#0E1726; --text:#1B2433; --text-dim:#5A6675; --text-mute:#8A94A3; --on-dark:#AEB9C6;
  --good:#15803D; --good-bg:#ECFDF5; --warn:#B45309; --warn-bg:#FFFBEB; --bad:#B91C1C; --bad-bg:#FEF2F2; --info:#1D4ED8; --info-bg:#EFF6FF;
  --r-sm:8px; --r:12px; --r-lg:16px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(13,24,38,.06); --shadow:0 8px 28px rgba(13,24,38,.08); --shadow-lg:0 20px 55px rgba(13,24,38,.16);
  --font:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Space Grotesk",var(--font); --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sidebar-w:248px; --topbar-h:62px; --bottomnav-h:64px; --maxw:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font); font-size:15px; line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; line-height:1.2; letter-spacing:-.01em; }
a{ color:var(--primary); text-decoration:none; } a:hover{ text-decoration:underline; }
img,svg{ display:block; max-width:100%; }
.muted{ color:var(--text-dim); } .small{ font-size:13px; }
label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
input,select,textarea{ width:100%; font:inherit; font-size:14px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; transition:border-color .15s,box-shadow .15s; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(15,118,110,.16); }
.field{ margin-bottom:14px; }
button,.btn{ font:inherit; font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent; border-radius:var(--r-sm); padding:10px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s,border-color .15s,opacity .15s; }
button[type=submit],.btn-primary{ background:var(--primary); color:#fff; }
button[type=submit]:hover,.btn-primary:hover{ background:var(--primary-600); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-block{ width:100%; }
.alert,.err{ border-radius:var(--r-sm); padding:10px 12px; font-size:13px; border:1px solid; margin-bottom:12px; }
.err,.alert-error{ background:var(--bad-bg); color:var(--bad); border-color:#FBD5D5; }
.alert-ok{ background:var(--good-bg); color:var(--good); border-color:#BBF7D0; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.card-pad{ padding:18px 20px; }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--pill); background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line); }
.badge-ok{ background:var(--good-bg); color:var(--good); border-color:#BBF7D0; }
.badge-warn{ background:var(--warn-bg); color:var(--warn); border-color:#FDE68A; }
.badge-bad{ background:var(--bad-bg); color:var(--bad); border-color:#FBD5D5; }
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:14px; }
table.data th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); padding:10px 12px; border-bottom:1px solid var(--line); }
table.data td{ padding:12px; border-bottom:1px solid var(--line-2); }
.screen-auth{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:20px; background:radial-gradient(1100px 560px at 50% -12%, var(--primary-050), var(--bg)); }
.auth-card{ width:100%; max-width:384px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:34px 30px; }
.auth-card .brand{ font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0 0 2px; display:flex; align-items:center; gap:9px; }
.auth-card .brand::before{ content:""; width:13px; height:13px; border-radius:4px; background:var(--primary); box-shadow:0 0 0 3px var(--primary-100); }
.auth-card .sub{ color:var(--text-dim); font-size:13px; margin:0 0 22px; }
.auth-card form button{ width:100%; margin-top:18px; }
.app{ display:grid; min-height:100vh; min-height:100dvh; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--topbar-h) 1fr; grid-template-areas:"sidebar topbar" "sidebar main"; }
.app-sidebar{ grid-area:sidebar; background:var(--ink); color:var(--on-dark); position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; padding:18px 14px; gap:6px; z-index:40; }
.app-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--display); font-weight:700; font-size:18px; padding:6px 8px 14px; }
.app-brand::before{ content:""; width:14px; height:14px; border-radius:4px; background:var(--primary); box-shadow:0 0 0 3px rgba(15,118,110,.35); }
.nav-link{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm); color:var(--on-dark); font-weight:500; font-size:14px; }
.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.nav-link.active{ background:var(--primary); color:#fff; }
.nav-link svg{ width:18px; height:18px; flex:none; opacity:.9; }
.nav-sep{ margin-top:auto; }
.app-topbar{ grid-area:topbar; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:0 20px; position:sticky; top:0; z-index:30; }
.app-topbar .title{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); }
.app-topbar .spacer{ flex:1; }
.user-chip{ display:flex; align-items:center; gap:9px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; }
.hamburger{ display:none; background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; }
.hamburger svg{ width:20px; height:20px; }
.app-main{ grid-area:main; padding:24px; }
.app-main .wrap{ max-width:var(--maxw); margin:0 auto; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; }
.page-head h1{ font-size:22px; } .page-head p{ margin:4px 0 0; color:var(--text-dim); font-size:14px; }
.kpi-grid{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr); margin-bottom:20px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow-sm); }
.kpi .k-label{ font-size:13px; color:var(--text-dim); }
.kpi .k-value{ font-family:var(--display); font-size:26px; font-weight:700; color:var(--ink); margin-top:4px; }
.content-grid{ display:grid; gap:16px; grid-template-columns:2fr 1fr; }
.backdrop{ display:none; position:fixed; inset:0; background:rgba(8,15,26,.45); z-index:35; }
.app-bottomnav{ display:none; }
@media (max-width:1024px){
  .app{ grid-template-columns:1fr; grid-template-areas:"topbar" "main"; }
  .app-sidebar{ position:fixed; left:0; top:0; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .22s ease; }
  .app.nav-open .app-sidebar{ transform:translateX(0); }
  .app.nav-open .backdrop{ display:block; }
  .hamburger{ display:inline-flex; }
  .content-grid{ grid-template-columns:1fr; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .app-main{ padding:16px; padding-bottom:calc(var(--bottomnav-h) + 18px); }
  .kpi-grid{ grid-template-columns:1fr; }
  .app-bottomnav{ display:flex; position:fixed; bottom:0; left:0; right:0; height:var(--bottomnav-h); background:var(--surface); border-top:1px solid var(--line); z-index:36; padding-bottom:env(safe-area-inset-bottom); }
  .bn-link{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--text-mute); font-size:11px; font-weight:600; }
  .bn-link svg{ width:21px; height:21px; }
  .bn-link.active{ color:var(--primary); } .bn-link:hover{ text-decoration:none; }
}