/* Restrained workspace: neutral surfaces, one accent, readable typography. */
.playback-options{display:grid;gap:18px;margin-top:20px;border:1px solid #e7eceb;border-radius:8px;padding:17px;background:#fcfdfd}
.playback-option .choice{font-size:12px;min-width:0}
.custom-repeat-row{display:flex;align-items:center;gap:10px;margin-top:10px;color:#697982;font-size:12px}
.custom-repeat-row input{width:90px;font-size:14px}
.custom-repeat-row small{font-size:10px;color:#98a4ab;margin-left:10px}
.playback-option .field-help{margin-bottom:0}
.target-panel,.delivery-panel{margin-bottom:20px;padding:20px 24px}
.target-heading,.delivery-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.target-heading p{font-size:12px;color:var(--muted);margin:8px 0 16px;line-height:1.7}
.target-heading h2 span{font-size:11px;font-weight:400;color:var(--muted);margin-left:10px}
.target-actions{display:flex;gap:16px;flex-shrink:0;padding-top:2px}
.target-actions button:disabled{opacity:.35;cursor:default}
.room-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.room-shortcut{display:flex;flex-direction:column;gap:10px;text-align:left;border:1px solid #e4e8ec;border-radius:9px;padding:14px;background:#fff;color:var(--ink);min-width:0;transition:background .15s,border-color .15s}
.room-shortcut:hover{border-color:#9cc3ba;background:#fafdfc}
.room-shortcut.selected{background:#f0f7f5;border-color:#68a296;box-shadow:0 0 0 1px #68a296}
.shortcut-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.shortcut-symbol{color:#769289;display:flex}.shortcut-symbol .icon{width:19px;height:19px}
.shortcut-check{width:19px;height:19px;border:1px solid #cdd7d3;border-radius:5px;background:#fff;display:grid;place-items:center}
.selected .shortcut-check{background:var(--green);border-color:var(--green);color:#fff}.shortcut-check .icon{width:13px;height:13px}
.room-shortcut strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.shortcut-status{display:flex;gap:6px;align-items:center;font-size:11px;color:#8a929b}
.shortcut-status i,.device-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;background:#b7bec5;border-radius:50%}
.shortcut-status.online{color:var(--green)}.shortcut-status.online i,.device-dot.online{background:var(--green)}
.compose-target{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;line-height:1.7}
.compose-target strong{font-weight:550}.send-divider{opacity:.4;margin:0 4px}
.send-button:disabled{opacity:.5;cursor:default}
.delivery-heading{list-style:none;cursor:pointer;align-items:center}.delivery-heading::-webkit-details-marker{display:none}.delivery-heading .panel-title{flex-wrap:wrap;gap:10px}.delivery-heading>.icon{width:16px;height:16px;color:var(--muted);flex-shrink:0}.delivery-panel[open] .delivery-heading>.icon{transform:rotate(180deg)}
.delivery-excerpt{font-size:12px;color:var(--muted);line-height:1.7;margin:9px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.delivery-counts{display:flex;flex-wrap:wrap;gap:10px 24px;margin:18px 0;font-size:11px;color:var(--muted)}
.delivery-counts b{font-size:19px;color:var(--ink);font-weight:600;margin-right:4px}
.delivery-rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.delivery-room{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:7px;background:#fff;text-align:left;color:var(--ink);min-width:0}
.delivery-room:hover{background:#f8faf9;border-color:#bfd4cd}
.delivery-room-name{display:flex;align-items:center;gap:7px;min-width:0;flex:1}.delivery-room-name strong{font-size:12px;font-weight:550;overflow-wrap:anywhere}
.delivery-room-info{display:flex;flex-direction:column;gap:5px;text-align:right;font-size:11px;max-width:60%}
.delivery-room-info small{font-size:10px;color:var(--muted)}.delivery-room>.icon{width:13px;height:13px;color:#9ea7ac;flex-shrink:0}
.delivery-stage.confirmed{color:var(--green)}.delivery-stage.displayed,.delivery-stage.received{color:#4775a5}.delivery-stage.waiting{color:#9a7739}.delivery-stage.expired,.delivery-expired{color:#a16458}
.delivery-note{font-size:10px;color:#929aa2;line-height:1.7;margin:13px 0 0}
.delivery-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.cancel-link{color:#a16458}.cancel-note{padding:10px 13px;background:#f8f2ef;color:#9d6758;font-size:12px;border-radius:7px;margin-bottom:16px;line-height:1.8}
.delivery-stage.cancelled{color:#9d6758}.task-tools{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:10px}.task-tools .text-link{font-size:11px}
.copy-notice{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 20px;background:#f0f7f5;color:var(--green);font-size:12px;border-bottom:1px solid #dcebe5;line-height:1.8}.copy-notice button{flex-shrink:0;font-size:11px}
.mobile-send-bar{display:none}
.arrival-options{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.send-retry-note{margin-top:14px;padding:11px 13px;background:#faf5e9;border:1px solid #eaddbb;border-radius:7px;color:#92733d;font-size:12px;line-height:1.8}
.receipt-sync{padding:12px 23px;margin:0;border-top:1px solid var(--line);font-size:12px;color:#64877a;line-height:1.8}.receipt-sync.pending{color:#a07a40;background:#fcf8ee}
.device-name{min-width:0;overflow-wrap:anywhere}.device-row>.cancel-link{flex-shrink:0;min-height:36px}
.delivery-stage.superseded{color:#85929d}
@media(max-width:760px){
  .mobile-send-bar{position:fixed;left:68px;right:0;bottom:0;z-index:16;display:flex;align-items:center;gap:14px;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid var(--line);box-shadow:0 -3px 18px #26372c08}
  .mobile-target-button{display:flex;flex:1;flex-direction:column;gap:3px;text-align:left;border:0;background:none;padding:0;min-width:0}.mobile-target-button strong{font-size:12px;font-weight:550;overflow-wrap:anywhere}.mobile-target-button span{font-size:10px;color:var(--muted)}
  .mobile-send-bar>.button{padding:11px 17px;font-size:12px;flex-shrink:0}.mobile-send-bar .icon{width:15px;height:15px}
  #page:has(.mobile-send-bar)~.page-footer{padding-bottom:90px}
}
@media(max-width:520px){.mobile-send-bar{left:57px;gap:8px;padding-inline:13px}.mobile-send-bar>.button{font-size:11px;padding-inline:13px}.copy-notice{font-size:11px;padding-inline:18px}}
@media(max-width:520px){.target-panel,.delivery-panel{padding:17px}.target-heading{gap:9px}.target-heading h2 span{display:block;margin:6px 0 0}.target-heading p{font-size:11px;margin-bottom:12px}.target-actions{gap:12px}.target-actions .text-link{font-size:11px}.room-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.room-shortcut{padding:11px;gap:9px}.room-shortcut strong{font-size:12px}.shortcut-status{font-size:10px}.delivery-rooms{grid-template-columns:1fr}.delivery-heading .panel-meta{font-size:9px}.delivery-counts{gap:10px 16px}.delivery-counts b{font-size:17px}.compose-target{font-size:11px}.compose-target .connection-status{font-size:10px}}
:root {
  --bg: #f5f6f8;
  --ink: #242b33;
  --muted: #737c88;
  --line: #e7e9ed;
  --green: #24766b;
  --green-dark: #1c6259;
  --green-light: #eef6f4;
  --radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
body { font-size: 14px; color: var(--ink); }
button, input, select, textarea { font-size: 13px; }
input, select, textarea { border-color: #dfe3e8; border-radius: 7px; padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: #a1a7b0; }
input:focus, select:focus, textarea:focus { border-color: #69a398; box-shadow: 0 0 0 3px #24766b0d; }
.sidebar { width: 208px; padding: 28px 16px 20px; background: #fff; }
.brand { gap: 10px; }
.brand strong { color: #202a32; font-size: 20px; font-weight: 650; letter-spacing: 0; }
.brand small { color: #9299a3; font-size: 11px; letter-spacing: 0; margin-top: 2px; }
.brand-symbol { width: 34px; height: 36px; border-radius: 9px; background: var(--green); }
.brand-symbol .icon { width: 23px; height: 23px; stroke-width: 1.8; }
.brand-dot { display: none; }
.workspace-label { font-size: 11px; color: #9ca3ad; margin: 35px 12px 12px; }
.workspace-label span { display: none; }
nav { gap: 5px; }
.nav-item { padding: 11px 13px; border-radius: 7px; font-size: 13px; color: #68717d; gap: 11px; }
.nav-item:hover { background: #f6f7f9; }
.nav-item.active { color: var(--green); background: #edf5f3; box-shadow: none; font-weight: 600; }
.nav-item.active:after { display: none; }
.nav-item .count { color: #969da7; font-size: 11px; }
.sidebar-bottom { padding-top: 20px; }
.side-tip { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 19px 9px 0; }
.side-tip:after { display: none; }
.side-tip a { font-size: 12px; color: #68717d; font-weight: 400; }
.side-tip a > span:last-child { margin-left: auto; }
.side-tip a .icon { width: 16px; }
.local-label { color: #9ba3ad; margin: 20px 9px 0; font-size: 10px; }
.local-label i { background: #83a89d; }
.workspace { margin-left: 208px; }
.topbar { height: 62px; padding: 0 36px; background: #fff; }
.breadcrumb { font-size: 12px; color: #9199a4; gap: 13px; }
.breadcrumb strong { color: #515c68; }
.topbar-right { color: #66717d; }
.local-pill { background: #f8f9fa; border-color: #e9ebee; color: #8b949e; font-size: 11px; }
.avatar { color: #697b77; background: #f0f4f3; }
#main-content { max-width: 1320px; padding: 31px 36px 22px; }
.page-heading { margin-bottom: 23px; }
.eyebrow, .title-dot { display: none; }
h1, .page-heading h1 { font-size: 25px; letter-spacing: -.4px; font-weight: 650; }
.page-heading p { font-size: 13px; color: #838c97; margin-top: 7px; }
.button { border-radius: 7px; font-size: 12px; padding: 9px 13px; transition: background .15s, border-color .15s; }
.button:hover { transform: none; }
.button-outline { color: #56616e; border-color: #dfe3e8; background: #fff; }
.button-light { color: #818a96; }
.button-soft { background: var(--green-light); color: var(--green); }
.button-small { padding: 6px 10px; font-size: 11px; }
.stats-grid { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 24px; }
.stat-card { background: transparent; border: 0; border-radius: 0; padding: 18px 25px; min-height: 81px; position: relative; }
.stat-card + .stat-card:before { content: ''; width: 1px; height: 34px; background: var(--line); position: absolute; top: 25px; left: 0; }
.stat-icon, .stat-note { display: none; }
.stat-label { font-size: 12px; color: #87909b; }
.stat-value { font-size: 25px; line-height: 1.3; color: #303c47; font-weight: 600; margin-top: 3px; letter-spacing: -.5px; }
.stat-value small { font-size: 11px; color: #a0a7b0; margin-left: 8px; }
.compose-grid { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 22px; }
.panel { border-color: var(--line); border-radius: 11px; box-shadow: none; }
.panel-header { padding: 18px 23px; border-color: #edf0f3; }
.panel-title { font-size: 14px; font-weight: 600; color: #36424c; }
.panel-title .icon { color: #7a8a8e; width: 17px; }
.panel-meta { font-size: 11px; color: #9ba3ad; }
.panel-content { padding: 22px 23px; }
.field-label { font-size: 12px; color: #53606d; font-weight: 500; margin-bottom: 8px; }
.field-label .optional { color: #a0a7b0; font-size: 11px; }
.room-select-row { gap: 12px; }
.room-select-row select { height: 41px; font-size: 13px; }
.connection-status { font-size: 11px; color: #979faa; }
.connection-status.online { color: #3c8a79; }
.connection-status.online i { background: #4d9b85; box-shadow: none; }
.offline-message { color: #9299a3; font-size: 11px; line-height: 1.8; flex-wrap: wrap; gap: 3px; }
.offline-message .icon { width: 13px; height: 13px; }
.offline-message a { color: #708e88; }
.type-switch { width: 100%; background: #f5f6f8; border: 1px solid #eef0f3; border-radius: 8px; padding: 3px; margin: 20px 0; }
.type-switch button { padding: 8px 12px; font-size: 12px; color: #89939e; }
.type-switch button.active { color: #344e4a; box-shadow: 0 1px 4px #1d2e3710; }
.textarea-wrap textarea { height: 155px; font-size: 15px; padding: 14px 14px 30px; border-color: #e0e4e9; line-height: 1.9; }
.char-counter { font-size: 10px; color: #a7aeb7; }
.template-row { margin: 10px 0 22px; gap: 7px; }
.template-row > span { font-size: 11px; color: #9ba3ad; }
.chip { background: #f7f8fa; border-color: #edf0f3; color: #7a8592; font-size: 11px; border-radius: 5px; padding: 3px 8px; }
.chip:hover { background: #edf5f2; border-color: #ceded8; }
.text-link { color: #63877e; font-size: 11px; }
.field-help { font-size: 11px; line-height: 1.8; color: #959eaa; }
.two-col { gap: 16px; }
.choice-group { gap: 7px; }
.choice { border-color: #e0e4e9; padding: 9px 7px; font-size: 11px; color: #929ca7; min-height: 40px; }
.choice.active { color: #3d796d; background: #f1f7f5; border-color: #a4c3ba; }
.options-row { margin-top: 18px; }
.option-title { color: #596571; font-size: 12px; font-weight: 500; }
.option-subtitle { font-size: 11px; color: #a0a7b0; }
.option-title .icon { width: 15px; margin-right: 4px; color: #84958e; }
.toggle { width: 33px; height: 19px; }
.toggle span { background: #d8dee3; }
.advanced-settings { margin-top: 20px; border-top: 1px solid #edf0f3; }
.advanced-settings > summary { cursor: pointer; list-style: none; padding: 16px 0 0; display: flex; align-items: center; justify-content: space-between; color: #727d89; font-size: 12px; }
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary .icon { width: 14px; height: 14px; transition: transform .15s; }
.advanced-settings[open] > summary .icon { transform: rotate(180deg); }
.advanced-body { padding-top: 19px; display: grid; gap: 18px; }
.advanced-body .options-row { margin: 0; }
.advanced-settings .themes { gap: 10px; }
.theme-choice { border-radius: 6px; padding: 3px; }
.theme-choice.active { border-color: #91b5a9; }
.theme-swatch { height: 30px; border: 1px solid #00000006; border-radius: 4px; }
.theme-swatch:after { display: none; }
.theme-choice small { color: #87949d; font-size: 10px; margin-top: 5px; }
.theme-forest { background: #edf4f0; color: #659483; }
.theme-paper { background: #f8f5ed; color: #b0a17b; }
.theme-ocean { background: #eff4f9; color: #849db6; }
.theme-sunset { background: #faf0e9; color: #bda08d; }
.compose-bottom { padding: 17px 23px 18px; border-color: #edf0f3; }
.send-button { padding: 11px; font-size: 13px; box-shadow: none; min-height: 43px; }
.send-footnote { color: #9ba4ae; font-size: 10px; margin-top: 9px; }
.preview-panel { background: #fff; }
.preview-header { padding: 19px 22px; }
.preview-header .panel-title { font-size: 13px; }
.live-label { font-size: 10px; color: #9aa5aa; letter-spacing: 0; }
.live-label i { background: #82ab9f; }
.preview-frame { background: #f8f9fb; border-block: 1px solid #eef0f3; padding: 25px 23px 18px; }
.screen-border { padding: 5px; border-radius: 8px; background: #313d43; box-shadow: none; }
.classroom-screen { aspect-ratio: 16/9; background: #f4f8f6; color: #31443f; border-radius: 3px; padding: 24px; }
.classroom-screen:before, .classroom-screen:after { display: none; }
.classroom-screen.theme-paper { background: #fbf9f3; color: #625b49; }
.classroom-screen.theme-ocean { background: #f2f6fb; color: #415773; }
.classroom-screen.theme-sunset { background: #fbf5f0; color: #71594b; }
.screen-room { font-size: 9px; color: #84958d; opacity: 1; }
.screen-eyebrow, .screen-footer { display: none; }
.screen-badge { font-size: 10px; color: #8d9a95; letter-spacing: 1px; margin-bottom: 14px; opacity: 1; }
.screen-message { font-size: clamp(18px,1.6vw,25px); font-weight: 550; line-height: 1.85; letter-spacing: .5px; }
.screen-message mark { box-shadow: none; background: #dfece3; border-radius: 3px; font-size: 1em; padding: 1px 2px; }
.screen-stand { background: #c6ced2; width: 40px; height: 10px; }
.screen-stand:after { left: -16px; width: 72px; background: #c0c9ce; height: 3px; }
.preview-dimensions { font-size: 10px; color: #9ca5af; margin-top: 15px; }
.preview-summary { font-size: 11px; color: #838e99; padding: 15px 10px; gap: 19px; border-color: #edf0f3; }
.preview-summary .icon { width: 13px; height: 13px; color: #8b9c95; }
.preview-note { margin: 16px 21px; font-size: 11px; color: #9aa3ad; line-height: 1.9; }
.preview-note > .icon { color: #a5afb5; }
.preview-guidance { margin-top: 16px; padding: 0 3px; font-size: 11px; color: #929da7; line-height: 1.9; }
.preview-guidance strong { font-weight: 500; color: #6b7a84; display: block; margin-bottom: 3px; }
.flow-card { display: none; }
.section-heading { margin: 27px 0 13px; }
.section-heading h2 { font-size: 13px; color: #535f6b; font-weight: 600; }
.section-heading h2 .icon { color: #8a9a9f; }
.section-heading span { font-size: 11px; color: #98a3ad; }
.table-wrap { border-color: var(--line); border-radius: 9px; }
th { padding: 13px 19px; font-size: 11px; color: #98a0ab; background: #fafbfc; border-color: var(--line); }
td { padding: 14px 19px; font-size: 12px; color: #7b8591; border-color: #f0f2f5; }
td strong { color: #4f5d67; }
.badge { background: #f2f4f6; color: #8b95a1; border-radius: 4px; font-size: 10px; }
.badge.green { color: #518d7c; background: #eff6f2; }
.badge.blue { color: #7a91ac; background: #f0f4f9; }
.badge.amber { color: #a4916a; background: #faf6ee; }
.empty-state { padding: 28px 20px; }
.empty-state .empty-icon { background: #f6f8f9; color: #b1bdc1; border: 0; width: 34px; height: 34px; }
.empty-state h3 { font-size: 12px; color: #8a959e; font-weight: 400; }
.empty-state p { font-size: 11px; color: #a4acb5; }
.page-footer { margin-top: 26px; font-size: 10px; color: #a9b0b9; }
.tip-strip { background: #f4f7f8; color: #8a99a2; border-color: #e4eaf0; font-size: 12px; border-radius: 8px; }
.room-card { padding: 25px; }
.room-card h3 { font-size: 17px; color: #36464e; }
.pair-code { margin: 23px 0; border-color: var(--line); }
.pair-code span { font-size: 12px; color: #939da8; }
.pair-code strong { color: #47766c; font-size: 27px; font-weight: 500; }
.device-row { font-size: 12px; color: #6e7b85; }
.device-row small { font-size: 10px; color: #a0a8b2; }
.task-card { padding: 20px; }
.task-icon { background: #f3f6f6; color: #889c98; border-radius: 8px; }
.task-info strong { font-size: 13px; color: #4b5a64; }
.task-info p { font-size: 11px; color: #929da6; }
.day-check span { color: #8d99a4; border-color: #e0e5e9; }
.day-check input:checked + span { color: var(--green); background: #eff6f3; border-color: #acc8bc; }
.template-card { padding: 23px; }
.template-card .template-symbol { font-size: 20px; width: 34px; height: 34px; display: grid; place-items: center; background: #f6f8f9; border-radius: 8px; }
.template-card h3 { color: #4b5964; font-size: 14px; }
.template-card p { color: #8e99a3; font-size: 12px; line-height: 1.9; }
.template-card.custom { background: #f8fafb; border-color: #dae2e5; }
.settings-description { font-size: 12px; color: #88959f; }
.settings-item { font-size: 12px; border-color: var(--line); }
.settings-item span { color: #98a3ad; }
.settings-item strong { color: #596873; }
.upload-zone { background: #fafcfc; border-color: #cddbd7; color: #8aa498; border-radius: 8px; padding: 25px; min-height: 170px; }
.upload-zone strong { font-size: 13px; color: #879a93; }
.upload-zone small { font-size: 11px; color: #a3ada8; }
.upload-zone.dragging { background: #f0f7f4; }
.receipt-card { border-color: var(--line); }
.receipt-step { background: #f5f7f9; color: #9ca6af; }
.receipt-step.done { background: #edf5f1; color: #5a8b7c; }
.notice-detail { background: #f7f9fa; color: #56656f; }
dialog { border-color: #e3e8ea; border-radius: 12px; box-shadow: 0 15px 65px #263e4a18; }
dialog::backdrop { background: #25344035; backdrop-filter: blur(2px); }
.modal-heading h2 { color: #43525c; font-size: 17px; }
.guide-step > b { background: #eef5f2; color: #739587; }
.guide-step p { color: #95a0aa; font-size: 12px; }
.connection-banner { left: 208px; }
/* Receiver uses the same neutral visual language. */
.receiver-body { background: #f6f7f9; }
.receiver-header { background: #fff; padding: 23px 38px; border-color: var(--line); }
.receiver-tag { color: #9aa4ad; font-size: 12px; border-color: #e2e6ea; }
.receiver-main { margin-top: 70px; }
.pairing-shell { border-color: #e2e7e9; border-radius: 14px; box-shadow: none; }
.pairing-intro { background: #f1f5f4; padding: 37px 30px; }
.pairing-intro:after { display: none; }
.pairing-intro > .icon { color: #82a094; width: 30px; }
.pairing-intro h1 { color: #415950; font-size: 26px; font-weight: 500; line-height: 1.9; }
.pairing-intro p { color: #91a198; font-size: 12px; }
.pairing-form h2 { color: #374a50; font-size: 21px; }
.pairing-form > p { color: #929da6; font-size: 12px; }
.code-input { font-size: 27px; color: #4c7569; }
.receiver-local-note { font-size: 11px; color: #a0a9b1; }
.ready-symbol { background: #edf4f1; border-color: #e0eae5; border-radius: 18px; color: #739d8d; width: 63px; height: 63px; }
.receiver-ready h1 { font-size: 26px; color: #374a50; }
.receiver-ready > p { font-size: 13px; color: #929fa6; }
.receiver-idle-footer { color: #9ba6ad; font-size: 11px; border-color: var(--line); }
.audio-note { background: #faf7ee; color: #a69773; font-size: 12px; }
.receiver-history { color: #839a91; background: #f0f5f2; font-size: 12px; }
.notice-overlay { background: #f5f8f6; color: #2e453c; }
.notice-overlay.theme-paper { background: #fcfaf4; color: #625944; }
.notice-overlay.theme-ocean { background: #f2f6fb; color: #405573; }
.notice-overlay.theme-sunset { background: #fbf5ef; color: #715744; }
.notice-overlay .board-icon { display: none; }
.notice-overlay .board-topline { color: #81938d; opacity: 1; font-size: 13px; }
.notice-overlay .board-text { font-weight: 550; letter-spacing: 1px; line-height: 1.85; }
.board-text mark { background: #dfebe2; box-shadow: none; border-radius: 4px; padding: 2px 5px; }
.board-confirm { border-color: #d1dfd8; background: #fff; color: #6c8c7e; padding: 12px 24px; border-radius: 8px; font-size: 14px; margin-top: 44px; }
.board-bottomline { color: #9ca9a2; opacity: 1; font-size: 12px; }
.notice-overlay.banner { border-color: #dfe7e3; border-radius: 11px; box-shadow: 0 10px 40px #21362d18; }
.notice-overlay.banner .board-text mark { box-shadow: none; }
@media (min-width: 1500px) {
  #main-content { padding-top: 36px; }
  .compose-grid { grid-template-columns: 1.05fr 1fr; gap: 26px; }
  .screen-message { font-size: 25px; }
}
@media (max-width: 1150px) {
  .sidebar { width: 190px; padding: 26px 14px 20px; }
  .workspace { margin-left: 190px; }
  .topbar { padding-inline: 25px; }
  #main-content { padding: 27px 25px 20px; }
  .compose-grid { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 18px; }
  .panel-content { padding: 20px; }
  .panel-header { padding: 17px 20px; }
  .preview-frame { padding: 21px 17px 17px; }
  .preview-summary { font-size: 10px; gap: 10px; }
  .connection-banner { left: 190px; }
}
@media (max-width: 980px) {
  .sidebar { width: 68px; padding: 24px 11px; }
  .sidebar .brand > span:last-child, .workspace-label, .nav-label, .nav-item .count, .sidebar-bottom { display: none; }
  .sidebar .brand { justify-content: center; margin-bottom: 30px; }
  .nav-item { justify-content: center; padding: 12px; }
  .workspace { margin-left: 68px; }
  .connection-banner { left: 68px; }
  .stat-card { padding: 15px 21px; }
  .stat-card + .stat-card:before { top: 22px; }
}
@media (max-width: 760px) {
  #main-content { padding: 24px 22px; }
  .compose-grid { grid-template-columns: 1fr; }
  .preview-col { display: block; }
  .preview-guidance { display: none; }
  .screen-message { font-size: 23px; }
  .preview-summary { gap: 20px; font-size: 11px; }
  .page-heading h1 { font-size: 24px; }
  .heading-actions .button { font-size: 11px; padding: 8px 10px; }
  .panel-title { font-size: 14px; }
  .field-label { font-size: 12px; }
  .template-row { gap: 6px; }
  .page-footer { font-size: 10px; }
}
@media (max-width: 520px) {
  .sidebar { width: 57px; padding: 22px 7px; }
  .sidebar .brand-symbol { width: 31px; height: 33px; }
  .nav-item { padding: 12px 9px; }
  .nav-item .icon { width: 19px; height: 19px; }
  .workspace { margin-left: 57px; }
  .topbar { height: 57px; padding: 0 17px; }
  .breadcrumb { font-size: 11px; gap: 9px; }
  #main-content { padding: 22px 16px; }
  .page-heading { margin-bottom: 20px; gap: 10px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading p { font-size: 11px; max-width: 200px; line-height: 1.8; }
  .heading-actions .button { font-size: 10px; padding: 7px 9px; }
  .stats-grid { margin-bottom: 20px; }
  .stat-card { padding: 12px; min-height: 76px; }
  .stat-label { font-size: 10px; }
  .stat-value { font-size: 23px; }
  .stat-value small { display: none; }
  .stat-card + .stat-card:before { height: 28px; top: 24px; }
  .panel-header { padding: 16px 18px; }
  .panel-content { padding: 18px; }
  .compose-bottom { padding: 16px 18px; }
  .panel-meta { font-size: 10px; }
  .type-switch { margin: 18px 0; }
  .two-col { gap: 11px; }
  .choice { padding: 9px 5px; font-size: 10px; }
  .template-row .chip { font-size: 10px; }
  .template-row > span { font-size: 10px; }
  .preview-frame { padding: 20px 18px 16px; }
  .classroom-screen { padding: 17px; }
  .screen-message { font-size: 20px; }
  .preview-summary { font-size: 10px; gap: 12px; }
  .connection-banner { left: 57px; }
  .receiver-header { padding: 20px; }
  .receiver-main { margin-top: 35px; }
  .pairing-intro { padding: 24px; }
  .pairing-intro h1 { font-size: 23px; }
  .receiver-ready h1 { font-size: 24px; }
}