/* 2026 visual system: a single calm, premium language for rider and admin work. */
:root{--ink:#132643;--ink-2:#1d365d;--canvas:#f4f7fb;--surface:#fff;--soft:#eef3fb;--line:#dce5f1;--accent:#3976ee;--accent-2:#76a0ff;--muted:#6d7d94;--shadow-lg:0 22px 55px rgba(18,39,73,.10);--shadow-md:0 12px 30px rgba(18,39,73,.07)}
body{background:radial-gradient(circle at 12% -10%,#e4edff 0,transparent 29rem),radial-gradient(circle at 100% 0,#e8f0ff 0,transparent 26rem),var(--canvas);color:var(--ink)}
.app-header{background:rgba(13,28,52,.94);border-bottom-color:rgba(205,222,255,.12);box-shadow:0 8px 24px rgba(11,25,48,.14)}
.header-inner{max-width:1240px;height:78px}.brand{gap:13px}.brand-logo{width:142px;height:60px}.brand-copy strong{font-size:17px}.brand-copy small{color:#aebfdd}.app-header button{border-radius:12px;padding:9px 14px;background:rgba(255,255,255,.07);transition:background .18s ease,transform .18s ease}.app-header button:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}
main{max-width:1240px;padding-top:38px}.box,.rider-settings,.settlement-card-action{border-color:rgba(210,221,236,.92);box-shadow:var(--shadow-md)}
/* Login is a single product surface instead of two unrelated panels. */
.login-shell{min-height:610px;border:1px solid rgba(201,215,236,.92);border-radius:30px;box-shadow:var(--shadow-lg)}
.login-intro{padding:76px 70px;background:radial-gradient(circle at 82% 15%,rgba(91,142,255,.30),transparent 12rem),linear-gradient(145deg,#0f203d,#162f58 63%,#234d91)}
.login-intro h1{max-width:430px;font-size:44px;letter-spacing:-.065em}.login-intro p{max-width:425px;color:#c5d2e8}.trust-list{gap:11px}.trust-list span{color:#ecf3ff}.login-card{padding:58px 55px}.login-card h2{font-size:29px}.card-kicker{color:#386fe7}.primary{min-height:51px;border-radius:14px;background:linear-gradient(135deg,#326ee9,#2456be);box-shadow:0 13px 26px rgba(38,91,201,.25)}
input,select,textarea{border-color:#d7e0ed;background:#fbfcfe;border-radius:13px}.login-card input,.login-card select{background:#fff}
/* Rider settlement: strong total, quiet supporting information. */
#rider{max-width:940px;margin:0 auto}.page-heading h1{font-size:34px}.page-heading select{min-height:50px;border-radius:14px;background:#fff;box-shadow:0 7px 18px rgba(31,57,96,.05)}
.retention-note{padding:9px 12px;border-left:3px solid #86a9f8;border-radius:0 9px 9px 0;background:rgba(255,255,255,.46);color:#74839a}.stats{gap:16px}.stats article{min-height:150px;padding:24px;border-color:#dce6f2;border-radius:22px;box-shadow:var(--shadow-md)}
.stats .pay-card{position:relative;overflow:hidden;background:radial-gradient(circle at 92% 6%,rgba(136,174,255,.52),transparent 9rem),linear-gradient(135deg,#142845,#1f4d91);box-shadow:0 20px 40px rgba(27,65,130,.23)}
.stats .pay-card:after{content:"";position:absolute;right:-35px;bottom:-78px;width:188px;height:188px;border:1px solid rgba(255,255,255,.2);border-radius:50%;box-shadow:0 0 0 26px rgba(255,255,255,.035)}
.stats .pay-card strong{position:relative;z-index:1}.payment-status-card{border:1px solid #dce6f1;border-radius:16px;box-shadow:0 9px 20px rgba(28,53,92,.05)}
.settlement-card-action{border-radius:18px;background:linear-gradient(130deg,#fff,#f5f8ff)}.settlement-card-button{border-radius:12px}
.detail-card{border-radius:24px}.detail-card .section-title{padding-bottom:22px}.detail-card th,.detail-card td{padding:16px 6px}.detail-card tbody tr:last-child th,.detail-card tbody tr:last-child td{border-bottom:0}.detail-card tfoot{border-top:1px solid #dae4f0}.detail-card tfoot th,.detail-card tfoot td{padding-top:21px;color:#245fd0}
.rider-settings{border-radius:17px;background:rgba(255,255,255,.96)}.rider-settings summary{padding:17px 18px}.rider-settings .box{background:transparent}
/* Admin frame: a restrained workspace with a readable navigation rail. */
.admin-hero{min-height:174px;padding:34px 38px;border-radius:28px;background:radial-gradient(circle at 91% 17%,rgba(104,153,255,.31),transparent 12rem),linear-gradient(125deg,#122441,#1c3c6d);box-shadow:0 20px 42px rgba(23,50,93,.16)}
.admin-hero h1{font-size:34px}.admin-hero p{max-width:600px;color:#c2d1e8}.status-pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.1)}
.admin-branch-context{margin:0 0 18px;border:1px solid #d7e2f0;border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 9px 25px rgba(27,52,88,.05)}
.admin-layout{grid-template-columns:252px minmax(0,1fr);gap:20px}.admin-nav{position:sticky;top:96px;align-self:start;gap:6px;padding:10px;border:1px solid #d8e2f0;border-radius:21px;background:rgba(255,255,255,.84);box-shadow:var(--shadow-md);backdrop-filter:blur(14px)}
.tab{min-height:59px;padding:11px 12px;border-radius:13px;color:#53657d;transition:background .18s ease,color .18s ease,transform .18s ease}.tab:hover{background:#f0f5ff;color:#1d477f;transform:translateX(2px)}.tab-icon{width:36px;height:36px;border-radius:11px;background:#eef3fb;color:#557094}.tab.active{background:linear-gradient(135deg,#18345e,#204c89);border-color:transparent;color:#fff;box-shadow:0 9px 18px rgba(25,59,112,.2)}.tab.active .tab-icon{background:rgba(255,255,255,.14);color:#fff}.tab.active small{color:#bed0ed}
.workspace-card{min-height:500px;padding:30px;border-radius:25px;border-color:#d8e3f0;background:rgba(255,255,255,.94);box-shadow:var(--shadow-lg)}.workspace-card>.section-title{margin-bottom:23px}.section-title{padding-bottom:18px}.section-title h2{font-size:23px}.section-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#edf3ff,#e2ecff);color:#346edf}
.dashboard-topline{padding-bottom:22px}.dashboard-topline h2{font-size:27px}.dashboard-period-card{border-radius:18px;background:linear-gradient(125deg,#142947,#1c3e72);box-shadow:0 14px 30px rgba(25,54,99,.16)}.dashboard-metrics{gap:12px}.dashboard-metrics article{border-radius:17px;background:#fbfcff}.dashboard-payment-trend{border-radius:18px;background:#fbfcff}
.form-grid,.form-grid.three{gap:17px}.format-note{border-radius:15px;background:#f5f8ff}.upload-review{border-radius:18px}.payment-work-card{border-radius:20px}.held-dashboard-summary article,.settlement-type-summary article{border-radius:17px}.period-editor,.branch-management-card{border-radius:18px}
.rider-directory-tools,.period-directory-tools,.settlement-type-tools,.inquiry-admin-tools,.held-dashboard-tools{padding:14px 16px;border:1px solid #e0e8f3;border-radius:15px;background:#f8faff}.rider-list-item,.period-list-item,.inquiry-item,.held-dashboard-item{border-radius:15px}
/* On smaller displays hierarchy stays intact without horizontal overflow. */
@media(max-width:820px){main{padding:25px 16px 45px}.admin-hero{min-height:0;padding:28px 25px}.admin-layout{gap:14px}.admin-nav{position:static;overflow-x:auto;padding:8px;border-radius:17px}.admin-nav .tab{min-width:142px}.workspace-card{padding:23px}.login-intro{padding:52px 44px}.login-card{padding:42px}.stats{gap:12px}}
@media(max-width:560px){.header-inner{height:68px;padding:0 13px}.brand-logo{width:102px;height:43px}.header-actions{gap:4px}.app-header .header-actions button{padding:8px 8px;font-size:11px}.brand-copy{display:none}main{padding:18px 12px 34px}.login-shell{min-height:0;border-radius:23px}.login-intro{padding:39px 25px}.login-intro h1{font-size:32px}.login-card{padding:31px 23px}.page-heading h1{font-size:29px}.stats article{min-height:112px;padding:17px;border-radius:18px}.stats .pay-card{min-height:116px}.stats .pay-card strong{font-size:30px}.workspace-card{padding:18px 15px;border-radius:20px}.admin-hero{margin:-2px -2px 14px;padding:25px 20px;border-radius:21px}.admin-hero h1{font-size:27px}.admin-hero p{font-size:13px}.admin-nav{margin:0 -2px 14px}.admin-nav .tab{min-width:122px;padding:10px 9px}.tab b{font-size:13px}.tab-icon{width:33px;height:33px}.section-title h2{font-size:20px}.section-title p{font-size:12px}.dashboard-topline h2{font-size:23px}.dashboard-period-card{padding:19px}.dashboard-metrics{grid-template-columns:1fr}.dashboard-payment-trend{padding:17px}.detail-card{border-radius:19px}.settlement-card-action{padding:16px}.rider-settings summary{padding:15px}.rider-directory-tools,.period-directory-tools,.settlement-type-tools,.inquiry-admin-tools,.held-dashboard-tools{padding:12px}.form-grid,.form-grid.three{gap:12px}}

/* Banking-app finish: calm surfaces, prominent numbers, deliberate actions. */
strong,.stats strong,.dashboard-metrics strong,.payment-work-summary strong,.settlement-type-summary strong,.held-dashboard-summary strong{font-variant-numeric:tabular-nums;letter-spacing:-.055em}
.stats article:not(.pay-card),.dashboard-metrics article,.payment-work-summary article,.settlement-type-summary article,.held-dashboard-summary article{position:relative;overflow:hidden;border:1px solid #dce6f4;background:linear-gradient(145deg,#fff,#f8faff)}
.stats article:not(.pay-card):before,.dashboard-metrics article:before,.payment-work-summary article:before,.settlement-type-summary article:before,.held-dashboard-summary article:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(#86abfb,#426fe1)}
.stats article:not(.pay-card) strong{font-size:25px;color:#193b70}.stats article:not(.pay-card) span{color:#617796}.stats .pay-card span{font-size:13px;font-weight:800;letter-spacing:.02em}.stats .pay-card strong{font-size:36px;text-shadow:0 2px 10px rgba(0,0,0,.12)}
.payment-status-card{background:linear-gradient(135deg,#fff,#f6f9fe)}.payment-status-card>div{gap:12px}.payment-status-card strong{font-size:16px;letter-spacing:-.04em}
.workspace-card>.section-title>.section-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 13px rgba(47,100,211,.10)}
.dashboard-kicker,.dashboard-period-card>div>span,.payment-work-kicker,.settlement-card-kicker{font-weight:850;letter-spacing:.12em}.dashboard-period-card strong{font-size:25px;letter-spacing:-.05em}.dashboard-period-action,.payment-complete-button{border-radius:13px;box-shadow:0 8px 17px rgba(0,0,0,.12)}
.dashboard-metrics article{min-height:145px;padding:22px}.dashboard-metrics article strong{margin-top:13px;font-size:28px;color:#183764}.dashboard-metrics article small{color:#8190a7}.dashboard-metrics article:nth-child(3){background:linear-gradient(145deg,#fffdf7,#fff9ec);border-color:#ecdfc5}.dashboard-metrics article:nth-child(3):before{background:linear-gradient(#e8bb68,#ba7e19)}.dashboard-metrics article:nth-child(3) strong{color:#a46a0b}
.dashboard-payment-trend{border:1px solid #e0e8f3}.dashboard-trend-heading h3{font-size:20px}.dashboard-trend-controls{padding:3px;border:1px solid #d9e3f0;border-radius:11px;background:#f4f7fc}.dashboard-trend-controls button{border-radius:8px;font-weight:800}.dashboard-trend-controls button.active{background:#183763;box-shadow:0 4px 10px rgba(24,55,99,.18)}
.payment-work-card{border:1px solid #cad8ed;background:radial-gradient(circle at 95% 5%,rgba(124,165,255,.25),transparent 10rem),linear-gradient(145deg,#122746,#1b3f73);box-shadow:0 18px 38px rgba(23,54,101,.22)}.payment-work-card *{color:#fff}.payment-work-card p{color:#c9d7ed}.payment-work-rider strong{font-size:31px}.payment-account{border-color:rgba(255,255,255,.19);background:rgba(5,19,43,.22)}.payment-account span,.payment-account small{color:#b9cae5!important}.copy-account-button{background:#fff!important;color:#163663!important;font-weight:850}.payment-work-actions .rider-action.manage{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.10);color:#fff}.payment-complete-button{background:#fff;color:#15335f;font-weight:850}
.primary,.settlement-card-button{font-weight:850;letter-spacing:-.02em}.rider-action{border-radius:11px;font-weight:800}.rider-action.edit{border-color:#b9cdf1;background:#eef4ff;color:#235aaf}.rider-action.manage{border-color:#f0c8cc;background:#fff5f5;color:#ae4350}
.period-list-item,.rider-list-item,.inquiry-item,.held-dashboard-item{border:1px solid #e0e7f1;background:#fff;box-shadow:0 4px 12px rgba(28,51,84,.025);transition:transform .16s ease,box-shadow .16s ease}.period-list-item:hover,.rider-list-item:hover,.inquiry-item:hover,.held-dashboard-item:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(28,51,84,.07)}
.detail-card tbody tr{transition:background .14s ease}.detail-card tbody tr:hover{background:#f7faff}.detail-card th{color:#536880}.detail-card td{color:#182f52}.detail-card tfoot{background:#f4f7fc}.detail-card tfoot th,.detail-card tfoot td{font-size:20px}
@media(max-width:560px){.stats article:not(.pay-card) strong{font-size:22px}.stats .pay-card strong{font-size:32px}.dashboard-metrics article{min-height:112px;padding:17px}.dashboard-metrics article strong{font-size:25px}.payment-work-rider strong{font-size:26px}.detail-card tfoot th,.detail-card tfoot td{font-size:18px}}