/* Account page, premium. Design system in system.css */
.anav { position:sticky; top:0; z-index:40; background:rgba(255,253,244,0.86); backdrop-filter:blur(8px); border-bottom:1.5px solid var(--ink); }
.anav-inner { display:flex; align-items:center; justify-content:space-between; padding:16px var(--s6); }
.anav .brand { display:flex; align-items:center; gap:11px; }
.anav .bname { font-family:var(--font-pixel); font-size:17px; color:var(--text-bright); letter-spacing:0.04em; }

.awrap { max-width:980px; margin:0 auto; padding:var(--s16) var(--s6) var(--s20); }

/* auth card */
.authbox { max-width:420px; margin:0 auto; }
.authbox .mascot { display:flex; justify-content:center; margin-bottom:var(--s6); }
.authbox h1 { font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--text-bright); text-align:center; margin:0 0 6px; }
.authbox .sub { text-align:center; color:var(--text-dim); font-size:15px; margin:0 0 var(--s8); }
.authtabs { display:flex; gap:8px; margin-bottom:var(--s6); }
.authtab { flex:1; text-align:center; font-family:var(--font-mono); font-size:13px; padding:11px; border-radius:10px; cursor:pointer; background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-dim); }
.authtab.active { background:rgba(8,145,178,0.12); border-color:var(--line-strong); color:var(--text-bright); }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:var(--s4); }
.field label { font-family:var(--font-mono); font-size:12px; color:var(--text-dim); letter-spacing:0.04em; }
.field input { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:13px 14px; color:var(--text-bright); font-size:15px; font-family:var(--font-body); outline:none; }
.field input:focus { border-color:var(--line-strong); }
.autherr { color:var(--red-soft); font-size:13px; min-height:18px; margin-bottom:8px; font-family:var(--font-mono); }
.authbox .btn { width:100%; justify-content:center; }
.authfine { text-align:center; color:var(--text-faint); font-family:var(--font-mono); font-size:12px; margin-top:var(--s5); }

/* account view */
.acct-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:var(--s8); }
.acct-head h1 { font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--text-bright); margin:0; }
.acct-head .who { font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin-top:4px; }
.planrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.planbadge { font-family:var(--font-mono); font-size:13px; padding:8px 16px; border-radius:10px; background:rgba(8,145,178,0.12); border:1px solid var(--line-strong); color:#0e7490; letter-spacing:0.04em; }
.planbadge.pro { background:rgba(16,185,129,0.12); border-color:rgba(52,211,153,0.4); color:var(--green-soft); }

.notice { border-radius:12px; padding:14px 16px; margin-bottom:var(--s6); font-size:14px; }
.notice.ok { background:rgba(16,185,129,0.10); border:1px solid rgba(52,211,153,0.3); color:var(--green-soft); }
.notice.info { background:rgba(244,183,64,0.08); border:1px solid rgba(244,183,64,0.28); color:var(--amber-soft); }

.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s4); }
.pcard { display:flex; flex-direction:column; gap:16px; }
.pcard.current { border-color:rgba(52,211,153,0.45); box-shadow:0 0 0 1px rgba(52,211,153,0.2); }
.pcard.popular { border-color:rgba(8,145,178,0.4); }
.pname { font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; color:#0e7490; }
.pname.g { color:var(--green-soft); }
.pprice { display:flex; align-items:baseline; gap:4px; }
.pprice .amt { font-family:var(--font-display); font-weight:700; font-size:42px; color:var(--text-bright); }
.pprice .per { font-family:var(--font-mono); font-size:13px; color:var(--text-dim); }
.pfeats { display:flex; flex-direction:column; gap:9px; flex:1; font-size:14px; color:var(--text); }
.pfeats div { display:flex; gap:9px; } .pfeats .ck { color:var(--green-soft); }
@media (max-width:760px){ .pgrid { grid-template-columns:1fr; } }

/* sentinel: monitoring + alerts */
.monsec { margin-top:var(--s10); }
.monrow { display:flex; align-items:center; gap:14px; padding:14px 16px; flex-wrap:wrap; }
.monrow + .monrow { margin-top:10px; }
.monrow .mhost { font-family:var(--font-mono); font-size:14.5px; color:var(--text-bright); font-weight:600; }
.monrow .mscore { font-family:var(--font-mono); font-size:13px; }
.monrow .mwhen { font-size:12px; color:var(--text-faint); }
.monrow .mspace { flex:1; }
.monrow .btn { padding:8px 12px; font-size:12px; }
.trendline { display:inline-flex; align-items:flex-end; gap:2px; height:22px; }
.trendline i { width:5px; border-radius:2px; background:rgba(8,145,178,0.45); display:inline-block; }
.alertrow { display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--line-2); font-size:13.5px; color:var(--text); align-items:baseline; }
.alertrow:first-child { border-top:none; }
.alertrow .aw { color:var(--amber-soft); } .alertrow .ag { color:var(--green-soft); } .alertrow .ai { color:var(--text-dim); }
.alertrow .at { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-left:auto; white-space:nowrap; }
.monempty { color:var(--text-dim); font-size:14px; padding:6px 0; }

/* reputation sentinel: mentions feed */
.mentrow { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line-2); align-items:flex-start; }
.mentrow:first-of-type { border-top:none; }
.mdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.mdot.pos { background:var(--green-soft); box-shadow:0 0 6px rgba(52,211,153,0.5); }
.mdot.neg { background:var(--red-soft); box-shadow:0 0 6px rgba(239,68,68,0.4); }
.mdot.neu { background:rgba(199,208,222,0.4); }
.mbody { flex:1; min-width:0; }
.mtitle { font-size:13.5px; color:var(--text-bright); text-decoration:none; font-weight:600; }
.mtitle:hover { color:#0e7490; }
.mmeta { font-size:11px; color:var(--text-faint); margin-top:4px; line-height:1.6; }
.mnote { color:var(--text-dim); }
.mentrow .mwhen { font-size:11px; color:var(--text-faint); white-space:nowrap; }
.mdemo { font-size:11px; color:var(--amber-soft); margin-bottom:10px; }