/* SalesDesk in-app modules: Contests tab + Create-a-login cards. Uses the Ocean/skin tokens
   (--oc-*) with fallbacks so it still reads correctly on the Original scheme. */
.sdx {
  --x-bg: var(--oc-bg, #121110); --x-sf: var(--oc-sf, #1B1A18); --x-sf2: var(--oc-sf-2, #242220); --x-sf3: var(--oc-sf-3, #2F2D2A);
  --x-line: var(--oc-line, #2F2D2A); --x-line2: var(--oc-line-2, #3A3835);
  --x-ink: var(--oc-ink-1, #F4F3F1); --x-ink2: var(--oc-ink-2, #B3AFAB); --x-ink3: var(--oc-ink-3, #8B8782);
  --x-ac: var(--oc-ac, #2DD4BF); --x-ac-on: var(--oc-ac-on, #04211D); --x-ac-deep: var(--oc-ac-deep, #5EEAD4); --x-ac-soft: var(--oc-ac-soft, #0C2F33);
  --x-gold: #F5B83D; --x-shadow: var(--oc-shadow, 0 8px 28px rgba(0,0,0,.35));
  color: var(--x-ink); font-family: var(--sd-sans, -apple-system, "Inter", system-ui, sans-serif);
}
html:not([data-kf-scheme="ocean"])[data-kf-theme="light"] .sdx {
  --x-bg: #F6F6F4; --x-sf: #FFFFFF; --x-sf2: #F0F0ED; --x-sf3: #E7E7E2; --x-line: #E7E7E2; --x-line2: #D8D7D2;
  --x-ink: #2E2B2B; --x-ink2: #454040; --x-ink3: #77716F; --x-ac: #0F766E; --x-ac-on: #fff; --x-ac-deep: #0B5F58; --x-ac-soft: #E0F2F0;
  --x-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06);
}
html[data-kf-theme="light"] .sdx { --x-gold: #B7791F; }

.sdx button { font-family: inherit; cursor: pointer; }   /* family only: `font: inherit` would override each button's own size */
.sdx .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 11px; padding: 9px 14px; font-weight: 600; font-size: 14px;
  border: 0.5px solid var(--x-line2); background: var(--x-sf); color: var(--x-ink); transition: background-color .18s, border-color .18s, transform .12s; }
.sdx .btn:hover { border-color: var(--x-ac); }
.sdx .btn:active { transform: scale(.98); }
.sdx .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--x-ac) 86%, #fff), var(--x-ac)); color: var(--x-ac-on); border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px -10px var(--x-ac); }
.sdx .btn svg { width: 16px; height: 16px; }
.sdx select, .sdx input[type=text], .sdx input[type=email], .sdx input[type=date], .sdx input[type=password] {
  background: var(--x-sf2); color: var(--x-ink); border: 0.5px solid var(--x-line2); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; }
.sdx select:focus, .sdx input:focus { outline: none; border-color: var(--x-ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--x-ac) 22%, transparent); }

/* ── Contests panel ── */
#panel-contests.active { display: block; }
.sdc { max-width: 1180px; margin: 0 auto; padding: 8px 4px 48px; }
.sdc-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 22px; }
.sdc-head h1 { margin: 0; font-size: 30px; letter-spacing: -0.025em; font-weight: 700; }
.sdc-head p { margin: 4px 0 0; color: var(--x-ink3); font-size: 14px; }
.sdc-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sdc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sdc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 0.5px solid var(--x-line2);
  background: var(--x-sf); color: var(--x-ink2); font-size: 13.5px; font-weight: 600; transition: all .18s; }
.sdc-tab:hover { color: var(--x-ink); }
.sdc-tab.on { background: var(--x-ac-soft); color: var(--x-ink); border-color: color-mix(in srgb, var(--x-ac) 45%, transparent); }
.sdc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--x-ink3); }
.sdc-dot.live { background: #30D158; box-shadow: 0 0 0 3px rgba(48,209,88,.18); }
.sdc-dot.soon { background: var(--x-gold); }
.sdc-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 900px) { .sdc-hero { grid-template-columns: 1fr; } }
.sdc-card { background: var(--x-sf); border: 0.5px solid var(--x-line); border-radius: 18px; box-shadow: var(--x-shadow); padding: 22px 24px; }
.sdc-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.sdc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sdc-chip { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; background: var(--x-sf2); color: var(--x-ink2); border: 0.5px solid var(--x-line); }
.sdc-chip.prize { color: var(--x-gold); border-color: color-mix(in srgb, var(--x-gold) 40%, transparent); background: color-mix(in srgb, var(--x-gold) 10%, transparent); }
.sdc-time { font-size: 13px; color: var(--x-ink3); display: flex; justify-content: space-between; margin-bottom: 8px; }
.sdc-track { height: 8px; border-radius: 999px; background: var(--x-sf3); overflow: hidden; }
.sdc-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--x-ac), #38BDF8); }
.sdc-manage { margin-top: 18px; display: flex; gap: 8px; }
.sdc-leader { display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; }
.sdc-leader::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--x-gold) 22%, transparent), transparent 70%); pointer-events: none; }
.sdc-av { flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04211c; background-size: cover; background-position: center; }
.sdc-leader .sdc-av { width: 84px; height: 84px; font-size: 30px; box-shadow: 0 0 0 3px var(--x-gold), 0 10px 30px color-mix(in srgb, var(--x-gold) 35%, transparent); }
.sdc-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--x-gold); text-transform: uppercase; }
.sdc-leader-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; }
.sdc-leader-val { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sdc-leader-gap { color: var(--x-ink3); font-size: 13.5px; margin-top: 2px; }
.sdc-rows { display: flex; flex-direction: column; gap: 6px; }
.sdc-row { display: grid; grid-template-columns: 36px 40px 1fr minmax(120px, 34%) 110px; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 12px; background: var(--x-sf); border: 0.5px solid var(--x-line); }
.sdc-row.me { border-color: color-mix(in srgb, var(--x-ac) 55%, transparent); background: color-mix(in srgb, var(--x-ac) 6%, var(--x-sf)); }
.sdc-rank { font-weight: 700; color: var(--x-ink3); text-align: center; font-variant-numeric: tabular-nums; }
.sdc-row:nth-child(1) .sdc-rank { color: var(--x-gold); }
.sdc-row .sdc-av { width: 36px; height: 36px; font-size: 13px; }
.sdc-lbl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdc-lbl small { color: var(--x-ink3); font-weight: 500; margin-left: 6px; }
.sdc-you { font-size: 11px; font-weight: 700; color: var(--x-ac-deep); background: var(--x-ac-soft); padding: 2px 7px; border-radius: 999px; margin-left: 8px; }
.sdc-bar { height: 6px; border-radius: 999px; background: var(--x-sf3); overflow: hidden; }
.sdc-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--x-ac), #38BDF8); transition: width .8s cubic-bezier(.22,1,.36,1); }
.sdc-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sdc-val small { display: block; color: var(--x-ink3); font-weight: 500; font-size: 12px; }
@media (max-width: 700px) { .sdc-row { grid-template-columns: 28px 34px 1fr 90px; } .sdc-bar { display: none; } }
.sdc-empty { text-align: center; padding: 56px 20px; color: var(--x-ink2); }
.sdc-empty h2 { margin: 0 0 6px; color: var(--x-ink); letter-spacing: -0.02em; }
.sdc-section { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--x-ink3); margin: 26px 2px 10px; }

/* dialog shared by both modules */
.sdx-dialog { border: 0.5px solid var(--x-line2); border-radius: 20px; padding: 0; width: min(560px, 94vw); background: var(--x-sf); color: var(--x-ink);
  box-shadow: 0 24px 64px rgba(0,0,0,.35); }
.sdx-dialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.sdx-dialog .hd { display: flex; align-items: center; padding: 18px 22px; border-bottom: 0.5px solid var(--x-line); font-weight: 700; font-size: 17px; }
.sdx-dialog .hd button { margin-left: auto; background: none; border: 0; color: var(--x-ink3); font-size: 22px; }
.sdx-dialog .bd { padding: 18px 22px 22px; display: grid; gap: 14px; }

/* ── Create a login card ── */
.sdl-card { margin: 0 auto 22px; max-width: 1180px; background: var(--x-sf); border: 0.5px solid var(--x-line); border-radius: 18px; box-shadow: var(--x-shadow); }
.sdl-hd { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; }
.sdl-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--x-ac-soft); color: var(--x-ac-deep); flex: none; }
.sdl-hd h3 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.sdl-hd p { margin: 2px 0 0; font-size: 13px; color: var(--x-ink3); }
.sdl-hd .chev { margin-left: auto; color: var(--x-ink3); transition: transform .2s; }
.sdl-card.open .sdl-hd .chev { transform: rotate(180deg); }
.sdl-bd { display: none; padding: 0 22px 22px; }
.sdl-card.open .sdl-bd { display: block; }
.sdl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .sdl-grid { grid-template-columns: 1fr; } }
.sdx label.f { display: grid; gap: 6px; font-size: 12.5px; color: var(--x-ink3); font-weight: 600; }
.sdl-pw { display: flex; gap: 8px; } .sdl-pw input { flex: 1; font-variant-numeric: tabular-nums; }
.sdl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.sdl-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--x-ink2); }
.sdl-msg { font-size: 13.5px; min-height: 1.2em; }
.sdl-msg.err { color: #FF6B6B; }
.sdl-done { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--x-ac-soft); border: 0.5px solid color-mix(in srgb, var(--x-ac) 40%, transparent); font-size: 14px; line-height: 1.6; }
.sdl-done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--x-sf); padding: 1px 6px; border-radius: 6px; }

/* ── "Needs attention" bubbles: show the row continues instead of slicing a chip in half ── */
.ss-notifbar { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
               mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.ss-notifbar-items { padding-right: 56px; }
@media (max-width: 1380px) {
  .ss-notifbar-label { display: none; }
  .ss-notif-chip { padding: 6px 11px !important; font-size: 12px !important; gap: 5px !important; }
}