.scene { width:100%; height:480px; position:relative; touch-action:none; }
.progress-overlay { position:fixed; inset:0; z-index:100; background:#ffffffb3; display:grid; place-items:center; padding:20px; }
.progress-panel { display:flex; align-items:center; gap:14px; background:white; border:1px solid #d8e1da; border-radius:6px; padding:24px; box-shadow:0 8px 32px #17312115; max-width:100%; }
.progress-panel strong { font-size:14px; line-height:1.6; }
.spinner { display:block; flex:0 0 24px; width:24px; height:24px; border:3px solid #dce9df; border-top-color:#287454; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .spinner { animation-duration:2s; } }
.scene canvas { width:100%; height:100%; display:block; outline:none; }
.tray-summary { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:16px; font-size:12px; color:#52635a; }
.tray-summary strong { color:#244b39; font-size:16px; }
.scene-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:14px 0; border-bottom:1px solid #dce3de; }
.scene-tools button { min-width:38px; height:38px; }
.scene-tools button svg { width:16px; height:16px; vertical-align:middle; }
.scene-tools label { display:flex; align-items:center; gap:8px; font-size:12px; }
.scene-tools input { width:65px; height:38px; }
.bead-order { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.bead-order button { font-size:11px; padding:6px 9px; }
.bead-order .active { border-color:#26805a; color:#176445; background:#eaf3ed; }
.model-note { color:#778179; font-size:11px; line-height:1.7; }
.parameter, .discussion { border-top:1px solid #e0e5e1; margin-top:24px; padding-top:14px; }
.parameter h3, .discussion h3 { font-size:13px; font-weight:600; }
.parameter input[type=color] { height:38px; padding:4px; width:60px; }
.parameter-symbol { width:50px; height:58px; display:flex; align-items:center; justify-content:center; color:#27795c; font-size:28px; background:#eff4f0; }
.message { padding:8px 0; border-bottom:1px solid #e7ebe8; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.message p { white-space:pre-wrap; margin:6px 0; }
.message strong { color:#286a4c; }
.message.user strong { color:#aa6139; }
#sendDiscussion { margin-top:8px; }
.idea { padding:12px 0 20px; border-bottom:1px solid #dce3de; }
.idea textarea { min-height:150px; margin-top:8px; }
details { margin:16px 0; line-height:1.8; font-size:12px; overflow-wrap:anywhere; }
summary { cursor:pointer; color:#4e6959; }
.service-hint:empty { display:none; }
.service-row { gap:12px; }
.actions > .form-label { flex-basis:100%; }
button, p, label { overflow-wrap:anywhere; }
@media(max-width:760px) { .scene { height:330px; } .tray-summary { gap:8px; } .scene-tools { gap:6px; } }
.project-tools { padding: 8px 0; }
.project-tools .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tools svg { width: 18px; height: 18px; }
.stone-photo-viewer { position:relative; width:100%; }
.stone-photo-viewer .preview { display:block; }
.stone-photo-viewer .preview { height:clamp(160px,30dvh,300px); }
.stone-thumbnails { display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,72px)); gap:8px; margin:12px 0; }
.stone-thumbnails button { position:relative; padding:3px; width:100%; aspect-ratio:1; border:2px solid transparent; background:white; border-radius:5px; }
.stone-thumbnails button[aria-pressed="true"] { border-color:#246548; }
.stone-thumbnails img { width:100%; height:100%; object-fit:contain; }
.stone-thumbnails span { position:absolute; bottom:2px; right:3px; background:#ffffffed; border-radius:2px; padding:0 4px; font-size:10px; }
.stone-generate { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 14px; }
.stone-generate > span { font-size:12px; color:#63756b; }
.stone-generate button { min-width:150px; }
.design-confirmation { border:1px solid #a8c7b5; background:#f4faf6; border-radius:6px; padding:12px; display:grid; gap:8px; margin:12px 0; }
.design-confirmation strong { font-size:13px; }
.photo-arrow { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; padding:8px; display:grid; place-items:center; background:#ffffffed; box-shadow:0 2px 8px #00000018; }
.photo-arrow.previous { left:8px; }
.photo-arrow.next { right:8px; }
.photo-arrow svg { width:20px; height:20px; }
.photo-counter { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); padding:4px 10px; border-radius:4px; background:#ffffffed; color:#303831; font-size:12px; }

html, body { height:100%; overflow:hidden; }
body { height:100dvh; display:grid; grid-template-rows:78px 55px minmax(0,1fr); }
main { min-height:0; overflow:hidden; }
.materials, .stage, .details { min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.stage { padding:18px 22px; }
.section-title, .stage-title { flex-shrink:0; margin-bottom:12px; }
#list { overflow:auto; min-height:0; flex:1; }
#editor, #content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
#editor:has(.panel-tabs), #content:has(> .panel-tabs) { display:flex; flex-direction:column; overflow:hidden; }
.panel-tabs { flex:none; display:flex; gap:4px; border-bottom:1px solid #dce3de; margin-bottom:12px; }
.panel-tabs button { flex:1; border:0; border-radius:0; padding:10px 5px; font-size:12px; background:transparent; }
.panel-tabs button[aria-selected=true] { border-bottom:2px solid #246548; color:#246548; font-weight:600; }
.panel-page { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:0 3px 12px; }
[hidden] { display:none !important; }
.discussion { height:100%; display:flex; flex-direction:column; margin:0; border:0; padding:0; min-height:0; }
.discussion-messages { flex:1; overflow-y:auto; min-height:0; overscroll-behavior:contain; padding-right:8px; }
.discussion textarea { flex:none; height:90px; max-height:150px; }
.discussion h3, .discussion button { flex:none; }
.idea { padding:4px 0 12px; }
.idea textarea { min-height:100px; height:110px; }
.idea .preview { height:clamp(160px,calc(100dvh - 460px),460px); }
.scheme-description { margin:2px 0 8px; }
.schemes .actions { margin-top:8px; }
.schemes .model-note { margin:6px 0; }
.guide-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.guide-gallery h3 { grid-column:1/-1; font-size:13px; }
.guide-gallery img { width:100%; aspect-ratio:1; object-fit:contain; }
#imageJobStatus { display:flex; flex:none; align-items:center; gap:10px; border-bottom:1px solid #dce3de; padding:8px 0; font-size:12px; max-height:140px; overflow:auto; }
#imageJobStatus small { display:block; color:#9d3e32; max-width:440px; }
.mobile-panes { display:none; }
@media(max-width:760px) {
  body { grid-template-rows:70px 55px 42px minmax(0,1fr); }
  .mobile-panes { display:flex; background:white; }
  .mobile-panes button { flex:1; border-radius:0; font-size:12px; padding:6px; }
  main { display:block; }
  main > * { height:100%; display:none !important; }
  body[data-pane="0"] .materials, body[data-pane="1"] .stage, body[data-pane="2"] .details { display:flex !important; }
  #list { display:block; }
  #list .item { width:100%; }
  .stage { padding:12px; }
  .preview { height:35vh; }
  .stage-title h1 { font-size:19px; }
}

/* Commands share target sizes; collection management stays separate from editing. */
button, .upload { min-height:44px; }
button:not(.item):not([data-item]):not(.photo-arrow), .upload {
  align-items:center; justify-content:center; gap:8px;
}
button:not(.item):not([data-item]):not(.photo-arrow) { display:inline-flex; }
button svg, .upload svg { width:18px; height:18px; flex:none; }
button span { min-width:0; }
input:not([type=checkbox]):not([type=color]), select { min-height:44px; }
.upload { display:flex; position:relative; line-height:1.4; border:1px solid transparent; }
.upload input { display:block; position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; }
.upload:focus-within { outline:2px solid #21724e; outline-offset:2px; }
.upload.secondary { background:white; color:#303831; border-color:#d9dfdc; }
.upload.secondary:hover { background:#f1f5f2; }
.upload:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.upload input:disabled { cursor:not-allowed; }
.command-heading { width:100%; font-size:12px; font-weight:600; color:#68746c; margin:0 0 8px; }
#createTools, #libraryUpload, #search, #uploadStatus { flex-shrink:0; }
#createTools button { width:100%; font-weight:600; }
#uploadStatus:empty { display:none; }
#list { padding:0 2px 8px; }
.project-tools { flex:none; border-top:1px solid #e0e5e1; padding:12px 0 0; max-height:45%; overflow:auto; }
.project-tools .actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:0; }
.project-tools button { font-size:12px; padding:10px; }
#undoDelete { width:100%; margin-top:8px; }
.alternate-design { margin:0 0 12px; }
.alternate-design summary, .angle-tools summary, .scheme-description summary { min-height:44px; padding:10px 0; }
.alternate-design input { margin:4px 0 8px; }
.alternate-design button { width:100%; }
.danger { color:#a23e36; border-color:#e7cbc7; }
.danger:hover { background:#fff1ef; }
.material-commands { padding:0 0 16px; }
.material-commands .actions { margin:0; gap:8px; }
.material-commands .actions > * { flex:1 1 140px; font-size:13px; }
.material-commands .photo-maintenance { margin-top:8px; }
.photo-maintenance button { background:transparent; }
.photo-arrow { width:44px; height:44px; }
.stone-photo-viewer:has(.preview[hidden]) { min-height:180px; display:grid; place-items:center; background:white; border:1px solid #e5e9e6; border-radius:5px; }
.stone-photo-viewer:has(.preview[hidden]) p { margin:0; font-size:13px; color:#738077; }
.workflow { margin:16px 0; gap:12px; flex-wrap:wrap; }
.actions { gap:8px; }
.schemes > .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:12px; border-top:1px solid #e0e5e1; }
#generateAll { grid-column:1/-1; grid-row:1; font-weight:600; }
#regenerate { grid-column:1/-1; }
.editor-save { display:grid; grid-template-columns:1fr; }
.model-actions { border-top:1px solid #e0e5e1; padding-top:16px; margin-top:16px; }
.model-actions button { width:100%; }
.angle-tools .check { padding:8px 0; min-height:44px; }
.angle-tools button { width:100%; margin-top:8px; }
.scene-tools button { min-width:44px; height:44px; }
.scene-tools input { height:44px; }
.bead-order { gap:8px; }
.bead-order button { min-height:44px; }
.dialog-title button { min-width:44px; }
.panel-tabs button { min-height:44px; }
.check { min-height:44px; }
.check input { width:18px; height:18px; flex:none; }
.mobile-panes button { min-height:44px; }
@media(max-width:760px) {
  body { grid-template-rows:70px 55px 44px minmax(0,1fr); }
  .project-tools { max-height:45%; }
  .stage-title { flex-wrap:wrap; }
}
.learning-status{border-bottom:1px solid #dfe5e1;padding:14px 0;font-size:12px}.learning-status>div{display:flex;gap:8px;align-items:center}.learning-status p,.learning-detail p{color:#67756e;line-height:1.6;overflow-wrap:anywhere}.learning-status svg{width:18px;height:18px}.learning-status button{width:100%}.small-spinner{width:16px;height:16px;border-width:2px}.learning-detail{padding:14px 0;border-top:1px solid #dfe5e1;font-size:12px}.learning-error{color:#a23a36!important}.sheet-annotations{margin-top:16px;padding:12px 0;border-top:1px solid #dfe5e1}
#designReview{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;box-sizing:border-box}
#designReview::backdrop{background:#13251ccc}
#designReview .dialog-title{position:sticky;top:-20px;background:white;padding:12px 0;z-index:1}
#designReview h2{font-size:18px;line-height:1.4}
.review-ideas article{border-top:1px solid #d8e0db;padding:12px 0}
.review-ideas h3{font-size:14px;margin:0 0 8px;overflow-wrap:anywhere}
.review-ideas p{font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.review-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
#reviewEdit textarea{width:100%;min-height:100px;margin:8px 0}
#reviewStart{margin-top:16px;width:100%}
#taskWindow{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box}
#taskList article{padding:14px 0;border-top:1px solid #d8e0db}
#taskList p{font-size:13px;overflow-wrap:anywhere;margin:8px 0}
.task-error{color:#9b2929}
.review-ideas label{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px}
.review-ideas input[type=radio]{width:18px;height:18px}
#taskButton{flex-shrink:0}
@media(max-width:760px){header{gap:6px}.brand strong{font-size:12px}header button{padding:8px;font-size:12px}}