:root{
  --op-purple:#69266f;
  --op-purple-dark:#47184d;
  --op-blue:#63b7d3;
  --op-blue-dark:#317f9a;
  --op-soft:#faf8fb;
  --op-line:#e3dde7;
  --op-text:#252129;
  --op-muted:#746a78;
  --op-danger:#a52b3a;
  --op-success:#15764a;
  --op-success-bg:#eaf7f0;
  --op-warning:#9b6500;
  --op-shadow:0 16px 46px rgba(54,28,60,.10);
}
*{box-sizing:border-box}
body.opmerkingen-page{margin:0;background:linear-gradient(160deg,#fbfafc 0%,#f3f0f5 100%);color:var(--op-text);min-height:100vh}
body.opmerkingen-page button,body.opmerkingen-page input,body.opmerkingen-page textarea,body.opmerkingen-page select{font:inherit}
body.opmerkingen-page button{cursor:pointer}
.op-shell{width:min(1180px,calc(100% - 40px));margin:30px auto 56px}
.op-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.op-hero-copy{min-width:0}
.op-eyebrow{margin:0 0 7px;color:var(--op-blue-dark);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.op-hero h1,.op-intro h1{margin:0;color:var(--op-purple-dark);font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:-.03em}
.op-hero p,.op-intro p{max-width:780px;margin:8px 0 0;color:var(--op-muted);line-height:1.55}
.op-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.op-card{background:#fff;border:1px solid var(--op-line);border-radius:18px;box-shadow:var(--op-shadow);overflow:hidden}
.op-section{padding:24px 26px;border-bottom:1px solid var(--op-line)}
.op-section:last-child{border-bottom:0}
.op-section h2,.op-section h3{margin:0 0 6px;color:var(--op-purple-dark);font-size:1.08rem}
.op-section-intro{margin:0 0 17px;color:var(--op-muted);font-size:.92rem;line-height:1.5}
.op-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.op-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.op-field.full{grid-column:1/-1}
.op-field label,.op-field>span{font-weight:700;font-size:.91rem}
.op-required{color:var(--op-danger)}
body.opmerkingen-page input,body.opmerkingen-page textarea,body.opmerkingen-page select{width:100%;border:1px solid #d9d2dc;border-radius:10px;background:#fff;padding:11px 12px;color:var(--op-text);outline:none;transition:.15s}
body.opmerkingen-page input:focus,body.opmerkingen-page textarea:focus,body.opmerkingen-page select:focus{border-color:var(--op-purple);box-shadow:0 0 0 3px rgba(105,38,111,.10)}
body.opmerkingen-page input:disabled,body.opmerkingen-page textarea:disabled,body.opmerkingen-page select:disabled{background:#f4f1f5;color:#645b68;cursor:not-allowed}
body.opmerkingen-page textarea{min-height:120px;resize:vertical}
.op-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.op-choice{display:flex;align-items:center;gap:8px;border:1px solid var(--op-line);border-radius:11px;padding:11px 12px;background:#fff;font-weight:650}
.op-choice input{width:auto!important;margin:0}
.op-choice:has(input:checked){border-color:rgba(105,38,111,.48);background:#fbf6fc;color:var(--op-purple-dark)}
.op-notice{border-radius:12px;padding:13px 14px;line-height:1.48;font-size:.9rem;border:1px solid transparent}
.op-notice.info{background:#edf7fb;color:#2d657a;border-color:#d6edf5}
.op-notice.success{background:var(--op-success-bg);color:var(--op-success);border-color:#c9ead8}
.op-notice.error{background:#fff0f2;color:#8f2030;border-color:#f0c7ce}
.op-notice.warning{background:#fff8e8;color:#7b5500;border-color:#f0deb5}
.op-vgm-notice{border:1px solid #d7c4db;border-left:5px solid var(--op-purple);border-radius:12px;padding:16px 17px;background:#fbf7fc;color:#4b3d50;line-height:1.52;font-size:.92rem}
.op-vgm-notice strong{color:var(--op-purple-dark)}
.op-vgm-notice ul{margin:9px 0 0;padding-left:20px}
.op-analysis-box{border:1px solid var(--op-line);border-radius:14px;background:#fcfbfd;padding:17px}
.op-analysis-box h4{margin:0 0 12px;color:var(--op-purple-dark);font-size:.98rem}
.op-helper{font-size:.8rem;color:var(--op-muted);line-height:1.4;margin-top:-2px}
.op-checkrow{display:flex;align-items:flex-start;gap:10px}
.op-checkrow input{width:auto!important;margin-top:3px}
.op-checkrow label{font-size:.9rem;line-height:1.45}
.op-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:20px 26px;background:var(--op-soft)}
.op-btn{border:0;border-radius:10px;padding:11px 16px;font-weight:750;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;line-height:1.2}
.op-btn.primary{background:var(--op-purple);color:#fff;box-shadow:0 8px 20px rgba(105,38,111,.18)}
.op-btn.secondary{background:#edf7fb;color:#2d657a}
.op-btn.ghost{background:#fff;border:1px solid var(--op-line);color:var(--op-purple-dark)}
.op-btn:disabled{opacity:.55;cursor:not-allowed}
.op-success-box{display:none;padding:40px 28px;text-align:center}
.op-success-box.show{display:block}
.op-success-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 15px;background:var(--op-success-bg);color:var(--op-success);font-size:1.8rem;font-weight:900}
.op-success-box h2{margin:0;color:var(--op-purple-dark);font-size:1.45rem}
.op-success-box p{margin:9px auto 0;max-width:650px;color:var(--op-muted);line-height:1.55}
.op-ref{display:inline-block;margin-top:15px;border-radius:999px;background:#f3eef5;padding:8px 13px;color:var(--op-purple-dark);font-weight:800}
.op-statusline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.op-status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:800;background:#f3eef5;color:var(--op-purple-dark)}
.hidden{display:none!important}

/* Dashboard */
.op-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0}
.op-stat{background:#fff;border:1px solid var(--op-line);border-radius:14px;padding:15px 17px;box-shadow:0 8px 24px rgba(54,28,60,.06)}
.op-stat span{display:block;color:var(--op-muted);font-size:.82rem;font-weight:700;margin-bottom:5px}
.op-stat strong{font-size:1.7rem;color:var(--op-purple-dark)}
.op-panel{background:#fff;border:1px solid var(--op-line);border-radius:18px;box-shadow:var(--op-shadow);overflow:hidden}
.op-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--op-line)}
.op-panel-head h2{margin:0;color:var(--op-purple-dark);font-size:1.08rem}
.op-panel-head p{margin:5px 0 0;color:var(--op-muted);font-size:.9rem}
.op-filterbar{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(150px,.7fr)) auto;gap:12px;padding:16px 22px;border-bottom:1px solid var(--op-line);background:#fcfbfd;align-items:end}
.op-filterbar label{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--op-muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.op-loading,.op-empty{padding:34px 22px;text-align:center;color:var(--op-muted)}
.op-empty strong{display:block;color:var(--op-purple-dark);font-size:1.05rem;margin-bottom:5px}
.op-table-wrap{overflow:auto}
.op-table{width:100%;border-collapse:collapse;min-width:1050px}
.op-table th,.op-table td{padding:13px 14px;border-bottom:1px solid #eee9f0;text-align:left;vertical-align:top}
.op-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#786c7c;background:#fcfbfd;position:sticky;top:0;z-index:1}
.op-table td{font-size:.88rem;color:#3b343f}
.op-table tbody tr{transition:.12s}
.op-table tbody tr:hover{background:#fbf7fc}
.op-row-title{font-weight:800;color:var(--op-purple-dark)}
.op-row-sub{display:block;color:var(--op-muted);font-size:.78rem;margin-top:3px;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.74rem;font-weight:800;white-space:nowrap;background:#f2eff4;color:#655d69}
.op-pill.vgm{background:#eaf6fa;color:#2f7088}
.op-pill.status-new{background:#f4eef6;color:#6a2870}
.op-pill.status-progress{background:#fff5dc;color:#835c05}
.op-pill.status-done{background:#eaf7f0;color:#15764a}
.op-open-link{font-weight:800;color:var(--op-purple);text-decoration:none;white-space:nowrap}
.op-open-link:hover{text-decoration:underline}

@media(max-width:980px){.op-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.op-filterbar{grid-template-columns:repeat(2,minmax(0,1fr))}.op-filterbar .op-btn{width:100%}}
@media(max-width:760px){.op-shell{width:min(100% - 20px,1180px);margin-top:20px}.op-hero{align-items:flex-start;flex-direction:column}.op-hero-actions{justify-content:flex-start}.op-grid,.op-choice-grid{grid-template-columns:1fr}.op-field.full{grid-column:auto}.op-section{padding:20px 18px}.op-actions{padding:16px 18px}.op-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.op-panel-head{align-items:flex-start;flex-direction:column}.op-filterbar{grid-template-columns:1fr}}
@media(max-width:480px){.op-stats{grid-template-columns:1fr}.op-btn{width:100%}.op-hero-actions{width:100%}}
@media print{body.opmerkingen-page{background:#fff}.portal-titlebar,.op-hero-actions,.op-actions,#formStartupMessage{display:none!important}.op-shell{width:100%;margin:0}.op-card,.op-panel{box-shadow:none;border:0}.op-section{break-inside:avoid}.op-success-box{display:none!important}}
