/* black-ui-theme-20260829 */
:root{color-scheme:dark;--black-ui-bg:#050608;--black-ui-panel:#0d1117;--black-ui-panel2:#11161d;--black-ui-field:#080b10;--black-ui-text:#f4f7fb;--black-ui-muted:#b4c0cc}
html,body{background:var(--black-ui-bg)!important;color:var(--black-ui-text)!important}
body{background-image:none!important}
.app,.auth,.login,.content,.tab,.shell{background:var(--black-ui-bg)!important}
aside{background:#0b0f14!important;border-color:rgba(255,255,255,.14)!important}
.card,.secret,.metric,.providers,.dashboard,.terminal-card,.code-card,.plan,.stats div,.providerCard,.providerKeyEditor,.providerKeyItem,.providerKeyRow,.pricingPlanEditor,.promoTierEditor,.usagePanel,.usageHero,.legalHero,.legalCard,.reauthBox,.topupNotice,.buyPlanModal,.approvalPopup{background:var(--black-ui-panel)!important}
.pricingPlanRow,.apiTestMetric,.modelTestDebugRow,.bankWebhookGuide,.provider-row span,.steps li,.dash-cards div,.key-box,.customerModelBrandSummary,.public-model-item,.public-model-loading,.public-model-empty{background:var(--black-ui-panel2)!important}
input,select,textarea,.readonlyBox,.searchBox{background:var(--black-ui-field)!important;color:var(--black-ui-text)!important;border-color:rgba(255,255,255,.16)!important}
th{background:var(--black-ui-panel2)!important;color:var(--black-ui-text)!important}
.nav{background:rgba(5,6,8,.94)!important}
.noise{opacity:.08!important}
.brand-showcase{background:var(--black-ui-panel)!important}
.public-model-brand-card{background:var(--black-ui-panel)!important}
.usageTrend{background-color:var(--black-ui-field)!important}
.stickyLogsTable thead th{background:var(--black-ui-panel2)!important}
.toast{background:var(--black-ui-panel)!important}
.adminUsageTrend{min-height:220px!important}.adminTrendHour{display:flex;align-items:flex-end;justify-content:center;gap:2px;flex:1;min-width:6px;height:100%}.adminTrendHour .adminTrendBar{display:block;flex:1;min-width:2px;background:#38d6ff;box-shadow:0 0 10px rgba(56,214,255,.28)}.adminTrendHour .adminTrendOutput{background:#14f1a6}.adminTrendHour .adminTrendCache{background:#ffd84d}.miniBtn,.secondaryBtn,.usageExportBtn,.modelTestActionBtn{background:#123b55!important;border:1px solid #2b83a8!important;color:#e8f8ff!important;box-shadow:0 0 0 1px rgba(56,214,255,.08),0 6px 16px rgba(0,0,0,.28)}.miniBtn:hover,.secondaryBtn:hover,.usageExportBtn:hover,.modelTestActionBtn:hover{background:#18516f!important;border-color:#64dbff!important}.miniBtn:disabled,.secondaryBtn:disabled{opacity:.5!important}.adminUsagePanel h3,.usagePanel h3{font-size:18px}.adminUsagePanel th,.adminUsagePanel td,.usagePanel th,.usagePanel td{font-size:12px}
/* user-black-ui-v118: final dark-theme guard */
html,body,.shell,.auth,.app,.content,.tab{background:#050608!important;background-image:none!important;color:#f4f7fb!important}
.card,.secret,.metric,.providers,.dashboard,.terminal-card,.code-card,.plan,.stats div,.providerCard,.usagePanel,.usageHero,.pricingPlanEditor,.promoTierEditor,.legalCard,.buyPlanModal,.approvalPopup,.subscriptionPlanCard{background:#0d1117!important;background-image:none!important}
table,td{background:#0d1117!important;background-image:none!important}th{background:#11161d!important}
/* global-black-actions-v164: dark action tone, still visible on black UI */
:root{--tnt-action:#1e3448;--tnt-action-hover:#2b4a64;--tnt-action-text:#dbe9f6;--tnt-action-border:#45637f;--tnt-action-disabled:#1a2530}
button,.miniBtn,.miniLink,.dangerBtn,.secondaryBtn,.usageExportBtn,.modelTestActionBtn,.bankConfirmBtn,.modelSearchClearBtn,.uptimeToggleBtn,.subscriptionBuyBtn,.toolPrimaryBtn,.toolChoiceBtn,.modelCopyBtn,.modelTestBtn,.comboTestBtn,.comboIconBtn,.noticeBtn,#copyBtn,.btn,.testAllBtn,.modelActiveBtn,.saveProviderBtn,.warnBtn{background:var(--tnt-action)!important;color:var(--tnt-action-text)!important;border:1px solid var(--tnt-action-border)!important;box-shadow:0 7px 18px rgba(0,0,0,.45),0 0 0 1px rgba(90,130,165,.22)!important;text-shadow:none!important}
button:hover:not(:disabled),.miniBtn:hover:not(:disabled),.miniLink:hover:not(:disabled),.dangerBtn:hover:not(:disabled),.secondaryBtn:hover:not(:disabled),.usageExportBtn:hover:not(:disabled),.modelTestActionBtn:hover:not(:disabled),.bankConfirmBtn:hover:not(:disabled),.modelSearchClearBtn:hover:not(:disabled),.uptimeToggleBtn:hover:not(:disabled),.subscriptionBuyBtn:hover:not(:disabled),.toolPrimaryBtn:hover:not(:disabled),.toolChoiceBtn:hover:not(:disabled),.modelCopyBtn:hover:not(:disabled),.modelTestBtn:hover:not(:disabled),.comboTestBtn:hover:not(:disabled),.comboIconBtn:hover:not(:disabled),.noticeBtn:hover:not(:disabled),#copyBtn:hover:not(:disabled),.btn:hover:not(:disabled),.testAllBtn:hover:not(:disabled),.modelActiveBtn:hover:not(:disabled),.saveProviderBtn:hover:not(:disabled),.warnBtn:hover:not(:disabled){background:var(--tnt-action-hover)!important;border-color:#6d93b5!important;color:#eef5fb!important}
button:disabled,.miniBtn:disabled,.dangerBtn:disabled,.secondaryBtn:disabled,.usageExportBtn:disabled,.modelTestActionBtn:disabled,.subscriptionBuyBtn:disabled,.toolPrimaryBtn.disabled,.modelTestBtn:disabled,.warnBtn:disabled{background:var(--tnt-action-disabled)!important;border-color:#2c3d4d!important;color:#8fa3b3!important;opacity:.75!important}
button.modelActiveBtn.success,button.modelActiveBtn.error,.modelTestActionBtn.is-loading,.uptimePeriodButtons .miniBtn.active{background:var(--tnt-action)!important;color:var(--tnt-action-text)!important}
/* dark-sidebar-v164: unified dark sidebar for admin and customer, visible on black */
.app aside button,aside button{background:transparent!important;color:#aeb9c5!important;border:1px solid transparent!important;box-shadow:none!important;text-shadow:none!important}
.app aside button:hover,.app aside button.active,aside button:hover,aside button.active{background:rgba(30,52,72,.72)!important;color:#e6eef6!important;border-color:rgba(90,130,165,.6)!important;box-shadow:inset 0 0 0 1px rgba(90,130,165,.18)!important}

/* V268-PROMO-NOTICE: lam dep modal thong bao / khuyen mai.
   LY DO CAN KHOI NAY: chinh file nay ep `background:#0d1117` phang vao
   `.topupNotice` va `background:#1e3448` phang vao moi `button`, deu
   `!important` -> xoa sach gradient + bo goc da thiet ke o styles.css /
   customer.css. Ket qua quan sat duoc: hop vuong vet, nut nho xiu.
   CACH FIX DUNG DAU: dat lai rule o dac thu CAO HON ((0,2,0)+) trong
   chinh file nay. Khi ca hai deu `!important`, dac thu thang truoc thu
   tu file -> khong can doi thu tu <link>, khong can `!important` lon hon.
   Chi scope trong `.topupNoticeOverlay` nen panel/button khac khong doi.
   Chon nut bang `[data-notice-dismiss]` / `[data-notice-off-today]` chu
   khong phai class: landing va customer dat class khac nhau cho cung
   mot nut, attribute do render giong nhau o ca hai trang. */
.topupNoticeOverlay .topupNotice{position:relative;overflow:hidden;padding:28px 28px 22px!important;border-radius:20px!important;background:linear-gradient(180deg,#0e1a2c 0%,#0a1220 100%)!important;border:1px solid rgba(80,174,255,.30)!important;box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.05) inset,0 0 46px rgba(56,214,255,.10)!important}
/* dai accent tren dinh hop, bi `overflow:hidden` cat theo bo goc */
.topupNoticeOverlay .topupNotice::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#38d6ff,#6b52d9 60%,#f7b955);opacity:.9}
.topupNoticeOverlay .noticeHead{display:flex;gap:14px;align-items:center;margin:0 0 16px}
.topupNoticeOverlay .noticeIcon{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;font-size:22px;line-height:1;border-radius:13px;background:linear-gradient(135deg,#2ea9cf,#6b52d9);box-shadow:0 8px 22px rgba(56,214,255,.28),0 0 0 1px rgba(255,255,255,.14) inset}
.topupNoticeOverlay .noticeHeadText{min-width:0;display:flex;flex-direction:column;gap:3px}
.topupNoticeOverlay .noticeEyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7fd4ff;text-shadow:none!important}
.topupNoticeOverlay .topupNotice h3{margin:0!important;font-size:26px!important;line-height:1.2;font-weight:800}
.topupNoticeOverlay .topupNotice p{margin:0!important;font-size:15px;line-height:1.7;color:#cfe0f2!important;text-shadow:none!important}
.topupNoticeOverlay .noticeActions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.topupNoticeOverlay .noticeActions button{min-height:40px;padding:10px 18px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .12s ease,filter .12s ease,background .12s ease,border-color .12s ease}
/* nut chinh ("Tat") - nen accent */
.topupNoticeOverlay .noticeActions button[data-notice-dismiss]{background:linear-gradient(135deg,#2ea9cf,#6b52d9)!important;color:#f2f8ff!important;border:1px solid rgba(120,200,255,.42)!important;box-shadow:0 10px 26px rgba(56,214,255,.24)!important}
/* nut ma ("Tat Hom Nay") - nen trong suot, vien mo */
.topupNoticeOverlay .noticeActions button[data-notice-off-today]{background:transparent!important;color:#cfe0f2!important;border:1px solid rgba(255,255,255,.20)!important;box-shadow:none!important}
.topupNoticeOverlay .noticeActions button[data-notice-off-today]:hover{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.34)!important}
.topupNoticeOverlay .noticeActions button:hover{filter:brightness(1.1)}
.topupNoticeOverlay .noticeActions button:focus-visible{outline:2px solid #7fd4ff;outline-offset:2px}
@media(max-width:600px){
.topupNoticeOverlay .topupNotice{padding:22px 18px 18px!important;border-radius:16px!important}
.topupNoticeOverlay .noticeIcon{width:38px;height:38px;font-size:19px;border-radius:11px}
.topupNoticeOverlay .topupNotice h3{font-size:21px!important}
.topupNoticeOverlay .topupNotice p{font-size:14px;line-height:1.6}
.topupNoticeOverlay .noticeActions{justify-content:stretch}
.topupNoticeOverlay .noticeActions button{flex:1 1 auto;min-width:120px}
}