/*
 * Cross-page light/dark theme contract.
 * Card and OBS branding stay untouched; these rules style application chrome,
 * forms, dialogs and public page surfaces only.
 */
body.dark-mode .global-branding-setting{background:#302b4c;color:#f4f1ff;border-color:#8b6cff}
body.dark-mode .global-branding-setting .toggle-label{color:#f4f1ff}
body.dark-mode .global-branding-setting>small{color:#c7c1d4}

body.dark-mode .software-choice label{background:#292638;color:#f4f1ff;border-color:#5b556b}
body.dark-mode .software-choice label:has(input:checked){background:#302b4c;border-color:#9a7cff;box-shadow:0 0 0 2px rgba(154,124,255,.18)}
body.dark-mode .software-choice small{color:#c7c1d4}
body.dark-mode .software-choice input{accent-color:#9a7cff}

body.dark-mode .onboarding-modal form{
  background:#201e2d;
  color:#f4f1ff;
  border-color:#8b6cff;
  box-shadow:14px 14px 0 #7353ff;
}
body.dark-mode .onboarding-modal form>button:first-child,
body.dark-mode #skipOnboarding,
body.dark-mode #onboardingLater{color:#f4f1ff}
body.dark-mode .onboarding-modal section>p,
body.dark-mode .onboarding-note{color:#c7c1d4}
body.dark-mode .onboarding-progress i{background:#514b60}
body.dark-mode .onboarding-progress i.active{background:#9a7cff}
body.dark-mode .onboarding-theme{
  background:#292638;
  color:#f4f1ff;
  border-color:#474257;
}
body.dark-mode .onboarding-theme.active{
  background:#302b4c;
  border-color:#9a7cff;
  box-shadow:0 0 0 2px rgba(154,124,255,.18);
}
body.dark-mode .onboarding-logo-preview{
  background:#292638;
  color:#c7c1d4;
  border-color:#6a6378;
}
body.dark-mode .onboarding-modal input[type=file]{
  color:#c7c1d4;
  background:#292638;
  border:1px solid #5b556b;
  border-radius:6px;
  padding:8px;
}
body.dark-mode .onboarding-modal input[type=file]::file-selector-button{
  margin-right:10px;
  padding:8px 10px;
  border:1px solid #6a6378;
  border-radius:5px;
  background:#302b4c;
  color:#f4f1ff;
  cursor:pointer;
}
body.dark-mode .onboarding-note{background:#292638;border-left:4px solid #9a7cff}
body.dark-mode .onboarding-success>a{background:#d9ff43;color:#17152d;border-color:#17152d}

body.dark-mode .legal-view{background:#11101b}
body.dark-mode .legal-page{background:#201e2d;color:#f4f1ff;border-color:#474257;box-shadow:10px 10px 0 #7353ff}
body.dark-mode .legal-page p,body.dark-mode .legal-page address{color:#c7c1d4}
body.dark-mode .legal-page a{color:#c8bbff}

body.dark-mode .admin-view{background:#11101b}
body.dark-mode .admin-grid,body.dark-mode .admin-grid aside,body.dark-mode .admin-config,body.dark-mode .admin-user-row,body.dark-mode .admin-stat-cards article{background:#201e2d;color:#f4f1ff;border-color:#474257}
body.dark-mode .admin-login-card,body.dark-mode .admin-grid{box-shadow:10px 10px 0 #7353ff}
body.dark-mode .admin-login-card input,body.dark-mode .admin-config input,body.dark-mode .admin-config textarea,body.dark-mode .admin-config select{background:#292638;color:#f4f1ff;border-color:#5b556b}
body.dark-mode .admin-nav button.active,body.dark-mode .admin-nav button:hover,body.dark-mode .admin-nav a:hover,body.dark-mode .admin-grid li.active{background:#302b4c;color:#c8bbff}
body.dark-mode .admin-breadcrumbs{color:#aaa5bb}
body.dark-mode .admin-breadcrumbs strong{color:#f4f1ff}
body.dark-mode .connection-status{background:#292638;color:#c7c1d4}
body.dark-mode .connection-status.ok{background:#173b2a;color:#8ff0b9}
body.dark-mode .connection-status.error{background:#46232b;color:#ffb0bb}
body.dark-mode .log-entry.error{background:#3b2027}
body.dark-mode .feedback-entry{background:#292638;border-color:#474257}

body.dark-mode .audience-view{background:radial-gradient(circle at 80% 20%,rgba(115,83,255,.2),transparent 28%),#11101b}
body.dark-mode .audience-view>header,body.dark-mode .audience-join{background:#201e2d;color:#f4f1ff;border-color:#5b556b}
body.dark-mode .audience-join{box-shadow:14px 14px 0 #7353ff}
body.dark-mode .audience-join input,body.dark-mode .audience-join .pin-inputs input{background:#292638;color:#f4f1ff;border-color:#5b556b}
body.dark-mode .audience-join .pin-inputs input:not(:placeholder-shown){background:#302b4c;color:#f4f1ff;border-color:#9a7cff}
body.dark-mode .audience-join input::placeholder{color:#918b9f}
body.dark-mode .streamer-identity{background:#302b4c}
body.dark-mode .streamer-identity img{border-color:#5b556b}
body.dark-mode .audience-progress{background:#201e2d;color:#f4f1ff;border-color:#5b556b}
body.dark-mode .feedback-modal form,body.dark-mode .live-help-modal>section{background:#201e2d;color:#f4f1ff;border-color:#8b6cff}
body.dark-mode .feedback-modal select,body.dark-mode .feedback-modal textarea{background:#292638;color:#f4f1ff;border-color:#5b556b}

body.dark-mode input,body.dark-mode textarea,body.dark-mode select{color-scheme:dark}
body:not(.dark-mode) input,body:not(.dark-mode) textarea,body:not(.dark-mode) select{color-scheme:light}

/* Compact editor chrome: keep the actual card visible above the fold. */
@media(min-width:901px){
  body:not(.overlay-mode)>.topbar{position:sticky}
  body:not(.overlay-mode)>.topbar>nav{
    position:absolute;
    left:50%;
    margin:0;
    transform:translateX(-50%);
  }
  #editorView.active .editor-canvas{
    position:sticky;
    top:78px;
    align-self:start;
    box-sizing:border-box;
    height:calc(100vh - 78px);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
}

.app-breadcrumbs{
  width:100%;
  min-height:18px;
  margin:4px 0 0;
  padding:0 5vw;
  gap:5px;
  line-height:1;
}
.app-breadcrumbs a{padding:3px 0}

.overlay-setup{
  min-height:0;
  grid-template-columns:minmax(250px,1fr) minmax(190px,230px) minmax(330px,420px);
  grid-template-rows:repeat(6,minmax(12px,auto));
  gap:6px 10px;
  padding:7px 3.3vw;
}
.overlay-setup-intro{grid-column:1;grid-row:1/7;align-self:center}.overlay-setup h2{margin:1px 0 3px;font-size:15px}.overlay-setup-intro p{margin:0;color:#c8c2dc;font-size:10px}.overlay-setup ol{display:none}
.overlay-setup>div:last-child{min-width:0;grid-template-columns:minmax(210px,420px) auto}
.overlay-url-row{grid-area:url;width:min(36vw,420px);margin-top:3px}
.overlay-url-row input{padding-block:7px}
.overlay-url-row .primary-button{padding:9px 12px}
.overlay-setup>div:last-child>small{display:none}
.post-save-actions{grid-area:actions;margin:0;white-space:nowrap}
.post-save-actions .primary-button{min-height:36px;padding:9px 12px}
#copySavedOverlay,#startSavedCard{
  box-sizing:border-box;
  height:30px;
  min-height:30px;
  padding-block:0;
}
.overlay-setup>.overlay-source-list{display:contents}
.overlay-source-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text text" "copy test";align-items:center;gap:6px 8px;padding:7px 8px;border:1px solid #48415f;border-radius:8px;background:#211e31;color:#f7f5ff}
.overlay-source-row:nth-child(1){grid-column:3;grid-row:1/3}.overlay-source-row:nth-child(2){grid-column:2;grid-row:1/4}.overlay-source-row:nth-child(3){grid-column:2;grid-row:4/7}.overlay-source-row>span{grid-area:text;min-width:0}.source-kind{display:grid!important;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"icon title" "icon detail";column-gap:7px;align-items:center}.source-kind>i{grid-area:icon;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#3b3458;color:#d9ff43;font-style:normal;font-size:12px}.source-kind>b{grid-area:title}.source-kind>small{grid-area:detail}.overlay-source-row b{font-size:10px;line-height:1.1}.overlay-source-row small{margin:0;color:#c8c2dc;font-size:8px;line-height:1.2}.overlay-source-row button{grid-area:copy;display:inline-flex;align-items:center;justify-content:center;justify-self:start;width:auto;min-width:108px;min-height:27px;padding:4px 9px;border-color:#5a526f;background:#302b43;color:#f7f5ff;font-size:8px}.overlay-source-row:first-child button{background:#7353ff;border-color:#8e75ff}.overlay-source-row button .ui-icon{width:12px;height:12px}.overlay-source-row>a{grid-area:test;color:#d9ff43;font-size:8px;font-weight:800;white-space:nowrap}.overlay-primary-secret{grid-column:3;grid-row:3/5;max-width:none;min-height:30px}.overlay-primary-secret input{min-height:30px;padding:5px 42px 5px 11px;border-color:#4f4865;background:#211e31;color:#fff!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;text-overflow:ellipsis}.overlay-primary-secret input.masked{color:transparent!important;caret-color:transparent;user-select:none}.overlay-primary-secret .masked-url-preview{display:flex!important;color:#f7f5ff}.overlay-primary-secret input.revealed+.masked-url-preview{display:none!important}.overlay-primary-secret .masked-url-origin{flex:0 0 auto;color:#f7f5ff;font-weight:800}.overlay-primary-secret .masked-url-secret{min-width:0;overflow:hidden;color:#d8d3e5;filter:blur(5px);opacity:.9}.overlay-source-list>.post-save-actions{grid-column:3;grid-row:5/7;align-self:stretch}.overlay-source-list>.post-save-actions .primary-button{width:auto;min-width:160px;height:100%;min-height:30px;float:right}.community-source-actions .outline-button{border-radius:0}.community-source-actions .outline-button+button{border-left:0;border-radius:0 8px 8px 0}
body.dark-mode .overlay-source-row{background:#26223f;border-color:#554d70;color:#f7f5ff}body.dark-mode .overlay-source-row small{color:#c8c2dc}body.dark-mode .overlay-source-row>a{color:#bcaaff}
body.dark-mode .source-kind>i{background:#3b3458;color:#d9ff43}

/* Browser sources: one deliberate left-to-right toolbar. */
.overlay-setup.browser-source-layout{
  display:grid;
  grid-template-columns:minmax(220px,.48fr) minmax(0,1.52fr);
  grid-template-rows:auto;
  align-items:center;
  gap:12px 22px;
  padding:10px 3.3vw;
}
.browser-source-layout .overlay-setup-intro{
  grid-column:1;
  grid-row:1;
  align-self:center;
}
.browser-source-layout>.overlay-source-list{
  grid-column:2;
  grid-row:1;
  display:grid;
  grid-template-columns:minmax(175px,220px) minmax(175px,220px) minmax(390px,1fr) minmax(145px,175px);
  align-items:stretch;
  gap:10px;
  min-width:0;
}
.browser-source-layout .overlay-source-row,
.browser-source-layout .overlay-source-row:nth-child(1),
.browser-source-layout .overlay-source-row:nth-child(2),
.browser-source-layout .overlay-source-row:nth-child(3){
  grid-column:auto;
  grid-row:auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:7px;
  min-width:0;
  padding:8px 10px;
}
.browser-source-layout .source-kind{min-height:25px}
.browser-source-layout .source-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.browser-source-layout .source-actions>button{
  flex:0 0 auto;
  min-width:112px;
}
.browser-source-layout .primary-source-actions{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:8px;
}
.browser-source-layout .overlay-primary-secret{
  grid-column:auto;
  grid-row:auto;
  width:auto;
  min-width:0;
  min-height:28px;
}
.browser-source-layout .overlay-primary-secret input{height:28px;min-height:28px}
.browser-source-layout .post-save-actions{
  grid-column:auto;
  grid-row:auto;
  display:flex;
  align-items:stretch;
  margin:0;
}
.browser-source-layout .post-save-actions .primary-button{
  width:100%;
  min-width:0;
  height:100%;
  min-height:100%;
  float:none;
}

@media(max-width:1450px) and (min-width:701px){
  .overlay-setup.browser-source-layout{grid-template-columns:minmax(190px,.32fr) minmax(0,1.68fr);gap:10px 14px;padding-inline:2.5vw}
  .browser-source-layout>.overlay-source-list{grid-template-columns:minmax(160px,.75fr) minmax(160px,.75fr) minmax(340px,1.5fr);grid-template-rows:auto auto}
  .browser-source-layout .post-save-actions{grid-column:3;grid-row:2}
  .browser-source-layout .post-save-actions .primary-button{min-height:30px}
}

@media(max-width:1050px) and (min-width:701px){
  .overlay-setup.browser-source-layout{grid-template-columns:1fr;align-items:stretch}
  .browser-source-layout .overlay-setup-intro{grid-column:1;grid-row:auto}
  .browser-source-layout>.overlay-source-list{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .browser-source-layout .primary-source{grid-column:1/3!important}
  .browser-source-layout .post-save-actions{grid-column:1/3;grid-row:auto}
}

.back-button{
  justify-self:start;
  align-self:center;
  display:inline-flex;
  width:auto;
  max-width:max-content;
  padding:8px 10px;
  line-height:1;
}
.editor-canvas-top{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:48px;
  margin:-25px 0 12px;
}
.editor-canvas-top .idea-drawer{
  flex:0 0 210px;
  width:210px;
  margin:0;
}
.editor-canvas-top .idea-drawer.open{
  flex-basis:min(730px,50vw);
  width:min(730px,50vw);
}
.editor-canvas-top .idea-drawer-tab{
  left:0;
  transform:none;
}
.canvas-toolbar{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  max-width:none;
  min-height:48px;
  margin:0;
}
.canvas-toolbar>div{margin:0}
.canvas-save-note{white-space:nowrap}

body.dark-mode .theme-option small{color:#f4f1ff}
body.dark-mode .theme-option.active small{color:#fff}
body.dark-mode .back-button{color:#f4f1ff}
body.dark-mode .back-button:hover,body.dark-mode .back-button:focus-visible{
  background:#302b4c;
  color:#fff;
  outline:2px solid #9a7cff;
  outline-offset:2px;
}

/* The live marker is application chrome and must stay readable on every card brand. */
#allCards .card-preview{position:relative}
#allCards .live-card-overlay{
  position:absolute;
  z-index:6;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:8px;
  padding:18px;
  background:rgba(13,11,30,.72);
  color:#fff;
  text-align:center;
  pointer-events:none;
  backdrop-filter:blur(2px);
}
#allCards .offline-card-button{pointer-events:auto;min-height:34px;padding:8px 12px;border:1px solid #fff;border-radius:7px;background:#fff;color:#5e1730;font:800 10px 'Trebuchet MS';cursor:pointer}
#allCards .offline-card-button:hover,#allCards .offline-card-button:focus-visible{background:#ffe9ec;color:#401020;outline:3px solid #ff8da1;outline-offset:2px}
#allCards .offline-card-button:disabled{cursor:wait;opacity:.65}
#allCards .live-card-overlay strong{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:#17152d;
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  font:900 14px 'Arial Black';
  letter-spacing:1.5px;
}
#allCards .live-card-overlay strong i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#41cf83;
  box-shadow:0 0 0 4px rgba(65,207,131,.2);
}
#allCards .live-card-overlay small{
  max-width:210px;
  color:#fff;
  font:800 11px/1.35 'Trebuchet MS';
  text-shadow:0 2px 5px #000;
}
#allCards .card-tile.is-live .card-preview:focus-visible{
  outline:4px solid #41cf83;
  outline-offset:3px;
}
body.dark-mode #allCards .live-card-overlay{background:rgba(7,6,18,.8)}
body.dark-mode #allCards .live-card-overlay strong{
  background:#201e2d;
  border-color:#f4f1ff;
  color:#fff;
}
body.dark-mode #allCards .offline-card-button{background:#f4f1ff;color:#401020;border-color:#fff}
.live-toolbar .offline-live-button{border-color:#c94b63;color:#8d2940;background:#fff5f7}
.live-toolbar .offline-live-button:hover,.live-toolbar .offline-live-button:focus-visible{background:#ffe2e8;border-color:#8d2940;outline:2px solid #c94b63;outline-offset:2px}
.live-toolbar .offline-live-button:disabled{cursor:wait;opacity:.6}
body.dark-mode .live-toolbar .offline-live-button{background:#3a2028;color:#ffdce4;border-color:#d46c81}
body.dark-mode .live-toolbar .offline-live-button:hover,body.dark-mode .live-toolbar .offline-live-button:focus-visible{background:#512936;color:#fff}
@media(prefers-reduced-motion:no-preference){
  #allCards .live-card-overlay strong i{animation:liveCardPulse 1.8s ease-in-out infinite}
}
@keyframes liveCardPulse{50%{box-shadow:0 0 0 7px rgba(65,207,131,.08)}}

.term-list-setting select{width:100%;margin-top:9px}.term-list-manage{width:100%;margin-top:8px;padding:10px;border:1px solid var(--purple);border-radius:6px;background:#f1edff;color:var(--ink);font:800 10px 'Trebuchet MS';cursor:pointer}.term-list-manage:hover,.term-list-manage:focus-visible{background:#e6dfff;outline:2px solid var(--purple);outline-offset:2px}.edit-grid textarea.term-list-field{cursor:pointer;opacity:.94;background:#e9e4f6}.edit-grid textarea.term-list-field:hover,.edit-grid textarea.term-list-field:focus-visible{background:#ded6f2;outline:3px solid var(--purple);outline-offset:-3px}
.term-list-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:rgba(13,11,30,.76);backdrop-filter:blur(5px)}.term-list-modal[hidden]{display:none}.term-list-modal>section{width:min(980px,100%);max-height:min(820px,92vh);overflow:auto;padding:30px;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--purple)}.term-list-modal>section>header{display:flex;justify-content:space-between;gap:20px}.term-list-modal h2{margin:0;font:800 30px 'Arial Black'}.term-list-modal header p{margin:8px 0;color:var(--muted)}#closeTermLists{align-self:flex-start;border:0;background:transparent;color:inherit;font-size:28px;cursor:pointer}.term-list-layout{display:grid;grid-template-columns:250px 1fr;gap:24px;margin-top:24px}.term-list-layout>aside{padding-right:18px;border-right:1px solid var(--line)}#termListOverview{display:grid;gap:7px;margin-top:15px}#termListOverview>button{display:grid;gap:3px;width:100%;padding:11px;text-align:left;border:1px solid var(--line);border-radius:7px;background:#f8f6fc;color:var(--ink);cursor:pointer}#termListOverview>button.active,#termListOverview>button:hover{border-color:var(--purple);background:#f0ebff}#termListOverview small{color:var(--muted)}#termListForm{display:grid;gap:12px}#termListForm label{display:grid;gap:6px;font:800 9px 'Arial Black';letter-spacing:1px}#termListForm input,#termListForm textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:500 13px 'Trebuchet MS'}.term-list-count{font:800 11px 'Arial Black';color:var(--purple)}.term-list-items{display:grid;gap:6px;max-height:330px;overflow:auto;padding-right:5px}.term-list-items>div{display:grid;grid-template-columns:1fr 38px;gap:6px}.term-list-items button{border:1px solid #d67588;border-radius:6px;background:#fff1f4;color:#84263b;font-size:18px;cursor:pointer}#termListForm>footer{display:flex;justify-content:space-between;gap:12px;margin-top:8px}.term-list-delete{color:#84263b;border-color:#d67588}.term-list-empty{display:grid;place-items:center;min-height:240px;color:var(--muted);text-align:center}
body.dark-mode .term-list-manage{background:#292638;color:#f4f1ff;border-color:#9a7cff}body.dark-mode .edit-grid textarea.term-list-field{background:#292638;color:#f4f1ff}body.dark-mode .edit-grid textarea.term-list-field:hover,body.dark-mode .edit-grid textarea.term-list-field:focus-visible{background:#342e4d}body.dark-mode .term-list-modal>section{background:#201e2d;color:#f4f1ff;border-color:#f4f1ff}body.dark-mode .term-list-layout>aside{border-color:#474257}body.dark-mode #termListOverview>button,body.dark-mode #termListForm input,body.dark-mode #termListForm textarea{background:#292638;color:#f4f1ff;border-color:#5a556b}body.dark-mode #termListOverview>button.active,body.dark-mode #termListOverview>button:hover{background:#342e4d;border-color:#9a7cff}body.dark-mode .term-list-items button{background:#512936;color:#ffdce4;border-color:#d46c81}
#closeTermLists:focus-visible,#termListOverview>button:focus-visible,#termListForm input:focus-visible,#termListForm textarea:focus-visible,.term-list-items button:focus-visible{outline:3px solid var(--purple);outline-offset:2px}.term-list-items button:hover{background:#ffe2e8}.term-list-manage:disabled,#shuffleFields:disabled,#drawTermListFields:disabled,#ideaDrawerToggle:disabled{cursor:not-allowed;opacity:.55}body.dark-mode .term-list-items button:hover{background:#683242}
.term-list-minimum{font:500 10px 'Trebuchet MS';letter-spacing:0;color:var(--muted)}#termListMessage.success{color:#147a43}body.dark-mode #termListMessage.success{color:#65e69a}
.toast[data-type=error]>span{background:#d83b51;color:#fff}.toast #toastAction{margin-left:6px;padding:8px 10px;border:1px solid #fff;border-radius:6px;background:transparent;color:#fff;font:800 9px 'Trebuchet MS';cursor:pointer}.toast #toastAction:hover,.toast #toastAction:focus-visible{background:#fff;color:#17152d;outline:2px solid #d9ff43;outline-offset:2px}.toast #toastAction[hidden]{display:none!important}body.dark-mode .toast[data-type=error]>span{background:#ff6577;color:#17152d}
.term-list-edit-prompt{position:fixed;inset:0;z-index:155;display:grid;place-items:center;padding:20px;background:rgba(13,11,30,.76);backdrop-filter:blur(5px)}.term-list-edit-prompt[hidden]{display:none}.term-list-edit-prompt>section{width:min(520px,100%);padding:30px;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--purple)}.term-list-edit-prompt h2{margin:8px 0 10px;font:800 28px 'Arial Black'}.term-list-edit-prompt p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.term-list-edit-prompt>section>div:last-child{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.term-list-edit-prompt button:focus-visible{outline:3px solid var(--purple);outline-offset:3px}body.dark-mode .term-list-edit-prompt>section{background:#201e2d;color:#f4f1ff;border-color:#f4f1ff}body.dark-mode .term-list-edit-prompt p{color:#d4cfea}body.dark-mode #cancelTermListEdit{background:#292638;color:#f4f1ff;border-color:#5a556b}
@media(max-width:700px){.term-list-modal{padding:0}.term-list-modal>section{max-height:100vh;min-height:100vh;padding:22px;border:0;box-shadow:none}.term-list-layout{grid-template-columns:1fr}.term-list-layout>aside{padding:0 0 16px;border:0;border-bottom:1px solid var(--line)}#termListOverview{grid-template-columns:repeat(2,minmax(0,1fr))}.term-list-modal h2{font-size:24px}.term-list-edit-prompt>section{padding:24px 20px}.term-list-edit-prompt h2{font-size:23px}.term-list-edit-prompt>section>div:last-child{align-items:stretch;flex-direction:column-reverse}.term-list-edit-prompt button{width:100%}}

@media(max-width:1200px) and (min-width:701px){
  .overlay-setup{grid-template-columns:minmax(180px,1fr) minmax(175px,210px) minmax(300px,360px);gap:6px 8px;padding-inline:2.5vw}
}

/* Card branding remains independent from the surrounding app theme. */
.editable-card .edit-grid textarea,
.live-board .play-grid button,
.card-preview .card-preview-grid span,
.card-preview>span{color:var(--card-text,#17152d)!important}
.card-text-color-setting input[type="color"]{
  width:100%;
  min-height:42px;
  padding:4px;
  cursor:pointer;
}

@media(max-width:700px){
  .overlay-setup{
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:8px;
    padding:10px 14px;
  }
  .overlay-setup ol{display:flex;gap:14px}
  .overlay-setup-intro,.overlay-source-row:nth-child(1),.overlay-source-row:nth-child(2),.overlay-source-row:nth-child(3),.overlay-primary-secret,.overlay-source-list>.post-save-actions{grid-column:1;grid-row:auto}
  .overlay-setup.browser-source-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:8px;padding:10px 14px}
  .browser-source-layout .overlay-setup-intro,.browser-source-layout>.overlay-source-list{grid-column:1;grid-row:auto}
  .browser-source-layout>.overlay-source-list{display:grid;grid-template-columns:1fr;gap:8px}
  .browser-source-layout .overlay-source-row,.browser-source-layout .primary-source,.browser-source-layout .post-save-actions{grid-column:1!important;grid-row:auto!important}
  .browser-source-layout .primary-source-actions{grid-template-columns:1fr auto}
  .browser-source-layout .primary-source-actions .overlay-primary-secret{grid-column:1/3}
  .overlay-url-row{width:100%;max-width:none;flex-direction:row}
  .post-save-actions{justify-content:flex-start}
  .editor-canvas-top{display:block;margin-top:-20px}
  .editor-canvas-top .idea-drawer{width:100%;margin:0 0 8px}
  .editor-canvas-top .idea-drawer-tab{left:50%;transform:translateX(-50%)}
  .canvas-toolbar{display:flex;align-items:flex-start;justify-content:space-between;min-height:0}
  .canvas-toolbar>div{margin-left:auto}
}
@media(max-width:520px){
  .canvas-toolbar{align-items:flex-end;flex-direction:column;gap:7px}
  .canvas-toolbar>div{display:flex;flex-wrap:wrap;justify-content:flex-end}
  .canvas-save-note{white-space:normal;text-align:right}
}

/* Final browser-source geometry: one row until the genuine mobile breakpoint. */
@media(min-width:701px){
  .overlay-setup.browser-source-layout{
    display:grid;
    grid-template-columns:minmax(190px,280px) minmax(0,1fr);
    grid-template-rows:auto;
    align-items:stretch;
    gap:12px 18px;
    padding:10px 3.3vw;
  }
  .browser-source-layout .overlay-setup-intro{grid-column:1;grid-row:1;align-self:center}
  .browser-source-layout>.overlay-source-list{
    grid-column:2;
    grid-row:1;
    display:flex;
    flex-flow:row nowrap;
    align-items:stretch;
    gap:8px;
    min-width:0;
  }
  .browser-source-layout .overlay-source-row,
  .browser-source-layout .overlay-source-row:nth-child(1),
  .browser-source-layout .overlay-source-row:nth-child(2),
  .browser-source-layout .overlay-source-row:nth-child(3){grid-column:auto;grid-row:auto}
  .browser-source-layout .event-source{flex:0 1 200px;min-width:145px}
  .browser-source-layout .primary-source{flex:1 1 470px;min-width:280px}
  .browser-source-layout .post-save-actions{
    grid-column:auto;
    grid-row:auto;
    flex:0 0 155px;
    min-width:145px;
  }
  .browser-source-layout .primary-source-actions{grid-template-columns:minmax(170px,1fr) auto auto}
}

/* Browser-source control panel: balanced cards, one typeface and one accent. */
.overlay-setup.browser-source-layout{
  --source-accent:#8b6cff;
  --source-bg:#151321;
  --source-surface:#201d2d;
  --source-surface-hover:#29253a;
  --source-border:#403a50;
  --source-text:#f7f5ff;
  --source-muted:#aaa5b8;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:9px 16px;
  padding:10px 3.3vw 12px;
  background:var(--source-bg);
  color:var(--source-text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.browser-source-layout .overlay-setup-intro{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
}
.browser-source-layout .control-kicker{
  flex:0 0 auto;
  margin:0;
  color:var(--source-accent);
  font-family:inherit;
  font-size:10px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
}
.browser-source-layout .overlay-setup-intro h2{
  margin:0;
  color:var(--source-text);
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:0;
}
.browser-source-layout .overlay-setup-intro p{margin:0;color:var(--source-muted);font-family:inherit;font-size:11px;font-weight:400;line-height:1.35}
.browser-source-layout>.post-save-actions{
  grid-column:2;
  grid-row:1;
  display:block;
  margin:0;
}
.browser-source-layout>.post-save-actions .primary-button{
  width:auto;
  min-width:160px;
  height:34px;
  min-height:34px;
  padding:0 15px;
  border:1px solid var(--source-accent);
  border-radius:7px;
  background:var(--source-accent);
  color:#fff;
  box-shadow:none;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.browser-source-layout>.post-save-actions .primary-button:hover,
.browser-source-layout>.post-save-actions .primary-button:focus-visible{filter:brightness(1.1);transform:none;outline:2px solid #fff;outline-offset:2px}
.browser-source-layout>.overlay-source-list{
  grid-column:1/3;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:10px;
  min-width:0;
}
.browser-source-layout .overlay-source-row,
.browser-source-layout .overlay-source-row:nth-child(1),
.browser-source-layout .overlay-source-row:nth-child(2),
.browser-source-layout .overlay-source-row:nth-child(3){
  grid-column:auto!important;
  grid-row:auto!important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:9px;
  min-width:0;
  min-height:92px;
  padding:10px 12px;
  border:1px solid var(--source-border);
  border-radius:8px;
  background:var(--source-surface);
  color:var(--source-text);
  box-sizing:border-box;
}
.browser-source-layout>.overlay-source-list>article:nth-of-type(1){grid-column:1!important;grid-row:1!important}
.browser-source-layout>.overlay-source-list>article:nth-of-type(2){grid-column:2!important;grid-row:1!important}
.browser-source-layout>.overlay-source-list>article:nth-of-type(3){grid-column:3!important;grid-row:1!important}
.browser-source-layout .source-kind{display:grid!important;grid-template-columns:24px minmax(0,1fr);grid-template-areas:"icon title" "icon detail";gap:2px 8px;min-height:0}
.browser-source-layout .source-kind>i{grid-area:icon;width:24px;height:24px;border-radius:6px;background:#2b2738;color:var(--source-accent);font-family:inherit;font-size:13px;font-weight:600;line-height:24px;text-align:center}
.browser-source-layout .source-kind>b{grid-area:title;color:var(--source-text);font-family:inherit;font-size:13px;font-weight:600;line-height:1.25}
.browser-source-layout .source-kind>small{grid-area:detail;margin:0;color:var(--source-muted);font-family:inherit;font-size:10px;font-weight:400;line-height:1.3}
.browser-source-layout .source-actions,
.browser-source-layout .source-button-row{display:flex;align-items:center;gap:7px;min-width:0}
.browser-source-layout .primary-source-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.browser-source-layout .source-button,
.browser-source-layout .source-actions>a,
.browser-source-layout .source-button-row>a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-sizing:border-box;
  width:auto;
  min-width:0;
  min-height:30px;
  margin:0;
  padding:0 10px;
  border:1px solid var(--source-border);
  border-radius:6px;
  background:#272333;
  color:var(--source-text);
  font-family:inherit;
  font-size:11px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.browser-source-layout .source-button:hover,
.browser-source-layout .source-button:focus-visible,
.browser-source-layout .source-actions>a:hover,
.browser-source-layout .source-actions>a:focus-visible,
.browser-source-layout .source-button-row>a:hover,
.browser-source-layout .source-button-row>a:focus-visible{border-color:var(--source-accent);background:var(--source-surface-hover);color:var(--source-text);outline:2px solid var(--source-accent);outline-offset:1px}
.browser-source-layout .source-button .ui-icon{width:13px;height:13px}
.browser-source-layout .overlay-primary-secret{width:100%;height:30px;min-height:30px}
.browser-source-layout .overlay-primary-secret input{height:30px;min-height:30px;border-color:var(--source-border);border-radius:6px;background:#17141f;font-family:inherit;font-size:11px;font-weight:500;line-height:1}
.browser-source-layout .overlay-primary-secret .reveal-overlay-url{width:32px;background:#272333;color:var(--source-text)}
.browser-source-layout .overlay-primary-secret .masked-url-preview{color:var(--source-text);font-family:inherit;font-size:11px;font-weight:500;line-height:1}
.browser-source-layout .overlay-primary-secret .masked-url-origin{color:var(--source-text);font-weight:500}
.browser-source-layout .source-button-row .source-button{flex:0 0 auto}

@media(max-width:900px) and (min-width:701px){
  .browser-source-layout .overlay-setup-intro{display:grid;gap:2px}
  .browser-source-layout>.overlay-source-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .browser-source-layout .source-actions,.browser-source-layout .source-button-row{align-items:stretch;flex-direction:column}
  .browser-source-layout .source-button,.browser-source-layout .source-actions>a,.browser-source-layout .source-button-row>a{width:100%}
}

/* Keep the board URL and both board actions on one visual level. */
@media(min-width:701px){
  .browser-source-layout .primary-source-actions{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    gap:7px;
    min-width:0;
  }
  .browser-source-layout .primary-source-actions>.overlay-primary-secret{
    flex:1 1 auto;
    width:auto;
    min-width:150px;
  }
  .browser-source-layout .primary-source-actions>.source-button-row{display:contents}
  .browser-source-layout .primary-source-actions>.source-button-row>.source-button,
  .browser-source-layout .primary-source-actions>.source-button-row>a{flex:0 0 auto;width:auto}
}

@media(max-width:700px){
  .overlay-setup.browser-source-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px 14px}
  .browser-source-layout .overlay-setup-intro{grid-column:1;grid-row:1;display:grid;gap:3px}
  .browser-source-layout>.post-save-actions{grid-column:1;grid-row:2}
  .browser-source-layout>.post-save-actions .primary-button{width:100%}
  .browser-source-layout>.overlay-source-list{grid-column:1;grid-row:3;grid-template-columns:1fr;grid-template-rows:auto;grid-auto-flow:row;grid-auto-columns:auto}
  .browser-source-layout>.overlay-source-list>article:nth-of-type(1),.browser-source-layout>.overlay-source-list>article:nth-of-type(2),.browser-source-layout>.overlay-source-list>article:nth-of-type(3){grid-column:1!important;grid-row:auto!important}
  .browser-source-layout .source-actions,.browser-source-layout .source-button-row{align-items:stretch;flex-direction:column}
  .browser-source-layout .source-button,.browser-source-layout .source-actions>a,.browser-source-layout .source-button-row>a{width:100%}
}