:root {
  color-scheme: light;
  font: 14px/1.45 Inter, 'Microsoft YaHei UI', 'PingFang SC', system-ui, sans-serif;
  color: #182641;
  background: #f2f5fa;
  --blue: #154bf4;
  --line: #d7e0ef;
  --muted: #526581;
  --surface: #fff;
  --error: #a92238;
}
* {box-sizing: border-box;}
[hidden] {display: none !important;}
body {margin: 0;}
h1, h2, p {margin: 0;}
button, select, textarea, input {font: inherit; color: inherit;}
button, select, input, textarea, .button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
button, .button {padding: 7px 12px; cursor: pointer; text-decoration: none; white-space: nowrap;}
button:hover:not(:disabled), .button:hover {background: #edf3ff;}
:focus-visible {outline: 2px solid #1757ff; outline-offset: 3px;}
button:disabled, select:disabled, textarea:disabled {opacity: .57; cursor: default;}
input, textarea, select {padding: 7px 8px;}
button.accent {color: #0c39bf; border-color: #bdcdf5; background: #f8faff; font-weight: 650;}
button.primary {color: white; background: var(--blue); border-color: var(--blue); font-weight: 650;}
button.primary:hover:not(:disabled) {background: #123dda;}
.error-text {color: var(--error) !important;}
.brand-mark {display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: var(--blue); color: white; font-size: 22px; line-height: 1;}

.login-page {min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(ellipse at 10% 25%, #dae7ff, transparent 58%), #f3f6fb;}
.login-shell {display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 850px); min-height: 485px; overflow: hidden; background: white; border: 1px solid #e0e8f4; border-radius: 24px; box-shadow: 0 22px 85px #233c7026;}
.login-art {position: relative; overflow: hidden; isolation: isolate; padding: 42px; background: radial-gradient(circle, #cad9ff 1px, transparent 1.5px) 0 0/19px 19px, linear-gradient(145deg, #153ebc, #092778 68%, #04184b); color: white;}
.login-art .brand-mark {background: #ffffff24; border: 1px solid #ffffff64; width: 42px; height: 42px;}
.login-art h1 {margin-top: 35px; font-size: clamp(32px, 5vw, 52px); line-height: 1.16; letter-spacing: -.04em;}
.art-shape {position: absolute; z-index: -1; right: -45px; width: 230px; height: 155px; border: 1px solid #b7d5ffb0; border-radius: 20px; box-shadow: 0 16px 48px #09225580;}
.art-back {bottom: 70px; right: 25px; rotate: -14deg; background: #b2d6ffa6;}
.art-front {bottom: 25px; rotate: 10deg; overflow: hidden; background: linear-gradient(145deg, #acc7ff, #375ded);}
.art-front i, .art-front b {position: absolute; display: block; background: #d5fbff;}
.art-front i {width: 55px; height: 55px; border-radius: 50%; top: 19px; left: 24px;}
.art-front b {width: 175px; height: 175px; border-radius: 24px; rotate: 45deg; top: 87px; left: 65px; background: linear-gradient(#eef7ff, #72abff);}
.login-content {align-self: center; padding: 42px;}
.login-content h2 {font-size: 26px; letter-spacing: -.025em;}
.login-content p {margin-top: 6px; color: var(--muted);}
.login-content form, .login-content label {display: grid; gap: 9px;}
.login-content form {margin-top: 28px; gap: 18px;}
.login-content input {width: 100%; background: #fafcff; padding: 10px 12px;}
.login-content button {padding: 11px;}
.error-card {display: grid; justify-items: start; gap: 14px; width: min(100%, 490px); padding: 28px; background: white; border: 1px solid var(--line); border-radius: 17px;}
.error-card h1 {font-size: 23px;}
.error-card p {color: var(--muted);}

.workspace-page {min-height: 100vh; display: grid; grid-template-rows: auto 1fr;}
.app-header {display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 9px 18px; background: var(--surface); border-bottom: 1px solid var(--line);}
.brand, .board-actions, .account-actions {display: flex; gap: 9px; align-items: center;}
.brand h1 {font-size: 19px; line-height: 1.15; white-space: nowrap;}
.board-actions {border-left: 1px solid var(--line); padding-left: 16px;}
.board-actions select {width: clamp(105px, 14vw, 220px); font-weight: 650;}
.account-actions {margin-left: auto; min-width: 0;}
.account-name {max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted);}
#save-status {font-size: 12px; color: #246650; white-space: nowrap;}
.workspace {height: calc(100dvh - 64px); min-height: 585px; display: grid; grid-template-columns: clamp(193px, 19vw, 270px) minmax(0, 1fr) clamp(168px, 19vw, 280px); gap: 7px; padding: 7px;}
.sidebar, .studio {min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--surface);}
.sidebar {display: flex; flex-direction: column; overflow: hidden;}
.section-heading {display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 12px 14px; border-bottom: 1px solid #edf1f7;}
.section-heading h2 {font-size: 16px;}
.icon-button {padding: 3px 8px; font-size: 17px;}
.material-panel {min-height: 0; flex: 1; overflow: auto; padding: 12px;}
.material-panel.drop-active, .material-panel.pointer-drop {background: #edf3ff;}
.material-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.material-card {min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f9fbff;}
.material-card.picked {border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue);}
.material-select {display: block; position: relative; width: 100%; padding: 4px 4px 3px; background: transparent; border: 0; border-radius: 0; text-align: left;}
.material-select img {display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #edf3fa; border-radius: 5px;}
.material-check {position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; border: 1px solid #9eafd0; background: white; color: white;}
.picked .material-check {background: var(--blue); border-color: var(--blue);}
.material-name {display: block; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; padding: 3px;}
.material-tools {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.material-tools button {border: 0; background: transparent; color: #224f9d; font-size: 11px; padding: 4px;}
.upload-zone {display: grid; place-items: center; width: 100%; min-height: 113px; margin-top: 12px; padding: 11px 5px; color: #2d4974; background: #f8faff; border: 1px dashed #8ba6db; white-space: normal;}
.material-grid:empty + .upload-zone {margin-top: 0;}
.upload-icon {font-size: 29px; line-height: 1;}
.upload-zone small {color: var(--muted);}
.history-empty {display: grid; justify-items: center; gap: 6px; padding: 35px 10px; color: var(--muted);}
.history-empty span {font-size: 23px; color: #7290c0;}

.studio {display: grid; grid-template-rows: minmax(300px, 1fr) auto; overflow: hidden; background: #eaf0fc;}
.viewport {position: relative; overflow: hidden; touch-action: none; background: radial-gradient(circle, #b9c9ea 1px, transparent 1.3px) 0 0/20px 20px, #edf3ff;}
.viewport:focus-visible {outline-offset: -3px;}
.viewport.pan-mode, .viewport.pan-mode .canvas-item {cursor: grab;}
.viewport.pan-mode:active {cursor: grabbing;}
.world {position: absolute; top: 0; left: 0; transform-origin: 0 0;}
.canvas-item {position: absolute; top: 0; left: 0; box-shadow: 0 5px 16px #1c3b6a2b; border-radius: 3px; background: white; user-select: none; cursor: move;}
.canvas-item img {display: block; width: 100%; height: auto; object-fit: contain; border-radius: 3px;}
.canvas-item.selected {outline: 2px solid #1a58ff;}
.resize-handle {display: none; position: absolute; width: 12px; height: 12px; border: 2px solid #1a58ff; border-radius: 3px; background: white;}
.selected .resize-handle {display: block;}
.resize-handle.nw {top: -6px; left: -6px; cursor: nwse-resize;}
.resize-handle.se {bottom: -6px; right: -6px; cursor: nwse-resize;}
.resize-handle.ne {top: -6px; right: -6px; cursor: nesw-resize;}
.resize-handle.sw {bottom: -6px; left: -6px; cursor: nesw-resize;}
.canvas-tools, .zoom-controls, .item-actions {position: absolute; display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: white; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 4px 13px #24498d1a;}
.canvas-tools {top: 12px; left: 12px;}
.zoom-controls {right: 12px; bottom: 11px;}
.item-actions {top: 12px; right: 12px; max-width: calc(100% - 150px);}
.canvas-tools button, .zoom-controls button, .item-actions button {border: 0; padding: 4px 8px; font-size: 12px;}
.canvas-tools button[aria-pressed='true'] {background: #e9f0ff; color: #1040cc;}
.canvas-empty {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; color: #415c83; pointer-events: none; text-align: center;}
.canvas-empty div {font-size: 35px; color: #5e7fb5;}
.canvas-empty strong {font-size: 19px; color: #233d67;}
.canvas-empty button {pointer-events: auto; margin-top: 6px;}
.composer {z-index: 1; display: flex; flex-direction: column; gap: 9px; margin: 0 8px 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 5px 18px #24498d1a;}
.composer-row {display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; font-size: 12px; font-weight: 600;}
.composer-row label {display: flex; align-items: center; gap: 5px; white-space: nowrap;}
.composer-row textarea {flex: 1; min-width: 130px; resize: vertical; max-height: 140px; font-weight: 400;}
.references {flex: 1 1 125px; min-height: 35px; max-height: 92px; overflow: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); border: 1px dashed #c8d6ef; border-radius: 8px; padding: 3px 5px; font-weight: 400;}
.references.drop-active, .references.pointer-drop {border-color: var(--blue); background: #edf3ff;}
.reference-chip {display: flex; align-items: center; gap: 3px; border-radius: 6px; background: #f0f4fc; padding: 2px;}
.reference-chip img {width: 25px; height: 25px; object-fit: cover; border-radius: 4px;}
.reference-chip select, .reference-chip button {padding: 2px 4px; font-size: 12px;}
.preset-label {color: #315187; background: #f1f5fc; border-radius: 6px; padding: 4px 6px; white-space: nowrap;}
.generate-action {display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto;}
.generate-action small {color: var(--muted); line-height: 1;}
#custom-size {width: 85px;}
dialog {max-width: calc(100vw - 32px); border: 1px solid var(--line); border-radius: 13px; color: inherit; padding: 18px; box-shadow: 0 17px 45px #14305b4a;}
dialog::backdrop {background: #13274872;}
#board-dialog {width: 360px;}
#board-form, #board-form label {display: grid; gap: 12px;}
.dialog-actions, .preview-heading {display: flex; align-items: center; gap: 8px; justify-content: flex-end;}
.preview-heading strong {margin-right: auto; overflow-wrap: anywhere;}
#asset-dialog img {display: block; max-width: 75vw; max-height: 72vh; margin: 12px auto 0; object-fit: contain;}
.notice {position: fixed; z-index: 2; right: 18px; bottom: 18px; max-width: min(85vw, 500px); padding: 12px 16px; border: 1px solid #baceff; border-radius: 9px; background: #eef4ff; box-shadow: 0 5px 18px #24498d30; white-space: pre-wrap;}
.notice.failure {background: #fff1f1; color: var(--error); border-color: #edc1c9;}

@media (max-width: 1160px) {
  .account-name {display: none;}
  .workspace {grid-template-columns: 184px minmax(0, 1fr) 150px;}
}
@media (max-width: 850px) {
  .app-header {flex-wrap: wrap; gap: 8px;}
  .board-actions {border: 0; padding: 0;}
  .workspace {height: auto; min-height: calc(100dvh - 90px); grid-template-columns: 154px minmax(0, 1fr);}
  .history {grid-column: 1 / -1;}
  .history-empty {padding: 12px;}
}
@media (max-width: 550px) {
  .login-shell {grid-template-columns: 1fr; min-height: 0;}
  .login-art, .login-content {padding: 23px;}
  .login-art h1 {margin-top: 14px;}
  .art-shape {right: -100px;}
  .workspace {grid-template-columns: 1fr;}
  .materials {order: 1;}
  .history {order: 2;}
  .material-grid {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .material-panel {max-height: 350px;}
}