/* ===========================================================
   คำนวณแผนปลดหนี้ — สไตล์หลัก (mobile first)
   =========================================================== */

:root{
  --bg:        #FAF6F0;
  --bg-soft:   #F3EBDF;
  --surface:   #FFFFFF;
  --surface-2: #FBF7F1;
  --line:      #E9DFD1;
  --line-2:    #DACDB9;

  --ink:   #2B2319;
  --ink-2: #574C40;
  --ink-3: #75695B;

  --green:     #116B34;
  --green-2:   #189A4E;
  --green-bg:  #E8F4EB;
  --green-line:#BFE0C9;

  --amber:     #96450A;
  --amber-bg:  #FDF2E0;
  --amber-line:#F0D9AE;

  --red:     #B21D16;
  --red-bg:  #FCEBE8;
  --red-line:#F2C8C1;

  --clay:    #9C512C;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --sh:    0 1px 2px rgba(43,35,25,.05), 0 6px 18px -12px rgba(43,35,25,.22);
  --sh-lg: 0 2px 6px rgba(43,35,25,.06), 0 22px 40px -26px rgba(43,35,25,.35);

  --fs-num: 'IBM Plex Sans Thai', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #15120E;
    --bg-soft:   #1D1813;
    --surface:   #221C16;
    --surface-2: #2A231C;
    --line:      #3A3128;
    --line-2:    #4B4036;

    --ink:   #F3EBE0;
    --ink-2: #C3B7A8;
    --ink-3: #948877;

    --green:     #56C97D;
    --green-2:   #6BD991;
    --green-bg:  #16321F;
    --green-line:#2C5B3B;

    --amber:     #F0AE55;
    --amber-bg:  #3A2A12;
    --amber-line:#5E4520;

    --red:     #F0837A;
    --red-bg:  #3B1A16;
    --red-line:#63302A;

    --clay:    #DD9A72;

    --sh:    0 1px 2px rgba(0,0,0,.4), 0 6px 18px -12px rgba(0,0,0,.7);
    --sh-lg: 0 2px 6px rgba(0,0,0,.45), 0 22px 40px -26px rgba(0,0,0,.9);
    color-scheme: dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }

/* ต้องมาก่อนทุกกฎที่ตั้งค่า display เอง ไม่งั้น .modal{display:grid} ฯลฯ
   จะชนะกฎ [hidden]{display:none} ของเบราว์เซอร์ แล้วซ่อนไม่ลง */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans Thai','Noto Sans Thai','Leelawadee UI',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* ข้อความไทยไม่มีช่องว่างระหว่างคำ — กันไม่ให้ประโยคยาวดันเลย์เอาต์ล้นจอ */
  overflow-wrap:break-word;
  word-break:normal;
  line-break:normal;
}
/* clip (ไม่ใช่ hidden) เพื่อไม่ให้ position:sticky ของแถบบนเสีย */
body{ overflow-x:clip; }
h1,h2,h3,h4{ margin:0; line-height:1.35; font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
input,select{ font:inherit; color:inherit; }
b,strong{ font-weight:600; }

.wrap{ width:100%; max-width:920px; margin:0 auto; padding:0 16px; }
.num, .n{ font-variant-numeric:tabular-nums; }

/* ---------------- topbar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark{
  width:34px; height:34px; flex:none; border-radius:10px;
  background:var(--green); color:#fff;
  display:grid; place-items:center;
}
.brand-mark svg{ width:20px; height:20px; }
.brand-text{ display:flex; flex-direction:column; min-width:0; }
.brand-text b{ font-size:16px; line-height:1.2; font-weight:700; }
.brand-text small{ font-size:11.5px; color:var(--ink-3); line-height:1.3; }
.topbar-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.save-state{ font-size:12px; color:var(--green); white-space:nowrap; }
.topbar-actions .btn-sm{ padding:9px 14px; }

/* ---------------- buttons ---------------- */
.btn{
  appearance:none; border:1px solid transparent; background:transparent;
  border-radius:999px; padding:11px 18px; font-size:15px; font-weight:600;
  cursor:pointer; transition:.16s ease; line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn:active{ transform:translateY(1px); }
.btn[hidden]{ display:none; }
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--sh); }
.btn-primary:hover{ background:var(--green-2); }
.btn-outline{ border-color:var(--line-2); background:var(--surface); color:var(--ink); }
.btn-outline:hover{ border-color:var(--green); color:var(--green); }
.btn-ghost{ background:var(--bg-soft); color:var(--ink-2); }
.btn-ghost:hover{ color:var(--ink); }
.btn-danger{ background:var(--red); color:#fff; }
.btn-sm{ padding:7px 13px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn-add{
  width:100%; border:1.5px dashed var(--line-2); color:var(--ink-2);
  background:transparent; border-radius:var(--r); padding:13px; font-size:15px;
  margin-top:4px;
}
.btn-add:hover{ border-color:var(--green); color:var(--green); background:var(--green-bg); }

/* ---------------- dashboard ---------------- */
.dash{
  background:linear-gradient(180deg, var(--bg-soft), var(--bg));
  border-bottom:1px solid var(--line);
  padding:18px 0 20px;
}
.hero{ display:flex; align-items:center; gap:16px; }
.hero-ring{ position:relative; width:96px; height:96px; flex:none; }
.ring{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:var(--line); stroke-width:10; }
.ring-fg{
  fill:none; stroke:var(--green); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:314.16; stroke-dashoffset:314.16;
  transition:stroke-dashoffset .5s ease;
}
.ring-label{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
}
.ring-label b{ font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.ring-label small{ font-size:10.5px; color:var(--ink-3); }
.hero-text{ flex:1; min-width:0; }
.hero-kicker{ font-size:12px; font-weight:600; color:var(--green); letter-spacing:.02em; }
.hero-title{ font-size:19px; font-weight:700; margin:2px 0 3px; }
.hero-sub{ font-size:13px; color:var(--ink-2); }
.hero-bar{
  margin-top:10px; height:8px; border-radius:99px; background:var(--line); overflow:hidden;
}
.hero-bar span{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--green),var(--green-2));
  transition:width .5s ease;
}
.hero-bar-meta, .metaline{
  display:flex; justify-content:space-between; gap:8px;
  font-size:11.5px; color:var(--ink-3); margin-top:5px; font-variant-numeric:tabular-nums;
}

.stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:16px;
}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; min-width:0;
}
.stat span{ display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35; }
.stat b{
  display:block; font-size:17px; font-weight:700; margin-top:2px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stat small{ display:block; font-size:11px; color:var(--ink-3); margin-top:1px; }
.stat.is-green b{ color:var(--green); }
.stat.is-amber b{ color:var(--amber); }
.stat.is-red b{ color:var(--red); }

.alerts{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.alert{
  display:flex; gap:9px; align-items:flex-start;
  border-radius:var(--r); padding:11px 13px; font-size:13.5px; line-height:1.5;
  border:1px solid;
}
.alert i{ font-style:normal; flex:none; font-size:15px; line-height:1.4; }
.alert > div{ min-width:0; }
.alert-red{ background:var(--red-bg); border-color:var(--red-line); color:var(--red); }
.alert-amber{ background:var(--amber-bg); border-color:var(--amber-line); color:var(--amber); }
.alert-green{ background:var(--green-bg); border-color:var(--green-line); color:var(--green); }
.alert b{ font-weight:700; }

/* ---------------- stepper ---------------- */
.stepper{
  position:sticky; top:56px; z-index:30;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.stepper-in{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.stepper-in::-webkit-scrollbar{ display:none; }
.step{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; gap:6px; padding:11px 10px;
  font-size:13.5px; font-weight:600; color:var(--ink-3); white-space:nowrap;
  border-bottom:2.5px solid transparent; flex:1; justify-content:center;
}
.step i{
  font-style:normal; width:20px; height:20px; border-radius:50%;
  background:var(--line); color:var(--ink-2);
  display:grid; place-items:center; font-size:11.5px; font-weight:700; flex:none;
}
.step.is-active{ color:var(--green); border-bottom-color:var(--green); }
.step.is-active i{ background:var(--green); color:#fff; }
.step.is-done i{ background:var(--green-bg); color:var(--green); }

/* ---------------- panel ---------------- */
.panel{ padding:20px 0 8px; }
.panel-head{ margin-bottom:16px; }
.panel-head h2{ font-size:20px; font-weight:700; }
.panel-head p{ font-size:13.5px; color:var(--ink-2); margin-top:4px; }

.grouphead{
  font-size:15px; font-weight:700; margin:24px 0 10px;
  display:flex; align-items:center; gap:8px;
}
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot-fixed{ background:var(--clay); }
.dot-var{ background:var(--green); }

.quickchips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.chip{
  appearance:none; border:1px solid var(--line-2); background:var(--surface);
  border-radius:999px; padding:9px 14px; font-size:13.5px; color:var(--ink-2);
  cursor:pointer; transition:.15s;
}
.chip:hover{ border-color:var(--green); color:var(--green); background:var(--green-bg); }

.list{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.empty{
  border:1.5px dashed var(--line-2); border-radius:var(--r); padding:22px 16px;
  text-align:center; color:var(--ink-3); font-size:13.5px;
}
.empty b{ display:block; color:var(--ink-2); font-size:15px; margin-bottom:4px; }
.empty .btn{ margin-top:10px; }

/* ---------------- cards / fields ---------------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px; box-shadow:var(--sh);
}
.card-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.card-top .f-name{ flex:1; min-width:0; }
.icon-btn{
  appearance:none; border:1px solid var(--line); background:var(--surface-2);
  width:38px; height:38px; border-radius:10px; flex:none; cursor:pointer;
  display:grid; place-items:center; color:var(--ink-3); font-size:16px; line-height:1;
}
.icon-btn:hover{ border-color:var(--red-line); color:var(--red); background:var(--red-bg); }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.field > label{ font-size:11.5px; color:var(--ink-3); font-weight:500; padding-left:2px; }
.field.span2{ grid-column:1 / -1; }

/* 16px คือเกณฑ์ที่ iOS Safari จะไม่ซูมหน้าจอตอนโฟกัสช่องกรอก */
input[type=text], input[type=number], input[type=month], select{
  width:100%; border:1px solid var(--line-2); background:var(--surface-2);
  border-radius:var(--r-sm); padding:10px 11px; font-size:16px;
  transition:.15s; min-width:0;
}
input:focus, select:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
  background:var(--surface);
}
select{
  appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%2375695B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
}
@media (prefers-color-scheme: dark){
  select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%23948877' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
.f-num{ font-variant-numeric:tabular-nums; text-align:right; }
.f-amount{ position:relative; }
.f-amount input{ padding-right:36px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.f-amount::after{
  content:'฿'; position:absolute; right:11px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:14px; pointer-events:none;
}
.f-pct{ position:relative; }
.f-pct input{ padding-right:32px; text-align:right; font-variant-numeric:tabular-nums; }
.f-pct::after{
  content:'%'; position:absolute; right:11px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:14px; pointer-events:none;
}

.seg{ display:flex; gap:0; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); }
.seg button{
  flex:1; appearance:none; border:0; background:transparent; padding:12px 4px;
  font-size:13.5px; font-weight:500; color:var(--ink-3); cursor:pointer; border-right:1px solid var(--line-2);
  white-space:nowrap;
}
.seg button:last-child{ border-right:0; }
.seg button.on{ background:var(--green); color:#fff; font-weight:600; }
.seg.seg-warm button.on{ background:var(--clay); }

.check{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer; padding-top:2px; }
.check input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--green); flex:none; }
.check small{ color:var(--ink-3); }
.check-inline{ margin-top:12px; }

.hint{ font-size:12px; color:var(--ink-3); line-height:1.5; margin-top:6px; }

/* ---------------- summary cards ---------------- */
.sumcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; margin-top:14px; box-shadow:var(--sh);
}
.sumcard-green{ background:var(--green-bg); border-color:var(--green-line); }
.sumcard-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:13.5px; color:var(--ink-2); padding:3px 0;
}
.sumcard-row b{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap; }
.sumcard-main{ font-size:15px; color:var(--ink); font-weight:600; }
.sumcard-main b{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.sumcard-green .sumcard-main b{ color:var(--green); }
.sumcard hr{ border:0; border-top:1px solid var(--line); margin:9px 0; }
.is-negative b{ color:var(--red) !important; }

/* ---------------- debt card ---------------- */
.debt{ padding:14px; }
.debt-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.debt-head .f-name{ flex:1; }
.debt-badge{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px;
  border-radius:999px; background:var(--bg-soft); color:var(--ink-2); border:1px solid var(--line);
}
.debt-metrics{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; margin-top:12px;
}
.dm{ background:var(--surface-2); padding:9px 10px; min-width:0; }
.dm span{ display:block; font-size:11px; color:var(--ink-3); }
.dm b{ display:block; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm.g b{ color:var(--green); }
.dm.a b{ color:var(--amber); }
.dm.r b{ color:var(--red); }

.progress{ margin-top:12px; }
.progress-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); margin-bottom:5px; }
.progress-top b{ color:var(--green); font-variant-numeric:tabular-nums; }
.bar{ height:9px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--green-2)); transition:width .4s; }

.spark{ margin-top:12px; }
.spark svg{ display:block; width:100%; height:64px; overflow:visible; }

.disc{
  appearance:none; border:0; background:transparent; color:var(--ink-3);
  font-size:13px; padding:8px 0 0; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; width:100%; text-align:left;
}
.disc:hover{ color:var(--green); }

/* ---------------- strategy ---------------- */
.strategy{ display:flex; flex-direction:column; gap:8px; }
.strat{
  appearance:none; text-align:left; cursor:pointer;
  border:1.5px solid var(--line-2); background:var(--surface);
  border-radius:var(--r); padding:12px 14px; transition:.16s;
  display:flex; flex-direction:column; gap:2px;
}
.strat b{ font-size:15.5px; font-weight:700; }
.strat small{ font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.strat:hover{ border-color:var(--green); }
.strat.on{ border-color:var(--green); background:var(--green-bg); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent); }
.strat.on b{ color:var(--green); }

.orderbox{
  margin-top:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px;
}
.orderbox h4{ font-size:13.5px; color:var(--ink-2); margin-bottom:8px; }
.orderlist{ display:flex; flex-direction:column; gap:6px; }
.orow{
  display:flex; align-items:center; gap:8px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-size:14px;
}
.orow i{ font-style:normal; font-weight:700; color:var(--green); width:18px; flex:none; font-variant-numeric:tabular-nums; }
.orow span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orow small{ color:var(--ink-3); font-size:11.5px; flex:none; font-variant-numeric:tabular-nums; }
.omove{
  appearance:none; border:1px solid var(--line-2); background:var(--surface); cursor:pointer;
  width:34px; height:34px; border-radius:9px; flex:none; color:var(--ink-2); font-size:13px; line-height:1;
}
.omove:disabled{ opacity:.3; cursor:default; }

/* ---------------- simulate ---------------- */
.simcard{
  margin-top:20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh);
}
.simcard-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.simcard-head > div:first-child{ min-width:0; }
.simcard-head h3{ font-size:16px; font-weight:700; }
.simval{ text-align:right; flex:none; }
.simval b{ display:block; font-size:24px; font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.15; }
.simval small{ font-size:11px; color:var(--ink-3); }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:28px;
  background:transparent; margin:8px 0 4px; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:99px; background:var(--line); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%; margin-top:-9px;
  background:var(--green); border:3px solid var(--surface); box-shadow:var(--sh);
}
input[type=range]::-moz-range-track{ height:8px; border-radius:99px; background:var(--line); }
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--green);
  border:3px solid var(--surface); box-shadow:var(--sh);
}
.simchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.simresult{ margin-top:12px; }
.simresult .alert{ margin:0; }

/* ---------------- tables ---------------- */
.tablewrap{
  border:1px solid var(--line); border-radius:var(--r); overflow-x:auto;
  background:var(--surface); -webkit-overflow-scrolling:touch;
}
.table{ width:100%; border-collapse:collapse; font-size:13px; min-width:440px; }
.table th, .table td{ padding:9px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); }
.table th{
  background:var(--surface-2); font-weight:600; color:var(--ink-3); font-size:11.5px;
  position:sticky; top:0; z-index:1;
}
.table td{ font-variant-numeric:tabular-nums; }
.table th:first-child, .table td:first-child{ text-align:left; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr.zebra{ background:var(--surface-2); }
.table .cell-strong{ font-weight:600; }
.table .cell-int{ color:var(--amber); }
.table .cell-prin{ color:var(--green); }

.table-compare{ min-width:520px; }
.table-compare tr.on td{ background:var(--green-bg); }
.table-compare tr.on td:first-child{ font-weight:700; color:var(--green); }
.table-compare td .tag{
  display:inline-block; font-size:10.5px; padding:1px 6px; border-radius:99px;
  background:var(--green); color:#fff; margin-left:6px; font-weight:600; vertical-align:middle;
}
.table-compare .save-pos{ color:var(--green); font-weight:600; }
.table-compare .save-none{ color:var(--ink-3); }

/* ---------------- chart ---------------- */
.chartcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 12px 8px; box-shadow:var(--sh);
}
.chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--ink-2); margin-bottom:8px; padding:0 2px; }
.legend i{ display:inline-block; width:16px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; }

/* ---------------- payoff list ---------------- */
.payofflist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.payofflist li{
  display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; box-shadow:var(--sh);
}
.payofflist .rank{
  width:26px; height:26px; border-radius:50%; background:var(--green-bg); color:var(--green);
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:none;
}
.payofflist .who{ flex:1; min-width:0; }
.payofflist .who b{ display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.payofflist .who small{ font-size:11.5px; color:var(--ink-3); }
.payofflist .when{ text-align:right; flex:none; font-variant-numeric:tabular-nums; }
.payofflist .when b{ display:block; font-size:14px; color:var(--green); }
.payofflist .when small{ font-size:11px; color:var(--ink-3); }
.payofflist li.never .rank{ background:var(--red-bg); color:var(--red); }
.payofflist li.never .when b{ color:var(--red); }

/* ---------------- nav / save / disclaimer ---------------- */
.navbtns{ display:flex; gap:10px; margin:24px 0 8px; }
.navbtns .btn{ flex:1; }
.savebar{ margin:16px 0; text-align:center; }
.disclaimer{
  margin:20px 0 32px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.disclaimer b{ display:block; margin-bottom:4px; color:var(--ink); font-size:13.5px; }

.foot{ border-top:1px solid var(--line); padding:18px 0 28px; }
.foot p{ font-size:12px; color:var(--ink-3); text-align:center; }

/* ---------------- modal / toast ---------------- */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(30,24,17,.55); backdrop-filter:blur(3px); }
.modal-box{
  background:var(--surface); border-radius:var(--r-lg); padding:20px; max-width:400px; width:100%;
  box-shadow:var(--sh-lg); border:1px solid var(--line);
}
.modal-box h3{ font-size:17px; font-weight:700; }
.modal-box p{ font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.55; }
.modal-actions{ display:flex; gap:8px; margin-top:18px; }
.modal-actions .btn{ flex:1; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:500; z-index:110; box-shadow:var(--sh-lg);
  animation:pop .25s ease;
}
@keyframes pop{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }

/* ---------------- desktop ---------------- */
@media (min-width:640px){
  .stats{ grid-template-columns:repeat(4,1fr); gap:10px; }
  .grid3{ grid-template-columns:1fr 1fr 1fr; }
  .debt-metrics{ grid-template-columns:repeat(4,1fr); }
  .hero-ring{ width:112px; height:112px; }
  .hero-title{ font-size:23px; }
  .panel-head h2{ font-size:24px; }
  .strategy{ flex-direction:row; }
  .strat{ flex:1; }
  .table{ font-size:13.5px; }
  .navbtns .btn{ flex:0 1 200px; }
  .navbtns{ justify-content:space-between; }
  .btn-add{ width:auto; padding-left:28px; padding-right:28px; }
}
@media (min-width:900px){
  .wrap{ padding:0 24px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}