/* Talyrio — midnight violet, inspired by the supplied purple/pink reference. */
:root {
  color-scheme: dark;
  --bg: #0b0b17;
  --paper: #171724;
  --ink: #f3f0ff;
  --muted: #aaa5bd;
  --line: #302b43;
  --accent: #bc88ff;
  --soft: #2c1f43;
  --dark: #21122f;
  --lime: #f1d9ff;
  --theme-input: #12121e;
  --theme-secondary: #bdb5cf;
  --theme-faint: #9790ac;
  --theme-pink: #e284df;
  --theme-gradient: linear-gradient(110deg, #7731da 0%, #a13ee2 55%, #ac3fbc 100%);
}
body {
  background:
    radial-gradient(ellipse 740px 410px at 17% -30px, #af3dd43b, transparent 78%),
    radial-gradient(ellipse 620px 470px at 47% 20px, #6227b72e, transparent 78%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  scrollbar-color: #514165 #10101b;
}
::selection { background: #7541ab; color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .dropzone:focus-visible {
  outline-color: #ce9bff;
}
.sidebar {
  background: linear-gradient(165deg, #21142fd9, #11111eee 38%);
  border-color: #30253f;
  backdrop-filter: blur(16px);
}
.brand { color: #f7f1ff; }
.brand small { color: #baa5cc; }
.brand-icon {
  background: var(--theme-gradient);
  color: #fff;
  box-shadow: 0 0 26px #ac4be038, inset 0 1px 0 #edb6ff66;
}
.workspace-label { color: var(--theme-faint); }
.workspace-label span { background: #292036; color: #c9b6dc; }
.nav-item { color: #b9afc9; }
.nav-item:hover { background: #22192f; color: #f0e3ff; }
.nav-item.active {
  background: linear-gradient(105deg, #59287766, #4722682e);
  color: #e7c8ff;
  box-shadow: inset 0 0 0 1px #9753be40;
}
.nav-item #nav-count { background: #30203f; color: #d8b4f3; }
.sidebar-note {
  background: linear-gradient(140deg, #30203f, #1e182b);
  border-color: #4d315d;
}
.sidebar-note:after { border-color: #89579a3d; }
.mini-play { background: #553062; color: #eed4ff; }
.sidebar-note h3 { color: #f0e5fb; }
.sidebar-note p { color: #bcb0c9; }
.mini-tag { color: #b39ac8; }
.sidebar-bottom { border-color: #33273e; color: #e0d6eb; }
.sidebar-bottom small { color: #b0a0bf; }
.avatar { background: #372248; color: #e3bbff; }
.icon-button { color: #b6a9c8; }
.icon-button:hover { color: #f3e5ff; background: #392747; border-radius: 6px; }
.topbar { background: #10101d9c; border-color: #352643; }
.breadcrumb { color: #aaa0bd; }
.breadcrumb span { color: #665872; }
.breadcrumb strong { color: #e3d6f0; }
.provider-badge { color: #b3a8c6; }
.provider-badge i { background: #d6ad73; }
.provider-badge i.ready { background: #8ad5b6; }
.help-button, .language-select, .compact-logout {
  background: #21192e;
  border-color: #493357;
  color: #dbc5ee;
}
.help-button:hover, .compact-logout:hover { background: #362341; color: #fff; }
.language-select option { background: #1c1727; color: #f3e8ff; }
.page-heading .eyebrow { color: #c29cda; }
.page-heading h1 {
  color: #fbf5ff;
  background: linear-gradient(100deg, #fff 8%, #f0e3ff 54%, #d68de9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-heading h1 span { color: #d887ea; -webkit-text-fill-color: #d887ea; }
.page-heading p { color: #bcb1ce; }
.heading-mark span { border-color: #a16cbb66; background: #8a4cc51a; }
.heading-mark span:nth-child(2) { background: #a95bce33; border-color: #a76fc66b; }
.notice {
  background: linear-gradient(110deg, #31203cdd, #1e182bdd);
  border-color: #5a3a64;
  color: #dfb7eb;
}
.notice strong { color: #f0d9f6; }
.notice p { color: #c3aecb; }
.notice button { color: #e2b2ff; }
.retention-notice {
  background: #282032;
  border-color: #55415e;
  color: #dfc6e8;
}
.card, .job-card {
  background: linear-gradient(140deg, #1b1a29, #14141f);
  border-color: #353044;
  box-shadow: 0 8px 30px #03030b30, inset 0 1px 0 #a98dc00c;
}
.card-heading h2, .history-heading h2 { color: #f5efff; }
.subtle-tag {
  background: #281f35;
  border-color: #4c365d;
  color: #d4b3ee;
}
.mode-tabs { background: #11111d; border: 1px solid #30273f; }
.mode-tabs button { color: #aaa0bd; }
.mode-tabs button:hover { color: #eadbfa; }
.mode-tabs button.active {
  background: linear-gradient(110deg, #47285f, #352046);
  box-shadow: inset 0 0 0 1px #9d68c244, 0 2px 9px #0003;
  color: #f1dfff;
}
.field-heading label, .field label { color: #e7deef; }
.field-heading > span { color: #b8a4ca; }
.dropzone {
  background: #12121f;
  border-color: #544064;
}
.dropzone:hover, .dropzone.dragover {
  background: #251a34;
  border-color: #b978e6;
}
.upload-icon { background: #322040; color: #d4a5f7; }
.dropzone strong { color: #ddd0ec; }
.dropzone > span:not(.upload-icon), .dropzone small { color: #a99bbd; }
.field-tip { color: #aba0bb; }
.asset-item { background: #242032; border-color: #463453; }
.asset-item .asset-label { background: #100c1cdb; color: #ead9f8; }
.asset-remove { background: #34213feb; color: #f6e6ff; }
.asset-remove:hover { background: #68407a; }
.upload-progress { color: #d1a5f1; }
.upload-progress progress { accent-color: #b86de5; }
.required { color: #d897ee; }
.text-button { color: #d4a4f2; }
.text-button:hover { color: #f3c6ff; }
.textarea-wrap, .field select, .login-card input {
  background: var(--theme-input);
  border-color: #3d334e;
  color: #e7deef;
}
.textarea-wrap:focus-within {
  border-color: #b477db;
  box-shadow: 0 0 0 3px #9951c21c;
}
textarea { background: transparent; color: #e7deef; caret-color: #d3a0f3; }
textarea::placeholder, .login-card input::placeholder { color: #a296b2; opacity: 1; }
.textarea-footer { color: #9d8fae; }
.field select option { background: #171322; color: #e7deef; }
.audio-row { border-color: #332b40; }
.audio-symbol { color: #ba8fd4; }
.audio-row strong { color: #dfd1ed; }
.audio-row small { color: #a99ab9; }
.switch span { background: #4b3b58; }
.switch span:after { background: #f8f0ff; }
.switch input:checked + span { background: linear-gradient(100deg, #8f3cce, #c36bde); }
.switch input:focus-visible + span { outline-color: #d09cf1; }
.primary-button {
  background: var(--theme-gradient);
  color: #fff;
  box-shadow: inset 0 1px 0 #eeb8ff55, 0 4px 20px #9226d127;
}
.primary-button:hover:not(:disabled) {
  background: linear-gradient(110deg, #8a3de7, #a13ee2 55%, #b143bd);
  box-shadow: 0 5px 24px #b244df50, inset 0 1px 0 #f5d1ff66;
}
.primary-button:disabled { opacity: .5; box-shadow: none; }
.generate-area > p:not(.form-error) { color: #b1a2c1; }
.form-error, .login-card .form-error { color: #ffaaa9; }
.preview-stage {
  background-color: #10101d;
  background-image: radial-gradient(ellipse at 50% 38%, #6a2a8a1a, transparent 68%), radial-gradient(#57416770 .7px, transparent .7px);
  background-size: auto, 19px 19px;
  border-color: #393044;
}
.film-layer { border-color: #80519a; }
.layer-back { background: #3f2557; box-shadow: 0 10px 40px #bd5cdd1a; }
.layer-front {
  background: linear-gradient(145deg, #362544, #20172f);
  box-shadow: 0 12px 35px #05031155;
  border-color: #9e65b8;
}
.layer-front > span { border-color: #87539d; color: #e0adf7; background: #5d307933; }
.layer-front i { border-color: #845395; }
.art-spark { color: #dd8ae9; text-shadow: 0 0 22px #d16ce77a; }
.empty-preview h3 { color: #e1c1f6; }
.empty-preview p { color: #a496b6; }
.preview-stage video { background: #080711; }
.preview-caption > span { color: #b5a1c7; }
.preview-caption i { color: #645170; }
.download-button, .secondary-button {
  background: #2d1d3d;
  border-color: #684477;
  color: #e7c1ff;
}
.download-button:hover, .secondary-button:hover { background: #48275b; }
.tip-icon { color: #c281e0; }
.tip-card h3 { color: #d2abe9; }
.tip-card p, .storage-note { color: #a99ab9; }
.video-expiry { background: #302038; color: #e9c7ef; }
.job-details > .job-expiry { color: #dfb8e9; }
.working-preview h3, .error-preview h3 { color: #e9d9f6; }
.working-preview > p, .working-preview .working-footnote { color: #b7a6c8; }
.orbit { border-color: #8859a1; }
.orbit:after { background: #cd89e3; }
.orbit > span { color: #cf94ec; }
.elapsed { color: #d4a4ee; }
.stage-track span { background: #ae6dd0; }
.error-preview > span { color: #e3abc8; }
.error-preview p { color: #d3b0c4; }
.history-heading h2 span { background: #30213f; color: #cfaaea; }
.history-heading p { color: #b8a4c8; }
.history-empty { border-color: #493652; color: #b6a1c6; background: #16121f66; }
.job-thumbnail { background: #21182e; }
.job-placeholder { color: #b582d0; }
.job-chip { background: #281b38ef; color: #e5c9f8; }
.job-details h3 { color: #ece0f6; }
.job-details > p { color: #ad9bbd; }
.job-actions, .job-actions button { color: #d7a7f4; }
.job-actions .delete-job { color: #d49aaa; }
footer { border-color: #2d233b; color: #b19bc1; }
footer > span, footer small { color: #9683a6; }
.toast { background: #3d2253; border: 1px solid #9963b2; color: #f7e7ff; box-shadow: 0 12px 40px #0005; }
dialog {
  background: linear-gradient(145deg, #21192e, #15131f);
  border-color: #6b457e;
  color: #f1e8fb;
  box-shadow: 0 25px 90px #0008;
}
dialog::backdrop { background: #080511a8; }
dialog .eyebrow { color: #c599df; }
dialog li, dialog li p { color: #c2b2ce; }
dialog li strong { color: #e5caf6; }
.help-note { background: #31203f; color: #d0b8df; }
.small-note { color: #b19ac4; }
.login-overlay {
  background:
    radial-gradient(ellipse 650px 490px at 24% 6%, #c042d461, transparent 80%),
    radial-gradient(ellipse 600px 480px at 63% 5%, #6026b745, transparent 82%),
    #0b0b17f7;
}
.login-card {
  background: linear-gradient(150deg, #231a30f5, #15131ffb);
  border-color: #72458a;
  box-shadow: 0 25px 90px #0006, 0 0 70px #9f3cbe0e, inset 0 1px 0 #d5a4f012;
}
.login-card h2 { color: #f3e9fc; }
.login-card > p { color: #c3b2ce; }
.login-card label { color: #d6c1e5; }
.login-card > small { color: #ae99be; }
.login-card input:focus { border-color: #bb7ee3; }
.login-card input:-webkit-autofill {
  -webkit-text-fill-color: #eee0f8;
  -webkit-box-shadow: 0 0 0 1000px #17121f inset;
  caret-color: #e2bcff;
}
@media (max-width: 650px) {
  body { background-size: auto; }
  .sidebar { background: #181021e8; }
  .topbar { background: #15101ee8; }
  .retention-notice { background: #282032; }
}