/* TapShop look for the Studio and Video Editor: the dashboard's neutral palette, system font,
   rounded-xl controls, black primary buttons (white in dark mode) and flat white cards.
   Loaded last on both pages; tapshop-theme.js sets html.ts (always) and html.ts-dark.
   Buttons carrying an inline background (colour swatches, presets) keep their own colour. */
html.ts{--ts-bg:#fafafa;--ts-surface:#fff;--ts-soft:#f5f5f5;--ts-border:#e5e5e5;--ts-border-strong:#d4d4d4;--ts-text:#171717;--ts-muted:#737373;--ts-primary:#171717;--ts-on-primary:#fff;--ts-primary-hover:#404040;--ts-hover:#f5f5f5;--ts-accent:#8b5cf6;--ts-shadow:0 1px 2px rgb(0 0 0/.05);
  --plate-top:var(--ts-surface);--plate-bottom:var(--ts-surface);--rim:var(--ts-border-strong);--glint:transparent;--shade:transparent;--inner:transparent;--plate-text:var(--ts-text);--pressed:var(--ts-soft);accent-color:var(--ts-accent)}
html.ts.ts-dark{--ts-bg:#0f0f13;--ts-surface:#17171c;--ts-soft:#1e1e24;--ts-border:#2f2f37;--ts-border-strong:#3e3e47;--ts-text:#eeeef2;--ts-muted:#a1a1ad;--ts-primary:#eeeef2;--ts-on-primary:#17171c;--ts-primary-hover:#cdcdd5;--ts-hover:#25252c;--ts-accent:#a78bfa;color-scheme:dark}
html.ts body{background:var(--ts-bg)!important;color:var(--ts-text)!important;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;--plate:var(--ts-surface);--rim:var(--ts-border-strong);--shadow:var(--ts-shadow)}

/* Buttons */
html.ts body button:not([style*="background"]):not(.duration-strip):not(.strip-split):not(.theme-toggle):not(.dialog-x):not(.tb-btn){background:var(--ts-surface)!important;color:var(--ts-text)!important;border:1px solid var(--ts-border-strong)!important;box-shadow:none!important;text-shadow:none!important;border-radius:12px;font-weight:600}
/* Hover grey only for unselected buttons; on touch screens hover sticks after a tap and would hide the black "selected" look. */
html.ts body button:not([style*="background"]):not(.duration-strip):not(.strip-split):not(.theme-toggle):not(.dialog-x):not(.tb-btn):not(.primary):not(.active):not(.on):not([aria-pressed="true"]):hover:not(:disabled){background:var(--ts-hover)!important}
html.ts body button:is(.primary,.active,.on)[class]:not([style*="background"]):not(.duration-strip):not(.strip-split),html.ts body button[aria-pressed="true"]:not([style*="background"]){background:var(--ts-primary)!important;color:var(--ts-on-primary)!important;border-color:var(--ts-primary)!important}
@media (hover:hover) and (pointer:fine){html.ts body button:is(.primary,.active,.on)[class]:not([style*="background"]):hover:not(:disabled){background:var(--ts-primary-hover)!important}}
html.ts body button.primary[style*="background"]{box-shadow:none!important}
html.ts body button:disabled{opacity:.5}
html.ts body .dialog-x{background:var(--ts-surface)!important;color:var(--ts-text)!important;border:1px solid var(--ts-border-strong)!important;box-shadow:none!important}

/* Form fields */
html.ts body :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){background:var(--ts-surface)!important;color:var(--ts-text)!important;border:1px solid var(--ts-border-strong)!important;border-radius:12px;box-shadow:none!important}
html.ts body :is(input,select,textarea):focus{outline:none;border-color:var(--ts-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ts-primary) 12%,transparent)!important}
html.ts body ::placeholder{color:var(--ts-muted)}

/* Surfaces: panels, cards, dialogs, menus */
html.ts body :is(aside,#mainSidebar,dialog,.hero,.card,.format,.preset,.sizeform,.workspace,.sidebar-note,.toolcard,.notice,.picker-top,.picker-side,.panel,.top,.timeline,.timebar,.previewtop,.props,.tools,.layers-head){background:var(--ts-surface)!important;color:var(--ts-text)!important;border-color:var(--ts-border)!important;box-shadow:none!important;background-image:none!important}
html.ts body :is(.card,.format,.preset,.hero,.workspace,.sidebar-note,.toolcard,.notice,dialog){border:1px solid var(--ts-border)!important;border-radius:16px}
html.ts body :is(.card,.format,.preset):hover{border-color:var(--ts-border-strong)!important}
html.ts body :is(main,.preview,.canvaswrap,.tracks,.ebody,.picker-main,.picker-layout){background-color:var(--ts-bg)!important;background-image:none!important}
html.ts body :is(.thumb){background:var(--ts-soft)!important;border-color:var(--ts-border)!important;box-shadow:none!important}
html.ts body dialog::backdrop{background:rgb(0 0 0/.45)}
html.ts body :is(.muted,.sub,.hint,small,.eyebrow,.formats-label,.formats-label span,.status,.preset-dim,.picker-note){color:var(--ts-muted)!important}
html.ts body hr{border-color:var(--ts-border)}
html.ts body .format b{background:var(--ts-soft)!important;color:var(--ts-text)!important;border:0!important;box-shadow:none!important}
html.ts body .live-dot{background:var(--ts-text)!important;box-shadow:none!important}
html.ts body .workspace-initial{background:var(--ts-soft)!important;color:var(--ts-text)!important}

/* Headings and logo in TapShop's bold sans */
html.ts body :is(h1,h2,h3,.logo,.brand){font-family:inherit!important;color:var(--ts-text)!important;letter-spacing:-.02em}
html.ts body .hero h1 em{font-family:inherit!important;font-style:normal;color:var(--ts-muted)!important}
html.ts body :is(.logo,.brand){font-weight:800!important}
html.ts body :is(.logo span,.brand em){color:var(--ts-text)!important;font-style:normal}
html.ts body .badge{background:var(--ts-soft)!important;color:var(--ts-muted)!important;border-color:var(--ts-border)!important}

/* Light/dark switch: TapShop's pill with a violet track when on */
html.ts body .theme-toggle{background:var(--ts-surface)!important;color:var(--ts-text)!important;border:1px solid var(--ts-border-strong)!important;box-shadow:none!important;border-radius:999px}
html.ts body .theme-track{background:var(--ts-border-strong)!important;border:0!important;box-shadow:none!important}
html.ts body .theme-toggle[aria-checked="true"] .theme-track{background:#f8f8fa!important}
html.ts body .theme-toggle[aria-checked="true"] .theme-track span{background:#17171c!important}
html.ts body .theme-track span{background:#fff!important}

/* Toasts */
html.ts body .toast{background:var(--ts-primary)!important;color:var(--ts-on-primary)!important;border:0!important}

/* Small leftovers from the old purple look */
html.ts body :is(.workspace-name,.workspace .workspace-name,.sidebar-note b,.sidebar-note strong,.sidebar-note h4){color:var(--ts-text)!important}
html.ts body .workspace .avatar{background:var(--ts-soft)!important;border-color:var(--ts-border)!important;box-shadow:none!important}
html.ts body .workspace .workspace-initial{background:var(--ts-surface)!important}
html.ts body .sidebar-note p{color:var(--ts-muted)!important}
html.ts body .sidebar-note>span{color:var(--ts-text)!important}
html.ts body .search{background:var(--ts-surface)!important;border-color:var(--ts-border-strong)!important;box-shadow:none!important}
html.ts body .search input{border-color:transparent!important}
html.ts body .panel-divider{background:var(--ts-border)!important}
html.ts body .panel-divider:hover,html.ts body .panel-divider:focus-visible{background:var(--ts-border-strong)!important}
html.ts body #time{color:var(--ts-text)!important}

/* Collapsed sidebar "Create": a plain circle with the plus drawn in CSS, so it sits dead centre
   (the ＋ character doesn't). White circle + black plus on the black button; flips in dark mode. */
html.ts[data-sidebar="collapsed"] body #mainSidebar>.primary .nav-icon{display:block;width:32px;height:32px;padding:0;border:0!important;border-radius:50%;box-shadow:none!important;font-size:0!important;color:transparent!important;
  background:linear-gradient(var(--ts-primary),var(--ts-primary)) center/14px 2.5px no-repeat,linear-gradient(var(--ts-primary),var(--ts-primary)) center/2.5px 14px no-repeat,var(--ts-on-primary)!important}

/* Design editor tools panel: round icons with the name under them, like the Video Editor's timeline bar
   (tapshop-theme.js splits "◆  Shapes" into .tb-ic + .tb-tx). Buttons sit in a grid; everything else
   (headings, background settings) spans the full width. Folded, only the circles show. */
html.ts:not([data-tools="collapsed"]) body .tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));grid-auto-rows:max-content;column-gap:4px;row-gap:12px;align-content:start;justify-items:center}
html.ts:not([data-tools="collapsed"]) body .tools>:not(button.tb-btn){grid-column:1/-1;justify-self:stretch}
html.ts:not([data-tools="collapsed"]) body .tools>h3{margin:8px 0 0}
html.ts body .tools>button.tb-btn.tb-btn{display:flex!important;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:62px;min-width:0;min-height:max-content!important;height:auto!important;margin:0!important;padding:1px 0 0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--ts-text)!important;transform:none!important;cursor:pointer}
html.ts body #editorTools>button.tb-btn.tb-btn{background:none!important;border:0!important;box-shadow:none!important;color:var(--ts-text)!important}
html.ts body .tools>button.tb-btn .tb-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:17px;line-height:1;background:var(--ts-hover);border:1px solid var(--ts-border);transition:background .15s,transform .1s}
html.ts body .tools>button.tb-btn:hover:not(:disabled) .tb-ic{background:var(--ts-border-strong)}
html.ts body .tools>button.tb-btn:active:not(:disabled) .tb-ic{transform:scale(.92)}
html.ts body .tools>button.tb-btn:is(.on,.active,[aria-pressed="true"],[aria-expanded="true"]) .tb-ic{background:var(--ts-primary);color:var(--ts-on-primary);border-color:var(--ts-primary)}
html.ts body .tools>button#multiBtn.tb-btn.on .tb-ic{background:#ff3ea5;color:#fff;border-color:#ff3ea5}
html.ts body .tools>button.tb-btn:focus-visible{outline:none}html.ts body .tools>button.tb-btn:focus-visible .tb-ic{outline:2px solid #ff3ea5;outline-offset:2px}
html.ts body .tools>button.tb-btn:disabled{opacity:.4}
html.ts body .tools .tb-tx{display:block;width:100%;overflow:hidden;white-space:nowrap;font-size:10.5px;font-weight:600;line-height:1.25;text-align:center}
html.ts body .tools .tb-tx>span{display:inline-block}
html.ts body .tools .tb-tx.run{text-align:left;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html.ts body .tools .tb-tx.run>span{padding:0 3px;animation:ts-tick var(--dur,5s) ease-in-out infinite alternate}
@keyframes ts-tick{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--over,0px))}}
@media (prefers-reduced-motion:reduce){html.ts body .tools .tb-tx.run>span{animation:none}}
html.ts[data-tools="collapsed"] body .tools>button.tb-btn.tb-btn{margin:0 auto 10px!important;width:40px}
html.ts[data-tools="collapsed"] body .tools>button.tb-btn .tb-tx{display:none}
html.ts[data-tools="collapsed"] body .tools>:not(.tools-head):not(button.tb-btn){display:none!important}
html.ts[data-tools="collapsed"] body .tools .tools-head{margin-bottom:10px}

/* Collapse toggles shake once after loading (tapshop-theme.js). Uses translate/rotate, not transform,
   because the sidebar toggle needs its own transform to stay in place. */
@keyframes ts-shake{0%,100%{translate:0;rotate:0deg}10%,30%,50%,70%,90%{translate:-3px 0;rotate:-8deg}20%,40%,60%,80%{translate:3px 0;rotate:8deg}}
html.ts body .ts-shake{animation:ts-shake 1s ease-in-out .25s}

/* The video preview frame is always dark, so its empty-state words stay light in light mode too,
   and shrink to fit inside the frame (--ew is the frame's on-screen width, set in tapshop-theme.js). */
html.ts #empty{max-width:calc(var(--ew,320px) * .86);color:#fff}
html.ts #empty b{color:#fff;font-size:clamp(16px,calc(var(--ew,320px) * .11),34px);line-height:1.2}
html.ts #empty span{color:#b8b8c4;font-size:clamp(10px,calc(var(--ew,320px) * .04),12px)}