:root{
  --navy:#111D2D;--navy-2:#17283C;--navy-3:#22374F;--page:#EDF2F6;--panel:#FFFFFF;--border:#D9E2EA;
  --text:#172231;--muted:#6D7D8E;--blue:#2D6CF6;--cyan:#2BC6E8;--green:#31C48D;--amber:#F2B84B;--coral:#F15B64;
  --shadow:0 9px 25px rgba(17,29,45,.07);--radius:16px;--radius-sm:10px;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--page)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{height:100vh;display:flex;flex-direction:column;min-width:1180px}.topbar{height:58px;flex:0 0 58px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:18px;padding:0 16px;box-shadow:0 6px 18px rgba(6,14,25,.18);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;min-width:220px}.brand-icon{width:34px;height:34px;border-radius:9px}.brand-name{font-size:16px;font-weight:800;line-height:1}.brand-subtitle{font-size:9px;color:#AEBCCC;margin-top:4px;letter-spacing:.03em}.toolbar{display:flex;align-items:center;gap:6px;flex:1}.tool-button{height:34px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#ECF3FA;border-radius:9px;padding:0 10px;display:flex;gap:6px;align-items:center;font-size:11px;transition:.16s ease}.tool-button:hover{background:rgba(45,108,246,.22);border-color:rgba(89,141,255,.45);transform:translateY(-1px)}.top-status{display:flex;align-items:center;gap:7px;font-size:10px;color:#C6D2DF}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(49,196,141,.12)}.status-dot.error{background:var(--coral);box-shadow:0 0 0 3px rgba(241,91,100,.12)}.version-chip{margin-left:4px;background:rgba(255,255,255,.08);padding:3px 6px;border-radius:7px}
.workspace{flex:1;min-height:0;padding:10px;display:grid;grid-template-columns:minmax(225px,18vw) minmax(640px,1fr) minmax(260px,21vw);gap:10px;overflow:auto;align-items:stretch}.center-workspace{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);gap:10px;align-items:stretch}.right-sidebar{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(320px,1fr) minmax(210px,.62fr);gap:10px;overflow:visible}
.panel{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:190px;min-height:150px;overflow:hidden}.resizable-panel{resize:both;overflow:auto;max-width:100%;max-height:100%}.resizable-panel::after{content:"";position:absolute;right:3px;bottom:3px;width:11px;height:11px;border-right:2px solid #AAB7C4;border-bottom:2px solid #AAB7C4;opacity:.65;pointer-events:none}.panel-header{padding:13px 14px 10px;display:flex;justify-content:space-between;align-items:center;gap:9px}.panel-header h2{margin:2px 0 0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:800}.live-eyebrow{color:var(--coral)}.icon-button{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:#F8FAFC;color:var(--text);font-size:16px;display:grid;place-items:center;transition:.16s}.icon-button:hover{border-color:#AEC5F8;background:#EDF4FF;color:var(--blue);transform:translateY(-1px)}.stage-heading{padding-bottom:8px}.slide-counter{font-size:9px;font-weight:800;color:#6F8193;background:#F1F5F8;border:1px solid #E0E7EC;border-radius:999px;padding:4px 7px}.live-heading-right{display:flex;gap:7px;align-items:center}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 10px 9px}.tab{border:0;background:#F3F6F8;color:var(--muted);border-radius:8px;padding:7px 3px;font-size:10px;font-weight:700;transition:.16s}.tab:hover{background:#E9F0F6}.tab.active{background:var(--navy-2);color:#fff}.search-row{margin:0 10px 9px;position:relative}.search-row input{width:100%;height:35px;border:1px solid var(--border);border-radius:10px;background:#FAFCFD;padding:0 10px 0 31px;outline:none;color:var(--text);font-size:11px}.search-row input:focus,.bible-search-row input:focus,.compact-label select:focus{border-color:#8CB0FB;box-shadow:0 0 0 3px rgba(45,108,246,.1)}.search-icon{position:absolute;left:10px;top:7px;color:#8090A1}.library-list{padding:0 7px 11px;overflow:auto;min-height:90px;max-height:calc(100vh - 180px)}.library-item{border:1px solid transparent;border-radius:11px;padding:8px;margin:3px;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px;transition:.14s}.library-item:hover{background:#F6F9FB;border-color:#E4EBF1}.library-item.selected{background:#EDF4FF;border-color:#B9CFFC}.library-item.bible-result{grid-template-columns:20px 1fr auto;align-items:start}.bible-check{margin-top:4px}.type-icon,.library-thumb{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:11px;overflow:hidden}.library-thumb img,.library-thumb video{width:100%;height:100%;object-fit:cover;background:#111}.type-song{background:#E9F1FF;color:var(--blue)}.type-bible{background:#F1EBFF;color:#7658D6}.type-media{background:#E7FAF3;color:#188D68}.type-presentation{background:#FFF4E1;color:#B87811}.type-custom{background:#FFF0F1;color:#C9424B}.library-copy{min-width:0}.library-item strong{font-size:11px;display:block}.library-item small{font-size:9px;color:var(--muted);display:block;margin-top:2px}.library-copy strong,.library-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bible-result .library-copy small{white-space:normal;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.library-actions{display:flex;gap:3px}.add-mini,.edit-mini,.live-mini{width:25px;height:25px;border-radius:7px;border:1px solid var(--border);background:#fff;font-size:13px}.add-mini{color:var(--blue)}.live-mini{color:#C74650}.edit-mini{color:#637487}.add-mini:hover,.edit-mini:hover,.live-mini:hover{background:#F1F5F9;border-color:#BFCEDB}.delete-media:hover{background:#FFF2F2;color:#BD3D46;border-color:#F4C9CC}.library-loading,.library-message{margin:8px 6px;padding:20px 12px;border:1px dashed #CED9E2;border-radius:12px;background:#F9FBFC;color:var(--muted);text-align:center;font-size:9px;display:flex;flex-direction:column;align-items:center;gap:6px}.library-message strong{font-size:11px;color:#435467}.library-message span{max-width:190px;line-height:1.45}
.bible-workspace{padding:0 10px 8px}.bible-workspace[hidden]{display:none}.kjv-banner{border-radius:10px;background:#F4F0FF;border:1px solid #DED2FF;padding:8px;display:flex;gap:8px;align-items:center;margin-bottom:7px}.kjv-mark{font-size:9px;font-weight:900;color:#fff;background:#7755D7;border-radius:6px;padding:5px}.kjv-banner strong{font-size:10px;display:block}.kjv-banner small{display:block;color:#756E84;font-size:8px;margin-top:1px}.bible-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:7px}.bible-mode{border:1px solid var(--border);background:#F6F8FA;border-radius:8px;padding:6px;font-size:9px;font-weight:800;color:#68798B}.bible-mode.active{background:#ECE6FF;border-color:#D7CAFF;color:#6547C7}.bible-pane{display:grid;gap:7px}.bible-pane[hidden]{display:none}.compact-label{display:flex;flex-direction:column;gap:4px;font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:#748497;font-weight:800}.compact-label select,.bible-search-row input{height:32px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font-size:10px;padding:0 8px;outline:none;text-transform:none;letter-spacing:0}.bible-search-row{display:grid;grid-template-columns:1fr auto;gap:5px}.bible-range-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.bible-selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:7px;padding:6px 7px;border-radius:8px;background:#F5F7FA;border:1px solid #E3E8ED;font-size:8px;color:#667789}.bible-selection-toolbar>div{display:flex;gap:3px}.micro-action{border:1px solid #CCD8E2;background:#fff;border-radius:6px;padding:4px 6px;font-size:8px;color:#3A587A;font-weight:800}.micro-action:hover{border-color:#AFC6F5;color:#245FDF}
.stage-panel{display:flex;flex-direction:column;min-height:360px}.screen-frame{padding:0 12px}.screen{aspect-ratio:16/9;border-radius:0;background:#000;color:#fff;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);min-height:140px}.preview-screen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 3px 11px rgba(12,23,38,.08)}.live-frame .screen{outline:2px solid rgba(241,91,100,.18);outline-offset:0}.empty-stage{width:100%;height:100%;background:linear-gradient(135deg,#13263E,#0A121D);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8EA0B4}.empty-stage strong{color:#D9E4EE;font-size:11px}.empty-stage span:last-child{font-size:8px}.empty-icon{font-size:25px;color:#607388}.slide-content{width:100%;height:100%;position:relative;overflow:hidden;background:#101C2C}.theme-bg{position:absolute;inset:0;background-size:cover;background-position:center}.theme-main-area{position:absolute;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:1.5%;z-index:2}.slide-text{width:100%;white-space:pre-line}.theme-footer-area{position:absolute;display:flex;align-items:center;z-index:3;overflow:hidden}.media-content{position:absolute;inset:0!important;padding:0!important;background:#000!important}.media-image,.media-video{width:100%;height:100%;object-fit:contain;background:#000}.audio-mark{font-size:36px;margin-bottom:8px;opacity:.85}.slide-content audio{max-width:80%;margin-top:10px}.slide-logo{width:24%;max-width:70px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));margin-bottom:8px}.slide-strip{display:flex;gap:6px;padding:0 12px 8px;overflow-x:auto;overflow-y:hidden;min-height:62px;scrollbar-width:thin}.slide-strip:empty{min-height:0;padding-bottom:0}.slide-thumb{flex:0 0 82px;width:82px;aspect-ratio:16/9;border:1px solid var(--border);background:#F4F6F8;border-radius:7px;padding:4px;font-size:7px;color:#5F7182;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;position:relative}.slide-thumb.active{border:2px solid var(--blue);background:#EAF1FF;color:#2452A4;padding:3px}.slide-thumb.text-only{background:#fff}.slide-thumb img,.slide-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}.slide-thumb .mini-slide-visual{position:absolute;inset:0;transform-origin:top left}.controller-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:6px;padding:9px 12px 4px}.live-controller{grid-template-columns:1fr 1fr}.stage-actions{padding:4px 12px 10px}.primary-button,.secondary-button,.control-button,.utility-button{border-radius:9px;padding:8px 10px;font-weight:800;font-size:10px;transition:.15s}.primary-button{border:1px solid var(--blue);background:var(--blue);color:#fff;box-shadow:0 4px 10px rgba(45,108,246,.16)}.primary-button:hover{background:#215FE8;transform:translateY(-1px)}.secondary-button{border:1px solid var(--border);background:#fff;color:#334356}.secondary-button:hover{border-color:#A9C2F8;background:#F5F8FF;color:#245FDF}.control-button{border:1px solid var(--border);background:#F7F9FB;color:#334356;display:flex;justify-content:center;gap:7px;align-items:center}.control-button:hover{background:#EDF4FF;border-color:#B7CBF8;color:#245FDF}.utility-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:4px 12px}.utility-button{border:1px solid var(--border);background:#fff;color:#566779;padding:7px 5px;font-size:9px}.utility-button:hover{background:#F5F8FA}.danger-soft:hover{background:#FFF3F3;border-color:#F6C6C9;color:#C4474E}.live-badge{font-size:8px;font-weight:900;color:#BD3D46;background:#FFF0F1;border:1px solid #FFD2D5;padding:5px 7px;border-radius:999px;display:flex;gap:4px;align-items:center}.live-badge span{width:5px;height:5px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(241,91,100,.12)}.output-state-row{padding:4px 12px 10px;display:flex;align-items:center;justify-content:space-between}.output-state{display:flex;gap:6px;align-items:center;font-size:8px;color:var(--muted)}.output-dot{width:6px;height:6px;border-radius:50%;background:#AEB9C3}.output-dot.connected{background:var(--green)}.micro-button{border:0;background:transparent;color:#74869A;padding:0;font-size:8px;text-decoration:underline;text-underline-offset:2px}.micro-button:hover{color:var(--blue)}.compact-button{padding:7px 8px}.full{width:100%}
.service-panel{display:flex;flex-direction:column;min-height:280px}.service-meta{padding:0 13px 8px;display:flex;align-items:center;gap:6px;font-size:8px;color:var(--muted)}.service-meta>span:first-child{margin-right:auto}.autosave-chip{background:#EDF8F4;color:#2A8064;border-radius:999px;padding:3px 6px}.autosave-chip.pending{background:#FFF5E2;color:#9A6A14}.date-chip{display:flex;align-items:center;gap:4px;background:#F4F7F9;border-radius:999px;padding:2px 5px;color:var(--muted)}.date-chip input{border:0;background:transparent;color:#5A6B7B;font-size:8px;width:96px;padding:2px;outline:0}.service-list{padding:0 7px;overflow:auto;min-height:80px;max-height:calc(100vh - 300px)}.service-item{display:grid;grid-template-columns:4px 27px 1fr auto;gap:7px;align-items:center;margin:3px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:7px 6px 7px 0;transition:.14s}.service-item[draggable=true]{cursor:grab}.service-item.dragging{opacity:.45}.service-item.drag-over{border-color:var(--blue);box-shadow:0 0 0 2px rgba(45,108,246,.12)}.service-item:hover{border-color:#B9C9D8;box-shadow:0 3px 10px rgba(20,36,58,.05)}.service-item.active{background:#EDF4FF;border-color:#AFC7F9}.service-accent{width:4px;height:34px;border-radius:0 3px 3px 0}.service-item strong{font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-item small{font-size:8px;color:var(--muted)}.service-actions{display:flex;gap:2px}.service-action{border:0;background:transparent;color:#7A8A99;width:21px;height:21px;border-radius:6px;font-size:10px}.service-action:hover{background:#E9EEF3;color:#22354A}.service-empty{flex:1;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:18px}.service-empty strong{font-size:11px;color:#3E5062;margin-top:6px}.service-empty span{font-size:8px;max-width:185px;line-height:1.45;margin-top:4px}.drop-illustration{width:38px;height:38px;border-radius:11px;background:#EDF4FF;color:var(--blue);display:grid;place-items:center;font-size:20px;border:1px dashed #97B6F4}.service-footer,.theme-panel-footer{margin-top:auto;padding:8px 10px 10px;border-top:1px solid #EDF1F4}
.themes-panel{display:flex;flex-direction:column;min-height:200px}.theme-list{padding:0 8px 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:auto;align-content:start}.theme-card{border:1px solid var(--border);border-radius:10px;background:#fff;padding:6px;text-align:left;transition:.14s;min-width:0}.theme-card:hover{border-color:#AFC5EF;background:#F8FAFD}.theme-card.active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(45,108,246,.09)}.theme-thumb{width:100%;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#101C2C;position:relative;border:1px solid rgba(0,0,0,.06)}.theme-card strong{display:block;font-size:9px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-card small{display:block;font-size:7px;color:var(--muted);margin-top:1px}.theme-mini-main{position:absolute;left:8%;right:8%;top:27%;font-size:7px;line-height:1.1}.theme-mini-footer{position:absolute;left:8%;right:8%;bottom:8%;font-size:4px}
.statusbar{height:24px;flex:0 0 24px;background:#E4EAF0;border-top:1px solid #D3DCE4;display:flex;align-items:center;justify-content:space-between;padding:0 11px;color:#617181;font-size:8px}.status-dot.small{display:inline-block;width:5px;height:5px;margin-right:4px;box-shadow:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(6,14,25,.58);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:30;padding:16px}.modal-backdrop[hidden]{display:none}.modal{width:min(560px,96vw);max-height:94vh;background:#fff;border-radius:18px;border:1px solid #D9E2EA;box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column}.modal-wide{width:min(720px,96vw)}.modal-theme{width:min(1100px,97vw);height:min(820px,94vh)}.modal-header{padding:15px 18px;border-bottom:1px solid #E8EDF2;display:flex;justify-content:space-between;align-items:center;flex:0 0 auto}.modal-header h2{margin:3px 0 0;font-size:16px}.settings-grid,.form-grid{padding:15px 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-grid.one-col{grid-template-columns:1fr}.settings-grid label,.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;color:#435467}.settings-grid input,.settings-grid select,.settings-grid textarea,.form-grid input,.form-grid select,.form-grid textarea,.area-grid input{width:100%;border:1px solid var(--border);border-radius:9px;padding:8px 9px;outline:none;background:#FBFCFD;color:var(--text)}.settings-grid textarea{resize:vertical}.switch-row{grid-column:1/-1;flex-direction:row!important;align-items:center;justify-content:space-between;border:1px solid #E4EAF0;border-radius:10px;padding:10px!important}.switch-row span{display:flex;flex-direction:column;gap:2px}.switch-row small{font-weight:400;color:var(--muted)}.switch-row input{width:auto}.compact-switch{grid-column:auto;padding:7px!important}.modal-note{margin:0 18px 14px;padding:10px;border-radius:10px;background:#F3F7FB;color:#607181;font-size:9px;line-height:1.45}.modal-note a{color:var(--blue);font-weight:800}.modal-actions{padding:11px 18px;border-top:1px solid #E8EDF2;display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto}.action-spacer{flex:1}.full-field{grid-column:1/-1}.field-help{font-size:8px!important;color:var(--muted);font-weight:400!important;line-height:1.45}.split-actions{display:grid;grid-template-columns:auto 1fr auto auto}.danger-button{border:1px solid #F1C6C9;background:#FFF4F4;color:#B63B43;border-radius:9px;padding:8px 10px;font-weight:800;font-size:10px}.danger-button:hover{background:#FFE9EA}.saved-service-list{padding:10px 16px 16px;max-height:60vh;overflow:auto}.saved-service-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 9px;border-bottom:1px solid #EDF1F4}.saved-service-row:last-child{border-bottom:0}.saved-service-row strong{display:block;font-size:11px}.saved-service-row small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.saved-actions{display:flex;gap:5px}.saved-empty{padding:28px;text-align:center;color:var(--muted);font-size:10px}
.theme-editor-shell{display:grid;grid-template-columns:minmax(430px,1.15fr) minmax(380px,.85fr);min-height:0;flex:1}.theme-editor-controls{overflow:auto;border-right:1px solid #E8EDF2;padding-bottom:15px}.editor-section{border-bottom:1px solid #EDF1F4;padding-bottom:2px}.editor-section h3{margin:13px 18px 0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#526579}.editor-section .form-grid{padding-top:10px}.effect-grid{display:grid;grid-template-columns:1.3fr 60px 70px;gap:7px;padding:0 18px 13px;align-items:center}.effect-grid input{height:34px;border:1px solid var(--border);border-radius:8px;padding:4px;background:#FBFCFD}.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:10px 18px 13px}.area-grid label{font-size:8px;color:#6B7C8D;font-weight:800;display:flex;flex-direction:column;gap:4px}.theme-editor-preview-wrap{padding:20px;background:#F4F6F9;display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:flex-start}.theme-editor-preview{width:100%;aspect-ratio:16/9;background:#101C2C;border-radius:0;overflow:hidden;position:relative;box-shadow:0 12px 30px rgba(17,29,45,.12)}.theme-editor-preview-wrap>small{font-size:8px;color:#718293}.toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%,18px);background:#17283C;color:#fff;padding:9px 12px;border-radius:9px;font-size:9px;opacity:0;pointer-events:none;transition:.2s;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.2)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1320px){.brand-subtitle{display:none}.brand{min-width:150px}.tool-button span{display:none}.workspace{grid-template-columns:225px minmax(620px,1fr) 270px}.date-chip{display:none}.theme-list{grid-template-columns:1fr}}