/* Dislide — app UI styles. Brand tokens/fonts come from brand/brand.css; layout metrics follow the original desktop editor. */
:root {
  --white: #ffffff; --black: #000;
  --n50: #f6f7f9; --n60: #ecedef; --n80: #dfe1e4; --n100: #d3d6da; --n200: #b1b8be; --n300: #929aa3;
  --n400: #747c87; --n500: #565e6d; --n600: #374050; --n700: #14122B; --n800: #051225;
  --green400: #1aa651; --green500: #007850; --red400: #fa375a; --red500: #c8002d; --orange200: #ffc805;
  --ai-blue: #1A46BC; --ai-purple: #993BC6;
  --sh-xs: 0 0.5px 2px rgba(5,18,37,.24), 0 0 0 1px rgba(0,0,0,.08);
  --sh-sm: 0 1px 4px 0 rgba(5,18,37,.32), 0 0 8px -2px rgba(5,18,37,.24), 0 0 0 1px rgba(0,0,0,.08);
  --sh-md: 0 8px 24px 0 rgba(5,18,37,.32), 0 2px 4px -2px rgba(5,18,37,.24), 0 0 0 1px rgba(0,0,0,.08);
  --sh-lg: 0 16px 48px 0 rgba(5,18,37,.32), 0 8px 16px -4px rgba(5,18,37,.24), 0 0 0 1px rgba(0,0,0,.08);
  --ui: "Plus Jakarta Sans", "UIRaleway", "Segoe UI", Arial, sans-serif;
  --top: 70px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--n50); color: var(--n700); font: 500 14px/20px var(--ui); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { outline: none; }
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: none; }
.icon svg { display: block; }
.hidden { display: none !important; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.muted { color: var(--n400); }
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 14px; white-space: nowrap; transition: background .15s, box-shadow .15s, color .15s; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover { background: var(--brand-600); }
.btn-primary:disabled { background: var(--n100); color: var(--n400); cursor: default; }
.btn-secondary { background: #fff; color: var(--n700); box-shadow: inset 0 0 0 1px var(--n100); }
.btn-secondary:hover { background: var(--n50); }
.btn-danger { background: var(--red500); color: #fff; }
.btn-danger:hover { background: #a00025; }
.btn-ghost { color: var(--n600); }
.btn-ghost:hover { background: var(--n60); }
.btn-link { color: var(--brand-400); font-weight: 600; }
.btn-link:hover { text-decoration: underline; }
.iconbtn { width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--n600); }
.iconbtn:hover { background: var(--n60); }
.iconbtn.active { background: var(--brand-50); color: var(--brand-500); }
.iconbtn:disabled { color: var(--n200); cursor: default; background: none; }
.input { height: 40px; border: 1px solid var(--n100); border-radius: 8px; padding: 0 12px; background: #fff; width: 100%; }
.input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(124,92,255,.22); }
.label { font-size: 12px; font-weight: 700; color: var(--n500); margin: 0 0 6px; display: block; }

/* ---------- native window menubar (WPF MainMenu) ---------- */
.menubar { height: 30px; flex: none; display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--n80); padding: 0 4px; font: 400 13px/30px "Segoe UI", var(--ui); z-index: 500; user-select: none; }
.menubar .mb-item { padding: 0 10px; border-radius: 3px; height: 24px; line-height: 24px; color: #222; }
.menubar .mb-item:hover, .menubar .mb-item.open { background: #e5f1fb; }
.menubar .mb-title { margin-left: auto; color: var(--n400); padding-right: 8px; font-size: 12px; }

/* ---------- popup menus ---------- */
.menu { position: fixed; z-index: 4000; background: #fff; border-radius: 8px; box-shadow: var(--sh-md); padding: 6px 0; min-width: 220px; max-height: 80vh; overflow: auto; font-size: 14px; }
.menu.native { border-radius: 2px; padding: 2px 0; box-shadow: 2px 2px 6px rgba(0,0,0,.25); border: 1px solid #ccc; font: 400 13px "Segoe UI", var(--ui); min-width: 260px; }
.menu .mi { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 36px; cursor: pointer; white-space: nowrap; color: var(--n700); }
.menu.native .mi { height: 26px; padding: 0 12px 0 30px; }
.menu .mi:hover { background: var(--n50); }
.menu.native .mi:hover { background: #91c9f7; }
.menu .mi.disabled { color: var(--n200); cursor: default; background: none; }
.menu .mi .sc { margin-left: auto; padding-left: 24px; color: var(--n300); font-size: 12px; }
.menu .mi .sub { margin-left: auto; }
.menu .sep { height: 1px; background: var(--n80); margin: 6px 0; }
.menu .mh { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; color: var(--n400); text-transform: uppercase; letter-spacing: .5px; }
.menu .mi.checked::before { content: "✓"; position: absolute; margin-left: -18px; color: var(--brand-500); }

/* ---------- dialogs (DialogStackView) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 2000; display: flex; align-items: center; justify-content: center; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.dialog { background: #fff; border-radius: 8px; box-shadow: var(--sh-lg); width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; animation: pop .18s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.dialog .dh { padding: 24px 24px 8px; display: flex; align-items: flex-start; gap: 12px; }
.dialog .dh h2 { margin: 0; font: 600 20px/28px var(--ui); flex: 1; }
.dialog .db { padding: 8px 24px 16px; overflow: auto; color: var(--n600); }
.dialog .db p { margin: 0 0 10px; }
.dialog .df { padding: 16px 24px 24px; display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: var(--n700); color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 9000; font-weight: 600; box-shadow: var(--sh-md); animation: fade .2s; }

/* ---------- login ---------- */
.login { flex: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 85% 110%, #E6DFFF 0%, transparent 60%), radial-gradient(500px 300px at 10% -10%, #FFE3DB 0%, transparent 60%), #FBFAFF; }
.login-card { text-align: center; width: 460px; }
.login-logo { width: 80px; height: 80px; margin: 0 auto 28px; filter: drop-shadow(0 12px 24px rgba(69,39,214,.35)); }
.login h1 { font: 800 40px/46px var(--ui); letter-spacing: -1px; margin: 0 0 12px; }
.login p { color: var(--n500); font-size: 16px; line-height: 24px; margin: 0 0 32px; }
.login .btn { width: 220px; height: 48px; font-size: 16px; }
.login .signup { margin-top: 24px; font-size: 14px; color: var(--n500); }
.auth-form { text-align: left; width: 360px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.auth-form .label { margin-top: 14px; }
.auth-form .btn { width: 100%; margin-top: 20px; }
.auth-terms { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 19px; color: var(--n500); }
.auth-terms input { margin-top: 3px; }
.auth-error { color: #c8002d; font-size: 13px; min-height: 18px; margin-top: 12px; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--n80); border-top-color: var(--brand-500); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto 24px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- ribbons ---------- */
.ribbon { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #fff7d6; color: var(--n700); border-bottom: 1px solid #f0e3a8; font-size: 13px; }
.ribbon.info { background: var(--brand-50); border-color: var(--brand-100); }

/* ---------- dashboard (PitchHomeView) ---------- */
.home { flex: 1; display: flex; min-height: 0; }
.side { width: 256px; flex: none; background: #fff; border-right: 1px solid var(--n80); display: flex; flex-direction: column; padding: 20px 12px 12px; transition: margin .2s; }
.side.closed { margin-left: -256px; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; font: 800 21px var(--ui); letter-spacing: -.4px; color: var(--ink); }
.side .create { width: 100%; height: 44px; margin-bottom: 24px; }
.side h4 { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--n400); text-transform: uppercase; margin: 8px 8px 6px; display: flex; align-items: center; }
.side .nav { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 6px; cursor: pointer; color: var(--n600); font-weight: 600; }
.side .nav:hover { background: var(--n50); }
.side .nav.active { background: var(--brand-50); color: var(--brand-500); }
.side .nav .count { margin-left: auto; font-size: 12px; color: var(--n400); font-weight: 600; }
.side .nav input { flex: 1; min-width: 0; height: 26px; border: 1px solid var(--brand-400); border-radius: 4px; padding: 0 6px; }
.side .folders { overflow: auto; flex: 1; min-height: 40px; }
.side .addfolder { color: var(--brand-400); }
.side .bottom { border-top: 1px solid var(--n80); padding-top: 8px; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.header { height: 72px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 32px; }
.header .search { position: relative; width: 320px; }
.header .search .input { padding-left: 38px; background: #fff; }
.header .search .icon { position: absolute; left: 10px; top: 10px; color: var(--n400); }
.header .title { font: 600 20px/28px var(--ui); }
.header .sub { color: var(--n400); font-size: 13px; }
.syncw { display: flex; align-items: center; gap: 8px; color: var(--n500); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.syncw:hover { background: var(--n60); }
.syncw.syncing .icon { animation: spin 1.2s linear infinite; color: var(--brand-500); }
.syncw.offline { color: var(--red500); }
.grid { flex: 1; overflow: auto; padding: 8px 32px 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; align-content: start; }
.card { background: #fff; border-radius: 8px; box-shadow: var(--sh-xs); overflow: hidden; position: relative; transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: var(--sh-md); }
.card .thumb { aspect-ratio: 16/9; background: var(--n60) center/cover no-repeat; position: relative; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .hover { position: absolute; inset: 0; background: rgba(21,34,53,.55); display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .15s; }
.card:hover .hover { opacity: 1; }
.card .hover .btn { height: 36px; }
.card .info { padding: 12px 12px 12px 14px; display: flex; align-items: flex-start; gap: 6px; }
.card .t { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.card .t input { width: 100%; height: 22px; border: 1px solid var(--brand-400); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.card .u { font-size: 12px; color: var(--n400); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.card .bar { font-size: 12px; padding: 6px 14px; background: var(--n50); border-top: 1px solid var(--n60); color: var(--n500); display: flex; align-items: center; gap: 6px; }
.card .bar.err { background: #fff0f2; color: var(--red500); }
.card .badge-shared { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.92); border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.empty { grid-column: 1/-1; text-align: center; padding: 60px 0; color: var(--n500); }
.empty h2 { font: 600 24px/32px var(--ui); color: var(--n700); margin: 0 0 8px; }
.tiles { display: flex; gap: 20px; justify-content: center; margin-top: 32px; }
.tile { width: 220px; background: #fff; border-radius: 12px; box-shadow: var(--sh-sm); padding: 28px 20px; cursor: pointer; text-align: center; font-weight: 700; color: var(--n700); transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.tile.disabled { opacity: .5; cursor: default; transform: none; }
.tile .ti { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: #fff; }
.tile small { display: block; font-weight: 500; color: var(--n400); margin-top: 6px; font-size: 12px; line-height: 16px; }

/* settings page */
.settings { flex: 1; overflow: auto; padding: 8px 32px 40px; max-width: 760px; }
.settings section { background: #fff; border-radius: 8px; box-shadow: var(--sh-xs); padding: 20px 24px; margin-bottom: 16px; }
.settings h3 { margin: 0 0 12px; font: 700 16px var(--ui); }
.switch { position: relative; width: 36px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--n200); border-radius: 10px; transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + span { background: var(--brand-500); }
.switch input:checked + span::after { transform: translateX(16px); }

/* ---------- details view ---------- */
.details { width: 760px; }
.details .db { display: grid; grid-template-columns: 360px 1fr; gap: 24px; }
.details .big { aspect-ratio: 16/9; border-radius: 8px; background: var(--n60) center/cover; box-shadow: var(--sh-xs); }
.details .sec { margin-bottom: 16px; }
.details .sec h5 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--n400); }
.details .link { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; color: var(--n700); font-weight: 600; }
.details .link:hover { color: var(--brand-500); }

/* ---------- template chooser ---------- */
.tc { position: fixed; inset: 0; background: #fff; z-index: 1500; display: flex; flex-direction: column; }
.tc-head { height: 72px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--n80); }
.tc-head h1 { font: 600 24px/32px var(--ui); margin: 0; }
.tc-body { flex: 1; display: flex; min-height: 0; }
.tc-side { width: 240px; flex: none; padding: 20px 16px; border-right: 1px solid var(--n80); overflow: auto; }
.tc-side .nav { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--n600); }
.tc-side .nav:hover { background: var(--n50); }
.tc-side .nav.active { background: var(--brand-50); color: var(--brand-500); }
.tc-tabs { display: flex; gap: 4px; }
.tc-tabs button { height: 36px; padding: 0 14px; border-radius: 18px; font-weight: 700; color: var(--n500); }
.tc-tabs button.active { background: var(--n700); color: #fff; }
.colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.colors .dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.colors .dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-400); }
.tc-grid { flex: 1; overflow: auto; padding: 24px 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; align-content: start; }
.tpl { cursor: pointer; }
.tpl .im { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; box-shadow: var(--sh-xs); position: relative; background: var(--n60); }
.tpl .im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tpl:hover .im img { transform: scale(1.04); }
.tpl:hover .im { box-shadow: var(--sh-md); }
.tpl .nm { font-weight: 700; margin-top: 10px; }
.tpl .ai { position: absolute; top: 8px; right: 8px; background: linear-gradient(90deg, var(--ai-blue), var(--ai-purple)); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.tpl-banner { grid-column: 1/-1; border-radius: 12px; background: linear-gradient(90deg, #1A46BC, #993BC6); color: #fff; padding: 24px 28px; display: flex; align-items: center; gap: 20px; }
.tpl-banner h3 { margin: 0 0 4px; font: 700 20px var(--ui); }
.tp { position: fixed; inset: 0; z-index: 1600; background: #000; }
.tp canvas { position: absolute; inset: 0; }
.tp .tp-bar { position: absolute; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: linear-gradient(rgba(0,0,0,.55), transparent); color: #fff; }
.tp .tp-nav { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: rgba(21,34,53,.85); color: #fff; padding: 6px; border-radius: 24px; }
.tp .tp-nav .iconbtn { color: #fff; border-radius: 50%; }
.tp .tp-nav .iconbtn:hover { background: rgba(255,255,255,.15); }

/* ---------- editor ---------- */
.editor { position: fixed; inset: 0; background: #fff; z-index: 1000; }
.editor .menubar { position: absolute; top: 0; left: 0; right: 0; }
.ed-wrap { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; }
.topmenu { position: absolute; top: 0; left: 0; right: 0; height: var(--top); background: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); display: flex; align-items: center; padding: 0 12px 0 15px; z-index: 150; }
.topmenu .left, .topmenu .center, .topmenu .right { display: flex; align-items: center; }
.topmenu .left { gap: 4px; flex: 1; min-width: 0; }
.topmenu .center { gap: 12px; }
.topmenu .right { gap: 8px; flex: 1; justify-content: flex-end; }
.tm-hamb { color: var(--brand-500); }
.tm-title { font: 700 14px var(--ui); padding: 6px 8px; border-radius: 6px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; border: 1px solid transparent; }
.tm-title:hover { border-color: var(--n100); }
.tm-title input { border: 0; padding: 0; width: 220px; font-weight: 700; }
.tm-status { color: var(--n400); display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 0 6px; }
.tm-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border-radius: 8px; min-width: 52px; height: 56px; color: var(--n600); }
.tm-btn:hover, .tm-btn.open { background: var(--n50); }
.tm-btn.active { background: var(--brand-50); color: var(--brand-500); }
.tm-btn .lbl { font: 700 11px/16px var(--ui); letter-spacing: .3px; display: flex; align-items: center; gap: 1px; }
@media (max-width: 1200px) { .tm-btn .lbl { display: none; } .tm-btn { min-width: 40px; height: 44px; } }
.combo { display: flex; height: 40px; border-radius: 8px; overflow: hidden; }
.combo button { display: flex; align-items: center; gap: 6px; padding: 0 14px; font-weight: 700; }
.combo .arrow { padding: 0 8px; border-left: 1px solid rgba(255,255,255,.3); }
.combo.cshare { box-shadow: inset 0 0 0 1px var(--n100); }
.combo.cshare .arrow { border-left-color: var(--n100); }
.combo.cshare button:hover { background: var(--n50); }
.combo.cpresent { background: var(--brand-500); color: #fff; }
.combo.cpresent button:hover { background: var(--brand-600); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #8250e5; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

.canvas-wrap { position: absolute; top: var(--top); left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; }
.canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-wrap.pan { cursor: grab; }
.canvas-wrap.panning { cursor: grabbing; }
.canvas-wrap.draw { cursor: crosshair; }
.overlay-layer { position: absolute; inset: 0; pointer-events: none; }
.text-editing { position: absolute; transform-origin: 0 0; outline: none; pointer-events: auto; white-space: pre-wrap; word-wrap: break-word; caret-color: var(--brand-400); }
.text-editing p { margin: 0; }
.text-editing li { margin: 0; }
.text-editing ::selection { background: rgba(124,92,255,.3); }

/* left timeline (PathEditing) */
.timeline { position: absolute; left: 8px; top: calc(var(--top) + 8px); bottom: 8px; width: 272px; background: #fff; border-radius: 8px; box-shadow: var(--sh-md); z-index: 100; display: flex; flex-direction: column; transition: left .3s ease-in; }
.timeline.closed { left: -264px; }
.timeline .tl-head { display: flex; align-items: center; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--n80); font-weight: 700; gap: 6px; }
.timeline .tl-list { flex: 1; overflow: auto; padding: 10px 0 10px; }
.tl-toggle { position: absolute; right: -32px; top: 12px; width: 28px; height: 28px; border-radius: 6px; background: #fff; box-shadow: var(--sh-sm); display: none; align-items: center; justify-content: center; color: var(--n600); }
.timeline.closed .tl-toggle { display: flex; }
.tl-ov { margin: 0 12px 10px 48px; cursor: pointer; }
.tl-ov .tl-img { width: 198px; }
.tl-item { display: flex; align-items: flex-start; padding: 0 12px 0 0; position: relative; }
.tl-item.tl-main { background: var(--n50); padding-top: 4px; margin-bottom: 6px; }
.tl-item.tl-child { margin: 6px 0; }
.tl-item .tl-left { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 2px; }
.tl-item .tl-num { font-size: 11px; font-weight: 700; color: var(--n500); height: 16px; line-height: 16px; }
.tl-item .tl-dot { width: 20px; height: 20px; border-radius: 10px; border: 4px solid #fff; background: #dfe1e4; }
.tl-item.current .tl-dot { background: var(--brand-400); }
.tl-body { flex: 1; min-width: 0; cursor: pointer; }
.tl-item.tl-child .tl-body { padding-left: 28px; }
.tl-img { width: 198px; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--n80); position: relative; background: #fff; }
.tl-item.tl-child .tl-img { width: 170px; }
.tl-img canvas { display: block; width: 100% !important; height: 100% !important; }
.tl-item.selected .tl-img, .tl-ov.selected .tl-img { box-shadow: 0 0 0 2px var(--green400); }
.tl-title { font-size: 12px; font-weight: 600; color: var(--n600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 0 6px; text-align: center; width: 198px; }
.tl-item.tl-child .tl-title { width: 170px; }
.tl-badges { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 3px; }
.tl-badges span { width: 20px; height: 20px; border-radius: 4px; background: rgba(21,34,53,.75); color: #fff; display: flex; align-items: center; justify-content: center; }
.tl-item.dragover { box-shadow: 0 -3px 0 var(--brand-400); }
.tl-foot { padding: 10px; border-top: 1px solid var(--n80); }
.tl-foot .btn { width: 100%; }
.tl-empty { padding: 16px 20px; color: var(--n400); font-size: 13px; line-height: 18px; }

/* property bar */
.propbar { position: absolute; z-index: 120; height: 40px; background: #fff; border-radius: 8px; box-shadow: var(--sh-md); display: flex; align-items: center; padding: 0 4px; gap: 2px; width: fit-content; white-space: nowrap; }
.propbar .sep { width: 1px; height: 24px; background: var(--n80); margin: 0 4px; }
.propbar .pb { height: 32px; min-width: 32px; padding: 0 8px; border-radius: 6px; display: flex; align-items: center; gap: 4px; color: var(--n600); font-weight: 600; font-size: 13px; }
.propbar .pb:hover { background: var(--n50); }
.propbar .pb.active { background: var(--brand-50); color: var(--brand-500); }
.propbar .swatch { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.propbar .size { width: 44px; height: 28px; border: 1px solid var(--n100); border-radius: 4px; text-align: center; }

/* right sidebar */
.rsb { position: absolute; right: 8px; top: calc(var(--top) + 8px); bottom: 8px; width: 320px; background: #fff; border-radius: 8px; box-shadow: var(--sh-md); z-index: 110; display: flex; flex-direction: column; overflow: hidden; }
.rsb .rh { display: flex; align-items: center; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--n80); font: 700 16px var(--ui); }
.rsb .rtabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--n80); flex-wrap: wrap; }
.rsb .rtabs button { height: 30px; padding: 0 10px; border-radius: 15px; font-weight: 700; font-size: 12px; color: var(--n500); }
.rsb .rtabs button.active { background: var(--n700); color: #fff; }
.rsb .rb { flex: 1; overflow: auto; padding: 16px; }
.rsb h6 { margin: 16px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--n400); }
.rsb h6:first-child { margin-top: 0; }
.palette { display: flex; border-radius: 6px; overflow: hidden; height: 32px; cursor: pointer; box-shadow: 0 0 0 1px var(--n80); margin-bottom: 8px; }
.palette:hover { box-shadow: 0 0 0 2px var(--brand-400); }
.palette.active { box-shadow: 0 0 0 2px var(--brand-500); }
.palette div { flex: 1; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches .sw { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); position: relative; }
.swatches .sw.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-400); }
.swatches .sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.media-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; cursor: pointer; display: block; background: var(--n60); }
.media-grid img:hover { outline: 2px solid var(--brand-400); }
.sym-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sym-grid div { aspect-ratio: 1; border-radius: 6px; cursor: pointer; background-repeat: no-repeat; }
.sym-grid div:hover { background-color: var(--n50); outline: 2px solid var(--brand-400); }
.shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.shape-grid button { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--n600); }
.shape-grid button:hover { background: var(--n50); color: var(--brand-500); }
.anim-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--n80); margin-bottom: 8px; font-weight: 700; }
.anim-item:hover { border-color: var(--brand-400); background: var(--brand-50); }
.anim-item.disabled { opacity: .45; pointer-events: none; }
.anim-item .ai-ic { width: 44px; height: 44px; border-radius: 6px; background: var(--n60); display: flex; align-items: center; justify-content: center; color: var(--n600); }
.font-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.font-row .cls { width: 80px; font-size: 12px; font-weight: 700; color: var(--n500); }
.font-row select { flex: 1; height: 32px; border: 1px solid var(--n100); border-radius: 6px; padding: 0 6px; min-width: 0; }
textarea.notes { width: 100%; min-height: 220px; border: 1px solid var(--n100); border-radius: 8px; padding: 10px; resize: vertical; font: 500 14px/20px var(--ui); }

/* bottom navigation bar */
.navbar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); height: 40px; background: #fff; border-radius: 8px; box-shadow: var(--sh-md); display: flex; align-items: center; padding: 0 4px; gap: 2px; z-index: 105; }
.navbar .zl { min-width: 52px; text-align: center; font-weight: 700; font-size: 12px; color: var(--n600); border-radius: 6px; height: 32px; line-height: 32px; cursor: pointer; }
.navbar .zl:hover { background: var(--n50); }
.navbar .sep { width: 1px; height: 24px; background: var(--n80); margin: 0 4px; }
.assist { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 105; }
.assist button { height: 40px; padding: 0 14px; border-radius: 20px; background: #fff; box-shadow: var(--sh-md); display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--n600); }
.assist button:hover { color: var(--brand-500); }
.rsb ~ .assist { right: 340px; }

/* find & replace */
.findbar { position: absolute; top: calc(var(--top) + 12px); left: 50%; transform: translateX(-50%); z-index: 130; background: #fff; border-radius: 8px; box-shadow: var(--sh-md); padding: 10px; display: flex; flex-direction: column; gap: 8px; width: 420px; }
.findbar .row .input { height: 32px; }

/* ---------- present mode ---------- */
.present { position: fixed; inset: 0; z-index: 3000; background: #000; cursor: default; }
.present canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.present .pctl { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: rgba(21,34,53,.85); padding: 6px; border-radius: 24px; color: #fff; transition: opacity .4s; }
.present .pctl .iconbtn { color: #fff; border-radius: 50%; width: 36px; height: 36px; }
.present .pctl .iconbtn:hover { background: rgba(255,255,255,.15); }
.present .pctl .cnt { font-weight: 700; font-size: 13px; min-width: 60px; text-align: center; }
.present .ptop { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; transition: opacity .4s; }
.present .ptop .btn { background: rgba(21,34,53,.85); color: #fff; }
.present.idle .pctl, .present.idle .ptop { opacity: 0; }
.present.idle { cursor: none; }
.present .seek { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); }
.present .seek div { height: 100%; background: var(--brand-400); transition: width .4s; }
.present iframe.yt { position: absolute; border: 0; }
.watermark { position: absolute; right: 18px; bottom: 16px; opacity: .7; font: 800 13px var(--ui); letter-spacing: -.2px; color: #fff; mix-blend-mode: difference; pointer-events: none; }

/* PDF export */
.export-pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 260px; overflow: auto; margin-top: 8px; }
.export-pages img { width: 100%; border-radius: 4px; box-shadow: 0 0 0 1px var(--n80); }
.progress { height: 6px; background: var(--n60); border-radius: 3px; overflow: hidden; margin: 12px 0; }
.progress div { height: 100%; background: var(--brand-500); width: 0; transition: width .2s; }

/* ---------- Create with AI studio (js/ai-studio.js) ---------- */
.ai-studio .db { max-height: calc(100vh - 200px); overflow: auto; }
.ai-opts { gap: 20px; align-items: flex-end; margin: 12px 0 4px; flex-wrap: wrap; }
.ai-check { display: flex; gap: 8px; align-items: center; font-size: 14px; padding-bottom: 10px; }
.ai-progress { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-top: 16px; border-top: 1px solid var(--n100); padding-top: 16px; }
.ai-progress[hidden] { display: none; }
.ai-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ai-steps li { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; font-size: 14px; color: var(--n500); }
.ai-steps li[data-state="active"], .ai-steps li[data-state="done"] { color: inherit; font-weight: 600; }
.ai-steps li[data-state="skipped"] { opacity: .5; }
.ai-meta { grid-column: 2; font-size: 12px; font-weight: 400; color: var(--n500); }
.ai-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--n100); margin-top: 2px; box-sizing: border-box; }
.ai-steps li[data-state="active"] .ai-dot { border-color: var(--brand-400); border-top-color: transparent; animation: ai-spin .8s linear infinite; }
.ai-steps li[data-state="done"] .ai-dot { background: var(--brand-400); border-color: var(--brand-400); }
.ai-steps li[data-state="failed"] .ai-dot { background: #c8002d; border-color: #c8002d; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-feed { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.ai-item { font-size: 13px; line-height: 19px; }
.ai-item-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--n500); margin-bottom: 4px; }
.ai-stream { white-space: pre-wrap; font: 12px/18px var(--ui); margin: 0; padding: 8px 10px; border-radius: 8px; background: #F6F4FF; max-height: 180px; overflow: auto; }
.ai-stream[data-kind="thinking"] { color: var(--n500); font-style: italic; }
.ai-search { display: flex; gap: 6px; align-items: center; }
.ai-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-src { display: inline-flex; flex-direction: column; max-width: 220px; padding: 4px 8px; border: 1px solid var(--n100); border-radius: 8px; text-decoration: none; color: inherit; font-size: 11px; line-height: 15px; }
.ai-src span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--n500); }
.ai-outline { margin: 0; padding-left: 20px; }
.ai-art { max-width: 260px; border-radius: 12px; background: #14122B; padding: 8px; }
.ai-error { color: #c8002d; font-weight: 600; }
@media (max-width: 760px) { .ai-progress { grid-template-columns: 1fr; } }
.ai-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ai-tile { margin: 0; border: 1px solid var(--n100); border-radius: 10px; padding: 6px; font-size: 11px; line-height: 14px; }
.ai-tile-img { aspect-ratio: 4 / 3; border-radius: 6px; background: #F6F4FF; display: grid; place-items: center; overflow: hidden; }
.ai-tile[data-state="drawing"] .ai-tile-img { background: linear-gradient(90deg, #F6F4FF 0%, #E6DFFF 50%, #F6F4FF 100%); background-size: 200% 100%; animation: ai-shimmer 1.2s linear infinite; }
.ai-tile-img img { width: 100%; height: 100%; object-fit: contain; }
.ai-tile figcaption { margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-tile-meta { color: var(--n500); }
.ai-tile[data-state="failed"] { opacity: .5; }
@keyframes ai-shimmer { to { background-position: -200% 0; } }

/* Settings → AI tools (MCP) */
.ai-h4 { margin: 18px 0 8px; font: 700 13px var(--ui); color: var(--n500); text-transform: uppercase; letter-spacing: .04em; }
.ai-token-row { padding: 8px 0; border-top: 1px solid var(--n100); }
.ai-token-row:first-child { border-top: 0; }
.ai-token { flex: 1; font: 13px/1.4 ui-monospace, Consolas, monospace; background: var(--n0, #f4f3fa); padding: 8px 10px; border-radius: 6px; word-break: break-all; user-select: all; }
.ai-snippets { margin-top: 8px; }
.ai-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-tab { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--n100); background: #fff; font: 600 12px var(--ui); color: var(--n500); cursor: pointer; }
.ai-tab.active { background: var(--brand-400, #7c5cff); border-color: var(--brand-400, #7c5cff); color: #fff; }
.ai-snippet { margin: 0 0 8px; padding: 10px 12px; background: var(--n700); color: #fff; border-radius: 8px; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }