/* Dark touch variant inspired by the Shapery dashboard palette and panel hierarchy. */

/* Optional macOS-inspired administration theme. Program graphics live in separate documents. */
html[data-theme=touch]{color-scheme:dark;--bg-dark:#101116;--card-bg:#1b1c25;--border:#30313e;--text:#f0f0f7;--muted:#a4a5b7;--primary:#7561df;--success:#159447;--danger:#e13940;--warning:#f5b32f;--studio-accent:#b5a5ff}
html[data-theme=touch] body{background:#101116;color:#f0f0f7;padding:18px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html[data-theme=touch] header{background:#17181f;border-bottom:1px solid #3e4049;margin:-18px -18px 20px;padding:12px 20px;gap:16px;box-shadow:0 1px 4px #14243a06}
html[data-theme=touch] header h2{color:#f0f0f4;font-weight:700!important;letter-spacing:-.02em!important}
html[data-theme=touch] .nav-tabs{padding:3px;gap:2px;background:#1b1c20;border:1px solid #3c3e46;border-radius:10px}
html[data-theme=touch] .tab-btn{color:#b8bac5;border:0;border-radius:7px;padding:8px 12px;font-weight:500}
html[data-theme=touch] .tab-btn:hover{background:#383a43}
html[data-theme=touch] .tab-btn.active{background:#1b1c25;color:#fff;box-shadow:0 1px 5px #182b4920}
html[data-theme=touch] .header-status #workspace-toggle{background:#1b1c25;color:#dedee7;border-color:#484a55;border-radius:7px}
html[data-theme=touch] .theme-picker{color:#b8bac5}
html[data-theme=touch] .card{background:#1b1c25;border:1px solid #30313e;border-radius:12px;padding:18px;box-shadow:0 2px 6px #24365406}
html[data-theme=touch] .card-title{color:#f1f1f5;border-color:#30313e;font-size:13px;font-weight:600;padding-bottom:12px}
html[data-theme=touch] label{color:#b7b9c6;font-weight:500}
html[data-theme=touch] input,html[data-theme=touch] select,html[data-theme=touch] textarea{background:#202126;color:#e5e6ed;border:1px solid #484a55;border-radius:7px;padding:8px 10px;box-shadow:inset 0 1px 2px #13223803}
html[data-theme=touch] input[type=number]{color:#c5b6ff}
html[data-theme=touch] input:focus,html[data-theme=touch] select:focus,html[data-theme=touch] textarea:focus{border-color:#9b86ed;background:#1b1c25}
html[data-theme=touch] input::placeholder,html[data-theme=touch] textarea::placeholder{color:#858896}
html[data-theme=touch] .hint,html[data-theme=touch] .preset-sub{color:#a4a5b7}
html[data-theme=touch] .btn{border-radius:7px;font-weight:600;box-shadow:0 1px 2px #19315310}
html[data-theme=touch] .btn-secondary,html[data-theme=touch] #tab-live .btn-secondary{background:#3a3c45;border:1px solid #484a55;color:#dedee7}
html[data-theme=touch] .btn-primary{background:#7561df;color:#fff}
html[data-theme=touch] .btn-success{background:#159447;color:#fff}
html[data-theme=touch] .btn-danger{background:#e13940;color:#fff}
html[data-theme=touch] .btn-warning{background:#f5b32f;color:#352600}
html[data-theme=touch] .preset-card,html[data-theme=touch] .style-chip,html[data-theme=touch] .gif-preset-card,html[data-theme=touch] .item-row,html[data-theme=touch] .piece-library-row{background:#2b2d34;color:#e0e1e9;border-color:#444651;border-radius:8px}
html[data-theme=touch] .preset-card:hover,html[data-theme=touch] .style-chip:hover,html[data-theme=touch] .gif-preset-card:hover{background:#302943;border-color:#a08bdd}
html[data-theme=touch] .preset-title{color:#e9eaf1}
html[data-theme=touch] .saved-preset-row{background:transparent;border:0;border-bottom:1px solid #3d3f49;border-radius:0}
html[data-theme=touch] .saved-preset-copy strong{color:#e9eaf1}html[data-theme=touch] .saved-preset-copy span{color:#a3a6b6}
html[data-theme=touch] .preset-remove{background:#642e39;color:#ffbdc7;border-color:#a95567;border-radius:6px;box-shadow:none}
html[data-theme=touch] .preset-remove:hover{background:#e13940;color:#fff;border-color:#e13940}
html[data-theme=touch] #cfg-presets-list,html[data-theme=touch] #cfg-style-presets-list,html[data-theme=touch] #cfg-gif-presets-list{border-color:#41434d}
html[data-theme=touch] .workspace-toolbar,html[data-theme=touch] #workspace-panel,html[data-theme=touch] #workspace-editor,html[data-theme=touch] .menu-content{background:#17181f;color:#e0e1e9;border-color:#30313e;border-radius:10px}
html[data-theme=touch] .widget-tools{background:#e9edf3;border-color:#ccd6e3;color:#526174}
html[data-theme=touch] .widget-tools button{background:#1b1c25;border-color:#d1d9e4;color:#43536a}
html[data-theme=touch] .drop-message{color:#718097;border-color:#b7c5d6}
html[data-theme=touch] .air-chip{background:#f0f3f7;border-color:#bcc6d5;color:#39465a}
html[data-theme=touch] .air-chip.on{background:#592b34;border-color:#b85767;color:#ffc0c9}
html[data-theme=touch] #tab-live .quick-toggle{background:#30333b;color:#d6dbea;border-color:#515665;border-radius:8px}
html[data-theme=touch] #tab-live .quick-toggle.on{background:#612c37;color:#ffc2cc;border-color:#bc596c}
html[data-theme=touch] .emergency-card{background:#36262c;border-color:#75414d}
html[data-theme=touch] .rundown-editor-row,html[data-theme=touch] .rundown-live-summary,html[data-theme=touch] .rundown-row{background:#2b2d34;color:#dedee7;border-color:#454954;border-radius:8px}
html[data-theme=touch] .rundown-editor-row.selected,html[data-theme=touch] .item-row.selected{background:#302748;border-color:#9a80db}
html[data-theme=touch] #tab-pieces{--studio-panel:#1b1c25;--studio-edge:#424651}
html[data-theme=touch] .studio-grid>section{border-radius:10px;overflow:hidden;box-shadow:0 2px 6px #24365406}
html[data-theme=touch] .studio-grid .card{border:0;border-radius:0;box-shadow:none;padding:14px}
html[data-theme=touch] .studio-templates summary,html[data-theme=touch] .studio-panel-title,html[data-theme=touch] .studio-property-group summary{color:#dce0ed}
html[data-theme=touch] .piece-template{background:#2d3038;border-color:#454b59;color:#d6dbea;border-radius:7px}
html[data-theme=touch] .piece-template[aria-pressed=true]{background:#352b50;border-color:#a48ae5}
html[data-theme=touch] .piece-template span{color:#a5afc3}
html[data-theme=touch] .composer-tools,html[data-theme=touch] #studio-composer-toolbar .composer-tools{background:#282b32;border-color:#424651}
html[data-theme=touch] .composer-layer{background:#2a2d34;border-color:#3e4350}
html[data-theme=touch] .composer-layer button{background:transparent;color:#c3cada;box-shadow:none}
html[data-theme=touch] .composer-layer.selected{background:#3b2f57;border-color:#a58de4}
html[data-theme=touch] .composer-layer.selected button{color:#e1d7ff}
html[data-theme=touch] .composer-properties,html[data-theme=touch] .studio-property-group,html[data-theme=touch] .piece-appearance,html[data-theme=touch] .sponsor-css-details{border-color:#424651}
html[data-theme=touch] .piece-appearance summary,html[data-theme=touch] .sponsor-css-details summary{color:#c3cada}
html[data-theme=touch] .studio-empty,html[data-theme=touch] .studio-monitor-settings{color:#a8b2c7}
html[data-theme=touch] .color-control input[type=color],html[data-theme=touch] .piece-color-grid input[type=color]{background:#30333b;border-color:#4a5060}
html[data-theme=touch] .color-control output,html[data-theme=touch] .piece-color-grid output{color:#c0cade}
html[data-theme=touch] .piece-badge{background:#313641;color:#acb8cd;border-color:#4b5262;border-radius:6px}
html[data-theme=touch] .piece-badge.on{background:#234b35;color:#9ee6b4;border-color:#467e59}
html[data-theme=touch] .piece-library-row.selected{background:#302943;border-color:#a48cde}
html[data-theme=touch] #panel-toast{background:#1b1c25;border-color:#4d607c;color:#d5e1f5;box-shadow:0 4px 20px #21365020;border-radius:10px}
html[data-theme=touch] #piece-editor-status,html[data-theme=touch] #piece-preview-status{color:#e8be78}
html[data-theme=touch] *{scrollbar-color:#606573 #3a3c45}
.theme-picker{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;white-space:nowrap}.theme-picker select{width:auto;padding:5px 8px;font-size:11px;max-width:140px}
@media(max-width:750px){html[data-theme=touch] header{padding:12px 14px}.header-status{flex-wrap:wrap}html[data-theme=touch] .nav-tabs{flex-wrap:wrap}.theme-picker{flex:0 0 auto}}

html[data-theme=touch]{--primary:#7561df;--studio-accent:#b5a5ff}
html[data-theme=touch] body{padding:24px;font-size:14px;background:#101116}
html[data-theme=touch] header{margin:-24px -24px 24px;padding:16px 24px;background:#15161d;border-color:#2d2e3b;min-height:80px;gap:18px}
html[data-theme=touch] header h2{font-size:18px!important;letter-spacing:-.035em!important}
html[data-theme=touch] .nav-tabs{padding:5px;background:#20212c;border-color:#303140;border-radius:15px;gap:4px}
html[data-theme=touch] .tab-btn{min-height:44px;padding:11px 16px;border-radius:11px;font-size:13px}
html[data-theme=touch] .tab-btn.active{background:#7561df;color:#fff;box-shadow:0 2px 6px #0003}
html[data-theme=touch] .theme-picker select,html[data-theme=touch] .header-status #workspace-toggle{min-height:44px;border-radius:10px;font-size:12px}
html[data-theme=touch] .grid,html[data-theme=touch] .rundown-editor-grid{gap:18px}
html[data-theme=touch] .card{padding:22px;border-radius:18px;background:#1b1c25;border-color:#30313e;box-shadow:0 4px 12px #00000016}
html[data-theme=touch] .card-title{font-size:15px;letter-spacing:-.015em;padding-bottom:15px;margin-bottom:18px}
html[data-theme=touch] label{font-size:12px;color:#b7b7c8}
html[data-theme=touch] input,html[data-theme=touch] select,html[data-theme=touch] textarea{min-height:44px;border-radius:11px;background:#14151d;border-color:#363746;font-size:14px;padding:11px 12px}
html[data-theme=touch] input[type=checkbox]{min-height:22px;width:22px;height:22px;accent-color:#9b86ed;vertical-align:middle}
html[data-theme=touch] .btn,html[data-theme=touch] #tab-live .btn,html[data-theme=touch] #tab-live .btn-sm{min-height:44px;padding:11px 15px;border-radius:11px;font-size:13px;font-weight:600;text-transform:none;touch-action:manipulation}
html[data-theme=touch] .btn-primary{background:#7561df}
html[data-theme=touch] .btn-secondary,html[data-theme=touch] #tab-live .btn-secondary{background:#2e2f3d;color:#e7e5f5;border:1px solid #434454}
html[data-theme=touch] .btn-row{gap:10px}
html[data-theme=touch] .preset-card,html[data-theme=touch] .style-chip,html[data-theme=touch] .gif-preset-card{min-height:68px;padding:15px;border-radius:13px;background:#232430;border-color:#393a49;touch-action:manipulation}
html[data-theme=touch] .preset-title,html[data-theme=touch] #tab-live .preset-title{font-size:14px;font-weight:600;color:#ececf5}
html[data-theme=touch] .preset-sub{font-size:12px;color:#aaabbd}
html[data-theme=touch] #tab-live .quick-toggle{min-height:54px;padding:15px;border-radius:13px;background:#252632;border-color:#424352;color:#e0e0ed;touch-action:manipulation}
html[data-theme=touch] #tab-live .quick-toggle.on{background:#652d40;border-color:#c36880;color:#ffdae3}
html[data-theme=touch] .saved-preset-row{grid-template-columns:minmax(0,1fr) 44px;min-height:64px;padding:10px 4px}
html[data-theme=touch] .preset-remove{width:44px;height:44px;min-width:44px;border-radius:11px;background:#642e39;color:#ffbdc7;border-color:#a95567;touch-action:manipulation}
html[data-theme=touch] .saved-preset-copy strong{font-size:14px}html[data-theme=touch] .saved-preset-copy span{font-size:12px}
html[data-theme=touch] .studio-grid>section{border-radius:16px}
html[data-theme=touch] .studio-grid .card{padding:18px}
html[data-theme=touch] .piece-editor-grid.studio-grid{gap:12px;grid-template-columns:270px minmax(0,1fr) 360px}
html[data-theme=touch] .studio-panel-title{padding:15px;font-size:14px;font-weight:600}
html[data-theme=touch] .studio-property-group summary,html[data-theme=touch] .studio-templates summary,html[data-theme=touch] .piece-appearance summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
html[data-theme=touch] .studio-property-fields{gap:12px}
html[data-theme=touch] .composer-layer button{min-height:48px;padding:12px 15px!important;font-size:13px}
html[data-theme=touch] .composer-tools{gap:8px;flex-wrap:wrap}
html[data-theme=touch] #studio-composer-toolbar .composer-tools{padding:12px}
html[data-theme=touch] .studio-inspector .piece-action-grid .piece-take{min-height:48px;font-size:14px;border-radius:11px}
html[data-theme=touch] .piece-library-row{padding:16px;border-radius:12px}
html[data-theme=touch] .hint{font-size:12px;line-height:1.6}
@media(max-width:1350px){html[data-theme=touch] .piece-editor-grid.studio-grid{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:'monitor inspector' 'layers inspector' 'library library'}}
@media(max-width:800px){html[data-theme=touch] body{padding:14px}html[data-theme=touch] header{margin:-14px -14px 18px;padding:14px;gap:12px}html[data-theme=touch] .nav-tabs{width:100%;flex-wrap:wrap}html[data-theme=touch] .tab-btn{flex:1}html[data-theme=touch] .piece-editor-grid.studio-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'monitor' 'layers' 'inspector' 'library'}html[data-theme=touch] #tab-config>.grid{grid-template-columns:minmax(0,1fr)}}
html[data-theme=touch] .widget-tools{background:#292735;border-color:#4d465f;color:#ded8ef;padding:12px;gap:10px}
html[data-theme=touch] .widget-tools button{background:#201e2b;border:1px solid #615675;color:#e9e1f8;min-height:44px;min-width:44px;padding:10px;font-size:12px;border-radius:9px}
html[data-theme=touch] .widget-tools label{color:#c8bfd9;font-size:11px;gap:8px}
html[data-theme=touch] .widget-tools select{background:#181722;color:#e9e1f8;border-color:#615675;min-height:44px}
