/* ==========================================================================
   Clay Atelier · design-tokens.css  (v1)
   用法：必须放在 style.css / studio-ui.css / product-studio.css 之后加载。
   作用：1) 定义唯一一套色彩/字号/圆角变量  2) 用少量覆盖规则把现有页面
         统一到这套变量上。以后新增样式一律写 var(--xxx)，不再写十六进制色值。
   对比度均按 WCAG 2.x 计算：正文 ≥ 4.5:1，控件边框 ≥ 3:1。
   ========================================================================== */

:root {
  /* ---- 字体 ---- */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  --font-brand: Georgia, "Songti SC", "Noto Serif SC", serif;       /* 仅用于 Logo 字标 */
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;       /* 仅用于样品编号 */

  /* ---- 字号：最小 12px，不再使用 9/10/11px ---- */
  --fs-xs: 12px;   /* 辅助说明、标签、状态 */
  --fs-sm: 13px;   /* 控件文字、卡片次级信息 */
  --fs-md: 14px;   /* 正文、按钮 */
  --fs-lg: 16px;   /* 卡片标题 */
  --fs-xl: 20px;   /* 面板标题 */
  --fs-2xl: 24px;  /* 页面标题 */

  /* ---- 中性色（带一点点绿的暖灰，和软陶/鼠尾草协调） ---- */
  --bg:             #F6F4EE;  /* 页面底色 */
  --surface:        #FFFEFB;  /* 面板、卡片、弹窗 */
  --surface-sunken: #F3F5EE;  /* 左侧步骤栏、输入区凹陷底 */
  --surface-hover:  #EDF1E7;  /* 悬停底 */
  --canvas:         #EEF0E8;  /* 3D 画布外圈底色 */
  --canvas-center:  #F8F8F3;  /* 3D 画布中心高光 */

  --line:           #E1E4D9;  /* 分割线、卡片描边 */
  --line-strong:    #C7CEBE;  /* 按钮描边、悬停描边 */
  --border-control: #8A9684;  /* 输入框/下拉框/复选框描边（3.07:1） */

  --text:           #2F3B35;  /* 主文字 11.6:1 */
  --text-2:         #55625A;  /* 次要文字 6.4:1 */
  --text-3:         #5E6A62;  /* 辅助说明 5.6:1（在浅绿底上仍 ≥ 4.8:1） */
  --text-disabled:  #9AA39B;  /* 仅用于禁用态 */

  /* ---- 主色：苔藓绿（唯一的操作色） ---- */
  --primary:        #4A6741;  /* 白字 6.35:1 */
  --primary-hover:  #3C5434;
  --primary-active: #30452A;
  --primary-subtle: #E8EFE2;  /* 选中态底色 */
  --primary-line:   #C3D2B8;  /* 选中态描边 */
  --primary-ink:    #3C5434;  /* 浅绿底上的文字 7.1:1 */

  /* ---- 点缀色：陶土（只表示“软陶/成品/已选对象”，不用于按钮） ---- */
  --clay:           #C8765F;
  --clay-subtle:    #FBEDE8;
  --clay-ink:       #9A4F3B;  /* 文字 5.9:1 */

  /* ---- 状态色：文字色 / 底色 / 描边色 ---- */
  --ok:     #2F6B45;  --ok-bg:     #E3F1E6;  --ok-line:     #B9D9C3;
  --warn:   #8A5A12;  --warn-bg:   #FFF4DC;  --warn-line:   #EBD29A;
  --danger: #B4432F;  --danger-bg: #FBEAE5;  --danger-line: #EFC2B7;
  --info:   #2F5F7A;  --info-bg:   #E5F0F5;  --info-line:   #B7D4E1;

  /* ---- 键盘焦点环：故意用蓝青色，在绿色按钮和白底上都清晰 ---- */
  --ring: #2F6F8F;

  /* ---- 圆角：只用 4 档 ---- */
  --r-sm: 6px;   /* 输入框、小标签 */
  --r-md: 8px;   /* 按钮 */
  --r-lg: 12px;  /* 卡片 */
  --r-xl: 16px;  /* 弹窗、登录卡片 */

  /* ---- 阴影：只用 3 档 ---- */
  --shadow-1: 0 1px 2px rgba(47, 59, 53, .06);
  --shadow-2: 0 8px 24px rgba(47, 59, 53, .12);
  --shadow-dialog: 0 24px 80px rgba(47, 59, 53, .28);

  /* ---- 版式 ---- */
  --header-h: 64px;
  --rail-w: 240px;
  --panel-w: 360px;
}

/* ============================ 基础 ============================ */
html, body { font-family: var(--font-sans); }
body { color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.brand { font-family: var(--font-brand); }

/* 统一焦点环（带 !important 的只是颜色，偏移量保留各处原设定） */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, a:focus-visible, .shape-card:focus-visible { outline-color: var(--ring) !important; }

/* ============================ 版式统一 ============================ */
@media (min-width: 761px) {
  header { height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--line); }
  main { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
}
@media (min-width: 1101px) {
  body.home-workflow > main,
  body:has(.photo-workflow) > main { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--panel-w); }
}
.workspace { background: radial-gradient(ellipse at center, var(--canvas-center), var(--canvas)); }

/* ============================ 按钮 ============================ */
button { border-color: var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--r-md); }
button:hover { border-color: var(--primary); background: var(--primary-subtle); }
button:disabled { opacity: .45; cursor: not-allowed; }
button[aria-busy="true"], button.is-busy { cursor: wait; }   /* 只有真正“处理中”才用 wait */

/* 主按钮：全站只有这一种（含主图页原来的陶土色导出按钮） */
.primary, .workflow-next, .warehouse #loadCatalogEntry,
.home-task-footer .primary, .home-task-footer #export {
  background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}
.primary:hover, .workflow-next:hover, .warehouse #loadCatalogEntry:hover,
.home-task-footer .primary:hover, .home-task-footer #export:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.primary:active, .workflow-next:active { background: var(--primary-active) !important; }

/* ============================ 选中态：全站同一种写法（浅绿底 + 绿描边） ============================ */
#shapes button.active, .seg .active, .modebar .active, .shape-families button.active,
.catalog-nav .active, #shapeCategories .active,
.radio-choices input:checked + span,
.home-step-nav button.active, .item.active, .photo-preset[aria-pressed="true"],
.warehouse-card[aria-pressed="true"], .warehouse #shapeCategories button[aria-pressed="true"],
.warehouse .shape-families button[aria-pressed="true"] {
  background: var(--primary-subtle); border-color: var(--primary); color: var(--primary-ink);
}
.radio-choices input:checked + span { font-weight: 600; }
.warehouse-card[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(74, 103, 65, .18); }

/* 控件强调色统一为主色（原来滑块是珊瑚色、勾选框是灰绿色） */
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--primary); }
.inspector input[type="range"]::-webkit-slider-thumb { background: var(--primary); box-shadow: 0 0 0 1px var(--primary-hover); }
.inspector input[type="range"]::-moz-range-thumb { background: var(--primary); }
.inspector input[type="checkbox"] { accent-color: var(--primary); }

/* ============================ 输入框 ============================ */
.inspector .control input[type="number"], .inspector select, .inspector #text,
.warehouse #shapeSearch, .warehouse select, .warehouse-detail select, .warehouse-detail textarea,
.auth-card input:not([type="checkbox"]) {
  border-color: var(--border-control); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }

/* ============================ 文字层级：消灭 9/10/11px 和浅灰字 ============================ */
.home-step-nav small, .home-panel-heading p, .home-panel-heading > span, .home-note, .home-rail-help,
.home-source-primary small, .home-source-divider, .home-preview-intro p, .home-source-upload small,
.photo-preset small, .photo-look small, .workflow-heading > span, .workflow-heading p, .step-intro p,
.workflow-tip, .stage-help, .photo-checks li, .design-step-help, .hint, .floating, .upload small,
.intro p, .tip, .eyebrow, .item small, .list-heading span, .preset-values span,
.number-unit small, .inspector .field-caption, .inspector .settings-section > p,
.inspector .settings-section > summary small, .inspector .bar-common label, .inspector .bar-fields label,
.bar-fields small, .bar-row > summary small, .inspector .bar-toggle, .bar-card-tools button,
.warehouse-code, .warehouse-footer, .note-indicator, .status-dot, .sidebar-label,
.warehouse-detail p, .warehouse #detailHint, .warehouse-detail #visibilityHint, .warehouse #noteMessage,
.rating-disclaimer, .detail-rating p, .home-export-review > p, .catalog-group-title, .muted {
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.7;
}
/* 控件内部文字至少 12px */
.home-task-footer button, .home-view-switch button, .home-project-menu > div button, .home-edit-more > div button,
.home-view-options > summary, .home-project-menu > summary, .home-edit-more > summary,
.toolbar button, .toolbar label, .edittools button, .photo-quick-row button, .shape-families button,
.warehouse .shape-families button, .home-secondary, #defaults, .inspector #addBar, .inspector #defaults {
  font-size: var(--fs-xs);
}
/* 步骤标题与面板标题 */
.home-step-nav strong { font-size: var(--fs-md); }
.home-panel-heading h2 { font-size: var(--fs-xl); }
.warehouse-card strong, .photo-preset strong, .photo-look strong { font-size: var(--fs-sm); }

/* ============================ 卡片 / 弹窗 圆角与阴影 ============================ */
.shape-dialog, .warehouse.shape-dialog, .export-repair, .catalog-note-dialog, .auth-card { border-radius: var(--r-xl); box-shadow: var(--shadow-dialog); }
.home-fold, .photo-advanced, .warehouse-card, .photo-preset, .item, .inspector .settings-section,
.home-source-primary, .panel { border-radius: var(--r-lg); }
.shape-dialog::backdrop, .export-repair::backdrop, .catalog-note-dialog::backdrop { background: rgba(47, 59, 53, .45); }

/* ============================ 顶部/步骤栏 ============================ */
.home-workflow .left, .home-rail-title { background: var(--surface-sunken); border-color: var(--line); }
.home-step-nav .home-step-number { border-color: var(--border-control); color: var(--text-2); }
.home-step-nav button.active .home-step-number { background: var(--primary); border-color: var(--primary); color: #fff; }
.home-step-nav button.done .home-step-number { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } /* 需在 JS 给已完成步骤加 .done */
.home-source-primary { background: var(--primary-subtle); border-color: var(--primary-line); }
.home-source-primary strong, .home-source-primary b { color: var(--primary-ink); }

/* ============================ 提示 / 校验状态 ============================ */
#modelWarning { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); }
#toast, .workspace > #toast { background: #2F3B35; border-color: #2F3B35; }
.error, #message:not(:empty) { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); }
.workflow-tip, .design-step-help, .home-preview-intro { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-line); }
.home-export-review #homeExportStatus { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }

/* ============================ 样品仓库 ============================ */
.warehouse-thumb, .warehouse #detailPreview { background: var(--surface-sunken); }
.warehouse svg path { fill: #E4EBDD; stroke: var(--primary); stroke-width: 1.4; }
.warehouse svg .catalog-detail { fill: none; stroke: var(--clay); stroke-width: 1.2; }
.warehouse-card { border-color: var(--line); }
.warehouse-card:hover { border-color: var(--primary); }
.warehouse-sidebar { background: var(--surface-sunken); }
.status-dot:before { background: var(--line-strong); }
.status-dot.printed { color: var(--warn); }  .status-dot.printed:before { background: var(--warn); }
.status-dot.listed  { color: var(--ok); }    .status-dot.listed:before  { background: var(--ok); }
.rating-badge[data-grade="A"] { background: var(--ok-bg); color: var(--ok); }
.rating-badge[data-grade="B"] { background: var(--info-bg); color: var(--info); }
.rating-badge[data-grade="D"] { background: var(--danger-bg); color: var(--danger); }

/* ============================ 主图页 ============================ */
.item { border-color: var(--line); }
.item .swatch { box-shadow: 0 0 0 1px var(--line-strong); }
.upload { border: 1px dashed var(--border-control); background: var(--surface-sunken); }
.upload:hover, .upload.over { background: var(--primary-subtle); border-color: var(--primary); }

/* ============================ 登录/账户页 ============================ */
.auth-body { background: radial-gradient(ellipse at top left, #E1E8D7, transparent 65%), var(--bg); }
.account-header, .panel { background: var(--surface); border-color: var(--line); }

/* Integration refinements for the shared navigation and current DOM. */
body{font-size:var(--fs-md)}button,input,select,textarea{font-family:var(--font-sans);font-size:var(--fs-md)}
.app-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.app-nav a{padding:7px 10px;border-radius:var(--r-md);text-decoration:none;color:var(--text-2);font-size:var(--fs-sm);white-space:nowrap}.app-nav a:hover,.app-nav a[aria-current=page]{background:var(--primary-subtle);color:var(--primary-ink)}
#name{background:var(--surface);border:1px solid var(--border-control);border-radius:var(--r-sm);padding:8px 10px;cursor:text;color:var(--text)}
#homeExportStatus[data-state=warn]{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.password-toggle{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}.password-toggle input{width:auto;margin:0}
.detail-rating,.warehouse-detail #detailHint{background:var(--surface-sunken);color:var(--text-2)}
@media(min-width:1101px){body:has(.photo-workflow)>main{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--panel-w)}}
@media(max-width:760px){header{height:auto;min-height:var(--header-h);flex-wrap:wrap}.app-nav{order:5;width:100%;justify-content:space-between}.app-nav a{padding:6px;font-size:var(--fs-xs)}}
.ui-icon{width:18px;height:18px;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.photo-workflow label:has(#thickness){display:flex;flex-wrap:wrap;gap:8px;align-items:center}.photo-workflow label:has(#thickness)>span{margin-left:auto}.photo-workflow #thickness{width:100%;flex-basis:100%}
#photoExport{background:var(--primary);border-color:var(--primary);color:var(--surface)}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important;border-color:#81967b!important;box-shadow:0 0 0 2px #81967b24!important}
.home-current-status{display:flex;align-items:center;gap:10px;margin:16px 0;padding:12px;border-top:1px solid #dce4da;font-size:12px}.home-current-status[hidden]{display:none}.home-current-status select{flex:1}
/* Unified dropdowns and settings navigation. */
select.enhanced-select{display:none!important}.select-button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:100px;width:100%;min-height:38px;padding:9px 12px;background:#fffdf9;border:1px solid #d4ddce;border-radius:9px;color:#354b3d;font:inherit;text-align:left;white-space:nowrap}.select-button:focus-visible{outline:2px solid #91a588!important;outline-offset:2px}.select-menu{z-index:20000;max-height:240px;overflow:auto;padding:5px;border:1px solid #d8e0d2;border-radius:10px;background:#fffdf9;box-shadow:0 12px 32px #20352225}.select-menu>button{display:block;width:100%;padding:9px 12px;border:0;border-radius:6px;background:transparent;text-align:left;color:#354b3d;font:13px inherit}.select-menu>button:hover,.select-menu>button:focus-visible{background:#edf2e8}.select-menu>button[aria-selected=true]{background:#e0ead8;color:#3d6035}.select-menu>button:disabled{opacity:.45}.select-button[hidden]{display:none!important}
.account-main{position:relative;max-width:1120px!important;padding:30px 24px!important;margin:0 auto!important}.account-main>.panel{margin-left:200px!important;padding:28px!important}.account-main>.panel[hidden]{display:none!important}.settings-nav{position:absolute;left:24px;top:190px;width:170px;display:flex;flex-direction:column;gap:6px}.settings-nav button{text-align:left;border:0;background:transparent;padding:12px 14px;border-radius:8px}.settings-nav button[aria-current=page]{background:#e4ecde;color:#3e6036;font-weight:600}.settings-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 26px}.settings-fields label{display:flex;flex-direction:column;gap:8px;font-size:13px}.settings-fields label:has(input[type=checkbox]){flex-direction:row;align-items:center}.settings-fields input[type=checkbox]{width:16px!important;height:16px;accent-color:#526e46}.settings-fields input[type=color]{height:40px;width:100%}.status-setting-row{display:flex;gap:8px;align-items:center;margin:10px 0}.status-setting-row input{flex:1;min-width:0}.status-setting-row button{padding:8px 10px}.account-main .form-grid{grid-template-columns:1fr!important;max-width:520px}.account-main .panel-title{gap:14px;align-items:center}.account-main input[hidden]{display:none!important}.account-main .upload-label{padding:10px 14px;cursor:pointer}.account-main .panel h2{margin-top:0}.account-main .panel h3{font-size:15px;margin-top:24px}
@media(max-width:760px){.settings-nav{position:static;width:auto;flex-direction:row;flex-wrap:wrap;margin-bottom:20px}.account-main>.panel{margin-left:0!important;padding:20px!important}.settings-fields{grid-template-columns:1fr}}
/* Compact settings center, independent of the studio's large form controls. */
.settings-center.account-main{max-width:1040px!important;padding:28px 24px!important;color:#28352e;font-family:"Segoe UI","Microsoft YaHei",sans-serif}
.settings-center>h1{font-size:24px;font-weight:650;margin:0 0 8px;letter-spacing:-.5px}.settings-center>h1+.muted{margin:0 0 26px;font-size:13px;color:#7a827b}.settings-center>.eyebrow[hidden]{display:none}
.settings-center .settings-nav{top:104px;left:24px;width:168px;gap:3px}.settings-center .settings-nav button{font-size:13px;font-weight:400;min-height:36px;padding:8px 12px;border-radius:6px;line-height:20px}.settings-center .settings-nav button[aria-current=page]{background:#e8ede5;color:#36523a;font-weight:600}
.settings-center.account-main>.panel{margin:0 0 24px 192px!important;padding:24px!important;border:1px solid #e2e5de;border-radius:10px;box-shadow:none;background:#fff}.settings-center .panel h2{font-size:17px;line-height:24px;margin:0 0 6px;font-weight:600}.settings-center .panel>.muted{font-size:12px;line-height:20px;margin:0 0 22px}.settings-center .panel h3{font-size:13px;margin:20px 0 4px;font-weight:600}
.settings-center .settings-fields{display:block;margin:0 0 18px}.settings-center .settings-fields>label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;min-height:52px;margin:0;padding:10px 0;border-bottom:1px solid #eef0eb;font-size:13px;color:#4b554c;line-height:20px}.settings-center .settings-fields>label:last-child{border-bottom:0}
.settings-center .settings-fields input:not([type=checkbox]),.settings-center .settings-fields .select-button{width:190px!important;flex:0 0 190px;min-height:34px;height:34px;margin:0!important;padding:6px 10px!important;border-radius:6px;font-size:13px;line-height:20px;border-color:#dce1d7;background:#fff;box-shadow:none}.settings-center .settings-fields input[type=color]{width:48px!important;flex-basis:48px;height:30px;padding:3px!important;cursor:pointer}
.settings-center .settings-fields label.settings-switch input[type=checkbox]{appearance:none;width:30px!important;height:18px!important;flex:0 0 30px;border:0;border-radius:20px;background:#cfd5ca;margin:0!important;position:relative;cursor:pointer;transition:background .15s}.settings-center .settings-switch input:before{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;transition:transform .15s}.settings-center .settings-switch input:checked{background:#526b48!important}.settings-center .settings-switch input:checked:before{transform:translateX(12px)}
.settings-center .settings-advanced{padding:0;margin:8px 0 0;border:0;border-top:1px solid #e6e9e1;border-radius:0;background:transparent}.settings-center .settings-advanced>summary{font-size:13px;font-weight:600;padding:16px 0;margin:0;cursor:pointer}.settings-center .settings-savebar{display:flex;justify-content:flex-end;align-items:center;gap:16px;border-top:1px solid #e6e9e1;padding:16px 0 0;margin-top:8px}.settings-center .settings-savebar p{margin:0!important;font-size:12px;color:#72806d}.settings-center button.primary{width:auto!important;min-height:34px;padding:7px 14px!important;font-size:13px;border-radius:6px;margin:0}.settings-center .status-setting-row{padding:8px 0;margin:0;border-bottom:1px solid #eef0eb}.settings-center .status-setting-row input{height:34px;padding:6px 10px;margin:0;border-radius:6px;font-size:13px}.settings-center .status-setting-row button{height:32px;padding:4px 9px;border-radius:5px;background:#fff}.settings-center #addStatus,.settings-center #saveStatuses{margin-top:16px}.settings-center .form-grid{gap:14px}.settings-center .form-grid label{margin:0;font-size:13px}.settings-center .form-grid input{padding:8px 10px;height:36px;margin-top:6px}.settings-center .form-grid button{justify-self:start}.settings-center input:focus-visible,.settings-center button:focus-visible{outline:2px solid #a1b296!important;outline-offset:2px}
@media(max-width:760px){.settings-center .settings-nav{position:static;width:auto;flex-direction:row;gap:4px;margin:0 0 18px}.settings-center.account-main>.panel{margin-left:0!important;padding:20px!important}.settings-center .settings-fields input:not([type=checkbox]),.settings-center .settings-fields .select-button{width:150px!important;flex-basis:150px}.settings-center .settings-fields input[type=color]{width:48px!important;flex-basis:48px}}
@media(max-width:400px){.settings-center.account-main{padding:20px 14px!important}.settings-center .settings-fields>label{gap:10px}.settings-center .settings-fields input:not([type=checkbox]),.settings-center .settings-fields .select-button{width:120px!important;flex-basis:120px}.settings-center .settings-fields input[type=color]{width:48px!important;flex-basis:48px}}
.settings-center .settings-status-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}.settings-center .settings-status-actions #addStatus,.settings-center .settings-status-actions #saveStatuses{margin:0!important;min-height:36px;height:36px;padding:7px 14px!important;font-size:13px;line-height:20px;border-radius:6px}.settings-center .status-setting-row{display:grid;grid-template-columns:32px minmax(0,1fr) 32px 32px;gap:8px;min-width:0}.settings-center .status-setting-row input{width:100%;min-width:0}.settings-center .status-setting-row button{width:32px;min-width:0}.settings-center .status-setting-row button[draggable=true]{cursor:grab}.settings-center.account-main>.panel{min-width:0}.settings-center #statusMessage{font-size:12px;line-height:1.6;margin:12px 0 0;color:#64735e}

/* Shared select treatment: compact trigger, distinct caret and checked option. */
.select-button{position:relative;overflow:hidden;text-overflow:ellipsis;display:block;padding-right:34px;background:#fff;border-color:#dce3d7;font-size:13px;line-height:20px;box-shadow:0 1px 2px #24391d05}
.select-button:after{content:'';position:absolute;right:14px;top:calc(50% - 4px);width:6px;height:6px;border-right:1.5px solid #788771;border-bottom:1.5px solid #788771;transform:rotate(45deg)}
.select-button[aria-expanded=true]{border-color:#6b855b;box-shadow:0 0 0 3px #6b855b15}.select-button[aria-expanded=true]:after{transform:rotate(225deg);top:calc(50% - 1px)}
.select-menu{background:#fff;padding:5px;border-radius:10px;box-shadow:0 10px 30px #263c2320}.select-menu>button{position:relative;min-height:36px;padding:8px 32px 8px 10px;font-family:inherit;font-size:13px;white-space:normal;overflow-wrap:anywhere}.select-menu>button[aria-selected=true]:after{content:'✓';position:absolute;right:11px;top:8px;color:#536d43}.select-menu>button:focus-visible{outline:2px solid #91a588;outline-offset:-2px}

/* Align action text and icons without changing card and navigation layouts. */
button{line-height:1.4;letter-spacing:normal}
.toolbar button,.edittools>button,.scene-tools button,.home-task-footer button,.workflow-next,.photo-quick-row button,.palette-picker-actions button,.display-actions button,.small-actions button,.copy-tools button,.warehouse-actions>button,.photo-catalog-heading button,.photo-catalog-footer button,.photo-catalog-pagination button,.catalog-add-button,.home-photo-action,#export,#save,#load,#displayCopy,#displayUndo,#displayReset{display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle;text-align:center}
button .ui-icon,summary .ui-icon{display:inline-block;width:16px;height:16px;flex:0 0 16px;vertical-align:-3px;margin:0}
.select-button{line-height:20px;text-align:left}.select-menu>button{line-height:20px;text-align:left}
.home-step-nav button{align-items:flex-start;text-align:left}.photo-look,.scheme-btn,.warehouse-card{text-align:left}
.display-actions button,.small-actions button,.copy-tools button,.photo-quick-row button{min-height:36px}

/* Phone editor: canvas above full-width controls; retain every tool. */
@media(max-width:760px){
 html,body{max-width:100%;overflow-x:clip}
 body>header{height:auto!important;min-height:60px;padding:10px 12px!important;gap:8px!important;flex-wrap:wrap}
 body>header .brand{font-size:20px}body>header .brand small,body>header .privacy,body>header .local{display:none}
 .app-nav{display:flex;overflow:auto;gap:4px;width:100%;flex:none;order:10}.app-nav a{flex:1;text-align:center;white-space:nowrap;padding:10px 8px}
 button,.select-button{min-height:42px}input,select,textarea{font-size:16px!important}input[type=checkbox]{width:18px;height:18px}
 body.home-workflow>main{display:flex!important;flex-direction:column;height:auto!important;min-height:0}
 .home-workflow .left{display:block!important;padding:10px 12px;overflow:visible}
 .home-step-nav{display:flex;flex-direction:row;padding:0;gap:4px}.home-step-nav button{flex:1;min-width:0;padding:8px 3px;justify-content:center}.home-step-nav strong{font-size:12px}.home-step-nav small,.home-rail-title,.home-rail-help{display:none}
 .home-workflow .left>.project{display:block;margin:12px 0 0;padding:8px 0 0}.home-workflow .project>small,.home-workflow .project>#status{display:none}.home-workflow .project-copy{margin:0;padding:4px 8px}
 .home-workflow .workspace{height:clamp(350px,52dvh,560px)!important;min-height:350px;flex:none;order:0}
 .home-workflow .right{width:100%;height:auto;min-width:0;overflow:visible;padding:0;border-left:0;border-top:1px solid #e0e6d9}
 .home-panel-heading{padding:18px 16px!important}.home-panel-heading .home-photo-action{top:40px;right:16px}.home-task-panel{overflow:visible!important;max-height:none!important;padding:16px!important}
 .home-task-footer{position:sticky!important;bottom:0;z-index:8;background:#fffef9;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;border-top:1px solid #e0e6d9}
 .home-workflow .toolbar{top:10px;left:10px;right:10px;gap:5px;flex-wrap:wrap;justify-content:flex-end}.home-workflow .toolbar button,.home-workflow .toolbar summary{min-height:36px;padding:8px;font-size:12px}
 .canvas-mode-controls{top:62px;left:10px;padding:3px}.canvas-mode-controls label{padding:6px;font-size:12px}
 .measurement-summary{max-width:calc(100% - 20px)}
 body:has(.photo-workflow)>main{display:flex!important;flex-direction:column;height:auto!important}
 .photo-workflow{order:0;padding:10px!important;min-width:0}.photo-workflow #stage{width:100%!important;max-height:none;aspect-ratio:1}
 .photo-workflow .preview-top{flex-direction:column;gap:8px}.scene-tools{justify-content:flex-start;gap:5px}.scene-tools button{padding:8px;font-size:12px}
 body:has(.photo-workflow)>main>aside{width:100%;padding:16px;overflow:visible;height:auto;min-width:0}
 .workflow-tabs{position:sticky;top:0;z-index:5;background:#edf1e7}.workflow-tabs button{min-height:44px;padding:8px;font-size:12px}
 .photo-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-quick-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.photo-quick-row button{white-space:normal;min-width:0}
 .photo-catalog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:16px;border:0;border-radius:0}.photo-catalog-search{flex-wrap:wrap}.photo-catalog-search input{flex-basis:100%}.photo-catalog-search select{width:100%}.photo-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(100dvh - 310px)}.photo-catalog-footer{padding-bottom:env(safe-area-inset-bottom);gap:8px}
 .warehouse.shape-dialog{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0;margin:0}
 .warehouse-head{flex-wrap:wrap;gap:10px;padding:14px}.warehouse-actions{display:flex;flex-wrap:wrap;gap:6px}.warehouse-body{display:flex!important;flex-direction:column;overflow:auto!important;min-height:0}.warehouse-sidebar{flex:none;max-height:120px;overflow:auto}.warehouse-results{flex:none;overflow:visible;padding:12px}.warehouse #shapeCards{max-height:none;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr))}.warehouse-detail{flex:none;min-height:240px;border-left:0;border-top:1px solid #e0e6d9}.photo-multi .warehouse-detail{min-height:300px;overflow:visible}.warehouse-selection:not([hidden]){height:auto}.photo-selected-list{max-height:240px;flex:auto}.warehouse-footer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .select-menu>button{min-height:44px}.select-menu{max-width:calc(100vw - 16px)}
 .settings-fields,.production-settings{grid-template-columns:1fr!important}.resource-row,.user-row{align-items:flex-start}.auth-card{padding:24px;max-width:100%}
}

.mobile-panel-tabs{display:none}
@media(max-width:760px){
 body.home-workflow,body:has(#photoWorkspace){height:100dvh;overflow:hidden;display:flex;flex-direction:column}
 body.home-workflow>header,body:has(#photoWorkspace)>header{flex:none;min-height:0;padding:8px 12px!important}
 body>header .brand{font:700 19px 'Microsoft YaHei',sans-serif;white-space:nowrap}.brand small,.brand>span{display:none!important}
 .app-nav{gap:0;order:10;margin:0}.app-nav a{font-size:12px;padding:7px 5px;min-height:34px}
 body.home-workflow>main{flex:1;min-height:0;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(230px,42%) minmax(0,1fr)!important;overflow:hidden}
 .home-workflow .left{grid-row:1;padding:5px 8px!important}.home-workflow .left>.project{display:none!important}.home-step-nav button{min-height:38px;gap:4px}.home-step-nav .home-step-number{width:19px;height:19px;font-size:10px}.home-step-nav strong{font-size:11px}
 .home-workflow .workspace{grid-row:2;height:100%!important;min-height:0!important;order:initial}
 .home-workflow .right{grid-row:3;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0!important;border-radius:16px 16px 0 0}
 .home-panel-heading{flex:none;padding:12px 14px!important}.home-panel-heading>span,.home-panel-heading>p{display:none}.home-panel-heading h2{margin:0;font-size:17px}.home-panel-heading .home-photo-action{top:6px;right:12px;min-height:34px;padding:6px 9px}
 .home-task-panel:not([hidden]){flex:1;min-height:0;overflow:auto!important;padding:12px 14px!important;overscroll-behavior:contain}.home-task-footer{flex:none;position:static!important;padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important}
 .home-workflow .toolbar{top:7px;right:7px;left:7px}.measurement-summary{bottom:24px!important;padding:6px!important;gap:4px!important;transform:translateX(-50%) scale(.85);transform-origin:bottom center}.workspace .hint{bottom:5px;font-size:10px}
 body:has(#photoWorkspace)>main{flex:1;min-height:0;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(240px,48%) 44px minmax(0,1fr);overflow:hidden;height:auto!important}
 body:has(#photoWorkspace)>main>.workspace{grid-row:1;grid-column:1;order:initial;min-height:0;padding:6px!important;overflow:hidden;display:flex;flex-direction:column}
 body:has(#photoWorkspace) #stage{width:auto!important;height:100%;max-height:100%;max-width:100%;min-height:0;aspect-ratio:1;flex:1;align-self:center}
 body:has(#photoWorkspace) .stage-help,body:has(#photoWorkspace) .preview-bottom{display:none}
 body:has(#photoWorkspace) .preview-top{flex:none;padding:0;margin-bottom:5px}.scene-tools{justify-content:center;gap:3px}.scene-tools button{min-height:30px;padding:5px 7px;font-size:11px}.preview-top>.eyebrow{display:none}
 .mobile-panel-tabs{grid-row:2;grid-column:1;display:flex;background:#edf1e7;padding:4px 8px;gap:6px}.mobile-panel-tabs button{flex:1;min-height:36px;border:0;background:transparent;font-size:12px}.mobile-panel-tabs button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #35452b12}
 body:has(#photoWorkspace)>main>aside{grid-row:3;grid-column:1;min-height:0;height:100%;overflow:auto!important;padding:12px 14px!important;overscroll-behavior:contain}
 body[data-mobile-panel=settings]>main>aside.left,body[data-mobile-panel=products]>main>aside.right{display:none!important}
 #photoWorkspace .workflow-heading{display:none}.workflow-tabs{top:-12px;min-height:40px;margin-bottom:12px}.workflow-tabs button{min-height:38px;font-size:12px}
 .photo-page .step-intro h3{font-size:15px}.photo-page .step-intro p{font-size:12px}.intro h1{font-size:18px;margin:4px 0}.intro .eyebrow,.intro p{display:none}.studio-return{margin-bottom:10px;min-height:36px}.upload{margin:10px 0;padding:14px}.catalog-add-button{margin:8px 0}
 .warehouse-head h2{font-size:19px}.warehouse-detail{padding:14px!important}.warehouse-selection header{padding:16px}.warehouse-selection footer{padding:12px}.warehouse-actions{width:100%;justify-content:flex-start}.warehouse-actions button{min-height:36px}
}
@media(max-width:760px) and (orientation:landscape){body.home-workflow>main{grid-template-columns:minmax(0,1fr) minmax(260px,42%)!important;grid-template-rows:40px minmax(0,1fr)!important}.home-workflow .left{grid-column:1/-1}.home-workflow .workspace{grid-row:2;grid-column:1}.home-workflow .right{grid-row:2;grid-column:2}body:has(#photoWorkspace)>main{grid-template-columns:minmax(0,1fr) minmax(260px,42%)!important;grid-template-rows:44px minmax(0,1fr)}body:has(#photoWorkspace)>main>.workspace{grid-row:1/-1;grid-column:1}.mobile-panel-tabs{grid-row:1;grid-column:2}body:has(#photoWorkspace)>main>aside{grid-row:2;grid-column:2}}

@media(min-width:761px){
 .home-workflow .left{display:flex;flex-direction:column;gap:0;padding:22px 16px;min-height:0;overflow:auto}
 .home-rail-title{padding:0 8px 14px;border:0}.home-rail-title h2{font-size:20px;margin:0}
 .home-workflow .left>.project{margin:0 0 22px;padding:14px 12px;background:#fffefb;border:1px solid #e0e6da;border-radius:10px}
 .home-workflow .project>small{font-size:11px;color:#8a9780}.home-workflow .project-copy{padding:8px 0;margin:2px 0;align-items:flex-start;gap:8px}.home-workflow #projectNameText{font-size:13px;color:#3f5440;line-height:1.7;font-weight:500}.home-workflow .project-copy-action{padding-top:4px}.home-workflow .project>#status{font-size:10px;line-height:1.7;color:#8b9783}
 .rail-section-title{margin:0 8px 8px;font-size:11px;color:#8a9780;letter-spacing:1px}
 .home-step-nav{padding:0;gap:6px}.home-step-nav button{padding:12px 10px;gap:10px;min-height:50px;align-items:center;border-radius:9px}.home-step-nav strong{font-size:13px}.home-step-nav small{display:none}.home-step-nav button.active small{display:block;font-size:11px;line-height:1.6;margin-top:4px}.home-step-nav .home-step-number{width:23px;height:23px;font-size:11px;margin:0;flex:none}
 .rail-metadata{margin-top:auto;padding:22px 8px 0}.rail-metadata .home-current-status{margin:0;padding:16px 0 0;border-top:1px solid #e0e6d9;display:flex;flex-direction:column;gap:8px;font-size:11px;color:#829077}.rail-metadata .select-button{margin:0;width:100%;font-size:12px}
}
.home-workflow .right>#modelWarning{flex:none;margin:0 16px 12px;padding:12px 14px;border:1px solid #ead5a5;border-radius:8px;background:#fff8e7;font-size:12px;line-height:1.7;color:#8b6a2c}
@media(max-width:760px){.rail-section-title,.rail-metadata{display:none}.home-rail-title{display:none}}

/* Shared editor header: product identity, workspaces, then utilities. */
body>header .brand{white-space:nowrap;flex-shrink:0;font-size:17px;letter-spacing:-.3px}body>header .app-nav{display:flex;align-items:center;gap:3px;margin-left:16px;padding-left:16px;border-left:1px solid #e0e6db}body>header .app-nav a{padding:7px 11px;border-radius:6px;font-size:12px;text-decoration:none;color:#65725e;white-space:nowrap}body>header .app-nav a:hover{background:#f0f4eb;color:#3f5935}body>header .app-nav a[aria-current=page]{background:#e8efdf;color:#3f5935;font-weight:600}body>header .app-nav a:focus-visible{outline:2px solid #537344;outline-offset:2px}body>header .home-project-menu{margin-left:10px}body>header .home-project-menu summary{font-size:12px;padding:7px 11px;border-color:#dfe5d8;background:transparent}@media(max-width:650px){body>header .brand{font-size:14px}body>header .app-nav{margin-left:5px;padding-left:5px;gap:0}body>header .app-nav a{padding:7px 6px;font-size:11px}}

/* Compact palette disclosure and explicit preview selection states. */
#home-task-preview>.palette-picker:not([open]){padding:0!important;min-height:0!important;margin:0 0 10px!important;border-radius:7px;background:#fff}
#home-task-preview>.palette-picker>summary{min-height:38px!important;box-sizing:border-box;padding:9px 12px!important;margin:0!important;gap:8px;line-height:18px}
#home-task-preview>.palette-picker>summary strong{font-size:12px;font-weight:600}#home-task-preview>.palette-picker>summary small{font-size:10px;font-weight:400;color:#7a8672;margin:0;margin-left:auto}#home-task-preview>.palette-picker>summary::after{font-size:15px;margin-left:5px}
#home-task-preview .home-view-switch{padding:3px;margin:10px 0 14px;gap:3px;border:1px solid #dce3d6;background:#eef2e9;border-radius:7px}
#home-task-preview .home-view-switch button{min-height:30px;padding:6px 8px;border:1px solid transparent;background:transparent;color:#74816d;font-size:12px;border-radius:5px;box-shadow:none}
#home-task-preview .home-view-switch button[aria-pressed=true]{background:#fff;color:#37572e;border-color:#c7d6bc;font-weight:600;box-shadow:0 1px 3px #30462b14}
#home-task-preview .home-view-switch button[aria-pressed=false]:hover{background:#e3eadc;color:#405b37}
#home-task-preview .home-view-switch button:focus-visible{outline:2px solid #537344;outline-offset:1px}

/* Use wide-screen preview gutters for readable product controls. */
@media(min-width:1400px){
 body:has(#photoWorkspace)>main{grid-template-columns:clamp(280px,16vw,480px) minmax(440px,1fr) clamp(360px,22vw,640px)}
 body:has(#photoWorkspace)>main>aside{padding:24px;min-width:0}
 body:has(#photoWorkspace)>main>aside.right{padding:24px 26px}
 body:has(#photoWorkspace) .item strong{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
}
@media(min-width:2200px){
 body:has(#photoWorkspace)>main{grid-template-columns:clamp(360px,16vw,560px) minmax(600px,1fr) clamp(460px,22vw,760px)}
}