/*
 * Vidi application theme. Opted in by app_appearance.py; never loaded by signup.
 * Presentation only: no display, positioning, visibility or media-size resets.
 * Keep borders, focus, selection and error cues visible beyond the soft shadows.
 */
html[data-vidi-appearance="neumorphic"] {
  color-scheme: dark;
  --n-bg: #252730; --n-panel: #292b35; --n-field: #23252d;
  --n-ink: #f6f3f7; --n-muted: #c3bdcc; --n-edge: #51505d;
  --n-pink: #ff8bad; --n-pink-ink: #301321; --n-tint: #432b3b;
  --n-raised: 8px 8px 20px #15161dcc, -5px -5px 15px #383b4677;
  --n-small: 4px 4px 10px #15161daa, -3px -3px 8px #3a3d4766;
  --n-inset: inset 4px 4px 10px #14151b99, inset -3px -3px 8px #3d40494d;
  --n-float: 0 20px 60px #08091088, inset 1px 1px 0 #ffffff0e;
  --v-bg: var(--n-bg); --v-surface: var(--n-panel); --v-sunk: var(--n-field);
  --v-ink: var(--n-ink); --v-ink-2: var(--n-muted); --v-ink-3: #aaa4b3;
  --v-line: #45444f; --v-line-strong: #74717e;
  --v-accent: var(--n-pink); --v-accent-strong: #ffa5bf;
  --v-accent-text: #ffacca; --v-accent-tint: var(--n-tint); --v-focus: #ffafca;
  --v-radius: 14px; --v-shadow: var(--n-raised);
  --v-danger: #ffadab; --v-danger-button: #a9233e; --v-danger-tint: #4b2330;
  --v-ok: #a8d9bd; --v-ok-tint: #263f38; --v-warn: #f6d394;
  --bg: var(--n-bg); --void: var(--n-bg); --well: var(--n-field);
  --panel: var(--n-panel); --panel2: var(--n-panel); --surface: var(--n-panel);
  --raise: var(--n-panel); --raised: var(--n-panel); --sunk: var(--n-field);
  --ink: var(--n-ink); --mut: var(--n-muted); --muted: var(--n-muted); --faint: #aaa4b3;
  --line: var(--n-edge); --line2: #74717e;
  --accent: var(--n-pink); --pink: var(--n-pink); --soft: var(--n-tint);
  --violet: var(--n-pink); --teal: var(--n-pink); --mint: var(--n-pink);
  --live-a: var(--n-pink); --live-b: #e46999;
  --action: var(--n-pink); --action-bg: var(--n-pink);
  --action-ink: var(--n-pink-ink); --action-hover: #ffa5bf;
  --shadow: var(--n-raised); --r: 18px; --rs: 12px;
  --v-font: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}
html[data-vidi-appearance="neumorphic"][data-theme="light"] {
  color-scheme: light;
  --n-bg: #edeef3; --n-panel: #edeef3; --n-field: #e8e9ef;
  --n-ink: #262531; --n-muted: #575263; --n-edge: #bebdc9;
  --n-pink: #b62255; --n-pink-ink: #fff; --n-tint: #f9dbe6;
  --n-raised: 8px 8px 20px #c8c9d4b3, -5px -5px 15px #fff;
  --n-small: 4px 4px 10px #c8c9d4b3, -3px -3px 8px #fff;
  --n-inset: inset 4px 4px 10px #c9cad599, inset -3px -3px 8px #fff;
  --n-float: 0 20px 60px #38334233, inset 1px 1px 0 #fff;
  --v-ink-3: #655e70; --v-line: #c9c7d2; --v-line-strong: #807b8c;
  --v-accent-strong: #991943; --v-accent-text: #991943; --v-focus: #a91e4d;
  --v-danger: #a01932; --v-danger-tint: #ffe0e4;
  --v-ok: #226344; --v-ok-tint: #d9ede2; --v-warn: #754500;
  --faint: #655e70; --line2: #807b8c; --action-hover: #991943;
}
html[data-vidi-appearance] body {
  background-color: var(--n-bg) !important; color: var(--n-ink);
}
/* Page-local variables (Study and Marketing) remain aligned with the shell. */
html[data-vidi-appearance] :is(.study-page,.marketing-studio) {
  --bg: var(--n-bg); --panel: var(--n-panel); --ink: var(--n-ink);
  --muted: var(--n-muted); --mut: var(--n-muted); --line: var(--n-edge);
  --accent: var(--n-pink); --pink: var(--n-pink);
}
/* Navigation bars stay in their existing responsive positions. */
html[data-vidi-appearance] :is(.vidi-global-shell,.classroom-nav,.mkt-workspace-nav) {
  background: var(--n-bg); border-color: var(--n-edge);
  box-shadow: 0 4px 16px #10111622, inset 0 -1px 0 #ffffff05;
}
html[data-vidi-appearance] :is(.vidi-menu-panel,.top-menu-panel,.export-menu-pop,
  .vidi-sheet,.dialog-card,.modal-card,.library-dialog,.mkt-dialog,.sr-dialog) {
  border-radius: 18px !important; border-color: var(--n-edge);
  background-color: var(--n-panel); color: var(--n-ink); box-shadow: var(--n-float) !important;
}
/* Named surface components, not every section/div: avoids nesting shadows. */
html[data-vidi-appearance] :is(.card,.box,.panel,.wizard,.production-group,.motion-settings-column,
  .profile-section,.reference-pane,.motion-advanced,.review-summary,.balance-strip,
  .motion-live,.sr-scene,.ad-review,.mkt-composer,.mkt-more-options,.mkt-result,
  .mkt-product-drawer,.showcase-block,.launch-reference-panel,
  .series-card,.series-video,.episode,.detail,.library-option,
  .pricing-card,.pricing-credit-guide,.pricing-state,.question-paper,.learning-panel,
  .research-card,.paper-card,.tool-card,.home-card,.workspace-card,
  .tool-slide,.paper,.scene,.space-row,.note,.comparison,.explain-options,.import-box,
  .recording-card,.scene-card,.quote-card,.settings-card,.help-card,.stat-card,
  .kpi,.metric,.section,.onboarding-card,.vidi-sheet-balance,.vidi-pack) {
  background-color: var(--n-panel); border-color: var(--n-edge);
  border-radius: 18px !important; box-shadow: var(--n-raised) !important;
}
/* Media tiles: only their frame, never the video/image/canvas itself. */
html[data-vidi-appearance] :is(.creation-style-card,.choice-card,.mkt-template-card,
  .video-card,.vcard,.asset-card,.edit-template-card) {
  border-radius: 16px !important; border-color: var(--n-edge);
  box-shadow: var(--n-small) !important;
}
html[data-vidi-appearance] :is(textarea,select,
  input:not([type]),input[type="text"],input[type="email"],input[type="password"],
  input[type="number"],input[type="url"],input[type="search"],input[type="date"],
  input[type="time"],input[type="datetime-local"]) {
  background-color: var(--n-field) !important; color: var(--n-ink) !important;
  border: 1px solid var(--n-edge); border-radius: 12px !important;
  box-shadow: var(--n-inset) !important;
}
html[data-vidi-appearance] :is(input,textarea)::placeholder {
  color: var(--n-muted); opacity: .85;
}
html[data-vidi-appearance] :is(input[type="checkbox"],input[type="radio"],input[type="range"]) {
  accent-color: var(--n-pink);
}
/* Preserve native checkbox/switch/range geometry and all button event handlers. */
html[data-vidi-appearance] :is(button,.btn,.button,.primary-link,.pricing-action,
  .vidi-create,.vidi-shell-nav>a,.vidi-menu>summary,.mkt-text-button) {
  border-radius: 12px !important;
}
html[data-vidi-appearance] button { box-shadow: var(--n-small); }
html[data-vidi-appearance] :is(.btn,.button,.pricing-action,.vidi-balance,.vidi-queue,
  .vidi-sheet-close,.content-mode,.quality-picker button,.admin-tab,
  .mkt-tabs button,.mkt-output-switch button,.mkt-source-switch button,
  .next-actions button,.learning-panel button,.tool-nav a,.settings-tab,
  .dialog-actions button,.library-footer button,.carousel-arrow) {
  background-color: var(--n-panel); color: var(--n-ink);
  border-color: var(--n-edge); box-shadow: var(--n-small) !important;
}
html[data-vidi-appearance] :is(.btn.primary,.button.primary,.primary-link,
  button.primary,a.primary,.pricing-action.primary,.vidi-create,.vidi-sheet-primary,
  .mkt-generate,.mkt-primary-action,.explain-button,.primary-small,button[type="submit"]) {
  background: var(--n-pink); color: var(--n-pink-ink);
  border-color: var(--n-pink); box-shadow: var(--n-small) !important;
}
/* The workspace's ID selector otherwise leaves white text on pale pink. */
html[data-vidi-appearance] #createBtn {
  background: var(--n-pink); color: var(--n-pink-ink);
  border-color: var(--n-pink); box-shadow: var(--n-small) !important;
}
/* Match the existing selected-state contracts, including dynamically added cards. */
html[data-vidi-appearance] :is(button,[role="tab"],.choice-card,.creation-style-card,
  .series-card,.vidi-pack,.vidi-shell-nav>a,.vidi-menu>summary,.tool-nav a):is(
  .on,.selected,.active,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"]) {
  border-color: var(--n-pink) !important; background-color: var(--n-tint);
  color: var(--n-ink); box-shadow: var(--n-inset), inset 0 0 0 1px var(--n-pink) !important;
}
html[data-vidi-appearance] :is(.btn,.button,.pricing-action,button):disabled {
  box-shadow: none !important; opacity: .5; cursor: not-allowed;
}
html[data-vidi-appearance] :is(.danger,.btn.danger,button.danger) {
  color: var(--v-danger); background-color: var(--v-danger-tint);
  border-color: var(--v-danger);
}
html[data-vidi-appearance] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--v-focus) !important; outline-offset: 3px !important;
}
/* Research's custom workspace surfaces; no changes to PDF/media viewports. */
html[data-vidi-appearance] :is(.home-list,.workspace-panel,.paper-detail,.reader-controls,
  .study-card,.review-card,.note-card,.library-card,.plan-card,.recording-panel) {
  background-color: var(--n-panel); border: 1px solid var(--n-edge);
  border-radius: 18px; box-shadow: var(--n-raised);
}
html[data-vidi-appearance] .board-frame { border-radius: 18px; box-shadow: var(--n-raised); }
html[data-vidi-appearance] .question-paper { box-shadow: var(--n-inset) !important; }
/* Mobile elevation is subtler; avoid heavy shadows in dense lists. */
@media(max-width:850px) {
  html[data-vidi-appearance] {
    --n-raised: 5px 5px 14px #10111644, -3px -3px 9px #ffffff06;
    --n-small: 3px 3px 8px #10111633, -2px -2px 6px #ffffff06;
  }
  html[data-vidi-appearance] .vidi-shell-nav { background: var(--n-bg); }
  html[data-vidi-appearance] .vidi-sheet { border-radius: 20px 20px 0 0 !important; }
}
@media(prefers-contrast:more) {
  html[data-vidi-appearance] { --n-edge: currentColor; --v-line: currentColor; --v-line-strong: currentColor; }
}
@media(forced-colors:active) {
  html[data-vidi-appearance] :is(button,.btn,input,select,textarea,.card,.panel) {
    box-shadow: none !important; border: 1px solid ButtonText;
  }
}