@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0b0f14;--surface:#121821;--surface2:#161e28;--border:#222c38;--text:#f4f7fb;--muted:#8f9aaa;--accent:#8b5cf6;--accent2:#6d45d9;--green:#31c48d;--yellow:#f5b74b;--red:#ff6b78;--shadow:0 20px 55px rgba(0,0,0,.24)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 15% -10%,rgba(139,92,246,.16),transparent 32%),var(--bg);color:var(--text);font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.45;padding-bottom:88px}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.container{width:min(1100px,calc(100% - 32px));margin-inline:auto}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:-.03em}.logo-dot,.brand-mark span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#4f46e5);box-shadow:0 9px 22px rgba(109,69,217,.3);font-weight:800}.avatar{width:40px;height:40px;border:1px solid var(--border);background:linear-gradient(145deg,#1d2632,#111820);border-radius:50%;display:grid;place-items:center;font-weight:800}.page{padding:26px 0}.hero-row,.page-title{margin:12px 0 24px}.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.eyebrow{font-size:11px;letter-spacing:.16em;color:#777f8d;font-weight:800}.hero-row h1,.page-title h1{font-size:clamp(30px,6vw,44px);line-height:1.05;letter-spacing:-.045em;margin:7px 0}.muted{color:var(--muted);margin:0}.summary-card{background:linear-gradient(145deg,#171d2c,#111820 70%);border:1px solid #283244;border-radius:26px;padding:26px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);position:relative;overflow:hidden}.summary-card:after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(139,92,246,.12);right:-70px;top:-100px;filter:blur(6px)}.summary-label{font-size:11px;letter-spacing:.16em;color:#8c95a5;font-weight:800}.summary-amount{font-size:clamp(31px,8vw,52px);letter-spacing:-.055em;font-weight:800;margin:4px 0}.summary-meta{color:#8f99a7;font-size:13px}.positive{color:var(--green)}.summary-icon{width:54px;height:54px;border:1px solid #3a3e52;background:rgba(139,92,246,.12);border-radius:18px;display:grid;place-items:center;color:#c2b4ff;font-size:24px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 28px}.mini-card{background:rgba(18,24,33,.82);border:1px solid var(--border);border-radius:20px;padding:18px}.mini-card span,.mini-card small{display:block;color:var(--muted);font-size:12px}.mini-card strong{display:block;font-size:20px;letter-spacing:-.03em;margin:5px 0}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:30px 0 12px}.section-head h2,.month-heading h2{margin:0;font-size:19px;letter-spacing:-.035em}.section-head span,.month-heading span{font-size:12px;color:var(--muted)}.text-link{font-size:13px;color:#c7b8ff;font-weight:700}.debt-list,.debt-grid{display:grid;gap:12px}.debt-card{display:block;background:rgba(18,24,33,.9);border:1px solid var(--border);border-radius:22px;padding:18px;transition:transform .18s ease,border-color .18s ease,background .18s ease}.debt-card:hover{transform:translateY(-2px);border-color:#364151;background:#151d27}.debt-main{display:flex;align-items:center;gap:13px}.debt-icon{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;font-weight:800;font-size:19px;flex:0 0 auto}.debt-icon.purple{background:rgba(139,92,246,.16);color:#c8b8ff}.debt-icon.blue{background:rgba(59,130,246,.16);color:#9bc3ff}.debt-icon.green{background:rgba(49,196,141,.14);color:#78e6bc}.debt-icon.orange{background:rgba(245,183,75,.14);color:#ffd27d}.debt-icon.red{background:rgba(255,107,120,.14);color:#ff9ca6}.debt-main h3{font-size:16px;margin:0 0 2px;letter-spacing:-.02em}.debt-main p{margin:0;color:var(--muted);font-size:12px}.chevron{margin-left:auto;color:#657080;font-size:28px;font-weight:300}.debt-numbers{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}.debt-numbers strong{font-size:20px;letter-spacing:-.03em}.debt-numbers span{color:var(--muted);font-size:12px}.progress{height:7px;background:#202833;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#a78bfa)}.progress.large{height:9px;margin-top:19px}.debt-foot{display:flex;justify-content:space-between;gap:10px;color:#737e8e;font-size:11px;margin-top:10px}.upcoming-list,.installment-list,.settings-card,.admin-list{display:grid;gap:9px}.upcoming-row,.installment-row,.setting-row,.admin-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);background:rgba(18,24,33,.78);border-radius:18px}.date-box{width:45px;height:45px;border-radius:13px;background:#1a222d;display:grid;place-items:center;align-content:center;line-height:1}.date-box b{font-size:16px}.date-box span{font-size:9px;color:#8d98a7;text-transform:uppercase;margin-top:4px}.upcoming-info,.inst-info,.admin-main{min-width:0;display:grid;gap:2px;flex:1}.upcoming-info strong,.inst-info strong,.admin-main strong{font-size:13px}.upcoming-info span,.inst-info span,.admin-main span{font-size:11px;color:var(--muted)}.upcoming-amount{text-align:right;display:grid;justify-items:end;gap:5px}.upcoming-amount b,.inst-right b,.admin-amount b{font-size:13px}.pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.pill.success{background:rgba(49,196,141,.12);color:#6ce4b2}.pill.warning{background:rgba(245,183,75,.12);color:#ffd27d}.pill.danger{background:rgba(255,107,120,.12);color:#ff9ca6}.pill.muted{background:#1d2631;color:#929cab}.bottom-nav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:20;width:min(430px,calc(100% - 24px));padding:8px;border:1px solid #283240;border-radius:24px;background:rgba(15,20,27,.88);backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 18px 60px rgba(0,0,0,.45)}.bottom-nav a{display:grid;justify-items:center;gap:3px;padding:9px 4px;border-radius:17px;color:#748092;font-size:10px;font-weight:700}.bottom-nav a span{font-size:18px}.bottom-nav a.active{color:#fff;background:#1b2330}.auth-body{min-height:100svh;display:grid;place-items:center;padding:28px 16px}.auth-shell{width:min(430px,100%)}.brand-mark{margin-bottom:24px}.brand-mark span{width:52px;height:52px;border-radius:17px;font-size:21px}.auth-shell h1{font-size:42px;line-height:1.03;letter-spacing:-.055em;margin:7px 0 12px}.auth-shell h1 em{font-style:normal;color:#b9a8ff}.auth-sub{color:var(--muted);font-size:14px;max-width:330px}.auth-card,.form-card{margin-top:24px;padding:20px;border:1px solid var(--border);background:rgba(18,24,33,.92);border-radius:23px;box-shadow:var(--shadow)}label{display:block;color:#a9b2bf;font-size:12px;font-weight:700;margin:4px 0 8px}input,select{width:100%;border:1px solid #2a3542;background:#0f151c;color:var(--text);padding:13px 14px;border-radius:14px;outline:none;margin-bottom:14px}input:focus,select:focus{border-color:#6f59b8;box-shadow:0 0 0 3px rgba(139,92,246,.11)}.password-wrap{display:flex;align-items:center;position:relative}.password-wrap input{padding-right:48px}.icon-btn{position:absolute;right:7px;top:5px;width:38px;height:38px;border:0;background:transparent;color:#8b96a6}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 16px;border-radius:14px;font-weight:800;border:1px solid transparent}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;box-shadow:0 10px 24px rgba(109,69,217,.25)}.btn.secondary{background:#171f29;border-color:#2a3542}.btn.full{width:100%}.alert{border-radius:13px;padding:11px 12px;font-size:12px;margin-bottom:14px}.alert.danger{background:rgba(255,107,120,.1);color:#ff9ca6;border:1px solid rgba(255,107,120,.2)}.alert.success{background:rgba(49,196,141,.1);color:#6ce4b2;border:1px solid rgba(49,196,141,.2)}.auth-foot{color:#697586;font-size:11px;margin-top:16px;text-align:center}.action-row{display:flex;gap:10px;margin:12px 0 18px;flex-wrap:wrap}.action-row form{margin:0}.detail-hero{background:linear-gradient(145deg,#171d2c,#121821);border:1px solid #2a3343;border-radius:26px;padding:22px}.detail-hero h1{margin:5px 0 0;font-size:28px;letter-spacing:-.04em}.detail-total{margin-top:25px}.detail-total span,.detail-total small{display:block;color:var(--muted);font-size:11px}.detail-total strong{font-size:36px;letter-spacing:-.05em;display:block;margin:3px 0}.installment-row{position:relative}.installment-no{width:32px;color:#586474;font-weight:800;font-size:11px}.inst-right{text-align:right;display:grid;gap:5px;justify-items:end}.check-btn,.undo-btn{width:36px;height:36px;border-radius:12px;border:1px solid #2e3a46;background:#16221e;color:#68e2b1;font-weight:900}.undo-btn{background:#202832;color:#a8b2c0}.back-link{display:inline-flex;gap:6px;align-items:center;color:#a5aebc;font-size:13px;font-weight:700}.empty-card{text-align:center;padding:28px;border:1px dashed #2b3644;color:#7e8998;border-radius:20px}.month-block{margin-top:22px}.month-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px}.profile-banner{display:flex;align-items:center;gap:14px;padding:6px 0 24px}.big-avatar{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#28213b,#151c26);border:1px solid #3a3150;font-size:24px;font-weight:800}.big-avatar.small{width:44px;height:44px;border-radius:14px;font-size:16px}.profile-banner h1{margin:3px 0;font-size:28px;letter-spacing:-.04em}.setting-row{justify-content:space-between}.setting-row>span{font-size:18px;width:28px}.setting-row>div{flex:1;display:grid;gap:1px}.setting-row strong{font-size:13px}.setting-row small{font-size:11px;color:var(--muted)}.setting-row>b{color:#657080;font-size:23px;font-weight:400}.danger-link{color:#ff8994}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-amount{text-align:right;display:grid;justify-items:end;gap:3px}.admin-amount a{font-size:11px;color:#bbaaff;font-weight:700}.delete-form{margin-top:10px}.button-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}
@media(min-width:800px){.debt-grid{grid-template-columns:1fr 1fr}.bottom-nav{display:none}.hero-row{margin-top:25px}.page{padding-bottom:50px}.summary-card{padding:32px}}
@media(max-width:540px){.hide-mobile{display:none}.container{width:min(100% - 22px,1100px)}.topbar{height:64px}.page{padding-top:18px}.summary-card{padding:21px;border-radius:22px}.summary-amount{font-size:34px}.mini-card{padding:15px}.debt-card{padding:16px}.upcoming-row,.installment-row,.setting-row,.admin-row{padding:12px}.upcoming-amount b,.inst-right b{font-size:12px}.auth-shell h1{font-size:36px}.form-grid{grid-template-columns:1fr}.detail-hero{padding:18px;border-radius:22px}}
/* Borcum v5 dashboard */
.mini-grid-3{grid-template-columns:repeat(3,1fr)}
.next-month-card{background:linear-gradient(145deg,rgba(32,25,55,.95),rgba(18,24,33,.9));border-color:#3a3150}
@media(max-width:540px){.mini-grid-3{gap:8px}.mini-grid-3 .mini-card{padding:13px 11px;border-radius:17px}.mini-grid-3 .mini-card span,.mini-grid-3 .mini-card small{font-size:10px}.mini-grid-3 .mini-card strong{font-size:16px;white-space:nowrap}.mini-grid-3 .mini-card small{line-height:1.2}.bottom-nav a{font-size:9px}}

.detail-actions{display:flex;gap:8px;margin-top:16px}.detail-actions .btn{min-height:40px}.edit-inst-btn{width:36px;height:36px;border-radius:12px;border:1px solid #2e3947;background:#171f29;color:#bcaaff;display:grid;place-items:center;font-weight:800;font-size:16px;flex:0 0 auto}.edit-summary{border:1px solid #2a3542;background:#0f151c;border-radius:16px;padding:14px 15px;margin:4px 0 16px}.edit-summary span,.edit-summary small{display:block;color:var(--muted);font-size:11px}.edit-summary strong{display:block;font-size:22px;margin:4px 0}.edit-summary small{line-height:1.35}.detail-actions{flex-wrap:wrap}@media(max-width:540px){.detail-actions .btn{width:100%}}

/* V7 mobile hardening */
html, body { max-width:100%; overflow-x:hidden; }
.container { min-width:0; width:min(100% - 22px,1100px); }
.detail-hero, .summary-card, .debt-card, .installment-row, .upcoming-row, .setting-row, .admin-row, .form-card, .auth-card { min-width:0; max-width:100%; }
.debt-main > div:not(.debt-icon), .inst-info, .upcoming-info, .admin-main { min-width:0; }
.inst-info strong, .inst-info span, .upcoming-info strong, .upcoming-info span, .admin-main strong, .admin-main span { overflow-wrap:anywhere; }
.detail-actions { width:100%; }
.detail-actions .btn { max-width:100%; }

@media(max-width:600px){
  .container { width:calc(100% - 20px); }
  .topbar { width:calc(100% - 20px); }
  .page { padding-bottom:104px; }
  .detail-hero { width:100%; padding:16px; border-radius:20px; }
  .detail-total { width:100%; min-width:0; }
  .detail-total strong { font-size:clamp(28px,9vw,36px); line-height:1.08; max-width:100%; overflow-wrap:anywhere; }
  .detail-total small { overflow-wrap:anywhere; }
  .progress.large { width:100%; max-width:100%; }
  .detail-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  .detail-actions .btn { width:100%; min-width:0; }
  .section-head { gap:10px; flex-wrap:wrap; }
  .installment-list { width:100%; min-width:0; }
  .installment-row { width:100%; min-width:0; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 10px; }
  .installment-no { width:26px; flex:0 0 26px; }
  .inst-info { flex:1 1 90px; min-width:90px; }
  .inst-info strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .inst-right { flex:0 0 auto; min-width:72px; }
  .installment-row form { flex:0 0 auto; margin:0; }
  .check-btn, .undo-btn, .edit-inst-btn { width:34px; height:34px; flex:0 0 34px; }
  .bottom-nav { bottom:8px; width:calc(100% - 16px); }
  .bottom-nav a { min-width:0; }
  .summary-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .summary-icon { grid-column:2; grid-row:1; }
  .summary-card > div:first-child { min-width:0; }
  .summary-amount { overflow-wrap:anywhere; }
  .mini-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mini-grid-3 .mini-card { min-width:0; }
  .mini-grid-3 .mini-card strong { overflow-wrap:anywhere; white-space:normal; }
  .debt-card { min-width:0; }
  .debt-main { min-width:0; }
  .debt-main h3, .debt-main p { overflow-wrap:anywhere; }
  .debt-numbers { gap:10px; align-items:flex-start; }
  .debt-numbers strong { overflow-wrap:anywhere; }
  .debt-foot { flex-wrap:wrap; }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  input, select { min-width:0; max-width:100%; }
}

@media(max-width:360px){
  .container, .topbar { width:calc(100% - 16px); }
  .detail-hero { padding:14px; }
  .detail-total strong { font-size:30px; }
  .installment-row { gap:6px; }
  .inst-right { min-width:66px; }
  .inst-right b { font-size:11px; }
  .pill { font-size:8px; padding:3px 6px; }
}


/* V8 — strict responsive layout */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { min-inline-size: 0; }
body { inline-size: 100%; max-inline-size: 100%; overflow-x: clip; }
.container { inline-size: min(1100px, calc(100% - 24px)); max-inline-size: 100%; margin-inline: auto; }
.page { max-inline-size: 100%; }
.detail-hero, .summary-card, .debt-card, .installment-list, .installment-row { inline-size: 100%; max-inline-size: 100%; }
.debt-main, .detail-total, .section-head, .debt-numbers, .debt-foot { min-inline-size: 0; max-inline-size: 100%; }
.debt-main > div:not(.debt-icon), .inst-info, .inst-right { min-inline-size: 0; max-inline-size: 100%; }
.debt-main h1, .detail-total strong, .debt-numbers strong, .debt-numbers span, .inst-info strong, .inst-info span, .inst-right b { overflow-wrap: anywhere; }
.detail-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; }
.detail-actions .btn { width: 100%; max-width: 100%; }
.installment-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "no info right" "no actions actions"; align-items: center; column-gap: 8px; row-gap: 7px; }
.installment-no { grid-area: no; width: 26px; }
.installment-row .inst-info { grid-area: info; }
.installment-row .inst-right { grid-area: right; justify-self: end; }
.installment-row .inst-actions { grid-area: actions; justify-self: end; display: flex; gap: 7px; align-items: center; min-width: 0; }
.installment-row .inst-actions form { margin: 0; }
.installment-row .inst-actions .check-btn,
.installment-row .inst-actions .undo-btn,
.installment-row .inst-actions .edit-inst-btn { flex: 0 0 36px; }
.bottom-nav { max-inline-size: calc(100% - 16px); }

@media (max-width: 700px) {
  .container { inline-size: calc(100% - 16px); }
  .topbar { inline-size: calc(100% - 16px); }
  .page { padding-top: 14px; padding-bottom: 100px; }
  .detail-hero { padding: 15px; border-radius: 18px; }
  .detail-total strong { font-size: clamp(27px, 8vw, 35px); }
  .mini-grid-3 { grid-template-columns: 1fr; }
  .mini-grid-3 .mini-card { padding: 14px; }
  .debt-numbers { flex-wrap: wrap; }
  .debt-foot { gap: 6px 14px; }
  .installment-row { padding: 10px; border-radius: 15px; }
  .inst-right { min-width: 0; text-align: right; }
  .inst-right b { font-size: 12px; }
  .detail-actions { margin-top: 14px; }
  .bottom-nav { bottom: 6px; width: calc(100% - 12px); padding: 6px; border-radius: 20px; }
}
@media (max-width: 420px) {
  .container { inline-size: calc(100% - 12px); }
  .topbar { inline-size: calc(100% - 12px); }
  .detail-hero { padding: 13px; }
  .debt-icon { width: 40px; height: 40px; border-radius: 13px; }
  .detail-hero h1 { font-size: 24px; }
  .detail-total strong { font-size: 29px; }
  .installment-row { grid-template-columns: 22px minmax(0,1fr) auto; column-gap: 6px; }
  .installment-no { width: 22px; font-size: 10px; }
  .inst-right b { font-size: 11px; }
  .inst-actions .check-btn, .inst-actions .undo-btn, .inst-actions .edit-inst-btn { width: 33px; height: 33px; flex-basis: 33px; border-radius: 10px; }
}


/* V9 — clean mobile installment cards */
body { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
.installment-list { gap: 10px; }
.installment-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(82px, auto);
  grid-template-areas: "no info right" "no info actions";
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  width: 100%;
  min-height: 104px;
  padding: 13px 14px;
  border: 1px solid #222d3b;
  border-radius: 18px;
  background: #111821;
  box-shadow: none;
}
.installment-row + .installment-row { margin-top: 0; }
.installment-no { grid-area: no; width: 30px; align-self: center; font-size: 11px; color: #526074; }
.installment-row .inst-info { grid-area: info; min-width: 0; align-self: center; }
.inst-info strong { font-size: 15px; line-height: 1.2; }
.inst-info span { font-size: 11px; line-height: 1.25; }
.installment-row .inst-right {
  grid-area: right;
  min-width: 82px;
  justify-self: end;
  align-self: center;
  text-align: right;
  display: grid;
  gap: 4px;
  justify-items: end;
}
.inst-right b { font-size: 14px; white-space: nowrap; }
.installment-row .inst-actions {
  grid-area: actions;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.installment-row .inst-actions form { margin: 0; padding: 0; }
.check-btn, .undo-btn, .edit-inst-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  border: 1px solid #2b3948;
  box-shadow: none;
}
.check-btn { background: #13231e; color: #67dfad; }
.undo-btn { background: #1a222c; color: #9aa6b5; }
.edit-inst-btn { background: #171e28; color: #b8a5ff; text-decoration: none; }
.pill { font-size: 9px; padding: 4px 8px; }
.bottom-nav { bottom: calc(8px + env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
  body { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
  .installment-list { gap: 10px; }
  .installment-row {
    grid-template-columns: 25px minmax(0, 1fr) auto;
    grid-template-areas: "no info right" "no info actions";
    column-gap: 9px;
    row-gap: 7px;
    min-height: 100px;
    padding: 12px;
    border-radius: 17px;
  }
  .installment-no { width: 25px; font-size: 10px; }
  .inst-info strong { font-size: 15px; }
  .inst-info span { font-size: 11px; }
  .installment-row .inst-right { min-width: 76px; }
  .inst-right b { font-size: 13px; }
  .installment-row .inst-actions { gap: 9px; }
  .check-btn, .undo-btn, .edit-inst-btn { width: 37px; height: 37px; flex-basis: 37px; }
}

@media (max-width: 380px) {
  .installment-row { grid-template-columns: 22px minmax(0,1fr) auto; column-gap: 7px; padding: 11px; }
  .installment-row .inst-right { min-width: 70px; }
  .inst-right b { font-size: 12px; }
  .pill { font-size: 8px; padding: 3px 7px; }
  .installment-row .inst-actions { gap: 7px; }
  .check-btn, .undo-btn, .edit-inst-btn { width: 35px; height: 35px; flex-basis: 35px; }
}

/* V10 — mobile spacing / no-touch controls */
.form-card > .btn.full { display:flex; width:100%; min-height:52px; margin-top:12px; }
.form-card > .btn.full + .btn.full { margin-top:10px; }
.form-card input[type="date"] { min-width:0; max-width:100%; width:100%; box-sizing:border-box; }
@media (max-width:600px) {
  .form-card { padding:16px; border-radius:20px; }
  .form-card label { margin-top:8px; margin-bottom:7px; }
  .form-card input, .form-card select { min-height:52px; border-radius:15px; margin-bottom:12px; }
  .form-card > .btn.full { min-height:52px; border-radius:16px; margin-top:12px; }
  .form-card > .btn.full + .btn.full { margin-top:10px; }
  .page-title { margin-bottom:18px; }
  .page-title h1 { font-size:38px; }
  .page-title .muted { font-size:16px; line-height:1.35; }
  .detail-hero { padding:16px; }
  .detail-actions { gap:10px; }
}
@media (max-width:380px) {
  .form-card { padding:14px; }
  .form-card > .btn.full { min-height:50px; }
}


/* V11 — final mobile layout: compact installment cards + hard overflow protection */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, video, canvas { max-width:100%; }

@media (max-width: 600px) {
  body { padding-bottom: 165px !important; }
  .container { width: calc(100% - 24px) !important; max-width:100% !important; }
  .page { min-width:0 !important; }

  /* Forms: native iOS date controls must stay inside the card */
  .form-card { width:100% !important; max-width:100% !important; overflow:hidden !important; padding:16px !important; }
  .form-card input,
  .form-card select,
  .form-card input[type="date"] {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
    -webkit-appearance:none;
    appearance:none;
    font-size:16px !important;
  }
  .form-card input[type="date"] {
    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  /* Compact installment card */
  .installment-list { width:100% !important; max-width:100% !important; gap:10px !important; }
  .installment-row {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) auto !important;
    grid-template-areas:
      "no info meta"
      "no actions actions" !important;
    column-gap:9px !important;
    row-gap:8px !important;
    align-items:center !important;
    padding:13px 12px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .installment-no { grid-area:no; width:auto !important; align-self:center; }
  .installment-row .inst-info { grid-area:info; min-width:0 !important; max-width:100% !important; }
  .installment-row .inst-info strong,
  .installment-row .inst-info span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .installment-row .inst-info strong { font-size:14px !important; }
  .installment-row .inst-info span { font-size:11px !important; }

  /* Amount + status sit side by side */
  .installment-row .inst-right {
    grid-area:meta;
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:right !important;
    white-space:nowrap !important;
  }
  .installment-row .inst-right b { font-size:13px !important; white-space:nowrap !important; }
  .installment-row .inst-right .pill { font-size:9px !important; padding:4px 8px !important; }

  .installment-row .inst-actions {
    grid-area:actions;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
  }
  .installment-row .inst-actions form { margin:0 !important; padding:0 !important; }
  .installment-row .inst-actions button,
  .installment-row .inst-actions .edit-inst-btn {
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    flex:0 0 36px !important;
    padding:0 !important;
    border-radius:11px !important;
  }

  /* Keep the fixed nav from covering the final cards */
  .bottom-nav {
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    width:calc(100% - 24px) !important;
    max-width:430px !important;
  }
}

@media (max-width: 390px) {
  .installment-row {
    grid-template-columns:25px minmax(0,1fr) auto !important;
    column-gap:7px !important;
    padding:11px 10px !important;
  }
  .installment-row .inst-right { gap:5px !important; }
  .installment-row .inst-right b { font-size:12px !important; }
  .installment-row .inst-right .pill { font-size:8px !important; padding:3px 7px !important; }
  .installment-row .inst-actions { gap:7px !important; }
  .installment-row .inst-actions button,
  .installment-row .inst-actions .edit-inst-btn {
    width:34px !important; height:34px !important; min-width:34px !important; max-width:34px !important; flex-basis:34px !important;
  }
}

/* V12 — mobile single-line installment layout */
@media (max-width:600px){
  .installment-list{gap:8px!important}
  .installment-row{
    display:grid!important;
    grid-template-columns:24px minmax(70px,1fr) auto auto 34px 34px!important;
    grid-template-areas:"no info amount status pay edit"!important;
    align-items:center!important;
    column-gap:5px!important;
    row-gap:0!important;
    min-height:72px!important;
    height:72px!important;
    padding:9px 8px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .installment-no{grid-area:no!important;width:24px!important;font-size:10px!important;text-align:center!important}
  .installment-row .inst-info{grid-area:info!important;min-width:0!important;display:grid!important;gap:1px!important}
  .installment-row .inst-info strong{font-size:13px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .installment-row .inst-info span{font-size:9px!important;line-height:1.1!important;white-space:nowrap!important}
  .installment-row .inst-right{display:contents!important}
  .installment-row .inst-right b{grid-area:amount!important;font-size:12px!important;line-height:1!important;white-space:nowrap!important;text-align:right!important}
  .installment-row .inst-right .pill{grid-area:status!important;font-size:8px!important;line-height:1!important;padding:5px 7px!important;border-radius:999px!important;white-space:nowrap!important}
  .installment-row .inst-actions{display:contents!important}
  .installment-row .inst-actions form{display:contents!important}
  .installment-row .inst-actions button,
  .installment-row .inst-actions .edit-inst-btn{
    width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;flex:0 0 34px!important;border-radius:10px!important;padding:0!important;display:grid!important;place-items:center!important;font-size:18px!important
  }
  .installment-row .inst-actions form:first-child button{grid-area:pay!important}
  .installment-row .inst-actions .edit-inst-btn{grid-area:edit!important}
  .section-head{margin-top:24px!important;margin-bottom:10px!important}
  body{padding-bottom:205px!important}
  .bottom-nav{z-index:20!important}
}
@media (max-width:380px){
  .installment-row{grid-template-columns:21px minmax(62px,1fr) auto auto 32px 32px!important;column-gap:4px!important;padding:8px 6px!important;min-height:68px!important;height:68px!important}
  .installment-no{width:21px!important;font-size:9px!important}
  .installment-row .inst-info strong{font-size:12px!important}
  .installment-row .inst-info span{font-size:8px!important}
  .installment-row .inst-right b{font-size:11px!important}
  .installment-row .inst-right .pill{font-size:7px!important;padding:4px 6px!important}
  .installment-row .inst-actions button,.installment-row .inst-actions .edit-inst-btn{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;font-size:17px!important}
}

/* V14 — reference mobile installment UI: slim one-line rows */
.installment-row,
.installment-row * { box-sizing: border-box; }

@media (max-width: 600px) {
  .installment-list { gap: 8px !important; }
  .installment-row {
    display: grid !important;
    grid-template-columns: 22px minmax(74px, 1fr) auto auto 30px 30px !important;
    grid-template-areas: "no info amount status pay edit" !important;
    align-items: center !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    height: 62px !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(42, 53, 66, .88) !important;
    border-radius: 14px !important;
    background: #111820 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .installment-no {
    grid-area: no !important;
    width: 22px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 9px !important;
    color: #647084 !important;
    line-height: 1 !important;
  }

  .installment-row .inst-info {
    grid-area: info !important;
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    gap: 1px !important;
    overflow: hidden !important;
  }

  .installment-row .inst-info strong {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .installment-row .inst-info span {
    min-width: 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    color: #738094 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .installment-row .inst-right {
    display: contents !important;
    min-width: 0 !important;
  }

  .installment-row .inst-right b {
    grid-area: amount !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .installment-row .inst-right .pill {
    grid-area: status !important;
    justify-self: end !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .installment-row .inst-actions {
    display: contents !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .installment-row .inst-actions form {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .installment-row .inst-actions form:first-child button {
    grid-area: pay !important;
  }

  .installment-row .inst-actions .edit-inst-btn {
    grid-area: edit !important;
  }

  .installment-row .inst-actions button,
  .installment-row .inst-actions .edit-inst-btn {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .check-btn {
    border: 1px solid rgba(49,196,141,.20) !important;
    background: #14251f !important;
    color: #67dfad !important;
  }

  .undo-btn {
    border: 1px solid #2a3542 !important;
    background: #181f28 !important;
    color: #aeb7c3 !important;
  }

  .edit-inst-btn {
    border: 1px solid rgba(139,92,246,.20) !important;
    background: #191623 !important;
    color: #b9a7ff !important;
  }
}

@media (max-width: 370px) {
  .installment-row {
    grid-template-columns: 20px minmax(68px, 1fr) auto auto 28px 28px !important;
    column-gap: 4px !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 7px 7px !important;
    border-radius: 13px !important;
  }
  .installment-no { width: 20px !important; font-size: 8px !important; }
  .installment-row .inst-info strong { font-size: 11px !important; }
  .installment-row .inst-info span { font-size: 8px !important; }
  .installment-row .inst-right b { font-size: 10px !important; }
  .installment-row .inst-right .pill { font-size: 6px !important; padding: 4px 5px !important; }
  .installment-row .inst-actions button,
  .installment-row .inst-actions .edit-inst-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex-basis: 28px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }
}