*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:#f4f7fb;color:#14213d}
.topbar{background:#071d49;color:#fff;padding:28px max(20px,5vw);display:flex;justify-content:space-between;gap:20px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:2px;opacity:.7}.topbar h1{margin:5px 0;font-size:28px}.topbar p{margin:0;opacity:.8}
.badge{border:1px solid #d5ad3b;padding:10px 14px;border-radius:10px;color:#f4d77a;font-size:13px}
 .nav{width:100%;max-width:100%;background:#fff;border-bottom:1px solid #e3e8f0;padding:10px max(20px,5vw);display:flex;gap:8px;position:sticky;top:0;z-index:5;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.nav a{padding:10px 14px;border-radius:9px;text-decoration:none;color:#475569;font-weight:700;font-size:14px}.nav a.active,.nav a:hover{background:#eef3fa;color:#071d49}
 .wrap{width:100%;max-width:1180px;margin:auto;padding:24px 18px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card,.panel{background:#fff;border-radius:16px;padding:20px;box-shadow:0 5px 20px rgba(20,33,61,.06)}.card span{display:block;color:#68748a;font-size:13px}
.card strong{display:block;margin-top:10px;font-size:24px}.panel{margin-top:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel h2{margin:0;font-size:18px}.hierarchy{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.hierarchy div{padding:14px;background:#eef3fa;border-radius:10px;font-size:12px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.stats div{background:#fff;padding:14px 16px;border-radius:12px;color:#68748a}.stats b{display:block;color:#14213d;margin-top:5px}
.table-wrap{overflow:auto;margin-top:15px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:12px;border-bottom:1px solid #edf0f5;text-align:left;font-size:13px}th{color:#68748a;background:#fafbfd}
.button{display:inline-block;background:#071d49;color:#fff;border:0;border-radius:9px;padding:10px 14px;text-decoration:none;font-weight:700;cursor:pointer}
.status{background:#eef3fa;padding:5px 8px;border-radius:8px;font-size:11px;font-weight:700}.empty{color:#8a94a6;text-align:center;padding:25px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}.form-grid label{font-size:13px;color:#68748a;font-weight:700}
.form-grid input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #d8dee8;border-radius:9px;font:inherit;color:#14213d}
@media(max-width:760px){.topbar{display:block;padding:24px 18px}.topbar h1{font-size:26px;line-height:1.15}.topbar p{font-size:15px;line-height:1.4}.badge{display:inline-block;margin-top:16px}.grid{grid-template-columns:1fr;gap:12px}.hierarchy{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr}.card{min-width:0}.card strong{font-size:20px;overflow-wrap:anywhere;word-break:break-word}.form-grid{grid-template-columns:1fr}.nav{padding:8px 12px;gap:4px;overscroll-behavior-x:contain}.nav a{flex:0 0 auto;padding:10px 12px;white-space:nowrap}}

.notice{margin:18px 0;padding:13px 15px;border-radius:10px;font-weight:700}.okbox{background:#e9f7ef;color:#176b3a}.errbox{background:#fff0f0;color:#9b1c1c}
.line-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 140px;gap:12px;padding:12px;background:#f8fafc;border:1px solid #e4e9f1;border-radius:10px}
.form-grid select{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #d8dee8;border-radius:9px;background:#fff;font:inherit;color:#14213d}
@media(max-width:760px){.line-card{grid-template-columns:1fr}}


.money-input{width:140px;padding:9px;border:1px solid #d8dee8;border-radius:8px}.check{display:inline-block;margin-top:15px;font-size:13px;color:#475569}
.full{grid-column:1/-1}.hint{margin:0;color:#68748a;font-size:13px}.preview-box{background:#eef3fa;padding:18px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}.preview-box strong{font-size:24px;color:#071d49}.line-card label{min-width:0}.line-card select{min-width:0}
.progress{height:10px;background:#e7ebf2;border-radius:99px;overflow:hidden;margin:12px 0}.progress>span{display:block;height:100%;background:#0b2a5b;border-radius:99px}.progress-label{display:flex;justify-content:space-between;color:#68748a;font-size:12px}.ro-list{display:grid;gap:10px}.ro-item{display:block;padding:15px;border:1px solid #e2e7ef;border-radius:12px;color:inherit;text-decoration:none}.ro-item:hover{border-color:#9baac0}.ro-title{display:flex;gap:12px;flex-wrap:wrap}.ro-title span{color:#68748a}.ro-money{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#68748a}.ro-money b{color:#172033}.ro-item small{color:#68748a}.budget-preview{border:1px solid #e2e7ef;border-radius:12px;overflow:hidden}.budget-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;padding:10px 12px;border-bottom:1px solid #edf0f4;font-size:12px}.budget-row small{display:block;color:#68748a}.budget-row.head{background:#f5f7fa}.budget-note{padding:12px;color:#68748a;font-size:12px}@media(max-width:700px){.budget-row{grid-template-columns:1fr 1fr}.budget-row.head{display:none}.ro-money{display:grid;grid-template-columns:1fr 1fr}.card strong{font-size:20px}}
@media screen and (max-width:760px){.grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}.card{width:100%;min-width:0;max-width:100%}.wrap{width:100%;max-width:100%;overflow:hidden}.panel{width:100%;max-width:100%;overflow:hidden}.panel .grid{grid-template-columns:minmax(0,1fr)!important}.nav{max-width:100vw!important}.nav a{flex-shrink:0}}
.quick-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.quick-rate{display:block;width:100%;min-width:0;padding:12px;text-align:left;border:1px solid #d8dee8;border-radius:9px;background:#f8fafc;color:#14213d;font:inherit;cursor:pointer;overflow:hidden}.quick-rate b,.quick-rate small{display:block;overflow-wrap:anywhere;word-break:break-word}.quick-rate small{margin-top:4px;color:#68748a;font-size:12px}.warning{background:#fff8e6!important}.muted{color:#68748a;font-size:13px}
@media screen and (max-width:760px){.quick-rates{grid-template-columns:minmax(0,1fr)!important}.quick-rate{padding:11px 12px}.form-grid,.line-card{min-width:0}.line-card select,.line-card input,.form-grid select,.form-grid input{max-width:100%;min-width:0}.preview-box{min-width:0;gap:10px;flex-wrap:wrap}.preview-box strong{overflow-wrap:anywhere;word-break:break-word}.budget-row{min-width:0}.budget-row>*{min-width:0;overflow-wrap:anywhere;word-break:break-word}}
/* Mobile realization form */
.realization-table{min-width:720px}
@media(max-width:760px){
  .realization-table{min-width:0!important;width:100%!important}
  .realization-table thead{display:none}
  .realization-table tbody,.realization-table tr{display:block;width:100%}
  .realization-table tr{padding:10px 0;border-bottom:1px solid #e5e9f0}
  .realization-table td{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px;align-items:center;padding:7px 4px;border:0;font-size:13px;min-width:0}
  .realization-table td::before{font-weight:700;color:#68748a}
  .realization-table td:nth-child(1)::before{content:'Akun'}
  .realization-table td:nth-child(2)::before{content:'Uraian'}
  .realization-table td:nth-child(3)::before{content:'Qty'}
  .realization-table td:nth-child(4)::before{content:'Rencana'}
  .realization-table td:nth-child(5)::before{content:'Realisasi'}
  .realization-table td:nth-child(6)::before{content:'Selisih'}
  .realization-table .money-input{width:100%;max-width:180px;padding:10px}
}

/* Mobile-friendly budget/history tables */
@media(max-width:760px){
  .panel .table-wrap{overflow:visible!important}
  .panel table.mobile-cards thead{display:none}
  .panel table.mobile-cards,.panel table.mobile-cards tbody,.panel table.mobile-cards tr{display:block;width:100%;min-width:0}
  .panel table.mobile-cards tr{padding:10px 0;border-bottom:1px solid #e5e9f0}
  .panel table.mobile-cards td{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;align-items:start;padding:7px 4px;border:0;font-size:13px;min-width:0;overflow-wrap:anywhere;word-break:break-word}
  .panel table.mobile-cards td::before{font-weight:700;color:#68748a}
  .budget-position-table td:nth-child(1)::before{content:'Akun'}
  .budget-position-table td:nth-child(2)::before{content:'Pagu'}
  .budget-position-table td:nth-child(3)::before{content:'Transfer Net'}
  .budget-position-table td:nth-child(4)::before{content:'Efektif'}
  .budget-position-table td:nth-child(5)::before{content:'Reservasi Lain'}
  .budget-position-table td:nth-child(6)::before{content:'Posisi Setelah Kegiatan'}
  .history-status-table td:nth-child(1)::before{content:'Waktu'}
  .history-status-table td:nth-child(2)::before{content:'Dari'}
  .history-status-table td:nth-child(3)::before{content:'Ke'}
  .history-status-table td:nth-child(4)::before{content:'Alasan'}
  .history-status-table td:nth-child(5)::before{content:'Actor'}
  .history-adjustment-table td:nth-child(1)::before{content:'Waktu'}
  .history-adjustment-table td:nth-child(2)::before{content:'Baris'}
  .history-adjustment-table td:nth-child(3)::before{content:'Lama'}
  .history-adjustment-table td:nth-child(4)::before{content:'Baru'}
  .history-adjustment-table td:nth-child(5)::before{content:'Alasan'}
  .history-adjustment-table td:nth-child(6)::before{content:'Actor'}
}