:root {
  --navy-950: #03112c;
  --navy-900: #061a3e;
  --navy-800: #0a2858;
  --blue: #087edb;
  --cyan: #55bcf3;
  --green: #20ad6b;
  --amber: #e3a016;
  --ink: #122033;
  --muted: #657387;
  --line: #dce4ee;
  --surface: #f4f7fb;
  --white: #fff;
  --radius: 22px;
  --shadow: 0 30px 80px rgba(0, 10, 35, .38);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy-950); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eff6ff;
  background:
    radial-gradient(circle at 50% 8%, rgba(31, 139, 231, .22), transparent 38rem),
    linear-gradient(135deg, #020b20 0%, #061a3e 55%, #020b20 100%);
}
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(85, 188, 243, .65); outline-offset: 3px; }

.experience-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(430px, 1fr) minmax(250px, 310px);
  gap: clamp(24px, 3vw, 54px);
  align-items: center;
  padding: clamp(24px, 4vw, 64px);
  overflow: hidden;
}
.experience-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.experience-rail, .system-panel, .device-stage { position: relative; z-index: 1; }

.rail-brand {
  width: 230px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.rail-brand img { display: block; width: 100%; height: auto; }
.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--cyan);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.rail-intro { margin: 40px 0 30px; max-width: 295px; }
.rail-intro h1, .system-panel h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 2.3vw, 2.45rem); line-height: 1.02; letter-spacing: -.04em; }
.rail-intro p, .system-note { margin: 0; color: #9cacc3; font-size: 1rem; line-height: 1.6; }

.journey-nav { display: grid; gap: 7px; }
.journey-nav button {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #7f91aa;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .22s ease;
}
.journey-nav button:hover { color: #fff; background: rgba(255,255,255,.045); }
.journey-nav button.active { color: #fff; border-color: rgba(85,188,243,.34); background: linear-gradient(90deg, rgba(8,126,219,.2), rgba(8,126,219,.04)); }
.journey-nav b { font-size: .78rem; color: var(--cyan); }
.journey-nav span { font-size: .92rem; font-weight: 700; }
.journey-nav span em { display: inline-flex; margin-left: 8px; padding: 2px 5px; border: 1px solid rgba(85,188,243,.34); border-radius: 999px; color: var(--cyan); background: rgba(85,188,243,.08); font-size: .46rem; font-style: normal; font-weight: 900; letter-spacing: .07em; vertical-align: 2px; }
.journey-nav i { width: 7px; height: 7px; border-radius: 50%; background: #31435d; }
.journey-nav button.completed i, .journey-nav button.active i { background: var(--green); box-shadow: 0 0 0 4px rgba(32,173,107,.12); }
.rail-principle {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #dce7f5;
}
.principle-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; color: var(--green); background: rgba(32,173,107,.15); }
.rail-principle strong { display: block; font-size: .92rem; }
.rail-principle div span { display: block; margin-top: 4px; color: #8293aa; font-size: .8rem; line-height: 1.45; }

.device-stage { display: grid; justify-items: center; align-content: center; }
.stage-meta { width: min(100%, 500px); display: flex; justify-content: space-between; margin-bottom: 14px; color: #9eb0c6; font-size: .8rem; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(32,173,107,.13); }
.text-button { padding: 0; border: 0; color: var(--cyan); background: transparent; cursor: pointer; }

.phone-frame {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 430 / 830;
  padding: 11px;
  border-radius: 52px;
  background: linear-gradient(145deg, #1b2a3e 0%, #020913 38%, #14263a 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.15), inset 0 0 0 4px #020812;
}
.phone-frame::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(85,188,243,.25); border-radius: 47px; pointer-events: none; }
.phone-glow { position: absolute; inset: 10% 2%; border-radius: 50%; box-shadow: 0 0 110px 30px rgba(8,126,219,.24); }
.phone-screen { position: relative; height: 100%; display: grid; grid-template-rows: 30px 64px 1fr 69px; overflow: hidden; border-radius: 42px; color: var(--ink); background: var(--surface); }
.mobile-status { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 7px 18px 0; font-size: .72rem; font-weight: 800; }
.island { position: absolute; top: 8px; left: 50%; width: 92px; height: 20px; translate: -50% 0; border-radius: 20px; background: #020914; }
.status-glyphs { letter-spacing: .08em; }
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 16px 8px; border-bottom: 1px solid rgba(12,38,74,.08); background: rgba(244,247,251,.94); }
.brand-home { display: block; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; transition: opacity .17s ease, transform .17s ease, box-shadow .17s ease; }
.brand-home:hover { opacity: .82; transform: translateY(-1px); }
.brand-home:active { transform: translateY(0) scale(.985); }
.brand-home:focus-visible { outline: 3px solid rgba(8,126,219,.28); outline-offset: 2px; }
.brand-home img { display: block; width: 158px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--navy-900); background: #fff; cursor: pointer; }
.icon-button span { font-size: 1.35rem; rotate: 90deg; }
.cart-button { width: auto; min-width: 76px; grid-template-columns: 25px auto; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 18px; }
.cart-button .cart-glyph { display: grid; place-items: center; width: 25px; height: 25px; font-size: 1rem; rotate: 0deg; }
.cart-button .cart-glyph svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.cart-button .cart-header-copy { display: grid; justify-items: start; gap: 0; font-size: inherit; line-height: 1; rotate: 0deg; }
.cart-header-copy small { color: var(--muted); font-size: .38rem; font-weight: 900; letter-spacing: .05em; }
.cart-header-copy strong { margin-top: 3px; font-size: .56rem; white-space: nowrap; }
.cart-button > b { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--surface); border-radius: 999px; color: #fff; background: var(--blue); font-size: .58rem; line-height: 1; box-shadow: 0 4px 9px rgba(8,126,219,.28); }
.cart-button > b[hidden] { display: none; }
.dock-button { width: auto; min-width: 70px; grid-template-columns: 25px auto; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 18px; }
.dock-button .dock-glyph { display: grid; place-items: center; width: 25px; height: 25px; rotate: 0deg; }
.dock-button .dock-glyph svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dock-button .dock-glyph .razor { fill: rgba(8,126,219,.08); stroke: #075da7; }
.dock-button .dock-glyph .cradle { stroke: #0b284f; stroke-width: 2.1; }
.dock-button .dock-glyph .signal { stroke: var(--green); stroke-width: 2; }
.dock-button .dock-copy { display: grid; justify-items: start; gap: 0; font-size: inherit; line-height: 1; rotate: 0deg; }
.dock-copy small { color: var(--muted); font-size: .38rem; font-weight: 900; letter-spacing: .07em; }
.dock-copy strong { margin-top: 3px; color: #148b57; font-size: .56rem; white-space: nowrap; }
.dock-button > i { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(32,173,107,.1); }
.app-screen { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 22px; scrollbar-width: none; }
.app-screen::-webkit-scrollbar { display: none; }
.screen-enter { animation: screenIn .28s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.screen-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--muted); font-size: .78rem; }
.screen-title { margin: 0; color: #0c1b30; font-size: 1.55rem; line-height: 1.08; letter-spacing: -.035em; }
.screen-subtitle { margin: 7px 0 16px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: .67rem; font-weight: 800; letter-spacing: .03em; }
.pill.green { color: #128a52; background: #e4f7ed; }
.pill.blue { color: #076fbd; background: #e6f3fd; }
.pill.amber { color: #ad7200; background: #fff3d6; }
.product-card { overflow: hidden; padding: 16px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, var(--navy-800), var(--navy-950)); box-shadow: 0 15px 32px rgba(6,26,62,.16); }
.product-card.light { color: var(--ink); border: 1px solid var(--line); background: #fff; box-shadow: none; }
.product-card.interactive { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.product-card.interactive:hover { transform: translateY(-2px); box-shadow: 0 19px 38px rgba(6,26,62,.23); filter: brightness(1.035); }
.product-card.interactive:active { transform: translateY(0) scale(.995); }
.product-card.interactive:focus-visible { outline: 3px solid rgba(8,126,219,.34); outline-offset: 3px; }
.product-card .product-top { display: grid; grid-template-columns: 1fr 148px; align-items: center; gap: 12px; }
.product-card img { display: block; width: 100%; height: 112px; padding: 20px 10px; object-fit: contain; border-radius: 15px; background: radial-gradient(ellipse at 50% 48%, #fff 0 43%, #edf3f8 76%, #dfe8f0 100%); box-shadow: inset 0 0 0 1px rgba(22,61,99,.06); filter: drop-shadow(0 7px 6px rgba(4,22,44,.18)); }
.product-card h3 { margin: 8px 0 2px; font-size: 1.28rem; letter-spacing: -.02em; }
.product-card p { margin: 0; color: #a9bdd8; font-size: .78rem; }
.product-card.light p { color: var(--muted); }
.metric-line { margin-top: 14px; }
.metric-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: .76rem; }
.product-card-hint { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 11px; color: #b7d7ef; font-size: .7rem; font-weight: 800; }
.product-card-hint i { color: var(--cyan); font-size: 1.15rem; font-style: normal; line-height: .8; }
.product-card-forecast { display: block; margin-top: 9px; color: #a9c9e4; font-size: .68rem; font-weight: 750; }
.meter { height: 7px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.17); }
.meter > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 11px 0; }
.mini-card { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mini-card span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .72rem; }
.mini-card strong { font-size: .9rem; }
.mini-card small { display: block; margin-top: 7px; color: var(--muted); font-size: .68rem; }
.mini-card .meter { margin-top: 9px; background: #dfe7f0; }
.notice { margin: 12px 0; padding: 13px 14px; border: 1px solid #cfe5f6; border-radius: 15px; background: #eaf5fd; }
.notice strong { display: block; margin-bottom: 4px; color: var(--navy-900); font-size: .83rem; }
.notice span { color: #4d6884; font-size: .74rem; line-height: 1.4; }
.action-stack { display: grid; gap: 9px; margin-top: 14px; }
.origin-return { width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; margin: 0 0 13px; padding: 9px 11px; border: 1px solid #c7dfee; border-radius: 13px; color: var(--ink); background: linear-gradient(135deg, #fff, #eaf5fd); text-align: left; cursor: pointer; transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease; }
.origin-return:hover { border-color: #7fc2eb; box-shadow: 0 6px 16px rgba(8,86,145,.1); transform: translateY(-1px); }
.origin-return:active { transform: translateY(0) scale(.995); }
.origin-return > i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #fff; background: var(--blue); font-size: 1.25rem; font-style: normal; line-height: 1; }
.origin-return small, .origin-return strong { display: block; }
.origin-return small { color: var(--blue); font-size: .52rem; font-weight: 900; letter-spacing: .07em; }
.origin-return strong { margin-top: 2px; font-size: .76rem; }
.primary-action, .secondary-action, .ghost-action {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 14px; font-weight: 800; font-size: .92rem; cursor: pointer; transition: .18s ease;
}
.primary-action { border: 0; color: #fff; background: linear-gradient(135deg, #0b87e5, #0672c6); box-shadow: 0 9px 20px rgba(8,126,219,.21); }
.primary-action:hover { transform: translateY(-1px); filter: brightness(1.04); }
.primary-action:disabled { cursor: not-allowed; box-shadow: none; opacity: .45; transform: none; filter: none; }
.secondary-action { border: 1.5px solid var(--blue); color: var(--blue); background: #fff; }
.ghost-action { border: 0; color: var(--blue); background: transparent; }
.detail-list { margin: 12px 0 0; border-top: 1px solid var(--line); }
.detail-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .79rem; }
.detail-list span { color: var(--muted); }
.detail-list strong { text-align: right; }
.check { color: var(--green); }
.spindle-collection-teaser {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 18px;
  gap: 10px;
  align-items: center;
  margin: 11px 0;
  padding: 13px 14px;
  border: 1px solid #cbdff0;
  border-radius: 16px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff, #eaf5fd);
  text-align: left;
  cursor: pointer;
}
.spindle-collection-teaser span b, .spindle-collection-teaser span small { display: block; }
.spindle-collection-teaser span b { margin-bottom: 3px; font-size: .88rem; }
.spindle-collection-teaser span small { color: var(--muted); font-size: .7rem; }
.spindle-collection-teaser > strong { display: flex; gap: 4px; }
.spindle-collection-teaser > strong i { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: var(--blue); background: #fff; font-size: .62rem; font-style: normal; box-shadow: 0 3px 9px rgba(5,41,84,.08); }
.spindle-collection-teaser em { color: var(--blue); font-size: 1.5rem; font-style: normal; }
.intelligence-teaser {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 46px 18px;
  gap: 10px;
  align-items: center;
  margin: 11px 0;
  padding: 13px 14px;
  border: 1px solid rgba(85,188,243,.32);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #082653, #061a3e 65%, #0b467d);
  text-align: left;
  cursor: pointer;
}
.intelligence-teaser span b, .intelligence-teaser span small { display: block; }
.intelligence-teaser span b { margin-bottom: 3px; font-size: .88rem; }
.intelligence-teaser span small { color: #9cb5d0; font-size: .7rem; }
.intelligence-teaser > strong { display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--cyan); border-radius: 50%; color: #fff; font-size: .9rem; }
.intelligence-teaser em { color: var(--cyan); font-size: 1.5rem; font-style: normal; }
.authenticity-shield-card {
  width: 100%; display: grid; grid-template-columns: 46px 1fr 18px; gap: 11px; align-items: center;
  margin: 11px 0; padding: 12px 13px; border: 1px solid rgba(42,184,126,.42); border-radius: 16px;
  color: #fff; background: linear-gradient(135deg, #061b3a 0%, #073f4d 62%, #07553f 100%);
  text-align: left; cursor: pointer; box-shadow: 0 10px 22px rgba(5,73,72,.15);
}
.authenticity-shield-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(87,230,167,.1); }
.authenticity-shield-mark svg { width: 29px; height: 35px; fill: rgba(55,207,139,.12); stroke: #57e6a7; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(87,230,167,.45)); }
.authenticity-shield-card span small, .authenticity-shield-card span strong, .authenticity-shield-card span em { display: block; }
.authenticity-shield-card span small { color: #8fb6d1; font-size: .48rem; font-weight: 900; letter-spacing: .07em; }
.authenticity-shield-card span strong { margin-top: 3px; color: #76edb7; font-size: .76rem; letter-spacing: .04em; }
.authenticity-shield-card span em { margin-top: 3px; color: #a8c3d2; font-size: .61rem; font-style: normal; }
.authenticity-shield-card > b { color: #76edb7; font-size: 1.4rem; }
.shop-entry {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 11px 0;
  padding: 14px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #071a3f 0%, #0a4f8d 58%, #0b8be7 100%);
  box-shadow: 0 12px 24px rgba(8,75,137,.2);
  text-align: left;
  cursor: pointer;
}
.orders-entry {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  margin: 11px 0; padding: 14px; border: 1px solid rgba(32,173,107,.35); border-radius: 17px;
  color: #fff; background: linear-gradient(135deg, #082653, #06375a 62%, #087b68); text-align: left; cursor: pointer;
  box-shadow: 0 10px 24px rgba(4,38,72,.13);
}
.orders-entry span small, .orders-entry span b, .orders-entry span em { display: block; }
.orders-entry span small { margin-bottom: 4px; color: #74e1bc; font-size: .55rem; font-weight: 900; letter-spacing: .08em; }
.orders-entry span b { font-size: .84rem; }
.orders-entry span em { margin-top: 3px; color: #a9c4d4; font-size: .66rem; font-style: normal; }
.orders-entry > strong { display: flex; align-items: center; gap: 6px; color: #79e4c0; font-size: .64rem; }
.orders-entry > strong i { font-size: 1.15rem; font-style: normal; }
.shop-entry span small, .shop-entry span b, .shop-entry span em { display: block; }
.shop-entry span small { margin-bottom: 4px; color: #7fd0ff; font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.shop-entry span b { font-size: .9rem; }
.shop-entry span em { margin-top: 3px; color: #bedbf1; font-size: .68rem; font-style: normal; }
.shop-entry > strong { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; background: rgba(255,255,255,.1); font-size: .68rem; }
.shop-entry > strong i { color: #7fd0ff; font-size: 1.2rem; font-style: normal; }
.spindle-library { display: grid; gap: 10px; }
.spindle-record {
  width: 100%;
  display: grid;
  grid-template-columns: 82px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1.5px solid var(--line);
  border-radius: 17px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.spindle-record:hover { border-color: #9dcced; transform: translateY(-1px); }
.spindle-record.active { border-color: #86c6ef; background: linear-gradient(135deg, #fff, #eef8ff); box-shadow: 0 0 0 3px rgba(8,126,219,.06); }
.spindle-record > img { width: 82px; height: 72px; padding: 10px 7px; object-fit: contain; border-radius: 12px; background: radial-gradient(ellipse at 50% 48%, #fff 0 43%, #edf3f8 77%, #dde7ef 100%); box-shadow: inset 0 0 0 1px rgba(22,61,99,.06); }
.spindle-record-copy, .spindle-record-copy > b, .spindle-record-copy > small, .record-meter { display: block; min-width: 0; }
.spindle-record-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.spindle-record-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.spindle-record-top i { padding: 3px 6px; border-radius: 99px; color: #138b54; background: #e5f7ed; font-size: .52rem; font-style: normal; font-weight: 900; }
.spindle-record-copy > b { font-size: .74rem; }
.spindle-record-copy > small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.spindle-record-copy > small.record-forecast { color: #2573a9; font-weight: 800; }
.record-meter { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 8px; background: #dfe7ef; }
.record-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.record-life { text-align: right; }
.record-life strong, .record-life small { display: block; }
.record-life strong { color: var(--blue); font-size: .9rem; }
.record-life small { margin-top: 2px; color: var(--muted); font-size: .58rem; }
.spindle-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 11px 0; }
.spindle-data-grid article { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.spindle-data-grid span, .spindle-data-grid strong, .spindle-data-grid small { display: block; }
.spindle-data-grid span { color: var(--muted); font-size: .67rem; }
.spindle-data-grid strong { margin: 5px 0 2px; color: var(--navy-900); font-size: 1rem; }
.spindle-data-grid small { color: #8794a5; font-size: .62rem; }
.usage-forecast { margin: 12px 0; padding: 14px; border: 1px solid #badcf2; border-radius: 17px; background: linear-gradient(135deg, #fafdff, #eaf6fd); box-shadow: 0 7px 18px rgba(7,83,143,.07); }
.usage-forecast > span { color: var(--blue); font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.usage-forecast > div { display: grid; grid-template-columns: 1fr 1px 1.2fr; gap: 12px; align-items: stretch; margin: 10px 0 8px; }
.usage-forecast > div > i { width: 1px; background: #c8ddeb; }
.usage-forecast article strong, .usage-forecast article small { display: block; }
.usage-forecast article strong { color: var(--navy-900); font-size: 1.08rem; }
.usage-forecast article small { margin-top: 3px; color: var(--muted); font-size: .64rem; line-height: 1.25; }
.usage-forecast p { margin: 0; color: #61778e; font-size: .65rem; line-height: 1.42; }
.privacy-chip { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 11px 13px; border-radius: 13px; color: #496783; background: #eaf5fd; font-size: .7rem; }
.privacy-chip strong { color: var(--blue); }
.intelligence-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 13px; padding: 4px; border-radius: 13px; background: #e3eaf2; }
.intelligence-tabs button { min-height: 37px; padding: 7px 5px; border: 0; border-radius: 10px; color: #68778b; background: transparent; font-size: .72rem; font-weight: 800; cursor: pointer; }
.intelligence-tabs button.active { color: var(--navy-900); background: #fff; box-shadow: 0 3px 10px rgba(8,34,68,.1); }
.intelligence-content { min-height: 370px; }
.intelligence-score { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: center; padding: 15px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #082653, #03132f); }
.score-ring { width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 91%, #264c73 91% 100%); }
.score-ring::before { content: ""; grid-area: 1 / 1; width: 88px; height: 88px; border-radius: 50%; background: var(--navy-900); }
.score-ring span { z-index: 1; grid-area: 1 / 1; text-align: center; }
.score-ring strong, .score-ring small { display: block; }
.score-ring strong { font-size: 1.8rem; }
.score-ring small { color: #adc1da; font-size: .62rem; }
.intelligence-score h3 { margin: 9px 0 5px; font-size: 1.05rem; }
.intelligence-score p { margin: 0; color: #a9bdd6; font-size: .72rem; line-height: 1.45; }
.intelligence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.intelligence-grid article, .engineering-grid article { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.intelligence-grid span, .intelligence-grid strong, .intelligence-grid small, .engineering-grid span, .engineering-grid strong, .engineering-grid small { display: block; }
.intelligence-grid span, .engineering-grid span { color: var(--muted); font-size: .66rem; }
.intelligence-grid strong, .engineering-grid strong { margin: 5px 0 2px; color: var(--navy-900); font-size: .95rem; }
.intelligence-grid small, .engineering-grid small { color: #8795a7; font-size: .59rem; }
.insight-list { display: grid; gap: 8px; }
.insight-list article { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; padding: 11px; border-radius: 14px; background: #eaf5fd; }
.insight-list i { color: var(--green); font-size: .9rem; font-style: normal; font-weight: 900; }
.insight-list strong, .insight-list span { display: block; }
.insight-list strong { font-size: .76rem; }
.insight-list span { margin-top: 3px; color: #57708a; font-size: .63rem; line-height: 1.35; }
.metric-legend { display: flex; gap: 15px; margin-bottom: 9px; color: var(--muted); font-size: .68rem; }
.metric-legend span { display: flex; align-items: center; gap: 6px; }
.metric-legend i, .engineering-grid > article > i { display: grid; place-items: center; border-radius: 6px; font-style: normal; font-weight: 900; }
.metric-legend i { width: 21px; height: 21px; font-size: .58rem; }
.measured { color: #0873c3; background: #e3f2fc; }
.estimated { color: #ad7200; background: #fff1d1; }
.engineering-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.engineering-grid article { position: relative; padding-top: 12px; }
.engineering-grid > article > i { position: absolute; top: 8px; right: 8px; width: 21px; height: 21px; font-size: .56rem; }
.signal-quality { margin-top: 9px; padding: 12px; border: 1px solid #cce2f2; border-radius: 14px; background: #eaf5fd; }
.signal-quality > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: .72rem; }
.signal-quality .meter { margin: 7px 0; background: #d5e4ef; }
.signal-quality small { display: block; color: #57708a; font-size: .61rem; line-height: 1.4; }
.history-summary { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 13px; border-radius: 14px; color: #fff; background: var(--navy-900); font-size: .72rem; }
.history-chart { height: 190px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; padding: 15px 12px 10px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.history-chart > div { height: 100%; display: grid; grid-template-rows: 22px 1fr 22px; align-items: end; justify-items: center; }
.history-chart span { color: var(--navy-900); font-size: .61rem; font-weight: 800; }
.history-chart i { width: 25px; align-self: end; border-radius: 8px 8px 3px 3px; background: linear-gradient(to top, var(--blue), var(--cyan)); box-shadow: 0 5px 12px rgba(8,126,219,.16); }
.history-chart small { align-self: end; color: var(--muted); font-size: .58rem; }
.trend-list { margin-top: 10px; border-top: 1px solid var(--line); }
.trend-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .72rem; }
.trend-list span { color: var(--muted); }
.prototype-disclaimer { margin: 11px 0 0; padding: 10px 11px; border-radius: 11px; color: #7c6533; background: #fff5dd; font-size: .61rem; line-height: 1.4; }
.shop-hero {
  display: grid;
  grid-template-columns: 1fr 132px;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 16px;
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(circle at 95% 20%, rgba(47,173,255,.35), transparent 44%), linear-gradient(145deg, #06152f, #082f62);
}
.shop-hero span { color: #6ecaff; font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.shop-hero h3 { margin: 7px 0 5px; font-size: 1.06rem; }
.shop-hero p { margin: 0; color: #b6cce2; font-size: .68rem; line-height: 1.4; }
.shop-hero img { width: 132px; height: 148px; object-fit: contain; filter: drop-shadow(0 12px 13px rgba(0,0,0,.35)); }
.shop-categories { display: flex; gap: 6px; margin: 12px 0; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.shop-categories::-webkit-scrollbar { display: none; }
.shop-categories button { flex: 0 0 auto; min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: #607087; background: #fff; font-size: .68rem; font-weight: 800; cursor: pointer; }
.shop-categories button.active { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 5px 12px rgba(8,126,219,.18); }
.shop-collection-block + .shop-collection-block { margin-top: 18px; }
.shop-collection-heading { margin: 2px 1px 9px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: linear-gradient(90deg, rgba(8,126,219,.1), rgba(8,126,219,0)); }
.shop-collection-heading span, .shop-collection-heading strong { display: block; }
.shop-collection-heading span { color: var(--blue); font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.shop-collection-heading strong { margin-top: 3px; color: var(--ink); font-size: .78rem; }
.women-care-block .shop-collection-heading { border-left-color: #bd7587; background: linear-gradient(90deg, rgba(189,117,135,.13), rgba(189,117,135,0)); }
.women-care-block .shop-collection-heading span { color: #a55569; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.shop-product {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.shop-product:hover { border-color: #93caed; transform: translateY(-2px); box-shadow: 0 9px 22px rgba(7,37,75,.09); }
.shop-product.featured-offer { border-color: #e3bd65; box-shadow: 0 7px 18px rgba(132,91,18,.11); }
.shop-product-image {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 126px;
  padding: 24px 13px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 48%, #fff 0 43%, #eef4f9 75%, #dce7f0 100%);
  box-shadow: inset 0 -1px 0 rgba(24,64,105,.08);
}
.shop-product-image::after { content: ""; position: absolute; z-index: -1; left: 15%; right: 15%; bottom: 17px; height: 17px; border-radius: 50%; background: rgba(12,49,85,.13); filter: blur(8px); }
.shop-product-image img { position: relative; z-index: 1; display: block; width: 100%; height: 72px; object-fit: contain; filter: drop-shadow(0 9px 8px rgba(5,19,43,.22)); }
.shop-product-image em { position: absolute; z-index: 2; right: 8px; bottom: 8px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.76); border-radius: 999px; color: #fff; background: rgba(4,27,55,.72); box-shadow: 0 4px 12px rgba(5,24,49,.18); backdrop-filter: blur(6px); font-size: .52rem; font-style: normal; font-weight: 900; letter-spacing: .03em; }
.shop-product-image mark { position: absolute; z-index: 3; top: 8px; left: 8px; padding: 5px 7px; border-radius: 999px; color: #372200; background: linear-gradient(135deg, #ffe39a, #e9b84f); box-shadow: 0 5px 12px rgba(78,49,0,.18); font-size: .5rem; font-weight: 900; letter-spacing: .045em; }
.shop-product.razor .shop-product-image { height: 188px; padding: 13px 16px; }
.shop-product.razor .shop-product-image::after { bottom: 13px; height: 24px; }
.shop-product.razor .shop-product-image img { height: 165px; }
.shop-product.go .shop-product-image { height: 174px; padding: 13px; }
.shop-product.go .shop-product-image::after { bottom: 12px; height: 22px; }
.shop-product.go .shop-product-image img { height: 151px; }
.shop-product.arc .shop-product-image { height: 132px; padding: 16px 9px; }
.shop-product.arc .shop-product-image img { height: 100px; }
.shop-product.collection .shop-product-image { height: 150px; padding: 12px 8px; }
.shop-product.collection .shop-product-image img { height: 126px; }
.shop-product.copper .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 42%, #fbf3ec 74%, #ead9c8 100%); }
.shop-product.violet .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 42%, #f0ecfa 74%, #dcd5ef 100%); }
.shop-product.electric .shop-product-image, .shop-product.aqua .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 42%, #e6f5ff 74%, #c5e7fb 100%); }
.shop-product.rose .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 42%, #fff0ef 74%, #efd9d5 100%); }
.shop-product.racing .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 42%, #f8e7e9 74%, #e2c4c8 100%); }
.shop-product.walnut .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 42%, #f4ede8 74%, #dcc9bc 100%); }
.shop-product.arc-duo .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 38%, #edf4f9 70%, #d8e6ef 100%); }
.shop-product.luxury .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 40%, #f0eadc 72%, #d8c8a6 100%); }
.shop-product.tactical .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 40%, #eceee7 72%, #cfd5c2 100%); }
.shop-product.valentine .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 40%, #fbe9ec 72%, #ecc7ce 100%); }
.shop-product.seasons .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 38%, #f8f0e8 70%, #e6d2be 100%); }
.shop-product.aurora .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 38%, #fff1dc 70%, #eab995 100%); }
.shop-product.calm .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 40%, #edf7ef 72%, #d6e8df 100%); }
.shop-product.christmas .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 38%, #f3e8dc 68%, #c9a67e 100%); }
.shop-product.tactical-carbon .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #f7f7f4 0 36%, #d6d5ce 67%, #9c9c91 100%); }
.shop-product.rich .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 38%, #ead8d1 68%, #b78b78 100%); }
.shop-product.silk .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 40%, #fff0ec 70%, #ead0c7 100%); }
.shop-product.tropical .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 36%, #def7ed 66%, #8fd4c6 100%); }
.shop-product.jewel .shop-product-image { background: radial-gradient(ellipse at 50% 48%, #fff 0 35%, #f8ead0 65%, #c99d5e 100%); }
.shop-product-copy { display: block; padding: 11px; }
.shop-product-copy small, .shop-product-copy strong, .shop-product-copy span, .shop-product-copy b { display: block; }
.shop-product-copy small { color: var(--blue); font-size: .6rem; font-weight: 900; letter-spacing: .06em; }
.shop-product-copy strong { margin: 5px 0 4px; font-size: .79rem; }
.shop-product-copy > span { min-height: 43px; color: var(--muted); font-size: .61rem; line-height: 1.35; }
.shop-product-copy .product-price { display: flex; justify-content: space-between; align-items: end; gap: 7px; min-height: 0; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.product-price > span { display: flex; align-items: baseline; gap: 6px; min-height: 0; }
.product-price strong { margin: 0; color: var(--ink); font-size: .83rem; }
.product-price del { color: #8996a7; font-size: .59rem; font-weight: 700; }
.product-price small { color: var(--muted); font-size: .52rem; font-weight: 700; letter-spacing: 0; text-align: right; }
.product-price.offer strong { color: #a46300; }
.shop-product-copy b { margin-top: 7px; color: var(--blue); font-size: .62rem; }
.shop-product-copy b i { font-size: .95rem; font-style: normal; }
.shop-product-detail { overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #06152f, #0a3c73); }
.shop-gallery { position: relative; }
.shop-gallery-stage { position: relative; overflow: hidden; }
.shop-gallery-stage > img { display: block; width: 100%; height: 178px; padding: 18px; object-fit: contain; background: radial-gradient(circle at 50% 35%, rgba(92,193,255,.25), transparent 55%); filter: drop-shadow(0 13px 14px rgba(0,0,0,.3)); }
.shop-product-detail.razor .shop-gallery-stage > img { height: 300px; padding: 16px 24px; }
.shop-product-detail.go .shop-gallery-stage > img { height: 270px; padding: 15px 38px; }
.shop-product-detail.arc .shop-gallery-stage > img { height: 220px; padding: 18px 12px; }
.shop-product-detail.collection .shop-gallery-stage > img { height: 250px; padding: 14px 10px; }
.shop-gallery-arrow { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.64); border-radius: 50%; color: #fff; background: rgba(3,25,53,.68); box-shadow: 0 8px 20px rgba(0,0,0,.2); backdrop-filter: blur(7px); transform: translateY(-50%); font-size: 1.55rem; line-height: 1; cursor: pointer; }
.shop-gallery-arrow.previous { left: 10px; }
.shop-gallery-arrow.next { right: 10px; }
.shop-gallery-arrow:hover { background: rgba(8,126,219,.9); }
.shop-gallery-label { position: absolute; z-index: 2; right: 12px; bottom: 10px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff !important; background: rgba(3,25,53,.7); backdrop-filter: blur(7px); font-size: .57rem !important; }
.shop-gallery-dots { display: flex; justify-content: center; gap: 7px; padding: 8px 12px 12px; }
.shop-gallery-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.34); cursor: pointer; }
.shop-gallery-dots button.active { width: 24px; border-radius: 999px; background: #67cbff; }
.shop-product-detail-copy { padding: 0 17px 17px; }
.shop-product-detail span { color: #70caff; font-size: .57rem; font-weight: 900; letter-spacing: .09em; }
.shop-product-detail h3 { margin: 6px 0 5px; font-size: 1.15rem; }
.shop-product-detail p { margin: 0; color: #bdcfe2; font-size: .72rem; line-height: 1.42; }
.shop-product-detail .detail-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.shop-product-detail .detail-price > span { display: flex; align-items: baseline; gap: 8px; }
.shop-product-detail .detail-price strong { color: #fff; font-size: 1.2rem; }
.shop-product-detail .detail-price del { color: #aebed0; font-size: .72rem; }
.shop-product-detail .detail-price small { color: #a9d9f4; font-size: .61rem; font-weight: 800; letter-spacing: .02em; text-align: right; }
.shop-product-detail.rose { background: linear-gradient(145deg, #593b49, #ae7682); }
.shop-product-detail.aqua, .shop-product-detail.electric { background: linear-gradient(145deg, #061b42, #087dc3); }
.shop-product-detail.copper { background: linear-gradient(145deg, #221818, #754c37); }
.shop-product-detail.racing { background: linear-gradient(145deg, #2b080c, #8c1520); }
.shop-product-detail.walnut { background: linear-gradient(145deg, #1d1110, #68402d); }
.shop-product-detail.arc-duo { background: linear-gradient(145deg, #081a2f, #6e463c); }
.shop-product-detail.luxury { background: linear-gradient(145deg, #090909, #5b4524); }
.shop-product-detail.tactical { background: linear-gradient(145deg, #11170f, #4b573b); }
.shop-product-detail.valentine { background: linear-gradient(145deg, #36080f, #ad2839); }
.shop-product-detail.seasons { background: linear-gradient(145deg, #35251f, #9c7254); }
.shop-product-detail.aurora { background: linear-gradient(145deg, #2f201e, #bc6950); }
.shop-product-detail.calm { background: linear-gradient(145deg, #20362f, #6e9d8d); }
.shop-product-detail.christmas { background: linear-gradient(145deg, #173026, #9c2c28); }
.shop-product-detail.tactical-carbon { background: linear-gradient(145deg, #090c0c, #353b37); }
.shop-product-detail.rich { background: linear-gradient(145deg, #271016, #713b34); }
.shop-product-detail.silk { background: linear-gradient(145deg, #4e3136, #b17878); }
.shop-product-detail.tropical { background: linear-gradient(145deg, #063a3b, #078a88); }
.shop-product-detail.jewel { background: linear-gradient(145deg, #3a0b0a, #9a2f22 58%, #b88842); }
.live-panel { padding: 18px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #082653, #03132f); }
.spindle-state-banner { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; margin-top: 12px; padding: 15px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #07364b, #08785f); }
.spindle-state-banner.in-use { background: linear-gradient(145deg, #062856, #087ed1); }
.spindle-state-banner > i { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.1); font-style: normal; font-weight: 900; }
.spindle-state-banner span, .spindle-state-banner strong, .spindle-state-banner small { display: block; }
.spindle-state-banner span { color: #83e7c6; font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.spindle-state-banner.in-use span { color: #9ddcff; }
.spindle-state-banner strong { margin: 4px 0; font-size: .92rem; }
.spindle-state-banner small { color: #c2dfd7; font-size: .72rem; line-height: 1.45; }
.spindle-state-banner.in-use small { color: #c8e5f8; }
.application-preview { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.application-preview > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 11px; }
.application-preview > div:first-child span { color: var(--muted); font-size: .73rem; }
.application-preview > div:first-child strong { font-size: .78rem; text-align: right; }
.application-preview .stat-grid { margin: 0; }
.no-spindle-card { display: grid; justify-items: center; padding: 28px 19px; border: 1px dashed #b9d4e6; border-radius: 20px; background: linear-gradient(145deg, #fff, #eaf5fd); text-align: center; }
.no-spindle-card > i { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 11px; border-radius: 50%; color: var(--blue); background: #dff1fd; font-size: 2rem; font-style: normal; }
.no-spindle-card > span { color: var(--blue); font-size: .65rem; font-weight: 900; letter-spacing: .09em; }
.no-spindle-card h3 { margin: 7px 0 5px; font-size: 1.15rem; }
.no-spindle-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.timer-ring { width: 165px; height: 165px; display: grid; place-items: center; margin: 8px auto 18px; border-radius: 50%; background: conic-gradient(var(--cyan) 0 72%, #244d77 72% 100%); position: relative; }
.timer-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--navy-900); }
.timer-ring div { position: relative; z-index: 1; text-align: center; }
.timer-ring strong { display: block; font-size: 2rem; }
.timer-ring span { color: #afc4de; font-size: .75rem; }
.pressure { padding: 13px; border: 1px solid rgba(85,188,243,.22); border-radius: 14px; background: rgba(255,255,255,.04); }
.pressure > span { font-size: .76rem; color: #b5c9e1; }
.pressure-bars { display: flex; gap: 8px; align-items: end; height: 42px; margin-top: 8px; }
.pressure-bars i { flex: 1; height: 15px; border-radius: 5px; background: #40688c; animation: pressure 1.8s ease-in-out infinite; }
.pressure-bars i:nth-child(2), .pressure-bars i:nth-child(6) { height: 23px; animation-delay: -.3s; }
.pressure-bars i:nth-child(3), .pressure-bars i:nth-child(5) { height: 31px; background: var(--green); animation-delay: -.6s; }
.pressure-bars i:nth-child(4) { height: 38px; background: var(--green); animation-delay: -.9s; }
@keyframes pressure { 50% { transform: scaleY(.78); opacity: .82; } }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.stat { min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stat span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .66rem; }
.stat strong { font-size: .86rem; }
.life-ring { width: 175px; height: 175px; display: grid; place-items: center; margin: 4px auto 12px; position: relative; border-radius: 50%; background: conic-gradient(var(--amber) 0 18%, #e8edf3 18% 100%); }
.life-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--surface); }
.life-ring div { z-index: 1; text-align: center; }
.life-ring strong { display: block; font-size: 2rem; }
.life-ring span { color: var(--muted); font-size: .74rem; }
.factor-list { display: grid; gap: 8px; margin: 14px 0; }
.factor-list div { display: flex; align-items: center; gap: 9px; font-size: .78rem; }
.factor-list i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.choice-list { display: grid; gap: 9px; margin-top: 12px; }
.choice-card { position: relative; display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; padding: 11px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; }
.choice-card.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,126,219,.08); }
.choice-card img { width: 74px; height: 54px; object-fit: contain; }
.choice-card strong { display: block; margin-bottom: 3px; font-size: .87rem; }
.choice-card span { display: block; color: var(--muted); font-size: .72rem; }
.choice-card .choice-price { display: block; margin-top: 5px; color: var(--ink); font-size: .75rem; font-style: normal; font-weight: 900; }
.choice-card .choice-price del { margin-left: 4px; color: #8c98a6; font-size: .62rem; font-weight: 700; }
.choice-card b { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.choice-card.selected b { color: #fff; border-color: var(--blue); background: var(--blue); }
.confirmation { display: grid; justify-items: center; padding-top: 10px; text-align: center; }
.confirmation-mark { display: grid; place-items: center; width: 82px; height: 82px; margin-bottom: 18px; border-radius: 50%; color: var(--green); background: #e4f7ed; font-size: 2.5rem; }
.confirmation-mark.live-evaluation { color: var(--blue); background: #e4f3fd; }
.confirmation h2 { margin: 0; font-size: 1.55rem; }
.confirmation p { margin: 9px 0 18px; color: var(--muted); font-size: .86rem; line-height: 1.48; }
.order-summary { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: left; }
.order-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .78rem; }
.order-summary span { color: var(--muted); }
.orders-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 13px; padding: 4px; border-radius: 13px; background: #e3eaf2; }
.orders-tabs button { min-height: 37px; padding: 7px 4px; border: 0; border-radius: 10px; color: #68778b; background: transparent; font-size: .68rem; font-weight: 800; cursor: pointer; }
.orders-tabs button.active { color: #fff; background: var(--blue); box-shadow: 0 5px 12px rgba(8,126,219,.18); }
.choice-philosophy { padding: 17px; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #06152f, #0a3c73 64%, #087b68); }
.choice-philosophy span { color: #7ee7c3; font-size: .63rem; font-weight: 900; letter-spacing: .11em; }
.choice-philosophy h3 { margin: 7px 0 5px; font-size: 1.18rem; }
.choice-philosophy p { margin: 0; color: #b9cee3; font-size: .74rem; line-height: 1.45; }
.order-modes { display: grid; gap: 8px; margin: 12px 0; }
.order-mode-card { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease, background .17s ease; }
.order-mode-card:hover { border-color: #84c7ec; background: linear-gradient(135deg, #fff, #f0f9ff); box-shadow: 0 8px 20px rgba(8,86,145,.1); transform: translateY(-1px); }
.order-mode-card:active { transform: translateY(0) scale(.99); }
.order-mode-card:focus-visible { outline: 3px solid rgba(8,126,219,.22); outline-offset: 2px; border-color: var(--blue); }
.order-mode-card > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--blue); background: #e7f4fd; font-style: normal; font-weight: 900; transition: background .17s ease, color .17s ease; }
.order-mode-card:hover > i { color: #fff; background: var(--blue); }
.order-modes strong, .order-modes span { display: block; }
.order-modes strong { font-size: .8rem; }
.order-modes span { margin-top: 2px; color: var(--muted); font-size: .65rem; line-height: 1.35; }
.mode-trailing { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; }
.mode-trailing b { color: #168b56; font-size: .53rem; letter-spacing: .04em; white-space: nowrap; }
.mode-trailing em { color: var(--blue); font-size: 1.25rem; font-style: normal; font-weight: 700; line-height: 1; transition: transform .17s ease; }
.order-mode-card:hover .mode-trailing em { transform: translateX(2px); }
.orders-recommendation { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid #cbe3f4; border-radius: 16px; background: #eaf5fd; }
.orders-recommendation img { width: 76px; height: 58px; padding: 7px; object-fit: contain; border-radius: 11px; background: #fff; }
.orders-recommendation span, .orders-recommendation strong, .orders-recommendation small { display: block; }
.orders-recommendation span { color: var(--blue); font-size: .55rem; font-weight: 900; }
.orders-recommendation strong { margin: 3px 0; font-size: .75rem; }
.orders-recommendation small { color: var(--muted); font-size: .62rem; }
.orders-recommendation button { padding: 8px 9px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); font-size: .63rem; font-weight: 800; cursor: pointer; }
.order-history { display: grid; gap: 9px; }
.order-history article { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.order-history article > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--green); font-style: normal; }
.order-history article > i.planned { background: var(--blue); }
.order-history small, .order-history strong, .order-history em { display: block; }
.order-history small { color: var(--blue); font-size: .53rem; font-weight: 900; }
.order-history strong { margin: 3px 0; font-size: .76rem; }
.order-history em { color: var(--muted); font-size: .6rem; font-style: normal; }
.order-history article > b { font-size: .72rem; white-space: nowrap; }
.adaptive-supply { margin: 12px 0; overflow: hidden; border: 1px solid #b9dced; border-radius: 18px; background: linear-gradient(145deg, #f9fdff, #eaf7fb); box-shadow: 0 8px 22px rgba(5,66,102,.07); }
.adaptive-head { display: grid; grid-template-columns: 1fr 66px; gap: 12px; align-items: center; padding: 14px; }
.adaptive-head span, .adaptive-head strong, .adaptive-head > div > small { display: block; }
.adaptive-head span { color: #087b68; font-size: .55rem; font-weight: 900; letter-spacing: .09em; }
.adaptive-head strong { margin: 4px 0 3px; font-size: .9rem; }
.adaptive-head > div > small { color: var(--muted); font-size: .62rem; }
.adaptive-head > i { display: grid; place-items: center; align-content: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; background: conic-gradient(#20ad6b 0 78%, #b8d9d0 78%); box-shadow: inset 0 0 0 7px rgba(255,255,255,.2); font-style: normal; }
.adaptive-head > i b, .adaptive-head > i small { display: block; line-height: 1; }
.adaptive-head > i b { font-size: 1rem; }
.adaptive-head > i small { margin-top: 3px; font-size: .5rem; }
.adaptive-inventory { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cae3ec; border-bottom: 1px solid #cae3ec; background: rgba(255,255,255,.72); }
.adaptive-inventory > div { padding: 10px 7px; border-right: 1px solid #d7e9ef; text-align: center; }
.adaptive-inventory > div:last-child { border-right: 0; }
.adaptive-inventory span, .adaptive-inventory strong, .adaptive-inventory small { display: block; }
.adaptive-inventory span { color: var(--muted); font-size: .54rem; }
.adaptive-inventory strong { margin: 3px 0 2px; font-size: .76rem; }
.adaptive-inventory small { color: #168b56; font-size: .53rem; font-weight: 800; }
.adaptive-event { display: grid; grid-template-columns: 29px 1fr; gap: 9px; align-items: center; padding: 11px 13px; }
.adaptive-event > i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff; background: var(--green); font-size: .68rem; font-style: normal; }
.adaptive-event strong, .adaptive-event small { display: block; }
.adaptive-event strong { font-size: .7rem; }
.adaptive-event small { margin-top: 2px; color: var(--muted); font-size: .59rem; line-height: 1.35; }
.adaptive-supply.compact { margin-top: 9px; }
.adaptive-learning { margin: 10px 0; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.learning-top { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.learning-top small, .learning-top strong { display: block; }
.learning-top small { color: var(--blue); font-size: .52rem; font-weight: 900; letter-spacing: .07em; }
.learning-top strong { margin-top: 3px; font-size: .78rem; }
.learning-top > b { color: #087b68; font-size: 1rem; }
.learning-meter { height: 6px; margin: 9px 0; overflow: hidden; border-radius: 6px; background: #e2e9ef; }
.learning-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #20ad6b); }
.learning-signals { display: flex; flex-wrap: wrap; gap: 5px; }
.learning-signals span { padding: 5px 7px; border-radius: 999px; color: #32617b; background: #eaf5fd; font-size: .54rem; font-weight: 800; }
.adaptive-learning p { margin: 9px 0 0; color: var(--muted); font-size: .61rem; line-height: 1.4; }
.confirmation-rule { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; margin-top: 10px; padding: 12px; border: 1px solid #bfe6d2; border-radius: 15px; background: #e9f8f0; }
.confirmation-rule > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--green); font-style: normal; }
.confirmation-rule strong, .confirmation-rule span { display: block; }
.confirmation-rule strong { font-size: .75rem; }
.confirmation-rule span { margin-top: 3px; color: #46715e; font-size: .62rem; line-height: 1.4; }
.empty-subscription { display: grid; justify-items: center; padding: 22px 17px; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #06152f, #0a3c73); text-align: center; }
.empty-subscription > i { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #77e4bf; background: rgba(255,255,255,.08); font-size: 1.55rem; font-style: normal; }
.empty-subscription span { color: #78e3bf; font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.empty-subscription h3 { margin: 7px 0 4px; font-size: 1.25rem; }
.empty-subscription p { max-width: 290px; margin: 0; color: #afc5da; font-size: .72rem; line-height: 1.5; }
.flex-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.flex-benefits > div { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.flex-benefits i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--blue); background: #e7f4fd; font-style: normal; font-weight: 900; }
.flex-benefits strong, .flex-benefits small { display: block; }
.flex-benefits strong { font-size: .72rem; }
.flex-benefits small { margin-top: 2px; color: var(--muted); font-size: .58rem; }
.field-label { display: block; margin: 14px 1px 8px; color: var(--muted); font-size: .68rem; font-weight: 800; }
.subscription-options { display: grid; gap: 8px; }
.subscription-options button { display: grid; grid-template-columns: 1fr 25px; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.subscription-options button.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,126,219,.07); }
.subscription-options strong, .subscription-options span { display: block; }
.subscription-options strong { font-size: .78rem; }
.subscription-options span { margin-top: 3px; color: var(--muted); font-size: .63rem; line-height: 1.35; }
.subscription-options b { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.subscription-options button.selected b { color: #fff; border-color: var(--blue); background: var(--blue); }
.quantity-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.quantity-control > span strong, .quantity-control > span small { display: block; }
.quantity-control > span strong { font-size: .76rem; }
.quantity-control > span small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.quantity-control > div { display: flex; align-items: center; gap: 10px; }
.quantity-control button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: var(--blue); background: #f7fbfe; font-weight: 900; cursor: pointer; }
.quantity-control input { width: 54px; min-height: 32px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; text-align: center; font: inherit; font-size: .75rem; font-weight: 900; }
.checkout-controls { display: grid; gap: 10px; margin-bottom: 12px; }
.checkout-section { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.checkout-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.checkout-heading strong, .checkout-heading small { display: block; }
.checkout-heading strong { font-size: .78rem; }
.checkout-heading small { margin-top: 3px; color: var(--muted); font-size: .61rem; line-height: 1.35; }
.checkout-heading > b { color: var(--blue); font-size: .65rem; text-align: right; }
.order-quantity-control { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 8px; margin-top: 10px; }
.order-quantity-control button, .order-quantity-control input { min-height: 38px; border: 1px solid #c7dfee; border-radius: 11px; color: var(--blue); background: #f5fbff; font: inherit; font-weight: 900; text-align: center; }
.order-quantity-control button { cursor: pointer; font-size: 1rem; }
.order-quantity-control input { color: var(--ink); background: #fff; font-size: .82rem; }
.fulfillment-options { display: grid; gap: 7px; margin-top: 10px; }
.fulfillment-options > button { display: grid; grid-template-columns: 32px 1fr 23px; gap: 9px; align-items: center; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.fulfillment-options > button.selected { border-color: var(--blue); background: #f5fbff; box-shadow: 0 0 0 3px rgba(8,126,219,.07); }
.fulfillment-options i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--blue); background: #e7f4fd; font-style: normal; font-weight: 900; }
.fulfillment-options strong, .fulfillment-options small { display: block; }
.fulfillment-options strong { font-size: .72rem; }
.fulfillment-options small { margin-top: 2px; color: var(--muted); font-size: .57rem; }
.fulfillment-options b, .schedule-approval b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.fulfillment-options button.selected b, .schedule-approval button.selected b { color: #fff; border-color: var(--blue); background: var(--blue); }
.date-planner, .date-field { display: grid; gap: 7px; margin-top: 10px; }
.date-field > span:first-child { color: var(--muted); font-size: .62rem; font-weight: 800; }
.date-field input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #c7dfee; border-radius: 11px; color: var(--ink); background: #fff; font: inherit; font-size: .72rem; }
.date-add-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.date-add-row button { min-height: 40px; padding: 8px 11px; border: 0; border-radius: 11px; color: #fff; background: var(--blue); font-size: .65rem; font-weight: 900; cursor: pointer; }
.scheduled-date-list { display: flex; flex-wrap: wrap; gap: 6px; }
.scheduled-date-list > button { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #beddf0; border-radius: 999px; color: #195678; background: #eaf5fd; font-size: .59rem; font-weight: 800; cursor: pointer; }
.scheduled-date-list > button i { color: var(--blue); font-size: .85rem; font-style: normal; }
.scheduled-date-list > span { color: var(--muted); font-size: .62rem; }
.schedule-approval { display: grid; gap: 7px; margin-top: 10px; }
.schedule-approval > button { display: grid; grid-template-columns: 1fr 23px; gap: 8px; padding: 10px; border: 1.5px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.schedule-approval > button.selected { border-color: var(--green); background: #f3fbf7; }
.schedule-approval strong, .schedule-approval span { display: block; }
.schedule-approval strong { grid-column: 1; font-size: .7rem; }
.schedule-approval span { grid-column: 1; margin-top: 3px; color: var(--muted); font-size: .57rem; line-height: 1.35; }
.schedule-approval b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.schedule-approval button.selected b { border-color: var(--green); background: var(--green); }
.schedule-warning { margin-top: 12px; padding: 11px 12px; border: 1px solid #f0d59f; border-radius: 13px; background: #fff7e6; }
.schedule-warning strong, .schedule-warning span { display: block; }
.schedule-warning strong { color: #7b5810; font-size: .72rem; }
.schedule-warning span { margin-top: 3px; color: #846c3d; font-size: .61rem; }
.subscription-status { display: grid; grid-template-columns: 1fr 62px; align-items: center; gap: 15px; padding: 18px; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #063a4e, #087b68); }
.subscription-status.paused { background: linear-gradient(145deg, #4d3b12, #8a681c); }
.subscription-status span, .subscription-status strong, .subscription-status small { display: block; }
.subscription-status span { color: #85ebc9; font-size: .57rem; font-weight: 900; letter-spacing: .08em; }
.subscription-status strong { margin: 6px 0 4px; font-size: 1rem; }
.subscription-status small { color: #c4e2da; font-size: .66rem; }
.subscription-status > i { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.1); font-size: 1.5rem; font-style: normal; }
.subscription-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.subscription-actions button { display: grid; grid-template-columns: 31px 1fr; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.subscription-actions i { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--blue); background: #e7f4fd; font-style: normal; font-weight: 900; }
.subscription-actions strong, .subscription-actions span { display: block; }
.subscription-actions strong { font-size: .71rem; }
.subscription-actions span { color: var(--muted); font-size: .57rem; }

.checkout-progress { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 2px 0 15px; }
.checkout-progress::before { content: ""; position: absolute; top: 13px; right: 12%; left: 12%; height: 2px; background: #d7e0e9; }
.checkout-progress span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; color: #8a96a6; }
.checkout-progress i { display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid #d7e0e9; border-radius: 50%; background: var(--surface); font-size: .62rem; font-style: normal; font-weight: 900; }
.checkout-progress small { font-size: .55rem; font-weight: 800; }
.checkout-progress span.active i { color: #fff; border-color: var(--blue); background: var(--blue); }
.checkout-progress span.active small { color: var(--blue); }
.checkout-progress span.current i { box-shadow: 0 0 0 4px rgba(8,126,219,.13); }
.cart-status-strip { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #c7dceb; border-radius: 16px; color: var(--ink); background: linear-gradient(145deg, #fff, #edf7fe); text-align: left; cursor: pointer; box-shadow: 0 7px 18px rgba(7,68,112,.07); }
.cart-status-strip > i { position: relative; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: var(--blue); background: #dff1fd; font-style: normal; }
.cart-status-strip > i svg, .checkout-cart-peek svg, .empty-cart svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.cart-status-strip > i b { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--blue); font-size: .5rem; }
.cart-status-strip > span { min-width: 0; }
.cart-status-strip small, .cart-status-strip strong, .cart-status-strip em { display: block; }
.cart-status-strip small { color: var(--blue); font-size: .48rem; font-weight: 900; letter-spacing: .07em; }
.cart-status-strip strong { margin-top: 2px; font-size: .74rem; }
.cart-status-strip em { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: .56rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.cart-status-strip > b { color: var(--blue); font-size: 1.15rem; }
.checkout-cart-peek { width: 100%; display: grid; grid-template-columns: 35px 1fr auto; gap: 9px; align-items: center; margin: 0 0 12px; padding: 9px 11px; border: 1px solid #c9dbe8; border-radius: 14px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.checkout-cart-peek > i { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: var(--blue); background: #e8f5fe; font-style: normal; }
.checkout-cart-peek small, .checkout-cart-peek strong { display: block; }
.checkout-cart-peek small { color: var(--blue); font-size: .46rem; font-weight: 900; letter-spacing: .06em; }
.checkout-cart-peek strong { margin-top: 3px; font-size: .67rem; }
.checkout-cart-peek em { color: var(--blue); font-size: .58rem; font-style: normal; font-weight: 900; }
.cart-lines { display: grid; gap: 9px; }
.cart-line { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cart-line > img { width: 62px; height: 58px; padding: 6px; object-fit: contain; border-radius: 12px; background: radial-gradient(circle, #fff 30%, #e8f4fb); }
.cart-line-copy { min-width: 0; }
.cart-line-copy strong, .cart-line-copy span, .cart-line-copy small { display: block; }
.cart-line-copy strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-copy span { margin-top: 3px; color: var(--blue); font-size: .56rem; font-weight: 850; }
.cart-line-copy small { margin-top: 3px; color: var(--muted); font-size: .55rem; line-height: 1.35; }
.cart-line > b { color: var(--navy-900); font-size: .7rem; white-space: nowrap; }
.cart-line-actions { grid-column: 2 / -1; display: grid; grid-template-columns: 32px 46px 32px 1fr; gap: 6px; align-items: center; }
.cart-line-actions button, .cart-line-actions input { height: 32px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #f7f9fc; text-align: center; font-size: .72rem; font-weight: 850; }
.cart-line-actions button { cursor: pointer; }
.cart-line-actions .cart-remove { justify-self: end; padding: 0 7px; border-color: #efd3d3; color: #9c3c3c; background: #fff8f8; font-size: .57rem; }
.cart-lines.compact .cart-line { grid-template-columns: 54px 1fr auto; padding: 9px; }
.cart-lines.compact .cart-line > img { width: 54px; height: 50px; }
.cart-compact-quantity { grid-column: 3; color: var(--blue); font-size: .61rem; font-weight: 900; text-align: right; }
.cart-summary { margin-top: 11px; padding: 13px 14px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--navy-900), #0a3c73); }
.cart-summary div { display: flex; justify-content: space-between; gap: 12px; }
.cart-summary span, .cart-summary strong { font-size: .84rem; }
.cart-summary small { display: block; margin-top: 5px; color: #b8cce1; font-size: .6rem; }
.empty-cart { display: grid; justify-items: center; padding: 27px 18px; border: 1px dashed #bad7e9; border-radius: 19px; background: linear-gradient(145deg, #fff, #eaf5fd); text-align: center; }
.empty-cart > i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--blue); background: #dff1fd; font-size: 1.25rem; font-style: normal; }
.empty-cart h3 { margin: 11px 0 5px; font-size: 1rem; }
.empty-cart p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.checkout-panel { margin-bottom: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.checkout-panel-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 11px; }
.checkout-panel-title strong { font-size: .82rem; }
.checkout-panel-title small { color: var(--muted); font-size: .55rem; text-align: right; }
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.address-grid label { display: grid; gap: 4px; }
.address-grid label.wide { grid-column: 1 / -1; }
.address-grid span { color: var(--muted); font-size: .57rem; font-weight: 800; }
.address-grid input { width: 100%; min-width: 0; height: 37px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #f8fafc; font-size: .7rem; }
.shipping-options, .payment-options { display: grid; gap: 8px; margin: 8px 0 12px; }
.shipping-options > button, .payment-options > button { display: grid; grid-template-columns: 40px 1fr auto 22px; gap: 9px; align-items: center; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.shipping-options > button.selected, .payment-options > button.selected { border-color: var(--blue); background: #f3faff; box-shadow: 0 0 0 3px rgba(8,126,219,.07); }
.service-logo { position: relative; display: grid !important; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 5px 12px rgba(5,56,98,.13); }
.service-logo svg { width: 27px; height: 27px; overflow: visible; }
.service-logo svg path, .service-logo svg circle { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.service-logo.standard { color: #fff; background: linear-gradient(145deg, #087edb, #05519b); }
.service-logo.express { color: #fff; background: linear-gradient(145deg, #ffad32, #ee4b2b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 14px rgba(238,75,43,.28); }
.service-logo.express svg { width: 32px; height: 32px; }
.service-logo.express svg .speed { stroke-width: 2.8; }
.service-logo.express svg .van { fill: rgba(255,255,255,.13); }
.service-logo.express svg .clock { stroke-width: 2; opacity: .95; }
.service-logo.pickup { color: #fff; background: linear-gradient(145deg, #12a786, #087b68); }
.service-logo.pickup svg rect { fill: rgba(255,255,255,.08); stroke: currentColor; stroke-width: 2.1; }
.service-logo.pickup svg .parcel { fill: rgba(255,255,255,.24); stroke-width: 1.5; }
.shipping-options span, .shipping-options strong, .shipping-options small, .payment-options span, .payment-options strong, .payment-options small { display: block; }
.shipping-options strong, .payment-options strong { font-size: .7rem; }
.shipping-options small, .payment-options small { margin-top: 3px; color: var(--muted); font-size: .56rem; line-height: 1.35; }
.shipping-options em { color: #168b56; font-size: .52rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.shipping-options button > b, .payment-options button > b { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: .6rem; }
.shipping-options button.selected > b, .payment-options button.selected > b { color: #fff; border-color: var(--blue); background: var(--blue); }
.provider-note { margin: 10px 0 12px; padding: 12px; border: 1px solid #cbe3f4; border-radius: 14px; background: #eaf5fd; }
.provider-note strong, .provider-note span { display: block; }
.provider-note strong { font-size: .7rem; }
.provider-note span { margin-top: 3px; color: #52708b; font-size: .57rem; line-height: 1.35; }
.provider-note > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.provider-logo { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; min-width: 70px; height: 31px; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(19,52,82,.12); border-radius: 8px; background: #fff; box-shadow: 0 3px 8px rgba(15,61,92,.08); font-style: normal; }
.provider-logo b { position: relative; z-index: 2; font-size: .64rem; font-weight: 950; letter-spacing: -.02em; }
.provider-logo.post { color: #171717; background: #ffd500; }
.provider-logo.post i { color: #e31b23; font-size: .74rem; font-style: normal; line-height: 1; }
.provider-logo.dhl { color: #d40511; background: #ffcc00; }
.provider-logo.dhl::before, .provider-logo.dhl::after { content: ""; position: absolute; left: 5px; width: 19px; height: 2px; background: #d40511; transform: skewX(-27deg); }
.provider-logo.dhl::before { top: 9px; }
.provider-logo.dhl::after { bottom: 9px; }
.provider-logo.dhl b { font-size: .8rem; font-style: italic; letter-spacing: -.08em; }
.provider-logo.dpd { justify-content: flex-start; color: #343434; }
.provider-logo.dpd i { width: 15px; height: 15px; margin-left: 1px; background: #dc0032; clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); }
.provider-logo.dpd b { font-size: .72rem; text-transform: lowercase; }
.payment-options > button { grid-template-columns: 96px 1fr 22px; }
.payment-logo { display: flex !important; align-items: center; justify-content: center; min-width: 96px; min-height: 36px; padding: 4px 6px; overflow: hidden; border: 1px solid #dbe2ea; border-radius: 9px; background: #fff; box-shadow: 0 3px 8px rgba(8,47,83,.06); white-space: nowrap; }
.payment-logo i, .payment-logo em { font-style: normal; }
.card-brands { gap: 5px; padding-inline: 5px; }
.card-brands > i { display: grid; place-items: center; height: 22px; border-radius: 4px; font-size: .43rem; font-weight: 950; line-height: 1; }
.card-brands .visa { width: 29px; color: #1434cb; font-size: .51rem; font-style: italic; letter-spacing: -.05em; }
.card-brands .mastercard { position: relative; width: 25px; }
.card-brands .mastercard b { position: absolute; width: 16px; height: 16px; border-radius: 50%; }
.card-brands .mastercard b:first-child { left: 1px; background: #eb001b; }
.card-brands .mastercard b:last-child { right: 1px; background: #f79e1b; mix-blend-mode: multiply; }
.card-brands .amex { width: 29px; color: #fff; background: #006fcf; font-size: .42rem; letter-spacing: -.02em; }
.payment-logo.paypal { gap: 5px; justify-content: flex-start; color: #003087; }
.payment-logo.paypal > i { position: relative; width: 22px; height: 25px; }
.payment-logo.paypal > i b { position: absolute; font-family: Arial, sans-serif; font-size: 1.35rem; font-style: italic; font-weight: 950; line-height: 1; }
.payment-logo.paypal > i b:first-child { left: 1px; top: 1px; color: #003087; }
.payment-logo.paypal > i b:last-child { left: 6px; top: 4px; color: #009cde; opacity: .88; }
.payment-logo.paypal em { color: #003087; font-size: .64rem; font-weight: 900; letter-spacing: -.04em; }
.payment-logo.applepay { gap: 4px; color: #050505; }
.payment-logo.applepay svg { width: 16px; height: 21px; fill: currentColor; }
.payment-logo.applepay em { font-size: .72rem; font-weight: 750; letter-spacing: -.04em; }
.payment-logo.klarna { position: relative; justify-content: space-between; color: #111; border-color: #ffb3c7; background: #ffb3c7; }
.payment-logo.klarna b { font-size: .68rem; font-weight: 950; letter-spacing: -.04em; }
.payment-logo.klarna i { width: 6px; height: 6px; border-radius: 50%; background: #111; }
.payment-logo.invoice { gap: 6px; justify-content: flex-start; color: #fff; border: 0; background: linear-gradient(145deg, #0a2858, #087edb); }
.payment-logo.invoice > i { display: grid; place-items: center; width: 23px; height: 26px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 4px; }
.payment-logo.invoice > i b { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; color: #087edb; background: #fff; font-size: .46rem; }
.payment-logo.invoice em { font-size: .55rem; font-weight: 950; letter-spacing: .04em; }
.payment-security { display: grid; grid-template-columns: 32px 1fr; gap: 9px; padding: 12px; border: 1px solid #bfe5d3; border-radius: 14px; background: #effaf5; }
.payment-security > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--green); font-style: normal; }
.payment-security strong, .payment-security span { display: block; }
.payment-security strong { font-size: .7rem; }
.payment-security span { margin-top: 3px; color: #527467; font-size: .58rem; line-height: 1.35; }
.checkout-review-summary { margin-top: 11px; }
.checkout-review-summary > div { align-items: flex-start; }
.checkout-review-summary strong { max-width: 58%; text-align: right; line-height: 1.35; }
.checkout-review-summary .checkout-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; }
.prototype-disclaimer { margin: 11px 0 0; color: #8793a2; font-size: .54rem; line-height: 1.45; text-align: center; }
.commerce-success .success-kicker { margin-bottom: 7px; color: var(--blue); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.delivery-status, .order-tracking { width: 100%; margin: 4px 0 11px; padding: 14px; border: 1px solid #c9e1f0; border-radius: 17px; background: linear-gradient(145deg, #fff, #edf8ff); text-align: left; }
.delivery-status > strong, .delivery-status > span { display: block; }
.delivery-status > strong { font-size: .82rem; }
.delivery-status > span { margin-top: 3px; color: var(--muted); font-size: .63rem; }
.delivery-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 14px; }
.delivery-timeline::before { content: ""; position: absolute; top: 11px; right: 10%; left: 10%; height: 2px; background: #cbd8e2; }
.delivery-timeline i { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; color: #738398; font-size: .54rem; font-style: normal; font-weight: 900; }
.delivery-timeline i::first-line { display: grid; place-items: center; }
.delivery-timeline i { line-height: 22px; }
.delivery-timeline i:not(.active) { text-shadow: 0 0 0 #fff; }
.delivery-timeline i::before { content: ""; position: absolute; top: 0; width: 22px; height: 22px; border: 2px solid #ccd8e2; border-radius: 50%; background: #fff; z-index: -1; }
.delivery-timeline i.active { color: var(--green); }
.delivery-timeline i.active::before { border-color: var(--green); background: #e9f8f1; }
.delivery-timeline small { margin-top: 2px; color: #6e7c8d; font-size: .48rem; line-height: 1.1; }
.order-tracking { margin-top: 0; border-color: #bfe5d3; background: linear-gradient(145deg, #fff, #effaf5); }
.order-tracking-head { display: flex; justify-content: space-between; gap: 10px; }
.order-tracking-head span { min-width: 0; }
.order-tracking-head small, .order-tracking-head strong, .order-tracking-head em { display: block; }
.order-tracking-head small { color: #168b56; font-size: .52rem; font-weight: 900; }
.order-tracking-head strong { overflow: hidden; margin: 4px 0; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.order-tracking-head em { color: var(--muted); font-size: .55rem; font-style: normal; line-height: 1.35; }
.order-tracking-head > b { align-self: start; padding: 4px 6px; border-radius: 999px; color: #168b56; background: #dff6eb; font-size: .47rem; }
.order-tracking > p { margin: 10px 0 0; color: var(--muted); font-size: .55rem; line-height: 1.4; }
.bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); }
.bottom-nav button { display: grid; place-items: center; align-content: center; gap: 4px; border: 0; color: #8491a3; background: transparent; cursor: pointer; }
.bottom-nav button > span { font-size: 1.16rem; line-height: 1; }
.bottom-nav small { font-size: .62rem; }
.bottom-nav button.active { color: var(--blue); font-weight: 800; }
.mobile-progress { display: none; width: min(100%, 430px); margin-top: 13px; color: #8ea0b7; font-size: .76rem; }
.mobile-progress > div { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.12); }
.mobile-progress i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); transition: width .3s ease; }

.system-panel { align-self: center; }
.system-panel h2 { max-width: 270px; }
.system-card { margin: 25px 0 14px; padding: 8px 17px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(255,255,255,.055); backdrop-filter: blur(14px); }
.system-row { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.075); font-size: .83rem; }
.system-row:last-child { border-bottom: 0; }
.system-row span { color: #8294ad; }
.system-row strong { color: #eef6ff; text-align: right; }
.shield-system-row strong { color: #76edb7; }
.shield-mini { display: inline-grid; place-items: center; width: 18px; height: 20px; margin-right: 4px; border: 1px solid #57e6a7; border-radius: 8px 8px 10px 10px; color: #76edb7; font-size: .62rem; font-style: normal; }
.shield-panel-button { width: 100%; display: grid; grid-template-columns: 42px 1fr 14px; gap: 10px; align-items: center; margin: 0 0 14px; padding: 12px; border: 1px solid rgba(87,230,167,.28); border-radius: 16px; color: #fff; background: linear-gradient(135deg, rgba(7,63,77,.7), rgba(7,85,63,.45)); text-align: left; cursor: pointer; }
.shield-panel-icon { display: grid; place-items: center; }
.shield-panel-icon svg { width: 28px; height: 34px; fill: rgba(55,207,139,.1); stroke: #57e6a7; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shield-panel-button small, .shield-panel-button strong { display: block; }
.shield-panel-button small { color: #8fb6d1; font-size: .48rem; font-weight: 900; letter-spacing: .05em; }
.shield-panel-button strong { margin-top: 4px; color: #76edb7; font-size: .72rem; }
.shield-panel-button > b { color: #76edb7; font-size: 1.25rem; }
.insight-card { padding: 18px; border-radius: 18px; color: var(--navy-900); background: linear-gradient(145deg, #fff, #dff1ff); }
.insight-card > span { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .05em; }
.insight-card strong { display: block; margin: 8px 0 16px; font-size: 1rem; line-height: 1.42; }
.insight-card button { padding: 0; border: 0; color: var(--blue); background: transparent; font-weight: 800; font-size: .78rem; cursor: pointer; }
.system-note { margin-top: 18px; font-size: .82rem; }

.sheet-dialog {
  width: min(92vw, 540px);
  max-height: min(88vh, 780px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 40px 100px rgba(0,0,0,.46);
}
.sheet-dialog::backdrop { background: rgba(1,8,23,.74); backdrop-filter: blur(9px); }
.sheet-dialog[open] { animation: dialogIn .25s ease both; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.sheet-head { display: flex; justify-content: space-between; gap: 18px; padding: 25px 25px 18px; }
.sheet-head .eyebrow { margin-bottom: 6px; color: var(--blue); }
.sheet-head h2 { margin: 0; font-size: 1.65rem; letter-spacing: -.035em; }
.dialog-close { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #fff; font-size: 1.4rem; cursor: pointer; }
.dock-hero { display: flex; align-items: center; gap: 20px; margin: 0 25px 16px; padding: 22px; border-radius: 20px; color: #fff; background: var(--navy-900); }
.dock-outline { width: 64px; height: 92px; display: grid; align-items: end; padding: 8px; border: 4px solid var(--cyan); border-radius: 16px; }
.dock-outline i { height: 5px; border-radius: 5px; background: var(--cyan); }
.dock-hero strong, .dock-hero span { display: block; }
.dock-hero strong { margin-bottom: 7px; color: #75e0aa; font-size: .78rem; }
.dock-hero span { color: #b2c4da; font-size: .82rem; }
.status-stack { display: grid; gap: 10px; padding: 0 25px; }
.status-stack > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.status-stack span, .status-stack strong { font-size: .82rem; }
.status-stack progress { grid-column: 1 / -1; width: 100%; height: 7px; accent-color: var(--blue); }
.green { color: var(--green); }
.sheet-note { margin: 18px 25px 25px; padding: 14px; border-radius: 14px; color: #4d6884; background: #eaf5fd; font-size: .8rem; line-height: 1.5; }
.shield-dialog { background: linear-gradient(155deg, #f7fbff, #eef8f6); }
.shield-dialog-hero { display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: center; margin: 0 25px 16px; padding: 20px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #061b3a, #07553f); }
.shield-dialog-mark { display: grid; place-items: center; }
.shield-dialog-mark svg { width: 58px; height: 69px; fill: rgba(55,207,139,.1); stroke: #57e6a7; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(87,230,167,.35)); }
.shield-dialog-hero small, .shield-dialog-hero strong, .shield-dialog-hero span { display: block; }
.shield-dialog-hero small { color: #9ebbd0; font-size: .56rem; font-weight: 900; letter-spacing: .08em; }
.shield-dialog-hero strong { margin: 6px 0; color: #76edb7; font-size: 1.05rem; letter-spacing: .05em; }
.shield-dialog-hero span { color: #c2d4df; font-size: .73rem; line-height: 1.4; }
.shield-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 25px 13px; }
.shield-status-grid article { display: grid; justify-items: center; gap: 8px; padding: 13px 8px; border: 1px solid #bfe5d3; border-radius: 14px; background: #fff; text-align: center; }
.shield-status-grid i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #20ad6b; font-style: normal; }
.shield-status-grid small, .shield-status-grid strong { display: block; }
.shield-status-grid small { color: #168b56; font-size: .52rem; }
.shield-status-grid strong { margin-top: 3px; font-size: .67rem; line-height: 1.25; }
.shield-lock-state { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; margin: 0 25px 14px; padding: 12px 14px; border: 1px solid #efc7c7; border-radius: 14px; background: #fff4f4; }
.shield-lock-state > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #c94a4a; font-style: normal; font-weight: 900; }
.shield-lock-state small, .shield-lock-state strong { display: block; }
.shield-lock-state small { color: #a34a4a; font-size: .5rem; font-weight: 900; }
.shield-lock-state strong { margin-top: 3px; color: #712e2e; font-size: .75rem; }
.shield-explainer, .shield-concept-note { margin: 0 25px 14px; color: #4d6884; font-size: .78rem; line-height: 1.5; }
.shield-concept-note { margin-bottom: 25px; padding: 12px 14px; border-radius: 13px; background: #eaf5fd; }
.shield-concept-note strong { color: var(--navy-900); }
.privacy-layers { display: grid; gap: 10px; padding: 0 25px; }
.privacy-layers article { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.privacy-layers b { color: var(--blue); font-size: .78rem; }
.privacy-layers strong, .privacy-layers span { display: block; }
.privacy-layers strong { font-size: .9rem; }
.privacy-layers span { margin-top: 4px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.privacy-layers i { padding: 5px 7px; border-radius: 999px; color: #167e53; background: #e7f7ef; font-size: .58rem; font-weight: 800; font-style: normal; }
.privacy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 25px 25px; }
.privacy-actions button { min-height: 45px; border: 1px solid var(--line); border-radius: 13px; color: var(--navy-900); background: #fff; font-weight: 700; cursor: pointer; }
.privacy-actions button:hover, .privacy-actions button:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,137,221,.12); }
.privacy-local-note { margin: -9px 25px 25px; padding: 13px 14px; border-radius: 13px; color: #4d6884; background: #eaf5fd; font-size: .75rem; line-height: 1.45; }
.privacy-local-note strong { color: var(--navy-900); }
.privacy-consents { margin: 0 25px 18px; padding: 18px; border: 1px solid #b9ddf5; border-radius: 18px; background: #f8fcff; }
.privacy-consents[hidden] { display: none; }
.privacy-consents-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.privacy-consents-head .eyebrow { color: var(--blue); }
.privacy-consents h3 { margin: 3px 0 0; font-size: 1.18rem; letter-spacing: -.02em; }
.privacy-consents > p { margin: 11px 0 15px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.privacy-panel-close { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #fff; font-size: 1.1rem; cursor: pointer; }
.privacy-consents form { display: grid; gap: 9px; }
.consent-option { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; min-height: 58px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; }
.consent-option.required { background: #edf6fb; cursor: default; }
.consent-option strong, .consent-option small { display: block; }
.consent-option strong { font-size: .82rem; }
.consent-option small { margin-top: 4px; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.consent-option input { width: 21px; height: 21px; accent-color: var(--blue); cursor: pointer; }
.consent-option input:disabled { cursor: default; }
.privacy-save { min-height: 45px; margin-top: 3px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #078ee7, #0875c4); font-weight: 800; cursor: pointer; }
.privacy-storage-note { margin: 10px 2px 0 !important; font-size: .68rem !important; }
.privacy-feedback { margin: 0 25px 25px; padding: 13px 14px; border: 1px solid #b4e4ce; border-radius: 13px; color: #126d4a; background: #eaf9f2; font-size: .76rem; font-weight: 700; line-height: 1.45; }

@media (max-width: 1120px) {
  .experience-shell { grid-template-columns: minmax(230px, 280px) minmax(420px, 1fr); }
  .system-panel { display: none; }
}
@media (max-width: 780px) {
  body { background: var(--navy-950); }
  .experience-shell { display: block; min-height: 100svh; padding: 0; overflow: visible; }
  .experience-shell::before, .experience-rail, .stage-meta { display: none; }
  .device-stage { display: block; }
  .phone-frame { width: 100%; min-height: 100svh; aspect-ratio: auto; padding: 0; border-radius: 0; box-shadow: none; background: #000; }
  .phone-frame::after, .phone-glow { display: none; }
  .phone-screen { min-height: 100svh; grid-template-rows: 30px 64px 1fr 72px; border-radius: 0; }
  .app-screen { padding-bottom: 28px; }
  .mobile-progress { display: none; }
}
@media (max-width: 390px) {
  .brand-home img { width: 145px; }
  .cart-button { min-width: 66px; padding-inline: 6px; }
  .cart-button .cart-header-copy small { display: none; }
  .dock-button { min-width: 64px; padding-inline: 6px; }
  .dock-button .dock-copy small { display: none; }
  .product-card .product-top { grid-template-columns: 1fr 122px; }
  .screen-title { font-size: 1.4rem; }
  .choice-card { grid-template-columns: 62px 1fr auto; }
  .choice-card img { width: 62px; }
  .privacy-layers article { grid-template-columns: 30px 1fr; }
  .privacy-layers i { grid-column: 2; justify-self: start; }
  .privacy-actions { grid-template-columns: 1fr; }
  .privacy-consents { margin-inline: 16px; padding: 15px; }
  .privacy-feedback, .privacy-local-note { margin-inline: 16px; }
  .shop-hero { grid-template-columns: 1fr 112px; }
  .shop-hero img { width: 112px; height: 136px; }
  .cart-line { grid-template-columns: 54px 1fr auto; gap: 8px; padding: 9px; }
  .cart-line > img { width: 54px; height: 52px; }
  .shipping-options > button { grid-template-columns: 40px 1fr 22px; }
  .shipping-options em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}