:root{
  --bg:#071512; --panel:#0d2420; --card:#12332d; --line:#1f4a42;
  --brand:#14b8a6; --brand2:#0f766e; --text:#e7fff9; --muted:#8fb5ad;
  --ok:#34d399; --danger:#f87171; --warn:#fbbf24;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:
  radial-gradient(1000px 500px at 100% -10%, rgba(20,184,166,.16), transparent 45%),
  linear-gradient(160deg,#071512,#0a1c18 45%,#071512);color:var(--text);min-height:100vh}
a{color:#99f6e4;text-decoration:none}
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,#0b3f3a,#0a2a26);padding:1.25rem;border-left:1px solid var(--line);display:flex;flex-direction:column}
.brand{font-weight:800;font-size:1.25rem}
.sub{color:var(--muted);font-size:.85rem;margin:.2rem 0 1.2rem}
.side nav{flex:1;display:flex;flex-direction:column;gap:.3rem}
.side nav a{padding:.7rem .85rem;border-radius:12px;color:#dffaf5;display:flex;flex-direction:column;gap:.15rem}
.side nav a span{color:var(--muted);font-size:.75rem}
.side nav a.active,.side nav a:hover{background:rgba(20,184,166,.18)}
.logout button{width:100%;border:0;border-radius:12px;padding:.7rem;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;font:inherit}
.main{padding:1.4rem}
.hero{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1.1rem}
.hero h1{margin:0;font-size:1.55rem}
.hero p{margin:.3rem 0 0;color:var(--muted)}
.card{background:linear-gradient(180deg,rgba(18,51,45,.96),rgba(13,36,32,.92));border:1px solid var(--line);border-radius:18px;padding:1.1rem;margin-bottom:1rem;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:1rem;border-radius:16px;border:1px solid var(--line);background:rgba(4,21,18,.45)}
.stat b{display:block;font-size:1.6rem;margin-top:.35rem}
label{display:block;margin:.55rem 0 .25rem;color:var(--muted);font-size:.9rem}
input,select,textarea,button,.btn{font:inherit}
input,select,textarea{width:100%;padding:.7rem .8rem;border-radius:12px;border:1px solid var(--line);background:#0a1f1b;color:var(--text)}
.btn,button.btn{display:inline-block;border:0;border-radius:12px;padding:.65rem 1rem;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#042f2e;font-weight:700;cursor:pointer}
.btn.secondary{background:#1e293b;color:#e2e8f0}
.btn.danger{background:#7f1d1d;color:#fecaca}
.alert{padding:.85rem 1rem;border-radius:12px;margin-bottom:1rem}
.alert.ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.35);color:var(--ok)}
.alert.err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:var(--danger)}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;background:rgba(20,184,166,.15);color:#99f6e4;font-size:.8rem}
.badge.warn{background:rgba(251,191,36,.15);color:#fde68a}
.badge.danger{background:rgba(248,113,113,.15);color:#fecaca}
table{width:100%;border-collapse:collapse}
th,td{padding:.6rem;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.code{font-family:Consolas,monospace;background:#041512;padding:.7rem .9rem;border-radius:12px;border:1px dashed var(--line);word-break:break-all}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem}
.auth-card{width:min(440px,100%)}
.muted{color:var(--muted)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;align-items:center}
.secure-list{margin:.4rem 0 0;padding-inline-start:1.2rem;color:var(--muted);line-height:1.8}
.check{display:flex;align-items:center;gap:.5rem;margin-top:.8rem}
.card.nested{background:rgba(4,21,18,.4);margin-bottom:0}
.logout small{display:block;opacity:.7;font-weight:400;margin-top:.2rem}
h2,h3{margin-top:0}
.lang-switch{display:flex;gap:.35rem;margin:0 0 1rem}
.lang-switch a{flex:1;text-align:center;padding:.45rem .5rem;border-radius:10px;border:1px solid var(--line);color:var(--muted);font-size:.85rem;background:rgba(0,0,0,.18)}
.lang-switch a.active,.lang-switch a:hover{background:rgba(20,184,166,.2);color:#dffaf5;border-color:rgba(20,184,166,.45)}
.lang-switch-top{position:fixed;top:1rem;inset-inline-end:1rem;z-index:20;margin:0;background:rgba(7,21,18,.85);padding:.35rem;border-radius:12px;border:1px solid var(--line);backdrop-filter:blur(8px)}
html[dir="ltr"] th,html[dir="ltr"] td{text-align:left}
html[dir="ltr"] .side{border-left:0;border-right:1px solid var(--line)}
@media(max-width:980px){
  .shell{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .side{border-left:0;border-right:0;border-bottom:1px solid var(--line)}
}