/* WeeklyLoan Pro v4.2.0 — responsive visual system.
   Pure presentation layer; existing authentication, data and calculations unchanged. */
:root{
 --bg:#f2f5fa;--surface:#ffffff;--surface-2:#f6f8fc;
 --text:#17243b;--muted:#63728b;--line:#e2e8f1;
 --primary:#245be5;--primary-dark:#163eb2;--primary-soft:#edf3ff;
 --success:#087f63;--success-soft:#e3f7f0;
 --warning:#a76213;--warning-soft:#fff4e3;
 --danger:#c23c45;--danger-soft:#ffebee;
 --shadow:0 10px 34px rgba(27,49,85,.055),0 2px 7px rgba(27,49,85,.025);
 --radius:20px;
}
html.dark{
 --bg:#0b1425;--surface:#142139;--surface-2:#192a46;
 --text:#edf4ff;--muted:#aab9d0;--line:#2c3e59;
 --primary:#8cb3ff;--primary-dark:#4784ed;--primary-soft:#20385f;
 --success:#7bdabc;--success-soft:#16493f;
 --warning:#ffcc87;--warning-soft:#52391c;
 --danger:#ff9ca2;--danger-soft:#532831;
 --shadow:0 12px 36px rgba(0,0,0,.19);color-scheme:dark;
}
*{min-width:0}
html{scroll-behavior:smooth}
body{font-family:'WeeklyLoan Sans',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text)}
body.app-shell{background:radial-gradient(ellipse 550px 260px at 93% 10%,rgba(93,148,238,.065),transparent 90%),var(--bg)}
.app-header{background:#101f3c;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 5px 20px rgba(16,31,60,.11)}
.app-shell>.app-header{padding:calc(11px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 11px max(16px,env(safe-area-inset-left))}
.header-row{max-width:1180px;gap:16px}
.brand{font-size:1.25rem;letter-spacing:-.035em;font-weight:850;gap:10px}
.brand-logo{width:37px;height:37px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15);background:#fff}
.brand-sub{display:flex;gap:8px;align-items:center;font-size:.73rem;font-weight:550;letter-spacing:.01em;color:#b9c9e8}
.brand-version{background:rgba(255,255,255,.105);border:1px solid rgba(255,255,255,.13);border-radius:6px;padding:2px 6px;color:#eff6ff}
.brand-divider{opacity:.65}
.header-controls{display:flex;align-items:center;gap:9px;flex:none}
.header-theme{width:44px;height:44px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#e7f0ff;border-radius:13px;cursor:pointer;transition:background .2s}
.header-theme:hover{background:rgba(255,255,255,.2)}
#language{width:128px;min-width:0;min-height:44px;border:1px solid rgba(255,255,255,.22);border-radius:13px;font-weight:750;font-size:14px;background:#fff;color:#10284f;cursor:pointer}
#connection{max-width:1150px;font-size:.77rem;margin:4px auto 0;padding:4px 18px;color:var(--muted);overflow-wrap:anywhere}
.app-shell>#app{max-width:1180px;width:100%;padding:22px clamp(14px,2.4vw,30px) 30px;scroll-padding-top:18px;overscroll-behavior:contain}
.app-shell>.install-bar{max-width:1180px;padding:9px 22px 0}
.install-bar .btn{background:transparent;color:var(--primary);border:1px solid var(--line);border-radius:11px;box-shadow:none}
.install-help{max-width:1135px;box-shadow:var(--shadow)}
.page-content{max-width:100%;margin:auto}
h1,h2,h3{letter-spacing:-.035em;line-height:1.23}
.page-toolbar h1,.page-content>h1{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:850}
.page-toolbar{margin:0 0 19px;gap:12px}
.section-head{margin:29px 0 13px}.section-head h2{font-size:1.14rem}
.card{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);background:var(--surface)}
.hero{padding:clamp(24px,4vw,37px);border-radius:25px;background:linear-gradient(119deg,#173876 0%,#245be0 58%,#436ded 100%);box-shadow:0 18px 40px rgba(28,82,178,.16);isolation:isolate}
.hero:after{width:300px;height:300px;right:-80px;top:-100px;border-width:50px;opacity:.75}
.hero:before{content:"";position:absolute;pointer-events:none;inset:0;background:radial-gradient(circle at 90% 100%,rgba(133,221,254,.23),transparent 45%);z-index:-1}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);margin:8px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.hero-copy{font-size:.96rem}.eyebrow{font-size:.75rem;letter-spacing:.1em}
.quick-actions{max-width:530px;gap:10px;margin-top:26px}
.quick-action{border-radius:15px;min-height:79px;box-shadow:0 8px 20px rgba(15,39,106,.15);color:#1d407e;padding:12px 7px;transition:transform .2s,box-shadow .2s}
.quick-action:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,39,106,.18)}
.quick-icon{width:30px;height:30px;font-size:1.1rem;border-radius:10px}
.metric-grid{gap:13px;margin:13px 0 18px}
.metric{min-height:130px;padding:19px;border-radius:18px;position:relative;overflow:hidden;gap:16px}
.metric:after{content:"";position:absolute;right:-18px;bottom:-28px;width:88px;height:88px;border-radius:50%;background:var(--primary-soft);opacity:.48}
.metric>*{position:relative;z-index:1}.metric-label{font-size:.84rem;color:var(--muted);line-height:1.5;font-weight:650}
.metric strong{font-size:clamp(1.2rem,2vw,1.78rem);font-weight:850;line-height:1.18;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.collection-overview{gap:13px;margin:18px 0 24px}
.collection-overview article{border-radius:17px;padding:20px 18px;box-shadow:var(--shadow)}
.collection-overview article:first-child{border-top:1px solid var(--line);border-left:4px solid var(--warning)}
.collection-overview article:nth-child(2){border-left:4px solid var(--primary)}
.collection-overview article:nth-child(3){border-left:4px solid var(--success)}
.collection-overview strong{font-size:clamp(1.07rem,2.1vw,1.54rem);letter-spacing:-.035em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.loan-card{padding:19px 20px;margin-bottom:13px;transition:border-color .2s,box-shadow .2s}
.loan-card:hover,.investor-card:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));box-shadow:0 14px 38px rgba(28,63,128,.085)}
.loan-name{font-size:1.04rem}.loan-meta{line-height:1.65;word-break:break-word}
.loan-balance{font-size:1.07rem;margin:18px 0 12px}.progress{height:9px;background:var(--surface-2);border:0}
.status{font-size:.72rem;letter-spacing:.005em;padding:7px 11px}
.btn{border-radius:12px;padding:11px 17px;min-height:45px;font-size:.87rem;letter-spacing:-.01em;cursor:pointer;background:#245be5;color:#fff;box-shadow:0 5px 12px rgba(30,86,199,.11);transition:background .16s,transform .16s,box-shadow .16s}
.btn:hover:not(:disabled){filter:brightness(.975);transform:translateY(-1px);box-shadow:0 7px 16px rgba(30,86,199,.15)}
.btn.secondary{box-shadow:none}.btn.ghost,.btn.danger{box-shadow:none}
html.dark .btn:not(.secondary):not(.ghost):not(.danger){background:#447fe6;color:#fff}
html.dark .btn.secondary{background:var(--primary-soft);color:var(--primary)}
.btn:disabled{cursor:wait;opacity:.6}
.filter-row{padding:2px 0 8px;gap:9px}
.filter{border-radius:12px;background:var(--surface);min-height:43px;padding:9px 15px;border:1px solid var(--line);color:var(--muted);font-weight:750;flex:none}
.filter.active{background:#245be5;border-color:#245be5;color:#fff}
.form-card{padding:clamp(18px,2.7vw,30px)}
.form-grid{column-gap:20px;row-gap:2px}
label{font-size:.85rem;color:var(--text);font-weight:725;margin:15px 0 8px;line-height:1.4}
input,select,textarea{width:100%;min-width:0;max-width:100%;min-height:48px;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:0 1px 1px rgba(30,60,90,.02)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 74%,transparent)}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent);outline:0}
textarea{line-height:1.5;min-height:105px}
input[type="date"]{appearance:auto;-webkit-appearance:auto;min-width:0}
.plan-summary{border:1px solid color-mix(in srgb,var(--primary) 13%,var(--line));background:var(--primary-soft);border-radius:15px;padding:19px;color:var(--primary);line-height:1.85}
.settings-card{border-radius:19px}.setting-row{min-height:68px;padding:16px 20px;cursor:pointer;transition:background .2s}
.setting-row:hover{background:var(--surface-2)}.setting-copy b{font-size:.92rem}.setting-copy span{font-size:.79rem}
.setting-row>span:last-child{font-size:1.4rem;color:var(--muted)}
.report-hero{background:linear-gradient(120deg,#152d5b,#226f9b);border-radius:23px;padding:28px}
.report-grid{gap:13px}.report-card,.chart-card,.export-panel{padding:clamp(18px,2.4vw,27px)}
.chart-card h2{margin:0 0 13px;font-size:1.14rem}
.report-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.report-table th,.report-table td{padding:11px 13px}
.investor-hero{border-radius:24px;background:linear-gradient(115deg,#142d5c,#165d84 80%,#168b89);box-shadow:0 14px 34px rgba(11,54,83,.13)}
.investor-metrics{grid-template-columns:repeat(auto-fit,minmax(min(195px,100%),1fr))!important;gap:12px}
.investor-metrics .metric{padding:18px;min-height:116px}
.investor-metrics .metric strong{white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;font-size:clamp(1.12rem,2vw,1.58rem)!important;letter-spacing:-.035em}
.investor-tools,.investor-form{border-radius:20px}.investor-tool-actions .btn{min-width:0;white-space:normal;overflow-wrap:anywhere}
.investor-card{padding:20px}.investor-money{gap:12px}.investor-money span{border-radius:14px}.investor-money b{overflow-wrap:anywhere;white-space:normal}
.login-layout{max-width:1030px;margin:clamp(24px,5vh,62px) auto 32px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr);gap:clamp(24px,5vw,68px);align-items:center}
.login-intro{padding:20px 8px 20px 14px}
.login-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--primary);letter-spacing:.13em;font-weight:850;font-size:.72rem}
.login-kicker-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:#16ae9f;box-shadow:0 0 0 5px rgba(22,174,159,.13)}
.login-intro h2{font-size:clamp(2.3rem,4.6vw,4.1rem);line-height:1.14;letter-spacing:-.055em;margin:21px 0 18px;font-weight:900}
.login-intro h2 em{font-style:normal;background:linear-gradient(125deg,#2364e8,#15a0b7);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-intro>p{color:var(--muted);font-size:.99rem;max-width:480px;line-height:1.85;margin-bottom:29px}
.login-feature{display:flex;align-items:center;gap:14px;margin:15px 0;color:var(--text);font-size:.88rem;font-weight:650}
.login-feature-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary);font-size:1.05rem;flex:none}
.login-card{margin:0;max-width:none;padding:clamp(25px,4vw,39px);border-radius:25px;box-shadow:0 22px 80px rgba(22,54,111,.095),0 4px 15px rgba(22,54,111,.04)}
.login-symbol{width:53px;height:53px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(130deg,#245be5,#4383f5);color:white;box-shadow:0 11px 20px rgba(36,91,229,.19);margin-bottom:22px}
.login-form-kicker{letter-spacing:.12em;color:var(--primary);font-size:.72rem;font-weight:850;margin-bottom:7px}
.login-card h1{font-size:clamp(1.7rem,3vw,2.17rem);letter-spacing:-.045em;margin:0 0 6px}
.login-card p.hint{margin:0 0 20px;color:var(--muted);font-size:.86rem;line-height:1.65}
.login-card label{display:block;margin:18px 0 8px;font-size:.83rem;color:var(--text)}
.login-card input{border-radius:12px;min-height:52px}
.login-card .password-control{margin-bottom:0;gap:7px}
.login-card .password-control .btn{min-width:69px;box-shadow:none}
.login-submit{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px!important;min-height:53px;font-size:.96rem;background:linear-gradient(115deg,#245be5,#2052cc);border-radius:12px;width:100%}
.login-submit span{font-size:1.15rem}
.login-footnote{color:var(--muted);text-align:center;font-size:.75rem;line-height:1.6;margin:17px 0 0!important}
body.is-guest .policy-links{justify-content:center;margin:15px auto 8px;max-width:850px;padding:12px 18px;border:0;background:transparent;color:var(--muted);font-size:.78rem;gap:10px 18px}
body.is-guest .policy-links a{color:var(--muted);text-decoration:none}
body.is-guest .policy-links a:hover{text-decoration:underline}
.error-box{padding:13px 15px;border-radius:12px;font-size:.84rem;border:1px solid color-mix(in srgb,var(--danger) 22%,var(--line));line-height:1.6}
.bottom-nav{gap:6px}
.app-shell>#navigation{max-width:1180px;background:var(--surface);border-color:var(--line);box-shadow:0 -5px 18px rgba(24,53,100,.045);border-radius:0;padding:7px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.nav-btn{min-width:0;min-height:58px;padding:8px 4px;border-radius:13px;color:var(--muted);font-size:.75rem;line-height:1.32;cursor:pointer;transition:background .16s,color .16s}
.nav-btn.active{color:var(--primary);background:var(--primary-soft)}
.nav-btn .nav-icon{font-size:1.3rem}
.sheet-backdrop{background:rgba(5,15,33,.65);backdrop-filter:blur(5px)}
.sheet{border-radius:26px 26px 0 0;padding:14px clamp(15px,3.5vw,28px) calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 55px rgba(5,15,33,.17);max-height:min(90dvh,880px)}
.grabber{width:42px;height:5px}.sheet-title h2{font-size:1.25rem;margin:8px 0}
.icon-button{cursor:pointer}.installment{grid-template-columns:40px minmax(0,1fr) auto;gap:11px}
.toast{border-radius:12px;padding:14px 18px;max-width:min(480px,calc(100vw - 28px));text-align:center}
.policy-links{gap:10px 19px;align-items:center;flex-wrap:wrap;line-height:1.7;border-radius:15px}
.policy-links a{color:var(--primary);text-underline-offset:3px}
/* Policy and informational pages share the new surface and typography. */
body:not(.app-shell){padding:clamp(15px,4vw,32px)!important;max-width:900px!important;margin:0 auto!important;min-width:0;background:var(--bg)}
body:not(.app-shell)>a:first-child{display:inline-flex;align-items:center;min-height:42px;padding:8px 13px;background:var(--surface);border:1px solid var(--line);border-radius:11px;color:var(--primary);font-weight:750;text-decoration:none}
body:not(.app-shell)>select{display:inline-block;vertical-align:middle;max-width:180px;width:auto;min-height:42px;margin-left:9px;background:var(--surface)}
body:not(.app-shell)>main{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);margin:20px 0;padding:clamp(20px,3vw,38px);max-width:100%;overflow-wrap:anywhere}
body:not(.app-shell)>main h1{font-size:clamp(1.5rem,3.5vw,2rem)}
body:not(.app-shell)>main h2{color:var(--text)}
body:not(.app-shell)>main p,body:not(.app-shell)>main li{line-height:1.85}
body:not(.app-shell)>main a{color:var(--primary)}
body:not(.app-shell) table{max-width:100%;display:block;overflow-x:auto}
@media(min-width:1100px){
 .app-shell>#navigation{order:2;display:flex;justify-content:center;gap:12px;max-width:1135px;padding:7px 15px;margin:10px auto 0;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
 .app-shell>#navigation[hidden]{display:none!important}
 .app-shell>#navigation .nav-btn{flex:1;max-width:220px;min-height:54px;display:flex;flex-direction:row;gap:9px;font-size:.88rem}
 .app-shell>#navigation .nav-btn .nav-icon{font-size:1.1rem}
 .app-shell>#app{order:3}
 .app-shell>.install-bar{order:1;padding-top:7px}
 .app-shell>.install-help{order:1}
 .app-shell>#connection{order:1;width:100%}
 .metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .report-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:701px) and (max-width:1099px){
 .metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .report-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .collection-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
 .login-layout{gap:25px;grid-template-columns:minmax(0,1fr) minmax(320px,.92fr)}
}
@media(max-width:700px){
 .app-shell>.app-header{padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
 .brand{font-size:1.04rem;gap:8px}.brand-logo{width:32px;height:32px;border-radius:9px}
 .brand-sub{font-size:.66rem;gap:5px;margin-top:3px}
 .header-controls{gap:6px}.header-theme{width:39px;height:39px;border-radius:11px}
 #language{width:104px;min-height:39px;padding:5px 7px;font-size:13px;border-radius:11px}
 .app-shell>#app{padding:15px 13px 22px}
 .app-shell>.install-bar{padding:7px 14px 0}
 .install-bar .btn{min-height:36px}
 .login-layout{display:flex;flex-direction:column;align-items:stretch;gap:15px;margin:12px auto 18px;max-width:510px}
 .login-intro{padding:9px 8px 3px}.login-intro h2{font-size:clamp(1.9rem,7vw,2.5rem);margin:12px 0 8px}
 .login-intro>p{font-size:.86rem;line-height:1.65;margin:0}
 .login-feature{display:none}
 .login-card{padding:24px 21px;border-radius:20px}
 .login-symbol{width:44px;height:44px;margin-bottom:14px;border-radius:12px}
 .login-card h1{font-size:1.75rem}.login-card p.hint{margin-bottom:12px}
 .hero{padding:21px;border-radius:20px}
 .hero h1{font-size:clamp(1.75rem,7.5vw,2.6rem)}
 .quick-actions{gap:8px;margin-top:21px}.quick-action{font-size:.76rem!important;min-height:70px;line-height:1.3!important;border-radius:13px;padding:8px 5px}
 .quick-icon{width:27px;height:27px}
 .collection-overview{grid-template-columns:1fr;gap:9px;margin:14px 0 22px}
 .collection-overview article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px}
 .collection-overview span{max-width:54%}.collection-overview strong{font-size:1.06rem;text-align:right;margin:0;max-width:47%;white-space:normal}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .metric{min-height:111px;padding:14px;gap:13px}.metric strong{font-size:clamp(1.1rem,5vw,1.4rem)}
 .report-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .form-grid{grid-template-columns:minmax(0,1fr)!important;gap:0}
 .form-card{padding:18px 16px}
 .investor-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 .investor-metrics .metric{padding:13px;min-height:99px}
 .investor-metrics .metric strong{font-size:clamp(1rem,4.6vw,1.3rem)!important}
 .investor-tools{flex-direction:column;align-items:stretch;gap:15px}
 .investor-tool-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .investor-tool-actions .btn{width:100%;font-size:.78rem;padding:9px 8px}
 .investor-hero{flex-direction:column;padding:20px;gap:16px;border-radius:20px}
 .investor-hero .btn{width:100%}
 .investor-money{grid-template-columns:repeat(2,minmax(0,1fr))}
 .investor-money span{padding:12px 10px}.investor-money b{font-size:.99rem}
 .app-shell>#navigation{padding:6px max(4px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));gap:2px}
 .app-shell>#navigation .nav-btn{font-size:clamp(.60rem,2.6vw,.73rem);min-height:55px;padding:6px 3px;overflow-wrap:normal;line-height:1.2}
 .app-shell>#navigation .nav-icon svg{width:22px;height:22px}
 .page-toolbar{gap:9px;margin-bottom:14px}.page-toolbar h1{font-size:1.4rem}
 .loan-card{padding:17px 15px}.loan-top{gap:9px}
 .status{max-width:42%;font-size:.7rem}
 .card-actions{gap:8px}.card-actions .btn{min-width:0;flex:1 1 110px}
 .sheet{max-height:90dvh;overscroll-behavior:contain}
 .installment{grid-template-columns:32px minmax(0,1fr) auto;gap:7px}
 .installment .btn{min-width:70px;max-width:96px;font-size:.74rem;padding:8px}
 .policy-links{gap:10px 12px}
}
@media(max-width:390px){
 .brand{font-size:.94rem}.brand-logo{width:30px;height:30px}
 #language{width:94px;font-size:12px}
 .header-theme{width:36px;height:38px}
 .login-card{padding:22px 17px}.login-intro h2{font-size:1.83rem}
 .collection-overview strong{font-size:.99rem}
 .metric strong{font-size:clamp(1.02rem,4.8vw,1.2rem)}
 .investor-money{grid-template-columns:1fr}
 .investor-metrics .metric strong{font-size:1.02rem!important}
 .installment{grid-template-columns:30px minmax(0,1fr)}
 .installment>.btn{grid-column:2;max-width:none!important;width:100%}
}
@media(max-width:320px){.brand-sub{display:none}.metric-grid,.investor-metrics{grid-template-columns:1fr!important}}
@media(hover:none){.btn:hover:not(:disabled),.quick-action:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@media print{
 html.app-document,body.app-shell{position:static!important;height:auto!important;min-height:0!important;overflow:visible!important}
 .app-shell>#app{overflow:visible!important;height:auto!important;max-width:none!important;padding:0!important}
 .app-header,.bottom-nav,.install-bar,.install-help,#connection,.policy-links,.header-theme{display:none!important}
 .card{box-shadow:none!important;border-color:#ddd!important;break-inside:avoid}
 .report-table{display:table;white-space:normal;overflow:visible}
 .report-table tr{break-inside:avoid}
}