:root {
  --shell-ink:#171717;
  --shell-muted:#8f8f8b;
  --shell-line:#ebebe8;
  --shell-surface:#f8f8f6;
  --shell-paper:#fff;
  --shell-max:520px;
  --shell-gutter:20px;
  --shell-nav-height:66px;
  --voye-ink:#171717; --voye-subtle:#71716d; --voye-muted:#989894;
  --voye-line:#ebebe8; --voye-surface:#f8f8f6; --voye-paper:#fff;
  --voye-accent:#9a6c49; --voye-danger:#b4473d;
  --voye-r-sm:12px; --voye-r-md:18px; --voye-r-lg:24px;
  --voye-space-1:4px; --voye-space-2:8px; --voye-space-3:12px;
  --voye-space-4:16px; --voye-space-5:20px; --voye-space-6:24px; --voye-space-8:32px;
  --voye-touch:44px;
}

html { min-height:100%; background:var(--shell-paper); }
body {
  min-height:100%;
  background:var(--shell-paper)!important;
  color:var(--shell-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea { font:inherit; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
button,a,input,select,textarea { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--voye-ink); outline-offset:2px; }
img { max-width:100%; }
.voye-coming { display:inline-flex; align-items:center; min-height:23px; padding:0 8px; border:1px solid var(--voye-line); border-radius:999px; color:var(--voye-muted); font-size:9px; font-weight:700; white-space:nowrap; }
.voye-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.voye-feature { min-height:132px; padding:16px; border:1px solid var(--voye-line); border-radius:var(--voye-r-md); background:var(--voye-paper); color:inherit; text-decoration:none; }
.voye-feature i { display:grid; width:36px; height:36px; place-items:center; margin-bottom:20px; border-radius:50%; background:var(--voye-surface); font-size:19px; }
.voye-feature strong,.voye-feature span { display:block; }
.voye-feature strong { font-size:13px; }
.voye-feature span { margin-top:5px; color:var(--voye-muted); font-size:10px; line-height:1.4; }
.voye-feature[aria-disabled="true"] { cursor:default; }

/* Shared width and safe-area rhythm. Page-specific content remains untouched. */
.page,.app,.builder,.result {
  width:100%!important;
  max-width:var(--shell-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body:not(.voye-flow) .page {
  padding-left:var(--shell-gutter)!important;
  padding-right:var(--shell-gutter)!important;
  padding-top:max(34px,env(safe-area-inset-top))!important;
  padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
}

/* Shared V1 visual layer; API and data behavior remain page-owned. */
body.voye-home .page,body.voye-list .page,body.voye-profile .page { padding-top:max(38px,env(safe-area-inset-top))!important; }
body.voye-home .hero { margin:10px 0 28px; }
body.voye-home .hero h1 { color:var(--voye-ink); font-size:clamp(34px,9vw,42px); font-weight:650; letter-spacing:-.045em; }
body.voye-home .hero-mark { background:var(--voye-surface); color:var(--voye-ink); }
body.voye-home .weather,body.voye-home .quick a { border-color:var(--voye-line); background:var(--voye-surface); }
body.voye-home .pick { border-color:var(--voye-line); border-radius:var(--voye-r-lg); box-shadow:none; }
body.voye-home .look-stage { background:var(--voye-surface); }
body.voye-home .eyebrow,body.voye-home .quick i { color:var(--voye-accent); }
body.voye-home .pick-actions button { min-height:48px; border-color:var(--voye-line); }
body.voye-home .pick-actions button.primary { background:var(--voye-ink); }
body.voye-list .head { margin-bottom:28px; }
body.voye-list .head h1 { font-size:32px; font-weight:680; letter-spacing:-.038em; }
body.voye-list .head span { border:0; background:var(--voye-surface); }
body.voye-list .grid { gap:22px 12px; }
body.voye-list .card { border:0; border-radius:3px; background:var(--voye-surface); }
body.voye-list .card img { object-fit:contain; }
body.voye-list .detail { border-color:var(--voye-line); background:var(--voye-paper); }
body.voye-profile .brand { color:var(--voye-muted); }
body.voye-profile .intro { margin:22px 0 30px; }
body.voye-profile .intro p { font-size:20px; line-height:1.3; letter-spacing:-.025em; }
body.voye-profile .avatar { border-radius:50%; background:var(--voye-surface); }
body.voye-profile .section { margin-top:28px; }
body.voye-profile .card { border-color:var(--voye-line); box-shadow:none; }
body.voye-profile .row { border-color:var(--voye-line); }
body.voye-profile .row select { background:var(--voye-surface); }
body.voye-flow { background:var(--voye-paper)!important; }
body.voye-flow .top { background:rgba(255,255,255,.94); border-color:var(--voye-line); backdrop-filter:blur(18px); }
body.voye-flow .character { opacity:.22; filter:grayscale(1); }
body.voye-flow .progress span { background:#e4e4e1; }
body.voye-flow .progress span.active,body.voye-flow .tabs button.active { background:var(--voye-ink); color:var(--voye-ink); border-color:var(--voye-ink); }
body.voye-flow .item { border-color:var(--voye-line); border-radius:3px; background:var(--voye-surface); }
body.voye-flow .item.selected { border-color:var(--voye-ink); background:#fff; }
body.voye-flow .item.selected:after { background:var(--voye-ink); }
body.voye-flow .actions { background:rgba(255,255,255,.94); border-color:var(--voye-line); }
body.voye-flow .next,body.voye-flow .save { background:var(--voye-ink); }
body.voye-detail .page,body.voye-studio .page { width:100%!important; max-width:var(--shell-max)!important; margin:auto!important; background:var(--voye-paper)!important; }
body.voye-detail .head { height:72px; border-color:var(--voye-line); background:rgba(255,255,255,.94); }
body.voye-detail .hero { min-height:470px; border-color:var(--voye-line); background:var(--voye-surface); }
body.voye-detail .content { padding:26px 20px 42px; }
body.voye-detail .kicker { color:var(--voye-accent); }
body.voye-detail .note,body.voye-detail .meta-card { border-color:var(--voye-line); background:#fff; }
body.voye-detail .edit { background:var(--voye-ink); border-color:var(--voye-ink); }
body.voye-studio .page { padding:20px 20px calc(96px + env(safe-area-inset-bottom))!important; }
body.voye-studio .hero h1 { font-size:32px; letter-spacing:-.038em; }
body.voye-studio .workspace { grid-template-columns:1fr; }
body.voye-studio .panel,body.voye-studio .combo { border-color:var(--voye-line); background:#fff; }
body.voye-studio .drop,body.voye-studio .item,body.voye-studio .combo>img { border-color:var(--voye-line); background:var(--voye-surface); }
body.voye-studio .save,body.voye-studio .tab.active { background:var(--voye-ink); border-color:var(--voye-ink); color:#fff; }
.voye-upload-modes { display:grid; gap:8px; margin:14px 0 4px; }
.voye-upload-mode { display:flex; min-height:52px; align-items:center; gap:12px; padding:0 14px; border:1px solid var(--voye-line); border-radius:var(--voye-r-sm); background:#fff; color:var(--voye-ink); }
.voye-upload-mode i { font-size:20px; }
.voye-upload-mode span { flex:1; font-size:12px; font-weight:600; }
body.voye-closet .overlay { z-index:200; }
body.voye-closet .toast { z-index:220; }

.voye-tab-bar-wrap {
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
}
.voye-tab-bar {
  display:flex;
  width:100%;
  max-width:var(--shell-max);
  min-height:var(--shell-nav-height);
  margin:0 auto;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(23,23,23,.065);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  pointer-events:auto;
}
.voye-tab-bar a {
  display:flex;
  flex:1;
  min-width:0;
  min-height:52px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  border-radius:12px;
  color:#9a9a97;
  text-decoration:none;
  font-size:10px;
  line-height:1.1;
}
.voye-tab-bar a i { font-size:21px; line-height:1; font-weight:400; }
.voye-tab-bar a.active { color:var(--shell-ink); font-weight:600; }
.voye-tab-bar a:focus-visible { outline:2px solid var(--shell-ink); outline-offset:-3px; }

/* The outfit builder keeps its task controls above the global shell. */
body.voye-flow .builder { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
body.voye-flow .actions { bottom:calc(66px + env(safe-area-inset-bottom))!important; width:min(var(--shell-max),100%)!important; }

/* Third-round polish. Unique page controls scope these overrides without changing markup. */
body:has(#weatherLine) .page { padding-top:42px!important; }
body:has(#weatherLine) .top { margin-bottom:20px; }
body:has(#weatherLine) .weather { color:#999995; }
body:has(#weatherLine) .weather strong { font-size:11px; font-weight:520; }
body:has(#weatherLine) .weather span { color:#b0b0ac; font-size:9px; }
body:has(#weatherLine) .section-head { margin-bottom:10px; }
body:has(#weatherLine) .section-head a { color:#999995; font-size:10px; }
body:has(#weatherLine) .hero { height:350px; background:var(--voye-surface); }
body:has(#weatherLine) .hero-empty { font-size:11px; }
body:has(#weatherLine) .hero-empty i { color:#b8b8b4; font-size:28px; }
body:has(#weatherLine) .round { width:40px; height:40px; font-size:17px; }
body:has(#weatherLine) .wear { height:40px; padding:0 17px; font-size:11px; font-weight:590; }
body:has(#weatherLine) .occasions { margin:14px 0 19px; }
body:has(#weatherLine) .chip { padding:6px 11px; border-color:var(--voye-line); color:#7d7d79; font-size:10px; }
body:has(#weatherLine) .recent { grid-auto-columns:27%; gap:10px; }
body:has(#weatherLine) .recent img,body:has(#weatherLine) .recent-placeholder { aspect-ratio:.82; background:var(--voye-surface); }
body:has(#weatherLine) .recent-empty { padding:9px 0; font-size:10px; }

body:has(#saveBtn) .page { padding-top:42px!important; }
body:has(#saveBtn) .head { margin-bottom:16px; }
body:has(#saveBtn) .head button { color:#9a9a96; font-size:10px; }
body:has(#saveBtn) .canvas { height:472px!important; background:#fbfbfa; }
body:has(#saveBtn) .outfit-stack { padding:13px 68px 10px; }
body:has(#saveBtn) .piece-empty { border-color:#e7e7e3; color:#aaa; font-size:10px; }
body:has(#saveBtn) .piece-empty:last-child { border-bottom:0; }
body:has(#saveBtn) .piece-empty span { gap:3px; }
body:has(#saveBtn) .piece-empty i { color:#c8c8c4; font-size:18px; }
body:has(#saveBtn) .slots { margin-top:10px; }
body:has(#saveBtn) .slot { min-height:46px; border-color:#f0f0ed; }
body:has(#saveBtn) .slot-thumb { width:34px; height:34px; background:#f9f9f7; }
body:has(#saveBtn) .slot strong { font-size:11px; font-weight:540; }
body:has(#saveBtn) .slot small { font-size:9px; }
body:has(#saveBtn) .actions { margin-top:14px; }
body:has(#saveBtn) .actions button { height:46px; font-size:11px; font-weight:590; }

body:has(#calendar) .page { padding-top:42px!important; }
body:has(#calendar) .month { gap:12px; margin:21px 0 15px; }
body:has(#calendar) .month button { color:#858581; font-size:20px; font-weight:400; }
body:has(#calendar) .month strong { min-width:92px; text-align:center; font-size:13px; font-weight:590; }
body:has(#calendar) .labels span { color:#b2b2ae; padding-bottom:10px; }
body:has(#calendar) .day { color:#777773; }
body:has(#calendar) .day:has(img) { background:var(--voye-surface); }
body:has(#calendar) .day img { inset:24px 4px 4px; width:calc(100% - 8px); height:calc(100% - 28px); }
body:has(#calendar) .sheet-bg.open { background:rgba(0,0,0,.2); }
body:has(#calendar) .sheet { border-radius:24px 24px 0 0; padding-top:8px; }
body:has(#calendar) .empty { min-height:180px; display:grid; place-items:center; color:#aaa; font-size:11px; }

body.voye-closet .icon-button { width:42px; height:42px; border:1px solid var(--voye-line); background:#fff; color:var(--voye-ink); }
body.voye-closet .icon-button i { font-size:20px; font-weight:400; }
body.voye-closet .sort-button { color:#73736f; }
body.voye-closet .sort-button i { font-size:18px; font-weight:400; }
body.voye-closet .source-list em { color:#c4c4c0; font-weight:400; }
body:has(#language) .row i { color:#666662; font-size:17px; font-weight:400; }
body:has(#language) .soon { color:#c0c0bc!important; font-weight:400; }

/* ---- V2 structural rework: shared Outfit Card primitive -------------------
   Used by Today (recent / random inspiration), Closet Dashboard preview tiles
   and the Outfit Builder canvas. Rendered by /assets/voye-shared.js. */
.voye-outfit-card { position:relative; width:100%; height:100%; overflow:hidden; background:var(--voye-surface,#f8f8f6); }
.voye-oc-piece { position:absolute; object-fit:contain; pointer-events:none; }
.voye-oc-empty { position:absolute; inset:0; display:grid; place-items:center; padding:10px; color:#aaa; font-size:11px; text-align:center; line-height:1.5; }
.voye-oc-empty i { display:block; margin-bottom:6px; font-size:20px; color:#c4c4c0; }
.voye-mini-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; width:100%; height:100%; overflow:hidden; background:var(--voye-surface,#f8f8f6); }
.voye-mini-grid img { width:100%; height:100%; object-fit:contain; background:#fff; }
.voye-mini-grid span { display:block; background:#fff; }
.voye-mini-empty { display:grid; place-items:center; width:100%; height:100%; color:#c4c4c0; font-size:22px; }

@media (min-width:600px) {
  html,body { background:#f1f1ef!important; }
  .page,.app,.builder,.result { background:var(--shell-paper); }
  .voye-tab-bar { box-shadow:0 0 0 1px rgba(0,0,0,.025); }
}
@media (max-width:370px) { :root { --shell-gutter:16px; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* VOYÉ navigation glyphs: one outline system, matching optical weight. */
.voye-tab-bar .nav-glyph{display:block;width:25px;height:25px;flex:none;overflow:visible;stroke-width:1.65;transition:color .15s ease}
.voye-tab-bar a:nth-child(1) .nav-glyph{width:24px;height:24px}
.voye-tab-bar a:nth-child(2) .nav-glyph{width:27px;height:25px}
.voye-tab-bar a .nav-detail{opacity:.7}
.voye-tab-bar a.active .nav-glyph{stroke-width:1.9}
.voye-tab-bar a.active .nav-detail{opacity:1}