:root{
  --sc-black:#0B0B0B;
  --sc-dark:#1C1C1C;
  --sc-orange:#F26A21;
  --sc-orange-hover:#E05F1D;
  --sc-white:#FFFFFF;
  --sc-light:#F4F4F4;
  --sc-border:#EAEAEA;
  --sc-text:#0B0B0B;
  --sc-muted:#555;
  --sc-radius:14px;
  --sc-font: Inter, Manrope, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.sc-portal{ font-family: var(--sc-font); background: var(--sc-light); border-radius: var(--sc-radius); overflow:hidden; }
.sc-portal-header{ background: var(--sc-black); color: var(--sc-white); display:flex; justify-content:space-between; align-items:center; padding: 18px 20px; }
.sc-portal-title{ font-size: 22px; font-weight: 900; letter-spacing: -.3px; }
.sc-portal-title span{ color: var(--sc-orange); }
.sc-portal-user{ font-weight: 700; opacity: .95; }

.sc-portal-nav{ display:flex; gap:10px; padding: 12px 16px; background: #111; border-bottom: 1px solid #1d1d1d; flex-wrap:wrap; }
.sc-tab{ color: #fff; text-decoration:none; font-weight:800; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.sc-tab:hover{ border-color: rgba(242,106,33,.55); color:#fff; }
.sc-tab.sc-active{ background: rgba(242,106,33,.16); border-color: rgba(242,106,33,.55); }

.sc-portal-inner{ padding: 16px; }
.sc-grid{ display:grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 980px){ .sc-grid{ grid-template-columns: 1fr; } }

.sc-card{ background: var(--sc-white); border-radius: var(--sc-radius); padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.06); border: 1px solid var(--sc-border); }
.sc-card h2{ margin: 0 0 10px; font-size: 22px; }
.sc-card h3{ margin: 0 0 10px; font-size: 18px; }

.sc-pill{ display:inline-flex; align-items:center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; border: 1px solid var(--sc-border); background: var(--sc-light); }
.sc-pill-orange{ background: rgba(242,106,33,.12); border-color: rgba(242,106,33,.35); color: var(--sc-orange); }

.sc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 12px; text-decoration:none; font-weight: 900; background: var(--sc-orange); color: #fff; border: 1px solid var(--sc-orange); }
.sc-btn:hover{ background: var(--sc-orange-hover); border-color: var(--sc-orange-hover); color:#fff; }

.sc-list{ margin:0; padding-left: 18px; }
.sc-list li{ margin: 6px 0; }

/* WP login form inside portal */
.sc-portal #loginform{ margin: 0; }
.sc-portal #loginform p{ margin: 10px 0; }
.sc-portal #loginform input[type="text"],
.sc-portal #loginform input[type="password"]{
  width:100%; max-width: 420px; padding: 10px 12px; border-radius: 12px; border:1px solid var(--sc-border);
}
.sc-portal #loginform input[type="submit"]{
  background: var(--sc-orange); border:1px solid var(--sc-orange); color:#fff; padding: 10px 14px; border-radius: 12px; font-weight: 900;
}
.sc-portal #loginform input[type="submit"]:hover{ background: var(--sc-orange-hover); border-color: var(--sc-orange-hover); }


/* ===== SpraakCentraal Portal UI (orange/black) ===== */
.sc-portal{ font-family: var(--sc-font, Inter, Manrope, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif); }
.sc-portal-header{
  background: var(--sc-black);
  color: #fff;
  padding: 16px 18px;
  border-radius: 14px 14px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sc-portal-title{ font-weight:800; font-size:20px; letter-spacing:-0.2px; }
.sc-portal-title span{ color: var(--sc-orange); }
.sc-portal-inner{ background: var(--sc-light); padding: 16px; border-radius: 0 0 14px 14px; }
.sc-portal-nav{ display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 14px; }
.sc-tab{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  padding:10px 12px; border-radius: 999px; text-decoration:none; color: var(--sc-black);
  font-weight:700;
}
.sc-tab.sc-active{ background: var(--sc-orange); color:#fff; border-color: var(--sc-orange); }

.sc-card{ background:#fff; border-radius:14px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06); }
.sc-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; }
@media (max-width: 980px){ .sc-grid{ grid-template-columns: 1fr; } }

.sc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; font-weight:800; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.sc-btn-primary{ background: var(--sc-orange); color:#fff; }
.sc-btn-primary:hover{ filter: brightness(0.95); }
.sc-btn-outline{ background:#fff; border-color: rgba(0,0,0,.18); color: var(--sc-black); }
.sc-btn-outline:hover{ border-color: var(--sc-orange); }
.sc-btn-small{ padding:7px 10px; font-weight:800; font-size:13px; border-radius:9px; }

.sc-table{ width:100%; border-collapse: collapse; }
.sc-table th, .sc-table td{ padding:10px 10px; border-bottom:1px solid rgba(0,0,0,.08); text-align:left; }
.sc-table th{ font-size:12px; letter-spacing: .6px; text-transform: uppercase; color: rgba(0,0,0,.65); }
.sc-actions{ display:flex; gap:10px; align-items:center; }
.sc-inline{ display:inline; margin:0; }

.sc-notice{ padding:10px 12px; border-radius:12px; margin: 0 0 12px; font-weight:700; }
.sc-notice-ok{ background: rgba(242,106,33,.12); border:1px solid rgba(242,106,33,.35); color: var(--sc-black); }
.sc-notice-warn{ background: rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); color: var(--sc-black); }
.sc-notice-bad{ background: rgba(242,106,33,.16); border:1px solid rgba(242,106,33,.45); color: var(--sc-black); }

.sc-kv{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 640px){ .sc-kv{ grid-template-columns: 1fr; } }
.sc-kv-label{ font-size:12px; text-transform: uppercase; letter-spacing:.6px; color: rgba(0,0,0,.65); font-weight:800; }
.sc-kv-value{ font-size:16px; font-weight:800; color: var(--sc-black); }
.sc-muted{ color: rgba(0,0,0,.65); }

.sc-doc-upload label{ display:block; margin-top:10px; font-weight:800; }
.sc-doc-upload input[type="text"], .sc-doc-upload input[type="file"]{
  width:100%; max-width:560px; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.18);
}