
:root{
  --bg:#030811;
  --panel:#07111c;
  --panel2:#0b1623;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --text:#f6f8fb;
  --muted:#98a4b4;
  --green:#8dd81f;
  --green2:#a8ee42;
  --danger:#ff8f8f;
  --shadow:0 24px 70px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 50% -10%,#0a2a4e 0%,#030811 34%,#02050a 100%);color:var(--text)}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 12%,rgba(141,216,31,.12),transparent 22rem),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:auto,72px 72px,72px 72px;pointer-events:none}
button,input,textarea,select{font:inherit}
button,a{color:inherit}
.is-hidden{display:none!important}
.splash{position:fixed;inset:0;display:grid;place-items:center;background:#030811;z-index:10;transition:opacity .55s ease}
@media (prefers-color-scheme: light){.splash{background:#f7f8f4}}
.splash-logo{width:118px;filter:drop-shadow(0 16px 34px rgba(141,216,31,.24));animation:pulseIn 1.05s ease both}
@keyframes pulseIn{0%{opacity:0;transform:scale(.86)}100%{opacity:1;transform:scale(1)}}
.app-shell{min-height:100vh;position:relative;z-index:1}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:28px}
.login-card{width:min(500px,100%);padding:34px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(7,17,28,.92),rgba(4,10,18,.88));box-shadow:var(--shadow);border-radius:28px}
.login-logo{height:58px;width:auto;margin-bottom:34px}
.eyebrow{text-transform:uppercase;color:var(--green);letter-spacing:.16em;font-weight:800;font-size:.78rem;margin:0 0 12px}
h1,h2,h3,p{margin-top:0}
.login-card h1{font-size:2.5rem;line-height:1.02;letter-spacing:-.05em;font-weight:400;margin-bottom:14px}
.muted{color:var(--muted)}
.form{display:grid;gap:14px}
.form label{display:grid;gap:8px;color:#d9e1ec;font-size:.92rem}
input,select,textarea{width:100%;background:#07111d;border:1px solid var(--line);color:#fff;padding:15px 16px;border-radius:14px;outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(141,216,31,.72);box-shadow:0 0 0 4px rgba(141,216,31,.08)}
textarea{min-height:130px;resize:vertical}
.check-row{display:flex!important;align-items:flex-start;gap:10px;color:var(--muted)!important}
.check-row input{width:auto;margin-top:4px}
.btn{border:1px solid var(--line);border-radius:16px;min-height:52px;padding:0 18px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:.18s ease;background:transparent}
.btn:hover{transform:translateY(-1px);border-color:var(--green)}
.btn.primary{background:var(--green);color:#071008;border-color:var(--green)}
.btn.secondary{background:rgba(255,255,255,.04)}
.btn.ghost{background:transparent;color:var(--muted)}
.status-text{min-height:22px;color:var(--green);font-size:.92rem;margin:0}
.status-text.error{color:var(--danger)}
.dashboard{min-height:100vh;display:grid;grid-template-columns:290px 1fr}
.sidebar{min-height:100vh;border-right:1px solid var(--line-soft);background:rgba(2,7,13,.76);backdrop-filter:blur(16px);padding:22px;position:sticky;top:0}
.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.brand img{height:46px;width:auto}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer}
.nav-list{display:grid;gap:8px}
.nav-list button{min-height:48px;border:1px solid transparent;background:transparent;color:#d7e0eb;border-radius:15px;text-align:left;padding:0 16px;cursor:pointer}
.nav-list button:hover,.nav-list button.active{background:rgba(141,216,31,.1);border-color:rgba(141,216,31,.24);color:var(--green2)}
.phone-frame{padding:28px;width:min(980px,100%);margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.topbar h2{font-size:2.4rem;line-height:1;margin:0;letter-spacing:-.05em;font-weight:400}
.call-btn{border:1px solid var(--green);background:rgba(141,216,31,.1);color:var(--green);border-radius:999px;padding:12px 22px;font-weight:800;cursor:pointer}
.panel{display:none}
.active-panel{display:block}
.welcome-card{min-height:220px;border:1px solid var(--line);border-radius:30px;padding:28px;background:linear-gradient(135deg,rgba(141,216,31,.12),rgba(7,17,28,.88)),radial-gradient(circle at 82% 10%,rgba(141,216,31,.26),transparent 13rem);box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:20px}
.welcome-card h1{font-size:3.2rem;line-height:1;letter-spacing:-.06em;font-weight:350;max-width:650px;margin:0}
.pulse{width:18px;height:18px;border-radius:50%;background:var(--green);box-shadow:0 0 0 10px rgba(141,216,31,.12)}
.status-grid,.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.status-grid article,.admin-grid article{border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.035)}
.status-grid span,.admin-grid span{display:block;color:var(--muted);font-size:.86rem;margin-bottom:8px}
.status-grid strong,.admin-grid strong{font-size:1.12rem}
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.quick-actions button{min-height:95px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#091523,#050b13);color:#fff;font-weight:800;cursor:pointer;text-align:left;padding:18px}
.notice,.remote-options article,.doc-list article,.admin-list article{border:1px solid var(--line);border-radius:22px;padding:20px;background:rgba(255,255,255,.035)}
.notice h3{margin-bottom:8px}
.stack{max-width:720px}
.remote-options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 24px}
.remote-options strong,.remote-options span{display:block}
.remote-options strong{margin-bottom:8px}
.remote-options span{color:var(--muted)}
.timeline{display:grid;gap:16px;max-width:760px}
.timeline div{position:relative;border-left:2px solid rgba(141,216,31,.45);padding:0 0 12px 24px}
.timeline span{position:absolute;left:-9px;top:0;width:16px;height:16px;border-radius:50%;background:var(--green)}
.timeline p{color:var(--muted)}
.doc-list,.admin-list{display:grid;gap:12px;margin-top:18px}
.doc-list span{display:block;color:var(--muted);margin-top:5px}
.contact-actions{display:grid;gap:12px;max-width:560px}
.contact-actions a{border:1px solid var(--line);border-radius:20px;padding:18px 20px;text-decoration:none;background:rgba(255,255,255,.035);font-weight:800}
@media(max-width:920px){
  .dashboard{grid-template-columns:1fr}
  .sidebar{position:relative;min-height:auto;border-right:0;border-bottom:1px solid var(--line-soft)}
  .brand{margin-bottom:18px}
  .nav-list{grid-template-columns:repeat(4,1fr);overflow:auto}
  .nav-list button{text-align:center;white-space:nowrap}
  .phone-frame{padding:20px}
  .status-grid,.quick-actions{grid-template-columns:repeat(2,1fr)}
  .welcome-card h1{font-size:2.3rem}
}
@media(max-width:560px){
  .login-card{padding:24px;border-radius:22px}
  .login-card h1{font-size:2rem}
  .nav-list{grid-template-columns:repeat(2,1fr)}
  .status-grid,.quick-actions,.remote-options,.admin-grid{grid-template-columns:1fr}
  .topbar h2{font-size:1.9rem}
  .welcome-card{min-height:180px}
}

.small-note{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45;
  margin:2px 0 0;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
}
