:root{--blue:#2563EB;--green:#16A34A;--red:#DC2626;--bg:#F7F9FC;--card:#FFF;--ink:#111827;--sub:#6B7280;--line:#E5E7EB;--lblue:#EFF4FF;--lgreen:#ECFDF3;--lred:#FEF2F2;}
*{box-sizing:border-box;font-family:'Segoe UI',system-ui,sans-serif;margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);display:flex;justify-content:center;min-height:100vh;padding-bottom:70px;}
.app{width:100%;max-width:480px;padding:16px;display:flex;flex-direction:column;gap:12px;}
.center{text-align:center;}.sub{color:var(--sub);font-size:14px;}
.logo{font-size:46px;text-align:center;}h1{font-size:28px;text-align:center;}
.title{font-size:22px;font-weight:700;text-align:center;}.big-icon{font-size:52px;text-align:center;}
.name{font-weight:700;}.meta{color:var(--sub);font-size:12px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.card.blue{background:var(--lblue);}.card.green{background:var(--lgreen);}.card.red{background:var(--lred);}
.row{display:flex;gap:10px;}.row>*{flex:1;}
label{font-size:13px;color:var(--sub);font-weight:600;}
.input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:15px;background:#fff;color:var(--ink);}
.input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);border-color:transparent;}
.btn{border:none;border-radius:12px;padding:14px;font-size:16px;font-weight:600;cursor:pointer;width:100%;}
.btn:active{transform:scale(.98);}
.btn-blue{background:var(--blue);color:#fff;}.btn-green{background:var(--green);color:#fff;}.btn-red{background:var(--red);color:#fff;}
.btn-outline{background:#fff;color:var(--blue);border:1px solid var(--blue);}.btn-gray{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:10px;width:auto;}
.chip{border:none;border-radius:20px;padding:10px 14px;background:#E5E7EB;color:var(--ink);cursor:pointer;font-size:13px;font-weight:600;}
.chip.on{background:var(--blue);color:#fff;}
.hidden{display:none !important;}
.otp{display:flex;gap:8px;justify-content:center;}
.otp input{width:42px;height:50px;text-align:center;font-size:20px;border:1px solid var(--line);border-radius:10px;}
.link{color:var(--blue);text-align:center;cursor:pointer;text-decoration:underline;font-size:14px;}
.item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;}
.status{font-weight:700;font-size:12px;color:var(--blue);}
.topbar{display:flex;justify-content:space-between;align-items:center;}.page-title{font-size:20px;font-weight:800;}
/* FB-style */
.nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center;z-index:50;}
.nav-inner{width:100%;max-width:480px;display:flex;}
.nav button{flex:1;border:none;background:none;padding:10px 0 8px;font-size:20px;cursor:pointer;position:relative;color:var(--sub);}
.nav .lbl{font-size:10px;display:block;}
.nav button.on{color:var(--blue);}.nav button.on .lbl{font-weight:700;}
.badge-dot{position:absolute;top:4px;right:calc(50% - 16px);background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:1px 5px;}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;flex:none;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.vbadge{color:#3897f0;font-weight:900;}.pbadge{color:var(--green);}
.tag{display:inline-block;background:var(--lblue);color:var(--blue);border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700;margin:0 4px 4px 0;}
.tag.green{background:var(--lgreen);color:var(--green);}.tag.red{background:var(--lred);color:var(--red);}
.post-head{display:flex;gap:10px;align-items:center;}
.post-media img{width:100%;border-radius:12px;max-height:340px;object-fit:cover;margin-top:8px;}
.post-media video{width:100%;border-radius:12px;max-height:340px;margin-top:8px;}
.actions{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:8px;}
.actions button{flex:1;border:none;background:none;color:var(--sub);font-size:14px;cursor:pointer;padding:6px;}
.actions button.on{color:var(--blue);font-weight:700;}
.comments{display:flex;flex-direction:column;gap:6px;}
.comment{background:var(--bg);border-radius:12px;padding:8px 10px;font-size:13px;}
.hire{border:2px dashed var(--blue);}.emergency{border:2px dashed var(--red);}
.stars button{border:none;background:none;font-size:32px;color:#D1D5DB;cursor:pointer;}
.stars button.on{color:#F59E0B;}

/* ===== Desktop 3-column FB-style layout ===== */
.wrap{display:flex;justify-content:center;gap:16px;width:100%;max-width:1200px;margin:0 auto;}
.rail{display:none;}
.railbtn{border:none;background:none;padding:12px;font-size:15px;text-align:left;cursor:pointer;border-radius:12px;color:var(--ink);font-weight:600;width:100%;}
.railbtn:hover{background:var(--lblue);}
@media(min-width:900px){
  .rail{display:flex;flex-direction:column;gap:10px;width:270px;padding:16px 8px;position:sticky;top:0;height:100vh;overflow:auto;flex:none;}
  .nav{display:none;}
  body{padding-bottom:0;}
}
.reply{margin-left:26px;}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal .card{width:100%;max-width:420px;}
.clickable{cursor:pointer;}

/* ===== MOTION & POLISH PACK ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
body{animation:fadeIn .4s ease}
.item,.card{animation:fadeUp .45s ease both}
.btn{transition:transform .12s ease, box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn-blue:hover,.btn-green:hover{box-shadow:0 6px 16px rgba(37,99,235,.25)}
.card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08)}
.clickable:hover{text-decoration:underline}
.avatar.ring{box-shadow:0 0 0 2px #fff,0 0 0 5px #2563EB}
.avatar.ringgreen{box-shadow:0 0 0 2px #fff,0 0 0 5px #16A34A}
#splash{position:fixed;inset:0;background:linear-gradient(135deg,#2563EB,#16A34A);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:999;transition:opacity .6s;gap:6px}
#splash div{font-size:64px;animation:pop .7s ease}
#splash b{font-size:22px;letter-spacing:1px;animation:fadeUp .8s ease}
.page-title{background:linear-gradient(90deg,#2563EB,#16A34A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.back-btn{position:fixed;top:12px;left:12px;z-index:50;background:var(--card);border:1px solid var(--line);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .1s;}
.back-btn:hover{transform:scale(1.1);}
.back-btn:active{transform:scale(.95);}

/* ===== Custom toast popups (replaces ugly browser alerts) ===== */
.sl-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-90px);z-index:9999;max-width:92%;padding:12px 18px;border-radius:14px;color:#fff;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .35s ease,opacity .35s;opacity:0;text-align:center;font-size:14px;}
.sl-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.sl-toast.err{background:linear-gradient(135deg,#DC2626,#B91C1C);}
.sl-toast.ok{background:linear-gradient(135deg,#16A34A,#15803D);}
.sl-toast.warn{background:linear-gradient(135deg,#D97706,#B45309);}
.sl-toast.info{background:linear-gradient(135deg,#2563EB,#1D4ED8);}
.tag.blue{background:var(--lblue);color:var(--blue);}
/* ===== Success / shield overlays ===== */
.sl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9998;animation:fadeIn .3s;padding:20px;}
.sl-overlay .card{max-width:340px;text-align:center;animation:pop .4s;}
.big-check{width:90px;height:90px;margin:0 auto 10px;border-radius:50%;background:var(--green);color:#fff;font-size:50px;display:flex;align-items:center;justify-content:center;animation:pop .5s;}
.big-shield{width:90px;height:90px;margin:0 auto 10px;border-radius:50%;background:var(--red);color:#fff;font-size:50px;display:flex;align-items:center;justify-content:center;animation:pop .5s;}
.hourglass{font-size:60px;display:inline-block;animation:flip 2s infinite;}
@keyframes flip{0%,100%{transform:rotate(0)}50%{transform:rotate(180deg)}}

.card.sel{border:2px solid var(--blue);background:var(--lblue);}

/* ===== Transaction timeline + worker motion ===== */
.timeline{display:flex;gap:4px;margin:10px 0;}
.tstep{flex:1;text-align:center;font-size:10px;color:var(--sub);}
.tstep .dot{width:28px;height:28px;border-radius:50%;background:var(--line);margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.tstep.on .dot{background:var(--green);color:#fff;}
.tstep.now .dot{background:var(--blue);color:#fff;animation:pop 1.2s infinite;}
.worker{font-size:60px;display:inline-block;animation:work 1s infinite;}
@keyframes work{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) translateY(-4px)}75%{transform:rotate(12deg)}}
.countdown{font-weight:800;color:var(--red);}
button:disabled{opacity:.45;}

.tag.green{background:#dcfce7;color:#16a34a;}

.setlist{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.setrow{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer;background:#fff}
.setrow:last-child{border-bottom:none}
.setrow .ic{width:24px;text-align:center}
.setrow .chev{margin-left:auto;color:var(--sub)}
.setrow.red{color:var(--red)}


/* ===== Settings shell + switches + tables + map ===== */
.set-me{display:flex;gap:10px;align-items:center;background:var(--lblue);border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:8px}
.setrow.onrow{background:var(--lblue);border-left:3px solid var(--blue);font-weight:700}
.setgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.setgrid{grid-template-columns:1fr 1fr}}
.switch{width:46px;height:26px;border-radius:999px;background:#cbd5e1;position:relative;cursor:pointer;transition:.2s;flex:none}
.switch.on{background:var(--blue)}
.switch.grn.on{background:var(--green)}
.switch::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch.on::after{left:23px}
.switch .lbl{position:absolute;font-size:8px;font-weight:800;color:#fff;top:8px}
.table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
.table th,.table td{border:1px solid var(--line);padding:6px 8px;text-align:left;background:#fff}
.table th{background:var(--lblue)}
#map{height:230px;border-radius:12px;z-index:0;border:1px solid var(--line)}

.schip{padding:8px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;font-size:13px;display:inline-block;margin:2px}
.schip.on{background:var(--blue);color:#fff;border-color:var(--blue)}


/* ===== FLUID RESPONSIVE LAYOUT (auto-resizes on any screen) ===== */
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;max-width:1200px;margin:0 auto;padding:0 10px;align-items:start}
.wrap.three{grid-template-columns:260px minmax(0,1fr) 300px}
@media(max-width:1100px){
  .wrap.three{grid-template-columns:220px minmax(0,1fr)}
  .wrap.three>.rail:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:900px){
  .wrap,.wrap.three{grid-template-columns:1fr}
  .wrap.three>.rail:last-child{grid-template-columns:1fr}
  .setlist{display:flex;overflow-x:auto;gap:6px;padding-bottom:6px}
  .setrow{flex:none;border:1px solid var(--line);border-radius:999px;padding:8px 12px}
  .setrow .chev{display:none}
  .setgrid{grid-template-columns:1fr !important}
}
#bellN{background:#fff;color:var(--red);border-radius:10px;padding:1px 6px;font-size:10px;font-weight:800;margin-left:3px;vertical-align:middle}



/* ===== LAYOUT PATCH 2: centering + bell badge + mobile rails ===== */
#bellN:empty{display:none}
div.wrap{max-width:1200px;margin:0 auto}
div.wrap>.app{width:100%;max-width:780px;margin:0 auto}
div.wrap.three>.app{max-width:none}
@media(max-width:900px){
  div.wrap>.rail{display:block}
  div.wrap{padding:0 10px}
}

/* ===== LAYOUT PATCH 3: bell badge + mobile overflow fix ===== */
.topbar .btn-red{position:relative}
#bellN{position:absolute;top:-8px;right:-8px;background:#fff;color:var(--red);border:2px solid var(--red);border-radius:14px;min-width:22px;height:22px;line-height:18px;font-size:11px;font-weight:800;padding:0 5px;margin:0}
#bellN:empty{display:none}
div.wrap>*{min-width:0}
@media(max-width:900px){
  div.wrap,div.wrap.three{grid-template-columns:minmax(0,1fr)}
}

/* ===== PATCH 4: desktop nav visible + vertical categories on mobile ===== */
@media(min-width:900px){
  .nav{display:block}
  .app{padding-bottom:90px}
}
@media(max-width:900px){
  .setlist{display:block;overflow:visible}
  .setrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px}
  .setrow .chev{display:inline-block}
}

/* ===== PATCH 5: SIDE nav on desktop, BOTTOM nav on mobile ===== */
@media(min-width:900px){
  body{padding-left:76px}
  .nav{top:0;bottom:0;left:0;right:auto;width:76px;border-top:none;border-right:1px solid var(--line);padding:14px 0}
  .nav-inner{flex-direction:column;justify-content:flex-start;gap:20px;max-width:none;margin:0}
  .nav-inner button{flex-direction:column;font-size:20px}
  .nav-inner .lbl{font-size:10px}
}

.pw-wrap{position:relative;display:block}
.pw-wrap .input{width:100%;padding-right:42px}
.eyeBtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px}

.chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.clickable{cursor:pointer}
.topbar .btn-red{position:relative !important}
#bellN{position:absolute !important;top:-6px !important;right:-6px !important;background:#fff !important;color:var(--red) !important;border:2px solid var(--red) !important;border-radius:12px !important;min-width:20px !important;height:20px !important;line-height:16px !important;font-size:11px !important;font-weight:800 !important;padding:0 4px !important;margin:0 !important}
#bellN:empty{display:none !important}


.logoImg{width:34px;height:34px;border-radius:50%;object-fit:contain;vertical-align:middle;background:#fff}
.logoWide{height:38px;width:auto;max-width:210px;object-fit:contain;vertical-align:middle}
.gTop img.logo{width:96px;height:96px;object-fit:contain;border-radius:0}
#splash .spLogo,.splash .spLogo{width:88px;height:88px;object-fit:contain;border-radius:50%}

/* ===== NEW LOADING SPLASH (logo + blinking mascot) ===== */
#splash .spLogo,.splash .spLogo{width:74px;height:88px;object-fit:cover;border-radius:8px}
#splash .spMascot,.splash .spMascot{width:120px;image-rendering:pixelated}
#splash b,.splash b{color:#fff;font-size:18px;letter-spacing:2px}
/* ===== GREEN DESIGN (login / register / about) ===== */
.gBody{margin:0;background:#eef2f7;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:'Segoe UI',system-ui,sans-serif}
.gPhone{width:100%;max-width:430px;min-height:100vh;display:flex;flex-direction:column;background:#f4f7fb}
@media(min-width:500px){.gPhone{min-height:760px;border-radius:30px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.28)}}
.gTop{background:linear-gradient(160deg,#17b978,#0d9e63);padding:44px 20px 46px;text-align:center;position:relative}
.gDots{position:absolute;top:16px;left:20px;letter-spacing:4px;color:#083c26;font-weight:900}
.gGlobe{position:absolute;top:12px;right:18px;font-size:20px}
.gTop img.logo{width:84px;height:100px;object-fit:cover;border-radius:6px}
.gTitle{color:#eafff3;font-weight:800;letter-spacing:3px;font-size:16px;margin-top:10px}
.gTag{color:#d8ffe9;font-size:12px;margin-top:4px}
.gMascotTop{width:120px;image-rendering:pixelated;margin-top:8px}
.gCard{flex:1;background:#f4f7fb;border-radius:26px 26px 0 0;margin-top:-22px;padding:28px 24px 40px;overflow:auto}
.gCard h2{color:#0d9e63;font-size:24px;margin:0 0 14px}
.gInput{width:100%;box-sizing:border-box;background:#d9f2e3;border:2px solid #bfe8d2;border-radius:999px;padding:12px 18px;margin:6px 0;font-size:14px;outline:none}
.gInput:focus{border-color:#0d9e63}
.pw-wrap .gInput{padding-right:42px}
.gBtn{display:block;width:100%;padding:13px;border-radius:999px;border:2px solid #0d9e63;background:#fff;color:#0d9e63;font-weight:800;letter-spacing:1px;cursor:pointer;margin:10px 0;font-size:13px}
.gBtn.solid{background:#5fd39a;border-color:#5fd39a;color:#063b23}
.gLink{display:block;text-align:center;color:#0d9e63;font-size:12px;margin:8px 0;cursor:pointer;text-decoration:underline}
.gMascot{display:block;width:140px;margin:18px auto 0;image-rendering:pixelated}

.devIcon{width:48px;height:48px;background:#eef2f7;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.actIcon{width:48px;height:48px;background:#eef2f7;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}

/* mascot sticker look (white bg becomes intentional) */
.gMascotTop,.gMascot,.spMascot{background:#fff;border-radius:16px;padding:8px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
/* splash = new green brand gradient */
#splash,.splash{background:linear-gradient(160deg,#17b978,#0d9e63)!important}

/* ============ PREMIUM THEME (brand-green, glassy, soft) ============ */
body{background:linear-gradient(160deg,#eefaf3 0%,#eef2f7 45%,#eaf3fb 100%);min-height:100vh}
.card{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:18px;box-shadow:0 2px 12px rgba(15,23,42,.05)}
.topbar{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(15,23,42,.05);border-radius:16px;box-shadow:0 2px 12px rgba(15,23,42,.06)}
.input{border-radius:12px;border:1.5px solid var(--line);background:#fbfcfe}
.input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(23,185,120,.14);outline:none}
.btn{border-radius:12px;font-weight:600;transition:transform .12s,box-shadow .12s}
.btn:active{transform:scale(.97)}
.btn-blue{box-shadow:0 2px 8px rgba(37,99,235,.25)}
.btn-green{box-shadow:0 2px 8px rgba(22,163,74,.25)}
.btn-red{box-shadow:0 2px 8px rgba(220,38,38,.25)}
.nav{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.page-title{color:var(--green)}
.name{color:#0f172a}
.schip.on{box-shadow:0 2px 8px rgba(37,99,235,.25)}
.set-me{background:linear-gradient(160deg,#f0fdf6,#eef2f7);border-radius:14px}
.about-hero,.gTop{box-shadow:0 6px 20px rgba(13,158,99,.25)}

/* ===== PREMIUM THEME v2 (visible brand refresh) ===== */
:root{--green:#16a34a;--green2:#0d9e63}
body{background:linear-gradient(150deg,#cdeeda 0%,#e6f0fa 55%,#d9e8f6 100%)!important;background-attachment:fixed!important}
.topbar{background:linear-gradient(90deg,#0d9e63,#17b978)!important;border:none!important;border-radius:14px!important;box-shadow:0 4px 16px rgba(13,158,99,.35)!important}
.topbar b{color:#fff!important}
.topbar .input{background:rgba(255,255,255,.96)!important}
.page-title{color:#0d9e63!important}
.nav{background:#fff!important;box-shadow:0 -2px 12px rgba(15,23,42,.08)!important}
.nav button.on{color:#0d9e63!important}
.card{border-radius:18px!important;box-shadow:0 3px 14px rgba(15,23,42,.07)!important;border:1px solid rgba(15,23,42,.06)!important}
.set-me{background:linear-gradient(160deg,#eafcf2,#eef2f7)!important}

/* ===== AURORA BACKGROUND (visible but clean) ===== */
body{background:
  radial-gradient(700px 450px at 90% 8%, rgba(23,185,120,.20), transparent 60%),
  radial-gradient(600px 400px at 5% 95%, rgba(37,99,235,.16), transparent 60%),
  linear-gradient(150deg,#cfead9 0%,#e3edf9 55%,#d5e7f8 100%)!important;background-attachment:fixed!important}
/* ===== MASCOT BUDDY ===== */
#mascotBuddy{position:fixed;right:14px;bottom:14px;z-index:60;cursor:pointer;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));transition:transform .15s}
#mascotBuddy:hover{transform:scale(1.07)}
#mascotBuddy img{width:76px;image-rendering:pixelated;background:#fff;border-radius:16px;padding:6px}
@media(max-width:900px){#mascotBuddy{bottom:78px;right:10px}#mascotBuddy img{width:60px}}

/* ===== TRANSPARENT MASCOT EVERYWHERE (removes the white sticker box) ===== */
.gMascotTop,.gMascot,.spMascot{background:transparent!important;padding:0!important;box-shadow:none!important;border-radius:0!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}


/* ===== FACEBOOK-STYLE WHITE HEADER + TOP NAV ===== */
.topbar{background:#fff!important;border:1px solid rgba(15,23,42,.08)!important;box-shadow:0 1px 8px rgba(15,23,42,.06)!important;border-radius:14px;flex-wrap:wrap;gap:6px;padding:8px 10px}
.topbar>*:first-child{order:1}
.topbar b{order:1;color:#0f172a!important}
.topbar .input{order:2;flex:0 1 240px}
.tb-center{order:3;flex:1;display:flex;justify-content:center;gap:4px}
.topbar>.btn{order:4}
.tb-center button{background:transparent;border:none;cursor:pointer;font-size:20px;line-height:1;width:92px;height:48px;border-radius:10px;color:#64748b;position:relative;display:flex;align-items:center;justify-content:center}
.tb-center button:hover{background:#eef2f7}
.tb-center button.on{color:var(--blue);background:#e7f0fe}
.tb-center .lbl{display:none}
.tb-av{width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important;overflow:hidden;flex:none}
.logoWide{height:40px;width:auto;max-width:220px;object-fit:contain;vertical-align:middle}
@media(max-width:900px){
  .tb-center{order:9;flex-basis:100%;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
  .tb-center button{flex:1;width:auto}
  .topbar .input{flex:1 1 120px}
}


/* ===== ADMIN DASHBOARD: stats bar, verification columns, status chips, document modal ===== */
.admin-wrap{width:100%;max-width:1100px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:760px){.adm-stats{grid-template-columns:repeat(2,1fr)}}
.adm-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;box-shadow:0 2px 10px rgba(15,23,42,.05)}
.adm-stat b{display:block;font-size:24px;color:#0f172a}
.adm-stat span{font-size:11px;color:var(--sub);font-weight:600}
.adm-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:900px){.adm-cols{grid-template-columns:1fr}}
.adm-col-title{font-size:15px;font-weight:800;color:#0f172a;margin:4px 0 8px}
.vercard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 10px rgba(15,23,42,.05)}
.vercard .vhead{display:flex;gap:10px;align-items:flex-start}
.vercard .vdocs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vercard .vdocs img{width:52px;height:38px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.vercard .vdocs img:hover{outline:2px solid var(--blue)}
.vercard .vactions{display:flex;gap:6px;flex-wrap:wrap}
.vercard .vactions .btn{flex:1;min-width:76px}
.stchip{display:inline-block;border-radius:999px;padding:4px 12px;font-size:11px;font-weight:800;flex:none}
.st-pending{background:#fef3c7;color:#b45309}
.st-viewed{background:#dbeafe;color:#1d4ed8}
.st-approved{background:#dcfce7;color:#15803d}
.st-rejected{background:#fee2e2;color:#b91c1c}
#docsModal .card{max-width:560px;max-height:82vh;overflow:auto}
#docsModal .docimg{width:100%;border-radius:12px;margin:6px 0;border:1px solid var(--line)}

/* ===== Animated search bar (adapted from Uiverse.io by Lakshay-art, recolored to brand) ===== */
#poda{position:relative;display:flex;align-items:center;justify-content:center;margin:6px auto 12px;width:100%;max-width:430px}
#poda .glow,#poda .darkBorderBg,#poda .white,#poda .border{position:absolute;inset:0;overflow:hidden;border-radius:14px;pointer-events:none}
#poda .glow,.darkBorderBg,.white,.border{z-index:0}
#poda .glow{filter:blur(24px);opacity:.35;inset:-8px}
#poda .glow::before,#poda .darkBorderBg::before,#poda .white::before,#poda .border::before{content:"";position:absolute;top:50%;left:50%;width:600px;height:600px;background-repeat:no-repeat;background-position:0 0;transform:translate(-50%,-50%) rotate(80deg);transition:transform 2s}
#poda .glow::before{background-image:conic-gradient(rgba(0,0,0,0),#0d9e63 5%,rgba(0,0,0,0) 38%,rgba(0,0,0,0) 50%,#2563EB 60%,rgba(0,0,0,0) 87%);filter:blur(10px)}
#poda .darkBorderBg::before{background-image:conic-gradient(rgba(0,0,0,0),#0d9e63 8%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 50%,#2563EB 60%,rgba(0,0,0,0) 70%)}
#poda .white::before{background-image:conic-gradient(rgba(0,0,0,0) 0%,#7dd8ae,rgba(0,0,0,0) 8%,rgba(0,0,0,0) 50%,#8ab6ff,rgba(0,0,0,0) 58%);filter:brightness(1.2)}
#poda .border::before{background-image:conic-gradient(#f8fafc,#0d9e63 5%,#f8fafc 14%,#f8fafc 50%,#2563EB 60%,#f8fafc 64%)}
#poda .darkBorderBg{inset:1px}
#poda .white{inset:3px;background:#fff;filter:blur(1px)}
#poda .border{inset:5px;background:#fff;filter:blur(.5px)}
#poda:hover .glow::before{transform:translate(-50%,-50%) rotate(-120deg)}
#poda:hover .darkBorderBg::before{transform:translate(-50%,-50%) rotate(-98deg)}
#poda:hover .white::before{transform:translate(-50%,-50%) rotate(-97deg)}
#poda:hover .border::before{transform:translate(-50%,-50%) rotate(-110deg)}
#poda:focus-within .glow::before{transform:translate(-50%,-50%) rotate(420deg);transition:transform 4s}
#poda:focus-within .darkBorderBg::before{transform:translate(-50%,-50%) rotate(442deg);transition:transform 4s}
#poda:focus-within .white::before{transform:translate(-50%,-50%) rotate(443deg);transition:transform 4s}
#poda:focus-within .border::before{transform:translate(-50%,-50%) rotate(430deg);transition:transform 4s}
#main{position:relative;width:100%;z-index:1}
.ucInput{width:100%;height:54px;border:none;border-radius:12px;background:#fff;color:var(--ink);padding:0 56px 0 52px;font-size:15px;position:relative;z-index:1}
.ucInput::placeholder{color:var(--sub)}
.ucInput:focus{outline:none}
#main:focus-within>#input-mask{display:none}
#input-mask{pointer-events:none;width:90px;height:20px;position:absolute;background:linear-gradient(90deg,transparent,#fff);top:17px;left:64px;z-index:2}
#green-mask{pointer-events:none;width:30px;height:20px;position:absolute;background:#16a34a;top:10px;left:5px;filter:blur(18px);opacity:.5;transition:all 2s;z-index:0}
#main:hover>#green-mask{opacity:0}
#search-icon{position:absolute;left:16px;top:15px;z-index:2}
#filter-icon{position:absolute;top:7px;right:7px;z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg,#eafcf2,#fff,#e7f0fe);border:1px solid var(--line);cursor:pointer}
.filterBorder{position:absolute;top:6px;right:6px;width:42px;height:42px;border-radius:10px;overflow:hidden;pointer-events:none;z-index:1}
.filterBorder::before{content:"";position:absolute;top:50%;left:50%;width:300px;height:300px;transform:translate(-50%,-50%) rotate(90deg);background-image:conic-gradient(rgba(0,0,0,0),#bfe8d2,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 50%,#bfdbfe,rgba(0,0,0,0) 100%);animation:ucRotate 4s linear infinite}
@keyframes ucRotate{100%{transform:translate(-50%,-50%) rotate(450deg)}}

/* ===== Animated delete button (adapted from Uiverse.io by vinodjangid07) ===== */
.uDel{width:44px;height:44px;border-radius:50%;background:#141414;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition-duration:.3s;overflow:hidden;position:relative;flex:none}
.uDel .uDelIcon{width:12px;transition-duration:.3s}
.uDel .uDelIcon path{fill:#fff}
.uDel:hover{width:120px;border-radius:50px;background:var(--red)}
.uDel:hover .uDelIcon{width:20px;transform:translateY(60%)}
.uDel::before{position:absolute;top:-20px;content:"Delete";color:#fff;transition-duration:.3s;font-size:2px}
.uDel:hover::before{font-size:12px;opacity:1;transform:translateY(30px);transition-duration:.3s}
/* ===== Animated logout button (adapted from Uiverse.io by vinodjangid07) ===== */
.uLogout{display:flex;align-items:center;justify-content:flex-start;width:45px;height:45px;border:none;border-radius:50%;cursor:pointer;position:relative;overflow:hidden;transition-duration:.3s;box-shadow:2px 2px 10px rgba(0,0,0,.2);background:var(--red);flex:none}
.uLogout .sign{width:100%;display:flex;align-items:center;justify-content:center;transition-duration:.3s}
.uLogout .sign svg{width:17px}
.uLogout .sign svg path{fill:#fff}
.uLogout .text{position:absolute;right:0;width:0;opacity:0;color:#fff;font-size:1.05em;font-weight:600;transition-duration:.3s}
.uLogout:hover{width:125px;border-radius:40px}
.uLogout:hover .sign{width:30%;padding-left:20px}
.uLogout:hover .text{opacity:1;width:70%;padding-right:10px}
.uLogout:active{transform:translate(2px,2px)}

/* =====================================================================
   LANDING PAGE — motion hero, Aceternity-style mascot, scroll reveals
   ===================================================================== */
body.land{display:block!important;background:#07110c!important;color:#eafaf3;padding:0!important;overflow-x:hidden}
.land *{box-sizing:border-box}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:80px 20px 40px}
.hero-grid{position:absolute;inset:0;background-image:
  linear-gradient(to right,rgba(13,158,99,.08) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(13,158,99,.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center,rgba(0,0,0,1) 0%,rgba(0,0,0,.4) 50%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,1) 0%,rgba(0,0,0,.4) 50%,transparent 80%);
  animation:gridDrift 40s linear infinite}
@keyframes gridDrift{from{background-position:0 0}to{background-position:48px 48px}}
.hero-glow{position:absolute;top:20%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(23,185,120,.35) 0%,rgba(13,158,99,.1) 40%,transparent 70%);
  filter:blur(40px);pointer-events:none;animation:glowPulse 6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}

.hero-inner{position:relative;z-index:2;max-width:1100px;width:100%;text-align:center}
.brand-top{display:inline-flex;align-items:center;gap:12px;padding:8px 18px;background:rgba(13,158,99,.1);border:1px solid rgba(23,185,120,.25);border-radius:999px;margin-bottom:40px;backdrop-filter:blur(10px)}
.brand-logo{width:36px;height:36px;border-radius:50%;background:#fff;padding:4px;object-fit:contain}
.brand-name{font-size:16px;font-weight:600;letter-spacing:1px;color:#eafaf3}
.brand-name b{color:#5fd39a}

.hero-stage{display:flex;flex-direction:column;align-items:center;gap:28px}

/* Aceternity-style mascot frame with scan-line + concentric rings */
.mascot-frame{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}
.mascot-img{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(23,185,120,.5));
  animation:mascotFloat 4s ease-in-out infinite;position:relative;z-index:2;image-rendering:pixelated}
@keyframes mascotFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.03)}}
.mascot-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mascot-rings span{position:absolute;border-radius:50%;border:2px solid rgba(23,185,120,.4);
  animation:ringPulse 3s ease-out infinite}
.mascot-rings span:nth-child(1){width:160px;height:160px;animation-delay:0s}
.mascot-rings span:nth-child(2){width:200px;height:200px;animation-delay:.6s}
.mascot-rings span:nth-child(3){width:240px;height:240px;animation-delay:1.2s}
@keyframes ringPulse{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.3)}}
.mascot-scan{position:absolute;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#5fd39a,transparent);
  box-shadow:0 0 12px #5fd39a;animation:scanLine 3s ease-in-out infinite;z-index:3}
@keyframes scanLine{0%{top:10%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:90%;opacity:0}}

/* Rotating skills */
.hero-h{font-size:clamp(32px,6vw,64px);font-weight:800;line-height:1.1;color:#fff;margin:0;letter-spacing:-.02em}
.hero-h .rotator{display:inline-block;height:1.2em;vertical-align:bottom;overflow:hidden;position:relative;padding:0 8px;
  background:linear-gradient(90deg,#5fd39a,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rotator-track{display:flex;flex-direction:column;animation:rotatorSlide 20s infinite}
.rotator-track span{height:1.2em;line-height:1.2em;font-style:italic}

.hero-sub{font-size:clamp(15px,2vw,19px);color:#9bb3a8;max-width:620px;line-height:1.6;margin:0 auto}

.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.lbtn{border:none;cursor:pointer;font-weight:700;font-size:15px;padding:14px 28px;border-radius:14px;transition:all .25s;letter-spacing:.3px}
.lbtn-primary{background:linear-gradient(135deg,#17b978,#0d9e63);color:#fff;box-shadow:0 10px 30px rgba(13,158,99,.35)}
.lbtn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(13,158,99,.5)}
.lbtn-ghost{background:transparent;color:#eafaf3;border:1.5px solid rgba(234,250,243,.25);backdrop-filter:blur(8px)}
.lbtn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(234,250,243,.5)}

.hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.hero-stats>div{text-align:center}
.hero-stats>div.v{width:1px;background:rgba(255,255,255,.1);align-self:stretch}
.hero-stats b{display:block;font-size:22px;font-weight:800;color:#5fd39a}
.hero-stats span{font-size:12px;color:#9bb3a8;letter-spacing:.5px;text-transform:uppercase}

.scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);color:#eafaf3;padding:8px 18px;border-radius:999px;font-size:12px;cursor:pointer;
  display:flex;align-items:center;gap:8px;backdrop-filter:blur(10px);animation:bounce 2.5s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* Sections */
.sec{padding:100px 20px;position:relative}
.sec-alt{background:linear-gradient(180deg,#07110c 0%,#0a1a12 100%)}
.sec-inner{max-width:1100px;margin:0 auto}
.sec-narrow{max-width:780px}
.sec-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#5fd39a;padding:6px 14px;background:rgba(23,185,120,.1);border:1px solid rgba(23,185,120,.2);border-radius:999px;margin-bottom:20px}
.sec-h{font-size:clamp(28px,5vw,48px);font-weight:800;line-height:1.1;color:#fff;margin:0 0 16px;letter-spacing:-.02em}
.sec-sub{font-size:clamp(15px,1.8vw,18px);color:#9bb3a8;line-height:1.6;max-width:640px;margin:0 0 48px}

/* Features */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feat{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:28px;
  transition:all .3s;position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#5fd39a,transparent);opacity:0;transition:opacity .3s}
.feat:hover{transform:translateY(-4px);border-color:rgba(23,185,120,.3);background:rgba(23,185,120,.05)}
.feat:hover::before{opacity:1}
.feat-ic{font-size:36px;margin-bottom:16px}
.feat h3{font-size:18px;font-weight:700;color:#fff;margin:0 0 8px}
.feat p{font-size:14px;color:#9bb3a8;line-height:1.6;margin:0}

/* Services grid */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.svc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px 16px;text-align:center;
  transition:all .25s;cursor:default}
.svc:hover{transform:translateY(-3px);background:rgba(23,185,120,.08);border-color:rgba(23,185,120,.3)}
.svc span{font-size:32px;display:block;margin-bottom:8px}
.svc b{font-size:13px;color:#eafaf3;font-weight:600}

/* Steps */
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:24px}.step-arrow{transform:rotate(90deg);justify-self:center}}
.step{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:32px 24px;position:relative}
.step-n{font-size:42px;font-weight:900;color:rgba(23,185,120,.25);line-height:1;margin-bottom:12px;letter-spacing:-.02em}
.step h3{font-size:18px;font-weight:700;color:#fff;margin:0 0 8px}
.step p{font-size:14px;color:#9bb3a8;line-height:1.6;margin:0}
.step-arrow{display:flex;align-items:center;color:rgba(23,185,120,.4)}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;transition:all .25s}
.faq[open]{border-color:rgba(23,185,120,.3);background:rgba(23,185,120,.05)}
.faq summary{padding:18px 24px;font-weight:600;color:#fff;cursor:pointer;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:#5fd39a;font-weight:300;transition:transform .25s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 24px 20px;color:#9bb3a8;font-size:14px;line-height:1.7}

/* Final CTA */
.final-cta{text-align:center;padding:60px 32px;margin-top:60px;
  background:linear-gradient(135deg,rgba(23,185,120,.1),rgba(59,130,246,.08));
  border:1px solid rgba(23,185,120,.2);border-radius:24px}
.final-cta h3{font-size:clamp(22px,4vw,30px);font-weight:800;color:#fff;margin:0 0 20px}

/* Footer */
.land-foot{padding:40px 20px;border-top:1px solid rgba(255,255,255,.05);background:#050a07}
.foot-inner{max-width:1100px;margin:0 auto;text-align:center}
.foot-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}
.foot-brand img{width:28px;height:28px;background:#fff;padding:3px;border-radius:50%;object-fit:contain}
.foot-brand span{color:#eafaf3;font-size:14px;font-weight:600;letter-spacing:.5px}
.foot-brand b{color:#5fd39a}
.foot-note{font-size:12px;color:#6b7f75;line-height:1.6}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* =====================================================================
   TELEGRAM-GREEN CHAT UI (Adapted for UCSkillLink)
   ===================================================================== */
body.tg-body { background: #07110c; color: #eafaf3; font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif; height: 100vh; overflow: hidden; margin: 0; padding: 0; display: flex; }
.tg-app { display: flex; width: 100%; height: 100vh; position: relative; }

/* Sidebar */
.tg-sidebar { width: 320px; min-width: 320px; background: #0a1a12; display: flex; flex-direction: column; border-right: 1px solid #050a07; z-index: 5; }
.tg-sidebar-header { display: flex; align-items: center; padding: 8px 12px; height: 56px; gap: 8px; }
.tg-menu-btn { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #9bb3a8; font-size: 20px; }
.tg-menu-btn:hover { background: rgba(255,255,255,0.05); }
.tg-search-box { flex: 1; position: relative; }
.tg-search-box input { width: 100%; padding: 8px 12px 8px 36px; background: #12261a; border: none; border-radius: 20px; color: #fff; font-size: 14px; outline: none; }
.tg-search-box input::placeholder { color: #5a7565; }
.tg-search-box .tg-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #5a7565; font-size: 14px; }
.tg-chat-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #12261a transparent; }
.tg-chat-item { display: flex; align-items: center; padding: 10px 12px; cursor: pointer; transition: background 0.15s; gap: 12px; }
.tg-chat-item:hover { background: #12261a; }
.tg-chat-item.active { background: #0d9e63; }
.tg-chat-avatar { width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #17b978, #0d7a4a); position: relative; }
.tg-online-dot { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; background: #4dcd5e; border-radius: 50%; border: 2px solid #0a1a12; }
.tg-chat-item.active .tg-online-dot { border-color: #0d9e63; }
.tg-chat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tg-chat-info-top { display: flex; justify-content: space-between; align-items: center; }
.tg-chat-name { font-size: 15px; font-weight: 600; color: #f5f5f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-chat-time { font-size: 12px; color: #5a7565; flex-shrink: 0; }
.tg-chat-item.active .tg-chat-time { color: #d1fae5; }
.tg-chat-info-bottom { display: flex; justify-content: space-between; align-items: center; }
.tg-chat-last-msg { font-size: 14px; color: #7a9685; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tg-chat-item.active .tg-chat-last-msg { color: #eafaf3; }
.tg-unread-badge { background: #17b978; color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; margin-left: 8px; }
.tg-chat-item.active .tg-unread-badge { background: #fff; color: #0d9e63; }

/* Main Chat Area */
.tg-chat-area { flex: 1; display: flex; flex-direction: column; background: #07110c; position: relative; }
.tg-chat-bg { position: absolute; inset: 0; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E"); pointer-events: none; }
.tg-chat-header { height: 56px; background: #0a1a12; display: flex; align-items: center; padding: 0 16px; gap: 12px; border-bottom: 1px solid #050a07; z-index: 2; cursor: pointer; }
.tg-back-btn { display: none; width: 40px; height: 40px; border: none; background: transparent; color: #5fd39a; font-size: 24px; cursor: pointer; border-radius: 50%; }
.tg-back-btn:hover { background: rgba(255,255,255,0.05); }
.tg-header-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #17b978, #0d7a4a); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #fff; }
.tg-header-info { flex: 1; }
.tg-header-name { font-size: 15px; font-weight: 600; color: #f5f5f5; }
.tg-header-status { font-size: 13px; color: #5fd39a; }
.tg-messages-area { flex: 1; overflow-y: auto; padding: 8px 0; z-index: 1; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: #12261a transparent; }
.tg-date-divider { text-align: center; padding: 8px 0; }
.tg-date-divider span { background: rgba(0,0,0,0.4); color: #9bb3a8; font-size: 13px; padding: 4px 12px; border-radius: 12px; backdrop-filter: blur(4px); }
.tg-message { max-width: 65%; padding: 8px 12px 6px; margin: 2px 12px; border-radius: 14px; position: relative; word-wrap: break-word; animation: tgMsgAppear 0.25s ease-out; }
@keyframes tgMsgAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tg-message.received { background: #12261a; align-self: flex-start; border-bottom-left-radius: 4px; }
.tg-message.sent { background: #0d9e63; align-self: flex-end; border-bottom-right-radius: 4px; }
.tg-message-text { font-size: 15px; line-height: 1.4; color: #f5f5f5; white-space: pre-wrap; }
.tg-message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; float: right; margin-left: 12px; position: relative; top: 6px; }
.tg-message-time { font-size: 11px; color: rgba(255,255,255,0.6); }
.tg-message.sent .tg-message-time { color: rgba(255,255,255,0.8); }
.tg-check-marks { color: #d1fae5; font-size: 14px; font-weight: bold; }
.tg-video-container { width: 280px; max-width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 4px; background: #000; }
.tg-video-container video { width: 100%; display: block; max-height: 340px; }
.tg-image-container { max-width: 280px; border-radius: 10px; overflow: hidden; margin-bottom: 4px; }
.tg-image-container img { width: 100%; display: block; max-height: 340px; object-fit: cover; }

/* Input Area */
.tg-input-area { padding: 8px; background: #0a1a12; display: flex; align-items: flex-end; gap: 6px; z-index: 2; border-top: 1px solid #050a07; }
.tg-input-btn { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #5fd39a; font-size: 22px; transition: all 0.2s; }
.tg-input-btn:hover { background: rgba(95,211,154,0.1); }
.tg-message-input-wrapper { flex: 1; background: #12261a; border-radius: 20px; display: flex; align-items: center; padding: 0 12px; min-height: 42px; }
.tg-message-input { flex: 1; background: transparent; border: none; color: #fff; font-size: 15px; padding: 10px 0; outline: none; resize: none; max-height: 120px; line-height: 1.4; font-family: inherit; }
.tg-message-input::placeholder { color: #5a7565; }
.tg-send-btn { width: 42px; height: 42px; border: none; background: #17b978; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; transition: all 0.2s; flex-shrink: 0; box-shadow: 0 4px 12px rgba(23,185,120,0.3); }
.tg-send-btn:hover { background: #5fd39a; transform: scale(1.05); }
.tg-send-btn:active { transform: scale(0.95); }
.tg-media-preview { padding: 8px 12px; background: #0a1a12; border-top: 1px solid #050a07; display: none; align-items: center; gap: 10px; z-index: 2; }
.tg-media-preview.show { display: flex; }
.tg-media-preview img, .tg-media-preview video { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 2px solid #17b978; }
.tg-media-preview .tg-cancel-media { background: #dc2626; color: #fff; border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; }

/* Profile Panel */
.tg-profile-panel { width: 0; overflow: hidden; background: #0a1a12; transition: width 0.3s ease; border-left: 1px solid #050a07; flex-shrink: 0; display: flex; flex-direction: column; }
.tg-profile-panel.open { width: 340px; }
.tg-profile-header { padding: 0 16px; display: flex; align-items: center; gap: 12px; height: 56px; border-bottom: 1px solid #050a07; }
.tg-profile-close { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; color: #5fd39a; font-size: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.tg-profile-close:hover { background: rgba(255,255,255,0.05); }
.tg-profile-content { padding: 24px; display: flex; flex-direction: column; align-items: center; overflow-y: auto; }
.tg-profile-avatar-large { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #17b978, #0d7a4a); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.tg-profile-name-large { font-size: 20px; font-weight: 600; margin-bottom: 4px; color: #fff; }
.tg-profile-status-text { font-size: 14px; color: #5fd39a; margin-bottom: 24px; }
.tg-profile-info-item { width: 100%; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tg-profile-info-label { font-size: 13px; color: #5fd39a; margin-bottom: 2px; }
.tg-profile-info-value { font-size: 15px; color: #eafaf3; }

/* Empty state */
.tg-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5a7565; text-align: center; padding: 20px; }
.tg-empty-state .tg-empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; }

/* Responsive Mobile */
@media (max-width: 768px) {
  .tg-sidebar { width: 100%; min-width: 100%; position: absolute; inset: 0; z-index: 10; }
  .tg-chat-area { position: absolute; inset: 0; z-index: 5; display: none; }
  .tg-chat-area.mobile-show { display: flex; z-index: 15; }
  .tg-back-btn { display: flex; }
  .tg-profile-panel.open { width: 100%; position: absolute; inset: 0; z-index: 20; }
  .tg-message { max-width: 85%; }
}


/* ===== UI KIT: like pill, comment cards, share button, nav pills ===== */
/* Like pill (adapted from Uiverse.io by Priyanshu02020) */
.actions{gap:8px;align-items:stretch;border-top:1px solid var(--line);padding-top:10px}
.like-button{display:flex;height:42px;min-width:132px;border-radius:14px;background:#1d1d1d;overflow:hidden;position:relative;box-shadow:inset -2px -2px 5px rgba(255,255,255,.12),inset 2px 2px 5px rgba(0,0,0,.25),2px 2px 8px rgba(0,0,0,.15)}
.like-button .like{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:none;cursor:pointer;padding:0 12px}
.like-icon{fill:#565656;height:20px;width:20px;transition:fill .2s}
.like-text{color:#fcfcfc;font-size:13px;font-weight:600}
.like-count{width:44px;display:flex;align-items:center;justify-content:center;color:#8a8a8a;font-size:13px;font-weight:700;border-left:2px solid #3a3a3a;transition:color .3s}
.like-button.liked{background:#2b1416}
.like-button.liked .like-icon{fill:#fc4e4e;animation:likePop .25s ease-out}
.like-button.liked .like-count{color:#fff}
@keyframes likePop{0%{transform:scale(.5)}100%{transform:scale(1.25)}}
.act-pill{height:42px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--sub);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.act-pill:hover{background:var(--lblue);color:var(--blue)}
/* Share button (adapted from Uiverse.io by vinodjangid07) */
.share-button{display:flex;align-items:center;justify-content:flex-start;height:42px;width:112px;position:relative;border:1px solid #7dd8ae;background:#0d9e63;overflow:hidden;cursor:pointer;color:#fff;transition:width .3s}
.share-button .button__text{flex:1;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.share-button .button__icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#0a7f4f;position:absolute;right:0;transition:all .3s}
.share-button .button__icon svg{width:16px;height:16px}
.share-button:hover{width:150px}
.share-button:hover .button__icon{width:100%}
.share-button .button__count{position:absolute;left:8px;top:3px;font-size:10px;font-weight:800;background:rgba(255,255,255,.25);border-radius:8px;padding:0 5px}
/* Comment cards (adapted from Uiverse.io by zanina-yassine) */
.cmt-title{font-weight:800;font-size:12px;letter-spacing:1px;color:#47484b;text-transform:uppercase;margin:4px 0 8px;position:relative;padding-bottom:6px}
.cmt-title::after{content:'';width:9ch;height:2px;position:absolute;bottom:0;left:0;background:#47484b;border-radius:2px}
.cmt-card{display:grid;grid-template-columns:34px 1fr;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 0;box-shadow:0 6px 18px rgba(15,23,42,.05)}
.cmt-react{display:grid;grid-template-columns:auto;background:#f1f1f1;border-radius:8px;height:fit-content}
.cmt-react button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;position:relative;cursor:pointer}
.cmt-react button:after{content:'';width:38px;height:38px;position:absolute;left:-2px;top:-2px;background:#f5356e;border-radius:50%;z-index:0;transform:scale(0)}
.cmt-react button:hover:after{animation:cmtRipple .6s ease-in-out forwards}
.cmt-react button svg{position:relative;z-index:1}
.cmt-react hr{width:80%;height:1px;background:#dfe1e6;margin:auto;border:0}
.cmt-react span{height:30px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#707277}
@keyframes cmtRipple{0%{transform:scale(0);opacity:.6}100%{transform:scale(1);opacity:0}}
.cmt-user{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center}
.cmt-pic{width:36px;height:36px;border-radius:50%;background:var(--lblue);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;overflow:hidden}
.cmt-pic img{width:100%;height:100%;object-fit:cover}
.cmt-info span{font-weight:700;font-size:12px;color:#47484b}
.cmt-info p{font-size:10px;color:#acaeb4;font-weight:600;margin:0}
.cmt-content{font-size:13px;line-height:1.5;font-weight:500;color:#5f6064;margin:8px 0 4px}
.cmt-textbox{background:#f1f1f1;border-radius:12px;padding:8px;margin-top:8px}
.cmt-boxcontainer{background:#fff;border-radius:8px 8px 18px 18px;padding:8px}
.cmt-boxcontainer textarea{width:100%;height:38px;resize:none;border:0;border-radius:6px;padding:10px 12px;font-size:13px;outline:none;caret-color:var(--green);font-family:inherit;background:#fbfcfe}
.cmt-formatting{display:flex;justify-content:flex-end}
.cmt-send{width:32px;height:32px;background:var(--green);border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.cmt-send:hover{background:#0d9e63}
/* Nav pills (adapted from Uiverse.io by emmanuelh-dev) */
.tb-center{gap:10px}
.tb-center button{width:auto;height:44px;padding:0 20px;border-radius:999px;background:#eef2f7;color:#475569;font-size:18px;box-shadow:0 1px 2px rgba(15,23,42,.1),inset 0 -2px 0 rgba(15,23,42,.05);transition:all .15s}
.tb-center button:hover{background:#e2e8f0;box-shadow:inset 0 2px 5px rgba(15,23,42,.15)}
.tb-center button.on{background:var(--green);color:#fff;box-shadow:inset 0 2px 5px rgba(0,0,0,.25)}
@media(max-width:900px){.tb-center button{flex:1;padding:0 8px}}

/* ===== Pill action buttons: Comment & Share (adapted from Uiverse.io by vinodjangid07) ===== */
.pillBtn{width:132px;height:40px;border-radius:40px;border:none;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition-duration:.3s;overflow:hidden;box-shadow:0 4px 12px rgba(15,23,42,.08);flex:none}
.pillBtn .IconContainer{width:30px;height:30px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2;transition-duration:.3s;flex:none}
.pillBtn .IconContainer svg{width:15px;height:15px;fill:#fff}
.pillBtn .text{height:100%;width:92px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;z-index:1;transition-duration:.3s;font-size:13px;font-weight:600;margin:0}
.pillBtn:hover .IconContainer{width:120px;border-radius:40px}
.pillBtn:hover .text{transform:translate(10px);width:0;font-size:0}
.pillBtn:active{transform:scale(.95)}

.land-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;z-index:6}
.land-nav .brand-top{margin:0}
.land-nav-links{display:flex;gap:10px}
.svc-grid .svc:nth-child(n+9){display:none}
.svc-grid.open .svc:nth-child(n+9){display:block}
#svcMore{margin:20px auto 0;display:block;width:auto;padding:12px 26px}
@media(max-width:640px){
  .land-nav{padding:14px 16px}
  .land-nav .brand-logo{width:28px;height:28px}
  .land-nav-links .lbtn{padding:10px 16px;font-size:13px}
  .hero{padding:110px 16px 60px}
  .hero-stats{gap:18px}
  .sec{padding:70px 16px}
}

/* ===== Media lightbox viewer (toolbar never covered, pan when zoomed) ===== */
.sl-viewer{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;flex-direction:column;padding:0}
.sl-viewer-top{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;padding:10px 8px;background:rgba(0,0,0,.65);position:relative;z-index:5;flex:none}
.sl-viewer-top .btn{min-width:44px;min-height:40px}
.sl-zoomlbl{color:#fff;font-size:12px;font-weight:800;min-width:46px;text-align:center}
.sl-viewer-stage{flex:1 1 0;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;padding:10px}
.sl-viewer-stage img{width:auto;max-width:100%;height:auto;border-radius:8px;display:block;margin:auto;cursor:zoom-in}
.sl-viewer-stage video{max-width:100%;max-height:100%;margin:auto;display:block}
/* ===== GREEN like pill (replaces black) ===== */
.like-button{background:linear-gradient(135deg,#17b978,#0d9e63)!important;box-shadow:0 4px 12px rgba(13,158,99,.35)!important}
.like-button .like-text{color:#fff}
.like-icon{fill:rgba(255,255,255,.75)}
.like-count{color:rgba(255,255,255,.85);border-left:2px solid rgba(255,255,255,.35)}
.like-button.liked{background:linear-gradient(135deg,#0d9e63,#0a7f4f)!important}
.like-button.liked .like-icon{fill:#fff;animation:likePop .25s ease-out}
.like-button.liked .like-count{color:#fff}
/* ===== Composer studio card (green Uiverse-style) ===== */
.post-card{background:linear-gradient(160deg,#0d3b2a,#0a2e21);border:1px solid rgba(95,211,154,.25);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(7,17,12,.35)}
.post-card textarea{resize:none;width:100%;min-height:84px;padding:8px;font-size:15px;background:transparent;border:none;color:#eafaf3;outline:none;font-family:inherit}
.post-card textarea::placeholder{color:#7fa896}
.pc-hr{border:none;border-top:1px solid rgba(255,255,255,.14);width:100%;border-radius:10em;margin:2px 0}
.button-row{display:flex;gap:8px;flex-wrap:wrap}
.pc-btn{border-radius:12px;border:none;min-width:86px;height:46px;color:#fff;font-weight:700;font-size:12.5px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.3);transition:all .25s}
.pc-btn:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,.35)}
.pc-btn.on{outline:2px solid #fff;outline-offset:2px}
.pc-btn.upload{background:linear-gradient(180deg,#17b978,#0d9e63)}
.pc-btn.hiring{background:linear-gradient(180deg,#0095b7,#0d63b7)}
.pc-btn.emergency{background:linear-gradient(180deg,#ff5a5f,#b71c1c)}
.pc-btn.audience{background:linear-gradient(180deg,#8b5cf6,#4c1d95)}
.pc-post{width:100%;padding:12px;margin-top:4px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#fff;background-size:200% 100%;background-image:linear-gradient(145deg,#17b978,#0d9e63,#5fd39a);transition:.3s ease-out;cursor:pointer}
.pc-post:hover{background-position:99%}
.post-card .chip{background:rgba(255,255,255,.12);color:#eafaf3}
.post-card .chip.on{background:#17b978;color:#fff}
.post-card .input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#eafaf3}
.post-card .meta{color:#9bb3a8}

/* Rotating skill word: always its own centered line (fixes mobile ghost text) */
.hero-h .rotator{display:block;height:1.2em;margin:6px auto 4px;max-width:100%}

/* Action row: equal-stretch pills that wrap on small screens */
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;border-top:1px solid var(--line);padding-top:10px}
.like-button{flex:1 1 130px;min-width:130px;height:42px}
.pillBtn{width:auto;flex:1 1 130px;min-width:130px;height:42px}
.pillBtn .text{width:auto;flex:1;font-size:12.5px;white-space:nowrap}
.pillBtn .IconContainer{flex:none}
.act-pill{flex:0 0 auto;height:42px}
@media(max-width:420px){
  .like-button{flex:1 1 46%}
  .pillBtn{flex:1 1 46%}
  .pillBtn .text{font-size:11.5px}
}

/* ===== GUIDED ID SCANNER (card frame + laser line) ===== */
.scan-frame{position:absolute;inset:0;margin:auto;width:86%;aspect-ratio:85.6/54;border:3px solid #5fd39a;border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.55);pointer-events:none}
.scan-line{position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#5fd39a,transparent);box-shadow:0 0 10px #5fd39a;animation:scanMove 2.2s ease-in-out infinite;pointer-events:none}
@keyframes scanMove{0%,100%{top:22%}50%{top:78%}}
#scanVideo{width:100%;border-radius:12px;display:block}

/* Rotating skill word: JS text-swap (no clip ghosts on any browser) */
.rotator-word{display:inline-block;min-width:10ch;text-align:center;font-style:italic;background:linear-gradient(90deg,#5fd39a,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:opacity .25s ease,transform .25s ease}
.rotator-word.swap{opacity:0;transform:translateY(10px)}

/* ===== Action row: responsive grid (4 columns desktop, 2x2 mobile) ===== */
.actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch;border-top:1px solid var(--line);padding-top:10px}
.actions>*{width:100%;min-width:0}
.like-button{min-width:0;height:44px}
.like-button .like{padding:0 8px;gap:6px}
.like-text{font-size:12.5px}
.like-count{width:38px;font-size:12.5px}
.pillBtn{width:100%;min-width:0;height:44px}
.pillBtn .text{width:auto;flex:1;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pillBtn .IconContainer{flex:none}
.act-pill{width:100%;height:44px;display:flex;align-items:center;justify-content:center}
@media(max-width:620px){
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .like-button,.pillBtn,.act-pill{height:42px}
  .like-text,.pillBtn .text{font-size:12px}
}
@media(max-width:360px){
  .like-text{display:none}
  .like-button .like{justify-content:center}
}


/* ===== Hover profile preview (adapted from Uiverse.io by Smit-Prajapati) ===== */
.peek-wrap{position:fixed;z-index:9998;width:280px;animation:peekIn .25s ease}
@keyframes peekIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.peek-card{background:#fff;border-radius:20px;padding:3px;box-shadow:0 20px 40px rgba(15,23,42,.28);overflow:hidden}
.peek-cover{height:64px;border-radius:17px 17px 0 0;background:linear-gradient(135deg,#17b978,#0d9e63 60%,#0a7f4f)}
.peek-head{display:flex;gap:10px;align-items:center;margin:-30px 10px 0;position:relative}
.peek-head>*:first-child{border:3px solid #fff!important;border-radius:50%!important;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.peek-bio{font-size:12px;color:var(--sub);margin:8px 12px 4px;line-height:1.4}
.peek-stats{display:flex;justify-content:space-between;margin:8px 12px 0;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.peek-stats div{text-align:center;flex:1}
.peek-stats b{display:block;font-size:14px;color:#0f172a}
.peek-stats span{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px}

/* ===== Profile header card (adapted from Uiverse.io by narmesh_sah, brand green) ===== */
.profile-card{position:relative;width:100%;max-width:560px;margin:0 auto 12px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:0 1.4rem 1.2rem;box-shadow:0 12px 32px rgba(15,23,42,.12);overflow:hidden;text-align:center}
.pc-cover{height:86px;margin:0 -1.4rem;background:linear-gradient(135deg,#17b978,#0d9e63 60%,#0a7f4f)}
.pc-avatar{width:96px;height:96px;margin:-48px auto 10px;position:relative}
.pc-avatar>span,.pc-avatar>img{border:4px solid #fff!important;box-shadow:0 6px 16px rgba(0,0,0,.25)!important}
.pc-name{font-size:1.35rem;font-weight:800;color:#0f172a}
.pc-title{font-size:.85rem;color:var(--green);font-weight:700;margin:2px 0 6px}
.pc-bio{font-size:.85rem;color:var(--sub);line-height:1.45;margin:0 auto 12px;max-width:420px}
.pc-stats{display:flex;justify-content:space-between;gap:6px;margin:0 0 12px;padding:10px 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pc-stat{flex:1;text-align:center}
.pc-val{font-weight:800;color:#0f172a;font-size:15px}
.pc-lbl{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px}
.pc-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pc-actions .btn{flex:1 1 auto;min-width:110px;width:auto}
.pc-meta{margin-top:10px;font-size:11px;color:var(--sub)}
@media(max-width:480px){.pc-stats{flex-wrap:wrap}.pc-stat{flex:1 1 40%}.pc-actions .btn{min-width:90px}}

/* ===== Rail suggestion cards + community stats grid ===== */
.sugg-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;margin-top:8px;box-shadow:0 4px 12px rgba(15,23,42,.06);transition:transform .15s ease,box-shadow .15s ease}
.sugg-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.12)}
.sugg-top{display:flex;gap:10px;align-items:center;cursor:pointer}
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.comm-cell{background:linear-gradient(160deg,#f0fdf6,#eef2f7);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.comm-cell b{display:block;font-size:18px;color:var(--green)}
.comm-cell span{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px}

/* ===== Mobile-safe chat heights (input bar always visible) ===== */
body.tg-body{height:100vh;height:100dvh;height:var(--tgvh,100dvh);overflow:hidden}
.tg-app{height:100vh;height:100dvh;height:var(--tgvh,100dvh);position:relative}
.tg-chat-area{min-height:0}
.tg-messages-area{flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tg-input-area{flex:none;position:relative;z-index:4;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.tg-media-preview{flex:none;z-index:4}
@media(max-width:768px){
  .tg-sidebar{position:fixed;inset:0;z-index:10;height:auto}
  .tg-chat-area{position:fixed!important;inset:0;z-index:15}
  .tg-chat-area.mobile-show{display:flex}
  .tg-profile-panel.open{position:fixed;inset:0;width:100%;z-index:20}
  .tg-message{max-width:85%}
}

/* ===== BOOKING CARD SYSTEM (jobs / mybooking / mybookings) ===== */
.bk-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:20px;padding:16px;margin:12px 0;box-shadow:0 8px 24px rgba(15,23,42,.08);overflow:hidden;position:relative;animation:bkIn .45s ease both}
@keyframes bkIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bk-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#17b978,#0d9e63,#5fd39a)}
.bk-card.emg::before{background:linear-gradient(90deg,#ff5a5f,#dc2626,#ff5a5f)}
.bk-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.bk-id{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:15px;color:#0f172a;background:#f1f5f9;border:1px solid var(--line);border-radius:10px;padding:4px 10px}
.bk-status{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.bk-status.sent{background:#e0e7ff;color:#3730a3}
.bk-status.accepted{background:#dbeafe;color:#1d4ed8}
.bk-status.inprogress{background:#fef3c7;color:#b45309}
.bk-status.completed{background:#dcfce7;color:#15803d}
.bk-status.confirmed{background:#d1fae5;color:#065f46}
.bk-status.cancelled,.bk-status.disputed{background:#fee2e2;color:#b91c1c}
.bk-emg{background:#fee2e2;color:#b91c1c;font-size:11px;font-weight:800;border-radius:999px;padding:5px 10px;animation:emgPulse 1.6s infinite}
@keyframes emgPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}
/* Stepper */
.bk-steps{display:flex;align-items:flex-start;margin:6px 0 16px;position:relative}
.bk-step{flex:1;text-align:center;position:relative}
.bk-step .dot{width:34px;height:34px;margin:0 auto;border-radius:50%;background:#e5e7eb;color:#9ca3af;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;position:relative;z-index:2;transition:all .3s}
.bk-step .lbl{font-size:10px;color:var(--sub);margin-top:6px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.bk-step:not(:first-child)::before{content:"";position:absolute;top:17px;right:50%;width:100%;height:3px;background:#e5e7eb;z-index:1}
.bk-step.on .dot{background:linear-gradient(135deg,#17b978,#0d9e63);color:#fff;box-shadow:0 4px 12px rgba(13,158,99,.35)}
.bk-step.on:not(:first-child)::before{background:linear-gradient(90deg,#0d9e63,#17b978)}
.bk-step.now .dot{background:#fff;color:#0d9e63;border:3px solid #0d9e63;animation:stepPulse 1.8s infinite}
@keyframes stepPulse{0%,100%{box-shadow:0 0 0 0 rgba(13,158,99,.35)}50%{box-shadow:0 0 0 10px rgba(13,158,99,0)}}
/* Info tiles */
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:6px}
.bk-tile{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.bk-tile .k{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.6px;font-weight:800}
.bk-tile .v{font-size:13px;color:#0f172a;font-weight:700;margin-top:2px;word-break:break-word}
.bk-tile.price .v{color:#0d9e63;font-size:16px}
/* Action row — wraps on mobile, fixed heights (kills the tall-column bug) */
.bk-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-top:12px}
.bk-actions .btn{flex:1 1 150px;height:46px;width:auto;font-size:14px}
/* Panels */
.bk-panel{border-radius:16px;padding:16px;margin-top:12px;text-align:center;animation:bkIn .4s ease both}
.bk-panel.green{background:linear-gradient(160deg,#f0fdf6,#dcfce7);border:1px solid #bbf7d0}
.bk-panel.blue{background:linear-gradient(160deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe}
.bk-panel.red{background:linear-gradient(160deg,#fef2f2,#fee2e2);border:1px solid #fecaca}
.bk-panel.amber{background:linear-gradient(160deg,#fffbeb,#fef3c7);border:1px solid #fde68a}
.bk-panel h4{margin:0 0 6px;font-size:15px;color:#0f172a}
.bk-panel p{margin:0;font-size:12px;color:var(--sub)}
.bk-panel .btn{margin-top:10px}
/* QR scanner-corner frame */
.qr-frame{position:relative;width:210px;margin:14px auto;padding:12px;background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(15,23,42,.12)}
.qr-frame::before,.qr-frame::after,.qr-frame .c3,.qr-frame .c4{content:"";position:absolute;width:22px;height:22px;border:3px solid #0d9e63}
.qr-frame::before{top:-6px;left:-6px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.qr-frame::after{top:-6px;right:-6px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}
.qr-frame .c3{bottom:-6px;left:-6px;border-right:none;border-top:none;border-radius:0 0 0 8px}
.qr-frame .c4{bottom:-6px;right:-6px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.qr-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:#0d9e63;background:#f0fdf6;border:1px dashed #86efac;border-radius:10px;padding:6px 10px;margin-top:10px;display:inline-block}
/* Stroke-drawn success check */
.bk-check{width:64px;height:64px;margin:0 auto 8px;display:block}
.bk-check circle{fill:#16a34a;animation:popIn .4s ease both;transform-origin:center}
.bk-check path{stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:drawCheck .6s .3s ease forwards}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
/* Countdown chip */
.cd-chip{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:18px;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:6px 14px;display:inline-block;margin:6px 0}
.cd-chip.go{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}
/* List rows (mybookings) */
.bk-row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:12px;margin:10px 0;cursor:pointer;transition:transform .15s,box-shadow .15s;animation:bkIn .4s ease both;position:relative;overflow:hidden}
.bk-row:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.1)}
.bk-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#17b978,#0d9e63)}
.bk-row.emg::before{background:linear-gradient(#ff5a5f,#dc2626)}
.bk-row .ico{width:46px;height:46px;flex:none;border-radius:14px;background:linear-gradient(135deg,#eafcf2,#d1fae5);display:flex;align-items:center;justify-content:center;font-size:22px}
.bk-row .mid{flex:1;min-width:0}
.bk-row .t1{font-weight:800;font-size:14px;color:#0f172a;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bk-row .t2{font-size:12px;color:var(--sub);margin-top:2px}
.bk-row .chev{color:#94a3b8;font-size:18px;flex:none}
/* Review stars with pop */
.stars button{border:none;background:none;font-size:34px;color:#d1d5db;cursor:pointer;transition:transform .15s,color .15s}
.stars button.on{color:#f59e0b;transform:scale(1.15)}
.stars button:hover{transform:scale(1.25)}


/* ===== Animated Post Cards ===== */
.post-card-anim{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:14px;margin:12px 0;box-shadow:0 4px 12px rgba(15,23,42,.06);transition:transform .15s ease,box-shadow .15s ease;animation:postIn .4s ease both}
.post-card-anim:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.12)}
@keyframes postIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.post-stats{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--sub)}

/* ===== Hiring Post Cards ===== */
.hire-card{background:linear-gradient(160deg,#f0fdf6,#fef3c7);border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 0}
.hire-top{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.hire-apps{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.app-row{display:flex;align-items:center;gap:8px;margin:6px 0;padding:8px;background:#fff;border-radius:10px;border:1px solid var(--line)}
.app-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.app-info>*:first-child{flex:none}
.app-info span{flex:1;min-width:0}
.hired-chip{display:inline-flex;align-items:center;gap:6px;background:#dcfce7;border:1px solid #bbf7d0;border-radius:999px;padding:3px 10px 3px 3px;font-size:11px;font-weight:700;color:#15803d}
.hired-chip>*:first-child{width:20px;height:20px}

/* ===== Mini Post (shared) ===== */
.mini-post{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0}


/* ===== CINEMATIC INTRO ===== */
#cinema{position:fixed;inset:0;z-index:10000;background:radial-gradient(circle at 50% 60%,#0b1a2a,#050a07 70%);overflow:hidden;transition:background 1.2s ease,opacity .9s ease}
#cinema[data-scene="2"]{background:radial-gradient(circle at 50% 60%,#101c2e,#050a07 70%)}
#cinema[data-scene="3"]{background:radial-gradient(circle at 50% 55%,#0a2e21,#050a07 70%)}
#cinema[data-scene="4"]{background:radial-gradient(circle at 50% 55%,#0d3b2a,#050a07 70%)}
#cinema[data-scene="5"]{background:radial-gradient(circle at 50% 45%,#123f2c,#07110c 75%)}
#cinema.out{opacity:0;pointer-events:none}
.cin-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center;opacity:0;transition:opacity .8s ease}
.cin-scene.on{opacity:1}
.cin-cap{font-size:clamp(17px,3vw,28px);color:#eafaf3;font-weight:600;letter-spacing:.3px;opacity:0;transform:translateY(16px);transition:all .8s ease .35s}
.cin-scene.on .cin-cap{opacity:1;transform:none}
#cinSkip{position:absolute;top:18px;right:18px;z-index:5;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#eafaf3;border-radius:999px;padding:10px 18px;font-size:13px;cursor:pointer;backdrop-filter:blur(8px)}
#cinSkip:hover{background:rgba(255,255,255,.16)}
.cin-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:5}
.cin-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#17b978,#5fd39a)}
.cin-art{width:min(46vw,220px)}
.cin-drip{animation:cinDrip 1.5s infinite ease-in}
@keyframes cinDrip{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{transform:translateY(26px);opacity:1}100%{transform:translateY(28px);opacity:0}}
.cin-ripple{animation:cinRip 1.5s infinite ease-out}
@keyframes cinRip{0%,55%{transform:scale(.3);opacity:0}70%{opacity:.8}100%{transform:scale(1.6);opacity:0}}
.cin-phone{width:120px;height:220px;border:3px solid #7d988a;border-radius:22px;background:#0a1a12;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 60px rgba(95,211,154,.35)}
.cin-phone span{width:10px;height:10px;border-radius:50%;background:#5fd39a;animation:cinType 1.2s infinite}
.cin-phone span:nth-child(2){animation-delay:.2s}.cin-phone span:nth-child(3){animation-delay:.4s}
@keyframes cinType{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.cin-logo{width:min(40vw,150px);border-radius:50%;background:#fff;padding:10px;animation:cinPop .9s ease both}
.cin-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cin-badges span{background:rgba(23,185,120,.15);border:1px solid rgba(95,211,154,.4);color:#d1fae5;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;animation:cinPop .7s ease both}
.cin-badges span:nth-child(2){animation-delay:.15s}.cin-badges span:nth-child(3){animation-delay:.3s}
@keyframes cinPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.cin-prov{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.cin-mascot{width:min(30vw,110px);image-rendering:pixelated;animation:cinFloat 3s ease-in-out infinite}
@keyframes cinFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cin-provcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:4px;text-align:left;backdrop-filter:blur(10px)}
.cin-provcard b{color:#fff;font-size:16px}
.cin-provcard span{color:#9bb3a8;font-size:12px}
.cin-book{margin-top:6px;background:linear-gradient(135deg,#17b978,#0d9e63);color:#fff;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:800;font-style:normal;animation:cinPulse 1.6s infinite}
@keyframes cinPulse{0%,100%{box-shadow:0 0 0 0 rgba(23,185,120,.4)}50%{box-shadow:0 0 0 10px rgba(23,185,120,0)}}
.cin-h{font-size:clamp(34px,7vw,72px);font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.02em}
.cin-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion: reduce){#cinema{display:none!important}}

/* ============ UNIFIED THEME SYSTEM (light = login look, dark = landing look) ============ */
:root{
  --bg:#eef2f7;--bg2:#e3edf9;--card:#ffffff;--card2:#f8fafc;
  --ink:#0f172a;--sub:#64748b;--line:#e5e7eb;
  --lblue:#eff6ff;--lgreen:#f0fdf4;--lred:#fef2f2;--lambr:#fffbeb;
  --green:#16a34a;--green2:#0d9e63;--blue:#2563eb;--red:#dc2626;
  --shadow:0 3px 14px rgba(15,23,42,.07);--bar:#ffffff;
  --field:#d9f2e3;--fieldline:#bfe8d2;
  --pc-bg:#ffffff;--pc-ink:#0f172a;--pc-line:#e5e7eb;--pc-sub:#64748b;
}
[data-theme="dark"]{
  --bg:#07110c;--bg2:#0a1a12;--card:#0d1f16;--card2:#12261a;
  --ink:#eafaf3;--sub:#9bb3a8;--line:rgba(255,255,255,.10);
  --lblue:rgba(59,130,246,.16);--lgreen:rgba(23,185,120,.14);--lred:rgba(239,68,68,.16);--lambr:rgba(245,158,11,.14);
  --green:#17b978;--green2:#5fd39a;--blue:#3b82f6;--red:#ef4444;
  --shadow:0 6px 22px rgba(0,0,0,.35);--bar:#0d1f16;
  --field:#12261a;--fieldline:#1d3a2a;
  --pc-bg:linear-gradient(160deg,#0d3b2a,#0a2e21);--pc-ink:#eafaf3;--pc-line:rgba(95,211,154,.25);--pc-sub:#7fa896;
}
body{background:linear-gradient(160deg,var(--bg),var(--bg2))!important;color:var(--ink)}
.meta,.sub,label{color:var(--sub)}
.name{color:var(--ink)}
b{color:var(--ink)}.btn b,.gBtn b{color:inherit}
.card,.item,.vercard,.adm-stat,.sugg-card,.bk-card,.post-card-anim,.cmt-card,.mini-post,.setlist,.setrow{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}
.table th{background:var(--lblue);color:var(--ink);border-color:var(--line)}
.table td{background:var(--card);color:var(--ink);border-color:var(--line)}
.topbar{background:var(--bar)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}
.page-title{color:var(--green2)!important}
.nav{background:var(--bar)!important;border-color:var(--line)!important}
.nav button{color:var(--sub)}
.nav button.on{color:var(--green2)!important}
.input,select,textarea,.gInput{background:var(--field);border-color:var(--fieldline);color:var(--ink)}
.input:focus,.gInput:focus{border-color:var(--green)}
.btn-gray{background:var(--card2)!important;color:var(--ink)!important;border-color:var(--line)!important}
.tag{background:var(--lblue);color:var(--blue)}
.tag.green{background:var(--lgreen);color:var(--green)}
.tag.red{background:var(--lred);color:var(--red)}
.chip{background:var(--card2);color:var(--ink);border:1px solid var(--line)}
.chip.on{background:var(--green);color:#fff;border-color:var(--green)}
/* Composer follows the theme (kills the dark-block-on-light-feed mismatch) */
.post-card{background:var(--pc-bg);border:1px solid var(--pc-line)}
.post-card textarea{color:var(--pc-ink)}
.post-card textarea::placeholder{color:var(--pc-sub)}
.post-card .meta{color:var(--pc-sub)}
.post-card .chip{background:var(--card2);color:var(--pc-ink);border-color:var(--pc-line)}
.post-card .input{background:var(--card2);color:var(--pc-ink);border-color:var(--pc-line)}
/* Action row follows theme + new report button */
.like-button{background:linear-gradient(135deg,var(--green),var(--green2))!important}
.pillBtn{background:var(--card);border-color:var(--line)}
.pillBtn .text{color:var(--ink)}
.act-pill{background:var(--card2);border-color:var(--line);color:var(--sub)}
.rep-btn{width:42px;height:42px;flex:none;border-radius:12px;border:1px solid var(--line);background:var(--card2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.rep-btn svg{width:16px;height:16px;fill:var(--sub);transition:fill .15s}
.rep-btn:hover{background:var(--lred);border-color:var(--red)}
.rep-btn:hover svg{fill:var(--red)}
/* Login / register phone shell follows theme (header stays brand green) */
.gBody{background:linear-gradient(160deg,var(--bg),var(--bg2))!important}
.gPhone{background:var(--card)}
.gCard{background:var(--card)}
.gCard h2{color:var(--green2)}
.gBtn{background:var(--card);color:var(--green2);border:2px solid var(--green2)}
.gBtn.solid{background:var(--green);border-color:var(--green);color:#fff}
.gLink{color:var(--green2)}
/* Wrong-password inline error */
.gInput.err{border-color:var(--red)!important;background:var(--lred)!important;animation:shakeX .3s}
@keyframes shakeX{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.field-err{color:var(--red);font-size:12px;font-weight:700;min-height:16px;margin:2px 8px;text-align:left}
/* Booking + status surfaces in dark */
.bk-tile{background:var(--card2);border-color:var(--line)}
.bk-tile .v{color:var(--ink)}
.bk-id{background:var(--card2);border-color:var(--line);color:var(--ink)}
.bk-panel h4{color:var(--ink)}
[data-theme="dark"] .bk-panel.green{background:rgba(23,185,120,.12);border-color:rgba(23,185,120,.35)}
[data-theme="dark"] .bk-panel.blue{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35)}
[data-theme="dark"] .bk-panel.red{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
[data-theme="dark"] .bk-panel.amber{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
[data-theme="dark"] .st-pending{background:rgba(245,158,11,.18);color:#fbbf24}
[data-theme="dark"] .st-viewed{background:rgba(59,130,246,.18);color:#93c5fd}
[data-theme="dark"] .st-approved{background:rgba(23,185,120,.18);color:#6ee7b7}
[data-theme="dark"] .st-rejected{background:rgba(239,68,68,.18);color:#fca5a5}
.comm-cell{background:var(--card2);border-color:var(--line)}
.comm-cell b{color:var(--green2)}
.modal .card,.sl-overlay .card{background:var(--card);color:var(--ink)}
/* Logo prominence (professor fix) */
.logoWide{height:46px!important;max-width:260px!important}
@media(max-width:900px){.logoWide{height:38px!important}}
/* Theme toggle bubble (left side, away from mascot buddy) */
.theme-toggle{position:fixed;left:14px;bottom:84px;z-index:70;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.theme-toggle:hover{transform:scale(1.08)}
@media(min-width:900px){.theme-toggle{left:20px;bottom:20px}}
body.land{background:#07110c!important}

/* Toggle always visible (green pill, white icon) */
.theme-toggle{background:linear-gradient(135deg,#17b978,#0d9e63)!important;color:#fff!important;border:none!important;box-shadow:0 6px 18px rgba(13,158,99,.45)!important;font-size:22px!important}
/* Logo prominence (professor fix, enforced) */
.logoImg{width:44px!important;height:44px!important}
.logoWide{height:46px!important;max-width:260px!important}
@media(max-width:900px){.logoWide{height:36px!important}.logoImg{width:36px!important;height:36px!important}}
/* Kill ugly number-spinner arrows (your item 11) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Live password checklist (your item 2/7) */
.pw-checks{display:flex;flex-wrap:wrap;gap:6px;margin:4px 2px 8px}
.pw-checks span{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px}
.pw-checks .ok{background:var(--lgreen);color:var(--green)}
.pw-checks .no{background:var(--lred);color:var(--red)}
/* Feed spacing consistency (your item 12) */
#feed .card,.post-card{padding:16px;margin:12px 0;gap:10px}
.actions{margin-top:6px}
/* Profile role frames + banner (your item 8) */
.pc-rolebanner{position:absolute;top:12px;right:12px;z-index:5;border-radius:999px;padding:6px 16px;font-size:11px;font-weight:900;letter-spacing:1px;color:#fff;background:rgba(0,0,0,.38);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35)}
.profile-card.frame-provider .pc-cover{background:linear-gradient(135deg,#17b978,#0d9e63)}
.profile-card.frame-client .pc-cover{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.profile-card.frame-both .pc-cover{background:linear-gradient(90deg,#17b978 0%,#17b978 50%,#3b82f6 50%,#3b82f6 100%)}
.profile-card.frame-admin .pc-cover{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.profile-card.frame-provider{box-shadow:0 0 0 3px rgba(23,185,120,.45),0 12px 32px rgba(15,23,42,.12)}
.profile-card.frame-client{box-shadow:0 0 0 3px rgba(59,130,246,.45),0 12px 32px rgba(15,23,42,.12)}
.profile-card.frame-both{box-shadow:0 0 0 3px rgba(139,92,246,.45),0 12px 32px rgba(15,23,42,.12)}
.profile-card.frame-admin{box-shadow:0 0 0 3px rgba(239,68,68,.5),0 12px 32px rgba(15,23,42,.12)}

/* ===== STORY SECTION ===== */
.story-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}
.story-video{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden}
.story-video video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.story-video-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;flex-wrap:wrap}
.story-video-bar span{font-size:12px;color:#9bb3a8}
.story-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.story-tile{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 6px;text-align:center}
.story-tile p{font-size:10px;color:#9bb3a8;margin:8px 0 0;font-weight:700}
.tile-art{height:64px;display:flex;align-items:center;justify-content:center;position:relative}
.tile-drip .drip{width:8px;height:8px;border-radius:50%;background:#5fd39a;animation:cinDrip 1.6s infinite ease-in}
.tile-phone{gap:4px}
.tile-phone span{width:6px;height:6px;border-radius:50%;background:#5fd39a;animation:cinType 1.2s infinite}
.tile-phone span:nth-child(2){animation-delay:.2s}.tile-phone span:nth-child(3){animation-delay:.4s}
.tile-logo img{width:44px;height:44px;border-radius:50%;background:#fff;padding:4px;animation:cinPop 1.2s ease both}
.tile-mascot img{width:44px;image-rendering:pixelated;animation:cinFloat 3s ease-in-out infinite}
.tile-check{font-size:30px;font-weight:900;color:#5fd39a;animation:cinPop 1s ease both}
@keyframes cinDrip{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{transform:translateY(22px);opacity:1}100%{transform:translateY(24px);opacity:0}}
@keyframes cinRip{0%,55%{transform:scale(.3);opacity:0}70%{opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes cinType{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes cinPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cinFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* ===== CHAT LIGHT MODE ===== */
[data-theme="light"] body.tg-body{background:var(--bg)}
[data-theme="light"] .tg-sidebar{background:#fff;border-right:1px solid var(--line)}
[data-theme="light"] .tg-chat-area{background:var(--bg)}
[data-theme="light"] .tg-chat-header,[data-theme="light"] .tg-input-area,[data-theme="light"] .tg-media-preview{background:#fff;border-color:var(--line)}
[data-theme="light"] .tg-chat-item:hover{background:var(--lgreen)}
[data-theme="light"] .tg-chat-name,[data-theme="light"] .tg-header-name{color:var(--ink)}
[data-theme="light"] .tg-chat-last-msg,[data-theme="light"] .tg-chat-time,[data-theme="light"] .tg-header-status{color:var(--sub)}
[data-theme="light"] .tg-chat-item.active .tg-chat-name,[data-theme="light"] .tg-chat-item.active .tg-chat-last-msg,[data-theme="light"] .tg-chat-item.active .tg-chat-time{color:#fff}
[data-theme="light"] .tg-search-box input,[data-theme="light"] .tg-message-input-wrapper{background:var(--field);border:1px solid var(--fieldline)}
[data-theme="light"] .tg-search-box input,[data-theme="light"] .tg-message-input{color:var(--ink)}
[data-theme="light"] .tg-message.received{background:#fff;border:1px solid var(--line)}
[data-theme="light"] .tg-message.received .tg-message-text{color:var(--ink)}
[data-theme="light"] .tg-message.received .tg-message-time{color:var(--sub)}
[data-theme="light"] .tg-empty-state,[data-theme="light"] .tg-date-divider span{color:var(--sub)}
[data-theme="light"] .tg-menu-btn,[data-theme="light"] .tg-input-btn{color:var(--green2)}
[data-theme="light"] .tg-profile-panel{background:#fff;border-color:var(--line)}
[data-theme="light"] .tg-profile-name-large,[data-theme="light"] .tg-profile-info-value{color:var(--ink)}
/* ===== DARK MAP TILES ===== */
[data-theme="dark"] #map{background:#0d1f16;border-color:var(--line)}
[data-theme="dark"] .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)}
[data-theme="dark"] .leaflet-control-attribution{background:rgba(0,0,0,.5);color:#9bb3a8}


/* Brand lockup (circle logo + text) */
.tb-brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.tb-brand-logo{width:44px;height:44px;border-radius:50%;background:#fff;padding:4px;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tb-brand-text{font-size:20px;font-weight:900;letter-spacing:.3px;color:var(--ink);white-space:nowrap}
.tb-brand-text b{color:var(--green2);font-weight:900}
@media(max-width:900px){.tb-brand-logo{width:36px;height:36px}.tb-brand-text{font-size:16px}}
/* Role frames + banner */
.pc-rolebanner{position:absolute;top:12px;right:12px;z-index:5;border-radius:999px;padding:6px 16px;font-size:11px;font-weight:900;letter-spacing:1px;color:#fff;background:rgba(0,0,0,.38);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35)}
.profile-card.frame-provider .pc-cover{background:linear-gradient(135deg,#17b978,#0d9e63)}
.profile-card.frame-client .pc-cover{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.profile-card.frame-both .pc-cover{background:linear-gradient(90deg,#17b978 0%,#17b978 50%,#3b82f6 50%,#3b82f6 100%)}
.profile-card.frame-admin .pc-cover{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.profile-card.frame-provider{box-shadow:0 0 0 3px rgba(23,185,120,.5),0 12px 32px rgba(15,23,42,.12)}
.profile-card.frame-client{box-shadow:0 0 0 3px rgba(59,130,246,.5),0 12px 32px rgba(15,23,42,.12)}
.profile-card.frame-both{box-shadow:0 0 0 3px rgba(139,92,246,.5),0 12px 32px rgba(15,23,42,.12)}
.profile-card.frame-admin{box-shadow:0 0 0 3px rgba(239,68,68,.55),0 12px 32px rgba(15,23,42,.12)}

/* ===== THEME CORE v2 — FINAL dark/light readability + toggle fix ===== */
:root{--bg:#eef2f7;--bg2:#e3edf9;--card:#ffffff;--card2:#f8fafc;--ink:#0f172a;--sub:#64748b;--line:#e5e7eb;--lblue:#eff6ff;--lgreen:#f0fdf4;--lred:#fef2f2;--lambr:#fffbeb;--green:#16a34a;--green2:#0d9e63;--blue:#2563eb;--red:#dc2626;--bar:#ffffff;--field:#ffffff;--fieldline:#e5e7eb}
[data-theme="dark"]{--bg:#07110c;--bg2:#0a1a12;--card:#0d1f16;--card2:#12261a;--ink:#eafaf3;--sub:#9bb3a8;--line:rgba(255,255,255,.12);--lblue:rgba(59,130,246,.18);--lgreen:rgba(23,185,120,.16);--lred:rgba(239,68,68,.18);--lambr:rgba(245,158,11,.16);--green:#17b978;--green2:#5fd39a;--blue:#3b82f6;--red:#ef4444;--bar:#0d1f16;--field:#12261a;--fieldline:#1d3a2a}
body{background:linear-gradient(160deg,var(--bg),var(--bg2))!important;color:var(--ink)!important}
/* --- surfaces --- */
[data-theme="dark"] .card,[data-theme="dark"] .item,[data-theme="dark"] .vercard,[data-theme="dark"] .adm-stat,[data-theme="dark"] .sugg-card,[data-theme="dark"] .bk-card,[data-theme="dark"] .bk-tile,[data-theme="dark"] .bk-id,[data-theme="dark"] .cmt-card,[data-theme="dark"] .cmt-textbox,[data-theme="dark"] .cmt-boxcontainer,[data-theme="dark"] .cmt-react,[data-theme="dark"] .mini-post,[data-theme="dark"] .post-card-anim,[data-theme="dark"] .setlist,[data-theme="dark"] .setrow,[data-theme="dark"] .set-me,[data-theme="dark"] .table th,[data-theme="dark"] .table td,[data-theme="dark"] .comm-cell,[data-theme="dark"] .peek-card,[data-theme="dark"] .hire-card,[data-theme="dark"] .app-row,[data-theme="dark"] .modal .card,[data-theme="dark"] .sl-overlay .card{background:var(--card)!important;border-color:var(--line)!important}
[data-theme="dark"] .topbar,[data-theme="dark"] .nav{background:var(--bar)!important}
/* --- text --- */
[data-theme="dark"] .name,[data-theme="dark"] .pc-name,[data-theme="dark"] .pc-val,[data-theme="dark"] .adm-stat b,[data-theme="dark"] .adm-col-title,[data-theme="dark"] .cmt-info span,[data-theme="dark"] .cmt-title,[data-theme="dark"] .set-me .name,[data-theme="dark"] .title,[data-theme="dark"] .bk-tile .v,[data-theme="dark"] .bk-panel h4,[data-theme="dark"] .peek-stats b,[data-theme="dark"] .pillBtn .text,[data-theme="dark"] .card b,[data-theme="dark"] .item b{color:var(--ink)!important}
[data-theme="dark"] .meta,[data-theme="dark"] .sub,[data-theme="dark"] label,[data-theme="dark"] .pc-meta,[data-theme="dark"] .cmt-content,[data-theme="dark"] .cmt-info p,[data-theme="dark"] .comm-cell span,[data-theme="dark"] .pc-lbl,[data-theme="dark"] .bk-tile .k{color:var(--sub)!important}
[data-theme="dark"] .page-title{color:var(--green2)!important;-webkit-text-fill-color:var(--green2)!important}
/* --- inputs: typed text always visible --- */
[data-theme="dark"] .input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .gInput,[data-theme="dark"] .ucInput,[data-theme="dark"] .cmt-boxcontainer textarea{background:var(--field)!important;border-color:var(--fieldline)!important;color:var(--ink)!important}
[data-theme="dark"] .input::placeholder,[data-theme="dark"] textarea::placeholder,[data-theme="dark"] .ucInput::placeholder,[data-theme="dark"] .gInput::placeholder{color:var(--sub)!important}
/* --- buttons & pills --- */
[data-theme="dark"] .btn-gray{background:var(--card2)!important;color:var(--ink)!important;border-color:var(--line)!important}
[data-theme="dark"] .pillBtn{background:var(--card2)!important;border-color:var(--line)!important}
[data-theme="dark"] .act-pill,[data-theme="dark"] .rep-btn{background:var(--card2)!important;border-color:var(--line)!important;color:var(--sub)!important}
[data-theme="dark"] .nav button{color:var(--sub)}
[data-theme="dark"] .nav button.on{color:var(--green2)!important}
/* --- tags & chips --- */
[data-theme="dark"] .tag{background:var(--lblue)!important;color:var(--blue)!important}
[data-theme="dark"] .tag.green{background:var(--lgreen)!important;color:var(--green)!important}
[data-theme="dark"] .tag.red{background:var(--lred)!important;color:var(--red)!important}
[data-theme="dark"] .chip{background:var(--card2)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
/* --- login/register phone shell --- */
[data-theme="dark"] .gBody{background:linear-gradient(160deg,var(--bg),var(--bg2))!important}
[data-theme="dark"] .gPhone,[data-theme="dark"] .gCard{background:var(--card)!important}
[data-theme="dark"] .gCard h2,[data-theme="dark"] .gLink{color:var(--green2)!important}
[data-theme="dark"] .gBtn{background:var(--card)!important;color:var(--green2)!important;border-color:var(--green2)!important}
/* --- THEME TOGGLE: always a visible green pill with white glyph --- */
.theme-toggle,#themeBtn{position:fixed;left:14px;bottom:84px;z-index:7000;width:48px;height:48px;border-radius:50%;border:none!important;cursor:pointer;background:linear-gradient(135deg,#17b978,#0d9e63)!important;color:#fff!important;font-size:22px!important;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(13,158,99,.45)!important}
@media(min-width:900px){.theme-toggle,#themeBtn{left:20px;bottom:20px}}


/* ===== NUCLEAR DARK MODE TEXT FIX (Guarantees visibility everywhere) ===== */
[data-theme="dark"] body,
[data-theme="dark"] .name,
[data-theme="dark"] .pc-name,
[data-theme="dark"] .pc-val,
[data-theme="dark"] .title,
[data-theme="dark"] .bk-tile .v,
[data-theme="dark"] .bk-panel h4,
[data-theme="dark"] .card b,
[data-theme="dark"] .item b,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] label {
    color: #eafaf3 !important;
}

[data-theme="dark"] .input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .gInput,
[data-theme="dark"] .ucInput,
[data-theme="dark"] .cmt-boxcontainer textarea {
    background: #12261a !important;
    border-color: #1d3a2a !important;
    color: #eafaf3 !important;
    -webkit-text-fill-color: #eafaf3 !important; /* CRITICAL: Fixes Safari/iOS invisible input text */
}

[data-theme="dark"] .input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .gInput::placeholder,
[data-theme="dark"] .ucInput::placeholder {
    color: #9bb3a8 !important;
    -webkit-text-fill-color: #9bb3a8 !important;
}

/* ===== STORY TIMELINE SECTION ===== */
.story-rail {
  position: absolute;
  left: 50%;
  top: 200px;
  bottom: 100px;
  width: 2px;
  background: rgba(255,255,255,0.2);
  transform: translateX(-50%);
  z-index: 10;
}

.story-rail-track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(255,255,255,0.2);
}

.story-rail-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--green2);
  height: 0%;
  transition: height 0.3s ease;
}

.story-rail-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: var(--green2);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(13,158,99,0.5);
  animation: pulse 2s infinite;
  top: 0%;
  transition: top 0.3s ease;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(13,158,99,0.5); }
  100% { box-shadow: 0 0 0 20px rgba(13,158,99,0); }
}

.story-entries {
  position: relative;
  padding-top: 100px;
}

.story-entry {
  position: relative;
  width: 100%;
  min-height: 500px;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.story-entry.in {
  opacity: 1;
  transform: translateY(0);
}

.story-entry-side {
  display: flex;
  align-items: center;
  gap: 50px;
}

.story-entry-left {
  flex-direction: row-reverse;
}

.story-entry-right {
  flex-direction: row;
}

.story-plate {
  position: relative;
  width: 50%;
  height: 400px;
  overflow: hidden;
}

.story-plate-side {
  width: 40%;
  height: 300px;
}

.story-plate-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  transition: inset 0.7s cubic-bezier(0.33,0,0,1);
}

.story-plate:hover .story-plate-inner {
  inset: 5%;
}

.story-plate-fill {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  height: 110%;
  transition: top 0.7s ease;
}

.story-plate:hover .story-plate-fill {
  top: -10%;
}

.story-plate-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.story-plate-outline svg {
  width: 100%;
  height: 100%;
  color: var(--green2);
}

.story-year {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--green2);
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.story-entry.in .story-year {
  opacity: 1;
}

.story-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  max-width: 90%;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(20px);
  transition: all 0.8s ease 0.2s;
}

.story-entry-left .story-copy {
  left: auto;
  right: 55%;
  transform: translateY(-50%) translateX(-20px);
}

.story-entry.in .story-copy {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.story-copy p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.story-copy b {
  color: var(--green2);
  display: block;
  margin-bottom: 8px;
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .story-rail {
    left: 30px;
  }
  
  .story-entry-side {
    flex-direction: column !important;
    gap: 30px;
  }
  
  .story-plate,
  .story-plate-side {
    width: 100% !important;
    height: 300px;
  }
  
  .story-year {
    left: 30px;
    top: auto;
    bottom: 20px;
    transform: none;
  }
  
  .story-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    padding: 0 30px;
  }
  
  .story-copy b {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .story-rail {
    display: none;
  }
  
  .story-entry {
    min-height: auto;
    margin-bottom: 80px;
  }
  
  .story-plate,
  .story-plate-side {
    height: 250px;
  }
  
  .story-year {
    font-size: 1.5rem;
    bottom: 10px;
  }
}


/* ===== STORY TIMELINE v3: uniform plates, clean alignment, no green curve ===== */
#story{background:#07110c!important}
#story .sec-inner{position:relative}
#story .sec-h{color:#fff!important}
#story .sec-sub{color:#9bb3a8!important}
#story .story-rail{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.12);z-index:0}
#story .story-rail-progress{position:absolute;left:0;top:0;width:100%;height:0%;background:linear-gradient(#17b978,#5fd39a)}
#story .story-rail-marker{position:absolute;left:50%;top:0%;width:14px;height:14px;border-radius:50%;background:#5fd39a;transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(95,211,154,.18),0 0 18px rgba(95,211,154,.8)}
#story .story-entries{position:relative;z-index:1;display:flex;flex-direction:column;gap:70px;margin-top:60px}
#story .story-entry{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#story .story-plate{grid-column:auto!important;grid-row:auto!important;order:0;width:100%;max-width:460px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid rgba(95,211,154,.28);background:#0d1f16;box-shadow:0 18px 44px rgba(0,0,0,.5);justify-self:center;position:relative}
#story .story-entry:nth-child(even) .story-plate{order:2}
#story .story-plate img{width:100%;height:100%;object-fit:cover;display:block}
#story .story-plate-inner,#story .story-plate-fill,#story .story-plate-outline{display:none!important}
#story .story-text{grid-column:auto!important;grid-row:auto!important;max-width:430px}
#story .story-entry:nth-child(odd) .story-text{justify-self:start;text-align:left}
#story .story-entry:nth-child(even) .story-text{justify-self:end;text-align:right;order:1}
#story .story-year{display:inline-block;font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#5fd39a;background:rgba(23,185,120,.12);border:1px solid rgba(95,211,154,.3);border-radius:999px;padding:6px 14px;margin:0 0 12px}
#story .story-copy{color:#eafaf3!important;font-size:15px;line-height:1.7;margin:0}
#story .story-copy b{color:#5fd39a}
@media(max-width:860px){
  #story .story-rail{left:14px;transform:none}
  #story .story-entry{grid-template-columns:1fr;gap:16px;padding-left:34px}
  #story .story-entry:nth-child(even) .story-plate{order:0}
  #story .story-entry:nth-child(even) .story-text{order:0;justify-self:stretch;text-align:left}
  #story .story-plate{max-width:100%}
  #story .story-text{justify-self:stretch!important;text-align:left!important}
}

/* ===== STORY TIMELINE v4 — kill zombie absolute positioning ===== */
#story .story-entry{min-height:0!important;margin-bottom:0!important}
#story .story-entry-side{display:grid!important}
#story .story-plate{height:auto!important}
#story .story-plate-inner,#story .story-plate-fill,#story .story-plate-outline{display:none!important}
#story .story-year{position:static!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important;opacity:1!important;transition:none!important}
#story .story-entry.in .story-year{opacity:1!important}
#story .story-copy{position:static!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important;opacity:1!important;transition:none!important;width:auto!important;max-width:430px;pointer-events:auto!important}
#story .story-entry.in .story-copy{opacity:1!important;transform:none!important}
#story .story-copy p{color:#eafaf3!important;font-size:15px!important;line-height:1.7!important;margin:0!important}
#story .story-text{position:relative;display:flex;flex-direction:column}

/* ===== DARK INPUTS v2: autofill + focus + eye alignment + theme pill ===== */
[data-theme="dark"] .input:focus,[data-theme="dark"] .gInput:focus,[data-theme="dark"] textarea:focus,[data-theme="dark"] select:focus,[data-theme="dark"] .ucInput:focus{background:#12261a!important;color:#eafaf3!important;-webkit-text-fill-color:#eafaf3!important;border-color:#1d3a2a!important}
/* Chrome autofill: light theme */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #eef2f7 inset!important;-webkit-text-fill-color:#0f172a!important;caret-color:#0f172a;transition:background-color 9999s ease-in-out 0s}
/* Chrome autofill: dark theme (kills the white popup box) */
[data-theme="dark"] input:-webkit-autofill,[data-theme="dark"] input:-webkit-autofill:hover,[data-theme="dark"] input:-webkit-autofill:focus,[data-theme="dark"] textarea:-webkit-autofill,[data-theme="dark"] select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #12261a inset!important;-webkit-text-fill-color:#eafaf3!important;caret-color:#eafaf3}
/* Eye button: dead-center on EVERY page (login, register, password) */
.pw-wrap{position:relative;display:block}
.pw-wrap .input,.pw-wrap .gInput{padding-right:46px!important}
.eyeBtn{position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-size:18px;line-height:1;z-index:5;padding:0;margin:0}
/* Theme pill housing for the SVG glyphs */
#themeBtn,.theme-toggle{position:fixed;left:14px;bottom:84px;z-index:7000;width:48px;height:48px;border-radius:50%;border:none!important;cursor:pointer;background:linear-gradient(135deg,#17b978,#0d9e63)!important;box-shadow:0 6px 18px rgba(13,158,99,.45)!important;display:flex;align-items:center;justify-content:center;padding:0}
#themeBtn svg,.theme-toggle svg{width:22px;height:22px;display:block}
@media(min-width:900px){#themeBtn,.theme-toggle{left:20px;bottom:20px}}

/* ===== DARK FIX PACK v3 ===== */
.tb-brand-text b{color:var(--green2)!important}
[data-theme="dark"] .topbar b{color:var(--green2)!important}
[data-theme="dark"] .gLink,[data-theme="dark"] .link{color:var(--green2)!important}
[data-theme="dark"] .back-btn{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
/* Profile card follows theme (name/stats readable again) */
[data-theme="dark"] .profile-card{background:var(--card)!important;border:1px solid var(--line)}
[data-theme="dark"] .pc-title{color:var(--green2)!important}
[data-theme="dark"] .pc-bio,[data-theme="dark"] .pc-meta{color:var(--sub)!important}
[data-theme="dark"] .pc-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Booking status chips readable in dark */
[data-theme="dark"] .bk-status.sent{background:rgba(99,102,241,.22);color:#c7d2fe}
[data-theme="dark"] .bk-status.accepted{background:rgba(59,130,246,.22);color:#bfdbfe}
[data-theme="dark"] .bk-status.inprogress{background:rgba(245,158,11,.22);color:#fde68a}
[data-theme="dark"] .bk-status.completed{background:rgba(23,185,120,.22);color:#a7f3d0}
[data-theme="dark"] .bk-status.confirmed{background:rgba(16,185,129,.28);color:#6ee7b7}
[data-theme="dark"] .bk-status.cancelled,[data-theme="dark"] .bk-status.disputed{background:rgba(239,68,68,.22);color:#fecaca}
[data-theme="dark"] .bk-emg{background:rgba(239,68,68,.25);color:#fecaca}
[data-theme="dark"] .cd-chip{background:rgba(245,158,11,.15);color:#fde68a;border-color:rgba(245,158,11,.4)}
[data-theme="dark"] .cd-chip.go{background:rgba(23,185,120,.15);color:#a7f3d0;border-color:rgba(23,185,120,.4)}
/* Selected chips always visible in dark */
[data-theme="dark"] .chip.on{background:linear-gradient(135deg,#17b978,#0d9e63)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 0 0 2px rgba(95,211,154,.5)}
[data-theme="dark"] .schip.on{background:linear-gradient(135deg,#17b978,#0d9e63)!important;color:#fff!important;border-color:transparent!important}
[data-theme="dark"] .pc-btn.on{outline:2px solid #5fd39a;outline-offset:2px}
/* Hover peek card: dark surface + role frame + banner */
[data-theme="dark"] .peek-card{background:var(--card);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.peek-card.frame-provider .peek-cover{background:linear-gradient(135deg,#17b978,#0d9e63)}
.peek-card.frame-client .peek-cover{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.peek-card.frame-both .peek-cover{background:linear-gradient(90deg,#17b978 50%,#3b82f6 50%)}
.peek-card.frame-admin .peek-cover{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.peek-role{position:absolute;top:8px;right:8px;z-index:3;border-radius:999px;padding:3px 10px;font-size:9px;font-weight:900;letter-spacing:1px;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.35)}
[data-theme="dark"] .peek-stats b{color:var(--ink)!important}
[data-theme="dark"] .peek-bio{color:var(--sub)!important}

/* ===== ROLE REGALIA v3 — proportional forged rings ===== */
.rb{position:relative;display:inline-block;border-radius:50%;flex:none;--rw:clamp(3px,calc(var(--rbs,40px)*0.085),5px)}
.rb>*:first-child{border-radius:50%!important}
.rb::before{content:"";position:absolute;inset:calc(var(--rw)*-1);border-radius:50%;pointer-events:none;z-index:0;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw) - 1px),#000 calc(100% - var(--rw)));
  mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw) - 1px),#000 calc(100% - var(--rw)))}
.rb::after{pointer-events:none;z-index:2}
/* ADMIN — royal gold + halo + gem */
.rb-admin::before{background:conic-gradient(from 210deg,#fff3c4,#f5c451 14%,#a97a10 32%,#ffe08a 46%,#d49a24 62%,#8a6a1f 78%,#f5c451 90%,#fff3c4);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.14) rgba(245,196,81,.55))}
.rb-admin::after{content:"";position:absolute;inset:calc(var(--rw)*-2.2);border-radius:50%;border:1px solid rgba(212,154,36,.55);box-shadow:inset 0 0 calc(var(--rbs,40px)*0.2) rgba(245,196,81,.18)}
.rb-gem{position:absolute;top:calc(var(--rbs,40px)*-0.16);left:50%;width:calc(var(--rbs,40px)*0.2);height:calc(var(--rbs,40px)*0.2);min-width:8px;min-height:8px;transform:translateX(-50%) rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#fff8dc,#f5c451 45%,#a97a10);border:1px solid #8a6a1f;z-index:3;animation:gemPulse 2.6s ease-in-out infinite}
@keyframes gemPulse{0%,100%{box-shadow:0 0 calc(var(--rbs,40px)*0.14) rgba(245,196,81,.7)}50%{box-shadow:0 0 calc(var(--rbs,40px)*0.3) rgba(255,236,170,1)}}
/* CLIENT — trust blue + 4 orbit nodes */
.rb-client::before{background:conic-gradient(from 0deg,#7cc4ff,#329CFF 25%,#1d6fd8 50%,#329CFF 75%,#7cc4ff);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.12) rgba(50,156,255,.5))}
.rb-client::after{content:"";position:absolute;inset:calc(var(--rw)*-2.4);border-radius:50%;background:
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 50% 0%,#bfe0ff 96%,transparent),
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 100% 50%,#bfe0ff 96%,transparent),
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 50% 100%,#bfe0ff 96%,transparent),
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 0% 50%,#bfe0ff 96%,transparent);
 animation:nodesPulse 3s ease-in-out infinite}
@keyframes nodesPulse{0%,100%{opacity:.7}50%{opacity:1;filter:drop-shadow(0 0 4px rgba(50,156,255,.9))}}
/* PROVIDER — segmented service green + wrench chip */
.rb-provider::before{background:repeating-conic-gradient(from 6deg,#34d999 0deg 22deg,#087F5B 22deg 26deg,rgba(16,185,129,0) 26deg 34deg);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.12) rgba(16,185,129,.5));transition:transform .6s cubic-bezier(.33,0,0,1)}
.rb-provider:hover::before{transform:rotate(34deg)}
.rb-provider::after{content:"🛠";position:absolute;bottom:calc(var(--rbs,40px)*-0.14);right:calc(var(--rbs,40px)*-0.1);width:calc(var(--rbs,40px)*0.42);height:calc(var(--rbs,40px)*0.42);min-width:18px;min-height:18px;font-size:calc(var(--rbs,40px)*0.22);line-height:1;display:flex;align-items:center;justify-content:center;background:#0d1f16;border:1.5px solid #10B981;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.45)}
/* DUAL — welded alloy, slow rotation, dual tab */
.rb-dual::before{background:conic-gradient(from -90deg,#329CFF 0deg 176deg,rgba(255,255,255,.85) 176deg 184deg,#10B981 184deg 356deg,rgba(255,255,255,.85) 356deg 360deg);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.14) rgba(38,180,190,.55));animation:rbSpin 12s linear infinite}
.rb-dual::after{content:"";position:absolute;bottom:calc(var(--rbs,40px)*-0.16);left:50%;transform:translateX(-50%);width:calc(var(--rbs,40px)*0.36);height:calc(var(--rbs,40px)*0.18);min-width:14px;min-height:7px;border-radius:99px 99px 3px 3px;background:linear-gradient(90deg,#329CFF 50%,#10B981 50%);border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 6px rgba(0,0,0,.35)}
@keyframes rbSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rb-dual::before,.rb-gem,.rb-client::after{animation:none}}
/* ===== MINTED COVERS — banner stays, now matched to the ring metal ===== */
.profile-card .pc-cover,.peek-card .peek-cover{position:relative;overflow:hidden}
.profile-card.frame-admin .pc-cover,.peek-card.frame-admin .peek-cover{background:linear-gradient(120deg,#8a6a1f,#d49a24 30%,#f5c451 50%,#d49a24 70%,#8a6a1f)!important}
.profile-card.frame-client .pc-cover,.peek-card.frame-client .peek-cover{background:linear-gradient(120deg,#1d6fd8,#329CFF 45%,#7cc4ff 60%,#329CFF 80%,#1d6fd8)!important}
.profile-card.frame-provider .pc-cover,.peek-card.frame-provider .peek-cover{background:linear-gradient(120deg,#087F5B,#10B981 45%,#34d999 60%,#10B981 80%,#087F5B)!important}
.profile-card.frame-both .pc-cover,.peek-card.frame-both .peek-cover{background:linear-gradient(120deg,#1d6fd8,#329CFF 38%,#0ea5a5 50%,#10B981 62%,#087F5B)!important}
.profile-card .pc-cover::after,.peek-card .peek-cover::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:coverShine 5.5s ease-in-out infinite}
@keyframes coverShine{0%,55%{left:-60%}85%,100%{left:130%}}
.profile-card.frame-admin .pc-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle 2px at 20% 40%,rgba(255,248,220,.85) 96%,transparent),radial-gradient(circle 2px at 50% 70%,rgba(255,248,220,.6) 96%,transparent),radial-gradient(circle 2px at 80% 35%,rgba(255,248,220,.85) 96%,transparent)}
.profile-card.frame-client .pc-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle 3px at 12% 50%,rgba(255,255,255,.55) 96%,transparent),radial-gradient(circle 3px at 38% 50%,rgba(255,255,255,.35) 96%,transparent),radial-gradient(circle 3px at 64% 50%,rgba(255,255,255,.35) 96%,transparent),radial-gradient(circle 3px at 90% 50%,rgba(255,255,255,.55) 96%,transparent)}
.profile-card.frame-provider .pc-cover::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.08) 14px 16px)}
.profile-card.frame-both .pc-cover::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));box-shadow:0 0 12px rgba(255,255,255,.65)}
/* Banner pills minted in the same metal */
.profile-card.frame-admin .pc-rolebanner,.peek-card.frame-admin .peek-role{background:linear-gradient(135deg,#ffe08a,#d49a24)!important;color:#3b2a05!important;border-color:#fff3c4!important}
.profile-card.frame-client .pc-rolebanner,.peek-card.frame-client .peek-role{background:linear-gradient(135deg,#7cc4ff,#1d6fd8)!important;border-color:#bfe0ff!important}
.profile-card.frame-provider .pc-rolebanner,.peek-card.frame-provider .peek-role{background:linear-gradient(135deg,#34d999,#087F5B)!important;border-color:#a7f3d0!important}
.profile-card.frame-both .pc-rolebanner,.peek-card.frame-both .peek-role{background:linear-gradient(90deg,#1d6fd8 50%,#087F5B 50%)!important;border-color:rgba(255,255,255,.6)!important}

/* ===== UNIVERSAL ROLE REGALIA — ALL RINGS NOW ROTATE ===== */
.rb{position:relative;display:inline-block;border-radius:50%;flex:none;--rw:clamp(2px,calc(var(--rbs,40px)*0.08),5px)}
.rb>*:first-child{border-radius:50%!important}
.rb::before{content:"";position:absolute;inset:calc(var(--rw)*-1);border-radius:50%;pointer-events:none;z-index:0;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw) - 1px),#000 calc(100% - var(--rw)));
  mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw) - 1px),#000 calc(100% - var(--rw)))}
.rb::after{pointer-events:none;z-index:2}

/* ADMIN — royal gold, slow clockwise rotation + halo + pulsing gem */
.rb-admin::before{background:conic-gradient(from 210deg,#fff3c4,#f5c451 14%,#a97a10 32%,#ffe08a 46%,#d49a24 62%,#8a6a1f 78%,#f5c451 90%,#fff3c4);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.14) rgba(245,196,81,.55));animation:rbSpinCW 15s linear infinite}
.rb-admin::after{content:"";position:absolute;inset:calc(var(--rw)*-2.2);border-radius:50%;border:1px solid rgba(212,154,36,.55);box-shadow:inset 0 0 calc(var(--rbs,40px)*0.2) rgba(245,196,81,.18)}
.rb-gem{position:absolute;top:calc(var(--rbs,40px)*-0.16);left:50%;width:calc(var(--rbs,40px)*0.2);height:calc(var(--rbs,40px)*0.2);min-width:7px;min-height:7px;transform:translateX(-50%) rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#fff8dc,#f5c451 45%,#a97a10);border:1px solid #8a6a1f;z-index:3;animation:gemPulse 2.6s ease-in-out infinite}
@keyframes gemPulse{0%,100%{box-shadow:0 0 calc(var(--rbs,40px)*0.14) rgba(245,196,81,.7)}50%{box-shadow:0 0 calc(var(--rbs,40px)*0.3) rgba(255,236,170,1)}}

/* CLIENT — trust blue, counter-clockwise rotation + 4 orbit nodes */
.rb-client::before{background:conic-gradient(from 0deg,#7cc4ff,#329CFF 25%,#1d6fd8 50%,#329CFF 75%,#7cc4ff);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.12) rgba(50,156,255,.5));animation:rbSpinCCW 18s linear infinite}
.rb-client::after{content:"";position:absolute;inset:calc(var(--rw)*-2.4);border-radius:50%;background:
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 50% 0%,#bfe0ff 96%,transparent),
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 100% 50%,#bfe0ff 96%,transparent),
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 50% 100%,#bfe0ff 96%,transparent),
 radial-gradient(circle calc(var(--rbs,40px)*0.075) at 0% 50%,#bfe0ff 96%,transparent);
 animation:nodesPulse 3s ease-in-out infinite}
@keyframes nodesPulse{0%,100%{opacity:.7}50%{opacity:1;filter:drop-shadow(0 0 4px rgba(50,156,255,.9))}}

/* PROVIDER — segmented service green, fast clockwise rotation + wrench chip */
.rb-provider::before{background:repeating-conic-gradient(from 6deg,#34d999 0deg 22deg,#087F5B 22deg 26deg,rgba(16,185,129,0) 26deg 34deg);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.12) rgba(16,185,129,.5));animation:rbSpinCW 8s linear infinite}
.rb-provider:hover::before{animation-duration:4s}
.rb-provider::after{content:"🛠";position:absolute;bottom:calc(var(--rbs,40px)*-0.14);right:calc(var(--rbs,40px)*-0.1);width:calc(var(--rbs,40px)*0.42);height:calc(var(--rbs,40px)*0.42);min-width:16px;min-height:16px;font-size:calc(var(--rbs,40px)*0.22);line-height:1;display:flex;align-items:center;justify-content:center;background:#0d1f16;border:1.5px solid #10B981;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.45)}

/* DUAL — welded alloy, medium clockwise rotation, dual tab */
.rb-dual::before{background:conic-gradient(from -90deg,#329CFF 0deg 176deg,rgba(255,255,255,.85) 176deg 184deg,#10B981 184deg 356deg,rgba(255,255,255,.85) 356deg 360deg);filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.14) rgba(38,180,190,.55));animation:rbSpinCW 12s linear infinite}
.rb-dual::after{content:"";position:absolute;bottom:calc(var(--rbs,40px)*-0.16);left:50%;transform:translateX(-50%);width:calc(var(--rbs,40px)*0.36);height:calc(var(--rbs,40px)*0.18);min-width:12px;min-height:6px;border-radius:99px 99px 3px 3px;background:linear-gradient(90deg,#329CFF 50%,#10B981 50%);border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 6px rgba(0,0,0,.35)}

@keyframes rbSpinCW{to{transform:rotate(360deg)}}
@keyframes rbSpinCCW{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.rb-admin::before,.rb-client::before,.rb-provider::before,.rb-dual::before,.rb-gem,.rb-client::after{animation:none}}

/* ===== REGALIA v4 — rotation visible on all rings, SVG markers, aligned ===== */
.rb{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.rb>*:first-child{display:block}
.pc-avatar{display:flex;align-items:center;justify-content:center}
/* ADMIN — milled gold coin edge + counter-rotating dashed halo (unmistakable) */
.rb-admin::before{background:repeating-conic-gradient(from 0deg,#ffe08a 0deg 10deg,#d49a24 10deg 14deg,#a97a10 14deg 20deg,#f5c451 20deg 30deg)!important;animation:rbSpinCW 10s linear infinite!important;filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.14) rgba(245,196,81,.6))}
.rb-admin::after{content:""!important;position:absolute;inset:calc(var(--rw)*-2.4);border-radius:50%;border:1.5px dashed rgba(212,154,36,.85);animation:rbSpinCCW 16s linear infinite}
/* CLIENT — notched blue band (rotation now obvious) + pulsing orbit nodes */
.rb-client::before{background:repeating-conic-gradient(from 0deg,#7cc4ff 0deg 26deg,#1d6fd8 26deg 30deg,#329CFF 30deg 56deg,#bfe0ff 56deg 60deg)!important;animation:rbSpinCCW 12s linear infinite!important;filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.12) rgba(50,156,255,.55))}
.rb-client::after{content:""!important;position:absolute;inset:calc(var(--rw)*-2.6);border-radius:50%;background:radial-gradient(circle calc(var(--rbs,40px)*0.07) at 50% 0%,#eaf6ff 97%,transparent),radial-gradient(circle calc(var(--rbs,40px)*0.07) at 100% 50%,#eaf6ff 97%,transparent),radial-gradient(circle calc(var(--rbs,40px)*0.07) at 50% 100%,#eaf6ff 97%,transparent),radial-gradient(circle calc(var(--rbs,40px)*0.07) at 0% 50%,#eaf6ff 97%,transparent);animation:nodesPulse 3s ease-in-out infinite}
/* PROVIDER — tighter segments, faster spin; wrench chip is now an SVG (kills the black circle) */
.rb-provider::before{background:repeating-conic-gradient(from 8deg,#34d999 0deg 20deg,#087F5B 20deg 24deg,rgba(16,185,129,0) 24deg 32deg)!important;animation:rbSpinCW 7s linear infinite!important}
.rb-provider::after{content:""!important;position:absolute;bottom:calc(var(--rbs,40px)*-0.14);right:calc(var(--rbs,40px)*-0.1);width:calc(var(--rbs,40px)*0.42);height:calc(var(--rbs,40px)*0.42);min-width:18px;min-height:18px;border-radius:50%;background:#0d9e63 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/></svg>") center/60% no-repeat;border:1.5px solid #34d999;box-shadow:0 2px 8px rgba(0,0,0,.45)}
/* DUAL — bright white weld seams + faster spin */
.rb-dual::before{background:conic-gradient(from -90deg,#329CFF 0deg 172deg,#ffffff 172deg 188deg,#10B981 188deg 352deg,#ffffff 352deg 360deg)!important;animation:rbSpinCW 9s linear infinite!important;filter:drop-shadow(0 0 calc(var(--rbs,40px)*0.14) rgba(38,180,190,.6))}
@keyframes rbSpinCW{to{transform:rotate(360deg)}}
@keyframes rbSpinCCW{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.rb-admin::before,.rb-admin::after,.rb-client::before,.rb-client::after,.rb-provider::before,.rb-dual::before{animation:none!important}}