.icon{display:inline-block;flex:0 0 auto;vertical-align:middle}
.top{height:64px;background:#fff;color:var(--text);border-bottom:1px solid #d9ddd8;padding:0 clamp(20px,3vw,40px);box-shadow:0 1px 0 #17352d05}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:var(--primary);color:#fff}.brand>span:last-child{display:grid}.brand strong{font-size:17px;line-height:1.1}.brand small{margin-top:3px;color:#789087;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.top nav{gap:4px}.top nav>a,.nav-logout{display:flex;align-items:center;gap:7px;border-radius:8px;padding:9px 10px;color:#52675f;font-size:14px;text-decoration:none;font-weight:700;background:transparent}.top nav>a:hover,.nav-logout:hover{background:#eef3f0;color:var(--primary)}.top form{display:flex}.nav-logout{border:0;cursor:pointer}.nav-logout span{display:none}.section-title h2,.card>h2{letter-spacing:-.015em}
.login-body{margin:0;background:#eef1ee}.login-body main{width:auto;margin:0}.login-shell{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}.login-visual{position:relative;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between;background:#173f35;color:#fff;padding:48px}.login-grid{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:34px 34px}.login-brand,.login-copy,.login-benefits{position:relative}.login-brand{display:flex;align-items:center;gap:13px}.login-brand-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:12px;background:#ffffff18}.login-brand>span:last-child{display:grid}.login-brand strong{font-size:21px}.login-brand small{margin-top:3px;color:#b8d0c5;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.login-copy{max-width:590px}.login-copy .eyebrow{color:#d6a854}.login-copy h1{margin:16px 0 18px;max-width:570px;font-size:clamp(40px,4vw,58px);line-height:1.08;letter-spacing:-.035em}.login-copy>p:last-child{max-width:540px;margin:0;color:#c9d9d2;font-size:18px;line-height:1.75}.login-benefits{display:flex;gap:28px;color:#d8e5df;font-size:14px}.login-benefits span{display:flex;align-items:center;gap:8px}
.login-form-side{display:flex;align-items:center;justify-content:center;padding:48px 24px}.login-card{width:100%;max-width:450px;border:1px solid #d9ddd8;border-radius:24px;background:#fff;padding:36px;box-shadow:0 18px 45px #173f3512}.lock-icon{display:grid;width:48px;height:48px;place-items:center;margin-bottom:28px;border-radius:16px;background:#e3eee8;color:#245c49}.login-card>.eyebrow{color:#8a6b3d}.login-card h2{margin:8px 0 10px;font-size:31px;letter-spacing:-.025em}.login-card>.muted{margin:0 0 25px;font-size:14px;line-height:1.65}.login-card form button{gap:8px;min-height:48px;margin-top:3px}.security-note{display:flex;align-items:flex-start;gap:9px;margin-top:22px;border-radius:12px;background:#f3f5f3;padding:12px;color:#687970;font-size:12px;line-height:1.55}.security-note .icon{margin-top:2px}
@media(max-width:1050px){.top nav>a{font-size:0}.top nav>a .icon{width:19px;height:19px}.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-form-side{min-height:100vh}}
@media(max-width:600px){.top{padding-inline:15px}.top nav{gap:0}.top nav>a,.nav-logout{padding:8px}.login-card{padding:28px 22px;border-radius:18px}.login-form-side{padding:22px}}

/* Configurator gelijk aan de webversie */
body>main{width:100%;max-width:none;margin:0;padding-bottom:70px}.order-steps{display:flex;align-items:center;justify-content:center;gap:5px;overflow-x:auto;border-bottom:1px solid #d9ddd8;background:#fff;padding:16px 20px}.order-steps span{display:flex;align-items:center;gap:8px;white-space:nowrap;border-radius:999px;padding:8px 12px;color:#7b8b84;font-size:12px;font-weight:700}.order-steps span.active{background:#e3efe9;color:#173f35}.order-steps b{display:grid;width:24px;height:24px;place-items:center;border:1px solid #cfd6d2;border-radius:50%;font-size:11px}.order-steps .active b{border-color:#173f35;background:#173f35;color:#fff}.order-steps i{width:40px;height:1px;flex:0 0 auto;background:#d9ddd8}.configurator-intro{width:min(1500px,calc(100% - 40px));margin:0 auto;padding:25px 0 18px}.configurator-intro h1{margin:5px 0 3px;font-size:30px}.configurator-intro p:last-child{margin:0;font-size:14px}.configurator-intro+.success,.configurator-intro+.alert,#configurator{width:100%;margin-inline:auto}.project-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(1500px,calc(100% - 40px));margin:0 auto}.project-settings .card{margin:0;padding:16px;border-radius:16px}.title-with-icon{display:flex;align-items:center;gap:9px;font-size:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}.grid2 label{color:#596a62;font-size:12px}.grid2 input{height:40px;padding:9px 12px}.grid2 small{font-size:10px;color:#2f735d}.rush-option{display:flex;align-items:flex-start;gap:10px;margin-top:15px;border:1px solid #d9ddd8;border-radius:12px;background:#f8faf8;padding:11px;font-size:12px;line-height:1.5}.rush-option input{width:auto;margin-top:4px}.rush-option span{display:grid}.web-preview{margin:20px 0 24px;border-radius:0;border-inline:0;box-shadow:0 2px 4px #17352d0b}.web-preview .preview-head{width:min(1500px,100%);margin:auto;padding:14px max(20px,calc((100% - 1500px)/2 + 20px))}.preview-head>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px}.preview-head>div p{grid-column:1/-1;margin:0;font-size:12px}.live-pill{border-radius:999px;background:#173f35;color:#fff;padding:5px 10px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.ratio-pill{border:1px solid #c8d7d0;border-radius:999px;background:#edf5f1;padding:7px 12px;color:#315c4d;font-size:12px;font-weight:700}.web-preview .preview-stage{min-height:420px;padding:55px max(28px,calc((100% - 1400px)/2));background-color:#d9dedb;background-size:22px 22px}.web-preview .window-frame{width:min(100%,1280px);border-top-width:10px;border-bottom-width:10px;box-shadow:0 24px 48px #1a302833}.preview-measures{display:flex;justify-content:space-between;width:min(100%,1280px);margin:18px auto 0;color:#607269;font-size:12px;font-weight:700}.preview-note{border-top:1px solid #e0e4e1;background:#fbfcfb;padding:11px max(20px,calc((100% - 1500px)/2));color:#6b7b73;font-size:12px}.layout{grid-template-columns:minmax(0,980px) 340px;justify-content:center;width:min(1360px,calc(100% - 40px));margin:0 auto;gap:24px}.layout .card{border-radius:16px;padding:16px;margin-bottom:0}.design-heading{display:flex;align-items:center;gap:12px}.design-heading p,.design-heading h2{margin:0}.design-heading p{font-size:12px}.design-heading h2{margin-top:3px;font-size:16px}.design-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#e7f1ec;color:#1d5b49}.design-card .choices{margin-top:13px}.design-card .choices span{border-radius:12px;padding:11px}.template-note{margin:12px 0 0;font-size:12px}.window-total{border-radius:999px;background:#eef2ef;padding:5px 9px;font-size:12px;font-weight:800}.measurement-info{margin:12px 0;border:1px solid #d7e3dd;border-radius:12px;background:#edf5f1;padding:12px;color:#476159;font-size:12px;line-height:1.6}.measurement-info strong{color:#183028}.window-row{grid-template-columns:38px 1fr 1fr 30px;border-radius:12px;padding:8px;gap:8px}.window-row>strong{font-size:9px;text-align:center;color:#6d7e76}.window-row label{font-size:10px;text-transform:uppercase;color:#7d8b84}.window-row input{height:40px;margin-top:4px;padding:8px 10px;font-size:14px;font-weight:700}.window-row .remove{width:28px;height:28px;padding:0;margin-bottom:6px;border:0;border-radius:8px}.add-window{width:100%;margin-top:12px;height:38px}.summary{top:24px;border-radius:16px;padding:20px}.summary h2{margin:5px 0 14px}.summary>div{padding:9px 0;font-size:14px}.summary button{min-height:44px}
@media(max-width:1000px){.project-settings{grid-template-columns:1fr}.layout{grid-template-columns:1fr}.order-steps i{width:18px}.summary{position:static}.web-preview .preview-stage{min-height:320px;padding-block:35px}}
@media(max-width:700px){.order-steps{justify-content:flex-start}.order-steps span{font-size:0;padding:6px}.order-steps .active{font-size:11px}.grid2{grid-template-columns:1fr}.ratio-pill{display:none}.configurator-intro,.project-settings,.layout{width:calc(100% - 24px)}.web-preview .preview-stage{min-height:260px;padding:26px 12px}.preview-measures{font-size:10px}.window-row{grid-template-columns:32px 1fr}.window-row label:nth-of-type(2){grid-column:2}.window-row .remove{grid-column:1;grid-row:2}.window-row>strong{align-self:center}}

/* Beheer en werkbonnen */
.dark-header-page .top{height:76px;background:#173f35;color:#fff;border:0}.dark-header-page .brand-icon{background:#ffffff18}.dark-header-page .brand small{color:#b8d0c5}.dark-header-page .top nav>a,.dark-header-page .nav-logout{color:#d8e5df}.dark-header-page .top nav>a:hover,.dark-header-page .nav-logout:hover{background:#ffffff12;color:#fff}.dark-header-page>main{width:min(1440px,calc(100% - 40px));margin:32px auto 80px}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}.admin-stats article{position:relative;min-height:118px;border:1px solid #d9ddd8;border-radius:16px;background:#fff;padding:22px;box-shadow:0 2px 5px #17352d12}.admin-stats span{position:absolute;right:20px;top:20px;color:#6f867d}.admin-stats p{margin:0 0 16px;color:#687970;font-size:12px;font-weight:800;letter-spacing:.06em}.admin-stats strong{font-size:25px}.dark-header-page .card{border-radius:16px}.dark-header-page .card h2{font-size:20px}.dark-header-page input,.dark-header-page select,.dark-header-page textarea{min-height:42px}.dark-header-page table button{min-height:40px}
@media(max-width:800px){.admin-stats{grid-template-columns:1fr}.dark-header-page>main{width:calc(100% - 24px);margin-top:20px}}

/* Eén maatvaste skylinecoördinaat, verankerd aan de linker aluminiumrand */
.panes{position:relative;align-items:flex-end;background:linear-gradient(145deg,#d5d9da 0%,#b4bbbe 48%,#909a9e 100%)}.panes>.pane{z-index:2;border-color:#60798d55;background:transparent}.continuous-film{position:absolute;z-index:1;left:0;right:0;overflow:hidden;border:0;background:transparent;pointer-events:none}.continuous-film svg{display:block;width:100%;height:100%;overflow:hidden}.pane-tag{z-index:3}

/* Lichtbreking op beide vellingkanten van de interne glasnaden.
   Alleen een visuele laag: verandert geen maten of productiecontouren. */
.panes>.pane{border-color:transparent}
.panes>.pane::before,.panes>.pane::after{content:"";position:absolute;top:0;bottom:0;z-index:2;pointer-events:none}
.panes>.pane::before{left:0;width:2px;background:linear-gradient(90deg,rgba(250,252,252,.8),rgba(235,240,241,.28) 55%,transparent);mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),#000 28%,rgba(0,0,0,.6) 65%,rgba(0,0,0,.85))}
.panes>.pane::after{right:0;width:1px;background:linear-gradient(to bottom,rgba(57,65,68,.45),rgba(57,65,68,.2) 40%,rgba(57,65,68,.4) 75%,rgba(57,65,68,.25))}
.panes>.pane:not(.pane + .pane)::before,.panes>.pane:last-child::after{display:none}

/* Shared portal rhythm: all routes use the same controls and content gutter. */
body { line-height:1.5; }
body>main:not(:has(#configurator)):not(.login-shell) {
  width:min(1440px,calc(100% - 40px));
  margin:32px auto 64px;
  padding-bottom:0;
}

/* Persisted appearance settings, also used by the isolated live example. */
html,body { font-family:var(--portal-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); }
.login-body,.login-form-side { background:var(--page); }
.login-visual,.dark-header-page .top { background:var(--primary); }
.top,.order-steps,.login-card,.admin-stats article,.project-settings .card,.layout .card,.dark-header-page .card,.preview-note { background-color:var(--surface); }
.top,.login-card,.admin-stats article { color:var(--text); }
body button,body .button,body .top nav>a,body .nav-logout { border-radius:var(--button-radius,var(--radius)); }
.login-card form button,.summary button { border-radius:var(--button-radius,var(--radius)); }
.appearance-field { display:grid;gap:7px; }
.color-pair { display:flex;gap:8px;min-width:0; }
.color-pair input[type=color] { width:52px;min-width:52px;padding:4px;cursor:pointer; }
.color-pair input:not([type=color]) { flex:1;width:0; }
.appearance-preview { padding:24px;background:var(--page);border:1px solid #cfd8d3;border-radius:12px;font-family:var(--portal-font);color:var(--text); }
.appearance-preview-card { padding:24px;background:var(--surface);border-radius:12px;border:1px solid #cfd8d3;max-width:500px; }
.appearance-preview h3 { font-size:24px;margin:8px 0;color:var(--primary); }
.appearance-preview input { border-radius:var(--radius);color:var(--text); }
.appearance-preview .actions { margin-top:16px; }
.appearance-preview button { background:var(--primary);border-radius:var(--button-radius); }
.appearance-preview button.accent { background:var(--accent);color:var(--text); }
#appearanceStatus { margin:0;font-size:14px; }
.price-breakdown { margin-top:18px;padding-top:12px;border-top:1px solid #ffffff40; }
.order-detail{max-width:1100px;margin:28px auto;padding:28px}
.order-proof{display:block;width:100%;height:auto;border:1px solid #ccd4d8;margin:20px 0}
.order-prices{max-width:420px;margin:22px 0 22px auto}
.order-prices>div{display:flex;justify-content:space-between;gap:20px;padding:7px 0}
.order-prices dd{margin:0;font-weight:700}.order-prices>div:last-child{border-top:1px solid #cbd5ce;font-size:22px}
.order-detail .check{padding:14px 0}.order-detail .check input{flex:0 0 auto}
.summary>div:has(>#area) { border-bottom:0; }
.price-row { display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;font-size:14px; }
.price-row[hidden],#retryPrice[hidden] { display:none; }
.price-row strong { white-space:nowrap;font-variant-numeric:tabular-nums; }
.price-row.price-total { margin-top:10px;padding-top:14px;border-top:1px solid #ffffff40;font-size:22px;font-weight:800; }
.price-status { font-size:13px;line-height:1.5;margin:10px 0 0;color:#e0ebe5; }
.summary:has(.price-breakdown) { position:static; }
@media(min-width:1001px) and (min-height:950px) { .summary:has(.price-breakdown) { position:sticky; } }
.intro { flex-wrap:wrap; }
.intro h1 { font-size:clamp(26px,3vw,32px);line-height:1.2; }
.card h2 { font-size:20px;line-height:1.3; }
.card,.summary,.project-settings .card,.layout .card,.dark-header-page .card,
.admin-stats article,.login-card { border-radius:16px; }
button,.button,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select {
  min-height:44px;
  border-radius:var(--radius);
  font-size:14px;
}
button,.button { gap:8px;line-height:1.25; }
button:disabled { opacity:.5;cursor:not-allowed; }
input,select,textarea { min-width:0; }
/* Keep helper text from stretching the label/control rows of adjacent fields. */
label { align-content:start; }
.grid2,.grid3 { align-items:start; }
.grid2>label,.grid3>label,.stack>label { min-width:0; }
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible {
  outline:3px solid var(--primary);outline-offset:3px;
}
.choices input:focus-visible+span { outline:3px solid var(--primary);outline-offset:3px; }
.choices label { position:relative; }
.choices input { width:1px;height:1px;min-height:0;padding:0;border:0;clip-path:inset(50%);overflow:hidden; }
.choices span,.design-card .choices span { border-radius:var(--radius); }
.grid2 label,.window-row label { font-size:14px;text-transform:none; }
.grid2 small,.template-note,.measurement-info,.preview-note,.security-note { font-size:13px; }
.window-row>strong { font-size:11px; }
.window-row input { height:44px;margin-top:0;font-weight:600; }
.window-row { grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) 44px;gap:12px;padding:12px; }
.window-row .remove { width:44px;height:44px;margin:0;font-size:22px; }
.add-window { height:44px; }
.grid3 { margin-bottom:20px; }
.stack .grid3 { margin-bottom:0; }
.check { padding-top:0; }
.empty-state { padding:28px;text-align:center;color:#53675d; }
.empty-state strong { display:block;color:var(--text);font-size:18px;margin-bottom:6px; }
.table-wrap { max-width:100%; }
table:has(.empty-state) { min-width:0;width:100%; }
table:has(.empty-state) thead { display:none; }
table:has(.empty-state) td { border-bottom:0; }
input[type=file]::file-selector-button { border:1px solid #cfd8d3;border-radius:var(--radius);background:#eef3f0;color:var(--text);padding:7px 10px;margin-right:12px;font:inherit;cursor:pointer; }
.inline { align-items:center; }
.inline input,.inline select { width:auto; }
.film { border:0;background:#eceff0; }
.top,.dark-header-page .top { min-height:76px;height:auto;gap:16px; }
.top nav { flex-wrap:wrap; }
.top nav>a,.nav-logout { min-height:44px;font-size:14px;white-space:nowrap; }
.top nav>a[aria-current=page] { background:#e3efe9;color:var(--primary); }
.dark-header-page .top nav>a[aria-current=page] { background:#ffffff20;color:#fff; }
.nav-logout span { display:inline; }
/* Dezelfde donkere navigatie in het klantportaal en beheer. */
.portal-page .top,.dark-header-page .top{background:var(--primary);color:#fff;border-bottom:1px solid #ffffff18}
.portal-page .brand-icon{background:#ffffff18;color:#fff}
.portal-page .brand small{color:#b8d0c5}
.portal-page .top nav>a,.portal-page .nav-logout{color:#d8e5df}
.portal-page .top nav>a:hover,.portal-page .nav-logout:hover{background:#ffffff12;color:#fff}
.portal-page .top nav>a[aria-current=page]{background:#ffffff20;color:#fff}
.top a:focus-visible,.top button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.preview-measures { gap:16px;flex-wrap:wrap; }
@media(max-width:1050px) {
  .top,.dark-header-page .top { align-items:flex-start;flex-direction:column;padding-block:14px;gap:10px; }
  .top nav { width:100%;justify-content:flex-start; }
  .top nav>a { font-size:14px; }
}
@media(max-width:700px) {
  body>main:not(:has(#configurator)):not(.login-shell) { width:calc(100% - 24px);margin:24px auto 40px; }
  .top nav>a,.nav-logout { padding:8px;font-size:13px; }
  .card,.dark-header-page .card { padding:18px; }
  .grid3,.admin-grid { grid-template-columns:minmax(0,1fr); }
  .window-row { grid-template-columns:44px minmax(0,1fr) 44px;gap:8px; }
  .window-row label { grid-column:2; }
  .window-row>strong { grid-row:1 / 3; }
  .window-row .remove { grid-column:3;grid-row:1 / 3;align-self:center; }
  .actions>* { flex:1 1 140px; }
  .intro .pill { max-width:100%;overflow-wrap:anywhere; }
  input:not([type=checkbox]):not([type=radio]),select,textarea { font-size:16px; }
}
/* Shared configurator alignment; draft actions stay outside the price card. */
body>main:has(#configurator)>.success,body>main:has(#configurator)>.alert,
body>main:has(#configurator)>.card {
  width:min(1500px,calc(100% - 40px));margin:0 auto 24px;
}
#configurator .layout {width:min(1500px,calc(100% - 40px));grid-template-columns:minmax(0,1fr) 340px;margin-bottom:24px;}
#configurator .order-sidebar {min-width:0;align-self:start;display:grid;gap:16px;}
#configurator .order-sidebar .summary {position:static;margin:0;}
#configurator .design-actions {background:var(--primary);color:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 2px 5px #17352d12;}
#configurator .design-actions .actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#configurator .design-actions button {min-width:0;padding:12px 8px;min-height:44px;}
@media(max-width:1000px){#configurator .layout{grid-template-columns:1fr;}}
@media(max-width:700px){#configurator .layout,body>main:has(#configurator)>.success,body>main:has(#configurator)>.alert,body>main:has(#configurator)>.card{width:calc(100% - 24px);}}
/* Bounded lists and distinct management sections. */
.admin-tabs,.listing-filters{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px;align-items:end}
.pagination{margin:18px 0;align-items:center}
.saved-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.saved-grid article{border:1px solid #d9e0dc;padding:14px;border-radius:5px;min-width:0}
.saved-grid img{display:block;width:100%;height:95px;object-fit:contain;background:#eceff0}
.saved-grid p{overflow-wrap:anywhere}.saved-grid form{margin-top:12px}
.design-actions label{margin-bottom:14px}.design-actions input{min-width:0}