:root{--bg:#f3f4f6;--panel:#fff;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--accent:#111827;--ok:#047857;--danger:#b91c1c;--shadow:0 12px 30px rgba(17,24,39,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}
body{display:flex;justify-content:center}.shell{width:min(100%,760px);min-height:100vh;background:var(--bg);padding:18px 18px 90px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.brand{font-weight:900;letter-spacing:.4px}.sub{font-size:12px;color:var(--muted)}.pill{background:#e5e7eb;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px}.hero{background:var(--accent);color:#fff}.hero .sub{color:#d1d5db}.hero-total{font-size:44px;font-weight:900;margin:5px 0 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.packages{display:grid;gap:10px}.pkg{display:flex;justify-content:space-between;align-items:center;padding:16px;border:2px solid var(--line);border-radius:18px;background:#fff;cursor:pointer}.pkg.active{border-color:#111827;background:#f9fafb}.pkg-name{font-weight:800}.price{font-weight:900;font-size:18px}.label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:4px 0 8px}.input{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}.money{font-size:28px;font-weight:900;text-align:right}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.btn{border:0;border-radius:14px;padding:14px 16px;font-weight:900;cursor:pointer}.btn-primary{background:#111827;color:#fff}.btn-soft{background:#e5e7eb;color:#111827}.btn-danger{background:#fee2e2;color:#991b1b}.btn-ok{background:#d1fae5;color:#065f46}.btn-block{width:100%}.btn-lg{padding:18px;font-size:18px}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.summary-row:last-child{border-bottom:0}.summary-row strong{font-size:18px}.change{font-size:38px;font-weight:900;color:var(--ok);text-align:right}.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#fff;border-top:1px solid var(--line);padding:8px 10px env(safe-area-inset-bottom);z-index:10}.nav button{border:0;background:transparent;padding:10px 4px;font-size:12px;font-weight:800;color:#6b7280}.nav button.active{color:#111827}.section-title{font-size:20px;font-weight:900;margin:2px 0 12px}.trx{display:grid;grid-template-columns:1fr auto;gap:8px;padding:13px 0;border-bottom:1px solid var(--line)}.trx:last-child{border:0}.trx small{color:var(--muted)}.status-cancel{color:var(--danger);font-weight:800}.empty{text-align:center;padding:28px 12px;color:var(--muted)}.login-wrap{min-height:100vh;width:min(100%,520px);display:grid;place-items:center;padding:24px}.login-card{width:100%;background:#fff;border-radius:28px;padding:26px;box-shadow:var(--shadow)}.logo{width:58px;height:58px;border-radius:18px;background:#111827;color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:16px}.form-gap{display:grid;gap:10px}.muted{color:var(--muted)}.toast{position:fixed;top:18px;left:50%;transform:translate(-50%,-20px);background:#111827;color:white;padding:12px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.right{text-align:right}.danger-text{color:var(--danger)}.ok-text{color:var(--ok)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:9px 6px;border-bottom:1px solid var(--line);font-size:13px;text-align:left}.table th{color:var(--muted)}.tabs{display:flex;gap:8px;overflow:auto;margin-bottom:12px}.tab{white-space:nowrap;border:0;border-radius:999px;padding:9px 12px;font-weight:800;background:#e5e7eb}.tab.active{background:#111827;color:white}.modal{position:fixed;inset:0;background:rgba(17,24,39,.45);display:grid;place-items:center;padding:18px;z-index:50}.modal-card{background:#fff;width:min(100%,520px);max-height:90vh;overflow:auto;border-radius:22px;padding:18px}.hidden{display:none!important}@media(min-width:900px){.shell{padding-top:24px}.packages{grid-template-columns:1fr 1fr}.hero-total{font-size:54px}}

/* V1.2 role-based backoffice */
.backoffice-shell{width:min(100%,1180px);padding-bottom:28px}
.backoffice-intro{display:flex;justify-content:space-between;align-items:flex-end;margin:8px 0 14px}
.backoffice-tabs{background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:var(--shadow)}
.filter-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px}.filter-grid.two{grid-template-columns:1fr 1fr}
.stats-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.stats-grid .card{margin-bottom:12px}
.admin-total{font-size:34px;font-weight:900;margin-top:6px}.admin-total.dark{color:var(--text)}
.admin-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-two-col>.card{margin-bottom:12px}
@media(max-width:760px){.filter-grid,.filter-grid.two,.stats-grid,.admin-two-col{grid-template-columns:1fr}.backoffice-tabs{border-radius:14px}.backoffice-shell{padding-bottom:24px}}