:root{
  color-scheme:dark;
  --bg:#07111f;
  --panel:#0d1d2e;
  --card:#102338;
  --card-strong:#122a43;
  --line:#1d3b58;
  --line-strong:#31506d;
  --text:#f4f8fc;
  --muted:#9fb3c8;
  --primary:#1e88e5;
  --primary-hover:#3397ee;
  --danger:#ef5350;
  --ok:#43a047;
  --radius:16px;
  --shadow:0 18px 60px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
strong{overflow-wrap:anywhere}

.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
}
.side{
  position:sticky;
  top:0;
  z-index:20;
  height:100vh;
  padding:22px 16px;
  border-right:1px solid var(--line);
  background:#0b1f3a;
  overflow-y:auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:0 8px 22px;
  font-size:1.28rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.brand-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:9px;
}
.nav{display:grid;gap:6px}
.nav a{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  color:var(--muted);
  white-space:nowrap;
  transition:background-color .16s ease,color .16s ease;
}
.nav a:hover,.nav a.active{background:#12304e;color:#fff}
.nav a:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(57,189,248,.45);
  outline-offset:2px;
}

.main{
  width:100%;
  min-width:0;
  max-width:1680px;
  padding:28px clamp(18px,3vw,42px) 44px;
  margin:0 auto;
}
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}
.top>div:first-child{min-width:0}
.top h1{margin:0;font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.2}
.top .muted{overflow-wrap:anywhere}
.muted{color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.card{
  min-width:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.card h2,.card h3{overflow-wrap:anywhere}
.card p{overflow-wrap:anywhere}
.metric{font-size:clamp(1.45rem,3vw,1.8rem);font-weight:800;margin-top:8px}
.section-title{margin:22px 0 10px;font-size:clamp(1.12rem,2vw,1.35rem)}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.field{min-width:0}
.field label{display:block;color:var(--muted);font-size:.9rem;margin:0 0 6px}
.field input,.field select,.field textarea{
  width:100%;
  min-width:0;
  min-height:44px;
  border:1px solid var(--line-strong);
  background:#08131f;
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#426888}
.field textarea{min-height:120px;resize:vertical}
.field input[type="file"]{padding:8px}
.field input[type="file"]::file-selector-button{
  border:0;
  border-radius:8px;
  padding:8px 10px;
  margin-right:10px;
  background:#244761;
  color:#fff;
  cursor:pointer;
}
.checks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.check{
  min-width:0;
  min-height:44px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow-wrap:anywhere;
}
.check input{flex:0 0 auto;width:16px;height:16px}

.btn{
  min-height:42px;
  border:0;
  border-radius:10px;
  padding:10px 14px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s ease,transform .08s ease,background-color .15s ease;
}
.btn:hover{background:var(--primary-hover)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#244761}
.btn.danger{background:#7d2730}
.btn.danger:hover{background:#91313b}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(8,19,31,.32);
}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{
  text-align:left;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
  vertical-align:middle;
}
th{color:var(--muted);font-weight:700;white-space:nowrap}
td{overflow-wrap:anywhere}
tr:last-child td{border-bottom:0}
.table-wrap form{margin:0}
.table-wrap .btn{min-height:38px;padding:8px 11px}

.pill{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  font-size:.78rem;
  background:#233f59;
  white-space:nowrap;
}
.pill.ok{background:#174d37}
.pill.off{background:#4d3032}
.flash{
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:16px;
  background:#153b2a;
  border:1px solid #286348;
  overflow-wrap:anywhere;
}
.flash.error{background:#4a1f25;border-color:#8c3944}

.login{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.login-card{
  width:min(440px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(20px,5vw,30px);
  box-shadow:var(--shadow);
}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.login-brand img{width:48px;height:48px;border-radius:12px;flex:0 0 48px}
.login-card h1{margin:0;font-size:clamp(1.7rem,5vw,2.1rem)}
.login-card .field{margin:12px 0}
.login-card .btn{width:100%;margin-top:10px}

.install-wrap{
  width:min(820px,100%);
  margin:0 auto;
  padding:clamp(18px,4vw,42px) clamp(14px,3vw,24px);
}
.install-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(18px,4vw,28px);
  box-shadow:var(--shadow);
}
.install-brand{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.install-brand img{width:52px;height:52px;border-radius:13px;flex:0 0 52px}
.install-card h1{margin:0;font-size:clamp(1.55rem,4vw,2rem)}
.install-grid{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:12px}
.install-card .field{margin-top:14px}
.install-card>.btn,.install-card form>.btn{width:100%;margin-top:20px}
.install-hint{color:var(--muted);font-size:.92rem}
.install-ok,.install-error{padding:14px;border-radius:10px;margin:12px 0;overflow-wrap:anywhere}
.install-ok{background:#133d2b;border:1px solid #277a54}
.install-error{background:#4b1d24;border:1px solid #8d3340}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7dd3fc}
.text-link{color:#7dd3fc;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1180px){
  .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1024px){
  .shell{grid-template-columns:1fr}
  .side{
    position:sticky;
    top:0;
    height:auto;
    padding:10px 14px 9px;
    border-right:0;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .brand{margin:0 4px 9px;font-size:1.05rem}
  .brand-icon{width:30px;height:30px;flex-basis:30px;border-radius:8px}
  .nav{
    display:flex;
    gap:6px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    padding:0 0 3px;
  }
  .nav a{flex:0 0 auto;min-height:40px;padding:8px 11px}
  .main{padding:22px clamp(14px,3vw,26px) 36px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
}

@media (max-width:680px){
  .main{padding:16px 12px 30px}
  .top{align-items:flex-start;flex-direction:column;margin-bottom:16px}
  .top .pill{align-self:flex-start}
  .grid{grid-template-columns:1fr;gap:10px}
  .card{padding:15px;border-radius:14px}
  .checks{grid-template-columns:1fr}
  .section-title{margin-top:18px}
  .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .actions .btn{width:100%}
  table{min-width:620px}
  th,td{padding:10px;font-size:.88rem}
  .install-grid{grid-template-columns:1fr}
}

@media (max-width:430px){
  .side{padding-inline:10px}
  .nav a{font-size:.9rem}
  .login{padding:12px}
  .login-card{border-radius:16px;padding:18px}
  .login-brand img{width:42px;height:42px;flex-basis:42px}
  .card{padding:13px}
  .actions{grid-template-columns:1fr}
  .btn{width:100%}
  .table-wrap .btn{width:auto}
  .install-wrap{padding:12px}
  .install-card{border-radius:16px;padding:16px}
  .install-brand img{width:44px;height:44px;flex-basis:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

.flash.warning{
  background:#3a2f12;
  border-color:#7a641f;
}

.divider{
  border:0;
  border-top:1px solid var(--line);
  margin:20px 0;
}

.card.nested{
  box-shadow:none;
}

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

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