/* =========================================================
   GRATTIS – Studio (Experience Engine) + valmeny + spelaren
   Kompletterar app.css.
   ========================================================= */

/* ---------- Valmeny (/skapa) ---------- */
.choose { max-width: 820px; margin: 0 auto; padding: 16px 20px 60px; }
.choose-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.choose-card {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 34px 28px; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 8px; min-height: 220px;
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) { .choose-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary); } }
.choose-card.studio { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); background: linear-gradient(180deg, #e9f0fe, var(--surface)); }
.choose-emoji { font-size: 3rem; }
.choose-icon { display: inline-flex; color: var(--primary); }
.choose-icon svg { width: 40px; height: 40px; display: block; }
.choose-card h2 { font-size: 1.7rem; margin: 4px 0 0; }
.choose-card p { color: var(--ink-soft); margin: 0; }
.choose-go { margin-top: auto; color: var(--primary); font-weight: 700; }
.choose-badge {
    position: absolute; top: 16px; right: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff;
    font-size: .7rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: .04em;
}
@media (min-width: 720px) { .choose-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Studio-editorn ---------- */
body.studio-page { height: 100dvh; overflow: hidden; }
body.studio-page main { flex: 1; min-height: 0; display: flex; }
.studio { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* App-läge: sidan får aldrig bli bredare än skärmen (annars zoomar mobilen ut) */
body.studio-page { overflow-x: hidden; }
body.studio-page, .studio { max-width: 100%; }

.studio-top {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    border-bottom: 1px solid var(--line); background: var(--surface);
    position: relative; z-index: 200;
}
.studio-brand { font-weight: 700; display: flex; align-items: center; gap: 6px; font-family: var(--font-display); }
.scene-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.scene-tabs::-webkit-scrollbar { display: none; }
.scene-tab {
    font-size: .85rem; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--surface); white-space: nowrap; cursor: pointer; font-family: inherit; color: var(--ink);
}
.scene-tab.on { border-color: var(--primary); color: var(--primary); background: #e9f0fe; }
.scene-tab.add { border-style: dashed; color: var(--ink-soft); }
.studio-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ===== Studio-rundtur (maskot) ===== */
.tour-mascot--missing { display: none !important; }
/* Maskoten kan vara <img> eller <video> – båda skalar likadant */
video.tour-mascot { height: auto; object-fit: contain; background: transparent; }
/* MP4 har svart bakgrund som inte går att göra transparent – håll videon liten
   och högt uppe så den svarta rutan smälter in mot den mörka bakgrunden. */
video.tw-mascot { width: auto; height: 104px; top: -92px; border-radius: 14px; }
video.tour-pop .tour-mascot, .tour-pop video.tour-mascot { width: auto; height: 58px; }

/* Välkomstval: rundtur eller fortsätt */
.tour-welcome {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(20,12,40,.55); backdrop-filter: blur(3px);
    animation: tourFade .25s ease both;
}
.tw-card {
    position: relative; background: var(--surface); border-radius: 26px;
    padding: 74px 34px 30px; max-width: 400px; width: 100%; text-align: center;
    box-shadow: 0 30px 80px rgba(20,10,40,.35);
    animation: tourPop .35s cubic-bezier(.2,.9,.3,1.3) both;
}
.tw-mascot {
    position: absolute; top: -66px; left: 50%; transform: translateX(-50%);
    width: 132px; height: auto; filter: drop-shadow(0 10px 18px rgba(20,10,40,.28));
}
.tw-bubble {
    background: #e9f0fe; color: #4a3d8f; border-radius: 16px; padding: 12px 16px;
    font-size: .95rem; font-weight: 600; margin-bottom: 18px; line-height: 1.4;
}
.tw-card h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 6px; }
.tw-card p { color: var(--ink-soft); margin: 0 0 22px; line-height: 1.5; }
.tw-actions { display: flex; flex-direction: column; gap: 10px; }
.tw-actions .btn { width: 100%; }

/* Spotlight + pratbubbla */
.tour-root { position: fixed; inset: 0; z-index: 1000; }
.tour-highlight {
    position: fixed; border-radius: 12px; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(18,10,38,.62);
    transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1),
                width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1);
}
.tour-pop {
    position: fixed; background: var(--surface); border-radius: 18px;
    padding: 16px 16px 12px; box-shadow: 0 20px 50px rgba(20,10,40,.3);
    animation: tourFade .2s ease both;
}
.tour-pop::before {
    content: ""; position: absolute; left: var(--arrow-x, 40px); width: 16px; height: 16px;
    background: var(--surface); transform: translateX(-50%) rotate(45deg);
}
.tour-pop--below::before { top: -7px; }
.tour-pop--above::before { bottom: -7px; }
.tour-pop .tour-mascot {
    position: absolute; top: -12px; right: 12px; width: 62px; height: auto;
    filter: drop-shadow(0 8px 14px rgba(20,10,40,.25));
}
.tour-bubble { padding-right: 60px; }
.tour-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 3px; }
.tour-text { color: var(--ink-soft); font-size: .9rem; line-height: 1.45; margin: 0; }
.tour-controls {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.tour-skip { background: none; border: none; color: var(--ink-soft); font-family: inherit; font-size: .82rem; cursor: pointer; padding: 0; }
@media (hover: hover) and (pointer: fine) { .tour-skip:hover { color: var(--ink); text-decoration: underline; } }
.tour-count { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.tour-nav { display: flex; gap: 6px; }

/* Hjälp-knapp för att starta rundturen igen */
.tour-help {
    position: fixed; left: 16px; bottom: 16px; z-index: 90;
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface); color: var(--primary);
    font-size: 1.2rem; font-weight: 800; box-shadow: 0 6px 18px rgba(20,10,40,.14);
}
@media (hover: hover) and (pointer: fine) { .tour-help:hover { background: #e9f0fe; } }

@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourPop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* --- Mobilanpassning av rundturen --- */
@media (max-width: 1032px) {
    /* Flytta hjälp-knappen ovanför den nedre knappraden så den inte krockar */
    .tour-help {
        left: 10px; top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);   /* ovanför den nedre knappraden, aldrig över banner eller dialogrubriker */
        width: 36px; height: 36px; font-size: 1rem; z-index: 60;   /* under dialoger (modal-ov 70) */
    }
}
@media (max-width: 600px) {
    .tour-welcome { padding: 14px; overflow-y: auto; }
    .tw-card { padding: 56px 20px 22px; border-radius: 22px; }
    .tw-mascot { width: 104px; top: -50px; }
    .tw-bubble { font-size: .9rem; padding: 10px 13px; }
    .tw-card h2 { font-size: 1.25rem; }
    .tw-card p { font-size: .92rem; }

    .tour-pop { border-radius: 15px; padding: 13px 12px 10px; }
    .tour-pop .tour-mascot { width: 50px; top: -10px; right: 10px; }
    .tour-bubble { padding-right: 44px; }
    .tour-title { font-size: .96rem; }
    .tour-text { font-size: .85rem; }
    /* Kontrollerna får radbryta så knapparna aldrig kläms ihop */
    .tour-controls { flex-wrap: wrap; row-gap: 8px; }
    .tour-nav { margin-left: auto; }
}

/* Tillbaka-knapp i topbaren */
.st-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    cursor: pointer; padding: 0; transition: border-color .15s, background .15s;
}
@media (hover: hover) and (pointer: fine) { .st-back:hover { border-color: var(--primary); background: #e9f0fe; color: var(--primary); } }
.st-back svg { width: 18px; height: 18px; }

/* Kontochip i topbaren */
.st-account-wrap { position: relative; margin-left: 4px; }
.st-account {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--surface, #fff); border: 1px solid var(--line, #e7e3ef);
    border-radius: 999px; padding: 5px 10px 5px 5px; font-family: inherit;
    font-weight: 600; font-size: .85rem; color: var(--ink, #1c1830);
    transition: border-color .15s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) { .st-account:hover { border-color: var(--primary, #3d6fe8); box-shadow: 0 4px 14px rgba(0,0,0,.06); } }
.st-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary, #3d6fe8), var(--primary-2, #b06bff));
    color: #fff; font-size: .82rem; font-weight: 800;
}
.st-account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-caret { width: 15px; height: 15px; opacity: .55; flex: 0 0 auto; }
.st-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 210;
    min-width: 210px; background: var(--surface, #fff);
    border: 1px solid var(--line, #e7e3ef); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(20,10,40,.16); padding: 6px; overflow: hidden;
}
.st-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line, #eee); margin-bottom: 4px; }
.st-menu-name { font-weight: 700; font-size: .9rem; color: var(--ink, #1c1830); }
.st-menu-mail { font-size: .78rem; color: var(--ink-soft, #6b6580); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-menu-item {
    display: block; padding: 9px 10px; border-radius: 9px; text-decoration: none;
    color: var(--ink, #1c1830); font-size: .88rem; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .st-menu-item:hover { background: rgba(123,92,255,.09); } }

.studio-main { flex: 1; display: grid; grid-template-columns: 210px 1fr 270px; grid-template-rows: minmax(0, 1fr); min-height: 0; }   /* raden får aldrig växa förbi skärmen – annars hamnar verktygsraden under kanten (surfplatta) */
.studio-rail { border-right: 1px solid var(--line); padding: 16px; background: var(--surface-2); overflow-y: auto; }
.rail-add { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-weight: 700; margin-bottom: 12px; }
.rail-block {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px;
    border: 1px solid var(--line); border-radius: 11px; background: var(--surface); margin-bottom: 9px;
    cursor: pointer; font-family: inherit; font-size: .96rem; font-weight: 600; color: var(--ink);
    transition: border-color .15s, transform .12s;
}
@media (hover: hover) and (pointer: fine) { .rail-block:hover { border-color: var(--primary); transform: translateY(-1px); } }
.rail-block span { font-size: 1.25rem; }
.rail-note { color: var(--ink-soft); font-size: .78rem; margin-top: 16px; line-height: 1.5; }

.studio-canvas {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 24px; overflow: auto;
    background-color: #fbfbfe;   /* uttrycklig bakgrundsfärg: lager som Chrome skapar ovanpå får samma ton som ytan */
    background-image:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 23px, var(--line-soft, #efecf8) 23px 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, var(--line-soft, #efecf8) 23px 24px);
}
.stage-hint { color: var(--ink-soft); font-size: .8rem; text-align: center; }
.studio-insp { border-left: 1px solid var(--line); padding: 18px; background: var(--surface-2); overflow-y: auto; }
.insp-title { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 10px; }
.check input { width: auto; margin: 0; }
.btn.danger { color: #e0466e; border-color: rgba(224, 70, 110, .3); margin-top: 16px; width: 100%; }

/* Telefon-ram + scen */
.device-frame {
    width: 320px; max-width: 82vw; aspect-ratio: 9 / 18;
    background: #0c0b12; border-radius: 40px; border: 12px solid #0c0b12; padding: 0;
    flex: 0 0 auto; position: relative; overflow: hidden; box-sizing: border-box;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);   /* mindre skugga – den stora (70px) gav ett synligt lager i Chrome */
}
.device-frame-lg { width: 340px; }
/* Klippande "skärm" som fyller ramen. Den äkta scenen ligger absolut
   inuti (390px, transform-skalad) så dess layout-bredd inte läcker ut. */
.stage-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; background: #000; }
.stage {
    position: absolute; top: 0; left: 0; transform-origin: top left; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 26px 22px; text-align: center;
}
.stage-empty { color: rgba(255, 255, 255, .85); font-size: .9rem; }

/* Block */
.eb-wrap { position: absolute; transform: translate(-50%, -50%); cursor: grab; border-radius: 12px; max-width: 82%; touch-action: none; }
.eb-wrap:active { cursor: grabbing; }
.eb-wrap.selected { outline: 2px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 5px var(--ring); }
.eb { max-width: 100%; }
.eb-text { line-height: 1.3; white-space: pre-wrap; word-break: normal; overflow-wrap: normal; hyphens: none; }   /* ord delas aldrig mitt i; för långa ord krymps texten (engine: fitLongestWord) */
.eb-image { width: 150px; height: 150px; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.eb-button {
    font-family: inherit; border: none; cursor: pointer; font-size: 1.02rem; font-weight: 700;
    padding: 14px 28px; border-radius: 999px; background: rgba(255,255,255,.94); color: #221; box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.eb-button.square { border-radius: 14px; }

/* Uppspelning (spelaren) */
.exp-root { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.exp-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.exp-holder {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px; padding: 30px 24px; text-align: center;
}
.exp-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; animation: reveal .7s cubic-bezier(.2,.8,.2,1) both; }
.exp-scene.t-fade { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Publikt experience-kort (fullskärm) */
body.exp-page { overflow: hidden; background: #0b0e1a; }
.exp-stage { position: fixed; inset: 0; width: 100%; height: 100dvh; background: #0b0e1a; }

/* Publicerat (overlay-box) */
.published-box {
    position: relative;
    background: var(--surface); border-radius: var(--radius-lg); padding: 30px; max-width: 420px;
    width: 100%; text-align: center; box-shadow: var(--shadow-lg); z-index: 61;
}
.pub-close {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
    font-size: 1rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s;
}
@media (hover: hover) and (pointer: fine) { .pub-close:hover { background: var(--bg); color: var(--ink); } }
.published-box h2 { font-size: 1.5rem; }
.published-box .link-row { margin: 16px 0; }
.published-box .pub-more { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
/* "Din upplevelse är klar": bock som ritas, två tydliga val för länken, tryckt kort som en rad, allt glider in */
.pub2-ov { animation: pcFade .3s ease both; }
.published-box.pub2 { max-width: 460px; padding: 30px 26px 18px; box-shadow: 0 40px 90px -30px rgba(20,22,31,.55); animation: pcBox .5s cubic-bezier(.2,.8,.2,1) both; }
.pub2 .pub-close { border-radius: 50% !important; }
.pub2-ok { display: block; width: 56px; height: 56px; margin: 0 auto 12px; }
.pub2-ok svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pub2-ok circle { stroke: #cfe9d9; stroke-width: 2.5; fill: #effaf3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pcDraw .6s ease-out .15s both; }
.pub2-ok path { stroke: #1f9d55; stroke-width: 3.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pcDraw .45s ease-out .6s both; }
.pub2 h2 { margin: 0 0 6px; font-size: 1.65rem; }
.pub2-sub { margin: 0 auto 18px; max-width: 32ch; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.pub2 > *:not(.pub-close):not(.pub2-ok):not(h2) { animation: pcRow .45s cubic-bezier(.2,.8,.2,1) both; }
.pub2 > .pub2-sub { animation-delay: .2s; } .pub2 > .pub2-opts, .pub2 > .pub2-link { animation-delay: .35s; } .pub2 > .pub2-prem, .pub2 > .pub2-open { animation-delay: .45s; }
.pub2 > .pub2-order { animation-delay: .55s; } .pub2 > .pub2-cont { animation-delay: .65s; }
.pub2-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.pub2-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 14px 14px; text-align: left; text-decoration: none; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); transition: border-color .2s, transform .2s, box-shadow .2s; }
@media (hover: hover) and (pointer: fine) { .pub2-opt:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20,22,31,.45); } }
.pub2-opt b { font-size: .95rem; line-height: 1.3; }
.pub2-opt small { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
.pub2-opt-ic { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; color: var(--ink); background: var(--bg); border-radius: 50% !important; }
.pub2-opt-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pub2-opt-go { margin-top: auto; padding-top: 10px; font-size: .84rem; font-weight: 800; }
.pub2-opt:not(.gold) .pub2-opt-go { color: var(--ink); }
.pub2-opt.gold { border-color: #e6cf94; background: linear-gradient(180deg, #fffaf0, #fdf1d4); }
@media (hover: hover) and (pointer: fine) { .pub2-opt.gold:hover { border-color: var(--gold-deep); } }
.pub2-opt.gold .pub2-opt-ic { background: linear-gradient(180deg, #f1d58f, #d9a948); color: #2a1f05; }
.pub2-opt.gold .pub2-opt-go { color: var(--gold-deep); }
.pub2-link { margin: 0 0 8px !important; }
.pub2-prem { margin: 0 0 8px; font-size: .84rem; font-weight: 700; color: #1f6f3b; }
.pub2-open { display: inline-block; margin: 2px 0 12px; font-size: .88rem; font-weight: 700; color: var(--primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pub2-open:hover { text-decoration: underline; } }
.pub2-order { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; text-decoration: none; color: var(--ink); background: var(--bg); border: 1px solid var(--line); transition: border-color .2s; }
@media (hover: hover) and (pointer: fine) { .pub2-order:hover { border-color: var(--ink); } }
.pub2-order-ic { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink); border-radius: 50% !important; }
.pub2-order-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pub2-order-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pub2-order-tx b { font-size: .88rem; } .pub2-order-tx small { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
.pub2-order-go { flex: none; font-size: .84rem; font-weight: 800; }
.pub2-cont { display: block; margin: 12px auto 0; padding: 8px 12px; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pub2-cont:hover { color: var(--ink); } }
@media (max-width: 420px) { .pub2-opts { grid-template-columns: 1fr; } .published-box.pub2 { padding: 26px 16px 14px; } }
.pub2-swap, .pub2-swap .published-box.pub2 { animation: none; } .pub2-swap .pub2-ok circle, .pub2-swap .pub2-ok path { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .pub2, .pub2 > *, .pub2-ok circle, .pub2-ok path { animation: none !important; } .pub2-ok circle, .pub2-ok path { stroke-dashoffset: 0; } }

/* Bekräfta innan man lämnar med osparade ändringar */
.leave-box {
    background: var(--surface); border-radius: var(--radius-lg); padding: 30px 28px; max-width: 400px;
    width: 100%; text-align: center; box-shadow: var(--shadow-lg); z-index: 61;
}
.leave-box h2 { font-size: 1.35rem; margin: 0 0 8px; }
.leave-box p { color: var(--ink-soft); margin: 0 0 22px; line-height: 1.5; }
.leave-actions { display: flex; flex-direction: column; gap: 10px; }
.leave-actions .btn { width: 100%; }

@media (max-width: 1032px) {
    .studio-main { display: flex; flex-direction: column; }
    .studio-rail, .studio-insp { border: none; border-top: 1px solid var(--line); }
    .studio-rail { display: flex; gap: 8px; overflow-x: auto; order: 3; }
    .rail-block { flex: 0 0 auto; margin: 0; }
    .rail-add, .rail-note { display: none; }
    .studio-canvas { order: 1; }
    .studio-insp { order: 2; max-height: 40vh; }
}

/* ---------- Fler block + användarvänlighet ---------- */
/* Lager-lista i vänsterspalten */
.layers { display: flex; flex-direction: column; gap: 5px; }
.layer {
    text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface); cursor: pointer; font-family: inherit; font-size: .82rem; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) { .layer:hover { border-color: var(--primary); } }
.layer.on { border-color: var(--primary); background: #e9f0fe; color: var(--primary); font-weight: 600; }

/* Inspektor: tillbaka-knapp, hint, regel-box, operationer */
.insp-back {
    background: none; border: none; color: var(--primary); font-family: inherit; font-weight: 600;
    cursor: pointer; padding: 0 0 8px; font-size: .9rem;
}
.insp-hint { color: var(--ink-soft); font-size: .82rem; margin: 0 0 12px; line-height: 1.5; }
.rule-box {
    border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0 4px; background: var(--surface);
}
.rule-when { font-size: .8rem; font-weight: 600; color: var(--primary); margin-bottom: 8px; }
.rule-box label { margin-bottom: 10px; }
.rule-box label:last-child { margin-bottom: 0; }
.insp-ops { display: flex; gap: 6px; margin-top: 16px; }
.op {
    flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    cursor: pointer; font-family: inherit; font-size: .82rem; color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .op:hover { border-color: var(--primary); } }
.insp-ops .op[data-op="dup"] { flex: 2; }

/* Emoji-väljare */
.emoji-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.emoji-pick {
    aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; padding: 0;
}
@media (hover: hover) and (pointer: fine) { .emoji-pick:hover { border-color: var(--primary); } }
.emoji-pick.on { border-color: var(--primary); background: #e9f0fe; transform: scale(1.05); }

/* Nya block på scenen */
.eb-emoji { line-height: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)); }
.eb-countdown { font-family: var(--font-display); font-weight: 800; font-size: 4rem; color: #fff; line-height: 1; }
.eb-countdown.pulse { animation: cdPulse .4s ease; }
@keyframes cdPulse { 0% { transform: scale(1.4); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.eb-effect-chip {
    font-size: .8rem; padding: 8px 14px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.7);
    background: rgba(255,255,255,.15); color: #fff; font-weight: 600;
}
.eb-effect-hidden { display: none; }

/* ---------- Fri positionering + osynliga block ---------- */
.stage-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,.85); font-size: .9rem; text-align: center; padding: 0 24px; }
.stage-chips { position: absolute; top: auto; bottom: 14px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; z-index: 4; pointer-events: none; }
.stage-chip {
    display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; padding: 4px 13px 4px 5px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(18,14,34,.58); color: rgba(255,255,255,.94);
    cursor: pointer; font-family: inherit; font-weight: 600; letter-spacing: .01em;
    backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,.24);
}
.stage-chip { pointer-events: auto; padding: 4px 10px; font-size: .68rem; font-weight: 600; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); box-shadow: none; color: rgba(255,255,255,.9); }
.stage-chip .cicon { display: none; }
.stage-chip.selected { box-shadow: 0 0 0 3px var(--ring); }
/* Effekter och annat osynligt visas som blå etiketter under telefonen (inte inne i kortet) */
.scene-slot > .stage-chips { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; padding: 0 6px; }
.scene-slot > .stage-chips .stage-chip {
    background: var(--primary); border-color: var(--primary); color: #fff; font-size: .74rem; font-weight: 700; padding: 5px 12px;
    box-shadow: 0 4px 12px rgba(37,99,235,.28); backdrop-filter: none; letter-spacing: .02em;
}
@media (hover: hover) and (pointer: fine) { .scene-slot > .stage-chips .stage-chip:hover { filter: brightness(1.08); } }
.scene-slot > .stage-chips .stage-chip.selected { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary); }
.scene-slot > .stage-chips .stage-chip.hidden { opacity: .55; }

/* Spelaren: absolut positionerade block */
.exp-scene { position: absolute; inset: 0; display: block; }
.exp-item { position: absolute; transform: translate(-50%, -50%); max-width: 82%; }

/* ---------- Handritade ikoner (ingen emoji) ---------- */
.ricon svg, .licon svg { width: 18px; height: 18px; display: block; }
.rail-block { padding: 11px 13px; }
.rail-block .ricon { display: inline-flex; color: var(--primary); }
.rail-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-weight: 700; margin-bottom: 10px; }
.layer { display: flex; align-items: center; gap: 9px; }
.layer .licon { display: inline-flex; color: var(--ink-soft); flex: 0 0 auto; }
.layer.on .licon { color: var(--primary); }
.brand-spark { display: inline-flex; color: var(--primary); }
.brand-spark svg { width: 16px; height: 16px; display: block; }

/* ---------- Jumpscare (fullskärm) ---------- */
.js-overlay { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; overflow: hidden; }
.js-img { width: 100%; height: 100%; object-fit: cover; }
.js-overlay.on { opacity: 1; animation: jsShake .5s linear infinite, jsFlash .18s steps(2) 8; }
.js-overlay.js-mild.on { animation: jsShake .8s linear infinite; }
.js-overlay.js-kaos.on { animation: jsShake .26s linear infinite, jsFlash .1s steps(2) infinite; }
.js-overlay.off { opacity: 0; transition: opacity .38s ease; animation: none; }
@keyframes jsShake {
    0% { transform: translate(0,0) rotate(0); } 20% { transform: translate(-12px,8px) rotate(-2deg); }
    40% { transform: translate(10px,-10px) rotate(2deg); } 60% { transform: translate(-8px,-6px) rotate(-1deg); }
    80% { transform: translate(8px,10px) rotate(1deg); } 100% { transform: translate(0,0); }
}
@keyframes jsFlash { 0% { filter: brightness(1); } 50% { filter: brightness(4); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .js-overlay.on, .js-overlay.js-kaos.on, .js-overlay.js-mild.on { animation: none; } }

/* ---------- Verktygslåda (palett) ---------- */
.pal-search { margin-bottom: 12px; }
.pal-search input {
    width: 100%; margin: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: .9rem; color: var(--ink);
}
.pal-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.rail-divider { height: 1px; background: var(--line); margin: 16px 0; }

.cat-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-btn {
    display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 10px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer;
    font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--ink); transition: border-color .15s, transform .12s;
}
@media (hover: hover) and (pointer: fine) { .cat-btn:hover { border-color: var(--primary); transform: translateY(-1px); } }
.cat-btn .cicon { display: inline-flex; color: var(--primary); flex: 0 0 auto; }
.cat-btn .cicon svg { width: 18px; height: 18px; display: block; }

.pal-back { background: none; border: none; color: var(--primary); font-family: inherit; font-weight: 600; cursor: pointer; padding: 0 0 8px; font-size: .85rem; }

.pblock { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.pblock-main {
    flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer;
    font-family: inherit; font-size: .88rem; font-weight: 500; color: var(--ink); transition: border-color .15s, transform .12s;
}
@media (hover: hover) and (pointer: fine) { .pblock-main:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); } }
.pblock-main:disabled { cursor: default; }
.pblock .picon { display: inline-flex; color: var(--primary); flex: 0 0 auto; }
.pblock .picon svg { width: 18px; height: 18px; display: block; }
.pblock .pname { flex: 1; }
.pblock.soon { opacity: .5; }
.pblock.soon .picon { color: var(--ink-soft); }
.soon-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; }
.fav-star { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; color: #cfc9de; display: grid; place-items: center; padding: 0; }
.fav-star svg { width: 16px; height: 16px; fill: none; }
.fav-star.on { color: var(--gold, #e0930a); }
.fav-star.on svg { fill: currentColor; }

/* ---------- Nya blocks utseende ---------- */
.eb-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #3d6fe8; color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.eb-quote { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.4; border-left: 3px solid currentColor; padding-left: 14px; text-align: left; max-width: 100%; opacity: .95; white-space: pre-wrap; }
.eb-reveal { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }
.eb-reveal-art svg { width: 92px; height: 92px; display: block; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); animation: revealPulse 1.8s ease-in-out infinite; }
.eb-reveal-label { font-family: 'Inter', sans-serif; font-weight: 600; font-size: .85rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: 7px 16px; border-radius: 999px; }
@keyframes revealPulse { 0%,100% { transform: scale(1) rotate(-1.5deg); } 50% { transform: scale(1.06) rotate(1.5deg); } }
.eb-link { text-decoration: none; }

/* ---------- Skärmeffekter på scenen ---------- */
.exp-holder.fx-shake { animation: fxShake .6s ease; }
.exp-holder.fx-flash { animation: fxFlash .6s ease; }
@keyframes fxShake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-9px,6px) rotate(-1deg); } 40% { transform: translate(8px,-7px) rotate(1deg); } 60% { transform: translate(-6px,-4px); } 80% { transform: translate(6px,7px); } }
@keyframes fxFlash { 0% { filter: brightness(1); } 30% { filter: brightness(3.2); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .eb-reveal-art svg, .exp-holder.fx-shake, .exp-holder.fx-flash { animation: none; } }

/* ---------- Visuell regel-editor ---------- */
.rule-when-lbl { font-size: .8rem; font-weight: 600; color: var(--primary); margin: 14px 0 6px; }
.rule-sec { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.rule-sec-h { font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); background: var(--surface-2); padding: 7px 12px; border-bottom: 1px solid var(--line); }
.rule-sec-b { padding: 10px 12px; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.logic-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.logic-row.act { align-items: flex-start; }
.act-params { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; min-width: 0; }
select.sm, input.sm { margin: 0; padding: 7px 9px; font-size: .82rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: inherit; min-width: 0; }
input.sm { flex: 1; }
.act-params select.sm, .act-params input.sm { flex: 1 1 90px; }
select.sm:focus, input.sm:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.row-x { flex: 0 0 auto; width: 28px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; font-size: .8rem; padding: 0; }
@media (hover: hover) and (pointer: fine) { .row-x:hover { color: #e0466e; border-color: rgba(224,70,110,.4); } }
.row-add { margin-top: 8px; width: 100%; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--primary); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .row-add:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); } }

/* Quiz-alternativ i inspektorn */
.opt-row { display: flex; align-items: center; gap: 6px; }
.opt-row input.sm { flex: 1; }
.opt-correct { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.opt-correct svg { width: 16px; height: 16px; }
.opt-correct.on { background: #12a06f; border-color: #12a06f; color: #fff; }

/* ---------- Quiz-block på scenen ---------- */
.eb-quiz { display: flex; flex-direction: column; gap: 10px; width: 260px; max-width: 78vw; color: #fff; }
.quiz-q { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt { font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; text-align: center; }
@media (hover: hover) and (pointer: fine) { .quiz-opt:hover:not(:disabled) { background: rgba(255,255,255,.26); } }
.quiz-opt:disabled { cursor: default; opacity: .8; }
.quiz-opt.correct { outline: 2px dashed rgba(255,255,255,.7); }   /* markerad som rätt i editorn */
.quiz-opt.is-correct { background: #12a06f; border-color: #12a06f; }
.quiz-opt.is-wrong { background: #e0466e; border-color: #e0466e; }
.quiz-opt.is-off { opacity: .4; }                                  /* fel-alternativ (ej valt) dämpas */
.quiz-opt:disabled.is-correct, .quiz-opt:disabled.is-wrong { opacity: 1; }  /* facit-färgerna behålls fullt */
.quiz-msg { font-size: .9rem; opacity: .95; }

/* Slump-block: tryck för att slumpa fram ett resultat (slot-machine) */
.eb-random { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 260px; max-width: 82%; color: #fff; cursor: pointer; user-select: none; text-align: center; }
.rnd-prompt { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.rnd-face {
    width: 100%; min-height: 84px; padding: 20px 18px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.25;
    box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .12s, background .2s;
}
@media (hover: hover) and (pointer: fine) { .eb-random:hover .rnd-face { background: rgba(255,255,255,.2); } }
.eb-random:active .rnd-face { transform: scale(.97); }
.eb-random.rolling .rnd-face { animation: rndShake .12s linear infinite; }
.eb-random.landed .rnd-face { animation: rndPop .45s cubic-bezier(.2,1.3,.4,1); background: rgba(255,255,255,.24); }
.rnd-hint { font-family: 'Inter', sans-serif; font-size: .8rem; opacity: .8; min-height: 1em; }
@keyframes rndShake { 0%,100% { transform: translateX(-2px) rotate(-1deg); } 50% { transform: translateX(2px) rotate(1deg); } }
@keyframes rndPop { 0% { transform: scale(.72); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .eb-random.rolling .rnd-face, .eb-random.landed .rnd-face { animation: none; } }

/* Snake-spel */
.eb-snake { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; width: max-content; user-select: none; }
.snake-head { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .9rem; }
.snake-score { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: 4px 14px; border-radius: 999px; letter-spacing: .02em; }
.snake-canvas {
    border-radius: 14px; touch-action: none; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18);
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 17px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 17px);
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.eb-snake.over .snake-canvas { outline: 2px solid #e0466e; }
.eb-snake.won .snake-canvas { outline: 2px solid #12a06f; }
.snake-msg { font-family: 'Inter', sans-serif; font-size: .78rem; opacity: .85; min-height: 1em; text-align: center; max-width: 255px; }
.snake-pad { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.snake-pad .snk-row { display: flex; gap: 6px; }
.snk-btn {
    width: 48px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.14); color: #fff; font-size: 1rem; cursor: pointer; font-family: inherit; line-height: 1;
}
.snk-btn:active { background: rgba(255,255,255,.32); }
.snk-preview { max-width: 72px; max-height: 72px; border-radius: 10px; display: block; margin: 4px 0 8px; box-shadow: var(--shadow-sm); }

/* Lyckohjul */
.eb-wheel { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; width: max-content; user-select: none; }
.wheel-stage { position: relative; width: 260px; height: 260px; }
.wheel-svg { display: block; filter: drop-shadow(0 14px 30px rgba(0,0,0,.35)); }
.wheel-rot { transform-box: fill-box; transform-origin: center; will-change: transform; }
.wheel-pointer { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 2; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.wheel-spin {
    font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: .08em; font-size: .95rem;
    color: #fff; border: none; cursor: pointer; padding: 12px 30px; border-radius: 999px;
    background: linear-gradient(135deg, var(--primary, #3d6fe8), var(--primary-2, #78a6f5));
    box-shadow: 0 12px 26px rgba(61, 111, 232,.45);
}
.wheel-spin:disabled { opacity: .55; cursor: default; }
.wheel-spin:active:not(:disabled) { transform: translateY(1px); }
.wheel-msg { font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 600; min-height: 1.1em; text-align: center; }
.eb-wheel.wheel-won .wheel-msg { font-size: 1.15rem; }

/* Skraplott */
.eb-scratch { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; width: max-content; user-select: none; }
.scr-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-align: center; }
.scr-panels { display: flex; flex-direction: column; gap: 10px; }
.scr-panel { position: relative; width: 230px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.scr-result {
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px 14px; min-height: 30px;
    background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.12));
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff;
}
.scr-cover { position: absolute; top: 0; left: 0; touch-action: none; cursor: pointer; }
.scr-panel.scr-open { animation: rndPop .4s cubic-bezier(.2,1.3,.4,1); }
.scr-panel.scr-edit { border: 1px dashed rgba(255,255,255,.5); }
.scr-panel.scr-edit::after { content: '🪙 ' attr(data-cover); position: absolute; top: 6px; right: 8px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Inter', sans-serif; font-size: .62rem; font-weight: 700; opacity: .75; background: rgba(0,0,0,.28); padding: 2px 8px; border-radius: 999px; }
/* Låst fält (skrapas i ordning): grått lock med hänglås och nummer tills fältet ovanför är framskrapat */
.scr-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: #8a86a8; color: rgba(255,255,255,.85); font-family: 'Inter', sans-serif; font-weight: 800; font-size: .9rem; cursor: not-allowed; touch-action: none; }
.scr-panel.scr-locked .scr-result { visibility: hidden; }
.scr-lock.scr-lock-out { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.scr-panel.scr-shake { animation: scrShake .35s ease; }
@keyframes scrShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Fake-notis */
.eb-notif {
    display: flex; align-items: flex-start; gap: 11px; width: 250px; max-width: 100%;
    padding: 11px 13px; border-radius: 18px; text-align: left; color: #1a1730;
    background: rgba(250,250,252,.94); backdrop-filter: blur(12px);
    box-shadow: 0 16px 38px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.15);
}
.ntf-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3d6fe8, #78a6f5); font-size: 21px; line-height: 1; }
.ntf-ico-img { width: 100%; height: 100%; object-fit: cover; }
.ntf-body { min-width: 0; flex: 1; }
.ntf-top { display: flex; justify-content: space-between; gap: 8px; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: #6b6880; font-weight: 700; }
.ntf-app { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-time { flex: 0 0 auto; }
.ntf-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem; margin-top: 2px; color: #17142b; line-height: 1.2; }
.ntf-text { font-family: 'Inter', sans-serif; font-size: .85rem; color: #33304a; line-height: 1.32; margin-top: 1px; }
/* Glider ner från toppen som en riktig avisering, med en liten studs */
.eb-notif.ntf-in { animation: ntfIn .6s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ntfIn { 0% { opacity: 0; transform: translateY(-170px); } 62% { opacity: 1; transform: translateY(8px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .eb-notif.ntf-in { animation: none; } }

/* Lås upp på födelsedagen */
.eb-bday { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 250px; max-width: 100%; color: #fff; text-align: center; padding: 20px 18px; border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.bd-emoji { font-size: 2.4rem; line-height: 1; }
.bd-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.bd-sub { font-family: 'Inter', sans-serif; font-size: .82rem; opacity: .82; }
.bd-count { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bd-days { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.bd-days b { font-size: 2rem; }
.bd-hms { display: flex; gap: 10px; font-family: 'Inter', sans-serif; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.bd-hms span { display: flex; flex-direction: column; align-items: center; min-width: 40px; padding: 7px 4px; border-radius: 10px; background: rgba(255,255,255,.12); }
.bd-hms b { font-size: 1.2rem; font-family: var(--font-display); }
.bd-btn { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem; color: #fff; border: none; cursor: pointer; padding: 11px 26px; border-radius: 999px; background: linear-gradient(135deg, var(--primary, #3d6fe8), var(--primary-2, #78a6f5)); box-shadow: 0 10px 24px rgba(61, 111, 232,.45); }
.eb-bday.bd-unlocked { animation: rndPop .5s cubic-bezier(.2,1.3,.4,1); }


/* ============================================================
   Scen-baserad editor (omdesign)
   ============================================================ */
.studio-top .crumbs { display: flex; align-items: center; gap: 8px; font-size: .9rem; min-width: 0; }
.crumb-exp { background: none; border: none; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; padding: 0; }
@media (hover: hover) and (pointer: fine) { .crumb-exp:hover { color: var(--primary); } }
.crumb-sep { color: var(--ink-soft); }
.crumb-scene { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.studio-main { grid-template-columns: 244px 1fr 300px; }

/* Scen-panel (tidslinje) */
.scene-panel { border-right: 1px solid var(--line); background: var(--surface-2); padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; }
.sp-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.exp-title { width: 100%; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.exp-title:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.scene-list { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.scene-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .scene-row:hover { border-color: var(--primary); } }
.scene-row.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring); }
.sr-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.scene-row.on .sr-num { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.sr-icon { flex: 0 0 auto; display: inline-flex; color: var(--primary); }
.sr-icon svg { width: 18px; height: 18px; display: block; }
.sr-name { flex: 1; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 2px 2px; }
.sr-tools button { flex: 1 1 auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: .74rem; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .sr-tools button:hover { border-color: var(--primary); } }
.sr-tools button.danger { color: #e0466e; }
.add-scene-btn { margin-top: 12px; width: 100%; padding: 11px; border: 1px dashed var(--primary); border-radius: 11px; background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .add-scene-btn:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); } }

/* Canvas huvud/fot */
.canvas-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ch-num { font-family: var(--mono, monospace); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-name { font-family: var(--font-display); font-weight: 700; }
.canvas-foot { display: flex; gap: 10px; margin-top: 14px; justify-content: center; align-items: center; }

/* Canva-inspirerade ikonknappar uppe (hem/ångra/gör om) */
.cv-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; transition: border-color .15s, background .15s, color .15s; }
@media (hover: hover) and (pointer: fine) { .cv-iconbtn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); } }
.cv-iconbtn svg { width: 18px; height: 18px; }

/* Canva-inspirerat flytande verktygsfält nere */
.cv-foot { gap: 10px; }
.cv-tools { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 6px; box-shadow: 0 3px 12px rgba(32,37,43,.10); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.cv-tools::-webkit-scrollbar { display: none; }
.cv-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--ink); padding: 7px 14px; border-radius: 14px; min-width: 60px; transition: background .15s; }
@media (hover: hover) and (pointer: fine) { .cv-tool:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); } }
.cv-tool:active { transform: scale(.95); }
.cv-ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.cv-ico svg { width: 22px; height: 22px; }
.cv-ico-accent { color: var(--primary); }
.cv-lbl { font-size: .7rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.cv-play { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px var(--ring); transition: background .15s, transform .12s; }
@media (hover: hover) and (pointer: fine) { .cv-play:hover { background: #3363d6; } }
.cv-play:active { transform: scale(.92); }
.cv-play svg { width: 22px; height: 22px; margin-left: 2px; }

/* Flöde ("vad händer sen?") */
.flow-row { margin-bottom: 12px; }
.flow-lbl { font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.flow-row .select { margin-top: 0; }

/* "Fortsätt →" i spelaren */
.exp-continue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer; background: rgba(255,255,255,.92); color: #221; box-shadow: 0 8px 22px rgba(0,0,0,.25); }

/* Överlägg (modaler) */
.modal-ov { position: fixed; inset: 0; z-index: 900; background: rgba(20,16,40,.6);   /* över studions header (z 200) – annars döljs dialogens rubrik och ✕ under den på mobil */ backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto; padding: 18px 20px 22px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head b { font-family: var(--font-display); font-size: 1.15rem; }
.modal-x { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .modal-x:hover { color: var(--ink); } }
.pal-body { max-height: 60vh; }

/* Scen-typväljare */
.scene-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scene-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); cursor: pointer; font-family: inherit; font-weight: 600; font-size: .88rem; color: var(--ink); position: relative; }
@media (hover: hover) and (pointer: fine) { .scene-pick:hover:not(.soon) { border-color: var(--primary); transform: translateY(-2px); } }
.scene-pick .sp-icon { display: inline-flex; color: var(--primary); }
.scene-pick .sp-icon svg { width: 26px; height: 26px; display: block; }
.scene-pick.soon { opacity: .5; cursor: default; }
.scene-pick.soon .sp-icon { color: var(--ink-soft); }

/* Översiktskarta */
.ov-modal { max-width: 420px; }
.ov-map { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ov-card { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) { .ov-card:hover { border-color: var(--primary); } }
.ov-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg,var(--primary),var(--primary-2)); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.ov-ic { display: inline-flex; color: var(--primary); }
.ov-ic svg { width: 18px; height: 18px; display: block; }
.ov-name { font-weight: 600; }
.ov-conn { width: 2px; height: 18px; background: var(--line); }
.ov-branch { display: flex; gap: 10px; margin: 8px 0; font-size: .78rem; font-family: var(--mono, monospace); }
.ov-yes { color: var(--green, #12a06f); } .ov-no { color: #e0466e; }

@media (max-width: 900px) {
    .studio-main { display: flex; flex-direction: column; }
    .scene-panel { border-right: none; border-bottom: 1px solid var(--line); max-height: 34vh; }
    .studio-insp { border-left: none; border-top: 1px solid var(--line); }
    .scene-pick-grid { grid-template-columns: 1fr 1fr; }
}

/* Flödes-rubrik + tap-hint i spelaren */
.flow-cap { font-size: .82rem; color: var(--ink-soft); margin-bottom: 10px; }
.exp-taphint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4; color: rgba(255,255,255,.85); font-size: .85rem; font-style: italic; animation: tapPulse 1.6s ease-in-out infinite; }
@keyframes tapPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .exp-taphint { animation: none; } }

/* ---------- Context-meny ---------- */
.ctx-menu { position: fixed; z-index: 200; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; font-family: var(--sans, inherit); }
.ctx-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .9rem; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ctx-item:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } }
.ctx-item.danger { color: #e0466e; }
@media (hover: hover) and (pointer: fine) { .ctx-item.danger:hover { background: color-mix(in srgb, #e0466e 12%, transparent); color: #e0466e; } }
.ctx-item.disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .ctx-item.disabled:hover { background: none; color: var(--ink); } }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 6px; }

/* ---------- Dölj / lås ---------- */
.eb-wrap.hidden { opacity: .4; }
.eb-wrap.hidden::before, .eb-wrap.locked::before { content: ""; }
.eb-wrap.locked { cursor: default; }
.stage-chip.hidden { opacity: .5; }
.eb-mark { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; background: rgba(0,0,0,.55); color: #fff; padding: 2px 6px; border-radius: 999px; }
.eb-wrap .eb-mark { position: absolute; top: -9px; right: -9px; }
.stage-chip .eb-mark { margin-left: 6px; background: rgba(255,255,255,.25); }

/* ============================================================
   Text-blockets kontroller + animationer (referensblock)
   ============================================================ */
.tog-row { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.tog-gap { flex: 1; }
.tog { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font-family: inherit; font-size: .95rem; }
@media (hover: hover) and (pointer: fine) { .tog:hover { border-color: var(--primary); } }
.tog.on { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-color: transparent; }
.slider-lbl { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 12px; position: relative; }
.slider-lbl .sv { position: absolute; right: 0; top: 0; font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.slider-lbl input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--primary); }

/* Direktredigering på canvasen */
.eb-text.editing { outline: 2px dashed rgba(255,255,255,.8); outline-offset: 4px; cursor: text; min-width: 40px; }

/* In-animationer */
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes in-slide { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes in-zoom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes in-pop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
/* Loopande animationer under visning */
.loop-pulse { animation: loop-pulse 1.6s ease-in-out infinite; }
.loop-float { animation: loop-float 3s ease-in-out infinite; }
.loop-shake { animation: loop-shake .5s linear infinite; }
.loop-glitch { animation: loop-glitch 1.4s steps(2) infinite; }
@keyframes loop-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes loop-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes loop-shake { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-2px,1px) rotate(-1deg); } 75% { transform: translate(2px,-1px) rotate(1deg); } }
@keyframes loop-glitch { 0%,100% { transform: translate(0,0); opacity: 1; } 40% { transform: translate(-3px,1px); opacity: .8; } 60% { transform: translate(3px,-1px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loop-pulse, .loop-float, .loop-shake, .loop-glitch { animation: none; } }

/* ---------- Video-block ---------- */
.eb-video { width: 220px; max-width: 100%; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.3); display: block; background: #000; }
.eb-video.fill { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.eb-video.placeholder { width: 200px; min-height: 120px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.5); color: #fff; font-size: .85rem; text-align: center; padding: 12px; border-radius: 14px; }
.eb-video.placeholder.fill { width: 100%; height: 100%; }
.exp-item.item-fill { left: 0 !important; top: 0 !important; transform: none !important; width: 100%; height: 100%; max-width: none; }
.eb-wrap.wrap-fill { left: 0 !important; top: 0 !important; transform: none !important; width: 100%; height: 100%; max-width: none; }

/* ============================================================
   Reveal-block (present/kuvert/dörr/lås/skrapa/gardin/blur)
   ============================================================ */
.eb-reveal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; cursor: pointer; user-select: none; }
.eb-reveal.rv-fill { width: 100%; height: 100%; gap: 0; }
.rv-art { display: block; }
.rv-art svg { width: 92px; height: 92px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); animation: revealPulse 1.8s ease-in-out infinite; }
.rv-label { position: relative; z-index: 3; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .85rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: 7px 16px; border-radius: 999px; }
.rv-fill .rv-label { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); pointer-events: none; }
@keyframes revealPulse { 0%,100% { transform: scale(1) rotate(-1.5deg); } 50% { transform: scale(1.06) rotate(1.5deg); } }
.eb-reveal.opened .rv-art { animation: revealOpen .6s ease forwards; }
@keyframes revealOpen { to { transform: scale(1.5) translateY(-14px); opacity: 0; } }
.eb-reveal.opened .rv-label { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .rv-art svg { animation: none; } }

/* Håll inne-progress */
.rv-hold-bar { position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: rgba(255,255,255,.9); border-radius: 3px; }

/* Skrapyta */
.rv-scratch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; cursor: crosshair; border-radius: inherit; }

/* Gardin */
.rv-cur { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg,#7a1f2b,#4a0d1a); z-index: 2; transition: transform .6s ease; box-shadow: inset 0 0 40px rgba(0,0,0,.5); }
.rv-cur.l { left: 0; } .rv-cur.r { right: 0; }
.eb-reveal.opened .rv-cur.l { transform: translateX(-100%); }
.eb-reveal.opened .rv-cur.r { transform: translateX(100%); }

/* Blur */
.rv-blur-layer { position: absolute; inset: 0; z-index: 2; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,.12); transition: opacity .6s ease; }
.eb-reveal.opened .rv-blur-layer { opacity: 0; }

/* Lås-knappsats */
.rv-keypad { display: flex; gap: 6px; margin-top: 4px; }
.rv-code { width: 96px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.15); color: #fff; text-align: center; font-family: inherit; }
.rv-code-btn { padding: 8px 12px; border: none; border-radius: 8px; background: #fff; color: #221; font-weight: 700; cursor: pointer; font-family: inherit; }
.eb-reveal.rv-wrong { animation: rvShake .4s; }
@keyframes rvShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* ============================================================
   Scen-övergångar
   ============================================================ */
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-crossfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-slideLeft { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes t-slideRight { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes t-slideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes t-slideDown { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@keyframes t-zoomIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes t-zoomOut { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes t-blur { from { opacity: 0; filter: blur(20px); } to { opacity: 1; filter: blur(0); } }
@keyframes t-flash { 0% { opacity: 0; filter: brightness(4); } 30% { opacity: 1; filter: brightness(4); } 100% { opacity: 1; filter: brightness(1); } }

/* ============================================================
   Jumpscare – media + effektvarianter
   ============================================================ */
.js-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js-overlay.on { opacity: 1; }
@keyframes jsZoom { from { transform: scale(1); } to { transform: scale(2.2); } }
@keyframes jsQuickZoom { 0% { transform: scale(1); } 100% { transform: scale(1.8); } }
@keyframes jsRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes jsGlitch { 0% { transform: translate(0,0); } 25% { transform: translate(-6px,3px); } 50% { transform: translate(5px,-4px); } 75% { transform: translate(-4px,-2px); } 100% { transform: translate(0,0); } }
@keyframes jsReveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js-overlay { animation: none !important; } .js-media { animation: none !important; } }

/* ============================================================
   Scenens tidslinje
   ============================================================ */
.scene-timeline { width: 100%; max-width: 520px; margin: 16px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); }
.tl-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-weight: 700; margin-bottom: 10px; }
.tl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tl-name { flex: 0 0 92px; font-size: .76rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track { flex: 1; height: 12px; background: var(--surface-2); border-radius: 6px; position: relative; overflow: hidden; }
.tl-bar { position: absolute; top: 0; height: 12px; width: 30%; min-width: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.tl-t { flex: 0 0 auto; font-size: .7rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }

/* ============================================================
   UX-förbättringar: lager, zoom, badges, problem, översikt, preview
   ============================================================ */
/* Lager-lista */
.sp-head2 { margin-top: 18px; }
.layer-list { display: flex; flex-direction: column; gap: 4px; }
.ll-empty { color: var(--ink-soft); font-size: .8rem; padding: 4px 2px; }
.ll-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ll-row:hover { border-color: var(--primary); } }
.ll-row.on { border-color: var(--primary); background: #e9f0fe; }
.ll-icon { display: inline-flex; color: var(--primary); flex: 0 0 auto; }
.ll-icon svg { width: 16px; height: 16px; display: block; }
.ll-name { flex: 1; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-tag { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; }

/* Zoom */
.studio-canvas { justify-content: flex-start; }
.canvas-zoomwrap { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; min-height: 0; }
.zoom-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.zoom-bar button { width: 32px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 1rem; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .zoom-bar button:hover { border-color: var(--primary); } }
.zoom-bar .zoom-fit { width: auto; padding: 0 12px; font-size: .82rem; font-weight: 600; }
.zoom-bar #zoom-val { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; }

/* Start / Slut-märken */
.sr-badge { flex: 0 0 auto; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; }
.sr-badge.start { background: color-mix(in srgb, var(--green, #12a06f) 18%, transparent); color: var(--green, #12a06f); }
.sr-badge.end { background: color-mix(in srgb, var(--magenta) 18%, transparent); color: var(--magenta); }

/* Problem-knapp + panel */
#btn-problems.has-problems { color: #e0466e; border-color: rgba(224,70,110,.4); }
.prob-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e0466e; color: #fff; font-size: .68rem; font-weight: 700; margin-left: 6px; }
.prob-list { display: flex; flex-direction: column; gap: 8px; }
.prob-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: .9rem; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .prob-item:hover { border-color: var(--primary); } }
.prob-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.prob-item.error .prob-dot { background: #e0466e; }
.prob-item.warn .prob-dot { background: var(--gold, #e0930a); }
.prob-none { color: var(--green, #12a06f); font-weight: 600; padding: 8px 2px; text-align: center; }

/* Tydligare inspektor-rubriker */
.insp-section { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 20px 0 2px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Översikt – rikare kort */
.ov-card { display: block; text-align: left; }
.ov-top { display: flex; align-items: center; gap: 10px; }
.ov-sum { font-size: .76rem; color: var(--ink-soft); margin: 7px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-flow { font-family: var(--mono, monospace); font-size: .74rem; color: var(--primary); }

/* Testläge (preview) topbar */
.pv-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 62; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: rgba(20,16,40,.55); backdrop-filter: blur(6px); }
.pv-title { color: #fff; font-size: .85rem; opacity: .9; }
.pv-actions { display: flex; gap: 8px; align-items: center; }

/* Problem-panel: räknare + rad-affordance */
.prob-count { font-size: .9rem; color: var(--ink-soft); margin: 0 0 12px; }
.prob-item .prob-msg { flex: 1; }
.prob-item .prob-go { color: var(--ink-soft); font-weight: 700; }

/* Lugnare Start/Slut-märken – ingen "chip"/AI-look, bara diskret text */
.sr-badge { padding: 0; border-radius: 0; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.sr-badge.start { background: none; color: var(--primary); }
.sr-badge.end { background: none; color: var(--ink-soft); }

/* Dragbar tidslinje */
.tl-track { cursor: pointer; }
.tl-bar { cursor: grab; }
.tl-bar:active { cursor: grabbing; }

/* Ta bort den mörka faden under telefonen – bara en mjuk, ljus skugga */
.device-frame { box-shadow: 0 6px 22px rgba(32, 37, 43,.10); }

/* Dra scener i vänsterlistan */
.sr-grip { flex: 0 0 auto; color: var(--ink-soft); opacity: .45; cursor: grab; font-size: .8rem; letter-spacing: -3px; margin-right: -2px; }
@media (hover: hover) and (pointer: fine) { .scene-row:hover .sr-grip { opacity: .8; } }
.scene-row.dragging { opacity: .45; }
.scene-row.drag-over { box-shadow: inset 0 3px 0 var(--primary); border-color: var(--primary); }

/* Storlekshandtag på markerat block */
.eb-handle { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; border-radius: 4px; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: nwse-resize; z-index: 6; transform-origin: 100% 100%; touch-action: none; }

/* Utdragbar ruta: blocket får explicit bredd/höjd och innehållet fyller den */
.eb-wrap.boxed, .exp-item.boxed { max-width: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.boxed .eb-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.boxed .eb-quote { width: 100%; }
.boxed .eb-image, .boxed .eb-video { width: 100% !important; height: 100% !important; object-fit: cover; }
.boxed .eb-button, .boxed .eb-reveal { width: 100%; height: 100%; }

/* Storlekshandtaget helt UTANFÖR blockhörnet så det aldrig skymmer texten eller krockar med flytta */
.eb-handle { right: -22px; bottom: -22px; width: 18px; height: 18px; }
.eb-wrap.selected { cursor: move; }

/* FIX: block ska vara lika breda som innehållet – inte krympa när de flyttas
   åt höger (absolut positionering + shrink-to-fit gav smala kolumner). */
.eb-wrap, .exp-item { width: max-content; }
.eb-wrap.wrap-fill, .exp-item.item-fill { width: 100%; }

/* Nära telefonkanten (klass .in sätts av studion) flyttas handtaget in i hörnet så det inte klipps bort. */
.eb-handle.in { right: 3px; bottom: 3px; }

/* ============================================================
   Inspektor-skal + mobil/touch-layout (app-känsla på telefon)
   ============================================================ */
/* Desktop: höger kolumn med rullande innehåll, dölj sheet-delar */
.studio-insp { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.insp-body { flex: 1; overflow-y: auto; padding: 18px; min-height: 0; }
.sheet-head, .sheet-backdrop { display: none; }

@media (max-width: 1032px) {
    /* Toppen kompakt */
    .studio-top { padding: 8px 10px; gap: 8px; }
    .crumbs { font-size: .82rem; min-width: 0; overflow: hidden; }
    .studio-actions .btn { padding: 8px 11px; }
    #btn-overview span, .crumb-sep { }

    /* Scener som horisontell rad högst upp */
    .studio-main { display: flex; flex-direction: column; }
    .scene-panel { order: 0; border: none; border-bottom: 1px solid var(--line); max-height: none;
        padding: 8px 10px; display: flex; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; }
    .scene-panel .sp-head, .scene-panel .sp-head2, .scene-panel #exp-title, .scene-panel #layer-list { display: none; }
    .scene-list { flex-direction: row; flex: 0 0 auto; gap: 8px; }
    .scene-row { flex: 0 0 auto; padding: 9px 12px; }
    .sr-tools { display: none; }
    .add-scene-btn { flex: 0 0 auto; width: auto; margin: 0; padding: 9px 13px; white-space: nowrap; }

    /* Canvas stor, telefonen fyller bredden */
    .studio-canvas { padding: 8px; flex: 1; justify-content: flex-start; }
    .canvas-head { display: none; }
    .canvas-zoomwrap { align-items: flex-start; padding-top: 4px; }
    .device-frame { width: 92vw; max-width: 440px; border-radius: 34px; border-width: 10px; padding: 0; }
    .zoom-bar, .scene-timeline { display: none; }

    /* Flytande verktygsfält nederst (Canva-stil) – i flödet, ej över telefonen */
    .canvas-foot { position: relative; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); margin-top: 10px; z-index: 30; }
    .cv-tools { padding: 7px; }
    .cv-tool { min-width: 62px; padding: 8px 14px; }

    /* Inställningar som bottom sheet */
    .sheet-backdrop { display: block; position: fixed; inset: 0; background: rgba(20,16,40,.4); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .22s; }
    .sheet-backdrop.show { opacity: 1; pointer-events: auto; }
    .studio-insp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 80vh; background: var(--surface);
        border: none; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px rgba(0,0,0,.28);
        transform: translateY(103%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
    .studio-insp.open { transform: translateY(0); }
    .sheet-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 10px; flex: 0 0 auto; }
    .sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--line); }
    .sheet-close { position: absolute; right: 10px; top: 7px; border: none; background: none; color: var(--primary); font-weight: 700; font-size: .95rem; padding: 8px 10px; }
    .insp-body { padding: 2px 16px 26px; }

    /* Större touch-ytor */
    .studio-insp .btn, .studio-insp select, .studio-insp input[type=text], .studio-insp input[type=number], .studio-insp textarea { min-height: 44px; font-size: 1rem; }
    .studio-insp input[type=range] { height: 30px; }
    select.sm, input.sm { min-height: 40px; }
    .chip, .tog, .op, .rail-block, .cat-btn, .pblock-main, .scene-pick { min-height: 44px; }
    .eb-handle { width: 26px; height: 26px; right: -30px; bottom: -30px; }
    .eb-handle.in { right: 4px; bottom: 4px; }
    .modal-card { max-width: 100%; max-height: calc(100dvh - 20px); }   /* dvh: den synliga höjden när webbläsarens fält syns */
}

@media (max-width: 1032px) {
    .insp-back { display: none; }   /* sheetets egen "Klar" räcker på mobil */
}

/* Tidslinjen som en bred rad längst ner (över hela editorn), dator + mobil */
.scene-timeline { width: 100%; max-width: none; margin: 0; border: none; border-top: 1px solid var(--line);
    border-radius: 0; background: var(--surface); padding: 8px 16px; flex: 0 0 auto; max-height: 150px; overflow-y: auto; box-shadow: none; }
@media (max-width: 1032px) { .scene-timeline { display: block; max-height: 108px; padding: 6px 12px; } }

/* ============================================================
   Filmremsa: alla scener bredvid varandra i mitten
   ============================================================ */
.studio-canvas { justify-content: flex-start; align-items: stretch; }
.canvas-strip { display: flex; align-items: flex-start; gap: 30px; overflow-x: auto; overflow-y: hidden;
    padding: 10px 26px 14px; flex: 1; min-height: 0; width: 100%; }
.scene-slot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slot-label { font-size: .78rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.slot-num { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 800; }
.slot-nm { margin-left: 6px; color: var(--ink); }
/* Liten pil mellan scenerna i "Alla scener" */
.scene-arrow { flex: 0 0 auto; align-self: center; display: flex; color: var(--primary); opacity: .5; }
.scene-arrow svg { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) { .slot-label:hover { color: var(--ink); } }
.scene-slot.active .slot-label { color: var(--primary); background: #e9f0fe; }
/* Skuggan och markeringsringen ligger på ett omslag (.frame-wrap::before) i stället för på ramen: ramen har ett
   GPU-lager (skalad scen + overflow hidden) och i Chrome kunde dess box-shadow ritas som ett vitt fält. */
.frame-wrap { position: relative; border-radius: 40px; }
.frame-wrap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: none; pointer-events: none; transition: box-shadow .15s; }   /* bara det markerade kortet har skugga */
.scene-slot.active .frame-wrap::before { box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 0 5px #fff, 0 0 0 8px var(--primary); }
.scene-slot .device-frame { outline: none; box-shadow: none !important; position: relative; }
.zoom-bar, .canvas-foot { justify-content: center; }

/* ---------- Läges-växel + filmremsans finish ---------- */
.canvas-head { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 2px; flex: 0 0 auto; }
.mode-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.mode-btn { border: none; background: none; padding: 7px 16px; border-radius: 999px; font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.mode-btn.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.canvas-head .ch-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

.canvas-strip.single { justify-content: center; }
.canvas-strip.single .slot-label { display: none; }
.slot-label { transition: color .15s, background .15s; }

@media (max-width: 1032px) {
    .canvas-head { display: flex; }
    .mode-btn { padding: 8px 14px; }
}

/* ---------- Snygga reglage (matchar designsystemet) ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px;
    background: var(--line); cursor: pointer; margin: 12px 0 10px; }
input[type=range]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -5px;
    border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .12s; }
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.18); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: transparent; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.25); }

@media (max-width: 1032px) {
    .studio-insp input[type=range] { height: 10px; }
    input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -7px; }
    input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
}

/* ---------- Snygg, diskret scrollbar (filmremsan m.fl.) ---------- */
.canvas-strip, .studio-insp, .studio-rail, .scene-panel, .insp-body, .pal-body, .modal-card { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.canvas-strip::-webkit-scrollbar { height: 10px; width: 10px; }
.studio-insp::-webkit-scrollbar, .studio-rail::-webkit-scrollbar, .scene-panel::-webkit-scrollbar, .insp-body::-webkit-scrollbar, .pal-body::-webkit-scrollbar, .modal-card::-webkit-scrollbar { width: 10px; height: 10px; }
.canvas-strip::-webkit-scrollbar-track,
.studio-insp::-webkit-scrollbar-track, .studio-rail::-webkit-scrollbar-track, .scene-panel::-webkit-scrollbar-track,
.insp-body::-webkit-scrollbar-track, .pal-body::-webkit-scrollbar-track, .modal-card::-webkit-scrollbar-track { background: transparent; }
.canvas-strip::-webkit-scrollbar-thumb,
.studio-insp::-webkit-scrollbar-thumb, .studio-rail::-webkit-scrollbar-thumb, .scene-panel::-webkit-scrollbar-thumb,
.insp-body::-webkit-scrollbar-thumb, .pal-body::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
@media (hover: hover) and (pointer: fine) { .canvas-strip::-webkit-scrollbar-thumb:hover, .studio-insp::-webkit-scrollbar-thumb:hover, .studio-rail::-webkit-scrollbar-thumb:hover, .scene-panel::-webkit-scrollbar-thumb:hover, .insp-body::-webkit-scrollbar-thumb:hover, .pal-body::-webkit-scrollbar-thumb:hover, .modal-card::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary) 45%, var(--line)); background-clip: padding-box; } }

/* ============================================================
   Mobil-preview: storleksväljare, lugn zoomrad, safe areas
   ============================================================ */
.zoom-bar { gap: 10px; flex-wrap: wrap; }
.zb-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; }
.size-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.size-toggle button { border: none; background: none; padding: 6px 13px; border-radius: 999px; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.size-toggle button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.zoom-bar .zoom-fit { padding: 8px 18px; border: 1px solid var(--primary); border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 700; font-family: inherit; font-size: .85rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .zoom-bar .zoom-fit:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); } }
.zb-mini { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { .zb-mini:hover { border-color: var(--primary); } }

/* Safe areas + home-indicator – diskret, bara i editor-scenerna */
.safe-guides { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.safe-guides::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5.5%; border-bottom: 1px dashed rgba(255,255,255,.16); }
.safe-guides::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4%; border-top: 1px dashed rgba(255,255,255,.16); }
.home-ind { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 32%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.35); }

/* Lugnare telefon-fokus: minimal ram + diskret markering */
.scene-slot .device-frame { background: #0b0a11; border-color: #0b0a11; border-width: 10px; padding: 0; }
.eb-wrap.selected { outline: 2px solid var(--primary); outline-offset: 3px; box-shadow: none; }

/* ============================================================
   Riktigt preview-läge – lugn neutral scen, centrerad telefon
   ============================================================ */
.pv2 {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(1200px 900px at 50% 28%, #f3f2f7, #e3e2ea);
}
.pv2-phone { display: flex; align-items: center; justify-content: center; }
/* Tydligt kryss uppe i högra hörnet – alltid synligt */
.pv2-close {
    position: absolute; top: 14px; right: 14px; z-index: 64;
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    border: none; background: rgba(20,16,40,.82); color: #fff; font-size: 1.15rem; line-height: 1;
    backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: background .15s, transform .12s;
}
@media (hover: hover) and (pointer: fine) { .pv2-close:hover { background: rgba(20,16,40,.96); } }
.pv2-close:active { transform: scale(.92); }
.pv2-phone .device-frame {
    box-shadow: 0 24px 70px rgba(30, 24, 60, .28), 0 4px 14px rgba(30, 24, 60, .16);
}
/* Diskret kontroll – syns faintt, klarnar när muspekaren förs mot toppen */
.pv2-hotzone { position: absolute; top: 0; left: 0; right: 0; height: 76px; z-index: 62; }
.pv2-tools {
    position: absolute; top: 16px; left: 50%; transform: translate(-50%, 0);
    z-index: 63; display: flex; align-items: center; gap: 8px;
    opacity: .92; transition: opacity .22s ease; pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) { .pv2-hotzone:hover ~ .pv2-tools, .pv2-tools:hover { opacity: 1; } }
.pv2-exit {
    border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer;
    background: rgba(20, 16, 40, .82); color: #fff; font-family: inherit; font-size: .85rem;
    font-weight: 600; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
@media (hover: hover) and (pointer: fine) { .pv2-exit:hover { background: rgba(20, 16, 40, .95); } }
.pv2-restart {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.9); color: var(--ink); font-size: 1rem; line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
@media (hover: hover) and (pointer: fine) { .pv2-restart:hover { background: #fff; } }
@media (prefers-color-scheme: dark) {
    .pv2 { background: radial-gradient(1200px 900px at 50% 28%, #201c2c, #16131f); }
}

/* ============================================================
   Mobil-layout (≤1032px) – app-känsla, fyller skärmen, inget
   överflöd eller vit tomrum. CSS-only, rör inte JS-logiken.
   Denna block ligger sist så den vinner över tidigare regler.
   ============================================================ */
@media (max-width: 1032px) {
    /* Fyll exakt skärmen, ingen sid-scroll (svh = minsta synliga höjd,
       så inget vitt tomrum uppstår när adressfältet syns) */
    html { height: 100%; }
    body.studio-page { height: 100svh; min-height: 100svh; overflow: hidden; }
    body.studio-page main, .studio { flex: 1 1 auto; min-height: 0; }
    .studio-main { flex: 1 1 auto; min-height: 0; }
    .studio-canvas { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 4px 6px; }

    /* Topprad: kompakt. Dölj brödsmulor-text + redundant "Förhandsvisa"
       (nedre raden har "Spela denna scen") så knapparna får plats. */
    .studio-top { gap: 6px; padding: 7px 8px; }
    .crumbs .crumb-exp, .crumbs .crumb-sep, .crumbs .crumb-scene { display: none; }
    .studio-actions { gap: 6px; flex: 0 0 auto; }
    .studio-actions .btn { padding: 8px 10px; font-size: .82rem; }
    /* Musik + Förhandsvisa finns i nedre verktygsfältet – dölj toppdubbletterna */
    #btn-preview, #btn-music { display: none; }

    /* Scenrad: kompakta chips. Upp till 5 scener KRYMPER och fyller raden
       (ingen svep). Vid 6+ blir det horisontell scroll istället. */
    .scene-panel { padding: 7px 8px; gap: 6px; }
    .scene-list { flex-direction: row; gap: 6px; min-width: 0; }
    .scene-list.fit { flex: 1 1 auto; }
    .scene-list.scroll { flex: 0 0 auto; }
    .scene-row { width: auto; padding: 8px 8px; gap: 6px; overflow: hidden; }
    .scene-list.fit .scene-row { flex: 1 1 0; min-width: 0; }
    .scene-list.scroll .scene-row { flex: 0 0 auto; width: 82px; }
    .scene-row .sr-grip, .scene-row .sr-icon, .scene-row .sr-badge { display: none; }
    .scene-row .sr-num { flex: 0 0 auto; }
    .scene-row .sr-name { flex: 1 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Kompakt "+"-knapp så flikarna får plats */
    .add-scene-btn { flex: 0 0 auto; width: 42px; min-width: 42px; margin: 0; padding: 9px 0; font-size: 0; white-space: nowrap; }
    .add-scene-btn::after { content: '+'; font-size: 1.4rem; line-height: 1; }

    /* Filmremsa: en telefon i taget, snäpp horisontellt. Telefonens
       storlek räknas ut deterministiskt i JS (sizePhones) – contain. */
    .canvas-strip {
        flex: 1 1 auto; min-height: 0; align-items: center; gap: 14px;
        overflow-x: auto; overflow-y: hidden; padding: 6px 10px;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    }
    .canvas-strip.single { justify-content: center; }
    .scene-slot { scroll-snap-align: center; justify-content: flex-start; }
    .canvas-strip .device-frame { flex: 0 0 auto; align-self: center; }

    /* Nedre knappraden alltid synlig längst ner */
    .canvas-foot { flex: 0 0 auto; }
    /* Rubriker/text i editorn ska aldrig brytas mitt i ett ord */
    .eb-text { overflow-wrap: normal; word-break: normal; }
    .eb-wrap { max-width: 90%; }
}

/* Äkta telefon-skala: scenen renderas i 390px och skalas via transform.
   Ramen klipper den skalade scenen snyggt innanför bezeln. */
.scene-slot .device-frame, .pv2-phone .device-frame { overflow: hidden; }
.canvas-strip .stage { transform-origin: top left; }

/* ============================================================
   Mobil-chrome: inget ska sticka ut i sidled. Rensar topp,
   läges-växlare och nedre knapprad så det ser byggt-för-telefon ut.
   ============================================================ */
@media (max-width: 1032px) {
    body.studio-page { overflow-x: hidden; }

    /* Låt flex-kedjan krympa under innehållet (annars trycker de breda
       scen-flikarna/scenen ut hela studion bredare än skärmen). */
    .studio, .studio-main, .studio-canvas, .scene-panel { min-width: 0; }

    /* Topp: behåll tillbaka-knappen men dölj logo/brödsmulor; åtgärderna tar plats */
    .studio-top { justify-content: flex-start; }
    .studio-top .crumbs { flex: 0 0 auto; }
    .studio-top .crumbs .brand-spark,
    .studio-top .crumb-exp,
    .studio-top .crumb-sep,
    .studio-top .crumb-scene { display: none; }
    .studio-actions { margin-left: auto; }
    /* Kompakt kontochip: bara avataren syns på liten skärm */
    .st-account-name, .st-caret { display: none; }
    .st-account { padding: 4px; }

    /* Läges-växlare centrerad, dölj scen-namnet (syns i flikarna ovan) */
    .canvas-head { padding: 6px 0 2px; gap: 0; }
    .canvas-head .ch-name { display: none; }

    /* Flytande verktygsfält nere (Canva-stil) */
    .cv-foot { padding: 6px 10px 10px; }

    /* Mjukare markering av aktiv scen */
    .scene-slot.active .frame-wrap::before { box-shadow: 0 10px 26px rgba(0,0,0,.26), 0 0 0 4px #fff, 0 0 0 6px var(--primary); }
    .frame-wrap { border-radius: 34px; }
}

/* ============================================================
   Mobil-redigering: lättare att nå, topbar som ryms, scen-flytt
   som funkar på touch. (CSS-only utöver JS-tap-öppning.)
   ============================================================ */
@media (max-width: 1032px) {
    /* Topbar ska alltid rymma Publicera – dölj "Testa på telefon"
       (du är redan i telefonen; Publicera ger länk + QR). */
    #btn-testphone { display: none; }
    #btn-problems { padding: 8px 10px; }

    /* Redigeringspanelen tar inte hela skärmen – blocket syns ovanför */
    .studio-insp { max-height: 66vh; }

    /* Scen-flytt sker nu via drag i greppet (⋮⋮) – arrangeringsknapparna
       behövs inte i den horisontella raden. */
    .scene-panel .sr-tools { display: none; }
}

/* ============================================================
   Drag-and-drop (lyft & släpp) – scener, element, filmremsa. Touch + mus.
   ============================================================ */
/* Greppbara ytor: ingen native-scroll/markering så draget blir rent.
   (Listorna scrollas manuellt vid snabb dragning i JS.) */
.scene-row, .ll-row, .slot-label {
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab;
}
.sr-grip { display: inline-flex; }
.ll-grip { flex: 0 0 auto; color: var(--ink-soft); opacity: .5; font-size: .8rem; letter-spacing: -3px; }
@media (hover: hover) and (pointer: fine) { .ll-row:hover .ll-grip { opacity: .8; } }
.slot-grip { opacity: .5; margin-right: 5px; letter-spacing: -3px; font-size: .85rem; }
@media (hover: hover) and (pointer: fine) { .slot-label:hover .slot-grip { opacity: .85; } }

/* Den svävande kopian som följer pekaren */
.drag-clone {
    z-index: 9999; pointer-events: none; opacity: .97; cursor: grabbing;
    box-shadow: 0 20px 48px rgba(32, 37, 43,.4); transform: scale(1.03); border-radius: 12px;
}
/* Luckan (originalet) som visar var det landar */
.drag-placeholder { opacity: .001; }
.scene-row.drag-placeholder, .ll-row.drag-placeholder {
    opacity: 1; background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: 2px dashed var(--primary); box-shadow: none;
}
.scene-row.drag-placeholder > *, .ll-row.drag-placeholder > * { visibility: hidden; }
.scene-slot.drag-placeholder { opacity: .28; }
body.dragging-active { cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* Element-lista i scen-panelen – bara på mobil (desktop har den i vänsterpanelen) */
.insp-layers { display: none; }
.insp-layers .ll-list { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1032px) {
    .insp-layers { display: block; margin-bottom: 8px; }
    .insp-layers .ll-row { min-height: 46px; }
}

/* ============================================================
   Liveliness & polish – gör Studion mindre statisk och roligare
   ============================================================ */
/* Mjuka övergångar på allt interaktivt */
.btn, .scene-row, .rail-block, .pblock-main, .cat-btn, .mode-btn, .size-toggle button,
.slot-label, .ll-row, .chip, .tog, .op, .scene-pick, .bg-swatch, .zb-mini, .zoom-fit, .add-scene-btn {
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .2s, border-color .2s, color .15s, opacity .2s;
}

/* Mjuk intro när appen laddas (en gång) */
.studio-top { animation: uiDown .45s cubic-bezier(.2,.8,.2,1) both; }
.scene-panel { animation: uiFade .5s ease .04s both; }
.studio-canvas { animation: uiUp .55s cubic-bezier(.2,.8,.2,1) .06s backwards; }   /* 'backwards' (inte 'both'): annars ligger en transform kvar efter intron och verktygsraden (position: fixed) hamnar utanför skärmen på surfplattor */
.studio-insp { animation: uiFade .5s ease .08s both; }
@keyframes uiDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uiUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }

/* Telefonerna: mjuk hovring på desktop + levande aktiv scen */
@media (min-width: 1033px) {
    .scene-slot .frame-wrap { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
    @media (hover: hover) and (pointer: fine) { .scene-slot:not(.active) .frame-wrap:hover { transform: translateY(-4px); } }
    @media (hover: hover) and (pointer: fine) { .scene-slot:not(.active) .frame-wrap:hover::before { box-shadow: 0 10px 24px rgba(28,24,60,.18); } }   /* lätt lyft vid hover, ingen permanent skugga */
}
/* markerad ram: se .scene-slot.active .device-frame ovan (statisk, liten skugga + ring) */
/* framePulse borttagen – se .scene-slot.active .device-frame */

/* Lyft vid hovring – paletten, sidopanelen, scenval, scenchips */
@media (hover: hover) and (pointer: fine) { .pblock-main:hover, .cat-btn:hover, .rail-block:hover, .scene-pick:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,24,60,.14); } }
@media (hover: hover) and (pointer: fine) { .scene-row:hover { transform: translateY(-1px); } }
@media (hover: hover) and (pointer: fine) { .bg-swatch:hover { transform: scale(1.08); } }
@media (hover: hover) and (pointer: fine) { .mode-btn:hover:not(.on), .size-toggle button:hover:not(.on) { color: var(--ink); } }

/* Primära knappar: rikare gradient + skimmer på Publicera */
.btn-primary { background: linear-gradient(135deg, var(--primary, #3d6fe8), var(--primary-2, #78a6f5)); background-size: 170% 170%; background-position: 0 0; transition: background-position .4s, box-shadow .25s, transform .16s; }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 34px var(--ring); transform: translateY(-1px); } }
#btn-publish { position: relative; overflow: hidden; }
#btn-publish::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.4) 50%, transparent 68%); transform: translateX(-130%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { #btn-publish:hover::after { animation: uiShimmer .9s ease; } }
@keyframes uiShimmer { to { transform: translateX(130%); } }

/* Aktiv scen-etikett får en mjuk markering */
.scene-slot.active .slot-label { transition: background .2s, color .2s; }

@media (prefers-reduced-motion: reduce) {
    .studio-top, .scene-panel, .studio-canvas, .studio-insp, .scene-slot.active .device-frame { animation: none !important; }
}

/* Skalbara spel-block: håll storleks-handtaget konstant stort trots skalning */
.eb-wrap .eb-handle { transform: scale(calc(1 / var(--sc, 1))); transform-origin: 100% 100%; }

/* ============================================================
   Telefon-simulator
   ============================================================ */
.eb-phonesim { width: 300px; max-width: 100%; height: 540px; max-height: 88%; border-radius: 30px; overflow: hidden; background: linear-gradient(165deg,#4a5b8f,#232a4a 60%,#171a30); box-shadow: 0 22px 54px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); color: #fff; }
.sim-screen { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; text-align: center; font-size: 14px; }
.sim-statusbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 4px; font-size: .74rem; font-weight: 700; color: #fff; flex: 0 0 auto; }
.sim-status-r { display: flex; align-items: center; gap: 5px; }
.sim-sig { width: 17px; height: 11px; background: linear-gradient(90deg,#fff 60%,rgba(255,255,255,.4) 60%); -webkit-mask: radial-gradient(circle at 2px 9px,#000 1.6px,transparent 0) 0 0/4px 100%; mask: none; border-radius: 1px; }
.sim-wifi { width: 15px; height: 11px; border-radius: 2px; background: radial-gradient(circle at 50% 100%, #fff 30%, transparent 32%); }
.sim-batt { width: 22px; height: 11px; border: 1.4px solid rgba(255,255,255,.7); border-radius: 3px; position: relative; }
.sim-batt::before { content: ''; position: absolute; inset: 1.5px; width: 70%; background: #fff; border-radius: 1px; }
.sim-batt::after { content: ''; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; background: rgba(255,255,255,.7); border-radius: 0 1px 1px 0; }

/* Hemskärm */
.sim-home { flex: 1; display: flex; flex-direction: column; padding: 14px 14px 12px; overflow: hidden; }
.sim-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; align-content: start; overflow-y: auto; padding: 6px 6px 0; }
.sim-app { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: #fff; font-family: inherit; padding: 0; }
.sim-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 12px rgba(0,0,0,.28); transition: transform .12s; overflow: hidden; }
.sim-ico svg { display: block; }
.sim-app:active .sim-ico { transform: scale(.9); }
.sim-name { font-size: .68rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-dock { margin-top: 10px; padding: 12px; border-radius: 24px; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); display: flex; justify-content: center; }
.sim-ico-lockpad { background: rgba(255,255,255,.22); }

/* App-topbar */
.sim-bar { display: flex; align-items: center; gap: 4px; padding: 13px 10px; background: rgba(20,18,32,.96); border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; flex: 0 0 auto; }
.sim-back { background: none; border: none; color: #4a86ff; font-size: 1.7rem; cursor: pointer; line-height: 1; padding: 0 4px; }
.sim-title { font-weight: 700; font-size: .98rem; }
.sim-body { padding: 16px 18px; overflow-y: auto; flex: 1; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.92); text-align: left; white-space: pre-wrap; background: #0e0c18; }
.sim-empty { padding: 34px 16px; color: rgba(255,255,255,.4); text-align: center; }

/* Listor (kontakter, anteckningar, generisk) */
.sim-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1; background: #0e0c18; }
.sim-item { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid rgba(255,255,255,.08); background: none; color: #fff; cursor: pointer; font-family: inherit; }
.sim-item:active { background: rgba(255,255,255,.06); }
.sim-item-t { font-weight: 700; font-size: .9rem; }
.sim-item-c { font-size: .76rem; color: rgba(255,255,255,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sim-note { background: #17151f; }

/* Avatarer */
.sim-ava { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; color: #fff; flex: 0 0 auto; }
.sim-ava.sm { width: 30px; height: 30px; font-size: .72rem; }
.sim-ava.lg { width: 74px; height: 74px; font-size: 1.5rem; }

/* Meddelanden (chatt) */
.sim-chatrow { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid rgba(255,255,255,.07); background: none; color: #fff; cursor: pointer; font-family: inherit; text-align: left; }
.sim-chatrow:active { background: rgba(255,255,255,.06); }
.sim-chatmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-thread { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; background: #0e0c18; }
.sim-bubble { max-width: 76%; padding: 8px 12px; border-radius: 17px; font-size: .86rem; line-height: 1.35; text-align: left; word-wrap: break-word; }
.sim-bubble.them { align-self: flex-start; background: #2a2836; border-bottom-left-radius: 5px; }
.sim-bubble.me { align-self: flex-end; background: linear-gradient(180deg,#4a86ff,#2f6bff); border-bottom-right-radius: 5px; }
.sim-crow { flex-direction: row; align-items: center; gap: 11px; }

/* Kontakt-detalj */
.sim-contact { flex: 1; overflow-y: auto; background: #0e0c18; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; }
.sim-contact-name { font-weight: 800; font-size: 1.25rem; margin: 12px 0 18px; }
.sim-crow2 { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-top: 1px solid rgba(255,255,255,.08); font-size: .88rem; }
.sim-crow2 > span:first-child { color: rgba(255,255,255,.5); }
.sim-crow-v { color: #4a86ff; text-align: right; }

/* Foton */
.sim-photos { flex: 1; overflow-y: auto; background: #000; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; align-content: start; }
.sim-photo { aspect-ratio: 1; border: none; cursor: pointer; background: #2a2836 center/cover no-repeat; }
.sim-photofull { flex: 1; background: #000 center/contain no-repeat; }
.sim-cap { background: #0e0c18; padding: 10px 14px; font-size: .85rem; color: rgba(255,255,255,.8); text-align: left; }

/* Kalender */
.sim-cal { flex: 1; overflow-y: auto; background: #0e0c18; padding: 12px 12px 18px; text-align: left; }
.sim-cal-mo { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-transform: capitalize; padding: 4px 4px 10px; }
.sim-cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .66rem; font-weight: 700; color: rgba(255,255,255,.4); padding-bottom: 6px; }
.sim-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.sim-cal-d, .sim-cal-e { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .82rem; position: relative; }
.sim-cal-d.has { color: #fff; font-weight: 700; }
.sim-cal-d.has::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #ff3b30; }
.sim-cal-events { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.sim-ev { display: flex; gap: 12px; padding: 9px 2px; align-items: center; }
.sim-ev-day { width: 26px; text-align: center; font-weight: 800; color: #ff3b30; }
.sim-ev-b { display: flex; flex-direction: column; }

/* Inställningar (iOS) */
.sim-settings { flex: 1; overflow-y: auto; background: #0e0c18; padding: 12px 14px 20px; text-align: left; }
.sim-set-profile { display: flex; align-items: center; gap: 12px; background: #1b1926; border-radius: 12px; padding: 12px; margin-bottom: 20px; }
.sim-set-pmeta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sim-set-pmeta b { font-size: 1.02rem; }
.sim-set-pmeta span { font-size: .74rem; color: rgba(255,255,255,.5); }
.sim-set-group { background: #1b1926; border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.sim-set-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .9rem; }
.sim-set-row:last-child { border-bottom: none; }
.sim-set-ic { width: 26px; height: 26px; border-radius: 7px; background: #33313f; display: flex; align-items: center; justify-content: center; font-size: .82rem; flex: 0 0 auto; }
.sim-set-t { flex: 1; }
.sim-set-v { color: rgba(255,255,255,.45); font-size: .84rem; }
.sim-chev { color: rgba(255,255,255,.35); }
.sim-tgl { width: 40px; height: 24px; border-radius: 14px; background: #48464f; position: relative; transition: background .2s; flex: 0 0 auto; }
.sim-tgl i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.sim-tgl.on { background: #34c759; } .sim-tgl.on i { left: 18px; }

/* Låsskärm (kod) */
.sim-lockwrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 22px 22px; background: rgba(10,9,18,.92); }
.sim-lockicon { opacity: .9; margin-bottom: 4px; }
.sim-lock-title { font-weight: 600; font-size: 1rem; margin-bottom: 8px; }
.sim-dots { display: flex; gap: 15px; justify-content: center; padding: 4px 0 16px; }
.sim-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); transition: background .15s, border-color .15s; }
.sim-dot.on { background: #fff; border-color: #fff; }
.sim-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 230px; }
.sim-key { height: 58px; width: 58px; margin: 0 auto; border-radius: 50%; border: none; background: rgba(255,255,255,.13); color: #fff; font-size: 1.5rem; font-family: inherit; cursor: pointer; transition: background .12s; }
.sim-key:active { background: rgba(255,255,255,.3); }
.sim-key-ok { background: linear-gradient(135deg, var(--primary), var(--primary-2)); font-size: 1rem; font-weight: 700; }
.sim-key-x { font-size: 1.2rem; }
.sim-msg { text-align: center; min-height: 1.3em; font-weight: 600; font-size: .88rem; padding: 10px 14px 0; }
.sim-msg.ok { color: #4ade80; } .sim-msg.err { color: #ff8199; }
.sim-lockcancel { margin-top: 12px; background: none; border: none; color: #4a86ff; font-family: inherit; font-size: .92rem; cursor: pointer; }
.eb-phonesim.sim-shake { animation: simShake .45s; }
@keyframes simShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* Simulator-appeditor i inspektorn */
.sim-approw { border: 1px solid var(--line); border-radius: 11px; padding: 8px; margin-bottom: 8px; background: var(--surface); }
.sim-approw-head { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.sim-approw-head input { flex: 1; }
.sim-approw textarea { width: 100%; }

/* Simulator: nästlad app-editor i inspektorn */
.sim-appcard { border: 1px solid var(--line); border-radius: 12px; padding: 9px; margin-bottom: 10px; background: var(--surface); }
.sim-appcard textarea, .sim-appcard input { width: 100%; }
.sim-items { margin-top: 6px; }
.sim-itemrow { border-left: 2px solid var(--line); padding: 6px 0 8px 8px; margin-bottom: 6px; }
.sim-additem { font-size: .8rem; font-weight: 600; color: var(--primary); background: none; border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--line)); border-radius: 8px; padding: 7px 10px; cursor: pointer; width: 100%; font-family: inherit; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .sim-additem:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); } }
.sim-appbody { margin-top: 8px; }
/* Mall-popup när telefonen läggs till */
.sim-tpl-ov { position: fixed; inset: 0; z-index: 300; background: rgba(18,10,38,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: tourFade .2s ease both; }
.sim-tpl-box { background: var(--surface); border-radius: 20px; padding: 24px; max-width: 460px; width: 100%; box-shadow: 0 30px 70px rgba(20,10,40,.3); text-align: center; }
.sim-tpl-box h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 16px; }
.sim-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.sim-tpl-card { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, transform .12s; }
@media (hover: hover) and (pointer: fine) { .sim-tpl-card:hover { border-color: var(--primary); transform: translateY(-2px); } }
.sim-tpl-t { font-weight: 700; font-size: .95rem; color: var(--ink); }
.sim-tpl-d { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 560px) { .sim-tpl-grid { grid-template-columns: 1fr; } }
.sim-appcard .sim-approw-head select.sm { max-width: 118px; }
/* Foton-editor */
.sim-photoedit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.sim-ptile { position: relative; display: flex; flex-direction: column; gap: 4px; }
.sim-pthumb { aspect-ratio: 1; border-radius: 8px; background: var(--line) center/cover no-repeat; }
.sim-ptile .sm { font-size: .72rem; padding: 4px 6px; }
.sim-ptile-x { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 1; padding: 0; }
.sim-photoup { display: block; width: 100%; text-align: center; font-size: .84rem; font-weight: 700; color: #7a5a00; background: #ffe9a8; border: 1px solid #f5b301; border-radius: 9px; padding: 11px; cursor: pointer; font-family: inherit; }
@media (hover: hover) and (pointer: fine) { .sim-photoup:hover { background: #ffdf85; } }
/* Premium-markering: gul ring runt funktionen */
.premium-ring { position: relative; border: 2px solid #f5b301; border-radius: 13px; padding: 11px 11px 9px; margin-bottom: 12px; background: rgba(245,179,1,.06); }
.premium-ring::after { content: 'PREMIUM'; position: absolute; top: -8px; right: 12px; background: #f5b301; color: #3a2b00; font-size: .56rem; font-weight: 800; letter-spacing: .1em; padding: 2px 7px; border-radius: 6px; }
.premium-ring > label { margin: 0; }
.sim-stocknote { font-size: .74rem; color: var(--ink-soft); background: var(--bg); border-radius: 8px; padding: 7px 9px; margin-bottom: 8px; line-height: 1.4; }
.sim-pcode { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--ink-soft); cursor: pointer; margin-bottom: 8px; }
.sim-pcode input[type=checkbox] { width: auto; }
.sim-ptile .sm { font-size: .72rem; padding: 4px 6px; }

/* Musik-väljare (global bakgrundslåt) */
.mus-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mus-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mus-row.sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring); }
.mus-prev { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-size: .85rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mus-prev:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); } }
.mus-prev-off { flex: 0 0 auto; width: 36px; height: 36px; }
.mus-prev, .mus-prev-off { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mus-prev svg { width: 15px; height: 15px; display: block; }
.mus-prev svg path { transform: translateX(.5px); }   /* triangeln ser centrerad ut */
.mus-prev.on { background: var(--primary); color: #fff; }
.mus-prev-off { border-radius: 50%; background: color-mix(in srgb, var(--ink, #14161f) 6%, transparent); color: var(--muted, #8a93a8); }
.mus-prev-off svg { width: 17px; height: 17px; display: block; }
.mus-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mus-pick { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 16px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--ink); }
.mus-row.sel .mus-pick { background: var(--primary); color: #fff; border-color: var(--primary); }
.mus-upload { display: block; text-align: center; border: 1px dashed var(--primary); border-radius: 12px; padding: 12px; color: var(--primary); font-weight: 700; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mus-upload:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); } }

/* Musik-knappen i toppen – tydligare (violett accent + not-ikon) */
.btn-music { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); font-weight: 700; }
.btn-music svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .btn-music:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-color: var(--primary); transform: translateY(-1px); } }
@media (max-width: 1032px) { .btn-music span { display: none; } .btn-music { padding: 8px 11px; } }

/* Block-panelens snabbrad (info + duplicera + ta bort) – lätt att nå på mobil */
.insp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.insp-head .insp-title { margin-bottom: 0; }
.insp-quick { display: flex; gap: 8px; }
.iq-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .iq-btn:hover { border-color: var(--primary); } }
.iq-del { color: #e0466e; border-color: rgba(224,70,110,.35); }
@media (hover: hover) and (pointer: fine) { .iq-del:hover { background: rgba(224,70,110,.08); border-color: #e0466e; } }
@media (max-width: 1032px) { .iq-btn { min-height: 40px; padding: 9px 16px; font-size: .92rem; } }

/* Mobil: göm block-panelens innehålls-rubrik (t.ex. "Du har fått ett ko") */
@media (max-width: 1032px) {
    .insp-head .insp-title { display: none; }
    .insp-head { justify-content: flex-start; }
}

/* ============================================================
   Innehållspalett – enkel: alla tillgängliga block som rutor
   ============================================================ */
.pal-body { max-height: 62vh; overflow-y: auto; padding-right: 2px; }
.pal-group { margin-bottom: 20px; }
.pal-group:last-child { margin-bottom: 0; }
.pal-group-h { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: 0 0 10px; }
.pal-group-h .cicon { display: inline-flex; color: var(--primary); }
.pal-group-h .cicon svg { width: 16px; height: 16px; display: block; }
.pal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pal-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); text-align: center; transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .pal-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary); } }
.pal-tile:active { transform: translateY(0); }
.pal-tile-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 13px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.pal-tile-ico svg { width: 22px; height: 22px; display: block; }
.pal-tile-name { font-size: .82rem; font-weight: 600; line-height: 1.2; }
@media (max-width: 1032px) { .pal-tile { padding: 14px 6px; } .pal-tile-name { font-size: .78rem; } }
@media (max-width: 400px) { .pal-grid { grid-template-columns: repeat(2, 1fr); } }


/* "Vad är det här till för?" – tillfälle-väljare */
.occ-box { max-width: 560px; }
.occ-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.occ-tile { padding: 16px 14px; border: 1.5px solid #dfe3ec; border-radius: 14px; background: #fff; font: inherit; font-weight: 700; font-size: .95rem; color: #171a22; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) { .occ-tile:hover { border-color: #14161f; transform: translateY(-1px); } }
.occ-tile.on { border-color: #14161f; background: #f3f5fa; }
@media (max-width: 480px) { .occ-grid { grid-template-columns: 1fr; } }


/* ---------- Palett v2: bara text, lugn lista ---------- */
.pal-group-h { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin: 0 0 8px; }
.pal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pal-item { display: block; width: 100%; text-align: left; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); transition: border-color .15s, background .15s, transform .12s; }
@media (hover: hover) and (pointer: fine) { .pal-item:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); transform: translateY(-1px); } }
.pal-item:active { transform: none; }
@media (max-width: 420px) { .pal-list { grid-template-columns: 1fr; } }

/* ---------- Förslag efter tillägg ---------- */
.studio-canvas { position: relative; }
.suggest-bar { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; border-radius: 999px; background: #14161f; color: #fff; box-shadow: 0 14px 34px rgba(20,22,31,.3); animation: sgIn .3s cubic-bezier(.2,.8,.2,1); }
.suggest-bar.out { opacity: 0; transition: opacity .3s; }
.sg-lbl { font-size: .8rem; color: #b9c0d0; margin-right: 4px; }
.sg-item { border: none; border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s; }
@media (hover: hover) and (pointer: fine) { .sg-item:hover { background: var(--primary); } }
.sg-x { border: none; background: none; color: #8a93a8; font-size: .8rem; cursor: pointer; padding: 6px 8px; }
@keyframes sgIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 1032px) { .suggest-bar { bottom: 96px; border-radius: 18px; } }

/* ---------- Översikt: tillfälle ---------- */
.ov-occ { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .9rem; }

/* ---------- Memory-spel ---------- */
.eb-memory { width: 264px; max-width: 80vw; color: #fff; font-family: 'Inter', system-ui, sans-serif; }
.mem-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-weight: 700; }
.mem-moves { font-size: .78rem; opacity: .75; font-weight: 600; }
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mem-card { position: relative; aspect-ratio: 1; border: none; background: none; padding: 0; cursor: pointer; perspective: 500px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; contain: layout paint; }
.mem-in { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; will-change: transform; }
.mem-card.open .mem-in, .mem-card.done .mem-in { transform: rotateY(180deg); }
.mem-back, .mem-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.mem-back { background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.4); }
.mem-back::after { content: "?"; font-weight: 800; font-size: 1.2rem; color: rgba(255,255,255,.75); }
.mem-face { background: #fff; color: #14161f; font-size: 1.6rem; transform: rotateY(180deg); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.mem-card.done .mem-face { background: #e9f8ee; box-shadow: 0 0 0 2px #2e9e5b inset; }
.eb-memory.won .mem-head { color: #ffe27a; }

/* ---------- Fånga-spelet ---------- */
.eb-catch { width: 264px; max-width: 80vw; color: #fff; font-family: 'Inter', system-ui, sans-serif; }
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-weight: 700; }
.ct-stats { display: flex; gap: 6px; }
.ct-pill { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 9px; border-radius: 999px !important; background: rgba(255,255,255,.18); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-pill b { font-size: .95rem; }
.ct-pill.bump { animation: ctBump .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes ctBump { 40% { transform: scale(1.25); background: rgba(255,77,125,.6); } }
.ct-area { position: relative; height: 290px; border-radius: 18px !important; overflow: hidden; cursor: default;
           background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,.06)), linear-gradient(160deg, rgba(255,159,184,.35), rgba(177,151,252,.35));
           box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.ct-bokeh { position: absolute; inset: 0; pointer-events: none; opacity: .5;
            background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 10px, transparent 11px), radial-gradient(circle at 75% 20%, rgba(255,255,255,.25) 0 16px, transparent 17px),
                        radial-gradient(circle at 60% 75%, rgba(255,255,255,.2) 0 12px, transparent 13px), radial-gradient(circle at 15% 80%, rgba(255,255,255,.2) 0 7px, transparent 8px);
            animation: ctDrift 9s ease-in-out infinite alternate; }
@keyframes ctDrift { to { transform: translateY(-12px); } }
.ct-bar { position: absolute; left: 10px; right: 10px; top: 9px; height: 5px; border-radius: 999px !important; background: rgba(255,255,255,.25); overflow: hidden; z-index: 1; }
.ct-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ffd43b, #ff4d7d); transform-origin: left; }
.ct-target { position: absolute; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ct-target svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 12px rgba(160,20,70,.35)); }
.ct-beat { display: block; width: 100%; height: 100%; animation: ctBeat 1.1s ease-in-out infinite; }
@keyframes ctBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(.98); } 42% { transform: scale(1.08); } 60% { transform: scale(1); } }
.ct-target.pop { animation: ctPop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes ctPop { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ct-target.gone { transform: scale(0); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.ct-emoji { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.2rem; }
.ct-bit { position: absolute; width: 14px; height: 13px; margin: -6px 0 0 -7px; pointer-events: none; z-index: 3; animation: ctBit .7s cubic-bezier(.2,.8,.2,1) forwards; }
.ct-bit svg { width: 100%; height: 100%; display: block; fill: var(--c); }
@keyframes ctBit { 0% { transform: rotate(var(--a)) translateY(0) scale(.5); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-44px) scale(1); opacity: 0; } }
.ct-plus { position: absolute; transform: translate(-50%, -50%); font-size: 1.1rem; font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(160,20,70,.5); pointer-events: none; z-index: 3; animation: ctPlus .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ctPlus { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 25% { opacity: 1; transform: translate(-50%, -90%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.ct-rain { position: absolute; bottom: -20px; width: calc(18px * var(--s)); height: calc(16px * var(--s)); pointer-events: none; z-index: 1; animation: ctRain 1.8s cubic-bezier(.3,.6,.4,1) forwards; }
.ct-rain svg { width: 100%; height: 100%; display: block; fill: var(--c); }
@keyframes ctRain { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-330px) rotate(14deg); opacity: 0; } }
.ct-msg { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: .84rem; font-weight: 700; padding: 0 12px; pointer-events: none; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.eb-catch.won .ct-area { box-shadow: inset 0 0 0 2px #ffd43b, 0 0 26px rgba(255,212,59,.45); }
.eb-catch.lost .ct-target { display: none; }
.eb-catch.lost .ct-area { cursor: pointer; }
.eb-catch.lost .ct-area::after { content: ""; position: absolute; inset: 0; background: rgba(20,22,31,.35); }
@media (prefers-reduced-motion: reduce) { .ct-beat, .ct-bokeh, .ct-bit, .ct-plus, .ct-rain, .ct-target.pop, .ct-pill.bump { animation: none !important; } }


/* ---------- Max ett spel per scen / toast ---------- */
.pal-item.off { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .pal-item.off:hover { transform: none; border-color: var(--line); background: var(--surface); } }
.pal-note { display: block; font-size: .7rem; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
.st-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); z-index: 6000; padding: 11px 18px; border-radius: 999px; background: #14161f; color: #fff; font-size: .88rem; font-weight: 600; box-shadow: 0 14px 34px rgba(20,22,31,.3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); max-width: calc(100vw - 32px); text-align: center; }
.st-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Fråga efter att ett spel lagts till: effekt när spelet är klarat? */
.st-ask { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px); z-index: 6000; width: min(440px, calc(100vw - 24px)); padding: 14px 16px; background: #fff; color: #14161f; border: 1px solid #e3e6ee; box-shadow: 0 18px 44px rgba(20,28,55,.22); opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.st-ask.on { opacity: 1; transform: translate(-50%, 0); }
.st-ask-t { font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.st-ask-b { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ask-b button { font: inherit; font-size: .82rem; font-weight: 600; padding: 8px 12px; border: 1px solid #dfe3ec; background: #f4f6fb; color: #14161f; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .st-ask-b button:hover { background: #14161f; color: #fff; border-color: #14161f; } }
.st-ask-b .st-ask-no { background: none; border-color: transparent; color: #67708a; margin-left: auto; }
@media (max-width: 639px) { .st-ask { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* Inställningar-knappen i verktygsraden gör inget på dator – bara mobil */
@media (min-width: 1033px) { #scene-settings { display: none; } }

/* ---------- Reaktionstest ---------- */
.eb-react { width: 250px; max-width: 80vw; color: #fff; font-family: 'Inter', system-ui, sans-serif; text-align: center; }
.rx-title { font-weight: 700; margin-bottom: 10px; }
.rx-pad { width: 100%; height: 190px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 18px; background: rgba(255,255,255,.12); color: #fff; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: background .2s, border-color .2s; }
.rx-big { font-size: 1.35rem; font-weight: 800; }
.rx-sub { font-size: .8rem; opacity: .8; }
.rx-foot { font-size: .76rem; opacity: .7; margin-top: 8px; }
.eb-react.rx-wait .rx-pad { background: rgba(232,98,93,.35); border-color: rgba(232,98,93,.6); }
.eb-react.rx-go .rx-pad { background: #2e9e5b; border-color: #2e9e5b; }
.eb-react.rx-early .rx-pad { background: rgba(255,180,60,.35); }
.eb-react.rx-result .rx-pad { background: rgba(255,255,255,.2); }

/* ---------- Sten, sax, påse ---------- */
.eb-rps { width: 264px; max-width: 80vw; color: #fff; font-family: 'Inter', system-ui, sans-serif; text-align: center; }
.rps-title { font-weight: 700; margin-bottom: 6px; }
.rps-score { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; }
.rps-need { display: block; font-size: .72rem; font-weight: 600; opacity: .7; letter-spacing: 0; }
.rps-round { min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: .86rem; opacity: .9; margin: 6px 0 10px; }
.rps-hands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rps-hand { padding: 14px 6px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) { .rps-hand:hover { background: rgba(255,255,255,.22); } }
.rps-hand.picked { background: #fff; color: #14161f; transform: translateY(-2px); }
.eb-rps.lost .rps-hands { opacity: .4; pointer-events: none; }

/* ---------- Bildpussel ---------- */
.eb-puzzle { color: #fff; font-family: 'Inter', system-ui, sans-serif; text-align: center; }
.pz-title { font-weight: 700; margin-bottom: 8px; }
.pz-board { position: relative; margin: 0 auto; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.3); }
.pz-tile { position: absolute; border: 1px solid rgba(0,0,0,.25); background: #fff; color: #14161f; font-family: inherit; font-weight: 800; font-size: 1.3rem; cursor: pointer; padding: 0; transition: left .18s ease, top .18s ease; }
.pz-tile.pz-blank { background: transparent; border-color: transparent; cursor: default; }
.pz-msg { font-size: .78rem; opacity: .8; margin-top: 8px; }
.eb-puzzle.won .pz-tile { border-color: transparent; }

/* ---------- Publicerat: säljande popup ---------- */
.sell-box { position: relative; width: min(880px, 94vw); background: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr; box-shadow: 0 30px 80px rgba(20,22,31,.35); }
.sell-visual { position: relative; background: linear-gradient(160deg, #eef2fb, #dfe6f7); display: flex; align-items: center; justify-content: center; padding: 40px 30px; min-height: 360px; overflow: hidden; }
.sell-card { position: relative; z-index: 2; width: 300px; aspect-ratio: 2 / 1.35; background: #fff; border-radius: 10px; box-shadow: 0 24px 50px rgba(20,28,55,.22); display: grid; grid-template-columns: 1fr 1fr; transform: rotate(-4deg); animation: sellIn .6s cubic-bezier(.2,.8,.2,1); }
@keyframes sellIn { from { opacity: 0; transform: rotate(-4deg) translateY(24px); } to { opacity: 1; transform: rotate(-4deg) translateY(0); } }
.sell-card-l { border-right: 1px dashed #e0e4ee; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sell-line { width: 60%; height: 6px; border-radius: 3px; background: #e6eaf3; } .sell-line.short { width: 38%; }
.sell-card-r { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sell-scan { font-family: var(--font-display); font-size: .8rem; color: #1c2230; }
.sell-arrow { font-size: .8rem; color: #1c2230; line-height: 1; }
.sell-qr { width: 46%; aspect-ratio: 1; }
.sell-env { position: absolute; left: 50%; bottom: -70px; width: 380px; height: 200px; transform: translateX(-50%); background: #fff; border-radius: 14px; box-shadow: 0 -10px 40px rgba(20,28,55,.12); z-index: 1; }
.sell-env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0; border-left: 190px solid transparent; border-right: 190px solid transparent; border-top: 90px solid #f3f5fa; }
.sell-text { padding: 44px 40px 40px; display: flex; flex-direction: column; justify-content: center; }
.sell-kick { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #3d6fe8; margin-bottom: 10px; }
.sell-text h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; margin: 0 0 12px; color: #171a22; }
.sell-text p { color: #4a5470; font-size: .95rem; line-height: 1.55; margin: 0 0 14px; }
.sell-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: #171a22; }
.sell-list li::before { content: "—"; color: #3d6fe8; margin-right: 8px; }
.sell-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sell-box .pub-close { position: absolute; top: 12px; right: 12px; z-index: 3; }
@media (max-width: 760px) { .sell-box { grid-template-columns: 1fr; } .sell-visual { min-height: 240px; padding: 28px 20px 0; } .sell-card { width: 230px; } .sell-env { width: 300px; height: 150px; bottom: -60px; } .sell-text { padding: 26px 22px 28px; } .sell-actions .btn { flex: 1; text-align: center; } }


/* Spelen ligger i en egen mörk panel så vit text syns på alla bakgrunder (ljusa som mörka) */
.game-panel-shared, .eb-memory, .eb-catch, .eb-react, .eb-rps, .eb-puzzle { box-sizing: border-box; padding: 14px; border-radius: 20px; background: rgba(20,22,31,.55); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
/* Memory: ingen backdrop-blur bakom 12 till 16 kort som vänds i 3D, det fick mobiler (särskilt iPhone) att hänga sig */
.eb-memory { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,22,31,.72); }
.eb-puzzle { width: 268px; max-width: 80vw; }


/* ---------- Palett v3: kategori först (färg + beskrivning), sedan innehåll ---------- */
.pal-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pal-cat { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 13px 14px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); transition: transform .12s, box-shadow .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .pal-cat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c); } }
.pal-cat-dot { display: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; margin-top: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.pal-cat-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pal-cat-tx b { font-size: .95rem; font-weight: 700; }
.pal-cat-tx span { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
.pal-cat-n { flex: none; font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 999px; padding: 3px 8px; }
.pal-cat-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.pal-cat-head b { font-size: 1rem; }
.pal-cat-head > span:last-child { font-size: .8rem; color: var(--ink-soft); }
.pal-item { border-left: 4px solid var(--c, var(--line)); padding: 10px 14px 11px; }
.pal-item b { display: block; font-weight: 700; font-size: .92rem; }
.pal-desc { display: block; font-size: .76rem; font-weight: 500; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.pal-tag { margin-left: 8px; font-size: .68rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 999px; padding: 2px 7px; vertical-align: middle; }
@media (max-width: 520px) { .pal-cats { grid-template-columns: 1fr; } }


/* Filmremsan klipper inte längre skuggan under telefonerna (luft under istället för en hård kant) */
.canvas-strip { padding-bottom: 64px; }   /* plats för skuggan under ramen (remsan klipper allt utanför sin box) */


/* ============================================================
   Mobil som app: toppraden ryms alltid, verktygsraden är fast i botten,
   telefonen fyller ytan däremellan. Ingen sid-scroll.
   ============================================================ */
@media (max-width: 1032px) {
    .studio-top { padding: 6px 6px; gap: 4px; overflow: hidden; }
    .studio-top .crumbs { gap: 3px; }
    .studio-top .cv-iconbtn { width: 32px; height: 32px; }
    .studio-actions { gap: 4px; min-width: 0; }
    .studio-actions .btn { padding: 7px 9px; font-size: .8rem; white-space: nowrap; }
    #btn-template { padding: 7px 8px; }
    .canvas-strip { padding-bottom: 44px; }   /* mobil: skuggan under ramen ska inte kapas */
    /* Verktygsraden fast i botten (som en app) – canvasen får luft under så inget döljs */
    .canvas-foot { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40;
                   background: linear-gradient(to top, rgba(246,247,251,.96) 70%, rgba(246,247,251,0)); }
    .studio-canvas { padding-bottom: 96px; }
}
@media (max-width: 480px) {
    .st-account-wrap { display: none; }   /* kontot nås från startsidan – ge Publicera plats */
    .studio-actions .btn { padding: 7px 8px; font-size: .78rem; }
}

@media (max-width: 480px) { .studio-top .st-signup { display: none; } }   /* logga in/skapa konto sker vid publicering – toppraden ska rymma Publicera */

/* Mobil: Problem-knappen kompakt (bara varningstecken + antal) så toppraden alltid ryms */
@media (max-width: 1032px) {
    #btn-problems { font-size: 0; padding: 7px 8px; display: inline-flex; align-items: center; gap: 4px; }
    #btn-problems::before { content: "!"; font-size: .9rem; font-weight: 800; }
    #btn-problems .prob-badge { font-size: .72rem; }
}


/* sell-box mobil: får aldrig klippas – scrollbar inuti, lägre bildyta */
.sell-box { max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
    .sell-box { width: calc(100vw - 20px); border-radius: 20px; }
    .sell-visual { min-height: 190px; padding: 22px 16px 0; }
    .sell-card { width: 200px; }
    .sell-env { width: 260px; height: 130px; bottom: -50px; }
    .sell-text { padding: 20px 18px 22px; }
    .sell-text h2 { font-size: 1.45rem; }
    .sell-text p { font-size: .9rem; }
    .sell-list { margin-bottom: 16px; font-size: .86rem; }
}
/* Studions topprad på mobil: kundvagn + profilbild syns, "Mall" ryms bara på bredare skärm */
@media (max-width: 1032px) {
    .st-cart { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); position: relative; flex: none; }
    .st-cart svg { width: 17px; height: 17px; }
    .st-cart .cart-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #3d6fe8; color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; }
    .st-account-wrap { display: block; }
    .st-account { padding: 2px; }
    .st-avatar { width: 28px; height: 28px; font-size: .75rem; }
}
@media (min-width: 1033px) { .st-cart { display: none; } }
@media (max-width: 480px) { #btn-template { display: none; } .st-account-wrap { display: block; } }

/* "Namnge ditt kort" */
.occ-name { width: 100%; box-sizing: border-box; margin: 14px 0 6px; padding: 14px 16px; border: 1.5px solid #dfe3ec; border-radius: 14px; font: inherit; font-size: 1.05rem; color: #171a22; }
.occ-name:focus { outline: none; border-color: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.14); }


/* ===== PREMIUM (guld) ===== */
:root { --gold: #dcae2a; --gold-deep: #b8860b; --gold-ink: #3a2b00; --gold-grad: linear-gradient(135deg, #fff1c2 0%, #f6d365 45%, #e0b02a 100%); }
.premium-ring { border-color: var(--gold); background: rgba(220,174,42,.07); }
.premium-ring::after { background: var(--gold-grad); color: var(--gold-ink); }
.st-avatar.pro { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
/* Banner under topraden (bara icke-premium) */
.prem-banner { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--gold-grad); color: var(--gold-ink); font-size: .86rem; border-bottom: 1px solid rgba(58,43,0,.12); }
.prem-banner-ic { font-size: 1.1rem; }
.prem-banner-tx { flex: 1; min-width: 0; line-height: 1.35; }
.prem-banner-cta { flex: none; background: #14161f; color: #fff; border: none; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(20,22,31,.22); }
@media (hover: hover) and (pointer: fine) { .prem-banner-cta:hover { background: #000; } }
.prem-banner-x { flex: none; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(58,43,0,.08); color: var(--gold-ink); cursor: pointer; font-size: .8rem; }
@media (hover: hover) and (pointer: fine) { .prem-banner-x:hover { background: rgba(58,43,0,.16); } }
.prem-banner-short { display: none; }
@media (max-width: 639px) { .prem-banner { padding: 7px 10px; gap: 8px; font-size: .78rem; } .prem-banner-long { display: none; } .prem-banner-short { display: inline; } .prem-banner-cta { padding: 7px 11px; font-size: .74rem; white-space: nowrap; } }
/* Palett: låsta block */
.pal-item.prem { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(246,211,101,.14), var(--surface) 55%); }
@media (hover: hover) and (pointer: fine) { .pal-item.prem:hover { border-color: var(--gold); } }
.prem-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 8px 3px 6px; font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: middle;
  color: #1d1606; background: linear-gradient(135deg, #f1dc9e 0%, #d9b262 55%, #c0924a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(120,86,20,.25); border-radius: 999px; }
/* samma guld som Premium på sajten: en liten stjärna (låst) eller en bock (ingår i ditt Premium) */
.prem-tag::before { content: ""; width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/></svg>") center / contain no-repeat; }
/* Låst fält i inspektorn */
.prem-lock { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; margin: 0 0 12px; border: 1.5px solid var(--gold); border-radius: 12px; background: linear-gradient(90deg, rgba(246,211,101,.18), rgba(246,211,101,.04)); cursor: pointer; font-family: inherit; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .prem-lock:hover { background: linear-gradient(90deg, rgba(246,211,101,.32), rgba(246,211,101,.08)); } }
.prem-lock-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--gold-grad); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
.prem-lock > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prem-lock b { font-size: .88rem; }
.prem-lock small { font-size: .74rem; color: var(--ink-soft); }
.prem-lock-wrap { margin-bottom: 12px; }
.prem-locked { position: relative; }
.prem-locked-body { opacity: .45; pointer-events: none; filter: saturate(.6); }
.mus-upload.prem-lockbtn { border-color: var(--gold); background: rgba(246,211,101,.18); color: var(--gold-ink); cursor: pointer; font: inherit; }
/* Säljpopup */
.prem-modal { position: fixed; inset: 0; z-index: 4300; background: rgba(16,18,30,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.prem-box { width: 100%; max-width: 440px; background: #fff; border-radius: 22px; padding: 22px 22px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: hmPop .3s cubic-bezier(.2,.8,.2,1); }
@keyframes hmPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.prem-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.prem-star { width: 48px; height: 48px; border-radius: 14px; background: var(--gold-grad); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: none; box-shadow: 0 8px 20px rgba(220,174,42,.35); }
.prem-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.prem-head h3 { margin: 2px 0 0; font-size: 1.2rem; line-height: 1.15; }
.prem-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: #f1f2f7; cursor: pointer; color: #26324d; flex: none; }
.prem-reason { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(246,211,101,.22); color: var(--gold-ink); font-size: .9rem; }
.prem-points { list-style: none; padding: 0; margin: 0 0 16px; }
.prem-points li { padding: 7px 0; border-bottom: 1px solid #f0f1f6; font-size: .92rem; display: flex; gap: 10px; }
.prem-points li::before { content: "✓"; color: var(--gold-deep); font-weight: 800; }
.prem-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #14161f; color: #fff; border: none; border-radius: 999px; padding: 14px 18px; font: inherit; font-weight: 800; font-size: .98rem; cursor: pointer; text-decoration: none; text-align: center; box-sizing: border-box; box-shadow: 0 12px 28px rgba(20,22,31,.28); }
@media (hover: hover) and (pointer: fine) { .prem-cta:hover { background: #000; } }
.prem-consent { margin: 10px 0 0; font-size: .74rem; line-height: 1.45; color: #77809a; }
.prem-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: .84rem; }
.prem-foot a { color: var(--gold-deep); font-weight: 700; text-decoration: none; }
.prem-later { background: none; border: none; font: inherit; font-size: .84rem; color: #67708a; cursor: pointer; padding: 6px 4px; }

/* Gratis vs Premium – jämförelse efter tillfälle + namn */
.prem-compare { max-width: 460px; }
.prem-compare .prem-kicker { margin-bottom: 4px; }
.pc-table { width: 100%; border-collapse: collapse; margin: 14px 0 16px; font-size: .88rem; }
.pc-table th { text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 8px; }
.pc-table th:first-child { text-align: left; }
.pc-table th.pc-gold { background: var(--gold-grad); color: var(--gold-ink); border-radius: 10px 10px 0 0; }
.pc-table td { padding: 8px 8px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-soft); }
.pc-table td:first-child { text-align: left; color: var(--ink); font-weight: 600; }
.pc-table td.pc-gold { background: rgba(246,211,101,.14); color: var(--gold-ink); font-weight: 800; }
.pc-table tr:last-child td.pc-gold { border-radius: 0 0 10px 10px; }
.pc-free { width: 100%; margin-top: 8px; }
/* ===== Gratis eller Premium? (rutan i studion): mjuk in-animation, raderna glider in, guldkolumnen fylls, bockarna ritas ===== */
.pc-ov { animation: pcFade .3s ease both; }
.pc-ov.out { animation: pcFadeOut .22s ease both; }
.pc-ov.out .prem-compare { animation: pcBoxOut .22s ease both; }
.prem-compare { max-width: 440px; padding: 30px 28px 20px !important; text-align: center; animation: pcBox .5s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 40px 90px -30px rgba(20,22,31,.55); }
.prem-compare h2 { margin: 0 0 16px; font-size: 1.7rem; }
.prem-compare .pc-sub { margin: 0 auto 18px; max-width: 34ch; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.pc-wrap { position: relative; margin: 0 0 18px; }
.pc-col { position: absolute; top: 0; bottom: 0; right: 0; width: 34%; background: linear-gradient(180deg, #fff6dc, #fdf0c8); transform-origin: top; transform: scaleY(0); animation: pcCol .7s cubic-bezier(.4,0,.2,1) .25s both; border-radius: 12px !important; }
.pc-wrap .pc-table { position: relative; margin: 0; }
.pc-table th, .pc-table td { background: none !important; }
.pc-table th:nth-child(2), .pc-table td:nth-child(2) { width: 30%; }
.pc-table th.pc-gold, .pc-table td.pc-gold { width: 34%; }
.pc-table th.pc-gold { color: var(--gold-deep); padding-top: 12px; }
.pc-table td { padding: 10px 8px; font-size: .86rem; }
.pc-table td:first-child { text-align: left; }
.pc-table td.pc-gold { color: var(--gold-ink); font-weight: 800; }
.pc-table tbody tr { opacity: 0; transform: translateY(8px); animation: pcRow .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.35s + var(--i) * .07s); }
.pc-y { width: 18px; height: 18px; vertical-align: middle; fill: none; stroke: #9aa1b2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-gold .pc-y { stroke: var(--gold-deep); }
.pc-y path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pcDraw .45s ease-out both; animation-delay: calc(.6s + var(--i) * .07s); }
.pc-n { display: inline-block; width: 12px; height: 2px; background: #cfd4de; vertical-align: middle; }
.prem-compare .prem-cta { position: relative; overflow: hidden; color: #2a1f05; background: linear-gradient(180deg, #f1d58f, #d9a948); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 30px -14px rgba(160,112,20,.8); animation: pcRow .45s cubic-bezier(.2,.8,.2,1) .9s both; }
@media (hover: hover) and (pointer: fine) { .prem-compare .prem-cta:hover { background: linear-gradient(180deg, #f4dc9d, #deb055); } }
.prem-compare .prem-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: pcShine 3.2s ease-in-out 1.4s infinite; }
.prem-compare .prem-consent { font-size: .72rem; }
.prem-compare .pc-free { width: auto; margin: 12px auto 0; padding: 8px 12px; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .prem-compare .pc-free:hover { color: var(--ink); } }
.prem-compare .pc-free.pc-nudge { animation: pcNudge .5s cubic-bezier(.36,.07,.19,.97); color: var(--ink); }
@keyframes pcNudge { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .prem-compare .pc-free.pc-nudge { animation: none; } }
@keyframes pcFade { from { opacity: 0; } }
@keyframes pcFadeOut { to { opacity: 0; } }
@keyframes pcBox { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes pcBoxOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes pcCol { to { transform: scaleY(1); } }
@keyframes pcRow { to { opacity: 1; transform: none; } }
@keyframes pcDraw { to { stroke-dashoffset: 0; } }
@keyframes pcShine { 0% { left: -40%; } 45%, 100% { left: 130%; } }
@media (max-width: 480px) { .prem-compare { padding: 24px 16px 14px !important; } .prem-compare h2 { font-size: 1.45rem; } .pc-table td { font-size: .8rem; padding: 9px 5px; } }
@media (prefers-reduced-motion: reduce) {
  .pc-ov, .prem-compare, .pc-col, .pc-table tbody tr, .pc-y path, .prem-compare .prem-cta, .prem-compare .prem-cta::after { animation: none !important; }
  .pc-col { transform: none; } .pc-table tbody tr { opacity: 1; transform: none; } .pc-y path { stroke-dashoffset: 0; }
}
.prem-lock { gap: 0; }
.prem-lock > span:last-child { padding-left: 2px; }

/* "Annat" i tillfällesväljaren: man måste skriva vad det är */
.occ-other { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eceef4; text-align: left; }
.occ-other-lbl { display: block; font-weight: 700; font-size: .92rem; color: #171a22; }
.occ-other .occ-name { margin: 8px 0 4px; }
.occ-name.err { border-color: #e8625d; box-shadow: 0 0 0 3px rgba(232,98,93,.18); animation: pickShakeX .4s; }
@keyframes pickShakeX { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

img.st-avatar { object-fit: cover; padding: 0; }


/* ===== Minispel (mini-games.js): gemensam panel + komponenter ===== */
.eb-mini { box-sizing: border-box; width: 268px; max-width: 82vw; padding: 14px; border-radius: 20px; background: rgba(20,22,31,.6); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; user-select: none; -webkit-user-select: none; text-align: center; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.eb-mini.shake { animation: mgShake .35s ease; }
@keyframes mgShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.eb-mini.won { box-shadow: 0 0 0 3px rgba(47,191,113,.7), 0 14px 40px rgba(0,0,0,.28); }
.mini-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 10px; line-height: 1.25; }
.mini-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mini-msg { min-height: 1.2em; margin-top: 10px; font-size: .84rem; color: rgba(255,255,255,.82); line-height: 1.3; }
.mini-msg.fail { color: #ffb4a8; font-weight: 700; }
.mg-btn { font: inherit; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: transform .08s ease, background .15s ease; -webkit-tap-highlight-color: transparent; }
.mg-btn:active { transform: scale(.96); }
.mg-btn:disabled { opacity: .35; cursor: default; }
.mg-go { background: #fff; color: #14161f; border-radius: 999px; padding: 12px 26px; letter-spacing: .04em; }
.mg-small-btn { font-size: .8rem; padding: 6px 12px; }
.mg-canvas { display: block; border-radius: 14px; touch-action: none; background: #111; max-width: 100%; }
.mg-grid { display: grid; gap: 6px; width: 100%; }
.mg-2 { grid-template-columns: repeat(2, 1fr); } .mg-3 { grid-template-columns: repeat(3, 1fr); } .mg-5 { grid-template-columns: repeat(5, 1fr); } .mg-6 { grid-template-columns: repeat(6, 1fr); }
.mg-hole { aspect-ratio: 1; font-size: 2rem; padding: 0; background: rgba(0,0,0,.35); border-radius: 14px; }
/* Whack-a-Mole: gräsplan med riktiga hål, mullvaden tittar upp ur hålet (klipps av hålets kant) */
.mg-whack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; width: 100%; padding: 30px 12px 8px; box-sizing: border-box; border-radius: 18px;
            background: radial-gradient(120% 90% at 50% 0%, #9bd874 0%, #66bb47 55%, #4b9b37 100%); box-shadow: inset 0 -6px 0 rgba(0,0,0,.08), 0 10px 24px rgba(30,70,20,.18); }
.mg-wh-cell { position: relative; aspect-ratio: 1 / 1.05; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.mg-wh-hole { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #140c07 0%, #2e1d12 58%, #5c3b23 100%); box-shadow: inset 0 4px 7px rgba(0,0,0,.55); }
.mg-wh-pit { position: absolute; left: 0; right: 0; top: -34%; bottom: 23%; overflow: hidden; pointer-events: none; }
.mg-wh-mole { position: absolute; left: 5%; right: 5%; bottom: -4%; aspect-ratio: 1; transform: translateY(106%); transition: transform .15s cubic-bezier(.4,0,1,1); }
.mg-wh-cell.up .mg-wh-mole { transform: translateY(0); transition: transform .26s cubic-bezier(.2,1.35,.4,1); }
.mg-wh-mole svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; transition: transform .12s ease-out; }
.mg-wh-cell.hit .mg-wh-mole svg { transform: scale(1.08, .86); }
.mg-mole-dz { display: none; }
.mg-wh-cell.hit .mg-mole-eyes { display: none; }
.mg-wh-cell.hit .mg-mole-dz { display: inline; }
.mg-wh-emoji { display: flex; align-items: flex-end; justify-content: center; height: 100%; font-size: 2.3rem; line-height: 1; }
.mg-wh-stars { position: absolute; left: 18%; right: 18%; top: 0; opacity: 0; transform: scale(.5); }
.mg-wh-stars svg { display: block; width: 100%; }
.mg-wh-cell.hit .mg-wh-stars { opacity: 1; animation: mgDizzy .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mgDizzy { 0% { transform: scale(.5) rotate(-14deg); } 40% { transform: scale(1.05) rotate(8deg); } 100% { transform: scale(1) rotate(-6deg); } }
.mg-wh-rim { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 15%; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#8e5d36, #67401f); box-shadow: 0 3px 0 rgba(0,0,0,.1); pointer-events: none; }
.mg-wh-cell.miss .mg-wh-rim { animation: mgRimShake .22s ease-out; }
@keyframes mgRimShake { 0%, 100% { transform: none; } 30% { transform: translateX(-2px); } 65% { transform: translateX(2px); } }
.mg-wh-pop { position: absolute; left: 82%; top: 2%; z-index: 2; color: #fff; font-weight: 800; font-size: 1.05rem; text-shadow: 0 2px 6px rgba(20,22,31,.45); pointer-events: none;
             transform: translateX(-50%); animation: mgPopUp .65s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes mgPopUp { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 25% { opacity: 1; transform: translate(-50%, -4px) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -22px) scale(1); } }
.mg-cell { padding: 9px 4px; font-size: .9rem; border-radius: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-small .mg-cell { padding: 7px 2px; font-size: .82rem; }
.mg-cell.sel { background: #3d6fe8; border-color: #3d6fe8; }
.mg-cell.lit { background: #f5c518; color: #14161f; border-color: #f5c518; }
.mg-cell.ok { background: rgba(47,191,113,.5); border-color: transparent; }
.mg-pad { aspect-ratio: 1; padding: 0; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); }
.mg-tile { background: rgba(255,255,255,.14); }
.mg-tile.lit, .mg-simon.lit { filter: brightness(1.8) saturate(1.3); box-shadow: 0 0 0 3px #fff inset; }
.mg-simon { opacity: .8; } .mg-simon.lit { opacity: 1; }
.mg-big { width: 170px; height: 170px; border-radius: 50%; font-size: 1.6rem; background: linear-gradient(160deg,#ff6b6b,#e5484d); border: 4px solid rgba(255,255,255,.35); box-shadow: 0 10px 30px rgba(229,72,77,.45); }
.mg-big.pulse { transform: scale(.94); }
.mg-score, .mg-target, .mg-word, .mg-number { font-weight: 800; }
.mg-score { font-size: 1.1rem; }
.mg-target { font-size: 3rem; line-height: 1; }
.mg-word { font-size: 1.9rem; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.mg-number { font-size: 3.2rem; line-height: 1; min-height: 1em; font-variant-numeric: tabular-nums; }
.mg-number.final { color: #f5c518; }
.mg-row { display: flex; gap: 10px; justify-content: center; align-items: center; width: 100%; }
.mg-wrap { flex-wrap: wrap; }
.mg-choice { flex: 1 1 40%; font-size: 1.05rem; padding: 14px 10px; min-width: 0; }
.mg-tall { padding: 22px 10px; font-size: 1.1rem; }
.mg-or { flex-wrap: wrap; }
.mg-yes { background: rgba(47,191,113,.35); } .mg-no { background: rgba(229,72,77,.35); }
.mg-vs { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.7); }
.mg-question { font-size: 1.05rem; font-weight: 700; line-height: 1.35; min-height: 2.6em; }
.mg-sum { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: rgba(255,255,255,.08); border-radius: 10px; font-size: .84rem; }
.mg-sum small { color: rgba(255,255,255,.7); text-align: left; }
.mg-reels { display: flex; gap: 8px; padding: 10px; background: #14161f; border-radius: 14px; border: 2px solid #f5c518; }
.mg-reel { width: 60px; height: 64px; display: grid; place-items: center; font-size: 2rem; background: #fff; border-radius: 8px; }
.mg-reels.won { box-shadow: 0 0 24px #f5c518; }
.mg-die { font-size: 5rem; line-height: 1; transition: transform .1s; }
.mg-die.rolling { animation: mgRoll .8s linear infinite; }
@keyframes mgRoll { to { transform: rotate(360deg); } }
.mg-cards { align-items: flex-end; }
.mg-cardslot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-cardslot small { font-size: .72rem; color: rgba(255,255,255,.75); }
.mg-card { width: 64px; height: 90px; border-radius: 8px; background: #fff; color: #14161f; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.mg-card em { font-style: normal; font-size: 1.4rem; }
.mg-card.red { color: #e5484d; }
.mg-card.down { background: repeating-linear-gradient(45deg,#3d6fe8 0 6px,#2b56c9 6px 12px); }
.mg-coin { width: 110px; height: 110px; perspective: 600px; }
.mg-coin-in { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .6s; }
.mg-coin-in .f, .mg-coin-in .b { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; backface-visibility: hidden; background: radial-gradient(circle at 35% 30%, #ffe08a, #d29a00); box-shadow: inset 0 0 0 6px rgba(0,0,0,.12); }
.mg-coin-in .b { transform: rotateY(180deg); }
.mg-coin.spin .mg-coin-in { animation: mgFlip 1.3s cubic-bezier(.2,.8,.3,1); }
.mg-coin.tails .mg-coin-in { transform: rotateY(180deg); }
@keyframes mgFlip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(900deg) translateY(-40px); } 100% { transform: rotateY(1800deg) translateY(0); } }
.mg-box { font-size: 5rem; line-height: 1; cursor: pointer; transition: transform .2s; }
.mg-box.shake { animation: mgWobble .9s ease; }
@keyframes mgWobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg) scale(1.05); } 40% { transform: rotate(12deg) scale(1.08); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } }
.mg-reveal { display: none; flex-direction: column; align-items: center; gap: 8px; font-size: 1.05rem; }
.mg-reveal.show { display: flex; animation: mgPop .5s cubic-bezier(.2,.8,.2,1); }
.mg-reveal img { max-width: 200px; max-height: 160px; border-radius: 12px; }
@keyframes mgPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-pickitem { font-size: 2.6rem; padding: 8px 10px; line-height: 1; }
.mg-carditem { font-size: 3.4rem; padding: 0 4px; }
.mg-pickitem.open { background: rgba(255,255,255,.3); }
.mg-board { position: relative; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.35); }
.mg-board .mg-tile { position: absolute; box-sizing: border-box; border: 1px solid rgba(20,22,31,.6); background-color: #fff; color: #14161f; font-weight: 800; font-size: 1.3rem; cursor: pointer; padding: 0; transition: transform .15s; }
.mg-board .mg-tile.blank { visibility: hidden; }
.mg-slot { position: absolute; box-sizing: border-box; border: 1px dashed rgba(255,255,255,.35); }
.mg-slot .mg-tile { position: static; width: 100% !important; height: 100% !important; }
.mg-tray { min-height: 60px; }
.mg-piece { position: static; display: inline-grid; place-items: center; border-radius: 6px; }
.mg-piece.sel { outline: 3px solid #f5c518; }
.mg-clue { font-size: .9rem; color: rgba(255,255,255,.85); }
.mg-answer { min-height: 1.4em; font-size: 1.5rem; font-weight: 800; letter-spacing: .12em; }
.mg-letter { width: 40px; height: 44px; padding: 0; font-size: 1.15rem; }
.mg-pic { position: relative; width: 100%; height: 120px; border-radius: 12px; overflow: hidden; }
.mg-pic-deco { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 2.2rem; }
/* Hitta skillnaderna: två ritade bilder, hittade skillnader ringas in (ringen ritas fram), fel tryck pulsar rött */
.mg-sd { display: grid; gap: 8px; width: 100%; }
.mg-sd-pic { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 12px !important; overflow: hidden; background: #fff center / cover no-repeat; cursor: crosshair;
             box-shadow: 0 8px 20px -10px rgba(20,22,60,.5), inset 0 0 0 1px rgba(255,255,255,.4); touch-action: manipulation; }
.mg-sd-svg { display: block; width: 100%; height: 100%; }
.mg-sd-ov { position: absolute; inset: 0; pointer-events: none; }
.mg-sd-ov svg { width: 100%; height: 100%; overflow: visible; }
.mg-sd-ring { fill: none; stroke: #2fbf71; stroke-width: 2.6; stroke-dasharray: 120; stroke-dashoffset: 120; filter: drop-shadow(0 0 3px rgba(47,191,113,.6));
              animation: mgSdRing .55s cubic-bezier(.23,1,.32,1) forwards; }
@keyframes mgSdRing { to { stroke-dashoffset: 0; } }
.mg-sd-miss { fill: rgba(232,72,74,.25); stroke: #e8484a; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mgSdMiss .55s ease-out forwards; }
@keyframes mgSdMiss { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.mg-sd-pic.nope { animation: mgSdNope .3s ease-out; }
@keyframes mgSdNope { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 65% { transform: translateX(3px); } }
.mg-sd-ic { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); pointer-events: none; }
.mg-sd-ic svg { width: 100%; height: 100%; display: block; }
.mg-sd-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.mg-sd-dots i { width: 10px; height: 10px; border-radius: 50% !important; background: rgba(255,255,255,.3); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); transition: background .3s ease, transform .3s cubic-bezier(.3,1.5,.5,1); }
.mg-sd-dots i.on { background: #2fbf71; box-shadow: none; transform: scale(1.25); }
.mg-sd.done .mg-sd-pic { animation: mgSdDone .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes mgSdDone { 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .mg-sd-ring, .mg-sd-miss, .mg-sd-pic.nope, .mg-sd.done .mg-sd-pic { animation: none !important; } .mg-sd-ring { stroke-dashoffset: 0; } }
.mg-dpad { display: grid; grid-template-columns: repeat(3, 40px); grid-template-areas: ". u ." "l r r2" ". d ."; gap: 6px; justify-content: center; }
.mg-dpad .mg-arrow { width: 40px; height: 40px; padding: 0; }
.mg-dpad .mg-arrow:nth-child(1) { grid-area: u; } .mg-dpad .mg-arrow:nth-child(2) { grid-area: l; } .mg-dpad .mg-arrow:nth-child(3) { grid-area: r; } .mg-dpad .mg-arrow:nth-child(4) { grid-area: d; }
.mg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.mg-col { display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .eb-mini.shake, .mg-die.rolling, .mg-coin.spin .mg-coin-in, .mg-box.shake, .mg-reveal.show { animation: none; } }


/* ===== Spela ihop / följ med ===== */
.tg-opts { display: flex; flex-direction: column; gap: 8px; }
.tg-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line, #e4e6ee); border-radius: 14px; cursor: pointer; }
.tg-opt.sel { border-color: #3d6fe8; background: rgba(61,111,232,.06); }
.tg-opt.dis { opacity: .5; cursor: default; }
.tg-opt input { margin-top: 3px; }
.tg-opt span { display: flex; flex-direction: column; gap: 2px; }
.tg-opt b { font-size: .95rem; }
.tg-opt small { font-size: .8rem; color: var(--ink-soft, #67708a); line-height: 1.35; }
.tg-pill { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 4500; font-family: 'Inter', system-ui, sans-serif; }
.tg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(20,22,31,.78); color: #fff; font: inherit; font-size: .84rem; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.tg-btn b { font-weight: 800; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tg-title { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3d6fe8; margin-bottom: 2px; }
.tg-btn small { font-size: .72rem; font-weight: 700; background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px 8px; }
.tg-dot { display: none; }   /* inga blinkande punkter */
.tg-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(320px, 92vw); background: #fff; color: #171a22; border-radius: 18px; padding: 16px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); text-align: center; font-size: .9rem; line-height: 1.45; }
.tg-panel[hidden] { display: none; }
.tg-panel p { margin: 0 0 8px; }
.tg-code { font-size: 1.9rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-mode { color: #67708a; font-size: .82rem; }
.tg-members { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.tg-members small { color: #8a93a8; }
.tg-chip { background: #eef2ff; color: #2b56c9; border-radius: 999px; padding: 4px 10px; font-size: .8rem; font-weight: 700; }
.tg-bar { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 4500; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(20,22,31,.78); color: #fff; font: 700 .82rem 'Inter', system-ui, sans-serif; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.tg-veil { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.tg-veil span { font: 600 .78rem 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.85); background: rgba(20,22,31,.6); border-radius: 999px; padding: 6px 12px; }


/* ===== Palett v4: rubrik + sök + chips, "Populärt just nu" och kategorikort med ikon ===== */
.pal-card { width: 100%; max-width: 680px; box-sizing: border-box; }   /* aldrig bredare än overlayens innehållsyta – annars hamnar ✕ utanför på mobil */
.pal-head { align-items: flex-start; }
.pal-head > div { display: flex; flex-direction: column; gap: 2px; }
.pal-head b { font-size: 1.35rem; letter-spacing: -.01em; }
.pal-sub { font-size: .86rem; color: var(--ink-soft); font-weight: 500; }
.pal-search { position: relative; margin-bottom: 10px; }
.pal-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none; }
.pal-search input { padding-left: 42px !important; border-radius: 14px !important; }
.pal-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pal-chips::-webkit-scrollbar { display: none; }
.pal-chip { flex: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.pal-chip.on { background: var(--ink); color: #fff; }
.pal-sec-h { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: 6px 0 10px; }
.pal-more { font: inherit; font-size: .78rem; font-weight: 700; color: var(--primary); background: none; border: none; cursor: pointer; text-transform: none; letter-spacing: 0; }
.pal-ico { display: inline-flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.pal-ico svg { width: 22px; height: 22px; display: block; }
.pal-feats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 8px; scrollbar-width: thin; }
.pal-feat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 70%); cursor: pointer; font-family: inherit; color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
@media (hover: hover) and (pointer: fine) { .pal-feat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c); } }
.pal-feat b { font-size: .92rem; font-weight: 700; }
.pal-feat .pal-desc { font-size: .74rem; }
.pal-feat.off { opacity: .45; cursor: not-allowed; }
.pal-feat-badge { position: absolute; top: 10px; right: 10px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--c); border-radius: 999px; padding: 3px 8px; }
.pal-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pal-cat { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 14px 14px 12px; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); border-left-width: 1px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--surface)), color-mix(in srgb, var(--c) 4%, var(--surface))); cursor: pointer; font-family: inherit; color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
@media (hover: hover) and (pointer: fine) { .pal-cat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c); } }
.pal-cat-ico { display: inline-flex; flex: none; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 14px; background: color-mix(in srgb, var(--c) 18%, #fff); color: var(--c); }
.pal-cat-ico svg { width: 28px; height: 28px; display: block; }
.pal-cat-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 22px; }
.pal-cat-tx b { font-size: 1rem; font-weight: 700; }
.pal-cat-tx span { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
.pal-cat-n { position: absolute; top: 12px; right: 12px; font-size: .72rem; font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--c) 18%, #fff); border-radius: 999px; padding: 3px 9px; }
.pal-cat-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--ink-soft); }
.pal-cat-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.pal-cat-head > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pal-cat-head b { font-size: 1.05rem; }
.pal-cat-head > span:last-child > span { font-size: .8rem; color: var(--ink-soft); }
.pal-item { display: flex; align-items: center; gap: 12px; border-left-width: 1px; padding: 10px 12px; }
.pal-item-tx { flex: 1; min-width: 0; }
.pal-item .pal-ico { width: 38px; height: 38px; border-radius: 11px; }
.pal-item .pal-ico svg { width: 20px; height: 20px; }
.pal-item.prem .pal-ico { background: rgba(246,211,101,.25); color: #a8811a; }
@media (max-width: 520px) { .pal-cats { grid-template-columns: 1fr; } .pal-head b { font-size: 1.15rem; } .pal-feats { grid-auto-columns: minmax(140px, 60%); } .modal-ov { padding: 10px; } .pal-card { padding: 14px 14px 18px; } .pal-head .modal-x { flex: none; } }


/* ===== Spela tillsammans – inställning överst under Inställningar ===== */
.tg-set { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0 14px; background: var(--surface); }
.tg-set.on { border-color: #3d6fe8; background: color-mix(in srgb, #3d6fe8 5%, var(--surface)); }
.tg-set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin: 0; }
.tg-set-head > span { display: flex; flex-direction: column; gap: 2px; }
.tg-set-head b { font-size: .95rem; }
.tg-set-head small { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
.tg-set-head input { position: absolute; opacity: 0; width: 0; height: 0; }
.tg-switch { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #cfd4e0; position: relative; transition: background .18s; }
.tg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .18s; }
.tg-set-head input:checked + .tg-switch { background: #3d6fe8; }
.tg-set-head input:checked + .tg-switch::after { transform: translateX(18px); }
.tg-set-modes { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tg-set-modes[hidden] { display: none; }
.tg-set-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; margin: 0; background: var(--surface); }
.tg-set-opt.sel { border-color: #3d6fe8; }
.tg-set-opt.prem { border-color: rgba(246,211,101,.7); background: linear-gradient(90deg, rgba(246,211,101,.14), var(--surface) 55%); }
.tg-set-opt input { margin-top: 3px; }
.tg-set-opt span { display: flex; flex-direction: column; gap: 2px; }
.tg-set-opt b { font-size: .9rem; }
.tg-set-opt small { font-size: .76rem; color: var(--ink-soft); line-height: 1.35; }
.tg-set-modes .insp-hint { margin: 4px 0 0; }
/* Titta-läge: speglad skärm, tryck-ringar och räknare */
.tg-mirror .tg-holder { position: absolute; inset: 0; }
.tg-mirror .tg-holder img.mg-canvas { display: block; }
.tg-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,.75); font: 600 .95rem 'Inter', system-ui, sans-serif; }
.tg-taps { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.tg-ripple { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #f5c518; box-shadow: 0 0 0 4px rgba(245,197,24,.25), 0 0 18px rgba(245,197,24,.6); animation: tgRipple .9s ease-out forwards; }
@keyframes tgRipple { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.tg-bar-tx b { color: #f5c518; }

/* Premiummedlem: märket visar vad som ingår */
.prem-tag.has::before { width: 9px; height: 5px; margin: -2px 1px 0 1px; background: none; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); -webkit-mask: none; mask: none; }
.prem-has { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .78rem; color: var(--ink-soft); }
.prem-has .prem-tag { margin-left: 0; }

/* ===== Omröstning ===== */
.mg-poll { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mg-poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 11px 12px; font-size: .92rem; }
.mg-poll-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(61,111,232,.55); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.mg-poll-tx, .mg-poll-n { position: relative; }
.mg-poll-n { font-size: .74rem; font-weight: 800; color: rgba(255,255,255,.85); white-space: nowrap; }
.mg-poll-opt.mine { border-color: #f5c518; }
.mg-poll-opt.correct { border-color: #2fbf71; box-shadow: 0 0 0 2px rgba(47,191,113,.6); }
.mg-poll-opt.correct .mg-poll-bar { background: rgba(47,191,113,.6); }
.mg-poll-status { font-size: .8rem; color: rgba(255,255,255,.75); }
.mg-poll-go { padding: 9px 20px; font-size: .88rem; }
.mg-poll-go.wait { background: rgba(255,255,255,.16); color: rgba(255,255,255,.82); cursor: default; box-shadow: none; }   /* väntar på rösterna (Spela tillsammans) */
.tg-set-next { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #e6e9f0; }
.tg-set-next .check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.tg-set-next #i-tg-count-wrap { display: block; margin: 8px 0 0 26px; }
.tg-set-next #i-tg-count-wrap[hidden] { display: none; }
.tg-set-next #i-tg-count { display: block; width: 96px; margin-top: 4px; }
.tg-vote { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: min(420px, 94vw); background: #fff; color: #171a22; border-radius: 18px; padding: 14px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.4); font-family: 'Inter', system-ui, sans-serif; }
.tg-vote[hidden] { display: none; }
.tg-vote-q { font-weight: 800; font-size: .95rem; margin-bottom: 10px; }
.tg-vote-opts { display: flex; flex-direction: column; gap: 6px; }
.tg-vote-opt { font: inherit; font-weight: 700; font-size: .95rem; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #dfe3ec; background: #f7f8fc; color: #171a22; cursor: pointer; }
.tg-vote-opt:active { background: #eaf0ff; border-color: #3d6fe8; }
.tg-voted { padding: 10px 12px; border-radius: 12px; background: #eef8f1; color: #1f6f3b; font-weight: 600; }
.tg-mirror .tg-veil { z-index: 40; }


/* ===== Små telefoner: verktygsraden får alltid plats, panelen lämnar telefonen synlig, bannern en rad ===== */
@media (max-width: 639px) {
    .studio-insp { max-height: 58vh; }
    .sheet-backdrop.show { background: rgba(20,16,40,.18); }   /* telefonen ovanför ska gå att se */
    body.sheet-open .scene-panel, body.sheet-open .prem-banner, body.sheet-open .canvas-head { display: none !important; }
    body.sheet-open .canvas-strip { padding-top: 6px; align-items: flex-start; }   /* telefonen högst upp, inte centrerad under panelen */
    body.sheet-open .canvas-strip .device-frame, body.sheet-open .scene-slot { align-self: flex-start; }
    .prem-banner { flex-wrap: nowrap; }
    .prem-banner-tx { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .prem-banner-cta { flex: none; }
}
@media (max-width: 420px) {
    .cv-foot { gap: 6px; padding: 6px 8px 8px; }
    .cv-tools { flex: 1 1 auto; min-width: 0; gap: 0; padding: 4px; justify-content: space-between; overflow: visible; }
    .cv-tool { flex: 1 1 0; min-width: 0; padding: 6px 2px; }
    .cv-lbl { font-size: .62rem; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .cv-ico { width: 22px; height: 22px; } .cv-ico svg { width: 20px; height: 20px; }
    .cv-play { width: 42px; height: 42px; }
    .prem-banner-cta { padding: 6px 9px; font-size: .7rem; }
}
@media (max-width: 340px) {
    .cv-lbl { font-size: .58rem; }
    .cv-play { width: 38px; height: 38px; }
}

/* Block som dras: eget GPU-lager så texten inte rastreras om varje bildruta (flimmer) */
.eb-wrap.dragging { will-change: transform; cursor: grabbing; transition: none !important; }
.eb-wrap.dragging * { transition: none !important; }


/* ---------- Dator: telefonerna ska synas stort. Zoomraden ligger i samma rad som lägesväxeln, mindre luft runt remsan ---------- */
.canvas-top { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 100%; }
.canvas-top .canvas-head { padding: 4px 0 2px; }
.canvas-top .zoom-bar { margin: 0; }
@media (min-width: 1033px) {
    .studio-canvas { padding: 10px 24px 12px; gap: 6px; min-height: 0; }
    .canvas-foot { position: sticky; bottom: 0; z-index: 30; }   /* verktygsraden syns alltid, även om man zoomat in och ytan rullar */
    .canvas-top .zoom-bar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    .canvas-strip { padding-top: 6px; padding-bottom: 54px; }   /* skuggan (~48 px) ryms fortfarande under ramen */
    .canvas-foot { margin-top: 6px; }
    .scene-slot { gap: 6px; }
}

/* ---- Guidad uppsättning av spel (steg + demo) ---- */
.gs-card { max-width: 520px; padding: 20px 22px 18px; }
.modal-ov.out { opacity: 0; transition: opacity .2s; }
.gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gs-kicker { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: 4px; }
.gs-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
.gs-x { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 2px; }
.gs-dots { display: flex; gap: 6px; margin: 12px 0 10px; }
.gs-dots i { flex: 1; height: 4px; background: var(--line); transition: background .3s; }
.gs-dots i.on { background: var(--primary); } .gs-dots i.done { background: #2e9e5b; }
.gs-hint { margin: 0 0 14px; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.gs-body { opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); min-height: 160px; }
.gs-body.from-left { transform: translateX(-24px); }
.gs-body.in { opacity: 1; transform: none; }
.gs-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.gs-foot .btn[disabled] { opacity: .4; cursor: default; }
.gs-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.gs-slot { text-align: center; padding: 10px 6px 12px; border: 2px dashed var(--line); background: var(--surface-2, #f6f7fb); transition: border-color .2s, background .2s; }
.gs-slot small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.gs-slot b { display: block; font-size: 2rem; line-height: 1.2; color: var(--ink-soft); }
.gs-slot.on { border-style: solid; border-color: var(--primary); background: #fff; } .gs-slot.on b { color: inherit; }
.gs-slot.next { border-color: var(--primary); animation: gsPulse 1.2s ease-in-out infinite; }
.gs-slot.pop b { animation: gsPop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes gsPop { 0% { transform: scale(.4) rotate(-15deg); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes gsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(61,111,232,.35); } 50% { box-shadow: 0 0 0 6px rgba(61,111,232,0); } }
.gs-hands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gs-hand { border: 1.5px solid var(--line); background: #fff; padding: 14px 6px 10px; cursor: pointer; font: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.gs-hand span { display: block; font-size: 2.3rem; line-height: 1.1; }
.gs-hand small { display: block; margin-top: 6px; font-weight: 700; font-size: .8rem; }
@media (hover: hover) and (pointer: fine) { .gs-hand:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,28,55,.12); } }
.gs-hand:active span { transform: scale(.85); }
.gs-reset { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; }
.gs-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gs-chip { border: 1.5px solid var(--line); background: #fff; padding: 14px 6px; cursor: pointer; font: inherit; text-align: center; transition: border-color .15s, background .15s; }
.gs-chip b { display: block; font-size: 1.6rem; } .gs-chip small { display: block; font-size: .78rem; color: var(--ink-soft); }
.gs-chip.on { border-color: var(--primary); background: #eef3ff; }
.gs-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--line); background: #fff; }
.gs-input:focus { outline: none; border-color: var(--primary); }
.gs-intro { margin: 0 0 12px; font-size: .9rem; line-height: 1.45; }
.gs-phone { position: relative; width: 300px; max-width: 100%; height: 400px; margin: 0 auto; border-radius: 28px; border: 6px solid #14161f; background: linear-gradient(160deg, #ff9eaa, #c7b4ff); overflow: hidden; box-shadow: 0 18px 40px rgba(20,28,55,.25); }
.gs-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; }
.gs-screen .eb { max-width: 100%; }
.gs-finger { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 1; transform: translate(-40%, -10%); opacity: 0; transition: left .4s cubic-bezier(.2,.8,.2,1), top .4s cubic-bezier(.2,.8,.2,1), opacity .25s; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); z-index: 5; }
.gs-finger.show { opacity: 1; }
.gs-finger.tap { animation: gsTap .22s ease; }
@keyframes gsTap { 50% { transform: translate(-40%, -10%) scale(.8); } }
.gs-open { margin: 0 0 12px; width: 100%; }
@media (max-width: 639px) { .gs-card { max-height: 92dvh; padding: 16px 14px; } .gs-phone { height: 360px; } .gs-hand span { font-size: 2rem; } }
/* Utkast-notis (visas en gång) */
.st-draft { bottom: auto; top: 76px; transform: translate(-50%, -14px); border-left: 4px solid var(--primary); }
.st-draft.on { transform: translate(-50%, 0); }
.st-draft .muted { font-weight: 500; color: #67708a; }
.st-draft .st-draft-go { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Inzoomad telefon: ytan rullar åt alla håll, procenten visas mellan knapparna */
.canvas-strip.zoomed { overflow: auto; align-items: flex-start; }
.zoom-pct { min-width: 46px; text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-soft); align-self: center; }
/* Zoom på mobilen: liten kontroll uppe till höger på ytan (datorn har zoomraden under telefonen) */
.m-zoom { display: none; }
@media (max-width: 1032px) {
    .studio-canvas { position: relative; }
    .m-zoom { display: flex; position: fixed; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 30; background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(20,28,55,.14); }
    .m-zoom button { border: 0; background: none; font: inherit; font-weight: 800; font-size: 1.1rem; min-width: 40px; height: 40px; color: var(--ink); cursor: pointer; }
    .m-zoom #mz-pct { font-size: .74rem; min-width: 52px; color: var(--ink-soft); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
    .m-zoom.on #mz-pct { color: var(--primary); }
    .canvas-strip.zoomed { overflow: auto; scroll-snap-type: none; align-items: flex-start; justify-content: flex-start; }
}
.m-zoom[hidden] { display: none !important; }

/* ============================================================
   Avslöjande: egna figurer och öppningsanimationer per stil
   (present, kuvert, dörr, lås). Gardin, suddig ruta och skrapyta har egna redan.
   ============================================================ */
.rv-art { position: relative; display: block; width: 120px; height: 120px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); }
.rv-art > div { position: absolute; inset: 0; }
.eb-reveal.opened .rv-art { animation: none; }   /* stilarna nedan har sina egna öppningar */

/* ---- Present: låda med band, locket lyfter och studsar iväg ---- */
.rvg { perspective: 500px; animation: rvgIdle 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.rvg-box { position: absolute; left: 14px; right: 14px; top: 48px; bottom: 6px; background: linear-gradient(180deg, #ff6b8a, #e0335e); border-radius: 6px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.12); }
.rvg-rib { position: absolute; top: 0; bottom: 0; left: 50%; width: 14px; margin-left: -7px; background: linear-gradient(90deg, #ffe08a, #ffc14d); }
.rvg-lid { position: absolute; left: 6px; right: 6px; top: 34px; height: 20px; background: linear-gradient(180deg, #ff87a2, #ff5f83); border-radius: 5px; transform-origin: 50% 100%; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.rvg-lid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 14px; margin-left: -7px; background: linear-gradient(90deg, #ffe08a, #ffc14d); }
.rvg-bow { position: absolute; top: -18px; width: 22px; height: 18px; border: 4px solid #ffc14d; border-radius: 50% 50% 50% 50%; background: #ffe6a7; }
.rvg-bow.l { left: calc(50% - 22px); transform: rotate(-20deg); } .rvg-bow.r { left: calc(50% + 0px); transform: rotate(20deg); }
.rvg-knot { position: absolute; top: -8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: #ffb327; border-radius: 3px; }
.rvg-spark { position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; opacity: 0; transform: scale(0); }
.rvg-spark.s1 { left: 18px; top: 20px; } .rvg-spark.s2 { right: 16px; top: 12px; } .rvg-spark.s3 { left: 54px; top: 2px; }
@keyframes rvgIdle { 0%, 100% { transform: rotate(0) translateY(0); } 40% { transform: rotate(-3deg) translateY(-4px); } 60% { transform: rotate(3deg) translateY(-4px); } }
.eb-reveal.opened .rvg { animation: rvgJolt .5s ease; }
.eb-reveal.opened .rvg-lid { animation: rvgLid .9s cubic-bezier(.2,.9,.3,1) forwards; }
.eb-reveal.opened .rvg-box { animation: rvgBox .6s ease forwards; }
.eb-reveal.opened .rvg-spark { animation: rvgSpark .7s ease-out forwards; }
.eb-reveal.opened .rvg-spark.s2 { animation-delay: .1s; } .eb-reveal.opened .rvg-spark.s3 { animation-delay: .2s; }
@keyframes rvgJolt { 0% { transform: scale(1); } 30% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes rvgLid { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-110px) rotate(-28deg); opacity: 0; } }
@keyframes rvgBox { 0% { transform: translateY(0); } 100% { transform: translateY(6px); opacity: .85; } }
@keyframes rvgSpark { 0% { opacity: 0; transform: scale(0) translateY(0); } 40% { opacity: 1; transform: scale(1.4) translateY(-14px); } 100% { opacity: 0; transform: scale(.4) translateY(-36px); } }

/* ---- Kuvert: fliken viks upp och brevet med hjärta glider ut ---- */
.rve { perspective: 600px; animation: rveIdle 2.6s ease-in-out infinite; }
.rve-back { position: absolute; left: 8px; right: 8px; top: 28px; bottom: 14px; background: #f4ead6; border-radius: 6px; }
.rve-letter { position: absolute; left: 20px; right: 20px; top: 40px; height: 66px; background: #fff; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.15); padding: 14px 10px 0; box-sizing: border-box; z-index: 1; }
.rve-letter i { display: block; height: 5px; margin: 0 0 7px; background: #e6e2f3; border-radius: 3px; } .rve-letter i:nth-child(3) { width: 60%; }
.rve-front { position: absolute; left: 8px; right: 8px; top: 28px; bottom: 14px; z-index: 2; border-radius: 6px;
    background: linear-gradient(180deg, #fbf3e2, #efe2c6); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
.rve-flap { position: absolute; left: 8px; right: 8px; top: 28px; height: 46px; z-index: 3; background: linear-gradient(180deg, #f7ecd4, #ead9b6); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.rve-seal { position: absolute; left: 50%; top: 66px; z-index: 4; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #d8264b; color: #fff; font-size: 12px; font-style: normal; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
@keyframes rveIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.eb-reveal.opened .rve { animation: none; }
.eb-reveal.opened .rve-flap { animation: rveFlap .6s ease forwards; z-index: 0; }
.eb-reveal.opened .rve-seal { animation: rveSeal .3s ease forwards; }
.eb-reveal.opened .rve-letter { animation: rveLetter .8s cubic-bezier(.2,.9,.3,1) .35s forwards; }
@keyframes rveFlap { 0% { transform: rotateX(0); } 100% { transform: rotateX(-175deg); } }
@keyframes rveSeal { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes rveLetter { 0% { transform: translateY(0); } 100% { transform: translateY(-58px) scale(1.06); z-index: 5; } }

/* ---- Dörr: karm, dörr med speglar och handtag, svänger upp mot ett varmt ljus ---- */
.rvd { perspective: 520px; }
.rvd-light { position: absolute; left: 22px; right: 22px; top: 6px; bottom: 6px; border-radius: 4px 4px 0 0; background: radial-gradient(circle at 50% 60%, #fff4c2, #ffc861 60%, #f39b2c); opacity: 0; transition: opacity .5s ease .15s; }
.rvd-frame { position: absolute; left: 18px; right: 18px; top: 2px; bottom: 2px; border: 5px solid #6b4a2a; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; }
.rvd-door { position: absolute; inset: 0; background: linear-gradient(90deg, #9c6b3d, #b47f4e 55%, #8f6035); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.3,.8,.3,1); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.rvd-panel { position: absolute; left: 12px; right: 12px; height: 34%; border: 2px solid rgba(0,0,0,.18); border-radius: 2px; box-shadow: inset 2px 2px 0 rgba(255,255,255,.15); }
.rvd-panel:nth-child(1) { top: 9%; } .rvd-panel:nth-child(2) { bottom: 9%; }
.rvd-knob { position: absolute; right: 9px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: #ffd46b; box-shadow: 0 1px 2px rgba(0,0,0,.4); animation: rvdKnob 2s ease-in-out infinite; }
@keyframes rvdKnob { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.5); } }
.eb-reveal.opened .rvd-door { transform: rotateY(-105deg); }
.eb-reveal.opened .rvd-light { opacity: 1; }
.eb-reveal.opened .rvd-knob { animation: none; }

/* ---- Lås: hänglås vars bygel hoppar upp ---- */
.rvl { animation: rvlIdle 2.4s ease-in-out infinite; transform-origin: 50% 20%; }
.rvl-shackle { position: absolute; left: 50%; top: 10px; width: 46px; height: 44px; margin-left: -23px; border: 10px solid #c9cdd6; border-bottom: 0; border-radius: 30px 30px 0 0; box-sizing: border-box; transform-origin: 20% 100%; transition: transform .45s cubic-bezier(.3,1.4,.4,1); }
.rvl-body { position: absolute; left: 50%; top: 50px; width: 72px; height: 58px; margin-left: -36px; border-radius: 12px; background: linear-gradient(180deg, #ffd45c, #e8a812); box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.rvl-hole { position: absolute; left: 50%; top: 18px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #5a3d05; }
.rvl-hole::after { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 13px; background: #5a3d05; border-radius: 0 0 3px 3px; }
@keyframes rvlIdle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.eb-reveal.opened .rvl { animation: rvlPop .5s ease; }
.eb-reveal.opened .rvl-shackle { transform: translateY(-16px) rotateY(180deg) rotate(-10deg); }
.eb-reveal.opened .rvl-body { animation: rvlFade .5s ease .35s forwards; }
@keyframes rvlPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rvlFade { to { opacity: 0; transform: translateY(14px); } }
.eb-reveal.rv-wrong .rvl { animation: rvShake .4s; }
@media (prefers-reduced-motion: reduce) { .rvg, .rve, .rvl, .rvd-knob { animation: none !important; } }
/* Påminnelse i innehållsväljaren: scenen har redan ett spel */
.pal-card { position: relative; }
.pal-lock { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,16,40,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.pal-lock.on { opacity: 1; }
.pal-lock-in { background: #fff; padding: 22px 22px 18px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(20,28,55,.3); }
.pal-lock-ic { display: block; font-size: 2rem; margin-bottom: 6px; }
.pal-lock-in > b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 8px; }
.pal-lock-in p { margin: 0 0 16px; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.pal-lock-b { display: flex; flex-direction: column; gap: 8px; }
.pal-item.off .pal-desc, .pal-feat.off .pal-desc { color: #b3261e; font-weight: 700; }
/* Undvik bomben: vändbara kort som i memory */
/* Undvik bomben: kort med riktig baksida, ritat paket (locket hoppar, gnistor) och bomb (stubin, tryckvåg, rök) */
.mg-bomb { gap: 8px; }
.mg-bcard { aspect-ratio: 1; padding: 0; background: none; border: none; perspective: 600px; position: relative; overflow: visible; }
.mg-bcard-in { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.3,1.25,.5,1); transform-style: preserve-3d; }
.mg-bcard.open .mg-bcard-in { transform: rotateY(180deg); }
.mg-bcard-back, .mg-bcard-face { position: absolute; inset: 0; border-radius: 14px !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mg-bcard-back { background: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.4px) 0 0 / 10px 10px, linear-gradient(145deg, #4f7cf0, #6b46e5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 8px 18px -8px rgba(20,22,60,.6); }
.mg-bcard-back svg { width: 34%; height: 34%; fill: #fff; opacity: .92; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.mg-bcard-face { background: linear-gradient(160deg, #ffffff, #eef1f8); transform: rotateY(180deg); box-shadow: 0 8px 18px -8px rgba(20,22,60,.5); }
.mg-bcard-face svg { width: 74%; height: 74%; overflow: visible; }
.mg-bempty { width: 22%; height: 22%; border-radius: 50% !important; border: 2px dashed #cfd5e3; }
.mg-bemoji { font-size: 1.9rem; }
.mg-bomb.dealt .mg-bcard { animation: mgDeal .5s cubic-bezier(.23,1,.32,1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes mgDeal { from { opacity: 0; transform: translateY(16px) scale(.8) rotate(-4deg); } }
.mg-bcard.miss .mg-bcard-face { background: #e9ecf3; }
.mg-bcard.miss .mg-bempty { opacity: .5; }
.mg-bcard.hit .mg-bcard-face { background: linear-gradient(160deg, #f1fff5, #d9f5e3); box-shadow: inset 0 0 0 2.5px #2fbf71, 0 0 22px rgba(47,191,113,.45); }
.mg-bcard.hit .mg-gift { animation: mgGiftPop .6s cubic-bezier(.3,1.5,.5,1); transform-origin: 50% 90%; }
.mg-bcard.hit .mg-gift-lid { animation: mgLid .7s cubic-bezier(.3,1.4,.5,1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes mgGiftPop { 0% { transform: scale(.8); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes mgLid { 0% { transform: none; } 40% { transform: translateY(-9px) rotate(-10deg); } 100% { transform: none; } }
.mg-bomb.cleared .mg-bcard.hit .mg-gift { animation: mgHop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes mgHop { 0%, 100% { transform: none; } 45% { transform: translateY(-8px) scale(1.06); } }
.mg-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; background: #ffd43b; border-radius: 50% !important; pointer-events: none; z-index: 3;
            animation: mgSpark .8s cubic-bezier(.2,.8,.2,1) forwards; }
.mg-spark:nth-child(odd) { background: #ff7d9a; width: 5px; height: 5px; }
@keyframes mgSpark { 0% { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-46px) scale(1); opacity: 0; } }
.mg-fuse { transform-box: fill-box; transform-origin: center; animation: mgFuse .35s ease-in-out infinite alternate; }
@keyframes mgFuse { from { transform: scale(.8) rotate(0deg); opacity: .8; } to { transform: scale(1.15) rotate(20deg); opacity: 1; } }
.mg-bcard.boom .mg-bcard-face { background: linear-gradient(160deg, #fff1ee, #ffd3cc); box-shadow: inset 0 0 0 2.5px #e8484a; }
.mg-bcard.boom .mg-bcard-face::after { content: ""; position: absolute; left: 50%; top: 55%; width: 120%; aspect-ratio: 1; margin: -60% 0 0 -60%; border-radius: 50% !important;
            background: radial-gradient(circle, #fff6c2 0%, #ffd43b 25%, #ff7a1a 50%, rgba(232,72,74,0) 70%); animation: mgBlast .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes mgBlast { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.mg-bcard.boom .mg-bombsvg { animation: mgBombShake .45s ease-in-out; }
@keyframes mgBombShake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-6deg) scale(1.1); } 50% { transform: translateX(4px) rotate(6deg) scale(1.15); } 80% { transform: translateX(-2px) rotate(-3deg); } }
.mg-smoke { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50% !important; background: rgba(120,124,140,.55); pointer-events: none; z-index: 3;
            animation: mgSmoke 1s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--j) * 40ms); }
@keyframes mgSmoke { 0% { transform: rotate(var(--a)) translateY(0) scale(.3); opacity: .8; } 100% { transform: rotate(var(--a)) translateY(-38px) scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mg-bomb.dealt .mg-bcard, .mg-bcard.hit .mg-gift, .mg-bcard.hit .mg-gift-lid, .mg-fuse, .mg-spark, .mg-smoke, .mg-bcard.boom .mg-bcard-face::after { animation: none !important; } }
@keyframes mgBoom { 0% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.35); } 100% { transform: rotateY(180deg) scale(1); } }
/* Undvik bomben: timer medan korten visas */
.mg-bomb-timer { position: relative; width: 100%; box-sizing: border-box; height: 22px; margin: 0 0 10px; background: rgba(255,255,255,.14); border-radius: 999px !important; overflow: hidden; opacity: .35; transition: opacity .2s; }
.mg-bomb-timer.on { opacity: 1; } .mg-bomb-timer:not(.on) b { opacity: 0; }
.mg-bomb-timer i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffd86b, #ff8a4c); }
.mg-bomb-timer b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* Erbjudande: Spela tillsammans när ett socialt spel läggs till */
.tg-ask { max-width: 440px; text-align: center; padding: 26px 24px 20px; }
.tg-ask-ic { display: block; font-size: 2.2rem; margin-bottom: 6px; }
.tg-ask-h { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; margin: 0 0 8px; }
.tg-ask p { margin: 0 0 12px; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.tg-ask-l { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; font-size: .88rem; line-height: 1.5; }
.tg-ask-l li { padding-left: 22px; position: relative; } .tg-ask-l li::before { content: "✓"; position: absolute; left: 4px; color: #2e9e5b; font-weight: 800; }
.tg-ask-b { display: flex; flex-direction: column; gap: 8px; }
.img-ask-pick { display: inline-flex; cursor: pointer; }
/* Gäststeget i studion: förhandsbild av formuläret */
.gs-prev { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 8%; background: #fff; color: #171a22; border-radius: 22px; padding: 18px 16px; box-sizing: border-box; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.22); font-family: 'Inter', system-ui, sans-serif; }
.gs-prev-t { display: block; font-size: 1.05rem; margin: 0 0 10px; }
.gs-prev-q { font-weight: 700; font-size: .88rem; margin: 0 0 8px; }
.gs-prev-att { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 10px; }
.gs-prev-att span { text-align: center; padding: 8px 4px; border: 1.5px solid #dfe3ec; border-radius: 12px; font-size: .82rem; font-weight: 600; }
.gs-prev-att .yes { background: #17b26a; border-color: #17b26a; color: #fff; }
.gs-prev-f { border: 1.5px solid #dfe3ec; border-radius: 12px; padding: 9px 12px; font-size: .82rem; margin: 0 0 8px; font-weight: 600; }
.gs-prev-f.soft { color: #9aa3b5; font-weight: 400; }
.gs-prev-btn { text-align: center; background: #17b26a; color: #fff; border-radius: 999px; padding: 10px; font-weight: 700; font-size: .88rem; margin: 4px 0 10px; }
.gs-prev-wall { border-top: 1px solid #eef0f5; padding-top: 10px; }
.gs-prev-wall > b { display: block; font-size: .88rem; margin: 0 0 8px; }
.gs-prev-item { background: #f6f7fb; border-radius: 12px; padding: 8px 10px; font-size: .82rem; }
.gs-prev-item b { display: block; font-size: .8rem; }
.gs-prev-must { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a4a00; background: #fff4e0; padding: 6px; }
.sr-badge.guests { background: #fff4e0; color: #9a4a00; }
/* Gäststeget i förhandsvisningen (formuläret finns bara i det publicerade kortet) */
.exp-guests { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.exp-guests-ph { background: rgba(255,255,255,.94); color: #171a22; border-radius: 22px; padding: 24px 22px; max-width: 320px; text-align: center; font-family: 'Inter', system-ui, sans-serif; }
.exp-guests-ph b { display: block; font-size: 1.1rem; margin: 0 0 8px; }
.exp-guests-ph p { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; color: #4a5470; }
.exp-guests-next { border: none; border-radius: 999px; background: #14161f; color: #fff; font: inherit; font-weight: 700; padding: 12px 22px; cursor: pointer; }
/* ---- Rundturen, ny stil utan maskot ---- */
.tour-welcome { position: fixed; inset: 0; z-index: 7000; background: rgba(16,14,32,.62); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tw-card.tw-clean { position: relative; width: 100%; max-width: 440px; background: #fff; color: #14161f; padding: 28px 28px 20px; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); text-align: left; }
.tw-clean::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #3d6fe8, #a855f7, #ff6b8a); border-radius: 22px 22px 0 0; }
.tw-kicker { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #3d6fe8; margin: 0 0 8px; }
.tw-clean h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; line-height: 1.15; margin: 0 0 8px; }
.tw-clean > p { color: #4a5470; margin: 0 0 14px; line-height: 1.5; font-size: .95rem; }
.tw-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; counter-reset: tw; }
.tw-list li { position: relative; padding: 10px 12px 10px 40px; background: #f5f7fb; border-radius: 12px; font-size: .9rem; font-weight: 600; }
.tw-list li::before { content: counter(tw); counter-increment: tw; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #3d6fe8; color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tw-clean .tw-actions { display: flex; flex-direction: column; gap: 8px; }
.tw-clean .tw-actions .btn { width: 100%; padding: 13px 16px; font-size: .95rem; }
.tw-foot { margin: 12px 0 0; font-size: .78rem; color: #8a93a8; text-align: center; }
.tour-root .tour-dim { display: none; }
.tour-root .tour-highlight { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(16,14,32,.45), 0 0 0 3px #fff, 0 0 0 6px rgba(61,111,232,.55); transition: left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1), width .35s, height .35s; pointer-events: none; }
.tour-pop.tour-pop--clean { position: absolute; background: #fff; color: #14161f; border-radius: 18px; padding: 16px 18px 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); box-sizing: border-box; overflow: auto; transition: left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1); }
.tour-pop--clean::before { content: ""; position: absolute; left: var(--arrow-x, 30px); width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.tour-pop--clean.tour-pop--below::before { top: -7px; } .tour-pop--clean.tour-pop--above::before { bottom: -7px; }
.tour-progress { display: flex; gap: 4px; margin: 0 0 10px; }
.tour-progress i { flex: 1; height: 4px; border-radius: 2px; background: #e6e9f2; }
.tour-progress i.on { background: #3d6fe8; } .tour-progress i.done { background: #b9c9f5; }
.tour-step-n { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a93a8; margin: 0 0 4px; }
.tour-pop--clean .tour-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; margin: 0 0 6px; }
.tour-pop--clean .tour-text { color: #3f4759; font-size: .92rem; line-height: 1.5; margin: 0 0 10px; }
.tour-tip { margin: 0 0 12px; padding: 9px 12px; background: #eef3ff; border-left: 3px solid #3d6fe8; border-radius: 0 10px 10px 0; font-size: .85rem; line-height: 1.45; color: #2b3a5c; }
.tour-tip b { color: #3d6fe8; margin-right: 4px; }
.tour-pop--clean .tour-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.tour-pop--clean .tour-skip { background: none; border: none; color: #8a93a8; font-family: inherit; font-size: .8rem; cursor: pointer; padding: 6px 0; }
.tour-pop--clean .tour-nav { display: flex; gap: 6px; }
.tour-pop--clean .tour-nav .btn { padding: 10px 14px; }
@media (max-width: 639px) {
    .tour-welcome { padding: 12px; align-items: flex-end; }
    .tw-card.tw-clean { max-width: none; padding: 22px 18px 16px; border-radius: 22px 22px 18px 18px; }
    .tw-clean h2 { font-size: 1.35rem; }
    .tour-pop.tour-pop--clean { padding: 14px 14px 12px; border-radius: 16px; }
    .tour-pop--clean .tour-title { font-size: 1.1rem; }
    .tour-pop--clean .tour-text { font-size: .88rem; }
    .tour-pop--clean .tour-controls { flex-wrap: wrap; }
    .tour-pop--clean .tour-nav { margin-left: auto; }
    .tour-pop--clean .tour-nav .btn { min-height: 42px; }
}
.tour-root { z-index: 6900; }
.tour-root .tour-pop--clean { pointer-events: auto; }
.tour-root .tour-highlight { z-index: 1; }
.tour-root .tour-pop--clean { z-index: 2; animation: none; }
.tour-pop.tour-pop--clean { overflow: visible; }
.tour-pop--clean.tour-pop--right::before { left: -7px; top: var(--arrow-y, 30px); transform: translateY(-50%) rotate(45deg); }
.tour-pop--clean.tour-pop--left::before { left: auto; right: -7px; top: var(--arrow-y, 30px); transform: translateY(-50%) rotate(45deg); }
.tour-pop--clean.tour-pop--over::before { display: none; }
/* Rundturen: lugna färger utan gradient, rutan på fast plats utan pil */
.tw-clean::before { display: none; }
.tw-kicker, .tour-step-n { color: #8a93a8; }
.tw-list li::before { background: #14161f; }
.tour-progress i.on { background: #14161f; } .tour-progress i.done { background: #b9bfcc; }
.tour-tip { background: #f5f6fa; border-left-color: #14161f; color: #2b3040; }
.tour-tip b { color: #14161f; }
.tour-root .tour-highlight { box-shadow: 0 0 0 9999px rgba(16,14,32,.5), 0 0 0 3px #fff; }
.tour-pop--clean::before { display: none !important; }
.tour-pop.tour-pop--clean { transition: none; }
/* Start- och slutscenen ligger fast */
.scene-row.locked .sr-lock { display: inline-flex; align-items: center; opacity: .55; cursor: default; letter-spacing: 0; margin-right: 0; }
.scene-row.locked .sr-lock svg { width: 13px; height: 13px; }
.sr-tools button:disabled { opacity: .3; cursor: default; }
/* Fråga innan en scen tas bort */
.del-ask { text-align: center; }
.del-ask-ico { width: 52px; height: 52px; border-radius: 50%; background: #fff1f0; color: #d93025; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.del-ask-ico svg { width: 26px; height: 26px; }
.del-ask-name { margin: -4px 0 10px; font-size: .82rem; font-weight: 700; color: #8a93a8; }
.del-ask .btn.danger { background: #d93025; color: #fff; }
@media (hover: hover) and (pointer: fine) { .del-ask .btn.danger:hover { background: #b3261e; } }
/* ---- Rundturen: demonstrationer och finputs ---- */
.tour-pop.tour-pop--clean { overflow: auto; }
.tour-step-n span { color: #14161f; }
.tour-demo { position: relative; height: 132px; margin: 0 0 12px; border-radius: 14px; background: linear-gradient(160deg, #eef1f8, #f7f8fc); overflow: hidden; }
.td { position: absolute; inset: 0; }
.td-finger { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(20,22,31,.55); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); opacity: 0; pointer-events: none; }
/* Dra scener */
.td-reorder .td-row { position: absolute; left: 16px; right: 16px; height: 22px; display: flex; align-items: center; gap: 7px; padding: 0 8px; background: #fff; border: 1px solid #e3e6ee; border-radius: 7px; font-size: .62rem; color: #8a93a8; }
.td-reorder .td-row i { font-style: normal; letter-spacing: -2px; width: 10px; }
.td-reorder .td-row b { width: 14px; height: 14px; border-radius: 4px; background: #eef0f5; color: #14161f; font-size: .58rem; display: flex; align-items: center; justify-content: center; }
.td-reorder .td-row span { flex: 1; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-reorder .td-row em { font-style: normal; font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #3d6fe8; }
.td-reorder .td-r1 { top: 10px; } .td-reorder .td-r2 { top: 38px; } .td-reorder .td-r3 { top: 66px; } .td-reorder .td-r4 { top: 94px; }
.td-reorder .td-r2 { animation: tdR2 4.2s ease-in-out infinite; z-index: 2; }
.td-reorder .td-r3 { animation: tdR3 4.2s ease-in-out infinite; }
.td-reorder .td-finger { left: 22px; top: 40px; animation: tdRF 4.2s ease-in-out infinite; }
@keyframes tdR2 { 0%, 18% { transform: none; box-shadow: none; } 26% { transform: translateY(0) scale(1.03); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 52% { transform: translateY(28px) scale(1.03); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 60%, 88% { transform: translateY(28px); box-shadow: none; } 100% { transform: none; } }
@keyframes tdR3 { 0%, 30% { transform: none; } 52%, 88% { transform: translateY(-28px); } 100% { transform: none; } }
@keyframes tdRF { 0%, 10% { opacity: 0; transform: translateY(-6px); } 16% { opacity: 1; transform: none; } 26% { transform: scale(.85); } 52% { transform: translateY(28px) scale(.85); opacity: 1; } 62% { transform: translateY(28px); opacity: 0; } 100% { opacity: 0; } }
/* Tryck, håll inne och dra, svep */
.td-touch .td-phone { position: absolute; left: 50%; top: 10px; width: 78px; height: 150px; margin-left: -39px; border-radius: 14px; background: linear-gradient(160deg, #2b2a5c, #6a3f8e); overflow: hidden; }
.td-touch .td-block { position: absolute; left: 12px; top: 18px; width: 40px; padding: 5px; border-radius: 6px; border: 1.5px solid transparent; animation: tdTB 7s ease-in-out infinite; }
.td-touch .td-block span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); margin: 0 0 4px; }
.td-touch .td-block span:last-child { width: 60%; margin: 0; }
.td-touch .td-lines { position: absolute; left: 12px; right: 12px; top: 58px; animation: tdTL 7s ease-in-out infinite; }
.td-touch .td-lines span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.32); margin: 0 0 8px; }
.td-touch .td-lines span:nth-child(even) { width: 70%; }
.td-touch .td-finger { left: 50%; top: 24px; margin-left: -18px; animation: tdTF 7s ease-in-out infinite; }
.td-touch .td-cap { position: absolute; left: 8px; right: 8px; bottom: 6px; display: flex; justify-content: space-between; gap: 6px; font-size: .58rem; font-weight: 700; color: #b5bccb; }
.td-touch .td-cap span { animation: tdCap 7s ease-in-out infinite; }
.td-touch .td-cap-2 { animation-delay: 1.4s; } .td-touch .td-cap-3 { animation-delay: 3.9s; }
@keyframes tdCap { 0%, 4% { color: #b5bccb; } 8%, 28% { color: #14161f; } 34%, 100% { color: #b5bccb; } }
@keyframes tdTF { 0%, 4% { opacity: 0; transform: translateY(-6px); } 8% { opacity: 1; transform: none; } 11% { transform: scale(.8); } 14% { transform: none; } 20% { transform: none; } 24% { transform: scale(.8); box-shadow: 0 0 0 0 rgba(20,22,31,.25); } 30% { transform: scale(.8); box-shadow: 0 0 0 10px rgba(20,22,31,.12); } 48% { transform: translate(18px, 34px) scale(.8); box-shadow: 0 0 0 10px rgba(20,22,31,.12); } 52% { transform: translate(18px, 34px); box-shadow: 0 0 0 0 rgba(20,22,31,0); opacity: 1; } 57% { opacity: 0; transform: translate(0, 90px); } 60% { opacity: 1; transform: translate(0, 90px) scale(.85); } 74% { opacity: 1; transform: translate(0, 30px) scale(.85); } 78%, 100% { opacity: 0; transform: translate(0, 30px); } }
@keyframes tdTB { 0%, 10% { transform: none; border-color: transparent; } 12%, 22% { border-color: #fff; } 30% { border-color: #fff; transform: none; } 48%, 56% { border-color: #fff; transform: translate(18px, 34px); } 60% { border-color: transparent; transform: translate(18px, 34px); } 74% { transform: translate(18px, -6px); } 78%, 90% { transform: translate(18px, -6px); } 100% { transform: none; border-color: transparent; } }
@keyframes tdTL { 0%, 60% { transform: none; } 74%, 90% { transform: translateY(-40px); } 100% { transform: none; } }
/* Spel: memory */
.td-game .td-deck { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); display: flex; gap: 10px; }
.td-game .td-card { position: relative; width: 44px; height: 58px; transform-style: preserve-3d; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.td-game .td-card span { position: absolute; inset: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: 1.3rem; }
.td-game .td-card .b { background: #14161f; color: #fff; font-weight: 800; font-size: 1rem; }
.td-game .td-card .f { background: #fff; border: 1.5px solid #e3e6ee; transform: rotateY(180deg); }
.td-game .c1 { animation-name: tdG1; } .td-game .c3 { animation-name: tdG3; } .td-game .c2 { animation-name: tdG2; } .td-game .c4 { animation-name: tdG4; }
@keyframes tdG1 { 0%, 12% { transform: none; } 20%, 92% { transform: rotateY(180deg); } 100% { transform: none; } }
@keyframes tdG3 { 0%, 30% { transform: none; } 38%, 92% { transform: rotateY(180deg); } 100% { transform: none; } }
@keyframes tdG2 { 0%, 52% { transform: none; } 60%, 92% { transform: rotateY(180deg); } 100% { transform: none; } }
@keyframes tdG4 { 0%, 68% { transform: none; } 76%, 92% { transform: rotateY(180deg); } 100% { transform: none; } }
.td-game .td-finger { top: 46px; left: 50%; animation: tdGF 6s ease-in-out infinite; }
@keyframes tdGF { 0%, 6% { opacity: 0; transform: translateX(-90px); } 10% { opacity: 1; transform: translateX(-90px); } 14% { transform: translateX(-90px) scale(.8); } 24% { transform: translateX(18px); } 32% { transform: translateX(18px) scale(.8); } 46% { transform: translateX(-36px); } 54% { transform: translateX(-36px) scale(.8); } 64% { transform: translateX(72px); } 70% { transform: translateX(72px) scale(.8); } 78% { opacity: 1; transform: translateX(72px); } 84%, 100% { opacity: 0; transform: translateX(72px); } }
.td-game .td-win { position: absolute; right: 12px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: #17b26a; color: #fff; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; transform: scale(0); animation: tdGW 6s ease-in-out infinite; }
@keyframes tdGW { 0%, 78% { transform: scale(0); } 84% { transform: scale(1.15); } 88%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@media (max-width: 639px) { .tour-demo { height: 118px; } .td-touch .td-phone { top: 6px; } }
@media (prefers-reduced-motion: reduce) { .td *, .td-finger { animation: none !important; } }
/* Gestdemon: telefonen till vänster, bildtexterna i en kolumn till höger */
.td-touch .td-phone { left: 26px; top: 12px; width: 70px; height: 108px; margin-left: 0; }
.td-touch .td-block { left: 10px; top: 14px; width: 36px; }
.td-touch .td-lines { left: 10px; right: 10px; top: 50px; }
.td-touch .td-finger { left: 42px; top: 20px; margin-left: 0; }
.td-touch .td-cap { left: 118px; right: 10px; top: 24px; bottom: auto; flex-direction: column; justify-content: flex-start; gap: 14px; font-size: .74rem; }
.td-touch .td-cap span { position: relative; padding-left: 16px; }
.td-touch .td-cap span::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; opacity: .5; }
@media (max-width: 639px) { .td-touch .td-phone { top: 6px; height: 104px; } .td-touch .td-cap { top: 18px; } }
/* ---- Rundturen v3: renare ruta, ark på telefon, fler demonstrationer ---- */
.tour-pop--clean .tour-grab { display: none; width: 36px; height: 4px; border-radius: 2px; background: #d9dde8; margin: 0 auto 10px; }
.tour-pop--clean .tour-progress { display: block; height: 3px; border-radius: 2px; background: #eef0f5; overflow: hidden; margin: 0 0 12px; }
.tour-pop--clean .tour-progress i { display: block; flex: none; height: 100%; width: 0; border-radius: 2px; background: #14161f; transition: width .35s ease; }
.tour-pop--clean .tour-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 4px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a93a8; }
.tour-pop--clean .tour-head .tour-step-n { margin: 0; }
.tour-pop--clean .tour-group { color: #14161f; }
.tour-pop--clean .tour-skip { padding: 6px 0; }
.tw-demo { position: relative; height: 122px; margin: -6px 0 16px; border-radius: 14px; background: linear-gradient(160deg, #eef1f8, #f7f8fc); overflow: hidden; }
/* Telefonen som ark nertill */
.tour-root.is-mobile .tour-pop.tour-pop--clean { border-radius: 20px 20px 0 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px rgba(0,0,0,.28); }
.tour-root.is-mobile .tour-pop.tour-pop--top { border-radius: 0 0 20px 20px; box-shadow: 0 14px 40px rgba(0,0,0,.28); padding-top: 14px; }
.tour-root.is-mobile .tour-grab { display: block; }
.tour-root.is-mobile .tour-pop--top .tour-grab { display: none; }
.tour-root.is-mobile .tour-title { font-size: 1.08rem; margin-bottom: 8px; }
.tour-root.is-mobile .tour-demo { height: 108px; margin-bottom: 10px; }
.tour-root.is-mobile .tour-text { font-size: .86rem; margin-bottom: 8px; }
.tour-root.is-mobile .tour-tip { font-size: .8rem; padding: 7px 10px; margin-bottom: 10px; }
.tour-root.is-mobile .tour-nav .btn { min-height: 40px; padding: 9px 14px; }
/* Gemensam liten telefon i demonstrationerna */
.td-phone { position: absolute; border-radius: 12px; background: linear-gradient(160deg, #2b2a5c, #6a3f8e); overflow: hidden; }
.td-box { position: absolute; top: 44px; width: 52px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid #e3e6ee; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: #14161f; }
.td-box b { width: 16px; height: 16px; border-radius: 4px; background: #eef0f5; display: flex; align-items: center; justify-content: center; font-size: .58rem; }
/* Scenraden på telefon: dra i sidled */
.td-reorderh .b1 { left: calc(50% - 119px); } .td-reorderh .b2 { left: calc(50% - 57px); z-index: 2; animation: tdHB2 4.2s ease-in-out infinite; }
.td-reorderh .b3 { left: calc(50% + 5px); animation: tdHB3 4.2s ease-in-out infinite; } .td-reorderh .b4 { left: calc(50% + 67px); }
.td-reorderh .td-finger { left: calc(50% - 40px); top: 52px; animation: tdHF 4.2s ease-in-out infinite; }
@keyframes tdHB2 { 0%, 18% { transform: none; box-shadow: none; } 26% { transform: scale(1.06); box-shadow: 0 8px 18px rgba(20,22,31,.2); } 52% { transform: translateX(62px) scale(1.06); box-shadow: 0 8px 18px rgba(20,22,31,.2); } 60%, 88% { transform: translateX(62px); box-shadow: none; } 100% { transform: none; } }
@keyframes tdHB3 { 0%, 30% { transform: none; } 52%, 88% { transform: translateX(-62px); } 100% { transform: none; } }
@keyframes tdHF { 0%, 10% { opacity: 0; transform: translateY(-6px); } 16% { opacity: 1; transform: none; } 26% { transform: scale(.85); } 52% { transform: translateX(62px) scale(.85); opacity: 1; } 62% { transform: translateX(62px); opacity: 0; } 100% { opacity: 0; } }
/* Lägg till scen */
.td-addscene .b1 { left: calc(50% - 150px); } .td-addscene .b2 { left: calc(50% - 88px); }
.td-addscene .bn { left: calc(50% - 26px); transform: scale(0); animation: tdAN 4.5s ease-in-out infinite; background: #eef3ff; border-color: #3d6fe8; }
.td-addscene .b3 { left: calc(50% - 26px); animation: tdA3 4.5s ease-in-out infinite; }
.td-addscene .td-plus { position: absolute; top: 44px; left: calc(50% + 36px); width: 36px; height: 36px; border-radius: 8px; border: 1.5px dashed #3d6fe8; color: #3d6fe8; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; animation: tdAP 4.5s ease-in-out infinite; }
.td-addscene .td-finger { left: calc(50% + 45px); top: 52px; animation: tdAF 4.5s ease-in-out infinite; }
@keyframes tdAN { 0%, 28% { transform: scale(0); } 40%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes tdA3 { 0%, 28% { transform: none; } 40%, 88% { transform: translateX(62px); } 100% { transform: none; } }
@keyframes tdAP { 0%, 24% { transform: none; background: transparent; } 28% { transform: scale(.9); background: #eef3ff; } 40%, 88% { transform: translateX(62px); background: transparent; } 100% { transform: none; } }
@keyframes tdAF { 0%, 12% { opacity: 0; transform: translateY(-6px); } 18% { opacity: 1; transform: none; } 27% { transform: scale(.8); } 34% { transform: none; opacity: 1; } 42%, 100% { opacity: 0; } }
/* Lägg till innehåll */
.td-content .td-list { position: absolute; left: 22px; top: 22px; width: 96px; }
.td-content .td-item { display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 7px; margin: 0 0 7px; background: #fff; border: 1px solid #e3e6ee; border-radius: 7px; }
.td-content .td-item i { width: 12px; height: 12px; border-radius: 3px; background: #dfe6f7; } .td-content .td-item span { flex: 1; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-content .i1 { animation: tdCI 4.5s ease-in-out infinite; }
.td-content .td-phone { left: 158px; top: 14px; width: 62px; height: 104px; }
.td-content .td-new { position: absolute; left: 10px; top: 24px; width: 42px; padding: 6px; border-radius: 6px; background: rgba(255,255,255,.14); transform: scale(0); animation: tdCN 4.5s ease-in-out infinite; }
.td-content .td-new span { display: block; height: 5px; border-radius: 3px; background: #fff; margin: 0 0 4px; } .td-content .td-new span:last-child { width: 60%; margin: 0; }
.td-content .td-finger { left: 60px; top: 24px; animation: tdCF 4.5s ease-in-out infinite; }
@keyframes tdCI { 0%, 20% { border-color: #e3e6ee; } 26%, 60% { border-color: #14161f; } 66%, 100% { border-color: #e3e6ee; } }
@keyframes tdCN { 0%, 28% { transform: scale(0); } 38%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes tdCF { 0%, 10% { opacity: 0; transform: translateY(-6px); } 16% { opacity: 1; transform: none; } 24% { transform: scale(.8); } 30% { transform: none; opacity: 1; } 40%, 100% { opacity: 0; } }
/* Sök */
.td-search .td-field { position: absolute; left: 18px; right: 18px; top: 16px; height: 30px; border-radius: 8px; background: #fff; border: 1.5px solid #e3e6ee; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: .78rem; font-weight: 600; color: #14161f; animation: tdSF 5s ease-in-out infinite; }
.td-search .td-field i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #8a93a8; }
.td-search .td-field b span { opacity: 0; animation: tdSL 5s ease-in-out infinite; }
.td-search .td-field b span:nth-child(2) { animation-delay: .35s; } .td-search .td-field b span:nth-child(3) { animation-delay: .7s; } .td-search .td-field b span:nth-child(4) { animation-delay: 1.05s; }
.td-search .td-field u { width: 1.5px; height: 14px; background: #14161f; animation: tdCaret 1s steps(2) infinite; }
.td-search .td-res { position: absolute; left: 18px; right: 18px; height: 20px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #fff; border: 1px solid #e3e6ee; border-radius: 6px; }
.td-search .td-res i { width: 10px; height: 10px; border-radius: 3px; background: #dfe6f7; } .td-search .td-res span { flex: 1; height: 5px; border-radius: 3px; background: #e3e6ee; }
.td-search .r1 { top: 56px; animation: tdSR1 5s ease-in-out infinite; } .td-search .r2 { top: 82px; animation: tdSR 5s ease-in-out infinite; } .td-search .r3 { top: 108px; animation: tdSR 5s ease-in-out infinite; }
@keyframes tdSF { 0%, 8% { border-color: #e3e6ee; } 12%, 90% { border-color: #14161f; } 100% { border-color: #e3e6ee; } }
@keyframes tdSL { 0%, 14% { opacity: 0; } 18%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes tdCaret { to { opacity: 0; } }
@keyframes tdSR { 0%, 40% { opacity: 1; transform: none; } 48%, 88% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; } }
@keyframes tdSR1 { 0%, 40% { border-color: #e3e6ee; background: #fff; } 48%, 88% { border-color: #14161f; background: #f5f6fa; } 100% { border-color: #e3e6ee; } }
/* Överraskning: presentbox */
.td-reveal .td-gift { position: absolute; left: 50%; top: 40px; width: 64px; height: 70px; margin-left: -32px; animation: tdGW2 5s ease-in-out infinite; }
.td-reveal .td-body { position: absolute; left: 4px; right: 4px; top: 22px; bottom: 0; border-radius: 6px; background: #ef476f; }
.td-reveal .td-body::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; margin-left: -5px; background: #ffd166; }
.td-reveal .td-lid { position: absolute; left: 0; right: 0; top: 10px; height: 16px; border-radius: 5px; background: #d6335b; transform-origin: 10% 100%; animation: tdLid 5s ease-in-out infinite; z-index: 2; }
.td-reveal .td-lid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; margin-left: -5px; background: #ffd166; }
.td-reveal .td-heart { position: absolute; left: 50%; top: 20px; margin-left: -12px; width: 24px; text-align: center; font-size: 1.5rem; color: #ef476f; opacity: 0; animation: tdHeart 5s ease-in-out infinite; }
.td-reveal .td-finger { left: 50%; top: 66px; margin-left: 10px; animation: tdRF2 5s ease-in-out infinite; }
@keyframes tdRF2 { 0%, 10% { opacity: 0; transform: translateY(-6px); } 16% { opacity: 1; transform: none; } 22% { transform: scale(.8); } 28% { transform: none; opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes tdGW2 { 0%, 22% { transform: none; } 25% { transform: rotate(-5deg); } 28% { transform: rotate(5deg); } 31% { transform: rotate(-4deg); } 34% { transform: rotate(3deg); } 37%, 100% { transform: none; } }
@keyframes tdLid { 0%, 38% { transform: none; } 48%, 86% { transform: translateY(-22px) rotate(-14deg); } 96%, 100% { transform: none; } }
@keyframes tdHeart { 0%, 42% { opacity: 0; transform: translateY(10px) scale(.6); } 56%, 84% { opacity: 1; transform: translateY(-34px) scale(1.15); } 92%, 100% { opacity: 0; transform: translateY(-34px) scale(.6); } }
/* Inställningar: bakgrund */
.td-settings .td-phone { left: 30px; top: 12px; width: 64px; height: 108px; }
.td-settings .td-bg { position: absolute; inset: 0; background: linear-gradient(160deg, #ff9a8b, #ff6b8a); opacity: 0; animation: tdBG 4.5s ease-in-out infinite; }
.td-settings .td-lines { position: absolute; left: 10px; right: 10px; top: 34px; } .td-settings .td-lines span { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.85); margin: 0 0 6px; } .td-settings .td-lines span:last-child { width: 60%; }
.td-settings .td-swatches { position: absolute; left: 122px; top: 36px; display: flex; gap: 10px; }
.td-settings .td-swatches i { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; }
.td-settings .s1 { background: linear-gradient(160deg, #2b2a5c, #6a3f8e); } .td-settings .s2 { background: #ffb703; } .td-settings .s3 { background: linear-gradient(160deg, #ff9a8b, #ff6b8a); animation: tdSW 4.5s ease-in-out infinite; } .td-settings .s4 { background: #12a06f; }
.td-settings .td-finger { left: 196px; top: 44px; animation: tdSGF 4.5s ease-in-out infinite; }
@keyframes tdBG { 0%, 30% { opacity: 0; } 42%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tdSW { 0%, 26% { border-color: transparent; } 32%, 88% { border-color: #14161f; } 100% { border-color: transparent; } }
@keyframes tdSGF { 0%, 12% { opacity: 0; transform: translateY(-6px); } 18% { opacity: 1; transform: none; } 26% { transform: scale(.8); } 32% { transform: none; opacity: 1; } 42%, 100% { opacity: 0; } }
/* Musik */
.td-music .td-play { position: absolute; left: 34px; top: 42px; width: 48px; height: 48px; border-radius: 50%; background: #14161f; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; padding-left: 3px; animation: tdPlay 4s ease-in-out infinite; }
.td-music .td-eq { position: absolute; left: 110px; right: 24px; top: 30px; height: 72px; display: flex; align-items: flex-end; gap: 7px; }
.td-music .td-eq i { flex: 1; border-radius: 3px 3px 0 0; background: #3d6fe8; height: 20%; animation: tdEq 1.1s ease-in-out infinite; }
.td-music .td-eq i:nth-child(2) { animation-delay: .15s; background: #5b85ec; } .td-music .td-eq i:nth-child(3) { animation-delay: .3s; } .td-music .td-eq i:nth-child(4) { animation-delay: .45s; background: #5b85ec; } .td-music .td-eq i:nth-child(5) { animation-delay: .6s; } .td-music .td-eq i:nth-child(6) { animation-delay: .75s; background: #5b85ec; }
.td-music .td-finger { left: 50px; top: 56px; animation: tdMF 4s ease-in-out infinite; }
@keyframes tdEq { 0%, 100% { height: 22%; } 50% { height: 95%; } }
@keyframes tdPlay { 0%, 18% { transform: none; } 24% { transform: scale(.88); } 30%, 100% { transform: none; } }
@keyframes tdMF { 0%, 8% { opacity: 0; transform: translateY(-6px); } 14% { opacity: 1; transform: none; } 24% { transform: scale(.8); } 30% { transform: none; opacity: 1; } 40%, 100% { opacity: 0; } }
/* Förhandsvisa */
.td-preview .td-phone { left: 50%; top: 10px; width: 66px; height: 112px; margin-left: -50px; }
.td-preview .td-screens { position: absolute; inset: 0; width: 300%; display: flex; animation: tdScr 6s ease-in-out infinite; }
.td-preview .td-screen { width: 33.333%; height: 100%; position: relative; }
.td-preview .s1 { background: linear-gradient(160deg, #2b2a5c, #6a3f8e); } .td-preview .s2 { background: linear-gradient(160deg, #ffb7c5, #c9a7ff); } .td-preview .s3 { background: linear-gradient(160deg, #12a06f, #5ee0b3); }
.td-preview .td-screen b { position: absolute; left: 14px; right: 14px; top: 44px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.85); }
.td-preview .td-play-sm { position: absolute; left: 50%; top: 48px; margin-left: 30px; width: 36px; height: 36px; border-radius: 50%; background: #3d6fe8; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; padding-left: 2px; animation: tdPlay 6s ease-in-out infinite; }
.td-preview .td-finger { left: 50%; top: 58px; margin-left: 40px; animation: tdPF 6s ease-in-out infinite; }
@keyframes tdScr { 0%, 30% { transform: none; } 38%, 60% { transform: translateX(-33.333%); } 68%, 92% { transform: translateX(-66.666%); } 100% { transform: none; } }
@keyframes tdPF { 0%, 6% { opacity: 0; transform: translateY(-6px); } 10% { opacity: 1; transform: none; } 18% { transform: scale(.8); } 24% { transform: none; opacity: 1; } 32%, 100% { opacity: 0; } }
/* Två flöden: scenen delas i A och B som möts igen */
.td-flows .tf-lines { position: absolute; left: 0; top: 0; width: 340px; height: 132px; }
.td-flows .tf-lines path { stroke: #c3c9d6; stroke-width: 3; stroke-dasharray: 120; stroke-dashoffset: 120; animation: tdFL 6s ease-in-out infinite; }
.td-flows .tf-lines .tf-p1 { stroke: #3d6fe8; animation-delay: .5s; } .td-flows .tf-lines .tf-p2 { stroke: #e0466e; animation-delay: .5s; }
.td-flows .tf-lines .tf-p3 { stroke: #3d6fe8; animation-delay: 1.9s; } .td-flows .tf-lines .tf-p4 { stroke: #e0466e; animation-delay: 1.9s; }
.td-flows .tf-n { position: absolute; border-radius: 9px; opacity: 0; animation: tdFN 6s ease-in-out infinite; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.td-flows .tf-n span { display: block; width: 60%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); }
.td-flows .tf-src { left: 42px; top: 35px; width: 38px; height: 62px; background: linear-gradient(160deg, #2b2a5c, #6a3f8e); }
.td-flows .tf-a, .td-flows .tf-b { left: 150px; width: 34px; height: 46px; background: #fff; border: 2px solid var(--c); }
.td-flows .tf-a { top: 10px; --c: #3d6fe8; animation-delay: 1.1s; } .td-flows .tf-b { top: 76px; --c: #e0466e; animation-delay: 1.1s; }
.td-flows .tf-a b, .td-flows .tf-b b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; font-size: .68rem; font-weight: 800; }
.td-flows .tf-meet { left: 260px; top: 35px; width: 38px; height: 62px; background: linear-gradient(160deg, #12a06f, #5ee0b3); animation-name: tdFM; animation-delay: 2.5s; }
@keyframes tdFL { 0% { stroke-dashoffset: 120; } 14%, 80% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tdFN { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 8%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes tdFM { 0% { opacity: 0; transform: scale(.85); } 8% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(18,160,111,.25); } 16%, 64% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(18,160,111,0); } 76%, 100% { opacity: 0; } }
/* Översikt */
.td-overview { display: flex; align-items: center; justify-content: center; gap: 8px; }
.td-overview .td-mini { width: 38px; height: 62px; border-radius: 8px; background: linear-gradient(160deg, #2b2a5c, #6a3f8e); opacity: 0; animation: tdOV 5s ease-in-out infinite; }
.td-overview .m2 { background: linear-gradient(160deg, #ffb7c5, #c9a7ff); animation-delay: .5s; } .td-overview .m3 { background: linear-gradient(160deg, #ffd166, #ff9a8b); animation-delay: 1s; } .td-overview .m4 { background: linear-gradient(160deg, #12a06f, #5ee0b3); animation-delay: 1.5s; }
.td-overview i { font-style: normal; color: #b5bccb; font-size: .9rem; opacity: 0; animation: tdOV 5s ease-in-out infinite; }
.td-overview .a1 { animation-delay: .35s; } .td-overview .a2 { animation-delay: .85s; } .td-overview .a3 { animation-delay: 1.35s; }
@keyframes tdOV { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 12%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
/* Publicera */
.td-publish .td-btn { position: absolute; left: 50%; top: 26px; width: 124px; height: 36px; margin-left: -62px; border-radius: 8px; background: #14161f; display: flex; align-items: center; justify-content: center; animation: tdPB 5s ease-in-out infinite; }
.td-publish .td-btn .t { width: 60px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.9); animation: tdPT 5s ease-in-out infinite; }
.td-publish .td-btn .ok { position: absolute; color: #fff; font-weight: 800; opacity: 0; animation: tdPO 5s ease-in-out infinite; }
.td-publish .td-link { position: absolute; left: 50%; top: 78px; transform: translateX(-50%) translateY(10px); display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e3e6ee; font-size: .7rem; font-weight: 700; color: #3d6fe8; white-space: nowrap; opacity: 0; animation: tdPL 5s ease-in-out infinite; }
.td-publish .td-link i { width: 10px; height: 10px; border-radius: 50%; background: #17b26a; }
.td-publish .td-finger { left: 50%; top: 34px; margin-left: 20px; animation: tdPuF 5s ease-in-out infinite; }
@keyframes tdPB { 0%, 30% { background: #14161f; transform: none; } 24% { transform: scale(.95); } 40%, 88% { background: #17b26a; } 100% { background: #14161f; } }
@keyframes tdPT { 0%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes tdPO { 0%, 38% { opacity: 0; transform: scale(.5); } 44%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes tdPL { 0%, 48% { opacity: 0; transform: translateX(-50%) translateY(10px); } 58%, 88% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; } }
@keyframes tdPuF { 0%, 10% { opacity: 0; transform: translateY(-6px); } 16% { opacity: 1; transform: none; } 24% { transform: scale(.8); } 30% { transform: none; opacity: 1; } 40%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .td-overview *, .td-search *, .td-publish *, .td-music *, .td-preview *, .td-settings *, .td-reveal *, .td-content *, .td-addscene *, .td-reorderh * { animation: none !important; opacity: 1 !important; transform: none !important; } }
/* ---- Rundturen v4: större ruta på dator, större demonstrationer, "Så gör du"-lista ---- */
.tour-root:not(.is-mobile) .tour-pop.tour-pop--clean { padding: 22px 26px 18px; border-radius: 20px; }
.tour-root:not(.is-mobile) .tour-title { font-size: 1.45rem; margin-bottom: 12px; }
.tour-root:not(.is-mobile) .tour-demo { height: 210px; margin-bottom: 16px; }
.tour-root:not(.is-mobile) .tour-demo .td { inset: auto; left: 50%; top: 50%; width: 340px; height: 132px; transform: translate(-50%, -50%) scale(1.5); transform-origin: center; }
.tour-root:not(.is-mobile) .tour-text { font-size: 1rem; line-height: 1.55; }
.tour-root:not(.is-mobile) .tour-nav .btn { padding: 12px 20px; font-size: .95rem; }
.tour-how { margin: 0 0 14px; padding: 12px 14px; background: #f5f6fa; border-radius: 12px; }
.tour-how b { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a93a8; margin: 0 0 6px; }
.tour-how ol { margin: 0; padding: 0 0 0 20px; color: #2b3040; font-size: .9rem; line-height: 1.5; }
.tour-how li { margin: 0 0 4px; }
.tour-how li::marker { color: #14161f; font-weight: 700; }
.tour-root.is-mobile .tour-how { padding: 10px 12px; margin-bottom: 10px; }
.tour-root.is-mobile .tour-how ol { font-size: .84rem; }
.tour-root.is-mobile .tour-how li { margin-bottom: 2px; }
/* korta skärmar (små telefoner): tätare ruta så hela steget får plats utan att rulla */
@media (max-height: 720px) {
    .tour-root.is-mobile .tour-pop.tour-pop--clean { padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
    .tour-root.is-mobile .tour-pop--clean .tour-grab { margin-bottom: 6px; }
    .tour-root.is-mobile .tour-pop--clean .tour-progress { margin-bottom: 8px; }
    .tour-root.is-mobile .tour-pop--clean .tour-title { font-size: 1.02rem; margin-bottom: 4px; }
    .tour-root.is-mobile .tour-pop--clean .tour-text { font-size: .84rem; line-height: 1.42; margin-bottom: 8px; }
    .tour-root.is-mobile .tour-demo { margin-bottom: 8px; }
    .tour-root.is-mobile .tour-how { padding: 8px 10px; margin-bottom: 6px; }
    .tour-root.is-mobile .tour-how b { margin-bottom: 3px; }
    .tour-root.is-mobile .tour-how ol { font-size: .8rem; line-height: 1.4; }
    .tour-root.is-mobile .tour-pop--clean .tour-controls { padding-top: 6px; }
    .tour-root.is-mobile .tour-pop--clean .tour-nav .btn { min-height: 40px; padding: 8px 14px; }
}
/* ---- Rundturen: alla demonstrationer ritas på 340x132 och skalas per enhet (dator 1.5x, telefon ca 0.8x) ---- */
.tour-demo .td { inset: auto; left: 50%; top: 50%; width: 340px; height: 132px; transform: translate(-50%, -50%) scale(var(--td-scale, 1)); transform-origin: center; }
.tour-root:not(.is-mobile) .tour-demo { --td-scale: 1.5; }
.tour-root.is-mobile .tour-demo { --td-scale: .8; height: 108px; }
.tour-root.is-mobile .tour-demo .td { transform: translate(-50%, -50%) scale(var(--td-scale)); }
.tw-demo .td { inset: auto; left: 50%; top: 50%; width: 340px; height: 132px; transform: translate(-50%, -50%) scale(.92); transform-origin: center; }
@media (max-width: 639px) { .td-touch .td-phone { top: 12px; height: 108px; } .td-touch .td-cap { top: 24px; } .tour-demo { height: 108px; } }
@media (prefers-reduced-motion: reduce) { .tour-demo .td *, .tw-demo .td * { animation: none !important; } }
/* ---- Rundturen: nya demonstrationer (byggda av arbetsflödet) ---- */
/* demo: cards */
.td-cards .td-page, .td-cards .td-page *, .td-cards .td-page *::before, .td-cards .td-page *::after { box-sizing: border-box; }
.td-cards .td-page { position: absolute; left: 50px; top: 6px; width: 240px; height: 118px; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; box-shadow: 0 4px 12px rgba(20,22,31,.07); }
.td-cards .td-head { position: absolute; left: 12px; top: 11px; width: 56px; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-cards .td-head::after { content: ""; position: absolute; left: 0; top: 9px; width: 34px; height: 4px; border-radius: 2px; background: #eef0f5; }
.td-cards .td-plus { position: absolute; right: 10px; top: 8px; width: 16px; height: 16px; border-radius: 5px; background: #14161f; }
.td-cards .td-plus::before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 2px; background: #fff; }
.td-cards .td-plus::after { content: ""; position: absolute; left: 7px; top: 4px; width: 2px; height: 8px; background: #fff; }
.td-cards .td-col { position: absolute; top: 28px; width: 46px; animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-cards .td-c1 { left: 25px; animation-name: tdCardsC1; }
.td-cards .td-c2 { left: 97px; animation-name: tdCardsC2; }
.td-cards .td-c3 { left: 169px; animation-name: tdCardsC3; }
.td-cards .td-mini { position: relative; width: 46px; height: 58px; border-radius: 7px; overflow: hidden; box-shadow: 0 2px 6px rgba(20,22,31,.12); animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.td-cards .td-page .td-mini { border-radius: 7px !important; }
.td-cards .td-m1 { background: linear-gradient(160deg, #a78bfa, #6d3fd6); animation-name: tdCardsM1; }
.td-cards .td-m2 { background: linear-gradient(160deg, #ffa6c1, #ef476f); animation-name: tdCardsM2; }
.td-cards .td-m3 { background: linear-gradient(160deg, #5ee0a0, #17b26a); animation-name: tdCardsM3; }
.td-cards .td-mini::before { content: ""; position: absolute; left: 8px; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.35); }
.td-cards .td-mini::after { content: ""; position: absolute; left: 8px; bottom: 9px; width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); box-shadow: 0 -7px 0 0 rgba(255,255,255,.5); }
.td-cards .td-cap { display: block; width: 30px; height: 5px; margin: 11px 0 0 8px; border-radius: 3px; background: #e3e6ee; }
.td-cards .td-badge { position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; border-radius: 50%; background: #ef476f; color: #fff; font-size: .62rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(239,71,111,.4); z-index: 2; animation: tdCardsBadge 6s ease-in-out infinite; }
.td-cards .td-badge::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #ef476f; opacity: 0; animation: tdCardsRing 6s ease-in-out infinite; }
.td-cards .td-pill { position: absolute; left: 17px; top: 92px; width: 62px; height: 17px; border-radius: 999px; background: #fff; border: 1px solid #e3e6ee; box-shadow: 0 1px 3px rgba(20,22,31,.06); display: flex; align-items: center; justify-content: center; gap: 4px; animation: tdCardsPill 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-cards .td-pill::after { content: none;}
.td-cards .td-page .td-pill, .td-cards .td-page .td-pill::after { border-radius: 999px !important; }
.td-cards .td-link { position: relative; display: block; width: 15px; height: 8px; animation: tdCardsHide 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-cards .td-link::before, .td-cards .td-link::after { content: ""; position: absolute; top: 1px; width: 9px; height: 6px; border: 1.5px solid #3d6fe8; border-radius: 3px; }
.td-cards .td-link::before { left: 0; }
.td-cards .td-link::after { left: 6px; }
.td-cards .td-dash { display: block; width: 22px; height: 5px; border-radius: 3px; background: #e3e6ee; animation: tdCardsHide 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-cards .td-copied { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; color: #fff; opacity: 0; animation: tdCardsCopied 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-cards .td-finger { left: 90px; top: 99px; animation: tdCardsFinger 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdCardsC1 { 0%, 3% { opacity: 0; transform: translateY(10px); } 9% { opacity: 1; transform: translateY(-3px); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tdCardsC2 { 0%, 8% { opacity: 0; transform: translateY(10px); } 14% { opacity: 1; transform: translateY(-3px); } 17%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tdCardsC3 { 0%, 13% { opacity: 0; transform: translateY(10px); } 19% { opacity: 1; transform: translateY(-3px); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tdCardsM1 { 0%, 3% { box-shadow: 0 2px 6px rgba(20,22,31,.12); } 9% { box-shadow: 0 8px 18px rgba(20,22,31,.18); } 14%, 100% { box-shadow: 0 2px 6px rgba(20,22,31,.12); } }
@keyframes tdCardsM2 { 0%, 8% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.12); } 14% { transform: none; box-shadow: 0 8px 18px rgba(20,22,31,.18); } 19%, 46% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.12); } 50% { transform: scale(1.05); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 56%, 100% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.12); } }
@keyframes tdCardsM3 { 0%, 13% { box-shadow: 0 2px 6px rgba(20,22,31,.12); } 19% { box-shadow: 0 8px 18px rgba(20,22,31,.18); } 24%, 100% { box-shadow: 0 2px 6px rgba(20,22,31,.12); } }
@keyframes tdCardsPill { 0%, 14% { opacity: 0; transform: translateY(6px); background: #fff; border-color: #e3e6ee; box-shadow: 0 1px 3px rgba(20,22,31,.06); } 20%, 31% { opacity: 1; transform: none; background: #fff; border-color: #e3e6ee; box-shadow: 0 1px 3px rgba(20,22,31,.06); } 34% { opacity: 1; transform: scale(.94); background: #fff; border-color: #e3e6ee; box-shadow: 0 1px 3px rgba(20,22,31,.06); } 37% { opacity: 1; transform: scale(1.06); background: #17b26a; border-color: #17b26a; box-shadow: 0 6px 14px rgba(23,178,106,.35); } 41%, 84% { opacity: 1; transform: none; background: #17b26a; border-color: #17b26a; box-shadow: 0 4px 10px rgba(23,178,106,.3); } 90%, 92% { opacity: 1; transform: none; background: #fff; border-color: #e3e6ee; box-shadow: 0 1px 3px rgba(20,22,31,.06); } 100% { opacity: 0; transform: translateY(6px); background: #fff; border-color: #e3e6ee; box-shadow: 0 1px 3px rgba(20,22,31,.06); } }
@keyframes tdCardsPulse { 0%, 36% { box-shadow: 0 0 0 0 rgba(23,178,106,0); } 37% { box-shadow: 0 0 0 0 rgba(23,178,106,.55); } 52%, 100% { box-shadow: 0 0 0 10px rgba(23,178,106,0); } }
@keyframes tdCardsHide { 0%, 34% { opacity: 1; transform: none; } 38%, 85% { opacity: 0; transform: scale(.6); } 90%, 100% { opacity: 1; transform: none; } }
@keyframes tdCardsCopied { 0%, 35% { opacity: 0; transform: scale(.5); } 39% { opacity: 1; transform: scale(1.12); } 42%, 84% { opacity: 1; transform: none; } 89%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes tdCardsBadge { 0%, 46% { transform: scale(0); } 50% { transform: scale(1.3); } 53% { transform: scale(.92); } 56%, 86% { transform: scale(1); } 91%, 100% { transform: scale(0); } }
@keyframes tdCardsRing { 0%, 50% { opacity: 0; transform: scale(.8); } 52% { opacity: .8; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes tdCardsFinger { 0%, 22% { opacity: 0; transform: translate(26px, 12px); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.14); } 28%, 31% { opacity: 1; transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.14); } 34% { opacity: 1; transform: scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 7px rgba(20,22,31,.14); } 37% { opacity: 1; transform: scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.14); } 43%, 100% { opacity: 0; transform: translateY(-8px); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.14); } }
/* demo: confetti */
.td-confetti .td-phone { left: 50%; top: 10px; width: 68px; height: 112px; margin-left: -34px; box-shadow: 0 6px 12px rgba(20,22,31,.16); animation: tdConfettiPhone 5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-confetti .td-lines { position: absolute; left: 11px; right: 11px; top: 22px; animation: tdConfettiShake 5s ease-in-out infinite; }
.td-confetti .td-lines span { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.85); margin: 0 0 7px; }
.td-confetti .td-lines span:nth-child(1) { width: 60%; height: 7px; }
.td-confetti .td-lines span:nth-child(3) { width: 80%; }
.td-confetti .td-lines span:nth-child(4) { width: 45%; opacity: .6; margin: 0; }
.td-confetti .td-ring { position: absolute; left: 50%; bottom: 10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: tdConfettiRing 5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-confetti .td-btn { position: absolute; left: 50%; bottom: 10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.28); animation: tdConfettiBtn 5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-confetti .td-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: linear-gradient(135deg, #3d6fe8, #ef476f); }
.td-confetti .td-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: tdConfettiFlash 5s linear infinite; }
.td-confetti .td-finger { left: 161px; top: 92px; animation: tdConfettiFinger 5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-confetti .td-cf { position: absolute; left: 168px; top: 97px; width: 4px; height: 8px; opacity: 0; animation: tdConfettiFly 5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-confetti .td-cf::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 8px; border-radius: 1px; transform: scale(.5); animation: tdConfettiDrift 5s cubic-bezier(.22,.6,.35,1) infinite; animation-delay: inherit; }
.td-confetti .td-cf.c1::before { background: #3d6fe8; }
.td-confetti .td-cf.c2::before { background: #ffd166; }
.td-confetti .td-cf.c3::before { background: #ef476f; }
.td-confetti .td-cf.c4::before { background: #17b26a; }
.td-confetti .td-cf.c5::before { background: #fff; box-shadow: 0 0 0 1px rgba(20,22,31,.14); }
@keyframes tdConfettiPhone { 0%, 16% { transform: none; } 18% { transform: scale(1.02); } 23%, 100% { transform: none; } }
@keyframes tdConfettiShake { 0%, 16% { transform: none; } 18% { transform: translateX(-2.5px); } 20% { transform: translateX(2.5px); } 21% { transform: translateX(-1.5px); } 23% { transform: translateX(1px); } 24%, 100% { transform: none; } }
@keyframes tdConfettiRing { 0%, 15% { opacity: 0; transform: scale(.6); } 17% { opacity: .9; transform: scale(.9); } 30%, 100% { opacity: 0; transform: scale(3); } }
@keyframes tdConfettiBtn { 0%, 14% { transform: none; box-shadow: 0 4px 10px rgba(0,0,0,.28); } 16%, 19% { transform: scale(.84); box-shadow: 0 1px 3px rgba(0,0,0,.28); } 22% { transform: scale(1.1); box-shadow: 0 6px 14px rgba(0,0,0,.3); } 26%, 100% { transform: none; box-shadow: 0 4px 10px rgba(0,0,0,.28); } }
@keyframes tdConfettiFlash { 0%, 16% { opacity: 0; } 18% { opacity: .6; } 20%, 100% { opacity: 0; } }
@keyframes tdConfettiFinger { 0%, 6% { opacity: 0; transform: translate(26px, -18px); } 13% { opacity: 1; transform: none; } 16%, 19% { opacity: 1; transform: scale(.8); } 22% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: translate(12px, -12px); } }
@keyframes tdConfettiFly {
  0%, 16% { opacity: 0; transform: translateY(0); animation-timing-function: cubic-bezier(.2,.7,.35,1); }
  18% { opacity: 1; }
  27% { transform: translateY(var(--dy)); animation-timing-function: cubic-bezier(.45,0,.6,1); }
  45%, 66% { opacity: 1; transform: translateY(calc(var(--dy) * .1 + 30px)); animation-timing-function: ease-in-out; }
  74%, 100% { opacity: 0; transform: translateY(calc(var(--dy) * .1 + 30px)); }
}
@keyframes tdConfettiDrift {
  0%, 16% { transform: translateX(0) rotate(0deg) scale(.5); animation-timing-function: cubic-bezier(.22,.6,.35,1); }
  45%, 100% { transform: translateX(var(--dx)) rotate(var(--r)) scale(1); }
}
/* demo: countdown */
.td-countdown .td-note { position: absolute; left: 86px; top: 50px; width: 30px; }
.td-countdown .td-line { display: block; height: 5px; border-radius: 3px; background: #e3e6ee; margin: 0 0 6px; }
.td-countdown .td-line:nth-child(2) { width: 70%; }
.td-countdown .td-line:nth-child(3) { width: 85%; margin: 0; }
.td-countdown .td-phone { left: 128px; top: 8px; width: 84px; height: 114px; box-shadow: 0 8px 18px rgba(20,22,31,.18), 0 0 0 0 rgba(255,209,102,0); animation: tdCountdownPhone 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdCountdownPhone { 0%, 53% { box-shadow: 0 8px 18px rgba(20,22,31,.18), 0 0 0 0 rgba(255,209,102,0); } 58% { box-shadow: 0 8px 18px rgba(20,22,31,.18), 0 0 0 4px rgba(255,209,102,.6); } 86% { box-shadow: 0 8px 18px rgba(20,22,31,.18), 0 0 0 4px rgba(255,209,102,.35); } 94%, 100% { box-shadow: 0 8px 18px rgba(20,22,31,.18), 0 0 0 0 rgba(255,209,102,0); } }
.td-countdown .td-stack { position: absolute; left: 23px; top: 14px; width: 38px; height: 44px; perspective: 260px; }
.td-countdown .td-card { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(180deg, #fff 50%, #f4f6fb 50%); border: 1px solid #e3e6ee; box-shadow: 0 8px 18px rgba(20,22,31,.18); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; line-height: 1; color: #14161f; transform-origin: 50% 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-countdown .td-card::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: rgba(20,22,31,.1); }
.td-countdown .td-c3 { z-index: 3; transform: translateY(0) scale(1) rotateX(0deg); animation-name: tdCountdownC3; }
.td-countdown .td-c2 { z-index: 2; transform: translateY(3px) scale(.94) rotateX(0deg); animation-name: tdCountdownC2; }
.td-countdown .td-c1 { z-index: 1; transform: translateY(6px) scale(.88) rotateX(0deg); animation-name: tdCountdownC1; }
@keyframes tdCountdownC3 { 0%, 12% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; } 15% { transform: translateY(0) scale(1.06) rotateX(0deg); } 18%, 23% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; animation-timing-function: ease-in-out; } 26% { opacity: 1; } 28%, 91% { transform: translateY(0) scale(1) rotateX(-100deg); opacity: 0; } 100% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; } }
@keyframes tdCountdownC2 { 0%, 23% { transform: translateY(3px) scale(.94) rotateX(0deg); opacity: 1; } 29% { transform: translateY(0) scale(1.06) rotateX(0deg); } 32%, 36% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; animation-timing-function: ease-in-out; } 39% { opacity: 1; } 41%, 91% { transform: translateY(0) scale(1) rotateX(-100deg); opacity: 0; } 100% { transform: translateY(3px) scale(.94) rotateX(0deg); opacity: 1; } }
@keyframes tdCountdownC1 { 0%, 23% { transform: translateY(6px) scale(.88) rotateX(0deg); opacity: 1; } 29%, 36% { transform: translateY(3px) scale(.94) rotateX(0deg); opacity: 1; } 42% { transform: translateY(0) scale(1.06) rotateX(0deg); } 45%, 49% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; animation-timing-function: ease-in-out; } 52% { opacity: 1; } 54%, 91% { transform: translateY(0) scale(1) rotateX(-100deg); opacity: 0; } 100% { transform: translateY(6px) scale(.88) rotateX(0deg); opacity: 1; } }
.td-countdown .td-now { position: absolute; left: 0; right: 0; top: 27px; height: 18px; line-height: 18px; text-align: center; font-size: .8rem; font-weight: 700; color: #ffd166; text-shadow: 0 0 10px rgba(255,209,102,.6), 0 1px 2px rgba(20,22,31,.35); opacity: 0; transform: scale(.6); animation: tdCountdownNow 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdCountdownNow { 0%, 52% { opacity: 0; transform: scale(.6); } 57% { opacity: 1; transform: scale(1.25); } 61%, 86% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(.6); } }
.td-countdown .td-bar { position: absolute; left: 16px; right: 16px; top: 70px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.td-countdown .td-fill { position: absolute; inset: 0; border-radius: 999px; background: #ffd166; transform-origin: 0 50%; animation: tdCountdownBar 6s ease-in-out infinite; }
@keyframes tdCountdownBar { 0%, 12% { transform: scaleX(1); } 25% { transform: scaleX(.667); } 38% { transform: scaleX(.333); } 51%, 90% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.td-countdown .td-go { position: absolute; left: 14px; right: 14px; top: 84px; height: 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); color: #fff; font-size: .62rem; font-weight: 700; line-height: 1; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; animation: tdCountdownGo 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdCountdownGo { 0%, 10% { background: rgba(255,255,255,0); color: #fff; transform: none; } 12% { background: #fff; color: #14161f; transform: scale(.94); } 15%, 90% { background: #fff; color: #14161f; transform: none; } 98%, 100% { background: rgba(255,255,255,0); color: #fff; transform: none; } }
.td-countdown .td-ring { position: absolute; left: 134px; top: 8px; width: 72px; height: 72px; box-sizing: border-box; border: 2px solid #ffd166; border-radius: 50%; opacity: 0; transform: scale(.45); z-index: 5; pointer-events: none; animation: tdCountdownRing 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-countdown .td-ring2 { animation-name: tdCountdownRing2; }
@keyframes tdCountdownRing { 0%, 53% { transform: scale(.45); opacity: 0; } 55% { opacity: .9; } 69%, 100% { transform: scale(1); opacity: 0; } }
@keyframes tdCountdownRing2 { 0%, 57% { transform: scale(.45); opacity: 0; } 59% { opacity: .55; } 73%, 100% { transform: scale(1); opacity: 0; } }
.td-countdown .td-star { position: absolute; width: 12px; height: 12px; background: #ffd166; -webkit-clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scale(0); z-index: 6; pointer-events: none; animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-countdown .td-s1 { left: 136px; top: 18px; animation-name: tdCountdownS1; }
.td-countdown .td-s2 { left: 192px; top: 50px; animation-name: tdCountdownS2; }
@keyframes tdCountdownS1 { 0%, 54% { transform: scale(0) rotate(0deg); } 60% { transform: scale(1.15) rotate(25deg); } 65% { transform: scale(1) rotate(35deg); } 76% { transform: scale(.8) rotate(45deg); } 86% { transform: scale(1) rotate(55deg); } 93%, 100% { transform: scale(0) rotate(80deg); } }
@keyframes tdCountdownS2 { 0%, 57% { transform: scale(0) rotate(0deg); } 63% { transform: scale(1.1) rotate(-20deg); } 68% { transform: scale(.9) rotate(-30deg); } 78% { transform: scale(.75) rotate(-40deg); } 86% { transform: scale(.9) rotate(-50deg); } 93%, 100% { transform: scale(0) rotate(-70deg); } }
.td-countdown .td-dots { position: absolute; left: 226px; top: 44px; display: flex; flex-direction: column; gap: 8px; }
.td-countdown .td-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #e3e6ee; animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-countdown .td-d1 { animation-name: tdCountdownD1; }
.td-countdown .td-d2 { animation-name: tdCountdownD2; }
.td-countdown .td-d3 { animation-name: tdCountdownD3; }
@keyframes tdCountdownD1 { 0%, 12% { background: #e3e6ee; transform: none; } 15% { background: #3d6fe8; transform: scale(1.35); } 18%, 52% { background: #3d6fe8; transform: none; } 56%, 90% { background: #17b26a; transform: none; } 100% { background: #e3e6ee; transform: none; } }
@keyframes tdCountdownD2 { 0%, 25% { background: #e3e6ee; transform: none; } 28% { background: #3d6fe8; transform: scale(1.35); } 31%, 52% { background: #3d6fe8; transform: none; } 56%, 90% { background: #17b26a; transform: none; } 100% { background: #e3e6ee; transform: none; } }
@keyframes tdCountdownD3 { 0%, 38% { background: #e3e6ee; transform: none; } 41% { background: #3d6fe8; transform: scale(1.35); } 44%, 52% { background: #3d6fe8; transform: none; } 56%, 90% { background: #17b26a; transform: none; } 100% { background: #e3e6ee; transform: none; } }
.td-countdown .td-finger { left: 161px; top: 92px; z-index: 7; animation: tdCountdownFinger 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdCountdownFinger { 0%, 3% { opacity: 0; transform: translateY(12px); } 9% { opacity: 1; transform: none; } 12% { opacity: 1; transform: scale(.8); } 15% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; transform: translateY(10px); } }
/* demo: home */
.td-home .td-site { position: absolute; left: 10px; top: 7px; width: 320px; height: 114px; box-sizing: border-box; z-index: 0; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; box-shadow: 0 3px 8px rgba(20,22,31,.08); opacity: 0; transform: scale(.97); animation: tdHomeSite 7s ease-in-out infinite; }
.td-home .td-top { position: absolute; left: 0; right: 0; top: 0; height: 30px; border-radius: 9px 9px 0 0; background: #14161f; }
.td-home .td-logo { position: absolute; left: 12px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #ffd166; }
.td-home .td-brand { position: absolute; left: 26px; top: 12px; width: 44px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.9); }
.td-home .td-nav { position: absolute; right: 10px; top: 8px; width: 40px; height: 14px; box-sizing: border-box; border-radius: 4px; border: 1px solid rgba(255,255,255,.45); }
.td-home .td-nav::before { content: ""; position: absolute; left: 9px; right: 9px; top: 4px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); }
.td-home .td-tiles { position: absolute; left: 14px; right: 14px; top: 40px; height: 62px; display: flex; gap: 10px; }
.td-home .td-tile { flex: 1; position: relative; box-sizing: border-box; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 14px rgba(20,22,31,.08); opacity: 0; transform: translateY(8px) scale(.96); }
.td-home .td-t1 { animation: tdHomeTile1 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-home .td-t2 { animation: tdHomeTile2 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-home .td-t3 { animation: tdHomeTile3 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-home .td-tile i { display: block; height: 36px; }
.td-home .td-t1 i { background: linear-gradient(135deg, #2b2a5c, #6a3f8e); }
.td-home .td-t2 i { background: linear-gradient(135deg, #ef476f, #ffd166); }
.td-home .td-t3 i { background: linear-gradient(135deg, #3d6fe8, #ead9a8); }
.td-home .td-tile span { display: block; height: 5px; margin: 6px 8px 0; border-radius: 3px; background: #e3e6ee; }
.td-home .td-tile span + span { width: 45%; margin-top: 4px; }
.td-home .td-toast { position: absolute; left: 50%; top: 6px; z-index: 1; height: 18px; padding: 0 9px 0 7px; display: flex; align-items: center; gap: 5px; box-sizing: border-box; border-radius: 5px; background: #fff; border: 1px solid #e3e6ee; box-shadow: 0 8px 18px rgba(20,22,31,.18); font-size: .62rem; font-weight: 700; line-height: 1; color: #14161f; white-space: nowrap; opacity: 0; transform: translate(-50%, -6px); animation: tdHomeToast 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-home .td-toast i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #17b26a; }
.td-home .td-studio { position: absolute; left: 10px; top: 7px; width: 320px; height: 114px; box-sizing: border-box; z-index: 1; background: #fafbfd; border: 1px solid #e3e6ee; border-radius: 10px; box-shadow: 0 3px 8px rgba(20,22,31,.08); transform-origin: 50% 50%; animation: tdHomeStudio 7s ease-in-out infinite; }
.td-home .td-bar { position: absolute; left: 0; right: 0; top: 0; height: 28px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #e3e6ee; border-radius: 9px 9px 0 0; }
.td-home .td-house { position: absolute; left: 8px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(238,243,255,0); animation: tdHomeHouse 7s ease-in-out infinite; }
.td-home .td-house::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border-radius: 2px; background: #14161f; transform: rotate(45deg); }
.td-home .td-house::after { content: ""; position: absolute; left: 5px; top: 11px; width: 10px; height: 7px; border-radius: 0 0 2px 2px; background: linear-gradient(#fff, #fff) 50% 100% / 3px 4px no-repeat #14161f; }
.td-home .td-p1 { position: absolute; left: 38px; top: 11px; width: 44px; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-home .td-p2 { position: absolute; left: 90px; top: 11px; width: 26px; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-home .td-unsaved { position: absolute; right: 60px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background-color: #ffd166; animation: tdHomeDot 7s ease-in-out infinite; }
.td-home .td-p3 { position: absolute; right: 8px; top: 7px; width: 42px; height: 14px; border-radius: 4px; background: #14161f; }
.td-home .td-p3::before { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); }
.td-home .td-phone { left: 16px; top: 38px; width: 46px; height: 66px; box-shadow: 0 4px 10px rgba(43,42,92,.18); }
.td-home .td-phone span { position: absolute; left: 8px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); }
.td-home .td-phone .td-s1 { top: 9px; width: 22px; }
.td-home .td-phone .td-s2 { top: 18px; width: 30px; height: 4px; background: rgba(255,255,255,.4); }
.td-home .td-phone .td-s3 { top: 25px; width: 18px; height: 4px; background: rgba(255,255,255,.4); }
.td-home .td-phone b { position: absolute; left: 12px; top: 36px; width: 22px; height: 22px; border-radius: 5px; background: #ffd166; overflow: hidden; }
.td-home .td-phone b::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 4px; background: #ef476f; }
.td-home .td-phone b::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; background: #ef476f; }
.td-home .td-pnl { position: absolute; left: 76px; right: 12px; top: 38px; height: 66px; box-sizing: border-box; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; }
.td-home .td-r { position: absolute; left: 12px; right: 12px; height: 12px; }
.td-home .td-r1 { top: 10px; }
.td-home .td-r2 { top: 26px; }
.td-home .td-r3 { top: 42px; }
.td-home .td-r::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 3px; background: #eef0f5; }
.td-home .td-r1::before { background: #3d6fe8; }
.td-home .td-r::after { content: ""; position: absolute; left: 20px; right: 0; top: 3px; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-home .td-r2::after { right: 35%; }
.td-home .td-r3::after { right: 55%; }
.td-home .td-dim { position: absolute; inset: -1px; z-index: 2; border-radius: 10px; background: rgba(20,22,31,.26); opacity: 0; animation: tdHomeDim 7s ease-in-out infinite; }
.td-home .td-dialog { position: absolute; left: 94px; top: 32px; width: 152px; height: 64px; box-sizing: border-box; z-index: 3; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; box-shadow: 0 8px 18px rgba(20,22,31,.18); opacity: 0; transform: translateY(12px) scale(.94); animation: tdHomeDlg 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-home .td-title { position: absolute; left: 12px; top: 10px; width: 64px; height: 6px; border-radius: 3px; background: #14161f; }
.td-home .td-sub { position: absolute; left: 12px; top: 21px; width: 100px; height: 5px; border-radius: 3px; background: #e3e6ee; }
.td-home .td-btns { position: absolute; left: 12px; right: 12px; bottom: 9px; height: 18px; display: flex; gap: 6px; }
.td-home .td-save, .td-home .td-leave { position: relative; flex: 1; height: 18px; box-sizing: border-box; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; line-height: 1; }
.td-home .td-save { background-color: #14161f; color: #fff; animation: tdHomeSave 7s ease-in-out infinite; }
.td-home .td-leave { background: #fff; color: #14161f; border: 1px solid #e3e6ee; }
.td-home .td-save em { font-style: normal; animation: tdHomeLbl 7s ease-in-out infinite; }
.td-home .td-save i { position: absolute; left: 50%; top: 50%; width: 6px; height: 10px; margin: -6px 0 0 -3px; box-sizing: border-box; border-right: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: rotate(45deg) scale(.4); animation: tdHomeChk 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-home .td-finger { left: 20px; top: 13px; z-index: 5; box-sizing: border-box; animation: tdHomeFinger 7s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdHomeFinger {
  0%, 6% { opacity: 0; transform: translate(16px, 22px) scale(1); }
  11%, 13% { opacity: 1; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; transform: translate(0, 0) scale(.8); }
  18% { opacity: 1; transform: translate(0, 0) scale(1); }
  21% { opacity: 0; transform: translate(0, 0) scale(1); }
  22% { opacity: 0; transform: translate(108px, 75px) scale(1); }
  28%, 31% { opacity: 1; transform: translate(108px, 55px) scale(1); }
  33% { opacity: 1; transform: translate(108px, 55px) scale(.8); }
  36% { opacity: 1; transform: translate(108px, 55px) scale(1); }
  40%, 100% { opacity: 0; transform: translate(108px, 55px) scale(1); }
}
@keyframes tdHomeHouse {
  0%, 13% { background-color: rgba(238,243,255,0); box-shadow: 0 0 0 0 rgba(61,111,232,0); }
  15%, 21% { background-color: #eef3ff; box-shadow: 0 0 0 4px rgba(61,111,232,.18); }
  27%, 100% { background-color: rgba(238,243,255,0); box-shadow: 0 0 0 0 rgba(61,111,232,0); }
}
@keyframes tdHomeDim {
  0%, 17% { opacity: 0; }
  24%, 44% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes tdHomeDlg {
  0%, 17% { opacity: 0; transform: translateY(12px) scale(.94); }
  24%, 44% { opacity: 1; transform: translateY(0) scale(1); }
  50%, 100% { opacity: 0; transform: translateY(-6px) scale(.96); }
}
@keyframes tdHomeSave {
  0%, 31% { background-color: #14161f; transform: scale(1); }
  33% { background-color: #14161f; transform: scale(.94); }
  37%, 100% { background-color: #17b26a; transform: scale(1); }
}
@keyframes tdHomeLbl {
  0%, 33% { opacity: 1; }
  35%, 100% { opacity: 0; }
}
@keyframes tdHomeChk {
  0%, 34% { opacity: 0; transform: rotate(45deg) scale(.4); }
  38% { opacity: 1; transform: rotate(45deg) scale(1.2); }
  41%, 100% { opacity: 1; transform: rotate(45deg) scale(1); }
}
@keyframes tdHomeDot {
  0%, 35% { background-color: #ffd166; }
  39%, 84% { background-color: #17b26a; }
  90%, 100% { background-color: #ffd166; }
}
@keyframes tdHomeStudio {
  0%, 44% { opacity: 1; transform: scale(1); }
  52%, 90% { opacity: 0; transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tdHomeSite {
  0%, 46% { opacity: 0; transform: scale(.97); }
  54%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.97); }
}
@keyframes tdHomeTile1 {
  0%, 48% { opacity: 0; transform: translateY(8px) scale(.96); }
  57%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tdHomeTile2 {
  0%, 50% { opacity: 0; transform: translateY(8px) scale(.96); }
  59%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tdHomeTile3 {
  0%, 52% { opacity: 0; transform: translateY(8px) scale(.96); }
  61%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tdHomeToast {
  0%, 58% { opacity: 0; transform: translate(-50%, -6px); }
  64%, 84% { opacity: 1; transform: translate(-50%, 0); }
  89%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
/* demo: image */
.td-image .td-sheet { position: absolute; left: 18px; top: 14px; width: 118px; height: 104px; box-sizing: border-box; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; box-shadow: 0 2px 8px rgba(20,22,31,.05); }
.td-image .td-head { position: absolute; left: 12px; top: 9px; width: 42px; height: 6px; border-radius: 3px; background: #14161f; opacity: .85; }
.td-image .td-drop { position: absolute; left: 12px; top: 22px; width: 94px; height: 54px; box-sizing: border-box; border: 1.5px dashed #c5cce0; border-radius: 8px; background: #f8f9fc; animation: tdImageDrop 7s ease-in-out infinite; }
.td-image .td-cloud { position: absolute; left: 50%; top: 16px; width: 30px; height: 11px; margin-left: -15px; background: radial-gradient(circle at 5.5px 5.5px, #3d6fe8 5px, rgba(61,111,232,0) 5.6px) 0 0 / 11px 11px no-repeat, radial-gradient(circle at 5.5px 5.5px, #3d6fe8 5px, rgba(61,111,232,0) 5.6px) 100% 0 / 11px 11px no-repeat, linear-gradient(#3d6fe8, #3d6fe8) 5px 0 / 20px 100% no-repeat; animation: tdImageCloud 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-image .td-cloud::after { content: ""; position: absolute; left: 14px; top: -4px; width: 2px; height: 11px; background: #fff; }
.td-image .td-c1, .td-image .td-c2 { position: absolute; border-radius: 50%; background: #3d6fe8; }
.td-image .td-c1 { left: 4px; top: -6px; width: 12px; height: 12px; }
.td-image .td-c2 { left: 11px; top: -9px; width: 16px; height: 16px; }
.td-image .td-arrow { position: absolute; left: 11px; top: -5px; width: 8px; height: 8px; box-sizing: border-box; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); }
.td-image .td-bar { position: absolute; left: 50%; top: 35px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #e3e6ee; overflow: hidden; }
.td-image .td-bar i { position: absolute; inset: 0; background: #3d6fe8; transform-origin: 0 50%; transform: scaleX(0); animation: tdImageBar 7s ease-in-out infinite; }
.td-image .td-cap { position: absolute; left: 50%; top: 44px; width: 30px; height: 4px; margin-left: -15px; border-radius: 2px; background: #e3e6ee; }
.td-image .td-line { position: absolute; left: 12px; height: 5px; border-radius: 3px; background: #e3e6ee; }
.td-image .td-l1 { top: 83px; width: 94px; }
.td-image .td-l2 { top: 92px; width: 60px; }
.td-image .td-phone { left: 232px; top: 12px; width: 66px; height: 108px; box-shadow: 0 6px 16px rgba(43,42,92,.25); }
.td-image .td-pl { position: absolute; left: 11px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); }
.td-image .td-p1 { top: 12px; width: 36px; }
.td-image .td-p2 { top: 21px; width: 24px; background: rgba(255,255,255,.45); }
.td-image .td-p3 { top: 74px; width: 44px; background: rgba(255,255,255,.32); }
.td-image .td-p4 { top: 83px; width: 30px; background: rgba(255,255,255,.32); }
.td-image .td-slot { position: absolute; left: 11px; top: 30px; width: 44px; height: 34px; box-sizing: border-box; border: 1.5px dashed rgba(255,255,255,.5); border-radius: 6px; animation: tdImageSlot 7s ease-in-out infinite; }
.td-image .td-slot::before, .td-image .td-slot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: rgba(255,255,255,.6); }
.td-image .td-slot::after { transform: rotate(90deg); }
.td-image .td-fly { position: absolute; left: 55px; top: 46px; width: 44px; height: 34px; transform-origin: 0 -4px; animation: tdImageFly 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-image .td-photo { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #5aa9ff 0%, #a9d4ff 55%, #dcefff 100%); opacity: 0; animation: tdImagePhoto 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-image .td-sun { position: absolute; right: 7px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,.35); }
.td-image .td-hill { position: absolute; left: -10px; bottom: -18px; width: 62px; height: 32px; border-radius: 50%; background: #17b26a; }
.td-image .td-hill2 { position: absolute; right: -16px; bottom: -14px; width: 46px; height: 26px; border-radius: 50%; background: #4cd08f; }
.td-image .td-crop { position: absolute; left: 243px; top: 42px; width: 44px; height: 34px; box-sizing: border-box; border: 1.5px solid #3d6fe8; border-radius: 2px; opacity: 0; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 33% 0 / 1px 100% no-repeat, linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 66% 0 / 1px 100% no-repeat, linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 0 33% / 100% 1px no-repeat, linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 0 66% / 100% 1px no-repeat; animation: tdImageCrop 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-image .td-crop i { position: absolute; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 1.5px solid #3d6fe8; box-shadow: 0 1px 3px rgba(20,22,31,.25); }
.td-image .td-h1 { left: -4px; top: -4px; }
.td-image .td-h2 { right: -4px; top: -4px; }
.td-image .td-h3 { left: -4px; bottom: -4px; }
.td-image .td-h4 { right: -4px; bottom: -4px; animation: tdImageHandle 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-image .td-ok { position: absolute; left: 284px; top: 32px; width: 16px; height: 16px; border-radius: 50%; background: #17b26a; box-shadow: 0 3px 8px rgba(23,178,106,.35), 0 0 0 2px #fff; transform: scale(0); animation: tdImageOk 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-image .td-ok::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; box-sizing: border-box; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.td-image .td-finger { left: 68px; top: 54px; animation: tdImageFinger 7s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdImageDrop { 0%, 8% { border-color: #c5cce0; background: #f8f9fc; box-shadow: 0 0 0 0 rgba(61,111,232,0); } 11%, 22% { border-color: #3d6fe8; background: #eef3ff; box-shadow: 0 0 0 4px rgba(61,111,232,.14); } 27%, 100% { border-color: #c5cce0; background: #f8f9fc; box-shadow: 0 0 0 0 rgba(61,111,232,0); } }
@keyframes tdImageCloud { 0%, 8% { transform: translateY(0) scale(1); } 11% { transform: translateY(2px) scale(.92); } 15% { transform: translateY(-5px) scale(1.04); } 19%, 100% { transform: translateY(0) scale(1); } }
@keyframes tdImageBar { 0%, 11% { transform: scaleX(0); opacity: 1; } 20%, 25% { transform: scaleX(1); opacity: 1; } 29%, 99% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes tdImageSlot { 0%, 38% { opacity: 1; } 42%, 93% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tdImageFly { 0%, 26% { transform: translateX(0) scale(1); animation-timing-function: ease-in; } 33% { transform: translateX(94px) scale(1); animation-timing-function: ease-out; } 40%, 51% { transform: translateX(188px) scale(1); } 60%, 100% { transform: translateX(188px) scale(1.16); } }
@keyframes tdImagePhoto { 0%, 19% { opacity: 0; transform: translateY(0) rotate(0deg) scale(.4); box-shadow: 0 0 0 rgba(20,22,31,0); } 23% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1.08); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 26% { opacity: 1; transform: translateY(0) rotate(-6deg) scale(1); box-shadow: 0 8px 18px rgba(20,22,31,.18); animation-timing-function: ease-out; } 33% { opacity: 1; transform: translateY(-30px) rotate(8deg) scale(1.06); box-shadow: 0 18px 26px rgba(20,22,31,.22); animation-timing-function: ease-in; } 40% { opacity: 1; transform: translateY(-4px) rotate(0deg) scale(.96); box-shadow: 0 2px 6px rgba(20,22,31,.14); } 43%, 92% { opacity: 1; transform: translateY(-4px) rotate(0deg) scale(1); box-shadow: 0 0 0 rgba(20,22,31,0); } 98%, 100% { opacity: 0; transform: translateY(-4px) rotate(0deg) scale(1); box-shadow: 0 0 0 rgba(20,22,31,0); } }
@keyframes tdImageCrop { 0%, 41% { opacity: 0; width: 44px; height: 34px; } 45%, 51% { opacity: 1; width: 44px; height: 34px; } 60%, 63% { opacity: 1; width: 51.04px; height: 39.44px; } 67%, 100% { opacity: 0; width: 51.04px; height: 39.44px; } }
@keyframes tdImageHandle { 0%, 46% { transform: scale(1); } 49% { transform: scale(1.5); } 51%, 60% { transform: scale(1.3); } 63%, 100% { transform: scale(1); } }
@keyframes tdImageOk { 0%, 64% { transform: scale(0); } 68% { transform: scale(1.15); } 71%, 91% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes tdImageFinger { 0%, 3% { opacity: 0; transform: translate(0, -6px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } 8% { opacity: 1; transform: translate(0, 0) scale(1); } 11% { opacity: 1; transform: translate(0, 0) scale(.8); } 14% { opacity: 1; transform: translate(0, 0) scale(1); } 18% { opacity: 0; transform: translate(0, 0) scale(1); } 43% { opacity: 0; transform: translate(209.5px, 6.5px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } 47% { opacity: 1; transform: translate(209.5px, 12.5px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } 49%, 51% { opacity: 1; transform: translate(209.5px, 12.5px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 60% { opacity: 1; transform: translate(216.5px, 18px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 63% { opacity: 1; transform: translate(216.5px, 18px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } 67%, 100% { opacity: 0; transform: translate(216.5px, 18px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } }
/* demo: name */
.td-name .td-label { position: absolute; left: 52px; top: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #14161f; opacity: .55; line-height: 1; }
.td-name .td-field { position: absolute; left: 52px; top: 22px; width: 236px; height: 32px; box-sizing: border-box; background: #fff; border: 1px solid #e3e6ee; border-radius: 9px; box-shadow: 0 1px 2px rgba(20,22,31,.04); animation: tdNameField 6s ease-in-out infinite; }
.td-name .td-ph { position: absolute; left: 12px; top: 12px; width: 72px; height: 6px; border-radius: 999px; background: #e3e6ee; animation: tdNamePh 6s ease-in-out infinite; }
.td-name .td-typed { position: absolute; left: 12px; top: 0; height: 30px; line-height: 30px; white-space: nowrap; font-size: .72rem; font-weight: 700; color: #14161f; }
.td-name .td-g { display: inline-block; vertical-align: top; height: 30px; line-height: 30px; max-width: 0; overflow: hidden; opacity: 0; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.td-name .td-g1 { animation-name: tdNameG1; } .td-name .td-g2 { animation-name: tdNameG2; } .td-name .td-g3 { animation-name: tdNameG3; } .td-name .td-g4 { animation-name: tdNameG4; } .td-name .td-g5 { animation-name: tdNameG5; } .td-name .td-g6 { animation-name: tdNameG6; } .td-name .td-g7 { animation-name: tdNameG7; }
.td-name .td-cur { display: inline-block; vertical-align: top; width: 1.5px; height: 14px; margin: 8px 0 0 1px; background: #14161f; opacity: 0; animation: tdNameCur 6s step-end infinite; }
.td-name .td-ok { position: absolute; right: 8px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: #17b26a; box-shadow: 0 3px 8px rgba(23,178,106,.35); transform: scale(0); opacity: 0; animation: tdNameOk 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-name .td-ok::after { content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.td-name .td-ring { position: absolute; left: 168px; top: 29px; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid #3d6fe8; border-radius: 50%; opacity: 0; transform: scale(.4); animation: tdNameRing 6s ease-out infinite; }
.td-name .td-finger { left: 168px; top: 29px; animation: tdNameF 6s ease-in-out infinite; }
.td-name .td-mini { position: absolute; left: 52px; top: 68px; width: 236px; height: 46px; border-radius: 10px; background: linear-gradient(160deg, #2b2a5c, #6a3f8e); box-shadow: 0 4px 10px rgba(43,42,92,.18); overflow: hidden; animation: tdNameMini 6s ease-in-out infinite; }
.td-name .td-art { position: absolute; left: 10px; top: 9px; width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #ffd166, #ef476f); }
.td-name .td-art::after { content: ""; position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; }
.td-name .td-title { position: absolute; left: 48px; top: 12px; height: 6px; display: flex; gap: 4px; }
.td-name .td-tph { position: absolute; left: 0; top: 0; width: 70px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); animation: tdNameTph 6s ease-in-out infinite; }
.td-name .td-d { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.92); transform-origin: left center; transform: scaleX(0); opacity: 0; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.td-name .td-d1 { width: 26px; animation-name: tdNameD1; } .td-name .td-d2 { width: 16px; animation-name: tdNameD2; } .td-name .td-d3 { width: 34px; animation-name: tdNameD3; }
.td-name .td-sub { position: absolute; left: 48px; top: 27px; display: flex; gap: 4px; }
.td-name .td-sub span { display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,.28); width: 64px; } .td-name .td-sub span:last-child { width: 22px; }
.td-name .td-dot { position: absolute; right: 12px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); animation: tdNameDot 6s ease-in-out infinite; }
@keyframes tdNameField { 0%, 11% { border-color: #e3e6ee; box-shadow: 0 1px 2px rgba(20,22,31,.04); } 13%, 57% { border-color: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.16); } 60%, 88% { border-color: #17b26a; box-shadow: 0 0 0 3px rgba(23,178,106,.2); } 93%, 100% { border-color: #e3e6ee; box-shadow: 0 1px 2px rgba(20,22,31,.04); } }
@keyframes tdNamePh { 0%, 18% { opacity: 1; } 21%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes tdNameF { 0%, 4% { opacity: 0; transform: translate(26px, 22px); } 9% { opacity: 1; transform: none; } 11% { transform: scale(.8); } 13% { transform: none; opacity: 1; } 18%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes tdNameRing { 0%, 11% { opacity: 0; transform: scale(.4); } 12% { opacity: .55; transform: scale(.6); } 18%, 100% { opacity: 0; transform: scale(2); } }
@keyframes tdNameCur { 0% { opacity: 0; } 13% { opacity: 1; } 17% { opacity: 0; } 21% { opacity: 1; } 61% { opacity: 0; } 65% { opacity: 1; } 69% { opacity: 0; } 73% { opacity: 1; } 77% { opacity: 0; } 81% { opacity: 1; } 85% { opacity: 0; } 88% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
@keyframes tdNameG1 { 0%, 21% { opacity: 0; max-width: 0; transform: translateY(3px); } 22% { opacity: 0; max-width: 60px; transform: translateY(3px); } 24% { opacity: 1; max-width: 60px; transform: none; } 93% { opacity: 1; max-width: 60px; transform: none; } 94% { opacity: 0; max-width: 0; transform: none; } 100% { opacity: 0; max-width: 0; } }
@keyframes tdNameG2 { 0%, 26% { opacity: 0; max-width: 0; transform: translateY(3px); } 27% { opacity: 0; max-width: 60px; transform: translateY(3px); } 29% { opacity: 1; max-width: 60px; transform: none; } 92% { opacity: 1; max-width: 60px; transform: none; } 93% { opacity: 0; max-width: 0; transform: none; } 100% { opacity: 0; max-width: 0; } }
@keyframes tdNameG3 { 0%, 31% { opacity: 0; max-width: 0; transform: translateY(3px); } 32% { opacity: 0; max-width: 60px; transform: translateY(3px); } 34% { opacity: 1; max-width: 60px; transform: none; } 91% { opacity: 1; max-width: 60px; transform: none; } 92% { opacity: 0; max-width: 0; transform: none; } 100% { opacity: 0; max-width: 0; } }
@keyframes tdNameG4 { 0%, 36% { opacity: 0; max-width: 0; transform: translateY(3px); } 37% { opacity: 0; max-width: 60px; transform: translateY(3px); } 39% { opacity: 1; max-width: 60px; transform: none; } 90% { opacity: 1; max-width: 60px; transform: none; } 91% { opacity: 0; max-width: 0; transform: none; } 100% { opacity: 0; max-width: 0; } }
@keyframes tdNameG5 { 0%, 41% { opacity: 0; max-width: 0; transform: translateY(3px); } 42% { opacity: 0; max-width: 60px; transform: translateY(3px); } 44% { opacity: 1; max-width: 60px; transform: none; } 89% { opacity: 1; max-width: 60px; transform: none; } 90% { opacity: 0; max-width: 0; transform: none; } 100% { opacity: 0; max-width: 0; } }
@keyframes tdNameG6 { 0%, 46% { opacity: 0; max-width: 0; transform: translateY(3px); } 47% { opacity: 0; max-width: 60px; transform: translateY(3px); } 49% { opacity: 1; max-width: 60px; transform: none; } 88% { opacity: 1; max-width: 60px; transform: none; } 89% { opacity: 0; max-width: 0; transform: none; } 100% { opacity: 0; max-width: 0; } }
@keyframes tdNameG7 { 0%, 51% { opacity: 0; max-width: 0; transform: translateY(3px); } 52% { opacity: 0; max-width: 60px; transform: translateY(3px); } 54% { opacity: 1; max-width: 60px; transform: none; } 87% { opacity: 1; max-width: 60px; transform: none; } 88% { opacity: 0; max-width: 0; transform: none; } 100% { opacity: 0; max-width: 0; } }
@keyframes tdNameOk { 0%, 56% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 63%, 88% { transform: none; opacity: 1; } 91%, 100% { transform: scale(0); opacity: 0; } }
@keyframes tdNameMini { 0%, 56% { transform: none; box-shadow: 0 4px 10px rgba(43,42,92,.18); } 60% { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 66%, 100% { transform: none; box-shadow: 0 4px 10px rgba(43,42,92,.18); } }
@keyframes tdNameTph { 0%, 20% { opacity: 1; } 24%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes tdNameD1 { 0%, 21% { transform: scaleX(0); opacity: 0; } 23% { opacity: 1; } 34%, 89% { transform: none; opacity: 1; } 92%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes tdNameD2 { 0%, 36% { transform: scaleX(0); opacity: 0; } 38% { opacity: 1; } 44%, 89% { transform: none; opacity: 1; } 92%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes tdNameD3 { 0%, 46% { transform: scaleX(0); opacity: 0; } 48% { opacity: 1; } 54%, 89% { transform: none; opacity: 1; } 92%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes tdNameDot { 0%, 57% { background: rgba(255,255,255,.3); transform: none; box-shadow: none; } 61% { background: #17b26a; transform: scale(1.3); box-shadow: 0 0 0 3px rgba(23,178,106,.32); } 66%, 88% { background: #17b26a; transform: none; box-shadow: 0 0 0 3px rgba(23,178,106,.22); } 92%, 100% { background: rgba(255,255,255,.3); transform: none; box-shadow: none; } }
/* demo: panel */
.td-panel .td-phone { left: 22px; top: 12px; width: 70px; height: 108px; }
.td-panel .td-block { position: absolute; left: 10px; top: 30px; width: 40px; padding: 5px; border-radius: 6px; border: 1.5px solid transparent; animation: tdPanelBlock 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-block::before, .td-panel .td-block::after { content: ""; position: absolute; width: 5px; height: 5px; background: #3d6fe8; border: 1px solid #fff; border-radius: 1px; opacity: 0; transform: scale(0); animation: tdPanelHandle 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-block::before { left: -4px; top: -4px; }
.td-panel .td-block::after { right: -4px; bottom: -4px; }
.td-panel .td-block span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); margin: 0 0 4px; animation: tdPanelLine 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-block span:last-child { width: 60%; margin: 0; animation: tdPanelLine2 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-lines { position: absolute; left: 10px; right: 10px; top: 74px; }
.td-panel .td-lines span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 0 0 7px; }
.td-panel .td-lines span:last-child { width: 68%; margin: 0; }
.td-panel .td-tap { position: absolute; left: 49px; top: 46px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; opacity: 0; transform: scale(.6); pointer-events: none; animation: tdPanelTap 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-pnl { position: absolute; left: 116px; top: 14px; width: 200px; height: 106px; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; box-shadow: 0 8px 18px rgba(20,22,31,.18); opacity: 0; transform: translateX(12px) scale(.97); animation: tdPanelIn 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-row { position: absolute; left: 12px; right: 12px; opacity: 0; transform: translateY(6px); }
.td-panel .td-r1 { top: 14px; height: 16px; display: flex; align-items: center; gap: 8px; animation: tdPanelR1 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-r2 { top: 50px; height: 16px; animation: tdPanelR2 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-r3 { top: 80px; height: 20px; animation: tdPanelR3 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-lbl { display: block; width: 28px; height: 5px; border-radius: 3px; background: #e3e6ee; }
.td-panel .td-sw { display: block; width: 16px; height: 16px; border-radius: 4px; flex: none; }
.td-panel .td-sw-k { background: #14161f; }
.td-panel .td-sw-b { background: #3d6fe8; }
.td-panel .td-sw-r { background: #ef476f; animation: tdPanelSw 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-sw-g { background: #ffd166; }
.td-panel .td-ripple { position: absolute; left: 96px; top: 14px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #ef476f; opacity: 0; transform: scale(.6); pointer-events: none; animation: tdPanelRipple 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-a1, .td-panel .td-a2 { position: absolute; top: 0; height: 16px; line-height: 16px; font-style: normal; font-weight: 700; color: #14161f; opacity: .55; }
.td-panel .td-a1 { left: 0; font-size: .62rem; }
.td-panel .td-a2 { right: 0; font-size: .8rem; }
.td-panel .td-track { position: absolute; left: 18px; right: 18px; top: 6px; height: 4px; border-radius: 999px; background: #e3e6ee; }
.td-panel .td-fill { position: absolute; left: 0; top: 0; height: 100%; width: 30%; border-radius: 999px; background: #3d6fe8; animation: tdPanelFill 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-knob { position: absolute; left: calc(30% - 7px); top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #3d6fe8; box-sizing: border-box; box-shadow: 0 2px 6px rgba(20,22,31,.18); animation: tdPanelKnob 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-panel .td-field { position: absolute; left: 0; right: 0; top: 0; height: 20px; border: 1px solid #e3e6ee; border-radius: 6px; background: #fff; box-sizing: border-box; }
.td-panel .td-field span { position: absolute; left: 8px; top: 6px; width: 54px; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-panel .td-field::after { content: ""; position: absolute; right: 9px; top: 4px; width: 6px; height: 6px; border-right: 1.5px solid rgba(20,22,31,.45); border-bottom: 1.5px solid rgba(20,22,31,.45); transform: rotate(45deg); }
.td-panel .td-finger { left: 49px; top: 46px; animation: tdPanelF 7s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdPanelF { 0%, 6% { opacity: 0; transform: translate(0, -6px); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 10% { opacity: 1; transform: none; } 12% { transform: scale(.8); } 16% { transform: none; } 18% { transform: none; } 28% { transform: translate(162px, -19px); } 30% { transform: translate(162px, -19px) scale(.8); } 34% { transform: translate(162px, -19px); } 36% { transform: translate(162px, -19px); } 46% { transform: translate(130px, 17px); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 48% { transform: translate(130px, 17px) scale(.85); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 62% { opacity: 1; transform: translate(193px, 17px) scale(.85); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 64% { transform: translate(193px, 17px); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 68%, 100% { opacity: 0; transform: translate(193px, 17px); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } }
@keyframes tdPanelTap { 0%, 11% { opacity: 0; transform: scale(.6); } 13% { opacity: .8; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes tdPanelBlock { 0%, 12% { border-color: transparent; box-shadow: 0 0 0 0 rgba(61,111,232,0); } 15%, 90% { border-color: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.28); } 96%, 100% { border-color: transparent; box-shadow: 0 0 0 0 rgba(61,111,232,0); } }
@keyframes tdPanelHandle { 0%, 12% { opacity: 0; transform: scale(0); } 17% { opacity: 1; transform: scale(1.25); } 20%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0); } }
@keyframes tdPanelLine { 0%, 32% { background: rgba(255,255,255,.85); height: 5px; margin-bottom: 4px; } 38%, 48% { background: #ef476f; height: 5px; margin-bottom: 4px; } 62%, 90% { background: #ef476f; height: 8px; margin-bottom: 5px; } 96%, 100% { background: rgba(255,255,255,.85); height: 5px; margin-bottom: 4px; } }
@keyframes tdPanelLine2 { 0%, 32% { background: rgba(255,255,255,.85); height: 5px; width: 60%; } 38%, 48% { background: #ef476f; height: 5px; width: 60%; } 62%, 90% { background: #ef476f; height: 8px; width: 80%; } 96%, 100% { background: rgba(255,255,255,.85); height: 5px; width: 60%; } }
@keyframes tdPanelIn { 0%, 13% { opacity: 0; transform: translateX(12px) scale(.97); } 22%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateX(12px) scale(.97); } }
@keyframes tdPanelR1 { 0%, 15% { opacity: 0; transform: translateY(6px); } 22%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes tdPanelR2 { 0%, 17% { opacity: 0; transform: translateY(6px); } 24%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes tdPanelR3 { 0%, 19% { opacity: 0; transform: translateY(6px); } 26%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes tdPanelSw { 0%, 30% { transform: none; box-shadow: 0 0 0 0 #fff, 0 0 0 0 #14161f; } 33% { transform: scale(1.22); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14161f; } 37%, 92% { transform: scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14161f; } 98%, 100% { transform: none; box-shadow: 0 0 0 0 #fff, 0 0 0 0 #14161f; } }
@keyframes tdPanelRipple { 0%, 31% { opacity: 0; transform: scale(.6); } 33% { opacity: .75; transform: scale(1); } 43%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes tdPanelFill { 0%, 48% { width: 30%; } 62%, 90% { width: 75%; } 96%, 100% { width: 30%; } }
@keyframes tdPanelKnob { 0%, 46% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.18); } 48% { transform: scale(1.18); box-shadow: 0 8px 18px rgba(20,22,31,.22); } 62% { transform: translateX(63px) scale(1.18); box-shadow: 0 8px 18px rgba(20,22,31,.22); } 64%, 90% { transform: translateX(63px); box-shadow: 0 2px 6px rgba(20,22,31,.18); } 96%, 100% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.18); } }
/* demo: print */
.td-print .td-l { position: absolute; height: 5px; border-radius: 3px; background: #e3e6ee; }
.td-print .td-card { position: absolute; left: 92px; top: 32px; width: 46px; height: 64px; perspective: 240px; z-index: 2; }
.td-print .td-inside { position: absolute; inset: 0; background: #fff; border: 1px solid #e3e6ee; border-radius: 8px; box-shadow: 0 2px 6px rgba(20,22,31,.08); animation: tdPrintLift 7s ease-in-out infinite; }
.td-print .td-l1 { left: 9px; top: 6px; width: 26px; }
.td-print .td-l2 { left: 9px; top: 14px; width: 20px; }
.td-print .td-l3 { left: 9px; top: 22px; width: 14px; }
.td-print .td-qr { position: absolute; left: 9px; top: 30px; width: 27px; height: 27px; background: linear-gradient(#14161f,#14161f) 12px 0/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 15px 3px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 12px 6px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 0 12px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 6px 12px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 12px 12px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 18px 12px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 24px 12px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 12px 15px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 21px 15px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 15px 18px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 24px 18px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 12px 21px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 18px 21px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 15px 24px/3px 3px no-repeat, linear-gradient(#14161f,#14161f) 24px 24px/3px 3px no-repeat; }
.td-print .td-f { position: absolute; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid #14161f; background: linear-gradient(#14161f,#14161f) center/3px 3px no-repeat #fff; }
.td-print .td-f1 { left: 0; top: 0; }
.td-print .td-f2 { right: 0; top: 0; }
.td-print .td-f3 { left: 0; bottom: 0; }
.td-print .td-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(-150deg); animation: tdPrintOpen 7s ease-in-out infinite; z-index: 3; }
.td-print .td-face { position: absolute; inset: 0; background: #fff; border: 1px solid #e3e6ee; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 6px rgba(20,22,31,.10); }
.td-print .td-back { transform: rotateY(180deg); }
.td-print .td-b1 { left: 9px; top: 12px; width: 22px; }
.td-print .td-b2 { left: 9px; top: 20px; width: 15px; }
.td-print .td-art { position: absolute; left: 10px; top: 11px; width: 24px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, #7b4fd6, #ef476f 60%, #ffd166); box-shadow: 0 3px 8px rgba(123,79,214,.28); }
.td-print .td-t1 { left: 12px; top: 44px; width: 20px; background: #14161f; opacity: .85; }
.td-print .td-cone { position: absolute; left: 130px; top: 56px; width: 106px; height: 38px; background: linear-gradient(90deg, rgba(61,111,232,.20), rgba(61,111,232,.05)); clip-path: polygon(0 0, 100% 2%, 100% 18%, 0 100%); opacity: 0; z-index: 3; animation: tdPrintCone 7s ease-in-out infinite; }
.td-print .td-scan { position: absolute; left: 97px; top: 58px; width: 36px; height: 36px; opacity: 0; z-index: 4; background: linear-gradient(#3d6fe8,#3d6fe8) 0 0/9px 2px no-repeat, linear-gradient(#3d6fe8,#3d6fe8) 0 0/2px 9px no-repeat, linear-gradient(#3d6fe8,#3d6fe8) 100% 0/9px 2px no-repeat, linear-gradient(#3d6fe8,#3d6fe8) 100% 0/2px 9px no-repeat, linear-gradient(#3d6fe8,#3d6fe8) 0 100%/9px 2px no-repeat, linear-gradient(#3d6fe8,#3d6fe8) 0 100%/2px 9px no-repeat, linear-gradient(#3d6fe8,#3d6fe8) 100% 100%/9px 2px no-repeat, linear-gradient(#3d6fe8,#3d6fe8) 100% 100%/2px 9px no-repeat; animation: tdPrintScan 7s ease-in-out infinite; }
.td-print .td-beam { position: absolute; left: 100px; top: 63px; width: 31px; height: 2px; border-radius: 1px; background: #3d6fe8; box-shadow: 0 0 6px 1px rgba(61,111,232,.7); opacity: 0; z-index: 5; animation: tdPrintBeam 7s ease-in-out infinite; }
.td-print .td-ok { position: absolute; left: 125px; top: 55px; width: 14px; height: 14px; border-radius: 50%; background: #17b26a; box-shadow: 0 3px 8px rgba(23,178,106,.45); transform: scale(1); z-index: 6; animation: tdPrintOk 7s ease-in-out infinite; }
.td-print .td-ok::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid #17b26a; opacity: 0; animation: tdPrintRing 7s ease-out infinite; }
.td-print .td-ok::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 6px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }
.td-print .td-phone { left: 236px; top: 18px; width: 58px; height: 88px; box-shadow: 0 8px 18px rgba(20,22,31,.18); opacity: 1; z-index: 6; animation: tdPrintPhone 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-print .td-phone::before { content: ""; position: absolute; left: 50%; top: 2.5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.45); }
.td-print .td-screen { position: absolute; left: 4px; right: 4px; top: 8px; bottom: 6px; border-radius: 8px; background: rgba(8,8,26,.38); overflow: hidden; }
.td-print .td-view { position: absolute; left: 10px; top: 18px; width: 30px; height: 30px; opacity: 0; background: linear-gradient(#fff,#fff) 0 0/8px 2px no-repeat, linear-gradient(#fff,#fff) 0 0/2px 8px no-repeat, linear-gradient(#fff,#fff) 100% 0/8px 2px no-repeat, linear-gradient(#fff,#fff) 100% 0/2px 8px no-repeat, linear-gradient(#fff,#fff) 0 100%/8px 2px no-repeat, linear-gradient(#fff,#fff) 0 100%/2px 8px no-repeat, linear-gradient(#fff,#fff) 100% 100%/8px 2px no-repeat, linear-gradient(#fff,#fff) 100% 100%/2px 8px no-repeat; animation: tdPrintView 7s ease-in-out infinite; }
.td-print .td-shut { position: absolute; left: 20px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 0 2px rgba(255,255,255,.35); opacity: 0; animation: tdPrintShut 7s ease-in-out infinite; }
.td-print .td-res { position: absolute; left: 8px; top: 13px; width: 34px; height: 46px; border-radius: 8px; background: linear-gradient(160deg, #7b4fd6, #ef5fa0); box-shadow: 0 8px 18px rgba(20,22,31,.28); opacity: 1; transform: scale(1) translateY(0); animation: tdPrintRes 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-print .td-tick { position: absolute; left: 9px; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: scale(1); animation: tdPrintTick 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-print .td-tick::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border-right: 2px solid #17b26a; border-bottom: 2px solid #17b26a; transform: rotate(45deg); }
.td-print .td-res .td-l { background: rgba(255,255,255,.85); }
.td-print .td-r1 { left: 7px; top: 28px; width: 20px; }
.td-print .td-r2 { left: 10px; top: 36px; width: 14px; }
.td-print .td-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: tdPrintFlash 7s ease-in-out infinite; }
.td-print .td-finger { left: 124px; top: 54px; z-index: 9; animation: tdPrintFinger 7s ease-in-out infinite; }
@keyframes tdPrintOpen { 0%, 13% { transform: rotateY(0deg); } 27%, 92% { transform: rotateY(-150deg); } 100% { transform: rotateY(0deg); } }
@keyframes tdPrintLift { 0%, 10% { box-shadow: 0 2px 6px rgba(20,22,31,.08); } 14%, 27% { box-shadow: 0 8px 18px rgba(20,22,31,.18); } 36%, 100% { box-shadow: 0 2px 6px rgba(20,22,31,.08); } }
@keyframes tdPrintFinger { 0%, 6% { opacity: 0; transform: translate(0, -8px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 10% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 13% { opacity: 1; transform: translate(0, 0) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 27% { opacity: 1; transform: translate(-82px, 0) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 31% { opacity: 0; transform: translate(-82px, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 100% { opacity: 0; transform: translate(-82px, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } }
@keyframes tdPrintPhone { 0%, 29% { opacity: 0; transform: translateY(16px) scale(.92); } 35%, 94% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(16px) scale(.92); } }
@keyframes tdPrintView { 0%, 29% { opacity: 0; transform: scale(1.25); } 35%, 38% { opacity: 1; transform: scale(1); } 43% { transform: scale(.94); } 48% { transform: scale(1); } 53% { transform: scale(.94); } 58% { opacity: 1; transform: scale(1); } 61%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes tdPrintShut { 0%, 29% { opacity: 0; } 35%, 58% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes tdPrintCone { 0%, 33% { opacity: 0; } 37%, 58% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes tdPrintScan { 0%, 32% { opacity: 0; transform: scale(1.3); } 37%, 58% { opacity: 1; transform: scale(1); } 61%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes tdPrintBeam { 0%, 37% { opacity: 0; transform: translateY(0); } 38% { opacity: 1; transform: translateY(0); } 47% { opacity: 1; transform: translateY(25px); } 48% { opacity: 0; transform: translateY(25px); } 49% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(0); } 58% { opacity: 1; transform: translateY(25px); } 59%, 100% { opacity: 0; transform: translateY(25px); } }
@keyframes tdPrintFlash { 0%, 57% { opacity: 0; } 59% { opacity: .75; } 63%, 100% { opacity: 0; } }
@keyframes tdPrintRes { 0%, 59% { opacity: 0; transform: scale(0) translateY(10px); } 65% { opacity: 1; transform: scale(1.06) translateY(0); } 69%, 94% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(.9) translateY(6px); } }
@keyframes tdPrintTick { 0%, 65% { transform: scale(0); } 71% { transform: scale(1.15); } 75%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes tdPrintRing { 0%, 62% { opacity: 0; transform: scale(.6); } 64% { opacity: .7; transform: scale(.8); } 77%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes tdPrintOk { 0%, 58% { transform: scale(0); } 63% { transform: scale(1.2); } 67%, 92% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
/* demo: quiz */
.td-quiz .td-bar { position: absolute; left: 16px; right: 16px; top: 8px; height: 3px; border-radius: 2px; background: #e3e6ee; overflow: hidden; }
.td-quiz .td-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #17b26a, #3d6fe8); animation: tdQuizBar 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-quiz .td-q { position: absolute; left: 16px; right: 16px; top: 17px; height: 29px; box-sizing: border-box; padding: 6px 9px; background: #fff; border: 1px solid #e3e6ee; border-radius: 9px; box-shadow: 0 2px 6px rgba(20,22,31,.05); }
.td-quiz .td-q b { display: block; width: 22px; height: 4px; border-radius: 2px; background: #3d6fe8; margin: 0 0 5px; }
.td-quiz .td-q span { display: block; width: 62%; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-quiz .td-pill { position: absolute; right: 10px; top: 13px; height: 18px; box-sizing: border-box; padding: 0 9px; border-radius: 999px; background: #17b26a; color: #fff; font-size: .62rem; font-weight: 700; line-height: 18px; white-space: nowrap; box-shadow: 0 8px 18px rgba(20,22,31,.18); transform: scale(0); transform-origin: 50% 50%; z-index: 4; animation: tdQuizPill 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-quiz .td-pill.td-pill { border-radius: 999px !important; }
.td-quiz .td-row { position: absolute; left: 16px; right: 16px; height: 20px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #fff; border: 1px solid #e3e6ee; border-radius: 8px; transform-origin: 50% 50%; animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-quiz .td-r1 { top: 52px; animation-name: tdQuizDim; }
.td-quiz .td-r2 { top: 77px; z-index: 2; animation-name: tdQuizPick; }
.td-quiz .td-r3 { top: 102px; animation-name: tdQuizDim; }
.td-quiz .td-row i { flex: none; position: relative; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #c9cfdd; background: #fff; }
.td-quiz .td-row span { flex: none; height: 6px; border-radius: 3px; background: #e3e6ee; }
.td-quiz .td-r1 span { width: 54%; }
.td-quiz .td-r2 span { width: 68%; animation: tdQuizLine 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-quiz .td-r3 span { width: 42%; }
.td-quiz .td-r2 i { animation: tdQuizRadio 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-quiz .td-r2 i::after { content: ""; position: absolute; left: 2.5px; top: 0; width: 4px; height: 6.5px; box-sizing: border-box; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transform-origin: 50% 50%; animation: tdQuizCheck 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-quiz .td-spark { position: absolute; left: 167px; top: 84px; width: 5px; height: 5px; border-radius: 50%; opacity: 0; z-index: 3; animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-quiz .td-s1 { background: #ffd166; animation-name: tdQuizS1; }
.td-quiz .td-s2 { background: #3d6fe8; animation-name: tdQuizS2; }
.td-quiz .td-s3 { background: #ef476f; animation-name: tdQuizS3; }
.td-quiz .td-s4 { background: #17b26a; animation-name: tdQuizS4; }
.td-quiz .td-finger { left: 161px; top: 78px; z-index: 5; animation: tdQuizFinger 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdQuizBar { 0%, 34% { width: 0; opacity: 1; } 52%, 84% { width: 100%; opacity: 1; } 92% { width: 100%; opacity: 0; } 93%, 100% { width: 0; opacity: 0; } }
@keyframes tdQuizPick { 0%, 18% { background: #fff; border-color: #e3e6ee; transform: scale(1); box-shadow: 0 0 0 rgba(20,22,31,0); } 20%, 24% { background: #fff; border-color: #3d6fe8; transform: scale(.97); box-shadow: 0 0 0 rgba(20,22,31,0); } 30% { background: #17b26a; border-color: #17b26a; transform: scale(1.03); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 36%, 84% { background: #17b26a; border-color: #17b26a; transform: scale(1); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 94%, 100% { background: #fff; border-color: #e3e6ee; transform: scale(1); box-shadow: 0 0 0 rgba(20,22,31,0); } }
@keyframes tdQuizDim { 0%, 24% { opacity: 1; } 34%, 84% { opacity: .4; } 94%, 100% { opacity: 1; } }
@keyframes tdQuizRadio { 0%, 18% { border-color: #c9cfdd; background: #fff; } 20%, 24% { border-color: #3d6fe8; background: #fff; } 30%, 84% { border-color: #fff; background: rgba(255,255,255,.2); } 94%, 100% { border-color: #c9cfdd; background: #fff; } }
@keyframes tdQuizCheck { 0%, 28% { transform: rotate(45deg) scale(0); } 35% { transform: rotate(45deg) scale(1.2); } 40%, 84% { transform: rotate(45deg) scale(1); } 90%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes tdQuizLine { 0%, 24% { background: #e3e6ee; } 30%, 84% { background: rgba(255,255,255,.6); } 94%, 100% { background: #e3e6ee; } }
@keyframes tdQuizPill { 0%, 32% { transform: scale(0) rotate(-8deg); } 39% { transform: scale(1.1) rotate(2deg); } 44%, 84% { transform: scale(1) rotate(0deg); } 90%, 100% { transform: scale(0) rotate(-8deg); } }
@keyframes tdQuizS1 { 0%, 30% { opacity: 0; transform: translate(0, 0) scale(1); } 34% { opacity: 1; transform: translate(-10px, -8px) scale(1); } 50%, 100% { opacity: 0; transform: translate(-34px, -26px) scale(.4); } }
@keyframes tdQuizS2 { 0%, 30% { opacity: 0; transform: translate(0, 0) scale(1); } 34% { opacity: 1; transform: translate(9px, -9px) scale(1); } 50%, 100% { opacity: 0; transform: translate(30px, -30px) scale(.4); } }
@keyframes tdQuizS3 { 0%, 30% { opacity: 0; transform: translate(0, 0) scale(1); } 34% { opacity: 1; transform: translate(-8px, 7px) scale(1); } 50%, 100% { opacity: 0; transform: translate(-26px, 22px) scale(.4); } }
@keyframes tdQuizS4 { 0%, 30% { opacity: 0; transform: translate(0, 0) scale(1); } 34% { opacity: 1; transform: translate(11px, 6px) scale(1); } 50%, 100% { opacity: 0; transform: translate(36px, 18px) scale(.4); } }
@keyframes tdQuizFinger { 0%, 6% { opacity: 0; transform: translate(44px, 26px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } 14%, 18% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } 20%, 24% { opacity: 1; transform: translate(0, 0) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 28% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } 36%, 100% { opacity: 0; transform: translate(14px, 12px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,.12); } }
/* demo: rsvp */
.td-rsvp .td-card { position: absolute; left: 14px; top: 7px; width: 312px; height: 118px; box-sizing: border-box; background: #fff; border: 1px solid #e3e6ee; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 10px rgba(20,22,31,.08); }
.td-rsvp .td-tag { position: absolute; left: 12px; top: 9px; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3d6fe8; line-height: 1; }
.td-rsvp .td-q { position: absolute; left: 12px; height: 5px; border-radius: 3px; background: #e3e6ee; }
.td-rsvp .td-q1 { top: 24px; width: 150px; }
.td-rsvp .td-q2 { top: 33px; width: 96px; }
.td-rsvp .td-count { position: absolute; right: 10px; top: 7px; height: 18px; padding: 0 8px 0 6px; box-sizing: border-box; display: flex; align-items: center; gap: 4px; border-radius: 999px; background: #f2f4f9; color: #14161f; font-size: .62rem; font-weight: 700; line-height: 1; animation: tdRsvpCount 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-ppl { position: relative; display: block; flex: none; width: 11px; height: 12px; }
.td-rsvp .td-ppl::before { content: ""; position: absolute; left: 2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.td-rsvp .td-ppl::after { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 10px; border-radius: 50%; background: currentColor; clip-path: inset(0 0 50% 0); }
.td-rsvp .td-num { position: relative; flex: none; width: 14px; height: 12px; overflow: hidden; }
.td-rsvp .td-roll { position: absolute; left: 0; top: 0; width: 100%; animation: tdRsvpRoll 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-roll b { display: block; height: 12px; line-height: 12px; text-align: center; font-weight: 700; }
.td-rsvp .td-plus { position: absolute; right: 58px; top: 10px; font-size: .62rem; font-weight: 800; color: #17b26a; line-height: 1; opacity: 0; animation: tdRsvpPlus 6.5s ease-in-out infinite; }
.td-rsvp .td-pill { position: absolute; top: 44px; width: 58px; height: 20px; box-sizing: border-box; border: 1px solid #e3e6ee; border-radius: 999px; background: #fff; color: #14161f; font-size: .62rem; font-weight: 700; line-height: 18px; text-align: center; white-space: nowrap; }
.td-rsvp .td-yes { left: 12px; z-index: 2; animation: tdRsvpYes 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-maybe { left: 78px; animation: tdRsvpDim 6.5s ease-in-out infinite; }
.td-rsvp .td-no { left: 144px; animation: tdRsvpDim 6.5s ease-in-out infinite; }
.td-rsvp .td-yes::after { content: ""; position: absolute; right: 13px; top: 4px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); opacity: 0; animation: tdRsvpCheck 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-ring { position: absolute; left: 12px; top: 44px; width: 58px; height: 20px; box-sizing: border-box; border-radius: 999px; opacity: 0; box-shadow: 0 0 0 0 rgba(23,178,106,.5); z-index: 1; animation: tdRsvpRing 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-card .td-pill, .td-rsvp .td-card .td-count, .td-rsvp .td-card .td-ring { border-radius: 999px !important; }
.td-rsvp .td-div { position: absolute; left: 12px; right: 12px; top: 68px; height: 1px; background: #eef0f5; }
.td-rsvp .td-book { position: absolute; left: 12px; right: 12px; top: 70px; height: 46px; overflow: hidden; }
.td-rsvp .td-row { position: absolute; left: 0; right: 0; height: 18px; display: flex; align-items: center; gap: 7px; opacity: 0; transform: translateY(46px); }
.td-rsvp .td-row1 { top: 3px; animation: tdRsvpRow1 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-row2 { top: 26px; animation: tdRsvpRow2 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-avatar { display: block; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: .62rem; font-weight: 800; font-style: normal; line-height: 18px; text-align: center; box-shadow: 0 2px 5px rgba(20,22,31,.16); }
.td-rsvp .td-row1 .td-avatar { background: #3d6fe8; }
.td-rsvp .td-row2 .td-avatar { background: #ef476f; }
.td-rsvp .td-row span { display: block; flex: none; height: 5px; border-radius: 3px; background: #e3e6ee; transform-origin: 0 50%; transform: scaleX(0); }
.td-rsvp .td-row1 span { animation: tdRsvpBar1 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-row2 span { animation: tdRsvpBar2 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
.td-rsvp .td-row1 .td-l1 { width: 104px; }
.td-rsvp .td-row1 .td-l2 { width: 44px; animation-delay: .1s; }
.td-rsvp .td-row2 .td-l1 { width: 68px; }
.td-rsvp .td-row2 .td-l2 { width: 96px; animation-delay: .1s; }
.td-rsvp .td-typing { position: absolute; left: 25px; top: 26px; height: 18px; display: flex; align-items: center; gap: 3px; opacity: 0; transform: translateY(6px); animation: tdRsvpTyping 6.5s ease-in-out infinite; }
.td-rsvp .td-typing i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #c3c9d8; animation: tdRsvpDot 6.5s ease-in-out infinite; }
.td-rsvp .td-typing i:nth-child(2) { animation-delay: .12s; }
.td-rsvp .td-typing i:nth-child(3) { animation-delay: .24s; }
.td-rsvp .td-finger { left: 45px; top: 51px; z-index: 5; animation: tdRsvpFinger 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdRsvpFinger { 0%, 8% { opacity: 0; transform: translate(34px, 42px); } 17% { opacity: 1; transform: none; } 19%, 22% { opacity: 1; transform: scale(.8); } 25% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes tdRsvpYes { 0%, 18% { transform: none; padding-right: 0; background: #fff; color: #14161f; border-color: #e3e6ee; box-shadow: 0 0 0 rgba(23,178,106,0); } 20% { transform: scale(.92); padding-right: 0; background: #fff; color: #14161f; border-color: #e3e6ee; box-shadow: 0 0 0 rgba(23,178,106,0); } 23% { transform: scale(1.08); padding-right: 6px; background: #17b26a; color: #fff; border-color: #17b26a; box-shadow: 0 8px 18px rgba(23,178,106,.38); } 27%, 88% { transform: none; padding-right: 12px; background: #17b26a; color: #fff; border-color: #17b26a; box-shadow: 0 4px 10px rgba(23,178,106,.26); } 100% { transform: none; padding-right: 0; background: #fff; color: #14161f; border-color: #e3e6ee; box-shadow: 0 0 0 rgba(23,178,106,0); } }
@keyframes tdRsvpCheck { 0%, 22% { transform: rotate(45deg) scale(0); opacity: 0; } 28%, 88% { transform: rotate(45deg) scale(1); opacity: 1; } 94%, 100% { transform: rotate(45deg) scale(0); opacity: 0; } }
@keyframes tdRsvpRing { 0%, 20% { opacity: 0; box-shadow: 0 0 0 0 rgba(23,178,106,.5); } 22% { opacity: 1; box-shadow: 0 0 0 0 rgba(23,178,106,.5); } 36% { opacity: 1; box-shadow: 0 0 0 8px rgba(23,178,106,0); } 37%, 100% { opacity: 0; box-shadow: 0 0 0 8px rgba(23,178,106,0); } }
@keyframes tdRsvpDim { 0%, 20% { opacity: 1; } 26%, 88% { opacity: .45; } 100% { opacity: 1; } }
@keyframes tdRsvpCount { 0%, 21% { transform: none; background: #f2f4f9; color: #14161f; } 25% { transform: scale(1.14); background: #e2f6ec; color: #0f8a52; } 32%, 88% { transform: none; background: #e2f6ec; color: #0f8a52; } 100% { transform: none; background: #f2f4f9; color: #14161f; } }
@keyframes tdRsvpRoll { 0%, 21% { transform: none; } 27%, 88% { transform: translateY(-12px); } 100% { transform: none; } }
@keyframes tdRsvpPlus { 0%, 21% { opacity: 0; transform: translateY(4px); } 26% { opacity: 1; transform: translateY(-3px); } 34% { opacity: 1; transform: translateY(-6px); } 42%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes tdRsvpRow1 { 0%, 31% { opacity: 0; transform: translateY(46px); } 38% { opacity: 1; transform: translateY(-2px); } 41%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tdRsvpRow2 { 0%, 47% { opacity: 0; transform: translateY(46px); } 54% { opacity: 1; transform: translateY(-2px); } 57%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes tdRsvpBar1 { 0%, 37% { transform: scaleX(0); } 46%, 100% { transform: scaleX(1); } }
@keyframes tdRsvpBar2 { 0%, 53% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
@keyframes tdRsvpTyping { 0%, 38% { opacity: 0; transform: translateY(6px); } 41%, 46% { opacity: 1; transform: none; } 49%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes tdRsvpDot { 0%, 40% { transform: none; } 42% { transform: translateY(-3px); } 44% { transform: none; } 46% { transform: translateY(-3px); } 48%, 100% { transform: none; } }
/* demo: scratch */
.td-scratch .td-card { position: absolute; left: 90px; top: 20px; width: 160px; height: 88px; box-sizing: border-box; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(20,22,31,.08); animation: tdScratchCard 6.5s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdScratchCard { 0%, 58% { transform: translateY(0); box-shadow: 0 4px 12px rgba(20,22,31,.08); } 64%, 86% { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,22,31,.18); animation-timing-function: ease-in-out; } 94%, 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(20,22,31,.08); } }
.td-scratch .td-prize { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #b8860b; letter-spacing: .02em; background: radial-gradient(ellipse at 50% 50%, rgba(255,209,102,.3), rgba(255,209,102,0) 65%); animation: tdScratchPrize 6.5s ease-in-out infinite; }
@keyframes tdScratchPrize { 0%, 60% { transform: scale(1); text-shadow: 0 0 0 rgba(255,209,102,0); } 66% { transform: scale(1.2); text-shadow: 0 0 10px rgba(255,209,102,.95); } 72% { transform: scale(1); text-shadow: 0 0 4px rgba(255,209,102,.45); } 86% { transform: scale(1); text-shadow: 0 0 4px rgba(255,209,102,.45); } 100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,209,102,0); } }
.td-scratch .td-layer { position: absolute; inset: 0; display: flex; }
.td-scratch .td-s { display: block; flex: 1 1 0; height: 100%; background-image: linear-gradient(115deg, #c9ced9 0%, #c9ced9 34%, #dfe3eb 47%, #c9ced9 60%, #c9ced9 100%); background-size: 800% 100%; box-shadow: inset -1px 0 0 rgba(255,255,255,.28); transform-origin: 50% 50%; animation-duration: 6.5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-scratch .td-s1 { background-position: 0 0; animation-name: tdScratchS1; }
.td-scratch .td-s2 { background-position: 14.2857% 0; animation-name: tdScratchS2; }
.td-scratch .td-s3 { background-position: 28.5714% 0; animation-name: tdScratchS3; }
.td-scratch .td-s4 { background-position: 42.8571% 0; animation-name: tdScratchS4; }
.td-scratch .td-s5 { background-position: 57.1429% 0; animation-name: tdScratchS5; }
.td-scratch .td-s6 { background-position: 71.4286% 0; animation-name: tdScratchS6; }
.td-scratch .td-s7 { background-position: 85.7143% 0; animation-name: tdScratchS7; }
.td-scratch .td-s8 { background-position: 100% 0; animation-name: tdScratchS8; }
@keyframes tdScratchS1 { 0%, 13% { opacity: 1; transform: scaleY(1); } 17% { opacity: 0; transform: scaleY(.15); } 86% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 93%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes tdScratchS2 { 0%, 19% { opacity: 1; transform: scaleY(1); } 23% { opacity: 0; transform: scaleY(.15); } 87% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 94%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes tdScratchS3 { 0%, 24% { opacity: 1; transform: scaleY(1); } 28% { opacity: 0; transform: scaleY(.15); } 88% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 95%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes tdScratchS4 { 0%, 30% { opacity: 1; transform: scaleY(1); } 34% { opacity: 0; transform: scaleY(.15); } 89% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 96%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes tdScratchS5 { 0%, 35% { opacity: 1; transform: scaleY(1); } 39% { opacity: 0; transform: scaleY(.15); } 90% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 97%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes tdScratchS6 { 0%, 41% { opacity: 1; transform: scaleY(1); } 45% { opacity: 0; transform: scaleY(.15); } 91% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 98%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes tdScratchS7 { 0%, 46% { opacity: 1; transform: scaleY(1); } 50% { opacity: 0; transform: scaleY(.15); } 92% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 99%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes tdScratchS8 { 0%, 52% { opacity: 1; transform: scaleY(1); } 56% { opacity: 0; transform: scaleY(.15); } 93% { opacity: 0; transform: scaleY(.15); animation-timing-function: ease-in-out; } 100% { opacity: 1; transform: scaleY(1); } }
.td-scratch .td-shine { position: absolute; left: 0; top: -12px; width: 34px; height: 120px; background: linear-gradient(90deg, rgba(255,236,179,0), rgba(255,236,179,.95), rgba(255,236,179,0)); opacity: 0; transform: translateX(-50px) skewX(-20deg); animation: tdScratchShine 6.5s ease-in-out infinite; }
@keyframes tdScratchShine { 0%, 60% { transform: translateX(-50px) skewX(-20deg); opacity: 0; } 63%, 70% { opacity: .8; } 75%, 100% { transform: translateX(190px) skewX(-20deg); opacity: 0; } }
.td-scratch .td-chip { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #98a0b3; box-shadow: 0 1px 1px rgba(20,22,31,.15); opacity: 0; animation-duration: 6.5s; animation-timing-function: ease-in; animation-iteration-count: infinite; }
.td-scratch .td-chip::after { content: ""; position: absolute; left: -6px; top: -5px; width: 4px; height: 4px; border-radius: 50%; background: #aab1c2; }
.td-scratch .td-chip1 { left: 118px; top: 89px; animation-name: tdScratchChip1; }
.td-scratch .td-chip2 { left: 138px; top: 35px; animation-name: tdScratchChip2; }
.td-scratch .td-chip3 { left: 197px; top: 89px; animation-name: tdScratchChip3; }
.td-scratch .td-chip4 { left: 217px; top: 35px; animation-name: tdScratchChip4; }
@keyframes tdScratchChip1 { 0%, 20% { opacity: 0; transform: translate(0, 0); } 21% { opacity: 1; } 27%, 100% { opacity: 0; transform: translate(-5px, 24px); } }
@keyframes tdScratchChip2 { 0%, 25% { opacity: 0; transform: translate(0, 0); } 26% { opacity: 1; } 32%, 100% { opacity: 0; transform: translate(4px, 26px); } }
@keyframes tdScratchChip3 { 0%, 42% { opacity: 0; transform: translate(0, 0); } 43% { opacity: 1; } 49%, 100% { opacity: 0; transform: translate(5px, 24px); } }
@keyframes tdScratchChip4 { 0%, 47% { opacity: 0; transform: translate(0, 0); } 48% { opacity: 1; } 54%, 100% { opacity: 0; transform: translate(-4px, 26px); } }
.td-scratch .td-star { position: absolute; background: #ffd166; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; transform: scale(0); animation-duration: 6.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.td-scratch .td-star1 { left: 238px; top: 8px; width: 18px; height: 18px; animation-name: tdScratchStar1; }
.td-scratch .td-star2 { left: 84px; top: 96px; width: 10px; height: 10px; animation-name: tdScratchStar2; }
@keyframes tdScratchStar1 { 0%, 62% { opacity: 0; transform: scale(0) rotate(0deg); } 66% { opacity: 1; transform: scale(1.25) rotate(20deg); } 70% { opacity: .45; transform: scale(.85) rotate(30deg); } 74% { opacity: 1; transform: scale(1.1) rotate(38deg); } 78%, 86% { opacity: 1; transform: scale(1) rotate(45deg); } 90%, 100% { opacity: 0; transform: scale(0) rotate(60deg); } }
@keyframes tdScratchStar2 { 0%, 66% { opacity: 0; transform: scale(0) rotate(0deg); } 70% { opacity: 1; transform: scale(1.2) rotate(15deg); } 74% { opacity: .5; transform: scale(.7) rotate(25deg); } 78%, 84% { opacity: 1; transform: scale(1) rotate(45deg); } 88%, 100% { opacity: 0; transform: scale(0) rotate(45deg); } }
.td-scratch .td-finger { left: 90px; top: 26px; animation: tdScratchF 6.5s ease-in-out infinite; }
@keyframes tdScratchF { 0%, 6% { opacity: 0; transform: translate(0, -10px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 10% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 14% { transform: translate(0, 0) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 20% { transform: translate(19.75px, 54px) scale(.8); } 25% { transform: translate(39.5px, 0) scale(.8); } 31% { transform: translate(59.25px, 54px) scale(.8); } 36% { transform: translate(79px, 0) scale(.8); } 42% { transform: translate(98.75px, 54px) scale(.8); } 47% { transform: translate(118.5px, 0) scale(.8); } 53% { opacity: 1; transform: translate(138.25px, 54px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 56% { opacity: 1; transform: translate(144px, 48px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 60%, 100% { opacity: 0; transform: translate(144px, 38px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } }
/* demo: text */
.td-text .td-phone { left: 44px; top: 7px; width: 92px; height: 118px; }
.td-text .td-block { position: absolute; left: 8px; top: 10px; width: 76px; height: 46px; box-sizing: border-box; padding: 6px; border: 1.5px solid transparent; border-radius: 6px; animation: tdTextBlock 7s ease-in-out infinite; }
.td-text .td-h { position: absolute; width: 6px; height: 6px; box-sizing: border-box; background: #fff; border: 1.5px solid #3d6fe8; border-radius: 1.5px; opacity: 0; animation: tdTextHandle 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-text .td-h1 { left: -4px; top: -4px; }
.td-text .td-h2 { right: -4px; top: -4px; }
.td-text .td-h3 { left: -4px; bottom: -4px; }
.td-text .td-h4 { right: -4px; bottom: -4px; }
.td-text .td-lines { position: absolute; left: 6px; top: 9px; width: 50px; animation: tdTextLines 7s ease-in-out infinite; }
.td-text .td-lines span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); margin: 0 0 6px; }
.td-text .td-lines span:last-child { width: 60%; margin: 0; }
.td-text .td-txt { position: absolute; left: 6px; top: 6px; font-size: .7rem; line-height: 1.2; font-weight: 700; color: #fff; white-space: nowrap; transform-origin: 0 0; animation: tdTextGrow 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-text .td-l { display: block; font-weight: 700; }
.td-text .td-txt span { display: inline-block; opacity: 0; }
.td-text .td-w1 { animation: tdTextW1 7s ease-in-out infinite; }
.td-text .td-w2 { animation: tdTextW2 7s ease-in-out infinite; }
.td-text .td-w3 { animation: tdTextW3 7s ease-in-out infinite; }
.td-text .td-w4 { animation: tdTextW4 7s ease-in-out infinite; }
.td-text .td-caret { position: absolute; left: 6px; top: 7px; width: 1.5px; height: 12px; opacity: 0; transform-origin: 0 0; animation: tdTextCaret 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-text .td-caret::before { content: ""; position: absolute; inset: 0; background: #fff; animation: tdTextBlink 7s ease-in-out infinite; }
.td-text .td-bar { position: absolute; left: 8px; top: 63px; width: 76px; height: 18px; box-sizing: border-box; padding: 2px; display: flex; gap: 4px; border-radius: 5px; background: rgba(255,255,255,.16); opacity: 0; animation: tdTextBar 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-text .td-bt { flex: 1; height: 14px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .55rem; font-weight: 800; line-height: 1; color: #fff; background: rgba(255,255,255,.12); }
.td-text .td-b1 { letter-spacing: .02em; }
.td-text .td-b2 { animation: tdTextB2 7s ease-in-out infinite; }
.td-text .td-b3 { animation: tdTextB3 7s ease-in-out infinite; }
.td-text .td-bt i { width: 8px; height: 8px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.td-text .td-rest { position: absolute; left: 8px; right: 8px; top: 92px; }
.td-text .td-rest span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 0 0 7px; }
.td-text .td-rest span:last-child { width: 70%; margin: 0; }
.td-text .td-finger { left: 81px; top: 31px; animation: tdTextFinger 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-text .td-spark { position: absolute; left: 106px; top: 14px; width: 12px; height: 12px; pointer-events: none; }
.td-text .td-spark::before, .td-text .td-spark::after { content: ""; position: absolute; border-radius: 50%; background: #ffd166; opacity: 0; }
.td-text .td-spark::before { left: 2px; top: 4px; width: 6px; height: 6px; animation: tdTextSpark1 7s ease-in-out infinite; }
.td-text .td-spark::after { left: 8px; top: 1px; width: 4px; height: 4px; animation: tdTextSpark2 7s ease-in-out infinite; }
.td-text .td-cap { position: absolute; left: 168px; top: 22px; display: flex; flex-direction: column; gap: 12px; }
.td-text .td-cap span { position: relative; display: block; padding-left: 18px; font-size: .78rem; font-weight: 700; line-height: 1.2; color: #b5bccb; }
.td-text .td-cap span::before { content: ""; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #d9dde8; }
.td-text .td-cap span i { display: block; width: 100px; height: 4px; border-radius: 2px; background: #e3e6ee; margin: 5px 0 0; }
.td-text .td-cap-1 { animation: tdTextCap1 7s ease-in-out infinite; }
.td-text .td-cap-1::before { animation: tdTextDot1 7s ease-in-out infinite; }
.td-text .td-cap-2 { animation: tdTextCap2 7s ease-in-out infinite; }
.td-text .td-cap-2::before { animation: tdTextDot2 7s ease-in-out infinite; }
.td-text .td-cap-3 { animation: tdTextCap3 7s ease-in-out infinite; }
.td-text .td-cap-3::before { animation: tdTextDot3 7s ease-in-out infinite; }
@keyframes tdTextFinger { 0%, 4% { opacity: 0; transform: translate(10px, -8px); } 9% { opacity: 1; transform: none; } 12% { transform: scale(.8); } 15%, 17% { transform: none; } 20% { transform: scale(.8); } 23% { opacity: 1; transform: none; } 28% { opacity: 0; transform: translate(6px, -6px); } 48% { opacity: 0; transform: translate(0, 45px); } 52% { opacity: 1; transform: translate(0, 39px); } 55% { transform: translate(0, 39px) scale(.8); } 58% { transform: translate(0, 39px); } 62% { transform: translate(25px, 39px); } 64% { transform: translate(25px, 39px) scale(.8); } 67% { opacity: 1; transform: translate(25px, 39px); } 72%, 100% { opacity: 0; transform: translate(25px, 33px); } }
@keyframes tdTextBlock { 0%, 11% { border-color: transparent; background: rgba(255,255,255,0); box-shadow: 0 0 0 0 rgba(61,111,232,0); } 13%, 20% { border-color: #3d6fe8; background: rgba(61,111,232,.16); box-shadow: 0 0 0 3px rgba(61,111,232,.22); } 23%, 93% { border-color: #3d6fe8; background: rgba(255,255,255,.1); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 97%, 100% { border-color: transparent; background: rgba(255,255,255,0); box-shadow: 0 0 0 0 rgba(20,22,31,0); } }
@keyframes tdTextHandle { 0%, 11% { opacity: 0; transform: scale(.4); } 14%, 20% { opacity: 1; transform: scale(1); } 23%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes tdTextLines { 0%, 20% { opacity: 1; transform: none; } 24%, 95% { opacity: 0; transform: translateX(-5px); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes tdTextGrow { 0%, 55% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(255,209,102,0); } 61%, 64% { transform: scale(1.22); color: #fff; text-shadow: 0 0 0 rgba(255,209,102,0); } 69%, 95% { transform: scale(1.22); color: #ffd166; text-shadow: 0 1px 6px rgba(255,209,102,.45); } 100% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(255,209,102,0); } }
@keyframes tdTextW1 { 0%, 29% { opacity: 0; transform: translateY(4px); } 32%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes tdTextW2 { 0%, 33% { opacity: 0; transform: translateY(4px); } 36%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes tdTextW3 { 0%, 38% { opacity: 0; transform: translateY(4px); } 41%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes tdTextW4 { 0%, 42% { opacity: 0; transform: translateY(4px); } 45%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes tdTextCaret { 0%, 24% { opacity: 0; transform: translate(0, 0); } 25%, 29% { opacity: 1; transform: translate(0, 0); } 32%, 33% { transform: translate(19px, 0); } 36%, 37% { transform: translate(36px, 0); } 38% { transform: translate(0, 13px); } 41%, 42% { transform: translate(15px, 13px); } 45%, 55% { transform: translate(32px, 13px) scale(1); } 61%, 92% { opacity: 1; transform: translate(39px, 16px) scale(1.22); } 95%, 100% { opacity: 0; transform: translate(39px, 16px) scale(1.22); } }
@keyframes tdTextBlink { 0%, 26% { opacity: 1; } 27%, 28% { opacity: 0; } 29%, 50% { opacity: 1; } 51%, 56% { opacity: 0; } 57%, 62% { opacity: 1; } 63%, 68% { opacity: 0; } 69%, 74% { opacity: 1; } 75%, 80% { opacity: 0; } 81%, 86% { opacity: 1; } 87%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes tdTextBar { 0%, 23% { opacity: 0; transform: translateY(6px); } 29%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes tdTextB2 { 0%, 54% { background: rgba(255,255,255,.12); color: #fff; transform: none; } 56% { background: #fff; color: #14161f; transform: scale(.88); } 59%, 93% { background: #fff; color: #14161f; transform: none; } 97%, 100% { background: rgba(255,255,255,.12); color: #fff; transform: none; } }
@keyframes tdTextB3 { 0%, 63% { background: rgba(255,255,255,.12); transform: none; } 65% { background: #fff; transform: scale(.88); } 68%, 93% { background: #fff; transform: none; } 97%, 100% { background: rgba(255,255,255,.12); transform: none; } }
@keyframes tdTextSpark1 { 0%, 65% { opacity: 0; transform: translate(0, 0) scale(.3); } 69% { opacity: 1; transform: translate(-3px, -3px) scale(1); } 77%, 100% { opacity: 0; transform: translate(-6px, -8px) scale(.4); } }
@keyframes tdTextSpark2 { 0%, 66% { opacity: 0; transform: translate(0, 0) scale(.3); } 71% { opacity: 1; transform: translate(2px, -4px) scale(1); } 79%, 100% { opacity: 0; transform: translate(4px, -9px) scale(.4); } }
@keyframes tdTextCap1 { 0%, 11% { color: #b5bccb; transform: none; } 14%, 22% { color: #14161f; transform: translateX(3px); } 25%, 93% { color: #14161f; transform: none; } 97%, 100% { color: #b5bccb; transform: none; } }
@keyframes tdTextDot1 { 0%, 11% { background: #d9dde8; box-shadow: 0 0 0 0 rgba(61,111,232,0); } 14%, 22% { background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.2); } 25%, 93% { background: #17b26a; box-shadow: 0 0 0 0 rgba(23,178,106,0); } 97%, 100% { background: #d9dde8; box-shadow: 0 0 0 0 rgba(61,111,232,0); } }
@keyframes tdTextCap2 { 0%, 22% { color: #b5bccb; transform: none; } 25%, 54% { color: #14161f; transform: translateX(3px); } 57%, 93% { color: #14161f; transform: none; } 97%, 100% { color: #b5bccb; transform: none; } }
@keyframes tdTextDot2 { 0%, 22% { background: #d9dde8; box-shadow: 0 0 0 0 rgba(61,111,232,0); } 25%, 54% { background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.2); } 57%, 93% { background: #17b26a; box-shadow: 0 0 0 0 rgba(23,178,106,0); } 97%, 100% { background: #d9dde8; box-shadow: 0 0 0 0 rgba(61,111,232,0); } }
@keyframes tdTextCap3 { 0%, 52% { color: #b5bccb; transform: none; } 55%, 68% { color: #14161f; transform: translateX(3px); } 71%, 93% { color: #14161f; transform: none; } 97%, 100% { color: #b5bccb; transform: none; } }
@keyframes tdTextDot3 { 0%, 52% { background: #d9dde8; box-shadow: 0 0 0 0 rgba(61,111,232,0); } 55%, 68% { background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.2); } 71%, 93% { background: #17b26a; box-shadow: 0 0 0 0 rgba(23,178,106,0); } 97%, 100% { background: #d9dde8; box-shadow: 0 0 0 0 rgba(61,111,232,0); } }
/* demo: together */
.td-together .td-ph { position: absolute; top: 12px; width: 64px; height: 100px; box-shadow: 0 2px 6px rgba(20,22,31,.12); }
.td-together .td-ph-l { left: 46px; animation: tdTogetherPl 6s ease-in-out infinite; }
.td-together .td-ph-r { left: 230px; animation: tdTogetherPr 6s ease-in-out infinite; }
.td-together .td-ui { position: absolute; inset: 0; }
.td-together .td-av { position: absolute; left: 10px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.92); }
.td-together .td-ui span { position: absolute; height: 5px; border-radius: 3px; background: rgba(255,255,255,.5); }
.td-together .td-ui .td-l1 { left: 25px; top: 12px; width: 26px; height: 6px; background: rgba(255,255,255,.85); }
.td-together .td-ui .td-l2 { left: 10px; top: 29px; width: 44px; }
.td-together .td-ui .td-l3 { left: 10px; top: 40px; width: 30px; }
.td-together .td-btn { position: absolute; left: 12px; top: 58px; width: 40px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.88); box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 5px rgba(20,22,31,.18); }
.td-together .td-btn::after { content: ""; position: absolute; left: 13px; top: 5px; width: 14px; height: 4px; border-radius: 2px; background: rgba(20,22,31,.28); }
.td-together .td-ph-l .td-btn { animation: tdTogetherBl 6s ease-in-out infinite; }
.td-together .td-ph-l .td-btn::after { animation: tdTogetherLl 6s ease-in-out infinite; }
.td-together .td-ph-r .td-btn { animation: tdTogetherBr 6s ease-in-out infinite; }
.td-together .td-ph-r .td-btn::after { animation: tdTogetherLr 6s ease-in-out infinite; }
.td-together .td-pulse { position: absolute; left: 22px; top: 55px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); opacity: 0; transform: scale(.5); }
.td-together .td-p1 { animation: tdTogetherP1 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-p2 { animation: tdTogetherP2 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-new { position: absolute; inset: 0; background: linear-gradient(160deg, #2ccb84, #17b26a); opacity: 0; -webkit-clip-path: circle(0px at 32px 65px); clip-path: circle(0px at 32px 65px); animation: tdTogetherN 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-ring { position: absolute; left: 17px; top: 24px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: rgba(255,255,255,.14); opacity: 0; transform: scale(.4); animation: tdTogetherRing 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-check { position: absolute; left: 28px; top: 30px; width: 8px; height: 14px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; opacity: 0; transform: rotate(45deg) scale(0); animation: tdTogetherCheck 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-nl { position: absolute; height: 5px; border-radius: 3px; opacity: 0; transform: translateY(6px); animation: tdTogetherNl 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-nl1 { left: 17px; top: 66px; width: 30px; background: rgba(255,255,255,.85); }
.td-together .td-nl2 { left: 22px; top: 77px; width: 20px; background: rgba(255,255,255,.5); }
.td-together .td-line { position: absolute; left: 118px; top: 61px; width: 104px; height: 2px; background: linear-gradient(90deg, #c9cee0 0 6px, transparent 6px 11px) 0 0 / 11px 2px repeat-x; animation: tdTogetherLine 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-fill { position: absolute; left: 118px; top: 60px; width: 104px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #3d6fe8, #6d94f2); box-shadow: 0 0 8px rgba(61,111,232,.45); transform: scaleX(0); transform-origin: 0 50%; animation: tdTogetherFill 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-dot { position: absolute; left: 114px; top: 58px; width: 8px; height: 8px; border-radius: 50%; background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.22), 0 2px 6px rgba(61,111,232,.5); opacity: 0; animation: tdTogetherDot 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-together .td-tag { position: absolute; left: 143px; top: 38px; width: 54px; height: 14px; border-radius: 999px; background: #3d6fe8; color: #fff; text-align: center; font-size: .62rem; line-height: 14px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 4px 10px rgba(61,111,232,.35); opacity: 0; transform: translateY(4px); animation: tdTogetherTag 6s ease-in-out infinite; }
.td-together .td-cap { position: absolute; top: 116px; width: 64px; text-align: center; white-space: nowrap; font-size: .62rem; line-height: 12px; font-weight: 700; color: #14161f; opacity: .55; }
.td-together .td-cap::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 0; border-radius: 50%; background: #c9cee0; vertical-align: middle; }
.td-together .td-cap-l { left: 46px; animation: tdTogetherCl 6s ease-in-out infinite; }
.td-together .td-cap-r { left: 230px; animation: tdTogetherCr 6s ease-in-out infinite; }
.td-together .td-cap-l::before { animation: tdTogetherDl 6s ease-in-out infinite; }
.td-together .td-cap-r::before { animation: tdTogetherDr 6s ease-in-out infinite; }
.td-together .td-finger { left: 69px; top: 68px; z-index: 3; animation: tdTogetherF 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdTogetherF { 0%, 6% { opacity: 0; transform: translate(16px, 22px); box-shadow: 0 2px 8px rgba(0,0,0,.25); } 11% { opacity: 1; transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.25); } 15% { opacity: 1; transform: scale(.8); box-shadow: 0 0 0 10px rgba(20,22,31,.12); } 18% { opacity: 1; transform: scale(.8); box-shadow: 0 0 0 10px rgba(20,22,31,.12); } 21% { opacity: 1; transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.25); } 26%, 100% { opacity: 0; transform: translate(10px, 14px); box-shadow: 0 2px 8px rgba(0,0,0,.25); } }
@keyframes tdTogetherPl { 0%, 14% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.12); } 16% { transform: scale(1.03); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 26%, 56% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.12); } 62%, 88% { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 96%, 100% { transform: none; box-shadow: 0 2px 6px rgba(20,22,31,.12); } }
@keyframes tdTogetherPr { 0%, 31% { transform: none; box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 6px rgba(20,22,31,.12); } 36% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(61,111,232,.22), 0 8px 18px rgba(20,22,31,.18); } 48%, 56% { transform: none; box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 6px rgba(20,22,31,.12); } 62%, 88% { transform: translateY(-2px); box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 8px 18px rgba(20,22,31,.18); } 96%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 6px rgba(20,22,31,.12); } }
@keyframes tdTogetherBl { 0%, 14% { background: rgba(255,255,255,.88); box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 5px rgba(20,22,31,.18); transform: none; } 16% { background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.35), 0 6px 14px rgba(61,111,232,.5); transform: scale(.94); } 21%, 88% { background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.35), 0 6px 14px rgba(61,111,232,.5); transform: none; } 92%, 100% { background: rgba(255,255,255,.88); box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 5px rgba(20,22,31,.18); transform: none; } }
@keyframes tdTogetherBr { 0%, 32% { background: rgba(255,255,255,.88); box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 5px rgba(20,22,31,.18); transform: none; } 34% { background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.35), 0 6px 14px rgba(61,111,232,.5); transform: scale(.94); } 39%, 88% { background: #3d6fe8; box-shadow: 0 0 0 3px rgba(61,111,232,.35), 0 6px 14px rgba(61,111,232,.5); transform: none; } 92%, 100% { background: rgba(255,255,255,.88); box-shadow: 0 0 0 0 rgba(61,111,232,0), 0 2px 5px rgba(20,22,31,.18); transform: none; } }
@keyframes tdTogetherLl { 0%, 14% { background: rgba(20,22,31,.28); } 16%, 88% { background: #fff; } 92%, 100% { background: rgba(20,22,31,.28); } }
@keyframes tdTogetherLr { 0%, 32% { background: rgba(20,22,31,.28); } 34%, 88% { background: #fff; } 92%, 100% { background: rgba(20,22,31,.28); } }
@keyframes tdTogetherP1 { 0%, 33% { opacity: 0; transform: scale(.5); } 34% { opacity: .9; transform: scale(.6); } 47%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes tdTogetherP2 { 0%, 37% { opacity: 0; transform: scale(.5); } 38% { opacity: .9; transform: scale(.6); } 51%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes tdTogetherLine { 0%, 20% { background-position: 0 0; } 33%, 100% { background-position: 44px 0; } }
@keyframes tdTogetherFill { 0%, 20% { transform: scaleX(0); opacity: 1; } 33%, 90% { transform: scaleX(1); opacity: 1; } 96% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes tdTogetherDot { 0%, 17% { opacity: 0; transform: translateX(0) scale(.4); } 20% { opacity: 1; transform: translateX(0) scale(1); } 33% { opacity: 1; transform: translateX(104px) scale(1); } 37%, 100% { opacity: 0; transform: translateX(104px) scale(.4); } }
@keyframes tdTogetherTag { 0%, 21% { opacity: 0; transform: translateY(4px); } 27%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes tdTogetherN { 0%, 40% { opacity: 0; -webkit-clip-path: circle(0px at 32px 65px); clip-path: circle(0px at 32px 65px); } 42% { opacity: 1; -webkit-clip-path: circle(0px at 32px 65px); clip-path: circle(0px at 32px 65px); } 52%, 92% { opacity: 1; -webkit-clip-path: circle(76px at 32px 65px); clip-path: circle(76px at 32px 65px); } 100% { opacity: 0; -webkit-clip-path: circle(76px at 32px 65px); clip-path: circle(76px at 32px 65px); } }
@keyframes tdTogetherRing { 0%, 46% { opacity: 0; transform: scale(.4); } 54% { opacity: 1; transform: scale(1.1); } 58%, 88% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes tdTogetherCheck { 0%, 50% { opacity: 0; transform: rotate(45deg) scale(0); } 57% { opacity: 1; transform: rotate(45deg) scale(1.2); } 61%, 88% { opacity: 1; transform: rotate(45deg) scale(1); } 92%, 100% { opacity: 0; transform: rotate(45deg) scale(.6); } }
@keyframes tdTogetherNl { 0%, 54% { opacity: 0; transform: translateY(6px); } 62%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes tdTogetherCl { 0%, 10% { opacity: .55; } 13%, 26% { opacity: 1; } 32%, 48% { opacity: .55; } 52%, 90% { opacity: 1; } 96%, 100% { opacity: .55; } }
@keyframes tdTogetherCr { 0%, 31% { opacity: .55; } 35%, 90% { opacity: 1; } 96%, 100% { opacity: .55; } }
@keyframes tdTogetherDl { 0%, 10% { background: #c9cee0; } 13%, 48% { background: #3d6fe8; } 52%, 90% { background: #17b26a; } 96%, 100% { background: #c9cee0; } }
@keyframes tdTogetherDr { 0%, 31% { background: #c9cee0; } 35%, 48% { background: #3d6fe8; } 52%, 90% { background: #17b26a; } 96%, 100% { background: #c9cee0; } }
/* demo: undo */
.td-undo .td-phone { left: 133px; top: 8px; width: 74px; height: 118px; box-shadow: 0 5px 12px rgba(20,22,31,.16); }
.td-undo .td-lines { position: absolute; left: 11px; right: 11px; top: 68px; }
.td-undo .td-lines span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 0 0 7px; }
.td-undo .td-lines span:nth-child(2) { width: 70%; margin: 0; }
.td-undo .td-ghost { position: absolute; left: 11px; top: 22px; width: 51px; height: 38px; box-sizing: border-box; border: 1.5px dashed rgba(255,255,255,.6); border-radius: 6px; opacity: 0; animation: tdUndoGhost 7s ease-in-out infinite; }
.td-undo .td-block { position: absolute; left: 11px; top: 22px; width: 51px; height: 38px; box-sizing: border-box; padding: 6px; border-radius: 6px; border: 1.5px solid #e3e6ee; background: #fff; box-shadow: 0 1px 3px rgba(20,22,31,.2); z-index: 2; animation: tdUndoBlock 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-undo .td-block span { display: block; height: 5px; border-radius: 3px; background: #e3e6ee; margin: 0 0 4px; }
.td-undo .td-block span:last-child { width: 60%; margin: 0; }
.td-undo .td-toast { position: absolute; left: 50%; top: 98px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.96); color: #14161f; font-size: .62rem; font-weight: 800; line-height: 1.2; white-space: nowrap; box-shadow: 0 3px 8px rgba(20,22,31,.18); opacity: 0; transform: translate(-50%, 6px); z-index: 3; }
.td-undo .td-toast-a { animation: tdUndoToastA 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-undo .td-toast-b { animation: tdUndoToastB 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-undo .td-btn { position: absolute; top: 50px; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 1px solid #e3e6ee; color: #14161f; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(20,22,31,.08); z-index: 2; }
.td-undo .td-btn-a { left: 84px; animation: tdUndoBtnA 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-undo .td-btn-b { left: 226px; animation: tdUndoBtnB 7s cubic-bezier(.2,.8,.2,1) infinite; }
.td-undo .td-ic { position: relative; display: block; width: 11px; height: 11px; box-sizing: border-box; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; }
.td-undo .td-ic::after { content: ""; position: absolute; left: -4px; top: -3px; width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid currentColor; }
.td-undo .td-btn-b .td-ic { transform: scaleX(-1); }
.td-undo .td-rip { position: absolute; top: 50px; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; border: 2px solid #3d6fe8; opacity: 0; z-index: 1; }
.td-undo .td-rip-a { left: 84px; animation: tdUndoRipA 7s ease-out infinite; }
.td-undo .td-rip-b { left: 226px; animation: tdUndoRipB 7s ease-out infinite; }
.td-undo .td-lab { position: absolute; top: 86px; width: 50px; text-align: center; font-size: .62rem; font-weight: 700; line-height: 1.2; color: #8a93a8; }
.td-undo .td-lab-a { left: 74px; animation: tdUndoLabA 7s ease-in-out infinite; }
.td-undo .td-lab-b { left: 216px; animation: tdUndoLabB 7s ease-in-out infinite; }
.td-undo .td-finger { left: 160px; top: 40px; z-index: 5; animation: tdUndoFinger 7s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdUndoBlock { 0%, 7% { transform: translate(0, 0) rotate(0deg) scale(1); box-shadow: 0 1px 3px rgba(20,22,31,.2); border-color: #e3e6ee; } 9%, 10% { transform: translate(0, 0) rotate(0deg) scale(1.05); box-shadow: 0 8px 18px rgba(20,22,31,.35); border-color: #3d6fe8; } 19% { transform: translate(8px, 34px) rotate(-6deg) scale(1.05); box-shadow: 0 8px 18px rgba(20,22,31,.35); border-color: #3d6fe8; } 21%, 30% { transform: translate(8px, 34px) rotate(-6deg) scale(1); box-shadow: 0 1px 3px rgba(20,22,31,.2); border-color: #e3e6ee; } 38%, 60% { transform: translate(0, 0) rotate(0deg) scale(1); box-shadow: 0 1px 3px rgba(20,22,31,.2); border-color: #e3e6ee; } 69%, 91% { transform: translate(8px, 34px) rotate(-6deg) scale(1); box-shadow: 0 1px 3px rgba(20,22,31,.2); border-color: #e3e6ee; } 98%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); box-shadow: 0 1px 3px rgba(20,22,31,.2); border-color: #e3e6ee; } }
@keyframes tdUndoGhost { 0%, 8% { opacity: 0; } 11%, 34% { opacity: 1; } 40%, 62% { opacity: 0; } 66%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes tdUndoToastA { 0%, 30% { opacity: 0; transform: translate(-50%, 6px); } 34%, 48% { opacity: 1; transform: translate(-50%, 0); } 52%, 100% { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes tdUndoToastB { 0%, 59% { opacity: 0; transform: translate(-50%, 6px); } 63%, 86% { opacity: 1; transform: translate(-50%, 0); } 90%, 100% { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes tdUndoBtnA { 0%, 27% { transform: scale(1); background: #fff; border-color: #e3e6ee; color: #14161f; box-shadow: 0 2px 6px rgba(20,22,31,.08); } 30% { transform: scale(.86); background: #3d6fe8; border-color: #3d6fe8; color: #fff; box-shadow: 0 1px 3px rgba(20,22,31,.12); } 34% { transform: scale(1.08); background: #3d6fe8; border-color: #3d6fe8; color: #fff; box-shadow: 0 8px 18px rgba(20,22,31,.18); } 40% { transform: scale(1); background: #3d6fe8; border-color: #3d6fe8; color: #fff; box-shadow: 0 8px 18px rgba(20,22,31,.18); } 46%, 100% { transform: scale(1); background: #fff; border-color: #e3e6ee; color: #14161f; box-shadow: 0 2px 6px rgba(20,22,31,.08); } }
@keyframes tdUndoBtnB { 0%, 56% { transform: scale(1); background: #fff; border-color: #e3e6ee; color: #14161f; box-shadow: 0 2px 6px rgba(20,22,31,.08); } 59% { transform: scale(.86); background: #3d6fe8; border-color: #3d6fe8; color: #fff; box-shadow: 0 1px 3px rgba(20,22,31,.12); } 63% { transform: scale(1.08); background: #3d6fe8; border-color: #3d6fe8; color: #fff; box-shadow: 0 8px 18px rgba(20,22,31,.18); } 69% { transform: scale(1); background: #3d6fe8; border-color: #3d6fe8; color: #fff; box-shadow: 0 8px 18px rgba(20,22,31,.18); } 75%, 100% { transform: scale(1); background: #fff; border-color: #e3e6ee; color: #14161f; box-shadow: 0 2px 6px rgba(20,22,31,.08); } }
@keyframes tdUndoLabA { 0%, 27% { color: #8a93a8; } 30%, 40% { color: #3d6fe8; } 46%, 100% { color: #8a93a8; } }
@keyframes tdUndoLabB { 0%, 56% { color: #8a93a8; } 59%, 69% { color: #3d6fe8; } 75%, 100% { color: #8a93a8; } }
@keyframes tdUndoRipA { 0%, 28% { opacity: 0; transform: scale(.7); } 30% { opacity: .55; transform: scale(.7); } 42%, 100% { opacity: 0; transform: scale(2); } }
@keyframes tdUndoRipB { 0%, 57% { opacity: 0; transform: scale(.7); } 59% { opacity: .55; transform: scale(.7); } 71%, 100% { opacity: 0; transform: scale(2); } }
@keyframes tdUndoFinger { 0%, 3% { opacity: 0; transform: translate(0, -6px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 6% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 8%, 10% { opacity: 1; transform: translate(0, 0) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 19% { opacity: 1; transform: translate(8px, 34px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 21% { opacity: 1; transform: translate(8px, 34px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 24% { opacity: 0; transform: translate(8px, 34px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 25% { opacity: 0; transform: translate(-70px, 10px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 28% { opacity: 1; transform: translate(-70px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 30% { opacity: 1; transform: translate(-70px, 16px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 33% { opacity: 1; transform: translate(-70px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 40% { opacity: 1; transform: translate(-70px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 43% { opacity: 0; transform: translate(-70px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 53% { opacity: 0; transform: translate(72px, 10px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 56% { opacity: 1; transform: translate(72px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 59% { opacity: 1; transform: translate(72px, 16px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 62% { opacity: 1; transform: translate(72px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 68% { opacity: 1; transform: translate(72px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } 71%, 100% { opacity: 0; transform: translate(72px, 16px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(20,22,31,0); } }
/* demo: zoom */
.td-zoom .td-glow { position: absolute; left: calc(50% - 62px); top: 0; width: 124px; height: 124px; background: radial-gradient(circle, rgba(61,111,232,.22) 0%, rgba(61,111,232,0) 68%); opacity: 0; transform: scale(.7); animation: tdZoomGlow 6s ease-in-out infinite; }
@keyframes tdZoomGlow { 0%, 18% { opacity: 0; transform: scale(.7); } 40%, 70% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(.7); } }
.td-zoom .td-phone { left: calc(50% - 32px); top: 22px; width: 64px; height: 80px; transform-origin: 50% 50%; box-shadow: 0 8px 18px rgba(20,22,31,.18); animation: tdZoomPhone 6s cubic-bezier(.2,.8,.2,1) infinite; }
.td-zoom .td-phone::before { content: ""; position: absolute; left: 50%; top: 5px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: rgba(255,255,255,.35); }
@keyframes tdZoomPhone { 0%, 18% { transform: scale(1); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 40%, 70% { transform: scale(1.35); box-shadow: 0 8px 20px rgba(20,22,31,.28); } 80% { transform: scale(.985); box-shadow: 0 8px 18px rgba(20,22,31,.18); } 86%, 100% { transform: scale(1); box-shadow: 0 8px 18px rgba(20,22,31,.18); } }
.td-zoom .td-lines { position: absolute; left: 10px; right: 10px; top: 14px; }
.td-zoom .td-lines span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); margin: 0 0 5px; }
.td-zoom .td-lines span:nth-child(2) { width: 70%; background: rgba(255,255,255,.45); }
.td-zoom .td-lines span:nth-child(3) { width: 85%; background: rgba(255,255,255,.45); margin: 0; }
.td-zoom .td-rect { position: absolute; left: 10px; top: 44px; width: 28px; height: 20px; border-radius: 4px; background: rgba(255,209,102,.92); }
.td-zoom .td-rect.r2 { left: 42px; width: 12px; background: rgba(255,255,255,.28); }
.td-zoom .td-foot { position: absolute; left: 10px; top: 70px; width: 60%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); }
.td-zoom .td-link { position: absolute; left: calc(50% - 32px); top: 61px; width: 64px; height: 2px; transform: rotate(26.6deg); background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0, rgba(255,255,255,.8) 4px, transparent 4px, transparent 8px); opacity: 0; clip-path: inset(0 34% 0 34%); animation: tdZoomLink 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdZoomLink { 0%, 15% { opacity: 0; clip-path: inset(0 34% 0 34%); } 19% { opacity: 1; clip-path: inset(0 34% 0 34%); } 40% { opacity: 1; clip-path: inset(0 2% 0 2%); } 46%, 100% { opacity: 0; clip-path: inset(0 2% 0 2%); } }
.td-zoom .td-finger { animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-zoom .td-finger.f1 { left: calc(50% - 17px); top: 49px; animation-name: tdZoomF1; }
.td-zoom .td-finger.f2 { left: calc(50% - 1px); top: 57px; animation-name: tdZoomF2; }
.td-zoom .td-finger.f3 { left: 286px; top: 101px; animation-name: tdZoomF3; }
@keyframes tdZoomF1 { 0%, 8% { opacity: 0; transform: translate(4px, -8px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25); } 13% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25); } 17% { opacity: 1; transform: translate(0, 0) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 40% { opacity: 1; transform: translate(-20px, -10px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 46%, 100% { opacity: 0; transform: translate(-20px, -10px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25); } }
@keyframes tdZoomF2 { 0%, 8% { opacity: 0; transform: translate(-4px, 8px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25); } 13% { opacity: 1; transform: translate(0, 0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25); } 17% { opacity: 1; transform: translate(0, 0) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 40% { opacity: 1; transform: translate(20px, 10px) scale(.8); box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 10px rgba(20,22,31,.12); } 46%, 100% { opacity: 0; transform: translate(20px, 10px) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.25); } }
@keyframes tdZoomF3 { 0%, 58% { opacity: 0; transform: translate(4px, 8px) scale(1); } 64% { opacity: 1; transform: translate(0, 0) scale(1); } 68% { opacity: 1; transform: translate(0, 0) scale(.8); } 72% { opacity: 1; transform: translate(0, 0) scale(1); } 78%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
.td-zoom .td-pct { position: absolute; left: 14px; top: 12px; width: 50px; height: 20px; border-radius: 999px; background: #fff; border: 1px solid #e3e6ee; box-shadow: 0 2px 6px rgba(20,22,31,.08); overflow: hidden; font-size: .62rem; font-weight: 700; color: #14161f; }
.td-zoom .td-pct span { position: absolute; left: 0; right: 0; top: 0; line-height: 18px; text-align: center; animation-duration: 6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-iteration-count: infinite; }
.td-zoom .td-pct .p1 { animation-name: tdZoomP1; }
.td-zoom .td-pct .p2 { color: #3d6fe8; transform: translateY(18px); opacity: 0; animation-name: tdZoomP2; }
@keyframes tdZoomP1 { 0%, 22% { transform: translateY(0); opacity: 1; } 34%, 74% { transform: translateY(-18px); opacity: 0; } 86%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes tdZoomP2 { 0%, 22% { transform: translateY(18px); opacity: 0; } 34%, 74% { transform: translateY(0); opacity: 1; } 86%, 100% { transform: translateY(18px); opacity: 0; } }
.td-zoom .td-fit { position: absolute; right: 14px; bottom: 12px; height: 20px; line-height: 18px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid #e3e6ee; box-shadow: 0 2px 6px rgba(20,22,31,.08); font-size: .62rem; font-weight: 700; color: #14161f; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(1); animation: tdZoomFit 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes tdZoomFit { 0%, 38% { opacity: 0; transform: translateY(6px) scale(1); background: #fff; border-color: #e3e6ee; } 44%, 66% { opacity: 1; transform: translateY(0) scale(1); background: #fff; border-color: #e3e6ee; } 68% { opacity: 1; transform: translateY(0) scale(.92); background: #eef3ff; border-color: #3d6fe8; } 74% { opacity: 1; transform: translateY(0) scale(1); background: #fff; border-color: #e3e6ee; } 86% { opacity: 1; transform: translateY(0) scale(1); background: #fff; border-color: #e3e6ee; } 92%, 100% { opacity: 0; transform: translateY(6px) scale(1); background: #fff; border-color: #e3e6ee; } }
/* demo: zoomD */
.td-zoomd .td-phone { left: 92px; top: 16px; width: 50px; height: 92px; transform-origin: 50% 50%; box-shadow: 0 8px 18px rgba(20,22,31,.18); animation: tdZoomdPhone 7s ease-in-out infinite; }
.td-zoomd .td-zl { position: absolute; left: 8px; right: 8px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); }
.td-zoomd .td-zl.l1 { top: 24px; } .td-zoomd .td-zl.l2 { top: 34px; right: 18px; }
.td-zoomd .td-zb { position: absolute; left: 8px; top: 48px; width: 34px; height: 20px; border-radius: 5px; background: rgba(255,255,255,.2); }
.td-zoomd .td-zbtn { position: absolute; top: 46px; height: 26px; width: 26px; background: #fff; border: 1px solid #e3e6ee; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: #14161f; }
.td-zoomd .td-minus { left: 196px; }
.td-zoomd .td-plus { left: 286px; animation: tdZoomdPlus 7s ease-in-out infinite; }
.td-zoomd .td-pct { position: absolute; left: 225px; top: 46px; width: 58px; height: 26px; background: #fff; border: 1px solid #e3e6ee; border-radius: 8px; font-size: .68rem; font-weight: 700; color: #14161f; }
.td-zoomd .td-pct span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.td-zoomd .td-pct .v100 { animation: tdZoomdV100 7s linear infinite; }
.td-zoomd .td-pct .v125 { animation: tdZoomdV125 7s linear infinite; }
.td-zoomd .td-pct .v150 { animation: tdZoomdV150 7s linear infinite; }
.td-zoomd .td-fit { position: absolute; left: 214px; top: 84px; width: 84px; height: 24px; border-radius: 999px; background: #fff; border: 1px solid #e3e6ee; font-size: .62rem; font-weight: 700; color: #14161f; display: flex; align-items: center; justify-content: center; animation: tdZoomdFit 7s ease-in-out infinite; }
.td-zoomd .td-finger { left: 290px; top: 50px; animation: tdZoomdF 7s ease-in-out infinite; }
@keyframes tdZoomdPhone { 0%, 16% { transform: scale(1); } 22%, 32% { transform: scale(1.15); } 38%, 64% { transform: scale(1.3); } 72%, 100% { transform: scale(1); } }
@keyframes tdZoomdV100 { 0%, 17% { opacity: 1; } 19%, 70% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes tdZoomdV125 { 0%, 17% { opacity: 0; } 19%, 33% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes tdZoomdV150 { 0%, 33% { opacity: 0; } 35%, 68% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes tdZoomdPlus { 0%, 13% { background: #fff; border-color: #e3e6ee; } 15% { background: #eef3ff; border-color: #3d6fe8; } 18%, 29% { background: #fff; border-color: #e3e6ee; } 31% { background: #eef3ff; border-color: #3d6fe8; } 34%, 100% { background: #fff; border-color: #e3e6ee; } }
@keyframes tdZoomdFit { 0%, 63% { background: #fff; color: #14161f; border-color: #e3e6ee; } 66%, 70% { background: #14161f; color: #fff; border-color: #14161f; } 76%, 100% { background: #fff; color: #14161f; border-color: #e3e6ee; } }
@keyframes tdZoomdF { 0%, 8% { opacity: 0; transform: translate(0, -6px); } 11% { opacity: 1; transform: none; } 15% { transform: scale(.8); } 18%, 28% { transform: none; } 31% { transform: scale(.8); } 34%, 56% { transform: none; } 62% { transform: translate(-43px, 36px); } 66% { transform: translate(-43px, 36px) scale(.8); } 69% { opacity: 1; transform: translate(-43px, 36px); } 76%, 100% { opacity: 0; transform: translate(-43px, 36px); } }


/* Efter publicering: "Vill du titta på alla våra födelsedagskort?" med fyra riktiga kort ur katalogfliken */
.oa-visual { padding: 30px; }
.oa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 340px; }
.oa-grid.few { grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; }
.oa-card { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(20,28,55,.35); transition: transform .2s ease, box-shadow .2s ease; animation: oaIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); border-radius: 16px !important; }
@media (hover: hover) and (pointer: fine) { .oa-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -16px rgba(20,28,55,.45); } }
.oa-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.oa-card.sk { background: linear-gradient(90deg, #f4f6fb 25%, #e8ecf5 40%, #f4f6fb 60%); background-size: 300% 100%; animation: oaSh 1.1s ease-in-out infinite; box-shadow: none; }
@keyframes oaIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes oaSh { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width: 760px) {
    .oa-visual { min-height: 0 !important; padding: 20px 16px !important; }
    .oa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: none; }
    .oa-grid.few { grid-template-columns: repeat(2, minmax(0, 110px)); }
    .oa-card { border-radius: 12px !important; }
}
@media (prefers-reduced-motion: reduce) { .oa-card, .oa-card.sk { animation: none; } }
@media (max-width: 480px) { .occ-ask .sell-actions { flex-direction: column; } .occ-ask .sell-actions .btn { width: 100%; flex: none; } }

/* Rundturen: Nästa/Tillbaka syns alltid. Rutan är en kolumn: innehållet rullar, knapparna ligger fast längst ner. */
.tour-pop.tour-pop--clean { display: flex; flex-direction: column; overflow: hidden; }
.tour-pop--clean > .tour-grab, .tour-pop--clean > .tour-progress, .tour-pop--clean > .tour-head { flex: none; }
.tour-pop--clean .tour-scroll-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tour-pop--clean .tour-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -6px; padding: 0 6px; }
.tour-pop--clean .tour-controls { flex: none; padding-top: 10px; }
.tour-pop--clean.scrolls .tour-controls { border-top: 1px solid #eceef4; margin-top: 4px; }
/* "Scrolla för att läsa mer": liten etikett bara i första steget. Glider in, pilen puttar nedåt då och då, tonas bort när man scrollar */
.tour-pop--clean .tour-more { position: absolute; left: -6px; right: -6px; bottom: 0; height: 40px; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 4px; border: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%); font: inherit; cursor: pointer; z-index: 2; animation: tourMoreIn .5s cubic-bezier(.2,.8,.2,1) .6s both; }
.tour-pop--clean .tour-more[hidden] { display: none; }
.tour-pop--clean .tour-more span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 10px; background: rgba(20,22,31,.78); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(4px); border-radius: 999px !important; }
.tour-pop--clean .tour-more svg { width: 11px; height: 11px; animation: tourNudge 2.4s ease-in-out 1.2s infinite; }
@keyframes tourMoreIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tourNudge { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(3px); } 80% { transform: translateY(0); } 90% { transform: translateY(2px); } }
.tour-pop--clean.has-more .tour-controls { border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) { .tour-pop--clean .tour-more, .tour-pop--clean .tour-more svg { animation: none; } }

/* =========================================================
   Media i studion: block som behöver en fil (bild, video, ljud),
   uppladdningsrutan vid blocket, panelens mediafält och
   "Välj bland våra bilder" (motiven från de aktiva korten).
   Rutor är raka (kantigt tema), cirklar och bilder behåller rundningen.
   ========================================================= */

/* ---- Telefonen: platshållare för bild/video utan fil ---- */
.mneed { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; aspect-ratio: 1 / 1; min-height: 118px; padding: 14px 12px; text-align: center; color: #14161f; background: rgba(255,255,255,.94); border: 2px dashed color-mix(in srgb, var(--primary) 45%, #fff); box-shadow: 0 14px 32px rgba(10,14,40,.28); font-family: var(--font-body); cursor: pointer; animation: mneedBreath 2.6s ease-in-out infinite; }
.mneed-video { aspect-ratio: 16 / 11; }
.mneed.fill { width: 100%; height: 100%; aspect-ratio: auto; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff; box-shadow: none; animation-name: mneedBreathDark; }
.mneed.fill .mneed-s { color: rgba(255,255,255,.72); }
.boxed .mneed { width: 100% !important; height: 100% !important; aspect-ratio: auto; min-height: 0; }
.mneed-ic { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 50% !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent); }
.mneed-ic svg { width: 22px; height: 22px; }
.mneed-ic::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--primary); border-radius: 50% !important; animation: mneedRing 2.2s cubic-bezier(.2,.7,.3,1) infinite; }
.mneed-t { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.mneed-s { font-size: .72rem; color: #67708a; line-height: 1.3; }
@keyframes mneedRing { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
@keyframes mneedBreath { 0%, 100% { border-color: color-mix(in srgb, var(--primary) 30%, #fff); } 50% { border-color: var(--primary); } }
@keyframes mneedBreathDark { 0%, 100% { border-color: rgba(255,255,255,.35); } 50% { border-color: rgba(255,255,255,.9); } }

/* Spel som kräver en bild: märke ovanpå spelet */
.eb-wrap.has-need > .eb { opacity: .55; }
.mneed-badge { position: absolute; left: 50%; top: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; white-space: nowrap; background: #fff; color: #14161f; border: 1px solid #e3e6ee; font-family: var(--font-body); font-size: .8rem; font-weight: 700; box-shadow: 0 12px 28px rgba(10,14,40,.3); pointer-events: none; transform: translate(-50%, -50%); animation: mneedFloat 2.6s ease-in-out infinite; }
.mneed-badge-ic { width: 26px; height: 26px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 50% !important; }
.mneed-badge-ic svg { width: 14px; height: 14px; }
@keyframes mneedFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 4px)); } }

/* Scen utan synligt innehåll där ett block saknar sin fil (jumpscare, musik) */
.stage-need { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.stage-need .mneed { width: 250px; aspect-ratio: auto; min-height: 170px; gap: 9px; }
.stage-need .mneed-ic { width: 56px; height: 56px; }
.stage-need .mneed-ic svg { width: 26px; height: 26px; }
.stage-need .mneed-t { font-size: 1.08rem; }
.stage-need .mneed-s { font-size: .82rem; }
.mp-card:focus { outline: none; }
.stage-need.selected .mneed { outline: 2px solid #fff; outline-offset: 4px; }

/* Etiketterna under telefonen: pulserande prick när blocket saknar sin fil */
.stage-chip.needs-media { gap: 7px; }
.chip-need { flex: none; width: 8px; height: 8px; background: #fff; border-radius: 50% !important; animation: chipNeed 1.8s ease-out infinite; }
@keyframes chipNeed { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }

/* ---- Rutan vid blocket: ladda upp eller välj bland våra bilder ---- */
.mprompt { position: fixed; left: 0; top: 0; z-index: 880; width: min(304px, calc(100vw - 20px)); padding: 16px 16px 14px; background: #fff; color: #14161f; border: 1px solid #e3e6ee; box-shadow: 0 24px 54px rgba(20,28,55,.26), 0 2px 6px rgba(20,28,55,.06); font-family: var(--font-body); opacity: 0; transform: translateY(8px) scale(.97); transform-origin: 50% 0; transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.mprompt.in { opacity: 1; transform: none; }
.mprompt.out { opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; }
.mprompt-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: #67708a; font: inherit; font-size: .88rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mprompt-x:hover { color: #14161f; background: #f4f6fb; } }
.mprompt-top { display: flex; align-items: center; gap: 13px; padding-right: 24px; margin-bottom: 14px; }
.mprompt-ic { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); border-radius: 50% !important; }
.mprompt-ic > svg { width: 24px; height: 24px; }
.mprompt-ic i { position: absolute; inset: 0; border: 2px solid var(--primary); border-radius: 50% !important; animation: mneedRing 2.2s cubic-bezier(.2,.7,.3,1) infinite; }
.mprompt-arrow { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--primary); color: #fff; border: 2px solid #fff; border-radius: 50% !important; animation: mfBob 1.7s ease-in-out infinite; }
.mprompt-arrow svg { width: 12px; height: 12px; }
.mprompt-tx { min-width: 0; }
.mprompt-tx b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.mprompt-tx small { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.4; color: #67708a; }
.mprompt-up { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; background: #14161f; color: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .2s; }
@media (hover: hover) and (pointer: fine) { .mprompt-up:hover { background: #000; } }
.mprompt-up svg { width: 18px; height: 18px; }
.mprompt-lbl { margin: 14px 0 8px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #67708a; }
.mprompt-arts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mprompt-art { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; overflow: hidden; background: #eef1f7; cursor: pointer; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(20,28,55,.1); transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s; animation: mpIn .38s cubic-bezier(.2,.8,.2,1) backwards; }
.mprompt-art:nth-child(2) { animation-delay: .04s; } .mprompt-art:nth-child(3) { animation-delay: .08s; } .mprompt-art:nth-child(4) { animation-delay: .12s; } .mprompt-art:nth-child(5) { animation-delay: .16s; }
@media (hover: hover) and (pointer: fine) { .mprompt-art:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(20,28,55,.2); } }
.mprompt-art:focus-visible, .mprompt-up:focus-visible, .mp-tile:focus-visible, .mf-drop:focus-visible, .mf-stock:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.mprompt-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mprompt-all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #f4f6fb; border: 1px solid #e3e6ee; box-shadow: none; color: #14161f; font: inherit; }
.mprompt-all b { font-size: .84rem; font-weight: 700; line-height: 1; }
.mprompt-all b svg { width: 16px; height: 16px; display: block; }
.mprompt-all small { font-size: .6rem; font-weight: 600; color: #67708a; line-height: 1.1; text-align: center; padding: 0 2px; }
.mprompt .prem-lock { margin: 0; }
/* Mobil och surfplatta: kortet ligger längst ner, ovanpå panelen */
.mprompt.is-sheet { top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 20px)); padding: 18px 18px 16px; transform: translateY(18px); transform-origin: 50% 100%; box-shadow: 0 -10px 40px rgba(20,28,55,.22), 0 24px 54px rgba(20,28,55,.26); }
.mprompt.is-sheet.in { transform: none; }
.mprompt.is-sheet.out { transform: translateY(14px); }
.mprompt.is-sheet .mprompt-arts { gap: 8px; }
@keyframes mpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mfBob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }

/* ---- Panelen: mediafältet ---- */
.mf { margin: 0 0 16px; }
.mf .tool-label { margin: 4px 0 8px; }
.mf-drop { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 14px; border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary) 5%, #fff); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .3s; }
.mf-over .mf-drop { background: color-mix(in srgb, var(--primary) 10%, #fff); border-color: var(--primary); }
@media (hover: hover) and (pointer: fine) { .mf-drop:hover { background: color-mix(in srgb, var(--primary) 10%, #fff); border-color: var(--primary); } }
.mf-ic { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 50% !important; }
.mf-ic svg { width: 21px; height: 21px; }
.mf-need .mf-ic svg { animation: mfBob 1.8s ease-in-out infinite; }
.mf-need .mf-ic::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--primary); border-radius: 50% !important; animation: mneedRing 2.2s cubic-bezier(.2,.7,.3,1) infinite; }
.mf-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mf-tx b { font-size: .92rem; font-weight: 700; line-height: 1.25; }
.mf-tx small { font-size: .77rem; line-height: 1.35; color: var(--ink-soft); }
.mf-attn .mf-drop { animation: mfAttn 1.1s ease-out 2; border-color: var(--primary); }
@keyframes mfAttn { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent); } }
.mf-or { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft, #8a93a8); }
.mf-or::before, .mf-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mf-stock { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
@media (hover: hover) and (pointer: fine) { .mf-stock:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } }
.mf-stack { position: relative; flex: none; width: 60px; height: 46px; }
.mf-stack img { position: absolute; top: 3px; width: 30px; height: 40px; object-fit: cover; background: #eef1f7; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(20,28,55,.22); border-radius: 4px !important; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.mf-stack img:nth-child(1) { left: 0; transform: rotate(-9deg); }
.mf-stack img:nth-child(2) { left: 15px; z-index: 1; }
.mf-stack img:nth-child(3) { left: 30px; z-index: 2; transform: rotate(9deg); }
@media (hover: hover) and (pointer: fine) { .mf-stock:hover .mf-stack img:nth-child(1) { transform: rotate(-14deg) translateX(-3px); } }
@media (hover: hover) and (pointer: fine) { .mf-stock:hover .mf-stack img:nth-child(3) { transform: rotate(14deg) translateX(3px); } }
.mf-chev { margin-left: auto; flex: none; display: grid; place-items: center; color: var(--ink-soft); }
.mf-chev svg { width: 18px; height: 18px; }
.mf-cur { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); background: var(--surface); }
.mf-prev { flex: none; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; background: #eef1f7; border-radius: 8px !important; }
.mf-prev img, .mf-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-prev-ic { color: var(--primary); display: grid; place-items: center; }
.mf-prev-ic svg { width: 24px; height: 24px; }
.mf-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mf-meta b { font-size: .86rem; font-weight: 700; }
.mf-meta small { font-size: .74rem; line-height: 1.35; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mf-acts { display: flex; flex-direction: column; gap: 5px; flex: none; }
.mf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); background: #f4f6fb; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
@media (hover: hover) and (pointer: fine) { .mf-btn:hover { border-color: var(--primary); color: var(--primary); background: #fff; } }
@media (hover: hover) and (pointer: fine) { .mf-del:hover { border-color: #d64545; color: #d64545; } }
.mf-row { display: flex; gap: 8px; }
.mf-pick { flex: 1; min-height: 40px; padding: 9px 10px; }
.mf-pick svg { width: 17px; height: 17px; flex: none; }
.mf-compact + .insp-hint, .mf-compact .insp-hint { margin-top: 8px; }
.mf-over .mf-cur, .mf-over .mf-pick { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, #fff); }
.mf .prem-lock { margin-bottom: 0; }

/* ---- Väljaren: ladda upp egen eller välj bland våra bilder ---- */
.mp-card { max-width: 660px; max-height: min(88vh, 780px); padding: 0; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.mp-ov.in .mp-card { opacity: 1; transform: none; }
.mp-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mp-h { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; }
.mp-sub { margin: 5px 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.mp-x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mp-x:hover { border-color: #14161f; } }
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 22px 22px; }
.mp-tile { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; overflow: hidden; background: #eef1f7; font: inherit; color: var(--ink); cursor: pointer; border-radius: 10px !important; box-shadow: 0 4px 12px rgba(20,28,55,.12); transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s; animation: mpIn .4s cubic-bezier(.2,.8,.2,1) backwards; }
@media (hover: hover) and (pointer: fine) { .mp-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(20,28,55,.2); } }
.mp-grid .mp-tile:nth-child(2) { animation-delay: .03s; } .mp-grid .mp-tile:nth-child(3) { animation-delay: .06s; } .mp-grid .mp-tile:nth-child(4) { animation-delay: .09s; }
.mp-grid .mp-tile:nth-child(5) { animation-delay: .12s; } .mp-grid .mp-tile:nth-child(6) { animation-delay: .15s; } .mp-grid .mp-tile:nth-child(7) { animation-delay: .18s; } .mp-grid .mp-tile:nth-child(8) { animation-delay: .21s; }
.mp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-art.on { box-shadow: 0 0 0 3px var(--primary), 0 12px 24px rgba(20,28,55,.2); }
.mp-check { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; display: none; place-items: center; background: var(--primary); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 50% !important; }
.mp-check svg { width: 14px; height: 14px; }
.mp-art.on .mp-check { display: grid; }
.mp-up { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px; text-align: center; background: color-mix(in srgb, var(--primary) 6%, #fff); border: 1.5px dashed color-mix(in srgb, var(--primary) 50%, var(--line)); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .mp-up:hover { border-color: var(--primary); box-shadow: none; } }
.mp-up-ic { width: 46px; height: 46px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 50% !important; }
.mp-up-ic svg { width: 22px; height: 22px; }
.mp-up b { font-size: .86rem; font-weight: 700; line-height: 1.2; }
.mp-up small { font-size: .74rem; color: var(--ink-soft); }
body.mp-open { overflow: hidden; }

/* Spel som kräver bild (frågan när spelet läggs till): våra bilder under knappen */
.img-ask-pick { gap: 8px; }
.img-ask-pick svg { width: 18px; height: 18px; }
.img-ask-or { margin: 16px 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.img-ask-arts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 2px; }
.img-ask-arts .mprompt-all { aspect-ratio: 3 / 4; }
.img-ask-arts .mp-tile { border-radius: 6px !important; }

@media (max-width: 1032px) {
    .mf-btn { min-height: 40px; }
    .mf-acts { flex-direction: row; }
    .mf-cur { flex-wrap: wrap; }
    .mf-cur .mf-acts { width: 100%; }
    .mf-cur .mf-acts .mf-btn { flex: 1; }
}
@media (max-width: 639px) {
    .mp-ov { align-items: flex-end; padding: 0; }
    .mp-card { max-width: none; max-height: 90vh; max-height: 90dvh; border-left: 0; border-right: 0; border-bottom: 0; }
    .mp-head { padding: 16px 16px 12px; }
    .mp-h { font-size: 1.2rem; }
    .mp-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .mneed, .mneed-ic::after, .mneed-badge, .chip-need, .mprompt-ic i, .mprompt-arrow, .mprompt-art, .mf-need .mf-ic svg, .mf-need .mf-ic::after, .mf-attn .mf-drop, .mp-tile { animation: none !important; }
    .mneed-ic::after, .mf-need .mf-ic::after, .mprompt-ic i { opacity: 0; }
    .mprompt, .mp-card, .mp-tile, .mf-stack img { transition: none !important; }
}

/* ============================================================
   Telefon (<= 640 px): studion kändes "inzoomad". Skrivbordsstora
   knappar, flikar, banner och paneler åt upp skärmen så själva
   kortet blev ett frimärke (131 px brett på en liten iPhone).
   Här krymps studions egen krom (inte kortet), telefonen räknas ut
   till att fylla ytan (sizePhones), och panelerna blir kompakta
   bottensheets. Surfplattor (641-1032) och skrivbord påverkas inte.
   Tryckytor hålls >= 40 px. Fält är 16 px så iOS inte zoomar in.
   ============================================================ */
@media (max-width: 640px) {
    /* --- Topprad: en rad, 32 px-knappar, ingen extra luft --- */
    .studio-top { padding: 5px 6px; gap: 4px; min-height: 42px; }
    .studio-top .cv-iconbtn { width: 32px; height: 32px; border-radius: 8px; }
    .studio-top .cv-iconbtn svg { width: 16px; height: 16px; }
    .studio-actions .btn { padding: 0 9px; min-height: 32px; font-size: .76rem; border-radius: 8px; }
    .st-cart { width: 32px; height: 32px; }
    .st-cart svg { width: 16px; height: 16px; }
    .st-avatar { width: 26px; height: 26px; font-size: .7rem; }
    /* Hjälpknappen ("?") flyttar upp i toppraden, efter ångra/gör om, i stället för att sväva över kortet */
    .tour-help { position: fixed; left: 112px; top: 5px; bottom: auto; width: 32px; height: 32px; border-radius: 8px;
                 font-size: .9rem; box-shadow: none; z-index: 201; }

    /* --- Premium-banner: en smal rad --- */
    .prem-banner { padding: 4px 8px; gap: 6px; font-size: .72rem; }
    .prem-banner-ic { font-size: .9rem; }
    .prem-banner-cta { padding: 5px 9px; font-size: .66rem; }
    .prem-banner-x { width: 24px; height: 24px; font-size: .7rem; }

    /* --- Scenflikar: 40 px höga chips --- */
    .scene-panel { padding: 4px 8px; gap: 5px; }
    .scene-list { gap: 5px; }
    .scene-row { min-height: 40px; padding: 4px 8px; gap: 5px; border-radius: 9px; }
    .scene-list.scroll .scene-row { width: 74px; }
    .sr-num { width: 20px; height: 20px; font-size: .72rem; border-radius: 5px; }
    .sr-name { font-size: .8rem; }
    .scene-row.locked .sr-lock svg { width: 12px; height: 12px; }
    .add-scene-btn { width: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 9px; }
    .add-scene-btn::after { font-size: 1.25rem; }

    /* --- Lägesväxlare (Alla scener / En scen): lägre rad, plats för zoomknapparna till höger --- */
    .studio-canvas { padding: 2px 6px 0; }
    .canvas-head { padding: 3px 80px 0 0; gap: 0; }
    .mode-toggle { padding: 2px; }
    .mode-btn { padding: 0 11px; min-height: 34px; font-size: .78rem; }
    /* Zoomknapparna i samma rad, uppe till höger. Procent-knappen (visa hela telefonen) bara när man zoomat. */
    .m-zoom { position: absolute; top: 4px; right: 6px; bottom: auto; z-index: 30; border-radius: 10px; box-shadow: 0 3px 10px rgba(20,28,55,.12); }
    .m-zoom button { min-width: 36px; height: 34px; font-size: 1rem; }
    .m-zoom #mz-pct { min-width: 44px; font-size: .68rem; }
    .m-zoom:not(.on) #mz-pct { display: none; }

    /* --- Kortet: telefonen får all höjd som blir över (sizePhones räknar ut den) --- */
    .canvas-strip { padding: 4px 8px 12px; gap: 10px; }
    .studio-canvas { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }   /* verktygsraden (fast i botten) är lägre nu */
    .scene-slot { gap: 6px; }

    /* --- Verktygsrad i botten: lägre, mindre ikoner/etiketter, fortfarande >= 44 px tryckyta --- */
    .canvas-foot { padding: 5px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
    .cv-tools { padding: 3px; gap: 0; border-radius: 16px; }
    .cv-tool { min-width: 56px; min-height: 46px; padding: 4px 8px; gap: 2px; border-radius: 12px; }
    .cv-ico { width: 20px; height: 20px; }
    .cv-ico svg { width: 19px; height: 19px; }
    .cv-lbl { font-size: .62rem; }
    .cv-play { width: 44px; height: 44px; }
    .cv-play svg { width: 19px; height: 19px; }
    .suggest-bar { bottom: 72px; }
    .st-ask { bottom: calc(66px + env(safe-area-inset-bottom)); }

    /* --- Redigeringspanelen (bottensheet): tätare, mindre rubriker, fält 16 px --- */
    .studio-insp { max-height: 64dvh; border-radius: 18px 18px 0 0; }
    .sheet-head { padding: 6px 10px; }
    .sheet-grip { width: 36px; height: 4px; }
    .sheet-close { top: 2px; right: 6px; font-size: .88rem; padding: 7px 8px; min-height: 36px; }
    .insp-body { padding: 0 12px 20px; }
    .insp-title { font-size: .68rem; letter-spacing: .08em; margin-bottom: 8px; }
    .insp-section { font-size: .95rem; margin: 14px 0 2px; padding-top: 10px; }
    .insp-hint { font-size: .78rem; margin: 0 0 8px; }
    .studio-insp label { font-size: .84rem; margin-bottom: 10px; }
    .slider-lbl { font-size: .8rem; margin-bottom: 8px; }
    .studio-insp .btn { min-height: 42px; padding: 0 14px; font-size: .9rem; }
    .studio-insp .btn.danger { margin-top: 10px; }
    .studio-insp select, .studio-insp input[type=text], .studio-insp input[type=number], .studio-insp input[type=url],
    .studio-insp input[type=email], .studio-insp input[type=search], .studio-insp textarea { min-height: 42px; font-size: 16px; padding: 8px 10px; }
    .studio-insp input[type=range] { margin: 8px 0 6px; }
    .exp-title { font-size: 16px; padding: 8px 10px; margin-bottom: 10px; }
    .tg-set { padding: 9px 11px; margin: 8px 0 10px; border-radius: 12px; }
    .tg-set-head { gap: 10px; }
    .tg-set-head b { font-size: .88rem; }
    .tg-set-head small { font-size: .74rem; }
    .tg-switch { width: 40px; height: 24px; }
    .tg-switch::after { width: 18px; height: 18px; }
    .tg-set-head input:checked + .tg-switch::after { transform: translateX(16px); }
    .insp-layers .ll-row { min-height: 42px; padding: 6px 9px; }
    .ll-name { font-size: .82rem; }
    .chip, .tog, .op, .rail-block, .cat-btn, .pblock-main, .scene-pick { min-height: 42px; }
    .tog { font-size: .88rem; }
    .prem-lock { padding: 9px 10px; margin-bottom: 10px; gap: 9px; }

    /* --- "Lägg till innehåll" och andra dialoger: bottensheet med maxhöjd, inte hela skärmen --- */
    .modal-ov { padding: 0; align-items: flex-end; }
    /* under rundturen: arket ligger uppe (inte nere) med full höjd, så det markerade hamnar högt och rundtursrutan får plats under utan att krympa */
    html.tour-on .modal-ov { align-items: flex-start; }
    html.tour-on .modal-card { max-height: calc(100dvh - 20px); border-radius: 0 0 18px 18px; }
    .modal-card { max-width: none; max-height: 84dvh; border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .modal-head { margin-bottom: 10px; }
    .modal-head b { font-size: 1.05rem; }
    .modal-x { width: 34px; height: 34px; }
    .pal-card { padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .pal-head b { font-size: 1.1rem; }
    .pal-sub { font-size: .76rem; }
    .pal-search { margin-bottom: 8px; }
    .pal-search input { font-size: 16px; min-height: 42px; padding: 8px 10px 8px 38px !important; }
    .pal-search svg { left: 12px; width: 16px; height: 16px; }
    .pal-chips { gap: 5px; padding: 0 0 8px; margin-bottom: 2px; }
    .pal-chip { font-size: .76rem; padding: 0 11px; min-height: 34px; }
    .pal-body { max-height: none; }
    .pal-sec-h { font-size: .66rem; margin: 4px 0 8px; }
    .pal-feats { grid-auto-columns: minmax(128px, 46%); gap: 8px; padding: 2px 2px 8px; margin-bottom: 4px; }
    .pal-feat { padding: 10px; gap: 5px; border-radius: 13px; }
    .pal-feat b { font-size: .84rem; }
    .pal-feat .pal-desc { font-size: .7rem; }
    .pal-feat .pal-ico { width: 34px; height: 34px; border-radius: 10px; }
    .pal-feat .pal-ico svg { width: 18px; height: 18px; }
    .pal-feat-badge { font-size: .56rem; top: 8px; right: 8px; padding: 2px 7px; }
    .pal-cats { gap: 7px; }
    .pal-cat { padding: 9px 10px 9px 9px; gap: 9px; border-radius: 13px; min-height: 56px; }
    .pal-cat-ico { width: 40px; height: 40px; border-radius: 11px; }
    .pal-cat-ico svg { width: 22px; height: 22px; }
    .pal-cat-tx b { font-size: .88rem; }
    .pal-cat-tx span { font-size: .72rem; }
    .pal-cat-n { font-size: .64rem; top: 8px; right: 8px; padding: 2px 7px; }
    .pal-cat-go { right: 12px; font-size: 1.1rem; }
    .pal-cat-head { margin: 0 0 8px; gap: 9px; }
    .pal-cat-head b { font-size: .98rem; }
    .pal-cat-head > span:last-child > span { font-size: .74rem; }
    .pal-list { gap: 6px; }
    .pal-item { padding: 7px 9px; gap: 9px; min-height: 48px; }
    .pal-item b { font-size: .86rem; }
    .pal-item .pal-ico { width: 34px; height: 34px; border-radius: 9px; }
    .pal-item .pal-ico svg { width: 18px; height: 18px; }
    .pal-desc { font-size: .72rem; }
    .pal-tag { font-size: .62rem; }
    .prem-tag { font-size: .62rem; padding: 2px 7px 2px 5px; }

    /* Frågorna vid start ("Vad är det här till för?", "Namnge ditt kort") */
    .preview-overlay .leave-box { padding: 18px 16px 16px; }
    .leave-box h2 { font-size: 1.2rem; }
    .leave-box p { font-size: .9rem; margin-bottom: 14px; }
    .occ-grid { gap: 8px; margin-top: 12px; }
    .occ-grid .btn { min-height: 44px; padding: 0 12px; font-size: .92rem; }
    .occ-name { font-size: 16px; padding: 11px 13px; margin: 10px 0 6px; }
    .leave-actions .btn { min-height: 44px; }

    /* Fält utanför kortet: aldrig under 16 px (annars zoomar iOS in sidan). Kortets egna fält (i .stage) rörs inte. */
    .studio-page :is(.studio-insp, .modal-card, .preview-overlay, .scene-panel, .sell-box, .mp-card)
        :is(input[type=text], input[type=number], input[type=search], input[type=email], input[type=url], input[type=tel], select, textarea) { font-size: 16px; }

    /* Snabbmeny vid långtryck på ett block */
    .ctx-item { padding: 10px 12px; font-size: .88rem; min-height: 40px; }
}


/* =========================================================
   Lägg till innehåll: Premium-innehåll är guldrutor (ingen textetikett), en liten stjärna i hörnet
   ========================================================= */
.pal-item.prem, .pal-feat.prem { border: 1px solid #d9b262; background: linear-gradient(135deg, #fffaf0 0%, #f9edcb 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
@media (hover: hover) and (pointer: fine) { .pal-item.prem:hover, .pal-feat.prem:hover { border-color: #b8893a; background: linear-gradient(135deg, #fff6e0 0%, #f5e3b2 100%); } }
.pal-item.prem b, .pal-feat.prem b { color: #33260a; }
.pal-item.prem .pal-desc, .pal-feat.prem .pal-desc { color: #7b6635; }
.pal-item.prem .pal-ico, .pal-feat.prem .pal-ico { background: linear-gradient(135deg, #f1dc9e 0%, #d9b262 100%); color: #5a3f0c; }
.pal-item.prem .pal-tag { background: rgba(184,137,58,.16); color: #6b4f14; }
@media (hover: hover) and (pointer: fine) { .pal-item.prem.off:hover { border-color: #d9b262; } }
.pal-crown { flex: none; align-self: flex-start; width: 14px; height: 14px; margin: 2px 0 0 6px; background: #b8893a;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/></svg>") center / contain no-repeat; }

/* ===== Admin: mallraden (mallens språk svenska/engelska, titlar, texter kvar på svenska) =====
   Desktop: en rad som bryts vid behov. Mobil (<= 1032px): titlarna och "Uppdatera engelska" bakom knappen Titlar. */
.tpl-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 7px 16px; background: #f4f6fc; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--ink); position: relative; z-index: 150; }
.tpl-bar[hidden] { display: none; }
.tpl-bar.tb-en { background: #eef4ff; }
.tb-kick { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #67708a; }
.tb-seg { display: inline-flex; border: 1px solid #c9d2e8; background: #fff; }
.tb-seg button { position: relative; border: none; background: none; padding: 6px 13px; font: inherit; font-weight: 700; color: #4a5372; cursor: pointer; }
.tb-seg button + button { border-left: 1px solid #c9d2e8; }
.tb-seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.tb-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: #f08a24; }
.tb-dot[hidden] { display: none; }
.tb-f { display: inline-flex; align-items: stretch; flex: 0 1 190px; min-width: 120px; color: #67708a; font-weight: 700; }
.tb-f span { display: inline-flex; align-items: center; padding: 0 7px; background: #e3e8f5; border: 1px solid #c9d2e8; border-right: none; font-size: .68rem; letter-spacing: .06em; white-space: nowrap; }
.tb-f input { flex: 1 1 auto; width: 100%; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid #c9d2e8; background: #fff; font: inherit; font-weight: 500; color: var(--ink); }
.tb-f input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.tb-status { flex: 1 1 300px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.tb-ok { color: #1f7a45; font-weight: 600; }
.tb-warn { color: #a5551c; font-weight: 600; white-space: nowrap; }
.tb-muted { color: #67708a; }
.tb-cur { min-width: 40px; flex: 0 1 auto; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; background: #fff; border: 1px dashed #e0b48c; color: #6b4a2b; }
.tb-next, .tb-keep, .tb-upd, .tb-more, .tb-save { flex: none; height: 30px; padding: 0 11px; border: 1px solid #c9d2e8; background: #fff; font: inherit; font-weight: 700; color: #2c3550; cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .tb-next:hover, .tb-keep:hover, .tb-upd:hover, .tb-more:hover { border-color: var(--primary); color: var(--primary); } }
.tb-save { background: #14161f; border-color: #14161f; color: #fff; }
@media (hover: hover) and (pointer: fine) { .tb-save:hover { background: #000; } }
.tb-save:disabled, .tb-upd:disabled { opacity: .6; cursor: default; }
.tb-upd[hidden] { display: none; }
.tb-more { display: none; }
@media (max-width: 1439px) { .tb-kick { display: none; } }
@media (max-width: 1032px) {
    .tpl-bar { gap: 6px 8px; padding: 6px 10px; }
    .tb-more { display: inline-block; order: 5; margin-left: auto; }
    .tb-save { order: 6; }
    .tb-status { order: 7; flex-basis: 100%; }
    .tb-f, .tb-upd { display: none; order: 8; }
    .tpl-bar.tb-open .tb-f { display: flex; flex: 1 1 220px; min-width: 0; }
    .tpl-bar.tb-open .tb-f input { flex: 1 1 auto; min-width: 0; width: auto; height: 34px; font-size: 16px; }   /* 16px: ingen zoom på iPhone */
    .tpl-bar.tb-open .tb-upd { display: inline-block; flex-basis: 100%; height: 34px; }
    .tpl-bar.tb-open .tb-upd[hidden] { display: none; }
    .tb-more[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
}
@media (max-width: 640px) {
    .tpl-bar { font-size: .76rem; padding: 5px 8px; }
    .tb-kick { display: none; }
    .tb-seg button { padding: 5px 10px; }
    .tb-next, .tb-keep, .tb-more, .tb-save { height: 28px; padding: 0 9px; }
    .tb-status { flex-wrap: wrap; row-gap: 4px; }
    .tb-cur { max-width: 100%; flex: 1 1 100%; order: 3; }
    body.sheet-open .tpl-bar { display: none; }
}
.tb-upd, .tb-upd[hidden] ~ .tb-save { margin-left: auto; }   /* bryts raden står knapparna till höger */
@media (max-width: 1032px) { .tpl-bar .tb-upd, .tpl-bar .tb-upd[hidden] ~ .tb-save { margin-left: 0; } }
.tpl-bar .tb-f { margin: 0; font-size: inherit; }   /* app.css ger alla label marginal och egen storlek */

/* ---------- Flöden: förgreningar i studion (scenremsan, inspektorn, översikten) ---------- */
.lane-a { --lane: #3d6fe8; } .lane-b { --lane: #e0466e; } .lane-c { --lane: #12a06f; } .lane-d { --lane: #d97706; } .lane-e, .lane-f { --lane: #7c3aed; }
.fm-ico { width: 15px; height: 15px; flex: none; }
.flow-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--lane, #1c2230); vertical-align: 1px; white-space: nowrap; }
.flow-tag.merge { background: #1c2230; }
.scene-slot.in-lane .frame-wrap::after { content: ""; position: absolute; left: 22%; right: 22%; top: -8px; height: 4px; border-radius: 4px; background: var(--lane); }
.scene-arrow.cut { opacity: .22; }
.scene-arrow.cut svg path { stroke-dasharray: 2.5 3.5; }
/* Kortet under telefonen: var scenen delas och vart grenarna går */
.flow-split { display: flex; flex-direction: column; gap: 4px; max-width: 100%; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff);
    box-shadow: 0 6px 18px rgba(20,22,31,.08); font: inherit; font-size: .74rem; color: var(--ink); cursor: pointer; text-align: left; }
@media (hover: hover) and (pointer: fine) { .flow-split:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); } }
.fs-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .72rem; }
.fs-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.fs-lane { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--lane); color: #fff; font-size: .62rem; font-weight: 800; flex: none; }
.fs-why { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; max-width: 10em; }
.fs-go { width: 13px; height: 13px; flex: none; color: var(--ink-soft); }
.fs-to { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.flow-split.skip .fs-head { color: var(--ink-soft); }
/* Bilden i inspektorn: delas uppe, grenarna, möts nere */
.flow-mini { margin: 6px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2, #f6f7fb); }
.fm-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .8rem; margin-bottom: 10px; }
.fm-src, .fm-meet { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fm-src small, .fm-meet small { font-size: .7rem; color: var(--ink-soft); text-align: center; line-height: 1.35; }
.fm-node { display: inline-block; max-width: 100%; padding: 5px 10px; border-radius: 9px; background: var(--surface, #fff); border: 1px solid var(--line); font-size: .74rem; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.fm-node.src, .fm-node.meet { background: #1c2230; color: #fff; border-color: #1c2230; }
.fm-node.me { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }
.fm-lanes { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; padding: 16px 0; }
.fm-lanes.n1 { --n: 1; } .fm-lanes.n2 { --n: 2; } .fm-lanes.n3 { --n: 3; }
.fm-lanes::before, .fm-lanes::after { content: ""; position: absolute; left: 25%; right: 25%; height: 9px; border: 2px solid #c3c9d6; pointer-events: none; }
.fm-lanes::before { top: 4px; border-bottom: none; border-radius: 9px 9px 0 0; }
.fm-lanes::after { bottom: 4px; border-top: none; border-radius: 0 0 9px 9px; }
.fm-lanes.n1::before, .fm-lanes.n1::after { left: 50%; right: auto; width: 0; border-radius: 0; }
.fm-lanes.n3::before, .fm-lanes.n3::after { left: 16.7%; right: 16.7%; }
.fm-lane { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 8px 6px; border-radius: 12px;
    background: color-mix(in srgb, var(--lane) 8%, var(--surface, #fff)); border: 1.5px solid color-mix(in srgb, var(--lane) 45%, transparent); }
.fm-why { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; font-size: .7rem; font-weight: 700; color: var(--lane); text-align: center; line-height: 1.25; }
.fm-why b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--lane); color: #fff; font-size: .62rem; flex: none; }
.fm-chain { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.fm-more, .fm-end { font-size: .68rem; font-weight: 700; color: var(--ink-soft); }
/* Erbjudandet: dela upp scenen i två flöden */
.flow-offer { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; padding: 10px 12px; border: 1px dashed #c3c9d6; border-radius: 14px; }
.fo-pic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.fo-pic .fm-ico { width: 20px; height: 20px; }
.fo-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fo-tx b { font-size: .82rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fo-tx small { font-size: .72rem; color: var(--ink-soft); line-height: 1.35; }
.flow-offer .btn { flex: none; }
/* Scenlistan och översikten */
.sr-flow { flex: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; font-size: .62rem; font-weight: 800; color: #fff; background: var(--lane, #1c2230); }
.sr-flow .fm-ico { width: 12px; height: 12px; }
.sr-flow.split { background: var(--primary); }
.ov-branch { flex-wrap: wrap; }
.ov-lane { display: inline-flex; align-items: center; gap: 4px; color: var(--lane); }
.ov-lane b { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--lane); color: #fff; font-size: .58rem; }
.ov-branch .fs-go, .ov-flow .fs-go { width: 12px; height: 12px; margin: 0 2px; vertical-align: -2px; color: currentColor; }
.ov-top .flow-tag { margin-left: 4px; }
/* Surfplatta och mobil: en telefon i taget, kortet ligger som en rad överst på telefonen (hela bilden finns i redigeringen) */
@media (max-width: 1032px) {
    .scene-slot { position: relative; }
    .scene-slot > .flow-split { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: 6; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: 4px 8px; width: max-content; max-width: calc(100% - 36px); padding: 6px 10px; border-radius: 999px; font-size: .7rem; box-shadow: 0 6px 16px rgba(20,22,31,.18); }
    .scene-slot > .flow-split .fs-why, .scene-slot > .flow-split .fs-go { display: none; }
    .scene-slot > .flow-split .fs-row { gap: 4px; }
    .flow-tag { font-size: .62rem; padding: 1px 6px; }
}
@media (max-width: 420px) {
    .fm-lanes { gap: 6px; }
    .fm-node { padding: 4px 8px; font-size: .7rem; }
    .flow-offer { flex-wrap: wrap; }
    .flow-offer .btn { width: 100%; }
}
/* Sifferfält i redigeringen ser ut som textfälten (de var tidigare ostylade och smala på dator) */
.studio-insp input[type=number] { width: 100%; margin-top: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; color: var(--ink);
    font-family: inherit; font-size: 1rem; font-weight: 400; transition: border-color .18s, box-shadow .18s; }
.studio-insp input[type=number]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
/* En scen i taget: märket för grenen ligger överst på telefonen */
.slot-flow { display: none; }
.canvas-strip.single .scene-slot { position: relative; }
.canvas-strip.single .slot-flow { display: flex; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 6; pointer-events: none; }
.canvas-strip.single .slot-flow .flow-tag { margin: 0; font-size: .7rem; padding: 3px 10px; box-shadow: 0 4px 12px rgba(20,22,31,.18); }
@media (max-width: 1032px) { .canvas-strip.single .slot-flow ~ .flow-split, .scene-slot > .slot-flow + .flow-split { top: 50px; } }
/* Mobilens scenflikar: ingen extra bricka (namnet ska synas), numret får grenens färg i stället */
@media (max-width: 1032px) {
    .scene-row .sr-flow { display: none; }
    .scene-row.fl-lane .sr-num { background: var(--lane); color: #fff; border-radius: 6px; }
    .scene-row.fl-split .sr-num, .scene-row.fl-merge .sr-num { background: #1c2230; color: #fff; border-radius: 6px; }
}
/* Premium tydligt i flöden och spelinställningar (för den som inte har Premium) */
.prem-hint { align-items: center; }
.prem-hint .ph-more { margin-left: auto; flex: none; font-style: normal; font-size: .74rem; font-weight: 800; color: var(--gold-ink, #3a2b00); background: var(--gold-grad); padding: 5px 10px; border-radius: 999px; }
.flow-offer.is-prem { border: 1.5px solid var(--gold); border-style: solid; background: linear-gradient(90deg, rgba(246,211,101,.16), rgba(246,211,101,.03)); }
.flow-offer.is-prem .fo-pic { background: var(--gold-grad); color: var(--gold-ink, #3a2b00); }
.fo-prem { color: var(--gold-ink, #3a2b00) !important; font-weight: 600; }
.fo-prem a { color: inherit; text-decoration: underline; font-weight: 800; }
.flow-mini-host .prem-hint { margin-top: -4px; }

/* Gratis eller Premium? på telefon: rutan får aldrig bli högre än skärmen utan att gå att scrolla, och "Fortsätt gratis" ska alltid gå att nå */
.pc-ov { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; justify-content: flex-start; }
.pc-ov > .prem-compare { margin: auto 0; flex: none; }   /* mitt på när den ryms, annars från toppen och scrollbar */
@media (max-width: 640px) {
    .pc-ov { padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
    .prem-compare .pc-free { display: block; width: 100%; min-height: 44px; margin-top: 8px; }
}
@media (max-width: 640px) and (max-height: 800px) {
    .prem-compare { padding: 18px 14px 10px !important; }
    .prem-compare h2 { font-size: 1.3rem; margin-bottom: 4px; }
    .prem-compare .pc-sub { display: none; }
    .pc-wrap { margin-bottom: 12px; }
    .pc-table td { padding: 6px 5px; font-size: .78rem; }
    .pc-table th { padding-top: 6px; padding-bottom: 6px; }
}
/* Premium-rutan (Lås upp allt): scrollbar på låga skärmar så krysset och Inte nu alltid nås */
.prem-modal { overflow-y: auto; }
@media (max-height: 700px) { .prem-modal { align-items: flex-start; } .prem-box { margin: auto 0; } }

/* Kontomenyn ligger i body (toppraden klipper på mobil) och placeras under profilbilden */
.st-menu.st-menu-float { position: fixed; top: 56px; right: 8px; z-index: 4500; }
/* Översikt-knappen: ikon på smala telefoner, text annars. Profilbilden ska alltid rymmas och gå att trycka på. */
#btn-overview { display: inline-flex; align-items: center; gap: 6px; }
#btn-overview .ov-ico { display: none; width: 17px; height: 17px; flex: none; }
@media (max-width: 480px) {
    #btn-overview { padding: 7px 8px; }
    #btn-overview .ov-ico { display: block; }
    #btn-overview .ov-lbl { display: none; }
    .studio-top { padding-right: 8px; }
    .st-account-wrap { margin-left: 2px; flex: none; }
}

/* Hjälpknappen i toppraden på telefon: vanlig knapp i raden (inte fast läge), så den aldrig överlappar Problem-knappen */
.tour-help.in-top { position: static; flex: none; width: 32px; height: 32px; border-radius: 8px; font-size: .9rem; box-shadow: none; left: auto; top: auto; bottom: auto; }
/* Smala iPhones (<= 400 px): lite tätare topprad så profilbilden alltid ryms inom skärmen */
@media (max-width: 400px) {
    .studio-top { gap: 3px; padding-left: 5px; padding-right: 6px; }
    .studio-top .crumbs, .studio-actions { gap: 3px; }
    .studio-top .cv-iconbtn, .tour-help.in-top, .st-cart { width: 30px; height: 30px; }
    #btn-problems { padding: 0 6px; gap: 2px; }
    #btn-overview { padding: 0 7px; }
    #btn-publish { padding: 0 8px; }
    .st-account-wrap { margin-left: 0; }
}

/* "Två olika flöden": stående kort högt upp i scenens inställningar, knappen i full bredd */
.flow-offer { display: block; margin: 8px 0 16px; padding: 14px; border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, #fff), #fff); }
.flow-offer.is-prem { border: 1.5px solid var(--gold); background: linear-gradient(180deg, rgba(246,211,101,.20), rgba(246,211,101,.04)); }
.flow-offer .fo-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow-offer .fo-top b { font-size: .98rem; }
.flow-offer .fo-top .prem-tag { margin-left: 0; }
.flow-offer .fo-tx { margin: 8px 0 12px; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }
.flow-offer .fo-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; font-weight: 800;
    background: var(--ink, #14161f); color: #fff; border: 0; }
.flow-offer.is-prem .fo-btn { background: linear-gradient(180deg, #f1d58f, #d9a948); color: #2a1f05; }
.flow-offer .fo-btn .fm-ico { width: 17px; height: 17px; }
.flow-offer .fo-prem { margin: 8px 0 0; font-size: .74rem; color: var(--gold-ink, #3a2b00); text-align: center; }
.flow-offer .fo-prem a { color: inherit; font-weight: 800; text-decoration: underline; }
/* Dator: kontoknappen längst upp till höger (åtgärderna fyller raden, kontot skjuts till kanten) */
@media (min-width: 1033px) {
    .studio-actions { flex: 1 1 auto; min-width: 0; }
    .studio-actions .st-account-wrap, .studio-actions .st-signup { margin-left: auto; }
}

/* Kontomenyn i studion: hela menyn (som på sajten), ikoner, scroll om skärmen är låg */
.st-menu { min-width: 240px; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
.st-menu-item { display: flex !important; align-items: center; gap: 10px; }
.st-menu-item svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.st-menu-item span { flex: 1; min-width: 0; }
.st-menu-item.out { color: #b3261e; }
.st-menu-badge { font-style: normal; font-size: .7rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #e9f0fe; color: #3d6fe8; }
.st-menu-sep { height: 1px; margin: 4px 6px; background: var(--line, #eee); }

/* Dela-knapparna i rutan efter publicering (Premium / upplåst länk) */
.pub2-share { display: flex; gap: 8px; margin: 12px 0 4px; }
.pub2-sh { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pub2-sh:hover { border-color: var(--ink); } }
.pub2-sh svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 380px) { .pub2-sh span { font-size: .8rem; } .pub2-share { gap: 6px; } }

/* Studions meddelanderuta (ersätter webbläsarens alert) */
.st-dlg .st-dlg-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50% !important; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.st-dlg .st-dlg-ic svg { width: 26px; height: 26px; }
.st-dlg p { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.55; }
.st-dlg .tg-ask-b { display: flex; flex-direction: column; gap: 8px; }
.st-dlg .tg-ask-b .btn { width: 100%; justify-content: center; text-align: center; text-decoration: none; }
.st-dlg .tg-ask-h + .tg-ask-b { margin-top: 18px; }   /* rutor med bara rubrik + knappar */

/* Ta bort scen på telefon/surfplatta: papperskorgen bredvid den valda scenen i scenraden */
.sr-del-m { display: none; }
@media (max-width: 1032px) {
    .scene-list .sr-del-m { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; align-self: center;
        margin-left: -2px; padding: 0; border: 1px solid #f3c6d2; border-radius: 50% !important; background: #fff5f8; color: #e0466e; cursor: pointer; }
    .scene-list .sr-del-m svg { width: 18px; height: 18px; }
    .scene-list .sr-del-m:active { background: #fde3eb; }
}

/* ===== Skaffa Premium: "Ditt kort är sparat". Kortet glider ner i Mina kort-facket och en bock poppar upp. ===== */
.ps-box { max-width: 400px; text-align: center; padding: 22px 24px 20px; }
.ps-ov .ps-box { transform: translateY(14px) scale(.98); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.ps-ov.on .ps-box { transform: none; opacity: 1; }
.ps-anim { position: relative; width: 170px; height: 150px; margin: 0 auto 10px; }
.ps-tray-back { position: absolute; left: 22px; right: 22px; bottom: 30px; height: 46px; border-radius: 14px 14px 6px 6px; background: color-mix(in srgb, var(--primary) 22%, #fff); }
.ps-card { position: absolute; left: 50%; top: 0; width: 58px; height: 96px; margin-left: -29px; border-radius: 11px; background: linear-gradient(160deg, #3d86ff, #0a6cf5);
           box-shadow: 0 10px 24px -8px rgba(10,40,120,.45), inset 0 0 0 2.5px #14161f; opacity: 0; transform: translateY(-34px) rotate(-8deg) scale(.9); }
.ps-card i { position: absolute; left: 12px; right: 12px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); }
.ps-card i:first-child { top: 36px; } .ps-card i:last-child { top: 47px; right: 22px; opacity: .7; }
.ps-ov.on .ps-card { animation: psDrop 1.05s cubic-bezier(.4,0,.2,1) .15s both; }
@keyframes psDrop { 0% { opacity: 0; transform: translateY(-34px) rotate(-8deg) scale(.9); } 30% { opacity: 1; transform: translateY(-6px) rotate(-3deg) scale(1); }
                    100% { opacity: 1; transform: translateY(26px) rotate(0) scale(.94); } }
.ps-tray { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 58px; border-radius: 10px 10px 16px 16px; background: var(--primary);
           box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--primary) 80%, transparent); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; box-sizing: border-box; }
.ps-tray span { color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .01em; }
.ps-ov.on .ps-tray { animation: psBump .35s cubic-bezier(.2,.8,.2,1) 1.05s both; }
@keyframes psBump { 0% { transform: none; } 40% { transform: translateY(4px) scaleX(1.03); } 100% { transform: none; } }
.ps-check { position: absolute; right: 2px; top: 34px; width: 34px; height: 34px; border-radius: 50%; background: #12a06f; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 16px -6px rgba(18,160,111,.7); transform: scale(0); }
.ps-check svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.ps-ov.on .ps-check { animation: psPop .4s cubic-bezier(.2,1.4,.4,1) 1.2s both; }
.ps-ov.on .ps-check svg { animation: psTick .35s ease 1.42s both; }
@keyframes psPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes psTick { to { stroke-dashoffset: 0; } }
.ps-h { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin: 0 0 6px; }
.ps-box p { margin: 0 0 16px; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.ps-ov.on .ps-h, .ps-ov.on .ps-box p { animation: psTxt .4s ease .5s both; }
@keyframes psTxt { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ps-ov .ps-box, .ps-ov.on .ps-card, .ps-ov.on .ps-tray, .ps-ov.on .ps-check, .ps-ov.on .ps-check svg, .ps-ov.on .ps-h, .ps-ov.on .ps-box p { animation: none; transition: none; opacity: 1; }
  .ps-ov .ps-card { opacity: 1; transform: translateY(26px) scale(.94); } .ps-ov .ps-check { transform: none; } .ps-ov .ps-check svg { stroke-dashoffset: 0; }
}

/* ---------- Sociala spel: gänget röstar, staplar växer, vinnaren får kronan ---------- */
.sg { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sg-dots { display: flex; justify-content: center; gap: 5px; }
.sg-dots i { width: 6px; height: 6px; border-radius: 999px !important; background: rgba(255,255,255,.28); transition: width .3s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.sg-dots i.done { background: rgba(255,255,255,.7); }
.sg-dots i.on { width: 18px; background: #fff; }
.sg-card { animation: sgIn .42s cubic-bezier(.2,.8,.2,1) both; }
.sg-card.out { animation: sgOut .24s ease forwards; }
@keyframes sgIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sgOut { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
.sg-q { text-align: center; margin: 0 0 12px; min-height: 0; }
.sg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sg-vs .sg-opts { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.sg-opt { position: relative; overflow: hidden; min-width: 0; padding: 16px 8px 12px; font-size: .95rem; line-height: 1.2; word-break: break-word;
          animation: sgOpt .4s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; transition: transform .15s ease, opacity .3s ease, box-shadow .25s ease, background .25s ease; }
.sg-opt:disabled { opacity: 1; cursor: default; }
@keyframes sgOpt { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.sg-bar { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: rgba(255,255,255,.22); transition: transform .65s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.sg-vs .sg-bar { transform-origin: bottom; }
.sg-tx { position: relative; }
.sg-n { position: absolute; right: 7px; top: 5px; font-size: .68rem; font-weight: 800; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
.sg-vs .sg-n { left: 0; right: 0; top: auto; bottom: 8px; text-align: center; font-size: 1.15rem; }
.sg-ok { position: absolute; left: 6px; top: 5px; width: 14px; height: 14px; color: #ffd43b; opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.3,1.6,.5,1); }
.sg-ok svg, .sg-crown svg { display: block; width: 100%; height: 100%; }
.sg-opt.mine { box-shadow: inset 0 0 0 2px #ffd43b; }
.sg-opt.mine .sg-ok { opacity: 1; transform: none; }
.sg-opt.tap { animation: sgTap .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes sgTap { 40% { transform: scale(.94); } }
.sg-crown { position: absolute; left: 50%; top: 2px; width: 20px; height: 14px; margin-left: -10px; opacity: 0; transform: translateY(-12px) scale(.6); pointer-events: none; }
.sg-opt.win { background: rgba(255,212,59,.22); box-shadow: 0 0 0 2px #ffd43b, 0 8px 22px rgba(255,212,59,.25); animation: sgWin .55s cubic-bezier(.3,1.5,.5,1); }
.sg-opt.win .sg-crown { animation: sgCrown .55s cubic-bezier(.3,1.6,.5,1) .12s forwards; }
.sg-opt.lose { opacity: .45; transform: scale(.97); }
@keyframes sgWin { 45% { transform: scale(1.06); } }
@keyframes sgCrown { to { opacity: 1; transform: none; } }
.sg-tf .sg-crown, .sg-vs .sg-crown { display: none; }
.sg-tf .mg-yes .sg-bar { background: rgba(47,191,113,.5); }
.sg-tf .mg-no .sg-bar { background: rgba(229,72,77,.5); }
.sg-tf .sg-opt.win { background: rgba(47,191,113,.3); box-shadow: 0 0 0 2px #2fbf71, 0 8px 22px rgba(47,191,113,.3); }
.sg-vs .sg-opt { min-height: 116px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.sg-vs .sg-opt:first-child { background: rgba(255,107,139,.28); }
.sg-vs .sg-opt:last-child { background: rgba(77,171,247,.28); }
.sg-vs .sg-opt:first-child .sg-bar { background: rgba(255,107,139,.45); }
.sg-vs .sg-opt:last-child .sg-bar { background: rgba(77,171,247,.45); }
.sg-vs-x, .sg-vs .sg-vs { align-self: center; width: 42px; height: 42px; border-radius: 50% !important; display: grid; place-items: center; background: #fff; color: #14161f;
         font-size: .7rem; font-weight: 800; box-shadow: 0 6px 16px rgba(0,0,0,.25); animation: sgVs .5s cubic-bezier(.3,1.6,.5,1) .15s both; }
@keyframes sgVs { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
.sg-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
.sg-status { min-height: 1.2em; font-size: .8rem; color: rgba(255,255,255,.82); text-align: center; display: flex; align-items: center; gap: 6px; }
.sg-pulse { width: 7px; height: 7px; border-radius: 50% !important; background: #2fbf71; box-shadow: 0 0 0 0 rgba(47,191,113,.6); animation: sgPulse 1.6s ease-out infinite; }
@keyframes sgPulse { 70% { box-shadow: 0 0 0 7px rgba(47,191,113,0); } 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); } }
.sg-verdict { display: inline-block; padding: 5px 12px; border-radius: 999px !important; background: rgba(255,255,255,.16); font-weight: 800; animation: sgPop .4s cubic-bezier(.3,1.6,.5,1); }
.sg-verdict.ok { background: rgba(47,191,113,.45); }
.sg-verdict.no { background: rgba(229,72,77,.45); }
@keyframes sgPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.sg-go { padding: 10px 22px; font-size: .88rem; }
.sg-go[hidden] { display: none; }
.sg-go.wait { background: rgba(255,255,255,.16); color: rgba(255,255,255,.82); cursor: default; box-shadow: none; }
.sg-wait { text-align: center; opacity: .8; padding: 20px 0; }
.sg-end-h { text-align: center; font-weight: 800; font-size: 1.05rem; margin: 0 0 10px; animation: sgPop .45s cubic-bezier(.3,1.6,.5,1); }
.sg-sum { display: flex; flex-direction: column; gap: 6px; }
.sg-sum-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px !important; background: rgba(255,255,255,.1); font-size: .82rem; animation: sgIn .4s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; }
.sg-sum-row small { color: rgba(255,255,255,.75); text-align: left; }
.sg-sum-row b { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sg-sum-row em { font-style: normal; font-size: .72rem; opacity: .75; }
.sg-mini-crown { width: 14px; height: 10px; display: inline-block; }
.sg-mini-crown svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .sg-card, .sg-card.out, .sg-opt, .sg-opt.win, .sg-opt.tap, .sg-vs .sg-vs, .sg-verdict, .sg-sum-row, .sg-end-h, .sg-pulse { animation: none !important; } .sg-opt.win .sg-crown { opacity: 1; transform: none; } }

/* Studion: listredigerare för frågor, påståenden, val och namn */
.mg-ed { display: block; margin-bottom: 16px; }
.mg-ed-l { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.mg-ed-pre { font-size: .76rem; font-weight: 700; color: var(--primary); margin: 0 0 6px 24px; }
.mg-rows { display: flex; flex-direction: column; gap: 6px; }
.mg-row-ed { display: flex; align-items: center; gap: 6px; animation: sgOpt .25s cubic-bezier(.2,.8,.2,1) both; }
.mg-row-ed input.sm { flex: 1 1 0; min-width: 0; }
.mg-row-n { flex: 0 0 18px; text-align: right; font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.mg-row-tfrows .mg-row-n, .mg-row-pairrows .mg-row-n { display: none; }
.mg-row-or { flex: none; font-size: .7rem; color: var(--ink-soft); }
.mg-tf { flex: none; min-width: 48px; padding: 6px 7px; border: 0; border-radius: 999px !important; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, transform .1s ease; }
.mg-tf:active { transform: scale(.94); }
.mg-tf.yes { background: #e3f7ea; color: #1f7a44; }
.mg-tf.no { background: #fde8e8; color: #b42318; }
.mg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: text; }
.mg-chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; border-radius: 999px !important; background: #eef2ff; color: #2b3a8f; font-size: .8rem; font-weight: 600; animation: sgPop .2s ease both; }
.mg-chip-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50% !important; background: none; color: inherit; font-size: .66rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mg-chip-x:hover { background: rgba(43,58,143,.12); } }
.mg-chip-in { flex: 1 1 90px; min-width: 80px; padding: 4px !important; border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important; font: inherit; font-size: .86rem; }
.mg-ed-empty { margin: 6px 0 0; font-size: .74rem; color: var(--ink-soft); }
.mg-ed-empty[hidden] { display: none; }

/* Följarens röstpanel: glider upp, val per spel */
.tg-vote { opacity: 0; transform: translate(-50%, 18px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.tg-vote.on { opacity: 1; transform: translate(-50%, 0); }
.tg-vote-opt { animation: sgOpt .35s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; transition: transform .12s ease; }
.tg-vote-opt:active { transform: scale(.97); }
.tg-vote-who .tg-vote-opts { display: grid; grid-template-columns: 1fr 1fr; }
.tg-vote-who .tg-vote-opt, .tg-vote-tf .tg-vote-opt, .tg-vote-vs .tg-vote-opt { text-align: center; }
.tg-vote-tf .tg-vote-opts, .tg-vote-vs .tg-vote-opts { flex-direction: row; }
.tg-vote-tf .tg-vote-opt, .tg-vote-vs .tg-vote-opt { flex: 1; }
.tg-vote-tf .tg-vote-opt:first-child { background: #e3f7ea; border-color: #b9e7c8; color: #1f7a44; }
.tg-vote-tf .tg-vote-opt:last-child { background: #fde8e8; border-color: #f6c4c4; color: #b42318; }
.tg-vote-vs .tg-vote-opt { padding: 22px 10px; font-size: 1.05rem; }
.tg-vote-vs .tg-vote-opt:first-child { background: #ffe8ee; border-color: #ffc6d3; }
.tg-vote-vs .tg-vote-opt:last-child { background: #e6f3ff; border-color: #bfdcfb; }
.tg-voted { display: flex; align-items: center; gap: 6px; animation: sgPop .3s cubic-bezier(.3,1.6,.5,1); }
.tg-voted-ok { width: 8px; height: 8px; border-radius: 50% !important; background: #2fbf71; }
.tg-vote-done { display: none; }
.tg-vote.closed .tg-vote-opt { display: none; }
.tg-vote.closed .tg-vote-done { display: block; margin-top: 6px; padding: 10px 12px; border-radius: 12px !important; background: #f1f3f9; color: #3b3f4c; font-weight: 600; text-align: center; animation: sgPop .3s ease; }
@media (prefers-reduced-motion: reduce) { .tg-vote, .tg-vote-opt, .tg-voted, .mg-row-ed, .mg-chip { animation: none !important; transition: none !important; } }

/* Ljudeffekt per scen (inspektorn) */
.sfx-box { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.sfx-h { font-weight: 600; font-size: .92rem; }
.sfx-list { display: flex; flex-direction: column; gap: 6px; }
.sfx-row { display: flex; align-items: center; gap: 6px; }
.sfx-pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; font-size: .86rem; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.sfx-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfx-dot { flex: none; width: 14px; height: 14px; border-radius: 50% !important; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s ease; }
.sfx-row.on .sfx-pick { border-color: var(--primary); background: rgba(61,111,232,.06); }
.sfx-row.on .sfx-dot { box-shadow: inset 0 0 0 4px var(--primary); }
.sfx-play { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50% !important; background: var(--surface); color: inherit; cursor: pointer; font-size: .8rem; }
.sfx-play svg { width: 15px; height: 15px; }
.sfx-play.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.sfx-up { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--primary); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.sfx-up svg { width: 16px; height: 16px; flex: none; }
.mf-own-lock { position: relative; }
/* "Vill du titta på alla våra kort?": knapparna väntar tills korten har laddats */
.sell-actions.oa-wait .btn { opacity: .45; pointer-events: none; }
.sell-actions .btn { transition: opacity .3s ease; }

/* Inga stjärnor: Premium-märket är en ren guldetikett (bocken finns kvar för det som ingår i ditt Premium) */
.prem-tag:not(.has)::before { display: none; }
.prem-tag:not(.has) { padding: 3px 8px; }
.pal-crown { display: none !important; }


/* Surfplatta på tvären och små datorer (1033 till 1439 px): zoomraden ligger bredvid lägesväxeln i stället för ovanpå den */
@media (min-width: 1033px) and (max-width: 1439px) {
    .canvas-top { justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .canvas-top .zoom-bar { position: static; transform: none; }
    .canvas-top .canvas-head .ch-name { display: none; }
}

/* ===== Ljudbiblioteket ===== */
.slib-ov { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,18,30,.48); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s ease; }
.slib-ov.in { opacity: 1; }
.slib-ov.out { opacity: 0; }
.slib { position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(720px, calc(100vh - 40px)); background: #fff; color: #14161f; box-shadow: 0 30px 80px -20px rgba(10,14,30,.5); transform: translateY(10px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.slib-ov.in .slib { transform: none; }
.slib-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; }
.slib-head b { font-family: var(--font-display, Georgia, serif); font-size: 1.45rem; letter-spacing: -.01em; }
.slib-x { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #e3e6ee; background: #fff; color: #5b6478; cursor: pointer; }
.slib-x svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .slib-x:hover { color: #14161f; border-color: #c9cfdc; } }
.slib-search { display: flex; align-items: center; gap: 10px; margin: 0 22px 14px; padding: 0 16px; height: 46px; border: 1px solid #e3e6ee; background: #f7f8fb; border-radius: 999px !important; }
.slib-search svg { width: 18px; height: 18px; color: #8a91a5; flex: none; }
.slib-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: inherit; font-size: .95rem; padding: 0 !important; height: 100%; }
.slib-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 22px 16px; align-content: start; }
.slib-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 12px 9px 9px; border: 1px solid #e6e9f1; background: #fff; cursor: pointer; text-align: left;
             animation: slibIn .35s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .12s ease; }
@keyframes slibIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) { .slib-item:hover { border-color: #c9d4f3; background: #f8faff; } }
.slib-item:active { transform: scale(.985); }
.slib-item:focus-visible { outline: 2px solid var(--primary, #3d6fe8); outline-offset: 2px; }
.slib-item.on { border-color: var(--primary, #3d6fe8); background: rgba(61,111,232,.06); box-shadow: inset 0 0 0 1px var(--primary, #3d6fe8); }
.slib-play { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50% !important; background: #eef2ff; color: #3d6fe8; cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease; }
.slib-play svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .slib-play:hover { transform: scale(1.06); } }
.slib-item.playing .slib-play, .slib-play.on { background: #3d6fe8; color: #fff; }
.slib-nm { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slib-eq { flex: none; display: none; align-items: flex-end; gap: 2px; height: 16px; }
.slib-eq i { width: 3px; height: 100%; background: #3d6fe8; border-radius: 2px !important; transform-origin: bottom; animation: slibEq .9s ease-in-out infinite; }
.slib-eq i:nth-child(2) { animation-delay: -.3s; } .slib-eq i:nth-child(3) { animation-delay: -.6s; } .slib-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes slibEq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.slib-item.playing .slib-eq { display: inline-flex; }
.slib-item .prem-tag { margin-left: 0; flex: none; }
.slib-ok { flex: none; width: 22px; height: 22px; display: none; place-items: center; border-radius: 50% !important; background: var(--primary, #3d6fe8); color: #fff; }
.slib-ok svg { width: 13px; height: 13px; }
.slib-item.on .slib-ok { display: grid; }
.slib-empty { grid-column: 1 / -1; text-align: center; color: #77809a; padding: 30px 0; margin: 0; }
.slib-foot { padding: 12px 22px 18px; border-top: 1px solid #eef0f5; }
.slib-up { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px dashed #c9cfdc; background: none; color: var(--primary, #3d6fe8); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.slib-up svg { width: 17px; height: 17px; flex: none; }
.slib-up .prem-tag { margin-left: 4px; }
@media (max-width: 640px) {
  .slib-ov { align-items: flex-end; padding: 0; }
  .slib { width: 100%; max-height: 88vh; transform: translateY(30px); }
  .slib-grid { grid-template-columns: minmax(0, 1fr); padding: 2px 14px 14px; }
  .slib-head { padding: 16px 16px 10px; } .slib-search { margin: 0 14px 12px; } .slib-foot { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .slib-item, .slib-eq i { animation: none !important; } .slib, .slib-ov { transition: none; } }

/* Ljudeffekt-blocket och scenens ljud i inspektorn */
.snd-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.snd-cur { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 9px; border: 1px solid var(--primary, #3d6fe8); background: rgba(61,111,232,.05); }
.snd-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.snd-nm b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snd-nm small { font-size: .74rem; color: var(--ink-soft, #67708a); }
.snd-del { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-soft, #67708a); cursor: pointer; }
.snd-del svg { width: 15px; height: 15px; }
.snd-lib, .mprompt-lib { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--line, #e3e6ee); background: var(--surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
@media (hover: hover) and (pointer: fine) { .snd-lib:hover, .mprompt-lib:hover { border-color: var(--primary, #3d6fe8); background: rgba(61,111,232,.04); } }
.snd-lib > span:last-child, .mprompt-lib > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.snd-lib b, .mprompt-lib b { font-size: .9rem; }
.snd-lib small, .mprompt-lib small { font-size: .76rem; color: var(--ink-soft, #67708a); }
.snd-lib-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50% !important; background: linear-gradient(135deg, #5b8cff, #3d6fe8); color: #fff; box-shadow: 0 6px 14px -6px rgba(61,111,232,.7); }
.snd-lib-ic svg { width: 19px; height: 19px; }
.mprompt-lib { margin: 10px 0 8px; }

/* Ljud-etiketten under telefonen: en musiknot (pulserar när ljudet inte är valt än) */
.chip-note { display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0 5px 0 -2px; flex: none; }
.chip-note svg { width: 15px; height: 15px; display: block; }
.stage-chip.needs-media .chip-note { animation: chipNote 1.4s ease-in-out infinite; }
@keyframes chipNote { 0%, 100% { transform: none; } 30% { transform: translateY(-2px) rotate(-8deg); } 60% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .stage-chip.needs-media .chip-note { animation: none; } }

/* Ljudbiblioteket: Premium-ljud och egen uppladdning i samma guld som Premium-blocken i paletten */
.slib-item.prem { border: 1px solid #d9b262; background: linear-gradient(135deg, #fffaf0 0%, #f9edcb 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
@media (hover: hover) and (pointer: fine) { .slib-item.prem:hover { border-color: #b8893a; background: linear-gradient(135deg, #fff6e0 0%, #f5e3b2 100%); } }
.slib-item.prem .slib-nm { color: #33260a; }
.slib-item.prem .slib-play { background: linear-gradient(135deg, #f1dc9e 0%, #d9b262 100%); color: #5a3f0c; }
.slib-item.prem.playing .slib-play { background: #b8893a; color: #fff; }
.slib-item.prem .slib-eq i { background: #b8893a; }
.slib-item.prem.on { border-color: #b8893a; box-shadow: inset 0 0 0 1px #b8893a; }
.slib-item.prem .slib-ok { background: #b8893a; }
.slib-up { border-style: solid; border-color: #d9b262; background: linear-gradient(135deg, #fffaf0 0%, #f9edcb 100%); color: #5a3f0c; }
@media (hover: hover) and (pointer: fine) { .slib-up:hover { border-color: #b8893a; background: linear-gradient(135deg, #fff6e0 0%, #f5e3b2 100%); } }

/* Premium-inställningar (t.ex. Gästbok & OSA): rutan i Premiums guld i stället för en etikett */
.tg-set.prem { border-color: #d9b262; background: linear-gradient(135deg, #fffaf0 0%, #f9edcb 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.tg-set.prem.on { border-color: #b8893a; background: linear-gradient(135deg, #fff6e0 0%, #f5e3b2 100%); }
.tg-set.prem .tg-set-head b { color: #33260a; }
.tg-set.prem .tg-set-head small { color: #7b6635; }
.tg-set.prem .tg-set-head input:checked + .tg-switch { background: #b8893a; }
.tg-set.prem .tg-switch { background: #e3d3a8; }
.tg-set.prem { accent-color: #b8893a; }

/* ===== Lägg till innehåll: mjuk öppning, bottenark på mobil/surfplatta med fast höjd och handtag ===== */
#pal-ov, #pal-ov-out { opacity: 0; transition: opacity .24s ease; }
#pal-ov.in { opacity: 1; }
#pal-ov .pal-card, #pal-ov-out .pal-card { transform: translateY(10px) scale(.98); transition: transform .32s cubic-bezier(.22,1,.36,1); }
#pal-ov.in .pal-card { transform: none; }
#pal-ov-out { opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.pal-grab { display: none; }
.pal-body.pal-swap > * { animation: palIn .32s cubic-bezier(.22,1,.36,1) both; }
.pal-body.pal-swap > *:nth-child(2) { animation-delay: .03s; } .pal-body.pal-swap > *:nth-child(3) { animation-delay: .06s; }
.pal-body.pal-swap > *:nth-child(4) { animation-delay: .09s; } .pal-body.pal-swap > *:nth-child(n+5) { animation-delay: .12s; }
@keyframes palIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1032px) {
    #pal-ov .pal-card, #pal-ov-out .pal-card { transform: translateY(100%); transition: transform .42s cubic-bezier(.22,1,.36,1); }
    #pal-ov.in .pal-card { transform: none; }
    #pal-ov-out .pal-card { transform: translateY(100%); transition: transform .26s cubic-bezier(.4,0,1,1); }
    .pal-card { display: flex; flex-direction: column; height: 86dvh; max-height: 86dvh; overflow: hidden; padding-top: 6px; box-shadow: 0 -18px 50px rgba(15,18,30,.28); }
    .pal-grab { display: block; flex: none; width: 42px; height: 5px; margin: 2px auto 10px; border-radius: 999px !important; background: #d5d9e3; }
    .pal-head, .pal-search, .pal-chips { flex: none; }
    .pal-sub { display: none; }
    .pal-chip { border-radius: 999px !important; }
    .pal-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 -12px; padding: 2px 12px 8px; }
    .pal-chips { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}
@media (prefers-reduced-motion: reduce) { #pal-ov, #pal-ov .pal-card, .pal-body.pal-swap > * { transition: none !important; animation: none !important; } }

/* En scen, inzoomat: telefonen står i mitten så länge den får plats och börjar uppe till vänster (rullbar) först när den är större än ytan */
@media (min-width: 1033px) {
    .canvas-strip.single.zoomed { align-items: safe center; justify-content: safe center; }
}