:root{--ink: #203c3a; --muted: #586f73; --line: #d6e4e1; --canvas: #edf3f0; --panel: rgba(255,255,255,.87); --brand: #176b60; --brand-dark: #105348; --success: #237653; --danger: #b63b50; --warning: #966416; --bs-primary: #176b60; --bs-primary-rgb: 23,107,96; --bs-success-rgb: 35,118,83; --bs-danger-rgb: 182,59,80; --bs-link-color: #176b60; --bs-link-hover-color: #105348; --glass: rgba(255,255,255,.78); --surface-shadow: 0 12px 34px #3459510b,inset 0 1px 0 #fff; --clay-shadow: 0 4px 9px #244f4920,inset 0 2px 2px #ffffff80,inset 0 -2px 3px #183d3820; --radius: 24px;}
html{scroll-padding-top: 24px; overflow-x: clip;}
body{font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.55; color: var(--ink); background-color: var(--canvas);}
body.app-shell, body.public-page, body.login-page{background-image: radial-gradient(at 2% 0%, rgb(213, 233, 223) 0px, transparent 44%), radial-gradient(at 96% 20%, rgb(227, 225, 240) 0px, transparent 36%), radial-gradient(at 66% 100%, rgb(245, 231, 220) 0px, transparent 50%); background-attachment: fixed;}
h1, h2, h3{letter-spacing: -0.035em; text-wrap: balance;}
h1{font-weight: 750;}
a{color: var(--brand); text-underline-offset: 3px;}
button, input, select, textarea{font: inherit;}
button, a, input, select, textarea, summary{-webkit-tap-highlight-color: transparent;}
:focus-visible{outline: rgb(25, 110, 100) solid 3px; outline-offset: 4px;}
input[type="checkbox"], input[type="radio"]{accent-color: var(--brand); width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0;}
[hidden]{display: none !important;}
.skip-link{position: fixed; left: 16px; top: -100px; z-index: 2000; background: rgb(255, 255, 255); padding: 12px; border-radius: 12px;}
.skip-link:focus{top: 12px;}
.eyebrow, .public-readonly{color: var(--brand); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.13em; margin-bottom: 8px;}
.text-secondary, .text-muted{color: var(--muted) !important;}
.small, small{line-height: 1.55;}
.card, .pro-card, .public-data-card, .public-qr-card, .public-auth-card{background: var(--panel); border: 1px solid rgb(255, 255, 255); border-radius: var(--radius); box-shadow: var(--surface-shadow);}
.pro-card .card-body{padding: 24px;}
.pro-card-header{background: rgba(255, 255, 255, 0.376); border-color: var(--line); padding: 18px 24px;}
.pro-card-header h2{font-size: 1.02rem;}
.section-heading{display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px;}
.section-heading h2{font-size: 1.18rem; font-weight: 750; margin: 0px 0px 8px;}
.section-heading p:not(.eyebrow){font-size: 0.86rem; color: var(--muted); margin: 0px;}
.section-heading .eyebrow{margin-bottom: 6px;}
.btn, .login-submit{min-height: 44px; border-radius: 13px; font-size: 0.85rem; font-weight: 650; padding: 10px 16px; box-shadow: rgba(23, 63, 57, 0.063) 0px 2px 3px; transition: background 0.16s, box-shadow 0.16s, transform 0.16s; white-space: normal;}
.btn:hover, .login-submit:hover{transform: translateY(-1px);}
.btn:active, .login-submit:active{transform: translateY(1px);}
.btn-primary, .btn-success, .login-submit{color: rgb(255, 255, 255); background: linear-gradient(145deg, rgb(39, 136, 121), rgb(23, 107, 96)); border: 1px solid rgb(23, 107, 96); box-shadow: rgba(23, 107, 96, 0.14) 0px 5px 12px, rgba(255, 255, 255, 0.208) 0px 2px 2px inset, rgba(16, 62, 60, 0.22) 0px -2px 3px inset;}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .login-submit:hover{background: rgb(16, 83, 72); border-color: rgb(16, 83, 72); color: rgb(255, 255, 255);}
.btn-primary{--bs-btn-active-bg: #105348; --bs-btn-disabled-bg: #176b60; --bs-btn-disabled-border-color: #176b60; --bs-btn-active-border-color: #105348;}
.btn-light, .btn-outline-secondary{background: rgb(241, 246, 243); border: 1px solid rgb(255, 255, 255); color: rgb(54, 90, 83); box-shadow: var(--clay-shadow);}
.btn-outline-primary, .btn-outline-success{--bs-btn-active-bg: #176b60; --bs-btn-active-border-color: #176b60; background: rgb(244, 250, 247); border-color: rgb(158, 190, 180); color: rgb(23, 107, 96);}
.btn-outline-primary:hover, .btn-outline-success:hover{background: rgb(23, 107, 96); border-color: rgb(23, 107, 96); color: rgb(255, 255, 255);}
.btn-sm{font-size: 0.77rem; min-height: 36px; padding: 7px 11px;}
.btn-danger, .btn-outline-danger{box-shadow: none;}
.btn:disabled{transform: none;}
.form-control, .form-select{min-height: 46px; border: 1px solid rgb(202, 219, 213); border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; background-color: rgb(248, 251, 250); box-shadow: rgba(69, 103, 91, 0.043) 2px 2px 5px inset; color: var(--ink); max-width: 100%;}
.form-select{padding-right: 2.75rem; text-overflow: ellipsis; background-position: right 0.8rem center;}
.software-credit{margin-top: 28px; padding: 16px 8px; text-align: center; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere;}
.settlement-table tfoot{font-weight: 700; background: #e5f2ec; border-top: 2px solid #b8d7cb;}
.audit-values{display: grid; grid-template-columns: minmax(110px, .6fr) minmax(0, 1fr); gap: 8px; font-size: .9rem;}
.audit-values dt,.audit-values dd{margin: 0; overflow-wrap: anywhere; white-space: pre-wrap;}
.form-control:focus, .form-select:focus{background-color: rgb(255, 255, 255); border-color: rgb(54, 126, 113); box-shadow: rgba(23, 107, 96, 0.11) 0px 0px 0px 3px;}
.form-control::placeholder{color: rgb(104, 126, 124);}
.form-label, label{font-size: 0.83rem; font-weight: 600; color: rgb(58, 89, 83);}
.form-control[type="file"]{white-space: normal; overflow: hidden;}
.form-control:disabled, .form-select:disabled{opacity: 1; background: rgb(237, 240, 238); color: rgb(97, 117, 110);}
.form-select-sm, .form-control-sm{min-width: 0px;}
label > .form-control, label > .form-select{margin-top: 6px;}
label:has(> .form-control), label:has(> .form-select){width: 100%;}
.alert{border-radius: 16px; border: 1px solid transparent; font-size: 0.86rem; line-height: 1.6;}
.alert-success{background: rgb(229, 244, 235); border-color: rgb(197, 223, 208); color: rgb(36, 93, 67);}
.alert-danger{background: rgb(253, 236, 239); color: rgb(144, 42, 64); border-color: rgb(240, 204, 211);}
.alert-warning{background: rgb(255, 246, 231); color: rgb(119, 84, 33); border-color: rgb(238, 220, 186);}
.dropdown-menu{border: 1px solid rgb(224, 233, 227); border-radius: 16px; box-shadow: rgba(35, 76, 67, 0.14) 0px 14px 35px; padding: 8px; background: rgb(251, 253, 252);}
.dropdown-item{border-radius: 9px; min-height: 42px; white-space: normal;}
.dropdown-item:active{background: var(--brand);}
.table{--bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: #e0e9e5;}
.table > thead{background: rgb(237, 244, 240);}
.table thead th, .pro-table th, .public-data-card thead th{background: rgb(237, 244, 240); color: rgb(80, 105, 99); font-size: 0.72rem; letter-spacing: 0.025em; text-transform: none; vertical-align: middle; line-height: 1.4;}
.table tbody td, .pro-table td{vertical-align: middle;}
.pro-table th, .pro-table td{padding: 14px 16px;}
.table .btn{white-space: nowrap;}
.table-responsive{max-width: 100%; min-width: 0px; overscroll-behavior-x: contain;}
.table-responsive:focus-visible{outline-offset: -3px;}
.attendance-table .sticky-name, .attendance-table thead .sticky-name{background: rgb(243, 248, 245);}
.attendance-table thead th{background: rgb(236, 244, 239);}
.weekend{color: rgb(93, 97, 116); background: rgb(241, 240, 247) !important;}
.status-pill, .soft-badge, .count-pill{color: rgb(40, 105, 88); background: rgb(231, 242, 236); border: 1px solid rgb(205, 226, 214); border-radius: 30px; font-size: 0.72rem; font-weight: 650; line-height: 1.4;}
.soft-badge{display: inline-flex; gap: 6px; align-items: center; padding: 7px 10px; white-space: nowrap;}
.empty-state{color: var(--muted); text-align: center; padding: 28px !important;}
.sidebar{inset: 16px auto 16px 16px; width: 246px; background: var(--glass); color: var(--ink); border: 1px solid rgb(255, 255, 255); border-radius: 26px; box-shadow: var(--surface-shadow); backdrop-filter: blur(16px);}
.sidebar-brand{border-bottom: 1px solid var(--line); padding: 22px 18px; min-height: 92px;}
.sidebar-brand a{color: var(--ink); font-size: 1rem;}
.sidebar-brand small{color: var(--muted); font-size: 0.6rem;}
.brand-mark{background: linear-gradient(145deg, rgb(224, 240, 230), rgb(188, 219, 203)); color: rgb(35, 109, 87); box-shadow: var(--clay-shadow); border: 1px solid rgb(244, 255, 248); width: 42px; height: 42px; border-radius: 15px; font-size: 1.3rem; flex-shrink: 0;}
.sidebar-nav{padding: 10px 12px;}
.nav-label{color: rgb(97, 123, 112); letter-spacing: 0.12em; font-size: 0.6rem; margin: 18px 12px 8px;}
.side-link{padding: 11px 12px; min-height: 44px; border-radius: 13px; color: rgb(75, 104, 94); font-size: 0.83rem; gap: 11px;}
.side-link i{color: rgb(89, 127, 110);}
.side-link:hover{background: rgb(228, 238, 231); color: rgb(32, 79, 67);}
.side-link.active{background: linear-gradient(145deg, rgb(226, 239, 229), rgb(211, 229, 218)); box-shadow: var(--clay-shadow); color: rgb(29, 94, 75); border: 1px solid rgb(246, 255, 249);}
.side-link.active i{color: rgb(23, 107, 96);}
.sidebar-close{color: rgb(40, 95, 80); min-width: 44px; min-height: 44px;}
.sidebar-footer{border-color: var(--line); padding: 8px 12px;}
.sidebar-help{color: var(--muted); font-size: 0.68rem;}
.app-main{margin-left: 278px;}
.content-area{max-width: 1600px; padding: 26px 32px 44px; min-width: 0px;}
.system-toolbar{display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; min-width: 0px;}
.system-status{font-size: 0.71rem; color: var(--muted); display: flex; align-items: center; gap: 6px;}
.connection-dot{display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(67, 137, 103); box-shadow: rgba(67, 137, 103, 0.07) 0px 0px 0px 4px; margin: 0px 5px;}
.account-toolbar{background: transparent; padding: 0px; margin: 0px; min-width: 0px;}
.account-chip{border: 1px solid rgb(255, 255, 255); border-radius: 16px; background: var(--glass); padding: 8px 12px; box-shadow: var(--clay-shadow); min-height: 50px;}
.account-chip img{background: rgb(239, 245, 239);}
.account-chip strong{font-size: 0.81rem;}
.account-chip small{font-size: 0.68rem; color: var(--muted);}
.account-toolbar > .d-flex{order: -1;}
.mobile-topbar{background: var(--glass); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(255, 255, 255); position: sticky; top: 0px; z-index: 1020; min-height: 62px;}
.menu-toggle{width: 44px; height: 44px; border-radius: 13px; background: rgb(228, 238, 231); color: var(--brand); box-shadow: var(--clay-shadow);}
.page-heading h1, .dashboard-compact h1{font-size: 1.65rem;}
.stat-card{box-shadow: var(--surface-shadow); border-radius: 20px; background: var(--panel); border: 1px solid rgb(255, 255, 255) !important;}
.dashboard-summary{border-radius: 20px;}
.dashboard-summary th{background: transparent; padding-top: 17px;}
.dashboard-summary td{padding-bottom: 18px; color: rgb(36, 92, 77); font-size: 1.35rem;}
.dashboard-summary table{min-width: 500px;}
.wallet-total{background: linear-gradient(120deg, rgba(244, 250, 245, 0.91), rgba(228, 241, 231, 0.91)); border-color: rgb(255, 255, 255);}
.dashboard-bottom .chart-wrap{height: 290px !important;}
.dashboard-bottom h2{font-size: 1.02rem;}
.list-group-item{background: transparent;}
.nav-tabs{border-color: var(--line); gap: 4px;}
.nav-tabs .nav-link{border-radius: 12px 12px 0px 0px; color: rgb(70, 99, 90);}
.nav-tabs .nav-link.active{background: rgb(247, 251, 248); color: var(--brand); border-color: var(--line); font-weight: 700;}
.nav-pills .nav-link.active{background: var(--brand); color: rgb(255, 255, 255);}
.modal-content{border: 1px solid rgb(255, 255, 255); border-radius: 24px; background: rgb(247, 251, 248);}
.modal-header, .modal-footer{border-color: var(--line);}
.public-container{max-width: 1180px; padding: 24px 28px 32px;}
.public-header{margin-bottom: 24px; gap: 24px;}
.public-header h1{font-size: 1.8rem; font-weight: 750; margin: 5px 0px 8px;}
.public-header p:not(.eyebrow){font-size: 0.86rem; color: var(--muted); margin: 0px;}
.public-month-form{align-items: center; flex-shrink: 0;}
.public-month-form input{width: 170px;}
.portal-overview{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 26px;}
.overview-tile{display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--glass); border: 1px solid rgb(255, 255, 255); border-radius: 21px; box-shadow: var(--surface-shadow); color: var(--ink); text-decoration: none; min-width: 0px;}
.overview-tile small{display: block; color: var(--muted); font-size: 0.75rem; margin-bottom: 4px;}
.overview-tile strong{display: block; font-size: 1rem; font-weight: 700; line-height: 1.4;}
.overview-tile:first-child strong{font-size: 1.6rem; letter-spacing: -0.04em;}
.overview-tile .unit{font-size: 0.87rem; font-weight: 500; letter-spacing: 0px;}
.overview-link > i:last-child{margin-left: auto; color: rgb(77, 117, 100);}
.overview-link:hover{background: rgb(244, 250, 246); box-shadow: rgba(46, 107, 84, 0.08) 0px 8px 24px;}
.clay-icon{display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 17px; border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: var(--clay-shadow); font-size: 1.4rem;}
.mint{background: linear-gradient(145deg, rgb(220, 242, 228), rgb(187, 221, 204)); color: rgb(42, 113, 88);}
.peach{background: linear-gradient(145deg, rgb(255, 237, 223), rgb(238, 213, 193)); color: rgb(134, 92, 60);}
.lavender{background: linear-gradient(145deg, rgb(238, 234, 251), rgb(212, 207, 234)); color: rgb(97, 82, 130);}
.meal-toolbar{display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap;}
.meal-toolbar label{display: flex; align-items: center; gap: 10px; width: auto !important;}
.meal-toolbar .form-select{width: auto; margin-top: 0px; min-width: 146px;}
.meal-toolbar > .small{font-size: 0.72rem;}
.meal-calendar{display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 10px;}
.meal-day{padding: 12px; border: 1px solid rgb(217, 229, 223); background: rgb(244, 248, 245); border-radius: 17px; min-width: 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset; position: relative;}
.meal-day label{display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 0.67rem; position: relative; min-height: 26px; margin-bottom: 8px; color: rgb(88, 114, 104);}
.meal-day label strong{font-size: 1.02rem; color: rgb(41, 78, 64); font-weight: 750;}
.meal-day .personal-meal-input{width: 100%; height: 44px; min-width: 0px; border: 1px solid rgb(212, 227, 217); border-radius: 11px; background: rgb(255, 255, 255); text-align: center; font-size: 1rem; font-weight: 650; color: rgb(39, 94, 70); padding: 8px; box-shadow: rgba(65, 100, 83, 0.05) 1px 2px 4px inset; appearance: textfield;}
.meal-day .personal-meal-input:focus{outline: none; border-color: rgb(53, 133, 106); box-shadow: rgba(33, 121, 86, 0.14) 0px 0px 0px 3px;}
.meal-day.has-meals{background: linear-gradient(140deg, rgb(237, 248, 240), rgb(223, 239, 229)); border-color: rgb(195, 222, 204);}
.meal-day.is-weekend:not(.has-meals){background: rgb(242, 240, 246);}
.meal-day.is-current{border: 2px solid rgb(55, 125, 102); padding: 11px;}
.day-marker{position: absolute; top: -24px; left: 0px; font-size: 0.53rem; background: rgb(23, 107, 96); color: white; padding: 2px 5px; border-radius: 6px; white-space: nowrap;}
.day-locked{display: flex; align-items: center; justify-content: center; gap: 5px; height: 44px; color: rgb(120, 100, 69); font-size: 0.75rem;}
.meal-day.is-blocked{background: rgb(243, 238, 230); border-style: dashed; border-color: rgb(216, 203, 180);}
.meal-save-panel{margin-top: 20px; background: rgb(234, 242, 237); border: 1px solid rgb(255, 255, 255); border-radius: 17px; padding: 16px; display: flex; gap: 16px; justify-content: space-between; align-items: end;}
.meal-save-panel p{font-size: 0.77rem; margin: 0px 0px 10px; color: rgb(66, 101, 85);}
.meal-save-controls{display: flex; align-items: end; gap: 12px;}
.meal-save-controls label{max-width: 200px;}
.meal-save-controls .btn{min-width: 155px; flex-shrink: 0; min-height: 46px;}
.section-link{display: inline-flex; align-items: center; gap: 12px; font-size: 0.8rem; font-weight: 600; margin-top: 18px; text-decoration: none; min-height: 40px;}
.entry-confirm{display: flex; gap: 12px; align-items: end; flex-wrap: wrap;}
.entry-confirm label{max-width: 200px;}
.context-note{margin: 20px 0px 0px; font-size: 0.78rem; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line);}
.disclosure-panel > summary{display: flex; align-items: center; gap: 14px; padding: 20px 24px; font-size: 0.95rem; list-style: none; color: var(--ink);}
.disclosure-panel > summary::-webkit-details-marker{display: none;}
.disclosure-panel > summary::after{content: "+"; margin-left: auto; color: var(--brand); font-weight: 400; font-size: 1.4rem;}
.disclosure-panel[open] > summary::after{content: "−";}
.disclosure-panel > summary small{display: block; font-size: 0.74rem; color: var(--muted); font-weight: 400; margin-top: 4px;}
.disclosure-panel > summary i{color: var(--brand); margin-right: 8px;}
.disclosure-body{padding: 0px 24px 24px;}
.portal-footer{font-size: 0.7rem; color: rgb(89, 111, 101); line-height: 1.7; text-align: center; padding: 28px 16px 0px; max-width: 800px; margin: auto;}
.public-tabs{background: var(--glass); border: 1px solid rgb(255, 255, 255); border-radius: 16px; flex-wrap: wrap;}
.public-tab{min-height: 44px;}
.public-tab.active{background: var(--brand); box-shadow: var(--clay-shadow);}
.public-stat, .person-settlement-card{border: 1px solid rgb(255, 255, 255); border-radius: 20px; background: var(--panel); box-shadow: var(--surface-shadow);}
.public-stat > i{background: rgb(225, 238, 229); color: var(--brand);}
.public-stat small{color: var(--muted);}
.wallet-balance-panel{background: linear-gradient(130deg, rgba(225, 239, 228, 0.92), rgba(247, 250, 243, 0.92)); padding: 26px; margin-bottom: 24px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center;}
.wallet-balance-panel h2{font-size: 0.8rem; font-weight: 600; color: rgb(74, 107, 89); margin: 0px 0px 8px;}
.balance-value{font-size: 2.4rem; font-weight: 750; letter-spacing: -0.055em; line-height: 1.25; overflow-wrap: anywhere;}
.wallet-breakdown{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.wallet-breakdown small{display: block; color: rgb(83, 110, 96); font-size: 0.74rem; margin-bottom: 4px;}
.wallet-breakdown strong{font-size: 1rem;}
.balance-note{grid-column: 1 / -1; font-size: 0.75rem; color: rgb(83, 109, 97); margin: 0px; padding-top: 14px; border-top: 1px solid rgb(204, 223, 209);}
.wallet-layout{display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start;}
.wallet-form{display: flex; flex-direction: column; gap: 16px;}
.wallet-form > p{margin: 0px;}
.step-label{font-size: 0.67rem; font-weight: 750; color: rgb(84, 115, 98); letter-spacing: 0.08em;}
.qr-deposit{background: rgb(255, 255, 255); display: block; width: 240px; max-width: 100%; height: auto; margin: 0px auto; border: 8px solid rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(45, 84, 75, 0.063) 0px 6px 24px;}
.bank-details{text-align: center; padding: 16px; background: rgb(238, 245, 240); border: 1px solid rgb(255, 255, 255); border-radius: 14px; overflow-wrap: anywhere;}
.bank-details strong, .bank-details span{display: block;}
.bank-details span{font-size: 0.82rem; color: var(--muted); margin-top: 3px;}
.bank-details .h4{color: var(--brand); margin-top: 10px;}
.deposit-steps{display: flex; gap: 8px; list-style: none; padding: 0px; margin: 0px 0px 20px;}
.deposit-steps li{flex: 1 1 0%; font-size: 0.69rem; color: rgb(88, 113, 102); background: rgb(239, 244, 240); padding: 8px; border-radius: 10px; text-align: center;}
.deposit-steps li.current{background: rgb(217, 236, 223); color: rgb(34, 92, 67); font-weight: 700;}
.wallet-history{margin-top: 24px;}
.request-state{display: inline-block; padding: 5px 9px; border-radius: 9px; font-size: 0.72rem; font-weight: 650; background: rgb(255, 242, 216); color: rgb(128, 92, 34);}
.request-state.approved{background: rgb(227, 242, 232); color: rgb(39, 99, 66);}
.request-state.rejected{background: rgb(251, 232, 236); color: rgb(160, 44, 65);}
.profile-heading{margin-bottom: 24px;}
.profile-heading h1{font-size: 1.7rem;}
.profile-heading p{font-size: 0.85rem; color: var(--muted);}
.profile-form{display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.profile-section{border: 1px solid rgb(220, 231, 223); border-radius: 18px; padding: 20px; min-width: 0px; background: rgba(249, 252, 250, 0.5);}
.profile-section legend{float: none; width: auto; padding: 0px 8px; font-size: 0.95rem; font-weight: 700; margin: 0px 0px 12px;}
.profile-fields{display: flex; flex-direction: column; gap: 16px;}
.profile-avatar{width: 76px; height: 76px; border-radius: 24px; object-fit: cover; background: rgb(232, 240, 233); box-shadow: var(--clay-shadow); padding: 4px;}
.profile-submit{grid-column: 1 / -1; display: flex; align-items: end; gap: 16px; flex-wrap: wrap;}
.profile-submit label{max-width: 260px;}
.profile-security{margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px;}
.profile-security form{max-width: 480px;}
.login-page{padding: 32px 24px; min-height: 100dvh; background-color: var(--canvas);}
.login-shell{width: min(1080px, 100%); gap: 70px; grid-template-columns: 1.1fr 1fr;}
.login-story{padding: 24px;}
.login-emblem{width: 72px; height: 72px; margin-bottom: 20px; filter: drop-shadow(rgba(49, 87, 66, 0.094) 0px 5px 7px);}
.login-story h1{font-size: clamp(30px, 3.3vw, 47px); line-height: 1.22; color: rgb(33, 79, 66); letter-spacing: -0.05em;}
.login-story > p:not(.login-eyebrow){color: rgb(80, 108, 96); font-size: 0.94rem; max-width: 380px;}
.login-eyebrow{font-size: 0.64rem; font-weight: 750; letter-spacing: 0.13em; color: rgb(72, 107, 88);}
.login-local{border: 1px solid rgb(255, 255, 255); background: rgba(248, 252, 246, 0.65); border-radius: 24px; padding: 9px 14px; color: rgb(70, 106, 84);}
.login-card{background: rgba(255, 255, 255, 0.81); border: 1px solid rgb(255, 255, 255); border-radius: 30px; padding: 34px; box-shadow: rgba(63, 105, 83, 0.098) 0px 20px 60px, rgb(255, 255, 255) 0px 1px 0px inset; backdrop-filter: blur(18px);}
.login-card h2{font-size: 1.7rem; color: rgb(36, 77, 61); letter-spacing: -0.04em; margin: 12px 0px;}
.login-muted{color: rgb(84, 109, 93); font-size: 0.86rem; margin-bottom: 22px;}
.login-card .form-control{background: rgb(243, 248, 243); border: 1px solid rgb(211, 225, 212); border-radius: 12px; height: 49px; font-size: 1rem; box-shadow: rgba(72, 103, 66, 0.03) 2px 3px 6px inset;}
.login-card .form-control:focus{background: rgb(255, 255, 255); border-color: rgb(60, 127, 97); box-shadow: rgba(43, 112, 86, 0.125) 0px 0px 0px 3px;}
.login-card label{font-size: 0.81rem; color: rgb(60, 92, 73);}
.login-submit{margin-top: 24px; min-height: 49px;}
.login-note{font-size: 0.74rem; color: rgb(84, 107, 89); border-color: rgb(219, 229, 218); padding-top: 18px; margin: 22px 0px 0px;}
.login-privacy{margin-top: 18px; font-size: 0.72rem; border-top: 1px solid rgb(219, 229, 218); padding-top: 12px; color: rgb(83, 107, 89);}
.login-privacy summary{font-weight: 500; padding: 4px 0px; min-height: 36px;}
.login-privacy p{margin: 8px 0px 0px; line-height: 1.7;}
.login-footer{color: rgb(89, 114, 93); font-size: 0.62rem; letter-spacing: 0.18em;}
.password-field button{min-height: 44px; top: 3px; right: 5px;}
@media (min-width: 1400px) {.content-area{padding-left: 38px; padding-right: 38px;}}
@media (max-width: 1100px) {.portal-overview{gap: 10px;}
.overview-tile{padding: 16px; gap: 10px;}
.overview-tile strong{font-size: 0.86rem;}
.clay-icon{width: 40px; height: 40px; font-size: 1.2rem;}
.meal-save-panel{align-items: stretch; flex-direction: column;}
.meal-save-panel p{margin: 0px;}
.meal-save-controls{justify-content: flex-end;}
.login-shell{gap: 32px;}}
@media (max-width: 991.98px) {.app-main{margin-left: 0px;}
.sidebar{inset: 10px auto 10px 10px; transform: translateX(calc(-100% - 16px)); width: 270px;}
.sidebar-open .sidebar{transform: translateX(0px);}
.content-area{padding: 20px 20px 36px;}
.system-toolbar{margin-bottom: 22px;}
.system-status{font-size: 0.66rem;}
.sidebar-open{overflow: hidden;}
.sidebar-open .sidebar-backdrop{background: rgba(37, 70, 61, 0.314); backdrop-filter: blur(3px);}
.account-chip{min-height: 46px;}
.login-story{padding: 8px;}
.public-container{padding: 22px 22px 32px;}
.public-header{align-items: flex-start;}
.wallet-layout{gap: 18px;}}
@media (max-width: 767.98px) {body.app-shell, body.public-page, body.login-page{background-attachment: scroll;}
.public-container{padding: 20px 16px calc(120px + env(safe-area-inset-bottom));}
.public-header{flex-direction: column; gap: 18px;}
.public-header h1{font-size: 1.52rem;}
.public-header .eyebrow{font-size: 0.57rem;}
.public-month-form{width: 100%;}
.public-month-form input{flex: 1 1 0%; min-width: 0px; width: auto;}
.public-month-form .btn{white-space: nowrap;}
.portal-overview{grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;}
.overview-tile:first-child{grid-column: 1 / -1; padding: 14px 18px;}
.overview-tile:first-child > div{display: flex; justify-content: space-between; align-items: center; gap: 18px; flex: 1 1 0%;}
.overview-tile:first-child small{max-width: 130px; margin: 0px;}
.overview-tile:first-child strong{font-size: 1.4rem; white-space: nowrap;}
.overview-tile:not(:first-child){align-items: flex-start; gap: 10px; padding: 14px; flex-direction: column; position: relative;}
.overview-link > i:last-child{position: absolute; right: 14px; top: 18px; font-size: 0.9rem;}
.overview-tile strong{font-size: 0.84rem;}
.overview-tile small{font-size: 0.66rem;}
.clay-icon{width: 38px; height: 38px; border-radius: 13px; font-size: 1.15rem;}
.section-heading{flex-direction: column; gap: 10px; margin-bottom: 18px;}
.section-heading h2{font-size: 1.1rem;}
.section-heading .soft-badge{display: none;}
.meal-calendar{grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px;}
.meal-day{padding: 9px 8px; border-radius: 14px;}
.meal-day.is-current{padding: 8px 7px;}
.meal-day label{font-size: 0.58rem; min-height: 22px;}
.meal-day label strong{font-size: 0.94rem;}
.meal-day .personal-meal-input{height: 44px; font-size: 16px; padding: 5px;}
.day-marker{font-size: 0.49rem; top: -20px;}
.meal-toolbar{gap: 10px; margin-top: 4px;}
.meal-toolbar > .small{font-size: 0.69rem;}
.meal-save-panel{padding: 14px; margin-top: 16px; gap: 12px;}
.meal-save-controls{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end;}
.meal-save-controls label{max-width: none;}
.meal-save-controls .btn{min-width: 0px; padding-left: 8px; padding-right: 8px;}
.entry-confirm label{max-width: none;}
.entry-confirm .btn-primary{flex: 1 1 0%;}
.disclosure-panel > summary{padding: 18px; font-size: 0.88rem;}
.disclosure-panel > summary small{font-size: 0.7rem;}
.disclosure-body{padding: 0px 18px 18px;}
.pro-card .card-body{padding: 20px;}
.mobile-records, .mobile-records tbody, .mobile-records tr, .mobile-records td{display: block; width: 100%;}
.mobile-records thead{display: none;}
.mobile-records tr{border: 1px solid rgb(218, 230, 222); border-radius: 14px; padding: 10px 12px; margin: 12px 0px; background: rgb(246, 250, 247);}
.mobile-records td{display: grid; grid-template-columns: 80px minmax(0px, 1fr); gap: 10px; padding: 7px 0px; font-size: 0.81rem; border: 0px; overflow-wrap: anywhere;}
.mobile-records td::before{content: attr(data-label); font-size: 0.72rem; color: var(--muted); font-weight: 500;}
.mobile-records td[colspan]{display: block;}
.mobile-records td[colspan]::before{display: none;}
.mobile-records td .btn{white-space: normal;}
.wallet-balance-panel{padding: 22px; grid-template-columns: 1fr; gap: 18px;}
.balance-value{font-size: 2.1rem;}
.wallet-breakdown{padding-top: 14px; border-top: 1px solid rgb(204, 223, 209); gap: 12px;}
.wallet-layout{grid-template-columns: 1fr;}
.wallet-history{margin-top: 18px;}
.profile-form{grid-template-columns: 1fr; gap: 18px;}
.profile-section{padding: 18px;}
.profile-submit{gap: 12px;}
.profile-submit label{max-width: none;}
.profile-submit .btn{width: 100%;}
.public-stat strong{font-size: 1rem;}
.public-tab{white-space: normal;}
.portal-footer{font-size: 0.65rem; padding: 24px 8px 0px;}
.profile-heading h1{font-size: 1.5rem;}
.public-qr-card{border-radius: 24px;}}
@media (max-width: 575.98px) {.content-area{padding: 18px 12px 30px;}
.system-toolbar{gap: 8px; align-items: center;}
.system-status{max-width: 100px; flex-wrap: wrap; line-height: 1.5;}
.system-status .status-caption{display: none;}
.account-chip{padding: 7px 9px; gap: 7px; max-width: 175px;}
.account-chip img{width: 30px; height: 30px;}
.account-chip small{max-width: 100px; white-space: normal; font-size: 0.6rem;}
.account-chip strong{font-size: 0.75rem;}
.account-toolbar .btn{padding: 9px; font-size: 0.75rem;}
.account-toolbar .notice-label{display: none;}
.account-toolbar .dropdown-menu{max-width: calc(-24px + 100vw) !important;}
.page-heading h1, .dashboard-compact h1{font-size: 1.4rem;}
.page-heading > form{flex-wrap: wrap;}
.page-heading > .d-flex, .public-header > .d-flex{flex-wrap: wrap;}
.btn-sm{min-height: 40px;}
.form-control, .form-select{font-size: 16px;}
.pro-card-header{padding: 16px;}
.form-card .card-body{padding: 18px;}
.pro-card{border-radius: 21px;}
.dashboard-summary table{min-width: 470px;}
.dashboard-bottom .chart-wrap{height: 235px !important;}
.dashboard-summary td{font-size: 1.05rem;}
.wallet-total > .d-flex{gap: 12px !important; align-items: flex-start !important;}
.wallet-total .ms-auto{width: 100%; border-top: 1px solid rgb(208, 226, 213); padding-top: 12px; margin-left: 0px !important;}
.public-container .card-body{padding: 18px;}
.public-header h1{overflow-wrap: anywhere;}
.meal-save-controls{grid-template-columns: 1fr;}
.meal-save-controls .btn{width: 100%;}
.meal-save-controls label{width: 100%;}
.meal-calendar{gap: 7px;}
.section-heading p:not(.eyebrow){font-size: 0.8rem;}
.meal-toolbar{align-items: flex-start;}
.disclosure-panel > summary .count-pill{display: none;}
.public-header{margin-bottom: 20px;}
.portal-overview{margin-bottom: 18px;}
.overview-tile:first-child > div{gap: 6px;}
.overview-tile:first-child small{font-size: 0.7rem;}
.public-tabs{width: 100%;}
.public-tab{flex: 1 1 0%; justify-content: center; font-size: 0.75rem;}
.login-page{padding: 24px 16px;}
.login-shell{grid-template-columns: 1fr; gap: 20px; max-width: 450px;}
.login-story{text-align: center; padding: 0px;}
.login-emblem{width: 52px; height: 52px; margin-bottom: 10px;}
.login-story h1{font-size: 1.7rem; margin: 10px 0px;}
.login-story h1 br{display: none;}
.login-story > p:not(.login-eyebrow), .login-local{display: none;}
.login-card{padding: 26px 22px; border-radius: 26px;}
.login-card h2{font-size: 1.55rem;}
.login-eyebrow{font-size: 0.6rem;}
.login-footer{margin-top: 24px;}
.entry-confirm .btn{flex: 1 1 0%;}
.profile-security .btn{width: 100%;}}
@media (max-width: 359px) {.meal-calendar{grid-template-columns: repeat(3, minmax(0px, 1fr));}
.public-container{padding-left: 12px; padding-right: 12px;}
.public-header h1{font-size: 1.35rem;}
.overview-tile{padding: 12px !important;}
.overview-tile:first-child strong{font-size: 1.2rem;}
.overview-tile:first-child .unit{font-size: 0.75rem;}}
@supports not (backdrop-filter:blur(1px)) {.sidebar, .login-card{background: rgb(244, 249, 245);}
.pro-card{background: rgb(250, 253, 251);}}
@media (prefers-reduced-motion: reduce) {*, ::before, ::after{scroll-behavior: auto !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important;}
.btn:hover, .login-submit:hover{transform: none;}}
@media print {body.app-shell, body.public-page{background: rgb(255, 255, 255) !important;}
.sidebar, .mobile-topbar, .system-toolbar, .skip-link{display: none !important;}
.app-main{margin: 0px;}
.content-area, .public-container{padding: 0px; max-width: none;}
.pro-card, .card{border-color: rgb(204, 204, 204); break-inside: avoid; box-shadow: none !important; background: rgb(255, 255, 255) !important;}
.table-responsive{overflow: visible !important; max-height: none !important;}
.public-settlement-table{display: block !important;}
.public-settlement-cards{display: none !important;}}
.cbcs-shell .sidebar-nav.portal-nav{position: static; inset: auto; display: block; padding: 10px 12px; border: 0px; background: transparent; box-shadow: none; margin: 0px; border-radius: 0px; backdrop-filter: none; font-size: inherit;}
.cbcs-shell .portal-nav a{display: flex; justify-content: flex-start; flex-direction: row; gap: 11px; padding: 11px 12px; min-height: 44px; line-height: 1.5; border-radius: 13px; font-size: 0.83rem; flex: 1 1 auto;}
.cbcs-shell .portal-nav a > i{font-size: 1.05rem;}
.cbcs-shell .portal-nav a.active{border: 1px solid rgb(246, 255, 249);}
.cbcs-shell .public-container{padding-bottom: 40px;}
.header-month-actions{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; max-width: 470px;}
.period-view-note{display: block; font-size: 0.76rem; color: rgb(49, 94, 78); margin: 7px 0px 0px;}
.header-month-actions > .period-view-note{flex-basis: 100%; text-align: right;}
.vietnamese-month{flex: 1 1 0%; min-width: 190px !important; width: auto !important;}
.month-status-panel{padding: 18px 22px; background: rgb(249, 245, 233); border: 1px solid rgb(232, 221, 193); border-radius: 18px; margin: 0px 0px 22px;}
.month-status-panel strong{font-size: 0.88rem;}
.month-status-panel p{font-size: 0.78rem; margin: 6px 0px; color: rgb(100, 90, 64);}
.month-status-panel summary{font-size: 0.79rem; padding: 6px 0px;}
.month-status-panel ul{display: flex; flex-wrap: wrap; gap: 5px 25px; font-size: 0.78rem; margin-bottom: 0px;}
.month-status-panel.is-complete{background: rgb(231, 243, 233); border-color: rgb(199, 221, 206);}
.month-status-panel.is-complete p{color: rgb(63, 100, 81);}
.close-action{position: relative;}
.close-action > summary{list-style: none;}
.close-action > summary::-webkit-details-marker{display: none;}
.close-action > form{position: absolute; right: 0px; top: calc(100% + 10px); z-index: 30; background: rgb(248, 252, 249); border: 1px solid rgb(214, 229, 217); box-shadow: rgba(42, 94, 68, 0.19) 0px 15px 40px; border-radius: 18px; padding: 20px; width: min(340px, -48px + 100vw);}
.single-entry-editor{padding: 10px 0px;}
.single-entry-editor > summary{font-size: 0.83rem;}
.batch-row{display: grid; grid-template-columns: 180px 160px minmax(0px, 1fr) 44px; align-items: end; gap: 12px; margin-bottom: 14px; padding: 14px; background: rgb(237, 245, 239); border-radius: 15px;}
.batch-row label{min-width: 0px;}
.batch-row input{width: 100%;}
.batch-row .btn{padding: 9px;}
.money-link{border: 0px; background: transparent; padding: 3px 0px; color: inherit; font: inherit; cursor: pointer; text-align: inherit; text-decoration: underline dotted rgb(116, 166, 147); text-underline-offset: 4px; min-height: 34px; max-width: 100%;}
.money-link:hover{color: rgb(23, 107, 96); text-decoration-style: solid;}
.money-dialog{border: 1px solid rgb(255, 255, 255); border-radius: 24px; box-shadow: rgba(22, 62, 56, 0.22) 0px 25px 70px; padding: 26px; background: rgb(248, 252, 249); color: var(--ink); width: min(760px, -28px + 100vw); max-height: 88dvh; overflow: auto; overscroll-behavior: contain;}
.money-dialog::backdrop{background: rgba(22, 62, 56, 0.4); backdrop-filter: blur(4px);}
.money-dialog header{display: flex; justify-content: space-between; gap: 15px;}
.money-dialog h2{font-size: 1.4rem;}
.money-dialog header p{font-size: 0.8rem;}
.money-dialog dd{margin: 0px; font-weight: 700; white-space: nowrap;}
.formula-equation{padding: 14px; background: rgb(231, 242, 233); border-radius: 12px; font-size: 0.84rem;}
.formula-lines > div{display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 10px 0px; border-bottom: 1px solid rgb(220, 231, 223); font-size: 0.85rem;}
.formula-lines dt{font-weight: 600;}
.formula-lines small, .formula-item small{display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); margin-top: 4px;}
.formula-item{display: flex; gap: 16px; justify-content: space-between; padding: 12px 0px; border-bottom: 1px solid rgb(220, 231, 223); font-size: 0.81rem;}
.formula-item > strong{white-space: nowrap;}
.cbcs-shell fieldset:disabled{opacity: 0.62;}
.cbcs-shell .single-entry-editor:has(fieldset:disabled){display: none;}
@media (max-width: 1100px) {.batch-row{grid-template-columns: 1fr 1fr 44px;}
.batch-row label:nth-child(3){grid-area: 2 / 1 / auto / 3;}
.batch-row button{grid-area: 2 / 3;}
.cbcs-shell .portal-overview{grid-template-columns: 1fr;}
.cbcs-shell .overview-tile{flex-direction: row; align-items: center;}
.cbcs-shell .overview-tile > div{display: block;}
.cbcs-shell .overview-link > i:last-child{position: static;}
.header-month-actions{justify-content: flex-start; max-width: 100%;}
.header-month-actions > .period-view-note{text-align: left;}
.cbcs-shell .public-header{align-items: flex-start; flex-direction: column;}}
@media (max-width: 575.98px) {.cbcs-shell .public-container{padding: 20px 12px 36px;}
.batch-row{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); padding: 12px; gap: 10px;}
.batch-row label:nth-child(1){grid-column: 1 / -1;}
.batch-row label:nth-child(2){grid-column: 1 / -1;}
.batch-row label:nth-child(3){grid-area: auto / 1 / auto / -1;}
.batch-row button{grid-area: auto / 2;}
.close-action{position: static;}
.close-action > form{position: static; max-width: 100%; width: 100%; margin-top: 10px;}
.header-month-actions{display: block; width: 100%;}
.header-month-actions .public-month-form{margin-top: 12px;}
.header-month-actions .close-action{margin-bottom: 10px;}
.header-month-actions > .soft-badge{white-space: normal;}
.vietnamese-month{width: 100% !important; min-width: 0px !important;}
.month-status-panel{padding: 15px;}
.money-dialog{padding: 20px 16px;}
.formula-lines > div, .formula-item{gap: 10px;}
.formula-lines dd{white-space: normal; text-align: right; min-width: 100px;}
.money-dialog h2{font-size: 1.2rem;}
.formula-item{flex-direction: column; gap: 4px;}}
.money-dialog header{align-items: flex-start;}
.money-dialog header > [data-close-dialog]{width: 44px; height: 44px; min-height: 44px; flex-shrink: 0; display: grid; place-items: center; padding: 0px;}
.formula-participants{margin-top: 8px; padding: 10px 12px; background: rgb(237, 244, 238); border-radius: 10px;}
.formula-participants ul{padding-left: 18px; margin: 6px 0px 0px; font-size: 0.73rem; line-height: 1.7;}
.formula-participants li{overflow-wrap: anywhere;}

.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:10px}.correction-active{border:1px solid #b87813;background:#fff4d7;padding:12px;border-radius:12px;margin:12px 0}
.navigation-status{position:fixed;z-index:10000;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:12px 20px;border-radius:14px;border:1px solid #84bca9;background:#edf8f3;color:#0e5045;box-shadow:0 8px 28px #163d362b;font-weight:600;pointer-events:none}a[data-navigation-pending]{box-shadow:inset 0 0 0 2px #3c9981}.portal-nav a[aria-current="location"]{font-weight:700}