/* Jarvis UI refresh: shared polish for every server-rendered page. */
:root {
  --color-bg-primary: #081320;
  --color-bg-secondary: #0b1726;
  --color-bg-elevated: #13263a;
  --color-bg-elevated-alt: #1a3248;
  --color-border: #2c4962;
  --color-border-strong: #3a6681;
  --color-accent: #65e7df;
  --color-accent-text: #062329;
  --color-text-primary: #eef8fc;
  --color-text-secondary: #b1c8d7;
  --color-text-link: #8bece9;
  --color-success: #77e6ae;
  --color-error-text: #ff9eaa;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  color-scheme: dark;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3) { text-wrap: balance; letter-spacing: -.025em; }
:where(p, li) { overflow-wrap: anywhere; }
:where(a) { text-underline-offset: .2em; }
:where(a:hover) { color: #c4fffa; }
:where(button, input, select, textarea) { font: inherit; }
:where(button, [type="button"], [type="submit"], .button, .button-link, .btn-primary) {
  min-height: 44px;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, background-color .16s ease;
}
:where(button, [type="button"], [type="submit"]) { cursor: pointer; }
:where(button, .button, .button-link, .btn-primary):hover:not(:disabled) { filter: brightness(1.09); }
:where(button, .button, .button-link, .btn-primary):active:not(:disabled) { transform: translateY(1px); }
:where(button, input, select, textarea, a):focus-visible {
  outline: 3px solid #98fff5;
  outline-offset: 3px;
}
:where(button:disabled, input:disabled) { cursor: not-allowed; opacity: .58; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: #65e7df; min-width: 18px; min-height: 18px; }
:where(input, select, textarea) { max-width: 100%; }
:where(table) { border-collapse: collapse; }
:where(th) { font-weight: 750; }
:where(video, img) { max-width: 100%; }
::selection { background: #48cabc; color: #04151a; }

/* Main chat: clear navigation, calmer messages, and room for the composer. */
.jarvis-chat-page .top-nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.jarvis-chat-page .top-nav a:focus-visible { position: relative; z-index: 2; }
.jarvis-chat-page .msg { border: 1px solid #2c4962; border-radius: 14px; padding: 13px 16px; line-height: 1.55; }
.jarvis-chat-page .du { border-color: #376279; background: #17344a; color: #dcfaff; }
.jarvis-chat-page .zara { background: #142a40; }
.jarvis-chat-page #form { border-color: #35516a; background: #0c1b2c; }
.jarvis-chat-page #back-to-voice { min-height: 44px; display: inline-flex; align-items: center; }

/* TikTok Studio: make account choice and dense settings easier to scan. */
.studio-page main { width: min(100%, 1400px); padding: clamp(16px, 3vw, 34px); }
.studio-page h1 { max-width: 1000px; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; margin: 12px 0 22px; }
.studio-page section { border-color: #31546a; border-radius: 18px; padding: clamp(17px, 2.5vw, 26px); margin-block: 18px; background: #102337; }
.studio-page section h2 { margin-top: 0; font-size: clamp(20px, 2.7vw, 27px); }
.studio-page .account-switcher { gap: 8px; margin: 18px 0 20px; }
.studio-page .account-tab { min-height: 44px; display: inline-flex; align-items: center; border-radius: 11px; }
.studio-page .status-grid { gap: 12px; margin: 20px 0; }
.studio-page .status-card { min-height: 98px; border: 1px solid #2e5065; border-radius: 13px; background: #132b40; }
.studio-page .status-card small { color: #a9c8d8; }
.studio-page .status-card strong { display: inline-block; margin-top: 7px; line-height: 1.35; }
.studio-page :where(input, select) { border-color: #476e84; }
.studio-page :where(table) { display: block; max-width: 100%; overflow-x: auto; }
.studio-page :where(th, td) { white-space: normal; min-width: 100px; }
.studio-page .notice { line-height: 1.55; }
.studio-page .draft-grid > * { min-width: 0; }

/* Compact Part Import utility pages share the same dark controls. */
.part-import-page { margin: 0; background: #081320; color: #eef8fc; }
.part-import-page main { width: min(100%, 800px); margin: auto; padding: clamp(18px, 3vw, 36px); }
.part-import-page h1 { font-size: clamp(28px, 4vw, 40px); }
.part-import-page :where(form, section, article) { background: #102337; border: 1px solid #31566c; border-radius: 16px; padding: 18px; margin-block: 15px; }
.part-import-page :where(input, select, textarea) { background: #0a1b2c; color: #f1fcff; border: 1px solid #426780; border-radius: 10px; padding: 11px; }
.part-import-page button { background: #65e7df; color: #062329; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 750; }
.part-import-page a { color: #8bece9; }
.part-import-page :where(li, label) { line-height: 1.6; }
.part-import-page .part-import-message { border-radius: 10px; padding: 11px 14px; }
.part-import-page .part-import-message.success { background: #123b31; color: #9cf5c7; }
.part-import-page .part-import-message.error { background: #42232f; color: #ffb6c0; }

/* Workshop result list and persistent, sandboxed game preview. */
.project-library { margin-top: 18px; }
.project-library > p { color: #b9d0dc; }
.file-list .file-name, .file-list .folder-name { min-width: 0; flex: 1 1 150px; }
.file-list .folder-name small { display: block; color: #aac3d3; margin-top: 2px; }
.file-list .folder-icon { color: #8bece9; font-size: 22px; }
.file-list .file-actions { display: flex; flex: 0 0 auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.file-list .file-actions .button { min-height: 38px; padding: 7px 12px; font-size: 13px; }
.werkstatt-preview-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; margin: 0; background: #070d17; }
.werkstatt-preview-page .preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px clamp(12px, 2vw, 24px); border-bottom: 1px solid #345a71; background: #0d2234; flex: none; }
.werkstatt-preview-page .preview-toolbar > div { display: flex; flex-direction: column; min-width: 0; }
.werkstatt-preview-page .preview-toolbar strong { font-size: 17px; color: #f1ffff; }
.werkstatt-preview-page .preview-toolbar span { color: #b5d1df; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werkstatt-preview-page .preview-toolbar nav { display: flex; flex-wrap: wrap; gap: 8px; }
.werkstatt-preview-page .preview-toolbar a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px; border: 1px solid #456c81; border-radius: 10px; background: #17384a; color: #e8fcff; text-decoration: none; font-weight: 750; }
.werkstatt-preview-page .preview-toolbar a:first-child { background: #65e7df; border-color: #65e7df; color: #062329; }
.werkstatt-preview-page iframe { display: block; width: 100%; min-height: 0; flex: 1 1 auto; border: 0; background: #080c13; }
@media (max-width: 700px) {
  .file-list li { flex-wrap: wrap; }
  .file-list .file-actions { width: 100%; margin-left: 0; justify-content: stretch; }
  .file-list .file-actions .button { flex: 1 1 135px; }
  .werkstatt-preview-page .preview-toolbar { gap: 8px; }
  .werkstatt-preview-page .preview-toolbar nav { width: 100%; flex-wrap: wrap; }
  .werkstatt-preview-page .preview-toolbar a { white-space: nowrap; flex: 1 1 auto; justify-content: center; }
}

/* Calm, readable treatment for older standalone Jarvis panels. */
:where(main > section, main > .panel, main > .card) {
  box-shadow: 0 14px 38px #020a1640;
}
:where(.notice, .warning, .error, .success-note) { line-height: 1.55; }

/* App diary */
body.app-diary-page {
  background: radial-gradient(circle at 88% -10%, #164a59 0, transparent 34%), #081320;
  font-size: 16px;
}
.app-diary-page main { width: min(100%, 1120px); margin-inline: auto; padding: clamp(16px, 3vw, 34px); }
.app-diary-page .diary-hero {
  position: relative; overflow: hidden; padding: clamp(22px, 4vw, 38px);
  border: 1px solid #376178; border-radius: 24px;
  background: linear-gradient(130deg, #132b43 5%, #102637 55%, #0b403e 100%);
  box-shadow: 0 24px 58px #02091775;
}
.app-diary-page .diary-hero::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -130px;
  border-radius: 50%; background: #65e7df1c; pointer-events: none;
}
.app-diary-page .eyebrow { display: block; color: #9affed; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
.app-diary-page h1 { color: #f6ffff; font-size: clamp(30px, 5vw, 50px); line-height: 1.08; margin: 12px 0; }
.app-diary-page .diary-hero p { max-width: 700px; color: #c6dce7; margin: 0; }
.app-diary-page .tabs { margin: 18px 0 20px; gap: 8px; }
.app-diary-page .tabs a, .app-diary-page .button, .app-diary-page button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 10px; border: 1px solid #3c6a7e; background: #17364a;
  color: #f0fbff; padding: 10px 15px; text-decoration: none; font-weight: 750;
}
.app-diary-page .tabs a.active { background: #65e7df; color: #062329; border-color: #65e7df; }
.app-diary-page section { border: 1px solid #31566c; border-radius: 17px; padding: clamp(18px, 2.5vw, 27px); margin: 16px 0; background: #102337; }
.app-diary-page section h2 { margin: 0 0 11px; font-size: clamp(21px, 3vw, 27px); }
.app-diary-page section p { color: #bfd2df; }
.app-diary-page section strong { color: #fff; }
.app-diary-page .diary-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }
.app-diary-page .diary-pill { display: inline-flex; padding: 7px 12px; border: 1px solid #6ae9cf82; border-radius: 999px; background: #0d353a; color: #a5fff0; font-weight: 800; }
.app-diary-page .diary-muted { color: #b9cedc; }
.app-diary-page label { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; line-height: 1.45; }
.app-diary-page label input { margin-top: 3px; flex: none; }
.app-diary-page table { width: 100%; min-width: 690px; table-layout: auto; }
.app-diary-page th { color: #a9c9d9; background: #0c1d30; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.app-diary-page td, .app-diary-page th { padding: 12px 14px; border-bottom: 1px solid #31536a; overflow-wrap: normal; word-break: normal; }
.app-diary-page tbody tr:hover { background: #19334a; }
.app-diary-page video { max-height: 70vh; border: 5px solid #06141e; border-radius: 19px; box-shadow: 0 20px 42px #0007; }

/* Autopilot, with a clear difference between status and controls. */
body.autopilot-page { max-width: none; margin: 0; padding: 0; background: radial-gradient(circle at 82% 0, #174356 0, transparent 34%), #081320; color: #edf8fb; }
.autopilot-page .autopilot-shell { width: min(100%, 1060px); margin: auto; padding: clamp(16px, 3vw, 32px); }
.autopilot-page .autopilot-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.autopilot-page .autopilot-top a { color: #b3e8e8; text-decoration: none; }
.autopilot-page .autopilot-hero { padding: clamp(23px, 4vw, 38px); border: 1px solid #386778; border-radius: 23px; background: linear-gradient(130deg, #142a42, #123647); box-shadow: 0 22px 55px #02081775; }
.autopilot-page .autopilot-hero h1 { font-size: clamp(30px, 5vw, 48px); margin: 5px 0 10px; line-height: 1.1; }
.autopilot-page .autopilot-hero p { color: #c4dce6; max-width: 680px; margin: 0; }
.autopilot-page .autopilot-kicker { color: #99f7e8; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
.autopilot-page .autopilot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.autopilot-page .autopilot-panel { padding: 22px; border: 1px solid #31556c; border-radius: 17px; background: #102337; min-width: 0; }
.autopilot-page .autopilot-panel h2 { margin: 0 0 12px; font-size: 22px; }
.autopilot-page .autopilot-panel p { color: #b9d0dc; margin: 0 0 14px; }
.autopilot-page .autopilot-stat { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #2d4f63; }
.autopilot-page .autopilot-stat:last-child { border-bottom: 0; }
.autopilot-page .autopilot-stat strong { color: #f9ffff; }
.autopilot-page .autopilot-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 12px; font-weight: 800; border: 1px solid #9d6373; color: #ffb8c1; background: #3d202b; }
.autopilot-page .autopilot-badge.running { border-color: #42aa82; color: #aaf5cb; background: #133c34; }
.autopilot-page .autopilot-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.autopilot-page button { min-height: 44px; margin: 0; padding: 10px 16px; border-radius: 10px; font-size: 15px; font-weight: 800; }
.autopilot-page button.an { background: #65e7df; color: #07262b; }
.autopilot-page button.aus { background: #f6a9b2; color: #37121d; }
.autopilot-page button.secondary { background: #1b3a50; border: 1px solid #4b7188; color: #ecfaff; }
.autopilot-page label { display: block; margin-bottom: 7px; font-weight: 750; color: #d5eaf1; }
.autopilot-page input, .autopilot-page textarea { width: 100%; background: #0a1b2c; color: #f1fcff; border: 1px solid #426780; border-radius: 10px; padding: 11px 13px; }
.autopilot-page input { max-width: 150px; }
.autopilot-page textarea { min-height: 120px; resize: vertical; }
.autopilot-page .limit-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.autopilot-page .task-list { list-style: none; padding: 0; margin: 0; }
.autopilot-page .task-list li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px; margin: 8px 0; border: 1px solid #2d5269; border-radius: 11px; background: #0c1d30; }
.autopilot-page .task-list li > span { min-width: 0; }
.autopilot-page .task-list small { display: block; color: #a9c3d1; opacity: 1; margin-top: 5px; }
.autopilot-page .task-list button { min-height: 36px; padding: 5px 11px; background: #3f2532; color: #ffd1d5; border: 1px solid #805264; flex: none; }
.autopilot-page .autopilot-feedback { min-height: 1.5em; color: #ffbdc5; margin: 11px 0 0; }

@media (max-width: 760px) {
  .autopilot-page .autopilot-grid { grid-template-columns: 1fr; }
  .app-diary-page .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .app-diary-page .tabs a { white-space: nowrap; }
  .app-diary-page section:last-child { overflow-x: auto; }
}
@media (max-width: 520px) {
  .autopilot-page .autopilot-actions button { flex: 1 1 135px; }
  .app-diary-page .button, .app-diary-page section > button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}