/* Ecom AI Office — nieuwe stijl (fase 1).
   Rustig: één accentkleur blauw, statuskleuren alleen op symbolen.
   Wordt als laatste geladen en overschrijft alleen uiterlijk, geen gedrag. */

:root {
  --void: #0a0d1a;
  --ink: #0b0f20;
  --panel: #0e1226;
  --raise: #121733;
  --line: rgba(255, 255, 255, 0.08);
  --text: #eef1f8;
  --muted: #8790b5;
  --ice: #5b8bff;
  --violet: #7a9dff;
  --glow: rgba(91, 139, 255, 0.24);
  --glow-v: rgba(91, 139, 255, 0.1);
  --testen: #7ee0b5;
  --twijfel: #ffc46b;
  --afwijzen: #ff8f9c;
  --radius: 16px;
  --copy: #c7cce0;
  --surface-hover: #171d3d;
  --chrome-bg: #0a0d1a;
  --stage-base: linear-gradient(180deg, #10152c 0%, #0a0d1a 70%);
  --stage-done: linear-gradient(180deg, #10152c 0%, #0a0d1a 100%);
  --video-bg: #070a16;
  --drop-edge: #262e52;
  --drop-over: #141b3a;
  --accent-hover: #4a7af0;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;
  --font-brand: "Sora", "IBM Plex Sans", sans-serif;
}

html[data-theme="light"] {
  --ice: #3f6fe8;
  --violet: #5b8bff;
  --glow: rgba(63, 111, 232, 0.16);
  --glow-v: rgba(63, 111, 232, 0.08);
  --accent-hover: #335fd0;
}

body {
  background:
    radial-gradient(900px 360px at 55% -80px, rgba(91, 139, 255, 0.08), transparent 70%),
    var(--void);
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] body {
  background:
    radial-gradient(900px 360px at 55% -80px, rgba(63, 111, 232, 0.06), transparent 70%),
    var(--void);
}

/* ---------- Zijmenu ---------- */
@media (min-width: 1101px) {
  html:not([data-sidebar="collapsed"]) .app { grid-template-columns: 248px minmax(0, 1fr); }
  .sidebar {
    margin: 12px 0 12px 12px;
    height: calc(100% - 24px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    padding: 18px 10px 12px;
  }
  html[data-theme="light"] .sidebar { background: #ffffff; }
  html[data-sidebar="collapsed"] .app { grid-template-columns: 84px minmax(0, 1fr); }
  html[data-sidebar="collapsed"] .agent { display: flex; justify-content: center; padding: 0; }
  html[data-sidebar="collapsed"] .agent-mark { display: none; }
  html[data-sidebar="collapsed"] .agent.active { border-color: transparent; background: rgba(91, 139, 255, 0.13); }
}

.brand { padding: 0 6px; margin-bottom: 14px; gap: 11px; }
.brand-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
}
.brand-mark svg { display: block; width: 32px; height: 32px; }
.brand-mark .logo-spark { fill: var(--ice); }
.brand-mark .logo-tile { fill: currentColor; }
.brand-name {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.brand-sub {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.nav-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin: 12px 12px 4px;
}

.sidebar-nav, .sidebar-agents { gap: 1px; }

.agent {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 38px;
  padding: 0 12px;
  gap: 11px;
  color: var(--copy);
  transition: background 0.15s ease, color 0.15s ease;
}
.agent::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  background: currentColor;
  opacity: 0.8;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}
.agent:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
html[data-theme="light"] .agent:hover { background: #eef1f6; }
.agent.active {
  background: rgba(91, 139, 255, 0.13);
  color: var(--text);
  border-color: transparent;
  box-shadow: none;
}
.agent.active::before { background: #7fa3ff; opacity: 1; }
html[data-theme="light"] .agent.active { background: rgba(63, 111, 232, 0.1); }
html[data-theme="light"] .agent.active::before { background: var(--ice); }
.agent-name { font-size: 14px; font-weight: 500; }
.agent.active .agent-name { font-weight: 600; }

#agentDashboard::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7v7H4zM13%204h7v4h-7zM13%2010h7v10h-7zM4%2013h7v7H4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7v7H4zM13%204h7v4h-7zM13%2010h7v10h-7zM4%2013h7v7H4z%22%2F%3E%3C%2Fsvg%3E"); }
#agentLeaderboard::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2020v-6M12%2020V5M19%2020v-9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2020v-6M12%2020V5M19%2020v-9%22%2F%3E%3C%2Fsvg%3E"); }
#agentProducten::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207l9-4%209%204-9%204zM3%207v10l9%204%209-4V7M12%2011v10%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207l9-4%209%204-9%204zM3%207v10l9%204%209-4V7M12%2011v10%22%2F%3E%3C%2Fsvg%3E"); }
#agentBeoordelaar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208V5a1%201%200%200%201%201-1h3M16%204h3a1%201%200%200%201%201%201v3M20%2016v3a1%201%200%200%201-1%201h-3M8%2020H5a1%201%200%200%201-1-1v-3M4%2012h16%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208V5a1%201%200%200%201%201-1h3M16%204h3a1%201%200%200%201%201%201v3M20%2016v3a1%201%200%200%201-1%201h-3M8%2020H5a1%201%200%200%201-1-1v-3M4%2012h16%22%2F%3E%3C%2Fsvg%3E"); }
#agentParcelTracking::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h11v10H3zM14%2010h4l3%203v3h-7M7%2020a2%202%200%201%200%200-4%202%202%200%200%200%200%204zM17%2020a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h11v10H3zM14%2010h4l3%203v3h-7M7%2020a2%202%200%201%200%200-4%202%202%200%200%200%200%204zM17%2020a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%22%2F%3E%3C%2Fsvg%3E"); }
#agentCustomerService::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18v12H3zM3%207l9%206%209-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18v12H3zM3%207l9%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
#agentAdMaker::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010v4h3l6%204V6L7%2010zM17%209a4%204%200%200%201%200%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010v4h3l6%204V6L7%2010zM17%209a4%204%200%200%201%200%206%22%2F%3E%3C%2Fsvg%3E"); }
#agentCalculator::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18H6zM9%207h6M9%2012h.01M12%2012h.01M15%2012h.01M9%2016h.01M12%2016h.01M15%2016h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18H6zM9%207h6M9%2012h.01M12%2012h.01M15%2012h.01M9%2016h.01M12%2016h.01M15%2016h.01%22%2F%3E%3C%2Fsvg%3E"); }
#agentAiCoach::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%204.7%204.7%201.8-4.7%201.8L12%2016l-1.8-4.7L5.5%209.5l4.7-1.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%204.7%204.7%201.8-4.7%201.8L12%2016l-1.8-4.7L5.5%209.5l4.7-1.8z%22%2F%3E%3C%2Fsvg%3E"); }
#agentCoaching::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3C%2Fsvg%3E"); }
#agentRoadmap::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204l6%202%206-2v14l-6%202-6-2-6%202V6zM9%204v14M15%206v14%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204l6%202%206-2v14l-6%202-6-2-6%202V6zM9%204v14M15%206v14%22%2F%3E%3C%2Fsvg%3E"); }
#agentWebshopBouwen::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209l1-5h14l1%205M4%209v11h16V9M4%209h16M9%2020v-6h6v6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209l1-5h14l1%205M4%209v11h16V9M4%209h16M9%2020v-6h6v6%22%2F%3E%3C%2Fsvg%3E"); }
#agentBundles::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5zM3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5zM3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
#agentCoachSignals::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208zM2%2021a7%207%200%200%201%2014%200M17%2011a3%203%200%201%200%200-6M22%2021a6%206%200%200%200-5-5.9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208zM2%2021a7%207%200%200%201%2014%200M17%2011a3%203%200%201%200%200-6M22%2021a6%206%200%200%200-5-5.9%22%2F%3E%3C%2Fsvg%3E"); }
#agentSupplierDesk::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16v13H4zM8%207V5a4%204%200%200%201%208%200v2M9%2012h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16v13H4zM8%207V5a4%204%200%200%201%208%200v2M9%2012h6%22%2F%3E%3C%2Fsvg%3E"); }

/* ---------- Knoppen ---------- */
.cta {
  border-radius: 10px;
  background: var(--ice);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22);
  transition: background 0.15s ease;
}
.cta:hover {
  filter: none;
  background: var(--accent-hover);
  box-shadow: 0 8px 26px rgba(91, 139, 255, 0.3);
}

/* ---------- Invoervelden ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="number"], select, textarea {
  border-radius: 10px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ice) 70%, white);
  outline-offset: 1px;
}

/* ---------- Laden en inloggen ---------- */
.auth-boot .brand-mark, .auth-brand .brand-mark { flex-basis: 44px; width: 44px; height: 44px; }
.auth-boot .brand-mark svg, .auth-brand .brand-mark svg { width: 44px; height: 44px; }

/* ---------- Producten: één rustige tabel ---------- */
#productsCenter .pd-overview-list { gap: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); overflow: hidden; }
#productsCenter .pd-overview-card { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; background: transparent; box-shadow: none; padding: 12px 18px; transition: background 0.15s ease; }
#productsCenter .pd-overview-card:first-child { border-top: 0; }
#productsCenter .pd-overview-card:hover { background: rgba(255, 255, 255, 0.03); }
#productsCenter .pd-ov-cell { font-family: var(--font-num); }
#productsCenter .pd-ov-result, #productsCenter .pd-ov-testing, #productsCenter .pd-ov-identity { font-family: inherit; }
.pd-ov-result .pd-status { border: 0; background: transparent; padding: 0; color: #dfe3ef; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.pd-ov-result .pd-status::before { font-size: 11px; font-weight: 700; width: 12px; text-align: center; }
.pd-ov-result .pd-status.is-profit::before { content: "▲"; color: var(--testen); }
.pd-ov-result .pd-status.is-loss::before { content: "▼"; color: var(--afwijzen); }
.pd-ov-result .pd-status.is-muted::before { content: "—"; color: #6f789c; }
.pd-ov-result .pd-status.is-even::before { content: "!"; color: var(--twijfel); }
.pd-ov-testing .pd-status { border: 0; border-radius: 8px; padding: 4px 10px; font-weight: 600; background: rgba(255, 255, 255, 0.05); color: #dfe3ef; }
.pd-ov-testing .pd-status.is-even { background: rgba(91, 139, 255, 0.14); color: #c3d2ff; }

/* Products head, summary and sortable columns in the Productscan finish. */
body[data-agent="products"] .center-head-products { display: flex !important; align-items: center; gap: 12px; padding: 0; margin-bottom: 6px; border-bottom: 1px solid var(--line); min-height: 52px; }
body[data-agent="products"] .center-head-products > div:first-child { margin-right: auto; }
body[data-agent="products"] .center-head-products .title { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body[data-agent="products"] .center-head-products .subtitle { display: none; }
body[data-agent="products"] .center-head-products .page-help-btn { position: static; margin: 0; }
body[data-agent="products"] .center-head-products .pd-add-product-btn { width: auto; margin: 0; min-height: 38px; padding: 0 16px; }
.pd-summary:empty { display: none; }
.pd-summary { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.pd-sum-intro h2 { margin: 0; font-family: var(--font-brand); font-size: clamp(28px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.025em; }
.pd-sum-intro p { margin: 6px 0 0; font-size: 15px; color: #a6aed0; }
.pd-sum-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; overflow: hidden; background: rgba(10, 13, 26, 0.35); }
.pd-sum-kpi { padding: 16px 18px; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.pd-sum-kpi:first-child { border-left: 0; }
.pd-sum-kpi span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pd-sum-kpi strong { display: block; margin-top: 8px; font-family: var(--font-num); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-sum-kpi.is-up strong { color: var(--testen); }
.pd-sum-kpi.is-down strong { color: #ffb3bd; }
.pd-sum-note { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
#productsCenter .pd-toolbar { margin-bottom: 14px; }
#productsCenter .pd-overview-head { padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(10, 13, 26, 0.35); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
#productsCenter .pd-overview-head span:last-child { text-align: left; }
#productsCenter .pd-toolbar .pd-text-btn { min-height: 42px; padding: 0 16px; border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-weight: 600; font-size: 13px; text-decoration: none; }
#productsCenter .pd-toolbar .pd-text-btn:hover { background: rgba(91, 139, 255, 0.12); }
#productsCenter .pd-overview-head + .pd-overview-card { border-top: 0; }
.pd-sort { display: inline-flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.pd-sort i { font-style: normal; font-size: 11px; opacity: 0.45; }
.pd-sort:hover, .pd-sort.is-on { color: var(--text); }
.pd-sort.is-on i { opacity: 1; color: var(--ice); }
/* Lijstkoppen lopen nooit in elkaar over: smalle letterafstand en netjes afbreken binnen de eigen kolom. */
#productsCenter .pd-overview-head { align-items: end; }
#productsCenter .pd-overview-head > * { min-width: 0; }
#productsCenter .pd-overview-head .pd-sort { white-space: normal; text-align: right; line-height: 1.35; letter-spacing: 0.06em; hyphens: manual; }
#productsCenter .pd-overview-head .pd-sort i { flex: 0 0 auto; }
@media (max-width: 900px) { .pd-sum-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-sum-kpi:nth-child(3) { border-left: 0; } .pd-sum-kpi:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.07); } }
@media (max-width: 640px) {
  body[data-agent="products"] .center-head-products { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px; padding-bottom: 10px; }
  body[data-agent="products"] .center-head-products .page-help-btn { flex: 0 0 auto; min-height: 36px; font-size: 0; gap: 0; padding: 0 10px; }
  body[data-agent="products"] .center-head-products .pd-add-product-btn { flex: 0 0 auto; min-height: 36px; padding: 0 12px; font-size: 13px; }
}

/* ---------- Dashboard: same structure and finish as the Productscan ---------- */
body[data-agent="dashboard"] .center-head-dashboard { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 0; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
body[data-agent="dashboard"] .center-head-dashboard > div:first-child { display: flex; align-items: center; gap: 28px; min-width: 0; }
body[data-agent="dashboard"] .center-head-dashboard .title { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body[data-agent="dashboard"] .center-head-dashboard .subtitle { display: none; }
body[data-agent="dashboard"] .center-head-dashboard .dash-tabs { width: auto; margin: 0; padding: 0; gap: 28px; border: 0; background: none; border-radius: 0; overflow: visible; }
body[data-agent="dashboard"] .center-head-dashboard .dash-tab { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 14px 0; margin-bottom: -1px; color: var(--muted); font-size: 13px; font-weight: 500; box-shadow: none; }
body[data-agent="dashboard"] .center-head-dashboard .dash-tab.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--ice); background: none; }
body[data-agent="dashboard"] .center-head-dashboard .page-help-btn,
body[data-agent="dashboard"] .center-head-dashboard .settings-reset { position: static; margin: 0; }
/* Elke extra knop (zoals de beheerknoppen) komt in dezelfde rij, niet als smalle balk eronder. */
body[data-agent="dashboard"] .center-head-dashboard { grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }
body[data-agent="dashboard"] .center-head-dashboard .settings-reset { white-space: nowrap; align-items: center; justify-content: center; }
@media (max-width: 720px) {
  body[data-agent="dashboard"] .center-head-dashboard { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; }
  body[data-agent="dashboard"] .center-head-dashboard > div:first-child { flex: 1 1 auto; width: auto; gap: 20px; }
  /* De bovenbalk zegt al "Dashboard"; hier alleen de tabbladen. */
  body[data-agent="dashboard"] .center-head-dashboard .title { display: none; }
  body[data-agent="dashboard"] .center-head-dashboard .page-help-btn { flex: 0 0 auto; min-height: 36px; font-size: 0; gap: 0; padding: 0 10px; }
  /* Beheerknoppen samen op de eerste rij, elk de helft; tabs en hulpknop eronder. */
  body[data-agent="dashboard"] .center-head-dashboard .settings-reset { order: -1; flex: 1 1 calc(50% - 6px); box-sizing: border-box; min-width: 0; min-height: 36px; padding: 4px 10px; font-size: 12px; white-space: normal; line-height: 1.25; }
  body[data-agent="dashboard"] .center-head-dashboard > div:first-child { flex-basis: calc(100% - 56px); }
}
.dash-stack { gap: 18px; }
.dash-hello-card { background: transparent; border: 0; box-shadow: none; padding: 10px 0 4px; }
.dash-hello-title { font-family: var(--font-brand); font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.025em; }
.dash-hello-line { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #a6aed0; max-width: 70ch; }
.dash-card { border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); box-shadow: none; padding: 22px 24px; }
.dash-kicker { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.dash-next {
  position: relative; overflow: hidden; background: #10142a;
  border: 1px solid rgba(91, 139, 255, 0.35); border-radius: 18px; padding: 26px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center;
}
.dash-next::before { content: ""; position: absolute; left: -120px; top: -160px; width: 520px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 139, 255, 0.18), transparent 65%); pointer-events: none; }
.dash-next > * { position: relative; grid-column: 1; }
.dash-next .dash-kicker { display: inline-flex; justify-self: start; padding: 6px 12px; border-radius: 8px; background: rgba(91, 139, 255, 0.16); color: #c3d2ff; letter-spacing: 0.12em; }
.dash-next-title { font-family: var(--font-brand); font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin: 14px 0 8px; }
.dash-next .dash-copy { color: #a6aed0; font-size: 14px; line-height: 1.65; }
.dash-next .dash-next-btn { grid-column: 2; grid-row: 1 / span 4; width: auto; margin: 0; padding: 0 24px; min-height: 48px; }
.dash-results-head h2 { font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.dash-results-range { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
.dash-kpis { gap: 0; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; overflow: hidden; background: rgba(10, 13, 26, 0.35); }
.dash-kpi { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 16px 18px; border-left: 1px solid rgba(255, 255, 255, 0.07); border-top: 1px solid rgba(255, 255, 255, 0.07); margin: -1px 0 0 -1px; }
.dash-kpi span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); }
.dash-kpi strong { font-family: var(--font-num); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; margin-top: 8px; }
.dash-kpi.is-up strong { color: var(--testen); }
.dash-kpi.is-down strong { color: #ffb3bd; }
.dash-results-note { font-size: 12px; color: var(--muted); }
.dash-goal-card, .dash-roadmap-card { padding: 18px 20px; gap: 8px; }
.dash-roadmap-lesson, .dash-goal-amount { font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin: 4px 0 0; }
.dash-goal-amount { font-family: var(--font-num); font-weight: 500; }
.dash-meter { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dash-meter > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4f7dff, #7a9dff); }
.dash-roadmap-card .cta, .dash-goal-card .cta { width: auto; align-self: flex-start; margin-top: 10px; min-height: 38px; padding: 0 16px; background: transparent; color: #c3d2ff; border: 1px solid rgba(91, 139, 255, 0.4); box-shadow: none; }
.dash-roadmap-card .cta:hover, .dash-goal-card .cta:hover { background: rgba(91, 139, 255, 0.12); }
.dash-activity-panel { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); padding: 18px 20px; }
.dash-activity-panel h2 { font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.dash-activity li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dash-activity li:first-child { border-top: 0; }
.dash-activity time { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
/* Week-over-week changes, products of this week and the empty state for new students. */
.dash-kpi-change { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--muted); }
.dash-kpi-change b { font-weight: 700; }
.dash-kpi-change.is-up b { color: var(--testen); }
.dash-kpi-change.is-down b { color: var(--afwijzen); }
.dash-results-compare { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.dash-products-week { padding: 0; overflow: hidden; }
.dash-products-week .dash-results-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 18px 22px 14px; }
.dash-products-week .dash-more { border: 0; background: none; color: #9db4ff; font: 500 13px "IBM Plex Sans", sans-serif; cursor: pointer; padding: 0; }
.dash-prod-head, .dash-prod-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 80px 180px; gap: 16px; align-items: center; padding: 12px 22px; }
.dash-prod-head { border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dash-prod-head span:nth-child(2), .dash-prod-head span:nth-child(3), .dash-prod-head span:nth-child(4) { text-align: right; }
.dash-prod-row { width: 100%; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background 0.15s ease; }
.dash-prod-row:hover { background: rgba(255, 255, 255, 0.03); }
.dash-prod-name { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-prod-initial { flex: 0 0 30px; width: 30px; height: 38px; border-radius: 6px; background: #161b33; display: grid; place-items: center; color: #a6aed0; font-weight: 600; }
.dash-prod-num { text-align: right; font-family: var(--font-num); color: var(--copy); }
.dash-prod-num.is-loss { color: #ffb3bd; }
.dash-prod-num.is-win { color: var(--text); }
.dash-prod-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--copy); }
.dash-prod-state b { width: 12px; text-align: center; }
.dash-prod-state.is-win b { color: var(--testen); }
.dash-prod-state.is-loss b { color: var(--afwijzen); }
.dash-prod-state.is-partial b { color: var(--twijfel); }
.dash-week-quiet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; border-style: dashed; border-width: 1.5px; }
.dash-week-quiet h2 { font-family: var(--font-brand); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 4px; }
.dash-week-quiet .dash-copy { margin: 0; color: #a6aed0; }
.dash-quiet-mark { width: 52px; height: 52px; border-radius: 14px; background: rgba(91, 139, 255, 0.16); color: #c3d2ff; display: grid; place-items: center; font-size: 24px; }
.dash-week-quiet .cta { width: auto; margin: 0; padding: 0 18px; min-height: 44px; white-space: nowrap; }
@media (max-width: 860px) {
  .dash-prod-head { display: none; }
  .dash-prod-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dash-prod-row .dash-prod-num:nth-of-type(2), .dash-prod-row .dash-prod-num:nth-of-type(4) { display: none; }
  .dash-week-quiet { grid-template-columns: 1fr; }
}

/* Two layers like the Productscan: results left, Roadmap and Omzetdoel as a quiet side column. */
@media (min-width: 1101px) {
  .dash-stack { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
  .dash-stack > * { grid-column: 1 / -1; }
  .dash-stack > .dash-results { grid-column: 1; }
  .dash-stack > .dash-results:not(.dash-shopify):not(.dash-week-quiet) { grid-row: span 2; }
  .dash-stack > .dash-goal-card, .dash-stack > .dash-roadmap-card { grid-column: 2; }
}
@media (max-width: 860px) {
  .dash-next { grid-template-columns: 1fr; }
  .dash-next .dash-next-btn { grid-column: 1; grid-row: auto; margin-top: 14px; justify-self: start; }
}

/* ---------- Productdetail ---------- */
.pd-tabs { gap: 22px; border-bottom: 1px solid var(--line); }
.pd-tabs .pd-tab, .pd-tabs .pd-tab:hover, .pd-tabs .pd-tab:focus, .pd-tabs .pd-tab:active,
.pd-tabs .pd-tab[aria-selected="false"], .pd-tabs .pd-tab[aria-selected="false"]:hover {
  height: auto; min-height: 42px; max-height: none; line-height: normal;
  padding: 0 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; background-color: transparent; box-shadow: none;
  color: var(--muted); font-weight: 500; font-size: 14px;
}
.pd-tabs .pd-tab:hover, .pd-tabs .pd-tab[aria-selected="false"]:hover { color: var(--text); }
.pd-tabs .pd-tab.is-on, .pd-tabs .pd-tab.is-on:hover, .pd-tabs .pd-tab[aria-selected="true"], .pd-tabs .pd-tab[aria-selected="true"]:hover {
  background: transparent !important; background-color: transparent !important;
  color: var(--text) !important; border-color: transparent !important;
  border-bottom: 2px solid var(--ice) !important; box-shadow: none !important; font-weight: 600;
}
.pd-back-btn { background: transparent; border: 0; padding: 0; min-height: 32px; color: #9db4ff; }
.pd-back-btn:hover { background: transparent; color: #d0dbff; }
.pd-period { padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); gap: 2px; }
.pd-period .history-filter { border: 0; border-radius: 8px; background: transparent; color: #a6aed0; }
.pd-period .history-filter.is-on, .pd-period .history-filter[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.pd-perf-metrics { gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pd-perf-metric { border: 0; border-radius: 0; background: transparent; box-shadow: none; border-left: 1px solid rgba(255, 255, 255, 0.07); border-top: 1px solid rgba(255, 255, 255, 0.07); margin: -1px 0 0 -1px; }
.pd-perf-metric > :nth-child(2) { font-family: var(--font-num); font-weight: 500; }
.pd-link-card { background: rgba(255, 255, 255, 0.03); border-color: var(--line); border-radius: 16px; }
.center-head-product #pdName { font-family: var(--font-brand); font-size: 30px; font-weight: 700; letter-spacing: -0.025em; }
.center-head-product .pd-code { font-family: var(--font-num); color: var(--muted); }
#pdTabOverview:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
#pdTabOverview > * { flex: 1 1 100%; min-width: 0; margin-top: 0; margin-bottom: 0; }
#pdTabOverview > .pd-period { flex: 0 1 auto; width: auto; max-width: 100%; }
#pdTabOverview > #pdPeriodRange { flex: 1 1 auto; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-family: var(--font-num); font-size: 12px; color: var(--muted); }
#pdTabOverview .pd-sheet { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
#pdTabOverview .pd-sheet > .pd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#pdTabOverview .pd-sheet > .pd-toolbar h3 { margin: 0; font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
#pdTabOverview .pd-sheet > .pd-toolbar .cta { width: auto; margin: 0; min-height: 40px; padding: 0 16px; }
#pdTabAds .pd-ads-title h3 { margin: 0 0 2px; font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
#pdAdsImportDate { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
#pdTabAds .pd-empty-hero { max-width: none; margin: 18px 0 0; padding: 40px 24px; background: rgba(255, 255, 255, 0.03); border: 1.5px dashed var(--line); border-radius: 16px; box-shadow: none; }
#pdTabAds .pd-empty-hero h3 { font-family: var(--font-brand); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
#pdTabAds .pd-empty-hero .cta { width: auto; min-height: 44px; padding: 0 18px; }
#pdTabAds .pd-ads-block h3 { font-family: var(--font-brand); font-size: 16px; font-weight: 600; }
#pdTabPrices > p:first-child { color: var(--muted); font-size: 13px; }
.pd-price-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.pd-price-card-top h3 { font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pd-price-card .wc-field > span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.pd-price-card input { font-family: var(--font-num); background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.pd-price-card .wc-bep-outcome { background: rgba(91, 139, 255, 0.08); border: 1px solid rgba(91, 139, 255, 0.22); box-shadow: none; }
.pd-price-card .wc-day-result-kicker { font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }
.pd-price-card .wc-bep-value { font-family: var(--font-num); font-weight: 500; }
.pd-prices-actions .cta { width: auto; margin: 0; min-height: 40px; padding: 0 18px; }
#pdBundlesWrap, #pdTabPrices .pd-bundle { background: rgba(255, 255, 255, 0.03); border-color: var(--line); border-radius: 16px; box-shadow: none; }
#pdShopifySummary::before { content: "Shopify"; display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
#pdShopifySummary .pd-link-status { font-family: var(--font-brand); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
#pdShopifySummary .pd-link-id { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
#pdShopifySummary .pd-link-meta { color: var(--copy); font-size: 13px; }
/* Phone: tabs and period buttons stay on one line and scroll sideways instead of wrapping. */
@media (max-width: 860px) {
  .pd-tabs-bar { min-width: 0; }
  .pd-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 18px; max-width: 100%; min-width: 0; }
  .pd-tabs::-webkit-scrollbar { display: none; }
  .pd-tabs .pd-tab { flex: 0 0 auto; white-space: nowrap; }
  #productDetailCenter .pd-period { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  #productDetailCenter .pd-period .history-filter { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 480px) {
  #productDetailCenter .pd-period .history-filter { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Winst berekenen (sessie winst) ---------- */
/* Compact head, underline tabs, calm cards and mono figures. */
body[data-agent="calculator"] .center-head-calc { display: flex !important; align-items: center; gap: 12px; padding: 0; margin: 0 32px 6px; width: auto; max-width: 1186px; min-height: 52px; border-bottom: 1px solid var(--line); }
body[data-agent="calculator"] .center-head-calc > div:first-child { margin-right: auto; }
body[data-agent="calculator"] .center-head-calc .title { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body[data-agent="calculator"] .center-head-calc .subtitle { display: none; }
body[data-agent="calculator"] .center-head-calc .page-help-btn { position: static; margin: 0; }
#calcCenter #wcPage { gap: 18px; }
#calcCenter #wcPage .wc-tabs { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 28px; justify-content: flex-start; }
#calcCenter #wcPage .wc-tabs .wc-tab { flex: 0 0 auto; min-height: 0; padding: 14px 0; margin-bottom: -1px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; color: var(--muted); font-size: 13px; font-weight: 500; }
#calcCenter #wcPage .wc-tabs .wc-tab:hover { color: var(--text); }
#calcCenter #wcPage .wc-tabs .wc-tab.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--ice); }
#calcCenter #wcPage .wc-panel { border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); box-shadow: none; padding: 20px 22px; }
#calcCenter #wcPage .wc-panel-title { margin: 0 0 16px; font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
#calcCenter #wcPage .wc-overview-head h3, #calcCenter #wcPage .wc-extra-fees h3, #calcCenter #wcPage .wc-section-label,
#calcCenter #wcPage .wc-day-result-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
#calcCenter #wcPage .wc-section-label { display: block; margin-bottom: 10px; }
#calcCenter #wcPage .wc-field { color: #a6aed0; font-size: 13px; font-weight: 500; }
#calcCenter #wcPage .wc-field input { min-height: 46px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font-family: var(--font-num); font-size: 15px; box-shadow: none; }
#calcCenter #wcPage .wc-field input:focus { border-color: var(--ice); }
#calcCenter #wcPage .wc-field input::placeholder { color: #5d6688; }
#calcCenter #wcPage .wc-field input[readonly] { background: rgba(255, 255, 255, 0.02); border-color: var(--line); color: var(--copy); }
#calcCenter #wcPage .wc-primary-costs input { min-height: 52px; font-size: 20px; padding: 10px 16px; }
#calcCenter #wcPage .wc-loaded-overview input[readonly] { min-height: 0; height: auto; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
#calcCenter #wcPage .wc-fetch-btn { min-height: 42px; border-radius: 10px; background: var(--ice); color: #ffffff; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#calcCenter #wcPage .wc-fetch-btn:hover { background: var(--accent-hover); }
#calcCenter #wcPage #wcMetaCsvUpload, #calcCenter #wcPage .wc-profit-actions .wc-fetch-btn { background: transparent; color: #c3d2ff; border: 1px solid rgba(91, 139, 255, 0.4); box-shadow: none; }
#calcCenter #wcPage #wcMetaCsvUpload:hover, #calcCenter #wcPage .wc-profit-actions .wc-fetch-btn:hover { background: rgba(91, 139, 255, 0.12); }
#calcCenter #wcPage .wc-text-btn, #calcCenter #wcPage .wc-add { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: #9db4ff; font-size: 13px; font-weight: 600; box-shadow: none; }
#calcCenter #wcPage .wc-text-btn:hover, #calcCenter #wcPage .wc-add:hover { background: rgba(91, 139, 255, 0.12); color: #d0dbff; }
#calcCenter #wcPage .wc-link-status { gap: 7px; font-weight: 500; }
#calcCenter #wcPage .wc-link-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#calcCenter #wcPage .wc-fetch-status { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted); }
#calcCenter #wcPage .wc-quiet-help > summary, #calcCenter #wcPage .wc-csv-help > summary, #calcCenter #wcPage #wcDayPanel > details.wc-panel > summary { color: #a6aed0; }
#calcCenter #wcPage .wc-quiet-help > summary:hover, #calcCenter #wcPage .wc-csv-help > summary:hover { color: var(--text); }
/* Result card: the one highlighted surface, like the next step on the Dashboard. */
#calcCenter #wcDayResult { position: relative; overflow: hidden; background: #10142a; border: 1px solid rgba(91, 139, 255, 0.35); border-radius: 18px; box-shadow: none; padding: 22px 24px; }
#calcCenter #wcDayResult::before { content: ""; position: absolute; left: -120px; top: -160px; width: 480px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 139, 255, 0.16), transparent 65%); pointer-events: none; }
#calcCenter #wcDayResult > * { position: relative; }
#calcCenter #wcDayResult .wc-panel-title { width: fit-content; justify-self: start; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #c3d2ff; display: inline-flex; padding: 6px 12px; border-radius: 8px; background: rgba(91, 139, 255, 0.16); }
#calcCenter #wcDayResult .wc-result-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#calcCenter #wcDayResult .wc-result-value { font-family: var(--font-num); font-weight: 500; letter-spacing: -0.01em; }
#calcCenter #wcDayResult #wcProfit { font-size: clamp(32px, 3vw, 40px); }
#calcCenter #wcDayResult #wcCurrentRoas, #calcCenter #wcDayResult #wcProfitPct { font-size: 18px; line-height: 1.35; }
#calcCenter #wcDayResult .wc-result-row strong { font-family: var(--font-num); font-weight: 500; }
#calcCenter #wcPage .wc-day-missing { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 10px; color: var(--copy); }
/* Per product: totals as one joined band, products as quiet rows. */
#calcCenter #wcPage .wc-profit-metrics { gap: 0; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; overflow: hidden; background: rgba(10, 13, 26, 0.35); }
#calcCenter #wcPage .wc-profit-metrics button { border: 0; border-left: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0; background: transparent; padding: 16px 18px; box-shadow: none; }
#calcCenter #wcPage .wc-profit-metrics button:first-child { border-left: 0; }
#calcCenter #wcPage .wc-profit-metrics button:hover { background: rgba(255, 255, 255, 0.03); }
#calcCenter #wcPage .wc-profit-metric-copy > span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#calcCenter #wcPage .wc-profit-metrics strong { font-family: var(--font-num); font-weight: 500; font-size: 22px; color: var(--text); }
#calcCenter #wcPage .wc-profit-card, #calcCenter #wcPage .wc-unlinked-group { border-radius: 12px; background: rgba(10, 13, 26, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); padding: 14px 16px; }
#calcCenter #wcPage .wc-unlinked-group { padding: 0; }
#calcCenter #wcPage .wc-unlinked-list .wc-profit-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 0; }
#calcCenter #wcPage .wc-profit-card:hover { border-color: rgba(255, 255, 255, 0.14); }
#calcCenter #wcPage .wc-unlinked-total, #calcCenter #wcPage .wc-unlinked-revenue { font-family: var(--font-num); }
/* BEP: each bundle in its own block, outcome as a joined band. */
#calcCenter #wcPage .wc-bep-qty { margin-top: 18px; }
#calcCenter #wcPage .wc-bep-qty-head h3 { font-family: var(--font-brand); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#calcCenter #wcPage .wc-bep-outcome { padding: 16px 18px; border: 1px solid rgba(91, 139, 255, 0.3); border-radius: 14px; background: #10142a; }
#calcCenter #wcPage .wc-bep-outcome .wc-day-result-grid { gap: 0; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; overflow: hidden; background: rgba(10, 13, 26, 0.35); margin-top: 10px; }
#calcCenter #wcPage .wc-bep-outcome .wc-day-result-card { border: 0; border-left: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0; background: transparent; padding: 14px 16px; }
#calcCenter #wcPage .wc-bep-outcome .wc-day-result-card:first-child { border-left: 0; }
#calcCenter #wcPage .wc-bep-outcome .wc-day-result-value { font-family: var(--font-num); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
@media (max-width: 1100px) {
  body[data-agent="calculator"] .center-head-calc { margin: 0 0 6px; }
}
@media (max-width: 600px) {
  body[data-agent="calculator"] .center-head-calc { flex-direction: row !important; align-items: center !important; padding-bottom: 0; }
  body[data-agent="calculator"] .center-head-calc .page-help-btn { min-height: 36px; }
  #calcCenter #wcPage .wc-tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  #calcCenter #wcPage .wc-tabs .wc-tab { padding: 12px 0; font-size: 13px; white-space: nowrap; }
  #calcCenter #wcPage .wc-panel { padding: 16px; }
  #calcCenter #wcDayResult { padding: 18px; }
  #calcCenter #wcPage .wc-profit-metrics button { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  #calcCenter #wcPage .wc-profit-metrics button:first-child { border-top: 0; }
  #calcCenter #wcPage .wc-bep-outcome .wc-day-result-grid { grid-template-columns: minmax(0, 1fr); }
  #calcCenter #wcPage .wc-bep-outcome .wc-day-result-card { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  #calcCenter #wcPage .wc-bep-outcome .wc-day-result-card:first-child { border-top: 0; }
}

/* ---------- Leveranciersprijzen (sessie Leveranciersprijzen) ---------- */
body[data-agent="supplier-quotes"] .center-head-quotes { align-items: center; gap: 12px; width: calc(100% - 64px); max-width: 1186px; min-height: 52px; margin-bottom: 18px; padding: 0; border-bottom: 1px solid var(--line); }
body[data-agent="supplier-quotes"] .center-head-quotes > div:first-child { margin-right: auto; }
body[data-agent="supplier-quotes"] .center-head-quotes .title { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body[data-agent="supplier-quotes"] .center-head-quotes .subtitle { display: none; }
body[data-agent="supplier-quotes"] .center-head-quotes .center-head-actions { display: flex; align-items: center; gap: 8px; }
body[data-agent="supplier-quotes"] .center-head-quotes .page-help-btn { position: static; margin: 0; }
body[data-agent="supplier-quotes"] .center-head-quotes #sqHistoryBtn { min-height: 36px; padding: 0 14px; font-size: 13px; }
#supplierQuotesCenter .sq-steps { gap: 0; padding: 0; border-radius: 12px; background: rgba(10, 13, 26, 0.35); border-color: rgba(255, 255, 255, 0.07); overflow: hidden; }
#supplierQuotesCenter .sq-step { border-radius: 0; padding: 13px 16px; border-left: 1px solid rgba(255, 255, 255, 0.07); font-size: 13px; font-weight: 500; gap: 10px; }
#supplierQuotesCenter .sq-step:first-child { border-left: 0; }
#supplierQuotesCenter .sq-step.is-active { background: rgba(91, 139, 255, 0.1); box-shadow: inset 0 -2px 0 var(--ice); font-weight: 600; }
#supplierQuotesCenter .sq-step span { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: var(--muted); font-family: var(--font-num); font-size: 12px; font-weight: 500; }
#supplierQuotesCenter .sq-step.is-active span { color: var(--ice); }
#supplierQuotesCenter .sq-step.is-done span { background: none; color: var(--testen); }
#supplierQuotesCenter .sq-card { border-radius: 16px; background: rgba(255, 255, 255, 0.03); border-color: var(--line); padding: 22px 24px; }
#supplierQuotesCenter .sq-card h2, #supplierQuotesCenter .sq-history-dialog h2 { font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
#supplierQuotesCenter .sq-card p { font-size: 14px; color: #a6aed0; }
#supplierQuotesCenter .sq-card-head { margin-bottom: 16px; }
#supplierQuotesCenter .sq-product { padding: 10px 12px; border-radius: 12px; background: rgba(10, 13, 26, 0.35); border-color: rgba(255, 255, 255, 0.07); }
#supplierQuotesCenter .sq-card .sq-product-label { margin: 0; font-weight: 600; font-size: 13px; color: var(--copy); }
#supplierQuotesCenter .sq-name, #supplierQuotesCenter .sq-link, #supplierQuotesCenter .sq-file, #supplierQuotesCenter .sq-name-gate input { border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
#supplierQuotesCenter .sq-icon { border-radius: 10px; }
#supplierQuotesCenter .sq-secondary { border-radius: 10px; border-color: rgba(91, 139, 255, 0.4); color: #c3d2ff; font-weight: 600; font-size: 13px; padding: 10px 14px; }
#supplierQuotesCenter .sq-secondary:hover { background: rgba(91, 139, 255, 0.12); }
#supplierQuotesCenter .sq-primary { border-radius: 10px; background: var(--ice); color: #ffffff; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); transition: background 0.15s ease; }
#supplierQuotesCenter .sq-primary:hover { background: var(--accent-hover); }
#supplierQuotesCenter .sq-actions { display: flex; justify-content: flex-end; }
#supplierQuotesCenter .sq-actions .sq-primary { min-height: 44px; padding: 0 22px; }
#supplierQuotesCenter .sq-upload-zone { border-radius: 12px; background: rgba(10, 13, 26, 0.35); }
#supplierQuotesCenter .sq-upload-done { border-radius: 12px; }
#supplierQuotesCenter .sq-price strong { font-family: var(--font-num); font-weight: 500; }
#supplierQuotesCenter .office-modal-card.sq-history-dialog { border-radius: 16px; }
#supplierQuotesCenter .sq-history-item { padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
#supplierQuotesCenter .sq-history-item h3 { font-family: var(--font-num); font-weight: 500; font-size: 14px; }
#supplierQuotesCenter .sq-history-item p { font-size: 12px; }
#supplierQuotesCenter .sq-history-note { margin: 0; padding: 12px 14px; border: 1px solid rgba(255, 196, 107, 0.3); border-radius: 12px; background: rgba(255, 196, 107, 0.06); color: var(--copy); font-size: 13px; line-height: 1.5; }
#supplierQuotesCenter .sq-history-note strong { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
#supplierQuotesCenter .sq-history-note strong::before { content: "! "; color: var(--twijfel); }
@media (max-width: 720px) {
  body[data-agent="supplier-quotes"] .center-head-quotes { flex-direction: row; flex-wrap: wrap; gap: 10px; width: calc(100% - 28px); padding: 4px 0 12px; }
  body[data-agent="supplier-quotes"] .center-head-quotes > div:first-child { flex: 1 1 100%; }
  body[data-agent="supplier-quotes"] .center-head-quotes .title { white-space: nowrap; }
  body[data-agent="supplier-quotes"] .center-head-quotes .center-head-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  body[data-agent="supplier-quotes"] .center-head-quotes .page-help-btn, body[data-agent="supplier-quotes"] .center-head-quotes #sqHistoryBtn { min-height: 34px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  #supplierQuotesCenter .sq-row { grid-template-columns: auto minmax(0, 1fr); }
  #supplierQuotesCenter .sq-row .sq-product-label, #supplierQuotesCenter .sq-row .sq-link { grid-column: 1 / -1; }
  #supplierQuotesCenter .sq-row .sq-remove { justify-self: end; }
  #supplierQuotesCenter .sq-step { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 11px 14px; }
  #supplierQuotesCenter .sq-step:first-child { border-top: 0; }
  #supplierQuotesCenter .sq-card { padding: 18px 16px; }
  #supplierQuotesCenter .sq-actions { display: grid; justify-content: stretch; }
  #supplierQuotesCenter .sq-actions .sq-primary { width: 100%; }
}

/* ---------- Pakkettracking (sessie pakkettracking) ---------- */
/* Compact head, one joined stats band, underline filters, calm table and mono figures. */
body[data-agent="parcel-tracking"] .center { padding: 0 32px 48px; }
#parcelOffice .pt { --pt-bg: rgba(10, 13, 26, 0.5); --pt-panel: rgba(255, 255, 255, 0.03); --pt-border: var(--line); --pt-text: var(--text); --pt-muted: var(--muted); --pt-accent: var(--ice); font-family: inherit; color: var(--text); }
#parcelOffice .pt-head { align-items: center; gap: 12px; min-height: 52px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
#parcelOffice .pt-head > div:first-child { margin-right: auto; }
#parcelOffice .pt-head .pt-kicker, #parcelOffice .pt-head .pt-muted { display: none; }
#parcelOffice .pt-head h1 { margin: 0; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; color: var(--muted); }
#parcelOffice .pt button, #parcelOffice .pt .pt-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #c3d2ff; font-size: 13px; font-weight: 600; box-shadow: none; }
#parcelOffice .pt button:hover, #parcelOffice .pt .pt-button:hover { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.12); color: #d0dbff; }
#parcelOffice .pt .pt-primary { background: var(--ice); border-color: transparent; color: #ffffff; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#parcelOffice .pt .pt-primary:hover { background: var(--accent-hover); border-color: transparent; color: #ffffff; }
#parcelOffice .pt-notice { margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); color: var(--copy); font-size: 12px; line-height: 1.55; }
#parcelOffice .pt-stats { gap: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
#parcelOffice .pt-stat { padding: 16px 20px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
#parcelOffice .pt-stat:first-child { border-left: 0; }
#parcelOffice .pt-stat span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#parcelOffice .pt-stat span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
#parcelOffice .pt-stat:nth-child(2) span::before { background: var(--ice); }
#parcelOffice .pt-stat:nth-child(3) span::before { background: var(--twijfel); }
#parcelOffice .pt-stat:nth-child(4) span::before { background: var(--testen); }
#parcelOffice .pt-stat strong { margin-top: 6px; font-family: var(--font-num); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
#parcelOffice .pt-panel { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#parcelOffice .pt-tools { padding: 0 20px; border-bottom: 1px solid var(--line); }
#parcelOffice .pt-chips { gap: 28px; flex-wrap: nowrap; }
#parcelOffice .pt .pt-chips button { min-height: 0; padding: 16px 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
#parcelOffice .pt .pt-chips button:hover { background: none; color: var(--text); }
#parcelOffice .pt .pt-chips button[aria-pressed="true"] { background: none; color: var(--text); font-weight: 600; border-bottom-color: var(--ice); }
#parcelOffice .pt input, #parcelOffice .pt select { min-height: 38px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font-size: 13px; }
#parcelOffice .pt input:focus { border-color: var(--ice); outline: none; }
#parcelOffice .pt input::placeholder { color: #5d6688; }
#parcelOffice .pt th { padding: 12px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); }
#parcelOffice .pt td { padding: 14px 20px; border-top: 1px solid var(--line); color: var(--copy); }
#parcelOffice .pt td:first-child { font-family: var(--font-num); font-weight: 500; color: var(--text); }
#parcelOffice .pt td small { color: var(--muted); }
#parcelOffice .pt td:nth-child(3) small, #parcelOffice .pt-meta span { font-family: var(--font-num); }
#parcelOffice .pt tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
#parcelOffice .pt .pt-row-btn { min-height: 32px; padding: 0 12px; font-size: 12px; }
#parcelOffice .pt-pill { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--copy); font-weight: 600; }
#parcelOffice .pt-pill[data-status="delivered"] { color: var(--testen); background: rgba(126, 224, 181, 0.1); }
#parcelOffice .pt-pill[data-status="label"], #parcelOffice .pt-pill[data-status="transit"], #parcelOffice .pt-pill[data-status="delivery"], #parcelOffice .pt-pill[data-status="pickup"] { color: #9db4ff; background: rgba(91, 139, 255, 0.12); }
#parcelOffice .pt-pill[data-status="exception"] { color: var(--twijfel); background: rgba(255, 196, 107, 0.1); }
#parcelOffice .pt-pill[data-status="returned"], #parcelOffice .pt-pill[data-status="cancelled"] { color: var(--afwijzen); background: rgba(255, 143, 156, 0.1); }
#parcelOffice .pt-alert { color: var(--twijfel); }
#parcelOffice .pt-error { color: var(--afwijzen); }
#parcelOffice .pt-footer { padding: 14px 20px; border-top: 1px solid var(--line); }
#parcelOffice .pt-empty h2, #parcelOffice .pt dialog h2 { font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
#parcelOffice .pt dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
#parcelOffice .pt-shipment, #parcelOffice .pt-mode { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
#parcelOffice .pt-shipment h3 { font-family: var(--font-brand); font-weight: 600; }
#parcelOffice .pt-share code { background: rgba(10, 13, 26, 0.5); border: 1px solid var(--line); font-family: var(--font-num); }
#parcelOffice .pt-timeline time { font-family: var(--font-num); }
@media (max-width: 800px) {
  body[data-agent="parcel-tracking"] .center { padding: 0 16px 32px; }
  #parcelOffice .pt-head { align-items: stretch; gap: 10px; padding: 14px 0; }
  #parcelOffice .pt-head .pt-actions { width: 100%; flex-wrap: nowrap; }
  #parcelOffice .pt-head .pt-actions > * { white-space: nowrap; }
  #parcelOffice .pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #parcelOffice .pt-stat { padding: 14px 16px; }
  #parcelOffice .pt-stat:nth-child(3) { border-left: 0; }
  #parcelOffice .pt-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  #parcelOffice .pt-tools { align-items: stretch; gap: 0; padding: 0 16px 14px; }
  #parcelOffice .pt-chips { gap: 20px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
  #parcelOffice .pt .pt-chips button { padding: 14px 0; white-space: nowrap; }
}

/* ---------- Instellingen (sessie instellingen) ---------- */
/* Settings window: kicker head, calm side list, Sora pane titles, quiet fields and one blue accent. */
#settingsModal .settings-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); }
#settingsModal .settings-head { align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: transparent; }
#settingsModal .settings-head h3 { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; color: var(--muted); }
#settingsModal .settings-head .subtitle { display: none; }
#settingsModal .settings-head > div:first-child { margin-right: auto; }
#settingsModal .settings-head .page-help-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #c3d2ff; font-size: 12px; font-weight: 600; }
#settingsModal .settings-head .page-help-btn:hover { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.12); }
#settingsModal .settings-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); }
#settingsModal .settings-nav { gap: 2px; padding: 12px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
#settingsModal .settings-nav-item { padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; }
#settingsModal .settings-nav-copy strong { font-size: 13px; font-weight: 600; color: var(--text); }
#settingsModal .settings-nav-copy small { font-size: 12px; color: var(--muted); }
#settingsModal .settings-nav-item:hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; }
#settingsModal .settings-nav-item.is-on { background: rgba(91, 139, 255, 0.1); border-color: rgba(91, 139, 255, 0.28); box-shadow: none; }
#settingsModal .settings-nav-item.is-on .settings-nav-arrow { color: var(--ice); }
#settingsModal .settings-detail { padding: 24px 28px; }
#settingsModal .settings-pane h4 { font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
#settingsModal .settings-pane-lead, #settingsModal .settings-desc { margin: 6px 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
#settingsModal .settings-form .settings-label, #settingsModal .settings-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#settingsModal .settings-form input, #settingsModal .settings-form select, #settingsModal .settings-pane select { min-height: 40px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font-size: 13px; box-shadow: none; }
#settingsModal .settings-form input:focus, #settingsModal .settings-pane select:focus { border-color: var(--ice); outline: none; }
#settingsModal .settings-form input[readonly] { color: var(--muted); }
#settingsModal #settingsVat, #settingsModal #settingsFee, #settingsModal #settingsAdSpend, #settingsModal #settingsLightLoss { font-family: var(--font-num); }
#settingsModal .settings-row { border-bottom: 1px solid var(--line); }
#settingsModal .cta { min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: var(--ice); color: #ffffff; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#settingsModal .cta:hover { background: var(--accent-hover); }
#settingsModal .result-action { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #c3d2ff; font-size: 13px; font-weight: 600; box-shadow: none; }
#settingsModal .result-action:hover { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.12); color: #d0dbff; }
#settingsModal .settings-reset { color: var(--muted); font-size: 12px; }
#settingsModal .settings-form > .result-action, #settingsModal .settings-form > .settings-reset { justify-self: start; width: auto; }
#settingsModal #settingsShopifyNav:empty { display: none; }
#settingsModal .settings-reset:hover { color: var(--text); }
#settingsModal .settings-choice, #settingsModal .lang-switch { display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
#settingsModal .settings-choice button, #settingsModal .lang-switch button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; box-shadow: none; }
#settingsModal .settings-choice button.is-on, #settingsModal .lang-switch button.is-on, #settingsModal .lang-switch button[aria-pressed="true"] { background: rgba(91, 139, 255, 0.16); color: #d0dbff; }
#settingsModal .settings-toggle { min-height: 32px; min-width: 64px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 12px; font-weight: 600; box-shadow: none; }
#settingsModal .settings-toggle.is-on { border-color: rgba(126, 224, 181, 0.35); background: rgba(126, 224, 181, 0.1); color: var(--testen); }
#settingsModal .calc-field-hint, #settingsModal .settings-hint { color: var(--muted); font-size: 12px; }
#settingsModal #shopifyConnectionCard, #settingsModal .settings-admin-tile, #settingsModal .lb-admin { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#settingsModal #shopifyCardStatus { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#settingsModal #shopifyShopName { font-family: var(--font-brand); font-size: 16px; font-weight: 600; color: var(--text); }
#settingsModal #shopifyShopDomain { font-family: var(--font-num); font-size: 12px; }
#settingsModal .shopify-steps { gap: 2px; margin: 0 0 16px; }
#settingsModal .shopify-steps li { padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: 13px; }
#settingsModal .shopify-steps li.is-done { color: var(--copy); }
#settingsModal .shopify-steps li.is-current { background: rgba(91, 139, 255, 0.1); color: #d0dbff; font-weight: 600; }
#settingsModal .settings-admin-tile h4 { font-size: 15px; }
#settingsModal .settings-admin-tile p { color: var(--muted); font-size: 12px; line-height: 1.5; }
#settingsModal details summary { color: #c3d2ff; font-size: 13px; cursor: pointer; }
@media (max-width: 760px) {
  #settingsModal .settings-card { border: 0; border-radius: 0; }
  #settingsModal .settings-head { padding: 10px 16px; }
  #settingsModal .settings-nav { padding: 10px; border-right: 0; }
  #settingsModal .settings-detail { padding: 16px; }
  #settingsModal .settings-back { color: #c3d2ff; font-size: 13px; font-weight: 600; }
}

/* ---------- Webshop bouwen (sessie webshop-bouwen) ---------- */
/* Compact head, one calm card finish, muted kickers and Sora headings. */
body[data-agent="webshop-bouwen"] .center-head.center-head-webshop-build { display: flex; align-items: center; gap: 12px; padding: 0; margin: 0 auto 6px; width: calc(100% - 64px); max-width: 1186px; min-height: 52px; border-bottom: 1px solid var(--line); }
body[data-agent="webshop-bouwen"] .center-head-webshop-build .title { margin: 0; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body[data-agent="webshop-bouwen"] .center-head-webshop-build .subtitle { display: none; }
#webshopBuildCenter .wb-hub { padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#webshopBuildCenter .wb-hub-head .wb-kicker { display: none; }
#webshopBuildCenter .wb-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted) !important; }
#webshopBuildCenter .wb-hub-head h2, #webshopBuildCenter .wb-subhead h2 { font-family: var(--font-brand); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
#webshopBuildCenter .wb-hub-group-head h3 { font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
#webshopBuildCenter .wb-hub .wb-choice-card, #webshopBuildCenter .wb-hub .wb-choice-feature { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: none; transition: border-color 0.15s ease, background 0.15s ease; }
#webshopBuildCenter .wb-hub .wb-choice-card:hover { transform: none; border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.06); }
#webshopBuildCenter .wb-hub .wb-choice-feature { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.07); }
#webshopBuildCenter .wb-hub .wb-choice-card strong { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em; }
#webshopBuildCenter .wb-hub .wb-choice-card > span:not(.wb-choice-icon) { color: #a6aed0; }
#webshopBuildCenter .wb-hub .wb-choice-icon { border-radius: 10px; background: rgba(91, 139, 255, 0.1); color: var(--ice); }
#webshopBuildCenter .wb-hub .wb-choice-card em { color: var(--ice); }
#webshopBuildCenter .wb-area-back { border-radius: 10px; background: transparent; border-color: var(--line); color: var(--muted); }
#webshopBuildCenter .wb-area-back:hover { color: var(--text); border-color: rgba(91, 139, 255, 0.45); }
#webshopBuildCenter .pp-list-tools { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#webshopBuildCenter .pp-list-tools input, #webshopBuildCenter .pp-list-tools select { border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
#webshopBuildCenter .pp-list-count { font-family: var(--font-num); color: var(--muted); }
#webshopBuildCenter .pp-page-row { border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#webshopBuildCenter .pp-page-row:hover { border-color: rgba(91, 139, 255, 0.35); }
#webshopBuildCenter .pp-page-title { font-weight: 600; }
#webshopBuildCenter .pp-page-meta > span:not(.pp-page-status) { font-family: var(--font-num); }
#webshopBuildCenter .pp-page-status { border-radius: 999px; }
#webshopBuildCenter .pp-page-status.is-ready { background: rgba(126, 224, 181, 0.1); color: var(--testen); }
#webshopBuildCenter .pp-page-status.is-shopify { background: rgba(91, 139, 255, 0.12); color: #c3d2ff; }
#webshopBuildCenter .pp-page-actions .result-action { border-radius: 10px; }
#webshopBuildCenter .wb-subhead { padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#webshopBuildCenter .wb-catalog-tools { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#webshopBuildCenter .wb-catalog-tools input { border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
#webshopBuildCenter .wb-filter-chips button.is-on { background: rgba(91, 139, 255, 0.14); border-color: rgba(91, 139, 255, 0.4); color: var(--text); }
#webshopBuildCenter .wb-section { border-radius: 16px; border-color: var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#webshopBuildCenter .wb-section > .wb-overview { border-color: transparent; background: transparent; box-shadow: none; }
#webshopBuildCenter .wb-overview h3 { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em; }
#webshopBuildCenter .pp-import-card { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#webshopBuildCenter .pp-import-card h2 { font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
#webshopBuildCenter .pp-import-card input, #webshopBuildCenter .pp-import-card select { border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
#webshopBuildCenter .pp-import-tools .result-action { border-radius: 10px; background: transparent; border-color: var(--line); color: var(--muted); }
@media (max-width: 720px) {
  body[data-agent="webshop-bouwen"] .center-head.center-head-webshop-build { width: calc(100% - 28px); padding: 4px 0 10px; min-height: 0; }
  body[data-agent="webshop-bouwen"] #webshopBuildCenter { padding-left: 14px; padding-right: 14px; }
  #webshopBuildCenter .wb-hub-head h2, #webshopBuildCenter .wb-subhead h2 { font-size: 22px; }
}

/* ---------- Inloggen (sessie inloggen) ---------- */
/* Loading and login screens: kicker line, Sora title, calm card, quiet fields and one blue accent. */
#authBoot, #authScreen, #accessBlocked { background: transparent; }
#authBoot .auth-boot-card { gap: 8px; }
#authBoot .auth-boot-title { margin-top: 6px; font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
#authBoot .auth-boot-copy { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
#authBoot .auth-boot-card::after { content: ""; order: 9; width: 120px; height: 2px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ice), transparent) 0 0 / 50% 100% no-repeat, var(--line); animation: authBootBar 1.4s ease-in-out infinite; }
#authBoot .auth-boot-error { color: #ffb3bd; font-size: 13px; }
#authBoot .auth-boot-card:has(#authBootError:not([hidden]))::after { display: none; }
@keyframes authBootBar { from { background-position: -100% 0, 0 0; } to { background-position: 200% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { #authBoot .auth-boot-card::after { animation: none; background-position: 50% 0, 0 0; } }
#authScreen .auth-card { width: min(400px, 100%); padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
#authScreen .auth-lang { justify-content: flex-start; gap: 2px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#authScreen .auth-lang button { min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
#authScreen .auth-lang button:hover { color: var(--text); }
#authScreen .auth-lang button.is-on { border-color: rgba(91, 139, 255, 0.28); background: rgba(91, 139, 255, 0.1); color: #c3d2ff; }
#authScreen .auth-brand { align-items: flex-start; gap: 14px; margin-bottom: 20px; }
#authScreen .auth-card h1 { margin: 2px 0 6px; font-family: var(--font-brand); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
#authScreen .auth-card .auth-lead { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
#authScreen .auth-card .label { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#authScreen .auth-card input { display: block; min-height: 42px; padding: 0 12px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font: inherit; font-size: 14px; box-shadow: none; outline: none; }
#authScreen .auth-card input:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(91, 139, 255, 0.16); }
#authScreen .auth-password input { padding-right: 44px; }
#authScreen .auth-eye:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
#authScreen .auth-error { color: #ffb3bd; }
#authScreen .auth-card .cta { min-height: 44px; margin-top: 20px; border: 1px solid transparent; border-radius: 10px; background: var(--ice); color: #ffffff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#authScreen .auth-card .cta:hover:not(:disabled) { background: var(--accent-hover); }
#authScreen .auth-card .cta:disabled { opacity: 0.55; box-shadow: none; cursor: not-allowed; }
#authScreen #authRequestNewLink { margin-top: 10px; }
#authScreen #authResetPassword { display: block; width: auto; margin: 14px auto 0; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: #c3d2ff; font-size: 13px; font-weight: 500; }
#authScreen #authResetPassword:hover { background: rgba(91, 139, 255, 0.1); }
#accessBlocked .access-gate-card { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
#accessBlocked .access-gate-card h1 { font-family: var(--font-brand); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
#accessBlocked .access-gate-card p { color: var(--muted); font-size: 14px; }
#accessBlocked .cta { min-height: 40px; padding: 0 16px; border-radius: 10px; background: var(--ice); color: #ffffff; font-weight: 600; }
#accessBlocked .auth-tab { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 10px; color: #c3d2ff; font-weight: 600; }
html[data-theme="light"] #authScreen .auth-card, html[data-theme="light"] #accessBlocked .access-gate-card { background: #ffffff; box-shadow: 0 16px 48px rgba(20, 30, 60, 0.08); }
html[data-theme="light"] #authScreen .auth-card input { border-color: #d5dbe8; background: #f7f9fc; }
html[data-theme="light"] #authScreen .auth-lang button.is-on, html[data-theme="light"] #authScreen #authResetPassword, html[data-theme="light"] #accessBlocked .auth-tab { color: var(--ice); }
html[data-theme="light"] #authScreen .auth-error, html[data-theme="light"] #authBoot .auth-boot-error { color: #c23a4e; }
@media (max-width: 520px) {
  #authScreen, #authBoot { padding: 16px; }
  #authScreen .auth-card { padding: 18px 16px 20px; border-radius: 14px; }
  #authScreen .auth-brand .brand-mark { flex-basis: 36px; width: 36px; height: 36px; }
  #authScreen .auth-brand .brand-mark svg { width: 36px; height: 36px; }
  #authScreen .auth-card h1 { font-size: 20px; }
  #authScreen .auth-card input { font-size: 16px; }
}
/* ---------- Roadmap (sessie roadmap) ---------- */
/* Compact head, one highlighted summary, calm phase cards and mono figures. */
body[data-agent="roadmap"]:has(.rm-quiet) .center-head.center-head-roadmap { display: flex !important; align-items: center; gap: 12px; padding: 0; margin: 0 auto 6px; width: 100%; max-width: 1100px; min-height: 52px; border-bottom: 1px solid var(--line); }
body[data-agent="roadmap"]:has(.rm-quiet) .center-head-roadmap > div:first-child { margin-right: auto; }
body[data-agent="roadmap"]:has(.rm-quiet) .center-head-roadmap .title { margin: 0; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body[data-agent="roadmap"]:has(.rm-quiet) .center-head-roadmap .subtitle { display: none; }
body[data-agent="roadmap"]:has(.rm-quiet) .center-head-roadmap .center-head-actions { display: flex; align-items: center; gap: 8px; }
body[data-agent="roadmap"]:has(.rm-quiet) .center-head-roadmap .page-help-btn { position: static; margin: 0; }
body[data-agent="roadmap"]:has(.rm-quiet) #roadmapEditBtn { min-height: 34px; margin: 0; padding: 0 14px; border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-size: 13px; font-weight: 600; box-shadow: none; }
body[data-agent="roadmap"]:has(.rm-quiet) #roadmapEditBtn:hover { background: rgba(91, 139, 255, 0.12); }
#roadmapCenter .rm-quiet { gap: 22px; padding-top: 12px; }
/* Summary: the one highlighted surface, like the next step on the Dashboard. */
#roadmapCenter .rm-quiet .rm-journey-summary { position: relative; background: #10142a; border: 1px solid rgba(91, 139, 255, 0.35); border-radius: 18px; }
#roadmapCenter .rm-quiet .rm-journey-summary::before { content: ""; position: absolute; left: -120px; top: -160px; width: 520px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 139, 255, 0.18), transparent 65%); pointer-events: none; }
#roadmapCenter .rm-quiet .rm-journey-summary > * { position: relative; }
#roadmapCenter .rm-quiet .rm-journey-summary .rm-board-upcoming { padding: 26px 28px; }
#roadmapCenter .rm-quiet .rm-quiet-kicker { display: inline-flex; margin: 0 0 14px; padding: 6px 12px; border-radius: 8px; background: rgba(91, 139, 255, 0.16); color: #c3d2ff; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; }
#roadmapCenter .rm-quiet .rm-journey-summary .rm-board-upcoming h3 { font-family: var(--font-brand); font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
#roadmapCenter .rm-quiet .rm-next-goal, #roadmapCenter .rm-quiet .rm-quiet-meta { color: #a6aed0; font-size: 14px; line-height: 1.6; }
#roadmapCenter .rm-quiet .rm-board-go { min-height: 42px; gap: 12px; border-radius: 10px; background: var(--ice); color: #ffffff; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#roadmapCenter .rm-quiet .rm-board-go:hover { background: var(--accent-hover); }
#roadmapCenter .rm-quiet .rm-journey-summary .rm-board-progress { padding: 26px 28px; border-left-color: rgba(255, 255, 255, 0.07); }
#roadmapCenter .rm-quiet .rm-board-progress > div:first-child { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#roadmapCenter .rm-quiet .rm-board-progress strong { font-family: var(--font-num); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
#roadmapCenter .rm-quiet .rm-track.is-overall { height: 6px; margin-top: 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
#roadmapCenter .rm-quiet .rm-track span, #roadmapCenter .rm-quiet .rm-phase-meter > span { background: var(--ice); opacity: 1; }
/* Route: Sora heading, quiet search, phases as calm cards. */
#roadmapCenter .rm-route-heading h2 { font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
#roadmapCenter .rm-route-heading p { color: var(--muted); }
#roadmapCenter .rm-route-search .rm-search { border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
#roadmapCenter .rm-route-search .rm-search:focus-within { border-color: var(--ice); }
#roadmapCenter .rm-quiet .rm-quiet-phases { gap: 10px; }
#roadmapCenter .rm-quiet .rm-quiet-phase { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#roadmapCenter .rm-quiet .rm-quiet-phase:hover { border-color: rgba(91, 139, 255, 0.35); }
#roadmapCenter .rm-quiet .rm-quiet-phase.is-open { border-color: rgba(91, 139, 255, 0.45); }
#roadmapCenter .rm-quiet .rm-board-phase { min-height: 74px; padding: 14px 22px; }
#roadmapCenter .rm-quiet .rm-board-phase:hover { background-color: transparent; }
#roadmapCenter .rm-quiet .rm-board-phase.is-selected { border-bottom-color: var(--line); }
#roadmapCenter .rm-quiet .rm-phase-number { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); color: var(--muted); font-family: var(--font-num); font-size: 13px; font-weight: 500; }
#roadmapCenter .rm-quiet .rm-board-phase.is-done .rm-phase-number { color: #c3d2ff; background: rgba(91, 139, 255, 0.1); border-color: rgba(91, 139, 255, 0.25); }
#roadmapCenter .rm-quiet .rm-board-phase.is-selected .rm-phase-number { color: var(--ice); border-color: var(--ice); background: rgba(91, 139, 255, 0.12); }
#roadmapCenter .rm-quiet .rm-phase-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); }
#roadmapCenter .rm-quiet .rm-quiet-phase-title { font-family: var(--font-brand); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#roadmapCenter .rm-quiet .rm-quiet-count { font-size: 12px; color: var(--muted); }
#roadmapCenter .rm-quiet .rm-phase-meter { width: 80px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
#roadmapCenter .rm-quiet .is-selected .rm-quiet-chevron { border-color: var(--ice); }
/* Lessons inside an open phase: quiet rows, the next lesson highlighted. */
#roadmapCenter .rm-quiet .rm-board-lesson { min-height: 58px; border-radius: 10px; color: var(--copy); }
#roadmapCenter .rm-quiet .rm-board-lesson:hover { border-color: rgba(91, 139, 255, 0.25); background: rgba(91, 139, 255, 0.06); }
#roadmapCenter .rm-quiet .rm-board-lesson.is-current { border-color: rgba(91, 139, 255, 0.35); background: rgba(91, 139, 255, 0.08); box-shadow: none; color: var(--text); }
#roadmapCenter .rm-quiet .rm-lesson-index { border-color: var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.02); font-family: var(--font-num); }
#roadmapCenter .rm-quiet .rm-board-lesson.is-current .rm-lesson-index { border-color: var(--ice); color: var(--ice); }
#roadmapCenter .rm-quiet .rm-board-lesson.is-done .rm-board-end, #roadmapCenter .rm-quiet .rm-board-end { color: var(--ice); }
#roadmapCenter .rm-quiet button:focus-visible { outline-color: var(--ice); }
@media (max-width: 1100px) {
  body[data-agent="roadmap"]:has(.rm-quiet) .center-head.center-head-roadmap { margin: 0 0 6px; }
}
@media (max-width: 760px) {
  body[data-agent="roadmap"]:has(.rm-quiet) .center-head.center-head-roadmap { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; row-gap: 8px; padding-bottom: 8px; }
  body[data-agent="roadmap"]:has(.rm-quiet) .center-head-roadmap .page-help-btn, body[data-agent="roadmap"]:has(.rm-quiet) #roadmapEditBtn { min-height: 36px; }
  #roadmapCenter .rm-quiet { gap: 18px; padding-top: 8px; }
  #roadmapCenter .rm-quiet .rm-journey-summary .rm-board-upcoming { padding: 20px 18px; }
  #roadmapCenter .rm-quiet .rm-journey-summary .rm-board-progress { padding: 16px 18px 20px; border-top-color: rgba(255, 255, 255, 0.07); }
  #roadmapCenter .rm-quiet .rm-board-progress strong { font-size: 20px; }
  #roadmapCenter .rm-quiet .rm-board-phase { min-height: 0; padding: 14px 16px; }
  #roadmapCenter .rm-quiet .rm-phase-number { width: 34px; height: 36px; font-size: 12px; }
  #roadmapCenter .rm-quiet .rm-quiet-phase-title { font-size: 14px; }
  #roadmapCenter .rm-quiet .rm-board-lesson { min-height: 52px; }
}

/* ---------- Ecom AI Coach (sessie ai-coach) ---------- */
/* Same welcome and chat layout; kicker head, Sora title, calm cards, quiet composer and one blue accent. */
body[data-agent="ai-coach"] .center-head.center-head-ai-coach { align-items: center; min-height: 52px; margin-bottom: 6px; padding: 0; border-bottom: 1px solid var(--line); }
body[data-agent="ai-coach"] .center-head-ai-coach .title { margin: 0; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; color: var(--muted); }
body[data-agent="ai-coach"] .center-head-ai-coach .subtitle { display: none; }
body[data-agent="ai-coach"] .coach-history-menu summary { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #c3d2ff; font-size: 12px; font-weight: 600; }
body[data-agent="ai-coach"] .coach-history-menu summary:hover, body[data-agent="ai-coach"] .coach-history-menu summary:focus-visible { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.12); outline: none; }
body[data-agent="ai-coach"] .coach-history-panel { border-radius: 14px; background: var(--panel); border-color: var(--line); }
body[data-agent="ai-coach"] .coach-history-item { border-radius: 10px; }
body[data-agent="ai-coach"] .coach-history-item.is-on { background: rgba(91, 139, 255, 0.1); }
body[data-agent="ai-coach"] .coach-history-new { min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; background: var(--ice); color: #ffffff; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
body[data-agent="ai-coach"] .coach-history-new:hover, body[data-agent="ai-coach"] .coach-history-new:focus-visible { background: var(--accent-hover); filter: none; }
#aiCoachCenter .coach-empty-title { font-family: var(--font-brand); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
#aiCoachCenter .coach-empty-lead { color: var(--muted); }
#aiCoachCenter .coach-example { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); color: var(--copy); font-weight: 500; box-shadow: none; transition: border-color 0.15s ease, background 0.15s ease; }
#aiCoachCenter .coach-example:hover, #aiCoachCenter .coach-example:focus-visible { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.06); color: var(--text); }
#aiCoachCenter .coach-composer { padding: 8px 8px 8px 16px; border: 1px solid #262e52; border-radius: 16px; background: rgba(10, 13, 26, 0.5); box-shadow: none; }
#aiCoachCenter .coach-composer:focus-within { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(91, 139, 255, 0.14); }
#aiCoachCenter .coach-composer textarea::placeholder { color: #5d6688; }
#aiCoachCenter .coach-send { min-height: 38px; padding: 0 16px; border-radius: 10px; background: var(--ice); color: #ffffff; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#aiCoachCenter .coach-send:hover:not(:disabled) { background: var(--accent-hover); filter: none; }
#aiCoachCenter .coach-msg { border-radius: 16px; border-color: var(--line); }
#aiCoachCenter .coach-msg.is-coach { background: rgba(255, 255, 255, 0.03); }
#aiCoachCenter .coach-msg.is-user { background: rgba(91, 139, 255, 0.1); border-color: rgba(91, 139, 255, 0.28); }
#aiCoachCenter .coach-answer-h { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; }
#aiCoachCenter .coach-feedback-btn, #aiCoachCenter .coach-retry, #aiCoachCenter .coach-open-product, #aiCoachCenter .coach-jump { border-radius: 10px; border-color: var(--line); background: transparent; color: #c3d2ff; font-weight: 600; }
#aiCoachCenter .coach-feedback-btn:hover, #aiCoachCenter .coach-retry:hover, #aiCoachCenter .coach-open-product:hover, #aiCoachCenter .coach-jump:hover { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.12); }
#aiCoachCenter .coach-feedback-btn.is-on { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.12); color: #d0dbff; }
#aiCoachCenter .coach-product-chip, #aiCoachCenter .coach-extra-chip { border-radius: 10px; border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
#aiCoachCenter .coach-scan-card { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
#aiCoachCenter .coach-scan-heading strong { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 720px) {
  body[data-agent="ai-coach"] .center-head.center-head-ai-coach { flex-wrap: nowrap; padding: 4px 0 10px; min-height: 0; }
  body[data-agent="ai-coach"] .center-head-ai-coach .title { white-space: nowrap; }
  body[data-agent="ai-coach"] .center-head-ai-coach .coach-head-actions { flex-wrap: nowrap; width: auto; }
  body[data-agent="ai-coach"] .center-head-ai-coach .coach-history-bar { width: auto; }
  #aiCoachCenter .coach-empty-title { font-size: 22px; }
}
/* Roadmap: the phase with the next lesson stands out, finished phases step back. */
#roadmapCenter .rm-quiet .rm-quiet-phase.is-here { border-color: rgba(91, 139, 255, 0.55); background: rgba(91, 139, 255, 0.06); }
#roadmapCenter .rm-quiet .rm-quiet-phase.is-here .rm-phase-number { color: var(--ice); border-color: var(--ice); background: rgba(91, 139, 255, 0.12); }
#roadmapCenter .rm-quiet .rm-quiet-phase.is-here .rm-quiet-count > span:first-child { color: #c3d2ff; font-weight: 600; }
#roadmapCenter .rm-quiet:has(.is-here) .rm-quiet-phase:not(.is-here):not(.is-open):has(.rm-board-phase.is-done) .rm-board-phase { opacity: 0.6; }
#roadmapCenter .rm-quiet:has(.is-here) .rm-quiet-phase:not(.is-here):not(.is-open):has(.rm-board-phase.is-done):hover .rm-board-phase { opacity: 1; }

/* ---------- Pop-ups (sessie hoofd) ---------- */
/* Shared office modals: calm backdrop, scan-style card, Sora titles and consistent buttons. */
.office-modal { background: rgba(5, 7, 15, 0.72); backdrop-filter: blur(6px); }
.office-modal-card { position: relative; background: #10142a; border: 1px solid rgba(91, 139, 255, 0.22); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); }
.office-modal-card:not(.is-eval):not(.settings-card):not(.sq-history-dialog):not(.onboarding-dialog) { padding: 24px; }
.office-modal-card > h2, .office-modal-card > h3, .office-modal-card .pd-testday-head h3 { font-family: var(--font-brand); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.office-modal-card > h2, .office-modal-card > h3 { margin: 0 0 14px; }
.office-modal-card > h3:first-of-type { padding-right: 44px; }
.office-modal-card .pd-testday-head h3 { margin: 0; }
.office-modal-card .calc-field-hint { color: var(--muted); font-size: 12px; line-height: 1.55; }
.office-modal-card .settings-close { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); display: inline-grid; place-items: center; }
.office-modal-card .settings-close:hover { color: var(--text); border-color: rgba(91, 139, 255, 0.4); }
.office-modal-card > .settings-close { position: absolute; top: 16px; right: 16px; }
.office-modal-card .cta { min-height: 44px; border-radius: 10px; }
.office-modal-card .result-action { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(91, 139, 255, 0.4); background: transparent; color: #c3d2ff; font-size: 13px; font-weight: 600; }
.office-modal-card .result-action:hover { background: rgba(91, 139, 255, 0.12); }
.office-modal-card.is-form > .result-action { width: 100%; }
.office-modal-card.is-form > .result-action + .calc-field-hint, .office-modal-card.is-form > .cta + .calc-field-hint { margin: 6px 0 14px; }
.office-modal-card .pd-ghost, .office-modal-card .pd-btn-secondary, .office-modal-card .sq-secondary { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: #c7cce0; font-size: 13px; font-weight: 600; }
.office-modal-card .pd-ghost:hover, .office-modal-card .pd-btn-secondary:hover, .office-modal-card .sq-secondary:hover { border-color: rgba(91, 139, 255, 0.4); color: var(--text); background: rgba(91, 139, 255, 0.08); }
.office-modal-card .pd-ghost.pd-danger { color: var(--afwijzen); border-color: rgba(255, 143, 156, 0.35); }
.office-modal-card .pd-ghost.pd-danger:hover { background: rgba(255, 143, 156, 0.08); }
.office-modal-card .pd-inline-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.office-modal-card .pd-inline-actions .cta { width: auto; flex: 0 0 auto; margin: 0; padding: 0 20px; }
.office-modal-card .wc-testday-actions { display: flex; flex-direction: column; gap: 10px; }
.office-modal-card .wc-testday-actions .pd-ghost, .office-modal-card .wc-testday-actions .cta { width: 100%; min-height: 44px; }

/* ---------- Webshop bouwen binnenschermen (sessie webshop-binnen) ---------- */
/* Tool screens behind the Webshop bouwen hub: form, progress, studio chrome, Liquid editor and dialogs. The generated page previews (iframes) stay untouched. */
#webshopBuildCenter .pp-import-tools { width: min(880px, 100%); margin: 0 auto; }
#webshopBuildCenter .pp-import-card { gap: 16px; padding: 24px; }
#webshopBuildCenter .pp-import-card > h2 { margin: 0; font-family: var(--font-brand); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
#webshopBuildCenter .pp-import-card > h2::before { content: "Nieuwe productpagina"; display: block; margin-bottom: 10px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .pp-import-card > label, #webshopBuildCenter .pp-fill label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .pp-import-card > label small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); opacity: 0.8; }
#webshopBuildCenter .pp-import-card > label > input, #webshopBuildCenter .pp-import-card > label > select, #webshopBuildCenter .pp-fill label > input, #webshopBuildCenter .pp-fill label > textarea { flex: 1 1 100%; width: 100%; max-width: none; }
#webshopBuildCenter .pp-import-card input, #webshopBuildCenter .pp-import-card select, #webshopBuildCenter .pp-fill input, #webshopBuildCenter .pp-fill textarea { box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; box-shadow: none; outline: none; }
#webshopBuildCenter .pp-fill textarea { padding: 10px 12px; line-height: 1.5; }
#webshopBuildCenter .pp-fill input[type="file"] { padding: 10px 12px; }
#webshopBuildCenter .pp-import-card input:focus, #webshopBuildCenter .pp-import-card select:focus, #webshopBuildCenter .pp-fill input:focus, #webshopBuildCenter .pp-fill textarea:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(91, 139, 255, 0.16); }
#webshopBuildCenter .pp-template-preview { gap: 6px; margin-top: -6px; }
#webshopBuildCenter .pp-template-preview span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: #a6aed0; font-size: 12px; }
#webshopBuildCenter #ppManageTemplates, #webshopBuildCenter #ppCompetitorFetch, #webshopBuildCenter #ppRetry, #webshopBuildCenter .pp-import-tools .result-action, #webshopBuildCenter #ppAdvanced, #webshopBuildCenter #ppCopy { justify-self: start; flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 14px; border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; }
#webshopBuildCenter #ppManageTemplates:hover, #webshopBuildCenter #ppCompetitorFetch:hover, #webshopBuildCenter #ppRetry:hover, #webshopBuildCenter .pp-import-tools .result-action:hover, #webshopBuildCenter #ppAdvanced:hover, #webshopBuildCenter #ppCopy:hover { background: rgba(91, 139, 255, 0.1); color: var(--text); }
#webshopBuildCenter #ppCompetitorNote { flex: 1 1 100%; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
#webshopBuildCenter #ppCostNote { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(91, 139, 255, 0.05); color: var(--muted); font-size: 13px; line-height: 1.5; }
#webshopBuildCenter .pp-import-card .cta, #webshopBuildCenter .pp-fill .cta, #webshopBuildCenter #ppGenerate, #webshopBuildCenter #ppShopifyImport { min-height: 44px; border: 1px solid transparent; border-radius: 10px; background: var(--ice); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#webshopBuildCenter .pp-import-card .cta:hover:not(:disabled), #webshopBuildCenter .pp-fill .cta:hover:not(:disabled), #webshopBuildCenter #ppGenerate:hover:not(:disabled) { background: var(--accent-hover); }
#webshopBuildCenter .pp-import-card .cta:disabled { opacity: 0.55; box-shadow: none; }
#webshopBuildCenter .pp-import-status { color: var(--muted); font-size: 13px; }
#webshopBuildCenter .pp-found-host { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#webshopBuildCenter .pp-fill { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#webshopBuildCenter .pp-fill h3 { margin: 0; font-family: var(--font-brand); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
/* Progress screen while the page is made. */
#webshopBuildCenter .pp-run { gap: 16px; }
#webshopBuildCenter .pp-run-kicker { margin-bottom: 8px !important; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--muted); }
#webshopBuildCenter #ppRunLabel { font-family: var(--font-brand); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
#webshopBuildCenter .pp-run-step { padding: 5px 10px; border: 1px solid rgba(91, 139, 255, 0.4); background: transparent; color: #c3d2ff; font-family: var(--font-num); font-size: 12px; font-weight: 500; }
#webshopBuildCenter .pp-run-track { height: 6px; background: rgba(255, 255, 255, 0.06); box-shadow: none; }
#webshopBuildCenter .pp-run-track span { background: var(--ice); }
#webshopBuildCenter .pp-run-time { margin: -6px 0 0; color: var(--muted); }
#webshopBuildCenter .pp-phases { gap: 6px; }
#webshopBuildCenter .pp-phases li { min-height: 38px; padding: 9px 12px 9px 44px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); color: var(--muted); }
#webshopBuildCenter .pp-phases li::before { top: 8px; background: rgba(255, 255, 255, 0.06); color: var(--muted); font-family: var(--font-num); font-weight: 500; }
#webshopBuildCenter .pp-phases li.is-active { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.08); color: var(--text); }
#webshopBuildCenter .pp-phases li.is-active::before { background: var(--ice); color: #ffffff; box-shadow: 0 0 0 4px rgba(91, 139, 255, 0.14); }
#webshopBuildCenter .pp-phases li.is-done { color: #c3d2ff; }
#webshopBuildCenter .pp-phases li.is-done::before { background: rgba(91, 139, 255, 0.18); color: #c3d2ff; }
#webshopBuildCenter .pp-phases li.is-failed { border-color: rgba(255, 132, 150, 0.35); color: #ffb3bd; }
/* Steps row, notes and the Liquid code step. */
#webshopBuildCenter .pp-progress button { min-height: 36px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
#webshopBuildCenter .pp-progress button.is-on, #webshopBuildCenter .pp-progress button[aria-current="step"] { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.14); color: var(--text); }
#webshopBuildCenter .pp-progress button.is-done { background: transparent; color: #c3d2ff; }
#webshopBuildCenter #wbPageArea > .wb-note { color: var(--muted); font-size: 13px; }
#webshopBuildCenter #ppStep3 .wb-code-fold { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
#webshopBuildCenter #ppStep3 .wb-code { font-family: var(--font-num); font-size: 12px; }
/* Studio chrome around the preview (bar and side panels only). */
#webshopBuildCenter .pp-studio-bar { background: #0b0e1b; border-bottom: 1px solid var(--line); box-shadow: none; }
#webshopBuildCenter .pp-studio-identity strong { font-family: var(--font-brand); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
#webshopBuildCenter .pp-studio-bar .result-action, #webshopBuildCenter .pp-toolbar .result-action { border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-weight: 600; box-shadow: none; }
#webshopBuildCenter .pp-studio-bar .result-action:hover:not(:disabled), #webshopBuildCenter .pp-toolbar .result-action:hover { background: rgba(91, 139, 255, 0.1); color: var(--text); }
#webshopBuildCenter .pp-studio-bar .result-action.is-on, #webshopBuildCenter .pp-studio-bar .result-action[aria-pressed="true"], #webshopBuildCenter .pp-toolbar .result-action.is-on { background: rgba(91, 139, 255, 0.16); color: var(--text); }
#webshopBuildCenter .pp-studio-bar .result-action:disabled { opacity: 0.45; }
#webshopBuildCenter .pp-studio-bar .pp-bar-shop { border-color: transparent; background: var(--ice); color: #ffffff; }
#webshopBuildCenter .pp-studio-bar .pp-bar-shop:hover { background: var(--accent-hover); color: #ffffff; }
#webshopBuildCenter .pp-zoom { color: var(--muted); font-size: 12px; }
#webshopBuildCenter #ppZoomValue { font-family: var(--font-num); }
#webshopBuildCenter .pp-lifecycle { font-weight: 600; }
html.is-pp-studio #webshopBuildCenter #ppSectionNav, html.is-pp-studio #webshopBuildCenter #ppEdit { background: #0a0d18; }
html.is-pp-studio #webshopBuildCenter #ppSectionNav::before { background: #0a0d18; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* Dialogs: leave, templates, page check and competitor photos. */
#webshopBuildCenter .pp-leave { border: 1px solid var(--line); border-radius: 16px; background: #0d1020; color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); }
#webshopBuildCenter .pp-leave h2, #webshopBuildCenter .pp-leave h3, body[data-agent="webshop-bouwen"] #ppCompetitorDialog h2, body[data-agent="webshop-bouwen"] #ppCompetitorDialog h3 { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.015em; }
#webshopBuildCenter .pp-leave p { color: var(--muted); }
#webshopBuildCenter .pp-leave input, #webshopBuildCenter .pp-leave select { border-color: #262e52; background: rgba(10, 13, 26, 0.5); }
#webshopBuildCenter .pp-leave .result-action, body[data-agent="webshop-bouwen"] #ppCompetitorDialog button:not([data-comp-apply]) { border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-weight: 600; }
#webshopBuildCenter .pp-leave .cta, body[data-agent="webshop-bouwen"] #ppCompetitorDialog [data-comp-apply] { border: 1px solid transparent; border-radius: 10px; background: var(--ice); color: #ffffff; font-weight: 600; }
body[data-agent="webshop-bouwen"] #ppCompetitorDialog { border-color: var(--line); background: #0d1020; }
body[data-agent="webshop-bouwen"] #ppCompetitorDialog button { min-height: 36px; padding: 0 14px; }
body[data-agent="webshop-bouwen"] #ppCompetitorDialog input[type="url"], body[data-agent="webshop-bouwen"] #ppCompetitorDialog select { border-color: #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
/* Liquid sections: catalog cards, saved list and the section editor side. */
#webshopBuildCenter .wb-section .wb-section-icon { border-radius: 10px; background: rgba(91, 139, 255, 0.1); color: var(--ice); }
#webshopBuildCenter .wb-overview-actions .result-action, #webshopBuildCenter .wb-library-bar .result-action, #webshopBuildCenter .wb-library-types .result-action { border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-weight: 600; }
#webshopBuildCenter .wb-overview-actions .result-action:hover, #webshopBuildCenter .wb-library-bar .result-action:hover, #webshopBuildCenter .wb-library-types .result-action:hover { background: rgba(91, 139, 255, 0.1); color: var(--text); }
#webshopBuildCenter .wb-nav-card { border-radius: 12px; border-color: var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
#webshopBuildCenter .wb-nav-card.is-on { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.1); }
#webshopBuildCenter .wb-library-intro { border-color: var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#webshopBuildCenter .wb-library-intro strong { font-family: var(--font-brand); font-weight: 600; }
#webshopBuildCenter .wb-library-empty { color: var(--muted); }
#webshopBuildCenter .wb-build-head h1 { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.02em; }
#webshopBuildCenter .wb-build-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .wb-build-bar { border-bottom: 1px solid var(--line); background: #0b0e1b; }
#webshopBuildCenter .wb-build-bar .wb-liquid-back, #webshopBuildCenter .wb-build-bar .wb-undo { border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-weight: 600; }
#webshopBuildCenter .wb-build-bar .wb-segment { border-radius: 10px; }
#webshopBuildCenter .wb-build-bar .wb-segment.is-on { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.16); color: var(--text); }
#webshopBuildCenter .wb-editor-side { background: #0a0d18; }
#webshopBuildCenter .wb-editor-side .wb-ux-context, #webshopBuildCenter .wb-editor-side .wb-progress { border-color: var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
#webshopBuildCenter .wb-editor-side .wb-ux-context strong { font-family: var(--font-brand); font-weight: 600; }
#webshopBuildCenter .wb-editor-side .wb-ux-current { border-radius: 999px; background: rgba(91, 139, 255, 0.12); color: #c3d2ff; }
#webshopBuildCenter .wb-progress .wb-editor-tab.is-on { border-bottom-color: var(--ice); color: var(--text); }
#webshopBuildCenter .wb-progress .wb-editor-tab span { background: rgba(255, 255, 255, 0.08); color: var(--muted); font-family: var(--font-num); }
#webshopBuildCenter .wb-progress .wb-editor-tab.is-on span, #webshopBuildCenter .wb-progress .wb-editor-tab.is-done span { background: var(--ice); color: #ffffff; }
#webshopBuildCenter .wb-editor-side .wb-fields label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .wb-editor-side .wb-fields input, #webshopBuildCenter .wb-editor-side .wb-fields textarea { border-color: #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
#webshopBuildCenter .wb-editor-side .wb-fields input:focus, #webshopBuildCenter .wb-editor-side .wb-fields textarea:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(91, 139, 255, 0.16); outline: none; }
#webshopBuildCenter .wb-editor-side .wb-repeat > * { border-color: var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
#webshopBuildCenter .wb-editor-side .result-action:not(.is-primary) { border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-weight: 600; }
#webshopBuildCenter .wb-editor-side .result-action.is-primary { border: 1px solid transparent; border-radius: 10px; background: var(--ice); color: #ffffff; font-weight: 600; }
#webshopBuildCenter #wbProductArea > h2 { font-family: var(--font-brand); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
html[data-theme="light"] #webshopBuildCenter .pp-studio-bar, html[data-theme="light"] #webshopBuildCenter .wb-build-bar, html[data-theme="light"] #webshopBuildCenter .wb-editor-side, html[data-theme="light"].is-pp-studio #webshopBuildCenter #ppSectionNav, html[data-theme="light"].is-pp-studio #webshopBuildCenter #ppEdit, html[data-theme="light"] #webshopBuildCenter .pp-leave { background: #ffffff; }
html[data-theme="light"] #webshopBuildCenter .pp-import-card input, html[data-theme="light"] #webshopBuildCenter .pp-import-card select, html[data-theme="light"] #webshopBuildCenter .pp-fill input, html[data-theme="light"] #webshopBuildCenter .pp-fill textarea { border-color: #d5dbe8; background: #f7f9fc; }
html[data-theme="light"] #webshopBuildCenter #ppManageTemplates, html[data-theme="light"] #webshopBuildCenter #ppCompetitorFetch, html[data-theme="light"] #webshopBuildCenter .pp-studio-bar .result-action:not(.pp-bar-shop), html[data-theme="light"] #webshopBuildCenter .wb-editor-side .result-action:not(.is-primary), html[data-theme="light"] #webshopBuildCenter .wb-overview-actions .result-action { color: var(--ice); }
@media (max-width: 720px) {
  #webshopBuildCenter .pp-import-card { padding: 18px; }
  #webshopBuildCenter .pp-import-card > h2 { font-size: 21px; }
  #webshopBuildCenter #ppRunLabel { font-size: 19px; }
  #webshopBuildCenter .pp-import-card input, #webshopBuildCenter .pp-import-card select, #webshopBuildCenter .pp-fill input, #webshopBuildCenter .pp-fill textarea { font-size: 16px; }
}

/* ---------- Winkelwagen en checkout-logo (sessie ws-voorstel-cart-logo) ---------- */
#wsToolOffice { display: none; }
body[data-agent="ws-cart"] .center > :not(#wsToolOffice), body[data-agent="ws-logo"] .center > :not(#wsToolOffice), body[data-agent="ws-shoplogo"] .center > :not(#wsToolOffice) { display: none !important; }
body[data-agent="ws-cart"] .rail, body[data-agent="ws-logo"] .rail, body[data-agent="ws-shoplogo"] .rail { display: none !important; }
body[data-agent="ws-cart"] .workspace-main, body[data-agent="ws-logo"] .workspace-main, body[data-agent="ws-shoplogo"] .workspace-main { grid-template-columns: minmax(0, 1fr); }
body[data-agent="ws-cart"] .center, body[data-agent="ws-logo"] .center, body[data-agent="ws-shoplogo"] .center { grid-column: 1 / -1; width: 100%; display: block; padding: 0; overflow: hidden; }
body[data-agent="ws-cart"] #wsToolOffice, body[data-agent="ws-logo"] #wsToolOffice, body[data-agent="ws-shoplogo"] #wsToolOffice { display: flex; flex-direction: column; height: 100%; min-height: 600px; }
#wsToolOffice .ws-tool-head { flex: none; display: flex; align-items: center; gap: 28px; margin: 0 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#wsToolOffice .ws-tool-head::-webkit-scrollbar { display: none; }
#wsToolOffice .ws-tool-kicker { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8790b5; }
#wsToolOffice .ws-tool-tabs { display: flex; gap: 24px; }
#wsToolOffice .ws-tool-tabs button { flex: none; margin-bottom: -1px; padding: 14px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: #8790b5; font: inherit; font-size: 13px; cursor: pointer; }
#wsToolOffice .ws-tool-tabs button:hover { color: #c3d2ff; }
#wsToolOffice .ws-tool-tabs button.is-on { color: var(--text, #eef1f8); font-weight: 600; border-bottom-color: #5b8bff; }
#wsToolOffice iframe { display: block; flex: 1 1 auto; width: 100%; min-height: 560px; border: 0; }
#wsToolOffice iframe[hidden] { display: none; }
@media (max-width: 1100px) {
  body[data-agent="ws-cart"] .center, body[data-agent="ws-logo"] .center, body[data-agent="ws-shoplogo"] .center { height: calc(100dvh - 64px); }
}
@media (max-width: 720px) {
  #wsToolOffice .ws-tool-head { margin: 0 16px; gap: 18px; }
  #wsToolOffice .ws-tool-tabs { gap: 18px; }
}

/* ---------- Webshop voorstel pagina's (sessie ws-voorstel-paginas) ---------- */
/* Tabs on every Webshop bouwen screen, new-page form with a fixed "Wat je krijgt" card, pages table, Templates screen and Liquid mini previews. Generated pages, editor preview and Shopify output stay untouched. */
#webshopBuildCenter .wb-tabs { display: flex; align-items: center; gap: 28px; margin: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#webshopBuildCenter .wb-tabs::-webkit-scrollbar { display: none; }
#webshopBuildCenter .wb-tabs > button, #webshopBuildCenter .wb-tabs > a { flex: 0 0 auto; margin: 0 0 -1px; padding: 14px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; }
#webshopBuildCenter .wb-tabs > button:hover, #webshopBuildCenter .wb-tabs > a:hover { color: var(--text); }
#webshopBuildCenter .wb-tabs > [aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--ice); }
#webshopBuildCenter .wb-tabs > :focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
html.is-pp-studio #webshopBuildCenter .wb-tabs, body.wb-building #webshopBuildCenter .wb-tabs, html[data-wb-area="product"] #webshopBuildCenter .wb-tabs { display: none; }
#webshopBuildCenter .wb-subhead { justify-self: stretch; width: 100%; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 18px; }
#webshopBuildCenter .wb-subhead h2 { margin: 0 0 6px; font-size: 32px; font-weight: 700; letter-spacing: -0.025em; }
#webshopBuildCenter .wb-subhead p { margin: 0; color: #a6aed0; font-size: 15px; }
#webshopBuildCenter .wb-subhead .wb-kicker { display: none; }
#webshopBuildCenter .wb-subhead .cta { flex: 0 0 auto; width: auto; max-width: 100%; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; background: var(--ice); color: #ffffff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.22); }
#webshopBuildCenter .wb-subhead .cta:hover { background: var(--accent-hover); }
/* Nieuwe productpagina: fields left, fixed card with preview, cost and the import button right. */
html:not(.is-pp-import) #webshopBuildCenter .wb-new-head { display: none; }
#webshopBuildCenter .pp-import-tools[hidden] { display: none; }
html.is-pp-import #webshopBuildCenter #ppStep1 { width: 100%; }
#webshopBuildCenter .pp-import-layout:not(.is-building):not(.is-ready) { width: 100%; max-width: none; margin-top: 0; }
#webshopBuildCenter .pp-import-layout:not(.is-building):not(.is-ready) .pp-import-card { padding: 0; border: 0; background: transparent; }
#webshopBuildCenter .pp-import-card > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#webshopBuildCenter .pp-import-layout.is-building .pp-new-grid, #webshopBuildCenter .pp-import-layout.is-ready .pp-new-grid { display: none; }
#webshopBuildCenter .pp-new-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
#webshopBuildCenter .pp-new-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#webshopBuildCenter .pp-new-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#webshopBuildCenter .pp-new-form label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .pp-new-form label small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#webshopBuildCenter .pp-new-form label > input, #webshopBuildCenter .pp-new-form label > select { flex: 1 1 100%; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; box-shadow: none; outline: none; }
#webshopBuildCenter .pp-new-form label > input:focus, #webshopBuildCenter .pp-new-form label > select:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(91, 139, 255, 0.16); }
#webshopBuildCenter .pp-competitor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: -4px; color: var(--muted); font-size: 13px; }
#webshopBuildCenter .pp-competitor-row #ppCompetitorNote:empty { display: none; }
#webshopBuildCenter .pp-competitor-row #ppCompetitorNote { flex: 1 1 100%; }
#webshopBuildCenter .pp-new-rule { height: 1px; background: rgba(255, 255, 255, 0.06); }
#webshopBuildCenter .pp-new-template-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -6px; }
#webshopBuildCenter .pp-new-template-line .pp-template-preview { display: block; margin: 0; color: #a6aed0; font-size: 13px; line-height: 1.5; }
#webshopBuildCenter #ppManageTemplates.pp-new-manage { flex: 0 0 auto; min-height: 32px; padding: 0; border: 0; background: none; color: #9db4ff; font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: none; }
#webshopBuildCenter #ppManageTemplates.pp-new-manage:hover { background: none; color: var(--text); text-decoration: underline; }
#webshopBuildCenter .pp-new-get { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid rgba(91, 139, 255, 0.3); border-radius: 16px; background: #10142a; }
#webshopBuildCenter .pp-new-kicker, #webshopBuildCenter .wb-template-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .pp-new-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--copy); font-size: 14px; }
#webshopBuildCenter .pp-new-list li::before { content: "✓"; margin-right: 8px; color: var(--ice); }
#webshopBuildCenter #ppCostNote.pp-new-cost { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; line-height: 1.5; }
#webshopBuildCenter .pp-new-info { flex: 0 0 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-style: italic; }
#webshopBuildCenter .pp-new-get #ppImport { width: 100%; }
#webshopBuildCenter .pp-new-time { margin: -4px 0 0; font-family: var(--font-num); font-size: 12px; color: var(--muted); text-align: center; }
/* Calm phone on the new-page card: a prompt first, then the found product (photo, name, price). */
#webshopBuildCenter .pp-phone-screen { position: relative; height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 26px; background: radial-gradient(ellipse at 50% 40%, #1d2a5c, #0d1124 70%); }
#webshopBuildCenter .pp-phone-screen::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(157, 180, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 180, 255, 0.06) 1px, transparent 1px); background-size: 18px 18px; }
#webshopBuildCenter .pp-phone-state { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; box-sizing: border-box; padding: 16px 10px; text-align: center; }
#webshopBuildCenter .pp-phone-state[hidden] { display: none; }
#webshopBuildCenter .pp-phone-state b { font-family: var(--font-brand); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text); }
#webshopBuildCenter .pp-phone-state small { font-size: 11px; line-height: 1.5; color: #a6aed0; }
#webshopBuildCenter #ppPhoneMeta { font-family: var(--font-num); color: #c3d2ff; }
#webshopBuildCenter .pp-phone-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(91, 139, 255, 0.18); color: #c3d2ff; font-size: 20px; }
#webshopBuildCenter .pp-phone-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 4px; }
#webshopBuildCenter .pp-phone-chips span { padding: 3px 8px; border-radius: 999px; background: rgba(91, 139, 255, 0.16); color: #c3d2ff; font-size: 10px; font-weight: 600; }
#webshopBuildCenter .pp-phone-ok { padding: 4px 10px; border-radius: 999px; background: rgba(126, 224, 181, 0.16); color: var(--testen); font-size: 11px; font-weight: 600; }
#webshopBuildCenter #ppPhonePhoto { width: 96px; height: 96px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: #1b2346; }
#webshopBuildCenter #ppPhonePhoto[hidden] { display: none; }
/* Blueprint previews (Liquid sections and templates): structure only, in the tool's blue. */
#webshopBuildCenter .wb-bp { position: relative; display: flex; flex-direction: column; align-self: stretch; gap: 6px; width: 100%; height: 132px; box-sizing: border-box; padding: 12px; overflow: hidden; border: 1px solid rgba(157, 180, 255, 0.18); border-radius: 10px; background: #0f1428 linear-gradient(rgba(157, 180, 255, 0.06) 1px, transparent 1px) 0 0 / 12px 12px; background-image: linear-gradient(rgba(157, 180, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 180, 255, 0.06) 1px, transparent 1px); background-size: 12px 12px; color: #9db4ff; }
#webshopBuildCenter .wb-bp.wb-bp-page { height: 260px; }
#webshopBuildCenter .bp-tag { position: absolute; top: 6px; right: 8px; font-family: var(--font-num); font-size: 9px; color: #9db4ff; opacity: 0.8; }
#webshopBuildCenter .bp-t { display: block; flex: 0 0 auto; height: 5px; border-radius: 3px; background: rgba(157, 180, 255, 0.45); }
#webshopBuildCenter .bp-t.is-strong { height: 6px; }
#webshopBuildCenter .bp-t.is-big { height: 9px; }
#webshopBuildCenter .bp-t.is-soft { height: 4px; background: rgba(157, 180, 255, 0.3); }
#webshopBuildCenter .bp-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px; border: 1px solid rgba(157, 180, 255, 0.55); border-radius: 6px; background: rgba(91, 139, 255, 0.1); }
#webshopBuildCenter .bp-row { flex-direction: row; align-items: center; justify-content: space-between; flex: 1 1 0; }
#webshopBuildCenter .bp-row b { font-size: 10px; line-height: 1; color: #9db4ff; }
#webshopBuildCenter .bp-row.is-band { justify-content: space-around; }
#webshopBuildCenter .bp-hero { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 10px; border-style: dashed; }
#webshopBuildCenter .bp-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#webshopBuildCenter .bp-cols.is-two { grid-template-columns: 1fr 1fr; }
#webshopBuildCenter .bp-cols > .bp-box { align-items: center; }
#webshopBuildCenter .bp-cols.is-two > .bp-box { align-items: stretch; }
#webshopBuildCenter .bp-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#webshopBuildCenter .bp-split.is-top { flex: 0 0 82px; }
#webshopBuildCenter .bp-col { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
#webshopBuildCenter .bp-photo { display: block; flex: 1 1 auto; align-self: stretch; min-height: 22px; border: 1px dashed rgba(157, 180, 255, 0.55); border-radius: 6px; background: rgba(91, 139, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16' fill='none' stroke='%239db4ff' stroke-width='1.2'%3E%3Crect x='1' y='1' width='20' height='14' rx='2'/%3E%3Cpath d='M3 13l5-5 4 4 3-3 4 4'/%3E%3Ccircle cx='15' cy='5' r='1.6'/%3E%3C/svg%3E") center / 22px 16px no-repeat; }
#webshopBuildCenter .bp-cols .bp-photo { width: 100%; }
#webshopBuildCenter .bp-stars { display: flex; gap: 2px; }
#webshopBuildCenter .bp-stars i { width: 6px; height: 6px; border-radius: 50%; background: #9db4ff; }
#webshopBuildCenter .bp-btn { display: block; flex: 0 0 auto; height: 12px; border-radius: 4px; background: var(--ice); opacity: 0.85; }
#webshopBuildCenter .bp-dot { width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid rgba(157, 180, 255, 0.55); border-radius: 50%; background: rgba(91, 139, 255, 0.1); }
#webshopBuildCenter .bp-dot.is-small { width: 8px; height: 8px; }
#webshopBuildCenter .bp-check { display: flex; align-items: center; gap: 5px; }
#webshopBuildCenter .bp-check .bp-t { flex: 1 1 auto; }
#webshopBuildCenter .wb-template-mine .pp-template-card .wb-bp { margin-bottom: 2px; }
#webshopBuildCenter .pp-new-stage { position: relative; display: flex; justify-content: center; height: 258px; }
#webshopBuildCenter .pp-new-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; background: radial-gradient(circle, rgba(70, 110, 255, 0.3), transparent 62%); pointer-events: none; }
#webshopBuildCenter .pp-new-phone { position: relative; width: 136px; height: 252px; box-sizing: border-box; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 32px; background: linear-gradient(160deg, #39426a, #12162a); box-shadow: 0 30px 80px rgba(60, 100, 255, 0.45); }
/* Mijn productpagina's: calm table with a mini print, status pill, mono date and a ⋯ menu. */
#webshopBuildCenter .pp-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; background: none; }
#webshopBuildCenter .pp-list-tools .wb-search { flex: 1 1 260px; min-width: 0; }
#webshopBuildCenter .pp-list-tools .wb-search > span, #webshopBuildCenter .pp-list-tools .pp-list-status, #webshopBuildCenter .pp-list-count { display: none; }
#webshopBuildCenter .pp-list-tools .wb-search input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font-size: 14px; }
#webshopBuildCenter .pp-list-filters { display: flex; flex-wrap: wrap; gap: 8px; }
#webshopBuildCenter .pp-list-filters button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #a6aed0; font-family: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
#webshopBuildCenter .pp-list-filters button[aria-pressed="true"] { border-color: rgba(91, 139, 255, 0.4); background: rgba(91, 139, 255, 0.16); color: var(--text); }
#webshopBuildCenter .pp-list-num { font-family: var(--font-num); opacity: 0.7; }
#webshopBuildCenter .pp-list-tools .pp-list-sort { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .pp-list-tools .pp-list-sort select { width: auto; min-width: 0; max-width: 180px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: #a6aed0; font-size: 13px; letter-spacing: 0; text-transform: none; }
#webshopBuildCenter .pp-page-list { display: block; overflow: visible; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#webshopBuildCenter .pp-page-list .pp-page-empty { padding: 32px 18px; text-align: center; }
#webshopBuildCenter .pp-table-head, #webshopBuildCenter .pp-page-list .pp-page-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px 170px 150px; gap: 16px; align-items: center; padding: 10px 18px; }
#webshopBuildCenter .pp-table-head { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px 16px 0 0; background: rgba(10, 13, 26, 0.35); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter .pp-table-head span:last-child { text-align: right; }
#webshopBuildCenter .pp-page-list .pp-page-row { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; background: transparent; font-size: 14px; }
#webshopBuildCenter .pp-page-list .pp-table-head + .pp-page-row { border-top: 0; }
#webshopBuildCenter .pp-page-list .pp-page-row:hover { border-color: rgba(255, 255, 255, 0.06); background: rgba(91, 139, 255, 0.04); }
#webshopBuildCenter .pp-page-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
#webshopBuildCenter .pp-page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
#webshopBuildCenter .pp-page-print { flex: 0 0 64px; height: 44px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-radius: 6px; background: #f6f1e7; }
#webshopBuildCenter .pp-page-print-photo { overflow: hidden; border-radius: 3px; background: #e2dccb; }
#webshopBuildCenter .pp-page-print-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#webshopBuildCenter .pp-page-print-photo.is-letter { display: grid; place-items: center; background: #1b2346; color: #c3d2ff; font-family: var(--font-brand); font-size: 12px; font-weight: 700; }
#webshopBuildCenter .pp-page-print-lines { display: flex; flex-direction: column; gap: 3px; }
#webshopBuildCenter .pp-page-print-lines i { height: 4px; border-radius: 2px; background: #c8c1ad; }
#webshopBuildCenter .pp-page-print-lines i + i { width: 60%; }
#webshopBuildCenter .pp-page-print-lines b { height: 8px; border-radius: 2px; background: #8f8a58; }
#webshopBuildCenter .pp-page-list .pp-page-status { display: inline-flex; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--copy); font-size: 12px; font-weight: 600; }
#webshopBuildCenter .pp-page-list .pp-page-status.is-ready { background: rgba(126, 224, 181, 0.14); color: var(--testen); }
#webshopBuildCenter .pp-page-list .pp-page-status.is-shopify { background: rgba(91, 139, 255, 0.16); color: #c3d2ff; }
#webshopBuildCenter .pp-page-date { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
#webshopBuildCenter .pp-page-list .pp-page-actions { display: flex; justify-content: flex-end; gap: 8px; }
#webshopBuildCenter .pp-page-list .pp-page-actions > [data-pp-open] { min-height: 36px; padding: 0 14px; border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-size: 13px; font-weight: 600; }
#webshopBuildCenter .pp-page-list .pp-page-actions > [data-pp-open]:hover { background: rgba(91, 139, 255, 0.1); color: var(--text); }
#webshopBuildCenter .pp-page-more { position: relative; }
#webshopBuildCenter .pp-more-button { min-width: 36px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #a6aed0; font-size: 15px; cursor: pointer; }
#webshopBuildCenter .pp-more-button:hover, #webshopBuildCenter .pp-more-button[aria-expanded="true"] { border-color: rgba(91, 139, 255, 0.4); color: var(--text); }
#webshopBuildCenter .pp-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; min-width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #0d1020; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
#webshopBuildCenter .pp-more-menu[hidden] { display: none; }
#webshopBuildCenter .pp-more-menu button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--copy); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; }
#webshopBuildCenter .pp-more-menu button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
#webshopBuildCenter .pp-more-menu button.is-danger { color: var(--afwijzen); }
#webshopBuildCenter .pp-list-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 13px; }
#webshopBuildCenter .pp-list-range { font-family: var(--font-num); }
#webshopBuildCenter .pp-list-paging { display: flex; gap: 8px; }
#webshopBuildCenter .pp-list-paging .result-action { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #a6aed0; font-size: 13px; }
#webshopBuildCenter .pp-list-paging .result-action:hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: var(--text); }
#webshopBuildCenter .pp-list-paging .result-action:disabled { opacity: 0.4; cursor: default; }
/* Templates: own screen with the standard template and the saved ones. */
#webshopBuildCenter .wb-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
#webshopBuildCenter #ppTemplateManageBody.wb-template-mine { display: contents; }
#webshopBuildCenter .wb-template-std, #webshopBuildCenter .wb-template-mine .pp-template-card, #webshopBuildCenter .wb-template-mine .pp-template-empty { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); text-align: left; }
#webshopBuildCenter .wb-template-std { border-color: rgba(91, 139, 255, 0.35); background: #10142a; }
#webshopBuildCenter .wb-template-std .wb-template-kicker { color: #9db4ff; }
#webshopBuildCenter .wb-template-std strong, #webshopBuildCenter .wb-template-mine .pp-template-empty strong { font-family: var(--font-brand); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
#webshopBuildCenter .wb-template-std > span, #webshopBuildCenter .wb-template-mine .pp-template-card-copy p, #webshopBuildCenter .wb-template-mine .pp-template-empty p { margin: 0; color: #a6aed0; font-size: 13px; line-height: 1.55; }
#webshopBuildCenter .wb-template-mine .pp-template-empty { justify-content: center; align-self: stretch; border-style: dashed; }
#webshopBuildCenter .wb-template-mine .pp-template-card-copy input { box-sizing: border-box; min-height: 40px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font-family: var(--font-brand); font-size: 16px; font-weight: 600; }
#webshopBuildCenter .wb-template-mine .pp-template-mini span { border: 1px solid var(--line); background: transparent; color: #a6aed0; font-size: 12px; }
#webshopBuildCenter .wb-template-mine .pp-template-actions { justify-content: flex-start; }
#webshopBuildCenter #wbTemplatesArea .result-action, #webshopBuildCenter #wbTemplatesArea .cta { align-self: flex-start; min-height: 36px; padding: 0 14px; border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 10px; background: transparent; color: #c3d2ff; font-family: inherit; font-size: 13px; font-weight: 600; box-shadow: none; }
#webshopBuildCenter #wbTemplatesArea .result-action:hover, #webshopBuildCenter #wbTemplatesArea .cta:hover { background: rgba(91, 139, 255, 0.1); color: var(--text); }
#webshopBuildCenter #wbTemplatesArea [data-template-delete] { border-color: var(--line); color: #a6aed0; }
/* Liquid-secties: categories as tabs, three columns, a real mini preview per section. */
#webshopBuildCenter #wbHomeArea .wb-catalog-tools { display: flex; align-items: flex-end; gap: 24px; margin: 0 0 16px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
#webshopBuildCenter #wbHomeArea .wb-catalog-tools .wb-search { order: 2; margin: 0 0 8px auto; width: 260px; }
#webshopBuildCenter #wbHomeArea .wb-catalog-tools .wb-search > span { display: none; }
#webshopBuildCenter #wbHomeArea .wb-catalog-tools .wb-search input { width: 100%; box-sizing: border-box; min-height: 36px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); }
#webshopBuildCenter #wbSectionFilters { order: 1; gap: 24px; }
#webshopBuildCenter #wbSectionFilters button { min-height: 0; margin-bottom: -1px; padding: 14px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
#webshopBuildCenter #wbSectionFilters button.is-on { border-bottom-color: var(--ice); background: none; color: var(--text); font-weight: 600; }
body:not(.wb-building) #webshopBuildCenter #wbSections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body:not(.wb-building) #webshopBuildCenter #wbSections > .wb-section:not(.is-building) .wb-overview { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; box-sizing: border-box; padding: 16px; }
#webshopBuildCenter .wb-overview .wb-section-icon { display: none; }
#webshopBuildCenter .wb-overview .wb-section-name { font-family: var(--font-brand); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
#webshopBuildCenter .wb-overview .wb-section-blurb { margin-top: 6px; min-height: 40px; color: #a6aed0; font-size: 13px; line-height: 1.5; }
#webshopBuildCenter .wb-overview .wb-overview-actions { justify-content: space-between; margin-top: auto; }
#webshopBuildCenter .wb-mini-chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: #a6aed0; font-size: 12px; }
@media (max-width: 1180px) {
  #webshopBuildCenter .pp-new-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  body:not(.wb-building) #webshopBuildCenter #wbSections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #webshopBuildCenter .pp-table-head, #webshopBuildCenter .pp-page-list .pp-page-row { grid-template-columns: minmax(0, 1fr) 150px 130px 140px; }
}
@media (max-width: 900px) {
  #webshopBuildCenter .pp-new-grid { grid-template-columns: minmax(0, 1fr); }
  #webshopBuildCenter .pp-new-get { position: static; }
  #webshopBuildCenter .wb-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #webshopBuildCenter .pp-table-head { display: none; }
  #webshopBuildCenter .pp-page-list .pp-page-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "state date"; gap: 8px 12px; padding: 12px 14px; }
  #webshopBuildCenter .pp-page-list .pp-page-main { grid-area: main; }
  #webshopBuildCenter .pp-page-list .pp-page-state { grid-area: state; }
  #webshopBuildCenter .pp-page-list .pp-page-date { grid-area: date; justify-self: end; align-self: center; }
  #webshopBuildCenter .pp-page-list .pp-page-actions { grid-area: actions; }
  #webshopBuildCenter .pp-page-list .pp-table-head + .pp-page-row, #webshopBuildCenter .pp-page-list > .pp-page-row:first-child { border-top: 0; }
}
@media (max-width: 720px) {
  #webshopBuildCenter .wb-tabs { gap: 20px; margin-bottom: 14px; }
  #webshopBuildCenter .wb-subhead { flex-direction: column; align-items: stretch; }
  #webshopBuildCenter .wb-subhead h2 { font-size: 24px; }
  #webshopBuildCenter .wb-subhead p { font-size: 14px; }
  #webshopBuildCenter .pp-new-links { grid-template-columns: minmax(0, 1fr); }
  #webshopBuildCenter .pp-new-form, #webshopBuildCenter .pp-new-get { padding: 18px; }
  #webshopBuildCenter .pp-new-form label > input, #webshopBuildCenter .pp-new-form label > select, #webshopBuildCenter .pp-list-tools .wb-search input { font-size: 16px; }
  #webshopBuildCenter .pp-new-template-line { flex-direction: column; align-items: flex-start; gap: 4px; }
  #webshopBuildCenter .wb-template-grid, body:not(.wb-building) #webshopBuildCenter #wbSections { grid-template-columns: minmax(0, 1fr); }
  #webshopBuildCenter #wbHomeArea .wb-catalog-tools { flex-direction: column; align-items: stretch; gap: 0; }
  #webshopBuildCenter #wbHomeArea .wb-catalog-tools .wb-search { order: 0; width: 100%; margin: 0 0 4px; }
  #webshopBuildCenter #wbSectionFilters { overflow-x: auto; flex-wrap: nowrap; }
  #webshopBuildCenter .pp-page-print { flex-basis: 52px; height: 36px; }
  #webshopBuildCenter .pp-page-print { flex-basis: 52px; height: 36px; }
  #webshopBuildCenter .pp-page-list .pp-page-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "state" "actions"; }
  #webshopBuildCenter .pp-page-list .pp-page-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #webshopBuildCenter .pp-page-list .pp-page-date { grid-area: state; justify-self: end; }
  #webshopBuildCenter .pp-page-list .pp-page-actions { justify-content: flex-start; }
  #webshopBuildCenter .pp-list-foot { flex-direction: column; align-items: stretch; }
  #webshopBuildCenter .pp-list-paging > * { flex: 1; }
}
html[data-theme="light"] #webshopBuildCenter .pp-new-get, html[data-theme="light"] #webshopBuildCenter .wb-template-std, html[data-theme="light"] #webshopBuildCenter .pp-more-menu { background: #ffffff; }
html[data-theme="light"] #webshopBuildCenter .pp-new-form label > input, html[data-theme="light"] #webshopBuildCenter .pp-new-form label > select, html[data-theme="light"] #webshopBuildCenter .pp-list-tools .wb-search input { border-color: #d5dbe8; background: #f7f9fc; }
html[data-theme="light"] #webshopBuildCenter .pp-page-list .pp-page-actions > [data-pp-open], html[data-theme="light"] #webshopBuildCenter #wbTemplatesArea .result-action { color: var(--ice); }
/* ---------- Wachtscherm productpagina (sessie pagina-sneller) ---------- */
@keyframes pw-spin { to { transform: rotate(360deg); } }
@keyframes pw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pw-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(91, 139, 255, 0.12); } 50% { box-shadow: 0 0 0 8px rgba(91, 139, 255, 0.2); } }
#webshopBuildCenter .pp-import-layout:has(#ppRun.has-wait:not([hidden])) { width: 100%; max-width: none; }
#webshopBuildCenter .pp-import-layout:has(#ppRun.has-wait:not([hidden])) .pp-import-card { padding: 0; border: 0; background: transparent; }
#webshopBuildCenter #ppRun.has-wait > .pp-run-head, #webshopBuildCenter #ppRun.has-wait > .pp-run-track, #webshopBuildCenter #ppRun.has-wait > .pp-run-time, #webshopBuildCenter #ppRun.has-wait > .pp-phases { display: none; }
#webshopBuildCenter #ppWait { display: grid; grid-template-columns: 290px minmax(0, 1fr) 250px; gap: 26px; align-items: start; margin-top: 4px; }
#webshopBuildCenter #ppWait .pw-title { margin: 0 0 12px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: clamp(28px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); }
#webshopBuildCenter #ppWait .pw-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--copy); }
#webshopBuildCenter #ppWait .pw-steps { list-style: none; margin: 0; padding: 0; }
#webshopBuildCenter #ppWait .pw-steps li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px; color: var(--muted); }
#webshopBuildCenter #ppWait .pw-steps li.is-done { color: var(--copy); }
#webshopBuildCenter #ppWait .pw-steps li.is-active { color: var(--text); font-weight: 600; }
#webshopBuildCenter #ppWait .pw-steps li.is-failed { color: #ff9aa6; font-weight: 600; }
#webshopBuildCenter #ppWait .pw-mark { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; box-sizing: border-box; border-radius: 8px; background: rgba(255, 255, 255, 0.05); font-size: 12px; font-weight: 700; }
#webshopBuildCenter #ppWait .pw-mark.is-done { color: #7ee0b5; }
#webshopBuildCenter #ppWait .pw-mark.is-failed { color: #ff9aa6; background: rgba(255, 143, 156, 0.12); }
#webshopBuildCenter #ppWait .pw-mark.is-active { border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: #9db4ff; border-radius: 50%; background: none; animation: pw-spin 1s linear infinite; }
#webshopBuildCenter #ppWait .pw-open { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 18px; padding: 0 20px; }
#webshopBuildCenter #ppWait .pw-browser-wrap { position: relative; min-width: 0; }
#webshopBuildCenter #ppWait .pw-halo { position: absolute; left: 50%; top: 45%; width: 640px; max-width: 120%; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(70, 110, 255, 0.28), transparent 62%); pointer-events: none; }
#webshopBuildCenter #ppWait .pw-browser { position: relative; border-radius: 14px; overflow: hidden; background: #1b2033; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 110px rgba(60, 100, 255, 0.4); }
#webshopBuildCenter #ppWait .pw-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #151a2c; }
#webshopBuildCenter #ppWait .pw-dots { display: flex; gap: 6px; flex: 0 0 auto; }
#webshopBuildCenter #ppWait .pw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff8f9c; }
#webshopBuildCenter #ppWait .pw-dots i:nth-child(2) { background: #ffc46b; }
#webshopBuildCenter #ppWait .pw-dots i:nth-child(3) { background: #7ee0b5; }
#webshopBuildCenter #ppWait .pw-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #a6aed0; }
#webshopBuildCenter #ppWait .pw-url b { color: #eef1f8; font-weight: 500; }
#webshopBuildCenter #ppWait .pw-page { display: flex; flex-direction: column; gap: 16px; min-height: 470px; padding: 20px 18px 18px; background: #f6f1e7; color: #2b2a22; font-family: "IBM Plex Sans", sans-serif; font-size: 12px; line-height: 1.45; }
#webshopBuildCenter #ppWait .pw-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#webshopBuildCenter #ppWait .pw-blk { position: relative; border-radius: 8px; transition: opacity 0.3s, box-shadow 0.3s; }
#webshopBuildCenter #ppWait .pw-blk.is-waiting { opacity: 0.55; }
#webshopBuildCenter #ppWait .pw-blk.is-active { outline: 2px solid #5b8bff; outline-offset: 2px; animation: pw-glow 1.6s ease-in-out infinite; }
#webshopBuildCenter #ppWait .pw-blk.is-failed { outline: 2px solid #ff8f9c; outline-offset: 2px; }
#webshopBuildCenter #ppWait .pw-blk-lbl { position: absolute; z-index: 1; top: -9px; left: 10px; padding: 1px 8px; border-radius: 999px; background: #cfc8b4; color: #4a483c; font-size: 10px; font-weight: 700; white-space: nowrap; }
#webshopBuildCenter #ppWait .pw-blk.is-active .pw-blk-lbl { background: #5b8bff; color: #ffffff; }
#webshopBuildCenter #ppWait .pw-blk.is-done .pw-blk-lbl { background: #7ee0b5; color: #0d2a1d; }
#webshopBuildCenter #ppWait .pw-blk.is-failed .pw-blk-lbl { background: #ff8f9c; color: #3a0b12; }
#webshopBuildCenter #ppWait .pw-photo { display: block; width: 100%; height: 210px; border-radius: 8px; object-fit: cover; background: #e2dccb; }
#webshopBuildCenter #ppWait img.pw-photo { animation: pw-in 0.45s ease-out both; }
#webshopBuildCenter #ppWait .pw-sk { display: block; min-height: 14px; border-radius: 4px; background: #e2dccb; }
#webshopBuildCenter #ppWait .pw-buy { display: flex; flex-direction: column; gap: 7px; padding: 8px; min-width: 0; }
#webshopBuildCenter #ppWait .pw-name { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; animation: pw-in 0.45s ease-out both; }
#webshopBuildCenter #ppWait .pw-intro-text { color: #4a483c; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#webshopBuildCenter #ppWait .pw-price { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
#webshopBuildCenter #ppWait .pw-stars { color: #e0a100; font-size: 12px; }
#webshopBuildCenter #ppWait .pw-cart { margin-top: auto; padding: 9px; border-radius: 6px; background: #8f8a58; color: #ffffff; text-align: center; font-weight: 700; }
#webshopBuildCenter #ppWait .pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px 10px 10px; }
#webshopBuildCenter #ppWait .pw-col { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 10px; }
#webshopBuildCenter #ppWait .pw-line { padding: 3px 0; overflow-wrap: anywhere; animation: pw-in 0.45s ease-out both; }
#webshopBuildCenter #ppWait .pw-card { padding: 8px; border-radius: 6px; background: #ffffff; overflow-wrap: anywhere; animation: pw-in 0.45s ease-out both; }
#webshopBuildCenter #ppWait .pw-faq { padding: 7px 8px; border-radius: 6px; background: #ffffff; overflow-wrap: anywhere; white-space: pre-wrap; animation: pw-in 0.45s ease-out both; }
#webshopBuildCenter #ppWait .pw-card-side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px; border-radius: 20px; background: rgba(14, 19, 42, 0.92); border: 1px solid rgba(127, 163, 255, 0.25); text-align: center; }
#webshopBuildCenter #ppWait .pw-ring { position: relative; width: 112px; height: 112px; }
#webshopBuildCenter #ppWait .pw-ring svg { width: 112px; height: 112px; }
#webshopBuildCenter #ppWait .pw-ring circle { transition: stroke-dashoffset 0.6s ease; }
#webshopBuildCenter #ppWait .pw-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: 24px; color: var(--text); }
#webshopBuildCenter #ppWait .pw-step-line { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
#webshopBuildCenter #ppWait .pw-detail { margin: 0; font-size: 13px; color: #a6aed0; }
#webshopBuildCenter #ppWait .pw-found, #webshopBuildCenter #ppWait .pw-tip { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; text-align: left; font-size: 13px; line-height: 1.5; color: #c7cce0; }
#webshopBuildCenter #ppWait .pw-found { margin-top: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
#webshopBuildCenter #ppWait .pw-tip { display: block; background: rgba(91, 139, 255, 0.08); border: 1px solid rgba(91, 139, 255, 0.2); animation: pw-in 0.45s ease-out both; }
#webshopBuildCenter #ppWait .pw-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8790b5; }
#webshopBuildCenter #ppWait .pw-tip .pw-kicker { color: #9db4ff; }
@media (max-width: 1150px) {
  #webshopBuildCenter #ppWait { grid-template-columns: minmax(0, 1fr) 250px; }
  #webshopBuildCenter #ppWait .pw-intro { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #webshopBuildCenter #ppWait { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #webshopBuildCenter #ppWait .pw-page { min-height: 0; padding: 18px 12px 12px; }
  #webshopBuildCenter #ppWait .pw-top { grid-template-columns: minmax(0, 1fr); }
  #webshopBuildCenter #ppWait .pw-photo { height: 180px; }
  #webshopBuildCenter #ppWait .pw-grid { grid-template-columns: minmax(0, 1fr); }
  #webshopBuildCenter #ppWait .pw-halo { display: none; }
  #webshopBuildCenter #ppWait .pw-open { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #webshopBuildCenter #ppWait .pw-mark.is-active, #webshopBuildCenter #ppWait .pw-blk.is-active, #webshopBuildCenter #ppWait .pw-name, #webshopBuildCenter #ppWait .pw-line, #webshopBuildCenter #ppWait .pw-card, #webshopBuildCenter #ppWait .pw-faq, #webshopBuildCenter #ppWait .pw-tip, #webshopBuildCenter #ppWait img.pw-photo { animation: none; }
}
html[data-theme="light"] #webshopBuildCenter #ppWait .pw-card-side { background: #ffffff; border-color: #d5dbe8; }
html[data-theme="light"] #webshopBuildCenter #ppWait .pw-found { background: #f7f9fc; border-color: #e3e8f2; color: #3c4560; }
html[data-theme="light"] #webshopBuildCenter #ppWait .pw-tip, html[data-theme="light"] #webshopBuildCenter #ppWait .pw-detail { color: #3c4560; }
html[data-theme="light"] #webshopBuildCenter #ppWait .pw-steps li { border-top-color: #e3e8f2; }

/* ---------- Laadblokjes en meldingen (sessie polish-snelheid) ---------- */
.of-skeleton { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 4px 0; box-sizing: border-box; }
.of-skeleton.is-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.of-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.of-skel-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.of-skel-col { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.of-skel { display: block; border-radius: 6px; background: rgba(255, 255, 255, 0.07); animation: of-pulse 1.4s ease-in-out infinite; }
.of-skel-line { height: 10px; width: 100%; }
.of-skel-line.is-short { width: 55%; }
.of-skel-dot { flex: none; width: 32px; height: 32px; border-radius: 8px; }
.of-skel-thumb { height: 96px; border-radius: 8px; }
.of-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes of-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.of-toast { position: fixed; right: 20px; bottom: 20px; z-index: 10050; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 14px; border-radius: 12px; background: #141a2e; border: 1px solid rgba(126, 224, 181, 0.35); color: var(--text, #e8ecf7); font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.of-toast.is-on { opacity: 1; transform: translateY(0); }
.of-toast-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(126, 224, 181, 0.16); color: var(--testen, #7ee0b5); font-size: 12px; font-weight: 700; }
@media (max-width: 720px) {
  .of-toast { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .of-skel { animation: none; }
  .of-toast { transition: none; transform: none; }
}
html[data-theme="light"] .of-skel-row, html[data-theme="light"] .of-skel-card { background: #f7f9fc; border-color: #e3e8f2; }
html[data-theme="light"] .of-skel { background: #e3e8f2; }
html[data-theme="light"] .of-toast { background: #ffffff; border-color: #b9e8d2; color: #1d2540; box-shadow: 0 10px 30px rgba(20, 30, 60, 0.12); }
html[data-theme="light"] .of-toast-check { color: #1f9d6b; background: #e3f7ee; }

/* ---------- Eerste dag en weekoverzicht (sessie dash-start-week) ---------- */
.dash-checklist.dash-start, .dash-start {
  position: relative; overflow: hidden; margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px;
  border: 1px solid rgba(91, 139, 255, 0.35); border-radius: 16px;
  background: radial-gradient(600px 200px at 0% 0%, rgba(91, 139, 255, 0.18), transparent 60%), #10142a;
}
.dash-start-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dash-start-kicker { color: #9db4ff; }
.dash-start-pct { font-family: var(--font-num); font-size: 13px; color: #c3d2ff; }
.dash-start-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dash-start-bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4f7dff, #7ee0b5); transition: width 0.3s ease; }
.dash-start .dash-checklist-resume { align-self: flex-start; }
.dash-start-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-start-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06); }
.dash-start-step.is-next { background: rgba(91, 139, 255, 0.1); border-color: rgba(91, 139, 255, 0.4); }
.dash-start-step.is-done { opacity: 0.6; }
.dash-start-mark { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.dash-start-step.is-next .dash-start-mark { background: #5b8bff; color: #fff; }
.dash-start-step.is-done .dash-start-mark { background: rgba(126, 224, 181, 0.16); color: var(--testen); }
.dash-start-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-start-copy strong { font-size: 15px; font-weight: 600; color: var(--text); }
.dash-start-copy span { font-size: 13px; line-height: 1.45; color: #a6aed0; }
.dash-start-time { flex: 0 0 auto; font-family: var(--font-num); font-size: 12px; color: var(--muted); white-space: nowrap; }
.dash-start .dash-start-go { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }
.dash-start .cta.dash-start-go { min-height: 40px; padding: 0 18px; }
.dash-start .result-action.dash-start-go { min-height: 34px; padding: 0 12px; background: transparent; color: #c3d2ff; border: 1px solid rgba(91, 139, 255, 0.4); opacity: 0.55; }
.dash-start .result-action.dash-start-go:hover { opacity: 1; }
.dash-week-ai {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 24px;
  border: 1px solid rgba(91, 139, 255, 0.35);
  background: radial-gradient(600px 200px at 0% 0%, rgba(91, 139, 255, 0.18), transparent 60%), #10142a;
}
.dash-week-ai-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dash-week-ai-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-week-ai-top .dash-kicker { color: #9db4ff; }
.dash-week-ai-top .dash-results-range { margin-left: auto; }
.dash-week-ai-mark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(91, 139, 255, 0.2); color: #c3d2ff; }
.dash-week-ai h2 { margin: 2px 0 2px; font-family: var(--font-brand); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; }
.dash-week-ai-row { display: flex; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--copy); }
.dash-week-ai-row strong { color: var(--text); }
.dash-week-ai-row.is-good { background: rgba(126, 224, 181, 0.08); border: 1px solid rgba(126, 224, 181, 0.25); }
.dash-week-ai-row.is-good > b { color: var(--testen); }
.dash-week-ai-row.is-less { background: rgba(255, 143, 156, 0.07); border: 1px solid rgba(255, 143, 156, 0.25); }
.dash-week-ai-row.is-less > b { color: var(--afwijzen); }
.dash-week-ai-row.is-todo { background: rgba(91, 139, 255, 0.1); border: 1px solid rgba(91, 139, 255, 0.35); }
.dash-week-ai-row.is-todo > b { color: #9db4ff; }
.dash-week-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.dash-week-ai-actions .cta { width: auto; margin: 0; min-height: 40px; padding: 0 18px; }
.dash-week-ai-actions .result-action { min-height: 40px; padding: 0 14px; background: transparent; color: #c3d2ff; border: 1px solid rgba(91, 139, 255, 0.4); }
.dash-week-ai-hide { margin-left: auto; border: 0; background: none; color: var(--muted); font: 500 13px "IBM Plex Sans", sans-serif; cursor: pointer; padding: 6px 4px; }
.dash-week-ai-hide:hover { color: var(--text); }
.dash-week-ai-side { display: flex; flex-direction: column; gap: 10px; }
.dash-week-ai-kpi { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(10, 13, 26, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); }
.dash-week-ai-kpi > span:first-child { font-size: 12px; color: var(--muted); }
.dash-week-ai-num { display: flex; gap: 10px; align-items: baseline; }
.dash-week-ai-num b { font-family: var(--font-num); font-size: 18px; font-weight: 500; color: var(--text); }
.dash-week-ai-num em { font-family: var(--font-num); font-style: normal; font-size: 12px; color: var(--muted); }
.dash-week-ai-num em.is-up { color: var(--testen); }
.dash-week-ai-num em.is-down { color: var(--afwijzen); }
html[data-theme="light"] .dash-start, html[data-theme="light"] .dash-week-ai { background: radial-gradient(600px 200px at 0% 0%, rgba(63, 111, 232, 0.1), transparent 60%), #ffffff; border-color: rgba(63, 111, 232, 0.35); }
html[data-theme="light"] .dash-start-kicker, html[data-theme="light"] .dash-week-ai-top .dash-kicker, html[data-theme="light"] .dash-start-pct { color: #3f6fe8; }
html[data-theme="light"] .dash-start-step { border-color: #e3e8f2; }
html[data-theme="light"] .dash-start-copy span { color: #3c4560; }
html[data-theme="light"] .dash-week-ai-kpi { background: #f7f9fc; border-color: #e3e8f2; }
html[data-theme="light"] .dash-start .result-action.dash-start-go, html[data-theme="light"] .dash-week-ai-actions .result-action { color: #3f6fe8; }
@media (max-width: 900px) {
  .dash-week-ai { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dash-start, .dash-week-ai { padding: 16px; }
  .dash-start-step { flex-wrap: wrap; gap: 10px 12px; }
  .dash-start-copy { flex-basis: calc(100% - 100px); }
  .dash-start .dash-start-go { margin-left: 42px; }
  .dash-week-ai h2 { font-size: 19px; }
  .dash-week-ai-hide { margin-left: 0; }
}

/* ---------- Snel zoeken (sessie cmdk-zoeken) ---------- */
.qs-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 260px; height: 32px; margin-right: auto; padding: 0 8px 0 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: #8790b5; font: inherit; font-size: 13px; cursor: pointer; box-sizing: border-box; }
.qs-trigger:hover { border-color: rgba(91, 139, 255, 0.45); color: #c7cce0; }
.qs-trigger:focus-visible, .qs-mtrigger:focus-visible, .qs-close:focus-visible { outline: 2px solid #5b8bff; outline-offset: 2px; }
.qs-trigger svg, .qs-mtrigger svg { width: 16px; height: 16px; flex: 0 0 auto; }
.qs-trigger-label { flex: 1 1 auto; text-align: left; white-space: nowrap; }
.qs-trigger-keys { display: inline-flex; gap: 3px; }
.qs-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #c7cce0; box-sizing: border-box; }
.topbar .topbar-tools:has(.qs-trigger) { flex: 1 1 auto; }
.qs-mtrigger { display: none; }
@media (max-width: 1100px) {
  .qs-mtrigger { display: inline-flex; }
  .topbar .qs-trigger { display: none; }
}
html.qs-open, html.qs-open body { overflow: hidden; }
.qs-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(5, 7, 15, 0.6); box-sizing: border-box; }
.qs-backdrop[hidden] { display: none; }
.qs-dialog { display: flex; flex-direction: column; width: 640px; max-width: 100%; max-height: 72vh; overflow: hidden; border-radius: 16px; background: #10142a; border: 1px solid rgba(91, 139, 255, 0.35); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(91, 139, 255, 0.08); color: #eef1f8; font-family: "IBM Plex Sans", system-ui, sans-serif; }
.qs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.qs-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.qs-ico { width: 18px; height: 18px; flex: 0 0 auto; color: #8790b5; }
.qs-input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0; border: 0; background: transparent; color: #eef1f8; font: inherit; font-size: 17px; outline: none; caret-color: #5b8bff; }
.qs-dialog .qs-input:focus, .qs-dialog .qs-input:focus-visible { outline: none; border: 0; box-shadow: none; }
.qs-input::placeholder { color: #8790b5; }
.qs-close { display: inline-flex; align-items: center; padding: 4px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.qs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 10px 12px; overscroll-behavior: contain; }
.qs-group { display: flex; flex-direction: column; gap: 2px; }
.qs-group-title { padding: 12px 10px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8790b5; }
.qs-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.qs-row[aria-selected="true"] { background: rgba(91, 139, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(91, 139, 255, 0.35); }
.qs-icon { position: relative; flex: 0 0 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: rgba(91, 139, 255, 0.12); color: #c3d2ff; font-size: 15px; }
.qs-icon.is-photo { background: #1b2346; }
.qs-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qs-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qs-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-sub { font-size: 12px; color: #8790b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-hint { flex: 0 0 auto; font-size: 12px; color: #8790b5; }
.qs-empty, .qs-loading { margin: 0; padding: 18px 10px; font-size: 13px; color: #8790b5; }
.qs-loading { padding: 8px 10px 0; font-size: 12px; }
.qs-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: #8790b5; }
.qs-foot-end { margin-left: auto; }
@media (max-width: 720px) {
  .qs-backdrop { padding: 0; }
  .qs-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .qs-hint, .qs-foot { display: none; }
}
html[data-theme="light"] .qs-trigger { background: #ffffff; border-color: #d5dbe8; color: #5b6480; }
html[data-theme="light"] .qs-kbd { background: #f3f5fa; border-color: #d5dbe8; color: #3c4560; }
html[data-theme="light"] .qs-backdrop { background: rgba(20, 28, 50, 0.35); }
html[data-theme="light"] .qs-dialog { background: #ffffff; color: #141a2e; border-color: #c9d5f5; box-shadow: 0 30px 80px rgba(20, 28, 50, 0.25); }
html[data-theme="light"] .qs-input { color: #141a2e; }
html[data-theme="light"] .qs-head, html[data-theme="light"] .qs-foot { border-color: #e3e8f2; }
html[data-theme="light"] .qs-icon { color: #2f56c9; }
html[data-theme="light"] .qs-icon.is-photo { background: #eef2fb; }

/* ---------- Productkaart (sessie productkaart) ---------- */
/* Photo and status labels in the product head, then next step, journey and three link tiles on Overzicht. */
.center-head-product .pd-name-row { align-items: center; }
.center-head-product #pdPhoto:not([hidden]) { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: #141a30; color: #8790b5; font-family: var(--font-brand); font-size: 20px; font-weight: 700; }
.center-head-product #pdPhoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.center-head-product .pk-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.center-head-product .pk-labels:empty { display: none; }
.center-head-product .pk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.06); color: #c7cce0; }
.center-head-product .pk-pill.is-blue { background: rgba(91, 139, 255, 0.16); color: #c3d2ff; }
.center-head-product .pk-pill.is-profit { background: rgba(126, 224, 181, 0.14); color: #7ee0b5; }
.center-head-product .pk-pill.is-loss { background: rgba(255, 128, 128, 0.14); color: #ff9c9c; }
.center-head-product .pk-pill.is-even { background: rgba(255, 196, 107, 0.14); color: #ffc46b; }
#productDetailCenter .pk-card:not([hidden]) { display: flex; flex-direction: column; gap: 16px; }
#productDetailCenter .pk-k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
#productDetailCenter .pk-next { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(91, 139, 255, 0.35); background: radial-gradient(600px 200px at 0% 0%, rgba(91, 139, 255, 0.18), transparent 60%), #10142a; }
#productDetailCenter .pk-next .pk-k { color: #9db4ff; white-space: nowrap; }
#productDetailCenter .pk-next b { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; color: var(--text); }
#productDetailCenter .pk-next .pk-next-btn { width: auto; margin: 0; min-height: 40px; padding: 0 18px; white-space: nowrap; }
#productDetailCenter .pk-journey { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
#productDetailCenter .pk-journey::before { content: ""; position: absolute; left: 10%; right: 10%; top: 21px; height: 2px; background: linear-gradient(90deg, #7ee0b5 0 var(--pk-fill, 0%), rgba(255, 255, 255, 0.1) var(--pk-fill, 0%)); }
#productDetailCenter .pk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
#productDetailCenter .pk-dot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 15px; font-weight: 700; box-sizing: border-box; background: #141a30; color: #8790b5; border: 2px solid rgba(255, 255, 255, 0.12); }
#productDetailCenter .pk-step.is-done .pk-dot { background: #12312a; color: #7ee0b5; border-color: #7ee0b5; }
#productDetailCenter .pk-step.is-now .pk-dot { background: #5b8bff; color: #ffffff; border-color: #5b8bff; box-shadow: 0 0 0 6px rgba(91, 139, 255, 0.2); }
#productDetailCenter .pk-step b { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
#productDetailCenter .pk-step-note { font-size: 12px; color: var(--muted); }
#productDetailCenter .pk-step-btn { min-height: 28px; margin-top: 2px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(91, 139, 255, 0.4); background: transparent; color: #c3d2ff; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#productDetailCenter .pk-step-btn:hover { background: rgba(91, 139, 255, 0.12); }
#productDetailCenter .pk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#productDetailCenter .pk-tile { display: flex; gap: 14px; min-width: 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
#productDetailCenter .pk-tile-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#productDetailCenter .pk-tile-v { font-size: 16px; font-weight: 600; color: var(--text); }
#productDetailCenter .pk-tile-v.is-empty { color: #c7cce0; font-weight: 500; }
#productDetailCenter .pk-tile-sub { font-size: 13px; line-height: 1.45; color: #a6aed0; hyphens: manual; }
#productDetailCenter .pk-link { align-self: flex-start; min-height: 0; margin-top: auto; padding: 2px 0; border: 0; background: none; box-shadow: none; color: #9db4ff; font-size: 13px; font-weight: 600; cursor: pointer; }
#productDetailCenter .pk-link:hover { color: #d0dbff; background: none; }
#productDetailCenter .pk-print { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; width: 64px; height: 92px; padding: 6px; box-sizing: border-box; border-radius: 8px; overflow: hidden; background: #141a30; border: 1px solid rgba(255, 255, 255, 0.1); }
#productDetailCenter .pk-print img { position: absolute; inset: 0 0 34px; width: 100%; height: calc(100% - 34px); object-fit: cover; }
#productDetailCenter .pk-print i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
#productDetailCenter .pk-print i:nth-child(odd) { width: 70%; }
@media (max-width: 860px) {
  #productDetailCenter .pk-next { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  #productDetailCenter .pk-next b { flex-basis: 100%; }
  #productDetailCenter .pk-next .pk-next-btn { width: 100%; }
  #productDetailCenter .pk-tiles { grid-template-columns: minmax(0, 1fr); }
  #productDetailCenter .pk-dot { width: 34px; height: 34px; font-size: 13px; }
  #productDetailCenter .pk-journey::before { top: 17px; }
  #productDetailCenter .pk-step b { font-size: 12px; }
  #productDetailCenter .pk-step-note { font-size: 11px; }
  #productDetailCenter .pk-step-btn { padding: 0 6px; font-size: 11px; white-space: normal; }
  .center-head-product #pdPhoto:not([hidden]) { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
}
html[data-theme="light"] .center-head-product #pdPhoto:not([hidden]) { background: #eef2fa; border-color: #d5dbe8; color: #6b7590; }
html[data-theme="light"] .center-head-product .pk-pill { background: #eef2fa; color: #3c4560; }
html[data-theme="light"] .center-head-product .pk-pill.is-blue { background: rgba(91, 139, 255, 0.14); color: #2f55c9; }
html[data-theme="light"] .center-head-product .pk-pill.is-profit { color: #1d7a54; }
html[data-theme="light"] .center-head-product .pk-pill.is-loss { color: #b33a3a; }
html[data-theme="light"] .center-head-product .pk-pill.is-even { color: #8a5a00; }
html[data-theme="light"] #productDetailCenter .pk-next { background: radial-gradient(600px 200px at 0% 0%, rgba(91, 139, 255, 0.14), transparent 60%), #f4f7ff; }
html[data-theme="light"] #productDetailCenter .pk-next .pk-k, html[data-theme="light"] #productDetailCenter .pk-link { color: #2f55c9; }
html[data-theme="light"] #productDetailCenter .pk-dot, html[data-theme="light"] #productDetailCenter .pk-print { background: #eef2fa; border-color: #d5dbe8; }
html[data-theme="light"] #productDetailCenter .pk-step.is-done .pk-dot { background: #e5f6ee; color: #1d7a54; border-color: #1d7a54; }
html[data-theme="light"] #productDetailCenter .pk-step.is-now .pk-dot { background: #5b8bff; color: #ffffff; border-color: #5b8bff; }
html[data-theme="light"] #productDetailCenter .pk-journey::before { background: linear-gradient(90deg, #1d7a54 0 var(--pk-fill, 0%), #d5dbe8 var(--pk-fill, 0%)); }
html[data-theme="light"] #productDetailCenter .pk-step-btn { color: #2f55c9; }
html[data-theme="light"] #productDetailCenter .pk-tile { background: #ffffff; }
html[data-theme="light"] #productDetailCenter .pk-tile-v.is-empty, html[data-theme="light"] #productDetailCenter .pk-tile-sub { color: #3c4560; }
html[data-theme="light"] #productDetailCenter .pk-print i { background: #d5dbe8; }

/* ---------- App en meldingen (sessie app-meldingen) ---------- */
#settingsModal .app-settings { display: grid; gap: 12px; }
#settingsModal .app-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(91, 139, 255, 0.05); }
#settingsModal .app-card-copy { min-width: 0; }
#settingsModal .app-card-copy strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
#settingsModal .app-card-copy p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
#settingsModal .app-card .cta { flex: 0 0 auto; white-space: nowrap; }
#settingsModal .app-ios-steps { margin: 0; padding: 12px 16px 12px 34px; border: 1px dashed rgba(91, 139, 255, 0.35); border-radius: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
#settingsModal .app-ios-steps strong { color: var(--text); font-weight: 600; }
#settingsModal .app-ios-steps[hidden], #settingsModal .app-card .cta[hidden], #settingsModal .app-settings .result-action[hidden] { display: none; }
@media (max-width: 560px) {
  #settingsModal .app-card { flex-direction: column; align-items: stretch; }
  #settingsModal .app-card .cta { width: 100%; }
}

/* Productpagina: paginacontrole, eerst checken en resultaat (sessie ws-preview-upload) */
.pp-check-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.pp-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); font-size: 13px; line-height: 1.4; }
.pp-check-row > span:nth-child(2) { flex: 1 1 180px; min-width: 0; }
.pp-check-row .result-action { min-height: 30px; padding: 0 10px; font-size: 12px; }
.pp-check-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 999px; background: rgba(255,120,120,0.16); color: #ffb3a8; font-size: 12px; font-weight: 700; }
#ppPageCheckList .pp-check-row, .pp-page-check-body .pp-check-row { margin: 0 0 6px; }
.pp-check-head { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8790b5; }
.pp-check-note { margin: 8px 0 0; font-size: 12px; color: #8790b5; }
#ppPageCheckList { display: grid; gap: 6px; padding: 0; list-style: none; }
.pp-export-sum { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 14px; font-size: 13px; }
.pp-export-sum dt { color: #8790b5; }
.pp-export-sum dd { margin: 0; hyphens: manual; }
#ppShopifyResult .pp-row, #ppShopifyExportDialog .pp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#ppShopifyResult a.cta { display: inline-flex; align-items: center; text-decoration: none; }
.pp-check-mark.is-tip { background: rgba(243,170,80,0.16); color: #f3c98b; }
.pp-shop-card { display: grid; gap: 6px; margin: 0 0 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(126,226,161,0.35); background: rgba(126,226,161,0.06); font-size: 13px; line-height: 1.45; }
.pp-shop-card strong { color: #7ee2a1; }
.pp-shop-card span { color: #c3cae3; }
.pp-shop-card .result-action { justify-self: start; text-decoration: none; }
.pp-field-head { margin: 10px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8790b5; }
.pp-price-table { display: grid; grid-template-columns: minmax(0, 1fr) 78px 78px 68px; gap: 6px 8px; align-items: center; margin: 0 0 8px; font-size: 12px; }
.pp-price-table > span:nth-child(-n+4) { color: #8790b5; font-size: 11px; }
.pp-price-table:not(.is-rows) { grid-template-columns: 90px 90px minmax(0, 1fr) 0; }
.pp-price-table input { width: 100%; min-width: 0; min-height: 34px; box-sizing: border-box; padding: 4px 8px; }
.pp-price-table b { color: #7ee2a1; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-price-table b.is-loss { color: #ffb3a8; }
.pp-suggest { display: grid; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(91,139,255,0.4); background: rgba(91,139,255,0.08); font-size: 12px; line-height: 1.45; }
.pp-suggest .result-action { justify-self: start; }
.pp-option-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 8px; margin: 0 0 8px; }
.pp-seo { margin: 10px 0 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0 12px; }
.pp-seo summary { min-height: 38px; display: flex; align-items: center; cursor: pointer; font-size: 12px; font-weight: 600; }
.pp-seo[open] { padding-bottom: 12px; }
.pp-brand-card { margin: 10px 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0 12px 12px; }
.pp-brand-card summary { min-height: 38px; display: flex; align-items: center; cursor: pointer; font-size: 12px; font-weight: 600; }
.pp-brand-card .pp-color { display: flex; gap: 8px; }
.pp-brand-sample { display: grid; gap: 4px; margin-top: 8px; padding: 12px; border-radius: 10px; background: #fff; }
.pp-brand-sample b { font-size: 18px; font-weight: 800; color: #1f1a15; }
.pp-brand-sample span { font-size: 13px; font-weight: 600; }
.pp-brand-sample i { display: block; width: 100%; height: 6px; margin-top: 4px; border-radius: 999px; }

/* Productpagina-editor: overzichtelijkere panelen links en rechts (sessie ws-preview-upload) */
html.is-pp-studio #ppSectionNav .pp-tree-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; padding: 11px 0; font-size: 14px; }
html.is-pp-studio #ppSectionNav .pp-tree-section > .pp-tree-name, html.is-pp-studio #ppSectionNav .pp-tree-group > .pp-tree-name { font-weight: 650; color: var(--text, #eef1fb); }
html.is-pp-studio #ppSectionNav .pp-tree-kids .pp-tree-name { font-size: 13px; color: #c3cae3; font-weight: 500; }
html.is-pp-studio #ppSectionNav .pp-tree-row em { flex: 0 0 auto; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #9aa3c4; font-size: 11px; font-style: normal; font-weight: 600; line-height: 1.5; }
html.is-pp-studio #ppSectionNav .pp-tree-row.is-empty .pp-tree-name { color: #8790b5; }
html.is-pp-studio #ppSectionNav .pp-tree-row.is-hidden .pp-tree-name { text-decoration: line-through; color: #6f789c; }
html.is-pp-studio #ppSectionNav .pp-tree { margin-bottom: 2px; }
html.is-pp-studio #ppSectionNav .pp-lock { font-size: 11px; opacity: .55; }
html.is-pp-studio #ppEdit .pp-path { font-size: 12px; }
html.is-pp-studio #ppEdit label { display: grid; gap: 6px; margin: 0 0 12px; color: #aab2d0; font-size: 12px; font-weight: 600; }
html.is-pp-studio #ppEdit label > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), html.is-pp-studio #ppEdit label > textarea, html.is-pp-studio #ppEdit label > select { width: 100%; min-width: 0; box-sizing: border-box; font-size: 14px; }
html.is-pp-studio #ppEdit label.pp-checkline { display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 36px; margin: 0 0 10px; color: var(--text, #eef1fb); font-size: 13px; font-weight: 500; }
html.is-pp-studio #ppEdit label.pp-checkline input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
html.is-pp-studio #ppEdit .pp-media-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); font-size: 12px; color: #aab2d0; }
html.is-pp-studio #ppEdit .pp-media-row img, html.is-pp-studio #ppEdit .pp-media-row .pp-media-kind { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: rgba(255,255,255,0.05); font-size: 11px; }
html.is-pp-studio #ppEdit .pp-media-row .pp-replace { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(91,139,255,0.45); color: #c3d2ff; cursor: pointer; font-size: 12px; }
html.is-pp-studio #ppEdit .pp-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
html.is-pp-studio #ppEdit .pp-empty { font-size: 12px; line-height: 1.5; }
html.is-pp-studio #ppEdit .pp-back { display: inline-flex; align-items: center; min-height: 30px; margin: 0 0 8px; padding: 0 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: transparent; color: #c3d2ff; font: 600 12px inherit; cursor: pointer; }
html.is-pp-studio #ppEdit .pp-wide { display: flex; justify-content: center; width: 100%; min-height: 42px; margin: 0 0 8px; }
html.is-pp-studio #ppEdit .pp-rating-card { display: grid; gap: 4px; margin: 0 0 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
html.is-pp-studio #ppEdit .pp-rating-preview { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #fff; color: #3a3328; font-size: 13px; line-height: 1.4; }
html.is-pp-studio #ppEdit .pp-rating-stars { color: #f2b01e; letter-spacing: 1px; }

/* Telefoon: de menuknop moet altijd in beeld staan. De taalkeuze staat dan in het menu. */
@media (max-width: 560px) {
  .mnav-bar .mnav-lang { display: none !important; }
  .mnav-bar .mnav-btn { margin-left: auto; flex: 0 0 auto; }
  .mnav-bar .mnav-logo-name { display: none; }
}
@media (min-width: 561px) { .sidebar-lang { display: none !important; } }
.sidebar-lang { gap: 4px; padding: 4px 8px; }
.sidebar-lang button { flex: 1 1 0; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; }
.sidebar-lang button[aria-pressed="true"], .sidebar-lang button.is-on { background: rgba(91, 139, 255, 0.16); color: #d0dbff; }

/* Studentenweergave: beheer-onderdelen niet tonen, zodat je ziet wat een student ziet. */
body.is-student-preview [data-admin-only],
body.is-student-preview #agentCoachSignals,
body.is-student-preview #sidebarBeheerLabel { display: none !important; }

/* ---------- Videostijl: Productscan en Roadmap (sessie videostijl) ---------- */
/* Show bij wachten en vieren, rust bij werken: beweging alleen bij Scan bezig en het klaar-moment. */
/* Scan bezig (idee C): kicker, kop met blauw slotwoord, kaart met wat de scan bekijkt, stille telefoon. */
@keyframes vs-ring { to { transform: rotate(360deg); } }
@keyframes vs-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vs-breath { 0%, 100% { box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 40px rgba(91, 139, 255, 0.12); } 50% { box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 80px rgba(91, 139, 255, 0.3); } }
#beoordelaarCenter #scanRun { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: center; margin: 28px 0 16px; }
#beoordelaarCenter #scanRun .scan-run-intro { grid-column: auto; min-width: 0; }
#beoordelaarCenter #scanRun .scan-run-kicker { margin: 0; font-family: var(--font-num); font-size: 13px; letter-spacing: 0.2em; color: var(--ice); }
#beoordelaarCenter #scanRun .scan-run-title { margin: 14px 0 18px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--text); }
#beoordelaarCenter #scanRun .scan-run-accent { color: var(--ice); }
#beoordelaarCenter #scanRun .scan-run-lead { max-width: 46ch; margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--copy); }
#beoordelaarCenter #scanRun .scan-run-label { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#beoordelaarCenter #scanRun .scan-run-checks { max-width: 600px; padding: 22px 24px; box-sizing: border-box; border-radius: 20px; background: rgba(14, 18, 38, 0.9); border: 1px solid rgba(91, 139, 255, 0.25); }
#beoordelaarCenter #scanRun .scan-run-checks-title { margin: 0; font-family: var(--font-num); font-size: 12px; letter-spacing: 0.18em; color: var(--muted); }
#beoordelaarCenter #scanRun .scan-run-stages { margin: 14px 0 0; }
#beoordelaarCenter #scanRun .scan-run-stages li { gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; font-weight: 400; color: var(--muted); animation: vs-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
#beoordelaarCenter #scanRun .scan-run-stages li:nth-child(2) { animation-delay: 0.35s; }
#beoordelaarCenter #scanRun .scan-run-stages li:nth-child(3) { animation-delay: 0.7s; }
#beoordelaarCenter #scanRun .scan-run-stages li:nth-child(4) { animation-delay: 1.05s; }
#beoordelaarCenter #scanRun .scan-run-stages li:nth-child(5) { animation-delay: 1.4s; }
#beoordelaarCenter #scanRun .scan-run-stages li.is-done, #beoordelaarCenter #scanRun .scan-run-stages li.is-active { color: var(--text); font-weight: 400; }
#beoordelaarCenter #scanRun .scan-run-stage-mark { flex: 0 0 28px; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; background: none; animation: none; }
#beoordelaarCenter #scanRun .scan-run-stages li.is-done .scan-run-stage-mark { border: 0; background: var(--testen); }
#beoordelaarCenter #scanRun .scan-run-stages li.is-done .scan-run-stage-mark::after { content: "✓"; color: var(--void); font-size: 14px; font-weight: 800; }
#beoordelaarCenter #scanRun .scan-run-stages li.is-active .scan-run-stage-mark { border: 3px solid rgba(91, 139, 255, 0.2); border-top-color: var(--ice); border-radius: 50%; background: none; animation: vs-ring 1.2s linear infinite; }
#beoordelaarCenter #scanRun .scan-run-phone { position: relative; height: 640px; }
#beoordelaarCenter #scanRun .scan-run-phone-body { top: 20px; width: 300px; height: 600px; margin-left: -150px; padding: 10px; border-radius: 48px; background: #0e1226; border: 2px solid rgba(91, 139, 255, 0.35); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 50px rgba(91, 139, 255, 0.18); animation: vs-breath 4s ease-in-out infinite; }
#beoordelaarCenter #scanRun .scan-run-screen { border-radius: 38px; background: radial-gradient(ellipse at 50% 40%, #1d2a5c, #0d1124 70%); }
#beoordelaarCenter #scanRun .scan-run-video { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 8px; background: rgba(10, 13, 26, 0.8); font-family: var(--font-num); font-size: 11px; letter-spacing: 0.12em; color: var(--text); white-space: nowrap; }
#beoordelaarCenter #scanRun .scan-run-meter { position: absolute; left: 22px; right: 22px; bottom: 30px; }
#beoordelaarCenter #scanRun .scan-run-meter-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-family: var(--font-num); font-size: 12px; color: var(--copy); }
#beoordelaarCenter #scanRun .scan-run-detail { display: block; min-width: 0; margin: 0; overflow: hidden; font-size: 12px; color: var(--copy); text-overflow: ellipsis; white-space: nowrap; }
#beoordelaarCenter #scanRun .scan-run-pct { position: static; display: inline; font-family: var(--font-num); font-size: 12px; color: var(--copy); }
#beoordelaarCenter #scanRun .scan-run-track { width: 100%; max-width: none; height: 5px; margin: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#beoordelaarCenter #scanRun .scan-run-bar { height: 100%; border-radius: 0; background: var(--ice); }
@media (max-width: 1150px) {
  #beoordelaarCenter #scanRun { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  #beoordelaarCenter #scanRun .scan-run-phone { height: 520px; }
  #beoordelaarCenter #scanRun .scan-run-phone-body { width: 250px; height: 500px; margin-left: -125px; border-radius: 42px; }
}
@media (max-width: 720px) {
  #beoordelaarCenter #scanRun { grid-template-columns: 1fr; gap: 20px; margin-top: 12px; }
  #beoordelaarCenter #scanRun .scan-run-title { font-size: 34px; }
  #beoordelaarCenter #scanRun .scan-run-lead { margin-bottom: 20px; font-size: 15px; }
  #beoordelaarCenter #scanRun .scan-run-checks { padding: 18px; }
  #beoordelaarCenter #scanRun .scan-run-phone { height: 380px; }
  #beoordelaarCenter #scanRun .scan-run-phone-body { top: 10px; width: 180px; height: 360px; margin-left: -90px; padding: 8px; border-radius: 34px; }
  #beoordelaarCenter #scanRun .scan-run-screen { border-radius: 27px; }
  #beoordelaarCenter #scanRun .scan-run-meter { left: 16px; right: 16px; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #beoordelaarCenter #scanRun .scan-run-stages li, #beoordelaarCenter #scanRun .scan-run-stages li.is-active .scan-run-stage-mark, #beoordelaarCenter #scanRun .scan-run-phone-body { animation: none !important; }
}
/* Resultaat (v2, rustig): voorlopige uitslag als kop met één blauw accentwoord, ronde gevulde markeringen. */
#beoordelaarCenter .studio-verdict-kicker { margin: 0; font-family: var(--font-num); font-size: 12px; letter-spacing: 0.2em; color: var(--ice); }
#beoordelaarCenter .studio-verdict-kicker span { white-space: nowrap; }
#beoordelaarCenter .studio-verdict-title { margin: 12px 0 16px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); }
#beoordelaarCenter .studio-verdict-title em { font-style: normal; color: var(--ice); }
#beoordelaarCenter .studio-assessment .studio-headline { margin: 0 0 8px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.35; color: var(--text); }
#beoordelaarCenter .studio-verdict-caveat { margin: 0 0 8px; font-size: 13px; color: var(--copy); }
#beoordelaarCenter .studio-why .studio-criterion-mark { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--twijfel) !important; color: var(--void); font-size: 14px; font-weight: 800; box-shadow: none; }
#beoordelaarCenter .studio-why .studio-criterion-mark.is-good { background: var(--testen) !important; color: var(--void); }
#beoordelaarCenter .studio-why .studio-criterion > p { padding-left: 40px; }
@media (max-width: 720px) {
  #beoordelaarCenter .studio-verdict-kicker { font-size: 11px; letter-spacing: 0.12em; }
  #beoordelaarCenter .studio-verdict-title { font-size: 32px; }
}
/* Roadmap (v2 met lessen): ronde fase-bolletjes op een lichtlijn, lessen op dezelfde lijn, stille vonk bij je volgende les. */
#roadmapCenter .rm-quiet .rm-quiet-phases { position: relative; z-index: 0; }
#roadmapCenter .rm-quiet .rm-quiet-phases .rm-quiet-phase { position: relative; overflow: visible; }
#roadmapCenter .rm-quiet .rm-tick { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#roadmapCenter .rm-quiet .rm-quiet-phase:not(:last-child)::before, #roadmapCenter .rm-quiet .rm-quiet-phase.is-lit:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 37px; bottom: -47px; pointer-events: none; }
#roadmapCenter .rm-quiet .rm-quiet-phase:not(:last-child)::before { left: 41px; width: 2px; background: rgba(255, 255, 255, 0.08); }
#roadmapCenter .rm-quiet .rm-quiet-phase.is-lit:not(:last-child)::after { left: 40px; width: 4px; border-radius: 2px; background: var(--ice); box-shadow: 0 0 8px rgba(91, 139, 255, 0.5); }
#roadmapCenter .rm-quiet .rm-quiet-phase .rm-board-phase .rm-phase-number { position: relative; z-index: 2; width: 40px; height: 40px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; background: #0e1226; color: var(--muted); font-family: var(--font-num); font-size: 13px; font-weight: 600; box-shadow: none; }
#roadmapCenter .rm-quiet .rm-quiet-phase .rm-board-phase .rm-phase-number.is-complete { border-color: transparent; background: var(--testen); color: var(--void); font-size: 17px; font-weight: 800; }
#roadmapCenter .rm-quiet .rm-quiet-phase.is-here .rm-board-phase .rm-phase-number:not(.is-complete) { border: 2px solid var(--ice); background: #16204a; color: #ffffff; box-shadow: 0 0 12px rgba(91, 139, 255, 0.4); }
#roadmapCenter .rm-quiet:has(.is-here) .rm-quiet-phase:not(.is-here):not(.is-open):has(.rm-board-phase.is-done) .rm-board-phase { opacity: 1; }
#roadmapCenter .rm-quiet .rm-quiet-phase .rm-board-lessons { padding-left: 9px; }
#roadmapCenter .rm-quiet .rm-board-lessons > li { position: relative; }
#roadmapCenter .rm-quiet .rm-board-lesson { grid-template-columns: 36px minmax(0, 1fr) auto; }
#roadmapCenter .rm-quiet .rm-board-lesson .rm-lesson-index { position: relative; z-index: 2; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; background: #0e1226; color: var(--muted); font-size: 12px; font-weight: 600; }
#roadmapCenter .rm-quiet .rm-board-lesson.is-done .rm-lesson-index { border-color: transparent; background: var(--testen); color: var(--void); font-size: 15px; font-weight: 800; }
#roadmapCenter .rm-quiet .rm-board-lesson.is-current .rm-lesson-index { border: 2px solid var(--ice); background: #16204a; color: #ffffff; box-shadow: 0 0 10px rgba(91, 139, 255, 0.4); }
#roadmapCenter .rm-quiet .rm-board-end { min-width: 22px; }
#roadmapCenter .rm-quiet .rm-board-klaar { font-size: 11px; color: var(--testen); }
#roadmapCenter .rm-quiet .rm-board-lessons > li.is-lit::before { content: ""; position: absolute; z-index: -1; left: 32px; top: -40px; bottom: 50%; width: 4px; border-radius: 2px; background: var(--ice); box-shadow: 0 0 8px rgba(91, 139, 255, 0.5); pointer-events: none; }
#roadmapCenter .rm-quiet .rm-board-lessons > li.is-lit:first-child::before { top: -60px; }
#roadmapCenter .rm-quiet .rm-board-lessons > li.is-lit:has(.is-current)::before { bottom: calc(50% + 34px); }
#roadmapCenter .rm-quiet .rm-spark { position: absolute; z-index: 3; left: 31px; top: -9px; width: 22px; height: 22px; fill: #ffffff; filter: drop-shadow(0 0 6px var(--ice)); pointer-events: none; }
#roadmapCenter .rm-quiet .rm-board-lessons > li > .rm-spark { left: 22px; top: calc(50% - 45px); }
@media (max-width: 760px) {
  #roadmapCenter .rm-quiet .rm-quiet-phase:not(:last-child)::before { left: 32px; }
  #roadmapCenter .rm-quiet .rm-quiet-phase.is-lit:not(:last-child)::after { left: 31px; }
  #roadmapCenter .rm-quiet .rm-quiet-phase .rm-board-phase .rm-phase-number { width: 36px; height: 36px; font-size: 12px; }
  #roadmapCenter .rm-quiet .rm-quiet-phase .rm-board-lessons { padding-left: 9px; }
  #roadmapCenter .rm-quiet .rm-board-lesson { grid-template-columns: 30px minmax(0, 1fr) auto; }
  #roadmapCenter .rm-quiet .rm-board-lesson .rm-lesson-index { width: 30px; height: 30px; }
  #roadmapCenter .rm-quiet .rm-board-lessons > li.is-lit::before { left: 23px; }
  #roadmapCenter .rm-quiet .rm-spark { left: 22px; }
  #roadmapCenter .rm-quiet .rm-board-lessons > li > .rm-spark { left: 14px; }
}
/* Klaar-moment (versie 1, met gloed): alleen direct nadat een les is afgerond. */
@keyframes vs-in { from { opacity: 0; filter: blur(12px); transform: translateY(14px) scale(0.98); } to { opacity: 1; filter: none; transform: none; } }
body:not([data-agent="roadmap"]) #rmLessonDone { display: none; }
body[data-agent="roadmap"] #rmLessonDone { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); }
body[data-agent="roadmap"] #rmLessonDone .rm-done-card { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 44px 48px; box-sizing: border-box; border-radius: 28px; background: #0e1226; border: 1px solid rgba(91, 139, 255, 0.5); box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7), 0 0 120px rgba(91, 139, 255, 0.25); text-align: center; color: var(--text); animation: vs-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
body[data-agent="roadmap"] #rmLessonDone .rm-done-kicker { margin: 0; font-family: var(--font-num); font-size: 13px; letter-spacing: 0.2em; color: var(--ice); }
body[data-agent="roadmap"] #rmLessonDone .rm-done-title { margin: 14px 0 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 48px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
body[data-agent="roadmap"] #rmLessonDone .rm-done-title em { font-style: normal; color: var(--ice); }
body[data-agent="roadmap"] #rmLessonDone .rm-done-stripe { display: block; width: 140px; height: 6px; margin: 18px auto 26px; border-radius: 3px; background: var(--ice); box-shadow: 0 0 22px rgba(91, 139, 255, 0.7); }
body[data-agent="roadmap"] #rmLessonDone .rm-done-checks { display: flex; flex-direction: column; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; text-align: left; }
body[data-agent="roadmap"] #rmLessonDone .rm-done-checks li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 500; line-height: 1.4; }
body[data-agent="roadmap"] #rmLessonDone .rm-done-tick { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--testen); color: var(--void); font-weight: 800; box-shadow: 0 0 16px rgba(126, 224, 181, 0.45); }
body[data-agent="roadmap"] #rmLessonDone .rm-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
body[data-agent="roadmap"] #rmLessonDone .rm-done-next { min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ice); color: #ffffff; font: 600 15px "IBM Plex Sans", sans-serif; cursor: pointer; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.3); transition: background 0.15s; }
body[data-agent="roadmap"] #rmLessonDone .rm-done-next:hover { background: var(--accent-hover); }
body[data-agent="roadmap"] #rmLessonDone .rm-done-close { min-height: 48px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: none; color: var(--copy); font: 500 15px "IBM Plex Sans", sans-serif; cursor: pointer; }
body[data-agent="roadmap"] #rmLessonDone .rm-done-close:hover { border-color: rgba(91, 139, 255, 0.4); color: var(--text); }
body[data-agent="roadmap"] #rmLessonDone button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (max-width: 560px) {
  body[data-agent="roadmap"] #rmLessonDone .rm-done-card { padding: 30px 22px; border-radius: 22px; }
  body[data-agent="roadmap"] #rmLessonDone .rm-done-title { font-size: 34px; }
  body[data-agent="roadmap"] #rmLessonDone .rm-done-checks li { font-size: 15px; }
  body[data-agent="roadmap"] #rmLessonDone .rm-done-tick { flex-basis: 30px; width: 30px; height: 30px; }
  body[data-agent="roadmap"] #rmLessonDone .rm-done-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-agent="roadmap"] #rmLessonDone .rm-done-card { animation: none; }
}

/* ---------- Videostijl: rest van de Productscan (sessie videostijl-scan) ---------- */
/* Upload, Mijn scans en Vergelijken in dezelfde stijl als Scan bezig en Resultaat. Rust bij werken: hier beweegt niets. */
/* Nieuwe scan (upload): mono kicker, Sora-kop met blauw slotwoord, ronde stapnummers, stille telefoon. */
#beoordelaarCenter .studio-intro .studio-kicker { max-width: none; margin: 0; font-family: var(--font-num); font-size: 13px; line-height: 1.4; letter-spacing: 0.2em; color: var(--ice); }
#beoordelaarCenter .studio-intro h2 { margin: 14px 0 18px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
#beoordelaarCenter .studio-intro p:not(.studio-kicker) { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--copy); }
#beoordelaarCenter .studio-intro-steps li { gap: 14px; align-items: center; border-top-color: rgba(255, 255, 255, 0.06); }
#beoordelaarCenter .studio-intro-step-n { flex: 0 0 28px; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; background: #0e1226; color: var(--muted); font-family: var(--font-num); font-size: 12px; font-weight: 600; }
#beoordelaarCenter .studio-intro-steps li:first-child .studio-intro-step-n { border: 2px solid var(--ice); background: #16204a; color: #ffffff; }
#beoordelaarCenter .studio-ring { display: none; }
#beoordelaarCenter .studio-phone-stage::before { background: radial-gradient(circle, rgba(91, 139, 255, 0.14), transparent 62%); }
#beoordelaarCenter .studio-phone { padding: 10px; border-radius: 48px; background: #0e1226; border: 2px solid rgba(91, 139, 255, 0.35); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 50px rgba(91, 139, 255, 0.18); animation: none; }
#beoordelaarCenter .studio-phone-screen { border-radius: 38px; background: radial-gradient(ellipse at 50% 40%, #1d2a5c, #0d1124 70%); }
#beoordelaarCenter .studio-phone #dropzone { border: 1px dashed rgba(255, 255, 255, 0.18); }
#beoordelaarCenter .studio-phone .studio-upload-copy > svg { background: rgba(91, 139, 255, 0.14); box-shadow: none; color: #c3d2ff; }
#beoordelaarCenter .studio-phone .drop-hint { font-family: "Sora", "IBM Plex Sans", sans-serif; letter-spacing: -0.015em; }
#beoordelaarCenter .studio-phone .drop-title { border-color: rgba(91, 139, 255, 0.45); border-radius: 12px; }
#beoordelaarCenter .studio-chip { animation: none; opacity: 1; border-radius: 12px; background: rgba(14, 18, 38, 0.92); box-shadow: none; }
#beoordelaarCenter .studio-form-card { padding: 22px 24px; border-radius: 20px; background: rgba(14, 18, 38, 0.9); border: 1px solid rgba(91, 139, 255, 0.25); box-shadow: none; }
#beoordelaarCenter .studio-panel-head h3 { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
#beoordelaarCenter .studio-panel-head span { letter-spacing: 0.12em; text-transform: uppercase; }
#beoordelaarCenter .studio-panel-empty, #beoordelaarCenter .studio-panel-tip { border-radius: 12px; }
#beoordelaarCenter .studio-form-card #button.cta { min-height: 48px; border: 0; border-radius: 12px; background: var(--ice); color: #ffffff; font-weight: 600; box-shadow: none; }
#beoordelaarCenter .studio-form-card #button.cta:hover:not(:disabled) { background: var(--accent-hover); }
#beoordelaarCenter .studio-form-card #button.cta:disabled { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
#beoordelaarCenter .studio-phone-label { border-radius: 8px; font-family: var(--font-num); font-size: 11px; letter-spacing: 0.08em; }
/* Accentwoord overal met hetzelfde verloop als "jouw video." op de uploadpagina. */
#beoordelaarCenter #scanRun .scan-run-accent, #beoordelaarCenter .studio-verdict-title em, body[data-agent="roadmap"] #rmLessonDone .rm-done-title em { background: linear-gradient(90deg, #6f97ff, #b3c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Mijn scans: rustige lijst met ronde statusmarkeringen. */
#beoordelaarCenter #evalRecent .eval-recent-head strong { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
#beoordelaarCenter #evalRecentList { border-color: var(--line); border-radius: 20px; background: rgba(14, 18, 38, 0.6); }
#beoordelaarCenter #evalRecentList .scan-recent-row { padding: 14px 20px; }
#beoordelaarCenter #evalRecentList .scan-recent-name { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#beoordelaarCenter #evalRecentList .scan-recent-status { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
#beoordelaarCenter #evalRecentList .scan-recent-status::before { content: "!"; display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--twijfel); color: var(--void); font-size: 11px; font-weight: 800; }
#beoordelaarCenter #evalRecentList .scan-recent-status.is-klaar::before { content: "✓"; background: var(--testen); }
#beoordelaarCenter #evalRecentList .scan-recent-status.is-onbekend::before { content: "?"; background: rgba(255, 255, 255, 0.14); color: var(--text); }
#beoordelaarCenter #evalRecentList .scan-recent-row > div:nth-child(4) { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
#beoordelaarCenter #evalRecentList .scan-recent-actions .result-action { border-radius: 10px; }
#beoordelaarCenter #evalRecentList .scan-recent-actions .is-primary { border: 0; background: var(--ice); color: #ffffff; }
#beoordelaarCenter #evalRecentList .scan-recent-actions .is-primary:hover { background: var(--accent-hover); }
#beoordelaarCenter .scan-history-selection .result-action.is-primary:not(:disabled) { border: 0; border-radius: 10px; background: var(--ice); color: #ffffff; }
/* Vergelijken: Sora-kop, ronde gevulde markeringen, rustige conclusie zonder verloop. */
#beoordelaarCenter .studio-compare-head h2 { margin-bottom: 10px; font-size: 40px; letter-spacing: -0.03em; }
#beoordelaarCenter .studio-compare-side { border-radius: 18px; background: #10142a; border-color: rgba(91, 139, 255, 0.35); }
#beoordelaarCenter .studio-compare-verdict { padding: 0; background: none; color: var(--text); }
#beoordelaarCenter .studio-compare-verdict .studio-signal { width: 10px; height: 10px; flex-basis: 10px; }
#beoordelaarCenter .studio-compare-table { border-radius: 18px; background: rgba(14, 18, 38, 0.6); }
#beoordelaarCenter .studio-compare-row.is-head { font-family: var(--font-num); font-weight: 500; letter-spacing: 0.16em; }
#beoordelaarCenter .studio-compare-row.is-different { background: rgba(91, 139, 255, 0.07); }
#beoordelaarCenter .studio-compare-cell .studio-criterion-mark { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--twijfel) !important; color: var(--void) !important; font-size: 12px; font-weight: 800; }
#beoordelaarCenter .studio-compare-cell .studio-criterion-mark.is-good { background: var(--testen) !important; }
#beoordelaarCenter .studio-compare-conclusion { border-radius: 18px; background: #10142a; }
#beoordelaarCenter .studio-compare-conclusion .is-primary { border-radius: 12px; }
@media (max-width: 720px) {
  #beoordelaarCenter .studio-intro h2 { font-size: 34px; }
  #beoordelaarCenter .studio-intro .studio-kicker { font-size: 11px; letter-spacing: 0.12em; }
  #beoordelaarCenter #evalRecentList .scan-recent-actions .result-action { white-space: nowrap; padding: 0 12px; }
  #beoordelaarCenter .studio-phone { border-radius: 34px; padding: 8px; }
  #beoordelaarCenter .studio-phone-screen { border-radius: 27px; }
  #beoordelaarCenter .studio-compare-head h2 { font-size: 30px; }
}

/* ---------- Videostijl: momenten Klantenservice en AI Coach (sessie videostijl-momenten-ks-coach) ---------- */
/* Show bij wachten: checklijst met ring en groene vinkjes. Rust bij werken: buiten het wachten beweegt niets. */
@keyframes vs-ks-ring { to { transform: rotate(360deg); } }
@keyframes vs-ks-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vs-ks-in { from { opacity: 0; filter: blur(12px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes vs-coach-spark { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.8; } }
/* Klantenservice: kop "We schrijven je antwoord." en checklijst in de antwoordkaart. */
#customerServiceOffice .cs[data-moment] .cs-head { display: none; }
#customerServiceOffice .cs-moment { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding-top: 24px; }
#customerServiceOffice .cs-moment[hidden] { display: none; }
#customerServiceOffice .cs-moment-kick { margin: 0; font-family: var(--font-num); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; color: var(--ice); }
#customerServiceOffice .cs-moment-title { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--text); animation: vs-ks-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
#customerServiceOffice .cs-acc { background: linear-gradient(90deg, #6f97ff, #b3c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#customerServiceOffice .cs[data-moment] .cs-result { padding: 22px 24px; border-radius: 20px; background: rgba(14, 18, 38, 0.9); border-color: rgba(91, 139, 255, 0.25); gap: 14px; }
#customerServiceOffice .cs-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
#customerServiceOffice .cs-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; color: var(--muted); animation: vs-ks-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
#customerServiceOffice .cs-steps li:first-child { border-top: 0; }
#customerServiceOffice .cs-steps li:nth-child(2) { animation-delay: 0.35s; }
#customerServiceOffice .cs-steps li:nth-child(3) { animation-delay: 0.7s; }
#customerServiceOffice .cs-steps li.is-done, #customerServiceOffice .cs-steps li.is-active { color: var(--text); }
#customerServiceOffice .cs-step-mark, #aiCoachCenter .coach-step-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }
#customerServiceOffice .cs-steps li.is-done .cs-step-mark, #aiCoachCenter .coach-wait-steps li.is-done .coach-step-mark { border: 0; background: var(--testen); box-shadow: 0 0 16px rgba(126, 224, 181, 0.45); }
#customerServiceOffice .cs-steps li.is-done .cs-step-mark::after, #aiCoachCenter .coach-wait-steps li.is-done .coach-step-mark::after { content: "✓"; color: var(--void); font-size: 15px; font-weight: 800; }
#customerServiceOffice .cs-steps li.is-active .cs-step-mark, #aiCoachCenter .coach-wait-steps li.is-active .coach-step-mark { border: 3px solid rgba(91, 139, 255, 0.2); border-top-color: var(--ice); animation: vs-ks-ring 1.2s linear infinite; }
#customerServiceOffice .cs-found { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 8px; background: rgba(126, 224, 181, 0.12); color: var(--testen); font-size: 13px; font-weight: 600; }
/* AI Coach: rustige denk-kaart in de chat, daarna "ADVIES VAN JE COACH" boven het laatste antwoord. */
#aiCoachCenter .coach-msg.is-waiting { width: min(78%, 620px); padding: 22px 24px; border-radius: 20px; background: rgba(14, 18, 38, 0.9); border-color: rgba(91, 139, 255, 0.25); }
#aiCoachCenter .coach-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--font-num); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: var(--ice); }
#aiCoachCenter .coach-spark { flex: 0 0 18px; width: 18px; height: 18px; fill: #ffffff; filter: drop-shadow(0 0 6px var(--ice)); }
#aiCoachCenter .coach-msg.is-waiting .coach-spark { animation: vs-coach-spark 1.6s ease-in-out infinite; }
#aiCoachCenter .coach-wait-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
#aiCoachCenter .coach-wait-steps li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; color: var(--muted); animation: vs-ks-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
#aiCoachCenter .coach-wait-steps li:nth-child(2) { animation-delay: 0.35s; }
#aiCoachCenter .coach-wait-steps li:nth-child(3) { animation-delay: 0.7s; }
#aiCoachCenter .coach-wait-steps li.is-done, #aiCoachCenter .coach-wait-steps li.is-active { color: var(--text); }
/* De denk-kaart laat het al zien; de statusregel blijft voor schermlezers. */
#aiCoachCenter #aiCoachStatus { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#aiCoachCenter .coach-msg.is-fresh { animation: vs-ks-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (max-width: 720px) {
  #customerServiceOffice .cs-moment { padding-top: 16px; }
  #customerServiceOffice .cs-moment-title { font-size: 28px; }
  #customerServiceOffice .cs-moment-kick { font-size: 11px; letter-spacing: 0.12em; }
  #customerServiceOffice .cs[data-moment] .cs-result { padding: 18px; }
  #aiCoachCenter .coach-msg.is-waiting { width: 100%; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #customerServiceOffice .cs-moment-title, #customerServiceOffice .cs-steps li, #customerServiceOffice .cs-steps li.is-active .cs-step-mark,
  #aiCoachCenter .coach-msg.is-waiting .coach-spark, #aiCoachCenter .coach-wait-steps li, #aiCoachCenter .coach-wait-steps li.is-active .coach-step-mark, #aiCoachCenter .coach-msg.is-fresh { animation: none !important; }
}

/* ---------- Videostijl: koppen en knoppen op de werkpagina's (sessie videostijl-koppen) ---------- */
/* De klassen .vs-kick, .vs-title, .vs-acc en .vs-in staan in /styles/videostijl.css. Hier alleen plaatsing per pagina. Geen streepje onder de koppen. */
/* Oudere paginaregels mogen het kopregeltje niet grijs of klein maken. */
:is(#dashboardCenter, #productsCenter, #calcCenter, #supplierQuotesCenter, #aiCoachCenter, #webshopBuildCenter, #parcelOffice, #customerServiceOffice, #settingsModal, #authScreen, #accessBlocked, .pp-check-vs) .vs-kick.vs-kick { margin: 0; font-family: var(--font-num); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice); }
#calcCenter #wcPage > .vs-page-head { padding-top: 6px; }
#supplierQuotesCenter .vs-page-head { margin: 0 0 18px; padding-top: 6px; }
body[data-agent="dashboard"] .dash-hello-card.vs-head { gap: 8px; padding: 10px 0 4px; border: 0; background: transparent; }
body[data-agent="dashboard"] .dash-hello-card .vs-title { font-size: 34px; letter-spacing: -0.035em; line-height: 1.08; }
body[data-agent="dashboard"] .dash-hello-card .dash-hello-line { margin: 0; }
#productsCenter .pd-sum-intro.vs-head { gap: 8px; }
#productsCenter .pd-sum-intro .vs-title { font-size: 34px; letter-spacing: -0.035em; line-height: 1.08; }
#productsCenter .pd-sum-intro p:not(.vs-kick) { margin: 0; }
#aiCoachCenter .coach-empty .vs-kick { margin-bottom: 10px; }
#aiCoachCenter .coach-empty-title.vs-title { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
#webshopBuildCenter .vs-head { gap: 8px; }
#webshopBuildCenter .vs-head .vs-title { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
#webshopBuildCenter .vs-head p:not(.vs-kick) { margin: 0; }
#parcelOffice .pt .vs-page-head { margin: 0 0 22px; padding-top: 6px; }
#parcelOffice .pt .vs-page-head .vs-title { font-size: 34px; letter-spacing: -0.035em; line-height: 1.08; }
#parcelOffice .pt .vs-page-head .vs-sub { color: #a6aed0; }
#parcelOffice .pt dialog .pt-dialog-head .vs-head { gap: 8px; }
#parcelOffice .pt dialog .pt-dialog-head .vs-title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
#customerServiceOffice .cs-head .vs-head { gap: 8px; }
#customerServiceOffice .cs-head .vs-title { font-size: 34px; letter-spacing: -0.035em; line-height: 1.08; }
#customerServiceOffice .cs-head p.cs-muted { margin: 0; }
.pp-check-vs { gap: 8px; margin-bottom: 10px; }
.pp-check-vs .vs-title { font-size: 30px; }
#settingsModal .settings-pane .vs-kick { margin-bottom: 8px; font-size: 12px; }
#settingsModal .settings-pane h4.vs-title { font-size: 28px; }
#authScreen .auth-brand .vs-kick { font-size: 12px; }
#authScreen .auth-card h1.vs-title { margin: 6px 0 8px; font-size: 32px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
#accessBlocked .access-gate-card .vs-kick { margin-bottom: 8px; font-size: 12px; }
#accessBlocked .access-gate-card h1.vs-title { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; }
@media (max-width: 560px) {
  :is(#dashboardCenter, #productsCenter, #calcCenter, #supplierQuotesCenter, #aiCoachCenter, #webshopBuildCenter, #parcelOffice, #customerServiceOffice, #settingsModal, #authScreen, #accessBlocked, .pp-check-vs) .vs-kick.vs-kick { font-size: 11px; letter-spacing: 0.12em; }
  body[data-agent="dashboard"] .dash-hello-card .vs-title, #productsCenter .pd-sum-intro .vs-title, #aiCoachCenter .coach-empty-title.vs-title,
  #webshopBuildCenter .vs-head .vs-title, #parcelOffice .pt .vs-page-head .vs-title, #customerServiceOffice .cs-head .vs-title { font-size: 30px; }
  #authScreen .auth-card h1.vs-title, #settingsModal .settings-pane h4.vs-title { font-size: 26px; }
}

/* De knoppen staan sinds pakket 1 in /styles/vs-shared.css, zonder !important. */

/* ---------- Videostijl: momenten Webshop, Shopify en Winst (sessie videostijl-momenten-winkel) ---------- */
/* Show bij wachten en vieren, rust bij werken. Hergebruikt vs-in, vs-appear, vs-ring en vs-breath van de Productscan. Geen streepjes onder de koppen. */
/* Pagina wordt gemaakt (bord WebshopWacht): kicker met de stap, Sora-kop met blauw slotwoord, checklijst die groen wordt, ademende telefoon. */
#webshopBuildCenter #ppWait { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: center; margin: 28px 0 16px; }
#webshopBuildCenter #ppWait .pw-intro { grid-column: auto; min-width: 0; }
#webshopBuildCenter #ppWait .pw-kick { margin: 0; font-family: var(--font-num); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice); }
#webshopBuildCenter #ppWait .pw-title { margin: 14px 0 18px; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -0.035em; line-height: 1.08; }
#webshopBuildCenter #ppWait .pw-acc { background: linear-gradient(90deg, #6f97ff, #b3c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#webshopBuildCenter #ppWait .pw-lead { max-width: 52ch; margin: 0 0 28px; font-size: 16px; color: var(--copy); }
#webshopBuildCenter #ppWait .pw-checks { max-width: 600px; padding: 22px 24px; box-sizing: border-box; border-radius: 20px; background: rgba(14, 18, 38, 0.9); border: 1px solid rgba(91, 139, 255, 0.25); }
#webshopBuildCenter #ppWait .pw-checks-title { margin: 0; font-family: var(--font-num); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
#webshopBuildCenter #ppWait .pw-steps { margin: 14px 0 0; }
#webshopBuildCenter #ppWait .pw-steps li { gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; font-weight: 400; color: var(--muted); }
#webshopBuildCenter #ppWait .pw-steps li.is-done, #webshopBuildCenter #ppWait .pw-steps li.is-active { color: var(--text); font-weight: 400; }
#webshopBuildCenter #ppWait .pw-steps li.is-failed { color: var(--twijfel); font-weight: 500; }
#webshopBuildCenter #ppWait .pw-mark { flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: none; font-size: 15px; font-weight: 800; }
#webshopBuildCenter #ppWait .pw-mark.is-done { border: 0; background: var(--testen); color: #0a0d1a; box-shadow: 0 0 16px rgba(126, 224, 181, 0.45); }
#webshopBuildCenter #ppWait .pw-mark.is-failed { border: 0; background: var(--twijfel); color: #0a0d1a; }
#webshopBuildCenter #ppWait .pw-mark.is-active { border: 3px solid rgba(91, 139, 255, 0.2); border-top-color: var(--ice); animation: vs-ring 1.2s linear infinite; }
#webshopBuildCenter #ppWait:not(.is-entered) .pw-title { animation: vs-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
#webshopBuildCenter #ppWait:not(.is-entered) .pw-steps li { animation: vs-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
#webshopBuildCenter #ppWait:not(.is-entered) .pw-steps li:nth-child(2) { animation-delay: 0.3s; }
#webshopBuildCenter #ppWait:not(.is-entered) .pw-steps li:nth-child(3) { animation-delay: 0.6s; }
#webshopBuildCenter #ppWait:not(.is-entered) .pw-steps li:nth-child(4) { animation-delay: 0.9s; }
#webshopBuildCenter #ppWait:not(.is-entered) .pw-steps li:nth-child(5) { animation-delay: 1.2s; }
#webshopBuildCenter #ppWait .pw-tip { display: block; max-width: 600px; margin: 14px 0 0; box-sizing: border-box; }
#webshopBuildCenter #ppWait .pw-open { min-height: 48px; margin-top: 22px; padding: 0 22px; border-radius: 12px; }
#webshopBuildCenter #ppWait .pw-phone-wrap { position: relative; height: 640px; }
#webshopBuildCenter #ppWait .pw-phone { position: absolute; left: 50%; top: 20px; width: 300px; height: 600px; margin-left: -150px; padding: 10px; box-sizing: border-box; border-radius: 48px; background: #0e1226; border: 2px solid rgba(91, 139, 255, 0.35); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 40px rgba(91, 139, 255, 0.12); animation: vs-breath 4s ease-in-out infinite; }
#webshopBuildCenter #ppWait .pw-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 38px; background: #f6f3ee; color: #1b1f2e; font-family: "IBM Plex Sans", sans-serif; }
#webshopBuildCenter #ppWait .pw-photo { display: block; flex: 0 0 230px; width: 100%; height: 230px; border-radius: 0; object-fit: cover; background: #e6e0d4; }
#webshopBuildCenter #ppWait .pw-photo.is-empty { background: linear-gradient(160deg, #e9e3d6, #d9d4ea); }
#webshopBuildCenter #ppWait .pw-buy { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 0; min-width: 0; }
#webshopBuildCenter #ppWait .pw-name { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#webshopBuildCenter #ppWait .pw-price { display: block; font-size: 13px; color: #555b70; }
#webshopBuildCenter #ppWait .pw-line { padding: 0; font-size: 12px; line-height: 1.4; color: #3b4054; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#webshopBuildCenter #ppWait .pw-sk { min-height: 10px; height: 10px; border-radius: 5px; background: rgba(27, 31, 46, 0.12); }
#webshopBuildCenter #ppWait .pw-sk.is-blue { background: rgba(91, 139, 255, 0.35); transition: width 0.6s ease; }
#webshopBuildCenter #ppWait .pw-cart { margin-top: 6px; min-height: 40px; display: grid; place-items: center; padding: 0; border-radius: 10px; background: #1b1f2e; color: #ffffff; font-size: 13px; font-weight: 600; }
#webshopBuildCenter #ppWait .pw-meter { position: absolute; left: 18px; right: 18px; bottom: 22px; }
#webshopBuildCenter #ppWait .pw-meter-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-family: var(--font-num); font-size: 12px; color: #555b70; }
#webshopBuildCenter #ppWait .pw-detail { min-width: 0; margin: 0; overflow: hidden; font-size: 12px; color: #555b70; text-overflow: ellipsis; white-space: nowrap; }
#webshopBuildCenter #ppWait .pw-pct { position: static; display: inline; font-family: var(--font-num); font-size: 12px; color: #555b70; }
#webshopBuildCenter #ppWait .pw-track { display: block; height: 5px; border-radius: 3px; background: rgba(27, 31, 46, 0.12); overflow: hidden; }
#webshopBuildCenter #ppWait .pw-bar { display: block; height: 100%; background: var(--ice); transition: width 0.6s ease; }
@media (max-width: 1150px) {
  #webshopBuildCenter #ppWait { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  #webshopBuildCenter #ppWait .pw-intro { grid-column: auto; }
  #webshopBuildCenter #ppWait .pw-phone-wrap { height: 520px; }
  #webshopBuildCenter #ppWait .pw-phone { width: 250px; height: 500px; margin-left: -125px; border-radius: 42px; }
  #webshopBuildCenter #ppWait .pw-screen { border-radius: 32px; }
  #webshopBuildCenter #ppWait .pw-photo { flex-basis: 180px; height: 180px; }
}
@media (max-width: 720px) {
  #webshopBuildCenter #ppWait { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 12px; }
  #webshopBuildCenter #ppWait .pw-kick { font-size: 11px; letter-spacing: 0.12em; }
  #webshopBuildCenter #ppWait .pw-title { font-size: 34px; }
  #webshopBuildCenter #ppWait .pw-lead { margin-bottom: 20px; font-size: 15px; }
  #webshopBuildCenter #ppWait .pw-checks { padding: 18px; }
  #webshopBuildCenter #ppWait .pw-phone-wrap { height: 380px; }
  #webshopBuildCenter #ppWait .pw-phone { top: 10px; width: 180px; height: 360px; margin-left: -90px; padding: 8px; border-radius: 34px; }
  #webshopBuildCenter #ppWait .pw-screen { border-radius: 27px; }
  #webshopBuildCenter #ppWait .pw-photo { flex-basis: 120px; height: 120px; }
  #webshopBuildCenter #ppWait .pw-buy { gap: 7px; padding: 10px 12px 0; }
  #webshopBuildCenter #ppWait .pw-name { font-size: 14px; }
  #webshopBuildCenter #ppWait .pw-line { display: none; }
  #webshopBuildCenter #ppWait .pw-cart { min-height: 30px; font-size: 11px; }
  #webshopBuildCenter #ppWait .pw-meter { left: 12px; right: 12px; bottom: 16px; }
  #webshopBuildCenter #ppWait .pw-open { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #webshopBuildCenter #ppWait .pw-title, #webshopBuildCenter #ppWait .pw-steps li, #webshopBuildCenter #ppWait .pw-mark.is-active, #webshopBuildCenter #ppWait .pw-phone { animation: none !important; }
  #webshopBuildCenter #ppWait .pw-bar, #webshopBuildCenter #ppWait .pw-sk.is-blue { transition: none; }
}
html[data-theme="light"] #webshopBuildCenter #ppWait .pw-checks { background: #ffffff; border-color: #d5dbe8; }
/* Klaar-venster (bord WebshopWacht klaar en ShopifyKlaar): zelfde look als het klaar-moment van de Roadmap, zonder streep. Mislukt is rustig oranje. */
#vsMoment { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); }
#vsMoment .vs-moment-card { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 44px 48px; box-sizing: border-box; border-radius: 28px; background: #0e1226; border: 1px solid rgba(91, 139, 255, 0.5); box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7), 0 0 120px rgba(91, 139, 255, 0.25); text-align: center; color: #eef1f8; font-family: "IBM Plex Sans", sans-serif; animation: vs-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
#vsMoment .vs-moment-card.is-warn { border-color: rgba(255, 196, 107, 0.45); box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7); animation-name: vs-appear; }
#vsMoment .vs-moment-kicker { margin: 0; font-family: var(--font-num); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #5b8bff; }
#vsMoment .is-warn .vs-moment-kicker { color: #ffc46b; }
#vsMoment .vs-moment-title { margin: 14px 0 26px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: #eef1f8; hyphens: manual; }
#vsMoment .is-warn .vs-moment-title { margin-bottom: 18px; font-size: 40px; }
#vsMoment .vs-moment-title em { font-style: normal; background: linear-gradient(90deg, #6f97ff, #b3c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#vsMoment .vs-moment-lead { max-width: 52ch; margin: 0 auto 28px; font-size: 16px; line-height: 1.6; color: #c7cce0; }
#vsMoment .vs-moment-checks { display: flex; flex-direction: column; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; text-align: left; }
#vsMoment .vs-moment-checks li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 500; line-height: 1.4; }
#vsMoment .vs-moment-tick { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #7ee0b5; color: #0a0d1a; font-size: 15px; font-weight: 800; box-shadow: 0 0 16px rgba(126, 224, 181, 0.45); }
#vsMoment .vs-moment-tick.is-warn { background: #ffc46b; box-shadow: 0 0 16px rgba(255, 196, 107, 0.4); }
#vsMoment .vs-moment-note { margin: 0 0 28px; font-size: 14px; line-height: 1.5; color: #a6aed0; }
#vsMoment .vs-moment-checks + .vs-moment-note { margin-top: -12px; }
#vsMoment .vs-moment-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#vsMoment .vs-moment-btn, #vsMoment .vs-moment-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; border-radius: 12px; font: 600 15px "IBM Plex Sans", sans-serif; text-decoration: none; cursor: pointer; }
#vsMoment .vs-moment-btn { padding: 0 22px; border: 0; background: #5b8bff; color: #ffffff; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.3); transition: background 0.15s; }
#vsMoment .vs-moment-btn:hover { background: #4a7af0; }
#vsMoment .vs-moment-ghost { padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.14); background: none; color: #c7cce0; font-weight: 500; }
#vsMoment .vs-moment-ghost:hover { border-color: rgba(91, 139, 255, 0.4); color: #eef1f8; }
#vsMoment a:focus-visible, #vsMoment button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (max-width: 560px) {
  #vsMoment .vs-moment-card { padding: 30px 22px; border-radius: 22px; }
  #vsMoment .vs-moment-title, #vsMoment .is-warn .vs-moment-title { font-size: 32px; }
  #vsMoment .vs-moment-checks li { font-size: 15px; }
  #vsMoment .vs-moment-btn, #vsMoment .vs-moment-ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #vsMoment .vs-moment-card { animation: none; }
}
/* Uitkomst BEP berekenen (bord WinstKlaar): uitslagkaart met bedrag in blauw verloop, drie checks en de opbouw. Beweegt alleen bij verschijnen. */
#calcCenter .wc-bep-outcome.has-vs-result > .wc-day-result-kicker, #calcCenter .wc-bep-outcome.has-vs-result > .wc-day-result-grid, #calcCenter .wc-bep-outcome.has-vs-result > .wc-bep-warn { display: none; }
#calcCenter #wcPage .wc-bep-outcome.has-vs-result { padding: 0; border: 0; background: none; box-shadow: none; }
#calcCenter .wc-vs-result { display: flex; flex-direction: column; gap: 16px; }
#calcCenter .wc-vs-result[hidden] { display: none; }
#calcCenter .wc-vs-result .wv-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 28px; border-radius: 18px; background: #10142a; border: 1px solid rgba(91, 139, 255, 0.35); }
#calcCenter .wc-vs-result .wv-hero::before { content: ""; position: absolute; left: -120px; top: -160px; width: 520px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 139, 255, 0.18), transparent 65%); pointer-events: none; }
#calcCenter .wc-vs-result .wv-head, #calcCenter .wc-vs-result .wv-checks { position: relative; min-width: 0; }
#calcCenter .wc-vs-result .wv-kick { margin: 0; font-family: var(--font-num); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice); hyphens: manual; }
#calcCenter .wc-vs-result .wv-title { margin: 10px 0 10px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: clamp(30px, 3vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: #eef1f8; }
#calcCenter .wc-vs-result .wv-acc { background: linear-gradient(90deg, #6f97ff, #b3c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
#calcCenter .wc-vs-result .wv-acc.is-warn { background: none; color: var(--twijfel); }
#calcCenter .wc-vs-result .wv-lead { margin: 0; font-size: 15px; line-height: 1.6; color: #c7cce0; }
#calcCenter .wc-vs-result .wv-checks { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
#calcCenter .wc-vs-result .wv-checks li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: #eef1f8; }
#calcCenter .wc-vs-result .wv-checks li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#calcCenter .wc-vs-result .wv-checks b { font-weight: 600; }
#calcCenter .wc-vs-result .wv-checks small { font-size: 13px; color: #a6aed0; }
#calcCenter .wc-vs-result .wv-checks .wv-target { padding-left: 44px; font-size: 13px; color: #a6aed0; }
#calcCenter .wc-vs-result .wv-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--testen); color: #0a0d1a; font-size: 15px; font-weight: 800; box-shadow: 0 0 16px rgba(126, 224, 181, 0.45); }
#calcCenter .wc-vs-result .wv-mark.is-warn { background: var(--twijfel); box-shadow: 0 0 16px rgba(255, 196, 107, 0.4); }
#calcCenter .wc-vs-result .wv-build { padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
#calcCenter .wc-vs-result .wv-build-title { margin: 0 0 12px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 15px; font-weight: 600; color: var(--text); }
#calcCenter .wc-vs-result .wv-parts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#calcCenter .wc-vs-result .wv-part { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border-radius: 12px; background: rgba(10, 13, 26, 0.5); border: 1px solid rgba(255, 255, 255, 0.06); }
#calcCenter .wc-vs-result .wv-part span { font-size: 12px; color: var(--muted); }
#calcCenter .wc-vs-result .wv-part b { font-family: var(--font-num); font-size: 17px; font-weight: 500; color: var(--text); white-space: nowrap; }
#calcCenter .wc-vs-result .wv-part b.is-cost { color: #a6aed0; }
#calcCenter .wc-vs-result .wv-part b.is-ok { color: var(--testen); }
#calcCenter .wc-vs-result .wv-part b.is-warn { color: var(--twijfel); }
#calcCenter .wc-vs-result.is-enter .wv-title { animation: vs-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
#calcCenter .wc-vs-result.is-enter .wv-checks li { animation: vs-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
#calcCenter .wc-vs-result.is-enter .wv-checks li:nth-child(2) { animation-delay: 0.3s; }
#calcCenter .wc-vs-result.is-enter .wv-checks li:nth-child(3) { animation-delay: 0.6s; }
@media (max-width: 1100px) {
  #calcCenter .wc-vs-result .wv-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #calcCenter .wc-vs-result .wv-parts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (max-width: 560px) {
  #calcCenter .wc-vs-result .wv-hero { padding: 20px 18px; }
  #calcCenter .wc-vs-result .wv-title { font-size: 28px; }
  #calcCenter .wc-vs-result .wv-parts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #calcCenter .wc-vs-result .wv-part { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; }
  #calcCenter .wc-vs-result .wv-part b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #calcCenter .wc-vs-result .wv-title, #calcCenter .wc-vs-result .wv-checks li { animation: none !important; }
}
html[data-theme="light"] #calcCenter .wc-vs-result .wv-build { background: #ffffff; border-color: #d5dbe8; }

/* ---------- Videostijl: moment Advertentie maken (sessie videostijl-moment-advertentie) ---------- */
/* Show bij wachten en vieren: "We zetten je campagne klaar." met checklijst en ademende telefoon, daarna het klaar-venster. Kop en knoppen uit /styles/videostijl.css (.vs-kick, .vs-title, .vs-acc, .vs-btn, .vs-ghost, .vs-in); ring, invliegen en ademen met de keyframes van de Productscan. */
#adMakerOffice .am-mo-top { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: #8790b5; }
#adMakerOffice .am-mo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: center; margin-top: 28px; }
#adMakerOffice .am-mo-left { min-width: 0; }
#adMakerOffice .am-mo-title { margin: 14px 0 18px; font-size: 52px; outline: none; }
#adMakerOffice .am-mo-sub { max-width: 62ch; margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: #c7cce0; }
#adMakerOffice .am-mo-card { max-width: 600px; padding: 22px 24px; box-sizing: border-box; border-radius: 20px; background: rgba(14, 18, 38, 0.9); border: 1px solid rgba(91, 139, 255, 0.25); }
#adMakerOffice .am-mo-cardkick { display: block; font-family: var(--font-num); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: #8790b5; }
#adMakerOffice .am-mo-steps { display: flex; flex-direction: column; margin: 14px 0 0; padding: 0; list-style: none; }
#adMakerOffice .am-mo-steps li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; color: #8790b5; animation: vs-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
#adMakerOffice .am-mo-steps li:nth-child(2) { animation-delay: 0.3s; }
#adMakerOffice .am-mo-steps li:nth-child(3) { animation-delay: 0.6s; }
#adMakerOffice .am-mo-steps li:nth-child(4) { animation-delay: 0.9s; }
#adMakerOffice .am-mo-steps li:nth-child(5) { animation-delay: 1.2s; }
#adMakerOffice .am-mo-steps li.is-done, #adMakerOffice .am-mo-steps li.is-active { color: #eef1f8; }
#adMakerOffice .am-mo-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }
#adMakerOffice .am-mo-steps li.is-done .am-mo-mark, #adMakerOffice .am-mo-ok { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #7ee0b5; color: #0a0d1a; font-size: 15px; font-weight: 800; box-shadow: 0 0 16px rgba(126, 224, 181, 0.45); }
#adMakerOffice .am-mo-steps li.is-done .am-mo-mark::after { content: "✓"; }
#adMakerOffice .am-mo-steps li.is-active .am-mo-mark { border: 3px solid rgba(91, 139, 255, 0.2); border-top-color: #5b8bff; animation: vs-ring 1.2s linear infinite; }
#adMakerOffice .am-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Ademende telefoon met het advertentievoorbeeld en een voortgangsbalk. */
#adMakerOffice .am-mo-phone { position: relative; height: 640px; }
#adMakerOffice .am-mo-body { position: absolute; left: 50%; top: 20px; width: 300px; height: 600px; margin-left: -150px; padding: 10px; box-sizing: border-box; border-radius: 48px; background: #0e1226; border: 2px solid rgba(91, 139, 255, 0.35); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 40px rgba(91, 139, 255, 0.12); animation: vs-breath 4s ease-in-out infinite; }
#adMakerOffice .am-mo-screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: #ffffff; }
#adMakerOffice .am-mo-screen .am-pv { height: 100%; padding: 24px 0 70px; box-sizing: border-box; border-radius: 0; display: flex; flex-direction: column; }
#adMakerOffice .am-mo-screen .am-pv-media { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
#adMakerOffice .am-mo-meter { position: absolute; left: 18px; right: 18px; bottom: 20px; }
#adMakerOffice .am-mo-meter-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-family: var(--font-num); font-size: 12px; color: #555b70; }
#adMakerOffice .am-mo-track { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(27, 31, 46, 0.12); }
#adMakerOffice .am-mo-bar { height: 100%; background: #5b8bff; transition: width 0.6s ease; }
/* Mislukt: rustig, zonder beweging, met de echte melding. */
#adMakerOffice .am-mo.is-failed .am-mo-title { animation: none; }
#adMakerOffice .am-mo.is-failed .am-mo-body { animation: none; opacity: 0.6; }
#adMakerOffice .am-mo-fail { display: flex; align-items: flex-start; gap: 14px; border-color: rgba(255, 196, 107, 0.35); }
#adMakerOffice .am-mo-fail p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #eef1f8; hyphens: manual; }
#adMakerOffice .am-mo-warn { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #ffc46b; color: #0a0d1a; font-weight: 800; }
#adMakerOffice .am-mo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
#adMakerOffice :is(.am-mo-btn, .am-mo-ghost) { min-height: 48px; }
#adMakerOffice .am-mo-btn:focus-visible, #adMakerOffice .am-mo-ghost:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
/* Klaar-venster: zelfde kaart als het klaar-moment van de Roadmap, zonder streepje. */
#adMakerOffice .am-mo-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); }
#adMakerOffice .am-mo-done { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 44px 48px; box-sizing: border-box; border-radius: 28px; background: #0e1226; border: 1px solid rgba(91, 139, 255, 0.5); box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7), 0 0 120px rgba(91, 139, 255, 0.25); text-align: center; color: #eef1f8; }
#adMakerOffice .am-mo-done-title { margin: 14px 0 26px; font-size: 48px; }
#adMakerOffice .am-mo-checks { display: flex; flex-direction: column; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; text-align: left; }
#adMakerOffice .am-mo-checks li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 500; line-height: 1.4; }
#adMakerOffice .am-mo-done .am-mo-actions { justify-content: center; margin-top: 0; }
@media (max-width: 1150px) {
  #adMakerOffice .am-mo { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  #adMakerOffice .am-mo-title { font-size: 44px; }
  #adMakerOffice .am-mo-phone { height: 520px; }
  #adMakerOffice .am-mo-body { width: 250px; height: 500px; margin-left: -125px; border-radius: 42px; }
  #adMakerOffice .am-mo-screen { border-radius: 32px; }
}
@media (max-width: 720px) {
  #adMakerOffice .am-mo { grid-template-columns: 1fr; gap: 20px; margin-top: 12px; }
  #adMakerOffice .am-mo-title { font-size: 34px; }
  #adMakerOffice .am-mo-sub { margin-bottom: 20px; font-size: 15px; }
  #adMakerOffice .am-mo-card { padding: 18px; }
  #adMakerOffice .am-mo-phone { height: 400px; }
  #adMakerOffice .am-mo-body { top: 10px; width: 190px; height: 380px; margin-left: -95px; padding: 8px; border-radius: 34px; }
  #adMakerOffice .am-mo-screen { border-radius: 27px; }
  #adMakerOffice .am-mo-screen .am-pv { padding: 14px 0 54px; font-size: 10px; }
  #adMakerOffice .am-mo-meter { left: 14px; right: 14px; bottom: 16px; }
  #adMakerOffice .am-mo-actions > * { width: 100%; }
  #adMakerOffice .am-mo-done { padding: 30px 22px; border-radius: 22px; }
  #adMakerOffice .am-mo-done-title { font-size: 34px; }
  #adMakerOffice .am-mo-checks li { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #adMakerOffice .am-mo-steps li, #adMakerOffice .am-mo-steps li.is-active .am-mo-mark, #adMakerOffice .am-mo-body { animation: none !important; }
  #adMakerOffice .am-mo-bar { transition: none; }
}

/* Premium-pagina: de enige productpagina, zonder templatekeuze (sessie premium-template) */
.pp-new-kind { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.pp-new-kind strong { font-size: 16px; color: var(--text); }
.pp-new-kind > span:last-child { font-size: 13px; line-height: 1.5; color: var(--muted); }
.pp-style-switch .cta { width: 100%; margin: 6px 0; }
.pp-video-slot { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pp-video-slot span { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.pp-video-slot strong { grid-row: 1; }
.pp-photo-slot { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pp-photo-now { width: 100%; max-height: 160px; object-fit: contain; border-radius: 8px; background: var(--raise); }
.pp-photo-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.pp-photo-pick { padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.pp-photo-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-photo-pick.is-on { border-color: var(--ice); }
.pp-photo-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Producten: a product without test days is one short row with its next step. */
#productsCenter .pd-overview-card.is-fresh { align-items: center; }
#productsCenter .pd-overview-card.is-fresh .pd-ov-next { grid-column: 2 / -2; color: var(--muted); font-size: 13px; }
#productsCenter .pd-overview-card.is-fresh .pd-ov-next strong { color: #a9c6ff; font-weight: 600; }
#productsCenter .pd-overview-card.is-fresh .pd-ov-testing { grid-column: -2 / -1; }
#productsCenter .pd-overview-card.is-fresh .pd-ov-testing .pd-ov-k { display: none; }
@media (max-width: 1099px) {
  #productsCenter .pd-overview-card.is-fresh { grid-template-columns: minmax(0, 1fr) auto; }
  #productsCenter .pd-overview-card.is-fresh .pd-ov-identity { grid-column: 1; grid-row: 1; }
  #productsCenter .pd-overview-card.is-fresh .pd-ov-testing { grid-column: 2; grid-row: 1; justify-self: end; }
  #productsCenter .pd-overview-card.is-fresh .pd-ov-next { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Ronde vijf tabbladen: Dashboard, Roadmap, Productscan, Winst, Webshop bouwen ---------- */
/* Dashboard: Shopify has two figures, so no empty third cell; side cards fill the gap next to the first result card. */
.dash-results .dash-kpis-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1101px) {
  .dash-stack { grid-auto-flow: row dense; }
}
@media (max-width: 860px) {
  .dash-week-quiet .dash-quiet-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
}
/* Roadmap: the search box already shows the focus ring, the input inside does not need a second one. */
#roadmapCenter .rm-search input:focus, #roadmapCenter .rm-search input:focus-visible { box-shadow: none; outline: none; }
/* Productscan, Mijn scans: wider name column so the status stays readable; date and count hide earlier. */
#beoordelaarCenter #evalRecentList .scan-recent-row { grid-template-columns: auto minmax(0, 1fr) auto 170px auto; }
#beoordelaarCenter #evalRecentList .scan-recent-status { align-items: flex-start; line-height: 1.4; }
#beoordelaarCenter #evalRecentList .scan-recent-product > div { min-width: 0; }
@media (max-width: 1280px) {
  #beoordelaarCenter #evalRecentList .scan-recent-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  #beoordelaarCenter #evalRecentList .scan-recent-row > div:nth-child(3), #beoordelaarCenter #evalRecentList .scan-recent-row > div:nth-child(4) { display: none; }
}
@media (max-width: 720px) {
  #beoordelaarCenter #evalRecentList .scan-recent-row { grid-template-columns: auto minmax(0, 1fr); }
}
/* Opening a stored scan scrolls to the result; keep the back button and tabs in view. */
#evalCurrent { scroll-margin-top: 72px; }
@media (max-width: 720px) {
  body[data-agent="beoordelaar"] .center-head-beoordelaar > .page-help-btn { margin-left: 0; margin-right: auto; }
  #beoordelaarCenter .scan-history-selection #scanCompareSide, #beoordelaarCenter .scan-history-selection #scanCompareCoach { flex: 1 1 100%; }
}
/* Webshop bouwen: on laptop screens the import button stays above the fold. */
@media (min-width: 901px) and (max-height: 940px) {
  #webshopBuildCenter .pp-new-stage { height: 196px; }
  #webshopBuildCenter .pp-new-phone { transform: scale(0.76); transform-origin: top center; }
}
#webshopBuildCenter .pp-list-tools .pp-list-sort { margin-left: 14px; }
#webshopBuildCenter #wbSectionsEmpty { margin: 8px 0 0; }
#webshopBuildCenter #wbSectionsEmpty[hidden] { display: none !important; }

/* ---------- Productscan: Mijn scans in dezelfde stijl als Mijn productpagina's, en een rustiger resultaat ---------- */
#beoordelaarCenter #evalRecent .eval-recent-head { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
#beoordelaarCenter #evalRecent .scan-list-head { margin: 0; padding: 0; flex: 1 1 320px; }
#beoordelaarCenter #evalRecent .scan-list-head .vs-title { margin: 6px 0 6px; font-size: clamp(30px, 3.2vw, 40px); }
#beoordelaarCenter #evalRecent .scan-list-summary { margin: 0; font-family: var(--font-num); font-size: 13px; color: var(--muted); }
#beoordelaarCenter .scan-list-filters { display: flex; gap: 24px; margin: 18px 0 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#beoordelaarCenter .scan-list-filters:empty { display: none; }
#beoordelaarCenter .scan-list-filters button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: -1px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font: 500 14px "IBM Plex Sans", sans-serif; cursor: pointer; }
#beoordelaarCenter .scan-list-filters button:hover { color: var(--text); }
#beoordelaarCenter .scan-list-filters button[aria-pressed="true"] { border-bottom-color: var(--ice); color: var(--text); font-weight: 600; }
#beoordelaarCenter .scan-list-num { font-family: var(--font-num); opacity: 0.7; }
#beoordelaarCenter #evalRecentList .scan-recent-files { margin-top: 2px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#beoordelaarCenter #evalRecentList .scan-recent-status.is-testen::before { content: "✓"; background: var(--testen); }
#beoordelaarCenter #evalRecentList .scan-recent-status.is-niet::before { content: "×"; background: var(--afwijzen); color: #fff; }
#beoordelaarCenter #evalRecentList .scan-row-menu[open] { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
/* Upload: productnaam en optionele cijfers. */
#beoordelaarCenter .scan-field { display: grid; gap: 6px; margin: 0 0 12px; font-size: 12px; color: var(--copy); }
#beoordelaarCenter .scan-field small { color: var(--muted); font-weight: 400; }
#beoordelaarCenter .scan-field input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font: inherit; font-size: 14px; }
#beoordelaarCenter .scan-field input:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(91, 139, 255, 0.16); }
#beoordelaarCenter .scan-metrics-input { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
#beoordelaarCenter .scan-metrics-input summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--copy); }
#beoordelaarCenter .scan-metrics-input summary small { font-weight: 400; color: var(--muted); }
#beoordelaarCenter .scan-metrics-help { margin: 10px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
#beoordelaarCenter .scan-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
/* Resultaat: één oordeel met vier gekleurde blokjes, vier kernpunten en je cijfers. */
#beoordelaarCenter .studio-score { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
#beoordelaarCenter .studio-score-block { width: 34px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
#beoordelaarCenter .studio-score-block.is-good { background: var(--testen); }
#beoordelaarCenter .studio-score-block.is-warn, #beoordelaarCenter .studio-score-block.is-muted { background: var(--twijfel); }
#beoordelaarCenter .studio-score-block.is-bad { background: var(--afwijzen); }
#beoordelaarCenter .studio-score-label { margin-left: 6px; font-family: var(--font-num); font-size: 12px; color: var(--copy); }
#beoordelaarCenter .studio-metrics { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#beoordelaarCenter .studio-metrics .studio-why-title small { font-weight: 400; color: var(--muted); font-size: 13px; }
#beoordelaarCenter .studio-metrics .scan-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
#beoordelaarCenter .studio-metrics-out { display: grid; gap: 8px; }
#beoordelaarCenter .studio-metric { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
#beoordelaarCenter .studio-metric strong { display: block; font-size: 14px; color: var(--text); }
#beoordelaarCenter .studio-metric small { display: block; font-size: 12px; color: var(--muted); }
#beoordelaarCenter .studio-metric .studio-criterion-mark { flex: 0 0 20px; }
#beoordelaarCenter .studio-metrics-empty { margin: 0; font-size: 12px; color: var(--muted); }
#beoordelaarCenter .studio-player img[data-eval-thumb] { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  #beoordelaarCenter .studio-metrics .scan-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #beoordelaarCenter .scan-metrics-grid, #beoordelaarCenter .studio-metrics .scan-metrics-grid { grid-template-columns: minmax(0, 1fr); }
  #beoordelaarCenter .scan-list-filters { gap: 14px; }
}

/* Lage laptopschermen (1366×768 en lager): het hele menu past zonder eigen scrollbalk. */
@media (min-width: 961px) and (max-height: 820px) {
  .sidebar-nav .agent { min-height: 34px; }
  .sidebar-nav .nav-label { margin: 8px 12px 3px; }
}
@media (min-width: 961px) and (max-height: 740px) {
  .sidebar-nav .agent { min-height: 31px; }
  .sidebar-nav .nav-label { margin: 6px 12px 2px; }
}

/* ---------- Juridische basis (sessie juridisch) ---------- */
#authScreen .auth-card .auth-legal { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.auth-legal a, .sidebar-legal a, .legal-docs a, .legal-check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(143, 176, 255, 0.45); }
.auth-legal a:hover, .sidebar-legal a:hover, .legal-docs a:hover, .legal-check a:hover { color: var(--text); }
.sidebar-legal { margin: 6px 12px 2px; font-size: 11px; line-height: 1.5; color: var(--muted); }
html[data-sidebar="collapsed"] .sidebar-legal { display: none; }
.legal-docs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.legal-docs small { margin-left: 6px; font-size: 12px; color: var(--muted); }
.legal-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--text); cursor: pointer; }
.legal-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent, #5b8bff); }
#settingsModal .legal-settings { display: grid; gap: 12px; }
#settingsModal .legal-settings .app-card .result-action, #settingsModal .legal-settings .app-card .settings-reset { flex: 0 0 auto; white-space: nowrap; }
#settingsModal .legal-delete { background: rgba(255, 107, 122, 0.05); border-color: rgba(255, 107, 122, 0.25); }
#settingsModal .legal-delete.is-scheduled { background: rgba(255, 196, 61, 0.07); border-color: rgba(255, 196, 61, 0.3); }
#settingsModal .legal-delete-confirm { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid rgba(255, 107, 122, 0.35); border-radius: 12px; }
#settingsModal .legal-delete-confirm[hidden], #settingsModal .legal-settings [hidden] { display: none; }
#settingsModal .legal-delete-confirm p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
#settingsModal .legal-delete-confirm p strong { color: var(--text); }
#settingsModal .cta.legal-danger { background: var(--afwijzen, #ff6b7a); border-color: transparent; color: #fff; }
#settingsModal .cta.legal-danger:disabled { opacity: 0.45; cursor: not-allowed; }
#settingsModal .legal-settings .is-error { color: var(--afwijzen, #ff6b7a); }
.legal-modal { z-index: 60; }
.legal-modal .legal-consent { width: min(480px, 100%); display: grid; gap: 12px; padding: 22px 22px 20px; }
.legal-modal .legal-consent h3 { margin: 0; font-size: 22px; }
.legal-modal .legal-consent .vs-kick { margin: 0; }
.legal-consent-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.legal-consent-actions .cta:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 560px) {
  .legal-modal { padding: 16px; }
  .legal-consent-actions .cta { width: 100%; }
  #settingsModal .legal-settings .app-card .result-action, #settingsModal .legal-settings .app-card .settings-reset { width: 100%; }
}