@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --surface-2:#EFEBE2;
  --ink:#14181F; --ink-muted:#5B6472;
  --accent:#1E4FA3; --accent-strong:#163B7D; --accent-2:#D98A2B;
  --line:rgba(20,24,31,0.14); --line-strong:rgba(20,24,31,0.28);
  --ok:#1E7A4C; --error:#B23B2E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10131A; --surface:#181C25; --surface-2:#1F2430;
    --ink:#ECEEF2; --ink-muted:#9AA3B2;
    --accent:#4C86E0; --accent-strong:#7FAAEE; --accent-2:#E7A94C;
    --line:rgba(255,255,255,0.14); --line-strong:rgba(255,255,255,0.28);
    --ok:#5FC48A; --error:#E8796C;
  }
}

*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Public Sans', system-ui, sans-serif;}
h1,h2{font-family:'Archivo', sans-serif; margin:0; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

/* ---------- login ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;}
.login-card{
  width:min(380px, 100%); background:var(--surface); border:1.5px solid var(--line-strong); padding:34px 30px;
}
.login-card .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:12px;}
.login-card h1{font-size:1.4rem; font-weight:800; margin-bottom:6px;}
.login-card .sub{color:var(--ink-muted); font-size:0.92rem; margin-bottom:22px;}
.login-card form{display:flex; flex-direction:column; gap:14px;}
.login-card .error{background:color-mix(in srgb, var(--error) 12%, var(--surface)); border:1px solid var(--error); color:var(--error); padding:10px 12px; font-size:0.88rem; margin-bottom:16px;}
.login-card .back{display:block; margin-top:20px; font-size:0.85rem; color:var(--ink-muted); text-decoration:none;}
.login-card .back:hover{color:var(--ink);}

/* ---------- shared form controls ---------- */
label{display:flex; flex-direction:column; gap:6px; font-size:0.82rem; font-weight:600; color:var(--ink-muted);}
input, textarea{
  font-family:'Public Sans', sans-serif; font-size:0.95rem; color:var(--ink); background:var(--surface-2);
  border:1.5px solid var(--line-strong); padding:10px 12px; outline:none;
}
input:focus-visible, textarea:focus-visible{border-color:var(--accent);}
textarea{resize:vertical; font-family:'Public Sans', sans-serif;}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.92rem;
  padding:11px 18px; border:1.5px solid var(--ink); background:var(--ink); color:var(--bg);
  cursor:pointer; text-decoration:none; align-self:flex-start;
}
.btn-accent{background:var(--accent); border-color:var(--accent);}
.btn-link{background:none; border:none; color:var(--error); font-size:0.85rem; font-weight:600; cursor:pointer; padding:4px 0; text-decoration:underline;}

/* ---------- portal chrome ---------- */
.portal-header{border-bottom:1px solid var(--line); background:var(--surface);}
.portal-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.logo{display:flex; align-items:center; gap:9px; font-family:'Archivo', sans-serif; font-weight:800; font-size:1.1rem; text-decoration:none; color:var(--ink);}
.logo .dot{width:9px; height:9px; background:var(--accent);}
.portal-header nav{display:flex; gap:22px;}
.portal-header nav a{font-size:0.88rem; font-weight:600; color:var(--ink-muted); text-decoration:none;}
.portal-header nav a:hover{color:var(--ink);}
.portal-main{padding:32px 24px 64px;}

.flash{padding:13px 16px; margin-bottom:22px; font-size:0.92rem; font-weight:600; border:1.5px solid var(--ok); background:color-mix(in srgb, var(--ok) 12%, var(--surface)); color:var(--ok);}
.flash-error{border-color:var(--error); background:color-mix(in srgb, var(--error) 12%, var(--surface)); color:var(--error);}

.portal-grid{display:grid; grid-template-columns:300px 1fr; gap:24px; align-items:start;}
@media (max-width:820px){ .portal-grid{grid-template-columns:1fr;} }
.panel{background:var(--surface); border:1.5px solid var(--line-strong); padding:24px;}
.panel h2{font-size:1.05rem; font-weight:800; margin-bottom:16px;}
.panel-wide{grid-column:2;}
@media (max-width:820px){ .panel-wide{grid-column:1;} }
.stacked{display:flex; flex-direction:column; gap:14px;}
.empty{color:var(--ink-muted); font-size:0.92rem;}

.table-wrap{overflow-x:auto; margin-bottom:22px;}
table{width:100%; border-collapse:collapse; font-size:0.9rem;}
th{text-align:left; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); padding:8px 10px; border-bottom:1.5px solid var(--line-strong); white-space:nowrap;}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top;}
.notitie{color:var(--ink-muted); font-size:0.82rem; margin-top:3px;}
.pill{display:inline-block; font-size:0.74rem; font-weight:600; padding:3px 9px; background:var(--surface-2); border:1px solid var(--line-strong); white-space:nowrap;}
.pill-ok{color:var(--ok); border-color:var(--ok);}
.pill-fout{color:var(--error); border-color:var(--error);}

.compose{display:flex; flex-direction:column; gap:14px; padding-top:18px; border-top:1px dashed var(--line-strong);}
.form-note{font-size:0.8rem; color:var(--ink-muted); margin:0;}