body{padding-bottom:78px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--ln);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{border:0;background:none;padding:10px 4px 9px;font-weight:700;color:var(--mu);cursor:pointer;display:grid;gap:2px;justify-items:center;font-size:12px}
.tabbar button svg{width:22px;height:22px}
.tabbar button.on{color:var(--forest)}.tabbar button.on svg{color:var(--leaf)}
.tabbar button.on:before{content:"";position:absolute;margin-top:-10px;width:34px;height:4px;border-radius:0 0 4px 4px;background:var(--gold)}
.online{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:12px 16px;box-shadow:0 2px 0 var(--ln);margin-bottom:14px}
.sw{position:relative;width:58px;height:32px;border-radius:99px;background:var(--ln);border:0;cursor:pointer;transition:background .25s;flex:none}
.sw:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .25s var(--pop);box-shadow:0 2px 5px rgba(0,0,0,.25)}
.sw.on{background:var(--leaf)}.sw.on:after{transform:translateX(26px)}
.job{background:#fff;border-radius:22px;padding:16px;display:grid;gap:10px;box-shadow:0 2px 0 var(--ln);animation:rise .4s var(--ease) both;border-left:6px solid var(--gold)}
.job.mine{border-left-color:var(--leaf)}
.job .big{font-size:22px}
.codein{font:800 28px var(--fd);letter-spacing:.3em;text-align:center}
.assist{background:var(--forest);color:#fff;border-radius:22px;padding:16px;display:grid;gap:8px}
.assist h3{color:var(--gold)}.assist p{margin:0;color:#cfe8df}
.assist .chip{background:rgba(255,255,255,.14);color:#fff}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--mu);margin:8px 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.h-a{background:#F5A623}.h-b{background:#0B7A63}

/* ===== v4 look: silk magenta, turmeric, plum ink. Baloo Thambi 2 for headings and prices, Hind Madurai for text (both carry Tamil). ===== */
:root{--forest:#24103A;--leaf:#A3105F;--gold:#FFC21F;--mint:#FBE7F1;--paper:#F6F3F8;--ink:#1F1230;--mu:#6B5E78;--ln:#E6DFEC;--green:#17803F;
 --fd:'Baloo Thambi 2','Hind Madurai',system-ui,sans-serif;--fb:'Hind Madurai','Noto Sans Tamil',system-ui,sans-serif}
body{font-weight:500}
h1,h2,h3{letter-spacing:-.01em}
.btn.pri{background:var(--leaf);box-shadow:0 4px 0 #6E0A40}.btn.pri:hover{background:#8f0d53;box-shadow:0 6px 0 #6E0A40}.btn.pri:active{box-shadow:0 1px 0 #6E0A40}
.btn.gold{background:var(--gold);box-shadow:0 4px 0 #C99100;color:var(--forest)}
input:focus,select:focus,textarea:focus{border-color:var(--leaf);box-shadow:0 0 0 5px rgba(163,16,95,.15)}
.spin{border-color:var(--mint);border-top-color:var(--leaf)}
.chip.ok{background:var(--green)}

/* rider: plum ink bar, turmeric for what needs doing now, green only for "online" */
.top{background:var(--forest);border-bottom:0;backdrop-filter:none}
.top .logo svg{color:#fff;--dot:var(--gold)}
.top a.l,.top button.l{color:#fff}.top a.l:hover,.top button.l:hover{background:rgba(255,255,255,.14)}
.top .tag{background:var(--gold);color:var(--forest)}
.top:after{content:"";display:block;height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 14px,var(--leaf) 14px 20px,var(--gold) 20px 34px,#fff 34px 36px)}
.tabbar{border-top:0;box-shadow:0 -6px 20px rgba(36,16,58,.12)}
.tabbar button{font-family:var(--fd);font-size:13px;font-weight:700}
.tabbar button.on{color:var(--leaf)}.tabbar button.on svg{color:var(--leaf)}
.sw.on{background:var(--green)}
.online{border-radius:18px}
.job{border-left:0;border-top:6px solid var(--gold);border-radius:20px}
.job.mine{border-top-color:var(--leaf)}
.job .big{font:800 26px var(--fd);color:var(--forest);letter-spacing:.02em}
.job .btn.pri{width:100%;min-height:54px;font-size:18px;font-family:var(--fd)}
.codein{color:var(--leaf)}
.assist{background:var(--forest)}.assist h3{color:var(--gold)}.assist p{color:#e3d3ee}
.h-a{background:#FFC21F}.h-b{background:#A3105F}
.chip.warn{background:#FFF1C8;color:#7a5600}
.top .mu,.top .sm{color:#d9c9e4}

.btn.pri{box-shadow:0 4px 0 var(--leaf-dk,#6E0A40)}

/* v4.2 motion */
.job,.card,.parcel{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.job:nth-child(2){animation-delay:.06s}.job:nth-child(3){animation-delay:.12s}
.btn{transition:transform .12s ease,box-shadow .2s}.btn:active{transform:scale(.95)}
.online .sw{transition:background .3s}.online .sw.on{animation:swp 2s infinite}
@keyframes swp{70%{box-shadow:0 0 0 12px rgba(23,128,63,0)}0%{box-shadow:0 0 0 0 rgba(23,128,63,.5)}}
.job.new{animation:newjob .9s ease both}
@keyframes newjob{0%{transform:scale(.94);opacity:0;box-shadow:0 0 0 0 rgba(255,194,31,.9)}60%{transform:scale(1.02);opacity:1}100%{transform:none;box-shadow:0 0 0 14px rgba(255,194,31,0)}}
.toast{animation:slideup .3s ease both}
@keyframes slideup{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.earn b,.stat b{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;display:inline-block}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}