:root{
  --debt-bg:#f4f5f7;
  --debt-ink:#111827;
  --debt-muted:#6b7280;
  --debt-border:#e8e9ed;
  --debt-gold:#d5a640;
  --debt-card-shadow:0 10px 30px rgba(17,24,39,.055);
}
html,body{background:var(--debt-bg)!important;color:var(--debt-ink)}
body{padding-bottom:max(20px,env(safe-area-inset-bottom))!important}
.debt-only-wrap{max-width:620px!important;padding:calc(20px + env(safe-area-inset-top)) 14px 24px!important}
.legacy-section,.legacy-hooks{display:none!important}
.premium-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:54px;margin:0 2px 16px;padding-left:64px!important}
.premium-topbar h1{position:static!important;transform:none!important;width:auto!important;margin:1px 0 0!important;font-size:31px;line-height:1.02;letter-spacing:-.045em}
.premium-topbar .page-kicker{font-size:10px;letter-spacing:.18em;color:#9a7325}
.premium-topbar .status-line{margin-top:5px;font-size:11px}
.premium-topbar>div:first-child{min-width:0}
.topbar-actions{flex:0 0 auto}
.debt-category-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -2px 14px;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.debt-category-tabs::-webkit-scrollbar{display:none}
.debt-category-tab{appearance:none;flex:0 0 auto;min-height:42px;padding:0 15px;border:1px solid #e1e4e8;border-radius:14px;background:#fff;color:#5f6672;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 3px 12px rgba(17,24,39,.025)}
.debt-category-tab.active{border-color:#111827;background:#111827;color:#fff;box-shadow:0 8px 18px rgba(17,24,39,.12)}
.round-action{width:44px;height:44px;border:1px solid #e5e7eb;border-radius:15px;background:#fff;display:grid;place-items:center;box-shadow:0 5px 18px rgba(17,24,39,.05);color:#4b5563}
.round-action svg{width:24px;height:24px;fill:currentColor}
.debt-hero{position:relative;overflow:hidden;margin:0 0 12px;padding:22px;border-radius:27px;background:linear-gradient(145deg,#101827 0%,#1d293d 66%,#232f43 100%);color:#fff;box-shadow:0 18px 38px rgba(17,24,39,.18)}
.hero-content{position:relative;z-index:2}
.hero-glow{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}
.hero-glow-one{width:180px;height:180px;right:-70px;top:-95px;background:radial-gradient(circle,rgba(213,166,64,.32),rgba(213,166,64,0) 70%)}
.hero-glow-two{width:160px;height:160px;left:-75px;bottom:-105px;background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,0) 70%)}
.hero-label{font-size:10px;font-weight:800;letter-spacing:.17em;color:#d8c590}
.hero-amount{margin:6px 0 19px;font-size:38px;font-weight:850;letter-spacing:-.055em;line-height:1;white-space:nowrap}
.hero-progress-copy{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;font-size:11px;color:#cbd2dd}
.hero-progress-copy b{color:#fff;font-size:12px}
.hero-progress{height:7px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.hero-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e1b957,#f0d587);box-shadow:0 0 18px rgba(225,185,87,.35);transition:width .35s ease}
.hero-stat-grid{display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:8px;margin-top:17px}
.hero-stat-grid div{min-width:0;padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.055)}
.hero-stat-grid span{display:block;margin-bottom:4px;color:#aeb8c6;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.hero-stat-grid b{display:block;overflow:hidden;color:#fff;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.owner-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.owner-card{display:flex;align-items:center;gap:10px;min-width:0;padding:14px;border:1px solid var(--debt-border);border-radius:20px;background:#fff;box-shadow:0 5px 20px rgba(17,24,39,.035)}
.owner-avatar{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:13px;background:#111827;color:#fff;font-size:11px;font-weight:800}
.owner-avatar.spouse{background:#8b6b2c}
.owner-card>div:last-child{min-width:0}
.owner-card span{display:block;margin-bottom:3px;color:var(--debt-muted);font-size:11px;font-weight:700}
.owner-card b{display:block;overflow:hidden;font-size:15px;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}
.premium-breakdown{margin:0 0 18px!important;border:1px solid var(--debt-border)!important;border-radius:23px!important;background:#fff!important;box-shadow:var(--debt-card-shadow)!important}
.premium-breakdown .donut-wrap{padding:4px 0 12px}
.premium-breakdown .debt-donut{width:150px;height:150px}
.premium-breakdown .donut-hole{width:102px;height:102px}
.debt-list-section{margin-top:4px}
.debt-list-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 2px 10px}
.debt-list-head h2{margin:2px 0 0;font-size:25px;letter-spacing:-.04em}
.add-debt-button{min-height:43px!important;padding:0 14px!important;border-radius:14px!important;background:#111827!important;color:#fff!important;box-shadow:0 8px 18px rgba(17,24,39,.13)!important}
.add-debt-button span{font-size:18px}
.filter-chips{display:flex!important;gap:7px!important;overflow-x:auto!important;margin:0 -2px 8px!important;padding:2px 2px 5px!important;scrollbar-width:none}
.filter-chips::-webkit-scrollbar{display:none}
.chip{min-height:38px!important;padding:0 14px!important;border:1px solid #e4e6ea!important;border-radius:999px!important;background:#fff!important;color:#5f6672!important;font-size:12px!important;font-weight:750!important;box-shadow:none!important}
.chip.active{border-color:#111827!important;background:#111827!important;color:#fff!important}
.debt-search-wrap{margin:7px 0 8px!important}
.debt-search-wrap input{height:47px!important;border-color:#e4e6ea!important;border-radius:16px!important;background:#fff!important;box-shadow:none!important}
.debt-sort-row{margin:6px 2px 13px!important;color:#89909b!important}
.debt-sort-row select{border-color:#e4e6ea!important;background:#fff!important}
.premium-debt{position:relative;overflow:hidden;margin:0 0 11px!important;padding:17px!important;border:1px solid var(--debt-border)!important;border-radius:23px!important;background:#fff!important;box-shadow:var(--debt-card-shadow)!important}
.premium-debt.is-closed{opacity:.78}
.premium-debt-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.creditor-wrap{display:flex;align-items:center;gap:11px;min-width:0}
.creditor-avatar{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:14px;background:linear-gradient(145deg,#f4ead2,#fff8e8);color:#8b671f;font-size:12px;font-weight:850;border:1px solid #eee0bf}
.creditor-copy{min-width:0}
.creditor-copy b{display:block;overflow:hidden;font-size:16px;letter-spacing:-.018em;text-overflow:ellipsis;white-space:nowrap}
.creditor-copy span{display:block;overflow:hidden;margin-top:3px;color:#8a909a;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.currency-pill{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#f3f4f6;color:#5f6672;font-size:9px;font-weight:850;letter-spacing:.06em}
.premium-debt.is-closed .currency-pill{background:#e7f5ee;color:#13714c}
.debt-balance-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:17px}
.balance-label{display:block;margin-bottom:4px;color:#9aa0a9;font-size:9px;font-weight:800;letter-spacing:.13em}
.debt-balance-row strong{display:block;font-size:29px;line-height:1;letter-spacing:-.045em}
.debt-balance-row .equivalent{margin:5px 0 0;color:#8b9098;font-size:11px}
.debt-balance-row .gold-purity-label{display:inline-block;margin:5px 0 0;padding:3px 7px;border-radius:999px;background:#fff7df;color:#927020;font-size:9px}
.paid-circle{display:flex;flex:0 0 58px;width:58px;height:58px;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e7e9ed;border-radius:19px;background:#fafbfc}
.paid-circle b{font-size:14px}
.paid-circle span{margin-top:1px;color:#9aa0a9;font-size:8px;font-weight:700}
.debt-progress-track{height:6px;margin:14px 0 8px;border-radius:999px;background:#edf0f3;overflow:hidden}
.debt-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d7a63d,#e6c46c)}
.debt-number-row{display:flex;justify-content:space-between;gap:8px;color:#9298a2;font-size:10px}
.debt-number-row span{min-width:0}
.debt-number-row b{color:#59606a;font-size:10px}
.premium-debt .due-line{margin-top:12px;padding:9px 10px;border-radius:12px;background:#fafafa}
.premium-debt .debt-actions{display:grid!important;grid-template-columns:1.35fr 1fr auto;gap:7px!important;margin-top:14px!important}
.premium-debt .debt-actions .btn{min-width:0!important;min-height:43px!important;border-radius:13px!important;padding:0 10px!important;font-size:11px!important}
.pay-primary,.reopen-btn{background:#111827!important;color:#fff!important}
.paid-all-btn{padding-left:11px!important;padding-right:11px!important}
.payment-history,.plan-details,.bank-plan{margin-top:12px!important;border-top:1px solid #eef0f2;padding-top:9px}
.payment-history summary,.plan-details summary,.bank-plan summary{color:#676e78;font-size:11px}
.premium-empty{display:flex!important;min-height:210px;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:30px!important;border:1px dashed #d9dde3;border-radius:23px;background:#fff}
.premium-empty::before,.premium-empty::after{display:none!important}
.premium-empty b{color:#374151;font-size:16px}
.premium-empty span{color:#969da8;font-size:12px}
.tools-sheet{max-width:520px!important}
.tools-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tools-head h2{margin:2px 0 14px}
.modal-x{width:36px;height:36px;border:0;border-radius:12px;background:#f2f3f5;color:#5f6672;font-size:24px;line-height:1}
.tool-mini-card{margin:0 0 10px;padding:14px;border:1px solid #e7e9ed;border-radius:18px;background:#fafbfc}
.tool-mini-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tool-mini-card .rate-list{margin-top:10px}
.login{background:linear-gradient(160deg,#111827,#1e2a3b)!important}
.login-shell{max-width:430px}
.login-copy h1,.login-copy p{color:#fff!important}
.login .brand-mark{background:linear-gradient(145deg,#efd58d,#c99930)!important;color:#111827!important}
@media(max-width:430px){
  .debt-only-wrap{padding-top:calc(18px + env(safe-area-inset-top))!important}
  .premium-topbar{min-height:50px;padding-left:58px!important;margin-bottom:14px}
  .premium-topbar .page-kicker{display:none}
  .premium-topbar h1{margin-top:5px!important;font-size:28px}
  .premium-topbar .status-line{margin-top:3px;font-size:10px}
  .debt-category-tabs{margin-bottom:12px}
}
@media(max-width:390px){
  .debt-only-wrap{padding-left:10px!important;padding-right:10px!important}
  .premium-topbar{padding-left:58px!important}
  .debt-hero{padding:19px;border-radius:24px}
  .hero-amount{font-size:34px}
  .hero-stat-grid{grid-template-columns:1.4fr .8fr .8fr;gap:6px}
  .hero-stat-grid div{padding:9px 8px}
  .owner-card{padding:11px}
  .owner-avatar{width:34px;height:34px;flex-basis:34px;border-radius:12px}
  .premium-debt{padding:15px!important;border-radius:21px!important}
  .debt-balance-row strong{font-size:27px}
  .premium-debt .debt-actions{grid-template-columns:1fr 1fr}
  .paid-all-btn{grid-column:1/-1}
}
@media(max-width:340px){
  .hero-amount{font-size:31px}
  .owner-grid{grid-template-columns:1fr}
  .debt-number-row{flex-direction:column;gap:3px}
}

.debts-topbar{margin-bottom:20px}
#debts .debt-list-section{margin-top:0}
#debts .debt-list-head{align-items:center}

@media(max-width:360px){
  #debts .debt-list-head{align-items:flex-start;flex-direction:column}
  #debts .add-debt-button{width:100%}
  .hero-amount{font-size:29px}
}