:root {
  color-scheme: dark;
  --black: #050607;
  --black-soft: #111317;
  --white: #f7f8fa;
  --paper: #08090b;
  --line: #2b2e34;
  --line-dark: #3c4048;
  --muted: #8c9099;
  --muted-dark: #b3b6bd;
  --error: #ff6678;
  --radius: 8px;
  --vid-cyan: #214d7f;
  --vid-coral: #214d7f;
  --vid-orange: #214d7f;
  --vid-lime: #214d7f;
  --vid-violet: #214d7f;
  --vid-ink: #060708;
  --vid-panel: #101216;
  --vid-line: #2a2d33;
  --graphite-0: #050607;
  --graphite-1: #090a0c;
  --graphite-2: #101216;
  --graphite-3: #17191e;
  --graphite-4: #23262d;
  --graphite-line: rgba(255, 255, 255, .13);
  --graphite-line-strong: rgba(255, 255, 255, .25);
  --graphite-text: #f5f6f8;
  --graphite-muted: #8f939c;
  --graphite-blue: #22538d;
  --graphite-blue-light: #4a78a8;
  --navy-deep: #082049;
  --navy-mid: #22538d;
  --navy-edge: #5c82aa;
  --navy-button-texture: url("./assets/navy-button-texture.avif");
  --graphite-shadow:
    0 22px 55px rgba(0, 0, 0, .48),
    0 7px 20px rgba(82, 87, 97, .1),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  --graphite-bubble:
    inset 0 1px 1px rgba(255, 255, 255, .22),
    inset 0 -5px 10px rgba(0, 0, 0, .35),
    0 8px 20px rgba(0, 0, 0, .42),
    0 2px 7px rgba(105, 110, 120, .16);
  --graphite-neon:
    0 0 0 1px rgba(255, 255, 255, .5),
    0 0 18px rgba(255, 255, 255, .22),
    0 10px 25px rgba(0, 0, 0, .5),
    inset 0 1px 1px rgba(255, 255, 255, .3);
}

html {
  background: var(--graphite-0);
}

body.theme-graphite {
  color: var(--graphite-text);
  background: linear-gradient(180deg, #0c0d10 0%, #050607 48%, #090a0c 100%);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

.theme-graphite,
.theme-graphite button,
.theme-graphite input {
  letter-spacing: 0;
}

.theme-graphite [hidden] {
  display: none !important;
}

.theme-graphite ::selection {
  color: #fff;
  background: rgba(22, 140, 255, .72);
}

.theme-graphite * {
  scrollbar-color: #383c44 #0a0b0d;
}

.theme-graphite button,
.theme-graphite a,
.theme-graphite label,
.theme-graphite input {
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

.theme-graphite button:focus-visible,
.theme-graphite a:focus-visible,
.theme-graphite input:focus-visible,
.theme-graphite label:has(:focus-visible) {
  outline: 2px solid rgba(255, 255, 255, .4);
  outline-offset: 2px;
}

.theme-graphite :is(
  .dashboard-menu-button,
  .sidebar-close,
  .profile-button,
  .icon-button,
  .dark-icon-button,
  .editor-back-button,
  .quick-tiktok-preview-clear,
  .play-button
) {
  color: #d6d8dd;
  border: 1px solid var(--graphite-line);
  background: linear-gradient(145deg, #24272d 0%, #111317 55%, #090a0c 100%);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite :is(
  .dashboard-menu-button,
  .sidebar-close,
  .profile-button,
  .icon-button,
  .dark-icon-button,
  .editor-back-button,
  .quick-tiktok-preview-clear,
  .play-button
):hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
  background: linear-gradient(145deg, #343840 0%, #181b20 58%, #0a0b0d 100%);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 9px rgba(255, 255, 255, .75);
  transform: translateY(-1px);
}

.theme-graphite :is(
  .auth-submit,
  .generate-button,
  .quick-launch,
  .dashboard-new-button,
  .dashboard-register-button,
  .sidebar-auth-actions button:last-child,
  .plan-action:not(.plan-action-current):not(.plan-action-secondary)
) {
  color: #fff;
  border: 1px solid rgba(119, 190, 255, .58);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--graphite-blue-light) 0%, var(--graphite-blue) 48%, #0067ce 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .42),
    inset 0 -6px 12px rgba(0, 48, 105, .42),
    0 10px 24px rgba(0, 0, 0, .44),
    0 4px 16px rgba(22, 140, 255, .22);
}

.theme-graphite :is(
  .auth-submit,
  .generate-button,
  .quick-launch,
  .dashboard-new-button,
  .dashboard-register-button,
  .sidebar-auth-actions button:last-child,
  .plan-action:not(.plan-action-current):not(.plan-action-secondary)
):hover:not(:disabled) {
  color: #fff;
  border-color: #fff;
  background: linear-gradient(180deg, #64b5ff 0%, #258fff 48%, #0872db 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .62),
    0 0 22px rgba(255, 255, 255, .3),
    0 12px 30px rgba(0, 0, 0, .5),
    inset 0 1px 1px rgba(255, 255, 255, .5),
    inset 0 -6px 12px rgba(0, 48, 105, .35);
  text-shadow: 0 0 9px rgba(255, 255, 255, .9);
  transform: translateY(-2px);
}

.theme-graphite :is(
  .dashboard-plans-button,
  .dashboard-login-button,
  .sidebar-auth-actions button:first-child,
  .google-button,
  .auth-back-button,
  .quick-upload,
  .secondary-action,
  .light-action,
  .sidebar-logout,
  .plan-action-current,
  .plan-action-secondary
) {
  color: #e1e3e8;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #24272d 0%, #14161a 52%, #0b0c0f 100%);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite :is(
  .dashboard-plans-button,
  .dashboard-login-button,
  .sidebar-auth-actions button:first-child,
  .google-button,
  .auth-back-button,
  .quick-upload,
  .secondary-action,
  .light-action,
  .sidebar-logout,
  .plan-action-secondary
):hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
  background: linear-gradient(180deg, #343840 0%, #1c1f24 55%, #0c0d10 100%);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 9px rgba(255, 255, 255, .78);
  transform: translateY(-1px);
}

/* Authentication */
.theme-graphite .auth-view {
  color: var(--graphite-text);
  background: var(--graphite-0);
}

.theme-graphite .auth-visual {
  background: #07080a;
  border-right: 1px solid var(--graphite-line);
  box-shadow: 18px 0 50px rgba(0, 0, 0, .38);
}

.theme-graphite .auth-art {
  filter: grayscale(.72) saturate(.4) brightness(.63) contrast(1.18);
}

.theme-graphite .auth-visual-shade {
  background:
    linear-gradient(180deg, rgba(3, 4, 5, .08) 0%, rgba(3, 4, 5, .3) 52%, rgba(3, 4, 5, .94) 100%),
    linear-gradient(90deg, rgba(3, 4, 5, .08), rgba(3, 4, 5, .42));
}

.theme-graphite :is(.auth-brand-mark, .brand-mark) {
  color: #fff;
  border: 1px solid rgba(136, 198, 255, .62);
  background: linear-gradient(145deg, #4cadff 0%, #168cff 48%, #005dbb 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .48),
    inset 0 -5px 9px rgba(0, 46, 99, .42),
    0 8px 20px rgba(0, 0, 0, .48),
    0 0 17px rgba(22, 140, 255, .18);
}

.theme-graphite :is(.auth-brand, .auth-mobile-brand, .brand, .sidebar-brand) {
  color: #fff;
}

.theme-graphite :is(.auth-brand, .auth-mobile-brand, .brand, .sidebar-brand) span span,
.theme-graphite .brand-name span {
  color: #9ca0a9;
}

.theme-graphite .auth-brand:hover,
.theme-graphite .brand:hover,
.theme-graphite .sidebar-brand:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, .65);
}

.theme-graphite .auth-edition,
.theme-graphite .section-kicker,
.theme-graphite .dashboard-kicker,
.theme-graphite .plans-heading > p,
.theme-graphite .dashboard-section-heading > div > span {
  color: var(--graphite-blue-light);
  text-shadow: 0 0 12px rgba(22, 140, 255, .26);
}

.theme-graphite .auth-visual-copy h1 {
  color: #fff;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .7), 0 0 22px rgba(255, 255, 255, .08);
}

.theme-graphite .auth-specs {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(7, 8, 10, .58);
  box-shadow: var(--graphite-shadow);
  backdrop-filter: blur(14px);
}

.theme-graphite .auth-specs span {
  color: #8e929a;
}

.theme-graphite .auth-specs strong {
  color: #fff;
}

.theme-graphite .auth-panel {
  color: var(--graphite-text);
  background: linear-gradient(145deg, #14161a 0%, #090a0c 42%, #050607 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .05);
}

.theme-graphite .auth-heading p {
  color: var(--graphite-blue-light);
}

.theme-graphite .auth-heading h2 {
  color: #fff;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .52);
}

.theme-graphite .auth-heading > span,
.theme-graphite .auth-field label,
.theme-graphite .auth-form-options,
.theme-graphite .terms-control,
.theme-graphite .auth-field small {
  color: var(--graphite-muted);
}

.theme-graphite .auth-tabs {
  padding: 4px;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: #08090b;
  box-shadow: inset 0 2px 9px rgba(0, 0, 0, .56), 0 7px 18px rgba(0, 0, 0, .24);
}

.theme-graphite .auth-tab {
  color: #777b84;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.theme-graphite .auth-tab:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .72);
}

.theme-graphite .auth-tab.active {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, #2d3037 0%, #17191e 55%, #0f1114 100%);
  box-shadow: var(--graphite-bubble);
  text-shadow: 0 0 7px rgba(255, 255, 255, .3);
}

.theme-graphite .auth-input {
  color: #aeb1b8;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #17191e 0%, #0d0f12 100%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .42), 0 7px 17px rgba(0, 0, 0, .22);
}

.theme-graphite .auth-input:focus-within {
  color: #fff;
  border-color: rgba(72, 167, 255, .88);
  box-shadow:
    0 0 0 2px rgba(22, 140, 255, .14),
    0 0 17px rgba(22, 140, 255, .12),
    inset 0 2px 8px rgba(0, 0, 0, .45);
}

.theme-graphite .auth-input input {
  color: #fff;
  background: transparent;
}

.theme-graphite .auth-input input::placeholder {
  color: #666a72;
}

.theme-graphite .text-action,
.theme-graphite .password-toggle {
  color: #a7aab1;
}

.theme-graphite .text-action:hover,
.theme-graphite .password-toggle:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .72);
}

.theme-graphite .auth-checkbox,
.theme-graphite .custom-checkbox {
  border-color: var(--graphite-line-strong);
  background: #0a0b0d;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}

.theme-graphite :is(.remember-control, .terms-control, .consent-row) input:checked + :is(.auth-checkbox, .custom-checkbox) {
  color: #fff;
  border-color: var(--graphite-blue-light);
  background: var(--graphite-blue);
  box-shadow: 0 0 13px rgba(22, 140, 255, .24), inset 0 1px 1px rgba(255, 255, 255, .36);
}

.theme-graphite .password-strength span {
  background: #292c32;
}

.theme-graphite .password-strength[data-score="1"] span:nth-child(-n+1),
.theme-graphite .password-strength[data-score="2"] span:nth-child(-n+2),
.theme-graphite .password-strength[data-score="3"] span:nth-child(-n+3),
.theme-graphite .password-strength[data-score="4"] span {
  background: var(--graphite-blue);
}

.theme-graphite .auth-divider::before,
.theme-graphite .auth-divider::after {
  background: var(--graphite-line);
}

.theme-graphite .auth-divider span {
  color: #70747d;
  background: #090a0c;
}

.theme-graphite .google-mark {
  color: #fff;
  border-color: var(--graphite-line-strong);
  background: #191b20;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12);
}

.theme-graphite .firebase-status {
  color: #858992;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: rgba(9, 10, 12, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.theme-graphite .firebase-dot {
  background: var(--graphite-blue);
  box-shadow: 0 0 9px rgba(22, 140, 255, .7);
}

/* Dashboard */
.theme-graphite .dashboard-view {
  --vid-cyan: var(--graphite-blue);
  --vid-coral: var(--graphite-blue);
  --vid-orange: var(--graphite-blue);
  --vid-lime: var(--graphite-blue);
  --vid-violet: var(--graphite-blue);
  color: var(--graphite-text);
  background: linear-gradient(180deg, #0a0b0e 0%, #050607 50%, #090a0c 100%);
}

.theme-graphite .dashboard-sidebar {
  border-color: var(--graphite-line);
  background: linear-gradient(180deg, #101216 0%, #08090b 54%, #050607 100%);
  box-shadow: 18px 0 48px rgba(0, 0, 0, .34), inset -1px 0 0 rgba(255, 255, 255, .03);
}

.theme-graphite .sidebar-brand {
  font-weight: 760;
}

.theme-graphite .sidebar-account {
  border: 1px solid var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #1b1e23 0%, #101216 58%, #090a0c 100%);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .sidebar-avatar,
.theme-graphite .profile-avatar {
  color: #fff;
  border: 1px solid rgba(120, 190, 255, .55);
  background: linear-gradient(145deg, #4aaaff, #168cff 52%, #005dbb);
  box-shadow: var(--graphite-bubble), 0 0 14px rgba(22, 140, 255, .14);
}

.theme-graphite .sidebar-account strong,
.theme-graphite .profile-summary strong {
  color: #fff;
}

.theme-graphite .sidebar-account > div > span,
.theme-graphite .profile-summary > div > span {
  color: #777b84;
}

.theme-graphite .sidebar-plan,
.theme-graphite .plan-badge,
.theme-graphite .project-type {
  color: #dceeff;
  border: 1px solid rgba(72, 167, 255, .42);
  background: rgba(22, 140, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 12px rgba(0, 0, 0, .25);
}

.theme-graphite .sidebar-section-label {
  color: #60646d;
}

.theme-graphite .sidebar-link {
  color: #989ca5;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.theme-graphite .sidebar-link .icon {
  color: #797d86;
}

.theme-graphite .sidebar-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, #25282f 0%, #15171b 60%, #0d0f12 100%);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 8px rgba(255, 255, 255, .72);
  transform: translateX(2px);
}

.theme-graphite .sidebar-link:hover .icon,
.theme-graphite .sidebar-link.active .icon {
  color: var(--graphite-blue-light);
  filter: drop-shadow(0 0 5px rgba(22, 140, 255, .42));
}

.theme-graphite .sidebar-link.active {
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, #2b2e35 0%, #17191e 58%, #0d0f12 100%);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .sidebar-link small {
  color: #fff;
  background: #252830;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 9px rgba(0, 0, 0, .35);
}

.theme-graphite .sidebar-credits {
  color: #cfd1d7;
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #1b1d22, #0d0f12);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .sidebar-credits:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

.theme-graphite .credits-meter {
  background: #24272d;
}

.theme-graphite .credits-meter span {
  background: var(--graphite-blue);
  box-shadow: 0 0 9px rgba(22, 140, 255, .45);
}

.theme-graphite .dashboard-shell {
  background: transparent;
}

.theme-graphite .dashboard-topbar,
.theme-graphite .topbar {
  border-color: var(--graphite-line);
  background: rgba(7, 8, 10, .9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .34), inset 0 -1px 0 rgba(255, 255, 255, .025);
  backdrop-filter: blur(18px);
}

.theme-graphite .dashboard-breadcrumb span {
  color: #62666f;
}

.theme-graphite .dashboard-breadcrumb strong {
  color: #fff;
}

.theme-graphite .dashboard-credit-pill {
  color: #d8dae0;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #24272d, #101216);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .dashboard-credit-pill .icon {
  color: var(--graphite-blue-light);
  filter: drop-shadow(0 0 5px rgba(22, 140, 255, .4));
}

.theme-graphite .dashboard-credit-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 8px rgba(255, 255, 255, .72);
}

.theme-graphite .profile-button {
  border-radius: 50%;
}

.theme-graphite .profile-menu {
  color: #d6d8dd;
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #1c1f24 0%, #0c0e11 72%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .62), 0 7px 18px rgba(80, 84, 94, .11), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.theme-graphite .profile-summary,
.theme-graphite .profile-plan {
  border-color: var(--graphite-line);
  background: linear-gradient(90deg, rgba(22, 140, 255, .08), rgba(255, 255, 255, .035));
}

.theme-graphite .dashboard-profile-wrap .profile-plan {
  border-color: var(--graphite-line);
  background: linear-gradient(90deg, rgba(22, 140, 255, .08), rgba(255, 255, 255, .035));
}

.theme-graphite .profile-plan span {
  color: #777b84;
}

.theme-graphite .profile-plan strong {
  color: var(--graphite-blue-light);
}

.theme-graphite .profile-menu button {
  color: #aeb1b8;
  border-radius: 999px;
}

.theme-graphite .profile-menu button:hover {
  color: #fff;
  background: #272a31;
  box-shadow: 0 0 15px rgba(255, 255, 255, .13);
  text-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

.theme-graphite .dashboard-profile-wrap .profile-menu > button {
  color: #aeb1b8;
  border-top-color: var(--graphite-line);
  background: #0d0f12;
}

.theme-graphite .dashboard-profile-wrap .profile-menu > button:hover {
  color: #fff;
  background: #272a31;
  box-shadow: 0 0 15px rgba(255, 255, 255, .13);
  text-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

.theme-graphite .dashboard-main,
.theme-graphite .plans-main {
  background: transparent;
}

.theme-graphite .dashboard-date {
  color: #7d818a;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: rgba(16, 18, 22, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.theme-graphite .quick-create {
  border-color: rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #08090b;
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .quick-create-media {
  filter: grayscale(.74) saturate(.42) brightness(.62) contrast(1.2);
}

.theme-graphite .quick-create-overlay {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(5, 6, 7, .38) 0%, rgba(7, 8, 10, .58) 56%, rgba(5, 6, 7, .86) 100%),
    linear-gradient(180deg, rgba(5, 6, 7, .18), rgba(5, 6, 7, .8));
}

.theme-graphite .quick-create::after {
  color: rgba(255, 255, 255, .055);
  text-shadow: 0 10px 30px rgba(0, 0, 0, .62);
}

.theme-graphite .quick-create-copy h2,
.theme-graphite .dashboard-section-heading h2,
.theme-graphite .plans-heading h1 {
  color: #fff;
  text-shadow: 0 9px 28px rgba(0, 0, 0, .68), 0 0 18px rgba(255, 255, 255, .05);
}

.theme-graphite .quick-create-copy h2 {
  color: #fffdf5;
  text-shadow:
    0 0 2px rgba(255, 255, 255, .5),
    0 0 7px rgba(255, 255, 255, .24),
    0 0 14px rgba(177, 204, 229, .14),
    0 8px 22px rgba(0, 0, 0, .62);
}

.theme-graphite .quick-composer {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 37, 43, .96), rgba(11, 12, 15, .96));
  box-shadow: var(--graphite-shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.theme-graphite .quick-url input {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: linear-gradient(180deg, #17191e, #0d0f12);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .42);
}

.theme-graphite .quick-url input:focus {
  border-color: rgba(72, 167, 255, .9);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .46), 0 0 0 2px rgba(22, 140, 255, .14), 0 0 16px rgba(22, 140, 255, .12);
}

.theme-graphite .quick-url .icon {
  color: #8b8f98;
}

.theme-graphite .quick-tiktok-preview {
  color: #e9eaed;
  border-color: rgba(255, 255, 255, .19);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(31, 34, 40, .97), rgba(10, 11, 14, .98));
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .quick-tiktok-preview.error {
  border-color: rgba(255, 102, 120, .72);
}

.theme-graphite .quick-tiktok-preview-media {
  background: #050607;
}

.theme-graphite .quick-tiktok-preview-badge {
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, #30333a, #17191e);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .quick-tiktok-preview-copy > span,
.theme-graphite .quick-tiktok-preview-meta {
  color: #858992;
}

.theme-graphite .quick-tiktok-preview-copy strong {
  color: #fff;
}

.theme-graphite .motion-gallery {
  border-color: rgba(255, 255, 255, .11);
}

.theme-graphite .motion-carousel-slide {
  border-color: rgba(255, 255, 255, .15);
  border-radius: 8px;
  background: #090a0c;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .58), 0 7px 18px rgba(80, 84, 94, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.theme-graphite .motion-carousel-slide.is-active {
  border-color: rgba(255, 255, 255, .72);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .24),
    0 0 22px rgba(255, 255, 255, .12),
    0 25px 58px rgba(0, 0, 0, .66);
}

.theme-graphite .motion-carousel-slide:hover {
  border-color: #fff;
  box-shadow: var(--graphite-neon);
}

.theme-graphite .motion-carousel-dots button {
  background: #343840;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 3px 7px rgba(0, 0, 0, .4);
}

.theme-graphite .motion-carousel-dots button.active {
  background: var(--graphite-blue);
  box-shadow: 0 0 12px rgba(22, 140, 255, .54), inset 0 1px 1px rgba(255, 255, 255, .38);
}

.theme-graphite .dashboard-section-heading p {
  color: #737780;
}

.theme-graphite .project-card > span {
  color: #9aa2b0;
}

.theme-graphite .dashboard-tool {
  color: #d7d9de;
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #191b20 0%, #0c0e11 72%);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .dashboard-tool:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
  background: linear-gradient(145deg, #25282e 0%, #111317 74%);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 8px rgba(255, 255, 255, .65);
  transform: translateY(-3px);
}

.theme-graphite .dashboard-tool small {
  color: #747881;
}

.theme-graphite .tool-icon,
.theme-graphite :is(.tool-coral, .tool-cyan, .tool-orange, .tool-lime, .tool-violet) {
  color: #fff;
  border: 1px solid rgba(111, 186, 255, .54);
  background: linear-gradient(145deg, #4aaaff 0%, #168cff 48%, #005dbb 100%);
  box-shadow: var(--graphite-bubble), 0 0 14px rgba(22, 140, 255, .16);
}

.theme-graphite .project-tabs {
  padding: 3px;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: #08090b;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45);
}

.theme-graphite .project-tabs button {
  color: #7e828b;
  border-radius: 999px;
}

.theme-graphite .project-tabs button:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .72);
}

.theme-graphite .project-tabs button.active {
  color: #fff;
  background: linear-gradient(180deg, #30333a, #15171b);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .project-card {
  overflow: hidden;
  color: #fff;
  border: 1px solid var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #17191e, #090a0c);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .project-card > strong,
.theme-graphite .project-card > span:not(.project-thumbnail) {
  width: 100%;
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

.theme-graphite .project-card > strong {
  line-height: 1.35;
}

.theme-graphite .project-card > span:not(.project-thumbnail) {
  min-height: 27px;
  padding-bottom: 12px;
  line-height: 1.4;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.theme-graphite .project-card:hover {
  border-color: rgba(255, 255, 255, .7);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 8px rgba(255, 255, 255, .6);
  transform: translateY(-3px);
}

.theme-graphite .project-thumbnail {
  border-color: rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: #090a0c;
}

.theme-graphite .project-thumbnail::after {
  background: linear-gradient(180deg, transparent 48%, rgba(3, 4, 5, .88));
}

.theme-graphite .project-type {
  background: var(--graphite-blue);
}

.theme-graphite .project-duration {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(5, 6, 7, .8);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .project-empty {
  color: #777b84;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(13, 15, 18, .64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Plans */
.theme-graphite .plans-heading > span,
.theme-graphite .plans-capabilities,
.theme-graphite .plans-footnote {
  color: #888c95;
}

.theme-graphite .billing-switch {
  padding: 4px;
  border-color: var(--graphite-line);
  border-radius: 999px;
  background: #07080a;
  box-shadow: inset 0 2px 9px rgba(0, 0, 0, .56), 0 9px 22px rgba(0, 0, 0, .28);
}

.theme-graphite .billing-switch button {
  color: #858992;
  border-radius: 999px;
  background: transparent;
}

.theme-graphite .billing-switch button:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .72);
}

.theme-graphite .billing-switch button.active {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, #30333a 0%, #17191e 58%, #0d0f12 100%);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .billing-switch small {
  color: #e2f1ff;
  border: 1px solid rgba(72, 167, 255, .35);
  background: rgba(22, 140, 255, .16);
}

.theme-graphite .plans-capabilities span {
  color: #9498a1;
}

.theme-graphite .plans-capabilities .icon {
  color: var(--graphite-blue-light);
  filter: drop-shadow(0 0 5px rgba(22, 140, 255, .35));
}

.theme-graphite .plan-card {
  --plan-accent: var(--graphite-blue);
  color: #e9eaed;
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(150deg, #191b20 0%, #0d0f12 52%, #08090b 100%);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .plan-card::before {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .7) 50%, transparent 100%);
  opacity: .6;
}

.theme-graphite .plan-card-creator {
  --plan-accent: #4bb9ff;
  border-color: rgba(72, 167, 255, .72);
  background: linear-gradient(150deg, rgba(22, 140, 255, .16) 0%, rgba(13, 43, 80, .24) 31%, #08090b 100%);
  box-shadow:
    0 0 0 1px rgba(22, 140, 255, .17),
    0 0 25px rgba(22, 140, 255, .16),
    0 25px 58px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.theme-graphite .plan-card-creator::before {
  height: 2px;
  background: var(--graphite-blue);
  box-shadow: 0 0 13px rgba(22, 140, 255, .55);
  opacity: 1;
}

.theme-graphite .plan-card-featured {
  --plan-accent: #a86cff;
  border-color: rgba(166, 100, 255, .82);
  background: linear-gradient(150deg, rgba(126, 58, 244, .22) 0%, rgba(48, 24, 79, .3) 32%, #09080d 100%);
  box-shadow:
    0 0 0 1px rgba(173, 112, 255, .2),
    0 0 28px rgba(137, 69, 242, .2),
    0 25px 58px rgba(0, 0, 0, .52),
    inset 0 1px 0 rgba(229, 210, 255, .1);
}

.theme-graphite .plan-card-featured::before {
  height: 2px;
  background: #a86cff;
  box-shadow: 0 0 15px rgba(168, 108, 255, .72);
  opacity: 1;
}

.theme-graphite .plan-card-ultra {
  --plan-accent: #e9bd55;
  border-color: rgba(239, 194, 91, .88);
  background: linear-gradient(150deg, rgba(233, 189, 85, .2) 0%, rgba(76, 55, 17, .26) 32%, #0b0a08 100%);
  box-shadow:
    0 0 0 1px rgba(255, 218, 126, .25),
    0 0 28px rgba(233, 181, 64, .22),
    0 25px 58px rgba(0, 0, 0, .52),
    inset 0 1px 0 rgba(255, 240, 190, .11);
}

.theme-graphite .plan-card-ultra::before {
  height: 2px;
  background: #e9bd55;
  box-shadow: 0 0 15px rgba(239, 194, 91, .72);
  opacity: 1;
}

.theme-graphite .plan-card:hover {
  border-color: rgba(255, 255, 255, .68);
  background: linear-gradient(150deg, #22252b 0%, #101216 54%, #08090b 100%);
  box-shadow: var(--graphite-neon);
  transform: translateY(-4px);
}

.theme-graphite .plan-card-creator:hover {
  border-color: #8dd1ff;
  background: linear-gradient(150deg, rgba(30, 151, 255, .24) 0%, rgba(14, 50, 94, .32) 34%, #08090b 100%);
  box-shadow:
    0 0 0 1px rgba(99, 193, 255, .3),
    0 0 34px rgba(22, 140, 255, .3),
    0 27px 62px rgba(0, 0, 0, .54),
    inset 0 1px 0 rgba(220, 242, 255, .12);
}

.theme-graphite .plan-card-featured:hover {
  border-color: #cfadff;
  background: linear-gradient(150deg, rgba(145, 75, 255, .3) 0%, rgba(57, 28, 92, .38) 34%, #09080d 100%);
  box-shadow:
    0 0 0 1px rgba(196, 151, 255, .32),
    0 0 38px rgba(151, 82, 255, .34),
    0 27px 62px rgba(0, 0, 0, .56),
    inset 0 1px 0 rgba(235, 218, 255, .14);
}

.theme-graphite .plan-card-ultra:hover {
  border-color: #ffe09a;
  background: linear-gradient(150deg, rgba(242, 199, 94, .28) 0%, rgba(91, 65, 18, .34) 34%, #0b0a08 100%);
  box-shadow:
    0 0 0 1px rgba(255, 232, 169, .38),
    0 0 38px rgba(238, 186, 66, .34),
    0 27px 62px rgba(0, 0, 0, .56),
    inset 0 1px 0 rgba(255, 244, 207, .15);
}

.theme-graphite .plan-title-row small {
  color: var(--graphite-blue-light);
}

.theme-graphite .plan-card-creator .plan-title-row small {
  color: #78caff;
}

.theme-graphite .plan-card-featured .plan-title-row small {
  color: #cba4ff;
}

.theme-graphite .plan-card-ultra .plan-title-row small {
  color: #f0ca70;
}

.theme-graphite .plan-card-featured .plan-popular-badge {
  color: #dbc2ff;
  border-color: rgba(176, 116, 255, .52);
  background: rgba(127, 57, 226, .16);
  box-shadow: 0 0 14px rgba(151, 80, 255, .2);
}

.theme-graphite .plan-card-featured .credit-icon {
  filter: hue-rotate(68deg) saturate(1.55) brightness(1.08)
    drop-shadow(0 0 8px rgba(174, 105, 255, .62));
}

.theme-graphite .plan-title-row h2,
.theme-graphite .plan-price-row strong,
.theme-graphite .plan-credit-summary strong {
  color: #fff;
  text-shadow: 0 7px 20px rgba(0, 0, 0, .55);
}

.theme-graphite .plan-description,
.theme-graphite .plan-billing-note,
.theme-graphite .plan-credit-summary span {
  color: #80848d;
}

.theme-graphite .plan-price-row span {
  color: #a6a9b0;
}

.theme-graphite .plan-credit-summary {
  margin-right: -8px;
  margin-left: -8px;
  padding-right: 8px;
  padding-left: 8px;
  border-color: var(--graphite-line);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 7px 18px rgba(0, 0, 0, .16);
}

.theme-graphite .plan-credit-summary > .icon,
.theme-graphite .plan-features .icon {
  color: var(--graphite-blue-light);
  filter: drop-shadow(0 0 5px rgba(22, 140, 255, .32));
}

.theme-graphite .plan-action {
  border-radius: 999px;
}

.theme-graphite .plan-action-current,
.theme-graphite .plan-action-current:disabled {
  color: #777b84;
  border-color: var(--graphite-line);
  background: linear-gradient(180deg, #1a1c21, #0d0f12);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .38);
}

.theme-graphite .plan-features li {
  color: #b9bcc3;
}

/* Editor */
.theme-graphite .app-shell {
  color: var(--graphite-text);
  background: var(--graphite-0);
}

.theme-graphite .editor-back-button {
  border-radius: 50%;
}

.theme-graphite .engine-status {
  color: #9a9ea7;
  border-color: var(--graphite-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #1d2025, #0d0f12);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .engine-status span,
.theme-graphite .draft-status span {
  background: var(--graphite-blue);
  box-shadow: 0 0 10px rgba(22, 140, 255, .65);
}

.theme-graphite .workspace {
  color: var(--graphite-text);
  background: linear-gradient(180deg, #090a0c, #050607);
}

.theme-graphite .creator {
  color: var(--graphite-text);
  border-color: var(--graphite-line);
  background: linear-gradient(150deg, #121419 0%, #090a0c 58%, #060708 100%);
  box-shadow: 18px 0 48px rgba(0, 0, 0, .28), inset -1px 0 0 rgba(255, 255, 255, .025);
}

.theme-graphite .creator h1 {
  color: #fff;
  text-shadow: 0 10px 28px rgba(0, 0, 0, .62), 0 0 18px rgba(255, 255, 255, .06);
}

.theme-graphite .draft-status {
  color: #81858e;
}

.theme-graphite .creator form {
  border-color: rgba(255, 255, 255, .2);
}

.theme-graphite .workflow-step {
  border-color: var(--graphite-line);
}

.theme-graphite .workflow-step legend {
  color: #e6e8ec;
}

.theme-graphite .workflow-step legend span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #9da1aa;
  border: 1px solid var(--graphite-line);
  border-radius: 50%;
  background: linear-gradient(145deg, #24272d, #0d0f12);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .workflow-step.complete legend span {
  color: #fff;
  border-color: rgba(72, 167, 255, .62);
  background: linear-gradient(145deg, #4aaaff, #168cff 50%, #005dbb);
  box-shadow: var(--graphite-bubble), 0 0 14px rgba(22, 140, 255, .2);
}

.theme-graphite .upload-zone {
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: linear-gradient(145deg, #191b20 0%, #0c0e11 72%);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .upload-zone:hover,
.theme-graphite .upload-zone.dragging {
  color: #fff;
  border-color: rgba(255, 255, 255, .76);
  background: linear-gradient(145deg, #25282e, #101216);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 8px rgba(255, 255, 255, .55);
  transform: translateY(-1px);
}

.theme-graphite .upload-icon {
  color: #fff;
  border: 1px solid rgba(116, 188, 255, .58);
  background: linear-gradient(145deg, #4aaaff, #168cff 50%, #005dbb);
  box-shadow: var(--graphite-bubble), 0 0 15px rgba(22, 140, 255, .17);
}

.theme-graphite .upload-copy small,
.theme-graphite .field-message,
.theme-graphite .range-labels,
.theme-graphite .setting-label,
.theme-graphite .setting-heading output {
  color: #82868f;
}

.theme-graphite .upload-action {
  color: #e2e4e8;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #272a31, #111317);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .portrait-file {
  color: #e8e9ed;
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #1a1c21, #0d0f12);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .portrait-file img {
  border-color: rgba(255, 255, 255, .14);
  background: #07080a;
}

.theme-graphite .file-copy span {
  color: #7d818a;
}

.theme-graphite .file-ready,
.theme-graphite .input-status {
  color: #fff;
  background: var(--graphite-blue);
  box-shadow: 0 0 12px rgba(22, 140, 255, .35), inset 0 1px 1px rgba(255, 255, 255, .35);
}

.theme-graphite .tiktok-preview {
  color: #e8e9ed;
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #191b20, #0b0d10);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .tiktok-preview.error {
  border-color: rgba(255, 102, 120, .72);
}

.theme-graphite .tiktok-preview-media {
  background: #050607;
}

.theme-graphite .tiktok-preview-badge {
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, #2e3138, #111317);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .tiktok-preview-copy {
  border-top: 1px solid var(--graphite-line);
  background: rgba(11, 13, 16, .72);
}

.theme-graphite .tiktok-preview-header,
.theme-graphite .tiktok-preview p {
  color: #81858e;
}

.theme-graphite .tiktok-preview strong {
  color: #fff;
}

.theme-graphite .tiktok-preview-play {
  color: #fff;
  border-color: rgba(255, 255, 255, .58);
  background: linear-gradient(145deg, #30333a, #0c0e11);
  box-shadow: var(--graphite-bubble), 0 0 16px rgba(255, 255, 255, .12);
}

.theme-graphite .url-control input {
  color: #fff;
  border-color: var(--graphite-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #17191e, #0c0e11);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .42), 0 7px 16px rgba(0, 0, 0, .2);
}

.theme-graphite .url-control input::placeholder {
  color: #62666f;
}

.theme-graphite .url-control input:focus {
  border-color: rgba(72, 167, 255, .88);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .44), 0 0 0 2px rgba(22, 140, 255, .14), 0 0 16px rgba(22, 140, 255, .12);
}

.theme-graphite .url-control.valid input {
  border-color: rgba(72, 167, 255, .72);
}

.theme-graphite .url-control.invalid input {
  border-color: var(--error);
}

.theme-graphite .url-icon {
  color: #7f838c;
}

.theme-graphite .segmented {
  padding: 4px;
  border-color: var(--graphite-line);
  border-radius: 999px;
  background: #07080a;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .52);
}

.theme-graphite .segmented span {
  color: #777b84;
  border-radius: 999px;
}

.theme-graphite .segmented span:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

.theme-graphite .segmented input:checked + span {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, #30333a, #14161a);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .setting-heading output {
  color: #fff;
}

.theme-graphite :is(
  .character-group textarea,
  .subtitle-group textarea,
  .project-textarea,
  .compact-select-field select,
  .cover-title-field input
) {
  color: #f3f4f6;
  border-color: var(--graphite-line);
  background: linear-gradient(180deg, #17191e, #0b0d10);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .42);
}

.theme-graphite :is(
  .character-group textarea,
  .subtitle-group textarea,
  .project-textarea,
  .cover-title-field input
)::placeholder {
  color: #60646d;
}

.theme-graphite :is(
  .character-group textarea,
  .subtitle-group textarea,
  .project-textarea,
  .compact-select-field select,
  .cover-title-field input
):focus-visible {
  border-color: rgba(255, 255, 255, .35);
  outline: none;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .44);
}

.theme-graphite .compact-select-field select {
  color-scheme: dark;
}

.theme-graphite .compact-select-field select option {
  color: #e8eaee;
  background: #14161a;
}

.theme-graphite .color-swatches input:checked + span {
  outline-color: #fff;
  box-shadow: 0 4px 9px rgba(0, 0, 0, .38);
}

.theme-graphite .project-modal-card {
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #17191e, #08090b 62%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.theme-graphite .project-modal-header,
.theme-graphite .project-tool-section {
  border-color: var(--graphite-line);
}

.theme-graphite .project-modal-media {
  border-color: rgba(255, 255, 255, .16);
  border-radius: 8px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .48);
}

.theme-graphite input[type="range"] {
  background: linear-gradient(to right, var(--graphite-blue) 0%, var(--graphite-blue) var(--range-progress), #2a2d33 var(--range-progress), #2a2d33 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}

.theme-graphite input[type="range"]::-webkit-slider-thumb {
  border-color: #d9ecff;
  background: var(--graphite-blue);
  box-shadow: 0 0 0 1px var(--graphite-blue), 0 0 13px rgba(22, 140, 255, .45), 0 5px 10px rgba(0, 0, 0, .4);
}

.theme-graphite input[type="range"]::-moz-range-thumb {
  border-color: #d9ecff;
  background: var(--graphite-blue);
  box-shadow: 0 0 0 1px var(--graphite-blue), 0 0 13px rgba(22, 140, 255, .45);
}

.theme-graphite .consent-row {
  color: #aeb1b8;
  border-color: var(--graphite-line);
}

.theme-graphite .consent-row:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .45);
}

.theme-graphite .consent-shield {
  color: var(--graphite-blue-light);
  filter: drop-shadow(0 0 5px rgba(22, 140, 255, .35));
}

.theme-graphite .generate-button.generate-button:disabled:not(.processing) {
  color: #686c74;
  border-color: var(--graphite-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #1a1c21, #0d0f12);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .38);
}

.theme-graphite .generate-button.processing:disabled {
  color: #fff;
  border: 1px solid rgba(119, 190, 255, .58);
  background: linear-gradient(180deg, var(--graphite-blue-light) 0%, var(--graphite-blue) 48%, #0067ce 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .42),
    inset 0 -6px 12px rgba(0, 48, 105, .42),
    0 10px 24px rgba(0, 0, 0, .44),
    0 4px 16px rgba(22, 140, 255, .22);
  cursor: pointer;
}

.theme-graphite .estimate span {
  color: #70747d;
}

.theme-graphite .estimate strong {
  color: #fff;
}

.theme-graphite .preview-panel {
  color: var(--graphite-text);
  background: linear-gradient(145deg, #111317 0%, #07080a 58%, #050607 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .03);
}

.theme-graphite .preview-panel::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), var(--graphite-blue), rgba(255, 255, 255, .46), transparent);
  opacity: .55;
}

.theme-graphite .preview-label,
.theme-graphite .privacy-note,
.theme-graphite .output-spec span {
  color: #858992;
}

.theme-graphite .preview-toolbar strong,
.theme-graphite .output-spec strong {
  color: #fff;
}

.theme-graphite .view-tabs {
  padding: 3px;
  border-color: var(--graphite-line);
  border-radius: 999px;
  background: #07080a;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .5);
}

.theme-graphite .view-tabs button {
  color: #7d818a;
  border-radius: 999px;
}

.theme-graphite .view-tabs button:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

.theme-graphite .view-tabs button.active {
  color: #fff;
  background: linear-gradient(180deg, #30333a, #14161a);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .video-frame {
  border-color: rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: #090a0c;
  box-shadow:
    0 30px 72px rgba(0, 0, 0, .62),
    0 8px 22px rgba(91, 96, 107, .13),
    0 0 0 1px rgba(255, 255, 255, .04),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.theme-graphite .preview-image {
  filter: grayscale(.62) saturate(.5) contrast(1.1) brightness(.82);
}

.theme-graphite .sample-tag,
.theme-graphite .result-badge {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: linear-gradient(180deg, #30333a, #111317);
  box-shadow: var(--graphite-bubble);
}

.theme-graphite .result-badge {
  border-color: rgba(72, 167, 255, .55);
  background: linear-gradient(180deg, #48a7ff, #0872db);
}

.theme-graphite .processing-layer {
  background: rgba(5, 6, 7, .9);
  backdrop-filter: blur(12px);
}

.theme-graphite .processing-orbit,
.theme-graphite .processing-orbit::before,
.theme-graphite .processing-orbit::after {
  border-color: rgba(255, 255, 255, .28);
}

.theme-graphite .processing-orbit::after,
.theme-graphite .processing-orbit span:first-child,
.theme-graphite .processing-orbit span:last-child {
  background: var(--graphite-blue);
  box-shadow: 0 0 13px rgba(22, 140, 255, .54);
}

.theme-graphite .processing-content p,
.theme-graphite .processing-content output {
  color: #8b8f98;
}

.theme-graphite .progress-track {
  background: #2a2d33;
}

.theme-graphite .progress-track span,
.theme-graphite .timeline span {
  background: var(--graphite-blue);
  box-shadow: 0 0 10px rgba(22, 140, 255, .48);
}

.theme-graphite .preview-footer {
  border-color: var(--graphite-line);
}

.theme-graphite .privacy-note .icon {
  color: var(--graphite-blue-light);
  filter: drop-shadow(0 0 5px rgba(22, 140, 255, .3));
}

.theme-graphite .tooltip::after {
  color: #fff;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  background: #111317;
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .toast {
  color: #f1f2f4;
  border-color: var(--graphite-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #202329, #0b0d10);
  box-shadow: var(--graphite-shadow);
}

.theme-graphite .toast .icon {
  color: var(--graphite-blue-light);
}

@media (max-width: 980px) {
  .theme-graphite .dashboard-sidebar {
    box-shadow: 28px 0 70px rgba(0, 0, 0, .72), inset -1px 0 0 rgba(255, 255, 255, .05);
  }

  .theme-graphite .dashboard-backdrop {
    background: rgba(2, 3, 4, .78);
    backdrop-filter: blur(8px);
  }
}

@media (max-width: 900px) {
  .theme-graphite .creator {
    border-right: 0;
    border-bottom: 1px solid var(--graphite-line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .025);
  }

  .theme-graphite .preview-panel {
    border-top: 1px solid rgba(255, 255, 255, .04);
  }
}

@media (max-width: 800px) {
  .theme-graphite .auth-visual {
    border-right: 0;
    border-bottom: 1px solid var(--graphite-line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  }

  .theme-graphite .auth-panel {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  }
}

@media (max-width: 620px) {
  .theme-graphite .dashboard-topbar {
    background: rgba(7, 8, 10, .95);
  }

  .theme-graphite .quick-create-overlay {
    background: linear-gradient(180deg, rgba(5, 6, 7, .42) 0%, rgba(5, 6, 7, .62) 45%, rgba(5, 6, 7, .94) 100%);
  }

  .theme-graphite .quick-composer {
    border-radius: 8px;
  }

  .theme-graphite .quick-tiktok-preview-copy strong {
    font-size: 11px;
  }

  .theme-graphite .plans-capabilities span {
    padding: 9px 10px;
    border: 1px solid var(--graphite-line);
    border-radius: 999px;
    background: rgba(18, 20, 24, .64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 7px 17px rgba(0, 0, 0, .2);
  }
}

@media (max-width: 540px) {
  .theme-graphite .auth-panel-inner {
    background: linear-gradient(180deg, rgba(17, 19, 23, .86), rgba(6, 7, 8, .98));
  }

  .theme-graphite .settings-grid {
    gap: 20px;
  }

  .theme-graphite .video-frame {
    box-shadow: 0 24px 54px rgba(0, 0, 0, .62), 0 7px 18px rgba(91, 96, 107, .11);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-graphite button:hover,
  .theme-graphite a:hover,
  .theme-graphite label:hover {
    transform: none !important;
  }
}

/* Navy texture controls */
.theme-graphite :is(
  .auth-submit,
  .quick-launch,
  .dashboard-new-button,
  .dashboard-register-button,
  .sidebar-auth-actions button:last-child,
  .plan-action:not(.plan-action-current):not(.plan-action-secondary)
),
.theme-graphite .generate-button:not(:disabled),
.theme-graphite .generate-button.processing:disabled {
  color: #fff;
  border-color: rgba(104, 145, 190, .78);
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(180deg, rgba(62, 110, 166, .42) 0%, rgba(18, 67, 128, .14) 42%, rgba(2, 12, 29, .6) 100%),
    var(--navy-button-texture);
  background-position: center, center 46%;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .4),
    inset 0 -8px 14px rgba(0, 6, 17, .7),
    0 11px 26px rgba(0, 0, 0, .5),
    0 3px 11px rgba(49, 82, 120, .38);
}

.theme-graphite :is(
  .auth-submit,
  .quick-launch,
  .dashboard-new-button,
  .dashboard-register-button,
  .sidebar-auth-actions button:last-child,
  .plan-action:not(.plan-action-current):not(.plan-action-secondary)
):hover:not(:disabled),
.theme-graphite .generate-button:not(:disabled):hover,
.theme-graphite .generate-button.processing:disabled:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .88);
  background-image:
    linear-gradient(180deg, rgba(111, 149, 191, .48) 0%, rgba(32, 84, 144, .12) 42%, rgba(3, 15, 34, .5) 100%),
    var(--navy-button-texture);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .48),
    0 0 21px rgba(255, 255, 255, .24),
    0 13px 30px rgba(0, 0, 0, .55),
    inset 0 1px 1px rgba(255, 255, 255, .48),
    inset 0 -8px 14px rgba(0, 6, 17, .6);
  text-shadow: 0 0 9px rgba(255, 255, 255, .9);
}

.theme-graphite :is(
  .dashboard-plans-button,
  .dashboard-login-button,
  .sidebar-auth-actions button:first-child,
  .google-button,
  .auth-back-button,
  .quick-upload,
  .secondary-action,
  .light-action,
  .sidebar-logout,
  .plan-action-secondary,
  .dashboard-menu-button,
  .sidebar-close,
  .profile-button,
  .icon-button,
  .dark-icon-button,
  .editor-back-button,
  .quick-tiktok-preview-clear,
  .play-button
) {
  color: #dce2e9;
  border-color: rgba(77, 117, 161, .7);
  background-color: #081a36;
  background-image:
    linear-gradient(180deg, rgba(45, 88, 145, .34) 0%, rgba(6, 28, 59, .4) 54%, rgba(2, 9, 22, .74) 100%),
    var(--navy-button-texture);
  background-position: center, center 54%;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .2),
    inset 0 -6px 12px rgba(0, 5, 15, .68),
    0 8px 20px rgba(0, 0, 0, .46),
    0 2px 8px rgba(48, 64, 84, .24);
}

.theme-graphite :is(
  .dashboard-plans-button,
  .dashboard-login-button,
  .sidebar-auth-actions button:first-child,
  .google-button,
  .auth-back-button,
  .quick-upload,
  .secondary-action,
  .light-action,
  .sidebar-logout,
  .plan-action-secondary,
  .dashboard-menu-button,
  .sidebar-close,
  .profile-button,
  .icon-button,
  .dark-icon-button,
  .editor-back-button,
  .quick-tiktok-preview-clear,
  .play-button
):hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, .78);
  background-image:
    linear-gradient(180deg, rgba(86, 128, 174, .4) 0%, rgba(13, 46, 85, .3) 54%, rgba(2, 11, 25, .64) 100%),
    var(--navy-button-texture);
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 9px rgba(255, 255, 255, .82);
}

.theme-graphite :is(
  .auth-tab.active,
  .sidebar-link.active,
  .billing-switch button.active,
  .project-tabs button.active,
  .view-tabs button.active
),
.theme-graphite .segmented input:checked + span {
  color: #fff;
  border-color: rgba(91, 133, 177, .76);
  background-color: #0b2750;
  background-image:
    linear-gradient(180deg, rgba(64, 109, 161, .38), rgba(3, 17, 37, .6)),
    var(--navy-button-texture);
  background-position: center, center;
  background-size: 100% 100%, cover;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .24),
    inset 0 -5px 10px rgba(0, 5, 15, .58),
    0 7px 17px rgba(0, 0, 0, .4);
}

.theme-graphite :is(
  .auth-brand-mark,
  .brand-mark,
  .sidebar-avatar,
  .profile-avatar,
  .upload-icon,
  .tool-icon,
  .tool-coral,
  .tool-cyan,
  .tool-orange,
  .tool-lime,
  .tool-violet
) {
  border-color: rgba(99, 142, 188, .76);
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(145deg, rgba(67, 112, 164, .42), rgba(4, 20, 43, .58)),
    var(--navy-button-texture);
  background-position: center;
  background-size: 100% 100%, cover;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .34),
    inset 0 -6px 11px rgba(0, 5, 15, .68),
    0 8px 20px rgba(0, 0, 0, .46),
    0 0 14px rgba(35, 61, 91, .24);
}

.theme-graphite .video-frame:hover .play-button,
.theme-graphite .video-frame.paused .play-button,
.theme-graphite .play-button:focus-visible {
  transform: translate(-50%, -50%) scale(1);
}

.theme-graphite .play-button:hover {
  box-shadow: var(--graphite-neon);
  text-shadow: 0 0 9px rgba(255, 255, 255, .82);
  transform: translate(-50%, -50%) scale(1.05);
}

@media (min-width: 1280px) {
  .theme-graphite .motion-gallery {
    margin-right: -24px;
    margin-left: -24px;
  }

  .theme-graphite .motion-carousel {
    --motion-card-width: clamp(220px, 16vw, 238px);
    --motion-card-offset: clamp(270px, 20vw, 330px);
    --motion-card-far-offset: clamp(455px, 35vw, 680px);
  }

  .theme-graphite .motion-carousel-stage {
    height: clamp(400px, 29vw, 430px);
  }
}

@media (min-width: 1600px) {
  .theme-graphite .motion-gallery {
    margin-right: -60px;
    margin-left: -60px;
  }
}

.theme-graphite :is(.auth-brand-mark, .brand-mark) {
  border: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.theme-graphite :is(.auth-brand-mark, .brand-mark) .site-logo {
  filter: drop-shadow(0 0 5px rgba(95, 163, 225, .32));
}

/* El sufijo .ai comparte exactamente el color/degradado de la marca creativa. */
.theme-graphite .mode-studio .mode-studio-brand-name > span {
  color: inherit;
}

/* Navegación de modos: acabado azul marino sutil de la referencia. */
.theme-graphite .mode-switcher-set button {
  color: #c5d1df;
  border-color: rgba(86, 125, 166, .48);
  background: linear-gradient(180deg, rgba(30, 55, 86, .72) 0%, rgba(12, 29, 51, .92) 52%, rgba(5, 15, 31, .98) 100%);
  box-shadow: inset 0 1px 0 rgba(190, 222, 255, .13), inset 0 -8px 16px rgba(0, 5, 15, .28), 0 4px 10px rgba(0, 0, 0, .18);
}

.theme-graphite .mode-switcher-set button:hover {
  color: #f2f8ff;
  border-color: rgba(112, 174, 235, .72);
  background: linear-gradient(180deg, rgba(39, 72, 110, .82) 0%, rgba(16, 39, 68, .95) 52%, rgba(7, 20, 40, 1) 100%);
  box-shadow: inset 0 1px 0 rgba(210, 232, 255, .2), inset 0 0 20px rgba(41, 112, 190, .13), 0 0 12px rgba(42, 113, 188, .12);
}

.theme-graphite .mode-switcher-set button.is-active {
  color: #fff;
  border-color: rgba(116, 184, 248, .78);
  background: linear-gradient(180deg, rgba(42, 83, 128, .9) 0%, rgba(17, 49, 86, .98) 50%, rgba(6, 22, 45, 1) 100%);
  box-shadow: inset 0 1px 0 rgba(224, 240, 255, .25), inset 0 0 24px rgba(45, 123, 211, .16), 0 0 13px rgba(41, 118, 202, .14);
}

/* Los CTA siguen el color de acento de cada plan. Estas reglas viven al final
   para prevalecer sobre la textura azul genérica de los botones principales. */
.theme-graphite .plan-card-creator .plan-action:not(.plan-action-current):not(.plan-action-secondary) {
  color: #fff;
  border-color: rgba(71, 176, 255, .78);
  background: linear-gradient(110deg, #092e5d 0%, #1263a8 52%, #218fd1 100%);
  box-shadow: inset 0 1px 0 rgba(220, 242, 255, .28), 0 9px 22px rgba(16, 100, 166, .3);
}

.theme-graphite .plan-card-featured .plan-action:not(.plan-action-current):not(.plan-action-secondary) {
  color: #fff;
  border-color: rgba(183, 101, 255, .8);
  background: linear-gradient(110deg, #32145f 0%, #682d9f 52%, #a346c1 100%);
  box-shadow: inset 0 1px 0 rgba(245, 221, 255, .27), 0 9px 22px rgba(105, 42, 159, .32);
}

.theme-graphite .plan-card-ultra .plan-action:not(.plan-action-current):not(.plan-action-secondary) {
  color: #281700;
  border-color: #f2c64e;
  background: linear-gradient(110deg, #9e650a 0%, #d89d20 50%, #f3d063 100%);
  box-shadow: inset 0 1px 0 rgba(255, 249, 207, .65), 0 9px 22px rgba(203, 145, 26, .3);
  text-shadow: 0 1px 0 rgba(255, 242, 174, .62);
}

.theme-graphite .plan-card-creator .plan-action:not(.plan-action-current):not(.plan-action-secondary):hover {
  background: linear-gradient(110deg, #0d407a 0%, #1976bd 52%, #35a7df 100%);
}

.theme-graphite .plan-card-featured .plan-action:not(.plan-action-current):not(.plan-action-secondary):hover {
  background: linear-gradient(110deg, #451b7c 0%, #7d3bb7 52%, #b95bd0 100%);
}

.theme-graphite .plan-card-ultra .plan-action:not(.plan-action-current):not(.plan-action-secondary):hover {
  color: #281700;
  border-color: #ffe18a;
  background: linear-gradient(110deg, #b5780f 0%, #edb535 50%, #ffe083 100%);
  text-shadow: 0 1px 0 rgba(255, 247, 198, .75);
}

.theme-graphite .plan-card-ultra .plan-badge.plan-ultra-badge {
  color: #2b1900;
  border-color: #f5cb54;
  background: linear-gradient(115deg, #a96c0b 0%, #e6b738 38%, #ffe58a 57%, #c98b17 100%);
  box-shadow: inset 0 1px 0 rgba(255, 252, 219, .68), 0 0 15px rgba(226, 169, 42, .28);
  text-shadow: 0 1px 0 rgba(255, 243, 178, .65);
}

/* Separador vertical con el mismo lenguaje de neón que el pie de página. */
.theme-graphite .dashboard-sidebar {
  border-right-color: rgba(47, 105, 190, .5);
}

.theme-graphite .dashboard-sidebar::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background-color: rgba(45, 126, 255, .16);
  background-image: linear-gradient(180deg, transparent 0%, #2d7eff 34%, #78b7ff 50%, #2d7eff 66%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 180px;
  background-position: center -180px;
  box-shadow: 0 0 7px rgba(45, 126, 255, .24);
  animation: sidebar-neon-worm 4.8s linear infinite;
  pointer-events: none;
}

.theme-graphite .dashboard-topbar {
  border-bottom-color: rgba(47, 105, 190, .5);
}

.theme-graphite .dashboard-topbar::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background-color: rgba(45, 126, 255, .16);
  background-image: linear-gradient(90deg, transparent 0%, #2d7eff 34%, #78b7ff 50%, #2d7eff 66%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 220px 100%;
  background-position: -220px center;
  box-shadow: 0 0 7px rgba(45, 126, 255, .22);
  animation: topbar-neon-worm 6.5s linear infinite;
  pointer-events: none;
}

@keyframes sidebar-neon-worm {
  from { background-position: center -180px; }
  to { background-position: center calc(100% + 180px); }
}

@keyframes topbar-neon-worm {
  from { background-position: -220px center; }
  to { background-position: calc(100% + 220px) center; }
}

/* En los estudios creativos la separación vive solo bajo los botones. */
.theme-graphite .mode-studio-topbar {
  border-bottom: 0;
}

.theme-graphite .mode-switcher {
  border-bottom-color: rgba(45, 126, 255, .18);
}

.theme-graphite .mode-switcher::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: rgba(45, 126, 255, .16);
  background-image: linear-gradient(90deg, transparent 0%, #2d7eff 34%, #78b7ff 50%, #2d7eff 66%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 220px 100%;
  background-position: -220px center;
  box-shadow: 0 -2px 8px rgba(45, 126, 255, .24);
  animation: topbar-neon-worm 6.5s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-graphite .dashboard-sidebar::after,
  .theme-graphite .dashboard-topbar::after,
  .theme-graphite .mode-switcher::after {
    animation: none;
    background-position: center;
  }
}

/* Reemplazo de personaje vive en .app-shell, no dentro de .mode-studio. */
.theme-graphite .app-shell .mode-studio-brand-name > span {
  color: transparent;
}

/* Navegacion principal y Vidreum Studio: tipografia e iconos blanco perla. */
.theme-graphite :is(#dashboardView, #studioDashboardView) :is(.dashboard-sidebar, .dashboard-topbar) {
  --nav-pearl: #fff8e8;
  --nav-pearl-bright: #fffdf7;
  --nav-pearl-glow: rgba(255, 244, 214, .36);
}

.theme-graphite :is(#dashboardView, #studioDashboardView) :is(.dashboard-sidebar, .dashboard-topbar) :is(button, a, span, strong, small) {
  color: var(--nav-pearl);
  text-shadow: 0 0 7px var(--nav-pearl-glow);
}

.theme-graphite :is(#dashboardView, #studioDashboardView) :is(.dashboard-sidebar, .dashboard-topbar) .icon {
  color: var(--nav-pearl-bright);
  filter: drop-shadow(0 0 5px var(--nav-pearl-glow));
}

.theme-graphite :is(#dashboardView, #studioDashboardView) :is(.dashboard-sidebar, .dashboard-topbar) :is(button, a):is(:hover, :focus-visible) {
  color: var(--nav-pearl-bright);
  text-shadow: 0 0 7px rgba(255, 250, 235, .68), 0 0 15px rgba(255, 239, 196, .28);
}

/* La marca conserva su degradado azul marino y su neon interactivo. */
.theme-graphite :is(#dashboardView, #studioDashboardView) .dashboard-sidebar .sidebar-brand-name,
.theme-graphite :is(#dashboardView, #studioDashboardView) .dashboard-sidebar .sidebar-brand-name > span {
  color: transparent;
  text-shadow: none;
}

/* Marca global en blanco perla: navegacion, acceso, editores, galeria y pies. */
body.theme-graphite :is(.sidebar-brand-name, .footer-brand-name, .brand-neon-text) {
  color: transparent;
  background: linear-gradient(100deg, #fffef8 0%, #e7dfd2 18%, #ffffff 38%, #d1c9bd 58%, #fff9ea 78%, #e5ddd1 100%);
  background-size: 280% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 11px rgba(255, 247, 226, .3));
}

body.theme-graphite :is(.sidebar-brand-name, .footer-brand-name, .brand-neon-text) > span {
  color: transparent;
}

body.theme-graphite :is(.auth-brand, .auth-mobile-brand, .sidebar-brand, .site-footer-brand, .vae-brand, .brand, .legal-brand) :is(.sidebar-brand-name, .footer-brand-name, .brand-neon-text) > span {
  color: transparent;
}

body.theme-graphite :is(.desktop-neon-logo, .auth-brand-mark, .brand-mark, .vae-brand-mark, .site-footer-logo) {
  filter: drop-shadow(0 0 7px rgba(255, 245, 220, .28));
}

body.theme-graphite .desktop-neon-logo .site-logo {
  filter: grayscale(1) sepia(.12) saturate(.35) brightness(2.35) drop-shadow(0 0 8px rgba(255, 245, 220, .38));
}

@media (min-width: 981px) {
  body.theme-graphite .desktop-neon-logo .site-logo {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  body.theme-graphite .desktop-neon-logo .site-logo {
    opacity: 1;
  }
}

/* Un campo de texto no necesita también el contorno gris global de su label. */
.theme-graphite :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable="true"]):is(:focus, :focus-visible),
.theme-graphite label:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):is(:focus, :focus-visible)) {
  outline: none;
}