/* Presentation-only migration. Existing DOM ids, handlers and API flows remain authoritative. */
:root:not([data-theme="light"]) {
  --bg:#19212c; --surface:#253244; --surface-rgb:37,50,68;
  --surface2:#293b4e; --border:#40536a; --text:#edf2fa; --text2:#b0bfd0;
  --accent:#78afe8; --accent-rgb:120,175,232; --green:#83d6b4;
  --shadow:0 8px 24px rgba(8,15,23,.18);
}
:root:not([data-theme="light"]) .sidebar{background:#202c3b}
:root:not([data-theme="light"]) .panel-header{background:#223044}
.chat-item{border-radius:14px;margin:3px 10px;min-width:0}
.chat-item.active{background:rgba(var(--accent-rgb),.15);box-shadow:inset 3px 0 var(--accent)}
.panel-header{gap:12px;flex-shrink:0}
.panel-body,.messages-container,.redeem-feed{overscroll-behavior:contain;scroll-padding-bottom:24px}
button,input,select,textarea{font-family:inherit}
button{font-variant-numeric:tabular-nums}
button:disabled{cursor:wait}
:is(.settings-card,.home-account-item,.redeem-job,.payments-group){border-radius:16px}
:is(.settings-card,.home-account-item,.redeem-job){border-color:var(--border)}
:is(.payment-amount,.pay-stat-value,.mail-code-value,.exchange-rate-value){font-variant-numeric:tabular-nums}
#panel-qr .qr-amounts-content{width:100%;max-width:1440px;padding:24px}
#panel-qr #qr-grid-container{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
#panel-qr .amt-chip{min-width:0;min-height:48px;padding:8px 3px!important;font-size:13px!important;border-radius:12px;white-space:nowrap;background:var(--surface2)}
#panel-qr .amt-chip:nth-child(10n){background:color-mix(in srgb,var(--green) 16%,var(--surface));border-color:color-mix(in srgb,var(--green) 45%,var(--border));color:var(--green)}
#panel-codes .mail-code-row{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 14px;padding:12px 14px;min-height:0;border:1px solid var(--border);border-radius:14px;margin:8px 0;background:var(--surface)}
#panel-codes .mail-code-value{grid-column:1;grid-row:1/4;align-self:center;width:max-content;min-width:max-content;white-space:nowrap;word-break:normal;overflow-wrap:normal;font-size:25px;line-height:30px;letter-spacing:1px}
#panel-codes .mail-code-new-label{display:block;width:max-content;margin:4px auto 0;font-size:11px;line-height:18px;letter-spacing:0;padding:2px 7px;background:color-mix(in srgb,var(--green) 20%,var(--surface));color:var(--green);border-radius:7px}
#panel-codes .mail-code-mailbox{grid-column:2;grid-row:1;overflow-wrap:anywhere;font-size:12px}
#panel-codes .mail-code-source{grid-column:2;grid-row:2;min-width:0}
#panel-codes .mail-code-subject{font-size:13px;white-space:normal;line-height:18px}
#panel-codes .mail-code-time{grid-column:2;grid-row:3;justify-self:end;font-size:11px}
#panel-codes #code-mailbox-settings{padding:8px 12px}
#panel-codes .code-mailbox-setting{padding:10px 0;gap:8px 12px;border-top:0;border-bottom:1px solid var(--border);grid-template-columns:minmax(0,1fr) auto}
#panel-codes .code-mailbox-setting:last-child{border-bottom:0}
#panel-codes .code-mailbox-address{height:auto;min-height:28px;padding:0;border:0;background:transparent;overflow-wrap:anywhere;text-align:left}
#panel-codes .code-mailbox-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
#panel-codes .code-mailbox-actions input{flex:1;min-width:140px}
#panel-codes .code-mailbox-actions button{min-height:44px}
#panel-codes .code-mailbox-setting[data-refresh-layout]{grid-template-columns:minmax(0,1fr) auto}
#panel-codes .code-mailbox-setting>.code-mailbox-toggle{grid-column:2;grid-row:1;min-height:44px;height:auto;align-self:center}
#panel-codes .code-mailbox-setting[data-refresh-layout]>.code-mailbox-actions{grid-column:1/-1;grid-row:2;display:block}
#panel-codes .refresh-mail-details summary{min-height:44px;padding:12px 0;color:var(--text2);font-size:12px}
#panel-codes .refresh-mail-fields{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px}
:root:not([data-theme="light"]) .pill-btn.active{background:#345e85;color:#eef5ff}
#panel-keybuy .keybuy-product-key{background:color-mix(in srgb,var(--green) 10%,var(--surface));color:var(--text);border-color:color-mix(in srgb,var(--green) 35%,var(--border))}
#panel-pay .payment-load-more{display:block;margin:16px auto;min-height:44px;padding:10px 16px}
#panel-redeem .redeem-task-progress{min-width:0}
#panel-redeem .redeem-job-proof img{object-fit:contain;max-width:100%}
/* Keep totals on a common baseline even when a heading occupies two lines. */
#panel-pay .pay-summary-item{display:grid;grid-template-rows:minmax(34px,auto) auto;align-content:start;gap:8px;min-width:0}
#panel-pay .pay-summary-label{line-height:17px;margin:0}
#panel-pay .pay-summary-value{margin:0;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
#panel-pay .payment-day-header{padding:12px 16px;min-height:44px;flex-wrap:wrap}
#panel-pay .payment-day-total{font-variant-numeric:tabular-nums}
#panel-pay .pay-control select{height:44px;min-height:44px;padding:0 30px 0 10px;background-position:right 10px center;border-radius:10px;line-height:normal}
#panel-pay .payment-history-btn{width:36px;height:44px;border-radius:10px}
#panel-pay .payment-history{scroll-margin-block:16px;min-width:0}
#panel-pay .payment-details-summary span{white-space:normal;overflow-wrap:anywhere}
#panel-pay .exchange-rate-control{align-items:center;flex-wrap:nowrap}
#panel-pay .exchange-rate-value{display:flex;align-items:center;gap:4px;min-width:0}
#panel-pay .exchange-rate-unit{position:static;flex:none}
#panel-keybuy .keybuy-delivery-key{background:color-mix(in srgb,var(--green) 12%,var(--surface));color:var(--text);border:1px solid color-mix(in srgb,var(--green) 40%,var(--border));min-height:44px}
#panel-keybuy .expense-day-header{padding:12px 0;border-bottom:1px solid var(--border)}
#panel-keybuy .expense-worker-breakdown>span{color:var(--text);background:var(--surface2)}
#panel-keybuy .expense-row{background:var(--surface)}
#panel-keybuy .expense-row summary{min-height:44px}
.refresh-navigation-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.refresh-navigation-fields label{display:grid;gap:6px;color:var(--text2);font-size:12px;min-width:0}
.refresh-navigation-fields select,.refresh-navigation-settings>button{min-height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);padding:8px 12px;min-width:0;width:100%}
#panel-home .home-account-item{min-width:0;max-width:100%;box-sizing:border-box}
#panel-home .home-account-item-top>div{max-width:100%}
#panel-home .home-account-login{white-space:normal;overflow-wrap:anywhere}
#panel-home .home-account-instruction{white-space:nowrap;min-height:44px}
@media(min-width:769px) and (max-width:1200px){
  #panel-pay .payment-column-head{display:none}
  #panel-pay .payment-row{grid-template-columns:44px minmax(0,1fr) auto}
  #panel-pay .payment-row-controls{display:grid;grid-column:2/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:8px}
  #panel-pay .payment-history{grid-column:1/-1}
}
@media(max-width:768px){
  #panel-qr .qr-amounts-content{padding:16px 12px 24px}
  #panel-qr #qr-grid-container{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #panel-qr .amt-chip{min-height:48px;font-size:14px!important}
  #panel-codes .code-mailbox-setting{grid-template-columns:minmax(0,1fr)}
  #panel-codes .code-mailbox-actions{display:flex}
  #panel-codes .mail-code-row{padding:10px;gap:4px 10px}
  #panel-codes .mail-code-value{font-size:23px;letter-spacing:.5px}
  .mobile-tabbar{background:var(--surface);border-top:1px solid var(--border)}
  .mobile-tabbar.refresh-mobile-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mobile-tab.active{background:rgba(var(--accent-rgb),.16);border-radius:12px}
  .panel-body,.messages-container,.redeem-feed{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  #panel-pay .payment-load-more{scroll-margin-bottom:calc(84px + env(safe-area-inset-bottom))}
  .chat-item{margin-inline:6px}
  #panel-pay .pay-summary-item{padding:12px;grid-template-rows:34px auto}
  #panel-pay .pay-summary-value{font-size:20px}
  #panel-pay .pay-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #panel-pay .pay-toolbar input{grid-column:1/-1}
  #panel-pay .pay-toolbar select{grid-column:auto;font-size:11px;padding-left:8px}
  #panel-pay .pay-filter-reset{grid-column:2;justify-self:end}
  #panel-pay .payment-row{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:12px}
  #panel-pay .payment-row-controls{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:8px}
  #panel-pay .payment-row-title,#panel-pay .payment-row-meta{white-space:normal;overflow-wrap:anywhere}
  #panel-pay .payment-row-amount{font-size:13px}
  #panel-pay .payment-history{grid-column:1/-1}
  #panel-pay .exchange-rate-control input{width:60px;padding-inline:4px}
  #panel-pay .exchange-rate-control button{min-height:40px}
}

@media(max-width:768px){.mobile-tabbar.refresh-mobile-tabs .mobile-tab{min-width:0;padding-left:2px;padding-right:2px;font-size:10px}}