@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#0c1017;
  --panel:#131923;
  --raised:#1a2230;
  --line:#26303e;
  --text:#f1f5fa;
  --muted:#8795a9;
  --accent:#89bcff;
  --accent-dark:#132d4c;
  --good:#8de2bd;
  --warm:#efbf80;
  --danger:#f0a2a0;
  font:14px/1.5 Inter,"Segoe UI",Arial,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 70% 0,#16283b44,transparent 45%),var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit
}
button:disabled {
  cursor:wait;
  opacity:.55
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-weight:550;
  font-size:28px;
  letter-spacing:-.9px;
  line-height:1.25
}
h2 {
  font-size:15px;
  font-weight:550;
  letter-spacing:-.2px
}
h3 {
  font-weight:500
}
small {
  font-size:11px
}
.muted,.small-note {
  color:var(--muted)
}
.small-note {
  font-size:11px;
  line-height:1.7
}
.app-shell {
  min-height:100vh
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:218px;
  padding:30px 17px 20px;
  background:#0c1119;
  border-right:1px solid #202936;
  display:flex;
  flex-direction:column;
  z-index:20
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  white-space:nowrap
}
.brand strong {
  font-size:21px;
  letter-spacing:-.65px;
  font-weight:600
}
.brand>span {
  font-size:8px;
  color:var(--accent);
  padding:3px 5px;
  border-radius:4px;
  background:#1b2a3f;
  letter-spacing:.4px
}
.navigation {
  display:grid;
  gap:7px;
  margin-top:39px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:45px;
  background:none;
  border:1px solid transparent;
  color:var(--muted);
  border-radius:9px;
  padding:11px 13px;
  font-size:12px;
  text-align:left;
  transition:.15s
}
.nav-item:hover {
  background:#172131;
  color:var(--text)
}
.nav-item.active {
  background:linear-gradient(100deg,#1b304b,#152235);
  border-color:#2d476a;
  color:#c5dfff
}
.nav-item svg {
  width:18px;
  height:18px
}
.nav-count {
  margin-left:auto;
  background:#2a4161;
  color:#b6d6ff;
  border-radius:5px;
  font-size:9px;
  padding:1px 5px
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:45px
}
.service-label {
  font-size:8px;
  letter-spacing:1.4px;
  color:#617187;
  display:block;
  margin:0 11px 12px
}
.connection-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 9px;
  background:none;
  border:0;
  color:#d2dce9;
  width:100%;
  text-align:left;
  font-size:11px
}
.connection-row>span:nth-child(2) {
  flex:1
}
.connection-row small {
  display:block;
  color:#7e8da2;
  margin-top:2px;
  font-size:9px
}
.service-icon {
  display:grid;
  place-items:center;
  border:1px solid #364258;
  color:#d6e3f5;
  width:29px;
  height:30px;
  border-radius:8px;
  background:#1a2636;
  font-size:13px;
  font-weight:650;
  flex-shrink:0
}
.service-icon.telegram {
  background:#17334d;
  color:#a7d8ff;
  border-color:#285575
}
.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#627083;
  flex-shrink:0
}
.dot.connected {
  background:var(--good);
  box-shadow:0 0 9px #6aebb222
}
.local-badge {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:9px;
  color:#718399;
  margin:22px 10px 0;
  padding-top:17px;
  border-top:1px solid #222b37
}
.local-badge .dot {
  width:4px;
  height:4px
}
.workspace {
  margin-left:218px
}
.topbar {
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 35px;
  border-bottom:1px solid #222c39;
  font-size:11px;
  background:#10162077
}
.crumb {
  color:#53637b;
  margin:0 13px
}
.sync {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#8b9bb1
}
.sync .dot {
  width:5px;
  height:5px
}
main {
  padding:31px 35px;
  max-width:1550px;
  margin:auto
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px
}
.title-line {
  display:flex;
  align-items:center;
  gap:13px
}
.page-heading p {
  font-size:11px;
  color:#8393a8;
  margin-top:9px
}
.page-heading p>span {
  padding:0 7px;
  color:#4c5c73
}
.heading-actions {
  display:flex;
  gap:8px;
  flex-shrink:0
}
.button {
  min-height:39px;
  border:1px solid #364357;
  border-radius:8px;
  background:#1b2636;
  color:#dce7f5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  font-size:11px;
  font-weight:550;
  transition:background .15s,border-color .15s,transform .15s
}
.button:hover {
  background:#26374f;
  border-color:#4a6182
}
.button:active {
  transform:translateY(1px)
}
.button svg {
  width:15px;
  height:15px
}
.button.primary {
  background:#a5ccff;
  color:#10213a;
  border-color:#b1d3ff;
  box-shadow:0 2px 13px #78aaf511
}
.button.primary:hover {
  background:#c1ddff;
  border-color:#c1ddff
}
.button.danger {
  color:#e8b0ac;
  background:#2a2027;
  border-color:#4b333e
}
.button.danger:hover {
  background:#412730;
  border-color:#79515a
}
.button.small {
  min-height:29px;
  padding:6px 9px;
  font-size:10px
}
.button.full {
  width:100%;
  justify-content:space-between
}
.button.icon-button {
  width:39px;
  padding:9px;
  background:#131d2b
}
.status-chip {
  font-size:9px;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#222b38;
  color:#a2afc0;
  border:1px solid #3b4657;
  border-radius:5px;
  padding:4px 8px
}
.status-chip:before {
  content:"";
  width:5px;
  height:5px;
  background:currentColor;
  border-radius:50%
}
.status-chip.running {
  color:var(--good);
  background:#1b352c;
  border-color:#305847
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:24px
}
.metric {
  position:relative;
  overflow:hidden;
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
  background:linear-gradient(135deg,#161e2b,#121924)
}
.balance-metric {
  background:radial-gradient(ellipse at 100% 5%,#325b9166,transparent 75%),linear-gradient(135deg,#18273a,#152031);
  border-color:#355075
}
.metric-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#9cabc0;
  gap:5px
}
.metric-label svg {
  width:16px;
  height:16px;
  color:#6d85a4
}
.balance-metric .metric-label {
  color:#b5cce9
}
.metric>div {
  display:flex;
  gap:7px;
  align-items:baseline;
  margin:19px 0 9px;
  min-width:0
}
.metric strong {
  font-size:30px;
  font-weight:500;
  letter-spacing:-1px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}
.metric>div>span {
  font-size:10px;
  color:#6e829f
}
.metric small {
  font-size:9px;
  color:#70839d
}
.balance-metric small {
  color:#8eaacb
}
.panel {
  background:linear-gradient(135deg,#151d29,#121922);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  min-width:0
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:21px 22px 18px
}
.section-heading p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}
.section-heading>.muted {
  font-size:10px
}
.count-label {
  font-size:9px;
  background:#223349;
  color:#a7c5ec;
  border:1px solid #324863;
  padding:2px 6px;
  border-radius:5px;
  margin-left:5px;
  vertical-align:middle;
  font-weight:400
}
.text-button {
  font-size:10px;
  color:#8eafd8;
  border:0;
  background:none;
  padding:6px 0;
  white-space:nowrap
}
.text-button:hover {
  color:#d3e8ff
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:19px
}
.main-column,.right-column {
  min-width:0
}
.section-gap {
  margin-top:18px
}
.budget-value {
  display:flex;
  gap:7px;
  align-items:baseline;
  margin:0 22px 17px
}
.budget-value strong {
  font-size:30px;
  letter-spacing:-1px;
  font-weight:500
}
.budget-value>span {
  font-size:10px;
  color:var(--muted)
}
progress {
  appearance:none;
  display:block;
  width:calc(100% - 44px);
  height:5px;
  margin:0 22px;
  background:#26364c;
  border:0;
  border-radius:10px
}
progress::-webkit-progress-bar {
  background:#26364c;
  border-radius:10px
}
progress::-webkit-progress-value {
  background:#8bbdff;
  border-radius:10px
}
progress::-moz-progress-bar {
  background:#8bbdff;
  border-radius:10px
}
.budget-remaining {
  display:flex;
  justify-content:space-between;
  margin:12px 22px 21px;
  font-size:10px;
  color:var(--muted)
}
.budget-remaining strong {
  font-size:10px;
  font-weight:500;
  color:#cee2fd
}
.limits-list {
  margin:0
}
.limits-list>div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  margin:14px 0
}
.limits-list dt {
  color:#8395ad
}
.limits-list dd {
  margin:0;
  color:#c6d8ef;
  font-weight:500
}
.budget-panel>.limits-list {
  margin:0 22px;
  padding-top:2px;
  border-top:1px solid var(--line)
}
.budget-panel>.button {
  width:calc(100% - 44px);
  margin:7px 22px 22px
}
.opportunities-panel {
  margin-top:18px;
  padding-bottom:19px
}
.opportunities-panel>.button {
  width:calc(100% - 38px);
  margin:12px 19px 0;
  font-size:10px;
  min-height:35px
}
.opportunity {
  display:flex;
  gap:10px;
  align-items:center;
  padding:11px 20px;
  border-top:1px solid #253041
}
.opportunity img {
  width:41px;
  height:43px;
  object-fit:contain;
  background:#1b2b43;
  border-radius:10px
}
.opportunity>div {
  flex:1;
  min-width:0
}
.opportunity strong {
  display:block;
  font-size:10px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.opportunity small {
  display:block;
  font-size:9px;
  color:#8195ae;
  margin-top:3px
}
.opportunity .row-action {
  color:#b0d1ff
}
.empty {
  padding:29px 20px;
  text-align:center;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  color:var(--muted)
}
.empty-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:44px;
  border-radius:11px;
  background:#1d2b3e;
  color:#819ebf;
  border:1px solid #344863;
  margin-bottom:3px
}
.empty strong {
  font-size:12px;
  font-weight:500;
  color:#b8c9df
}
.empty p {
  font-size:10px;
  max-width:310px;
  line-height:1.7
}
.empty .button {
  margin-top:5px
}
.table-scroll {
  overflow-x:auto
}
.data-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap;
  font-size:10px
}
.data-table th {
  font-size:9px;
  font-weight:400;
  color:#71869f;
  background:#131c29;
  padding:11px 12px;
  border-block:1px solid #263448
}
.data-table td {
  padding:13px 12px;
  border-top:1px solid #253041;
  font-variant-numeric:tabular-nums
}
.data-table th:first-child,.data-table td:first-child {
  padding-left:22px
}
.data-table th:last-child,.data-table td:last-child {
  padding-right:19px
}
.data-table tr:hover td {
  background:#19263855
}
.collection-name {
  display:flex;
  align-items:center;
  gap:10px;
  max-width:240px
}
.collection-name img {
  width:36px;
  height:39px;
  object-fit:contain;
  border-radius:10px;
  background:radial-gradient(ellipse at 30% 20%,#34466b,#1d293e)
}
.collection-name strong {
  font-size:11px;
  font-weight:500;
  white-space:normal;
  display:block;
  min-width:90px
}
.collection-name small {
  color:#6e839f;
  font-size:9px;
  display:block;
  margin-top:3px
}
.row-action {
  padding:5px 7px;
  border:0;
  background:transparent;
  color:#9db9da;
  border-radius:6px;
  font-size:14px;
  line-height:1.2
}
.row-action:hover {
  background:#293e58
}
.pill {
  display:inline-block;
  font-size:8px;
  padding:4px 6px;
  line-height:1.4;
  border:1px solid #37485d;
  border-radius:5px;
  background:#223042;
  color:#a5bddb;
  white-space:nowrap
}
.pill.leading {
  color:#92d5b6;
  border-color:#375b4e;
  background:#203c32
}
.pill.error,.pill.unknown,.pill.reconciling {
  color:#e8bcb0;
  border-color:#694846;
  background:#3a292c
}
.pill.closed,.pill.paused,.pill.disabled,.pill.stopped,.pill.completed {
  color:#8fa0b6;
  border-color:#3a4759;
  background:#222d3c
}
.pill.budget,.pill.profit_limit,.pill.manual {
  color:#e4c28c;
  border-color:#5f5038;
  background:#352e22
}
.positive {
  color:var(--good)
}
.negative {
  color:#d69b99
}
.rules-scroll {
  max-height:286px;
  overflow:auto
}
.rules-scroll th {
  position:sticky;
  top:0;
  z-index:2
}
.catalog-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:27px 0 11px
}
.filter-tabs {
  display:flex;
  background:#111a28;
  border:1px solid #2a384b;
  border-radius:9px;
  padding:4px;
  gap:3px
}
.filter-tabs button {
  padding:7px 11px;
  border:0;
  background:none;
  color:#899eb7;
  border-radius:6px;
  font-size:10px
}
.filter-tabs button.active {
  background:#2b425f;
  color:#c8e0ff
}
.search-field {
  display:flex;
  gap:9px;
  align-items:center;
  background:#121c29;
  border:1px solid #2c3b50;
  border-radius:9px;
  padding:0 12px;
  max-width:260px;
  color:var(--muted)
}
.search-field>input {
  border:0;
  background:none;
  min-height:36px;
  padding:9px 0;
  font-size:10px;
  outline:none
}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:13px;
  margin-top:17px
}
.catalog-card {
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid #2b394c;
  border-radius:14px;
  background:#151e2c;
  min-width:0;
  transition:transform .15s,border-color .15s
}
.catalog-card:hover {
  transform:translateY(-3px);
  border-color:#5d7da4
}
.catalog-image {
  position:relative;
  height:142px;
  background:radial-gradient(ellipse at 45% 10%,#45649a55,transparent 65%),linear-gradient(150deg,#243249,#172335);
  display:grid;
  place-items:center;
  border-bottom:1px solid #30415a66
}
.catalog-image:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,#151e2c,transparent 40%)
}
.catalog-image img {
  position:relative;
  width:110px;
  height:113px;
  object-fit:contain;
  filter:drop-shadow(0 12px 15px #0005);
  transform:rotate(-6deg);
  z-index:1;
  transition:transform .2s
}
.catalog-card:hover img {
  transform:rotate(0deg) scale(1.04)
}
.selected-flag {
  position:absolute;
  top:10px;
  left:10px;
  font-size:8px;
  padding:3px 6px;
  background:#132d45d9;
  color:#b4d7ff;
  border:1px solid #3f6085;
  border-radius:4px;
  z-index:3
}
.catalog-content {
  padding:14px
}
.catalog-content h3 {
  font-size:12px;
  margin-bottom:12px;
  min-height:18px
}
.catalog-price-row {
  display:flex;
  justify-content:space-between;
  gap:7px;
  font-size:9px;
  margin:6px 0;
  color:#8095b2
}
.catalog-price-row strong {
  font-weight:500;
  color:#c3d8f2
}
.catalog-content>.button {
  width:100%;
  margin-top:11px;
  font-size:10px;
  min-height:31px;
  padding:7px 8px
}
.catalog-content>.button:disabled {
  cursor:default;
  opacity:.55
}
.catalog-grid>.empty {
  grid-column:1/-1
}
.event-list {
  padding:0 22px 8px
}
.event {
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 0;
  border-top:1px solid #243143
}
.event-symbol {
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:8px;
  background:#263d54;
  color:#a3ceff;
  font-size:11px;
  flex-shrink:0
}
.event-symbol.purchase {
  background:#224537;
  color:var(--good)
}
.event-copy {
  flex:1;
  min-width:0
}
.event-title {
  font-size:10px;
  color:#c0cfe1;
  line-height:1.7
}
.event-meta {
  display:block;
  font-size:9px;
  margin-top:4px;
  color:#7389a5
}
.event time {
  font-size:8px;
  color:#6c829e;
  padding-top:3px;
  white-space:nowrap
}
.order-card {
  display:flex;
  gap:13px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #263348;
  padding:18px 22px
}
.order-card>img {
  width:47px;
  height:49px;
  object-fit:contain;
  border-radius:10px;
  background:#24324a
}
.order-copy {
  flex:1;
  min-width:0
}
.order-copy h3 {
  font-size:12px;
  margin-bottom:6px
}
.order-copy p {
  font-size:10px;
  color:#8498b2;
  margin-top:5px
}
.order-copy code {
  font-size:8px;
  color:#5e7899;
  overflow-wrap:anywhere
}
.order-price {
  font-size:18px;
  font-weight:500;
  letter-spacing:-.3px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.order-price+small {
  display:block;
  font-size:8px;
  color:#7088a7;
  margin-top:5px
}
.pending-card {
  padding:18px;
  border:1px solid #755a36;
  border-radius:12px;
  background:#30271d;
  color:#dec192;
  margin-bottom:15px;
  font-size:11px
}
.pending-card p {
  font-size:10px;
  line-height:1.7;
  margin:8px 0 12px
}
.settings-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 305px;
  gap:20px
}
.form-panel {
  padding:25px
}
.setting-row {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid #2a374b
}
.setting-row>span:first-child {
  flex:1
}
.setting-row strong {
  font-size:12px;
  font-weight:500;
  display:block;
  color:#d3e1f2
}
.setting-row small {
  display:block;
  font-size:10px;
  color:#7d93af;
  margin-top:6px
}
.input-unit {
  display:flex;
  align-items:center;
  gap:9px;
  padding-right:12px;
  border:1px solid #364d6b;
  border-radius:8px;
  background:#101a29;
  width:145px;
  flex-shrink:0
}
.input-unit>input {
  width:105px;
  padding:11px 10px;
  border:0;
  background:none;
  min-height:43px;
  font-size:13px;
  color:#d0e4ff;
  appearance:textfield;
  outline:none
}
.input-unit>input::-webkit-inner-spin-button {
  appearance:none
}
.input-unit>span {
  font-size:9px;
  color:#738dad
}
.form-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:22px
}
.form-footer p {
  font-size:10px;
  color:#7e93ae;
  max-width:280px;
  line-height:1.7
}
.connection-heading {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px
}
.form-panel>.muted {
  font-size:11px;
  margin:13px 0 20px;
  line-height:1.6
}
.form-panel>.limits-list {
  margin-top:19px
}
.notice {
  font-size:11px;
  line-height:1.65;
  color:#b1c8e7;
  background:#172c45;
  border:1px solid #385679;
  padding:13px 16px;
  border-radius:10px;
  margin-bottom:23px
}
.notice.error {
  color:#e2b7ac;
  background:#33242a;
  border-color:#69424b
}
.notice.test {
  color:#e7c48b;
  background:#332b1f;
  border-color:#785e34
}
.notice .button {
  float:right;
  margin-left:10px
}
.preview-tag {
  font-size:9px;
  font-weight:600;
  margin-right:9px;
  letter-spacing:.5px
}
.field-gap {
  margin-top:21px
}
label {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:11px;
  color:#a8bdd7
}
input,select {
  width:100%;
  min-height:42px;
  border:1px solid #354d6c;
  border-radius:8px;
  background:#101b2a;
  color:#d9e8fa;
  padding:10px 12px;
  accent-color:#9ac9ff
}
input::placeholder {
  font-size:11px;
  color:#526f93
}
input:focus,select:focus {
  outline:none;
  border-color:#8ebfff
}
dialog {
  padding:25px;
  background:#141f2e;
  color:#e0ecfb;
  border:1px solid #3a526f;
  border-radius:16px;
  width:min(450px,calc(100% - 30px));
  max-height:90dvh;
  overflow:auto;
  box-shadow:0 30px 120px #0008
}
dialog::backdrop {
  background:#050a12cc;
  backdrop-filter:blur(6px)
}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:23px
}
.dialog-heading h2 {
  font-size:20px
}
.close-button {
  width:29px;
  height:29px;
  border-radius:8px;
  border:1px solid #365070;
  background:#1a2b40;
  color:#a6c6ee;
  font-size:20px;
  line-height:1
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:23px
}
.dialog-actions .subtle-button {
  margin-right:auto;
  background:none
}
.checkbox-label {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  margin:23px 0;
  font-size:11px;
  line-height:1.6
}
.checkbox-label input {
  width:15px;
  height:15px;
  min-height:0;
  flex-shrink:0;
  margin:2px 0
}
.checkbox-label small {
  display:block;
  color:#728daf;
  margin-top:4px;
  font-size:10px
}
dialog p {
  font-size:11px;
  line-height:1.75
}
dialog .small-note {
  margin-top:15px
}
footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:0 35px 24px;
  color:#4e6685;
  font-size:9px;
  max-width:1550px;
  margin:auto
}
#toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  padding:13px 19px;
  background:#c0ddff;
  border:1px solid #9ccaff;
  color:#102b4b;
  font-size:11px;
  line-height:1.6;
  border-radius:10px;
  max-width:calc(100% - 30px);
  box-shadow:0 12px 50px #0006
}
#toast.error {
  color:#492327;
  background:#f0c6bf;
  border-color:#ce9a96
}
@media(max-width:1200px) {
  .sidebar {
    width:195px;
    padding-inline:14px
  }
  .workspace {
    margin-left:195px
  }
  .brand strong {
    font-size:19px
  }
  .brand>span {
    display:none
  }
  .topbar {
    padding-inline:25px
  }
  main {
    padding:28px 25px
  }
  .dashboard-grid {
    grid-template-columns:minmax(0,1fr) 250px;
    gap:15px
  }
  .metric {
    padding:17px 15px
  }
  .metric strong {
    font-size:27px
  }
  .metric-label {
    font-size:9px
  }
  .page-heading {
    gap:13px
  }
  h1 {
    font-size:25px
  }
  .heading-actions .button {
    font-size:10px;
    padding:9px 11px
  }
  .section-heading {
    padding:19px 18px 16px
  }
  .settings-grid {
    grid-template-columns:minmax(0,1fr) 265px
  }
  .data-table td,.data-table th {
    padding-inline:10px
  }
  .collection-name strong {
    font-size:10px
  }
  .catalog-grid {
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr))
  }
  .order-card {
    padding:17px 18px
  }
  .service-label {
    font-size:7px
  }
  
}
@media(max-width:1000px) {
  .dashboard-grid {
    grid-template-columns:1fr
  }
  .right-column {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
    align-items:start
  }
  .opportunities-panel {
    margin-top:0
  }
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .page-heading {
    align-items:flex-start
  }
  .heading-actions {
    flex-wrap:wrap;
    justify-content:flex-end
  }
  .page-heading p {
    max-width:260px;
    line-height:1.8
  }
  .settings-grid {
    grid-template-columns:1fr
  }
  .settings-grid>aside {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
    align-items:start
  }
  .settings-grid>aside>.section-gap {
    margin:0
  }
  .title-line {
    gap:10px;
    flex-wrap:wrap
  }
  .metric-label {
    font-size:10px
  }
  .catalog-image {
    height:145px
  }
  
}
@media(max-width:700px) {
  .sidebar {
    inset:auto 0 0;
    width:100%;
    height:calc(67px + env(safe-area-inset-bottom));
    padding:0 3px env(safe-area-inset-bottom);
    background:#101927f5;
    backdrop-filter:blur(18px);
    border:0;
    border-top:1px solid #30435d;
    display:block
  }
  .brand,.sidebar-bottom {
    display:none
  }
  .navigation {
    display:flex;
    gap:0;
    justify-content:space-around;
    margin:0;
    height:66px
  }
  .nav-item {
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8px 3px;
    gap:5px;
    border:0;
    border-radius:0;
    font-size:8px;
    min-width:0
  }
  .nav-item svg {
    width:19px;
    height:19px
  }
  .nav-item.active {
    background:none;
    color:#a5d0ff;
    border:0
  }
  .nav-item.active:before {
    content:"";
    position:absolute;
    top:0;
    height:2px;
    left:24%;
    width:52%;
    background:#9ac9ff
  }
  .nav-count {
    display:none
  }
  .workspace {
    margin:0
  }
  .topbar {
    height:54px;
    padding:0 16px
  }
  .mobile-brand {
    display:block;
    color:#c5e0ff;
    font-size:18px;
    letter-spacing:-.5px;
    font-weight:600;
    margin-right:4px
  }
  .topbar .muted,.topbar .crumb {
    display:none
  }
  .topbar #pageTitle {
    font-size:9px;
    color:#7292b7
  }
  .sync {
    font-size:8px;
    max-width:130px
  }
  .sync .dot {
    width:4px;
    height:4px
  }
  .sync #lastSync {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  main {
    padding:23px 15px 20px
  }
  .page-heading {
    gap:12px;
    margin-bottom:20px;
    flex-wrap:wrap
  }
  .page-heading>div:first-child {
    flex:1;
    min-width:180px
  }
  .page-heading h1 {
    font-size:27px
  }
  .title-line {
    gap:9px
  }
  .page-heading p {
    font-size:9px;
    margin-top:8px;
    max-width:none
  }
  .page-heading p>span {
    padding:0 3px
  }
  .heading-actions {
    gap:7px;
    justify-content:flex-start;
    width:100%
  }
  .heading-actions .button {
    min-height:36px;
    font-size:10px;
    padding:8px 12px
  }
  .heading-actions .primary {
    margin-left:auto
  }
  .heading-actions .icon-button {
    width:36px;
    padding:8px
  }
  .status-chip {
    font-size:8px;
    padding:4px 7px
  }
  .metrics {
    gap:9px;
    margin-bottom:17px
  }
  .metric {
    padding:15px 13px;
    border-radius:12px
  }
  .metric-label {
    font-size:9px
  }
  .metric-label svg {
    width:14px;
    height:14px
  }
  .metric strong {
    font-size:26px
  }
  .metric>div {
    gap:6px;
    margin-top:17px
  }
  .metric small {
    font-size:8px
  }
  .metric>div>span {
    font-size:9px
  }
  .dashboard-grid {
    gap:16px
  }
  .right-column {
    grid-template-columns:1fr;
    gap:16px
  }
  .section-heading {
    padding:19px 16px 16px
  }
  .section-heading h2 {
    font-size:14px
  }
  .section-heading .text-button {
    font-size:9px
  }
  .section-heading>.muted {
    font-size:8px;
    max-width:140px;
    text-align:right
  }
  .data-table th,.data-table td {
    font-size:9px;
    padding:12px 10px
  }
  .data-table th:first-child,.data-table td:first-child {
    padding-left:16px
  }
  .collection-name {
    gap:8px
  }
  .collection-name img {
    width:32px;
    height:35px
  }
  .collection-name strong {
    font-size:10px;
    min-width:102px
  }
  .collection-name small {
    font-size:8px
  }
  .pill {
    font-size:7px
  }
  .catalog-toolbar {
    align-items:stretch;
    flex-direction:column;
    gap:13px;
    margin-top:22px
  }
  .filter-tabs {
    align-self:flex-start
  }
  .search-field {
    max-width:none
  }
  .catalog-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .catalog-image {
    height:135px
  }
  .catalog-image img {
    width:102px;
    height:106px
  }
  .catalog-content {
    padding:12px
  }
  .catalog-content h3 {
    font-size:11px;
    line-height:1.4;
    min-height:31px;
    margin-bottom:8px
  }
  .catalog-price-row {
    font-size:8px
  }
  .catalog-content>.button {
    font-size:9px;
    padding:7px 5px
  }
  .selected-flag {
    font-size:7px;
    top:9px;
    left:9px
  }
  .small-note {
    font-size:10px
  }
  .settings-grid>aside {
    grid-template-columns:1fr
  }
  .form-panel {
    padding:21px 18px
  }
  .setting-row {
    gap:12px;
    padding:22px 0;
    align-items:flex-start
  }
  .setting-row strong {
    font-size:11px
  }
  .setting-row small {
    font-size:9px;
    max-width:160px;
    line-height:1.7
  }
  .input-unit {
    width:118px;
    gap:4px;
    padding-right:8px
  }
  .input-unit>input {
    width:83px;
    min-height:40px;
    font-size:12px;
    padding-inline:9px
  }
  .input-unit>span {
    font-size:8px
  }
  .form-footer {
    flex-direction:column;
    align-items:stretch;
    gap:15px
  }
  .form-footer p {
    font-size:9px;
    max-width:none
  }
  .form-footer>.button {
    width:100%
  }
  .order-card {
    padding:16px;
    gap:10px;
    flex-wrap:wrap
  }
  .order-card>img {
    width:40px;
    height:43px
  }
  .order-copy {
    min-width:160px
  }
  .order-copy h3 {
    font-size:11px
  }
  .order-copy p {
    font-size:9px
  }
  .order-copy code {
    font-size:7px
  }
  .order-price {
    font-size:16px
  }
  .order-card>.button {
    font-size:9px;
    margin-left:auto
  }
  .event-list {
    padding:0 16px 7px
  }
  .event {
    gap:9px
  }
  .event-title {
    font-size:9px
  }
  .event-meta {
    font-size:8px
  }
  .event time {
    font-size:8px
  }
  .event-symbol {
    width:23px;
    height:23px;
    font-size:10px
  }
  .notice {
    font-size:10px;
    padding:12px 13px;
    margin-bottom:19px
  }
  .notice .button {
    float:none;
    display:flex;
    margin:10px 0 0;
    max-width:200px
  }
  .rules-scroll {
    max-height:280px
  }
  footer {
    padding:13px 16px calc(90px + env(safe-area-inset-bottom));
    font-size:8px
  }
  dialog {
    padding:22px 19px;
    width:calc(100% - 26px);
    max-height:85dvh
  }
  .dialog-heading h2 {
    font-size:19px
  }
  .dialog-actions .button {
    font-size:10px
  }
  .checkbox-label {
    font-size:10px
  }
  #toast {
    bottom:87px;
    font-size:10px;
    width:max-content;
    max-width:calc(100% - 26px);
    text-align:center
  }
  
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  
}
@media(min-width:1001px) {
  .data-table {
    font-size:12px
  }
  .data-table th {
    font-size:10px
  }
  .collection-name strong {
    font-size:12px
  }
  .collection-name small {
    font-size:10px
  }
  
}

/* GiftPilot surfaces and motion. No external fonts or UI dependencies. */
.trade-decision { font-size: 10px; line-height: 1.6; color: #8ca6c6; min-height: 32px; margin-top: 9px; }
.scan-status { color: #8ca6c6; min-height: 16px; font-variant-numeric: tabular-nums; }
.button[aria-busy="true"]::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .7s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
.search-field { flex-direction: row; }
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --line: #2a374a;
  --muted: #93a5bb;
}
.mobile-brand { display: none; }
body {
  background: radial-gradient(ellipse at 85% -10%, #1e44694d, transparent 48%), #0c111b;
}
.sidebar { background: linear-gradient(180deg, #111b2b, #0d1420 70%); }
.topbar { background: #0f1726b8; backdrop-filter: blur(16px); }
.panel, .metric, .catalog-card {
  border-color: #2b3c524f;
  box-shadow: 0 6px 24px #02071224, inset 0 1px 0 #c2deff06;
  border-radius: 18px;
}
.panel { background: linear-gradient(140deg, #182232ef, #121b29f5); }
.metric { background: linear-gradient(140deg, #1a2638, #142030); }
.balance-metric {
  background: radial-gradient(ellipse at 100% 0, #5084c655, transparent 75%), linear-gradient(135deg, #203755, #17283e);
  border-color: #658dc557;
}
.button, .nav-item, .filter-tabs button, .row-action, .text-button, input, select {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s var(--ease-out);
}
.button { border-radius: 11px; }
.button.primary {
  background: linear-gradient(135deg, #acd7ff, #8bbef8);
  border-color: #b8dbff;
  box-shadow: 0 3px 13px #5ba9ff18, inset 0 1px 0 #ffffff40;
}
.button.primary:hover { background: linear-gradient(135deg, #c0e2ff, #a2ceff); box-shadow: 0 4px 20px #66b1ff30; }
.button:active:not(:disabled), .row-action:active { transform: scale(.97); }
.nav-item { border-radius: 12px; }
.nav-item.active { box-shadow: inset 3px 0 0 #94c7ff; }
.catalog-card { transition: transform .32s var(--ease-out), border-color .25s, box-shadow .25s; }
.catalog-card:hover { transform: translateY(-4px); border-color: #6e9bd278; box-shadow: 0 14px 30px #02091650; }
.catalog-image { background: radial-gradient(ellipse at 50% 10%, #537fbb50, transparent 75%), linear-gradient(150deg, #263b56, #17263b); }
.catalog-image img { transition: transform .4s var(--ease-out); }
.catalog-content h3 { font-weight: 600; }
.selected-flag { border-radius: 7px; backdrop-filter: blur(8px); }
.pill { border-radius: 7px; }
.danger-text { color: #e6a9a7; }
.danger-text:hover { color: #ffd5d1; }
.section-heading:has(#clearCollections) { flex-wrap: wrap; gap: 10px 15px; }
#clearCollections { margin-left: auto; }
#selectedSummary { white-space: nowrap; }
input:focus, select:focus { box-shadow: 0 0 0 3px #8ebfff12; }
.view:not([hidden]) { animation: view-enter .32s var(--ease-out) both; }
dialog[open] { animation: dialog-enter .24s var(--ease-out) both; }
#toast:not([hidden]) { animation: toast-enter .22s var(--ease-out) both; }
[aria-busy="true"] { cursor: progress; }
@keyframes view-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-enter { from { opacity: 0; margin-bottom: -6px; } to { opacity: 1; margin-bottom: 0; } }
@media (min-width: 1001px) {
  .metric-label, .section-heading p, .catalog-price-row, .budget-remaining, .limits-list>div, .text-button { font-size: 11px; }
  .catalog-content h3 { font-size: 13px; }
  .catalog-content>.button { min-height: 35px; font-size: 11px; }
}
@media (max-width: 700px) {
  .mobile-brand { display: block; }
  .topbar { gap: 8px; }
  .topbar>div:first-of-type { flex: 1; }
  .panel, .metric, .catalog-card { border-radius: 15px; }
  .nav-item.active { box-shadow: none; }
  .nav-item { border-radius: 0; }
  .sidebar { background: #101b2bef; }
  .catalog-card:hover { transform: none; }
  #selectedSummary { width: 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Owned gifts: inventory and sale controls share the existing blue-night palette. */
.inventory-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; }
.inventory-toolbar strong { font-size:13px; font-weight:500; }
.inventory-toolbar p { margin:7px 0 0; }
.inventory-toolbar .search-field { width:260px; max-width:100%; }
.gift-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.gift-grid>.empty { grid-column:1/-1; }
.owned-gift { min-width:0; padding:22px; border:1px solid #31456280; border-radius:20px; background:radial-gradient(ellipse at 100% 0,#416e9a20,transparent 70%),linear-gradient(145deg,#1a273a,#111b2a); box-shadow:0 12px 30px #02091525; }
.owned-gift-heading { display:flex; align-items:center; gap:16px; }
.owned-gift-heading img { width:84px; height:84px; object-fit:contain; border-radius:18px; background:#24374f; }
.owned-gift-heading h2 { font-size:17px; line-height:1.4; margin:7px 0 3px; overflow-wrap:anywhere; }
.owned-gift-heading p { color:#a8bcd5; margin:0; font-size:12px; }
.gift-status { display:inline-block; font-size:10px; padding:4px 8px; border-radius:6px; color:#a7bbd5; background:#263950; }
.gift-status.listed { background:#244a423d; color:#96dac0; border:1px solid #4c9c8140; }
.gift-status.pending { color:#efd197; }
.gift-traits { color:#91a6c2; font-size:11px; margin:19px 0; overflow-wrap:anywhere; }
.gift-traits span { padding:0 8px; opacity:.6; }
.gift-prices { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; border-top:1px solid #7598c023; padding-top:18px; }
.gift-prices dt { color:#9caec7; font-size:11px; margin-bottom:6px; }
.gift-prices dd { font-size:15px; font-weight:550; margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.gift-prices>div:nth-child(n+3) dd { color:#a8d2fc; }
.gift-fee { color:#99b9c4; font-size:11px; padding:11px 12px; background:#7bacc30b; border-radius:9px; margin:18px 0 14px; }
.gift-fee.paid { color:#f2c78b; background:#c38f3210; }
.gift-actions { display:flex; flex-wrap:wrap; gap:10px; }
.gift-actions .button { flex:1; min-width:115px; min-height:40px; font-size:11px; }
.gift-actions .text-button { margin-top:3px; min-height:28px; text-align:left; }
.gift-link { display:inline-block; font-size:10px; margin-top:17px; color:#93accb; text-decoration:none; }
.gift-link:hover { color:#c3e1ff; }
#confirmText { white-space:pre-line; line-height:1.8; }
@media(max-width:700px) {
  .inventory-toolbar { align-items:stretch; flex-direction:column; gap:15px; }
  .inventory-toolbar .search-field { width:100%; }
  .gift-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .owned-gift { padding:20px; }
  .navigation { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .nav-item { min-width:0; padding-left:2px; padding-right:2px; font-size:9px; }
  .nav-item span { white-space:normal; text-align:center; }
}

/* Quiet glass accents: keep the dense trading tables opaque and readable. */
.topbar {
  background:linear-gradient(115deg,#253e5859,#142237a8 50%,#2840594a);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
  border-bottom-color:#b2d8ff20;
  box-shadow:inset 0 1px 0 #f0f8ff0a,0 4px 22px #050b131a;
}
.nav-item.active { background:linear-gradient(110deg,#b5dfff19,#92bdf609); border:1px solid #c0e3ff20; }
.button:not(.primary):not(.danger) {
  background:linear-gradient(135deg,#e4f2ff12,#9dc7ff05);
  border-color:#b5d7ff25;
  box-shadow:inset 0 1px 0 #e2f4ff14,0 3px 10px #020a1112;
}
.button:not(.primary):not(.danger):hover { background:linear-gradient(135deg,#e4f2ff1e,#9dc7ff0d); border-color:#b5d7ff48; }
dialog { background:linear-gradient(145deg,#20334ceF,#142134f5); border-color:#c0ddff30; box-shadow:inset 0 1px 0 #e8f5ff20,0 25px 100px #0009; -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
dialog::backdrop { background:#050b1485; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.owned-gift { border-top-color:#c5e2ff30; box-shadow:inset 0 1px 0 #dbf0ff0c,0 14px 35px #02091530; }
.gift-art { width:min(100%,220px); aspect-ratio:1; margin:0 auto 20px; position:relative; border-radius:18px; overflow:hidden; background:#172739; box-shadow:0 9px 25px #02060d35,inset 0 0 0 1px #fff1; }
.gift-art img { display:block; width:100%; height:100%; object-fit:contain; }
.gift-art.preview-unavailable img { padding:48px; opacity:.35; }
.gift-art.preview-unavailable::after { content:attr(data-unavailable); position:absolute; left:15px; right:15px; bottom:15px; text-align:center; font-size:11px; line-height:1.5; color:#b6c6db; }
.owned-gift-heading h2 { margin:8px 0 4px; }
.gift-status { border:1px solid #d5ecff12; background:linear-gradient(130deg,#c7e9ff13,#8fb7de08); }
.active-orders-panel { border-color:#83b9dc36; box-shadow:inset 0 1px 0 #c5e7ff12,0 8px 30px #030b1426; }
.active-orders-panel h2 { display:flex; align-items:center; gap:9px; }
.live-indicator { display:inline-block; width:7px; height:7px; border-radius:50%; background:#9edac9; box-shadow:0 0 0 4px #96dbbd0e,0 0 12px #82dabb30; }
.order-history>summary { cursor:pointer; padding:20px 22px; font-size:13px; font-weight:550; color:#a7b9cf; }
.order-history>summary .count-label { margin-left:8px; }
.order-history[open]>summary { border-bottom:1px solid #9fc2e41a; }
#cleanupForm .checkbox-label { margin:18px 0; align-items:center; }
#cleanupForm input[type=checkbox] { accent-color:#9ccfff; }
@media(max-width:700px) {
  .sidebar { -webkit-backdrop-filter:blur(18px) saturate(135%); backdrop-filter:blur(18px) saturate(135%); border-top:1px solid #c9e3ff24; }
  .nav-item.active { border:0; background:linear-gradient(180deg,#a2d1ff13,transparent); }
  .gift-art { width:min(100%,220px); }
  .order-history>summary { padding:18px; }
}
@media(prefers-reduced-transparency:reduce) {
  .topbar,.sidebar,dialog { background:#152235; -webkit-backdrop-filter:none; backdrop-filter:none; }
  dialog::backdrop { background:#050b14d9; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media(min-width:1001px) {
  .gift-grid:has(>.owned-gift:only-child) { grid-template-columns:minmax(0,780px); }
  .gift-grid>.owned-gift:only-child { display:grid; grid-template-columns:220px minmax(0,1fr); column-gap:28px; align-items:start; }
  .gift-grid>.owned-gift:only-child>.gift-art { grid-column:1; grid-row:1/span 8; align-self:center; margin:0; width:100%; }
  .gift-grid>.owned-gift:only-child>:not(.gift-art) { grid-column:2; }
}

/* Readable system typography with local variable-font support; no web-font download. */
:root { --muted:#b0bfd3; }
body,input,select,button,textarea { font-family:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
body { font-size:14px; line-height:1.55; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
h1 { font-size:30px; font-weight:650; letter-spacing:-.65px; }
h2 { font-size:17px; font-weight:600; letter-spacing:-.2px; }
.page-heading p,.small-note,.section-heading p,.section-heading>.muted,.scan-status { font-size:13px; line-height:1.6; }
.button,.button.small,.text-button,.catalog-content>.button,.opportunities-panel>.button { font-size:13px; }
.button { min-height:42px; }
.nav-item { font-size:14px; min-height:48px; font-weight:500; }
.nav-count,.count-label { font-size:11px; }
.navigation { position:relative; isolation:isolate; }
.nav-item { position:relative; z-index:1; }
.nav-item.active { background:transparent; border-color:transparent; box-shadow:none; }
.nav-glass { position:absolute; left:0; top:0; border-radius:14px; pointer-events:none; z-index:0; background:radial-gradient(ellipse at 10% 0,#d5edff20,transparent 75%),linear-gradient(120deg,#c4e7ff1a,#a1ceff09); border:1px solid #c1e4ff42; box-shadow:inset 0 1px 0 #effaff40,inset 0 -1px 0 #8dc7ff18,0 6px 20px #01081325; -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); will-change:transform; }
.nav-glass { transition:none!important; }
.nav-item.active::before { content:none!important; }
.nav-glass.is-moving::after,.nav-glass.is-dragging::after { opacity:1; transform:translateX(7%) rotate(6deg); }
.nav-glass::after { content:""; position:absolute; inset:1px; border-radius:inherit; background:linear-gradient(115deg,#effaff30,transparent 43%,#b8e6ff0e); opacity:.45; transition:transform .45s ease,opacity .45s ease; pointer-events:none; }
.nav-item:hover { background:transparent; color:#e4f1ff; }
.nav-item.active,.nav-item.active:hover { background:transparent; border-color:transparent; box-shadow:none; }
.topbar,.connection-row { font-size:13px; }
.sync,.service-label,.connection-row small,.local-badge { font-size:11px; }
.metric-label,.metric small,.metric>div>span,.budget-value>span,.budget-remaining,.budget-remaining strong,.limits-list>div,.limits-list dd { font-size:13px; line-height:1.5; }
.data-table { font-size:13px; }
.data-table th { font-size:12px; }
.data-table td { line-height:1.6; padding-top:15px; padding-bottom:15px; }
.catalog-content h3,.order-copy h3,.event-title { font-size:15px; }
.catalog-price-row,.trade-decision,.order-copy p,.order-copy code,.order-card small,.event-meta,.event time { font-size:12px; line-height:1.65; }
.pill,.status-chip,.gift-status { font-size:11px; }
.gift-prices dt,.gift-fee,.gift-traits,.owned-gift-heading p,.gift-link { font-size:13px; }
.gift-prices dd { font-size:18px; }
.gift-actions .button,.gift-actions .text-button,.order-history>summary { font-size:13px; }
.balance-setting { margin:24px 0; align-items:flex-start; }
.balance-setting span { line-height:1.6; }
.balance-setting small { display:block; color:var(--muted); margin-top:5px; font-size:12px; }
.reset-panel { margin-top:26px; padding:24px; display:flex; gap:20px; justify-content:space-between; align-items:center; border-color:#ac7a7a35; }
.reset-panel p { margin:8px 0 0; font-size:13px; }
#resetForm .checkbox-label { margin:20px 0; align-items:flex-start; font-size:13px; }
.reset-warning { color:#e3c39a; font-size:13px; }
.view:not([hidden]) { animation:none; }
@media(max-width:1000px) { .data-table { min-width:780px; } }
@media(max-width:700px) {
  h1 { font-size:27px; }
  .nav-item { font-size:10px; min-height:60px; }
  .nav-glass { border-radius:14px; }
  .topbar { font-size:12px; }
  .sync { font-size:10px; }
  .reset-panel { align-items:stretch; flex-direction:column; }
  .reset-panel .button { width:100%; }
}
.budget-panel>#fundsUpdated { margin:8px 22px 16px; }
.metric>div>span,.input-unit>span { color:#b4c4d8; }
.setting-row strong { font-size:14px; font-weight:600; }
.setting-row small { font-size:12px; line-height:1.65; color:#b0bfd3; }
.form-footer p { font-size:12px; line-height:1.65; }
.checkbox-label>span { font-size:14px; }
.balance-setting>span>small { font-size:12px; }
.collection-name strong { font-size:13px; }
.collection-name small { font-size:11px; color:#b0bfd3; }
.dialog-heading h2 { font-size:20px; }
dialog p { font-size:13px; line-height:1.75; }
.empty strong { font-size:14px; }
.empty p { font-size:13px; }
.dialog-actions .button { font-size:13px; }
@media(max-width:700px) { .nav-item { font-size:11px; } }
.strategy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; }
.strategy-field { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:15px; border:1px solid #b1d5ff19; border-radius:12px; background:#0b152528; }
.strategy-field>strong { font-size:13px; font-weight:550; color:#dbe9fa; }
.strategy-field .input-unit { width:100%; }
.strategy-field .input-unit input { min-width:0; width:100%; font-size:15px; }
.brand img { filter:drop-shadow(0 3px 8px #020b2350); }
@media(max-width:700px) { .strategy-grid { gap:12px; } .strategy-field { padding:12px; } .strategy-field>strong { font-size:12px; min-height:36px; } }
@media(max-width:360px) { .strategy-grid { grid-template-columns:1fr; } }

/* One focus surface per search field, including browser-native search controls. */
.search-field { border:1px solid #39516d; background:#0f1b2a; transition:border-color .2s ease,box-shadow .2s ease; }
.search-field:focus-within { border-color:#99c9fa; box-shadow:0 0 0 3px #8ebfff12; }
.search-field>input,.search-field>input:focus,.search-field>input:focus-visible { appearance:none; -webkit-appearance:none; outline:none; border:0; border-radius:0; box-shadow:none; background:transparent; margin:0; min-width:0; padding:0; height:auto; font-size:13px; }
.search-field>input::placeholder { font-size:12px; color:#9cb1cb; }
.search-field>input::-webkit-search-decoration { -webkit-appearance:none; }
.search-field>span { color:#9abbdc; font-size:19px; line-height:1; }
.monitor-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; padding:0 22px 18px; }
.monitor-sort { display:flex; flex-direction:row; align-items:center; gap:12px; font-size:12px; color:var(--muted); margin:0; }
.panel { background-image:radial-gradient(ellipse at 0 0,#a6d3ff06,transparent 55%); border-top-color:#b4daff25; box-shadow:inset 0 1px 0 #deefff06,0 12px 30px #020a1414; }
.topbar { box-shadow:inset 0 1px 0 #f0f8ff0a,inset 0 -1px 0 #9acfff06,0 4px 22px #050b131a; }
.page-heading h1 { text-shadow:0 2px 18px #b2d8ff0c; }
.sidebar::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 83% 12%,#afd7ff30 0 1px,transparent 2px),radial-gradient(circle at 22% 49%,#afd7ff19 0 1px,transparent 2px),radial-gradient(ellipse at 0 0,#85bfff06,transparent 45%); }
.live-indicator { animation:signal-breathe 3.5s ease-in-out infinite; }
@keyframes signal-breathe { 50% { box-shadow:0 0 0 5px #96dbbd08,0 0 15px #82dabb45; } }
.catalog-card { transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
@media(hover:hover) { .catalog-card:hover { transform:translateY(-3px); border-color:#94c9fa55; box-shadow:0 14px 26px #020a142b,inset 0 1px 0 #d3ecff0e; } }
.strategy-field:last-child:nth-child(odd) { grid-column:1/-1; }
@media(max-width:700px) {
  .monitor-toolbar { padding:0 16px 16px; gap:10px; }
  .monitor-sort { width:100%; justify-content:space-between; }
  .monitor-sort .glass-select { min-width:0; max-width:65%; }
  .nav-item.active,.nav-item.active:hover { background:transparent; }
}
@media(prefers-reduced-motion:reduce) { .catalog-card { transition:none; transform:none; } .live-indicator { animation:none; } }

/* App-drawn selection surface: no OS popup, no clipping by the trading panel. */
.glass-select { min-width:240px; min-height:46px; display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid #b1d7ff36; border-radius:13px; color:#e0eeff; background:radial-gradient(ellipse at 0 0,#b5ddff15,transparent 75%),linear-gradient(130deg,#1c3046d9,#122135ed); box-shadow:inset 0 1px 0 #eaf7ff1f,0 4px 14px #020a1526; text-align:left; }
.glass-select:hover { border-color:#b4dcff65; }
.glass-select[aria-expanded=true] { border-color:#b4dcff85; box-shadow:inset 0 1px 0 #eaf7ff30,0 0 0 3px #8cbdff0b,0 6px 18px #020a1533; }
.glass-select-value { flex:1; font-size:13px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.glass-select-count { flex-shrink:0; min-width:24px; text-align:center; font-size:11px; border:1px solid #b2d7fa19; border-radius:6px; padding:1px 6px; color:#abc9e9; background:#a3cbff0c; }
.glass-select-chevron { width:17px; height:17px; color:#b5d8fc; }
.glass-select[aria-expanded=true] .glass-select-chevron { transform:rotate(180deg); }
.glass-options { position:fixed; z-index:1000; overflow-y:auto; overscroll-behavior:contain; padding:7px; border:1px solid #c0dfff44; border-radius:17px; color:#d9e9fc; background:radial-gradient(ellipse at 0 0,#c7e7ff16,transparent 65%),linear-gradient(145deg,#1c3047ef,#112034f5); -webkit-backdrop-filter:blur(24px) saturate(155%); backdrop-filter:blur(24px) saturate(155%); box-shadow:inset 0 1px 0 #effaff2b,inset 0 -1px 0 #a2d2ff0d,0 20px 56px #02081385,0 3px 10px #0004; scrollbar-width:thin; scrollbar-color:#8bb8e84a transparent; }
.glass-options:focus { outline:none; }
.glass-options[aria-hidden=true] { pointer-events:none; }
.glass-option { min-height:43px; display:flex; align-items:center; gap:10px; padding:9px 10px; margin:2px 0; border:1px solid transparent; border-radius:10px; cursor:pointer; user-select:none; }
.glass-option.is-highlighted { background:#b4d7ff0d; }
.glass-option[aria-selected=true] { background:linear-gradient(115deg,#a9d9ff20,#89b9f00a); border-color:#c1dfff28; box-shadow:inset 0 1px 0 #d8efff0b; }
.option-dot { width:6px; height:6px; border-radius:50%; background:#99b9d8; flex-shrink:0; box-shadow:0 0 7px #a2cfff22; }
.glass-option[data-value=leading] .option-dot { background:#9bdcbe; }
.glass-option[data-value=error] .option-dot { background:#e9a2a1; }
.glass-option[data-value=profit_limit] .option-dot,.glass-option[data-value=budget] .option-dot { background:#d7ba8d; }
.glass-option[data-value=watching] .option-dot,.glass-option[data-value=repricing] .option-dot { background:#a8d5ff; }
.option-label { flex:1; min-width:0; font-size:13px; }
.option-count { min-width:22px; font-size:11px; color:#a8c1de; text-align:right; font-variant-numeric:tabular-nums; }
.option-check { width:16px; height:16px; color:#acd8ff; opacity:0; }
.glass-option[aria-selected=true] .option-check { opacity:1; }
@media(max-width:700px) { .nav-glass { border-radius:14px; } .monitor-sort { flex-direction:column; align-items:stretch; gap:8px; } .monitor-sort .glass-select { width:100%; max-width:none; min-height:45px; gap:8px; } .option-label { font-size:13px; } }
@media(prefers-reduced-transparency:reduce) { .glass-options { background:#17273b; -webkit-backdrop-filter:none; backdrop-filter:none; } }

/* Permanent collection exclusions, using the panel's glass palette. */
.filter-tabs { flex-wrap: wrap; }
.blacklist-count { display:inline-flex; min-width:20px; padding:2px 5px; margin-left:4px; justify-content:center; border-radius:6px; background:rgba(147,190,241,.12); font-size:11px; }
.blacklist-action { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:11px 6px 0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; transition:color .2s ease; }
.blacklist-action:hover { color:#bad8fc; }
.blacklist-action:focus-visible { outline:2px solid #9dcaff; outline-offset:3px; border-radius:8px; }
.blacklist-badge { position:absolute; top:12px; right:12px; z-index:1; padding:6px 10px; color:#c9daf1; background:rgba(15,28,47,.72); border:1px solid rgba(166,199,244,.25); backdrop-filter:blur(14px); border-radius:10px; font-size:12px; }
.catalog-card.is-blocked { border-color:rgba(165,190,223,.2); }
.catalog-card.is-blocked .catalog-image img { opacity:.65; }

.filter-tabs button { min-height:38px; font-size:13px; }
.catalog-grid.blacklist-grid { grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }

/* Shared, draggable glass selection. The light stays on the same rim on every screen. */
.navigation { touch-action:none; user-select:none; -webkit-user-select:none; }
.nav-glass { overflow:hidden; will-change:transform,width,height; }
.nav-glass::before { content:""; position:absolute; top:0; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,#d9f0ffb0,transparent); border-radius:50%; }
.nav-glass.is-dragging { background-color:#a2d3ff18; box-shadow:inset 0 1px 0 #e4f6ff70,0 7px 24px #01081335; }
.is-scrubbing { cursor:grabbing; }
.is-scrubbing .nav-item { color:var(--muted); }
.is-scrubbing .nav-item.is-preview { color:#e4f4ff; }
.filter-tabs { position:relative; isolation:isolate; gap:4px; padding:5px; border-radius:17px; background:linear-gradient(145deg,#a7d2ff0d,#121e3075); border-color:#b2d6ff26; box-shadow:inset 0 1px 0 #d3eaff14,0 7px 24px #02091724; -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); }
.filter-tabs button { position:relative; z-index:1; padding:9px 13px; border-radius:14px; min-height:42px; color:#b0c2db; white-space:nowrap; font-size:13px; }
.filter-tabs button.active { background:transparent; color:#e1f0ff; touch-action:none; cursor:grab; }
.filter-tabs button:hover { color:#edf7ff; }
.filter-tabs .filter-glass { border-radius:14px; }
.filter-tabs.is-scrubbing button { cursor:grabbing; }
.filter-tabs.is-scrubbing button.active { color:#b0c2db; }
.filter-tabs.is-scrubbing button.is-preview { color:#eef8ff; }
.metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metric { min-width:0; }
.metric-label { gap:12px; align-items:center; }
.metric-label svg { flex-shrink:0; }
.metric>div { gap:7px; }
.metric>div>strong { font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.metric small { display:block; min-height:20px; }
.profit-metric { border-color:#93d9b627; background:radial-gradient(ellipse at 100% 0,#80d8b410,transparent 80%),linear-gradient(145deg,#1a2838c9,#111b29e6); }
.profit-metric #metricProfit { color:#a4e8cb; }
.profit-metric #metricProfit.negative { color:var(--danger); }
.heading-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border:1px solid #b9ddff26; border-radius:12px; background:linear-gradient(145deg,#a1d3ff14,#1c304711); box-shadow:inset 0 1px 0 #e2f3ff18; }
.heading-icon svg { width:20px; height:20px; color:#b9d9fd; }
.page-heading h1 { display:flex; align-items:center; gap:11px; }
@media(max-width:700px) {
 .topbar { min-height:64px; height:auto; padding:12px 16px; gap:12px; }
 .mobile-brand { display:flex; align-items:center; gap:9px; margin:0; white-space:nowrap; }
 .mobile-brand img { display:block; width:30px; height:30px; flex-shrink:0; }
 .mobile-brand strong { font-size:20px; font-weight:650; letter-spacing:-.7px; }
 .topbar>div:not(.sync) { display:none; }
 .sync { margin-left:auto; min-width:0; max-width:140px; font-size:10px; }
 .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .metric { padding:16px 13px; border-radius:19px; }
 .metric-label { font-size:12px; line-height:1.4; min-height:34px; gap:6px; }
 .metric>div>strong { font-size:clamp(23px,6.8vw,30px); letter-spacing:-.9px; }
 .metric>div>span { font-size:11px; }
 .metric small { font-size:12px; line-height:1.55; margin-top:7px; }
 .catalog-toolbar { gap:12px; }
 .filter-tabs { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:5px; }
 .filter-tabs button { padding:9px 7px; min-height:43px; font-size:12px; }
 .filter-tabs button[data-filter=blocked] { grid-column:1/-1; }
 .sidebar { padding-left:7px; padding-right:7px; background:linear-gradient(180deg,#1a2b3acf,#101b2bee); border-top-color:#b1d7ff20; backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%); }
 .navigation { gap:2px; height:68px; align-items:center; }
 .nav-item { min-height:58px; height:58px; border-radius:14px; font-size:10px; gap:5px; padding:6px 1px; }
 .nav-item svg { width:20px; height:20px; }
 .nav-item.active { cursor:grab; }
 .heading-icon { width:33px; height:33px; border-radius:11px; }
 .heading-icon svg { width:18px; height:18px; }
 .page-heading { gap:14px; }
 .page-heading h1 { font-size:25px; letter-spacing:-.7px; }
 .heading-actions { gap:8px; }
 .heading-actions .button { min-height:42px; }
 main { padding-bottom:24px; }
}
@media(prefers-reduced-motion:reduce) { .nav-glass::after { transition-duration:.12s; } }

.event-symbol svg { width:15px; height:15px; }

@media(max-width:700px) {
 #view-collections .heading-actions { display:flex; width:100%; }
 #view-collections .heading-actions .button { flex:1; min-width:0; font-size:12px; padding:10px 8px; }
 .rules-scroll>.empty { min-height:180px; padding:28px 16px; }
 .nav-item>span:not(.nav-count) { max-width:100%; white-space:nowrap; }
}
@media(max-width:360px) { .nav-item { font-size:9px; } }