/* ARISAN RT02 FRESH PREMIUM - INNER V2
   Cosmetic layer only. No authentication, API, bookkeeping or navigation JS modified.
   All existing IDs, classes used by JS and hidden classes remain intact.
*/
:root{--fp-ink:#102b42;--fp-navy:#061e35;--fp-teal:#04998e;--fp-mint:#d9f6ef;--fp-gold:#eac36d;--fp-border:#dce9eb;--fp-shadow:0 15px 44px rgba(12,43,64,.09)}
body[data-mode]{background:radial-gradient(ellipse at 8% -6%,#d4f2e8 0,transparent 32%),radial-gradient(ellipse at 100% 0,#e3edfa 0,transparent 32%),#f3f7fa;color:#17364d;font-size:14px}
body[data-mode] header.fp-app-header{padding:13px max(18px,calc((100% - 1130px)/2));min-height:85px;background:linear-gradient(106deg,#061e35 0%,#0a3852 62%,#087e78 100%);border-bottom:1px solid #ffffff1b}
.fp-header-brand{display:flex;align-items:center;gap:12px}.fp-header-brand img{border-radius:15px;box-shadow:0 5px 16px #06182470;border:1px solid #ffffff38}.fp-header-brand strong{font-size:15px!important;letter-spacing:.045em}.fp-header-brand small{display:block;color:#d4e7e9;font-size:10px;letter-spacing:.11em;font-weight:700}
body[data-mode] main{max-width:1130px;padding-top:27px}
body[data-mode] main>.h{margin-bottom:22px}
body[data-mode] main>.h h1{font-size:clamp(23px,3vw,31px);font-weight:900;color:#0b2c45;line-height:1.15;letter-spacing:-.05em}
body[data-mode] main>.h p{font-size:13px;margin-top:9px;line-height:1.6}
body[data-mode] .panel{border-radius:20px;border:1px solid #dee9ed;box-shadow:var(--fp-shadow);padding:24px;margin-top:19px}
body[data-mode] .panel h2{font-size:18px;letter-spacing:-.035em}
body[data-mode] .button{transition:transform .15s ease,box-shadow .15s ease;background:linear-gradient(120deg,#088b85,#08a59a);font-weight:800;box-shadow:0 5px 13px #087f791c}
body[data-mode] .button:hover{transform:translateY(-1px);box-shadow:0 8px 19px #087f7929}
body[data-mode] .button.secondary{background:#edf5f7;color:#173950;box-shadow:none}
body[data-mode] .button.outline{background:#fff;color:#0a7972;border:1px solid #a9d2cf;box-shadow:none}
body[data-mode] .button.danger{background:#a43d4b;color:#fff}
body[data-mode] input,body[data-mode] select,body[data-mode] textarea{background:#f9fcfd;border:1px solid #d6e4e9;border-radius:12px}
body[data-mode] :is(input,select,textarea):focus-visible{outline:3px solid #8eddd1;outline-offset:1px}
.fp-auth-card{position:relative;overflow:hidden;max-width:530px!important;margin:28px auto 35px!important;padding:0 30px 30px!important;background:#fff!important;box-shadow:0 24px 66px #10364b1c!important}
.fp-auth-art{margin:0 -30px 27px;padding:25px 30px;display:flex;align-items:center;gap:16px;background:linear-gradient(115deg,#06243d,#08706f);color:#fff}
.fp-auth-art img{width:59px;height:59px;border-radius:16px;border:1px solid #ffffff3c;box-shadow:0 7px 20px #001a299c}
.fp-auth-art strong{font-size:17px;display:block;font-weight:850;letter-spacing:-.035em}.fp-auth-art span{color:#cbeae7;font-size:11px;display:block;margin-top:5px}
.fp-auth-kicker{font-size:10px;letter-spacing:.13em;font-weight:900;color:#128a7b;display:block;margin-bottom:10px}
.fp-auth-card h2{font-size:22px!important;margin:0 0 6px!important}.fp-auth-card .muted{line-height:1.65;margin-top:8px}
.fp-auth-card #connectBtn{min-height:51px;margin-top:9px;font-size:14px}
.fp-auth-card .finTiny{margin-top:15px;text-align:center}
.fp-dashboard-hero,.fp-participant-hero{color:#fff;position:relative;overflow:hidden;background:linear-gradient(112deg,#061e35 0%,#0b4a62 62%,#068b81 100%);border-radius:26px;padding:32px 38px;box-shadow:0 21px 42px #07334d35;margin:16px 0 24px}
.fp-dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:247px}
.fp-dashboard-hero:before,.fp-participant-hero:before{content:'';position:absolute;width:370px;height:370px;right:-95px;top:-206px;border:64px solid #ffffff0c;border-radius:50%;pointer-events:none}
.fp-hero-copy{position:relative;z-index:1}.fp-hero-kicker{display:inline-block;font-size:10px;font-weight:850;letter-spacing:.14em;border:1px solid #83dfd04a;border-radius:30px;background:#ffffff17;padding:8px 13px;color:#c9f5ed}
.fp-dashboard-hero h2,.fp-participant-hero h2{font-size:clamp(26px,3.5vw,38px)!important;line-height:1.14;font-weight:900;letter-spacing:-.05em;margin:17px 0 12px!important;color:#fff!important}
.fp-dashboard-hero h2 em,.fp-participant-hero h2 em{font-style:normal;color:#f6d17f}
.fp-dashboard-hero p,.fp-participant-hero p{color:#d8eced;font-size:13px;line-height:1.65;max-width:550px;margin:0}
.fp-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}.fp-hero-chips span{border-radius:25px;padding:7px 11px;background:#ffffff14;border:1px solid #ffffff26;color:#ddf2ed;font-size:10px;font-weight:750}
.fp-hero-emblem{position:relative;z-index:1;flex:0 0 auto}.fp-hero-emblem img{width:169px;height:169px;object-fit:cover;border-radius:27px;box-shadow:0 19px 35px #00172b87;border:1px solid #ffffff3b;transform:rotate(6deg)}
.fp-section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.fp-overline{font-size:10px;font-weight:850;letter-spacing:.15em;color:#139d8c}.fp-section-heading h2{font-size:23px!important;margin:6px 0!important;color:#092e47}.fp-section-heading p{color:#74879a;font-size:12px;margin:0}.fp-mini-tag{font-size:10px;background:#e3f7ef;color:#15765d;border-radius:99px;padding:9px 11px;font-weight:850;white-space:nowrap}
body[data-mode] #adminNav.fp-admin-menu{padding:26px 28px;border:1px solid #dfebed;box-shadow:0 14px 36px #0d364714}
#adminNav.fp-admin-menu>.buttonrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body[data-mode] #adminNav.fp-admin-menu .buttonrow .button{display:block!important;width:100%;min-height:154px!important;background:linear-gradient(155deg,#fff,#f7fbfb)!important;border:1px solid #dbe8ea!important;box-shadow:0 8px 24px #0a354411!important;border-radius:20px!important;color:#12394f!important;text-align:left!important;white-space:normal;line-height:1.38;position:relative;padding:20px 18px 53px!important;font-size:15px!important;font-weight:850!important}
body[data-mode] #adminNav.fp-admin-menu .buttonrow .button:hover{background:linear-gradient(135deg,#f8fefc,#eaf8f5)!important;border-color:#83cfc3!important;box-shadow:0 14px 28px #08665e20!important}
#adminNav.fp-admin-menu .buttonrow .button::after{position:absolute;left:18px;right:15px;bottom:17px;font-size:11px;font-weight:550;color:#6e8293;line-height:1.45;text-align:left}
#adminNav.fp-admin-menu #openBooks::after{content:'Peserta, iuran dan pembayaran bulanan'}
#adminNav.fp-admin-menu #openFinance::after{content:'Saldo kas, pengeluaran dan audit'}
#adminNav.fp-admin-menu #openLive::after{content:'Laporan, transparansi dan undian'}
#adminNav.fp-admin-menu #openBooks{border-top:4px solid #17b2a5!important}
#adminNav.fp-admin-menu #openFinance{border-top:4px solid #ebc16a!important}
#adminNav.fp-admin-menu #openLive{border-top:4px solid #3a83c8!important}
body[data-mode] #adminNav.fp-admin-menu #openAccessSettings{border-radius:12px;font-size:12px;margin-top:18px!important;padding:10px 16px;min-height:42px}
#adminNav.fp-admin-menu>.help{background:#f3f8f9;padding:12px 15px;border-radius:10px;color:#607d8a;font-size:11px;line-height:1.7}
#content>.h{padding:2px 0 6px;justify-content:space-between}
body[data-mode] #content>.h .pill{font-size:11px;padding:9px 14px}
body.books-active .fp-dashboard-hero{display:none}
#autoSyncStatus{background:#ebf8f4;border:1px solid #d1e9df;padding:12px 15px;border-radius:11px;font-size:12px;color:#176a55;line-height:1.55}
body[data-mode] #bookSection>.panel{padding:24px;background:#fff}
body[data-mode] #bookSection>.panel>h2{font-size:21px;color:#0b334c}
body[data-mode] #bookFrame{width:100%;min-height:910px;border-radius:15px!important;border:1px solid #d6e8e8!important;box-shadow:0 5px 21px #173f4412}
.fp-participant-hero{min-height:204px;padding:26px 32px}.fp-participant-hero h2{font-size:31px!important;margin:15px 0 10px!important}.fp-participant-hero p{max-width:615px}
body[data-mode='peserta'] #content>.panel:first-of-type{border-top:4px solid #0ba497}
body[data-mode='peserta'] .metrics{gap:14px}
body[data-mode='peserta'] .metric{border:1px solid #e2eeec;background:linear-gradient(140deg,#fff,#f4fbf8);padding:18px;border-radius:16px}
body[data-mode='peserta'] .metric strong{font-size:21px;color:#113b54}
body[data-mode] .finCard{border-radius:15px;background:#f6fbfa;padding:17px}
body[data-mode] .finCard b{color:#143c54}
body[data-mode] th{background:#f0f7f7;color:#48677a}
body[data-mode] .scroll{border:1px solid #dfebed;border-radius:14px}

/* Bookkeeping iframe: substantial look upgrade, no changes to app.js or data. */
body:not([data-mode]){background:radial-gradient(ellipse at 0 0,#def4eb,transparent 30%),#f3f7fa;color:#15334b}
body:not([data-mode]) .app-shell .sidebar{background:linear-gradient(155deg,#061d34 0%,#0b3452 72%,#064e51 100%);padding-top:28px;box-shadow:9px 0 28px #071d321f}
body:not([data-mode]) .sidebar .brand{margin-bottom:20px;padding:0 7px 22px}
body:not([data-mode]) .sidebar .brand strong{font-size:13px;letter-spacing:.025em}
body:not([data-mode]) .sidebar .brand small{color:#b7d4d6;letter-spacing:.08em}
body:not([data-mode]) .brand-mark.fp-brand-app{font-size:0!important;background:#06223b url('./assets/icon-192.png') center/cover no-repeat!important;border:1px solid #d8b56b66;box-shadow:0 6px 18px #00192e75;border-radius:13px}
body:not([data-mode]) .brand-mark.fp-brand-app span{display:none}
body:not([data-mode]) .nav-overline{color:#6ea6af;font-size:10px;letter-spacing:.16em;margin:0 12px 9px}
body:not([data-mode]) .nav-link{border-radius:13px;min-height:47px;margin:4px 0;color:#bfd6dd;font-size:13px;font-weight:670}
body:not([data-mode]) .nav-link:hover{background:#ffffff16;color:#fff}
body:not([data-mode]) .nav-link.active{background:linear-gradient(103deg,#079e92,#05a89a);box-shadow:0 10px 20px #02857c3d;color:#fff}
body:not([data-mode]) .topbar{background:#fffffff5;backdrop-filter:blur(8px);border-bottom:1px solid #d9e9ea;box-shadow:0 5px 20px #0a355409;height:84px}
body:not([data-mode]) .topbar-title .eyebrow{color:#008f83;font-weight:900;font-size:10px}
body:not([data-mode]) .topbar-title strong{color:#112c43;font-size:22px;font-weight:900}
.fp-book-badge{font-size:10px;letter-spacing:.05em;font-weight:900;background:#e6f6f0;border:1px solid #cde9dc;color:#137e68;padding:8px 11px;border-radius:30px;white-space:nowrap}
body:not([data-mode]) .topbar select{background:#f5fbfc;border-radius:11px;border:1px solid #d9e7ed}
body:not([data-mode]) .page{max-width:1510px}
body:not([data-mode]) .hero{border-radius:25px;padding:32px 35px;min-height:220px;background:linear-gradient(115deg,#061e35,#0a4e63 60%,#068f87);box-shadow:0 19px 41px #06334b37}
body:not([data-mode]) .hero .hero-overline{color:#d3f8ef;font-size:11px}
body:not([data-mode]) .hero h1{font-size:clamp(25px,3vw,37px);letter-spacing:-.05em}
body:not([data-mode]) .hero p{font-size:13px;line-height:1.7;color:#d9eff0}
body:not([data-mode]) .hero .hero-action .btn{background:linear-gradient(115deg,#efd083,#d9aa50);color:#112d43;font-weight:900;border-radius:12px}
body:not([data-mode]) .page-heading h1{font-size:27px;color:#0e2c45;font-weight:900}
body:not([data-mode]) .stat-grid{gap:15px;margin-bottom:23px}
body:not([data-mode]) .stat-card{border-radius:19px;padding:22px;background:linear-gradient(150deg,#fff,#f8fcfb);border:1px solid #deeaec;box-shadow:0 11px 29px #0b364711}
body:not([data-mode]) .stat-card:nth-child(4n + 2){background:linear-gradient(145deg,#fff,#f3f9fd)}
body:not([data-mode]) .stat-card .stat-label{font-size:12px;color:#667e8d;font-weight:750}
body:not([data-mode]) .stat-card .stat-value{font-size:26px;color:#123650;letter-spacing:-1.2px}
body:not([data-mode]) .stat-card .stat-emblem{width:42px;height:42px;border-radius:13px;background:#dcf5ec;color:#148b7d}
body:not([data-mode]) .stat-card .stat-desc{font-size:11px;line-height:1.5}
body:not([data-mode]) .panel{border-radius:20px;border:1px solid #dfebed;box-shadow:0 10px 27px #11354d0e;background:#fff}
body:not([data-mode]) .panel-head{border-bottom-color:#e7f0f0}
body:not([data-mode]) .panel-head h2{font-size:17px;font-weight:850;color:#12364c}
body:not([data-mode]) .btn{border-radius:11px;background:linear-gradient(110deg,#078b82,#06a297);box-shadow:0 5px 12px #068d841b;font-weight:800}
body:not([data-mode]) .btn:hover{transform:translateY(-1px)}
body:not([data-mode]) .btn-secondary{background:#fff;color:#15394f;border-color:#dbe7ec;box-shadow:none}
body:not([data-mode]) .btn-subtle{background:#e7f8f0;color:#0c826e;box-shadow:none}
body:not([data-mode]) .btn-danger{background:#fff0f1;color:#a44151;box-shadow:none}
body:not([data-mode]) .table-wrap{border-radius:0 0 15px 15px}
body:not([data-mode]) .table-wrap th{background:#eff7f7;color:#476579;font-weight:850}
body:not([data-mode]) .table-wrap tbody tr:hover td{background:#f5fbf9}
body:not([data-mode]) .bottom-nav{border-top:1px solid #cfebe2;box-shadow:0 -8px 27px #0b3c4a1b;background:#fffefefd}
body:not([data-mode]) .bottom-nav button.active{color:#03978c}
body:not([data-mode]) .sidebar-foot{color:#bfd8d7}
@media(max-width:900px){.fp-book-badge{display:none}}
@media(max-width:760px){
 body[data-mode] header.fp-app-header{padding:11px 14px;min-height:72px}
 .fp-header-brand img{width:39px;height:39px;border-radius:11px}.fp-header-brand strong{font-size:12px!important}.fp-header-brand small{font-size:9px}
 body[data-mode] main{padding:17px 13px 80px}
 body[data-mode] main>.h{margin-bottom:9px}
 body[data-mode] main>.h h1{font-size:22px}
 body[data-mode] main>.h p{font-size:11px}
 .fp-auth-card{padding:0 20px 24px!important;border-radius:19px!important}
 .fp-auth-art{margin:0 -20px 21px;padding:19px 20px}
 .fp-dashboard-hero{min-height:0;padding:25px 21px;border-radius:20px;margin:9px 0 17px}
 .fp-dashboard-hero h2,.fp-participant-hero h2{font-size:27px!important}
 .fp-dashboard-hero p,.fp-participant-hero p{font-size:12px}
 .fp-hero-emblem{display:none}
 .fp-hero-chips{margin-top:16px}
 #adminNav.fp-admin-menu>.buttonrow{grid-template-columns:1fr;gap:10px}
 body[data-mode] #adminNav.fp-admin-menu{padding:18px 15px}
 body[data-mode] #adminNav.fp-admin-menu .buttonrow .button{min-height:109px!important;padding:15px 15px 42px!important;border-radius:15px!important}
 #adminNav.fp-admin-menu .buttonrow .button::after{left:15px;bottom:13px}
 .fp-section-heading h2{font-size:19px!important}.fp-mini-tag{display:none}
 body[data-mode] #content>.h .pill{font-size:10px;padding:7px 11px}
 body[data-mode] .panel{padding:16px;border-radius:16px}
 body[data-mode] #bookSection>.panel{padding:4px;border:0;box-shadow:none;background:transparent}
 body[data-mode] #bookFrame{border:0!important;border-radius:13px!important;min-height:74vh!important}
 .fp-participant-hero{padding:23px 20px;min-height:unset}
 body:not([data-mode]) .page{padding:16px 13px 100px}
 body:not([data-mode]) .topbar{height:70px}
 body:not([data-mode]) .hero{padding:22px 20px;border-radius:18px;min-height:unset}
 body:not([data-mode]) .hero h1{font-size:24px}
 body:not([data-mode]) .hero p{font-size:11px}
 body:not([data-mode]) .stat-grid{gap:9px}
 body:not([data-mode]) .stat-card{padding:13px;border-radius:14px}
 body:not([data-mode]) .stat-card .stat-value{font-size:19px}
 body:not([data-mode]) .stat-card .stat-label{font-size:10px}
 body:not([data-mode]) .stat-card .stat-emblem{width:32px;height:32px;font-size:15px}
 body:not([data-mode]) .panel{border-radius:16px}
 body:not([data-mode]) .panel-head h2{font-size:14px}
}
@media(max-width:370px){.fp-header-brand strong{font-size:11px!important}.fp-auth-art strong{font-size:15px}.fp-dashboard-hero h2,.fp-participant-hero h2{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){body[data-mode] .button,body:not([data-mode]) .btn{transition:none!important}}
@media print{.fp-dashboard-hero,.fp-participant-hero,.fp-book-badge{display:none!important}}