/* Theme Studio controls use the applied appearance. Only preview surfaces inherit the staged theme. */
.theme-studio { min-width:0; --ts-border:var(--line); --ts-card:var(--dm-panel-bg,var(--surface)); }
.theme-studio [hidden] { display:none!important; }
.theme-studio .ts-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.theme-studio button,.theme-studio input { font:inherit; }
.theme-studio button { -webkit-tap-highlight-color:transparent; }
.theme-studio .ts-current { display:flex; align-items:center; gap:12px; padding:0 0 22px; }
.ts-current-indicator { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--nav-active-bg); color:var(--accent); border:1px solid var(--nav-active-border); font-size:15px; flex:0 0 auto; }
.ts-current>div { display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.theme-studio .ts-eyebrow { font-size:12px; color:var(--muted); }
.theme-studio .ts-current strong { font-size:14px; font-weight:650; }
.ts-current-detail { font-size:12px; color:var(--muted); }
.theme-studio .ts-reset { margin-left:auto; border:1px solid var(--line); background:var(--surface2); color:var(--text); padding:9px 13px; min-height:40px; border-radius:var(--dm-control-radius,12px); font-size:12px; font-weight:550; cursor:pointer; }
.theme-studio .ts-reset:hover:not(:disabled) { background:var(--nav-active-bg); border-color:var(--nav-active-border); }
.theme-studio .ts-reset:disabled { opacity:.5; cursor:default; }
.theme-studio .ts-showcase { display:grid; grid-template-columns:minmax(0,1fr) 258px; overflow:hidden; border:1px solid var(--line); border-radius:var(--dm-radius,24px); background:var(--ts-card); box-shadow:var(--dm-shadow,var(--shadow)); margin-bottom:33px; }
.ts-preview-wrap { min-width:0; padding:20px; background:color-mix(in srgb,var(--bg) 72%,transparent); border-right:1px solid var(--line); }
.ts-preview-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 13px; color:var(--muted); font-size:10px; font-weight:550; }
.ts-preview-label>span:first-child { color:var(--text); }
.theme-studio .ts-preview { --dm-page-bg:var(--page-bg); --dm-panel-bg:var(--surface); --dm-solid:var(--surface); --dm-sidebar-bg:var(--sidebar-bg); --dm-text:var(--text); --dm-muted:var(--muted); --dm-line:var(--line); --dm-panel-line:var(--line); --dm-shadow:var(--shadow); --dm-radius:24px; --dm-control-radius:12px; --dm-accent:var(--accent); --dm-primary-bg:var(--grad); --dm-on-primary:var(--btn-text,#fff); --dm-active-bg:var(--nav-active-bg); --dm-active-line:var(--nav-active-border); background:var(--dm-page-bg); border-radius:16px; border:1px solid var(--dm-line); color:var(--dm-text); overflow:hidden; height:360px; box-shadow:0 14px 28px rgba(0,0,0,.07); }
.ts-preview-ui { display:grid; grid-template-columns:114px minmax(0,1fr); min-height:0; height:100%; }
.ts-mini-sidebar { padding:20px 10px 13px; display:flex; flex-direction:column; gap:7px; background:var(--dm-sidebar-bg); border-right:1px solid var(--dm-line); backdrop-filter:blur(var(--dm-blur,0px)); }
.ts-mini-brand { display:flex; align-items:center; gap:4px; margin-bottom:19px; }
.ts-mini-brand img { width:25px; height:27px; object-fit:contain; }
.ts-mini-brand b { font-size:14px; letter-spacing:-.5px; }
.ts-mini-section { margin:0 0 5px 6px; font-size:7px; color:var(--dm-muted); letter-spacing:.08em; text-transform:uppercase; }
.ts-mini-nav { font-size:8px; min-height:26px; display:flex; align-items:center; gap:6px; border:1px solid transparent; border-radius:calc(var(--dm-control-radius)/1.5); padding:7px 6px; color:var(--dm-muted); }
.ts-mini-nav.selected { color:var(--dm-accent); background:var(--dm-active-bg); border-color:var(--dm-active-line); }
.ts-mini-nav i { width:8px; height:8px; border:1px solid currentColor; border-radius:2px; opacity:.8; }
.ts-mini-user { margin-top:auto; display:flex; align-items:center; gap:5px; font-size:6px; color:var(--dm-muted); padding-top:10px; border-top:1px solid var(--dm-line); }
.ts-mini-user i,.ts-mini-avatar { background:var(--dm-active-bg); color:var(--dm-accent); border:1px solid var(--dm-active-line); font-size:7px; display:grid; place-items:center; width:21px; height:21px; border-radius:7px; font-style:normal; font-weight:600; }
.ts-mini-main { min-width:0; padding:21px 18px; }
.ts-mini-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:17px; }
.theme-studio .ts-mini-top h3 { color:var(--dm-text); font-size:17px; line-height:1.2; font-weight:650; letter-spacing:-.65px; margin:0; }
.theme-studio .ts-mini-top p { margin:5px 0 0; color:var(--dm-muted); font-size:7px; line-height:1.3; }
.ts-mini-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:11px; }
.ts-mini-card { background:var(--dm-panel-bg); border:1px solid var(--dm-panel-line); border-radius:calc(var(--dm-radius)/1.65); padding:11px; box-shadow:var(--dm-shadow); backdrop-filter:blur(var(--dm-blur,0px)); min-width:0; }
.ts-mini-stats .ts-mini-card { position:relative; }
.ts-mini-stats span { display:block; color:var(--dm-muted); font-size:7px; }
.ts-mini-stats b { display:block; font-size:23px; line-height:1.4; letter-spacing:-1px; color:var(--dm-text); font-weight:600; }
.ts-mini-stats i { position:absolute; right:10px; bottom:13px; width:17px; height:4px; border-radius:9px; background:var(--dm-accent); opacity:.5; }
.ts-mini-work { padding:12px; }
.ts-mini-work-head { display:flex; justify-content:space-between; align-items:center; gap:9px; margin-bottom:12px; font-size:9px; }
.ts-mini-work-head>b { font-weight:600; }
.ts-mini-control { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:6px; color:var(--dm-muted); background:var(--dm-control-bg); border:1px solid var(--dm-line); border-radius:calc(var(--dm-control-radius)/1.7); padding:6px 7px; box-shadow:var(--dm-control-shadow); }
.ts-mini-control i { font-size:10px; line-height:.8; font-style:normal; }
.ts-mini-table { font-size:7px; border:1px solid var(--dm-line); border-radius:calc(var(--dm-control-radius)/1.7); overflow:hidden; background:var(--dm-solid); }
.ts-mini-table>div { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(40px,.7fr) 34px; gap:8px; padding:8px; border-bottom:1px solid var(--dm-line); }
.ts-mini-table>div:last-child { border-bottom:0; }
.ts-mini-table>div>span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-mini-table-head { background:var(--dm-inset-bg); color:var(--dm-muted); font-size:6px; }
.ts-mini-check { display:inline-block; width:6px; height:6px; border:1px solid var(--dm-line); border-radius:2px; vertical-align:middle; margin-right:6px; }
.ts-mini-actions { display:flex; align-items:center; gap:6px; padding-top:10px; font-size:6px; color:var(--dm-muted); }
.ts-mini-actions>span:first-child { margin-right:auto; }
.ts-mini-primary,.ts-mini-secondary { padding:6px 10px; border-radius:calc(var(--dm-control-radius)/1.7); font-size:7px; font-weight:600; }
.ts-mini-primary { color:var(--dm-on-primary); background:var(--dm-primary-bg); box-shadow:var(--dm-button-shadow); border:1px solid transparent; }
.ts-mini-secondary { background:var(--dm-control-bg); color:var(--dm-text); border:1px solid var(--dm-line); box-shadow:var(--dm-control-shadow); }
.ts-inspector { padding:31px 25px 25px; display:flex; flex-direction:column; gap:23px; justify-content:space-between; min-width:0; }
.ts-family-label { display:inline-block; font-size:11px; color:var(--accent); font-weight:600; margin-bottom:10px; }
.theme-studio .ts-inspector h2 { font-size:26px; font-weight:600; letter-spacing:-.9px; line-height:1.15; margin:0 0 12px; color:var(--text); }
.theme-studio .ts-inspector p { color:var(--muted); font-size:12px; line-height:1.65; margin:0; }
.ts-palette { display:flex; gap:7px; margin-bottom:12px; }
.ts-palette span { display:block; width:25px; height:25px; border-radius:50%; border:1px solid color-mix(in srgb,var(--text) 16%,transparent); box-shadow:inset 0 1px 1px rgba(255,255,255,.18); }
.ts-mode { font-size:11px; color:var(--muted); }
.theme-studio .ts-apply { width:100%; min-height:43px; font-size:13px; }
.theme-studio .ts-apply:disabled { box-shadow:none; }
.theme-studio .ts-apply-area p { margin-top:10px; font-size:10px; min-height:32px; }
.ts-collection-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.theme-studio .ts-collection h2 { font-size:20px; font-weight:600; letter-spacing:-.5px; margin-bottom:5px; }
.theme-studio .ts-collection-heading p { font-size:12px; color:var(--muted); line-height:1.5; }
.ts-search { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:var(--dm-control-radius,12px); background:var(--dm-control-bg,var(--surface2)); padding:0 13px; min-width:210px; box-shadow:var(--dm-control-shadow,none); }
.ts-search svg { width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:1.7; flex-shrink:0; }
.theme-studio .ts-search input { appearance:none; background:none; border:0; color:var(--text); min-width:0; width:170px; min-height:42px; font-size:12px; outline:none; }
.ts-search:focus-within { outline:3px solid var(--accent); outline-offset:3px; }
.ts-search input::placeholder { color:var(--muted); opacity:1; }
.theme-studio .ts-search input:focus-visible { outline:none; }
.ts-filter-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.ts-filters { display:flex; flex-wrap:wrap; gap:5px; }
.theme-studio .ts-filters button { min-height:38px; padding:8px 14px; font-size:12px; font-weight:550; border-radius:var(--dm-control-radius,11px); background:transparent; color:var(--muted); border:1px solid transparent; cursor:pointer; transition:background-color 140ms,border-color 140ms,color 140ms; }
.theme-studio .ts-filters button:hover { color:var(--text); background:var(--surface2); }
.theme-studio .ts-filters button[aria-pressed="true"] { color:var(--accent); background:var(--nav-active-bg); border-color:var(--nav-active-border); }
.ts-result-count { font-size:11px; color:var(--muted); white-space:nowrap; }
.ts-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.theme-studio .ts-tile.theme-card { position:relative; min-width:0; padding:7px; border:1px solid var(--line); border-radius:19px; background:var(--ts-card); box-shadow:none; overflow:hidden; transition:transform 160ms,border-color 160ms,box-shadow 160ms; }
.theme-studio .ts-tile:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); box-shadow:0 10px 24px rgba(0,0,0,.05); }
.theme-studio .ts-tile.is-selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.theme-studio .ts-tile-button { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:18px; cursor:pointer; background:transparent; }
.theme-studio .ts-tile-button:focus-visible { outline:3px solid var(--accent); outline-offset:-4px; }
.ts-tile-info { padding:12px 6px 9px; }
.ts-tile-meta { display:flex; justify-content:space-between; align-items:center; gap:5px; margin-bottom:7px; min-height:14px; font-size:10px; color:var(--muted); }
.ts-tile-state { color:var(--accent); font-weight:600; }
.theme-studio .ts-tile h3 { font-size:14px; line-height:1.25; font-weight:600; letter-spacing:-.25px; margin:0 0 6px; color:var(--text); }
.theme-studio .ts-tile p { font-size:11px; line-height:1.5; margin:0; color:var(--muted); min-height:34px; }
.theme-studio .ts-thumbnail { display:grid; grid-template-columns:38px minmax(0,1fr); height:112px; background:var(--dm-page-bg); border-radius:12px; overflow:hidden; border:1px solid var(--dm-line); }
.ts-thumb-side { background:var(--dm-sidebar-bg); border-right:1px solid var(--dm-line); padding:16px 7px; display:flex; flex-direction:column; gap:7px; }
.ts-thumb-side i { display:block; height:3px; border-radius:4px; width:22px; background:var(--dm-muted); opacity:.3; }
.ts-thumb-side i:first-child { background:var(--dm-accent); opacity:.8; width:17px; margin-bottom:8px; }
.ts-thumb-main { padding:13px 10px 10px; min-width:0; }
.ts-thumb-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ts-thumb-top i { height:4px; width:36%; border-radius:4px; background:var(--dm-text); opacity:.8; }
.ts-thumb-top b { width:12px; height:12px; border-radius:4px; background:var(--dm-primary-bg); box-shadow:var(--dm-button-shadow); }
.ts-thumb-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-bottom:7px; }
.ts-thumb-cards span { display:block; position:relative; height:28px; background:var(--dm-panel-bg); border:1px solid var(--dm-panel-line); border-radius:calc(var(--dm-radius)/3); box-shadow:var(--dm-shadow); }
.ts-thumb-cards span:after { content:''; position:absolute; left:6px; top:10px; width:8px; height:5px; border-radius:2px; background:var(--dm-text); opacity:.5; }
.ts-thumb-table { display:flex; flex-direction:column; gap:5px; padding:7px; background:var(--dm-panel-bg); border:1px solid var(--dm-panel-line); border-radius:calc(var(--dm-radius)/3); box-shadow:var(--dm-shadow); }
.ts-thumb-table i { display:block; height:2px; background:var(--dm-muted); width:80%; border-radius:3px; opacity:.2; }
.ts-thumb-table i:first-child { width:50%; background:var(--dm-accent); opacity:.45; }
.ts-thumb-table i:last-child { width:65%; }
.ts-empty { border:1px dashed var(--line); border-radius:20px; padding:45px 22px; text-align:center; }
.theme-studio .ts-empty h3 { font-size:18px; margin-bottom:8px; }
.theme-studio .ts-empty p { color:var(--muted); font-size:13px; margin-bottom:18px; }
.ts-status { min-height:18px; margin-top:20px; font-size:11px; color:var(--muted); line-height:1.5; }
@media(min-width:1700px) { .ts-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .theme-studio .ts-showcase { grid-template-columns:minmax(0,1fr) 320px; } .ts-preview-ui { grid-template-columns:140px minmax(0,1fr); } .ts-mini-main { padding-left:25px; padding-right:25px; } }
@media(max-width:1200px) { .theme-studio .ts-showcase { grid-template-columns:minmax(0,1fr) 220px; } .ts-inspector { padding:27px 20px 20px; } .ts-preview-wrap { padding:15px; } .ts-preview-ui { grid-template-columns:93px minmax(0,1fr); } .ts-mini-sidebar { padding-left:7px; padding-right:7px; } .ts-mini-main { padding-left:12px; padding-right:12px; } .ts-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1000px) and (min-width:901px) { .theme-studio .ts-showcase { grid-template-columns:1fr; } .ts-inspector { display:grid; grid-template-columns:1fr 1fr; padding:22px; } .ts-inspector>div:nth-child(2) { display:none; } .ts-apply-area { align-self:center; } .ts-preview-wrap { border-right:0; border-bottom:1px solid var(--line); } .ts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .theme-studio .ts-current { align-items:flex-start; gap:9px; flex-wrap:wrap; padding-bottom:18px; } .ts-current>div { gap:4px 9px; flex:1; } .theme-studio .ts-eyebrow { width:100%; font-size:10px; } .theme-studio .ts-current strong { font-size:13px; } .ts-current-detail { font-size:10px; } .theme-studio .ts-reset { margin-left:0; padding:8px 10px; font-size:10px; } .theme-studio .ts-showcase { grid-template-columns:1fr; border-radius:20px; margin-bottom:26px; } .ts-preview-wrap { padding:13px; border-right:0; border-bottom:1px solid var(--line); } .ts-preview-label { font-size:9px; margin-bottom:10px; } .theme-studio .ts-preview { height:290px; border-radius:12px; } .ts-preview-ui { grid-template-columns:76px minmax(0,1fr); } .ts-mini-sidebar { padding:15px 6px 10px; } .ts-mini-brand { gap:2px; margin-bottom:14px; } .ts-mini-brand img { width:19px; height:22px; } .ts-mini-brand b { font-size:11px; } .ts-mini-section { font-size:5px; margin-left:3px; } .ts-mini-nav { font-size:6px; padding:5px 4px; min-height:22px; gap:5px; } .ts-mini-nav i { width:6px; height:6px; } .ts-mini-user>span { font-size:5px; } .ts-mini-user i { font-size:5px; width:17px; height:17px; border-radius:5px; } .ts-mini-main { padding:16px 10px; } .ts-mini-top { margin-bottom:12px; } .theme-studio .ts-mini-top h3 { font-size:14px; } .theme-studio .ts-mini-top p { font-size:5.5px; } .ts-mini-avatar { width:18px; height:18px; font-size:6px; } .ts-mini-stats { gap:5px; margin-bottom:8px; } .ts-mini-card { padding:8px; } .ts-mini-stats span { font-size:6px; } .ts-mini-stats b { font-size:19px; } .ts-mini-stats i { display:none; } .ts-mini-work-head { font-size:7px; margin-bottom:9px; gap:5px; } .ts-mini-control { font-size:5px; padding:5px; gap:5px; } .ts-mini-table { font-size:5.5px; } .ts-mini-table-head { font-size:5px; } .ts-mini-table>div { grid-template-columns:minmax(0,1.5fr) minmax(27px,.7fr) 22px; padding:7px 5px; gap:4px; } .ts-mini-check { width:5px; height:5px; margin-right:3px; } .ts-mini-actions { padding-top:8px; gap:4px; font-size:4.5px; } .ts-mini-primary,.ts-mini-secondary { padding:5px 7px; font-size:6px; } .ts-inspector { display:grid; grid-template-columns:minmax(0,1fr) 110px; padding:20px 18px; gap:16px 20px; } .theme-studio .ts-inspector h2 { font-size:23px; margin-bottom:8px; } .theme-studio .ts-inspector p { font-size:11px; } .ts-family-label { font-size:10px; margin-bottom:7px; } .ts-inspector>div:nth-child(2) { padding-top:5px; } .ts-palette { gap:5px; margin-bottom:10px; } .ts-palette span { width:22px; height:22px; } .ts-mode { font-size:9px; } .ts-apply-area { grid-column:1/-1; } .theme-studio .ts-apply-area p { min-height:0; margin-top:8px; font-size:10px; text-align:center; } .ts-collection-heading { flex-direction:column; align-items:stretch; gap:14px; margin-bottom:15px; } .theme-studio .ts-collection h2 { font-size:20px; } .theme-studio .ts-collection-heading p { font-size:11px; } .ts-search { width:100%; } .theme-studio .ts-search input { width:100%; min-height:44px; } .ts-filter-row { align-items:flex-start; gap:10px; flex-direction:column; } .ts-filters { gap:5px; } .theme-studio .ts-filters button { font-size:11px; padding:9px 13px; min-height:40px; } .ts-result-count { font-size:10px; } .ts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .theme-studio .ts-tile.theme-card { padding:6px; border-radius:16px; } .theme-studio .ts-thumbnail { height:95px; grid-template-columns:28px minmax(0,1fr); border-radius:10px; } .ts-thumb-side { padding:15px 5px; } .ts-thumb-side i { width:16px; } .ts-thumb-side i:first-child { width:13px; } .ts-thumb-main { padding:11px 7px 7px; } .ts-thumb-top { margin-bottom:9px; } .ts-thumb-cards { gap:3px; } .ts-thumb-cards span { height:23px; } .ts-thumb-cards span:after { left:4px; top:9px; width:6px; height:4px; } .ts-thumb-table { padding:5px; gap:4px; } .ts-tile-info { padding:10px 3px 6px; } .ts-tile-meta { font-size:9px; gap:4px; margin-bottom:5px; } .theme-studio .ts-tile h3 { font-size:13px; } .theme-studio .ts-tile p { font-size:11px; min-height:50px; line-height:1.5; } .ts-status { font-size:10px; } }
@media(max-width:359px) { .theme-studio .ts-reset { margin-left:43px; } .ts-inspector { grid-template-columns:1fr; } .ts-inspector>div:nth-child(2) { display:none; } .ts-grid { grid-template-columns:1fr; } .theme-studio .ts-thumbnail { height:130px; grid-template-columns:43px minmax(0,1fr); } .ts-thumb-cards span { height:35px; } .theme-studio .ts-tile p { min-height:0; } }
@media(prefers-reduced-motion:reduce) { .theme-studio * { transition:none!important; animation:none!important; } .theme-studio .ts-tile:hover { transform:none; } }