.lx-over{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:color-mix(in oklab,var(--ink) 82%,transparent);backdrop-filter:blur(10px)}
.lx-over.on{display:flex}
.lx-sheet{width:100%;max-width:440px;background:var(--ink);color:var(--cream);border:1px solid color-mix(in oklab,var(--cream) 14%,transparent);border-radius:20px;padding:28px;animation:lx-pop .35s cubic-bezier(.2,.9,.3,1.3)}
.lx-sheet h2{font-family:"Sora",system-ui,sans-serif;margin:0 0 6px;font-size:24px}
.lx-sheet p.lx-lead{margin:0 0 18px;color:color-mix(in oklab,var(--cream) 62%,transparent);font-size:14px;line-height:1.5}
.lx-in{width:100%;margin-top:10px;border-radius:13px;border:1px solid color-mix(in oklab,var(--cream) 18%,transparent);background:color-mix(in oklab,var(--cream) 5%,transparent);color:var(--cream);padding:13px 15px;font:inherit}
.lx-in:focus{outline:none;border-color:var(--brand)}
textarea.lx-in{min-height:88px;resize:vertical}
.lx-pin{letter-spacing:.42em;text-align:center;font-family:"Sora",system-ui,sans-serif;font-size:24px}
.lx-btn{width:100%;margin-top:14px;padding:13px;border-radius:13px;border:none;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:transform .15s,filter .15s}
.lx-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.lx-btn[disabled]{opacity:.55;cursor:default;transform:none}
.lx-btn.ghost{background:transparent;color:var(--cream);border:1px solid color-mix(in oklab,var(--cream) 18%,transparent)}
.lx-btn.link{background:none;border:none;color:color-mix(in oklab,var(--cream) 60%,transparent);text-decoration:underline;padding:8px;margin-top:6px;font-weight:500}
.lx-msg{margin-top:10px;font-size:13px;min-height:18px;color:var(--red)}
.lx-msg.ok{color:var(--brand)}
.lx-choice{display:block;width:100%;text-align:left;margin-top:9px;padding:12px 14px;border-radius:13px;border:1px solid color-mix(in oklab,var(--cream) 14%,transparent);background:color-mix(in oklab,var(--cream) 4%,transparent);color:var(--cream);font:inherit;cursor:pointer}
.lx-choice.on{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 16%,transparent)}
.lx-steps{display:flex;gap:5px;margin-bottom:16px}
.lx-steps i{flex:1;height:4px;border-radius:99px;background:color-mix(in oklab,var(--cream) 12%,transparent)}
.lx-steps i.on{background:var(--brand)}
@keyframes lx-pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}

/* Intro-animation */
#lxIntro{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:var(--ink);overflow:hidden}
#lxIntro.on{display:grid}
#lxIntro.out{animation:lx-fade 1.6s ease forwards}
@keyframes lx-fade{from{opacity:1}to{opacity:0;visibility:hidden}}
.lx-ring{position:absolute;border:2px solid var(--brand);border-radius:50%;width:80px;height:80px;opacity:0;animation:lx-ring 1.5s ease-out forwards}
@keyframes lx-ring{0%{transform:scale(.2);opacity:.85}100%{transform:scale(9);opacity:0}}
.lx-word{display:flex;gap:2px;font-family:"Sora",system-ui,sans-serif;font-weight:700;font-size:clamp(3rem,13vw,7rem);color:var(--cream)}
.lx-word span{display:inline-block;opacity:0;transform:scale(.3) translateY(26px);animation:lx-letter .6s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes lx-letter{60%{transform:scale(1.18) translateY(-6px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
.lx-word span.dot{color:var(--brand)}
.lx-tag{position:absolute;bottom:22%;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in oklab,var(--cream) 52%,transparent);opacity:0;animation:lx-letter .8s ease 1.15s forwards}
#lxStage{opacity:0;animation:lx-in .9s ease .1s forwards}
@keyframes lx-in{to{opacity:1}}

/* Ämneshylla */
.lx-shelf-item{position:relative}
.lx-del{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:color-mix(in oklab,var(--red) 18%,transparent);color:var(--red);border-radius:8px;width:24px;height:24px;cursor:pointer;display:none;font-size:13px;line-height:1}
.lx-editing .lx-del{display:block}
.lx-add{width:100%;margin-top:8px;padding:9px;border-radius:11px;border:1px dashed color-mix(in oklab,var(--cream) 26%,transparent);background:transparent;color:color-mix(in oklab,var(--cream) 70%,transparent);font:inherit;cursor:pointer}
.lx-bar{height:4px;border-radius:99px;background:color-mix(in oklab,var(--cream) 12%,transparent);margin-top:6px;overflow:hidden}
.lx-bar>i{display:block;height:100%;background:var(--brand);width:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* Ämneskort med scroll-animation */
.lx-sub{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.lx-sub.seen{opacity:1;transform:none}
.lx-sub .lx-emoji{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in oklab,var(--brand) 16%,transparent);font-size:21px;transform:scale(.6);transition:transform .5s cubic-bezier(.2,1.6,.4,1) .12s}
.lx-sub.seen .lx-emoji{transform:scale(1)}
.lx-sub .lx-spark{width:0;transition:width .9s ease .2s}
.lx-sub.seen .lx-spark{width:100%}
.lx-levels{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lx-lv{padding:8px 14px;border-radius:11px;border:1px solid color-mix(in oklab,var(--cream) 14%,transparent);background:transparent;color:var(--cream);font:inherit;cursor:pointer}
.lx-lv.on{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 14%,transparent)}
.lx-opt{display:block;width:100%;text-align:left;margin-top:9px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--cream) 13%,transparent);background:color-mix(in oklab,var(--cream) 4%,transparent);color:var(--cream);font:inherit;cursor:pointer}
.lx-opt.on{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 14%,transparent)}
.lx-opt.right{border-color:var(--correct)!important;background:color-mix(in oklab,var(--correct) 22%,transparent)!important}
.lx-opt.wrong{border-color:var(--red);background:color-mix(in oklab,var(--red) 16%,transparent)}
.lx-chip{display:inline-block;margin:4px 6px 0 0;padding:4px 11px;border-radius:99px;font-size:12px;background:color-mix(in oklab,var(--cream) 7%,transparent);color:color-mix(in oklab,var(--cream) 70%,transparent)}
.lx-load{display:inline-block;width:14px;height:14px;border:2px solid color-mix(in oklab,var(--cream) 25%,transparent);border-top-color:var(--brand);border-radius:50%;animation:lx-spin .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes lx-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lx-sub,.lx-word span,.lx-tag,.lx-ring{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}