/* ============================================================
   Kwirkz MVP — functional prototype styles
   ============================================================ */
@font-face{ font-family:"Curse Casual"; src:url("proto/Curse Casual.ttf") format("truetype"); font-weight:400 900; font-display:swap; }
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --navy:#1B1464; --navy-700:#150E48; --navy-50:#ECEBF6; --navy-100:#DAD7EE;
  --green:#3AE800; --green-deep:#2E9E12; --green-50:#EAFBE3;
  --amber:#977200; --amber-50:#FFF4D6; --red:#C0461F; --red-50:#FBE9E2;
  --ink:#16172A; --ink-2:#494C63; --ink-3:#868AA0;
  --line:#E9EAF2; --field:#F4F5FA; --cream:#FBFAF6; --paper:#FFFFFF;
  --display:"Nunito",system-ui,sans-serif; --body:"DM Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--body);background:#0d0b1e;-webkit-font-smoothing:antialiased;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input,textarea,select{font:inherit;}

.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:34px;
  background:radial-gradient(120% 90% at 80% 0%,#221a52,#0d0b1e 70%);overflow:hidden;padding:20px;}

/* demo role switcher (outside phone) */
.demo{width:230px;flex:none;color:#fff;}
.demo .logo{height:30px;filter:brightness(0) invert(1);margin-bottom:6px;}
.demo h4{font-family:var(--display);font-weight:900;font-size:15px;color:#fff;}
.demo p{font-size:12px;color:rgba(255,255,255,.6);margin:4px 0 16px;line-height:1.5;}
.demo .rl{display:block;width:100%;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:12px 14px;margin-bottom:9px;color:#fff;transition:all .15s;}
.demo .rl.on{background:#fff;color:var(--navy);}
.demo .rl .t{font-family:var(--display);font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;}
.demo .rl .d{font-size:11px;opacity:.7;margin-top:2px;}
.demo .reset{margin-top:8px;font-size:11.5px;color:rgba(255,255,255,.5);text-decoration:underline;}
.demo .hint{margin-top:16px;font-size:11px;color:rgba(255,255,255,.45);line-height:1.5;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;}
@media(max-width:820px){.demo{display:none;}}

/* phone */
.phone{width:392px;height:830px;background:#0c0a18;border-radius:52px;padding:11px;flex:none;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.7),inset 0 0 0 2px #2a2746;}
.screen{position:relative;width:100%;height:100%;background:var(--cream);border-radius:42px;overflow:hidden;display:flex;flex-direction:column;}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:116px;height:28px;background:#0c0a18;border-radius:15px;z-index:30;}
.status{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 32px;font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink);}

/* generic */
.app{flex:1;min-height:0;display:flex;flex-direction:column;}
.appbar{flex:none;padding:4px 18px 10px;display:flex;align-items:center;gap:10px;}
.appbar .title{font-family:var(--display);font-weight:900;font-size:22px;color:var(--navy);}
.appbar .loc{display:flex;align-items:center;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700;font-size:12.5px;color:var(--navy);}
.appbar .sp{flex:1;}
.appbar .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--navy),#3a2f8f);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;}
.appbar .bell{width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);position:relative;}
.appbar .bell .dot{position:absolute;top:7px;right:8px;min-width:15px;height:15px;border-radius:999px;background:var(--green-deep);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;border:1.5px solid #fff;padding:0 3px;}

.tabs{flex:none;margin:0 18px;background:var(--navy-50);border-radius:13px;padding:4px;display:flex;gap:2px;}
.tabs .tab{flex:1;border-radius:10px;padding:9px 4px;font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink-3);}
.tabs .tab.on{background:var(--navy);color:#fff;box-shadow:0 6px 16px -6px rgba(27,20,100,.5);}

.scroll{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 22px;display:flex;flex-direction:column;gap:13px;}
.scroll::-webkit-scrollbar{width:0;}

.banner{display:flex;align-items:center;gap:9px;border-radius:12px;padding:9px 13px;font-size:12px;font-weight:600;}
.banner.navy{background:var(--navy-50);border:1px solid var(--navy-100);color:var(--navy);}
.banner.green{background:var(--green-50);border:1px solid #BFEFB0;color:var(--green-deep);}
.banner b{font-family:var(--display);font-weight:800;}
.banner svg{width:18px;height:18px;flex:none;}
.banner .go{margin-left:auto;font-family:var(--display);font-weight:800;text-decoration:underline;}
.logohdr{display:flex;justify-content:center;padding:2px 0 6px;}
.logohdr img{height:34px;width:auto;}

.search{display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:12px 14px;color:var(--ink);font-size:13.5px;width:100%;outline:none;}
.search::placeholder{color:var(--ink-3);}
.search:focus{border-color:var(--navy);}
.cats{display:flex;gap:7px;overflow-x:auto;}.cats::-webkit-scrollbar{height:0;}
.chip{flex:none;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 13px;font-weight:700;font-size:12px;color:var(--ink-2);white-space:nowrap;}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.chip.soon{border-style:dashed;color:var(--ink-3);}

.map{height:130px;border-radius:16px;position:relative;overflow:hidden;border:1px solid var(--line);flex:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 25px,#E4E6F0 25px,#E4E6F0 26px),repeating-linear-gradient(90deg,transparent,transparent 25px,#E4E6F0 25px,#E4E6F0 26px),#EFF1F8;}
.map .pin{position:absolute;width:24px;height:24px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);background:var(--navy);box-shadow:0 4px 10px rgba(27,20,100,.4);}
.map .pin span{position:absolute;inset:5px;background:#fff;border-radius:50%;}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.map .maplbl{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(255,255,255,.95);border-radius:9px;padding:5px 10px;font-size:11px;font-weight:700;color:var(--navy);box-shadow:0 2px 10px -2px rgba(0,0,0,.25);}
.mapbtn{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--field);color:var(--navy);border:1px solid var(--line);align-self:flex-start;}
.mapbtn.on{background:var(--navy);color:#fff;border-color:var(--navy);}

.h{font-family:var(--display);font-weight:900;color:var(--navy);font-size:17px;display:flex;align-items:center;justify-content:space-between;}
.muted{color:var(--ink-3);font-size:12.5px;}

.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:13px;box-shadow:0 10px 28px -22px rgba(27,20,100,.4);}
.card.tap{cursor:pointer;transition:transform .1s;} .card.tap:active{transform:scale(.99);}
.row{display:flex;gap:11px;} .col{display:flex;flex-direction:column;} .ctr{align-items:center;} .btw{justify-content:space-between;} .wrap{flex-wrap:wrap;}
.gap6{gap:6px;}.gap8{gap:8px;}.mt6{margin-top:6px;}.mt8{margin-top:8px;}.mt10{margin-top:10px;}
.thumb{width:50px;height:50px;border-radius:13px;flex:none;background:linear-gradient(135deg,var(--navy-50),#dfe);display:grid;place-items:center;color:var(--navy);font-family:var(--display);font-weight:900;font-size:19px;}
.nm{font-family:var(--display);font-weight:800;font-size:15px;color:var(--navy);display:flex;align-items:center;gap:6px;}
.card .row.btw .nm{white-space:nowrap;}
.pill{font-size:11px;font-weight:700;color:var(--ink-2);background:var(--field);border-radius:999px;padding:4px 9px;}
.pill.star{color:var(--green-deep);background:var(--green-50);}
.badge{display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;flex:none;gap:3px;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800;}
.badge.v{background:var(--green-50);color:var(--green-deep);}
.badge.pend{background:var(--amber-50);color:var(--amber);}
.badge.rej{background:var(--red-50);color:var(--red);}

.engage{display:flex;gap:15px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-3);}
/* :not(.btn) matters. These two rules are for the bare icon buttons in
   the engage row (like, comment, share), which tint green when active.
   The Konnect button is a real .btn and lives in the same row, so it was
   matching `.engage button.on` at specificity 0,3,1 and beating
   `.btn{color:#fff}` at 0,1,0. Its text went green on the green fill
   that `.btn.on` had just applied: a green button with nothing on it.
   Excluding .btn lets the button keep its own white text. */
.engage button:not(.btn){display:flex;align-items:center;gap:5px;color:var(--ink-3);}
.engage button.on:not(.btn){color:var(--green-deep);}
/* Belt and braces: state the colour on the button itself too, so any
   future container rule cannot silently repeat this. */
.btn.on{color:#fff;}
.btn{border-radius:999px;padding:8px 16px;font-family:var(--display);font-weight:800;font-size:12.5px;background:var(--navy);color:#fff;}
.btn.sm{padding:7px 13px;font-size:12px;}
.btn.on{background:var(--green-deep);}
.btn.gh{background:#fff;color:var(--navy);border:1.5px solid var(--line);}
.btn.amber{background:var(--amber);} .btn.red{background:#fff;color:var(--red);border:1.5px solid #F0CFC4;}
.btn.block{width:100%;display:block;text-align:center;padding:14px;font-size:15px;border-radius:14px;}
.btn.ml{margin-left:auto;}

.date{flex:none;width:50px;text-align:center;background:var(--navy);color:#fff;border-radius:12px;padding:8px 0;}
.date .d{font-family:var(--display);font-weight:900;font-size:18px;line-height:1;} .date .m{font-size:9px;opacity:.8;margin-top:2px;}

/* compose */
.compose{display:flex;gap:9px;align-items:center;}
.compose .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3a2f8f,var(--navy));flex:none;}
.compose .ph{flex:1;color:var(--ink-3);font-size:13px;}
.post .head{display:flex;align-items:center;gap:9px;}
.post .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3a2f8f,var(--navy));flex:none;}
.post .who{font-family:var(--display);font-weight:800;font-size:13px;color:var(--navy);}
.post .src{font-size:11px;color:var(--green-deep);font-weight:700;}
.post .txt{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:8px;}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;font-weight:700;color:var(--ink-2);}
.input{border:1.5px solid var(--line);background:var(--field);border-radius:11px;padding:11px 13px;font-size:14px;color:var(--ink);width:100%;outline:none;}
.input:focus{border-color:var(--navy);background:#fff;}
textarea.input{resize:none;min-height:64px;}

/* notifications / queue rows */
.nrow{display:flex;gap:11px;align-items:center;}
.nrow .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;}
.ic.b{background:var(--navy);color:#fff;} .ic.g{background:var(--green-50);color:var(--green-deep);} .ic.a{background:var(--amber-50);color:var(--amber);} .ic.r{background:var(--red-50);color:var(--red);}
.nrow .c{flex:1;min-width:0;} .nrow .c b{font-family:var(--display);font-weight:800;color:var(--navy);font-size:13px;}
.nrow .c p{font-size:12px;color:var(--ink-2);margin-top:1px;} .nrow .tm{font-size:10.5px;color:var(--ink-3);font-weight:600;flex:none;}
.kdate{font-family:var(--display);font-weight:800;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;}
.empty{text-align:center;color:var(--ink-3);font-size:13px;padding:30px 16px;}
.empty .big{font-size:34px;margin-bottom:8px;}

/* stat tiles (operator) */
.stats{display:flex;gap:9px;}
.stat{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:13px;text-align:center;}
.stat .n{font-family:var(--display);font-weight:900;font-size:24px;color:var(--navy);} .stat .l{font-size:10px;color:var(--ink-3);font-weight:700;margin-top:2px;}

/* profile */
.phero{background:linear-gradient(150deg,var(--navy),var(--navy-700));margin:-14px -18px 0;padding:26px 22px;color:#fff;display:flex;align-items:center;gap:14px;}
.phero .av{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:24px;border:2px solid rgba(255,255,255,.3);}
.phero .nm{font-family:var(--display);font-weight:900;font-size:20px;color:#fff;}
.phero .vf{display:inline-flex;align-items:center;gap:4px;background:var(--green);color:var(--navy);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;margin-top:5px;}
.prow{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);font-weight:600;}
.toggle{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:.2s;flex:none;}
.toggle.on{background:var(--green-deep);} .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3);} .toggle.on::after{left:20px;}

/* bottom nav */
.tabbar{flex:none;display:flex;background:var(--paper);border-top:1px solid var(--line);padding:7px 6px 20px;}
.tabbar .nav{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;color:var(--ink-3);position:relative;}
.tabbar .nav.on{color:var(--navy);} .tabbar .nav svg{width:23px;height:23px;} .tabbar .nav span{font-family:var(--display);font-weight:800;font-size:10px;}
.tabbar .nav .nd{position:absolute;top:2px;right:calc(50% - 18px);min-width:15px;height:15px;border-radius:999px;background:var(--green-deep);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;border:1.5px solid #fff;padding:0 3px;}

/* toast + sheet */
.toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;border-radius:999px;padding:11px 20px;font-size:13px;font-weight:700;font-family:var(--display);opacity:0;pointer-events:none;transition:all .3s;z-index:50;white-space:nowrap;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.back{position:absolute;inset:0;background:rgba(13,11,30,.5);opacity:0;pointer-events:none;transition:.25s;z-index:40;}
.back.on{opacity:1;pointer-events:auto;}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:24px 24px 42px 42px;padding:22px 20px 28px;transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.25,1);z-index:41;max-height:86%;overflow-y:auto;}
.sheet.on{transform:translateY(0);} .sheet::-webkit-scrollbar{width:0;}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px;}
.sheet .ic{width:60px;height:60px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;margin:0 auto 12px;}
.sheet h3{font-family:var(--display);font-weight:900;font-size:20px;color:var(--navy);text-align:center;}
.sheet .p{font-size:13.5px;color:var(--ink-2);text-align:center;margin-top:8px;line-height:1.5;}
.dcover{height:120px;border-radius:16px;display:grid;place-items:center;color:#fff;font-family:"Curse Casual",var(--display);font-size:54px;background:linear-gradient(140deg,var(--navy),#3a2f8f 70%,var(--green-deep));}
.review{background:var(--field);border-radius:12px;padding:11px;} .review .who{font-family:var(--display);font-weight:800;font-size:12.5px;color:var(--navy);} .review p{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.4;}
.starpick{display:flex;gap:6px;justify-content:center;font-size:26px;color:var(--line);} .starpick .s.on{color:var(--green);}