html.index-page *,html.index-page *::before,html.index-page *::after{box-sizing:border-box;margin:0;padding:0}
html.index-page{
  --bg-grad:#f2f2f7;
  --glass:rgba(255,255,255,0.90);
  --glass2:rgba(255,255,255,0.80);
  --glass-border:rgba(200,195,230,0.6);
  --text:#0b0f2a;--text2:#3d3a55;--text3:#7c7899;
  --accent:#ff9f0a;--accent2:#e47f00;--accent-light:rgba(255,159,10,0.14);--accent-contrast:#fff;
  --green:#18b672;--red:#e83a4a;--orange:#f07b20;
  --r:30px;--r2:36px;--r3:34px;--r4:30px;
  --font:'DM Sans',sans-serif;
  --ease:cubic-bezier(0,0,.47,1.15);
  --ease2:cubic-bezier(0.34,1.56,0.64,1);
  --nav-h:calc(72px + env(safe-area-inset-top,0px));
}
html.index-page{min-height:100vh;font-family:var(--font);color:var(--text);font-size:16px;overflow-x:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;scrollbar-gutter:stable;}
html.index-page body{min-height:100vh;background:var(--bg-grad);background-attachment:fixed;display:flex;flex-direction:column;-webkit-touch-callout:none;-webkit-user-select:none;}

/* Scrollbar styling */
html.index-page body.dark-mode::-webkit-scrollbar { width: 10px; }
html.index-page body.dark-mode::-webkit-scrollbar-track { background: #0a0812; }
html.index-page body.dark-mode::-webkit-scrollbar-thumb { background: #2a2835; border-radius: 5px; border: 2px solid #0a0812; }
html.index-page #app { overflow-y: hidden;}

/* Algemene Dark Mode fixes voor elementen die variabele gebruiken */
html.index-page body.dark-mode .modal-panel { background: var(--glass) !important; color: var(--text); border-color: var(--glass-border) !important; }
html.index-page body.dark-mode .modal-header-btn { background: var(--accent-light) !important; color: var(--accent) !important; }
html.index-page body.dark-mode .modal-header-btn:hover { background: rgba(0,98,255,0.25) !important; color: var(--accent) !important; }
html.index-page body.dark-mode .settings-dropdown { background: var(--glass) !important; border-color: var(--glass-border) !important; color: var(--text); }
html.index-page body.dark-mode .set-card, html.index-page body.dark-mode .library-item { background: var(--glass2) !important; border-color: var(--glass-border); color: var(--text); }
html.index-page body.dark-mode .meta-item { background: var(--glass) !important; border-color: var(--glass-border) !important; color: var(--text); }
html.index-page body.dark-mode .vak-card { background: rgba(0,98,255,0.08) !important; border-color: var(--accent) !important; color: var(--text); }
html.index-page body.dark-mode #search-dropdown { background: var(--glass) !important; border-color: var(--glass-border) !important; }

/* Input fields dark mode */
html.index-page body.dark-mode input[type="text"],
html.index-page body.dark-mode input[type="date"],
html.index-page body.dark-mode textarea,
html.index-page body.dark-mode select {
  background: rgba(50, 50, 70, 0.8) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}

html.index-page body.dark-mode input[type="text"]:focus,
html.index-page body.dark-mode input[type="date"]:focus,
html.index-page body.dark-mode textarea:focus,
html.index-page body.dark-mode select:focus {
  background: rgba(60, 60, 80, 0.9) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,98,255,0.12), inset 1px 1px 0 rgba(88,93,120,0.5) !important;
}

html.index-page body.dark-mode .rich-editor {
  background: rgba(50, 50, 70, 0.8) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}

html.index-page body.dark-mode .rich-editor:focus {
  background: rgba(60, 60, 80, 0.9) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,98,255,0.12), inset 1px 1px 0 rgba(88,93,120,0.5) !important;
}

html.index-page body.dark-mode .fmt-bar {
  background: rgba(40, 40, 60, 0.95) !important;
  border-color: var(--glass-border) !important;
}

html.index-page body.dark-mode .fmt-btn {
  background: rgba(60, 60, 80, 0.7) !important;
  border-color: var(--glass-border) !important;
  color: var(--text2) !important;
}

html.index-page body.dark-mode .fmt-btn:hover {
  background: rgba(70, 70, 90, 0.9) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

html.index-page body.dark-mode .color-swatch {
  border-color: rgba(100,100,150,0.3) !important;
}

html.index-page body.dark-mode .pair-row {
  background: rgba(45, 45, 65, 0.6) !important;
  border-color: var(--glass-border) !important;
}

html.index-page body.dark-mode .pair-row:focus-within {
  background: rgba(55, 55, 75, 0.8) !important;
  border-color: var(--accent-light) !important;
}

html.index-page body.dark-mode .pair-num {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* Dark mode overrides */
html.index-page body.dark-mode nav,
html.index-page body.dark-mode .search-box {
  background: #111113 !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}

html.index-page body.dark-mode .search-box::placeholder {
  color: var(--text3) !important;
}

html.index-page body.dark-mode .sidebar {
  background: var(--bg-grad) !important;
  border-right-color: var(--glass-border) !important;
}

html.index-page body.dark-mode .sidebar-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text2) !important;
}

html.index-page body.dark-mode .sidebar-btn.active {
  background: transparent !important;
  color: var(--accent) !important;
}

html.index-page body.dark-mode .sidebar-btn.active .sidebar-label { 
  color: var(--accent) !important; 
}

html.index-page body.dark-mode .sidebar-btn:hover {
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html.index-page body.dark-mode .btn-glass {
  background: rgba(50, 50, 70, 0.7) !important;
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
  box-shadow: inset 1px 1px 0 rgba(88,93,120,0.5), 0 2px 8px rgba(0,0,0,0.4) !important;
}

html.index-page body.dark-mode .btn-glass:hover {
  background: rgba(60, 60, 80, 0.8) !important;
  box-shadow: inset 1px 1px 0 rgba(100,110,140,0.6), 0 4px 12px rgba(0,0,0,0.5) !important;
}

html.index-page body.dark-mode .btn-icon {
  background: rgba(50, 50, 70, 0.7) !important;
  color: var(--text) !important;
  box-shadow: inset 1px 1px 0 rgba(88,93,120,0.5), 0 2px 8px rgba(0,0,0,0.4) !important;
}

html.index-page body.dark-mode .btn-icon:hover {
  background: rgba(60, 60, 80, 0.8) !important;
  box-shadow: inset 1px 1px 0 rgba(100,110,140,0.6), 0 4px 12px rgba(0,0,0,0.5) !important;
}

html.index-page body.dark-mode #toast {
  background: var(--glass) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}

html.index-page nav{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:1px solid var(--glass-border);
  padding: env(safe-area-inset-top, 0px) 28px 0;
  height: calc(72px + env(safe-area-inset-top, 0px));
  display:flex;align-items:center;justify-content:space-between;
}
html.index-page .nav-logo{max-height: 50px; height: 100%;width:auto;display:flex;align-items:center;gap:8px;}
html.index-page .nav-logo-svg {height:60%;width:auto;display:block;}

html.index-page .offline-page-notice,
html.set-page .offline-page-notice{
  display:flex;align-items:center;gap:12px;z-index:170;
  padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--orange) 13%,var(--bg-grad));
  border-bottom:1px solid color-mix(in srgb,var(--orange) 35%,var(--glass-border));
  color:var(--text);flex-shrink:0;
}
html.index-page .offline-page-notice[hidden],html.set-page .offline-page-notice[hidden]{display:none}
html.index-page .offline-page-notice>svg,html.set-page .offline-page-notice>svg{
  width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--orange);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
html.index-page .offline-page-notice>div,html.set-page .offline-page-notice>div{display:flex;align-items:baseline;gap:8px;min-width:0}
html.index-page .offline-page-notice strong,html.set-page .offline-page-notice strong{font-size:13px;font-weight:850;white-space:nowrap}
html.index-page .offline-page-notice span,html.set-page .offline-page-notice span{font-size:12px;color:var(--text2)}
html.index-page .connection-dialog-backdrop{
  position:fixed;inset:0;z-index:100200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:connectionBackdropIn .2s ease both;
}
html.index-page .connection-dialog-backdrop.closing{animation:connectionBackdropOut .2s ease both}
html.index-page .connection-dialog{
  width:min(390px,100%);padding:28px;background:var(--bg-grad);color:var(--text);text-align:center;
  border:1px solid var(--glass-border);border-radius:var(--r2);box-shadow:0 24px 70px rgba(0,0,0,.22);
  animation:connectionDialogIn .24s cubic-bezier(.22,1,.36,1) both;
}
html.index-page .connection-dialog-backdrop.closing .connection-dialog{animation:connectionDialogOut .2s ease both}
html.index-page .connection-dialog-icon{width:54px;height:54px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:var(--orange)}
html.index-page .connection-dialog-icon svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.index-page .connection-dialog h3{font-size:22px;font-weight:850;margin-bottom:7px}
html.index-page .connection-dialog p{font-size:14px;line-height:1.5;color:var(--text2);margin-bottom:22px}
html.index-page .connection-dialog .btn{width:100%;justify-content:center}
html.index-page .notification-permission-help .connection-dialog-icon{color:var(--accent)}
html.index-page .notification-permission-help .connection-dialog-icon svg{display:none}
html.index-page .notification-permission-help .connection-dialog-icon::before{
  content:'';display:block;width:48px;height:48px;background:currentColor;
  -webkit-mask:url('./assets/icons/icon_notification.svg') center/contain no-repeat;
  mask:url('./assets/icons/icon_notification.svg') center/contain no-repeat;
}
html.index-page .notification-permission-help .connection-dialog p{margin-bottom:14px}
html.index-page .notification-permission-steps{margin:0 0 22px;padding-left:22px;text-align:left;color:var(--text2);font-size:13px;line-height:1.5}
html.index-page .notification-permission-steps li+li{margin-top:5px}
@keyframes connectionBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes connectionBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes connectionDialogIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes connectionDialogOut{to{opacity:0;transform:translateY(12px) scale(.97)}}

html.index-page .notifications-offline-notice{
  display:flex;align-items:center;gap:11px;padding:12px 14px;margin-bottom:16px;
  background:color-mix(in srgb,var(--orange) 12%,var(--glass));
  border:1px solid color-mix(in srgb,var(--orange) 38%,var(--glass-border));border-radius:var(--r3);
}
html.index-page .notifications-offline-notice svg{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.index-page .notifications-offline-notice div{display:flex;flex-direction:column;gap:1px}
html.index-page .notifications-offline-notice strong{font-size:13px;font-weight:850}
html.index-page .notifications-offline-notice span{font-size:12px;color:var(--text2)}

html.index-page .nav-actions{display:flex;gap:12px;align-items:center;flex:1;margin-left:20px}
html.index-page .search-wrapper{position:relative;flex:1;max-width:400px;display:flex;align-items:center}
html.index-page .mobile-search-wrapper{position:relative;width:100%;display:flex;align-items:center}
html.index-page .search-icon{position:absolute;left:12px;width:18px;height:18px;pointer-events:none}
html.index-page .search-wrapper .search-box{
  width:100%;height:40px;
  background:#f2f2f7;
  border:1.5px solid var(--glass-border);
  border-radius:var(--r3);
  padding:0 16px 0 42px;
  font-family:var(--font);
  font-size:14px;
  color:var(--text);
  outline:none;
  transition:all .2s;
}
html.index-page .search-box::placeholder{color:var(--text3)}
html.index-page .search-box:focus{
  background:#fff;
  border-color:var(--accent);
}
html.index-page .nav-spacer{flex:1}
html.index-page .nav-actions{display:flex;gap:8px;align-items:center}

html.index-page .btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:var(--r3);cursor:pointer;font-family:var(--font);font-size:14px;font-weight:700;padding:9px 18px;transition:all .2s var(--ease);outline:none;white-space:nowrap;}
html.index-page .btn-primary{background:linear-gradient(180deg,var(--accent) 0%,var(--accent2) 100%);color:var(--accent-contrast,#fff);}
html.index-page .btn-primary:hover{filter:brightness(1.15);transform:scale(1.04) translateY(-1px)}
html.index-page nav .btn-primary{
  background:var(--accent);color:var(--accent-contrast,#fff);border:1.5px solid var(--accent);box-shadow:none;
}
html.index-page nav .btn-primary svg g{fill:currentColor!important}
html.index-page nav .btn-primary:hover{background:color-mix(in srgb,var(--accent) 90%,#000);border-color:transparent;filter:none;transform:translateY(-1px)}
html.index-page body.dark-mode nav .btn-primary{background:var(--accent)!important;color:var(--accent-contrast,#fff);border-color:var(--accent)}
html.index-page body.dark-mode nav .btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)!important}
html.index-page body.dark-mode nav .search-box{background:#1c1c1e!important;border-color:var(--glass-border)!important}
html.index-page .btn-glass{background:var(--glass);color:var(--text);border:2px solid var(--glass-border);}
html.index-page .btn-glass:hover{background:rgba(255,255,255,0.95);transform:scale(0.9);filter:brightness(0.95)}
html.index-page .btn-glass:active,html.index-page .btn-primary:active{transform:scale(0.9)}
html.index-page .btn-lg{padding:13px 26px;font-size:16px;border-radius:var(--r)}
html.index-page .btn-sm{padding:6px 12px;font-size:13px;border-radius:var(--r4);height:40px;}
html.index-page .btn-sm:hover{transform:scale(0.9);filter:brightness(0.95)}
html.index-page .btn-filter{padding:6px 12px;font-size:13px;border-radius:var(--r4);height:40px;}
html.index-page .btn-filter:hover{transform:scale(0.9);filter:brightness(0.95)}
html.index-page .btn-icon{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--glass);border:2px solid var(--glass-border);border-radius:var(--r3);cursor:pointer;transition:all .2s var(--ease);}
html.index-page .btn-icon:hover{background:rgba(255,255,255,0.95);transform:scale(1.08);}
html.index-page .btn-icon:active{transform:scale(0.9);}
html.index-page .btn-sm-nav{padding:5px 10px;font-size:13px;border-radius:var(--r4);height:40px;width:40px;aspect-ratio:1 / 1;}
html.index-page .btn-sm-nav:hover{transform:scale(1.0) !important; filter:brightness(1.0) !important}
html.index-page .btn-sm-nav:active{transform:scale(0.9) !important;filter:brightness(0.95) !important}
html.index-page .btn-sm-nav svg{width:28px !important;height:28px !important}

html.index-page .sidebar{
  position:fixed;left:0;top:64px;z-index:180;
  width:80px;height:calc(100vh - 64px);
  background:#f2f2f7;
  border-right:1px solid var(--glass-border);
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;
}
html.index-page .sidebar-btn{
  width:56px;height:56px;
  border-radius:16px;
  background:transparent;
  border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
  font-size:24px;color:var(--text2);font-weight:700;
}
html.index-page .sidebar-btn:hover{
  color:var(--accent);
}

@media(min-width:750px){
html.index-page .btn-sm-nav{display:none !important}

html.index-page .sidebar-btn:not(.active):hover {
  transform: scale(1.1);
}

html.index-page .sidebar-btn.active:hover {transform:scale(0.98);filter:brightness(0.5);}
}

html.index-page .sidebar-btn.active{
  background:transparent;
  color:var(--accent);
}
html.index-page .sidebar-btn.active:hover{filter:none}
html.index-page body.dark-mode .sidebar-btn.active,
html.index-page body.dark-mode .sidebar-btn.active:hover{background:transparent!important;color:var(--accent)!important}
html.index-page .sidebar-btn.active svg [fill="var(--text)"] {
  fill: var(--accent) !important;
}
html.index-page .sidebar-label{font-size:9px;color:var(--text2);font-weight:700;margin-top:4px;text-align:center;letter-spacing:-0.5px;max-width:60px}
html.index-page .sidebar-btn.active .sidebar-label{color:var(--accent);font-weight:800}
html.index-page .sidebar-btn:hover .sidebar-label{color:var(--text)}

html.index-page .recent-set-item{
  width:48px;height:48px;
  border-radius:10px;
  background:transparent;
  border:3px solid rgba(200,195,230,0.3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
  color:var(--text2);
  position:relative;
  flex-shrink:0;
}
html.index-page .recent-set-item:hover{
  color:var(--accent);
  border-color:var(--accent-light);
  transform:scale(1.1);
  border:6px solid rgba(200,195,230,0.3);
}

html.index-page .recent-set-label{
  position:absolute;left:64px;top:50%;transform:translateY(-50%);
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:8px;padding:6px 10px;
  font-size:11px;font-weight:700;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
  box-shadow:var(--glass-shadow);
  color:var(--text);
}
html.index-page .recent-set-item:hover .recent-set-label{
  opacity:1;
}

/* Regular inputs for title/vak/etc */
html.index-page input[type="text"],html.index-page input[type="date"],html.index-page textarea,html.index-page select{
  background:rgba(255,255,255,0.85);border:1px solid rgba(200,195,230,0.6);
  border-radius:var(--r3);color:var(--text);font-family:var(--font);font-size:15px;
  padding:11px 16px;outline:none;transition:all .2s;width:100%;
  -webkit-appearance:none;appearance:none;
}
html.index-page input[type="text"]:focus,html.index-page input[type="date"]:focus,html.index-page textarea:focus,html.index-page select:focus{
  border-color:var(--accent);background:rgba(255,255,255,0.98);
  box-shadow:0 0 0 3px rgba(0,98,255,0.12),inset 1px 1px 0 rgba(255,255,255,1);
}
html.index-page textarea{resize:vertical;min-height:72px;line-height:1.5}
html.index-page .input-group{display:flex;flex-direction:column;gap:6px}
html.index-page .input-group label{font-size:13px;color:var(--text2);font-weight:600}

/* ── RICH TEXT EDITOR (contenteditable) ── */
html.index-page .rich-editor{
  background:rgba(255,255,255,0.85);
  border:1.5px solid rgba(200,195,230,0.6);
  border-radius:var(--r3);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  padding:10px 14px;
  outline:none;
  transition:all .2s;
  min-height:42px;
  width:100%;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.1),0 2px 6px rgba(80,60,160,0.06);
  word-break:break-word;
  white-space:pre-wrap;
  cursor:text;
}
html.index-page .rich-editor:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,0.99);
  box-shadow:0 0 0 3px rgba(0,98,255,0.12),inset 1px 1px 0 rgba(255,255,255,1);
}
html.index-page .rich-editor:empty::before{
  content:attr(data-placeholder);
  color:var(--text3);
  pointer-events:none;
}
html.index-page .rich-editor b{font-weight:700}
html.index-page .rich-editor i{font-style:italic}

/* ── FORMATTING TOOLBAR ── */
html.index-page .fmt-bar{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:3;
  max-width:calc(100% - 12px);
  background:rgba(250,249,255,0.97);
  border:1px solid rgba(200,195,230,0.5);
  border-radius:16px;
  padding:12px 16px;
  margin-top:0;
  box-shadow:0 4px 16px rgba(80,60,160,0.1);
  opacity:0;pointer-events:none;
  transform:translateY(-16px) scale(0.7);
  transition:opacity .15s,transform .2s ease;
  z-index:9999;
}
html.index-page .fmt-bar.visible{opacity:1;pointer-events:all;transform:translateY(0) scale(1);transition:opacity .08s,transform .1s;}

html.index-page .fmt-sep{width:1px;height:20px;background:rgba(200,195,230,0.5);margin:0 2px;flex-shrink:0}

/* Format buttons */
html.index-page .fmt-btn{
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(200,195,230,0.4);
  border-radius:50%;cursor:pointer;
  font-size:13px;font-weight:700;
  transition:all .12s;flex-shrink:0;
  color:var(--text2);
  user-select:none;
}
html.index-page .fmt-btn:hover{background:rgba(255,255,255,1);border-color:rgba(0,98,255,0.4);color:var(--accent)}
html.index-page .fmt-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
html.index-page .fmt-btn.active:hover{background:#3445ee}

/* Color swatches */
html.index-page .color-swatch{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2.5px solid transparent;
  transition:all .12s;flex-shrink:0;
  outline:2px solid transparent;
  outline-offset:1px;
}
html.index-page .color-swatch:hover{transform:scale(1.15);outline-color:var(--accent)}
html.index-page .color-swatch.active{outline-color:var(--accent);border-color:#fff}

/* Clear formatting */
html.index-page .fmt-clear{
  font-size:11px;padding:4px 8px;border-radius:28px;height:26px;
  background:rgba(232,58,74,0.08);color:var(--red);
  border:1px solid rgba(232,58,74,0.2);cursor:pointer;
  display:inline-flex;align-items:center;
  font-family:var(--font);font-weight:700;
  transition:all .12s;white-space:nowrap;
  user-select:none;
}
html.index-page .fmt-clear:hover{background:rgba(232,58,74,0.15)}

/* Image upload */
html.index-page .img-upload-btn{
  font-size:11px;padding:4px 8px;border-radius:28px;height:26px;
  background:rgba(0,98,255,0.08);color:var(--accent);
  border:1px dashed rgba(0,98,255,0.3);cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--font);font-weight:700;
  transition:all .12s;white-space:nowrap;
  user-select:none;
}
html.index-page .img-upload-btn:hover{background:rgba(0,98,255,0.15)}
html.index-page .image-gallery{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
html.index-page .image-thumb{width:52px;height:52px;border-radius:6px;object-fit:cover;border:2px solid rgba(200,195,230,0.4);cursor:pointer;transition:all .15s}
html.index-page .image-thumb:hover{border-color:var(--red);transform:scale(1.05)}

html.index-page .btn-add-term{margin-bottom:12px;}
html.index-page .btn-add-term:hover{transform:scale(0.98)}

/* Pair rows */
html.index-page .pair-row{
  display:grid;
  grid-template-columns:28px 1fr 1fr 28px;
  gap:8px;
  align-items:start;
  margin-bottom:10px;
  padding:10px;
  background:rgba(255,255,255,0.4);
  border-radius:20px;
  border:2px solid rgba(200,195,230,0.2);
  transition:border-color .15s;
}
html.index-page .pair-row:focus-within{border-color:rgba(0,98,255,0.2);background:rgba(255,255,255,0.55)}
html.index-page .pair-num{
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,98,255,0.1);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;margin-top:8px;
}
html.index-page .pair-del{
  width:26px;height:26px;border-radius:50%;
  background:none;border:none;color:var(--text3);
  cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:20px;
  transition:all .15s;margin-top:8px;line-height:1;
  user-select:none;
}
html.index-page .pair-del:hover{color:var(--red);background:rgba(232,58,74,0.1)}
html.index-page .pair-col{display:flex;flex-direction:column;gap:0px;min-width:0;position:relative}

/* ── PRESET COLORS ── */
/* defined in JS: COLORS */

html.index-page .screen{padding:28px 32px;max-width:1200px;margin:0 auto;width:100%;margin-left:80px}
@keyframes pageIn{from{opacity:0;transform:scale(.94) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
html.index-page .page-enter{animation:none}
html.index-page .page-desktop-in>.page-enter{animation:pageIn .4s cubic-bezier(.22,1,.36,1) both}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

html.index-page #home{position:relative;isolation:isolate;min-height:calc(100vh - 72px)}
html.index-page .dashboard-screen{position:relative;z-index:1}
html.index-page .dashboard-ambient{position:absolute;left:80px;right:0;top:0;height:290px;z-index:0;overflow:hidden;pointer-events:none}
html.index-page .dashboard-ambient::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--bg-grad) 18%,transparent) 55%,var(--bg-grad) 100%);
}
html.index-page .dashboard-glow{position:absolute;border-radius:50%;filter:blur(78px);will-change:transform;opacity:.42}
html.index-page .dashboard-glow-blue{width:48vw;height:270px;min-width:480px;left:-10%;top:-105px;background:var(--accent);animation:dashboardGlowBlue 24s ease-in-out infinite alternate}
html.index-page .dashboard-glow-cyan{width:43vw;height:255px;min-width:440px;right:-7%;top:-55px;background:#40dfda;animation:dashboardGlowCyan 29s ease-in-out infinite alternate}
html.index-page .dashboard-glow-purple{width:39vw;height:245px;min-width:400px;left:28%;bottom:-125px;background:#8b5cf6;animation:dashboardGlowPurple 33s ease-in-out infinite alternate}
html.index-page .dashboard-glow-pink{width:32vw;height:225px;min-width:330px;right:5%;bottom:-120px;background:#f06db7;opacity:.32;animation:dashboardGlowPink 27s ease-in-out infinite alternate}
@keyframes dashboardGlowBlue{0%{transform:translate3d(0,0,0) scale(.94)}50%{transform:translate3d(15vw,55px,0) scale(1.08)}100%{transform:translate3d(6vw,105px,0) scale(.98)}}
@keyframes dashboardGlowCyan{0%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(-19vw,65px,0) scale(.92)}100%{transform:translate3d(-7vw,125px,0) scale(1.1)}}
@keyframes dashboardGlowPurple{0%{transform:translate3d(-7vw,0,0) scale(.95)}55%{transform:translate3d(21vw,-85px,0) scale(1.1)}100%{transform:translate3d(-4vw,-120px,0) scale(1)}}
@keyframes dashboardGlowPink{0%{transform:translate3d(0,0,0) scale(.92)}50%{transform:translate3d(-25vw,-48px,0) scale(1.12)}100%{transform:translate3d(-11vw,-115px,0) scale(.97)}}
html.index-page .home-hero{padding:64px 0 42px;text-align:left}
html.index-page .home-hero h1{max-width:850px;font-size:clamp(42px,5vw,66px);font-weight:850;line-height:1.08;letter-spacing:normal;margin:0}
html.index-page .home-hero h1 #dashboard-name{color:var(--accent)}
html.index-page .home-hero p{color:var(--text2);font-size:17px;font-weight:550;max-width:520px;margin:15px 0 27px;text-align:left}
html.index-page .home-date-line{display:flex;align-items:center;gap:11px;color:var(--text3);font-size:13px;font-weight:700}
html.index-page .home-date-separator{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.65}

html.index-page .section-row{display:flex;align-items:center;justify-content:space-between;margin:32px 0 16px;gap:12px}
html.index-page .section-row h2{font-size:20px;font-weight:800;letter-spacing:-0.3px}
html.index-page .section-row a{color:var(--accent);font-size:13px;text-decoration:none;font-weight:700}
html.index-page .section-row a:hover{text-decoration:underline}

html.index-page .sets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-bottom:20px}
html.index-page .set-card{
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r2);
  padding:22px;
  cursor:pointer;
  transition:all .25s var(--ease);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;will-change:transform;transform:translateZ(0)
}
html.index-page .set-card:hover{
  transform:translateY(-4px) scale(1.04);
  background:var(--glass)
}
html.index-page .set-card-title{font-size:17px;font-weight:800;margin-bottom:6px;letter-spacing:-0.3px}
html.index-page .set-card-desc{font-size:13px;color:var(--text2);margin-bottom:14px;line-height:1.5;min-height:32px;flex:1}
html.index-page .set-card-meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
html.index-page .set-card-actions{display:flex;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(180,170,210,0.3);justify-content: flex-end;}

html.index-page .badge{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:700;}
html.index-page .badge-purple{background:var(--accent-light);color:var(--accent)}
html.index-page .badge-orange{background:linear-gradient(135deg,rgba(240,123,32,0.15) 0%,rgba(240,123,32,0.1) 100%);color:var(--orange)}
html.index-page .badge-cloud{width:25px;height:25px;padding:0;justify-content:center;background:var(--accent-light);color:var(--accent)}
html.index-page .badge-cloud-icon{display:block;width:15px;height:15px;background:currentColor;-webkit-mask:url('./assets/icons/icon_cloud.svg') center/contain no-repeat;mask:url('./assets/icons/icon_cloud.svg') center/contain no-repeat}
html.index-page .set-card-date{font-size:11px;color:var(--text3)}
html.index-page .set-icon-btn{width:40px;height:40px;aspect-ratio:1;padding:6px 10px!important;align-items:center;display:flex;justify-content:center;border:0;border-radius:var(--r4);background:#e5e5ea;color:var(--text);box-shadow:none}
html.index-page .set-icon-btn:hover{background:#dadae0;transform:scale(.9);filter:none;box-shadow:none}
html.index-page .set-icon-btn img{display:block;width:16px;height:16px;object-fit:contain;pointer-events:none;filter:brightness(0) saturate(100%)}
html.index-page body.dark-mode .set-icon-btn{background:#2c2c2e!important;border:0!important;box-shadow:none!important}
html.index-page body.dark-mode .set-icon-btn:hover{background:#3a3a3c!important;box-shadow:none!important}
html.index-page body.dark-mode .set-icon-btn img{filter:none}
html.index-page .set-delete-btn{position:relative;background:rgba(232,58,74,.1);color:var(--red);border:0;border-radius:50%}
html.index-page .set-delete-btn img{opacity:0}
html.index-page .set-delete-btn::after{content:"";position:absolute;width:16px;height:16px;background:var(--red);-webkit-mask:url('assets/icons/icon_delete.svg') center/contain no-repeat;mask:url('assets/icons/icon_delete.svg') center/contain no-repeat}
html.index-page .set-delete-btn:hover{background:rgba(232,58,74,.16)}
html.index-page body.dark-mode .set-delete-btn{background:rgba(232,58,74,.12)!important}
html.index-page body.dark-mode .set-delete-btn:hover{background:rgba(232,58,74,.2)!important}
html.index-page .badge-gray{background:linear-gradient(135deg,rgba(120,110,150,0.15) 0%,rgba(120,110,150,0.1) 100%);color:var(--text2)}

/* Bestanden */
html.index-page .page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:18px 0 24px}
html.index-page .page-heading h1{font-size:38px;line-height:1.1;letter-spacing:normal;margin:2px 0 8px}
html.index-page .page-heading p:not(.page-eyebrow){color:var(--text2);font-size:15px}
html.index-page .page-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--accent)}
html.index-page .library-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:22px;position:relative;z-index:90}
html.index-page .library-toolbar-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html.index-page .toolbar-dropdown{position:relative}
html.index-page .toolbar-btn{
  min-height:42px;padding:0 15px;border:1.5px solid var(--glass-border);border-radius:var(--r3);
  background:var(--glass);color:var(--text);font:700 13px var(--font);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s var(--ease);
}
html.index-page .toolbar-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
html.index-page .toolbar-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast,#fff)}
html.index-page .toolbar-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
html.index-page .toolbar-count{display:none;min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#fff;align-items:center;justify-content:center;font-size:11px}
html.index-page .toolbar-count.show{display:inline-flex}
html.index-page .toolbar-menu{
  display:block;visibility:hidden;position:fixed;z-index:1200;opacity:0;pointer-events:none;
  width:230px;padding:8px;background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r2);box-shadow:0 14px 46px rgba(0,0,0,.16);backdrop-filter:blur(22px);
  transform-origin:top center;
}
html.index-page .toolbar-menu.open{visibility:visible;pointer-events:auto;animation:toolbarMenuIn .18s ease both}
html.index-page .toolbar-menu.closing{visibility:visible;pointer-events:none;animation:toolbarMenuOut .18s ease both}
html.index-page .filter-menu{width:310px;max-height:min(620px,70vh);overflow-y:auto}
html.index-page .filter-mobile-header{display:none}
html.index-page .filter-reset-btn{
  width:100%;min-height:42px;padding:0 13px;border:0;border-radius:var(--r3);
  background:var(--red);color:#fff;font:750 13px var(--font);cursor:pointer;
  display:flex;align-items:center;justify-content:flex-start;gap:9px;transition:.18s ease;
}
html.index-page .filter-reset-btn:hover:not(:disabled){filter:brightness(.94);transform:translateY(-1px)}
html.index-page .filter-reset-btn:disabled{background:color-mix(in srgb,var(--text3) 34%,transparent);color:color-mix(in srgb,var(--text3) 76%,transparent);cursor:not-allowed;opacity:.62}
html.index-page .filter-reset-btn img{width:17px;height:17px;object-fit:contain}
html.index-page .filter-groups{margin-top:7px}
html.index-page .filter-group{padding:7px}
html.index-page .filter-group+.filter-group{border-top:1px solid var(--glass-border);margin-top:4px;padding-top:12px}
html.index-page .filter-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--text3);padding:0 8px 6px}
html.index-page .menu-option{
  width:100%;min-height:42px;padding:8px 12px;border:0;border-radius:var(--r3);background:transparent;
  color:var(--text);font:650 13px var(--font);cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
html.index-page .menu-option:hover{background:var(--accent-light);color:var(--accent)}
html.index-page .menu-option i{width:9px;height:9px;border-radius:50%;background:transparent;flex-shrink:0}
html.index-page .menu-option.active i{background:var(--accent);box-shadow:0 0 0 4px var(--accent-light)}
html.index-page .library-selection-controls{display:none;align-items:center;gap:7px;margin-left:auto}
html.index-page .library-selection-controls.show{display:flex}
html.index-page .library-bulk-btn{
  width:42px;height:42px;flex:0 0 42px;border:1.5px solid var(--glass-border);border-radius:50%;
  background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.18s var(--ease);
}
html.index-page .library-bulk-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(.94)}
html.index-page .library-bulk-btn:disabled{background:color-mix(in srgb,var(--text3) 34%,transparent);border-color:transparent;color:var(--text3);cursor:not-allowed;opacity:.48}
html.index-page .library-bulk-btn img{width:20px;height:20px;object-fit:contain}
html.index-page .library-bulk-delete:not(:disabled){background:var(--red);border-color:var(--red)}
html.index-page .library-select-mode-btn{margin-left:3px;white-space:nowrap}
html.index-page .library-grid{align-items:stretch}
html.index-page .library-grid .set-card{min-height:220px}
html.index-page .set-card.selected{border-color:var(--accent);background:var(--accent-light)}
html.index-page .set-select-btn{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--glass-border);background:var(--glass);color:#fff;z-index:2;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.18s var(--ease);
}
html.index-page .set-card.selection-mode:hover .set-select-btn{border-color:var(--accent)}
html.index-page .set-card.selected .set-select-btn{background:var(--accent);border-color:var(--accent)}
html.index-page .set-select-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:3}
html.index-page .set-select-btn~.set-card-title{padding-right:34px}
html.index-page .card-action-btn{aspect-ratio:1;padding:6px 10px}
html.index-page .card-action-btn svg{width:16px;height:16px;fill:none;stroke:var(--text);stroke-width:2}
html.index-page .empty-state{grid-column:1/-1;text-align:center;padding:56px 20px;border:1px dashed var(--glass-border);border-radius:var(--r2);color:var(--text2)}
html.index-page .combine-preview{display:flex;flex-direction:column;gap:8px;margin-top:16px}
html.index-page .combine-preview>div{display:flex;justify-content:space-between;gap:16px;padding:11px 15px;border:1px solid var(--glass-border);border-radius:var(--r3)}
html.index-page .combine-preview span{font-size:12px;color:var(--text3)}
html.index-page .library-confirm-delete{background:var(--red);color:#fff;border:0;border-radius:var(--r3);padding:9px 18px;font:700 14px var(--font);cursor:pointer}
html.index-page .sync-delete-options{display:grid;gap:10px;margin:6px 0 4px}
html.index-page .sync-delete-option{width:100%;padding:16px 18px;border:1.5px solid var(--glass-border);border-radius:var(--r2);background:var(--glass);color:var(--text);font-family:var(--font);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px;transition:.18s var(--ease)}
html.index-page .sync-delete-option:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
html.index-page .sync-delete-option strong{font-size:14px;font-weight:800}
html.index-page .sync-delete-option span{font-size:12px;line-height:1.45;color:var(--text2)}
html.index-page .sync-delete-option.danger{border-color:color-mix(in srgb,var(--red) 30%,var(--glass-border));color:var(--red)}
html.index-page .sync-delete-option:disabled{cursor:wait;opacity:.55}
html.index-page .sync-delete-option.loading strong::after{content:'…'}

/* Vakken en vakdetail */
html.index-page .subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding-bottom:30px}
html.index-page .subject-card{
  position:relative;isolation:isolate;min-height:190px;overflow:hidden;border:1px solid var(--glass-border);
  border-radius:var(--r2);padding:22px;cursor:pointer;text-align:left;color:#fff;
  background-image:var(--subject-image);background-size:cover;background-position:center;
  font-family:var(--font);transition:.25s var(--ease);
}
html.index-page .subject-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--subject-color) 76%,#08090d) 0%,color-mix(in srgb,var(--subject-color) 58%,transparent) 56%,rgba(0,0,0,.12) 100%);
}
html.index-page .subject-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.42),transparent 66%)}
html.index-page .subject-card:hover{transform:translateY(-4px) scale(1.025);border-color:color-mix(in srgb,var(--subject-color) 70%,white)}
html.index-page .subject-card-content{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
html.index-page .subject-card strong{font-size:27px;line-height:1.15;font-weight:850;letter-spacing:normal}
html.index-page .subject-card small{font-size:13px;line-height:1.35;font-weight:700;margin:0;color:rgba(255,255,255,.82)}
html.index-page .subject-detail{min-height:calc(100vh - 72px);background:var(--bg-grad)}
html.index-page .subject-hero{
  --subject-color:#62636a;--subject-image:url('assets/subjects/placeholder.svg');
  position:relative;isolation:isolate;height:330px;margin-left:80px;width:calc(100% - 80px);
  background-image:var(--subject-image);background-size:cover;background-position:center 45%;overflow:hidden;
}
html.index-page .subject-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb,var(--bg-grad) 0%,transparent) 42%,
      color-mix(in srgb,var(--bg-grad) 18%,transparent) 61%,
      color-mix(in srgb,var(--bg-grad) 48%,transparent) 77%,
      color-mix(in srgb,var(--bg-grad) 78%,transparent) 90%,
      var(--bg-grad) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--subject-color) 74%,#06070a) 0%,color-mix(in srgb,var(--subject-color) 35%,transparent) 48%,rgba(0,0,0,.1) 100%);
  backdrop-filter:blur(0);
}
html.index-page .subject-hero::after{
  content:"";position:absolute;left:-6%;top:-15%;bottom:-15%;width:58%;z-index:-2;
  background:color-mix(in srgb,var(--subject-color) 28%,transparent);filter:blur(46px);
}
html.index-page .subject-hero-content{
  height:100%;max-width:1200px;margin:0 auto;padding:28px 34px 48px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;color:#fff;
}
html.index-page .subject-hero h1{font-size:58px;line-height:1.08;letter-spacing:normal;font-weight:900;text-shadow:0 2px 18px rgba(0,0,0,.28)}
html.index-page .subject-hero p{font-size:15px;font-weight:750;margin-top:12px;color:rgba(255,255,255,.84)}
html.index-page .subject-back-btn{
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.2);color:#fff;border-radius:24px;
  min-height:40px;padding:0 13px;font:700 13px var(--font);display:flex;align-items:center;gap:7px;cursor:pointer;
  backdrop-filter:blur(12px);
}
html.index-page .subject-back-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.3}
html.index-page .subject-results{padding-top:8px;background:var(--bg-grad)}
html.index-page .subject-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
html.index-page .subject-results-toolbar h2{font-size:22px}

/* Eigen vakkenkiezer in de set-editor */
.subject-picker-popover{
  position:fixed;z-index:6000;padding:8px;max-height:340px;overflow-y:auto;
  background:var(--glass,#fff);border:1px solid var(--glass-border,rgba(0,0,0,.16));
  border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.24);backdrop-filter:blur(24px);
}
.subject-picker-popover button{
  width:100%;min-height:40px;border:0;border-radius:12px;background:transparent;color:var(--text,#111);
  padding:7px 10px;font:650 13px var(--font,sans-serif);display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
}
.subject-picker-popover button:hover,.subject-picker-popover button.active{background:var(--accent-light,rgba(0,98,255,.12));color:var(--accent,#0062ff)}
.subject-picker-popover button>span:nth-child(2){flex:1}
.subject-picker-popover button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.7}
.subject-picker-color{width:13px;height:13px;border-radius:5px;flex-shrink:0}
html.index-page .subject-select{position:relative}
html.index-page .subject-picker-btn{
  width:100%;min-height:44px;border:1px solid rgba(200,195,230,.6);border-radius:var(--r3);
  padding:0 15px;background:rgba(255,255,255,.85);color:var(--text);font:650 15px var(--font);
  display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left;
}
html.index-page .subject-picker-btn:hover{border-color:var(--accent)}
html.index-page .subject-picker-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
html.index-page body.dark-mode .toolbar-menu,
html.index-page body.dark-mode .subject-picker-btn{background:var(--glass);border-color:var(--glass-border)}
@keyframes toolbarMenuIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toolbarMenuOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.97)}}

@media(min-width:751px){
  html.index-page .screen{
    width:calc(100% - 80px);
    margin-left:max(80px, calc(50% - 560px));
    margin-right:0;
  }
}

@media(max-width:750px){
  html.index-page .page-heading{margin:8px 0 20px}
  html.index-page .page-heading h1{font-size:32px}
  html.index-page .library-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  html.index-page .library-toolbar-main{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  html.index-page .library-toolbar .toolbar-dropdown{position:relative;min-width:0}
  html.index-page .library-toolbar-main .toolbar-btn{width:100%;padding:0 11px;white-space:nowrap}
  html.index-page .library-mine-btn{grid-column:1/-1;width:100%}
  html.index-page .library-selection-controls.show{width:100%;margin-left:0;justify-content:flex-start}
  html.index-page .library-select-mode-btn{width:auto!important;margin-left:auto;padding-inline:15px!important}
  html.index-page .filter-menu{
    position:fixed;inset:0!important;width:100%;height:100dvh;max-height:none;
    padding:max(20px,calc(env(safe-area-inset-top) + 12px)) max(16px,env(safe-area-inset-right)) max(28px,calc(env(safe-area-inset-bottom) + 16px)) max(16px,env(safe-area-inset-left));
    border:0;border-radius:0;background:var(--bg-grad);overflow-x:hidden;overflow-y:scroll;transform-origin:center;
    overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  }
  html.index-page .filter-menu.open{animation:mobileFilterIn .24s var(--ease2) both}
  html.index-page .filter-menu.closing{animation:mobileFilterOut .18s ease both}
  html.index-page .filter-mobile-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 2px 20px}
  html.index-page .filter-mobile-header h2{font-size:28px;line-height:1.1;font-weight:850;letter-spacing:normal}
  html.index-page .filter-close-btn{width:42px;height:42px;flex:0 0 42px;border:1.5px solid var(--glass-border);border-radius:50%;background:var(--glass);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
  html.index-page .filter-close-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  html.index-page .filter-reset-btn{min-height:48px;padding:0 17px}
  html.index-page .filter-groups{display:flex;flex-direction:column;gap:12px;margin-top:14px}
  html.index-page .filter-group{padding:10px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r2)}
  html.index-page .filter-group+.filter-group{border-top:1px solid var(--glass-border);margin-top:0;padding-top:10px}
  html.index-page .filter-group-title{padding:4px 10px 8px}
  html.index-page .menu-option{min-height:48px;padding-inline:14px}
  html.index-page .library-grid .set-card{min-height:0}
  html.index-page .subjects-grid{grid-template-columns:1fr;gap:12px}
  html.index-page .subject-card{min-height:160px}
  html.index-page .subject-card strong{font-size:25px}
  html.index-page .subject-hero{height:275px;margin-left:0;width:100%}
  html.index-page .subject-hero-content{padding:18px 16px 42px}
  html.index-page .subject-hero h1{font-size:43px;letter-spacing:normal}
  html.index-page .subject-results{padding-top:2px}
  html.index-page .subject-results-toolbar{align-items:stretch;flex-direction:column}
  html.index-page .subject-results-toolbar .toolbar-btn{width:100%}
  html.index-page .subject-results-toolbar .toolbar-menu{width:min(230px,calc(100vw - 24px))}
  html.index-page .subject-picker-btn{min-height:46px}
  .subject-picker-popover{left:12px!important;right:12px;width:auto!important;max-height:min(340px,55vh)}
  html.index-page .dashboard-ambient{left:0;height:220px}
  html.index-page .dashboard-glow{filter:blur(64px);opacity:.38}
  html.index-page .dashboard-glow-blue{min-width:310px}
  html.index-page .dashboard-glow-cyan{min-width:290px}
  html.index-page .dashboard-glow-purple{min-width:280px}
  html.index-page .dashboard-glow-pink{min-width:250px}
  html.index-page .home-hero{padding:42px 0 30px}
  html.index-page .home-hero h1{font-size:40px;letter-spacing:normal}
  html.index-page .home-hero p{font-size:15px;margin:12px 0 23px}
}

@keyframes mobileFilterIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mobileFilterOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(20px) scale(.985)}}

html.index-page.filter-menu-open,
html.index-page body.filter-menu-open{overflow:hidden}
html.index-page.filter-menu-open #page-scroll-container{overflow:hidden!important}

@media(prefers-reduced-motion:reduce){
  html.index-page .dashboard-glow{animation:none}
}

/* Modal */
html.index-page .modal-bg{position:fixed;inset:0;z-index:2000;background:rgba(160,150,200,0.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;}
html.index-page .modal-panel{background:#ffffff;color:var(--text);border:1.5px solid var(--glass-border);border-radius:var(--r2);padding:28px;width:90%;max-width:860px;max-height:92vh;overflow-y:auto;box-shadow:0 16px 64px rgba(80,60,160,0.2);animation:slideUp .35s var(--ease2);transition:all .4s var(--ease2);display:flex;flex-direction:column;}
html.index-page .modal-panel h3{font-size:20px;font-weight:800;margin-bottom:16px;letter-spacing:-0.3px;display:flex;align-items:center;justify-content:space-between}
html.index-page .modal-header-actions{display:flex;gap:4px}
html.index-page .modal-header-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,98,255,0.08);border:none;cursor:pointer;border-radius:8px;color:var(--text2);transition:all .15s;font-size:16px}
html.index-page .modal-header-btn:hover{background:rgba(0,98,255,0.15);color:var(--accent)}
html.index-page .modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:auto;padding-top:16px;border-top:1px solid rgba(180,170,210,0.2);flex-shrink:0}
html.index-page .modal-bg.modal-maximized .modal-panel{width:98%;max-width:none;max-height:97vh;border-radius:var(--r)}
html.index-page .modal-bg.modal-fullscreen .modal-panel{width:100%;max-width:none;height:100vh;max-height:100vh;border-radius:0;border:none}

html.index-page #toast{position:fixed;bottom:72px;left:50%;z-index:9999;background:rgba(252,250,255,0.99);border:1px solid rgba(200,195,230,0.7);border-radius:var(--r);padding:12px 20px;font-size:14px;font-weight:700;box-shadow:0 8px 32px rgba(80,60,160,0.2);opacity:0;transform: translateX(-50%) translateY(12px) scale(0.5);pointer-events:none;transition:all .5s var(--ease2);}
html.index-page #toast.show{opacity:1;transform:translateY(0) translateX(-50%) scale(1)}

html.index-page .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
html.index-page .section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
html.index-page .section-hdr h3{font-size:20px;font-weight:800;letter-spacing:-0.3px}
html.index-page .hidden{display:none!important}
html.index-page .text-muted{color:var(--text2)}html.index-page .text-sm{font-size:13px}

@media(max-width:750px){
  html.index-page{scrollbar-gutter:auto}
  html.index-page .btn-sm-header{display:none !important}
  html.index-page #zoeken .mobile-search-wrapper {
    width: 100%;
    box-sizing: border-box;
  }
  html.index-page #zoeken .mobile-search-box-input {
    width: 100% !important;
    box-sizing: border-box;
  }
  html.index-page nav{padding: env(safe-area-inset-top, 0px) 16px 0;}
  html.index-page .menu-trigger-wrap{margin-left:auto!important}
  html.index-page .offline-page-notice,html.set-page .offline-page-notice{padding-top:9px;padding-bottom:9px}
  html.index-page .offline-page-notice>div,html.set-page .offline-page-notice>div{display:block}
  html.index-page .offline-page-notice strong,html.index-page .offline-page-notice span,
  html.set-page .offline-page-notice strong,html.set-page .offline-page-notice span{display:block}
  html.index-page nav .btn-primary { width: 40px; height: 40px; padding: 0; border-radius: var(--r3); overflow: hidden; display: flex; align-items: center; justify-content: center; order: 99; }
  html.index-page nav .btn-primary svg { width: 20px !important; height: 20px !important; display: block; }
  html.index-page nav .btn-primary span { display: none; }
  html.index-page nav .nav-spacer { display: none !important; }
  html.index-page .screen{padding:16px;margin-left:0;margin-bottom:80px;overflow-x:hidden;max-width:100%;width:100%}
  html.index-page .sidebar {
    position: fixed;
    left: 24px; 
    right: 24px; 
    bottom: 22px; 
    top: auto;
    width: auto;
    max-width: 500px;
    margin: 0 auto;
    height: 64px; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
    align-items: center;
    background: rgba(255, 255, 255, 1);
    border: 2px solid var(--glass-border);
    border-radius: 32px; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    padding: 0 16px; 
    box-sizing: border-box;
  }
  html.index-page .sidebar .sidebar-btn { width: auto; height: 48px; border-radius:24px; flex: 1; }
  html.index-page .sidebar div[style*="height:1px"], html.index-page .sidebar div[style*="flex:1"], html.index-page #recent-sidebar { display: none !important; }
  html.index-page .home-hero h1{font-size:32px}html.index-page .two-col{grid-template-columns:1fr}
  html.index-page .sets-grid{grid-template-columns:1fr}
  html.index-page .nav-actions { flex: 1; display: flex; gap: 8px; }
  html.index-page .menu-trigger-wrap { margin-left: auto !important; }
  html.index-page .search-wrapper { max-width: none; width: 100%; flex: 1; }
  html.index-page nav .search-box, html.index-page nav .search-icon, html.index-page nav .search-wrapper { display: none !important; }
  html.index-page .modal-panel { width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; border: none !important; padding: 16px !important; overflow-y: hidden !important; display: flex !important; flex-direction: column !important; }
  html.index-page .modal-content { flex: 1; overflow-y: auto; padding-right: 4px; }
  html.index-page .modal-bg:not(.create-modal-bg) { background: rgba(160,150,200,0.8) !important; }
  html.index-page .modal-header-btn { display: none !important; }
  html.index-page .two-col { grid-template-columns: 1fr !important; }
  html.index-page .modal-panel h3 { padding-bottom: 12px !important; border-bottom: 1px solid rgba(180,170,210,0.2) !important; margin-bottom: 16px !important; flex-shrink: 0; display: flex !important; align-items: center !important; justify-content: space-between !important; }
  html.index-page .modal-panel [style*="grid-template-columns:28px"] { grid-template-columns: 1fr !important; }
  html.index-page #ce-pairs { flex: 1; overflow-y: auto; max-height: none !important; overflow-y: auto !important; }
  html.index-page .pair-row { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-rows: auto auto !important; gap: 9px !important; align-items: start !important; }
  html.index-page .pair-num { grid-row: 1 / 3 !important; grid-column: 1 !important; display: flex !important; align-items: center !important; }
  html.index-page .pair-col:first-of-type { grid-column: 2 !important; grid-row: 1 !important; gap: 6px !important; }
  html.index-page .pair-col:nth-of-type(2) { grid-column: 2 !important; grid-row: 2 !important; gap: 6px !important; }
  html.index-page .pair-del { grid-row: 1 / 3 !important; grid-column: 3 !important; display: flex !important; align-items: center !important; }
  html.index-page .rich-editor { min-height: 50px !important; padding: 6px !important; font-size: 13px !important; line-height: 1.4 !important;border-radius: 16px !important }
  html.index-page .fmt-bar { flex-wrap: wrap !important; padding: 3px !important; gap: 2px !important;border-radius: 16px !important; }
  html.index-page .fmt-btn, html.index-page .fmt-clear, html.index-page .img-upload-btn { font-size: 11px !important; padding: 3px 6px !important; }
  html.index-page .color-swatch { width: 20px !important; height: 20px !important; }
  html.index-page .fmt-sep { min-width: 1px !important; }
  html.index-page .image-gallery { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  html.index-page .image-thumb { max-width: 50px !important; max-height: 50px !important; }
  html.index-page .modal-footer { flex-shrink: 0; margin-top: 0 !important; padding-top: 16px !important; border-top: 1px solid rgba(180,170,210,0.2) !important; flex-wrap: wrap; gap: 6px !important;margin-bottom:26px; }
  html.index-page .modal-footer button { min-width: fit-content; font-size: 12px !important; padding: 6px 10px !important; }
  html.index-page .modal-panel h3 {margin-top: 24px !important;}
}

/* Forceer volledige breedte op de zoekpagina voor mobiel */
html.index-page #zoeken .screen { padding: 16px; width: 100%; }

html.index-page #page-scroll-container{position:relative;overflow-x:hidden}
html.index-page .page{display:none}
html.index-page .page.active{display:block}

@keyframes mobilePageFirstFade{from{opacity:0}to{opacity:1}}
@keyframes mobilePageInFromRight{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes mobilePageOutToLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(-32%,0,0)}}
@keyframes mobilePageInFromLeft{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes mobilePageOutToRight{from{transform:translate3d(0,0,0)}to{transform:translate3d(32%,0,0)}}
@keyframes mobilePageContentIn{0%,10%{opacity:0}90%,100%{opacity:1}}

@media(max-width:750px){
  html.index-page .page.page-mobile-first{animation:mobilePageFirstFade .32s ease both}
  html.index-page .page.page-mobile-in,
  html.index-page .page.page-mobile-out{
    display:block;position:fixed;top:var(--nav-h);bottom:0;left:0;right:0;width:100%;
    overflow:hidden;background:var(--bg-grad);pointer-events:none;will-change:transform;
  }
  html.index-page #home.page-mobile-in,
  html.index-page #home.page-mobile-out{
    position:fixed;
    min-height:0;
  }
  html.index-page .page.page-mobile-in{
    z-index:2;
    animation:mobilePageInFromRight .4s cubic-bezier(.22,1,.36,1) both;
  }
  html.index-page .page.page-mobile-in>*{
    animation:mobilePageContentIn .4s linear both;
  }
  html.index-page .page.page-mobile-out{
    z-index:1;
    animation:mobilePageOutToLeft .4s cubic-bezier(.4,0,.2,1) both;
  }
  html.index-page .page.page-mobile-out>*{
    transform:translate3d(0,var(--page-out-offset,0),0);
  }
  html.index-page .page.page-mobile-in.page-mobile-reverse{
    animation-name:mobilePageInFromLeft;
  }
  html.index-page .page.page-mobile-out.page-mobile-reverse{
    animation-name:mobilePageOutToRight;
  }
}

html.index-page .library-list{display:flex;flex-direction:column;gap:8px}
html.index-page .library-item{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r);
  padding:16px;
  cursor:pointer;
  box-shadow:var(--glass-shadow);
  transition:all .2s;
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  will-change:transform;transform:translateZ(0)
}
html.index-page .library-item:hover{transform:translateX(4px);box-shadow:var(--glass-shadow-lg);background:var(--glass)}
html.index-page .library-item-info h3{font-size:16px;font-weight:800;margin-bottom:4px}
html.index-page .library-item-info p{font-size:13px;color:var(--text2);margin-bottom:6px}
html.index-page .library-item-meta{display:flex;gap:8px;flex-wrap:wrap}

html.index-page .vakken-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
html.index-page .vak-card{
  background:linear-gradient(135deg,var(--accent-light) 0%,rgba(0,98,255,0.05) 100%);
  border:1px solid var(--accent);
  border-radius:var(--r2);
  padding:24px;
  cursor:pointer;
  text-align:center;
  box-shadow:1px 1px 2px rgba(255,255,255,0.9) inset,-1px -1px 2px rgba(255,255,255,0.6) inset,0 2px 8px rgba(0,98,255,0.08);
  transition:all .25s;
  will-change:transform;transform:translateZ(0)
}
html.index-page .vak-card:hover{transform:translateY(-8px) scale(1.05);box-shadow:1px 1px 2px rgba(255,255,255,0.95) inset,-1px -1px 2px rgba(255,255,255,0.8) inset,0 8px 24px var(--accent-light);background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-light) 100%)}
html.index-page .vak-card-title{font-size:18px;font-weight:800;margin-bottom:8px;color:var(--accent)}
html.index-page .vak-card-count{font-size:28px;font-weight:800;color:var(--accent);margin:12px 0}
html.index-page .vak-card-desc{font-size:12px;color:var(--text3)}

/* ── SETTINGS DROPDOWN ── */
html.index-page .settings-dropdown-wrap{position:relative;}
html.index-page .settings-dropdown{
  position:absolute;right:-8px;top:48px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(200,195,230,0.6);
  border-radius:var(--r);
  padding:16px;
  min-width:280px;
  backdrop-filter:blur(10px);
  z-index:300;
  transform-origin:top right;
  animation:dropIn .25s var(--ease2) both;
}

@keyframes dropIn{from{opacity:0;transform:scale(0.88) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}

html.index-page .settings-section{margin-bottom:16px}
html.index-page .settings-section-title{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--text2);
  letter-spacing:.5px;
  margin-bottom:10px;
}
html.index-page .settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
  gap:12px;
}
html.index-page .settings-row-label{
  font-size:14px;
  color:var(--text);
  font-weight:600;
}
html.index-page .toggle{position:relative;width:46px;height:26px;cursor:pointer;flex-shrink:0}
html.index-page .toggle input{opacity:0;width:0;height:0;position:absolute}
html.index-page .toggle-slider{position:absolute;inset:0;background:rgba(180,170,210,0.5);border-radius:13px;transition:.25s;}
html.index-page .toggle-slider::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.25s var(--ease2);box-shadow:0 2px 6px rgba(80,60,160,0.2);}
html.index-page .toggle input:checked+.toggle-slider{background:var(--accent)}
html.index-page .toggle input:checked+.toggle-slider::after{transform:translateX(20px)}

/* ── ONBOARDING OVERLAY ── */
html.index-page .onboard-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
  animation: obFadeIn .4s ease both;
}
html.index-page .onboard-overlay.closing {
  animation: obFadeOut .4s ease both;
}
@keyframes obFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes obFadeOut { from { opacity: 1 } to { opacity: 0 } }
html.index-page .onboard-panel {
  background: var(--glass);
  border: 1.5px solid var(--glass-border);
  border-radius: 48px;
  width: 95%; max-width: 540px;
  min-height: 120px, 60vh;
  height: 60vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 16px;
  animation: obSlideUp .45s cubic-bezier(0.34,1.2,0.64,1) both;
  text-align: center;
  align-items: center;
}
html.index-page .onboard-panel.closing {
  animation: obSlideDown .45s cubic-bezier(0.34,1.2,0.64,1) both;
}
html.index-page .onboard-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
html.index-page .onboard-body::-webkit-scrollbar {
  width: 6px;
}
html.index-page .onboard-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
html.index-page .onboard-footer {
  width: 100%;
  padding-top: 16px;
}
html.index-page .onboard-btn:disabled {
  background: rgba(120,120,120,0.9);
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
  filter: none;
}
@keyframes obSlideUp {
  from { opacity: 0; transform: translateY(100px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes obSlideDown {
  from { opacity: 1; transform: translateY(0) scale(1.0) }
  to   { opacity: 0; transform: translateY(100px) scale(0.8) }
}
html.index-page .onboard-icon {
  margin-bottom: 2px; display: block;
}
html.index-page .onboard-title {
  font-size: 24px; font-weight: 800; letter-spacing: -.5px;
  margin-bottom: 6px; color: var(--text);
}
html.index-page .onboard-desc {
  font-size: 15px; color: var(--text2); line-height: 1.65;
  margin-bottom: 32px; max-width: 380px; margin-left: auto; margin-right: auto;
}
html.index-page .onboard-feature {
  display: flex; align-items: flex-start; gap: 14px;
  text-align: left; margin-bottom: 20px;
  background: var(--accent-light); border-radius: 16px; padding: 14px 16px;
}
html.index-page .onboard-feature-icon {
  font-size: 26px; flex-shrink: 0; margin-top: 2px;
}
html.index-page .onboard-feature-text strong {
  display: block; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 2px;
}
html.index-page .onboard-feature-text span {
  font-size: 13px; color: var(--text2); line-height: 1.5;
}
html.index-page .onboard-btn {
  display: block;
  width: 100%; padding: 16px; border: none; border-radius: var(--r3);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color: var(--accent-contrast,#fff); font-family: var(--font); font-size: 17px; font-weight: 800;
  cursor: pointer; letter-spacing: -.2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
  transition: all .2s; margin-top: 8px;
}
html.index-page .onboard-btn:hover { filter: brightness(1.1); transform: scale(1.02) }
html.index-page .onboard-btn:active { transform: scale(0.98) }
html.index-page .notification-onboard-panel{height:auto;max-height:min(620px,calc(100dvh - 32px));min-height:0}
html.index-page .notification-onboard-icon{color:var(--accent);display:flex;justify-content:center;margin:8px 0 16px}
html.index-page .notification-onboard-icon svg{display:none}
html.index-page .notification-onboard-icon::before{
  content:'';display:block;width:68px;height:68px;background:currentColor;
  -webkit-mask:url('./assets/icons/icon_notification.svg') center/contain no-repeat;
  mask:url('./assets/icons/icon_notification.svg') center/contain no-repeat;
}
html.index-page .notification-onboard .onboard-desc{margin-bottom:20px}
html.index-page .notification-onboard .onboard-feature{margin-bottom:0}
html.index-page .notification-onboard .onboard-feature-icon svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
html.index-page .onboard-footer-dual{display:grid;grid-template-columns:1fr 1.35fr;gap:10px}
html.index-page .onboard-footer-dual .onboard-btn{margin-top:0;font-size:15px;padding:14px 12px}
html.index-page .onboard-btn-secondary{background:var(--glass)!important;color:var(--text)!important;border:1px solid var(--glass-border)!important;box-shadow:none!important}
@media(max-width:520px){html.index-page .notification-onboard-panel{width:calc(100% - 24px);border-radius:36px}.notification-onboard .onboard-footer-dual{grid-template-columns:1fr}.notification-onboard .onboard-btn-secondary{order:2}}

/* ── DROPDOWN UIT-ANIMATIE ── */
html.index-page .settings-dropdown.closing {
  animation: dropOut .2s cubic-bezier(0.4,0,1,1) both;
}
@keyframes dropOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(-8px); }
}

/* ── ACCOUNT KNOP ── */
html.index-page .account-btn-wrap {
  position: relative;
  flex-shrink: 0;
}
 
/* Ingelogd: avatar knop */
html.index-page .account-avatar-btn {
  width: 40px; height: 40px;
  border-radius: var(--r3);
  background: var(--glass);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease);
  font-size: 18px; font-weight: 800; color: var(--accent);
  font-family: var(--font);
  flex-shrink: 0;
}
html.index-page .account-avatar-btn img {
  width: 100%; height: 100%; object-fit: cover;
}
html.index-page .account-avatar-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--glass-shadow-lg);
}
 
/* Uitgelogd: login knop */
html.index-page .account-login-btn {
  height: 40px; padding: 0 16px;
  border-radius: var(--r3);
  background: rgb(255, 191, 0);
  border: none;
  color: #fff;
  font-family: var(--font);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px var(--accent-light), inset 1px 1px 0 rgba(255,255,255,0.25);
  transition: all .2s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
html.index-page .account-login-btn:hover {
  filter: brightness(1.12);
  transform: scale(1.04) translateY(-1px);
}
 
/* ── ACCOUNT DROPDOWN ── */
html.index-page .account-dropdown {
  position: absolute; right: -8px; top: 50px;
  background: rgba(255,255,255,0.99);
  border: 1px solid rgba(200,195,230,0.6);
  border-radius: var(--r);
  padding: 0;
  min-width: 260px;
  box-shadow: 0 8px 40px rgba(80,60,160,0.22);
  z-index: 400;
  overflow: hidden;
  transform-origin: top right;
  animation: dropIn .25s var(--ease2) both;
  display: none;
}
html.index-page .account-dropdown.open {
  display: block;
}
html.index-page .account-dropdown.closing {
  display: block !important;
  animation: dropOut .2s cubic-bezier(0.4,0,1,1) both;
}
 
/* Dropdown header: avatar + naam */
html.index-page .acc-dd-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, var(--accent-light) 0%, rgba(0,98,255,0.04) 100%);
  border-bottom: 1px solid rgba(200,195,230,0.3);
}
html.index-page .acc-dd-avatar {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 19px; font-weight: 800;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 2px 8px var(--accent-light);
}
html.index-page .acc-dd-avatar img { width: 100%; height: 100%; object-fit: cover; }
html.index-page .acc-dd-names { min-width: 0; }
html.index-page .acc-dd-displayname {
  font-size: 15px; font-weight: 800; color: var(--text);
  letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.index-page .acc-dd-username {
  font-size: 12px; color: var(--text3); font-weight: 600; margin-top: 1px;
}
 
/* Sync badge */
html.index-page .acc-sync-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-light); border-radius: 20px;
  padding: 2px 8px; font-size: 11px; font-weight: 700; color: var(--accent);
  margin-top: 4px;
}
 
/* Menu items */
html.index-page .acc-dd-menu {
  padding: 6px 0;
}
html.index-page .acc-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .15s;
  border: none; background: none; width: 100%;
  font-family: var(--font); text-align: left;
  text-decoration: none;
}
html.index-page .acc-dd-item:hover {
  background: var(--accent-light);
  color: var(--accent);
}
html.index-page .acc-dd-item svg {
  width: 16px; height: 16px; color: var(--text3); flex-shrink: 0;
  transition: color .15s;
}
html.index-page .ui-asset-icon{
  display:inline-block;width:1em;height:1em;flex-shrink:0;background-color:currentColor;
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;
  mask-position:center;mask-repeat:no-repeat;mask-size:contain;
}
html.index-page .ui-asset-icon-notification{
  -webkit-mask-image:url('./assets/icons/icon_notification.svg');
  mask-image:url('./assets/icons/icon_notification.svg');
}
html.index-page .ui-asset-icon-settings{
  -webkit-mask-image:url('./assets/icons/icon_settings.svg');
  mask-image:url('./assets/icons/icon_settings.svg');
}
html.index-page .ui-asset-icon-settings-config,
html.index-page .account-manage-link::before{
  -webkit-mask-image:url('./assets/icons/icon_settings-config.svg');
  mask-image:url('./assets/icons/icon_settings-config.svg');
}
html.index-page .account-manage-link>svg{display:none}
html.index-page .account-manage-link::before{
  content:'';display:inline-block;width:16px;height:16px;flex:0 0 16px;background-color:currentColor;
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;
  mask-position:center;mask-repeat:no-repeat;mask-size:contain;
}
html.index-page .acc-dd-item:hover svg { color: var(--accent); }
html.index-page .acc-dd-item.danger { color: var(--red); }
html.index-page .acc-dd-item.danger:hover { background: rgba(232,58,74,0.08); color: var(--red); }
html.index-page .acc-dd-item.danger svg { color: var(--red); }
html.index-page .acc-dd-sep { height: 1px; background: rgba(200,195,230,0.35); margin: 4px 0; }
 
/* Dark mode for account dropdown */
html.index-page body.dark-mode .account-avatar-btn {
  background: rgba(50,50,70,0.7) !important;
  border-color: var(--glass-border) !important;
  box-shadow: inset 1px 1px 0 rgba(88,93,120,0.5), 0 2px 8px rgba(0,0,0,0.4) !important;
}
html.index-page body.dark-mode .account-dropdown {
  background: rgb(22,21,32) !important;
  border-color: var(--glass-border) !important;
}
html.index-page body.dark-mode .acc-dd-header {
  background: rgba(0,98,255,0.08) !important;
  border-color: var(--glass-border) !important;
}
html.index-page body.dark-mode .acc-dd-item { color: var(--text); }
html.index-page body.dark-mode .acc-dd-item:hover { background: rgba(0,98,255,0.12); }
html.index-page body.dark-mode .acc-dd-sep { background: rgba(64,73,112,0.5); }

/* ══════════════════════════════════════════════════════
   MENU TRIGGER KNOP (vervangt instellingen-knop + account-knop)
══════════════════════════════════════════════════════ */
html.index-page .menu-trigger-wrap{position:relative;flex-shrink:0}
html.index-page .menu-trigger-btn{
  width:40px;height:40px;padding:0;border-radius:var(--r3);
  background:#f2f2f7;border:1.5px solid var(--glass-border);
  box-shadow:none;cursor:pointer;overflow:visible;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);font-size:16px;font-weight:800;color:var(--text);
  font-family:var(--font);flex-shrink:0;position:relative;
}
html.index-page .menu-trigger-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%}
html.index-page .menu-trigger-btn:hover{background:#e9e9ef;transform:translateY(-1px)}
html.index-page .menu-trigger-dot{
  position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;
  background:var(--red);border:3px solid var(--glass);display:none;z-index:2;
}
html.index-page .menu-trigger-dot.show{display:block}
html.index-page body.dark-mode .menu-trigger-btn{
  background:#1c1c1e !important;
  border-color: var(--glass-border) !important;
  box-shadow:none!important;color:var(--text);
}
html.index-page body.dark-mode .menu-trigger-btn:hover{background:#2a2a2d!important}

/* ══════════════════════════════════════════════════════
   MENU OVERLAY (Account / Instellingen / Notificaties)
   De desktop-shell volgt exact de .modal-box-referentie.
══════════════════════════════════════════════════════ */
html.index-page #account-overlay{
  --acc-overlay-bg:rgba(11,15,42,.40);
  background:var(--acc-overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
html.index-page body.dark-mode #account-overlay{--acc-overlay-bg:rgba(0,0,0,.48)}
html.index-page .acc-ov-panel{
  width:min(740px,96vw);max-width:none;height:min(640px,88vh);max-height:none;
  align-items:stretch;text-align:left;padding:0;overflow:hidden;border-radius:36px;
  background:#f2f2f7;border:0;box-shadow:none;
}
html.index-page .acc-ov-drag-zone{display:none}
html.index-page .acc-ov-body{flex:1;display:flex;min-height:0;overflow:hidden}
html.index-page .acc-ov-sidebar{
  width:168px;flex-shrink:0;display:flex;flex-direction:column;padding:18px 10px 12px;
  border-right:1px solid #d1d1d6;overflow:hidden;background:#f2f2f7;
}
html.index-page .acc-ov-sidebar-title{font-size:16px;font-weight:700;line-height:1.2;padding:2px 10px 14px;flex-shrink:0}
html.index-page .acc-ov-sidebar-nav{display:flex;flex:1;flex-direction:column;gap:7px;overflow-y:auto;scrollbar-width:none}
html.index-page .acc-ov-sidebar-nav::-webkit-scrollbar{display:none}
html.index-page .acc-ov-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#f2f2f7}
html.index-page .acc-ov-header{
  display:flex;align-items:center;justify-content:space-between;
  min-height:0;padding:20px 22px 0;border:0;flex-shrink:0;
}
html.index-page .acc-ov-header h3{font-size:16px;font-weight:700;line-height:1.2;letter-spacing:normal;flex:1}
html.index-page .acc-ov-icon-btn{
  width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:var(--text2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;flex:0 0 28px;
}
html.index-page .acc-ov-icon-btn:hover{background:#e5e5ea;color:var(--text)}
html.index-page .acc-ov-icon-btn svg{width:14px;height:14px}
html.index-page .acc-ov-back{display:none;margin-right:8px}
html.index-page .acc-ov-divider{height:1px;background:#d1d1d6;margin:12px 22px 0;flex-shrink:0}
html.index-page .acc-ov-navbtn{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;white-space:nowrap;
  min-height:0;padding:8px 10px;border-radius:24px;border:0;background:#fff;
  font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--text2);
  cursor:pointer;transition:background .18s,color .18s;position:relative;flex-shrink:0;
}
html.index-page .acc-ov-navbtn:hover{background:#e5e5ea;color:var(--text)}
html.index-page .acc-ov-navbtn.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:none}
html.index-page body.dark-mode .acc-ov-navbtn.active{background:var(--accent)!important;color:#fff}
html.index-page .acc-ov-navicon{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:inherit}
html.index-page .acc-ov-navicon svg{width:14px;height:14px}
html.index-page .acc-ov-navicon .ui-asset-icon{width:14px;height:14px}
html.index-page .acc-ov-navbtn svg [fill="var(--text)"]{fill:currentColor!important}
html.index-page .acc-ov-navbadge{
  margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:800;
  min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  padding:0 4px;
}
html.index-page .acc-ov-navbtn.active .acc-ov-navbadge{background:#fff;color:var(--accent)}
html.index-page .acc-ov-content{flex:1;min-height:0;overflow-y:auto;padding:14px 22px 22px;scrollbar-width:thin;scrollbar-color:rgba(120,120,130,.25) transparent}
html.index-page .acc-ov-content::-webkit-scrollbar{width:4px}
html.index-page .acc-ov-content::-webkit-scrollbar-thumb{background:rgba(120,120,130,.25);border-radius:10px}
html.index-page .acc-ov-content-inner{animation:accContentIn .25s var(--ease2) both}
html.index-page body.dark-mode .acc-ov-panel,
html.index-page body.dark-mode .acc-ov-sidebar,
html.index-page body.dark-mode .acc-ov-main{background:#000}
html.index-page body.dark-mode .acc-ov-sidebar{border-color:#3a3a3c}
html.index-page body.dark-mode .acc-ov-divider{background:#3a3a3c}
html.index-page body.dark-mode .acc-ov-navbtn{background:#1c1c1e;color:var(--text3)}
html.index-page body.dark-mode .acc-ov-navbtn:hover{background:#121212;color:var(--text2)}
html.index-page body.dark-mode .acc-ov-icon-btn{background:#1c1c1e;color:var(--text2)}
html.index-page body.dark-mode .acc-ov-icon-btn:hover{background:#2c2c2e;color:var(--text)}
html.index-page #account-overlay .btn-primary{background:var(--accent);color:var(--accent-contrast,#fff);box-shadow:none}
html.index-page #account-overlay .btn-glass,
html.index-page #account-overlay .btn-icon{box-shadow:none}
html.index-page body.dark-mode #account-overlay .btn-glass,
html.index-page body.dark-mode #account-overlay .btn-icon{background:#2a2a2d!important;box-shadow:none!important}
html.index-page body.dark-mode #account-overlay .btn-glass:hover,
html.index-page body.dark-mode #account-overlay .btn-icon:hover{background:#343438!important;box-shadow:none!important}
@keyframes accContentIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}

@media(min-width:751px){
  html.index-page #account-overlay .acc-ov-panel{animation:accModalBoxIn .38s cubic-bezier(.34,1.4,.64,1) both}
  html.index-page #account-overlay .acc-ov-panel.closing{animation:accModalBoxOut .38s ease both}
}
@keyframes accModalBoxIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes accModalBoxOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(22px) scale(.97)}}

@media(max-width:750px){
  html.index-page #account-overlay{
    align-items:flex-end;padding:max(44px,calc(env(safe-area-inset-top) + 16px)) 0 0;
    animation:accBackdropIn .34s cubic-bezier(.22,1,.36,1) both;
  }
  html.index-page #account-overlay.closing{animation:accBackdropOut .34s cubic-bezier(.4,0,.2,1) both}
  html.index-page .acc-ov-panel{
    width:100%;height:100%;border-radius:36px 36px 0 0;border-bottom:0;
    animation:accSheetIn .38s cubic-bezier(.22,1,.36,1) both;will-change:transform;
  }
  html.index-page .acc-ov-panel.closing{animation:accSheetOut .34s cubic-bezier(.4,0,.2,1) both}
  html.index-page .acc-ov-panel.closing.swipe-dismiss{animation:accSheetOutFromDrag .34s cubic-bezier(.4,0,.2,1) both}
  html.index-page .acc-ov-panel.is-ready:not(.closing){animation:none}
  html.index-page .acc-ov-panel.is-dragging{animation:none!important;transition:none!important}
  html.index-page .acc-ov-panel.is-returning{
    animation:none!important;
    transition:transform .32s cubic-bezier(.22,1,.36,1)!important;
  }
  html.index-page .acc-ov-panel .acc-ov-body{animation:accSheetContentIn .38s cubic-bezier(.22,1,.36,1) both;will-change:opacity}
  html.index-page .acc-ov-panel.is-ready:not(.closing) .acc-ov-body{animation:none;opacity:1}
  html.index-page .acc-ov-panel.is-dragging .acc-ov-body{animation:none!important;transition:none!important}
  html.index-page .acc-ov-panel.is-returning .acc-ov-body{animation:none!important;transition:opacity .32s cubic-bezier(.22,1,.36,1)!important}
  html.index-page .acc-ov-panel.closing .acc-ov-body{animation:accSheetContentOut .34s cubic-bezier(.4,0,.2,1) both}
  html.index-page .acc-ov-panel.closing.swipe-dismiss .acc-ov-body{animation:accSheetContentOutFromDrag .34s cubic-bezier(.4,0,.2,1) both}
  html.index-page .acc-ov-drag-zone{height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 28px;touch-action:none}
  html.index-page .acc-ov-drag-zone span{width:42px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--text3) 45%,transparent)}
  html.index-page .acc-ov-body{flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.index-page .acc-ov-sidebar{
    width:100%;order:2;border:0;padding:0 max(16px,env(safe-area-inset-right)) max(24px,calc(env(safe-area-inset-bottom) + 12px)) max(16px,env(safe-area-inset-left));
    flex-shrink:0;overflow:visible;
  }
  html.index-page .acc-ov-sidebar-title{display:none}
  html.index-page .acc-ov-sidebar-nav{gap:8px;overflow:visible}
  html.index-page .acc-ov-navbtn{
    min-height:52px;background:#fff;box-shadow:none;margin:0;border:0;padding-inline:16px;border-radius:30px;font-size:14px;font-weight:600;
  }
  html.index-page body.dark-mode .acc-ov-navbtn{background:#1c1c1e}
  html.index-page .acc-ov-navbtn.active{display:none}
  html.index-page .acc-ov-main{order:1;flex:none;overflow:visible;background:transparent}
  html.index-page .acc-ov-header{min-height:58px;padding:8px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));position:sticky;top:0;z-index:2;background:#f2f2f7}
  html.index-page body.dark-mode .acc-ov-header{background:#000}
  html.index-page .acc-ov-header h3{font-size:21px}
  html.index-page .acc-ov-icon-btn{width:38px;height:38px;flex-basis:38px}
  html.index-page .acc-ov-icon-btn svg{width:18px;height:18px}
  html.index-page .acc-ov-divider{margin:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  html.index-page .acc-ov-content{overflow:visible;padding:16px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left))}
  html.index-page .acc-ov-panel.mobile-subpage .acc-ov-body{overflow:hidden}
  html.index-page .acc-ov-panel.mobile-subpage .acc-ov-sidebar{display:none}
  html.index-page .acc-ov-panel.mobile-subpage .acc-ov-main{height:100%;min-height:0;flex:1;overflow:hidden}
  html.index-page .acc-ov-panel.mobile-subpage .acc-ov-content{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px))}
  html.index-page .acc-ov-panel.mobile-subpage .acc-ov-back{display:flex}
  html.index-page .theme-swatches{grid-template-columns:repeat(5,minmax(0,50px));gap:8px;justify-content:space-between}
  html.index-page .theme-swatch{width:100%;height:auto;aspect-ratio:1}
}

@keyframes accBackdropIn{
  from{background:rgba(0,0,0,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
  to{background:var(--acc-overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
}
@keyframes accBackdropOut{
  from{background:var(--acc-overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  to{background:rgba(0,0,0,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
}
@keyframes accSheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes accSheetOut{from{transform:none}to{transform:translateY(100%)}}
@keyframes accSheetOutFromDrag{
  from{transform:translateY(var(--sheet-dismiss-start,20%))}
  to{transform:translateY(100%)}
}
@keyframes accSheetContentIn{0%,20%{opacity:0}100%{opacity:1}}
@keyframes accSheetContentOut{0%{opacity:1}80%,100%{opacity:0}}
@keyframes accSheetContentOutFromDrag{from{opacity:var(--sheet-content-opacity,.75)}to{opacity:0}}

html.index-page.menu-overlay-open,
html.index-page body.menu-overlay-open{overflow:hidden}

/* Account-tab content */
html.index-page .acc-ov-account-card{
  background:#fff;border:1px solid var(--glass-border);border-radius:var(--r2);
  padding:18px;margin-bottom:16px;
}
html.index-page .acc-ov-account-header{display:flex;align-items:center;gap:14px;margin-bottom:6px}
html.index-page .acc-ov-account-avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:21px;font-weight:800;overflow:hidden;flex-shrink:0;
}
html.index-page .acc-ov-account-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
html.index-page .acc-ov-account-name{font-size:16px;font-weight:800}
html.index-page .acc-ov-account-user{font-size:12px;color:var(--text3);font-weight:600;margin-top:1px}
html.index-page .acc-ov-content .acc-dd-item{
  min-height:50px;margin-bottom:8px;padding:10px 15px;background:#fff;border:1px solid var(--glass-border);
}
html.index-page .acc-ov-content .acc-dd-sep{display:none}
html.index-page body.dark-mode .acc-ov-content .acc-dd-item{background:#1c1c1e}

/* Instellingen in het menu */
html.index-page .acc-ov-content .settings-section{margin:0 0 24px}
html.index-page .acc-ov-content .settings-section:last-child{margin-bottom:0}
html.index-page .acc-ov-content .settings-section-title{
  padding:0 2px;margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text3);
}
html.index-page .theme-swatches{display:grid;grid-template-columns:repeat(5,54px);gap:16px;justify-content:space-between;width:100%;padding:2px}
html.index-page .theme-swatch{
  position:relative;width:54px;height:54px;padding:0;border:3px solid var(--bg-grad);border-radius:50%;
  outline:2px solid transparent;background:conic-gradient(var(--swatch-light) 0 25%,var(--swatch-dark) 25% 50%,var(--swatch-main) 50% 100%);
  cursor:pointer;transition:transform .18s ease,outline-color .18s ease,box-shadow .18s ease;
}
html.index-page .theme-swatch:hover{transform:scale(1.06)}
html.index-page .theme-swatch.selected{outline-color:color-mix(in srgb,var(--text3) 55%,transparent);box-shadow:0 0 0 2px var(--bg-grad)}
html.index-page .theme-swatch-check{display:none}
html.index-page .acc-ov-content .settings-row{
  min-height:58px;padding:10px 13px;margin:0;background:#fff;border:1px solid transparent;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:space-between;gap:14px;transition:opacity .2s ease,background .2s ease;
}
html.index-page .acc-ov-content .settings-row+.settings-row{margin-top:9px}
html.index-page .settings-row-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
html.index-page .settings-row-copy strong{font-size:14px;line-height:1.25;font-weight:750;color:var(--text)}
html.index-page .settings-row-copy small{font-size:11.5px;line-height:1.35;font-weight:500;color:var(--text3)}
html.index-page .acc-ov-content .settings-row.is-disabled{opacity:.42}
html.index-page .acc-ov-content .settings-row.is-disabled .toggle{cursor:not-allowed}
html.index-page .acc-ov-content .settings-row.is-disabled .toggle-slider{background:color-mix(in srgb,var(--text3) 36%,transparent)}
html.index-page .acc-ov-content .toggle input:disabled+.toggle-slider{cursor:not-allowed}
html.index-page .acc-ov-content .toggle input:disabled+.toggle-slider::after{box-shadow:none}
html.index-page body.dark-mode .acc-ov-content .settings-row{background:#1c1c1e}
html.index-page body.dark-mode .acc-ov-content .settings-row.is-disabled{opacity:.4}

/* Notificaties lijst */
html.index-page .notif-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}
html.index-page .notif-toolbar-title{font-size:15px;font-weight:800}
html.index-page .notif-toolbar-actions{display:flex;gap:6px}
html.index-page .notif-kebab-wrap{position:relative}
html.index-page .notif-kebab-dd{
  position:absolute;right:0;top:42px;background:rgba(255,255,255,1);
  border:1px solid rgba(200,195,230,0.6);border-radius:var(--r4);
  padding:6px;min-width:210px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.1);
  z-index:50;transform-origin:top right;animation:dropIn .2s var(--ease2) both;
}
html.index-page .notif-kebab-dd.closing{animation:dropOut .15s cubic-bezier(0.4,0,1,1) both}
html.index-page .notif-kebab-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:9px 10px;border-radius:24px;border:none;background:none;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--text);
}
html.index-page .notif-kebab-item:hover{background:var(--accent-light);color:var(--accent)}
html.index-page body.dark-mode .notif-kebab-dd{background: #1c1c1e !important;border-color:var(--glass-border) !important}
html.index-page .notif-list{display:flex;flex-direction:column;gap:8px}
html.index-page .notif-item{
  display:flex;align-items:flex-start;gap:12px;padding:13px 14px;
  background:#fff;border:1px solid var(--glass-border);border-radius:var(--r4);
  cursor:pointer;transition:all .15s;position:relative;
}
html.index-page .notif-item:hover{background:var(--glass)}
html.index-page .notif-item.unread{border-color:var(--accent);background:var(--accent-light)}
html.index-page .notif-item-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:6px;opacity:0}
html.index-page .notif-item.unread .notif-item-dot{opacity:1}
html.index-page .notif-item-body{flex:1;min-width:0}
html.index-page .notif-item-title{font-size:14px;font-weight:800;margin-bottom:2px}
html.index-page .notif-item-sub{font-size:12.5px;color:var(--text2);line-height:1.4}
html.index-page .notif-item-meta{font-size:11px;color:var(--text3);margin-top:5px;font-weight:600}
html.index-page .notif-item-check{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--glass-border);
  flex-shrink:0;margin-top:2px;display:none;align-items:center;justify-content:center;
}
html.index-page .notif-item.select-mode .notif-item-check{display:flex}
html.index-page .notif-item.selected .notif-item-check{background:var(--accent);border-color:var(--accent)}
html.index-page .notif-empty{text-align:center;padding:48px 20px;color:var(--text2);font-size:14px}
html.index-page .notif-detail-back{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--accent);cursor:pointer;margin-bottom:16px;background:none;border:none;
  font-family:var(--font);padding:0;
}
html.index-page .notif-detail-title{font-size:20px;font-weight:800;margin-bottom:4px;letter-spacing:-0.3px}
html.index-page .notif-detail-meta{font-size:12px;color:var(--text3);font-weight:600;margin-bottom:18px}
html.index-page .notif-detail-body{font-size:14.5px;line-height:1.7;color:var(--text)}
html.index-page .notif-selectbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(232,58,74,0.08);border:1px solid rgba(232,58,74,0.25);
  border-radius:var(--r4);padding:10px 14px;margin-bottom:12px;
}
html.index-page .notif-selectbar span{font-size:13px;font-weight:700;color:var(--red)}
html.index-page body.dark-mode .acc-ov-account-card,
html.index-page body.dark-mode .notif-item{background:#1c1c1e}
html.index-page body.dark-mode .notif-item:hover{background:#2c2c2e}

html.index-page.modal-open,
html.index-page body.modal-open {
    overflow: hidden;
}


    @keyframes spin-material { to { transform: rotate(360deg); } }

/* Set page */
html.set-page *,html.set-page *::before,html.set-page *::after{box-sizing:border-box;margin:0;padding:0}
html.set-page{
  --bg-grad:#f2f2f7;
  --glass:rgba(255,255,255,0.90);
  --glass-border:rgba(200,195,230,0.6);
  --glass-shadow:none;
  --glass-shadow-lg:none;
  --text:#0b0f2a;--text2:#3d3a55;--text3:#7c7899;
  --accent:#ff9f0a;--accent2:#e47f00;--accent-light:rgba(255,159,10,0.14);--accent-contrast:#fff;
  --green:#18b672;--green-light:rgba(24,182,114,0.15);
  --red:#e83a4a;--red-light:rgba(232,58,74,0.12);
  --orange:#f07b20;
  --r:30px;--r2:36px;--r3:34px;--r4:30px;
  --font:'DM Sans',sans-serif;
  --ease:cubic-bezier(0,0,.47,1.15);
  --ease2:cubic-bezier(0.34,1.56,0.64,1);
  --nav-h:calc(72px + env(safe-area-inset-top,0px));
  /* Light-mode select colors */
  --select-bg: rgba(255,255,255,0.9);
  --select-color: #0b0f2a;
  --select-border: rgba(200,195,225,0.6);
}
html.set-page{min-height:100vh;font-family:var(--font);color:var(--text);font-size:16px;overflow-x:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
html.set-page body{min-height:100vh;background:var(--bg-grad);background-attachment:fixed;-webkit-touch-callout:none;-webkit-user-select:none;}

/* ─── DARK MODE ─── */
html.set-page body.dark-mode nav,
html.set-page body.dark-mode .mode-card, html.set-page body.dark-mode .term-item, html.set-page body.dark-mode .st-qbox, html.set-page body.dark-mode .stat-box, html.set-page body.dark-mode .mc-option, html.set-page body.dark-mode .exam-info, html.set-page body.dark-mode .checkpoint-panel, html.set-page body.dark-mode .answer-mode-panel {
  background: var(--glass) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}
html.set-page body.dark-mode .fc-face,
html.set-page body.dark-mode .fc-face-back { background: var(--glass) !important; border-color: var(--glass-border) !important; color: #fff !important; }
html.set-page body.dark-mode input, html.set-page body.dark-mode textarea {
  background: #2c2c2e !important; border-color: var(--glass-border) !important; color: var(--text) !important;
}
html.set-page body.dark-mode input:focus, html.set-page body.dark-mode textarea:focus {
  background: #3a3a3c !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}
/* Dark mode select — keep readable */
html.set-page body.dark-mode select {
  background: #2c2c2e !important;
  border-color: var(--glass-border) !important;
  color: #ffffff !important;
}
html.set-page body.dark-mode select:focus {
  background: #3a3a3c !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}
html.set-page body.dark-mode .btn-glass {
  background: #2c2c2e !important; color: var(--text) !important;
  border-color: var(--glass-border) !important;
  box-shadow: none !important;
}
html.set-page body.dark-mode .btn-glass:hover {
  background: #3a3a3c !important;
  box-shadow: none !important;
}
html.set-page body.dark-mode .btn-icon {
  background: #2c2c2e !important; color: var(--text) !important;
  box-shadow: none !important;
}
html.set-page body.dark-mode .btn-icon:hover {
  background: #3a3a3c !important;
  box-shadow: none !important;
}
html.set-page body.dark-mode .settings-dropdown { background: var(--glass) !important; border-color: var(--glass-border) !important; color: var(--text) !important; }
html.set-page body.dark-mode .settings-select { background: #2c2c2e !important; border-color: var(--glass-border) !important; color: #ffffff !important; }
html.set-page body.dark-mode #modal-panel { background: var(--glass) !important; border-color: var(--glass-border) !important; color: var(--text) !important; }
html.set-page body.dark-mode #modal-panel input, html.set-page body.dark-mode #modal-panel textarea {
  background: #2c2c2e !important; border-color: var(--glass-border) !important; color: var(--text) !important;
}
html.set-page #modal-bg.share-modal-bg{background:rgba(0,0,0,.42)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;animation:set-shareBackdropIn .34s cubic-bezier(.22,1,.36,1) both}
html.set-page #modal-bg.share-modal-bg.closing{animation:set-shareBackdropOut .34s cubic-bezier(.4,0,.2,1) both}
html.set-page #modal-panel.share-modal-panel{
  width:min(460px,calc(100% - 32px))!important;max-width:460px!important;height:auto!important;min-height:0!important;
  max-height:min(720px,calc(100dvh - 32px))!important;padding:18px!important;overflow:auto!important;
  background:var(--bg-grad)!important;border:1px solid var(--glass-border)!important;border-radius:var(--r2)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.24)!important;animation:set-shareSheetIn .28s cubic-bezier(.22,1,.36,1) both!important;
}
html.set-page #modal-bg.share-modal-bg.closing #modal-panel{animation:set-shareSheetOut .22s cubic-bezier(.4,0,1,1) both!important}
html.set-page #modal-panel.share-modal-panel.is-dragging{animation:none!important;transition:none!important;will-change:transform}
html.set-page #modal-panel.share-modal-panel.is-ready:not(.closing){animation:none!important}
html.set-page #modal-panel.share-modal-panel.is-returning{animation:none!important;transition:transform .32s cubic-bezier(.22,1,.36,1)!important}
html.set-page #modal-panel.share-modal-panel.is-dragging .share-sheet-content{transition:none!important;will-change:opacity}
html.set-page #modal-panel.share-modal-panel.is-returning .share-sheet-content{transition:opacity .32s cubic-bezier(.22,1,.36,1)!important}
html.set-page #modal-bg.share-modal-bg.closing #modal-panel.share-modal-panel.swipe-dismiss{animation:set-shareSheetOutFromDrag .24s cubic-bezier(.4,0,1,1) both!important}
html.set-page #modal-bg.share-modal-bg.closing #modal-panel.share-modal-panel.swipe-dismiss .share-sheet-content{animation:set-shareContentOutFromDrag .24s linear both!important}
html.set-page .share-sheet-handle{display:none;width:42px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--text3) 38%,transparent);margin:0 auto 13px}
html.set-page .share-sheet-content{opacity:1}
html.set-page .share-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding:0 2px}
html.set-page .share-sheet-header h3{font-size:24px;line-height:1.1;font-weight:850;margin:0 0 4px!important}
html.set-page .share-sheet-header p{font-size:13px;color:var(--text2);max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.set-page .share-close-btn{width:38px;height:38px;border:0;border-radius:50%;background:var(--glass);color:var(--text2);display:flex;align-items:center;justify-content:center;flex:0 0 38px;cursor:pointer}
html.set-page .share-close-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}
html.set-page .share-apps{display:flex;justify-content:space-around;gap:14px;padding:0 2px 22px;overflow-x:auto;scrollbar-width:none}
html.set-page .share-apps::-webkit-scrollbar{display:none}
html.set-page .share-app{min-width:76px;border:0;background:transparent;color:var(--text);font-family:var(--font);font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
html.set-page img.share-app-icon{width:58px;height:58px;border-radius:17px;display:block;object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.1)}
html.set-page .share-actions{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r3);overflow:hidden}
html.set-page .share-action{width:100%;min-height:58px;padding:9px 14px;border:0;border-bottom:1px solid var(--glass-border);background:transparent;color:var(--text);font-family:var(--font);font-size:15px;font-weight:700;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer}
html.set-page .share-action:last-child{border-bottom:0}
html.set-page .share-action:active{background:var(--accent-light)}
html.set-page .share-action-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-light);color:var(--accent)}
html.set-page .share-action-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.set-page .share-action-chevron{width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--text3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes set-shareBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes set-shareBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes set-shareSheetIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes set-shareSheetOut{to{opacity:0;transform:translateY(20px) scale(.98)}}
@keyframes set-shareSheetOutFromDrag{from{transform:translateY(var(--share-dismiss-start,40%))}to{transform:translateY(100%)}}
@keyframes set-shareContentOutFromDrag{from{opacity:var(--share-content-opacity,.5)}to{opacity:0}}
@media(max-width:640px){
  html.set-page #modal-bg.share-modal-bg{align-items:flex-end!important;padding:max(24px,env(safe-area-inset-top)) 0 0!important}
  html.set-page #modal-panel.share-modal-panel{width:100%!important;max-width:none!important;max-height:calc(100dvh - max(24px,env(safe-area-inset-top)))!important;margin:0!important;padding:10px max(16px,env(safe-area-inset-right)) max(18px,calc(env(safe-area-inset-bottom) + 12px)) max(16px,env(safe-area-inset-left))!important;border-width:1px 0 0!important;border-radius:var(--r2) var(--r2) 0 0!important;animation:set-shareSheetMobileIn .38s cubic-bezier(.22,1,.36,1) both!important}
  html.set-page #modal-bg.share-modal-bg.closing #modal-panel{animation:set-shareSheetMobileOut .34s cubic-bezier(.4,0,.2,1) both!important}
  html.set-page #modal-bg.share-modal-bg.closing #modal-panel .share-sheet-content{animation:set-shareContentOut .34s cubic-bezier(.4,0,.2,1) both!important}
  html.set-page #modal-bg.share-modal-bg.closing #modal-panel.share-modal-panel.swipe-dismiss{animation:set-shareSheetOutFromDrag .34s cubic-bezier(.4,0,.2,1) both!important}
  html.set-page #modal-bg.share-modal-bg.closing #modal-panel.share-modal-panel.swipe-dismiss .share-sheet-content{animation:set-shareContentOutFromDrag .34s cubic-bezier(.4,0,.2,1) both!important}
  html.set-page .share-sheet-handle{display:block}
  html.set-page .share-sheet-header{padding:0 4px;margin-bottom:20px}
  html.set-page .share-apps{justify-content:flex-start;padding-inline:4px}
}
@keyframes set-shareSheetMobileIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes set-shareSheetMobileOut{from{transform:none}to{transform:translateY(100%)}}
@keyframes set-shareContentOut{0%{opacity:1}80%,100%{opacity:0}}
html.set-page body.dark-mode #toast { background: var(--glass) !important; border-color: var(--glass-border) !important; color: var(--text) !important; }
html.set-page body.dark-mode .milestone-panel { background: var(--glass) !important; border-color: var(--glass-border) !important; color: var(--text) !important; }
html.set-page body.dark-mode .results-overlay { background: var(--glass) !important; border-color: var(--glass-border) !important; color: var(--text) !important; }
html.set-page body.dark-mode input,html.set-page body.dark-mode textarea{background:#2c2c2e !important;border-color:var(--glass-border) !important;color:var(--text) !important;box-shadow:none !important;}
html.set-page body.dark-mode .combine-set-item { background: #2c2c2e !important; border-color: var(--glass-border) !important; color: var(--text) !important; }
html.set-page body.dark-mode .combine-set-item.selected { background: rgba(0,98,255,0.18) !important; border-color: var(--accent) !important; }
html.set-page body.dark-mode .mode-card,
html.set-page body.dark-mode .term-item,
html.set-page body.dark-mode .fc-face,
html.set-page body.dark-mode .fc-face-back,
html.set-page body.dark-mode .st-qbox,
html.set-page body.dark-mode .stat-box,
html.set-page body.dark-mode .mc-option,
html.set-page body.dark-mode .exam-info,
html.set-page body.dark-mode .checkpoint-panel,
html.set-page body.dark-mode .milestone-panel,
html.set-page body.dark-mode .settings-dropdown,
html.set-page body.dark-mode .answer-mode-panel,
html.set-page body.dark-mode .set-info-card,
html.set-page body.dark-mode .star-btn,
html.set-page body.dark-mode .card-star-btn,
html.set-page body.dark-mode #modal-panel,
html.set-page body.dark-mode #toast {
  box-shadow:none !important;
}

/* Dark mode: fix mc-option selected states so they're visible */
html.set-page body.dark-mode .mc-option.sel-correct{
  background:rgba(24,182,114,0.30)!important;
  border-color:var(--green)!important;
  color:#5effc4!important;
}
html.set-page body.dark-mode .mc-option.sel-wrong{
  background:rgba(232,58,74,0.30)!important;
  border-color:var(--red)!important;
  color:#ff8080!important;
}
html.set-page body.dark-mode .mc-option.reveal{
  background:rgba(24,182,114,0.20)!important;
  border-color:rgba(24,182,114,0.7)!important;
  color:#5effc4!important;
}

html.set-page nav{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:2px solid rgba(200,195,230,0.5);
  padding: env(safe-area-inset-top, 0px) 28px 0;
  height: calc(72px + env(safe-area-inset-top, 0px));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}

@media(max-width:750px){
  html.set-page nav{padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px}
  html.set-page .nav-logo{grid-column:1;justify-self:start}
  html.set-page .set-menu-trigger-wrap{grid-column:3;justify-self:end;margin-left:auto}
}
html.set-page .nav-logo{max-height: 50px; height: 100%;width:auto;display:flex;align-items:center;gap:8px;transition:all .2s var(--ease);}
html.set-page .nav-logo-svg {height:60%;width:auto;display:block;}
html.set-page .nav-set-title{justify-self:center;text-align:center}
html.set-page .set-menu-trigger-wrap{display:none;flex-shrink:0}
html.set-page #app.navigation-visible .set-menu-trigger-wrap{display:block;justify-self:end}
html.set-page .set-menu-trigger-btn{
  width:40px;height:40px;padding:0;border-radius:var(--r3);
  background:var(--glass);border:1.5px solid var(--glass-border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);color:var(--text);font-family:var(--font);
  position:relative;overflow:visible;font-size:16px;font-weight:800;
}
html.set-page .set-menu-trigger-btn:hover{transform:scale(1.08)}
html.set-page .set-menu-trigger-btn>img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
html.set-page .set-menu-trigger-initial{pointer-events:none}
html.set-page .set-menu-trigger-dot{
  position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;
  background:var(--red);border:3px solid var(--glass);display:none;z-index:2;
}
html.set-page .set-menu-trigger-dot.show{display:block}
html.set-page body.dark-mode .set-menu-trigger-btn{
  background:#2c2c2e;border-color:var(--glass-border);color:var(--text);
  box-shadow:none;
}
html.set-page .btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:var(--r3);cursor:pointer;font-family:var(--font);font-size:14px;font-weight:700;padding:9px 18px;transition:all .2s var(--ease);outline:none;white-space:nowrap;}
html.set-page .btn-primary{background:linear-gradient(180deg,var(--accent) 0%,var(--accent2) 100%);color:var(--accent-contrast,#fff);}
html.set-page .btn-primary:hover{filter:brightness(1.15);transform:scale(1.04) translateY(-1px)}
html.set-page .btn-glass{background:var(--glass);color:var(--text);border:2px solid var(--glass-border);}
html.set-page .btn-glass:hover{background:rgba(255,255,255,0.95);transform:scale(0.9);filter:brightness(0.95)}
html.set-page .btn-primary:active,html.set-page .btn-glass:active{transform:scale(0.9)}
html.set-page .btn-green{background:linear-gradient(180deg,var(--green) 0%,rgba(24,182,114,0.85) 100%);color:#fff;box-shadow:0 2px 12px rgba(24,182,114,0.35)}
html.set-page .btn-green:hover{filter:brightness(1.15);transform:scale(1.04)}
html.set-page .btn-red{background:linear-gradient(180deg,var(--red) 0%,rgba(232,58,74,0.85) 100%);color:#fff;box-shadow:0 2px 12px rgba(232,58,74,0.3)}
html.set-page .btn-red:hover{filter:brightness(1.15);transform:scale(1.04)}
html.set-page .btn-lg{padding:13px 26px;font-size:16px;border-radius:var(--r)}
html.set-page .btn-sm{padding:6px 12px;font-size:13px;border-radius:var(--r4)}
html.set-page .btn-icon{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--glass);border:2px solid var(--glass-border);border-radius:var(--r3);cursor:pointer;transition:all .2s var(--ease);}
html.set-page .btn-icon:hover{background:rgba(255,255,255,0.95);transform:scale(1.08)}
html.set-page .btn-icon:active{transform:scale(0.9)}
html.set-page .mode-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ─── BASE INPUT/SELECT ─── */
html.set-page input,html.set-page textarea{background:rgba(255,255,255,0.85);border:1px solid rgba(200,195,230,0.6);border-radius:var(--r3);color:var(--text);font-family:var(--font);font-size:15px;padding:11px 16px;outline:none;transition:all .2s;width:100%;box-shadow:inset 1px 1px 0 rgba(255,255,255,0.2),0 2px 6px rgba(80,60,160,0.06);-webkit-appearance:none;appearance:none;}
html.set-page input:focus,html.set-page textarea:focus{border-color:var(--accent);background:var(--glass);box-shadow:0 0 0 3px var(--accent-light),inset 1px 1px 0 rgba(255,255,255,1);}
html.set-page select{background:var(--select-bg);border:1px solid var(--select-border);border-radius:var(--r3);color:var(--select-color);font-family:var(--font);font-size:15px;padding:11px 16px;outline:none;transition:all .2s;width:100%;box-shadow:inset 1px 1px 0 rgba(255,255,255,0.2),0 2px 6px rgba(80,60,160,0.06);-webkit-appearance:none;appearance:none;}
html.set-page select:focus{border-color:var(--accent);background:var(--glass);box-shadow:0 0 0 3px var(--accent-light),inset 1px 1px 0 rgba(255,255,255,1);}

html.set-page .toggle{position:relative;width:46px;height:26px;cursor:pointer;flex-shrink:0}
html.set-page .toggle input{opacity:0;width:0;height:0;position:absolute}
html.set-page .toggle-slider{position:absolute;inset:0;background:rgba(180,170,210,0.5);border-radius:13px;transition:.25s;}
html.set-page .toggle-slider::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.25s var(--ease2);box-shadow:0 2px 6px rgba(80,60,160,0.2);}
html.set-page .toggle input:checked+.toggle-slider{background:var(--accent)}
html.set-page .toggle input:checked+.toggle-slider::after{transform:translateX(20px)}
html.set-page #app{min-height:100vh;display:flex;flex-direction:column}
html.set-page .screen{flex:1;padding:28px 32px;max-width:1100px;margin:0 auto;width:100%}
@keyframes set-pageIn{from{opacity:0;transform:scale(0.94) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes set-viewEnter{from{opacity:0;transform:scale(0.96) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes set-termsFadeIn{from{opacity:0}to{opacity:1}}
@keyframes set-iosOpen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes set-slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes set-cardLeft{from{opacity:0;transform:translateX(60px) scale(0.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes set-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes set-fbIn{from{opacity:0;transform:scale(0.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
html.set-page .back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:700;color:var(--text2);padding:6px 0;margin-bottom:20px;transition:color .15s}
html.set-page .back-btn:hover{color:var(--text)}
html.set-page .set-view-enter{animation:set-viewEnter .42s cubic-bezier(.22,1,.36,1) both}
html.set-page .set-terms-section .section-hdr{opacity:0;animation:set-termsFadeIn .24s ease both}
html.set-page .set-terms-section .term-item{opacity:0;animation:set-termsFadeIn .24s ease calc(var(--term-index,0) * .05s) both}
html.set-page .set-detail-title{font-size:34px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
html.set-page .mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px}
html.set-page .mode-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r2);padding:22px 18px;cursor:pointer;text-align:center;box-shadow:var(--glass-shadow);transition:all .2s var(--ease);}
html.set-page .mode-card:hover{transform:translateY(-4px) scale(1.04);box-shadow:var(--glass-shadow-lg);background:rgba(255,255,255,0.98)}
html.set-page .mode-card:active{transform:scale(0.97)}
html.set-page .mode-card-icon{font-size:30px;margin-bottom:10px}
html.set-page .mode-card-title{font-weight:800;font-size:16px;margin-bottom:3px}
html.set-page .mode-card-desc{font-size:12px;color:var(--text2)}
html.set-page .terms-list{display:flex;flex-direction:column;gap:8px}
html.set-page .term-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:16px 20px;box-shadow:var(--glass-shadow);display:flex;gap:16px;align-items:center;min-width:0;}
html.set-page .term-divider{width:1px;min-height:24px;background:rgba(66,85,255,0.2);align-self:stretch}
html.set-page .term-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-weight:700}
html.set-page .badge{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:700}
html.set-page .badge-purple{background:var(--accent-light);color:var(--accent)}
html.set-page .badge-orange{background:rgba(240,123,32,0.12);color:var(--orange)}
html.set-page .badge-gray{background:rgba(120,110,150,0.12);color:var(--text2)}
@media (prefers-reduced-motion:reduce){
  html.set-page .set-view-enter,html.set-page .set-terms-section .section-hdr,html.set-page .set-terms-section .term-item{animation:none;opacity:1;transform:none}
  html.set-page .streak-circle.on-fire .streak-num,html.set-page .streak-circle.on-fire svg.flame-icon,html.set-page .flame-tongue{animation:none!important}
}
html.set-page .progress-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
html.set-page .progress-track{flex:1;height:8px;background:rgba(180,170,210,0.25);border-radius:4px;overflow:hidden}
html.set-page .progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .5s var(--ease)}
html.set-page .streak-circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;background:var(--glass);border:2px solid var(--glass-border);box-shadow:var(--glass-shadow);position:relative;transition:width .22s ease,height .22s ease;color:var(--text2);isolation:isolate}
html.set-page .streak-circle.on-fire{width:44px;height:44px;border:0;background:transparent;box-shadow:none;color:#fff;overflow:visible}
html.set-page .streak-circle.on-fire .streak-num{position:absolute;z-index:3;left:50%;top:58%;transform:translate(-50%,-50%);transform-origin:50% 50%;font-size:15px;font-weight:900;line-height:1;color:#aa4f00;text-shadow:none;will-change:transform;animation:set-flameNumberBreathe 2.2s ease-in-out infinite}
html.set-page svg.flame-icon{position:absolute;z-index:1;display:none;width:54px;height:60px;left:50%;bottom:-1px;overflow:visible;transform:translateX(-50%);transform-origin:50% 82%;will-change:transform}
html.set-page .streak-circle.on-fire svg.flame-icon{display:block;animation:set-flameBreathe 2.2s ease-in-out infinite}
html.set-page .flame-fill{transform-box:view-box;transform-origin:50% 58%;transform:scale(.9)}
html.set-page .flame-tongue{transform-box:fill-box;transform-origin:50% 100%;will-change:transform}
html.set-page .flame-tongue-left{animation:set-flameTongueLeft .62s ease-in-out infinite alternate}
html.set-page .flame-tongue-center{animation:set-flameTongueCenter .72s ease-in-out infinite alternate-reverse}
html.set-page .flame-tongue-right{animation:set-flameTongueRight .55s ease-in-out infinite alternate}
@keyframes set-flameTongueLeft{from{transform:scaleY(.82)}to{transform:scaleY(1.06)}}
@keyframes set-flameTongueCenter{from{transform:scaleY(.88)}to{transform:scaleY(1.08)}}
@keyframes set-flameTongueRight{from{transform:scaleY(.8)}to{transform:scaleY(1.04)}}
@keyframes set-flameBreathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.85)}}
@keyframes set-flameNumberBreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(.85)}}
@keyframes set-pulseFlame{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
html.set-page .fc-wrap{max-width:620px;margin:0 auto;position:relative}
html.set-page .fc-card-stage{position:relative;height:300px;margin-bottom:20px;isolation:isolate}
html.set-page .fc-card-scene{position:absolute;inset:0;perspective:1400px;height:100%;cursor:pointer;user-select:none;z-index:1}
html.set-page .fc-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .34s cubic-bezier(.4,0,.2,1)}
html.set-page .fc-card-inner.flipped{transform:rotateY(180deg)}
html.set-page .fc-card-inner.fc-resetting{transition:none!important}
html.set-page .fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:rgba(255,255,255,.96);border:1.5px solid rgba(185,185,195,.62);border-radius:var(--r2);box-shadow:0 16px 42px rgba(20,20,28,.10);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center;}
html.set-page .fc-face-back{transform:rotateY(180deg);background:rgba(255,255,255,.96)}
@keyframes set-fcCardExit{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(-88px) scale(.965)}}
@keyframes set-fcCardEnter{from{opacity:0;transform:translateX(88px) scale(.975)}to{opacity:1;transform:translateX(0) scale(1)}}
html.set-page .fc-card-scene.fc-card-ghost{z-index:2;pointer-events:none}
html.set-page .fc-card-scene.fc-card-exit{animation:set-fcCardExit .34s cubic-bezier(.4,0,1,1) both;pointer-events:none}
html.set-page .fc-card-scene.fc-card-enter{animation:set-fcCardEnter .34s .17s cubic-bezier(.22,1,.36,1) both;pointer-events:none}
html.set-page .fc-face-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:14px}
html.set-page .fc-face-text{font-size:24px;font-weight:800;line-height:1.3;letter-spacing:-0.3px}
html.set-page .st-wrap{max-width:600px;margin:0 auto;position:relative}
html.set-page .st-qbox{background:var(--glass);border:1.5px solid var(--glass-border);border-radius:var(--r2);padding:32px;text-align:center;box-shadow:var(--glass-shadow-lg);margin-bottom:20px;}
html.set-page .st-qlabel{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:12px}
html.set-page .st-qtext{font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-0.3px}
html.set-page .st-feedback{padding:14px;border-radius:var(--r);text-align:center;font-weight:700;margin-bottom:14px;animation:set-fbIn .25s var(--ease2);font-size:15px;}
html.set-page .fb-correct{background:rgba(24,182,114,0.18);color:var(--green);border:1px solid rgba(24,182,114,0.4)}
html.set-page .fb-wrong{background:rgba(232,58,74,0.14);color:var(--red);border:1px solid rgba(232,58,74,0.3)}
html.set-page .fb-override-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid rgba(24,182,114,0.4);border-radius:8px;padding:5px 12px;font-family:var(--font);font-size:13px;font-weight:700;color:var(--green);cursor:pointer;margin-top:8px;transition:all .15s;}
html.set-page .fb-override-btn:hover{background:var(--green-light)}
html.set-page .st-hint-btn{background:none;border:1px dashed var(--accent-light);border-radius:8px;padding:6px 14px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--accent);cursor:pointer;transition:all .15s;}
html.set-page .st-hint-btn:hover{background:var(--accent-light)}
html.set-page .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
html.set-page .stat-box{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:14px;text-align:center;box-shadow:var(--glass-shadow);}
html.set-page .stat-num{font-size:26px;font-weight:800;line-height:1}
html.set-page .stat-label{font-size:12px;color:var(--text2);margin-top:3px;font-weight:600}
html.set-page .stat-green{color:var(--green)}html.set-page .stat-red{color:var(--red)}html.set-page .stat-blue{color:var(--accent)}
html.set-page .mc-options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
html.set-page .mc-option{background:var(--glass);border:1.5px solid var(--glass-border);border-radius:var(--r);padding:14px 18px;cursor:pointer;transition:all .15s;font-size:15px;font-weight:600;display:flex;gap:12px;align-items:center;box-shadow:var(--glass-shadow);text-align:left;color:var(--text);font-family:var(--font);}
html.set-page .mc-option:hover:not(.disabled):not(.sel-correct):not(.sel-wrong){background:rgba(255,255,255,0.95);transform:translateY(-2px);box-shadow:var(--glass-shadow-lg)}
html.set-page .mc-option.is-selected{background:var(--accent-light)!important;border-color:var(--accent)!important;color:var(--text)!important;font-weight:800!important;box-shadow:inset 0 0 0 1px var(--accent)!important}
html.set-page body.dark-mode .mc-option.is-selected{background:color-mix(in srgb,var(--accent) 30%,#242426)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:inset 0 0 0 1px var(--accent)!important}
html.set-page .mc-option.sel-correct{background:rgba(24,182,114,0.18)!important;border-color:var(--green)!important;color:var(--green)!important}
html.set-page .mc-option.sel-wrong{background:rgba(232,58,74,0.15)!important;border-color:var(--red)!important;color:var(--red)!important}
html.set-page .mc-option.reveal{background:rgba(24,182,114,0.1)!important;border-color:rgba(24,182,114,0.5)!important;color:var(--green)!important}
html.set-page .mc-letter{width:30px;height:30px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;}
html.set-page .exam-info{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:14px 18px;margin-bottom:16px;box-shadow:var(--glass-shadow);display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text2);font-weight:600;}
html.set-page .exam-review-item{border-radius:var(--r);padding:14px;margin-bottom:8px;}
html.set-page .exam-review-correct{background:rgba(24,182,114,0.12);border:1px solid rgba(24,182,114,0.25)}
html.set-page .exam-review-wrong{background:rgba(232,58,74,0.10);border:1px solid rgba(232,58,74,0.2)}
html.set-page .oh-question-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:20px;margin-bottom:12px;animation:set-ohQuestionIn .34s cubic-bezier(.2,.7,.2,1) calc(var(--oh-question-index,0) * .04s) both}
@keyframes set-ohQuestionIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
html.set-page .checkpoint-overlay{position:fixed;inset:0;z-index:5000;background:rgba(220,215,240,0.75);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;animation:set-fadeIn .3s;}
html.set-page .checkpoint-panel{background:rgba(252,250,255,0.99);border:1.5px solid rgba(200,195,230,0.8);border-radius:var(--r2);padding:32px;width:90%;max-width:560px;box-shadow:0 16px 64px rgba(80,60,160,0.2);animation:set-slideUp .4s var(--ease2);max-height:90vh;overflow-y:auto;}
html.set-page .cp-term{border-radius:var(--r);padding:12px 14px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;}
html.set-page .cp-term.unknown{background:rgba(232,58,74,0.12);color:var(--red);border:1px solid rgba(232,58,74,0.25)}
html.set-page .cp-mistake-list{max-height:180px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;padding:8px;border:1px solid rgba(200,195,230,0.3);border-radius:var(--r3)}
/* Timer fill animation (checkpoint button + skip hold) */
html.set-page .btn-timer-fill{position:absolute;inset:0;background:rgba(255,255,255,0.2);width:0;animation:set-btnTimerProgress 10s linear forwards;pointer-events:none;border-radius:inherit;}
html.set-page #st-skip-btn{position:relative;overflow:hidden;isolation:isolate}
html.set-page #st-skip-btn>span{position:relative;z-index:1}
html.set-page .btn-skip-fill{position:absolute;inset:0;background:var(--accent-light);width:0;animation:set-btnTimerProgress 2s linear forwards;pointer-events:none;border-radius:inherit;z-index:0;}
@keyframes set-btnTimerProgress{to{width:100%}}
html.set-page #milestone-overlay{position:fixed;inset:0;z-index:9000;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;}
html.set-page #milestone-overlay.active{opacity:1;pointer-events:auto}
html.set-page .milestone-panel{background:rgba(255,255,255,0.98);border:1.5px solid rgba(200,195,230,0.8);border-radius:var(--r2);padding:36px 48px;box-shadow:0 20px 80px rgba(80,60,160,0.25);text-align:center;animation:set-msIn .4s var(--ease2);}
@keyframes set-msIn{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:scale(1)}}
html.set-page .milestone-num{font-size:64px;font-weight:800;line-height:1;color:var(--accent);margin-bottom:4px}
html.set-page .milestone-text{font-size:22px;font-weight:800;color:var(--text);margin-bottom:4px}
html.set-page .mode-actions{position:relative;z-index:4000}
html.set-page .settings-dropdown-wrap{position:relative;overflow:visible;z-index:4001}
html.set-page .settings-dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:4002;background:var(--bg-grad);border:1px solid rgba(200,195,230,0.7);border-radius:var(--r2);padding:16px;box-shadow:0 12px 48px rgba(0, 0, 0, 0.1);width:280px;max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain;transform-origin:top right;animation:set-dropIn .25s var(--ease2) both;}
@keyframes set-dropIn{from{opacity:0;transform:scale(0.88) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
html.set-page .settings-section{margin-bottom:12px}html.set-page .settings-section:last-child{margin-bottom:0}
html.set-page .settings-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:8px;padding:0 2px}
html.set-page .settings-row{display:flex;align-items:center;justify-content:space-between;padding:6px 2px;border-bottom:1px solid rgba(180,170,210,0.2)}
html.set-page .settings-row:last-child{border-bottom:none}
html.set-page .settings-row-label{font-size:14px;font-weight:600;color:var(--text)}
/* Settings select — always readable in light mode */
html.set-page .settings-select{
  background: var(--select-bg) !important;
  border:1px solid var(--select-border) !important;
  border-radius:8px;
  padding:5px 10px;
  font-size:13px;
  font-weight:600;
  color: var(--select-color) !important;
  font-family:var(--font);
  outline:none;
  cursor:pointer;
  width:auto;
  -webkit-appearance:none;
  appearance:none;
}
html.set-page .results-overlay{position:absolute;inset:0;z-index:10;background:rgba(248,246,255,0.99);border-radius:var(--r2);display:none;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center;animation:set-slideUp .4s var(--ease2)}
html.set-page .results-pct{font-size:72px;font-weight:800;letter-spacing:-2px;line-height:1;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
html.set-page .wrong-item{border-radius:var(--r);padding:12px 16px;margin-bottom:6px;background:rgba(232,58,74,0.1);border:1px solid rgba(232,58,74,0.2)}
html.set-page .encourage{position:fixed;top:28%;left:50%;transform:translate(-50%,-50%);z-index:8999;pointer-events:none;font-size:22px;font-weight:800;color:var(--accent);text-shadow:0 2px 12px rgba(0,98,255,0.3);animation:set-encourageAnim .9s var(--ease2) both;}
@keyframes set-encourageAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(0.7)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(0.95)}}
html.set-page .loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:min-height:60vh;text-align:center}
html.set-page .loading-spinner{width:48px;height:48px;border:4px solid var(--accent-light);border-top-color:var(--accent);border-radius:50%;animation:set-spin .8s linear infinite;margin-bottom:20px}
@keyframes set-spin{to{transform:rotate(360deg)}}
html.set-page #toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:rgba(252,250,255,0.99);border:1px solid rgba(200,195,230,0.7);border-radius:var(--r);padding:12px 20px;font-size:14px;font-weight:700;box-shadow:0 8px 32px rgba(80,60,160,0.2);opacity:0;transform:translateY(12px);pointer-events:none;transition:all .25s var(--ease2);}
html.set-page #toast.show{opacity:1;transform:translateY(0)}
html.set-page .section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
html.set-page .section-hdr h3{font-size:20px;font-weight:800;letter-spacing:-0.3px}
html.set-page .shake-anim{animation:set-shake .35s}
@keyframes set-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
html.set-page .copy-inp-correct{border-color:var(--green)!important;background:rgba(24,182,114,0.08)!important;box-shadow:0 0 0 3px rgba(24,182,114,0.18)!important;}

/* ── TERMS SEARCH ── */
html.set-page .search-btn{width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s var(--ease);box-shadow:var(--glass-shadow);flex-shrink:0;font-family:var(--font);}
html.set-page .search-btn:hover{background:rgba(255,255,255,0.98);transform:scale(1.08);box-shadow:var(--glass-shadow-lg)}
html.set-page .search-btn:active{transform:scale(0.9)}
html.set-page .search-btn svg{width:18px;height:18px;color:var(--text2)}
html.set-page #searchBox{display:none;align-items:center;gap:16px;position:fixed;top:calc(74px + env(safe-area-inset-top,0px));left:96px;right:16px;width:auto;z-index:250;background:rgba(240,238,249,0.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(200,195,230,0.5);padding:10px 14px 10px 20px;margin:0;border-radius:var(--r3);box-shadow:0 12px 32px rgba(30,28,60,.12);transform-origin:top center;will-change:opacity,transform}
html.set-page #searchBox[style*="display:flex"]{display:flex !important}
@keyframes set-searchOpen{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes set-searchClose{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(.99)}}
html.set-page #searchBox.search-open{animation:set-searchOpen .22s cubic-bezier(.22,1,.36,1) both}
html.set-page #searchBox.search-closing{animation:set-searchClose .18s cubic-bezier(.4,0,1,1) both;pointer-events:none}
html.set-page .search-icon{width:20px;height:20px;color:var(--text2);flex-shrink:0}
html.set-page .search-input{background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;font-family:var(--font);font-size:16px;color:var(--text);outline:none;flex:1;width:100%;min-width:0;padding:8px 4px!important}
html.set-page .search-input::placeholder{color:var(--text3)}
html.set-page .search-label{color:var(--text2);font-size:14px;font-weight:600;white-space:nowrap}
html.set-page .search-info{display:flex;align-items:center;gap:10px;white-space:nowrap}
html.set-page .search-counter{font-size:13px;color:var(--text2);font-weight:600;text-align:right}
html.set-page .search-nav-btn{width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;box-shadow:var(--glass-shadow);flex-shrink:0;color:var(--text2);font-family:var(--font)}
html.set-page .search-nav-btn:hover:not(:disabled){background:rgba(255,255,255,0.98);transform:scale(1.05);box-shadow:var(--glass-shadow-lg)}
html.set-page .search-nav-btn:disabled{opacity:0.3;cursor:not-allowed}
html.set-page .search-nav-btn svg{width:14px;height:14px}
html.set-page .search-close-btn{width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s var(--ease);box-shadow:var(--glass-shadow);flex-shrink:0;color:var(--text2);font-family:var(--font)}
html.set-page .search-close-btn:hover{background:rgba(255,255,255,0.98);transform:scale(1.08);box-shadow:var(--glass-shadow-lg)}
html.set-page .search-close-btn:active{transform:scale(0.96)}
html.set-page .search-close-btn svg{width:18px;height:18px}
html.set-page body.dark-mode #searchBox{background:var(--glass);border-color:var(--glass-border)}
html.set-page body.dark-mode .search-input{color:var(--text)}
html.set-page body.dark-mode .search-nav-btn,html.set-page body.dark-mode .search-close-btn{background:#2c2c2e;color:var(--text);border-color:var(--glass-border);box-shadow:none}
html.set-page body.dark-mode .search-nav-btn:hover:not(:disabled),html.set-page body.dark-mode .search-close-btn:hover{background:#3a3a3c;color:#fff;box-shadow:none}
html.set-page .term-highlight--active{background:var(--accent-light);color:var(--accent);padding:2px 4px;border-radius:3px;font-weight:600}
html.set-page .term-highlight--dim{background:rgba(120,115,150,0.15);color:var(--text);padding:2px 4px;border-radius:3px;font-weight:600}
html.set-page body.dark-mode .term-highlight--dim{background:rgba(200,200,220,0.15);}
@media(max-width:750px){
  html.set-page #searchBox{top:calc(70px + env(safe-area-inset-top,0px));left:12px;right:12px;gap:8px;padding:8px 10px 8px 16px}
  html.set-page .search-info{gap:6px}
  html.set-page .search-nav-btn{width:30px;height:30px}
  html.set-page .search-close-btn{width:36px;height:36px}
}
/* ── COMBINE MODAL ── */
html.set-page .combine-search{width:100%;padding:10px 14px;border:1px solid var(--glass-border);border-radius:var(--r3);font-family:var(--font);font-size:14px;margin-bottom:12px;background:rgba(255,255,255,0.85);}
html.set-page .combine-sets-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
html.set-page .combine-set-item{background:rgba(255,255,255,0.7);border:1.5px solid var(--glass-border);border-radius:var(--r3);padding:12px 16px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;user-select:none;}
html.set-page .combine-set-item:hover{background:rgba(255,255,255,0.95);border-color:var(--accent);}
html.set-page .combine-set-item.selected{background:var(--accent-light);border-color:var(--accent);}
html.set-page .combine-set-item.disabled{opacity:0.45;pointer-events:none;}
html.set-page .combine-check{width:20px;height:20px;border-radius:6px;border:2px solid var(--glass-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;background:rgba(255,255,255,0.6);}
html.set-page .combine-set-item.selected .combine-check{background:var(--accent);border-color:var(--accent);color:#fff;}
html.set-page .combine-set-title{font-size:14px;font-weight:700;color:var(--text)}
html.set-page .combine-set-meta{font-size:12px;color:var(--text3);margin-top:2px}

@media(max-width:640px){html.set-page nav{padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}html.set-page .screen{padding:16px}html.set-page .mode-grid{grid-template-columns:1fr}html.set-page .nav-set-title{display:none}}

/* ── ONBOARDING OVERLAY ── */
html.set-page .onboard-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
  animation: set-obFadeIn .4s ease both;
}
html.set-page .onboard-overlay.closing {
  animation: set-obFadeOut .4s ease both;
}
@keyframes set-obFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes set-obFadeOut { from { opacity: 1 } to { opacity: 0 } }
html.set-page .onboard-panel {
  background: var(--glass);
  border: 1.5px solid var(--glass-border);
  border-radius: 48px;
  width: 95%; max-width: 540px;
  min-height: 120px, 60vh;
  height: 60vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  animation: set-obSlideUp .45s cubic-bezier(0.34,1.2,0.64,1) both;
  text-align: center;
  align-items: center;
}
html.set-page .onboard-panel.closing {
  animation: set-obSlideDown .45s cubic-bezier(0.34,1.2,0.64,1) both;
}
html.set-page .onboard-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
html.set-page .onboard-body::-webkit-scrollbar {
  width: 6px;
}
html.set-page .onboard-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
html.set-page .onboard-footer {
  width: 100%;
  padding-top: 16px;
}
html.set-page .onboard-btn:disabled {
  background: rgba(120,120,120,0.9);
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
  filter: none;
}
@keyframes set-obSlideUp {
  from { opacity: 0; transform: translateY(100px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes set-obSlideDown {
  from { opacity: 1; transform: translateY(0) scale(1) }
  to   { opacity: 0; transform: translateY(100px) scale(.8) }
}
html.set-page .onboard-icon {
  margin-bottom: 2px; display: block;
}
html.set-page .onboard-title {
  font-size: 24px; font-weight: 800; letter-spacing: -.5px;
  margin-bottom: 6px; color: var(--text);
}
html.set-page .onboard-desc {
  font-size: 15px; color: var(--text2); line-height: 1.65;
  margin-bottom: 32px; max-width: 380px; margin-left: auto; margin-right: auto;
}
html.set-page .onboard-feature {
  display: flex; align-items: flex-start; gap: 14px;
  text-align: left; margin-bottom: 20px;
  background: var(--accent-light); border-radius: 16px; padding: 14px 16px;
}
html.set-page .onboard-feature-icon {
  font-size: 26px; flex-shrink: 0; margin-top: 2px;
}
html.set-page .onboard-feature-text strong {
  display: block; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 2px;
}
html.set-page .onboard-feature-text span {
  font-size: 13px; color: var(--text2); line-height: 1.5;
}
html.set-page .onboard-btn {
  width: 100%; padding: 16px; border: none; border-radius: var(--r3);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color: var(--accent-contrast,#fff); font-family: var(--font); font-size: 17px; font-weight: 800;
  cursor: pointer; letter-spacing: -.2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
  transition: all .2s; margin-top: 8px;
}
html.set-page .onboard-btn:hover { filter: brightness(1.1); transform: scale(1.02) }
html.set-page .onboard-btn:active { transform: scale(0.98) }

/* De antwoordkeuze is een tweede stap binnen dezelfde help-popup. */
html.set-page .answer-mode-panel{overflow:hidden}
html.set-page .answer-mode-body{width:100%;display:flex;flex-direction:column;justify-content:center;padding:12px 4px 4px}
html.set-page .answer-mode-icon{width:auto;height:auto;margin:0 auto 18px;border-radius:0;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--accent)}
html.set-page .answer-mode-icon svg{width:54px;height:54px}
html.set-page .answer-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:440px;margin:0 auto}
html.set-page .answer-mode-btn{min-height:128px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:18px 20px;border-radius:var(--r3);border:1.5px solid var(--glass-border);cursor:pointer;background:var(--glass);color:var(--text);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;gap:6px;font-family:var(--font)}
html.set-page .answer-mode-btn:hover{background:var(--accent-light);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
html.set-page .answer-mode-btn:active{background:color-mix(in srgb,var(--accent-light) 82%,var(--accent))}
html.set-page .answer-mode-btn-title{font-size:15px;font-weight:800;color:var(--text)}
html.set-page .answer-mode-btn-desc{font-size:13px;color:var(--text2);line-height:1.45}
html.set-page .onboard-panel.answer-mode-step-out>.onboard-body,
html.set-page .onboard-panel.answer-mode-step-out>.onboard-footer{animation:set-answerStepOut .18s cubic-bezier(.4,0,1,1) both}
html.set-page .onboard-panel.answer-mode-step-in>.answer-mode-body{animation:set-answerStepIn .28s cubic-bezier(.22,1,.36,1) both}
@keyframes set-answerStepOut{to{opacity:0;transform:translateX(-24px)}}
@keyframes set-answerStepIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:640px){
  html.set-page .answer-mode-options{grid-template-columns:1fr}
  html.set-page .answer-mode-btn{min-height:0;padding:16px 18px}
  html.set-page .answer-mode-icon{width:auto;height:auto;margin-bottom:12px}
  html.set-page .answer-mode-icon svg{width:48px;height:48px}
}

html.set-page .settings-dropdown.closing {
  animation: set-dropOut .2s cubic-bezier(0.4,0,1,1) both;
}
@keyframes set-dropOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(-8px); }
}

/* ── DROPDOWN UIT-ANIMATIE ── */
html.set-page .settings-dropdown.closing {
  animation: set-dropOut .2s cubic-bezier(0.4,0,1,1) both;
}
@keyframes set-dropOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(-8px); }
}

/* ── STAR / STER KNOPPEN ── */
html.set-page .star-btn {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9);
  border: 2px solid var(--glass-border); 
  border-radius: var(--r3); cursor: pointer;
  transition: all .2s var(--ease); flex-shrink: 0;
}
html.set-page .star-btn:hover { transform: scale(1.1); }
html.set-page .star-btn:active { transform: scale(0.9); }
html.set-page .star-btn svg { transition: all .2s var(--ease2); color: var(--text); }
html.set-page .star-btn svg { fill: none; stroke: var(--text); }

/* ── NIEUWE SET-EDITOR ─────────────────────────────────────────────── */
html.index-page .modal-bg.create-modal-bg{padding:24px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel{width:min(740px,calc(100vw - 48px))!important;max-width:none!important;height:min(640px,calc(100dvh - 48px))!important;max-height:none!important;padding:0!important;overflow:hidden!important;border:1px solid var(--glass-border)!important;border-radius:var(--r2)!important;background:var(--bg-grad)!important;box-shadow:0 28px 80px rgba(8,10,20,.28)!important;display:block!important;transition:width .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1),max-width .28s cubic-bezier(.22,1,.36,1),border-radius .28s ease}
html.index-page .modal-bg.create-modal-bg.modal-fullscreen{padding:0!important}
html.index-page .modal-bg.create-modal-bg.modal-fullscreen .modal-panel.create-modal-panel{width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important}
html.index-page .create-editor-shell{height:100%;min-height:0;display:flex;flex-direction:column}
html.index-page .create-editor-drag-zone{display:none}
html.index-page .create-editor-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;padding:14px 20px;border-bottom:1px solid var(--glass-border);background:var(--bg-grad);flex:0 0 auto}
html.index-page .create-editor-heading{display:flex;align-items:center;min-width:0}
html.index-page .create-editor-icon{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
html.index-page .create-editor-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
html.index-page .create-editor-kicker{display:block;color:var(--accent);font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
html.index-page .create-editor-heading h2{font-size:19px;line-height:1.2;letter-spacing:normal;font-weight:850}
html.index-page .create-editor-heading p{font-size:13px;color:var(--text2);margin-top:4px}
html.index-page .create-editor-header-actions{display:flex;gap:8px}
html.index-page .create-editor-icon-btn{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;background:var(--glass);color:var(--text2);display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease}
html.index-page .create-editor-icon-btn:hover{background:var(--accent-light);color:var(--accent);transform:none}
html.index-page .create-editor-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.index-page .create-editor-icon-btn img{width:22px;height:22px;display:block;filter:brightness(0);opacity:.72}
html.index-page .create-editor-expand{background:var(--glass)!important;border:0!important}
html.index-page .create-editor-expand:hover{background:var(--accent-light)!important;border:0!important;filter:none}
html.index-page .create-editor-scroll{flex:1;min-height:0;overflow-y:auto!important;padding:20px 22px 24px!important;overscroll-behavior:contain}
html.index-page .create-editor-card{background:var(--glass2);border:1px solid var(--glass-border);border-radius:var(--r2);padding:18px;margin-bottom:16px;box-shadow:none}
html.index-page .create-editor-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
html.index-page .create-editor-section-title>div>span{font-size:17px;font-weight:850;color:var(--text)}
html.index-page .create-editor-section-title p{font-size:12px;color:var(--text2);margin-top:3px}
html.index-page .create-editor-section-title .btn{flex-shrink:0}
html.index-page .create-editor-section-title .btn svg,html.index-page .btn-add-term svg,html.index-page .create-editor-footer .btn-primary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
html.index-page .create-editor-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(210px,.6fr);gap:14px}
html.index-page .create-desc-field{grid-column:1}.create-editor-grid textarea{min-height:52px;max-height:120px}
html.index-page .create-editor-grid input,html.index-page .create-editor-grid textarea,html.index-page .create-editor-grid .subject-picker-btn{background:var(--glass);border:1px solid var(--glass-border);min-height:48px;border-radius:999px;box-shadow:none}
html.index-page .create-editor-grid textarea{border-radius:24px}
html.index-page .create-editor-grid label{font-weight:750;color:var(--text2);padding-left:4px}
html.index-page .create-editor-grid label span{color:var(--red)}
html.index-page .create-editor-columns{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 36px;gap:10px;padding:0 10px 8px;color:var(--text3);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
html.index-page .create-editor-terms #ce-pairs{max-height:none!important;overflow:visible!important;padding:0!important}
html.index-page .create-editor-terms .pair-row{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 34px;gap:10px;padding:10px;margin-bottom:9px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r3)}
html.index-page .create-editor-terms .pair-row:focus-within{border-color:var(--accent);background:var(--glass)}
html.index-page .create-editor-terms .pair-num{margin-top:9px;background:var(--accent-light)}
html.index-page .create-editor-terms .rich-editor{background:var(--glass);border:1px solid var(--glass-border);min-height:48px;border-radius:18px;box-shadow:none}
html.index-page .create-editor-terms .rich-editor:focus{background:var(--glass);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
html.index-page .create-editor-terms .pair-del{width:32px;height:32px;margin-top:7px;border:1px solid transparent}
html.index-page .create-editor-terms .pair-del svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.index-page .create-editor-terms .pair-del:hover{border-color:color-mix(in srgb,var(--red) 24%,transparent)}
html.index-page .create-editor-terms .btn-add-term{width:100%;height:46px;margin:8px 0 0;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r3)}
html.index-page .create-modal-panel .btn{border-radius:var(--r3);box-shadow:none;transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease}
html.index-page .create-modal-panel .btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff;box-shadow:none}
html.index-page .create-modal-panel .btn-primary:hover{background:color-mix(in srgb,var(--accent) 90%,#000);border-color:transparent;filter:none;transform:none}
html.index-page .create-modal-panel .btn-glass{background:var(--glass);border:1px solid var(--glass-border);color:var(--text);box-shadow:none}
html.index-page .create-modal-panel .btn-glass:hover{background:color-mix(in srgb,var(--glass) 82%,var(--accent-light));border-color:var(--glass-border);filter:none;transform:none}
html.index-page .create-modal-panel .btn:active{transform:none;opacity:.72}
html.index-page .create-editor-footer.modal-footer{padding:14px 20px calc(14px + env(safe-area-inset-bottom));margin:0;border-top:1px solid var(--glass-border);background:var(--bg-grad);display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
html.index-page .create-editor-save-actions{display:flex;justify-content:flex-end;gap:9px}.create-editor-footer .btn{min-height:44px}.create-editor-footer .btn-primary{display:flex;align-items:center;gap:7px}.create-editor-clear{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);border:1px solid transparent}
html.index-page .create-editor-clear:hover{background:color-mix(in srgb,var(--red) 15%,transparent);transform:none}
html.index-page body.dark-mode .modal-bg.create-modal-bg .modal-panel.create-modal-panel{background:var(--bg-grad)!important;border-color:var(--glass-border)!important}
html.index-page body.dark-mode .create-editor-header,html.index-page body.dark-mode .create-editor-footer.modal-footer{background:var(--bg-grad);border-color:var(--glass-border)}
html.index-page body.dark-mode .create-editor-card{background:var(--glass2)!important;border-color:var(--glass-border)!important}
html.index-page body.dark-mode .create-editor-grid input,html.index-page body.dark-mode .create-editor-grid textarea,html.index-page body.dark-mode .create-editor-grid .subject-picker-btn{background:#242426!important;border-color:#3a3a3d!important;box-shadow:none!important}
html.index-page body.dark-mode .create-editor-terms .pair-row{background:#242426!important;border-color:var(--glass-border)!important;box-shadow:none!important}
html.index-page body.dark-mode .create-editor-terms .rich-editor{background:#242426!important;border-color:#3a3a3d!important;box-shadow:none!important}
html.index-page body.dark-mode .create-editor-terms .rich-editor:focus{border-color:var(--accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)!important}
html.index-page body.dark-mode .create-modal-panel .btn-glass{background:#2a2a2d!important;border-color:var(--glass-border)!important;box-shadow:none!important}
html.index-page body.dark-mode .create-modal-panel .btn-glass:hover{background:#343438!important;border-color:var(--glass-border)!important;box-shadow:none!important}
html.index-page body.dark-mode .create-editor-expand{background:var(--glass)!important;border:0!important;box-shadow:none!important}
html.index-page body.dark-mode .create-editor-expand:hover{background:#2a2a2d!important;border:0!important}
html.index-page body.dark-mode .create-editor-icon-btn img{filter:brightness(0) invert(1);opacity:.82}

@media(max-width:750px){
  html.index-page .modal-bg.create-modal-bg{padding:max(44px,calc(env(safe-area-inset-top) + 16px)) 0 0;align-items:flex-end!important;animation:accBackdropIn .34s cubic-bezier(.22,1,.36,1) both}
  html.index-page .modal-bg.create-modal-bg.closing{animation:accBackdropOut .34s cubic-bezier(.4,0,.2,1) both}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;max-height:none!important;border-width:1px 0 0!important;border-radius:var(--r2) var(--r2) 0 0!important;animation:accSheetIn .38s cubic-bezier(.22,1,.36,1) both!important;will-change:transform}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.is-ready:not(.closing){animation:none!important}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.is-dragging{animation:none!important;transition:none!important}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.is-returning{animation:none!important;transition:transform .32s cubic-bezier(.22,1,.36,1)!important}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.is-dragging .create-editor-shell{transition:none!important}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.is-returning .create-editor-shell{transition:opacity .32s cubic-bezier(.22,1,.36,1)!important}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.closing{animation:accSheetOut .34s cubic-bezier(.4,0,.2,1) both!important}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.closing.swipe-dismiss{animation:createSheetOutFromDrag .34s cubic-bezier(.4,0,.2,1) both!important}
  html.index-page .modal-bg.create-modal-bg .modal-panel.create-modal-panel.closing.swipe-dismiss .create-editor-shell{animation:createSheetContentOutFromDrag .34s linear both!important}
  html.index-page .create-editor-drag-zone{height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 28px;touch-action:none}
  html.index-page .create-editor-drag-zone span{width:42px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--text3) 45%,transparent)}
  html.index-page .create-editor-header{min-height:58px;padding:8px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));gap:10px}
  html.index-page .create-editor-heading h2{font-size:21px}html.index-page .create-editor-expand{display:none!important}html.index-page .create-editor-icon-btn{width:38px;height:38px;flex-basis:38px}
  html.index-page .create-editor-scroll{padding:16px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left))!important}
  html.index-page .create-editor-card{padding:15px;border-radius:26px;margin-bottom:12px}
  html.index-page .create-editor-grid{grid-template-columns:1fr;gap:12px}html.index-page .create-desc-field{grid-column:auto}
  html.index-page .create-editor-columns{display:none}
  html.index-page .create-editor-terms .pair-row{display:grid!important;grid-template-columns:40px minmax(0,1fr) 32px!important;grid-template-rows:auto auto!important;gap:8px!important;padding:10px!important;border-radius:22px!important}
  html.index-page .create-editor-terms .pair-num{grid-column:1!important;grid-row:1/3!important;margin-top:20px!important}
  html.index-page .create-editor-terms .pair-col{grid-column:2!important;position:relative;padding-top:17px}
  html.index-page .create-editor-terms .pair-col::before{content:attr(data-label);position:absolute;top:0;left:3px;color:var(--text3);font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
  html.index-page .create-editor-terms .pair-col[data-label="Begrip / term"]{grid-row:1!important}html.index-page .create-editor-terms .pair-col[data-label="Definitie"]{grid-row:2!important}
  html.index-page .create-editor-terms .pair-del{grid-column:3!important;grid-row:1/3!important;margin-top:23px!important}
  html.index-page .create-editor-terms .rich-editor{min-height:50px!important;padding:10px 12px!important;font-size:14px!important;border-radius:17px!important}
  html.index-page .create-editor-footer.modal-footer{padding:11px max(14px,env(safe-area-inset-right)) max(12px,calc(env(safe-area-inset-bottom) + 8px)) max(14px,env(safe-area-inset-left))!important;margin:0!important;flex-wrap:nowrap!important}html.index-page .create-editor-clear{display:none!important}html.index-page .create-editor-save-actions{width:100%;display:block}html.index-page .create-editor-save-actions .btn{width:100%;font-size:13px!important;padding:8px 11px!important}
}
@keyframes createSheetOutFromDrag{from{transform:translateY(var(--create-dismiss-start,40%))}to{transform:translateY(100%)}}
@keyframes createSheetContentOutFromDrag{from{opacity:var(--create-content-opacity,.5)}to{opacity:0}}
html.set-page .star-btn.starred svg { fill: var(--accent); stroke: var(--accent); filter:none }
html.set-page body.dark-mode .star-btn {
  background: #2c2c2e !important;
  box-shadow: none !important;
  border: 2px solid var(--glass-border) !important;
}

html.set-page body.dark-mode .card-star-btn {
  background: #2c2c2e !important;
  border-color: var(--glass-border) !important;
  box-shadow: none !important;
  border: 2px solid var(--glass-border) !important;
}

html.set-page body.dark-mode .card-star-btn.starred {
  background: #2c2c2e !important;
  box-shadow: none !important;
}

html.set-page .card-star-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r3);
  border: 2px solid var(--glass-border);
  background: rgba(255,255,255,.94);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  z-index: 20;
}
html.set-page .card-star-btn:hover { transform: scale(1.05); }
html.set-page .card-star-btn svg { transition: all .2s var(--ease2); fill: none; stroke: var(--text); }
html.set-page .card-star-btn.starred svg { fill: var(--accent); stroke: var(--accent); }

/* term-item flex aanpassen voor ster-knop */
html.set-page .term-item { position: relative; }
html.set-page .term-item.term-search-hidden{display:none!important}
html.set-page .term-item-inner{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:20px;align-items:center;flex:1;min-width:0}
html.set-page .term-item-inner>div:not(.term-divider){min-width:0;overflow-wrap:anywhere;word-break:break-word}
html.set-page .term-item .star-btn{flex:0 0 40px}

/* ── SET-DETAIL LAYOUT MET KAART ── */
html.set-page .set-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 28px;
  width: 100%;
}
html.set-page .set-info-card {
  order: -1; /* zijkaart bovenaan */
}
html.set-page .set-detail-left { min-width: 0; }

html.set-page .set-info-card {
  width: 100%;
  position: relative;
  border-radius: var(--r2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: visible;
  flex-shrink: 0;
  margin-bottom: 16px;
}
html.set-page .set-info-card-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  gap: 8px;
  background: rgba(255,255,255,0.4) !important;
  border-radius: 36px 30px 0px 0px;
}
html.set-page body.dark-mode .set-info-card-nav { background:#1c1c1e !important; }
html.set-page .set-info-card-nav-left { display: flex; align-items: center; gap: 8px; }
html.set-page .set-info-card-nav-right { display: flex; align-items: center; }
html.set-page .set-info-card-footer {padding: 14px 16px; background: var(--glass);border-radius:0px 0px 36px 36px;}

/* ── STER-MODUS KNOP ── */
html.set-page .star-mode-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r3);
  background: linear-gradient(180deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.75) 100%);
  color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease);
}
html.set-page .star-mode-btn:hover { transform: translateY(-1px); box-shadow: var(--glass-shadow-lg); }
html.set-page .star-mode-btn:active { transform: scale(0.97); }
html.set-page .star-mode-btn.active {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  border-color: transparent;
}
html.set-page .star-mode-btn svg { fill: var(--accent); stroke: var(--accent); }
html.set-page .star-mode-btn.active svg { stroke: #fff !important; fill: #fff !important; }
html.set-page .star-mode-btn.active span { color: #fff !important; }

html.set-page body.dark-mode .star-mode-btn {
  background: #2c2c2e !important;
  border-color: var(--glass-border) !important;
  box-shadow: none !important;
}
html.set-page body.dark-mode .star-mode-btn.active {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%) !important;
  border-color: transparent !important;
}

@media(max-width:900px){
  html.set-page .set-detail-layout { grid-template-columns: 1fr; }
}

/* Navigatie op de set-home; oefenmodi verbergen deze shell. */
html.set-page .set-sidebar{display:none}
html.set-page #app.navigation-visible .set-sidebar{
  position:fixed;left:0;top:var(--nav-h);z-index:180;
  width:80px;height:calc(100dvh - var(--nav-h));
  background:linear-gradient(180deg,rgba(240,238,249,1) 0%,rgba(230,225,245,1) 100%);
  border-right:2px solid rgba(200,195,230,0.5);
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;
}
html.set-page .set-sidebar-btn,
html.set-page .set-sidebar-create{
  width:56px;height:56px;border-radius:16px;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;background:transparent;
  color:var(--text2);font-family:var(--font);font-weight:700;
}
html.set-page .set-sidebar-btn:hover{color:var(--accent);transform:scale(1.1)}
html.set-page .set-sidebar-btn svg{width:24px;height:24px}
html.set-page .set-sidebar-btn span{font-size:9px;margin-top:4px;letter-spacing:-.5px}
html.set-page .set-sidebar-btn:hover>span{color:var(--text)}
html.set-page .set-sidebar-create{
  width:40px;height:40px;border-radius:var(--r4);
  background:linear-gradient(180deg,var(--accent),var(--accent2));color:var(--accent-contrast,#fff);
  display:none;
}
html.set-page .set-sidebar-create:hover{filter:brightness(1.15)}
html.set-page .set-sidebar-create:active{transform:scale(.9)}
html.set-page .set-sidebar-create svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
html.set-page .set-sidebar-search{display:none}
html.set-page .set-sidebar-divider{width:60%;height:1px;background:rgba(200,195,230,.3);margin:12px 0;flex-shrink:0}
html.set-page .set-recent-sidebar{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
html.set-page .set-sidebar-spacer{flex:1}
html.set-page .set-recent-item{
  width:48px;height:48px;border-radius:10px;background:transparent;
  border:3px solid rgba(200,195,230,.3);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;color:var(--text2);position:relative;flex-shrink:0;
}
html.set-page .set-recent-item:hover{color:var(--accent);transform:scale(1.1);border:6px solid rgba(200,195,230,.3)}
html.set-page .set-recent-label{
  position:absolute;left:64px;top:50%;transform:translateY(-50%);
  background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;
  padding:6px 10px;font-size:11px;font-weight:700;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;color:var(--text);
}
html.set-page .set-recent-item:hover .set-recent-label{opacity:1}
html.set-page body.dark-mode .set-sidebar{
  background:var(--bg-grad) !important;border-right-color:var(--glass-border) !important;
}

@media(min-width:751px){
  html.index-page .offline-page-notice,
  html.set-page .offline-page-notice{margin-left:80px;width:calc(100% - 80px)}
  html.set-page #app.navigation-visible .screen{
    width:calc(100% - 80px);
    margin-left:max(80px, calc(50% - 510px));
    margin-right:0;
  }
}

@media(max-width:750px){
  html.index-page .offline-page-notice,
  html.set-page .offline-page-notice{margin-left:0;width:auto}
  html.set-page #app.navigation-visible .set-sidebar{
    left:24px;right:24px;bottom:22px;top:auto;
    width:auto;max-width:500px;margin:0 auto;height:64px;
    border:2px solid var(--glass-border);border-radius:32px;
    background:#fff;
    box-shadow:0 8px 32px rgba(0,0,0,.2);
    padding:0 16px;flex-direction:row;
  }
  html.set-page .set-sidebar-btn{width:auto;height:100%;flex:1}
  html.set-page .set-sidebar-create{width:40px;height:40px;flex-shrink:0;display:flex}
  html.set-page .set-sidebar-search{display:flex}
  html.set-page .set-sidebar-divider,
  html.set-page .set-recent-sidebar,
  html.set-page .set-sidebar-spacer{display:none}
  html.set-page #app.navigation-visible .screen{margin-bottom:80px}
}