:root{--wine:#7d1d2d;--wine-dark:#5b1220;--wine-soft:#f8eef0;--ink:#24211f;--muted:#7e7772;--line:#ebe6e1;--cream:#f7f5f2;--gold:#b68a48;--green:#2f7b62;--blue:#3d6f91;--white:#fff;--shadow:0 8px 30px rgba(70,42,34,.07)}
*{box-sizing:border-box}body{margin:0;font-family:"Be Vietnam Pro",sans-serif;color:var(--ink);background:var(--cream);font-size:14px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:#fff;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 24px;border-bottom:1px solid var(--line)}.brand img{width:46px;height:46px;object-fit:contain}.brand div{display:flex;flex-direction:column}.brand strong{font-family:"DM Serif Display";font-size:21px;letter-spacing:2px;color:var(--wine)}.brand span{font-size:9px;letter-spacing:3px;color:#544943}nav{padding-top:18px;flex:1}nav p{font-size:10px;letter-spacing:1.5px;color:#aaa09a;margin:20px 12px 8px}.nav-item{width:100%;border:0;background:none;padding:11px 12px;border-radius:8px;display:flex;align-items:center;gap:12px;color:#625c58;font:500 13px inherit;cursor:pointer;text-align:left;margin:2px 0}.nav-item span{font-size:18px;width:20px}.nav-item b{margin-left:auto;background:var(--wine-soft);color:var(--wine);font-size:10px;padding:3px 7px;border-radius:10px}.nav-item:hover{background:#faf7f5;color:var(--wine)}.nav-item.active{background:var(--wine-soft);color:var(--wine);font-weight:600}.sidebar-help{background:#faf7f5;border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;gap:10px;align-items:center}.sidebar-help>span{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--wine)}.sidebar-help div{display:flex;flex-direction:column;font-size:11px}.sidebar-help small,.user-copy small{color:var(--muted);font-size:10px;margin-top:3px}
.login-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 80% 10%,#f2dfe3 0,transparent 34%),linear-gradient(135deg,#faf8f5,#f1ece7);display:grid;place-items:center;padding:20px}.login-screen.hidden{display:none}.login-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:0 24px 70px rgba(70,30,35,.14);text-align:center}.login-card>img{width:105px;height:105px;object-fit:contain;margin-bottom:8px}.login-card h1{font-family:"DM Serif Display";font-size:30px;font-weight:400;margin:5px 0}.login-card>p:not(.eyebrow){color:var(--muted);font-size:11px;margin:0 0 24px}.login-card label{display:block;text-align:left;font-size:10px;font-weight:600;margin:13px 0}.login-card input{display:block;width:100%;margin-top:6px;border:1px solid #ddd6d1;border-radius:8px;padding:12px;font:400 12px inherit;outline:none}.login-card input:focus{border-color:var(--wine);box-shadow:0 0 0 3px var(--wine-soft)}.login-card .primary{width:100%;padding:12px;margin-top:6px}.login-card>small{display:block;color:#aaa;font-size:8px;margin-top:18px}.login-error{min-height:18px;color:#b42318;font-size:9px;text-align:left}
main{margin-left:248px;min-height:100vh}header{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 34px;justify-content:space-between;position:sticky;top:0;z-index:10}.branch-select{display:flex;flex-direction:column;gap:3px}.branch-select small{font-size:9px;color:#999;letter-spacing:1px}.branch-select button{border:0;background:none;padding:0;color:var(--ink);font-weight:600;cursor:pointer}.branch-select button span{color:var(--wine);margin-left:8px}.header-actions{display:flex;align-items:center;gap:10px}.icon-btn{border:0;background:none;cursor:pointer;font-size:20px;position:relative}.icon-btn i{position:absolute;width:6px;height:6px;background:var(--wine);border-radius:50%;right:2px;top:0}.avatar{width:36px;height:36px;background:var(--wine);color:white;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:12px}.avatar.soft{background:var(--wine-soft);color:var(--wine)}.user-copy{display:flex;flex-direction:column;font-size:12px}.menu-btn{display:none}.page{display:none;padding:32px 34px 50px;max-width:1600px;margin:auto}.page.active{display:block}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px}.page-heading h1{font-family:"DM Serif Display";font-weight:400;font-size:31px;margin:2px 0 4px;letter-spacing:.2px}.page-heading>div>p:last-child{color:var(--muted);margin:0}.eyebrow{font-size:9px!important;letter-spacing:1.8px;color:var(--wine)!important;font-weight:700}.toolbar{display:flex;gap:10px}.primary,.secondary{border-radius:7px;padding:10px 15px;font:600 12px inherit;cursor:pointer}.primary{color:white;background:var(--wine);border:1px solid var(--wine)}.primary:hover{background:var(--wine-dark)}.secondary{background:white;border:1px solid #ddd6d1;color:#514b47}.full{width:100%;margin-top:12px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.kpi{background:#fff;border:1px solid var(--line);border-radius:11px;padding:19px;box-shadow:0 2px 8px rgba(70,42,34,.02);position:relative;overflow:hidden}.kpi.wine{background:linear-gradient(135deg,#861e31,#6e1728);color:#fff;border:0}.kpi-top{display:flex;justify-content:space-between}.kpi span,.kpi-top span{font-size:9px;letter-spacing:1.2px;font-weight:600;color:#938b85}.wine .kpi-top span{color:#e7c9ce}.kpi-top i{font-style:normal;width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.13);display:grid;place-items:center}.gold-icon{background:#faf3e8!important;color:var(--gold)}.green-icon{background:#edf7f2!important;color:var(--green)}.blue-icon{background:#eff5f8!important;color:var(--blue)}.kpi>strong{font-family:"DM Serif Display";font-size:29px;display:block;margin:12px 0 7px;font-weight:400}.kpi strong small{font:500 12px inherit;margin-left:4px}.kpi>div:last-of-type{font-size:10px;color:#aaa09a}.kpi>div b{color:var(--green)}.wine>div b{color:#fff}.wine>div:last-of-type{color:#d7bfc3}.kpi em{position:absolute;left:0;bottom:0;width:var(--w,100%);height:3px;background:#a85060}.kpi .gold-bar{background:var(--gold)}.kpi .green-bar{background:var(--green)}.kpi .blue-bar{background:var(--blue)}
.dashboard-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:18px;margin-bottom:18px}.bottom-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 2px 10px rgba(70,42,34,.025)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:19px 21px;border-bottom:1px solid var(--line)}.panel-head h2{font-family:"DM Serif Display";font-weight:400;font-size:18px;margin:0 0 4px}.panel-head p{font-size:10px;color:var(--muted);margin:0}.legend{font-size:9px;display:flex;gap:13px;color:var(--muted)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.wine-dot{background:var(--wine)}.gold-dot{background:var(--gold)}.green-dot{background:var(--green)}.more,.text-button{border:0;background:none;color:var(--wine);font:600 10px inherit;cursor:pointer}.chart-wrap{height:283px;display:flex;padding:20px 22px 15px}.y-axis{width:38px;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:24px;font-size:9px;color:#aaa}.chart{position:relative;flex:1}.chart-lines{position:absolute;inset:0 0 24px;display:flex;flex-direction:column;justify-content:space-between}.chart-lines i{border-top:1px dashed #eee}.chart svg{position:absolute;inset:0 0 24px;width:100%;height:calc(100% - 24px);overflow:visible}.area{fill:url(#area)}.line{fill:none;stroke-width:2}.line1{stroke:var(--wine)}.line2{stroke:var(--gold);stroke-width:1.5}.line3{stroke:var(--green);stroke-width:1.5}.x-axis{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;font-size:8px;color:#999}.branch-panel{display:flex;flex-direction:column}.branch-item{padding:17px 20px;border-bottom:1px solid var(--line)}.branch-item-top{display:flex;align-items:center;justify-content:space-between}.branch-name{display:flex;align-items:center;gap:9px}.branch-name i{width:7px;height:7px;border-radius:50%;background:var(--green)}.branch-name div{display:flex;flex-direction:column}.branch-name strong{font-size:11px}.branch-name small{font-size:8px;color:var(--muted);margin-top:3px}.branch-item-top>b{font-family:"DM Serif Display";font-weight:400}.progress{height:4px;background:#eee;border-radius:3px;margin-top:12px}.progress i{display:block;width:var(--p);height:100%;background:var(--c,var(--wine));border-radius:3px}.branch-panel>.text-button{padding:15px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;font-size:8px;letter-spacing:1px;color:#a29993;background:#fcfbfa;padding:11px 18px}td{padding:13px 18px;border-top:1px solid #f0ece9;font-size:10px}td strong{font-size:10px}td small{display:block;color:var(--muted);margin-top:3px}.status{display:inline-block;padding:5px 8px;border-radius:12px;font-size:8px;font-weight:600}.success{background:#edf7f2;color:var(--green)}.pending{background:#fcf4e7;color:#a56d1a}.top-service{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line)}.top-service>span{font-family:"DM Serif Display";font-size:16px;color:#bbb}.top-service div{flex:1}.top-service strong{font-size:10px}.top-service small{display:block;color:var(--muted);font-size:8px;margin-top:4px}.top-service>b{font-size:10px}
.filter-row{display:flex;gap:10px;margin-bottom:16px}.search{border:1px solid #ddd6d1;background:#fff;border-radius:7px;padding:9px 12px;display:flex;gap:8px;align-items:center;flex:1;color:#aaa}.search input{border:0;outline:0;width:100%;font:400 11px inherit;background:transparent}select{border:1px solid #ddd6d1;border-radius:7px;background:#fff;padding:0 30px 0 12px;color:#625c58;font:500 11px inherit}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.profile-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:19px;box-shadow:var(--shadow)}.profile-head{display:flex;align-items:center;gap:12px}.profile-head .avatar{width:44px;height:44px}.profile-head div:nth-child(2){flex:1}.profile-head strong{font-size:12px}.profile-head small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.profile-meta{display:flex;margin:18px 0;background:#faf8f6;border-radius:8px;padding:11px}.profile-meta div{flex:1;border-right:1px solid var(--line);padding-left:10px}.profile-meta div:last-child{border:0}.profile-meta span{display:block;font-size:8px;color:#999;margin-bottom:5px}.profile-meta strong{font-size:11px}.package-tag{display:flex;justify-content:space-between;align-items:center;padding:10px;background:var(--wine-soft);border-radius:7px;color:var(--wine);font-size:9px}.package-tag b{font-size:11px}.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:18px}.stats-strip div{padding:17px 20px;border-right:1px solid var(--line)}.stats-strip div:last-child{border:0}.stats-strip span{display:block;color:#999;font-size:8px;letter-spacing:1px}.stats-strip strong{font-family:"DM Serif Display";font-size:22px;font-weight:400;margin-top:6px;display:block}.availability{width:8px;height:8px;border-radius:50%;background:var(--green)}
.commission-layout{display:grid;grid-template-columns:320px 1fr;min-height:570px}.bill-list{border-right:1px solid var(--line);padding:20px}.bill-list h3{margin:0 0 14px}.commission-bill{padding:13px 10px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}.commission-bill.active{background:var(--wine-soft)}.commission-bill div{display:flex;justify-content:space-between}.commission-bill strong{font-size:10px}.commission-bill small{font-size:8px;color:var(--muted);display:block;margin-top:5px}.commission-detail{padding:24px 28px}.detail-heading{display:flex;justify-content:space-between;align-items:center}.detail-heading small{font-size:8px;color:var(--wine);font-weight:700}.detail-heading h2{font-family:"DM Serif Display";font-weight:400;margin:4px 0 18px}.customer-line{display:flex;align-items:center;gap:12px;padding:15px;background:#faf8f6;border-radius:9px}.customer-line>div:nth-child(2){flex:1}.customer-line strong{display:block;font-size:11px}.customer-line small{display:block;color:var(--muted);font-size:8px;margin-top:4px}.customer-line>b{font-family:"DM Serif Display";font-size:17px;font-weight:400}.commission-service{margin-top:16px;border:1px solid var(--line);border-radius:9px;padding:16px}.commission-service-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}.commission-service-head strong{font-size:11px}.commission-service-head small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.commission-person{display:grid;grid-template-columns:1fr 90px 120px;gap:12px;align-items:center;padding-top:12px}.commission-person input{width:100%;border:1px solid var(--line);padding:8px;border-radius:6px}.add-person{margin-top:12px;color:var(--wine);border:0;background:none;font:600 9px inherit;cursor:pointer}.report-placeholder{height:330px;display:grid;grid-template-columns:1fr 1.5fr;padding:40px;align-items:center}.report-placeholder>div>span{font-size:35px;color:var(--wine)}.report-placeholder h2{font-family:"DM Serif Display";font-size:25px;font-weight:400}.report-placeholder p{color:var(--muted)}.stack-bars{height:230px;display:flex;align-items:flex-end;gap:45px;justify-content:center;border-bottom:1px solid var(--line)}.stack-bars i{height:var(--a);width:70px;border-radius:8px 8px 0 0;background:linear-gradient(to top,var(--wine) 0 70%,var(--gold) 70%);opacity:.9}.audit-list{padding:6px 22px}.audit-row{display:grid;grid-template-columns:160px 190px 1fr 140px;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);font-size:10px}.audit-row small{color:var(--muted)}.audit-action{font-weight:600}.audit-action b{color:var(--wine)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(31,20,18,.35);z-index:39;opacity:0;pointer-events:none;transition:.25s}.drawer-backdrop.show{opacity:1;pointer-events:auto}.drawer{position:fixed;right:0;top:0;bottom:0;width:470px;max-width:100%;background:#fff;z-index:40;transform:translateX(100%);transition:.3s ease;display:flex;flex-direction:column;box-shadow:-15px 0 40px rgba(20,10,10,.12)}.drawer.show{transform:none}.drawer-head{display:flex;justify-content:space-between;padding:22px 25px;border-bottom:1px solid var(--line)}.drawer-head p{font-size:8px;letter-spacing:1px;color:var(--wine);margin:0}.drawer-head h2{font-family:"DM Serif Display";font-weight:400;margin:4px 0 0}.close-btn{border:0;background:none;font-size:27px;cursor:pointer}.drawer-body{padding:20px 25px;overflow:auto;flex:1}.drawer-body h3{margin:24px 0 10px;font-size:11px}.service-edit{border:1px solid var(--line);padding:14px;border-radius:8px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:10px}.service-edit strong{font-size:10px}.service-edit small{display:block;color:var(--muted);font-size:8px;margin-top:5px}.service-edit>b{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:11px}.employee-pill{border:0;background:var(--wine-soft);color:var(--wine);font:600 8px inherit;padding:7px;border-radius:12px;justify-self:start}.payment-box{background:#faf8f6;border-radius:9px;margin-top:18px;padding:15px}.payment-box span{display:flex;justify-content:space-between;font-size:9px;padding:6px 0}.payment-box .total{border-top:1px solid var(--line);margin-top:5px;padding-top:12px}.audit-note{font-size:8px;color:var(--muted);padding:15px;background:#fffaf0;margin-top:16px;border-radius:7px}.drawer-footer{padding:16px 25px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}.toast{position:fixed;right:28px;bottom:25px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:10px;padding:14px 18px;display:flex;gap:12px;align-items:center;z-index:60;transform:translateY(130px);transition:.3s}.toast.show{transform:none}.toast>span{background:#edf7f2;color:var(--green);width:30px;height:30px;border-radius:50%;display:grid;place-items:center}.toast strong{font-size:10px;display:block}.toast small{font-size:8px;color:var(--muted)}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,1fr)}.commission-layout{grid-template-columns:260px 1fr}}
@media(max-width:780px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.menu-btn{display:block}.sidebar.open:after{content:"";position:fixed;left:248px;top:0;width:100vw;height:100vh;background:#0004}main{margin-left:0}header{padding:0 16px}.user-copy,.branch-select small{display:none}.page{padding:22px 16px}.page-heading{align-items:flex-start;gap:15px}.page-heading h1{font-size:26px}.toolbar{flex-wrap:wrap;justify-content:flex-end}.kpi-grid,.card-grid,.stats-strip{grid-template-columns:1fr 1fr}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.commission-layout{grid-template-columns:1fr}.bill-list{border-right:0;border-bottom:1px solid var(--line)}.legend{display:none}.report-placeholder{grid-template-columns:1fr;padding:25px}.commission-person{grid-template-columns:1fr}.audit-row{grid-template-columns:1fr 1fr}.filter-row{flex-wrap:wrap}.filter-row .search{flex-basis:100%}}
@media(max-width:520px){.kpi-grid,.card-grid,.stats-strip{grid-template-columns:1fr}.page-heading{flex-direction:column}.page-heading>button{width:100%}.commission-detail{padding:18px}.drawer{width:100%}.chart-wrap{padding-left:10px}.kpi>strong{font-size:26px}}
.stats-strip{grid-template-columns:repeat(3,1fr)}.stack-bars>div{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:16px}.stack-bars>div i{width:min(36px,80%);display:block}.stack-bars>div small{font-size:7px;color:var(--muted);margin-top:5px;white-space:nowrap}