:root{--p:#6c3cf0;--p2:#9b5cff;--pink:#ff4d8d;--orange:#ff9f1c;--mint:#16c784;--sky:#38bdf8;--red:#ff4757;--ink:#1f1b3a;--muted:#6f6a8f;--bg:#f5f2ff;--card:#fff;--line:#ebe7fa;--r:18px;--shadow:0 6px 22px rgba(108,60,240,.10);--grad:linear-gradient(135deg,#6c3cf0,#ff4d8d)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45}
body.app{background:radial-gradient(900px 400px at 100% -10%,#ffe3f0 0,transparent 60%),radial-gradient(800px 400px at -10% 0,#e4dcff 0,transparent 60%),var(--bg);background-attachment:fixed;padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--p);text-decoration:none}
h1,h2,h3{letter-spacing:-.01em}
h3{margin:.2em 0 .8em}

/* ---- top bar + nav ---- */
.topbar{position:sticky;top:0;z-index:50;background:var(--grad);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 22px;box-shadow:0 4px 18px rgba(108,60,240,.35)}
.topbar a{color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;min-width:0}
.brand-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.22);font-size:22px;flex:none}
.brand-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{display:flex;align-items:center;gap:12px;font-size:14px}
.who-name small{opacity:.8;text-transform:capitalize}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--p);font-weight:800}
.logout{background:rgba(255,255,255,.2);padding:6px 12px;border-radius:99px;font-weight:600}
.logout:hover{background:rgba(255,255,255,.35)}
.net{width:10px;height:10px;border-radius:50%;background:#ff4757;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.net.on{background:#2ee6a6;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,230,166,.7)}70%{box-shadow:0 0 0 8px rgba(46,230,166,0)}100%{box-shadow:0 0 0 0 rgba(46,230,166,0)}}
.bell{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.2);font-size:19px;transition:transform .2s}
.bell:hover{transform:rotate(-12deg) scale(1.08)}
.count{display:inline-block;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 0 2px #fff}
.count[hidden]{display:none}
.bell .count{position:absolute;top:-6px;right:-6px}
.count.bump{animation:bump .5s}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.nav{position:sticky;top:58px;z-index:40;display:flex;gap:6px;padding:10px 18px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;display:flex;align-items:center;gap:7px;white-space:nowrap;color:var(--muted);font-weight:600;padding:8px 14px;border-radius:99px;transition:all .18s}
.nav a:hover{background:#efe9ff;color:var(--p);transform:translateY(-1px)}
.nav a.active{background:var(--grad);color:#fff;box-shadow:0 6px 14px rgba(108,60,240,.35)}
.nav .count{box-shadow:none}
.container{max-width:1150px;margin:22px auto;padding:0 16px}
.page-title{margin:0 0 16px;font-size:28px;font-weight:800}
.footer{text-align:center;color:var(--muted);padding:26px 16px 30px;font-size:13px}

/* ---- cards / grids ---- */
.card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:18px;overflow-x:auto;border:1px solid var(--line);animation:rise .45s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.stat{position:relative;overflow:hidden;color:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--shadow);background:linear-gradient(135deg,#6c3cf0,#9b5cff);font-weight:600;transition:transform .2s;animation:rise .45s both}
.stat:hover{transform:translateY(-4px) rotate(-.4deg)}
.stat::after{content:"";position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.18)}
.stat b{display:block;font-size:30px;margin-top:6px;font-weight:800}
.stat small{opacity:.9;font-weight:500}
.stat.good{background:linear-gradient(135deg,#0fb981,#2ee6a6)}
.stat.warn{background:linear-gradient(135deg,#ff9f1c,#ffc94d)}
.stat.bad{background:linear-gradient(135deg,#ff4757,#ff7a8a)}
.hello{display:flex;align-items:center;gap:14px;background:var(--grad);color:#fff;border-radius:var(--r);padding:20px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
.hello h2{margin:0;font-size:24px}.hello p{margin:2px 0 0;opacity:.92}
.hello .big{font-size:44px;animation:wave 2.4s infinite;transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.streak{margin-left:auto;background:rgba(255,255,255,.22);border-radius:99px;padding:8px 16px;font-weight:800;white-space:nowrap}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;background:transparent}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:top}
th{background:#f3efff;color:#4a3f8f;font-weight:700}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#faf8ff}

/* ---- forms ---- */
input,select,textarea{padding:11px 13px;border:2px solid var(--line);border-radius:12px;font:inherit;width:100%;background:#fcfbff;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--p2);box-shadow:0 0 0 4px rgba(155,92,255,.2);background:#fff}
input[type=checkbox],input[type=radio]{width:auto}
.inline{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.inline input,.inline select{width:auto}
label{display:block;margin:10px 0 5px;font-weight:700;font-size:13px;color:#4a3f8f}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.btn:not([class*="btn-"]){position:relative;overflow:hidden;display:inline-block;background:var(--grad);color:#fff;border:0;padding:11px 22px;border-radius:99px;cursor:pointer;font:inherit;font-weight:700;box-shadow:0 6px 16px rgba(108,60,240,.3);transition:transform .15s,box-shadow .15s,filter .15s;text-align:center}
.btn:not([class*="btn-"]):hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(108,60,240,.38);filter:brightness(1.05)}
.btn:not([class*="btn-"]):active{transform:scale(.96)}
.btn.green{background:linear-gradient(135deg,#0fb981,#2ee6a6);box-shadow:0 6px 16px rgba(15,185,129,.3)}
.btn.red{background:linear-gradient(135deg,#ff4757,#ff7a8a);box-shadow:0 6px 16px rgba(255,71,87,.3)}
.btn.gray{background:linear-gradient(135deg,#7d7a99,#a09cc0);box-shadow:none}
.btn.secondary{background:#fff;color:var(--p);box-shadow:none}
.btn.sm{padding:6px 14px;font-size:13px}
.ripple{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,255,255,.6);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(28);opacity:0}}

/* ---- alerts / badges ---- */
.alert{padding:13px 16px;border-radius:14px;margin-bottom:16px;font-weight:600;animation:rise .4s both;transition:opacity .5s,transform .5s}
.alert.hide{opacity:0;transform:translateY(-10px);pointer-events:none}
.alert.success,.ok{background:#dcfbee;color:#0a7a52;border:1px solid #a8f0d0}
.alert.error,.err{background:#ffe5e8;color:#c4243a;border:1px solid #ffc2ca}
.badge{padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700;color:#fff;background:#8a86a8;text-transform:capitalize}
.badge.paid,.badge.resolved,.badge.present,.badge.approved{background:var(--mint)}
.badge.unpaid,.badge.open,.badge.absent,.badge.rejected{background:var(--red)}
.badge.in_progress,.badge.overdue,.badge.pending{background:var(--orange)}
.bar{background:#ece8fb;border-radius:99px;height:14px;overflow:hidden}.bar>div{height:100%;background:linear-gradient(90deg,#16c784,#2ee6a6);border-radius:99px;transition:width .8s}
.bar.low>div{background:linear-gradient(90deg,#ff4757,#ff9f1c)}
.stars{color:#ffb800;letter-spacing:1px}
.empty{text-align:center;color:var(--muted);font-size:16px}

/* ---- notifications ---- */
.notif-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s;animation:rise .4s both}
.notif-item:hover{transform:translateX(4px)}
.notif-item.unread{border-left:6px solid var(--pink);background:#fff8fb}
.notif-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#f1ebff;font-size:22px;flex:none}
.notif-body{display:flex;flex-direction:column;flex:1;min-width:0}.notif-body small{color:var(--muted)}
.dot-new{background:var(--pink);color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px}

/* ---- meal photo cards ---- */
.meal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.meal-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .25s,box-shadow .25s;animation:rise .5s both}
.meal-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 34px rgba(108,60,240,.22)}
.meal-card .ph{position:relative;height:160px;background:#e9e3ff center/cover no-repeat}
.meal-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(31,27,58,.65),transparent 55%)}
.meal-card .ph span{position:absolute;z-index:1;left:12px;bottom:10px;color:#fff;font-weight:800;font-size:17px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.meal-card p{margin:0;padding:13px 15px;font-weight:600;color:#3d3770}
.today-row{background:#fff7d6!important}

/* ---- rating / feedback ---- */
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip input{position:absolute;opacity:0}
.chip label{margin:0;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:2px solid var(--line);border-radius:99px;cursor:pointer;font-weight:700;color:var(--ink);background:#fff;transition:all .18s}
.chip .th{width:38px;height:38px;border-radius:50%;background:center/cover}
.chip label:hover{transform:translateY(-2px);border-color:var(--p2)}
.chip input:checked+label{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(108,60,240,.35);transform:scale(1.04)}
.chip input:focus-visible+label{outline:3px solid var(--sky)}
.rate{display:inline-flex;flex-direction:row-reverse;gap:6px}
.rate input{position:absolute;opacity:0}
.rate label{margin:0;font-size:46px;line-height:1;cursor:pointer;color:#d9d3f2;transition:transform .18s,color .18s}
.rate label:hover,.rate label:hover~label,.rate input:checked~label{color:#ffb800;text-shadow:0 4px 12px rgba(255,184,0,.5)}
.rate label:hover{transform:scale(1.25) rotate(-8deg)}
.rate input:checked+label{animation:starpop .4s}
.rate input:focus-visible+label{outline:3px solid var(--sky);border-radius:8px}
@keyframes starpop{0%{transform:scale(1)}50%{transform:scale(1.5) rotate(12deg)}100%{transform:scale(1)}}
.rate-face{min-height:44px;font-size:22px;font-weight:800;color:var(--p);margin:6px 0 4px}
.pop{display:inline-block;font-size:34px;animation:starpop .45s}

/* ---- login ---- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px;background:linear-gradient(135deg,#6c3cf0,#ff4d8d 60%,#ff9f1c);background-size:200% 200%;animation:flow 12s ease infinite}
@keyframes flow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.login-card{width:min(400px,100%);border:0;box-shadow:0 24px 60px rgba(31,27,58,.35);animation:rise .6s both}
.login-card h2{margin-top:0}
.login-home-link{display:inline-block;margin-bottom:12px;font-weight:600}

/* ---- public home ---- */
.home-body{background:var(--bg);min-height:100vh}
.home-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px max(20px,calc((100% - 1150px)/2));background:var(--grad);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 4px 18px rgba(108,60,240,.35)}
.home-brand{color:#fff;font-weight:800;font-size:18px}
.home-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.home-actions>a:not(.btn){color:#fff;padding:8px;font-weight:600}
.home-container{max-width:1150px;margin:0 auto;padding:26px 16px}
.home-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:48px;border-radius:28px;color:#fff;overflow:hidden;background:linear-gradient(100deg,rgba(31,27,58,.88),rgba(108,60,240,.55)),url(food/hero.jpg) center/cover;box-shadow:0 20px 50px rgba(108,60,240,.3);min-height:330px}
.home-hero>div:first-child{max-width:640px;position:relative}
.home-hero h1{font-size:clamp(30px,5vw,50px);line-height:1.1;margin:8px 0 14px;font-weight:900}
.home-hero p:not(.eyebrow){font-size:17px;line-height:1.6;color:#f1ecff;max-width:600px}
.home-hero .btn.secondary{background:#fff;color:var(--p)}
.home-hero-mark{font-size:120px;line-height:1;animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(6deg)}}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--pink);margin:0 0 6px}
.home-hero .eyebrow{color:#ffd56b}
.home-section{margin:38px 0}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-heading h2{margin:0;font-size:26px;font-weight:800}
.section-heading h2 span{font-size:16px;font-weight:500;color:var(--muted)}
.notice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.notice-card{background:#fff;border:1px solid var(--line);border-left:6px solid var(--orange);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.notice-card small{color:var(--muted)}.notice-card h3{margin:8px 0}.notice-card p{margin-bottom:0}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.service-grid a{display:flex;flex-direction:column;gap:6px;background:#fff;padding:18px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);transition:all .2s;box-shadow:var(--shadow)}
.service-grid a:hover{transform:translateY(-5px);border-color:var(--p2)}
.service-grid span,.home-login-hint{font-size:14px;color:var(--muted)}
.home-login-hint{margin-top:16px}
.home-footer{text-align:center;padding:24px;color:var(--muted)}
.install-app-button[hidden]{display:none}

@media print{.topbar,.nav,.footer,.noprint{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- mobile: app-style bottom tab bar ---- */
@media(max-width:820px){
 body.app{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
 .topbar{padding:10px 14px}
 .brand-text{font-size:15px;max-width:42vw}
 .who-name,.logout-text{display:none}
 .who{gap:8px}
 .logout{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;font-size:16px}
 .nav{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:60;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px;border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -8px 24px rgba(108,60,240,.15);justify-content:flex-start}
 .nav a{flex:0 0 auto;flex-direction:column;gap:1px;padding:6px 12px;border-radius:16px;font-size:11px;min-width:64px}
 .nav a.active{box-shadow:none}
 .nav-ico{font-size:22px;line-height:1.1}
 .nav .count{position:absolute;top:0;right:8px}
 .page-title{font-size:23px}
 .home-topbar{flex-direction:column;align-items:flex-start;padding:14px 16px}
 .home-hero{padding:30px 22px;min-height:0}
 .home-hero-mark{display:none}
 .section-heading{flex-direction:column;align-items:flex-start}
 .home-actions .btn{width:100%}
 .hello{flex-wrap:wrap}.streak{margin-left:0}
 .rate label{font-size:40px}
}