/* AUVRA UI foundation — the single source of type, colour, radius and control
   tokens shared by Home, Canvas, Studio and Login. Page stylesheets consume
   these variables; they must not redefine the scale with raw values. */
:root {
  color-scheme: dark;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Segoe UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale: caption → display. Every font-size in the product maps here.
     --fs-3xs is reserved for uppercase micro labels and badges. */
  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-display: 40px;
  --fs-hero: 56px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.25;
  --lh-body: 1.5;
  --tracking-caps: .12em;

  /* Neutral surfaces, darkest to lightest. */
  --surface-canvas: rgb(13,13,13);
  --surface-1: rgb(20,20,20);
  --surface-2: rgb(27,27,27);
  --surface-panel: rgb(32,32,32);
  --surface-menu: rgb(38,38,38);
  --hairline: rgba(255,255,255,.04);
  --line-1: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --hover-fill: rgba(255,255,255,.08);
  --active-fill: rgba(255,255,255,.12);

  /* Text ladder. */
  --text-1: rgba(255,255,255,1);
  --text-2: rgba(255,255,255,.7);
  --text-3: rgba(255,255,255,.6);
  --text-4: rgba(255,255,255,.35);
  --text-5: rgba(255,255,255,.2);

  /* Actions and states. White is the only accent; colour carries meaning. */
  --accent: #f2f2f2;
  --accent-hover: #fff;
  --accent-ink: #111;
  --focus-ring: rgba(255,255,255,.55);
  --danger: #e07070;
  --warning: #d9a45c;
  --success: #5fb37a;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --control-h: 36px;
  --control-h-sm: 28px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .1s;
  --t-base: .15s;
  --t-slow: .3s;
  --menu-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px var(--line-1);
}
:root:lang(zh-Hant) { --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Helvetica Neue", "Segoe UI", "Microsoft JhengHei", "Noto Sans CJK TC", "Source Han Sans TC", sans-serif; }
:root:lang(ja) { --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Segoe UI", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", sans-serif; }
:root:lang(ko) { --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Helvetica Neue", "Segoe UI", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; }

html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: rgba(255,255,255,.22); }

/* Native <select>: same trigger as the canvas custom dropdown. */
select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--control-h-sm);
  padding: 0 28px 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text-1);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
select:hover { background-color: var(--hover-fill); }
select:focus-visible { outline: none; border-color: var(--line-2); }
select option { background: var(--surface-menu); color: var(--text-1); }

/* Headings and inline emphasis never go heavier than semibold. */
h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: var(--fw-semibold); }

/* ── Motion language ─────────────────────────────────────────────────────
   Things enter from where they come from (menus drop from their trigger,
   dialogs rise toward the viewer, content settles upward), leave faster than
   they arrive, and never bounce more than a hair. Keyframes animate the
   individual translate/scale properties so they never fight an element's own
   positioning transform. */
:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.36,.64,1);
  --t-enter: .32s;
  --t-reveal: .6s;
}
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; scale: .97; translate: 0 -4px; } }
@keyframes ui-rise { from { opacity: 0; translate: 0 12px; } }
@keyframes ui-dialog-in { from { opacity: 0; scale: .96; translate: 0 10px; } }

dialog[open] { animation: ui-dialog-in var(--t-enter) var(--ease-out); }
dialog[open]::backdrop { animation: ui-fade var(--t-enter) var(--ease-out); }

/* Press feedback for primary actions: a short, physical give. No transition
   here, so each control keeps its own transition list. */
:is(.rail-new-project, .global-top-action, .global-account-action, .global-primary-action, .new-project-button, .primary-button, .composer-generate, .canvas-toolbar button, .canvas-zoom button, .submit):not(:disabled):active { scale: .96; }

/* Connection lines: one look for canvas edges and the home demo. A 44px comet
   of light runs the length of a line; --len (px) and --dur come from JS. */
:root {
  --edge-line: #525252;
  --edge-flow: #f4f6f2;
  --edge-flow-glow: drop-shadow(0 0 4px rgba(244,246,242,.7));
  --edge-flow-ease: cubic-bezier(.45,.05,.55,.95);
}
@keyframes edge-comet { from { stroke-dashoffset: 48px; } to { stroke-dashoffset: calc(var(--len, 400) * -1px); } }

/* Page-to-page: same-origin navigations crossfade; opening a project grows
   its card into the canvas (the card and .canvas-root share canvas-stage). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: var(--ease); }
::view-transition-group(canvas-stage) { animation-duration: .46s; animation-timing-function: var(--ease-out); }
::view-transition-old(canvas-stage), ::view-transition-new(canvas-stage) { height: 100%; object-fit: cover; }
::view-transition-group(canvas-stage) { border-radius: var(--radius-md); overflow: hidden; }

/* Shared image-role editor for Grok 1.5; canvas and classic use the same fields. */
.video-frame-pins { display:grid; gap:8px; }
.video-pin-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.video-pin-row label { display:grid; gap:4px; min-width:0; }
.video-pin-row input,.video-pin-row select { width:100%; min-width:0; }
.video-pin-row [hidden] { display:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* Shared advanced controls use the same type, surfaces and actions as the workspace. */
.atlas-advanced-button { min-height:var(--control-h); padding:0 12px; border:1px solid transparent; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); color:var(--text-2); font:var(--fw-medium) var(--fs-sm)/var(--lh-body) var(--font-sans); white-space:nowrap; cursor:pointer; transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease); }
.atlas-advanced-button:hover { background:var(--hover-fill); color:var(--text-1); }
.atlas-advanced-button:disabled { opacity:.42; cursor:not-allowed; }
#atlasAdvancedDialog { box-sizing:border-box; width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:0; border-radius:var(--radius-lg); padding:24px; color:var(--text-1); background:var(--surface-2); box-shadow:0 0 0 1px var(--line-2),0 30px 90px rgba(0,0,0,.55); font:var(--fs-sm)/var(--lh-body) var(--font-sans); }
#atlasAdvancedDialog::backdrop { background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
#atlasAdvancedDialog h3 { margin:0 0 8px; font-size:var(--fs-xl); }
.atlas-advanced-note { color:var(--text-3); margin:0 0 18px; font-size:var(--fs-xs); }
.atlas-advanced-field { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:12px; align-items:center; margin:12px 0; }
.atlas-advanced-field input,.atlas-advanced-field select,.atlas-advanced-field textarea { box-sizing:border-box; width:100%; min-width:0; min-height:var(--control-h); padding:0 12px; border:1px solid transparent; border-radius:var(--radius-sm); color:var(--text-1); background-color:rgba(255,255,255,.05); font:inherit; }
.atlas-advanced-field select { padding-right:30px; }
.atlas-advanced-field input:hover,.atlas-advanced-field select:hover { background-color:var(--hover-fill); }
.atlas-advanced-field input:focus-visible,.atlas-advanced-field select:focus-visible,.atlas-advanced-field textarea:focus-visible { border-color:var(--focus-ring); }
.atlas-advanced-field input[type="file"] { height:auto; padding:8px; }
.atlas-advanced-field input::file-selector-button { border:0; border-radius:var(--radius-sm); padding:5px 8px; margin-right:8px; background:var(--hover-fill); color:var(--text-1); font:inherit; cursor:pointer; }
.atlas-advanced-field select[multiple] { padding:6px; background-image:none; }
.atlas-advanced-field small { grid-column:1/-1; color:var(--text-3); font-size:var(--fs-xs); overflow-wrap:anywhere; }
.atlas-storyboard { min-width:0; }
.atlas-storyboard-row { display:grid; grid-template-columns:minmax(0,1fr) 60px auto; gap:6px; margin-bottom:8px; }
.atlas-storyboard-row textarea { padding:8px 12px; resize:vertical; }
.atlas-advanced-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:20px; }
.atlas-advanced-actions .primary { background:var(--accent); color:var(--accent-ink); font-weight:var(--fw-semibold); }
.atlas-advanced-actions .primary:hover { background:var(--accent-hover); }
.atlas-advanced-error { color:var(--danger); overflow-wrap:anywhere; }
@media(max-width:420px) { .atlas-advanced-field { grid-template-columns:minmax(0,1fr); } #atlasAdvancedDialog { padding:18px; } }

.auvra-dialog-select { position:relative; min-width:0; width:100%; }
.auvra-dialog-select>select { position:absolute!important; width:1px!important; height:1px!important; min-height:0!important; padding:0!important; border:0!important; opacity:0; pointer-events:none; }
.auvra-dialog-select-trigger { position:relative; width:100%; min-width:0; height:40px; padding:0 30px 0 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; border:1px solid transparent; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); color:var(--text-1); font:var(--fs-sm)/var(--lh-body) var(--font-sans); cursor:pointer; }
.auvra-dialog-select-trigger::after { content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3); transform:translateY(-68%) rotate(45deg); }
.auvra-dialog-select-trigger:hover,.auvra-dialog-select-trigger[aria-expanded="true"] { background:var(--hover-fill); }
.auvra-dialog-select-trigger:disabled { opacity:.42; cursor:not-allowed; }
.auvra-dialog-select-menu { position:fixed; z-index:1000; inset:auto; margin:0; padding:4px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--surface-menu); box-shadow:var(--menu-shadow); }
.auvra-dialog-select-menu[hidden] { display:none; }
.auvra-dialog-select-option { display:block; width:100%; min-height:36px; padding:8px 12px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-2); text-align:left; font:var(--fs-sm)/20px var(--font-sans); white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.auvra-dialog-select-option:hover,.auvra-dialog-select-option:focus-visible { background:var(--hover-fill); color:var(--text-1); }
.auvra-dialog-select-option[aria-selected="true"] { color:var(--text-1); font-weight:var(--fw-medium); }
.auvra-dialog-select-option:disabled { opacity:.34; cursor:not-allowed; }

/* 3D stage: a receding floor grid, horizon glow and vignette behind 3D previews (3D studio and canvas 3D nodes).
   It is page decoration only; captures render the model canvas, never this background. */
.auvra-stage { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(120% 70% at 50% 58%,rgba(255,255,255,.075),transparent 62%),linear-gradient(180deg,#0b0b0b 0%,#151515 55%,#0d0d0d 100%); }
.auvra-stage::before { content:""; position:absolute; z-index:-1; left:-60%; right:-60%; top:52%; bottom:-70%; background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px); background-size:48px 48px; background-position:center top; transform:perspective(520px) rotateX(68deg); transform-origin:50% 0; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%); pointer-events:none; }
.auvra-stage::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,transparent calc(52% - 24px),rgba(255,255,255,.035) 52%,transparent calc(52% + 28px)); pointer-events:none; }

/* Generating: the AUVRA "A" as an extruded mark slowly spinning on its own axis. Layers stacked in Z give it depth;
   both faces are full colour so the turn reads as a solid object. */
.auvra-a3d { --a3d-size:96px; position:relative; display:block; width:var(--a3d-size); height:calc(var(--a3d-size) * .63); margin:0 auto 18px; perspective:600px; }
.auvra-a3d-spin { position:absolute; inset:0; transform-style:preserve-3d; animation:auvra-a3d-turn 8s linear infinite; }
.auvra-a3d img { position:absolute; inset:0; width:100%; height:100%; transform:translateZ(calc(var(--z) * 1px)); filter:brightness(var(--shade,1)); -webkit-user-drag:none; user-select:none; }
.auvra-a3d::after { content:""; position:absolute; left:10%; right:10%; bottom:-16px; height:10px; border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent); }
@keyframes auvra-a3d-turn { from { transform:rotateX(10deg) rotateY(0deg); } to { transform:rotateX(10deg) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .auvra-a3d-spin { animation:none; transform:rotateX(10deg) rotateY(-24deg); } }

/* Display currency toggle (account settings): two compact segments beside the language switcher. */
.auvra-currency-toggle { display:inline-flex; vertical-align:middle; margin-left:8px; padding:2px; gap:2px; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); }
.auvra-currency-toggle button { min-width:30px; height:30px; padding:0 8px; border:0; border-radius:6px; background:transparent; color:var(--text-3); font:var(--fw-semibold) var(--fs-sm)/1 var(--font-sans); cursor:pointer; transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease); }
.auvra-currency-toggle button:hover { color:var(--text-1); }
.auvra-currency-toggle button[aria-pressed="true"] { background:var(--active-fill); color:var(--text-1); }
.auvra-currency-toggle button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }