*{box-sizing:border-box}
body{
 margin:0;min-height:100vh;padding:20px;
 display:grid;place-items:center;
 background:linear-gradient(135deg,#e8f2f8,#f7f9fc);
 color:#213747;font:15px Calibri,Arial,sans-serif
}
.panel{
 width:100%;max-width:400px;background:white;
 padding:28px;border:1px solid #d7e3ec;
 border-radius:14px;box-shadow:0 14px 38px #153b5818
}
.brand{text-align:center;margin-bottom:24px}
.brand img{width:165px;max-width:80%;height:auto}
.brand p{font-size:11px;letter-spacing:1px;color:#8093a2}
h1{font-size:21px;margin:0 0 8px;color:#163d59}
.intro{font-size:13px;color:#698094;line-height:1.5;margin:0 0 22px}
label{display:block;font-weight:600;margin:15px 0 7px}
input,select{
 width:100%;padding:11px;border:1px solid #c9dce9;
 border-radius:8px;font:inherit;background:white;color:#243a4b
}
input:focus,select:focus{
 outline:2px solid #a8d8ef;border-color:#1683ba
}
button.main{
 width:100%;margin-top:23px;padding:12px;
 background:#0877ad;border:0;border-radius:8px;
 color:white;font:inherit;font-weight:600;cursor:pointer
}
button.main:hover{background:#075b89}
.error{
 color:#a72332;background:#fff0f0;
 border-radius:8px;padding:11px;font-size:13px
}
.steps{display:flex;gap:10px;align-items:center;margin-bottom:24px}
.circle{
 width:27px;height:27px;border-radius:50%;
 display:grid;place-items:center;
 background:#e5eef5;color:#618199;font-size:12px
}
.circle.active{background:#0877ad;color:white}
.line{width:28px;height:1px;background:#cbdce8}
.steps small{margin-left:auto;color:#8197a6}
.digits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.digits input{
 min-width:0;padding:10px 0;text-align:center;
 font-size:21px;font-variant-numeric:tabular-nums
}
.back{display:block;text-align:center;margin-top:19px;color:#0877ad}
.footer{text-align:center;color:#879ba9;font-size:11px;margin-top:26px}
.language{text-align:right;margin-bottom:16px}
.language select{width:auto;font-size:12px;padding:6px}

/* T-Portal dark theme, geïnspireerd op ip.t-portal.nl */
html[data-theme="dark"] body {
 background:
  radial-gradient(ellipse at 50% 100%,#063047 0%,transparent 50%),
  linear-gradient(145deg,#090e1d,#060810 75%);
 color:#e7effb;
}
html[data-theme="dark"] .panel {
 background:#111827;
 border-color:#29374b;
 box-shadow:0 24px 60px #0007;
}
html[data-theme="dark"] h1 {color:#f5f8ff}
html[data-theme="dark"] .intro,
html[data-theme="dark"] .brand p,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .steps small {color:#a7b9ce}
html[data-theme="dark"] label {color:#dce7f5}
html[data-theme="dark"] input,
html[data-theme="dark"] select {
 background:#0b1322;
 color:#f0f6ff;
 border-color:#34445b;
}
html[data-theme="dark"] input::placeholder {color:#7e94ac}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus {
 border-color:#51b8ff;
 outline:2px solid #176ca4;
}
html[data-theme="dark"] .circle {
 background:#243349;
 color:#a9c0d7;
}
html[data-theme="dark"] .circle.active {
 background:#1584bd;
 color:#fff;
}
html[data-theme="dark"] .line {background:#43516a}
html[data-theme="dark"] .back {color:#80cbff}
html[data-theme="dark"] .error {
 background:#47242d;
 color:#ffc1c8;
}
html[data-theme="dark"] button.main {background:#167eb7}
html[data-theme="dark"] button.main:hover {background:#2599d7}

.login-theme-switch {
 position:fixed;
 top:20px;
 right:22px;
 display:flex;
 gap:5px;
 padding:5px;
 border:1px solid #d2dfe9;
 border-radius:12px;
 background:#fff;
 z-index:10;
}
.login-theme-switch button {
 cursor:pointer;
 border:0;
 background:transparent;
 color:#61788c;
 width:38px;
 height:34px;
 border-radius:8px;
 font-size:20px;
}
.login-theme-switch button[aria-pressed="true"] {
 background:#dceef9;
 color:#006f9e;
}
html[data-theme="dark"] .login-theme-switch {
 background:#172235;
 border-color:#32445c;
}
html[data-theme="dark"] .login-theme-switch button {
 color:#b8cae1;
}
html[data-theme="dark"] .login-theme-switch button[aria-pressed="true"] {
 background:#24557c;
 color:#fff;
}
@media(max-width:500px) {
 .login-theme-switch {top:8px;right:8px}
 body {padding-top:65px}
}


/* Originele T-Portal huisstijl */
.brand.tportal-original-logo {
 display:flex;
 align-items:center;
 justify-content:center;
 gap:14px;
 margin:0 0 26px;
 text-align:left;
}
.tportal-original-logo img {
 width:58px;
 height:58px;
 max-width:none;
 object-fit:contain;
 border-radius:0;
}
.brand-info {
 display:flex;
 flex-direction:column;
 gap:5px;
}
.brand-info strong {
 font-size:21px;
 font-weight:700;
 letter-spacing:.3px;
 color:#173b56;
}
.brand-info span {
 font-size:13px;
 color:#6d8396;
}
html[data-theme="dark"] .brand-info strong {color:#f5f8ff}
html[data-theme="dark"] .brand-info span {color:#a9b8ce}


.panel {
 max-width:470px;
 padding:36px 38px;
}
.tportal-text-brand {
 text-align:center;
 display:flex;
 flex-direction:column;
 gap:8px;
 margin:8px 0 32px;
}
.tportal-text-brand strong {
 font-size:32px;
 font-weight:800;
 letter-spacing:1.7px;
 color:#0877ad;
}
.tportal-text-brand span {
 font-size:12px;
 font-weight:600;
 letter-spacing:3px;
 color:#778fa4;
}
html[data-theme="dark"] .tportal-text-brand strong {
 color:#f7faff;
}
html[data-theme="dark"] .tportal-text-brand span {
 color:#a2b6cb;
}
@media(max-width:520px) {
 .panel {padding:27px 23px}
 .tportal-text-brand strong {font-size:28px}
}


/* T-Portal compacte, gecentreerde login */
body {
 min-height:100vh;
 min-height:100dvh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:36px 20px;
}
.panel {
 box-sizing:border-box;
 width:100%;
 max-width:540px;
 margin:auto;
 padding:42px 44px;
}
.tportal-text-brand {
 margin:4px 0 32px;
}
.tportal-text-brand strong {
 font-size:36px;
}
.tportal-text-brand span {
 font-size:13px;
}
.panel h1 {
 font-size:25px;
}
.panel input:not([type=hidden]) {
 min-height:48px;
}
.panel button.main {
 min-height:48px;
}
.login-language {
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:9px;
 margin-bottom:24px;
}
.login-language label {
 margin:0;
 font-size:12px;
}
.login-language select {
 width:auto;
 min-width:65px;
 padding:7px 8px;
 min-height:34px;
 font-size:12px;
}
html[data-theme="dark"] .login-language label {
 color:#c6d5e7;
}
@media(max-width:600px) {
 body {padding:65px 15px 20px}
 .panel {max-width:100%;padding:28px 24px}
 .tportal-text-brand strong {font-size:30px}
}


/* T-Portal logo op de loginpagina */
.login-brand-logo {
    display: block;
    width: 210px;
    max-width: 80%;
    height: auto;
    margin: 0 auto 14px;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
}