/* ===== Nova Security Operations — portal styles ===== */
body.portal{min-height:100vh; display:flex; flex-direction:column; background:
  radial-gradient(900px 520px at 100% -10%, rgba(124,95,224,.14), transparent 60%),
  radial-gradient(760px 520px at -10% 8%, rgba(179,158,240,.08), transparent 55%),
  var(--bg)}
.portal .container{max-width:1080px}

/* header */
.phead{position:sticky; top:0; z-index:50; background:rgba(13,15,22,.82); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.28)}
.phead__in{display:flex; align-items:center; gap:1rem; padding:.7rem 22px}
.pnav{display:flex; align-items:center; gap:1.2rem; margin-left:auto; font-size:.92rem; font-weight:500}
.pnav a{color:var(--muted); transition:color .2s}
.pnav a:hover{color:var(--txt)}
.pnav-admin{color:var(--accent)!important; font-weight:700}
.pnav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line2); color:var(--txt); border-radius:8px; padding:.3rem .6rem; font-size:1.1rem; cursor:pointer}
.btn--sm{padding:.45rem .9rem; font-size:.85rem}

.pmain{flex:1; padding:2.2rem 0 3rem}
.pfoot{border-top:1px solid var(--line); padding:1.4rem 0; color:var(--muted2); font-size:.85rem; text-align:center}
.pfoot a{color:var(--accent)}

/* flash */
.flash{border-radius:10px; padding:.8rem 1rem; margin-bottom:1.2rem; font-size:.92rem; border:1px solid}
.flash--ok{background:rgba(95,211,154,.1); border-color:rgba(95,211,154,.4); color:#bdeccf}
.flash--err{background:rgba(255,107,138,.1); border-color:rgba(255,107,138,.4); color:#ffc2cf}
.flash--info{background:rgba(124,95,224,.1); border-color:rgba(124,95,224,.4); color:#d8ccfb}

/* admin sub-nav */
.adminbar{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.6rem; padding-bottom:1rem; border-bottom:1px solid var(--line)}
.adminbar a{font-family:"Sora",sans-serif; font-size:.85rem; font-weight:600; color:var(--muted); border:1px solid var(--line2); border-radius:8px; padding:.45rem .85rem; transition:.15s}
.adminbar a:hover{border-color:var(--accent); color:var(--txt)}
.adminbar a.on{background:var(--grad); color:var(--btn-txt); border-color:transparent}

/* page heading */
.phdr{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem}
.phdr h1{font-family:"Sora",sans-serif; font-size:1.7rem; letter-spacing:-.01em}
.phdr .sub{color:var(--muted); font-size:.95rem; width:100%}
.phdr .spacer{margin-left:auto}

/* cards */
.pcard{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:16px; padding:1.6rem; margin-bottom:1.2rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 16px 40px rgba(0,0,0,.28)}
.pcard h2,.pcard h3{font-family:"Sora",sans-serif; margin-bottom:.4rem}
.pcard h2{font-size:1.15rem}
.pcard h3{font-size:1rem}
.pcard .muted{color:var(--muted); font-size:.9rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}

/* auth */
.auth-wrap{max-width:430px; margin:3rem auto 2rem}
.auth-wrap .pcard{padding:2rem}
.auth-logo{display:flex; flex-direction:column; align-items:center; gap:.55rem; margin-bottom:1.5rem; text-align:center}
.auth-logo .mark{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,#8d6ff1,#6234c6); box-shadow:0 12px 28px rgba(108,70,200,.45)}
.auth-logo .mark svg{width:30px; height:30px}
.auth-logo b{font-family:"Sora",sans-serif; font-weight:800; font-size:1.05rem}
.auth-logo .tag{color:var(--muted2); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}
.auth-wrap h1{font-family:"Sora",sans-serif; font-size:1.5rem; margin-bottom:.3rem}
.auth-wrap .muted{color:var(--muted); font-size:.92rem; margin-bottom:1.3rem}
.auth-alt{text-align:center; color:var(--muted); font-size:.9rem; margin-top:1.1rem}
.auth-alt a{color:var(--accent); font-weight:600}

/* forms */
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem}
.field label{font-size:.85rem; color:var(--muted); font-weight:600}
.field .req{color:#ff8aa1}
.field .opt{color:var(--muted2); font-weight:400; font-size:.78rem}
.field input,.field select,.field textarea{background:#0f111a; border:1px solid var(--line2); color:var(--txt);
  border-radius:10px; padding:.7rem .85rem; font:inherit; font-size:.93rem; width:100%; transition:border-color .2s, box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(179,158,240,.18)}
.field textarea{resize:vertical; min-height:84px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.help{color:var(--muted2); font-size:.78rem}
.form-section{border-top:1px solid var(--line); margin:1.4rem 0 1rem; padding-top:1.2rem}
.form-section h3{font-family:"Sora",sans-serif; font-size:1rem; margin-bottom:.2rem}
.form-section .help{margin-bottom:.9rem}

/* checkbox / radio grids */
.optgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem}
.optgrid label{display:flex; align-items:center; gap:.55rem; background:#161922; border:1px solid var(--line);
  border-radius:9px; padding:.55rem .7rem; font-size:.85rem; color:var(--muted); cursor:pointer; transition:.15s}
.optgrid label:hover{border-color:var(--line2)}
.optgrid input{accent-color:var(--accent2); width:16px; height:16px}
.optgrid input:checked + span{color:var(--txt)}
.radio-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:.4rem}
.radio-cards label{display:block; background:#161922; border:1px solid var(--line); border-radius:11px; padding:1rem; cursor:pointer; transition:.15s}
.radio-cards label:hover{border-color:var(--line2)}
.radio-cards input{position:absolute; opacity:0}
.radio-cards input:checked + .rc{outline:2px solid var(--accent)}
.rc b{display:block; font-family:"Sora",sans-serif; font-size:.95rem; margin-bottom:.2rem}
.rc span{color:var(--muted2); font-size:.8rem}

/* tables */
.ptable{width:100%; border-collapse:collapse; font-size:.9rem}
.ptable th{text-align:left; color:var(--muted2); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:.6rem .7rem; border-bottom:1px solid var(--line)}
.ptable td{padding:.7rem .7rem; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top}
.ptable tr:hover td{background:#161922}
.ptable a{color:var(--accent); font-weight:600}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px}

/* status badges */
.sbadge{display:inline-block; font-family:"Sora",sans-serif; font-size:.68rem; font-weight:700; padding:.18rem .5rem; border-radius:999px; text-transform:capitalize}
.sbadge--ok{color:#bdeccf; background:rgba(95,211,154,.14); border:1px solid rgba(95,211,154,.35)}
.sbadge--info{color:#d3c4f7; background:rgba(124,95,224,.16); border:1px solid rgba(124,95,224,.35)}
.sbadge--warn{color:#f0d28a; background:rgba(232,180,74,.14); border:1px solid rgba(232,180,74,.35)}
.sbadge--bad{color:#ffb0c0; background:rgba(255,107,138,.14); border:1px solid rgba(255,107,138,.35)}
.sbadge--muted{color:var(--muted); background:#22202c; border:1px solid var(--line2)}

/* stat tiles */
.pstats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem}
.pstat{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:12px; padding:1.1rem}
.pstat b{display:block; font-family:"Sora",sans-serif; font-size:1.9rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.pstat span{color:var(--muted); font-size:.82rem}

/* product/plan cards */
.plan{background:#161922; border:1px solid var(--line); border-radius:12px; padding:1.3rem}
.plan h3{font-family:"Sora",sans-serif; font-size:1.05rem; margin-bottom:.3rem}
.plan p{color:var(--muted); font-size:.86rem; margin-bottom:1rem}

/* thread (support) */
.thread{display:grid; gap:.8rem; margin:1rem 0}
.msg{border:1px solid var(--line); border-radius:11px; padding:.9rem 1rem; max-width:80%}
.msg .meta{font-size:.74rem; color:var(--muted2); margin-bottom:.35rem}
.msg .body{color:var(--txt); font-size:.92rem; white-space:pre-wrap; line-height:1.5}
.msg--user{background:#161922; justify-self:start}
.msg--admin{background:rgba(124,95,224,.1); border-color:rgba(124,95,224,.35); justify-self:end}

/* detail list */
.kvlist{display:grid; gap:.5rem; font-size:.9rem}
.kvlist div{display:flex; gap:.6rem}
.kvlist b{color:var(--muted2); min-width:160px; font-weight:600}
.kvlist span{color:var(--txt)}
.lkey{font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:.9rem; letter-spacing:.05em; color:var(--accent);
  background:#0f111a; border:1px solid var(--line2); border-radius:8px; padding:.4rem .65rem; display:inline-block; word-break:break-all}
.chips-list{display:flex; flex-wrap:wrap; gap:.4rem}
.chips-list span{background:#161922; border:1px solid var(--line2); border-radius:999px; padding:.2rem .6rem; font-size:.78rem; color:var(--muted)}

.btn-row{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem}
.inline-form{display:inline}

@media (max-width:820px){
  .grid2,.grid3,.grid4,.field-row,.optgrid,.radio-cards,.pstats{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .pnav-toggle{display:block}
  .pnav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:#11131c; border-bottom:1px solid var(--line); padding:.6rem 22px 1rem}
  .pnav.open{display:flex}
  .pnav a{padding:.7rem 0; border-bottom:1px solid var(--line)}
  .grid2,.grid3,.grid4,.field-row,.optgrid,.radio-cards,.pstats{grid-template-columns:1fr}
  .msg{max-width:100%}
  .kvlist b{min-width:110px}
}