/* One studio, one operating position. Warm graphite and champagne throughout. */
:root {
  --desk-ink: #f3eade;
  --desk-muted: #b0a99f;
  --desk-accent: #e0bd85;
  --desk-accent-dark: #272014;
  --desk-surface: #141311;
  --desk-button: #24211c;
  --desk-border: #4a4236;
  --desk-active: #3c3020;
  --studio-accent: var(--desk-accent);
}
.studio-console { display: none; }
body[data-has-account="true"] { height: 100dvh; overflow: hidden; }
body[data-has-account="true"] .topbar { height: 80px; left: 30px; right: 30px; pointer-events: none; }
body[data-has-account="true"] .topbar .falao-brand { pointer-events: auto; }
body[data-has-account="true"] #composer {
  display: grid; grid-template-columns: minmax(0,1fr) 326px; grid-template-areas: "stage console";
  gap: 20px; width: 100%; height: 100dvh; padding: 88px 28px 24px; margin: 0;
  min-width: 0; min-height: 0; scroll-margin: 0;
}
body[data-has-account="true"] #studio-workspace {
  grid-area: stage; min-width: 0; min-height: 0; height: 100%; position: relative; overflow: hidden;
  border: 1px solid #76644938; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 55%,#a37b3220,transparent 61%),#08080745;
}
body[data-has-account="true"] #studio-console {
  grid-area: console; display: flex; flex-direction: column; gap: 0;
  width: 100%; min-width: 0; min-height: 0; height: 100%; padding: 20px;
  border: 1px solid #79644275; border-radius: 20px 20px 8px 20px;
  background: linear-gradient(145deg,#25201885,transparent 30%),#141311f5;
  box-shadow: inset 0 1px #ecd5ab24,0 18px 50px #0005;
  color: var(--desk-ink); overflow: hidden;
}
.console-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; }
.console-emblem { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #a88b585e; border-radius: 12px 12px 4px 12px; color: #e0bd85; font: 24px/1 "Moments Hand",serif; background: #30261a; }
.console-heading strong { display: block; font: 400 21px/1.35 "Moments Hand",serif; letter-spacing: .5px; }
.console-heading small { display: block; margin-top: 3px; font-size: 10px; color: #aba08f; }
#console-account { border-top: 1px solid #6d594d40; padding: 11px 0; }
#console-account .topbar-links { display: flex; width: 100%; padding: 0; gap: 8px; border: 0; border-radius: 0; background: none; }
#console-account .featured-person { display: flex; flex: 1; min-width: 0; gap: 8px; }
#console-account .featured-person > span { display: block; min-width: 0; }
#console-account .featured-person strong { display: block; max-width: 135px; color: #e7dfd1; font-size: 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#console-account .featured-person small { display: block; color: #968e82; font-size: 10px; }
#console-account .featured-person img { width: 26px; height: 26px; flex-basis: 26px; border-color: #81745f; }
#console-account #account-toggle { min-height: 32px; padding: 6px 9px; font-size: 10px; }
.console-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; margin: 0 0 15px; background: #08080680; border: 1px solid #413a2f; border-radius: 12px 12px 5px 12px; }
.console-tabs button { min-width: 0; min-height: 39px; padding: 6px; border-radius: 8px 8px 3px 8px; font-size: 12px; }
.console-selection { flex: 0 0 auto; border-bottom: 1px solid #6d594d40; padding: 0 0 14px; margin-bottom: 14px; }
.console-label { display: block; color: #a89d8b; font-size: 10px; font-weight: 500; letter-spacing: .5px; margin-bottom: 8px; }
.console-section-title { color: #eadfcb; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.console-help,#console-select-hint { color: #9f978b; font-size: 11px; line-height: 1.8; margin: 0 0 12px; }
#console-select-hint { margin: 0; }
#studio-console #chosen-person { display: flex; align-items: center; justify-content: flex-start; width: 100%; gap: 11px; margin: 0; padding: 0; }
#studio-console #chosen-person > img { width: 40px; height: 40px; flex: 0 0 40px; border-color: #d7b37c70; }
#studio-console #chosen-person > div { display: block; flex: 1; min-width: 0; }
#studio-console #chosen-name { max-width: none; color: #f0e7da; font-size: 14px; line-height: 1.6; }
#studio-console #chosen-handle { display: block; max-width: none; color: #a59a89; font-size: 11px; }
#studio-console #planet-guidance { display: none; }
.console-content { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #6d5b40 transparent; padding: 0 3px 2px 0; }
.console-pane { min-width: 0; }
#studio-console #builder-controls { display: block; padding: 0; margin: 0; }
.console-group { margin-bottom: 17px; min-width: 0; }
#studio-console .search-area { width: 100%; margin: 0; }
#studio-console .search-box { min-height: 43px; padding: 0 11px; background: #0d0c0a; border: 1px solid #554832; border-radius: 10px 10px 4px 10px; box-shadow: inset 0 1px 5px #0006; }
#studio-console .search-box input { color: #f1e4cf; font-size: 12px; }
#studio-console .search-box input::placeholder { color: #938979; font-size: 11px; }
#studio-console .search-box > span { color: #c8a979; }
#studio-console .search-results { position: relative; top: 0; margin-top: 6px; width: 100%; max-height: 190px; background: #211d17; border-color: #7e6746; box-shadow: none; }
#studio-console .search-results button { border: 0; background: transparent; }
#studio-console .search-results button:hover { background: #3a2e1d; }
#studio-console .search-results strong { color: #eee0c9; }
#studio-console .search-results small { color: #b6a58d; }
#studio-console .view-switch,#studio-console .circle-scopes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 6px; padding: 0; border: 0; background: none; margin: 0; }
#studio-console .circle-scopes { grid-template-columns: repeat(3,minmax(0,1fr)); }
#studio-console .scope-option { display: block; min-height: 55px; padding: 8px 2px; }
#studio-console .scope-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#studio-console .scope-copy strong { font-size: 13px; color: inherit; }
#studio-console .scope-copy small { display: block; position: static; width: auto; height: auto; clip-path: none; color: inherit; opacity: .68; font-size: 9px; }
#studio-console .view-switch button { min-height: 39px; padding: 7px 6px; font-size: 12px; }
#studio-console #sphere-controls { display: block; width: 100%; margin: 0; padding: 0; border: 0; }
#studio-console #sphere-help { display: none; }
#studio-console #sphere-controls > div { display: grid; grid-template-columns: 36px 36px 1fr 1.3fr; gap: 5px; width: 100%; }
#studio-console #sphere-controls button { min-width: 0; min-height: 36px; padding: 5px; font-size: 11px; }
#studio-console #sphere-zoom-out,#studio-console #sphere-zoom-in { width: auto; font-size: 18px; }
#studio-console #range-summary { display: block; color: #9d9384; font-size: 10px; text-align: left; }
#studio-console #camera-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; border: 0; border-radius: 0; background: none; gap: 7px; margin: 16px 0; }
#studio-console #sound-toggle { grid-column: 1 / -1; }
#studio-console #retry-photo-portraits { grid-column: 1 / -1; }
#studio-console #camera-controls button { min-height: 42px; padding: 8px; font-size: 12px; }
#studio-console #portrait-quality { text-align: left; color: #a79c89; font-size: 10px; line-height: 1.7; margin: 0; }
.console-record-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
#console-record-person #selected-profile { font-size: 11px; color: #ceb688; text-decoration: none; }
#studio-console .dossier-state { color: #e0c797; border-color: #756044; background: #2e2418; }
#studio-console .interaction-record-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; }
#studio-console .record-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
#studio-console .record-filter { min-height: 39px; padding: 6px; font-size: 11px; }
#studio-console .record-sort { width: 100%; margin: 0; }
#studio-console .record-sort > span { position: static; width: auto; height: auto; clip-path: none; margin-right: 10px; color: #aa9f8e; font-size: 11px; }
#studio-console .record-sort select { flex: 1; min-height: 39px; color: #e2d2b7; border-color: #5a4c37; background: #211c15; border-radius: 9px 9px 3px 9px; }
#studio-console .record-pagination { display: grid; gap: 8px; border: 0; padding-top: 14px; }
#studio-console .record-progress { color: #a59a87; font-size: 10px; }
#studio-console .record-more { width: 100%; }
#console-record-update { margin-top: 18px; }
#studio-console #refresh-pair { width: 100%; }
.console-primary { flex: 0 0 auto; padding-top: 17px; margin-top: 8px; border-top: 1px solid #6d594d40; }
.console-primary:has(> :not([hidden])) { min-height: 0; }
.console-primary:not(:has(> :not([hidden]))) { display: none; }
#studio-console #go-camera { display: flex; align-items: center; justify-content: center; min-height: 50px; width: 100%; font-size: 14px; text-decoration: none; }
#studio-console #console-print-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
#studio-console #shutter-button { min-height: 50px; font-size: 14px; padding: 12px 8px; }
#studio-console #save-button { min-height: 39px; font-size: 12px; }
.console-status { flex: 0 0 auto; padding-top: 10px; }
#studio-console #circle-tools { display: block; width: 100%; margin: 0; }
#studio-console #circle-zoom-note { display: block; font-size: 10px; color: #a69d8d; text-align: left; }
#studio-console .circle-image-actions { justify-content: flex-start; margin-top: 6px; }
#studio-console #retry-portraits { min-height: 30px; font-size: 10px; padding: 4px 8px; }
#studio-console #builder-status { margin: 0; min-height: 0; text-align: left; color: #c9bca5; font-size: 11px; line-height: 1.7; }
body:not([data-studio-view="planet"]) #circle-tools,body:not([data-studio-view="camera"]) #builder-status { display: none !important; }
.console-about { flex: 0 0 auto; margin-top: 12px; color: #a39783; font-size: 10px; max-height: 180px; overflow: auto; }
.console-about summary { cursor: pointer; padding-block: 5px; }
.console-about .source-details { width: 100%; margin: 7px 0; padding: 0; border: 0; font-size: 10px; }
.console-about p { line-height: 1.8; }
.console-about a { color: #d3b98f; }

/* Matching controls: a bevel, one squared corner, and one accent for all states. */
#studio-console button,#studio-console #go-camera,.result-dialog .dialog-actions > button,.result-dialog .dialog-actions > a,.person-card-primary {
  border: 1px solid var(--desk-border); border-radius: 10px 10px 4px 10px;
  background: linear-gradient(180deg,#322c2366,transparent 65%),var(--desk-button);
  color: #d9cdbb; box-shadow: inset 0 1px #e6d0a91a,0 2px 3px #0004;
  transition: background .16s,border-color .16s,box-shadow .16s; font-family: var(--font-ui);
}
#studio-console button:hover:not(:disabled),#studio-console #go-camera:hover,.result-dialog .dialog-actions > button:hover:not(:disabled) { border-color: #ba9a69; background-color: #342b1e; color: #fff1da; }
#studio-console button[aria-selected="true"],#studio-console button[aria-pressed="true"] { color: #f4d6a4; background: linear-gradient(155deg,#65482155,transparent),#3a2d1b; border-color: #c7a267; box-shadow: inset 0 1px #f3d6a335,inset 0 -2px #05040366; }
#studio-console #go-camera,#studio-console #shutter-button,.result-dialog .dialog-actions > a,.person-card-primary { background: linear-gradient(135deg,#eed0a0,#d3ad74); color: var(--desk-accent-dark); border-color: #efc78d; box-shadow: inset 0 1px #fff5dca6,0 5px 15px #0005; font-weight: 600; }
#studio-console #go-camera:hover,#studio-console #shutter-button:hover:not(:disabled),.person-card-primary:hover { background: linear-gradient(135deg,#f9dcb0,#e5bd83); color: #20190e; }
#studio-console :is(button,a,select,input):focus-visible { outline: 2px solid #f0c994; outline-offset: 3px; }
#studio-console button:disabled { opacity: .35; box-shadow: none; }

/* The visual area owns its full rectangle. No controls overlay either canvas. */
body[data-studio-view="planet"] #camera-section,body[data-studio-view="planet"] #relationship-details,
body[data-studio-view="camera"] #planet-section,body[data-studio-view="camera"] #relationship-details,
body[data-studio-view="records"] #planet-section,body[data-studio-view="records"] #camera-section { display: none !important; }
#studio-workspace #planet-section { width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; }
body[data-has-account="true"] #people-title { position: absolute; top: 20px; left: 24px; width: auto; height: auto; clip-path: none; overflow: visible; font: 400 24px/1.4 "Moments Hand",serif; color: #f0e2c9; }
body[data-has-account="true"] #people-count { position: absolute; top: 26px; right: 24px; width: auto; height: auto; clip-path: none; overflow: visible; color: #ad9f88; font-size: 11px; }
#studio-workspace .picker-body { inset: 62px 12px 12px; width: auto; height: auto; }
#studio-workspace .relationship-panel { width: 100%; max-width: none; height: 100%; padding-inline: 8px; background: transparent; }
#studio-workspace #relationship-list button[aria-pressed="true"] { background: #352819b3; border-color: #bfa271; }
#studio-workspace #relationship-list button:hover { background: #292219bb; }
#studio-workspace #camera-section { display: grid; grid-template-rows: 55px minmax(0,1fr); width: 100%; height: 100%; max-width: none; min-height: 0; padding: 14px 16px 10px; gap: 0; border: 0; margin: 0; scroll-margin: 0; }
#studio-workspace #camera-selection { display: none; }
#studio-workspace .camera-heading { justify-content: center; }
#studio-workspace #preview-title { font: 400 24px/1.4 "Moments Hand",serif; color: #f0e2c9; }
#studio-workspace #preview-person { display: none; }
#studio-workspace #camera-section .visual-stage.voxel-printer { min-height: 0; height: 100%; width: 100%; }
#studio-workspace #camera-section .voxel-tools { color: #a7987f; }
#studio-workspace #relationship-details { width: 100%; height: 100%; max-width: none; min-height: 0; overflow: auto; margin: 0; border: 0; border-radius: 0; background: #0c0b09cc; padding: 24px; scrollbar-width: thin; }
#studio-workspace .dossier-head { display: none; }
#studio-workspace .interaction-header { margin-bottom: 20px; }
#studio-workspace #dossier-title { font: 400 26px/1.4 "Moments Hand",serif; color: #f0e2c9; }
#studio-workspace .relationship-metrics { gap: 8px; margin-bottom: 18px; }
#studio-workspace .relationship-metrics > div { background: #201b14a8; border-color: #4b4030; padding: 12px; }
#studio-workspace .relationship-metrics > div > span { color: #b5a891; font-size: 11px; }
#studio-workspace .relationship-metrics strong { color: #f0d4a6; }
#studio-workspace .verification-report { background: #201c15; border-color: #4f432f; }
#studio-workspace .record-parent { background: #211c14; border-color: #aa8a53; }
#studio-workspace .record-type { background: #33281b; color: #ddc19a; }
#studio-workspace .record-verification { color: #c5aa7f; }
#studio-workspace .records-section-heading { margin-bottom: 4px; }
#studio-workspace .sphere-person-card { background: #1b1711fa; border-color: #997c51; border-radius: 12px 12px 5px 12px; }
.result-dialog { background: #15120f; border-color: #766143; }
.result-artwork { background: radial-gradient(ellipse at center,#30281d,#15120f 72%); }
.result-formats { background: #100e0b; border-color: #675438; }
.result-formats button[aria-pressed="true"] { background: #4a3820; color: #f2d4a0; }
.result-styles button { background: #211b14; border-color: #4f4130; border-radius: 10px 10px 4px 10px; }
.result-styles button[aria-pressed="true"] { background: #372818; border-color: #cfa96e; }
.result-close { color: #ead4af; background: #2a2116; border-color: #766044; }

@media(max-width:1100px) and (min-width:761px) {
  body[data-has-account="true"] #composer { grid-template-columns: minmax(0,1fr) 298px; padding-inline: 18px; gap: 14px; }
  body[data-has-account="true"] #studio-console { padding: 16px; }
  #studio-workspace #relationship-details { padding: 18px; }
  #studio-workspace .relationship-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-height:760px) and (min-width:761px) {
  body[data-has-account="true"] #composer { padding-top: 72px; padding-bottom: 14px; }
  body[data-has-account="true"] .topbar { height: 64px; }
  .console-heading { display: none; }
  body[data-has-account="true"] #studio-console { padding: 16px; }
  #console-account { border-top: 0; }
  .console-heading small { display: none; }
  .console-heading strong { font-size: 19px; }
  .console-emblem { width: 30px; height: 30px; flex-basis: 30px; font-size: 20px; }
  #console-account { padding-block: 7px; }
  .console-tabs { margin-bottom: 9px; }
  .console-selection { margin-bottom: 8px; padding-bottom: 8px; }
  .console-primary { margin-top: 4px; padding-top: 12px; }
  .console-about { margin-top: 6px; }
  .console-group { margin-bottom: 6px; }
  .console-label { margin-bottom: 4px; }
  #studio-console .scope-option { min-height: 49px; padding-block: 6px; }
  #studio-console #range-summary { display: none; }
}
@media(max-width:760px) {
  body[data-has-account="true"] { height: auto; overflow: auto; }
  body[data-has-account="true"] .topbar { height: 70px; left: 16px; right: 16px; }
  body[data-has-account="true"] #composer { display: flex; flex-direction: column; height: auto; min-height: 100dvh; padding: 78px 12px 16px; gap: 12px; }
  body[data-has-account="true"] #studio-workspace { order: 0; height: clamp(330px,52dvh,500px); width: 100%; flex: 0 0 auto; border-radius: 16px; scroll-margin-top: 78px; }
  body[data-studio-view="records"][data-has-account="true"] #studio-workspace { height: 58dvh; }
  body[data-has-account="true"] #studio-console { order: 1; height: auto; min-height: 0; overflow: visible; width: 100%; flex: 0 0 auto; padding: 17px; border-radius: 16px 16px 6px 16px; }
  .console-heading { padding-bottom: 12px; }
  .console-content { overflow: visible; max-height: none; }
  .console-tabs button { min-height: 44px; }
  #console-account .featured-person strong { max-width: none; }
  #studio-console #account-toggle { min-height: 38px; }
  #studio-console #sphere-controls > div { grid-template-columns: 44px 44px 1fr 1.3fr; }
  #studio-console #sphere-controls button,#studio-console .view-switch button { min-height: 44px; }
  #studio-console #camera-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #studio-console #camera-controls button { min-height: 44px; }
  #studio-console .record-filter,#studio-console .record-sort select { min-height: 44px; }
  .console-selection { margin-bottom: 17px; }
  #studio-workspace #people-title { top: 13px; left: 16px; font-size: 21px; }
  #studio-workspace #people-count { top: 21px; right: 16px; font-size: 10px; }
  #studio-workspace .picker-body { inset: 51px 6px 8px; }
  #studio-workspace #camera-section { padding: 7px 8px; grid-template-rows: 40px minmax(0,1fr); }
  #studio-workspace #preview-title { font-size: 21px; }
  #studio-workspace #relationship-details { padding: 17px; }
  #studio-workspace .relationship-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-height:520px) and (min-width:761px) {
  body[data-has-account="true"] #composer { padding-top: 61px; padding-bottom: 8px; }
  .console-heading,.console-about { display: none; }
  #console-account { padding: 0 0 6px; }
  #console-account #account-toggle { min-height: 26px; padding: 4px 7px; }
  #console-account .featured-person img { width: 22px; height: 22px; flex-basis: 22px; }
  #console-account .featured-person small { display: none; }
  .console-tabs { margin-bottom: 8px; }
  .console-tabs button { min-height: 32px; }
  .console-selection { padding-bottom: 7px; margin-bottom: 7px; }
  .console-selection > .console-label { display: none; }
  #studio-console #chosen-person > img { width: 30px; height: 30px; flex-basis: 30px; }
  .console-primary { padding-top: 8px; }
  #studio-console #console-print-actions:has(#save-button:not([hidden])) { grid-template-columns: 1fr 1fr; }
  #studio-console #go-camera,#studio-console #shutter-button { min-height: 40px; }
  #studio-console #shutter-button,#studio-console #save-button { padding: 6px; font-size: 12px; }
  .console-status { padding-top: 6px; }
  #studio-console #builder-status { font-size: 10px; line-height: 1.5; }
}