/* ==========================================================================
   CONJO — Design System
   Connect. Collaborate. Grow.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --navy:#0A1E3F;
  --navy-2:#133B6B;
  --navy-3:#071630;
  --gold:#E89B0C;
  --gold-2:#FFBE42;
  --blue:#0A66C2;
  --blue-2:#378FE9;
  --teal:#0D9488;
  --violet:#6D28D9;
  --pink:#DB2777;
  --green:#059669;
  --amber:#D97706;
  --red:#DC2626;

  --bg:#F4F2EE;
  --surface:#FFFFFF;
  --surface-2:#F9FAFB;
  --surface-3:#F3F2EF;
  --text:#191919;
  --text-2:#404040;
  --muted:#666666;
  --line:#E8E8E8;
  --line-2:#DCDCDC;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.15);

  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:14px; --r-xl:20px; --r-full:999px;
  --appbar-h:52px; --tabbar-h:56px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --ff:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#000000;
  --surface:#1B1F23;
  --surface-2:#141618;
  --surface-3:#252830;
  --text:#FFFFFFE6;
  --text-2:#FFFFFFB3;
  --muted:#FFFFFF99;
  --line:#333740;
  --line-2:#3E434D;
  --blue:#70B5F9;
  --green:#4ADE80;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;font-family:var(--ff);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:var(--blue);text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
::-webkit-scrollbar{width:0;height:0}

/* ---------- Desktop stage ---------- */
.desktop-stage{min-height:100dvh;display:flex;justify-content:center;align-items:stretch;overflow-x:hidden}
.stage-info{display:none}
.app{
  position:relative;width:100%;max-width:520px;min-width:0;flex:1 1 auto;background:var(--bg);
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}
.view > *,.wrap,.stack,.card,.post,.job{min-width:0;max-width:100%}
.hscroll,.chips,.seg,.pipe{max-width:100%}
@media(min-width:1000px){
  .desktop-stage{
    gap:48px;padding:24px;align-items:center;
    background:linear-gradient(165deg,#0A1E3F,#133B6B 50%,#071630);
  }
  .stage-info{display:block;max-width:440px;color:#E8EEFB}
  .stage-logo{display:flex;align-items:center;gap:12px;margin-bottom:26px}
  .stage-logo b{display:block;font-size:26px;letter-spacing:-.03em;color:#fff}
  .stage-logo span{font-size:12px;color:#FFBE42;letter-spacing:.06em}
  .stage-info h1{font-size:32px;line-height:1.2;margin-bottom:12px}
  .stage-info p{color:#B0BFD4;font-size:15px;margin-bottom:20px}
  .stage-points li{display:flex;gap:10px;align-items:center;padding:6px 0;font-size:14px;color:#D7E1F4}
  .stage-points i{color:var(--gold);font-style:normal;font-size:10px}
  .stage-foot{margin-top:24px;font-size:12px;color:#7A8EA8;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
  .app{max-width:420px;height:min(900px,93dvh);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}
}

/* ---------- App bar ---------- */
.appbar{
  flex:0 0 auto;padding-top:var(--sat);background:var(--surface);
  border-bottom:1px solid var(--line);z-index:30;position:relative;
}
.appbar.brand{background:linear-gradient(135deg,#1B4D8E 0%,#0A66C2 50%,#2E7BD6 100%);border-bottom-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(10,102,194,.25)}
.appbar-in{height:var(--appbar-h);display:flex;align-items:center;gap:8px;padding:0 12px}
.appbar .logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;letter-spacing:-.03em}
.appbar .logo svg{flex:0 0 auto}
.ab-search{
  flex:1;display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:var(--r-full);
  background:rgba(255,255,255,.2);backdrop-filter:blur(4px);color:rgba(255,255,255,.85);font-size:13px;min-width:0;border:1px solid rgba(255,255,255,.15);
}
.appbar:not(.brand) .ab-search{background:var(--surface-3);color:var(--muted);border:1px solid var(--line);backdrop-filter:none}
.ab-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-btn{width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center;font-size:18px;position:relative;flex:0 0 auto;transition:background .12s}
.ab-btn:hover{background:rgba(255,255,255,.12)}
.appbar.brand .ab-btn{color:#fff}
.ab-btn .dot{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#EF4444;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid rgba(27,77,142,.9);box-shadow:0 1px 4px rgba(239,68,68,.4)}
.appbar:not(.brand) .ab-btn .dot{border-color:var(--surface)}
.ab-avatar{flex:0 0 auto;border-radius:50%;padding:2px;background:rgba(255,255,255,.25);display:grid;place-items:center}
.ab-avatar .av{border:2px solid rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.appbar:not(.brand) .ab-avatar{background:transparent}
.appbar:not(.brand) .ab-avatar .av{border-color:var(--line-2);box-shadow:none}
.ab-title{font-size:16px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-back{font-size:22px;width:34px;height:34px;display:grid;place-items:center;margin-left:-4px}

/* sub bar */
.subbar{flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--line);z-index:20}
.seg{display:flex;overflow-x:auto;gap:0;padding:0 4px}
.seg button{
  flex:0 0 auto;padding:10px 14px;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.seg button.on{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- View ---------- */
.view{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.view.with-tabs{padding-bottom:calc(var(--tabbar-h) + var(--sab) + 12px)}
.wrap{padding:10px}
.stack{display:flex;flex-direction:column;gap:8px}

/* ---------- Tab bar ---------- */
.tabbar{
  flex:0 0 auto;display:flex;background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--sab);height:calc(var(--tabbar-h) + var(--sab));z-index:30;
}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:10px;font-weight:600;position:relative}
.tabbar button .ic{font-size:20px;line-height:1;position:relative}
.tabbar button.on{color:var(--text)}
.tabbar button.on::before{content:"";position:absolute;top:0;width:32px;height:2.5px;border-radius:0 0 2px 2px;background:var(--text)}
.tabbar .badge{position:absolute;top:-3px;right:-8px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--red);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center}
.tabbar .post-cta{width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 4px 12px rgba(10,102,194,.35);margin-bottom:2px}

.fab{
  position:absolute;right:14px;bottom:calc(var(--tabbar-h) + var(--sab) + 14px);z-index:25;
  height:46px;padding:0 18px;border-radius:var(--r-full);background:var(--blue);
  color:#fff;font-weight:700;font-size:13.5px;box-shadow:0 6px 20px rgba(10,102,194,.4);display:flex;align-items:center;gap:7px;
}

/* ---------- Primitives ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.card.flat{box-shadow:none}
.card.pad{overflow:visible}
.pad{padding:14px}
.row{display:flex;align-items:center;gap:8px}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}
.sec-title{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}
.sec-title h3{font-size:15px;font-weight:700}
.sec-title a,.sec-title button{font-size:12px;font-weight:700;color:var(--blue)}
.muted{color:var(--muted)}
.small{font-size:12px}
.xs{font-size:11px}
.b{font-weight:600}
.bb{font-weight:700}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.divider{height:1px;background:var(--line);margin:0}
.spacer{height:8px}
.center{text-align:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;
  border-radius:var(--r-full);font-weight:700;font-size:14px;background:var(--surface-3);color:var(--text);transition:all .12s;
}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(10,102,194,.25)}
.btn.pri:hover{background:#004182}
.btn.gold{background:linear-gradient(135deg,#FFBE42,var(--gold));color:#3A2600;box-shadow:0 2px 8px rgba(232,155,12,.3)}
.btn.dark{background:var(--navy);color:#fff}
.btn.ghost{background:transparent;border:1.5px solid var(--line-2);color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-3)}
.btn.outline-pri{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}
.btn.outline-pri:hover{background:rgba(10,102,194,.06)}
.btn.green{background:var(--green);color:#fff}
.btn.wide{width:100%}
.btn.sm{height:32px;padding:0 12px;font-size:12px}
.btn.xs{height:28px;padding:0 10px;font-size:11px;border-radius:var(--r-full)}
.btn[disabled]{opacity:.5;pointer-events:none}

.chip{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--text-2);font-size:12px;font-weight:600;white-space:nowrap;flex:0 0 auto;
}
.chip.on{background:var(--blue);color:#fff}
.chip.line{background:transparent;border:1px solid var(--line-2)}
.chip.line:hover{background:var(--surface-3)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px}
.chips::-webkit-scrollbar{display:none}

.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-xs);font-size:11px;font-weight:700;background:var(--surface-3);color:var(--text-2)}
.tag.blue{background:rgba(10,102,194,.1);color:var(--blue)}
.tag.green{background:rgba(5,150,105,.1);color:var(--green)}
.tag.gold{background:rgba(232,155,12,.12);color:#A67C00}
.tag.red{background:rgba(220,38,38,.1);color:var(--red)}
.tag.violet{background:rgba(109,40,217,.1);color:var(--violet)}
.tag.teal{background:rgba(13,148,136,.1);color:var(--teal)}
[data-theme="dark"] .tag.green{color:#4ADE80}
[data-theme="dark"] .tag.gold{color:#FFC759}

/* avatars */
.av{border-radius:var(--r-full);display:grid;place-items:center;color:#fff;font-weight:700;flex:0 0 auto;overflow:hidden;background:var(--navy);position:relative}
.av.s{width:32px;height:32px;font-size:12px}
.av.m{width:44px;height:44px;font-size:15px}
.av.l{width:56px;height:56px;font-size:20px}
.av.xl{width:88px;height:88px;font-size:30px;border:3px solid var(--surface)}
.av.sq{border-radius:10px}
.av.sq.l{border-radius:12px}
.verified{color:var(--blue);font-size:12px}
.on-dot{position:absolute;right:1px;bottom:1px;width:10px;height:10px;border-radius:50%;background:#22C55E;border:2px solid var(--surface)}

/* cover art */
.cover{height:88px;position:relative;background:var(--navy)}
.cover.tall{height:120px}
.cover::after{
  content:"";position:absolute;inset:0;opacity:.25;
  background-image:radial-gradient(circle at 12px 12px, rgba(255,255,255,.4) 1.2px, transparent 1.4px);
  background-size:24px 24px;
}
.cover .cv-glow{position:absolute;inset:0;background:radial-gradient(100px 70px at 80% 20%, rgba(255,255,255,.25), transparent 70%)}
.cover .cv-ico{position:absolute;right:12px;bottom:8px;font-size:36px;opacity:.85;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.thumb{height:140px;position:relative;overflow:hidden;display:grid;place-items:center;font-size:42px}
.thumb .t-label{position:absolute;left:12px;bottom:10px;color:#fff;font-weight:700;font-size:12px;text-shadow:0 2px 6px rgba(0,0,0,.5)}

/* progress */
.bar{height:5px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--blue)}
.bar.green i{background:var(--green)}
.bar.gold i{background:var(--gold)}

/* inputs */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:5px}
.input,.select,.textarea{
  width:100%;height:44px;padding:0 12px;border-radius:var(--r-sm);background:var(--surface);
  border:1.5px solid var(--line-2);font-size:14px;outline:none;transition:border-color .15s;
}
.textarea{height:auto;padding:10px 12px;resize:vertical;min-height:96px;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 20px,calc(100% - 11px) 20px;background-size:5px 5px;background-repeat:no-repeat}
.input-ico{position:relative}
.input-ico .input{padding-left:38px}
.input-ico i{position:absolute;left:12px;top:12px;font-style:normal;font-size:16px;color:var(--muted)}
.hint{font-size:11px;color:var(--muted);margin-top:4px}
.switch{width:42px;height:24px;border-radius:18px;background:var(--line-2);position:relative;transition:background .2s;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on{background:var(--green)}
.switch.on::after{transform:translateX(18px)}
.check{width:20px;height:20px;border-radius:5px;border:2px solid var(--line-2);display:grid;place-items:center;font-size:12px;color:transparent;flex:0 0 auto}
.check.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* list rows */
.lrow{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface)}
.lrow + .lrow{border-top:1px solid var(--line)}
.lrow .arw{color:var(--muted);font-size:16px}
.menu-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:var(--surface-3)}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats.g2{grid-template-columns:repeat(2,1fr)}
.stats.g4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--surface);border-radius:var(--r);padding:10px 8px;text-align:center;border:1px solid var(--line)}
.stat b{display:block;font-size:18px;letter-spacing:-.02em;font-weight:700}
.stat span{font-size:10px;color:var(--muted);font-weight:600}

/* ---------- Post card ---------- */
.post{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.post-head{display:flex;gap:10px;padding:12px 16px 6px;align-items:flex-start}
.post-body{padding:0 16px 10px;font-size:14px;white-space:pre-wrap;line-height:1.5}
.post-body .hash{color:var(--blue);font-weight:600}
.post-media{background:var(--surface-3);position:relative}
.post-stats{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;font-size:11px;color:var(--muted)}
.reacts{display:flex;align-items:center}
.reacts span{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:9px;border:2px solid var(--surface);margin-left:-4px}
.reacts span:first-child{margin-left:0}
.post-acts{display:flex;border-top:1px solid var(--line)}
.post-acts button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 0;font-size:12px;font-weight:600;color:var(--muted);transition:background .12s;border-radius:0}
.post-acts button:hover{background:var(--surface-3)}
.post-acts button.on{color:var(--blue)}
.poll-opt{border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:6px;position:relative;overflow:hidden;font-size:13px;font-weight:600}
.poll-opt .fill{position:absolute;inset:0 auto 0 0;background:rgba(10,102,194,.1)}
.poll-opt span{position:relative}
.promoted{font-size:10px;font-weight:700;color:var(--gold);letter-spacing:.04em}

/* comment */
.cmt{display:flex;gap:8px;padding:8px 12px}
.cmt .bubble{background:var(--surface-3);border-radius:4px 12px 12px 12px;padding:8px 12px;flex:1}

/* ---------- Job card ---------- */
.job{background:var(--surface);border-radius:var(--r-lg);padding:14px;position:relative;border:1px solid var(--line)}
.job.urgent{border-left:3px solid var(--red)}
.job-t{font-size:14px;font-weight:700;line-height:1.3}
.job-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted);margin-top:6px}
.job-sal{font-weight:700;color:var(--green);font-size:13px}
[data-theme="dark"] .job-sal{color:#4ADE80}
.job-actions{display:flex;gap:8px;margin-top:10px}
.ribbon{position:absolute;top:12px;right:0;background:linear-gradient(90deg,#FF6A3D,#E02B2B);color:#fff;font-size:10px;font-weight:700;padding:3px 10px 3px 8px;border-radius:6px 0 0 6px}

/* pipeline */
.pipe{display:flex;gap:8px;overflow-x:auto;padding:10px}
.pipe-col{flex:0 0 200px;background:var(--surface-2);border-radius:var(--r);padding:10px;border:1px solid var(--line)}
.pipe-col h4{font-size:12px;margin-bottom:8px;display:flex;justify-content:space-between}

/* timeline */
.tl{position:relative;padding-left:24px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:14px}
.tl-item::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--line-2);border:2px solid var(--surface)}
.tl-item.done::before{background:var(--green)}
.tl-item.now::before{background:var(--blue);box-shadow:0 0 0 3px rgba(10,102,194,.15)}

/* ---------- Sheet / modal ---------- */
.sheet-host{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);animation:fade .2s}
.sheet-panel{
  position:relative;width:100%;max-width:520px;background:var(--surface);
  border-radius:16px 16px 0 0;max-height:85dvh;overflow-y:auto;padding-bottom:calc(14px + var(--sab));
  animation:up .25s cubic-bezier(.2,.8,.25,1);box-shadow:var(--shadow-lg);
}
.sheet-panel::before{content:"";display:block;width:36px;height:4px;border-radius:3px;background:var(--line-2);margin:8px auto 4px}
.sheet-title{padding:8px 16px 10px;font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:1000px){
  .sheet-host{align-items:center}
  .sheet-panel{border-radius:16px;max-width:440px;animation:pop .2s ease}
  @keyframes pop{from{transform:scale(.95);opacity:0}to{transform:none;opacity:1}}
}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 24px);transform:translateX(-50%);z-index:300;
  background:var(--text);color:var(--surface);padding:10px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;
  box-shadow:var(--shadow-lg);animation:up2 .2s ease;max-width:88%;text-align:center;
}
@keyframes up2{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ---------- Auth ---------- */
.auth{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--sat) + 16px) 20px calc(var(--sab) + 20px);background:var(--surface)}
.auth.hero{
  color:#fff;background:
    radial-gradient(500px 300px at 85% 8%, rgba(232,155,12,.2), transparent 60%),
    radial-gradient(500px 350px at 0% 100%, rgba(10,102,194,.3), transparent 60%),
    linear-gradient(165deg,#071630,#0A1E3F 55%,#071630);
}
.auth h2{font-size:24px;line-height:1.25;margin-bottom:6px}
.auth .sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.auth.hero .sub{color:rgba(255,255,255,.7)}
.brand-mark{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.brand-mark b{font-size:28px;letter-spacing:-.04em}
.brand-mark span{display:block;font-size:11px;letter-spacing:.1em;color:var(--gold);font-weight:700}
.role-card{
  display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1.5px solid var(--line);margin-bottom:10px;transition:border-color .15s;
}
.role-card.on{border-color:var(--blue);background:rgba(10,102,194,.05)}
.role-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;color:#fff;flex:0 0 auto}
.otp-row{display:flex;gap:8px;justify-content:space-between;margin:6px 0 16px}
.otp-row input{width:100%;height:52px;text-align:center;font-size:20px;font-weight:700;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface-2)}
.steps{display:flex;gap:5px;margin-bottom:18px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--blue)}
.slides{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center}
.slide-art{height:200px;display:grid;place-items:center;margin-bottom:24px}
.dots{display:flex;gap:6px;justify-content:center;margin:20px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}
.dots i.on{width:20px;border-radius:3px;background:var(--gold)}
/* language selection */
.lang-options{display:flex;flex-direction:column;gap:12px}
.lang-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg);background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.12);text-align:left;color:#fff;transition:all .2s;width:100%}
.lang-card:hover{background:rgba(255,255,255,.12)}
.lang-card.on{border-color:var(--gold);background:rgba(255,190,66,.1);box-shadow:0 0 20px rgba(232,155,12,.15)}
.lang-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:18px;font-weight:800;flex:0 0 auto}
.lang-card.on .lang-icon{background:rgba(255,190,66,.2);color:var(--gold-2)}
.lang-info{flex:1}
.lang-info b{display:block;font-size:16px;font-weight:700}
.lang-info span{font-size:12px;color:rgba(255,255,255,.6)}
.lang-check{opacity:0;color:var(--gold);transition:opacity .2s}
.lang-card.on .lang-check{opacity:1}

.social-row{display:flex;gap:8px}
.social-row button{flex:1;height:44px;border-radius:var(--r-sm);border:1.5px solid var(--line);display:grid;place-items:center;font-size:18px;background:var(--surface-2)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Chat ---------- */
.chat-scroll{padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2)}
.msg{max-width:78%;padding:8px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.msg.in{align-self:flex-start;background:var(--surface);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.msg .t{font-size:10px;opacity:.65;margin-top:2px;text-align:right}
.chat-input{display:flex;align-items:center;gap:8px;padding:8px 10px calc(8px + var(--sab));background:var(--surface);border-top:1px solid var(--line)}
.chat-input .input{height:40px;border-radius:var(--r-full)}
.day-sep{align-self:center;background:var(--surface-3);color:var(--muted);font-size:10px;font-weight:600;padding:3px 10px;border-radius:10px}

/* ---------- LinkedIn-style Feed ---------- */
.feed-wrap{display:flex;flex-direction:column;gap:8px;padding:8px 10px}
.feed-card{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden}

/* stories row */
.stories-row{display:flex;gap:4px;padding:12px;overflow-x:auto;background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line)}
.stories-row::-webkit-scrollbar{display:none}
.story-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;padding:2px}
.story-ring{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:2px;background:var(--line-2)}
.story-ring.active{background:conic-gradient(var(--blue),var(--violet),var(--blue))}
.story-ring .av{border:2px solid var(--surface)}
.story-ring.add{background:var(--surface-3)}
.story-plus{position:absolute;bottom:-1px;right:-1px;width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface)}
.story-name{font-size:10px;color:var(--text-2);font-weight:600;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* composer card */
.composer-card{padding:12px 14px 0}
.composer-top{display:flex;align-items:center;gap:10px}
.composer-input{flex:1;height:38px;padding:0 14px;border-radius:var(--r-full);border:1.5px solid var(--line-2);color:var(--muted);font-size:13px;text-align:left;font-weight:500;transition:background .15s}
.composer-input:hover{background:var(--surface-3)}
.composer-actions{display:flex;border-top:1px solid var(--line);margin-top:10px}
.composer-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 0;font-size:11.5px;font-weight:600;color:var(--text-2)}
.composer-actions button span{display:flex}

/* quick actions strip */
.quick-strip{padding:8px 0}
.quick-scroll{display:flex;gap:6px;padding:0 12px;overflow-x:auto}
.quick-scroll::-webkit-scrollbar{display:none}
.quick-action{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--line);transition:all .15s}
.quick-action:hover{border-color:var(--blue);background:rgba(10,102,194,.04)}
.qa-ic{font-size:16px;line-height:1}
.qa-label{font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}

/* sort indicator */
.feed-sort{display:flex;align-items:center;gap:8px;padding:2px 12px}
.sort-line{flex:1;height:1px;background:var(--line)}
.sort-btn{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.sort-btn b{color:var(--text-2)}

/* suggest / recommendation cards */
.feed-suggest{overflow:visible}
.suggest-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}
.suggest-title{font-size:14px;font-weight:700;color:var(--text)}
.suggest-link{font-size:12px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:2px}

/* job suggest cards in feed */
.job-suggest-card{flex:0 0 190px;padding:12px;background:var(--surface);border-radius:var(--r);border:1px solid var(--line)}
.jsc-head{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.jsc-title{font-size:12.5px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jsc-company{font-size:11px;color:var(--muted);margin-top:2px}
.jsc-meta{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:3px}
.jsc-sal{font-size:12px;font-weight:700;color:var(--green);margin-top:4px}
[data-theme="dark"] .jsc-sal{color:#4ADE80}

/* pro banner */
.pro-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;transition:background .12s}
.pro-banner:hover{background:var(--surface-3)}
.pro-badge{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#D4840A);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;flex:0 0 auto;letter-spacing:-.02em}
.pro-content{flex:1;min-width:0}
.pro-content b{font-size:13.5px;display:block}
.pro-content p{font-size:11.5px;color:var(--muted);margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pro-arrow{color:var(--muted)}

/* trending list */
.trending-list{padding:0 14px 12px}
.trending-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;width:100%;text-align:left;border-top:1px solid var(--line)}
.trending-item:first-child{border-top:0}
.trending-bullet{width:20px;height:20px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--muted);flex:0 0 auto}
.trending-text{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.3}
.trending-meta{font-size:10px;color:var(--muted);display:block;margin-top:1px}

/* profile nudge (dismissable) */
.profile-nudge{position:relative;padding:14px}
.nudge-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;color:var(--muted);z-index:2;transition:background .12s}
.nudge-close:hover{background:var(--line)}
.nudge-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nudge-av .av{border:2px solid var(--blue)}
.nudge-info{min-width:0}
.nudge-info b{display:block;font-size:14px}
.nudge-headline{font-size:11.5px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nudge-progress{margin-bottom:10px}
.nudge-tip{font-size:11px;color:var(--muted);margin-top:5px}

/* location-based search card */
.loc-search-card{padding:12px 14px}
.loc-header{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.loc-icon{color:var(--red);display:flex}
.loc-title{font-size:13.5px;font-weight:700;flex:1}
.loc-change{font-size:11px;color:var(--blue);font-weight:600}
.loc-cities{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.loc-city{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);transition:all .15s}
.loc-city:hover,.loc-city.on{border-color:var(--blue);background:rgba(10,102,194,.04)}
.loc-city-ic{font-size:18px}
.loc-city-name{font-size:11px;font-weight:600;color:var(--text)}
.loc-city-count{font-size:9.5px;color:var(--muted)}
.loc-areas{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.loc-area-label{font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.loc-area-chips{display:flex;gap:5px;overflow-x:auto;flex:1}
.loc-area-chips::-webkit-scrollbar{display:none}

/* location bar on jobs page */
.loc-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:border-color .12s}
.loc-bar:hover{border-color:var(--blue)}
.loc-bar-pin{color:var(--red);display:flex}
.loc-bar-city{font-size:13.5px;font-weight:700}
.loc-bar-area{font-size:12.5px;color:var(--muted);flex:1}
.loc-bar-arrow{color:var(--muted);display:flex}

/* feed end indicator */
.feed-end{display:flex;align-items:center;gap:8px;padding:14px 12px 4px;color:var(--muted);font-size:11px;font-weight:600}
.feed-end-line{flex:1;height:1px;background:var(--line)}

/* feed filter compact */
.feed-filters{background:var(--surface);border-bottom:1px solid var(--line)}
.seg.compact button{padding:8px 12px;font-size:12px}

/* misc */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 12px 12px}
.hscroll::-webkit-scrollbar{display:none}
.hcard{flex:0 0 160px;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.hcard.w200{flex-basis:190px}
.hcard.w150{flex-basis:145px}
.empty{text-align:center;padding:40px 24px;color:var(--muted)}
.empty .e-ic{font-size:44px;margin-bottom:10px}
.banner{border-radius:var(--r-lg);padding:14px;color:#fff;position:relative;overflow:hidden}
.banner h4{font-size:14.5px;margin-bottom:4px}
.banner p{font-size:12px;opacity:.9}
.banner .b-ico{position:absolute;right:-6px;bottom:-10px;font-size:64px;opacity:.18}
.rating{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:12px;color:var(--green)}
.skel{background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.fade-in{animation:fi .2s ease}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}