/* Match ZenLab homepage/src/app/globals.css. Keep shared brand values here. */
:root {
  --brand-primary: hsl(222 47% 11%);
  --brand-accent: hsl(232 72% 52%);
  --brand-soft: hsl(232 72% 96%);
  --brand-border: hsl(220 13% 91%);
  --brand-muted: hsl(220 9% 42%);
  --ink: var(--brand-primary);
  --teal: var(--brand-primary);
  --muted: var(--brand-muted);
  --line: var(--brand-border);
  --light: var(--brand-soft);
}
::selection {background:hsl(232 72% 52% / .14);color:var(--brand-primary)}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,video:focus-visible {outline:3px solid var(--brand-accent);outline-offset:4px}
input[type=checkbox],input[type=radio],input[type=range] {accent-color:var(--brand-accent)}
.section-label {font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--brand-accent);margin:0 0 10px}
.section-heading {display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
.section-heading h2 {margin:0;font-size:clamp(23px,3vw,32px);line-height:1.5;letter-spacing:-.04em;color:var(--brand-primary)}
.section-heading>p {font-size:13px;line-height:1.8;color:var(--brand-muted);margin:0}
.film-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.film-card {overflow:hidden;border:1px solid var(--brand-border);border-radius:20px;background:#fff;box-shadow:0 8px 28px hsl(222 47% 11% / .04);min-width:0}
.film-media {position:relative;background:var(--brand-primary);aspect-ratio:16/9}
.film-media video {display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;border:0;border-radius:0}
.film-duration {position:absolute;top:14px;right:14px;border-radius:20px;padding:5px 10px;background:rgb(255 255 255 / .94);color:var(--brand-primary);font-size:10px;pointer-events:none}
.film-media:has(video:focus) .film-duration {display:none}
.film-copy {padding:20px 23px}
.film-label {font-size:10px;color:var(--brand-accent);font-weight:600}
.film-copy h3 {font-size:17px;line-height:1.6;margin:6px 0;color:var(--brand-primary)}
.film-copy p,.film-disclosure {font-size:12px;color:var(--brand-muted);line-height:1.9}
.film-copy p {margin:6px 0 0}.film-disclosure {margin:18px 0 0}
.finished-films.compact {margin:0 auto 44px}
.compact .section-heading {display:block}.compact .section-heading h2 {font-size:25px}.compact .section-heading>p {font-size:12px;margin-top:12px}.compact .section-heading>p br{display:none}
.compact .film-grid {gap:14px}.compact .film-card {border-radius:14px}.compact .film-copy{padding:14px}.compact .film-copy h3{font-size:13px}.compact .film-copy p{font-size:11px}.compact .film-duration{top:8px;right:8px;font-size:9px;padding:3px 8px}
.style-gallery {color:var(--brand-primary)}
.style-card {border-color:var(--brand-border);border-radius:14px;box-shadow:0 3px 12px hsl(222 47% 11% / .025)}
.style-copy button,.style-copy h3 {color:var(--brand-primary)}
.style-copy button[aria-pressed=true] {color:var(--brand-accent)}
.style-copy small,.gallery-note,.gallery-choice {color:var(--brand-muted)}
.preview-toggle {border-color:var(--brand-border);border-radius:999px;color:var(--brand-primary)}
.style-gallery button:focus-visible {outline-color:var(--brand-accent)}
/* Studio: a quiet work surface; the paper and rendered content remain white. */
body:has(.workspace) {font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--brand-primary)}
.studio-canvas {background-color:#fbfcff;background-image:linear-gradient(to right,hsl(220 13% 92% / .6) 1px,transparent 1px),linear-gradient(to bottom,hsl(220 13% 92% / .6) 1px,transparent 1px);background-size:32px 32px;border-color:var(--brand-border);border-radius:20px}
.canvas-toolbar {background:rgb(255 255 255 / .8)}
.canvas-toolbar select,.canvas-download {color:var(--brand-muted)}
.explanation-sheet,.service-brief,.material-requests {background:#fff;border-radius:12px}
.studio .message.assistant {color:var(--brand-primary)}
.studio .message.assistant a,#composer-status a {color:var(--brand-accent)}
.studio .message.user {background:var(--brand-soft);color:var(--brand-primary)}
.studio .composer:focus-within {border-color:hsl(232 72% 52% / .5);box-shadow:0 0 0 3px hsl(232 72% 52% / .06)}
.studio .composer .send,.studio .proposal-footer button {background:var(--brand-primary);color:#fff}
.studio .composer .send:hover:not(:disabled),.studio .proposal-footer button:hover:not(:disabled) {background:var(--brand-accent)}
.studio .composer .media-attach {color:var(--brand-muted)}
.scene-review-card.current {border-color:var(--brand-accent);box-shadow:0 0 0 2px hsl(232 72% 52% / .06)}
.artifact-link,.scene-reference {background:var(--brand-soft);color:var(--brand-accent)}
#sidebar {background:#fff;border-color:var(--brand-border)}
.sidebar-top {padding:0;gap:8px;min-height:92px;margin-bottom:14px;flex-direction:column;justify-content:center}
.studio-brand {display:flex;align-items:center;gap:10px;justify-content:center;min-height:40px;text-decoration:none;color:var(--brand-primary);font-weight:600;font-size:18px}
.studio-brand img {width:30px;height:30px;object-fit:contain}.studio-brand span {display:none}
#sidebar.open .sidebar-top {min-height:44px;flex-direction:row;justify-content:space-between;margin-bottom:30px}
#sidebar.open .studio-brand span {display:inline}
#menu {color:var(--brand-muted);width:40px;height:40px;flex-basis:40px}
#menu:hover {background:var(--brand-soft);color:var(--brand-accent)}
#sidebar nav a {color:var(--brand-primary);min-height:46px;background:var(--brand-soft)}
#sidebar:not(.open) nav a {padding:11px 0;justify-content:center}
#sidebar nav .new-conversation-icon {display:grid;place-items:center;font-size:25px}
#sidebar nav a.active,#recent a.active {background:var(--brand-soft);color:var(--brand-accent)}
.sidebar-tools {display:grid;gap:4px;margin-top:14px}
#sidebar .service-link {display:flex;align-items:center;gap:12px;padding:11px 13px;min-height:44px;border-radius:10px;color:var(--brand-muted);font-size:12px;text-align:left}
#sidebar .service-link:hover {background:var(--brand-soft);color:var(--brand-accent)}
.sidebar-icon {width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#sidebar:not(.open) .service-link {justify-content:center;padding:12px 0}
#sidebar:not(.open) .service-link span {display:none}
.sidebar-bottom {gap:12px;padding-top:16px}
.sidebar-account {color:var(--brand-muted);gap:7px;min-height:58px;font-size:9px}
.sidebar-account .avatar {background:var(--brand-soft);color:var(--brand-accent);width:32px;height:32px}
.sidebar-account:hover {background:var(--brand-soft)}
.sidebar-balance-link {display:flex;align-items:center;flex-direction:column;gap:4px;text-align:center;padding:10px 2px;border-radius:10px;font-size:9px;color:var(--brand-muted);text-decoration:none}
.sidebar-balance-link:hover {background:var(--brand-soft)}
.sidebar-balance-number {font-size:11px;font-weight:600;color:var(--brand-primary)}
#sidebar:not(.open) .sidebar-balance-details {display:none}
#sidebar.open .sidebar-balance-link {display:none}
#sidebar.open .prepaid-usage .usage-count {font-size:21px;font-weight:600;color:var(--brand-primary);margin:7px 0}
#sidebar.open .prepaid-usage .usage-plan {font-size:11px;color:var(--brand-muted)}
#sidebar.open .prepaid-usage>a {display:inline-block;margin-top:8px;font-size:11px;color:var(--brand-accent)}
#sidebar.open .prepaid-usage>a:before {content:none}
.token-usage .usage-meter i {background:var(--brand-accent)}
.history-spinner {border-top-color:var(--brand-accent)}
@media(max-width:1000px) {.compact .film-grid{grid-template-columns:1fr}.compact .film-copy p{display:none}}
@media(max-width:760px) {
 .section-heading{display:block}.section-heading>p{margin-top:14px}.section-heading>p br{display:none}
 .film-grid{grid-template-columns:1fr;gap:20px}.film-copy{padding:17px 20px}
 .studio,.studio:has(.style-gallery){display:flex;flex-direction:column;height:auto;min-height:100dvh;overflow:visible;padding:18px 10px;gap:20px}
 #main:has(>.studio){overflow-y:auto}.studio .conversation,.studio:has(.style-gallery) .conversation{min-height:360px;height:65dvh;max-height:650px;flex:none}
 .studio .studio-canvas,.studio:has(.style-gallery) .studio-canvas{min-height:450px;max-height:none;overflow:visible;flex:none}
 .studio .canvas-content{overflow:visible;padding:18px 14px 28px}.studio .messages{padding:20px 8px;max-height:none;min-height:0}.studio .studio-welcome{padding-top:20px}
 .compact .section-heading h2{font-size:21px}.compact .film-copy p{display:block}.studio .scene-review{padding:0}
 .sidebar-top{padding:0}.studio .composer textarea{font-size:16px}
 body:has(#sidebar.open) .workspace{left:64px}#sidebar.open{box-shadow:15px 0 40px hsl(222 47% 11% / .12)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}