:root{--topbar:#0b6370;--accent:#15b0a7;--bg:#f3f5f7;--card:#fff;--text:#0f172a;--muted:#64748b;--radius:18px;}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial;background:var(--bg);color:var(--text);}
a{text-decoration:none;color:inherit;}
.wrap{padding-bottom:74px;}
.topbar{position:sticky;top:0;z-index:50;background:var(--topbar);padding:10px 12px;display:flex;align-items:center;gap:10px;}
.iconbtn{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;border:0;}
.pill{flex:1;background:#fff;border-radius:14px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pill .money{color:#e11d48;font-weight:800;}
.pill .plus{width:34px;height:34px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;}
.title{color:#fff;font-weight:800;}
.flash{margin:12px 14px 0;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:10px 12px;font-weight:800;}
.container{padding:14px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 20px rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.06);}
.thumb{height:120px;background:linear-gradient(135deg,#0b6370,#083b44);display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;}
.body{padding:10px 12px;}
.name{font-weight:900;margin:0 0 4px;font-size:15px;}
.desc{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.4;}
.meta{display:flex;align-items:center;justify-content:space-between;}
.price{font-weight:900;color:#0f766e;}
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:1px solid rgba(15,23,42,.08);display:flex;justify-content:space-around;padding:10px 6px;}
.navitem{width:50%;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-weight:800;font-size:12px;}
.navitem i{font-size:22px;}
.navitem.active{color:var(--accent);}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:80;}
.drawer{position:fixed;top:0;bottom:0;right:0;width:86%;max-width:360px;background:#fff;z-index:90;transform:translateX(110%);transition:.2s ease;padding:18px 14px;border-top-left-radius:24px;border-bottom-left-radius:24px;overflow:auto;}
.drawer.open{transform:translateX(0);}
.drawer-backdrop.open{display:block;}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.logo{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#49d2c6,#0b6370);}
.brand h2{margin:0;font-size:18px;}
.muted{color:var(--muted);font-weight:800;font-size:12px;}
.menu{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.menu a,.logoutbtn{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:16px;border:1px solid rgba(15,23,42,.08);background:#fff;font-weight:900;}
.logoutform{margin:0;}
.logoutbtn{width:100%;cursor:pointer;}
.menu a i,.logoutbtn i{color:var(--muted);font-size:18px;}
.form{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:18px;padding:12px;}
.input{width:100%;border:1px solid rgba(15,23,42,.12);border-radius:14px;padding:12px 10px;font-size:14px;margin:8px 0;}
.btn{width:100%;border:0;border-radius:14px;padding:12px 10px;font-weight:900;background:var(--accent);color:#fff;cursor:pointer;}
.btn.secondary{background:#0b6370;}
.table{width:100%;border-collapse:separate;border-spacing:0 10px;}
.table td,.table th{background:#fff;padding:10px;border:1px solid rgba(15,23,42,.08);}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid rgba(15,23,42,.10);background:#fff;}
.badge.pending{color:#b45309;}
.badge.processing{color:#0ea5e9;}
.badge.completed{color:#16a34a;}
.badge.cancelled{color:#ef4444;}