/* ── Utseende: delade variabler och byggstenar (se js/look.js) ───────────────
   body[data-look] är classic | cosy | play. "classic" är appen som den alltid sett ut — inget här ändrar den.
   Nya mysiga/lekfulla komponenter hämtar sina färger och former härifrån, så ett ställe styr känslan. */
body[data-look="cosy"],body[data-look="play"]{
  --cz-bg:linear-gradient(180deg,#fffaf0 0%,#f0f9fb 100%);
  --cz-head:#fffaf0;
  --cz-card:#fff;
  --cz-radius:1.2rem;
  --cz-shadow:0 .2rem .9rem rgba(110,80,20,.09);
  --cz-shadow-lift:0 .4rem 1.4rem rgba(110,80,20,.15);
  --cz-accent:#ffd23f;
  --cz-accent-2:#ff9f1c;
  --cz-ink-on-accent:#4a3200;
}
/* the two choices in the settings panel */
.look-row{margin-bottom:.9rem}
.look-lbl{font-size:.8125rem;font-weight:600;color:var(--font);margin-bottom:.35rem}
.look-seg{display:flex;gap:.3rem}
.look-opt{flex:1;padding:.5rem .4rem;border:1.5px solid var(--border);border-radius:999px;background:var(--el,#fff);font-family:"Poppins",sans-serif;font-size:.78rem;font-weight:600;color:var(--font-sub);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.look-opt:hover{border-color:var(--main);color:var(--font)}
.look-opt.is-on{background:var(--main);border-color:var(--main);color:#fff;box-shadow:0 .2rem .6rem rgba(57,176,187,.3)}
.look-help{font-size:.6875rem;color:var(--font-sub);margin-top:.3rem;line-height:1.4}

/* ═══ Huvudmenyn: +-menyn, Lärarens verktyg/Kontroller, ikonraden och inställningspanelen ═══
   Bara när utseendet inte är "classic". Allt är ren CSS på de klasser som redan finns — inga JS-ändringar. */
@keyframes cz-rise{from{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:translateY(0)}}

/* +-menyn och Lärarens verktyg */
body:not([data-look="classic"]) .add-menu{background:linear-gradient(180deg,#fafdfd 0%,#ebf7f8 100%);border:none;border-radius:1.8rem;box-shadow:0 1.2rem 3.2rem rgba(60,40,10,.24),0 .2rem .6rem rgba(60,40,10,.08);-webkit-backdrop-filter:none;backdrop-filter:none}
body:not([data-look="classic"]) .add-menu-tip{background:#ebf7f8;border-color:transparent}
body:not([data-look="classic"]) .add-menu-head{background:transparent;border-bottom:none;padding:1rem 1.3rem .35rem}
body:not([data-look="classic"]) #add-menu-title{font-size:1.15rem!important;font-weight:800!important}
body:not([data-look="classic"]) .add-menu-sidebar{width:13.75rem;background:transparent;border-right:none;padding:.4rem .3rem .5rem .9rem;gap:.3rem}
body:not([data-look="classic"]) .add-menu-cat{border-radius:999px;padding:.55rem .85rem;font-size:.82rem;font-weight:600;color:var(--font-sub);transition:background .15s,color .15s,transform .15s}
body:not([data-look="classic"]) .add-menu-cat .material-icons-outlined{color:var(--main)}
body:not([data-look="classic"]) .add-menu-cat:hover{background:var(--main-sub);color:var(--font);transform:translateX(2px)}
body:not([data-look="classic"]) .add-menu-cat--on,body:not([data-look="classic"]) .add-menu-cat--on:hover{background:var(--main);color:#fff;box-shadow:0 .3rem .85rem rgba(57,176,187,.38);transform:none}
body:not([data-look="classic"]) .add-menu-cat--on .material-icons-outlined{color:#fff}
body:not([data-look="classic"]) .add-menu-content{padding:1rem 1.3rem 1.2rem}
body:not([data-look="classic"]) .add-menu-cat-heading{font-size:1.3rem;font-weight:800}
body:not([data-look="classic"]) .add-tile{background:var(--cz-card,#fff);border:2px solid transparent;border-radius:1.3rem;box-shadow:var(--cz-shadow);animation:cz-rise .4s ease-out backwards}   /* backwards, not both: once it has risen the tile is free to move (hover lift) and an animation swap can never replay the entrance */
body:not([data-look="classic"]) .add-tile:hover{box-shadow:var(--cz-shadow-lift);transform:translateY(-3px);border-color:var(--main)}
body:not([data-look="classic"]) .add-tile-icon{background:linear-gradient(135deg,#fff3c4,#ffe0a3);color:#d9780a;border-radius:1.1rem}
body:not([data-look="classic"]) .add-tile--org-locked .add-tile-icon{background:#f1f5f9;color:#94a3b8}
body:not([data-look="classic"]) .add-tile-thumb{box-shadow:0 .15rem .5rem rgba(60,40,10,.14)}
body:not([data-look="classic"]) .tl-block{border-color:rgba(217,120,10,.32);border-radius:1.4rem;background:rgba(255,255,255,.55)}
body:not([data-look="classic"]) .tl-h{color:#a8741a}
body:not([data-look="classic"]) .cat-viewtoggle{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
body:not([data-look="classic"]) .add-menu-scroll-hint{background:linear-gradient(transparent,#ebf7f8 45%)}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(1),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(1){animation-delay:.02s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(2),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(2){animation-delay:0.06s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(3),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(3){animation-delay:0.09s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(4),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(4){animation-delay:0.12s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(5),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(5){animation-delay:0.15s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(6),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(6){animation-delay:0.18s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(7),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(7){animation-delay:0.21s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(8),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(8){animation-delay:0.24s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(9),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(9){animation-delay:0.27s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(10),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(10){animation-delay:0.30s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(11),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(11){animation-delay:0.33s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(12),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(12){animation-delay:0.36s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(13),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(13){animation-delay:0.39s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(14),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(14){animation-delay:0.42s}
body:not([data-look="classic"]) .add-menu-cardgrid .add-tile:nth-child(15),body:not([data-look="classic"]) .tl-grid .add-tile:nth-child(15){animation-delay:0.45s}

/* ikonraden längst ner */
body:not([data-look="classic"]) .kk-toolbar{background:#f6fbfb;border-color:rgba(0,0,0,.1)}
body:not([data-look="classic"]) .kk-tool:hover{background:var(--main-sub)}
body:not([data-look="classic"]) .kk-tool.is-on{background:#fff;color:var(--main);border-color:var(--main);box-shadow:0 .2rem .6rem rgba(57,176,187,.25)}
body:not([data-look="classic"]) .kk-tool-primary{box-shadow:0 .25rem .8rem rgba(57,176,187,.4)}

/* inställningspanelen (den som ligger i sidan, inte den som är inbäddad i bakgrundsfönstret) */
body:not([data-look="classic"]) .kk-settings:not(.kk-settings--embedded){background:var(--cz-bg,linear-gradient(180deg,#fffaf0,#f0f9fb));border:none;border-radius:1.5rem;box-shadow:0 1rem 2.8rem rgba(60,40,10,.22);-webkit-backdrop-filter:none;backdrop-filter:none}
body:not([data-look="classic"]) .kk-settings-head{border-bottom:none;padding:1.1rem 1.3rem .5rem}
body:not([data-look="classic"]) .kk-settings-head h2{font-size:1.25rem;font-weight:800}
body:not([data-look="classic"]) .kk-settings-body{padding:.3rem 1rem 1.2rem}
body:not([data-look="classic"]) .kk-settings-section{background:#fff;border-bottom:none;border-radius:1.15rem;box-shadow:var(--cz-shadow);margin:.55rem 0;padding:.95rem 1.05rem .8rem}
body:not([data-look="classic"]) .kk-settings--embedded .kk-settings-section{background:transparent;box-shadow:none;padding:.875rem .25rem .625rem;border-bottom:1px solid rgba(0,0,0,.05);margin:0}
body:not([data-look="classic"]) .kk-settings-section h3{color:#a8741a;font-weight:700}
body:not([data-look="classic"]) .tog{height:1.4rem;width:2.5rem}
body:not([data-look="classic"]) .tog::after{top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;box-shadow:0 .1rem .25rem rgba(0,0,0,.3)}
body:not([data-look="classic"]) .tog.on::after{transform:translateX(1.1rem)}
@media (prefers-reduced-motion:reduce){body:not([data-look="classic"]) .add-tile{animation:none}}