html[data-theme="graphite"] { --bg: #0e0f12; --glass: rgba(40, 41, 46, .74); --glass-2: rgba(56, 57, 63, .7); }
html[data-theme="navy"] { --bg: #040a16; --glass: rgba(20, 31, 52, .72); --glass-2: rgba(32, 46, 74, .66); }
html[data-theme="violet"] { --bg: #07040e; --glass: rgba(34, 26, 50, .72); --glass-2: rgba(50, 40, 72, .66); }
html[data-theme="graphite"] body::before { opacity: .55; }
html[data-theme="navy"] body::before {
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(10, 132, 255, .32), transparent 70%),
    radial-gradient(55% 50% at 82% 18%, rgba(64, 200, 224, .16), transparent 70%);
}
html[data-theme="violet"] body::before {
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(94, 92, 230, .42), transparent 70%),
    radial-gradient(55% 50% at 82% 18%, rgba(191, 90, 242, .22), transparent 70%);
}
.w-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
.w-theme { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px; border-radius: 16px; color: var(--text-2); font: 600 12.5px var(--font); transition: background-color .25s var(--ease), color .25s var(--ease); }
.w-theme.on { background: rgba(255, 255, 255, .08); color: #fff; }
.sw { width: 44px; height: 44px; border-radius: 14px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); transition: transform .3s var(--ease), box-shadow .25s var(--ease); }
.w-theme.on .sw { transform: scale(1.06); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--accent); }
.sw-black { background: radial-gradient(70% 70% at 30% 20%, rgba(94, 92, 230, .55), transparent 70%), #000; }
.sw-graphite { background: radial-gradient(70% 70% at 30% 20%, rgba(94, 92, 230, .3), transparent 70%), #17181c; }
.sw-navy { background: radial-gradient(70% 70% at 30% 20%, rgba(10, 132, 255, .6), transparent 70%), #061024; }
.sw-violet { background: radial-gradient(70% 70% at 30% 20%, rgba(191, 90, 242, .55), transparent 70%), #120a20; }


.side-only, .side-brand, .side-sep, .side-me { display: none !important; }
.tab .cnt { display: none; }

html[data-host="web"] #app { padding-top: 14px; }


@media (min-width: 900px) {
  body:has(#tabbar:not(.hidden)) { padding-left: 248px; }
  #app { max-width: 720px; zoom: 1.08; padding: 30px 28px 60px; }
  #layer .sheet { zoom: 1.06; }
  .tabbar, .tabbar.five {
    left: 0; top: 0; bottom: 0; transform: none; width: 248px; height: auto;
    display: flex; flex-direction: column; gap: 2px; padding: 18px 12px 14px;
    border-radius: 0; border: 0; border-right: .5px solid rgba(255, 255, 255, .08);
    background: rgba(14, 14, 16, .72);
    -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
    box-shadow: none; overflow-y: auto;
  }
  .side-brand { display: flex !important; align-items: center; gap: 11px; padding: 2px 8px 18px; font: 700 16px var(--font-display); letter-spacing: -.2px; }
  .side-brand .tile { width: 34px; height: 34px; border-radius: 11px; }
  .side-brand .tile .ic { width: 19px; height: 19px; }
  .side-sep { display: block !important; height: .5px; background: rgba(255, 255, 255, .08); margin: 10px 8px; }
  .side-only { display: flex !important; }
  .tab {
    flex-direction: row; justify-content: flex-start; gap: 12px; height: 42px; padding: 0 12px; border-radius: 13px;
    font: 600 14.5px var(--font); color: var(--text-2);
    transition: background-color .25s var(--ease), color .2s var(--ease), transform .25s var(--ease);
  }
  .tab .ic { width: 20px; height: 20px; }
  .tab:hover { background: rgba(255, 255, 255, .05); color: #fff; }
  .tab.on { background: rgba(255, 255, 255, .09); color: #fff; }
  .tab.on .ic { transform: none; }
  .tab .cnt { display: grid; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; place-items: center; background: var(--red); color: #fff; font: 700 11px var(--font); font-style: normal; }
  .side-me { display: flex !important; align-items: center; gap: 10px; margin-top: auto; padding: 8px; border-radius: 14px; text-align: left; transition: background-color .25s var(--ease); }
  .side-me:hover { background: rgba(255, 255, 255, .05); }
  .side-me .ava { width: 34px; height: 34px; font-size: 14px; }
  .side-me b { display: block; font: 600 14px var(--font); }
  .side-me span { display: block; color: var(--text-3); font-size: 12px; }
  button.row:hover, .row[data-a]:hover { background: rgba(255, 255, 255, .035); }
  .chip:hover { color: #fff; }
  .btn.secondary:hover { background: rgba(60, 60, 66, .72); }
  .sheet { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
  body:has(#tabbar:not(.hidden)) .sheet { margin-left: 124px; }
  @keyframes up { from { transform: translate(-50%, 100%); } }
}


#side { display: none; }
@media (min-width: 1280px) {
  body:has(#side:not(:empty)) { padding-right: 360px; }
  #side {
    display: block; position: fixed; z-index: 15; top: 0; right: 0; bottom: 0; width: 360px; overflow-y: auto;
    padding: 30px 18px; border-left: .5px solid rgba(255, 255, 255, .08); background: rgba(10, 10, 12, .5);
  }
  #side:empty { display: none; }
  #side .group-title:first-child { margin-top: 0; }
  #side .row .title { font-size: 15px; }
  #side .row.cur { background: rgba(10, 132, 255, .12); }
  body:has(#side:not(:empty)) .sheet { margin-left: -56px; }
}


.w-mode { margin: 4px 0 12px; }
.w-price { text-align: right; font: 700 16px var(--font-display); letter-spacing: -.3px; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.w-price b { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.w-price b .ic { width: 14px; height: 14px; color: var(--ton); stroke-width: 2.2; }
.w-price small { font: 500 11.5px var(--font); color: var(--text-3); }
.w-price small.good { color: var(--green); }
.w-range { display: flex; align-items: center; gap: 6px; }
.w-range .input { width: 76px; padding: 9px 10px; font-size: 15px; text-align: center; }
.w-range span { color: var(--text-3); }
.w-sort { margin: 12px 2px 0; }
.row.dim { opacity: .5; }


.w-when { color: var(--text-3); font-size: 12px; white-space: nowrap; align-self: flex-start; padding-top: 3px; }
.w-unread .title::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: 2px; }
.badge.w-n { margin-right: 4px; }
.top .chip { margin-bottom: 4px; }


.w-chat { overflow: hidden; }
.w-thread { display: flex; flex-direction: column; gap: 7px; padding: 14px; min-height: 260px; }
.w-msg { max-width: 82%; padding: 9px 13px 7px; border-radius: 18px; font-size: 15px; line-height: 1.42; animation: pop .45s var(--ease) both; }
.w-msg time { display: block; font-size: 11px; color: var(--text-3); text-align: right; margin-top: 2px; }
.w-msg.them { align-self: flex-start; background: var(--glass-2); border: .5px solid var(--hair); border-bottom-left-radius: 6px; }
.w-msg.me { align-self: flex-end; background: linear-gradient(135deg, #5b5fd6, #2a7ff2); border-bottom-right-radius: 6px; box-shadow: 0 10px 24px -14px rgba(42, 127, 242, .9); }
.w-msg.me time { color: rgba(255, 255, 255, .62); }
.w-sys { align-self: center; color: var(--text-3); font-size: 12.5px; padding: 4px 0; }
.w-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: .5px solid var(--hair); }
.w-composer textarea, textarea.w-grow { resize: none; overflow-y: auto; min-height: 44px; max-height: 180px; padding: 11px 14px; border-radius: 22px; line-height: 1.4; font-size: 15px; }
.w-composer textarea { flex: 1; height: 44px; }
textarea.w-grow { border-radius: 16px; width: 100%; }
.w-composer .round { flex: none; width: 44px; height: 44px; }
.w-send { background: linear-gradient(135deg, #5b5fd6, #2a7ff2) !important; color: #fff; }
textarea::-webkit-resizer { display: none; }


.w-pad { padding: 14px; }
.w-key b { display: block; }
.w-key span { display: block; color: var(--text-2); font-size: 14px; margin-top: 2px; }
.w-docs p { margin: 0 0 8px; color: var(--text-2); font-size: 14px; }
.w-docs code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--accent-ink); }
.w-ep { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: .5px solid var(--hair); font-size: 14px; color: var(--text-2); }
.w-ep code { min-width: 82px; }
.w-docs pre { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .45); font: 12.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: #d4dae6; overflow-x: auto; }


.w-atabs { margin: 0 0 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.w-atabs::-webkit-scrollbar { display: none; }
.row .badge.green:empty, .row .badge.dim:has(.w-dot) { padding: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 0; box-shadow: 0 0 8px rgba(48, 209, 88, .6); }
.row .badge.dim:has(.w-dot) { background: var(--orange); box-shadow: 0 0 8px rgba(255, 159, 10, .6); }
.w-dot { display: none; }


.w-login { min-height: 92vh; max-width: 420px; margin: 0 auto; padding: 24px 4px; justify-content: center; gap: 0; }
.w-login h1 { margin-top: 16px; }
.w-login p { margin: 8px 0 18px; }
.w-login .seg { width: 100%; margin-bottom: 12px; }
.w-login .input { width: 100%; text-align: left; }
.w-login .btn { width: 100%; }
.w-steps { width: 100%; text-align: left; margin: 0 0 12px; }
.w-steps b[data-a] { color: var(--accent-ink); cursor: pointer; }
.w-login .pay-warn { margin-top: 10px; }
.w-tg { background: linear-gradient(145deg, #37b6f6, #1d93d2) !important; box-shadow: 0 20px 50px -20px rgba(42, 171, 238, .9) !important; }
.w-tg .ic { color: #fff !important; }
.w-code { width: 100%; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.w-code small { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.w-code b { font: 800 30px var(--font-display); letter-spacing: 5px; }
.w-timer { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }


.w-demo {
  position: fixed; z-index: 70; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 10px; border-radius: 12px; background: rgba(40, 32, 8, .92); border: .5px solid rgba(255, 214, 10, .35);
  color: #e9c46a; font: 700 11px var(--font);
}
.w-demo select { background: transparent; border: 0; color: #e9c46a; font: 600 12px var(--font); outline: 0; cursor: pointer; }
.w-demo select option { background: #1c1c1e; color: #fff; }
@media (max-width: 899px) { .w-demo { bottom: calc(var(--tabbar) + var(--safe-b) + 18px); } }
.w-login .input { padding: 14px 16px; border-radius: 16px; background: var(--glass); border: .5px solid var(--hair); font-size: 16px; }
.w-login .input:focus { border-color: var(--accent-hair); outline: 0; }


body::before { filter: none; }
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(26, 26, 29, .86); }
html[data-theme="graphite"] .glass { background: rgba(38, 39, 44, .9); }
html[data-theme="navy"] .glass { background: rgba(18, 28, 48, .88); }
html[data-theme="violet"] .glass { background: rgba(32, 25, 47, .88); }
.btn.secondary { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(48, 48, 52, .85); }

.glass.feed { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.glass.list > .row { content-visibility: auto; contain-intrinsic-size: auto 66px; }

@media (min-width: 900px) {
  .tabbar, .tabbar.five { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 12, 14, .97); }
}


.w-login .pw-note { margin-top: 14px; }
.w-login > .seg, .w-login > .w-steps, .w-login > .input, .w-login > .btn, .w-login > .w-code, .w-login > .pay-warn { width: 100%; }
.w-login .pw-logo { margin: 0 auto; }
.w-sort { flex-wrap: wrap; }

.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 0 0; }
.ref-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: 12.5px; text-align: center; }
.ref-stats b { order: -1; font: 700 19px var(--font-display); letter-spacing: -.3px; color: #fff; }
.ref .btn { width: 100%; }

.w-lock { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px 20px; }
.w-lock .pw-logo { margin: 0 0 14px; }
.w-lock h2 { margin: 0; font: 700 22px var(--font-display); letter-spacing: -.4px; }
.w-lock p { margin: 8px 0 18px; color: var(--text-2); font-size: 14.5px; max-width: 340px; }
.w-lock .btn { width: 100%; }
.w-note { text-align: center; color: var(--text-3); font-size: 13px; margin-top: 8px; }

.thumb, .art { background: rgba(255, 255, 255, .06); }
img { color: transparent; }
.w-composer textarea { background: rgba(255, 255, 255, .06); border: .5px solid var(--hair); color: #fff; }
.w-composer textarea:focus { border-color: var(--accent-hair); outline: 0; }
textarea.w-grow { background: rgba(255, 255, 255, .06); border: .5px solid var(--hair); color: #fff; }

.w-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 14px; font-size: 14.5px; line-height: 1.35; }
.w-banner.warn { border-color: rgba(255, 159, 10, .35); }
.w-banner.good { border-color: rgba(48, 209, 88, .35); }
.w-link { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.w-pic { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin-bottom: 6px; }
.w-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-pic { cursor: zoom-in; }
.w-viewer { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .9); cursor: zoom-out; }
.w-viewer img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; }


.w-atabs .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.w-atabs .chip .ic-xs { opacity: .8; }
.w-atabs .cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--red); color: #fff; font: 700 11px var(--font); font-style: normal; }
kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; border: .5px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--text-3); font: 600 11px/1 var(--font); }
.w-atabs kbd { margin-left: 2px; }
.w-keybtn { display: none; align-items: center; gap: 6px; }
.w-keys { display: inline-flex; gap: 4px; flex: none; }
.w-keys kbd { min-width: 24px; height: 24px; font-size: 12px; color: var(--text-2); }
@media (hover: none), (max-width: 899px) { .w-atabs kbd { display: none; } }
@media (hover: hover) and (min-width: 900px) {
  .w-keybtn { display: inline-flex; }
  .w-atabs { flex-wrap: wrap; overflow: visible; }
  #app:has(.w-apane) { max-width: 980px; }
}
.w-apane { animation: pop .35s var(--ease) both; }

.w-rev { display: block; width: 100%; text-align: left; padding: 18px 18px 10px; border-radius: 24px; margin-top: 6px; }
.w-rev small, .w-rev-row small, .w-tile small { color: var(--text-2); font-size: 13px; }
.w-rev .big { font-family: var(--font-display); font-size: 30px; font-weight: 750; letter-spacing: -.8px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.w-rev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.w-rev-row .glass { text-align: left; padding: 12px 14px; border-radius: 18px; min-width: 0; }
.w-rev-row b { display: block; font-size: 15px; margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.w-rev-row span, .w-tile span { display: block; color: var(--text-3); font-size: 12px; margin-top: 3px; }
.w-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.w-tile { text-align: left; min-width: 0; }
.w-tile.w-wide { grid-column: 1 / -1; }
.w-tile .w-sum { font-size: 22px; overflow-wrap: anywhere; }
button.w-tile, .w-rev, .w-rev-row .glass { cursor: pointer; transition: transform .15s var(--ease), border-color .2s; }
button.w-tile:hover, .w-rev:hover, .w-rev-row .glass:hover { border-color: var(--accent-hair, rgba(10, 132, 255, .4)); }
button.w-tile:active, .w-rev:active, .w-rev-row .glass:active { transform: scale(.98); }
.w-quickbtns { flex-wrap: wrap; }
.w-quickbtns .btn { flex: 1 1 200px; }

.w-chart { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding: 18px 4px 4px; }
.w-chartbox .w-chart { padding: 18px 14px 10px; }
.w-chart .bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.w-chart .bar i { width: 100%; max-width: 30px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--accent), #5e5ce6); transition: height .5s var(--ease); }
.w-chart .bar.zero i { background: var(--fill-2); }
.w-chart .bar.today i { background: linear-gradient(180deg, #30d158, #0a84ff); }
.w-chart .bar em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.w-chart .bar span { height: 13px; font-size: 10px; color: var(--text-3); white-space: nowrap; }
.w-chart.dense { gap: 2px; }
.w-chart.dense .bar i { border-radius: 3px 3px 1px 1px; }
.w-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 640px) { .w-two { grid-template-columns: 1fr; } .w-rev-row { grid-template-columns: 1fr 1fr; } .w-rev-row .glass:last-child { grid-column: 1 / -1; } }

.w-chat.w-fixed { display: flex; flex-direction: column; height: 520px; }
.w-chat.w-fixed .w-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.w-chat.w-fixed .w-composer, .w-chat.w-fixed .w-quick { flex: none; }
.w-quick { display: flex; gap: 6px; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: none; border-top: .5px solid var(--hair); }
.w-quick::-webkit-scrollbar { display: none; }
.w-quick + .w-composer { border-top: 0; }
.w-quick .chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 6px 11px; }
.w-thead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.w-tnav { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13px; }
.w-tnav span { margin-right: 4px; font-variant-numeric: tabular-nums; }
.round.sm { width: 34px; height: 34px; }
.w-msg .w-link { color: inherit; }
.w-uacts { margin-top: 2px; }
.w-uacts .chip { display: inline-flex; align-items: center; gap: 6px; }
.plain-btn { text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.w-count { margin-left: auto; align-self: center; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.row .chip + .chip { margin-left: 6px; }
.w-paytiles { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; }
.w-tile .w-sum.sm { font-size: 17px; }
@media (max-width: 640px) { .w-paytiles { grid-template-columns: 1fr 1fr; } .w-paytiles .w-main { grid-column: 1 / -1; } }
.w-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-cap-pic { aspect-ratio: 1; padding: 0; border-radius: 20px; overflow: hidden; display: grid; place-items: center; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; }
.w-cap-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-cap-pic:hover { box-shadow: 0 0 0 2px var(--accent); }
.w-cap-pic:active { transform: scale(.96); }
.w-cap-pic[disabled] { opacity: .5; }
.w-cap-q b { color: var(--text); }
.w-ts-layer .sheet-bg { z-index: 32; }
.w-ts-layer .sheet { z-index: 33; }
.w-ts-box { min-height: 72px; display: grid; place-items: center; margin: 6px 0 4px; }
.w-sus .title { color: var(--orange); display: inline-flex; align-items: center; gap: 6px; }
.note + .glass, .note + .note { margin-top: 10px; }