/* UI Pro Max: editorial fashion storefront. Tokens inherit the active skin and color mode. */
:root{--serif:"Cormorant Garamond","Noto Serif SC","Songti SC",Georgia,serif}
body:not(.signed-out){background:var(--page);font-family:Inter,"Avenir Next","Microsoft YaHei","PingFang SC",sans-serif}
body:not(.signed-out) .app{max-width:1440px;padding:0 clamp(20px,4vw,64px)}
body:not(.signed-out) .masthead{min-height:82px;padding:18px 0;border-bottom:1px solid var(--line)}
body:not(.signed-out) .brand{font-size:19px;letter-spacing:.3px;font-weight:600}
body:not(.signed-out) .brand-symbol{font-size:38px;letter-spacing:-4px}
body:not(.signed-out) .brand small{font-size:8px;letter-spacing:2px}
body:not(.signed-out) .primary-nav{height:62px;gap:clamp(12px,3vw,42px);border-color:var(--line)}
body:not(.signed-out) .primary-nav .nav-item{min-height:44px;padding:0 14px;border-radius:999px;transition:background .2s,color .2s}
body:not(.signed-out) .primary-nav .nav-item:hover{background:var(--soft);color:var(--ink)}
body:not(.signed-out) .primary-nav .nav-item.active{background:var(--soft);color:var(--ink)}
body:not(.signed-out) .primary-nav .nav-item.active:after{display:none}
body:not(.signed-out) .page-heading{padding:34px 0 28px;align-items:end}
body:not(.signed-out) .page-heading h1{font:500 clamp(28px,3vw,40px)/1.12 var(--serif);letter-spacing:-.3px}
body:not(.signed-out) .page-heading .eyebrow{font-size:10px;letter-spacing:1.8px}
body:not(.signed-out) .page-heading .subtitle{font-size:14px;line-height:1.6}
body:not(.signed-out) .primary,body:not(.signed-out) .secondary{min-height:44px;border-radius:999px;padding-inline:20px;font-size:13px;transition:background .18s,color .18s,transform .18s}
body:not(.signed-out) .primary:hover,body:not(.signed-out) .secondary:hover{transform:translateY(-1px)}
body:not(.signed-out) .primary{box-shadow:0 4px 12px color-mix(in srgb,var(--green) 18%,transparent)}
body:not(.signed-out) .heading-action{gap:10px}
body:not(.signed-out) .studio-layout{grid-template-columns:minmax(350px,.92fr) minmax(480px,1.08fr);gap:clamp(18px,2.4vw,34px);align-items:start}
body:not(.signed-out) .viewer-2d{height:clamp(520px,58vw,680px);padding:20px;border-radius:16px;border:1px solid var(--line);background:var(--soft)}
body:not(.signed-out) .photo-stage-image{border-radius:10px}
body:not(.signed-out) .photo-stage-image img{object-position:center}
body:not(.signed-out) .viewer-switcher{position:absolute;top:2px;left:2px;z-index:6;display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 2px 8px #0002}
body:not(.signed-out) .viewer-switcher button{min-width:27px;height:15px;padding:0 6px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 8px/1 Inter,"Microsoft YaHei",sans-serif;cursor:pointer;transition:background .16s,color .16s}
body:not(.signed-out) .viewer-switcher button.active{background:var(--green);color:var(--on-accent)}
body:not(.signed-out) .viewer-switcher button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
body:not(.signed-out) .photo-view-video{position:relative}
body:not(.signed-out) .video-preview-empty{display:flex;align-items:center;justify-content:center;gap:9px;padding:38px 26px;box-sizing:border-box;width:100%;max-height:100%;overflow:auto;text-align:center;flex-direction:column}
body:not(.signed-out) .video-kicker{font:600 9px/1.3 Inter,sans-serif;letter-spacing:.14em;color:var(--green)}
body:not(.signed-out) .video-preview-empty>strong{font:500 17px/1.2 Inter,"Microsoft YaHei",sans-serif;color:var(--ink)}
body:not(.signed-out) .video-source-label{color:var(--muted);font-size:10px}
body:not(.signed-out) .video-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:100%}
body:not(.signed-out) .video-options label{display:grid;gap:4px;text-align:left;color:var(--muted);font-size:10px}
body:not(.signed-out) .video-options select{max-width:136px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:11px}
body:not(.signed-out) .video-lock-reason{max-width:340px;margin:0;color:var(--muted);font-size:10px;line-height:1.45}
body:not(.signed-out) .video-lock-reason{color:var(--danger,var(--ink))}
body:not(.signed-out) .video-error{max-width:340px;margin:0;padding:8px 12px;border:1px solid #e3b7b7;border-radius:8px;background:#fff1f0;color:#9b2929;font-size:11px;line-height:1.5;text-align:left}
body:not(.signed-out) .video-generate{min-height:31px;padding:0 14px;font-size:11px}
body:not(.signed-out) .video-generate:disabled{opacity:.48;cursor:not-allowed}
body:not(.signed-out) .video-add{border:0;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}
body:not(.signed-out) .video-file-name{position:absolute;bottom:8px;left:10px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 7px;border-radius:8px;background:#0008;color:#fff;font-size:10px}
body:not(.signed-out) .video-remove{position:absolute;right:8px;top:8px;border:0;border-radius:50%;width:25px;height:25px;background:#0008;color:white;font-size:16px;cursor:pointer}
@media(max-height:700px){body:not(.signed-out) .video-preview-empty{gap:5px;padding:16px}}
body:not(.signed-out) .photo-view-photo,body:not(.signed-out) .photo-view-video{position:absolute;inset:0}
body:not(.signed-out) .photo-view-photo[hidden],body:not(.signed-out) .photo-view-video[hidden]{display:none!important}
body:not(.signed-out) .photo-view-video{z-index:3;background:#171717;color:#fff}
body:not(.signed-out) .photo-view-video video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;background:#171717;pointer-events:auto}
body:not(.signed-out) .video-preview-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 30%,#413842,#171717 72%)}
body:not(.signed-out) .video-kicker{font:600 9px/1.2 Inter,"Microsoft YaHei",sans-serif;letter-spacing:.16em;color:#ffffff90}
body:not(.signed-out) .video-preview-empty strong{font:500 20px/1.2 var(--serif);color:#fff}
body:not(.signed-out) .video-add{min-height:36px;padding:0 16px;border:1px solid #ffffff50;border-radius:999px;background:#ffffff1a;color:#fff;font:500 11px/1 Inter,"Microsoft YaHei",sans-serif;cursor:pointer}
body:not(.signed-out) .video-add:hover{background:#ffffff2c}
body:not(.signed-out) .video-remove{position:absolute;top:14px;right:14px;z-index:2;width:32px;height:32px;border:1px solid #ffffff70;border-radius:50%;background:#111b;color:#fff;font-size:22px;line-height:1;cursor:pointer}
body:not(.signed-out) .video-file-name{position:absolute;left:14px;right:54px;bottom:14px;z-index:2;overflow:hidden;color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:11px;text-shadow:0 1px 4px #000;pointer-events:none}
body:not(.signed-out) .video-playback-error{position:absolute;z-index:4;left:50%;top:50%;width:min(88%,360px);transform:translate(-50%,-50%);margin:0;padding:12px 14px;border:1px solid #ffffff40;border-radius:10px;background:#111d;color:#fff;font-size:12px;line-height:1.5;text-align:center;pointer-events:none}
body:not(.signed-out) .photo-stage-heading strong{font:500 23px/1.2 var(--serif)}
body:not(.signed-out) .photo-stage-actions{margin-top:14px;gap:8px}
body:not(.signed-out) .photo-stage-actions .secondary{min-height:40px;border-radius:999px}
body:not(.signed-out) .closet-panel{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 14px 40px color-mix(in srgb,var(--ink) 5%,transparent)}
body:not(.signed-out) .section-line h2{font:600 22px/1.25 var(--serif)}
body:not(.signed-out) .section-line .count{font:400 12px/1.4 Inter,"Microsoft YaHei",sans-serif}
body:not(.signed-out) .text-button{min-height:40px;padding:6px 8px;border-radius:999px;transition:background .18s,color .18s}
body:not(.signed-out) .text-button:hover{background:var(--soft);color:var(--ink)}
body:not(.signed-out) .categories{gap:8px;padding:18px 0;scrollbar-width:none}
body:not(.signed-out) .chip{min-height:40px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;font-size:12px;transition:background .18s,color .18s,border-color .18s}
body:not(.signed-out) .chip.active{border-color:var(--green)}
body:not(.signed-out) .wardrobe-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}
body:not(.signed-out) .item-art{height:auto;aspect-ratio:1/1.12;border:1px solid var(--line);border-radius:12px;background:var(--soft);transition:transform .22s,border-color .22s,background .22s}
body:not(.signed-out) .item-card:hover .item-art{transform:translateY(-2px)}
body:not(.signed-out) .item-card.selected .item-art{border:2px solid var(--green)}
body:not(.signed-out) .item-art>img{padding:10px}
body:not(.signed-out) .item-card h3{margin:10px 0 5px;font-size:13px;font-weight:500;line-height:1.4}
body:not(.signed-out) .item-meta{font-size:11px;line-height:1.45}
body:not(.signed-out) .item-tools{gap:8px}
body:not(.signed-out) .item-tools .icon-button{width:36px;height:36px;border:1px solid var(--line);box-shadow:0 3px 12px #00000012}
body:not(.signed-out) .item-tools .icon-button svg{width:16px;height:16px}
body:not(.signed-out) .outfit-strip{margin-top:24px;padding-top:20px}
body:not(.signed-out) .outfit-strip .section-line h3{font-size:14px;font-weight:600}
body:not(.signed-out) .outfit-tag{min-height:36px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;font-size:11px}
body:not(.signed-out) .collection-toolbar{gap:12px;margin-bottom:18px}
body:not(.signed-out) .search{height:46px;border-radius:999px}
body:not(.signed-out) .collection-grid{gap:30px 20px}
body:not(.signed-out) .collection-grid .item-art{height:auto;aspect-ratio:1/1.12}
body:not(.signed-out) .profile-layout{gap:28px}
body:not(.signed-out) .profile-settings,body:not(.signed-out) .look-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px}
body:not(.signed-out) .profile-settings h2{font:600 23px/1.25 var(--serif)}
body:not(.signed-out) .photo-preview{width:104px;height:128px;border-radius:12px}
body:not(.signed-out) .look-grid{gap:24px}
body:not(.signed-out) .look-image{border-radius:12px}
body:not(.signed-out) dialog{border-color:var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px #0003}
body:not(.signed-out) .modal-heading h2{font:600 26px/1.25 var(--serif)}
body:not(.signed-out) button:focus-visible,body:not(.signed-out) a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
body:not(.signed-out) .desktop-footer{padding-top:26px}
@media(max-width:1050px){
 body:not(.signed-out) .app{padding-inline:24px}
 body:not(.signed-out) .studio-layout{grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr);gap:18px}
 body:not(.signed-out) .closet-panel{padding:18px}
 body:not(.signed-out) .wardrobe-grid{gap:16px 10px}
}
@media(max-width:900px) and (min-width:681px){
 body:not(.signed-out) .studio-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body:not(.signed-out) .viewer-2d{height:540px;padding:16px}
 body:not(.signed-out) .wardrobe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 body:not(.signed-out) .app{padding-inline:18px}
 body:not(.signed-out) .masthead{min-height:0;padding:14px 0}
 body:not(.signed-out) .primary-nav{height:64px;gap:4px}
 body:not(.signed-out) .primary-nav .nav-item{min-height:52px;padding:6px 10px;border-radius:12px}
 body:not(.signed-out) .page-heading{padding:24px 0 20px;align-items:flex-start}
 body:not(.signed-out) .page-heading h1{font-size:32px}
 body:not(.signed-out) .page-heading .subtitle{font-size:13px}
 body:not(.signed-out) .heading-action .primary,body:not(.signed-out) .heading-action .secondary{min-height:44px;height:44px;font-size:12px;padding-inline:13px}
 body:not(.signed-out) .studio-layout{gap:24px}
 body:not(.signed-out) .viewer-2d{height:min(118vw,540px);min-height:410px;padding:14px;border-radius:14px}
 body:not(.signed-out) .closet-panel{padding:18px;border-radius:14px}
 body:not(.signed-out) .section-line h2{font-size:21px}
 body:not(.signed-out) .categories{margin-right:-18px;padding-right:18px}
 body:not(.signed-out) .chip{min-height:40px;padding-inline:13px}
 body:not(.signed-out) .wardrobe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 body:not(.signed-out) .item-card h3{font-size:13px}
 body:not(.signed-out) .item-meta{font-size:11px}
 body:not(.signed-out) .item-tools .icon-button{width:44px;height:44px}
 body:not(.signed-out) .profile-layout{gap:14px}
 body:not(.signed-out) .profile-settings,body:not(.signed-out) .look-card{padding:18px}
 body:not(.signed-out) .collection-grid{gap:24px 14px}
}
@media(prefers-reduced-motion:reduce){body:not(.signed-out) *,body:not(.signed-out) *::before,body:not(.signed-out) *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
