:root {
  --bg: #0b0c10;
  --panel: #13151c;
  --panel-2: #1a1d26;
  --panel-3: #21252f;
  --border: #2a2f3a;
  --border-soft: #21252e;
  --text: #eceef4;
  --muted: #8a90a0;
  --muted-2: #626878;
  --accent: #4f8cff;
  --accent-strong: #3b7bff;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --danger: #ff5c6c;
  --ok: #35c07a;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --toolbar-bg: rgba(19, 21, 28, 0.7);
  --canvas-bg: #000;
  --thumb-bg: #0e1017;
  --thumb-overlay: rgba(0, 0, 0, 0.65);
  --thumb-text: #fff;
  --device-mini-bg: #0e1017;
  --device-mini-border: var(--muted);
  --stage-1: #171a22;
  --stage-2: #0b0c10;
  --primary-text: #04122e;
  color-scheme: dark;
}

.light-theme {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-2: #f3f4f8;
  --panel-3: #e7e9f1;
  --border: #d1d5db;
  --border-soft: #e2e8f0;
  --text: #111827;
  --muted: #6b7280;
  --muted-2: #4b5563;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --danger: #dc2626;
  --ok: #16a34a;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --toolbar-bg: rgba(255, 255, 255, 0.85);
  --canvas-bg: #f8fafc;
  --thumb-bg: #edf2f7;
  --thumb-overlay: rgba(255, 255, 255, 0.8);
  --thumb-text: #111827;
  --device-mini-bg: #e2e8f0;
  --device-mini-border: #94a3b8;
  --stage-1: #f8fafc;
  --stage-2: #eef2ff;
  --primary-text: #0f172a;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Cairo", "Tajawal", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#appShell.studio-tab-open{height:100vh;height:100dvh;min-height:0;overflow:hidden}
#appShell.studio-tab-open>.topbar{position:relative;inset-block-start:auto;flex:0 0 auto}
#appShell.studio-tab-open>#videoPage,#appShell.studio-tab-open>#iconPage,#appShell.studio-tab-open>#iconLibraryPage,#appShell.studio-tab-open>#packagesPage{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-margin-top:0}

button {
  font-family: inherit;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* ========== Landing Page Styles ========== */
.landing-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(20, 184, 166, 0.08) 0%, transparent 40%);
  display: flex;
  flex-direction: column;
}

.landing-page.hidden {
  display: none !important;
}

/* Header */
.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 5%;
  background: rgba(var(--panel-rgb), 0.7);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--border);
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text);
}

.logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #2dd4bf);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.logo-icon:has(>img){overflow:hidden;background:transparent;padding:0}
.logo-icon>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

.landing-nav {
  display: flex;
  gap: 30px;
}

.landing-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  transition: color 0.2s;
}

.landing-nav a:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .landing-nav { display: none; }
}

/* Public-facing product page refinement */
#loginPage{background-image:radial-gradient(ellipse at 14% 24%,rgba(79,140,255,.11),transparent 38%),radial-gradient(ellipse at 82% 68%,rgba(20,184,166,.09),transparent 35%)}
#loginPage .landing-header{padding:13px clamp(20px,5vw,76px);background:color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:0 3px 18px rgba(15,23,42,.04)}
#loginPage .landing-logo{font-size:1.05rem;gap:10px}
#loginPage .landing-nav{gap:26px}
#loginPage .landing-nav a{font-size:.86rem;transition:color .18s,transform .18s}
#loginPage .landing-nav a:hover{transform:translateY(-1px)}
#loginPage .landing-hero{position:relative;min-height:min(710px,calc(100vh - 70px));padding:60px clamp(24px,9vw,140px);gap:clamp(30px,8vw,120px);max-width:1500px;margin-inline:auto}
#loginPage .hero-text{max-width:620px}
#loginPage .hero-title{max-width:690px;font-size:clamp(2.45rem,4.35vw,3.85rem);line-height:1.28;letter-spacing:-.045em;margin-bottom:20px;text-wrap:balance}
#loginPage .hero-subtitle{max-width:550px;font-size:1.08rem;line-height:1.9;margin-bottom:28px}
#loginPage #authGoogleMain{min-height:58px;padding:15px 27px;border-radius:14px;box-shadow:0 12px 28px rgba(37,99,235,.19)}
#loginPage #authGoogleMain:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,99,235,.24)}
#loginPage .hero-preview{min-width:280px;position:relative}
#loginPage .hero-preview:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,rgba(79,140,255,.2),rgba(20,184,166,.08) 46%,transparent 72%);filter:blur(8px)}
#loginPage .mockup-frame{z-index:1;width:245px;height:490px;border-width:7px;border-radius:37px;box-shadow:-16px 25px 65px rgba(35,48,93,.2),0 0 0 1px rgba(255,255,255,.65) inset}
#loginPage .mockup-content{border:1px solid rgba(255,255,255,.22);box-shadow:0 15px 50px rgba(30,50,120,.12)}
#loginPage .landing-about{padding:76px 5%;background:color-mix(in srgb,var(--panel) 76%,var(--bg));}
#loginPage .landing-about h2{margin:0 0 12px;font-size:clamp(1.65rem,3vw,2.15rem);letter-spacing:-.035em}
#loginPage #about:after{content:"أدوات عملية تساعدك على تقديم تطبيقك بصورة تليق به";display:block;margin:-2px auto 30px;color:var(--muted);font-size:.9rem}
#loginPage .features-grid{gap:16px;max-width:1080px}
#loginPage .feature-card{padding:28px 24px 26px;border-radius:17px;text-align:right;background:var(--panel);box-shadow:0 8px 25px rgba(28,38,75,.045);transition:transform .2s,border-color .2s,box-shadow .2s}
#loginPage .feature-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 38%,var(--border));box-shadow:0 16px 32px rgba(28,38,75,.09)}
#loginPage .feature-icon{width:48px;height:48px;margin:0 0 19px;border-radius:14px;background:var(--accent-soft);color:var(--accent)}
#loginPage .feature-icon svg{width:24px;height:24px}
#loginPage .feature-card h3{margin:0 0 8px;font-size:1rem}
#loginPage .feature-card p{margin:0;font-size:.84rem;line-height:1.85}
#loginPage .stats-bar{gap:clamp(22px,6vw,88px);padding:24px;background:color-mix(in srgb,var(--panel-2) 76%,var(--bg))}
#loginPage .stat b{font-size:1.55rem}
#loginPage .stat span{font-size:.76rem}
#loginPage #pricing{background:var(--bg)}
#loginPage .pricing-grid{max-width:1060px;gap:16px;align-items:stretch}
#loginPage .pricing-card{display:flex;flex-direction:column;align-items:center;min-height:250px;padding:27px 24px;border-radius:18px;text-align:center;background:var(--panel);box-shadow:0 8px 25px rgba(28,38,75,.05)}
#loginPage .pricing-card.featured{position:relative;transform:translateY(-5px);border-width:2px;box-shadow:0 15px 35px rgba(59,90,220,.14)}
#loginPage .pricing-card h3{font-size:1.05rem}
#loginPage .pricing-price{font-size:2.15rem;margin:13px 0}
#loginPage .pricing-card p{flex:1;color:var(--muted);font-size:.82rem;line-height:1.9}
#loginPage .pricing-card .btn{min-height:42px;min-width:150px;border-radius:10px}
#loginPage .faq-item{padding:17px 19px;border-radius:13px;box-shadow:0 4px 16px rgba(28,38,75,.025)}
#loginPage .landing-contact{padding:76px 5%;background:color-mix(in srgb,var(--panel) 78%,var(--bg))}
#loginPage .contact-form{border-radius:18px;box-shadow:0 12px 36px rgba(28,38,75,.055)}
#loginPage .landing-footer{padding-top:48px}
/* Refined public landing experience */
#loginPage{--landing-ink:#111827;--landing-blue:#2864f0;--landing-teal:#16b8ad;background-color:#f7f9fd;background-image:radial-gradient(ellipse at 74% 20%,rgba(66,126,246,.12),transparent 34%),radial-gradient(ellipse at 16% 47%,rgba(24,184,173,.09),transparent 31%),linear-gradient(180deg,#f9fbff 0%,#f4f7fc 54%,#fff 100%)}
#loginPage .landing-header{min-height:72px;padding:11px clamp(20px,5.5vw,88px);border-bottom-color:rgba(203,213,225,.72);box-shadow:0 5px 25px rgba(15,23,42,.035)}
#loginPage .landing-logo{font-size:.98rem;letter-spacing:-.025em}
#loginPage .landing-logo .logo-icon{width:40px;height:40px;border-radius:13px}
#loginPage .landing-nav{padding:7px;border:1px solid rgba(203,213,225,.65);border-radius:999px;background:rgba(255,255,255,.65);gap:4px}
#loginPage .landing-nav a{padding:9px 15px;border-radius:999px;font-size:.82rem}
#loginPage .landing-nav a:hover{background:#edf3ff;color:var(--landing-blue)}
#loginPage .landing-auth-top .auth-google-btn{border-radius:11px;min-height:42px}
#loginPage .landing-hero{width:100%;max-width:1440px;min-height:min(700px,calc(100vh - 72px));padding:66px clamp(28px,8vw,128px) 68px;gap:clamp(56px,9vw,145px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(310px,.82fr);direction:rtl;overflow:hidden}
#loginPage .hero-text{max-width:650px;z-index:2}
#loginPage .hero-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;margin-bottom:21px;border:1px solid rgba(37,99,235,.16);border-radius:999px;background:rgba(255,255,255,.72);color:#35578c;font-size:.79rem;font-weight:750;box-shadow:0 5px 20px rgba(37,99,235,.055)}
#loginPage .hero-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#2864f0,#18b8ad);box-shadow:0 0 0 4px rgba(40,100,240,.09)}
#loginPage .hero-title{max-width:650px;margin:0 0 19px;color:#121a2b;font-size:clamp(2.8rem,5.5vw,5.1rem);font-weight:950;line-height:1.16;letter-spacing:-.055em;text-wrap:balance}
#loginPage .hero-title .text-gradient{background:linear-gradient(100deg,#2864f0 8%,#16aaa9 92%);background-clip:text;-webkit-background-clip:text;color:transparent}
#loginPage .hero-subtitle{max-width:550px;margin:0 0 26px;color:#61708a;font-size:1.02rem;line-height:2;text-wrap:pretty}
#loginPage .hero-actions{display:flex;align-items:center;gap:19px;flex-wrap:wrap}
#loginPage #authGoogleMain{min-height:57px;padding:14px 23px;border-radius:13px;box-shadow:0 11px 26px rgba(37,99,235,.2);font-weight:800}
#loginPage .hero-secondary-action{display:inline-flex;align-items:center;gap:9px;color:#35435a;font-weight:750;text-decoration:none;font-size:.9rem;transition:color .2s,gap .2s}
#loginPage .hero-secondary-action:hover{color:var(--landing-blue);gap:13px}
#loginPage .hero-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:21px;color:#76839a;font-size:.76rem}
#loginPage .hero-proof b{display:inline-grid;place-items:center;width:17px;height:17px;margin-inline-end:5px;border-radius:50%;background:#e2f7ef;color:#13956e;font-size:.68rem}
#loginPage .hero-preview{min-width:300px;min-height:515px;display:grid;place-items:center;isolation:isolate}
#loginPage .hero-preview:before{width:460px;height:460px;background:radial-gradient(circle,rgba(77,132,255,.2),rgba(30,190,177,.11) 42%,transparent 71%);filter:blur(5px);z-index:-2}
#loginPage .preview-orbit{position:absolute;border:1px solid rgba(94,132,203,.12);border-radius:50%;z-index:-1;pointer-events:none}
#loginPage .preview-orbit-one{width:440px;height:440px}
#loginPage .preview-orbit-two{width:365px;height:365px;border-style:dashed;opacity:.8}
#loginPage .mockup-frame{width:252px;height:500px;border:7px solid #fff;border-radius:39px;background:linear-gradient(150deg,#2864f0 1%,#7655ec 47%,#16b6ad 100%);box-shadow:0 32px 75px rgba(34,56,111,.23),0 0 0 1px rgba(90,119,176,.17);transform:rotate(-5deg);transition:transform .35s}
#loginPage .mockup-frame:hover{transform:rotate(-2deg) translateY(-5px)}
#loginPage .mockup-inner{inset:8px;border-radius:28px;background:linear-gradient(155deg,#2667ed,#7659ed 58%,#1aaea9);padding:8px}
#loginPage .mockup-content{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:15px;padding:17px 14px;border:1px solid rgba(255,255,255,.24);border-radius:22px;background:linear-gradient(155deg,rgba(13,26,61,.18),rgba(255,255,255,.09));box-shadow:inset 0 1px rgba(255,255,255,.1);color:white;overflow:hidden}
#loginPage .mockup-content:before{content:"";position:absolute;width:180px;height:180px;top:38px;right:-68px;border-radius:50%;background:rgba(255,255,255,.12);filter:blur(2px)}
#loginPage .mockup-status{display:flex;gap:4px;align-self:flex-start;opacity:.9}.mockup-status i{display:block;width:4px;height:4px;border-radius:50%;background:#fff}
#loginPage .mockup-app-mark{position:relative;display:grid;place-items:center;width:49px;height:49px;margin-top:16px;border:1px solid rgba(255,255,255,.3);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.1));font-size:1.45rem;box-shadow:0 10px 25px rgba(18,35,80,.15)}
#loginPage .mockup-copy{position:relative;display:grid;gap:8px;padding:5px 0 10px}.mockup-copy b{font-size:1.55rem;line-height:1.45;letter-spacing:-.03em}.mockup-copy span{color:rgba(255,255,255,.79);font-size:.7rem}
#loginPage .mockup-ui-card{position:relative;display:flex;align-items:center;gap:9px;padding:11px 9px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px)}
#loginPage .mockup-ui-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.2);font-size:1rem}.mockup-ui-icon.mint{background:rgba(61,236,190,.24)}
#loginPage .mockup-ui-card span:nth-child(2){display:grid;gap:3px;flex:1}.mockup-ui-card b{font-size:.67rem}.mockup-ui-card small{color:rgba(255,255,255,.75);font-size:.56rem}.mockup-ui-card>i{font-style:normal;color:rgba(255,255,255,.8)}
#loginPage .preview-caption{position:absolute;top:20px;right:-44px;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid rgba(226,232,240,.9);border-radius:14px;background:rgba(255,255,255,.86);box-shadow:0 12px 32px rgba(32,53,92,.1);backdrop-filter:blur(12px)}
#loginPage .preview-caption-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#edf3ff;color:#3268e9;font-size:1.1rem}.preview-caption>span:last-child{display:grid;gap:3px}.preview-caption b{font-size:.72rem;color:#26344c}.preview-caption small{font-size:.62rem;color:#8490a4}
#loginPage .preview-floating-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid rgba(226,232,240,.86);border-radius:12px;background:rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(25,45,82,.1);color:#3c4c67;font-size:.68rem;backdrop-filter:blur(10px)}
#loginPage .preview-floating-chip span{display:grid;place-items:center;width:23px;height:23px;border-radius:8px;background:#eaf3ff;color:#3471ed}.preview-chip-top{left:-40px;top:145px}.preview-chip-bottom{right:-30px;bottom:87px}.preview-chip-bottom span{background:#e4f8f2;color:#149775}
#loginPage .landing-trust-strip{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;padding:18px 24px;border-block:1px solid rgba(209,218,232,.72);background:rgba(255,255,255,.62);color:#758198;font-size:.76rem}
#loginPage .landing-trust-strip>span{color:#35445d;font-weight:800}.landing-trust-strip b{font-weight:650}.landing-trust-strip i{width:4px;height:4px;border-radius:50%;background:#9caac0}
#loginPage .landing-about{padding:86px clamp(20px,6vw,90px);background:rgba(255,255,255,.76)}
#loginPage .landing-section-heading{text-align:center;margin:0 auto 34px;max-width:650px}
#loginPage .landing-section-heading>span{display:inline-block;margin-bottom:10px;color:#3170e9;font-size:.76rem;font-weight:850}
#loginPage .landing-section-heading h2{margin:0 0 10px;font-size:clamp(1.75rem,3.2vw,2.45rem);font-weight:900;letter-spacing:-.04em}
#loginPage .landing-section-heading p{margin:0;color:#758198;font-size:.9rem;line-height:1.8}
#loginPage #about:after{display:none}
#loginPage .features-grid{max-width:1120px;gap:18px}
#loginPage .feature-card{position:relative;min-height:210px;padding:27px 25px;border:1px solid rgba(213,221,234,.9);border-radius:19px;background:linear-gradient(150deg,#fff,#fbfcff);box-shadow:0 8px 26px rgba(25,44,80,.045)}
#loginPage .feature-card:hover{border-color:rgba(60,112,232,.3);box-shadow:0 17px 40px rgba(33,62,117,.09)}
#loginPage .feature-icon{position:relative;display:grid;place-items:center;margin:0 0 20px;width:50px;height:50px;border:1px solid #e0eaff;border-radius:15px;background:linear-gradient(145deg,#f0f5ff,#eaf8f7);color:#3470e9}
#loginPage .feature-icon>span{position:absolute;inset-inline-end:-8px;top:-8px;display:grid;place-items:center;width:20px;height:20px;border:2px solid white;border-radius:50%;background:#dceaff;color:#4772bb;font-size:.52rem;font-weight:900}
#loginPage .feature-card h3{font-size:1.02rem;font-weight:850}.feature-card p{color:#77849a}
#loginPage .stats-bar{margin:0 auto;width:min(1120px,calc(100% - 40px));border:1px solid rgba(213,221,234,.85);border-radius:18px;background:linear-gradient(110deg,#f3f7ff,#f2fbfa)}
#loginPage #pricing{padding-top:78px;padding-bottom:84px}
#loginPage #pricing>h2,#loginPage #pricing>h2+p{text-align:center}
#loginPage .landing-contact{padding-top:80px;padding-bottom:80px}
#loginPage .landing-footer{margin-top:auto}
@media(max-width:900px){#loginPage .landing-hero{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);padding:56px 6%;gap:30px}#loginPage .hero-title{font-size:clamp(2.65rem,6.3vw,4rem)}#loginPage .hero-preview{min-width:250px;min-height:440px}#loginPage .mockup-frame{width:205px;height:410px}#loginPage .preview-orbit-one{width:365px;height:365px}#loginPage .preview-orbit-two{width:310px;height:310px}#loginPage .preview-caption{right:-15px}.preview-chip-top{left:-17px}}
@media(max-width:650px){#loginPage .landing-header{min-height:62px;padding:8px 14px}#loginPage .landing-logo{font-size:.78rem;gap:7px}#loginPage .landing-logo .logo-icon{width:34px;height:34px}#loginPage .landing-auth-top .auth-google-btn{min-height:36px;padding:8px 10px;font-size:.67rem}#loginPage .landing-hero{grid-template-columns:1fr;gap:15px;min-height:auto;padding:43px 22px 28px;text-align:center}#loginPage .hero-text{margin-inline:auto}#loginPage .hero-eyebrow{margin-bottom:16px;font-size:.68rem}#loginPage .hero-title{margin-inline:auto;font-size:clamp(2.35rem,10.5vw,3.25rem);line-height:1.24}#loginPage .hero-subtitle{font-size:.88rem;margin:0 auto 18px;line-height:1.9}#loginPage .hero-actions{justify-content:center;gap:13px}#loginPage #authGoogleMain{width:auto;min-height:50px;padding:12px 17px;font-size:.82rem}#loginPage .hero-secondary-action{font-size:.78rem}#loginPage .hero-proof{justify-content:center;gap:10px 15px;font-size:.68rem;margin-top:15px}#loginPage .hero-preview{min-width:0;min-height:380px;margin-top:8px}#loginPage .mockup-frame{width:180px;height:350px;border-radius:31px;border-width:6px}#loginPage .mockup-inner{inset:7px;border-radius:23px;padding:6px}#loginPage .mockup-content{gap:10px;padding:13px 11px;border-radius:18px}#loginPage .mockup-app-mark{width:39px;height:39px;margin-top:7px;border-radius:13px;font-size:1.15rem}#loginPage .mockup-copy b{font-size:1.25rem}#loginPage .mockup-ui-card{padding:8px}.preview-caption{top:6px!important;right:calc(50% - 145px)!important}.preview-chip-top{top:85px;left:calc(50% - 164px)}.preview-chip-bottom{right:calc(50% - 150px);bottom:26px}.preview-chip-top,.preview-chip-bottom{font-size:.59rem;padding:7px 9px}#loginPage .preview-orbit-one{width:320px;height:320px}#loginPage .preview-orbit-two{width:265px;height:265px}#loginPage .landing-trust-strip{gap:10px 13px;padding:15px 12px;font-size:.63rem}#loginPage .landing-about{padding:58px 20px}#loginPage .landing-section-heading{margin-bottom:24px}#loginPage .feature-card{min-height:0}#loginPage .stats-bar{width:calc(100% - 32px)}#loginPage .landing-contact{padding:58px 18px}}
/* Landing theme-aware surfaces and readable type. */
#loginPage{--landing-page-bg:#f7f9fd;--landing-page-glow-a:rgba(66,126,246,.12);--landing-page-glow-b:rgba(24,184,173,.09);--landing-section-bg:rgba(255,255,255,.76);--landing-surface:#fff;--landing-surface-soft:#f7f9fd;--landing-heading:#111827;--landing-copy:#61708a;--landing-muted:#758198;--landing-border:rgba(203,213,225,.72);--landing-nav-surface:rgba(255,255,255,.65);--landing-float:rgba(255,255,255,.9);--landing-card-shadow:0 12px 32px rgba(32,53,92,.1);background-color:var(--landing-page-bg);background-image:radial-gradient(ellipse at 74% 20%,var(--landing-page-glow-a),transparent 34%),radial-gradient(ellipse at 16% 47%,var(--landing-page-glow-b),transparent 31%),linear-gradient(180deg,var(--landing-page-bg),var(--landing-page-bg) 54%,var(--landing-section-bg))}
#loginPage .landing-header{border-bottom-color:var(--landing-border);background:color-mix(in srgb,var(--landing-surface) 90%,transparent)}
#loginPage .landing-nav{border-color:var(--landing-border);background:var(--landing-nav-surface)}
#loginPage .landing-nav a{color:var(--landing-copy)}
#loginPage .hero-eyebrow{border-color:color-mix(in srgb,var(--accent) 22%,var(--landing-border));background:var(--landing-float);color:var(--landing-copy)}
#loginPage .hero-title{color:var(--landing-heading)}
#loginPage .hero-subtitle,#loginPage .landing-section-heading p{color:var(--landing-copy)}
#loginPage .hero-secondary-action{color:var(--text)}
#loginPage .hero-proof{color:var(--landing-muted)}
#loginPage .preview-caption,#loginPage .preview-floating-chip{border-color:var(--landing-border);background:var(--landing-float);box-shadow:var(--landing-card-shadow)}
#loginPage .preview-caption b{color:var(--text)}
#loginPage .preview-caption small{color:var(--landing-muted)}
#loginPage .preview-floating-chip{color:var(--text)}
#loginPage .landing-trust-strip{border-color:var(--landing-border);background:color-mix(in srgb,var(--landing-surface) 62%,transparent);color:var(--landing-muted)}
#loginPage .landing-trust-strip>span{color:var(--text)}
#loginPage .landing-about{background:var(--landing-section-bg)}
#loginPage .landing-section-heading p,#loginPage .feature-card p{color:var(--landing-copy)}
#loginPage .feature-card{border-color:var(--landing-border);background:linear-gradient(150deg,var(--landing-surface),var(--landing-surface-soft));box-shadow:0 8px 26px rgba(15,23,42,.055)}
#loginPage .feature-icon{border-color:color-mix(in srgb,var(--accent) 18%,var(--landing-border));background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--landing-surface)),color-mix(in srgb,#16b8ad 8%,var(--landing-surface)))}
#loginPage .feature-icon>span{border-color:var(--landing-surface);background:color-mix(in srgb,var(--accent) 15%,var(--landing-surface));color:var(--landing-copy)}
#loginPage .stats-bar{border-color:var(--landing-border);background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 7%,var(--landing-surface)),color-mix(in srgb,#16b8ad 6%,var(--landing-surface)))}
#loginPage #pricing{background:var(--landing-page-bg)}
#loginPage .faq-item{border:1px solid var(--landing-border);background:var(--landing-surface);color:var(--text)}
#loginPage .faq-item p{color:var(--landing-copy)!important}
#loginPage .landing-contact{background:var(--landing-section-bg)}
html:not(.light-theme) #loginPage{--landing-page-bg:#0b1020;--landing-page-glow-a:rgba(65,112,242,.2);--landing-page-glow-b:rgba(20,184,166,.12);--landing-section-bg:rgba(15,22,39,.9);--landing-surface:#151d30;--landing-surface-soft:#111a2b;--landing-heading:#f3f6fd;--landing-copy:#aab7cc;--landing-muted:#8997ad;--landing-border:rgba(112,130,163,.25);--landing-nav-surface:rgba(21,29,48,.78);--landing-float:rgba(21,29,48,.94);--landing-card-shadow:0 14px 36px rgba(0,0,0,.24)}
html:not(.light-theme) #loginPage .landing-logo{color:#f2f5fc}
html:not(.light-theme) #loginPage .hero-title{color:var(--landing-heading)}
html:not(.light-theme) #loginPage .landing-trust-strip i{background:#63728a}
html:not(.light-theme) #loginPage .landing-trust-strip b{color:#aab7cc}
html:not(.light-theme) #loginPage .hero-proof b{background:rgba(20,184,132,.16);color:#53d6a5}
html:not(.light-theme) #loginPage .stats-bar .stat b{color:#f1f5fc}
html:not(.light-theme) #loginPage .stats-bar .stat span{color:#aab7cc}
html:not(.light-theme) #loginPage .pricing-card{border-color:var(--landing-border);background:var(--landing-surface);color:var(--text)}
html:not(.light-theme) #loginPage .pricing-card p{color:var(--landing-copy)}
html:not(.light-theme) #loginPage .pricing-card.featured{background:linear-gradient(155deg,#172747,#142236)}
html:not(.light-theme) #loginPage .contact-form{border-color:var(--landing-border);background:var(--landing-surface);color:var(--text)}
html:not(.light-theme) #loginPage .contact-form input,html:not(.light-theme) #loginPage .contact-form select,html:not(.light-theme) #loginPage .contact-form textarea{border-color:var(--landing-border);background:#0f1728;color:var(--text)}
html:not(.light-theme) #loginPage .contact-info p,html:not(.light-theme) #loginPage .contact-detail-item p{color:var(--landing-copy)}
html:not(.light-theme) #loginPage .landing-footer{border-color:var(--landing-border);background:#090e19;color:#e8edf7}
html:not(.light-theme) #loginPage .landing-footer p,html:not(.light-theme) #loginPage .landing-footer a{color:#aab7cc}
@media(max-width:900px){#loginPage .landing-hero{min-height:auto;padding:62px 7% 70px;gap:34px}#loginPage .hero-text{max-width:680px}#loginPage .hero-title{max-width:620px;font-size:clamp(2.35rem,6.4vw,3.35rem)}#loginPage .hero-subtitle{margin-inline:auto auto}#loginPage .hero-preview{min-height:330px}#loginPage .mockup-frame{width:175px;height:340px;border-radius:30px}#loginPage .hero-preview:before{width:300px;height:300px}}
@media(max-width:600px){#loginPage .landing-header{padding:10px 16px;gap:10px}#loginPage .landing-logo{font-size:.85rem}#loginPage .landing-auth-top{gap:7px}#loginPage .landing-auth-top .auth-google-btn{padding:9px 12px;font-size:.74rem}#loginPage .landing-theme-btn{width:36px;height:36px}#loginPage .landing-hero{padding:48px 22px 38px;gap:18px}#loginPage .hero-title{max-width:100%;font-size:clamp(2.1rem,8.6vw,2.85rem);line-height:1.32;margin-bottom:13px}#loginPage .hero-subtitle{font-size:.9rem;line-height:1.85;margin-bottom:20px}#loginPage #authGoogleMain{width:100%;min-height:52px;font-size:.95rem}#loginPage .hero-preview{min-height:285px}#loginPage .mockup-frame{width:145px;height:280px;border-radius:26px;border-width:6px}#loginPage .landing-about,#loginPage .landing-contact{padding:54px 20px}#loginPage .landing-about h2{margin-bottom:24px}#loginPage .features-grid{grid-template-columns:1fr;gap:11px}#loginPage .feature-card{padding:20px;border-radius:14px}#loginPage .feature-icon{width:42px;height:42px;margin-bottom:12px}#loginPage .stats-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:22px 16px}#loginPage .stat b{font-size:1.35rem}#loginPage .pricing-grid{grid-template-columns:1fr;max-width:420px}#loginPage .pricing-card{min-height:0;padding:22px}#loginPage .pricing-card.featured{transform:none}#loginPage .contact-form{padding:22px 17px}}

/* Hero Section */
.landing-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 5%;
  min-height: calc(100vh - 80px);
  gap: 40px;
}

.hero-text {
  flex: 1;
  max-width: 600px;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--text);
}

.text-gradient {
  background: linear-gradient(135deg, var(--accent), #14b8a6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 40px;
}

.hero-preview {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.mockup-frame {
  width: 280px;
  height: 560px;
  border-radius: 40px;
  background: var(--panel);
  border: 8px solid var(--border);
  box-shadow: 
    -20px 20px 60px rgba(0,0,0,0.1),
    0 0 0 1px rgba(255,255,255,0.1) inset;
  transform: rotateY(-15deg) rotateX(5deg);
  transition: transform 0.5s ease;
  position: relative;
  overflow: hidden;
}

.mockup-frame:hover {
  transform: rotateY(-5deg) rotateX(2deg) scale(1.02);
}

.mockup-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a855f7, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mockup-content {
  width: 85%;
  height: 85%;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
  .landing-hero {
    flex-direction: column;
    text-align: center;
    padding-top: 60px;
  }
  .hero-text {
    max-width: 100%;
  }
}

/* Buttons */
.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  transition: all 0.3s;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.auth-google-btn:hover {
  background: var(--panel-3);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.btn.lg {
  padding: 16px 32px;
  font-size: 1.1rem;
}

/* About / Features */
.landing-about {
  padding: 80px 5%;
  background: var(--panel);
  text-align: center;
}

.landing-about h2 {
  font-size: 2.5rem;
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  padding: 40px 24px;
  background: var(--bg);
  border-radius: 20px;
  border: 1px solid var(--border);
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 16px;
  display: grid;
  place-items: center;
}

.feature-icon svg {
  width: 32px;
  height: 32px;
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--muted);
  line-height: 1.6;
}

/* Newsletter */
.landing-newsletter {
  padding: 80px 5%;
  text-align: center;
  background: linear-gradient(135deg, var(--panel-2), var(--bg));
}

.newsletter-content {
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-content h2 {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.newsletter-content p {
  color: var(--muted);
  margin-bottom: 30px;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.newsletter-form input {
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  flex: 1;
  max-width: 300px;
}

@media (max-width: 500px) {
  .newsletter-form {
    flex-direction: column;
    align-items: center;
  }
  .newsletter-form input {
    max-width: 100%;
    width: 100%;
  }
  .newsletter-form button {
    width: 100%;
  }
}

/* Footer */
.landing-footer {
  background: var(--panel);
  padding: 60px 5% 20px;
  border-top: 1px solid var(--border);
}

/* Shared visual system for the standalone information and policy pages. */
.site-content-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);background-image:radial-gradient(ellipse at 82% 4%,rgba(79,140,255,.11),transparent 34%),radial-gradient(ellipse at 8% 32%,rgba(20,184,166,.07),transparent 30%)}
.site-page-header{position:sticky;top:0;z-index:80;min-height:72px;padding:11px clamp(20px,5.5vw,88px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:0 5px 25px rgba(15,23,42,.035)}
.site-page-brand{color:var(--text);text-decoration:none;white-space:nowrap;flex:none;min-width:max-content}
.site-page-brand>.logo-icon,.site-page-footer .footer-brand .logo-icon{flex:none;width:38px;height:38px}
.site-page-brand>span:last-child,.site-page-footer .footer-brand .landing-logo>span:last-child{display:block;white-space:nowrap;line-height:1.25}
.site-page-nav{display:flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--border);border-radius:999px;background:var(--panel-2)}
.site-page-nav a{padding:8px 13px;border-radius:999px;color:var(--muted);font-size:.82rem;font-weight:650;text-decoration:none;transition:background .18s,color .18s}
.site-page-nav a:hover,.site-page-nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.site-page-actions{display:flex;align-items:center;gap:10px;justify-self:start}
.site-page-actions .landing-theme-btn{flex:none}
.site-page-home-action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 16px;border-radius:11px;text-decoration:none;font-weight:750;white-space:nowrap}
.site-page-main{width:min(100% - 36px,1040px);margin:0 auto;padding:clamp(34px,6vw,72px) 0;flex:1}
.site-page-kicker{display:flex;align-items:center;gap:9px;margin:0 auto 14px;width:min(100%,900px);color:var(--accent);font-size:.78rem;font-weight:800}
.site-page-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#16b8ad);box-shadow:0 0 0 4px var(--accent-soft)}
.site-content-page .legal-page{max-width:none;margin:0;padding:clamp(24px,5vw,52px);border:1px solid var(--border);border-radius:22px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow);line-height:1.95;overflow-wrap:anywhere}
.site-content-page .legal-page h1{margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--border);font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.4;letter-spacing:-.025em;color:var(--text)}
.site-content-page .legal-page h2{margin:28px 0 10px;color:var(--accent);font-size:1.12rem}
.site-content-page .legal-page p,.site-content-page .legal-page li{color:var(--muted);line-height:1.95}
.site-content-page .legal-page ul{padding-inline-start:1.4rem}
.site-content-page .legal-page a{color:var(--accent);text-underline-offset:3px}
.site-content-page .site-page-footer{padding:60px 5% 20px}
.site-content-page .site-page-footer .footer-grid{grid-template-columns:2fr repeat(3,minmax(0,1fr));max-width:1200px;gap:40px;margin-bottom:40px}
.site-content-page .site-page-footer .footer-brand .landing-logo{font-size:.98rem}
.site-content-page .site-page-footer .footer-brand p{font-size:.84rem}
.site-content-page .site-page-footer .footer-links h4{font-size:.92rem;margin-bottom:12px}
.site-content-page .site-page-footer .footer-links a{font-size:.82rem;margin-bottom:8px}
@media(max-width:760px){.site-page-header{padding:9px 16px;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px}.site-page-nav{grid-column:1/-1;grid-row:2;justify-self:center;gap:0;padding:3px}.site-page-nav a{padding:7px 9px;font-size:.7rem}.site-page-actions{grid-column:2;grid-row:1;gap:7px}.site-page-header .landing-logo{font-size:.82rem;gap:7px}.site-page-header .logo-icon,.site-page-brand>.logo-icon,.site-page-footer .footer-brand .logo-icon{width:34px;height:34px}.site-page-home-action{min-height:36px;padding:7px 10px;font-size:.72rem}.site-content-page .legal-page{padding:23px 19px;border-radius:16px}.site-content-page .site-page-footer .footer-grid{grid-template-columns:1fr 1fr;gap:20px}.site-content-page .site-page-footer .footer-brand{grid-column:1/-1}}
@media(max-width:420px){.site-page-header{grid-template-columns:1fr auto;padding-inline:12px}.site-page-brand{min-width:0}.site-page-header .landing-logo{font-size:.72rem}.site-page-nav{width:100%;justify-content:space-between}.site-page-nav a{padding-inline:7px;font-size:.66rem}.site-page-actions{gap:5px}.site-page-home-action{padding-inline:8px}.site-page-main{width:min(100% - 24px,1040px)}}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.footer-brand p {
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.6;
  max-width: 300px;
}

.footer-links h4 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: var(--text);
}

.footer-links a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Dialogs that genuinely need two columns ask for this (the icon studio: a
   preview next to its controls). Set per dialog by openModal(), not globally, so
   a payment or confirmation box still gets the default 500px. */
.modal-box.modal-wide {
  max-width: min(960px, 100%);
  max-height: min(78vh, 760px);
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 20px;
  left: 20px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
}

.modal-box h2 {
  margin-bottom: 20px;
  color: var(--text);
}

.modal-box p {
  color: var(--muted);
  line-height: 1.6;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--panel-3);
  border-radius: 8px;
  border: 2px solid var(--panel);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 40;
  /* One row, always. Wrapping pushed the export button onto a second line and
     inflated the bar to ~120px, which pushed the sidebars and the canvas
     viewport past the fold. The tab strip is the only part allowed to shrink,
     and it scrolls instead of wrapping. */
  flex-wrap: nowrap;
  min-height: 56px;
}
.light-theme .topbar{ background: rgba(255,255,255,0.9) }
:root:not(.light-theme) .topbar{ background: rgba(19,21,28,0.9) }
/* The tab strip is the only flexible part of the bar: it yields space first and
   scrolls only if even the icon-only tabs no longer fit. */
.topbar-tabs{ display:flex; gap:6px; flex-shrink:1; min-width:0; overflow-x:auto; scrollbar-width:none }
.topbar-tabs::-webkit-scrollbar{ display:none }
.topbar > *{ flex-shrink:0 }
.topbar .spacer{ flex:1; min-width:8px }
@media(max-width:1100px){
  .topbar{ gap:6px; padding:8px 10px }
  .topbar .hide-sm{ display:none !important }
  .brand h1{ font-size:14px }
  .brand span{ display:none }
}
@media(max-width:760px){
  .topbar{ gap:4px }
  .topbar-tabs{ gap:4px }
  .topbar .btn.sm{ padding:6px 8px; font-size:11px }
  .brand{ gap:6px }
  .brand .logo{ width:30px; height:30px }
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.brand .logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--accent), #22d3ee);
  display: grid;
  place-items: center;
  color: var(--primary-text);
  box-shadow: 0 4px 14px rgba(79, 140, 255, 0.4);
}
.brand .logo svg {
  width: 20px;
  height: 20px;
}
.brand .logo:has(>img){overflow:hidden;background:transparent;padding:0}
.brand .logo>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.brand h1 {
  font-size: 16px;
  margin: 0;
  line-height: 1.1;
}
.brand span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.topbar .spacer {
  flex: 1;
}

/* Customer workspace: clearer hierarchy and calmer editing surface */
#appShell{--workspace-gap:12px}
#appShell .topbar{gap:7px;padding:9px 18px;background:color-mix(in srgb,var(--panel) 94%,transparent);border-bottom:1px solid var(--border);box-shadow:0 4px 18px rgba(15,23,42,.045)}
#appShell .brand{gap:11px;flex:0 0 auto}
#appShell .brand .logo{width:38px;height:38px;border-radius:12px}
#appShell .brand h1{font-size:14px;font-weight:900;letter-spacing:-.02em}
#appShell .brand span{font-size:10px}
#appShell .topbar-tabs{margin-inline-start:12px!important;padding:4px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;gap:3px!important}
#appShell .topbar-tabs .btn{min-height:34px;padding:7px 10px;border-color:transparent;border-radius:9px;background:transparent!important;color:var(--muted)!important;font-size:11px;white-space:nowrap}
#appShell .topbar-tabs .btn.active{background:var(--panel)!important;color:var(--accent)!important;border-color:var(--border);box-shadow:0 2px 6px rgba(20,25,45,.07)}
#appShell .topbar-tabs .btn.active[data-studio-tab]{background:var(--accent)!important;color:#fff!important;border-color:var(--accent);box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 24%,transparent)}
#appShell .topbar #btnPackagesTop.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)}
#appShell .topbar>.btn,#appShell .topbar .export-group>.btn{min-height:36px;border-radius:10px}
#appShell #btnNewProject{box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 24%,transparent)}
#appShell #btnExport{min-height:38px;padding-inline:14px;border-radius:11px}
#appShell .workspace{gap:12px;padding:12px 16px 16px;grid-template-columns:minmax(278px,310px) minmax(0,1fr) minmax(278px,310px);height:calc(100vh - var(--topbar-h,56px));background:var(--bg)}
#appShell.studio-tab-open{height:100dvh;min-height:0;overflow:hidden}
#appShell.studio-tab-open>.topbar{position:relative;top:auto}
#appShell.studio-tab-open>#videoPage,#appShell.studio-tab-open>#iconPage,#appShell.studio-tab-open>#iconLibraryPage,#appShell.studio-tab-open>#packagesPage{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-margin-top:0}
#appShell .sidebar{background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:4px 0 28px;box-shadow:0 5px 22px rgba(20,25,45,.045);scrollbar-width:thin}
#appShell .sidebar.right{border:1px solid var(--border)}
#appShell .section{padding:16px 16px;border-bottom:1px solid var(--border-soft)}
#appShell .section h2{min-height:24px;margin-bottom:13px;color:var(--text);font-size:11px;font-weight:900;letter-spacing:0}
#appShell .section h2 svg{width:17px;height:17px}
#appShell .field{margin-bottom:13px}
#appShell .field>label{font-size:11px;font-weight:700;color:var(--muted)}
#appShell .field select,#appShell .field input[type=text],#appShell .field textarea{min-height:39px;border-radius:9px;background:var(--panel-2)}
#appShell .stage{border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 22px rgba(20,25,45,.045);background:radial-gradient(ellipse at 50% 22%,color-mix(in srgb,var(--stage-1) 85%,var(--accent-soft)),var(--stage-2) 75%)}
#appShell .stage-toolbar{min-height:49px;padding:7px 12px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--panel) 92%,transparent)}
#appShell .stage-toolbar .btn{min-width:32px;min-height:32px;border-radius:9px}
#appShell .stage-toolbar .zoom-label{min-width:42px;text-align:center;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
#appShell .stage-toolbar .hint{margin-inline-start:8px;font-size:10px;line-height:1.5}
#appShell #sidebarLeft>.user-home{margin:14px 13px 4px;padding:15px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));border-radius:16px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--accent-soft) 56%,var(--panel)));box-shadow:0 8px 24px rgba(30,45,100,.055)}
.user-home-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.user-home-eyebrow{display:block;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.04em}.user-home-head h2{margin:4px 0;font-size:16px;font-weight:900;color:var(--text);letter-spacing:-.03em}.user-home-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.7}.user-home-live{display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--muted);font-size:9px;white-space:nowrap}.user-home-live i{width:6px;height:6px;border-radius:50%;background:#1ab87a;box-shadow:0 0 0 3px rgba(26,184,122,.12)}
.user-home-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.user-home-action{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:39px;padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer;text-align:start}.user-home-action span{color:var(--accent);font-size:16px}.user-home-action b{font-size:9px;line-height:1.3}.user-home-action--primary{background:var(--accent);border-color:var(--accent);color:#fff}.user-home-action--primary span{color:#fff}.user-home-stats{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:7px;margin-top:12px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.user-home-stats>div{display:grid;gap:2px}.user-home-stats>div b{font-size:12px;line-height:1.3;color:var(--text)}.user-home-stats>div span{font-size:8px;color:var(--muted)}.user-home-stats>button{border:0;background:transparent;color:var(--accent);font-size:8px;font-weight:800;cursor:pointer;white-space:nowrap}.user-home-projects-head{display:flex;align-items:center;justify-content:space-between;margin:11px 0 7px}.user-home-projects-head>div{display:flex;align-items:center;gap:7px}.user-home-projects-head b{font-size:10px}.user-home-projects-head small{font-size:8px;color:var(--muted)}.user-home-projects-head button{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--muted);font-size:15px;cursor:pointer}.user-home-projects{display:grid;gap:5px}.user-home-project{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:7px;border:1px solid transparent;border-radius:10px;background:var(--panel);text-align:start;cursor:pointer}.user-home-project:hover,.user-home-project.active{border-color:var(--accent-soft);background:var(--accent-soft)}.user-home-project-thumb{display:grid;place-items:center;width:31px;height:35px;flex:0 0 31px;border-radius:7px;background:linear-gradient(145deg,#73a8ff,#7d6df0);color:#fff;font-size:15px}.user-home-project-copy{display:grid;gap:3px;min-width:0;flex:1}.user-home-project-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:9px}.user-home-project-copy small{color:var(--muted);font-size:8px}.user-home-project-arrow{color:var(--muted);font-size:11px}.user-home-empty{display:grid;justify-items:center;gap:5px;padding:14px 8px;border:1px dashed var(--border);border-radius:10px;text-align:center}.user-home-empty>span{color:var(--accent);font-size:19px}.user-home-empty b{font-size:9px}.user-home-empty small{max-width:190px;color:var(--muted);font-size:8px;line-height:1.7}.user-home-loading{display:flex;align-items:center;gap:8px;padding:12px;color:var(--muted);font-size:9px}.user-home-loading i{width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:user-home-spin .75s linear infinite}@keyframes user-home-spin{to{transform:rotate(360deg)}}
#appShell .device-controls-empty{pointer-events:none;opacity:.48;filter:saturate(.65)}
#appShell .canvas-wrap{flex:1;min-height:0;padding:18px}
#appShell #editorCanvas{border-radius:8px}
#appShell .slides{min-height:116px;padding:12px 14px;border-top:1px solid var(--border);background:var(--panel)}
#appShell .slide-thumb{width:104px;height:164px;border-width:2px;border-radius:12px;background:var(--panel-2)}
#appShell .slide-thumb.active{border-width:2px}
#appShell .mobile-tabs{padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:8px;background:color-mix(in srgb,var(--panel) 96%,transparent)}
#appShell .mobile-tabs button{min-height:42px;border-radius:11px;font-size:12px}
#appShell .mobile-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:1200px){#appShell .workspace{grid-template-columns:minmax(250px,285px) minmax(0,1fr) minmax(250px,285px);gap:9px;padding-inline:10px}#appShell .topbar{padding-inline:10px;gap:5px}#appShell .topbar-tabs{margin-inline-start:4px!important}}
@media(max-width:980px){#appShell .workspace{position:relative;gap:0;padding:8px;height:calc(100dvh - var(--topbar-h,56px) - 61px)}#appShell .stage{grid-column:1;grid-row:1;border-radius:14px}#appShell .sidebar{inset:8px 8px 8px auto;width:min(360px,92vw);height:auto;max-height:none;z-index:25;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.18)}#appShell .sidebar.right{inset-inline:auto 8px}#appShell .canvas-wrap{padding:12px}#appShell .slides{min-height:174px}#appShell .slide-thumb{width:90px;height:142px}}
@media(max-width:760px){#appShell .topbar{min-height:54px;padding:6px 8px}#appShell .brand .logo{width:31px;height:31px;border-radius:10px}#appShell .brand h1{font-size:11px}#appShell .topbar-tabs{margin-inline-start:0!important;padding:3px;border-radius:10px}#appShell .topbar-tabs .btn{min-height:31px;padding:6px 8px;font-size:10px}#appShell .topbar #btnUndo,#appShell .topbar #btnRedo,#appShell .topbar #btnPackagesTop,#appShell .topbar #btnContactTop{display:none}#appShell .topbar #btnExport{padding-inline:10px;font-size:11px}#appShell .stage-toolbar{min-height:43px;padding:5px 8px}#appShell .stage-toolbar .hint{display:none}}
@media(max-width:520px){#appShell .brand h1{max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#appShell .topbar #btnMore{min-width:31px}#appShell .topbar #btnNewProject{padding:7px 9px}#appShell .workspace{padding:6px;height:calc(100dvh - var(--topbar-h,54px) - 59px)}#appShell .canvas-wrap{padding:7px}#appShell .slides{min-height:162px;padding:9px 10px;gap:9px}#appShell .slide-thumb{width:88px;height:140px}}
@media(max-width:980px){#appShell .topbar{display:grid;grid-template-columns:minmax(120px,1fr) auto;grid-template-areas:"brand actions" "tabs tabs";gap:6px;padding:8px 12px;min-height:0}#appShell .topbar .brand{grid-area:brand;min-width:0}#appShell .topbar .spacer{display:none}#appShell .topbar .topbar-tabs{grid-area:tabs;width:100%;margin:0!important;overflow-x:auto}#appShell .topbar>#btnUndo,#appShell .topbar>#btnRedo{display:none}#appShell .topbar>#btnNewProject{grid-area:actions}#appShell .topbar>.export-group:last-of-type{grid-area:actions;justify-self:end;margin-inline-end:112px}#appShell .topbar #btnExport{grid-area:actions;justify-self:end;margin-inline-end:0}#appShell .topbar #btnPackagesTop,#appShell .topbar #btnInbox,#appShell .topbar #btnOrdersTop,#appShell .topbar #btnContactTop,#appShell .topbar #btnProfile{display:none!important}#appShell .topbar .export-group:not(:last-of-type){display:none}#appShell .workspace{height:calc(100dvh - var(--topbar-h,100px) - 60px)}#appShell .mobile-tabs{position:relative;z-index:35}}
#appShell .sidebar.left>.user-home{display:block}
@media(min-width:981px){#appShell:not(.sidebars-expanded) .workspace{grid-template-columns:minmax(0,1fr)!important}#appShell:not(.sidebars-expanded) .workspace>.sidebar{display:none}#appShell #toggleSidebars{min-width:94px;font-size:10px}}
@media(max-width:980px){#appShell #toggleSidebars{display:none}}
.device-card-locked{opacity:.66;border-style:dashed!important}
.text-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.text-style-grid button{min-width:0;white-space:nowrap;font-size:10px}
.landing-page .landing-header{position:sticky;inset-block-start:0;z-index:80;flex:0 0 auto;isolation:isolate;transition:box-shadow .18s ease,background-color .18s ease}
.landing-page .landing-header.is-scrolled{box-shadow:0 8px 24px rgba(15,23,42,.12);background:color-mix(in srgb,var(--panel) 94%,transparent)}
.preset-locked{position:relative;opacity:.76}.preset-locked::after{content:"🔒";position:absolute;inset-inline-end:2px;inset-block-start:1px;font-size:9px}
@media(max-width:600px){#appShell .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "tabs tabs";padding:7px 9px;gap:5px}#appShell .topbar .brand{max-width:180px}#appShell .topbar .brand .hide-sm{display:none!important}#appShell .topbar #btnNewProject{grid-area:actions;margin-inline-end:92px;min-height:32px;font-size:10px}#appShell .topbar>.export-group:last-of-type{margin-inline-end:0}#appShell .topbar #btnExport{min-height:32px;padding:5px 8px;font-size:10px}#appShell .topbar-tabs{min-height:34px}#appShell .topbar-tabs .btn{font-size:10px;min-width:max-content;padding:6px 10px}#appShell .topbar-tabs .btn:not(#navScreenshots){font-size:10px}#appShell .workspace{height:calc(100dvh - var(--topbar-h,94px) - 58px)}#appShell .stage-toolbar .hint{display:none}}

/* ---------- Layout ---------- */
.workspace {
  /* A definite height, not flex:1 - the shell is only min-height:100vh, so a
     flexible item was stretched to its content and the grid row was sized by
     the tallest child. A long sidebar then dragged the stage to ~1600px, the
     canvas was fitted to that instead of the visible area, and the phone
     preview scrolled out of view. flex:0 0 auto pins the height instead. */
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  /* minmax(0,1fr) keeps the single row at the container height so the panels
     can actually be shorter than their content and scroll inside it. */
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  height: calc(100vh - var(--topbar-h, 56px));
  align-items: stretch;
  padding: 0 16px 16px;
  overflow: hidden;
}
.sidebar {
  background: var(--panel);
  border-inline-end: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0 40px;
  /* Fill the bounded row and scroll internally. The old fixed
     calc(100vh - 72px) assumed a single-row bar; when the bar wrapped, the
     panel kept that stale height and its last ~50px fell below the fold. */
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
.sidebar.right {
  border-inline-end: none;
  border-inline-start: 1px solid var(--border);
}
.stage {
  position: relative;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: radial-gradient(circle at 50% 0%, var(--stage-1), var(--stage-2) 70%);
}

/* ---------- Sidebar sections ---------- */
.section {
  border-bottom: 1px solid var(--border-soft);
  padding: 16px 16px;
}
.section h2 {
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  user-select: none;
  position: relative;
}
.section h2::after{
  content:none;
}
.section-toggle{
  margin-inline-start:auto;
  display:inline-grid;
  place-items:center;
  flex:0 0 26px;
  width:26px;height:26px;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  background:var(--panel-2);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.section-toggle:hover{background:var(--accent-soft);color:var(--accent)}
.section-toggle[aria-expanded="false"] span{transform:rotate(-90deg)}
.section-toggle span{display:block;transition:transform .18s ease}
.section h2 svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
/* Hide the section body but always keep its header, so the chevron stays
   clickable to expand again. The templates section wraps its h2 in
   div.tpl-section-head, so excluding only `h2` hid that header too and left a
   collapsed section with nothing left to click. */
.section.collapsed > *:not(h2):not(.tpl-section-head){ display:none !important; }
.section > h2:not(.tpl-section-head h2){cursor:default}
.section.collapsed{ padding-bottom:10px; }

.field {
  margin-bottom: 12px;
}
.field:last-child {
  margin-bottom: 0;
}
.field > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.field > label b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Controls ---------- */
select,
input[type="text"],
textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:focus,
input[type="text"]:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: var(--panel-3);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--panel);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--panel);
  cursor: pointer;
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  padding: 4px;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover {
  background: var(--panel-3);
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #04122e;
}
.btn.primary:hover {
  background: var(--accent-strong);
}
.btn.ghost {
  background: transparent;
}
.btn.danger {
  color: var(--danger);
  border-color: rgba(255, 92, 108, 0.35);
}
.btn.danger:hover {
  background: rgba(255, 92, 108, 0.12);
}
.btn.block {
  width: 100%;
}
.btn.sm {
  padding: 6px 10px;
  font-size: 12px;
}
.btn-row {
  display: flex;
  gap: 8px;
}
.btn-row .btn {
  flex: 1;
}

/* ---------- Device picker ---------- */
.brand-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.brand-tab {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
}
.brand-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.device-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.device-card {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 10px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.device-card:hover {
  border-color: var(--muted-2);
}
.device-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.device-card .mini {
  width: 34px;
  height: 66px;
  border-radius: 8px;
  border: 2px solid var(--muted);
  position: relative;
  background: var(--device-mini-bg);
}
.device-card.active .mini {
  border-color: var(--accent);
}
.device-card .mini::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 4px;
  border-radius: 3px;
  background: var(--muted);
}
.device-card .name {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  color: var(--text);
}

/* color swatches */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  cursor: pointer;
}
.swatch.active {
  border-color: var(--accent);
}

/* preset backgrounds */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.preset {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.preset.active {
  border-color: var(--accent);
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.template-card {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 16px;
  padding: 18px;
  min-height: 120px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.template-card strong {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
}
.template-card span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 820px) {
  .template-grid {
    grid-template-columns: 1fr;
  }
}
.template-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* ============================================================
   Template gallery
   The old .template-card showed a flat 15%-opacity gradient and an
   emoji. Cards now show a real rendered preview of slide 1 with the
   rest of the pack as a strip on hover, so the pack is legible
   before it is opened.
   ============================================================ */

.tpl-section {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}
.tpl-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tpl-section-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.tpl-total {
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 9px;
}
.tpl-sub {
  font-size: 11px;
  color: var(--muted);
}

.tpl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.15s;
}
.tpl-chip b {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: var(--panel-3);
  border-radius: 999px;
  padding: 1px 6px;
}
.tpl-chip:hover:not(:disabled) {
  border-color: var(--accent);
}
.tpl-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tpl-chip.active b {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.tpl-chip:disabled {
  opacity: 0.4;
  cursor: default;
}

.tpl-search-wrap {
  margin-bottom: 12px;
}
.tpl-search-wrap input {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}
.tpl-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.tpl-card {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  padding: 0;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.tpl-card:hover,
.tpl-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  outline: none;
}

.tpl-media {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, var(--panel-3), var(--panel-2));
  overflow: hidden;
}
/* while the canvas preview is being painted */
.tpl-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.07) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: tpl-shimmer 1.3s linear infinite;
}
.tpl-media.has-preview::before {
  content: none;
}
.tpl-media.tpl-preview-failed::before{content:none}
.tpl-media.tpl-preview-failed{background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--accent) 23%,var(--panel)),var(--panel-2) 68%)}
.tpl-media.tpl-preview-failed:before{content:"✦";display:grid;place-items:center;color:var(--accent);font-size:34px;opacity:.9}
.tpl-media.tpl-preview-failed:after{background:linear-gradient(180deg,transparent 35%,rgba(12,16,30,.68))}
@keyframes tpl-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
.tpl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tpl-hero {
  opacity: 0;
  transition: opacity 0.25s;
}
.tpl-hero[data-tpl-done] {
  opacity: 1;
}
.tpl-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* the rest of the pack slides in on hover */
.tpl-strip {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 3px;
  padding: 6px;
  background: rgba(6, 8, 14, 0.92);
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 2;
}
.tpl-strip img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}
.tpl-card:hover .tpl-strip,
.tpl-card:focus-visible .tpl-strip {
  opacity: 1;
}

.tpl-pro,
.tpl-free,
.tpl-count {
  position: absolute;
  top: 7px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
.tpl-pro {
  inset-inline-start: 7px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #1a1206;
}
.tpl-free {
  inset-inline-start: 7px;
  background: rgba(16, 185, 129, 0.92);
  color: #052e21;
}
.tpl-count {
  inset-inline-end: 7px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  backdrop-filter: blur(4px);
}

.tpl-lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  gap: 3px;
  text-align: center;
  background: rgba(6, 8, 14, 0.55);
  backdrop-filter: blur(2px);
}
.tpl-lock span {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.tpl-lock small {
  font-size: 10px;
  color: var(--muted);
}

.tpl-body {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
}
.tpl-ico {
  font-size: 17px;
  flex: 0 0 auto;
}
.tpl-meta {
  min-width: 0;
  flex: 1 1 auto;
}
.tpl-meta strong {
  display: block;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-meta small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.tpl-open {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 8px;
  opacity: 0;
  transition: opacity 0.16s;
}
.tpl-card:hover .tpl-open,
.tpl-card:focus-visible .tpl-open {
  opacity: 1;
}

.tpl-no-results {
  grid-column: 1 / -1;
}

/* ---- sidebar entry ----
   The panel is ~300px wide, so it carries a launcher and a 2-up strip of picks;
   the catalogue itself opens full-width in the overlay. */
.tpl-launch {
  display: grid;
  gap: 10px;
}
.tpl-launch-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  color: var(--text);
  cursor: pointer;
  transition: 0.16s;
}
.tpl-launch-btn:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.tpl-launch-ico {
  font-size: 22px;
}
.tpl-launch-txt {
  flex: 1 1 auto;
  min-width: 0;
}
.tpl-launch-txt b {
  display: block;
  font-size: 13px;
}
.tpl-launch-txt small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
}
.tpl-launch-go {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}
.tpl-mini-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.tpl-grid-mini {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tpl-card.is-mini .tpl-count,
.tpl-card.is-mini .tpl-free {
  display: none;
}
.tpl-card.is-mini .tpl-ico {
  display: none;
}
.tpl-more {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 7px;
  cursor: pointer;
}
.tpl-more:hover {
  border-color: var(--accent);
}

/* ---- full gallery overlay ---- */
.tpl-gallery {
  display: grid;
  gap: 10px;
}
.tpl-gallery-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tpl-gallery-bar input {
  flex: 1 1 auto;
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}
.tpl-gallery-bar input:focus {
  outline: none;
  border-color: var(--accent);
}
.tpl-gallery-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.tpl-only {
  display: flex;
  gap: 6px;
}
.tpl-grid-full {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  overflow-y: auto;
  padding: 2px;
}
.tpl-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 40px 10px;
  text-align: center;
  color: var(--muted);
}
.tpl-empty b {
  color: var(--text);
  font-size: 13px;
}
.tpl-empty span {
  font-size: 11.5px;
}

/* ---- preview modal ---- */
.modal-box.modal-wide:has(.tpl-modal),
.modal-box.modal-wide:has(.tpl-gallery) {
  max-width: min(1040px, 100%);
}
.modal-box.modal-wide:has(.tpl-gallery){width:min(1180px,calc(100vw - 40px));padding:26px 28px}
.tpl-gallery{gap:14px}
.tpl-gallery-bar input{min-height:42px;padding-inline:15px}
.tpl-cats{gap:7px;margin-bottom:0}
.tpl-chip{min-height:36px;padding:7px 13px;border-radius:999px;font-size:11px}
.tpl-only{justify-content:flex-start;padding-bottom:3px}
.tpl-grid-full{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px;padding:3px}
.tpl-grid-full .tpl-card{border-radius:15px;box-shadow:0 3px 13px rgba(20,25,45,.045)}
.tpl-grid-full .tpl-card:hover{box-shadow:0 12px 26px rgba(20,25,45,.13)}
.tpl-grid-full .tpl-media{background:linear-gradient(145deg,var(--panel-2),var(--panel-3))}
.tpl-grid-full .tpl-body{min-height:61px;padding:10px 11px}
.tpl-grid-full .tpl-meta strong{font-size:12px}
.tpl-grid-full .tpl-open{opacity:1}
.tpl-grid-full .tpl-media{height:clamp(195px,27vh,285px);aspect-ratio:auto!important;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--accent-soft) 75%,var(--panel)),var(--panel-2))}
.tpl-grid-full .tpl-media>.tpl-hero{width:100%;height:100%;object-fit:contain;padding:10px 12px;filter:drop-shadow(0 8px 10px rgba(20,25,45,.17))}
.tpl-grid-full .tpl-media:after{background:linear-gradient(180deg,transparent 68%,rgba(10,14,28,.42))}
.tpl-grid-full .tpl-media.tpl-preview-failed:before{inset:0}
.tpl-stage{min-height:min(54vh,530px);padding:24px;background:radial-gradient(ellipse at center,var(--panel),var(--panel-2) 80%)}
.tpl-stage img{width:auto;height:auto;max-width:100%;max-height:52vh;object-fit:contain;border-radius:10px;box-shadow:0 16px 44px rgba(20,28,60,.2)}
.tpl-thumb{width:88px;height:132px;background:linear-gradient(145deg,var(--panel-2),var(--panel-3))}
.tpl-thumb img{object-fit:contain;padding:4px}
@media(max-width:700px){.modal-box.modal-wide:has(.tpl-gallery){width:calc(100vw - 20px);max-height:92dvh;padding:18px 14px}.tpl-grid-full{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tpl-grid-full .tpl-body{padding:8px}.tpl-grid-full .tpl-open{display:none}.tpl-gallery-bar{align-items:stretch}.tpl-gallery-count{align-self:center}.tpl-chip{min-height:33px;padding:6px 10px;font-size:10px}}
.tpl-modal {
  display: grid;
  gap: 12px;
}
.tpl-modal-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.tpl-modal-ico {
  font-size: 26px;
}
.tpl-modal-titles {
  flex: 1 1 auto;
  min-width: 0;
}
.tpl-modal-titles h3 {
  margin: 0;
  font-size: 17px;
}
.tpl-modal-titles small {
  color: var(--muted);
  font-size: 11.5px;
}
.tpl-modal-head .tpl-pro,
.tpl-modal-head .tpl-free {
  position: static;
}

.tpl-formats {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.tpl-fmt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  max-width: 220px;
}
.tpl-fmt span.tpl-fmt-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  flex: 0 0 auto;
}
.tpl-fmt:hover {
  border-color: var(--accent);
}
.tpl-fmt.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.tpl-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 12px;
  border-radius: 14px;
  background: repeating-conic-gradient(var(--panel-3) 0% 25%, var(--panel-2) 0% 50%) 50% / 18px 18px;
  border: 1px solid var(--border);
}
.tpl-stage img {
  max-width: 100%;
  max-height: 46vh;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  display: block;
}
.tpl-stage-loading {
  color: var(--muted);
  font-size: 12px;
}
.tpl-stage-tag {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 999px;
  padding: 3px 9px;
  backdrop-filter: blur(4px);
}

.tpl-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.tpl-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 116px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.tpl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tpl-thumb.active {
  border-color: var(--accent);
}
.tpl-thumb-no {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.66);
  border-radius: 999px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
}

.tpl-modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tpl-hint {
  flex: 1 1 200px;
  font-size: 11.5px;
  color: var(--muted);
}

@media (max-width: 820px) {
  .tpl-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.badge-chip {
  border: none;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.badge-chip:hover {
  transform: translateY(-1px);
}
.badge-list {
  display: grid;
  gap: 8px;
}
.badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge-preview {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.btn.xs {
  padding: 6px 9px;
  font-size: 12px;
}
.seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.seg button {
  border: 1px solid transparent;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.seg button:hover {
  transform: translateY(-1px);
  border-color: rgba(79, 140, 255, 0.18);
}
.seg button.active {
  background: linear-gradient(135deg, var(--accent), #22d3ee);
  color: var(--primary-text);
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
}
/* ---------- Stage canvas ---------- */
.stage-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--toolbar-bg);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 16px 0;
  color: var(--text);
  box-shadow: var(--shadow);
}
.stage-toolbar .history-tool-btn{min-width:74px!important;justify-content:center;font-weight:800}
.stage-toolbar .history-tool-btn:disabled{opacity:.4;filter:saturate(.35);cursor:not-allowed;box-shadow:none;transform:none}
@media(max-width:600px){.stage-toolbar .history-tool-btn{min-width:34px!important;padding-inline:7px}.stage-toolbar .history-tool-btn span{display:none}}

.quick-help {
  display: none;
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 10;
  width: min(360px, calc(100% - 32px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.quick-help.visible {
  display: block;
}

.quick-help ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.quick-help li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.export-group {
  position: relative;
}

.export-menu {
  position: fixed;
  display: grid;
  gap: 8px;
  padding: 12px;
  width: min(268px, calc(100vw - 24px));
  box-sizing: border-box;
  max-height: min(74vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  z-index: 8000;
  animation: exportMenuIn 0.14s ease-out;
}

@keyframes exportMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.export-menu::-webkit-scrollbar {
  width: 8px;
}
.export-menu::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}

.export-menu .menu-title {
  position: sticky;
  top: -12px;
  z-index: 1;
  margin: -4px -4px 0;
  padding: 10px 10px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.export-menu.hidden {
  display: none;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 20px;
}

.auth-overlay .auth-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 26px;
}

.auth-overlay h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.auth-overlay p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-overlay .field {
  margin-bottom: 14px;
}

.auth-overlay input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px 14px;
}

.auth-overlay .btn-row {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.auth-overlay .auth-status {
  margin-top: 12px;
  color: var(--accent);
  font-size: 13px;
  min-height: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.auth-overlay.visible {
  pointer-events: auto;
  opacity: 1;
}

.auth-overlay:not(.visible) {
  pointer-events: none;
  opacity: 0;
}

.workspace.disabled,
.sidebar.disabled,
.stage.disabled {
  filter: blur(1px) brightness(0.92);
  pointer-events: none;
}

.export-menu .btn {
  width: 100%;
  justify-content: flex-start;
  padding: 11px 13px;
  font-size: 0.85rem;
  font-weight: 700;
}
.export-menu .btn:disabled{opacity:.42;filter:saturate(.45);cursor:not-allowed;box-shadow:none;transform:none}
.menu-shortcut{margin-inline-start:auto;color:var(--muted);font-size:.68rem;font-weight:600;direction:ltr}

/* ---------- Video export status (progress + % + result) ---------- */
.video-status {
  display: none;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.video-status.on {
  display: grid;
}
.vs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
}
.vs-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-pct {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.video-status.ok .vs-pct {
  color: #16a34a;
}
.video-status.err .vs-pct {
  color: #dc2626;
}
.vs-track {
  height: 8px;
  border-radius: 99px;
  background: var(--panel-3);
  overflow: hidden;
}
.vs-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #8ab4ff);
  transition: width 0.12s linear;
}
.video-status.ok .vs-fill {
  background: #16a34a;
  transition: none;
}
.video-status.err .vs-fill {
  background: #dc2626;
  transition: none;
}
.vs-spinner {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: vsSpin 0.7s linear infinite;
}
.video-status.ok .vs-spinner,
.video-status.err .vs-spinner {
  display: none;
}
@keyframes vsSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Video preview stage ---------- */
.video-stage {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(8, 10, 15, 0.84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-stage.on {
  display: grid;
}
.vs-box {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(560px, 94vw);
  max-height: 92vh;
}
.vs-box canvas {
  max-width: 100%;
  max-height: 66vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.vs-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}
.vs-bar {
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.vs-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: #4f8cff;
}
.vs-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}
.vs-foot .vs-pct {
  margin-inline-start: auto;
  color: #fff;
}

.share-bar {
  display: none;
}

.stage-toolbar .spacer {
  flex: 1;
}
.zoom-label {
  font-size: 12px;
  color: var(--muted);
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  width: 100%;
  min-width: 0;
}
#editorCanvas {
  background: var(--canvas-bg);
  border-radius: 16px;
  box-shadow: var(--shadow);
  touch-action: none;
  cursor: grab;
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#editorCanvas.dragging {
  cursor: grabbing;
}
.hint {
  font-size: 11px;
  color: var(--muted-2);
}

/* ---------- Slides strip ---------- */
.slides {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  overflow-x: auto;
  flex-shrink: 0;
  align-items: center;
}
.slide-thumb {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  height: 186px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--thumb-bg);
  overflow: hidden;
  padding: 0;
}
.slide-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.slide-thumb canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.slide-thumb .cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 14px 6px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.slide-thumb .num {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  background: var(--panel-3);
  color: var(--thumb-text);
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 6px;
  z-index: 1;
}
.slide-thumb .del {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--thumb-overlay);
  color: var(--thumb-text);
  display: none;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  z-index: 1;
}
.slide-thumb:hover .del {
  display: grid;
}
.add-slide {
  flex-shrink: 0;
  width: 104px;
  height: 186px;
  border-radius: 12px;
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.add-slide:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.add-slide svg {
  width: 22px;
  height: 22px;
}

/* ---------- Text layers list ---------- */
.layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  margin-bottom: 8px;
  cursor: pointer;
}
.layer.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.layer .txt {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer .icon-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 3px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.layer .icon-btn[data-delinst]:hover,
.layer .icon-btn[data-del]:hover {
  color: var(--danger);
  background: rgba(255, 92, 108, 0.12);
}
.layer .icon-btn[data-dupinst]:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.layer .icon-btn svg {
  width: 15px;
  height: 15px;
}
.layer .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.empty {
  font-size: 12px;
  color: var(--muted-2);
  text-align: center;
  padding: 10px 0;
}

.upload-drop {
  border: 2px dashed var(--border);
  border-radius: 11px;
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  transition: border-color 0.15s, background 0.15s;
}
.upload-drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.upload-drop svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
  margin-bottom: 8px;
}
.upload-drop b {
  color: var(--text);
}
.upload-drop small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.disabled-note {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 8px;
  line-height: 1.5;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.checkbox input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

/* Old card kept for fallback */
.saved-project-card {
  display: none;
}

/* ---- Projects Empty State ---- */
.projects-empty {
  text-align: center;
  padding: 20px 12px;
  color: var(--muted);
}
.projects-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}
.projects-empty p {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.projects-empty span {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- Project Card ---- */
.project-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  margin-bottom: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  cursor: default;
}
.project-card:hover {
  background: var(--panel-3);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(59,130,246,0.1);
}
.project-card--active {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(59,130,246,0.08));
}
.project-card-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.project-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.project-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.project-card-date {
  font-size: 0.72rem;
  color: var(--muted);
}
.project-card-badge {
  display: inline-block;
  font-size: 0.65rem;
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-weight: 700;
  margin-top: 2px;
  width: fit-content;
}
.project-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.project-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: var(--panel-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  transition: all 0.15s;
  color: var(--text);
}
.project-btn:hover {
  transform: scale(1.1);
}
.project-btn--load:hover { background: rgba(59,130,246,0.2); }
.project-btn--rename:hover { background: rgba(234,179,8,0.2); }
.project-btn--delete:hover { background: rgba(239,68,68,0.2); }


.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 20px;
}

.auth-overlay .auth-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 26px;
}

.auth-overlay h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.auth-overlay p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-overlay .field {
  margin-bottom: 14px;
}

.auth-overlay input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px 14px;
}

.auth-overlay .btn-row {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.auth-overlay .auth-status {
  margin-top: 12px;
  color: var(--accent);
  font-size: 13px;
  min-height: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.auth-overlay.visible {
  pointer-events: auto;
  opacity: 1;
}

.auth-overlay:not(.visible) {
  pointer-events: none;
  opacity: 0;
}

.workspace.disabled,
.sidebar.disabled,
.stage.disabled,
.topbar.disabled {
  filter: blur(1px) brightness(0.92);
  pointer-events: none;
}

.font-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.font-chip {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 13px;
  text-align: center;
}
.font-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  place-items: center;
  z-index: 50;
  padding: 20px;
}
.modal-backdrop.open {
  display: grid;
}
.modal {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.modal h3 {
  margin: 0 0 16px;
  font-size: 16px;
}
.modal .btn-row {
  margin-top: 18px;
}

/* ---------- Mobile ---------- */
.mobile-tabs {
  display: none;
}
@media (max-width: 980px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .sidebar {
    display: none;
    position: absolute;
    inset: 0 0 76px 0;
    z-index: 15;
    border: none;
  }
  .sidebar.open {
    display: block;
  }
  .stage {
    grid-row: 1;
  }
  .mobile-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--panel);
    border-top: 1px solid var(--border);
  }
  .mobile-tabs button {
    flex: 1;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--muted);
    border-radius: 9px;
    padding: 9px;
    font-size: 12px;
    font-weight: 700;
  }
  .mobile-tabs button.active {
    background: var(--accent);
    color: var(--primary-text);
    border-color: var(--accent);
  }
  .topbar .hide-sm {
    display: none;
  }
}

/* Toast Notification */
.global-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--panel-3); color: var(--text); padding: 12px 24px; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 9999; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; text-align: center; }
.global-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ============================================================
   Custom Dialog System
   ============================================================ */
.custom-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dialogFadeIn 0.15s ease;
}
.custom-dialog-overlay.hidden {
  display: none !important;
}
@keyframes dialogFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.custom-dialog-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px 28px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: dialogSlideUp 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dialogSlideUp {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.custom-dialog-icon {
  font-size: 2.4rem;
  margin-bottom: 14px;
  line-height: 1;
}
.custom-dialog-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}
.custom-dialog-message {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.6;
}
.custom-dialog-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  text-align: start;
}
.custom-dialog-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.custom-dialog-input-wrap {
  width: 100%;
  margin-bottom: 20px;
}
.custom-dialog-input-wrap.hidden,
.custom-dialog-share-wrap.hidden {
  display: none;
}
.custom-dialog-share-wrap {
  width: 100%;
  margin-bottom: 20px;
}
.custom-dialog-share-box {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.custom-dialog-share-box .custom-dialog-input {
  flex: 1;
  font-size: 0.8rem;
  color: var(--muted);
}
.custom-dialog-copy-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}
.custom-dialog-copy-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.custom-dialog-copy-hint {
  font-size: 0.82rem;
  color: var(--accent);
  min-height: 18px;
  margin: 0;
}
.custom-dialog-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}
.custom-dialog-btn {
  flex: 1;
  padding: 11px 20px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.custom-dialog-btn--ok {
  background: var(--accent);
  color: #fff;
}
.custom-dialog-btn--ok:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.custom-dialog-btn--cancel {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.custom-dialog-btn--cancel:hover {
  background: var(--panel-3);
  color: var(--text);
}

/* ============================================================
   Landing Theme Toggle Button
   ============================================================ */
.landing-auth-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.landing-theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.landing-theme-btn:hover {
  background: var(--panel-3);
  border-color: var(--accent);
  transform: rotate(20deg);
}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;max-width:1000px;margin:0 auto}
.pricing-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:28px;text-align:center;transition:transform .2s}
.pricing-card.featured{border-color:var(--accent);transform:scale(1.03);box-shadow:0 12px 30px rgba(59,130,246,.15)}
.pricing-card h3{margin:0 0 8px}
.pricing-price{font-size:2rem;font-weight:900;color:var(--accent);margin:12px 0}
.faq-item{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px}
.stats-bar{display:flex;justify-content:center;gap:40px;padding:30px 5%;background:var(--panel-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat{text-align:center}
.stat b{font-size:1.8rem;display:block;color:var(--accent)}
.stat span{font-size:.85rem;color:var(--muted)}
.landing-theme-btn svg {
  display: block;
}

/* ============================================================
   Contact Section
   ============================================================ */
.landing-contact {
  padding: 90px 5%;
  background: var(--panel);
}
.contact-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 860px) {
  .contact-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.contact-info h2 {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--text);
}
.contact-info > p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 36px;
  font-size: 1.05rem;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-detail-icon {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  background: var(--accent-soft, rgba(59,130,246,0.1));
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-detail-item strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}
.contact-detail-item p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}
/* Contact Form */
.contact-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }
}
.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.contact-submit-btn {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  border-radius: 14px;
  transition: all 0.2s;
}
.contact-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59,130,246,0.25);
}
.contact-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.contact-success {
  text-align: center;
  color: #16a34a;
  font-weight: 700;
  font-size: 0.95rem;
  background: rgba(22,163,74,0.08);
  border-radius: 10px;
  padding: 12px;
  margin: 0;
}
.contact-success.hidden { display: none; }
.profile-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--panel-2);border-radius:999px;padding:4px 10px 4px 4px;cursor:pointer;transition:all .15s}
.profile-btn:hover{background:var(--panel-3);border-color:var(--accent)}
.profile-btn.hidden{display:none!important}
.profile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.profile-overlay.hidden{display:none!important}
.profile-card{background:var(--panel);border:1px solid var(--border);border-radius:22px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:24px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.profile-big-avatar{width:64px;height:64px;border-radius:50%;background:var(--panel-3);object-fit:cover;border:2px solid var(--border)}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.profile-stat{background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}
.profile-stat b{display:block;font-size:1.2rem;color:var(--accent)}
.profile-stat span{font-size:11px;color:var(--muted)}
.profile-details{display:grid;gap:10px}

/* ========== Video studio ==========
   The clip rows carry three selects side by side, so they need a wide column.
   The settings column is capped with minmax(0,320px): the 0 minimum stops a
   wide child (a long <option>, a button row) from forcing the track open and
   spilling over the main column. */
#videoPage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  overflow-y: auto;
  background: var(--bg);
  min-height: 0;
}
.studio-head { width: 100%; max-width: 1200px; margin: 0 auto; }
.studio-head h2 { font-size: 1.6rem; font-weight: 900; margin: 0 0 6px; }
.studio-head p { color: var(--muted); font-size: .95rem; margin: 0; }
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.studio-side {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  position: sticky;
  top: 0;
}
.studio-main { display: grid; gap: 16px; min-width: 0; }
.studio-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  min-width: 0;
}
.studio-card h4 {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.studio-count { color: var(--muted); font-weight: 400; font-size: .7rem; }
.studio-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.studio-form .field { margin-bottom: 0; min-width: 0; }
.studio-form select, .studio-form input { width: 100%; min-width: 0; }
.studio-form .btn { min-width: 0; }
.studio-clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 10px;
  align-content: start;
}
.studio-clip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  min-width: 0;
}
.studio-clip.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.studio-note {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  font-size: .8rem;
}
.studio-note:empty { display: none; }
.studio-hint { color: var(--muted); font-size: .72rem; margin: 12px 0 0; line-height: 1.7; }
.studio-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.studio-stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.studio-stat span { display: block; color: var(--muted); font-size: .68rem; margin-bottom: 2px; }
.studio-stat b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
@media (max-width: 980px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-side { position: static; }
  /* stacked: two field columns so the clips stay within reach of one scroll */
  .studio-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-form > .btn,
  .studio-form > .btn-row,
  .studio-form > #videoProgress2 { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  #videoPage { padding: 14px; gap: 14px; }
  .studio-card { padding: 14px; }
  .studio-clips { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .studio-form { grid-template-columns: minmax(0, 1fr); }
}

.icon-page-grid {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  align-items: start;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.modal-overlay,
.custom-dialog-overlay,
.profile-overlay {
  overflow-y: auto;
}

.modal-box {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.custom-dialog-box {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.modal-box,
.custom-dialog-box,
.profile-card,
.global-toast,
#appShell .sidebar,
#appShell .topbar,
#loginPage,
.site-content-page {
  overflow-wrap: anywhere;
}

.global-toast {
  max-width: calc(100vw - 24px);
}

#appShell .topbar-tabs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 860px) {
  .icon-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  #iconPage,
  #iconLibraryPage,
  #packagesPage {
    padding: 14px !important;
  }
  #iconPage {
    gap: 14px !important;
  }
}

@media (max-width: 420px) {
  .modal-overlay,
  .custom-dialog-overlay,
  .profile-overlay {
    padding: 10px;
  }
  .modal-box {
    padding: 22px 16px;
    border-radius: 16px;
  }
  .custom-dialog-box {
    padding: 24px 18px 18px;
  }
  .custom-dialog-share-box {
    flex-direction: column;
    align-items: stretch;
  }
  .custom-dialog-copy-btn {
    width: 100%;
  }
}

@media (max-height: 540px) {
  .modal-overlay,
  .custom-dialog-overlay,
  .profile-overlay {
    align-items: flex-start;
    padding: 8px;
  }
  .modal-box,
  .custom-dialog-box,
  .profile-card {
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 820px) {
  .modal-box input,
  .modal-box select,
  .modal-box textarea,
  .custom-dialog-input,
  .contact-form-field input,
  .contact-form-field select,
  .contact-form-field textarea {
    font-size: 16px;
  }
}

.social-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.social-links:empty {
  display: none;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s, transform 0.15s, border-color 0.15s, background 0.15s;
}

.social-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.social-links svg {
  width: 17px;
  height: 17px;
  display: block;
}

.social-links-footer {
  margin-top: 14px;
}

.social-links-topbar {
  display: none;
  gap: 6px;
}

.social-links-topbar a {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.social-links-topbar svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 1400px) {
  #appShell .social-links-topbar {
    display: flex;
  }
}

.social-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 10px;
}

@media (max-width: 1100px) {
  .social-links-header {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .social-editor-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.topbar-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--panel);
  animation: topbarBadgePulse 1.8s ease-in-out infinite;
}

@keyframes topbarBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ---------- boot loader ---------- */
.boot-loader{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:
  radial-gradient(1200px 600px at 50% -10%, rgba(79,70,229,.16), transparent 70%),
  radial-gradient(900px 500px at 88% 112%, rgba(6,182,212,.13), transparent 60%),
  var(--bg);transition:opacity .55s ease, visibility .55s}
.boot-loader .bl-ring{position:relative;width:94px;height:94px;display:grid;place-items:center}
.boot-loader .bl-ring::before{content:"";position:absolute;inset:0;border-radius:26px;background:linear-gradient(135deg,rgba(79,70,229,.4),rgba(6,182,212,.4));filter:blur(18px);opacity:.55;animation:bootPulse 1.6s ease-in-out infinite}
.boot-loader .bl-spin{position:absolute;inset:-9px;border-radius:32px;border:3px solid transparent;border-top-color:var(--accent);border-inline-end-color:color-mix(in srgb,var(--accent) 55%,transparent);animation:bootSpin .9s linear infinite}
.boot-loader img{position:relative;width:84px;height:84px;border-radius:22px;box-shadow:0 18px 50px rgba(79,70,229,.35);animation:bootPulse 1.4s ease-in-out infinite}
.boot-loader b{font-size:1.4rem;font-weight:900;letter-spacing:.01em;background:linear-gradient(90deg,var(--accent),#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.boot-loader .bl-sub{font-size:.8rem;color:var(--muted)}
.boot-loader .bl-bar{width:170px;height:4px;border-radius:99px;background:color-mix(in srgb,var(--border) 60%,transparent);overflow:hidden;position:relative}
.boot-loader .bl-bar i{position:absolute;inset-block:0;inset-inline-start:-40%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#06b6d4);animation:bootSlide 1.1s ease-in-out infinite}
.boot-loader.done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes bootSpin{to{transform:rotate(360deg)}}
@keyframes bootSlide{0%{transform:translateX(0)}100%{transform:translateX(400%)}}
@keyframes bootPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- landing entrance ---------- */
#loginPage .hero-text>*{opacity:0;transform:translateY(18px);animation:landFadeUp .7s cubic-bezier(.22,.9,.34,1) forwards}
#loginPage .hero-text>:nth-child(2){animation-delay:.08s}
#loginPage .hero-text>:nth-child(3){animation-delay:.16s}
#loginPage .hero-text>:nth-child(4){animation-delay:.24s}
#loginPage .hero-text>:nth-child(5){animation-delay:.32s}
#loginPage .hero-preview{opacity:0;animation:landFadeUp .9s .2s cubic-bezier(.22,.9,.34,1) forwards}
#loginPage .landing-trust-strip,#loginPage .landing-store-badges{opacity:0;animation:landFadeUp .6s .45s ease forwards}
@keyframes landFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){#loginPage .hero-text>*,#loginPage .hero-preview,#loginPage .landing-trust-strip,#loginPage .landing-store-badges{opacity:1;transform:none;animation:none}}
.hide{display:none!important}

/* ---------- landing aurora ---------- */
.landing-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.landing-aurora i{position:absolute;display:block;width:46vw;height:46vw;border-radius:50%;filter:blur(70px);opacity:.35;animation:auroraFloat 16s ease-in-out infinite}
.landing-aurora i:nth-child(1){background:#4f46e5;top:-12%;inset-inline-start:-8%}
.landing-aurora i:nth-child(2){background:#06b6d4;bottom:-18%;inset-inline-end:-10%;animation-delay:-5s}
.landing-aurora i:nth-child(3){background:#a855f7;top:34%;inset-inline-end:28%;width:30vw;height:30vw;animation-delay:-9s}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(3%,-4%) scale(1.06)}66%{transform:translate(-3%,3%) scale(.97)}}

/* ---------- landing store badges + local stat ---------- */
.landing-store-badges{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 20px 0}
.landing-store-badges svg{height:38px;width:auto;border-radius:9px;box-shadow:0 4px 14px rgba(15,23,42,.15)}
#localExportStat{font-size:.78rem;font-weight:800;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);padding:6px 12px;border-radius:999px}

/* ---------- before / after ---------- */
.landing-ba{max-width:920px;margin:0 auto;padding:44px 20px 10px}
.ba-wrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.22);border:1px solid var(--border)}
.ba-wrap>img,.ba-after img{display:block;width:100%;height:auto}
.ba-after{position:absolute;inset:0;overflow:hidden}
.ba-after img{position:absolute;inset:0;height:100%;object-fit:cover}
.ba-wrap input[type=range]{position:absolute;inset:auto 0 -2px 0;width:100%;margin:0;accent-color:var(--accent);cursor:ew-resize;direction:ltr}
.ba-tag{position:absolute;top:12px;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.62);color:#fff;backdrop-filter:blur(4px)}
.ba-tag-before{inset-inline-end:12px}
.ba-tag-after{inset-inline-start:12px}

/* ---------- focus mode ---------- */
#focusExit{display:none;position:fixed;top:12px;inset-inline-start:12px;z-index:130}
#appShell.focus-mode .topbar,
#appShell.focus-mode .sidebar,
#appShell.focus-mode .stage-toolbar,
#appShell.focus-mode .slides,
#appShell.focus-mode .mobile-tabs,
#appShell.focus-mode .project-home,
#appShell.focus-mode .usage-pill{display:none!important}
#appShell.focus-mode .workspace{grid-template-columns:minmax(0,1fr)!important;height:100dvh;padding:0;gap:0}
#appShell.focus-mode .stage{border-radius:0}
#appShell.focus-mode #focusExit{display:inline-flex}

/* ---------- context menu ---------- */
.ctx-menu{position:fixed;z-index:10050;min-width:190px;background:var(--panel);border:1px solid var(--border);border-radius:13px;box-shadow:0 18px 50px rgba(15,23,42,.35);padding:6px;display:grid;gap:2px}
.ctx-menu.hidden{display:none}
.ctx-menu button{text-align:start;padding:8px 11px;border-radius:9px;border:none;background:transparent;color:var(--text);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px}
.ctx-menu button:hover{background:var(--panel-2)}
.ctx-menu .ctx-sep{height:1px;background:var(--border);margin:4px 6px}

/* ---------- shortcuts dialog ---------- */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:8px}
.sc-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:.8rem}
.sc-item kbd{background:var(--panel-3);border:1px solid var(--border);border-radius:7px;padding:2px 8px;font-size:.72rem;font-weight:800;font-family:ui-monospace,Consolas,monospace;white-space:nowrap}

/* ---------- stickers palette ---------- */
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:6px}
.sticker-btn{height:56px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;cursor:pointer}
.sticker-btn:hover{border-color:var(--accent)}
.sticker-btn img{max-width:100%;max-height:100%;display:block}
.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:6px}
.pattern-btn{height:64px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:#0f172a;overflow:hidden;padding:0}
.pattern-btn img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.pattern-btn:hover{border-color:var(--accent)}

.usage-pill {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  max-width: 1100px;
}

.usage-pill--toolbar {
  margin: 0;
  justify-content: flex-start;
  max-width: none;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.usage-pill--toolbar .usage-chip {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.usage-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 760px) {
  #usagePillScreens {
    display: none !important;
  }
}