:root{
  --navy:#0B1F33;
  --navy-dark:#071927;
  --teal:#0B4F55;
  --aqua:#1FA6A8;
  --aqua-hover:#17898B;
  --aqua-active:#126F71;
  --aqua-soft:#9FE0D8;
  --gold:#B88942;
  --gold-hover:#9E7335;
  --sand:#D8C6A3;
  --off-white:#F7F5EF;
  --page:#F4F7F7;
  --card:#FFFFFF;
  --card-line:#DCE5E7;
  --text:#263844;
  --muted:#63737E;
  --faint:#8A979F;
  --link:#147F82;
  --success:#23865B;
  --success-bg:#E9F6EF;
  --warning:#D39A32;
  --warning-bg:#FFF5DF;
  --danger:#C94A4A;
  --danger-bg:#FCEBEC;
  --info:#3976A8;
  --info-bg:#EAF2F8;
  --disabled:#7B8994;
  --shadow:0 14px 36px rgba(7,25,39,.08);
  --shadow-soft:0 4px 18px rgba(7,25,39,.05);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:var(--page);color:var(--text)}
body{line-height:1.5}
a{color:var(--link);text-decoration:none}
button,input,select,textarea{font:inherit}
button{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
button:active{transform:translateY(1px)}

.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{position:relative;overflow:hidden;background:var(--navy-dark);color:#fff;padding:22px 18px;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.04)}
.sidebar::after{content:"";position:absolute;inset:auto -85px -70px auto;width:330px;height:310px;background:url('../img/naas-pattern.svg') center/contain no-repeat;opacity:.045;pointer-events:none}
.brand{position:relative;z-index:1;padding:0 4px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand img{display:block;width:100%;max-width:190px;height:98px;margin-inline:auto;object-fit:contain;object-position:center}
.brand-caption{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#C3CDD3;font-size:12px}
.brand-caption strong{color:var(--aqua-soft);font-weight:700}
nav{position:relative;z-index:1;display:grid;gap:7px;margin-top:22px}
nav a,.nav-disabled{padding:12px 14px;border-radius:10px;color:#fff;display:flex;justify-content:space-between;align-items:center;border:1px solid transparent}
nav a:hover{background:rgba(255,255,255,.055)}
nav a.active{background:var(--teal);border-color:rgba(159,224,216,.12);box-shadow:inset 3px 0 0 var(--aqua-soft)}
.nav-disabled{opacity:.52;color:#B8C4CE}
.nav-disabled small{font-size:11px;color:#B8C4CE}
.release{position:relative;z-index:1;margin-top:auto;padding:15px 10px 2px;color:#C3CDD3;font-size:12px;border-top:1px solid rgba(255,255,255,.08)}
.release strong{color:var(--aqua-soft)}

.main{min-width:0;background:var(--page)}
.topbar{background:#fff;border-bottom:1px solid #E1E7EB;padding:18px 30px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20}
.topbar h1{margin:0;color:var(--navy);font-size:23px}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
.user-menu{display:flex;align-items:center;gap:16px;color:var(--text)}
.user-pill{background:#EDF2F3;border:1px solid #D5DFE1;border-radius:999px;padding:8px 12px;font-size:13px;color:var(--navy)}
.link-btn{border:0;background:none;color:var(--danger);cursor:pointer;padding:8px 2px}
.content{padding:30px;max-width:1500px;margin:auto}

.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 55%,var(--teal) 100%);color:#fff;padding:31px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;left:-70px;bottom:-120px;width:410px;height:380px;background:url('../img/naas-pattern.svg') center/contain no-repeat;opacity:.055;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero h2{font-size:29px;margin:5px 0;color:#fff}
.hero p{max-width:760px;color:#E6EEEE}
.eyebrow{color:var(--gold);font-weight:700;font-size:12px;letter-spacing:.04em}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0}
.stat{background:#fff;border:1px solid var(--card-line);border-radius:16px;padding:20px;box-shadow:var(--shadow-soft)}
.stat span{display:block;color:var(--muted);font-size:13px}
.stat strong{display:block;font-size:28px;margin-top:12px;color:var(--navy)}
.status-ok{color:var(--success)!important}
.status-warning{color:var(--warning)!important}
.status-danger{color:var(--danger)!important}
.status-info{color:var(--info)!important}

.panel{background:#fff;border:1px solid var(--card-line);border-radius:16px;padding:22px;box-shadow:var(--shadow-soft)}
.panel-head,.page-actions,.form-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.panel-head h3,.form-heading h2{margin:0;color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:11px 18px;cursor:pointer;font-weight:700}
.primary{background:var(--aqua);color:#fff;box-shadow:0 7px 18px rgba(31,166,168,.18)}
.primary:hover{background:var(--aqua-hover)}
.primary:active{background:var(--aqua-active)}
.secondary{background:var(--teal);color:#fff}
.secondary:hover{background:#083E43}
.gold{background:var(--gold);color:#fff}
.gold:hover{background:var(--gold-hover)}
.neutral{background:#EDF2F3;color:var(--navy);border:1px solid #D5DFE1}
.full{width:100%}

.table-wrap{overflow:auto;border:1px solid var(--card-line);border-radius:12px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{text-align:right;padding:14px;border-bottom:1px solid #E7EDEF;white-space:nowrap}
th{font-size:12px;color:var(--muted);background:#F7FAFA}
tr:last-child td{border-bottom:0}
.badge{display:inline-flex;padding:5px 9px;border-radius:99px;background:#E7F7F6;color:var(--teal);font-size:12px}
.badge.draft{background:#EEF1F3;color:#65717A}
.badge.success{background:var(--success-bg);color:var(--success)}
.badge.warning{background:var(--warning-bg);color:#9A6815}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.empty{text-align:center;padding:48px 20px}
.empty p,.muted{color:var(--muted)}

.grid{display:grid;gap:17px}.grid.two{grid-template-columns:repeat(2,1fr)}
label{display:grid;gap:8px;font-size:13px;font-weight:700;color:var(--navy)}
input,select,textarea{width:100%;border:1px solid #CAD5DB;border-radius:9px;padding:12px;background:#fff;color:var(--navy);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(31,166,168,.12)}
.form-panel{max-width:950px}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.alert{border-radius:10px;padding:13px 15px;margin-bottom:16px;border:1px solid transparent}
.alert.success{background:var(--success-bg);color:var(--success);border-color:#CDE9DA}
.alert.error{background:var(--danger-bg);color:var(--danger);border-color:#F5D3D6}
.alert.warning{background:var(--warning-bg);color:#8F6318;border-color:#F5E3BC}

.guest-page{background:var(--navy-dark)}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.12fr .88fr}
.login-visual{position:relative;overflow:hidden;padding:58px;background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 55%,var(--teal) 100%);color:#fff;display:flex;flex-direction:column}
.login-visual::before{content:"";position:absolute;inset:auto -90px -70px auto;width:520px;height:480px;background:url('../img/naas-pattern.svg') center/contain no-repeat;opacity:.07;pointer-events:none}
.login-brand{position:relative;z-index:1}
.login-brand img{display:block;width:min(460px,92%);height:235px;object-fit:contain;object-position:center}
.visual-copy{position:relative;z-index:1;margin-top:auto;max-width:680px}
.visual-copy h2{font-size:42px;margin:0 0 12px;color:#fff}
.visual-copy p{font-size:18px;line-height:1.8;color:#DCE8E8}
.visual-accent{width:72px;height:3px;background:linear-gradient(90deg,var(--gold),var(--sand));margin-bottom:20px;border-radius:4px}
.login-card{background:var(--off-white);padding:55px;display:flex;flex-direction:column;justify-content:center;gap:25px}
.login-card-inner{width:min(470px,100%);margin-inline:auto;background:#fff;border:1px solid var(--card-line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.login-card h2{font-size:30px;margin:0 0 8px;color:var(--navy)}
.login-card form{display:grid;gap:18px;margin-top:24px}
.login-note{display:flex;gap:8px;align-items:center;margin-top:20px;color:var(--muted);font-size:12px}
.login-note::before{content:"";width:7px;height:7px;background:var(--aqua);border-radius:50%}

.install-page{background:#EDF2F3;padding:35px}.install-card{max-width:980px;margin:auto;background:#fff;padding:32px;border-radius:18px;box-shadow:var(--shadow)}
.check{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--card-line)}
.ok{color:var(--success)}.bad{color:var(--danger)}

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}.sidebar{display:none}.stat-grid{grid-template-columns:repeat(2,1fr)}
  .login-wrap{grid-template-columns:1fr}.login-visual{display:none}.grid.two{grid-template-columns:1fr}
  .content{padding:18px}.topbar{padding:16px 18px}.hero{align-items:flex-start;gap:18px;flex-direction:column}
}
@media(max-width:560px){
  .stat-grid{grid-template-columns:1fr}.login-card{padding:22px}.login-card-inner{padding:25px 20px}.user-menu .user-pill{display:none}
  .page-actions{align-items:flex-start;gap:12px}.page-actions,.form-heading{flex-direction:column}
}