:root {
  color-scheme: dark;
  --bg: #07070e;
  --panel: #0c0c17;
  --panel-2: #11111e;
  --panel-3: #171525;
  --line: rgba(205, 193, 224, 0.14);
  --line-strong: rgba(205, 193, 224, 0.28);
  --text: #f5f0ea;
  --muted: #aaa4b5;
  --muted-2: #706b7f;
  --gold: #e9bb65;
  --gold-light: #ffe0a3;
  --gold-dark: #8c5d25;
  --violet: #7436e4;
  --violet-soft: #9a6af3;
  --success: #83ddb3;
  --danger: #ef7b87;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--text); background: #05050b; user-select: none; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
button, input, select { font: inherit; }
button { color: inherit; }
svg { width: 1em; height: 1em; display: block; }
.is-hidden { display: none !important; }

.splash-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 11% 8%, rgba(90, 36, 188, .38), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(86, 31, 167, .28), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(32, 17, 58, .5), transparent 44%),
    linear-gradient(145deg, #080810, #0b0916 52%, #08060f);
}
.splash-screen::after {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle, #000, transparent 76%);
}
.splash-orbit { position: absolute; left: -12%; right: -12%; height: 250px; border: 2px solid rgba(127, 64, 236, .2); border-radius: 50%; transform: rotate(8deg); box-shadow: 0 0 80px rgba(91, 39, 193, .16); }
.orbit-a { top: 21%; }
.orbit-b { bottom: 18%; transform: rotate(-9deg); }
.timeline-ghost { position: absolute; width: 42%; height: 190px; opacity: .24; border-block: 1px solid rgba(129,81,218,.18); }
.timeline-ghost::before, .timeline-ghost::after { content:""; position:absolute; left:5%; right:8%; height:34px; border-radius:4px; background: linear-gradient(90deg, rgba(103,42,210,.55), rgba(95,43,159,.1)); box-shadow: 0 68px 0 rgba(79,31,154,.18); }
.timeline-ghost::before { top: 28px; }
.timeline-ghost-left { left:-3%; top:38%; transform:rotate(6deg); }
.timeline-ghost-right { right:-4%; bottom:20%; transform:rotate(-5deg); }
.splash-content { position:relative; z-index:2; width:min(630px,70vw); text-align:center; transform:translateY(-1.5vh); }
.logo-stage { position:relative; width:270px; height:230px; margin:0 auto -2px; display:grid; place-items:center; }
.logo-aura { position:absolute; width:170px; height:100px; border-radius:50%; background:rgba(117,52,224,.5); filter:blur(55px); animation:aura 2.2s ease-in-out infinite alternate; }
.splash-logo { position:relative; width:248px; height:210px; object-fit:contain; filter:drop-shadow(0 20px 34px rgba(0,0,0,.55)); animation:logoIn 1s cubic-bezier(.2,.8,.2,1) both; }
.splash-content h1 { margin:0; font:500 62px/1.05 "STSong", "SimSun", serif; letter-spacing:.16em; text-indent:.16em; color:#f5ece1; text-shadow:0 2px 18px rgba(255,220,169,.12); }
.brand-en { margin:12px 0 14px; font:300 30px/1.2 "Segoe UI", sans-serif; letter-spacing:.25em; text-indent:.25em; color:#f4eee9; }
.slogan { display:flex; align-items:center; justify-content:center; gap:20px; color:#c9c1bc; letter-spacing:.38em; text-indent:.38em; font-size:17px; }
.slogan span { width:44px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.slogan span:last-child { transform:scaleX(-1); }
.loading-track { width:74%; height:5px; margin:70px auto 18px; border:1px solid rgba(175,137,232,.4); border-radius:99px; background:rgba(24,18,37,.75); overflow:hidden; }
.loading-track i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#d39945,#ffe5b4 63%,#fff2d3); box-shadow:0 0 18px rgba(255,205,123,.8); transition:width .2s ease; }
.loading-text { margin:0; color:#aaa4af; letter-spacing:.06em; }
.skip-splash { position:absolute; right:34px; bottom:28px; z-index:3; border:0; background:transparent; color:#777184; cursor:pointer; padding:10px 14px; }
.skip-splash:hover { color:var(--gold-light); }
@keyframes logoIn { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes aura { to { transform:scale(1.2); opacity:.68; } }

.home-screen { position:relative; display:grid; grid-template-columns:430px minmax(0,1fr); width:100%; height:100%; background:#080811; }
.home-screen.is-authenticated { grid-template-columns:240px minmax(0,1fr); }
.home-screen.is-authenticated .login-panel,.home-screen.is-authenticated .logged-out-feature { display:none; }
.login-panel { position:relative; overflow:hidden; padding:44px 42px 22px; background: radial-gradient(circle at 7% 5%, rgba(100,42,207,.54), transparent 36%), linear-gradient(165deg,#110c22,#0b0a15 48%,#14102a); border-right:1px solid rgba(230,208,255,.16); }
.login-panel::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 75%,rgba(255,255,255,.025)); }
.ambient-ribbon { position:absolute; width:560px; height:120px; border-radius:50%; border:2px solid rgba(137,71,255,.25); filter:blur(2px); transform:rotate(-30deg); }
.ribbon-top { top:-30px; left:-110px; box-shadow:0 0 50px rgba(129,61,255,.18); }
.ribbon-bottom { bottom:40px; left:-50px; transform:rotate(-46deg); opacity:.55; }
.brand-block { position:relative; z-index:1; text-align:center; }
.brand-block img { width:160px; height:140px; object-fit:contain; filter:drop-shadow(0 14px 28px rgba(0,0,0,.42)); }
.brand-block h1 { margin:-2px 0 0; font:500 42px/1.05 "STSong", "SimSun", serif; letter-spacing:.14em; text-indent:.14em; color:#f4e9dc; }
.brand-block > p { margin:8px 0; font:300 22px/1 "Segoe UI", sans-serif; letter-spacing:.17em; text-indent:.17em; }
.brand-tagline { display:flex; justify-content:center; align-items:center; gap:12px; color:#b9b0b5; font-size:13px; letter-spacing:.32em; text-indent:.32em; }
.brand-tagline span { width:34px; height:1px; background:var(--gold); }
.login-card { position:relative; z-index:2; margin-top:26px; padding:0 28px 22px; border:1px solid rgba(231,206,255,.25); border-radius:14px; background:linear-gradient(145deg,rgba(21,18,34,.88),rgba(31,23,49,.75)); box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.login-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(255,255,255,.08); }
.login-tab { position:relative; height:62px; border:0; background:none; color:#aaa3b1; font-size:16px; cursor:pointer; }
.login-tab::after { content:""; position:absolute; height:2px; left:26%; right:26%; bottom:-1px; border-radius:2px; background:transparent; }
.login-tab.is-active { color:#fff4e5; }
.login-tab.is-active::after { background:linear-gradient(90deg,#b87931,#ffe2a0,#b87931); box-shadow:0 0 10px rgba(239,185,91,.46); }
.login-view { display:none; min-height:220px; }
.login-view.is-active { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.qr-code { width:132px; height:132px; display:grid; grid-template-columns:repeat(21,1fr); grid-template-rows:repeat(21,1fr); gap:1px; padding:8px; margin:16px 0 10px; background:#f5f2ee; border-radius:6px; box-shadow:0 0 0 1px #fff,0 10px 30px rgba(0,0,0,.3); }
.qr-code i { background:transparent; }
.qr-code i.on { background:#111018; }
.qr-code .qr-logo { grid-column:9 / span 5; grid-row:9 / span 5; z-index:2; border-radius:4px; background:#1a1028 url("../assets/veyra-logo.png") center/85% no-repeat; box-shadow:0 0 0 2px white; }
.login-hint { margin:4px 0 10px; font-size:13px; color:#aaa4b3; }
.phone-login { gap:12px; align-items:stretch !important; padding:21px 0 10px; }
.phone-login label { display:grid; gap:6px; width:100%; color:#aaa4b3; font-size:12px; }
.input-shell { display:flex; align-items:center; height:42px; border:1px solid var(--line-strong); border-radius:7px; background:rgba(7,7,14,.55); overflow:hidden; }
.input-shell:focus-within { border-color:rgba(231,184,97,.7); box-shadow:0 0 0 3px rgba(231,184,97,.08); }
.input-shell b { padding:0 12px; border-right:1px solid var(--line); font-weight:500; color:#d8d0c8; }
.input-shell input { min-width:0; flex:1; height:100%; padding:0 12px; border:0; outline:0; color:var(--text); background:transparent; user-select:text; }
.input-shell button { align-self:stretch; padding:0 12px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--gold-light); cursor:pointer; font-size:12px; }
.primary-login { height:42px; border:1px solid #b67d32; border-radius:7px; background:linear-gradient(135deg,#d29a49,#f2cc7e); color:#211307; font-weight:700; cursor:pointer; }
.primary-login:disabled { opacity:.58; cursor:wait; }
.register-link { margin-top:-5px; border:0; background:transparent; color:#a99eb7; font-size:11px; cursor:pointer; }
.register-link:hover { color:var(--gold-light); }
.agreement { display:flex; align-items:center; justify-content:center; gap:8px; color:#8f8999; font-size:11px; cursor:pointer; }
.agreement input { position:absolute; opacity:0; }
.agreement i { width:15px; height:15px; border:1px solid #8f8798; border-radius:3px; display:grid; place-items:center; }
.agreement input:checked + i { border-color:var(--gold); background:var(--gold); }
.agreement input:checked + i::after { content:"✓"; color:#23180b; font-size:11px; font-weight:800; }
.other-login { display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:#817b8b; font-size:11px; }
.other-login::before,.other-login::after { content:""; flex:1; height:1px; background:var(--line); }
.social-logins { display:flex; justify-content:center; gap:24px; }
.social-logins button { width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%; background:rgba(7,7,14,.38); color:#d7d1dc; cursor:pointer; transition:.2s ease; }
.social-logins button:hover { border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }
.login-footer { position:absolute; bottom:15px; left:0; right:0; text-align:center; color:#625d70; font-size:11px; letter-spacing:.55em; }

.app-sidebar { min-width:0; height:100%; display:flex; flex-direction:column; padding:22px 16px 18px; border-right:1px solid rgba(205,193,224,.12); background:radial-gradient(circle at 12% 4%,rgba(104,42,199,.22),transparent 28%),linear-gradient(180deg,#100d1c,#090910 52%,#08080e); }
.sidebar-brand { height:76px; display:flex; align-items:center; gap:11px; padding:0 9px 18px; border-bottom:1px solid rgba(255,255,255,.055); -webkit-app-region:drag; }
.sidebar-brand img { width:56px; height:52px; object-fit:contain; filter:drop-shadow(0 9px 18px rgba(0,0,0,.45)); }
.sidebar-brand div { min-width:0; display:grid; gap:3px; }
.sidebar-brand strong { font:600 23px/1 "STSong","SimSun",serif; letter-spacing:.12em; color:#f4e9df; }
.sidebar-brand span { overflow:hidden; color:#9c92a8; font:500 8px/1 "Segoe UI",sans-serif; letter-spacing:.16em; white-space:nowrap; text-transform:uppercase; }
.sidebar-menu { display:grid; gap:4px; padding:20px 0 10px; }
.sidebar-secondary { display:grid; gap:4px; margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.05); }
.sidebar-nav-item { position:relative; width:100%; height:46px; display:flex; align-items:center; gap:14px; padding:0 15px; border:1px solid transparent; border-radius:9px; background:transparent; color:#8f889a; text-align:left; cursor:pointer; transition:.18s ease; }
.sidebar-nav-item svg { width:20px; height:20px; stroke-width:1.65; }
.sidebar-nav-item b { font-size:13px; font-weight:500; letter-spacing:.03em; }
.sidebar-nav-item:hover { color:#ded7e2; background:rgba(255,255,255,.035); }
.sidebar-nav-item.is-active { border-color:rgba(161,103,240,.25); color:#f7eeff; background:linear-gradient(90deg,rgba(111,50,203,.36),rgba(72,40,112,.12)); box-shadow:inset 0 0 22px rgba(117,56,203,.08); }
.sidebar-nav-item.is-active::before { content:""; position:absolute; left:-16px; top:9px; bottom:9px; width:3px; border-radius:0 4px 4px 0; background:linear-gradient(#b784ff,#6f36d7); box-shadow:0 0 13px rgba(153,93,239,.65); }

.workspace { min-width:0; height:100%; grid-column:2; background:radial-gradient(circle at 82% -10%,rgba(89,38,171,.14),transparent 31%),linear-gradient(145deg,#090910,#07070d); }
.workspace-header { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 154px 0 26px; -webkit-app-region:drag; }
.workspace-header button,.workspace-header input,.workspace-header .search-box,.window-actions button { -webkit-app-region:no-drag; }
.logged-in-welcome,.membership-button,.notification-button { display:none; }
.logged-in-welcome h1 { margin:0 0 6px; font-size:27px; font-weight:650; letter-spacing:.02em; color:#f5eef6; }
.logged-in-welcome p { margin:0; color:#777080; font-size:11px; letter-spacing:.08em; }
.home-screen.is-authenticated .workspace-header { height:108px; display:grid; grid-template-columns:minmax(225px,1fr) minmax(260px,410px) auto; gap:24px; padding:18px 154px 12px 30px; border-bottom:1px solid rgba(255,255,255,.035); }
.home-screen.is-authenticated .logged-in-welcome,.home-screen.is-authenticated .membership-button,.home-screen.is-authenticated .notification-button { display:flex; }
.home-screen.is-authenticated .logged-in-welcome { flex-direction:column; }
.home-screen.is-authenticated .workspace-scroller { height:calc(100% - 108px); padding:28px 36px 48px 30px; }
.home-screen.is-authenticated .content-section { margin-top:0; }
.home-screen.is-authenticated .section-heading { margin-bottom:18px; }
.home-screen.is-authenticated .section-heading h3 { font-size:23px; }
.search-box { width:min(470px,48%); height:42px; display:flex; align-items:center; gap:12px; padding:0 14px; border:1px solid var(--line-strong); border-radius:9px; background:rgba(20,18,31,.82); color:#777181; }
.home-screen.is-authenticated .search-box { width:100%; }
.search-box:focus-within { border-color:rgba(166,113,239,.55); box-shadow:0 0 0 3px rgba(122,61,210,.08); }
.search-box input { flex:1; min-width:0; border:0; outline:0; background:none; color:#e8e2ea; user-select:text; }
.search-box input::placeholder { color:#6f697a; }
.header-actions { display:flex; align-items:center; gap:24px; margin-right:0; }
.membership-button { height:36px; align-items:center; gap:7px; padding:0 13px; border:1px solid rgba(219,177,99,.42); border-radius:8px; background:linear-gradient(135deg,rgba(83,54,27,.58),rgba(42,29,21,.35)); color:#efd49e; font-size:11px; white-space:nowrap; cursor:pointer; }
.membership-button span { color:#f1bd5c; font-size:15px; }
.notification-button { position:relative; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; background:#11101a; color:#a39baa; cursor:pointer; }
.notification-button svg { width:18px; height:18px; }
.notification-button i { position:absolute; top:4px; right:4px; width:6px; height:6px; border:1px solid #0c0b12; border-radius:50%; background:#e8af55; }
.view-switch { display:flex; height:38px; border:1px solid var(--line); border-radius:9px; padding:3px; background:#0e0d17; }
.view-switch button { width:48px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#716b7a; cursor:pointer; }
.view-switch button.is-active { color:var(--gold-light); background:linear-gradient(135deg,rgba(149,97,43,.24),rgba(83,56,32,.15)); box-shadow:inset 0 0 0 1px rgba(223,176,91,.15); }
.profile-button { position:relative; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:linear-gradient(#201d2d,#12111b); color:#ddd6df; cursor:pointer; }
.profile-button i { position:absolute; width:8px; height:8px; right:-1px; bottom:2px; border:2px solid #0a0a11; border-radius:50%; background:#6fdbac; }
.window-actions { position:absolute; top:0; right:10px; height:40px; display:flex; z-index:5; }
.window-actions button { width:42px; border:0; background:transparent; color:#aaa4af; font-size:19px; cursor:pointer; }
.window-actions button:hover { background:rgba(255,255,255,.06); color:#fff; }
.window-actions button:last-child:hover { background:#a8323d; }
.workspace-scroller { height:calc(100% - 82px); overflow:auto; padding:0 34px 44px 26px; scrollbar-color:#2d2739 transparent; scrollbar-width:thin; }
.hero-card { position:relative; height:220px; overflow:hidden; display:flex; align-items:center; padding:38px 70px; border:1px solid rgba(145,79,239,.43); border-radius:12px; background:radial-gradient(circle at 83% 50%,rgba(105,42,176,.27),transparent 27%),linear-gradient(115deg,#130b2e,#0b0914 58%,#1a0c30); box-shadow:inset 0 0 50px rgba(91,41,166,.12); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.hero-card:hover { border-color:rgba(228,181,96,.66); box-shadow:inset 0 0 50px rgba(91,41,166,.16),0 10px 34px rgba(0,0,0,.22); transform:translateY(-1px); }
.hero-action { position:absolute; inset:0; z-index:4; width:100%; height:100%; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
.hero-action:focus-visible { outline:2px solid var(--gold-light); outline-offset:-4px; }
.hero-card::before { content:""; position:absolute; inset:-65% -10%; border:2px solid rgba(147,70,246,.18); border-radius:50%; transform:rotate(-8deg); box-shadow:0 0 42px rgba(121,52,221,.18); }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-kicker { color:#71678c; font:600 10px/1.2 "Segoe UI", sans-serif; letter-spacing:.22em; }
.hero-copy h2 { display:flex; align-items:center; gap:25px; margin:12px 0 14px; font:500 52px/1 "STSong","SimSun",serif; letter-spacing:.08em; color:#f6eadf; }
.hero-arrow { width:55px; height:55px; display:grid; place-items:center; border:2px solid var(--gold-light); border-radius:50%; color:var(--gold-light); background:rgba(109,67,25,.16); box-shadow:0 0 23px rgba(227,172,76,.18); transition:.2s ease; }
.hero-card:hover .hero-arrow { transform:translateX(4px); background:rgba(207,148,61,.2); }
.hero-copy p { display:flex; align-items:center; gap:14px; margin:0; color:#bcb2ba; letter-spacing:.36em; }
.hero-copy p span { width:42px; height:1px; background:var(--gold); }
.lens-art { position:absolute; right:9%; top:-46%; width:340px; height:340px; border-radius:50%; border:26px solid rgba(22,13,41,.88); box-shadow:0 0 0 2px rgba(226,176,88,.46),0 0 0 11px #0d0917,0 0 0 13px rgba(111,61,190,.55),inset 0 0 35px rgba(0,0,0,.9),0 0 45px rgba(140,74,236,.25); }
.lens-art::before { content:""; position:absolute; inset:16%; border-radius:50%; border:1px solid rgba(239,193,111,.75); box-shadow:0 0 0 9px #090710,0 0 0 11px rgba(117,64,188,.5),inset 0 0 40px #000; }
.lens-art i { position:absolute; top:50%; left:50%; width:48%; height:2px; transform-origin:left; background:linear-gradient(90deg,rgba(237,187,99,.7),transparent); }
.lens-art i:nth-child(2) { transform:rotate(45deg); }.lens-art i:nth-child(3){transform:rotate(90deg)}.lens-art i:nth-child(4){transform:rotate(135deg)}
.hero-words { position:absolute; right:26px; top:58px; text-align:center; color:#655d79; font:500 10px/1.3 "Segoe UI",sans-serif; letter-spacing:.28em; }
.hero-words span { color:#8c703e; }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:15px 0 22px; }
.quick-card { min-height:96px; display:flex; align-items:center; gap:17px; padding:18px 26px; border:1px solid var(--line-strong); border-radius:11px; background:linear-gradient(135deg,rgba(24,22,37,.82),rgba(14,13,23,.88)); text-align:left; cursor:pointer; transition:.2s ease; }
.quick-card:hover { border-color:rgba(225,180,95,.5); transform:translateY(-1px); background:linear-gradient(135deg,rgba(39,30,42,.9),rgba(17,15,26,.9)); }
.quick-icon { width:48px; height:48px; display:grid; place-items:center; color:#eee7eb; }
.quick-icon svg { width:40px; height:40px; stroke-width:1.4; }
.quick-card > span:nth-child(2) { flex:1; display:grid; gap:8px; }
.quick-card b { font-size:17px; font-weight:600; }.quick-card small { color:#807989; font-size:12px; }
.content-section,.ai-history { margin-top:10px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin:0 0 12px; }
.section-heading h3 { margin:4px 0 0; font-size:20px; font-weight:600; }
.section-heading button { display:flex; align-items:center; gap:3px; border:0; background:none; color:#938c9a; cursor:pointer; font-size:12px; }
.section-heading button:hover { color:var(--gold-light); }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.project-card { min-width:0; }
.create-project-card { min-height:178px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:1px dashed rgba(173,115,247,.48); border-radius:11px; background:radial-gradient(circle at 50% 40%,rgba(114,48,207,.18),transparent 45%),rgba(16,13,25,.64); color:#afa5bb; cursor:pointer; transition:.2s ease; }
.create-project-card:hover { border-style:solid; border-color:rgba(230,185,103,.65); color:#f0e5f2; transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.23); }
.create-project-card>span { width:55px; height:55px; display:grid; place-items:center; border:1px solid rgba(192,148,249,.34); border-radius:16px; background:linear-gradient(145deg,rgba(112,55,199,.38),rgba(44,25,72,.25)); color:#caa6ff; font-size:30px; font-weight:200; }
.create-project-card strong { font-size:14px; font-weight:600; }
.create-project-card small { color:#6f6878; font-size:10px; }
.project-preview { position:relative; height:132px; overflow:hidden; border:1px solid var(--line-strong); border-radius:9px; background:#15111f; cursor:pointer; transition:.2s ease; }
.project-preview:hover { border-color:rgba(222,175,88,.57); transform:translateY(-2px); box-shadow:0 13px 26px rgba(0,0,0,.24); }
.project-art { position:absolute; inset:0; overflow:hidden; }
.project-art::before,.project-art::after { content:""; position:absolute; }
.project-art.mountain { background:linear-gradient(180deg,#463c73,#c29186 58%,#151326 59%); }
.project-art.mountain::before { left:-10%; right:-10%; bottom:-12%; height:72%; background:#181625; clip-path:polygon(0 100%,18% 44%,31% 70%,49% 8%,68% 71%,80% 46%,100% 100%); box-shadow:inset 0 12px 18px rgba(181,136,174,.28); }
.project-art.mountain::after { width:64%; height:2px; left:18%; top:24%; background:linear-gradient(90deg,transparent,#ead5bd,transparent); box-shadow:0 0 18px #e7c9c4; transform:rotate(-7deg); }
.project-art.wave { background:radial-gradient(circle at 76% 34%,#bb8a4f 0 2%,transparent 9%),linear-gradient(145deg,#0a0710,#25103f); }
.project-art.wave::before { inset:24% -15% auto -15%; height:64%; border-radius:50%; border:9px solid transparent; border-top-color:#8e41e6; border-bottom-color:#e1ae5f; transform:rotate(-9deg); filter:drop-shadow(0 0 8px #6a2cc4); }
.project-art.product { background:radial-gradient(ellipse at 53% 74%,#4e1984,transparent 38%),linear-gradient(135deg,#05040a,#180d2b); }
.project-art.product::before { width:44px; height:80px; left:calc(50% - 22px); bottom:16px; border:1px solid #f5d08b; border-radius:5px 5px 10px 10px; background:linear-gradient(105deg,#16111c,#4f284e 50%,#0e0b10); box-shadow:0 0 16px rgba(198,91,255,.85),10px 8px 0 -7px #bb853e; }
.project-art.product::after { left:4%; right:3%; bottom:17%; height:2px; border-radius:50%; background:#9b3de0; box-shadow:0 -20px 21px #6a26ab,0 14px 18px #46156f; transform:rotate(-8deg); }
.project-art.blank { background:linear-gradient(135deg,#191424,#0b0911); }
.project-art.blank::before { width:110px; height:110px; left:calc(50% - 55px); top:12px; border:1px solid rgba(202,167,240,.22); border-radius:50%; box-shadow:0 0 38px rgba(118,58,201,.18); }
.duration { position:absolute; left:9px; bottom:8px; padding:4px 8px; border-radius:5px; background:rgba(4,4,8,.78); color:#eee9ee; font-size:10px; }
.local-badge { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; padding:4px 7px; border-radius:6px; background:rgba(18,14,27,.8); color:#c4aedc; font-size:9px; }
.project-menu-button { position:absolute; top:8px; right:8px; width:28px; height:25px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:rgba(7,7,12,.74); color:#d5ced8; cursor:pointer; }
.project-info { position:relative; padding:9px 3px 0; }
.project-info strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:600; }
.project-info small { display:block; margin-top:5px; color:#746e7c; font-size:10px; }
.project-menu { position:absolute; right:0; top:5px; z-index:8; width:108px; padding:5px; border:1px solid var(--line-strong); border-radius:8px; background:#171522; box-shadow:var(--shadow); }
.project-menu button { width:100%; padding:8px 10px; border:0; border-radius:5px; background:none; text-align:left; color:#bcb5c2; cursor:pointer; font-size:11px; }
.project-menu button:hover { background:rgba(255,255,255,.06); color:#fff; }
.project-menu button.danger { color:#d98891; }
.project-grid.list-view { grid-template-columns:1fr; gap:8px; }
.project-grid.list-view .project-card { display:grid; grid-template-columns:190px 1fr; min-height:88px; border:1px solid var(--line); border-radius:9px; background:rgba(18,17,28,.5); overflow:hidden; }
.project-grid.list-view .create-project-card { display:flex; min-height:88px; flex-direction:row; }
.project-grid.list-view .create-project-card>span { width:42px; height:42px; border-radius:12px; font-size:24px; }
.project-grid.list-view .project-preview { height:88px; border:0; border-radius:0; }
.project-grid.list-view .project-info { padding:20px; }
.empty-state { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed var(--line-strong); border-radius:11px; background:rgba(17,15,25,.35); color:#8e8796; }
.empty-icon { width:58px; height:58px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:17px; color:#766c87; }
.empty-icon svg { width:30px; height:30px; }.empty-state h3 { margin:14px 0 4px; color:#cdc5d0; }.empty-state p { margin:0 0 18px; font-size:12px; }
.ai-history { margin-top:26px; }
.ai-history-row { width:100%; min-height:76px; display:flex; align-items:center; gap:18px; padding:9px 16px 9px 10px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(90deg,rgba(25,22,37,.72),rgba(15,14,22,.8)); text-align:left; cursor:pointer; }
.ai-history-row:hover { border-color:rgba(137,86,211,.48); }
.ai-thumb { position:relative; width:148px; height:58px; overflow:hidden; flex:0 0 auto; border-radius:6px; background:linear-gradient(160deg,#8464a1,#32234f 60%,#0d0a13); }
.ai-thumb::before { content:""; position:absolute; inset:0; background:linear-gradient(148deg,transparent 40%,#151222 41% 56%,transparent 57%),linear-gradient(28deg,transparent 45%,rgba(135,73,184,.7) 46% 50%,transparent 51%); }
.ai-thumb i { position:absolute; inset:0; background:radial-gradient(circle at 25% 22%,rgba(255,211,174,.5),transparent 30%); }
.ai-thumb b { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(41,25,55,.74); color:#e9dbe9; }
.ai-copy { flex:1; display:grid; gap:8px; }.ai-copy strong { font-size:14px; }.ai-copy small { color:#746e7c; font-size:10px; }
.ai-status { padding:5px 9px; border-radius:99px; background:rgba(71,149,112,.12); color:#80d6aa; font-size:10px; }

.editor-screen { position:relative; display:grid; grid-template-columns:76px 256px minmax(320px,1fr) 270px; grid-template-rows:62px minmax(260px,1fr) 246px; width:100%; height:100%; overflow:hidden; background:#07070d; }
.editor-topbar { grid-column:1/-1; grid-row:1; display:flex; align-items:center; gap:18px; padding:0 154px 0 18px; border-bottom:1px solid rgba(205,193,224,.12); background:linear-gradient(90deg,#100d19,#0a0911 45%,#0d0b16); -webkit-app-region:drag; }
.editor-topbar button { -webkit-app-region:no-drag; }
.editor-back { height:36px; display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); color:#aaa2b1; cursor:pointer; }
.editor-back:hover { border-color:rgba(202,162,232,.34); color:#f1e9f2; }
.editor-project-title { min-width:0; display:flex; align-items:center; gap:13px; }
.editor-project-title strong { max-width:360px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:600; }
.editor-project-title span { display:flex; align-items:center; gap:6px; color:#746d7d; font-size:9px; }
.editor-project-title i { width:6px; height:6px; border-radius:50%; background:#8bd6b0; box-shadow:0 0 8px rgba(116,213,166,.45); }
.editor-history-actions { display:flex; gap:3px; margin-left:auto; }
.editor-history-actions button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#736d7b; cursor:pointer; }
.editor-history-actions button:hover { background:rgba(255,255,255,.045); color:#cfc7d2; }
.editor-export { height:34px; padding:0 19px; border:1px solid #cb9951; border-radius:7px; background:linear-gradient(135deg,#c78e3e,#f0c777); color:#291807; font-size:11px; font-weight:700; cursor:pointer; }
.editor-tools { grid-column:1; grid-row:2/4; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:12px 8px; border-right:1px solid var(--line); background:#0b0a12; }
.editor-tools button { height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid transparent; border-radius:8px; background:transparent; color:#777181; cursor:pointer; }
.editor-tools button svg { width:20px; height:20px; }.editor-tools button b { font-size:9px; font-weight:500; }
.editor-tools button:hover { color:#d3cad6; background:rgba(255,255,255,.025); }
.editor-tools button.is-active { border-color:rgba(150,88,224,.2); color:#d9bcff; background:linear-gradient(145deg,rgba(111,49,193,.25),rgba(55,30,88,.12)); }
.editor-media-panel { grid-column:2; grid-row:2; min-width:0; overflow:hidden; padding:16px 14px; border-right:1px solid var(--line); background:#0d0c14; }
.editor-panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }.editor-panel-heading small { color:#62586f; font-size:7px; letter-spacing:.2em; }.editor-panel-heading h2 { margin:3px 0 0; font-size:15px; }.editor-panel-heading button { height:28px; padding:0 10px; border:1px solid rgba(178,125,240,.32); border-radius:6px; background:rgba(102,48,167,.16); color:#c8a8ec; font-size:9px; cursor:pointer; }
.media-drop-zone { min-height:126px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px dashed rgba(184,158,212,.2); border-radius:9px; background:rgba(6,6,11,.38); color:#81778c; transition:.18s ease; }.media-drop-zone.is-dragging { border-color:#b681ed; background:rgba(108,58,164,.14); }.media-drop-zone>svg { width:29px; height:29px; color:#765297; }.media-drop-zone strong { color:#aaa1ae; font-size:11px; }.media-drop-zone small { font-size:9px; }.media-drop-zone button { height:29px; margin-top:3px; padding:0 12px; border:1px solid var(--line-strong); border-radius:6px; background:#15121d; color:#bcb3c1; font-size:9px; cursor:pointer; }
.media-bin-title { display:flex; justify-content:space-between; margin-top:17px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.045); color:#918999; font-size:10px; }.media-bin-title small { color:#5e5965; }
.media-bin { max-height:calc(100% - 203px); overflow:auto; padding:8px 2px 20px 0; scrollbar-width:thin; scrollbar-color:#392c4b transparent; }
.media-item { display:grid; grid-template-columns:52px minmax(0,1fr) 27px; align-items:center; gap:9px; min-height:52px; margin-bottom:7px; padding:5px; border:1px solid transparent; border-radius:7px; background:rgba(255,255,255,.018); cursor:grab; }.media-item:hover { border-color:rgba(167,112,220,.22); background:rgba(104,59,145,.08); }.media-item-thumb { position:relative; height:40px; display:grid; place-items:center; overflow:hidden; border-radius:5px; background:linear-gradient(145deg,#291f37,#111019); color:#c7a1ec; }.media-item-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(130deg,rgba(255,255,255,.06),transparent 50%); }.media-item-thumb span { position:absolute; left:4px; top:3px; color:#756581; font-size:5px; letter-spacing:.12em; }.media-item-thumb b { font-size:15px; font-weight:500; }.media-item-copy { min-width:0; display:grid; gap:5px; }.media-item-copy strong { overflow:hidden; color:#bfb7c3; font-size:9px; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }.media-item-copy small { color:#665f6d; font-size:8px; }.media-item>button { width:25px; height:25px; border:1px solid rgba(173,121,226,.18); border-radius:5px; background:rgba(107,60,153,.1); color:#ad84d3; cursor:pointer; }.media-item>button:hover { background:#8151ad; color:white; }
.editor-canvas-area { grid-column:3; grid-row:2; min-width:0; display:grid; grid-template-rows:38px minmax(0,1fr) 48px; padding:0 20px; background:radial-gradient(circle at 50% 48%,rgba(53,35,74,.2),transparent 35%),#08080e; }
.canvas-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:10px; color:#625d6a; font-size:9px; }.canvas-toolbar button { border:0; background:transparent; color:#8c8492; font-size:9px; cursor:pointer; }
.video-canvas { position:relative; min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(201,177,224,.13); border-radius:4px; background:#020205; box-shadow:0 22px 45px rgba(0,0,0,.34); aspect-ratio:16/9; align-self:center; }
.video-canvas>video,.video-canvas>img { grid-area:1/1; width:100%; height:100%; object-fit:contain; background:#020205; }.video-canvas>video { max-width:100%; max-height:100%; }
.canvas-empty { display:flex; flex-direction:column; align-items:center; color:#56505f; }.canvas-empty img { width:86px; height:72px; object-fit:contain; opacity:.24; filter:grayscale(.35); }.canvas-empty strong { margin-top:-5px; color:#716978; font-size:12px; }.canvas-empty span { margin-top:7px; font-size:9px; }
.audio-preview-badge { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; pointer-events:none; background:radial-gradient(circle,rgba(112,63,162,.22),transparent 50%); color:#a985cb; }.audio-preview-badge svg { width:34px; height:34px; }.audio-preview-badge strong { font-size:11px; font-weight:500; }
.playback-controls { display:flex; align-items:center; justify-content:center; gap:7px; color:#6b6571; font-size:9px; }.playback-controls button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#847d89; cursor:pointer; }.playback-controls .play-main { width:34px; height:34px; background:#ece4ef; color:#18131c; }.playback-controls span { margin-left:12px; }
.editor-inspector { grid-column:4; grid-row:2; min-width:0; border-left:1px solid var(--line); background:#0d0c14; }
.inspector-tabs { height:49px; display:grid; grid-template-columns:repeat(3,1fr); padding:0 14px; border-bottom:1px solid var(--line); }.inspector-tabs button { position:relative; border:0; background:transparent; color:#77707f; font-size:10px; cursor:pointer; }.inspector-tabs button.is-active { color:#eee6ef; }.inspector-tabs button.is-active::after { content:""; position:absolute; left:24%; right:24%; bottom:-1px; height:2px; background:#ab75ef; }
.inspector-empty { height:calc(100% - 49px); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#5f5867; text-align:center; }.inspector-empty svg { width:28px; height:28px; margin-bottom:13px; }.inspector-empty strong { color:#827987; font-size:11px; }.inspector-empty small { margin-top:8px; font-size:9px; line-height:1.7; }
.clip-inspector { display:grid; gap:13px; padding:23px 20px; }.clip-inspector>small { color:#685d72; font-size:7px; letter-spacing:.18em; }.clip-inspector h3 { overflow:hidden; margin:0 0 8px; color:#d7ced9; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }.clip-inspector label { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.045); color:#777080; font-size:9px; }.clip-inspector label span { color:#bcb3c0; font-variant-numeric:tabular-nums; }.clip-inspector p { margin:5px 0 0; color:#625c68; font-size:8px; line-height:1.7; }
.editor-timeline { grid-column:2/-1; grid-row:3; min-width:0; border-top:1px solid var(--line); background:#0a0910; }
.timeline-toolbar { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.05); }.timeline-toolbar>div { display:flex; align-items:center; gap:4px; }.timeline-toolbar button { width:29px; height:28px; display:grid; place-items:center; border:0; border-radius:5px; background:transparent; color:#77717e; cursor:pointer; }.timeline-toolbar button:hover { background:rgba(255,255,255,.045); color:#d1c9d3; }.timeline-zoom { width:75px; height:3px; border-radius:4px; background:#28232e; }.timeline-zoom i { display:block; width:45%; height:100%; border-radius:inherit; background:#9161cc; }
.timeline-body { height:calc(100% - 42px); display:grid; grid-template-columns:94px minmax(0,1fr); }.timeline-track-labels { display:grid; grid-template-rows:50px 50px; align-content:center; border-right:1px solid var(--line); color:#746d79; font-size:9px; }.timeline-track-labels span { display:flex; align-items:center; padding-left:16px; border-bottom:1px solid rgba(255,255,255,.035); }
.timeline-ruler { position:relative; overflow:auto hidden; color:#514c57; font-size:8px; background-image:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 100%; scrollbar-width:thin; scrollbar-color:#342b40 transparent; }.timeline-ticks { position:absolute; left:0; top:0; height:28px; min-width:100%; border-bottom:1px solid rgba(255,255,255,.04); }.timeline-tick { position:absolute; top:8px; transform:translateX(4px); color:#514c57; font-size:7px; font-variant-numeric:tabular-nums; }.timeline-tick::before { content:""; position:absolute; left:-4px; top:-8px; width:1px; height:7px; background:#49434e; }.timeline-ruler>#timelinePlayhead { position:absolute; z-index:8; left:0; top:0; bottom:0; width:1px; pointer-events:none; background:#e5ae5b; box-shadow:0 0 7px rgba(222,167,91,.5); }.timeline-ruler>#timelinePlayhead::before { content:""; position:absolute; left:-4px; top:0; width:9px; height:8px; clip-path:polygon(0 0,100% 0,50% 100%); background:#e5ae5b; }.timeline-clips { position:relative; min-width:100%; height:100%; }.timeline-clip { position:absolute; top:39px; height:47px; min-width:28px; display:flex; flex-direction:column; justify-content:center; gap:5px; overflow:hidden; padding:0 12px; border:1px solid rgba(166,106,222,.42); border-radius:5px; background:linear-gradient(135deg,#533279,#342148); box-shadow:inset 0 1px rgba(255,255,255,.05); color:#e4d8ec; cursor:grab; user-select:none; }.timeline-clip.is-audio { top:100px; border-color:rgba(77,176,151,.38); background:linear-gradient(135deg,#214d4b,#183633); color:#cbe6de; }.timeline-clip.is-selected { border-color:#e3b26a; box-shadow:0 0 0 1px rgba(227,178,106,.45),0 0 16px rgba(112,63,162,.22); }.timeline-clip b { overflow:hidden; font-size:8px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }.timeline-clip small { opacity:.55; font-size:7px; font-variant-numeric:tabular-nums; }.clip-trim-handle { position:absolute; z-index:2; top:0; bottom:0; width:7px; cursor:ew-resize; }.clip-trim-handle.left { left:0; }.clip-trim-handle.right { right:0; }.timeline-clip.is-selected .clip-trim-handle { background:rgba(240,192,116,.55); }.timeline-placeholder { position:absolute; z-index:1; inset:42px 18px 20px; display:grid; place-items:center; border:1px dashed rgba(181,158,200,.12); border-radius:6px; color:#504a55; font-size:10px; }

/* Editing workspace refinements */
.editor-screen{--media-panel-width:282px;--inspector-width:292px;--timeline-height:344px;grid-template-columns:78px var(--media-panel-width) minmax(360px,1fr) var(--inspector-width);grid-template-rows:64px minmax(250px,1fr) var(--timeline-height)}
.editor-topbar{gap:12px;padding-left:14px}.editor-brand{height:46px;display:flex;align-items:center;gap:4px;padding-right:12px;border-right:1px solid var(--line)}.editor-brand img{width:47px;height:43px;object-fit:contain}.editor-brand b{font-size:13px;letter-spacing:.08em}.editor-back{width:31px;height:31px;justify-content:center;padding:0;border-radius:7px}.editor-back svg{width:17px;height:17px}.editor-project-title strong{font-size:14px}.editor-project-title span{font-size:10px}.editor-tools{overflow-y:auto;scrollbar-width:none}.editor-tools button{min-height:54px}.editor-tools button b{font-size:10px}
.editor-media-panel{padding:18px 15px}.editor-panel-heading{margin-bottom:13px}.editor-panel-heading small{font-size:8px}.editor-panel-heading h2{font-size:16px}.editor-panel-heading button{height:30px;font-size:10px}.media-drop-zone{min-height:132px}.editor-media-panel.has-media .media-bin-title{margin-top:4px}.media-bin-title{align-items:center;font-size:11px}.media-bin-title>span small{margin-left:6px}.media-view-switch{display:flex;gap:3px}.media-view-switch button{width:28px;height:26px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:#6f6876;cursor:pointer}.media-view-switch button svg{width:15px;height:15px}.media-view-switch button.is-active{background:rgba(133,78,190,.18);color:#d2b3ef}.media-bin{max-height:calc(100% - 205px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:10px}.editor-media-panel.has-media .media-bin{max-height:calc(100% - 78px)}.media-item{position:relative;display:block;min-height:116px;margin:0;padding:0 0 8px;overflow:hidden;background:#12101a}.media-item-thumb{height:76px;border-radius:6px 6px 0 0}.media-item-thumb img{width:100%;height:100%;object-fit:cover}.media-item-thumb span{z-index:2;padding:2px 4px;border-radius:3px;background:rgba(3,3,7,.62);color:#d7cbe1;font-size:6px}.media-item-copy{padding:7px 7px 0}.media-item-copy strong{font-size:10px}.media-item-copy small{font-size:9px}.media-item>button{position:absolute;right:6px;bottom:7px;background:rgba(31,24,41,.9)}.media-bin.is-list-view{display:block}.media-bin.is-list-view .media-item{display:grid;grid-template-columns:72px minmax(0,1fr) 28px;align-items:center;gap:9px;min-height:60px;margin-bottom:7px;padding:5px}.media-bin.is-list-view .media-item-thumb{height:49px;border-radius:5px}.media-bin.is-list-view .media-item-copy{padding:0}.media-bin.is-list-view .media-item>button{position:static}.waveform-bars{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:1px;padding:5px}.waveform-bars i{min-width:1px;flex:1;border-radius:1px;background:linear-gradient(#72d3bd,#377f75);opacity:.86}
.editor-canvas-area{grid-template-rows:48px minmax(0,1fr) 54px;padding:0 22px}.canvas-toolbar{justify-content:space-between;font-size:10px}.canvas-toolbar>div{display:flex;align-items:center;gap:12px}.canvas-toolbar label{display:flex;align-items:center;gap:6px;color:#77717f}.canvas-toolbar select{height:28px;padding:0 25px 0 8px;border:1px solid rgba(255,255,255,.09);border-radius:6px;outline:0;background:#11101a;color:#bdb5c2;font-size:10px}.canvas-toolbar>span{font-variant-numeric:tabular-nums}.canvas-stage{min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;padding:10px 12px}.video-canvas{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:auto;align-self:auto}.video-canvas>video,.video-canvas>img{position:absolute;inset:0}.video-canvas audio{display:none}.playback-controls{position:relative;z-index:5;gap:9px;background:#08080e;font-size:10px}.playback-controls button{width:31px;height:31px}.playback-controls .play-main{width:38px;height:38px}.playback-controls span{font-variant-numeric:tabular-nums}
.inspector-tabs button{font-size:11px}.clip-inspector>small{font-size:8px}.clip-inspector h3{font-size:14px}.clip-inspector label,.clip-inspector p{font-size:10px}
.editor-timeline{grid-column:2/-1}.timeline-toolbar{height:46px;padding:0 12px}.timeline-toolbar button{width:32px;height:31px}.timeline-toolbar button.is-active{background:rgba(133,78,190,.22);color:#e0c4fa}.timeline-toolbar button.wide{width:auto;padding:0 10px;font-size:10px}.timeline-tools #toolHint{margin-left:7px;color:#82798a;font-size:9px}.track-actions{margin-left:auto;margin-right:14px}.timeline-body{height:calc(100% - 46px);grid-template-columns:112px minmax(0,1fr)}.timeline-track-labels{position:relative;display:block;overflow:hidden;border-right:1px solid var(--line);font-size:10px}.track-labels-inner{position:absolute;left:0;right:0;top:30px;transition:transform .04s linear}.track-labels-inner>span{height:62px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.045)}.track-labels-inner>span>i{width:7px;height:7px;border-radius:2px;background:#7145a1}.track-labels-inner>span>small{color:#554f5b;font-size:8px}.track-labels-inner .track-audio>i{background:#439b88}.track-labels-inner .track-text>i{background:#c98958}.track-labels-inner .track-effect>i{background:#9265d8}.track-labels-inner .track-filter>i{background:#527eb8}.track-labels-inner .track-color>i{background:#bd5c75}.timeline-ruler{overflow:auto;background-size:42px 100%;cursor:default}.timeline-ruler.is-split-tool,.timeline-ruler.is-split-tool .timeline-clip{cursor:crosshair}.timeline-ticks{position:sticky;z-index:6;top:0;background:rgba(10,9,16,.95);backdrop-filter:blur(4px)}.timeline-tick{font-size:8px}.timeline-track-grid{position:absolute;left:0;top:0;min-width:100%;pointer-events:none}.timeline-track-grid>i{position:absolute;left:0;right:0;height:62px;border-bottom:1px solid rgba(255,255,255,.045);background:rgba(255,255,255,.008)}.timeline-track-grid>.track-audio{background:rgba(47,118,101,.025)}.timeline-track-grid>.track-effect,.timeline-track-grid>.track-filter,.timeline-track-grid>.track-color{background:rgba(105,67,145,.018)}.timeline-ruler>#timelinePlayhead{position:absolute;z-index:10;top:0;bottom:auto;height:max(100%,500px);width:2px;pointer-events:auto;cursor:ew-resize}.timeline-ruler>#timelinePlayhead::after{content:"";position:absolute;left:-8px;top:0;width:18px;height:25px;background:transparent}.timeline-clips{position:absolute;left:0;top:0;min-width:100%}.timeline-clip{height:50px;display:block;padding:0;overflow:hidden;border-radius:5px;background:#2e1e43}.timeline-clip.track-audio{border-color:rgba(77,176,151,.4);background:#173833;color:#d2eee6}.timeline-clip.track-text{border-color:rgba(217,151,90,.44);background:#4a3020}.timeline-clip.track-effect{border-color:rgba(156,104,221,.46);background:#382452}.timeline-clip.track-filter{border-color:rgba(86,138,198,.44);background:#1f354d}.timeline-clip.track-color{border-color:rgba(197,88,115,.44);background:#49202d}.clip-caption{position:absolute;z-index:3;left:10px;right:7px;bottom:4px;display:flex;justify-content:space-between;gap:5px;padding:2px 4px;border-radius:3px;background:rgba(5,4,8,.68)}.timeline-clip b{font-size:9px}.timeline-clip small{font-size:8px}.clip-filmstrip{position:absolute;inset:0;display:flex;overflow:hidden}.clip-filmstrip img{height:100%;min-width:72px;flex:1;object-fit:cover;opacity:.7}.timeline-clip>.waveform-bars{position:absolute;inset:0;padding:7px 4px 13px}.timeline-placeholder{position:sticky;left:18px;top:48px;width:calc(100% - 36px);height:100px;font-size:11px}

/* Resizable studio panels, compact controls and richer timeline visuals. */
.editor-media-panel{position:relative;background:linear-gradient(180deg,#100e18,#0b0a11)}
.editor-inspector,.editor-timeline{position:relative}.editor-timeline{background:linear-gradient(180deg,#0d0b14,#08070d)}
.media-item{border-color:rgba(255,255,255,.045);background:linear-gradient(160deg,#17141f,#0f0d15);box-shadow:0 7px 18px rgba(0,0,0,.16)}.media-item-copy{padding-right:56px}.media-item-actions{position:absolute;right:6px;bottom:6px;display:flex;gap:3px}.media-item-actions button{width:24px;height:24px;border:1px solid rgba(173,121,226,.18);border-radius:5px;background:rgba(31,24,41,.9);color:#b99bd5;cursor:pointer}.media-item-actions [data-delete-media]{border-color:rgba(218,96,113,.16);color:#b97983}.media-item-actions [data-delete-media]:hover{background:#8c3344;color:white}.media-bin.is-list-view .media-item{grid-template-columns:72px minmax(0,1fr) auto}.media-bin.is-list-view .media-item-copy{padding-right:0}.media-bin.is-list-view .media-item-actions{position:static}
.video-canvas{border-color:rgba(205,183,225,.18);box-shadow:0 20px 60px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025)}.playback-controls{gap:7px;background:linear-gradient(180deg,rgba(8,8,14,.35),#08080e)}.playback-controls button{width:27px;height:27px}.playback-controls .play-main{width:31px;height:31px;box-shadow:0 4px 14px rgba(255,255,255,.12)}
.timeline-auto-track-hint{display:flex;align-items:center;gap:7px;margin-left:auto;margin-right:16px;color:#5f5967;font-size:9px}.timeline-auto-track-hint i{width:5px;height:5px;border-radius:50%;background:#71b99e;box-shadow:0 0 7px rgba(113,185,158,.5)}.timeline-track-labels{background:#0b0911}.track-labels-inner>span{height:auto}.timeline-track-grid>i{height:auto}.timeline-track-grid>.track-video{background:linear-gradient(90deg,rgba(104,62,151,.022),transparent)}.timeline-track-grid>.track-text{background:rgba(201,137,76,.018)}.timeline-clip{height:auto}.clip-caption{z-index:4;left:8px}.timeline-clip.track-video .clip-caption{top:4px;bottom:auto}.clip-filmstrip img{opacity:.76}.video-waveform{position:absolute;z-index:2;left:0;right:0;bottom:0;height:19px;background:rgba(7,10,12,.84);border-top:1px solid rgba(101,202,177,.22)}.video-waveform .waveform-bars{padding:2px 4px}.video-waveform .waveform-bars i{background:#58bda7}
.panel-resizer{position:absolute;z-index:20;display:block;background:transparent}.panel-resizer.vertical{top:0;bottom:0;width:9px;cursor:col-resize}.panel-resizer.vertical::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;transition:.15s}.panel-resizer.vertical:hover::after,.is-resizing-panels .panel-resizer.vertical::after{background:#9b6dd0;box-shadow:0 0 8px rgba(155,109,208,.6)}.panel-resizer.right{right:-5px}.panel-resizer.left{left:-5px}.panel-resizer.horizontal{left:0;right:0;height:9px;cursor:row-resize}.panel-resizer.horizontal::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:transparent}.panel-resizer.horizontal:hover::after,.is-resizing-panels .panel-resizer.horizontal::after{background:#9b6dd0;box-shadow:0 0 8px rgba(155,109,208,.6)}.panel-resizer.top{top:-5px}.is-resizing-panels{cursor:grabbing!important}.is-resizing-panels *{pointer-events:none!important}

/* Precision timeline, transparent compositing and compact transport. */
.editor-account{min-width:154px;height:38px;display:flex;align-items:center;gap:9px;margin-left:auto;padding:0 11px;border:1px solid rgba(255,255,255,.075);border-radius:9px;background:rgba(255,255,255,.025);color:#91899a;text-align:left;cursor:pointer}.editor-account>svg{width:18px;height:18px;color:#806b96}.editor-account>b{display:grid;gap:2px;font-weight:500}.editor-account i{color:#c8c0cc;font-size:10px;font-style:normal}.editor-account small{color:#68616f;font-size:8px;font-weight:400}.editor-account.is-logged-in{border-color:rgba(118,205,164,.17)}.editor-account.is-logged-in>svg{color:#78cda7}.editor-history-actions{margin-left:0}
.video-canvas{background-color:#111019;background-image:linear-gradient(45deg,#17151e 25%,transparent 25%),linear-gradient(-45deg,#17151e 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#17151e 75%),linear-gradient(-45deg,transparent 75%,#17151e 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.preview-layers{position:absolute;inset:0;overflow:hidden}.preview-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}.canvas-empty{position:relative;z-index:30}.audio-preview-badge{z-index:31}.playback-controls{gap:8px}.playback-controls .play-main{width:25px;height:25px}.playback-controls .play-main svg{width:13px;height:13px}.playback-controls span{margin-left:2px;font-size:9px}
.media-item-thumb,.clip-filmstrip{background-color:#13111a}.media-item.type-image .media-item-thumb,.timeline-clip.track-image .clip-filmstrip{background-color:#17151e;background-image:linear-gradient(45deg,#211e29 25%,transparent 25%),linear-gradient(-45deg,#211e29 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#211e29 75%),linear-gradient(-45deg,transparent 75%,#211e29 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px}.media-item-thumb .media-type-badge{z-index:3;left:5px;top:5px;padding:3px 6px;border:1px solid transparent;border-radius:4px;color:#f4f0f6;font-size:6px;font-weight:700;letter-spacing:.09em}.media-item.type-video .media-type-badge{border-color:rgba(173,125,239,.38);background:rgba(91,43,145,.82)}.media-item.type-audio .media-type-badge{border-color:rgba(92,201,170,.34);background:rgba(25,104,87,.84)}.media-item.type-image .media-type-badge{border-color:rgba(238,177,92,.34);background:rgba(133,82,26,.84)}
.waveform-view{position:absolute;inset:0;display:block;overflow:hidden}.waveform-view svg{width:100%;height:100%;display:block}.waveform-area{fill:rgba(78,190,161,.68);stroke:rgba(120,232,202,.75);stroke-width:.32;vector-effect:non-scaling-stroke}.waveform-center{fill:none;stroke:rgba(170,255,231,.25);stroke-width:.45;vector-effect:non-scaling-stroke}.media-item-thumb>.waveform-view{inset:13px 4px 4px}.timeline-clip.track-audio>.waveform-view{inset:5px 4px 5px}.video-waveform{height:20px;background:rgba(5,12,12,.76);border-top:1px solid rgba(99,207,178,.18)}.video-waveform .waveform-view{inset:2px 3px}.video-waveform .waveform-area{fill:rgba(82,197,169,.62);stroke:rgba(130,233,207,.82)}
.timeline-ruler{background-image:none!important;background-color:#08070d}.timeline-track-grid>i{border-bottom:1px solid rgba(230,221,241,.075);background:rgba(255,255,255,.011)}.timeline-track-grid>.track-video{background:linear-gradient(90deg,rgba(95,60,130,.035),rgba(255,255,255,.006))}.timeline-track-grid>.track-video.is-main-track{background:linear-gradient(90deg,rgba(130,85,177,.07),rgba(73,48,99,.018))}.timeline-track-grid>.track-audio{background:linear-gradient(90deg,rgba(47,118,101,.05),rgba(255,255,255,.005))}.timeline-track-labels{background:#09080e}.track-labels-inner>span{border-bottom:1px solid rgba(230,221,241,.075)}.track-labels-inner>span.is-main-track b::after{content:" 主轨";margin-left:5px;color:#8b6da8;font-size:7px;font-weight:500}.track-labels-inner>span.is-main-track>i{box-shadow:0 0 7px rgba(155,100,212,.52)}.timeline-ticks{border-bottom-color:rgba(255,255,255,.075);background:rgba(8,7,13,.97)}.timeline-tick::before{height:5px;background:#3e3944}.timeline-clip{border-radius:4px;box-shadow:none}.timeline-clip.is-selected{box-shadow:0 0 0 1px rgba(236,183,101,.58),0 0 11px rgba(115,72,159,.2)}.clip-filmstrip{gap:1px}.clip-filmstrip img{min-width:54px;flex:0 0 54px;object-fit:cover;opacity:.88}.timeline-clip.track-image .clip-filmstrip img{width:100%;min-width:100%;object-fit:contain;opacity:1}.clip-caption{padding:2px 5px;background:linear-gradient(90deg,rgba(4,4,7,.82),rgba(4,4,7,.48),transparent)}
.main-track-magnet{width:auto!important;display:flex!important;grid-auto-flow:column;gap:6px;padding:0 9px!important;border:1px solid rgba(255,255,255,.065)!important;color:#665f6d!important;font-size:9px}.main-track-magnet i{width:7px;height:7px;border:1px solid currentColor;border-radius:2px}.main-track-magnet.is-active{border-color:rgba(111,201,159,.2)!important;background:rgba(45,118,88,.1)!important;color:#79cba6!important}.main-track-magnet.is-active i{background:#70c79d;box-shadow:0 0 6px rgba(112,199,157,.5)}

/* Compact professional workspace: menus, sequence settings and clip controls. */
.editor-topbar{gap:10px;padding:0 144px 0 12px}.editor-brand{flex:0 0 auto}.editor-project-title{flex:0 1 285px}.editor-project-title strong{max-width:250px}.editor-menu-bar{min-width:250px;max-width:650px;flex:1;display:flex;align-items:center;align-self:stretch;overflow:hidden;-webkit-app-region:no-drag}.editor-menu-bar button{height:28px;flex:0 0 auto;padding:0 7px;border:0;border-radius:5px;background:transparent;color:#8f8896;font-size:10px;white-space:nowrap;cursor:pointer}.editor-menu-bar button:hover{background:rgba(255,255,255,.05);color:#eee6f0}.editor-actions-cluster{min-width:0;display:flex;align-items:center;gap:5px;margin-left:auto;-webkit-app-region:no-drag}.editor-account{min-width:132px;max-width:172px;height:34px;margin-left:0;padding:0 9px}.editor-account>b{min-width:0}.editor-account i,.editor-account small{max-width:126px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-history-actions button{width:30px;height:30px}.editor-export{height:32px;padding:0 17px}
.editor-canvas-area{grid-template-rows:36px minmax(0,1fr) 30px;padding:0 14px}.canvas-toolbar{position:relative;z-index:25;justify-content:space-between}.canvas-settings-shell{position:relative;display:block!important}.canvas-settings-button{height:26px!important;display:flex!important;align-items:center;gap:6px!important;padding:0 8px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:6px!important;background:#11101a!important;color:#aaa2b1!important}.canvas-settings-button:hover,.canvas-settings-button[aria-expanded=true]{border-color:rgba(178,126,232,.35)!important;background:#181321!important;color:#e3d8e7!important}.canvas-settings-button svg{width:13px;height:13px}.canvas-settings-button>span:last-child{font-size:9px}.canvas-toolbar>span{font-size:9px;color:#716a78}.canvas-settings-popover{position:absolute;z-index:40;left:0;top:32px;width:340px;padding:15px;border:1px solid rgba(192,160,224,.24);border-radius:10px;background:linear-gradient(155deg,rgba(24,21,34,.985),rgba(10,9,16,.99));box-shadow:0 22px 60px rgba(0,0,0,.56)}.canvas-settings-popover header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.canvas-settings-popover header div{display:grid;gap:3px}.canvas-settings-popover header small{color:#705f80;font-size:7px;letter-spacing:.2em}.canvas-settings-popover header strong{color:#e3dae5;font-size:13px}.canvas-settings-popover header button{width:25px;height:25px;display:grid;place-items:center;border-radius:5px}.canvas-settings-popover header button:hover{background:rgba(255,255,255,.05)}.canvas-settings-popover header svg{width:14px;height:14px}.canvas-preset-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}.canvas-preset-grid button{display:grid;gap:4px;padding:9px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:7px!important;background:rgba(255,255,255,.018)!important;text-align:left}.canvas-preset-grid button:hover,.canvas-preset-grid button.is-active{border-color:rgba(170,112,228,.38)!important;background:rgba(112,60,167,.13)!important}.canvas-preset-grid b{color:#bdb5c2;font-size:10px}.canvas-preset-grid small{color:#696270;font-size:8px}.canvas-custom-settings{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:7px!important;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}.canvas-custom-settings label{display:grid!important;gap:5px!important;color:#817987!important;font-size:8px}.canvas-custom-settings input,.canvas-custom-settings select{width:100%;height:29px;padding:0 7px;border:1px solid rgba(255,255,255,.09);border-radius:5px;outline:0;background:#0d0c14;color:#d5ccd7;font-size:9px}.canvas-apply{width:100%;height:31px!important;margin-top:11px;border:1px solid rgba(213,168,92,.45)!important;border-radius:6px!important;background:linear-gradient(135deg,rgba(169,108,47,.72),rgba(226,179,98,.88))!important;color:#211407!important;font-weight:700}.canvas-stage{padding:4px 8px}.playback-controls{height:30px;min-height:30px;gap:7px;background:#08080e}.playback-controls .play-main{width:21px;height:21px}.playback-controls .play-main svg{width:11px;height:11px}.playback-controls span{font-size:9px}
.editor-inspector{overflow:hidden}.inspector-tabs{height:68px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,34px);padding:0 9px}.inspector-tabs button{font-size:10px}.inspector-tabs button.is-active::after{left:22%;right:22%}.inspector-empty{height:calc(100% - 68px)}.clip-inspector{height:calc(100% - 68px);display:block;overflow:auto;padding:13px 14px 28px;scrollbar-width:thin;scrollbar-color:#3b2c4b transparent}.clip-inspector-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.065)}.clip-inspector-heading div{min-width:0}.clip-inspector-heading small{color:#6c5e75;font-size:7px;letter-spacing:.17em}.clip-inspector-heading h3{margin:4px 0 0;font-size:13px}.clip-inspector-heading>span{padding:4px 6px;border-radius:4px;background:rgba(255,255,255,.035);color:#817987;font-size:8px;font-variant-numeric:tabular-nums}.inspector-section{display:grid;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.055)}.inspector-section-title{display:flex;align-items:center;justify-content:space-between}.inspector-section-title b{color:#a9a0ae;font-size:10px;font-weight:600}.inspector-section-title button{height:24px;padding:0 7px;border:1px solid rgba(255,255,255,.07);border-radius:5px;background:transparent;color:#6f6876;font-size:8px;cursor:pointer}.inspector-section-title button.is-active{border-color:rgba(169,111,224,.28);color:#c9aae8;background:rgba(113,60,166,.1)}.inspector-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.clip-inspector .inspector-field{display:grid;gap:5px;padding:0;border:0;color:#756e7b;font-size:9px}.inspector-input{height:29px;display:flex!important;align-items:center;padding:0 7px;border:1px solid rgba(255,255,255,.075);border-radius:5px;background:#0a0910}.inspector-input input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#d4ccd6;font-size:10px;font-variant-numeric:tabular-nums}.inspector-input i{color:#625c69;font-size:8px;font-style:normal}.clip-inspector .inspector-field>select{width:100%;height:30px;padding:0 7px;border:1px solid rgba(255,255,255,.08);border-radius:5px;outline:0;background:#0a0910;color:#c7beca;font-size:9px}.inspector-align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.inspector-align-grid button,.speed-presets button,.inspector-reset{height:27px;border:1px solid rgba(255,255,255,.07);border-radius:5px;background:rgba(255,255,255,.018);color:#817a88;font-size:8px;cursor:pointer}.inspector-align-grid button:hover,.speed-presets button:hover,.speed-presets button.is-active{border-color:rgba(169,111,224,.3);background:rgba(113,60,166,.13);color:#d3b7eb}.speed-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.inspector-switch{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:2px 0!important;border:0!important;cursor:pointer}.inspector-switch input{position:absolute;opacity:0}.inspector-switch i{width:28px;height:16px;border-radius:10px;background:#29242f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:.16s}.inspector-switch i::after{content:"";display:block;width:12px;height:12px;margin:2px;border-radius:50%;background:#77717d;transition:.16s}.inspector-switch input:checked+i{background:#7042a6}.inspector-switch input:checked+i::after{transform:translateX(12px);background:#f0e8f2}.inspector-switch span{color:#918997!important;font-size:9px}.inspector-note{margin:0!important;color:#67616d!important;font-size:8px!important;line-height:1.65!important}.inspector-reset{width:100%;color:#a89fad}
.timeline-zoom-control{display:flex;align-items:center;gap:5px}.timeline-zoom-control input{width:100px;height:16px;accent-color:#9d69d4;cursor:pointer}.timeline-zoom-control input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:#30283a}.timeline-zoom-control input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px;border:2px solid #d6c4e7;border-radius:50%;appearance:none;background:#8e58c8}.timeline-toolbar{padding-right:10px}

.modal-layer { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(3,3,8,.72); backdrop-filter:blur(9px); }
.register-modal-layer { z-index:55; padding:20px; background:rgba(3,3,8,.78); backdrop-filter:blur(11px) saturate(.82); }
.register-modal-card { position:relative; width:min(540px,calc(100vw - 34px)); max-height:calc(100vh - 34px); overflow-x:hidden; overflow-y:auto; padding:24px 64px 20px; border:1px solid rgba(192,151,235,.42); border-radius:16px; background:radial-gradient(circle at 50% -7%,rgba(111,49,186,.24),transparent 36%),linear-gradient(155deg,rgba(22,19,34,.99),rgba(9,9,16,.99)); box-shadow:0 38px 120px rgba(0,0,0,.76),inset 0 0 70px rgba(88,39,142,.08); animation:registerIn .28s cubic-bezier(.2,.78,.2,1) both; scrollbar-width:thin; scrollbar-color:#392c4b transparent; }
.register-modal-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(125deg,transparent 35%,rgba(255,255,255,.025),transparent 62%); }
.register-close { position:absolute; z-index:3; right:18px; top:17px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#9e96aa; cursor:pointer; }.register-close:hover{background:rgba(255,255,255,.055);color:#f5eef6}.register-close svg{width:19px;height:19px}
.register-film-glow{position:absolute;z-index:0;width:210px;height:72px;border:2px solid rgba(218,169,91,.46);border-radius:50%;pointer-events:none;filter:drop-shadow(0 0 18px rgba(114,56,191,.24))}.register-film-left{left:-100px;bottom:62px;transform:rotate(48deg)}.register-film-right{right:-104px;bottom:66px;transform:rotate(-48deg)}
.register-heading{position:relative;z-index:1;text-align:center}.register-heading>img{display:block;width:116px;height:89px;margin:0 auto -2px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}.register-brand-line{display:flex;align-items:center;justify-content:center;gap:14px}.register-brand-line span{width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.register-brand-line span:last-child{transform:scaleX(-1)}.register-brand-line small{color:#dcc18d;font:600 9px/1 "Segoe UI",sans-serif;letter-spacing:.32em;text-indent:.32em}.register-heading h2{margin:12px 0 4px;font:600 28px/1.25 "Microsoft YaHei UI",sans-serif;letter-spacing:.08em;text-indent:.08em;color:#f7f1ed}.register-heading p{margin:0;color:#a39bac;font-size:12px;letter-spacing:.22em;text-indent:.22em}
#registerForm{position:relative;z-index:1;display:grid;gap:13px;margin-top:20px}.register-field{display:grid;gap:6px;color:#b7afbc;font-size:11px}.register-input{height:45px;display:flex;align-items:center;overflow:hidden;border:1px solid rgba(203,193,224,.25);border-radius:8px;background:rgba(8,8,14,.78);transition:.18s ease}.register-input:focus-within{border-color:rgba(232,185,99,.66);box-shadow:0 0 0 3px rgba(232,185,99,.07)}.register-input.is-invalid{border-color:rgba(239,123,135,.7);box-shadow:0 0 0 3px rgba(239,123,135,.07)}.register-input.is-valid{border-color:rgba(131,221,179,.48)}.register-input b{padding:0 12px;border-right:1px solid var(--line);font-weight:500;color:#d7cfc8}.register-input input{min-width:0;flex:1;height:100%;padding:0 13px;border:0;outline:0;background:transparent;color:#f2ebf2;user-select:text}.register-input input::placeholder{color:#66616f}.register-input button{height:100%;padding:0 12px;border:0;border-left:1px solid var(--line);background:transparent;color:#bda3dc;font-size:10px;cursor:pointer}.register-input button:hover{color:var(--gold-light)}.register-field-feedback{min-height:13px;color:#716b79;font-size:9px;line-height:1.35}.register-field-feedback.is-error{color:#e58993}.register-field-feedback.is-valid{color:#78cfa5}
.register-agreement{display:flex;align-items:flex-start;gap:8px;margin-top:2px;color:#918a98;font-size:10px;line-height:16px;cursor:pointer}.register-agreement input{position:absolute;opacity:0}.register-agreement i{flex:0 0 15px;width:15px;height:15px;display:grid;place-items:center;border:1px solid #776f80;border-radius:4px;background:#0b0a11}.register-agreement input:checked+i{border-color:#a47df0;background:linear-gradient(135deg,#7142d3,#b08af6)}.register-agreement input:checked+i::after{content:"✓";color:white;font-size:10px;font-weight:800}.register-agreement a{color:#ae7ef1;text-decoration:none}.register-agreement a:hover{color:#d5baf9}.register-error{min-height:14px;margin:-4px 0;color:#e98a94;text-align:center;font-size:10px}.register-submit{height:47px;display:flex;align-items:center;justify-content:center;gap:14px;border:1px solid #e0b364;border-radius:9px;background:linear-gradient(105deg,#3a2064,#6c3d9c 48%,#4c286f);box-shadow:0 0 0 1px rgba(255,223,165,.18) inset,0 10px 28px rgba(54,21,89,.3);color:#fff8ed;font-weight:700;cursor:pointer}.register-submit:hover{filter:brightness(1.09);box-shadow:0 0 0 1px rgba(255,223,165,.28) inset,0 12px 34px rgba(79,35,126,.4)}.register-submit:disabled{opacity:.58;cursor:wait}.register-submit b{font-size:20px;font-weight:400;color:#ffe0a3}.return-login{justify-self:center;border:0;background:transparent;color:#a29aa8;font-size:11px;cursor:pointer}.return-login span{margin-left:4px;color:#b17ce9}.return-login:hover span{color:#e3c7ff}.register-security{margin:-4px 0 0;color:#696370;text-align:center;font-size:9px}.register-security span{margin-right:4px;color:#8e8496}@keyframes registerIn{from{opacity:0;transform:translateY(16px) scale(.975)}}
.gold-button { min-height:40px; padding:0 22px; border:1px solid #d5a14f; border-radius:7px; background:linear-gradient(135deg,#d59b47,#f2ce83); box-shadow:0 7px 22px rgba(172,112,37,.16); color:#281707; font-weight:700; cursor:pointer; }
.toast-region { position:fixed; z-index:60; right:28px; bottom:28px; display:grid; gap:10px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; min-width:260px; padding:13px 16px; border:1px solid rgba(203,183,225,.23); border-radius:9px; background:rgba(22,20,31,.95); box-shadow:var(--shadow); color:#dcd5df; font-size:12px; animation:toastIn .25s ease both; }.toast::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 9px var(--success); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

@media (max-width: 1350px) {
  .home-screen { grid-template-columns:350px minmax(0,1fr); }
  .home-screen.is-authenticated { grid-template-columns:220px minmax(0,1fr); }
  .home-screen.is-authenticated .workspace-header { grid-template-columns:minmax(185px,1fr) minmax(220px,330px) auto; gap:14px; }.home-screen.is-authenticated .header-actions{gap:12px}.home-screen.is-authenticated .view-switch{display:none}
  .login-panel { padding-inline:28px; }.brand-block img { width:130px; height:115px; }.brand-block h1 { font-size:36px; }.login-card { margin-top:18px; padding-inline:20px; }.hero-card { padding-left:44px; }.hero-copy h2 { font-size:43px; }.project-preview { height:112px; }
}
@media (max-height: 820px) {
  .login-panel { padding-top:26px; }.brand-block img { width:115px; height:94px; }.brand-block h1 { font-size:32px; }.brand-block > p { font-size:17px; }.login-card { margin-top:14px; }.login-view { min-height:185px; }.qr-code { width:108px; height:108px; }.other-login { margin:12px 0 10px; }.social-logins button { width:38px; height:38px; }.sidebar-nav-item { height:39px; }.sidebar-menu { padding-top:12px; }.hero-card { height:190px; }.project-preview { height:105px; }
  .register-modal-card{padding-top:18px;padding-bottom:15px}.register-heading>img{width:92px;height:69px}.register-heading h2{margin-top:8px;font-size:24px}#registerForm{margin-top:14px;gap:9px}.register-input{height:40px}.register-submit{height:43px}
}
@media (max-width: 1020px) {
  .home-screen:not(.is-authenticated) { grid-template-columns:minmax(0,1fr); }.home-screen:not(.is-authenticated) .login-panel { display:none; }.home-screen:not(.is-authenticated) .workspace { grid-column:1; }
  .home-screen.is-authenticated { grid-template-columns:82px minmax(0,1fr); }.home-screen.is-authenticated .app-sidebar{padding-inline:10px}.home-screen.is-authenticated .sidebar-brand{justify-content:center;padding-inline:0}.home-screen.is-authenticated .sidebar-brand img{width:49px}.home-screen.is-authenticated .sidebar-brand div,.home-screen.is-authenticated .sidebar-nav-item b{display:none}.home-screen.is-authenticated .sidebar-nav-item{justify-content:center;padding:0}.home-screen.is-authenticated .workspace-header{grid-template-columns:1fr auto;padding-left:22px}.home-screen.is-authenticated .logged-in-welcome{display:none}.home-screen.is-authenticated .search-box{max-width:none}.home-screen.is-authenticated .membership-button{display:none}.project-grid { grid-template-columns:repeat(2,1fr); }.header-actions { margin-right:0; }.lens-art { right:2%; opacity:.65; }
}
@media (max-width: 1120px) {
  .editor-screen { grid-template-columns:70px 220px minmax(320px,1fr); }.editor-inspector{display:none}.editor-canvas-area{grid-column:3}.editor-timeline{grid-column:2/-1}.editor-project-title span{display:none}
}
@media (min-width:1800px) and (min-height:1000px){
  .home-screen.is-authenticated{grid-template-columns:280px minmax(0,1fr)}.home-screen.is-authenticated .workspace-header{height:86px;padding-inline:38px}.home-screen.is-authenticated .sidebar-nav-item{height:52px;font-size:14px}.workspace-content{padding:30px 42px 38px}.hero-card{height:260px}.hero-copy h2{font-size:58px}.hero-copy p{font-size:22px}.project-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.project-info strong{font-size:15px}.project-info small{font-size:11px}
  .editor-screen{grid-template-columns:96px var(--media-panel-width) minmax(520px,1fr) var(--inspector-width);grid-template-rows:78px minmax(360px,1fr) var(--timeline-height)}.editor-topbar{padding-right:176px}.editor-brand img{width:58px;height:54px}.editor-brand b{font-size:16px}.editor-back{width:38px;height:38px}.editor-project-title strong{font-size:17px}.editor-project-title span{font-size:12px}.editor-history-actions button{width:40px;height:40px}.editor-export{height:40px;font-size:13px}.editor-tools{padding:15px 10px}.editor-tools button{min-height:64px}.editor-tools button svg{width:24px;height:24px}.editor-tools button b{font-size:12px}.editor-media-panel{padding:23px 20px}.editor-panel-heading small{font-size:10px}.editor-panel-heading h2{font-size:20px}.editor-panel-heading button{height:36px;font-size:12px}.media-drop-zone{min-height:170px}.media-drop-zone strong{font-size:14px}.media-drop-zone small,.media-drop-zone button{font-size:11px}.media-bin-title{font-size:13px}.media-bin{gap:12px}.media-item{min-height:146px}.media-item-thumb{height:100px}.media-item-copy strong{font-size:12px}.media-item-copy small{font-size:10px}.media-bin.is-list-view .media-item{grid-template-columns:92px minmax(0,1fr) auto;min-height:73px}.media-bin.is-list-view .media-item-thumb{height:61px}.canvas-toolbar{font-size:12px}.canvas-toolbar select{height:34px;font-size:12px}.playback-controls{font-size:12px}.playback-controls button{width:27px;height:27px}.playback-controls .play-main{width:27px;height:27px}.inspector-tabs button{font-size:13px}.clip-inspector h3{font-size:17px}.clip-inspector label,.clip-inspector p{font-size:12px}.timeline-toolbar{height:52px}.timeline-toolbar button{width:38px;height:36px}.timeline-tools #toolHint{font-size:11px}.timeline-body{height:calc(100% - 52px);grid-template-columns:136px minmax(0,1fr)}.track-labels-inner>span{font-size:12px}.timeline-tick{font-size:10px}.timeline-clip b{font-size:11px}.timeline-clip small{font-size:9px}
}

/* Timeline, tool panels and direct canvas editing */
.editor-side-panel{height:100%;min-height:0;overflow:hidden}
#mediaPanelContent{display:flex;flex-direction:column}
#mediaPanelContent .media-bin{flex:1;max-height:none!important;min-height:0}
.shape-tool-panel{position:static;inset:auto;height:100%;padding:0;background:transparent}
.text-tool-panel,.layer-tool-panel{height:100%;overflow:auto;padding:4px 1px 20px;scrollbar-width:thin;scrollbar-color:#555 transparent}
.text-tool-panel>header,.layer-tool-panel>header{padding-bottom:15px;border-bottom:1px solid #414141}
.text-tool-panel header small,.layer-tool-panel header small{color:#8d8d8d;font-size:8px;letter-spacing:.18em}
.text-tool-panel header h2,.layer-tool-panel header h2{margin:5px 0 7px;color:#eee;font-size:18px}
.text-tool-panel header p,.layer-tool-panel header p{margin:0;color:#999;font-size:10px;line-height:1.6}
.panel-primary-action{width:100%;height:36px;margin:15px 0;border:1px solid #3987dc;border-radius:4px;background:#276aa8;color:#fff;font-size:11px;font-weight:600;cursor:pointer}
.panel-primary-action:hover{background:#317bbd}
.text-editor-fields{display:grid;gap:13px;transition:.16s opacity}.text-editor-fields.is-disabled{opacity:.38}
.text-editor-fields>label,.text-field-row label{display:grid;gap:6px;color:#b9b9b9;font-size:10px}
.text-editor-fields textarea,.text-editor-fields select,.text-editor-fields input[type=number]{width:100%;border:1px solid #4c4c4c;border-radius:4px;outline:0;background:#1b1b1b;color:#eee;font:11px "Microsoft YaHei UI",sans-serif;user-select:text}
.text-editor-fields textarea{min-height:98px;padding:9px;resize:vertical;line-height:1.6}.text-editor-fields select,.text-editor-fields input[type=number]{height:30px;padding:0 7px}
.text-range-row{display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:8px}.text-range-row input[type=range]{width:100%;accent-color:#2680eb}
.text-field-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.text-field-row input[type=color]{width:100%;height:30px;padding:2px;border:1px solid #4c4c4c;border-radius:4px;background:#1b1b1b}
.layer-panel-empty{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #464646;border-radius:5px;color:#888;text-align:center}
.layer-panel-empty svg{width:28px;height:28px;color:#6eaef1}.layer-panel-empty strong{color:#c9c9c9;font-size:11px}.layer-panel-empty small{font-size:9px}

.preview-text{display:flex!important;align-items:center;overflow:visible!important;background:transparent!important;text-shadow:0 2px 8px rgba(0,0,0,.55);word-break:break-word}
.canvas-transform-box{position:absolute;z-index:50;border:1px solid #58a7f5;box-shadow:0 0 0 1px rgba(10,10,10,.65);cursor:move;transform-origin:center;touch-action:none}
.canvas-transform-box::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(88,167,245,.22);pointer-events:none}
.transform-handle{position:absolute;width:9px;height:9px;border:1px solid #0d4e89;background:#f4fbff;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.transform-handle.nw{left:-5px;top:-5px;cursor:nwse-resize}.transform-handle.ne{right:-5px;top:-5px;cursor:nesw-resize}.transform-handle.sw{left:-5px;bottom:-5px;cursor:nesw-resize}.transform-handle.se{right:-5px;bottom:-5px;cursor:nwse-resize}
.transform-rotate-line{position:absolute;left:50%;top:-27px;width:1px;height:22px;background:#58a7f5}.transform-rotate-handle{position:absolute;left:calc(50% - 6px);top:-39px;width:12px;height:12px;border:2px solid #58a7f5;border-radius:50%;background:#f3faff;cursor:crosshair}

.timeline-toolbar{gap:8px}.timeline-tools{min-width:0}.timeline-toolbar-right{display:flex!important;align-items:center;gap:5px;margin-left:auto}
.timeline-toolbar .timeline-toggle{width:30px;height:29px;border:1px solid #444;border-radius:4px;background:#242424;color:#8c8c8c}
.timeline-toolbar .timeline-toggle svg{width:15px;height:15px}.timeline-toolbar .timeline-toggle.is-active{border-color:#3d7fbd;background:#274b6c;color:#b9dcff}
.timeline-tools button svg{width:15px;height:15px}.timeline-tools #toolHint{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline-body{grid-template-columns:156px minmax(0,1fr)}
.track-labels-inner>span{grid-template-columns:7px minmax(36px,1fr) auto;gap:7px;padding:0 8px}
.track-labels-inner>span>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-head-actions{display:flex;align-items:center;gap:2px}
.track-head-actions button{width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:3px;background:transparent;color:#8d8d8d;cursor:pointer}
.track-head-actions button:hover{background:#3b3b3b;color:#fff}.track-head-actions button.is-active{background:#315f88;color:#d9edff}
.track-head-actions button svg{width:13px;height:13px}.track-head-actions small{min-width:11px;margin-left:2px;color:#777;font-size:8px;text-align:right}
.timeline-clip{touch-action:none}.timeline-clip.is-dragging{z-index:30!important;opacity:.88;box-shadow:0 8px 20px rgba(0,0,0,.45);cursor:grabbing}
.clip-filmstrip img{width:var(--frame-cell,54px);min-width:var(--frame-cell,54px);flex:0 0 var(--frame-cell,54px)}
.text-clip-preview{position:absolute;inset:0;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:10px;font-weight:700;opacity:.72;white-space:nowrap;overflow:hidden}
.timeline-tick.frame-tick{top:17px;transform:none;font-size:7px}.timeline-tick.frame-tick::before{top:-17px;height:4px;background:#555}.timeline-tick.frame-tick.is-major{top:8px;transform:translateX(4px)}.timeline-tick.frame-tick.is-major::before{top:-8px;height:7px;background:#777}
.timeline-ruler.is-frame-zoom .timeline-ticks{height:30px}
.inspector-align-grid button{display:grid;place-items:center}.inspector-align-grid button svg{width:15px;height:15px}

@media (min-width:1800px) and (min-height:1000px){
  .timeline-body{grid-template-columns:170px minmax(0,1fr)}
  .track-head-actions button{width:25px;height:25px}.track-head-actions button svg{width:14px;height:14px}
  .timeline-tools #toolHint{font-size:10px}.timeline-zoom-control input{width:150px}
}
@media (min-width:1800px) and (min-height:1000px){
  .editor-screen{--media-panel-width:320px;--inspector-width:340px;--timeline-height:390px;grid-template-columns:88px var(--media-panel-width) minmax(520px,1fr) var(--inspector-width);grid-template-rows:66px minmax(340px,1fr) var(--timeline-height)}
  .editor-topbar{gap:11px;padding:0 144px 0 14px}.editor-brand{height:48px}.editor-brand img{width:50px;height:46px}.editor-brand b{font-size:15px}.editor-back{width:34px;height:34px}.editor-project-title{flex-basis:310px}.editor-project-title strong{max-width:278px;font-size:15px}.editor-project-title span{font-size:11px}.editor-menu-bar button{padding-inline:8px;font-size:11px}.editor-account{min-width:146px;height:36px}.editor-account i{font-size:11px}.editor-account small{font-size:9px}.editor-history-actions button{width:32px;height:32px}.editor-export{height:34px;font-size:12px}
  .editor-tools{padding:10px 8px}.editor-tools button{min-height:56px}.editor-tools button svg{width:21px;height:21px}.editor-tools button b{font-size:11px}.editor-media-panel{padding:17px 15px}.editor-panel-heading{margin-bottom:13px}.editor-panel-heading small{font-size:9px}.editor-panel-heading h2{font-size:17px}.editor-panel-heading button{height:31px;font-size:11px}.media-drop-zone{min-height:135px}.media-drop-zone strong{font-size:12px}.media-drop-zone small,.media-drop-zone button{font-size:10px}.media-bin-title{font-size:12px}.media-bin{gap:9px}.media-item{min-height:122px}.media-item-thumb{height:80px}.media-item-copy strong{font-size:11px}.media-item-copy small{font-size:9px}.media-bin.is-list-view .media-item{grid-template-columns:82px minmax(0,1fr) auto;min-height:65px}.media-bin.is-list-view .media-item-thumb{height:53px}
  .editor-canvas-area{grid-template-rows:38px minmax(0,1fr) 32px;padding-inline:16px}.canvas-settings-button>span:last-child,.canvas-toolbar>span{font-size:10px}.playback-controls{height:32px;min-height:32px}.playback-controls .play-main{width:23px;height:23px}.playback-controls span{font-size:10px}.inspector-tabs{height:72px;grid-template-rows:repeat(2,36px)}.inspector-tabs button{font-size:11px}.clip-inspector{height:calc(100% - 72px);padding:14px 15px 28px}.clip-inspector-heading h3{font-size:15px}.inspector-section-title b{font-size:11px}.clip-inspector .inspector-field,.inspector-switch span{font-size:10px}.inspector-input input,.clip-inspector .inspector-field>select{font-size:11px}.inspector-note{font-size:9px!important}
  .timeline-toolbar{height:48px}.timeline-toolbar button{width:34px;height:32px}.timeline-tools #toolHint,.main-track-magnet,.timeline-auto-track-hint{font-size:10px}.timeline-body{height:calc(100% - 48px);grid-template-columns:124px minmax(0,1fr)}.track-labels-inner>span{font-size:11px}.timeline-tick{font-size:9px}.timeline-clip b{font-size:10px}.timeline-clip small{font-size:8px}.timeline-zoom-control input{width:120px}
}
@media (max-width: 560px) {.register-modal-layer{padding:8px}.register-modal-card{width:100%;max-height:calc(100vh - 16px);padding-inline:24px}.register-heading>img{width:92px;height:70px}.register-heading h2{font-size:23px}.register-film-glow{display:none}}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Adobe-inspired neutral editing workspace */
.editor-screen{
  --editor-bg:#181818;--editor-panel:#232323;--editor-panel-raised:#2b2b2b;--editor-input:#191919;
  --editor-line:#414141;--editor-text:#e4e4e4;--editor-muted:#a6a6a6;--editor-dim:#777;
  --editor-accent:#2680eb;--editor-accent-soft:rgba(38,128,235,.18);
  background:var(--editor-bg);color:var(--editor-text)
}
.editor-topbar{position:relative;padding-right:154px;border-bottom-color:var(--editor-line);background:#292929}
.editor-brand{border-right-color:var(--editor-line)}
.editor-brand b,.editor-project-title strong{color:#f0f0f0}
.editor-project-title span{color:#a3a3a3}
.editor-back{border-color:#474747;background:#303030;color:#c8c8c8}
.editor-back:hover{border-color:#6a6a6a;background:#383838;color:#fff}
.editor-menu-bar{min-width:210px;max-width:430px}
.editor-menu-bar button{color:#c6c6c6;font-size:11px}
.editor-menu-bar button:hover{background:#3b3b3b;color:#fff}
.editor-actions-cluster{position:absolute;right:146px;top:0;height:40px;gap:4px;margin:0}
.editor-account{height:32px;min-width:140px;border-color:#484848;border-radius:4px;background:#303030;color:#c8c8c8}
.editor-account>svg{color:#a9a9a9}.editor-account i{color:#efefef}.editor-account small{color:#9f9f9f}
.editor-account.is-logged-in{border-color:#3e6f56}.editor-account.is-logged-in>svg{color:#69bc8d}
.editor-history-actions button{width:29px;height:29px;border-radius:3px;color:#aaa}
.editor-history-actions button:hover{background:#3b3b3b;color:#fff}
.editor-export{height:32px;border-color:#2d89ef;border-radius:4px;background:#1473e6;color:#fff;box-shadow:none}
.editor-export:hover{background:#0d66d0}
.window-actions{height:40px}.window-actions button{color:#c4c4c4}

.editor-tools{border-right-color:var(--editor-line);background:#282828}
.editor-tools button{color:#aaa;border-radius:4px}
.editor-tools button:hover{background:#353535;color:#efefef}
.editor-tools button.is-active{border-color:#3b78bd;background:var(--editor-accent-soft);color:#76b7ff}
.editor-media-panel{position:relative;border-right-color:var(--editor-line);background:var(--editor-panel)}
.editor-panel-heading small{color:#8d8d8d}.editor-panel-heading h2{color:#eee}
.editor-panel-heading button{border-color:#3c7ec7;background:#245b91;color:#fff}
.editor-panel-heading button:hover{background:#2f6fae}
.media-drop-zone{border-color:#505050;background:#1e1e1e;color:#aaa}
.media-drop-zone.is-dragging{border-color:#2680eb;background:rgba(38,128,235,.12)}
.media-drop-zone>svg{color:#8abcf5}.media-drop-zone strong{color:#d4d4d4}
.media-drop-zone button{border-color:#555;background:#323232;color:#e0e0e0}
.media-bin-title{display:grid;gap:8px;margin-top:12px;padding-bottom:9px;border-bottom-color:#414141;color:#d0d0d0}
.media-bin-title>span{display:flex;align-items:center;justify-content:space-between}
.media-bin-title small{color:#909090}
.media-bin-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:5px}
.media-bin-controls select{min-width:0;width:100%;height:27px;padding:0 22px 0 7px;border:1px solid #4b4b4b;border-radius:3px;outline:0;background:#1d1d1d;color:#ccc;font-size:9px}
.media-view-switch button{border-radius:3px;color:#aaa}.media-view-switch button:hover{background:#3a3a3a;color:#fff}
.media-view-switch button.is-active{background:#3e6f9f;color:#dceeff}
.editor-media-panel.has-media .media-bin{max-height:calc(100% - 111px)}
.media-item{border-color:#3d3d3d;background:#292929;box-shadow:none}
.media-item:hover{border-color:#5688bd;background:#30373e}
.media-item-thumb,.clip-filmstrip{background-color:#181818}
.media-item.type-image .media-item-thumb,.timeline-clip.track-image .clip-filmstrip{background-color:#242424;background-image:linear-gradient(45deg,#303030 25%,transparent 25%),linear-gradient(-45deg,#303030 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#303030 75%),linear-gradient(-45deg,transparent 75%,#303030 75%)}
.media-item-copy strong{color:#e0e0e0}.media-item-copy small{color:#999}
.media-item-actions button{border-color:#535353;background:#242424;color:#b9d9ff}
.media-item-actions button:hover{background:#286ea9;color:#fff}
.media-item.type-video .media-type-badge{border-color:#4b8fd4;background:#245f98}
.media-item.type-audio .media-type-badge{border-color:#4f9d7f;background:#286e57}
.media-item.type-image .media-type-badge{border-color:#bc8547;background:#855c2b}

.shape-tool-panel{position:absolute;z-index:35;inset:0;padding:18px 15px;background:#252525;overflow:auto}
.shape-tool-panel header{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #414141}
.shape-tool-panel header small{color:#8d8d8d;font-size:8px;letter-spacing:.18em}
.shape-tool-panel h2{margin:4px 0 0;color:#eee;font-size:17px}
.shape-tool-panel header button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:3px;background:transparent;color:#aaa;cursor:pointer}
.shape-tool-panel header button:hover{background:#3a3a3a;color:#fff}.shape-tool-panel header svg{width:16px;height:16px}
.shape-tool-panel>p{margin:13px 0;color:#aaa;font-size:10px;line-height:1.6}
.shape-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.shape-tool-grid button{min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid #474747;border-radius:4px;background:#2c2c2c;color:#d6d6d6;cursor:pointer}
.shape-tool-grid button:hover,.shape-tool-grid button.is-active{border-color:#3f8fe9;background:#303c49;color:#fff}
.shape-tool-grid button b{font-size:10px}.shape-tool-grid button small{color:#9b9b9b;font-size:8px;line-height:1.4}
.shape-tool-grid button>svg{width:25px;height:25px;color:#77b9ff}
.shape-pen-tool{grid-column:1/-1;min-height:92px!important}
.shape-preview{display:block;width:32px;height:24px;border:2px solid #8fc7ff;background:rgba(38,128,235,.2)}
.shape-preview.circle{width:28px;height:28px;border-radius:50%}.shape-preview.rounded{border-radius:8px}
.shape-preview.polygon{width:31px;height:29px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.video-canvas.is-drawing-shape{cursor:crosshair;outline:1px solid #2680eb;outline-offset:3px}

.editor-canvas-area{background:#1b1b1b}
.canvas-settings-button{border-color:#4a4a4a!important;background:#2a2a2a!important;color:#d0d0d0!important}
.canvas-settings-button:hover,.canvas-settings-button[aria-expanded=true]{border-color:#3888df!important;background:#303840!important;color:#fff!important}
.canvas-settings-popover{border-color:#505050;background:#282828;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.canvas-settings-popover header small{color:#8c8c8c}.canvas-settings-popover header strong{color:#eee}
.canvas-preset-grid button{border-color:#494949!important;background:#303030!important}
.canvas-preset-grid button:hover,.canvas-preset-grid button.is-active{border-color:#3888df!important;background:#303e4c!important}
.canvas-preset-grid b{color:#e0e0e0}.canvas-preset-grid small{color:#999}
.canvas-custom-settings{border-top-color:#474747!important}.canvas-custom-settings label{color:#b0b0b0!important}
.canvas-custom-settings input,.canvas-custom-settings select{border-color:#505050;background:#1c1c1c;color:#eee}
.canvas-apply{border-color:#2680eb!important;background:#1473e6!important;color:#fff!important}
.video-canvas{border-color:#4b4b4b;background-color:#111;background-image:linear-gradient(45deg,#1b1b1b 25%,transparent 25%),linear-gradient(-45deg,#1b1b1b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1b1b1b 75%),linear-gradient(-45deg,transparent 75%,#1b1b1b 75%);box-shadow:0 14px 36px rgba(0,0,0,.42)}
.playback-controls{height:28px;min-height:28px;background:#1b1b1b;color:#aaa}
.playback-controls .play-main{width:20px!important;height:20px!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#eee!important}
.playback-controls .play-main:hover{color:#75b9ff!important}.playback-controls .play-main svg{width:14px!important;height:14px!important;fill:currentColor;stroke-width:1.2}

.editor-inspector{border-left-color:var(--editor-line);background:var(--editor-panel)}
.inspector-tabs{height:40px;display:flex;grid-template:none;grid-template-rows:none;gap:0;padding:0 7px;overflow-x:auto;border-bottom-color:var(--editor-line);scrollbar-width:none}
.inspector-tabs::-webkit-scrollbar{display:none}
.inspector-tabs button{min-width:42px;flex:1 0 auto;padding:0 5px;color:#aaa;font-size:10px;white-space:nowrap}
.inspector-tabs button.is-active{color:#fff}.inspector-tabs button.is-active::after{left:7px;right:7px;background:#2680eb}
.inspector-empty,.clip-inspector{height:calc(100% - 40px)}
.inspector-empty{color:#888}.inspector-empty strong{color:#bbb}
.clip-inspector{padding:13px 14px 28px;scrollbar-color:#555 transparent}
.clip-inspector-heading{border-bottom-color:#444}.clip-inspector-heading small{color:#929292}.clip-inspector-heading h3{color:#eee}.clip-inspector-heading>span{background:#333;color:#bbb}
.inspector-section{gap:11px;border-bottom-color:#414141}.inspector-section-title b{color:#ddd}
.inspector-section-title button{border-color:#505050;color:#aaa}.inspector-section-title button.is-active{border-color:#397fc8;background:#2e4052;color:#bdddff}
.clip-inspector .inspector-field{display:grid;gap:5px;color:#b4b4b4}
.inspector-control-row{display:grid!important;grid-template-columns:minmax(70px,1fr) 78px;align-items:center;gap:8px;color:inherit!important}
.inspector-input{height:28px;padding:0 6px;border-color:#4d4d4d;background:#1b1b1b}
.inspector-input input{color:#eee}.inspector-input i{color:#969696}
.inspector-range{width:100%;height:16px;appearance:none;background:transparent;cursor:ew-resize}
.inspector-range::-webkit-slider-runnable-track{height:3px;border:0;border-radius:2px;background:#575757}
.inspector-range::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;appearance:none;border:1px solid #b9dcff;border-radius:50%;background:#2680eb;box-shadow:0 0 0 2px #232323}
.inspector-range:focus-visible{outline:1px solid #2680eb;outline-offset:2px}
.clip-inspector .inspector-field>select{border-color:#4d4d4d;background:#1b1b1b;color:#ddd}
.inspector-align-grid button,.speed-presets button,.inspector-reset{border-color:#4b4b4b;background:#2b2b2b;color:#bbb}
.inspector-align-grid button:hover,.speed-presets button:hover,.speed-presets button.is-active{border-color:#3985d2;background:#303e4c;color:#fff}
.inspector-switch i{background:#4a4a4a}.inspector-switch input:checked+i{background:#2680eb}
.inspector-switch span{color:#bbb!important}.inspector-note{color:#999!important}
.inspector-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.inspector-color{height:30px;display:flex!important;align-items:center;gap:7px;padding:0 7px;border:1px solid #4d4d4d;border-radius:4px;background:#1b1b1b;color:#bbb!important}
.inspector-color input{width:22px;height:18px;padding:0;border:0;background:transparent}.inspector-color b{overflow:hidden;font-size:8px;font-weight:500;text-overflow:ellipsis}

.editor-timeline{border-top-color:var(--editor-line);background:#1a1a1a}
.timeline-toolbar{border-bottom-color:#414141;background:#252525}
.timeline-toolbar button{color:#aaa}.timeline-toolbar button:hover{background:#3a3a3a;color:#fff}
.timeline-toolbar button.is-active{background:#315f8d;color:#eaf5ff}
.timeline-tools #toolHint,.timeline-auto-track-hint{color:#a0a0a0}
.main-track-magnet{color:#aaa!important}.main-track-magnet.is-active{color:#a9d4ff!important}
.timeline-track-labels{border-right-color:#414141;background:#222}
.track-labels-inner>span{border-bottom-color:#3b3b3b;color:#ccc}
.track-labels-inner>span>small{color:#898989}
.track-labels-inner>span>i{background:#4d86bd}.track-labels-inner .track-graphic>i{background:#d99a4c}
.track-labels-inner .track-audio>i{background:#4b9a78}.track-labels-inner .track-text>i{background:#d19052}.track-labels-inner .track-sticker>i{background:#c581a8}.track-labels-inner .track-effect>i{background:#56a0c8}.track-labels-inner .track-transition>i{background:#7c91c8}.track-labels-inner .track-filter>i{background:#6d9d77}.track-labels-inner .track-color>i{background:#bd6a5c}
.track-labels-inner>span.is-main-track b::after{color:#75aee5}
.timeline-ruler{background-color:#171717!important;color:#888;scrollbar-color:#565656 transparent}
.timeline-ticks{border-bottom-color:#414141;background:rgba(27,27,27,.97)}
.timeline-tick{color:#8e8e8e}.timeline-tick::before{background:#666}
.timeline-track-grid>i{border-bottom-color:#3b3b3b;background:#1a1a1a}
.timeline-track-grid>.track-video,.timeline-track-grid>.track-video.is-main-track{background:linear-gradient(90deg,rgba(46,89,130,.13),rgba(255,255,255,.008))}
.timeline-track-grid>.track-audio{background:linear-gradient(90deg,rgba(42,100,77,.12),rgba(255,255,255,.006))}
.timeline-track-grid>.track-graphic{background:linear-gradient(90deg,rgba(137,91,36,.12),rgba(255,255,255,.006))}
.timeline-track-grid>.track-text,.timeline-track-grid>.track-sticker,.timeline-track-grid>.track-effect,.timeline-track-grid>.track-transition,.timeline-track-grid>.track-filter,.timeline-track-grid>.track-color{background:rgba(255,255,255,.012)}
.timeline-clip{border-color:#5989b7;background:#315779;color:#eef7ff}
.timeline-clip.track-audio{border-color:#4e9578;background:#285a49;color:#e8fff6}
.timeline-clip.track-graphic{border-color:#cb914b;background:#775329;color:#fff4df}
.timeline-clip.track-text{border-color:#be7e43;background:#704925}.timeline-clip.track-sticker{border-color:#b7789c;background:#68445a}.timeline-clip.track-effect{border-color:#4a91b8;background:#28556d}.timeline-clip.track-transition{border-color:#7188bb;background:#3f527a}.timeline-clip.track-filter{border-color:#63906b;background:#35553c}.timeline-clip.track-color{border-color:#ad6257;background:#65352e}
.timeline-clip.is-selected{border-color:#f0b45f;box-shadow:0 0 0 1px rgba(240,180,95,.55)}
.graphic-clip-preview{position:absolute;inset:0;display:grid;place-items:center;opacity:.72}.graphic-clip-preview .shape-preview{transform:scale(.72)}
.clip-caption{background:linear-gradient(90deg,rgba(13,13,13,.86),rgba(13,13,13,.54),transparent)}
.timeline-ruler>#timelinePlayhead{background:#e6a34e;box-shadow:0 0 5px rgba(230,163,78,.5)}.timeline-ruler>#timelinePlayhead::before{background:#e6a34e}
.timeline-zoom-control input{width:112px;height:18px;appearance:none;background:transparent;accent-color:auto;cursor:pointer}
.timeline-zoom-control input::-webkit-slider-runnable-track{height:4px;border:0;border-radius:3px;background:#666}
.timeline-zoom-control input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px;appearance:none;border:1px solid #cde5ff;border-radius:50%;background:#2680eb;box-shadow:none}

@media (min-width:1800px) and (min-height:1000px){
  .editor-screen{grid-template-rows:66px minmax(340px,1fr) var(--timeline-height)}
  .editor-topbar{padding-right:154px}.editor-actions-cluster{right:146px}
  .editor-tools button b,.editor-menu-bar button{font-size:12px}
  .editor-panel-heading h2{font-size:18px}.media-bin-title{font-size:12px}
  .media-bin-controls select{font-size:10px}.inspector-tabs{height:40px;grid-template-rows:none}.inspector-tabs button{font-size:11px}
  .inspector-empty,.clip-inspector{height:calc(100% - 40px)}
  .clip-inspector .inspector-field,.inspector-switch span{font-size:11px}.inspector-input input,.clip-inspector .inspector-field>select{font-size:11px}
  .playback-controls .play-main{width:20px!important;height:20px!important}
}

/* Final precedence for the multi-panel editor and frame timeline */
.editor-side-panel{height:100%;min-height:0;overflow:hidden}
#mediaPanelContent{display:flex;flex-direction:column}
#mediaPanelContent .media-bin{flex:1;max-height:none!important;min-height:0}
.shape-tool-panel{position:static;inset:auto;height:100%;padding:0;background:transparent}
.timeline-body{grid-template-columns:156px minmax(0,1fr)}
.track-labels-inner>span{grid-template-columns:7px minmax(36px,1fr) auto;gap:7px;padding:0 8px}
.clip-filmstrip img{width:var(--frame-cell,54px);min-width:var(--frame-cell,54px);flex:0 0 var(--frame-cell,54px)}
.timeline-toolbar-right{display:flex!important;align-items:center;gap:5px;margin-left:auto}
@media (min-width:1800px) and (min-height:1000px){.timeline-body{grid-template-columns:170px minmax(0,1fr)}.timeline-zoom-control input{width:150px}}