/* Shared preview and production interface. */
body.auth-pending .app,body.auth-pending .mobile-nav{visibility:hidden}
.live-login{position:fixed;inset:0;z-index:300;background:var(--bg,#f5f4ef);display:grid;place-items:center;padding:24px}
.live-login-card{width:min(440px,100%);padding:36px;background:var(--panel,#fff);border:1px solid var(--line,#deddd5);border-radius:20px;box-shadow:0 12px 44px #0000000b}
.live-login h1{margin:8px 0 12px;font-size:30px}.live-stack{display:grid;gap:14px}.live-stack input,.live-stack select,.live-stack textarea{width:100%;box-sizing:border-box}
.live-error{color:#a32c27;font-size:13px;min-height:20px;white-space:pre-line}.live-muted{color:var(--muted);font-size:12px;line-height:1.6}
.live-pager{display:flex;justify-content:center;align-items:center;gap:16px;padding:26px 0}.live-empty{grid-column:1/-1;padding:70px 24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}
.grid[aria-busy=true]{opacity:.55}.card .tile.real-photo:before,.card .tile.real-photo:after{display:none}.real-photo img{width:100%;height:100%;object-fit:cover;display:block}.detail-hero .real-photo img{object-fit:contain}
.live-modal{border:1px solid var(--line);border-radius:18px;background:var(--panel,#fff);color:var(--ink,#272923);width:min(560px,calc(100% - 28px));max-height:85dvh;padding:24px;box-sizing:border-box;overflow:auto}
.live-modal::backdrop{background:#20221c77;backdrop-filter:blur(3px)}.live-modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.live-modal-head h2{font-size:20px;margin:0}.live-modal .btn{min-height:42px}
.live-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.live-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.live-thumbs{display:flex;gap:8px;overflow:auto;margin:12px 0}.live-thumbs img{width:60px;height:60px;object-fit:cover;border-radius:8px}.live-thumbs button{border:1px solid var(--line);padding:0;border-radius:8px;background:transparent;flex-shrink:0}
.live-photo-tools{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.live-detail-section{padding:12px 0}.live-detail-section .info{margin:8px 0}.live-detail-section h3{font-size:15px}
.live-tag{background:var(--bg);padding:3px 8px;border-radius:5px;font-size:12px}.live-collection-label{display:flex;gap:8px;align-items:center;padding:10px 0;font-size:13px}.collection[data-live-collection]{cursor:pointer}.collection[data-live-collection]:focus-visible,.card:focus-visible{outline:2px solid var(--accent,#4c6651);outline-offset:3px}
.live-collection-choices{display:grid;gap:8px}.live-login-card .field input{min-height:44px}.btn:disabled{opacity:.5;cursor:wait}.live-notes{white-space:pre-wrap;overflow-wrap:anywhere}
@media(hover:none){.card-actions{opacity:1!important;transform:none!important}.mini{min-width:38px;min-height:38px}}
@media(max-width:700px){.top-actions .btn.user{display:inline-flex!important;padding:8px!important;font-size:0!important}.top-actions .btn.user .avatar{font-size:13px}.live-login-card{padding:26px}.live-pager{gap:9px;font-size:12px}.live-pager .btn{padding:10px}.live-modal{padding:20px}.live-modal-head .btn{min-width:44px}.live-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.live-photo-column{min-width:0}.name-row{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:700px){.filter-line:has(.filter-clear){position:relative;padding-bottom:36px}.filter-clear{position:absolute;right:0;bottom:0;white-space:nowrap}}

/* V10 rail icons: one consistent 20x20 SVG canvas and stroke system. */
.rail .nav-btn span{width:24px;height:24px;display:grid;place-items:center;font-size:0;line-height:0}
.rail .nav-btn span::before,.rail .nav-btn span::after{content:none!important}
.rail .nav-btn span svg{width:20px;height:20px;display:block;overflow:visible}

/* V10.1 readability pass: raise the smallest labels without changing the layout grid. */
html,body{font-size:15px}
.eyebrow{font-size:12px;letter-spacing:.14em}
.title{font-size:27px}
.btn{font-size:14px;padding:11px 15px}
.nav-btn em{font-size:14px}
.searchbox input{font-size:15px}
.pill,.metrics{font-size:13px}
.code{font-size:14px}
.sub{font-size:13px}
.section-head p{font-size:15px}
.mode small{font-size:14px}
.lab{font-size:14px}
.field{font-size:13px}
.hint{font-size:13px}
.filter-summary,.filter-label,.check-inline,.filter-clear{font-size:13px}
.filter-group b{font-size:14px}
.check{font-size:14px}
.row{font-size:14px}
.collection p{font-size:14px}
.info small{font-size:12px}
.info b{font-size:14px}
.pantone-tab{font-size:13px}
.pantone-note{font-size:12px}
.pantone-code{font-size:12px}
.pantone-name{font-size:12px}
.qtc-guide-grid a{font-size:13px}
.qtc-scrape-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #e2e8ef;color:#1f625b;font-size:14px}
.qtc-scrape-head span{color:var(--muted);font-size:13px}
.qtc-scrape-list{display:grid;gap:8px;padding:12px 18px}
.qtc-scrape-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid #dfe6ee;border-radius:12px;background:#fbfcfe}
.qtc-scrape-swatch{width:56px;height:56px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.qtc-scrape-copy{min-width:0;display:grid;gap:3px}
.qtc-scrape-copy b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtc-scrape-copy span{font-size:14px;color:#536072;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtc-scrape-copy small{font-size:12px;color:var(--muted)}
.qtc-scrape-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.qtc-scrape-actions .btn{font-size:13px;padding:9px 11px}
@media(max-width:760px){
  .title{font-size:22px}
  .mobile-nav button{font-size:13px}
  .mobile-nav button span{font-size:22px}
  .qtc-scrape-item{grid-template-columns:44px minmax(0,1fr);gap:9px}
  .qtc-scrape-swatch{width:44px;height:44px}
  .qtc-scrape-actions{grid-column:1/-1;justify-content:flex-start}
}

/* Keep the V10 gradient rail easy to read and tap. */
.rail .nav-btn{height:58px}
.rail .nav-btn span{font-size:28px;line-height:1;font-weight:700}
@media(max-width:760px){.mobile-nav button span{font-size:24px}.mobile-nav button{font-size:13px}}

/* Typography and layout system · ceramic glaze workbench */
:root{
  --type-body:15px;
  --type-small:13px;
  --type-caption:12px;
  --type-title:34px;
  --type-page:30px;
  --leading-body:1.58;
  --leading-tight:1.2;
  --content-max:1480px;
  --space-section:28px;
}
html{font-size:16px}
body{font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:.008em;font-variant-numeric:tabular-nums}
button,input,select,textarea{letter-spacing:inherit}
h1,h2,h3,p{max-width:78ch}
.eyebrow{font-size:var(--type-caption);letter-spacing:.08em;line-height:1.35;font-weight:800}
.topbar{height:82px;padding:15px clamp(22px,3.6vw,52px)}
.title{font-size:var(--type-page);line-height:var(--leading-tight);letter-spacing:-.025em;margin-top:4px}
.main{max-width:var(--content-max);padding:32px clamp(22px,3.6vw,52px) 96px}
.search-hero{margin-bottom:20px}
.searchbox{height:48px;border-radius:13px;padding:0 14px}
.searchbox input{font-size:var(--type-body);line-height:1.3}
.quick-row{margin:12px 0 16px}
.metrics{gap:20px;line-height:1.4}
.filter-board{padding:16px 18px;margin-bottom:22px}
.filter-board-head{margin-bottom:12px}
.filter-summary{line-height:1.45}
.filter-rows{gap:10px}
.filter-line{gap:12px;align-items:flex-start}
.filter-label{width:48px;padding-top:7px;line-height:1.35}
.filter-options{gap:7px}
.check-inline{padding:7px 11px;line-height:1.35}
.filter-clear{padding:7px 0;line-height:1.35}
.toolbar{margin-bottom:16px}
.section-head{margin:0 0 var(--space-section);align-items:flex-start}
.section-head h2{font-size:var(--type-title);line-height:var(--leading-tight);letter-spacing:-.035em;margin:6px 0 8px}
.section-head p{font-size:var(--type-body);line-height:1.65;color:var(--muted);margin:0;max-width:64ch}
.mode-grid{gap:16px;margin-bottom:20px}
.mode{min-height:132px;padding:20px}
.mode .big{font-size:28px;line-height:1}
.mode b{font-size:16px;line-height:1.35;margin-top:16px}
.mode small{font-size:var(--type-small);line-height:1.5;margin-top:5px}
.find-panel{padding:20px;margin-bottom:28px}
.mode-grid-four{grid-template-columns:repeat(4,1fr)}
.pantone-detail-swatch{display:inline-flex;vertical-align:top;gap:7px;align-items:center;max-width:190px;margin:4px 8px 4px 0}.pantone-detail-swatch i{width:34px;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.12);flex:none}.pantone-detail-swatch b,.pantone-detail-swatch small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pantone-detail-swatch b{font-size:11px;color:#254b68}.pantone-detail-swatch small{font:10px ui-monospace,monospace;color:#73879a;margin-top:2px}
.wheel-panel{background:linear-gradient(135deg,#fff,#f5fbff)!important}.wheel-head{display:flex;justify-content:space-between;gap:22px;align-items:start}.wheel-head b{font-size:18px;color:#125ee0}.wheel-head p{color:#5a7792;font-size:13px;margin:6px 0 0}.wheel-hex{font-weight:800;color:#35516c;font-size:12px}.wheel-hex input{display:block;margin-top:6px;width:122px;padding:10px;border:1px solid #a9cadd;border-radius:10px;font:700 16px ui-monospace,monospace}.wheel-layout{display:grid;grid-template-columns:minmax(260px,360px) 28px 1fr;gap:18px;align-items:center;margin-top:18px}.sv-wrap,.hue-wrap{position:relative;line-height:0}.sv-wrap canvas,.hue-wrap canvas{display:block;border-radius:10px;cursor:crosshair}.sv-wrap canvas{width:100%;height:auto}.sv-wrap i,.hue-wrap i{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none}.wheel-preview{display:grid;gap:12px;justify-items:start}.wheel-preview i{width:74px;height:74px;border-radius:16px;background:#c74634;border:1px solid rgba(0,0,0,.1)}
@media(max-width:900px){.mode-grid-four{grid-template-columns:repeat(2,1fr)}.wheel-layout{grid-template-columns:1fr 28px}.wheel-preview{grid-column:1/-1;grid-template-columns:74px 1fr;align-items:center}.wheel-preview .btn{grid-column:1/-1}}
.pantone-panel{padding:0!important}
.pantone-head{padding:20px 22px 16px}
.pantone-head-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:12px 22px;align-items:start}
.pantone-head-row>.pantone-note,.pantone-head-row>.qtc-guide{grid-column:1/-1}
.pantone-head b{font-size:17px;line-height:1.4}
.pantone-search{height:48px;max-width:none;overflow:hidden;padding-left:14px;padding-right:4px;gap:8px;border-width:1.5px}
.pantone-search input{min-width:0;flex:1 1 auto}
.pantone-search .pantone-search-button{flex:0 0 68px;align-self:center;height:32px;box-sizing:border-box;margin:0;padding:0 8px;border:1px solid #b7dcd5;border-radius:8px;background:#eaf7f5;color:#176d68;box-shadow:none;transform:none;white-space:nowrap;line-height:1;font-size:13px;font-weight:800}
.pantone-search .pantone-search-button::before{content:'⌕';display:inline-block;margin-right:3px;font-size:14px;line-height:1;vertical-align:-1px}
.pantone-search .pantone-search-button:hover{transform:none;background:#d9f0ec;border-color:#8fc7bd;box-shadow:none}
.pantone-note{font-size:var(--type-small);line-height:1.55;margin-top:0}
.qtc-guide{font-size:var(--type-small);line-height:1.5}
.qtc-guide summary{padding:2px 0}
.pantone-result{padding:0 22px 18px}
.pantone-empty{font-size:var(--type-small);line-height:1.65;padding:20px 18px}
.pantone-selected{padding:14px 22px}
.match-title{margin:32px 0 14px}
.match-title h3{font-size:20px;line-height:1.35;margin:5px 0 0}
.lab{line-height:1.55}
.live-empty{padding:34px 24px;text-align:left;max-width:620px;line-height:1.65}
.live-empty h3{font-size:18px;line-height:1.35;margin:0 0 6px;color:var(--ink)}
.live-empty p{margin:0;max-width:56ch}
.form-card,.collection,.compare-card{line-height:1.55}
.form-card h3{font-size:20px;line-height:1.35}
.field{gap:7px;line-height:1.35}
.field input,.field select,.field textarea{font-size:var(--type-body);line-height:1.45}
.hint{line-height:1.6}
.info{line-height:1.5}
.info small{line-height:1.35}
.info b{line-height:1.4}
.row{line-height:1.45}
.collection h3{font-size:18px;line-height:1.35}
.collection p{line-height:1.6}
.qtc-scrape-copy small{line-height:1.45}
:focus-visible{outline:3px solid rgba(44,122,109,.45);outline-offset:3px}
@media(max-width:760px){
  .topbar{height:76px;padding:13px 16px}
  .title{font-size:24px}
  .main{padding:24px 16px 96px}
  .section-head{margin-bottom:22px}
  .section-head h2{font-size:28px}
  .section-head p{font-size:14px;line-height:1.6}
  .filter-board{padding:14px 14px;margin-bottom:18px}
  .filter-line{gap:8px}
  .filter-label{width:44px}
  .check-inline{padding:7px 9px}
  .mode-grid{gap:10px}
  .mode{min-height:0;padding:16px}
  .mode b{margin-top:12px}
  .find-panel{margin-bottom:22px}
  .pantone-head{padding:18px 16px 14px}
  .pantone-head-row{grid-template-columns:1fr;gap:10px}
  .pantone-result{padding:0 16px 14px}
  .pantone-selected{padding:12px 16px}
  .match-title{margin-top:26px}
  .live-empty{padding:26px 18px}
}

/* Keep navigation identical in preview and production. */
.rail .nav-btn{height:58px}
.rail .nav-btn span{width:24px;height:24px;display:grid;place-items:center;font-size:0;line-height:0}
.rail .nav-btn span svg{width:20px;height:20px;display:block}
@media(max-width:760px){.mobile-nav button span{font-size:24px}.mobile-nav button{font-size:13px}}

/* Main-color category: categorical labels are different from measured photo HEX/Lab. */
.filter-board-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.color-filter-options{display:flex;flex-wrap:wrap;gap:8px}
.category-dot{display:inline-block;width:12px;height:12px;flex:0 0 12px;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid rgba(0,0,0,.15);background:#9ca3af}
.category-dot[data-color="红"]{background:#cf3f46}.category-dot[data-color="蓝"]{background:#3487d1}.category-dot[data-color="绿"]{background:#42a16c}.category-dot[data-color="黄"]{background:#efc941}.category-dot[data-color="棕"]{background:#9a6743}.category-dot[data-color="黑"]{background:#262c32}.category-dot[data-color="紫"]{background:#9465b4}.category-dot[data-color="灰"]{background:#8f959e}
.check-inline.color-choice,.category-pill{display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:50px;min-height:38px;border-radius:9px;cursor:pointer}
.check-inline.color-choice.active,.category-pill.active,.unclassified-toggle.active{border-color:#367c6e;background:#e2f3ed;color:#185b4d;font-weight:700}
.category-selector{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.category-pill{font:inherit;font-size:14px;border:1px solid #d7ded7;padding:8px 12px;background:#fff;color:#334039}
.primary-category-field{border:1px solid #cbd9d3;border-radius:12px;background:#f8fbf9;padding:13px 14px;min-width:0}
.primary-category-field>span,.primary-category-field legend{font-weight:700;font-size:14px}
.primary-category-field small{display:block;margin-top:8px;color:#6b7771;line-height:1.4}
.required-star{color:#c2483e}.piece-categories{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.category-badge,.category-pending{display:inline-flex;align-items:center;padding:3px 6px;border-radius:7px;background:#f1f3f0;color:#53635a;font-size:11px;line-height:1.3}.category-badge .category-dot{width:8px;height:8px;flex-basis:8px;margin-right:3px}.category-pending{color:#8d522f;background:#fff1e7}
.unclassified-toggle{font:inherit;cursor:pointer;font-size:12px;border:1px solid #decbb8;border-radius:8px;padding:7px 10px;background:#fff8f2;color:#8d522f;white-space:nowrap}
.live-category-field{grid-column:1/-1;margin:0}
@media(max-width:700px){.category-pill,.check-inline.color-choice{min-height:42px;padding:8px 10px}.primary-category-field{padding:12px}.category-selector{gap:7px}.filter-line:has(#inlineColor),.filter-line:has(#matchInlineColor){align-items:flex-start}}

/* V10.5 real upload progress, both desktop and mobile. */
.live-upload-progress{padding:8px 10px;margin:8px 0;border-radius:9px;background:#edf5fc;color:#255378;font-size:13px;font-weight:600}.live-upload-progress[hidden]{display:none}