/* Layout: cloud admin (Playlist | Templates) in one column; #player = the TV client, full-screen loop */
:root{
  --bg:#16181b;--card:#1f2226;--raised:#2a2e33;--line:#363a40;--line-strong:#6b6760;
  --ink:#f4efe6;--muted:#a8a39a;--faint:#8a857d;
  --gold:#c9a45c;--gold-strong:#e0bd78;--gold-soft:#3a3122;--gold-ink:#1a1408;--danger:#e57a63;
  --display:"Playfair Display",Georgia,serif;--sans:Inter,"Segoe UI",system-ui,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#f7f4ee;--card:#ffffff;--raised:#efebe3;--line:#ddd6ca;--line-strong:#8f897e;--ink:#1b1c1f;--muted:#5c5850;--faint:#6f6a61;--gold:#8a6620;--gold-strong:#6f5118;--gold-soft:#f3e8d2;--gold-ink:#ffffff;--danger:#b23a22;color-scheme:light}}
:root[data-theme="light"]{--bg:#f7f4ee;--card:#ffffff;--raised:#efebe3;--line:#ddd6ca;--line-strong:#8f897e;--ink:#1b1c1f;--muted:#5c5850;--faint:#6f6a61;--gold:#8a6620;--gold-strong:#6f5118;--gold-soft:#f3e8d2;--gold-ink:#ffffff;--danger:#b23a22;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:400 15px/22px var(--sans);margin:0}
:root[lang="ar"]{--sans:Cairo,Tajawal,"Segoe UI",system-ui,sans-serif}
.lang-sel{padding:8px 10px;font-size:14px}
.top-acts{align-items:center;gap:8px}
[dir="rtl"] .toast{direction:rtl}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold);border-radius:8px}
.wrap{max-width:900px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 64px;display:grid;gap:20px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font:600 26px/1 var(--display)}.brand b{color:var(--gold);font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tab{padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-current="page"]{color:var(--ink);border-color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:8px;border:1px solid transparent;font:600 14px/18px var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--gold);color:var(--gold-ink)}.btn-primary:hover{background:var(--gold-strong)}
.btn-secondary{background:var(--raised);border-color:var(--line-strong);color:var(--ink)}.btn-secondary:hover{border-color:var(--muted)}
.btn-ghost{background:transparent;color:var(--ink);padding:6px 10px;font-size:13px}.btn-ghost:hover{background:var(--raised)}
.btn:disabled{opacity:.4;cursor:default}
.del{color:var(--danger)}
.add-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drop,.from-tpl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 16px;border:1.5px dashed var(--line-strong);border-radius:14px;background:var(--card);text-align:center;color:var(--muted);min-height:150px}
.drop{cursor:pointer}
.drop:hover,.drop.over{border-color:var(--gold);color:var(--ink)}
.drop b,.from-tpl b{color:var(--ink);font-size:16px}
.drop svg,.from-tpl svg{width:30px;height:30px;color:var(--gold)}
.from-tpl{border-style:solid;border-color:var(--line)}
.tpl-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.chip{padding:6px 12px;border-radius:99px;border:1px solid var(--line-strong);background:var(--raised);cursor:pointer;font:600 13px/18px var(--sans)}
.chip:hover{border-color:var(--gold);color:var(--gold-strong)}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
h1{font:600 22px/28px var(--sans);margin:0}
h2{font:600 18px/24px var(--sans);margin:0}
.faint{color:var(--faint);font-size:13px}
.list{display:grid;gap:8px}
.row{display:grid;grid-template-columns:28px 128px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 10px 8px 6px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.row.dragging{opacity:.4}.row.over{border-color:var(--gold)}
.grip{cursor:grab;color:var(--faint);text-align:center;font-size:18px;line-height:1;user-select:none;font-variant-numeric:tabular-nums}
.grip .n{display:block;font:600 12px/16px var(--sans);margin-top:2px}
.th{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0e0f11;display:grid;place-items:center}
.th>img,.th>video{width:100%;height:100%;object-fit:cover;display:block}
.k{position:absolute;left:6px;bottom:6px;background:rgba(10,11,13,.78);color:#fff;font:600 11px/14px var(--sans);padding:2px 6px;border-radius:4px;z-index:1}
.info{min-width:0;display:grid;gap:6px}
.nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dur{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap;min-width:0}
.tr-sel{max-width:100%;min-width:0}
.tr-sel{padding:4px 6px;border-radius:6px;border:1px solid var(--line-strong);background:var(--bg);font-size:13px}
.dur input{width:64px;padding:5px 8px;border-radius:6px;border:1px solid var(--line-strong);background:var(--bg);font-variant-numeric:tabular-nums}
.acts{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.empty{padding:32px 16px;text-align:center;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.ro .edit{display:none!important}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;z-index:60;max-width:calc(100% - 32px)}

.theme-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.theme-card .tc-h{flex:1 1 220px;min-width:0}
.theme-card label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.theme-card input[type=time],.theme-card select{padding:6px 8px;border-radius:6px;border:1px solid var(--line-strong);background:var(--bg)}
.now-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:var(--gold-soft);color:var(--gold-strong);font:600 12px/18px var(--sans)}
.seg{display:inline-flex;background:var(--raised);border-radius:8px;padding:3px;gap:2px}
.seg button{background:none;border:0;padding:5px 12px;border-radius:6px;font:600 12px/16px var(--sans);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink)}
.tvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tv{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px}
.tv .tvh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tv .tvh input{flex:1;min-width:0;font-weight:600;padding:6px 8px;border-radius:6px;border:1px solid transparent;background:transparent}
.tv .tvh input:hover,.tv .tvh input:focus{border-color:var(--line-strong);background:var(--bg)}
.dot{display:inline-flex;align-items:center;gap:6px;font:600 12px/16px var(--sans);white-space:nowrap}
.dot::before{content:"";width:8px;height:8px;border-radius:99px;background:currentColor}
.on-c{color:#3fa66f}.off-c{color:var(--danger)}
.tv .btns{display:flex;gap:8px;flex-wrap:wrap}
/* templates tab */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:10px}
.tcard .pv{aspect-ratio:16/9;background:#0e0f11;border-radius:6px;overflow:hidden;display:grid;place-items:center}
.tcard .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
details.ref{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
details.ref summary{cursor:pointer;font-weight:600}
details.ref table{border-collapse:collapse;width:100%;font-size:13px;margin-top:10px}
details.ref td{border-top:1px solid var(--line);padding:6px 8px;vertical-align:top}
details.ref td:first-child{font-family:var(--mono);white-space:nowrap;color:var(--gold-strong)}
.scroll-x{overflow-x:auto}
code{font:500 13px/18px var(--mono);background:var(--raised);padding:1px 5px;border-radius:4px}

/* sheets (slide form, template editor) */
.sheet{position:fixed;inset:0;z-index:30;background:var(--bg);overflow:auto}
.sheet-in{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:calc(20px + env(safe-area-inset-top,0px)) 48px;display:grid;gap:18px}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:start}
.form{display:grid;gap:14px}
.lbl{display:block;font:600 13px/18px var(--sans);margin-bottom:6px}
.in{width:100%;background:var(--card);border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;min-width:0}
.in:focus{border-color:var(--gold)}
textarea.in{resize:vertical;min-height:70px}
textarea.xml{font:13px/20px var(--mono);min-height:460px;white-space:pre;tab-size:2}
.imgf{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.imgf .mini{width:96px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--raised)}
.imgf .mini img{width:100%;height:100%;object-fit:cover;display:block}
.design{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px}
.ss-tabs{display:flex;flex-wrap:wrap;justify-self:start;max-width:100%}
.ss-tabs button{padding:8px 12px;font-size:13px}
.design summary{cursor:pointer;font-weight:600}
.dz{display:grid;gap:16px}
.crows{display:grid;gap:8px}
.crow{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0}
.crow input[type=color]{width:44px;height:34px;border:1px solid var(--line-strong);border-radius:8px;padding:2px;background:var(--bg);cursor:pointer;flex:none}
.crow span{min-width:0;overflow-wrap:anywhere}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;align-items:center}
input[type=range]{width:100%;accent-color:var(--gold)}
.pv-wrap{position:sticky;top:20px;display:grid;gap:8px}
.pv-box{background:#0e0f11;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.err{background:color-mix(in srgb,var(--danger) 14%,transparent);border:1px solid var(--danger);color:var(--ink);padding:10px 12px;border-radius:8px;font-size:14px}
.warn{color:var(--faint);font-size:13px}
@media (max-width:900px){.sheet-grid{grid-template-columns:minmax(0,1fr)}.pv-wrap{position:static}}
@media (max-width:600px){.add-row{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .row{grid-template-columns:24px 120px minmax(0,1fr);row-gap:10px}
  .row>.info{grid-column:1/-1}
  .row>.acts{grid-column:1/-1;justify-content:flex-start}
  .nm{white-space:normal;overflow-wrap:anywhere}
  .top-acts{width:100%}.top-acts .btn-primary{flex:1}
  .tabs{overflow-x:auto}
  .theme-card label{flex-wrap:wrap}
  .sheet-top .acts{width:100%}
  .sheet-top .acts .btn{flex:1 1 auto}
  .modal{padding:8px}
  .modal-in{padding:12px}
}

/* template slide renderer */
.tslide{direction:ltr;position:relative;container-type:inline-size;overflow:hidden;width:100%;max-width:100%}
.tin{position:absolute;inset:0}
.tel{position:absolute;overflow:hidden}
.cat-chips{display:flex;gap:8px;flex-wrap:wrap}.cat-chips:empty{display:none}
.cat-chips button{height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--line-strong);background:var(--card);color:var(--muted);font:600 13px/1 var(--sans);cursor:pointer}
.cat-chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.tcat{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin:10px 0 -2px;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.tcat:first-child{margin-top:0}
.tcat em{font-style:normal;font-weight:500;color:var(--faint);letter-spacing:0;text-transform:none}
.tcard .catpill{display:inline-block;font:600 11px/1 var(--sans);padding:4px 8px;border-radius:99px;background:var(--gold-soft);color:var(--gold-strong);margin-right:6px}
.tmenu-top{display:flex;align-items:baseline;justify-content:space-between;gap:.5em}.tmenu-top>span:first-child{min-width:0}.tmenu-dots{flex:1;border-bottom:.12em dotted;opacity:.6;min-width:1em}
.tel>img{width:100%;height:100%;display:block}
.tel.qr{aspect-ratio:1/1}
.tel.qr svg{width:100%;height:100%;display:block}
.tel .tb{padding-left:1.1em;position:relative}
.tel .tb::before{content:'•';position:absolute;left:.15em}
.tph{display:grid;place-items:center;width:100%;height:100%;background:#34373c;color:#8d8a84}
.tph svg{width:18%;max-width:120px}

/* full-screen slide preview */
#fp{position:fixed;inset:0;z-index:48;background:#000;display:grid;grid-template-rows:minmax(0,1fr) auto}
.fp-stage{display:grid;place-items:center;overflow:hidden;min-height:0}
.fp-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#16181b;color:#f4efe6;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.fp-bar .btn-secondary{background:#2a2e33;color:#f4efe6;border-color:#6b6760}
.fp-bar .seg{background:#2a2e33}.fp-bar .seg button{color:#a8a39a}.fp-bar .seg button[aria-pressed="true"]{background:#1f2226;color:#f4efe6}
.fp-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* player (TV client) */
#player{position:fixed;inset:0;background:#000;z-index:50}
.pstage .layer>img,.pstage .layer>video{width:100%;height:100%;object-fit:contain;display:block}
.layer{position:absolute;inset:0;opacity:0;display:grid;place-items:center;z-index:0;overflow:hidden;background:var(--screen,#000)}
.layer.on{opacity:1;z-index:2}
.layer.leaving{opacity:1;z-index:1}
.layer.under{opacity:1;z-index:0}
.glc{position:absolute;inset:0;width:100%;height:100%;z-index:4;display:none}
.glc.show{display:block}
.sample-slide{width:100%;height:100%;display:grid;place-items:center;color:#f4efe6;font:600 clamp(18px,4vw,48px)/1.1 var(--display)}
.modal{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.modal-in{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;width:min(820px,100%);display:grid;gap:12px;max-height:100%;overflow:auto}
.pstage{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;max-width:100%}
.tr-browse{display:flex;gap:8px;align-items:center}
.tr-browse select{flex:1;min-width:0}
.trp{padding:4px 8px;font-size:12px}
/* Fade: old fades out, then new fades in (never on top of each other) */
.layer.leaving.tr-fade{animation:trOut .45s ease both}
.layer.on.tr-fade{animation:trIn .45s ease .45s both}
/* Crossfade: new fades in over old */
.layer.on.tr-crossfade{animation:trIn .9s ease both}
/* Push transitions: new pushes old out */
.layer.on.tr-slide{animation:trFromRight .8s cubic-bezier(.2,.7,.2,1) both}.layer.leaving.tr-slide{animation:trToLeft .8s cubic-bezier(.2,.7,.2,1) both}
.layer.on.tr-slide-right{animation:trFromLeft .8s cubic-bezier(.2,.7,.2,1) both}.layer.leaving.tr-slide-right{animation:trToRight .8s cubic-bezier(.2,.7,.2,1) both}
.layer.on.tr-up{animation:trFromBottom .8s cubic-bezier(.2,.7,.2,1) both}.layer.leaving.tr-up{animation:trToTop .8s cubic-bezier(.2,.7,.2,1) both}
.layer.on.tr-down{animation:trFromTop .8s cubic-bezier(.2,.7,.2,1) both}.layer.leaving.tr-down{animation:trToBottom .8s cubic-bezier(.2,.7,.2,1) both}
/* Reveal transitions: new is uncovered over old */
.layer.on.tr-zoom{animation:trZoom .9s ease both}.layer.leaving.tr-zoom{animation:trOut .9s ease both}
.layer.on.tr-wipe{animation:trWipe .9s cubic-bezier(.6,0,.3,1) both}
.layer.on.tr-circle{animation:trCircle 1s cubic-bezier(.6,0,.3,1) both}
.layer.on.tr-blur{animation:trBlur .9s ease both}.layer.leaving.tr-blur{animation:trOut .9s ease both}
@keyframes trIn{from{opacity:0}to{opacity:1}}
@keyframes trOut{from{opacity:1}to{opacity:0}}
@keyframes trFromRight{from{transform:translateX(100%)}to{transform:none}}
@keyframes trToLeft{from{transform:none}to{transform:translateX(-100%)}}
@keyframes trFromLeft{from{transform:translateX(-100%)}to{transform:none}}
@keyframes trToRight{from{transform:none}to{transform:translateX(100%)}}
@keyframes trFromBottom{from{transform:translateY(100%)}to{transform:none}}
@keyframes trToTop{from{transform:none}to{transform:translateY(-100%)}}
@keyframes trFromTop{from{transform:translateY(-100%)}to{transform:none}}
@keyframes trToBottom{from{transform:none}to{transform:translateY(100%)}}
@keyframes trZoom{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}
@keyframes trWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes trCircle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes trBlur{from{opacity:0;filter:blur(24px)}to{opacity:1;filter:none}}
.layer>img,.layer>video{width:100%;height:100%;object-fit:contain;display:block}
#player.fill .layer>img,#player.fill .layer>video{object-fit:cover}
/* transitions are an explicit choice for each item, so they play even when the device asks for reduced motion */
.ctrl{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));display:flex;gap:8px;opacity:0;transition:opacity .3s;z-index:5}
#player.show .ctrl{opacity:1}
.ctrl .btn{background:rgba(22,24,27,.9);color:#f4efe6;border-color:#6b6760;padding:8px 12px;font-size:13px}
.pmsg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#a8a39a;padding:24px;font-size:clamp(16px,2vw,28px)}
.pmsg b{display:block;color:#f4efe6;font:600 clamp(28px,4vw,56px)/1.1 var(--display);margin-bottom:12px}

/* transition.css 0.1.4 (transition-style) - ISC - https://github.com/argyleink/transition.css */
:root{--circle-center-center-out:circle(0% at center);--circle-center-center-in:circle(125% at center);--circle-hesitate:circle(40% at center);--circle-top-left-out:circle(0% at top left);--circle-top-right-out:circle(0% at top right);--circle-bottom-right-out:circle(0% at bottom right);--circle-bottom-left-out:circle(0% at bottom left);--circle-top-left-in:circle(150% at top left);--circle-top-right-in:circle(150% at top right);--circle-bottom-right-in:circle(150% at bottom right);--circle-bottom-left-in:circle(150% at bottom left);--wipe-in:inset(0 0 0 0);--wipe-bottom:inset(100% 0 0 0);--wipe-left:inset(0 100% 0 0);--wipe-top:inset(0 0 100% 0);--wipe-right:inset(0 0 0 100%);--wipe-top-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-top-right-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-right-in:polygon(-50% 0%,200% 0,0 200%,0 -50%);--wipe-top-left-out:polygon(0 0,0 0,0 0,0 50%);--wipe-top-right-out:polygon(50% -50%,150% 50%,150% 50%,50% -50%);--wipe-bottom-left-out:polygon(-50% 50%,50% 150%,50% 150%,-50% 50%);--wipe-bottom-right-out:polygon(150% 50%,150% 50%,50% 150%,50% 150%);--wipe-cinematic-out:inset(100% 0 100% 0);--wipe-cinematic-mid:inset(10% 0 10% 0);--square-hesitate:inset(33% 33% 33% 33%);--square-out:inset(100% 100% 100% 100%);--square-in:var(--wipe-in);--square-top-left-out:inset(0 100% 100% 0);--square-top-right-out:inset(0 0 100% 100%);--square-bottom-left-out:inset(100% 100% 0 0);--square-bottom-right-out:inset(100% 0 0 100%);--diamond-center-in:polygon(-50% 50%,50% -50%,150% 50%,50% 150%);--diamond-center-out:polygon(50% 50%,50% 50%,50% 50%,50% 50%);--diamond-hesitate:polygon(45% 50%,50% 25%,55% 50%,50% 75%);--opposing-corners-in:polygon(0 0,0 100%,100% 100%,100% 0);--opposing-corners-out:polygon(0 0,50% 50%,100% 100%,50% 50%)}[transition-style]{-webkit-animation-delay:var(--transition__delay,0);animation-delay:var(--transition__delay,0);-webkit-animation-duration:var(--transition__duration,2.5s);animation-duration:var(--transition__duration,2.5s);-webkit-animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));-webkit-animation-fill-mode:both;animation-fill-mode:both;will-change:clip-path}@-webkit-keyframes wipe-out-top{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-top);clip-path:var(--wipe-top)}}@keyframes wipe-out-top{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-top);clip-path:var(--wipe-top)}}[transition-style="out:wipe:top"],[transition-style="out:wipe:up"]{-webkit-animation-name:wipe-out-top;animation-name:wipe-out-top}@-webkit-keyframes wipe-out-right{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-right);clip-path:var(--wipe-right)}}@keyframes wipe-out-right{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-right);clip-path:var(--wipe-right)}}[transition-style="out:wipe:right"]{-webkit-animation-name:wipe-out-right;animation-name:wipe-out-right}@-webkit-keyframes wipe-out-bottom{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-bottom);clip-path:var(--wipe-bottom)}}@keyframes wipe-out-bottom{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-bottom);clip-path:var(--wipe-bottom)}}[transition-style="out:wipe:bottom"],[transition-style="out:wipe:down"]{-webkit-animation-name:wipe-out-bottom;animation-name:wipe-out-bottom}@-webkit-keyframes wipe-out-left{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-left);clip-path:var(--wipe-left)}}@keyframes wipe-out-left{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}to{-webkit-clip-path:var(--wipe-left);clip-path:var(--wipe-left)}}[transition-style="out:wipe:left"]{-webkit-animation-name:wipe-out-left;animation-name:wipe-out-left}@-webkit-keyframes wipe-in-top{0%{-webkit-clip-path:var(--wipe-top);clip-path:var(--wipe-top)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}@keyframes wipe-in-top{0%{-webkit-clip-path:var(--wipe-top);clip-path:var(--wipe-top)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}[transition-style="in:wipe:down"],[transition-style="in:wipe:top"]{-webkit-animation-name:wipe-in-top;animation-name:wipe-in-top}@-webkit-keyframes wipe-in-right{0%{-webkit-clip-path:var(--wipe-left);clip-path:var(--wipe-left)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}@keyframes wipe-in-right{0%{-webkit-clip-path:var(--wipe-left);clip-path:var(--wipe-left)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}[transition-style="in:wipe:right"]{-webkit-animation-name:wipe-in-right;animation-name:wipe-in-right}@-webkit-keyframes wipe-in-bottom{0%{-webkit-clip-path:var(--wipe-bottom);clip-path:var(--wipe-bottom)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}@keyframes wipe-in-bottom{0%{-webkit-clip-path:var(--wipe-bottom);clip-path:var(--wipe-bottom)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}[transition-style="in:wipe:bottom"],[transition-style="in:wipe:up"]{-webkit-animation-name:wipe-in-bottom;animation-name:wipe-in-bottom}@-webkit-keyframes wipe-in-left{0%{-webkit-clip-path:var(--wipe-right);clip-path:var(--wipe-right)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}@keyframes wipe-in-left{0%{-webkit-clip-path:var(--wipe-right);clip-path:var(--wipe-right)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}[transition-style="in:wipe:left"]{-webkit-animation-name:wipe-in-left;animation-name:wipe-in-left}@-webkit-keyframes wipe-in-top-right{0%{-webkit-clip-path:var(--wipe-bottom-left-out);clip-path:var(--wipe-bottom-left-out)}to{-webkit-clip-path:var(--wipe-top-right-in);clip-path:var(--wipe-top-right-in)}}@keyframes wipe-in-top-right{0%{-webkit-clip-path:var(--wipe-bottom-left-out);clip-path:var(--wipe-bottom-left-out)}to{-webkit-clip-path:var(--wipe-top-right-in);clip-path:var(--wipe-top-right-in)}}[transition-style="in:wipe:top-right"]{-webkit-animation-name:wipe-in-top-right;animation-name:wipe-in-top-right}@-webkit-keyframes wipe-in-top-left{0%{-webkit-clip-path:var(--wipe-bottom-right-out);clip-path:var(--wipe-bottom-right-out)}to{-webkit-clip-path:var(--wipe-top-left-in);clip-path:var(--wipe-top-left-in)}}@keyframes wipe-in-top-left{0%{-webkit-clip-path:var(--wipe-bottom-right-out);clip-path:var(--wipe-bottom-right-out)}to{-webkit-clip-path:var(--wipe-top-left-in);clip-path:var(--wipe-top-left-in)}}[transition-style="in:wipe:top-left"]{-webkit-animation-name:wipe-in-top-left;animation-name:wipe-in-top-left}@-webkit-keyframes wipe-in-bottom-right{0%{-webkit-clip-path:var(--wipe-top-left-out);clip-path:var(--wipe-top-left-out)}to{-webkit-clip-path:var(--wipe-bottom-right-in);clip-path:var(--wipe-bottom-right-in)}}@keyframes wipe-in-bottom-right{0%{-webkit-clip-path:var(--wipe-top-left-out);clip-path:var(--wipe-top-left-out)}to{-webkit-clip-path:var(--wipe-bottom-right-in);clip-path:var(--wipe-bottom-right-in)}}[transition-style="in:wipe:bottom-right"]{-webkit-animation-name:wipe-in-bottom-right;animation-name:wipe-in-bottom-right}@-webkit-keyframes wipe-in-bottom-left{0%{-webkit-clip-path:var(--wipe-top-right-out);clip-path:var(--wipe-top-right-out)}to{-webkit-clip-path:var(--wipe-bottom-left-in);clip-path:var(--wipe-bottom-left-in)}}@keyframes wipe-in-bottom-left{0%{-webkit-clip-path:var(--wipe-top-right-out);clip-path:var(--wipe-top-right-out)}to{-webkit-clip-path:var(--wipe-bottom-left-in);clip-path:var(--wipe-bottom-left-in)}}[transition-style="in:wipe:bottom-left"]{-webkit-animation-name:wipe-in-bottom-left;animation-name:wipe-in-bottom-left}@-webkit-keyframes wipe-out-top-right{0%{-webkit-clip-path:var(--wipe-bottom-left-in);clip-path:var(--wipe-bottom-left-in)}to{-webkit-clip-path:var(--wipe-top-right-out);clip-path:var(--wipe-top-right-out)}}@keyframes wipe-out-top-right{0%{-webkit-clip-path:var(--wipe-bottom-left-in);clip-path:var(--wipe-bottom-left-in)}to{-webkit-clip-path:var(--wipe-top-right-out);clip-path:var(--wipe-top-right-out)}}[transition-style="out:wipe:top-right"]{-webkit-animation-name:wipe-out-top-right;animation-name:wipe-out-top-right}@-webkit-keyframes wipe-out-top-left{0%{-webkit-clip-path:var(--wipe-bottom-right-in);clip-path:var(--wipe-bottom-right-in)}to{-webkit-clip-path:var(--wipe-top-left-out);clip-path:var(--wipe-top-left-out)}}@keyframes wipe-out-top-left{0%{-webkit-clip-path:var(--wipe-bottom-right-in);clip-path:var(--wipe-bottom-right-in)}to{-webkit-clip-path:var(--wipe-top-left-out);clip-path:var(--wipe-top-left-out)}}[transition-style="out:wipe:top-left"]{-webkit-animation-name:wipe-out-top-left;animation-name:wipe-out-top-left}@-webkit-keyframes wipe-out-bottom-right{0%{-webkit-clip-path:var(--wipe-top-left-in);clip-path:var(--wipe-top-left-in)}to{-webkit-clip-path:var(--wipe-bottom-right-out);clip-path:var(--wipe-bottom-right-out)}}@keyframes wipe-out-bottom-right{0%{-webkit-clip-path:var(--wipe-top-left-in);clip-path:var(--wipe-top-left-in)}to{-webkit-clip-path:var(--wipe-bottom-right-out);clip-path:var(--wipe-bottom-right-out)}}[transition-style="out:wipe:bottom-right"]{-webkit-animation-name:wipe-out-bottom-right;animation-name:wipe-out-bottom-right}@-webkit-keyframes wipe-out-bottom-left{0%{-webkit-clip-path:var(--wipe-top-right-in);clip-path:var(--wipe-top-right-in)}to{-webkit-clip-path:var(--wipe-bottom-left-out);clip-path:var(--wipe-bottom-left-out)}}@keyframes wipe-out-bottom-left{0%{-webkit-clip-path:var(--wipe-top-right-in);clip-path:var(--wipe-top-right-in)}to{-webkit-clip-path:var(--wipe-bottom-left-out);clip-path:var(--wipe-bottom-left-out)}}[transition-style="out:wipe:bottom-left"]{-webkit-animation-name:wipe-out-bottom-left;animation-name:wipe-out-bottom-left}@-webkit-keyframes wipe-cinematic-out{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}30%,70%{-webkit-clip-path:var(--wipe-cinematic-mid);clip-path:var(--wipe-cinematic-mid)}to{-webkit-clip-path:var(--wipe-cinematic-out);clip-path:var(--wipe-cinematic-out)}}@keyframes wipe-cinematic-out{0%{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}30%,70%{-webkit-clip-path:var(--wipe-cinematic-mid);clip-path:var(--wipe-cinematic-mid)}to{-webkit-clip-path:var(--wipe-cinematic-out);clip-path:var(--wipe-cinematic-out)}}[transition-style="out:wipe:cinematic"]{-webkit-animation-name:wipe-cinematic-out;animation-name:wipe-cinematic-out}@-webkit-keyframes wipe-cinematic-in{0%{-webkit-clip-path:var(--wipe-cinematic-out);clip-path:var(--wipe-cinematic-out)}30%,70%{-webkit-clip-path:var(--wipe-cinematic-mid);clip-path:var(--wipe-cinematic-mid)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}@keyframes wipe-cinematic-in{0%{-webkit-clip-path:var(--wipe-cinematic-out);clip-path:var(--wipe-cinematic-out)}30%,70%{-webkit-clip-path:var(--wipe-cinematic-mid);clip-path:var(--wipe-cinematic-mid)}to{-webkit-clip-path:var(--wipe-in);clip-path:var(--wipe-in)}}[transition-style="in:wipe:cinematic"]{-webkit-animation-name:wipe-cinematic-in;animation-name:wipe-cinematic-in}@-webkit-keyframes circle-in-hesitate{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}@keyframes circle-in-hesitate{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:hesitate"]{-webkit-animation-name:circle-in-hesitate;animation-name:circle-in-hesitate}@-webkit-keyframes circle-out-hesitate{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}@keyframes circle-out-hesitate{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:hesitate"]{-webkit-animation-name:circle-out-hesitate;animation-name:circle-out-hesitate}@-webkit-keyframes circle-in-center{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}@keyframes circle-in-center{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:center"]{-webkit-animation-name:circle-in-center;animation-name:circle-in-center}@-webkit-keyframes circle-out-center{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}@keyframes circle-out-center{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:center"]{-webkit-animation-name:circle-out-center;animation-name:circle-out-center}@-webkit-keyframes circle-out-top-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-left-out);clip-path:var(--circle-top-left-out)}}@keyframes circle-out-top-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-left-out);clip-path:var(--circle-top-left-out)}}[transition-style="out:circle:top-left"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-top-left;animation-name:circle-out-top-left}@-webkit-keyframes circle-out-top-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-right-out);clip-path:var(--circle-top-right-out)}}@keyframes circle-out-top-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-right-out);clip-path:var(--circle-top-right-out)}}[transition-style="out:circle:top-right"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-top-right;animation-name:circle-out-top-right}@-webkit-keyframes circle-out-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-left-out);clip-path:var(--circle-bottom-left-out)}}@keyframes circle-out-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-left-out);clip-path:var(--circle-bottom-left-out)}}[transition-style="out:circle:bottom-left"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-bottom-left;animation-name:circle-out-bottom-left}@-webkit-keyframes circle-out-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-right-out);clip-path:var(--circle-bottom-right-out)}}@keyframes circle-out-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-right-out);clip-path:var(--circle-bottom-right-out)}}[transition-style="out:circle:bottom-right"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-bottom-right;animation-name:circle-out-bottom-right}@-webkit-keyframes circle-in-top-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-left-in);clip-path:var(--circle-top-left-in)}}@keyframes circle-in-top-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-left-in);clip-path:var(--circle-top-left-in)}}[transition-style="in:circle:top-left"]{-webkit-animation-name:circle-in-top-left;animation-name:circle-in-top-left}@-webkit-keyframes circle-in-top-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-right-in);clip-path:var(--circle-top-right-in)}}@keyframes circle-in-top-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-right-in);clip-path:var(--circle-top-right-in)}}[transition-style="in:circle:top-right"]{-webkit-animation-name:circle-in-top-right;animation-name:circle-in-top-right}@-webkit-keyframes circle-in-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-left-in);clip-path:var(--circle-bottom-left-in)}}@keyframes circle-in-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-left-in);clip-path:var(--circle-bottom-left-in)}}[transition-style="in:circle:bottom-left"]{-webkit-animation-name:circle-in-bottom-left;animation-name:circle-in-bottom-left}@-webkit-keyframes circle-in-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-right-in);clip-path:var(--circle-bottom-right-in)}}@keyframes circle-in-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-right-in);clip-path:var(--circle-bottom-right-in)}}[transition-style="in:circle:bottom-right"]{-webkit-animation-name:circle-in-bottom-right;animation-name:circle-in-bottom-right}@-webkit-keyframes square-in-hesitate{0%{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}40%{-webkit-clip-path:var(--square-hesitate);clip-path:var(--square-hesitate)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}@keyframes square-in-hesitate{0%{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}40%{-webkit-clip-path:var(--square-hesitate);clip-path:var(--square-hesitate)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:hesitate"]{-webkit-animation-name:square-in-hesitate;animation-name:square-in-hesitate}@-webkit-keyframes square-out-hesitate{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}40%{-webkit-clip-path:var(--square-hesitate);clip-path:var(--square-hesitate)}to{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}}@keyframes square-out-hesitate{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}40%{-webkit-clip-path:var(--square-hesitate);clip-path:var(--square-hesitate)}to{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}}[transition-style="out:square:hesitate"]{-webkit-animation-name:square-out-hesitate;animation-name:square-out-hesitate}@-webkit-keyframes square-in-center{0%{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}@keyframes square-in-center{0%{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:center"]{-webkit-animation-name:square-in-center;animation-name:square-in-center}@-webkit-keyframes square-out-center{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}}@keyframes square-out-center{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}}[transition-style="out:square:center"]{-webkit-animation-name:square-out-center;animation-name:square-out-center}@-webkit-keyframes square-out-top-left{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-top-left-out);clip-path:var(--square-top-left-out)}}@keyframes square-out-top-left{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-top-left-out);clip-path:var(--square-top-left-out)}}[transition-style="out:square:top-left"]{--transition__duration:1.5s;-webkit-animation-name:square-out-top-left;animation-name:square-out-top-left}@-webkit-keyframes square-out-top-right{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-top-right-out);clip-path:var(--square-top-right-out)}}@keyframes square-out-top-right{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-top-right-out);clip-path:var(--square-top-right-out)}}[transition-style="out:square:top-right"]{--transition__duration:1.5s;-webkit-animation-name:square-out-top-right;animation-name:square-out-top-right}@-webkit-keyframes square-out-bottom-left{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-bottom-left-out);clip-path:var(--square-bottom-left-out)}}@keyframes square-out-bottom-left{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-bottom-left-out);clip-path:var(--square-bottom-left-out)}}[transition-style="out:square:bottom-left"]{--transition__duration:1.5s;-webkit-animation-name:square-out-bottom-left;animation-name:square-out-bottom-left}@-webkit-keyframes square-out-bottom-right{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-bottom-right-out);clip-path:var(--square-bottom-right-out)}}@keyframes square-out-bottom-right{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-bottom-right-out);clip-path:var(--square-bottom-right-out)}}[transition-style="out:square:bottom-right"]{--transition__duration:1.5s;-webkit-animation-name:square-out-bottom-right;animation-name:square-out-bottom-right}@-webkit-keyframes square-in-top-left{0%{-webkit-clip-path:var(--square-bottom-right-out);clip-path:var(--square-bottom-right-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}@keyframes square-in-top-left{0%{-webkit-clip-path:var(--square-bottom-right-out);clip-path:var(--square-bottom-right-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:top-left"]{-webkit-animation-name:square-in-top-left;animation-name:square-in-top-left}@-webkit-keyframes square-in-top-right{0%{-webkit-clip-path:var(--square-bottom-left-out);clip-path:var(--square-bottom-left-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}@keyframes square-in-top-right{0%{-webkit-clip-path:var(--square-bottom-left-out);clip-path:var(--square-bottom-left-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:top-right"]{-webkit-animation-name:square-in-top-right;animation-name:square-in-top-right}@-webkit-keyframes square-in-bottom-left{0%{-webkit-clip-path:var(--square-top-right-out);clip-path:var(--square-top-right-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}@keyframes square-in-bottom-left{0%{-webkit-clip-path:var(--square-top-right-out);clip-path:var(--square-top-right-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:bottom-left"]{-webkit-animation-name:square-in-bottom-left;animation-name:square-in-bottom-left}@-webkit-keyframes square-in-bottom-right{0%{-webkit-clip-path:var(--square-top-left-out);clip-path:var(--square-top-left-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}@keyframes square-in-bottom-right{0%{-webkit-clip-path:var(--square-top-left-out);clip-path:var(--square-top-left-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:bottom-right"]{-webkit-animation-name:square-in-bottom-right;animation-name:square-in-bottom-right}@-webkit-keyframes polygon-in-opposing-corners{0%{-webkit-clip-path:var(--opposing-corners-out);clip-path:var(--opposing-corners-out)}to{-webkit-clip-path:var(--opposing-corners-in);clip-path:var(--opposing-corners-in)}}@keyframes polygon-in-opposing-corners{0%{-webkit-clip-path:var(--opposing-corners-out);clip-path:var(--opposing-corners-out)}to{-webkit-clip-path:var(--opposing-corners-in);clip-path:var(--opposing-corners-in)}}[transition-style="in:polygon:opposing-corners"]{--transition__duration:1.5s;-webkit-animation-name:polygon-in-opposing-corners;animation-name:polygon-in-opposing-corners}@-webkit-keyframes polygon-out-opposing-corners{0%{-webkit-clip-path:var(--opposing-corners-in);clip-path:var(--opposing-corners-in)}to{-webkit-clip-path:var(--opposing-corners-out);clip-path:var(--opposing-corners-out)}}@keyframes polygon-out-opposing-corners{0%{-webkit-clip-path:var(--opposing-corners-in);clip-path:var(--opposing-corners-in)}to{-webkit-clip-path:var(--opposing-corners-out);clip-path:var(--opposing-corners-out)}}[transition-style="out:polygon:opposing-corners"]{--transition__duration:1.5s;-webkit-animation-name:polygon-out-opposing-corners;animation-name:polygon-out-opposing-corners}@-webkit-keyframes diamond-in-center{0%{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}to{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}}@keyframes diamond-in-center{0%{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}to{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}}[transition-style="in:diamond:center"]{--transition__duration:1.5s;-webkit-animation-name:diamond-in-center;animation-name:diamond-in-center}@-webkit-keyframes diamond-out-center{0%{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}to{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}}@keyframes diamond-out-center{0%{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}to{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}}[transition-style="out:diamond:center"]{--transition__duration:1.5s;-webkit-animation-name:diamond-out-center;animation-name:diamond-out-center}@-webkit-keyframes diamond-in-double-scale{0%{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}40%{-webkit-clip-path:var(--diamond-hesitate);clip-path:var(--diamond-hesitate)}to{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}}@keyframes diamond-in-double-scale{0%{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}40%{-webkit-clip-path:var(--diamond-hesitate);clip-path:var(--diamond-hesitate)}to{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}}[transition-style="in:diamond:hesitate"]{--transition__duration:1.5s;-webkit-animation-name:diamond-in-double-scale;animation-name:diamond-in-double-scale}@-webkit-keyframes diamond-out-double-scale{0%{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}40%{-webkit-clip-path:var(--diamond-hesitate);clip-path:var(--diamond-hesitate)}to{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}}@keyframes diamond-out-double-scale{0%{-webkit-clip-path:var(--diamond-center-in);clip-path:var(--diamond-center-in)}40%{-webkit-clip-path:var(--diamond-hesitate);clip-path:var(--diamond-hesitate)}to{-webkit-clip-path:var(--diamond-center-out);clip-path:var(--diamond-center-out)}}[transition-style="out:diamond:hesitate"]{--transition__duration:1.5s;-webkit-animation-name:diamond-out-double-scale;animation-name:diamond-out-double-scale}
/* animate.css 4.1.1 entrance keyframes - MIT - https://animate.style */
@keyframes an-backInDown { 0% { transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes an-backInLeft { 0% { transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes an-backInRight { 0% { transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes an-backInUp { 0% { transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes an-bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); } }
@keyframes an-bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { transform: translate3d(0, 5px, 0) scaleY(0.985); } to { transform: translate3d(0, 0, 0); } }
@keyframes an-bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); } 75% { transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { transform: translate3d(5px, 0, 0) scaleX(0.995); } to { transform: translate3d(0, 0, 0); } }
@keyframes an-bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { transform: translate3d(0, 0, 0); } }
@keyframes an-bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { transform: translate3d(0, -5px, 0) scaleY(0.985); } to { transform: translate3d(0, 0, 0); } }
@keyframes an-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes an-fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInDownBig { from { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInTopLeft { from { opacity: 0; transform: translate3d(-100%, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInTopRight { from { opacity: 0; transform: translate3d(100%, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInBottomLeft { from { opacity: 0; transform: translate3d(-100%, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-fadeInBottomRight { from { opacity: 0; transform: translate3d(100%, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } }
@keyframes an-flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } }
@keyframes an-lightSpeedInRight { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translate3d(0, 0, 0); } }
@keyframes an-lightSpeedInLeft { from { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } to { transform: translate3d(0, 0, 0); } }
@keyframes an-rotateIn { from { transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes an-rotateInDownLeft { from { transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes an-rotateInDownRight { from { transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes an-rotateInUpLeft { from { transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes an-rotateInUpRight { from { transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes an-jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } }
@keyframes an-rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes an-zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } }
@keyframes an-zoomInDown { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes an-zoomInLeft { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes an-zoomInRight { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes an-zoomInUp { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes an-slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes an-slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes an-slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes an-slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }

/* ===================== Redesign: app shell (sidebar + content) ===================== */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:30px;padding:30px 16px 22px;background:#121315;color:#e9e4da;border-inline-end:1px solid #24262a;overflow:auto}
.side .brand{font:600 27px/1 var(--display);letter-spacing:-.01em;color:#f4efe6;padding:2px 12px 0}
.side .brand b{color:#c9a45c}
.side .tabs{display:grid;gap:4px;border:0}
.side .tab{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:#a8a39a;font:600 14px/1.1 var(--sans);border:0;margin:0;text-decoration:none;transition:background .15s,color .15s}
.side .tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side .tab:hover{background:#1c1e21;color:#f4efe6}
.side .tab[aria-current="page"]{background:#2b2519;color:#e8c784}
.tab-count{margin-inline-start:auto;font:600 11px/1 var(--sans);font-style:normal;padding:4px 8px;border-radius:99px;background:#24262a;color:#cfc9bf;font-variant-numeric:tabular-nums}
.tab-count:empty{display:none}
.tab-count.warn{background:rgba(229,122,99,.18);color:#f3a593}
.side-foot{margin-top:auto;display:grid;gap:10px}
.btn-play{background:#c9a45c;color:#1a1408;justify-content:center}
.btn-play:hover{background:#e0bd78}
.btn-play svg{width:15px;height:15px;fill:currentColor;stroke:none}
.side .lang-sel{background:#1c1e21;color:#e9e4da;border:1px solid #34373c;border-radius:10px;width:100%;height:38px;padding:0 10px}
.side .tenant{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-radius:12px;background:#1a1b1e;border:1px solid #26282c;color:#a8a39a;font-size:13px;width:auto;margin:0}
.side .tenant b{color:#f4efe6;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .tenant .btn-ghost{color:#cfc9bf;height:30px;padding:0 8px}
.side .tenant .btn-ghost:hover{background:#26282c;color:#fff}
.main-col{display:flex;flex-direction:column;min-width:0}
.wrap.main{max-width:1160px;width:100%;margin:0 auto;padding-block:40px 48px;gap:28px;flex:1}
.wrap.main{align-content:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.howto{padding:20px 22px;display:grid;gap:10px}
.howto h2{font:600 17px/1.3 var(--sans);margin:0}
.wrap.main>.wrap,.wrap.main>section{max-width:none;margin:0;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head h1{font:600 36px/1.12 var(--display);letter-spacing:-.015em;margin:0}
.sub{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:22px;max-width:68ch}
.sub #total{color:var(--faint)}
.foot{padding:22px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));text-align:center;font-size:13px;color:var(--faint);border-top:1px solid var(--line)}
.foot a{color:var(--gold-strong);font-weight:600;text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}

/* buttons, inputs */
.btn{height:40px;padding:0 16px;border-radius:10px;transition:background .15s,border-color .15s,color .15s,transform .08s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 1px 2px rgba(0,0,0,.12)}
.btn-ghost{height:34px;padding:0 10px;color:var(--muted)}
.btn-ghost:hover{color:var(--ink)}
.btn-ghost.del,.del{color:var(--danger)}
.btn.trp,.btn-sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.in{border-radius:10px;min-height:40px}
textarea.in{min-height:80px}
.tr-sel,.dur input,.theme-card select,.theme-card input[type=time]{border-radius:8px;min-height:32px}
:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent);border-radius:10px}

/* add cards */
.add-row{gap:16px}
.drop,.from-tpl{border-radius:16px;min-height:168px;padding:26px 20px;gap:8px;background:var(--card);transition:border-color .15s,background .15s}
.drop:hover,.drop.over{background:color-mix(in srgb,var(--gold-soft) 45%,var(--card))}
.drop svg,.from-tpl svg{width:46px;height:46px;padding:11px;border-radius:12px;background:var(--gold-soft);color:var(--gold-strong);box-sizing:border-box;margin-bottom:4px}
.chip{height:32px;padding:0 14px;display:inline-flex;align-items:center;background:var(--bg)}

/* playlist rows */
.list{gap:10px}
.row{grid-template-columns:30px 176px minmax(0,1fr) auto;gap:18px;padding:12px 14px 12px 8px;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}
.row:hover{border-color:var(--line-strong);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.th{border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.nm{font-size:15px}
.grip{color:var(--faint)}
.info{gap:8px}

/* cards & panels */
.card,.tcard,.tv,.theme-card,details.ref,.design,.editor{border-radius:16px}
.tcard{padding:12px;transition:border-color .15s,box-shadow .15s}
.tcard:hover{border-color:var(--line-strong);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.tcard .pv{border-radius:10px}
.tv{padding:16px}
.theme-card{padding:18px 20px}
.empty{border-radius:16px;padding:40px 20px}
.modal-in{border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.toast{border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.sheet-in{padding-block:calc(28px + env(safe-area-inset-top,0px)) 48px}
.sheet-top h2{font:600 24px/1.2 var(--display)}

/* small screens: sidebar becomes a top bar */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-inline-end:0;border-bottom:1px solid #24262a;overflow:visible}
  .side .brand{font-size:21px;padding:0}
  .side .tabs{display:flex;order:3;width:100%;overflow-x:auto;gap:4px;scrollbar-width:none}
  .side .tab{padding:9px 12px;white-space:nowrap}
  .side-foot{margin:0;margin-inline-start:auto;display:flex;gap:8px;align-items:center}
  .btn-play span{display:none}
  .btn-play{width:40px;padding:0}
  .side .lang-sel{width:auto;height:36px}
  .side .tenant{padding:4px 4px 4px 10px}
  .side .tenant b{max-width:110px}
  .wrap.main{padding-block:26px 36px;gap:22px}
  .page-head h1{font-size:28px}
  .row{grid-template-columns:24px 128px minmax(0,1fr)}
}
@media (max-width:600px){
  .side .tenant b{display:none}
  .row{grid-template-columns:24px 120px minmax(0,1fr)}
}


/* hosted version */
.tenant{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.tenant b{color:var(--ink);font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:8px;align-items:center}
#pair-code{font:700 20px/1 var(--sans);letter-spacing:.2em;text-align:center}
@media (max-width:600px){.pair-row{grid-template-columns:1fr}.tenant{width:100%;justify-content:space-between}}
body.tv-mode #p-exit{display:none}
.tv{min-width:0}.tv>*{min-width:0}
.tv .tvh input{width:0;flex:1 1 auto}
#pair-code::placeholder{letter-spacing:0;font-size:15px;font-weight:500}
.top-acts .tenant{margin-inline-start:4px}

/* login: brand panel + form */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--bg)}
.login-art{background:#121315;color:#f4efe6;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:44px clamp(28px,5vw,64px);position:relative;overflow:hidden}
.login-art .brand{font:600 30px/1 var(--display);color:#f4efe6}.login-art .brand b{color:#c9a45c}
.facade{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:440px;padding:22px;border-radius:18px;background:#6b6760}
.facade i{aspect-ratio:2/1;border-radius:5px;background:#121315}
.facade i.lit{background:#c9a45c}
.login-tag{font:500 clamp(26px,3vw,38px)/1.15 var(--display);max-width:16ch;margin:0;color:#f4efe6}
.login-side{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.login-side .foot{border:0;margin-top:auto;width:100%}
.login-card{width:min(400px,100%);display:grid;gap:18px;margin:auto 0}
.login-card h1{font:600 32px/1.15 var(--display);margin:0}
.login-card .btn-primary{width:100%;height:46px;font-size:15px}
.login-card .in{height:46px}
.brand-sm{display:none;font:600 26px/1 var(--display)}.brand-sm b{color:var(--gold)}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-art{display:none}.brand-sm{display:block}}

/* ---------- TV pairing screen (QR) ---------- */
.pair-screen{display:flex;gap:clamp(28px,5vw,80px);align-items:center;justify-content:center;flex-wrap:wrap;text-align:start;max-width:1200px}
.pair-qr svg{width:clamp(200px,34vmin,420px);height:auto;display:block;border-radius:18px;box-shadow:0 0 0 6px rgba(201,164,92,.35)}
.pair-txt{max-width:560px}.pair-txt p{margin:0 0 10px}
.pair-or{opacity:.7;font-size:.8em;margin-top:18px!important}
.pair-code{font:700 clamp(44px,8vw,120px)/1.05 var(--sans);letter-spacing:.08em;color:#e0bd78;margin:6px 0 22px;font-variant-numeric:tabular-nums}
[dir="rtl"] .pair-screen{text-align:right}
/* ---------- TV exit PIN pad ---------- */
.pinpad{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(8,9,10,.82);backdrop-filter:blur(6px);font-family:var(--sans)}
.pp-card{background:#16181b;border:1px solid #3a3122;border-radius:22px;padding:clamp(22px,3vw,40px);width:min(92vw,440px);text-align:center;color:#f4efe6;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pp-title{display:block;font:600 clamp(20px,2.4vw,30px)/1.2 var(--display);margin-bottom:16px}
.pp-dots{display:flex;gap:12px;justify-content:center;margin:6px 0 8px}.pp-dots i{width:16px;height:16px;border-radius:50%;border:2px solid #c9a45c}.pp-dots i.on{background:#c9a45c}
.pp-msg{min-height:1.4em;color:#e57a63;font-size:15px;margin-bottom:10px}
.pp-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pp-keys button,.pp-menu button,.pp-cancel{font:600 clamp(20px,2.4vw,28px)/1 var(--sans);padding:16px 0;border-radius:14px;border:1px solid #2c2f34;background:#202328;color:#f4efe6;cursor:pointer}
.pp-keys button.ok{background:#c9a45c;color:#1a1408;border-color:#c9a45c}
.pp-keys button:focus,.pp-menu button:focus,.pp-cancel:focus{outline:none;box-shadow:0 0 0 4px #e0bd78}
.pp-cancel{width:100%;margin-top:12px;font-size:18px;background:transparent}
.pp-menu{display:grid;gap:10px}.pp-menu button{font-size:20px;padding:16px}
.pp-note{color:#a8a39a;margin:0 0 16px}
.shake{animation:ppshake .4s}@keyframes ppshake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
/* ---------- connect-TV dialog (admin, from the QR code) ---------- */
.ls-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(0,0,0,.55);padding:16px}
.ls-modal-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:26px;width:min(100%,440px);display:grid;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ls-modal-card h2{margin:0;font:600 24px/1.2 var(--display)}.ls-modal-card p{margin:0}
.ls-modal-ic{width:48px;height:48px;border-radius:14px;background:var(--gold-soft);display:grid;place-items:center}.ls-modal-ic svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.8}
.ls-mcode{color:var(--gold);letter-spacing:.06em}
.ls-mlabel{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.ls-mbtns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.login-pair{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:var(--gold-soft);border:1px solid var(--gold);font-size:14px;margin-bottom:6px}
.login-pair b{color:var(--ink)}.login-pair a{color:var(--gold);font-size:13px}
#pin-card .pair-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#pin-card .pair-row .in{flex:0 1 200px;min-width:140px}

/* ---------- AI template maker ---------- */
.ai-prev{max-height:220px;max-width:100%;object-fit:contain;border-radius:10px;border:1px solid var(--line);justify-self:center}
.ai-busy{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px}
.ai-spin{width:18px;height:18px;border-radius:50%;border:3px solid var(--gold-soft);border-top-color:var(--gold);animation:aispin 1s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.ls-modal .err{color:var(--danger);font-size:14px}