/* ============================================================
   ShareCardLink - Status page (saral, messaging-app jaisi list)
   Apne rang, apne icons - kisi brand ki nakal nahi.
   ============================================================ */
.scl-sp{
  --bg:#f3f5f7;
  --card:#ffffff;
  --tx:#111b21;
  --mut:#667781;
  --line:#e6e9ec;
  --a:#0b7a63;          /* ShareCardLink green */
  --a2:#13a383;
  --ring1:#13a383;
  --ring2:#5ec9a7;
  --ring-old:#c7cdd3;
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  padding-bottom:72px;
}
.scl-sp *{box-sizing:border-box}
.scl-sp [hidden]{display:none!important}
.scl-sp a{color:inherit;text-decoration:none}
.scl-sp img,.scl-sp video{display:block;max-width:100%}
.scl-sp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- top bar ---------- */
.sp-top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:var(--bg);
}
.sp-top h1{margin:0;font-size:22px;font-weight:700;flex:1}
.sp-top-r{display:flex;align-items:center;gap:4px}
.sp-ic{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--tx);background:transparent;border:0;cursor:pointer;
  transition:background .18s;
}
.sp-ic:active{background:rgba(0,0,0,.08)}
.sp-login{
  font-size:14px;font-weight:600;color:#fff;background:var(--a);
  padding:9px 16px;border-radius:999px;
}

/* ---------- list ---------- */
.sp-wrap{max-width:720px;margin:0 auto;padding:0 0 10px}
.sp-lbl{
  margin:18px 0 6px;padding:0 16px;font-size:13px;font-weight:600;
  color:var(--mut);letter-spacing:.01em;
}
.sp-block{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:560px){
  .sp-block{border:1px solid var(--line);border-radius:14px;margin:0 12px;overflow:hidden}
}

.sp-row{
  display:flex;align-items:center;gap:14px;padding:11px 16px;cursor:pointer;
  transition:background .15s;
}
.sp-row + .sp-row{box-shadow:inset 0 1px 0 var(--line)}
.sp-row:active{background:#eef1f3}
.sp-rt{min-width:0;flex:1}
.sp-rt b{display:block;font-size:16px;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-rt span{display:block;font-size:13.5px;color:var(--mut);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-more{background:none;border:0;color:var(--mut);cursor:pointer;padding:6px}

/* ---------- avatar + ring ---------- */
.sp-avwrap{position:relative;width:54px;height:54px;flex:0 0 auto}
.sp-av{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#dfe5e9}
.sp-avwrap.has-ring{padding:3px}
.sp-avwrap.has-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,var(--ring1),var(--ring2),var(--ring1));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
}
.sp-avwrap.has-ring.old::before{background:var(--ring-old)}
.sp-plus{
  position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--a);color:#fff;display:grid;place-items:center;
  border:2.5px solid var(--card);
}
.sp-plus svg{width:13px;height:13px;stroke-width:2.6}

/* ---------- login note ---------- */
.sp-note{padding:20px 16px}
.sp-note b{display:block;font-size:16px;margin-bottom:4px}
.sp-note span{display:block;font-size:14px;color:var(--mut);line-height:1.55}
.sp-note-b{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.sp-btn{
  display:inline-block;background:var(--a);color:#fff;font:600 14px/1 inherit;
  padding:12px 20px;border-radius:999px;border:0;cursor:pointer;
}
.sp-btn-o{background:transparent;color:var(--a);border:1.5px solid var(--a)}

/* ---------- empty ---------- */
.sp-empty{text-align:center;padding:60px 20px;color:var(--mut)}
.sp-empty svg{width:44px;height:44px;margin:0 auto 12px;opacity:.5}
.sp-empty p{margin:0;font-size:14.5px}
.sp-foot{text-align:center;color:#9aa5ad;font-size:12px;padding:26px 0 8px}

/* ---------- camera FAB ---------- */
.sp-fab{
  position:fixed;right:16px;bottom:84px;z-index:40;
  width:58px;height:58px;border-radius:18px;border:0;cursor:pointer;
  background:var(--a);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(11,122,99,.85);
  transition:transform .18s;
}
.sp-fab:active{transform:scale(.93)}
.sp-fab svg{width:26px;height:26px}

/* ---------- bottom nav ---------- */
.sp-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;
  background:var(--card);border-top:1px solid var(--line);
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
}
.sp-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 0;color:var(--mut);font-size:11.5px;font-weight:600;
}
.sp-nav a.on{color:var(--a)}
.sp-nav a.on svg{background:#d8efe8;border-radius:999px;padding:3px 12px;
  width:46px;height:26px;box-sizing:content-box}

/* ---------- sheet ---------- */
.sp-scrim{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.sp-scrim.on{opacity:1;pointer-events:auto}
.sp-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--card);
  border-radius:18px 18px 0 0;padding:8px 16px max(20px,env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  max-width:720px;margin:0 auto;
}
.sp-sheet.on{transform:none}
.sp-grip{width:38px;height:4px;border-radius:99px;background:#d6dbe0;margin:0 auto 12px}
.sp-sheet-h{font-size:16px;font-weight:600;margin:0 0 14px}
.sp-pick{display:flex;gap:26px;padding:4px 0 6px}
.sp-pick-b{
  background:none;border:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:8px;font:600 12.5px/1 inherit;color:var(--tx);
}
.sp-pick-i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff}
.sp-i-cam{background:#e0567a}
.sp-i-gal{background:#7b5ce0}

/* ---------- compose ---------- */
.sp-compose{
  position:fixed;inset:0;z-index:60;background:#000;display:none;
  flex-direction:column;
}
.sp-compose.on{display:flex}
.sp-cmp-top{padding:10px 8px;display:flex}
.sp-ic-w{color:#fff}
.sp-cmp-m{flex:1;display:grid;place-items:center;overflow:hidden;padding:0 8px}
.sp-cmp-m img,.sp-cmp-m video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.sp-cmp-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px max(14px,env(safe-area-inset-bottom));
}
.sp-cmp-bar input{
  flex:1;min-width:0;background:rgba(255,255,255,.14);border:0;outline:none;
  color:#fff;font:15px/1.3 inherit;padding:13px 16px;border-radius:999px;
}
.sp-cmp-bar input::placeholder{color:rgba(255,255,255,.6)}
.sp-cmp-meta{flex:1;color:rgba(255,255,255,.75);font-size:13px}
.sp-send{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;
  background:var(--a2);color:#fff;display:grid;place-items:center;
}
.sp-send svg{width:24px;height:24px;fill:currentColor;stroke:none}
.sp-send:disabled{opacity:.55}
.sp-bar{height:3px;background:rgba(255,255,255,.18)}
.sp-bar i{display:block;height:100%;width:0;background:var(--a2);transition:width .2s}

/* ---------- toast ---------- */
#sp-toast{
  position:fixed;left:50%;bottom:96px;z-index:70;transform:translate(-50%,14px);
  max-width:86vw;padding:11px 18px;border-radius:999px;
  background:#2b3942;color:#fff;font:500 13.5px/1.4 inherit;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
#sp-toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .scl-sp *{transition-duration:.01ms!important;animation:none!important}
}

/* ---------- mere updates (thumbnail + delete) ---------- */
.sp-mine{border-top:1px solid var(--line);background:#fafbfc}
.sp-mrow{display:flex;align-items:center;gap:14px;padding:9px 16px}
.sp-mrow + .sp-mrow{box-shadow:inset 0 1px 0 var(--line)}
.sp-mthumb{
  width:44px;height:54px;flex:0 0 auto;border-radius:8px;overflow:hidden;
  background:#000;cursor:pointer;
}
.sp-mthumb img,.sp-mthumb video{width:100%;height:100%;object-fit:cover}
.sp-mrow .sp-rt b{font-size:14px;font-weight:600}
.sp-mrow .sp-rt span{font-size:12.5px}
.sp-del{
  background:none;border:0;cursor:pointer;color:#b4232b;padding:8px;border-radius:50%;
  transition:background .15s;
}
.sp-del:active{background:rgba(180,35,43,.12)}
.sp-del svg{width:20px;height:20px}