/* widgets-more.css — Traffic light, board overview, class check, flash cards, tabbed text, group maker, name day, news. */
/* Traffic light: let photorealistic CSS handle appearance — remove overrides */
/* ── Traffic light — photorealistic redesign ── */
.traffic-wrap{container-type:size;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(1cqh,1cqw);padding:min(.5cqh,.5cqw);width:100%;height:100%}

/* Metallic housing */
.traffic-housing{
  display:flex;flex-direction:column;align-items:center;
  gap:min(2.5cqh,2.5cqw);
  padding:min(3.5cqh,4cqw) min(3.5cqh,4cqw);
  border-radius:min(8cqh,8cqw);
  background:linear-gradient(165deg,#888 0%,#5a5a5a 40%,#424242 100%);
  border:1.5px solid #2e2e2e;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 6px 24px rgba(0,0,0,.22),
    0 2px 6px rgba(0,0,0,.15);
  position:relative;
}
/* Rim highlight — subtle top sheen */
.traffic-housing::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  border-radius:99px;
}

/* Bulb well — inactive = deep recessed dark bowl */
.traffic-dot{
  width:min(20cqh,56cqw);aspect-ratio:1;border-radius:50%;
  cursor:pointer;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 55%,#3a3838,#1c1c1c);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.8),
    inset 0 0 0 1.5px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.1);
  transition:background .3s,box-shadow .35s;
}
/* Lens glare on every bulb */
.traffic-dot::before{
  content:'';position:absolute;top:10%;left:18%;
  width:38%;height:28%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.25) 0%,transparent 100%);
  filter:blur(1px);pointer-events:none;z-index:2;
}
/* Ring highlight around lens */
.traffic-dot::after{
  content:'';position:absolute;inset:8%;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);pointer-events:none;z-index:1;
}

/* ── Active states — each with bloom glow ── */
.traffic-dot.active{
  background:radial-gradient(circle at 45% 38%,var(--c-hi) 0%,var(--c-mid) 40%,var(--c-lo) 100%);
  box-shadow:
    inset 0 -3px 14px rgba(0,0,0,.3),
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    0 0 min(3.5cqh,3.5cqw) rgba(var(--c-rgb),.95),
    0 0 min(8cqh,8cqw) rgba(var(--c-rgb),.55),
    0 0 min(18cqh,18cqw) rgba(var(--c-rgb),.22);
}

/* Label */
.traffic-label{font-size:clamp(1.25rem,9.5cqw,3rem);font-weight:700;text-align:center;letter-spacing:.01em;line-height:1.12}
.traffic-label-inp{font-weight:700;text-align:center;letter-spacing:.01em;line-height:1.1;width:100%;border:none;outline:none;background:transparent;font-family:inherit;color:inherit;cursor:text;padding:0}
.traffic-label-inp::placeholder{opacity:.45}
.traffic-label-inp.tl-sz-0{font-size:clamp(1.25rem,9.5cqw,3rem)}
.traffic-label-inp.tl-sz-1{font-size:clamp(1.6rem,13cqw,4rem)}
.traffic-label-inp.tl-sz-2{font-size:clamp(2.2rem,18cqw,5.5rem)}
.traffic-edit-row{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.traffic-edit-btn{position:absolute;right:0;background:none;border:none;color:inherit;opacity:.38;cursor:pointer;padding:.5rem;border-radius:50%;transition:opacity .2s,background .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.traffic-edit-btn:hover,.traffic-edit-btn:active{opacity:.7;background:rgba(255,255,255,.08)}
.traffic-sz-row{display:flex;gap:.2rem;align-items:center;justify-content:center;margin-top:.15rem}
.traffic-sz-btn{background:none;border:none;color:inherit;opacity:.35;cursor:pointer;padding:.3rem .4rem;border-radius:.3rem;font-weight:700;font-family:inherit;transition:opacity .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.traffic-sz-btn:hover,.traffic-sz-btn:active{opacity:.7;background:rgba(255,255,255,.08)}
.traffic-sz-btn.is-active{opacity:.85}
/* Stopwatch */
.sw-readout{font-variant-numeric:tabular-nums;font-size:clamp(2rem,26cqi,6rem);font-weight:600;letter-spacing:-.02em;text-align:center;line-height:1}
.sw-sub{text-align:center;font-size:clamp(.75rem,5cqi,1.8rem);color:var(--font-sub);margin-top:.125rem}
.skin-glass-dark .sw-sub{color:rgba(244,241,234,.6)}
/* ── Board overview (package view) ── */
.ov-backdrop{position:fixed;inset:0;z-index:99990;background:rgba(10,20,25,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:1.5rem;overflow-y:auto;opacity:0;transition:opacity .2s}
.ov-backdrop.ov-visible{opacity:1}
.ov-panel{background:var(--bg);border-radius:1.5rem;width:100%;max-width:62rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.22);overflow:hidden;flex-shrink:0}
.ov-panel-head{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem 0}
.ov-pkg-wrap{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}
.ov-pkg-name{font-size:1.25rem;font-weight:700;color:var(--font);border-radius:.375rem;padding:.125rem .25rem;margin-left:-.25rem;outline:none;cursor:text;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-pkg-name:hover{background:var(--hover)}
.ov-pkg-name:focus{background:var(--hover);box-shadow:0 0 0 2px var(--main)}
.ov-close-btn{width:2.25rem;height:2.25rem;border-radius:50%;border:none;background:var(--hover);cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0;transition:background .12s}
.ov-close-btn:hover{background:rgba(0,0,0,.1)}
.ov-close-btn .material-icons-outlined{font-size:1.125rem}
.ov-meta{font-size:.8125rem;color:var(--font-sub);padding:.375rem 1.5rem .875rem;border-bottom:1px solid var(--divider)}
.ov-my-colls-btn{display:inline-flex;align-items:center;gap:.3125rem;height:1.75rem;padding:0 .75rem;border-radius:var(--r-full);border:1px solid var(--main);background:var(--main-sub);font-family:"Poppins",sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;color:var(--main);transition:background .12s,border-color .12s,color .12s;flex-shrink:0}
.ov-my-colls-btn:hover{background:var(--main);color:#fff}
.ov-my-colls-btn .material-icons-outlined{font-size:.9375rem}
.ov-share-btn{display:inline-flex;align-items:center;gap:.3125rem;height:1.75rem;padding:0 .75rem;border-radius:var(--r-full);border:1px solid var(--main);background:var(--main-sub);font-family:"Poppins",sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;color:var(--main);transition:background .12s,border-color .12s,color .12s;flex-shrink:0}
.ov-share-btn:hover{background:var(--main);color:#fff}
.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem;padding:.875rem 1.25rem 1.25rem}
@media(max-width:700px){.ov-grid{grid-template-columns:repeat(2,1fr)}}
.ov-card{background:var(--el);border:1px solid var(--border);border-radius:.875rem;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s;position:relative}
.ov-card:hover{box-shadow:0 .25rem .875rem rgba(0,0,0,.12);border-color:var(--main)}
.ov-card-active{border-color:var(--main);box-shadow:0 0 0 2px var(--main)}
.ov-thumb{height:5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.ov-thumb:hover::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.08)}
.ov-thumb-icons{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;justify-content:center;padding:.5rem;max-width:7rem}
.ov-card-body{padding:.375rem .625rem .1875rem;display:flex;flex-direction:column;gap:.125rem;flex:1}
.ov-card-name{font-size:.8125rem;font-weight:600;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none;border-radius:.25rem;padding:.0625rem .1875rem;margin-left:-.1875rem}
.ov-card-name[contenteditable=true]{background:var(--hover);box-shadow:0 0 0 2px var(--main);white-space:normal}
.ov-card-meta{font-size:.625rem;color:var(--font-sub);display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.ov-badge-shared{background:var(--main-sub);color:var(--main);border-radius:99px;padding:.0625rem .375rem;font-weight:600;font-size:.5625rem;text-transform:uppercase;letter-spacing:.03em}
.ov-card-actions{display:flex;gap:.1875rem;padding:.3125rem .5rem;border-top:1px solid var(--divider);opacity:0;transition:opacity .12s}
.ov-card:hover .ov-card-actions,.ov-card:focus-within .ov-card-actions{opacity:1}
.ov-btn{width:1.625rem;height:1.625rem;border-radius:.375rem;border:none;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--font-sub);transition:background .1s,color .1s}
.ov-btn:hover{background:var(--hover);color:var(--font)}
.ov-btn-del:hover{background:#fef2f2;color:#e05252}
.ov-btn-share:hover{background:var(--main-sub);color:var(--main)}
.ov-btn .material-icons-outlined{font-size:.9375rem}
.ov-add-card{border:2px dashed var(--border);border-radius:.875rem;min-height:8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:transparent;transition:border-color .15s,background .15s;font-family:"Poppins",sans-serif}
.ov-coll-btn{display:inline-flex;align-items:center;gap:.3rem;height:1.75rem;padding:0 .625rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--hover);font-family:"Poppins",sans-serif;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--font-sub);flex-shrink:0;transition:background .12s,border-color .12s,color .12s;max-width:10rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ov-coll-btn:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.ov-add-card:hover{border-color:var(--main);background:var(--main-sub)}
.ov-add-card:hover span{opacity:.9!important}
/* Header overview button */
.ov-header-btn{width:2rem;height:2rem;border-radius:.5rem;border:none;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--font-sub);transition:background .1s,color .1s;flex-shrink:0}
.ov-header-btn:hover{background:var(--hover);color:var(--main)}
.ov-header-btn .material-icons-outlined{font-size:1.125rem}
/* ── Class check widget ── */
.cc-heading{font-size:1.3em;font-weight:700;color:var(--font);line-height:1.25}
.cc-input{width:100%;padding:.5em .85rem;border:1.5px solid var(--border);border-radius:.625rem;font-family:"Poppins",sans-serif;font-size:.95em;color:var(--font);background:var(--el);outline:none;transition:border-color .15s}
.cc-input:focus{border-color:var(--main)}
.cc-input:disabled{opacity:.55;background:var(--hover)}
/* Type selector — 2x2 grid */
.cc-type-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.4rem;flex:1;min-height:0}
.cc-type-btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:.4em .5rem;border-radius:.625rem;border:none;font-family:"Poppins",sans-serif;font-size:1.1em;font-weight:700;cursor:pointer;transition:background .14s,color .14s;background:#e8eef0;color:#5d7075}
.cc-type-btn:hover:not(.cc-type-on){background:#dce6e8}
.cc-type-on{background:var(--main)!important;color:#fff!important}
.cc-waiting-row{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1.1em;font-weight:700;color:var(--font);padding:.25rem 0}
.cc-btn-disabled{opacity:.4;cursor:not-allowed!important}
/* Visa live button */
.cc-btn-live{display:none} /* replaced by cc-btn-secondary */
.cc-btn-secondary{height:2.4em;padding:0 .75rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--hover);color:var(--font-sub);font-family:"Poppins",sans-serif;font-size:.85em;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .14s,border-color .14s,color .14s;min-width:0}
.cc-btn-secondary:hover{border-color:var(--main);color:var(--main);background:var(--main-sub)}
.cc-btn-sec-on{border-color:var(--main)!important;color:var(--main)!important;background:var(--main-sub)!important}
.cc-btn-live-on{background:var(--main)!important;color:#fff!important;border-color:var(--main)!important}
/* Actions row — flex-wrap so all buttons fit */
/* Pad right so buttons clear the widget-grip (2rem wide + .5rem offset = 2.5rem from edge) */
.cc-actions{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;margin-top:auto;padding-right:1.75rem}
/* Live results overlay on student screen */
.cc-live-backdrop{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:99996;width:min(92vw,30rem);pointer-events:none}
.cc-live-panel{background:rgba(15,25,30,.88);backdrop-filter:blur(16px);border-radius:1.25rem;padding:1.25rem 1.5rem;box-shadow:0 1rem 3rem rgba(0,0,0,.4);pointer-events:auto}
.cc-live-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.cc-live-pulse{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;font-weight:700;color:#e05252;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.cc-live-question{flex:1;font-size:.9375rem;font-weight:600;color:#fff;line-height:1.3}
.cc-live-count{font-size:.6875rem;color:rgba(255,255,255,.5);white-space:nowrap}
.cc-live-results{color:#fff}
/* Yes/No live */
.cc-live-yesno{display:flex;height:4.5rem;border-radius:.75rem;overflow:hidden}
.cc-live-half{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:flex .6s}
.cc-live-yes{background:#52b788}.cc-live-no{background:#e05252}
.cc-live-sep{width:2px;background:rgba(255,255,255,.4);flex-shrink:0}
.cc-live-half-num{font-size:1.75rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cc-live-half-lbl{font-size:.6rem;font-weight:700;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.06em}
.cc-live-pcts{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;margin-top:.375rem}
/* Mood live */
.cc-live-mood{display:flex;justify-content:space-around;align-items:flex-end;height:7rem;padding-bottom:.25rem}
.cc-live-mood-col{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1}
.cc-live-emoji{font-size:1.75rem;line-height:1}
.cc-live-num{font-size:1.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cc-live-bar-v-wrap{width:2rem;flex:1;background:rgba(255,255,255,.12);border-radius:.375rem .375rem 0 0;display:flex;align-items:flex-end;margin:0 auto}
.cc-live-bar-v{width:100%;border-radius:.375rem .375rem 0 0;min-height:4px;transition:height .5s}
.cc-live-lbl{font-size:.875rem;color:rgba(255,255,255,.75);font-weight:600;text-align:center}
/* Choice live */
.cc-live-choice{display:flex;flex-direction:column;gap:.5rem}
.cc-live-choice-row{display:flex;align-items:center;gap:.5rem}
.cc-live-choice-tag{width:1.375rem;height:1.375rem;border-radius:.3125rem;color:#fff;font-size:.6875rem;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.cc-live-choice-bar-wrap{flex:1;height:.5rem;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden}
.cc-live-choice-bar{height:100%;border-radius:99px;transition:width .5s}
.cc-live-choice-text{font-size:.9375rem;color:rgba(255,255,255,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cc-live-choice-cnt{font-size:.8125rem;font-weight:700;color:#fff;width:1.5rem;text-align:right;flex-shrink:0}
/* Scale live */
.cc-live-scale{text-align:center}
.cc-live-avg{font-size:3rem;font-weight:800;color:#39b0bb;line-height:1;font-variant-numeric:tabular-nums}
.cc-live-avg-lbl{font-size:.75rem;color:rgba(255,255,255,.5);margin-bottom:.5rem}
.cc-live-hist{display:flex;align-items:flex-end;gap:2px;height:5rem}
.cc-live-hist-bar{flex:1;background:#39b0bb;border-radius:.1875rem .1875rem 0 0;opacity:.75;min-height:4px;transition:height .4s}
.cc-live-hist-axis{display:flex;justify-content:space-between;font-size:.5625rem;color:rgba(255,255,255,.4);margin-top:.25rem}
/* Student idle/result states */
.cc-st-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:.5rem;text-align:center;padding:1rem}
.cc-st-icon{font-size:clamp(2rem,14cqw,5rem);line-height:1}
.cc-st-brand{font-size:clamp(1.125rem,7cqw,3rem);font-weight:800;color:var(--main);letter-spacing:-.02em}
.cc-st-sub{font-size:clamp(.6875rem,3.5cqw,1.125rem);color:var(--font-sub)}
.cc-st-pulse-ring{width:clamp(2.5rem,15cqw,5rem);height:clamp(2.5rem,15cqw,5rem);border-radius:50%;border:3px solid var(--main);opacity:.5;animation:cc-ring-pulse 1.4s ease-in-out infinite}
@keyframes cc-ring-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:.25}}
.cc-st-result{display:flex;flex-direction:column;gap:.5rem;flex:1}
.cc-st-q{font-size:clamp(.8125rem,4.5cqw,1.5rem);font-weight:600;color:var(--font);line-height:1.3}
.cc-st-done{font-size:clamp(.625rem,2.5cqw,.875rem);color:#52b788;font-weight:600;text-align:center;margin-top:auto}
.cc-live-pill{display:inline-flex;align-items:center;gap:.25rem;background:#fef2f2;border-radius:99px;padding:.1875rem .625rem;font-size:clamp(.625rem,3cqw,.875rem);font-weight:700;color:#e05252;white-space:nowrap;flex-shrink:0}
.cc-live-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:#e05252;animation:cc-pulse 1.1s ease-in-out infinite}
@keyframes cc-pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Scale histogram */
.cc-scale-result{display:flex;flex-direction:column;gap:.25rem}
.cc-scale-avg{font-size:clamp(1.5rem,16cqw,6rem);font-weight:800;color:var(--main);text-align:center;line-height:1;font-variant-numeric:tabular-nums}
.cc-scale-avg-lbl{font-size:clamp(.6875rem,3cqw,1.125rem);color:var(--font-sub);text-align:center}
.cc-hist{display:flex;align-items:flex-end;gap:2px;height:2.75rem;padding:.125rem 0}
.cc-hist-bar{flex:1;background:var(--main);border-radius:.1875rem .1875rem 0 0;opacity:.75;min-height:4px;transition:height .4s}
.cc-hist-axis{display:flex;justify-content:space-between;font-size:.5625rem;color:var(--font-sub)}
/* Student slider */
.cc-slider-wrap{display:flex;flex-direction:column;gap:.75rem;padding:.5rem 0}
.cc-slider{width:100%;-webkit-appearance:none;appearance:none;height:.375rem;border-radius:99px;background:linear-gradient(to right,var(--main) 50%,var(--border) 50%);outline:none;cursor:pointer}
.cc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--main);box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
.cc-slider::-moz-range-thumb{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--main);border:none;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.cc-slider-val{font-size:2.25rem;font-weight:800;color:var(--main);text-align:center;line-height:1;font-variant-numeric:tabular-nums}
.cc-slider-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--font-sub)}
.cc-send-btn{width:100%;height:2.75rem;border-radius:var(--r-full);border:none;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s}
.cc-send-btn:hover{opacity:.88}
.cc-battle{display:flex;height:clamp(3.5rem,20cqh,8rem);border-radius:.875rem;overflow:hidden;flex-shrink:0}
.cc-half{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:flex .65s cubic-bezier(.4,0,.2,1);min-width:2.5rem;padding:.25rem .5rem}
.cc-yes-half{background:#52b788}
.cc-no-half{background:#e05252}
.cc-battle-sep{width:3px;background:rgba(255,255,255,.6);flex-shrink:0}
.cc-half-num{font-size:clamp(1.5rem,10cqw,4.5rem);font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cc-half-lbl{font-size:clamp(.6rem,3cqw,1.25rem);font-weight:700;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.06em}
.cc-pct-row{display:flex;align-items:center;justify-content:space-between;font-size:clamp(.6875rem,3cqw,1rem);font-variant-numeric:tabular-nums}
.cc-pct-yes{font-weight:700;color:#52b788}
.cc-pct-no{font-weight:700;color:#e05252}
.cc-total{color:var(--font-sub);font-size:clamp(.625rem,2.5cqw,.875rem)}
.cc-empty-state{display:flex;flex-direction:column;gap:.375rem}
.cc-empty-halves{display:flex;gap:.5rem;height:4rem}
.cc-empty-half{flex:1;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600}
.cc-empty-yes{background:rgba(82,183,136,.12);color:#52b788;border:1.5px dashed rgba(82,183,136,.35)}
.cc-empty-no{background:rgba(224,82,82,.1);color:#e05252;border:1.5px dashed rgba(224,82,82,.3)}
.cc-waiting{text-align:center;font-size:.75rem;color:var(--font-sub)}
.cc-btn{flex:1;height:clamp(2.4rem,min(8cqw,11cqh),4.5rem);border-radius:var(--r-full);border:none;font-family:"Poppins",sans-serif;font-size:clamp(.95rem,min(4.8cqw,9.5cqh),2.1rem);font-weight:700;cursor:pointer;transition:opacity .15s,background .15s}
.cc-btn:hover{opacity:.88}
.cc-btn-ask{background:var(--main);color:#fff}
.cc-btn-stop{background:#e05252;color:#fff}
.cc-btn-reset{width:clamp(2.125rem,min(9cqw,13cqh),4rem);height:clamp(2.125rem,min(9cqw,13cqh),4rem);border-radius:50%;border:1px solid var(--border);background:var(--hover);color:var(--font-sub);font-size:clamp(1rem,min(4.5cqw,6cqh),1.8rem);cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .12s}
.cc-btn-reset:hover{background:var(--border)}
.cc-btn-detail{width:2.125rem;height:2.125rem;border-radius:50%;border:1px solid var(--border);background:var(--hover);color:var(--font-sub);font-size:.9rem;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .12s}
.cc-btn-detail:hover{background:var(--main-sub);border-color:var(--main)}
.cc-btn-hist{width:2.125rem;height:2.125rem;border-radius:50%;border:1px solid var(--border);background:var(--hover);color:var(--font-sub);font-size:.85rem;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .12s}
.cc-btn-hist:hover{background:var(--main-sub);border-color:var(--main)}
.cc-hist-pill{width:100%;margin-top:.375rem;padding:.4375rem .75rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--hover);font-family:"Poppins",sans-serif;font-size:clamp(.8125rem,min(3.5cqw,6cqh),1.3rem);font-weight:600;color:var(--font-sub);cursor:pointer;transition:background .13s,border-color .13s,color .13s;text-align:center}
.cc-hist-pill:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
/* History modal entries */
.cc-hist-entry{padding:.875rem 0;border-bottom:1px solid var(--divider)}
.cc-hist-entry:last-child{border-bottom:none}
.cc-hist-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.cc-hist-ago{font-size:.6875rem;color:var(--font-sub)}
.cc-hist-type{font-size:.625rem;font-weight:600;background:var(--main-sub);color:var(--main);border-radius:99px;padding:.0625rem .4375rem;text-transform:uppercase;letter-spacing:.04em}
.cc-hist-q{font-size:.9375rem;font-weight:600;color:var(--font);margin-bottom:.375rem;line-height:1.35}
.cc-hist-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cc-hist-summary{font-size:.8125rem;color:var(--font-sub)}
.cc-hist-detail-btn{font-size:.75rem;background:var(--hover);border:1px solid var(--border);border-radius:99px;padding:.1875rem .625rem;cursor:pointer;color:var(--font-sub);font-family:"Poppins",sans-serif;transition:background .12s;flex-shrink:0}
.cc-hist-detail-btn:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.cc-hist-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.625rem}
.cc-hist-ask-again{flex-shrink:0;height:2rem;padding:0 .875rem;border-radius:99px;border:1.5px solid var(--main);background:transparent;color:var(--main);font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .13s,color .13s;white-space:nowrap}
.cc-hist-ask-again:hover{background:var(--main);color:#fff}
.cc-hist-sessions{display:flex;flex-direction:column;gap:.5rem;padding-left:.875rem;border-left:2px solid var(--divider)}
.cc-hist-session{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.cc-hist-session-meta{display:flex;gap:.375rem;align-items:center;flex-shrink:0}
.cc-hist-session-summ{flex:1;font-size:.8125rem;color:var(--font)}
/* Larger input with placeholder as heading */
.cc-input-q{font-size:clamp(.9rem,4.4cqw,1.6rem)!important;font-weight:700!important;color:#1a1a1a!important;background:#fff!important;padding:clamp(.4rem,2cqh,.75rem) .75rem!important}
.cc-input-q::placeholder{color:#9aa7ab;font-weight:500}
/* Question tool inside Lärarens verktyg: fixed compact sizes (the widget's cq-units balloon in the wide menu) */
/* Question tool: drop the widget chrome so the controls sit directly on the menu */
#question-widget-container .widget{background:none!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important;overflow:visible!important;min-width:0;min-height:0;transform:none!important}
#question-widget-container .widget-body{background:none!important;padding:0!important;overflow:visible!important;color:inherit!important}
#question-widget-container .widget-head,#question-widget-container .widget-grip,#question-widget-container .widget-touch-bar{display:none!important}
#question-widget-container .widget,#question-widget-container .widget:hover{outline:none!important}
/* Question tool design */
#question-widget-container .widget-body{gap:.9rem!important}
#question-widget-container .cc-input-q{background:#fff!important;border:1.5px solid #dfe6e8!important;border-radius:.875rem!important;font-size:1rem!important;font-weight:600!important;padding:.7rem 1rem!important;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}
#question-widget-container .cc-input-q:focus{border-color:var(--main)!important;box-shadow:0 0 0 3px rgba(57,176,187,.18)}
#question-widget-container .cc-type-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:.5rem;flex:none}
#question-widget-container .cc-type-btn{font-size:.85rem;font-weight:600;padding:.65rem .5rem;border-radius:.875rem;background:#f1f5f6;color:#5d7075;transition:background .14s,color .14s,box-shadow .14s}
#question-widget-container .cc-type-btn:hover:not(.cc-type-on){background:#e3ecee}
#question-widget-container .cc-type-on{box-shadow:0 4px 12px rgba(57,176,187,.32)}
#question-widget-container .cc-opt-inp,#question-widget-container .cc-mood-lbl-inp{border:1.5px solid #dfe6e8;border-radius:.75rem;padding:.55rem .8rem;font-size:.9rem;background:#fff;outline:none}
#question-widget-container .cc-opt-inp:focus,#question-widget-container .cc-mood-lbl-inp:focus{border-color:var(--main);box-shadow:0 0 0 3px rgba(57,176,187,.18)}
#question-widget-container .cc-actions-wrap{margin-top:.25rem!important;gap:.5rem!important}
#question-widget-container .cc-btn{height:2.75rem;font-size:.95rem;border-radius:999px}
#question-widget-container .cc-btn-ask{box-shadow:0 6px 16px rgba(57,176,187,.35)}
#question-widget-container .cc-btn-stop{box-shadow:0 6px 16px rgba(224,82,82,.3)}
#question-widget-container .cc-btn-reset{width:2.75rem;height:2.75rem;font-size:1.1rem}
#question-widget-container .cc-btn-secondary{height:2.5rem;font-size:.85rem}
/* Realtidskoll inside Lärarens verktyg: fixed-size box (the widget derives its font size from its own box), no widget chrome */
#comp-tool-container{height:34rem;max-width:38rem;position:relative}
#comp-tool-container .widget-body{font-size:15px!important}
#comp-tool-container .comp-idle-head{display:none}
#comp-tool-container .comp-mode-cards{flex-grow:0;flex-shrink:0}
#comp-tool-container .comp-mode-card{padding:.7em}
#comp-tool-container .widget,#comp-tool-container .widget:hover{background:none!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important;outline:none!important;transform:none!important}
#comp-tool-container .widget-head,#comp-tool-container .widget-grip,#comp-tool-container .widget-touch-bar{display:none!important}
/* Detail modal */
.cc-detail-backdrop{position:fixed;inset:0;z-index:99997;background:rgba(10,20,25,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.cc-detail-panel{background:#fff;border-radius:1.25rem;width:100%;max-width:28rem;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 1.5rem 4rem rgba(0,0,0,.25);overflow:hidden}
.cc-detail-head{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--divider);flex-shrink:0}
.cc-detail-title{flex:1;font-size:.9375rem;font-weight:600;color:var(--font);line-height:1.4}
.cc-detail-count{font-size:.75rem;font-weight:400;color:var(--font-sub);margin-left:.375rem}
.cc-detail-close{width:2rem;height:2rem;border-radius:50%;border:none;background:var(--hover);cursor:pointer;font-size:1.125rem;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0;transition:background .12s}
.cc-detail-close:hover{background:var(--border)}
.cc-detail-body{padding:1rem 1.25rem;overflow-y:auto;flex:1}
.cc-detail-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cc-detail-col{display:flex;flex-direction:column;gap:.375rem}
.cc-detail-col-hd{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .5rem;border-radius:.375rem;margin-bottom:.125rem}
.cc-yes-hd{background:rgba(82,183,136,.12);color:#52b788}
.cc-no-hd{background:rgba(224,82,82,.1);color:#e05252}
.cc-detail-name-item{font-size:.875rem;color:var(--font);padding:.2rem .5rem;border-radius:.375rem;display:flex;align-items:center;gap:.4rem}
.cc-detail-yes-item{background:rgba(82,183,136,.07)}
.cc-detail-no-item{background:rgba(224,82,82,.07)}
.cc-detail-rows{display:flex;flex-direction:column;gap:.5rem}
.cc-detail-row{display:flex;align-items:center;gap:.625rem}
.cc-detail-name{font-size:.875rem;color:var(--font);width:8rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-detail-bar-wrap{flex:1;height:.625rem;background:var(--hover);border-radius:99px;overflow:hidden}
.cc-detail-bar{height:100%;background:var(--main);border-radius:99px;transition:width .4s}
.cc-detail-val{font-size:.875rem;font-weight:700;color:var(--main);width:1.5rem;text-align:right;flex-shrink:0}
.cc-detail-empty{font-size:.8125rem;color:var(--font-sub);padding:.25rem 0}
/* ── Fullscreen results modal (whole-class readable) ── */
.ccm-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(8,16,20,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:3vmin;animation:ccm-fade .18s ease}
@keyframes ccm-fade{from{opacity:0}to{opacity:1}}
.ccm-panel{position:relative;background:#fff;border-radius:2rem;width:100%;max-width:min(94vw,76rem);max-height:94vh;display:flex;flex-direction:column;gap:clamp(1.5rem,4vmin,3.5rem);padding:clamp(2rem,5vmin,4.5rem);box-shadow:0 2rem 6rem rgba(0,0,0,.45);overflow:hidden}
.ccm-close{position:absolute;top:1.25rem;right:1.25rem;width:3rem;height:3rem;border-radius:50%;border:none;background:var(--hover);color:var(--font-sub);font-size:1.75rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .12s,color .12s;z-index:2}
.ccm-close:hover{background:var(--border);color:var(--font)}
.ccm-question{font-size:clamp(1.75rem,5vmin,4rem);font-weight:800;color:#1a1a1a;line-height:1.15;text-align:center;padding:0 2.5rem}
.ccm-body{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}
.ccm-total{font-size:clamp(1.05rem,2.6vmin,1.9rem);font-weight:600;color:var(--font-sub);text-align:center}
/* Yes / No */
.ccm-battle{display:flex;width:100%;height:min(50vh,32rem);gap:.5rem}
.ccm-half{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vmin;transition:flex .7s cubic-bezier(.4,0,.2,1);min-width:6rem;border-radius:1.5rem}
.ccm-yes{background:#52b788}.ccm-no{background:#e05252}
.ccm-half-num{font-size:clamp(3.5rem,17vmin,13rem);font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.ccm-half-lbl{font-size:clamp(1.25rem,4vmin,3rem);font-weight:700;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.05em}
.ccm-half-pct{font-size:clamp(1rem,3vmin,2.1rem);font-weight:700;color:rgba(255,255,255,.85)}
/* Mood */
.ccm-mood{display:flex;justify-content:center;align-items:flex-end;gap:clamp(1.5rem,6vmin,5.5rem);width:100%;height:min(56vh,36rem)}
.ccm-mood-col{display:flex;flex-direction:column;align-items:center;gap:1.4vmin;height:100%;justify-content:flex-end;flex:1;max-width:15rem}
.ccm-mood-cnt{font-size:clamp(2.25rem,9vmin,7rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ccm-mood-bar-wrap{width:clamp(3.5rem,11vmin,9rem);flex:1;background:var(--hover);border-radius:1rem 1rem 0 0;display:flex;align-items:flex-end;overflow:hidden;min-height:1rem}
.ccm-mood-bar{width:100%;border-radius:1rem 1rem 0 0;min-height:6px;transition:height .6s cubic-bezier(.4,0,.2,1)}
.ccm-mood-emoji{font-size:clamp(2.75rem,10vmin,7.5rem);line-height:1}
.ccm-mood-lbl{font-size:clamp(1.05rem,3.2vmin,2.1rem);font-weight:700;color:#1a1a1a;text-align:center}
/* Choice */
.ccm-choice{display:flex;flex-direction:column;gap:clamp(1rem,2.8vmin,2.25rem);width:100%}
.ccm-choice-row{display:flex;align-items:center;gap:clamp(1rem,2.6vmin,2rem)}
.ccm-choice-tag{width:clamp(2.75rem,7vmin,5rem);height:clamp(2.75rem,7vmin,5rem);border-radius:1rem;color:#fff;font-size:clamp(1.25rem,4vmin,2.5rem);font-weight:800;display:grid;place-items:center;flex-shrink:0}
.ccm-choice-text{font-size:clamp(1.1rem,3vmin,2.25rem);font-weight:600;color:#1a1a1a;width:clamp(7rem,22vw,20rem);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccm-choice-bar-wrap{flex:1;height:clamp(1.75rem,4.5vmin,3.25rem);background:var(--hover);border-radius:99px;overflow:hidden}
.ccm-choice-bar{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:.5rem}
.ccm-choice-num{font-size:clamp(1.5rem,5vmin,3.5rem);font-weight:800;color:#1a1a1a;width:clamp(2.5rem,6vmin,4.5rem);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.ccm-choice-pct{font-size:clamp(1rem,2.7vmin,1.8rem);font-weight:600;color:var(--font-sub);width:clamp(3rem,7vmin,5rem);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
/* Scale */
.ccm-scale{display:flex;flex-direction:column;align-items:center;gap:1.5vmin;width:100%}
.ccm-scale-avg{font-size:clamp(4.5rem,22vmin,17rem);font-weight:800;color:var(--main);line-height:.9;font-variant-numeric:tabular-nums}
.ccm-scale-avg-lbl{font-size:clamp(1.2rem,3.4vmin,2.4rem);font-weight:600;color:var(--font-sub)}
.ccm-hist{display:flex;align-items:flex-end;gap:clamp(.4rem,1.4vmin,1.1rem);height:min(28vh,17rem);width:100%;max-width:52rem;margin-top:1.5vmin}
.ccm-hist-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.8vmin;height:100%;justify-content:flex-end}
.ccm-hist-bar{width:100%;background:var(--main);border-radius:.5rem .5rem 0 0;opacity:.85;min-height:4px;transition:height .5s}
.ccm-hist-tick{font-size:clamp(.8rem,2.1vmin,1.35rem);font-weight:600;color:var(--font-sub)}
/* Modal footer + project-to-students button */
.ccm-foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.ccm-fs-btn{border:none;border-radius:99px;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:clamp(1rem,2.5vmin,1.7rem);font-weight:700;padding:clamp(.7rem,1.9vmin,1.3rem) clamp(1.25rem,3.2vmin,2.6rem);cursor:pointer;transition:opacity .15s,background .15s}
.ccm-fs-btn:hover{opacity:.9}
.ccm-fs-on{background:#e05252}
/* Student fullscreen variant — no close button, slightly stronger dim */
.ccm-student{background:rgba(8,16,20,.82);z-index:99990}
.ccm-student .ccm-total{width:100%}
/* Multiple choice */
.cc-opts{display:flex;flex-direction:column;gap:.375rem}
.cc-opt-row{display:flex;align-items:center;gap:.45rem}
.cc-opt-tag{width:clamp(1.75rem,min(9cqw,13cqh),3.2rem);height:clamp(1.75rem,min(9cqw,13cqh),3.2rem);border-radius:.375rem;color:#fff;font-size:clamp(.875rem,min(5cqw,8cqh),2rem);font-weight:700;display:grid;place-items:center;flex-shrink:0}
.cc-opt-inp{flex:1;min-width:0;padding:.3125rem .5rem;border:1.5px solid var(--border);border-radius:.5rem;font-family:"Poppins",sans-serif;font-size:clamp(.8125rem,min(4.6cqw,7.5cqh),1.9rem);outline:none;transition:border-color .14s}
.cc-opt-inp:focus{border-color:var(--main)}
.cc-opt-del{width:clamp(1.5rem,min(8cqw,12cqh),2.8rem);height:clamp(1.5rem,min(8cqw,12cqh),2.8rem);border-radius:50%;border:none;background:var(--hover);color:var(--font-sub);cursor:pointer;display:grid;place-items:center;font-size:clamp(.875rem,min(5cqw,8cqh),1.8rem);flex-shrink:0}
.cc-opt-del:hover{background:#fef2f2;color:#e05252}
.cc-opt-add{width:100%;padding:.4rem;border:1.5px dashed var(--border);border-radius:.5rem;background:transparent;font-family:"Poppins",sans-serif;font-size:clamp(.78rem,min(4cqw,6.5cqh),1.6rem);color:var(--font-sub);cursor:pointer;transition:border-color .14s,color .14s}
.cc-opt-add:hover{border-color:var(--main);color:var(--main)}
/* Choice result bars */
.cc-choice-result{display:flex;flex-direction:column;gap:.45rem}
.cc-cr-row{display:flex;align-items:center;gap:.45rem}
.cc-cr-lbl{width:clamp(1.625rem,min(8.5cqw,12cqh),3rem);height:clamp(1.625rem,min(8.5cqw,12cqh),3rem);border-radius:.375rem;color:#fff;font-size:clamp(.875rem,min(5cqw,8cqh),1.9rem);font-weight:700;display:grid;place-items:center;flex-shrink:0}
.cc-cr-bar-wrap{flex:1;height:clamp(.5rem,min(2.4cqw,4cqh),1.1rem);background:var(--hover);border-radius:99px;overflow:hidden}
.cc-cr-bar{height:100%;border-radius:99px;transition:width .5s}
.cc-cr-num{font-size:clamp(.8125rem,min(4.6cqw,7.5cqh),1.9rem);font-weight:700;color:var(--font);min-width:1.5rem;text-align:right;flex-shrink:0}
.cc-cr-text{font-size:clamp(.78rem,min(4.2cqw,6.8cqh),1.7rem);color:var(--font-sub);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Mood result */
.cc-mood-result{display:flex;justify-content:space-around;padding:.5rem 0}
.cc-mood-res-col{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.cc-mood-res-emoji{font-size:clamp(1.75rem,10cqw,3.5rem);line-height:1}
.cc-mood-res-cnt{font-size:clamp(1.25rem,8cqw,2.5rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cc-mood-res-lbl{font-size:clamp(.875rem,min(4.2cqw,6.5cqh),1.9rem);color:var(--font-sub);font-weight:600}
/* Student choice/mood overlays */
.cc-choice-list{display:flex;flex-direction:column;gap:.625rem}
.cc-choice-btn{display:flex;align-items:center;gap:.875rem;padding:.75rem 1rem;border-radius:.875rem;border:2px solid var(--border);background:#fff;font-family:"Poppins",sans-serif;cursor:pointer;text-align:left;transition:border-color .14s,background .14s}
.cc-choice-btn:hover{background:var(--hover)}
.cc-choice-lbl{width:1.75rem;height:1.75rem;border-radius:.4375rem;background:var(--main);color:#fff;font-size:.875rem;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.cc-choice-text{font-size:1rem;font-weight:500;color:var(--font)}
.cc-mood-row{display:flex;justify-content:space-around;padding:.5rem 0}
.cc-mood-btn{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.75rem 1.25rem;border-radius:1rem;border:none;background:var(--hover);cursor:pointer;transition:background .14s,transform .14s}
.cc-mood-btn:hover{transform:scale(1.08)}
.cc-mood-emoji{font-size:2.5rem;line-height:1}
.cc-mood-lbl{font-size:1rem;font-weight:600;color:var(--font-sub);font-family:"Poppins",sans-serif}
/* Mood label editor in teacher widget */
.cc-mood-lbl-editor{display:flex;gap:.5rem}
.cc-mood-lbl-row{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.cc-mood-lbl-emoji{font-size:clamp(1.5rem,min(8cqw,12cqh),3.2rem);line-height:1}
.cc-mood-lbl-inp{width:100%;padding:.3rem .375rem;border:1.5px solid var(--border);border-radius:.5rem;font-family:"Poppins",sans-serif;font-size:clamp(.75rem,min(4cqw,6.5cqh),1.6rem);text-align:center;outline:none;transition:border-color .14s}
.cc-mood-lbl-inp:focus{border-color:var(--main)}
/* Selected / unselected state in student overlay */
.cc-mood-btn.cc-sel{background:#e8f7f0;box-shadow:0 0 0 2.5px #52b788;transform:scale(1.1)}
.cc-mood-btn.cc-unsel{opacity:.4}
.cc-choice-btn.cc-sel{border-color:var(--main);background:var(--main-sub)}
.cc-choice-btn.cc-sel .cc-choice-lbl{background:var(--main)}
.cc-choice-btn.cc-unsel{opacity:.45}
/* Freetext comment field in overlay */
.cc-freetext{width:100%;margin-top:.75rem;padding:.5rem .75rem;border:1.5px solid var(--border);border-radius:.75rem;font-family:"Poppins",sans-serif;font-size:.875rem;resize:none;outline:none;transition:border-color .14s;color:var(--font)}
.cc-freetext:focus{border-color:var(--main)}
/* Freetext section in detail modal */
.cc-ft-section{margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--divider)}
.cc-ft-heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--font-sub);margin-bottom:.5rem}
.cc-ft-row{display:flex;gap:.5rem;padding:.375rem 0;border-bottom:1px solid var(--divider)}
.cc-ft-row:last-child{border-bottom:none}
.cc-ft-name{font-size:.8125rem;font-weight:600;color:var(--font);white-space:nowrap;width:6rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis}
.cc-ft-text{font-size:.8125rem;color:var(--font);flex:1;line-height:1.4}
/* Student check overlay */
.cc-overlay{position:fixed;inset:0;z-index:99998;background:rgba(10,20,25,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.cc-card{background:#fff;border-radius:1.75rem;padding:2rem 1.75rem;max-width:22rem;width:100%;box-shadow:0 2rem 5rem rgba(0,0,0,.3);text-align:center}
.cc-card-q{font-size:1.1875rem;font-weight:700;color:#111;margin-bottom:1.625rem;line-height:1.35}
.cc-ans-row{display:flex;gap:.875rem}
.cc-ans-btn{flex:1;height:5.5rem;border-radius:1.25rem;border:none;font-family:"Poppins",sans-serif;font-size:1.375rem;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;transition:transform .15s,box-shadow .15s;user-select:none}
.cc-ans-btn:hover{transform:scale(1.04);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18)}
.cc-ans-btn:active{transform:scale(.96)}
.cc-yes-btn{background:#52b788;color:#fff}
.cc-no-btn{background:#e05252;color:#fff}
.cc-ans-btn.cc-picked{box-shadow:0 0 0 4px rgba(0,0,0,.2),0 .5rem 1.5rem rgba(0,0,0,.15)}
.cc-ans-btn.cc-dim{opacity:.4;transform:none!important;cursor:default}
.cc-ans-icon{font-size:1.625rem;line-height:1}
.cc-ans-label{font-size:.875rem;letter-spacing:.02em}
.cc-thanks{font-size:.8125rem;color:#6b7280;margin-top:1rem;font-weight:500}
/* Noise meter */
.nm-vu-wrap{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:clamp(.6rem,3cqi,1.2rem);box-sizing:border-box;gap:clamp(.4rem,2cqi,.8rem)}
.nm-vu-row{display:flex;align-items:stretch;justify-content:center;gap:clamp(.4rem,2.5cqi,1rem);flex:1;width:100%;min-height:0}
.nm-vu-track{position:relative;flex:1;width:clamp(38px,22cqi,72px);min-height:0;border-radius:999px;background:var(--bg,#f1f5f9);border:2px solid var(--border);overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.06)}
.nm-fill{position:absolute;bottom:0;left:0;right:0;height:0%;border-radius:inherit;background:linear-gradient(to top,hsl(142,71%,50%),hsl(142,71%,65%));transition:height .08s linear}
.nm-glow{position:absolute;inset:3px;border-radius:inherit;pointer-events:none;transition:box-shadow .3s ease}
.nm-threshold-mark{position:absolute;left:0;right:0;height:2px;background:rgba(220,50,50,.55);pointer-events:none;transition:bottom .2s ease}
.nm-threshold-mark::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:rgba(220,50,50,.7)}
.nm-threshold-tag{position:absolute;right:-2.4rem;top:50%;transform:translateY(-50%);font-size:clamp(.5rem,2.2cqi,.7rem);font-weight:700;color:rgba(220,50,50,.8);white-space:nowrap}
.nm-vu-info{display:flex;flex-direction:column;align-items:center;gap:.1rem;flex-shrink:0}
.nm-level-pct{font-size:clamp(1.2rem,7cqi,2.6rem);font-weight:800;color:var(--font);line-height:1;letter-spacing:-.02em}
.nm-level-label{font-size:clamp(.7rem,3.5cqi,1.1rem);font-weight:600;color:var(--font-sub)}
.nm-vu-controls{display:flex;align-items:center;gap:clamp(.4rem,2cqi,.8rem);flex-shrink:0;width:100%}
.nm-vu-threshold-row{display:flex;align-items:center;gap:.4rem;flex:1;min-width:0}
/* Noise meter – warning badge shown to the right of the level track */
.nm-warn-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;flex:1;min-width:0;opacity:0;pointer-events:none;transition:opacity .3s ease}
.nm-warn-badge.nm-warn-on{opacity:1}
.nm-warn-icon{font-size:clamp(1.1rem,9cqi,2.4rem);color:rgba(220,38,38,.9)}
.nm-warn-lbl{font-size:clamp(.55rem,3cqi,.85rem);font-weight:700;color:rgba(180,20,20,.85);text-align:center;letter-spacing:.02em}
.nm-pp-btn{width:clamp(2.1rem,11cqi,4.2rem);height:clamp(2.1rem,11cqi,4.2rem);border-radius:50%;border:1px solid var(--border);background:var(--el);cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.nm-threshold-slider{flex:1;height:clamp(.25rem,1.4cqi,.6rem);accent-color:#e53e3e;cursor:pointer}
.nm-threshold-lbl{font-size:clamp(.6rem,3cqi,.8rem);color:var(--font-sub);white-space:nowrap}
/* Mic selector popup */
.nm-mic-pop{position:fixed;z-index:15000;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.18);padding:.5rem;font-family:"Poppins",sans-serif;min-width:14rem;display:flex;flex-direction:column;gap:.25rem}
/* Opens on top of the group-split modal (.gs-backdrop is 999993) — .nm-mic-pop's own z-index (15000)
   would render it fully hidden behind the modal without this. Bug found 2026-09-17: this override
   only ever applied to .gs-recombine-pop's shuffle-again popover — _gsOpenTagPopover's per-group
   emoji/colour picker reuses .nm-mic-pop too but was never given a matching override, so it rendered
   behind the group-split modal (visible only after the modal itself closed) the whole time. */
.gs-recombine-pop{z-index:999996}
#gs-tag-pop{z-index:999996}

/* ── Random number widget ─────────────────────────── */
.rn-display{font-size:4rem;font-weight:700;color:var(--font);text-align:center;line-height:1;min-height:5rem;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;transition:transform .15s,color .15s}
.rn-roll-btn{padding:.625rem 1.5rem;border:none;border-radius:999px;background:var(--main);color:#fff;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .1s,opacity .1s}
.rn-roll-btn:hover{transform:scale(1.05)}
.rn-roll-btn:active{transform:scale(.95)}
.rn-history{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;max-width:100%;padding:.25rem 0;overflow-y:auto;max-height:6rem}
.rn-hist-chip{padding:.25rem .5rem;border-radius:999px;font-size:.75rem;font-weight:500;background:rgba(0,0,0,.08);color:var(--font-sub)}
.rn-hist-latest{font-weight:700;background:var(--main);color:#fff}
body.student-mode .rn-roll-btn{pointer-events:auto;cursor:pointer}
/* ── Flash cards widget ─────────────────────────────────────────────── */
.fc-head{display:flex;align-items:center;gap:.5rem}
.fc-head-ic{font-size:1.5rem;color:var(--main)}
.fc-head-txt{min-width:0}
.fc-head-name{font-size:1.1rem;font-weight:600;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-head-sub{font-size:.85rem;color:var(--font-sub)}
.fc-preview{display:flex;flex-wrap:wrap;gap:.3rem;overflow-y:auto;max-height:8rem}
.fc-chip{padding:.25rem .6rem;border-radius:var(--r-md);font-size:.85rem;font-weight:500;background:rgba(0,0,0,.07);color:var(--font-sub);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-chip-more{background:var(--main);color:#fff;font-weight:700}
.fc-empty{font-size:.9rem;color:var(--font-sub);padding:.25rem 0}
/* Buttons — clean rectangular, not pills */
.fc-btn{display:flex;align-items:center;justify-content:center;gap:.45em;padding:.6em 1.1em;border:none;border-radius:var(--r-md);font-family:inherit;font-size:1em;font-weight:600;cursor:pointer;transition:all .12s;pointer-events:auto;max-width:100%;box-sizing:border-box}
.fc-btn-primary{background:var(--main);color:#fff}
.fc-btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.fc-btn-secondary{background:var(--el);color:var(--font);border:1px solid var(--border)}
.fc-btn-secondary:hover{background:var(--hover);border-color:var(--main)}
.fc-btn-ghost{background:transparent;color:var(--font-sub)}
.fc-btn-ghost:hover{background:var(--hover);color:var(--font)}
.fc-actions{display:flex;gap:.45em;margin-top:auto}
.fc-actions .fc-btn{flex:1}
.fc-test-pick{width:min(24rem,calc(100vw - 2rem))}
.fc-tp-body{display:flex;flex-direction:column;gap:.4rem;padding:.75rem}
/* Test direction picker (glosförhör) */
.fc-test-dir{width:min(26rem,calc(100vw - 2rem))}
.fc-td-body{display:flex;flex-direction:column;gap:.6rem;padding:1rem}
.fc-td-opt{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--el);cursor:pointer;font-family:inherit;transition:all .12s;width:100%}
.fc-td-opt:hover{border-color:var(--main);background:#f0fbfc}
.fc-td-opt-sample{font-size:1.05rem;font-weight:600;color:var(--font);max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-td-arrow{font-size:1.2rem;color:var(--main);flex-shrink:0}
/* Empty state */
.fc-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:.5rem}
.fc-empty-ic{font-size:2.5rem;color:var(--main);opacity:.7}
.fc-empty-title{font-size:1.5rem;font-weight:700;color:var(--font)}
.fc-empty-hint{font-size:.95rem;color:var(--font-sub);max-width:16rem;line-height:1.4}
/* Student set list — sized well above the teacher's own equivalent (.fc-w-row-*, further down)
   since this is what a pupil reads off a shared classroom screen from their seat, where the
   widget has plenty of spare width/height to spend on legibility. */
.fc-set-list{display:flex;flex-direction:column;gap:.45em;overflow-y:auto;flex:1}
.fc-set-pick{display:flex;align-items:center;gap:.7em;padding:.85em 1em;border:1px solid var(--border);border-radius:var(--r-md);background:var(--el);cursor:pointer;font-family:inherit;transition:all .12s;pointer-events:auto;text-align:left;width:100%}
.fc-set-pick:hover{border-color:var(--main);background:#f0fbfc}
.fc-set-pick-ic{font-size:1.65em;color:var(--main);flex-shrink:0}
.fc-set-pick-name{flex:1;font-size:1.3rem;font-weight:600;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-set-pick-count{font-size:1.02rem;color:var(--font-sub);flex-shrink:0}
.fc-set-pick-arrow{font-size:1.5rem;color:var(--font-sub);flex-shrink:0}
/* Manage modal */
.fc-manage{width:min(46rem,calc(100vw - 2rem));max-height:min(85vh,44rem)}
.fc-mg-body{display:flex;gap:0;max-height:min(70vh,38rem)}
.fc-mg-sets{width:13rem;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:.5rem}
.fc-mg-sets-hdr{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--font-sub);padding:.25rem .5rem}
.fc-mg-setlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}
.fc-mg-set{display:flex;align-items:center;gap:.45rem;padding:.4rem .5rem;border-radius:var(--r-md);border:1.5px solid transparent;cursor:pointer;transition:background .1s}
.fc-mg-set:hover{background:var(--hover)}
.fc-mg-set.is-on{background:var(--hover);border-color:var(--main)}
.fc-mg-set-name{flex:1;font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-mg-set-count{font-size:.7rem;color:var(--font-sub);background:rgba(0,0,0,.07);border-radius:999px;padding:.05rem .4rem}
/* Toggle switch for activating sets */
.fc-mg-toggle{display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0;position:relative}
.fc-mg-toggle input{position:absolute;opacity:0;width:0;height:0}
.fc-mg-toggle-track{font-size:var(--asg-ctl,1em);width:2.25em;height:1.25em;border-radius:999px;background:#cbd5e1;transition:background .2s;position:relative}
.fc-mg-toggle-track::after{content:'';position:absolute;top:.125em;left:.125em;width:1em;height:1em;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.fc-mg-toggle input:checked + .fc-mg-toggle-track{background:var(--main)}
.fc-mg-toggle input:checked + .fc-mg-toggle-track::after{transform:translateX(1em)}
.fc-mg-card-actions{display:flex;gap:.4rem;margin-bottom:.5rem}
.fc-mg-newset,.fc-mg-newcard{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.5rem;border:1.5px dashed var(--border);border-radius:var(--r-md);background:transparent;color:var(--font-sub);font-family:inherit;font-size:.8rem;cursor:pointer;transition:background .1s,border-color .1s;flex:1}
.fc-mg-newset:hover,.fc-mg-newcard:hover{background:var(--hover);border-color:var(--main);color:var(--font)}
/* AI generate from text */
.fc-ai-gen{width:min(34rem,calc(100vw - 2rem))}
.fc-ai-body{padding:.75rem;display:flex;flex-direction:column;gap:.625rem}
.fc-ai-lang-row{display:flex;align-items:center;gap:.5rem}
.fc-ai-lang-inp{flex:1;min-width:0;height:2.25rem;padding:0 .625rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--el);color:var(--font);font-family:inherit;font-size:.85rem}
.asg-ai-count-inp{width:4rem;height:2rem;padding:0 .5rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--el);color:var(--font);font-family:inherit;font-size:.85rem;text-align:center}
.asg-ai-count-inp:focus{outline:none;border-color:var(--main)}
.fc-ai-lang-inp:focus{outline:none;border-color:var(--main)}
.fc-ai-lang-arrow{font-size:1rem;color:var(--font-sub);flex-shrink:0}
.fc-ai-textarea{width:100%;box-sizing:border-box;min-height:9rem;padding:.625rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--el);color:var(--font);font-family:inherit;font-size:.85rem;resize:vertical}
.fc-ai-textarea:focus{outline:none;border-color:var(--main)}
.fc-ai-err{font-size:.8rem;color:#c0392b;background:rgba(192,57,43,.08);border-radius:var(--r-md);padding:.5rem .625rem}
.fc-ai-spin{animation:fc-ai-spin 1s linear infinite}
@keyframes fc-ai-spin{to{transform:rotate(360deg)}}
/* Bulk import */
.fc-bulk{width:min(40rem,calc(100vw - 2rem))}
/* .fc-bi-body fills whatever height .sym-modal has left below its header, and clips there —
   .fc-bi-scroll (opts+table+add-row) is the part that actually scrolls, so however many rows a
   teacher adds, the Avbryt/Lägg till footer below it (.fc-ce-actions) stays put and visible
   instead of being pushed off the bottom of the fixed-height modal. */
.fc-bi-body{padding:.75rem;display:flex;flex-direction:column;gap:.5rem;flex:1;min-height:0;overflow:hidden}
.fc-bi-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}
.fc-bi-opts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.25rem;flex-shrink:0}
.fc-bi-opt-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fc-bi-opt-lbl{font-size:.72rem;font-weight:600;color:var(--font-sub);white-space:nowrap}
.asg-ai-slider{flex:1;max-width:12rem;accent-color:var(--main)}
.asg-ai-slider-hint{max-width:12rem;margin:-.375rem 0 0 auto}
.fc-bi-table-wrap{overflow-y:auto;max-height:24rem;border:1px solid var(--border);border-radius:var(--r-md)}
.fc-bi-table{width:100%;border-collapse:collapse;font-size:.85rem}
.fc-bi-th{padding:.4rem .5rem;text-align:left;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--font-sub);background:var(--hover);position:sticky;top:0;z-index:1}
.fc-bi-th-num{width:2rem;text-align:center;padding:.4rem .25rem}
.fc-bi-th-del{width:2rem}
.fc-bi-tr{border-top:1px solid var(--border)}
.fc-bi-tr:first-child{border-top:none}
.fc-bi-td{padding:.2rem .3rem}
.fc-bi-td-num{text-align:center;color:var(--font-sub);font-size:.72rem;font-weight:600;width:2rem}
.fc-bi-td-del{width:2rem;text-align:center}
.fc-bi-inp{width:100%;box-sizing:border-box;padding:.35rem .45rem;border:1px solid transparent;border-radius:var(--r-sm);font-family:inherit;font-size:.85rem;color:var(--font);background:transparent}
.fc-bi-inp:focus{outline:none;border-color:var(--main);background:var(--el)}
.fc-bi-del{border:none;background:transparent;color:var(--font-sub);cursor:pointer;padding:.2rem;border-radius:var(--r-sm);display:flex;align-items:center;transition:background .1s,color .1s}
.fc-bi-del:hover{background:#fee2e2;color:#dc2626}
.fc-bi-addrow{align-self:flex-start;display:flex;align-items:center;gap:.3rem;padding:.35rem .6rem;border:1px dashed var(--border);border-radius:var(--r-md);background:transparent;color:var(--font-sub);font-family:inherit;font-size:.78rem;cursor:pointer}
.fc-bi-addrow:hover{background:var(--hover);color:var(--font)}
/* Widget list header (teacher) */
.fc-w-head{display:flex;align-items:center;gap:.5rem;padding:0 .5rem .25rem;flex-shrink:0}
.fc-w-head-name{flex:1;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--font-sub)}
.fc-w-head-vis{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--font-sub);white-space:nowrap;flex-shrink:0}
/* Shared decorative widget-body title — Övningar/Uppgifter (any widget whose body has real content
   worth naming again beyond the small generic .widget-eyebrow in the head). */
.wgt-nice-title{display:flex;align-items:center;gap:.45em;font-size:1.35em;font-weight:700;color:var(--font);padding:0 .125em .5em;flex-shrink:0}
.wgt-nice-title .material-icons-outlined{font-size:1.1rem;color:var(--main)}
/* Widget list (teacher) — all sets with toggle sliders */
.fc-w-list{display:flex;flex-direction:column;gap:.3rem;overflow-y:auto;flex:1}
.fc-w-row{display:flex;align-items:center;gap:.5em;padding:.45em .45em;border-radius:var(--r-md);border:1px solid transparent;transition:background .12s;cursor:pointer}
.fc-w-row:hover{background:var(--hover)}
.fc-w-row.is-on{background:rgba(57,176,187,.08);border-color:rgba(57,176,187,.3)}
.fc-w-row-ic{font-size:1.3em;color:var(--main);flex-shrink:0}
.fc-w-row-name{flex:1;font-size:1em;font-weight:600;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-w-row-count{font-size:.8em;color:var(--font-sub);flex-shrink:0}
/* Widget action buttons (test + manage) */
.fc-w-btns{display:flex;gap:.5rem;padding:.25rem .5rem 0;flex-shrink:0}
.fc-w-btns .fc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem}
.fc-btn:disabled{opacity:.4;pointer-events:none}
/* Mode choice */
.fc-mode{width:min(24rem,calc(100vw - 2rem))}
.fc-md-body{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.fc-md-opt{display:flex;align-items:center;gap:.75rem;padding:.85rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--el);cursor:pointer;font-family:inherit;transition:all .12s;text-align:left}
.fc-md-opt:hover{border-color:var(--main);background:#f0fbfc}
.fc-md-ic{font-size:1.5rem;color:var(--main);flex-shrink:0}
.fc-md-txt{display:flex;flex-direction:column;gap:.1rem}
.fc-md-title{font-size:.95rem;font-weight:600;color:var(--font)}
.fc-md-desc{font-size:.78rem;color:var(--font-sub)}
/* Vocabulary test (glosförhör) */
.fc-test-modal{max-height:94vh}
.fc-test-stage{flex:1;overflow-y:auto;padding:.5rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;min-height:0}
.fc-test-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .5rem;border-radius:var(--r-md);border:1px solid transparent;transition:background .15s}
.fc-test-row.is-correct{background:#eafaf0;border-color:#bbf7d0}
.fc-test-row.is-wrong{background:#fdecec;border-color:#fecaca}
.fc-test-num{font-size:.75rem;font-weight:700;color:var(--font-sub);width:1.5rem;text-align:right;flex-shrink:0}
.fc-test-word{font-size:1rem;font-weight:600;color:var(--font);min-width:6rem;flex-shrink:0}
.fc-test-inp{flex:1;padding:.45rem .6rem;border:1px solid var(--border);border-radius:var(--r-md);font-family:inherit;font-size:.95rem;color:var(--font);background:var(--el)}
.fc-test-inp:focus{outline:none;border-color:var(--main)}
.fc-test-inp.is-correct{background:#dcfce7;border-color:#22c55e;color:#15803d}
.fc-test-inp.is-wrong{background:#fee2e2;border-color:#ef4444;color:#b91c1c}
.fc-test-result{flex-shrink:0;min-width:4rem;text-align:right}
.fc-test-correct{font-size:.85rem;font-weight:600;color:#16a34a}
.fc-test-ok{font-size:1.1rem;color:#16a34a}
.fc-test-foot{display:flex;justify-content:center;padding:.75rem 1.5rem 1.25rem;flex-shrink:0}
.fc-test-grade{padding:.65rem 2rem;font-size:1rem}
.fc-mg-cards{flex:1;display:flex;flex-direction:column;padding:.5rem;min-width:0}
.fc-mg-cards-hdr{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem}
.fc-mg-cards-title{font-size:.85rem;font-weight:600;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-mg-title-inp{flex:1;min-width:0;border:none;border-bottom:1.5px solid transparent;background:transparent;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--font);outline:none;padding:.125rem 0;cursor:text}
.fc-mg-title-inp:hover{border-bottom-color:var(--border)}
.fc-mg-title-inp:focus{border-bottom-color:var(--main)}
.fc-mg-cards-n{font-size:.72rem;font-weight:500;color:var(--font-sub)}
.fc-mg-active-badge{font-size:.62rem;font-weight:700;background:var(--main);color:#fff;border-radius:var(--r-sm);padding:.15rem .5rem;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.fc-mg-active-badge--off{background:rgba(0,0,0,.08);color:var(--font-sub)}
.fc-mg-cardlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}
.fc-mg-card{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--el)}
.fc-mg-card-kind{font-size:.6rem;font-weight:700;border-radius:var(--r-sm);padding:.1rem .4rem;text-transform:uppercase;letter-spacing:.02em;flex-shrink:0}
.fc-kind-flash{background:rgba(57,176,187,.15);color:#0d7a85}
.fc-kind-quiz{background:rgba(156,39,176,.15);color:#7b1fa2}
.fc-kind-type{background:rgba(251,140,0,.15);color:#e65100}
.fc-mg-card-label{flex:1;font-size:.8rem;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-mg-card-acts{display:flex;gap:.15rem;flex-shrink:0}
.fc-mg-card-btn{border:none;background:transparent;color:var(--font-sub);cursor:pointer;padding:.2rem;border-radius:var(--r-sm);display:flex;align-items:center;transition:background .1s,color .1s}
.fc-mg-card-btn:hover{background:var(--hover);color:var(--font)}
/* Reveal-mode segmented control */
.fc-mg-rmode-row{display:flex;flex-direction:column;gap:.35rem;padding:.35rem .5rem .5rem;border-bottom:1px solid var(--border);margin-bottom:.4rem}
.fc-mg-rmode-line{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fc-mg-rmode-lbl{font-size:.72rem;font-weight:600;color:var(--font-sub);white-space:nowrap}
.fc-mg-rmode-seg{display:flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.fc-mg-rmode-opt{border:none;padding:.3rem .6rem;font-family:inherit;font-size:.72rem;font-weight:600;color:var(--font-sub);background:transparent;cursor:pointer;transition:all .1s}
.fc-mg-rmode-opt:hover{background:var(--hover)}
.fc-mg-rmode-opt.is-on{background:var(--main);color:#fff}
/* Card editor */
.fc-card{width:min(28rem,calc(100vw - 2rem))}
.fc-ce-body{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.fc-ce-kinds{display:flex;gap:.35rem}
.fc-ce-kind{flex:1;padding:.45rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:transparent;color:var(--font-sub);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .1s}
.fc-ce-kind:hover{background:var(--hover)}
.fc-ce-kind.is-on{background:var(--main);border-color:var(--main);color:#fff}
.fc-ce-lbl{font-size:.72rem;font-weight:600;color:var(--font-sub);margin-top:.25rem}
.fc-ce-inp{width:100%;box-sizing:border-box;padding:.5rem .6rem;border:1px solid var(--border);border-radius:var(--r-md);font-family:inherit;font-size:.875rem;color:var(--font);background:var(--el)}
.fc-ce-inp:focus{outline:none;border-color:var(--main)}
.fc-ce-opt{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem}
.fc-ce-opt input[type=radio]{width:1.1rem;height:1.1rem;accent-color:var(--main);cursor:pointer;flex-shrink:0}
.fc-ce-opt-inp{flex:1}
.fc-ce-opt-del{border:none;background:transparent;color:var(--font-sub);cursor:pointer;padding:.2rem;border-radius:var(--r-sm);display:flex;flex-shrink:0}
.fc-ce-opt-del:hover:not(:disabled){background:var(--hover);color:#dc2626}
.fc-ce-opt-del:disabled{opacity:.3;cursor:not-allowed}
.fc-ce-addopt{align-self:flex-start;display:flex;align-items:center;gap:.3rem;padding:.35rem .6rem;border:1px dashed var(--border);border-radius:var(--r-md);background:transparent;color:var(--font-sub);font-family:inherit;font-size:.78rem;cursor:pointer}
.fc-ce-addopt:hover{background:var(--hover);color:var(--font)}
.fc-ce-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;flex-shrink:0}
/* Student review overlay — modal with margins, board visible around edges */
#fc-review-wrap{position:fixed;inset:0;z-index:2147483100;background:rgba(16,42,67,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vmin,3rem);font-family:"Poppins",sans-serif;color:#1a202c}
.fc-rv-modal{background:#eef1f5;border-radius:1.25rem;box-shadow:0 24px 64px rgba(16,42,67,.3);display:flex;flex-direction:column;width:min(56rem,100%);max-height:100%;overflow:hidden}
.fc-rv-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1rem 1.5rem;flex-shrink:0}
#fc-rv-close{justify-self:start}
.fc-rv-count{justify-self:center;font-size:1.6rem;font-weight:700;color:#1a202c;letter-spacing:.02em}
.fc-rv-setname{justify-self:end;text-align:right;font-size:.85rem;color:#8a9799;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12rem}
.fc-rv-hint{justify-self:end}
.fc-rv-hint-slot{min-height:2.5rem;display:flex;align-items:center;justify-content:center}
.fc-rv-hint-text{font-size:1.5rem;font-weight:700;letter-spacing:.15em;color:var(--main,#39b0bb);font-family:monospace}
.fc-rv-hint-text.fc-rv-hint-full{letter-spacing:normal;font-family:"Poppins",sans-serif;color:#16a34a}
.fc-rv-btn{border:none;background:rgba(0,0,0,.06);color:#546365;border-radius:50%;width:2.5rem;height:2.5rem;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.fc-rv-btn:hover{background:var(--main,#39b0bb);color:#fff;transform:scale(1.1)}
.fc-rv-btn:active{transform:scale(.92)}
.fc-rv-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 2rem;overflow-y:auto;min-height:0}
.fc-rv-card{width:min(34rem,90%);min-height:12rem;perspective:1200px;cursor:pointer}
.fc-rv-flash{position:relative;width:100%;min-height:12rem;transform-style:preserve-3d;transition:transform .4s}
.fc-rv-flash.is-flipped{transform:rotateY(180deg)}
.fc-rv-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:2rem;border-radius:1rem;backface-visibility:hidden;font-size:2.25rem;font-weight:700;text-align:center;line-height:1.2;box-shadow:0 8px 24px rgba(16,42,67,.15)}
.fc-rv-front{background:var(--main,#39b0bb);color:#fff}
.fc-rv-back{transform:rotateY(180deg);background:#fff;color:#1a202c;border:2px solid var(--main,#39b0bb)}
.fc-rv-prompt{font-size:1.75rem;font-weight:700;text-align:center;max-width:40rem;line-height:1.3;color:#1a202c}
.fc-rv-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.65rem;width:min(38rem,90%)}
.fc-rv-opt{padding:1.1rem 1.25rem;border:1.5px solid var(--border);border-radius:.9rem;background:#fff;color:#1a202c;font-family:inherit;font-size:1.2rem;font-weight:500;cursor:pointer;transition:all .12s;box-shadow:0 2px 8px rgba(16,42,67,.06)}
.fc-rv-opt:hover:not(:disabled){border-color:var(--main);background:#f0fbfc;transform:translateY(-2px)}
.fc-rv-opt:disabled{cursor:default}
.fc-rv-opt.is-correct{background:#eafaf0;border-color:#22c55e;color:#15803d}
.fc-rv-opt.is-wrong{background:#fdecec;border-color:#ef4444;color:#b91c1c}
.fc-rv-type{width:min(26rem,85%);padding:1rem 1.25rem;border:1.5px solid var(--border);border-radius:.75rem;background:#fff;color:#1a202c;font-family:inherit;font-size:1.4rem;text-align:center;box-shadow:0 2px 8px rgba(16,42,67,.06)}
.fc-rv-type::placeholder{color:#aab4b6}
.fc-rv-type:focus{outline:none;border-color:var(--main)}
.fc-rv-type.is-correct{background:#eafaf0;border-color:#22c55e;color:#15803d}
.fc-rv-type.is-wrong{background:#fdecec;border-color:#ef4444;color:#b91c1c}
.fc-rv-nav{display:flex;align-items:center;justify-content:center;padding:1rem 1.25rem 1.5rem;flex-shrink:0}
.fc-rv-mid{display:flex;align-items:center;justify-content:center;gap:1rem}
.fc-rv-navbtn-text{width:auto;height:auto;padding:.6rem 1.5rem;border-radius:var(--r-md);font-family:inherit;font-size:.95rem;font-weight:600;border:1px solid var(--border);background:var(--el);color:var(--font);box-shadow:none;transition:all .15s}
.fc-rv-navbtn-text:hover{background:var(--hover);border-color:var(--main);transform:none;filter:none}
.fc-rv-navbtn-text:active{transform:scale(.96)}
.fc-rv-navbtn-primary{background:var(--main,#39b0bb);color:#fff;border-color:var(--main,#39b0bb)}
.fc-rv-navbtn-primary:hover{background:var(--main,#39b0bb);opacity:.9;border-color:var(--main,#39b0bb)}
/* Hint button (under the card) */
.fc-rv-hint-btn{width:auto;height:auto;padding:.45rem 1rem;border-radius:var(--r-md);border:1px solid var(--border);background:var(--el);color:var(--font-sub);font-family:inherit;font-size:.85rem;font-weight:500;gap:.4rem;transition:all .15s}
.fc-rv-hint-btn:hover{background:var(--hover);color:var(--font);border-color:var(--main)}
.fc-rv-action{padding:.7rem 1.75rem;border:none;border-radius:999px;background:var(--main,#39b0bb);color:#fff;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 14px rgba(57,176,187,.4)}
.fc-rv-action:hover{transform:scale(1.04)}
.fc-rv-check{margin-top:.25rem}
.fc-rv-result-slot{min-height:2.5rem;display:flex;align-items:center;justify-content:center}
.fc-rv-result{font-size:1.5rem;font-weight:700}
.fc-rv-result.is-good{color:#16a34a}
.fc-rv-result.is-bad{color:#dc2626}
 .nm-mic-title{font-size:.6875rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em;padding:.25rem .5rem}
.nm-mic-opt{padding:.5rem .75rem;border-radius:var(--r-lg);border:none;background:transparent;font-family:inherit;font-size:.8125rem;cursor:pointer;text-align:left;color:var(--font);transition:background .1s}
.nm-mic-opt:hover{background:var(--hover)}
.ck-size-btn{flex:1;padding:.375rem .25rem;border-radius:.5rem;border:1.5px solid var(--border);background:var(--hover);color:var(--font-sub);font-family:"Poppins",sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .13s,color .13s,border-color .13s}
.ck-size-btn:hover{border-color:var(--main);color:var(--main)}
.ck-size-on{background:var(--main)!important;color:#fff!important;border-color:var(--main)!important}
.ck-cd-input{width:4rem;padding:.35rem .5rem;border:1.5px solid var(--border);border-radius:.5rem;background:var(--hover);color:var(--font);font-family:inherit;font-size:.8125rem}
.ck-cd-btn{width:100%;padding:.5rem;border-radius:.5rem;border:none;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer}
.ck-cd-btn:hover{opacity:.9}
.ck-cd-readout{font-size:1.25rem;font-weight:700;text-align:center;padding:.25rem .5rem;font-variant-numeric:tabular-nums}
.ck-cd-startmode{display:flex;flex-direction:column;gap:.15rem;padding:.25rem .5rem}
.ck-cd-radio{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--font);cursor:pointer}
.ck-cd-radio input{accent-color:var(--main);width:.9rem;height:.9rem}
.ck-cd-atrow{padding:.15rem .5rem .35rem}
.nm-mic-opt.is-on{background:var(--main-sub);color:var(--main);font-weight:600}
/* ── Textavsnitt (tabbed text) ── */
.tt-tab-bar{display:flex;align-items:center;gap:.375rem;padding:.375rem .625rem .25rem;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.tt-tab-bar::-webkit-scrollbar{display:none}
.tt-tab-bar-head{border-bottom:1px solid var(--divider)}
/* Textavsnitt-widgetens egna flikar wrap:ar till fler rader istället för att fällas ihop
   bakom en "+N"-knapp (widgets/tabs.js's delade tabbar-widget behåller den gamla varianten). */
.tt-tab-bar-wrap{flex-wrap:wrap;overflow-x:visible}
.tt-tab{display:flex;align-items:center;height:2.5rem;padding:0 1rem;border-radius:var(--r-full);border:1.5px solid rgba(0,0,0,.1);background:rgba(0,0,0,.06);font-family:"Poppins",sans-serif;font-size:1rem;font-weight:500;cursor:pointer;color:var(--font-sub);white-space:nowrap;transition:background .15s,border-color .15s,color .15s;flex-shrink:0}
.tt-tab:hover{background:rgba(0,0,0,.1);color:var(--font)}
.tt-tab.is-on{border-color:var(--main);color:#fff;background:var(--main);font-weight:600}
.tt-tab.is-dragging{opacity:.4;transform:scale(.95)}
.tt-tab.is-drag-over{border-color:var(--main);border-style:dashed;background:rgba(0,0,0,.12)}
.tt-tab-grip{cursor:grab;opacity:.3;font-size:.75rem;line-height:1;margin-right:.25rem;user-select:none}
.tt-tab:active .tt-tab-grip{cursor:grabbing}
.tt-tab-lbl{outline:none;min-width:1rem;max-width:14rem;overflow:hidden;text-overflow:ellipsis}
/* An untouched tab's label is left genuinely empty (never baked into saved data — see text.js's
   _normTab) so every viewer gets the numbered default in THEIR OWN language, not whatever language
   was active when the tab was created. :empty rather than a stored placeholder string. */
.tt-tab-lbl:empty::before{content:attr(data-ph);opacity:.55;pointer-events:none}
.tt-tab-del{margin-left:.25rem;opacity:.5;font-size:.875rem;line-height:1;flex-shrink:0;cursor:pointer;padding:.1rem .2rem;border-radius:50%}
.tt-tab-del:hover{opacity:1;background:rgba(0,0,0,.1)}
.tt-tab-more{height:2.5rem;padding:0 .875rem;border-radius:var(--r-full);border:1.5px solid rgba(0,0,0,.1);background:rgba(0,0,0,.06);font-family:"Poppins",sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;color:var(--font-sub);flex-shrink:0;transition:background .1s}
.tt-tab-more:hover{background:rgba(0,0,0,.12)}
.tt-overflow-pop{position:fixed;z-index:15000;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.15);padding:.375rem;min-width:10rem;display:flex;flex-direction:column;gap:.25rem;font-family:"Poppins",sans-serif}
.tt-overflow-row{display:flex;align-items:center;gap:.125rem}
.tt-overflow-item{flex:1;min-width:0;padding:.5rem .875rem;border-radius:var(--r-lg);border:none;background:transparent;font-family:inherit;font-size:.9375rem;text-align:left;cursor:pointer;color:var(--font);transition:background .1s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-overflow-item:hover{background:var(--hover)}
.tt-overflow-item.is-on{background:var(--main-sub);color:var(--main);font-weight:600}
.tt-overflow-del{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;border:none;background:transparent;color:var(--font-sub);opacity:.6;font-size:.9375rem;line-height:1;cursor:pointer;transition:background .1s,opacity .1s}
.tt-overflow-del:hover{opacity:1;background:rgba(0,0,0,.1)}
.tt-tab-add{width:2.5rem;height:2.5rem;border-radius:50%;border:1.5px dashed var(--border);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0;transition:border-color .1s,color .1s}
.tt-tab-add:hover{border-color:var(--main);color:var(--main)}
.tt-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tt-content{flex:1;padding:.625rem .875rem;outline:none;font-family:"Poppins",sans-serif;font-size:.9375rem;line-height:1.6;color:var(--font);overflow-y:auto;min-height:2rem}
.tt-content:empty::before{content:attr(data-ph,'Skriv här…');color:rgba(0,0,0,.25);pointer-events:none}
.tt-content.is-editing{background:rgba(57,176,187,.03)}
/* ── Group maker ── */
.gm-wrap{display:flex;flex-direction:column;gap:clamp(.5rem,2cqw,1rem);width:100%}
.gm-header{display:flex;align-items:center;gap:.5rem}
.gm-info{flex:1;font-size:.6875rem;color:var(--font-sub)}
.gm-stats{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2.4cqw,1.5rem);flex:1;flex-wrap:wrap}
.gm-stat{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.gm-stat-num{font-size:clamp(1.4rem,7.5cqw,3.75rem);font-weight:700;color:var(--font)}
.gm-stat-lbl{font-size:clamp(.7rem,3.2cqw,1.4rem);color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em}
.gm-stat-sep{font-size:clamp(1.1rem,4.8cqw,2.4rem);color:var(--border);font-weight:300}
.gm-cfg-btn{width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0}
.gm-cfg-btn:hover{background:var(--hover)}
.gm-groups{display:flex;flex-direction:column;gap:clamp(.375rem,1.6cqw,.75rem)}
.gm-group{background:rgba(0,0,0,.04);border-radius:var(--r-lg);padding:clamp(.375rem,2cqw,1rem) clamp(.625rem,3cqw,1.4rem)}
.gm-group-label{font-size:clamp(.7rem,3.4cqw,1.6rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem}
.gm-group-members{display:flex;flex-wrap:wrap;gap:clamp(.25rem,1.4cqw,.7rem)}
.gm-member{font-size:clamp(.85rem,4cqw,2rem);background:rgba(255,255,255,.88);border-radius:var(--r-full);padding:clamp(.15rem,1.1cqw,.5rem) clamp(.5rem,2.2cqw,1.1rem) clamp(.15rem,1.1cqw,.5rem) clamp(.2rem,.8cqw,.35rem);border:1px solid rgba(0,0,0,.1);color:#1a1a1a!important;display:inline-flex;align-items:center;gap:clamp(.2rem,.8cqw,.4rem)}
/* Mörka skins — lite mörkare chip-bakgrund men fortfarande läsbar */
.widget.skin-glass-dark .gm-group,.widget.skin-midnight .gm-group,.widget.skin-black .gm-group{background:rgba(255,255,255,.06)}
.widget.skin-glass-dark .gm-member,.widget.skin-midnight .gm-member,.widget.skin-black .gm-member{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.15)}
.gm-shuffle-btn{display:flex;align-items:center;justify-content:center;gap:clamp(.375rem,1.6cqw,.75rem);padding:clamp(.5rem,2.6cqw,1.1rem);border-radius:var(--r-full);border:none;background:var(--main);color:#fff;font-family:inherit;font-size:clamp(.875rem,4.2cqw,1.9rem);font-weight:600;cursor:pointer;transition:opacity .1s}
.gm-shuffle-btn:disabled{opacity:.4;cursor:default}
.gm-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem .5rem;color:var(--font-sub)}
.gm-show-btn{display:flex;align-items:center;justify-content:center;gap:clamp(.375rem,1.6cqw,.75rem);width:100%;padding:clamp(.55rem,2.8cqw,1.2rem);border-radius:var(--r-full);border:1.5px solid var(--main);background:var(--main-sub);color:var(--main);font-family:inherit;font-size:clamp(.875rem,4.2cqw,1.9rem);font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.gm-show-btn:hover{background:var(--main);color:#fff}
.gm-show-btn .material-icons-outlined{font-size:clamp(1rem,4.4cqw,1.9rem)}
/* Group maker modal */
.gm-modal-overlay{position:fixed;inset:0;z-index:16000;background:rgba(15,25,35,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;padding:2rem;animation:gm-modal-fade .15s ease}
@keyframes gm-modal-fade{from{opacity:0}to{opacity:1}}
.gm-modal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 1.5rem 4rem rgba(0,0,0,.35);width:min(64rem,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;font-family:"Poppins",sans-serif;animation:gm-modal-pop .18s cubic-bezier(.2,.8,.3,1)}
@keyframes gm-modal-pop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
.gm-modal-head{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);flex-shrink:0}
.gm-modal-head>div{flex:1;min-width:0}
.gm-modal-title{font-size:1.5rem;font-weight:600;color:var(--font)}
.gm-modal-meta{font-size:.9375rem;color:var(--font-sub);margin-top:.125rem}
.gm-modal-close{width:2.75rem;height:2.75rem;border-radius:50%;border:none;background:var(--hover);color:var(--font-sub);font-size:1.75rem;line-height:1;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .12s,color .12s}
.gm-modal-close:hover{background:var(--danger-sub);color:var(--danger)}
.gm-modal-body{padding:1.5rem;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;align-content:start}
.gm-modal-group{background:var(--main-sub);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem 1.25rem}
.gm-modal-group-label{font-size:1.125rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.75rem}
.gm-modal-members{display:flex;flex-direction:column;gap:.5rem}
.gm-modal-member{font-size:1.375rem;font-weight:500;color:var(--font);line-height:1.2;display:flex;align-items:center;gap:.5rem}
/* Group settings */
.gm-settings{display:flex;flex-direction:column;padding:.25rem}
.gm-settings-title{font-size:clamp(.875rem,4cqw,1.7rem);font-weight:600;margin-bottom:.75rem}
.gm-field-label{font-size:clamp(.6875rem,3cqw,1.3rem);font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.375rem}
.gm-class-list{display:flex;flex-wrap:wrap;gap:clamp(.25rem,1.2cqw,.6rem)}
.gm-class-opt{padding:clamp(.2rem,1cqw,.5rem) clamp(.625rem,2.4cqw,1.2rem);border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:inherit;font-size:clamp(.75rem,3.2cqw,1.4rem);cursor:pointer;color:var(--font-sub);transition:background .1s}
.gm-class-opt.is-on{background:var(--main);color:#fff;border-color:var(--main)}
.gm-size-row{display:flex;gap:clamp(.375rem,1.6cqw,.8rem)}
.gm-size-opt{width:clamp(2.5rem,11cqw,4.5rem);height:clamp(2.5rem,11cqw,4.5rem);border-radius:var(--r-lg);border:1.5px solid var(--border);background:var(--bg);font-family:inherit;font-size:clamp(.9375rem,4.5cqw,2.1rem);font-weight:600;cursor:pointer;display:grid;place-items:center}
.gm-size-opt.is-on{border-color:var(--main);background:var(--main-sub);color:var(--main)}
.gm-hint{font-size:clamp(.8125rem,3.4cqw,1.4rem);color:var(--font-sub)}
.gm-settings .gm-done-btn{font-size:clamp(.8125rem,3.8cqw,1.7rem)}
.gm-excl-open-btn{width:100%;padding:clamp(.3rem,1.8cqw,.75rem);border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:inherit;font-size:clamp(.8rem,3.6cqw,1.5rem);cursor:pointer;color:var(--font-sub);transition:background .1s,border-color .1s,color .1s}
.gm-excl-open-btn:hover{background:var(--hover);border-color:var(--main);color:var(--main)}
.gm-excl-list{display:flex;flex-direction:column;gap:.25rem;max-height:8rem;overflow-y:auto}
.gm-excl-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .25rem;cursor:pointer;font-size:.8125rem;border-radius:var(--r-md);transition:background .1s}
.gm-excl-row:hover{background:var(--hover)}
.gm-excl-row input{accent-color:var(--main);width:.9rem;height:.9rem;flex-shrink:0;cursor:pointer}
.gm-settings .gm-excl-row{font-size:clamp(.8125rem,3.4cqw,1.4rem)}
.gm-settings .gm-excl-row input{width:clamp(.9rem,3.4cqw,1.5rem);height:clamp(.9rem,3.4cqw,1.5rem)}
.picker-cfg-btn{padding:clamp(.4rem,2.6cqi,1rem) clamp(.5rem,2.8cqi,1.1rem);border-radius:var(--r-full);border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--font-sub);display:grid;place-items:center}
.picker-cfg-btn:hover{background:var(--hover)}
.picker-settings-pop{position:fixed;z-index:15000;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.18);padding:.875rem;font-family:"Poppins",sans-serif;min-width:16rem;max-height:24rem;display:flex;flex-direction:column;gap:.375rem}
.picker-settings-title{font-size:.8125rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em}
.picker-settings-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:.35rem}
.picker-settings-pop .gm-excl-row{font-size:1rem;padding:.5rem .35rem;gap:.6rem}
.picker-settings-pop .gm-excl-row input{width:1.3rem;height:1.3rem}
/* ── Namnsdag ── */
.nd-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--border);border-top-color:var(--main);border-radius:50%;animation:spin .7s linear infinite}
.nd-icon{font-size:clamp(2.25rem,min(34cqh,30cqw),7rem);line-height:1}
.nd-names{display:flex;flex-wrap:wrap;gap:clamp(.375rem,2cqw,1rem);justify-content:center}
.nd-name{font-size:clamp(1.25rem,min(20cqh,14cqw),4rem);font-weight:700;color:var(--font);line-height:1.1}
.nd-label{font-size:clamp(.875rem,min(11cqh,9cqw),2rem);color:var(--font-sub)}
.nd-sublabel{font-size:clamp(.6875rem,min(7cqh,6cqw),1.4rem);color:var(--font-sub);text-transform:uppercase;letter-spacing:.06em}
/* Random picker */
.picker-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;padding:.25rem}
.picker-group-tabs{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;width:100%}
.picker-gtab{padding:.2rem .625rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:inherit;font-size:clamp(.7rem,3.5cqi,1.15rem);cursor:pointer;color:var(--font-sub);transition:background .1s}
.picker-gtab.is-on{background:var(--main);color:#fff;border-color:var(--main)}
.picker-stage{display:flex;flex-direction:column;align-items:center;gap:.375rem;width:100%}
.picker-drum-wrap{width:100%;overflow:hidden;border-radius:var(--r-lg);background:rgba(0,0,0,.04);border:1.5px solid var(--border);position:relative;height:clamp(7.8rem,45cqi,18rem)}
.picker-drum-wrap::before,.picker-drum-wrap::after{content:'';position:absolute;left:0;right:0;height:2.4rem;z-index:2;pointer-events:none}
.picker-drum-wrap::before{top:0;background:linear-gradient(to bottom,var(--el) 20%,transparent)}
.picker-drum-wrap::after{bottom:0;background:linear-gradient(to top,var(--el) 20%,transparent)}
.picker-drum-inner{display:flex;flex-direction:column;will-change:transform}
.picker-drum-item{height:clamp(2.6rem,15cqi,6rem);display:flex;align-items:center;justify-content:center;font-size:clamp(1.375rem,9cqi,3.6rem);font-weight:600;flex-shrink:0;padding:0 .5rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-drum-dim{opacity:.2;font-size:1rem;font-weight:400}
.picker-drum-idle{color:var(--font-sub);font-size:clamp(.95rem,5.5cqi,2.2rem);font-weight:400}
.picker-drum-winner{color:var(--main);animation:picker-pop .5s ease-out}
@keyframes picker-pop{0%{transform:scale(1.25)}60%{transform:scale(.97)}100%{transform:scale(1)}}
/* Spinning dots */
.picker-spinning-dots{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}
.picker-spinning-dots span{width:.75rem;height:.75rem;border-radius:50%;background:var(--main);animation:picker-dot .9s ease-in-out infinite;opacity:.3}
.picker-spinning-dots span:nth-child(2){animation-delay:.15s}
.picker-spinning-dots span:nth-child(3){animation-delay:.3s}
@keyframes picker-dot{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}
/* Reveal */
.picker-reveal-wrap{display:flex;align-items:center;justify-content:center;height:clamp(7.8rem,45cqi,18rem);width:100%;border-radius:var(--r-lg);background:var(--main-sub);border:2px solid var(--main)}
.picker-reveal-name{font-size:clamp(1.4rem,13cqi,5rem);font-weight:700;color:var(--main);animation:picker-reveal .4s cubic-bezier(.34,1.56,.64,1);text-align:center;word-break:break-word;line-height:1.25;padding:.25rem .75rem}
@keyframes picker-reveal{0%{transform:scale(0) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.picker-sub{font-size:clamp(.85rem,5cqi,1.9rem);color:var(--font-sub)}
.picker-chips{display:flex;flex-wrap:wrap;gap:clamp(.25rem,1.5cqi,.6rem);justify-content:center;max-height:clamp(10rem,55cqi,28rem);overflow-y:auto}
.picker-chip{font-size:clamp(.8rem,4.5cqi,1.7rem);padding:.25rem .625rem;border-radius:var(--r-full);background:rgba(0,0,0,.05)}
.picker-chip.used{opacity:.3;text-decoration:line-through}
.picker-actions{display:flex;gap:clamp(.375rem,2cqi,.8rem);width:100%;max-width:clamp(14rem,85cqi,32rem)}
.picker-btn-pick{flex:1;padding:clamp(.4rem,2.6cqi,1rem) .75rem;border-radius:var(--r-full);background:var(--main);color:#fff;border:none;font-family:inherit;font-size:clamp(.9rem,5.2cqi,2rem);font-weight:600;cursor:pointer}
.picker-btn-reset{padding:clamp(.4rem,2.6cqi,1rem) clamp(.5rem,2.8cqi,1.1rem);border-radius:var(--r-full);border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--font-sub);display:grid;place-items:center}
.picker-btn-reset .material-icons-outlined,.picker-cfg-btn .material-icons-outlined{font-size:clamp(1rem,5cqi,2rem)!important}
.picker-manual-row{display:flex;gap:.25rem;width:100%;max-width:14rem}
.picker-manual-inp{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--r-full);padding:.25rem .625rem;font-family:inherit;font-size:clamp(.78rem,4cqi,1.2rem);outline:none;background:rgba(255,255,255,.6)}
.picker-manual-inp:focus{border-color:var(--main)}
.picker-manual-add{padding:.25rem .625rem;border:1px solid var(--main);border-radius:var(--r-full);color:var(--main);background:transparent;cursor:pointer;font-size:clamp(.85rem,4.4cqi,1.3rem);font-weight:600}
.skin-glass-dark .picker-chip{background:rgba(255,255,255,.12)}
/* Weather */
.weather-main{display:grid;grid-template-columns:auto 1fr;gap:.875rem;align-items:center}
.weather-icon{width:clamp(3.5rem,22cqi,6.5rem);height:clamp(3.5rem,22cqi,6.5rem);border-radius:1rem;display:grid;place-items:center;background:rgba(255,186,12,.18);color:#f7a937}
.weather-icon .material-icons-outlined{font-size:clamp(2rem,13cqi,4rem)}
.weather-temp{font-size:clamp(1.875rem,15cqi,4.5rem);font-weight:600;letter-spacing:-.02em;line-height:1}
.weather-meta{font-size:clamp(.75rem,4.5cqi,1.7rem);color:var(--font-sub);margin-top:.25rem}
.skin-glass-dark .weather-meta{color:rgba(244,241,234,.6)}
.weather-forecast{display:flex;gap:.5rem;margin-top:.625rem;padding-top:.625rem;border-top:1px solid rgba(0,0,0,.06)}
.skin-glass-dark .weather-forecast{border-top-color:rgba(255,255,255,.12)}
.weather-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1875rem;font-size:clamp(.78rem,4.4cqi,1.9rem);color:var(--font-sub)}
.weather-day strong{font-weight:700;color:var(--font);font-size:clamp(1rem,6cqi,2.6rem)}
.skin-glass-dark .weather-day{color:rgba(244,241,234,.6)}
.skin-glass-dark .weather-day strong{color:#f4f1ea}

/* ── News widget ── */
.news-src-row{display:flex;gap:.25rem;flex-wrap:wrap;padding:.25rem 0 .5rem;flex-shrink:0}
.news-src-btn{padding:.1875rem .5rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:'Poppins',sans-serif;font-size:clamp(.72rem,3.2cqi,1.4rem);font-weight:600;color:var(--font-sub);cursor:pointer;transition:background .1s,color .1s,border-color .1s;white-space:nowrap}
.news-src-btn.active{color:#fff;border-color:transparent}
.news-src-btn:hover:not(.active){background:var(--hover1)}
.skin-glass-dark .news-src-btn{color:rgba(244,241,234,.7);border-color:rgba(255,255,255,.18)}
.skin-glass-dark .news-src-btn.active{color:#fff;border-color:transparent}
.news-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0}
.news-item{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:.1rem .5rem;padding:.375rem .25rem;border-radius:.5rem;text-decoration:none;color:inherit;transition:background .12s;cursor:pointer}
.news-item:hover{background:rgba(0,0,0,.05)}
.skin-glass-dark .news-item:hover{background:rgba(255,255,255,.08)}
.news-meta{font-size:clamp(.65rem,3cqi,1.3rem);color:var(--font-sub);font-weight:600;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:.25rem;grid-column:1}
.news-dot{width:.3125rem;height:.3125rem;border-radius:50%;flex-shrink:0;display:inline-block}
.skin-glass-dark .news-meta{color:rgba(244,241,234,.5)}
.news-headline{font-size:clamp(.9rem,4.6cqi,2.1rem);line-height:1.35;color:var(--font);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;grid-column:1}
.skin-glass-dark .news-headline{color:#f4f1ea}
.news-thumb{width:clamp(3.25rem,18cqi,6rem);height:clamp(2.375rem,13cqi,4.4rem);object-fit:cover;border-radius:.375rem;grid-row:1/3;align-self:center;flex-shrink:0;grid-column:2}
.news-divider{height:1px;background:var(--divider);margin:.0625rem .25rem;grid-column:1/-1}
.skin-glass-dark .news-divider{background:rgba(255,255,255,.08)}
.news-status{text-align:center;padding:1.5rem .5rem;font-size:.75rem;color:var(--font-sub)}
.skin-glass-dark .news-status{color:rgba(244,241,234,.5)}


/* Innehåll (content widget): tabs that each hold another widget */
.content-widget .cw-bar{flex-shrink:0}
.cw-stage{position:relative;flex:1;min-height:0;container-type:size}
.cw-pane{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr);gap:.4rem;overflow:hidden}
.cw-slot{position:relative;min-width:0;min-height:0;display:flex;overflow:hidden;border-radius:.9rem}
.cw-slot--small{background:rgba(255,255,255,.35)}
.cw-slot-ctl{position:absolute;right:.35rem;top:.35rem;z-index:6;opacity:0;transition:opacity .15s}
.cw-slot:hover .cw-slot-ctl,.cw-slot:focus-within .cw-slot-ctl{opacity:1}
@media (hover:none){.cw-slot-ctl{opacity:.85}}
.cw-slot-ctl button{width:1.9rem;height:1.9rem;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 .1rem .4rem rgba(0,0,0,.25);color:var(--font-sub);cursor:pointer;display:grid;place-items:center}
.cw-slot-ctl button .material-icons-outlined{font-size:1.1rem}
/* on a narrow widget the slots stack: the big one first */
@container (max-width: 34rem){
  .cw-pane[data-layout="duo"],.cw-pane[data-layout="trio"]{grid-template-columns:1fr!important;grid-template-rows:minmax(0,2.2fr) repeat(2,minmax(0,1fr))}
  .cw-pane[data-layout="duo"]{grid-template-rows:minmax(0,2.2fr) minmax(0,1fr)}
  .cw-pane .cw-slot{grid-column:1!important;grid-row:auto!important}
  .cw-pane .cw-slot--big{order:-1}
}
.cw-pick--small .cw-pick-grid{grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr))}
.cw-pick--small .cw-pick-h{font-size:.95rem}
.cw-pick--small .cw-kind{padding:.5rem .3rem;font-size:.75rem}
.cw-pick--small .cw-kind .material-icons-outlined{font-size:1.5rem}
/* the layout choice in the tab bar: three small pictures, the chosen one lit */
.cw-lay-seg{display:inline-flex;gap:.15rem;padding:.15rem;margin-left:.3rem;border-radius:999px;background:rgba(0,0,0,.07);flex-shrink:0}
.cw-lay-opt{display:grid;place-items:center;padding:.3rem .5rem;border:0;border-radius:999px;background:transparent;cursor:pointer}
.cw-lay-opt:hover{background:rgba(255,255,255,.7)}
.cw-lay-opt.is-on{background:var(--main)}
.cw-lay-opt.is-on .cw-lay-art i{background:rgba(255,255,255,.55)}
.cw-lay-opt.is-on .cw-lay-art--duo i:nth-child(1),.cw-lay-opt.is-on .cw-lay-art--trio i:nth-child(2),.cw-lay-opt.is-on .cw-lay-art--single i{background:#fff}
.cw-lay-art{display:grid;gap:.12rem;width:1.9rem;height:1.05rem}
.cw-lay-art i{border-radius:.2rem;background:#9fb4b7}
.cw-lay-art--single{grid-template-columns:1fr}.cw-lay-art--single i:nth-child(n+2){display:none}
.cw-lay-art--duo{grid-template-columns:2.4fr 1fr}.cw-lay-art--duo i:nth-child(3){display:none}.cw-lay-art--duo i:nth-child(1){background:var(--main)}
.cw-lay-art--trio{grid-template-columns:1fr 2.4fr 1fr}.cw-lay-art--trio i:nth-child(2){background:var(--main)}
.cw-nested{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:100%!important;z-index:auto!important;border-radius:0!important;box-shadow:none!important;flex:1;min-width:0}
/* the nested widget keeps its own functions (the gear, its settings and tools in the head row); what belongs to the board is hidden: moving, resizing,
   opacity and closing — the tab's own × and "change content" do that job */
.cw-nested>.widget-grip,.cw-nested>.widget-touch-bar{display:none!important}
.cw-nested>.widget-head{display:flex!important;opacity:1!important;pointer-events:auto!important;flex-shrink:0;min-height:0;padding:.15rem .5rem 0;background:transparent;cursor:default;justify-content:flex-end}
.cw-nested>.widget-head .widget-eyebrow,.cw-nested>.widget-head .widget-close-btn,.cw-nested>.widget-head .widget-op-btn{display:none!important}
.cw-nested>.widget-head:not(:has(button:not(.widget-close-btn):not(.widget-op-btn))){display:none!important}
.cw-pick{margin:auto;padding:1rem;width:100%;max-height:100%;overflow:auto;text-align:center}
.cw-pick-h{margin-bottom:.8rem;font-size:1.2rem;font-weight:800;color:var(--font)}
.cw-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem}
.cw-kind{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem .4rem;border:.12rem solid #dbe7e8;border-radius:1rem;background:#fff;font-family:inherit;font-size:.85rem;color:var(--font);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.cw-kind .material-icons-outlined{font-size:2rem;color:var(--main)}
.cw-kind:hover{transform:translateY(-.15rem);border-color:var(--main);box-shadow:0 .3rem .8rem rgba(57,176,187,.25)}
/* pupils: the tabs work, the content is for looking at */
body.student-mode .content-widget .cw-bar .tt-tab{pointer-events:auto;cursor:pointer}
body.student-mode .cw-swap,body.student-mode .cw-pick{display:none!important}

/* a new tab: first choose how it is laid out — big, playful cards in the middle */
.cw-laypick{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:1rem;overflow:auto;background:radial-gradient(circle at 50% 35%,#fffaf0 0%,#f0f9fb 75%)}
.cw-lp-h{font-size:clamp(1.1rem,3.4cqi,1.7rem);font-weight:800;color:var(--font);text-align:center}
.cw-lp-cards{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.cw-lp-card{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:1.1rem 1.2rem 1rem;border:0;border-radius:1.8rem;background:#fff;box-shadow:0 .35rem 1.1rem rgba(60,40,10,.14);font-family:inherit;font-size:1.05rem;font-weight:800;color:var(--font);cursor:pointer;transition:transform .2s,box-shadow .2s;animation:lb-xp-in .45s ease-out backwards;animation-delay:calc(var(--i)*.08s)}
.cw-lp-card:hover{transform:translateY(-.35rem) rotate(-1.2deg);box-shadow:0 .8rem 1.8rem rgba(57,176,187,.35)}
.cw-lp-card:nth-child(2):hover{transform:translateY(-.35rem) rotate(1deg)}
.cw-lp-art{display:grid;gap:.35rem;width:8.5rem;height:5rem}
.cw-lp-art i{border-radius:.7rem;background:#39b0bb}
.cw-lp-card--single .cw-lp-art{grid-template-columns:1fr}.cw-lp-card--single .cw-lp-art i:nth-child(n+2){display:none}
.cw-lp-card--duo .cw-lp-art{grid-template-columns:2.4fr 1fr}.cw-lp-card--duo .cw-lp-art i:nth-child(3){display:none}
.cw-lp-card--duo .cw-lp-art i:nth-child(2){background:#f4a321}
.cw-lp-card--trio .cw-lp-art{grid-template-columns:1fr 2.4fr 1fr}
.cw-lp-card--trio .cw-lp-art i:nth-child(1){background:#f4a321}.cw-lp-card--trio .cw-lp-art i:nth-child(2){background:#39b0bb}.cw-lp-card--trio .cw-lp-art i:nth-child(3){background:#f27ab0}
.cw-lp-card:hover .cw-lp-art i{filter:saturate(1.25)}
@media (prefers-reduced-motion:reduce){.cw-lp-card{animation:none}.cw-lp-card:hover,.cw-lp-card:nth-child(2):hover{transform:none}}

/* ── Tab bars (Innehåll med flikar, Text med flikar): readable contrast ────────────────────────────────
   White on the light brand teal was only ~3:1. The chosen tab, its grip/×, the empty-name hint, the "+" and the
   layout switch now use a deeper teal and darker marks (≥4.5:1). */
.tt-tab.is-on{background:#1f7d8a;border-color:#1f7d8a;color:#fff}
.tt-tab.is-on .tt-tab-grip{opacity:.75}
.tt-tab.is-on .tt-tab-del{opacity:.9}
.tt-tab.is-on .tt-tab-lbl:empty::before{opacity:.9}
.tt-tab:not(.is-on){color:#34454b}
.tt-tab-add{border-color:#7f969b;color:#34454b}
.tt-tab-add:hover{border-color:#1f7d8a;color:#1f7d8a}
.cw-lay-seg{background:rgba(0,0,0,.1)}
.cw-lay-art i{background:#6a7f84}
.cw-lay-art--duo i:nth-child(1),.cw-lay-art--trio i:nth-child(2){background:#1f7d8a}
.cw-lay-opt.is-on{background:#1f7d8a}
.cw-lay-opt.is-on .cw-lay-art i{background:rgba(255,255,255,.65)}
.cw-lay-opt.is-on .cw-lay-art--single i,.cw-lay-opt.is-on .cw-lay-art--duo i:nth-child(1),.cw-lay-opt.is-on .cw-lay-art--trio i:nth-child(2){background:#fff}