/* ============================================================
   1) FULL-BLEED EDGES — kill the white strip at the bottom.
   ------------------------------------------------------------
   The white band behind the gesture pill was the system nav-bar
   area showing through. Two things caused it:
     • <html> had NO background of its own. Only <body> was dark,
       and the area under the system bars is painted from the ROOT
       element — so it fell back to the browser's default white.
     • Fixed overlays use inset:0, which covers the VISUAL viewport
       only; with viewport-fit=cover the inset region under the
       nav bar is outside that, so it stayed unpainted.
   Painting html itself + letting overlays extend past the safe
   area fixes both, and theme-color (in <head>) tints the bars to
   match so there is no visible seam.
   ============================================================ */
html{
  background:#0a0a12;
  /* Stop the rubber-band overscroll revealing white above/below. */
  overscroll-behavior-y:none;
  background-color:#0a0a12;
}
body{
  background:#0a0a12;
  min-height:100vh;
  min-height:100dvh;   /* dvh tracks the real viewport as browser UI hides */
  overscroll-behavior-y:none;
}
/* Full-screen overlays must paint all the way into the safe-area inset,
   otherwise the strip under them stays the root colour with a visible edge. */
.modal-backdrop,
.auth-overlay,
.login-overlay,
.landing-page,
#tcVerifyOverlay,
#tcReauthOverlay,
#bootSplash{
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* …but the CONTENT inside must not slide under the gesture bar, or the
   action buttons become untappable. Keep the last row clear of it. */
@media (max-width:900px){
  .modal-backdrop.open > .modal,
  .modal-backdrop.open > .day-modal,
  .modal-backdrop.open > .alert-modal,
  .modal-backdrop.open > .clr-modal{
    margin-bottom:max(env(safe-area-inset-bottom,0px),8px);
  }
}

/* ============================================================
   2) TEXT-SELECTION LOCK — no more Copy / Translate / Select all.
   ------------------------------------------------------------
   On Android a scroll gesture that starts on a text node is often
   interpreted as a long-press-drag, which pops the system text
   selection toolbar mid-scroll (the exact bar in the report).
   Turning selection off for UI text removes the trigger entirely.

   Deliberately NOT applied to fields the user types in, or to the
   places where copying real content is the point — those opt back
   in below, so nothing the user actually needs to select is lost.
   Add class="allow-select" to any element that should stay
   selectable in future.
   ============================================================ */
body,
.modal, .modal-backdrop, .day-modal, .alert-modal, .clr-modal,
.page, .sidebar, .main, .section-card, .stat-card, .hero-banner,
#preTradePlanModal{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  /* Suppress the long-press callout/magnifier that precedes the toolbar. */
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* Typing surfaces MUST stay fully selectable and editable — locking these
   would break entering a trade reason, a lesson, a password, everything. */
input, textarea, select, option,
[contenteditable="true"], [contenteditable=""],
.allow-select, .allow-select *{
  -webkit-user-select:text !important;
  -moz-user-select:text !important;
  -ms-user-select:text !important;
  user-select:text !important;
  -webkit-touch-callout:default !important;
}
/* Desktop has no accidental-long-press problem and copying from tables /
   notes is genuinely useful there, so restore normal selection on
   pointer-precise devices. The lock stays on touch screens only. */
@media (hover:hover) and (pointer:fine){
  body, .modal, .modal-backdrop, .day-modal, .alert-modal, .clr-modal,
  .page, .sidebar, .main, .section-card, .stat-card, .hero-banner,
  #preTradePlanModal{
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
  }
}


/* ============================================================
   3D TICKABLES — every control you tick becomes a physical key.
   ------------------------------------------------------------
   Model (the same one for all of them, so they feel like one
   family of controls):
     • UNTICKED  = raised. A hard offset shadow underneath acts as
                   the key's "side wall", plus a soft ambient drop
                   and a 1px top highlight for the lit edge.
     • :active   = travelling. The key moves down by exactly the
                   wall height, and the wall shrinks to match, so
                   it reads as the key physically bottoming out.
     • TICKED    = pressed in. Stays down, wall almost gone, and an
                   INSET shadow replaces the outer one — light now
                   falls into the recess instead of off the edge.
   Travel distance and wall height are the same number (--tc3d-h),
   which is what keeps the illusion consistent.
   ============================================================ */
:root{
  --tc3d-h: 4px;                              /* wall height = travel */
  --tc3d-h-sm: 3px;                           /* for the small boxes */
  --tc3d-wall: #04040a;                       /* neutral dark wall */
  --tc3d-wall-green: #0a3f22;                 /* wall under a ticked/green control */
  --tc3d-wall-purple: #2f1f6b;                /* wall under a selected/purple control */
  --tc3d-amb: 0 7px 14px rgba(0,0,0,.5);      /* ambient drop */
  --tc3d-amb-down: 0 2px 5px rgba(0,0,0,.55);
  --tc3d-lip: inset 0 1px 0 rgba(255,255,255,.07);   /* lit top edge */
  --tc3d-ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- shared motion ---------- */
.checklist-item,
.daily-todo-item,
.ptp-loss-option,
.trader-commitment-row,
.checklist-box,
.daily-todo-cb,
.azhkar-check-circle{
  transition:
    transform .11s var(--tc3d-ease),
    box-shadow .11s var(--tc3d-ease),
    background .18s ease,
    border-color .18s ease !important;
  transform: translateZ(0);       /* own layer — keeps the travel crisp */
}

/* ============ 1. CHECKLIST ROWS ============ */
.checklist-item{
  box-shadow: 0 var(--tc3d-h) 0 0 var(--tc3d-wall), var(--tc3d-amb), var(--tc3d-lip) !important;
  transform: translateY(0) !important;
}
.checklist-item:active{
  transform: translateY(var(--tc3d-h)) !important;
  box-shadow: 0 1px 0 0 var(--tc3d-wall), var(--tc3d-amb-down), var(--tc3d-lip) !important;
}
.checklist-item.ticked{
  transform: translateY(var(--tc3d-h)) !important;
  box-shadow:
    0 1px 0 0 var(--tc3d-wall-green),
    inset 0 3px 9px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(34,197,94,.22) !important;
}

/* ============ 2. DAILY TODO ROWS ============ */
.daily-todo-item{
  box-shadow: 0 var(--tc3d-h) 0 0 var(--tc3d-wall), var(--tc3d-amb), var(--tc3d-lip) !important;
  transform: translateY(0) !important;
}
.daily-todo-item:active{
  transform: translateY(var(--tc3d-h)) !important;
  box-shadow: 0 1px 0 0 var(--tc3d-wall), var(--tc3d-amb-down), var(--tc3d-lip) !important;
}
.daily-todo-item.done{
  transform: translateY(var(--tc3d-h)) !important;
  box-shadow:
    0 1px 0 0 var(--tc3d-wall-green),
    inset 0 3px 9px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(34,197,94,.22) !important;
}

/* ============ 3. PRE-TRADE PLAN RADIO CARDS ============ */
/* The "If this trade hits SL" options — the ones in the report. */
.ptp-loss-option{
  box-shadow: 0 var(--tc3d-h) 0 0 var(--tc3d-wall), var(--tc3d-amb), var(--tc3d-lip) !important;
  transform: translateY(0) !important;
}
.ptp-loss-option:active{
  transform: translateY(var(--tc3d-h)) !important;
  box-shadow: 0 1px 0 0 var(--tc3d-wall), var(--tc3d-amb-down), var(--tc3d-lip) !important;
}
.ptp-loss-option:has(input:checked){
  transform: translateY(var(--tc3d-h)) !important;
  box-shadow:
    0 1px 0 0 var(--tc3d-wall-purple),
    inset 0 3px 9px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(124,92,252,.38) !important;
}
/* The native radio dot gets a matching domed cap. */
.ptp-loss-option input[type=radio]{
  transform: scale(1.15);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
}

/* ============ 4. COMMITMENT ATTESTATION ROW ============ */
.trader-commitment-row{
  border-radius:10px;
  padding:9px 11px !important;
  /* Translucent, not a solid colour: the parent .trader-commitment-box
     switches from purple to GREEN once signed, and a hardcoded dark fill
     would sit on it as an obvious mismatched patch. */
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.07);
  box-shadow: 0 var(--tc3d-h-sm) 0 0 var(--tc3d-wall), var(--tc3d-amb-down), var(--tc3d-lip);
  transform: translateY(0);
}
.trader-commitment-row:active{
  transform: translateY(var(--tc3d-h-sm));
  box-shadow: 0 1px 0 0 var(--tc3d-wall), var(--tc3d-amb-down), var(--tc3d-lip);
}
.trader-commitment-row:has(input:checked){
  transform: translateY(var(--tc3d-h-sm));
  border-color:rgba(34,197,94,.35);
  box-shadow:
    0 1px 0 0 var(--tc3d-wall-green),
    inset 0 3px 8px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(34,197,94,.2);
}

/* ============ 5. THE SMALL TICK BOXES THEMSELVES ============ */
/* Square checkbox (checklist) + rounded box (todo): raised cap that
   sinks into the row when ticked, so the tick reads as "pushed in". */
.checklist-box,
.daily-todo-cb{
  box-shadow: 0 var(--tc3d-h-sm) 0 0 var(--tc3d-wall), 0 4px 7px rgba(0,0,0,.45), var(--tc3d-lip) !important;
  transform: translateY(0) !important;
}
.checklist-item.ticked .checklist-box,
.daily-todo-item.done .daily-todo-cb{
  transform: translateY(var(--tc3d-h-sm)) !important;
  box-shadow:
    0 1px 0 0 rgba(0,0,0,.6),
    inset 0 2px 5px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

/* ============ 6. AZHKAR CHECK CIRCLES ============ */
.azhkar-check-circle{
  box-shadow: 0 var(--tc3d-h-sm) 0 0 var(--tc3d-wall), 0 4px 7px rgba(0,0,0,.45), var(--tc3d-lip) !important;
  transform: translateY(0) !important;
}
.azhkar-check-circle:active{
  transform: translateY(var(--tc3d-h-sm)) !important;
  box-shadow: 0 1px 0 0 var(--tc3d-wall), var(--tc3d-amb-down) !important;
}
.azhkar-check-circle.checked{
  transform: translateY(var(--tc3d-h-sm)) !important;
  box-shadow:
    0 1px 0 0 var(--tc3d-wall-green),
    inset 0 2px 5px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ============ 7. TOGGLE SWITCHES ============ */
/* The track gets a recess, the knob gets a raised dome — so the
   switch matches the same physical language as the tick boxes. */
.switch .slider,
.muslim-switch .slider{
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
}
.switch .slider::before,
.muslim-switch .slider:before{
  box-shadow: 0 2px 0 rgba(0,0,0,.55), 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.switch input:checked + .slider::before,
.muslim-switch input:checked + .slider:before{
  box-shadow: 0 2px 0 rgba(6,60,32,.8), 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- hover lift (pointer devices only) ----------
   On a mouse the key rises slightly before it is pressed. Touch has
   no hover state, so this is scoped out to avoid a sticky-hover
   stuck-up key after tapping on a phone. */
@media (hover:hover) and (pointer:fine){
  .checklist-item:hover:not(.ticked),
  .daily-todo-item:hover:not(.done),
  .ptp-loss-option:hover:not(:has(input:checked)){
    transform: translateY(-1px) !important;
    box-shadow: 0 calc(var(--tc3d-h) + 1px) 0 0 var(--tc3d-wall), 0 10px 18px rgba(0,0,0,.55), var(--tc3d-lip) !important;
  }
}

/* ---------- accessibility ----------
   Someone who has asked the OS to reduce motion should still SEE the
   raised/pressed difference, just without the travel animation. */
@media (prefers-reduced-motion: reduce){
  .checklist-item, .daily-todo-item, .ptp-loss-option,
  .trader-commitment-row, .checklist-box, .daily-todo-cb,
  .azhkar-check-circle{
    transition: box-shadow .01s linear, background .01s linear !important;
  }
}


/* =====================================================================
   PINEX-STYLE MONTHLY CALENDAR SKIN
   Restyles ONLY the month-grid cells to the mint / coral look.
   Same markup, same data, same click behaviour — a pure visual override.
   Placed last + html body prefix + !important so it wins over the earlier
   .cal-day rules that themselves use !important.
   ===================================================================== */

/* Day-of-week header row (SUN … SAT) */
html body .cal-header{
  color:#8A8A9E !important;
  font-family:'Space Grotesk','Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  padding:6px 0 !important;
}

/* Grid spacing */
html body #calGrid.cal-grid,
html body .cal-grid{ gap:6px !important; }

/* Base cell — flex column, date badge pinned top-left, figures centred */
html body .cal-day{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:98px !important;
  padding:30px 8px 12px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,0.022) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:hidden !important;
}

/* Date-number badge — dark rounded chip, top-left, on every cell */
html body .cal-day .daynum{
  position:absolute !important;
  top:8px !important;
  left:8px !important;
  min-width:30px !important;
  height:26px !important;
  padding:0 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9px !important;
  background:#111119 !important;
  color:#ECECF4 !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:13px !important;
  font-weight:800 !important;
  margin:0 !important;
  z-index:2 !important;
}

/* Centred P&L amount */
html body .cal-day .pnl{
  font-family:'JetBrains Mono',monospace !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
  margin:0 !important;
}

/* Centred trades count */
html body .cal-day .trades-count{
  font-family:'Rubik',sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  margin-top:4px !important;
}

/* ---- PROFIT day: mint fill, deep-teal figures ---- */
html body .cal-day.profit{
  background:linear-gradient(155deg,#6CE9CE 0%,#4FD6B9 100%) !important;
  border:1px solid rgba(31,122,107,0.35) !important;
  box-shadow:0 4px 14px rgba(45,212,180,0.16) !important;
}
html body .cal-day.profit .pnl,
html body .cal-day.profit .pnl.pnl-pos{ color:#0B5A4E !important; }
html body .cal-day.profit .trades-count{ color:rgba(11,90,78,0.74) !important; }

/* ---- LOSS day: coral fill, deep-rose figures ---- */
html body .cal-day.loss{
  background:linear-gradient(155deg,#FF97A4 0%,#FB7184 100%) !important;
  border:1px solid rgba(159,18,57,0.30) !important;
  box-shadow:0 4px 14px rgba(251,113,133,0.16) !important;
}
html body .cal-day.loss .pnl,
html body .cal-day.loss .pnl.pnl-neg{ color:#87182B !important; }
html body .cal-day.loss .trades-count{ color:rgba(135,24,43,0.76) !important; }

/* ---- Empty leading cells: invisible, keep grid aligned ---- */
html body .cal-day.empty{
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  min-height:98px !important;
}

/* ---- Hover: subtle lift + brighten, no purple glow ---- */
html body .cal-day.has-data{ cursor:pointer !important; }
html body .cal-day.has-data:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.05) !important;
  border-color:rgba(255,255,255,0.14) !important;
  box-shadow:0 8px 20px rgba(0,0,0,0.45) !important;
}

/* ---- Mobile sizing ---- */
@media(max-width:768px){
  html body .cal-day{ min-height:70px !important; padding:24px 4px 8px !important; border-radius:11px !important; }
  html body .cal-day .daynum{ min-width:24px !important; height:22px !important; font-size:11px !important; top:5px !important; left:5px !important; border-radius:7px !important; padding:0 6px !important; }
  html body .cal-day .pnl{ font-size:11px !important; }
  html body .cal-day .trades-count{ font-size:9px !important; margin-top:2px !important; }
  html body .cal-header{ font-size:9px !important; letter-spacing:.08em !important; }
  html body .cal-day.empty{ min-height:70px !important; }
}


/* ============================================================
   DASHBOARD SWITCHER LAYOUT — appended last so it wins the cascade.
   Problem: the select and all four action buttons shared one flex row
   inside a 260px sidebar. A long dashboard name, plus the 44px
   touch-target minimum applied to .ws-btn on phones, overflowed the
   card and pushed the PIN and Delete buttons out of sight.
   Fix: the select gets its own full-width row; the buttons get a
   second row and share the width equally, so every one of them is
   always visible and tappable, whatever the name length.
   ============================================================ */
html body .ws-switcher{ overflow:hidden !important; }
html body .ws-row{ display:flex !important; align-items:center !important; gap:6px !important; width:100% !important; }
html body .ws-select{ flex:1 1 auto !important; width:100% !important; min-width:0 !important; max-width:100% !important; text-overflow:ellipsis !important; }
html body .ws-actions{ display:flex !important; align-items:stretch !important; gap:6px !important; width:100% !important; margin-top:7px !important; }
html body .ws-actions .ws-btn{
  flex:1 1 0 !important; width:auto !important; min-width:0 !important;
  height:auto !important; min-height:40px !important; padding:5px 2px !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:2px !important;
}
html body .ws-actions .ws-btn .ws-ic{ font-size:14px !important; line-height:1 !important; }
html body .ws-actions .ws-btn .ws-tx{
  font-size:8.5px !important; font-weight:800 !important; letter-spacing:.06em !important;
  text-transform:uppercase !important; line-height:1 !important; opacity:.7 !important;
}
html body .ws-actions .ws-btn.ws-btn-locked .ws-tx{ opacity:.95 !important; }
/* Touch screens keep a comfortable target HEIGHT, but the width must stay free
   to shrink — the old min-width:44px on four buttons is what overflowed. */
@media (pointer: coarse){
  html body .ws-actions .ws-btn{ min-width:0 !important; min-height:44px !important; }
}

/* ------------------------------------------------------------
   COLLAPSIBLE HEADER
   The panel opens on a tap of its own title row and stays shut
   otherwise, which is what keeps the sidebar short on a phone.
   Closed, the header still carries the active dashboard's name
   and the count, so collapsing costs no information.
   ------------------------------------------------------------ */
html body .ws-toggle{
  display:flex !important; align-items:center; gap:7px;
  width:100%; min-height:34px; margin:0; padding:0;
  background:transparent; border:0; cursor:pointer;
  font-family:inherit; text-align:left; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
html body .ws-toggle:focus-visible{ outline:2px solid #7c5cfc; outline-offset:3px; border-radius:6px; }
html body .ws-switcher .ws-label{ margin-bottom:0 !important; }
html body .ws-sp{ flex:1 1 auto; min-width:4px; }
html body .ws-switcher .ws-count{ margin-left:0 !important; flex:0 0 auto; }
html body .ws-now{
  flex:0 1 auto; min-width:0; max-width:104px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11px; font-weight:700; color:#cfc7f2;
}
html body .ws-switcher.ws-open .ws-now{ display:none; }
html body .ws-chev{ flex:0 0 auto; font-size:11px; color:#9d95c8; transition:transform .2s ease; }
html body .ws-switcher.ws-open .ws-chev{ transform:rotate(180deg); }

/* 0fr → 1fr animates to the content's real height, so nothing has to
   be measured in JS or capped with a guessed max-height. */
html body .ws-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease; }
html body .ws-switcher.ws-open .ws-body{ grid-template-rows:1fr; }
html body .ws-body-in{ overflow:hidden; min-width:0; }
html body .ws-body-in > .ws-row{ margin-top:9px !important; }

@media (pointer: coarse){ html body .ws-toggle{ min-height:42px; } }
@media (prefers-reduced-motion: reduce){
  html body .ws-body, html body .ws-chev{ transition:none !important; }
}


/* ============================================================
   OTP COUNTDOWN — appended last so it wins the cascade.
   The modal already counted down in text only; the bar makes the
   five minutes visible at a glance and turns red in the last
   minute, and the expired state is now unmistakable.
   ============================================================ */
html body .otp-timer{ margin-bottom:7px !important; }
html body #otpBar{ height:4px; background:#1a1a2e; border-radius:4px; overflow:hidden; margin:0 0 14px; }
html body #otpBar > span{ display:block; height:100%; width:100%; border-radius:4px;
  background:linear-gradient(90deg,#22c55e,#7C5CFC); transition:width .45s linear; }
html body #otpBar.warn > span{ background:linear-gradient(90deg,#f59e0b,#ef4444); }
html body #otpBar.dead > span{ background:#ef4444; width:0 !important; }
html body .otp-timer.expired{ color:#ef4444 !important; font-weight:800 !important; }
html body .otp-digit:disabled{ opacity:.4 !important; cursor:not-allowed !important;
  background:#0a0a12 !important; border-color:#252539 !important; }
/* Once the code is dead, Resend is the only sensible next step — make it look
   like the action it now is instead of a faint text link. */
html body #otpResendLink.otp-resend-hot{ color:#ffffff !important; background:#7C5CFC !important;
  border-radius:8px !important; padding:5px 14px !important; font-weight:800 !important;
  box-shadow:0 4px 12px rgba(124,92,252,.35) !important; }


/* ============================================================
   TRADING PLANS — market-day tracker. The weekday label makes the
   skipped weekends obvious at a glance (Fri jumps straight to Mon),
   and the header carries the rule plus the holidays editor.
   ============================================================ */
html body .plan-day-cell .d-dow{ font-size:7px; letter-spacing:.12em; text-transform:uppercase;
  color:#4b4b66; margin-top:1px; font-weight:800; }
html body .plan-day-cell.today .d-dow{ color:#7C5CFC; }
html body .plan-day-cell.followed .d-dow{ color:#1f7a4a; }
html body .plan-day-cell.missed .d-dow{ color:#a13b3b; }
html body .plan-mkt-note{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:none;
  color:#8f96b8; background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.25);
  padding:1px 8px; border-radius:6px; }
html body .plan-hol-btn{ margin-left:auto; background:transparent; border:1px solid #252539;
  color:#8a90ad; border-radius:7px; padding:3px 10px; font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:none; cursor:pointer; font-family:inherit; }
html body .plan-hol-btn:hover{ border-color:#7C5CFC; color:#C4B5FD; }


/* ============================================================
   IN-APP DIALOG CARD — the shell behind tcTextPrompt,
   tcConfirmDlg, tcDatePicker and tcAlert / tcAsk / tcAskText.
   Same language as the PIN keypad so every dialog in the app
   matches. Colours come from the active theme's --hq-* tokens
   (fallbacks = the original Midnight Violet values), so the card
   is green on Emerald, blue on Sapphire, gold on Carbon and
   white on Daylight (see the daylight block at the end).
   ============================================================ */
.tcdlg-overlay{ position:fixed; inset:0; z-index:100001; background:rgba(6,6,12,.82);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:flex;
  align-items:center; justify-content:center; padding:20px; animation:tcdlgFade .16s ease; }
/* alert/confirm/prompt stand-ins must sit above every app modal (checkout,
   notebook, playbook, market confirm) that can raise them. */
.tcdlg-overlay.tcask-overlay{ z-index:2147483620; }
@keyframes tcdlgFade{ from{opacity:0} to{opacity:1} }
.tcdlg-card{ width:100%; max-width:400px; background:linear-gradient(180deg,var(--hq-surface-3,#16162a),var(--hq-bg,#0d0d18));
  border:1px solid var(--hq-accent-border,rgba(124,92,252,.34)); border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation:tcdlgPop .2s cubic-bezier(.22,1,.36,1); max-height:86vh; overflow-y:auto; }
@keyframes tcdlgPop{ from{opacity:0;transform:translateY(14px) scale(.96)} to{opacity:1;transform:none} }
.tcdlg-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.tcdlg-ic{ width:38px; height:38px; flex:0 0 auto; border-radius:10px; font-size:18px; font-weight:800;
  background:var(--hq-accent-soft,rgba(124,92,252,.16)); border:1px solid var(--hq-accent-border,rgba(124,92,252,.3)); color:var(--hq-accent-hover,#c4b5fd);
  display:flex; align-items:center; justify-content:center; line-height:1; }
.tcdlg-ic.danger{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35); color:#fca5a5; }
.tcdlg-ic.warn{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.38); color:#fcd34d; }
.tcdlg-ic.ok{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.36); color:#86efac; }
.tcdlg-htx{ min-width:0; flex:1; }
.tcdlg-title{ font-size:16px; font-weight:800; color:var(--hq-text-1,#efe9ff); line-height:1.3; overflow-wrap:anywhere; }
.tcdlg-sub{ font-size:12px; line-height:1.55; color:var(--hq-text-3,#8f96b8); margin-top:3px; }
.tcdlg-sub.tcask-body{ font-size:13px; white-space:pre-line; overflow-wrap:anywhere; margin-top:6px; }
.tcdlg-label{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hq-text-4,#6b7192); font-weight:800; margin-bottom:6px; }
.tcdlg-input{ width:100%; height:40px; background:var(--hq-bg,#0a0a14); border:1px solid var(--hq-accent-border,rgba(124,92,252,.3));
  border-radius:9px; color:var(--hq-text-1,#efe9ff); padding:0 12px; font-size:14px; font-weight:600;
  font-family:inherit; outline:none; transition:border-color .14s, box-shadow .14s; }
.tcdlg-input:focus{ border-color:var(--hq-accent,#7c5cfc); box-shadow:0 0 0 3px rgba(var(--btn-glow-rgb,124,92,252),.18); }
.tcdlg-date{ font-family:'JetBrains Mono',monospace; font-size:13px; color-scheme:dark; }
.tcdlg-addrow{ display:flex; gap:8px; }
.tcdlg-addrow .tcdlg-input{ flex:1; min-width:0; }
.tcdlg-addrow .tcdlg-btn{ flex:0 0 auto; height:40px; padding:0 16px; }
.tcdlg-foot-row{ display:flex; justify-content:space-between; align-items:center; margin-top:7px; }
.tcdlg-hint{ font-size:11px; color:var(--hq-text-4,#5f667f); }
.tcdlg-count{ font-size:11px; color:var(--hq-text-4,#5f667f); font-family:'JetBrains Mono',monospace; }
.tcdlg-chips{ display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; min-height:72px;
  margin-top:8px; background:var(--hq-bg,#0a0a14); border:1px solid var(--hq-border-2,rgba(124,92,252,.18));
  border-radius:10px; padding:10px; }
.tcdlg-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--hq-accent-soft,rgba(124,92,252,.16));
  border:1px solid var(--hq-accent-border,rgba(124,92,252,.32)); border-radius:8px; padding:5px 6px 5px 10px;
  font-size:11.5px; color:var(--hq-text-2,#d9d2ff); font-family:'JetBrains Mono',monospace; }
.tcdlg-chip button{ background:transparent; border:none; color:var(--hq-text-3,#8f96b8); cursor:pointer;
  font-size:12px; line-height:1; padding:2px 3px; }
.tcdlg-chip button:hover{ color:#f87171; }
.tcdlg-empty{ margin:auto; font-size:12px; color:var(--hq-text-4,#5f667f); font-style:italic; }
.tcdlg-err{ min-height:16px; font-size:12px; font-weight:700; color:#f87171; margin-top:9px; }
.tcdlg-actions{ display:flex; gap:9px; margin-top:6px; }
.tcdlg-btn{ flex:1; padding:11px 14px; border-radius:11px; font-size:13.5px; font-weight:800;
  cursor:pointer; font-family:inherit; border:1px solid transparent;
  transition:filter .14s, transform .14s; }
.tcdlg-btn:hover:not(:disabled){ filter:brightness(1.1); transform:translateY(-1px); }
.tcdlg-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.tcdlg-cancel{ background:transparent; color:var(--hq-text-2,#a9b0cc); border-color:var(--hq-border-2,rgba(255,255,255,.14)); }
.tcdlg-ok{ background:linear-gradient(135deg,var(--hq-accent-hover,#8b6bff),var(--hq-accent,#7C5CFC)); color:var(--tcdlg-ok-ink,#fff);
  box-shadow:0 7px 20px rgba(var(--btn-glow-rgb,124,92,252),.4); }
.tcdlg-ok.danger{ background:linear-gradient(135deg,#f05252,#dc2626); color:#fff;
  box-shadow:0 7px 20px rgba(239,68,68,.35); }
.tcdlg-btn:focus-visible{ outline:2px solid var(--hq-accent-hover,#a78bfa); outline-offset:2px; }
/* the light accents (mint, gold) need dark ink on the primary button —
   same as those themes' own .btn-primary */
html[data-theme="emerald"]{ --tcdlg-ok-ink:#04160f; }
html[data-theme="carbon"]{ --tcdlg-ok-ink:#1c1606; }
.tcdlg-shake{ animation:tcdlgShake .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes tcdlgShake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }
@media(pointer:coarse){ .tcdlg-btn{ min-height:44px; } }
@media(max-width:420px){ .tcdlg-card{ padding:18px 16px 15px; } }

/* ---- Daylight: white card. The theme's blanket rules force every text
   node dark and whiten every "-card", so each piece is restated here with
   enough specificity (html[..] body .tcdlg-overlay .x) + !important. ---- */
html[data-theme="daylight"] body .tcdlg-overlay{ background:rgba(15,23,42,.42); }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-card{ background:#ffffff !important; background-image:none !important;
  border:1px solid #e2e6ef !important; box-shadow:0 24px 60px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.06) !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-title{ color:#0d1017 !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-sub{ color:#454c5c !important; }
html[data-theme="daylight"] body .tcdlg-overlay :is(.tcdlg-label,.tcdlg-hint,.tcdlg-count,.tcdlg-empty){ color:#5e6678 !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-ic{ background:rgba(79,70,229,.08) !important; border-color:rgba(79,70,229,.28) !important; color:#4f46e5 !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-ic.danger{ background:rgba(220,38,38,.08) !important; border-color:rgba(220,38,38,.3) !important; color:#dc2626 !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-ic.warn{ background:rgba(217,119,6,.09) !important; border-color:rgba(217,119,6,.32) !important; color:#b45309 !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-ic.ok{ background:rgba(22,163,74,.09) !important; border-color:rgba(22,163,74,.3) !important; color:#15803d !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-input{ background:#ffffff !important; border:1px solid #d2d8e4 !important; color:#0d1017 !important; color-scheme:light; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-input:focus{ border-color:#4f46e5 !important; box-shadow:0 0 0 3px rgba(79,70,229,.15) !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-chips{ background:#f6f7fb !important; border-color:#e2e6ef !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-chip{ background:rgba(79,70,229,.08) !important; border-color:rgba(79,70,229,.25) !important; color:#272d3a !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-err{ color:#dc2626 !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-cancel{ background:#ffffff !important; color:#272d3a !important; border:1px solid #d2d8e4 !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-ok{ background:linear-gradient(135deg,#6366f1,#4f46e5) !important; color:#ffffff !important;
  border-color:transparent !important; box-shadow:0 7px 18px rgba(79,70,229,.28) !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-ok.danger{ background:linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow:0 7px 18px rgba(220,38,38,.25) !important; }
html[data-theme="daylight"] body .tcdlg-overlay .tcdlg-linkbtn{ color:#4f46e5 !important; }


html body .tcdlg-select{ font-weight:600; font-size:13px; color-scheme:dark; cursor:pointer;
  appearance:none; -webkit-appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,#8f96b8 50%),linear-gradient(135deg,#8f96b8 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
html body .tcdlg-linkbtn{ background:transparent; border:none; color:var(--hq-accent-hover,#A78BFA); font-family:inherit;
  font-size:11px; font-weight:800; cursor:pointer; padding:0; text-decoration:underline; }
html body .tcdlg-linkbtn:hover{ color:#C4B5FD; }
html body .prayer-method-note{ white-space:normal; }