:root {
  --ink: #153563;
  --ink-strong: #11315c;
  --muted: #7188aa;
  --muted-deep: #597397;
  --line: rgba(119, 156, 210, .22);
  --line-strong: rgba(108, 155, 222, .42);
  --glass: rgba(248, 251, 255, .52);
  --glass-strong: rgba(251, 253, 255, .7);
  --glass-light: rgba(255, 255, 255, .35);
  --navy: #143966;
  --cyan: #5ccacf;
  --mint: #4fd1ad;
  --mint-deep: #168b75;
  --blue: #5a9bea;
  --lilac: #8596df;
  --amber: #e6a63e;
  --shadow: 0 24px 55px rgba(85, 114, 165, .12), 0 3px 10px rgba(116, 143, 189, .06);
  --inner: inset 0 1px rgba(255, 255, 255, .88), inset 0 -1px rgba(131, 162, 210, .08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #edf4fc; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 54% 34%, #fff 0, rgba(255, 255, 255, .68) 27%, transparent 55%), linear-gradient(115deg, #eaf2fe 0%, #f3f7fc 38%, #f6f1ff 100%); }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.atmosphere { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.glow { position: absolute; border-radius: 999px; filter: blur(4px); opacity: .82; }
.glow-one { width: 630px; height: 630px; top: -170px; left: -235px; background: radial-gradient(circle, rgba(132, 170, 248, .5), rgba(193, 215, 255, .12) 55%, transparent 72%); }
.glow-two { width: 760px; height: 640px; top: 85px; right: -230px; background: radial-gradient(ellipse, rgba(189, 160, 248, .27), rgba(224, 215, 255, .08) 60%, transparent 74%); }
.glow-three { width: 620px; height: 530px; bottom: -220px; left: 31%; background: radial-gradient(ellipse, rgba(111, 211, 211, .21), transparent 68%); }

.app-shell { display: flex; gap: clamp(42px, 6.1vw, 105px); width: min(1540px, calc(100% - 56px)); margin: 28px auto 50px; }
.glass-panel, .glass-card { border: 1px solid rgba(255,255,255,.8); box-shadow: var(--inner), var(--shadow); }
.glass-panel { background: linear-gradient(140deg, rgba(249, 252, 255, .67), rgba(233, 241, 255, .4)); backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%); }
.glass-card { background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(242, 248, 255, .46)); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }

.sidebar { position: sticky; top: 28px; flex: 0 0 232px; height: calc(100vh - 56px); min-height: 650px; max-height: 890px; padding: 24px 16px 17px; border-radius: 30px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 13px; padding: 0 12px 25px; border: 0; background: transparent; text-align: left; }
.brand-mark { width: 40px; height: 40px; position: relative; display: grid; place-items: center; border-radius: 12px; color: #f4f9ff; background: linear-gradient(145deg, #234976, #0b2754); box-shadow: 0 9px 18px rgba(25, 61, 109, .23); }
.brand-mark svg { width: 20px; height: 20px; stroke-width: 1.6; }
.brand-mark i { position: absolute; top: -3px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #5ed4ae; border: 1.5px solid #e9f4ff; }
.brand strong { display: block; font-size: 14px; line-height: 1.1; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 5px; color: #7890b3; font-size: 9px; font-weight: 800; letter-spacing: .18em; line-height: 1.48; }
.nav-heading, .eyebrow { margin: 0; color: #8297b4; font-size: 9px; font-weight: 800; letter-spacing: .18em; line-height: 1.3; }
.nav-heading { margin: 0 12px 12px; }
.main-nav { display: grid; gap: 4px; }
.nav-item { min-height: 45px; display: flex; gap: 13px; align-items: center; position: relative; width: 100%; padding: 0 13px; border: 0; border-radius: 15px 0 0 15px; background: transparent; color: #6880a4; font-size: 13px; text-align: left; transition: .2s ease; }
.nav-item svg { width: 17px; height: 17px; color: #8ca4c4; }
.nav-item:hover { background: rgba(255, 255, 255, .3); color: var(--ink); }
.nav-item.active { background: rgba(255,255,255,.82); color: var(--ink-strong); box-shadow: inset 0 1px rgba(255,255,255,.95), 0 8px 18px rgba(87, 126, 181, .08); }
.nav-item.active svg { color: #4e91e4; }
.nav-count { margin-left: auto; color: #5e8fc5; font-size: 10px; font-weight: 700; }
.sidebar-footer { margin-top: auto; padding: 17px 10px 0; border-top: 1px solid rgba(122, 154, 201, .14); }
.mini-session { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.mini-session b, .mini-session small { display: block; }
.mini-session b { color: var(--ink); font-size: 10px; }
.mini-session small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.mini-session button { display: grid; place-items: center; width: 27px; height: 27px; margin-left: auto; border: 0; border-radius: 9px; background: transparent; color: #7292ba; }
.mini-session button:hover { background: rgba(255,255,255,.62); }
.mini-session svg { width: 14px; }
.status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #5bd4b0; box-shadow: 0 0 0 4px rgba(91, 212, 176, .11); }

.workspace { flex: 1; min-width: 0; padding-top: 0; }
.topbar { min-height: 133px; display: flex; justify-content: space-between; gap: 25px; align-items: flex-start; padding: 2px 0 25px; }
.page-intro { max-width: 690px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 14px 0 13px; color: #102f5d; font-size: clamp(33px, 3.1vw, 42px); font-weight: 700; letter-spacing: -.065em; line-height: .93; }
.page-intro > p:last-child, .history-title > div > p:last-child, .settings-title > p:last-child, .page-actions > div > p:last-child { margin-bottom: 0; color: #7189ab; font-size: 13px; line-height: 1.55; }
.top-actions { display: flex; gap: 10px; align-items: center; padding-top: 0; }
.sync-pill, .circle-button, .avatar-button { border: 1px solid rgba(255, 255, 255, .85); box-shadow: var(--inner), 0 5px 12px rgba(74, 111, 162, .08); background: rgba(252, 254, 255, .62); }
.sync-pill { min-height: 38px; display: inline-flex; gap: 9px; align-items: center; padding: 0 14px; border-radius: 99px; color: #617da4; font-size: 11px; white-space: nowrap; }
.sync-pill:hover { background: rgba(255,255,255,.92); }
.circle-button, .avatar-button, .small-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #6684ab; }
.circle-button:hover, .small-icon:hover { background: rgba(255,255,255,.95); }
.circle-button svg { width: 17px; }
.avatar-button { border: 0; background: #c4def3; color: #316295; font-size: 12px; font-weight: 800; }

.view { display: none; animation: view-in .36s ease both; }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-card { min-height: 139px; position: relative; overflow: hidden; padding: 22px 18px 17px; border-radius: 24px; }
.stat-card::after { content: ""; position: absolute; top: -60%; right: -11%; width: 128px; height: 168px; border-radius: 50%; background: radial-gradient(circle, rgba(218, 238, 255, .64), rgba(233, 244, 255, 0) 68%); }
.stat-card p { margin-bottom: 17px; color: #7b92b1; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.stat-card strong { display: block; color: #153865; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 29px; letter-spacing: -.08em; line-height: 1; }
.stat-card span { display: inline-flex; gap: 5px; align-items: center; margin-top: 13px; color: #7890ad; font-size: 10px; }
.stat-card span svg { width: 13px; height: 13px; }
.positive { color: #168c78 !important; }
.best-deal { border: 1px solid rgba(255,255,255,.84); border-radius: 24px; padding: 22px 18px; box-shadow: var(--inner), 0 18px 34px rgba(79, 133, 167, .12); background: linear-gradient(140deg, rgba(255,255,255,.68), rgba(207, 245, 243, .56)); }
.best-deal p { display: flex; justify-content: space-between; align-items: center; }
.best-deal p svg { width: 18px; color: #40b6bd; }
.best-deal strong { color: #127671; font-size: 25px; }
.best-deal span { margin-top: 14px; color: #348b91; }

.change-panel { margin-top: 33px; overflow: hidden; border-radius: 28px; }
.panel-heading { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 25px; border-bottom: 1px solid rgba(123,155,200,.15); }
.panel-heading.compact { min-height: auto; padding: 0; border: 0; }
.panel-heading h2, .page-actions h2, .history-title h2, .settings-title h2 { margin: 0; color: #153865; font-size: 17px; font-weight: 700; letter-spacing: -.04em; }
.panel-heading h2 .live-badge { display: inline-block; transform: translateY(-1px); margin-left: 9px; padding: 4px 7px; border: 1px solid rgba(99,164,214,.2); border-radius: 99px; color: #7a93b5; font-size: 8px; font-weight: 800; letter-spacing: .09em; vertical-align: middle; }
.panel-heading p { margin: 7px 0 0; color: #7b91af; font-size: 11px; }
.segmented { display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(130,161,205,.16); border-radius: 99px; background: rgba(226, 235, 249, .46); }
.segmented button { min-height: 28px; padding: 0 13px; border: 0; border-radius: 99px; background: transparent; color: #7b91af; font-size: 9px; white-space: nowrap; }
.segmented button:hover, .segmented button.active { background: rgba(255,255,255,.92); box-shadow: 0 3px 9px rgba(73, 107, 158, .09); color: #345d8e; font-weight: 700; }
.list-tools { min-height: 65px; display: flex; justify-content: space-between; align-items: center; padding: 0 25px; border-bottom: 1px solid rgba(123,155,200,.12); }
.list-tools > p { display: flex; gap: 8px; align-items: center; margin: 0; color: #7e94b1; font-size: 10px; }
.list-tools > p .status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(91, 212, 176, .14); }
.list-tools > div, .panel-search { display: flex; gap: 8px; }
.search-field { height: 33px; display: flex; gap: 8px; align-items: center; padding: 0 11px; border: 1px solid rgba(119,155,207,.2); border-radius: 99px; background: rgba(255,255,255,.52); color: #91a8c6; }
.search-field svg { width: 15px; height: 15px; }
.search-field input { width: 120px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.search-field input::placeholder { color: #7189ad; }
.small-icon { width: 33px; height: 33px; border: 1px solid rgba(119,155,207,.2); background: rgba(255,255,255,.52); }
.small-icon svg { width: 15px; height: 15px; }

.product-list { padding: 9px 16px 0; }
.product-row { display: grid; grid-template-columns: minmax(230px, 1.35fr) minmax(100px, .72fr) minmax(125px, .8fr) minmax(120px, .75fr) 34px; gap: 14px; align-items: center; width: 100%; min-height: 102px; padding: 12px 14px; border: 1px solid transparent; border-bottom-color: rgba(123,155,200,.11); background: transparent; text-align: left; transition: .18s ease; }
.product-row:first-child { border-color: rgba(125,181,234,.52); border-radius: 20px; background: linear-gradient(90deg, rgba(242,249,255,.85), rgba(235,248,255,.55)); }
.product-row:hover { transform: translateX(2px); border-color: rgba(125,181,234,.45); border-radius: 20px; background: rgba(252,254,255,.6); }
.row-product { display: flex; gap: 12px; align-items: center; min-width: 0; }
.product-art { flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center; position: relative; overflow: hidden; border-radius: 17px; color: #38547d; font-size: 11px; font-weight: 800; background: linear-gradient(140deg, #d9e7ff, #b9c9ec); }
.product-art::before, .product-art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.36); }
.product-art::before { width: 46px; height: 46px; right: -23px; top: -10px; }
.product-art::after { width: 51px; height: 51px; left: -26px; bottom: -22px; }
.product-art span { position: relative; z-index: 1; }
.art-kindle { background: linear-gradient(140deg, #e0e2f5, #b5bce5); }
.art-anker { background: linear-gradient(140deg, #d6f1ee, #9ecbca); }
.art-mug { background: linear-gradient(140deg, #f8e9dd, #e4c5aa); }
.row-product b { display: block; overflow: hidden; color: #244a77; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.row-product small { display: block; margin-top: 6px; overflow: hidden; color: #879bb8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.row-price { min-width: 0; }
.row-price > small { display: block; margin-bottom: 5px; color: #91a5c1; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.row-price strong { display: block; color: #173d6b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: -.06em; white-space: nowrap; }
.row-price.strike strong { color: #7185a4; text-decoration: line-through; }
.row-price .was { display: block; margin-top: 4px; color: #9baac0; font-size: 9px; }
.row-price.effective strong { color: #127976; font-size: 17px; }
.row-price.effective em { display: block; margin-top: 5px; color: #209887; font-size: 9px; font-style: normal; }
.row-status { justify-self: end; text-align: right; }
.status-badge { display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; border: 1px solid rgba(86,210,186,.4); border-radius: 99px; background: rgba(222, 250, 243, .7); color: #258977; font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-badge.voucher { border-color: rgba(138,163,242,.44); background: rgba(239,243,255,.7); color: #6584c5; }
.status-badge i, .healthy-badge i, .warning-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.row-status small { display: block; margin-top: 7px; color: #91a5c0; font-size: 8px; }
.row-chevron { display: grid; place-items: center; border: 0; background: transparent; color: #9ab0c9; }
.row-chevron svg { width: 17px; height: 17px; }
.quiet-link, .text-button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #4a7caf; font-size: 11px; font-weight: 700; }
.quiet-link { margin: 16px 25px 20px; }
.quiet-link:hover, .text-button:hover { color: #1d5f9d; }
.quiet-link svg, .text-button svg { width: 14px; height: 14px; }
.overview-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 18px; }
.health-mini, .tip-card { min-height: 136px; padding: 21px 23px; border-radius: 24px; }
.health-mini { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.health-mini > div { display: flex; gap: 13px; align-items: center; }
.icon-tile { width: 40px; height: 40px; display: inline-grid; flex: 0 0 auto; place-items: center; position: relative; border-radius: 14px; }
.icon-tile svg { width: 19px; height: 19px; }
.icon-tile.mint, .event-icon.mint { color: #2fa887; background: #ddf7ef; }
.icon-tile.blue, .event-icon.blue { color: #5295e1; background: #e5f2ff; }
.icon-tile.lilac, .event-icon.lilac { color: #737fda; background: #ebedff; }
.icon-tile.amber, .event-icon.amber { color: #d48a27; background: #fff0d3; }
.health-mini h3, .tip-card h3 { margin: 5px 0; color: #1c416e; font-size: 14px; letter-spacing: -.035em; }
.health-mini small { color: #7f96b2; font-size: 10px; }
.secondary-button, .primary-button { min-height: 40px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: .2s ease; }
.secondary-button { border: 1px solid rgba(106,155,218,.45); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 3px 8px rgba(68,115,172,.1); background: rgba(252,254,255,.72); color: #356398; }
.secondary-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.95); }
.primary-button { border: 1px solid rgba(14,61,110,.45); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 6px 13px rgba(26,67,119,.16); background: linear-gradient(145deg, #244f83, #103560); color: white; }
.primary-button:hover { transform: translateY(-1px); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 10px 18px rgba(26,67,119,.22); }
.secondary-button svg, .primary-button svg { width: 16px; height: 16px; }
.tip-card { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(224,249,247,.5)); border: 1px solid rgba(255,255,255,.78); box-shadow: var(--inner), var(--shadow); }
.tip-card h3 { max-width: 300px; line-height: 1.25; }
.tip-card > div > p:last-child { margin: 0; color: #7790ad; font-size: 10px; line-height: 1.5; }

.page-actions { min-height: 58px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filter-row, .alert-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-chip { height: 33px; padding: 0 12px; border: 1px solid rgba(124,159,209,.22); border-radius: 99px; background: rgba(255,255,255,.38); color: #7188a8; font-size: 10px; }
.filter-chip b, .alert-filters b { margin-left: 4px; color: #4b75a7; }
.filter-chip.active { border-color: rgba(95,158,222,.46); background: rgba(250,254,255,.88); color: #285487; box-shadow: 0 3px 8px rgba(67,107,157,.08); font-weight: 700; }
.products-panel { overflow: hidden; border-radius: 28px; }
.products-table { overflow-x: auto; padding: 0 20px 15px; }
.table-header, .products-table .product-row { min-width: 790px; display: grid; grid-template-columns: 2fr .72fr .9fr .72fr .83fr 30px; gap: 14px; align-items: center; }
.table-header { height: 45px; padding: 0 14px; color: #91a6c1; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.products-table .product-row { padding: 11px 14px; }
.products-table .row-status { justify-self: start; text-align: left; }
.products-table .row-status small { text-align: left; }
.products-table .row-price.effective strong { font-size: 14px; }

.back-link { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 15px; padding: 0; border: 0; background: transparent; color: #5d83b1; font-size: 11px; font-weight: 700; }
.back-link svg { width: 15px; height: 15px; transform: rotate(180deg); }
.product-hero { min-height: 118px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 27px; border-radius: 27px; }
.detail-product { display: flex; align-items: center; gap: 17px; min-width: 0; }
.large-art { width: 70px; height: 70px; border-radius: 23px; font-size: 13px; }
.detail-kicker { display: flex; gap: 10px; align-items: center; color: #6684a9; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.detail-kicker > span { padding: 5px 8px; border: 1px solid rgba(110,151,202,.25); border-radius: 6px; background: rgba(246,250,255,.52); }
.detail-kicker i { display: inline-flex; gap: 4px; align-items: center; color: #4e809c; font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: 0; }
.detail-kicker i svg { width: 13px; height: 13px; color: #45b49c; }
.detail-product h2 { margin: 8px 0 8px; overflow: hidden; color: #173b68; font-size: 20px; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.detail-product p { margin: 0; color: #7790ad; font-size: 10px; }
.detail-product p span { padding: 0 5px; color: #abb8ca; }
.detail-actions { display: flex; gap: 9px; }
.detail-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; margin-top: 18px; }
.effective-card, .breakdown-card { border-radius: 27px; }
.effective-card { min-height: 340px; padding: 29px 33px; position: relative; overflow: hidden; }
.effective-card::after { content: ""; position: absolute; top: -45px; right: -26px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(182,231,247,.34), rgba(214,242,250,.13) 52%, transparent 70%); }
.card-label { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.card-label > span { display: inline-flex; align-items: center; gap: 7px; color: #718daf; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.card-label > span svg { width: 14px; color: #4b92dc; }
.card-label em { padding: 10px 12px; border: 1px solid rgba(84,206,178,.28); border-radius: 15px; background: rgba(224,249,243,.78); color: #4b9f8a; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .13em; text-align: right; }
.card-label em b { display: block; margin-top: 5px; color: #158678; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: -.05em; }
.effective-card > p { margin: 12px 0 39px; color: #8197b2; font-size: 11px; }
.effective-card > strong { position: relative; z-index: 1; display: block; color: #123562; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: clamp(36px, 4.3vw, 63px); font-weight: 700; letter-spacing: -.11em; line-height: .95; white-space: nowrap; }
.price-change { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; padding: 7px 11px; border-radius: 99px; background: rgba(211,246,233,.78); color: #178c79; font-size: 10px; font-weight: 700; }
.price-change svg { width: 13px; height: 13px; }
.checked-line { display: flex; align-items: center; gap: 8px; margin-top: 33px; padding-top: 18px; border-top: 1px solid rgba(108,153,207,.2); color: #7992b1; font-size: 10px; }
.checked-line svg { width: 15px; color: #6c9bd1; }
.breakdown-card { padding: 29px 27px 15px; }
.breakdown-card .panel-heading h2 { margin-top: 7px; max-width: 290px; color: #8093b0; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.adjustment-chip { padding: 6px 9px; border-radius: 8px; background: #edf6ff; color: #5488c2; font-size: 9px; font-weight: 700; white-space: nowrap; }
.price-timeline { margin-top: 23px; }
.price-timeline > div { min-height: 54px; display: grid; grid-template-columns: 17px minmax(95px, 1fr) auto auto; gap: 10px; align-items: center; position: relative; }
.price-timeline > div:not(:last-child)::before { content: ""; position: absolute; top: 32px; left: 5px; height: 34px; border-left: 1px solid #c5dcf3; }
.price-timeline i { width: 7px; height: 7px; justify-self: center; border: 2px solid #edf8ff; border-radius: 50%; background: #a9d2f2; box-shadow: 0 0 0 1px #b9d7ef; }
.price-timeline span b { display: block; color: #496a92; font-size: 11px; }
.price-timeline span small { display: block; margin-top: 3px; color: #96a9c1; font-size: 8px; }
.price-timeline em { color: #178d79; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; }
.price-timeline em.muted { color: #a2b1c3; }
.price-timeline strong { color: #244b7a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: -.05em; white-space: nowrap; }
.price-timeline .final-row { min-height: 60px; margin-top: 3px; padding: 5px 10px 5px 0; border: 1px solid rgba(111,169,235,.35); border-radius: 12px; background: linear-gradient(90deg, rgba(225,244,255,.82), rgba(237,250,255,.62)); }
.price-timeline .final-row::before { display: none; }
.price-timeline .final-row i { width: 9px; height: 9px; background: #4f9ae7; box-shadow: 0 0 0 3px rgba(79,154,231,.15); }
.price-timeline .final-row span b, .price-timeline .final-row strong { color: #173d69; font-weight: 800; }
.detail-lower { display: grid; grid-template-columns: 1.62fr .68fr; gap: 18px; margin-top: 18px; }
.history-card { min-height: 318px; padding: 24px 28px 17px; border-radius: 27px; }
.history-card .panel-heading h2 { margin-top: 7px; color: #7990ad; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.chart-legend { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; color: #6e86a5; font-size: 9px; }
.chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.line { width: 15px; height: 2px; display: inline-block; background: currentColor; }
.line.shop { color: #8fa5c6; }
.line.effective { color: #35aeb3; }
.line.target { color: #9ba9d6; border-top: 1px dashed currentColor; background: transparent; }
.history-card .chart-legend { margin-top: 20px; }
.mini-chart, .full-chart { position: relative; margin-top: 15px; }
.mini-chart { height: 168px; }
.mini-chart svg, .full-chart svg { width: 100%; height: 100%; overflow: visible; }
.grid { fill: none; stroke: rgba(143,167,205,.2); stroke-width: 1; stroke-dasharray: 2 6; }
.target-line { fill: none; stroke: #a9b4dc; stroke-width: 1.5; stroke-dasharray: 5 5; }
.shop-line { fill: none; stroke: #a0afc6; stroke-width: 2; }
.effective-area { fill: url(#chartFill); }
.full-chart .effective-area { fill: url(#largeFill); }
.effective-line { fill: none; stroke: #31aeb3; stroke-width: 2.6; }
.mini-chart circle, .full-chart circle { fill: white; stroke: #31aeb3; stroke-width: 3; }
.chart-tooltip { position: absolute; right: 6%; bottom: 5px; min-width: 111px; padding: 9px 11px; border: 1px solid rgba(119,158,207,.3); border-radius: 11px; background: rgba(253,255,255,.88); box-shadow: 0 8px 18px rgba(50,91,143,.12), inset 0 1px white; pointer-events: none; }
.chart-tooltip small, .chart-tooltip span { display: block; color: #8196b2; font-size: 8px; }
.chart-tooltip b { display: block; margin: 5px 0 3px; color: #187f7c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.goal-card { min-height: 318px; display: flex; flex-direction: column; align-items: flex-start; padding: 25px; border-radius: 27px; background: linear-gradient(150deg, rgba(255,255,255,.76), rgba(231,242,255,.48)); }
.goal-card .eyebrow { margin-top: 20px; }
.goal-card h3 { margin: 9px 0 9px; color: #204878; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; letter-spacing: -.08em; }
.goal-card > p:not(.eyebrow) { margin-bottom: 17px; color: #7b91af; font-size: 10px; line-height: 1.5; }
.goal-progress { width: 100%; height: 6px; overflow: hidden; margin-bottom: 19px; border-radius: 99px; background: #d9e8f3; }
.goal-progress i { display: block; width: 94%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #61cab9, #4d9fe0); }
.goal-card .secondary-button { margin-top: auto; width: 100%; }

.history-title, .settings-title { margin: 3px 0 23px; }
.history-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.history-title h2, .settings-title h2 { margin: 10px 0 9px; font-size: 27px; }
.full-chart-card { padding: 23px 27px 18px; border-radius: 27px; }
.full-chart-card .panel-heading { min-height: 40px; padding: 0 0 20px; }
.full-chart { height: 335px; margin-top: 18px; }
.chart-tooltip.large { right: 4.5%; bottom: 11%; }
.chart-axis { display: flex; justify-content: space-between; padding: 5px 0 0; color: #91a5c0; font-size: 9px; }
.history-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.history-summary article { min-height: 126px; padding: 20px 21px; border-radius: 22px; }
.history-summary p { margin-bottom: 15px; color: #8197b3; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.history-summary strong { display: block; color: #1e497a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 19px; letter-spacing: -.08em; }
.history-summary span { display: block; margin-top: 9px; color: #7e96b4; font-size: 9px; }
.timeline-panel { margin-top: 18px; overflow: hidden; border-radius: 27px; }
.event-list { padding: 5px 26px 10px; }
.event-list > div { min-height: 74px; display: flex; gap: 13px; align-items: center; border-bottom: 1px solid rgba(123,155,200,.12); }
.event-list > div:last-child { border: 0; }
.event-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; }
.event-icon svg { width: 16px; height: 16px; }
.event-list p { flex: 1; margin: 0; }
.event-list b { display: block; color: #375b86; font-size: 11px; }
.event-list small { display: block; margin-top: 5px; color: #8ba0bb; font-size: 9px; }
.event-list strong { color: #4c6e96; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

.alerts-layout { display: grid; grid-template-columns: 1.55fr .64fr; gap: 18px; }
.alerts-panel { overflow: hidden; border-radius: 27px; }
.alert-filters { padding: 18px 23px; border-bottom: 1px solid rgba(123,155,200,.15); }
.alert-filters button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #778eac; font-size: 10px; }
.alert-filters button.active { background: rgba(231,241,254,.88); color: #36699e; font-weight: 700; }
.alert-row { width: 100%; min-height: 89px; display: flex; gap: 13px; align-items: center; padding: 14px 23px; border: 0; border-bottom: 1px solid rgba(123,155,200,.13); background: transparent; text-align: left; transition: .18s ease; }
.alert-row:hover { background: rgba(255,255,255,.42); }
.alert-row.unread { background: linear-gradient(90deg, rgba(238,249,255,.5), transparent); }
.alert-row.unread::before { content: ""; width: 6px; height: 6px; margin-left: -12px; border-radius: 50%; background: #5ccbd0; }
.alert-row > span:nth-of-type(2) { flex: 1; }
.alert-row b { display: block; color: #345982; font-size: 11px; }
.alert-row small, .alert-row time { display: block; color: #8297b2; font-size: 9px; line-height: 1.45; }
.alert-row small { margin-top: 5px; max-width: 420px; }
.alert-row time { margin-top: 4px; color: #9cacc2; }
.alert-row > strong { color: #258979; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.alert-summary { min-height: 290px; padding: 26px; border-radius: 27px; }
.alert-summary .eyebrow { margin-top: 22px; }
.alert-summary h3 { margin: 9px 0; color: #244b7a; font-size: 17px; letter-spacing: -.04em; line-height: 1.2; }
.alert-summary > p:not(.eyebrow) { color: #7990ae; font-size: 11px; line-height: 1.55; }
.alert-summary .secondary-button { margin-top: 10px; }

.health-hero { min-height: 128px; display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: 22px 25px; border-radius: 27px; }
.health-hero-copy { display: flex; align-items: center; gap: 15px; min-width: 0; }
.health-hero-copy .icon-tile { width: 48px; height: 48px; }
.health-hero-copy > span:first-child { position: relative; }
.pulse-dot { position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border: 1.5px solid #eff8ff; border-radius: 50%; background: #5bd2aa; }
.health-hero h2 { margin: 0 0 7px; color: #183e6d; font-size: 17px; letter-spacing: -.04em; line-height: 1.2; }
.health-hero p { max-width: 530px; margin: 0; color: #7890ad; font-size: 11px; line-height: 1.5; }
.health-badge { align-self: flex-start; margin: 5px 0 0 9px; padding: 6px 10px; border: 1px solid rgba(95,208,179,.32); border-radius: 99px; background: rgba(239,255,248,.58); color: #299477; font-size: 9px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.health-badge i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #56ceaa; }
.health-actions { display: grid; gap: 10px; flex: 0 0 auto; align-items: center; }
.health-actions > span { display: inline-flex; gap: 7px; justify-content: center; align-items: center; color: #7890ad; font-size: 10px; }
.health-actions > span svg { width: 14px; }
.health-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 78px; }
.health-card { min-height: 276px; display: flex; flex-direction: column; padding: 24px; border-radius: 27px; }
.health-card-top { display: flex; justify-content: space-between; align-items: start; }
.healthy-badge, .warning-badge { display: inline-flex; gap: 5px; align-items: center; padding: 6px 9px; border-radius: 99px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.healthy-badge { background: #ddf8ed; color: #299678; }
.warning-badge { background: #fff0cd; color: #ae762d; }
.health-card h3 { margin: 19px 0 7px; color: #1c416e; font-size: 16px; letter-spacing: -.04em; }
.health-card > p { min-height: 32px; margin-bottom: 19px; color: #7890ad; font-size: 11px; line-height: 1.45; }
.health-card dl { margin: 0 0 12px; }
.health-card dl div { display: flex; justify-content: space-between; gap: 10px; min-height: 30px; padding: 9px 0; border-top: 1px solid rgba(123,155,200,.14); }
.health-card dt { color: #8ca0ba; font-size: 9px; }
.health-card dd { margin: 0; color: #42658e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.health-card .text-button { margin-top: auto; }
.warning-callout { display: flex; gap: 9px; margin: 0 0 15px; padding: 12px; border: 1px solid rgba(228,170,73,.35); border-radius: 13px; background: rgba(255,250,235,.65); color: #947343; font-size: 10px; line-height: 1.45; }
.warning-callout svg { flex: 0 0 auto; width: 15px; color: #d39432; }
.warning-card > p { min-height: auto; margin-bottom: 14px; }

.settings-layout { display: grid; grid-template-columns: 1.45fr .68fr; gap: 18px; }
.settings-layout > div { display: grid; gap: 18px; }
.settings-card { overflow: hidden; border-radius: 27px; }
.settings-heading { display: flex; gap: 13px; align-items: center; padding: 21px 23px; border-bottom: 1px solid rgba(123,155,200,.14); }
.settings-heading h3 { margin: 0; color: #244b7a; font-size: 14px; letter-spacing: -.04em; }
.settings-heading p { margin: 5px 0 0; color: #8297b3; font-size: 10px; }
.toggle-row { display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 65px; padding: 10px 23px; border-bottom: 1px solid rgba(123,155,200,.12); cursor: pointer; }
.toggle-row:last-child { border: 0; }
.toggle-row b, .toggle-row small { display: block; }
.toggle-row b { color: #3a5d86; font-size: 11px; }
.toggle-row small { margin-top: 4px; color: #8da0b9; font-size: 9px; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { width: 35px; height: 20px; position: relative; flex: 0 0 auto; border-radius: 99px; background: #b9c8dc; transition: .2s ease; }
.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(61,88,126,.22); transition: .2s ease; }
.toggle-row input:checked + i { background: #59c9b0; }
.toggle-row input:checked + i::after { transform: translateX(15px); }
.frequency { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 23px; color: #627e9f; font-size: 11px; }
.session-setting, .danger-card { padding: 25px; border-radius: 27px; }
.session-setting .eyebrow { margin-top: 22px; }
.session-setting h3, .danger-card h3 { margin: 9px 0; color: #234a78; font-size: 16px; letter-spacing: -.04em; }
.session-setting > p:not(.eyebrow), .danger-card > p:not(.eyebrow) { color: #7d94b1; font-size: 10px; line-height: 1.5; }
.session-setting .secondary-button { width: 100%; margin-top: 8px; }
.danger-card { margin-top: 18px; border: 1px solid rgba(255,255,255,.72); box-shadow: inset 0 1px rgba(255,255,255,.7), 0 13px 28px rgba(90,113,160,.08); background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(248,235,255,.48)); }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; background: rgba(46, 71, 112, .35); backdrop-filter: blur(11px) saturate(78%); -webkit-backdrop-filter: blur(11px) saturate(78%); }
.session-modal { position: fixed; z-index: 11; top: 50%; left: 50%; width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; transform: translate(-50%, -50%); border-radius: 29px; background: linear-gradient(135deg, rgba(247,252,255,.95), rgba(236,246,255,.84)); box-shadow: inset 0 1px rgba(255,255,255,.94), 0 26px 75px rgba(21,51,93,.28); }
.session-modal[hidden], .modal-backdrop[hidden], .toast[hidden] { display: none; }
.session-modal header { display: flex; gap: 14px; align-items: flex-start; padding: 25px 28px; border-bottom: 1px solid rgba(120,159,208,.2); }
.session-modal header > div { min-width: 0; flex: 1; }
.session-modal header .eyebrow { color: #5d8dc0; }
.session-modal h2 { margin: 7px 0 9px; color: #163963; font-size: 22px; letter-spacing: -.05em; }
.session-modal header p:last-child { max-width: 415px; margin: 0; color: #6e87a7; font-size: 11px; line-height: 1.5; }
.session-modal .close-modal { flex: 0 0 auto; width: 32px; height: 32px; border: 0; box-shadow: none; }
.modal-body { padding: 25px 28px 22px; }
.instruction-callout { display: flex; gap: 12px; padding: 15px; border: 1px solid rgba(102,165,225,.22); border-radius: 17px; background: rgba(231,245,255,.54); }
.instruction-callout svg { flex: 0 0 auto; width: 18px; color: #5295df; }
.instruction-callout p { margin: 0; color: #54769f; font-size: 11px; line-height: 1.55; }
.field-title { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 9px; }
.field-title label { color: #335577; font-size: 11px; font-weight: 700; }
.field-title .text-button { font-size: 10px; }
textarea { width: 100%; height: 142px; resize: vertical; padding: 16px; border: 1px solid rgba(37,75,122,.45); border-radius: 18px; outline: none; background: linear-gradient(145deg, #213e65, #1a3559); box-shadow: inset 0 2px 4px rgba(0,0,0,.12); color: #d8eaff; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
textarea::placeholder { color: #d2e5ff; }
textarea:focus { border-color: #65a5e9; box-shadow: 0 0 0 3px rgba(97,159,229,.15), inset 0 2px 4px rgba(0,0,0,.12); }
.session-state { display: flex; gap: 11px; align-items: center; margin-top: 18px; padding: 13px 16px; border: 1px solid rgba(68,205,167,.38); border-radius: 17px; background: rgba(227,250,244,.69); }
.session-state p { flex: 1; margin: 0; }
.session-state b, .session-state small { display: block; }
.session-state b { color: #26846f; font-size: 11px; }
.session-state small { margin-top: 5px; color: #5d9c8e; font-size: 9px; }
.session-state > svg { width: 17px; color: #31a88b; }
.privacy-note { display: flex; gap: 7px; align-items: flex-start; margin: 19px 3px 0; color: #7892af; font-size: 9px; line-height: 1.5; }
.privacy-note svg { flex: 0 0 auto; width: 14px; }
.session-modal footer { display: flex; justify-content: space-between; align-items: center; min-height: 77px; padding: 15px 28px; border-top: 1px solid rgba(120,159,208,.18); }
.session-modal footer .text-button { color: #7892af; }
.toast { position: fixed; z-index: 14; right: 24px; bottom: 24px; display: flex; gap: 10px; align-items: center; min-width: 276px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.86); border-radius: 16px; background: rgba(251,255,254,.9); box-shadow: 0 17px 35px rgba(45,88,139,.18), inset 0 1px white; color: #396382; font-size: 11px; animation: toast-in .28s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1120px) {
  .app-shell { gap: 28px; width: min(100% - 36px, 1100px); }
  .sidebar { flex-basis: 214px; }
  .stats-grid { gap: 12px; }
  .stat-card { padding-inline: 15px; }
  .detail-grid { grid-template-columns: .87fr 1.13fr; }
  .health-badge { display: none; }
}
@media (max-width: 900px) {
  .app-shell { display: block; width: min(100% - 28px, 760px); margin-top: 14px; }
  .sidebar { position: static; width: 100%; height: auto; min-height: 0; max-height: none; margin-bottom: 19px; padding: 12px 14px; border-radius: 24px; }
  .brand { display: none; }
  .nav-heading, .sidebar-footer { display: none; }
  .main-nav { display: flex; justify-content: space-between; gap: 3px; }
  .nav-item { min-height: 40px; width: auto; flex: 1; justify-content: center; padding: 0 7px; border-radius: 13px; }
  .nav-item span { display: none; }
  .nav-count { display: none; }
  .topbar { min-height: 122px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid, .detail-lower, .alerts-layout, .settings-layout { grid-template-columns: 1fr; }
  .health-grid { margin-top: 18px; }
  .product-hero { align-items: flex-start; flex-direction: column; }
  .detail-actions { width: 100%; }
  .detail-actions button { flex: 1; }
}
@media (max-width: 620px) {
  .app-shell { width: min(100% - 20px, 500px); margin-bottom: 20px; }
  .topbar { min-height: 0; flex-direction: column; gap: 16px; padding: 10px 2px 22px; }
  .top-actions { width: 100%; padding: 0; }
  .sync-pill { margin-right: auto; }
  h1 { margin-top: 10px; font-size: 33px; }
  .page-intro > p:last-child { font-size: 11px; }
  .stats-grid, .overview-bottom, .history-summary, .health-grid { grid-template-columns: 1fr; }
  .change-panel { margin-top: 18px; }
  .panel-heading, .list-tools { padding-inline: 16px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .panel-heading .segmented { align-self: stretch; justify-content: space-around; }
  .panel-heading .segmented button { flex: 1; padding: 0 7px; }
  .list-tools { gap: 10px; align-items: flex-start; flex-direction: column; padding-block: 12px; }
  .list-tools > div { width: 100%; }
  .search-field { flex: 1; }
  .search-field input { width: 100%; }
  .product-row { grid-template-columns: minmax(0, 1fr) auto 21px; gap: 8px; min-height: 88px; padding: 10px 4px; }
  .product-row .row-price:nth-of-type(2), .product-row .row-status { display: none; }
  .product-row:first-child { padding-inline: 9px; }
  .row-product small { max-width: 175px; }
  .product-art { width: 48px; height: 48px; border-radius: 15px; }
  .row-price.effective strong { font-size: 14px; }
  .row-price.effective em { font-size: 8px; }
  .health-mini { align-items: flex-start; flex-direction: column; }
  .health-mini .secondary-button { width: 100%; }
  .tip-card { min-height: 150px; }
  .page-actions { align-items: flex-start; flex-direction: column; gap: 13px; }
  .page-actions .primary-button, .page-actions .secondary-button { width: 100%; }
  .products-panel .panel-heading { gap: 14px; }
  .panel-search { width: 100%; }
  .panel-search .search-field { flex: 1; }
  .back-link { margin-top: 1px; }
  .product-hero { padding: 18px; }
  .detail-product { align-items: flex-start; }
  .large-art { width: 52px; height: 52px; border-radius: 16px; }
  .detail-product h2 { font-size: 16px; white-space: normal; }
  .detail-product p { line-height: 1.4; }
  .detail-grid { margin-top: 12px; }
  .effective-card { min-height: 286px; padding: 23px; }
  .effective-card > strong { font-size: 42px; }
  .effective-card > p { margin-bottom: 30px; }
  .card-label em { padding: 7px 8px; font-size: 7px; }
  .card-label em b { font-size: 10px; }
  .breakdown-card, .history-card { padding: 22px 18px; }
  .price-timeline > div { grid-template-columns: 15px minmax(74px, 1fr) auto; gap: 6px; }
  .price-timeline em { display: none; }
  .price-timeline strong { font-size: 10px; }
  .history-card { min-height: 290px; }
  .chart-tooltip { right: 0; }
  .history-title { align-items: flex-start; flex-direction: column; }
  .history-title .secondary-button { width: 100%; }
  .full-chart-card { padding: 20px 15px 15px; }
  .full-chart { height: 230px; }
  .chart-axis { font-size: 7px; }
  .chart-tooltip.large { display: none; }
  .event-list { padding-inline: 17px; }
  .event-list > div { gap: 9px; }
  .event-list strong { font-size: 9px; }
  .alert-row { padding-inline: 16px; }
  .alert-row.unread::before { margin-left: -7px; }
  .alert-row > strong { display: none; }
  .alert-summary { min-height: 245px; }
  .health-hero { align-items: flex-start; flex-direction: column; padding: 19px; }
  .health-actions { width: 100%; }
  .health-actions .secondary-button { width: 100%; }
  .health-card { min-height: 244px; }
  .frequency { align-items: flex-start; flex-direction: column; }
  .frequency .segmented { width: 100%; }
  .frequency .segmented button { flex: 1; padding-inline: 5px; }
  .session-modal header, .modal-body, .session-modal footer { padding-inline: 18px; }
  .session-modal header { padding-top: 20px; }
  .session-modal h2 { font-size: 19px; }
  .instruction-callout { padding: 12px; }
  .toast { right: 10px; bottom: 10px; min-width: 0; width: calc(100% - 20px); }
}

/* Shopee night: retain the Lumen layout while moving the visual system to a warm,
   high-contrast checkout palette. */
:root {
  --ink: #fff6ef;
  --ink-strong: #fffaf6;
  --muted: #c9a99a;
  --muted-deep: #ad8778;
  --line: rgba(255, 154, 100, .18);
  --line-strong: rgba(255, 112, 61, .46);
  --glass: rgba(31, 21, 18, .74);
  --glass-strong: rgba(40, 25, 21, .88);
  --glass-light: rgba(255, 239, 226, .08);
  --navy: #ee4d2d;
  --cyan: #ff7950;
  --mint: #5fd3ab;
  --mint-deep: #35ad82;
  --blue: #ff8c52;
  --lilac: #d88bff;
  --amber: #ffbf62;
  --shadow: 0 28px 66px rgba(0, 0, 0, .38), 0 5px 18px rgba(238, 77, 45, .09);
  --inner: inset 0 1px rgba(255, 225, 205, .13), inset 0 -1px rgba(0, 0, 0, .3);
}

html { background: #130d0b; }
body { color: var(--ink); background: radial-gradient(circle at 53% 24%, rgba(136, 52, 25, .36) 0, transparent 31%), radial-gradient(circle at 87% 10%, rgba(238, 77, 45, .16), transparent 26%), linear-gradient(132deg, #130d0b 0%, #1d100d 47%, #120c0d 100%); }
.glow-one { background: radial-gradient(circle, rgba(238, 77, 45, .3), rgba(126, 47, 25, .08) 55%, transparent 72%); }
.glow-two { background: radial-gradient(ellipse, rgba(255, 136, 74, .15), rgba(117, 55, 39, .05) 60%, transparent 74%); }
.glow-three { background: radial-gradient(ellipse, rgba(255, 89, 48, .13), transparent 68%); }
.glass-panel, .glass-card { border-color: rgba(255, 208, 179, .15); }
.glass-panel { background: linear-gradient(140deg, rgba(45, 28, 24, .88), rgba(24, 16, 15, .72)); }
.glass-card { background: linear-gradient(135deg, rgba(47, 30, 25, .88), rgba(28, 18, 17, .78)); }

.brand-mark { color: #fff6f1; background: linear-gradient(145deg, #ff7044, #c9361f); box-shadow: 0 11px 23px rgba(238, 77, 45, .24); }
.brand-mark i { background: #5fd3ab; border-color: #2b1814; }
.brand small, .nav-heading, .eyebrow { color: #ca9380; }
.nav-item { color: #c5a193; }
.nav-item svg { color: #bb8877; }
.nav-item:hover { background: rgba(255, 133, 77, .09); color: #fff8f3; }
.nav-item.active { background: linear-gradient(90deg, rgba(238, 77, 45, .25), rgba(238, 77, 45, .06)); color: #fff7f2; box-shadow: inset 3px 0 #ee4d2d, inset 0 1px rgba(255, 218, 195, .12); }
.nav-item.active svg, .nav-count { color: #ff7a4f; }
.sidebar-footer { border-color: rgba(255, 157, 105, .13); }
.mini-session b { color: #fff4ed; }
.mini-session button { color: #d4a18f; }
.mini-session button:hover { background: rgba(255, 119, 70, .14); }

h1, .panel-heading h2, .page-actions h2, .history-title h2, .settings-title h2, .detail-product h2, .health-mini h3, .tip-card h3, .health-card h3, .settings-heading h3, .session-setting h3, .danger-card h3 { color: #fff7f1; }
h1 { text-shadow: 0 7px 28px rgba(238, 77, 45, .14); }
.page-intro > p:last-child, .history-title > div > p:last-child, .settings-title > p:last-child, .page-actions > div > p:last-child, .panel-heading p, .health-hero p, .health-card > p, .detail-product p, .tip-card > div > p:last-child, .session-setting > p:not(.eyebrow), .danger-card > p:not(.eyebrow) { color: #c7a394; }
.sync-pill, .circle-button, .avatar-button { border-color: rgba(255, 202, 171, .16); box-shadow: var(--inner), 0 5px 16px rgba(0, 0, 0, .2); background: rgba(56, 34, 28, .74); color: #e8bdad; }
.sync-pill:hover, .circle-button:hover, .small-icon:hover { background: rgba(238, 77, 45, .19); }
.avatar-button { background: #7e321f; color: #fff4ed; }

.stat-card::after { background: radial-gradient(circle, rgba(238, 77, 45, .2), rgba(238, 77, 45, 0) 68%); }
.stat-card p, .stat-card span, .row-product small, .row-price > small, .row-price .was, .row-status small, .table-header, .health-mini small, .health-card dt, .toggle-row small, .settings-heading p { color: #b88f80; }
.stat-card strong, .row-price strong, .history-summary strong { color: #fff4ec; }
.best-deal { border-color: rgba(255, 144, 86, .33); background: linear-gradient(140deg, rgba(111, 39, 23, .72), rgba(56, 28, 21, .84)); box-shadow: var(--inner), 0 18px 34px rgba(0, 0, 0, .22); }
.best-deal p svg, .best-deal strong, .best-deal span, .row-price.effective strong { color: #ff8a57; }
.positive, .row-price.effective em { color: #65d8ac !important; }

.panel-heading, .list-tools, .settings-heading, .toggle-row, .health-card dl div { border-color: rgba(255, 165, 111, .14); }
.segmented { border-color: rgba(255, 159, 103, .18); background: rgba(0, 0, 0, .16); }
.segmented button { color: #c19a8b; }
.segmented button:hover, .segmented button.active { background: rgba(238, 77, 45, .21); box-shadow: inset 0 1px rgba(255, 226, 209, .12); color: #fff7f1; }
.search-field, .small-icon, .filter-chip { border-color: rgba(255, 162, 107, .22); background: rgba(0, 0, 0, .16); color: #d9ad9b; }
.search-field input, .search-field input::placeholder { color: #d9ad9b; }
.filter-chip b { color: #ff8e61; }
.filter-chip.active { border-color: rgba(238, 77, 45, .62); background: rgba(238, 77, 45, .19); color: #fff7f1; box-shadow: 0 4px 13px rgba(238, 77, 45, .12); }
.product-row { border-bottom-color: rgba(255, 160, 107, .12); }
.product-row:first-child, .product-row:hover { border-color: rgba(255, 122, 75, .56); background: linear-gradient(90deg, rgba(238, 77, 45, .16), rgba(255, 132, 74, .05)); }
.product-art { color: #3c170e; background: linear-gradient(140deg, #ffb17d, #df542c); }
.art-kindle { background: linear-gradient(140deg, #d8a0ff, #8244b1); }
.art-anker { background: linear-gradient(140deg, #92e5ce, #329b7e); }
.art-mug { background: linear-gradient(140deg, #ffd0a8, #c66a39); }
.row-product b { color: #fff5ed; }
.row-price.strike strong { color: #c7a597; }
.status-badge { border-color: rgba(95, 211, 171, .45); background: rgba(45, 128, 96, .2); color: #74ddb9; }
.status-badge.voucher { border-color: rgba(255, 143, 89, .5); background: rgba(238, 77, 45, .16); color: #ff9d74; }
.row-chevron, .quiet-link, .text-button, .back-link { color: #ff8b60; }
.quiet-link:hover, .text-button:hover { color: #ffd0ba; }

.icon-tile.mint, .event-icon.mint { color: #68dbb2; background: rgba(53, 167, 125, .19); }
.icon-tile.blue, .event-icon.blue { color: #ff9b6f; background: rgba(238, 77, 45, .18); }
.icon-tile.lilac, .event-icon.lilac { color: #dba2ff; background: rgba(150, 83, 190, .18); }
.icon-tile.amber, .event-icon.amber { color: #ffc266; background: rgba(184, 113, 30, .2); }
.secondary-button { border-color: rgba(255, 141, 84, .49); box-shadow: inset 0 1px rgba(255, 219, 198, .12), 0 4px 12px rgba(0, 0, 0, .18); background: rgba(69, 39, 29, .72); color: #ffc1a2; }
.secondary-button:hover { background: rgba(238, 77, 45, .25); }
.primary-button { border-color: rgba(255, 170, 117, .54); box-shadow: inset 0 1px rgba(255, 231, 216, .24), 0 8px 18px rgba(238, 77, 45, .22); background: linear-gradient(145deg, #ff7447, #dc3d24); color: #fffaf6; }
.primary-button:hover { box-shadow: inset 0 1px rgba(255,255,255,.3), 0 12px 24px rgba(238, 77, 45, .3); }
.tip-card { border-color: rgba(255, 171, 118, .16); background: linear-gradient(135deg, rgba(67, 37, 27, .86), rgba(42, 26, 21, .82)); }

.detail-kicker { color: #d5aa96; }
.detail-kicker > span { border-color: rgba(255, 150, 95, .28); background: rgba(238, 77, 45, .11); }
.detail-kicker i { color: #7fdbbb; }
.detail-product p span { color: #815e52; }
.effective-card::after { background: radial-gradient(circle, rgba(238, 77, 45, .21), rgba(238, 77, 45, 0) 67%); }
.effective-card > p, .checked-line, .price-timeline small, .goal-card > p:not(.eyebrow), .chart-axis { color: #c9a798; }
.effective-card > strong { color: #fff5ee; }
.card-label > span, .price-change, .price-timeline em, .final-row em { color: #73deb8; }
.card-label em { border-color: rgba(95, 211, 171, .32); background: rgba(46, 151, 111, .16); color: #76e0ba; }
.breakdown-card h2, .history-card h2, .goal-card h3, .event-list b, .alert-row b, .alert-row > strong, .settings-card h3 { color: #fff4ed; }
.adjustment-chip { background: rgba(238, 77, 45, .16); color: #ffad87; }
.price-timeline > div::before { background: rgba(255, 159, 103, .24); }
.price-timeline i { border-color: #ff9367; background: #2e1a16; }
.price-timeline .final-row { border-color: rgba(255, 137, 80, .4); background: rgba(238, 77, 45, .11); }
.goal-progress { background: rgba(255, 172, 122, .17); }
.goal-progress i { background: linear-gradient(90deg, #ee4d2d, #ffad70); }
.chart-legend { color: #c9a798; }
.line.shop { background: #f5bb9c; }
.line.effective { background: #ff7044; }
.line.target { background: #70dcb7; }
.grid { stroke: rgba(255, 171, 118, .16); }
.target-line { stroke: #70dcb7; }
.shop-line { stroke: #f5bb9c; }
.effective-area { fill: rgba(238, 77, 45, .2); }
.effective-line { stroke: #ff7044; }
.mini-chart circle, .full-chart circle { fill: #ff7044; stroke: #ffd0bb; }
.chart-tooltip { border-color: rgba(255, 160, 106, .34); background: rgba(39, 23, 19, .94); box-shadow: 0 12px 25px rgba(0, 0, 0, .33); }
.chart-tooltip small, .chart-tooltip span { color: #cb9d8d; }
.chart-tooltip b { color: #fff5ec; }

.health-badge, .healthy-badge { border-color: rgba(95, 211, 171, .34); background: rgba(44, 137, 103, .18); color: #70dbb5; }
.warning-badge { background: rgba(182, 109, 27, .19); color: #ffc363; }
.health-card dd { color: #f1c4ae; }
.warning-callout { border-color: rgba(255, 190, 97, .36); background: rgba(164, 93, 21, .16); color: #ffd18d; }
.warning-callout svg { color: #ffc363; }
.toggle-row b { color: #fff2e9; }
.toggle-row i { background: #6a5148; }
.toggle-row input:checked + i { background: #ee4d2d; }
.frequency { color: #d7ad9b; }
.danger-card { border-color: rgba(255, 174, 122, .16); background: linear-gradient(135deg, rgba(74, 35, 34, .76), rgba(37, 22, 19, .86)); }

.modal-backdrop { background: rgba(13, 7, 5, .68); }
.session-modal { border-color: rgba(255, 175, 123, .24); background: linear-gradient(135deg, rgba(51, 30, 24, .98), rgba(27, 17, 15, .96)); box-shadow: inset 0 1px rgba(255, 223, 203, .13), 0 30px 88px rgba(0, 0, 0, .66); }
.session-modal header, .session-modal footer { border-color: rgba(255, 157, 105, .18); }
.session-modal header .eyebrow { color: #ff9670; }
.session-modal h2 { color: #fff5ee; }
.session-modal header p:last-child, .instruction-callout p, .privacy-note { color: #c9a596; }
.instruction-callout { border-color: rgba(238, 77, 45, .35); background: rgba(238, 77, 45, .11); }
.instruction-callout svg { color: #ff9469; }
.field-title label { color: #fff0e7; }
textarea { border-color: rgba(255, 138, 82, .58); background: linear-gradient(145deg, #241410, #160d0c); color: #ffe4d4; }
textarea::placeholder { color: #b98270; }
textarea:focus { border-color: #ff8b5f; box-shadow: 0 0 0 3px rgba(238, 77, 45, .2), inset 0 2px 4px rgba(0,0,0,.24); }
.session-state { border-color: rgba(95, 211, 171, .42); background: rgba(43, 137, 101, .16); }
.session-state b { color: #77dfba; }
.session-state small { color: #a5cfbd; }
.session-modal footer .text-button { color: #d4aa99; }
.toast { border-color: rgba(255, 173, 120, .24); background: rgba(48, 29, 24, .96); box-shadow: 0 18px 38px rgba(0,0,0,.4), inset 0 1px rgba(255, 223, 204, .1); color: #f5d0be; }