/* ===== SolaimanLipi (change path) ===== */
@font-face{
  font-family:"SolaimanLipi";
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ===== THEME TOKENS ===== */
:root{
  --accent:#F0B90B;
  --accent2:#0ECB81;
  --danger:#F6465D;

  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --text:#0B0E11;
  --muted:#6B7280;
  --line:#E6E8EC;

  --shadow: 0 14px 44px rgba(0,0,0,.10);
  --shadow2: 0 26px 96px rgba(0,0,0,.18);

  --kbd:0px;
  --safeB: env(safe-area-inset-bottom, 0px);
  --safeT: env(safe-area-inset-top, 0px);
}
html.dark{
  --bg:#0B0E11;
  --surface:#0E141B;
  --text:#EAECEF;
  --muted:#B7BDC6;
  --line:#1F2731;

  --shadow: 0 18px 84px rgba(0,0,0,.62);
  --shadow2: 0 32px 160px rgba(0,0,0,.75);
}

/* Smaller global typography */
html{ font-size: 12.2px; }
@media (max-width: 420px){ html{ font-size: 11.9px; } }

html[lang="en"] body{ font-family:Inter,system-ui,sans-serif; }
html[lang="bn"] body{ font-family:"SolaimanLipi","Noto Sans Bengali",Inter,system-ui,sans-serif; }

/* ===== Background (UPDATED: remove greenish cast, add premium linear gradient) ===== */
body{
  margin:0; color:var(--text);
  background:var(--bg);
}
html:not(.dark) body{
  background:
  linear-gradient(180deg, rgba(99,102,241,.08), rgba(255,255,255,0) 40%),
  radial-gradient(1100px 480px at 15% -10%, rgba(240,185,11,.14), transparent 60%),
  radial-gradient(980px 420px at 90% 8%, rgba(59,130,246,.10), transparent 60%),
  radial-gradient(820px 360px at 50% 120%, rgba(240,185,11,.08), transparent 60%),
  var(--bg);
}

.wrap{ max-width:660px; margin:0 auto; padding: 0 10px calc(92px + var(--safeB)); }

/* ===== Header ===== */
.topbar{
  position:sticky; top:0; z-index:70;
  padding-top: var(--safeT);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(16px);
  background: rgba(14,20,27,.72);
}
html:not(.dark) .topbar{ background: rgba(255,255,255,.92); }

.topinner{
  max-width:660px; margin:0 auto; padding: 8px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.logo{
  width:34px; height:34px; border-radius:14px;
  display:grid; place-items:center;
  background:
  radial-gradient(16px 16px at 30% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
  rgba(240,185,11,.06);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
  flex:0 0 auto;
}
.brandTitle{ font-weight:950; font-size: 13px; line-height:1.05; }
.brandSub{ color:var(--muted); font-weight:900; font-size: 10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== Buttons ===== */
.btn{
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 950;
  border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height: 38px;
  -webkit-tap-highlight-color: transparent;
  transition: .16s ease;
  user-select:none;
}
.btn:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); filter: brightness(.98); }
.btnIcon{ width:38px; height:38px; padding:0; border-radius:14px; }
.btnSoft{ background: rgba(255,255,255,.02); }
html:not(.dark) .btnSoft{ background: rgba(0,0,0,.03); }

.btnAccent{
  background: var(--accent);
  color:#0B0E11;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.btnSm{
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 10px;
  font-size: 11px;
  gap:6px;
}
.btnSm svg{ width:14px; height:14px; }

/* Header CTA responsive */
.cta{ padding: 8px 10px; min-height:38px; }
.ctaTxt{ display:inline; }
@media (max-width: 430px){
  .cta{ width:38px; height:38px; padding:0; border-radius:14px; }
  .ctaTxt{ display:none; }
}

/* ===== Panel ===== */
.section{
  margin-top: 10px;
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.015);
}
html:not(.dark) .section{ background: rgba(0,0,0,.02); }

.headRow{
  padding: 10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.title{ font-weight: 950; font-size: 13px; display:flex; align-items:center; gap:10px; }
.sub{ color: var(--muted); font-weight: 900; font-size: 11px; margin-top:3px; }

/* ===== NEW: Scroll bar above ticker (dismissible; refresh => shows again) ===== */
.scrollBar{
  border-bottom:1px solid var(--line);
  padding: 8px 10px;
  display:flex; align-items:center; gap:10px;
  background:
  linear-gradient(90deg, rgb(20 24 30), #14171e));
}
html:not(.dark) .scrollBar{
  background: linear-gradient(90deg, rgba(59,130,246,.10), rgba(240,185,11,.10));
}
/* ✅ পরিবর্তন: auto থেকে hidden (ticker viewport) */
.scrollTrack{
  flex:1;
  overflow: hidden;                 /* <-- auto বাদ */
  -webkit-overflow-scrolling: auto; /* touch scroll লাগবে না */
  border:1px solid #29333f;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgb(57 76 111 / 28%);
  position: relative;
  white-space: nowrap;
}
html:not(.dark) .scrollTrack{ background: rgba(0,0,0,.03); }

/* ✅ পরিবর্তন: display:flex থাকলেও হবে, তবে ticker এর জন্য inline-flex + animation */
.scrollRow{
  display: inline-flex;             /* <-- inline-flex recommended */
  gap:16px;
  align-items:center;
  width:max-content;
  white-space:nowrap;
  font-weight: 950;
  font-size: 11px;
  color: var(--muted);

  will-change: transform;
  animation: tickerMove var(--tickerDur, 18s) linear infinite;
}

/* Hover করলে pause (ঐচ্ছিক) */
.scrollTrack:hover .scrollRow{
  animation-play-state: paused;
}

.scrollRow b{ color: var(--text); }

.scrollPill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(0,0,0,0);
}
.scrollDot{
  width:7px; height:7px; border-radius:999px;
  background: rgba(79,140,255,.85);
}

/* ✅ Pure CSS ticker */
@keyframes tickerMove{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
/* ===== Ticker / Welcome bar (NOT removable now) ===== */
.tickerWrap{
  border-bottom:1px solid var(--line);
  padding: 8px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:
  linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}
html:not(.dark) .tickerWrap{
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
}
.welcomeLeft{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.welcomePill{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.02);
  font-weight: 950;
  font-size: 11px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 420px;
}
html:not(.dark) .welcomePill{ background: rgba(0,0,0,.03); }

.statusBadge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding: 7px 10px;
  font-weight: 950;
  font-size: 11px;
  white-space:nowrap;
  background: rgba(255,255,255,.02);
  color: var(--muted);
}
html:not(.dark) .statusBadge{ background: rgba(0,0,0,.03); }

.sDot{ width:7px; height:7px; border-radius:999px; background: var(--danger); }
.sDot.pending{ background: var(--accent); }
.sDot.ok{ background: var(--accent2); }

/* Rows */
.row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px;
  border-bottom:1px solid var(--line);
}
.row:last-child{ border-bottom:0; }
.k{ color: var(--muted); font-size: 11px; font-weight: 900; }
.v{ color: var(--text); font-size: 12px; font-weight: 950; }
.big{ font-size: 18px; font-weight: 950; letter-spacing:.2px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding: 6px 9px;
  background: rgba(255,255,255,.02);
  font-weight: 950;
  font-size: 11px;
  color: var(--muted);
  white-space:nowrap;
}
html:not(.dark) .pill{ background: rgba(0,0,0,.03); }
.dot{ width:7px; height:7px; border-radius:999px; background: var(--accent); }

/* ===== Quick Actions (6 per row) ===== */
.qGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:8px;
  padding: 10px;
  border-bottom:1px solid var(--line);
}
@media (max-width: 560px){ .qGrid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 360px){ .qGrid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }

.qBtn{
  position:relative;
  border:1px solid var(--line);
  background:
  linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0)),
  radial-gradient(220px 120px at 30% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, rgba(0,0,0,0) 9px, rgba(0,0,0,0) 10px);
  border-radius: 14px;
  padding: 10px 8px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition:.16s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  min-height: 74px;
  overflow:hidden;
  isolation:isolate;
}
html:not(.dark) .qBtn{
  background:
  linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0)),
  radial-gradient(220px 120px at 30% 10%, rgba(240,185,11,.10), transparent 60%),
  repeating-linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 11px);
}
.qBtn:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateY(-1px); }
.qBtn:active{ transform: translateY(0); }

.qIcon{
  width:38px; height:38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background:
  radial-gradient(18px 18px at 30% 30%, rgba(240,185,11,.30), transparent 60%),
  linear-gradient(180deg, rgba(240,185,11,.10), rgba(0,0,0,0));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  clip-path: polygon(12% 0%, 88% 0%, 100% 22%, 100% 78%, 88% 100%, 12% 100%, 0% 78%, 0% 22%);
}
html:not(.dark) .qIcon{ box-shadow: 0 10px 22px rgba(0,0,0,.08); }
.qLbl {
  font-weight: 700;
  font-size: 8px;
  line-height: 1.1;
  color: var(--text);
}
/* See More expands BELOW */
.seeMoreRow{ padding: 10px; border-bottom:1px solid var(--line); display:flex; justify-content:center; }
.moreWrap{ padding: 10px 10px; border-bottom:1px solid var(--line); display:none; }
.moreWrap.show{ display:block; }
.moreGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 560px){ .moreGrid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 360px){ .moreGrid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }

/* Segmented */
.segLabelRow{ padding: 10px; border-bottom:1px solid var(--line); }
.seg{
  margin-top: 8px;
  display:flex; gap:6px;
  border:1px solid var(--line);
  border-radius: 14px;
  padding:5px;
  background: rgba(255,255,255,.02);
}
html:not(.dark) .seg{ background: rgba(0,0,0,.03); }
.seg button{
  flex:1;
  border-radius: 12px;
  padding: 8px 9px;
  font-weight: 950;
  color: var(--muted);
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
  transition:.16s ease;
  -webkit-tap-highlight-color: transparent;
  font-size: 12px;
}
.seg .active{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}

/* Company list */
.companyRow{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding: 10px;
  border-bottom:1px solid var(--line);
}
.companyRow:last-child{ border-bottom:0; }
.cNameWrap{ display:flex; align-items:center; gap:8px; min-width:0; }
.cName{ font-weight: 950; font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cMeta{ color: var(--muted); font-weight: 900; font-size: 11px; margin-top:3px; }
.cBadge{
  border:1px solid color-mix(in srgb, var(--accent2) 40%, transparent);
  background: rgba(14,203,129,.10);
  color: var(--accent2);
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 950;
  font-size: 10px;
  white-space:nowrap;
  flex:0 0 auto;
}
.cBadge.prem{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: rgba(240,185,11,.12);
  color: var(--accent);
}

/* Tables */
.tableWrap{ padding: 10px; overflow:auto; }
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border:0px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
html:not(.dark) table{ background: rgba(0,0,0,.02); }
th, td{
  padding: 10px 9px;
  font-weight: 900;
  font-size: 11px;
  border-bottom:1px solid var(--line);
  text-align:left;
  white-space:nowrap;
  vertical-align:top;
}
th{ color: var(--muted); background: rgba(255,255,255,.02); }
html:not(.dark) th{ background: rgba(0,0,0,.03); }
tr:last-child td{ border-bottom:0; }

.txIcon{
  width:26px; height:26px; border-radius: 12px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--accent);
}
.txRow{ display:flex; align-items:flex-start; gap:9px; }
.txType{ font-weight: 950; }
.ok{ color: var(--accent2); }
.pending{ color: var(--accent); }
.fail{ color: var(--danger); }

/* Notice */
.notice{
  border-top:1px solid var(--line);
  padding: 10px;
  color: var(--muted);
  font-weight: 900;
  font-size: 11px;
  background: rgba(255,255,255,.02);
}
html:not(.dark) .notice{ background: rgba(0,0,0,.02); }

/* Loader */
.loaderWrap{
  position: fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  z-index:9999;
  background:
  radial-gradient(1200px 520px at 10% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
  radial-gradient(900px 380px at 90% 10%, rgba(79,140,255,.18), transparent 55%),
  rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
}
html:not(.dark) .loaderWrap{ background: rgba(255,255,255,.78); }
.loaderBox{
  width:min(380px, 92vw);
  border-radius: 18px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:
  linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0)),
  rgba(14,20,27,.86);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
html:not(.dark) .loaderBox{ background: rgba(255,255,255,.94); }
.bar{ height:3px; background: rgba(240,185,11,.14); overflow:hidden; }
.bar i{
  display:block; height:100%; width:55%;
  background: linear-gradient(90deg, rgba(0,0,0,0), var(--accent), rgba(79,140,255,.75), var(--accent), rgba(0,0,0,0));
  animation: indeterminate .85s linear infinite;
}
@keyframes indeterminate{ 0%{ transform: translateX(-60%) } 100%{ transform: translateX(160%) } }
.orb{
  width:88px; height:88px; border-radius:999px; position:relative;
  margin: 16px auto 8px;
  background:
  radial-gradient(28px 28px at 30% 30%, rgba(240,185,11,.55), rgba(240,185,11,0) 60%),
  radial-gradient(30px 30px at 70% 70%, rgba(79,140,255,.42), rgba(79,140,255,0) 62%),
  rgba(255,255,255,.03);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 28px 100px rgba(0,0,0,.38);
  overflow:hidden;
}
.orb:before{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 0deg, rgba(240,185,11,.0), rgba(240,185,11,.55), rgba(79,140,255,.38), rgba(240,185,11,.0));
  animation: spin 1.1s linear infinite;
}
.orb:after{
  content:"";
  position:absolute; inset:10px;
  border-radius:999px;
  background: rgba(14,20,27,.65);
  border:1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
@keyframes spin{ to{ transform: rotate(360deg);} }
.orbDot{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.orbDot i{
  width:14px; height:14px; border-radius:6px;
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(240,185,11,.12), 0 0 34px rgba(240,185,11,.20);
}

/* Bottom Nav */
.bottomNav{
  position: fixed; left:0; right:0;
  bottom: calc(var(--safeB));
  z-index:60;
  border-top:1px solid var(--line);
  background: rgba(14,20,27,.84);
  backdrop-filter: blur(12px);
}
html:not(.dark) .bottomNav{ background: rgba(255,255,255,.92); }
.bottomInner{
  max-width:660px; margin:0 auto;
  padding: 8px 10px;
  display:flex; justify-content:space-between; gap:8px;
}
.bItem{
  flex:1;
  border:1px solid transparent;
  border-radius: 14px;
  padding: 8px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color: var(--muted);
  font-weight: 950;
  font-size: 10.5px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition:.16s ease;
}
.bItem.active{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bIcon{ width:18px; height:18px; display:block; }

/* Shared Sheet system */
.sheetBackdrop{
  position:fixed; inset:0; display:none; z-index:140;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.sheet{
  position:fixed; left:0; right:0;
  bottom: calc(var(--kbd) + var(--safeB));
  z-index:150;
  transform: translateY(120%);
  transition: .28s cubic-bezier(.2,.8,.2,1);
  padding: 0 10px;
}
.sheet.open{ transform: translateY(0); }
.sheetBackdrop.open{ display:block; }

.sheetInner{
  max-width:660px; margin:0 auto;
  border:1px solid var(--line);
  border-bottom:0;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  background: rgba(14,20,27,.92);
  box-shadow: var(--shadow2);
  overflow:hidden;
  max-height: 90vh;
  display:flex; flex-direction:column;
}
html:not(.dark) .sheetInner{ background: rgba(255,255,255,.96); }

.sheetHead{
  padding: 10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.sheetBody {
  padding: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 500px;
}
.sheetFooter{
  padding: 10px;
  border-top:1px solid var(--line);
  background: rgba(14,20,27,.92);
  position: sticky; bottom: 0;
}
html:not(.dark) .sheetFooter{ background: rgba(255,255,255,.96); }

.sheetGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 420px){ .sheetGrid{ grid-template-columns: 1fr; } }

.hintBox{
  margin-top:8px;
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 9px;
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-weight: 900;
  font-size: 11px;
}
html:not(.dark) .hintBox{ background: rgba(0,0,0,.03); }

.input{
  width:100%;
  border-radius:14px;
  padding:10px 12px;
  font-weight:950;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  outline:none;
}
textarea.input{ resize: vertical; }
.hr{ height:1px; background:var(--line); margin:10px 0; }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 7px 5px;
  background: rgba(255,255,255,.02);
  font-weight: 950;
  font-size: 11px;
  color: var(--muted);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition:.16s ease;
}
html:not(.dark) .tag{ background: rgba(0,0,0,.03); }
.tag.active{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.miniNote{ color: var(--muted); font-weight: 900; font-size: 11px; }

.fileBox{
  border:1px dashed color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.02);
}
html:not(.dark) .fileBox{ background: rgba(0,0,0,.02); }

/* ===== Newsfeed ===== */
.post{
  border-bottom:1px solid var(--line);
  padding: 10px;
}
.post:last-child{ border-bottom:0; }
.postHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.avatar{
  width:34px; height:34px; border-radius:14px;
  border:1px solid var(--line);
  background:
  radial-gradient(16px 16px at 30% 30%, rgba(240,185,11,.25), transparent 60%),
  rgba(255,255,255,.02);
  display:grid; place-items:center;
  color: var(--accent);
  font-weight: 950;
}
.pMeta{ color: var(--muted); font-weight: 900; font-size: 11px; margin-top:2px; }
.pText{ margin-top:8px; font-weight: 900; font-size: 12px; line-height:1.55; white-space:pre-wrap; }
.mediaGrid{
  margin-top:8px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 420px){ .mediaGrid{ grid-template-columns: 1fr; } }
.mediaBox{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.mediaBox img, .mediaBox video{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  background:#000;
}
.mediaBox audio{
  width:100%;
  display:block;
  padding: 10px;
}
.actionsRow{
  margin-top:10px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.commentBox{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
html:not(.dark) .commentBox{ background: rgba(0,0,0,.02); }
.commentHead{
  padding: 8px 10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  color: var(--muted);
  font-weight: 950;
  font-size: 11px;
}
.commentList{ padding: 10px; display:flex; flex-direction:column; gap:10px; }
.cItem {
  display: flex;
  gap: 8px;
  margin-bottom: 5px;
}
.cBody{
  flex:1;
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
}
html:not(.dark) .cBody{ background: rgba(0,0,0,.02); }
.cTop{ display:flex; justify-content:space-between; gap:8px; }
.cName{ font-weight:950; font-size: 11.5px; }
.cTime{ color: var(--muted); font-weight: 900; font-size: 10.5px; white-space:nowrap; }
.cText{ margin-top:4px; font-weight: 900; font-size: 11.5px; line-height:1.5; white-space:pre-wrap; }
.cTools{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
.cReply{ margin-left: 34px; margin-top: 8px; display:none; }

.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + var(--safeB));
  z-index: 200;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: 11px;
  display:none;
  backdrop-filter: blur(12px);
  max-width: 92vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/*html:not(.dark) .toast{ background: rgba(255,255,255,.94); }*/