/* Neutral dark surfaces; ivory is reserved for small brand accents. */
:root{--bg:#080808;--panel:#101010;--panel2:#171717;--border:#2b2b2b;--text:#f3f3f3;--muted:#999;--accent:#e9d9bd;--green:#74d8ad;--red:#ee8c99;color-scheme:dark}
::selection{background:#e9d9bd;color:#171717}
body{color:var(--text)}
button,input,select,a{accent-color:var(--accent)}
a,a:visited{color:var(--text)}
.reserve-desktop,.reserve-mobile,.reserve-devices{background:var(--bg)}
.reserve-desktop .topbar{background:linear-gradient(180deg,#101010,#0b0b0b);border-bottom-color:#222}
.reserve-desktop .button,.reserve-desktop .metric,.reserve-desktop .assets-card,.reserve-desktop .guard-card{background:#111;border-color:var(--border)}
.reserve-desktop .button:hover,.reserve-desktop .icon-button:hover{border-color:#555;background:#1b1b1b;color:#fff}
.reserve-desktop .button.primary,.reserve-mobile .primary,.reserve-devices .primary{background:#e9d9bd;border-color:#e9d9bd;color:#171717;box-shadow:none}
.reserve-desktop .nav-item.active{color:#fff;border-bottom-color:var(--accent)}
.reserve-desktop .brand{height:58px;overflow:hidden}
.reserve-desktop .brand .reserve-wordmark{width:126%;left:-8%;height:auto;max-width:none;mix-blend-mode:screen;transform:translateY(-46.3%)}
@media(min-width:961px){.reserve-desktop .topbar{height:64px}.reserve-desktop .top-inner{height:100%;align-items:center}.reserve-desktop .topbar::before{content:none}.reserve-desktop nav{align-items:stretch}.reserve-desktop .nav-item{display:flex;align-items:center}}
.reserve-mobile .app,.reserve-devices .app{background:transparent}
.reserve-mobile .topbar,.reserve-devices .topbar{background:transparent;border:0}
.reserve-mobile .brand .reserve-wordmark,.reserve-devices .brand .reserve-wordmark{width:132%;left:-16%;height:auto;max-width:none;mix-blend-mode:screen;transform:translateY(-46%)}
.reserve-mobile .hero{background:linear-gradient(160deg,#191919,#101010);border-color:#303030;box-shadow:none}
.reserve-mobile .metric{--metric-accent:#e9d9bd;background:#111;border-color:#292929;box-shadow:none}
.reserve-mobile .metric.has-value{background:#161616;border-color:#555;box-shadow:none}
.reserve-mobile .metric span{color:#bcbcbc}
.reserve-mobile .main-tabs button.active{color:#fff;box-shadow:inset 0 -2px #e9d9bd;background:#ffffff03}
.reserve-mobile .mobile-avatar{background:#191919;border-color:#444}
.reserve-mobile .mobile-profile-menu,.reserve-mobile .mobile-modal{background:#141414;border-color:#343434;box-shadow:0 18px 55px #0009}
.reserve-mobile .secondary,.reserve-devices .secondary{background:#1b1b1b;border-color:#383838;color:#f3f3f3}
.reserve-mobile .mobile-trades-shell{background:#0a0a0a}
.reserve-mobile .mobile-trades-table th{background:#151515}
.reserve-auth{background:radial-gradient(ellipse at 50% 45%,#1c1c1c 0,#101010 35%,#080808 75%);background-attachment:fixed}
.reserve-auth .auth-card{background:#0e0e0ef5;border-color:#363636;border-radius:20px;box-shadow:0 24px 70px #0005}
.reserve-auth .wordmark{width:280px;max-width:calc(100% + 40px);height:102px;object-fit:cover;object-position:center;margin-left:-34px;margin-bottom:22px;mix-blend-mode:screen}
.reserve-auth .eyebrow{color:#e9d9bd}
.reserve-auth .primary{background:#e9d9bd;color:#171717;box-shadow:none}
.reserve-auth .secondary{color:#f3f3f3;background:#1b1b1b;border-color:#444}
.reserve-auth a{color:#f3f3f3}
.reserve-auth input{background:#111;border-color:#3b3b3b;color:#f3f3f3}
.reserve-auth input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #111 inset;-webkit-text-fill-color:#f3f3f3}
.reserve-auth .telegram-profile{background:#252525;color:#e9d9bd}
.pnl-card{background:#101010;border-color:#292929}.pnl-heading h2{color:#f3f3f3}.pnl-period .button,.pnl-custom [data-date-field]{background:#171717;border-color:#333;color:#eee}
.chart-toggle,.inline-chart-close{border-color:#444;background:#ffffff04;color:#eee}.chart-toggle:hover,.inline-chart-close:hover{background:#ffffff0c}.chart-toggle[aria-expanded=true]{background:#ffffff10}
.inline-chart-bar,.inline-chart-foot{background:#151515}.chart-fill-tooltip{background:#202020f5;color:#f3f3f3}
@media(min-width:701px){.reserve-mobile .app{background:#0b0b0b;border-color:#292929}}
@media(prefers-reduced-motion:no-preference){button,a{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}}

/* Dark table body and calendar inset, with readable headers and directional labels. */
.reserve-desktop .trades-shell{background:#0a0a0a}.reserve-desktop .trades-shell th{background:#151515}.trade-side.trade-long,.mobile-deal-side.trade-long{color:var(--green)}.trade-side.trade-short,.mobile-deal-side.trade-short{color:var(--red)}
.pnl-calendar-surface{background:#0c0c0c;border:1px solid #ffffff0a;border-radius:8px;padding:14px}.pnl-calendar-surface .pnl-day{background:#0a0a0a}.pnl-calendar-surface .pnl-day.gain{background:#44cba00b;border-color:#44cba025}.pnl-calendar-surface .pnl-day.loss{background:#ee71890b;border-color:#ee718925}.pnl-calendar-surface .pnl-day.selected,.pnl-calendar-surface .pnl-day:hover:not(:disabled){border-color:var(--accent)}
@media(max-width:700px){.pnl-calendar-surface{padding:7px}.pnl-calendar-surface .pnl-day{padding:5px 3px}}
/* Clearly distinguish the track, thumb and enabled state. */
.switch{background:#3d434b;box-shadow:inset 0 0 0 1px #78808a}
.switch:after{background:#dfe3e8;box-shadow:0 1px 3px #0007}
.switch[aria-checked=true]{background:#536e60;box-shadow:inset 0 0 0 1px #9ab3a2}
.switch[aria-checked=true]:after{background:#f1f5f0}
.switch:hover{box-shadow:inset 0 0 0 1px #b8c0c8}
.switch:focus-visible{outline:2px solid #e9d9bd;outline-offset:3px}
.rule.disabled{opacity:1}.rule.disabled .rule-content,.rule.disabled .rule-icon{opacity:.55}
body input[type=checkbox],.reserve-mobile .alert-rule input[type=checkbox],.reserve-mobile .mobile-modal input[type=checkbox],.webpush-panel input[type=checkbox],.settings-screen .setting-line input[type=checkbox]{accent-color:#19734f}

.trade-percent{white-space:nowrap;font-variant-numeric:tabular-nums}.mobile-deal-pnl{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;font-size:10px}.mobile-deal-pnl .trade-percent{font-size:9px}

/* Quiet signature in the footer; crop only the supplied image's empty margins. */
.reserve-desktop{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.reserve-desktop>.topbar{flex-shrink:0}
.reserve-desktop>#app{flex:1 0 auto;min-height:0;width:100%}
.reserve-desktop>.footer{flex-shrink:0;width:100%;margin:0 auto}
.reserve-desktop .footer .footer-brand{display:flex;margin-left:auto;flex:0 0 auto}
.reserve-desktop .footer-brand img{display:block;width:260px;height:34px;object-fit:cover;object-position:50% 48%;opacity:.28;mix-blend-mode:screen}
@media(max-width:650px){.reserve-desktop .footer-brand img{width:170px;height:24px}.reserve-desktop .footer{gap:10px}}
.reserve-desktop .footer{min-height:76px;align-items:center;font-size:11px;line-height:16px}
.reserve-desktop .footer>span{align-items:center;font-size:11px;line-height:16px}
.reserve-desktop .footer .footer-brand{align-self:center;line-height:0}

/* Mobile uses its full viewport; the safe area is padding, never an overlay. */
html:has(.reserve-mobile){height:auto;min-height:100%;overflow-x:clip;overflow-y:auto}
.reserve-mobile{position:relative;inset:auto;min-height:100svh;height:auto;overflow:visible;isolation:isolate}
.reserve-mobile:before{content:"";position:fixed;pointer-events:none;z-index:0;inset:0;background:radial-gradient(ellipse 115vw 72vh at 100% 0%,#ffffff0d 0%,#ffffff07 24%,#ffffff02 55%,transparent 80%)}
.reserve-mobile .app{position:relative;z-index:1;zoom:1;width:100%;max-width:700px;height:auto;min-height:100svh;overflow:visible;border:0;box-shadow:none;background:transparent;padding:calc(env(safe-area-inset-top) + 8px) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
.reserve-mobile .topbar{min-height:72px;margin-bottom:6px}
.reserve-mobile .topbar .brand{width:210px;height:72px;overflow:visible}
.reserve-mobile .brand .reserve-wordmark{width:100%;left:0;top:27px;transform:translateY(-50%);mix-blend-mode:normal;filter:drop-shadow(2px -2px 8px #ffffff1a)}
.reserve-mobile .brand-caption{position:absolute;left:0;bottom:2px;color:#e9d9bd;font-size:9px;font-weight:600;letter-spacing:1.25px;line-height:13px;white-space:nowrap}
.mobile-watermark{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:4px;z-index:5;pointer-events:none;user-select:none;line-height:0;opacity:.18;mix-blend-mode:screen}
.mobile-watermark img{display:block;width:210px;height:29px;object-fit:cover;object-position:50% 48%}
.reserve-mobile .app:after{content:"";display:block;height:calc(env(safe-area-inset-bottom) + 8px)}
.reserve-mobile .welcome{margin-bottom:6px}
.reserve-mobile .welcome h1{font-size:23px;margin:0}
.reserve-mobile .wallet-actions .icon-button{width:36px;height:36px;border-radius:9px}
.reserve-mobile .connection-state{margin-bottom:10px}
.reserve-mobile .hero{padding:16px}
.reserve-mobile .hero-amount{font-size:clamp(29px,8vw,38px);margin:12px 0 8px}
.reserve-mobile .metrics{gap:8px;margin:10px 0 14px}
.reserve-mobile .metric{min-height:66px;padding:11px}
.reserve-mobile .metric strong{font-size:21px;margin-top:5px}
.mobile-workbench,.mobile-account-rail,.mobile-workspace{min-width:0}
#landscape-accounts{display:none}
.mobile-position-chart{margin-top:10px}
.mobile-position-chart .chart-toggle{min-height:34px;font-size:11px;padding:6px 9px}
.mobile-position-chart .chart-slot{margin-top:8px}
@media(min-width:640px) and (orientation:landscape){
  html:has(.reserve-mobile){height:100%;overflow:hidden}
  .reserve-mobile{height:100dvh;min-height:0;overflow:hidden}
  .reserve-mobile .app{display:flex;flex-direction:column;max-width:none;height:100dvh;min-height:0;padding-top:calc(env(safe-area-inset-top) + 6px);padding-bottom:0;overflow:hidden}
  .reserve-mobile .app:has(#login:not([hidden])){overflow-y:auto}
  .reserve-mobile .topbar{flex:none;min-height:56px;margin-bottom:2px}
  .reserve-mobile .topbar .mobile-profile-wrap{align-self:flex-start;margin-top:2px}
  .reserve-mobile .topbar #settings-button{width:36px;height:36px}
  .reserve-mobile .topbar .brand{width:172px;height:56px}
  .reserve-mobile .brand .reserve-wordmark{top:21px}
  .reserve-mobile .brand-caption{font-size:8px;letter-spacing:.8px;bottom:0}
  .reserve-mobile .app:after{display:none}
  .landscape-account-list:after,.mobile-workspace>#content:after{content:"";display:block;height:env(safe-area-inset-bottom)}
  .reserve-mobile #dashboard,.reserve-mobile #wallet-screen{display:flex;flex-direction:column;flex:1;min-height:0}
  .reserve-mobile .welcome{position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:calc(max(14px,env(safe-area-inset-right)) + 50px);margin:0}
  .reserve-mobile .welcome h1{display:none}
  .reserve-mobile .connection-state{font-size:10px;min-height:20px;margin:0 0 6px;padding:0;flex:none}
  .mobile-workbench{display:grid;grid-template-columns:minmax(190px,28%) minmax(0,1fr);gap:14px;flex:1;min-height:0}
  .mobile-account-rail{display:flex;flex-direction:column;min-height:0}
  .reserve-mobile #wallet-summary{flex:none}
  .reserve-mobile .hero{padding:12px;border-radius:10px}
  .reserve-mobile .hero-top,.reserve-mobile .hero-meta{font-size:10px}
  .reserve-mobile .hero-amount{font-size:27px;letter-spacing:-1px;margin:8px 0 5px}
  .reserve-mobile .hero-amount small{font-size:10px}
  #landscape-accounts{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:12px}
  #landscape-accounts h2{font-size:12px;margin:0 0 8px;font-weight:600}
  .landscape-account-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;padding-right:4px}
  .landscape-account-list .account-card{border-radius:8px;padding:9px;gap:5px 7px;margin-bottom:7px}
  .landscape-account-list .exchange-logo{width:18px;height:18px}
  .landscape-account-list .account-name,.landscape-account-list .account-total{font-size:11px}
  .landscape-account-list .account-heading{flex-wrap:wrap;gap:3px}
  .landscape-account-list .account-name small{display:none}
  .landscape-account-list .account-breakdown{gap:3px 7px;font-size:10px}
  .landscape-account-list .account-market{font-size:10px}
  .mobile-workspace{display:flex;flex-direction:column;min-height:0}
  .reserve-mobile .metrics{margin:0 0 7px;flex:none}
  .reserve-mobile .metric{min-height:48px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:8px}
  .reserve-mobile .metric span{font-size:11px}
  .reserve-mobile .metric strong{font-size:19px;margin:0}
  .reserve-mobile .main-tabs{flex:none;padding:0;gap:4px}
  .reserve-mobile .main-tabs button{min-height:36px;font-size:11px;padding:6px 4px}
  .reserve-mobile .main-tabs br{display:none}
  .reserve-mobile .section-head{flex:none;margin:8px 0}
  .reserve-mobile .section-head h2{font-size:14px}
  .mobile-workspace>#content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start;scrollbar-width:thin;padding:9px 5px 10px 0}
  .mobile-workspace>.install-help,.mobile-workspace>footer{display:none}
  .reserve-mobile .mobile-trading-group{gap:8px;margin-bottom:10px}
  .reserve-mobile .mobile-trading-group .mobile-group-title{font-size:14px;margin:0}
  .reserve-mobile .mobile-trading-group .empty{min-height:80px;padding:14px}
  .reserve-mobile .row-title,.reserve-mobile .row-number{font-size:12px}
  .reserve-mobile .row-sub,.reserve-mobile .row-state{font-size:10px}
  .reserve-mobile .position-card{padding:12px}
  .reserve-mobile .position-data{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;padding-top:10px}
  .reserve-mobile .settings-screen{min-height:0;overflow-y:auto}
}

/* The health indicator shares the wallet title row on phones. */
.reserve-mobile .welcome>div:first-child{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.reserve-mobile .welcome .connection-state{margin:0;min-height:24px;padding:0;font-size:10px;gap:5px}
.reserve-mobile .welcome{margin-bottom:12px}
@media(orientation:landscape) and (min-width:640px){.reserve-mobile .welcome{margin-bottom:0}.reserve-mobile .welcome .connection-state{max-width:130px;font-size:9px}}