/* FitTrack Theme Management Workspace: gallery, on-demand preview, guided drawer. */
.theme-workspace { display:grid; grid-template-columns:minmax(0,1fr) 0; gap:16px; align-items:start; transition:grid-template-columns .24s ease; }
.theme-workspace.preview-open { grid-template-columns:minmax(0,1fr) minmax(420px,520px); }
.theme-management-shell { min-width:0; background:radial-gradient(circle at 88% 0%,rgba(6,182,212,.09),transparent 32%),var(--bg-surface); }
.theme-gallery-toolbar { margin-bottom:0!important; padding:20px 22px!important; }
.theme-section-eyebrow,.theme-card-eyebrow { display:block; color:#67e8f9; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.theme-gallery-toolbar .toolbar-title h2 { margin-top:5px; font-size:21px; }
.theme-gallery-actions { align-items:center; }
.theme-gallery-count { color:var(--text-muted); font-size:11px; }
.theme-gallery-note { display:flex; align-items:center; gap:8px; padding:11px 22px; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); color:var(--text-muted); font-size:11px; }
.theme-gallery-note-dot { width:6px; height:6px; border-radius:50%; background:#22d3ee; box-shadow:0 0 0 4px rgba(34,211,238,.1); }
.theme-management-grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; padding:20px 22px 22px; }
.theme-management-card { min-width:0; overflow:hidden; background:rgba(15,23,42,.7); border:1px solid var(--border-color); border-radius:14px; box-shadow:var(--shadow-sm); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.theme-management-card:hover { border-color:rgba(34,211,238,.45); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.theme-management-artwork { position:relative; min-height:174px; overflow:hidden; background:#172033; }
.theme-management-artwork img { display:block; width:100%; height:174px; object-fit:cover; }
.theme-artwork-placeholder { display:grid; height:174px; place-items:center; color:var(--text-muted); font-size:11px; background:linear-gradient(135deg,#18243a,#0f172a); }
.theme-management-artwork-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,6,23,.02),rgba(2,6,23,.86)); pointer-events:none; }
.theme-management-artwork-copy { position:absolute; left:16px; right:16px; bottom:14px; display:flex; flex-direction:column; gap:4px; color:#fff; pointer-events:none; }
.theme-management-artwork-copy span { font-size:17px; font-weight:700; }
.theme-management-artwork-copy small,.theme-management-card-heading small { color:rgba(255,255,255,.62); font:11px/1.2 var(--font-mono,monospace); }
.theme-default-mark { position:absolute; top:12px; right:12px; padding:4px 8px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(2,6,23,.48); color:#fff; font-size:10px; }
.theme-management-card-body { padding:14px 16px 16px; }
.theme-management-card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.theme-management-card-heading h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.theme-management-card-heading small { display:block; margin-top:4px; color:var(--text-muted); }
.theme-management-meta { display:flex; flex-wrap:wrap; gap:9px; margin-top:11px; color:var(--text-muted); font-size:10px; }
.theme-management-actions { display:flex; align-items:center; gap:6px; margin-top:15px; }
.theme-management-actions .btn { min-width:52px; }
.theme-more-menu { position:relative; margin-left:auto; }
.theme-more-menu .dropdown-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:20; display:none; min-width:130px; overflow:hidden; flex-direction:column; border:1px solid var(--border-color); border-radius:8px; background:#0b1120; box-shadow:0 12px 28px rgba(0,0,0,.42); }
.theme-more-menu .dropdown-menu.show { display:flex; }
.theme-more-menu .dropdown-item { display:block; width:100%; padding:8px 10px; border:0; background:transparent; color:var(--text-main); cursor:pointer; font-size:11px; text-align:left; white-space:nowrap; }
.theme-more-menu .dropdown-item:hover { background:rgba(34,211,238,.1); }
.theme-more-menu .dropdown-item.danger { color:#fb7185; }
.theme-management-empty { grid-column:1/-1; min-height:150px; display:grid; place-items:center; border:1px dashed var(--border-color); border-radius:12px; color:var(--text-muted); font-size:13px; }
.theme-management-empty.is-error { color:var(--color-danger); }
.theme-icon-button { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--border-color); border-radius:9px; background:rgba(255,255,255,.04); color:var(--text-muted); cursor:pointer; font-size:22px; line-height:1; }
.theme-icon-button:hover { border-color:var(--border-focus); color:var(--text-main); background:rgba(255,255,255,.08); }

.theme-preview-panel { display:none; position:sticky; top:70px; min-width:0; height:calc(100vh - 92px); flex-direction:column; overflow:hidden; border:1px solid rgba(103,232,249,.2); border-radius:16px; background:linear-gradient(180deg,rgba(22,31,50,.98),rgba(11,17,32,.98)); box-shadow:var(--shadow-overlay); }
.theme-preview-panel.is-open { display:flex; }
.theme-preview-panel-header,.theme-editor-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:20px 22px; border-bottom:1px solid var(--border-color); }
.theme-preview-panel-header h2,.theme-editor-header h2 { margin-top:6px; color:var(--text-main); font-size:19px; }
.theme-preview-summary { display:flex; align-items:center; gap:9px; margin-top:10px; color:var(--text-muted); font-size:11px; }
.theme-preview-panel-body { flex:1; overflow:auto; padding:22px; }
.theme-preview-panel-footer { display:grid; gap:14px; padding:16px 22px 20px; border-top:1px solid var(--border-color); background:rgba(11,17,32,.72); }
.theme-preview-control-group { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--text-muted); font-size:11px; }
.theme-preview-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.theme-preview-controls .btn.active { border-color:rgba(103,232,249,.55); background:rgba(34,211,238,.14); color:#a5f3fc; }
.theme-mock-preview { --theme-preview-accent:#2563eb; --theme-preview-gradient-start:#3b82f6; --theme-preview-gradient-end:#1d4ed8; --theme-preview-surface:#fff; --theme-preview-artwork:none; position:relative; width:min(100%,390px); min-height:545px; margin:0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:28px; background:linear-gradient(180deg,var(--theme-preview-surface),#f8fafc 76%); box-shadow:0 18px 45px rgba(0,0,0,.24); transition:width .2s ease; }
.theme-mock-preview[data-preview-size="430"] { width:min(100%,430px); }
.theme-mock-preview-art,.theme-mock-preview-overlay { position:absolute; inset:0 0 auto; height:67%; }
.theme-mock-preview-art { background-image:var(--theme-preview-artwork); background-position:center; background-size:cover; opacity:.28; }
.theme-mock-preview-overlay { background:linear-gradient(180deg,rgba(255,255,255,0),rgba(248,250,252,.96) 94%); }
.theme-mock-preview-content { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; padding:30px 24px; color:#172033; }
.theme-mock-eyebrow { color:var(--theme-preview-accent); font-size:10px; font-weight:700; letter-spacing:.16em; }
.theme-mock-preview-content strong { margin-top:84px; font-size:28px; letter-spacing:-.04em; }
.theme-mock-preview-content>span[data-mock-subtitle] { color:#64748b; font-size:12px; }
.theme-mock-focus { display:grid; grid-template-columns:repeat(3,1fr) 1.35fr; gap:8px; margin-top:18px; padding:16px; border:1px solid color-mix(in srgb,var(--theme-preview-accent) 20%,white); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--theme-preview-gradient-start) 12%,white),color-mix(in srgb,var(--theme-preview-gradient-end) 8%,white)); }
.theme-mock-focus i,.theme-mock-focus b { display:block; height:64px; border-radius:12px; background:color-mix(in srgb,var(--theme-preview-accent) 15%,white); }
.theme-mock-focus b { background:linear-gradient(135deg,var(--theme-preview-gradient-start),var(--theme-preview-gradient-end)); }
.theme-mock-nav { display:grid; grid-template-columns:repeat(3,1fr) 1.25fr; gap:8px; margin-top:auto; padding:10px 12px; border-top:1px solid rgba(15,23,42,.08); }
.theme-mock-nav i,.theme-mock-nav b { height:7px; border-radius:99px; background:rgba(100,116,139,.2); }
.theme-mock-nav b { background:var(--theme-preview-accent); }

.theme-editor-overlay { position:fixed; inset:0; z-index:2100; display:flex; justify-content:flex-end; visibility:hidden; background:rgba(2,6,23,.68); opacity:0; transition:visibility 0s linear .24s,opacity .24s ease; }
.theme-editor-overlay.is-open { visibility:visible; opacity:1; transition-delay:0s; }
.theme-editor-drawer { width:min(820px,calc(100vw - 40px)); height:100vh; display:flex; flex-direction:column; overflow:hidden; border-left:1px solid rgba(103,232,249,.2); background:#0f172a; box-shadow:-20px 0 54px rgba(0,0,0,.58); transform:translateX(100%); transition:transform .28s ease; }
.theme-editor-overlay.is-open .theme-editor-drawer { transform:translateX(0); }
.theme-editor-header { flex:0 0 auto; padding:18px 24px; background:#0b1120; }
.theme-editor-header p { margin-top:5px; color:var(--text-muted); font-size:11px; }
.theme-editor-step-nav { display:grid; grid-template-columns:repeat(5,1fr); flex:0 0 auto; border-bottom:1px solid var(--border-color); background:#0b1120; }
.theme-editor-step { position:relative; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:13px 12px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-muted); cursor:pointer; text-align:left; }
.theme-editor-step span { font:600 10px/1 var(--font-mono,monospace); color:var(--text-sub); }
.theme-editor-step strong { overflow:hidden; max-width:100%; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.theme-editor-step:hover,.theme-editor-step.is-active { color:var(--text-main); background:rgba(34,211,238,.06); }
.theme-editor-step.is-active { border-bottom-color:#22d3ee; }
.theme-editor-step.is-active span { color:#67e8f9; }
.theme-editor-form { min-height:0; display:flex; flex:1; flex-direction:column; }
.theme-editor-drawer-body { min-height:0; flex:1; overflow-y:auto; padding:22px 24px 30px; }
.theme-editor-live-preview { display:grid; grid-template-columns:1fr 188px; align-items:center; gap:16px; margin-bottom:20px; padding:12px 14px; border:1px solid rgba(103,232,249,.18); border-radius:13px; background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(15,23,42,.34)); }
.theme-editor-drawer[data-editor-step="1"] .theme-editor-live-preview,.theme-editor-drawer[data-editor-step="5"] .theme-editor-live-preview { display:none; }
.theme-editor-live-copy span { color:#67e8f9; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.theme-editor-live-copy strong { display:block; margin-top:5px; color:var(--text-main); font-size:16px; }
.theme-editor-live-copy small { display:block; margin-top:5px; color:var(--text-muted); font-size:10px; }
.theme-mini-preview { --theme-preview-accent:#2563eb; --theme-preview-gradient-start:#3b82f6; --theme-preview-gradient-end:#1d4ed8; --theme-preview-surface:#fff; --theme-preview-artwork:none; position:relative; height:92px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:linear-gradient(135deg,var(--theme-preview-surface),#e8eef7); }
.theme-mini-preview-art { position:absolute; inset:0; background-image:var(--theme-preview-artwork); background-position:center; background-size:cover; opacity:.32; }
.theme-mini-preview-content { position:absolute; inset:0; display:flex; flex-direction:column; gap:6px; padding:12px; }
.theme-mini-preview-content span { width:54px; height:5px; border-radius:99px; background:var(--theme-preview-accent); }
.theme-mini-preview-content strong { width:110px; height:11px; border-radius:5px; background:color-mix(in srgb,var(--theme-preview-accent) 72%,#0f172a); }
.theme-mini-preview-content i { width:100%; height:28px; margin-top:4px; border-radius:8px; background:linear-gradient(135deg,color-mix(in srgb,var(--theme-preview-gradient-start) 20%,white),color-mix(in srgb,var(--theme-preview-gradient-end) 30%,white)); }
.theme-mini-preview-content b { width:64%; height:4px; margin-top:auto; border-radius:99px; background:var(--theme-preview-accent); }
.theme-editor-step-panel[hidden] { display:none; }
.theme-step-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; }
.theme-step-heading>span { display:grid; width:32px; height:32px; flex:0 0 auto; place-items:center; border-radius:10px; background:var(--primary-subtle); color:#67e8f9; font:600 11px/1 var(--font-mono,monospace); }
.theme-step-heading h3 { margin-top:5px; color:var(--text-main); font-size:18px; }
.theme-step-heading p { margin-top:5px; color:var(--text-muted); font-size:11px; }
.theme-form-grid,.theme-color-grid { display:grid; gap:14px; }
.theme-form-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.theme-field,.theme-color-field { display:grid; gap:7px; color:var(--text-secondary); font-size:11px; }
.theme-field-wide { grid-column:span 2; }
.theme-field .input-text,.theme-field .input-select,.theme-color-control .input-text { padding:9px 10px; border-radius:8px; background:#0b1120; }
.theme-field input[readonly] { color:var(--text-muted); }
.theme-advanced-inline { margin-top:18px; border-top:1px solid var(--border-color); color:var(--text-secondary); }
.theme-advanced-inline summary { padding:12px 0; color:var(--text-main); cursor:pointer; font-size:11px; }
.theme-advanced-inline p { margin-top:8px; color:var(--text-muted); font-size:10px; }
.theme-artwork-upload-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:14px; }
.theme-artwork-upload-card,.theme-glow-card,.theme-range-card,.theme-token-group,.theme-gradient-editor,.theme-publish-summary { padding:14px; border:1px solid var(--border-color); border-radius:12px; background:rgba(11,17,32,.5); }
.theme-artwork-preview-frame { position:relative; height:170px; overflow:hidden; border-radius:9px; background:linear-gradient(135deg,#1b2941,#0b1120); }
.theme-artwork-preview-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.theme-artwork-empty-state { position:absolute; inset:0; display:grid; place-items:center; color:var(--text-muted); font-size:10px; }
.theme-artwork-empty-state[hidden],.theme-artwork-preview-frame img[hidden] { display:none; }
.theme-artwork-card-copy,.theme-token-group-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.theme-artwork-card-copy strong,.theme-token-group-heading strong { display:block; margin-top:4px; color:var(--text-main); font-size:12px; }
.theme-artwork-status { margin-top:9px; color:var(--text-muted); font-size:10px; }
.theme-upload-button { position:relative; overflow:hidden; cursor:pointer; }
.theme-upload-button input { position:absolute; inset:0; width:100%; height:100%; cursor:pointer; opacity:0; }
.theme-range-card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:14px; }
.theme-range-field { display:grid; gap:8px; color:var(--text-secondary); font-size:11px; }
.theme-range-field span { display:flex; justify-content:space-between; gap:10px; }
.theme-range-field output { color:#67e8f9; font-weight:700; }
.theme-range-field input[type=range] { width:100%; accent-color:#22d3ee; }
.theme-glow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.theme-glow-card { display:grid; gap:12px; }
.theme-color-control { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:8px; }
.theme-color-control input[type=color] { width:36px; height:36px; padding:3px; border:1px solid var(--border-color); border-radius:8px; background:#0b1120; cursor:pointer; }
.theme-color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.theme-token-group { margin-top:14px; }
.theme-token-group-featured { margin-top:0; }
.theme-token-group-heading { margin-top:0; }
.theme-token-group-heading small { display:block; margin-top:4px; color:var(--text-muted); font-size:10px; }
.theme-token-group-swatch,.theme-gradient-line { display:block; width:52px; height:24px; flex:0 0 auto; border:1px solid rgba(255,255,255,.18); border-radius:7px; background:#2563eb; }
.theme-gradient-editor { margin-top:14px; }
.theme-gradient-fields { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:14px; }
.theme-gradient-line { width:74px; height:8px; border:0; background:linear-gradient(90deg,var(--theme-gradient-start,#3b82f6),var(--theme-gradient-end,#1d4ed8)); }
.theme-gradient-preview { display:flex; align-items:flex-end; height:70px; margin-top:14px; padding:12px; border-radius:9px; background:linear-gradient(135deg,var(--theme-gradient-start,#3b82f6),var(--theme-gradient-end,#1d4ed8)); color:rgba(255,255,255,.78); font-size:10px; }
.theme-accordion-list { display:grid; gap:9px; }
.theme-accordion { overflow:hidden; border:1px solid var(--border-color); border-radius:11px; background:rgba(11,17,32,.42); }
.theme-accordion summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; cursor:pointer; list-style:none; }
.theme-accordion summary::-webkit-details-marker { display:none; }
.theme-accordion summary>span { display:grid; gap:4px; }
.theme-accordion summary strong { color:var(--text-main); font-size:12px; }
.theme-accordion summary small { color:var(--text-muted); font-size:10px; }
.theme-accordion summary i { width:32px; height:14px; flex:0 0 auto; border-radius:99px; background:var(--primary); opacity:.7; }
.theme-accordion[open] summary { border-bottom:1px solid var(--border-color); background:rgba(34,211,238,.05); }
.theme-accordion>.theme-color-grid { padding:14px; }
.theme-accordion-note { padding:0 14px 15px; color:var(--text-muted); font-size:10px; }
.theme-reset-button { margin-top:14px; padding:8px 0; border:0; background:none; color:#fbbf24; cursor:pointer; font-size:11px; }
.theme-reset-button:hover { color:#fde68a; }
.theme-publish-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.theme-publish-summary span { display:block; color:var(--text-muted); font-size:10px; }
.theme-publish-summary strong { display:block; margin-top:5px; color:var(--text-main); font-size:13px; }
.theme-editor-final-controls { justify-content:flex-start; margin-bottom:14px; }
.theme-editor-final-mock { width:min(100%,430px); min-height:530px; }
.theme-preview-divider { width:1px; height:18px; background:var(--border-color); }
.theme-editor-action-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-top:1px solid var(--border-color); background:#0b1120; }
.theme-editor-action-bar [hidden] { display:none!important; }
.theme-editor-action-group { display:flex; gap:8px; }
@media (max-width:1180px) { .theme-workspace.preview-open { grid-template-columns:1fr; } .theme-preview-panel { position:fixed; top:64px; right:16px; bottom:16px; z-index:1200; width:min(520px,calc(100vw - 32px)); height:auto; } }
@media (max-width:720px) { .theme-gallery-toolbar,.theme-management-grid { padding-left:16px!important; padding-right:16px!important; } .theme-gallery-toolbar { align-items:flex-start; flex-direction:column; gap:14px; } .theme-gallery-actions { width:100%; justify-content:space-between; } .theme-editor-drawer { width:100vw; } .theme-editor-header,.theme-editor-drawer-body,.theme-editor-action-bar { padding-left:16px; padding-right:16px; } .theme-editor-step-nav { overflow-x:auto; grid-template-columns:repeat(5,120px); } .theme-editor-live-preview,.theme-artwork-upload-grid,.theme-glow-grid,.theme-range-card,.theme-form-grid-two,.theme-gradient-fields,.theme-publish-summary { grid-template-columns:1fr; } .theme-field-wide { grid-column:auto; } .theme-color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .theme-editor-action-bar { align-items:stretch; flex-direction:column; } .theme-editor-action-group { justify-content:flex-end; } }
@media (max-width:440px) { .theme-color-grid { grid-template-columns:1fr; } .theme-preview-panel { top:56px; right:8px; bottom:8px; width:calc(100vw - 16px); } }