/* Giro Studio visual system. Loaded after app.css so the original layouts remain intact. */
:root {
  --bg: #0b1116;
  --sidebar: #0c1419;
  --panel: #151f26;
  --panel2: #1a2730;
  --line: #30414b;
  --muted: #a7b8c2;
  --text: #f5f8f7;
  --radius: 18px;
}

body {
  background:
    radial-gradient(circle at 80% 0%, #1430368a 0, transparent 32rem),
    radial-gradient(circle at 22% 48%, #28240e55 0, transparent 30rem),
    var(--bg);
}

.sidebar {
  background: linear-gradient(165deg, #101c21 0%, #0b1217 52%, #101914 100%);
  border-right-color: #30434a;
  box-shadow: 12px 0 36px #00000026;
}
.brand {padding: 3px 8px 6px}
.brand-mark {filter: drop-shadow(0 0 12px #ffe10040)}
.brand-studio {color: #e1e9e8}
.brand small {color: #a0acb1;letter-spacing: 1.15px}
.workspace {
  margin-top: 32px;
  background: linear-gradient(135deg, #24343b, #172229);
  border-color: #3c525b;
  box-shadow: inset 0 1px #ffffff0a, 0 10px 28px #00000024;
}
.workspace-icon {background: #38443b;box-shadow: inset 0 0 0 1px #ffe10024}
.workspace strong {font-size: 12px}
.workspace small,.local-tag,.nav-label {color: #b0c0c4}
.nav-item {border-radius: 10px;color: #b7c7cf}
.nav-item.active {
  background: linear-gradient(100deg, #38371b, #252d20);
  border-color: #655d2c;
  box-shadow: inset 3px 0 var(--yellow), 0 7px 20px #00000024;
}
.nav-item:hover {background: #243139}
.sidebar-note {
  margin-left: 2px;margin-right: 2px;padding: 20px 15px;
  background: linear-gradient(145deg, #1e2c2d, #152127);
  border: 1px solid #344847;border-radius: 13px;
}
.sidebar-note p,.engine-state small {color: #a1b2b7}
.sidebar-note .note-orbit {color: #d3c958}
.text-button {color: #e6ded0;font-size: 11px}

.topbar {
  background: #101b20e8;
  border-bottom-color: #35464d;
  backdrop-filter: blur(16px);
}
.breadcrumbs {color: #a7b9c2}
.breadcrumbs strong {color: #f1f5f4;font-weight: 600}
.account-button {background: #233039;border-color: #425761;border-radius: 9px}
.account-button:hover {border-color: #8b9e9d;background: #2b3b43}
main {max-width: 1530px;padding-top: 46px}
.page-heading {
  position: relative;
  align-items: end;
  border-bottom: 1px solid #304047;
  padding-bottom: 28px;
  margin-bottom: 33px;
}
.page-heading::after {
  content: '';
  position: absolute;left: 0;bottom: -1px;width: 66px;height: 2px;
  background: var(--yellow);
}
.eyebrow {color: #adc2c5;letter-spacing: 2px}
.eyebrow>span {box-shadow: 0 0 0 4px #ffe10017}
h1 {font-size: clamp(35px, 3.5vw, 53px);letter-spacing: -2.4px;line-height: 1.08}
.page-heading h1 em {text-shadow: 0 0 24px #ffe10024}
.page-heading p {color: #b4c5ca;font-size: 14px;margin-top: 15px;max-width: 650px}

.button {border-radius: 9px;font-size: 12px;min-height: 44px}
.button.primary {box-shadow: 0 8px 25px #ffe1001e, inset 0 1px #fff7a0}
.button.secondary {background: #223039;border-color: #425660;color: #e3eded}
.button.secondary:hover {background: #2d424b;border-color: #68818d}
.button.ghost {color: #bdcbd0}
.button.ghost:hover {color: var(--yellow)}

.studio-layout {grid-template-columns: minmax(0, 1fr) 320px;gap: 26px}
.editor,.panel,.project-card,.asset-card {
  background: linear-gradient(145deg, #18232a, #131c22 75%);
  border-color: #38505a;
  box-shadow: 0 20px 50px #00000030, inset 0 1px #ffffff08;
}
.editor {border-radius: 18px}
.editor-top {
  background: linear-gradient(90deg, #203239, #17232b);
  border-bottom-color: #3a4b52;
  padding-top: 20px;padding-bottom: 20px;
}
.project-indicator {background: var(--yellow);box-shadow: 0 0 0 4px #ffe1001c}
.editor-top input:not([type=checkbox]):not([type=range]) {font-size: 14px;color: #f1f5f3}
.save-state {color: #b8cacc;font-size: 10px}
.step-tabs {background: #17232a;border-bottom-color: #34444b}
.step-tab {color: #a5b9c1;font-size: 12px;padding-top: 20px;padding-bottom: 20px}
.step-tab:hover {color: #fff;background: #ffffff08}
.step-tab.active {color: #ffe766;border-bottom-width: 3px;background: linear-gradient(180deg, #ffe10006, #ffe1000c)}
.step-tab>span {font-size: 10px;height: 25px;width: 28px;border-radius: 6px}
.editor-body {padding: 30px 29px 20px}
.section-heading {margin-bottom: 25px}
.section-heading h2 {font-size: 23px;letter-spacing: -.7px}
.section-heading p {font-size: 13px;color: #b0c1c8;margin-top: 7px}
.source-options {gap: 12px;margin-bottom: 27px}
.source-option,.caption-option,.voice-option,.aspect-option {
  background: #1c2a32;
  border-color: #435862;
  border-radius: 11px;
  transition: background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.source-option {min-height: 84px;padding: 16px}
.source-option:hover,.caption-option:hover,.voice-option:hover,.aspect-option:hover {
  background: #273944;border-color: #718991;transform: translateY(-2px);
}
.source-option.active,.caption-option.active,.voice-option.active,.aspect-option.active {
  background: linear-gradient(135deg, #34371f, #242e27);
  border-color: #aba03f;
  box-shadow: inset 0 0 0 1px #ffe1001e, 0 10px 25px #00000020;
}
.source-option strong,.caption-option strong,.voice-option strong,.aspect-option strong {font-size: 13px}
.source-option small,.caption-option small,.voice-option small,.aspect-option small {font-size: 10px;color: #b0c2c9}
.source-icon {width: 36px;height: 36px;display:grid;place-items:center;border-radius: 9px;background: #31414a}
.source-option.active .source-icon {background: #4d4a28}
.field-label label,label,.field-label>span:first-child {color: #e4eceb;font-size: 13px}
.field-label>span:last-child:not(:first-child) {color: #95afb8;font-size: 9px}
input:not([type=checkbox]):not([type=range]),textarea,select {
  background: #101a20;border-color: #415660;color: #f2f6f5;
  border-radius: 9px;padding: 13px 15px;font-size: 13px;
}
textarea::placeholder,input::placeholder {color: #91a7b2}
textarea:hover,input:not([type=checkbox]):hover,select:hover {border-color: #829ba5}
input:focus-visible,textarea:focus-visible,select:focus-visible {outline: 2px solid #ffe10082;outline-offset: 1px}
.inspiration {gap: 8px;margin-top: 13px}
.inspiration>span {color: #afc0c5;font-size: 10px}
.inspiration button {background: #26343d;border-color: #445c67;border-radius: 7px;color: #d2e1e4;font-size: 10px}
.inspiration button:hover {background: #32382c}
.script-label {margin-top: 31px}
.ai-button {background: #38371f;border-color: #746b31;border-radius: 8px;color: #ffe87e;font-size: 11px;padding: 10px 12px}
.script-meta {font-size: 10px;color: #b0c1c5}
.advanced-fields {border-color: #3b4e56;padding-top: 18px}
.advanced-fields summary {font-size: 12px;color: #d8e4e4;padding: 4px 0}
.editor-footer {background: #142027;border-top-color: #3a4d56;padding: 20px 29px}

.preview-column {
  background: linear-gradient(150deg, #19272e, #101a20);
  border: 1px solid #3b535d;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 50px #0000002e,inset 0 1px #ffffff0c;
}
.preview-heading {margin-bottom: 18px}
.preview-heading h2 {font-size: 15px;color: #eef3ef;font-weight: 600}
.live-badge {font-size: 9px;color: #f0e687;border-color: #726a36;background: #373821}
.live-badge>span {background: var(--yellow);box-shadow: 0 0 8px var(--yellow)}
.preview-surface {
  border: 1px solid #637781;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 25%, #3a4546, #090d0f 70%);
  box-shadow: inset 0 0 0 5px #0c151a,0 16px 28px #0000004d;
  padding: 10px;
}
.video-preview {border-radius: 8px}
.preview-controls>span,.preview-details strong {color: #e0ecea}
.preview-details span {color: #a3bac0;font-size: 9px}
.preview-notice,.photo-credit {color: #b2c6ca;font-size: 10px}
.tip-card {background: linear-gradient(135deg, #263a40, #1a292f);border-color: #486069;border-radius: 11px}
.tip-card strong {font-size: 12px;color: #e9f0e9}
.tip-card p {font-size: 11px;color: #b8cbd0}

.library-toolbar {border-color: #3a4d56;padding-bottom: 20px}
.filter-tabs>button {font-size: 12px;color: #c0d0d3;border-radius: 8px}
.filter-tabs>button.active {background: #3a3a21;border-color: #8a7f36;color: #ffed86}
.project-card,.asset-card {border-radius: 14px;transition: transform .18s,border-color .18s,box-shadow .18s}
.project-card:hover,.asset-card:hover {transform: translateY(-3px);border-color: #738992;box-shadow: 0 24px 44px #00000045}
.project-card-top {background: radial-gradient(circle at 78% 22%, #617b5e50, transparent 40%),linear-gradient(135deg,#2b4851,#14232b)}
.project-card-top .project-orbit svg {color: #c7dad6}
.project-card-body {padding: 20px}
.project-card-body h3 {font-size: 16px}
.project-card-body p {font-size: 11px;color: #b5c7c9}
.project-status {font-size: 9px;background: #0d1a20ed;color: #e2e9e5;padding: 7px 9px}
.project-card-footer .button,.asset-card-actions .button {font-size: 10px}
.asset-card h3 {font-size: 13px}
.asset-card small {font-size: 10px;color: #b6c7c9}
.brand-hero,.panel {border-radius: 16px;border-color: #3e535b}
.brand-hero {background: radial-gradient(circle at 20% 50%,#ffe1001a,transparent 47%),linear-gradient(135deg,#23343a,#131e24)}
.panel p {color: #bacbd0}
.auth-dialog,.video-dialog,.confirm-dialog {background: #18262e;border-color: #65808c;box-shadow: 0 30px 110px #000a}
.toast {background: #2b4148;border-color: #78949a}

@media(max-width:1200px) and (min-width:721px) {
  .studio-layout {grid-template-columns: minmax(0,1fr)}
  .preview-column {display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto auto;gap:0 25px}
  .preview-heading {grid-column:1/-1}
  .preview-surface {grid-column:1;grid-row:2/7}
  .preview-controls {grid-column:1;grid-row:7}
  .preview-notice {grid-column:2;grid-row:2;align-self:start}
  .preview-details {grid-column:2;grid-row:3;margin-top:18px}
  .photo-credit {grid-column:2;grid-row:4}
  .tip-card {grid-column:2;grid-row:6;align-self:end}
}

@media(max-width:720px) {
  body {background:radial-gradient(circle at 80% 0%,#1534389c,transparent 24rem),var(--bg)}
  .sidebar {box-shadow: 18px 0 50px #0009}
  .topbar {height: 66px}
  main {padding: 29px 16px 0}
  .page-heading {align-items:start;gap: 12px;padding-bottom: 24px;margin-bottom: 25px}
  h1 {font-size: clamp(30px,8vw,38px);letter-spacing: -1.6px;line-height: 1.1}
  .page-heading p {font-size: 12px;margin-top: 12px}
  .studio-layout {display:block}
  .editor-body {padding: 25px 18px 18px}
  .editor-top,.step-tabs {padding-left: 18px;padding-right: 18px}
  .editor-top input:not([type=checkbox]):not([type=range]) {font-size: 13px}
  .save-state {font-size: 9px}
  .step-tabs {gap: 4px}
  .step-tab {font-size: 10px;gap: 4px;min-width: 0;white-space: normal;text-align: center}
  .step-tab>span {height: 22px;width: 24px;flex-shrink:0}
  .section-heading h2 {font-size: 20px}
  #theme-field .field-label {display:block}
  #theme-field .field-label>span:last-child {display:block;margin-top:4px}
  .source-option {min-height: 70px}
  .source-options {grid-template-columns: 1fr}
  .source-option strong,.caption-option strong,.voice-option strong {font-size: 12px}
  .editor-footer {padding: 18px;gap: 9px}
  .editor-footer .button {font-size: 11px}
  .preview-column {display:block;margin-top: 24px;padding: 18px}
  .preview-surface {max-width: 300px;min-height: 0;margin: auto}
  .preview-controls {max-width: 300px;margin: auto}
  .preview-notice {margin-top: 7px}
  .project-card-body {padding: 16px}
  .brand-hero {padding: 25px}
  .page-heading>.button {min-width: 44px;min-height: 44px}
}

@media(max-width:390px) {
  .step-tab {font-size: 9px}
  .step-tab>span {width: 22px}
  .editor-footer {flex-direction:column;align-items:stretch}
  .step-actions {margin-left:0;justify-content:flex-end}
  .editor-footer .button.ghost {justify-content:flex-start}
}

@media(prefers-reduced-motion:reduce) {
  .source-option,.caption-option,.voice-option,.aspect-option,.project-card,.asset-card {transition:none}
}