:root{
  --ink:#0B1220; --ink2:#101A2E; --ink3:#16223B; --paper:#F6F3EC;
  --gold:#E8A33D; --wave:#5BA3A3; --line:rgba(246,243,236,0.14); --muted:#9AA5B8;
  --err:#e08a6a; --ok:#7fbf8f;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--ink); color:var(--paper); font-family:'Inter',-apple-system,sans-serif; line-height:1.5;}
h1,h2,h3{font-family:'Fraunces','Georgia',serif; font-weight:600; margin:0 0 .4em;}
button{font-family:inherit;}
.hidden{display:none !important;}
a{color:inherit;}

#gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.gate-card{width:100%; max-width:420px; background:var(--ink2); border:1px solid var(--line); border-radius:8px; padding:36px;}
.gate-card h1{font-size:1.4rem; margin-bottom:6px;}
.gate-card p{color:var(--muted); font-size:.9rem; margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%; padding:11px 13px; border-radius:4px; border:1px solid var(--line);
  background:var(--ink); color:var(--paper); font-size:.92rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:4px; font-weight:600; font-size:.9rem; border:1px solid transparent; cursor:pointer; transition:.15s ease;}
.btn-gold{background:var(--gold); color:#20140a;}
.btn-gold:hover{background:#f0b158;}
.btn-line{border-color:var(--line); background:transparent; color:var(--paper);}
.btn-line:hover{border-color:var(--gold);}
.btn-danger{border-color:var(--err); color:var(--err); background:transparent;}
.btn-danger:hover{background:rgba(224,138,106,0.1);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.msg{font-size:.85rem; margin-top:12px; min-height:1.2em;}
.msg.err{color:var(--err);} .msg.ok{color:var(--ok);}
.gate-alt{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); text-align:center;}

#app{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}
aside{background:var(--ink2); border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column;}
.brand{font-family:'Fraunces',serif; font-size:1.1rem; margin-bottom:26px; display:flex; align-items:center; gap:8px;}
nav.side{display:flex; flex-direction:column; gap:2px;}
nav.side button{text-align:left; background:none; border:none; color:var(--muted); padding:10px 12px; border-radius:4px; font-size:.9rem; cursor:pointer;}
nav.side button:hover{background:var(--ink3); color:var(--paper);}
nav.side button.active{background:var(--ink3); color:var(--paper); font-weight:600;}
.plan-badge{margin-top:auto; font-size:.75rem; color:var(--muted); padding:12px; border:1px solid var(--line); border-radius:4px;}
.plan-badge b{color:var(--gold);}
.user-row{font-size:.78rem; color:var(--muted); padding:0 0 14px; border-bottom:1px solid var(--line); margin-bottom:14px; word-break:break-all;}
.logout-link{color:var(--wave); cursor:pointer; font-size:.78rem; margin-top:6px; display:inline-block;}

main{padding:32px 40px; max-width:960px;}
.view{display:none;}
.view.active{display:block;}
.view-head{margin-bottom:26px;}
.view-head p{color:var(--muted); font-size:.92rem; margin-top:4px;}

.panel{background:var(--ink2); border:1px solid var(--line); border-radius:8px; padding:26px; margin-bottom:20px;}
.row{display:flex; gap:14px; flex-wrap:wrap;}
.row > *{flex:1; min-width:180px;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.chip{display:flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:20px; font-size:.85rem; cursor:pointer; user-select:none; color:var(--muted);}
.chip.on{border-color:var(--gold); color:var(--paper); background:rgba(232,163,61,0.08);}
.chip.disabled{opacity:.4; cursor:not-allowed;}
.chip input{display:none;}

.status-line{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); margin-top:8px;}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0;}
.dot.ok{background:var(--ok);} .dot.err{background:var(--err);}

.result-card{background:var(--ink3); border:1px solid var(--line); border-radius:6px; padding:18px; margin-bottom:14px;}
.result-card .label{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;}
.result-card pre{white-space:pre-wrap; font-family:inherit; font-size:.92rem; margin:0; color:var(--paper);}
.copy-btn{background:none; border:1px solid var(--line); color:var(--muted); border-radius:3px; padding:4px 10px; font-size:.72rem; cursor:pointer;}
.copy-btn:hover{border-color:var(--gold); color:var(--paper);}

table{width:100%; border-collapse:collapse; font-size:.86rem;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
th{color:var(--muted); font-weight:600; font-size:.76rem; text-transform:uppercase;}
td.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem;}

.diag{background:var(--ink); border:1px dashed var(--line); border-radius:6px; padding:14px; font-size:.8rem; color:var(--muted); white-space:pre-wrap; margin-top:10px;}
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:600;}
.badge-free{background:rgba(154,165,184,.15); color:var(--muted);}
.badge-starter{background:rgba(91,163,163,.15); color:var(--wave);}
.badge-enterprise{background:rgba(232,163,61,.15); color:var(--gold);}
.badge-ok{background:rgba(127,191,143,.15); color:var(--ok);}
.badge-err{background:rgba(224,138,106,.15); color:var(--err);}

@media (max-width:760px){
  #app{grid-template-columns:1fr;}
  aside{flex-direction:row; overflow-x:auto;}
  nav.side{flex-direction:row;}
  main{padding:22px;}
}