:root{
  --bg:#061b14; --card:#0b2a1f; --line:rgba(255,255,255,.14);
  --text:#eafff1; --muted:rgba(234,255,241,.72);
  --gold:#facc15; --green:#22c55e; --bad:#fb7185;
  --r:18px; --shadow:0 18px 55px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(250,204,21,.14), transparent 55%),
    var(--bg);
  color:var(--text);
  padding:18px;
}

#guard_status{
  position: fixed;
  top: 16px; right: 16px;
  padding: 10px 14px;
  background: rgba(0,0,0,.88);
  color:#fff;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,.10);
}

.app{display:none;}
html.access-ok .app{display:block;}

.wrap{max-width:860px; margin:0 auto; padding:10px 0 44px;}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px;
  box-shadow:var(--shadow);
}

h1{
  margin:0 0 6px;
  font-size:28px;
  letter-spacing:.2px;
  background:linear-gradient(135deg, var(--green), var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:1000;
}

p{margin:0 0 14px; color:var(--muted); line-height:1.55; font-size:15px; font-weight:850;}

.row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:720px){ .row{grid-template-columns:1fr;} }

label{
  display:block;
  font-size:12px;
  font-weight:950;
  color:rgba(234,255,241,.85);
  margin:8px 0 6px;
}

input, textarea, select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  padding:12px 12px;
  color:var(--text);
  outline:none;
  font-weight:900;
}

textarea{min-height:90px; resize:vertical; font-weight:850;}

input:focus, textarea:focus, select:focus{
  border-color:rgba(250,204,21,.40);
  box-shadow:0 0 0 3px rgba(250,204,21,.10);
}

.hr{height:1px; background:rgba(255,255,255,.12); margin:16px 0;}

.actions{display:flex; gap:10px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 16px;
  border-radius:14px;
  font-weight:1000;
  text-decoration:none;
  border:0;
  cursor:pointer;
  font-size:15px;
  transition:all .2s;
  flex:1;
  min-width:220px;
}

.primary{
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.85));
  color:#042012;
}
.secondary{
  background:rgba(250,204,21,.14);
  border:1px solid rgba(250,204,21,.25);
  color:var(--text);
}
.ghost{
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:var(--text);
}
.primary:hover{transform:translateY(-2px);}

.note{
  margin-top:14px;
  font-size:13px;
  color:rgba(234,255,241,.76);
  line-height:1.55;
  padding:12px;
  background:rgba(0,0,0,.20);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  font-weight:850;
}

.ok{color:#bbf7d0; font-weight:1000}
.bad{color:#fecaca; font-weight:1000}