/* ========================================
   rakez ركز — Extended Components v2
   Habits, Worship Detail, Tasbeeh, Icons
   ======================================== */

/* Conditional worship sections hiding for non-Muslim users */
body.non-muslim [data-section="worship"],
body.non-muslim [data-route="worship"] {
  display: none !important;
}

/* ==========================================================================
   Sabiq Assistant — conversation workspace
   ========================================================================== */

.sabiq-assistant-overlay {
  position: fixed;
  inset: 0;
  z-index: 9190;
  background: rgba(5, 8, 18, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.sabiq-assistant-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.voice-assistant-widget {
  position: fixed;
  left: 100px;
  right: auto;
  bottom: 28px;
  z-index: 9200;
  width: auto;
  display: block;
  pointer-events: none;
}

html.ltr .voice-assistant-widget {
  left: auto;
  right: 100px;
}

.sabiq-assistant-launcher {
  width: 252px;
  min-height: 62px;
  padding: 7px 10px 7px 8px;
  border: 1px solid rgba(129, 140, 248, 0.22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(18, 20, 38, 0.96), rgba(27, 28, 53, 0.94));
  color: #f8fafc;
  box-shadow: 0 18px 44px rgba(5, 8, 20, 0.34), 0 7px 18px rgba(67, 56, 202, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--font-arabic);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

html.light .sabiq-assistant-launcher {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 255, 0.98));
  color: #172033;
  border-color: rgba(79, 70, 229, 0.16);
  box-shadow: 0 18px 42px rgba(46, 51, 73, 0.16), 0 6px 16px rgba(79, 70, 229, 0.1);
}

.sabiq-assistant-launcher:hover {
  transform: translateY(-2px);
  border-color: rgba(129, 140, 248, 0.48);
  box-shadow: 0 22px 52px rgba(5, 8, 20, 0.4), 0 9px 23px rgba(79, 70, 229, 0.24);
}

.sabiq-assistant-launcher:focus-visible,
.sabiq-panel-actions button:focus-visible,
.sabiq-quick-action:focus-visible,
.sabiq-assistant-composer button:focus-visible,
.sabiq-assistant-composer textarea:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.3);
  outline-offset: 2px;
}

.sabiq-launcher-orb {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}

.sabiq-launcher-core {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 55%, #d946ef 115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px rgba(79, 70, 229, 0.33);
}

.sabiq-launcher-ring {
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(129, 140, 248, 0.36);
  border-radius: 17px;
  opacity: 0;
}

.sabiq-launcher-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.sabiq-launcher-copy strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sabiq-launcher-copy small {
  color: #a7b0c4;
  font-size: 10px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.light .sabiq-launcher-copy small {
  color: #687386;
}

.sabiq-launcher-state {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

.voice-assistant-widget[data-state="wake"] .sabiq-launcher-state,
.voice-assistant-widget[data-state="listening"] .sabiq-launcher-state {
  background: #38bdf8;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.13);
  animation: sabiq-status-pulse 1.35s ease-in-out infinite;
}

.voice-assistant-widget[data-state="processing"] .sabiq-launcher-state {
  background: #a78bfa;
  box-shadow: 0 0 0 5px rgba(167, 139, 250, 0.13);
  animation: sabiq-status-pulse 0.9s ease-in-out infinite;
}

.voice-assistant-widget[data-state="error"] .sabiq-launcher-state {
  background: #fb7185;
  box-shadow: 0 0 0 5px rgba(251, 113, 133, 0.12);
}

.voice-assistant-widget[data-state="wake"] .sabiq-launcher-ring,
.voice-assistant-widget[data-state="listening"] .sabiq-launcher-ring {
  animation: sabiq-orb-ring 1.7s ease-out infinite;
}

.sabiq-assistant-panel {
  position: fixed;
  left: 30px;
  right: auto;
  bottom: 104px;
  z-index: 9201;
  width: min(430px, calc(100vw - 40px));
  height: min(650px, calc(100dvh - 132px));
  min-height: 490px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 0%, rgba(99, 102, 241, 0.2), transparent 31%),
    linear-gradient(165deg, rgba(16, 18, 34, 0.985), rgba(9, 12, 24, 0.99));
  color: #eef2ff;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.52), 0 12px 30px rgba(49, 46, 129, 0.2);
  pointer-events: auto;
  transform-origin: bottom left;
  animation: sabiq-panel-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--font-arabic);
}

html.ltr .sabiq-assistant-panel {
  left: auto;
  right: 30px;
  transform-origin: bottom right;
}

.sabiq-assistant-panel[hidden] {
  display: none !important;
}

html.light .sabiq-assistant-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(99, 102, 241, 0.11), transparent 32%),
    linear-gradient(165deg, #ffffff, #f8f9ff);
  color: #172033;
  border-color: rgba(79, 70, 229, 0.14);
  box-shadow: 0 28px 75px rgba(45, 48, 70, 0.24), 0 9px 25px rgba(79, 70, 229, 0.09);
}

.sabiq-panel-header {
  padding: 17px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

html.light .sabiq-panel-header {
  border-bottom-color: rgba(30, 41, 59, 0.07);
}

.sabiq-panel-brand,
.sabiq-panel-actions,
.sabiq-live-status,
.sabiq-quick-heading,
.sabiq-panel-footer {
  display: flex;
  align-items: center;
}

.sabiq-panel-brand {
  gap: 11px;
  min-width: 0;
}

.sabiq-panel-mark {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #4f46e5, #7c3aed 62%, #d946ef);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.32);
}

.sabiq-panel-brand span:not(.sabiq-panel-mark) {
  display: block;
  margin-bottom: 1px;
  color: #9ea9bf;
  font-size: 10px;
  font-weight: 800;
}

html.light .sabiq-panel-brand span:not(.sabiq-panel-mark) {
  color: #697488;
}

.sabiq-panel-brand h2 {
  margin: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 950;
}

.sabiq-panel-actions {
  gap: 7px;
}

.sabiq-icon-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: #aeb8ca;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

html.light .sabiq-icon-button {
  background: rgba(79, 70, 229, 0.04);
  border-color: rgba(79, 70, 229, 0.1);
  color: #667085;
}

.sabiq-icon-button:hover {
  color: #fff;
  background: rgba(129, 140, 248, 0.18);
  transform: translateY(-1px);
}

html.light .sabiq-icon-button:hover {
  color: #4338ca;
}

.sabiq-live-status {
  margin: 12px 16px 3px;
  padding: 10px 11px;
  gap: 9px;
  border: 1px solid rgba(129, 140, 248, 0.13);
  border-radius: 15px;
  background: rgba(99, 102, 241, 0.07);
}

html.light .sabiq-live-status {
  background: rgba(99, 102, 241, 0.045);
  border-color: rgba(79, 70, 229, 0.09);
}

.sabiq-live-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

.voice-assistant-widget[data-state="listening"] .sabiq-live-dot,
.voice-assistant-widget[data-state="wake"] .sabiq-live-dot {
  background: #38bdf8;
  animation: sabiq-status-pulse 1.3s ease-in-out infinite;
}

.voice-assistant-widget[data-state="processing"] .sabiq-live-dot {
  background: #a78bfa;
  animation: sabiq-status-pulse 0.9s ease-in-out infinite;
}

.voice-assistant-widget[data-state="error"] .sabiq-live-dot {
  background: #fb7185;
}

.sabiq-live-status>div {
  min-width: 0;
  flex: 1;
}

.sabiq-live-status strong,
.sabiq-live-status p {
  display: block;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sabiq-live-status strong {
  color: #e8ebff;
  font-size: 11px;
  font-weight: 900;
}

html.light .sabiq-live-status strong {
  color: #303a52;
}

.sabiq-live-status p {
  margin-top: 2px;
  color: #939db1;
  font-size: 9px;
}

html.light .sabiq-live-status p {
  color: #747f92;
}

.sabiq-live-status .voice-wake-toggle {
  min-height: 31px;
  padding: 0 9px;
  flex: 0 0 auto;
  font-size: 9px;
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.2);
  background: rgba(167, 139, 250, 0.07);
  box-shadow: none;
}

html.light .sabiq-live-status .voice-wake-toggle {
  color: #5b4ed0;
  background: rgba(99, 102, 241, 0.05);
}

.sabiq-assistant-messages {
  flex: 1 1 auto;
  min-height: 150px;
  padding: 15px 16px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 140, 248, 0.25) transparent;
}

.sabiq-message {
  margin-bottom: 13px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: sabiq-message-in 0.2s ease;
}

.sabiq-message.user {
  flex-direction: row-reverse;
}

.sabiq-message-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #c4b5fd;
  background: rgba(129, 140, 248, 0.11);
  border: 1px solid rgba(129, 140, 248, 0.14);
  font-size: 11px;
  font-weight: 900;
}

.sabiq-message.user .sabiq-message-avatar {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-color: transparent;
}

.sabiq-message-content {
  max-width: 78%;
  padding: 10px 12px 7px;
  border-radius: 17px 17px 17px 5px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.065);
}

html[dir="rtl"] .sabiq-message-content {
  border-radius: 17px 17px 5px 17px;
}

.sabiq-message.user .sabiq-message-content {
  border-radius: 17px 17px 5px 17px;
  color: #fff;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.95), rgba(109, 40, 217, 0.94));
  border-color: rgba(255, 255, 255, 0.12);
}

html[dir="rtl"] .sabiq-message.user .sabiq-message-content {
  border-radius: 17px 17px 17px 5px;
}

html.light .sabiq-message.assistant .sabiq-message-content {
  background: #f1f3fa;
  border-color: rgba(79, 70, 229, 0.07);
}

.sabiq-message.is-success .sabiq-message-content {
  border-color: rgba(34, 197, 94, 0.18);
}

.sabiq-message.is-error .sabiq-message-content {
  border-color: rgba(251, 113, 133, 0.22);
}

.sabiq-message-content p {
  margin: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sabiq-message-content time {
  display: block;
  margin-top: 3px;
  color: #7f899d;
  font-size: 8px;
  text-align: end;
}

.sabiq-message.user .sabiq-message-content time {
  color: rgba(255, 255, 255, 0.66);
}

.sabiq-quick-section {
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

html.light .sabiq-quick-section {
  border-top-color: rgba(30, 41, 59, 0.06);
}

.sabiq-quick-heading {
  justify-content: space-between;
  margin-bottom: 8px;
  color: #cbd2e1;
  font-size: 10px;
  font-weight: 900;
}

.sabiq-quick-heading small {
  color: #727e94;
  font-size: 8px;
  font-weight: 700;
}

html.light .sabiq-quick-heading {
  color: #46516a;
}

.sabiq-assistant-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.sabiq-quick-action {
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(129, 140, 248, 0.12);
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.055);
  color: #cbd3e7;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-arabic);
  font-size: 10px;
  font-weight: 800;
  text-align: start;
  cursor: pointer;
  transition: transform 0.17s ease, border-color 0.17s ease, background 0.17s ease;
}

.sabiq-quick-action span {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #a5b4fc;
  background: rgba(129, 140, 248, 0.1);
}

.sabiq-quick-action:hover {
  transform: translateY(-1px);
  border-color: rgba(129, 140, 248, 0.3);
  background: rgba(99, 102, 241, 0.1);
}

html.light .sabiq-quick-action {
  color: #46516a;
  background: rgba(99, 102, 241, 0.035);
  border-color: rgba(79, 70, 229, 0.09);
}

.sabiq-assistant-composer {
  margin: 0 14px;
  min-height: 53px;
  padding: 5px;
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
  display: flex;
  align-items: flex-end;
  gap: 5px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sabiq-assistant-composer:focus-within {
  border-color: rgba(129, 140, 248, 0.48);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

html.light .sabiq-assistant-composer {
  background: #fff;
  border-color: rgba(79, 70, 229, 0.14);
  box-shadow: 0 6px 18px rgba(30, 41, 59, 0.055);
}

.sabiq-assistant-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  max-height: 104px;
  padding: 10px 6px 7px;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: #edf1ff;
  font-family: var(--font-arabic);
  font-size: 11px;
  line-height: 1.55;
}

html.light .sabiq-assistant-composer textarea {
  color: #252f46;
}

.sabiq-assistant-composer textarea::placeholder {
  color: #747f94;
}

.sabiq-composer-mic,
.sabiq-composer-send {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.sabiq-composer-mic {
  border: 1px solid rgba(129, 140, 248, 0.15);
  background: rgba(129, 140, 248, 0.08);
  color: #a5b4fc;
}

.sabiq-composer-send {
  border: 0;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  box-shadow: 0 7px 16px rgba(79, 70, 229, 0.25);
}

.sabiq-composer-mic:hover,
.sabiq-composer-send:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.voice-assistant-widget[data-state="listening"] .sabiq-composer-mic,
#voice-command-btn.sabiq-composer-mic.listening {
  color: #fff;
  border-color: rgba(251, 113, 133, 0.32);
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  animation: sabiq-mic-listening 1.1s ease-in-out infinite;
}

.sabiq-panel-footer {
  min-height: 31px;
  padding: 7px 16px 10px;
  justify-content: center;
  gap: 5px;
  color: #717d92;
  font-size: 8px;
  font-weight: 700;
}

.sabiq-footer-lock {
  color: #34d399;
  display: grid;
  place-items: center;
}

.sabiq-footer-separator {
  color: #4b5568;
}

@keyframes sabiq-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sabiq-message-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sabiq-status-pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes sabiq-orb-ring {
  from {
    opacity: 0.55;
    transform: scale(0.82);
  }

  to {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes sabiq-mic-listening {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.28);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(244, 63, 94, 0);
  }
}

@media (max-width: 900px) {
  .voice-assistant-widget {
    left: 16px;
    right: auto;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  html.ltr .voice-assistant-widget {
    left: auto;
    right: 16px;
  }

  .sabiq-assistant-launcher {
    width: 58px;
    min-height: 58px;
    padding: 6px;
    border-radius: 20px;
    justify-content: center;
  }

  .sabiq-launcher-copy,
  .sabiq-launcher-state {
    display: none;
  }

  .sabiq-launcher-orb {
    flex-basis: 46px;
  }

  .voice-assistant-widget.panel-open .sabiq-assistant-launcher {
    opacity: 0;
    pointer-events: none;
  }

  .sabiq-assistant-panel,
  html.ltr .sabiq-assistant-panel {
    left: 10px;
    right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: min(660px, calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)));
    min-height: min(500px, calc(100dvh - 96px));
    border-radius: 25px;
    transform-origin: bottom center;
  }

  .sabiq-assistant-overlay {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .sabiq-panel-header {
    padding: 14px 15px 12px;
  }

  .sabiq-panel-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 13px;
  }

  .sabiq-panel-brand h2 {
    font-size: 16px;
  }

  .sabiq-live-status {
    margin: 10px 13px 2px;
  }

  .sabiq-assistant-messages {
    padding: 13px 13px 8px;
  }

  .sabiq-quick-section {
    padding-inline: 13px;
  }

  .sabiq-assistant-composer {
    margin-inline: 12px;
  }
}

/* Avoid compositing blur over the fixed assistant panel in embedded browsers. */
.sabiq-assistant-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 430px) {
  .sabiq-live-status .voice-wake-toggle {
    width: 31px;
    padding: 0;
    justify-content: center;
  }

  .sabiq-live-status .voice-wake-toggle #voice-wake-label {
    display: none;
  }

  .sabiq-assistant-quick-actions {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sabiq-quick-action {
    flex: 0 0 auto;
    min-width: 118px;
  }

  .sabiq-panel-footer {
    padding-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sabiq-assistant-panel,
  .sabiq-message,
  .sabiq-launcher-ring,
  .sabiq-launcher-state,
  .sabiq-live-dot,
  .sabiq-composer-mic {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SUPPORT DESK V2 — technical support workspace
   ══════════════════════════════════════════════════════════════ */
.support-v2-page {
  --support-bg: #090d1b;
  --support-panel: #11172a;
  --support-panel-2: #151d34;
  --support-soft: rgba(125, 138, 255, 0.09);
  --support-line: rgba(157, 168, 224, 0.14);
  --support-text: #f7f8ff;
  --support-muted: #929dbb;
  --support-primary: #776cff;
  --support-primary-2: #5d8dff;
  --support-cyan: #40d7e5;
  --support-shadow: 0 22px 55px rgba(2, 6, 23, 0.28);
  color: var(--support-text);
  display: grid;
  gap: 18px;
  max-width: 1540px;
  margin: 0 auto;
  padding: 4px 2px 28px;
}

html.light .support-v2-page {
  --support-bg: #f5f7ff;
  --support-panel: #ffffff;
  --support-panel-2: #f7f8ff;
  --support-soft: rgba(91, 79, 224, 0.07);
  --support-line: rgba(51, 62, 117, 0.12);
  --support-text: #1c2440;
  --support-muted: #697391;
  --support-shadow: 0 22px 55px rgba(54, 62, 117, 0.1);
}

.support-v2-page button,
.support-v2-page input,
.support-v2-page select,
.support-v2-page textarea {
  font: inherit;
}

.support-v2-hero {
  position: relative;
  min-height: 238px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  align-items: center;
  gap: 32px;
  padding: 34px clamp(28px, 4vw, 58px);
  border: 1px solid rgba(159, 156, 255, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 15%, rgba(97, 117, 255, 0.34), transparent 31%),
    radial-gradient(circle at 88% 9%, rgba(41, 205, 232, 0.18), transparent 30%),
    linear-gradient(125deg, #171b3f 0%, #20205a 44%, #111b3b 100%);
  box-shadow: 0 24px 64px rgba(5, 8, 28, 0.28);
  isolation: isolate;
}

.support-v2-hero::before,
.support-v2-hero::after {
  position: absolute;
  content: '';
  z-index: -1;
  border-radius: 999px;
}

.support-v2-hero::before {
  width: 280px;
  height: 280px;
  inset-inline-end: -80px;
  bottom: -165px;
  border: 42px solid rgba(111, 224, 255, 0.08);
}

.support-v2-hero::after {
  width: 180px;
  height: 180px;
  inset-inline-end: 21%;
  top: -115px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.support-v2-hero-copy {
  max-width: 760px;
}

.support-v2-eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cfd7ff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 11px;
  border: 1px solid rgba(203, 210, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}

.support-v2-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin: 15px 0 10px;
}

.support-v2-hero p {
  max-width: 680px;
  color: #c5cbe4;
  font-size: clamp(0.88rem, 1.5vw, 1.04rem);
  line-height: 1.85;
  margin: 0;
}

.support-v2-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 24px;
}

.support-v2-primary,
.support-v2-secondary {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.support-v2-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--support-primary), var(--support-primary-2));
  box-shadow: 0 10px 25px rgba(93, 109, 255, 0.3);
}

.support-v2-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(93, 109, 255, 0.38);
}

.support-v2-primary:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.support-v2-secondary {
  color: var(--support-text);
  border: 1px solid var(--support-line);
  background: var(--support-panel-2);
  box-shadow: none;
}

.support-v2-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cdd3eb;
  font-size: 0.78rem;
  font-weight: 700;
}

.support-v2-availability i {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4fe2a3;
  box-shadow: 0 0 0 5px rgba(79, 226, 163, 0.12);
}

.support-v2-hero-visual {
  min-height: 164px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #cbd3f4;
}

.support-v2-headset {
  position: relative;
  width: 102px;
  height: 102px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(130, 113, 255, 0.58), rgba(56, 201, 229, 0.18));
  box-shadow: 0 20px 48px rgba(3, 8, 29, 0.3), inset 0 1px rgba(255, 255, 255, 0.17);
  transform: rotate(-4deg);
}

[dir='rtl'] .support-v2-headset {
  transform: rotate(4deg);
}

.support-v2-headset>span {
  position: absolute;
  inset-inline-end: -8px;
  bottom: -7px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #07182a;
  border: 4px solid #18204c;
  border-radius: 50%;
  background: #50e0aa;
}

.support-v2-signal {
  height: 18px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.support-v2-signal i {
  width: 4px;
  height: 8px;
  border-radius: 4px;
  background: #6be1f0;
  animation: supportSignal 1.2s ease-in-out infinite alternate;
}

.support-v2-signal i:nth-child(2) {
  height: 15px;
  animation-delay: 160ms;
}

.support-v2-signal i:nth-child(3) {
  height: 11px;
  animation-delay: 320ms;
}

.support-v2-hero-visual small {
  color: #aeb7da;
  font-size: 0.72rem;
  font-weight: 700;
}

@keyframes supportSignal {
  to {
    height: 18px;
    opacity: 0.55;
  }
}

.support-v2-metrics.company-crm-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.support-v2-metrics .company-crm-kpi {
  min-height: 116px;
  border-color: var(--support-line);
  border-radius: 18px;
  background: var(--support-panel);
  box-shadow: 0 12px 32px rgba(4, 8, 27, 0.1);
}

.support-v2-metrics .company-crm-kpi::before {
  background: var(--support-primary);
}

.support-v2-metrics .company-crm-kpi[data-tone='blue']::before {
  background: #5b91ff;
}

.support-v2-metrics .company-crm-kpi[data-tone='emerald']::before {
  background: #39c999;
}

.support-v2-metrics .company-crm-kpi[data-tone='amber']::before {
  background: #f1b95c;
}

.support-v2-metrics .company-crm-kpi-icon {
  color: #938aff;
  background: rgba(119, 108, 255, 0.13);
}

.support-v2-metrics .company-crm-kpi[data-tone='blue'] .company-crm-kpi-icon {
  color: #69a0ff;
  background: rgba(91, 145, 255, 0.12);
}

.support-v2-metrics .company-crm-kpi[data-tone='emerald'] .company-crm-kpi-icon {
  color: #46d3a5;
  background: rgba(57, 201, 153, 0.12);
}

.support-v2-metrics .company-crm-kpi[data-tone='amber'] .company-crm-kpi-icon {
  color: #f2bd62;
  background: rgba(241, 185, 92, 0.12);
}

.support-v2-metrics .company-crm-kpi>div>span,
.support-v2-metrics .company-crm-kpi small {
  color: var(--support-muted);
}

.support-v2-metrics .company-crm-kpi strong {
  color: var(--support-text);
}

.support-v2-workspace {
  min-height: 660px;
  height: min(760px, calc(100vh - 128px));
  display: grid;
  grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--support-line);
  border-radius: 24px;
  background: var(--support-panel);
  box-shadow: var(--support-shadow);
}

.support-v2-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-inline-end: 1px solid var(--support-line);
  background: color-mix(in srgb, var(--support-panel) 92%, var(--support-primary) 8%);
}

.support-v2-sidebar>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 20px 14px;
}

.support-v2-sidebar>header span {
  color: var(--support-primary-2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.support-v2-sidebar>header h2 {
  color: var(--support-text);
  font-size: 1.15rem;
  margin: 4px 0 0;
}

.support-v2-icon-button,
.support-v2-back,
.support-v2-delete-ticket {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.support-v2-icon-button {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--support-primary), var(--support-primary-2));
  box-shadow: 0 8px 20px rgba(99, 108, 255, 0.25);
}

.support-v2-search {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px 11px;
  padding: 0 12px;
  color: var(--support-muted);
  border: 1px solid var(--support-line);
  border-radius: 13px;
  background: var(--support-panel-2);
}

.support-v2-search:focus-within {
  border-color: rgba(119, 108, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(119, 108, 255, 0.09);
}

.support-v2-search input {
  width: 100%;
  min-width: 0;
  color: var(--support-text);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.79rem;
}

.support-v2-search input::placeholder {
  color: var(--support-muted);
}

.support-v2-filters {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 14px 12px;
}

.support-v2-filters::-webkit-scrollbar {
  display: none;
}

.support-v2-filters button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  color: var(--support-muted);
  background: transparent;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
}

.support-v2-filters button:hover,
.support-v2-filters button.active {
  color: var(--support-text);
  background: var(--support-soft);
}

.support-v2-filters button.active {
  color: #968fff;
}

.support-v2-ticket-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 14px;
  scrollbar-color: rgba(133, 141, 188, 0.26) transparent;
  scrollbar-width: thin;
}

.support-v2-ticket-card {
  position: relative;
  width: 100%;
  display: block;
  text-align: start;
  color: var(--support-text);
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  padding: 14px 13px 13px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.support-v2-ticket-card+.support-v2-ticket-card {
  margin-top: 5px;
}

.support-v2-ticket-card:hover {
  background: var(--support-soft);
}

.support-v2-ticket-card.active {
  border-color: rgba(119, 108, 255, 0.32);
  background: linear-gradient(120deg, rgba(119, 108, 255, 0.14), rgba(68, 190, 232, 0.06));
  box-shadow: inset 3px 0 var(--support-primary);
}

[dir='rtl'] .support-v2-ticket-card.active {
  box-shadow: inset -3px 0 var(--support-primary);
}

.support-v2-ticket-card[data-priority='urgent']::after {
  position: absolute;
  content: '';
  inset-inline-start: 4px;
  top: 18px;
  width: 4px;
  height: 20px;
  border-radius: 4px;
  background: #ff667a;
}

.support-v2-ticket-top,
.support-v2-ticket-card footer,
.support-v2-detail-badges,
.support-v2-composer-tools {
  display: flex;
  align-items: center;
}

.support-v2-ticket-top {
  justify-content: space-between;
  gap: 10px;
}

.support-v2-ticket-no {
  color: #8f89ff;
  font-size: 0.68rem;
  font-weight: 900;
  direction: ltr;
}

.support-v2-ticket-card h3 {
  overflow: hidden;
  color: var(--support-text);
  font-size: 0.86rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 8px 0 4px;
}

.support-v2-ticket-card>p {
  overflow: hidden;
  color: var(--support-muted);
  font-size: 0.7rem;
  line-height: 1.65;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.support-v2-ticket-card footer {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.support-v2-ticket-card footer>span:not(.support-v2-status) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--support-muted);
  font-size: 0.63rem;
}

.support-v2-status,
.support-v2-priority {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  white-space: nowrap;
}

.support-v2-status {
  color: #a4aecd;
  background: rgba(154, 167, 200, 0.1);
  padding: 5px 7px;
}

.support-v2-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.support-v2-status[data-status='open'] {
  color: #64a1ff;
  background: rgba(76, 143, 255, 0.12);
}

.support-v2-status[data-status='in_progress'] {
  color: #9b91ff;
  background: rgba(119, 108, 255, 0.13);
}

.support-v2-status[data-status='waiting'] {
  color: #efbd67;
  background: rgba(239, 189, 103, 0.12);
}

.support-v2-status[data-status='resolved'] {
  color: #48cf9f;
  background: rgba(72, 207, 159, 0.12);
}

.support-v2-status[data-status='closed'] {
  color: #98a0b7;
  background: rgba(152, 160, 183, 0.1);
}

.support-v2-priority {
  padding: 4px 7px;
  color: #a5aec7;
  background: rgba(165, 174, 199, 0.1);
}

.support-v2-priority[data-priority='medium'] {
  color: #67a2ff;
  background: rgba(103, 162, 255, 0.11);
}

.support-v2-priority[data-priority='high'] {
  color: #efb45e;
  background: rgba(239, 180, 94, 0.11);
}

.support-v2-priority[data-priority='urgent'] {
  color: #ff7386;
  background: rgba(255, 91, 115, 0.12);
}

.support-v2-detail {
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 2%, rgba(119, 108, 255, 0.07), transparent 30%),
    var(--support-panel);
}

.support-v2-detail-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.support-v2-detail-head {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 19px clamp(18px, 2.6vw, 30px);
  border-bottom: 1px solid var(--support-line);
}

.support-v2-back {
  display: none;
  gap: 5px;
  color: var(--support-muted);
  background: transparent;
  padding: 5px 0;
  font-size: 0.75rem;
  font-weight: 800;
}

.support-v2-detail-title {
  min-width: 0;
  flex: 1;
}

.support-v2-detail-title>div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.support-v2-detail-title>div>span {
  direction: ltr;
  color: #8983f9;
  font-size: 0.68rem;
  font-weight: 900;
}

.support-v2-detail-title h2 {
  overflow: hidden;
  color: var(--support-text);
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.support-v2-detail-title p {
  overflow: hidden;
  color: var(--support-muted);
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0 0;
}

.support-v2-detail-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.support-v2-properties {
  min-height: 74px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  padding: 12px clamp(18px, 2.6vw, 30px);
  border-bottom: 1px solid var(--support-line);
  background: color-mix(in srgb, var(--support-panel-2) 70%, transparent);
}

.support-v2-properties label,
.support-v2-properties>div {
  min-width: 118px;
  display: grid;
  gap: 5px;
}

.support-v2-properties label>span,
.support-v2-properties>div>span {
  color: var(--support-muted);
  font-size: 0.6rem;
  font-weight: 800;
}

.support-v2-properties select {
  min-height: 34px;
  color: var(--support-text);
  border: 1px solid var(--support-line);
  border-radius: 9px;
  outline: 0;
  background: var(--support-panel);
  padding: 5px 8px;
  font-size: 0.68rem;
  font-weight: 800;
}

.support-v2-properties select:focus {
  border-color: rgba(119, 108, 255, 0.55);
}

.support-v2-properties>div strong {
  color: var(--support-text);
  font-size: 0.74rem;
}

.support-v2-property-action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #54d4a7;
  border: 1px solid rgba(70, 205, 161, 0.18);
  border-radius: 10px;
  background: rgba(70, 205, 161, 0.08);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 0.67rem;
  font-weight: 900;
}

.support-v2-delete-ticket {
  width: 35px;
  height: 35px;
  color: #ff7183;
  border: 1px solid rgba(255, 101, 122, 0.16);
  border-radius: 10px;
  background: rgba(255, 101, 122, 0.08);
}

.support-v2-messages {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 25px clamp(18px, 3vw, 38px);
  scrollbar-color: rgba(133, 141, 188, 0.25) transparent;
  scrollbar-width: thin;
}

.support-v2-message {
  max-width: min(76%, 720px);
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.support-v2-message.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.support-v2-message-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #d7dcf1;
  border: 1px solid var(--support-line);
  border-radius: 11px;
  background: var(--support-panel-2);
  font-size: 0.72rem;
  font-weight: 900;
}

.support-v2-message.is-agent .support-v2-message-avatar {
  color: #fff;
  border-color: rgba(119, 108, 255, 0.25);
  background: linear-gradient(145deg, #776cff, #568ee9);
}

.support-v2-message-body {
  min-width: 0;
  color: var(--support-text);
  border: 1px solid var(--support-line);
  border-radius: 5px 17px 17px 17px;
  background: var(--support-panel-2);
  padding: 11px 13px;
  box-shadow: 0 8px 22px rgba(4, 8, 26, 0.08);
}

[dir='rtl'] .support-v2-message-body {
  border-radius: 17px 5px 17px 17px;
}

.support-v2-message.is-mine .support-v2-message-body {
  border-color: rgba(119, 108, 255, 0.18);
  border-radius: 17px 5px 17px 17px;
  background: linear-gradient(135deg, rgba(119, 108, 255, 0.16), rgba(78, 132, 235, 0.1));
}

[dir='rtl'] .support-v2-message.is-mine .support-v2-message-body {
  border-radius: 5px 17px 17px 17px;
}

.support-v2-message-body header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

.support-v2-message-body header strong {
  color: var(--support-text);
  font-size: 0.7rem;
}

.support-v2-message-body header>span {
  color: #8d87ff;
  border-radius: 999px;
  background: rgba(119, 108, 255, 0.1);
  padding: 3px 6px;
  font-size: 0.55rem;
  font-weight: 900;
}

.support-v2-message-body time {
  direction: ltr;
  color: var(--support-muted);
  font-size: 0.56rem;
  margin-inline-start: auto;
}

.support-v2-message-body>p {
  color: color-mix(in srgb, var(--support-text) 91%, var(--support-muted));
  font-size: 0.78rem;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.support-v2-message.is-internal {
  max-width: min(88%, 800px);
  align-self: center;
}

.support-v2-message.is-internal .support-v2-message-avatar {
  color: #efbd67;
  background: rgba(239, 189, 103, 0.1);
}

.support-v2-message.is-internal .support-v2-message-body {
  border: 1px dashed rgba(239, 189, 103, 0.34);
  border-radius: 14px;
  background: rgba(239, 189, 103, 0.07);
}

.support-v2-message.is-internal .support-v2-message-body header>span {
  color: #efbd67;
  background: rgba(239, 189, 103, 0.11);
}

.support-v2-attachment {
  min-width: min(300px, 100%);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--support-text);
  border: 1px solid var(--support-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  padding: 9px 10px;
  margin-top: 9px;
  text-decoration: none;
}

.support-v2-attachment>span {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #8e87ff;
  border-radius: 9px;
  background: rgba(119, 108, 255, 0.12);
}

.support-v2-attachment div {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.support-v2-attachment strong {
  overflow: hidden;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-v2-attachment small {
  color: var(--support-muted);
  font-size: 0.56rem;
}

.support-v2-composer {
  display: grid;
  gap: 8px;
  padding: 13px clamp(18px, 2.6vw, 30px) 16px;
  border-top: 1px solid var(--support-line);
  background: var(--support-panel);
}

.support-v2-composer textarea {
  width: 100%;
  min-height: 48px;
  max-height: 130px;
  resize: vertical;
  color: var(--support-text);
  border: 1px solid var(--support-line);
  border-radius: 13px;
  outline: 0;
  background: var(--support-panel-2);
  padding: 12px 13px;
  font-size: 0.78rem;
  line-height: 1.6;
}

.support-v2-composer textarea:focus {
  border-color: rgba(119, 108, 255, 0.52);
  box-shadow: 0 0 0 3px rgba(119, 108, 255, 0.08);
}

.support-v2-composer-tools {
  gap: 9px;
}

.support-v2-composer-tools .support-v2-primary {
  min-height: 37px;
  margin-inline-start: auto;
  padding: 8px 14px;
  font-size: 0.7rem;
}

.support-v2-attach,
.support-v2-internal {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--support-muted);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 800;
}

.support-v2-attach:hover,
.support-v2-internal:hover {
  color: var(--support-text);
  background: var(--support-soft);
}

.support-v2-attach input {
  display: none;
}

.support-v2-internal input {
  accent-color: var(--support-primary);
}

.support-v2-composer-error {
  color: #ff7586;
  font-size: 0.65rem;
  font-weight: 800;
}

.support-v2-closed {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px clamp(18px, 2.6vw, 30px);
  border-top: 1px solid var(--support-line);
  background: var(--support-panel-2);
}

.support-v2-closed>span {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #91a0bd;
  border-radius: 11px;
  background: rgba(144, 157, 185, 0.1);
}

.support-v2-closed>div {
  flex: 1;
}

.support-v2-closed strong {
  color: var(--support-text);
  font-size: 0.76rem;
}

.support-v2-closed p {
  color: var(--support-muted);
  font-size: 0.65rem;
  margin: 3px 0 0;
}

.support-v2-closed .support-v2-secondary {
  min-height: 36px;
  font-size: 0.66rem;
}

.support-v2-welcome {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 5vw, 58px);
}

.support-v2-welcome-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(147, 139, 255, 0.25);
  border-radius: 21px;
  background: linear-gradient(145deg, #776cff, #4f8cdb);
  box-shadow: 0 15px 36px rgba(81, 91, 222, 0.28);
}

.support-v2-welcome h2 {
  color: var(--support-text);
  font-size: 1.4rem;
  margin: 18px 0 7px;
}

.support-v2-welcome>p {
  max-width: 590px;
  color: var(--support-muted);
  font-size: 0.78rem;
  line-height: 1.75;
  margin: 0;
}

.support-v2-quick-grid {
  width: min(100%, 720px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.support-v2-quick-grid button {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  text-align: start;
  color: var(--support-text);
  border: 1px solid var(--support-line);
  border-radius: 15px;
  background: var(--support-panel-2);
  padding: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.support-v2-quick-grid button:hover {
  border-color: rgba(119, 108, 255, 0.38);
  background: var(--support-soft);
  transform: translateY(-2px);
}

.support-v2-quick-grid button>span {
  width: 38px;
  height: 38px;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  color: #938cff;
  border-radius: 11px;
  background: rgba(119, 108, 255, 0.12);
}

.support-v2-quick-grid strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-v2-quick-grid small {
  overflow: hidden;
  color: var(--support-muted);
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-v2-quick-grid button>svg {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--support-muted);
}

.support-v2-promise {
  width: min(100%, 720px);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  color: #50cfa2;
  border: 1px solid rgba(72, 207, 159, 0.15);
  border-radius: 14px;
  background: rgba(72, 207, 159, 0.06);
  padding: 11px 13px;
  margin-top: 11px;
}

.support-v2-promise>div {
  display: grid;
  gap: 2px;
}

.support-v2-promise strong {
  color: var(--support-text);
  font-size: 0.69rem;
}

.support-v2-promise small {
  color: var(--support-muted);
  font-size: 0.59rem;
}

.support-v2-loading,
.support-v2-error,
.support-v2-list-empty,
.support-v2-chat-empty {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  color: var(--support-muted);
  padding: 18px;
}

.support-v2-loading p,
.support-v2-error small,
.support-v2-list-empty small {
  font-size: 0.67rem;
  margin: 0;
}

.support-v2-error strong,
.support-v2-list-empty strong {
  color: var(--support-text);
  font-size: 0.77rem;
}

.support-v2-error>span,
.support-v2-list-empty>span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: #938cff;
  border-radius: 13px;
  background: var(--support-soft);
}

.support-v2-chat-empty {
  height: 100%;
  min-height: 230px;
  font-size: 0.72rem;
}

.support-v2-modal .company-crm-modal {
  border-color: rgba(119, 108, 255, 0.28);
}

.support-v2-modal-head>span {
  color: #fff;
  background: linear-gradient(145deg, #776cff, #5b91e9);
}

.support-v2-modal-head p {
  color: var(--support-muted);
  font-size: 0.68rem;
  margin: 3px 0 0;
}

.support-v2-modal-file input {
  min-height: auto;
  padding: 10px;
}

.support-v2-modal-file small {
  color: var(--support-muted);
  font-size: 0.6rem;
  font-weight: 600;
}

.support-v2-modal .company-crm-field input:focus,
.support-v2-modal .company-crm-field select:focus,
.support-v2-modal .company-crm-field textarea:focus {
  border-color: rgba(119, 108, 255, 0.62);
  box-shadow: 0 0 0 3px rgba(119, 108, 255, 0.09);
}

@media (max-width: 1100px) {
  .support-v2-metrics.company-crm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-v2-workspace {
    grid-template-columns: minmax(285px, 330px) minmax(0, 1fr);
  }

  .support-v2-message {
    max-width: 86%;
  }
}

@media (max-width: 820px) {
  .support-v2-page {
    gap: 13px;
    padding-bottom: 16px;
  }

  .support-v2-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 26px 22px;
    border-radius: 22px;
  }

  .support-v2-hero-visual {
    display: none;
  }

  .support-v2-hero h1 {
    font-size: 2rem;
  }

  .support-v2-workspace {
    height: min(720px, calc(100dvh - 96px));
    min-height: 590px;
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .support-v2-sidebar {
    border-inline-end: 0;
  }

  .support-v2-workspace:not(.has-active-ticket) .support-v2-detail {
    display: none;
  }

  .support-v2-workspace.has-active-ticket .support-v2-sidebar {
    display: none;
  }

  .support-v2-back {
    display: inline-flex;
  }

  .support-v2-detail-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .support-v2-detail-title {
    width: calc(100% - 90px);
  }

  .support-v2-detail-badges {
    width: 100%;
    justify-content: flex-start;
    padding-inline-start: 52px;
  }
}

@media (max-width: 560px) {
  .support-v2-page {
    padding-inline: 0;
  }

  .support-v2-hero {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .support-v2-eyebrow {
    font-size: 0.65rem;
  }

  .support-v2-hero p {
    font-size: 0.78rem;
  }

  .support-v2-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .support-v2-hero-actions .support-v2-primary {
    width: 100%;
  }

  .support-v2-availability {
    justify-content: center;
  }

  .support-v2-metrics.company-crm-kpi-grid {
    grid-template-columns: 1fr;
  }

  .support-v2-metrics .company-crm-kpi {
    min-height: 94px;
  }

  .support-v2-workspace {
    min-height: 560px;
    border-radius: 17px;
  }

  .support-v2-sidebar>header {
    padding: 18px 15px 12px;
  }

  .support-v2-detail-head {
    padding: 15px;
  }

  .support-v2-detail-title {
    width: calc(100% - 80px);
  }

  .support-v2-detail-badges {
    padding-inline-start: 0;
  }

  .support-v2-properties {
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    padding: 10px 15px;
    scrollbar-width: none;
  }

  .support-v2-properties label,
  .support-v2-properties>div {
    min-width: 130px;
  }

  .support-v2-properties .support-v2-property-action {
    min-width: max-content;
    align-self: flex-end;
  }

  .support-v2-properties .support-v2-delete-ticket {
    flex: 0 0 auto;
    align-self: flex-end;
  }

  .support-v2-messages {
    gap: 14px;
    padding: 20px 13px;
  }

  .support-v2-message,
  .support-v2-message.is-internal {
    max-width: 96%;
  }

  .support-v2-message-avatar {
    width: 29px;
    height: 29px;
  }

  .support-v2-message-body {
    padding: 10px 11px;
  }

  .support-v2-composer {
    padding: 11px 13px 13px;
  }

  .support-v2-composer-tools {
    flex-wrap: wrap;
  }

  .support-v2-composer-tools .support-v2-primary {
    flex: 1;
  }

  .support-v2-attach,
  .support-v2-internal {
    max-width: calc(50% - 5px);
  }

  .support-v2-attach span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .support-v2-welcome {
    justify-content: flex-start;
    padding: 34px 16px;
  }

  .support-v2-quick-grid {
    grid-template-columns: 1fr;
  }

  .support-v2-closed {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .support-v2-closed .support-v2-secondary {
    width: 100%;
  }
}

/* =========================================================
   Company finance & accounting workspace
   ========================================================= */
.company-finance-page {
  --fin-gold: #f5b942;
  --fin-gold-soft: rgba(245, 185, 66, 0.12);
  --fin-green: #34d399;
  --fin-red: #fb7185;
  --fin-blue: #60a5fa;
}

.company-finance-hero {
  position: relative;
  min-height: 178px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(245, 185, 66, 0.19);
  border-radius: 25px;
  background:
    radial-gradient(circle at 88% 20%, rgba(245, 185, 66, 0.16), transparent 28%),
    radial-gradient(circle at 12% 110%, rgba(109, 99, 234, 0.2), transparent 34%),
    linear-gradient(125deg, rgba(17, 25, 45, 0.98), rgba(13, 20, 38, 0.96));
  box-shadow: 0 24px 62px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  isolation: isolate;
}

.company-finance-hero::before,
.company-finance-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: '';
}

.company-finance-hero::before {
  inset-inline-end: 70px;
  top: -95px;
  width: 260px;
  height: 260px;
  border: 1px dashed rgba(245, 185, 66, 0.18);
}

.company-finance-hero::after {
  inset-inline-end: 136px;
  top: -30px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(245, 185, 66, 0.1);
}

html.light .company-finance-hero {
  border-color: rgba(191, 128, 8, 0.17);
  background:
    radial-gradient(circle at 88% 20%, rgba(245, 185, 66, 0.13), transparent 29%),
    radial-gradient(circle at 12% 110%, rgba(79, 70, 229, 0.1), transparent 34%),
    linear-gradient(125deg, #fff, #f8faff);
  box-shadow: 0 18px 48px rgba(30, 41, 59, 0.1), inset 0 1px 0 #fff;
}

.company-finance-hero-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 17px;
}

.company-finance-hero-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background: linear-gradient(145deg, #f5b942, #e28428 52%, #6d63ea);
  box-shadow: 0 16px 34px rgba(226, 132, 40, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.company-finance-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--fin-gold);
  font-size: 0.68rem;
  font-weight: 900;
}

html.light .company-finance-eyebrow {
  color: #ad6900;
}

.company-finance-hero h1 {
  margin: 0;
  color: var(--crm-text);
  font-size: clamp(1.35rem, 2.35vw, 1.85rem);
  font-weight: 950;
  letter-spacing: -0.035em;
}

.company-finance-hero p {
  max-width: 650px;
  margin: 5px 0 0;
  color: var(--crm-muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.75;
}

.company-finance-hero-side {
  min-width: 286px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 13px;
}

.company-finance-hero-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(245, 185, 66, 0.16);
  border-radius: 14px;
  background: rgba(245, 185, 66, 0.07);
  backdrop-filter: blur(8px);
}

.company-finance-hero-chip>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--fin-gold);
  border-radius: 10px;
  background: var(--fin-gold-soft);
}

.company-finance-hero-chip small,
.company-finance-hero-chip strong {
  display: block;
}

.company-finance-hero-chip small {
  color: var(--crm-muted);
  font-size: 0.55rem;
  font-weight: 700;
}

.company-finance-hero-chip strong {
  margin-top: 2px;
  color: var(--crm-text);
  font-size: 0.68rem;
  font-weight: 900;
}

.company-finance-hero-actions,
.company-finance-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-finance-tabs {
  scrollbar-width: thin;
  overflow-x: auto;
}

.company-finance-tabs .company-crm-tab.active {
  color: #e4a52e;
  border-color: rgba(245, 185, 66, 0.24);
  background: var(--fin-gold-soft);
  box-shadow: 0 7px 18px rgba(226, 132, 40, 0.1);
}

html.light .company-finance-tabs .company-crm-tab.active {
  color: #a56200;
}

.company-finance-metrics .company-finance-kpi:nth-child(1) {
  border-top-color: rgba(52, 211, 153, 0.5);
}

.company-finance-metrics .company-finance-kpi:nth-child(2) {
  border-top-color: rgba(251, 113, 133, 0.5);
}

.company-finance-metrics .company-finance-kpi:nth-child(3) {
  border-top-color: rgba(167, 139, 250, 0.5);
}

.company-finance-metrics .company-finance-kpi:nth-child(4) {
  border-top-color: rgba(251, 191, 36, 0.5);
}

.company-finance-content {
  animation: company-finance-content-in 220ms ease both;
}

@keyframes company-finance-content-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.company-finance-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0 2px;
}

.company-finance-section-head>div:first-child>span {
  color: var(--fin-gold);
  font-size: 0.61rem;
  font-weight: 900;
}

html.light .company-finance-section-head>div:first-child>span {
  color: #a56200;
}

.company-finance-section-head h2 {
  margin: 3px 0 2px;
  color: var(--crm-text);
  font-size: 1.08rem;
  font-weight: 950;
}

.company-finance-section-head p {
  max-width: 690px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 0.65rem;
  font-weight: 650;
  line-height: 1.7;
}

.company-finance-overview-kpis,
.company-finance-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.company-finance-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 12px;
  margin-bottom: 12px;
}

.company-finance-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-finance-panel,
.company-finance-report-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 18px;
  background: var(--crm-panel);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.07);
}

.company-finance-panel>header,
.company-finance-report-card>header {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--crm-line);
}

.company-finance-panel>header>div,
.company-finance-report-card>header>div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-finance-panel>header>div>span,
.company-finance-report-card>header>div>span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--fin-gold);
  border-radius: 11px;
  background: var(--fin-gold-soft);
}

.company-finance-panel h3,
.company-finance-report-card h3 {
  margin: 0;
  color: var(--crm-text);
  font-size: 0.75rem;
  font-weight: 900;
}

.company-finance-panel header p,
.company-finance-report-card header p {
  margin: 2px 0 0;
  color: var(--crm-muted);
  font-size: 0.55rem;
  font-weight: 650;
}

.company-finance-panel>header>button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--crm-primary);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 900;
}

.company-finance-expense-panel {
  padding-bottom: 8px;
}

.company-finance-expense-panel>header>strong {
  color: var(--crm-text);
  font-size: 0.8rem;
  font-weight: 900;
}

.company-finance-category {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px 4px;
}

.company-finance-category>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.company-finance-category>div span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--crm-muted);
  font-size: 0.61rem;
  font-weight: 800;
}

.company-finance-category>div span i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6d63ea;
}

.company-finance-category>div span i[data-index="1"] {
  background: #22c7df;
}

.company-finance-category>div span i[data-index="2"] {
  background: #f5b942;
}

.company-finance-category>div span i[data-index="3"] {
  background: #34d399;
}

.company-finance-category>div span i[data-index="4"] {
  background: #fb7185;
}

.company-finance-category>div strong {
  color: var(--crm-text);
  font-size: 0.61rem;
  font-weight: 900;
}

.company-finance-category>span,
.company-finance-report-bars b {
  height: 7px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
}

.company-finance-category>span i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d63ea, #22c7df);
}

.company-finance-pulse {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(245, 185, 66, 0.15), transparent 40%),
    var(--crm-panel);
}

.company-finance-pulse::after {
  position: absolute;
  inset-inline-end: -38px;
  top: -38px;
  width: 120px;
  height: 120px;
  border: 1px dashed rgba(245, 185, 66, 0.18);
  border-radius: 50%;
  content: '';
}

.company-finance-pulse-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--fin-gold);
  border: 1px solid rgba(245, 185, 66, 0.18);
  border-radius: 15px;
  background: var(--fin-gold-soft);
}

.company-finance-pulse>small {
  margin-top: 13px;
  color: var(--fin-gold);
  font-size: 0.57rem;
  font-weight: 900;
}

.company-finance-pulse>h3 {
  margin-top: 3px;
  font-size: 0.94rem;
}

.company-finance-pulse>p {
  margin: 4px 0 13px;
  color: var(--crm-muted);
  font-size: 0.61rem;
  font-weight: 650;
  line-height: 1.65;
}

.company-finance-pulse-values {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.company-finance-pulse-values>div {
  padding: 9px;
  border: 1px solid var(--crm-line);
  border-radius: 11px;
  background: rgba(148, 163, 184, 0.04);
}

.company-finance-pulse-values span,
.company-finance-pulse-values strong {
  display: block;
}

.company-finance-pulse-values span {
  color: var(--crm-muted);
  font-size: 0.52rem;
  font-weight: 700;
}

.company-finance-pulse-values strong {
  margin-top: 2px;
  color: var(--crm-text);
  font-size: 0.61rem;
  font-weight: 900;
}

.company-finance-quick-links {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.company-finance-quick-links button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  color: var(--crm-text);
  border: 1px solid var(--crm-line);
  border-radius: 9px;
  background: var(--crm-panel-soft);
  cursor: pointer;
  font-size: 0.54rem;
  font-weight: 800;
}

.company-finance-summary,
.company-finance-account-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.company-finance-summary>div,
.company-finance-account-summary>div {
  position: relative;
  overflow: hidden;
  padding: 13px 15px;
  border: 1px solid var(--crm-line);
  border-radius: 14px;
  background: var(--crm-panel);
}

.company-finance-summary>div::before,
.company-finance-account-summary>div::before {
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--crm-primary);
  content: '';
}

.company-finance-summary>div[data-tone="emerald"]::before {
  background: var(--fin-green);
}

.company-finance-summary>div[data-tone="rose"]::before {
  background: var(--fin-red);
}

.company-finance-summary>div[data-tone="amber"]::before {
  background: var(--fin-gold);
}

.company-finance-summary>div[data-tone="purple"]::before {
  background: #a78bfa;
}

.company-finance-summary span,
.company-finance-account-summary span {
  display: block;
  color: var(--crm-muted);
  font-size: 0.57rem;
  font-weight: 750;
}

.company-finance-summary strong,
.company-finance-account-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--crm-text);
  font-size: 0.78rem;
  font-weight: 950;
}

.company-finance-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.company-finance-toolbar>label {
  min-width: 230px;
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  padding: 0 11px;
  color: var(--crm-muted);
  border: 1px solid var(--crm-line);
  border-radius: 11px;
  background: var(--crm-panel);
}

.company-finance-toolbar input,
.company-finance-toolbar select,
.company-finance-report-filter input {
  height: 40px;
  color: var(--crm-text);
  border: 1px solid var(--crm-line);
  outline: 0;
  border-radius: 11px;
  background: var(--crm-panel);
  font-size: 0.61rem;
  font-weight: 700;
}

.company-finance-toolbar label input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.company-finance-toolbar select {
  min-width: 170px;
  padding: 0 11px;
}

.company-finance-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--crm-line);
  border-radius: 16px;
  background: var(--crm-panel);
}

.company-finance-panel .company-finance-table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.company-finance-table {
  width: 100%;
  min-width: 690px;
  border-collapse: collapse;
  color: var(--crm-text);
  text-align: start;
}

.company-finance-table th,
.company-finance-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--crm-line);
  text-align: start;
  vertical-align: middle;
}

.company-finance-table th {
  color: var(--crm-muted);
  background: rgba(148, 163, 184, 0.035);
  font-size: 0.55rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-finance-table td {
  color: var(--crm-text);
  font-size: 0.59rem;
  font-weight: 650;
}

.company-finance-table tbody tr:last-child td {
  border-bottom: 0;
}

.company-finance-table tbody tr:hover {
  background: rgba(148, 163, 184, 0.035);
}

.company-finance-table .is-positive {
  color: var(--fin-green);
}

.company-finance-table .is-negative {
  color: var(--fin-red);
}

.company-finance-status,
.company-finance-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: var(--crm-muted);
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.06);
  font-size: 0.52rem;
  font-weight: 850;
  white-space: nowrap;
}

.company-finance-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.company-finance-status[data-tone="emerald"] {
  color: var(--fin-green);
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.16);
}

.company-finance-status[data-tone="rose"] {
  color: var(--fin-red);
  background: rgba(251, 113, 133, 0.08);
  border-color: rgba(251, 113, 133, 0.16);
}

.company-finance-status[data-tone="amber"] {
  color: var(--fin-gold);
  background: var(--fin-gold-soft);
  border-color: rgba(245, 185, 66, 0.17);
}

.company-finance-reference {
  color: var(--crm-primary);
  font-family: var(--font-numbers, monospace);
  font-weight: 900;
  white-space: nowrap;
}

.company-finance-link {
  padding: 0;
  color: var(--crm-primary);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-numbers, monospace);
  font-weight: 900;
}

.company-finance-party {
  display: flex;
  align-items: center;
  gap: 9px;
}

.company-finance-party>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #6d63ea, #4f46d9);
  font-weight: 900;
}

.company-finance-party.is-compact>span {
  width: 30px;
  height: 30px;
}

.company-finance-party strong,
.company-finance-party small,
.company-finance-date strong,
.company-finance-date small {
  display: block;
}

.company-finance-party small,
.company-finance-date small,
.company-finance-cell-note {
  margin-top: 2px;
  color: var(--crm-muted);
  font-size: 0.5rem;
  font-weight: 650;
}

.company-finance-row-actions,
.company-finance-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.company-finance-collect {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  color: var(--fin-green);
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 9px;
  background: rgba(52, 211, 153, 0.08);
  cursor: pointer;
  font-size: 0.51rem;
  font-weight: 900;
}

.company-finance-no-results,
.company-finance-notice {
  padding: 14px;
  color: var(--crm-muted);
  text-align: center;
  font-size: 0.61rem;
  font-weight: 750;
}

.company-finance-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  color: var(--fin-gold);
  border: 1px solid rgba(245, 185, 66, 0.18);
  border-radius: 13px;
  background: var(--fin-gold-soft);
  text-align: start;
}

.company-finance-notice div {
  flex: 1;
}

.company-finance-notice strong,
.company-finance-notice span {
  display: block;
}

.company-finance-notice span {
  margin-top: 2px;
  color: var(--crm-muted);
  font-size: 0.54rem;
}

.company-finance-notice button {
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.56rem;
  font-weight: 900;
}

.company-finance-account-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.company-finance-account-summary>div[data-type="asset"]::before {
  background: #6d63ea;
}

.company-finance-account-summary>div[data-type="liability"]::before {
  background: var(--fin-red);
}

.company-finance-account-summary>div[data-type="equity"]::before {
  background: var(--fin-blue);
}

.company-finance-account-summary>div[data-type="revenue"]::before {
  background: var(--fin-green);
}

.company-finance-account-summary>div[data-type="expense"]::before {
  background: var(--fin-gold);
}

.company-finance-account-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.company-finance-account-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 16px;
  background: var(--crm-panel);
}

.company-finance-account-group>header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border-bottom: 1px solid var(--crm-line);
  background: rgba(148, 163, 184, 0.035);
}

.company-finance-account-group>header>span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--crm-primary);
  border-radius: 11px;
  background: var(--crm-primary-soft);
}

.company-finance-account-group>header h3 {
  margin: 0;
  color: var(--crm-text);
  font-size: 0.7rem;
  font-weight: 900;
}

.company-finance-account-group>header p {
  margin: 1px 0 0;
  color: var(--crm-muted);
  font-size: 0.5rem;
}

.company-finance-account-group>header>strong {
  color: var(--crm-text);
  font-size: 0.61rem;
}

.company-finance-account-node {
  padding-inline-start: calc(12px + (var(--account-level) * 15px));
}

.company-finance-account-node>.company-finance-account-node {
  padding-inline-start: calc(24px + (var(--account-level) * 15px));
}

.company-finance-account-node>div:first-child {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--crm-line);
}

.company-finance-account-main,
.company-finance-account-side {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-finance-account-code {
  color: var(--crm-primary);
  font-family: var(--font-numbers, monospace);
  font-size: 0.54rem;
  font-weight: 900;
}

.company-finance-account-main strong,
.company-finance-account-main small {
  display: block;
}

.company-finance-account-main strong {
  color: var(--crm-text);
  font-size: 0.59rem;
}

.company-finance-account-main small {
  color: var(--crm-muted);
  font-size: 0.48rem;
}

.company-finance-account-side>strong {
  color: var(--crm-text);
  font-size: 0.56rem;
}

.company-finance-cash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.company-finance-cash-card {
  position: relative;
  min-width: 0;
  min-height: 196px;
  overflow: hidden;
  padding: 17px;
  border: 1px solid var(--crm-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(109, 99, 234, 0.12), transparent 38%),
    var(--crm-panel);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.07);
}

.company-finance-cash-card[data-type="bank"] {
  background:
    radial-gradient(circle at 100% 0, rgba(96, 165, 250, 0.14), transparent 38%),
    var(--crm-panel);
}

.company-finance-cash-card>header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-finance-cash-card>header>span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--crm-primary);
  border-radius: 13px;
  background: var(--crm-primary-soft);
}

.company-finance-cash-card>header>div:nth-child(2) {
  flex: 1;
}

.company-finance-cash-card small {
  color: var(--crm-muted);
  font-size: 0.5rem;
  font-weight: 700;
}

.company-finance-cash-card h3 {
  margin: 2px 0 0;
  color: var(--crm-text);
  font-size: 0.72rem;
  font-weight: 900;
}

.company-finance-cash-balance {
  display: block;
  margin-top: 22px;
  color: var(--fin-green);
  font-size: 1rem;
  font-weight: 950;
}

.company-finance-cash-card>p {
  margin: 10px 0 0;
  color: var(--crm-muted);
  font-size: 0.56rem;
}

.company-finance-bank-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 11px;
  color: var(--crm-muted);
  font-size: 0.53rem;
}

.company-finance-bank-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-finance-bank-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-finance-bank-fields[hidden] {
  display: none;
}

.company-finance-report-filter {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--crm-line);
  border-radius: 14px;
  background: var(--crm-panel);
}

.company-finance-report-filter label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--crm-muted);
  font-size: 0.54rem;
  font-weight: 800;
}

.company-finance-report-filter input {
  min-width: 160px;
  padding: 0 10px;
}

.company-finance-report-card>header>strong {
  padding: 5px 9px;
  color: var(--fin-green);
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.09);
  font-size: 0.54rem;
}

.company-finance-report-card>header>strong[data-result="loss"] {
  color: var(--fin-red);
  background: rgba(251, 113, 133, 0.09);
}

.company-finance-report-bars {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
}

.company-finance-report-bars>div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 12px;
}

.company-finance-report-bars span {
  color: var(--crm-muted);
  font-size: 0.6rem;
  font-weight: 800;
}

.company-finance-report-bars strong {
  color: var(--crm-text);
  font-size: 0.62rem;
  text-align: end;
}

.company-finance-report-bars b i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--fin-green);
}

.company-finance-report-bars b i[data-tone="rose"] {
  background: var(--fin-red);
}

.company-finance-balance-equation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.company-finance-balance-equation>div {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 17px;
  border: 1px solid var(--crm-line);
  border-radius: 18px;
  background: var(--crm-panel);
}

.company-finance-balance-equation>div span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--crm-muted);
  font-size: 0.61rem;
  font-weight: 850;
}

.company-finance-balance-equation>div strong {
  color: var(--crm-text);
  font-size: 0.92rem;
  font-weight: 950;
}

.company-finance-balance-equation>b {
  color: var(--crm-muted);
  text-align: center;
  font-size: 1.2rem;
}

.company-finance-balance-equation>div[data-type="asset"] {
  border-top-color: rgba(109, 99, 234, 0.45);
}

.company-finance-balance-equation>div[data-type="liability"] {
  border-top-color: rgba(251, 113, 133, 0.45);
}

.company-finance-balance-equation>div[data-type="equity"] {
  border-top-color: rgba(96, 165, 250, 0.45);
}

.company-finance-balance-status,
.company-finance-tax-net {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 15px;
  color: var(--fin-green);
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 15px;
  background: rgba(52, 211, 153, 0.07);
}

.company-finance-balance-status[data-balanced="false"] {
  color: var(--fin-gold);
  border-color: rgba(245, 185, 66, 0.18);
  background: var(--fin-gold-soft);
}

.company-finance-balance-status strong {
  color: currentColor;
  font-size: 0.65rem;
}

.company-finance-balance-status p {
  margin: 2px 0 0;
  color: var(--crm-muted);
  font-size: 0.55rem;
}

.company-finance-tax-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.company-finance-tax-grid article {
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 17px;
  background: var(--crm-panel);
}

.company-finance-tax-grid header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
}

.company-finance-tax-grid header>span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--fin-green);
  border-radius: 13px;
  background: rgba(52, 211, 153, 0.09);
}

.company-finance-tax-grid article[data-tone="rose"] header>span {
  color: var(--fin-red);
  background: rgba(251, 113, 133, 0.09);
}

.company-finance-tax-grid small,
.company-finance-tax-grid strong {
  display: block;
}

.company-finance-tax-grid small {
  color: var(--crm-muted);
  font-size: 0.55rem;
  font-weight: 700;
}

.company-finance-tax-grid strong {
  margin-top: 3px;
  color: var(--crm-text);
  font-size: 0.82rem;
  font-weight: 950;
}

.company-finance-tax-grid footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--crm-line);
  background: rgba(148, 163, 184, 0.03);
  color: var(--crm-muted);
  font-size: 0.57rem;
}

.company-finance-tax-grid footer b {
  color: var(--crm-text);
}

.company-finance-tax-net>div {
  flex: 1;
}

.company-finance-tax-net small {
  color: currentColor;
  font-size: 0.52rem;
  font-weight: 800;
}

.company-finance-tax-net h3 {
  margin: 2px 0;
  color: var(--crm-text);
  font-size: 0.73rem;
}

.company-finance-tax-net p {
  margin: 0;
  color: var(--crm-muted);
  font-size: 0.54rem;
}

.company-finance-tax-net>strong {
  color: currentColor;
  font-size: 0.82rem;
  font-weight: 950;
}

.company-finance-tax-net[data-result="payable"] {
  color: var(--fin-gold);
  border-color: rgba(245, 185, 66, 0.18);
  background: var(--fin-gold-soft);
}

.company-finance-empty {
  min-height: 170px;
}

.company-finance-panel>.company-finance-empty {
  min-height: 190px;
  border: 0;
  background: transparent;
}

/* Finance modals */
.company-finance-modal-head>span {
  background: linear-gradient(145deg, #f5b942, #e28428 55%, #6d63ea);
}

.company-finance-modal .company-crm-primary-action {
  background: linear-gradient(135deg, #e7a62e, #d67b24);
  box-shadow: 0 10px 24px rgba(226, 132, 40, 0.22);
}

.company-finance-line-row {
  display: grid;
  grid-template-columns: minmax(190px, 2fr) minmax(80px, 0.65fr) minmax(120px, 0.9fr) minmax(130px, 0.9fr) 32px;
  align-items: end;
  gap: 8px;
  padding: 9px 20px;
}

.company-finance-line-row label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #94a3b8;
  font-size: 0.52rem;
  font-weight: 800;
}

.company-finance-line-row input,
.company-finance-journal-row input,
.company-finance-journal-row select {
  width: 100%;
  min-width: 0;
  height: 39px;
  box-sizing: border-box;
  padding: 0 9px;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  outline: 0;
  background: rgba(15, 23, 42, 0.62);
  font-size: 0.58rem;
  font-weight: 700;
}

html.light .company-finance-line-row input,
html.light .company-finance-journal-row input,
html.light .company-finance-journal-row select {
  color: #172033;
  border-color: rgba(15, 23, 42, 0.1);
  background: #f8faff;
}

.company-finance-line-row>strong {
  padding-bottom: 10px;
  color: #f8fafc;
  font-size: 0.58rem;
  text-align: end;
}

html.light .company-finance-line-row>strong {
  color: #172033;
}

.company-finance-line-row>button,
.company-finance-journal-row>button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  color: #fb7185;
  border: 1px solid rgba(251, 113, 133, 0.16);
  border-radius: 9px;
  background: rgba(251, 113, 133, 0.07);
  cursor: pointer;
}

.company-finance-invoice-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 20px;
}

.company-finance-invoice-meta>div {
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 11px;
  background: rgba(148, 163, 184, 0.04);
}

.company-finance-invoice-meta span,
.company-finance-invoice-meta strong {
  display: block;
}

.company-finance-invoice-meta>div>span:first-child {
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 700;
}

.company-finance-invoice-meta strong {
  margin-top: 3px;
  color: #f8fafc;
  font-size: 0.59rem;
}

html.light .company-finance-invoice-meta strong {
  color: #172033;
}

.company-finance-table-wrap.is-modal {
  margin: 0 20px;
  border-color: rgba(148, 163, 184, 0.12);
  background: transparent;
}

.company-finance-modal .company-finance-table {
  min-width: 600px;
  color: #f8fafc;
}

html.light .company-finance-modal .company-finance-table {
  color: #172033;
}

.company-finance-invoice-totals {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 15px 20px 3px;
}

.company-finance-invoice-totals div {
  min-width: 130px;
}

.company-finance-invoice-totals span,
.company-finance-invoice-totals strong {
  display: block;
  text-align: end;
}

.company-finance-invoice-totals span {
  color: #94a3b8;
  font-size: 0.5rem;
}

.company-finance-invoice-totals strong {
  margin-top: 2px;
  color: #f8fafc;
  font-size: 0.65rem;
}

html.light .company-finance-invoice-totals strong {
  color: #172033;
}

.company-finance-invoice-totals div:last-child strong {
  color: #34d399;
  font-size: 0.75rem;
}

.company-finance-journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 20px 8px;
}

.company-finance-journal-head span,
.company-finance-journal-head small {
  display: block;
}

.company-finance-journal-head span {
  color: #f8fafc;
  font-size: 0.62rem;
  font-weight: 900;
}

html.light .company-finance-journal-head span {
  color: #172033;
}

.company-finance-journal-head small {
  color: #94a3b8;
  font-size: 0.5rem;
}

.company-finance-journal-head button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  color: #f5b942;
  border: 1px solid rgba(245, 185, 66, 0.18);
  border-radius: 9px;
  background: rgba(245, 185, 66, 0.07);
  cursor: pointer;
  font-size: 0.52rem;
  font-weight: 900;
}

.company-finance-journal-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 20px;
}

.company-finance-journal-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(100px, 0.7fr) minmax(100px, 0.7fr) minmax(150px, 1fr) 32px;
  align-items: center;
  gap: 7px;
}

.company-finance-journal-row>button {
  margin: 0;
}

.company-finance-journal-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 8px;
  margin: 13px 20px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.04);
}

.company-finance-journal-totals div span,
.company-finance-journal-totals div strong {
  display: block;
}

.company-finance-journal-totals div span {
  color: #94a3b8;
  font-size: 0.5rem;
}

.company-finance-journal-totals div strong {
  margin-top: 2px;
  color: #f8fafc;
  font-size: 0.62rem;
}

html.light .company-finance-journal-totals div strong {
  color: #172033;
}

.company-finance-journal-totals>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  color: #34d399;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.08);
  font-size: 0.51rem;
  font-weight: 850;
}

.company-finance-journal-totals>span[data-balanced="false"] {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.08);
}

.company-finance-journal-description {
  margin: 16px 20px;
  padding: 11px;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 11px;
  background: rgba(148, 163, 184, 0.04);
  font-size: 0.6rem;
  font-weight: 700;
}

html.light .company-finance-journal-description {
  color: #172033;
}

@media (max-width: 1100px) {
  .company-finance-cash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-finance-account-tree {
    grid-template-columns: 1fr;
  }

  .company-finance-account-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .company-finance-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-finance-hero-side {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .company-finance-overview-grid,
  .company-finance-activity-grid {
    grid-template-columns: 1fr;
  }

  .company-finance-balance-equation {
    grid-template-columns: 1fr;
  }

  .company-finance-balance-equation>b {
    transform: rotate(90deg);
  }

  .company-finance-invoice-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-finance-line-row {
    grid-template-columns: minmax(150px, 1.5fr) 80px 110px 120px 32px;
    min-width: 650px;
  }

  .company-finance-journal-lines {
    overflow-x: auto;
  }

  .company-finance-journal-row {
    min-width: 720px;
  }
}

@media (max-width: 720px) {
  .company-finance-hero {
    min-height: 0;
    padding: 20px;
    border-radius: 20px;
  }

  .company-finance-hero-copy {
    align-items: flex-start;
  }

  .company-finance-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .company-finance-hero-actions,
  .company-finance-head-actions {
    width: 100%;
  }

  .company-finance-hero-actions button,
  .company-finance-head-actions button {
    flex: 1;
  }

  .company-finance-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .company-finance-overview-kpis,
  .company-finance-report-grid,
  .company-finance-summary,
  .company-finance-account-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-finance-cash-grid,
  .company-finance-tax-grid {
    grid-template-columns: 1fr;
  }

  .company-finance-toolbar,
  .company-finance-report-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .company-finance-toolbar>label,
  .company-finance-toolbar select,
  .company-finance-report-filter input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .company-finance-report-filter button {
    width: 100%;
  }

  .company-finance-report-bars>div {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .company-finance-report-bars strong {
    grid-column: 1 / -1;
    text-align: start;
  }

  .company-finance-journal-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-finance-journal-totals>span {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .company-finance-page {
    gap: 13px;
  }

  .company-finance-hero {
    padding: 17px 15px;
  }

  .company-finance-hero-copy {
    flex-direction: column;
  }

  .company-finance-hero p {
    font-size: 0.68rem;
  }

  .company-finance-hero-chip {
    width: 100%;
    box-sizing: border-box;
  }

  .company-finance-overview-kpis,
  .company-finance-report-grid,
  .company-finance-summary,
  .company-finance-account-summary {
    grid-template-columns: 1fr;
  }

  .company-finance-pulse-values {
    grid-template-columns: 1fr;
  }

  .company-finance-panel>header {
    align-items: flex-start;
  }

  .company-finance-invoice-meta {
    grid-template-columns: 1fr;
  }

  .company-finance-invoice-totals {
    align-items: stretch;
    flex-direction: column;
  }

  .company-finance-bank-fields {
    grid-template-columns: 1fr;
  }

  .company-finance-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .company-finance-modal-dialog {
    max-height: 95vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .company-finance-page *,
  .company-finance-page *::before,
  .company-finance-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Personal workspace refresh — Tasks, Meetings, Debt, Stats,
   Settings and Annual Plan
   ═══════════════════════════════════════════════════════════════ */

.tasks-v3-page,
.meetings-v3-page,
.debt-v3-page,
.stats-v3-page,
.settings-v3-page,
.annual-v3-page {
  --v3-purple: #7667f8;
  --v3-purple-deep: #5145dc;
  --v3-green: #2dd4a7;
  --v3-orange: #f5a524;
  --v3-red: #f26b79;
  --v3-panel: rgba(18, 19, 35, 0.78);
  --v3-panel-soft: rgba(255, 255, 255, 0.035);
  --v3-line: rgba(255, 255, 255, 0.075);
}

html.light .tasks-v3-page,
html.light .meetings-v3-page,
html.light .debt-v3-page,
html.light .stats-v3-page,
html.light .settings-v3-page,
html.light .annual-v3-page {
  --v3-panel: rgba(255, 255, 255, 0.94);
  --v3-panel-soft: rgba(81, 69, 220, 0.035);
  --v3-line: rgba(76, 65, 140, 0.11);
}

.tasks-v3-page>.page-header,
.debt-v3-page>.page-header,
.stats-v3-page>.page-header,
.settings-v3-page>.page-header {
  margin-bottom: 18px;
}

.tasks-v3-page>.page-header h2,
.debt-v3-page>.page-header h2,
.stats-v3-page>.page-header h2,
.settings-v3-page>.page-header h2 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.025em;
}

/* Tasks */
.tasks-v3-overview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px minmax(280px, 0.75fr);
  align-items: center;
  gap: 28px;
  min-height: 196px;
  margin-bottom: 22px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(118, 103, 248, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 15%, rgba(45, 212, 167, 0.12), transparent 28%),
    radial-gradient(circle at 12% 100%, rgba(118, 103, 248, 0.2), transparent 35%),
    linear-gradient(135deg, rgba(28, 26, 60, 0.98), rgba(15, 17, 31, 0.94));
  box-shadow: 0 22px 60px rgba(6, 7, 18, 0.28);
}

html.light .tasks-v3-overview {
  background:
    radial-gradient(circle at 88% 15%, rgba(45, 212, 167, 0.12), transparent 30%),
    radial-gradient(circle at 12% 100%, rgba(118, 103, 248, 0.14), transparent 36%),
    linear-gradient(135deg, #f7f6ff, #ffffff);
  box-shadow: 0 18px 50px rgba(70, 59, 140, 0.1);
}

.tasks-v3-overview::after {
  content: '';
  position: absolute;
  inset-inline-end: -70px;
  top: -95px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.018), 0 0 0 68px rgba(255, 255, 255, 0.012);
  pointer-events: none;
}

.tasks-v3-overview-copy,
.tasks-v3-progress,
.tasks-v3-kpis {
  position: relative;
  z-index: 1;
}

.tasks-v3-eyebrow,
.meetings-v3-eyebrow,
.stats-v3-eyebrow,
.settings-v3-eyebrow,
.ap-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a99fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.tasks-v3-overview-copy h3 {
  max-width: 620px;
  margin: 9px 0 7px;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 900;
  line-height: 1.35;
}

.tasks-v3-overview-copy p {
  max-width: 610px;
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 0.86rem;
  line-height: 1.75;
}

.tasks-v3-progress,
.stats-v3-score {
  width: 122px;
  aspect-ratio: 1;
  padding: 9px;
  border-radius: 50%;
  background: conic-gradient(var(--v3-green) var(--task-progress, 0deg), rgba(255, 255, 255, 0.07) 0);
  box-shadow: 0 12px 30px rgba(45, 212, 167, 0.12);
}

.tasks-v3-progress>div,
.stats-v3-score>div {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  text-align: center;
  border: 1px solid var(--v3-line);
  border-radius: 50%;
  background: #151526;
}

html.light .tasks-v3-progress>div,
html.light .stats-v3-score>div {
  background: #fff;
}

.tasks-v3-progress strong,
.stats-v3-score strong {
  font-size: 1.35rem;
  font-weight: 900;
}

.tasks-v3-progress span,
.stats-v3-score span {
  margin-top: 2px;
  color: var(--clr-text-muted);
  font-size: 0.65rem;
}

.tasks-v3-kpis,
.meetings-v3-kpis,
.stats-v3-quick-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tasks-v3-kpis>div,
.meetings-v3-kpis>div,
.stats-v3-quick-metrics>div {
  min-width: 0;
  padding: 15px 12px;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

html.light .tasks-v3-kpis>div,
html.light .stats-v3-quick-metrics>div {
  background: rgba(255, 255, 255, 0.72);
}

.tasks-v3-kpis span,
.meetings-v3-kpis span,
.stats-v3-quick-metrics span {
  display: grid;
  width: 32px;
  height: 32px;
  margin: 0 auto 7px;
  place-items: center;
  border-radius: 10px;
  color: var(--v3-purple);
  background: rgba(118, 103, 248, 0.13);
}

.tasks-v3-kpis span.is-green,
.meetings-v3-kpis span.green {
  color: var(--v3-green);
  background: rgba(45, 212, 167, 0.12);
}

.tasks-v3-kpis span.is-orange,
.meetings-v3-kpis span.orange {
  color: var(--v3-orange);
  background: rgba(245, 165, 36, 0.12);
}

.tasks-v3-kpis strong,
.meetings-v3-kpis strong,
.stats-v3-quick-metrics strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
}

.tasks-v3-kpis small,
.meetings-v3-kpis small,
.stats-v3-quick-metrics small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--clr-text-muted);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-v3-page #day-strip {
  gap: 9px;
  margin-bottom: 18px;
  padding: 7px;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-panel);
}

.tasks-v3-page .day-chip {
  min-width: 68px;
  border-radius: 13px;
}

.tasks-v3-page .day-chip.selected {
  box-shadow: 0 9px 22px rgba(81, 69, 220, 0.24);
}

.tasks-v3-page .daily-assistant,
.tasks-v3-page .prayer-alert-card,
.tasks-v3-page .filter-group-container,
.tasks-v3-page .task-list-box {
  border-color: var(--v3-line);
  background: var(--v3-panel);
  box-shadow: 0 16px 38px rgba(4, 5, 16, 0.11);
}

.tasks-v3-page .filter-group-container {
  padding: 9px;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
}

.tasks-v3-page .filter-tab-btn {
  border-radius: 11px;
}

.tasks-v3-page .task-row {
  margin: 0 9px 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.tasks-v3-page .task-row:hover {
  transform: translateY(-1px);
  border-color: rgba(118, 103, 248, 0.16);
  background: rgba(118, 103, 248, 0.035);
}

.tasks-v3-page .task-group-header {
  padding: 16px 20px 11px;
}

/* Meetings */
.meetings-v3-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: 28px;
  min-height: 232px;
  margin-bottom: 16px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(118, 103, 248, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 25%, rgba(45, 212, 167, 0.17), transparent 26%),
    linear-gradient(130deg, #242044, #121522 72%);
  box-shadow: 0 22px 60px rgba(4, 5, 18, 0.27);
}

html.light .meetings-v3-hero {
  background:
    radial-gradient(circle at 85% 25%, rgba(45, 212, 167, 0.16), transparent 28%),
    linear-gradient(130deg, #f0efff, #fff 72%);
  box-shadow: 0 20px 52px rgba(70, 59, 140, 0.1);
}

.meetings-v3-hero::after {
  content: '';
  position: absolute;
  inset-inline-end: -95px;
  bottom: -140px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, 0.018), 0 0 0 90px rgba(255, 255, 255, 0.012);
}

.meetings-v3-hero-copy,
.meetings-v3-hero-visual {
  position: relative;
  z-index: 1;
}

.meetings-v3-hero-copy h2 {
  max-width: 670px;
  margin: 10px 0 8px;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 900;
  line-height: 1.32;
}

.meetings-v3-hero-copy p {
  max-width: 680px;
  margin: 0 0 20px;
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
}

.meetings-v3-hero-visual {
  display: grid;
  min-height: 155px;
  padding: 20px;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
}

html.light .meetings-v3-hero-visual {
  background: rgba(255, 255, 255, 0.66);
}

.meetings-v3-hero-visual>span {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0 auto 9px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--v3-purple), var(--v3-purple-deep));
  box-shadow: 0 10px 24px rgba(81, 69, 220, 0.3);
}

.meetings-v3-hero-visual strong {
  font-size: 1.55rem;
  font-weight: 900;
  direction: ltr;
}

.meetings-v3-hero-visual small {
  margin-top: 3px;
  color: var(--clr-text-muted);
  font-size: 0.72rem;
}

.meetings-v3-hero-visual em {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 9px auto 0;
  padding: 5px 9px;
  color: #56cda4;
  border-radius: 999px;
  background: rgba(45, 212, 167, .09);
  font-size: .58rem;
  font-style: normal;
  font-weight: 850;
}

.meetings-v3-hero-visual em.is-soon {
  color: #e7a63f;
  background: rgba(231, 166, 63, .1);
  animation: meeting-soon-pulse 1.8s ease-in-out infinite;
}

.meetings-v3-kpis {
  margin-bottom: 16px;
}

.meetings-v3-kpis>div {
  display: grid;
  grid-template-columns: 38px auto 1fr;
  align-items: center;
  padding: 13px 16px;
  text-align: start;
  background: var(--v3-panel);
}

.meetings-v3-kpis span {
  width: 38px;
  height: 38px;
  margin: 0;
}

.meetings-v3-kpis strong {
  margin-inline-start: 10px;
  font-size: 1.35rem;
}

.meetings-v3-kpis small {
  margin-inline-start: 8px;
  text-align: end;
}

.meetings-v3-workspace {
  padding: 18px;
  border: 1px solid var(--v3-line);
  border-radius: 24px;
  background: var(--v3-panel);
  box-shadow: 0 18px 45px rgba(4, 5, 16, 0.12);
}

.meetings-v3-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

.meetings-v3-tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  background: var(--v3-panel-soft);
}

.meetings-v3-tabs button {
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  color: var(--clr-text-muted);
  background: transparent;
  font: 700 0.76rem inherit;
  cursor: pointer;
}

.meetings-v3-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--v3-purple), var(--v3-purple-deep));
  box-shadow: 0 8px 18px rgba(81, 69, 220, 0.22);
}

.meetings-v3-search {
  display: flex;
  width: min(100%, 285px);
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--v3-line);
  border-radius: 13px;
  color: var(--clr-text-muted);
  background: var(--v3-panel-soft);
}

.meetings-v3-search input {
  width: 100%;
  height: 40px;
  border: 0;
  outline: 0;
  color: var(--clr-text);
  background: transparent;
  font: inherit;
}

.meetings-v3-list {
  display: grid;
  gap: 10px;
}

.meeting-v3-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-panel-soft);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.meeting-v3-card:hover {
  transform: translateY(-2px);
  border-color: rgba(118, 103, 248, 0.25);
  background: rgba(118, 103, 248, 0.045);
}

.meeting-v3-card.is-next {
  border-color: rgba(118, 103, 248, .28);
  background: linear-gradient(135deg, rgba(118, 103, 248, .085), var(--v3-panel-soft));
  box-shadow: 0 12px 28px rgba(81, 69, 220, .08);
}

.meeting-v3-card.is-next .meeting-v3-date-tile {
  border-color: rgba(118, 103, 248, .3);
  background: rgba(118, 103, 248, .13);
}

.meeting-v3-card.is-past {
  opacity: 0.7;
}

.meeting-v3-date-tile {
  display: grid;
  min-height: 70px;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(118, 103, 248, 0.18);
  border-radius: 15px;
  background: rgba(118, 103, 248, 0.09);
}

.meeting-v3-date-tile span,
.meeting-v3-date-tile small {
  color: var(--clr-text-muted);
  font-size: 0.62rem;
}

.meeting-v3-date-tile strong {
  margin: 1px 0;
  color: var(--v3-purple);
  font-size: 1.3rem;
  font-weight: 900;
}

.meeting-v3-card-topline,
.meeting-v3-meta,
.meeting-v3-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meeting-v3-status,
.meeting-v3-reminder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--v3-purple);
  background: rgba(118, 103, 248, 0.1);
  font-size: 0.62rem;
  font-weight: 800;
}

.meeting-v3-status.today {
  color: var(--v3-green);
  background: rgba(45, 212, 167, 0.1);
}

.meeting-v3-status.past {
  color: var(--clr-text-muted);
  background: rgba(148, 163, 184, 0.1);
}

.meeting-v3-reminder {
  color: var(--v3-orange);
  background: transparent;
}

.meeting-v3-next-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  color: #f0bc61;
  border-radius: 999px;
  background: rgba(231, 166, 63, .09);
  font-size: .59rem;
  font-weight: 850;
}

@keyframes meeting-soon-pulse {
  50% {
    box-shadow: 0 0 0 6px rgba(231, 166, 63, .04);
    transform: translateY(-1px);
  }
}

.meeting-v3-card-copy h3 {
  margin: 7px 0 6px;
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-v3-meta {
  flex-wrap: wrap;
  color: var(--clr-text-muted);
  font-size: 0.7rem;
}

.meeting-v3-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.meeting-v3-card-actions {
  justify-content: flex-end;
}

.meeting-v3-join,
.meeting-v3-icon-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 11px;
  font: 750 0.72rem inherit;
  cursor: pointer;
}

.meeting-v3-join {
  padding: 0 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--v3-purple), var(--v3-purple-deep));
  text-decoration: none;
}

.meeting-v3-icon-btn {
  width: 36px;
  color: var(--clr-text-muted);
  background: rgba(255, 255, 255, 0.045);
}

.meeting-v3-delete {
  color: var(--v3-red);
}

.meetings-v3-empty {
  display: grid;
  min-height: 300px;
  padding: 35px;
  place-items: center;
  place-content: center;
  text-align: center;
  border: 1px dashed var(--v3-line);
  border-radius: 18px;
}

.meetings-v3-empty>span {
  color: var(--v3-purple);
  opacity: 0.65;
}

.meetings-v3-empty h3 {
  margin: 13px 0 4px;
  font-size: 1rem;
}

.meetings-v3-empty p {
  margin: 0 0 16px;
  color: var(--clr-text-muted);
  font-size: 0.78rem;
}

.meeting-v3-modal .premium-form-header>div {
  flex: 1;
}

.meeting-v3-modal .premium-form-header p {
  margin: 3px 0 0;
  color: var(--clr-text-muted);
  font-size: 0.72rem;
}

.meeting-v3-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.meeting-v3-wide {
  grid-column: 1 / -1;
}

/* Debt book */
.debt-v3-page>.page-header {
  padding: 24px 26px;
  border: 1px solid rgba(118, 103, 248, 0.17);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 20%, rgba(118, 103, 248, 0.15), transparent 27%),
    var(--v3-panel);
}

.debt-v3-page .debt-summary-grid {
  gap: 13px;
}

.debt-v3-page .debt-summary-card {
  min-height: 140px;
  padding: 22px;
  border-color: var(--v3-line);
  border-radius: 20px;
  background: var(--v3-panel);
  box-shadow: 0 14px 36px rgba(4, 5, 16, 0.1);
}

.debt-v3-page .debt-summary-amount {
  margin: 13px 0 7px;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
}

.debt-v3-insights {
  display: grid;
  grid-template-columns: minmax(300px, 1.6fr) repeat(3, minmax(100px, 0.4fr));
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  background: var(--v3-panel);
}

.debt-v3-insights>div {
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--v3-panel-soft);
  text-align: center;
}

.debt-v3-insights .debt-v3-insight-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
}

.debt-v3-insight-copy>span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 13px;
  color: var(--v3-purple);
  background: rgba(118, 103, 248, 0.11);
}

.debt-v3-insights strong,
.debt-v3-insights span,
.debt-v3-insights small {
  display: block;
}

.debt-v3-insights>div>strong {
  font-size: 1.15rem;
  font-weight: 900;
}

.debt-v3-insights .is-alert>strong {
  color: var(--v3-red);
}

.debt-v3-insights span,
.debt-v3-insights small {
  margin-top: 3px;
  color: var(--clr-text-muted);
  font-size: 0.67rem;
  line-height: 1.5;
}

.debt-v3-insight-copy strong {
  font-size: 0.83rem;
}

.debt-v3-page .debt-tabs {
  width: fit-content;
  padding: 5px;
  border: 1px solid var(--v3-line);
  border-radius: 15px;
  background: var(--v3-panel);
}

.debt-v3-page .debt-tab {
  border-radius: 11px;
}

.debt-v3-page .debt-card {
  border-color: var(--v3-line);
  border-radius: 18px;
  background: var(--v3-panel);
  box-shadow: 0 11px 30px rgba(4, 5, 16, 0.09);
  transition: transform 180ms ease, border-color 180ms ease;
}

.debt-v3-page .debt-card:hover {
  transform: translateY(-2px);
  border-color: rgba(118, 103, 248, 0.22);
}

/* Statistics */
.stats-v3-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px minmax(300px, 0.8fr);
  align-items: center;
  gap: 25px;
  min-height: 200px;
  margin-bottom: 22px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(118, 103, 248, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 83% 20%, rgba(245, 165, 36, 0.13), transparent 26%),
    linear-gradient(135deg, rgba(29, 26, 62, 0.98), rgba(15, 18, 31, 0.95));
}

html.light .stats-v3-hero {
  background:
    radial-gradient(circle at 83% 20%, rgba(245, 165, 36, 0.12), transparent 28%),
    linear-gradient(135deg, #f6f5ff, #fff);
}

.stats-v3-hero-copy h2 {
  margin: 9px 0 7px;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  font-weight: 900;
}

.stats-v3-hero-copy p {
  max-width: 610px;
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 0.84rem;
  line-height: 1.75;
}

.stats-v3-score {
  width: 116px;
  background: conic-gradient(var(--v3-purple) var(--stats-score, 0deg), rgba(255, 255, 255, 0.07) 0);
}

.stats-v3-quick-metrics>div {
  padding: 13px 10px;
}

.stats-v3-quick-metrics span {
  color: var(--v3-orange);
  background: rgba(245, 165, 36, 0.1);
}

.stats-v3-page>.grid-3>.glass-card,
.stats-v3-page>.grid-2>.glass-card,
.stats-v3-page>.grid-4>.glass-card,
.stats-v3-page>.glass-card {
  border-color: var(--v3-line);
  border-radius: 21px;
  background: var(--v3-panel);
  box-shadow: 0 14px 38px rgba(4, 5, 16, 0.1);
}

.stats-v3-page .chart-container {
  padding: 7px;
  border-radius: 15px;
  background: var(--v3-panel-soft);
}

.stats-v3-page .heatmap-cell {
  border-radius: 4px;
}

/* Settings */
.settings-v3-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 142px;
  margin-bottom: 14px;
  padding: 24px 26px;
  border: 1px solid rgba(118, 103, 248, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 91% 10%, rgba(45, 212, 167, 0.13), transparent 27%),
    linear-gradient(135deg, rgba(29, 26, 62, 0.96), rgba(16, 18, 31, 0.94));
}

html.light .settings-v3-hero {
  background:
    radial-gradient(circle at 91% 10%, rgba(45, 212, 167, 0.12), transparent 29%),
    linear-gradient(135deg, #f5f3ff, #fff);
}

.settings-v3-profile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.settings-v3-avatar {
  display: grid;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--v3-purple), var(--v3-purple-deep));
  box-shadow: 0 14px 30px rgba(81, 69, 220, 0.26);
  font-size: 1.7rem;
  font-weight: 900;
}

.settings-v3-profile h2 {
  margin: 5px 0 2px;
  font-size: 1.35rem;
  font-weight: 900;
}

.settings-v3-profile p {
  margin: 0;
  overflow: hidden;
  color: var(--clr-text-muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-v3-plan {
  display: flex;
  min-width: 165px;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.settings-v3-plan>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--v3-orange);
  background: rgba(245, 165, 36, 0.1);
}

.settings-v3-plan small,
.settings-v3-plan strong {
  display: block;
}

.settings-v3-plan small {
  color: var(--clr-text-muted);
  font-size: 0.65rem;
}

.settings-v3-plan strong {
  margin-top: 2px;
  font-size: 0.9rem;
}

.settings-v3-nav {
  position: sticky;
  z-index: 5;
  top: 8px;
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--v3-panel) 92%, transparent);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}

.settings-v3-nav::-webkit-scrollbar {
  display: none;
}

.settings-v3-nav button {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  color: var(--clr-text-muted);
  background: transparent;
  font: 750 0.72rem inherit;
  cursor: pointer;
}

.settings-v3-nav button:hover {
  color: var(--v3-purple);
  background: rgba(118, 103, 248, 0.09);
}

.settings-v3-nav button.active {
  color: #ffffff !important;
  background: var(--v3-purple, #7667f8) !important;
  box-shadow: 0 4px 14px rgba(118, 103, 248, 0.35);
  font-weight: 700;
}

.settings-v3-page .settings-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-tab-panel {
  display: none;
  width: 100%;
}

.settings-tab-panel.active {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  animation: settingsTabFadeIn 220ms ease-out;
}

@keyframes settingsTabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-v3-page .settings-layout .glass-card {
  min-height: auto;
  padding: 22px !important;
  border-color: var(--v3-line);
  border-radius: 20px;
  background: var(--v3-panel);
  box-shadow: 0 14px 36px rgba(4, 5, 16, 0.09);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.settings-v3-page .settings-layout>.glass-card:hover {
  transform: translateY(-2px);
  border-color: rgba(118, 103, 248, 0.18);
}

.settings-v3-page .settings-layout>.glass-card:nth-of-type(5),
.settings-v3-page .settings-layout>.glass-card:nth-of-type(6),
.settings-v3-page .settings-layout>.glass-card:nth-of-type(7) {
  grid-column: 1 / -1;
}

.settings-v3-page .section-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v3-line);
  color: var(--clr-text);
  font-size: 0.9rem;
  font-weight: 850;
}

.settings-v3-page .form-input,
.settings-v3-page .form-select {
  min-height: 44px;
  border-radius: 12px;
  background: var(--v3-panel-soft);
}

.settings-v3-page .push-status-panel {
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: var(--v3-panel-soft);
}

.settings-v3-highlight {
  border-color: rgba(118, 103, 248, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(118, 103, 248, 0.09), 0 20px 45px rgba(81, 69, 220, 0.14) !important;
}

.settings-v3-page #save-settings-btn {
  min-height: 50px;
  border-radius: 15px;
  box-shadow: 0 14px 32px rgba(81, 69, 220, 0.3);
}

.settings-v3-savebar {
  display: none !important;
  position: sticky;
  z-index: 4;
  bottom: 16px;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 11px 10px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--v3-panel) 94%, transparent);
  box-shadow: 0 16px 42px rgba(4, 5, 18, .2);
  backdrop-filter: blur(18px);
}

.settings-v3-savebar #save-settings-btn {
  position: static;
  min-width: 175px;
}

.settings-v3-save-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-text-muted);
  font-size: .66rem;
  font-weight: 750;
}

.settings-v3-save-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2bbe91;
  box-shadow: 0 0 0 5px rgba(43, 190, 145, .09);
  transition: .2s ease;
}

.settings-v3-savebar[data-state="dirty"] .settings-v3-save-state {
  color: #d99a34;
}

.settings-v3-savebar[data-state="dirty"] .settings-v3-save-state i {
  background: #e7a63f;
  box-shadow: 0 0 0 5px rgba(231, 166, 63, .1);
  animation: settings-dirty-pulse 1.8s ease-in-out infinite;
}

.settings-v3-savebar[data-state="dirty"] #save-settings-btn {
  animation: settings-save-nudge .32s ease both;
}

@keyframes settings-dirty-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(231, 166, 63, .04);
  }
}

@keyframes settings-save-nudge {
  50% {
    transform: translateY(-2px);
  }
}

/* Annual plan */
.annual-v3-page>.glass-card.text-center {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(118, 103, 248, 0.2) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(118, 103, 248, 0.18), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(45, 212, 167, 0.08), transparent 27%),
    var(--v3-panel) !important;
  box-shadow: 0 24px 62px rgba(4, 5, 16, 0.19);
}

.annual-v3-page>.glass-card.text-center::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(118, 103, 248, 0.13);
  border-radius: 20px;
  pointer-events: none;
}

.annual-v3-page>.glass-card.text-center>* {
  position: relative;
  z-index: 1;
}

.annual-v3-page>.glass-card.text-center h2 {
  font-size: clamp(1.45rem, 2.7vw, 2rem) !important;
  font-weight: 900 !important;
}

.annual-v3-page>.glass-card.text-center p {
  max-width: 650px;
  font-size: 0.9rem !important;
}

.annual-v3-page .ap-list-header {
  position: relative;
  min-height: 148px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(118, 103, 248, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(45, 212, 167, 0.13), transparent 30%),
    linear-gradient(135deg, rgba(29, 26, 62, 0.98), rgba(15, 18, 31, 0.94));
}

html.light .annual-v3-page .ap-list-header {
  background:
    radial-gradient(circle at 90% 10%, rgba(45, 212, 167, 0.12), transparent 30%),
    linear-gradient(135deg, #f4f2ff, #fff);
}

.annual-v3-page .ap-list-header h2 {
  margin-top: 7px !important;
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
  font-weight: 900 !important;
}

.ap-v3-summary {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) repeat(2, minmax(110px, 0.22fr));
  align-items: center;
  gap: 10px;
  margin: -14px 18px 22px;
  padding: 12px;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-panel);
  box-shadow: 0 16px 36px rgba(4, 5, 16, 0.12);
}

.ap-v3-summary-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.ap-v3-summary-copy>span {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  border-radius: 14px;
  color: var(--v3-purple);
  background: rgba(118, 103, 248, 0.1);
}

.ap-v3-summary-copy strong,
.ap-v3-summary-copy small,
.ap-v3-summary-metric strong,
.ap-v3-summary-metric span {
  display: block;
}

.ap-v3-summary-copy strong {
  font-size: 0.83rem;
}

.ap-v3-summary-copy small {
  margin-top: 3px;
  color: var(--clr-text-muted);
  font-size: 0.68rem;
}

.ap-v3-summary-metric {
  padding: 12px;
  border-radius: 13px;
  background: var(--v3-panel-soft);
  text-align: center;
}

.ap-v3-summary-metric strong {
  color: var(--v3-purple);
  font-size: 1.25rem;
  font-weight: 900;
}

.ap-v3-summary-metric span {
  margin-top: 2px;
  color: var(--clr-text-muted);
  font-size: 0.65rem;
}

.annual-v3-page .ap-plans-grid>.glass-card,
.annual-v3-page .ap-workspace-card,
.annual-v3-page .ap-pillars-grid>.glass-card,
.annual-v3-page .ap-board-col {
  border-color: var(--v3-line) !important;
  border-radius: 20px !important;
  background: var(--v3-panel) !important;
  box-shadow: 0 15px 38px rgba(4, 5, 16, 0.1);
}

.annual-v3-page .ap-plans-grid>.glass-card {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}

.annual-v3-page .ap-plans-grid>.glass-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--v3-purple), var(--v3-green));
}

.annual-v3-page .ap-plans-grid>.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(118, 103, 248, 0.24) !important;
}

.annual-v3-page .ap-workspace-actions {
  padding: 10px;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  background: var(--v3-panel);
}

.annual-v3-page .ap-workspace-card {
  padding: 25px !important;
  background:
    radial-gradient(circle at 93% 15%, rgba(45, 212, 167, 0.12), transparent 24%),
    var(--v3-panel) !important;
}

.annual-v3-page .ap-tabs-bar {
  width: fit-content;
  padding: 6px;
  border: 1px solid var(--v3-line) !important;
  border-radius: 15px;
  background: var(--v3-panel);
}

.annual-v3-page .ap-pillars-grid>.glass-card {
  overflow: hidden;
}

.annual-v3-page .milestone-click-row {
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.annual-v3-page .milestone-click-row:hover {
  transform: translateY(-1px);
  border-color: rgba(118, 103, 248, 0.2) !important;
  background: rgba(118, 103, 248, 0.045) !important;
}

@media (max-width: 1050px) {

  .tasks-v3-overview,
  .stats-v3-hero {
    grid-template-columns: minmax(0, 1fr) 120px;
  }

  .tasks-v3-kpis,
  .stats-v3-quick-metrics {
    grid-column: 1 / -1;
  }

  .debt-v3-insights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .debt-v3-insight-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {

  .tasks-v3-page>.page-header,
  .debt-v3-page>.page-header,
  .stats-v3-page>.page-header,
  .settings-v3-page>.page-header {
    align-items: stretch;
  }

  .tasks-v3-overview,
  .stats-v3-hero,
  .meetings-v3-hero {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 22px;
  }

  .tasks-v3-progress,
  .stats-v3-score {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 20px;
    width: 86px;
  }

  .tasks-v3-overview-copy,
  .stats-v3-hero-copy {
    padding-inline-end: 92px;
  }

  .tasks-v3-progress strong,
  .stats-v3-score strong {
    font-size: 1rem;
  }

  .tasks-v3-progress span,
  .stats-v3-score span {
    font-size: 0.52rem;
  }

  .meetings-v3-hero-visual {
    display: none;
  }

  .meetings-v3-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .meetings-v3-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .meetings-v3-search {
    width: 100%;
  }

  .meeting-v3-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .meeting-v3-card-actions {
    grid-column: 1 / -1;
  }

  .meeting-v3-join {
    flex: 1;
  }

  .settings-v3-page .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-v3-page .settings-layout>.glass-card:nth-of-type(5),
  .settings-v3-page .settings-layout>.glass-card:nth-of-type(6),
  .settings-v3-page .settings-layout>.glass-card:nth-of-type(7) {
    grid-column: auto;
  }

  .settings-v3-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-v3-plan {
    min-width: 0;
  }

  .ap-v3-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
  }

  .ap-v3-summary-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {

  .tasks-v3-page>.page-header .tasks-header-actions,
  .debt-v3-page>.page-header {
    width: 100%;
  }

  .tasks-v3-page>.page-header .btn,
  .debt-v3-page>.page-header .btn {
    justify-content: center;
  }

  .tasks-v3-overview,
  .stats-v3-hero {
    gap: 15px;
    padding: 18px;
  }

  .tasks-v3-overview-copy,
  .stats-v3-hero-copy {
    min-height: 96px;
    padding-inline-end: 78px;
  }

  .tasks-v3-overview-copy h3,
  .stats-v3-hero-copy h2 {
    font-size: 1.05rem;
  }

  .tasks-v3-overview-copy p,
  .stats-v3-hero-copy p {
    display: none;
  }

  .tasks-v3-progress,
  .stats-v3-score {
    inset-block-start: 17px;
    inset-inline-end: 17px;
    width: 72px;
    padding: 6px;
  }

  .tasks-v3-kpis,
  .meetings-v3-kpis,
  .stats-v3-quick-metrics {
    gap: 6px;
  }

  .tasks-v3-kpis>div,
  .stats-v3-quick-metrics>div {
    padding: 10px 5px;
  }

  .tasks-v3-kpis span,
  .stats-v3-quick-metrics span {
    width: 28px;
    height: 28px;
  }

  .tasks-v3-kpis strong,
  .stats-v3-quick-metrics strong {
    font-size: 0.95rem;
  }

  .tasks-v3-page #day-strip {
    margin-inline: -4px;
    border-radius: 15px;
  }

  .tasks-v3-page .filter-group-container {
    border-radius: 15px;
  }

  .meetings-v3-hero {
    min-height: auto;
    padding: 20px;
  }

  .meetings-v3-hero-copy h2 {
    font-size: 1.28rem;
  }

  .meetings-v3-kpis>div {
    display: block;
    padding: 10px 5px;
    text-align: center;
  }

  .meetings-v3-kpis span {
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
  }

  .meetings-v3-kpis strong,
  .meetings-v3-kpis small {
    margin: 0;
    text-align: center;
  }

  .meetings-v3-workspace {
    padding: 11px;
    border-radius: 18px;
  }

  .meetings-v3-tabs button {
    padding-inline: 11px;
    white-space: nowrap;
  }

  .meeting-v3-card {
    gap: 10px;
    padding: 11px;
    border-radius: 15px;
  }

  .meeting-v3-date-tile {
    min-height: 62px;
  }

  .meeting-v3-form-grid {
    grid-template-columns: 1fr;
  }

  .meeting-v3-wide {
    grid-column: auto;
  }

  .debt-v3-page>.page-header {
    padding: 18px;
    border-radius: 20px;
  }

  .debt-v3-page .debt-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-v3-page .debt-summary-card {
    min-height: 112px;
    padding: 16px;
  }

  .debt-v3-page .debt-summary-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .debt-v3-page .debt-summary-amount {
    font-size: 1.35rem;
  }

  .debt-v3-insights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 9px;
  }

  .debt-v3-insights>div {
    padding-inline: 5px;
  }

  .debt-v3-insights .debt-v3-insight-copy {
    align-items: flex-start;
  }

  .debt-v3-page .debt-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .debt-v3-page .debt-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .debt-v3-page .debt-card>div:last-child {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .settings-v3-avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 18px;
    font-size: 1.35rem;
  }

  .settings-v3-profile h2 {
    font-size: 1.1rem;
  }

  .settings-v3-page .settings-layout>.glass-card {
    padding: 17px !important;
  }

  .settings-v3-savebar {
    bottom: 84px;
    align-items: stretch;
    flex-direction: column;
    padding: 10px;
  }

  .settings-v3-savebar #save-settings-btn {
    width: 100%;
    min-width: 0;
  }

  .settings-v3-save-state {
    padding-inline: 4px;
  }

  .annual-v3-page .ap-list-header {
    min-height: 0;
    padding: 20px;
    border-radius: 20px;
  }

  .ap-v3-summary {
    padding: 8px;
  }

  .ap-v3-summary-copy {
    align-items: flex-start;
    padding: 7px;
  }

  .annual-v3-page .ap-tabs-bar {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .support-v2-page *,
  .support-v2-page *::before,
  .support-v2-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .settings-v3-savebar[data-state="dirty"] .settings-v3-save-state i,
  .settings-v3-savebar[data-state="dirty"] #save-settings-btn,
  .meetings-v3-hero-visual em.is-soon {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   WALLET V2 — personal finance workspace
   ══════════════════════════════════════════════════════════════ */
.wallet-v2-page {
  --wallet2-panel: #111d25;
  --wallet2-panel-soft: #16262f;
  --wallet2-line: rgba(149, 183, 188, 0.14);
  --wallet2-text: #f5fbfa;
  --wallet2-muted: #8ca5a8;
  --wallet2-primary: #18b99a;
  --wallet2-primary-2: #46d4ae;
  --wallet2-blue: #4a8df7;
  --wallet2-danger: #ff7186;
  --wallet2-shadow: 0 20px 52px rgba(3, 12, 17, 0.24);
  max-width: 1540px;
  display: grid;
  gap: 16px;
  color: var(--wallet2-text);
  margin: 0 auto;
  padding: 4px 2px 30px;
}

html.light .wallet-v2-page {
  --wallet2-panel: #ffffff;
  --wallet2-panel-soft: #f4f9f8;
  --wallet2-line: rgba(35, 84, 87, 0.12);
  --wallet2-text: #153338;
  --wallet2-muted: #6d8589;
  --wallet2-shadow: 0 20px 52px rgba(24, 66, 70, 0.09);
}

.wallet-v2-page button,
.wallet-v2-page input,
.wallet-v2-page select,
.wallet-v2-modal-backdrop button,
.wallet-v2-modal-backdrop input,
.wallet-v2-modal-backdrop select {
  font: inherit;
}

.wallet-v2-hero {
  position: relative;
  min-height: 258px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
  align-items: center;
  gap: clamp(28px, 5vw, 78px);
  padding: 36px clamp(28px, 4.5vw, 64px);
  border: 1px solid rgba(74, 224, 187, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 5% 0%, rgba(38, 210, 175, 0.2), transparent 30%),
    radial-gradient(circle at 91% 18%, rgba(67, 143, 229, 0.21), transparent 32%),
    linear-gradient(125deg, #0b252b 0%, #103b3c 48%, #10293a 100%);
  box-shadow: 0 24px 64px rgba(4, 22, 27, 0.26);
  isolation: isolate;
}

.wallet-v2-hero::before {
  position: absolute;
  content: '';
  width: 300px;
  height: 300px;
  inset-inline-start: -115px;
  bottom: -225px;
  border: 48px solid rgba(99, 239, 203, 0.06);
  border-radius: 50%;
  z-index: -1;
}

.wallet-v2-hero::after {
  position: absolute;
  content: '';
  width: 220px;
  height: 220px;
  inset-inline-end: 25%;
  top: -160px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  z-index: -1;
}

.wallet-v2-hero-copy {
  max-width: 700px;
}

.wallet-v2-eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a8f2df;
  border: 1px solid rgba(144, 239, 215, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 7px 11px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.wallet-v2-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  margin: 15px 0 9px;
}

.wallet-v2-hero-copy>p {
  max-width: 660px;
  color: #b9d3d5;
  font-size: clamp(0.84rem, 1.5vw, 1rem);
  line-height: 1.85;
  margin: 0;
}

.wallet-v2-hero-actions,
.wallet-v2-head-actions,
.wallet-v2-modal-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.wallet-v2-hero-actions {
  margin-top: 23px;
}

.wallet-v2-primary,
.wallet-v2-ghost,
.wallet-v2-link {
  min-height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 850;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.wallet-v2-primary {
  color: #06231e;
  border: 0;
  background: linear-gradient(135deg, var(--wallet2-primary-2), #77e5c6);
  box-shadow: 0 10px 26px rgba(31, 190, 157, 0.24);
}

.wallet-v2-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(31, 190, 157, 0.32);
}

.wallet-v2-primary:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.wallet-v2-ghost {
  color: var(--wallet2-text);
  border: 1px solid var(--wallet2-line);
  background: transparent;
}

.wallet-v2-hero .wallet-v2-ghost {
  color: #eaf8f6;
  border-color: rgba(221, 255, 248, 0.17);
  background: rgba(255, 255, 255, 0.055);
}

.wallet-v2-ghost:hover,
.wallet-v2-link:hover {
  border-color: rgba(24, 185, 154, 0.35);
  background: rgba(24, 185, 154, 0.08);
}

.wallet-v2-link {
  min-height: 35px;
  color: var(--wallet2-primary);
  border: 0;
  background: transparent;
  font-size: 0.7rem;
}

.wallet-v2-balance-card {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  color: #eefdfa;
  border: 1px solid rgba(222, 255, 249, 0.19);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055));
  box-shadow: 0 22px 46px rgba(1, 14, 19, 0.22), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  padding: 22px;
  transform: rotate(-1.4deg);
}

[dir='rtl'] .wallet-v2-balance-card {
  transform: rotate(1.4deg);
}

.wallet-v2-balance-card>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wallet-v2-balance-card>header>span {
  color: #c5dfdd;
  font-size: 0.67rem;
  font-weight: 800;
}

.wallet-v2-balance-card>header i {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: #b9f5e5;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
}

.wallet-v2-balance-card>strong {
  position: relative;
  z-index: 1;
  display: block;
  direction: ltr;
  text-align: start;
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.2;
  margin-top: 14px;
}

[dir='rtl'] .wallet-v2-balance-card>strong {
  text-align: right;
}

.wallet-v2-balance-card>strong small {
  color: #a7d7d1;
  font-size: 0.72rem;
  font-weight: 800;
}

.wallet-v2-balance-card>strong.is-negative {
  color: #ff9aaa;
}

.wallet-v2-card-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .19), transparent);
  margin: 17px 0 13px;
}

.wallet-v2-balance-card>footer {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 15px;
}

.wallet-v2-balance-card>footer div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.wallet-v2-balance-card>footer span {
  color: #9dbbb9;
  font-size: 0.57rem;
  font-weight: 700;
}

.wallet-v2-balance-card>footer b {
  overflow: hidden;
  color: #edf9f7;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-card-orb {
  position: absolute;
  width: 140px;
  height: 140px;
  inset-inline-end: -70px;
  bottom: -78px;
  border: 22px solid rgba(99, 232, 202, 0.1);
  border-radius: 50%;
}

.wallet-v2-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--wallet2-line);
  border-radius: 17px;
  background: var(--wallet2-panel);
  padding: 8px 10px;
  box-shadow: 0 10px 28px rgba(4, 30, 33, 0.05);
}

.wallet-v2-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.wallet-v2-tabs::-webkit-scrollbar {
  display: none;
}

.wallet-v2-tabs button {
  min-height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wallet2-muted);
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 850;
}

.wallet-v2-tabs button:hover {
  color: var(--wallet2-text);
  background: var(--wallet2-panel-soft);
}

.wallet-v2-tabs button.active {
  color: #0d8f77;
  background: rgba(24, 185, 154, 0.11);
}

.wallet-v2-period {
  min-height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--wallet2-muted);
  border: 1px solid var(--wallet2-line);
  border-radius: 10px;
  background: var(--wallet2-panel-soft);
  padding: 0 8px;
}

.wallet-v2-period select {
  color: var(--wallet2-text);
  border: 0;
  outline: 0;
  background: transparent;
  padding: 5px 3px;
  font-size: 0.67rem;
  font-weight: 800;
}

.wallet-v2-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.wallet-v2-metric {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--wallet2-line);
  border-radius: 17px;
  background: var(--wallet2-panel);
  padding: 16px;
  box-shadow: 0 12px 28px rgba(4, 25, 29, 0.055);
}

.wallet-v2-metric::after {
  position: absolute;
  content: '';
  width: 42px;
  height: 3px;
  inset-inline-start: 16px;
  bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--tone);
}

.wallet-v2-metric>span {
  width: 41px;
  height: 41px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--tone);
  border-radius: 13px;
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}

.wallet-v2-metric>div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wallet-v2-metric small {
  color: var(--wallet2-muted);
  font-size: 0.6rem;
  font-weight: 750;
}

.wallet-v2-metric strong {
  overflow: hidden;
  color: var(--wallet2-text);
  font-size: clamp(0.94rem, 1.7vw, 1.2rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-metric strong small {
  color: var(--wallet2-muted);
  font-size: 0.58rem;
}

.wallet-v2-metric p {
  color: var(--wallet2-muted);
  font-size: 0.57rem;
  margin: 0;
}

.wallet-v2-metric[data-tone='income'] {
  --tone: #22bd90;
}

.wallet-v2-metric[data-tone='expense'] {
  --tone: #f46f84;
}

.wallet-v2-metric[data-tone='saving'] {
  --tone: #4c91f4;
}

.wallet-v2-metric[data-tone='giving'] {
  --tone: #a17ae8;
}

.wallet-v2-content {
  min-width: 0;
}

.wallet-v2-panel,
.wallet-v2-block {
  border: 1px solid var(--wallet2-line);
  border-radius: 20px;
  background: var(--wallet2-panel);
  box-shadow: var(--wallet2-shadow);
}

.wallet-v2-panel {
  min-width: 0;
  padding: 20px;
}

.wallet-v2-block {
  padding: 22px;
}

.wallet-v2-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
  gap: 13px;
}

.wallet-v2-section-head,
.wallet-v2-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.wallet-v2-section-head>div>span,
.wallet-v2-block-head>div>span {
  color: var(--wallet2-primary);
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wallet-v2-section-head h2,
.wallet-v2-block-head h2 {
  color: var(--wallet2-text);
  font-size: 0.96rem;
  margin: 3px 0 0;
}

.wallet-v2-section-head>small {
  color: var(--wallet2-muted);
  font-size: 0.6rem;
}

.wallet-v2-section-head>button:not(.wallet-v2-primary),
.wallet-v2-block-head>button:not(.wallet-v2-primary) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wallet2-primary);
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 850;
}

.wallet-v2-block-head>div>p {
  color: var(--wallet2-muted);
  font-size: 0.67rem;
  line-height: 1.6;
  margin: 4px 0 0;
}

.wallet-v2-flow-chart {
  height: 190px;
  display: grid;
  grid-template-columns: repeat(6, minmax(30px, 1fr));
  align-items: end;
  gap: 10px;
  padding-top: 22px;
  border-bottom: 1px solid var(--wallet2-line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 42px, var(--wallet2-line) 43px);
}

.wallet-v2-flow-column {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 24px;
  align-items: end;
  gap: 5px;
}

.wallet-v2-flow-bars {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.wallet-v2-flow-bars i {
  width: clamp(8px, 1.3vw, 14px);
  min-height: 3px;
  border-radius: 5px 5px 1px 1px;
  transition: height 300ms ease;
}

.wallet-v2-flow-bars i.income {
  background: linear-gradient(to top, #109b7f, #44d6ad);
}

.wallet-v2-flow-bars i.expense {
  background: linear-gradient(to top, #e85c74, #ff92a4);
}

.wallet-v2-flow-column>span {
  overflow: hidden;
  color: var(--wallet2-muted);
  text-align: center;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: var(--wallet2-muted);
  font-size: 0.59rem;
  margin-top: 13px;
}

.wallet-v2-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wallet-v2-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.wallet-v2-chart-legend i.income {
  background: #28c49b;
}

.wallet-v2-chart-legend i.expense {
  background: #f26f85;
}

.wallet-v2-spending-body {
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) minmax(140px, 1.2fr);
  align-items: center;
  gap: 17px;
  min-height: 218px;
  padding-top: 12px;
}

.wallet-v2-donut {
  width: min(150px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wallet-donut);
  margin: 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.wallet-v2-donut::before {
  position: absolute;
  content: '';
}

.wallet-v2-donut>div {
  width: 66%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--wallet2-panel);
  box-shadow: 0 0 0 1px var(--wallet2-line);
}

.wallet-v2-donut strong {
  color: var(--wallet2-text);
  font-size: 0.9rem;
}

.wallet-v2-donut span {
  color: var(--wallet2-muted);
  font-size: 0.54rem;
}

.wallet-v2-spending-list {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.wallet-v2-spending-list>div {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.wallet-v2-spending-list i {
  width: 7px;
  height: 7px;
  border-radius: 3px;
}

.wallet-v2-spending-list span {
  overflow: hidden;
  color: var(--wallet2-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-spending-list strong {
  color: var(--wallet2-text);
  font-size: 0.63rem;
}

.wallet-v2-spending-list>p {
  color: var(--wallet2-muted);
  font-size: 0.66rem;
  line-height: 1.7;
}

.wallet-v2-block {
  margin-top: 13px;
}

.wallet-v2-funds-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 17px;
}

.wallet-v2-fund {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wallet2-line);
  border-radius: 16px;
  background: var(--wallet2-panel-soft);
  padding: 15px;
}

.wallet-v2-fund::before {
  position: absolute;
  content: '';
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--fund);
  opacity: .8;
}

[dir='rtl'] .wallet-v2-fund::before {
  inset: 0 0 0 auto;
}

.wallet-v2-fund>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-v2-fund>header>span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--fund) 11%, transparent);
}

.wallet-v2-fund>header i {
  color: var(--fund);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fund) 10%, transparent);
  padding: 4px 7px;
  font-size: 0.57rem;
  font-style: normal;
  font-weight: 900;
}

.wallet-v2-fund h3 {
  color: var(--wallet2-text);
  font-size: 0.73rem;
  margin: 12px 0 5px;
}

.wallet-v2-fund>strong {
  display: block;
  direction: ltr;
  color: var(--fund);
  text-align: start;
  font-size: 1.03rem;
}

[dir='rtl'] .wallet-v2-fund>strong {
  text-align: right;
}

.wallet-v2-fund>strong small {
  color: var(--wallet2-muted);
  font-size: 0.52rem;
}

.wallet-v2-fund>strong.is-over {
  color: var(--wallet2-danger);
}

.wallet-v2-fund-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(130, 155, 158, 0.14);
  margin-top: 11px;
}

.wallet-v2-fund-progress i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--fund);
}

.wallet-v2-fund footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--wallet2-muted);
  font-size: 0.52rem;
  margin-top: 7px;
}

.wallet-v2-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 13px;
  margin-top: 13px;
}

.wallet-v2-mini-list {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.wallet-v2-transaction {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'icon copy actions amount';
  align-items: center;
  gap: 11px;
  direction: ltr;
  border-radius: 13px;
  background: var(--wallet2-panel-soft);
  padding: 11px 12px;
}

[dir='rtl'] .wallet-v2-transaction {
  grid-template-areas: 'amount actions copy icon';
}

.wallet-v2-transaction[hidden] {
  display: none;
}

.wallet-v2-transaction.is-compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'icon copy amount';
  border-color: transparent;
  background: transparent;
  padding: 8px 4px;
}

[dir='rtl'] .wallet-v2-transaction.is-compact {
  grid-template-areas: 'amount copy icon';
}

.wallet-v2-transaction.is-compact+.wallet-v2-transaction.is-compact {
  border-top-color: var(--wallet2-line);
  border-radius: 0;
}

.wallet-v2-transaction-icon {
  grid-area: icon;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cat) 12%, transparent);
  font-size: 1rem;
}

.wallet-v2-transaction-copy {
  grid-area: copy;
  min-width: 0;
  display: grid;
  gap: 3px;
  direction: rtl;
  text-align: right;
}

[dir='ltr'] .wallet-v2-transaction-copy {
  direction: ltr;
  text-align: left;
}

.wallet-v2-transaction-copy strong {
  overflow: hidden;
  color: var(--wallet2-text);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-transaction-copy span {
  overflow: hidden;
  color: var(--wallet2-muted);
  font-size: 0.55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-transaction-amount {
  grid-area: amount;
  direction: ltr;
  color: var(--wallet2-danger);
  text-align: end;
  font-size: 0.75rem;
  white-space: nowrap;
}

.wallet-v2-transaction-amount[data-type='income'] {
  color: #1daf88;
}

.wallet-v2-transaction-amount small {
  color: var(--wallet2-muted);
  font-size: 0.5rem;
}

.wallet-v2-row-actions {
  grid-area: actions;
  display: flex;
  gap: 4px;
}

.wallet-v2-row-actions button,
.wallet-v2-goal-card header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--wallet2-muted);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.wallet-v2-row-actions button:hover,
.wallet-v2-goal-card header button:hover {
  color: var(--wallet2-text);
  border-color: var(--wallet2-line);
  background: var(--wallet2-panel);
}

.wallet-v2-row-actions button:last-child:hover,
.wallet-v2-goal-card header button:last-child:hover {
  color: var(--wallet2-danger);
}

.wallet-v2-piggy-snapshot {
  display: grid;
}

.wallet-v2-piggy-snapshot-body {
  min-height: 150px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(48, 209, 165, .16);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(24, 185, 154, .11), rgba(74, 141, 247, .06));
  padding: 18px;
  margin-top: 15px;
}

.wallet-v2-piggy-snapshot-icon {
  width: 82px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(110, 239, 203, .2);
  border-radius: 25px;
  color: #75e8c8;
  background: rgba(18, 64, 63, .34);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 16px 30px rgba(4, 23, 27, .14);
}

.wallet-v2-piggy-snapshot-body>div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.wallet-v2-piggy-snapshot-body>div>span,
.wallet-v2-piggy-snapshot-body p {
  color: var(--wallet2-muted);
  font-size: .58rem;
}

.wallet-v2-piggy-snapshot-body strong {
  overflow: hidden;
  direction: ltr;
  color: var(--wallet2-primary-2);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
}

[dir='rtl'] .wallet-v2-piggy-snapshot-body strong {
  text-align: right;
}

.wallet-v2-piggy-snapshot-body strong.is-negative {
  color: var(--wallet2-danger);
}

.wallet-v2-piggy-snapshot-body strong small {
  color: var(--wallet2-muted);
  font-size: .5rem;
}

.wallet-v2-piggy-snapshot-body p {
  line-height: 1.6;
  margin: 2px 0 0;
}

.wallet-v2-empty {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--wallet2-muted);
  padding: 24px;
}

.wallet-v2-empty>span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: var(--wallet2-primary);
  border-radius: 16px;
  background: rgba(24, 185, 154, .09);
}

.wallet-v2-empty strong {
  color: var(--wallet2-text);
  font-size: 0.82rem;
  margin-top: 10px;
}

.wallet-v2-empty p {
  max-width: 420px;
  font-size: 0.64rem;
  line-height: 1.7;
  margin: 4px 0 0;
}

.wallet-v2-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 13px;
}

.wallet-v2-empty-actions button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  color: var(--wallet2-primary);
  border: 0;
  border-radius: 10px;
  background: rgba(24, 185, 154, .08);
  font: inherit;
  font-size: .58rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.wallet-v2-empty-actions button:hover {
  transform: translateY(-1px);
  background: rgba(24, 185, 154, .13);
}

.wallet-v2-empty-actions button.is-primary {
  color: #fff;
  background: linear-gradient(135deg, #18b99a, #10977f);
  box-shadow: 0 9px 20px rgba(24, 185, 154, .18);
}

.wallet-v2-transactions-view,
.wallet-v2-piggy-view,
.wallet-v2-planning-view {
  margin-top: 0;
}

.wallet-v2-head-actions .wallet-v2-primary,
.wallet-v2-block-head>.wallet-v2-primary {
  min-height: 38px;
  font-size: 0.68rem;
}

.wallet-v2-head-actions .wallet-v2-ghost {
  min-height: 38px;
  font-size: 0.68rem;
}

.wallet-v2-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 190px;
  gap: 8px;
  margin-top: 18px;
}

.wallet-v2-filters label {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wallet2-muted);
  border: 1px solid var(--wallet2-line);
  border-radius: 11px;
  background: var(--wallet2-panel-soft);
  padding: 0 11px;
}

.wallet-v2-filters input,
.wallet-v2-filters select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  color: var(--wallet2-text);
  border: 1px solid var(--wallet2-line);
  border-radius: 11px;
  outline: 0;
  background: var(--wallet2-panel-soft);
  padding: 8px 10px;
  font-size: 0.68rem;
}

.wallet-v2-filters label input {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.wallet-v2-filters input:focus,
.wallet-v2-filters select:focus {
  border-color: rgba(24, 185, 154, .48);
}

.wallet-v2-transaction-list {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.wallet-v2-filter-empty .wallet-v2-empty {
  min-height: 240px;
}

.wallet-v2-goals-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--wallet2-line);
  border-radius: 15px;
  background: var(--wallet2-panel-soft);
  margin-top: 18px;
}

.wallet-v2-goals-summary>div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 14px 18px;
}

.wallet-v2-goals-summary>div+div {
  border-inline-start: 1px solid var(--wallet2-line);
}

.wallet-v2-goals-summary span {
  color: var(--wallet2-muted);
  font-size: 0.59rem;
}

.wallet-v2-goals-summary strong {
  overflow: hidden;
  color: var(--wallet2-text);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-goals-summary small {
  color: var(--wallet2-muted);
  font-size: 0.5rem;
}

.wallet-v2-goals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 14px;
}

.wallet-v2-goal-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wallet2-line);
  border-radius: 17px;
  background: var(--wallet2-panel-soft);
  padding: 16px;
}

.wallet-v2-goal-card::before {
  position: absolute;
  content: '';
  width: 48%;
  height: 3px;
  inset-inline-start: 0;
  top: 0;
  background: linear-gradient(90deg, var(--goal), transparent);
}

.wallet-v2-goal-card>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-v2-goal-card>header>span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--goal);
  border-radius: 12px;
  background: color-mix(in srgb, var(--goal) 11%, transparent);
}

.wallet-v2-goal-card>header>div {
  display: flex;
  gap: 2px;
}

.wallet-v2-goal-card h3 {
  overflow: hidden;
  color: var(--wallet2-text);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 13px 0 4px;
}

.wallet-v2-goal-card>p {
  color: var(--wallet2-muted);
  font-size: 0.58rem;
  margin: 0;
}

.wallet-v2-goal-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(132, 158, 160, .13);
  margin-top: 15px;
}

.wallet-v2-goal-progress i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--goal) 75%, #fff), var(--goal));
}

.wallet-v2-goal-values {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.wallet-v2-goal-values strong,
.wallet-v2-goal-values b {
  color: var(--wallet2-text);
  font-size: 0.66rem;
}

.wallet-v2-goal-values b {
  text-align: end;
}

.wallet-v2-goal-values span {
  color: var(--goal);
  font-size: 0.6rem;
  font-weight: 900;
}

.wallet-v2-goal-values small {
  color: var(--wallet2-muted);
  font-size: 0.46rem;
}

.wallet-v2-goal-card>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--wallet2-line);
  padding-top: 11px;
  margin-top: 13px;
}

.wallet-v2-goal-card>footer>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wallet2-muted);
  font-size: 0.53rem;
}

.wallet-v2-goal-card>footer button,
.wallet-v2-goal-card>footer i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--goal);
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--goal) 9%, transparent);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 850;
}

.wallet-v2-piggy-live {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wallet2-primary-2);
  border: 1px solid rgba(45, 204, 163, .19);
  border-radius: 999px;
  background: rgba(24, 185, 154, .08);
  padding: 7px 11px;
  font-size: .57rem;
  font-weight: 850;
  white-space: nowrap;
}

.wallet-v2-piggy-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr);
  align-items: stretch;
  gap: 12px;
  border: 1px solid rgba(66, 219, 179, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 10%, rgba(52, 211, 153, .18), transparent 36%),
    radial-gradient(circle at 94% 20%, rgba(74, 141, 247, .14), transparent 35%),
    linear-gradient(135deg, rgba(16, 55, 57, .74), rgba(16, 38, 53, .72));
  padding: 18px;
  margin-top: 19px;
  isolation: isolate;
}

html.light .wallet-v2-piggy-hero {
  background:
    radial-gradient(circle at 5% 10%, rgba(52, 211, 153, .17), transparent 36%),
    radial-gradient(circle at 94% 20%, rgba(74, 141, 247, .12), transparent 35%),
    linear-gradient(135deg, #effbf7, #f2f7fc);
}

.wallet-v2-piggy-hero::after {
  position: absolute;
  content: '';
  width: 190px;
  aspect-ratio: 1;
  inset-inline-start: -110px;
  bottom: -145px;
  border: 30px solid rgba(95, 231, 194, .055);
  border-radius: 50%;
  z-index: -1;
}

.wallet-v2-piggy-hero-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 12px;
}

.wallet-v2-piggy-visual {
  width: 102px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(122, 240, 208, .23);
  border-radius: 30px;
  color: #75e8c8;
  background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 20px 40px rgba(0, 20, 25, .16);
  transform: rotate(-3deg);
}

[dir='rtl'] .wallet-v2-piggy-visual {
  transform: rotate(3deg);
}

.wallet-v2-piggy-hero-copy>div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.wallet-v2-piggy-hero-copy small {
  color: #a6c9c7;
  font-size: .62rem;
  font-weight: 800;
}

html.light .wallet-v2-piggy-hero-copy small {
  color: var(--wallet2-muted);
}

.wallet-v2-piggy-hero-copy strong {
  overflow: hidden;
  direction: ltr;
  color: #68e8c1;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(1.55rem, 3.4vw, 2.55rem);
  line-height: 1.2;
}

[dir='rtl'] .wallet-v2-piggy-hero-copy strong {
  text-align: right;
}

.wallet-v2-piggy-hero-copy strong.is-negative {
  color: #ff8798;
}

.wallet-v2-piggy-hero-copy strong i {
  color: #a9c6c5;
  font-size: .7rem;
  font-style: normal;
}

.wallet-v2-piggy-hero-copy p {
  max-width: 580px;
  color: #a6c3c3;
  font-size: .62rem;
  line-height: 1.75;
  margin: 0;
}

html.light .wallet-v2-piggy-hero-copy p {
  color: var(--wallet2-muted);
}

.wallet-v2-piggy-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(150, 217, 207, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
}

html.light .wallet-v2-piggy-totals {
  background: rgba(255, 255, 255, .58);
}

.wallet-v2-piggy-totals>div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px;
}

.wallet-v2-piggy-totals>div+div {
  border-inline-start: 1px solid rgba(150, 217, 207, .13);
}

.wallet-v2-piggy-totals span {
  color: #9ebcbb;
  font-size: .53rem;
  line-height: 1.45;
}

html.light .wallet-v2-piggy-totals span {
  color: var(--wallet2-muted);
}

.wallet-v2-piggy-totals strong {
  overflow: hidden;
  color: #ecfbf8;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.light .wallet-v2-piggy-totals strong {
  color: var(--wallet2-text);
}

.wallet-v2-piggy-totals small {
  color: #99b4b4;
  font-size: .46rem;
}

.wallet-v2-piggy-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 25px;
}

.wallet-v2-piggy-section-head>div>span {
  color: var(--wallet2-primary);
  font-size: .56rem;
  font-weight: 900;
}

.wallet-v2-piggy-section-head h3 {
  color: var(--wallet2-text);
  font-size: .94rem;
  margin: 3px 0 0;
}

.wallet-v2-piggy-section-head>p {
  color: var(--wallet2-muted);
  font-size: .57rem;
  margin: 0;
}

.wallet-v2-piggy-funds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
}

.wallet-v2-piggy-fund {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wallet2-line);
  border-radius: 17px;
  background: var(--wallet2-panel-soft);
  padding: 16px;
}

.wallet-v2-piggy-fund::after {
  position: absolute;
  content: '';
  width: 52%;
  height: 3px;
  inset-inline-start: 0;
  top: 0;
  background: linear-gradient(90deg, var(--fund), transparent);
}

.wallet-v2-piggy-fund>header,
.wallet-v2-piggy-fund>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wallet-v2-piggy-fund>header>span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fund) 11%, transparent);
}

.wallet-v2-piggy-fund>header>i {
  color: var(--fund);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fund) 9%, transparent);
  padding: 5px 7px;
  font-size: .5rem;
  font-style: normal;
  font-weight: 850;
}

.wallet-v2-piggy-fund h3 {
  color: var(--wallet2-text);
  font-size: .72rem;
  margin: 13px 0 5px;
}

.wallet-v2-piggy-fund>strong {
  display: block;
  direction: ltr;
  overflow: hidden;
  color: var(--fund);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.06rem;
}

[dir='rtl'] .wallet-v2-piggy-fund>strong {
  text-align: right;
}

.wallet-v2-piggy-fund>strong.is-negative,
.wallet-v2-piggy-month b.is-negative {
  color: var(--wallet2-danger);
}

.wallet-v2-piggy-fund>strong small,
.wallet-v2-piggy-month small {
  color: var(--wallet2-muted);
  font-size: .47rem;
}

.wallet-v2-piggy-fund-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(132, 158, 160, .13);
  margin: 12px 0 9px;
}

.wallet-v2-piggy-fund-bar i {
  display: block;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fund) 72%, #fff), var(--fund));
}

.wallet-v2-piggy-fund>footer {
  color: var(--wallet2-muted);
  font-size: .5rem;
}

.wallet-v2-piggy-fund>footer b {
  color: var(--wallet2-text);
  font-size: .53rem;
}

.wallet-v2-piggy-history-head {
  margin-top: 27px;
}

.wallet-v2-piggy-months {
  overflow: hidden;
  border: 1px solid var(--wallet2-line);
  border-radius: 16px;
  background: var(--wallet2-panel-soft);
  margin-top: 12px;
}

.wallet-v2-piggy-month {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(130px, 1.15fr) repeat(3, minmax(115px, 1fr));
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
}

.wallet-v2-piggy-month+.wallet-v2-piggy-month {
  border-top: 1px solid var(--wallet2-line);
}

.wallet-v2-piggy-month-header {
  color: var(--wallet2-muted);
  background: rgba(113, 147, 150, .05);
  font-size: .54rem;
  font-weight: 850;
}

.wallet-v2-piggy-month:not(.wallet-v2-piggy-month-header):hover {
  background: rgba(24, 185, 154, .035);
}

.wallet-v2-piggy-month>strong {
  color: var(--wallet2-text);
  font-size: .68rem;
}

.wallet-v2-piggy-month>span,
.wallet-v2-piggy-month>b {
  direction: ltr;
  color: var(--wallet2-muted);
  text-align: start;
  font-size: .65rem;
  font-weight: 750;
}

[dir='rtl'] .wallet-v2-piggy-month>span,
[dir='rtl'] .wallet-v2-piggy-month>b {
  text-align: right;
}

.wallet-v2-piggy-month>b {
  color: var(--wallet2-primary-2);
  font-size: .72rem;
}

.wallet-v2-planning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 18px;
}

.wallet-v2-setting-card {
  min-width: 0;
  border: 1px solid var(--wallet2-line);
  border-radius: 17px;
  background: var(--wallet2-panel-soft);
  padding: 17px;
}

.wallet-v2-setting-card>header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wallet-v2-setting-card>header>span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--wallet2-primary);
  border-radius: 12px;
  background: rgba(24, 185, 154, .1);
}

.wallet-v2-setting-card>header>div {
  min-width: 0;
  flex: 1;
}

.wallet-v2-setting-card h3 {
  color: var(--wallet2-text);
  font-size: 0.78rem;
  margin: 0;
}

.wallet-v2-setting-card header p {
  color: var(--wallet2-muted);
  font-size: 0.58rem;
  line-height: 1.55;
  margin: 3px 0 0;
}

.wallet-v2-setting-card>label {
  display: grid;
  gap: 5px;
  margin-top: 14px;
}

.wallet-v2-setting-card>label>span,
.wallet-v2-range-head>span {
  color: var(--wallet2-muted);
  font-size: 0.58rem;
  font-weight: 800;
}

.wallet-v2-setting-card input:not([type='range']),
.wallet-v2-setting-card select {
  width: 100%;
  min-height: 41px;
  color: var(--wallet2-text);
  border: 1px solid var(--wallet2-line);
  border-radius: 10px;
  outline: 0;
  background: var(--wallet2-panel);
  padding: 8px 10px;
  font-size: 0.68rem;
}

.wallet-v2-setting-card input:focus,
.wallet-v2-setting-card select:focus {
  border-color: rgba(24, 185, 154, .5);
  box-shadow: 0 0 0 3px rgba(24, 185, 154, .07);
}

.wallet-v2-range-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
}

.wallet-v2-range-head strong {
  color: var(--wallet2-primary);
  font-size: 0.77rem;
}

.wallet-v2-setting-card input[type='range'] {
  width: 100%;
  accent-color: var(--wallet2-primary);
  margin-top: 13px;
}

.wallet-v2-range-scale {
  display: flex;
  justify-content: space-between;
  color: var(--wallet2-muted);
  font-size: 0.51rem;
  margin-top: 2px;
}

.wallet-v2-distribution-card {
  margin-top: 11px;
}

.wallet-v2-distribution-card>header>strong {
  color: var(--wallet2-primary);
  border-radius: 999px;
  background: rgba(24, 185, 154, .09);
  padding: 6px 9px;
  font-size: 0.69rem;
}

.wallet-v2-distribution-card>header>strong[data-valid='false'] {
  color: #efa84f;
  background: rgba(239, 168, 79, .1);
}

.wallet-v2-plan-stack {
  height: 9px;
  overflow: hidden;
  display: flex;
  border-radius: 999px;
  background: rgba(130, 155, 157, .12);
  margin-top: 17px;
}

.wallet-v2-plan-stack i {
  display: block;
  height: 100%;
  transition: width 180ms ease;
}

.wallet-v2-fund-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 24px;
  margin-top: 20px;
}

.wallet-v2-fund-sliders>label {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.wallet-v2-fund-sliders>label>span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.wallet-v2-fund-sliders i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fund) 10%, transparent);
  font-style: normal;
}

.wallet-v2-fund-sliders b {
  overflow: hidden;
  color: var(--wallet2-text);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-v2-fund-sliders strong {
  color: var(--fund);
  font-size: 0.63rem;
}

.wallet-v2-fund-sliders input {
  width: 100%;
  accent-color: var(--fund);
}

.wallet-v2-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  overflow-y: auto;
  display: grid;
  place-items: center;
  background: rgba(4, 14, 19, .7);
  backdrop-filter: blur(10px);
  padding: 20px;
  animation: walletV2Fade 170ms ease-out;
}

.wallet-v2-modal {
  --wallet2-panel: #111d25;
  --wallet2-panel-soft: #16262f;
  --wallet2-line: rgba(149, 183, 188, 0.16);
  --wallet2-text: #f5fbfa;
  --wallet2-muted: #8ca5a8;
  --wallet2-primary: #18b99a;
  --wallet2-primary-2: #46d4ae;
  width: min(620px, 100%);
  overflow: hidden;
  color: var(--wallet2-text);
  border: 1px solid rgba(93, 215, 187, .2);
  border-radius: 21px;
  background: var(--wallet2-panel);
  box-shadow: 0 32px 90px rgba(0, 10, 14, .46);
  animation: walletV2Lift 220ms cubic-bezier(.2, .8, .2, 1);
}

html.light .wallet-v2-modal {
  --wallet2-panel: #ffffff;
  --wallet2-panel-soft: #f4f9f8;
  --wallet2-line: rgba(35, 84, 87, 0.13);
  --wallet2-text: #153338;
  --wallet2-muted: #6d8589;
}

.wallet-v2-modal--small .wallet-v2-modal {
  width: min(470px, 100%);
}

.wallet-v2-modal-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--wallet2-line);
  background: linear-gradient(120deg, rgba(24, 185, 154, .09), transparent);
}

.wallet-v2-modal-head>span {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #09382e;
  border-radius: 13px;
  background: linear-gradient(145deg, #49d4af, #83e8cc);
}

.wallet-v2-modal-head>div {
  min-width: 0;
  flex: 1;
}

.wallet-v2-modal-head h2 {
  color: var(--wallet2-text);
  font-size: 1rem;
  margin: 0;
}

.wallet-v2-modal-head p {
  color: var(--wallet2-muted);
  font-size: 0.61rem;
  margin: 3px 0 0;
}

.wallet-v2-modal-head>button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--wallet2-muted);
  border: 1px solid var(--wallet2-line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.wallet-v2-modal-body {
  padding: 19px 20px;
}

.wallet-v2-type-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  border-radius: 12px;
  background: var(--wallet2-panel-soft);
  padding: 4px;
  margin-bottom: 16px;
}

.wallet-v2-type-switch button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--wallet2-muted);
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: 0.67rem;
  font-weight: 850;
}

.wallet-v2-type-switch button.active {
  color: #08745f;
  background: rgba(24, 185, 154, .14);
  box-shadow: 0 4px 12px rgba(10, 100, 83, .08);
}

.wallet-v2-type-switch button[data-wallet-type='expense'].active {
  color: #d85168;
  background: rgba(239, 94, 120, .12);
}

.wallet-v2-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wallet-v2-form-grid>label,
.wallet-v2-single-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.wallet-v2-form-grid>label.wide {
  grid-column: 1 / -1;
}

.wallet-v2-form-grid label>span,
.wallet-v2-single-field>span,
.wallet-v2-color-field>span {
  color: var(--wallet2-muted);
  font-size: 0.59rem;
  font-weight: 800;
}

.wallet-v2-form-grid input,
.wallet-v2-form-grid select,
.wallet-v2-single-field input {
  width: 100%;
  min-height: 43px;
  color: var(--wallet2-text);
  border: 1px solid var(--wallet2-line);
  border-radius: 10px;
  outline: 0;
  background: var(--wallet2-panel-soft);
  padding: 9px 10px;
  font-size: 0.69rem;
}

.wallet-v2-form-grid input:focus,
.wallet-v2-form-grid select:focus,
.wallet-v2-single-field input:focus {
  border-color: rgba(24, 185, 154, .56);
  box-shadow: 0 0 0 3px rgba(24, 185, 154, .08);
}

.wallet-v2-form-error {
  color: #f36f84;
  font-size: 0.62rem;
  font-weight: 800;
  margin-top: 10px;
}

.wallet-v2-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--wallet2-line);
  padding: 13px 20px 17px;
}

.wallet-v2-modal-footer .wallet-v2-primary,
.wallet-v2-modal-footer .wallet-v2-ghost {
  min-height: 39px;
  font-size: 0.67rem;
}

.wallet-v2-color-field {
  display: grid;
  gap: 7px;
}

.wallet-v2-color-field>div {
  display: flex;
  gap: 8px;
}

.wallet-v2-color-field label {
  cursor: pointer;
}

.wallet-v2-color-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wallet-v2-color-field i {
  width: 29px;
  height: 29px;
  display: block;
  border: 3px solid var(--wallet2-panel);
  border-radius: 50%;
  background: var(--choice);
  box-shadow: 0 0 0 1px var(--wallet2-line);
}

.wallet-v2-color-field input:checked+i {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--choice) 36%, transparent);
}

.wallet-v2-contribution-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid rgba(24, 185, 154, .15);
  border-radius: 12px;
  background: rgba(24, 185, 154, .07);
  padding: 12px;
  margin-bottom: 14px;
}

.wallet-v2-contribution-summary span {
  color: var(--wallet2-muted);
  font-size: 0.62rem;
}

.wallet-v2-contribution-summary strong {
  color: var(--wallet2-primary);
  font-size: 0.85rem;
}

.wallet-v2-contribution-summary small {
  color: var(--wallet2-muted);
  font-size: 0.5rem;
}

@keyframes walletV2Fade {
  from {
    opacity: 0;
  }
}

@keyframes walletV2Lift {
  from {
    opacity: 0;
    transform: translateY(15px) scale(.98);
  }
}

@media (max-width: 1120px) {
  .wallet-v2-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-v2-overview-grid {
    grid-template-columns: 1fr;
  }

  .wallet-v2-funds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-v2-goals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-v2-piggy-funds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .wallet-v2-page {
    gap: 13px;
    padding-bottom: 18px;
  }

  .wallet-v2-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 27px 22px;
    border-radius: 22px;
  }

  .wallet-v2-balance-card {
    transform: none !important;
  }

  .wallet-v2-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .wallet-v2-tabs {
    width: 100%;
  }

  .wallet-v2-tabs button {
    flex: 1 0 max-content;
  }

  .wallet-v2-period {
    justify-content: center;
  }

  .wallet-v2-lower-grid {
    grid-template-columns: 1fr;
  }

  .wallet-v2-filters {
    grid-template-columns: 1fr 1fr;
  }

  .wallet-v2-filters label {
    grid-column: 1 / -1;
  }

  .wallet-v2-planning-grid {
    grid-template-columns: 1fr;
  }

  .wallet-v2-piggy-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .wallet-v2-hero {
    padding: 23px 17px;
    border-radius: 18px;
  }

  .wallet-v2-hero h1 {
    font-size: 2rem;
  }

  .wallet-v2-hero-copy>p {
    font-size: 0.77rem;
  }

  .wallet-v2-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .wallet-v2-balance-card {
    min-height: 165px;
    padding: 18px;
  }

  .wallet-v2-toolbar {
    border-radius: 14px;
  }

  .wallet-v2-tabs button {
    padding-inline: 10px;
  }

  .wallet-v2-tabs button span {
    display: none;
  }

  .wallet-v2-tabs button svg {
    width: 18px;
    height: 18px;
  }

  .wallet-v2-metrics {
    grid-template-columns: 1fr;
  }

  .wallet-v2-metric {
    min-height: 91px;
  }

  .wallet-v2-panel,
  .wallet-v2-block {
    border-radius: 17px;
    padding: 15px;
  }

  .wallet-v2-section-head,
  .wallet-v2-block-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .wallet-v2-block-head>.wallet-v2-primary,
  .wallet-v2-head-actions {
    width: 100%;
  }

  .wallet-v2-head-actions>button {
    flex: 1;
  }

  .wallet-v2-flow-chart {
    height: 170px;
    gap: 5px;
  }

  .wallet-v2-spending-body {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
  }

  .wallet-v2-funds-grid {
    grid-template-columns: 1fr;
  }

  .wallet-v2-piggy-snapshot-body {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .wallet-v2-piggy-snapshot-icon {
    width: 66px;
    border-radius: 20px;
    font-size: 2rem;
  }

  .wallet-v2-transaction {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'icon copy amount' '. actions actions';
    gap: 8px;
  }

  [dir='rtl'] .wallet-v2-transaction {
    grid-template-areas: 'amount copy icon' 'actions actions .';
  }

  .wallet-v2-transaction.is-compact {
    grid-template-areas: 'icon copy amount';
  }

  [dir='rtl'] .wallet-v2-transaction.is-compact {
    grid-template-areas: 'amount copy icon';
  }

  .wallet-v2-row-actions {
    justify-self: end;
  }

  .wallet-v2-filters {
    grid-template-columns: 1fr;
  }

  .wallet-v2-filters label {
    grid-column: auto;
  }

  .wallet-v2-goals-summary {
    grid-template-columns: 1fr;
  }

  .wallet-v2-goals-summary>div+div {
    border-inline-start: 0;
    border-top: 1px solid var(--wallet2-line);
  }

  .wallet-v2-goals-grid {
    grid-template-columns: 1fr;
  }

  .wallet-v2-piggy-live {
    align-self: flex-start;
  }

  .wallet-v2-piggy-hero {
    border-radius: 17px;
    padding: 13px;
  }

  .wallet-v2-piggy-hero-copy {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 13px;
    padding: 5px;
  }

  .wallet-v2-piggy-visual {
    width: 74px;
    border-radius: 22px;
  }

  .wallet-v2-piggy-hero-copy strong {
    font-size: 1.45rem;
  }

  .wallet-v2-piggy-totals {
    grid-template-columns: 1fr;
  }

  .wallet-v2-piggy-totals>div {
    padding: 11px 13px;
  }

  .wallet-v2-piggy-totals>div+div {
    border-inline-start: 0;
    border-top: 1px solid rgba(150, 217, 207, .13);
  }

  .wallet-v2-piggy-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .wallet-v2-piggy-funds {
    grid-template-columns: 1fr;
  }

  .wallet-v2-piggy-months {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .wallet-v2-piggy-month {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 14px;
    border: 1px solid var(--wallet2-line);
    border-radius: 14px;
    background: var(--wallet2-panel-soft);
    padding: 14px;
  }

  .wallet-v2-piggy-month.wallet-v2-piggy-month-header {
    display: none;
  }

  .wallet-v2-piggy-month+.wallet-v2-piggy-month {
    border-top: 1px solid var(--wallet2-line);
    margin-top: 8px;
  }

  .wallet-v2-piggy-month>strong {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--wallet2-line);
    padding-bottom: 10px;
  }

  .wallet-v2-piggy-month>span,
  .wallet-v2-piggy-month>b {
    display: grid;
    gap: 4px;
  }

  .wallet-v2-piggy-month>span::before,
  .wallet-v2-piggy-month>b::before {
    content: attr(data-label);
    color: var(--wallet2-muted);
    font-family: inherit;
    font-size: .48rem;
    font-weight: 750;
  }

  .wallet-v2-fund-sliders {
    grid-template-columns: 1fr;
  }

  .wallet-v2-modal-backdrop {
    align-items: end;
    padding: 10px;
  }

  .wallet-v2-modal {
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    border-radius: 20px 20px 14px 14px;
  }

  .wallet-v2-form-grid {
    grid-template-columns: 1fr;
  }

  .wallet-v2-form-grid>label.wide {
    grid-column: auto;
  }

  .wallet-v2-modal-footer>button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .wallet-v2-page *,
  .wallet-v2-modal-backdrop * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Show/Hide workspace elements depending on account type */
body.company-account [data-section="productivity"],
body.company-account [data-section="analysis"],
body.company-account [data-section="finance"],
body.company-account [data-route="tasks"],
body.company-account [data-route="calendar"],
body.company-account [data-route="meetings"],
body.company-account [data-route="habits"],
body.company-account [data-route="worship"],
body.company-account [data-route="focus"],
body.company-account [data-route="wallet"],
body.company-account [data-route="debtbook"],
body.company-account [data-route="annual-plan"],
body.company-account [data-route="stats"] {
  display: none !important;
}

/* Individual account hides company sections */
body:not(.company-account) [data-section="company"],
body:not(.company-account) [data-route^="company-"] {
  display: none !important;
}

/* ─── SVG Icon normalization ─── */
.icon svg {
  display: block;
  flex-shrink: 0;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

/* ─── Card Accent Line (border replacement) ─── */
.card-accent-line {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  background: var(--accent-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  z-index: 2;
}

html.ltr .card-accent-line {
  right: auto;
  left: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* ─── Worship List (new layout) ─── */
.worship-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.worship-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: var(--border-card);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
}

.worship-list-item::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--item-color, var(--clr-primary));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.worship-list-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.worship-list-item:hover::before {
  opacity: 1;
}

.worship-list-item.done {
  background: rgba(52, 211, 153, 0.05);
}

.worship-list-item.done::before {
  opacity: 1;
  background: var(--clr-success);
}

.worship-item-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--item-color-bg, rgba(81, 69, 220, 0.12));
  color: var(--item-color, var(--clr-primary));
}

.worship-item-info {
  flex: 1;
  min-width: 0;
}

.worship-item-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.worship-item-sub {
  font-size: 11px;
  color: var(--clr-text-muted);
}

.worship-item-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.worship-item-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--clr-text-muted);
}

.worship-item-badge.done {
  background: rgba(52, 211, 153, 0.15);
  color: var(--clr-success);
}

.worship-item-arrow {
  color: var(--clr-text-dim);
  transition: transform var(--transition-fast);
}

.worship-list-item:hover .worship-item-arrow {
  transform: translateX(-3px);
}

/* ─── Worship Detail Panel ─── */
.worship-detail-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.worship-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.worship-detail-panel.open .worship-detail-backdrop {
  opacity: 1;
  pointer-events: all;
}

.worship-detail-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background: var(--clr-surface-2);
  border: var(--border-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--transition-bounce);
  pointer-events: none;
}

.worship-detail-panel.open .worship-detail-sheet {
  transform: translateY(0);
  pointer-events: all;
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  margin: 12px auto 0;
}

.sheet-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: var(--border-subtle);
}

.sheet-header-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.sheet-title {
  font-size: 18px;
  font-weight: 800;
}

.sheet-subtitle {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

.sheet-close {
  margin-right: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: none;
  cursor: pointer;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.sheet-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--clr-text);
}

.sheet-body {
  padding: var(--space-5) var(--space-6) var(--space-8);
}

/* ─── Adhkar Card ─── */
.adhkar-card {
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  border: var(--border-card);
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--transition-fast);
}

.adhkar-card.completed {
  background: rgba(52, 211, 153, 0.05);
}

.adhkar-text {
  font-size: 18px;
  line-height: 2;
  text-align: center;
  color: var(--clr-text);
  margin-bottom: var(--space-4);
  white-space: pre-line;
  font-family: var(--font-arabic);
}

.adhkar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.adhkar-label {
  font-size: 12px;
  color: var(--clr-text-muted);
  font-weight: 500;
}

.adhkar-counter-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.adhkar-count-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: all var(--transition-fast);
}

.adhkar-count-btn:hover {
  background: var(--clr-primary);
  color: white;
}

.adhkar-progress-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-primary);
  min-width: 50px;
  text-align: center;
  direction: ltr;
}

.adhkar-mini-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
  overflow: hidden;
}

.adhkar-mini-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--clr-success);
  transition: width var(--transition-base);
}

/* ─── Tasbeeh Counter ─── */
.tasbeeh-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-4);
}

.tasbeeh-display {
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  color: var(--clr-primary);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-shadow: 0 0 40px rgba(81, 69, 220, 0.4);
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tasbeeh-display.pulse {
  transform: scale(1.08);
}

.tasbeeh-target {
  font-size: 14px;
  color: var(--clr-text-muted);
  font-weight: 500;
}

.tasbeeh-ring {
  position: relative;
  width: 240px;
  height: 240px;
}

.tasbeeh-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.tasbeeh-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 6;
}

.tasbeeh-ring-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(81, 69, 220, 0.5));
}

.tasbeeh-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tasbeeh-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
  color: white;
  font-size: 32px;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(81, 69, 220, 0.5);
  transition: all var(--transition-bounce);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

.tasbeeh-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 35px rgba(81, 69, 220, 0.65);
}

.tasbeeh-btn:active {
  transform: scale(0.94);
}

.tasbeeh-controls {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.tasbeeh-reset-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--clr-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.tasbeeh-reset-btn:hover {
  background: rgba(248, 113, 113, 0.12);
  color: var(--clr-danger);
}

/* ─── Quran Tracker ─── */
.quran-tracker-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.quran-session-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(52, 211, 153, 0.05);
  border: none;
  border-radius: var(--radius-md);
}

.quran-page-badge {
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-success);
  min-width: 36px;
  direction: ltr;
}

/* ─── Habits Page ─── */
.habit-today-card {
  padding: var(--space-5) var(--space-6);
  position: relative;
  overflow: hidden;
}

.habit-today-bg {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  opacity: 0.05;
}

.habit-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-card);
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--transition-fast);
  margin-bottom: var(--space-3);
}

.habit-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.habit-item.done {
  background: rgba(52, 211, 153, 0.04);
}

.habit-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.habit-info {
  flex: 1;
  min-width: 0;
}

.habit-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.habit-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.habit-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
  min-width: 60px;
}

.habit-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.habit-count-text {
  font-size: 11px;
  color: var(--clr-text-muted);
  font-weight: 600;
  white-space: nowrap;
  direction: ltr;
}

.habit-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.habit-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.habit-btn.plus:hover {
  background: var(--clr-success);
  color: white;
}

.habit-btn.minus:hover {
  background: rgba(248, 113, 113, 0.2);
  color: var(--clr-danger);
}

.habit-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-bounce);
}

.habit-check.done {
  background: var(--clr-success);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

/* Habit Week Mini-dots */
.habit-week-dots {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.habit-week-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--transition-fast);
}

.habit-week-dot.done {
  background: var(--clr-success);
}

.habit-week-dot.today {
  box-shadow: 0 0 0 2px var(--clr-primary);
}

/* Streak badge in habit list */
.habit-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--clr-warning);
  background: rgba(251, 191, 36, 0.1);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}

/* ─── Habit Add Modal extra fields ─── */
.color-picker-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.color-dot-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.color-dot-btn.selected {
  box-shadow: 0 0 0 2px var(--clr-bg), 0 0 0 4px white;
  transform: scale(1.1);
}

.icon-picker-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.icon-option-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: var(--border-card);
  background: rgba(255, 255, 255, 0.03);
  font-size: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-option-btn.selected,
.icon-option-btn:hover {
  background: var(--clr-primary-subtle);
}

/* ─── Worship icon wrap (SVG icons in worship grid) ─── */
.worship-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  margin: 0 auto var(--space-2);
  transition: transform var(--transition-fast);
}

.worship-card:hover .worship-icon-wrap {
  transform: scale(1.1);
}

.worship-card.done .worship-icon-wrap {
  background: rgba(52, 211, 153, 0.12);
}

.prayer-auto-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  margin: var(--space-2) 0 var(--space-5);
}

.prayer-auto-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 900;
  color: var(--clr-text);
}

.prayer-auto-copy {
  margin-top: 4px;
  font-size: 12px;
  color: var(--clr-text-muted);
  line-height: 1.7;
}

.prayer-auto-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--clr-text);
  line-height: 1.7;
  opacity: 0.9;
}

.prayer-auto-location svg {
  flex: 0 0 auto;
  color: var(--clr-primary);
}

.prayer-auto-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Adhkar item (inline in page, not bottom sheet) ─── */
.adhkar-item {
  transition: all var(--transition-fast);
}

.adhkar-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.adhkar-done {
  background: rgba(52, 211, 153, 0.04) !important;
}

/* ─── Habit card (for inline rendered list) ─── */
.habit-card {
  transition: all var(--transition-fast);
}

.habit-card:hover {
  transform: translateY(-1px);
}

.habit-done {
  background: rgba(52, 211, 153, 0.04) !important;
}

/* ─── Responsive fixes ─── */
@media (max-width: 640px) {
  .worship-detail-sheet {
    max-height: 95vh;
  }

  .prayer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .prayer-auto-card {
    align-items: stretch;
    flex-direction: column;
  }

  .prayer-auto-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .tasbeeh-display {
    font-size: 72px;
  }

  .tasbeeh-btn {
    width: 64px;
    height: 64px;
    font-size: 26px;
  }
}

/* Mobile sub-screens: merge the section title bar into the page/first hero card. */
@media (max-width: 900px) {
  #page-content.more-mobile-subscreen {
    --mobile-screen-head-bg: var(--clr-bg, #0f0f1a);
    --mobile-screen-head-color: var(--clr-text, #f8fafc);
    --mobile-screen-back-bg: rgba(148, 163, 184, 0.08);
    --mobile-screen-back-border: rgba(148, 163, 184, 0.12);
    --mobile-screen-back-color: var(--mobile-screen-head-color);
  }

  #page-content.more-mobile-subscreen .more-mobile-screen-header {
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    margin: 0;
    padding: env(safe-area-inset-top, 0px) 14px 0;
    color: var(--mobile-screen-head-color);
    border: 0 !important;
    border-radius: 0;
    background: var(--mobile-screen-head-bg) !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #page-content.more-mobile-subscreen .more-mobile-screen-title {
    color: inherit;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.018em;
  }

  #page-content.more-mobile-subscreen .more-mobile-back-btn {
    width: 40px;
    height: 40px;
    color: var(--mobile-screen-back-color);
    border: 1px solid var(--mobile-screen-back-border);
    border-radius: 14px;
    background: var(--mobile-screen-back-bg);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #page-content.more-mobile-subscreen .more-mobile-back-btn:hover,
  #page-content.more-mobile-subscreen .more-mobile-back-btn:active {
    color: var(--mobile-screen-back-color);
    background: color-mix(in srgb, var(--mobile-screen-back-bg) 72%, currentColor 8%);
    transform: scale(0.96);
  }

  html.light #page-content.more-mobile-subscreen {
    --mobile-screen-head-bg: var(--clr-bg, #f7f8fc);
    --mobile-screen-head-color: #172235;
    --mobile-screen-back-bg: rgba(255, 255, 255, 0.58);
    --mobile-screen-back-border: rgba(71, 85, 105, 0.11);
  }

  /* Journal: continue the secure-vault surface through the app header. */
  #page-content.more-mobile-subscreen[data-more-route="journal"] {
    --mobile-screen-head-bg: radial-gradient(circle at 100% 0, rgba(139, 125, 246, 0.15), transparent 42%), linear-gradient(145deg, #182138, #0f1728);
    --mobile-screen-head-color: #f4f7fb;
    --mobile-screen-back-bg: rgba(255, 255, 255, 0.07);
    --mobile-screen-back-border: rgba(255, 255, 255, 0.11);
  }

  html.light #page-content.more-mobile-subscreen[data-more-route="journal"] {
    --mobile-screen-head-bg: radial-gradient(circle at 100% 0, rgba(139, 125, 246, 0.12), transparent 42%), #ffffff;
    --mobile-screen-head-color: #172235;
    --mobile-screen-back-bg: rgba(139, 125, 246, 0.07);
    --mobile-screen-back-border: rgba(139, 125, 246, 0.13);
  }

  #page-content.more-mobile-subscreen[data-more-route="journal"]>.journal-gate,
  #page-content.more-mobile-subscreen[data-more-route="journal"]>.journal-workspace>.journal-hero {
    margin-top: 0;
    border-top: 0;
    border-radius: 0 0 22px 22px;
  }

  /* Statistics: one continuous report surface instead of a detached white bar. */
  #page-content.more-mobile-subscreen[data-more-route="stats"] {
    --mobile-screen-head-bg: linear-gradient(135deg, rgba(29, 26, 62, 0.98), rgba(15, 18, 31, 0.95));
    --mobile-screen-head-color: #f8fafc;
    --mobile-screen-back-bg: rgba(255, 255, 255, 0.07);
    --mobile-screen-back-border: rgba(255, 255, 255, 0.11);
  }

  html.light #page-content.more-mobile-subscreen[data-more-route="stats"] {
    --mobile-screen-head-bg: linear-gradient(135deg, #f6f5ff, #ffffff);
    --mobile-screen-head-color: #172235;
    --mobile-screen-back-bg: rgba(118, 103, 248, 0.07);
    --mobile-screen-back-border: rgba(118, 103, 248, 0.13);
  }

  #page-content.more-mobile-subscreen[data-more-route="stats"]>.stats-v3-hero {
    margin-top: 0;
    border-top: 0;
    border-radius: 0 0 22px 22px;
  }

  /* Finance and worship use immersive dark hero headers in both themes. */
  #page-content.more-mobile-subscreen[data-more-route="wallet"] {
    --mobile-screen-head-bg: linear-gradient(125deg, #0b252b 0%, #103b3c 52%, #10293a 100%);
    --mobile-screen-head-color: #ffffff;
    --mobile-screen-back-bg: rgba(255, 255, 255, 0.075);
    --mobile-screen-back-border: rgba(144, 239, 215, 0.15);
  }

  html.light #page-content.more-mobile-subscreen[data-more-route="wallet"] {
    --mobile-screen-head-bg: linear-gradient(125deg, #0b252b 0%, #103b3c 52%, #10293a 100%);
    --mobile-screen-head-color: #ffffff;
    --mobile-screen-back-bg: rgba(255, 255, 255, 0.075);
    --mobile-screen-back-border: rgba(144, 239, 215, 0.15);
  }

  #page-content.more-mobile-subscreen[data-more-route="wallet"]>.wallet-v2-page {
    padding-top: 0;
  }

  #page-content.more-mobile-subscreen[data-more-route="wallet"] .wallet-v2-hero {
    border-top: 0;
    border-radius: 0 0 24px 24px;
  }

  #page-content.more-mobile-subscreen[data-more-route="worship"] {
    --mobile-screen-head-bg: linear-gradient(135deg, #17162d 0%, #242047 58%, #161a31 100%);
    --mobile-screen-head-color: #ffffff;
    --mobile-screen-back-bg: rgba(255, 255, 255, 0.075);
    --mobile-screen-back-border: rgba(141, 130, 255, 0.16);
  }

  html.light #page-content.more-mobile-subscreen[data-more-route="worship"] {
    --mobile-screen-head-bg: linear-gradient(135deg, #17162d 0%, #242047 58%, #161a31 100%);
    --mobile-screen-head-color: #ffffff;
    --mobile-screen-back-bg: rgba(255, 255, 255, 0.075);
    --mobile-screen-back-border: rgba(141, 130, 255, 0.16);
  }

  #page-content.more-mobile-subscreen[data-more-route="worship"] .worship-v2-hero {
    border-top: 0;
    border-radius: 0 0 24px 24px;
  }

  /* Metals wallet receives the same treatment with its gold-tinted identity. */
  #page-content.more-mobile-subscreen[data-more-route="metal-wallet"] {
    --mobile-screen-head-bg: radial-gradient(circle at 4% 0, rgba(231, 179, 67, 0.17), transparent 38%), linear-gradient(145deg, #1b2334, #0d1525);
    --mobile-screen-head-color: #f8fafc;
    --mobile-screen-back-bg: rgba(231, 179, 67, 0.08);
    --mobile-screen-back-border: rgba(231, 179, 67, 0.16);
  }

  html.light #page-content.more-mobile-subscreen[data-more-route="metal-wallet"] {
    --mobile-screen-head-bg: radial-gradient(circle at 4% 0, rgba(231, 179, 67, 0.13), transparent 38%), linear-gradient(145deg, #ffffff, #f4f6fa);
    --mobile-screen-head-color: #202c3e;
  }

  #page-content.more-mobile-subscreen[data-more-route="metal-wallet"]>.metal-wallet-hero,
  #page-content.more-mobile-subscreen[data-more-route="metal-wallet"]>#metal-wallet-content>.metal-wallet-hero {
    border-top: 0;
    border-radius: 0 0 22px 22px;
  }
}

/* Premium creation modals: task, habit, annual plan, and meeting */
#task-modal .premium-form-modal,
#habit-modal .premium-form-modal,
#meeting-modal .premium-form-modal,
#annual-plan-modal .premium-form-modal,
#wallet-add-modal .premium-form-modal {
  width: min(92vw, 760px) !important;
  max-width: min(92vw, 760px) !important;
  max-height: min(90vh, 820px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 28px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(81, 69, 220, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)) !important;
  color: #172033 !important;
  box-shadow:
    0 26px 80px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset !important;
}

#habit-modal .habit-form-modal {
  max-width: min(92vw, 760px) !important;
}

#meeting-modal .meeting-form-modal {
  max-width: min(92vw, 720px) !important;
}

#annual-plan-modal .premium-form-modal {
  max-width: min(92vw, 820px) !important;
}

html:not(.light) #task-modal .premium-form-modal,
html:not(.light) #habit-modal .premium-form-modal,
html:not(.light) #meeting-modal .premium-form-modal,
html:not(.light) #annual-plan-modal .premium-form-modal,
html:not(.light) #wallet-add-modal .premium-form-modal {
  background:
    radial-gradient(circle at 16% 12%, rgba(81, 69, 220, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(30, 27, 48, 0.98), rgba(15, 23, 42, 0.96)) !important;
  color: var(--clr-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}



#task-modal .premium-form-icon,
#habit-modal .premium-form-icon,
#meeting-modal .premium-form-icon,
#annual-plan-modal .premium-form-icon,
#wallet-add-modal .premium-form-icon {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 20px !important;
  color: #6d42ee !important;
  background:
    radial-gradient(circle at 68% 22%, rgba(129, 140, 248, 0.38), transparent 42%),
    rgba(81, 69, 220, 0.1) !important;
  box-shadow: 0 12px 30px rgba(81, 69, 220, 0.14) !important;
}

#task-modal .premium-form-modal .modal-header>.btn-icon,
#habit-modal .premium-form-modal .modal-header>.btn-icon,
#meeting-modal .premium-form-modal .modal-header>.btn-icon,
#annual-plan-modal .premium-form-modal .modal-header>.btn-icon,
#wallet-add-modal .premium-form-modal .modal-header>.btn-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 14px !important;
  color: #536079 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

html:not(.light) #task-modal .premium-form-modal .modal-header>.btn-icon,
html:not(.light) #habit-modal .premium-form-modal .modal-header>.btn-icon,
html:not(.light) #meeting-modal .premium-form-modal .modal-header>.btn-icon,
html:not(.light) #annual-plan-modal .premium-form-modal .modal-header>.btn-icon,
html:not(.light) #wallet-add-modal .premium-form-modal .modal-header>.btn-icon {
  color: var(--clr-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#task-modal .premium-form-modal .modal-body,
#habit-modal .premium-form-modal .modal-body,
#meeting-modal .premium-form-modal .modal-body,
#annual-plan-modal .premium-form-modal .modal-body,
#wallet-add-modal .premium-form-modal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 8px 34px 28px !important;
  -webkit-overflow-scrolling: touch !important;
}

#task-modal .premium-form-modal .form-group,
#habit-modal .premium-form-modal .form-group,
#meeting-modal .premium-form-modal .form-group,
#annual-plan-modal .premium-form-modal .form-group,
#wallet-add-modal .premium-form-modal .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html:not(.light) #task-modal .premium-form-modal .form-label,
html:not(.light) #habit-modal .premium-form-modal .form-label,
html:not(.light) #meeting-modal .premium-form-modal .form-label,
html:not(.light) #annual-plan-modal .premium-form-modal .form-label,
html:not(.light) #wallet-add-modal .premium-form-modal .form-label {
  color: var(--clr-text-muted) !important;
}

#task-modal .premium-form-modal .form-input,
#task-modal .premium-form-modal .form-select,
#task-modal .premium-form-modal .form-textarea,
#habit-modal .premium-form-modal .form-input,
#habit-modal .premium-form-modal .form-select,
#habit-modal .premium-form-modal .form-textarea,
#meeting-modal .premium-form-modal .form-input,
#meeting-modal .premium-form-modal .form-select,
#meeting-modal .premium-form-modal .form-textarea,
#annual-plan-modal .premium-form-modal .form-input,
#annual-plan-modal .premium-form-modal .form-select,
#annual-plan-modal .premium-form-modal .form-textarea,
#wallet-add-modal .premium-form-modal .form-input,
#wallet-add-modal .premium-form-modal .form-select,
#wallet-add-modal .premium-form-modal .form-textarea {
  border: 1px solid rgba(148, 163, 184, 0.36) !important;
  background: rgba(255, 255, 255, 0.76) !important;
}

#task-modal .premium-form-modal .form-textarea,
#annual-plan-modal .premium-form-modal textarea.form-input {
  min-height: 128px !important;
  resize: vertical !important;
}

#task-modal .premium-form-modal .form-input::placeholder,
#task-modal .premium-form-modal .form-textarea::placeholder,
#habit-modal .premium-form-modal .form-input::placeholder,
#meeting-modal .premium-form-modal .form-input::placeholder,
#annual-plan-modal .premium-form-modal .form-input::placeholder,
#wallet-add-modal .premium-form-modal .form-input::placeholder {
  color: #9aa6ba !important;
  opacity: 1 !important;
}

#task-modal .premium-form-modal .form-input:focus,
#task-modal .premium-form-modal .form-select:focus,
#task-modal .premium-form-modal .form-textarea:focus,
#habit-modal .premium-form-modal .form-input:focus,
#habit-modal .premium-form-modal .form-select:focus,
#meeting-modal .premium-form-modal .form-input:focus,
#meeting-modal .premium-form-modal .form-select:focus,
#annual-plan-modal .premium-form-modal .form-input:focus,
#annual-plan-modal .premium-form-modal .form-select:focus,
#wallet-add-modal .premium-form-modal .form-input:focus,
#wallet-add-modal .premium-form-modal .form-select:focus {
  border-color: rgba(81, 69, 220, 0.82) !important;
  box-shadow:
    0 0 0 3px rgba(81, 69, 220, 0.12),
    0 14px 34px rgba(81, 69, 220, 0.1) !important;
}

html:not(.light) #task-modal .premium-form-modal .form-input,
html:not(.light) #task-modal .premium-form-modal .form-select,
html:not(.light) #task-modal .premium-form-modal .form-textarea,
html:not(.light) #habit-modal .premium-form-modal .form-input,
html:not(.light) #habit-modal .premium-form-modal .form-select,
html:not(.light) #meeting-modal .premium-form-modal .form-input,
html:not(.light) #meeting-modal .premium-form-modal .form-select,
html:not(.light) #annual-plan-modal .premium-form-modal .form-input,
html:not(.light) #annual-plan-modal .premium-form-modal .form-select,
html:not(.light) #wallet-add-modal .premium-form-modal .form-input,
html:not(.light) #wallet-add-modal .premium-form-modal .form-select {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  color: var(--clr-text) !important;
  box-shadow: none !important;
}

#task-modal .premium-form-modal [style*="grid-template-columns:1fr 1fr"],
#habit-modal .premium-form-modal [style*="grid-template-columns:1fr 1fr"],
#meeting-modal .premium-form-modal .grid-2 {
  gap: 22px !important;
}

#task-modal .premium-form-modal .task-date-time-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

#task-modal .premium-form-modal .task-date-time-grid .form-group:first-child {
  grid-column: 1 / -1 !important;
}

#habit-modal .premium-form-modal input[type="color"].form-input {
  min-height: 58px !important;
  padding: 7px !important;
}

#task-modal .premium-form-modal .modal-footer,
#habit-modal .premium-form-modal .modal-footer,
#meeting-modal .premium-form-modal .modal-footer,
#annual-plan-modal .premium-form-modal .modal-footer,
#wallet-add-modal .premium-form-modal .modal-footer {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: 22px 34px 30px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: transparent !important;
}


#task-modal .premium-form-modal .btn-primary,
#habit-modal .premium-form-modal .btn-primary,
#meeting-modal .premium-form-modal .btn-primary,
#annual-plan-modal .premium-form-modal .btn-primary,
#wallet-add-modal .premium-form-modal .btn-primary {
  color: #fff !important;
  border: 0 !important;
  background: var(--clr-primary-gradient) !important;
  box-shadow: 0 16px 34px rgba(81, 69, 220, 0.28) !important;
}

#task-modal .premium-form-modal .btn-secondary,
#habit-modal .premium-form-modal .btn-secondary,
#meeting-modal .premium-form-modal .btn-secondary,
#annual-plan-modal .premium-form-modal .btn-secondary,
#wallet-add-modal .premium-form-modal .btn-secondary {
  color: #66738a !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

html:not(.light) #task-modal .premium-form-modal .btn-secondary,
html:not(.light) #habit-modal .premium-form-modal .btn-secondary,
html:not(.light) #meeting-modal .premium-form-modal .btn-secondary,
html:not(.light) #annual-plan-modal .premium-form-modal .btn-secondary,
html:not(.light) #wallet-add-modal .premium-form-modal .btn-secondary {
  color: var(--clr-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Custom premium form inputs styling */
.premium-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.premium-input-wrapper .form-input,
.premium-input-wrapper .form-select {
  padding-inline-start: 46px !important;
}

.premium-input-icon {
  position: absolute;
  inset-inline-start: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #5145dc;
  font-size: 18px;
  z-index: 2;
  transition: color 0.2s;
}

html:not(.light) .premium-input-icon {
  color: #818cf8;
}

/* Premium Color Picker Style */
.color-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  min-height: 58px;
  border-radius: 15px;
  padding: 0 16px;
}

.color-picker-preview {
  position: absolute;
  inset-inline-start: 12px;
  width: 250px;
  max-width: 60%;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  pointer-events: none;
  transition: background-color 0.2s;
}

.color-picker-icon {
  position: absolute;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #5145dc;
  pointer-events: none;
}

html:not(.light) .color-picker-icon {
  color: #818cf8;
}

.color-input-hidden {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#meeting-modal .premium-form-modal #meeting-save-btn {
  width: auto !important;
  min-width: min(100%, 280px) !important;
}

@media (max-width: 900px) {

  #task-modal.mobile-fs .premium-form-modal,
  #meeting-modal.mobile-fs .premium-form-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }


  #task-modal.mobile-fs .premium-form-icon,
  #meeting-modal.mobile-fs .premium-form-icon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 15px !important;
  }

  #task-modal.mobile-fs .premium-form-modal .modal-header>.btn-icon,
  #meeting-modal.mobile-fs .premium-form-modal .modal-header>.btn-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  #task-modal.mobile-fs .premium-form-modal .modal-title,
  #meeting-modal.mobile-fs .premium-form-modal .modal-title {
    font-size: 21px !important;
  }

  #task-modal.mobile-fs .premium-form-modal .modal-body,
  #meeting-modal.mobile-fs .premium-form-modal .modal-body {
    padding: 16px 18px 22px !important;
  }

  #task-modal.mobile-fs .premium-form-modal .modal-footer,
  #meeting-modal.mobile-fs .premium-form-modal .modal-footer {
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 640px) {

  #habit-modal .premium-form-modal,
  #annual-plan-modal .premium-form-modal,
  #wallet-add-modal .premium-form-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 26px 26px 0 0 !important;
  }

  #task-modal .premium-form-modal::before,
  #habit-modal .premium-form-modal::before,
  #meeting-modal .premium-form-modal::before,
  #annual-plan-modal .premium-form-modal::before,
  #wallet-add-modal .premium-form-modal::before {
    display: none !important;
  }

  #habit-modal .premium-form-icon,
  #annual-plan-modal .premium-form-icon,
  #wallet-add-modal .premium-form-icon {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 15px !important;
  }

  #habit-modal .premium-form-modal .modal-title,
  #annual-plan-modal .premium-form-modal .modal-title,
  #wallet-add-modal .premium-form-modal .modal-title {
    font-size: 22px !important;
  }

  #habit-modal .premium-form-modal .modal-body,
  #annual-plan-modal .premium-form-modal .modal-body,
  #wallet-add-modal .premium-form-modal .modal-body {
    padding: 14px 18px 22px !important;
  }

  #task-modal .premium-form-modal [style*="grid-template-columns:1fr 1fr"],
  #habit-modal .premium-form-modal [style*="grid-template-columns:1fr 1fr"],
  #meeting-modal .premium-form-modal .grid-2,
  #task-modal .premium-form-modal .task-date-time-grid {
    grid-template-columns: 1fr !important;
  }

  #task-modal .premium-form-modal .modal-footer,
  #habit-modal .premium-form-modal .modal-footer,
  #meeting-modal .premium-form-modal .modal-footer,
  #annual-plan-modal .premium-form-modal .modal-footer,
  #wallet-add-modal .premium-form-modal .modal-footer {
    gap: 10px !important;
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }


  #meeting-modal .premium-form-modal #meeting-save-btn {
    width: 100% !important;
  }
}



/* ═══════════════════════════════════════
   Wallet / Finance Module
═══════════════════════════════════════ */

/* ─── Wallet Tabs ─── */
.wallet-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  background: rgba(255, 255, 255, 0.03);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
}

.wallet-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--clr-text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.wallet-tab:hover {
  color: var(--clr-text);
  background: rgba(255, 255, 255, 0.04);
}

.wallet-tab.active {
  background: var(--clr-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(81, 69, 220, 0.3);
}

.wallet-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wallet-date-selectors {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: rgba(148, 163, 184, 0.08);
}

.wallet-date-selectors .form-select {
  height: 40px;
}

.wallet-piggy-toggle.active {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.wallet-finance-card {
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(81, 69, 220, 0.12) 0%, rgba(6, 182, 212, 0.05) 50%, rgba(19, 25, 36, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
}

html.light .wallet-finance-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(37, 99, 235, 0.04) 50%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}


.card-glow-bg {
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--clr-primary-light) 0%, transparent 70%);
  top: -50px;
  right: -50px;
  filter: blur(40px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

.wallet-finance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 2;
}

.wallet-finance-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--clr-text);
  font-size: 16px;
  font-weight: 800;
}

.wallet-finance-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  background: var(--clr-primary-subtle);
}

.wallet-finance-month {
  color: var(--clr-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.wallet-finance-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wallet-finance-status-badge.success {
  background: var(--clr-success-bg);
  color: var(--clr-success);
}

.wallet-finance-status-badge.danger {
  background: var(--clr-danger-bg);
  color: var(--clr-danger);
}

.card-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0 var(--space-6);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 2;
}

html.light .card-hero-section {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.hero-balance-label {
  font-size: 13px;
  color: var(--clr-text-muted);
  font-weight: 500;
  margin-bottom: var(--space-2);
  letter-spacing: 0.5px;
}

.hero-balance-value {
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 900;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

html.light .hero-balance-value {
  text-shadow: none;
}

.hero-balance-value.positive {
  color: var(--clr-success);
}

.hero-balance-value.negative {
  color: var(--clr-danger);
}

.balance-curr {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--clr-text-muted);
}

.card-spending-progress {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-spending-progress .progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--clr-text-muted);
  font-weight: 600;
}

.card-spending-progress .progress-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
}

html.light .card-spending-progress .progress-bar-container {
  background: rgba(15, 23, 42, 0.08);
}

.card-spending-progress .progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.wallet-finance-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  position: relative;
  z-index: 2;
}

.metric-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all var(--transition-fast);
}

html.light .metric-box {
  background: rgba(15, 23, 42, 0.01);
  border: 1px solid rgba(15, 23, 42, 0.03);
}

.metric-box:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

html.light .metric-box:hover {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.06);
}

.metric-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-box.income .metric-icon-wrap {
  background: var(--clr-success-bg);
  color: var(--clr-success);
}

.metric-box.expense .metric-icon-wrap {
  background: var(--clr-danger-bg);
  color: var(--clr-danger);
}

.metric-box.sadaqah .metric-icon-wrap {
  background: var(--clr-primary-subtle);
  color: var(--clr-primary-light);
}

.metric-box.remaining .metric-icon-wrap {
  background: rgba(6, 182, 212, 0.15);
  color: var(--clr-info);
}

html.light .metric-box.remaining .metric-icon-wrap {
  background: rgba(6, 182, 212, 0.1);
}

.metric-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: start;
}

.metric-label {
  font-size: 11px;
  color: var(--clr-text-muted);
  font-weight: 600;
}

.metric-info strong {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  text-align: start;
  flex-direction: row-reverse;
}

.metric-info strong small {
  font-size: 10px;
  font-weight: 600;
  color: var(--clr-text-muted);
}

.metric-sub {
  font-size: 10px;
  color: var(--clr-text-dim);
  margin-top: 1px;
  font-weight: 500;
}

.card-action-container {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
  width: 100%;
  position: relative;
  z-index: 2;
}

.wallet-finance-card .wallet-sadaqah-action {
  width: auto;
  margin-top: 0;
  padding: var(--space-2) var(--space-5);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  background: var(--clr-primary);
  color: white;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(81, 69, 220, 0.25);
  border: none;
}

.wallet-finance-card .wallet-sadaqah-action:hover {
  background: var(--clr-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(81, 69, 220, 0.35);
}

.wallet-fund-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fund-balance-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.fund-balance-row span {
  color: var(--clr-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.fund-balance-row strong {
  font-size: 24px;
  font-weight: 900;
  direction: ltr;
}

.fund-balance-row small {
  color: var(--clr-text-muted);
  font-size: 12px;
  font-weight: 500;
}

.fund-budget-mini {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--clr-text-muted);
  font-size: 11px;
}

.fund-budget-mini b {
  color: var(--clr-text);
  font-weight: 800;
}

.fund-over-budget {
  color: var(--clr-danger);
  background: var(--clr-danger-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  font-weight: 800;
}

/* ─── Summary Grid ─── */
.wallet-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.wallet-summary-card {
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

.wallet-summary-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--clr-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.wallet-summary-amount {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
  direction: ltr;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.wallet-summary-sub {
  font-size: 11px;
  color: var(--clr-text-muted);
}

/* ─── Funds Grid ─── */
.funds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.fund-card {
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.fund-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);
  pointer-events: none;
}

.fund-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ─── Transaction Item ─── */
.txn-item {
  transition: all var(--transition-fast);
}

.txn-item:hover {
  transform: translateX(-2px);
}

/* ─── Range slider color override ─── */
.range-slider {
  accent-color: var(--clr-primary);
}

/* ─── Responsive: Wallet ─── */
@media (max-width: 768px) {
  .wallet-header-actions {
    width: 100%;
    justify-content: stretch;
  }

  .wallet-header-actions .form-select {
    width: 100%;
  }

  .wallet-date-selectors {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    width: 100%;
  }

  .wallet-header-actions .btn {
    flex: 1;
    min-width: 0;
  }

  .wallet-finance-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .wallet-finance-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .wallet-summary-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .funds-grid {
    grid-template-columns: 1fr;
  }

  .wallet-tabs {
    flex-direction: row;
  }

  .wallet-tab {
    font-size: 12px;
    padding: var(--space-2) var(--space-3);
  }

  .wallet-summary-amount {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .wallet-header-actions {
    gap: var(--space-2);
  }

  .wallet-header-actions .btn {
    padding-inline: var(--space-3);
  }

  .wallet-date-selectors {
    grid-template-columns: 1fr;
  }

  .wallet-finance-card {
    padding: var(--space-5);
  }

  .wallet-finance-card .wallet-sadaqah-action {
    width: 100%;
  }

  .wallet-finance-metrics-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .fund-balance-row,
  .fund-budget-mini {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .wallet-tabs {
    gap: var(--space-1);
  }

  .wallet-tab svg {
    display: none;
  }
}

/* ─── Piggy Bank (حصالة) ─── */
.piggy-bank-card {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  overflow: hidden;
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.06),
      rgba(245, 158, 11, 0.03),
      rgba(81, 69, 220, 0.04));
  border: none;
}

.piggy-bank-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #fbbf24;
}

.piggy-bank-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Piggy icon */
.piggy-icon-wrap {
  position: relative;
  margin-bottom: var(--space-4);
}

.piggy-icon-bg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: piggy-bounce 3s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.15);
}

.piggy-icon-emoji {
  font-size: 40px;
  display: block;
}

@keyframes piggy-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* Sparkles */
.piggy-sparkle {
  position: absolute;
  font-size: 14px;
  animation: piggy-sparkle-float 2.5s ease-in-out infinite;
  pointer-events: none;
}

.piggy-sparkle-1 {
  top: -4px;
  right: -8px;
  animation-delay: 0s;
}

.piggy-sparkle-2 {
  top: 10px;
  left: -12px;
  animation-delay: 0.8s;
}

.piggy-sparkle-3 {
  bottom: -2px;
  right: -14px;
  animation-delay: 1.6s;
  font-size: 16px;
}

@keyframes piggy-sparkle-float {

  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translateY(-8px) scale(1.2);
    opacity: 1;
  }
}

/* Floating coins */
.piggy-coins-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.piggy-coin {
  position: absolute;
  top: -20px;
  left: var(--coin-x);
  font-size: var(--coin-size);
  animation: piggy-coin-fall 4s ease-in infinite;
  animation-delay: var(--coin-delay);
  opacity: 0;
}

@keyframes piggy-coin-fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.25;
  }

  100% {
    transform: translateY(calc(100% + 40px)) rotate(360deg);
    opacity: 0;
  }
}

/* Grand total */
.piggy-total-section {
  margin-bottom: var(--space-5);
}

.piggy-total-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-2);
}

.piggy-total-amount {
  font-size: 44px;
  font-weight: 900;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  direction: ltr;
  margin-bottom: 2px;
}

.piggy-total-currency {
  font-size: 15px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: var(--space-2);
}

.piggy-total-sub {
  font-size: 11px;
  color: var(--clr-text-dim);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Per-fund breakdown */
.piggy-funds-breakdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  margin-top: var(--space-4);
}

.piggy-fund-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: start;
}

.piggy-fund-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.piggy-fund-details {
  flex: 1;
  min-width: 0;
}

.piggy-fund-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 4px;
}

.piggy-fund-bar-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.piggy-fund-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.piggy-fund-amount {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  direction: ltr;
  flex-shrink: 0;
}

.piggy-fund-amount span {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}

/* Expand button */
.piggy-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: var(--radius-md);
  color: var(--clr-text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-2);
}

.piggy-expand-btn:hover {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
}

.piggy-expand-chevron {
  transition: transform var(--transition-fast);
}

.piggy-expand-btn.expanded .piggy-expand-chevron {
  transform: rotate(180deg);
}

/* Monthly detail rows */
.piggy-months-detail {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  animation: piggy-slide-down 0.3s ease;
}

.piggy-months-detail.open {
  display: flex;
}

@keyframes piggy-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.piggy-month-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.piggy-month-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.piggy-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
}

.piggy-month-amount {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  direction: ltr;
}

.piggy-month-amount.zero {
  color: var(--clr-text-dim);
  opacity: 0.5;
}

/* ─── Responsive: Piggy Bank ─── */
@media (max-width: 768px) {
  .piggy-bank-card {
    padding: var(--space-5);
  }

  .piggy-total-amount {
    font-size: 34px;
  }

  .piggy-icon-bg {
    width: 64px;
    height: 64px;
  }

  .piggy-icon-emoji {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .piggy-total-amount {
    font-size: 28px;
  }

  .piggy-fund-item {
    gap: var(--space-2);
  }

  .piggy-fund-amount {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════
   Day Strip (Tasks Calendar Strip)
═══════════════════════════════════════ */

.day-strip-wrapper {
  margin-bottom: var(--space-2);
  position: relative;
  display: grid;
}

.day-strip-wrapper::before,
.day-strip-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
}

.day-strip-wrapper::before {
  right: 0;
  background: linear-gradient(to left, var(--clr-bg-base), transparent);
}

.day-strip-wrapper::after {
  left: 0;
  background: linear-gradient(to right, var(--clr-bg-base), transparent);
}

.day-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-3) var(--space-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
  direction: ltr;
  flex-direction: row-reverse;
  /* keep scroll natural */
}

.day-strip::-webkit-scrollbar {
  display: none;
}

.day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  min-width: 52px;
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.day-chip:hover {
  background: rgba(81, 69, 220, 0.08);
  color: var(--clr-text);
}

.day-chip.today {
  background: rgba(81, 69, 220, 0.08);
  box-shadow: inset 0 0 0 1px rgba(81, 69, 220, 0.25);
}

.day-chip.selected {
  background: var(--clr-primary);
  color: white;
  box-shadow: 0 4px 14px rgba(81, 69, 220, 0.4);
  transform: translateY(-1px);
}

.day-chip-weekday {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.day-chip-num {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.day-chip-month {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.7;
}

/* ── Smart Daily Assistant ── */
.daily-assistant-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: var(--space-2) 0 var(--space-5);
  border: 1px solid rgba(81, 69, 220, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(81, 69, 220, 0.06), rgba(15, 23, 36, 0.95));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

html.light .daily-assistant-card {
  background:
    linear-gradient(135deg, rgba(81, 69, 220, 0.04), rgba(255, 255, 255, 0.95));
  border-color: rgba(81, 69, 220, 0.08);
  box-shadow: 0 14px 36px rgba(81, 69, 220, 0.04);
}

.daily-assistant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.daily-assistant-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Circular Progress Ring */
.assistant-progress-ring-container {
  position: relative;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-ring-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.progress-pct {
  font-size: 14px;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.1;
  font-family: var(--font-numbers);
}

.progress-label {
  font-size: 8px;
  color: var(--clr-text-muted);
  font-weight: 600;
  margin-top: 1px;
}

/* Assistant Title & Center Text */
.daily-assistant-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: right;
}

.daily-assistant-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.assistant-sparkle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
}

.assistant-sub {
  margin: 0;
  font-size: 11px;
  color: var(--clr-text-muted);
}

.assistant-desc {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
}

/* Cute Robot Mascot */
.assistant-robot-container {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.assistant-robot-svg {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.assistant-robot-container:hover .assistant-robot-svg {
  transform: scale(1.06) rotate(2deg);
}

/* Collapse/Expand Toggle Button */
.assistant-collapse-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(81, 69, 220, 0.15) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  padding: 0 !important;
}

.assistant-collapse-btn svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #818cf8;
}

.assistant-collapse-btn:hover {
  background: rgba(81, 69, 220, 0.1) !important;
  color: var(--clr-text) !important;
  border-color: rgba(81, 69, 220, 0.3) !important;
}

/* Transition for Collapsed States */
.daily-assistant-body {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  overflow: hidden;
  max-height: 500px;
  opacity: 1;
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-4);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease, border-color 0.3s ease;
}

html.light .daily-assistant-body {
  border-top-color: rgba(0, 0, 0, 0.05);
}

/* When Collapsed: Hide sections smoothly */
.daily-assistant-card.collapsed .daily-assistant-body {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-color: transparent !important;
  pointer-events: none;
}

.daily-assistant-card.collapsed .assistant-collapse-btn svg {
  transform: rotate(180deg);
}

.daily-assistant-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assistant-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--clr-primary-light);
}

.assistant-task-name {
  color: var(--clr-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.assistant-task-meta {
  gap: 5px;
  color: var(--clr-text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
}

.daily-assistant-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.daily-assistant-actions .btn {
  min-height: 34px;
  justify-content: center;
}

.daily-assistant-stats {
  flex: 0 0 min(390px, 42%);
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: var(--space-2);
}

.assistant-stat {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  background: rgb(26 26 48);
  text-align: center;
  transition: background var(--transition-fast);
}

html.light .assistant-stat {
  background: rgba(248, 250, 252, 0.86);
  border-color: rgba(148, 163, 184, 0.22);
}

.assistant-stat span {
  color: var(--clr-text-muted);
  line-height: 0;
}

.assistant-stat strong {
  max-width: 100%;
  color: var(--clr-text);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.assistant-stat small {
  color: var(--clr-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.assistant-stat.warning strong,
.assistant-stat.warning span {
  color: var(--clr-warning);
}

.daily-assistant-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-4);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease, border-color 0.3s ease;
}

html.light .daily-assistant-insights {
  border-top-color: rgba(0, 0, 0, 0.05);
}

.daily-assistant-card.collapsed .daily-assistant-insights {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-color: transparent !important;
  pointer-events: none;
}

.assistant-insight {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.16);
  color: var(--clr-text-muted);
  font-size: 12px;
  line-height: 1.7;
}

html.light .assistant-insight {
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.assistant-insight svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--clr-primary-light);
}

@media (max-width: 900px) {
  .daily-assistant-body {
    flex-direction: column;
  }

  .daily-assistant-stats {
    flex-basis: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-assistant-insights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .daily-assistant-card {
    padding: var(--space-3);
    border-radius: 18px;
  }

  .daily-assistant-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .daily-assistant-title h3 {
    font-size: 13px;
  }

  .assistant-sub,
  .assistant-desc {
    font-size: 10px;
  }

  .assistant-progress-ring-container {
    width: 56px;
    height: 56px;
  }

  .progress-ring-svg {
    width: 56px;
    height: 56px;
  }

  .progress-pct {
    font-size: 12px;
  }

  .progress-label {
    font-size: 7px;
  }

  .assistant-robot-container {
    width: 50px;
    height: 50px;
  }

  .assistant-robot-svg {
    width: 50px;
    height: 50px;
  }

  .assistant-task-name {
    font-size: 15px;
  }

  .daily-assistant-actions .btn {
    flex: 1 1 120px;
  }
}

/* ── Task Filter Row (search + selects) ── */
/* ── Task Filter Group (Segmented Pill Tabs) ── */
.filter-group-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  width: 100%;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filter-group-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-muted);
  min-width: 60px;
  display: inline-flex;
  align-items: center;
}

.filter-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  border-radius: 30px;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

html.light .filter-tabs {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 8px 24px rgba(81, 69, 220, 0.04);
}

.filter-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-text-muted);
  font-family: var(--font-arabic);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.light .filter-tab-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  color: #4b5563;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

.filter-tab-btn:hover {
  color: var(--clr-text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

html.light .filter-tab-btn:hover {
  background: #f9fafb;
  border-color: rgba(0, 0, 0, 0.12);
  color: #111827;
}

.filter-tab-btn.active {
  background: var(--clr-primary-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(81, 69, 220, 0.45);
}

/* Specific Inactive Icon Colors from mockup */
.filter-tab-btn svg {
  transition: color var(--transition-fast), stroke var(--transition-fast);
}

.filter-tab-btn[data-value="done"] svg {
  color: #6366f1;
}

.filter-tab-btn[data-value="inprogress"] svg {
  color: #64748b;
}

.filter-tab-btn[data-value="pending"] svg {
  color: #64748b;
}

.filter-tab-btn[data-value="low"] svg {
  color: #10b981;
}

.filter-tab-btn[data-value="med"] svg {
  color: #f59e0b;
}

.filter-tab-btn[data-value="high"] svg {
  color: #ef4444;
}

/* Force white icons on active */
.filter-tab-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Day context label (shown when NOT in show-all mode) */
.day-context-bar {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin-bottom: 0;
  padding: 15px 25px 15px 38px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.light .day-context-bar {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 8px 24px rgba(81, 69, 220, 0.04);
}

.day-context-bar strong {
  color: var(--clr-primary);
  font-weight: 700;
}

html:not(.light) .day-context-bar strong {
  color: var(--clr-primary-light);
}

@media (max-width: 900px) {
  .filter-group-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1.5);
  }

  .filter-group-label {
    min-width: unset;
  }

  .filter-tabs {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-xl);
    padding: 5px;
  }

  .filter-tab-btn {
    flex: 1 1 auto;
    justify-content: center;
    font-size: 11px;
    padding: 8px 10px;
    border-radius: var(--radius-xl);
  }
}


/* ═══════════════════════════════════════
   Quick Notes — FAB + Drawer
═══════════════════════════════════════ */

/* Floating Add Task FAB (Hidden on desktop) */
@media (min-width: 901px) {
  #add-task-fab {
    display: none !important;
  }
}

/* FAB Button */
#qn-fab {
  width: 50px;
  height: 50px;
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #5145dc, #4338ca);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(67, 56, 202, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-fast);
  writing-mode: vertical-lr;
}

#qn-fab:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 32px rgba(67, 56, 202, 0.55);
}

#qn-fab.active {
  background: linear-gradient(135deg, #4338ca, #312e81);
  box-shadow: 0 10px 32px rgba(67, 56, 202, 0.6);
}

#qn-fab svg {
  writing-mode: horizontal-tb;
}

.qn-fab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 4px;
  opacity: 0.9;
}

/* Backdrop */
#qn-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1010;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#qn-backdrop.visible {
  opacity: 1;
  pointer-events: all;
}

/* Drawer */
#qn-drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  z-index: 1020;
  background: var(--clr-surface-2);
  border-right: var(--border-card);
  border-left: none;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.4);
}

#qn-drawer.open {
  transform: translateX(0);
}

/* Drawer Header */
.qn-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: none;
  flex-shrink: 0;
}

.qn-drawer-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--clr-text);
}

.qn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--clr-primary);
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.qn-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.qn-close-btn:hover {
  color: var(--clr-text);
  background: rgba(255, 255, 255, 0.05);
}

html.light .qn-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Input Area */
.qn-input-area {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-card);
  flex-shrink: 0;
}

#qn-textarea {
  width: 100%;
  resize: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  color: var(--clr-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

#qn-textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(81, 69, 220, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

html.light #qn-textarea {
  background: #ffffff;
  border-color: var(--control-border);
}

#qn-textarea::placeholder {
  color: var(--clr-text-dim);
}

.qn-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.qn-char-count {
  font-size: 11px;
  color: var(--clr-text-dim);
}

.qn-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 18px;
  background: var(--clr-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.qn-save-btn:hover {
  background: var(--clr-primary-hover, #4338ca);
  transform: translateY(-1px);
}

/* Notes List */
.qn-notes-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.qn-notes-list::-webkit-scrollbar {
  width: 4px;
}

.qn-notes-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.qn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--clr-text-muted);
}

.qn-empty svg {
  opacity: 0.3;
}

.qn-empty p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.qn-empty span {
  font-size: 12px;
  opacity: 0.7;
}

/* Note Card */
.qn-note-swipe {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.qn-note-card {
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  transition: all var(--transition-fast);
  animation: slideInLeft 0.25s ease;
}

.qn-note-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.qn-note-card.pinned {
  background: rgba(81, 69, 220, 0.04);
  box-shadow: 0 0 0 1px rgba(81, 69, 220, 0.25);
}

.qn-pin-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--clr-primary);
}

.qn-note-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--clr-text);
  margin: 0 0 var(--space-3);
  word-break: break-word;
  white-space: pre-wrap;
}

.qn-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.qn-note-time {
  font-size: 10px;
  color: var(--clr-text-dim);
}

.qn-note-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qn-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.qn-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-text);
  transform: translateY(-1px);
}

.qn-icon-btn:active {
  transform: scale(0.92);
}

.qn-icon-btn.active {
  background: rgba(81, 69, 220, 0.15);
  color: var(--clr-primary);
}

.qn-icon-btn.copy:hover {
  background: rgba(129, 140, 248, 0.12);
  color: #818cf8;
}

.qn-icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fb7185;
}

/* Light mode styles */
html.light .qn-icon-btn {
  background: rgba(0, 0, 0, 0.03);
  color: #4b5563;
}

html.light .qn-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111827;
}

html.light .qn-icon-btn.active {
  background: rgba(81, 69, 220, 0.1);
  color: var(--clr-primary);
}

html.light .qn-icon-btn.copy:hover {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

html.light .qn-icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Mobile: FAB becomes bottom-right floating button */
@media (max-width: 900px) {
  #qn-fab {
    right: auto;
    left: 16px;
    bottom: 15%;
    top: auto;
    transform: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #qn-fab:hover {
    transform: scale(1.04);
  }

  /* Floating Add Task FAB on Mobile */
  #add-task-fab {
    position: fixed;
    left: 16px;
    right: auto;
    bottom: calc(15% + 60px);
    /* Positioned exactly above the Notes FAB */
    top: auto;
    transform: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 900;
    display: none;
    /* Controlled dynamically by JS route checks */
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
  }

  #add-task-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.55);
  }

  /* Hide the original task button at the top header on mobile */
  #add-task-btn {
    display: none !important;
  }

  .qn-fab-label {
    writing-mode: horizontal-tb;
    margin-top: 0;
  }

  #qn-drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 75vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
    background: var(--clr-surface-2) !important;
    border: var(--border-card) !important;
    border-bottom: none !important;
    z-index: 1101 !important;
  }

  #qn-drawer.open {
    transform: translateY(0);
  }

  #qn-backdrop {
    z-index: 1100 !important;
  }

  .qn-drawer-header {
    padding: var(--space-4) var(--space-5) var(--space-2) !important;
  }

  .qn-input-area {
    padding: var(--space-4) var(--space-5) !important;
  }

  #qn-drawer::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-full) !important;
    margin: 10px auto 0 !important;
    flex-shrink: 0 !important;
  }

  html.light #qn-drawer::before {
    background: rgba(0, 0, 0, 0.12) !important;
  }
}

/* ═══════════════════════════════════════
   Debt Book Styles
 ═══════════════════════════════════════ */

.debt-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.debt-summary-card {
  padding: var(--space-5);
}

.debt-summary-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-2);
}

.debt-summary-amount {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.debt-card-amount {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.debt-summary-sub {
  font-size: 11px;
  color: var(--clr-text-muted);
}

/* Debt Tabs */
.debt-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.debt-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.debt-tab:hover {
  color: var(--clr-text);
  background: rgba(255, 255, 255, 0.08);
}

.debt-tab.active {
  background: var(--clr-primary);
  color: white;
}

.debt-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Debt Avatar */
.debt-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Settled card style */
.debt-card.settled {
  opacity: 0.6;
}

.debt-card.settled .debt-avatar {
  filter: grayscale(0.7);
}

/* Responsive: Debt */
@media (max-width: 640px) {
  .debt-summary-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .debt-tabs {
    gap: var(--space-1);
  }

  .debt-tab {
    font-size: 12px;
    padding: var(--space-2) var(--space-3);
  }
}

/* Grouped Debt Styles */
.debt-person-group {
  margin-bottom: var(--space-3);
  padding: 0 !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.debt-person-group:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.debt-person-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  cursor: pointer;
  user-select: none;
}

.debt-person-info {
  flex: 1;
  min-width: 0;
}

.debt-person-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
}

.debt-person-name {
  font-weight: 700;
  font-size: 15px;
}

.debt-person-count {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-text-muted);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.debt-person-breakdown {
  font-size: 11px;
  color: var(--clr-text-dim);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.debt-person-total {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: right;
}

.debt-person-total-amount {
  font-size: 18px;
  font-weight: 900;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.debt-person-expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
}

.debt-person-group.expanded .debt-person-expand-icon {
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-text);
}

/* Expandable Details Container */
.debt-person-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.debt-person-details.open {
  grid-template-rows: 1fr;
}

.debt-person-details-inner {
  overflow: hidden;
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.debt-person-details.open .debt-person-details-inner {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}

/* Sub-card styled debt records inside group */
.debt-sub-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.debt-sub-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.debt-sub-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.debt-sub-card-info {
  flex: 1;
  min-width: 0;
}

.debt-sub-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.debt-sub-card-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text);
  margin-bottom: 4px;
}

.debt-sub-card-meta {
  font-size: 11px;
  color: var(--clr-text-dim);
}

.debt-sub-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.debt-sub-card-amount {
  font-size: 16px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.debt-sub-card-amount span {
  font-size: 11px;
  font-weight: 400;
}

.debt-sub-card-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Quick Add Button inside expanded section */
.debt-quick-add-btn {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--clr-primary-light);
  width: 100%;
  padding: var(--space-3);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.debt-quick-add-btn:hover {
  background: rgba(var(--clr-primary-rgb), 0.05);
  border-color: var(--clr-primary-light);
  color: var(--clr-primary-light);
}

/* Settled state inside group */
.debt-person-group.settled {
  opacity: 0.7;
}

.debt-sub-card.settled {
  opacity: 0.6;
  background: rgba(255, 255, 255, 0.01);
}

@media (max-width: 640px) {
  .debt-person-header {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .debt-person-total {
    width: 100%;
    justify-content: space-between;
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    margin-top: var(--space-1);
    text-align: left;
  }

  .debt-sub-card-main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .debt-sub-card-right {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: var(--space-2);
  }
}

/* ═══════════════════════════════════════
   Single-Box Task List
═══════════════════════════════════════ */

.task-list-box {
  padding: 0;
  overflow: hidden;
}

/* Group header */
.task-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.task-group-count {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--clr-text-muted);
}

.task-group-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 0;
}

.task-list-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* Individual task row */
.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transition: background var(--transition-fast);
  position: relative;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.task-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.task-row:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(81, 69, 220, 0.22);
}

.task-row.done {
  opacity: 0.55;
}

.task-row-body {
  flex: 1;
  min-width: 0;
}

.task-row-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-row-title.done {
  text-decoration: line-through;
  color: var(--clr-text-muted);
}

.task-description-btn {
  color: var(--clr-primary);
  background: var(--clr-primary-subtle);
}

.task-description-btn:hover {
  color: var(--clr-primary);
  background: rgba(81, 69, 220, 0.14);
}

.task-rollover-btn {
  color: var(--clr-warning);
  background: rgba(245, 158, 11, 0.12);
}

.task-rollover-btn:hover {
  color: var(--clr-warning);
  background: rgba(245, 158, 11, 0.18);
}

.task-description-modal-title {
  max-width: 360px;
  margin-top: 4px;
  color: var(--clr-text-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.task-description-content {
  color: var(--clr-text);
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(148, 163, 184, 0.08);
}

.task-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.task-priority-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .task-list-rows {
    padding: var(--space-3);
  }

  .task-row {
    padding: var(--space-3) var(--space-4);
  }

  .task-row-title {
    font-size: 13px;
  }
}

/* Drag and Drop visual feedback */
.task-row.dragging {
  opacity: 0.4;
  background: rgba(81, 69, 220, 0.15) !important;
  box-shadow: inset 0 0 0 2px rgba(81, 69, 220, 0.2);
}

.task-row {
  cursor: grab;
}

.task-row:active {
  cursor: grabbing;
}

/* Floating Task Timer FAB */
#task-timer-fab {
  width: 50px;
  height: 50px;
  position: fixed;
  left: 18px;
  top: calc(50% + 60px);
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-fast);
  writing-mode: vertical-lr;
}

#task-timer-fab:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 32px rgba(16, 185, 129, 0.55);
}

#task-timer-fab.active {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 10px 32px rgba(16, 185, 129, 0.6);
}

#task-timer-fab svg {
  writing-mode: horizontal-tb;
}

.task-timer-fab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Floating Task Timer Card -> Full-screen Timer View */
.task-timer-card {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  padding: var(--space-8);
  background: rgba(10, 10, 20, 0.95);
  border: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  animation: fadeIn 0.3s ease;
}

/* Minimized State (Floating Card) */
.task-timer-card.minimized {
  display: none !important;
  /* Hide when minimized, rely on FAB to restore */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.task-timer-card-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-6) var(--space-8);
  width: 100%;
}

.task-timer-header-text {
  text-align: right;
  flex: 1;
}

.task-timer-title {
  font-weight: 800;
  font-size: 24px;
  color: var(--clr-text);
  white-space: normal;
  line-height: 1.3;
}

.task-timer-subtitle {
  font-size: 14px;
  color: var(--clr-text-muted);
  display: block;
  margin-top: var(--space-2);
}

.task-timer-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 400px;
}

.task-timer-ring-container {
  position: relative;
  width: 250px;
  height: 250px;
  flex-shrink: 0;
}

.task-timer-ring-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.task-timer-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 6;
}

.task-timer-ring-progress {
  fill: none;
  stroke: #10b981;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}

.task-timer-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.task-timer-details {
  width: 100%;
  display: flex;
  justify-content: center;
}

.task-timer-controls {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.task-timer-controls .btn-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.task-timer-controls .btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Disabled tasks state */
.task-row.task-disabled {
  opacity: 0.4;
  pointer-events: auto;
  cursor: not-allowed;
}

.task-row.task-disabled .task-complete-btn {
  opacity: 0.2;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  #task-timer-fab {
    bottom: 80px;
    top: auto;
    left: auto;
    right: 16px;
    transform: none;
    writing-mode: horizontal-tb;
    flex-direction: row;
    padding: 12px 16px;
    border-radius: 50px;
    gap: var(--space-2);
  }

  #task-timer-fab:hover {
    transform: scale(1.04);
  }

  .task-timer-fab-label {
    writing-mode: horizontal-tb;
    margin-top: 0;
  }
}

/* ─── Language and Theme Toggle Buttons ─── */
#lang-btn svg,
#theme-btn svg {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

#lang-btn:hover svg {
  transform: rotate(360deg);
  color: var(--clr-primary);
}

#theme-btn:hover svg {
  transform: scale(1.15) rotate(15deg);
  color: var(--clr-primary);
}

/* Sun icon styling in light mode */
html.light #theme-btn svg {
  color: #eab308;
  /* warm yellow */
}

html.light #theme-btn:hover svg {
  transform: scale(1.15) rotate(45deg);
}

/* LTR Specific layout tweaks */
html.ltr .logo-text {
  text-align: left;
}

html.ltr .user-info {
  text-align: left;
}

html.ltr .task-timer-details {
  text-align: left;
}

html.ltr .task-timer-controls {
  justify-content: flex-start;
}

html.ltr #task-timer-fab {
  right: auto;
  left: 16px;
}

@media (max-width: 900px) {
  html.ltr #task-timer-fab {
    right: auto;
    left: 16px;
  }
}

/* ═══════════════════════════════════════
   Mobile Bottom Navigation Bar
═══════════════════════════════════════ */

#mobile-bottom-nav {
  display: none;
  /* Hidden on desktop */
}

@media (max-width: 900px) {

  /* Show bottom nav as a floating capsule */
  #mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    z-index: 100;
    height: 64px;
    min-width: 65px;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 8px;
    align-items: center;
    justify-content: space-around;
  }

  /* Bottom Nav Background */
  .mbn-background {
    position: absolute;
    inset: 0;
    background: rgba(13, 14, 26, 0.85);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    z-index: -1;
    pointer-events: none;
    transition: background 0.3s, box-shadow 0.3s;
  }

  html.light .mbn-background {
    background: rgba(248, 249, 252, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  /* Push page content up so it doesn't hide behind the bar */
  #page-content {
    padding-bottom: calc(var(--space-8) + 88px);
  }

  /* Adjust FABs position to stay above the bottom nav */
  #task-timer-fab {
    bottom: 96px !important;
  }

  /* Each tab item */
  .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.25s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .mbn-item:active {
    transform: scale(0.9);
  }

  .mbn-item.active {
    color: var(--clr-primary, #5145dc);
  }

  .mbn-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mbn-item.active .mbn-icon {
    transform: translateY(-2px) scale(1.05);
    stroke-width: 2.2;
  }

  .mbn-label {
    display: block !important;
    font-size: 9px;
    font-weight: 700;
    margin-top: 3px;
    white-space: nowrap;
    text-align: center;
    opacity: 0.85;
  }

  /* Light theme adjustments */
  html.light #mobile-bottom-nav {
    background: transparent !important;
    border-top: none;
    box-shadow: none !important;
  }

  html.light .mbn-item {
    color: rgba(0, 0, 0, 0.35);
  }

  html.light .mbn-item.active {
    color: var(--clr-primary, #4338ca);
  }

  /* Hide page-header-text on mobile screens */
  .page-header-text {
    display: none !important;
  }

  /* Reduce bottom margin of page-header when page-header-text is hidden */
  .page-header {
    margin-bottom: var(--space-4) !important;
  }

  /* Hide the page-header entirely if it contains no visible elements other than the hidden page-header-text */
  .page-header:not(:has(> :not(.page-header-text))) {
    display: none !important;
  }

  /* Hide floating task-timer FAB and other floating buttons on mobile since they are now in the bottom nav "+" menu */
  #task-timer-fab,
  #add-task-fab,
  #qn-fab {
    display: none !important;
  }

  /* Hide sidebar items that are present in the mobile bottom nav */
  #sidebar .nav-item[data-route="tasks"],
  #sidebar .nav-item[data-route="worship"],
  #sidebar .nav-item[data-route="habits"],
  #sidebar .nav-item[data-route="stats"] {
    display: none !important;
  }

  /* Hide empty section labels in the sidebar on mobile */
  #sidebar .nav-section-label:nth-of-type(3),
  #sidebar .nav-section-label:nth-of-type(4) {
    display: none !important;
  }

  /* Elevated Central Plus Button Styles */
  .mbn-center-item {
    position: relative;
    overflow: visible !important;
    flex: 0 0 64px !important;
    height: 100%;
  }

  .mbn-center-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 16px var(--clr-primary-glow);
    z-index: 2;
    border: none;
  }

  .mbn-center-circle svg {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    fill: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mbn-center-item.active .mbn-center-circle {
    background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-primary));
    box-shadow: 0 8px 24px var(--clr-primary-glow);
    transform: translateX(-50%) scale(1.05);
    animation: mbnCenterPulse 2s infinite alternate;
  }

  .mbn-center-item.active .mbn-center-circle svg {
    transform: rotate(135deg) !important;
  }

  /* Breathing pulse glow keyframes for dark mode */
  @keyframes mbnCenterPulse {
    0% {
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 6px 18px var(--clr-primary-glow);
    }

    100% {
      transform: translateX(-50%) scale(1.12);
      box-shadow: 0 10px 26px rgba(81, 69, 220, 0.6);
    }
  }

  /* Light theme adjustments for the central circle */
  html.light #mobile-bottom-nav .mbn-center-circle {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    box-shadow: 0 6px 16px var(--clr-primary-glow);
  }

  html.light #mobile-bottom-nav .mbn-center-item.active .mbn-center-circle {
    background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-primary));
    box-shadow: 0 8px 24px var(--clr-primary-glow);
    animation: mbnCenterPulseLight 2s infinite alternate;
  }

  /* Breathing pulse glow keyframes for light mode */
  @keyframes mbnCenterPulseLight {
    0% {
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 6px 18px var(--clr-primary-glow);
    }

    100% {
      transform: translateX(-50%) scale(1.12);
      box-shadow: 0 10px 26px rgba(67, 56, 202, 0.5);
    }
  }

  /* Mobile Bottom Nav Popup Menu & Overlay */
  .mbn-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 9, 16, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .mbn-popup-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .mbn-popup-menu {
    position: fixed;
    bottom: calc(64px + 16px + 12px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.95);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @media (min-width: 901px) {

    .mbn-popup-overlay,
    .mbn-popup-menu {
      display: none !important;
    }

  }

  .mbn-popup-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  .mbn-popup-items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }

  html.ltr .mbn-popup-items {
    align-items: flex-start;
  }

  .mbn-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mbn-popup-menu.open .mbn-popup-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Transition delays for staggered pop-up animation (from bottom to top) */
  .mbn-popup-menu.open .mbn-popup-item:nth-child(4) {
    transition-delay: 0.05s;
  }

  .mbn-popup-menu.open .mbn-popup-item:nth-child(3) {
    transition-delay: 0.12s;
  }

  .mbn-popup-menu.open .mbn-popup-item:nth-child(2) {
    transition-delay: 0.19s;
  }

  .mbn-popup-menu.open .mbn-popup-item:nth-child(1) {
    transition-delay: 0.26s;
  }

  .mbn-popup-label {
    background: rgba(26, 27, 38, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--clr-text, #ffffff);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .mbn-popup-item:hover .mbn-popup-label {
    background: rgba(26, 27, 38, 0.95);
    transform: scale(1.02);
  }

  .mbn-popup-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 18px;
  }

  .mbn-popup-item:hover .mbn-popup-icon-wrap {
    transform: scale(1.08);
  }

  /* Gradient colors matching the options */
  .mbn-popup-icon-wrap.notes-icon-bg {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    box-shadow: 0 4px 14px var(--clr-primary-glow);
  }

  .mbn-popup-icon-wrap.start-task-icon-bg {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  }

  .mbn-popup-icon-wrap.voice-icon-bg {
    background: linear-gradient(135deg, #818cf8, #5145dc);
    box-shadow: 0 4px 14px rgba(81, 69, 220, 0.3);
  }

  .mbn-popup-icon-wrap.new-task-icon-bg {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  }

  /* Light theme popup adjustments */
  html.light .mbn-popup-label {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  html.light .mbn-popup-overlay {
    background: rgba(240, 242, 245, 0.6);
  }
}

/* ─── Calendar View Styles ─── */
.calendar-day-cell:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: translateY(-1px);
}

.calendar-day-cell.today {
  background: rgba(81, 69, 220, 0.04) !important;
}

.calendar-day-cell.other-month {
  opacity: 0.35;
}

.calendar-task-tag {
  transition: transform var(--transition-fast);
}

.calendar-task-tag:hover {
  transform: translateX(-2px);
  filter: brightness(1.15);
}

html.ltr .calendar-task-tag:hover {
  transform: translateX(2px);
}

.calendar-day-name {
  display: none;
}

.calendar-shell-card,
.calendar-selected-card {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.calendar-header-grid,
.calendar-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.calendar-header-grid>div,
.calendar-day-cell,
.calendar-day-head,
.calendar-tasks-container,
.calendar-selected-header,
.calendar-selected-title,
.calendar-selected-task-item {
  min-width: 0;
  box-sizing: border-box;
}

.calendar-day-number {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-month-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78em;
  opacity: 0.75;
}

.calendar-selected-actions {
  flex-shrink: 0;
}

@media (max-width: 900px) {

  /* Keep the header grid visible with short letters */
  .calendar-header-grid {
    display: grid !important;
    font-size: 11px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px;
  }

  .calendar-header-grid .day-full {
    display: none !important;
  }

  .calendar-header-grid .day-short {
    display: inline !important;
  }

  /* Make grid 7 columns on all screens */
  .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .calendar-shell-card {
    padding: var(--space-3) !important;
  }

  /* Compact cells on mobile */
  .calendar-day-cell {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    padding: 6px 4px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
  }

  /* Align cell text/number center */
  .calendar-day-cell .calendar-day-head {
    justify-content: center !important;
    width: 100%;
    min-width: 0;
  }

  .calendar-day-number {
    font-size: 12px;
    max-width: 100%;
  }

  .calendar-month-label {
    display: none;
  }

  /* Hide weekday names inside cells since header grid is now visible */
  .calendar-day-cell .calendar-day-name {
    display: none !important;
  }

  /* Hide task titles, show dots */
  .calendar-tasks-container {
    display: none !important;
  }

  .calendar-dots-container {
    display: flex !important;
    max-width: 100%;
    overflow: hidden;
  }

  .calendar-dot {
    flex: 0 0 auto;
  }

  /* Selected day styling */
  .calendar-day-cell.active-day {
    background: rgba(81, 69, 220, 0.15) !important;
    box-shadow: inset 0 0 0 2px var(--clr-primary) !important;
  }

  /* Mobile selected day tasks container */
  #calendar-selected-tasks-container {
    display: block !important;
  }

  /* Calendar Top Bar Controls Responsiveness */
  .calendar-controls-container {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: var(--space-3) !important;
  }

  .calendar-controls-container .btn-group {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
  }

  .calendar-controls-container .btn-group .btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .calendar-nav-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: var(--space-3) !important;
  }

  .calendar-nav-group>div {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  .calendar-nav-group #cal-month-display {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .calendar-nav-group #cal-today {
    padding: 8px 16px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  .calendar-selected-card {
    padding: var(--space-4) !important;
  }

  .calendar-selected-header {
    align-items: stretch !important;
  }

  .calendar-selected-title {
    width: 100%;
    flex-basis: 100%;
  }

  .calendar-selected-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  .calendar-selected-actions .btn {
    width: 100%;
    justify-content: center;
    min-width: 0;
  }

  /* Annual Plan List Mobile styling */
  .ap-list-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
  }

  .ap-list-header button {
    width: 100% !important;
    justify-content: center !important;
  }

  .ap-plans-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  /* Annual Plan Workspace Action Buttons Mobile */
  .ap-workspace-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .ap-workspace-actions>div {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .ap-workspace-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Annual Plan Title Card */
  .ap-workspace-card>div {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ap-workspace-card .ap-title-wrap {
    flex-wrap: wrap !important;
  }

  .ap-workspace-card .ap-progress-info {
    text-align: start !important;
    margin-top: 12px !important;
  }

  /* Tabs */
  .ap-tabs-bar {
    display: flex !important;
    width: 100% !important;
  }

  .ap-tabs-bar button {
    flex: 1 !important;
    justify-content: center !important;
    padding: 10px !important;
    font-size: 13px !important;
  }

  /* Tab Title Bar */
  .ap-tab-title-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
  }

  .ap-tab-title-bar button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Pillars Grid */
  .ap-pillars-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  /* Board Grid on mobile */
  .ap-board-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .ap-board-col {
    min-height: auto !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .calendar-shell-card {
    padding: 10px !important;
  }

  .calendar-header-grid,
  .calendar-grid {
    gap: 2px !important;
  }

  .calendar-day-cell {
    min-height: 48px !important;
    padding: 5px 2px !important;
    border-radius: 10px !important;
  }

  .calendar-day-number {
    font-size: 11px;
  }

  .calendar-nav-group {
    gap: 8px !important;
  }

  .calendar-nav-group #cal-month-display {
    font-size: 12px !important;
  }

  .calendar-nav-group #cal-today {
    padding-inline: 10px !important;
  }

  .calendar-selected-card {
    padding: var(--space-3) !important;
  }
}

/* Day full/short toggle on desktop vs mobile */
.calendar-header-grid .day-short {
  display: none;
}

.calendar-header-grid .day-full {
  display: inline;
}

#calendar-selected-tasks-container {
  display: block;
  /* visible on both mobile and desktop so desktop users can see selected day's tasks/timeline view */
}

/* Meetings View Styles */
.meetings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.meetings-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.copy-link-widget {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.copy-link-text {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  color: var(--clr-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#meet-container {
  width: 100%;
  height: 600px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-4);
  transition: all var(--transition-normal);
}

@media (max-width: 768px) {
  #meet-container {
    height: 450px;
  }
}

@media (max-width: 480px) {
  #meet-container {
    height: 350px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SAAS — Admin Panel, Subscription, Payment Components
   ═══════════════════════════════════════════════════════════ */

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color, #5145dc), #818cf8, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Loading spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(81, 69, 220, 0.2);
  border-top-color: var(--primary-color, #5145dc);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Admin Stats Grid ─────────────────────────────────────── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.admin-stat-card {
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.admin-stat-card:hover {
  transform: translateY(-3px);
}

.admin-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-gradient, linear-gradient(90deg, #5145dc, #818cf8));
}

.asc-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.asc-val {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}

.asc-lbl {
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
}

/* ── Admin Tables ────────────────────────────────────────── */
.admin-table-wrap {
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border-radius: 16px;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-table th {
  padding: 14px 18px;
  text-align: right;
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.admin-table .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Role Badges */
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 700;
}

.role-user_free {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}

.role-user_pro {
  background: rgba(81, 69, 220, 0.2);
  color: #5145dc;
}

.role-staff {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

.role-admin {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 700;
}

.status-active {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.status-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.status-expired {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}

.status-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ── Permissions Table ─────────────────────────────────── */
.perms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.perms-table th,
.perms-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.perms-table th {
  color: var(--text-secondary, #94a3b8);
  font-weight: 700;
  font-size: 0.78rem;
}

.perms-table td:first-child {
  text-align: right;
  font-weight: 600;
}

.perm-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.3);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  display: inline-block;
}

.perm-toggle.on {
  background: var(--primary-color, #5145dc);
}

.perm-toggle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: left 0.3s;
}

.perm-toggle.on::after {
  left: 19px;
}

/* ── Subscribe Page ─────────────────────────────────────── */
.subscribe-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.subscribe-header {
  text-align: center;
  margin-bottom: 40px;
}

/* Billing toggle */
.billing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.billing-label {
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
}

.billing-label.active {
  color: var(--text-primary, #f1f5f9);
}

.billing-switch {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: var(--primary-color, #5145dc);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}

.billing-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 4px;
  left: 4px;
  transition: left 0.3s;
}

.billing-switch.yearly::after {
  left: calc(100% - 22px);
}

.save-pill {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Plan cards */
.sub-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.sub-plan-card {
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: all 0.3s;
}

.sub-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.sub-plan-name {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.sub-plan-price {
  margin-bottom: 20px;
}

.sub-plan-amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--primary-color, #5145dc);
}

.sub-plan-period {
  color: var(--text-secondary, #94a3b8);
  font-size: 0.85rem;
}

.btn-select-plan,
.btn-select-featured,
.btn-select-ghost {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-family: var(--font-arabic);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.25s;
}

.btn-select-featured {
  background: linear-gradient(135deg, #5145dc, #818cf8);
  color: #fff;
  box-shadow: 0 4px 16px rgba(81, 69, 220, 0.35);
}

.btn-select-featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(81, 69, 220, 0.45);
}

.btn-select-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #f1f5f9);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-select-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Payment card */
.payment-card {
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border-radius: 16px;
  padding: 32px;
}

.payment-methods {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.payment-method-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-family: var(--font-arabic);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  transition: all 0.2s;
}

.payment-method-btn.active {
  background: rgba(81, 69, 220, 0.15);
  border-color: var(--primary-color, #5145dc);
  color: var(--text-primary, #f1f5f9);
}

/* Bank info card */
.bank-info-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
}

.bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
}

.bank-row:last-child {
  border-bottom: none;
}

.bank-row span {
  color: var(--text-secondary, #94a3b8);
}

/* Admin search / filter bar */
.admin-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary, #f1f5f9);
  font-family: var(--font-arabic);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.admin-search:focus {
  border-color: var(--primary-color, #5145dc);
}

.admin-search::placeholder {
  color: var(--text-secondary, #94a3b8);
}

.admin-filter-select {
  padding: 10px 16px;
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary, #f1f5f9);
  font-family: var(--font-arabic);
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
}

/* Pagination */
.admin-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
}

.page-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  font-family: var(--font-arabic);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.page-btn.active,
.page-btn:hover {
  background: var(--primary-color, #5145dc);
  color: #fff;
  border-color: transparent;
}

/* Admin action buttons */
.btn-action {
  padding: 5px 12px;
  border-radius: 8px;
  font-family: var(--font-arabic);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-action-primary {
  background: rgba(81, 69, 220, 0.15);
  color: #5145dc;
}

.btn-action-primary:hover {
  background: rgba(81, 69, 220, 0.3);
}

.btn-action-success {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.btn-action-success:hover {
  background: rgba(52, 211, 153, 0.3);
}

.btn-action-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.btn-action-danger:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* Chart wrapper */
.admin-chart-wrap {
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.admin-chart-title {
  font-weight: 700;
  margin-bottom: 16px;
}

/* Mini chart bars */
.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
}

.mini-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #5145dc, rgba(81, 69, 220, 0.3));
  min-height: 4px;
  transition: height 0.5s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 12px;
  }

  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sub-plans-grid {
    grid-template-columns: 1fr;
  }

  .payment-methods {
    flex-direction: column;
  }

  .payment-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .payment-card {
    padding: 16px 12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rakez-page-enter {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.992);
      filter: saturate(0.96);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: saturate(1);
    }
  }

  @keyframes rakez-soft-pop {
    0% {
      transform: scale(0.985);
    }

    70% {
      transform: scale(1.018);
    }

    100% {
      transform: scale(1);
    }
  }

  #page-content>*:not(.modal-backdrop) {
    animation: rakez-page-enter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .btn,
  button,
  .nav-item,
  .mbn-item,
  .filter-tab-btn,
  .day-chip,
  .glass-card,
  .task-card,
  .worship-card,
  .prayer-card,
  .habit-card,
  .payment-card,
  .admin-stat-card,
  .admin-chart-wrap,
  .qn-note-card {
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.22s ease,
      border-color 0.22s ease,
      opacity 0.22s ease;
  }

  .btn:active,
  button:active,
  .nav-item:active,
  .mbn-item:active,
  .filter-tab-btn:active,
  .day-chip:active {
    transform: scale(0.96);
  }

  .glass-card:hover,
  .task-card:hover,
  .worship-card:hover,
  .prayer-card:hover,
  .habit-card:hover,
  .payment-card:hover,
  .admin-stat-card:hover,
  .qn-note-card:hover {
    transform: translateY(-1px);
  }

  .modal-backdrop.open .modal,
  .notification-onboarding-card,
  .daily-welcome-card,
  .adhan-player-card {
    animation: rakez-soft-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

.tasks-mobile-greeting {
  display: none;
}


@media (max-width: 900px) {
  .tasks-header-actions {
    width: 100%;
    justify-content: space-between;
    gap: 10px !important;
  }

  .tasks-mobile-greeting {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
  }

  .tasks-mobile-greeting strong {
    color: var(--clr-text);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tasks-mobile-greeting span {
    color: var(--clr-text-muted);
    font-size: 11px;
    white-space: normal;
  }

  #share-today-tasks-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 12px;
  }
}

/* ========================================
   Voice Command Component & Animations
   ======================================== */

.voice-assistant-widget {
  position: fixed;
  left: 28px;
  right: auto;
  bottom: 102px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}

html.ltr .voice-assistant-widget {
  left: auto;
  right: 28px;
  align-items: flex-end;
}

.voice-assistant-bubble {
  max-width: min(280px, calc(100vw - 42px));
  padding: 10px 13px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.26);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

html.light .voice-assistant-bubble {
  background: rgba(255, 255, 255, 0.93);
  color: #111827;
  border-color: rgba(81, 69, 220, 0.14);
  box-shadow: 0 18px 36px rgba(60, 72, 88, 0.16);
}

.voice-assistant-widget:hover .voice-assistant-bubble,
.voice-assistant-widget[data-state="wake"] .voice-assistant-bubble,
.voice-assistant-widget[data-state="listening"] .voice-assistant-bubble,
.voice-assistant-widget[data-state="processing"] .voice-assistant-bubble,
.voice-assistant-widget[data-state="success"] .voice-assistant-bubble,
.voice-assistant-widget[data-state="error"] .voice-assistant-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.voice-assistant-bubble strong,
.voice-assistant-bubble span {
  display: block;
  font-family: var(--font-arabic);
}

.voice-assistant-bubble strong {
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 3px;
}

.voice-assistant-bubble span {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.76);
}

html.light .voice-assistant-bubble span {
  color: #6b7280;
}

.voice-assistant-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
}

html.ltr .voice-assistant-controls {
  flex-direction: row-reverse;
}

.voice-wake-toggle {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(81, 69, 220, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #4338ca;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  font-family: var(--font-arabic);
  box-shadow: 0 8px 22px rgba(60, 72, 88, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html:not(.light) .voice-wake-toggle {
  background: rgba(15, 23, 42, 0.82);
  color: #ddd6fe;
  border-color: rgba(129, 140, 248, 0.28);
}

.voice-wake-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(81, 69, 220, 0.22);
}

.voice-wake-toggle.active {
  border-color: rgba(34, 197, 94, 0.38);
  color: #16a34a;
}

.voice-wake-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 0 0 0 rgba(81, 69, 220, 0);
}

.voice-wake-toggle.active .voice-wake-dot {
  background: #22c55e;
  animation: voice-wake-pulse 1.7s ease-in-out infinite;
}

#voice-command-btn.voice-assistant-orb {
  width: 58px;
  height: 58px;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
    conic-gradient(from 215deg, #3b82f6, #8b5cf6, #ec4899, #06b6d4, #3b82f6);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(81, 69, 220, 0.34), 0 8px 18px rgba(15, 23, 42, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  writing-mode: horizontal-tb;
}

#voice-command-btn.voice-assistant-orb::before,
#voice-command-btn.voice-assistant-orb::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(81, 69, 220, 0.28);
  opacity: 0;
  transform: scale(0.84);
  pointer-events: none;
}

#voice-command-btn.voice-assistant-orb::after {
  inset: -14px;
  animation-delay: 0.45s;
}

#voice-command-btn.voice-assistant-orb:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 22px 42px rgba(81, 69, 220, 0.42), 0 10px 22px rgba(15, 23, 42, 0.24);
  filter: saturate(1.08);
}

.voice-assistant-widget[data-state="wake"] #voice-command-btn.voice-assistant-orb::before,
.voice-assistant-widget[data-state="wake"] #voice-command-btn.voice-assistant-orb::after,
.voice-assistant-widget[data-state="listening"] #voice-command-btn.voice-assistant-orb::before,
.voice-assistant-widget[data-state="listening"] #voice-command-btn.voice-assistant-orb::after {
  animation: voice-orb-ring 1.8s ease-out infinite;
}

.voice-assistant-widget[data-state="listening"] #voice-command-btn.voice-assistant-orb,
#voice-command-btn.voice-assistant-orb.listening {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
    conic-gradient(from 215deg, #ef4444, #f97316, #ec4899, #8b5cf6, #ef4444);
}

.voice-assistant-widget[data-state="processing"] #voice-command-btn.voice-assistant-orb {
  animation: voice-orb-spin 1.35s linear infinite;
}

.voice-assistant-widget[data-state="success"] #voice-command-btn.voice-assistant-orb {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
    conic-gradient(from 215deg, #22c55e, #14b8a6, #3b82f6, #22c55e);
}

.voice-assistant-widget[data-state="error"] #voice-command-btn.voice-assistant-orb {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
    conic-gradient(from 215deg, #ef4444, #fb7185, #f97316, #ef4444);
}

.voice-command-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  writing-mode: horizontal-tb;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
}

.voice-command-fab-label {
  display: none;
}

@keyframes voice-wake-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.28);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes voice-orb-ring {
  0% {
    opacity: 0.55;
    transform: scale(0.84);
  }

  100% {
    opacity: 0;
    transform: scale(1.32);
  }
}

@keyframes voice-orb-spin {
  to {
    rotate: 360deg;
  }
}

@media (max-width: 900px) {
  .voice-assistant-widget {
    left: 16px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  html.ltr .voice-assistant-widget {
    left: auto;
    right: 16px;
  }

  .voice-assistant-bubble {
    max-width: min(245px, calc(100vw - 34px));
  }

  #voice-command-btn.voice-assistant-orb {
    width: 56px;
    height: 56px;
  }
}

.voice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.voice-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.voice-card {
  width: 90%;
  max-width: 400px;
  padding: 32px 24px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(135deg, #0f0f1a, #141424);
  border: 1px solid rgba(81, 69, 220, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(81, 69, 220, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voice-overlay.open .voice-card {
  transform: scale(1);
}

.voice-mic-container {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-mic-wave {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5145dc, #818cf8);
  color: white;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 8px 25px rgba(81, 69, 220, 0.5);
  animation: voice-mic-glow 2s infinite ease-in-out;
}

.voice-mic-container::before,
.voice-mic-container::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(81, 69, 220, 0.2);
  z-index: 1;
  animation: voice-pulse 2s infinite ease-in-out;
  opacity: 0;
}

.voice-mic-container::after {
  animation-delay: 0.6s;
}

.voice-text {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5f9;
  font-family: var(--font-arabic);
}

.voice-subtext {
  font-size: 12px;
  color: var(--clr-text-muted, #94a3b8);
  line-height: 1.6;
  max-width: 320px;
  font-family: var(--font-arabic);
}

.voice-transcript-preview {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #34d399;
  background: rgba(52, 211, 153, 0.06);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.15);
  min-height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-arabic);
  text-align: center;
}

@keyframes voice-mic-glow {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes voice-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ─── Notification Dropdown ─── */
.notif-dropdown {
  position: absolute;
  top: 65px;
  inset-inline-end: 20px;
  width: 340px;
  max-height: 480px;
  background: #f5f6fa;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 0 30px rgba(81, 69, 220, 0.03);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-arabic);
  direction: rtl;
}

html.light .notif-dropdown {
  background: #f5f6fa;
  border-color: rgba(0, 0, 0, 0.05);
}

/* Default is dark theme if html.light is absent */
html:not(.light) .notif-dropdown {
  background: #0f0f1a;
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(81, 69, 220, 0.05);
}

@keyframes notifFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

html:not(.light) .notif-dropdown-header {
  background: #161624;
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.notif-dropdown-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #1e293b;
}

html:not(.light) .notif-dropdown-title {
  color: #ffffff;
}

.notif-dropdown-mark-read {
  font-size: 0.8rem;
  color: #5145dc;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}

.notif-dropdown-mark-read:hover {
  background: rgba(81, 69, 220, 0.08);
}

/* Back Button styling */
.notif-back-btn,
.more-mobile-back-btn {
  display: flex;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #1e293b;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
  align-items: center;
  justify-content: center;
}

html:not(.light) .notif-back-btn {
  background: #1c1b2d;
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: none;
}

.notif-back-btn:hover {
  background: #f1f5f9;
  transform: scale(1.03);
}

html:not(.light) .notif-back-btn:hover {
  background: #25243d;
}

html[dir="rtl"] .notif-back-btn svg {
  transform: rotate(180deg);
}

/* Filter tabs container & row */
.notif-tabs-container {
  padding: 12px 16px 8px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.notif-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.notif-tabs::-webkit-scrollbar {
  display: none;
}

.notif-tab-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #64748b;
  font-family: var(--font-arabic);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

html:not(.light) .notif-tab-btn {
  background: #161624;
  border-color: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}

.notif-tab-btn:hover {
  border-color: rgba(81, 69, 220, 0.2);
  color: #1e293b;
}

html:not(.light) .notif-tab-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

.notif-tab-btn.active {
  background: linear-gradient(135deg, #5145dc, #4338ca) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px rgba(81, 69, 220, 0.25);
}

.notif-red-dot-badge {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}

/* Card lists */
.notif-dropdown-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 16px;
  max-height: 380px;
}

.notif-card-item {
  margin: 8px 16px;
  padding: 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 12px rgba(81, 69, 220, 0.015);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  flex-direction: row-reverse;
}

html:not(.light) .notif-card-item {
  background: #161624;
  border-color: rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.notif-card-item:hover {
  transform: translateY(-1px);
  background: #fafaff;
  box-shadow: 0 6px 16px rgba(81, 69, 220, 0.04);
}

html:not(.light) .notif-card-item:hover {
  background: #1b1b2d;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.notif-status-dot-wrap {
  width: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 6px;
}

.notif-red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.notif-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.notif-card-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #1e293b;
}

html:not(.light) .notif-card-title {
  color: #ffffff;
}

.notif-card-msg {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.5;
}

html:not(.light) .notif-card-msg {
  color: #94a3b8;
}

.notif-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #94a3b8;
  opacity: 0.85;
  margin-top: 2px;
}

.notif-card-meta svg {
  color: #818cf8;
}

.notif-badge-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Category circle gradients */
.prayer-type {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #ef4444;
}

html:not(.light) .prayer-type {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.task-completed-type {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #10b981;
}

html:not(.light) .task-completed-type {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.task-ended-type {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #3b82f6;
}

html:not(.light) .task-ended-type {
  background: rgba(59, 130, 246, 0.15);
  color: #818cf8;
}

.task-starting-type {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #f97316;
}

html:not(.light) .task-starting-type {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

.general-type {
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  color: #a855f7;
}

html:not(.light) .general-type {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.notif-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* Mobile full-screen notification overlay style */
@media (max-width: 900px) {
  .notif-dropdown {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: 1001 !important;
    animation: notifSlideInMobile 0.35s cubic-bezier(0.32, 0.94, 0.6, 1);
  }

  html.light .notif-dropdown {
    background: #f5f6fa !important;
  }

  html:not(.light) .notif-dropdown {
    background: #0b0e14 !important;
  }

  @keyframes notifSlideInMobile {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  .notif-dropdown-header {
    padding: 18px 16px;
    height: 64px;
    box-sizing: border-box;
  }

  .notif-dropdown-list {
    max-height: calc(100vh - 128px) !important;
    padding: 8px 0;
  }
}



@media (min-width: 640px) {
  #mbn-popup-menu {
    display: none;
  }
}

.modal-mobile-back-btn {
  display: none !important;
}

/* Mobile Full-Screen Modal (Meetings Add, etc.) */
@media (max-width: 900px) {
  .modal-backdrop.mobile-fs {
    background: var(--bg2, #0f0f1a);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    align-items: flex-end;
  }

  .modal-backdrop.mobile-fs .modal {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.94, 0.6, 1);
    display: flex;
    flex-direction: column;
  }

  .modal-backdrop.mobile-fs.open .modal {
    transform: translateY(0);
  }

  .modal-backdrop.mobile-fs .modal-header {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .modal-backdrop.mobile-fs .modal-title {
    text-align: center;
    flex: 1;
  }

  .modal-mobile-back-btn {
    display: flex !important;
  }

  .modal-desktop-close-btn {
    display: none !important;
  }

  .modal-backdrop.mobile-fs .modal-body {
    flex: 1;
    overflow-y: auto;
  }

  #task-modal.mobile-fs {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
  }

  #task-modal.mobile-fs .modal {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    overflow: hidden;
    background: var(--bg2, #0f0f1a);
  }

  #task-modal.mobile-fs .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    background: var(--bg2, #0f0f1a);
  }

  #task-modal.mobile-fs .modal-title {
    font-size: 16px;
    font-weight: 900;
  }

  #task-modal.mobile-fs #task-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #task-modal.mobile-fs .modal-body {
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #task-modal.mobile-fs .modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--bg2, #0f0f1a);
  }

  #task-modal.mobile-fs .modal-footer .btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
  }

  #task-modal.mobile-fs .modal-body>div {
    gap: 16px !important;
  }

  #task-modal.mobile-fs .modal-body [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

html[dir="rtl"] .modal-mobile-back-btn svg {
  transform: rotate(180deg);
}

/* ==========================================================================
   Desktop Quick Tools Menu (FAB Speed Dial)
   ========================================================================== */

#desktop-fab-container {
  position: fixed;
  bottom: 30px;
  left: 30px;
  right: auto;
  z-index: 999;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 14px;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* LTR layout positioning */
html.ltr #desktop-fab-container {
  left: auto;
  right: 30px;
}

/* Trigger Button */
#desktop-fab-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px var(--clr-primary-glow), 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 10;
  outline: none;
  pointer-events: auto;
}

#desktop-fab-toggle:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 28px var(--clr-primary-glow), 0 4px 12px rgba(0, 0, 0, 0.25);
}

#desktop-fab-toggle:active {
  transform: scale(0.95);
}

/* Trigger Icon rotations */
#desktop-fab-toggle svg {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#desktop-fab-container.expanded #desktop-fab-toggle {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

#desktop-fab-container.expanded #desktop-fab-toggle svg {
  transform: rotate(135deg);
}

/* Tool buttons vertical stack */
.desktop-fab-buttons {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  margin-bottom: 2px;
}

#desktop-fab-container.expanded .desktop-fab-buttons {
  pointer-events: all;
}

/* Override the individual buttons */
#desktop-fab-container #voice-command-btn,
#desktop-fab-container #qn-fab,
#desktop-fab-container #task-timer-fab,
#desktop-fab-container .desktop-quick-action {
  position: static !important;
  transform: scale(0) !important;
  opacity: 0 !important;
  writing-mode: horizontal-tb !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  margin: 0 !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
}

#desktop-fab-container .desktop-quick-action {
  border: none;
  color: #ffffff;
  cursor: pointer;
}

#desktop-fab-container .desktop-alarm-action {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

#desktop-fab-container .desktop-kinship-action {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

/* Expanded individual buttons animation with staggered delays */
#desktop-fab-container.expanded #task-timer-fab {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition-delay: 0ms !important;
}

#desktop-fab-container.expanded #qn-fab {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition-delay: 60ms !important;
}

#desktop-fab-container.expanded #voice-command-btn {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition-delay: 120ms !important;
}

#desktop-fab-container.expanded #desktop-alarm-btn {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition-delay: 180ms !important;
}

#desktop-fab-container.expanded #desktop-kinship-btn {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition-delay: 240ms !important;
}

/* Tooltips for individual buttons */
#desktop-fab-container .desktop-fab-buttons button {
  position: relative;
}

#desktop-fab-container .desktop-fab-buttons button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  background: rgba(15, 23, 42, 0.95);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-arabic);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mirror tooltips in LTR */
html.ltr #desktop-fab-container .desktop-fab-buttons button::after {
  left: auto;
  right: 60px;
}

#desktop-fab-container .desktop-fab-buttons button:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Hover scales on individual buttons */
#desktop-fab-container #voice-command-btn:hover,
#desktop-fab-container #qn-fab:hover,
#desktop-fab-container #task-timer-fab:hover,
#desktop-fab-container .desktop-quick-action:hover {
  transform: scale(1.1) !important;
}

/* Hide labels in desktop menu */
#desktop-fab-container .voice-command-fab-label,
#desktop-fab-container .qn-fab-label,
#desktop-fab-container .task-timer-fab-label {
  display: none !important;
}

/* Hide the container entirely on mobile */
@media (max-width: 900px) {
  #desktop-fab-container {
    display: none !important;
  }
}

/* Focus Mode Mobile Responsiveness */
@media (max-width: 480px) {
  .focus-timer-card {
    padding: var(--space-4) !important;
  }

  .focus-ring-container {
    width: 220px !important;
    height: 220px !important;
    margin-bottom: var(--space-6) !important;
  }

  .focus-countdown {
    font-size: 42px !important;
  }

  .mode-selector {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .mode-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 12px !important;
  }

  .sound-btn {
    padding: var(--space-2) !important;
  }

  #fs-countdown {
    font-size: 72px !important;
  }
}

/* ─── Financial Font & Numbers Standardization ─── */
.wallet-summary-amount,
.debt-summary-amount,
.piggy-total-amount,
.piggy-fund-amount,
.piggy-month-amount,
.txn-amount,
.debt-card-amount,
.number-font {
  font-family: var(--font-numbers) !important;
}

/* Ensure consistent display layout and sizing for debt summary amount */
.debt-summary-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

@media (max-width: 640px) {
  .debt-summary-amount {
    font-size: 22px;
  }
}

/* ─── Light Mode Polish Overrides ─── */
html.light .modal,
html.light .worship-detail-sheet,
html.light #qn-drawer,
html.light .admin-stat-card,
html.light .admin-table-wrap,
html.light .admin-chart-wrap,
html.light .sub-plan-card,
html.light .payment-card,
html.light .bank-info-card,
html.light .tickets-list-pane,
html.light .chat-pane {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

html.light .admin-stat-card:hover,
html.light .sub-plan-card:hover {
  border-color: rgba(99, 102, 241, 0.22);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

html.light .btn-ghost,
html.light .btn-secondary,
html.light .btn-icon,
html.light .sidebar-toggle,
html.light .sheet-close,
html.light .qn-close-btn,
html.light .qn-icon-btn,
html.light .focus-btn-secondary,
html.light .task-timer-controls .btn-icon,
html.light .sound-btn,
html.light .payment-method-btn,
html.light .page-btn,
html.light .btn-select-ghost {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--clr-text-muted);
}

html.light .btn-ghost:hover,
html.light .btn-secondary:hover,
html.light .btn-icon:hover,
html.light .sidebar-toggle:hover,
html.light .sheet-close:hover,
html.light .qn-close-btn:hover,
html.light .qn-icon-btn:hover,
html.light .focus-btn-secondary:hover,
html.light .task-timer-controls .btn-icon:hover,
html.light .sound-btn:hover,
html.light .payment-method-btn:hover,
html.light .page-btn:hover,
html.light .btn-select-ghost:hover {
  background: var(--control-hover-bg);
  border-color: rgba(99, 102, 241, 0.22);
  color: var(--clr-text);
}

html.light .form-input,
html.light .form-select,
html.light .form-textarea,
html.light .admin-search,
html.light .admin-filter-select,
html.light #qn-textarea,
html.light #chat-message-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--clr-text);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

html.light .form-input:focus,
html.light .form-select:focus,
html.light .form-textarea:focus,
html.light .admin-search:focus,
html.light .admin-filter-select:focus,
html.light #qn-textarea:focus,
html.light #chat-message-input:focus {
  background: var(--input-bg);
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-glow);
}

html.light .form-input::placeholder,
html.light .form-textarea::placeholder,
html.light .admin-search::placeholder,
html.light #qn-textarea::placeholder,
html.light #chat-message-input::placeholder {
  color: #94a3b8;
}

html.light .form-input:disabled,
html.light .form-input[readonly],
html.light .admin-filter-select:disabled,
html.light .admin-search:disabled {
  background: var(--input-disabled-bg) !important;
  color: var(--clr-text-muted) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html.light select,
html.light option,
html.light input,
html.light textarea {
  color-scheme: light;
}

html.light .worship-list-item,
html.light .adhkar-card,
html.light .kanban-column,
html.light .mode-selector,
html.light .filter-bar,
html.light .calendar-day,
html.light .day-chip,
html.light .sound-btn,
html.light .tag,
html.light .copy-link-widget,
html.light .bank-info-card,
html.light .payment-method-btn {
  background: rgb(255 255 255);
  border: 1px solid rgb(240 240 240);
}

html.light .worship-list-item:hover,
html.light .kanban-column.drag-target,
html.light .calendar-day:hover,
html.light .day-chip:hover,
html.light .sound-btn:hover,
html.light .chip:hover,
html.light .qn-note-card:hover {
  background: rgba(241, 245, 249, 0.96);
}

html.light .task-row {
  background: #ffffff;
  border-color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

html.light .task-row:nth-child(even),
html.light .admin-table th,
html.light .perms-table th,
html.light .notif-item.unread {
  background: #ffffff;
}

html.light .task-row:hover,
html.light .admin-table tr:hover td,
html.light .notif-item:hover {
  background: rgba(99, 102, 241, 0.06) !important;
}

html.light .task-group-divider,
html.light .divider,
html.light .pricing-divider,
html.light .admin-table td,
html.light .admin-table th,
html.light .perms-table td,
html.light .perms-table th,
html.light .bank-row,
html.light .notif-dropdown-header,
html.light .notif-item {
  border-color: var(--line-color);
}

html.light .progress-bar,
html.light .range-slider,
html.light .focus-ring-bg,
html.light .task-timer-ring-bg {
  background: rgba(15, 23, 42, 0.08);
  stroke: rgba(15, 23, 42, 0.08);
}

html.light .checkbox-custom,
html.light .task-complete-btn,
html.light .prayer-check,
html.light .kanban-count,
html.light .task-group-count,
html.light .toggle-track,
html.light .heatmap-cell {
  background: rgba(15, 23, 42, 0.08);
}

html.light .checkbox-wrap:hover .checkbox-custom,
html.light .task-complete-btn:hover,
html.light .prayer-check:hover {
  background: rgba(22, 163, 74, 0.13);
}

html.light .chip {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--clr-text-muted);
}

html.light .chip.active,
html.light .chip:hover,
html.light .calendar-day.today,
html.light .day-chip.today,
html.light .sound-btn.active,
html.light .payment-method-btn.active,
html.light .worship-card.done,
html.light .prayer-card.active-prayer {
  background: var(--clr-primary-subtle);
  border-color: rgba(99, 102, 241, 0.22);
  color: var(--clr-primary-dark);
}

html.light .calendar-day.selected,
html.light .day-chip.selected,
html.light .mode-btn.active,
html.light .page-btn.active {
  background: var(--clr-primary);
  color: #ffffff;
  border-color: transparent;
}

html.light .task-timer-card {
  background: rgba(247, 248, 251, 0.97);
  color: var(--clr-text);
}

html.light .voice-card {
  background: linear-gradient(135deg, #ffffff, #f1f5f9);
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16), 0 0 30px rgba(99, 102, 241, 0.08);
}

html.light .voice-text,
html.light .notif-dropdown-title,
html.light .notif-item-title {
  color: var(--clr-text);
}

html.light .notif-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border-color);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

html.light .notif-item-message,
html.light .notif-item-time,
html.light .notif-empty {
  color: var(--clr-text-muted);
}

html.light .notif-back-btn {
  color: var(--clr-text);
}

html.light .notif-back-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* More-launched mobile sections behave like native sub-screens */
@media (max-width: 900px) {
  body.more-mobile-subscreen-open {
    overflow: hidden;
  }

  body.more-mobile-subscreen-open #mobile-bottom-nav,
  body.more-mobile-subscreen-open #mbn-popup-menu,
  body.more-mobile-subscreen-open #mbn-popup-overlay,
  body.more-mobile-subscreen-open #add-task-fab {
    display: none !important;
  }

  #page-content.more-mobile-subscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    z-index: 1001;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--clr-bg, #0f0f1a);
    animation: moreMobileScreenIn 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    will-change: transform, opacity;
    transform-origin: center;
  }

  #page-content.more-mobile-subscreen.is-closing {
    animation: moreMobileScreenOut 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
    pointer-events: none;
  }

  @supports not (height: 100dvh) {
    #page-content.more-mobile-subscreen {
      height: 100vh;
    }
  }

  @keyframes moreMobileScreenIn {
    from {
      opacity: 0.98;
      transform: translate3d(0, 12%, 0) scale(0.992);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @keyframes moreMobileScreenOut {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    to {
      opacity: 0.98;
      transform: translate3d(0, 12%, 0) scale(0.992);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #page-content.more-mobile-subscreen {
      animation: none;
      transform: none;
    }
  }

  .more-mobile-screen-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
  }


  .more-mobile-screen-title {
    min-width: 0;
    color: var(--clr-text, #ffffff);
    font-size: 17px;
    font-weight: 850;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .more-mobile-screen-spacer {
    width: 44px;
    height: 1px;
  }

  #page-content.more-mobile-subscreen>.page-header:first-of-type {
    margin-top: 18px !important;
  }

  html.light #page-content.more-mobile-subscreen {
    background: var(--clr-bg, #f8fafc);
  }

  html.light .more-mobile-screen-header {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line-color);
  }

  html.light .more-mobile-back-btn:active {
    background: rgba(15, 23, 42, 0.06);
  }
}

html.light .role-user_free,
html.light .status-expired {
  color: #475569;
}

html.light .role-user_pro {
  color: #4338ca;
}

html.light .role-staff,
html.light .status-active,
html.light .btn-action-success {
  color: #16a34a;
}

html.light .role-admin,
html.light .status-pending {
  color: #b45309;
}

html.light .status-cancelled,
html.light .btn-action-danger {
  color: #dc2626;
}

html.light .admin-table-wrap,
html.light .admin-table,
html.light .perms-table {
  color: var(--clr-text);
}

html.light .sub-plan-card:hover {
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

html.light .calendar-day-cell {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

html.light .calendar-day-cell:hover {
  background: #f8fafc !important;
}

html.light .calendar-day-cell.today,
html.light .calendar-day-cell.active-day {
  background: rgba(99, 102, 241, 0.08) !important;
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.35) !important;
}

html.light .mobile-overlay,
html.light .worship-detail-backdrop,
html.light #qn-backdrop,
html.light .modal-backdrop {
  background: rgba(15, 23, 42, 0.34);
}

html.light .modal-backdrop.mobile-fs {
  background: var(--clr-bg) !important;
}

html.light .modal-backdrop.mobile-fs .modal,
html.light .modal-backdrop.mobile-fs .modal-header {
  background: var(--clr-surface) !important;
}

html.light #task-modal.mobile-fs .modal-footer {
  background: var(--clr-surface) !important;
  border-color: var(--border-color);
}

html.light .glass-card[style*="background:rgba(255,255,255"],
html.light .glass-card[style*="background: rgba(255,255,255"],
html.light .glass-card[style*="background:rgba(255, 255, 255"],
html.light .glass-card[style*="background: rgba(255, 255, 255"],
html.light [style*="background:rgba(255,255,255"],
html.light [style*="background: rgba(255,255,255"],
html.light [style*="background:rgba(255, 255, 255"],
html.light [style*="background: rgba(255, 255, 255"] {
  background: var(--clr-surface) !important;
}

html.light [style*="border:1px solid rgba(255"],
html.light [style*="border: 1px solid rgba(255"],
html.light [style*="border:1px dashed rgba(255"],
html.light [style*="border: 1px dashed rgba(255"] {
  border-color: var(--border-color) !important;
}

html.light .form-input[style*="background-color: rgba(255"],
html.light .form-input[style*="background-color:rgba(255"] {
  background-color: var(--input-disabled-bg) !important;
}


/* ─── Rakez refinements: logos, payment, admin mobile, reminders ─── */
.sidebar-logo .logo-text {
  display: none !important;
}

.sidebar-logo {
  justify-content: space-between;
}

.task-date-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.task-date-time-grid .form-group:first-child {
  grid-column: 1 / -1;
}

.share-option-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.share-option-row input {
  margin-top: 4px;
}

.share-option-row strong {
  display: block;
  margin-bottom: 3px;
}

.share-option-row small {
  color: var(--clr-text-muted);
  line-height: 1.6;
}

.site-logo-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.site-logo-upload-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.site-logo-upload-preview {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.site-logo-upload-preview.dark-preview {
  background: #0f172a;
}

.site-logo-upload-title {
  font-weight: 800;
  margin-bottom: 8px;
}

.payment-method-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.payment-method-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.payment-method-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-toggle-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.payment-method-toggle-icon {
  display: inline-flex;
  color: var(--clr-primary, #818cf8);
}

.payment-method-toggle .toggle-track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  position: relative;
  background: rgba(100, 116, 139, 0.35);
  flex: 0 0 42px;
}

.payment-method-toggle .toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
}

.payment-method-toggle input:checked+.toggle-track {
  background: var(--clr-primary, #818cf8);
}

.payment-method-toggle input:checked+.toggle-track::after {
  transform: translateX(18px);
}

.subscribe-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.subscribe-subtitle {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 28px;
}

.plans-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.plan-compare-card {
  padding: 18px;
  border-radius: 12px;
  background: var(--surface-color, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.plan-compare-card.pro {
  border-color: rgba(129, 140, 248, 0.45);
}

.plan-compare-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.plan-compare-top span {
  color: var(--clr-primary, #818cf8);
  display: inline-flex;
}

.plan-compare-price {
  font-weight: 900;
  font-size: 1.45rem;
  margin-bottom: 14px;
  color: var(--clr-primary, #818cf8);
}

.plan-compare-price small {
  font-size: 0.78rem;
  color: var(--text-secondary, #94a3b8);
}

.plan-feature-list,
.sub-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: start;
}

.plan-feature-list li,
.sub-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.9rem;
  line-height: 1.55;
}

.plan-feature-list svg,
.sub-plan-features svg {
  color: #22c55e;
  margin-top: 3px;
  flex: 0 0 auto;
}

.coupon-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.coupon-status {
  min-height: 22px;
  margin-bottom: 16px;
  font-size: 0.86rem;
}

.coupon-ok {
  color: #22c55e;
  font-weight: 700;
}

.coupon-error {
  color: var(--danger-color, #f87171);
  font-weight: 700;
}

.price-before {
  color: var(--text-secondary, #94a3b8);
  text-decoration: line-through;
  margin-inline-end: 6px;
}

.enhanced-payment-methods {
  flex-wrap: wrap;
}

.payment-provider-container {
  min-height: 48px;
}

.paypal-v6-button-wrap,
.paypal-guest-card-shell,
.wallet-button-container {
  width: 100%;
}

.paypal-v6-button-wrap paypal-button,
.paypal-guest-card-shell paypal-basic-card-container,
.paypal-guest-card-shell paypal-basic-card-button {
  display: block;
  width: 100%;
}

.paypal-card-fields-shell {
  padding: 16px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
  border-radius: 12px;
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
}

.paypal-card-grid {
  display: grid;
  grid-template-columns: 1fr 160px 130px;
  gap: 12px;
  align-items: end;
}

.paypal-card-field {
  height: 48px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--input-border, rgba(148, 163, 184, 0.28));
  border-radius: 10px;
  background: var(--input-bg, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.paypal-card-pay-btn {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
  min-height: 46px;
}

.wallet-button-container {
  min-height: 48px;
}

.wallet-button-container>div,
.wallet-button-container button,
.wallet-button-container apple-pay-button {
  width: 100%;
}

.wallet-button-container apple-pay-button {
  display: block;
  height: 48px;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 48px;
  --apple-pay-button-border-radius: 8px;
}

.payment-unavailable {
  line-height: 1.7;
  color: var(--text-secondary, #94a3b8);
}

.wallet-payment-panel {
  margin-top: 12px;
}

.wallet-payment-copy {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(129, 140, 248, 0.1);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .paypal-card-grid {
    grid-template-columns: 1fr;
  }

  .paypal-card-fields-shell {
    padding: 12px;
  }
}

.admin-coupons-panel {
  padding: 20px;
  margin-bottom: 22px;
}

.admin-section-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.14));
  border-radius: 10px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.035));
  max-width: 100%;
  overflow-x: auto;
}

.admin-section-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-family: var(--font-arabic, 'Cairo', sans-serif);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.admin-section-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--clr-primary, #818cf8), #818cf8);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.24);
}

.admin-coupons-head h3 {
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0 0 4px;
}

.admin-coupons-head p {
  color: var(--text-secondary, #94a3b8);
  margin: 0 0 16px;
  line-height: 1.7;
}

.coupon-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.coupon-create-form .btn {
  justify-content: center;
}

.daily-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: fadeIn 0.22s ease;
}

.daily-welcome-overlay.closing {
  opacity: 0;
  transition: opacity 0.22s ease;
}

.daily-welcome-card {
  width: min(520px, 100%);
  padding: 32px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  color: #0f172a;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.daily-welcome-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: rgba(250, 204, 21, 0.14);
  color: #ca8a04;
}

.daily-welcome-card h1 {
  font-size: 1.8rem;
  margin: 0 0 12px;
}

.daily-welcome-card p {
  color: #475569;
  line-height: 1.8;
  margin: 0 0 24px;
}

.notification-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: fadeIn 0.22s ease;
}

.notification-onboarding-overlay.closing {
  opacity: 0;
  transition: opacity 0.22s ease;
}

.notification-onboarding-card {
  width: min(560px, 100%);
  padding: 32px;
  border-radius: 18px;
  text-align: center;
  background: var(--clr-surface, #ffffff);
  color: var(--clr-text, #0f172a);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.notification-onboarding-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: rgba(81, 69, 220, 0.12);
  color: var(--clr-primary, #5145dc);
}

.location-onboarding-icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}

.notification-onboarding-card h1 {
  font-size: 1.75rem;
  margin: 0 0 12px;
}

.notification-onboarding-lead {
  margin: 0;
  color: var(--clr-text-muted, #64748b);
  line-height: 1.85;
  font-size: 0.98rem;
}

.notification-onboarding-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: start;
  margin: 22px 0;
  padding: 14px;
  border-radius: 12px;
  color: var(--clr-text, #0f172a);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.22);
  line-height: 1.7;
  font-size: 0.9rem;
}

.notification-onboarding-note svg {
  flex: 0 0 auto;
  color: #d97706;
  margin-top: 3px;
}

.notification-onboarding-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.notification-onboarding-actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.notification-onboarding-status {
  min-height: 20px;
  margin-top: 14px;
  color: var(--clr-danger, #ef4444);
  font-size: 0.86rem;
  line-height: 1.6;
}

.adhan-player-fallback {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fadeIn 0.2s ease;
}

.adhan-player-fallback.closing {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.adhan-player-card {
  width: min(440px, 100%);
  padding: 28px;
  border-radius: 18px;
  text-align: center;
  background: var(--clr-surface, #ffffff);
  color: var(--clr-text, #0f172a);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
}

.adhan-player-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--clr-primary, #5145dc);
  background: rgba(81, 69, 220, 0.12);
}

.adhan-player-card h2 {
  margin: 0 0 10px;
  font-size: 1.45rem;
}

.adhan-player-card p {
  margin: 0;
  color: var(--clr-text-muted, #64748b);
  line-height: 1.75;
}

.adhan-player-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.adhan-player-actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.adhan-player-status {
  min-height: 20px;
  margin-top: 12px;
  color: var(--clr-danger, #ef4444);
  font-size: 0.86rem;
  line-height: 1.6;
}

.quick-reminder-dialog {
  max-width: 460px;
}

.kinship-saved-panel {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.kinship-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.kinship-saved-head strong {
  font-size: 13px;
}

.kinship-saved-head span {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(129, 140, 248, 0.14);
  color: var(--clr-primary-light);
  font-size: 12px;
  font-weight: 900;
}

.kinship-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 68px;
  color: var(--clr-text-muted);
  font-size: 13px;
}

.kinship-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-inline-end: 2px;
}

.kinship-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.kinship-contact-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.kinship-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-weight: 900;
}

.kinship-contact-main strong,
.kinship-contact-main small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kinship-contact-main strong {
  font-size: 13px;
}

.kinship-contact-main small {
  margin-top: 2px;
  color: var(--clr-text-muted);
  font-size: 11px;
  text-align: start;
}

.kinship-contact-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.kinship-contact-actions a {
  text-decoration: none;
}

.settings-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.settings-layout>.glass-card {
  min-height: 100%;
}

.settings-layout>.glass-card:nth-of-type(2),
.settings-layout>.glass-card:nth-of-type(3) {
  align-self: stretch;
}

.settings-layout>.btn {
  grid-column: 1 / -1;
}

.settings-account-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: var(--space-3);
}

.alarm-icon-bg {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.kinship-icon-bg {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

html.light .site-logo-upload-card,
html.light .payment-method-toggle,
html.light .plan-compare-card,
html.light .share-option-row,
html.light .kinship-saved-panel,
html.light .kinship-contact-card {
  background: #ffffff;
  border-color: var(--border-color);
}

html.light .site-logo-upload-preview {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
}

html.light .payment-card [style*="color:#fff"],
html.light .payment-card [style*="color: #fff"],
html.light .glass-card [style*="color:#fff"],
html.light .glass-card [style*="color: #fff"] {
  color: var(--clr-text) !important;
}

html.light .payment-card,
html.light .plan-compare-card,
html.light .admin-coupons-panel {
  background: rgba(255, 255, 255, 0.96);
}

html.light .payment-method-toggle .toggle-track,
html.light .checkbox-custom,
html.light .toggle-track {
  border: 1px solid rgba(148, 163, 184, 0.24);
}

@media (max-width: 900px) {
  #page-content {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .settings-layout {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .admin-toolbar,
  .coupon-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-filter-select,
  .admin-search,
  .admin-toolbar .btn-action,
  .coupon-row .btn {
    width: 100%;
  }

  .admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table,
  .perms-table {
    min-width: 760px;
  }

  .coupon-create-form {
    grid-template-columns: 1fr;
  }

  .site-logo-upload-grid,
  .plans-comparison,
  .sub-plans-grid,
  .payment-method-toggle-grid {
    grid-template-columns: 1fr;
  }

  .payment-card {
    padding: 20px;
  }

  .payment-methods {
    display: grid;
    grid-template-columns: 1fr;
  }

  .task-date-time-grid {
    grid-template-columns: 1fr;
  }

  .task-date-time-grid .form-group:first-child {
    grid-column: auto;
  }

  #task-modal:not(.mobile-fs) .modal,
  #meeting-modal .modal,
  #admin-sub-modal .modal,
  #quick-reminder-modal .modal {
    width: min(100%, calc(100vw - 18px));
    max-height: calc(100dvh - 112px);
    margin-top: calc(52px + env(safe-area-inset-top, 0px));
    margin-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #task-modal:not(.mobile-fs) .modal-body,
  #meeting-modal .modal-body,
  #admin-sub-modal .modal-body,
  #quick-reminder-modal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
  }

  #meeting-modal.mobile-fs.open {
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .daily-welcome-card {
    padding: 26px 20px;
    border-radius: 14px;
  }

  .daily-welcome-card h1 {
    font-size: 1.45rem;
  }

  .notification-onboarding-card {
    padding: 26px 20px;
    border-radius: 14px;
  }

  .notification-onboarding-card h1 {
    font-size: 1.42rem;
  }

  .notification-onboarding-icon {
    width: 62px;
    height: 62px;
  }

  .notification-onboarding-actions {
    flex-direction: column;
  }

  .notification-onboarding-actions .btn {
    width: 100%;
  }

  .adhan-player-card {
    padding: 24px 18px;
    border-radius: 14px;
  }

  .adhan-player-actions {
    flex-direction: column;
  }

  .adhan-player-actions .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {

  .admin-table,
  .perms-table {
    min-width: 680px;
  }

  .site-logo-upload-card {
    align-items: flex-start;
  }
}

/* ========================================
   rakez ركز — Mobile App Redesign Styles
   ======================================== */

/* Mobile Topbar Dynamic Title & Profile Avatar */
.mobile-topbar-title {
  display: none;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  flex: 1;
  color: var(--clr-text);
  margin: 0;
}

@media (max-width: 900px) {
  #topbar {
    display: none !important;
  }

  #page-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  }

  .mobile-topbar-title {
    display: none !important;
  }

  /* Show avatar button instead of hamburger */
  #mobile-menu-btn.btn-avatar {
    display: none !important;
  }

  #mobile-menu-btn.btn-ghost {
    display: none !important;
  }
}

.btn-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
  color: white;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
  flex-shrink: 0;
  user-select: none;
}

.btn-avatar:active {
  transform: scale(0.92);
}

.avatar-letter {
  line-height: 1;
}

/* More Page Launcher Grid */
.more-launcher-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-8);
}

.more-custom-space-header {
  margin: 0 0 var(--space-3);
}

.more-custom-space-add,
.more-custom-space-readonly {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.more-custom-space-add {
  border: 1px solid color-mix(in srgb, var(--clr-primary) 35%, transparent);
  background: color-mix(in srgb, var(--clr-primary) 12%, transparent);
  color: var(--clr-primary-light, #9b8cff);
  cursor: pointer;
}

.more-custom-space-readonly,
.custom-readonly-badge {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.09);
  color: var(--clr-text-muted, #94a3b8);
}

.more-custom-space-grid {
  padding-bottom: var(--space-5);
}

.custom-section-launcher {
  position: relative;
  overflow: hidden;
}

.custom-section-launcher-delete {
  position: absolute;
  z-index: 2;
  top: 10px;
  inset-inline-end: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #ef6b73;
  background: rgba(239, 68, 68, 0.08);
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
}

.custom-section-launcher-delete:hover,
.custom-section-launcher-delete:focus-visible {
  opacity: 1;
  transform: scale(1.05);
  background: rgba(239, 68, 68, 0.14);
}

.custom-section-launcher::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--custom-launcher-color, var(--clr-primary));
}

.custom-section-launcher-icon {
  color: var(--custom-launcher-color, var(--clr-primary-light));
  background: color-mix(in srgb, var(--custom-launcher-color, var(--clr-primary)) 14%, transparent);
  border-color: color-mix(in srgb, var(--custom-launcher-color, var(--clr-primary)) 28%, transparent) !important;
}

.custom-section-launcher small {
  color: var(--clr-text-muted, #94a3b8);
  font-size: 0.68rem;
  line-height: 1.35;
}

.custom-section-launcher-add {
  --custom-launcher-color: #94a3b8;
  border-style: dashed;
}

.custom-readonly-badge {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

html.light .more-custom-space-add {
  color: var(--clr-primary, #6557e8);
  background: color-mix(in srgb, var(--clr-primary) 8%, white);
}


.launcher-card {
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, border-color 0.2s;
  user-select: none;
}

.launcher-card:active {
  transform: scale(0.94);
}

.launcher-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  /* Unified pure black background for all icons in both modes */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.launcher-icon-wrap svg {
  width: 24px;
  height: 24px;
  stroke: white;
  /* fallback */
  stroke-width: 2.2;
  fill: none;
}

.launcher-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.3;
}

.more-user-profile-wrap {
  display: none;
}

@media (max-width: 900px) {
  .more-custom-space-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .custom-section-launcher {
    min-height: 132px;
    padding-inline: 10px;
  }

  .more-custom-space-header {
    margin-top: 2px;
  }

  .more-user-profile-wrap {
    display: block;
    padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .more-user-profile {
    width: 100%;
    min-height: 70px;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .more-user-profile:active {
    transform: scale(0.98);
  }

  .more-user-avatar {
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #5145dc, #818cf8);
  }

  .more-user-info {
    flex: 1;
    min-width: 0;
  }

  .more-user-info .user-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .more-user-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    min-width: 0;
  }

  .more-user-meta .user-streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .more-user-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 19px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .more-logout-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  }

  .more-logout-btn:active {
    transform: scale(0.92);
  }

  html.light .more-user-profile {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.08);
  }

  html.light .more-logout-btn {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
  }
}

/* Launcher Brand-Colored Icons (Unified Black Background) */
.calendar-bg svg {
  stroke: #3b82f6 !important;
}

.focus-bg svg {
  stroke: #818cf8 !important;
}

.habits-bg svg {
  stroke: #ec4899 !important;
}

.worship-bg svg {
  stroke: #10b981 !important;
}

.wallet-bg svg {
  stroke: #22c55e !important;
}

.metal-bg svg {
  stroke: #d6ad50 !important;
}

.debtbook-bg svg {
  stroke: #f59e0b !important;
}

.plan-bg svg {
  stroke: #8b5cf6 !important;
}

.meetings-bg svg {
  stroke: #06b6d4 !important;
}

.stats-bg svg {
  stroke: #6366f1 !important;
}

.settings-bg svg {
  stroke: #94a3b8 !important;
}

.support-bg svg {
  stroke: #06b6d4 !important;
}

.subscribe-bg svg {
  stroke: #e11d48 !important;
}

.lang-bg svg {
  stroke: #f43f5e !important;
}

.theme-bg svg {
  stroke: #eab308 !important;
}

/* Admin launcher icons */
.admin-db-bg svg {
  stroke: #fbbf24 !important;
}

.admin-users-bg svg {
  stroke: #818cf8 !important;
}

.admin-perms-bg svg {
  stroke: #3b82f6 !important;
}

.admin-subs-bg svg {
  stroke: #10b981 !important;
}

.admin-settings-bg svg {
  stroke: #ec4899 !important;
}

/* Dynamic glow effect on hover */
.launcher-card:hover .launcher-icon-wrap {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}

/* Modals to Bottom Sheets on Mobile */
@media (max-width: 640px) {

  /* Hide scrollbars on mobile for native app feel */
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
    z-index: 1100 !important;
  }

  #task-modal:not(.mobile-fs) .modal,
  #meeting-modal .modal,
  #admin-sub-modal .modal,
  #quick-reminder-modal .modal,
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 85vh !important;
    transform: translateY(100%) scale(1) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: none !important;
  }

  #task-modal.open:not(.mobile-fs) .modal,
  #meeting-modal.open .modal,
  #admin-sub-modal.open .modal,
  #quick-reminder-modal.open .modal,
  .modal-backdrop.open .modal {
    transform: translateY(0) scale(1) !important;
  }

  /* Insert a drag handle indicator at the top of the modal */
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-full) !important;
    margin: 10px auto 0 !important;
    flex-shrink: 0 !important;
  }

  html.light .modal::before {
    background: rgba(0, 0, 0, 0.12) !important;
  }

  .modal-header {
    padding: var(--space-4) var(--space-5) var(--space-2) !important;
    flex-shrink: 0 !important;
  }

  .modal-body {
    padding: var(--space-4) var(--space-5) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-footer {
    padding: var(--space-2) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)) !important;
    flex-shrink: 0 !important;
  }
}

/* Tactile Active States and UI polish */
.btn:active {
  transform: scale(0.96) !important;
}

.day-chip:active {
  transform: scale(0.94) !important;
}

.task-card:active {
  transform: scale(0.98) !important;
}

/* Fix iOS / Safari input date & time visual glitches and inconsistent widths */
input[type="date"].form-input,
input[type="time"].form-input,
select.form-input,
.form-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Ensure consistent heights and vertical alignment for date/time selectors on mobile Safari */
@media (max-width: 900px) {

  input[type="date"].form-input,
  input[type="time"].form-input,
  select.form-input,
  .form-select {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 1.4 !important;
  }
}

/* Push Notifications Status Panel Custom Responsive Styles */
.push-status-panel {
  margin-top: var(--space-4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
  padding: var(--space-4) !important;
  border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 12px !important;
  background: var(--clr-surface-2, rgba(255, 255, 255, 0.02)) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02) !important;
  transition: all 0.3s ease !important;
}

html.light .push-status-panel {
  background: #ffffff !important;
  border-color: var(--border-color, rgba(0, 0, 0, 0.08)) !important;
}

.push-status-actions {
  display: flex !important;
  gap: var(--space-2) !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-top: var(--space-1) !important;
}

.push-status-actions .btn {
  flex: 1 !important;
  min-width: 140px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.permission-status-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--clr-text-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.permission-status-badge.is-on {
  background: rgba(16, 185, 129, 0.13);
  color: #10b981;
}

.permission-status-badge.is-off {
  background: rgba(239, 68, 68, 0.12);
  color: var(--clr-danger, #ef4444);
}

html.light .permission-status-badge {
  background: #f1f5f9;
}

html.light .permission-status-badge.is-on {
  background: rgba(16, 185, 129, 0.12);
}

html.light .permission-status-badge.is-off {
  background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 768px) {
  .push-status-actions {
    flex-direction: column !important;
  }

  .push-status-actions .btn {
    width: 100% !important;
    flex: none !important;
  }
}

/* ========================================
   Optional two-minute start
   ======================================== */

.btn-spark {
  color: var(--clr-warning, #f59e0b) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-spark:hover:not(:disabled) {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.1) !important;
  transform: scale(1.2) rotate(15deg) !important;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) !important;
}

.btn-spark:active:not(:disabled) {
  transform: scale(0.9) rotate(-10deg) !important;
}

.friction-breaker-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(10, 10, 20, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  font-family: 'Cairo', sans-serif;
  color: #f1f5f9;
}

.friction-breaker-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.fb-card {
  width: 90%;
  max-width: 460px;
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.7), rgba(10, 10, 20, 0.9));
  border: 1px solid rgba(81, 69, 220, 0.25);
  border-radius: 24px;
  padding: var(--space-6) var(--space-6) var(--space-8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(81, 69, 220, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.friction-breaker-overlay.open .fb-card {
  transform: scale(1);
}

.fb-glow {
  position: absolute;
  top: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(81, 69, 220, 0.25) 0%, rgba(81, 69, 220, 0) 70%);
  z-index: 0;
  pointer-events: none;
}

.fb-header {
  z-index: 1;
  margin-bottom: var(--space-5);
}

.fb-header h2 {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-shadow: 0 0 15px rgba(81, 69, 220, 0.4);
}

.fb-header p {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
}

.fb-timer-box {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: var(--space-6);
  z-index: 1;
}

.fb-timer-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fb-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 8;
}

.fb-circle-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke: url(#fb-gradient);
  filter: drop-shadow(0 0 10px rgba(81, 69, 220, 0.6));
  transition: stroke-dashoffset 1s linear;
}

.fb-timer-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fb-time-display {
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fb-time-label {
  font-size: 11px;
  color: #818cf8;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 6px;
  text-transform: uppercase;
}

.fb-prompt-box {
  z-index: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  margin-bottom: var(--space-6);
  width: 100%;
}

.fb-prompt-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #e2e8f0;
  transition: opacity 0.3s ease;
  font-style: italic;
}

.fb-prompt-text.fade-out {
  opacity: 0;
}

.fb-actions {
  z-index: 1;
  display: flex;
  gap: var(--space-3);
  width: 100%;
  justify-content: center;
}

.fb-actions .btn {
  padding: var(--space-3) var(--space-5);
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  flex: 1;
  justify-content: center;
}

.fb-success-box {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: fbScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

@keyframes fbScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fb-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.1);
  border: 2px solid rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  font-size: 36px;
  margin-bottom: var(--space-4);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.2);
}

.fb-success-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-1);
}

.fb-success-desc {
  font-size: 13.5px;
  color: #94a3b8;
  margin-bottom: var(--space-5);
  line-height: 1.6;
}

.fb-xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(168, 85, 247, 0.15));
  border: 1px solid rgba(234, 179, 8, 0.3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  color: #fef08a;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: var(--space-6);
  animation: fbPulseBorder 2s infinite;
}

@keyframes fbPulseBorder {

  0%,
  100% {
    border-color: rgba(234, 179, 8, 0.3);
    box-shadow: none;
  }

  50% {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
  }
}

.fb-sound-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s;
  z-index: 2;
}

.fb-sound-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

html.ltr .fb-sound-toggle {
  right: auto;
  left: 16px;
}

/* ========================================
   Advanced Gamification Elements
   ======================================== */

.fb-slice-box {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 1;
}

.fb-slice-title {
  font-size: 13px;
  font-weight: 700;
  color: #818cf8;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 6px;
}

html.ltr .fb-slice-title {
  text-align: left;
}

.fb-slice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.fb-slice-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(81, 69, 220, 0.2);
}

.fb-slice-item.checked {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.3);
}

.fb-slice-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  color: transparent;
}

.fb-slice-item.checked .fb-slice-checkbox {
  border-color: #34d399;
  background: #34d399;
  color: #000;
}

.fb-slice-text {
  font-size: 12.5px;
  color: #e2e8f0;
  font-weight: 500;
  text-align: right;
  flex: 1;
}

html.ltr .fb-slice-text {
  text-align: left;
}

.fb-slice-item.checked .fb-slice-text {
  text-decoration: line-through;
  color: #94a3b8;
}

.healthy-break-overlay {
  position: fixed;
  inset: 0;
  z-index: 11050;
  background: rgba(10, 20, 15, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  font-family: 'Cairo', sans-serif;
  color: #f1f5f9;
}

.healthy-break-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.hb-card {
  width: 90%;
  max-width: 460px;
  background: linear-gradient(135deg, rgba(15, 30, 20, 0.7), rgba(5, 15, 10, 0.9));
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 24px;
  padding: var(--space-6) var(--space-6) var(--space-8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(52, 211, 153, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.healthy-break-overlay.open .hb-card {
  transform: scale(1);
}

.hb-glow {
  position: absolute;
  top: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, rgba(52, 211, 153, 0) 70%);
  z-index: 0;
  pointer-events: none;
}

.hb-header {
  z-index: 1;
  margin-bottom: var(--space-5);
}

.hb-header h2 {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #34d399;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.4);
}

.hb-header p {
  font-size: 13px;
  color: #a7f3d0;
  margin-top: 4px;
}

.hb-timer-box {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: var(--space-6);
  z-index: 1;
}

.hb-timer-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hb-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 6;
}

.hb-circle-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke: #34d399;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.6));
  transition: stroke-dashoffset 1s linear;
}

.hb-timer-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hb-time-display {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hb-checklist {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  z-index: 1;
}

.hb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.hb-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(52, 211, 153, 0.2);
}

.hb-item.checked {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.3);
}

.hb-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  color: transparent;
}

.hb-item.checked .hb-checkbox {
  border-color: #34d399;
  background: #34d399;
  color: #000;
}

.hb-text {
  font-size: 13px;
  color: #e2e8f0;
  font-weight: 500;
  text-align: right;
  flex: 1;
}

html.ltr .hb-text {
  text-align: left;
}

.hb-item.checked .hb-text {
  text-decoration: line-through;
  color: #94a3b8;
}

.hb-item-xp {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  padding: 2px 6px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Admin Site Settings Responsive Scrollable Tabs Wrapper (with edge gradients like day-strip) */
.admin-tabs-wrapper {
  margin-bottom: 24px;
  position: relative;
  display: grid;
}

.admin-tabs-wrapper::before,
.admin-tabs-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
}

.admin-tabs-wrapper::before {
  right: 0;
  background: linear-gradient(to left, var(--clr-bg-base), transparent);
}

.admin-tabs-wrapper::after {
  left: 0;
  background: linear-gradient(to right, var(--clr-bg-base), transparent);
}

.admin-tabs-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  direction: ltr;
  flex-direction: row-reverse;
  max-width: 100%;
  width: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.admin-tabs-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.admin-settings-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

html.light .admin-tabs-container {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ─── Responsive visibility utility classes ─── */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 900px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* Coupon form styling on mobile - 2-column layout */
  .coupon-create-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .coupon-create-form .btn {
    grid-column: span 2 !important;
    width: 100% !important;
  }

  /* Perm Toggles & Inputs formatting on mobile */
  .perm-mobile-role-row {
    font-family: var(--font-numbers);
  }

  /* Premium Admin Mobile Cards */
  .admin-mobile-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-lg, 12px) !important;
    padding: var(--space-4, 16px) !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    transition: all var(--transition-fast, 0.2s) ease-in-out;
  }

  .admin-mobile-card:hover,
  .admin-mobile-card:active {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(81, 69, 220, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(81, 69, 220, 0.1);
  }

  .admin-mob-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .admin-mob-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--clr-text, #fff);
  }

  .admin-mob-card-subtitle {
    font-size: 0.85rem;
    color: var(--clr-text-muted, #94a3b8);
    word-break: break-all;
  }

  .admin-mob-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3, 12px);
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: var(--space-3, 12px);
  }

  .admin-mob-card-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .admin-mob-card-label {
    color: var(--clr-text-dim, #64748b);
    font-size: 0.72rem;
    font-weight: 500;
  }

  .admin-mob-card-value {
    color: var(--clr-text, #fff);
    font-weight: 700;
  }

  .admin-mob-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
    padding-top: var(--space-3, 12px);
    margin-top: 4px;
    font-size: 0.8rem;
    gap: 8px;
  }

  .admin-mob-card-actions {
    display: flex;
    gap: 6px;
    margin-inline-start: auto;
  }
}

/* Final premium modal overrides must stay at the end of the file. */
#task-modal .premium-form-modal,
#habit-modal .premium-form-modal,
#meeting-modal .premium-form-modal,
#annual-plan-modal .premium-form-modal,
#wallet-add-modal .premium-form-modal {
  background:
    radial-gradient(circle at 16% 12%, rgba(81, 69, 220, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)) !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  border-radius: 28px !important;
  box-shadow:
    0 26px 80px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset !important;
}

html:not(.light) #task-modal .premium-form-modal,
html:not(.light) #habit-modal .premium-form-modal,
html:not(.light) #meeting-modal .premium-form-modal,
html:not(.light) #annual-plan-modal .premium-form-modal,
html:not(.light) #wallet-add-modal .premium-form-modal {
  background:
    radial-gradient(circle at 16% 12%, rgba(81, 69, 220, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(30, 27, 48, 0.98), rgba(15, 23, 42, 0.96)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

@media (max-width: 900px) {

  #task-modal.mobile-fs .premium-form-modal,
  #meeting-modal.mobile-fs .premium-form-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 640px) {

  #habit-modal .premium-form-modal,
  #annual-plan-modal .premium-form-modal,
  #wallet-add-modal .premium-form-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 26px 26px 0 0 !important;
  }
}

/* Wallet monthly card redesign */
.wallet-finance-card {
  --wallet-income: #16a34a;
  --wallet-expense: #f43f5e;
  --wallet-sadaqah: #5145dc;
  --wallet-remaining: #2385f6;
  position: relative !important;
  min-height: 360px;
  padding: 42px 42px 34px !important;
  margin-bottom: 32px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(81, 69, 220, 0.13), transparent 24%),
    radial-gradient(circle at 28% 42%, rgba(81, 69, 220, 0.06) 0 1.5px, transparent 1.8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
  background-size: auto, 18px 18px, auto !important;
  box-shadow:
    0 22px 70px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.wallet-finance-card .card-glow-bg {
  position: absolute;
  top: 64px;
  left: 50%;
  right: auto;
  width: 440px;
  height: 260px;
  background:
    radial-gradient(circle, rgba(81, 69, 220, 0.1), transparent 62%),
    radial-gradient(circle, rgba(255, 255, 255, 0.64), transparent 66%);
  filter: none;
  opacity: 1;
  z-index: 0;
}

.wallet-finance-head,
.card-hero-section,
.wallet-finance-metrics-grid,
.card-action-container {
  position: relative;
  z-index: 3;
}

.wallet-finance-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 22px !important;
  color: #5145dc !important;
  background:
    radial-gradient(circle at 72% 18%, rgba(129, 140, 248, 0.34), transparent 42%),
    rgba(81, 69, 220, 0.1) !important;
  box-shadow: 0 16px 34px rgba(81, 69, 220, 0.1) !important;
}

.wallet-finance-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 16px;
}

.wallet-finance-month {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #73809a !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}


.card-hero-section {
  min-height: 210px;
  padding: 20px 0 28px !important;
  margin-bottom: 22px !important;
  border-bottom: 0 !important;
}

.hero-balance-label {
  color: #697692 !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  letter-spacing: 0 !important;
}

.hero-balance-value {
  margin-bottom: 12px !important;
  gap: 16px !important;
  color: #5145dc !important;
  text-shadow: 0 16px 34px rgba(81, 69, 220, 0.18) !important;
}

.hero-balance-value.negative .balance-num {
  color: var(--wallet-expense);
}


.card-spending-progress {
  max-width: 220px !important;
  gap: 8px !important;
  margin-top: 4px;
}

.card-spending-progress .progress-info {
  display: none !important;
}

.card-spending-progress .progress-bar-container {
  position: relative;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, rgba(81, 69, 220, 0.12), transparent) !important;
  overflow: visible !important;
}

.card-spending-progress .progress-bar-container::before,
.card-spending-progress .progress-bar-container::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #8b5cf6;
  transform: translateY(-50%);
}

.card-spending-progress .progress-bar-container::before {
  left: 30%;
}

.card-spending-progress .progress-bar-container::after {
  right: 30%;
}

.card-spending-progress .progress-bar-fill {
  height: 4px !important;
  min-width: 36px;
  max-width: 92px;
  margin-inline: auto;
  background: linear-gradient(90deg, #818cf8, #5145dc) !important;
  box-shadow: 0 0 18px rgba(81, 69, 220, 0.24);
}

.wallet-finance-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

.metric-box {
  position: relative;
  min-height: 154px;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 28px 30px 24px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[dir="rtl"] .metric-box {
  flex-direction: row-reverse !important;
}


.metric-box::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 52px;
  height: 4px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: currentColor;
}

.metric-box.income {
  color: var(--wallet-income);
}

.metric-box.expense {
  color: var(--wallet-expense);
}

.metric-box.sadaqah {
  color: var(--wallet-sadaqah);
}

.metric-box.remaining {
  color: var(--wallet-remaining);
}

.metric-icon-wrap {
  width: 78px !important;
  height: 78px !important;
  border-radius: 50% !important;
  color: currentColor !important;
  background: color-mix(in srgb, currentColor 10%, white) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, currentColor 14%, transparent) !important;
}

.metric-box.income .metric-icon-wrap {
  background: rgba(22, 163, 74, 0.1) !important;
}

.metric-box.expense .metric-icon-wrap {
  background: rgba(244, 63, 94, 0.1) !important;
}

.metric-box.sadaqah .metric-icon-wrap {
  background: rgba(81, 69, 220, 0.1) !important;
}

.metric-box.remaining .metric-icon-wrap {
  background: rgba(35, 133, 246, 0.1) !important;
}

.metric-info {
  position: relative;
  z-index: 1;
  gap: 10px !important;
}

.card-action-container {
  justify-content: flex-start !important;
  margin-top: 22px !important;
}

.wallet-finance-card .wallet-sadaqah-action {
  border-radius: 16px !important;
  background: var(--clr-primary-gradient) !important;
  box-shadow: 0 16px 34px rgba(81, 69, 220, 0.22) !important;
}

html:not(.light) .wallet-finance-card {
  background:
    radial-gradient(circle at 50% 34%, rgba(81, 69, 220, 0.18), transparent 24%),
    radial-gradient(circle at 28% 42%, rgba(81, 69, 220, 0.1) 0 1.5px, transparent 1.8px),
    linear-gradient(180deg, rgba(30, 27, 48, 0.96), rgba(15, 23, 42, 0.96)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34) !important;
}

html:not(.light) .wallet-finance-card::after {
  background:
    radial-gradient(ellipse at 22% 0%, rgba(81, 69, 220, 0.12), transparent 52%),
    radial-gradient(ellipse at 76% 4%, rgba(35, 133, 246, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.74));
}

html:not(.light) .wallet-finance-title,
html:not(.light) .metric-label,
html:not(.light) .metric-info strong small {
  color: var(--clr-text) !important;
}

html:not(.light) .wallet-finance-month,
html:not(.light) .hero-balance-label,
html:not(.light) .balance-curr,
html:not(.light) .metric-sub {
  color: var(--clr-text-muted) !important;
}

html:not(.light) .metric-box {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html:not(.light) .metric-icon-wrap {
  background: color-mix(in srgb, currentColor 18%, transparent) !important;
}

@media (max-width: 1100px) {
  .wallet-finance-card {
    padding: 34px 26px 28px !important;
  }

  .wallet-finance-metrics-grid {
    gap: 16px !important;
  }

  .metric-box {
    padding: 22px 20px 24px !important;
    gap: 16px !important;
  }

  .metric-icon-wrap {
    width: 62px !important;
    height: 62px !important;
  }
}

@media (max-width: 768px) {
  .wallet-finance-card {
    min-height: auto;
    padding: 28px 18px 22px !important;
    border-radius: 22px !important;
  }

  .wallet-finance-card::after {
    top: 38%;
  }

  .wallet-finance-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .wallet-finance-title {
    justify-content: space-between !important;
  }

  .wallet-finance-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
  }

  .wallet-finance-meta {
    justify-content: flex-start;
    padding-top: 0;
  }

  .card-hero-section {
    min-height: 180px;
  }

  .hero-balance-value .balance-num {
    font-size: clamp(54px, 15vw, 78px);
  }

  .wallet-finance-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .metric-box {
    min-height: 136px;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 20px 18px 24px !important;
  }

  .metric-icon-wrap {
    width: 54px !important;
    height: 54px !important;
  }
}

@media (max-width: 480px) {
  .wallet-finance-card {
    padding: 24px 14px 18px !important;
  }

  .wallet-finance-title {
    font-size: 22px !important;
  }

  .wallet-finance-status-badge,
  .wallet-finance-month {
    font-size: 13px !important;
  }

  .wallet-finance-metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .metric-box {
    min-height: 118px;
    flex-direction: row;
  }

  .metric-box::after {
    bottom: 14px;
  }

  .wallet-finance-card .wallet-sadaqah-action {
    width: 100% !important;
  }
}

/* First-run setup */
.first-run-setup-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.first-run-setup-card {
  width: min(680px, 100%);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.first-run-setup-icon {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

.first-run-goals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 18px;
}

.first-run-goal {
  position: relative;
  min-height: 92px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.first-run-goal input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.first-run-goal span {
  color: var(--clr-primary);
  display: inline-flex;
}

.first-run-goal b {
  color: var(--clr-text);
  font-size: 12px;
  line-height: 1.4;
}

.first-run-goal.active,
.first-run-goal:has(input:checked) {
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}

.first-run-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  text-align: start;
}

.first-run-fields .form-label:first-child,
.first-run-fields #first-run-day-start {
  grid-column: auto;
}

.first-run-fields label[for="first-run-task"],
.first-run-fields #first-run-task,
.first-run-fields label[for="first-run-habit"],
.first-run-fields #first-run-habit {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .first-run-goals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .first-run-setup-overlay {
    align-items: flex-end;
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
  }

  .first-run-setup-card {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 18px 14px 14px;
    border-radius: 22px 22px 14px 14px;
    text-align: center;
  }

  .first-run-setup-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 15px;
  }

  .first-run-setup-card h1 {
    margin-bottom: 6px;
    font-size: 1.18rem;
    line-height: 1.35;
  }

  .first-run-setup-card .notification-onboarding-lead {
    font-size: 0.84rem;
    line-height: 1.6;
  }

  .first-run-fields {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .first-run-fields .form-label {
    margin: 0;
    font-size: 0.78rem;
  }

  .first-run-fields .form-input {
    min-height: 42px;
    height: 42px;
    font-size: 16px;
  }

  .first-run-goals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 12px;
  }

  .first-run-goal {
    min-height: 64px;
    padding: 10px 8px;
    gap: 6px;
    border-radius: 12px;
  }

  .first-run-goal b {
    font-size: 11px;
  }

  .first-run-setup-card .notification-onboarding-note {
    margin: 12px 0;
    padding: 10px;
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .first-run-setup-card .notification-onboarding-actions {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    padding: 10px 0 2px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0),
        var(--clr-surface, #ffffff) 32%);
  }

  .first-run-setup-card .notification-onboarding-status {
    min-height: 16px;
    margin-top: 8px;
    font-size: 0.78rem;
  }
}

/* Fix desktop layout for Task and Habit modals containing form wrappers */
#task-modal .premium-form-modal>form,
#habit-modal .premium-form-modal>form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Ensure hidden form groups in wallet modal are actually hidden despite high specificity display rules */
#wallet-add-modal .premium-form-modal .form-group.hidden {
  display: none !important;
}

/* ──────────────────────────────────────
   Premium Redesigned Prayers Section
   ────────────────────────────────────── */
.worship-prayers-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-6, 24px);
  font-family: var(--font-arabic);
}

.prayer-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}

.prayer-header-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-text);
}

.prayer-header-location svg {
  color: var(--clr-primary);
  width: 18px;
  height: 18px;
}

.prayer-header-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  padding-right: 26px;
  /* Offset to align with text after icon */
}

html.ltr .prayer-header-dates {
  padding-right: 0;
  padding-left: 26px;
}

.prayer-header-hijri {
  display: flex;
  align-items: center;
  gap: 6px;
}

.prayer-header-hijri svg {
  color: var(--clr-primary-light);
  width: 14px;
  height: 14px;
}

/* Cards */
.prayer-dashboard-card,
.prayer-list-card {
  background: var(--clr-surface-2);
  border: var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

html.light .prayer-dashboard-card,
html.light .prayer-list-card {
  background: #ffffff;
  border: 1px solid rgba(81, 69, 220, 0.05);
  box-shadow: 0 10px 30px rgba(81, 69, 220, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Dashboard Layout */
.prayer-dashboard-card {
  display: flex;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  padding: var(--space-6) var(--space-8);
  gap: var(--space-6);
  flex-direction: row-reverse;
  justify-content: space-around;
}

.prayer-dashboard-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  border-right: 1px solid var(--line-color, rgba(255, 255, 255, 0.06));
  padding-right: var(--space-6);
}

html.ltr .prayer-dashboard-left {
  border-left: none;
  border-right: 1px solid var(--line-color, rgba(255, 255, 255, 0.06));
  padding-left: 0;
  padding-right: var(--space-6);
  align-items: flex-start;
}

html.light .prayer-dashboard-left {
  border-color: rgba(81, 69, 220, 0.08);
}

.prayer-next-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-primary-light);
}

.prayer-next-name {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.2;
}

.prayer-next-countdown {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-primary-light);
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

html.light .prayer-next-countdown {
  color: #5145dc;
}

.prayer-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--control-bg, rgba(255, 255, 255, 0.04));
  color: var(--clr-text);
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid var(--control-border, transparent);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

html.light .prayer-next-btn {
  background: #f8f8fc;
  border: 1px solid rgba(81, 69, 220, 0.08);
  color: #1e293b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.prayer-next-btn:hover {
  background: var(--clr-primary-subtle);
  color: var(--clr-primary-light);
}

.prayer-dashboard-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Circular Progress Ring */
.prayer-ring-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prayer-ring-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.prayer-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 6;
}

html.light .prayer-ring-bg {
  stroke: rgba(81, 69, 220, 0.04);
}

.prayer-ring-ticks {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 4;
  stroke-dasharray: 1 5;
}

html.light .prayer-ring-ticks {
  stroke: rgba(81, 69, 220, 0.08);
}

.prayer-ring-progress {
  fill: none;
  stroke: var(--clr-primary-light);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

html.light .prayer-ring-progress {
  stroke: var(--clr-primary);
}

.prayer-ring-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.prayer-ring-icon {
  font-size: 1.4rem;
  margin-bottom: 2px;
  color: var(--clr-primary-light);
}

.prayer-ring-time {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.prayer-ring-time .time-num {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
}

.prayer-ring-time .time-period {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}

.prayer-ring-label {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Prayers List Card */
.prayer-list-card {
  padding: var(--space-5) var(--space-6);
}

.prayer-list-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0;
  flex-wrap: wrap;
}

.prayer-list-row::-webkit-scrollbar {
  display: none;
}

.prayer-list-col {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 12px;
  border-radius: 20px;
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  scroll-snap-align: start;
}

.prayer-list-col:hover {
  background: rgba(255, 255, 255, 0.03);
}

html.light .prayer-list-col:hover {
  background: rgba(81, 69, 220, 0.03);
}

/* Highlight Active Prayer (like Dhuhr in mockup) */
.prayer-list-col.active-capsule {
  background: rgba(129, 140, 248, 0.08);
}

html.light .prayer-list-col.active-capsule {
  background: #f0effd;
}

.prayer-col-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-bottom: 12px;
}

.active-capsule .prayer-col-name {
  color: var(--clr-primary-light);
  font-weight: 700;
}

html.light .active-capsule .prayer-col-name {
  color: var(--clr-primary);
}

.prayer-col-icon {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: var(--clr-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.prayer-list-col:hover .prayer-col-icon {
  transform: scale(1.15);
}

.active-capsule .prayer-col-icon {
  color: var(--clr-primary-light);
}

html.light .active-capsule .prayer-col-icon {
  color: var(--clr-primary);
}

.prayer-col-time {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 12px;
  direction: ltr;
}

.active-capsule .prayer-col-time {
  color: var(--clr-primary-light);
}

html.light .active-capsule .prayer-col-time {
  color: var(--clr-primary);
}

/* Speaker Buttons */
.prayer-speaker-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-text-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
}

html.light .prayer-speaker-btn {
  border: 1px solid rgba(81, 69, 220, 0.08);
  background: #f8f8fc;
  color: #94a3b8;
}

.prayer-speaker-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-text);
  border-color: rgba(255, 255, 255, 0.15);
}

html.light .prayer-speaker-btn:hover {
  background: #f1f5f9;
  color: #475569;
}

/* Active Capsule Speaker Button (Solid Blue) */
.active-capsule .prayer-speaker-btn {
  background: var(--clr-primary-light);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(129, 140, 248, 0.25);
}

html.light .active-capsule .prayer-speaker-btn {
  background: var(--clr-primary);
  color: white;
  box-shadow: 0 4px 10px rgba(81, 69, 220, 0.25);
}

.active-capsule .prayer-speaker-btn:hover {
  transform: scale(1.05);
}

/* Muted Speaker State */
.prayer-speaker-btn.muted {
  color: var(--clr-danger) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  box-shadow: none !important;
}

/* Checked/Prayed status badge */
.prayer-prayed-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-success);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.25);
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.ltr .prayer-prayed-dot {
  right: auto;
  left: 6px;
}

/* Slider indicator dots */
.prayer-slider-indicators {
  display: none;
  /* Hide by default, show on mobile if scrollable */
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.prayer-slider-dot {
  width: 12px;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  transition: all var(--transition-fast);
}

html.light .prayer-slider-dot {
  background: rgba(81, 69, 220, 0.1);
}

.prayer-slider-dot.active {
  width: 24px;
  background: var(--clr-primary-light);
}

html.light .prayer-slider-dot.active {
  background: var(--clr-primary);
}

/* Responsive Grid for Computers */
@media (min-width: 992px) {
  .worship-prayers-container {
    display: grid;
    grid-template-columns: 4.5fr 7.5fr;
    gap: 24px;
    align-items: stretch;
  }

  .prayer-dashboard-card {
    grid-template-columns: 1fr 1.1fr;
    height: 100%;
    padding: var(--space-6) var(--space-6);
  }

  .prayer-list-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .prayer-list-row {
    gap: var(--space-2);
  }
}

@media (max-width: 991px) {
  .worship-prayers-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .prayer-dashboard-card {
    grid-template-columns: 1.1fr 0.9fr;
    padding: var(--space-5) var(--space-6);
  }
}

@media (max-width: 576px) {
  .prayer-dashboard-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
    padding: var(--space-6) var(--space-4);
  }

  html.ltr .prayer-dashboard-left {
    border-right: none;
    padding-right: 0;
    align-items: center;
  }

  .prayer-slider-indicators {
    display: flex;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Card surface recovery
   Keeps shared boxes visible after global CSS variable changes. */
:root {
  --card-surface-bg: linear-gradient(145deg, rgba(26, 32, 44, 0.92), rgba(19, 25, 36, 0.88));
  --card-surface-border: 1px solid rgba(255, 255, 255, 0.08);
  --card-surface-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

html.light {
  --card-surface-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  --card-surface-border: 1px solid rgba(15, 23, 42, 0.08);
  --card-surface-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.glass-card,
.payment-card,
.sub-plan-card,
.bank-info-card,
.admin-stat-card,
.admin-chart-wrap,
.admin-table-wrap,
.wallet-summary-card,
.debt-summary-card,
.debt-card,
.launcher-card,
.more-user-profile,
.tickets-list-pane,
.chat-pane,
.push-status-panel,
.quick-reminder-dialog {
  background: var(--card-surface-bg);
  border: var(--card-surface-border);
  box-shadow: var(--card-surface-shadow);
}

.payment-card,
.sub-plan-card,
.bank-info-card,
.admin-stat-card,
.admin-chart-wrap,
.admin-table-wrap,
.wallet-summary-card,
.debt-summary-card,
.launcher-card,
.more-user-profile,
.tickets-list-pane,
.chat-pane,
.quick-reminder-dialog {
  background: var(--card-surface-bg) !important;
  border: var(--card-surface-border) !important;
}

.glass-card.hoverable:hover,
.payment-card:hover,
.sub-plan-card:hover,
.admin-stat-card:hover,
.launcher-card:hover {
  border-color: rgba(81, 69, 220, 0.24);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* Responsive table support inside company modules */

/* ─── Company business hub ─────────────────────────────────────────── */
.company-hub {
  --company-panel: linear-gradient(145deg, rgba(22, 29, 43, 0.88), rgba(14, 19, 29, 0.94));
  --company-panel-solid: #141b28;
  --company-line: rgba(255, 255, 255, 0.08);
  --company-line-strong: rgba(255, 255, 255, 0.13);
  --company-soft-text: var(--clr-text-muted, #94a3b8);
  color: var(--clr-text, #f1f5f9);
  font-family: var(--font-arabic, 'Cairo', sans-serif);
  padding: 8px 0 32px;
}

html.light .company-hub {
  --company-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
  --company-panel-solid: #ffffff;
  --company-line: rgba(15, 23, 42, 0.08);
  --company-line-strong: rgba(15, 23, 42, 0.13);
}

.company-hub button,
.company-hub input,
.company-hub select {
  font: inherit;
}

.company-hub-hero {
  position: relative;
  isolation: isolate;
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(28px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(129, 140, 248, 0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, rgba(99, 102, 241, 0.22), transparent 33%),
    radial-gradient(circle at 88% 85%, rgba(6, 182, 212, 0.13), transparent 29%),
    linear-gradient(135deg, rgba(31, 41, 70, 0.97), rgba(14, 20, 32, 0.98));
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.28);
}

html.light .company-hub-hero {
  border-color: rgba(81, 69, 220, 0.16);
  background:
    radial-gradient(circle at 12% 12%, rgba(99, 102, 241, 0.13), transparent 34%),
    radial-gradient(circle at 88% 85%, rgba(6, 182, 212, 0.1), transparent 30%),
    linear-gradient(135deg, #ffffff, #f4f6ff 62%, #f1f8fb);
  box-shadow: 0 22px 55px rgba(30, 41, 59, 0.1);
}

.company-hub-hero::before,
.company-hub-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(165, 180, 252, 0.11);
}

.company-hub-hero::before {
  width: 360px;
  height: 360px;
  inset-inline-end: -112px;
  top: -155px;
}

.company-hub-hero::after {
  width: 210px;
  height: 210px;
  inset-inline-end: 10px;
  bottom: -122px;
}

.company-hub-hero-glow {
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  inset-inline-start: 34%;
  bottom: -140px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.28);
  filter: blur(65px);
}

.company-hub-hero-copy {
  max-width: 780px;
}

.company-hub-eyebrow,
.company-hub-meta,
.company-hub-actions,
.company-hub-section-note,
.company-space-main,
.company-space-link,
.company-settings-intro,
.company-settings-save,
.company-metric-card,
.company-insight-heading {
  display: flex;
  align-items: center;
}

.company-hub-eyebrow {
  width: fit-content;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 12px;
  color: #c7d2fe;
  border: 1px solid rgba(165, 180, 252, 0.18);
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

html.light .company-hub-eyebrow {
  color: #4338ca;
  border-color: rgba(79, 70, 229, 0.15);
  background: rgba(79, 70, 229, 0.07);
}

.company-hub-hero h1 {
  max-width: 760px;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(1.65rem, 3.2vw, 2.65rem);
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: -0.035em;
}

html.light .company-hub-hero h1 {
  color: #172033;
}

.company-hub-hero-copy>p {
  max-width: 680px;
  margin: 0 0 20px;
  color: #aab5c7;
  font-size: 0.96rem;
  line-height: 1.9;
}

html.light .company-hub-hero-copy>p {
  color: #637086;
}

.company-hub-meta {
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
}

.company-hub-meta>span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  color: #c5cedc;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.76rem;
  font-weight: 700;
}

.company-hub-meta>span.is-success {
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.09);
}

.company-hub-meta>span.is-danger {
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.22);
  background: rgba(244, 63, 94, 0.09);
}

html.light .company-hub-meta>span {
  color: #4b5870;
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.65);
}

html.light .company-hub-meta>span.is-success {
  color: #047857;
}

html.light .company-hub-meta>span.is-danger {
  color: #be123c;
}

.company-hub-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.company-hero-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.company-hero-action:hover {
  transform: translateY(-2px);
}

.company-hero-action--primary {
  color: #ffffff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #5b52e9, #766cf4);
  box-shadow: 0 10px 25px rgba(81, 69, 220, 0.28);
}

.company-hero-action--ghost {
  color: #d6dbea;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

html.light .company-hero-action--ghost {
  color: #364152;
  border-color: rgba(15, 23, 42, 0.11);
  background: rgba(255, 255, 255, 0.72);
}

.company-hub-hero-mark {
  position: relative;
  width: 244px;
  height: 244px;
  display: grid;
  place-items: center;
  justify-self: center;
}

.company-hub-mark-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(165, 180, 252, 0.2);
}

.company-hub-mark-ring--outer {
  inset: 0;
  border-style: dashed;
  animation: companyHubSpin 32s linear infinite;
}

.company-hub-mark-ring--inner {
  inset: 28px;
  border-color: rgba(34, 211, 238, 0.22);
}

.company-hub-monogram {
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.92), rgba(67, 56, 202, 0.72));
  box-shadow: 0 24px 45px rgba(30, 27, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: 3.3rem;
  font-weight: 900;
  transform: rotate(-6deg);
}

.company-hub-mark-chip {
  position: absolute;
  inset-inline-start: -7px;
  bottom: 24px;
  padding: 8px 12px;
  color: #dbe4f3;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(16, 23, 38, 0.82);
  box-shadow: 0 12px 25px rgba(2, 6, 23, 0.2);
  backdrop-filter: blur(12px);
  font-size: 0.75rem;
  font-weight: 800;
}

html.light .company-hub-mark-chip {
  color: #334155;
  border-color: rgba(15, 23, 42, 0.09);
  background: rgba(255, 255, 255, 0.85);
}

@keyframes companyHubSpin {
  to {
    transform: rotate(360deg);
  }
}

.company-hub-section {
  margin-top: clamp(28px, 4vw, 42px);
}

.company-hub-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.company-hub-section-kicker,
.company-space-kicker {
  display: block;
  color: var(--clr-primary-light, #818cf8);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.company-hub-section-heading h2,
.company-settings-intro h2 {
  margin: 4px 0 0;
  color: var(--clr-text, #f1f5f9);
  font-size: clamp(1.22rem, 2vw, 1.52rem);
  font-weight: 900;
  line-height: 1.35;
}

.company-hub-section-note {
  flex-shrink: 0;
  gap: 6px;
  color: var(--company-soft-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.company-stats-loading,
.company-stats-error {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  color: var(--company-soft-text);
  border: 1px solid var(--company-line);
  border-radius: 20px;
  background: var(--company-panel);
  font-size: 0.85rem;
  font-weight: 700;
}

.company-stats-error {
  color: var(--clr-danger, #ef4444);
}

.company-stats-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(129, 140, 248, 0.18);
  border-top-color: var(--clr-primary-light, #818cf8);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.company-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.company-metric-card {
  position: relative;
  min-width: 0;
  gap: 13px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--company-line);
  border-radius: 18px;
  background: var(--company-panel);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}

.company-metric-card::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  inset-inline-end: -35px;
  top: -35px;
  border-radius: 50%;
  background: var(--tone-soft);
  filter: blur(3px);
}

.company-metric-icon,
.company-insight-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--tone);
  background: var(--tone-soft);
}

.company-metric-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.company-metric-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.company-metric-copy>span {
  overflow: hidden;
  color: var(--company-soft-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-metric-copy strong {
  color: var(--clr-text, #f1f5f9);
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  font-weight: 900;
  line-height: 1.3;
}

.company-metric-copy small {
  color: var(--tone);
  font-size: 0.62rem;
  font-weight: 900;
}

.company-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.company-insight-card {
  padding: 18px 20px;
  border: 1px solid var(--company-line);
  border-radius: 18px;
  background: var(--company-panel);
}

.company-insight-heading {
  gap: 11px;
  margin-bottom: 15px;
}

.company-insight-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.company-insight-heading>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-insight-heading strong {
  color: var(--clr-text, #f1f5f9);
  font-size: 0.87rem;
  font-weight: 900;
}

.company-insight-heading span:not(.company-insight-icon) {
  color: var(--company-soft-text);
  font-size: 0.68rem;
}

.company-insight-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.company-insight-rows>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}

html.light .company-insight-rows>div {
  background: rgba(15, 23, 42, 0.035);
}

.company-insight-rows span {
  color: var(--company-soft-text);
  font-size: 0.7rem;
  line-height: 1.45;
}

.company-insight-rows strong {
  color: var(--clr-text, #f1f5f9);
  font-size: 0.93rem;
  font-weight: 900;
}

.company-spaces-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.company-space-card {
  --tone: #818cf8;
  --tone-soft: rgba(129, 140, 248, 0.12);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--company-line);
  border-radius: 22px;
  background: var(--company-panel);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.09);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.company-space-card::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  inset-inline-end: -90px;
  top: -100px;
  border-radius: 50%;
  background: var(--tone-soft);
  filter: blur(10px);
  pointer-events: none;
}

.company-space-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone) 35%, transparent);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.15);
}

.company-space-card--featured {
  background:
    linear-gradient(145deg, var(--tone-soft), transparent 42%),
    var(--company-panel);
}

.company-space-main {
  width: 100%;
  min-width: 0;
  gap: 14px;
  padding: 20px 20px 17px;
  color: inherit;
  text-align: start;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.company-space-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
  border-radius: 17px;
  background: var(--tone-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.company-space-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.company-space-kicker {
  margin-bottom: 3px;
  color: var(--tone);
  letter-spacing: 0.04em;
}

.company-space-copy strong {
  color: var(--clr-text, #f1f5f9);
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.45;
}

.company-space-copy>span:last-child {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: var(--company-soft-text);
  font-size: 0.75rem;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.company-space-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--tone);
  border-radius: 50%;
  background: var(--tone-soft);
  transition: transform 180ms ease;
}

.company-space-main:hover .company-space-arrow {
  transform: translateX(-3px);
}

html.ltr .company-space-main:hover .company-space-arrow {
  transform: translateX(3px);
}

.company-space-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px 16px;
  border-top: 1px solid var(--company-line);
  background: rgba(255, 255, 255, 0.018);
}

html.light .company-space-footer {
  background: rgba(15, 23, 42, 0.018);
}

.company-space-links {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.company-space-link {
  gap: 6px;
  padding: 6px 9px;
  color: var(--company-soft-text);
  border: 1px solid var(--company-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

html.light .company-space-link {
  background: rgba(255, 255, 255, 0.72);
}

.company-space-link:hover {
  color: var(--tone);
  border-color: color-mix(in srgb, var(--tone) 30%, transparent);
  background: var(--tone-soft);
}

.company-space-link>svg {
  display: none;
}

.company-space-link-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 3px var(--tone-soft);
}

.company-space-count {
  flex: 0 0 auto;
  padding-bottom: 5px;
  color: var(--company-soft-text);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.company-space-card[data-tone="violet"],
.company-metric-card[data-tone="violet"],
.company-insight-icon[data-tone="violet"] {
  --tone: #8b83ff;
  --tone-soft: rgba(129, 119, 255, 0.12);
}

.company-space-card[data-tone="cyan"],
.company-metric-card[data-tone="cyan"],
.company-insight-icon[data-tone="cyan"] {
  --tone: #22d3ee;
  --tone-soft: rgba(34, 211, 238, 0.11);
}

.company-space-card[data-tone="emerald"],
.company-metric-card[data-tone="emerald"],
.company-insight-icon[data-tone="emerald"] {
  --tone: #34d399;
  --tone-soft: rgba(52, 211, 153, 0.11);
}

.company-space-card[data-tone="amber"],
.company-metric-card[data-tone="amber"],
.company-insight-icon[data-tone="amber"] {
  --tone: #fbbf24;
  --tone-soft: rgba(251, 191, 36, 0.12);
}

.company-space-card[data-tone="rose"],
.company-metric-card[data-tone="rose"],
.company-insight-icon[data-tone="rose"] {
  --tone: #fb7185;
  --tone-soft: rgba(251, 113, 133, 0.11);
}

.company-space-card[data-tone="slate"],
.company-metric-card[data-tone="slate"],
.company-insight-icon[data-tone="slate"] {
  --tone: #a7b4c8;
  --tone-soft: rgba(167, 180, 200, 0.11);
}

.company-settings-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 26px;
  margin-top: clamp(28px, 4vw, 42px);
  padding: 24px;
  border: 1px solid var(--company-line);
  border-radius: 22px;
  background: var(--company-panel);
}

.company-settings-intro {
  gap: 13px;
}

.company-settings-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #a5b4fc;
  border-radius: 15px;
  background: rgba(99, 102, 241, 0.12);
}

.company-settings-intro h2 {
  font-size: 1.05rem;
}

.company-settings-intro p {
  margin: 4px 0 0;
  color: var(--company-soft-text);
  font-size: 0.7rem;
  line-height: 1.6;
}

.company-settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.company-settings-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--company-soft-text);
  font-size: 0.69rem;
  font-weight: 800;
}

.company-settings-field input,
.company-settings-field select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: var(--clr-text, #f1f5f9);
  border: 1px solid var(--company-line);
  outline: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

html.light .company-settings-field input,
html.light .company-settings-field select {
  background: #ffffff;
}

.company-settings-field input:focus,
.company-settings-field select:focus {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.11);
}

.company-settings-save {
  height: 44px;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  color: #ffffff;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #5145dc, #7167ee);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.company-hub button:focus-visible,
.company-hub input:focus-visible,
.company-hub select:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.35);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .company-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-settings-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .company-hub-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .company-hub-hero-mark {
    display: none;
  }

  .company-spaces-grid,
  .company-insights-grid {
    grid-template-columns: 1fr;
  }

  .company-settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-settings-save {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .company-hub {
    padding-top: 0;
  }

  .company-hub-hero {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .company-hub-hero h1 {
    font-size: 1.55rem;
    letter-spacing: -0.02em;
  }

  .company-hub-hero-copy>p {
    font-size: 0.86rem;
    line-height: 1.75;
  }

  .company-hub-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .company-metrics-grid {
    grid-template-columns: 1fr;
  }

  .company-insight-rows {
    grid-template-columns: 1fr;
  }

  .company-space-main {
    align-items: flex-start;
    padding: 17px 16px 14px;
  }

  .company-space-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .company-space-copy>span:last-child {
    -webkit-line-clamp: 3;
  }

  .company-space-arrow {
    display: none;
  }

  .company-space-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 16px 15px;
  }

  .company-space-count {
    padding: 0;
  }

  .company-settings-card {
    padding: 18px;
    border-radius: 18px;
  }

  .company-settings-form {
    grid-template-columns: 1fr;
  }

  .company-settings-save {
    grid-column: auto;
  }
}

/* Company mobile/compact workspace directory */
.company-more-hub {
  --more-panel: linear-gradient(145deg, rgba(22, 29, 43, 0.9), rgba(14, 19, 29, 0.96));
  --more-line: rgba(255, 255, 255, 0.08);
  --more-muted: var(--clr-text-muted, #94a3b8);
  min-height: 100%;
  padding: 10px 0 28px;
  color: var(--clr-text, #f1f5f9);
  font-family: var(--font-arabic, 'Cairo', sans-serif);
}

html.light .company-more-hub {
  --more-panel: linear-gradient(145deg, #ffffff, #f8faff);
  --more-line: rgba(15, 23, 42, 0.08);
}

.company-more-hub button {
  font: inherit;
}

.company-more-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 22px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%, rgba(99, 102, 241, 0.2), transparent 34%),
    var(--more-panel);
}

.company-more-hero-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #a5b4fc;
  border-radius: 16px;
  background: rgba(99, 102, 241, 0.13);
}

.company-more-eyebrow {
  color: var(--clr-primary-light, #818cf8);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.company-more-hero h1 {
  margin: 3px 0 4px;
  color: var(--clr-text, #f1f5f9);
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.45;
}

.company-more-hero p {
  margin: 0;
  color: var(--more-muted);
  font-size: 0.74rem;
  line-height: 1.65;
}

.company-more-total {
  padding: 7px 10px;
  color: #a5b4fc;
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-more-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-more-workspace {
  --tone: #818cf8;
  --tone-soft: rgba(129, 140, 248, 0.12);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--more-line);
  border-radius: 19px;
  background: var(--more-panel);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

.company-more-workspace-head {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: inherit;
  text-align: start;
  border: 0;
  background: linear-gradient(145deg, var(--tone-soft), transparent 48%);
  cursor: pointer;
}

.company-more-workspace-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 20%, transparent);
  border-radius: 14px;
  background: var(--tone-soft);
}

.company-more-workspace-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.company-more-workspace-copy>span {
  color: var(--tone);
  font-size: 0.59rem;
  font-weight: 900;
}

.company-more-workspace-copy strong {
  margin-top: 1px;
  color: var(--clr-text, #f1f5f9);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.45;
}

.company-more-workspace-copy small {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: var(--more-muted);
  font-size: 0.64rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.company-more-workspace-arrow {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--tone);
  border-radius: 50%;
  background: var(--tone-soft);
}

.company-more-services {
  padding: 11px 15px 14px;
  border-top: 1px solid var(--more-line);
}

.company-more-services-label {
  display: block;
  margin-bottom: 8px;
  color: var(--more-muted);
  font-size: 0.59rem;
  font-weight: 800;
}

.company-more-services>div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.company-more-service {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  color: var(--more-muted);
  border: 1px solid var(--more-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.63rem;
  font-weight: 700;
  cursor: pointer;
}

html.light .company-more-service {
  background: rgba(255, 255, 255, 0.8);
}

.company-more-service:hover {
  color: var(--tone);
  border-color: color-mix(in srgb, var(--tone) 28%, transparent);
  background: var(--tone-soft);
}

.company-more-service>svg {
  display: none;
}

.company-more-service-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tone);
}

.company-more-workspace[data-tone="violet"] {
  --tone: #8b83ff;
  --tone-soft: rgba(129, 119, 255, 0.12);
}

.company-more-workspace[data-tone="cyan"] {
  --tone: #22d3ee;
  --tone-soft: rgba(34, 211, 238, 0.11);
}

.company-more-workspace[data-tone="emerald"] {
  --tone: #34d399;
  --tone-soft: rgba(52, 211, 153, 0.11);
}

.company-more-workspace[data-tone="amber"] {
  --tone: #fbbf24;
  --tone-soft: rgba(251, 191, 36, 0.12);
}

.company-more-workspace[data-tone="rose"] {
  --tone: #fb7185;
  --tone-soft: rgba(251, 113, 133, 0.11);
}

.company-more-workspace[data-tone="slate"] {
  --tone: #a7b4c8;
  --tone-soft: rgba(167, 180, 200, 0.11);
}

@media (max-width: 720px) {
  .company-more-hub {
    padding-top: 0;
  }

  .company-more-directory {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .company-more-hero {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    padding: 18px 16px;
  }

  .company-more-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .company-more-hero h1 {
    font-size: 1.02rem;
  }

  .company-more-total {
    display: none;
  }

  .company-more-workspace-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  #page-content table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  .company-more-card {
    padding: 16px !important;
  }
}

/* =========================================================
   Company messages workspace
   ========================================================= */
.company-chat-page {
  --chat-bg: #0b1020;
  --chat-panel: rgba(14, 20, 38, 0.94);
  --chat-panel-soft: rgba(20, 28, 49, 0.82);
  --chat-line: rgba(148, 163, 184, 0.12);
  --chat-line-strong: rgba(129, 140, 248, 0.22);
  --chat-text: #f8fafc;
  --chat-muted: #94a3b8;
  --chat-primary: #7067f0;
  --chat-primary-strong: #564bd8;
  --chat-primary-soft: rgba(112, 103, 240, 0.14);
  --chat-emerald: #34d399;
  --chat-emerald-soft: rgba(52, 211, 153, 0.12);
  width: 100%;
  height: calc(100dvh - var(--header-height, 72px) - 64px);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--chat-text);
  font-family: var(--font-main, 'Cairo', sans-serif);
}

html.light .company-chat-page {
  --chat-bg: #f2f5fb;
  --chat-panel: rgba(255, 255, 255, 0.97);
  --chat-panel-soft: #f8faff;
  --chat-line: rgba(15, 23, 42, 0.09);
  --chat-line-strong: rgba(79, 70, 229, 0.18);
  --chat-text: #172033;
  --chat-muted: #6b7890;
  --chat-primary: #5b50df;
  --chat-primary-strong: #4438c5;
  --chat-primary-soft: rgba(79, 70, 229, 0.09);
  --chat-emerald: #0f9f73;
  --chat-emerald-soft: rgba(16, 185, 129, 0.1);
}

.company-chat-page button,
.company-chat-page input {
  font: inherit;
}

.company-chat-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 4px;
}

.company-chat-title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
}

.company-chat-title-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 16px;
  background: linear-gradient(145deg, #7770f4 0%, #5145d1 72%);
  box-shadow: 0 12px 32px rgba(81, 69, 220, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.company-chat-eyebrow {
  display: block;
  margin-bottom: 1px;
  color: var(--chat-primary);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.company-chat-title-wrap h1 {
  margin: 0;
  color: var(--chat-text);
  font-size: clamp(1.1rem, 1.7vw, 1.42rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.company-chat-title-wrap p {
  margin: 2px 0 0;
  color: var(--chat-muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.company-chat-page-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.company-chat-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  color: var(--chat-text);
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  background: var(--chat-panel);
  box-shadow: 0 7px 20px rgba(2, 6, 23, 0.08);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.company-chat-action:hover {
  transform: translateY(-1px);
  border-color: var(--chat-line-strong);
  background: var(--chat-panel-soft);
}

.company-chat-action--icon {
  width: 40px;
  padding: 0;
  color: var(--chat-muted);
}

.company-chat-action--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #6f66ed, #5145d1);
  box-shadow: 0 10px 25px rgba(81, 69, 220, 0.23);
}

.company-chat-action--primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #7a72f2, #584bd8);
  box-shadow: 0 13px 30px rgba(81, 69, 220, 0.3);
}

.company-chat-action:focus-visible,
.company-chat-filter:focus-visible,
.chat-thread-item:focus-visible,
.company-chat-composer button:focus-visible,
.company-chat-header-btn:focus-visible,
.company-chat-welcome-action:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.28);
  outline-offset: 2px;
}

.company-chat-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--chat-line);
  border-radius: 25px;
  background: var(--chat-panel);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  isolation: isolate;
}

html.light .company-chat-shell {
  box-shadow: 0 22px 55px rgba(30, 41, 59, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.company-chat-sidebar {
  width: 350px;
  min-width: 310px;
  display: flex;
  flex-direction: column;
  background: var(--chat-panel);
  border-inline-end: 1px solid var(--chat-line);
}

.company-chat-sidebar-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 19px 13px;
}

.company-chat-sidebar-label {
  display: block;
  color: var(--chat-primary);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.035em;
}

.company-chat-sidebar-header h2 {
  margin: 1px 0 0;
  color: var(--chat-text);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.45;
}

.company-chat-total {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  color: var(--chat-primary);
  border: 1px solid var(--chat-line-strong);
  border-radius: 10px;
  background: var(--chat-primary-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.company-chat-search-wrap {
  position: relative;
  margin: 0 15px 12px;
}

.company-chat-search-icon {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  display: grid;
  color: var(--chat-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.company-chat-search-wrap input {
  width: 100%;
  height: 43px;
  padding: 0 39px 0 13px;
  color: var(--chat-text);
  caret-color: var(--chat-primary);
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  outline: none;
  background: var(--chat-panel-soft);
  font-size: 0.75rem;
  font-weight: 600;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

[dir="ltr"] .company-chat-search-wrap input {
  padding: 0 13px 0 39px;
}

.company-chat-search-wrap input::placeholder {
  color: var(--chat-muted);
  opacity: 0.78;
}

.company-chat-search-wrap input:focus {
  border-color: rgba(112, 103, 240, 0.48);
  background: var(--chat-panel);
  box-shadow: 0 0 0 3px rgba(112, 103, 240, 0.1);
}

.company-chat-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 15px 13px;
  border-bottom: 1px solid var(--chat-line);
}

.company-chat-filter {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  color: var(--chat-muted);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.company-chat-filter small {
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.1);
  font-size: 0.58rem;
  font-weight: 900;
}

.company-chat-filter:hover {
  color: var(--chat-text);
  background: var(--chat-panel-soft);
}

.company-chat-filter.active {
  color: var(--chat-primary);
  border-color: var(--chat-line-strong);
  background: var(--chat-primary-soft);
}

.company-chat-filter.active small {
  color: #fff;
  background: var(--chat-primary);
}

.company-chat-list {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.26) transparent;
}

.company-chat-list::-webkit-scrollbar,
.company-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.company-chat-list::-webkit-scrollbar-thumb,
.company-chat-messages::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.24);
}

.company-chat-loading,
.company-chat-list-state {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 24px 18px;
  color: var(--chat-muted);
  text-align: center;
}

.company-chat-list-state>span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--chat-primary);
  border: 1px solid var(--chat-line-strong);
  border-radius: 14px;
  background: var(--chat-primary-soft);
}

.company-chat-list-state strong {
  color: var(--chat-text);
  font-size: 0.8rem;
}

.company-chat-list-state small {
  max-width: 230px;
  font-size: 0.67rem;
  line-height: 1.7;
}

.company-chat-list-state--error>span,
.company-chat-list-state--error strong {
  color: #ef6d7a;
}

.company-chat-list-state--error>span {
  border-color: rgba(239, 109, 122, 0.2);
  background: rgba(239, 109, 122, 0.09);
}

.company-chat-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(148, 163, 184, 0.2);
  border-top-color: var(--chat-primary);
  border-radius: 50%;
  animation: company-chat-spin 750ms linear infinite;
}

@keyframes company-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

.chat-thread-item {
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 4px;
  padding: 10px 11px;
  color: var(--chat-text);
  border: 1px solid transparent;
  border-radius: 15px;
  outline: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.chat-thread-item:hover {
  background: var(--chat-panel-soft);
  transform: translateX(calc(var(--chat-hover-direction, -1) * 1px));
}

[dir="ltr"] .chat-thread-item {
  --chat-hover-direction: 1;
}

.chat-thread-item.active {
  border-color: var(--chat-line-strong);
  background: linear-gradient(110deg, var(--chat-primary-soft), rgba(112, 103, 240, 0.045));
}

.chat-thread-active-mark {
  position: absolute;
  inset-inline-end: -1px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 5px 0 0 5px;
  background: var(--chat-primary);
  box-shadow: 0 0 12px rgba(112, 103, 240, 0.48);
  opacity: 0;
  transform: scaleY(0.45);
  transition: opacity 160ms ease, transform 160ms ease;
}

.chat-thread-item.active .chat-thread-active-mark {
  opacity: 1;
  transform: scaleY(1);
}

.chat-thread-avatar,
.company-chat-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 14px;
  background: linear-gradient(145deg, #756df1, #5145d1);
  box-shadow: 0 8px 19px rgba(81, 69, 220, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-weight: 900;
}

.chat-thread-avatar {
  width: 45px;
  height: 45px;
  font-size: 0.78rem;
}

.chat-thread-avatar[data-type="group"],
.company-chat-avatar[data-type="group"] {
  background: linear-gradient(145deg, #2bcf9e, #0c9671);
  box-shadow: 0 8px 19px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chat-thread-copy {
  min-width: 0;
  flex: 1;
}

.chat-thread-heading,
.chat-thread-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-thread-heading {
  margin-bottom: 4px;
}

.chat-thread-heading h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--chat-text);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-heading time {
  flex: 0 0 auto;
  color: var(--chat-muted);
  font-size: 0.57rem;
  font-weight: 700;
  white-space: nowrap;
}

.chat-thread-preview>span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--chat-muted);
  font-size: 0.66rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-preview small {
  flex: 0 0 auto;
  padding: 2px 6px;
  color: var(--chat-primary);
  border-radius: 6px;
  background: var(--chat-primary-soft);
  font-size: 0.53rem;
  font-weight: 900;
}

.chat-thread-preview small[data-type="group"] {
  color: var(--chat-emerald);
  background: var(--chat-emerald-soft);
}

.company-chat-main {
  position: relative;
  min-width: 0;
  flex: 1;
  display: flex;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 15%, rgba(112, 103, 240, 0.1), transparent 25%),
    radial-gradient(circle at 18% 88%, rgba(52, 211, 153, 0.06), transparent 22%),
    var(--chat-bg);
}

.company-chat-main::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  background-image: radial-gradient(circle, currentColor 0.7px, transparent 0.8px);
  background-size: 24px 24px;
  content: '';
  color: var(--chat-muted);
  pointer-events: none;
}

.company-chat-welcome {
  width: min(480px, 82%);
  margin: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 34px;
  text-align: center;
}

.company-chat-welcome-art {
  position: relative;
  width: 150px;
  height: 132px;
  margin-bottom: 10px;
}

.company-chat-welcome-orbit {
  position: absolute;
  inset: 13px 19px 9px;
  border: 1px dashed rgba(129, 140, 248, 0.27);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.company-chat-welcome-bubble {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.company-chat-welcome-bubble--one {
  top: 8px;
  inset-inline-start: 22px;
  width: 76px;
  height: 68px;
  border-radius: 24px 24px 8px 24px;
  background: linear-gradient(145deg, #7b72f2, #5145d1);
  transform: rotate(-6deg);
}

.company-chat-welcome-bubble--two {
  inset-inline-end: 19px;
  bottom: 6px;
  width: 67px;
  height: 61px;
  border-radius: 20px 20px 20px 7px;
  background: linear-gradient(145deg, #31d6a4, #0b9872);
  transform: rotate(7deg);
}

.company-chat-welcome-kicker {
  margin-bottom: 6px;
  color: var(--chat-primary);
  font-size: 0.68rem;
  font-weight: 900;
}

.company-chat-welcome h2 {
  margin: 0;
  color: var(--chat-text);
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.company-chat-welcome p {
  max-width: 440px;
  margin: 9px auto 18px;
  color: var(--chat-muted);
  font-size: 0.76rem;
  line-height: 1.85;
}

.company-chat-welcome-action {
  height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 17px;
  color: var(--chat-primary);
  border: 1px solid var(--chat-line-strong);
  border-radius: 12px;
  background: var(--chat-primary-soft);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  transition: transform 160ms ease, background 160ms ease;
}

.company-chat-welcome-action:hover {
  transform: translateY(-1px);
  background: rgba(112, 103, 240, 0.2);
}

.company-chat-active {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: none;
  flex: 1;
  flex-direction: column;
}

.company-chat-conversation-header {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 15px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--chat-line);
  background: color-mix(in srgb, var(--chat-panel) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.company-chat-contact {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.company-chat-avatar {
  width: 45px;
  height: 45px;
  font-size: 0.78rem;
}

.company-chat-contact-copy {
  min-width: 0;
}

.company-chat-contact-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.company-chat-contact-title-row h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--chat-text);
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-chat-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 2px solid var(--chat-panel);
  border-radius: 50%;
  background: var(--chat-emerald);
  box-shadow: 0 0 0 2px var(--chat-emerald-soft);
}

.company-chat-contact-copy p {
  margin: 2px 0 0;
  color: var(--chat-muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.company-chat-conversation-actions,
.company-chat-conversation-actions>div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.company-chat-header-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: var(--chat-primary);
  border: 1px solid var(--chat-line-strong);
  border-radius: 10px;
  background: var(--chat-primary-soft);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-chat-header-btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #25be91, #0e9874);
}

.company-chat-mobile-back {
  width: 36px;
  height: 36px;
  display: none;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  color: var(--chat-text);
  border: 1px solid var(--chat-line);
  border-radius: 11px;
  background: var(--chat-panel-soft);
  cursor: pointer;
}

.company-chat-messages {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 25px clamp(18px, 4vw, 50px);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.24) transparent;
}

.company-chat-loading--messages {
  height: 100%;
  min-height: 0;
}

.company-chat-empty-thread {
  width: min(360px, 88%);
  min-height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: var(--chat-muted);
  text-align: center;
}

.company-chat-empty-thread>span {
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  color: var(--chat-primary);
  border: 1px solid var(--chat-line-strong);
  border-radius: 17px;
  background: var(--chat-primary-soft);
}

.company-chat-empty-thread strong {
  color: var(--chat-text);
  font-size: 0.82rem;
}

.company-chat-empty-thread small {
  font-size: 0.68rem;
  line-height: 1.7;
}

.company-chat-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 17px;
}

.company-chat-date-separator span {
  padding: 5px 12px;
  color: var(--chat-muted);
  border: 1px solid var(--chat-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-panel) 86%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 0.58rem;
  font-weight: 800;
}

.company-chat-message-row {
  width: 100%;
  display: flex;
  margin-bottom: 8px;
}

.company-chat-message-row.is-sent {
  justify-content: flex-start;
}

.company-chat-message-row.is-received {
  justify-content: flex-end;
}

[dir="ltr"] .company-chat-message-row.is-sent {
  justify-content: flex-end;
}

[dir="ltr"] .company-chat-message-row.is-received {
  justify-content: flex-start;
}

.company-chat-message-row .message-bubble {
  position: relative;
  max-width: min(72%, 560px);
  display: flex;
  flex-direction: column;
  padding: 9px 12px 6px;
  color: var(--chat-text);
  border: 1px solid var(--chat-line);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.07);
}

.company-chat-message-row .message-bubble.sent {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 15px 15px 5px 15px;
  background: linear-gradient(135deg, #6258df, #5145cf);
  box-shadow: 0 9px 20px rgba(81, 69, 220, 0.19);
}

.company-chat-message-row .message-bubble.received {
  border-radius: 15px 15px 15px 5px;
  background: var(--chat-panel-soft);
}

[dir="ltr"] .company-chat-message-row .message-bubble.sent {
  border-radius: 15px 15px 15px 5px;
}

[dir="ltr"] .company-chat-message-row .message-bubble.received {
  border-radius: 15px 15px 5px 15px;
}

.company-chat-message-sender {
  margin-bottom: 4px;
  color: var(--chat-primary);
  font-size: 0.61rem;
  font-weight: 900;
}

.company-chat-text,
.company-chat-caption {
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.75;
}

.company-chat-caption {
  margin-top: 5px;
}

.company-chat-image-wrap {
  overflow: hidden;
  margin: -3px -5px 1px;
  border-radius: 11px;
}

.company-chat-image {
  width: min(250px, 100%);
  max-height: 260px;
  display: block;
  border-radius: 11px;
  object-fit: cover;
  cursor: zoom-in;
}

.company-chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 3px;
  color: currentColor;
  font-size: 0.53rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.62;
}

.company-chat-message-meta svg {
  flex: 0 0 auto;
}

.company-chat-composer {
  min-height: 74px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  padding: 12px 16px;
  border-top: 1px solid var(--chat-line);
  background: color-mix(in srgb, var(--chat-panel) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.company-chat-composer-btn,
.company-chat-send-btn {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 13px;
  cursor: pointer;
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.company-chat-composer-btn {
  color: var(--chat-muted);
  border: 1px solid var(--chat-line);
  background: var(--chat-panel-soft);
}

.company-chat-composer-btn:hover {
  color: var(--chat-primary);
  border-color: var(--chat-line-strong);
  background: var(--chat-primary-soft);
}

.company-chat-send-btn {
  color: #fff;
  border: 0;
  background: linear-gradient(145deg, #7168ec, #5145d1);
  box-shadow: 0 9px 21px rgba(81, 69, 220, 0.26);
}

.company-chat-send-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 25px rgba(81, 69, 220, 0.34);
}

.company-chat-input-wrap {
  position: relative;
  min-width: 0;
  flex: 1;
}

.company-chat-input-wrap>input {
  width: 100%;
  height: 43px;
  padding: 0 16px;
  color: var(--chat-text);
  caret-color: var(--chat-primary);
  border: 1px solid var(--chat-line);
  border-radius: 14px;
  outline: none;
  background: var(--chat-panel-soft);
  font-size: 0.76rem;
  font-weight: 600;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.company-chat-input-wrap>input::placeholder {
  color: var(--chat-muted);
  opacity: 0.78;
}

.company-chat-input-wrap>input:focus {
  border-color: rgba(112, 103, 240, 0.5);
  background: var(--chat-panel);
  box-shadow: 0 0 0 3px rgba(112, 103, 240, 0.1);
}

.company-chat-recording {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  color: var(--chat-text);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  background: var(--chat-panel-soft);
  font-size: 0.66rem;
  font-weight: 800;
}

.company-chat-recording-state {
  display: flex;
  align-items: center;
  gap: 7px;
}

.company-chat-recording-state strong {
  color: #ef6d7a;
  font-variant-numeric: tabular-nums;
}

.company-chat-recording button {
  padding: 3px 8px;
  color: #ef6d7a;
  border: 0;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.09);
  cursor: pointer;
  font-size: 0.61rem;
  font-weight: 900;
}

.recording-pulsing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  animation: company-chat-record-pulse 1.2s ease-out infinite;
}

@keyframes company-chat-record-pulse {
  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

html.light .company-chat-message-row .message-bubble.received {
  background: #fff;
  box-shadow: 0 8px 20px rgba(30, 41, 59, 0.08);
}

html.light .company-chat-page .wa-voice-player,
html.light .company-chat-page .wa-file-player {
  border-color: rgba(15, 23, 42, 0.08) !important;
  background: rgba(15, 23, 42, 0.035) !important;
}

html.light .company-chat-page .wa-file-player div,
html.light .company-chat-page .wa-speed {
  color: #172033 !important;
}

html.light .company-chat-page .wa-mic-badge,
html.light .company-chat-page .wa-file-player a {
  border-color: rgba(15, 23, 42, 0.06) !important;
  background: rgba(79, 70, 229, 0.08) !important;
}

@media (max-width: 1100px) {
  .company-chat-sidebar {
    width: 320px;
    min-width: 290px;
  }

  .company-chat-action {
    padding-inline: 11px;
  }

  .company-chat-message-row .message-bubble {
    max-width: 80%;
  }
}

@media (max-width: 900px) {
  .company-chat-page {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    height: calc(100dvh - 128px - env(safe-area-inset-bottom, 0px));
    min-height: 520px;
    gap: 12px;
  }

  .company-chat-title-icon {
    width: 43px;
    height: 43px;
    border-radius: 14px;
  }

  .company-chat-title-wrap p,
  .company-chat-eyebrow {
    display: none;
  }

  .company-chat-shell {
    border-radius: 21px;
  }
}

@media (max-width: 760px) {
  .company-chat-page-header {
    gap: 10px;
  }

  .company-chat-page-actions {
    gap: 6px;
  }

  .company-chat-action {
    width: 39px;
    min-height: 39px;
    padding: 0;
    border-radius: 12px;
  }

  .company-chat-action span {
    display: none;
  }

  .company-chat-sidebar {
    width: 100%;
    min-width: 0;
    border-inline-end: 0;
  }

  .company-chat-main {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
  }

  .company-chat-shell.active-chat-mobile .company-chat-sidebar {
    display: none;
  }

  .company-chat-shell.active-chat-mobile .company-chat-main {
    display: flex;
  }

  .company-chat-mobile-back {
    display: grid;
  }

  .company-chat-conversation-header {
    padding-inline: 12px;
  }

  .company-chat-messages {
    padding: 20px 14px;
  }

  .company-chat-message-row .message-bubble {
    max-width: 84%;
  }

  .company-chat-composer {
    gap: 7px;
    padding: 10px;
  }

  .company-chat-composer-btn,
  .company-chat-send-btn {
    width: 41px;
    height: 41px;
  }

  .company-chat-input-wrap>input {
    height: 41px;
  }
}

@media (max-width: 520px) {
  .company-chat-page {
    height: calc(100dvh - 116px - env(safe-area-inset-bottom, 0px));
    min-height: 500px;
  }

  .company-chat-title-wrap {
    gap: 9px;
  }

  .company-chat-title-icon {
    width: 39px;
    height: 39px;
    border-radius: 13px;
  }

  .company-chat-title-wrap h1 {
    max-width: 170px;
    font-size: 0.94rem;
  }

  .company-chat-page-actions .company-chat-action--icon {
    display: none;
  }

  .company-chat-sidebar-header {
    min-height: 68px;
    padding-inline: 15px;
  }

  .company-chat-search-wrap,
  .company-chat-filters {
    margin-inline: 12px;
  }

  .company-chat-filters {
    padding-inline: 0;
  }

  .company-chat-conversation-actions .company-chat-header-btn {
    width: 35px;
    padding: 0;
  }

  .company-chat-conversation-actions .company-chat-header-btn span {
    display: none;
  }

  .company-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .company-chat-contact-title-row h3 {
    max-width: 130px;
    font-size: 0.79rem;
  }

  .company-chat-message-row .message-bubble {
    max-width: 88%;
  }

  .company-chat-composer {
    min-height: 66px;
  }

  .company-chat-composer #chat-voice-btn {
    display: none;
  }

  .company-chat-text,
  .company-chat-caption {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .company-chat-page *,
  .company-chat-page *::before,
  .company-chat-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Company people & payroll workspace
   ========================================================= */
#main,
#page-content {
  min-width: 0;
}

.company-hr-page {
  --hr-panel: rgba(14, 20, 38, 0.9);
  --hr-panel-solid: #10172a;
  --hr-panel-soft: rgba(22, 30, 51, 0.78);
  --hr-line: rgba(148, 163, 184, 0.12);
  --hr-line-strong: rgba(129, 140, 248, 0.22);
  --hr-text: #f8fafc;
  --hr-muted: #94a3b8;
  --hr-primary: #7168ed;
  --hr-primary-soft: rgba(113, 104, 237, 0.13);
  --hr-emerald: #34d399;
  --hr-amber: #fbbf24;
  --hr-rose: #fb7185;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--hr-text);
  font-family: var(--font-main, 'Cairo', sans-serif);
}

html.light .company-hr-page {
  --hr-panel: rgba(255, 255, 255, 0.97);
  --hr-panel-solid: #ffffff;
  --hr-panel-soft: #f8faff;
  --hr-line: rgba(15, 23, 42, 0.09);
  --hr-line-strong: rgba(79, 70, 229, 0.18);
  --hr-text: #172033;
  --hr-muted: #66758d;
  --hr-primary: #5b50df;
  --hr-primary-soft: rgba(79, 70, 229, 0.09);
  --hr-emerald: #0f9f73;
  --hr-amber: #d88a0b;
  --hr-rose: #e4556c;
}

.company-hr-page button,
.company-hr-page input {
  font: inherit;
}

.company-hr-hero {
  position: relative;
  min-height: 164px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 26px 28px;
  border: 1px solid var(--hr-line-strong);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 18%, rgba(52, 211, 153, 0.1), transparent 23%),
    radial-gradient(circle at 86% 30%, rgba(113, 104, 237, 0.18), transparent 31%),
    linear-gradient(120deg, rgba(22, 29, 52, 0.98), rgba(15, 22, 42, 0.92));
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  isolation: isolate;
}

.company-hr-hero::after {
  position: absolute;
  inset-inline-end: -44px;
  top: -80px;
  z-index: -1;
  width: 240px;
  height: 240px;
  border: 1px dashed rgba(129, 140, 248, 0.2);
  border-radius: 50%;
  content: '';
}

html.light .company-hr-hero {
  background:
    radial-gradient(circle at 8% 18%, rgba(16, 185, 129, 0.08), transparent 24%),
    radial-gradient(circle at 86% 28%, rgba(79, 70, 229, 0.12), transparent 31%),
    linear-gradient(120deg, #fff, #f6f7ff);
  box-shadow: 0 18px 48px rgba(30, 41, 59, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.company-hr-hero-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.company-hr-hero-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(145deg, #7a72f3, #5145d1);
  box-shadow: 0 14px 30px rgba(81, 69, 220, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.company-hr-page[data-active-tab="payroll_admin"] .company-hr-hero-icon,
.company-hr-page[data-active-tab="my_payroll"] .company-hr-hero-icon {
  background: linear-gradient(145deg, #2bcf9e, #0d9772);
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.company-hr-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--hr-primary);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
}

.company-hr-hero h1 {
  margin: 0;
  color: var(--hr-text);
  font-size: clamp(1.25rem, 2.1vw, 1.72rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.4;
}

.company-hr-hero p {
  max-width: 590px;
  margin: 4px 0 0;
  color: var(--hr-muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.75;
}

.company-hr-hero-side {
  min-width: 330px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 13px;
}

.company-hr-primary-action,
.company-payroll-generate-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7168ed, #5145d1);
  box-shadow: 0 10px 24px rgba(81, 69, 220, 0.25);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.company-hr-primary-action:hover,
.company-payroll-generate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(81, 69, 220, 0.32);
}

.company-hr-hero-metrics {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--hr-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.light .company-hr-hero-metrics {
  background: rgba(255, 255, 255, 0.72);
}

.company-hr-hero-metric {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 8px;
  text-align: center;
}

.company-hr-hero-metric+.company-hr-hero-metric {
  border-inline-start: 1px solid var(--hr-line);
}

.company-hr-hero-metric strong {
  color: var(--hr-text);
  font-size: 0.95rem;
  font-weight: 900;
}

.company-hr-hero-metric span {
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 0.58rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-hr-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--hr-line);
  border-radius: 16px;
  background: var(--hr-panel);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.company-hr-tabs::-webkit-scrollbar {
  display: none;
}

.company-hr-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 0 12px;
  color: var(--hr-muted);
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.company-hr-tab:hover {
  color: var(--hr-text);
  background: var(--hr-panel-soft);
}

.company-hr-tab.active {
  color: var(--hr-primary);
  border-color: var(--hr-line-strong);
  background: var(--hr-primary-soft);
}

.company-hr-tab-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.company-hr-content {
  min-width: 0;
}

.company-hr-section-head,
.company-payroll-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.company-hr-section-head>div>span,
.company-payroll-head-copy>span {
  display: block;
  margin-bottom: 2px;
  color: var(--hr-primary);
  font-size: 0.64rem;
  font-weight: 900;
}

.company-hr-section-head h2,
.company-payroll-head h2 {
  margin: 0;
  color: var(--hr-text);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.company-hr-section-head p,
.company-payroll-head p {
  margin: 3px 0 0;
  color: var(--hr-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.65;
}

.company-staff-search {
  position: relative;
  width: min(290px, 100%);
  height: 42px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--hr-muted);
}

.company-staff-search>svg {
  position: absolute;
  inset-inline-start: 13px;
  z-index: 1;
  pointer-events: none;
}

.company-staff-search input {
  width: 100%;
  height: 100%;
  padding: 0 40px 0 13px;
  color: var(--hr-text);
  caret-color: var(--hr-primary);
  border: 1px solid var(--hr-line);
  border-radius: 12px;
  outline: none;
  background: var(--hr-panel);
  font-size: 0.7rem;
  font-weight: 600;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

[dir="ltr"] .company-staff-search input {
  padding: 0 13px 0 40px;
}

.company-staff-search input::placeholder {
  color: var(--hr-muted);
  opacity: 0.8;
}

.company-staff-search input:focus,
.company-payroll-period input:focus {
  border-color: rgba(113, 104, 237, 0.5);
  box-shadow: 0 0 0 3px rgba(113, 104, 237, 0.1);
}

.company-staff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.company-staff-card {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hr-line);
  border-radius: 18px;
  background: var(--hr-panel);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.09);
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.company-staff-card:hover {
  transform: translateY(-2px);
  border-color: var(--hr-line-strong);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.14);
}

html.light .company-staff-card {
  box-shadow: 0 9px 24px rgba(30, 41, 59, 0.07);
}

.company-staff-card-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
}

.company-staff-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: linear-gradient(145deg, #766ef0, #5145d1);
  box-shadow: 0 9px 20px rgba(81, 69, 220, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 0.92rem;
  font-weight: 900;
}

.company-staff-avatar[data-role="manager"] {
  background: linear-gradient(145deg, #2bcf9e, #0d9772);
  box-shadow: 0 9px 20px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.company-staff-identity {
  min-width: 0;
  flex: 1;
}

.company-staff-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.company-staff-name-row h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--hr-text);
  font-size: 0.83rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-staff-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.53rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-staff-badge--manager {
  color: var(--hr-primary);
  border-color: var(--hr-line-strong);
  background: var(--hr-primary-soft);
}

.company-staff-badge--active {
  color: var(--hr-emerald);
  border-color: rgba(52, 211, 153, 0.18);
  background: rgba(52, 211, 153, 0.09);
}

.company-staff-badge--pending {
  color: var(--hr-amber);
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.09);
}

.company-staff-email {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 0.63rem;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-staff-email:hover {
  color: var(--hr-primary);
}

.company-staff-activity {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 0.56rem;
  font-weight: 600;
  opacity: 0.8;
}

.company-staff-activity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-staff-card-footer {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 15px;
  border-top: 1px solid var(--hr-line);
  background: var(--hr-panel-soft);
}

.company-staff-permissions {
  min-width: 0;
  flex: 1;
}

.company-staff-permissions-label {
  display: block;
  margin-bottom: 4px;
  color: var(--hr-muted);
  font-size: 0.53rem;
  font-weight: 800;
}

.company-staff-permissions>div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.company-staff-permission,
.company-staff-full-access,
.company-staff-no-access {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--hr-text);
  font-size: 0.55rem;
  font-weight: 800;
}

.company-staff-permission {
  padding: 3px 7px;
  border: 1px solid var(--hr-line);
  border-radius: 7px;
  background: var(--hr-panel);
}

.company-staff-permission i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hr-primary);
}

.company-staff-full-access {
  color: var(--hr-emerald);
}

.company-staff-no-access {
  color: var(--hr-muted);
  font-weight: 700;
}

.company-staff-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
}

.company-staff-action {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  color: var(--hr-primary);
  border: 1px solid var(--hr-line-strong);
  border-radius: 9px;
  background: var(--hr-primary-soft);
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 900;
}

.company-staff-action--danger {
  width: 34px;
  padding: 0;
  color: var(--hr-rose);
  border-color: rgba(251, 113, 133, 0.18);
  background: rgba(251, 113, 133, 0.08);
}

.company-staff-action--danger span {
  display: none;
}

.company-hr-empty {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 30px;
  color: var(--hr-muted);
  border: 1px dashed var(--hr-line-strong);
  border-radius: 20px;
  background: var(--hr-panel-soft);
  text-align: center;
}

.company-hr-empty>span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  color: var(--hr-primary);
  border: 1px solid var(--hr-line-strong);
  border-radius: 17px;
  background: var(--hr-primary-soft);
}

.company-hr-empty h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 0.86rem;
  font-weight: 900;
}

.company-hr-empty p {
  max-width: 400px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 0.68rem;
  line-height: 1.75;
}

.company-hr-empty--compact {
  min-height: 190px;
  margin-top: 13px;
}

.company-hr-empty[hidden],
.company-staff-card[hidden] {
  display: none !important;
}

.company-payroll-head {
  align-items: center;
}

.company-payroll-controls {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 8px;
}

.company-payroll-period {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.company-payroll-period>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--hr-muted);
  font-size: 0.58rem;
  font-weight: 800;
}

.company-payroll-period input {
  height: 42px;
  padding: 0 11px;
  color: var(--hr-text);
  color-scheme: dark;
  border: 1px solid var(--hr-line);
  border-radius: 11px;
  outline: none;
  background: var(--hr-panel);
  font-size: 0.68rem;
  font-weight: 800;
}

html.light .company-payroll-period input {
  color-scheme: light;
}

.company-payroll-generate-btn {
  min-height: 42px;
}

.company-payroll-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.company-payroll-summary-card {
  --payroll-tone: var(--hr-primary);
  --payroll-tone-soft: var(--hr-primary-soft);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--hr-line);
  border-radius: 15px;
  background: var(--hr-panel);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.07);
}

.company-payroll-summary-card[data-tone="emerald"] {
  --payroll-tone: var(--hr-emerald);
  --payroll-tone-soft: rgba(52, 211, 153, 0.1);
}

.company-payroll-summary-card[data-tone="rose"] {
  --payroll-tone: var(--hr-rose);
  --payroll-tone-soft: rgba(251, 113, 133, 0.1);
}

.company-payroll-summary-card[data-tone="cyan"] {
  --payroll-tone: #22c7df;
  --payroll-tone-soft: rgba(34, 199, 223, 0.1);
}

.company-payroll-summary-card--featured {
  border-color: color-mix(in srgb, var(--payroll-tone) 23%, transparent);
  background: linear-gradient(135deg, var(--payroll-tone-soft), var(--hr-panel));
}

.company-payroll-summary-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--payroll-tone);
  border: 1px solid color-mix(in srgb, var(--payroll-tone) 18%, transparent);
  border-radius: 12px;
  background: var(--payroll-tone-soft);
}

.company-payroll-summary-card>div {
  min-width: 0;
}

.company-payroll-summary-card p {
  margin: 0;
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 0.59rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-payroll-summary-card strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--hr-text);
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-payroll-summary-card--featured strong {
  color: var(--payroll-tone);
}

.company-payroll-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hr-line);
  border-radius: 18px;
  background: var(--hr-panel);
  box-shadow: 0 12px 34px rgba(2, 6, 23, 0.09);
}

.company-payroll-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  color: var(--hr-text);
  text-align: start;
}

.company-payroll-table thead {
  background: var(--hr-panel-soft);
}

.company-payroll-table th {
  padding: 13px 14px;
  color: var(--hr-muted);
  border-bottom: 1px solid var(--hr-line);
  font-size: 0.58rem;
  font-weight: 900;
  text-align: start;
  white-space: nowrap;
}

.company-payroll-table td {
  padding: 14px;
  color: var(--hr-text);
  border-bottom: 1px solid var(--hr-line);
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
}

.company-payroll-row:last-child td {
  border-bottom: 0;
}

.company-payroll-row {
  transition: background 150ms ease;
}

.company-payroll-row:hover {
  background: var(--hr-panel-soft);
}

.company-payroll-employee {
  display: flex;
  align-items: center;
  gap: 9px;
}

.company-payroll-employee>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #746cf0, #5145d1);
  font-size: 0.66rem;
  font-weight: 900;
}

.company-payroll-employee>div {
  min-width: 0;
}

.company-payroll-employee strong,
.company-payroll-employee small {
  display: block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-payroll-employee strong {
  color: var(--hr-text);
  font-size: 0.68rem;
  font-weight: 900;
}

.company-payroll-employee small {
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 0.52rem;
  font-weight: 600;
}

.company-payroll-amount {
  color: var(--hr-text);
  font-variant-numeric: tabular-nums;
}

.company-payroll-amount--allowance {
  color: var(--hr-emerald);
}

.company-payroll-amount--deduction {
  color: var(--hr-rose);
}

.company-payroll-net {
  color: var(--hr-primary);
  font-size: 0.69rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.company-payroll-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.53rem;
  font-weight: 900;
}

.company-payroll-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.company-payroll-status.is-paid {
  color: var(--hr-emerald);
  border-color: rgba(52, 211, 153, 0.18);
  background: rgba(52, 211, 153, 0.09);
}

.company-payroll-status.is-paid i {
  background: var(--hr-emerald);
}

.company-payroll-status.is-draft {
  color: var(--hr-amber);
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.09);
}

.company-payroll-status.is-draft i {
  background: var(--hr-amber);
}

.company-payroll-pay-btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  color: var(--hr-primary);
  border: 1px solid var(--hr-line-strong);
  border-radius: 9px;
  background: var(--hr-primary-soft);
  cursor: pointer;
  font-size: 0.55rem;
  font-weight: 900;
}

.company-payroll-complete-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--hr-emerald);
  border-radius: 9px;
  background: rgba(52, 211, 153, 0.09);
}

html.light .company-hr-content [style*="background: rgba(22, 30, 49"] {
  border-color: var(--hr-line) !important;
  background: var(--hr-panel) !important;
}

html.light .company-hr-content [style*="color: #fff"],
html.light .company-hr-content [style*="color:#fff"] {
  color: var(--hr-text) !important;
}

.company-hr-primary-action:focus-visible,
.company-hr-tab:focus-visible,
.company-staff-action:focus-visible,
.company-payroll-generate-btn:focus-visible,
.company-payroll-pay-btn:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.28);
  outline-offset: 2px;
}

@media (max-width: 1120px) {
  .company-hr-hero-side {
    min-width: 290px;
  }

  .company-staff-grid {
    grid-template-columns: 1fr;
  }

  .company-payroll-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .company-hr-page {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    gap: 13px;
  }

  .company-hr-hero {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    padding: 19px;
    border-radius: 20px;
  }

  .company-hr-hero-copy {
    align-items: flex-start;
    gap: 12px;
  }

  .company-hr-hero-icon {
    width: 47px;
    height: 47px;
    border-radius: 15px;
  }

  .company-hr-eyebrow {
    display: none;
  }

  .company-hr-hero h1 {
    font-size: 1.1rem;
  }

  .company-hr-hero p {
    font-size: 0.68rem;
  }

  .company-hr-hero-side {
    min-width: 0;
    width: 100%;
    align-items: stretch;
  }

  .company-hr-primary-action {
    width: 100%;
  }

  .company-hr-hero-metric {
    padding-block: 8px;
  }

  .company-hr-tabs {
    border-radius: 14px;
  }

  .company-hr-tab {
    min-height: 36px;
    padding-inline: 10px;
  }

  .company-hr-section-head,
  .company-payroll-head {
    align-items: stretch;
    flex-direction: column;
  }

  .company-staff-search {
    width: 100%;
  }

  .company-staff-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-staff-actions {
    width: 100%;
  }

  .company-staff-action {
    flex: 1;
  }

  .company-staff-action--danger {
    flex: 0 0 34px;
  }

  .company-payroll-controls {
    width: 100%;
    align-items: stretch;
  }

  .company-payroll-period {
    min-width: 0;
    flex: 1;
  }

  .company-payroll-period input {
    width: 100%;
  }

  .company-payroll-generate-btn {
    align-self: flex-end;
  }

  #page-content .company-payroll-table {
    min-width: 0 !important;
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .company-payroll-table thead {
    display: none;
  }

  .company-payroll-table tbody,
  .company-payroll-table tr,
  .company-payroll-table td {
    display: block;
    width: 100%;
  }

  .company-payroll-table tbody {
    padding: 9px;
  }

  .company-payroll-row {
    overflow: hidden;
    margin-bottom: 9px;
    border: 1px solid var(--hr-line);
    border-radius: 14px;
    background: var(--hr-panel-soft);
  }

  .company-payroll-row:last-child {
    margin-bottom: 0;
  }

  .company-payroll-table td {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--hr-line);
    text-align: end;
  }

  .company-payroll-table td::before {
    flex: 0 0 auto;
    color: var(--hr-muted);
    content: attr(data-label);
    font-size: 0.56rem;
    font-weight: 800;
  }

  .company-payroll-table td:first-child {
    padding-block: 11px;
  }

  .company-payroll-table td:first-child::before {
    display: none;
  }

  .company-payroll-table td:last-child {
    border-bottom: 0;
  }

  .company-payroll-employee {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .company-hr-hero {
    padding: 17px 15px;
  }

  .company-hr-hero-metric span {
    font-size: 0.52rem;
  }

  .company-staff-card-main {
    align-items: flex-start;
    padding: 14px;
  }

  .company-staff-avatar {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }

  .company-payroll-summary {
    grid-template-columns: 1fr;
  }

  .company-payroll-controls {
    flex-direction: column;
  }

  .company-payroll-generate-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .company-hr-page *,
  .company-hr-page *::before,
  .company-hr-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Company sales & customer workspace
   ========================================================= */
.company-crm-page {
  --crm-panel: rgba(14, 20, 38, 0.9);
  --crm-panel-solid: #10172a;
  --crm-panel-soft: rgba(22, 30, 51, 0.78);
  --crm-line: rgba(148, 163, 184, 0.12);
  --crm-line-strong: rgba(34, 199, 223, 0.2);
  --crm-text: #f8fafc;
  --crm-muted: #94a3b8;
  --crm-primary: #6d63ea;
  --crm-primary-soft: rgba(109, 99, 234, 0.13);
  --crm-cyan: #22c7df;
  --crm-emerald: #34d399;
  --crm-amber: #fbbf24;
  --crm-rose: #fb7185;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--crm-text);
  font-family: var(--font-main, 'Cairo', sans-serif);
}

html.light .company-crm-page {
  --crm-panel: rgba(255, 255, 255, 0.97);
  --crm-panel-solid: #fff;
  --crm-panel-soft: #f7f9fd;
  --crm-line: rgba(15, 23, 42, 0.09);
  --crm-line-strong: rgba(8, 145, 178, 0.17);
  --crm-text: #172033;
  --crm-muted: #66758d;
  --crm-primary: #5b50df;
  --crm-primary-soft: rgba(79, 70, 229, 0.09);
  --crm-cyan: #0891b2;
  --crm-emerald: #0f9f73;
  --crm-amber: #d88a0b;
  --crm-rose: #e4556c;
}

.company-crm-page button,
.company-crm-page input,
.company-crm-page select,
.company-crm-page textarea,
.company-crm-modal button,
.company-crm-modal input,
.company-crm-modal select,
.company-crm-modal textarea {
  font: inherit;
}

.company-crm-hero {
  position: relative;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 27px 28px;
  border: 1px solid var(--crm-line-strong);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(34, 199, 223, 0.12), transparent 24%),
    radial-gradient(circle at 87% 38%, rgba(109, 99, 234, 0.2), transparent 32%),
    linear-gradient(120deg, rgba(20, 30, 51, 0.98), rgba(15, 22, 42, 0.94));
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  isolation: isolate;
}

.company-crm-hero::after {
  position: absolute;
  inset-inline-start: -52px;
  bottom: -112px;
  z-index: -1;
  width: 250px;
  height: 250px;
  border: 1px dashed rgba(34, 199, 223, 0.19);
  border-radius: 50%;
  content: '';
}

html.light .company-crm-hero {
  background:
    radial-gradient(circle at 12% 10%, rgba(8, 145, 178, 0.09), transparent 25%),
    radial-gradient(circle at 87% 35%, rgba(79, 70, 229, 0.12), transparent 31%),
    linear-gradient(120deg, #fff, #f5f8ff);
  box-shadow: 0 18px 48px rgba(30, 41, 59, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.company-crm-hero-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.company-crm-hero-copy>div {
  min-width: 0;
}

.company-crm-hero-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, #22c7df, #4f46d9 92%);
  box-shadow: 0 15px 32px rgba(34, 199, 223, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.company-crm-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--crm-cyan);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
}

.company-crm-hero h1 {
  margin: 0;
  color: var(--crm-text);
  font-size: clamp(1.28rem, 2.2vw, 1.78rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.4;
}

.company-crm-hero p {
  max-width: 580px;
  margin: 4px 0 0;
  color: var(--crm-muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.75;
}

.company-crm-hero-side {
  min-width: 330px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 13px;
}

.company-crm-primary-action,
.company-crm-secondary-action,
.company-crm-danger-action,
.company-crm-collect-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.company-crm-primary-action {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, #6d63ea, #4f46d9);
  box-shadow: 0 10px 24px rgba(79, 70, 217, 0.25);
}

.company-crm-primary-action:hover,
.company-crm-collect-btn:hover {
  transform: translateY(-1px);
}

.company-crm-primary-action:disabled,
.company-crm-secondary-action:disabled,
.company-crm-collect-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.company-crm-secondary-action {
  color: var(--crm-text);
  border: 1px solid var(--crm-line);
  background: var(--crm-panel-soft);
}

.company-crm-danger-action {
  color: var(--crm-rose);
  border: 1px solid rgba(251, 113, 133, 0.2);
  background: rgba(251, 113, 133, 0.08);
}

.company-crm-hero-metrics {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.light .company-crm-hero-metrics {
  background: rgba(255, 255, 255, 0.72);
}

.company-crm-hero-metric {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 8px;
  text-align: center;
}

.company-crm-hero-metric+.company-crm-hero-metric {
  border-inline-start: 1px solid var(--crm-line);
}

.company-crm-hero-metric strong {
  color: var(--crm-text);
  font-size: 0.95rem;
  font-weight: 900;
}

.company-crm-hero-metric span {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 0.57rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--crm-line);
  border-radius: 16px;
  background: var(--crm-panel);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.company-crm-tabs::-webkit-scrollbar {
  display: none;
}

.company-crm-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 0 13px;
  color: var(--crm-muted);
  border: 1px solid transparent;
  border-radius: 11px;
  outline-offset: 2px;
  background: transparent;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.company-crm-tab:hover {
  color: var(--crm-text);
  background: var(--crm-panel-soft);
}

.company-crm-tab.active {
  color: var(--crm-primary);
  border-color: rgba(109, 99, 234, 0.2);
  background: var(--crm-primary-soft);
  box-shadow: 0 7px 18px rgba(79, 70, 217, 0.1);
}

.company-crm-tab>span:first-child {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.company-crm-kpi-grid,
.company-crm-collection-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.company-crm-collection-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-crm-kpi,
.company-crm-kpi-skeleton {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--crm-line);
  border-radius: 16px;
  background: var(--crm-panel);
  box-shadow: 0 9px 26px rgba(2, 6, 23, 0.07);
}

.company-crm-kpi-skeleton {
  position: relative;
  overflow: hidden;
}

.company-crm-kpi-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(148, 163, 184, 0.08), transparent);
  content: '';
  animation: company-crm-shimmer 1.2s linear infinite;
}

@keyframes company-crm-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.company-crm-kpi {
  --crm-tone: var(--crm-primary);
  --crm-tone-soft: var(--crm-primary-soft);
}

.company-crm-kpi[data-tone="amber"] {
  --crm-tone: var(--crm-amber);
  --crm-tone-soft: rgba(251, 191, 36, 0.1);
}

.company-crm-kpi[data-tone="emerald"] {
  --crm-tone: var(--crm-emerald);
  --crm-tone-soft: rgba(52, 211, 153, 0.1);
}

.company-crm-kpi[data-tone="rose"] {
  --crm-tone: var(--crm-rose);
  --crm-tone-soft: rgba(251, 113, 133, 0.1);
}

.company-crm-kpi[data-tone="purple"] {
  --crm-tone: #a78bfa;
  --crm-tone-soft: rgba(167, 139, 250, 0.1);
}

.company-crm-kpi-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--crm-tone);
  border: 1px solid color-mix(in srgb, var(--crm-tone) 18%, transparent);
  border-radius: 13px;
  background: var(--crm-tone-soft);
}

.company-crm-kpi>div {
  min-width: 0;
}

.company-crm-kpi>div>span,
.company-crm-kpi small {
  display: block;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 0.57rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-kpi strong {
  display: block;
  margin: 2px 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 0.8rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-content {
  min-width: 0;
}

.company-crm-loading {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--crm-muted);
}

.company-crm-loading span {
  width: 28px;
  height: 28px;
  border: 3px solid var(--crm-line);
  border-top-color: var(--crm-primary);
  border-radius: 50%;
  animation: crm-spin 0.8s linear infinite;
}

@keyframes crm-spin {
  to {
    transform: rotate(360deg);
  }
}

.company-crm-loading p {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
}

.company-crm-inline-error {
  grid-column: 1 / -1;
  padding: 14px;
  color: var(--crm-rose);
  border: 1px solid rgba(251, 113, 133, 0.18);
  border-radius: 14px;
  background: rgba(251, 113, 133, 0.08);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.company-crm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.company-crm-section-head>div:first-child>span {
  display: block;
  margin-bottom: 2px;
  color: var(--crm-primary);
  font-size: 0.58rem;
  font-weight: 900;
}

.company-crm-section-head h2 {
  margin: 0;
  color: var(--crm-text);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.company-crm-section-head p {
  max-width: 610px;
  margin: 3px 0 0;
  color: var(--crm-muted);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.7;
}

.company-crm-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
}

.company-crm-search {
  width: 250px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--crm-muted);
  border: 1px solid var(--crm-line);
  border-radius: 12px;
  background: var(--crm-panel);
}

.company-crm-search:focus-within {
  color: var(--crm-primary);
  border-color: rgba(109, 99, 234, 0.34);
  box-shadow: 0 0 0 3px rgba(109, 99, 234, 0.08);
}

.company-crm-search input {
  min-width: 0;
  width: 100%;
  color: var(--crm-text);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.64rem;
  font-weight: 700;
}

.company-crm-search input::placeholder {
  color: var(--crm-muted);
}

.company-crm-customer-grid,
.company-crm-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-crm-customer-card,
.company-crm-rep-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 18px;
  background: var(--crm-panel);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}

.company-crm-customer-card[hidden] {
  display: none;
}

.company-crm-customer-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.company-crm-customer-avatar,
.company-crm-document-customer>span,
.company-crm-rep-head>span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, #22c7df, #5b50df);
  font-weight: 900;
}

.company-crm-customer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  box-shadow: 0 10px 23px rgba(34, 199, 223, 0.16);
  font-size: 0.82rem;
}

.company-crm-customer-identity {
  min-width: 0;
  flex: 1;
}

.company-crm-customer-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.company-crm-customer-title h3 {
  overflow: hidden;
  margin: 0;
  color: var(--crm-text);
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-customer-title>span {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: var(--crm-emerald);
  border: 1px solid rgba(52, 211, 153, 0.17);
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.08);
  font-size: 0.48rem;
  font-weight: 900;
}

.company-crm-customer-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 5px;
}

.company-crm-customer-contacts a,
.company-crm-customer-contacts>span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 0.53rem;
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-customer-contacts a:hover {
  color: var(--crm-primary);
}

.company-crm-customer-details {
  display: grid;
  grid-template-columns: 0.7fr 0.8fr 1.5fr;
  border-block: 1px solid var(--crm-line);
  background: var(--crm-panel-soft);
}

.company-crm-customer-details>div {
  min-width: 0;
  padding: 10px 12px;
}

.company-crm-customer-details>div+div {
  border-inline-start: 1px solid var(--crm-line);
}

.company-crm-customer-details span,
.company-crm-customer-details strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-customer-details span {
  color: var(--crm-muted);
  font-size: 0.5rem;
  font-weight: 700;
}

.company-crm-customer-details strong {
  margin-top: 2px;
  color: var(--crm-text);
  font-size: 0.64rem;
  font-weight: 900;
}

.company-crm-customer-note {
  margin: 0;
  padding: 11px 15px 0;
  color: var(--crm-muted);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1.65;
}

.company-crm-card-footer {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.company-crm-card-footer>span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 0.52rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-card-actions,
.company-crm-table-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.company-crm-action,
.company-crm-icon-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: var(--crm-primary);
  border: 1px solid rgba(109, 99, 234, 0.18);
  border-radius: 10px;
  background: var(--crm-primary-soft);
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 850;
}

.company-crm-icon-action {
  width: 34px;
  padding: 0;
}

.company-crm-action--danger,
.company-crm-icon-action--danger {
  color: var(--crm-rose);
  border-color: rgba(251, 113, 133, 0.18);
  background: rgba(251, 113, 133, 0.08);
}

.company-crm-empty {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  color: var(--crm-muted);
  border: 1px dashed var(--crm-line-strong);
  border-radius: 18px;
  background: var(--crm-panel);
  text-align: center;
}

.company-crm-empty--compact {
  min-height: 150px;
  margin-top: 12px;
}

.company-crm-empty>span {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  color: var(--crm-primary);
  border-radius: 14px;
  background: var(--crm-primary-soft);
}

.company-crm-empty h3 {
  margin: 0;
  color: var(--crm-text);
  font-size: 0.78rem;
  font-weight: 900;
}

.company-crm-empty p {
  max-width: 450px;
  margin: 0;
  font-size: 0.6rem;
  font-weight: 650;
  line-height: 1.7;
}

.company-crm-empty--error>span {
  color: var(--crm-rose);
  background: rgba(251, 113, 133, 0.1);
}

.company-crm-pipeline-summary,
.company-crm-document-summary,
.company-crm-team-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 13px;
  border: 1px solid var(--crm-line);
  border-radius: 15px;
  background: var(--crm-panel);
}

.company-crm-team-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.company-crm-pipeline-summary>div,
.company-crm-document-summary>div,
.company-crm-team-summary>div {
  min-width: 0;
  padding: 11px 14px;
}

.company-crm-pipeline-summary>div+div,
.company-crm-document-summary>div+div,
.company-crm-team-summary>div+div {
  border-inline-start: 1px solid var(--crm-line);
}

.company-crm-pipeline-summary span,
.company-crm-document-summary span,
.company-crm-team-summary span {
  display: block;
  color: var(--crm-muted);
  font-size: 0.52rem;
  font-weight: 700;
}

.company-crm-pipeline-summary strong,
.company-crm-document-summary strong,
.company-crm-team-summary strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 0.7rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-pipeline-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(238px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-color: var(--crm-line-strong) transparent;
  scrollbar-width: thin;
}

.company-crm-stage {
  --stage-tone: var(--crm-primary);
  --stage-soft: var(--crm-primary-soft);
  min-width: 0;
  overflow: hidden;
  align-self: start;
  border: 1px solid var(--crm-line);
  border-radius: 17px;
  background: var(--crm-panel-soft);
}

.company-crm-stage[data-tone="blue"] {
  --stage-tone: #60a5fa;
  --stage-soft: rgba(96, 165, 250, 0.1);
}

.company-crm-stage[data-tone="amber"] {
  --stage-tone: var(--crm-amber);
  --stage-soft: rgba(251, 191, 36, 0.1);
}

.company-crm-stage[data-tone="purple"] {
  --stage-tone: #a78bfa;
  --stage-soft: rgba(167, 139, 250, 0.1);
}

.company-crm-stage[data-tone="emerald"] {
  --stage-tone: var(--crm-emerald);
  --stage-soft: rgba(52, 211, 153, 0.1);
}

.company-crm-stage[data-tone="rose"] {
  --stage-tone: var(--crm-rose);
  --stage-soft: rgba(251, 113, 133, 0.1);
}

.company-crm-stage-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--crm-line);
  background: linear-gradient(135deg, var(--stage-soft), transparent);
}

.company-crm-stage-head>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--stage-tone);
  border-radius: 10px;
  background: var(--stage-soft);
}

.company-crm-stage-head h3,
.company-crm-stage-head small,
.company-crm-stage-head>strong {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-stage-head h3 {
  color: var(--crm-text);
  font-size: 0.65rem;
  font-weight: 900;
}

.company-crm-stage-head small {
  display: block;
  margin-top: 1px;
  color: var(--crm-muted);
  font-size: 0.48rem;
  font-weight: 700;
}

.company-crm-stage-head>strong {
  max-width: 84px;
  color: var(--stage-tone);
  font-size: 0.54rem;
  font-weight: 900;
}

.company-crm-stage-body {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px;
}

.company-crm-stage-empty {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--crm-muted);
  border: 1px dashed var(--crm-line);
  border-radius: 12px;
  font-size: 0.52rem;
  font-weight: 700;
  text-align: center;
}

.company-crm-deal-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--stage-tone) 17%, transparent);
  border-radius: 13px;
  background: var(--crm-panel);
  box-shadow: 0 7px 20px rgba(2, 6, 23, 0.07);
}

.company-crm-deal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.company-crm-deal-card h4 {
  margin: 0;
  color: var(--crm-text);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.55;
}

.company-crm-deal-card .company-crm-icon-action {
  min-height: 28px;
  width: 28px;
  border-radius: 8px;
}

.company-crm-deal-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.company-crm-deal-meta span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 0.49rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-deal-value {
  display: block;
  margin: 9px 0 7px;
  color: var(--stage-tone);
  font-size: 0.66rem;
  font-weight: 900;
}

.company-crm-stage-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--crm-line);
}

.company-crm-stage-control>span {
  color: var(--crm-muted);
  font-size: 0.48rem;
  font-weight: 750;
}

.company-crm-stage-control select,
.company-crm-status-select {
  min-width: 0;
  height: 29px;
  padding: 0 7px;
  color: var(--crm-text);
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  outline: 0;
  background: var(--crm-panel-soft);
  font-size: 0.5rem;
  font-weight: 800;
}

.company-crm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--crm-line);
  border-radius: 18px;
  background: var(--crm-panel);
  box-shadow: 0 12px 34px rgba(2, 6, 23, 0.09);
}

.company-crm-table {
  width: 100%;
  min-width: 790px;
  border-collapse: collapse;
  color: var(--crm-text);
  text-align: start;
}

.company-crm-table thead {
  background: var(--crm-panel-soft);
}

.company-crm-table th,
.company-crm-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--crm-line);
  text-align: start;
  white-space: nowrap;
}

.company-crm-table th {
  color: var(--crm-muted);
  font-size: 0.56rem;
  font-weight: 900;
}

.company-crm-table td {
  color: var(--crm-text);
  font-size: 0.62rem;
  font-weight: 700;
}

.company-crm-table tr:last-child td {
  border-bottom: 0;
}

.company-crm-document-no {
  color: var(--crm-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
}

.company-crm-document-customer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-crm-document-customer>span {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  font-size: 0.62rem;
}

.company-crm-document-customer>div {
  min-width: 0;
}

.company-crm-document-customer strong,
.company-crm-document-customer small {
  display: block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-document-customer strong {
  font-size: 0.64rem;
  font-weight: 900;
}

.company-crm-document-customer small,
.company-crm-muted-value {
  color: var(--crm-muted);
  font-size: 0.5rem;
  font-weight: 650;
}

.company-crm-money {
  color: var(--crm-emerald);
  font-variant-numeric: tabular-nums;
}

.company-crm-money.is-due {
  color: var(--crm-amber);
}

.company-crm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: var(--crm-muted);
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  background: var(--crm-panel-soft);
  font-size: 0.5rem;
  font-weight: 850;
}

.company-crm-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.company-crm-status[data-tone="blue"] {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.08);
}

.company-crm-status[data-tone="emerald"] {
  color: var(--crm-emerald);
  background: rgba(52, 211, 153, 0.08);
}

.company-crm-status[data-tone="rose"] {
  color: var(--crm-rose);
  background: rgba(251, 113, 133, 0.08);
}

.company-crm-status[data-tone="purple"] {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.08);
}

.company-crm-status[data-tone="amber"] {
  color: var(--crm-amber);
  background: rgba(251, 191, 36, 0.08);
}

.company-crm-collection-cell {
  min-width: 100px;
}

.company-crm-collection-cell>strong {
  color: var(--crm-emerald);
  font-size: 0.58rem;
}

.company-crm-collection-cell>span,
.company-crm-rep-progress>span {
  height: 4px;
  display: block;
  overflow: hidden;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--crm-line);
}

.company-crm-collection-cell>span i,
.company-crm-rep-progress>span i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--crm-cyan), var(--crm-emerald));
}

.company-crm-collect-btn {
  min-height: 33px;
  padding: 0 10px;
  color: var(--crm-emerald);
  border: 1px solid rgba(52, 211, 153, 0.18);
  background: rgba(52, 211, 153, 0.08);
  font-size: 0.54rem;
}

.company-crm-complete-mark {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: var(--crm-emerald);
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.09);
}

.company-crm-rep-card {
  padding: 15px;
}

.company-crm-rep-head {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.company-crm-rep-head>span {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  font-size: 0.76rem;
}

.company-crm-rep-head h3 {
  margin: 0;
  color: var(--crm-text);
  font-size: 0.72rem;
  font-weight: 900;
}

.company-crm-rep-head a {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--crm-muted);
  font-size: 0.5rem;
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-rep-head small {
  padding: 4px 7px;
  color: var(--crm-primary);
  border-radius: 999px;
  background: var(--crm-primary-soft);
  font-size: 0.46rem;
  font-weight: 900;
}

.company-crm-rep-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 13px;
  border: 1px solid var(--crm-line);
  border-radius: 12px;
  background: var(--crm-panel-soft);
}

.company-crm-rep-metrics>div {
  padding: 8px 10px;
}

.company-crm-rep-metrics>div+div {
  border-inline-start: 1px solid var(--crm-line);
}

.company-crm-rep-metrics span,
.company-crm-rep-metrics strong {
  display: block;
  text-align: center;
}

.company-crm-rep-metrics span {
  color: var(--crm-muted);
  font-size: 0.48rem;
  font-weight: 700;
}

.company-crm-rep-metrics strong {
  margin-top: 1px;
  color: var(--crm-text);
  font-size: 0.66rem;
  font-weight: 900;
}

.company-crm-rep-progress {
  margin-top: 13px;
}

.company-crm-rep-progress>div,
.company-crm-rep-revenue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.company-crm-rep-progress span,
.company-crm-rep-revenue span {
  color: var(--crm-muted);
  font-size: 0.51rem;
  font-weight: 700;
}

.company-crm-rep-progress strong,
.company-crm-rep-revenue strong {
  color: var(--crm-text);
  font-size: 0.6rem;
  font-weight: 900;
}

.company-crm-rep-revenue {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--crm-line);
}

.company-crm-rep-revenue strong {
  color: var(--crm-emerald);
}

.company-crm-modal {
  color: #f8fafc;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.company-crm-modal-dialog {
  padding: 0 !important;
  overflow: hidden auto !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 20px !important;
  background: #10172a !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.55) !important;
}

html.light .company-crm-modal-dialog {
  color: #172033 !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22) !important;
}

.company-crm-modal-head {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
  background: linear-gradient(135deg, rgba(109, 99, 234, 0.13), rgba(34, 199, 223, 0.05));
}

.company-crm-modal-head>span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 13px;
  background: linear-gradient(145deg, #22c7df, #5b50df);
}

.company-crm-modal-head h2 {
  margin: 0;
  color: inherit;
  font-size: 0.88rem;
  font-weight: 900;
}

.company-crm-modal-head p {
  margin: 3px 0 0;
  color: #94a3b8;
  font-size: 0.55rem;
  font-weight: 650;
  line-height: 1.6;
}

html.light .company-crm-modal-head p {
  color: #66758d;
}

.company-crm-modal-head>button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.07);
  cursor: pointer;
}

.company-crm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px;
}

.company-crm-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #94a3b8;
  font-size: 0.56rem;
  font-weight: 800;
}

html.light .company-crm-field {
  color: #66758d;
}

.company-crm-field--wide {
  grid-column: 1 / -1;
}

.company-crm-field input,
.company-crm-field select,
.company-crm-field textarea,
.qm-item-row input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 11px;
  outline: 0;
  background: rgba(15, 23, 42, 0.62);
  font-size: 0.64rem;
  font-weight: 700;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.company-crm-field input,
.company-crm-field select {
  height: 41px;
  padding: 0 11px;
}

.company-crm-field textarea {
  min-height: 76px;
  padding: 10px 11px;
  resize: vertical;
}

html.light .company-crm-field input,
html.light .company-crm-field select,
html.light .company-crm-field textarea,
html.light .qm-item-row input {
  color: #172033;
  border-color: rgba(15, 23, 42, 0.1);
  background: #f8faff;
}

.company-crm-field input:focus,
.company-crm-field select:focus,
.company-crm-field textarea:focus,
.qm-item-row input:focus {
  border-color: rgba(109, 99, 234, 0.55);
  box-shadow: 0 0 0 3px rgba(109, 99, 234, 0.1);
}

.company-crm-form-error,
.company-crm-form-notice {
  margin: 0 20px 14px;
  padding: 10px 12px;
  color: #fb7185;
  border: 1px solid rgba(251, 113, 133, 0.2);
  border-radius: 11px;
  background: rgba(251, 113, 133, 0.08);
  font-size: 0.58rem;
  font-weight: 800;
}

.company-crm-form-notice {
  margin-top: 15px;
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.08);
}

.company-crm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.company-crm-modal-footer--split {
  justify-content: space-between;
}

.company-crm-modal-footer--split>div:last-child {
  display: flex;
  gap: 8px;
}

.company-crm-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 20px 10px;
  padding-top: 2px;
}

.company-crm-lines-head span,
.company-crm-lines-head small {
  display: block;
}

.company-crm-lines-head span {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 900;
}

.company-crm-lines-head small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 650;
}

.company-crm-lines-head button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: #8b83f0;
  border: 1px dashed rgba(109, 99, 234, 0.3);
  border-radius: 9px;
  background: rgba(109, 99, 234, 0.08);
  cursor: pointer;
  font-size: 0.55rem;
  font-weight: 850;
}

.company-crm-line-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 20px;
}

.qm-item-row {
  display: grid;
  grid-template-columns: 1.6fr 1.3fr 0.65fr 0.85fr auto 30px;
  align-items: end;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.04);
}

.qm-item-row label {
  min-width: 0;
}

.qm-item-row label>span {
  display: block;
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: 0.48rem;
  font-weight: 750;
}

.qm-item-row input {
  height: 36px;
  padding: 0 9px;
}

.qm-item-row .qm-total {
  align-self: center;
  color: #34d399;
  font-size: 0.56rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.qm-item-row .qm-del-item {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  align-self: center;
  color: #fb7185;
  border: 1px solid rgba(251, 113, 133, 0.18);
  border-radius: 9px;
  background: rgba(251, 113, 133, 0.08);
  cursor: pointer;
}

.company-crm-document-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 20px 0;
  padding: 12px 14px;
  border: 1px solid rgba(52, 211, 153, 0.16);
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.07);
}

.company-crm-document-total span {
  color: #94a3b8;
  font-size: 0.56rem;
  font-weight: 750;
}

.company-crm-document-total strong {
  color: #34d399;
  font-size: 0.76rem;
  font-weight: 900;
}

.company-crm-payment-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 18px 20px 14px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 13px;
  background: rgba(148, 163, 184, 0.05);
}

.company-crm-payment-overview>div {
  min-width: 0;
  padding: 11px 12px;
}

.company-crm-payment-overview>div+div {
  border-inline-start: 1px solid rgba(148, 163, 184, 0.13);
}

.company-crm-payment-overview span,
.company-crm-payment-overview strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-crm-payment-overview span {
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 700;
}

.company-crm-payment-overview strong {
  margin-top: 2px;
  color: inherit;
  font-size: 0.62rem;
  font-weight: 900;
}

.company-crm-payment-overview+.company-crm-field {
  margin: 0 20px 16px;
}

@media (max-width: 1120px) {
  .company-crm-hero-side {
    min-width: 290px;
  }

  .company-crm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-crm-customer-grid,
  .company-crm-team-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .company-crm-page {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    gap: 13px;
  }

  .company-crm-hero {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    padding: 19px;
    border-radius: 20px;
  }

  .company-crm-hero-copy {
    align-items: flex-start;
    gap: 12px;
  }

  .company-crm-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .company-crm-eyebrow {
    display: none;
  }

  .company-crm-hero h1 {
    font-size: 1.1rem;
  }

  .company-crm-hero p {
    font-size: 0.68rem;
  }

  .company-crm-hero-side {
    min-width: 0;
    width: 100%;
    align-items: stretch;
  }

  .company-crm-hero-side .company-crm-primary-action {
    width: 100%;
  }

  .company-crm-kpi-grid,
  .company-crm-collection-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-crm-tabs {
    border-radius: 14px;
  }

  .company-crm-section-head,
  .company-crm-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .company-crm-search,
  .company-crm-toolbar,
  .company-crm-section-head>.company-crm-primary-action {
    width: 100%;
  }

  .company-crm-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-crm-card-actions {
    width: 100%;
  }

  .company-crm-action {
    flex: 1;
  }

  .company-crm-action--danger {
    flex: 0 0 34px;
  }

  .company-crm-pipeline-summary,
  .company-crm-document-summary {
    grid-template-columns: 1fr;
  }

  .company-crm-pipeline-summary>div+div,
  .company-crm-document-summary>div+div {
    border-inline-start: 0;
    border-top: 1px solid var(--crm-line);
  }

  .company-crm-team-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-crm-team-summary>div:nth-child(3) {
    border-inline-start: 0;
    border-top: 1px solid var(--crm-line);
  }

  .company-crm-team-summary>div:nth-child(4) {
    border-top: 1px solid var(--crm-line);
  }

  #page-content .company-crm-table {
    min-width: 0 !important;
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .company-crm-table thead {
    display: none;
  }

  .company-crm-table tbody,
  .company-crm-table tr,
  .company-crm-table td {
    display: block;
    width: 100%;
  }

  .company-crm-table tbody {
    padding: 9px;
  }

  .company-crm-document-row {
    overflow: hidden;
    margin-bottom: 9px;
    border: 1px solid var(--crm-line);
    border-radius: 14px;
    background: var(--crm-panel-soft);
  }

  .company-crm-document-row:last-child {
    margin-bottom: 0;
  }

  .company-crm-table td {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--crm-line);
    text-align: end;
  }

  .company-crm-table td::before {
    flex: 0 0 auto;
    color: var(--crm-muted);
    content: attr(data-label);
    font-size: 0.54rem;
    font-weight: 850;
  }

  .company-crm-table td:nth-child(2)::before {
    display: none;
  }

  .company-crm-table td:last-child {
    border-bottom: 0;
  }

  .company-crm-document-customer {
    width: 100%;
  }

  .company-crm-modal {
    padding: 10px !important;
  }

  .company-crm-modal-dialog {
    max-height: calc(100vh - 20px) !important;
    border-radius: 17px !important;
  }

  .company-crm-form-grid {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .company-crm-field--wide {
    grid-column: auto;
  }

  .company-crm-modal-head,
  .company-crm-modal-footer {
    padding-inline: 15px;
  }

  .company-crm-modal-footer--split {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .company-crm-modal-footer--split>div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .company-crm-modal-footer--split .company-crm-danger-action {
    width: 100%;
  }

  .company-crm-lines-head,
  .company-crm-line-items,
  .company-crm-document-total,
  .company-crm-payment-overview+.company-crm-field {
    margin-inline: 15px;
  }

  .qm-item-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qm-item-row .qm-total {
    text-align: start;
  }

  .qm-item-row .qm-del-item {
    justify-self: end;
  }
}

@media (max-width: 480px) {
  .company-crm-hero {
    padding: 17px 15px;
  }

  .company-crm-kpi-grid,
  .company-crm-collection-summary {
    grid-template-columns: 1fr;
  }

  .company-crm-customer-main {
    align-items: flex-start;
    padding: 14px;
  }

  .company-crm-customer-avatar {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }

  .company-crm-customer-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-crm-customer-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-crm-customer-details>div:last-child {
    grid-column: 1 / -1;
    border-inline-start: 0;
    border-top: 1px solid var(--crm-line);
  }

  .company-crm-rep-head {
    grid-template-columns: 43px minmax(0, 1fr);
  }

  .company-crm-rep-head small {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .company-crm-payment-overview {
    grid-template-columns: 1fr;
    margin-inline: 15px;
  }

  .company-crm-payment-overview>div+div {
    border-inline-start: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
  }

  .qm-item-row {
    grid-template-columns: 1fr;
  }

  .qm-item-row .qm-del-item {
    justify-self: start;
  }

  .company-crm-modal-footer:not(.company-crm-modal-footer--split) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .company-crm-page *,
  .company-crm-page *::before,
  .company-crm-page *::after,
  .company-crm-modal * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Company procurement & supplier workspace
   ========================================================= */
.company-proc-page {
  --crm-primary: #e89a2c;
  --crm-primary-soft: rgba(232, 154, 44, 0.12);
  --crm-cyan: #2dd4bf;
  --crm-line-strong: rgba(232, 154, 44, 0.22);
}

html.light .company-proc-page {
  --crm-primary: #c97513;
  --crm-primary-soft: rgba(201, 117, 19, 0.09);
  --crm-cyan: #0f9f8f;
  --crm-line-strong: rgba(201, 117, 19, 0.18);
}

.company-proc-hero {
  background:
    radial-gradient(circle at 11% 6%, rgba(45, 212, 191, 0.12), transparent 25%),
    radial-gradient(circle at 88% 35%, rgba(245, 158, 11, 0.2), transparent 33%),
    linear-gradient(120deg, rgba(27, 28, 39, 0.98), rgba(18, 28, 44, 0.96));
}

html.light .company-proc-hero {
  background:
    radial-gradient(circle at 11% 6%, rgba(13, 148, 136, 0.08), transparent 25%),
    radial-gradient(circle at 88% 35%, rgba(245, 158, 11, 0.12), transparent 33%),
    linear-gradient(120deg, #fff, #fffaf1);
}

.company-proc-hero::after {
  border-color: rgba(245, 158, 11, 0.2);
}

.company-proc-hero-icon,
.company-proc-supplier-avatar,
.company-proc-modal-head>span {
  background: linear-gradient(145deg, #2dd4bf, #e89a2c 92%);
  box-shadow: 0 15px 32px rgba(232, 154, 44, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.company-proc-page .company-crm-primary-action {
  background: linear-gradient(135deg, #e89a2c, #d97706);
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.2);
}

.company-proc-page .company-crm-tab.active {
  border-color: rgba(232, 154, 44, 0.2);
  box-shadow: 0 7px 18px rgba(217, 119, 6, 0.08);
}

.company-proc-supplier-grid {
  align-items: stretch;
}

.company-proc-supplier-card {
  display: flex;
  flex-direction: column;
}

.company-proc-supplier-card .company-crm-card-footer {
  margin-top: auto;
}

.company-proc-supplier-metrics {
  grid-template-columns: 0.62fr 0.62fr 1.6fr;
}

.company-proc-supplier-metrics strong.is-due {
  color: var(--crm-rose);
}

.company-proc-summary {
  margin-bottom: 13px;
}

.company-proc-request-list,
.company-proc-approval-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-proc-request-card {
  --proc-priority: var(--crm-primary);
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--crm-line);
  border-radius: 17px;
  background: var(--crm-panel);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.07);
}

.company-proc-request-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--proc-priority);
  content: '';
}

.company-proc-request-card[data-priority="low"] {
  --proc-priority: #60a5fa;
}

.company-proc-request-card[data-priority="medium"] {
  --proc-priority: #a78bfa;
}

.company-proc-request-card[data-priority="high"] {
  --proc-priority: var(--crm-amber);
}

.company-proc-request-card[data-priority="urgent"] {
  --proc-priority: var(--crm-rose);
}

.company-proc-request-marker {
  padding: 7px 9px;
  color: var(--proc-priority);
  border: 1px solid color-mix(in srgb, var(--proc-priority) 20%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--proc-priority) 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.54rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-proc-request-body,
.company-proc-request-title>div:first-child,
.company-proc-approval-main {
  min-width: 0;
}

.company-proc-request-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.company-proc-request-title>div:last-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.company-proc-request-title h3,
.company-proc-approval-head h3 {
  margin: 0;
  color: var(--crm-text);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.5;
}

.company-proc-request-title p,
.company-proc-approval-main>p {
  display: -webkit-box;
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 0.55rem;
  font-weight: 650;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.company-proc-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 9px;
}

.company-proc-request-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--crm-muted);
  font-size: 0.5rem;
  font-weight: 700;
}

.company-proc-request-actions,
.company-proc-approval-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.company-proc-table td>small {
  display: block;
  margin-top: 3px;
}

.company-proc-table .company-crm-status {
  vertical-align: middle;
}

.company-proc-table .company-crm-document-customer>span {
  background: linear-gradient(145deg, #2dd4bf, #e89a2c);
}

.company-proc-modal .company-crm-field input:focus,
.company-proc-modal .company-crm-field select:focus,
.company-proc-modal .company-crm-field textarea:focus,
.company-proc-line-row input:focus {
  border-color: rgba(232, 154, 44, 0.58);
  box-shadow: 0 0 0 3px rgba(232, 154, 44, 0.1);
}

.company-proc-modal .company-crm-primary-action {
  background: linear-gradient(135deg, #e89a2c, #d97706);
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.2);
}

.company-proc-modal .company-crm-lines-head button {
  color: #e89a2c;
  border-color: rgba(232, 154, 44, 0.3);
  background: rgba(232, 154, 44, 0.08);
}

.company-proc-line-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.6fr) minmax(80px, 0.55fr) minmax(110px, 0.8fr) minmax(100px, 0.75fr) 34px;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.04);
}

.company-proc-line-row label {
  min-width: 0;
}

.company-proc-line-row label>span {
  display: block;
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: 0.48rem;
  font-weight: 750;
}

.company-proc-line-row input {
  width: 100%;
  min-width: 0;
  height: 36px;
  box-sizing: border-box;
  padding: 0 9px;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  outline: 0;
  background: rgba(15, 23, 42, 0.62);
  font-size: 0.6rem;
  font-weight: 700;
}

html.light .company-proc-line-row input {
  color: #172033;
  border-color: rgba(15, 23, 42, 0.1);
  background: #f8faff;
}

.company-proc-line-row .proc-line-total {
  align-self: center;
  color: #34d399;
  font-size: 0.56rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.company-proc-line-row .proc-line-remove {
  align-self: center;
}

.company-proc-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 20px 0;
  padding: 12px 14px;
  border: 1px solid rgba(45, 212, 191, 0.17);
  border-radius: 12px;
  background: rgba(45, 212, 191, 0.07);
}

.company-proc-total span {
  color: #94a3b8;
  font-size: 0.55rem;
  font-weight: 750;
}

.company-proc-total strong {
  color: #34d399;
  font-size: 0.77rem;
  font-weight: 900;
}

.company-proc-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 18px 20px 0;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 13px;
  background: rgba(148, 163, 184, 0.05);
}

.company-proc-payment-summary>div {
  min-width: 0;
  padding: 11px 12px;
}

.company-proc-payment-summary>div+div {
  border-inline-start: 1px solid rgba(148, 163, 184, 0.13);
}

.company-proc-payment-summary span,
.company-proc-payment-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-proc-payment-summary span {
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 700;
}

.company-proc-payment-summary strong {
  margin-top: 2px;
  color: inherit;
  font-size: 0.62rem;
  font-weight: 900;
}

.company-proc-approval-count {
  padding: 8px 11px;
  color: var(--crm-amber);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 11px;
  background: rgba(251, 191, 36, 0.08);
  font-size: 0.58rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-proc-approval-card {
  --proc-priority: var(--crm-primary);
  min-width: 0;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--crm-line);
  border-radius: 17px;
  background: var(--crm-panel);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.07);
}

.company-proc-approval-card[data-priority="low"] {
  --proc-priority: #60a5fa;
}

.company-proc-approval-card[data-priority="medium"] {
  --proc-priority: #a78bfa;
}

.company-proc-approval-card[data-priority="high"] {
  --proc-priority: var(--crm-amber);
}

.company-proc-approval-card[data-priority="urgent"] {
  --proc-priority: var(--crm-rose);
}

.company-proc-approval-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  color: var(--proc-priority);
  border-radius: 14px;
  background: color-mix(in srgb, var(--proc-priority) 10%, transparent);
}

.company-proc-approval-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.company-proc-approval-head>div>span {
  color: var(--proc-priority);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.48rem;
  font-weight: 900;
}

.company-proc-approval-actions .company-crm-primary-action,
.company-proc-approval-actions .company-crm-danger-action {
  min-height: 37px;
  padding-inline: 12px;
}

@media (max-width: 900px) {
  .company-proc-request-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .company-proc-request-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 9px;
    border-top: 1px solid var(--crm-line);
  }

  .company-proc-approval-card {
    grid-template-columns: 45px minmax(0, 1fr);
  }

  .company-proc-approval-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 9px;
    border-top: 1px solid var(--crm-line);
  }
}

@media (max-width: 760px) {
  .company-proc-table tr {
    overflow: hidden;
    margin-bottom: 9px;
    border: 1px solid var(--crm-line);
    border-radius: 14px;
    background: var(--crm-panel-soft);
  }

  .company-proc-table tr:last-child {
    margin-bottom: 0;
  }

  .company-proc-table td:nth-child(2)::before {
    display: block;
  }

  .company-proc-table .company-crm-table-actions {
    justify-content: flex-end;
  }

  .company-proc-line-items,
  .company-proc-total {
    margin-inline: 15px;
  }

  .company-proc-line-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-proc-line-row>label:first-child {
    grid-column: 1 / -1;
  }

  .company-proc-line-row .proc-line-total {
    text-align: start;
  }

  .company-proc-line-row .proc-line-remove {
    justify-self: end;
  }
}

@media (max-width: 540px) {
  .company-proc-request-card {
    grid-template-columns: 1fr;
  }

  .company-proc-request-marker {
    justify-self: start;
  }

  .company-proc-request-title,
  .company-proc-approval-head {
    flex-direction: column;
  }

  .company-proc-request-actions,
  .company-proc-approval-actions {
    grid-column: auto;
    width: 100%;
  }

  .company-proc-request-actions .company-crm-action,
  .company-proc-approval-actions>button {
    flex: 1;
  }

  .company-proc-approval-card {
    grid-template-columns: 1fr;
  }

  .company-proc-approval-icon {
    width: 40px;
    height: 40px;
  }

  .company-proc-line-row {
    grid-template-columns: 1fr;
  }

  .company-proc-line-row>label:first-child {
    grid-column: auto;
  }

  .company-proc-line-row .proc-line-remove {
    justify-self: start;
  }

  .company-proc-payment-summary {
    grid-template-columns: 1fr;
    margin-inline: 15px;
  }

  .company-proc-payment-summary>div+div {
    border-inline-start: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Inventory & warehouse operations workspace
   ══════════════════════════════════════════════════════════════════════ */
.company-inv-page {
  --inv-accent: #18b77f;
  --inv-accent-2: #27d5a2;
  --inv-accent-soft: rgba(24, 183, 127, 0.13);
  --inv-blue: #4a7dff;
  --inv-amber: #f6ad3c;
  --inv-red: #f06467;
  --inv-surface: rgba(18, 29, 40, 0.84);
  --inv-surface-strong: #142331;
  --inv-line: rgba(148, 177, 195, 0.15);
  --inv-muted: #8fa5b5;
  --inv-text: #eef8f5;
  position: relative;
  color: var(--inv-text);
}

html.light .company-inv-page {
  --inv-surface: rgba(255, 255, 255, 0.93);
  --inv-surface-strong: #ffffff;
  --inv-line: rgba(22, 73, 76, 0.12);
  --inv-muted: #677d83;
  --inv-text: #16333a;
}

.company-inv-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
  min-height: 286px;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(89, 229, 186, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 5%, rgba(50, 217, 168, 0.22), transparent 36%),
    linear-gradient(135deg, #102935 0%, #113d3d 54%, #0d5b49 100%);
  box-shadow: 0 24px 60px rgba(1, 25, 30, 0.25);
  isolation: isolate;
}

.company-inv-hero::before,
.company-inv-hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(118, 247, 207, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.company-inv-hero::before {
  width: 480px;
  height: 480px;
  inset-inline-end: -210px;
  top: -240px;
}

.company-inv-hero::after {
  width: 280px;
  height: 280px;
  inset-inline-end: -110px;
  bottom: -200px;
}

.company-inv-hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 760px;
}

.company-inv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  padding: 7px 11px;
  border: 1px solid rgba(124, 244, 207, 0.22);
  border-radius: 999px;
  color: #9df6d5;
  background: rgba(10, 42, 42, 0.43);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.company-inv-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.company-inv-hero-copy>p {
  max-width: 690px;
  margin: 17px 0 0;
  color: rgba(223, 250, 241, 0.72);
  font-size: 0.98rem;
  line-height: 1.9;
}

.company-inv-hero-actions,
.company-inv-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.company-inv-hero-actions {
  margin-top: 25px;
}

.company-inv-primary,
.company-inv-secondary,
.company-inv-link,
.company-inv-mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 15px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.company-inv-primary {
  color: #062b25;
  background: linear-gradient(135deg, #8ef0cc, #35d6a4);
  box-shadow: 0 10px 24px rgba(25, 190, 137, 0.18);
}

.company-inv-primary:hover,
.company-inv-secondary:hover,
.company-inv-link:hover,
.company-inv-mini-action:hover {
  transform: translateY(-1px);
}

.company-inv-primary:disabled,
.company-inv-secondary:disabled {
  opacity: 0.62;
  cursor: wait;
  transform: none;
}

.company-inv-secondary {
  color: var(--inv-text);
  border: 1px solid var(--inv-line);
  background: rgba(143, 180, 184, 0.08);
  box-shadow: none;
}

.company-inv-hero .company-inv-secondary {
  color: #e7fff7;
  border-color: rgba(184, 247, 226, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.company-inv-link {
  min-height: 32px;
  padding: 6px 9px;
  color: var(--inv-accent-2);
  background: transparent;
}

.company-inv-mini-action {
  width: 34px;
  min-height: 34px;
  padding: 0;
  color: var(--inv-accent-2);
  border: 1px solid rgba(42, 211, 160, 0.2);
  background: var(--inv-accent-soft);
}

.company-inv-hero-visual {
  position: relative;
  z-index: 2;
  min-height: 205px;
}

.company-inv-orbit {
  position: absolute;
  width: 180px;
  height: 180px;
  inset-inline-end: 35px;
  top: 5px;
  border: 1px dashed rgba(134, 245, 211, 0.35);
  border-radius: 50%;
  animation: inv-orbit-spin 22s linear infinite;
}

.company-inv-orbit>span {
  position: absolute;
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  top: 48px;
  left: 48px;
  color: #a5f3d9;
  border: 1px solid rgba(173, 250, 225, 0.28);
  border-radius: 25px;
  background: rgba(10, 45, 42, 0.74);
  box-shadow: inset 0 0 28px rgba(87, 230, 187, 0.1), 0 20px 38px rgba(2, 25, 25, 0.28);
  transform: rotate(0deg);
}

.company-inv-orbit i {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 3px solid #0b4b40;
  border-radius: 50%;
  background: #82ebc7;
  box-shadow: 0 0 0 5px rgba(80, 232, 184, 0.11);
}

.company-inv-orbit i:nth-of-type(1) {
  top: -5px;
  left: 82px;
}

.company-inv-orbit i:nth-of-type(2) {
  inset-inline-end: -4px;
  top: 104px;
}

.company-inv-orbit i:nth-of-type(3) {
  bottom: 13px;
  left: 19px;
}

.company-inv-hero-chip {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 15px 17px;
  border: 1px solid rgba(164, 246, 220, 0.2);
  border-radius: 16px;
  background: rgba(6, 39, 38, 0.68);
  box-shadow: 0 16px 34px rgba(2, 23, 25, 0.25);
  backdrop-filter: blur(14px);
}

.company-inv-hero-chip small {
  color: #78dbbb;
  font-size: 0.68rem;
  font-weight: 800;
}

.company-inv-hero-chip strong {
  margin-top: 4px;
  color: #f4fffb;
  font-size: 0.83rem;
}

@keyframes inv-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-inv-orbit {
    animation: none;
  }
}

.company-inv-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.company-inv-page .company-crm-kpi {
  border-color: var(--inv-line);
  background: var(--inv-surface);
  box-shadow: 0 13px 34px rgba(4, 24, 31, 0.08);
}

.company-inv-page .company-crm-kpi-icon {
  color: var(--inv-accent-2);
  background: var(--inv-accent-soft);
}

html.light .company-inv-page .company-crm-kpi {
  box-shadow: 0 13px 34px rgba(22, 69, 72, 0.07);
}

.company-inv-tabs {
  margin-top: 16px;
  padding: 7px;
  border: 1px solid var(--inv-line);
  border-radius: 16px;
  background: var(--inv-surface);
}

.company-inv-page .company-crm-tab.active {
  color: #062f28;
  background: linear-gradient(135deg, #9af0d1, #47d5a7);
  box-shadow: 0 8px 18px rgba(26, 185, 134, 0.17);
}

.company-inv-content {
  min-height: 320px;
  margin-top: 16px;
}

.company-inv-loading {
  min-height: 150px;
}

.company-inv-metric-error {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  color: var(--inv-red);
  border: 1px solid rgba(240, 100, 103, 0.2);
  border-radius: 13px;
  background: rgba(240, 100, 103, 0.07);
}

.company-inv-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.company-inv-section-head>div:first-child>span {
  color: var(--inv-accent-2);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.company-inv-section-head h2 {
  margin: 5px 0 0;
  color: var(--inv-text);
  font-size: clamp(1.24rem, 2vw, 1.65rem);
}

.company-inv-section-head p {
  margin: 6px 0 0;
  color: var(--inv-muted);
  font-size: 0.8rem;
  line-height: 1.7;
}

.company-inv-live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: var(--inv-accent-2);
  border: 1px solid rgba(49, 214, 163, 0.16);
  border-radius: 999px;
  background: var(--inv-accent-soft);
  font-size: 0.7rem;
  font-weight: 800;
}

.company-inv-live i,
.company-inv-stock-status i,
.company-inv-warehouse-state {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--inv-accent-2);
  box-shadow: 0 0 0 4px rgba(46, 215, 164, 0.12);
}

.company-inv-overview-strip,
.company-inv-summary,
.company-inv-count-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--inv-line);
  border-radius: 16px;
  background: var(--inv-surface);
}

.company-inv-overview-strip>div,
.company-inv-summary>div,
.company-inv-count-detail-summary>div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
}

.company-inv-overview-strip>div+div,
.company-inv-summary>div+div,
.company-inv-count-detail-summary>div+div {
  border-inline-start: 1px solid var(--inv-line);
}

.company-inv-overview-strip span,
.company-inv-summary span,
.company-inv-count-detail-summary span {
  color: var(--inv-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.company-inv-overview-strip strong,
.company-inv-summary strong,
.company-inv-count-detail-summary strong {
  color: var(--inv-text);
  font-size: 1.05rem;
  font-weight: 900;
}

.company-inv-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-inv-summary>div:nth-child(2) strong {
  color: var(--inv-amber);
}

.company-inv-summary>div:nth-child(3) strong {
  color: var(--inv-red);
}

.company-inv-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
  margin-bottom: 16px;
}

.company-inv-panel {
  border: 1px solid var(--inv-line);
  border-radius: 18px;
  background: var(--inv-surface);
  box-shadow: 0 14px 38px rgba(4, 25, 31, 0.07);
}

.company-inv-panel>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--inv-line);
}

.company-inv-panel>header>div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.company-inv-panel>header>div>span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--inv-accent-2);
  border-radius: 11px;
  background: var(--inv-accent-soft);
}

.company-inv-panel h3 {
  margin: 0;
  color: var(--inv-text);
  font-size: 0.94rem;
}

.company-inv-panel header p {
  margin: 3px 0 0;
  color: var(--inv-muted);
  font-size: 0.7rem;
}

.company-inv-panel>header>b {
  display: grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  color: var(--inv-amber);
  border-radius: 10px;
  background: rgba(246, 173, 60, 0.11);
}

.company-inv-alert-list,
.company-inv-recent-list {
  display: flex;
  flex-direction: column;
}

.company-inv-alert-row,
.company-inv-recent-row {
  display: grid;
  align-items: center;
  gap: 11px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--inv-line);
}

.company-inv-alert-row:last-child,
.company-inv-recent-row:last-child {
  border-bottom: 0;
}

.company-inv-alert-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.company-inv-recent-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.company-inv-item-avatar,
.company-inv-recent-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

.company-inv-item-avatar[data-tone="low"],
.company-inv-recent-icon[data-type="transfer"] {
  color: var(--inv-amber);
  background: rgba(246, 173, 60, 0.11);
}

.company-inv-item-avatar[data-tone="out"],
.company-inv-recent-icon[data-type="out"] {
  color: var(--inv-red);
  background: rgba(240, 100, 103, 0.1);
}

.company-inv-recent-icon[data-type="in"] {
  color: var(--inv-accent-2);
  background: var(--inv-accent-soft);
}

.company-inv-alert-row>div,
.company-inv-recent-row>div {
  min-width: 0;
}

.company-inv-alert-row strong,
.company-inv-recent-row strong {
  display: block;
  overflow: hidden;
  color: var(--inv-text);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-inv-alert-row small,
.company-inv-recent-row small,
.company-inv-recent-row time {
  display: block;
  margin-top: 3px;
  color: var(--inv-muted);
  font-size: 0.66rem;
}

.company-inv-alert-row>b,
.company-inv-recent-row>b {
  color: var(--inv-text);
  font-size: 0.78rem;
}

.company-inv-recent-row time {
  white-space: nowrap;
}

.company-inv-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 5px 8px;
  color: var(--inv-accent-2);
  border: 1px solid rgba(40, 211, 158, 0.15);
  border-radius: 999px;
  background: var(--inv-accent-soft);
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-inv-stock-status[data-status="low"] {
  color: var(--inv-amber);
  border-color: rgba(246, 173, 60, 0.18);
  background: rgba(246, 173, 60, 0.1);
}

.company-inv-stock-status[data-status="low"] i {
  background: var(--inv-amber);
  box-shadow: 0 0 0 4px rgba(246, 173, 60, 0.1);
}

.company-inv-stock-status[data-status="out"] {
  color: var(--inv-red);
  border-color: rgba(240, 100, 103, 0.18);
  background: rgba(240, 100, 103, 0.1);
}

.company-inv-stock-status[data-status="out"] i {
  background: var(--inv-red);
  box-shadow: 0 0 0 4px rgba(240, 100, 103, 0.1);
}

.company-inv-warehouse-health {
  overflow: hidden;
}

.company-inv-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.company-inv-health-row {
  padding: 14px;
  border: 1px solid var(--inv-line);
  border-radius: 14px;
  background: rgba(128, 170, 175, 0.04);
}

.company-inv-health-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.company-inv-health-head>span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: var(--inv-accent-2);
  border-radius: 9px;
  background: var(--inv-accent-soft);
}

.company-inv-health-head strong,
.company-inv-health-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-inv-health-head strong {
  color: var(--inv-text);
  font-size: 0.76rem;
}

.company-inv-health-head small,
.company-inv-health-row footer {
  color: var(--inv-muted);
  font-size: 0.63rem;
}

.company-inv-health-head b {
  color: var(--inv-text);
  font-size: 0.72rem;
}

.company-inv-health-bar {
  height: 6px;
  margin: 13px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(138, 175, 180, 0.1);
}

.company-inv-health-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--inv-accent), #6ee3bd);
}

.company-inv-health-row footer {
  display: flex;
  justify-content: space-between;
}

.company-inv-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.company-inv-toolbar label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--inv-muted);
  border: 1px solid var(--inv-line);
  border-radius: 12px;
  background: var(--inv-surface);
}

.company-inv-toolbar input,
.company-inv-toolbar select {
  width: 100%;
  color: var(--inv-text);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
}

.company-inv-toolbar select {
  width: auto;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--inv-line);
  border-radius: 12px;
  background: var(--inv-surface);
}

.company-inv-page .company-crm-table-wrap {
  border-color: var(--inv-line);
  background: var(--inv-surface);
}

.company-inv-page .company-crm-table th {
  color: var(--inv-muted);
  background: rgba(105, 151, 159, 0.05);
}

.company-inv-page .company-crm-table td {
  border-color: var(--inv-line);
}

.company-inv-product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.company-inv-product-cell>span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #85edca;
  border: 1px solid rgba(71, 213, 166, 0.16);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(31, 168, 127, 0.22), rgba(60, 107, 139, 0.12));
  font-size: 0.82rem;
  font-weight: 900;
}

html.light .company-inv-product-cell>span {
  color: #087554;
}

.company-inv-product-cell strong,
.company-inv-product-cell small {
  display: block;
}

.company-inv-product-cell strong {
  color: var(--inv-text);
  font-size: 0.79rem;
}

.company-inv-product-cell small {
  margin-top: 3px;
  color: var(--inv-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.64rem;
}

.company-inv-product-cell.is-compact>span {
  width: 33px;
  height: 33px;
  border-radius: 10px;
}

.company-inv-category,
.company-inv-unit {
  display: block;
}

.company-inv-category {
  color: var(--inv-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.company-inv-unit {
  margin-top: 3px;
  color: var(--inv-muted);
  font-size: 0.63rem;
}

.company-inv-qty {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.company-inv-qty strong {
  color: var(--inv-text);
  font-size: 1rem;
}

.company-inv-qty small {
  color: var(--inv-muted);
  font-size: 0.62rem;
}

.company-inv-breakdown {
  display: flex;
  max-width: 270px;
  flex-wrap: wrap;
  gap: 5px;
}

.company-inv-breakdown>span {
  display: inline-flex;
  gap: 5px;
  padding: 4px 7px;
  color: var(--inv-muted);
  border: 1px solid var(--inv-line);
  border-radius: 7px;
  background: rgba(126, 166, 172, 0.04);
  font-size: 0.61rem;
}

.company-inv-breakdown b {
  color: var(--inv-text);
}

.company-inv-price strong,
.company-inv-price small {
  display: block;
  white-space: nowrap;
}

.company-inv-price strong {
  color: var(--inv-text);
  font-size: 0.75rem;
}

.company-inv-price small {
  margin-top: 4px;
  color: var(--inv-accent-2);
  font-size: 0.67rem;
}

.company-inv-no-results {
  padding: 24px;
  color: var(--inv-muted);
  text-align: center;
  font-size: 0.78rem;
}

.company-inv-warehouse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.company-inv-warehouse-card {
  overflow: hidden;
  border: 1px solid var(--inv-line);
  border-radius: 18px;
  background: var(--inv-surface);
  box-shadow: 0 15px 36px rgba(4, 25, 31, 0.08);
  animation: inv-card-rise 380ms ease both;
  animation-delay: var(--inv-card-delay);
}

@keyframes inv-card-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.company-inv-warehouse-card>header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 18px;
  border-bottom: 1px solid var(--inv-line);
  background: linear-gradient(135deg, rgba(34, 190, 142, 0.1), rgba(53, 105, 143, 0.05));
}

.company-inv-warehouse-card>header>span {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--inv-accent-2);
  border: 1px solid rgba(61, 216, 168, 0.18);
  border-radius: 13px;
  background: var(--inv-accent-soft);
}

.company-inv-warehouse-card h3 {
  margin: 0;
  color: var(--inv-text);
  font-size: 0.92rem;
}

.company-inv-warehouse-card header p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  color: var(--inv-muted);
  font-size: 0.66rem;
}

.company-inv-warehouse-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 15px 10px;
}

.company-inv-warehouse-metrics>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 9px;
}

.company-inv-warehouse-metrics>div+div {
  border-inline-start: 1px solid var(--inv-line);
}

.company-inv-warehouse-metrics span {
  color: var(--inv-muted);
  font-size: 0.61rem;
}

.company-inv-warehouse-metrics strong {
  overflow: hidden;
  color: var(--inv-text);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-inv-warehouse-alert,
.company-inv-warehouse-ok {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 16px 14px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 0.67rem;
  font-weight: 800;
}

.company-inv-warehouse-alert {
  color: var(--inv-amber);
  background: rgba(246, 173, 60, 0.1);
}

.company-inv-warehouse-ok {
  color: var(--inv-accent-2);
  background: var(--inv-accent-soft);
}

.company-inv-warehouse-card>footer {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 50px;
  padding: 8px 10px;
  border-top: 1px solid var(--inv-line);
}

.company-inv-warehouse-card>footer>span {
  flex: 1;
}

.company-inv-movement-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  color: var(--inv-accent-2);
  border-radius: 8px;
  background: var(--inv-accent-soft);
  font-size: 0.67rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-inv-movement-badge[data-type="out"] {
  color: var(--inv-red);
  background: rgba(240, 100, 103, 0.1);
}

.company-inv-movement-badge[data-type="transfer"] {
  color: #8aa7ff;
  background: rgba(74, 125, 255, 0.1);
}

.company-inv-route {
  min-width: 150px;
  color: var(--inv-muted);
  font-size: 0.7rem;
}

.company-inv-route span {
  padding: 0 4px;
  color: var(--inv-accent-2);
}

.company-inv-move-qty {
  color: var(--inv-accent-2);
  white-space: nowrap;
}

.company-inv-move-qty[data-type="out"] {
  color: var(--inv-red);
}

.company-inv-move-qty[data-type="transfer"] {
  color: #8aa7ff;
}

.company-inv-move-qty small {
  color: var(--inv-muted);
  font-size: 0.61rem;
}

.company-inv-reference {
  color: var(--inv-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.67rem;
}

.company-inv-user-date strong,
.company-inv-user-date small {
  display: block;
  white-space: nowrap;
}

.company-inv-user-date strong {
  color: var(--inv-text);
  font-size: 0.7rem;
}

.company-inv-user-date small {
  margin-top: 3px;
  color: var(--inv-muted);
  font-size: 0.62rem;
}

.company-inv-count-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.company-inv-count-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--inv-line);
  border-radius: 17px;
  background: var(--inv-surface);
  box-shadow: 0 11px 28px rgba(4, 25, 31, 0.06);
}

.company-inv-count-mark {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  color: var(--inv-amber);
  border: 1px solid rgba(246, 173, 60, 0.16);
  border-radius: 14px;
  background: rgba(246, 173, 60, 0.09);
}

.company-inv-count-card[data-status="confirmed"] .company-inv-count-mark {
  color: var(--inv-accent-2);
  border-color: rgba(48, 214, 162, 0.16);
  background: var(--inv-accent-soft);
}

.company-inv-count-main {
  min-width: 0;
}

.company-inv-count-main header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.company-inv-count-main header span:first-child {
  color: var(--inv-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.61rem;
}

.company-inv-count-main h3 {
  margin: 3px 0 0;
  color: var(--inv-text);
  font-size: 0.88rem;
}

.company-inv-count-main>p {
  margin: 8px 0;
  overflow: hidden;
  color: var(--inv-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-inv-count-main footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.company-inv-count-main footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--inv-muted);
  font-size: 0.63rem;
}

.company-inv-count-status {
  padding: 5px 8px;
  color: var(--inv-amber);
  border-radius: 999px;
  background: rgba(246, 173, 60, 0.1);
  font-size: 0.62rem;
  font-weight: 900;
}

.company-inv-count-status[data-status="confirmed"] {
  color: var(--inv-accent-2);
  background: var(--inv-accent-soft);
}

.company-inv-count-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.company-inv-empty,
.company-inv-error {
  border: 1px solid var(--inv-line);
  border-radius: 18px;
  background: var(--inv-surface);
}

.company-inv-modal .company-crm-modal-dialog {
  border-color: var(--inv-line);
}

.company-inv-modal-head>span {
  color: var(--inv-accent-2);
  background: var(--inv-accent-soft);
}

.company-inv-modal .company-crm-field input:focus,
.company-inv-modal .company-crm-field select:focus,
.company-inv-modal .company-crm-field textarea:focus {
  border-color: rgba(43, 209, 158, 0.52);
  box-shadow: 0 0 0 3px rgba(43, 209, 158, 0.09);
}

.company-inv-type-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0 20px 18px;
  padding: 6px;
  border: 1px solid var(--inv-line);
  border-radius: 13px;
  background: rgba(115, 156, 163, 0.05);
}

.company-inv-type-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  color: var(--inv-muted);
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.company-inv-type-switch button.active {
  color: #073329;
  background: linear-gradient(135deg, #9cefd2, #46d5a6);
  box-shadow: 0 7px 16px rgba(30, 188, 139, 0.15);
}

.company-inv-stock-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  margin: 0 20px;
  padding: 9px 11px;
  color: var(--inv-muted);
  border: 1px solid var(--inv-line);
  border-radius: 10px;
  background: rgba(107, 151, 157, 0.05);
  font-size: 0.69rem;
}

.company-inv-stock-hint strong {
  color: var(--inv-text);
}

.company-inv-count-editor,
.company-inv-count-details {
  margin: 18px 20px 0;
  overflow: hidden;
  border: 1px solid var(--inv-line);
  border-radius: 13px;
}

.company-inv-count-editor>header,
.company-inv-count-editor-row,
.company-inv-count-details>header,
.company-inv-count-detail-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(90px, 0.55fr));
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
}

.company-inv-count-editor>header,
.company-inv-count-details>header {
  color: var(--inv-muted);
  background: rgba(106, 149, 155, 0.07);
  font-size: 0.64rem;
  font-weight: 800;
}

#inv-count-items {
  max-height: 330px;
  overflow: auto;
}

#inv-count-items>p {
  margin: 0;
  padding: 30px;
  color: var(--inv-muted);
  text-align: center;
  font-size: 0.74rem;
}

.company-inv-count-editor-row,
.company-inv-count-detail-row {
  border-top: 1px solid var(--inv-line);
}

.company-inv-count-editor-row:first-child {
  border-top: 0;
}

.company-inv-count-editor-row span strong,
.company-inv-count-editor-row span small,
.company-inv-count-detail-row span strong,
.company-inv-count-detail-row span small {
  display: block;
}

.company-inv-count-editor-row span strong,
.company-inv-count-detail-row span strong {
  color: var(--inv-text);
  font-size: 0.73rem;
}

.company-inv-count-editor-row span small,
.company-inv-count-detail-row span small {
  margin-top: 3px;
  color: var(--inv-muted);
  font-size: 0.61rem;
}

.company-inv-count-editor-row>b,
.company-inv-count-detail-row>b {
  color: var(--inv-text);
  font-size: 0.74rem;
}

.company-inv-count-editor-row input {
  width: 100%;
  min-height: 35px;
  padding: 6px 8px;
  color: var(--inv-text);
  border: 1px solid var(--inv-line);
  border-radius: 8px;
  outline: 0;
  background: rgba(105, 150, 157, 0.06);
  font: inherit;
}

.company-inv-count-editor-row em,
.company-inv-count-detail-row em {
  color: var(--inv-muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

.company-inv-count-editor-row.has-variance {
  background: rgba(246, 173, 60, 0.045);
}

.company-inv-count-editor-row.has-variance em,
.company-inv-count-detail-row em[data-sign="1"] {
  color: var(--inv-amber);
}

.company-inv-count-detail-row em[data-sign="-1"] {
  color: var(--inv-red);
}

.company-inv-count-detail-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 20px 16px;
}

.company-inv-count-note {
  margin: 14px 20px 0;
  padding: 11px 13px;
  color: var(--inv-muted);
  border-radius: 10px;
  background: rgba(110, 154, 160, 0.06);
  font-size: 0.72rem;
  line-height: 1.7;
}

@media (max-width: 1050px) {
  .company-inv-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-inv-warehouse-grid,
  .company-inv-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .company-inv-hero {
    grid-template-columns: 1fr;
  }

  .company-inv-hero-copy {
    max-width: 650px;
  }

  .company-inv-hero-visual {
    position: absolute;
    inset-inline-end: 22px;
    top: 34px;
    width: 210px;
    opacity: 0.36;
  }

  .company-inv-hero-chip {
    display: none;
  }

  .company-inv-overview-grid {
    grid-template-columns: 1fr;
  }

  .company-inv-overview-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-inv-overview-strip>div:nth-child(3) {
    border-inline-start: 0;
    border-top: 1px solid var(--inv-line);
  }

  .company-inv-overview-strip>div:nth-child(4) {
    border-top: 1px solid var(--inv-line);
  }
}

@media (max-width: 760px) {
  .company-inv-hero {
    min-height: auto;
    padding: 26px 22px;
    border-radius: 22px;
  }

  .company-inv-hero h1 {
    font-size: 1.9rem;
  }

  .company-inv-hero-visual {
    display: none;
  }

  .company-inv-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .company-inv-section-head>button,
  .company-inv-head-actions,
  .company-inv-head-actions>button {
    width: 100%;
  }

  .company-inv-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-inv-summary {
    grid-template-columns: 1fr;
  }

  .company-inv-summary>div+div {
    border-inline-start: 0;
    border-top: 1px solid var(--inv-line);
  }

  .company-inv-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .company-inv-toolbar select {
    width: 100%;
  }

  .company-inv-warehouse-grid,
  .company-inv-health-grid {
    grid-template-columns: 1fr;
  }

  .company-inv-table thead {
    display: none;
  }

  .company-inv-table,
  .company-inv-table tbody,
  .company-inv-table tr,
  .company-inv-table td {
    display: block;
    width: 100%;
  }

  .company-inv-table tr {
    padding: 12px 13px;
    border-bottom: 1px solid var(--inv-line);
  }

  .company-inv-table tr:last-child {
    border-bottom: 0;
  }

  .company-inv-table td {
    display: grid;
    grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 12px;
    padding: 8px 0 !important;
    border: 0 !important;
    text-align: start !important;
  }

  .company-inv-table td::before {
    content: attr(data-label);
    color: var(--inv-muted);
    font-size: 0.65rem;
    font-weight: 800;
  }

  .company-inv-product-cell {
    min-width: 0;
  }

  .company-inv-count-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .company-inv-count-actions {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid var(--inv-line);
  }

  .company-inv-count-actions .company-inv-link,
  .company-inv-count-actions .company-inv-primary {
    flex: 1;
  }

  .company-inv-count-editor,
  .company-inv-count-details {
    overflow-x: auto;
  }

  .company-inv-count-editor>header,
  .company-inv-count-editor-row,
  .company-inv-count-details>header,
  .company-inv-count-detail-row {
    min-width: 600px;
  }
}

@media (max-width: 540px) {
  .company-inv-metrics {
    grid-template-columns: 1fr;
  }

  .company-inv-hero-actions,
  .company-inv-head-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .company-inv-hero-actions>button {
    width: 100%;
  }

  .company-inv-overview-strip {
    grid-template-columns: 1fr;
  }

  .company-inv-overview-strip>div+div,
  .company-inv-overview-strip>div:nth-child(3) {
    border-inline-start: 0;
    border-top: 1px solid var(--inv-line);
  }

  .company-inv-alert-row,
  .company-inv-recent-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .company-inv-alert-row .company-inv-stock-status,
  .company-inv-recent-row time {
    grid-column: 2 / -1;
  }

  .company-inv-warehouse-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .company-inv-warehouse-metrics>div {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .company-inv-warehouse-metrics>div+div {
    padding-top: 10px;
    border-inline-start: 0;
    border-top: 1px solid var(--inv-line);
  }

  .company-inv-count-main header {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-inv-count-mark {
    width: 39px;
    height: 39px;
  }

  .company-inv-type-switch {
    grid-template-columns: 1fr;
  }

  .company-inv-count-detail-summary {
    grid-template-columns: 1fr;
  }

  .company-inv-count-detail-summary>div+div {
    border-inline-start: 0;
    border-top: 1px solid var(--inv-line);
  }
}

/* Keep the Sabiq launcher above legacy floating-tool placement rules. */
body .voice-assistant-widget {
  left: 100px;
  right: auto;
  bottom: 28px;
  z-index: 9200;
  display: block;
  width: auto;
  align-items: initial;
  gap: 0;
}

html.ltr body .voice-assistant-widget {
  left: auto;
  right: 100px;
  align-items: initial;
}

@media (max-width: 900px) {
  body .voice-assistant-widget {
    left: 16px;
    right: auto;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  html.ltr body .voice-assistant-widget {
    left: auto;
    right: 16px;
  }
}

/* ================================================================
   Worship Center V2 — prayers, adhkar, tasbeeh and Quran
   ================================================================ */
.worship-v2,
.worship-detail-v2 {
  --worship-bg: rgba(15, 18, 34, 0.74);
  --worship-card: rgba(255, 255, 255, 0.045);
  --worship-card-strong: rgba(255, 255, 255, 0.075);
  --worship-line: rgba(255, 255, 255, 0.09);
  --worship-muted: var(--clr-text-muted);
  --worship-ink: var(--clr-text);
  --worship-purple: #7568f2;
  --worship-purple-soft: rgba(117, 104, 242, 0.14);
  --worship-mint: #4bd6a2;
  --worship-gold: #f4bf58;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: var(--worship-ink);
}

html.light .worship-v2,
html.light .worship-detail-v2 {
  --worship-bg: rgba(255, 255, 255, 0.92);
  --worship-card: #fff;
  --worship-card-strong: #f7f7fc;
  --worship-line: rgba(54, 47, 103, 0.1);
  --worship-purple-soft: rgba(103, 87, 222, 0.09);
}

.worship-v2 *,
.worship-detail-v2 * {
  box-sizing: border-box;
}

.worship-v2 button,
.worship-detail-v2 button,
.worship-detail-v2 input,
.worship-detail-v2 textarea {
  font: inherit;
}

.worship-v2 button,
.worship-detail-v2 button {
  color: inherit;
}

.worship-v2 button:focus-visible,
.worship-detail-v2 button:focus-visible,
.worship-detail-v2 input:focus-visible,
.worship-detail-v2 textarea:focus-visible {
  outline: 3px solid rgba(117, 104, 242, 0.32);
  outline-offset: 2px;
}

.worship-v2-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  min-height: 238px;
  margin-bottom: 18px;
  padding: 38px 40px;
  overflow: hidden;
  border: 1px solid rgba(141, 130, 255, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(123, 106, 244, 0.34), transparent 36%),
    radial-gradient(circle at 82% 15%, rgba(54, 205, 160, 0.13), transparent 30%),
    linear-gradient(135deg, #17162d 0%, #242047 54%, #161a31 100%);
  box-shadow: 0 24px 64px rgba(5, 7, 20, 0.26);
}

.worship-v2-hero::before,
.worship-v2-hero::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}

.worship-v2-hero::before {
  inset-inline-end: -72px;
  top: -104px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255, 255, 255, 0.025), 0 0 0 78px rgba(255, 255, 255, 0.018);
}

.worship-v2-hero::after {
  inset-inline-start: 46%;
  bottom: -83px;
  width: 220px;
  height: 150px;
  border-radius: 50%;
  background: rgba(117, 104, 242, 0.16);
  filter: blur(38px);
}

.worship-v2-hero-copy {
  max-width: 690px;
}

.worship-v2-eyebrow,
.worship-v2-section-head>div>span,
.worship-v2-score header>div>span,
.worship-v2-heatmap-card header span,
.worship-detail-v2-hero>div>span,
.worship-detail-v2-tasbeeh-copy>span,
.worship-detail-v2-week-chart header span,
.worship-detail-v2-sessions>header span,
.worship-detail-v2-toolbar>div>span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a8a0ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.worship-v2-hero-copy h2 {
  max-width: 640px;
  margin: 14px 0 8px;
  color: #fff;
  font-size: clamp(27px, 3.2vw, 43px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.worship-v2-hero-copy>p {
  max-width: 620px;
  margin: 0;
  color: rgba(244, 244, 255, 0.7);
  font-size: 14px;
  line-height: 1.9;
}

.worship-v2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 21px;
}

.worship-v2-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.69);
  font-size: 12px;
  font-weight: 600;
}

.worship-v2-location {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 280px);
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
  backdrop-filter: blur(12px);
}

.worship-v2-location-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(117, 104, 242, 0.28);
  color: #c4beff;
}

.worship-v2-location div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.worship-v2-location small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
}

.worship-v2-location strong {
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worship-v2-location button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.worship-v2-location button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.worship-v2-location button.is-loading svg {
  animation: worship-spin 0.8s linear infinite;
}

@keyframes worship-spin {
  to {
    transform: rotate(360deg);
  }
}

.worship-v2-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(76px, 1fr));
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--worship-line);
  border-radius: 20px;
  background: var(--worship-bg);
  scrollbar-width: none;
}

.worship-v2-days::-webkit-scrollbar {
  display: none;
}

.worship-v2-day {
  display: grid;
  min-width: 0;
  min-height: 80px;
  padding: 9px 6px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  transition: 0.2s ease;
}

.worship-v2-day:hover {
  background: var(--worship-card-strong);
}

.worship-v2-day span {
  color: var(--worship-muted);
  font-size: 10px;
  font-weight: 700;
}

.worship-v2-day strong {
  font-size: 16px;
  font-weight: 900;
}

.worship-v2-day i {
  width: 28px;
  height: 3px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--worship-line);
}

.worship-v2-day i::after {
  display: block;
  width: calc(var(--day-progress) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--worship-mint);
  content: '';
}

.worship-v2-day.is-today span::after {
  margin-inline-start: 4px;
  color: var(--worship-purple);
  content: '•';
}

.worship-v2-day.is-selected {
  background: linear-gradient(145deg, #7568f2, #5f54d8);
  color: #fff;
  box-shadow: 0 8px 22px rgba(98, 83, 224, 0.28);
}

.worship-v2-day.is-selected span,
.worship-v2-day.is-selected strong {
  color: #fff;
}

.worship-v2-day.is-selected i {
  background: rgba(255, 255, 255, 0.25);
}

.worship-v2-day.is-selected i::after {
  background: #fff;
}

.worship-v2-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
  gap: 18px;
  margin-bottom: 18px;
}

.worship-v2-next,
.worship-v2-score,
.worship-v2-section,
.worship-v2-heatmap-card,
.worship-detail-v2-summary,
.worship-detail-v2-toolbar,
.worship-detail-v2-adhkar-card,
.worship-detail-v2-tasbeeh,
.worship-detail-v2-quran-form,
.worship-detail-v2-week-chart,
.worship-detail-v2-sessions {
  border: 1px solid var(--worship-line);
  background: var(--worship-bg);
  box-shadow: 0 14px 38px rgba(5, 7, 20, 0.08);
}

.worship-v2-next {
  position: relative;
  display: flex;
  min-height: 280px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 36px;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(108, 91, 229, 0.2), transparent 55%),
    var(--worship-bg);
}

.worship-v2-next::after {
  position: absolute;
  inset-inline-end: -60px;
  bottom: -85px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(117, 104, 242, 0.08);
  content: '';
}

.worship-v2-next-copy {
  position: relative;
  z-index: 1;
}

.worship-v2-next-copy>span {
  display: inline-flex;
  padding: 5px 11px;
  border: 1px solid rgba(117, 104, 242, 0.19);
  border-radius: 20px;
  background: var(--worship-purple-soft);
  color: #988dff;
  font-size: 10px;
  font-weight: 800;
}

.worship-v2-next-copy h3 {
  margin: 15px 0 2px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.25;
}

.worship-v2-next-copy>strong {
  display: block;
  color: var(--worship-purple);
  font-size: 21px;
  font-weight: 900;
  direction: ltr;
  text-align: start;
}

.worship-v2-next-copy>p {
  min-height: 20px;
  margin: 9px 0 17px;
  color: var(--worship-muted);
  font-size: 12px;
  font-weight: 700;
  direction: ltr;
  text-align: start;
}

.worship-v2-adhan-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7568f2, #5e52d8);
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(101, 84, 224, 0.24);
}

.worship-v2-adhan-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.worship-v2-prayer-orbit {
  position: relative;
  z-index: 1;
  display: grid;
  width: 186px;
  height: 186px;
  flex: 0 0 auto;
  padding: 9px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--worship-purple) calc(var(--progress) * 1%), rgba(117, 104, 242, 0.12) 0);
  box-shadow: 0 0 0 10px rgba(117, 104, 242, 0.045);
}

.worship-v2-prayer-orbit::after {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #17182c;
  content: '';
}

html.light .worship-v2-prayer-orbit::after {
  background: #fff;
}

.worship-v2-prayer-orbit>div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #8c80fa;
}

.worship-v2-prayer-orbit strong {
  margin-top: 7px;
  color: var(--worship-ink);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.worship-v2-prayer-orbit strong small {
  color: var(--worship-muted);
  font-size: 13px;
}

.worship-v2-prayer-orbit span {
  margin-top: 7px;
  color: var(--worship-muted);
  font-size: 9px;
}

.worship-v2-score {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
  border-radius: 24px;
}

.worship-v2-score header,
.worship-v2-heatmap-card header,
.worship-detail-v2-week-chart header,
.worship-detail-v2-sessions>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.worship-v2-score h3,
.worship-v2-heatmap-card h3,
.worship-v2-section-head h3,
.worship-detail-v2-sessions h3 {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 900;
}

.worship-v2-score-badge {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 17px;
  background: var(--worship-purple-soft);
  color: #8f83fa;
  font-size: 14px;
  font-weight: 900;
}

.worship-v2-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0 18px;
}

.worship-v2-score-grid>div {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  padding: 12px 5px;
  border-radius: 14px;
  background: var(--worship-card);
  text-align: center;
}

.worship-v2-score-grid span {
  color: var(--worship-gold);
}

.worship-v2-score-grid strong {
  margin: 4px 0 2px;
  font-size: 18px;
  font-weight: 900;
}

.worship-v2-score-grid small {
  overflow: hidden;
  max-width: 100%;
  color: var(--worship-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worship-v2-score-track,
.worship-v2-routine-copy>i {
  height: 5px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--worship-line);
}

.worship-v2-score-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--worship-purple), var(--worship-mint));
}

.worship-v2-score>p {
  margin: 11px 0 0;
  color: var(--worship-muted);
  font-size: 10px;
  text-align: center;
}

.worship-v2-section {
  padding: 25px;
  border-radius: 24px;
}

.worship-v2-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.worship-v2-section-head>b {
  padding: 7px 11px;
  border-radius: 11px;
  background: var(--worship-purple-soft);
  color: #9186f9;
  font-size: 10px;
}

.worship-v2-prayers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.worship-v2-prayer {
  position: relative;
  min-width: 0;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--worship-line);
  border-radius: 18px;
  background: var(--worship-card);
  text-align: center;
  transition: 0.22s ease;
}

.worship-v2-prayer:hover {
  transform: translateY(-2px);
  border-color: rgba(117, 104, 242, 0.32);
  background: var(--worship-card-strong);
}

.worship-v2-prayer.is-current {
  border-color: rgba(117, 104, 242, 0.56);
  box-shadow: inset 0 0 0 1px rgba(117, 104, 242, 0.12);
}

.worship-v2-prayer.is-done {
  border-color: rgba(75, 214, 162, 0.22);
  background: rgba(75, 214, 162, 0.055);
}

.worship-v2-prayer-top {
  display: flex;
  min-height: 19px;
  align-items: center;
  justify-content: space-between;
}

.worship-v2-prayer-top>span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  background: var(--worship-card-strong);
  color: var(--worship-muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.worship-v2-prayer-top b {
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--worship-purple-soft);
  color: #988eff;
  font-size: 8px;
}

.worship-v2-prayer-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 6px auto 7px;
  place-items: center;
  border-radius: 15px;
  background: rgba(244, 191, 88, 0.11);
  color: var(--worship-gold);
}

.worship-v2-prayer.is-done .worship-v2-prayer-icon {
  background: rgba(75, 214, 162, 0.1);
  color: var(--worship-mint);
}

.worship-v2-prayer h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}

.worship-v2-prayer time {
  display: block;
  margin-top: 3px;
  color: var(--worship-muted);
  font-size: 11px;
  font-weight: 700;
  direction: ltr;
}

.worship-v2-prayer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31px;
  gap: 6px;
  margin-top: 12px;
}

.worship-v2-prayer-actions button {
  display: flex;
  min-width: 0;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border: 0;
  border-radius: 9px;
  background: var(--worship-card-strong);
  color: var(--worship-muted);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.worship-v2-prayer.is-done .worship-v2-record-btn {
  background: rgba(75, 214, 162, 0.12);
  color: var(--worship-mint);
}

.worship-v2-prayer-actions .worship-v2-mute-btn {
  padding: 0;
}

.worship-v2-mute-btn.is-muted {
  color: #ef7b91 !important;
}

.worship-v2-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(285px, 0.5fr);
  gap: 18px;
  margin-top: 18px;
}

.worship-v2-routines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.worship-v2-routine {
  display: grid;
  min-width: 0;
  min-height: 83px;
  grid-template-columns: 46px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--worship-line);
  border-radius: 17px;
  background: var(--worship-card);
  text-align: start;
  cursor: pointer;
  transition: 0.22s ease;
}

.worship-v2-routine:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--worship-card-strong);
}

.worship-v2-routine.is-done {
  border-color: color-mix(in srgb, var(--accent) 27%, transparent);
}

.worship-v2-routine-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}

.worship-v2-routine-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.worship-v2-routine-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worship-v2-routine-copy small {
  margin: 3px 0 8px;
  color: var(--worship-muted);
  font-size: 9px;
}

.worship-v2-routine-copy>i {
  height: 3px;
}

.worship-v2-routine-copy>i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.worship-v2-routine-end {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 9px;
  background: var(--worship-card-strong);
  color: var(--worship-muted);
}

.worship-v2-routine.is-done .worship-v2-routine-end {
  background: rgba(75, 214, 162, 0.12);
  color: var(--worship-mint);
}

[dir="rtl"] .worship-v2-routine:not(.is-done) .worship-v2-routine-end svg,
[dir="rtl"] .worship-detail-v2-back svg {
  transform: rotate(180deg);
}

.worship-v2-heatmap-card {
  align-self: start;
  padding: 24px;
  border-radius: 24px;
}

.worship-v2-heatmap-card header>svg {
  color: #9388fa;
}

.worship-v2-heatmap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin: 25px 0 14px;
  direction: ltr;
}

.worship-v2-heatmap i,
.worship-v2-heatmap-legend i {
  display: block;
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--worship-line);
}

.worship-v2-heatmap i[data-level="1"],
.worship-v2-heatmap-legend i[data-level="1"] {
  background: rgba(117, 104, 242, 0.24);
}

.worship-v2-heatmap i[data-level="2"],
.worship-v2-heatmap-legend i[data-level="2"] {
  background: rgba(117, 104, 242, 0.46);
}

.worship-v2-heatmap i[data-level="3"],
.worship-v2-heatmap-legend i[data-level="3"] {
  background: rgba(117, 104, 242, 0.7);
}

.worship-v2-heatmap i[data-level="4"],
.worship-v2-heatmap-legend i[data-level="4"] {
  background: #7568f2;
}

.worship-v2-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--worship-muted);
  font-size: 8px;
}

.worship-v2-heatmap-legend i {
  width: 10px;
  height: 10px;
}

.worship-v2-heatmap-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--worship-line);
}

.worship-v2-heatmap-summary strong {
  color: #9185fa;
  font-size: 26px;
  font-weight: 900;
}

.worship-v2-heatmap-summary span {
  color: var(--worship-muted);
  font-size: 9px;
  line-height: 1.6;
}

/* Worship detail */
.worship-detail-v2-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid var(--worship-line);
  border-radius: 11px;
  background: var(--worship-card);
  color: var(--worship-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

.worship-detail-v2-hero {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 18px;
  min-height: 154px;
  margin-bottom: 18px;
  padding: 25px 29px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 24%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--detail-accent) 17%, transparent), transparent 34%),
    var(--worship-bg);
}

.worship-detail-v2-hero::after {
  position: absolute;
  inset-inline-end: -60px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 16%, transparent);
  border-radius: 50%;
  content: '';
}

.worship-detail-v2-hero-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 19px;
  background: color-mix(in srgb, var(--detail-accent) 13%, transparent);
  color: var(--detail-accent);
}

.worship-detail-v2-hero h2 {
  margin: 4px 0 3px;
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 900;
}

.worship-detail-v2-hero p {
  margin: 0;
  color: var(--worship-muted);
  font-size: 10px;
}

.worship-detail-v2-progress {
  position: relative;
  z-index: 1;
  display: flex;
  width: 86px;
  height: 86px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: 7px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--worship-bg), var(--worship-bg)) padding-box,
    conic-gradient(var(--detail-accent) calc(var(--progress) * 1%), var(--worship-line) 0) border-box;
}

.worship-detail-v2-progress strong {
  font-size: 16px;
  font-weight: 900;
}

.worship-detail-v2-progress small {
  color: var(--worship-muted);
  font-size: 8px;
}

.worship-detail-v2-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 18px;
  padding: 8px;
  border-radius: 20px;
}

.worship-detail-v2-summary>div {
  display: grid;
  grid-template-columns: 34px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 14px;
}

.worship-detail-v2-summary>div+div {
  border-inline-start: 1px solid var(--worship-line);
}

.worship-detail-v2-summary>div>span {
  display: grid;
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--detail-accent) 11%, transparent);
  color: var(--detail-accent);
}

.worship-detail-v2-summary strong {
  font-size: 17px;
  font-weight: 900;
}

.worship-detail-v2-summary small {
  color: var(--worship-muted);
  font-size: 9px;
}

.worship-detail-v2-complete {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  padding: 16px 19px;
  border: 1px solid rgba(75, 214, 162, 0.19);
  border-radius: 17px;
  background: rgba(75, 214, 162, 0.07);
  color: var(--worship-mint);
}

.worship-detail-v2-complete div {
  display: flex;
  flex-direction: column;
}

.worship-detail-v2-complete strong {
  font-size: 12px;
}

.worship-detail-v2-complete span {
  margin-top: 2px;
  color: var(--worship-muted);
  font-size: 9px;
}

.worship-detail-v2-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
  padding: 15px 18px;
  border-radius: 17px;
}

.worship-detail-v2-toolbar>div {
  display: flex;
  flex-direction: column;
}

.worship-detail-v2-toolbar strong {
  margin-top: 3px;
  font-size: 11px;
}

.worship-detail-v2-toolbar button,
.worship-detail-v2-reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--worship-line);
  border-radius: 10px;
  background: var(--worship-card);
  color: var(--worship-muted) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

.worship-detail-v2-adhkar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.worship-detail-v2-adhkar-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 19px;
  border-radius: 20px;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.worship-detail-v2-adhkar-card.is-tappable {
  cursor: pointer;
  touch-action: manipulation;
}

.worship-detail-v2-adhkar-card.is-tappable:hover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-accent) 7%, transparent), transparent 60%),
    var(--worship-bg);
  box-shadow: 0 18px 42px rgba(5, 7, 20, 0.12);
  transform: translateY(-2px);
}

.worship-detail-v2-adhkar-card.is-tappable:active {
  transform: scale(0.985);
}

.worship-detail-v2-adhkar-card.is-tappable:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--detail-accent) 34%, transparent);
  outline-offset: 3px;
}

.worship-detail-v2-adhkar-card.is-done {
  border-color: rgba(75, 214, 162, 0.19);
  background: rgba(75, 214, 162, 0.045);
}

.worship-detail-v2-adhkar-card header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 37px;
  align-items: center;
  gap: 10px;
}

.worship-detail-v2-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--worship-purple-soft);
  color: #9287fa;
  font-size: 9px;
  font-weight: 900;
}

.worship-detail-v2-adhkar-card header>div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.worship-detail-v2-adhkar-card header strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worship-detail-v2-adhkar-card header small {
  color: var(--worship-muted);
  font-size: 11px;
}

.worship-detail-v2-adhkar-card header>i {
  display: grid;
  width: 37px;
  height: 37px;
  padding: 4px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--detail-accent) calc(var(--progress) * 1%), var(--worship-line) 0);
}

.worship-detail-v2-adhkar-card header>i::after {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #17182b;
  content: '';
}

html.light .worship-detail-v2-adhkar-card header>i::after {
  background: #fff;
}

.worship-detail-v2-adhkar-card>p {
  flex: 1;
  margin: 17px 0;
  color: var(--worship-ink);
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  line-height: 2.15;
  text-align: start;
  white-space: pre-line;
}

.worship-detail-v2-adhkar-card.is-done>p {
  color: var(--worship-muted);
}

.worship-detail-v2-adhkar-card footer {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--worship-line);
}

.worship-detail-v2-adhkar-card footer>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--worship-muted);
  font-size: 11px;
}

.worship-detail-v2-adhkar-card.is-done footer>span {
  color: var(--worship-mint);
}

.worship-detail-v2-adhkar-card footer>div {
  display: flex;
  gap: 6px;
}

.worship-detail-v2-adhkar-card footer button {
  min-width: 37px;
  min-height: 31px;
  padding: 5px 10px;
  border: 0;
  border-radius: 9px;
  background: var(--detail-accent);
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.worship-detail-v2-adhkar-card footer button.is-finish {
  background: color-mix(in srgb, var(--detail-accent) 17%, transparent);
  color: var(--detail-accent) !important;
}

.worship-detail-v2-tasbeeh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  align-items: center;
  gap: 44px;
  min-height: 420px;
  padding: 42px;
  overflow: hidden;
  border-radius: 25px;
  background:
    radial-gradient(circle at 82% 48%, color-mix(in srgb, var(--detail-accent) 12%, transparent), transparent 33%),
    var(--worship-bg);
}

.worship-detail-v2-tasbeeh-copy blockquote {
  max-width: 600px;
  margin: 15px 0 13px;
  color: var(--worship-ink);
  font-family: 'Cairo', sans-serif;
  font-size: clamp(21px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.9;
}

.worship-detail-v2-tasbeeh-copy>p {
  max-width: 570px;
  margin: 0;
  color: var(--worship-muted);
  font-size: 14px;
  line-height: 1.8;
}

.worship-detail-v2-free-title {
  max-width: 620px;
  margin: 16px 0 12px;
  color: var(--worship-ink);
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.55;
}

.worship-detail-v2-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.worship-detail-v2-mini-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--worship-card-strong);
  color: var(--worship-muted);
  font-size: 11px;
}

.worship-detail-v2-mini-stats svg,
.worship-detail-v2-mini-stats b {
  color: var(--detail-accent);
}

.worship-detail-v2-counter-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.worship-detail-v2-counter {
  position: relative;
  display: flex;
  width: 236px;
  height: 236px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: 12px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#17182b, #17182b) padding-box,
    conic-gradient(var(--accent) calc(var(--progress) * 1%), var(--worship-line) 0) border-box;
  color: var(--accent) !important;
  cursor: pointer;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 5%, transparent), 0 24px 45px rgba(5, 7, 20, 0.17);
  transition: transform 0.16s ease;
}

.worship-detail-v2-counter.is-free {
  isolation: isolate;
  border: 0;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 44%),
    linear-gradient(#17182b, #17182b);
  box-shadow:
    0 0 0 11px color-mix(in srgb, var(--accent) 8%, transparent),
    0 24px 54px rgba(5, 7, 20, 0.24);
}

.worship-detail-v2-counter.is-free::before {
  position: absolute;
  z-index: -1;
  inset: -18px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -4deg,
    var(--accent) 0deg 7deg,
    color-mix(in srgb, var(--accent) 35%, transparent) 7deg 10deg
  );
  content: '';
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 66% 78%, transparent 79%);
  mask: radial-gradient(circle, transparent 65%, #000 66% 78%, transparent 79%);
  opacity: 0.78;
}

html.light .worship-detail-v2-counter.is-free {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
    linear-gradient(#fff, #fff);
}

html.light .worship-detail-v2-counter {
  background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(var(--accent) calc(var(--progress) * 1%), var(--worship-line) 0) border-box;
}

.worship-detail-v2-counter:not(:disabled):active {
  transform: scale(0.965);
}

.worship-detail-v2-counter>span {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.worship-detail-v2-counter strong {
  margin: 10px 0 3px;
  color: var(--worship-ink);
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}

.worship-detail-v2-counter small {
  color: var(--worship-muted);
  font-size: 12px;
}

.worship-detail-v2-counter-wrap>p {
  margin: 23px 0 10px;
  color: var(--worship-muted);
  font-size: 12px;
}

.worship-detail-v2-counter-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.worship-detail-v2-progress.is-free {
  border-color: color-mix(in srgb, var(--detail-accent) 24%, transparent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--detail-accent) 14%, transparent), transparent 68%),
    var(--worship-bg);
}

.worship-detail-v2-progress.is-free strong {
  color: var(--detail-accent);
  font-size: 22px;
}

/* ================================================================
   Integrated Quran Reader V3 — offline Mushaf, index and bookmarks
   ================================================================ */
.quran-reader-v3 {
  --quran-accent: #25b98b;
  --quran-accent-soft: color-mix(in srgb, var(--quran-accent) 12%, transparent);
  --quran-paper: color-mix(in srgb, var(--worship-card) 96%, #f7f0dc 4%);
  --quran-panel: color-mix(in srgb, var(--worship-card) 90%, transparent);
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--quran-accent) 10%, transparent), transparent 28%),
    var(--worship-bg);
  box-shadow: 0 18px 50px rgba(14, 24, 45, 0.08);
}

html.light .quran-reader-v3 {
  --quran-paper: #fffdf7;
  --quran-panel: #f7f9fb;
}

.quran-reader-v3-loading {
  display: flex;
  min-height: 240px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
  border-radius: 24px;
  background: var(--worship-card);
  color: var(--worship-muted);
  text-align: center;
}

.quran-reader-v3-loading>span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 19px;
  background: var(--quran-accent-soft);
  color: var(--quran-accent);
  animation: quran-reader-breathe 1.8s ease-in-out infinite;
}

.quran-reader-v3-loading strong {
  color: var(--worship-ink);
  font-size: 16px;
}

.quran-reader-v3-loading small {
  font-size: 13px;
}

@keyframes quran-reader-breathe {
  50% {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--quran-accent) 18%, transparent);
  }
}

.quran-reader-v3-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.quran-reader-v3-intro>div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.quran-reader-v3-intro>div>span {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--quran-accent), #42d5ad);
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--quran-accent) 24%, transparent);
}

.quran-reader-v3-intro>div>div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.quran-reader-v3-intro small {
  color: var(--quran-accent);
  font-size: 12px;
  font-weight: 800;
}

.quran-reader-v3-intro strong {
  color: var(--worship-ink);
  font-size: 17px;
}

.quran-reader-v3-intro form {
  display: grid;
  width: min(100%, 410px);
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 15px;
  background: var(--quran-panel);
  color: var(--worship-muted);
}

.quran-reader-v3-intro input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--worship-ink);
  font-size: 14px;
}

.quran-reader-v3-intro form>button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--worship-muted) 8%, transparent);
  color: var(--worship-muted);
  cursor: pointer;
}

.quran-reader-v3-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 6px;
  border-radius: 17px;
  background: var(--quran-panel);
}

.quran-reader-v3-tabs button {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--worship-muted);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: 180ms ease;
}

.quran-reader-v3-tabs button:hover {
  background: color-mix(in srgb, var(--worship-card) 72%, transparent);
  color: var(--worship-ink);
}

.quran-reader-v3-tabs button.is-active {
  background: var(--worship-card);
  color: var(--quran-accent);
  box-shadow: 0 8px 20px rgba(20, 32, 52, 0.08);
}

.quran-reader-v3-tabs b {
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 8px;
  background: var(--quran-accent-soft);
  font-size: 11px;
}

.quran-reader-v3-reader {
  display: grid;
  gap: 13px;
}

.quran-reader-v3-controls {
  display: grid;
  grid-template-columns: minmax(170px, 1.25fr) minmax(120px, 0.7fr) minmax(100px, 0.55fr) auto;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--quran-panel);
}

.quran-reader-v3-controls label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.quran-reader-v3-controls label>span {
  color: var(--worship-muted);
  font-size: 12px;
  font-weight: 750;
}

.quran-reader-v3-controls select,
.quran-reader-v3-controls input {
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: var(--worship-card);
  color: var(--worship-ink);
  font-size: 13px;
}

.quran-reader-v3-font {
  display: grid;
  grid-template-columns: 38px auto 38px;
  align-items: end;
  gap: 5px;
}

.quran-reader-v3-font span {
  display: grid;
  min-height: 42px;
  place-items: center;
  color: var(--worship-muted);
  font-size: 12px;
}

.quran-reader-v3-font button {
  width: 38px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--worship-card);
  color: var(--quran-accent);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.quran-reader-v3-page-head {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 130px;
  align-items: center;
  gap: 10px;
}

.quran-reader-v3-page-head>button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  border-radius: 13px;
  background: var(--quran-panel);
  color: var(--worship-ink);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.quran-reader-v3-page-head>button:disabled {
  opacity: 0.38;
  cursor: default;
}

.quran-reader-v3-page-head>div {
  text-align: center;
}

.quran-reader-v3-page-head>div span {
  display: block;
  color: var(--worship-muted);
  font-size: 12px;
}

.quran-reader-v3-page-head>div strong {
  color: var(--worship-ink);
  font-size: 17px;
}

.quran-reader-v3-mushaf {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  padding: clamp(25px, 4vw, 54px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--quran-accent) 7%, transparent), transparent 25%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, #c69d46 7%, transparent), transparent 27%),
    var(--quran-paper);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--quran-accent) 8%, transparent),
    0 18px 45px rgba(24, 31, 49, 0.08);
}

.quran-reader-v3-mushaf::before,
.quran-reader-v3-mushaf::after {
  position: absolute;
  width: 135px;
  height: 135px;
  border: 1px solid color-mix(in srgb, var(--quran-accent) 10%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.quran-reader-v3-mushaf::before {
  top: -78px;
  right: -70px;
}

.quran-reader-v3-mushaf::after {
  bottom: -78px;
  left: -70px;
}

.quran-reader-v3-surah+ .quran-reader-v3-surah {
  margin-top: 28px;
}

.quran-reader-v3-surah>header {
  display: grid;
  max-width: 540px;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  margin: 0 auto 18px;
  padding: 9px 15px;
  border-radius: 17px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--quran-accent) 13%, transparent), color-mix(in srgb, #c79a43 8%, transparent)),
    var(--quran-panel);
  color: var(--quran-accent);
  text-align: center;
}

.quran-reader-v3-surah>header h3 {
  margin: 0;
  color: var(--worship-ink);
  font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif;
  font-size: 22px;
  font-weight: 750;
}

.quran-reader-v3-bismillah {
  margin: 4px 0 20px;
  color: var(--worship-ink);
  font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif;
  font-size: calc(24px * var(--quran-font-scale));
  line-height: 1.9;
  text-align: center;
}

.quran-reader-v3-ayahs {
  direction: rtl;
  color: var(--worship-ink);
  font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif;
  font-size: calc(25px * var(--quran-font-scale));
  line-height: 2.35;
  text-align: justify;
}

.quran-reader-v3-ayah {
  display: inline;
  border-radius: 9px;
  transition: background 160ms ease;
}

.quran-reader-v3-ayah>button:first-child {
  display: inline;
  padding: 3px 2px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}

.quran-reader-v3-ayah>button:first-child:hover,
.quran-reader-v3-ayah>button:first-child:focus-visible,
.quran-reader-v3-ayah.is-selected>button:first-child {
  background: var(--quran-accent-soft);
}

.quran-reader-v3-ayah i {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin: 0 4px;
  border-radius: 50% 50% 44% 56% / 48% 44% 56% 52%;
  background: color-mix(in srgb, var(--quran-accent) 12%, transparent);
  color: var(--quran-accent);
  font-family: inherit;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.quran-reader-v3-ayah-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 7px;
  vertical-align: middle;
}

.quran-reader-v3-ayah-actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 0;
  border-radius: 10px;
  background: var(--quran-panel);
  color: var(--worship-muted);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.quran-reader-v3-ayah-actions button.is-saved {
  background: color-mix(in srgb, #d6a33d 13%, transparent);
  color: #c58d20;
}

.quran-reader-v3-page-actions {
  display: flex;
  justify-content: center;
}

.quran-reader-v3-complete {
  display: flex;
  width: min(100%, 560px);
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 18px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--quran-accent), #31c9a0);
  color: #fff;
  box-shadow: 0 13px 28px color-mix(in srgb, var(--quran-accent) 25%, transparent);
  cursor: pointer;
}

.quran-reader-v3-complete.is-complete {
  background: var(--quran-panel);
  color: var(--quran-accent);
  box-shadow: none;
}

.quran-reader-v3-complete span {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  text-align: start;
}

.quran-reader-v3-complete strong {
  font-size: 14px;
}

.quran-reader-v3-complete small {
  color: currentColor;
  font-size: 11px;
  opacity: 0.82;
}

.quran-reader-v3-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.quran-reader-v3-index>button,
.quran-reader-v3-search-results>button {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 0;
  border-radius: 16px;
  background: var(--quran-panel);
  color: var(--worship-muted);
  text-align: start;
  cursor: pointer;
  transition: 170ms ease;
}

.quran-reader-v3-index>button {
  grid-template-columns: 40px minmax(0, 1fr) 20px;
}

.quran-reader-v3-index>button:hover,
.quran-reader-v3-search-results>button:hover,
.quran-reader-v3-bookmarks article:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--quran-accent) 7%, var(--quran-panel));
}

.quran-reader-v3-index>button>span,
.quran-reader-v3-search-results>button>span {
  display: grid;
  min-width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--quran-accent-soft);
  color: var(--quran-accent);
  font-size: 11px;
  font-weight: 850;
}

.quran-reader-v3-index strong,
.quran-reader-v3-search-results strong,
.quran-reader-v3-bookmarks strong {
  display: block;
  overflow: hidden;
  color: var(--worship-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quran-reader-v3-index small,
.quran-reader-v3-search-results small,
.quran-reader-v3-bookmarks small {
  display: block;
  margin-top: 3px;
  color: var(--worship-muted);
  font-size: 11px;
}

.quran-reader-v3-search-results {
  display: grid;
  gap: 9px;
}

.quran-reader-v3-search-results>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px 8px;
}

.quran-reader-v3-search-results>header span {
  display: block;
  color: var(--quran-accent);
  font-size: 12px;
  font-weight: 750;
}

.quran-reader-v3-search-results>header strong {
  margin-top: 2px;
  white-space: normal;
}

.quran-reader-v3-search-results>header b {
  display: grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--quran-accent-soft);
  color: var(--quran-accent);
}

.quran-reader-v3-search-results>button {
  grid-template-columns: 54px minmax(0, 1fr) 22px;
}

.quran-reader-v3-search-results p,
.quran-reader-v3-bookmarks p {
  display: -webkit-box;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--worship-ink);
  font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif;
  font-size: 16px;
  line-height: 1.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quran-reader-v3-bookmarks {
  display: grid;
  gap: 9px;
}

.quran-reader-v3-bookmarks article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 16px;
  background: var(--quran-panel);
  transition: 170ms ease;
}

.quran-reader-v3-bookmark-open {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--worship-muted);
  text-align: start;
  cursor: pointer;
}

.quran-reader-v3-bookmark-open>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, #d6a33d 13%, transparent);
  color: #c58d20;
}

.quran-reader-v3-bookmarks article>button:last-child {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, #ef7185 9%, transparent);
  color: #e66a80;
  cursor: pointer;
}

.quran-reader-v3-empty {
  display: flex;
  min-height: 240px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border-radius: 20px;
  background: var(--quran-panel);
  color: var(--worship-muted);
  text-align: center;
}

.quran-reader-v3-empty svg {
  margin-bottom: 6px;
  color: var(--quran-accent);
}

.quran-reader-v3-empty strong {
  color: var(--worship-ink);
  font-size: 15px;
}

.quran-reader-v3-empty span {
  max-width: 420px;
  font-size: 13px;
}

.quran-reader-v3-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 3px 0;
  color: var(--worship-muted);
  font-size: 11px;
}

.quran-reader-v3-source span,
.quran-reader-v3-source a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quran-reader-v3-source a {
  color: var(--quran-accent);
  font-weight: 750;
  text-decoration: none;
}

.quran-reader-v3-tracking,
.quran-reader-v3-sessions {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .quran-reader-v3-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quran-reader-v3-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .quran-reader-v3 {
    gap: 12px;
    margin-inline: -2px;
    padding: 12px;
    border-radius: 22px;
  }

  .quran-reader-v3-intro {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
  }

  .quran-reader-v3-intro strong {
    font-size: 15px;
  }

  .quran-reader-v3-intro form {
    width: 100%;
  }

  .quran-reader-v3-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quran-reader-v3-tabs button {
    min-height: 48px;
    flex-direction: row;
    gap: 6px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .quran-reader-v3-tabs b {
    position: absolute;
    transform: translate(-18px, -11px);
  }

  .quran-reader-v3-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .quran-reader-v3-controls label:first-child {
    grid-column: 1 / -1;
  }

  .quran-reader-v3-font {
    align-self: end;
  }

  .quran-reader-v3-page-head {
    grid-template-columns: 54px minmax(0, 1fr) 54px;
  }

  .quran-reader-v3-page-head>button {
    min-height: 43px;
    padding-inline: 8px;
  }

  .quran-reader-v3-page-head>button span {
    display: none;
  }

  .quran-reader-v3-page-head>div strong {
    display: block;
    white-space: nowrap;
  }

  .quran-reader-v3-mushaf {
    min-height: 520px;
    padding: 23px 17px 34px;
    border-radius: 20px;
  }

  .quran-reader-v3-surah>header {
    min-height: 50px;
    margin-bottom: 13px;
  }

  .quran-reader-v3-surah>header h3 {
    font-size: 18px;
    white-space: nowrap;
  }

  .quran-reader-v3-bismillah {
    font-size: calc(21px * var(--quran-font-scale));
  }

  .quran-reader-v3-ayahs {
    font-size: calc(22px * var(--quran-font-scale));
    line-height: 2.4;
    text-align: right;
  }

  .quran-reader-v3-ayah i {
    width: 33px;
    height: 33px;
    margin-inline: 2px;
    font-size: 12px;
  }

  .quran-reader-v3-ayah-actions {
    display: flex;
    margin: 7px 0 10px;
  }

  .quran-reader-v3-ayah-actions button {
    flex: 1;
    justify-content: center;
    font-size: 12px;
  }

  .quran-reader-v3-index {
    grid-template-columns: 1fr;
  }

  .quran-reader-v3-index>button,
  .quran-reader-v3-search-results>button {
    padding: 11px;
  }

  .quran-reader-v3-source {
    align-items: flex-start;
    flex-direction: column;
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  .quran-reader-v3-controls {
    grid-template-columns: 1fr 1fr;
  }

  .quran-reader-v3-controls label:first-child,
  .quran-reader-v3-font {
    grid-column: 1 / -1;
  }

  .quran-reader-v3-font {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .quran-reader-v3-complete {
    justify-content: flex-start;
    padding-inline: 14px;
  }
}

.worship-detail-v2-quran-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.worship-detail-v2-quran-form,
.worship-detail-v2-week-chart,
.worship-detail-v2-sessions {
  padding: 22px;
  border-radius: 21px;
}

.worship-detail-v2-quran-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.worship-detail-v2-quran-form header,
.worship-detail-v2-quran-form .is-wide,
.worship-detail-v2-quran-form>button {
  grid-column: 1 / -1;
}

.worship-detail-v2-quran-form header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 2px;
}

.worship-detail-v2-quran-form header>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--detail-accent) 11%, transparent);
  color: var(--detail-accent);
}

.worship-detail-v2-quran-form header div {
  display: flex;
  flex-direction: column;
}

.worship-detail-v2-quran-form header strong {
  font-size: 12px;
}

.worship-detail-v2-quran-form header small {
  color: var(--worship-muted);
  font-size: 9px;
}

.worship-detail-v2-quran-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.worship-detail-v2-quran-form label>span {
  color: var(--worship-muted);
  font-size: 9px;
  font-weight: 700;
}

.worship-detail-v2-quran-form input,
.worship-detail-v2-quran-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  resize: vertical;
  border: 1px solid var(--worship-line);
  border-radius: 11px;
  outline: none;
  background: var(--worship-card);
  color: var(--worship-ink);
  font-size: 10px;
}

.worship-detail-v2-quran-form textarea {
  min-height: 72px;
}

.worship-detail-v2-quran-form input:focus,
.worship-detail-v2-quran-form textarea:focus {
  border-color: color-mix(in srgb, var(--detail-accent) 55%, transparent);
}

.worship-detail-v2-quran-form>button {
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--detail-accent), color-mix(in srgb, var(--detail-accent) 78%, #252055));
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.worship-detail-v2-week-chart {
  display: flex;
  flex-direction: column;
}

.worship-detail-v2-week-chart header strong {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

.worship-detail-v2-week-chart header b {
  padding: 6px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--detail-accent) 10%, transparent);
  color: var(--detail-accent);
  font-size: 9px;
}

.worship-detail-v2-bars {
  display: flex;
  min-height: 165px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  padding-top: 22px;
  direction: ltr;
}

.worship-detail-v2-bars>div {
  display: grid;
  min-width: 0;
  height: 145px;
  flex: 1;
  grid-template-rows: 17px minmax(0, 1fr) 17px;
  place-items: center;
}

.worship-detail-v2-bars span,
.worship-detail-v2-bars small {
  color: var(--worship-muted);
  font-size: 8px;
}

.worship-detail-v2-bars i {
  display: flex;
  width: min(100%, 22px);
  height: 100%;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 7px 7px 3px 3px;
  background: var(--worship-card);
}

.worship-detail-v2-bars em {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--detail-accent), color-mix(in srgb, var(--detail-accent) 40%, transparent));
}

.worship-detail-v2-sessions>header {
  margin-bottom: 16px;
}

.worship-detail-v2-sessions>header b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--detail-accent) 11%, transparent);
  color: var(--detail-accent);
  font-size: 11px;
}

.worship-detail-v2-sessions>div:not(.worship-detail-v2-empty) {
  display: grid;
  gap: 8px;
}

.worship-detail-v2-sessions article {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid var(--worship-line);
  border-radius: 14px;
  background: var(--worship-card);
}

.worship-detail-v2-session-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--detail-accent) 10%, transparent);
  color: var(--detail-accent);
}

.worship-detail-v2-sessions article>div {
  min-width: 0;
}

.worship-detail-v2-sessions article strong {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worship-detail-v2-sessions article p {
  overflow: hidden;
  margin: 2px 0;
  color: var(--worship-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worship-detail-v2-sessions article small {
  color: var(--worship-muted);
  font-size: 8px;
}

.worship-detail-v2-sessions article>button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(240, 104, 129, 0.08);
  color: #ee7890 !important;
  cursor: pointer;
}

.worship-detail-v2-empty {
  display: flex;
  min-height: 125px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: 1px dashed var(--worship-line);
  border-radius: 15px;
  color: var(--worship-muted);
  text-align: center;
}

.worship-detail-v2-empty svg {
  margin-bottom: 7px;
  color: var(--detail-accent);
}

.worship-detail-v2-empty strong {
  font-size: 10px;
}

.worship-detail-v2-empty span {
  margin-top: 3px;
  font-size: 9px;
}

@media (max-width: 1100px) {

  .worship-v2-overview,
  .worship-v2-content-grid,
  .worship-detail-v2-quran-grid {
    grid-template-columns: 1fr;
  }

  .worship-v2-prayers {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    padding-bottom: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .worship-v2-heatmap {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (max-width: 760px) {
  .worship-v2-hero {
    min-height: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 22px;
    padding: 27px 23px;
    border-radius: 23px;
  }

  .worship-v2-location {
    width: 100%;
  }

  .worship-v2-days {
    grid-template-columns: repeat(7, 66px);
  }

  .worship-v2-next {
    min-height: auto;
    padding: 25px;
  }

  .worship-v2-prayer-orbit {
    width: 150px;
    height: 150px;
  }

  .worship-v2-section,
  .worship-v2-score,
  .worship-v2-heatmap-card {
    padding: 20px;
  }

  .worship-v2-routines,
  .worship-detail-v2-adhkar {
    grid-template-columns: 1fr;
  }

  .worship-detail-v2-tasbeeh {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 30px 24px;
    text-align: center;
  }

  .worship-detail-v2-tasbeeh-copy blockquote,
  .worship-detail-v2-tasbeeh-copy>p {
    margin-inline: auto;
  }

  .worship-detail-v2-mini-stats {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .worship-v2-hero-copy h2 {
    font-size: 26px;
  }

  .worship-v2-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .worship-v2-next {
    align-items: center;
    flex-direction: column-reverse;
    text-align: center;
  }

  .worship-v2-next-copy>strong,
  .worship-v2-next-copy>p {
    text-align: center;
  }

  .worship-v2-score-grid {
    gap: 5px;
  }

  .worship-v2-section-head {
    align-items: flex-start;
  }

  .worship-v2-prayers {
    grid-template-columns: repeat(5, 142px);
  }

  .worship-v2-routine {
    grid-template-columns: 42px minmax(0, 1fr) 27px;
  }

  .worship-v2-heatmap {
    grid-template-columns: repeat(6, 1fr);
  }

  .worship-detail-v2-hero {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 130px;
    padding: 20px;
  }

  .worship-detail-v2-hero-icon {
    width: 52px;
    height: 52px;
  }

  .worship-detail-v2-progress {
    display: none;
  }

  .worship-detail-v2-summary {
    grid-template-columns: 1fr;
  }

  .worship-detail-v2-summary>div+div {
    border-top: 1px solid var(--worship-line);
    border-inline-start: 0;
  }

  .worship-detail-v2-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .worship-detail-v2-adhkar-card {
    padding: 16px;
  }

  .worship-detail-v2-adhkar-card footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .worship-detail-v2-adhkar-card footer>div,
  .worship-detail-v2-adhkar-card footer button.is-finish {
    width: 100%;
  }

  .worship-detail-v2-counter {
    width: 210px;
    height: 210px;
  }

  .worship-detail-v2-quran-form {
    grid-template-columns: 1fr;
  }

  .worship-detail-v2-quran-form header,
  .worship-detail-v2-quran-form .is-wide,
  .worship-detail-v2-quran-form>button {
    grid-column: auto;
  }

  .worship-detail-v2-quran-form,
  .worship-detail-v2-week-chart,
  .worship-detail-v2-sessions {
    padding: 17px;
  }
}

/* Keep inner-section navigation reachable and app-like on mobile. */
@media (max-width: 900px) {
  #page-content.more-mobile-subscreen[data-more-route="worship"] .worship-detail-v2-back {
    position: sticky;
    z-index: 7;
    top: calc(70px + env(safe-area-inset-top, 0px));
    min-height: 44px;
    margin: 8px 12px 14px;
    padding: 9px 14px;
    border-color: color-mix(in srgb, var(--detail-accent) 18%, var(--worship-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--worship-card) 92%, transparent);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.13);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
  }

  #page-content.more-mobile-subscreen[data-more-route="annual-plan"] .ap-workspace-actions {
    position: sticky;
    z-index: 7;
    top: calc(70px + env(safe-area-inset-top, 0px));
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 8px 8px 14px !important;
    padding: 7px !important;
    overflow-x: auto;
    border-color: rgba(118, 103, 248, 0.15);
    background: color-mix(in srgb, var(--v3-panel) 93%, transparent);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    scrollbar-width: none;
  }

  #page-content.more-mobile-subscreen[data-more-route="annual-plan"] .ap-workspace-actions::-webkit-scrollbar {
    display: none;
  }

  #page-content.more-mobile-subscreen[data-more-route="annual-plan"] .ap-workspace-actions>button,
  #page-content.more-mobile-subscreen[data-more-route="annual-plan"] .ap-workspace-actions>div,
  #page-content.more-mobile-subscreen[data-more-route="annual-plan"] .ap-workspace-actions>div>button {
    flex: 0 0 auto;
    width: auto !important;
  }

  #page-content.more-mobile-subscreen[data-more-route="annual-plan"] .ap-workspace-actions>div {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
}

/* ================================================================
   Daily Habits V2 — consistency dashboard and habit editor
   ================================================================ */
.habit-v2 {
  --habit-bg: rgba(15, 18, 34, 0.76);
  --habit-card: rgba(255, 255, 255, 0.045);
  --habit-card-strong: rgba(255, 255, 255, 0.075);
  --habit-line: rgba(255, 255, 255, 0.09);
  --habit-text: var(--clr-text);
  --habit-muted: var(--clr-text-muted);
  --habit-primary: #7568f2;
  --habit-primary-soft: rgba(117, 104, 242, 0.14);
  --habit-mint: #41d3a2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: var(--habit-text);
}

html.light .habit-v2 {
  --habit-bg: rgba(255, 255, 255, 0.92);
  --habit-card: #fff;
  --habit-card-strong: #f7f7fc;
  --habit-line: rgba(54, 47, 103, 0.1);
  --habit-primary-soft: rgba(103, 87, 222, 0.09);
}

.habit-v2 *,
.habit-v2-modal *,
.habit-v2-modal *::before,
.habit-v2-modal *::after {
  box-sizing: border-box;
}

.habit-v2 button,
.habit-v2-modal button,
.habit-v2-modal input,
.habit-v2-modal select,
.habit-v2-modal textarea {
  font: inherit;
}

.habit-v2 button:focus-visible,
.habit-v2-modal button:focus-visible,
.habit-v2-modal input:focus-visible,
.habit-v2-modal select:focus-visible,
.habit-v2-modal textarea:focus-visible {
  outline: 3px solid rgba(117, 104, 242, 0.3);
  outline-offset: 2px;
}

.habit-v2-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 270px;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 18px;
  padding: 40px 44px;
  overflow: hidden;
  border: 1px solid rgba(134, 121, 255, 0.25);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 12%, rgba(124, 106, 244, 0.36), transparent 34%),
    radial-gradient(circle at 84% 72%, rgba(65, 211, 162, 0.15), transparent 30%),
    linear-gradient(132deg, #19172e 0%, #25204b 56%, #151d34 100%);
  box-shadow: 0 25px 65px rgba(5, 7, 20, 0.25);
}

.habit-v2-hero::before,
.habit-v2-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.habit-v2-hero::before {
  inset-inline-start: -115px;
  bottom: -180px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.024), 0 0 0 84px rgba(255, 255, 255, 0.014);
}

.habit-v2-hero::after {
  inset-inline-end: 24%;
  top: -90px;
  width: 250px;
  height: 250px;
  background: rgba(117, 104, 242, 0.08);
  filter: blur(35px);
}

.habit-v2-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 730px;
}

.habit-v2-hero-copy>span,
.habit-v2-section-head>div>span,
.habit-v2-week-card header span,
.habit-v2-insight>div>span,
.habit-v2-categories>header>span,
.habit-v2-modal>header>div>span,
.habit-v2-templates>span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aaa2ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.habit-v2-hero-copy h2 {
  max-width: 700px;
  margin: 15px 0 8px;
  color: #fff;
  font-size: clamp(29px, 3.6vw, 47px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.habit-v2-hero-copy>p {
  max-width: 680px;
  margin: 0;
  color: rgba(246, 246, 255, 0.68);
  font-size: 14px;
  line-height: 1.9;
}

.habit-v2-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 25px;
}

.habit-v2-hero-actions button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #7c6ff5, #5f54d9);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(99, 83, 225, 0.28);
}

.habit-v2-hero-actions>span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.habit-v2-hero-ring {
  position: relative;
  z-index: 1;
  display: grid;
  width: 190px;
  height: 190px;
  flex: 0 0 auto;
  padding: 10px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#77e4bd calc(var(--progress) * 1%), rgba(255, 255, 255, 0.1) 0);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.035), 0 24px 50px rgba(5, 7, 20, 0.22);
}

.habit-v2-hero-ring::after {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #1b1a34;
  content: '';
}

.habit-v2-hero-ring>div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

.habit-v2-hero-ring strong {
  font-size: 37px;
  font-weight: 900;
  line-height: 1;
}

.habit-v2-hero-ring span {
  margin: 7px 0 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
}

.habit-v2-hero-ring small {
  padding: 4px 9px;
  border-radius: 9px;
  background: rgba(65, 211, 162, 0.1);
  color: #77e4bd;
  font-size: 9px;
  font-weight: 800;
}

.habit-v2-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(78px, 1fr));
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--habit-line);
  border-radius: 20px;
  background: var(--habit-bg);
  scrollbar-width: none;
}

.habit-v2-days::-webkit-scrollbar,
.habit-v2-filters::-webkit-scrollbar {
  display: none;
}

.habit-v2-day {
  display: grid;
  min-width: 0;
  min-height: 93px;
  padding: 9px 7px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--habit-text);
  cursor: pointer;
  transition: 0.2s ease;
}

.habit-v2-day:hover {
  background: var(--habit-card-strong);
}

.habit-v2-day>span,
.habit-v2-day>small {
  color: var(--habit-muted);
  font-size: 9px;
  font-weight: 700;
}

.habit-v2-day>strong {
  font-size: 16px;
  font-weight: 900;
}

.habit-v2-day>i {
  display: block;
  width: 34px;
  height: 4px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--habit-line);
}

.habit-v2-day>i em {
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--habit-mint);
}

.habit-v2-day.is-today>span::after {
  margin-inline-start: 4px;
  color: var(--habit-primary);
  content: '•';
}

.habit-v2-day.is-selected {
  background: linear-gradient(145deg, #7568f2, #5d52d5);
  color: #fff;
  box-shadow: 0 8px 23px rgba(98, 83, 224, 0.28);
}

.habit-v2-day.is-selected>span,
.habit-v2-day.is-selected>small,
.habit-v2-day.is-selected>strong {
  color: #fff;
}

.habit-v2-day.is-selected>i {
  background: rgba(255, 255, 255, 0.22);
}

.habit-v2-day.is-selected>i em {
  background: #fff;
}

.habit-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 18px;
}

.habit-v2-stats article {
  display: grid;
  min-width: 0;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--habit-line);
  border-radius: 17px;
  background: var(--habit-bg);
  box-shadow: 0 10px 30px rgba(5, 7, 20, 0.06);
}

.habit-v2-stats article>span {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  background: var(--habit-primary-soft);
  color: #9185fb;
}

.habit-v2-stats article:nth-child(2)>span {
  background: rgba(65, 211, 162, 0.1);
  color: var(--habit-mint);
}

.habit-v2-stats article:nth-child(3)>span {
  background: rgba(244, 191, 88, 0.11);
  color: #f4bf58;
}

.habit-v2-stats article:nth-child(4)>span {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
}

.habit-v2-stats article>div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.habit-v2-stats small {
  overflow: hidden;
  color: var(--habit-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-v2-stats strong {
  margin-top: 3px;
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-v2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.55fr);
  align-items: start;
  gap: 18px;
}

.habit-v2-main,
.habit-v2-week-card,
.habit-v2-insight,
.habit-v2-categories {
  border: 1px solid var(--habit-line);
  border-radius: 23px;
  background: var(--habit-bg);
  box-shadow: 0 14px 38px rgba(5, 7, 20, 0.07);
}

.habit-v2-main {
  min-width: 0;
  padding: 24px;
}

.habit-v2-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.habit-v2-section-head h3,
.habit-v2-week-card h3,
.habit-v2-insight h3,
.habit-v2-categories h3 {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 900;
}

.habit-v2-section-head>b {
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--habit-primary-soft);
  color: #9185fb;
  font-size: 9px;
}

.habit-v2-filters {
  display: flex;
  gap: 7px;
  margin: 18px 0;
  padding-bottom: 1px;
  overflow-x: auto;
  scrollbar-width: none;
}

.habit-v2-filters button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--habit-line);
  border-radius: 11px;
  background: var(--habit-card);
  color: var(--habit-muted);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.habit-v2-filters button span {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border-radius: 7px;
  background: var(--habit-card-strong);
  font-size: 8px;
}

.habit-v2-filters button.is-active {
  border-color: rgba(117, 104, 242, 0.35);
  background: var(--habit-primary-soft);
  color: #968bfc;
}

.habit-v2-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.habit-v2-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--habit-line);
  border-radius: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--habit-accent) 5%, transparent), transparent 45%),
    var(--habit-card);
  transition: 0.22s ease;
}

.habit-v2-card::before {
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 5px 5px 0;
  background: var(--habit-accent);
  content: '';
}

[dir="ltr"] .habit-v2-card::before {
  border-radius: 5px 0 0 5px;
}

.habit-v2-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--habit-accent) 34%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--habit-accent) 8%, transparent), transparent 52%),
    var(--habit-card-strong);
}

.habit-v2-card.is-done {
  border-color: color-mix(in srgb, var(--habit-accent) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--habit-accent) 5%, transparent);
}

.habit-v2-card-head {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.habit-v2-icon {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--habit-accent) 13%, transparent);
  font-size: 21px;
}

.habit-v2-title {
  min-width: 0;
}

.habit-v2-title>span {
  display: block;
  overflow: hidden;
  color: var(--habit-accent);
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-v2-title h3 {
  margin: 3px 0 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-v2-card-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.habit-v2-card-menu button {
  display: grid;
  width: 29px;
  height: 29px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: var(--habit-card-strong);
  color: var(--habit-muted);
  cursor: pointer;
}

.habit-v2-card-menu button:last-child {
  color: #ed7790;
}

.habit-v2-note {
  min-height: 35px;
  margin: 12px 0 0;
  color: var(--habit-muted);
  font-size: 9px;
  line-height: 1.7;
}

.habit-v2-schedule {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 9px;
  color: var(--habit-accent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--habit-accent) 9%, transparent);
  font-size: 9px;
}

.habit-v2-schedule span {
  color: var(--habit-muted);
}

.habit-v2-schedule strong {
  margin-inline-start: auto;
  font-size: 9px;
  font-weight: 850;
  direction: ltr;
}

.habit-v2-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.habit-v2-progress-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.habit-v2-progress-copy strong {
  color: var(--habit-accent);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.habit-v2-progress-copy strong small {
  color: var(--habit-muted);
  font-size: 9px;
  font-weight: 700;
}

.habit-v2-progress-copy>span {
  margin-top: 4px;
  color: var(--habit-muted);
  font-size: 8px;
}

.habit-v2-card.is-done .habit-v2-progress-copy>span {
  color: var(--habit-mint);
}

.habit-v2-ring {
  display: grid;
  width: 51px;
  height: 51px;
  flex: 0 0 auto;
  padding: 5px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--habit-accent) calc(var(--progress) * 1%), var(--habit-line) 0);
}

.habit-v2-ring::before {
  grid-area: 1 / 1;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: #17182b;
  content: '';
}

html.light .habit-v2-ring::before {
  background: #fff;
}

.habit-v2-ring strong {
  z-index: 1;
  grid-area: 1 / 1;
  font-size: 9px;
  font-weight: 900;
}

.habit-v2-track {
  height: 4px;
  margin: 13px 0 16px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--habit-line);
}

.habit-v2-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--habit-accent) 70%, #fff), var(--habit-accent));
}

.habit-v2-week {
  padding: 12px;
  border-radius: 14px;
  background: var(--habit-card);
}

.habit-v2-week-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.habit-v2-week-label>span {
  color: var(--habit-muted);
  font-size: 8px;
  font-weight: 700;
}

.habit-v2-week-label>b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f4bf58;
  font-size: 8px;
}

.habit-v2-week-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  direction: ltr;
}

.habit-v2-week-dots>span {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4px;
}

.habit-v2-week-dots>span>i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--habit-line);
  border-radius: 8px;
  background: var(--habit-card-strong);
  color: #fff;
  font-style: normal;
}

.habit-v2-week-dots>span.is-done>i {
  border-color: transparent;
  background: var(--habit-accent);
}

.habit-v2-week-dots>span.is-off>i {
  border-style: dashed;
  opacity: 0.35;
}

.habit-v2-week-dots small {
  color: var(--habit-muted);
  font-size: 7px;
}

.habit-v2-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--habit-line);
}

.habit-v2-card-footer>div:first-child {
  display: flex;
  flex-direction: column;
}

.habit-v2-card-footer>div:first-child span {
  color: var(--habit-muted);
  font-size: 8px;
}

.habit-v2-card-footer>div:first-child strong {
  margin-top: 2px;
  font-size: 10px;
}

.habit-v2-counter {
  display: grid;
  grid-template-columns: 32px 35px 32px;
  align-items: center;
  gap: 4px;
}

.habit-v2-counter button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--habit-card-strong);
  color: var(--habit-muted);
  cursor: pointer;
}

.habit-v2-counter button:last-child {
  background: var(--habit-accent);
  color: #fff;
}

.habit-v2-counter button:disabled {
  cursor: default;
  opacity: 0.35;
}

.habit-v2-counter strong {
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.habit-v2-aside {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.habit-v2-week-card,
.habit-v2-insight,
.habit-v2-categories {
  padding: 21px;
}

.habit-v2-week-card>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.habit-v2-week-card>header b {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: var(--habit-primary-soft);
  color: #9185fb;
  font-size: 12px;
}

.habit-v2-week-bars {
  display: flex;
  height: 145px;
  align-items: flex-end;
  gap: 7px;
  margin-top: 20px;
  direction: ltr;
}

.habit-v2-week-bars>div {
  display: grid;
  height: 100%;
  flex: 1;
  grid-template-rows: 16px 1fr 16px;
  place-items: center;
}

.habit-v2-week-bars span,
.habit-v2-week-bars small {
  color: var(--habit-muted);
  font-size: 7px;
}

.habit-v2-week-bars i {
  display: flex;
  width: min(100%, 21px);
  height: 100%;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 7px 7px 3px 3px;
  background: var(--habit-card);
}

.habit-v2-week-bars em {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: inherit;
  background: linear-gradient(180deg, #8b7ffd, #5d51d5);
}

.habit-v2-week-card>footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--habit-line);
}

.habit-v2-week-card>footer strong {
  color: #9185fb;
  font-size: 24px;
  font-weight: 900;
}

.habit-v2-week-card>footer span {
  color: var(--habit-muted);
  font-size: 8px;
  line-height: 1.55;
}

.habit-v2-insight {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(244, 191, 88, 0.06), transparent 55%),
    var(--habit-bg);
}

.habit-v2-insight-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: rgba(244, 191, 88, 0.11);
  color: #f4bf58;
}

.habit-v2-insight h3 {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-v2-insight p {
  margin: 6px 0 0;
  color: var(--habit-muted);
  font-size: 9px;
  line-height: 1.75;
}

.habit-v2-categories>header {
  margin-bottom: 14px;
}

.habit-v2-categories>div {
  display: grid;
  gap: 8px;
}

.habit-v2-categories>div>div {
  display: grid;
  grid-template-columns: 29px minmax(58px, auto) minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
}

.habit-v2-categories>div>div>span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--category-color) 11%, transparent);
  color: var(--category-color);
}

.habit-v2-categories>div>div>strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-v2-categories>div>div>i {
  height: 4px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--habit-line);
}

.habit-v2-categories>div>div>i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--category-color);
}

.habit-v2-categories>div>div>small {
  color: var(--habit-muted);
  font-size: 8px;
  text-align: center;
}

.habit-v2-empty {
  display: flex;
  min-height: 270px;
  grid-column: 1 / -1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  border: 1px dashed var(--habit-line);
  border-radius: 18px;
  color: var(--habit-muted);
  text-align: center;
}

.habit-v2-empty>svg {
  color: #9185fb;
}

.habit-v2-empty h3 {
  margin: 12px 0 4px;
  color: var(--habit-text);
  font-size: 14px;
}

.habit-v2-empty p {
  margin: 0;
  font-size: 9px;
}

.habit-v2-empty button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  padding: 8px 13px;
  border: 0;
  border-radius: 10px;
  background: var(--habit-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

/* Habits add/edit modal */
#habit-modal.habit-v2-modal-backdrop {
  z-index: 12050;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(5, 7, 17, 0.74);
  backdrop-filter: blur(16px);
}

#habit-modal.habit-v2-modal-backdrop.open {
  display: flex;
}

.habit-v2-modal {
  display: flex;
  flex-direction: column;
  --modal-line: rgba(255, 255, 255, 0.09);
  --modal-card: rgba(255, 255, 255, 0.045);
  width: min(760px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 25px;
  background:
    radial-gradient(circle at 13% 7%, rgba(117, 104, 242, 0.17), transparent 30%),
    linear-gradient(145deg, #191a2d, #101522);
  color: var(--clr-text);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.48);
}

html.light .habit-v2-modal {
  --modal-line: rgba(54, 47, 103, 0.11);
  --modal-card: #f7f7fc;
  border-color: rgba(54, 47, 103, 0.12);
  background:
    radial-gradient(circle at 13% 7%, rgba(117, 104, 242, 0.1), transparent 30%),
    linear-gradient(145deg, #fff, #f7f8fc);
  color: #1f2437;
  box-shadow: 0 35px 90px rgba(25, 29, 53, 0.22);
}

.habit-v2-modal>header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 13px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--modal-line);
  flex-shrink: 0;
}

.habit-v2-modal-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: rgba(117, 104, 242, 0.13);
  font-size: 22px;
}

.habit-v2-modal>header h2 {
  margin: 3px 0 0;
  font-size: 18px;
  font-weight: 900;
}

.habit-v2-modal>header>button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--modal-line);
  border-radius: 11px;
  background: var(--modal-card);
  color: var(--clr-text-muted);
  cursor: pointer;
}

.habit-v2-modal form {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.habit-v2-modal-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.habit-v2-templates,
.habit-v2-field.is-wide {
  grid-column: 1 / -1;
}

.habit-v2-templates {
  padding: 12px;
  border: 1px solid var(--modal-line);
  border-radius: 14px;
  background: var(--modal-card);
}

.habit-v2-templates>div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.habit-v2-templates button {
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid var(--modal-line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.habit-v2-templates button:hover {
  border-color: rgba(117, 104, 242, 0.35);
  background: rgba(117, 104, 242, 0.09);
}

.habit-v2-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.habit-v2-field>span:first-child {
  color: var(--clr-text-muted);
  font-size: 9px;
  font-weight: 700;
}

.habit-v2-field input:not([type="color"]),
.habit-v2-field select,
.habit-v2-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  resize: vertical;
  border: 1px solid var(--modal-line);
  border-radius: 11px;
  outline: none;
  background: var(--modal-card);
  color: inherit;
  font-size: 10px;
}

.habit-v2-field textarea {
  min-height: 72px;
}

.habit-v2-field select option {
  background: #171a29;
  color: #fff;
}

html.light .habit-v2-field select option {
  background: #fff;
  color: #1f2437;
}

.habit-v2-field input:focus,
.habit-v2-field select:focus,
.habit-v2-field textarea:focus {
  border-color: rgba(117, 104, 242, 0.55);
  box-shadow: 0 0 0 3px rgba(117, 104, 242, 0.08);
}

.habit-v2-color-field {
  display: grid !important;
  min-height: 42px;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border: 1px solid var(--modal-line);
  border-radius: 11px;
  background: var(--modal-card);
}

.habit-v2-color-field>i {
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: #7568f2;
}

.habit-v2-color-field input[type="color"] {
  width: 100%;
  height: 27px;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.habit-v2-color-field b {
  color: var(--clr-text-muted);
  font-size: 8px;
  font-weight: 700;
}

.habit-v2-modal form>footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--modal-line);
  background: #151828;
  flex-shrink: 0;
  z-index: 10;
}

html.light .habit-v2-modal form>footer {
  background: #f7f8fc;
}

.habit-v2-modal form>footer button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--modal-line);
  border-radius: 12px;
  background: var(--modal-card);
  color: var(--clr-text, #ffffff);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

html.light .habit-v2-modal form>footer button {
  color: #1f2437;
  border-color: rgba(54, 47, 103, 0.2);
  background: #eef0f8;
}

.habit-v2-modal form>footer button[type="submit"] {
  border: 0;
  background: linear-gradient(135deg, #7568f2, #5c51d4) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(97, 81, 219, 0.35);
}

@media (max-width: 1150px) {
  .habit-v2-layout {
    grid-template-columns: 1fr;
  }

  .habit-v2-aside {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .habit-v2-hero {
    min-height: auto;
    padding: 30px;
  }

  .habit-v2-hero-ring {
    width: 158px;
    height: 158px;
  }

  .habit-v2-days {
    grid-template-columns: repeat(7, 72px);
  }

  .habit-v2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .habit-v2-cards {
    grid-template-columns: 1fr;
  }

  .habit-v2-aside {
    grid-template-columns: 1fr 1fr;
  }

  .habit-v2-week-card {
    grid-row: span 2;
  }
}

@media (max-width: 590px) {
  .habit-v2-hero {
    align-items: center;
    flex-direction: column-reverse;
    gap: 25px;
    padding: 27px 22px;
    border-radius: 23px;
    text-align: center;
  }

  .habit-v2-hero-copy h2 {
    font-size: 27px;
  }

  .habit-v2-hero-actions {
    justify-content: center;
  }

  .habit-v2-hero-ring {
    width: 145px;
    height: 145px;
  }

  .habit-v2-main,
  .habit-v2-week-card,
  .habit-v2-insight,
  .habit-v2-categories {
    padding: 17px;
  }

  .habit-v2-stats {
    gap: 8px;
  }

  .habit-v2-stats article {
    grid-template-columns: 37px minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }

  .habit-v2-stats article>span {
    width: 37px;
    height: 37px;
  }

  .habit-v2-card {
    padding: 15px;
  }

  .habit-v2-card-head {
    grid-template-columns: 43px minmax(0, 1fr) auto;
  }

  .habit-v2-icon {
    width: 43px;
    height: 43px;
  }

  .habit-v2-card-menu button {
    width: 27px;
    height: 27px;
  }

  .habit-v2-aside {
    grid-template-columns: 1fr;
  }

  .habit-v2-week-card {
    grid-row: auto;
  }

  #habit-modal.habit-v2-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .habit-v2-modal {
    width: 100%;
    max-height: 92dvh;
    border-radius: 25px 25px 0 0;
    display: flex;
    flex-direction: column;
  }

  .habit-v2-modal form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .habit-v2-modal>header {
    grid-template-columns: 45px minmax(0, 1fr) 34px;
    padding: 16px;
    flex-shrink: 0;
  }

  .habit-v2-modal-mark {
    width: 45px;
    height: 45px;
  }

  .habit-v2-modal-body {
    grid-template-columns: 1fr;
    padding: 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .habit-v2-templates,
  .habit-v2-field.is-wide {
    grid-column: auto;
  }

  .habit-v2-modal form>footer {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    z-index: 10;
  }

  .habit-v2-modal form>footer button {
    flex: 1;
    min-height: 46px;
    font-size: 14px;
  }
}

/* ──────────────────────────────────────
   Prayer Times Alert Card
   ────────────────────────────────────── */
.prayer-alert-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  background: var(--surface-color, rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(81, 69, 220, 0.18);
  border-radius: var(--border-radius-lg, 16px);
  margin-bottom: var(--space-4, 16px);
  transition: all 0.3s ease;
  animation: sabiq-panel-in 0.4s ease;
}

html.light .prayer-alert-card {
  background: rgba(81, 69, 220, 0.03);
  border-color: rgba(81, 69, 220, 0.12);
}

.prayer-alert-content {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  min-width: 0;
  flex: 1;
}

.prayer-alert-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(81, 69, 220, 0.1);
  color: var(--clr-primary, #5145dc);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.prayer-alert-icon svg {
  width: 22px;
  height: 22px;
}

.prayer-alert-text {
  min-width: 0;
  flex: 1;
}

.prayer-alert-text h4 {
  margin: 0 0 3px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
}

.prayer-alert-text p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
}

.prayer-alert-actions {
  display: flex;
  gap: var(--space-2, 8px);
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .prayer-alert-card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4, 16px);
  }

  .prayer-alert-actions {
    justify-content: flex-end;
    margin-top: var(--space-2, 8px);
  }

  .prayer-alert-actions button {
    flex: 1;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Company projects & tasks — delivery workspace
   ═══════════════════════════════════════════════════════════════ */
.company-projects-page {
  --projects-purple: #7867f3;
  --projects-purple-deep: #5445d8;
  --projects-blue: #4d8df7;
  --projects-emerald: #2bc296;
  --projects-amber: #f2b84b;
  --projects-rose: #f26f83;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  color: #f8fafc;
}

.company-projects-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 175px;
  padding: 27px 30px;
  overflow: hidden;
  border: 1px solid rgba(139, 124, 247, 0.2);
  border-radius: 25px;
  background:
    radial-gradient(circle at 12% 18%, rgba(75, 207, 180, 0.15), transparent 30%),
    radial-gradient(circle at 85% 100%, rgba(120, 103, 243, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(22, 27, 47, 0.98), rgba(17, 21, 37, 0.96));
  box-shadow: 0 20px 55px rgba(3, 7, 18, 0.2);
}

.company-projects-hero::before,
.company-projects-hero::after {
  position: absolute;
  content: '';
  pointer-events: none;
}

.company-projects-hero::before {
  inset: 0;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
}

.company-projects-hero::after {
  width: 230px;
  height: 230px;
  inset-inline-end: -110px;
  top: -115px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(120, 103, 243, .03), 0 0 0 62px rgba(120, 103, 243, .025);
}

.company-projects-hero-copy,
.company-projects-hero-side,
.company-projects-hero-actions,
.company-projects-health-chip {
  position: relative;
  z-index: 1;
  display: flex;
}

.company-projects-hero-copy {
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.company-projects-hero-icon {
  display: grid;
  width: 67px;
  height: 67px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: linear-gradient(145deg, #38c5a2, #7764ed 75%);
  box-shadow: 0 12px 26px rgba(84, 69, 216, .3), inset 0 1px rgba(255, 255, 255, .25);
}

.company-projects-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: #6ee7c6;
  font-size: .7rem;
  font-weight: 900;
}

.company-projects-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 950;
  letter-spacing: -.04em;
}

.company-projects-hero p {
  max-width: 690px;
  margin: 8px 0 0;
  color: #aab5c9;
  font-size: .82rem;
  line-height: 1.8;
}

.company-projects-hero-side {
  min-width: 245px;
  align-items: flex-end;
  flex-direction: column;
  gap: 13px;
}

.company-projects-health-chip {
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(110, 231, 198, .14);
  border-radius: 14px;
  background: rgba(12, 18, 33, .42);
  backdrop-filter: blur(10px);
}

.company-projects-health-chip>span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  color: #6ee7c6;
  border-radius: 10px;
  background: rgba(43, 194, 150, .11);
}

.company-projects-health-chip small,
.company-projects-health-chip strong {
  display: block;
}

.company-projects-health-chip small {
  color: #8997af;
  font-size: .56rem;
}

.company-projects-health-chip strong {
  margin-top: 2px;
  color: #f8fafc;
  font-size: .67rem;
}

.company-projects-hero-actions {
  gap: 8px;
}

.company-projects-hero-actions button {
  min-height: 38px;
}

.company-projects-metrics {
  margin: 0;
}

.company-projects-kpi {
  position: relative;
  overflow: hidden;
}

.company-projects-kpi::after {
  position: absolute;
  inset-inline: 26px;
  bottom: -1px;
  height: 3px;
  content: '';
  border-radius: 9px 9px 0 0;
  background: var(--projects-purple);
}

.company-projects-kpi[data-tone="blue"]::after {
  background: var(--projects-blue);
}

.company-projects-kpi[data-tone="emerald"]::after {
  background: var(--projects-emerald);
}

.company-projects-kpi[data-tone="amber"]::after {
  background: var(--projects-amber);
}

.company-projects-kpi[data-tone="rose"]::after {
  background: var(--projects-rose);
}

.company-projects-kpi[data-tone="blue"] .company-crm-kpi-icon {
  color: var(--projects-blue);
  background: rgba(77, 141, 247, .1);
}

.company-projects-kpi[data-tone="emerald"] .company-crm-kpi-icon {
  color: var(--projects-emerald);
  background: rgba(43, 194, 150, .1);
}

.company-projects-kpi[data-tone="amber"] .company-crm-kpi-icon {
  color: var(--projects-amber);
  background: rgba(242, 184, 75, .1);
}

.company-projects-kpi[data-tone="rose"] .company-crm-kpi-icon {
  color: var(--projects-rose);
  background: rgba(242, 111, 131, .1);
}

.company-projects-tabs {
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 15px;
  background: rgba(13, 18, 31, .72);
}

.company-projects-tabs .company-crm-tab.active {
  color: #f8fafc;
  border-color: rgba(120, 103, 243, .24);
  background: linear-gradient(135deg, rgba(120, 103, 243, .2), rgba(43, 194, 150, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.company-projects-content {
  min-height: 330px;
}

.company-projects-loading {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #94a3b8;
}

.company-projects-loading p {
  margin: 0;
  font-size: .72rem;
}

.company-projects-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}

.company-projects-section-head>div>span {
  color: #70d7bc;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .04em;
}

.company-projects-section-head h2 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 1.23rem;
  font-weight: 950;
}

.company-projects-section-head p {
  max-width: 720px;
  margin: 5px 0 0;
  color: #8f9db4;
  font-size: .67rem;
  line-height: 1.65;
}

.company-projects-overview-grid,
.company-projects-overview-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(320px, .87fr);
  gap: 15px;
}

.company-projects-overview-lower {
  margin-top: 15px;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
}

.company-projects-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(20, 27, 44, .85), rgba(12, 17, 29, .72));
  box-shadow: 0 15px 36px rgba(2, 6, 23, .12);
}

.company-projects-panel>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 19px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.company-projects-panel>header span {
  display: block;
  color: #7f8da5;
  font-size: .54rem;
}

.company-projects-panel>header h3 {
  margin: 3px 0 0;
  color: #f8fafc;
  font-size: .77rem;
  font-weight: 900;
}

.company-projects-panel>header button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: #8d7cf7;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .58rem;
  font-weight: 850;
}

.company-projects-panel>header>b {
  padding: 5px 8px;
  color: #b8c3d6;
  border-radius: 999px;
  background: rgba(148, 163, 184, .08);
  font-size: .52rem;
}

.company-projects-panel>header>b[data-tone="emerald"] {
  color: #62dbb7;
  background: rgba(43, 194, 150, .09);
}

.company-projects-panel>header>b[data-tone="amber"] {
  color: #f5c96f;
  background: rgba(242, 184, 75, .09);
}

.company-projects-panel>header>b[data-tone="purple"] {
  color: #a99afc;
  background: rgba(120, 103, 243, .1);
}

.company-projects-pulse-body {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  align-items: center;
  gap: 25px;
  padding: 22px;
}

.company-projects-progress-ring {
  --progress: 0;
  position: relative;
  display: grid;
  width: 132px;
  height: 132px;
  margin: auto;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--projects-emerald) calc(var(--progress) * 1%), rgba(148, 163, 184, .1) 0);
}

.company-projects-progress-ring::before {
  position: absolute;
  inset: 11px;
  content: '';
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: inherit;
  background: #111827;
}

.company-projects-progress-ring strong,
.company-projects-progress-ring span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.company-projects-progress-ring strong {
  color: #fff;
  font-size: 1.45rem;
  font-weight: 950;
}

.company-projects-progress-ring span {
  color: #8290a8;
  font-size: .55rem;
}

.company-projects-pulse-stats {
  display: grid;
  gap: 8px;
}

.company-projects-pulse-stats>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 11px;
  background: rgba(148, 163, 184, .035);
}

.company-projects-pulse-stats span {
  color: #8795ac;
  font-size: .58rem;
}

.company-projects-pulse-stats strong {
  color: #f8fafc;
  font-size: .69rem;
}

.company-projects-urgent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
}

.company-projects-urgent-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 12px;
  background: rgba(148, 163, 184, .035);
}

.company-projects-urgent-item[data-overdue="true"] {
  border-color: rgba(242, 111, 131, .17);
  background: rgba(242, 111, 131, .045);
}

.company-projects-task-check {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #9c8df8;
  border-radius: 9px;
  background: rgba(120, 103, 243, .1);
}

.company-projects-urgent-item strong,
.company-projects-urgent-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-projects-urgent-item strong {
  color: #edf2f9;
  font-size: .62rem;
}

.company-projects-urgent-item small {
  margin-top: 2px;
  color: #76859e;
  font-size: .51rem;
}

.company-projects-urgent-item>span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #aab5c7;
  font-size: .5rem;
  white-space: nowrap;
}

.company-projects-urgent-item[data-overdue="true"]>span:last-child {
  color: #fb8798;
}

.company-projects-portfolio-list,
.company-projects-workload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
}

.company-projects-portfolio-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  color: inherit;
  text-align: start;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: .2s ease;
}

.company-projects-portfolio-item:hover {
  border-color: rgba(120, 103, 243, .16);
  background: rgba(120, 103, 243, .045);
  transform: translateY(-1px);
}

.company-projects-project-mark {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #a99afc;
  border-radius: 10px;
  background: rgba(120, 103, 243, .1);
}

.company-projects-project-mark[data-tone="emerald"] {
  color: #5bd9b3;
  background: rgba(43, 194, 150, .1);
}

.company-projects-project-mark[data-tone="blue"] {
  color: #76a9fb;
  background: rgba(77, 141, 247, .1);
}

.company-projects-project-mark[data-tone="amber"] {
  color: #f5c96f;
  background: rgba(242, 184, 75, .1);
}

.company-projects-portfolio-item strong,
.company-projects-portfolio-item small {
  display: block;
}

.company-projects-portfolio-item strong {
  color: #f1f5f9;
  font-size: .62rem;
}

.company-projects-portfolio-item small {
  margin: 2px 0 6px;
  color: #77869e;
  font-size: .5rem;
}

.company-projects-portfolio-item>b {
  color: #f8fafc;
  font-size: .65rem;
  text-align: end;
}

.company-projects-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .09);
}

.company-projects-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--projects-purple), var(--projects-emerald));
}

.company-projects-workload-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
}

.company-projects-workload-row>span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #d8d2ff;
  border: 1px solid rgba(120, 103, 243, .16);
  border-radius: 10px;
  background: rgba(120, 103, 243, .09);
  font-size: .51rem;
  font-weight: 900;
}

.company-projects-workload-row>div>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.company-projects-workload-row strong {
  color: #e7edf6;
  font-size: .58rem;
}

.company-projects-workload-row small {
  color: #78869e;
  font-size: .48rem;
}

.company-projects-workload-row i {
  display: block;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(148, 163, 184, .09);
}

.company-projects-workload-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4d8df7, #7867f3);
}

.company-projects-empty {
  display: grid;
  min-height: 170px;
  padding: 22px;
  place-items: center;
  align-content: center;
  text-align: center;
  color: #8795aa;
}

.company-projects-empty>span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #9c8cf7;
  border-radius: 15px;
  background: rgba(120, 103, 243, .09);
}

.company-projects-empty h3 {
  margin: 10px 0 3px;
  color: #e7edf6;
  font-size: .73rem;
}

.company-projects-empty p {
  max-width: 360px;
  margin: 0 0 12px;
  font-size: .57rem;
  line-height: 1.6;
}

.company-projects-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 14px;
  background: rgba(15, 21, 35, .68);
}

.company-projects-toolbar label {
  display: flex;
  min-width: 240px;
  flex: 1;
  align-items: center;
  gap: 7px;
  padding-inline: 11px;
  color: #738199;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 10px;
  background: rgba(148, 163, 184, .035);
}

.company-projects-toolbar input,
.company-projects-toolbar select {
  min-height: 35px;
  color: #e8edf5;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 10px;
  outline: 0;
  background: rgba(148, 163, 184, .035);
  font-family: inherit;
  font-size: .57rem;
}

.company-projects-toolbar input {
  width: 100%;
  border: 0;
  background: transparent;
}

.company-projects-toolbar select {
  min-width: 145px;
  padding: 0 10px;
}

.company-projects-board-toolbar select {
  min-width: 125px;
}

.company-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.company-projects-project-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(21, 28, 46, .9), rgba(12, 17, 29, .76));
  box-shadow: 0 15px 35px rgba(2, 6, 23, .1);
  transition: .22s ease;
}

.company-projects-project-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  content: '';
  background: var(--projects-purple);
}

.company-projects-project-card[data-tone="emerald"]::before {
  background: var(--projects-emerald);
}

.company-projects-project-card[data-tone="blue"]::before {
  background: var(--projects-blue);
}

.company-projects-project-card[data-tone="amber"]::before {
  background: var(--projects-amber);
}

.company-projects-project-card:hover {
  border-color: rgba(120, 103, 243, .22);
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(2, 6, 23, .18);
}

.company-projects-project-card>header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-projects-project-card>header>span:first-child {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: #9f91f8;
  border-radius: 11px;
  background: rgba(120, 103, 243, .1);
}

.company-projects-project-card h3 {
  margin: 14px 0 5px;
  color: #f8fafc;
  font-size: .81rem;
  font-weight: 900;
}

.company-projects-project-card>p {
  min-height: 43px;
  margin: 0 0 14px;
  overflow: hidden;
  color: #8593a9;
  font-size: .56rem;
  line-height: 1.65;
}

.company-projects-badge,
.company-projects-priority {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: #aaa0f4;
  border-radius: 999px;
  background: rgba(120, 103, 243, .09);
  font-size: .49rem;
  font-weight: 850;
  white-space: nowrap;
}

.company-projects-badge i,
.company-projects-priority i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.company-projects-badge[data-tone="emerald"],
.company-projects-priority[data-tone="emerald"] {
  color: #58d7b1;
  background: rgba(43, 194, 150, .09);
}

.company-projects-badge[data-tone="blue"] {
  color: #78aafa;
  background: rgba(77, 141, 247, .09);
}

.company-projects-badge[data-tone="amber"],
.company-projects-priority[data-tone="amber"] {
  color: #f4c66a;
  background: rgba(242, 184, 75, .09);
}

.company-projects-badge[data-tone="rose"],
.company-projects-priority[data-tone="rose"] {
  color: #f68b9b;
  background: rgba(242, 111, 131, .09);
}

.company-projects-card-actions {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
}

.company-projects-card-actions button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #8897ad;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 8px;
  background: rgba(148, 163, 184, .035);
  cursor: pointer;
}

.company-projects-card-actions button:hover {
  color: #fff;
  border-color: rgba(120, 103, 243, .24);
  background: rgba(120, 103, 243, .1);
}

.company-projects-card-progress>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.company-projects-card-progress span {
  color: #8391a7;
  font-size: .52rem;
}

.company-projects-card-progress strong {
  color: #f8fafc;
  font-size: .62rem;
}

.company-projects-card-progress>i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(148, 163, 184, .09);
}

.company-projects-card-progress>i>b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7867f3, #3dc8a4);
}

.company-projects-project-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.company-projects-project-facts>div {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  color: #8593aa;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 10px;
  background: rgba(148, 163, 184, .025);
}

.company-projects-project-facts span,
.company-projects-project-facts small {
  display: block;
  min-width: 0;
}

.company-projects-project-facts span {
  color: #e1e7f0;
  font-size: .51rem;
}

.company-projects-project-facts small {
  margin-top: 2px;
  color: #74839a;
  font-size: .44rem;
}

.company-projects-project-card>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .08);
}

.company-projects-project-card>footer>span {
  color: #8391a7;
  font-size: .51rem;
}

.company-projects-project-card>footer>span strong {
  color: #e8edf5;
}

.company-projects-project-card>footer button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: #9a8af7;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .51rem;
  font-weight: 850;
}

.company-projects-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  align-items: start;
  gap: 12px;
}

.company-projects-board-column {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 17px;
  background: rgba(13, 18, 31, .62);
}

.company-projects-board-column>header {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 8px;
  padding: 4px 3px 12px;
}

.company-projects-board-column>header>span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #a699fa;
  border-radius: 10px;
  background: rgba(120, 103, 243, .1);
}

.company-projects-board-column>header>span[data-tone="amber"] {
  color: #f4c66a;
  background: rgba(242, 184, 75, .09);
}

.company-projects-board-column>header>span[data-tone="emerald"] {
  color: #58d7b1;
  background: rgba(43, 194, 150, .09);
}

.company-projects-board-column>header h3 {
  margin: 0;
  color: #f1f5f9;
  font-size: .66rem;
}

.company-projects-board-column>header p {
  margin: 2px 0 0;
  color: #75849b;
  font-size: .48rem;
}

.company-projects-board-column>header>b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #aab5c7;
  border-radius: 8px;
  background: rgba(148, 163, 184, .08);
  font-size: .52rem;
}

.company-projects-board-column>div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.company-projects-task-card {
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(24, 31, 50, .9), rgba(17, 23, 38, .86));
  box-shadow: 0 9px 22px rgba(2, 6, 23, .09);
}

.company-projects-task-card[data-overdue="true"] {
  border-color: rgba(242, 111, 131, .22);
  box-shadow: inset 3px 0 rgba(242, 111, 131, .72);
}

.company-projects-task-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.company-projects-task-card h4 {
  margin: 9px 0 4px;
  color: #f5f7fb;
  font-size: .63rem;
  font-weight: 900;
}

.company-projects-task-card>p {
  min-height: 31px;
  margin: 0 0 8px;
  color: #7e8ca2;
  font-size: .49rem;
  line-height: 1.55;
}

.company-projects-task-project {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: #9d90f4;
  border-radius: 7px;
  background: rgba(120, 103, 243, .07);
  font-size: .46rem;
}

.company-projects-task-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .07);
}

.company-projects-task-meta>span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #8290a7;
  font-size: .46rem;
}

.company-projects-task-meta>span[data-overdue="true"] {
  color: #f5899a;
}

.company-projects-assignee i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #d8d2ff;
  border-radius: 7px;
  background: rgba(120, 103, 243, .12);
  font-size: .39rem;
  font-style: normal;
  font-weight: 900;
}

.company-projects-task-card>footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.company-projects-task-card>footer button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  color: #aeb9ca;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 7px;
  background: rgba(148, 163, 184, .035);
  cursor: pointer;
  font-family: inherit;
  font-size: .44rem;
}

.company-projects-task-card>footer button:hover {
  color: #fff;
  border-color: rgba(120, 103, 243, .22);
  background: rgba(120, 103, 243, .1);
}

.company-projects-column-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #64748b;
  border: 1px dashed rgba(148, 163, 184, .12);
  border-radius: 12px;
  font-size: .5rem;
}

.company-projects-timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  align-items: start;
  gap: 14px;
}

.company-projects-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.company-projects-timeline>div {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 16px;
  background: rgba(15, 21, 35, .66);
}

.company-projects-timeline>div>header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  padding: 0 2px;
}

.company-projects-timeline>div>header>span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--projects-purple);
  box-shadow: 0 0 0 4px rgba(120, 103, 243, .09);
}

.company-projects-timeline>div>header>span[data-tone="rose"] {
  background: var(--projects-rose);
  box-shadow: 0 0 0 4px rgba(242, 111, 131, .09);
}

.company-projects-timeline>div>header>span[data-tone="amber"] {
  background: var(--projects-amber);
  box-shadow: 0 0 0 4px rgba(242, 184, 75, .09);
}

.company-projects-timeline>div>header h3 {
  flex: 1;
  margin: 0;
  color: #eef2f8;
  font-size: .64rem;
}

.company-projects-timeline>div>header b {
  color: #8d9ab0;
  font-size: .52rem;
}

.company-projects-timeline-task {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-top: 1px solid rgba(148, 163, 184, .07);
}

.company-projects-timeline-task time {
  color: #8b99ae;
  font-size: .49rem;
}

.company-projects-timeline-task strong,
.company-projects-timeline-task div>span {
  display: block;
}

.company-projects-timeline-task strong {
  color: #edf2f8;
  font-size: .58rem;
}

.company-projects-timeline-task div>span {
  margin-top: 2px;
  color: #728198;
  font-size: .46rem;
}

.company-projects-timeline-task>button {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #58d7b1;
  border: 1px solid rgba(43, 194, 150, .15);
  border-radius: 8px;
  background: rgba(43, 194, 150, .07);
  cursor: pointer;
}

.company-projects-timeline-empty {
  margin: 0;
  padding: 13px;
  color: #6f7d93;
  text-align: center;
  border-top: 1px solid rgba(148, 163, 184, .07);
  font-size: .5rem;
}

.company-projects-milestones>div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px;
}

.company-projects-milestone {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px;
  color: inherit;
  text-align: start;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.company-projects-milestone:hover {
  border-color: rgba(120, 103, 243, .15);
  background: rgba(120, 103, 243, .04);
}

.company-projects-milestone>span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #a699fa;
  border-radius: 9px;
  background: rgba(120, 103, 243, .09);
}

.company-projects-milestone>span[data-tone="emerald"] {
  color: #58d7b1;
  background: rgba(43, 194, 150, .09);
}

.company-projects-milestone>span[data-tone="amber"] {
  color: #f4c66a;
  background: rgba(242, 184, 75, .09);
}

.company-projects-milestone strong,
.company-projects-milestone small {
  display: block;
}

.company-projects-milestone strong {
  color: #e9eef6;
  font-size: .57rem;
}

.company-projects-milestone small {
  margin-top: 2px;
  color: #77869d;
  font-size: .44rem;
}

.company-projects-milestone>b {
  color: #a699fa;
  text-align: end;
  font-size: .55rem;
}

.company-projects-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(10px);
}

.company-projects-modal-dialog {
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 22px;
  background: linear-gradient(145deg, #171e30, #0f1524);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

.company-projects-modal-head {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.company-projects-modal-head>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #a99afc;
  border-radius: 12px;
  background: rgba(120, 103, 243, .11);
}

.company-projects-modal-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: .82rem;
  font-weight: 900;
}

.company-projects-modal-head p {
  margin: 3px 0 0;
  color: #8290a7;
  font-size: .52rem;
  line-height: 1.55;
}

.company-projects-modal-head button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #8b99ae;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 9px;
  background: rgba(148, 163, 184, .04);
  cursor: pointer;
}

.company-projects-form {
  padding: 18px 20px 20px;
}

.company-projects-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.company-projects-form label>span {
  display: block;
  margin-bottom: 5px;
  color: #a7b2c4;
  font-size: .53rem;
  font-weight: 750;
}

.company-projects-form input,
.company-projects-form select,
.company-projects-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 39px;
  padding: 9px 10px;
  color: #edf2f8;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 10px;
  outline: none;
  background: rgba(148, 163, 184, .045);
  font-family: inherit;
  font-size: .57rem;
}

.company-projects-form textarea {
  resize: vertical;
}

.company-projects-form input:focus,
.company-projects-form select:focus,
.company-projects-form textarea:focus {
  border-color: rgba(120, 103, 243, .45);
  box-shadow: 0 0 0 3px rgba(120, 103, 243, .08);
}

.company-projects-field-wide {
  grid-column: 1 / -1;
}

.company-projects-form-error {
  margin-top: 11px;
  padding: 9px 10px;
  color: #f995a4;
  border: 1px solid rgba(242, 111, 131, .16);
  border-radius: 9px;
  background: rgba(242, 111, 131, .07);
  font-size: .52rem;
}

.company-projects-form>footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .09);
}

html.light .company-projects-page {
  color: #172033;
}

html.light .company-projects-hero {
  border-color: rgba(102, 89, 224, .18);
  background: radial-gradient(circle at 12% 18%, rgba(43, 194, 150, .12), transparent 30%), radial-gradient(circle at 85% 100%, rgba(120, 103, 243, .16), transparent 34%), linear-gradient(135deg, #f8f9ff, #f2f4fb);
  box-shadow: 0 18px 48px rgba(71, 85, 105, .11);
}

html.light .company-projects-hero h1,
html.light .company-projects-health-chip strong {
  color: #172033;
}

html.light .company-projects-hero p {
  color: #64748b;
}

html.light .company-projects-health-chip {
  border-color: rgba(43, 194, 150, .17);
  background: rgba(255, 255, 255, .66);
}

html.light .company-projects-tabs,
html.light .company-projects-toolbar {
  border-color: #e3e7f0;
  background: rgba(255, 255, 255, .84);
}

html.light .company-projects-tabs .company-crm-tab.active {
  color: #4f43c8;
  background: linear-gradient(135deg, rgba(120, 103, 243, .11), rgba(43, 194, 150, .06));
}

html.light .company-projects-section-head h2,
html.light .company-projects-panel>header h3,
html.light .company-projects-pulse-stats strong,
html.light .company-projects-urgent-item strong,
html.light .company-projects-portfolio-item strong,
html.light .company-projects-portfolio-item>b,
html.light .company-projects-workload-row strong,
html.light .company-projects-project-card h3,
html.light .company-projects-card-progress strong,
html.light .company-projects-project-facts span,
html.light .company-projects-project-card>footer>span strong,
html.light .company-projects-board-column>header h3,
html.light .company-projects-task-card h4,
html.light .company-projects-timeline>div>header h3,
html.light .company-projects-timeline-task strong,
html.light .company-projects-milestone strong,
html.light .company-projects-empty h3 {
  color: #182033;
}

html.light .company-projects-panel,
html.light .company-projects-project-card,
html.light .company-projects-board-column,
html.light .company-projects-timeline>div {
  border-color: #e2e7f0;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(247, 248, 253, .92));
  box-shadow: 0 12px 32px rgba(71, 85, 105, .07);
}

html.light .company-projects-progress-ring::before {
  border-color: #e7eaf1;
  background: #fff;
}

html.light .company-projects-progress-ring strong {
  color: #172033;
}

html.light .company-projects-urgent-item,
html.light .company-projects-pulse-stats>div,
html.light .company-projects-project-facts>div {
  border-color: #e7eaf1;
  background: #fafbfe;
}

html.light .company-projects-toolbar input,
html.light .company-projects-toolbar select {
  color: #273248;
  border-color: #e3e7ee;
  background: #f9fafe;
}

html.light .company-projects-toolbar input {
  background: transparent;
}

html.light .company-projects-task-card {
  border-color: #e4e8f0;
  background: #fff;
  box-shadow: 0 8px 20px rgba(71, 85, 105, .06);
}

html.light .company-projects-modal-dialog {
  border-color: #dfe4ed;
  background: #fff;
}

html.light .company-projects-modal-head h2 {
  color: #172033;
}

html.light .company-projects-form input,
html.light .company-projects-form select,
html.light .company-projects-form textarea {
  color: #273248;
  border-color: #dfe4ed;
  background: #f8f9fc;
}

@media (max-width: 1120px) {
  .company-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-projects-overview-grid,
  .company-projects-overview-lower {
    grid-template-columns: 1fr;
  }

  .company-projects-board-toolbar {
    flex-wrap: wrap;
  }

  .company-projects-board-toolbar label {
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  .company-projects-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-projects-hero-side {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .company-projects-timeline-layout {
    grid-template-columns: 1fr;
  }

  .company-projects-board {
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .company-projects-board-column {
    min-width: 265px;
  }
}

@media (max-width: 720px) {
  .company-projects-hero {
    min-height: 0;
    padding: 20px;
    border-radius: 20px;
  }

  .company-projects-hero-copy {
    align-items: flex-start;
  }

  .company-projects-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .company-projects-hero-actions,
  .company-projects-section-head>button {
    width: 100%;
  }

  .company-projects-hero-actions button {
    flex: 1;
  }

  .company-projects-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .company-projects-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .company-projects-toolbar label,
  .company-projects-toolbar select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .company-projects-grid {
    grid-template-columns: 1fr;
  }

  .company-projects-pulse-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .company-projects-page {
    gap: 13px;
  }

  .company-projects-hero {
    padding: 17px 15px;
  }

  .company-projects-hero-copy {
    flex-direction: column;
  }

  .company-projects-hero p {
    font-size: .68rem;
  }

  .company-projects-health-chip {
    width: 100%;
    box-sizing: border-box;
  }

  .company-projects-project-facts {
    grid-template-columns: 1fr;
  }

  .company-projects-timeline-task {
    grid-template-columns: 1fr auto;
  }

  .company-projects-timeline-task time,
  .company-projects-timeline-task div {
    grid-column: 1 / -1;
  }

  .company-projects-form-grid {
    grid-template-columns: 1fr;
  }

  .company-projects-field-wide {
    grid-column: auto;
  }

  .company-projects-modal {
    align-items: flex-end;
    padding: 0;
  }

  .company-projects-modal-dialog {
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .company-projects-page *,
  .company-projects-page *::before,
  .company-projects-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   Admin — Company subscriptions
══════════════════════════════════════════════════════════════ */
.admin-company-tab-count {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  place-items: center;
  color: #c9c3ff;
  border: 1px solid rgba(139, 125, 246, .24);
  border-radius: 999px;
  background: rgba(139, 125, 246, .1);
  font-size: .66rem;
  font-weight: 850;
}

.admin-section-tab.active .admin-company-tab-count {
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .14);
}

.admin-company-subscriptions {
  display: grid;
  gap: 16px;
}

.admin-company-sub-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.admin-company-sub-summary article {
  --accent: 139, 125, 246;
  position: relative;
  display: flex;
  min-height: 88px;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .94), rgba(13, 19, 33, .9));
  box-shadow: 0 13px 34px rgba(2, 6, 23, .16);
}

.admin-company-sub-summary article::after {
  position: absolute;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: rgba(var(--accent), .1);
  content: '';
  inset-inline-end: -36px;
  bottom: -54px;
  filter: blur(1px);
}

.admin-company-sub-summary article.active {
  --accent: 41, 190, 142;
}

.admin-company-sub-summary article.trial {
  --accent: 240, 169, 62;
}

.admin-company-sub-summary article.expired {
  --accent: 241, 104, 126;
}

.admin-company-sub-summary article>span {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  color: rgb(var(--accent));
  border: 1px solid rgba(var(--accent), .17);
  border-radius: 13px;
  background: rgba(var(--accent), .1);
}

.admin-company-sub-summary article>div {
  display: grid;
  gap: 3px;
}

.admin-company-sub-summary small {
  color: #8b99ae;
  font-size: .73rem;
  font-weight: 700;
}

.admin-company-sub-summary strong {
  color: #f8fafc;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.company-sub-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 15px;
  background: rgba(17, 24, 39, .66);
}

.company-sub-search {
  display: flex;
  min-width: 260px;
  flex: 1;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  color: #77869d;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 11px;
  background: rgba(148, 163, 184, .045);
}

.company-sub-search input {
  width: 100%;
  height: 42px;
  color: #e8edf5;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: .83rem;
}

.company-sub-search input::placeholder {
  color: #64748b;
}

.company-sub-toolbar select {
  width: 170px;
  height: 44px;
}

.company-sub-toolbar .btn {
  min-height: 44px;
  white-space: nowrap;
}

.company-sub-table-wrap {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 17px;
  background: rgba(17, 24, 39, .58);
  box-shadow: 0 14px 38px rgba(2, 6, 23, .14);
}

.company-sub-table-wrap .admin-table {
  margin: 0;
  border: 0;
  background: transparent;
}

.company-sub-table th {
  padding-top: 14px;
  padding-bottom: 14px;
  white-space: nowrap;
}

.company-sub-table td {
  padding-top: 15px;
  padding-bottom: 15px;
  vertical-align: middle;
}

.company-sub-identity {
  display: flex;
  min-width: 185px;
  align-items: center;
  gap: 10px;
}

.company-sub-identity>span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  color: #d9d5ff;
  border: 1px solid rgba(139, 125, 246, .2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 125, 246, .2), rgba(82, 211, 170, .08));
  font-size: .94rem;
  font-weight: 900;
}

.company-sub-identity>div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.company-sub-identity strong {
  overflow: hidden;
  max-width: 210px;
  color: #edf2f8;
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-sub-identity small,
.company-sub-email {
  display: block;
  color: #74839a;
  font-size: .65rem;
  font-weight: 600;
}

.company-sub-email {
  max-width: 180px;
  margin-top: 3px;
  overflow: hidden;
  direction: ltr;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-sub-usage {
  display: grid;
  gap: 5px;
  color: #a5b0c2;
  font-size: .68rem;
  font-weight: 650;
  white-space: nowrap;
}

.company-sub-usage span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.company-sub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
}

.company-sub-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.company-sub-status.is-active {
  color: #44d7a5;
  background: rgba(41, 190, 142, .07);
}

.company-sub-status.is-trial {
  color: #efb454;
  background: rgba(240, 169, 62, .07);
}

.company-sub-status.is-expired {
  color: #f17c91;
  background: rgba(241, 104, 126, .07);
}

.company-sub-date {
  display: grid;
  min-width: 112px;
  gap: 3px;
}

.company-sub-date strong {
  color: #d6dde8;
  font-size: .72rem;
}

.company-sub-date small {
  color: #78869b;
  font-size: .62rem;
}

.company-sub-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.company-sub-action {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  color: #a9b4c5;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(148, 163, 184, .05);
  cursor: pointer;
  font-family: inherit;
  font-size: .64rem;
  font-weight: 800;
  transition: .18s ease;
}

.company-sub-action:hover {
  color: #fff;
  border-color: rgba(139, 125, 246, .32);
  transform: translateY(-1px);
}

.company-sub-action.primary {
  color: #c7c0ff;
  border-color: rgba(139, 125, 246, .22);
  background: rgba(139, 125, 246, .1);
}

.company-sub-action.danger {
  color: #f692a3;
  border-color: rgba(241, 104, 126, .17);
  background: rgba(241, 104, 126, .07);
}

.company-sub-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #66758b;
  text-align: center;
}

.company-sub-empty strong {
  color: #cbd4e1;
  font-size: .8rem;
}

.company-sub-empty span {
  font-size: .68rem;
}

.company-sub-mobile-list {
  display: grid;
  gap: 11px;
}

.company-sub-mobile-card {
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .94), rgba(13, 19, 33, .9));
}

.company-sub-mobile-card>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.company-sub-mobile-card .company-sub-identity {
  min-width: 0;
}

.company-sub-mobile-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.company-sub-mobile-facts>div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .045);
}

.company-sub-mobile-facts small,
.company-sub-mobile-facts span {
  color: #74839a;
  font-size: .61rem;
}

.company-sub-mobile-facts strong {
  color: #dce3ed;
  font-size: .68rem;
}

.admin-company-sub-modal {
  max-width: 610px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .14);
  background: linear-gradient(145deg, #171e30, #0e1524);
}

.admin-company-sub-modal-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 21px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  background: radial-gradient(circle at 15% 0, rgba(139, 125, 246, .18), transparent 42%);
}

.admin-company-sub-modal-hero>span {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  color: #b4aaff;
  border: 1px solid rgba(139, 125, 246, .18);
  border-radius: 14px;
  background: rgba(139, 125, 246, .11);
}

.admin-company-sub-modal-hero small {
  color: #7d8ca2;
  font-size: .65rem;
  font-weight: 750;
}

.admin-company-sub-modal-hero h2 {
  margin: 2px 0;
  color: #f7f9fc;
  font-size: 1rem;
  font-weight: 900;
}

.admin-company-sub-modal-hero p {
  margin: 0;
  color: #9ba7ba;
  font-size: .72rem;
}

.admin-company-sub-modal-hero button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #8391a6;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 10px;
  background: rgba(148, 163, 184, .05);
  cursor: pointer;
}

.admin-company-sub-modal-body {
  display: grid;
  gap: 17px;
  padding: 22px;
}

.admin-company-sub-modal-body .form-group {
  display: grid;
  gap: 7px;
}

.admin-company-sub-modal-body .form-group>small {
  color: #738198;
  font-size: .64rem;
}

.admin-company-sub-modal-body textarea {
  resize: vertical;
}

.company-sub-period-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.company-sub-period-grid label {
  cursor: pointer;
}

.company-sub-period-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.company-sub-period-grid label>span {
  display: grid;
  min-height: 102px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 12px 8px;
  color: #8c9ab0;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 13px;
  background: rgba(148, 163, 184, .04);
  text-align: center;
  transition: .18s ease;
}

.company-sub-period-grid label>span strong {
  color: #dfe5ee;
  font-size: .75rem;
}

.company-sub-period-grid label>span small {
  color: #75839a;
  font-size: .61rem;
}

.company-sub-period-grid input:checked+span {
  color: #b9b0ff;
  border-color: rgba(139, 125, 246, .5);
  background: linear-gradient(145deg, rgba(139, 125, 246, .17), rgba(82, 211, 170, .055));
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .07);
}

.company-sub-custom-date[hidden] {
  display: none !important;
}

html.light .admin-company-sub-summary article,
html.light .company-sub-mobile-card {
  border-color: #e2e7ef;
  background: linear-gradient(145deg, #fff, #f7f9fc);
  box-shadow: 0 12px 30px rgba(71, 85, 105, .07);
}

html.light .admin-company-sub-summary strong,
html.light .company-sub-identity strong,
html.light .company-sub-mobile-facts strong {
  color: #1b263a;
}

html.light .company-sub-toolbar,
html.light .company-sub-table-wrap {
  border-color: #e1e6ee;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 13px 35px rgba(71, 85, 105, .07);
}

html.light .company-sub-search {
  border-color: #dde3ec;
  background: #f7f9fc;
}

html.light .company-sub-search input {
  color: #243047;
}

html.light .company-sub-date strong,
html.light .company-sub-empty strong {
  color: #334155;
}

html.light .company-sub-action:hover {
  color: #5548c9;
}

html.light .admin-company-sub-modal {
  border-color: #dfe4ed;
  background: #fff;
}

html.light .admin-company-sub-modal-hero {
  border-color: #e5e8ef;
  background: radial-gradient(circle at 15% 0, rgba(139, 125, 246, .13), transparent 42%), #fbfcff;
}

html.light .admin-company-sub-modal-hero h2,
html.light .company-sub-period-grid label>span strong {
  color: #1a2436;
}

html.light .company-sub-period-grid label>span {
  border-color: #dde3ec;
  background: #f8f9fc;
}

@media (max-width: 1100px) {
  .admin-company-sub-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .company-sub-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .company-sub-search,
  .company-sub-toolbar select,
  .company-sub-toolbar .btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .company-sub-mobile-facts {
    grid-template-columns: 1fr 1fr;
  }

  .company-sub-mobile-facts>div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .admin-company-sub-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .admin-company-sub-summary article {
    min-height: 72px;
    padding: 13px 11px;
    gap: 9px;
  }

  .admin-company-sub-summary article>span {
    width: 35px;
    height: 35px;
    border-radius: 10px;
  }

  .admin-company-sub-summary small {
    font-size: .62rem;
  }

  .admin-company-sub-summary strong {
    font-size: 1.15rem;
  }

  .company-sub-mobile-card>header {
    flex-direction: column;
  }

  .company-sub-period-grid {
    grid-template-columns: 1fr;
  }

  .company-sub-period-grid label>span {
    min-height: 72px;
  }

  .admin-company-sub-modal {
    align-self: flex-end;
    max-height: 94vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
  }

  .admin-company-sub-modal-hero,
  .admin-company-sub-modal-body {
    padding: 17px 15px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Productivity & admin experience refresh — 2026
══════════════════════════════════════════════════════════════ */

/* Quick alarm and kinship center */
.quick-reminder-dialog {
  width: min(720px, calc(100vw - 28px));
  max-width: 720px;
  max-height: 92vh;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 24px;
  background: linear-gradient(145deg, #171e30, #0e1524);
  box-shadow: 0 28px 85px rgba(2, 6, 23, .45);
}

.quick-reminder-head {
  align-items: flex-start;
  padding: 22px 24px;
  background: radial-gradient(circle at 12% 0, rgba(139, 125, 246, .2), transparent 42%);
}

.quick-reminder-head>div {
  display: grid;
  gap: 3px;
}

.quick-reminder-eyebrow {
  color: #9d91f8;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .03em;
}

.quick-reminder-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.08rem;
}

.quick-reminder-head p {
  margin: 2px 0 0;
  color: #8593a8;
  font-size: .72rem;
  line-height: 1.65;
}

.quick-reminder-dialog .modal-body {
  padding: 20px 24px;
}

.quick-alarm-presets {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 13px;
  background: rgba(148, 163, 184, .035);
}

.quick-alarm-presets>span {
  margin-inline-end: 3px;
  color: #8795aa;
  font-size: .69rem;
  font-weight: 750;
}

.quick-alarm-presets button {
  display: inline-flex;
  min-height: 33px;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  color: #acb7c8;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 9px;
  background: rgba(148, 163, 184, .045);
  cursor: pointer;
  font: inherit;
  font-size: .65rem;
  font-weight: 800;
  transition: .18s ease;
}

.quick-alarm-presets button:hover,
.quick-alarm-presets button.active {
  color: #d9d4ff;
  border-color: rgba(139, 125, 246, .38);
  background: rgba(139, 125, 246, .13);
  transform: translateY(-1px);
}

.quick-reminder-upcoming {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 14px;
  background: rgba(148, 163, 184, .025);
}

.quick-reminder-upcoming-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(148, 163, 184, .09);
}

.quick-reminder-upcoming-head strong {
  color: #d9e0ea;
  font-size: .72rem;
}

.quick-reminder-upcoming-head span {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  color: #bfb7ff;
  border-radius: 99px;
  background: rgba(139, 125, 246, .12);
  font-size: .63rem;
  font-weight: 900;
}

.quick-reminder-queue {
  display: grid;
  max-height: 190px;
  overflow: auto;
}

.quick-reminder-queue article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
}

.quick-reminder-queue article:last-child {
  border-bottom: 0;
}

.quick-reminder-queue article>span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #9f94f7;
  border-radius: 9px;
  background: rgba(139, 125, 246, .09);
}

.quick-reminder-queue article>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.quick-reminder-queue strong {
  overflow: hidden;
  color: #dbe2ec;
  font-size: .69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-reminder-queue small {
  color: #748299;
  font-size: .6rem;
}

.quick-reminder-queue button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #e98295;
  border: 0;
  border-radius: 8px;
  background: rgba(241, 104, 126, .07);
  cursor: pointer;
}

.quick-reminder-empty {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #738198;
  font-size: .68rem;
}

.kinship-relation {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
  padding: 2px 6px;
  color: #a99ef9;
  border-radius: 99px;
  background: rgba(139, 125, 246, .09);
  font-size: .57rem;
  font-style: normal;
  font-weight: 750;
}

.kinship-last-contact {
  margin-top: 3px;
  color: #50cba1 !important;
  font-size: .57rem !important;
}

.kinship-contact-done {
  color: #44cf9f !important;
}

html.light .quick-reminder-dialog {
  border-color: #dfe4ed;
  background: #fff;
  box-shadow: 0 28px 75px rgba(71, 85, 105, .18);
}

html.light .quick-reminder-head {
  background: radial-gradient(circle at 12% 0, rgba(139, 125, 246, .14), transparent 42%), #fbfcff;
}

html.light .quick-reminder-head h2,
html.light .quick-reminder-upcoming-head strong,
html.light .quick-reminder-queue strong {
  color: #1c273a;
}

html.light .quick-alarm-presets,
html.light .quick-reminder-upcoming {
  border-color: #e3e7ef;
  background: #f9fafe;
}

/* Quick notes knowledge drawer */
#qn-drawer {
  width: min(430px, calc(100vw - 22px));
  border-inline-start: 1px solid rgba(148, 163, 184, .14);
  background: linear-gradient(165deg, rgba(20, 27, 44, .98), rgba(10, 16, 29, .99));
  box-shadow: -24px 0 70px rgba(2, 6, 23, .34);
}

.qn-drawer-header {
  padding: 19px 18px 15px;
  background: radial-gradient(circle at 10% 0, rgba(139, 125, 246, .19), transparent 45%);
}

.qn-input-area {
  margin: 13px 14px 10px;
  border: 1px solid rgba(139, 125, 246, .18);
  border-radius: 15px;
  background: rgba(148, 163, 184, .035);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .1);
}

.qn-compose-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qn-color-picker {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qn-color-picker button {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #8b7df6;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
  transition: .15s ease;
}

.qn-color-picker button[data-qn-color="mint"] {
  background: #2bbe91;
}

.qn-color-picker button[data-qn-color="amber"] {
  background: #e7a63f;
}

.qn-color-picker button[data-qn-color="rose"] {
  background: #ed7087;
}

.qn-color-picker button.active {
  border-color: #fff;
  transform: scale(1.16);
}

.qn-tools {
  display: grid;
  gap: 8px;
  padding: 3px 14px 11px;
}

.qn-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: #728198;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 10px;
  background: rgba(148, 163, 184, .035);
}

.qn-search-wrap input {
  width: 100%;
  height: 37px;
  color: #e8edf5;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: .69rem;
}

.qn-filter-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qn-filter-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  color: #78869c;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .62rem;
  font-weight: 750;
}

.qn-filter-tabs button.active {
  color: #bcb4ff;
  background: rgba(139, 125, 246, .1);
}

.qn-notes-list {
  padding: 2px 14px 18px;
}

.qn-note-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(139, 125, 246, .12);
}

.qn-note-card::before {
  position: absolute;
  width: 3px;
  height: 100%;
  background: #8b7df6;
  content: '';
  inset-block: 0;
  inset-inline-start: 0;
}

.qn-note-card.tone-mint::before {
  background: #2bbe91;
}

.qn-note-card.tone-amber::before {
  background: #e7a63f;
}

.qn-note-card.tone-rose::before {
  background: #ed7087;
}

html.light #qn-drawer {
  border-color: #e0e5ed;
  background: linear-gradient(165deg, #fff, #f6f8fc);
}

html.light .qn-search-wrap {
  border-color: #e0e5ed;
  background: #f7f9fc;
}

html.light .qn-search-wrap input {
  color: #243047;
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile install onboarding, encrypted journal & quick-notes mobile
   2026-07-22
═══════════════════════════════════════════════════════════════════ */
.mobile-install-overlay {
  z-index: 10080;
}

.mobile-install-card {
  position: relative;
  width: min(510px, 100%);
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(139, 125, 246, .22);
  border-radius: 28px;
  background: radial-gradient(circle at 50% -15%, rgba(139, 125, 246, .24), transparent 42%), linear-gradient(155deg, #171f34, #0d1424);
  box-shadow: 0 35px 100px rgba(2, 6, 23, .5);
}

.mobile-install-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #8995a9;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 12px;
  background: rgba(148, 163, 184, .06);
  cursor: pointer;
}

.mobile-install-visual {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  margin: 0 auto 17px;
  place-items: center;
}

.mobile-install-visual img {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  box-shadow: 0 15px 36px rgba(2, 6, 23, .38);
}

.mobile-install-visual>span {
  position: absolute;
  z-index: 3;
  inset-block-end: 2px;
  inset-inline-start: 2px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border: 3px solid #111a2d;
  border-radius: 13px;
  background: linear-gradient(135deg, #8b7df6, #6557e8);
}

.mobile-install-visual>i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(139, 125, 246, .26);
  border-radius: 32px;
  background: rgba(139, 125, 246, .08);
  transform: rotate(9deg);
}

.mobile-install-kicker {
  display: inline-flex;
  padding: 5px 10px;
  color: #bdb6ff;
  border-radius: 99px;
  background: rgba(139, 125, 246, .1);
  font-size: .69rem;
  font-weight: 850;
}

.mobile-install-card h1 {
  margin: 9px 0 7px;
  color: #f7f9fc;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.025em;
}

.mobile-install-card>p {
  max-width: 420px;
  margin: 0 auto 20px;
  color: #8d99ae;
  font-size: .8rem;
  line-height: 1.8;
}

.mobile-install-steps {
  display: grid;
  gap: 8px;
  text-align: start;
}

.mobile-install-steps article {
  display: grid;
  grid-template-columns: 26px 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.mobile-install-steps article>b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #a79dff;
  border-radius: 8px;
  background: rgba(139, 125, 246, .11);
  font-size: .67rem;
}

.mobile-install-steps article>span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #67d8ae;
  border-radius: 11px;
  background: rgba(43, 190, 145, .09);
}

.mobile-install-steps article>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mobile-install-steps strong {
  color: #e8edf5;
  font-size: .76rem;
}

.mobile-install-steps small {
  color: #78869d;
  font-size: .65rem;
  line-height: 1.55;
}

.mobile-install-actions {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}

.mobile-install-actions .btn {
  flex: 1;
  min-height: 45px;
  justify-content: center;
}

.mobile-install-card .notification-onboarding-status {
  min-height: 0;
  margin-top: 9px;
  color: #e4b962;
  font-size: .68rem;
  line-height: 1.6;
}

html.light .mobile-install-card {
  border-color: #e1e4f8;
  background: radial-gradient(circle at 50% -15%, rgba(139, 125, 246, .13), transparent 44%), #fff;
  box-shadow: 0 28px 75px rgba(71, 85, 105, .2);
}

html.light .mobile-install-card h1,
html.light .mobile-install-steps strong {
  color: #172033;
}

html.light .mobile-install-card>p,
html.light .mobile-install-steps small {
  color: #68758b;
}

html.light .mobile-install-steps article {
  border-color: #e7eaf1;
  background: #fafbfe;
}

html.light .mobile-install-visual>span {
  border-color: #fff;
}

.journal-page {
  width: 100%;
  min-width: 0;
}

.journal-loading,
.journal-error {
  display: grid;
  min-height: min(520px, 65vh);
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 30px;
  color: #8491a6;
  text-align: center;
}

.journal-loading>span,
.journal-error>svg {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #aca3ff;
  border-radius: 18px;
  background: rgba(139, 125, 246, .11);
}

.journal-loading strong,
.journal-error h2 {
  margin: 0;
  color: #edf2f8;
  font-size: 1.2rem;
}

.journal-loading small,
.journal-error p {
  max-width: 450px;
  margin: 0;
  color: #78869b;
  line-height: 1.75;
}

.journal-error button {
  margin-top: 6px;
  padding: 10px 20px;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background: #6557e8;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.journal-gate {
  width: min(760px, 100%);
  margin: 18px auto;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(139, 125, 246, .17);
  border-radius: 26px;
  background: radial-gradient(circle at 100% 0, rgba(139, 125, 246, .15), transparent 34%), linear-gradient(145deg, #182138, #0f1728);
  box-shadow: 0 24px 65px rgba(2, 6, 23, .22);
}

.journal-security-head {
  display: flex;
  align-items: center;
  gap: 17px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.journal-vault-mark {
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  place-items: center;
  color: #b8afff;
  border: 1px solid rgba(139, 125, 246, .2);
  border-radius: 21px;
  background: rgba(139, 125, 246, .11);
}

.journal-vault-mark i {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: -4px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #fff;
  border: 3px solid #151e32;
  border-radius: 9px;
  background: #2bbe91;
}

.journal-security-head>div:last-child {
  min-width: 0;
}

.journal-security-head small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #52cca2;
  font-size: .68rem;
  font-weight: 850;
}

.journal-security-head h1 {
  margin: 4px 0 5px;
  color: #f4f7fb;
  font-size: 1.55rem;
  font-weight: 900;
}

.journal-security-head p {
  max-width: 570px;
  margin: 0;
  color: #8693a8;
  font-size: .75rem;
  line-height: 1.8;
}

.journal-security-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0;
}

.journal-security-points article {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
}

.journal-security-points article>svg {
  flex: 0 0 auto;
  color: #aaa0fb;
}

.journal-security-points article>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.journal-security-points strong {
  color: #dfe5ee;
  font-size: .68rem;
}

.journal-security-points small {
  color: #728097;
  font-size: .58rem;
  line-height: 1.45;
}

.journal-password-form {
  display: grid;
  width: min(480px, 100%);
  gap: 13px;
  margin: 22px auto 0;
}

.journal-password-form>label {
  display: grid;
  gap: 6px;
  color: #9aa6b9;
  font-size: .68rem;
  font-weight: 750;
}

.journal-password-form>label>div {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 12px;
  background: rgba(5, 10, 20, .25);
  transition: .18s ease;
}

.journal-password-form>label>div:focus-within {
  border-color: rgba(139, 125, 246, .65);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .1);
}

.journal-password-form input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  color: #f3f6fa;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.journal-password-form>label>div button {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  color: #7d899e;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.journal-password-form>label>div button.is-visible {
  color: #a99eff;
}

.journal-password-form .journal-warning-check {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(231, 166, 63, .07);
  color: #a9946f;
  font-weight: 600;
  line-height: 1.65;
}

.journal-warning-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: #8b7df6;
}

.journal-primary {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 17px;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #7668ef, #5145dc);
  box-shadow: 0 8px 24px rgba(81, 69, 220, .24);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 850;
}

.journal-primary:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}

.journal-form-status {
  min-height: 18px;
  margin: 0;
  color: #65d5ac;
  text-align: center;
  font-size: .66rem;
}

.journal-form-status.is-error {
  color: #f0788d;
}

.journal-forgot {
  display: block;
  margin: 13px auto 0;
  color: #8d99ae;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .67rem;
}

.journal-reset-box {
  display: grid;
  gap: 8px;
  margin: 17px auto 0;
  padding: 14px;
  border: 1px solid rgba(240, 112, 141, .17);
  border-radius: 13px;
  background: rgba(240, 112, 141, .055);
}

.journal-reset-box[hidden] {
  display: none;
}

.journal-reset-box strong {
  color: #f08ca0;
  font-size: .74rem;
}

.journal-reset-box p,
.journal-reset-box label {
  margin: 0;
  color: #8e99aa;
  font-size: .64rem;
  line-height: 1.65;
}

.journal-reset-box input {
  display: block;
  width: 100%;
  height: 39px;
  margin-top: 5px;
  padding: 0 10px;
  color: #eef2f7;
  border: 1px solid rgba(240, 112, 141, .18);
  border-radius: 9px;
  outline: 0;
  background: rgba(5, 10, 20, .22);
  font: inherit;
}

.journal-reset-box button {
  justify-self: start;
  padding: 8px 12px;
  color: #fff;
  border: 0;
  border-radius: 9px;
  background: #c74962;
  cursor: pointer;
  font: inherit;
  font-size: .67rem;
  font-weight: 800;
}

.journal-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.journal-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(139, 125, 246, .17);
  border-radius: 24px;
  background: radial-gradient(circle at 5% 0, rgba(43, 190, 145, .1), transparent 30%), radial-gradient(circle at 95% 100%, rgba(139, 125, 246, .19), transparent 38%), linear-gradient(145deg, #192238, #0e1627);
  box-shadow: 0 20px 55px rgba(2, 6, 23, .17);
}

.journal-hero-copy>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #57cea6;
  font-size: .67rem;
  font-weight: 850;
}

.journal-hero-copy h1 {
  margin: 4px 0;
  color: #f6f8fc;
  font-size: 1.65rem;
  font-weight: 950;
}

.journal-hero-copy p {
  max-width: 620px;
  margin: 0;
  color: #8d99ad;
  font-size: .75rem;
  line-height: 1.75;
}

.journal-hero-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.journal-hero-actions>button:first-child {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  color: #a8b2c2;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 11px;
  background: rgba(148, 163, 184, .045);
  cursor: pointer;
  font: inherit;
  font-size: .68rem;
  font-weight: 750;
}

.journal-metrics {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.journal-metrics article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
}

.journal-metrics article>svg,
.journal-latest-mood {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  place-items: center;
  color: #aaa0fb;
  border-radius: 11px;
  background: rgba(139, 125, 246, .09);
}

.journal-latest-mood {
  font-size: 1.15rem;
}

.journal-metrics article>div {
  display: grid;
  gap: 2px;
}

.journal-metrics small {
  color: #78869b;
  font-size: .61rem;
}

.journal-metrics strong {
  color: #e9eef5;
  font-size: .92rem;
  font-weight: 900;
}

.journal-metrics strong b {
  color: #8490a3;
  font-size: .6rem;
}

.journal-question {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid rgba(231, 166, 63, .13);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(231, 166, 63, .06), rgba(139, 125, 246, .045));
}

.journal-question>span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #e7b257;
  border-radius: 12px;
  background: rgba(231, 166, 63, .1);
}

.journal-question>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.journal-question small {
  color: #b49155;
  font-size: .61rem;
  font-weight: 850;
}

.journal-question strong {
  color: #e4e9f0;
  font-size: .74rem;
}

.journal-question button {
  padding: 8px 12px;
  color: #c4bcff;
  border: 1px solid rgba(139, 125, 246, .15);
  border-radius: 9px;
  background: rgba(139, 125, 246, .08);
  cursor: pointer;
  font: inherit;
  font-size: .64rem;
  font-weight: 800;
}

.journal-main-grid {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.journal-list-panel,
.journal-editor-panel {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 19px;
  background: rgba(14, 21, 36, .74);
  box-shadow: 0 14px 38px rgba(2, 6, 23, .1);
}

.journal-list-panel {
  display: flex;
  min-height: 560px;
  flex-direction: column;
  overflow: hidden;
}

.journal-list-panel>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 17px 12px;
}

.journal-list-panel>header div {
  display: grid;
  gap: 1px;
}

.journal-list-panel>header small {
  color: #59cfa8;
  font-size: .58rem;
  font-weight: 850;
}

.journal-list-panel>header h2 {
  margin: 0;
  color: #e9eef5;
  font-size: 1rem;
}

.journal-list-panel>header>span {
  display: grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  color: #b9b1ff;
  border-radius: 9px;
  background: rgba(139, 125, 246, .1);
  font-size: .66rem;
  font-weight: 900;
}

.journal-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 13px 10px;
  padding: 0 10px;
  color: #748198;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 10px;
  background: rgba(148, 163, 184, .035);
}

.journal-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  color: #e4e9f1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .67rem;
}

.journal-entry-list {
  display: grid;
  align-content: start;
  gap: 5px;
  overflow: auto;
  padding: 0 8px 12px;
}

.journal-entry-card {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr) 15px;
  align-items: start;
  gap: 8px;
  width: 100%;
  padding: 11px;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: start;
  font: inherit;
  transition: .17s ease;
}

.journal-entry-card:hover,
.journal-entry-card.is-active {
  border-color: rgba(139, 125, 246, .15);
  background: rgba(139, 125, 246, .07);
}

.journal-entry-card>span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: rgba(148, 163, 184, .055);
  font-size: 1rem;
}

.journal-entry-card>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.journal-entry-card small {
  color: #68768c;
  font-size: .56rem;
}

.journal-entry-card strong {
  overflow: hidden;
  color: #dce3ec;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-entry-card p {
  overflow: hidden;
  margin: 0;
  color: #7b899e;
  font-size: .59rem;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-entry-card>svg {
  margin-top: 9px;
  color: #5f6c81;
}

.journal-empty-list,
.journal-editor-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  min-height: 310px;
  padding: 24px;
  color: #6f7d92;
  text-align: center;
}

.journal-empty-list>svg,
.journal-editor-empty>span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #a79dff;
  border-radius: 15px;
  background: rgba(139, 125, 246, .09);
}

.journal-empty-list strong,
.journal-editor-empty h2 {
  margin: 0;
  color: #dfe5ed;
  font-size: .82rem;
}

.journal-empty-list small,
.journal-editor-empty p {
  max-width: 400px;
  margin: 0;
  color: #748197;
  font-size: .63rem;
  line-height: 1.65;
}

.journal-editor-empty {
  min-height: 560px;
}

.journal-editor-empty .journal-primary {
  margin-top: 6px;
}

.journal-limit-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto 10px 10px;
  padding: 9px;
  color: #d1a85e;
  border-radius: 9px;
  background: rgba(231, 166, 63, .07);
  font-size: .6rem;
}

.journal-editor-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.journal-editor-form>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.journal-editor-form>header div {
  display: grid;
  gap: 2px;
}

.journal-editor-form>header small {
  color: #55cca4;
  font-size: .6rem;
  font-weight: 850;
}

.journal-editor-form>header h2 {
  margin: 0;
  color: #edf2f7;
  font-size: 1.05rem;
}

.journal-danger-icon {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #ef788c;
  border: 1px solid rgba(240, 112, 141, .13);
  border-radius: 10px;
  background: rgba(240, 112, 141, .06);
  cursor: pointer;
}

.journal-editor-top {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: end;
  gap: 13px;
}

.journal-editor-form label,
.journal-editor-form fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: #8d9aae;
  border: 0;
  font-size: .65rem;
  font-weight: 750;
}

.journal-editor-form input,
.journal-editor-form textarea {
  width: 100%;
  min-width: 0;
  color: #edf1f6;
  border: 1px solid rgba(148, 163, 184, .11);
  outline: 0;
  border-radius: 10px;
  background: rgba(5, 10, 20, .2);
  font: inherit;
  transition: .17s ease;
}

.journal-editor-form input:focus,
.journal-editor-form textarea:focus {
  border-color: rgba(139, 125, 246, .62);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .09);
}

.journal-editor-form input {
  height: 42px;
  padding: 0 11px;
}

.journal-mood-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.journal-mood-picker button {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 2px;
  color: #758298;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 10px;
  background: rgba(148, 163, 184, .025);
  cursor: pointer;
  font: inherit;
}

.journal-mood-picker button span {
  font-size: 1rem;
}

.journal-mood-picker button small {
  font-size: .52rem;
}

.journal-mood-picker button.active {
  color: #bdb5ff;
  border-color: rgba(139, 125, 246, .28);
  background: rgba(139, 125, 246, .1);
}

.journal-body-field {
  position: relative;
}

.journal-body-field textarea {
  min-height: 260px;
  resize: vertical;
  padding: 14px;
  font-size: .77rem;
  line-height: 1.9;
}

.journal-word-count {
  position: absolute;
  inset-block-end: 9px;
  inset-inline-end: 11px;
  padding: 2px 6px;
  color: #657389;
  border-radius: 6px;
  background: rgba(13, 20, 35, .82);
  font-size: .56rem;
}

.journal-tags-field>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.journal-editor-form>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.journal-editor-form>footer>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5fcda7;
  font-size: .59rem;
}

.journal-editor-form>footer>div {
  display: flex;
  gap: 7px;
}

.journal-editor-form>footer>div>button:first-child {
  min-height: 40px;
  padding: 0 13px;
  color: #8d9aad;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 10px;
  background: rgba(148, 163, 184, .035);
  cursor: pointer;
  font: inherit;
  font-size: .66rem;
}

.journal-danger {
  padding: 9px 13px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: #c84f67;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.launcher-icon-wrap.journal-bg {
  position: relative;
  color: #8c77ef;
  background: rgba(140, 119, 239, .12);
}

.launcher-icon-lock {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: -2px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #fff;
  border: 2px solid var(--clr-surface, #fff);
  border-radius: 7px;
  background: #2bbe91;
}

html.light .journal-loading strong,
html.light .journal-error h2,
html.light .journal-security-head h1,
html.light .journal-hero-copy h1,
html.light .journal-metrics strong,
html.light .journal-question strong,
html.light .journal-list-panel>header h2,
html.light .journal-entry-card strong,
html.light .journal-empty-list strong,
html.light .journal-editor-empty h2,
html.light .journal-editor-form>header h2 {
  color: #172235;
}

html.light .journal-gate {
  border-color: #e0e4f1;
  background: radial-gradient(circle at 100% 0, rgba(139, 125, 246, .12), transparent 35%), #fff;
  box-shadow: 0 22px 55px rgba(71, 85, 105, .13);
}

html.light .journal-vault-mark i {
  border-color: #fff;
}

html.light .journal-security-head p,
html.light .journal-hero-copy p,
html.light .journal-question small,
html.light .journal-entry-card p,
html.light .journal-empty-list small,
html.light .journal-editor-empty p {
  color: #6d7a8f;
}

html.light .journal-security-points article,
html.light .journal-metrics article {
  border-color: #e7eaf1;
  background: rgba(246, 248, 252, .8);
}

html.light .journal-security-points strong {
  color: #334155;
}

html.light .journal-password-form>label>div,
html.light .journal-reset-box input,
html.light .journal-editor-form input,
html.light .journal-editor-form textarea {
  border-color: #dfe4ed;
  background: #fafbfe;
}

html.light .journal-password-form input,
html.light .journal-reset-box input,
html.light .journal-editor-form input,
html.light .journal-editor-form textarea,
html.light .journal-search input {
  color: #243047;
}

html.light .journal-hero {
  border-color: #e0e4f1;
  background: radial-gradient(circle at 5% 0, rgba(43, 190, 145, .09), transparent 31%), radial-gradient(circle at 95% 100%, rgba(139, 125, 246, .13), transparent 38%), #fff;
  box-shadow: 0 18px 48px rgba(71, 85, 105, .11);
}

html.light .journal-question {
  border-color: #eee3ce;
  background: linear-gradient(90deg, #fffaf1, #faf9ff);
}

html.light .journal-list-panel,
html.light .journal-editor-panel {
  border-color: #e2e6ed;
  background: #fff;
  box-shadow: 0 14px 35px rgba(71, 85, 105, .08);
}

html.light .journal-search {
  border-color: #e1e5ec;
  background: #f7f9fc;
}

html.light .journal-entry-card:hover,
html.light .journal-entry-card.is-active {
  border-color: #ddd8ff;
  background: #f6f4ff;
}

html.light .journal-word-count {
  background: rgba(255, 255, 255, .88);
}

@media (max-width: 900px) {
  body.qn-open {
    overflow: hidden;
  }

  body.qn-open #qn-fab {
    opacity: 0;
    pointer-events: none;
  }

  #qn-drawer {
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(86dvh, calc(var(--qn-visual-height, 100dvh) - 8px)) !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 0 env(safe-area-inset-bottom, 0) !important;
    border-width: 1px 0 0 !important;
    border-radius: 24px 24px 0 0 !important;
    box-sizing: border-box !important;
    transform: translate3d(0, 105%, 0) !important;
  }

  #qn-drawer.open {
    transform: translate3d(0, 0, 0) !important;
  }

  #qn-drawer::before {
    width: 42px !important;
    height: 4px !important;
    margin: 8px auto 1px !important;
  }

  .qn-drawer-header {
    min-height: 54px;
    padding: 8px 15px 9px !important;
  }

  .qn-drawer-title {
    min-width: 0;
    font-size: 1rem;
  }

  .qn-close-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
  }

  .qn-input-area {
    margin: 6px 10px 8px !important;
    padding: 10px !important;
  }

  #qn-textarea {
    min-height: 82px;
    padding: 10px 11px;
    font-size: 16px;
  }

  .qn-input-footer {
    gap: 8px;
  }

  .qn-compose-meta {
    min-width: 0;
    flex-wrap: wrap;
    gap: 7px;
  }

  .qn-save-btn {
    min-width: 78px;
    min-height: 39px;
    padding: 8px 13px;
  }

  .qn-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 10px 9px;
  }

  .qn-search-wrap {
    min-width: 0;
  }

  .qn-search-wrap input {
    height: 40px;
    min-width: 0;
    font-size: 16px;
  }

  .qn-filter-tabs {
    flex: 0 0 auto;
  }

  .qn-filter-tabs button {
    min-height: 38px;
  }

  .qn-notes-list {
    min-width: 0;
    padding: 1px 10px 18px;
    overscroll-behavior: contain;
  }

  .qn-note-item,
  .qn-note-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .qn-note-card {
    padding: 13px;
    border-radius: 13px;
  }

  .qn-note-text {
    font-size: .82rem;
    line-height: 1.75;
  }

  .qn-note-footer {
    flex-wrap: wrap;
  }

  .qn-note-actions {
    margin-inline-start: auto;
  }

  .qn-icon-btn {
    width: 34px;
    height: 34px;
  }

  .journal-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .journal-hero-actions {
    grid-row: 3;
  }

  .journal-metrics {
    grid-row: 2;
  }

  .journal-main-grid {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  }

  .journal-editor-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .mobile-install-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 24px 17px 18px;
    border-radius: 24px;
  }

  .mobile-install-visual {
    width: 88px;
    height: 88px;
    margin-bottom: 12px;
  }

  .mobile-install-visual img {
    width: 61px;
    height: 61px;
    border-radius: 17px;
  }

  .mobile-install-card h1 {
    padding-inline: 22px;
    font-size: 1.25rem;
  }

  .mobile-install-steps article {
    grid-template-columns: 24px 34px minmax(0, 1fr);
    padding: 9px;
  }

  .journal-page {
    padding-bottom: 16px;
  }

  .journal-gate {
    margin: 0;
    padding: 20px 15px;
    border-radius: 20px;
  }

  .journal-security-head {
    align-items: flex-start;
    gap: 12px;
  }

  .journal-vault-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .journal-security-head h1 {
    font-size: 1.22rem;
  }

  .journal-security-points {
    grid-template-columns: 1fr;
  }

  .journal-security-points article {
    padding: 10px 11px;
  }

  .journal-password-form {
    margin-top: 17px;
  }

  .journal-password-form input {
    font-size: 16px;
  }

  .journal-hero {
    gap: 14px;
    padding: 18px 15px;
    border-radius: 20px;
  }

  .journal-hero-copy h1 {
    font-size: 1.35rem;
  }

  .journal-hero-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .journal-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .journal-metrics article {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 9px 5px;
    text-align: center;
  }

  .journal-metrics article>svg,
  .journal-latest-mood {
    width: 33px;
    height: 33px;
  }

  .journal-metrics strong {
    font-size: .78rem;
  }

  .journal-question {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .journal-question>button {
    grid-column: 1/-1;
    min-height: 38px;
  }

  .journal-main-grid {
    grid-template-columns: 1fr;
  }

  .journal-list-panel {
    min-height: 0;
    max-height: 430px;
  }

  .journal-editor-panel {
    scroll-margin-top: 72px;
  }

  .journal-editor-empty {
    min-height: 340px;
  }

  .journal-editor-form {
    padding: 15px;
  }

  .journal-mood-picker {
    gap: 4px;
  }

  .journal-mood-picker button {
    padding: 7px 1px;
  }

  .journal-body-field textarea {
    min-height: 280px;
    font-size: 16px;
  }

  .journal-editor-form input {
    font-size: 16px;
  }

  .journal-editor-form>footer {
    align-items: stretch;
    flex-direction: column;
  }

  .journal-editor-form>footer>div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .mobile-install-actions {
    flex-direction: column-reverse;
  }

  .mobile-install-steps small {
    font-size: .62rem;
  }

  .qn-tools {
    grid-template-columns: 1fr;
  }

  .qn-filter-tabs {
    justify-content: flex-start;
  }

  .journal-metrics small {
    font-size: .55rem;
  }

  .journal-metrics strong {
    font-size: .7rem;
  }

  .journal-mood-picker button small {
    display: none;
  }

  .journal-mood-picker button span {
    font-size: 1.16rem;
  }
}

/* Calendar planning workspace */
.calendar-v3-page {
  display: grid;
  gap: 15px;
}

.calendar-v3-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(139, 125, 246, .17);
  border-radius: 23px;
  background: radial-gradient(circle at 7% 10%, rgba(43, 190, 145, .1), transparent 31%), radial-gradient(circle at 88% 100%, rgba(139, 125, 246, .18), transparent 37%), linear-gradient(145deg, #192137, #101727);
  box-shadow: 0 20px 55px rgba(2, 6, 23, .18);
}

.calendar-v3-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.calendar-v3-icon {
  display: grid;
  width: 51px;
  height: 51px;
  flex: 0 0 auto;
  place-items: center;
  color: #b8afff;
  border: 1px solid rgba(139, 125, 246, .2);
  border-radius: 15px;
  background: rgba(139, 125, 246, .11);
}

.calendar-v3-heading small {
  color: #56cba3;
  font-size: .67rem;
  font-weight: 850;
}

.calendar-v3-heading h2 {
  margin: 2px 0 4px;
  color: #f8fafc;
  font-size: 1.45rem;
  font-weight: 900;
}

.calendar-v3-heading p {
  max-width: 590px;
  margin: 0;
  color: #8c99ad;
  font-size: .76rem;
  line-height: 1.7;
}

.calendar-v3-add {
  align-self: start;
}

.calendar-v3-metrics {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.calendar-v3-metrics article {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.calendar-v3-metrics article>span {
  color: #aaa0fb;
}

.calendar-v3-metrics article.is-success>span {
  color: #41ce9c;
}

.calendar-v3-metrics article.is-warning>span {
  color: #edaf4f;
}

.calendar-v3-metrics article>div {
  display: grid;
  gap: 2px;
}

.calendar-v3-metrics small {
  color: #7f8ca1;
  font-size: .62rem;
}

.calendar-v3-metrics strong {
  color: #edf2f8;
  font-size: .94rem;
  font-weight: 900;
}

.calendar-v3-controlbar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 14px;
  background: rgba(17, 24, 39, .62);
}

.calendar-shell-card {
  margin: 0 !important;
  padding: 15px !important;
  border-color: rgba(148, 163, 184, .11);
  border-radius: 19px;
  background: rgba(17, 24, 39, .59);
  box-shadow: 0 15px 40px rgba(2, 6, 23, .12);
}

.calendar-day-cell {
  min-height: 112px !important;
  border: 1px solid rgba(148, 163, 184, .075);
  background: rgba(148, 163, 184, .025) !important;
}

.calendar-day-cell:hover {
  border-color: rgba(139, 125, 246, .24);
  background: rgba(139, 125, 246, .055) !important;
  transform: translateY(-1px);
}

.calendar-day-cell.today {
  border-color: rgba(43, 190, 145, .28);
  background: rgba(43, 190, 145, .055) !important;
}

.calendar-day-cell.active-day {
  border-color: rgba(139, 125, 246, .42);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .075);
}

.calendar-selected-card {
  margin: 0 !important;
  border-radius: 17px;
}

html.light .calendar-v3-hero {
  border-color: rgba(139, 125, 246, .17);
  background: radial-gradient(circle at 7% 10%, rgba(43, 190, 145, .1), transparent 31%), radial-gradient(circle at 88% 100%, rgba(139, 125, 246, .16), transparent 37%), linear-gradient(145deg, #fff, #f4f6fc);
  box-shadow: 0 18px 48px rgba(71, 85, 105, .1);
}

html.light .calendar-v3-heading h2,
html.light .calendar-v3-metrics strong {
  color: #182337;
}

html.light .calendar-v3-heading p {
  color: #64748b;
}

html.light .calendar-v3-metrics article,
html.light .calendar-v3-controlbar,
html.light .calendar-shell-card {
  border-color: #e2e7ef;
  background: rgba(255, 255, 255, .84);
}

html.light .calendar-day-cell {
  border-color: #e8ebf1;
  background: #fafbfe !important;
}

/* Upgrade experience */
.subscribe-page {
  display: grid;
  gap: 24px;
}

.subscribe-v3-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, .55fr);
  gap: 20px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(139, 125, 246, .17);
  border-radius: 25px;
  background: radial-gradient(circle at 6% 0, rgba(43, 190, 145, .11), transparent 28%), radial-gradient(circle at 90% 100%, rgba(139, 125, 246, .23), transparent 38%), linear-gradient(145deg, #192137, #0f1627);
  box-shadow: 0 22px 60px rgba(2, 6, 23, .2);
}

.subscribe-v3-copy {
  display: grid;
  align-content: center;
  gap: 9px;
}

.subscribe-v3-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: #56cda4;
  font-size: .7rem;
  font-weight: 850;
}

.subscribe-v3-copy h1 {
  max-width: 680px;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.45;
  font-weight: 950;
}

.subscribe-v3-copy>p {
  max-width: 690px;
  margin: 0;
  color: #919db0;
  font-size: .8rem;
  line-height: 1.85;
}

.subscribe-v3-trust {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 7px;
  color: #9eabbd;
  font-size: .65rem;
  font-weight: 700;
}

.subscribe-v3-trust span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.subscribe-v3-current {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 17px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(10px);
}

.subscribe-v3-current>span {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  color: #bbb2ff;
  border-radius: 13px;
  background: rgba(139, 125, 246, .13);
}

.subscribe-v3-current div {
  display: grid;
  gap: 2px;
}

.subscribe-v3-current small {
  color: #8491a6;
  font-size: .65rem;
}

.subscribe-v3-current strong {
  color: #f4f7fb;
  font-size: 1rem;
}

.subscribe-v3-current p {
  margin: 2px 0 0;
  color: #8f9bad;
  font-size: .62rem;
  line-height: 1.6;
}

.subscribe-v3-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(36px, .32fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(139, 125, 246, .14);
  border-radius: 17px;
  background: rgba(17, 24, 39, .48);
}

.subscribe-v3-steps>i {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .15);
}

.subscribe-v3-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--clr-text-muted);
  opacity: .68;
  transition: opacity .2s ease, color .2s ease;
}

.subscribe-v3-step>b {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 11px;
  background: rgba(148, 163, 184, .05);
  font-size: .76rem;
}

.subscribe-v3-step>span {
  display: grid;
  gap: 1px;
}

.subscribe-v3-step small {
  font-size: .57rem;
}

.subscribe-v3-step strong {
  color: var(--clr-text);
  font-size: .72rem;
}

.subscribe-v3-step.active,
.subscribe-v3-step.complete {
  color: #9f94f8;
  opacity: 1;
}

.subscribe-v3-step.active>b {
  color: #fff;
  border-color: rgba(139, 125, 246, .55);
  background: linear-gradient(135deg, #7567ed, #9387f7);
  box-shadow: 0 8px 20px rgba(117, 103, 237, .22);
}

.subscribe-v3-step.complete>b {
  color: #10271f;
  border-color: rgba(43, 190, 145, .45);
  background: #55cda5;
}

.subscribe-flow-step[hidden] {
  display: none !important;
}

.subscribe-flow-step.is-entering {
  animation: subscribeStepIn .32s ease both;
}

@keyframes subscribeStepIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.subscribe-v3-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 13px;
}

.subscribe-v3-section-head small {
  color: #9185ed;
  font-size: .65rem;
  font-weight: 850;
}

.subscribe-v3-section-head h2 {
  margin: 2px 0 0;
  color: var(--clr-text);
  font-size: 1.05rem;
}

.subscribe-v3-section-head>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--clr-text-muted);
  font-size: .63rem;
}

.subscribe-v3-billing {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.subscribe-yearly-save {
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  color: #37bd90;
  white-space: nowrap;
  font-size: .62rem;
  font-weight: 800;
}

.subscribe-v3-assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.subscribe-v3-assurances article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 13px;
  background: rgba(148, 163, 184, .025);
}

.subscribe-v3-assurances article>svg {
  color: #8b7df6;
}

.subscribe-v3-assurances div {
  display: grid;
  gap: 2px;
}

.subscribe-v3-assurances strong {
  color: var(--clr-text);
  font-size: .72rem;
}

.subscribe-v3-assurances span {
  color: var(--clr-text-muted);
  font-size: .62rem;
}

.subscribe-payment-step {
  display: grid;
  gap: 14px;
}

.subscribe-payment-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid rgba(139, 125, 246, .15);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(24, 32, 51, .9), rgba(15, 22, 38, .86));
}

.subscribe-payment-head>div {
  display: grid;
  gap: 2px;
}

.subscribe-payment-head small {
  color: #9f94f8;
  font-size: .6rem;
  font-weight: 850;
}

.subscribe-payment-head h2 {
  margin: 0;
  color: var(--clr-text);
  font-size: 1rem;
}

.subscribe-payment-head p {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: .66rem;
}

.subscribe-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  color: #b5addf;
  border: 1px solid rgba(139, 125, 246, .2);
  border-radius: 10px;
  background: rgba(139, 125, 246, .07);
  font: inherit;
  font-size: .67rem;
  font-weight: 800;
  cursor: pointer;
}

.subscribe-back-btn:hover {
  color: #fff;
  border-color: rgba(139, 125, 246, .42);
  background: rgba(139, 125, 246, .14);
}

.subscribe-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  color: #54cda4;
  border-radius: 9px;
  background: rgba(43, 190, 145, .08);
  font-size: .62rem;
  font-weight: 800;
  white-space: nowrap;
}

.subscribe-selected-plan {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  padding: 13px 14px;
  border: 1px solid rgba(139, 125, 246, .14);
  border-radius: 13px;
  background: rgba(139, 125, 246, .055);
}

.subscribe-selected-plan>span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #a99fff;
  border-radius: 11px;
  background: rgba(139, 125, 246, .1);
}

.subscribe-selected-plan>div {
  display: grid;
  gap: 2px;
}

.subscribe-selected-plan small {
  color: var(--clr-text-muted);
  font-size: .6rem;
}

.subscribe-selected-plan p {
  margin: 0;
  color: var(--clr-text);
  font-size: .78rem;
}

html.light .subscribe-v3-hero {
  border-color: rgba(139, 125, 246, .17);
  background: radial-gradient(circle at 6% 0, rgba(43, 190, 145, .1), transparent 28%), radial-gradient(circle at 90% 100%, rgba(139, 125, 246, .18), transparent 38%), linear-gradient(145deg, #fff, #f4f6fc);
  box-shadow: 0 20px 50px rgba(71, 85, 105, .11);
}

html.light .subscribe-v3-copy h1,
html.light .subscribe-v3-current strong {
  color: #192438;
}

html.light .subscribe-v3-copy>p,
html.light .subscribe-v3-current p {
  color: #64748b;
}

html.light .subscribe-v3-current {
  border-color: #e1e5ed;
  background: rgba(255, 255, 255, .72);
}

html.light .subscribe-v3-steps,
html.light .subscribe-payment-head {
  border-color: #e1e5ed;
  background: rgba(255, 255, 255, .8);
}

html.light .subscribe-back-btn {
  color: #6258bb;
}

/* Shared admin shell */
.admin-v3-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px 23px;
  border: 1px solid rgba(139, 125, 246, .14);
  border-radius: 20px;
  background: radial-gradient(circle at 4% 0, rgba(43, 190, 145, .08), transparent 32%), radial-gradient(circle at 95% 100%, rgba(139, 125, 246, .14), transparent 38%), rgba(17, 24, 39, .62);
}

.admin-v3-page-head>div {
  display: grid;
  gap: 3px;
}

.admin-v3-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: #9f94f8;
  font-size: .65rem;
  font-weight: 850;
}

.admin-v3-page-head h2 {
  margin: 0;
  color: #f6f8fc;
  font-size: 1.28rem;
  font-weight: 900;
}

.admin-v3-page-head p {
  margin: 0;
  color: #8492a7;
  font-size: .73rem;
  line-height: 1.65;
}

.admin-v3-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.admin-v3-summary article {
  --tone: 139, 125, 246;
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .92), rgba(13, 19, 33, .87));
}

.admin-v3-summary article.green {
  --tone: 43, 190, 145;
}

.admin-v3-summary article.amber {
  --tone: 231, 166, 63;
}

.admin-v3-summary article.rose {
  --tone: 237, 112, 135;
}

.admin-v3-summary article>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 11px;
  background: rgba(var(--tone), .1);
}

.admin-v3-summary article>div {
  display: grid;
  gap: 2px;
}

.admin-v3-summary small {
  color: #8090a6;
  font-size: .64rem;
  font-weight: 700;
}

.admin-v3-summary strong {
  color: #edf2f8;
  font-size: 1.1rem;
  font-weight: 900;
}

.admin-v3-toolbar {
  display: flex;
  padding: 11px !important;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 14px;
  background: rgba(17, 24, 39, .58);
}

.admin-v3-search {
  display: flex;
  min-width: 240px;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding-inline: 11px;
  color: #718096;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 10px;
  background: rgba(148, 163, 184, .035);
}

.admin-v3-search input {
  width: 100%;
  height: 39px;
  padding: 0 !important;
  color: #e6ebf2;
  border: 0 !important;
  outline: none;
  background: transparent !important;
}

.admin-user-identity {
  display: flex;
  min-width: 155px;
  align-items: center;
  gap: 9px;
}

.admin-user-identity>span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #d4ceff;
  border-radius: 10px;
  background: rgba(139, 125, 246, .11);
  font-weight: 900;
}

.admin-user-identity>div {
  display: grid;
  gap: 2px;
}

.admin-user-identity strong {
  color: #e6ebf2;
  font-size: .76rem;
}

.admin-user-identity small {
  color: #738197;
  font-size: .58rem;
}

.admin-permissions-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-permission-role-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.admin-permission-role-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: #8d9aaf;
  border-radius: 8px;
  background: rgba(148, 163, 184, .04);
  font-size: .61rem;
  font-weight: 700;
}

.admin-permission-role-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b7df6;
}

.admin-permission-role-legend [data-role-tone="user_pro"] i {
  background: #2bbe91;
}

.admin-permission-role-legend [data-role-tone="admin"] i {
  background: #e7a63f;
}

.permission-focus-pulse {
  animation: permissionFocus 1.3s ease;
}

@keyframes permissionFocus {
  50% {
    box-shadow: 0 0 0 7px rgba(139, 125, 246, .18);
  }
}

/* Admin permissions center — policy workspace */
.admin-permissions-loading {
  display: grid;
  min-height: 360px;
  place-content: center;
  gap: 13px;
  color: var(--clr-text-muted, #8492a7);
  text-align: center;
  font-size: .72rem;
}

.admin-permissions-v4 {
  display: grid;
  gap: 15px;
  padding-bottom: 26px;
}

.admin-permissions-hero {
  position: relative;
  display: flex;
  min-height: 154px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 25px 27px;
  border: 1px solid rgba(139, 125, 246, .16);
  border-radius: 23px;
  background: radial-gradient(circle at 8% 5%, rgba(43, 190, 145, .13), transparent 30%), radial-gradient(circle at 94% 110%, rgba(139, 125, 246, .25), transparent 40%), linear-gradient(145deg, #192238, #0e1627);
  box-shadow: 0 20px 52px rgba(2, 6, 23, .17);
}

.admin-permissions-hero::after {
  position: absolute;
  width: 210px;
  height: 210px;
  opacity: .27;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: '';
  inset-inline-end: -84px;
  top: -112px;
  box-shadow: 0 0 0 33px rgba(255, 255, 255, .018), 0 0 0 66px rgba(255, 255, 255, .012);
  pointer-events: none;
}

.admin-permissions-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 760px;
  gap: 6px;
}

.admin-permissions-hero-copy>span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: #5bd0a8;
  font-size: .66rem;
  font-weight: 850;
}

.admin-permissions-hero h1 {
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(1.25rem, 2.35vw, 1.75rem);
  line-height: 1.45;
  font-weight: 950;
}

.admin-permissions-hero p {
  margin: 0;
  color: #8c99ad;
  font-size: .73rem;
  line-height: 1.8;
}

.admin-permissions-hero aside {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 235px;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  color: #e8b85d;
  border: 1px solid rgba(231, 166, 63, .17);
  border-radius: 14px;
  background: rgba(231, 166, 63, .065);
}

.admin-permissions-hero aside>svg {
  flex: 0 0 auto;
}

.admin-permissions-hero aside>div {
  display: grid;
  gap: 2px;
}

.admin-permissions-hero aside strong {
  color: #eee5d3;
  font-size: .69rem;
}

.admin-permissions-hero aside small {
  max-width: 210px;
  color: #9c907d;
  font-size: .56rem;
  line-height: 1.55;
}

.permission-role-overviews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.permission-role-overview {
  --role-tone: 139, 125, 246;
  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 15px;
  overflow: hidden;
  color: inherit;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .93), rgba(13, 19, 33, .88));
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.permission-role-overview:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--role-tone), .28);
  box-shadow: 0 13px 28px rgba(2, 6, 23, .12);
}

.permission-role-overview.tone-pro {
  --role-tone: 43, 190, 145;
}

.permission-role-overview.tone-staff {
  --role-tone: 73, 151, 232;
}

.permission-role-overview.tone-admin {
  --role-tone: 231, 166, 63;
}

.permission-role-overview-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: rgb(var(--role-tone));
  border-radius: 11px;
  background: rgba(var(--role-tone), .1);
}

.permission-role-overview>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.permission-role-overview small {
  color: #8694a9;
  font-size: .61rem;
  font-weight: 750;
}

.permission-role-overview strong {
  color: #edf2f8;
  font-size: 1rem;
  font-weight: 900;
}

.permission-role-overview em {
  overflow: hidden;
  color: #6f7d91;
  font-size: .54rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-role-overview>i {
  position: absolute;
  height: 3px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(148, 163, 184, .09);
  inset-inline: 15px;
  bottom: 12px;
}

.permission-role-overview>i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgb(var(--role-tone));
  transition: width .25s ease;
}

.permission-role-overview mark {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  color: #dfad51;
  border-radius: 7px;
  background: rgba(231, 166, 63, .09);
  inset-inline-end: 10px;
  top: 9px;
  font-size: .49rem;
  font-weight: 800;
}

.permission-controlbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 16px;
  background: rgba(17, 24, 39, .62);
}

.permission-search,
.permission-category-filter {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  color: #748399;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 11px;
  background: rgba(148, 163, 184, .035);
}

.permission-search input {
  width: 100%;
  height: 100%;
  padding: 0;
  color: #e7ebf1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .69rem;
}

.permission-category-filter select {
  min-width: 170px;
  height: 100%;
  padding: 0 3px;
  color: #c8d0dc;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .64rem;
  font-weight: 700;
}

.permission-role-tabs {
  display: flex;
  grid-column: 1/-1;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding-top: 2px;
  scrollbar-width: none;
}

.permission-role-tabs::-webkit-scrollbar {
  display: none;
}

.permission-role-tabs button {
  flex: 0 0 auto;
  padding: 8px 11px;
  color: #77869b;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: .59rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.permission-role-tabs button:hover {
  color: #cbd3df;
  background: rgba(148, 163, 184, .055);
}

.permission-role-tabs button.is-active {
  color: #d9d4ff;
  border-color: rgba(139, 125, 246, .18);
  background: rgba(139, 125, 246, .11);
}

.permission-guide {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  color: #7f8da1;
  border: 1px solid rgba(73, 151, 232, .12);
  border-radius: 12px;
  background: rgba(73, 151, 232, .045);
}

.permission-guide>svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #68a9eb;
}

.permission-guide p {
  margin: 0;
  font-size: .61rem;
  line-height: 1.7;
}

.permission-guide strong {
  color: #aebdce;
}

.permission-groups {
  display: grid;
  gap: 13px;
}

.permission-category {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 18px;
  background: rgba(13, 19, 33, .62);
  box-shadow: 0 15px 35px rgba(2, 6, 23, .08);
}

.permission-category-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 17px;
  border-bottom: 1px solid rgba(148, 163, 184, .09);
  background: linear-gradient(90deg, rgba(139, 125, 246, .055), transparent);
}

.permission-category-head>span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #9f95f4;
  border-radius: 11px;
  background: rgba(139, 125, 246, .1);
}

.permission-category-head>div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.permission-category-head h2 {
  margin: 0;
  color: #e8edf4;
  font-size: .8rem;
  font-weight: 900;
}

.permission-category-head p {
  margin: 0;
  color: #748297;
  font-size: .56rem;
}

.permission-category-head button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  color: #9b93df;
  border: 1px solid rgba(139, 125, 246, .14);
  border-radius: 9px;
  background: rgba(139, 125, 246, .06);
  font: inherit;
  font-size: .54rem;
  font-weight: 800;
  cursor: pointer;
}

.permission-category-body {
  display: grid;
}

.permission-feature-row {
  display: grid;
  grid-template-columns: minmax(205px, .82fr) minmax(0, 2.18fr);
  gap: 13px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .075);
}

.permission-feature-row:last-child {
  border-bottom: 0;
}

.permission-feature-row:hover {
  background: rgba(148, 163, 184, .018);
}

.permission-feature-identity {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  padding-top: 3px;
}

.permission-feature-identity>span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: #9d92f4;
  border-radius: 10px;
  background: rgba(139, 125, 246, .085);
}

.permission-feature-identity>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.permission-feature-identity strong {
  color: #dce3ec;
  font-size: .69rem;
  font-weight: 850;
}

.permission-feature-identity p {
  margin: 0;
  color: #718096;
  font-size: .53rem;
  line-height: 1.55;
}

.permission-feature-identity code {
  width: fit-content;
  margin-top: 2px;
  padding: 2px 5px;
  color: #8178bd;
  border-radius: 5px;
  background: rgba(139, 125, 246, .055);
  direction: ltr;
  font-family: monospace;
  font-size: .45rem;
}

.permission-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 7px;
}

.permission-role-cell {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .085);
  border-radius: 11px;
  background: rgba(148, 163, 184, .025);
}

.permission-role-cell>header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #8997aa;
  font-size: .52rem;
  font-weight: 750;
}

.permission-role-cell>header i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8b7df6;
}

.permission-role-cell>header i.tone-pro {
  background: #2bbe91;
}

.permission-role-cell>header i.tone-staff {
  background: #4997e8;
}

.permission-role-cell>header i.tone-admin {
  background: #e7a63f;
}

.permission-role-cell>header svg {
  margin-inline-start: auto;
  color: #c79943;
}

.permission-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.permission-actions label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #748297;
  font-size: .51rem;
}

.permission-switch {
  position: relative;
  width: 31px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #293449;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}

.permission-switch i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a8b1bf;
  inset-inline-start: 3px;
  top: 3px;
  transition: transform .18s ease, background .18s ease;
}

.permission-switch.is-on {
  background: #6659d7;
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .08);
}

.permission-switch.is-on i {
  background: #fff;
  transform: translateX(13px);
}

[dir="rtl"] .permission-switch.is-on i {
  transform: translateX(-13px);
}

.permission-limit {
  display: grid;
  gap: 4px;
}

.permission-limit>span {
  color: #66758a;
  font-size: .48rem;
}

.permission-limit input {
  width: 100%;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  padding: 0 7px;
  color: #cfd6e1;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 7px;
  outline: 0;
  background: rgba(2, 6, 23, .15);
  font: inherit;
  font-size: .51rem;
  text-align: center;
}

.permission-limit input:focus {
  border-color: rgba(139, 125, 246, .4);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .07);
}

.permission-role-cell--locked {
  align-content: center;
  color: #e2b45d;
  border-color: rgba(231, 166, 63, .11);
  background: rgba(231, 166, 63, .035);
}

.permission-locked-access {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #d9aa51;
}

.permission-locked-access strong {
  font-size: .58rem;
}

.permission-role-cell--locked>small {
  color: #82765f;
  font-size: .47rem;
}

#page-content[data-permission-role-filter="user_free"] .permission-role-cell:not([data-permission-role="user_free"]),
#page-content[data-permission-role-filter="user_pro"] .permission-role-cell:not([data-permission-role="user_pro"]),
#page-content[data-permission-role-filter="staff"] .permission-role-cell:not([data-permission-role="staff"]),
#page-content[data-permission-role-filter="admin"] .permission-role-cell:not([data-permission-role="admin"]) {
  display: none;
}

#page-content:not([data-permission-role-filter="all"]) .permission-role-grid {
  grid-template-columns: minmax(160px, 1fr);
}

.permission-empty-state {
  display: grid;
  min-height: 210px;
  place-content: center;
  gap: 6px;
  color: #758399;
  border: 1px dashed rgba(148, 163, 184, .14);
  border-radius: 17px;
  text-align: center;
}

.permission-empty-state[hidden],
.permission-savebar[hidden] {
  display: none !important;
}

.permission-empty-state svg {
  margin: auto;
  color: #8b7df6;
}

.permission-empty-state strong {
  color: #cfd6df;
  font-size: .78rem;
}

.permission-empty-state span {
  font-size: .58rem;
}

.permission-savebar {
  position: sticky;
  z-index: 40;
  bottom: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(139, 125, 246, .24);
  border-radius: 15px;
  background: rgba(18, 25, 42, .96);
  box-shadow: 0 18px 48px rgba(2, 6, 23, .35);
  backdrop-filter: blur(18px);
}

.permission-savebar>div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.permission-savebar [data-dirty-count] {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  border-radius: 10px;
  background: #6659d7;
  font-size: .73rem;
  font-weight: 900;
}

.permission-savebar p {
  display: grid;
  gap: 1px;
  margin: 0;
}

.permission-savebar p strong {
  color: #e8edf4;
  font-size: .65rem;
}

.permission-savebar p small {
  color: #7a889c;
  font-size: .52rem;
}

.permission-savebar button {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 9px;
  font: inherit;
  font-size: .58rem;
  font-weight: 850;
  cursor: pointer;
}

.permission-discard {
  color: #9ba8b9;
  border: 1px solid rgba(148, 163, 184, .13);
  background: transparent;
}

.permission-save {
  color: #fff;
  border: 1px solid #6659d7;
  background: linear-gradient(135deg, #6659d7, #8276e8);
  box-shadow: 0 8px 18px rgba(102, 89, 215, .18);
}

.permission-save:disabled {
  opacity: .65;
  cursor: wait;
}

.permission-save .loading-spinner {
  width: 13px;
  height: 13px;
  margin: 0;
  border-width: 2px;
}

.admin-permissions-error {
  display: grid;
  min-height: 320px;
  place-content: center;
  gap: 7px;
  color: #8b98aa;
  text-align: center;
}

.admin-permissions-error svg {
  margin: auto;
  color: #ed7087;
}

.admin-permissions-error strong {
  color: #dce3ec;
  font-size: .82rem;
}

.admin-permissions-error span {
  font-size: .61rem;
}

.admin-permissions-error button {
  margin-top: 7px;
  padding: 8px 13px;
  color: #fff;
  border: 0;
  border-radius: 9px;
  background: #6659d7;
  font: inherit;
  font-size: .6rem;
  cursor: pointer;
}

html.light .admin-permissions-hero {
  border-color: #dfe4ec;
  background: radial-gradient(circle at 8% 5%, rgba(43, 190, 145, .1), transparent 30%), radial-gradient(circle at 94% 110%, rgba(139, 125, 246, .16), transparent 40%), linear-gradient(145deg, #fff, #f4f6fb);
  box-shadow: 0 20px 48px rgba(71, 85, 105, .1);
}

html.light .admin-permissions-hero h1,
html.light .permission-role-overview strong,
html.light .permission-category-head h2,
html.light .permission-feature-identity strong,
html.light .permission-savebar p strong {
  color: #1c283b;
}

html.light .admin-permissions-hero p {
  color: #66758a;
}

html.light .admin-permissions-hero aside {
  background: rgba(231, 166, 63, .07);
}

html.light .admin-permissions-hero aside strong {
  color: #76591f;
}

html.light .permission-role-overview {
  border-color: #e0e5ed;
  background: linear-gradient(145deg, #fff, #f7f9fc);
}

html.light .permission-controlbar,
html.light .permission-category {
  border-color: #e0e5ed;
  background: #fff;
}

html.light .permission-search,
html.light .permission-category-filter {
  border-color: #e1e5ec;
  background: #f8f9fc;
}

html.light .permission-search input,
html.light .permission-category-filter select {
  color: #283448;
}

html.light .permission-guide {
  border-color: #dceafa;
  background: #f6faff;
}

html.light .permission-category-head {
  border-color: #e7eaf0;
  background: linear-gradient(90deg, rgba(139, 125, 246, .06), transparent);
}

html.light .permission-feature-row {
  border-color: #edf0f4;
}

html.light .permission-feature-row:hover {
  background: #fafbfc;
}

html.light .permission-role-cell {
  border-color: #e7eaf0;
  background: #fafbfc;
}

html.light .permission-limit input {
  color: #334155;
  border-color: #dfe4eb;
  background: #fff;
}

html.light .permission-savebar {
  border-color: #d7d1fa;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 42px rgba(71, 85, 105, .18);
}

@media (max-width:1100px) {
  .permission-role-overviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-feature-row {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .permission-role-grid {
    grid-template-columns: repeat(2, minmax(145px, 1fr));
  }
}

@media (max-width:760px) {
  .admin-permissions-v4 {
    gap: 11px;
  }

  .admin-permissions-hero {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    padding: 20px 17px;
  }

  .admin-permissions-hero aside {
    width: auto;
    min-width: 0;
  }

  .permission-role-overviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .permission-role-overview {
    min-height: 101px;
    padding: 12px 10px;
    gap: 7px;
  }

  .permission-role-overview-icon {
    width: 33px;
    height: 33px;
  }

  .permission-role-overview em {
    display: none;
  }

  .permission-role-overview mark {
    display: none;
  }

  .permission-controlbar {
    grid-template-columns: 1fr;
  }

  .permission-category-filter {
    grid-row: 2;
  }

  .permission-category-filter select {
    width: 100%;
    min-width: 0;
  }

  .permission-role-tabs {
    grid-row: 3;
  }

  .permission-category-head {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 13px;
  }

  .permission-category-head button {
    width: 100%;
    justify-content: center;
  }

  .permission-feature-row {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .permission-feature-identity p {
    font-size: .55rem;
  }

  .permission-role-grid {
    grid-template-columns: 1fr;
  }

  .permission-role-cell {
    padding: 11px 12px;
  }

  #page-content[data-permission-role-filter="all"] .permission-role-grid {
    grid-template-columns: 1fr;
  }

  .permission-savebar {
    align-items: stretch;
    flex-direction: column;
    bottom: 96px;
  }

  .permission-savebar>div:last-child {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
  }

  .permission-savebar button {
    width: 100%;
  }
}

@media (max-width:420px) {
  .permission-role-overviews {
    grid-template-columns: 1fr;
  }

  .permission-role-overview {
    min-height: 88px;
  }
}

.admin-subscriptions-summary {
  margin-bottom: 14px;
}

.admin-coupon-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.admin-coupon-insights article {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 11px;
  background: rgba(148, 163, 184, .035);
}

.admin-coupon-insights article>span {
  color: #978bed;
}

.admin-coupon-insights div {
  display: grid;
  gap: 2px;
}

.admin-coupon-insights small {
  color: #7e8ca2;
  font-size: .61rem;
}

.admin-coupon-insights strong {
  color: #e6ebf2;
  font-size: .87rem;
}

html.light .admin-v3-page-head {
  border-color: #e0e5ee;
  background: radial-gradient(circle at 4% 0, rgba(43, 190, 145, .08), transparent 32%), radial-gradient(circle at 95% 100%, rgba(139, 125, 246, .12), transparent 38%), #fff;
}

html.light .admin-v3-page-head h2,
html.light .admin-v3-summary strong,
html.light .admin-user-identity strong,
html.light .admin-coupon-insights strong {
  color: #1b2639;
}

html.light .admin-v3-page-head p {
  color: #64748b;
}

html.light .admin-v3-summary article {
  border-color: #e2e7ef;
  background: linear-gradient(145deg, #fff, #f7f9fc);
}

html.light .admin-v3-toolbar {
  border-color: #e1e6ee;
  background: #fff;
}

html.light .admin-v3-search {
  border-color: #dfe4ed;
  background: #f8f9fc;
}

html.light .admin-v3-search input {
  color: #273248;
}

/* Admin site settings */
.admin-site-v3-page {
  display: grid;
  gap: 15px;
}

.admin-site-v3-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(139, 125, 246, .15);
  border-radius: 21px;
  background: radial-gradient(circle at 4% 0, rgba(43, 190, 145, .08), transparent 32%), radial-gradient(circle at 95% 100%, rgba(139, 125, 246, .15), transparent 38%), rgba(17, 24, 39, .62);
}

.admin-site-v3-hero>div {
  display: grid;
  gap: 3px;
}

.admin-site-v3-hero h2 {
  margin: 0;
  color: #f6f8fc;
  font-size: 1.3rem;
  font-weight: 900;
}

.admin-site-v3-hero p {
  max-width: 670px;
  margin: 0;
  color: #8492a7;
  font-size: .73rem;
  line-height: 1.65;
}

.admin-site-v3-hero aside {
  display: flex;
  min-width: 205px;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}

.admin-site-v3-hero aside>span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #42cd9b;
  border-radius: 10px;
  background: rgba(43, 190, 145, .09);
}

.admin-site-v3-hero aside div {
  display: grid;
  gap: 2px;
}

.admin-site-v3-hero aside small {
  color: #7d8ba1;
  font-size: .6rem;
}

.admin-site-v3-hero aside strong {
  color: #e7ecf3;
  font-size: .76rem;
}

.admin-site-v3-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.admin-site-v3-status article {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 12px;
  background: rgba(17, 24, 39, .55);
}

.admin-site-v3-status article>span {
  color: #978bed;
}

.admin-site-v3-status article>div {
  display: grid;
  gap: 2px;
}

.admin-site-v3-status strong {
  color: #dce3ed;
  font-size: .69rem;
}

.admin-site-v3-status small {
  color: #748299;
  font-size: .58rem;
}

.admin-site-v3-page .admin-tabs-wrapper {
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 14px;
  background: rgba(17, 24, 39, .58);
}

.admin-site-v3-page .admin-tabs-container {
  gap: 5px;
  padding: 0;
  background: transparent;
}

.admin-site-v3-page .admin-settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
}

.admin-site-identity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  gap: 15px;
}

.admin-site-live-preview {
  position: sticky;
  top: 20px;
  align-self: start;
  overflow: hidden;
  padding: 17px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 17px;
  background: radial-gradient(circle at 50% 0, rgba(139, 125, 246, .16), transparent 40%), linear-gradient(145deg, rgba(23, 30, 48, .94), rgba(13, 19, 33, .9));
}

.admin-site-live-preview>span {
  color: #8e9bae;
  font-size: .64rem;
  font-weight: 750;
}

.admin-site-live-preview>div {
  display: grid;
  min-height: 240px;
  place-items: center;
  align-content: center;
  gap: 9px;
  margin-top: 12px;
  border: 1px dashed rgba(148, 163, 184, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
  text-align: center;
}

.admin-site-preview-mark {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  overflow: hidden;
  color: #a99ff9;
  border-radius: 20px;
  background: rgba(139, 125, 246, .11);
}

.admin-site-preview-mark img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

.admin-site-live-preview strong {
  color: #eff3f8;
  font-size: 1rem;
}

.admin-site-live-preview small {
  max-width: 190px;
  color: #78869b;
  font-size: .61rem;
  line-height: 1.6;
}

html.light .admin-site-v3-hero,
html.light .admin-site-v3-status article,
html.light .admin-site-v3-page .admin-tabs-wrapper {
  border-color: #e1e6ee;
  background-color: #fff;
}

html.light .admin-site-v3-hero h2,
html.light .admin-site-v3-hero aside strong,
html.light .admin-site-v3-status strong {
  color: #1b2639;
}

html.light .admin-site-live-preview {
  border-color: #e1e6ee;
  background: radial-gradient(circle at 50% 0, rgba(139, 125, 246, .12), transparent 40%), #fff;
}

html.light .admin-site-live-preview strong {
  color: #1b2639;
}

@media (max-width: 1000px) {

  .subscribe-v3-hero,
  .admin-site-identity-layout {
    grid-template-columns: 1fr;
  }

  .admin-site-live-preview {
    position: static;
  }

  .admin-site-v3-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .calendar-v3-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .calendar-v3-add {
    width: 100%;
  }

  .calendar-v3-metrics,
  .admin-v3-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-v3-controlbar {
    justify-content: stretch;
  }

  .calendar-v3-controlbar .calendar-controls-container {
    width: 100%;
    justify-content: space-between;
  }

  .subscribe-v3-hero {
    padding: 22px;
  }

  .subscribe-v3-assurances {
    grid-template-columns: 1fr;
  }

  .subscribe-yearly-save {
    position: static;
    margin-inline-start: 8px;
  }

  .admin-v3-page-head,
  .admin-site-v3-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-v3-page-head>button {
    width: 100%;
  }

  .admin-v3-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-v3-search {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .admin-permissions-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .quick-reminder-dialog {
    width: 100%;
    max-height: 94vh;
    align-self: flex-end;
    border-radius: 22px 22px 0 0;
  }

  .quick-reminder-head,
  .quick-reminder-dialog .modal-body {
    padding-inline: 16px;
  }

  .quick-alarm-presets>span {
    flex-basis: 100%;
  }

  .calendar-v3-heading {
    flex-direction: column;
  }

  .calendar-v3-metrics {
    gap: 7px;
  }

  .calendar-v3-metrics article {
    padding: 10px;
  }

  .calendar-shell-card {
    overflow-x: auto;
    padding: 10px !important;
  }

  .calendar-header-grid,
  .calendar-grid {
    min-width: 670px;
  }

  .subscribe-v3-current {
    align-items: flex-start;
  }

  .subscribe-v3-trust {
    align-items: flex-start;
    flex-direction: column;
  }

  .subscribe-v3-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .subscribe-v3-steps {
    grid-template-columns: 1fr auto 1fr;
    gap: 7px;
    padding: 11px;
  }

  .subscribe-v3-step {
    gap: 7px;
  }

  .subscribe-v3-step>b {
    width: 30px;
    height: 30px;
  }

  .subscribe-v3-step small {
    display: none;
  }

  .subscribe-v3-step strong {
    font-size: .64rem;
  }

  .subscribe-payment-head {
    grid-template-columns: 1fr auto;
  }

  .subscribe-payment-head>div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .subscribe-secure-badge {
    justify-self: end;
  }

  .admin-v3-page-head,
  .admin-site-v3-hero {
    padding: 18px 16px;
  }

  .admin-v3-summary {
    gap: 7px;
  }

  .admin-v3-summary article {
    min-height: 66px;
    padding: 11px 9px;
    gap: 7px;
  }

  .admin-v3-summary article>span {
    width: 32px;
    height: 32px;
  }

  .admin-v3-summary small {
    font-size: .56rem;
  }

  .admin-v3-summary strong {
    font-size: .93rem;
  }

  .admin-permissions-summary {
    grid-template-columns: 1fr;
  }

  .admin-coupon-insights,
  .admin-site-v3-status {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   Admin command dashboard — 2026
══════════════════════════════════════════════════════════════ */
.admin-dashboard-loading {
  display: grid;
  min-height: 360px;
  place-content: center;
  gap: 14px;
  color: var(--clr-text-muted);
  text-align: center;
  font-size: .72rem;
}

.admin-command-dashboard {
  display: grid;
  gap: 15px;
  padding-bottom: 24px;
}

.admin-command-hero {
  position: relative;
  display: flex;
  min-height: 176px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  padding: 27px 29px;
  border: 1px solid rgba(139, 125, 246, .16);
  border-radius: 24px;
  background: radial-gradient(circle at 7% 3%, rgba(43, 190, 145, .12), transparent 30%), radial-gradient(circle at 92% 105%, rgba(139, 125, 246, .24), transparent 38%), linear-gradient(145deg, #192238, #0e1627);
  box-shadow: 0 22px 58px rgba(2, 6, 23, .19);
}

.admin-command-hero::after {
  position: absolute;
  width: 230px;
  height: 230px;
  opacity: .28;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: '';
  inset-inline-end: -90px;
  top: -118px;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, .018), 0 0 0 70px rgba(255, 255, 255, .012);
  pointer-events: none;
}

.admin-command-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
}

.admin-command-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: #5bd0a8;
  font-size: .66rem;
  font-weight: 850;
}

.admin-command-hero h1 {
  max-width: 750px;
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.45;
  font-weight: 950;
}

.admin-command-hero p {
  max-width: 720px;
  margin: 0;
  color: #8c99ad;
  font-size: .75rem;
  line-height: 1.8;
}

.admin-command-date {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #a3afc0;
  font-size: .63rem;
  font-weight: 700;
}

.admin-command-hero-actions {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 180px;
  gap: 10px;
  justify-items: stretch;
}

.admin-command-hero-actions .btn {
  justify-content: center;
}

.admin-command-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  color: #aab5c5;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  font-size: .6rem;
  font-weight: 750;
}

.admin-command-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bbe91;
  box-shadow: 0 0 0 4px rgba(43, 190, 145, .1);
}

.admin-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-command-metric {
  --tone: 139, 125, 246;
  position: relative;
  display: grid;
  min-height: 138px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .94), rgba(13, 19, 33, .89));
  box-shadow: 0 14px 34px rgba(2, 6, 23, .1);
}

.admin-command-metric::after {
  position: absolute;
  width: 82px;
  height: 82px;
  opacity: .8;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--tone), .14), transparent 68%);
  content: '';
  inset-inline-end: -19px;
  bottom: -30px;
}

.admin-command-metric.green {
  --tone: 43, 190, 145;
}

.admin-command-metric.amber {
  --tone: 231, 166, 63;
}

.admin-command-metric.blue {
  --tone: 76, 154, 239;
}

.admin-command-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-command-metric-top>span {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 11px;
  background: rgba(var(--tone), .1);
}

.admin-command-metric-top em {
  padding: 4px 7px;
  color: rgb(var(--tone));
  border-radius: 7px;
  background: rgba(var(--tone), .075);
  font-size: .57rem;
  font-style: normal;
  font-weight: 850;
}

.admin-command-metric>strong {
  align-self: end;
  margin-top: 12px;
  color: #eef2f8;
  font-size: 1.38rem;
  line-height: 1;
  font-weight: 950;
}

.admin-command-metric>strong b {
  color: #7f8ca1;
  font-size: .56rem;
  font-weight: 800;
}

.admin-command-metric>p {
  margin: 4px 0 0;
  color: #b6c0ce;
  font-size: .69rem;
  font-weight: 800;
}

.admin-command-metric>small {
  margin-top: 3px;
  color: #6f7d92;
  font-size: .56rem;
}

.admin-command-signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 15px;
  background: rgba(17, 24, 39, .57);
}

.admin-command-signals article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 10px;
  border-inline-end: 1px solid rgba(148, 163, 184, .08);
}

.admin-command-signals article:last-child {
  border-inline-end: 0;
}

.admin-command-signals article>span {
  grid-row: 1 / 3;
  color: #958aeb;
}

.admin-command-signals article>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-command-signals small {
  color: #77859a;
  font-size: .55rem;
}

.admin-command-signals strong {
  color: #dce3ed;
  font-size: .7rem;
  font-weight: 900;
}

.admin-command-signals i {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(148, 163, 184, .08);
}

.admin-command-signals b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6a5ae5, #3bc495);
}

.admin-command-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 12px;
}

.admin-command-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-command-panel {
  overflow: hidden;
  padding: 17px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20, 27, 44, .91), rgba(13, 19, 32, .86));
  box-shadow: 0 14px 35px rgba(2, 6, 23, .08);
}

.admin-command-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-command-panel-head>div {
  display: grid;
  gap: 2px;
}

.admin-command-panel-head small {
  color: #8f83ea;
  font-size: .57rem;
  font-weight: 850;
}

.admin-command-panel-head h2 {
  margin: 0;
  color: #e9eef5;
  font-size: .88rem;
  font-weight: 900;
}

.admin-command-panel-head>span:not(.admin-command-attention-count) {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  color: #968bec;
  border-radius: 10px;
  background: rgba(139, 125, 246, .09);
}

.admin-command-panel-head>button {
  color: #8f83ea;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .58rem;
  font-weight: 800;
}

.admin-command-health-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 20px;
}

.admin-command-donut {
  display: grid;
  width: 155px;
  height: 155px;
  margin: auto;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#2bbe91 calc(var(--score) * 1%), rgba(148, 163, 184, .1) 0);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, .06);
}

.admin-command-donut::before {
  position: absolute;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 50%;
  background: #121a2b;
  content: '';
}

.admin-command-donut>div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  text-align: center;
}

.admin-command-donut strong {
  color: #f0f4f8;
  font-size: 1.45rem;
  font-weight: 950;
}

.admin-command-donut small {
  color: #76849a;
  font-size: .55rem;
}

.admin-command-health-breakdown {
  display: grid;
  gap: 8px;
}

.admin-command-health-breakdown article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .03);
}

.admin-command-health-breakdown i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b7df6;
}

.admin-command-health-breakdown i.green {
  background: #2bbe91;
}

.admin-command-health-breakdown i.amber {
  background: #e7a63f;
}

.admin-command-health-breakdown i.rose {
  background: #ed7087;
}

.admin-command-health-breakdown span {
  color: #8592a6;
  font-size: .6rem;
}

.admin-command-health-breakdown strong {
  color: #dce3ed;
  font-size: .7rem;
}

.admin-command-text-action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 13px;
  padding: 9px;
  color: #9b91ec;
  border: 1px solid rgba(139, 125, 246, .1);
  border-radius: 9px;
  background: rgba(139, 125, 246, .045);
  cursor: pointer;
  font: inherit;
  font-size: .61rem;
  font-weight: 800;
}

.admin-command-attention-count {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  place-items: center;
  color: #e6a746;
  border-radius: 9px;
  background: rgba(231, 166, 63, .09);
  font-size: .7rem;
  font-weight: 900;
}

.admin-command-attention-list {
  display: grid;
  gap: 7px;
}

.admin-command-attention-list>button {
  --tone: 139, 125, 246;
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  color: inherit;
  border: 1px solid rgba(var(--tone), .1);
  border-radius: 11px;
  background: rgba(var(--tone), .035);
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: .18s ease;
}

.admin-command-attention-list>button:hover {
  border-color: rgba(var(--tone), .24);
  background: rgba(var(--tone), .07);
  transform: translateY(-1px);
}

.admin-command-attention-list>button.tone-amber {
  --tone: 231, 166, 63;
}

.admin-command-attention-list>button.tone-rose {
  --tone: 237, 112, 135;
}

.admin-command-attention-list>button>span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 9px;
  background: rgba(var(--tone), .09);
}

.admin-command-attention-list>button>div {
  display: grid;
  gap: 2px;
}

.admin-command-attention-list strong {
  color: #dce3ed;
  font-size: .63rem;
}

.admin-command-attention-list small {
  color: #718096;
  font-size: .53rem;
  line-height: 1.5;
}

.admin-command-attention-list em {
  color: rgb(var(--tone));
  font-size: .78rem;
  font-style: normal;
  font-weight: 950;
}

.admin-command-clear-state {
  display: grid;
  min-height: 196px;
  place-content: center;
  gap: 6px;
  color: #2bbe91;
  text-align: center;
}

.admin-command-clear-state strong {
  color: #dfe5ed;
  font-size: .72rem;
}

.admin-command-clear-state span {
  color: #77859a;
  font-size: .56rem;
}

.admin-command-user-feed,
.admin-command-sub-feed {
  display: grid;
}

.admin-command-user-feed article,
.admin-command-sub-feed article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
}

.admin-command-user-feed article:last-child,
.admin-command-sub-feed article:last-child {
  border-bottom: 0;
}

.admin-command-user-feed article>span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  color: #d4ceff;
  border-radius: 10px;
  background: rgba(139, 125, 246, .1);
  font-size: .69rem;
  font-weight: 900;
}

.admin-command-user-feed article>div,
.admin-command-sub-feed article>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-command-user-feed strong,
.admin-command-sub-feed strong {
  overflow: hidden;
  color: #dfe5ed;
  font-size: .63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-command-user-feed small,
.admin-command-sub-feed small {
  overflow: hidden;
  color: #6f7d92;
  font-size: .52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-command-user-feed em,
.admin-command-sub-feed em {
  padding: 4px 6px;
  color: #9b91ec;
  border-radius: 6px;
  background: rgba(139, 125, 246, .07);
  font-size: .5rem;
  font-style: normal;
  font-weight: 800;
}

.admin-command-user-feed time,
.admin-command-sub-feed time {
  color: #77859a;
  font-size: .5rem;
  white-space: nowrap;
}

.admin-command-sub-feed article>span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #e7a63f;
  border-radius: 9px;
  background: rgba(231, 166, 63, .08);
}

.admin-command-sub-feed article>span.status-active {
  color: #2bbe91;
  background: rgba(43, 190, 145, .08);
}

.admin-command-sub-feed article>span.status-expired,
.admin-command-sub-feed article>span.status-cancelled {
  color: #ed7087;
  background: rgba(237, 112, 135, .08);
}

.admin-command-empty {
  padding: 30px;
  color: #748299;
  text-align: center;
  font-size: .62rem;
}

.admin-command-quick-actions {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 15px;
  padding: 17px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 18px;
  background: rgba(17, 24, 39, .57);
}

.admin-command-quick-actions>div:first-child {
  display: grid;
  gap: 2px;
}

.admin-command-quick-actions>div:first-child small {
  color: #8f83ea;
  font-size: .57rem;
  font-weight: 850;
}

.admin-command-quick-actions h2 {
  margin: 0;
  color: #e5eaf2;
  font-size: .82rem;
}

.admin-command-quick-actions>div:last-child {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.admin-command-quick-actions button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: inherit;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 10px;
  background: rgba(148, 163, 184, .025);
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: .18s ease;
}

.admin-command-quick-actions button:hover {
  border-color: rgba(139, 125, 246, .2);
  background: rgba(139, 125, 246, .055);
  transform: translateY(-1px);
}

.admin-command-quick-actions button>span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #988ded;
  border-radius: 9px;
  background: rgba(139, 125, 246, .085);
}

.admin-command-quick-actions button>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-command-quick-actions button strong {
  color: #dce3ed;
  font-size: .58rem;
}

.admin-command-quick-actions button small {
  overflow: hidden;
  color: #6f7d92;
  font-size: .49rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-command-quick-actions button>svg {
  color: #68768b;
}

html.light .admin-command-hero {
  border-color: #dfe5ee;
  background: radial-gradient(circle at 7% 3%, rgba(43, 190, 145, .1), transparent 30%), radial-gradient(circle at 92% 105%, rgba(139, 125, 246, .18), transparent 38%), linear-gradient(145deg, #fff, #f3f6fb);
  box-shadow: 0 20px 50px rgba(71, 85, 105, .1);
}

html.light .admin-command-hero h1,
html.light .admin-command-metric>strong,
html.light .admin-command-panel-head h2,
html.light .admin-command-health-breakdown strong,
html.light .admin-command-attention-list strong,
html.light .admin-command-user-feed strong,
html.light .admin-command-sub-feed strong,
html.light .admin-command-quick-actions h2,
html.light .admin-command-quick-actions button strong {
  color: #1b273a;
}

html.light .admin-command-hero p {
  color: #64748b;
}

html.light .admin-command-date,
html.light .admin-command-live {
  color: #6d7a8e;
}

html.light .admin-command-metric,
html.light .admin-command-panel {
  border-color: #e1e6ee;
  background: linear-gradient(145deg, #fff, #f7f9fc);
  box-shadow: 0 13px 32px rgba(71, 85, 105, .07);
}

html.light .admin-command-metric>p {
  color: #455369;
}

html.light .admin-command-signals,
html.light .admin-command-quick-actions {
  border-color: #e1e6ee;
  background: #fff;
}

html.light .admin-command-signals strong {
  color: #273348;
}

html.light .admin-command-donut::before {
  border-color: #e4e8ef;
  background: #fff;
}

html.light .admin-command-donut strong {
  color: #1b273a;
}

html.light .admin-command-health-breakdown article,
html.light .admin-command-quick-actions button {
  background: #f8f9fc;
}

html.light .admin-command-clear-state strong {
  color: #273348;
}

@media (max-width:1100px) {
  .admin-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-command-main-grid,
  .admin-command-feed-grid {
    grid-template-columns: 1fr;
  }

  .admin-command-quick-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width:760px) {
  .admin-command-hero {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    padding: 21px;
  }

  .admin-command-hero-actions {
    min-width: 0;
    grid-template-columns: 1fr 1fr;
  }

  .admin-command-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-command-signals article:nth-child(2) {
    border-inline-end: 0;
  }

  .admin-command-health-body {
    grid-template-columns: 1fr;
  }

  .admin-command-quick-actions>div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:520px) {
  .admin-command-dashboard {
    gap: 10px;
  }

  .admin-command-hero {
    padding: 18px 16px;
    border-radius: 19px;
  }

  .admin-command-hero-actions {
    grid-template-columns: 1fr;
  }

  .admin-command-metrics {
    gap: 7px;
  }

  .admin-command-metric {
    min-height: 126px;
    padding: 13px 11px;
    border-radius: 14px;
  }

  .admin-command-metric-top>span {
    width: 32px;
    height: 32px;
  }

  .admin-command-metric>strong {
    font-size: 1.12rem;
  }

  .admin-command-metric>p {
    font-size: .6rem;
  }

  .admin-command-metric>small {
    font-size: .49rem;
    line-height: 1.5;
  }

  .admin-command-signals {
    grid-template-columns: 1fr;
  }

  .admin-command-signals article {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .08);
  }

  .admin-command-signals article:last-child {
    border-bottom: 0;
  }

  .admin-command-panel {
    padding: 14px 12px;
    border-radius: 15px;
  }

  .admin-command-donut {
    width: 138px;
    height: 138px;
  }

  .admin-command-donut::before {
    width: 105px;
    height: 105px;
  }

  .admin-command-user-feed article,
  .admin-command-sub-feed article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .admin-command-user-feed time,
  .admin-command-sub-feed time {
    display: none;
  }

  .admin-command-quick-actions {
    padding: 14px 12px;
  }

  .admin-command-quick-actions>div:last-child {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   First experience & permission journey — 2026
══════════════════════════════════════════════════════════════ */
.onboarding-v2-overlay {
  padding: 24px;
  background: radial-gradient(circle at 12% 8%, rgba(43, 190, 145, .13), transparent 28%), radial-gradient(circle at 90% 92%, rgba(139, 125, 246, .2), transparent 35%), rgba(8, 13, 24, .82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.onboarding-v2-card {
  overflow: hidden;
  padding: 0;
  color: #eaf0f7;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 25px;
  background: linear-gradient(145deg, #182136, #0e1627);
  box-shadow: 0 32px 95px rgba(2, 6, 23, .46);
  text-align: start;
}

.onboarding-v2-progress {
  display: grid;
  gap: 7px;
}

.onboarding-v2-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #718096;
  font-size: .56rem;
  font-weight: 750;
}

.onboarding-v2-progress-head strong {
  color: #a69df1;
  font-size: .58rem;
}

.onboarding-v2-progress-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.onboarding-v2-progress-track i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .1);
}

.onboarding-v2-progress-track i.active {
  background: linear-gradient(90deg, #8b7df6, #aa9fff);
  box-shadow: 0 0 12px rgba(139, 125, 246, .22);
}

.onboarding-v2-progress-track i.done {
  background: #2bbe91;
}

.onboarding-v2-setup {
  display: grid;
  width: min(920px, 100%);
  max-height: calc(100dvh - 48px);
  grid-template-columns: 280px minmax(0, 1fr);
}

.onboarding-v2-aside {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 20px;
  overflow: hidden;
  padding: 25px;
  background: radial-gradient(circle at 30% 20%, rgba(43, 190, 145, .14), transparent 32%), radial-gradient(circle at 100% 100%, rgba(139, 125, 246, .2), transparent 42%), rgba(255, 255, 255, .025);
}

.onboarding-v2-aside::after {
  position: absolute;
  width: 170px;
  height: 170px;
  opacity: .5;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  content: '';
  inset-inline-end: -92px;
  bottom: -70px;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .016), 0 0 0 55px rgba(255, 255, 255, .01);
}

.onboarding-v2-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8edf5;
}

.onboarding-v2-brand svg {
  color: #a99ff8;
}

.onboarding-v2-brand strong {
  font-size: .76rem;
}

.onboarding-v2-aside-visual {
  position: relative;
  display: grid;
  width: 122px;
  height: 122px;
  margin: 7px auto;
  place-items: center;
  color: #c1b9ff;
  border: 1px solid rgba(139, 125, 246, .17);
  border-radius: 35px;
  background: linear-gradient(145deg, rgba(139, 125, 246, .16), rgba(43, 190, 145, .07));
  transform: rotate(-5deg);
}

.onboarding-v2-aside-visual>span {
  transform: rotate(5deg);
}

.onboarding-v2-aside-visual i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2bbe91;
  box-shadow: 0 0 0 6px rgba(43, 190, 145, .09);
}

.onboarding-v2-aside-visual i:nth-child(2) {
  inset-inline-start: -5px;
  top: 24px;
}

.onboarding-v2-aside-visual i:nth-child(3) {
  inset-inline-end: 5px;
  bottom: -3px;
  background: #e7a63f;
  box-shadow: 0 0 0 6px rgba(231, 166, 63, .08);
}

.onboarding-v2-aside>div:nth-of-type(3) {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.onboarding-v2-aside small {
  color: #55cba3;
  font-size: .59rem;
  font-weight: 850;
}

.onboarding-v2-aside h2 {
  margin: 0;
  color: #eff3f8;
  font-size: 1.15rem;
  line-height: 1.55;
  font-weight: 950;
}

.onboarding-v2-aside p {
  margin: 0;
  color: #7e8ca1;
  font-size: .61rem;
  line-height: 1.75;
}

.onboarding-v2-aside ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-v2-aside li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8c99ad;
  font-size: .57rem;
}

.onboarding-v2-aside li svg {
  color: #2bbe91;
}

.onboarding-v2-content {
  display: grid;
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  padding: 24px 26px 21px;
}

.onboarding-v2-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.onboarding-v2-mobile-icon {
  display: none;
}

.onboarding-v2-header>div {
  display: grid;
  gap: 3px;
}

.onboarding-v2-header small,
.onboarding-v2-kicker {
  color: #55cba3;
  font-size: .58rem;
  font-weight: 850;
}

.onboarding-v2-header h1 {
  margin: 0;
  color: #f1f5f9;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 950;
}

.onboarding-v2-header p {
  max-width: 570px;
  margin: 0;
  color: #7e8ca1;
  font-size: .62rem;
  line-height: 1.7;
}

.onboarding-v2-setup .first-run-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.onboarding-v2-setup .first-run-goal {
  display: grid;
  min-height: 64px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 12px;
  background: rgba(148, 163, 184, .025);
  text-align: start;
}

.onboarding-v2-setup .first-run-goal:hover {
  border-color: rgba(139, 125, 246, .24);
  background: rgba(139, 125, 246, .055);
}

.onboarding-v2-setup .first-run-goal.active,
.onboarding-v2-setup .first-run-goal:has(input:checked) {
  border-color: rgba(139, 125, 246, .42);
  background: rgba(139, 125, 246, .09);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .055);
  transform: none;
}

.onboarding-v2-setup .first-run-goal>span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #a89ef5;
  border-radius: 10px;
  background: rgba(139, 125, 246, .09);
}

.onboarding-v2-setup .first-run-goal>div {
  display: grid;
  gap: 2px;
}

.onboarding-v2-setup .first-run-goal b {
  color: #dfe5ed;
  font-size: .64rem;
}

.onboarding-v2-setup .first-run-goal small {
  color: #718096;
  font-size: .5rem;
}

.onboarding-v2-setup .first-run-goal em {
  display: grid;
  width: 19px;
  height: 19px;
  opacity: 0;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #7c6ee8;
  transition: .18s ease;
}

.onboarding-v2-setup .first-run-goal.active em,
.onboarding-v2-setup .first-run-goal:has(input:checked) em {
  opacity: 1;
}

.onboarding-v2-setup .first-run-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-v2-setup .first-run-field {
  display: grid;
  grid-column: auto !important;
  grid-template-columns: auto 1fr;
  gap: 7px 8px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 11px;
  background: rgba(148, 163, 184, .025);
  text-align: start;
}

.onboarding-v2-setup .first-run-field:first-child {
  grid-column: 1 / -1 !important;
  grid-template-columns: auto 1fr 125px;
  align-items: center;
}

.onboarding-v2-setup .first-run-field>span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #9c91ed;
  border-radius: 8px;
  background: rgba(139, 125, 246, .08);
}

.onboarding-v2-setup .first-run-field>div {
  display: grid;
  align-content: center;
  gap: 1px;
}

.onboarding-v2-setup .first-run-field b {
  color: #cfd7e3;
  font-size: .58rem;
}

.onboarding-v2-setup .first-run-field small {
  color: #69778c;
  font-size: .47rem;
}

.onboarding-v2-setup .first-run-field .form-input {
  grid-column: 1 / -1;
  height: 37px;
  min-height: 37px;
  padding: 7px 9px;
  color: #e9eef5;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 8px;
  background: rgba(2, 6, 23, .22);
  font-size: .62rem;
}

.onboarding-v2-setup .first-run-field:first-child .form-input {
  grid-column: auto;
  width: 125px;
}

.onboarding-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(148, 163, 184, .08);
}

.onboarding-v2-footer>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6f7d92;
  font-size: .51rem;
}

.onboarding-v2-footer>span svg {
  color: #2bbe91;
}

.onboarding-v2-footer .notification-onboarding-actions {
  flex-wrap: nowrap;
}

.onboarding-v2-footer .btn {
  min-height: 39px;
  padding: 8px 13px;
  font-size: .61rem;
}

.onboarding-v2-card .notification-onboarding-status {
  min-height: 0;
  margin: 0;
  color: #ef8093;
  font-size: .56rem;
  text-align: center;
}

.onboarding-v2-permission {
  width: min(760px, 100%);
  padding: 23px 25px 20px;
}

.onboarding-v2-permission-body {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  align-items: center;
  gap: 25px;
  margin: 20px 0 16px;
}

.onboarding-v2-permission-visual {
  position: relative;
  display: grid;
  width: 180px;
  height: 180px;
  margin: auto;
  place-items: center;
  border: 1px solid rgba(139, 125, 246, .15);
  border-radius: 52px;
  background: radial-gradient(circle at 25% 20%, rgba(43, 190, 145, .13), transparent 34%), linear-gradient(145deg, rgba(139, 125, 246, .14), rgba(139, 125, 246, .035));
}

.onboarding-v2-permission-visual>span {
  display: grid;
  width: 67px;
  height: 67px;
  place-items: center;
  color: #bab1ff;
  border-radius: 21px;
  background: rgba(139, 125, 246, .14);
  box-shadow: 0 13px 30px rgba(2, 6, 23, .17);
}

.onboarding-v2-permission-visual>i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2bbe91;
  box-shadow: 0 0 0 6px rgba(43, 190, 145, .08);
}

.onboarding-v2-permission-visual>i:nth-child(2) {
  inset-inline-start: 20px;
  top: 31px;
}

.onboarding-v2-permission-visual>i:nth-child(3) {
  inset-inline-end: 17px;
  top: 58px;
  background: #e7a63f;
  box-shadow: 0 0 0 6px rgba(231, 166, 63, .07);
}

.onboarding-v2-permission-visual>i:nth-child(4) {
  inset-inline-start: 39px;
  bottom: 18px;
  background: #ed7087;
  box-shadow: 0 0 0 6px rgba(237, 112, 135, .07);
}

.onboarding-v2-permission-visual>div {
  position: absolute;
  display: flex;
  gap: 5px;
  bottom: 15px;
}

.onboarding-v2-permission-visual b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #8390a5;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.location-v2-visual {
  border-color: rgba(76, 154, 239, .16);
  background: radial-gradient(circle at 25% 20%, rgba(43, 190, 145, .11), transparent 34%), linear-gradient(145deg, rgba(76, 154, 239, .13), rgba(76, 154, 239, .03));
}

.location-v2-visual>span {
  color: #74b5f3;
  background: rgba(76, 154, 239, .13);
}

.onboarding-v2-permission-copy {
  display: grid;
  gap: 6px;
}

.onboarding-v2-permission-copy h1 {
  margin: 0;
  color: #f1f5f9;
  font-size: 1.35rem;
  line-height: 1.55;
  font-weight: 950;
}

.onboarding-v2-permission-copy>p {
  margin: 0;
  color: #8390a4;
  font-size: .66rem;
  line-height: 1.8;
}

.onboarding-v2-benefits {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.onboarding-v2-benefits article {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  background: rgba(148, 163, 184, .025);
}

.onboarding-v2-benefits article>span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  color: #9e94ef;
  border-radius: 8px;
  background: rgba(139, 125, 246, .08);
}

.onboarding-v2-benefits article>div {
  display: grid;
  gap: 1px;
}

.onboarding-v2-benefits strong {
  color: #d8e0ea;
  font-size: .58rem;
}

.onboarding-v2-benefits small {
  color: #6f7d92;
  font-size: .49rem;
}

.onboarding-v2-privacy {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 11px;
  color: #718096;
  border: 1px solid rgba(43, 190, 145, .11);
  border-radius: 10px;
  background: rgba(43, 190, 145, .035);
  font-size: .53rem;
  line-height: 1.65;
}

.onboarding-v2-privacy svg {
  flex: 0 0 auto;
  color: #2bbe91;
  margin-top: 1px;
}

.onboarding-v2-permission .permission-footer {
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.onboarding-v2-permission .permission-footer .btn {
  min-width: 145px;
}

.daily-welcome-v2-overlay {
  background: radial-gradient(circle at 15% 12%, rgba(43, 190, 145, .12), transparent 28%), radial-gradient(circle at 90% 90%, rgba(139, 125, 246, .19), transparent 35%), rgba(8, 13, 24, .8);
}

.daily-welcome-v2-card {
  width: min(545px, 100%);
  padding: 28px;
  color: #eaf0f7;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 25px;
  background: radial-gradient(circle at 50% 0, rgba(139, 125, 246, .15), transparent 32%), linear-gradient(145deg, #182136, #0e1627);
  box-shadow: 0 32px 90px rgba(2, 6, 23, .43);
}

.daily-welcome-v2-visual {
  position: relative;
  display: grid;
  width: 83px;
  height: 83px;
  margin: 0 auto 13px;
  place-items: center;
  color: #f0bd5d;
  border: 1px solid rgba(231, 166, 63, .16);
  border-radius: 25px;
  background: rgba(231, 166, 63, .085);
}

.daily-welcome-v2-visual>i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bbe91;
  box-shadow: 0 0 0 5px rgba(43, 190, 145, .08);
}

.daily-welcome-v2-visual>i:nth-child(2) {
  inset-inline-start: -3px;
  top: 19px;
}

.daily-welcome-v2-visual>i:nth-child(3) {
  inset-inline-end: 1px;
  bottom: 3px;
  background: #8b7df6;
  box-shadow: 0 0 0 5px rgba(139, 125, 246, .08);
}

.daily-welcome-v2-visual>i:nth-child(4) {
  inset-inline-end: 0;
  top: -5px;
  background: #ed7087;
  box-shadow: 0 0 0 5px rgba(237, 112, 135, .07);
}

.daily-welcome-v2-eyebrow {
  display: block;
  color: #55cba3;
  font-size: .6rem;
  font-weight: 850;
}

.daily-welcome-v2-card h1 {
  margin: 4px 0 6px;
  color: #f1f5f9;
  font-size: 1.42rem;
  line-height: 1.5;
}

.daily-welcome-v2-card>p {
  max-width: 440px;
  margin: 0 auto;
  color: #8390a4;
  font-size: .66rem;
  line-height: 1.8;
}

.daily-welcome-v2-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 9px;
}

.daily-welcome-v2-summary article {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 11px;
  background: rgba(148, 163, 184, .025);
  text-align: start;
}

.daily-welcome-v2-summary article>span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #9d92ee;
  border-radius: 9px;
  background: rgba(139, 125, 246, .08);
}

.daily-welcome-v2-summary article>div {
  display: grid;
  gap: 1px;
}

.daily-welcome-v2-summary strong {
  color: #e3e9f1;
  font-size: .75rem;
}

.daily-welcome-v2-summary small {
  color: #718096;
  font-size: .51rem;
}

.daily-welcome-v2-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 9px 10px;
  color: #7b889c;
  border-radius: 9px;
  background: rgba(139, 125, 246, .035);
  font-size: .52rem;
  line-height: 1.6;
  text-align: start;
}

.daily-welcome-v2-tip svg {
  flex: 0 0 auto;
  color: #a69bf1;
  margin-top: 1px;
}

.daily-welcome-v2-card>.btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 13px;
}

html.light .onboarding-v2-card,
html.light .daily-welcome-v2-card {
  color: #1b273a;
  border-color: #dfe5ee;
  background: radial-gradient(circle at 50% 0, rgba(139, 125, 246, .1), transparent 30%), linear-gradient(145deg, #fff, #f5f7fb);
  box-shadow: 0 28px 80px rgba(30, 41, 59, .22);
}

html.light .onboarding-v2-aside {
  background: radial-gradient(circle at 30% 20%, rgba(43, 190, 145, .11), transparent 32%), radial-gradient(circle at 100% 100%, rgba(139, 125, 246, .14), transparent 42%), #f7f9fd;
}

html.light .onboarding-v2-brand,
html.light .onboarding-v2-aside h2,
html.light .onboarding-v2-header h1,
html.light .onboarding-v2-permission-copy h1,
html.light .onboarding-v2-setup .first-run-goal b,
html.light .onboarding-v2-setup .first-run-field b,
html.light .onboarding-v2-benefits strong,
html.light .daily-welcome-v2-card h1,
html.light .daily-welcome-v2-summary strong {
  color: #1b273a;
}

html.light .onboarding-v2-aside p,
html.light .onboarding-v2-header p,
html.light .onboarding-v2-permission-copy>p,
html.light .daily-welcome-v2-card>p {
  color: #64748b;
}

html.light .onboarding-v2-setup .first-run-goal,
html.light .onboarding-v2-setup .first-run-field,
html.light .onboarding-v2-benefits article,
html.light .daily-welcome-v2-summary article {
  border-color: #e1e6ee;
  background: rgba(248, 250, 252, .8);
}

html.light .onboarding-v2-setup .first-run-field .form-input {
  color: #273348;
  border-color: #dfe4ec;
  background: #fff;
}

@media (max-width:760px) {
  .onboarding-v2-overlay {
    align-items: flex-end;
    padding: 10px;
  }

  .onboarding-v2-setup {
    width: 100%;
    max-height: calc(100dvh - 20px);
    grid-template-columns: 1fr;
    border-radius: 23px 23px 13px 13px;
  }

  .onboarding-v2-aside {
    display: none;
  }

  .onboarding-v2-content {
    padding: 17px 15px 14px;
  }

  .onboarding-v2-mobile-icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    place-items: center;
    color: #a89ef5;
    border-radius: 11px;
    background: rgba(139, 125, 246, .09);
  }

  .onboarding-v2-permission {
    width: 100%;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    padding: 17px 15px 14px;
    border-radius: 23px 23px 13px 13px;
  }

  .onboarding-v2-permission-body {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 15px 0 12px;
  }

  .onboarding-v2-permission-visual {
    width: 110px;
    height: 110px;
    border-radius: 31px;
  }

  .onboarding-v2-permission-visual>span {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .onboarding-v2-permission-visual>div {
    display: none;
  }

  .onboarding-v2-permission-copy {
    text-align: center;
  }

  .onboarding-v2-permission-copy h1 {
    font-size: 1.1rem;
  }

  .onboarding-v2-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .onboarding-v2-benefits article {
    align-items: center;
    flex-direction: column;
    padding: 8px 5px;
    text-align: center;
  }

  .onboarding-v2-benefits small {
    display: none;
  }
}

@media (max-width:520px) {
  .onboarding-v2-content {
    gap: 10px;
  }

  .onboarding-v2-header h1 {
    font-size: 1.05rem;
  }

  .onboarding-v2-header p {
    font-size: .56rem;
  }

  .onboarding-v2-setup .first-run-goals {
    gap: 6px;
  }

  .onboarding-v2-setup .first-run-goal {
    min-height: 58px;
    padding: 7px;
    gap: 6px;
  }

  .onboarding-v2-setup .first-run-goal>span {
    width: 30px;
    height: 30px;
  }

  .onboarding-v2-setup .first-run-goal small {
    display: none;
  }

  .onboarding-v2-setup .first-run-fields {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .onboarding-v2-setup .first-run-field:first-child {
    grid-column: auto !important;
    grid-template-columns: auto 1fr 105px;
  }

  .onboarding-v2-setup .first-run-field:first-child .form-input {
    width: 105px;
  }

  .onboarding-v2-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .onboarding-v2-footer>span {
    justify-content: center;
  }

  .onboarding-v2-footer .notification-onboarding-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .onboarding-v2-footer .btn {
    width: 100%;
    padding-inline: 7px;
  }

  .onboarding-v2-permission .permission-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .onboarding-v2-permission .permission-footer .btn {
    min-width: 0;
    padding-inline: 7px;
    font-size: .56rem;
  }

  .daily-welcome-v2-overlay {
    align-items: flex-end;
    padding: 10px;
  }

  .daily-welcome-v2-card {
    padding: 21px 15px 15px;
    border-radius: 23px 23px 13px 13px;
  }

  .daily-welcome-v2-card h1 {
    font-size: 1.18rem;
  }

  .daily-welcome-v2-summary {
    margin-top: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Calendar planning command center — 2026
══════════════════════════════════════════════════════════════ */
.calendar-v4-page {
  display: grid;
  gap: 14px;
  padding-bottom: 24px;
}

.calendar-v4-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  overflow: hidden;
  padding: 27px 29px 18px;
  color: #eef2f8;
  border: 1px solid rgba(139, 125, 246, .17);
  border-radius: 25px;
  background: radial-gradient(circle at 5% 4%, rgba(43, 190, 145, .13), transparent 29%), radial-gradient(circle at 93% 100%, rgba(139, 125, 246, .25), transparent 40%), linear-gradient(145deg, #192238, #0d1627);
  box-shadow: 0 22px 60px rgba(2, 6, 23, .2);
}

.calendar-v4-hero::after {
  position: absolute;
  width: 235px;
  height: 235px;
  opacity: .32;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 50%;
  content: '';
  inset-inline-end: -96px;
  top: -127px;
  box-shadow: 0 0 0 38px rgba(255, 255, 255, .016), 0 0 0 76px rgba(255, 255, 255, .01);
  pointer-events: none;
}

.calendar-v4-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.calendar-v4-icon {
  display: grid;
  width: 53px;
  height: 53px;
  flex: 0 0 auto;
  place-items: center;
  color: #bbb2ff;
  border: 1px solid rgba(139, 125, 246, .21);
  border-radius: 16px;
  background: rgba(139, 125, 246, .12);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .13);
}

.calendar-v4-heading>div {
  display: grid;
  gap: 3px;
}

.calendar-v4-heading small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: #5bd0a8;
  font-size: .65rem;
  font-weight: 850;
}

.calendar-v4-heading h2 {
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  line-height: 1.45;
  font-weight: 950;
}

.calendar-v4-heading p {
  max-width: 730px;
  margin: 0;
  color: #8f9caf;
  font-size: .72rem;
  line-height: 1.75;
}

.calendar-v4-add {
  position: relative;
  z-index: 1;
  align-self: start;
  justify-content: center;
  min-width: 155px;
}

.calendar-v4-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.calendar-v4-metrics article {
  --tone: 139, 125, 246;
  display: grid;
  min-height: 75px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(8px);
}

.calendar-v4-metrics article.is-blue {
  --tone: 76, 154, 239;
}

.calendar-v4-metrics article.is-success {
  --tone: 43, 190, 145;
}

.calendar-v4-metrics article.is-warning {
  --tone: 231, 166, 63;
}

.calendar-v4-metrics article>span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 10px;
  background: rgba(var(--tone), .095);
}

.calendar-v4-metrics article>div {
  display: grid;
  gap: 1px;
}

.calendar-v4-metrics small {
  color: #8290a5;
  font-size: .55rem;
  font-weight: 750;
}

.calendar-v4-metrics strong {
  color: #eef3f8;
  font-size: 1rem;
  line-height: 1;
  font-weight: 950;
}

.calendar-v4-metrics strong b {
  color: #8390a4;
  font-size: .55rem;
}

.calendar-v4-metrics em {
  color: #69788e;
  font-size: .49rem;
  font-style: normal;
}

.calendar-v4-week-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 1px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .085);
}

.calendar-v4-week-day {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding: 8px 6px;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: .18s ease;
}

.calendar-v4-week-day:hover {
  border-color: rgba(139, 125, 246, .2);
  background: rgba(139, 125, 246, .07);
  transform: translateY(-1px);
}

.calendar-v4-week-day.is-today {
  border-color: rgba(43, 190, 145, .22);
  background: rgba(43, 190, 145, .06);
}

.calendar-v4-week-day.is-selected {
  border-color: rgba(139, 125, 246, .36);
  background: rgba(139, 125, 246, .12);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .04);
}

.calendar-v4-week-day span {
  overflow: hidden;
  color: #7e8ca1;
  font-size: .51rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-v4-week-day strong {
  color: #dfe6ef;
  font-size: .85rem;
  font-weight: 950;
}

.calendar-v4-week-day small {
  color: #68778d;
  font-size: .46rem;
}

.calendar-v4-controlbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 14px;
  background: rgba(17, 24, 39, .6);
}

.calendar-v4-view-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .045);
}

.calendar-v4-view-switch button,
.calendar-v4-period-nav button,
.calendar-v4-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #7c8a9f;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .58rem;
  font-weight: 800;
  transition: .18s ease;
}

.calendar-v4-view-switch button {
  min-height: 32px;
  padding: 6px 11px;
}

.calendar-v4-view-switch button:hover,
.calendar-v4-view-switch button.active {
  color: #e3defe;
  background: rgba(139, 125, 246, .13);
}

.calendar-v4-period-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.calendar-v4-period-nav button {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(148, 163, 184, .08);
  background: rgba(148, 163, 184, .025);
}

.calendar-v4-period-nav button:hover {
  color: #aaa0f5;
  border-color: rgba(139, 125, 246, .2);
}

.calendar-v4-period-nav strong {
  min-width: 160px;
  color: #dfe5ed;
  font-size: .73rem;
  text-align: center;
}

.calendar-v4-today {
  min-height: 33px;
  padding: 6px 11px;
  color: #9b91ec;
  border: 1px solid rgba(139, 125, 246, .12);
  background: rgba(139, 125, 246, .055);
}

.calendar-v4-today:hover {
  border-color: rgba(139, 125, 246, .25);
  background: rgba(139, 125, 246, .1);
}

.calendar-v4-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 335px;
  align-items: start;
  gap: 12px;
}

.calendar-v4-page .calendar-shell-card {
  overflow: hidden;
  padding: 14px !important;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(21, 29, 46, .9), rgba(13, 20, 34, .84));
  box-shadow: 0 16px 42px rgba(2, 6, 23, .1);
}

.calendar-v4-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
}

.calendar-v4-panel-heading>div {
  display: grid;
  gap: 2px;
}

.calendar-v4-panel-heading small {
  color: #9185ed;
  font-size: .54rem;
  font-weight: 850;
}

.calendar-v4-panel-heading h3 {
  margin: 0;
  color: #e3e9f1;
  font-size: .77rem;
  font-weight: 900;
}

.calendar-v4-panel-heading>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6f7e93;
  font-size: .5rem;
}

.calendar-v4-panel-heading i {
  width: 6px;
  height: 6px;
  margin-inline-start: 4px;
  border-radius: 50%;
  background: #2bbe91;
}

.calendar-v4-panel-heading i.selected {
  background: #8b7df6;
}

.calendar-v4-scroll {
  width: 100%;
  min-width: 0;
}

.calendar-v4-page .calendar-header-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 6px;
  color: #77859a;
  font-size: .54rem;
  font-weight: 800;
  text-align: center;
}

.calendar-v4-page .calendar-header-grid>div {
  padding: 5px;
}

.calendar-v4-page .calendar-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.calendar-v4-page .calendar-day-cell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 103px !important;
  flex-direction: column;
  overflow: hidden;
  padding: 8px !important;
  border: 1px solid rgba(148, 163, 184, .07);
  border-radius: 12px !important;
  outline: none;
  background: rgba(148, 163, 184, .018) !important;
  cursor: pointer;
  transition: .18s ease;
}

.calendar-v4-page .calendar-day-cell:hover,
.calendar-v4-page .calendar-day-cell:focus-visible {
  border-color: rgba(139, 125, 246, .25);
  background: rgba(139, 125, 246, .055) !important;
  transform: translateY(-1px);
}

.calendar-v4-page .calendar-day-cell.other-month {
  opacity: .43;
}

.calendar-v4-page .calendar-day-cell.today {
  border-color: rgba(43, 190, 145, .3);
  background: rgba(43, 190, 145, .05) !important;
}

.calendar-v4-page .calendar-day-cell.active-day {
  border-color: rgba(139, 125, 246, .45);
  background: rgba(139, 125, 246, .075) !important;
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .055);
}

.calendar-v4-page .calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.calendar-v4-page .calendar-day-number {
  color: #dce3ed;
  font-size: .67rem;
  font-weight: 900;
}

.calendar-v4-page .calendar-month-label {
  color: #77859a;
  font-size: .44rem;
}

.calendar-v4-page .calendar-day-name {
  overflow: hidden;
  color: #647287;
  font-size: .43rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-v4-page .calendar-day-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  color: #aaa0f4;
  border-radius: 6px;
  background: rgba(139, 125, 246, .09);
  font-size: .47rem;
  font-weight: 900;
}

.calendar-v4-page .calendar-tasks-container {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  margin-top: 7px;
  overflow: hidden;
}

.calendar-v4-page .calendar-task-tag {
  overflow: hidden;
  padding: 3px 5px;
  color: var(--task-color);
  border-inline-start: 2px solid var(--task-color);
  border-radius: 5px;
  outline: none;
  background: var(--task-bg);
  font-size: .47rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-v4-page .calendar-task-tag:hover,
.calendar-v4-page .calendar-task-tag:focus-visible {
  filter: brightness(1.2);
}

.calendar-v4-page .calendar-task-tag.completed {
  opacity: .5;
  text-decoration: line-through;
}

.calendar-v4-page .calendar-task-more {
  color: #6f7d91;
  font-size: .44rem;
  font-weight: 700;
}

.calendar-v4-page .calendar-dots-container {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: auto;
}

.calendar-v4-page .calendar-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.calendar-v4-agenda {
  position: sticky;
  top: 14px;
  min-width: 0;
}

.calendar-v4-page .calendar-selected-card {
  overflow: hidden;
  padding: 15px !important;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(21, 29, 46, .92), rgba(13, 20, 34, .88));
  box-shadow: 0 16px 42px rgba(2, 6, 23, .1);
}

.calendar-selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 11px;
}

.calendar-selected-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.calendar-selected-heading>span {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  place-items: center;
  color: #a89df4;
  border-radius: 10px;
  background: rgba(139, 125, 246, .09);
}

.calendar-selected-heading>div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.calendar-selected-heading small {
  color: #8074dc;
  font-size: .48rem;
  font-weight: 850;
}

.calendar-selected-heading h3 {
  overflow: hidden;
  margin: 0;
  color: #e2e8f0;
  font-size: .68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-selected-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.calendar-v4-secondary-action,
.calendar-v4-primary-action {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: .5rem;
  font-weight: 800;
}

.calendar-v4-secondary-action {
  color: #958be7;
  border: 1px solid rgba(139, 125, 246, .12);
  background: rgba(139, 125, 246, .045);
}

.calendar-v4-primary-action {
  color: #fff;
  border: 1px solid #7669db;
  background: linear-gradient(135deg, #7669db, #5d50cb);
}

.calendar-v4-secondary-action:hover {
  background: rgba(139, 125, 246, .1);
}

.calendar-v4-primary-action:hover {
  filter: brightness(1.08);
}

.calendar-selected-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 11px;
}

.calendar-selected-summary article {
  display: grid;
  gap: 1px;
  padding: 7px 4px;
  border: 1px solid rgba(148, 163, 184, .07);
  border-radius: 8px;
  background: rgba(148, 163, 184, .025);
  text-align: center;
}

.calendar-selected-summary strong {
  color: #dce3ed;
  font-size: .68rem;
  font-weight: 950;
}

.calendar-selected-summary small {
  color: #6d7b90;
  font-size: .42rem;
}

.calendar-selected-summary .open strong {
  color: #e7a63f;
}

.calendar-selected-summary .done strong {
  color: #2bbe91;
}

.calendar-selected-summary .scheduled strong {
  color: #8b7df6;
}

.calendar-selected-summary .worship strong {
  color: #9b6fe8;
}

.calendar-selected-tasks-list {
  display: grid;
  gap: 6px;
  max-height: 460px;
  overflow-y: auto;
  padding-inline-end: 2px;
}

.calendar-selected-task-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
  padding: 9px !important;
  border: 1px solid rgba(148, 163, 184, .075) !important;
  border-radius: 10px !important;
  outline: none;
  background: rgba(148, 163, 184, .025) !important;
  cursor: pointer;
  transition: .18s ease;
}

.calendar-selected-task-item:hover,
.calendar-selected-task-item:focus-visible {
  border-color: rgba(139, 125, 246, .22) !important;
  background: rgba(139, 125, 246, .055) !important;
  transform: translateY(-1px);
}

.calendar-selected-task-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--task-color);
  border-radius: 8px;
  background: var(--task-bg);
}

.calendar-selected-task-copy {
  display: grid !important;
  min-width: 0;
  gap: 2px !important;
}

.calendar-selected-task-copy strong {
  overflow: hidden;
  color: #dce3ed;
  font-size: .58rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-selected-task-copy strong.completed {
  opacity: .55;
  text-decoration: line-through;
}

.calendar-selected-task-copy>span {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #6f7d91;
  font-size: .45rem;
}

.calendar-selected-task-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.calendar-selected-task-meta span {
  padding: 3px 6px;
  color: var(--task-color);
  border-radius: 6px;
  background: var(--task-bg);
  font-size: .44rem;
  font-weight: 850;
}

.calendar-selected-task-meta small {
  color: #69778b;
  font-size: .4rem;
}

.calendar-v4-empty {
  display: grid;
  min-height: 260px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}

.calendar-v4-empty>span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #9c91ec;
  border-radius: 14px;
  background: rgba(139, 125, 246, .09);
}

.calendar-v4-empty strong {
  color: #dfe5ed;
  font-size: .67rem;
}

.calendar-v4-empty p {
  max-width: 230px;
  margin: 0;
  color: #6f7d91;
  font-size: .52rem;
  line-height: 1.7;
}

.calendar-v4-empty button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 7px 10px;
  color: #a89df2;
  border: 1px solid rgba(139, 125, 246, .14);
  border-radius: 8px;
  background: rgba(139, 125, 246, .055);
  cursor: pointer;
  font: inherit;
  font-size: .51rem;
  font-weight: 800;
}

.calendar-selected-times-timeline {
  max-height: 460px !important;
  overflow-y: auto !important;
  padding-inline-end: 3px !important;
}

.calendar-timeline-slot-item {
  margin-bottom: 5px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: .53rem !important;
}

.calendar-timeline-slot-item:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

html.light .calendar-v4-hero {
  color: #1b273a;
  border-color: #dfe5ee;
  background: radial-gradient(circle at 5% 4%, rgba(43, 190, 145, .1), transparent 29%), radial-gradient(circle at 93% 100%, rgba(139, 125, 246, .18), transparent 40%), linear-gradient(145deg, #fff, #f3f6fb);
  box-shadow: 0 20px 52px rgba(71, 85, 105, .1);
}

.light .calendar-v4-heading h2,
.light .calendar-v4-metrics strong,
.light .calendar-v4-week-day strong {
  color: #1b273a;
}

.light .calendar-v4-heading p {
  color: #64748b;
}

.light .calendar-v4-metrics article,
.light .calendar-v4-week-day {
  border-color: #e5e9ef;
  background: rgba(255, 255, 255, .68);
}

html.light .calendar-v4-controlbar,
html.light .calendar-v4-page .calendar-shell-card,
html.light .calendar-v4-page .calendar-selected-card {
  border-color: #e0e5ed;
  background: linear-gradient(145deg, #fff, #f7f9fc);
  box-shadow: 0 14px 36px rgba(71, 85, 105, .07);
}

.light .calendar-v4-period-nav strong,
.light .calendar-v4-panel-heading h3,
.light .calendar-selected-heading h3,
.light .calendar-selected-summary strong,
.light .calendar-selected-task-copy strong,
.light .calendar-v4-empty strong {
  color: #233047;
}

.light .calendar-v4-page .calendar-day-cell {
  border-color: #e8ebf1;
  background: #fafbfe !important;
}

.light .calendar-v4-page .calendar-day-number {
  color: #334155;
}

.light .calendar-selected-task-item {
  border-color: #e8ebf1 !important;
  background: #fff !important;
}

.light .calendar-v4-view-switch button.active {
  color: #5e50c8;
  background: #eeebff;
}

.light .calendar-v4-today {
  color: #5e50c8;
  border-color: #ded8fb;
  background: #f3f0ff;
}

@media (max-width:1200px) {
  .calendar-v4-workspace {
    grid-template-columns: 1fr;
  }

  .calendar-v4-agenda {
    position: static;
  }

  .calendar-selected-tasks-list {
    max-height: none;
  }

  .calendar-v4-empty {
    min-height: 180px;
  }
}

@media (max-width:760px) {
  .calendar-v4-hero {
    grid-template-columns: 1fr;
    padding: 20px 17px 15px;
  }

  .calendar-v4-add {
    width: 100%;
  }

  .calendar-v4-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-v4-controlbar {
    grid-template-columns: 1fr auto;
  }

  .calendar-v4-period-nav {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .calendar-v4-view-switch {
    grid-row: 2;
  }

  .calendar-v4-today {
    grid-row: 2;
  }

  .calendar-v4-page .calendar-shell-card {
    padding: 10px !important;
  }

  .calendar-v4-panel-heading {
    align-items: flex-start;
  }

  .calendar-v4-panel-heading>span {
    display: none;
  }
}

@media (max-width:560px) {
  .calendar-v4-page {
    gap: 10px;
  }

  .calendar-v4-heading {
    gap: 9px;
  }

  .calendar-v4-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }

  .calendar-v4-heading h2 {
    font-size: 1.07rem;
  }

  .calendar-v4-heading p {
    font-size: .58rem;
  }

  .calendar-v4-metrics {
    gap: 5px;
  }

  .calendar-v4-metrics article {
    min-height: 65px;
    grid-template-columns: auto 1fr;
    padding: 8px;
  }

  .calendar-v4-metrics article>span {
    width: 30px;
    height: 30px;
  }

  .calendar-v4-metrics em {
    display: none;
  }

  .calendar-v4-week-strip {
    gap: 3px;
  }

  .calendar-v4-week-day {
    padding: 6px 2px;
  }

  .calendar-v4-week-day span {
    font-size: .43rem;
  }

  .calendar-v4-week-day small {
    display: none;
  }

  .calendar-v4-controlbar {
    gap: 6px;
  }

  .calendar-v4-period-nav strong {
    min-width: 130px;
    font-size: .65rem;
  }

  .calendar-v4-view-switch button {
    padding-inline: 8px;
  }

  .calendar-v4-today {
    padding-inline: 8px;
  }

  .calendar-v4-scroll {
    overflow: visible !important;
  }

  .calendar-v4-page .calendar-header-grid,
  .calendar-v4-page .calendar-grid {
    min-width: 0 !important;
  }

  .calendar-v4-page .calendar-header-grid .day-full {
    display: none;
  }

  .calendar-v4-page .calendar-header-grid .day-short {
    display: inline;
  }

  .calendar-v4-page .calendar-grid {
    gap: 3px;
  }

  .calendar-v4-page .calendar-day-cell {
    min-height: 67px !important;
    padding: 5px 3px !important;
    border-radius: 9px !important;
  }

  .calendar-v4-page .calendar-day-number {
    font-size: .55rem;
  }

  .calendar-v4-page .calendar-month-label,
  .calendar-v4-page .calendar-day-name,
  .calendar-v4-page .calendar-day-count,
  .calendar-v4-page .calendar-tasks-container {
    display: none;
  }

  .calendar-v4-page .calendar-dots-container {
    display: flex;
  }

  .calendar-v4-page .calendar-day-cell.active-day {
    box-shadow: 0 0 0 2px rgba(139, 125, 246, .06);
  }

  .calendar-v4-page .calendar-selected-card {
    padding: 11px !important;
  }

  .calendar-selected-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-selected-actions {
    width: 100%;
  }

  .calendar-v4-secondary-action,
  .calendar-v4-primary-action {
    flex: 1;
  }

  .calendar-selected-summary {
    gap: 3px;
  }

  .calendar-selected-summary article {
    min-width: 0;
    padding: 7px 2px;
  }

  .calendar-selected-summary strong {
    font-size: .63rem;
  }

  .calendar-selected-summary small {
    font-size: .39rem;
    white-space: nowrap;
  }

  .calendar-routine-overview {
    gap: 9px;
    padding: 11px 10px;
    border-radius: 13px;
  }

  .calendar-routine-overview>header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .calendar-routine-overview>header>div {
    font-size: .7rem;
  }

  .calendar-routine-overview>header small {
    font-size: .53rem;
  }

  .calendar-routine-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-routine-legend span {
    justify-content: flex-start;
    font-size: .52rem;
  }

  .calendar-routine-chips {
    margin-inline: -2px;
  }

  .calendar-routine-chips button {
    min-height: 32px;
    font-size: .54rem;
  }

  .calendar-routine-sleep-setup strong {
    font-size: .58rem;
  }

  .calendar-routine-sleep-setup small {
    font-size: .49rem;
    line-height: 1.5;
  }

  .ios-calendar-timeline-wrapper {
    max-height: 500px;
    padding: 10px 7px 10px 4px;
    border: 0;
    border-radius: 13px;
  }

  .ios-timeline-hours-col {
    width: 48px;
  }

  .ios-timeline-hour-label {
    font-size: 10px;
  }

  .ios-timeline-now-line {
    left: -48px;
  }

  .ios-now-dot {
    margin-inline-start: 43px;
  }

  .ios-timeline-event {
    padding: 5px 7px;
  }

  .ios-event-title {
    font-size: 11px;
  }

  .ios-event-time {
    font-size: 9px;
  }

  .ios-unscheduled-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    padding: 9px;
    border: 0;
    background: rgba(148, 163, 184, .04);
  }

  .calendar-selected-task-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .calendar-selected-task-meta {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   Gold & silver savings wallet
══════════════════════════════════════════════════════════════ */
.metal-wallet-page {
  display: grid;
  gap: 14px;
  padding-bottom: 28px;
}

.metal-wallet-page #metal-wallet-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.metal-wallet-loading,
.metal-wallet-fatal {
  display: grid;
  min-height: 420px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #8b7df6;
  text-align: center;
}

.metal-wallet-loading>span {
  animation: metalSpin 1s linear infinite;
}

.metal-wallet-loading strong,
.metal-wallet-fatal h2 {
  color: var(--clr-text);
  font-size: .86rem;
}

.metal-wallet-loading small,
.metal-wallet-fatal p {
  color: var(--clr-text-muted);
  font-size: .6rem;
}

.metal-wallet-fatal button {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 8px 12px;
  color: #a89ef4;
  border: 1px solid rgba(139, 125, 246, .16);
  border-radius: 9px;
  background: rgba(139, 125, 246, .06);
  cursor: pointer;
  font: inherit;
  font-size: .58rem;
  font-weight: 800;
}

@keyframes metalSpin {
  to {
    transform: rotate(360deg);
  }
}

.metal-wallet-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .52fr);
  align-items: center;
  gap: 25px;
  overflow: hidden;
  padding: 28px 30px;
  border: 1px solid rgba(210, 168, 73, .2);
  border-radius: 25px;
  background: radial-gradient(circle at 4% 0, rgba(231, 179, 67, .17), transparent 32%), radial-gradient(circle at 94% 105%, rgba(139, 125, 246, .2), transparent 39%), linear-gradient(145deg, #1b2334, #0d1525);
  box-shadow: 0 23px 64px rgba(2, 6, 23, .21);
}

.metal-wallet-hero::after {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: .35;
  border: 1px solid rgba(231, 179, 67, .12);
  border-radius: 50%;
  content: '';
  inset-inline-start: -125px;
  bottom: -160px;
  box-shadow: 0 0 0 38px rgba(231, 179, 67, .018), 0 0 0 76px rgba(231, 179, 67, .011);
  pointer-events: none;
}

.metal-wallet-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.metal-wallet-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: #ddb455;
  font-size: .64rem;
  font-weight: 850;
}

.metal-wallet-hero h1 {
  margin: 0;
  color: #f7f5ee;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.45;
  font-weight: 950;
}

.metal-wallet-hero p {
  max-width: 690px;
  margin: 0;
  color: #8f9bae;
  font-size: .73rem;
  line-height: 1.8;
}

.metal-wallet-live {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 9px;
  color: #94a1b3;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  font-size: .5rem;
}

.metal-wallet-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bbe91;
  box-shadow: 0 0 0 4px rgba(43, 190, 145, .08);
}

.metal-wallet-live i.stale {
  background: #e7a63f;
  box-shadow: 0 0 0 4px rgba(231, 166, 63, .08);
}

.metal-wallet-live small {
  color: #69778c;
}

.metal-wallet-hero-value {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 17px;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(10px);
}

.metal-wallet-hero-value>small {
  color: #8996a9;
  font-size: .58rem;
}

.metal-wallet-hero-value>strong {
  overflow: hidden;
  color: #f4f7fb;
  font-size: clamp(1.28rem, 2.6vw, 1.75rem);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-wallet-hero-value>span {
  width: fit-content;
  font-size: .56rem;
  font-weight: 800;
}

.metal-wallet-hero-value>div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 7px;
}

.metal-wallet-hero-value button {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  color: #fff;
  border: 1px solid #a9822f;
  border-radius: 9px;
  background: linear-gradient(135deg, #c4993e, #a37625);
  cursor: pointer;
  font: inherit;
  font-size: .55rem;
  font-weight: 850;
}

.metal-wallet-hero-value button+button {
  color: #d5c7a3;
  border-color: rgba(218, 176, 81, .16);
  background: rgba(218, 176, 81, .055);
}

.positive {
  color: #2bbe91 !important;
}

.negative {
  color: #ed7087 !important;
}

.metal-wallet-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 14px;
  background: rgba(17, 24, 39, .6);
}

.metal-wallet-tabs button {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 11px;
  color: #758399;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .57rem;
  font-weight: 800;
  transition: .18s ease;
}

.metal-wallet-tabs button:hover,
.metal-wallet-tabs button.active {
  color: #e3c779;
  background: rgba(218, 176, 81, .09);
}

.metal-wallet-tabs button b {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 6px;
  background: rgba(218, 176, 81, .09);
  font-size: .46rem;
}

.metal-wallet-tabs #metal-refresh-prices {
  margin-inline-start: auto;
  color: #9287e6;
}

.metal-wallet-tabs #metal-refresh-prices.loading svg {
  animation: metalSpin 1s linear infinite;
}

.metal-wallet-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.metal-wallet-kpi {
  --tone: 139, 125, 246;
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(22, 30, 47, .91), rgba(13, 20, 34, .86));
  box-shadow: 0 14px 34px rgba(2, 6, 23, .08);
}

.metal-wallet-kpi.green {
  --tone: 43, 190, 145;
}

.metal-wallet-kpi.rose {
  --tone: 237, 112, 135;
}

.metal-wallet-kpi.gold {
  --tone: 218, 176, 81;
}

.metal-wallet-kpi.silver {
  --tone: 165, 177, 195;
}

.metal-wallet-kpi>span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 12px;
  background: rgba(var(--tone), .09);
}

.metal-wallet-kpi>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.metal-wallet-kpi small {
  color: #7a899f;
  font-size: .56rem;
  font-weight: 700;
}

.metal-wallet-kpi strong {
  overflow: hidden;
  color: #e8edf4;
  font-size: .93rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-wallet-kpi em {
  color: #66758b;
  font-size: .48rem;
  font-style: normal;
}

.metal-wallet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 11px;
}

.metal-wallet-panel {
  overflow: hidden;
  padding: 17px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(21, 29, 46, .91), rgba(13, 20, 34, .86));
  box-shadow: 0 15px 38px rgba(2, 6, 23, .08);
}

.metal-wallet-panel>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.metal-wallet-panel>header>div {
  display: grid;
  gap: 2px;
}

.metal-wallet-panel>header span {
  color: #bd9847;
  font-size: .54rem;
  font-weight: 850;
}

.metal-wallet-panel>header h2 {
  margin: 0;
  color: #e5ebf2;
  font-size: .8rem;
  font-weight: 900;
}

.metal-wallet-panel>header>small {
  color: #68768b;
  font-size: .49rem;
}

.metal-wallet-panel>header>button {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #aa8640;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .52rem;
  font-weight: 800;
}

.metal-spot-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metal-spot-cards article {
  --tone: 218, 176, 81;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(var(--tone), .1);
  border-radius: 13px;
  background: rgba(var(--tone), .035);
}

.metal-spot-cards article.silver {
  --tone: 165, 177, 195;
}

.metal-spot-cards article>span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 11px;
  background: rgba(var(--tone), .09);
}

.metal-spot-cards article>div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.metal-spot-cards small {
  color: #758399;
  font-size: .5rem;
}

.metal-spot-cards strong {
  overflow: hidden;
  color: #e6ebf2;
  font-size: .84rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-spot-cards em {
  color: #68768a;
  font-size: .44rem;
  font-style: normal;
}

.metal-spot-cards aside {
  display: grid;
  gap: 2px;
  padding-inline-start: 9px;
  border-inline-start: 1px solid rgba(148, 163, 184, .08);
  text-align: end;
}

.metal-spot-cards aside b {
  color: #aeb8c7;
  font-size: .55rem;
  white-space: nowrap;
}

.metal-purity-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.metal-purity-strip span {
  display: grid;
  gap: 2px;
  padding: 7px;
  color: #6d7b90;
  border-radius: 8px;
  background: rgba(148, 163, 184, .025);
  font-size: .44rem;
}

.metal-purity-strip b {
  overflow: hidden;
  color: #b8c1ce;
  font-size: .5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-price-unavailable {
  display: grid;
  min-height: 148px;
  place-content: center;
  justify-items: center;
  gap: 5px;
  color: #e7a63f;
  text-align: center;
}

.metal-price-unavailable strong {
  color: #dce3ed;
  font-size: .65rem;
}

.metal-price-unavailable span {
  color: #6f7d91;
  font-size: .5rem;
}

.metal-allocation-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 15px;
}

.metal-allocation-ring {
  --gold: 50%;
  position: relative;
  display: grid;
  width: 135px;
  height: 135px;
  margin: auto;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#d6ad50 var(--gold), #9ca9bb 0);
}

.metal-allocation-ring::after {
  position: absolute;
  width: 101px;
  height: 101px;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 50%;
  background: #121b2c;
  content: '';
}

.metal-allocation-ring>div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  text-align: center;
}

.metal-allocation-ring strong {
  color: #e7c873;
  font-size: 1.15rem;
  font-weight: 950;
}

.metal-allocation-ring small {
  color: #758399;
  font-size: .47rem;
}

.metal-allocation-list {
  display: grid;
  gap: 6px;
}

.metal-allocation-list article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 9px;
  background: rgba(148, 163, 184, .025);
}

.metal-allocation-list i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6ad50;
}

.metal-allocation-list i.silver {
  background: #9ca9bb;
}

.metal-allocation-list article>div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.metal-allocation-list span {
  color: #758399;
  font-size: .47rem;
}

.metal-allocation-list strong {
  overflow: hidden;
  color: #d7dee8;
  font-size: .55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-allocation-list article>b {
  color: #8996aa;
  font-size: .55rem;
}

.metal-recent-panel {
  padding-bottom: 13px;
}

.metal-holding-compact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.metal-holding-compact {
  --tone: 218, 176, 81;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(var(--tone), .09);
  border-radius: 11px;
  background: rgba(var(--tone), .025);
}

.metal-holding-compact.silver {
  --tone: 165, 177, 195;
}

.metal-holding-compact>span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 9px;
  background: rgba(var(--tone), .08);
}

.metal-holding-compact>div:nth-of-type(1) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.metal-holding-compact>div>strong {
  overflow: hidden;
  color: #dce3ed;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-holding-compact>div>small {
  overflow: hidden;
  color: #6e7c91;
  font-size: .44rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-holding-compact>aside {
  display: grid;
  gap: 1px;
  text-align: end;
}

.metal-holding-compact>aside strong {
  color: #cfd7e2;
  font-size: .58rem;
}

.metal-holding-compact>aside small {
  font-size: .43rem;
}

.metal-holding-actions {
  position: absolute;
  display: none;
  gap: 3px;
  inset-inline-end: 6px;
  top: 5px;
}

.metal-holding-compact:hover .metal-holding-actions {
  display: flex;
}

.metal-holding-actions button,
.metal-table-actions button {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #8693a6;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 7px;
  background: #182136;
  cursor: pointer;
}

.metal-holding-actions button:last-child,
.metal-table-actions button:last-child {
  color: #ed7087;
}

.metal-wallet-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px;
  color: #748297;
  border: 1px solid rgba(218, 176, 81, .09);
  border-radius: 10px;
  background: rgba(218, 176, 81, .025);
  font-size: .5rem;
  line-height: 1.7;
}

.metal-wallet-note svg {
  flex: 0 0 auto;
  color: #c29a43;
}

.metal-wallet-empty {
  display: grid;
  min-height: 220px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: #c29a43;
  text-align: center;
}

.metal-wallet-empty h3 {
  margin: 0;
  color: #dfe5ed;
  font-size: .68rem;
}

.metal-wallet-empty p {
  max-width: 330px;
  margin: 0;
  color: #6f7d91;
  font-size: .51rem;
  line-height: 1.7;
}

.metal-wallet-empty button {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 8px 11px;
  color: #e5cf8d;
  border: 1px solid rgba(218, 176, 81, .15);
  border-radius: 8px;
  background: rgba(218, 176, 81, .055);
  cursor: pointer;
  font: inherit;
  font-size: .52rem;
  font-weight: 800;
}

.metal-holdings-panel {
  padding: 0;
}

.metal-holdings-toolbar {
  align-items: center !important;
  margin: 0 !important;
  padding: 16px 17px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.metal-holdings-toolbar>div:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.metal-filter {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(148, 163, 184, .035);
}

.metal-filter button {
  min-height: 29px;
  padding: 5px 9px;
  color: #718096;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .5rem;
  font-weight: 800;
}

.metal-filter button.active {
  color: #e1c46f;
  background: rgba(218, 176, 81, .09);
}

.metal-primary-action {
  display: flex !important;
  min-height: 35px;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  color: #fff !important;
  border: 1px solid #ae8530 !important;
  border-radius: 9px;
  background: linear-gradient(135deg, #c5993d, #a37625) !important;
  font-size: .53rem !important;
}

.metal-holdings-table-wrap {
  overflow-x: auto;
}

.metal-holdings-table {
  width: 100%;
  border-collapse: collapse;
}

.metal-holdings-table th {
  padding: 9px 12px;
  color: #6c7a8f;
  background: rgba(148, 163, 184, .022);
  font-size: .47rem;
  font-weight: 800;
  text-align: start;
  white-space: nowrap;
}

.metal-holdings-table td {
  padding: 10px 12px;
  color: #8491a5;
  border-top: 1px solid rgba(148, 163, 184, .065);
  font-size: .51rem;
  vertical-align: middle;
}

.metal-holdings-table td>strong {
  display: block;
  color: #cfd7e2;
  font-size: .57rem;
}

.metal-holdings-table td>small {
  display: block;
  margin-top: 2px;
  color: #68768b;
  font-size: .43rem;
}

.metal-table-name {
  --tone: 218, 176, 81;
  display: flex;
  min-width: 160px;
  align-items: center;
  gap: 8px;
}

.metal-table-name.silver {
  --tone: 165, 177, 195;
}

.metal-table-name>span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 8px;
  background: rgba(var(--tone), .08);
}

.metal-table-name>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.metal-table-name strong {
  overflow: hidden;
  max-width: 190px;
  color: #dce3ed;
  font-size: .56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-table-name small {
  color: #69778c;
  font-size: .43rem;
}

.metal-table-actions {
  display: flex;
  gap: 3px;
}

.metal-calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr);
  gap: 11px;
}

.metal-calculator-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metal-calculator-form label,
.metal-form-grid label {
  display: grid;
  gap: 5px;
}

.metal-calculator-form label>span,
.metal-form-grid label>span {
  color: #8491a5;
  font-size: .52rem;
  font-weight: 750;
}

.metal-calculator-form input,
.metal-calculator-form select,
.metal-form-grid input,
.metal-form-grid select,
.metal-form-grid textarea {
  width: 100%;
  min-height: 39px;
  box-sizing: border-box;
  padding: 8px 10px;
  color: #dce3ed;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 9px;
  outline: none;
  background: rgba(2, 6, 23, .21);
  font: inherit;
  font-size: .56rem;
}

.metal-calculator-form input:focus,
.metal-calculator-form select:focus,
.metal-form-grid input:focus,
.metal-form-grid select:focus,
.metal-form-grid textarea:focus {
  border-color: rgba(218, 176, 81, .38);
  box-shadow: 0 0 0 3px rgba(218, 176, 81, .055);
}

.metal-calculator-result {
  display: grid;
  gap: 4px;
  margin-top: 13px;
  padding: 19px;
  border: 1px solid rgba(218, 176, 81, .12);
  border-radius: 13px;
  background: radial-gradient(circle at 90% 10%, rgba(218, 176, 81, .1), transparent 32%), rgba(218, 176, 81, .025);
  text-align: center;
}

.metal-calculator-result small {
  color: #8794a8;
  font-size: .56rem;
}

.metal-calculator-result strong {
  color: #e4c66d;
  font-size: 1.35rem;
  font-weight: 950;
}

.metal-calculator-result span {
  color: #6d7b90;
  font-size: .49rem;
}

.metal-calculator-guide>span {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: #c39a43;
  border-radius: 12px;
  background: rgba(218, 176, 81, .08);
}

.metal-calculator-guide h2 {
  margin: 9px 0 7px;
  color: #e0e6ed;
  font-size: .77rem;
}

.metal-calculator-guide ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-inline-start: 20px;
  color: #8491a5;
  font-size: .53rem;
  line-height: 1.65;
}

.metal-calculator-guide p {
  margin: 12px 0 0;
  padding-top: 10px;
  color: #6d7b90;
  border-top: 1px solid rgba(148, 163, 184, .07);
  font-size: .49rem;
  line-height: 1.7;
}

.metal-modal-overlay {
  position: fixed;
  z-index: 10010;
  display: grid;
  overflow-y: auto;
  padding: 20px;
  place-items: center;
  background: rgba(5, 9, 17, .79);
  backdrop-filter: blur(9px);
  inset: 0;
}

.metal-modal {
  width: min(760px, 100%);
  overflow: hidden;
  color: #dce3ed;
  border: 1px solid rgba(218, 176, 81, .17);
  border-radius: 21px;
  background: radial-gradient(circle at 0 0, rgba(218, 176, 81, .08), transparent 27%), linear-gradient(145deg, #182136, #0e1627);
  box-shadow: 0 30px 90px rgba(2, 6, 23, .48);
}

.metal-modal>header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 17px 19px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.metal-modal>header>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #d5ac50;
  border-radius: 11px;
  background: rgba(218, 176, 81, .09);
}

.metal-modal>header>div {
  display: grid;
  gap: 2px;
}

.metal-modal>header small {
  color: #b08a3a;
  font-size: .5rem;
  font-weight: 850;
}

.metal-modal>header h2 {
  margin: 0;
  color: #edf1f6;
  font-size: .83rem;
}

.metal-modal>header>button {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #79869a;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 9px;
  background: rgba(148, 163, 184, .025);
  cursor: pointer;
}

.metal-modal-body {
  padding: 16px 19px;
}

.metal-kind-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.metal-kind-picker button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #7f8da1;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 10px;
  background: rgba(148, 163, 184, .025);
  cursor: pointer;
  font: inherit;
  font-size: .57rem;
  font-weight: 850;
}

.metal-kind-picker button.active {
  color: #e1c36c;
  border-color: rgba(218, 176, 81, .3);
  background: rgba(218, 176, 81, .075);
}

.metal-kind-picker button[data-kind="silver"].active {
  color: #bdc6d3;
  border-color: rgba(165, 177, 195, .28);
  background: rgba(165, 177, 195, .07);
}

.metal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metal-form-grid label.wide {
  grid-column: 1 / -1;
}

.metal-form-grid textarea {
  resize: vertical;
}

.metal-form-grid label>small {
  color: #66748a;
  font-size: .44rem;
  line-height: 1.5;
}

.metal-modal-error {
  margin-top: 9px;
  padding: 8px 10px;
  color: #ed8095;
  border: 1px solid rgba(237, 112, 135, .13);
  border-radius: 8px;
  background: rgba(237, 112, 135, .045);
  font-size: .5rem;
}

.metal-modal>footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 19px;
  border-top: 1px solid rgba(148, 163, 184, .08);
}

.metal-modal>footer button {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 13px;
  color: #8491a5;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 9px;
  background: rgba(148, 163, 184, .025);
  cursor: pointer;
  font: inherit;
  font-size: .54rem;
  font-weight: 800;
}

.metal-modal>footer button:last-child {
  min-width: 130px;
  color: #fff;
  border-color: #a77c27;
  background: linear-gradient(135deg, #c4973a, #9f731f);
}

.metal-modal>footer button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.metal-settings-modal {
  width: min(610px, 100%);
}

.metal-settings-intro {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 12px;
  padding: 10px 11px;
  color: #7d8a9e;
  border: 1px solid rgba(218, 176, 81, .1);
  border-radius: 9px;
  background: rgba(218, 176, 81, .03);
  font-size: .5rem;
  line-height: 1.7;
}

.metal-settings-intro svg {
  flex: 0 0 auto;
  color: #c39a43;
}

.metal-invoice-scanner {
  display: grid;
  gap: 10px;
  margin-bottom: 13px;
  padding: 12px;
  border: 1px solid rgba(139, 125, 246, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139, 125, 246, .075), rgba(218, 176, 81, .035));
}

.metal-invoice-scan-intro {
  display: flex;
  align-items: center;
  gap: 10px;
}

.metal-invoice-scan-intro>span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  color: #a89cf2;
  border-radius: 11px;
  background: rgba(139, 125, 246, .11);
}

.metal-invoice-scan-intro>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.metal-invoice-scan-intro strong {
  color: #e8ecf3;
  font-size: .62rem;
}

.metal-invoice-scan-intro small {
  color: #78869a;
  font-size: .48rem;
  line-height: 1.65;
}

.metal-invoice-scan-actions {
  display: flex;
  gap: 6px;
}

.metal-invoice-scan-actions button {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 11px;
  color: #d5cef8;
  border: 1px solid rgba(139, 125, 246, .18);
  border-radius: 9px;
  background: rgba(139, 125, 246, .075);
  cursor: pointer;
  font: inherit;
  font-size: .53rem;
  font-weight: 850;
}

.metal-invoice-scan-actions button:first-child {
  color: #fff;
  border-color: #7c6ce3;
  background: linear-gradient(135deg, #8b7df6, #6557ce);
}

.metal-invoice-scan-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

.metal-scan-progress {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 11px;
  background: rgba(2, 6, 23, .13);
}

.metal-scan-preview {
  overflow: hidden;
  width: 76px;
  height: 72px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.metal-scan-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metal-scan-progress-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.metal-scan-progress-copy strong {
  color: #dfe5ed;
  font-size: .55rem;
}

.metal-scan-progress-copy>span {
  overflow: hidden;
  color: #8794a8;
  font-size: .47rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-scan-progress-copy>div {
  overflow: hidden;
  height: 5px;
  margin: 2px 0;
  border-radius: 9px;
  background: rgba(148, 163, 184, .09);
}

.metal-scan-progress-copy i {
  display: block;
  width: 5%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b7df6, #d4ad52);
  transition: width .24s ease;
}

.metal-scan-progress-copy small {
  color: #66748a;
  font-size: .42rem;
}

.metal-scan-result {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(43, 190, 145, .13);
  border-radius: 11px;
  background: rgba(43, 190, 145, .035);
}

.metal-scan-result-head {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.metal-scan-result-head>span {
  color: #2bbe91;
}

.metal-scan-result-head>div {
  display: grid;
  gap: 2px;
}

.metal-scan-result-head strong {
  color: #dce5ea;
  font-size: .55rem;
}

.metal-scan-result-head small {
  color: #77879a;
  font-size: .45rem;
  line-height: 1.6;
}

.metal-scan-result-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.metal-scan-result-chips>span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 6px 7px;
  border-radius: 8px;
  background: rgba(148, 163, 184, .045);
}

.metal-scan-result-chips>span.review {
  background: rgba(231, 166, 63, .08);
  box-shadow: inset 0 0 0 1px rgba(231, 166, 63, .14);
}

.metal-scan-result-chips small {
  color: #718095;
  font-size: .4rem;
}

.metal-scan-result-chips b {
  overflow: hidden;
  color: #cbd4df;
  font-size: .49rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-scan-result-chips .review b {
  color: #e7b45d;
}

.metal-scan-invoice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: #758499;
  font-size: .44rem;
}

.metal-scan-invoice-meta b {
  color: #aeb9c7;
}

.metal-scan-result details {
  color: #758499;
  font-size: .44rem;
}

.metal-scan-result summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 800;
}

.metal-scan-result pre {
  max-height: 120px;
  overflow: auto;
  margin: 7px 0 0;
  padding: 8px;
  color: #909caf;
  border-radius: 8px;
  background: rgba(2, 6, 23, .2);
  font: 500 .43rem/1.75 inherit;
  direction: auto;
  white-space: pre-wrap;
}

.metal-form-grid label.metal-ocr-review>span::after {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 5px;
  padding: 2px 5px;
  color: #e7ad47;
  border-radius: 5px;
  background: rgba(231, 166, 63, .09);
  content: 'راجع';
  font-size: .39rem;
  font-weight: 900;
}

.metal-form-grid label.metal-ocr-review input,
.metal-form-grid label.metal-ocr-review select {
  border-color: rgba(231, 166, 63, .38);
  box-shadow: 0 0 0 3px rgba(231, 166, 63, .055);
}

html.light .metal-wallet-hero {
  border-color: #eadfbe;
  background: radial-gradient(circle at 4% 0, rgba(231, 179, 67, .13), transparent 32%), radial-gradient(circle at 94% 105%, rgba(139, 125, 246, .14), transparent 39%), linear-gradient(145deg, #fff, #f4f6fa);
  box-shadow: 0 20px 52px rgba(71, 85, 105, .1);
}

.light .metal-wallet-hero h1,
.light .metal-wallet-hero-value>strong,
.light .metal-wallet-kpi strong,
.light .metal-wallet-panel>header h2,
.light .metal-spot-cards strong,
.light .metal-holding-compact>div>strong,
.light .metal-holdings-table td>strong,
.light .metal-table-name strong,
.light .metal-wallet-empty h3,
.light .metal-calculator-guide h2 {
  color: #202c3e;
}

.light .metal-wallet-hero p {
  color: #64748b;
}

.light .metal-wallet-hero-value {
  border-color: #e2e6ed;
  background: rgba(255, 255, 255, .68);
}

.light .metal-wallet-tabs,
.light .metal-wallet-kpi,
.light .metal-wallet-panel {
  border-color: #e1e6ee;
  background: linear-gradient(145deg, #fff, #f7f9fc);
  box-shadow: 0 13px 34px rgba(71, 85, 105, .07);
}

.light .metal-allocation-ring::after {
  border-color: #e4e8ee;
  background: #fff;
}

.light .metal-holding-compact,
.light .metal-holdings-table th {
  background: #f8f9fc;
}

.light .metal-holdings-table td {
  border-color: #e7eaf0;
}

.light .metal-holding-actions button,
.light .metal-table-actions button {
  border-color: #e1e5ec;
  background: #fff;
}

.light .metal-calculator-form input,
.light .metal-calculator-form select,
.light .metal-form-grid input,
.light .metal-form-grid select,
.light .metal-form-grid textarea {
  color: #263247;
  border-color: #dfe4ec;
  background: #fff;
}

.light .metal-modal {
  color: #263247;
  border-color: #e5d9b7;
  background: radial-gradient(circle at 0 0, rgba(218, 176, 81, .1), transparent 27%), linear-gradient(145deg, #fff, #f5f7fb);
}

.light .metal-modal>header h2 {
  color: #202c3e;
}

.metal-form-grid label.metal-ocr-review>span::after {
  content: attr(data-ocr-review);
}

.metal-modal-overlay {
  align-items: start;
  justify-items: center;
}

.metal-modal {
  margin-block: auto;
}

.light .metal-invoice-scanner {
  border-color: #ddd8fa;
  background: linear-gradient(135deg, #f8f6ff, #fffbf1);
}

.light .metal-invoice-scan-intro strong,
.light .metal-scan-progress-copy strong,
.light .metal-scan-result-head strong {
  color: #273348;
}

.light .metal-scan-progress {
  border-color: #e4e7ed;
  background: #fff;
}

.light .metal-scan-result {
  border-color: #ccece1;
  background: #f3fcf9;
}

.light .metal-scan-result-chips>span {
  background: #fff;
}

.light .metal-scan-result pre {
  color: #59677c;
  background: #fff;
}

@media (max-width:540px) {
  .metal-invoice-scanner {
    padding: 12px;
    border-radius: 15px;
  }

  .metal-invoice-scan-intro {
    align-items: flex-start;
  }

  .metal-invoice-scan-intro strong {
    font-size: .79rem;
  }

  .metal-invoice-scan-intro small {
    font-size: .66rem;
  }

  .metal-invoice-scan-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .metal-invoice-scan-actions button {
    min-height: 43px;
    padding: 8px;
    font-size: .7rem;
  }

  .metal-scan-progress {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .metal-scan-preview {
    width: 64px;
    height: 68px;
  }

  .metal-scan-progress-copy strong {
    font-size: .72rem;
  }

  .metal-scan-progress-copy>span {
    font-size: .63rem;
  }

  .metal-scan-progress-copy small {
    font-size: .56rem;
  }

  .metal-scan-result-head strong {
    font-size: .72rem;
  }

  .metal-scan-result-head small {
    font-size: .62rem;
  }

  .metal-scan-result-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metal-scan-result-chips small {
    font-size: .55rem;
  }

  .metal-scan-result-chips b {
    font-size: .67rem;
  }

  .metal-scan-invoice-meta,
  .metal-scan-result details {
    font-size: .6rem;
  }

  .metal-scan-result pre {
    font-size: .58rem;
  }
}

@media (max-width:1100px) {
  .metal-wallet-hero {
    grid-template-columns: 1fr;
  }

  .metal-wallet-hero-value {
    max-width: none;
  }

  .metal-wallet-grid,
  .metal-calculator-layout {
    grid-template-columns: 1fr;
  }

  .metal-wallet-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:760px) {
  .metal-wallet-hero {
    padding: 21px 18px;
  }

  .metal-wallet-tabs {
    overflow-x: auto;
  }

  .metal-wallet-tabs button {
    flex: 0 0 auto;
  }

  .metal-wallet-tabs #metal-refresh-prices {
    margin-inline-start: 0;
  }

  .metal-spot-cards,
  .metal-holding-compact-list {
    grid-template-columns: 1fr;
  }

  .metal-allocation-body {
    grid-template-columns: 1fr;
  }

  .metal-holdings-toolbar {
    align-items: stretch !important;
    flex-direction: column;
  }

  .metal-holdings-toolbar>div:last-child {
    justify-content: space-between;
  }

  .metal-holdings-table,
  .metal-holdings-table tbody,
  .metal-holdings-table tr,
  .metal-holdings-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .metal-holdings-table thead {
    display: none;
  }

  .metal-holdings-table tr {
    position: relative;
    padding: 8px 10px;
    border-top: 1px solid rgba(148, 163, 184, .08);
  }

  .metal-holdings-table td {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    padding: 6px 2px;
    border: 0;
    text-align: end;
  }

  .metal-holdings-table td::before {
    color: #6e7c91;
    content: attr(data-label);
    font-size: .47rem;
    text-align: start;
  }

  .metal-holdings-table td:first-child,
  .metal-holdings-table td:last-child {
    display: block;
    text-align: start;
  }

  .metal-holdings-table td:last-child {
    position: absolute;
    inset-inline-end: 10px;
    top: 10px;
  }

  .metal-calculator-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width:540px) {

  .metal-wallet-page,
  .metal-wallet-page #metal-wallet-content {
    gap: 10px;
  }

  .metal-wallet-hero {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .metal-wallet-hero h1 {
    font-size: 1.25rem;
  }

  .metal-wallet-hero-value>div {
    grid-template-columns: 1fr;
  }

  .metal-wallet-kpis {
    gap: 5px;
  }

  .metal-wallet-kpi {
    min-height: 76px;
    padding: 10px;
    gap: 8px;
  }

  .metal-wallet-kpi>span {
    width: 34px;
    height: 34px;
  }

  .metal-wallet-kpi strong {
    font-size: .72rem;
  }

  .metal-wallet-panel {
    padding: 13px;
  }

  .metal-purity-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metal-holdings-toolbar>div:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  .metal-primary-action {
    justify-content: center;
  }

  .metal-modal-overlay {
    align-items: end;
    padding: 9px;
  }

  .metal-modal {
    max-height: calc(100dvh - 18px);
    overflow-y: auto;
    border-radius: 22px 22px 12px 12px;
  }

  .metal-modal-body {
    padding: 13px;
  }

  .metal-form-grid {
    grid-template-columns: 1fr;
  }

  .metal-form-grid label.wide {
    grid-column: auto;
  }

  .metal-modal>footer {
    position: sticky;
    z-index: 2;
    bottom: 0;
    padding: 10px 13px;
    background: inherit;
  }

  .metal-modal>footer button {
    flex: 1;
  }

  .metal-spot-cards article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .metal-spot-cards aside {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   SABIQ VOICE ASSISTANT V2 — voice-first, local command experience
   ══════════════════════════════════════════════════════════════ */
.voice-assistant-widget {
  left: 28px;
  bottom: 26px;
}

html.ltr .voice-assistant-widget {
  right: 28px;
}

.sabiq-assistant-launcher {
  width: 190px;
  min-height: 58px;
  padding: 7px 9px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 18%, rgba(139, 92, 246, .3), transparent 32%),
    linear-gradient(135deg, rgba(13, 17, 35, .98), rgba(27, 25, 58, .98));
}

.sabiq-launcher-core {
  border-radius: 50%;
  background: linear-gradient(145deg, #7267ff 0%, #9d4edd 52%, #e052c9 100%);
}

.sabiq-assistant-panel {
  left: 28px;
  bottom: 96px;
  width: min(430px, calc(100vw - 40px));
  height: auto;
  max-height: calc(100dvh - 122px);
  min-height: 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 21%, rgba(122, 91, 255, .2), transparent 31%),
    radial-gradient(circle at 8% 2%, rgba(38, 211, 231, .11), transparent 28%),
    linear-gradient(165deg, rgba(15, 18, 37, .99), rgba(8, 11, 24, .995));
}

html.ltr .sabiq-assistant-panel {
  right: 28px;
}

html.light .sabiq-assistant-panel {
  background:
    radial-gradient(circle at 50% 21%, rgba(111, 83, 255, .13), transparent 31%),
    radial-gradient(circle at 8% 2%, rgba(38, 211, 231, .08), transparent 28%),
    linear-gradient(165deg, #fff, #f7f7ff);
}

.sabiq-panel-header {
  padding: 16px 18px 10px;
  border-bottom: 0;
}

.sabiq-panel-mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 50%;
}

.sabiq-panel-brand h2 {
  font-size: 16px;
}

.sabiq-voice-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 24px 15px;
  text-align: center;
}

.sabiq-private-badge {
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(52, 211, 153, .16);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7ee2bd;
  background: rgba(16, 185, 129, .07);
  font-size: 9px;
  font-weight: 800;
}

html.light .sabiq-private-badge {
  color: #0f8c64;
  background: rgba(16, 185, 129, .06);
}

.sabiq-voice-orb {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 18px 0 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.sabiq-voice-orb:focus-visible {
  outline: 3px solid rgba(129, 140, 248, .45);
  outline-offset: 7px;
}

.sabiq-orb-surface {
  position: relative;
  z-index: 3;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, .64), transparent 14%),
    linear-gradient(145deg, #57d9f1 0%, #6c6dff 37%, #9b4bdb 69%, #e75ab9 100%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, .34),
    inset 0 -9px 20px rgba(39, 23, 105, .27),
    0 19px 45px rgba(97, 73, 230, .34);
  transition: transform .22s ease, filter .22s ease;
}

.sabiq-voice-orb:hover .sabiq-orb-surface {
  transform: scale(1.045);
  filter: saturate(1.08) brightness(1.04);
}

.sabiq-orb-halo {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid rgba(137, 118, 255, .25);
}

.sabiq-orb-halo-one {
  inset: 8px;
}

.sabiq-orb-halo-two {
  inset: 0;
  opacity: .5;
}

.voice-assistant-widget[data-state="listening"] .sabiq-orb-surface {
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, .68), transparent 14%),
    linear-gradient(145deg, #32d6e9, #526df2 38%, #a848d6 72%, #f04f9f);
  animation: sabiq-voice-breathe 1.12s ease-in-out infinite;
}

.voice-assistant-widget[data-state="listening"] .sabiq-orb-halo-one,
.voice-assistant-widget[data-state="speaking"] .sabiq-orb-halo-one {
  animation: sabiq-voice-halo 1.45s ease-out infinite;
}

.voice-assistant-widget[data-state="listening"] .sabiq-orb-halo-two,
.voice-assistant-widget[data-state="speaking"] .sabiq-orb-halo-two {
  animation: sabiq-voice-halo 1.45s .42s ease-out infinite;
}

.voice-assistant-widget[data-state="processing"] .sabiq-orb-surface {
  animation: sabiq-voice-spin 1.15s linear infinite;
}

.voice-assistant-widget[data-state="success"] .sabiq-orb-surface {
  background: linear-gradient(145deg, #21c997, #38bdf8 55%, #6d5cf6);
}

.voice-assistant-widget[data-state="error"] .sabiq-orb-surface {
  background: linear-gradient(145deg, #fb7185, #e94281 53%, #9333ea);
}

.sabiq-waveform {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.sabiq-waveform i {
  width: 3px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to top, #59d9eb, #9c62ee);
  opacity: .48;
}

.voice-assistant-widget[data-state="listening"] .sabiq-waveform i,
.voice-assistant-widget[data-state="speaking"] .sabiq-waveform i {
  animation: sabiq-wave .8s calc(var(--wave-index) * -55ms) ease-in-out infinite alternate;
  opacity: 1;
}

.voice-assistant-widget[data-state="speaking"] .sabiq-waveform i {
  animation-duration: .58s;
}

.sabiq-voice-copy {
  margin-top: 3px;
}

.sabiq-voice-copy strong {
  display: block;
  color: #f6f7ff;
  font-size: 18px;
  font-weight: 950;
}

.sabiq-voice-copy p {
  min-height: 19px;
  margin: 4px 0 0;
  color: #929db4;
  font-size: 10px;
  line-height: 1.7;
}

html.light .sabiq-voice-copy strong {
  color: #202942;
}

html.light .sabiq-voice-copy p {
  color: #718096;
}

.sabiq-voice-transcript {
  width: 100%;
  min-height: 40px;
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(129, 140, 248, .12);
  border-radius: 14px;
  color: #cfd5e5;
  background: rgba(255, 255, 255, .035);
  font-size: 10px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.sabiq-voice-response {
  min-height: 18px;
  margin: 8px 0 0;
  color: #aab4cb;
  font-size: 10px;
  line-height: 1.7;
}

html.light .sabiq-voice-transcript {
  color: #445069;
  background: rgba(79, 70, 229, .035);
  border-color: rgba(79, 70, 229, .1);
}

html.light .sabiq-voice-response {
  color: #66738b;
}

.sabiq-quick-section {
  padding: 12px 18px 11px;
  border-top: 1px solid rgba(255, 255, 255, .055);
}

.sabiq-assistant-quick-actions {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.sabiq-assistant-quick-actions::-webkit-scrollbar {
  display: none;
}

.sabiq-quick-action {
  flex: 0 0 auto;
  min-width: 98px;
  min-height: 35px;
  border-radius: 999px;
  justify-content: center;
}

.sabiq-quick-action span {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border-radius: 50%;
}

.sabiq-voice-options {
  padding: 0 18px 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 8px;
}

.sabiq-voice-options>.voice-wake-toggle,
.sabiq-text-fallback>summary {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(129, 140, 248, .13);
  border-radius: 12px;
  color: #aeb7ce;
  background: rgba(99, 102, 241, .055);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-arabic);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.sabiq-text-fallback {
  min-width: 0;
}

.sabiq-text-fallback>summary {
  list-style: none;
}

.sabiq-text-fallback>summary::-webkit-details-marker {
  display: none;
}

.sabiq-text-fallback[open] {
  grid-column: 1 / -1;
  display: contents;
}

.sabiq-text-fallback[open]>summary {
  display: none;
}

.sabiq-assistant-composer {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 4px;
  border-radius: 14px;
  align-items: center;
}

.sabiq-assistant-composer input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 9px;
  border: 0;
  outline: 0;
  color: #edf1ff;
  background: transparent;
  font-family: var(--font-arabic);
  font-size: 10px;
}

html.light .sabiq-assistant-composer input {
  color: #252f46;
}

.sabiq-composer-send {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 11px;
}

.sabiq-panel-footer {
  padding: 4px 16px 12px;
}

@keyframes sabiq-wave {
  from {
    height: 4px;
    transform: translateY(0);
  }

  to {
    height: 22px;
    transform: translateY(-1px);
  }
}

@keyframes sabiq-voice-breathe {

  0%,
  100% {
    transform: scale(.97);
    box-shadow: 0 17px 42px rgba(97, 73, 230, .3);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 24px 58px rgba(94, 92, 246, .48);
  }
}

@keyframes sabiq-voice-halo {
  from {
    opacity: .7;
    transform: scale(.76);
  }

  to {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes sabiq-voice-spin {
  to {
    transform: rotate(360deg);
    filter: hue-rotate(35deg);
  }
}

@media (max-width: 900px) {
  .voice-assistant-widget {
    left: 14px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  html.ltr .voice-assistant-widget {
    right: 14px;
  }

  .sabiq-assistant-panel,
  html.ltr .sabiq-assistant-panel {
    left: 10px;
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    border-radius: 27px;
  }

  .sabiq-voice-orb {
    width: 120px;
    height: 120px;
    margin-top: 14px;
  }

  .sabiq-orb-surface {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 430px) {
  .sabiq-voice-stage {
    padding-inline: 16px;
  }

  .sabiq-voice-options {
    grid-template-columns: 1fr 1fr;
    padding-inline: 14px;
  }

  .sabiq-panel-footer {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sabiq-orb-surface,
  .sabiq-orb-halo,
  .sabiq-waveform i {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PERSONAL CUSTOM SECTIONS — prepared flexible workspaces
   ══════════════════════════════════════════════════════════════ */
.custom-sections-nav {
  display: block;
  margin: 8px 0 4px;
  padding: 8px 0 7px;
  border-block: 1px solid var(--border, rgba(118, 128, 160, .12));
}

.custom-sections-nav[hidden] {
  display: none !important;
}

.custom-space-heading {
  min-height: 28px;
  padding: 2px 17px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted, #7b8498);
  font-size: 10px;
  font-weight: 800;
}

.custom-space-add {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(101, 87, 232, .14);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #6557e8;
  background: rgba(101, 87, 232, .07);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.custom-space-add:hover {
  transform: rotate(90deg);
  background: rgba(101, 87, 232, .13);
}

.custom-space-items {
  display: grid;
  gap: 2px;
}

.custom-space-item.nav-item {
  width: 100%;
  min-height: 42px;
  margin: 0;
  border: 0;
  text-align: start;
}

/* Keep prepared sections typographically identical to the main sidebar items.
   Using the `font` shorthand here used to reset the nav item's 14px/500 styles
   back to the sidebar's larger inherited font. */
.custom-space-item .nav-label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Subscription catalog policy controls */
.admin-plan-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-plan-source-note {
  margin-top: 6px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--clr-primary, #6557e8) 18%, transparent);
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--clr-primary-light, #8b7cf6);
  background: color-mix(in srgb, var(--clr-primary, #6557e8) 7%, transparent);
}

.admin-plan-source-note>div {
  display: grid;
  gap: 4px;
}

.admin-plan-source-note strong {
  color: var(--clr-text, #f3f5ff);
  font-size: .88rem;
}

.admin-plan-source-note span {
  color: var(--clr-text-muted, #919bad);
  font-size: .75rem;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .admin-plan-policy-grid {
    grid-template-columns: 1fr;
  }
}

.custom-space-item-icon {
  color: var(--custom-color);
  background: color-mix(in srgb, var(--custom-color) 10%, transparent);
  border-radius: 8px;
}

.custom-space-count {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--text-muted, #7b8498);
  background: var(--surface-2, rgba(125, 132, 160, .08));
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.custom-space-item.active .custom-space-count {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.custom-space-empty-add {
  min-height: 39px;
  margin: 2px 10px;
  padding: 7px 10px;
  border: 1px dashed rgba(101, 87, 232, .26);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #6557e8;
  background: rgba(101, 87, 232, .035);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.sidebar.collapsed .custom-space-heading>span,
#sidebar.collapsed .custom-space-heading>span,
#sidebar.collapsed .custom-space-count,
#sidebar.collapsed .custom-space-empty-add span {
  display: none;
}

#sidebar.collapsed .custom-space-heading {
  padding-inline: 0;
  justify-content: center;
}

#sidebar.collapsed .custom-space-empty-add {
  width: 38px;
  margin-inline: auto;
  padding: 0;
}

.custom-section-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10120;
  padding: 28px;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgba(11, 14, 30, .58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .2s ease;
}

.custom-section-modal-overlay.visible {
  opacity: 1;
}

.custom-library,
.custom-setup-card,
.custom-record-card {
  width: min(960px, 100%);
  max-height: calc(100dvh - 56px);
  overflow: hidden;
  border: 1px solid rgba(131, 124, 215, .17);
  border-radius: 28px;
  color: #eef1ff;
  background:
    radial-gradient(circle at 9% 0%, rgba(101, 87, 232, .2), transparent 28%),
    linear-gradient(155deg, #15182b, #0d1020);
  box-shadow: 0 34px 100px rgba(4, 7, 20, .5);
  font-family: var(--font-arabic);
  animation: custom-modal-in .23s ease;
}

html.light .custom-library,
html.light .custom-setup-card,
html.light .custom-record-card {
  color: #222a41;
  background:
    radial-gradient(circle at 9% 0%, rgba(101, 87, 232, .1), transparent 29%),
    linear-gradient(155deg, #fff, #f8f8ff);
  box-shadow: 0 34px 90px rgba(44, 48, 75, .23);
}

.custom-library {
  display: flex;
  flex-direction: column;
}

.custom-library-header {
  padding: 25px 28px 17px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.custom-library-kicker {
  display: block;
  margin-bottom: 4px;
  color: #8b7df2;
  font-size: 10px;
  font-weight: 900;
}

.custom-library-header h2,
.custom-setup-card h2,
.custom-record-card h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 950;
}

.custom-library-header p {
  margin: 6px 0 0;
  color: #969fb3;
  font-size: 11px;
}

.custom-modal-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(130, 139, 169, .15);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #9099af;
  background: rgba(130, 139, 169, .07);
  font: 300 24px/1 sans-serif;
  cursor: pointer;
}

.custom-library-tools {
  padding: 0 28px 16px;
  display: grid;
  gap: 12px;
}

.custom-library-search,
.custom-section-search {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(130, 139, 169, .14);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #7f89a1;
  background: rgba(130, 139, 169, .055);
}

.custom-library-search input,
.custom-section-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.custom-library-categories {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.custom-library-categories::-webkit-scrollbar {
  display: none;
}

.custom-library-categories button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid rgba(130, 139, 169, .13);
  border-radius: 999px;
  color: #929cb1;
  background: rgba(130, 139, 169, .045);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.custom-library-categories button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #6557e8, #8e62e8);
}

.custom-library-grid {
  min-height: 280px;
  padding: 4px 28px 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow-y: auto;
}

.custom-template-card {
  position: relative;
  min-height: 236px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(130, 139, 169, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html.light .custom-template-card {
  background: rgba(255, 255, 255, .7);
}

.custom-template-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--template-color);
}

.custom-template-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--template-color) 35%, transparent);
  box-shadow: 0 16px 30px rgba(8, 12, 31, .12);
}

.custom-template-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.custom-template-icon,
.custom-setup-icon {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--template-color);
  background: color-mix(in srgb, var(--template-color) 12%, transparent);
}

.custom-template-category {
  color: #8d96aa;
  font-size: 8px;
  font-weight: 800;
}

.custom-template-card h3 {
  margin: 13px 0 4px;
  color: inherit;
  font-size: 14px;
  font-weight: 950;
}

.custom-template-card p {
  min-height: 37px;
  margin: 0;
  color: #8f99ae;
  font-size: 9px;
  line-height: 1.7;
}

.custom-template-fields {
  margin: 11px 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.custom-template-fields span {
  padding: 3px 7px;
  border-radius: 6px;
  color: #8e98ad;
  background: rgba(130, 139, 169, .07);
  font-size: 7px;
  font-weight: 700;
}

.custom-template-add,
.custom-primary-button,
.custom-secondary-button,
.custom-archive-button,
.custom-delete-section-button {
  min-height: 39px;
  padding: 8px 14px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.custom-template-add {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--template-color) 25%, transparent);
  color: var(--template-color);
  background: color-mix(in srgb, var(--template-color) 8%, transparent);
}

.custom-primary-button {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #6557e8, #8661df);
  box-shadow: 0 8px 18px rgba(101, 87, 232, .2);
}

.custom-secondary-button {
  border: 1px solid rgba(130, 139, 169, .16);
  color: #818ba0;
  background: rgba(130, 139, 169, .06);
}

.custom-library-footer {
  padding: 11px 28px 15px;
  border-top: 1px solid rgba(130, 139, 169, .09);
  color: #7e889d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 8px;
  text-align: start;
}

.custom-library-footer button {
  padding: 4px 9px;
  border: 0;
  border-radius: 8px;
  color: #7d70e8;
  background: rgba(101, 87, 232, .07);
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.custom-library-no-results {
  grid-column: 1/-1;
  padding: 70px 20px;
  color: #8a94aa;
  text-align: center;
}

.custom-setup-card {
  position: relative;
  width: min(470px, 100%);
  padding: 30px;
  overflow-y: auto;
}

.custom-setup-card>.custom-modal-close {
  position: absolute;
  top: 17px;
  inset-inline-end: 17px;
}

.custom-setup-icon {
  --template-color: var(--setup-color);
  width: 52px;
  height: 52px;
  margin-bottom: 13px;
}

.custom-setup-card h2 {
  margin-bottom: 19px;
  font-size: 21px;
}

.custom-setup-card>label,
.custom-record-fields label {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
  color: #9ba4b7;
  font-size: 9px;
  font-weight: 800;
}

.custom-setup-card input,
.custom-setup-card select,
.custom-record-fields input,
.custom-record-fields select,
.custom-record-fields textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(130, 139, 169, .16);
  border-radius: 12px;
  outline: 0;
  color: inherit;
  background: rgba(130, 139, 169, .055);
  font: inherit;
  font-size: 11px;
}

.custom-setup-card fieldset {
  margin: 4px 0 16px;
  padding: 0;
  border: 0;
}

.custom-setup-card legend {
  margin-bottom: 9px;
  color: #9ba4b7;
  font-size: 9px;
  font-weight: 800;
}

.custom-color-options {
  display: flex;
  gap: 9px;
}

.custom-color-options label {
  cursor: pointer;
}

.custom-color-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-color-options span {
  width: 27px;
  height: 27px;
  border: 4px solid transparent;
  border-radius: 50%;
  display: block;
  background: var(--choice-color);
  background-clip: padding-box;
}

.custom-color-options input:checked+span {
  border-color: rgba(255, 255, 255, .75);
  box-shadow: 0 0 0 2px var(--choice-color);
}

.custom-setup-preview {
  margin: 4px 0 17px;
  padding: 12px;
  border-radius: 12px;
  display: grid;
  gap: 3px;
  color: #8d97ab;
  background: rgba(101, 87, 232, .06);
  font-size: 8px;
}

.custom-setup-preview strong {
  color: inherit;
  font-size: 9px;
}

.custom-setup-card>.custom-primary-button {
  width: 100%;
}

.custom-archive-button {
  width: 100%;
  border: 1px solid rgba(219, 79, 120, .17);
  color: #dc668a;
  background: rgba(219, 79, 120, .055);
}

.custom-section-danger-actions {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.custom-delete-section-button {
  width: 100%;
  border: 1px solid rgba(239, 68, 68, .28);
  color: #f06d75;
  background: rgba(239, 68, 68, .09);
}

.custom-delete-section-button:hover {
  background: rgba(239, 68, 68, .15);
}

.custom-delete-confirm-card {
  position: relative;
  width: min(430px, 100%);
  padding: 28px;
  border: 1px solid rgba(239, 68, 68, .2);
  border-radius: 24px;
  text-align: center;
  color: #eef1ff;
  background: linear-gradient(155deg, #191827, #10111c);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.custom-delete-confirm-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border: 1px solid rgba(239, 68, 68, .24);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #f06d75;
  background: rgba(239, 68, 68, .1);
}

.custom-delete-confirm-card h2 {
  margin: 7px 0 8px;
  font-size: 1.2rem;
}

.custom-delete-confirm-card p {
  margin: 0;
  color: #98a2b7;
  font-size: .82rem;
  line-height: 1.85;
}

.custom-delete-confirm-actions {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 9px;
}

.custom-delete-confirm-actions>button {
  width: 100%;
  min-height: 44px;
}

html.light .custom-delete-confirm-card {
  color: #202438;
  background: #fff;
  box-shadow: 0 24px 60px rgba(44, 52, 84, .2);
}

@media (max-width: 560px) {
  .custom-section-danger-actions {
    grid-template-columns: 1fr;
  }

  .custom-delete-confirm-card {
    padding: 24px 18px 19px;
    border-radius: 22px;
  }

  .custom-delete-confirm-actions {
    grid-template-columns: 1fr;
  }
}

.custom-record-card {
  width: min(650px, 100%);
  padding: 0;
  overflow-y: auto;
}

.custom-archive-card {
  width: min(620px, 100%);
  max-height: calc(100dvh - 56px);
  overflow: hidden;
  border: 1px solid rgba(131, 124, 215, .17);
  border-radius: 25px;
  color: #eef1ff;
  background: linear-gradient(155deg, #15182b, #0d1020);
  box-shadow: 0 34px 100px rgba(4, 7, 20, .5);
  font-family: var(--font-arabic);
  animation: custom-modal-in .23s ease;
}

html.light .custom-archive-card {
  color: #222a41;
  background: linear-gradient(155deg, #fff, #f8f8ff);
}

.custom-archive-card>header {
  padding: 23px 24px 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(130, 139, 169, .1);
}

.custom-archive-card h2 {
  margin: 0;
  color: inherit;
  font-size: 21px;
}

.custom-archive-card header p {
  margin: 4px 0 0;
  color: #8993a8;
  font-size: 9px;
}

.custom-archive-list {
  max-height: 460px;
  padding: 14px;
  display: grid;
  gap: 7px;
  overflow-y: auto;
}

.custom-archive-list article {
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(130, 139, 169, .11);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 40px 1fr auto 32px;
  align-items: center;
  gap: 9px;
  background: rgba(130, 139, 169, .035);
}

.custom-archive-list article>span {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--archive-color);
  background: color-mix(in srgb, var(--archive-color) 10%, transparent);
}

.custom-archive-list article>div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.custom-archive-list article strong {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-archive-list article small {
  color: #858fa4;
  font-size: 8px;
}

.custom-archive-list article button {
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid rgba(101, 87, 232, .15);
  border-radius: 9px;
  color: #7d70e8;
  background: rgba(101, 87, 232, .06);
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.custom-archive-list article button[data-action="remove"] {
  width: 31px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #db5b80;
  border-color: rgba(219, 79, 120, .14);
  background: rgba(219, 79, 120, .05);
}

.custom-archive-card>footer {
  padding: 12px 24px 20px;
  display: flex;
  justify-content: flex-end;
}

.custom-record-card>header {
  padding: 22px 24px 15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(130, 139, 169, .1);
}

.custom-record-card h2 {
  font-size: 20px;
}

.custom-record-fields {
  padding: 19px 24px 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 13px;
}

.custom-record-title-field,
.custom-record-notes {
  grid-column: 1/-1;
}

.custom-record-fields textarea {
  resize: vertical;
  line-height: 1.7;
}

.custom-task-sync {
  margin: 0 24px 17px;
  padding: 11px 13px;
  border: 1px solid rgba(101, 87, 232, .13);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #929caf;
  background: rgba(101, 87, 232, .05);
  cursor: pointer;
}

.custom-task-sync input {
  accent-color: #6557e8;
}

.custom-task-sync span {
  display: grid;
  gap: 2px;
}

.custom-task-sync strong {
  color: inherit;
  font-size: 9px;
}

.custom-task-sync small {
  color: #7e879b;
  font-size: 7px;
}

.custom-record-card>footer {
  padding: 13px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.custom-section-page {
  max-width: 1580px;
  margin: 0 auto;
  padding: 3px 2px 32px;
  display: grid;
  gap: 16px;
  color: var(--text, #eef1ff);
  font-family: var(--font-arabic);
}

.custom-section-hero {
  position: relative;
  min-height: 174px;
  overflow: hidden;
  padding: 28px clamp(24px, 4vw, 48px);
  border: 1px solid color-mix(in srgb, var(--section-color) 20%, transparent);
  border-radius: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--section-color) 27%, transparent), transparent 31%),
    linear-gradient(125deg, #171a31, #11162d 55%, #0c1226);
  box-shadow: 0 20px 50px rgba(4, 8, 25, .2);
}

html.light .custom-section-hero {
  color: #202438;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--section-color) 17%, transparent), transparent 31%),
    linear-gradient(125deg, #fff, #f8f8ff 58%, #f1f4ff);
}

.custom-section-hero::after {
  content: '';
  position: absolute;
  width: 270px;
  height: 270px;
  inset-inline-end: -90px;
  top: -130px;
  border: 1px solid color-mix(in srgb, var(--section-color) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 35px color-mix(in srgb, var(--section-color) 4%, transparent), 0 0 0 70px color-mix(in srgb, var(--section-color) 3%, transparent);
}

.custom-section-identity,
.custom-section-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.custom-section-identity {
  gap: 17px;
  min-width: 0;
}

.custom-section-main-icon {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 21px;
  display: grid;
  place-items: center;
  color: var(--section-color);
  background: color-mix(in srgb, var(--section-color) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-color) 17%, transparent);
}

.custom-section-identity>div {
  min-width: 0;
}

.custom-section-identity>div>span {
  color: var(--section-color);
  font-size: 9px;
  font-weight: 900;
}

.custom-section-identity h1 {
  margin: 3px 0 4px;
  color: inherit;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 950;
}

.custom-section-identity p {
  max-width: 620px;
  margin: 0;
  color: var(--text-muted, #929cb2);
  font-size: 10px;
  line-height: 1.7;
}

.custom-section-hero-actions {
  gap: 8px;
}

.custom-icon-button {
  width: 41px;
  height: 41px;
  padding: 0;
  border: 1px solid rgba(130, 139, 169, .15);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text-muted, #8892a7);
  background: rgba(130, 139, 169, .06);
  cursor: pointer;
}

.custom-section-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.custom-section-stats article {
  min-height: 112px;
  padding: 17px 19px;
  border: 1px solid var(--border, rgba(130, 139, 169, .11));
  border-radius: 18px;
  display: grid;
  align-content: center;
  background: var(--surface, rgba(255, 255, 255, .035));
  box-shadow: 0 10px 28px rgba(7, 10, 25, .06);
}

.custom-section-stats span {
  color: var(--text-muted, #8e98ad);
  font-size: 9px;
  font-weight: 800;
}

.custom-section-stats strong {
  margin: 2px 0;
  color: var(--text, #eef1ff);
  font-size: 26px;
  font-weight: 950;
}

.custom-section-stats small {
  color: var(--text-muted, #818ba0);
  font-size: 8px;
}

.custom-section-workspace {
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(130, 139, 169, .11));
  border-radius: 23px;
  background: var(--surface, rgba(255, 255, 255, .03));
  box-shadow: 0 18px 48px rgba(7, 10, 25, .08);
}

.custom-section-toolbar {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(130, 139, 169, .1));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.custom-section-search {
  width: min(330px, 100%);
  min-height: 39px;
}

.custom-view-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-2, rgba(130, 139, 169, .065));
}

.custom-view-switch button {
  min-height: 31px;
  padding: 5px 10px;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted, #8791a6);
  background: transparent;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.custom-view-switch button.active {
  color: #fff;
  background: var(--section-color);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--section-color) 25%, transparent);
}

.custom-records-view {
  min-height: 340px;
  overflow-x: auto;
}

.custom-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.custom-record-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.custom-record-table th {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border, rgba(130, 139, 169, .1));
  color: var(--text-muted, #8590a5);
  background: var(--surface-2, rgba(130, 139, 169, .03));
  font-size: 8px;
  font-weight: 900;
  text-align: start;
}

.custom-record-table td {
  padding: 14px 15px;
  border-bottom: 1px solid var(--border, rgba(130, 139, 169, .075));
  color: var(--text-muted, #98a2b6);
  font-size: 9px;
}

.custom-record-table td:first-child {
  color: var(--text, #eef1ff);
}

.custom-record-table tbody tr:hover {
  background: color-mix(in srgb, var(--section-color) 4%, transparent);
}

.custom-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--status-color);
  background: color-mix(in srgb, var(--status-color) 10%, transparent);
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.custom-linked-task {
  display: inline-flex;
  margin-inline-start: 6px;
  color: var(--section-color);
  vertical-align: middle;
}

.custom-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.custom-row-actions button,
.custom-board-card footer button,
.custom-agenda-item>button {
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid var(--border, rgba(130, 139, 169, .12));
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-muted, #8b95a9);
  background: transparent;
  cursor: pointer;
}

.custom-row-actions button[data-action="delete"] {
  color: #d75b7e;
}

.custom-board {
  min-width: 900px;
  padding: 15px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 10px;
  overflow-x: auto;
}

.custom-board-column {
  min-height: 330px;
  padding: 10px;
  border: 1px solid var(--border, rgba(130, 139, 169, .1));
  border-radius: 15px;
  background: var(--surface-2, rgba(130, 139, 169, .035));
}

.custom-board-column>header {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.custom-board-column>header>span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-color);
}

.custom-board-column>header strong {
  flex: 1;
  color: var(--text, #eef1ff);
  font-size: 9px;
}

.custom-board-column>header b {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--status-color);
  background: color-mix(in srgb, var(--status-color) 10%, transparent);
  font-size: 8px;
  text-align: center;
}

.custom-board-items {
  display: grid;
  gap: 7px;
}

.custom-board-card {
  padding: 12px;
  border: 1px solid var(--border, rgba(130, 139, 169, .1));
  border-radius: 12px;
  background: var(--surface, rgba(255, 255, 255, .04));
  box-shadow: 0 7px 18px rgba(7, 10, 25, .05);
}

.custom-board-card>div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text, #eef1ff);
  font-size: 10px;
}

.custom-board-card p {
  margin: 8px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 7px;
  color: var(--text-muted, #8490a5);
  font-size: 7px;
}

.custom-board-card p b {
  color: var(--text-muted, #a2abbd);
}

.custom-board-card footer {
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid var(--border, rgba(130, 139, 169, .08));
  display: flex;
  justify-content: space-between;
}

.custom-board-card footer button {
  width: auto;
  padding-inline: 8px;
  display: flex;
  gap: 5px;
  font-size: 7px;
}

.custom-board-empty {
  padding: 34px 8px;
  color: var(--text-muted, #7d879c);
  font-size: 8px;
  text-align: center;
}

.custom-agenda {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  gap: 9px;
}

.custom-agenda-item {
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--border, rgba(130, 139, 169, .1));
  border-radius: 15px;
  display: grid;
  grid-template-columns: 62px 1fr 32px;
  align-items: center;
  gap: 13px;
  background: var(--surface-2, rgba(130, 139, 169, .025));
}

.custom-agenda-item time {
  min-height: 62px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--section-color);
  background: color-mix(in srgb, var(--section-color) 9%, transparent);
}

.custom-agenda-item time b {
  font-size: 18px;
  line-height: 1;
}

.custom-agenda-item time span {
  font-size: 8px;
  font-weight: 800;
}

.custom-agenda-item time small {
  margin-top: 2px;
  color: var(--text-muted, #8b95aa);
  font-size: 7px;
}

.custom-agenda-item h3 {
  margin: 5px 0 2px;
  color: var(--text, #eef1ff);
  font-size: 12px;
}

.custom-agenda-item p {
  margin: 0;
  color: var(--text-muted, #8691a6);
  font-size: 8px;
}

.custom-empty-state {
  min-height: 335px;
  padding: 50px 22px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--text-muted, #8791a6);
  text-align: center;
}

.custom-empty-state>span {
  width: 58px;
  height: 58px;
  margin-bottom: 11px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--section-color, #6557e8);
  background: color-mix(in srgb, var(--section-color, #6557e8) 10%, transparent);
}

.custom-empty-state h3 {
  margin: 0;
  color: var(--text, #eef1ff);
  font-size: 16px;
}

.custom-empty-state p {
  margin: 5px 0 16px;
  font-size: 9px;
}

@keyframes custom-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .custom-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-section-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .custom-section-page {
    padding: 2px 0 90px;
    gap: 11px;
  }

  .custom-section-hero {
    min-height: 180px;
    padding: 23px 19px;
    border-radius: 22px;
    align-items: flex-start;
    flex-direction: column;
  }

  .custom-section-main-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 17px;
  }

  .custom-section-identity h1 {
    font-size: 24px;
  }

  .custom-section-hero-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .custom-section-stats {
    gap: 8px;
  }

  .custom-section-stats article {
    min-height: 94px;
    padding: 13px 14px;
    border-radius: 15px;
  }

  .custom-section-stats strong {
    font-size: 21px;
  }

  .custom-section-workspace {
    border-radius: 19px;
  }

  .custom-section-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .custom-section-search {
    width: 100%;
  }

  .custom-view-switch {
    width: 100%;
  }

  .custom-view-switch button {
    flex: 1;
    justify-content: center;
  }

  .custom-library {
    max-height: calc(100dvh - 20px);
    border-radius: 23px;
  }

  .custom-section-modal-overlay {
    padding: 10px;
  }
}

@media (max-width: 620px) {
  .custom-library-header {
    padding: 20px 18px 13px;
  }

  .custom-library-header h2 {
    font-size: 20px;
  }

  .custom-library-tools {
    padding-inline: 18px;
  }

  .custom-library-grid {
    padding-inline: 18px;
    grid-template-columns: 1fr;
  }

  .custom-template-card {
    min-height: 220px;
  }

  .custom-setup-card {
    padding: 25px 20px;
    border-radius: 23px;
  }

  .custom-record-fields {
    padding-inline: 18px;
    grid-template-columns: 1fr;
  }

  .custom-record-title-field,
  .custom-record-notes {
    grid-column: 1;
  }

  .custom-record-card>header,
  .custom-record-card>footer {
    padding-inline: 18px;
  }

  .custom-task-sync {
    margin-inline: 18px;
  }

  .custom-section-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-agenda {
    padding: 11px;
  }

  .custom-agenda-item {
    grid-template-columns: 52px 1fr 30px;
    gap: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .custom-library,
  .custom-setup-card,
  .custom-record-card,
  .custom-template-card {
    animation: none !important;
    transition: none !important;
  }
}

/* ── My Space refresh v6 ─────────────────────────────────────────────────── */
.more-new-section-launcher {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--clr-primary, #6557e8) 26%, transparent);
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--clr-primary, #6557e8) 14%, transparent), transparent 52%),
    var(--glass-bg);
}

.more-new-section-launcher::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #6557e8, #a78bfa);
}

.more-new-section-launcher small {
  max-width: 130px;
  color: var(--clr-text-muted, #94a3b8);
  font-size: .67rem;
  line-height: 1.35;
}

.new-section-bg {
  color: #a78bfa;
  background: color-mix(in srgb, var(--clr-primary, #6557e8) 14%, transparent);
}

.new-section-bg svg {
  stroke: #a78bfa !important;
}

.custom-section-page {
  gap: 18px;
}

.custom-section-hero {
  min-height: 0;
  padding: clamp(22px, 3vw, 38px);
  align-items: stretch;
  flex-direction: column;
  gap: 28px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--section-color) 28%, transparent), transparent 34%),
    radial-gradient(circle at 95% 110%, color-mix(in srgb, var(--section-color) 15%, transparent), transparent 35%),
    linear-gradient(135deg, #171a31, #10152b 56%, #0b1125);
}

html.light .custom-section-hero {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--section-color) 16%, transparent), transparent 34%),
    radial-gradient(circle at 95% 110%, color-mix(in srgb, var(--section-color) 9%, transparent), transparent 38%),
    linear-gradient(135deg, #fff, #f8f8ff 58%, #f1f4ff);
}

.custom-section-hero::after {
  width: 330px;
  height: 330px;
  inset-inline-end: -135px;
  top: -175px;
  opacity: .7;
}

.custom-section-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.custom-section-main-icon {
  flex-basis: 74px;
  width: 74px;
  height: 74px;
  border-radius: 23px;
  background: color-mix(in srgb, var(--section-color) 15%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--section-color) 24%, transparent),
    0 16px 34px color-mix(in srgb, var(--section-color) 14%, transparent);
}

.custom-section-identity>div>span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-color) 10%, transparent);
  font-size: .72rem;
}

.custom-section-identity h1 {
  margin-block: 7px 5px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  letter-spacing: -.03em;
}

.custom-section-identity p {
  font-size: .83rem;
  line-height: 1.75;
}

.custom-section-hero-actions .custom-primary-button {
  min-height: 45px;
  padding-inline: 18px;
  border-radius: 14px;
  white-space: nowrap;
}

.custom-section-hero-insights {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 11px;
}

.custom-section-hero-insights article {
  min-width: 0;
  min-height: 96px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--section-color) 12%, rgba(255, 255, 255, .07));
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(10px);
}

html.light .custom-section-hero-insights article {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 12px 28px rgba(60, 67, 100, .055);
}

html.light .custom-section-identity h1,
html.light .custom-section-hero-insights article strong,
html.light .custom-section-stats strong,
html.light .custom-section-workspace-head h2,
html.light .custom-empty-state h3,
html.light .custom-record-table td:first-child {
  color: #202438;
}

html.light .custom-section-identity p,
html.light .custom-section-hero-insights article span,
html.light .custom-section-hero-insights article small,
html.light .custom-section-stats span,
html.light .custom-section-stats small {
  color: #707b92;
}

.custom-section-hero-insights article>div:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.custom-section-hero-insights article span {
  color: var(--text-muted, #949db0);
  font-size: .68rem;
  font-weight: 800;
}

.custom-section-hero-insights article strong {
  overflow: hidden;
  color: var(--text, #eef1ff);
  font-size: .9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-section-hero-insights article small {
  overflow: hidden;
  color: var(--text-muted, #828da3);
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-progress-ring {
  --progress: 0;
  position: relative;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--section-color) calc(var(--progress) * 1%), rgba(130, 139, 169, .14) 0);
}

.custom-progress-ring::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: #15192d;
}

html.light .custom-progress-ring::before {
  background: #fff;
}

.custom-progress-ring strong {
  position: relative;
  z-index: 1;
  color: var(--section-color) !important;
  font-size: .83rem !important;
}

.custom-insight-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--section-color) !important;
  background: color-mix(in srgb, var(--section-color) 11%, transparent);
}

.custom-section-alert-card.has-alert {
  border-color: rgba(239, 68, 68, .25) !important;
  background: rgba(239, 68, 68, .055) !important;
}

.custom-section-alert-card.has-alert .custom-insight-icon {
  color: #ef6b73 !important;
  background: rgba(239, 68, 68, .1);
}

.custom-section-stats {
  gap: 12px;
}

.custom-section-stats article {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  padding: 19px 20px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--section-color) 4%, transparent), transparent 55%),
    var(--surface, rgba(255, 255, 255, .035));
}

.custom-section-stats article::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  inset-inline-end: -25px;
  bottom: -28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--section-color) 8%, transparent);
}

.custom-section-stats span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .73rem;
}

.custom-section-stats span svg {
  color: var(--section-color);
}

.custom-section-stats strong {
  margin-block: 6px 2px;
  font-size: 1.85rem;
}

.custom-section-stats small {
  font-size: .68rem;
}

.custom-section-workspace {
  border-radius: 25px;
}

.custom-section-workspace-head {
  padding: 20px 22px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.custom-section-workspace-head>div>span {
  color: var(--section-color);
  font-size: .7rem;
  font-weight: 900;
}

.custom-section-workspace-head h2 {
  margin: 3px 0 0;
  color: var(--text, #eef1ff);
  font-size: 1.08rem;
}

.custom-section-workspace-head>strong {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--section-color);
  background: color-mix(in srgb, var(--section-color) 9%, transparent);
  font-size: .7rem;
}

.custom-section-toolbar {
  padding: 12px 22px 16px;
  border-bottom-color: var(--border, rgba(130, 139, 169, .1));
}

.custom-section-search {
  border-radius: 13px;
}

@media (max-width: 900px) {
  .custom-section-page {
    gap: 12px;
  }

  .custom-section-hero {
    padding: 21px 17px;
    gap: 20px;
    border-radius: 24px;
  }

  .custom-section-hero-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .custom-section-main-icon {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .custom-section-identity {
    align-items: flex-start;
    gap: 13px;
  }

  .custom-section-identity h1 {
    font-size: 1.5rem;
  }

  .custom-section-identity p {
    font-size: .76rem;
  }

  .custom-section-hero-actions {
    width: 100%;
    justify-content: stretch;
  }

  .custom-section-hero-actions .custom-primary-button {
    flex: 1;
    justify-content: center;
  }

  .custom-section-hero-insights {
    grid-template-columns: 1fr 1fr;
  }

  .custom-section-progress-card {
    grid-column: 1 / -1;
  }

  .custom-section-stats article {
    min-height: 106px;
    padding: 15px;
  }

  .custom-section-stats strong {
    font-size: 1.45rem;
  }

  .custom-section-workspace-head {
    padding: 17px 16px 8px;
  }

  .custom-section-toolbar {
    padding: 10px 16px 14px;
  }
}

@media (max-width: 620px) {
  .more-custom-space-header {
    margin-top: 0;
  }

  .more-custom-space-grid {
    padding-bottom: 18px;
  }

  .more-new-section-launcher {
    min-height: 116px;
  }

  .more-new-section-launcher small {
    font-size: .62rem;
  }

  .custom-section-hero-insights {
    grid-template-columns: 1fr;
  }

  .custom-section-progress-card {
    grid-column: auto;
  }

  .custom-section-hero-insights article {
    min-height: 82px;
    padding: 12px;
    border-radius: 16px;
  }

  .custom-progress-ring {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
  }

  .custom-section-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .custom-section-stats article {
    min-height: 104px;
    border-radius: 17px;
  }

  .custom-section-stats span {
    font-size: .66rem;
  }

  .custom-section-stats small {
    font-size: .61rem;
  }

  .custom-section-workspace-head {
    align-items: center;
  }

  .custom-section-workspace-head h2 {
    font-size: .95rem;
  }
}

/* ── Calendar desktop map + metals wallet mobile refresh ─────────────── */
@media (min-width: 901px) {
  .calendar-v4-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-v4-agenda {
    position: static;
    width: 100%;
  }

  .calendar-v4-page .calendar-shell-card {
    width: 100%;
    box-sizing: border-box;
  }

  .calendar-v4-page .calendar-day-cell {
    min-height: 118px !important;
  }

  .calendar-selected-tasks-list {
    max-height: none;
  }
}

@media (max-width: 760px) {

  .metal-wallet-page,
  .metal-wallet-page #metal-wallet-content {
    gap: 13px;
  }

  .metal-wallet-hero {
    gap: 18px;
    padding: 22px 17px;
    border-radius: 23px;
  }

  .metal-wallet-hero-copy {
    gap: 8px;
  }

  .metal-wallet-eyebrow {
    font-size: .76rem;
  }

  .metal-wallet-hero h1 {
    font-size: 1.55rem;
    line-height: 1.35;
  }

  .metal-wallet-hero p {
    font-size: .84rem;
    line-height: 1.8;
  }

  .metal-wallet-live {
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 3px;
    padding: 8px 10px;
    font-size: .68rem;
  }

  .metal-wallet-live small {
    font-size: .63rem;
  }

  .metal-wallet-hero-value {
    gap: 6px;
    padding: 17px;
    border-radius: 18px;
  }

  .metal-wallet-hero-value>small {
    font-size: .75rem;
  }

  .metal-wallet-hero-value>strong {
    font-size: 1.55rem;
  }

  .metal-wallet-hero-value>span {
    font-size: .7rem;
  }

  .metal-wallet-hero-value>div {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 9px;
  }

  .metal-wallet-hero-value button {
    min-height: 43px;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: .76rem;
  }

  .metal-wallet-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding: 8px;
    border-radius: 18px;
  }

  .metal-wallet-tabs button {
    min-width: 0;
    min-height: 51px;
    padding: 9px 11px;
    flex: initial;
    justify-content: flex-start;
    gap: 7px;
    border: 1px solid rgba(148, 163, 184, .08);
    border-radius: 12px;
    background: rgba(148, 163, 184, .025);
    font-size: .78rem;
    line-height: 1.35;
    white-space: normal;
  }

  .metal-wallet-tabs button svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  .metal-wallet-tabs button b {
    min-width: 22px;
    height: 22px;
    margin-inline-start: auto;
    border-radius: 7px;
    font-size: .66rem;
  }

  .metal-wallet-tabs button:hover,
  .metal-wallet-tabs button.active {
    border-color: rgba(218, 176, 81, .27);
    color: #f0d68a;
    background: linear-gradient(135deg, rgba(218, 176, 81, .14), rgba(218, 176, 81, .055));
    box-shadow: 0 8px 20px rgba(2, 6, 23, .09);
  }

  .metal-wallet-tabs #metal-refresh-prices {
    margin-inline-start: 0;
    color: #a69bf1;
  }

  html.light .metal-wallet-tabs button {
    border-color: #e6e9ef;
    background: #fafbfe;
  }

  html.light .metal-wallet-tabs button.active {
    border-color: #e6d39c;
    color: #85631f;
    background: linear-gradient(135deg, #fff8e7, #fffdf7);
  }

  .metal-wallet-kpis {
    gap: 8px;
  }

  .metal-wallet-kpi {
    min-height: 104px;
    gap: 10px;
    padding: 13px;
    border-radius: 17px;
  }

  .metal-wallet-kpi>span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .metal-wallet-kpi small {
    font-size: .7rem;
    line-height: 1.45;
  }

  .metal-wallet-kpi strong {
    font-size: .94rem;
    line-height: 1.45;
  }

  .metal-wallet-kpi em {
    font-size: .63rem;
    line-height: 1.45;
  }

  .metal-wallet-panel {
    padding: 16px;
    border-radius: 19px;
  }

  .metal-wallet-panel>header {
    gap: 10px;
    margin-bottom: 15px;
  }

  .metal-wallet-panel>header span {
    font-size: .69rem;
  }

  .metal-wallet-panel>header h2 {
    font-size: 1rem;
    line-height: 1.5;
  }

  .metal-wallet-panel>header>small,
  .metal-wallet-panel>header>button {
    font-size: .65rem;
    line-height: 1.5;
  }

  .metal-spot-cards {
    gap: 9px;
  }

  .metal-spot-cards article {
    min-height: 84px;
    gap: 11px;
    padding: 14px;
    border-radius: 15px;
  }

  .metal-spot-cards article>span {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .metal-spot-cards small {
    font-size: .7rem;
  }

  .metal-spot-cards strong {
    font-size: 1rem;
    line-height: 1.45;
  }

  .metal-spot-cards em {
    font-size: .63rem;
  }

  .metal-purity-strip {
    gap: 7px;
    margin-top: 9px;
  }

  .metal-purity-strip span {
    min-height: 48px;
    justify-content: center;
    padding: 9px;
    border-radius: 10px;
    font-size: .66rem;
  }

  .metal-purity-strip b {
    font-size: .72rem;
  }

  .metal-allocation-body {
    gap: 18px;
  }

  .metal-allocation-list {
    gap: 8px;
  }

  .metal-allocation-list article {
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 11px;
  }

  .metal-allocation-list span {
    font-size: .69rem;
  }

  .metal-allocation-list strong,
  .metal-allocation-list article>b {
    font-size: .75rem;
  }

  .metal-holding-compact {
    min-height: 72px;
    gap: 10px;
    padding: 12px;
    border-radius: 13px;
  }

  .metal-holding-compact>span {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .metal-holding-compact>div>strong,
  .metal-holding-compact>aside strong {
    font-size: .76rem;
  }

  .metal-holding-compact>div>small,
  .metal-holding-compact>aside small {
    font-size: .62rem;
  }

  .metal-wallet-note {
    gap: 9px;
    padding: 12px 13px;
    border-radius: 12px;
    font-size: .69rem;
    line-height: 1.85;
  }

  .metal-wallet-empty h3 {
    font-size: .9rem;
  }

  .metal-wallet-empty p {
    font-size: .72rem;
  }

  .metal-wallet-empty button {
    min-height: 40px;
    padding: 9px 13px;
    font-size: .72rem;
  }

  .metal-holdings-toolbar {
    padding: 16px;
  }

  .metal-filter button {
    min-height: 36px;
    padding: 7px 11px;
    font-size: .7rem;
  }

  .metal-primary-action {
    min-height: 41px;
    padding: 8px 13px;
    font-size: .72rem !important;
  }

  .metal-holdings-table tr {
    padding: 13px 12px;
  }

  .metal-holdings-table td {
    grid-template-columns: minmax(105px, .8fr) minmax(0, 1fr);
    padding: 8px 2px;
    font-size: .72rem;
  }

  .metal-holdings-table td::before {
    font-size: .68rem;
  }

  .metal-holdings-table td>strong,
  .metal-table-name strong {
    font-size: .76rem;
  }

  .metal-holdings-table td>small,
  .metal-table-name small {
    font-size: .62rem;
  }

  .metal-calculator-form label>span,
  .metal-form-grid label>span {
    font-size: .72rem;
  }

  .metal-calculator-form input,
  .metal-calculator-form select,
  .metal-form-grid input,
  .metal-form-grid select,
  .metal-form-grid textarea {
    min-height: 45px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: .78rem;
  }

  .metal-calculator-result small {
    font-size: .72rem;
  }

  .metal-calculator-result strong {
    font-size: 1.55rem;
  }

  .metal-calculator-result span {
    font-size: .66rem;
  }

  .metal-calculator-guide h2 {
    font-size: .98rem;
  }

  .metal-calculator-guide ol {
    font-size: .72rem;
  }

  .metal-calculator-guide p,
  .metal-settings-intro {
    font-size: .68rem;
  }

  .metal-modal>header small {
    font-size: .65rem;
  }

  .metal-modal>header h2 {
    font-size: 1rem;
  }

  .metal-kind-picker button,
  .metal-modal>footer button {
    min-height: 43px;
    font-size: .73rem;
  }

  .metal-form-grid label>small,
  .metal-modal-error {
    font-size: .63rem;
  }
}

@media (max-width: 390px) {
  .metal-wallet-tabs button {
    padding-inline: 8px;
    font-size: .72rem;
  }

  .metal-wallet-kpis {
    grid-template-columns: 1fr;
  }
}

/* ── Metals wallet: dedicated mobile cards v8 ─────────────────────── */
.metal-holdings-mobile-list {
  display: none;
}

@media (max-width: 900px) {
  #page-content.more-mobile-subscreen.metal-wallet-page {
    grid-auto-rows: max-content;
    align-content: start;
  }
}

@media (max-width: 760px) {
  .metal-wallet-hero {
    gap: 11px;
    padding: 14px;
    border-radius: 19px;
  }

  .metal-wallet-hero-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    flex-wrap: wrap;
  }

  .metal-wallet-hero h1,
  .metal-wallet-hero p {
    display: none;
  }

  .metal-wallet-eyebrow {
    font-size: .76rem;
  }

  .metal-wallet-live {
    width: auto;
    margin: 0;
    padding: 6px 8px;
    font-size: .62rem;
  }

  .metal-wallet-live small {
    font-size: .58rem;
  }

  .metal-wallet-hero-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    padding: 13px;
    border-radius: 15px;
  }

  .metal-wallet-hero-value>small {
    grid-column: 1 / -1;
    font-size: .68rem;
  }

  .metal-wallet-hero-value>strong {
    grid-column: 1;
    font-size: 1.3rem;
  }

  .metal-wallet-hero-value>span {
    grid-column: 2;
    align-self: center;
    font-size: .65rem;
    white-space: nowrap;
  }

  .metal-wallet-hero-value>div {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 5px;
  }

  .metal-wallet-hero-value button {
    min-height: 40px;
    font-size: .7rem;
  }

  .metal-wallet-tabs {
    gap: 6px;
    padding: 7px;
    border-radius: 16px;
  }

  .metal-wallet-tabs button {
    min-height: 47px;
    box-sizing: border-box;
    padding: 8px 9px;
    font-size: .72rem;
  }

  .metal-holdings-panel {
    overflow: hidden;
  }

  .metal-holdings-toolbar {
    gap: 14px;
    padding: 15px 14px 13px;
  }

  .metal-holdings-toolbar>div:last-child {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .metal-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
  }

  .metal-filter button {
    width: 100%;
    min-height: 36px;
    padding: 6px;
  }

  .metal-primary-action {
    width: 100%;
    min-height: 43px;
    justify-content: center;
  }

  .metal-holdings-table-wrap {
    display: none;
  }

  .metal-holdings-mobile-list {
    display: grid;
    gap: 11px;
    padding: 12px;
    background: rgba(148, 163, 184, .018);
  }

  .metal-holding-mobile-card {
    --tone: 218, 176, 81;
    position: relative;
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(var(--tone), .18);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(var(--tone), .055), rgba(15, 23, 38, .72));
    box-shadow: 0 12px 28px rgba(2, 6, 23, .09);
  }

  .metal-holding-mobile-card.silver {
    --tone: 165, 177, 195;
  }

  .metal-holding-mobile-card>header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  .metal-mobile-holding-identity {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .metal-mobile-holding-identity>span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: rgb(var(--tone));
    border-radius: 12px;
    background: rgba(var(--tone), .11);
  }

  .metal-mobile-holding-identity>div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .metal-mobile-holding-identity small {
    color: rgb(var(--tone));
    font-size: .62rem;
    font-weight: 800;
  }

  .metal-mobile-holding-identity strong {
    overflow: hidden;
    color: #e4e9f1;
    font-size: .84rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .metal-mobile-holding-identity em {
    color: #66758a;
    font-size: .57rem;
    font-style: normal;
  }

  .metal-mobile-holding-actions {
    display: flex;
    gap: 5px;
  }

  .metal-mobile-holding-actions button {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    color: #8794a8;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    background: rgba(20, 29, 45, .88);
    cursor: pointer;
  }

  .metal-mobile-holding-actions button:last-child {
    color: #ed7087;
  }

  .metal-mobile-holding-value {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 13px;
    background: rgba(var(--tone), .065);
  }

  .metal-mobile-holding-value>div {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .metal-mobile-holding-value small {
    color: #77869b;
    font-size: .59rem;
  }

  .metal-mobile-holding-value strong {
    overflow: hidden;
    color: #e5eaf1;
    font-size: 1rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .metal-mobile-holding-value span {
    color: #6e7d91;
    font-size: .55rem;
  }

  .metal-mobile-holding-value>b {
    display: grid;
    flex: 0 0 auto;
    gap: 1px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(237, 112, 135, .075);
    font-size: .72rem;
    text-align: center;
  }

  .metal-mobile-holding-value>b.positive {
    background: rgba(43, 190, 145, .075);
  }

  .metal-mobile-holding-value>b small {
    color: inherit;
    font-size: .55rem;
  }

  .metal-mobile-holding-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .metal-mobile-holding-facts>div {
    display: grid;
    min-width: 0;
    min-height: 58px;
    align-content: center;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, .075);
    border-radius: 11px;
    background: rgba(148, 163, 184, .025);
  }

  .metal-mobile-holding-facts small {
    color: #718096;
    font-size: .58rem;
  }

  .metal-mobile-holding-facts strong {
    overflow: hidden;
    color: #ccd5e0;
    font-size: .7rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .metal-mobile-holding-facts span {
    color: #66758a;
    font-size: .53rem;
  }

  html.light .metal-holdings-mobile-list {
    background: #f7f8fb;
  }

  html.light .metal-holding-mobile-card {
    background: linear-gradient(145deg, rgba(var(--tone), .08), #fff);
    box-shadow: 0 10px 25px rgba(71, 85, 105, .08);
  }

  html.light .metal-mobile-holding-identity strong,
  html.light .metal-mobile-holding-value strong,
  html.light .metal-mobile-holding-facts strong {
    color: #253146;
  }

  html.light .metal-mobile-holding-actions button,
  html.light .metal-mobile-holding-facts>div {
    border-color: #e4e8ee;
    background: rgba(255, 255, 255, .88);
  }
}

@media (max-width: 390px) {
  .metal-wallet-live small {
    display: none;
  }

  .metal-wallet-hero-value>div {
    grid-template-columns: 1fr;
  }

  .metal-mobile-holding-identity {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
  }

  .metal-mobile-holding-identity>span {
    width: 38px;
    height: 38px;
  }

  .metal-mobile-holding-actions button {
    width: 34px;
    height: 34px;
  }

  .metal-mobile-holding-value {
    align-items: stretch;
    flex-direction: column;
  }

  .metal-mobile-holding-value>b {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── My Space template marketplace v7 ──────────────────────────────── */
.custom-library {
  width: min(1160px, 100%);
}

.custom-library-header {
  padding: 29px 32px 20px;
}

.custom-library-header>div {
  max-width: 780px;
}

.custom-library-header h2 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  letter-spacing: -.025em;
}

.custom-library-header p {
  max-width: 720px;
  font-size: .78rem;
  line-height: 1.8;
}

.custom-library-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.custom-library-highlights span {
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid rgba(130, 139, 169, .11);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8f99ae;
  background: rgba(130, 139, 169, .045);
  font-size: .66rem;
  font-weight: 800;
}

.custom-library-highlights svg {
  color: #8b7df2;
}

.custom-library-tools {
  padding: 0 32px 17px;
}

.custom-library-search input {
  font-size: .76rem;
}

.custom-library-categories button {
  min-height: 35px;
  padding-inline: 14px;
  font-size: .68rem;
}

.custom-library-grid {
  padding: 5px 32px 26px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.custom-template-card {
  min-height: 330px;
  padding: 18px;
  border-radius: 21px;
  display: flex;
  flex-direction: column;
}

.custom-template-card::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  inset-inline-end: -64px;
  top: -65px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--template-color) 9%, transparent);
  pointer-events: none;
}

.custom-template-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.custom-template-badges {
  display: flex;
  align-items: center;
  gap: 5px;
}

.custom-template-category,
.custom-template-featured {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 850;
}

.custom-template-category {
  background: rgba(130, 139, 169, .055);
}

.custom-template-featured {
  color: var(--template-color);
  background: color-mix(in srgb, var(--template-color) 9%, transparent);
}

.custom-template-card h3 {
  margin: 15px 0 5px;
  font-size: 1rem;
}

.custom-template-card>p {
  min-height: 44px;
  font-size: .7rem;
  line-height: 1.75;
}

.custom-template-outcome {
  min-height: 49px;
  margin: 11px 0 10px;
  padding: 9px 10px;
  border-radius: 11px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #9aa3b6;
  background: color-mix(in srgb, var(--template-color) 5%, transparent);
  font-size: .65rem;
  line-height: 1.65;
}

.custom-template-outcome svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--template-color);
}

.custom-template-workflow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}

.custom-template-workflow span {
  position: relative;
  min-height: 24px;
  padding: 4px 8px 4px 17px;
  border: 1px solid rgba(130, 139, 169, .08);
  border-radius: 8px;
  color: #8f99ad;
  background: rgba(130, 139, 169, .03);
  font-size: .58rem;
  font-weight: 750;
}

.custom-template-workflow span::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  inset-inline-start: 7px;
  top: 50%;
  border-radius: 50%;
  background: var(--workflow-color);
  transform: translateY(-50%);
}

.custom-template-actions {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 7px;
  margin-top: auto;
}

.custom-template-preview-button,
.custom-template-add {
  min-height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}

.custom-template-preview-button {
  border: 1px solid color-mix(in srgb, var(--template-color) 24%, transparent);
  color: var(--template-color);
  background: color-mix(in srgb, var(--template-color) 8%, transparent);
}

.custom-template-add {
  width: 42px;
  padding: 0;
  border: 0;
  color: #fff;
  background: var(--template-color);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--template-color) 23%, transparent);
}

.custom-template-preview-card {
  position: relative;
  width: min(1060px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--template-color) 20%, rgba(131, 124, 215, .17));
  border-radius: 29px;
  color: #eef1ff;
  background:
    radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--template-color) 20%, transparent), transparent 30%),
    linear-gradient(155deg, #15182b, #0d1020);
  box-shadow: 0 34px 100px rgba(4, 7, 20, .52);
  font-family: var(--font-arabic);
  animation: custom-modal-in .23s ease;
}

html.light .custom-template-preview-card {
  color: #222a41;
  background:
    radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--template-color) 11%, transparent), transparent 31%),
    linear-gradient(155deg, #fff, #f8f8ff);
  box-shadow: 0 30px 85px rgba(44, 48, 75, .24);
}

.custom-template-preview-card>.custom-modal-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  inset-inline-end: 18px;
}

.custom-template-preview-layout {
  min-height: 570px;
  padding: 54px 38px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  align-items: center;
  gap: 38px;
}

.custom-template-preview-demo {
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--template-color) 17%, rgba(130, 139, 169, .12));
  border-radius: 24px;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 24px 50px rgba(3, 6, 20, .18);
  transform: perspective(1000px) rotateY(2deg) rotateX(1deg);
}

html.light .custom-template-preview-demo {
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 22px 48px rgba(44, 52, 84, .1);
}

.custom-template-preview-demo>header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.custom-template-preview-demo>header>span,
.custom-template-preview-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--template-color);
  background: color-mix(in srgb, var(--template-color) 12%, transparent);
}

.custom-template-preview-demo>header>div {
  display: grid;
  gap: 2px;
}

.custom-template-preview-demo header small {
  color: var(--template-color);
  font-size: .65rem;
  font-weight: 850;
}

.custom-template-preview-demo header strong {
  color: inherit;
  font-size: 1rem;
}

.custom-template-preview-metrics {
  margin: 18px 0 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.custom-template-preview-metrics article {
  min-height: 78px;
  padding: 11px;
  border: 1px solid rgba(130, 139, 169, .09);
  border-radius: 13px;
  display: grid;
  align-content: center;
  gap: 3px;
  background: rgba(130, 139, 169, .035);
}

.custom-template-preview-metrics small {
  overflow: hidden;
  color: #8c96aa;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-template-preview-metrics strong {
  color: var(--template-color);
  font-size: 1.2rem;
}

.custom-template-preview-board {
  display: grid;
  gap: 7px;
}

.custom-template-preview-board article {
  min-height: 59px;
  padding: 9px 11px;
  border: 1px solid rgba(130, 139, 169, .09);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 7px 1fr 29px;
  align-items: center;
  gap: 9px;
  background: rgba(130, 139, 169, .025);
}

.custom-template-preview-board i {
  width: 7px;
  height: 28px;
  border-radius: 999px;
  background: var(--sample-color);
}

.custom-template-preview-board article>div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.custom-template-preview-board strong {
  overflow: hidden;
  color: inherit;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-template-preview-board small {
  color: #8791a5;
  font-size: .61rem;
}

.custom-template-preview-board article>span {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #8b7df2;
  background: rgba(139, 125, 242, .07);
}

.custom-template-preview-demo>footer {
  margin-top: 14px;
  padding: 5px;
  border-radius: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(130, 139, 169, .045);
}

.custom-template-preview-demo>footer span {
  min-height: 31px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #858fa4;
  font-size: .62rem;
  font-weight: 800;
}

.custom-template-preview-demo>footer span.active {
  color: #fff;
  background: var(--template-color);
}

.custom-template-preview-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.custom-template-preview-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 18px;
}

.custom-template-preview-copy h2 {
  margin: 2px 0 8px;
  color: inherit;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 950;
}

.custom-template-preview-copy>p {
  margin: 0;
  color: #929caf;
  font-size: .78rem;
  line-height: 1.85;
}

.custom-template-preview-benefits {
  width: 100%;
  margin: 18px 0;
  display: grid;
  gap: 7px;
}

.custom-template-preview-benefits div {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9aa3b5;
  background: rgba(130, 139, 169, .04);
  font-size: .7rem;
  font-weight: 750;
}

.custom-template-preview-benefits svg {
  color: var(--template-color);
}

.custom-template-preview-includes {
  width: 100%;
  margin-bottom: 19px;
  display: grid;
  gap: 8px;
}

.custom-template-preview-includes>span {
  color: #7e889c;
  font-size: .63rem;
  font-weight: 850;
}

.custom-template-preview-includes>div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.custom-template-preview-includes b {
  padding: 5px 8px;
  border: 1px solid rgba(130, 139, 169, .08);
  border-radius: 8px;
  color: #8f99ad;
  background: rgba(130, 139, 169, .035);
  font-size: .61rem;
}

.custom-template-preview-copy>.custom-primary-button {
  width: 100%;
  min-height: 45px;
  background: linear-gradient(135deg, var(--template-color), color-mix(in srgb, var(--template-color) 72%, #251b45));
}

.custom-template-preview-hint {
  width: 100%;
  margin-top: 8px;
  color: #747f93;
  font-size: .6rem;
  text-align: center;
}

@media (max-width: 1050px) {
  .custom-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-template-preview-layout {
    grid-template-columns: 1fr;
  }

  .custom-template-preview-demo {
    transform: none;
  }
}

@media (max-width: 620px) {
  .custom-section-modal-overlay {
    padding: 9px;
  }

  .custom-library {
    max-height: calc(100dvh - 18px);
    border-radius: 24px;
  }

  .custom-library-header {
    padding: 21px 18px 14px;
  }

  .custom-library-header h2 {
    padding-inline-end: 35px;
    font-size: 1.4rem;
  }

  .custom-library-header p {
    font-size: .72rem;
  }

  .custom-library-highlights {
    gap: 5px;
  }

  .custom-library-highlights span {
    font-size: .6rem;
  }

  .custom-library-tools {
    padding: 0 18px 14px;
  }

  .custom-library-grid {
    padding: 4px 18px 22px;
    grid-template-columns: 1fr;
  }

  .custom-template-card {
    min-height: 310px;
  }

  .custom-template-preview-card {
    max-height: calc(100dvh - 18px);
    border-radius: 24px;
  }

  .custom-template-preview-layout {
    min-height: 0;
    padding: 59px 16px 22px;
    gap: 24px;
  }

  .custom-template-preview-demo {
    padding: 14px;
    border-radius: 19px;
  }

  .custom-template-preview-metrics article {
    min-height: 68px;
    padding: 8px;
  }

  .custom-template-preview-metrics small {
    font-size: .52rem;
  }

  .custom-template-preview-board article {
    min-height: 54px;
  }

  .custom-template-preview-copy h2 {
    font-size: 1.55rem;
  }

  .custom-template-preview-copy>p {
    font-size: .73rem;
  }
}

/* Admin subscriptions center v4 */
.admin-subscriptions-loading {
  display: grid;
  min-height: 360px;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #8390a4;
  font-size: .72rem
}

.admin-subscriptions-v4 {
  display: grid;
  gap: 15px
}

.admin-subscriptions-hero {
  position: relative;
  display: flex;
  min-height: 158px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 27px 29px;
  border: 1px solid rgba(139, 125, 246, .17);
  border-radius: 23px;
  background: radial-gradient(circle at 8% 0, rgba(43, 190, 145, .09), transparent 31%), radial-gradient(circle at 95% 110%, rgba(139, 125, 246, .2), transparent 43%), linear-gradient(145deg, rgba(25, 33, 50, .97), rgba(14, 21, 35, .96));
  box-shadow: 0 20px 54px rgba(2, 6, 23, .17)
}

.admin-subscriptions-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 650px
}

.admin-subscriptions-hero-copy>span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9f94f8;
  font-size: .61rem;
  font-weight: 850
}

.admin-subscriptions-hero h1 {
  margin: 6px 0;
  color: #f4f7fb;
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: -.025em
}

.admin-subscriptions-hero p {
  max-width: 610px;
  margin: 0;
  color: #8896aa;
  font-size: .69rem;
  line-height: 1.8
}

.admin-subscriptions-hero aside {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 275px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 15px;
  background: rgba(148, 163, 184, .045)
}

.admin-subscriptions-hero aside>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #a99fff;
  border-radius: 12px;
  background: rgba(139, 125, 246, .11)
}

.admin-subscriptions-hero aside>div {
  display: grid;
  gap: 3px
}

.admin-subscriptions-hero aside strong {
  color: #e5eaf2;
  font-size: .66rem
}

.admin-subscriptions-hero aside small {
  color: #768499;
  font-size: .55rem
}

.admin-subscriptions-add {
  grid-column: 1/-1;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #6658df, #8176ec);
  box-shadow: 0 8px 18px rgba(101, 87, 223, .23);
  font: inherit;
  font-size: .61rem;
  font-weight: 850;
  cursor: pointer
}

.admin-subscriptions-add:disabled {
  opacity: .6;
  cursor: wait
}

.admin-subscription-tabs {
  display: flex;
  max-width: 100%;
  gap: 5px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 14px;
  background: rgba(17, 24, 39, .61);
  scrollbar-width: none
}

.admin-subscription-tabs::-webkit-scrollbar {
  display: none
}

.admin-subscription-tabs button {
  display: inline-flex;
  min-height: 41px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  color: #818fa3;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: .62rem;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  transition: .18s ease
}

.admin-subscription-tabs button:hover {
  color: #bdb6ff;
  background: rgba(139, 125, 246, .06)
}

.admin-subscription-tabs button.active {
  color: #dedaff;
  background: linear-gradient(145deg, rgba(139, 125, 246, .2), rgba(139, 125, 246, .1));
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .14)
}

.admin-subscription-tabs button b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  color: #8b98aa;
  border-radius: 7px;
  background: rgba(148, 163, 184, .08);
  font-size: .51rem
}

.admin-subscription-tabs button.active b {
  color: #cfc9ff;
  background: rgba(139, 125, 246, .16)
}

.admin-subscriptions-content {
  min-width: 0
}

.subscription-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 13px
}

.subscription-metrics article {
  --metric: 139, 125, 246;
  display: flex;
  min-height: 91px;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(24, 32, 49, .95), rgba(15, 22, 36, .92));
  box-shadow: 0 11px 28px rgba(2, 6, 23, .1)
}

.subscription-metrics article.tone-green {
  --metric: 43, 190, 145
}

.subscription-metrics article.tone-amber {
  --metric: 231, 166, 63
}

.subscription-metrics article.tone-rose {
  --metric: 237, 112, 135
}

.subscription-metrics article.tone-blue {
  --metric: 72, 159, 217
}

.subscription-metrics article>span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  color: rgb(var(--metric));
  border-radius: 11px;
  background: rgba(var(--metric), .1)
}

.subscription-metrics article>div {
  display: grid;
  min-width: 0;
  gap: 2px
}

.subscription-metrics small {
  overflow: hidden;
  color: #8390a4;
  font-size: .53rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subscription-metrics strong {
  color: #edf1f7;
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1.05
}

.subscription-metrics em {
  overflow: hidden;
  color: #66748a;
  font-size: .48rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subscription-workspace,
.payment-ledger {
  display: grid;
  gap: 12px
}

.subscription-toolbar {
  display: grid;
  grid-template-columns: minmax(250px, 1.8fr) repeat(5, minmax(120px, .7fr)) 38px;
  align-items: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 15px;
  background: rgba(17, 24, 39, .61)
}

.subscription-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: #77869a;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 10px;
  background: rgba(148, 163, 184, .04)
}

.subscription-search input {
  width: 100%;
  height: 39px;
  color: #e2e7ef;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .61rem
}

.subscription-search input::placeholder {
  color: #637186
}

.subscription-toolbar select {
  width: 100%;
  height: 41px;
  padding: 0 8px;
  color: #a5b0bf;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 10px;
  outline: 0;
  background: #151d2d;
  font: inherit;
  font-size: .57rem;
  font-weight: 700
}

.subscription-toolbar select:focus,
.subscription-search:focus-within {
  border-color: rgba(139, 125, 246, .48);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .07)
}

.subscription-reset {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #8d99aa;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 10px;
  background: rgba(148, 163, 184, .04);
  cursor: pointer
}

.subscription-reset:hover {
  color: #c7c0ff;
  border-color: rgba(139, 125, 246, .28);
  background: rgba(139, 125, 246, .08)
}

.subscription-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 3px
}

.subscription-results-head>div {
  display: flex;
  align-items: baseline;
  gap: 5px
}

.subscription-results-head strong {
  color: #dfe5ed;
  font-size: .72rem
}

.subscription-results-head span {
  color: #758397;
  font-size: .57rem
}

.subscription-results-head mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  color: #a69df5;
  border-radius: 7px;
  background: rgba(139, 125, 246, .08);
  font-size: .5rem
}

.subscription-table-wrap {
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 17px;
  background: rgba(17, 24, 39, .61);
  box-shadow: 0 14px 36px rgba(2, 6, 23, .1)
}

.subscription-table {
  width: 100%;
  min-width: 1110px;
  border-collapse: collapse
}

.subscription-table th {
  padding: 13px 12px;
  color: #718096;
  border-bottom: 1px solid rgba(148, 163, 184, .11);
  background: rgba(148, 163, 184, .025);
  font-size: .56rem;
  font-weight: 850;
  text-align: start;
  white-space: nowrap
}

.subscription-table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
  vertical-align: middle
}

.subscription-table tr:last-child td {
  border-bottom: 0
}

.subscription-table tbody tr {
  transition: .18s ease
}

.subscription-table tbody tr:hover {
  background: rgba(139, 125, 246, .035)
}

.subscription-customer {
  display: flex;
  min-width: 190px;
  align-items: center;
  gap: 9px
}

.subscription-customer>span {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  place-items: center;
  color: #d8d3ff;
  border: 1px solid rgba(139, 125, 246, .15);
  border-radius: 11px;
  background: rgba(139, 125, 246, .11);
  font-size: .68rem;
  font-weight: 950
}

.subscription-customer>div,
.subscription-plan-cell,
.subscription-date {
  display: grid;
  min-width: 0;
  gap: 2px
}

.subscription-customer strong,
.subscription-plan-cell strong,
.subscription-date strong {
  max-width: 190px;
  overflow: hidden;
  color: #dfe5ed;
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subscription-customer small,
.subscription-plan-cell small,
.subscription-date small,
.subscription-payment-method {
  display: block;
  color: #748197;
  font-size: .51rem
}

.subscription-customer--compact {
  min-width: 170px
}

.subscription-amount {
  display: block;
  color: #dfe5ed;
  font-size: .62rem;
  white-space: nowrap
}

.subscription-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .52rem;
  font-weight: 850;
  white-space: nowrap
}

.subscription-status.tone-active {
  color: #43c99d;
  background: rgba(43, 190, 145, .07)
}

.subscription-status.tone-pending {
  color: #e7a63f;
  background: rgba(231, 166, 63, .07)
}

.subscription-status.tone-expired,
.subscription-status.tone-cancelled {
  color: #ed7087;
  background: rgba(237, 112, 135, .07)
}

.subscription-date .tone-safe {
  color: #43b992
}

.subscription-date .tone-warning {
  color: #e3a23d
}

.subscription-date .tone-danger {
  color: #e86b82
}

.subscription-reference,
.payment-order-id {
  display: block;
  max-width: 150px;
  overflow: hidden;
  padding: 4px 6px;
  color: #8d9aad;
  border-radius: 6px;
  background: rgba(148, 163, 184, .055);
  font-size: .49rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subscription-row-actions {
  display: flex;
  min-width: 130px;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap
}

.subscription-action {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 8px;
  background: rgba(148, 163, 184, .04);
  font: inherit;
  font-size: .51rem;
  font-weight: 850;
  cursor: pointer
}

.subscription-action.is-renew,
.subscription-action.is-activate {
  color: #9f94f8;
  border-color: rgba(139, 125, 246, .18);
  background: rgba(139, 125, 246, .08)
}

.subscription-action.is-stop {
  color: #ed7a8e;
  border-color: rgba(237, 112, 135, .15);
  background: rgba(237, 112, 135, .06)
}

.subscription-action:hover {
  filter: brightness(1.16);
  transform: translateY(-1px)
}

.subscription-action:disabled {
  opacity: .5;
  cursor: wait;
  transform: none
}

.subscription-readonly {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #748197;
  font-size: .52rem
}

.subscription-empty {
  display: grid;
  min-height: 180px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 25px;
  color: #7b889c;
  text-align: center
}

.subscription-empty>svg {
  color: #978bed
}

.subscription-empty strong {
  color: #dce3ed;
  font-size: .72rem
}

.subscription-empty span {
  font-size: .56rem
}

.subscription-mobile-list {
  display: grid;
  gap: 9px
}

.subscription-mobile-card {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .95), rgba(14, 21, 35, .92))
}

.subscription-mobile-card>header,
.subscription-mobile-card>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px
}

.subscription-mobile-card>header>div {
  display: grid;
  min-width: 0;
  gap: 2px
}

.subscription-mobile-card header strong {
  overflow: hidden;
  color: #e4e9f1;
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subscription-mobile-card header small {
  overflow: hidden;
  color: #748197;
  font-size: .52rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subscription-mobile-plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .07);
  border-radius: 11px;
  background: rgba(148, 163, 184, .03)
}

.subscription-mobile-plan>span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  color: #9e94f1;
  border-radius: 9px;
  background: rgba(139, 125, 246, .09)
}

.subscription-mobile-plan>div {
  display: grid;
  gap: 2px
}

.subscription-mobile-plan strong {
  color: #dce3ed;
  font-size: .61rem
}

.subscription-mobile-plan small {
  color: #748197;
  font-size: .49rem
}

.subscription-mobile-plan em {
  color: #dfe5ed;
  font-size: .61rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap
}

.subscription-mobile-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px
}

.subscription-mobile-facts>div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px;
  border-radius: 9px;
  background: rgba(148, 163, 184, .035)
}

.subscription-mobile-facts small {
  color: #6f7d91;
  font-size: .48rem
}

.subscription-mobile-facts strong,
.subscription-mobile-facts code {
  overflow: hidden;
  color: #b9c2cf;
  font-size: .53rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subscription-mobile-facts span {
  font-size: .45rem
}

.subscription-mobile-card>footer {
  padding-top: 9px;
  border-top: 1px solid rgba(148, 163, 184, .07)
}

.subscription-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 4px
}

.subscription-pagination button {
  display: inline-flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  color: #9aa6b7;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 9px;
  background: rgba(17, 24, 39, .58);
  font: inherit;
  font-size: .53rem;
  font-weight: 800;
  cursor: pointer
}

.subscription-pagination button:not(:disabled):hover {
  color: #c8c1ff;
  border-color: rgba(139, 125, 246, .28)
}

.subscription-pagination button:disabled {
  opacity: .35;
  cursor: default
}

.subscription-pagination span {
  color: #718096;
  font-size: .53rem
}

.subscription-pagination strong {
  color: #a4afbf
}

.payment-ledger-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px
}

.payment-ledger-metrics article {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(24, 32, 49, .95), rgba(15, 22, 36, .92))
}

.payment-ledger-metrics article>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #9e94f2;
  border-radius: 11px;
  background: rgba(139, 125, 246, .09)
}

.payment-ledger-metrics article.is-success>span {
  color: #43c99d;
  background: rgba(43, 190, 145, .08)
}

.payment-ledger-metrics article.is-value>span {
  color: #55aee8;
  background: rgba(72, 159, 217, .08)
}

.payment-ledger-metrics article>div {
  display: grid;
  gap: 2px
}

.payment-ledger-metrics small {
  color: #8190a4;
  font-size: .55rem
}

.payment-ledger-metrics strong {
  color: #e7ecf3;
  font-size: 1.1rem
}

.payment-ledger-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  color: #8f85e7;
  border: 1px solid rgba(139, 125, 246, .12);
  border-radius: 12px;
  background: rgba(139, 125, 246, .05)
}

.payment-ledger-note p {
  display: grid;
  gap: 2px;
  margin: 0
}

.payment-ledger-note strong {
  color: #c9c3ff;
  font-size: .59rem
}

.payment-ledger-note span {
  color: #748197;
  font-size: .51rem
}

.payment-invoice {
  color: #bbb4ff;
  font-size: .58rem
}

.payment-table {
  min-width: 1060px
}

.admin-subscriptions-v4 .admin-coupons-panel {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 17px;
  background: rgba(17, 24, 39, .61);
  box-shadow: 0 14px 36px rgba(2, 6, 23, .1)
}

.admin-subscriptions-v4 .admin-coupons-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .08)
}

.admin-subscriptions-v4 .admin-coupons-head h3 {
  color: #e7ecf3;
  font-size: .84rem
}

.admin-subscriptions-v4 .admin-coupons-head p {
  margin: 3px 0 0;
  color: #78869a;
  font-size: .59rem
}

.admin-subscriptions-v4 .coupon-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0
}

.admin-subscriptions-v4 .coupon-insight-card {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 12px;
  background: rgba(148, 163, 184, .03)
}

.admin-subscriptions-v4 .coupon-create-form {
  padding: 12px;
  border: 1px solid rgba(139, 125, 246, .1);
  border-radius: 13px;
  background: rgba(139, 125, 246, .035)
}

.admin-subscriptions-v4 .coupon-create-form input,
.admin-subscriptions-v4 .coupon-create-form select {
  min-height: 40px;
  color: #dce3ed;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 9px;
  background: #151d2d;
  font: inherit;
  font-size: .6rem
}

.admin-subscription-modal-backdrop .admin-subscription-form-modal {
  width: min(560px, calc(100vw - 28px));
  max-width: 560px;
  max-height: 92dvh;
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 21px;
  background: linear-gradient(145deg, #182133, #101827);
  box-shadow: 0 35px 100px rgba(2, 6, 23, .4)
}

.admin-subscription-modal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  background: radial-gradient(circle at 92% 0, rgba(139, 125, 246, .15), transparent 40%)
}

.admin-subscription-modal-head>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #a99fff;
  border-radius: 13px;
  background: rgba(139, 125, 246, .11)
}

.admin-subscription-modal-head>div {
  display: grid;
  gap: 2px
}

.admin-subscription-modal-head small {
  color: #9f94f8;
  font-size: .57rem;
  font-weight: 850
}

.admin-subscription-modal-head h2 {
  margin: 0;
  color: #eef2f8;
  font-size: .95rem
}

.admin-subscription-modal-head p {
  margin: 0;
  color: #7d899d;
  font-size: .56rem
}

.admin-subscription-modal-head>button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #8996a9;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 9px;
  background: rgba(148, 163, 184, .04);
  cursor: pointer
}

.admin-subscription-form-modal .modal-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 13px !important;
  padding: 19px 20px !important
}

.admin-subscription-form-modal .form-group {
  display: grid;
  gap: 6px
}

.admin-subscription-form-modal .form-label {
  color: #8d9aae;
  font-size: .6rem
}

.admin-subscription-form-modal .form-input,
.admin-subscription-form-modal .form-select {
  width: 100%;
  height: 43px;
  box-sizing: border-box;
  color: #dfe5ee;
  border-color: rgba(148, 163, 184, .13);
  background: #141d2d;
  font-size: .67rem
}

.admin-subscription-form-modal .modal-footer {
  padding: 13px 20px;
  border-top: 1px solid rgba(148, 163, 184, .1);
  background: rgba(2, 6, 23, .11)
}

html.light .admin-subscriptions-hero {
  border-color: rgba(139, 125, 246, .17);
  background: radial-gradient(circle at 8% 0, rgba(43, 190, 145, .09), transparent 31%), radial-gradient(circle at 95% 110%, rgba(139, 125, 246, .18), transparent 43%), linear-gradient(145deg, #fff, #f4f6fc);
  box-shadow: 0 20px 50px rgba(71, 85, 105, .1)
}

html.light .admin-subscriptions-hero h1,
html.light .subscription-metrics strong,
html.light .subscription-results-head strong,
html.light .subscription-customer strong,
html.light .subscription-plan-cell strong,
html.light .subscription-date strong,
html.light .subscription-amount,
html.light .subscription-empty strong,
html.light .subscription-mobile-card header strong,
html.light .subscription-mobile-plan strong,
html.light .subscription-mobile-plan em,
html.light .payment-ledger-metrics strong,
html.light .admin-subscriptions-v4 .admin-coupons-head h3 {
  color: #1f2a3e
}

html.light .admin-subscriptions-hero p,
html.light .admin-subscriptions-hero aside small {
  color: #64748b
}

html.light .admin-subscriptions-hero aside {
  border-color: #e1e6ee;
  background: rgba(255, 255, 255, .68)
}

html.light .admin-subscriptions-hero aside strong {
  color: #273248
}

html.light .admin-subscription-tabs,
html.light .subscription-toolbar,
html.light .subscription-table-wrap,
html.light .admin-subscriptions-v4 .admin-coupons-panel {
  border-color: #e1e6ee;
  background: #fff;
  box-shadow: 0 13px 35px rgba(71, 85, 105, .07)
}

html.light .subscription-metrics article,
html.light .payment-ledger-metrics article,
html.light .subscription-mobile-card {
  border-color: #e1e6ee;
  background: linear-gradient(145deg, #fff, #f7f9fc)
}

html.light .subscription-search {
  border-color: #dfe4ed;
  background: #f8f9fc
}

html.light .subscription-search input {
  color: #273248
}

html.light .subscription-toolbar select,
html.light .admin-subscriptions-v4 .coupon-create-form input,
html.light .admin-subscriptions-v4 .coupon-create-form select {
  color: #273248;
  border-color: #dfe4ed;
  background: #f8f9fc
}

html.light .subscription-table th {
  border-color: #e5e9f0;
  background: #f8f9fb
}

html.light .subscription-table td {
  border-color: #edf0f4
}

html.light .subscription-table tbody tr:hover {
  background: #faf9ff
}

html.light .subscription-mobile-plan,
html.light .subscription-mobile-facts>div {
  border-color: #e6eaf0;
  background: #f8f9fc
}

html.light .subscription-mobile-facts strong,
html.light .subscription-mobile-facts code {
  color: #475569
}

html.light .payment-ledger-note {
  border-color: #e2ddff;
  background: #faf9ff
}

html.light .admin-subscription-modal-backdrop .admin-subscription-form-modal {
  border-color: #dfe4ed;
  background: #fff
}

html.light .admin-subscription-modal-head {
  border-color: #e4e8ef;
  background: radial-gradient(circle at 92% 0, rgba(139, 125, 246, .12), transparent 40%), #fff
}

html.light .admin-subscription-modal-head h2 {
  color: #202b3f
}

html.light .admin-subscription-form-modal .form-input,
html.light .admin-subscription-form-modal .form-select {
  color: #273248;
  border-color: #dfe4ed;
  background: #f8f9fc
}

html.light .admin-subscription-form-modal .modal-footer {
  border-color: #e4e8ef;
  background: #f8f9fb
}

@media(max-width:1200px) {
  .subscription-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .subscription-toolbar {
    grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(120px, 1fr))
  }

  .subscription-toolbar select:nth-of-type(4),
  .subscription-toolbar select:nth-of-type(5) {
    grid-row: 2
  }

  .subscription-reset {
    grid-row: 2
  }
}

@media(max-width:760px) {
  .admin-subscriptions-v4 {
    gap: 10px
  }

  .admin-subscriptions-hero {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    padding: 21px 18px;
    border-radius: 20px
  }

  .admin-subscriptions-hero h1 {
    font-size: 1.22rem
  }

  .admin-subscriptions-hero p {
    font-size: .65rem
  }

  .admin-subscriptions-hero aside {
    width: 100%;
    min-width: 0;
    box-sizing: border-box
  }

  .admin-subscription-tabs {
    padding: 4px
  }

  .admin-subscription-tabs button {
    min-height: 39px;
    padding: 0 10px
  }

  .subscription-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px
  }

  .subscription-metrics article {
    min-height: 76px;
    padding: 11px
  }

  .subscription-metrics article:last-child {
    grid-column: 1/-1
  }

  .subscription-toolbar {
    grid-template-columns: 1fr 1fr;
    padding: 9px
  }

  .subscription-search {
    grid-column: 1/-1
  }

  .subscription-toolbar select:nth-of-type(n),
  .subscription-reset {
    grid-row: auto
  }

  .subscription-reset {
    width: 100%
  }

  .subscription-results-head {
    align-items: center
  }

  .subscription-mobile-facts {
    grid-template-columns: 1fr 1fr
  }

  .subscription-mobile-facts>div:last-child {
    grid-column: 1/-1
  }

  .subscription-pagination {
    justify-content: space-between
  }

  .payment-ledger-metrics {
    grid-template-columns: 1fr 1fr
  }

  .payment-ledger-metrics article:last-child {
    grid-column: 1/-1
  }

  .admin-subscriptions-v4 .coupon-insights {
    grid-template-columns: 1fr 1fr
  }

  .admin-subscriptions-v4 .coupon-create-form {
    grid-template-columns: 1fr 1fr
  }

  .admin-subscription-modal-backdrop {
    align-items: flex-end;
    padding: 0
  }

  .admin-subscription-modal-backdrop .admin-subscription-form-modal {
    width: 100%;
    max-width: none;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0
  }

  .admin-subscription-form-modal .modal-body {
    grid-template-columns: 1fr;
    padding: 16px !important
  }

  .admin-subscription-modal-head {
    padding: 17px 16px
  }
}

@media(max-width:440px) {
  .subscription-metrics article {
    align-items: flex-start;
    flex-direction: column
  }

  .subscription-metrics small,
  .subscription-metrics em {
    white-space: normal
  }

  .subscription-toolbar {
    grid-template-columns: 1fr
  }

  .subscription-search {
    grid-column: auto
  }

  .subscription-mobile-card>header {
    align-items: flex-start
  }

  .subscription-mobile-plan {
    grid-template-columns: auto minmax(0, 1fr)
  }

  .subscription-mobile-plan em {
    grid-column: 1/-1;
    text-align: end
  }

  .subscription-mobile-facts {
    grid-template-columns: 1fr
  }

  .subscription-mobile-facts>div:last-child {
    grid-column: auto
  }

  .payment-ledger-metrics {
    grid-template-columns: 1fr
  }

  .payment-ledger-metrics article:last-child {
    grid-column: auto
  }

  .admin-subscriptions-v4 .coupon-insights,
  .admin-subscriptions-v4 .coupon-create-form {
    grid-template-columns: 1fr
  }
}

.admin-subscription-tabs button.is-active {
  color: #dedaff;
  background: linear-gradient(145deg, rgba(139, 125, 246, .2), rgba(139, 125, 246, .1));
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .14)
}

.admin-subscription-tabs button>span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: #8d99ad;
  border-radius: 9px;
  background: rgba(148, 163, 184, .06)
}

.admin-subscription-tabs button.is-active>span {
  color: #b9b1ff;
  background: rgba(139, 125, 246, .14)
}

.admin-subscription-tabs button>div {
  display: grid;
  gap: 1px;
  text-align: start
}

.admin-subscription-tabs button strong {
  color: inherit;
  font-size: .6rem
}

.admin-subscription-tabs button small {
  color: #6f7d91;
  font-size: .47rem
}

.admin-subscription-tabs button.is-active small {
  color: #9f97df
}

.admin-subscription-content {
  min-width: 0
}

.admin-subscriptions-v4 .admin-coupon-insights {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.admin-subscriptions-v4 .admin-coupon-insights article {
  border-radius: 12px;
  background: rgba(148, 163, 184, .03)
}

html.light .admin-subscription-tabs button.is-active {
  color: #5448c9;
  background: #f1efff
}

html.light .admin-subscription-tabs button.is-active small {
  color: #786fc7
}

@media(max-width:760px) {
  .admin-subscription-tabs button {
    flex: 0 0 auto
  }

  .admin-subscriptions-v4 .admin-coupon-insights {
    grid-template-columns: 1fr 1fr
  }

  .admin-subscriptions-v4 .admin-coupon-insights article:last-child {
    grid-column: 1/-1
  }
}

@media(max-width:440px) {
  .admin-subscriptions-v4 .admin-coupon-insights {
    grid-template-columns: 1fr
  }

  .admin-subscriptions-v4 .admin-coupon-insights article:last-child {
    grid-column: auto
  }
}

/* Unified platform improvements — support inbox, billing, security, search and insights */
.support-public-page,
.support-public-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.support-public-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px;
  border: 1px solid var(--border-color, rgba(99, 102, 241, .14));
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(99, 102, 241, .1), rgba(255, 255, 255, .03))
}

.support-public-head>div {
  flex: 1
}

.support-public-head span,
.support-public-head p {
  color: var(--clr-text-muted);
  font-size: 13px
}

.support-public-head h1 {
  margin: 4px 0 6px;
  font-size: 28px
}

.support-public-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

.support-public-workspace {
  display: grid;
  grid-template-columns: minmax(290px, 360px) 1fr;
  min-height: 620px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .18));
  border-radius: 24px;
  overflow: hidden;
  background: var(--clr-surface, rgba(255, 255, 255, .7))
}

.support-public-workspace>aside {
  padding: 18px;
  border-inline-end: 1px solid var(--border-color, rgba(148, 163, 184, .18));
  background: rgba(148, 163, 184, .035)
}

.support-public-detail {
  min-width: 0;
  padding: 22px
}

.support-public-detail-shell>header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, .16));
  padding-bottom: 18px
}

.support-public-detail-shell h2 {
  font-size: 23px;
  margin: 5px 0
}

.support-public-detail-shell header p,
.support-public-detail-shell header span {
  color: var(--clr-text-muted);
  font-size: 13px
}

.support-public-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.support-public-controls label {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.support-public-controls span {
  font-size: 12px;
  color: var(--clr-text-muted)
}

.support-public-controls select,
.quiet-hours-panel input {
  border: 1px solid var(--border-color, rgba(148, 163, 184, .2));
  border-radius: 11px;
  background: var(--clr-surface, #fff);
  color: var(--clr-text);
  padding: 10px
}

.support-public-original {
  padding: 20px;
  border-radius: 18px;
  background: rgba(99, 102, 241, .055);
  line-height: 1.8
}

.support-public-original h3 {
  margin-top: 0
}

.support-public-original dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 0
}

.support-public-original dl div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .45);
  min-width: 0
}

.support-public-original dt {
  font-size: 11px;
  color: var(--clr-text-muted)
}

.support-public-original dd {
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px
}

.support-public-thread {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.support-public-thread article {
  padding: 15px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 15px;
  background: rgba(34, 197, 94, .05)
}

.support-public-thread article>div {
  display: flex;
  justify-content: space-between;
  gap: 12px
}

.support-public-thread time,
.support-public-thread small {
  color: var(--clr-text-muted);
  font-size: 11px
}

.support-public-thread p {
  line-height: 1.75
}

.support-public-inbox-btn {
  background: rgba(255, 255, 255, .1)
}

.quiet-hours-panel {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .18));
  border-radius: 15px;
  background: rgba(99, 102, 241, .04)
}

.quiet-hours-panel>div {
  display: flex;
  flex-direction: column
}

.quiet-hours-panel small {
  color: var(--clr-text-muted);
  font-size: 11px;
  line-height: 1.6
}

.quiet-hours-panel>label:not(.toggle-switch) {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px
}

.quiet-hours-panel.settings-schedule-target {
  animation: settingsScheduleTarget 1.8s ease both;
}

@keyframes settingsScheduleTarget {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(118, 103, 248, 0);
  }

  24%,
  68% {
    background: rgba(118, 103, 248, 0.11);
    box-shadow: 0 0 0 4px rgba(118, 103, 248, 0.12), 0 14px 30px rgba(78, 63, 190, 0.12);
  }
}

.notif-badge-icon-wrap.payment-type {
  background: rgba(34, 197, 94, .12);
  color: #16a34a
}

.notif-badge-icon-wrap.support-type {
  background: rgba(99, 102, 241, .12);
  color: #6366f1
}

.notif-badge-icon-wrap.schedule-type {
  background: rgba(245, 158, 11, .13);
  color: #d97706
}

.notif-tabs {
  overflow-x: auto;
  scrollbar-width: none
}

.billing-history-card {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .18));
  border-radius: 24px;
  background: var(--clr-surface, rgba(255, 255, 255, .72));
  box-shadow: 0 18px 50px rgba(15, 23, 42, .055)
}

.billing-history-card>header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px
}

.billing-history-card header small,
.billing-history-card header p {
  color: var(--clr-text-muted)
}

.billing-history-card h2 {
  margin: 3px 0
}

.billing-history-card header>span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 12px;
  background: rgba(99, 102, 241, .08);
  color: var(--clr-primary)
}

.billing-history-table {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.billing-history-table article {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .14));
  border-radius: 15px
}

.billing-history-main {
  display: flex;
  align-items: center;
  gap: 12px
}

.billing-history-main div,
.billing-history-amount {
  display: flex;
  flex-direction: column
}

.billing-history-main small,
.billing-history-amount small {
  color: var(--clr-text-muted);
  font-size: 11px
}

.billing-status {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .12);
  color: #d97706;
  font-size: 11px;
  font-weight: 800
}

.billing-status.captured {
  background: rgba(34, 197, 94, .12);
  color: #16a34a
}

.billing-history-table button {
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  background: rgba(99, 102, 241, .1);
  color: var(--clr-primary);
  font-weight: 700;
  cursor: pointer
}

.billing-history-empty {
  text-align: center;
  padding: 28px;
  color: var(--clr-text-muted)
}

.billing-history-empty strong,
.billing-history-empty svg {
  display: block;
  margin: 6px auto;
  color: var(--clr-text)
}

.stats-insights-v4 {
  margin: 0 0 26px;
  padding: 22px;
  border: 1px solid rgba(99, 102, 241, .15);
  border-radius: 24px;
  background: linear-gradient(140deg, rgba(99, 102, 241, .08), rgba(34, 197, 94, .035))
}

.stats-insights-v4>header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 17px
}

.stats-insights-v4 header small {
  color: var(--clr-primary);
  font-weight: 800
}

.stats-insights-v4 header h2 {
  margin: 4px 0
}

.stats-insights-v4 header>span {
  font-size: 12px;
  color: var(--clr-text-muted)
}

.stats-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.stats-insights-grid article {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 17px;
  background: var(--clr-surface, rgba(255, 255, 255, .7));
  border: 1px solid rgba(148, 163, 184, .13)
}

.stats-insights-grid article>span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: rgba(99, 102, 241, .1);
  color: #6366f1
}

.stats-insights-grid small {
  color: var(--clr-text-muted)
}

.stats-insights-grid strong {
  display: block;
  font-size: 22px;
  margin: 3px 0
}

.stats-insights-grid p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--clr-text-muted);
  margin: 0
}

.stats-next-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #5145dc;
  color: #fff
}

.stats-next-action>div {
  display: flex;
  align-items: center;
  gap: 12px
}

.stats-next-action p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .75);
  font-size: 12px
}

.stats-next-action button {
  border: 0;
  border-radius: 11px;
  padding: 10px 14px;
  background: #fff;
  color: #4338ca;
  font-weight: 800;
  white-space: nowrap
}

.account-security-card>.section-title {
  margin-bottom: 8px
}

.account-security-card>p {
  color: var(--clr-text-muted);
  font-size: 13px
}

.account-security-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px
}

.account-security-actions>span {
  font-size: 12px;
  color: var(--clr-text-muted)
}

.security-2fa-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px;
  border-radius: 16px;
  background: rgba(99, 102, 241, .07);
  margin-bottom: 20px
}

.security-2fa-panel>div {
  display: flex;
  gap: 12px;
  align-items: center
}

.security-2fa-panel p {
  margin: 3px 0;
  color: var(--clr-text-muted);
  font-size: 12px
}

.security-2fa-panel button,
.security-sessions-head button,
.security-session-list button {
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  background: #5145dc;
  color: #fff;
  font-weight: 700;
  cursor: pointer
}

.security-2fa-panel button.danger {
  background: #fee2e2;
  color: #dc2626
}

.security-sessions-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}

.security-sessions-head>div {
  display: flex;
  flex-direction: column
}

.security-sessions-head small {
  color: var(--clr-text-muted)
}

.security-session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 350px;
  overflow: auto
}

.security-session-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .16));
  border-radius: 14px
}

.security-session-list article>div {
  flex: 1;
  display: flex;
  flex-direction: column
}

.security-session-list small {
  font-size: 11px;
  color: var(--clr-text-muted)
}

.security-session-list em {
  font-style: normal;
  font-size: 10px;
  color: #16a34a;
  background: rgba(34, 197, 94, .1);
  padding: 3px 7px;
  border-radius: 999px
}

.security-session-list button {
  background: rgba(239, 68, 68, .1);
  color: #dc2626
}

.delete-account-warning {
  padding: 14px;
  border-radius: 13px;
  background: rgba(239, 68, 68, .08);
  color: #b91c1c;
  margin-bottom: 16px
}

.global-search-trigger {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .18));
  border-radius: 11px;
  background: rgba(148, 163, 184, .055);
  color: var(--clr-text-muted);
  cursor: pointer
}

.global-search-trigger span {
  font-size: 12px
}

.global-search-trigger kbd {
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--clr-surface, #fff);
  font: 10px inherit
}

.global-command-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 18px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(8px)
}

.global-command-dialog {
  width: min(650px, 100%);
  max-height: min(680px, 80vh);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 23px;
  background: var(--clr-surface, #fff);
  box-shadow: 0 35px 100px rgba(15, 23, 42, .3);
  overflow: hidden
}

.global-command-dialog>header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, .15))
}

.global-command-dialog input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--clr-text);
  font: 600 16px inherit
}

.global-command-dialog kbd {
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(148, 163, 184, .1);
  font-size: 10px
}

.global-command-hint {
  padding: 12px 17px 6px;
  font-size: 11px;
  color: var(--clr-text-muted)
}

.global-command-results {
  padding: 8px 10px;
  overflow: auto
}

.global-command-results button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  border: 0;
  border-radius: 13px;
  padding: 11px;
  background: transparent;
  color: var(--clr-text);
  cursor: pointer
}

.global-command-results button.selected,
.global-command-results button:hover {
  background: rgba(99, 102, 241, .09)
}

.global-command-results button>span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(99, 102, 241, .09);
  color: #6366f1
}

.global-command-results button>div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column
}

.global-command-results small {
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.global-command-results em {
  color: var(--clr-text-muted)
}

.global-command-dialog>footer {
  display: flex;
  gap: 16px;
  padding: 10px 17px;
  background: rgba(148, 163, 184, .05);
  color: var(--clr-text-muted);
  font-size: 10px
}

.global-command-loading,
.global-command-empty {
  text-align: center;
  padding: 32px;
  color: var(--clr-text-muted)
}

@media(max-width:900px) {
  .global-search-trigger {
    width: 38px;
    padding: 0;
    justify-content: center
  }

  .global-search-trigger span,
  .global-search-trigger kbd {
    display: none
  }

  .global-command-overlay {
    padding: 0;
    align-items: stretch
  }

  .global-command-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding-top: max(10px, env(safe-area-inset-top))
  }

  .support-public-head {
    flex-direction: column;
    padding: 18px
  }

  .support-public-head h1 {
    font-size: 22px
  }

  .support-public-metrics {
    grid-template-columns: 1fr 1fr
  }

  .support-public-workspace {
    display: block;
    min-height: 0
  }

  .support-public-workspace>aside {
    border-inline-end: 0
  }

  .support-public-detail {
    display: none;
    padding: 14px
  }

  .support-public-workspace.has-detail>aside {
    display: none
  }

  .support-public-workspace.has-detail>.support-public-detail {
    display: block
  }

  .support-public-original dl {
    grid-template-columns: 1fr
  }

  .support-public-controls {
    grid-template-columns: 1fr 1fr
  }

  .quiet-hours-panel {
    grid-template-columns: 1fr auto
  }

  .quiet-hours-panel>label:not(.toggle-switch) {
    display: flex;
    flex-direction: column;
    align-items: stretch
  }

  .billing-history-card {
    padding: 16px
  }

  .billing-history-card>header {
    flex-direction: column
  }

  .billing-history-table article {
    grid-template-columns: 1fr auto
  }

  .billing-history-table button {
    grid-column: 1/-1
  }

  .stats-insights-v4 {
    padding: 15px
  }

  .stats-insights-v4>header {
    flex-direction: column
  }

  .stats-insights-grid {
    grid-template-columns: 1fr
  }

  .stats-next-action {
    align-items: flex-start;
    flex-direction: column
  }

  .stats-next-action button {
    width: 100%
  }

  .account-security-actions,
  .security-2fa-panel,
  .security-sessions-head {
    align-items: stretch;
    flex-direction: column
  }

  .security-2fa-panel button,
  .security-sessions-head button {
    width: 100%
  }

  .notif-dropdown {
    font-size: 14px
  }

  .notif-card-title {
    font-size: 14px !important
  }

  .notif-card-msg {
    font-size: 13px !important
  }
}

@media(max-width:900px) {
  .support-public-workspace:has(.support-public-detail-shell)>aside {
    display: none
  }

  .support-public-workspace:has(.support-public-detail-shell)>.support-public-detail {
    display: block
  }
}

/* Admin users center — 2026 */
.admin-users-loading,
.admin-users-fatal {
  display: grid;
  min-height: 420px;
  place-content: center;
  justify-items: center;
  gap: 13px;
  color: var(--clr-text-muted);
  text-align: center
}

.admin-users-fatal>svg {
  color: #ef7087
}

.admin-users-fatal h2 {
  margin: 0;
  color: var(--clr-text)
}

.admin-users-fatal p {
  max-width: 520px;
  margin: 0
}

.admin-users-v4 {
  display: grid;
  gap: 15px;
  padding-bottom: 28px;
  transition: opacity .2s ease
}

.admin-users-fetching .admin-users-v4 {
  opacity: .62;
  pointer-events: none
}

.admin-users-hero {
  position: relative;
  display: flex;
  min-height: 178px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  overflow: hidden;
  padding: 27px 29px;
  border: 1px solid rgba(139, 125, 246, .16);
  border-radius: 24px;
  background: radial-gradient(circle at 6% 0, rgba(43, 190, 145, .12), transparent 30%), radial-gradient(circle at 94% 105%, rgba(139, 125, 246, .25), transparent 40%), linear-gradient(145deg, #192238, #0e1627);
  box-shadow: 0 22px 58px rgba(2, 6, 23, .19)
}

.admin-users-hero::after {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: .25;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: '';
  inset-inline-end: -88px;
  top: -125px;
  box-shadow: 0 0 0 38px rgba(255, 255, 255, .018), 0 0 0 76px rgba(255, 255, 255, .012);
  pointer-events: none
}

.admin-users-hero>div,
.admin-users-hero>aside {
  position: relative;
  z-index: 1
}

.admin-users-hero>div {
  display: grid;
  gap: 6px
}

.admin-users-hero h1 {
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(1.35rem, 2.7vw, 1.9rem);
  font-weight: 950
}

.admin-users-hero p {
  max-width: 720px;
  margin: 0;
  color: #8c99ad;
  font-size: .75rem;
  line-height: 1.8
}

.admin-users-hero aside {
  display: flex;
  align-items: center;
  gap: 8px
}

.admin-users-hero-pulse {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: #aeb8c7;
  font-size: .62rem;
  font-weight: 750
}

.admin-users-hero-pulse i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bbe91;
  box-shadow: 0 0 0 5px rgba(43, 190, 145, .1)
}

.admin-users-primary,
.admin-users-secondary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-size: .69rem;
  font-weight: 850;
  cursor: pointer;
  transition: .2s ease
}

.admin-users-primary {
  color: #fff;
  background: linear-gradient(135deg, #6d5ce7, #5145cc);
  box-shadow: 0 9px 22px rgba(81, 69, 220, .24)
}

.admin-users-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(81, 69, 220, .32)
}

.admin-users-secondary {
  color: #aab4c4;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(255, 255, 255, .045)
}

.admin-users-secondary:hover {
  color: #fff;
  border-color: rgba(139, 125, 246, .35);
  background: rgba(139, 125, 246, .1)
}

.admin-users-secondary.danger {
  color: #f28a9d;
  border-color: rgba(239, 112, 135, .18);
  background: rgba(239, 112, 135, .07)
}

.admin-users-secondary.success {
  color: #4dd0a4;
  border-color: rgba(43, 190, 145, .2);
  background: rgba(43, 190, 145, .08)
}

.admin-users-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px
}

.admin-users-metrics article {
  --tone: 139, 125, 246;
  display: flex;
  min-height: 89px;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .94), rgba(13, 19, 33, .9))
}

.admin-users-metrics article.green {
  --tone: 43, 190, 145
}

.admin-users-metrics article.amber {
  --tone: 231, 166, 63
}

.admin-users-metrics article.rose {
  --tone: 237, 112, 135
}

.admin-users-metrics article>span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 13px;
  background: rgba(var(--tone), .1)
}

.admin-users-metrics article>div {
  display: grid;
  min-width: 0;
  gap: 1px
}

.admin-users-metrics small {
  color: #8391a5;
  font-size: .61rem;
  font-weight: 750
}

.admin-users-metrics strong {
  color: #edf2f8;
  font-size: 1.18rem;
  font-weight: 950
}

.admin-users-metrics em {
  color: rgb(var(--tone));
  font-size: .56rem;
  font-style: normal;
  font-weight: 750
}

.admin-users-reminder-audit {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(139, 125, 246, .13);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(139, 125, 246, .075), rgba(43, 190, 145, .035))
}

.admin-users-reminder-audit-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px
}

.admin-users-reminder-audit-title>span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: #a99fff;
  border-radius: 13px;
  background: rgba(139, 125, 246, .11)
}

.admin-users-reminder-audit-title>div {
  display: grid;
  gap: 1px
}

.admin-users-reminder-audit-title small {
  color: #968aec;
  font-size: .54rem;
  font-weight: 850
}

.admin-users-reminder-audit-title strong {
  color: #e5eaf2;
  font-size: .74rem
}

.admin-users-reminder-audit-title p {
  max-width: 660px;
  margin: 1px 0 0;
  color: #77859a;
  font-size: .55rem;
  line-height: 1.65
}

.admin-users-reminder-audit-stats {
  display: flex;
  align-items: stretch;
  gap: 7px
}

.admin-users-reminder-audit-stats article {
  --audit-tone: 139, 125, 246;
  display: flex;
  min-width: 112px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(var(--audit-tone), .07)
}

.admin-users-reminder-audit-stats article.sent {
  --audit-tone: 43, 190, 145
}

.admin-users-reminder-audit-stats article.failed {
  --audit-tone: 237, 112, 135
}

.admin-users-reminder-audit-stats article>span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  color: rgb(var(--audit-tone));
  border-radius: 9px;
  background: rgba(var(--audit-tone), .1)
}

.admin-users-reminder-audit-stats article>div {
  display: grid;
  gap: 1px
}

.admin-users-reminder-audit-stats strong {
  color: #e6ebf2;
  font-size: .73rem
}

.admin-users-reminder-audit-stats small {
  color: #7f8ca0;
  font-size: .48rem;
  white-space: nowrap
}

.admin-users-controls {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 17px;
  background: rgba(17, 24, 39, .66)
}

.admin-users-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 5px 5px 12px;
  color: #718096;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 12px;
  background: rgba(148, 163, 184, .035)
}

[dir=rtl] .admin-users-search {
  padding: 5px 12px 5px 5px
}

.admin-users-search input {
  width: 100%;
  height: 38px;
  color: #e6ebf2;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .75rem
}

.admin-users-search button {
  height: 36px;
  padding: 0 18px;
  color: #fff;
  border: 0;
  border-radius: 9px;
  background: #5b4ddd;
  font: inherit;
  font-size: .66rem;
  font-weight: 850;
  cursor: pointer
}

.admin-users-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 8px
}

.admin-users-filters label,
.admin-users-results-head label {
  display: grid;
  gap: 4px
}

.admin-users-filters label>span,
.admin-users-results-head label>span {
  padding-inline: 3px;
  color: #718096;
  font-size: .56rem;
  font-weight: 750
}

.admin-users-filters select,
.admin-users-results-head select,
.admin-users-form-grid input,
.admin-users-form-grid select {
  width: 100%;
  height: 39px;
  padding: 0 10px;
  color: #dfe5ee;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 10px;
  outline: 0;
  background: #141d2d;
  font: inherit;
  font-size: .66rem
}

.admin-users-filters select:focus,
.admin-users-form-grid input:focus,
.admin-users-form-grid select:focus {
  border-color: rgba(139, 125, 246, .55);
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .08)
}

.admin-users-reset {
  align-self: end;
  display: inline-flex;
  height: 39px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  color: #8d99aa;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 10px;
  background: rgba(148, 163, 184, .04);
  font: inherit;
  font-size: .61rem;
  font-weight: 800;
  cursor: pointer
}

.admin-users-reset:hover {
  color: #c5bfff;
  border-color: rgba(139, 125, 246, .3);
  background: rgba(139, 125, 246, .08)
}

.admin-users-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  padding: 4px 2px
}

.admin-users-results-head h2 {
  margin: 0;
  color: var(--clr-text);
  font-size: .9rem
}

.admin-users-results-head p {
  margin: 2px 0 0;
  color: var(--clr-text-muted);
  font-size: .61rem
}

.admin-users-results-head label {
  grid-template-columns: auto 72px;
  align-items: center
}

.admin-users-results-head select {
  height: 34px
}

.admin-users-table-wrap {
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 18px;
  background: rgba(17, 24, 39, .61);
  box-shadow: 0 14px 34px rgba(2, 6, 23, .08)
}

.admin-users-table-wrap table {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse
}

.admin-users-table-wrap th {
  padding: 13px 14px;
  color: #718096;
  border-bottom: 1px solid rgba(148, 163, 184, .11);
  background: rgba(148, 163, 184, .025);
  font-size: .59rem;
  font-weight: 800;
  text-align: start;
  white-space: nowrap
}

.admin-users-table-wrap td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
  vertical-align: middle
}

.admin-users-table-wrap tbody tr:last-child td {
  border-bottom: 0
}

.admin-users-table-wrap tbody tr {
  transition: .18s ease
}

.admin-users-table-wrap tbody tr:hover {
  background: rgba(139, 125, 246, .035)
}

.admin-users-table-wrap tr.is-disabled {
  opacity: .63
}

.admin-user-identity-v4 {
  display: flex;
  min-width: 190px;
  align-items: center;
  gap: 10px
}

.admin-user-identity-v4>span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  color: #d6d0ff;
  border: 1px solid rgba(139, 125, 246, .15);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(139, 125, 246, .17), rgba(139, 125, 246, .07));
  font-size: .72rem;
  font-weight: 950
}

.admin-user-identity-v4>div {
  display: grid;
  min-width: 0;
  gap: 2px
}

.admin-user-identity-v4 strong {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #e7ecf3;
  font-size: .72rem
}

.admin-user-identity-v4 strong em {
  padding: 2px 5px;
  color: #9f94f8;
  border-radius: 5px;
  background: rgba(139, 125, 246, .09);
  font-size: .48rem;
  font-style: normal
}

.admin-user-identity-v4 a {
  max-width: 200px;
  overflow: hidden;
  color: #7e8ca1;
  font-size: .59rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap
}

.admin-user-identity-v4 small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6e7b90;
  font-size: .52rem
}

.admin-user-role {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 5px 8px;
  color: #aeb7c6;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 8px;
  background: rgba(148, 163, 184, .055);
  font-size: .56rem;
  font-weight: 850;
  white-space: nowrap
}

.admin-user-role.role-user_pro {
  color: #53d1a6;
  border-color: rgba(43, 190, 145, .16);
  background: rgba(43, 190, 145, .08)
}

.admin-user-role.role-admin {
  color: #f0b657;
  border-color: rgba(231, 166, 63, .18);
  background: rgba(231, 166, 63, .08)
}

.admin-user-role.role-staff {
  color: #9f94f8;
  border-color: rgba(139, 125, 246, .18);
  background: rgba(139, 125, 246, .09)
}

.admin-user-role.role-company_admin,
.admin-user-role.role-company_staff {
  color: #67b8ee;
  border-color: rgba(72, 159, 217, .18);
  background: rgba(72, 159, 217, .08)
}

.admin-user-plan {
  display: flex;
  min-width: 145px;
  align-items: center;
  gap: 8px;
  color: #46c99d
}

.admin-user-plan>svg {
  flex: 0 0 auto
}

.admin-user-plan>span {
  display: grid;
  gap: 1px
}

.admin-user-plan strong {
  color: #dce4ed;
  font-size: .61rem
}

.admin-user-plan small {
  color: #728096;
  font-size: .5rem
}

.admin-user-plan.empty {
  color: #718096
}

.admin-user-activity,
.admin-user-state {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  font-size: .56rem;
  font-weight: 800;
  white-space: nowrap
}

.admin-user-activity i,
.admin-user-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent)
}

.tone-green {
  color: #43c99d !important
}

.tone-violet {
  color: #9f94f8 !important
}

.tone-rose {
  color: #ed7087 !important
}

.tone-muted {
  color: #738197 !important
}

.admin-user-state.active {
  color: #43c99d
}

.admin-user-state.inactive {
  color: #ed7087
}

.admin-user-joined {
  color: #8794a8;
  font-size: .58rem;
  white-space: nowrap
}

.admin-user-reminder {
  --reminder-tone: 113, 129, 151;
  display: inline-flex;
  min-width: 144px;
  align-items: center;
  gap: 7px;
  color: rgb(var(--reminder-tone))
}

.admin-user-reminder.status-sent,
.admin-user-reminder.status-returned {
  --reminder-tone: 43, 190, 145
}

.admin-user-reminder.status-pending {
  --reminder-tone: 231, 166, 63
}

.admin-user-reminder.status-failed {
  --reminder-tone: 237, 112, 135
}

.admin-user-reminder>span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: rgba(var(--reminder-tone), .09)
}

.admin-user-reminder>span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px
}

.admin-user-reminder strong {
  color: currentColor;
  font-size: .57rem;
  font-weight: 850;
  white-space: nowrap
}

.admin-user-reminder small {
  max-width: 165px;
  overflow: hidden;
  color: #718096;
  font-size: .47rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.admin-user-actions {
  display: flex;
  align-items: center;
  gap: 5px
}

.admin-user-actions button {
  display: inline-flex;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  color: #9aa6b7;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 8px;
  background: rgba(148, 163, 184, .04);
  font: inherit;
  font-size: .55rem;
  font-weight: 800;
  cursor: pointer
}

.admin-user-actions button:hover {
  color: #c8c1ff;
  border-color: rgba(139, 125, 246, .3);
  background: rgba(139, 125, 246, .09)
}

.admin-user-actions button.danger {
  color: #ef8194
}

.admin-user-actions button.success {
  color: #48cda1
}

.admin-user-actions.compact button {
  width: 34px;
  padding: 0
}

.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-top: 5px
}

.admin-users-pagination button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #8693a6;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 9px;
  background: rgba(17, 24, 39, .58);
  font: inherit;
  font-size: .65rem;
  cursor: pointer
}

.admin-users-pagination button.active {
  color: #fff;
  border-color: transparent;
  background: #5b4ddd;
  box-shadow: 0 7px 18px rgba(91, 77, 221, .25)
}

.admin-users-pagination button:disabled {
  opacity: .35;
  cursor: default
}

.admin-users-pagination>span {
  color: #6f7c90;
  font-size: .7rem
}

.admin-users-empty {
  display: grid;
  min-height: 300px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 25px;
  color: #77859a;
  border: 1px dashed rgba(148, 163, 184, .16);
  border-radius: 18px;
  background: rgba(17, 24, 39, .38);
  text-align: center
}

.admin-users-empty>svg {
  color: #9388ed
}

.admin-users-empty h2 {
  margin: 3px 0 0;
  color: #e1e7ef;
  font-size: .94rem
}

.admin-users-empty p {
  margin: 0 0 8px;
  font-size: .66rem
}

.admin-users-mobile-v4-list {
  display: grid;
  gap: 10px
}

.admin-user-mobile-v4 {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(23, 30, 48, .94), rgba(13, 19, 33, .9))
}

.admin-user-mobile-v4.is-disabled {
  opacity: .65
}

.admin-user-mobile-v4>header,
.admin-user-mobile-v4>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.admin-user-mobile-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.admin-user-mobile-meta>div {
  display: grid;
  gap: 5px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .035)
}

.admin-user-mobile-meta small {
  color: #748197;
  font-size: .53rem
}

.admin-user-mobile-reminder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .035)
}

.admin-user-mobile-reminder>small {
  color: #748197;
  font-size: .53rem
}

.admin-user-mobile-reminder .admin-user-reminder {
  min-width: 0;
  justify-self: end
}

.admin-user-mobile-v4>.admin-user-plan {
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 10px
}

.admin-user-company {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7c8ba0;
  font-size: .58rem
}

.admin-user-mobile-v4>footer {
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, .08)
}

.admin-user-mobile-v4>footer>small {
  color: #6f7d91;
  font-size: .54rem
}

.admin-users-modal-backdrop .modal {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 22px;
  background: linear-gradient(145deg, #182133, #101827);
  box-shadow: 0 35px 100px rgba(2, 6, 23, .38)
}

.admin-users-modal-backdrop[data-width=wide] .modal {
  width: min(820px, calc(100vw - 28px));
  max-width: 820px
}

.admin-users-form-modal {
  width: min(570px, calc(100vw - 28px));
  max-width: 570px
}

.admin-users-form-modal.compact {
  max-width: 470px
}

.admin-users-modal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, .11);
  background: radial-gradient(circle at 92% 0, rgba(139, 125, 246, .14), transparent 40%)
}

.admin-users-modal-head>span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #a99fff;
  border-radius: 13px;
  background: rgba(139, 125, 246, .11)
}

.admin-users-modal-head>div {
  display: grid;
  gap: 2px
}

.admin-users-modal-head small {
  color: #9f94f8;
  font-size: .58rem;
  font-weight: 800
}

.admin-users-modal-head h2 {
  margin: 0;
  color: #eef2f8;
  font-size: 1rem
}

.admin-users-modal-head p {
  margin: 0;
  color: #7c899d;
  font-size: .6rem
}

.admin-users-modal-head>button,
.admin-user-detail-head>button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #8996a9;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 9px;
  background: rgba(148, 163, 184, .04);
  cursor: pointer
}

.admin-users-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  padding: 20px
}

.admin-users-form-grid.one {
  grid-template-columns: 1fr
}

.admin-users-form-grid label {
  display: grid;
  gap: 6px
}

.admin-users-form-grid label>span {
  color: #8d9aae;
  font-size: .61rem;
  font-weight: 750
}

.admin-users-form-grid input,
.admin-users-form-grid select {
  height: 44px;
  font-size: .7rem
}

.admin-users-modal-footer,
.admin-user-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid rgba(148, 163, 184, .1);
  background: rgba(2, 6, 23, .11)
}

.admin-user-detail-modal {
  width: min(820px, calc(100vw - 28px));
  max-width: 820px;
  max-height: min(820px, 92dvh);
  overflow: auto !important
}

.admin-user-detail-loading,
.admin-user-detail-error {
  display: grid;
  min-height: 360px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #7d8a9e;
  text-align: center
}

.admin-user-detail-error>svg {
  color: #ed7087
}

.admin-user-detail-error h2 {
  margin: 0;
  color: #e7ecf3
}

.admin-user-detail-error p {
  margin: 0 0 6px
}

.admin-user-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  background: radial-gradient(circle at 8% 0, rgba(43, 190, 145, .08), transparent 32%), radial-gradient(circle at 92% 100%, rgba(139, 125, 246, .14), transparent 40%)
}

.admin-user-detail-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #dad5ff;
  border: 1px solid rgba(139, 125, 246, .18);
  border-radius: 17px;
  background: rgba(139, 125, 246, .13);
  font-size: .87rem;
  font-weight: 950
}

.admin-user-detail-head>div:nth-child(2) {
  display: grid;
  gap: 2px
}

.admin-user-detail-head>div:nth-child(2)>span {
  color: #8175dd;
  font-size: .55rem;
  font-weight: 800
}

.admin-user-detail-head h2 {
  margin: 0;
  color: #eff3f8;
  font-size: 1.05rem
}

.admin-user-detail-head a {
  color: #8290a4;
  font-size: .63rem;
  text-decoration: none
}

.admin-user-detail-badges {
  display: flex;
  align-items: center;
  gap: 6px
}

.admin-user-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 17px 20px
}

.admin-user-detail-facts article {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 12px;
  background: rgba(148, 163, 184, .03)
}

.admin-user-detail-facts article>span {
  color: #978bed
}

.admin-user-detail-facts small {
  color: #748197;
  font-size: .55rem
}

.admin-user-detail-facts strong {
  overflow: hidden;
  color: #dce3ed;
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.admin-user-detail-section {
  padding: 3px 20px 20px
}

.admin-user-detail-section>header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.admin-user-detail-section header small {
  color: #8f83ea;
  font-size: .55rem;
  font-weight: 800
}

.admin-user-detail-section h3 {
  margin: 2px 0 0;
  color: #e5eaf1;
  font-size: .78rem
}

.admin-user-detail-section>header>span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #a99ff5;
  border-radius: 8px;
  background: rgba(139, 125, 246, .09);
  font-size: .61rem;
  font-weight: 900
}

.admin-user-sub-history {
  display: grid;
  gap: 7px
}

.admin-user-sub-history article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 11px;
  background: rgba(148, 163, 184, .025)
}

.admin-user-sub-history article>span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  color: #7d899b;
  border-radius: 9px;
  background: rgba(148, 163, 184, .07)
}

.admin-user-sub-history article>span.active {
  color: #43c99d;
  background: rgba(43, 190, 145, .08)
}

.admin-user-sub-history article>div {
  display: grid;
  gap: 2px
}

.admin-user-sub-history strong {
  color: #dfe5ed;
  font-size: .65rem
}

.admin-user-sub-history small {
  color: #758297;
  font-size: .53rem
}

.admin-user-sub-history em {
  padding: 4px 7px;
  color: #a6b0bf;
  border-radius: 7px;
  background: rgba(148, 163, 184, .06);
  font-size: .5rem;
  font-style: normal
}

.admin-user-sub-history em.status-active {
  color: #43c99d;
  background: rgba(43, 190, 145, .08)
}

.admin-user-reminder-overview {
  --reminder-tone: 113, 129, 151;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid rgba(var(--reminder-tone), .13);
  border-radius: 12px;
  background: rgba(var(--reminder-tone), .045)
}

.admin-user-reminder-overview.status-sent,
.admin-user-reminder-overview.status-returned {
  --reminder-tone: 43, 190, 145
}

.admin-user-reminder-overview.status-pending {
  --reminder-tone: 231, 166, 63
}

.admin-user-reminder-overview.status-failed {
  --reminder-tone: 237, 112, 135
}

.admin-user-reminder-overview>span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: rgb(var(--reminder-tone));
  border-radius: 10px;
  background: rgba(var(--reminder-tone), .1)
}

.admin-user-reminder-overview>div {
  display: grid;
  gap: 2px
}

.admin-user-reminder-overview strong {
  color: rgb(var(--reminder-tone));
  font-size: .66rem
}

.admin-user-reminder-overview small {
  color: #7a879b;
  font-size: .53rem
}

.admin-user-reminder-overview em {
  color: #ed8295;
  font-size: .49rem;
  font-style: normal
}

.admin-user-reminder-overview>b {
  padding: 5px 8px;
  color: rgb(var(--reminder-tone));
  border-radius: 8px;
  background: rgba(var(--reminder-tone), .08);
  font-size: .51rem;
  white-space: nowrap
}

.admin-user-email-history {
  display: grid;
  gap: 6px
}

.admin-user-email-history article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .028)
}

.admin-user-email-history article>span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #ed7087;
  border-radius: 8px;
  background: rgba(237, 112, 135, .08)
}

.admin-user-email-history article>span.status-sent {
  color: #43c99d;
  background: rgba(43, 190, 145, .08)
}

.admin-user-email-history article>div {
  display: grid;
  gap: 2px
}

.admin-user-email-history strong {
  color: #dfe5ed;
  font-size: .6rem
}

.admin-user-email-history small {
  color: #758297;
  font-size: .51rem
}

.admin-user-email-history em {
  color: #d27a89;
  font-size: .48rem;
  font-style: normal;
  line-height: 1.5
}

.admin-user-detail-empty {
  padding: 28px;
  color: #748197;
  border: 1px dashed rgba(148, 163, 184, .12);
  border-radius: 11px;
  text-align: center;
  font-size: .63rem
}

.admin-user-detail-actions>span {
  margin-inline-end: auto;
  color: #748197;
  font-size: .57rem
}

html.light .admin-users-hero {
  border-color: rgba(139, 125, 246, .17);
  background: radial-gradient(circle at 6% 0, rgba(43, 190, 145, .1), transparent 30%), radial-gradient(circle at 94% 105%, rgba(139, 125, 246, .2), transparent 40%), linear-gradient(145deg, #fff, #f4f6fc);
  box-shadow: 0 20px 50px rgba(71, 85, 105, .1)
}

html.light .admin-users-hero h1 {
  color: #1a2538
}

html.light .admin-users-hero p,
html.light .admin-users-hero-pulse {
  color: #64748b
}

html.light .admin-users-secondary {
  color: #59677b;
  border-color: #dfe4ec;
  background: rgba(255, 255, 255, .72)
}

html.light .admin-users-secondary:hover {
  color: #5145cc;
  border-color: rgba(81, 69, 220, .25);
  background: #f4f2ff
}

html.light .admin-users-metrics article {
  border-color: #e1e6ee;
  background: linear-gradient(145deg, #fff, #f7f9fc)
}

html.light .admin-users-metrics strong {
  color: #1b2639
}

html.light .admin-users-controls,
html.light .admin-users-table-wrap {
  border-color: #e1e6ee;
  background: #fff
}

html.light .admin-users-reminder-audit {
  border-color: #e3dfff;
  background: linear-gradient(135deg, #faf9ff, #f5fbf9)
}

html.light .admin-users-reminder-audit-title strong,
html.light .admin-users-reminder-audit-stats strong {
  color: #253047
}

html.light .admin-users-search {
  border-color: #dfe4ed;
  background: #f8f9fc
}

html.light .admin-users-search input {
  color: #273248
}

html.light .admin-users-filters select,
html.light .admin-users-results-head select,
html.light .admin-users-form-grid input,
html.light .admin-users-form-grid select {
  color: #273248;
  border-color: #dfe4ed;
  background: #f8f9fc
}

html.light .admin-users-reset {
  color: #64748b;
  border-color: #dfe4ed;
  background: #f8f9fc
}

html.light .admin-users-table-wrap th {
  color: #718096;
  border-color: #e5e9f0;
  background: #f8f9fb
}

html.light .admin-users-table-wrap td {
  border-color: #edf0f4
}

html.light .admin-users-table-wrap tbody tr:hover {
  background: #faf9ff
}

html.light .admin-user-identity-v4 strong,
html.light .admin-user-plan strong {
  color: #253047
}

html.light .admin-user-plan small,
html.light .admin-user-identity-v4 a {
  color: #64748b
}

html.light .admin-users-pagination button {
  color: #64748b;
  border-color: #dfe4ed;
  background: #fff
}

html.light .admin-users-empty {
  color: #64748b;
  border-color: #d9dee8;
  background: #fafbfc
}

html.light .admin-users-empty h2 {
  color: #253047
}

html.light .admin-user-mobile-v4 {
  border-color: #e1e6ee;
  background: linear-gradient(145deg, #fff, #f7f9fc)
}

html.light .admin-users-modal-backdrop .modal {
  border-color: #dfe4ed;
  background: #fff
}

html.light .admin-users-modal-head,
html.light .admin-user-detail-head {
  border-color: #e4e8ef;
  background: radial-gradient(circle at 92% 0, rgba(139, 125, 246, .12), transparent 40%), #fff
}

html.light .admin-users-modal-head h2,
html.light .admin-user-detail-head h2,
html.light .admin-user-detail-facts strong,
html.light .admin-user-detail-section h3,
html.light .admin-user-sub-history strong {
  color: #202b3f
}

html.light .admin-users-modal-head p,
html.light .admin-user-detail-head a {
  color: #64748b
}

html.light .admin-user-detail-facts article,
html.light .admin-user-sub-history article,
html.light .admin-user-email-history article {
  border-color: #e4e8ef;
  background: #fafbfc
}

html.light .admin-user-email-history strong {
  color: #263147
}

html.light .admin-users-modal-footer,
html.light .admin-user-detail-actions {
  border-color: #e4e8ef;
  background: #f8f9fb
}

@media(max-width:1100px) {
  .admin-users-filters {
    grid-template-columns: repeat(3, minmax(130px, 1fr))
  }

  .admin-users-reset {
    min-width: 120px
  }

  .admin-user-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:760px) {
  .admin-users-v4 {
    gap: 11px
  }

  .admin-users-hero {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    padding: 21px 18px;
    border-radius: 20px
  }

  .admin-users-hero aside {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .admin-users-hero aside>:only-child {
    grid-column: 1/-1
  }

  .admin-users-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px
  }

  .admin-users-metrics article {
    min-height: 76px;
    padding: 11px;
    gap: 8px
  }

  .admin-users-metrics article>span {
    width: 35px;
    height: 35px
  }

  .admin-users-reminder-audit {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .admin-users-reminder-audit-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .admin-users-reminder-audit-stats article {
    min-width: 0
  }

  .admin-users-metrics small {
    font-size: .55rem
  }

  .admin-users-metrics strong {
    font-size: 1rem
  }

  .admin-users-controls {
    padding: 10px
  }

  .admin-users-filters {
    grid-template-columns: 1fr 1fr
  }

  .admin-users-reset {
    width: 100%
  }

  .admin-users-results-head {
    align-items: center
  }

  .admin-users-results-head label {
    grid-template-columns: auto 65px
  }

  .admin-user-detail-head {
    grid-template-columns: auto minmax(0, 1fr) auto
  }

  .admin-user-detail-badges {
    grid-column: 1/-1;
    grid-row: 2
  }

  .admin-user-detail-head>button {
    grid-column: 3;
    grid-row: 1
  }

  .admin-user-detail-facts {
    padding: 13px
  }

  .admin-user-detail-section {
    padding-inline: 13px
  }

  .admin-users-form-grid {
    grid-template-columns: 1fr
  }

  .admin-user-detail-actions {
    flex-wrap: wrap
  }

  .admin-user-detail-actions>span {
    width: 100%;
    margin: 0
  }

  .admin-users-modal-backdrop {
    align-items: flex-end;
    padding: 0
  }

  .admin-users-modal-backdrop .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0
  }

  .admin-users-modal-head {
    padding: 17px 16px
  }

  .admin-users-form-grid {
    padding: 16px
  }

  .admin-users-modal-footer {
    padding: 12px 16px
  }
}

@media(max-width:480px) {
  .admin-users-hero aside {
    grid-template-columns: 1fr
  }

  .admin-users-hero aside>* {
    width: 100%
  }

  .admin-users-metrics article {
    align-items: flex-start;
    flex-direction: column
  }

  .admin-users-reminder-audit-stats {
    grid-template-columns: 1fr
  }

  .admin-users-reminder-audit-stats article {
    min-height: 48px
  }

  .admin-users-filters {
    grid-template-columns: 1fr
  }

  .admin-users-search button {
    padding-inline: 12px
  }

  .admin-users-reset {
    min-width: 0
  }

  .admin-user-mobile-v4>header {
    align-items: flex-start
  }

  .admin-user-mobile-v4>header>.admin-user-state {
    position: absolute;
    inset-inline-end: 15px;
    margin-top: 47px
  }

  .admin-user-mobile-v4 {
    position: relative
  }

  .admin-user-mobile-meta {
    grid-template-columns: 1fr
  }

  .admin-user-mobile-reminder {
    grid-template-columns: 1fr
  }

  .admin-user-mobile-reminder .admin-user-reminder {
    justify-self: stretch
  }

  .admin-user-reminder-overview {
    grid-template-columns: auto minmax(0, 1fr)
  }

  .admin-user-reminder-overview>b {
    grid-column: 1/-1;
    width: fit-content
  }

  .admin-user-detail-facts {
    grid-template-columns: 1fr
  }

  .admin-user-detail-head {
    grid-template-columns: auto minmax(0, 1fr) auto
  }

  .admin-user-detail-avatar {
    width: 45px;
    height: 45px
  }

  .admin-user-detail-actions>* {
    width: 100%
  }

  .admin-users-pagination {
    flex-wrap: wrap
  }
}

.admin-user-role-editor {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 170px minmax(190px, auto) auto;
  align-items: end;
  gap: 10px;
  margin: 0 20px 18px;
  padding: 13px;
  border: 1px solid rgba(139, 125, 246, .14);
  border-radius: 13px;
  background: rgba(139, 125, 246, .055)
}

.admin-user-role-editor>div {
  align-self: center;
  display: grid;
  gap: 2px
}

.admin-user-role-editor small {
  color: #978bed;
  font-size: .54rem;
  font-weight: 800
}

.admin-user-role-editor h3 {
  margin: 0;
  color: #e4e9f1;
  font-size: .7rem
}

.admin-user-role-editor p {
  margin: 0;
  color: #748197;
  font-size: .51rem;
  line-height: 1.55
}

.admin-user-role-editor>label {
  display: grid;
  gap: 5px
}

.admin-user-role-editor>label>span {
  color: #8592a6;
  font-size: .55rem;
  font-weight: 750
}

.admin-user-role-editor select {
  width: 100%;
  height: 38px;
  padding: 0 9px;
  color: #dfe5ee;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 9px;
  outline: 0;
  background: #141d2d;
  font: inherit;
  font-size: .62rem
}

.admin-user-support-option {
  display: flex !important;
  min-height: 38px;
  align-items: center;
  grid-template-columns: auto 1fr !important;
  gap: 7px !important;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 9px;
  background: rgba(148, 163, 184, .03)
}

.admin-user-support-option[hidden] {
  display: none !important
}

.admin-user-support-option input {
  width: 15px;
  height: 15px;
  accent-color: #6557df
}

.admin-user-role-editor>button {
  height: 38px
}

.admin-user-role-editor button:disabled {
  opacity: .6;
  cursor: wait
}

html.light .admin-user-role-editor {
  border-color: #e2ddff;
  background: #faf9ff
}

html.light .admin-user-role-editor h3 {
  color: #263147
}

html.light .admin-user-role-editor select {
  color: #273248;
  border-color: #dfe4ed;
  background: #fff
}

html.light .admin-user-support-option {
  border-color: #dfe4ed;
  background: #fff
}

@media(max-width:850px) {
  .admin-user-role-editor {
    grid-template-columns: 1fr 1fr
  }

  .admin-user-role-editor>div {
    grid-column: 1/-1
  }
}

@media(max-width:560px) {
  .admin-user-role-editor {
    grid-template-columns: 1fr;
    margin-inline: 13px
  }

  .admin-user-role-editor>div {
    grid-column: auto
  }

  .admin-user-role-editor>button {
    width: 100%
  }
}

/* Tasks focus flow — one clear step at a time */
.tasks-focus-page {
  --task-focus-purple: #7667f8;
  --task-focus-purple-deep: #5145dc;
  --task-focus-green: #2dd4a7;
  --task-focus-line: rgba(148, 163, 184, .13);
  display: grid;
  gap: 16px;
}

.tasks-focus-page>.page-header {
  margin-bottom: 0;
}

.tasks-focus-page .task-focus-day-strip {
  order: 1;
}

.tasks-focus-page .task-focus-shell {
  order: 2;
}

.tasks-focus-page #prayer-alert-slot {
  order: 3;
}

.tasks-focus-page .task-library {
  order: 4;
}

.task-focus-shell {
  position: relative;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(118, 103, 248, .2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0, rgba(45, 212, 167, .12), transparent 30%),
    radial-gradient(circle at 96% 100%, rgba(118, 103, 248, .22), transparent 38%),
    linear-gradient(145deg, rgba(24, 31, 50, .98), rgba(13, 19, 33, .97));
  box-shadow: 0 24px 64px rgba(2, 6, 23, .2);
}

.task-focus-shell::before {
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 167, .16), rgba(118, 103, 248, .07) 42%, transparent 70%);
  content: '';
  inset-inline-start: -145px;
  top: -175px;
  pointer-events: none;
  animation: task-focus-halo 8s ease-in-out infinite;
}

.task-focus-shell::after {
  position: absolute;
  width: 36%;
  height: 180%;
  opacity: .38;
  background: linear-gradient(90deg, transparent, rgba(169, 159, 255, .09), transparent);
  content: '';
  inset-inline-start: -46%;
  top: -42%;
  pointer-events: none;
  transform: rotate(18deg);
  animation: task-focus-sweep 9s ease-in-out infinite;
}

.task-focus-shell>* {
  position: relative;
  z-index: 1;
}

html.light .task-focus-shell {
  background:
    radial-gradient(circle at 8% 0, rgba(45, 212, 167, .1), transparent 30%),
    radial-gradient(circle at 96% 100%, rgba(118, 103, 248, .16), transparent 38%),
    linear-gradient(145deg, #fff, #f5f6fc);
  box-shadow: 0 22px 55px rgba(71, 85, 105, .1);
}

.task-focus-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.task-focus-day-head>div:first-child {
  min-width: 0;
}

.task-focus-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a99fff;
  font-size: .72rem;
  font-weight: 850;
}

.task-focus-kicker>svg {
  filter: drop-shadow(0 0 7px rgba(169, 159, 255, .5));
  animation: task-focus-spark 2.8s ease-in-out infinite;
}

.task-focus-pulse {
  display: inline-flex;
  height: 14px;
  align-items: center;
  gap: 2px;
  margin-inline-start: 3px;
  direction: ltr;
}

.task-focus-pulse i {
  width: 3px;
  height: var(--pulse-height, 8px);
  border-radius: 99px;
  background: linear-gradient(180deg, #b7afff, var(--task-focus-green));
  box-shadow: 0 0 7px rgba(118, 103, 248, .25);
  transform-origin: center;
  animation: task-focus-pulse 1.35s ease-in-out infinite;
}

.task-focus-pulse i:nth-child(1) {
  --pulse-height: 5px;
  animation-delay: -.75s;
}

.task-focus-pulse i:nth-child(2) {
  --pulse-height: 9px;
  animation-delay: -.45s;
}

.task-focus-pulse i:nth-child(3) {
  --pulse-height: 13px;
  animation-delay: -.9s;
}

.task-focus-pulse i:nth-child(4) {
  --pulse-height: 8px;
  animation-delay: -.2s;
}

.task-focus-pulse i:nth-child(5) {
  --pulse-height: 5px;
  animation-delay: -.62s;
}

.task-focus-day-head h3 {
  margin: 6px 0 3px;
  color: var(--clr-text);
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  font-weight: 950;
  letter-spacing: -.025em;
}

.task-focus-day-head p {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: .72rem;
  line-height: 1.7;
}

.task-focus-progress {
  display: grid;
  min-width: 90px;
  justify-items: center;
  gap: 1px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 15px;
  background: rgba(148, 163, 184, .045);
}

.task-focus-progress strong {
  color: var(--task-focus-green);
  font-size: 1.15rem;
  font-weight: 950;
  font-family: var(--font-numbers);
}

.task-focus-progress span {
  color: var(--clr-text-muted);
  font-size: .55rem;
  font-weight: 750;
}

.task-focus-progress-track {
  height: 5px;
  margin: 16px 0 20px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(148, 163, 184, .1);
}

.task-focus-progress-track span {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--task-focus-green), #6ee7c7);
  transition: width .45s ease;
}

.task-focus-progress-track span::after {
  position: absolute;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  content: '';
  inset-inline-start: -45%;
  top: 0;
  animation: task-focus-progress-glow 2.8s ease-in-out infinite;
}

.task-now-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .28fr);
  gap: 20px;
  overflow: hidden;
  padding: 27px;
  border: 1px solid rgba(139, 125, 246, .2);
  border-radius: 23px;
  background: linear-gradient(140deg, rgba(139, 125, 246, .13), rgba(148, 163, 184, .035));
  box-shadow: inset 3px 0 0 var(--task-focus-purple);
}

html[dir="rtl"] .task-now-card {
  box-shadow: inset -3px 0 0 var(--task-focus-purple);
}

.task-now-card.priority-high {
  box-shadow: inset 3px 0 0 #f26b79;
}

html[dir="rtl"] .task-now-card.priority-high {
  box-shadow: inset -3px 0 0 #f26b79;
}

.task-now-card.priority-low {
  box-shadow: inset 3px 0 0 var(--task-focus-green);
}

html[dir="rtl"] .task-now-card.priority-low {
  box-shadow: inset -3px 0 0 var(--task-focus-green);
}

.task-now-orbit {
  position: absolute;
  inset-inline-end: -90px;
  top: -115px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(139, 125, 246, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(139, 125, 246, .025), 0 0 0 76px rgba(139, 125, 246, .018);
  pointer-events: none;
  animation: task-focus-orbit-breathe 5.5s ease-in-out infinite;
}

.task-now-orbit::before {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b7df6;
  box-shadow: 0 0 0 6px rgba(139, 125, 246, .08), 0 0 16px rgba(139, 125, 246, .55);
  content: '';
  left: 50%;
  top: -4px;
  transform-origin: 0 134px;
  animation: task-focus-orbit-dot 11s linear infinite;
}

.task-now-main,
.task-now-actions,
.task-now-foot {
  position: relative;
  z-index: 1;
}

.task-now-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.task-now-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #b7afff;
  font-size: .72rem;
  font-weight: 900;
}

.task-now-reasons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.task-now-reasons span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  color: #9ea9b9;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 999px;
  background: rgba(148, 163, 184, .05);
  font-size: .53rem;
  font-weight: 750;
}

.task-now-reasons svg {
  color: #e7b250;
}

.task-now-main h2 {
  max-width: 790px;
  margin: 18px 0 7px;
  color: var(--clr-text);
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-weight: 950;
  line-height: 1.35;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.task-now-description {
  display: -webkit-box;
  max-width: 720px;
  margin: 0;
  overflow: hidden;
  color: var(--clr-text-muted);
  font-size: .74rem;
  line-height: 1.8;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-now-description.muted {
  opacity: .72;
}

.task-now-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.task-now-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  color: #98a5b7;
  border-radius: 9px;
  background: rgba(148, 163, 184, .055);
  font-size: .57rem;
  font-weight: 750;
}

.task-now-meta .priority-high {
  color: #f18194;
  background: rgba(242, 107, 121, .08);
}

.task-now-meta .priority-med {
  color: #eab252;
  background: rgba(245, 165, 36, .08);
}

.task-now-meta .priority-low {
  color: #4ddbb0;
  background: rgba(45, 212, 167, .08);
}

.task-now-actions {
  display: grid;
  align-content: center;
  gap: 8px;
}

.task-now-actions .btn {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  border-radius: 12px;
  font-size: .64rem;
  font-weight: 850;
}

.task-now-complete {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ddfff5;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #1ca77f, #2dd4a7);
  box-shadow: 0 13px 28px rgba(45, 212, 167, .2);
  font: inherit;
  cursor: pointer;
}

.task-now-complete span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}

.task-now-complete strong {
  font-size: .74rem;
  font-weight: 950;
}

.task-now-complete:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.task-now-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid rgba(148, 163, 184, .09);
  color: #7d899b;
  font-size: .57rem;
}

.task-now-foot button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: #aaa2fb;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .58rem;
  font-weight: 850;
  cursor: pointer;
}

.task-focus-shell.has-system-context {
  --context-accent: #8176f5;
  --context-accent-rgb: 129, 118, 245;
  border: 0;
  background:
    radial-gradient(circle at 4% 8%, rgba(var(--context-accent-rgb), .24), transparent 31%),
    radial-gradient(circle at 95% 95%, rgba(45, 212, 167, .12), transparent 35%),
    linear-gradient(145deg, rgba(22, 28, 47, .99), rgba(11, 17, 31, .98));
}

.task-focus-shell.has-system-context.context-prayer {
  --context-accent: #2dd4a7;
  --context-accent-rgb: 45, 212, 167;
}

.task-focus-shell.has-system-context.context-morning {
  --context-accent: #f3b74e;
  --context-accent-rgb: 243, 183, 78;
}

.task-focus-shell.has-system-context.context-evening {
  --context-accent: #a78bfa;
  --context-accent-rgb: 167, 139, 250;
}

.task-focus-shell.has-system-context.context-habit {
  --context-accent: #23c99a;
  --context-accent-rgb: 35, 201, 154;
}

.task-focus-shell.has-system-context.context-sleep {
  --context-accent: #8b86ff;
  --context-accent-rgb: 139, 134, 255;
}

html.light .task-focus-shell.has-system-context {
  background:
    radial-gradient(circle at 4% 8%, rgba(var(--context-accent-rgb), .17), transparent 31%),
    radial-gradient(circle at 95% 95%, rgba(45, 212, 167, .09), transparent 35%),
    linear-gradient(145deg, #fff, #f6f7fc);
}

.task-context-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.task-context-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--clr-text-muted);
  font-size: .58rem;
  font-weight: 750;
}

.task-context-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--context-accent);
  box-shadow: 0 0 0 5px rgba(var(--context-accent-rgb), .1), 0 0 13px rgba(var(--context-accent-rgb), .55);
  animation: task-context-live 2s ease-in-out infinite;
}

.task-system-card {
  position: relative;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) minmax(205px, .28fr);
  align-items: center;
  gap: 27px;
  overflow: hidden;
  padding: 25px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(var(--context-accent-rgb), .13), rgba(148, 163, 184, .025));
  box-shadow: inset 0 0 0 1px rgba(var(--context-accent-rgb), .13);
}

.task-system-card::after {
  position: absolute;
  width: 45%;
  height: 1px;
  opacity: .65;
  background: linear-gradient(90deg, transparent, var(--context-accent), transparent);
  content: '';
  inset-inline-start: -48%;
  bottom: 0;
  animation: task-context-line 5s ease-in-out infinite;
}

.task-system-visual {
  position: relative;
  display: grid;
  width: 126px;
  height: 126px;
  place-items: center;
  justify-self: center;
}

.task-system-icon {
  position: relative;
  z-index: 3;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  color: #fff;
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(var(--context-accent-rgb), .98), rgba(var(--context-accent-rgb), .62));
  box-shadow: 0 18px 38px rgba(var(--context-accent-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  transform: rotate(-4deg);
  animation: task-context-icon 4.8s ease-in-out infinite;
}

.task-system-icon svg {
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .18));
}

.task-system-ripple {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(var(--context-accent-rgb), .28);
  border-radius: 40%;
  inset: 7px;
  animation: task-context-ripple 4.6s ease-in-out infinite;
}

.task-system-ripple.ripple-two {
  inset: -9px;
  opacity: .48;
  animation-delay: -2.3s;
}

.task-system-star {
  position: absolute;
  z-index: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--context-accent);
  box-shadow: 0 0 12px rgba(var(--context-accent-rgb), .8);
  animation: task-context-star 2.7s ease-in-out infinite;
}

.task-system-star.star-one {
  inset-inline-end: 4px;
  top: 25px;
}

.task-system-star.star-two {
  width: 4px;
  height: 4px;
  inset-inline-start: 9px;
  bottom: 25px;
  animation-delay: -1.2s;
}

.task-system-copy {
  min-width: 0;
}

.task-system-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--context-accent);
  font-size: .65rem;
  font-weight: 900;
}

.task-system-eyebrow::before {
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  content: '';
}

.task-system-copy h2 {
  max-width: 720px;
  margin: 9px 0 6px;
  color: var(--clr-text);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 950;
  line-height: 1.35;
  letter-spacing: -.035em;
}

.task-system-copy>p {
  max-width: 690px;
  margin: 0;
  color: var(--clr-text-muted);
  font-size: .8rem;
  line-height: 1.85;
}

.task-system-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.task-system-meta span,
.task-system-meta strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: .64rem;
  font-weight: 800;
}

.task-system-meta span {
  color: var(--clr-text-muted);
  background: rgba(148, 163, 184, .07);
}

.task-system-meta strong {
  color: var(--context-accent);
  background: rgba(var(--context-accent-rgb), .1);
}

.task-system-window {
  width: min(350px, 100%);
  height: 4px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(148, 163, 184, .1);
}

.task-system-window span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--context-accent-rgb), .5), var(--context-accent));
  box-shadow: 0 0 12px rgba(var(--context-accent-rgb), .45);
  transition: width .5s ease;
}

.task-system-actions {
  display: grid;
  align-content: center;
  gap: 8px;
}

.task-system-actions .btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  font-size: .68rem;
  font-weight: 850;
}

.task-system-actions .task-system-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--context-accent), rgba(var(--context-accent-rgb), .72));
  box-shadow: 0 13px 27px rgba(var(--context-accent-rgb), .2);
}

.task-system-actions .btn-secondary {
  background: rgba(148, 163, 184, .09);
}

.task-system-dismiss {
  min-height: 34px !important;
  color: var(--clr-text-muted) !important;
  background: transparent !important;
  font-size: .61rem !important;
}

.task-context-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: var(--clr-text-muted);
  font-size: .61rem;
  line-height: 1.6;
}

.task-context-foot svg {
  flex: 0 0 auto;
  color: var(--context-accent);
}

.task-context-foot strong {
  margin-inline-start: auto;
  color: var(--clr-text);
  font-family: var(--font-numbers);
}

.task-now-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 128px;
  padding: 23px;
  border: 1px dashed rgba(139, 125, 246, .22);
  border-radius: 21px;
  background: rgba(139, 125, 246, .045);
}

.task-now-empty-icon {
  display: grid;
  width: 57px;
  height: 57px;
  place-items: center;
  color: #a99fff;
  border-radius: 17px;
  background: rgba(139, 125, 246, .1);
}

.task-now-empty h2 {
  margin: 0 0 4px;
  color: var(--clr-text);
  font-size: 1rem;
}

.task-now-empty p {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: .66rem;
  line-height: 1.7;
}

.task-library {
  overflow: hidden;
  border: 1px solid var(--task-focus-line);
  border-radius: 24px;
  background: rgba(18, 25, 40, .72);
  box-shadow: 0 16px 40px rgba(2, 6, 23, .09);
}

html.light .task-library {
  background: rgba(255, 255, 255, .92);
}

.task-library-toggle {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: var(--clr-text);
  border: 0;
  background: linear-gradient(135deg, rgba(139, 125, 246, .055), transparent 55%);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.task-library-toggle-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #a99fff;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(139, 125, 246, .16), rgba(45, 212, 167, .07));
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .08);
}

.task-library-toggle-copy {
  display: grid;
  gap: 2px;
}

.task-library-toggle-copy strong {
  font-size: .78rem;
  font-weight: 900;
}

.task-library-toggle-copy small {
  color: var(--clr-text-muted);
  font-size: .56rem;
}

.task-library-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, auto));
  gap: 7px;
  direction: rtl;
}

html[dir="ltr"] .task-library-summary {
  direction: ltr;
}

.task-library-summary>span {
  display: grid;
  min-width: 62px;
  justify-items: center;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 11px;
  background: rgba(148, 163, 184, .055);
}

.task-library-summary strong {
  color: var(--clr-text);
  font-size: .75rem;
  font-weight: 950;
  font-family: var(--font-numbers);
}

.task-library-summary small {
  color: var(--clr-text-muted);
  font-size: .46rem;
  font-weight: 750;
}

.task-library-summary .overdue strong {
  color: #f18194;
}

.task-library-summary .done strong {
  color: var(--task-focus-green);
}

.task-library-toggle-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #958bec;
  font-size: .57rem;
  font-weight: 850;
}

.task-library-toggle-action svg {
  transition: transform .22s ease;
}

.task-library.is-open .task-library-toggle-action svg {
  transform: rotate(180deg);
}

.task-library-content {
  display: grid;
  gap: 13px;
  padding: 0 14px 15px;
  border-top: 1px solid transparent;
}

.task-library.is-open .task-library-content {
  padding-top: 14px;
  border-top-color: rgba(148, 163, 184, .09);
  animation: task-library-in .22s ease both;
}

.task-library-content[hidden] {
  display: none !important;
}

.task-library .filter-group-container {
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 16px;
  background: rgba(148, 163, 184, .025);
}

.task-library .filter-group {
  min-width: 0;
}

.task-library .filter-group-label {
  min-width: auto;
  color: var(--clr-text-muted);
  font-size: .53rem;
  font-weight: 850;
}

.task-library .filter-tab-btn {
  min-height: 36px;
  border: 0;
  box-shadow: none;
}

.task-library .filter-tab-btn em {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding-inline: 4px;
  color: inherit;
  border-radius: 99px;
  background: rgba(148, 163, 184, .09);
  font: normal 800 .48rem/1 var(--font-numbers);
}

.task-library .filter-tab-btn.active em {
  background: rgba(255, 255, 255, .18);
}

.task-library .task-list-box {
  box-shadow: none;
}

.task-library .task-group-header {
  padding: 13px 15px 8px;
  text-transform: none;
  letter-spacing: 0;
}

.task-group-header-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.task-group-header-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: var(--task-group-tone);
  border-radius: 10px;
  background: color-mix(in srgb, var(--task-group-tone) 11%, transparent);
}

.task-group-header-copy>span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.task-group-header-copy strong {
  color: var(--clr-text);
  font-size: .66rem;
  font-weight: 900;
}

.task-group-header-copy small {
  color: var(--clr-text-muted);
  font-size: .49rem;
  font-weight: 600;
}

.task-library .task-group-count {
  display: grid;
  min-width: 29px;
  height: 29px;
  place-items: center;
  padding: 0 7px;
  color: var(--clr-text);
  background: rgba(148, 163, 184, .07);
  font-family: var(--font-numbers);
  font-weight: 850;
}

.task-library .task-list-rows {
  gap: 8px;
  padding: 8px 12px 14px;
}

.task-library .task-row {
  flex-wrap: wrap;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(148, 163, 184, .035);
  box-shadow: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.task-library .task-row:hover {
  background: rgba(139, 125, 246, .065) !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(2, 6, 23, .07);
}

.task-row-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.task-row-title-line .task-row-title {
  min-width: 0;
  margin-bottom: 0;
}

.task-row-focus-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  color: #a99fff;
  border-radius: 99px;
  background: rgba(139, 125, 246, .1);
  font-size: .45rem;
  font-weight: 850;
}

.task-row-actions {
  display: contents;
}

.task-row-more {
  color: var(--clr-text-muted);
  background: rgba(148, 163, 184, .055);
}

.task-row-more:hover,
.task-row.actions-open .task-row-more {
  color: #aaa2fb;
  background: rgba(139, 125, 246, .11);
}

.task-row-action-menu {
  display: none;
  flex: 1 0 100%;
  order: 20;
  align-items: center;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid rgba(148, 163, 184, .08);
  animation: task-row-actions-in .18s ease both;
}

.task-row.actions-open .task-row-action-menu {
  display: flex;
}

.task-row-action-menu button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  color: var(--clr-text-muted);
  border: 0;
  border-radius: 9px;
  background: rgba(148, 163, 184, .06);
  font: inherit;
  font-size: .5rem;
  font-weight: 750;
  cursor: pointer;
}

.task-row-action-menu button:hover {
  color: var(--clr-text);
  background: rgba(139, 125, 246, .1);
}

.task-row-action-menu button.danger {
  color: #f18194;
  background: rgba(242, 107, 121, .07);
}

.task-library-empty {
  display: grid;
  min-height: 220px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 30px 18px;
  text-align: center;
}

.task-library-empty>span {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
  place-items: center;
  color: #aaa2fb;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(139, 125, 246, .14), rgba(45, 212, 167, .07));
}

.task-library-empty h3 {
  margin: 0;
  color: var(--clr-text);
  font-size: .82rem;
  font-weight: 900;
}

.task-library-empty p {
  max-width: 430px;
  margin: 0 0 7px;
  color: var(--clr-text-muted);
  font-size: .58rem;
  line-height: 1.7;
}

.task-library-empty .btn {
  min-width: 150px;
  justify-content: center;
}

.task-library .task-row.is-focus-task {
  border-color: rgba(139, 125, 246, .25);
  background: rgba(139, 125, 246, .08);
  box-shadow: inset 3px 0 #7667f8;
}

html[dir="rtl"] .task-library .task-row.is-focus-task {
  box-shadow: inset -3px 0 #7667f8;
}

.task-pick-focus-btn {
  color: #8e9bae;
}

.task-pick-focus-btn:hover,
.task-pick-focus-btn.is-active {
  color: #b2aaff;
  background: rgba(139, 125, 246, .11);
}

@keyframes task-library-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes task-row-actions-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes task-focus-pulse {

  0%,
  100% {
    opacity: .5;
    transform: scaleY(.52);
  }

  45% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes task-focus-spark {

  0%,
  100% {
    opacity: .72;
    transform: scale(.92) rotate(-5deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.08) rotate(5deg);
  }
}

@keyframes task-focus-halo {

  0%,
  100% {
    opacity: .55;
    transform: translate3d(0, 0, 0) scale(.94);
  }

  50% {
    opacity: .9;
    transform: translate3d(38px, 30px, 0) scale(1.08);
  }
}

@keyframes task-focus-sweep {

  0%,
  22% {
    opacity: 0;
    inset-inline-start: -46%;
  }

  48% {
    opacity: .42;
  }

  72%,
  100% {
    opacity: 0;
    inset-inline-start: 112%;
  }
}

@keyframes task-focus-progress-glow {

  0%,
  15% {
    inset-inline-start: -45%;
  }

  72%,
  100% {
    inset-inline-start: 115%;
  }
}

@keyframes task-focus-orbit-breathe {

  0%,
  100% {
    opacity: .65;
    transform: scale(.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

@keyframes task-focus-orbit-dot {
  to {
    transform: rotate(360deg);
  }
}

@keyframes task-context-live {
  50% {
    opacity: .55;
    transform: scale(.78);
  }
}

@keyframes task-context-icon {

  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

@keyframes task-context-ripple {

  0%,
  100% {
    opacity: .28;
    transform: scale(.9) rotate(0);
  }

  50% {
    opacity: .72;
    transform: scale(1.04) rotate(12deg);
  }
}

@keyframes task-context-star {

  0%,
  100% {
    opacity: .35;
    transform: scale(.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

@keyframes task-context-line {
  0% {
    inset-inline-start: -48%;
  }

  55%,
  100% {
    inset-inline-start: 110%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .task-focus-shell::before,
  .task-focus-shell::after,
  .task-focus-kicker>svg,
  .task-focus-pulse i,
  .task-focus-progress-track span::after,
  .task-now-orbit,
  .task-now-orbit::before,
  .task-context-live i,
  .task-system-card::after,
  .task-system-icon,
  .task-system-ripple,
  .task-system-star {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .tasks-focus-page {
    gap: 11px;
  }

  .tasks-focus-page>.page-header {
    padding-bottom: 4px;
  }

  .task-focus-shell {
    padding: 16px;
    border-radius: 21px;
  }

  .task-focus-day-head {
    align-items: flex-start;
  }

  .task-focus-day-head p {
    display: none;
  }

  .task-focus-progress {
    min-width: 72px;
    padding: 8px 10px;
  }

  .task-system-card {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 19px;
    padding: 20px;
  }

  .task-system-visual {
    width: 106px;
    height: 106px;
  }

  .task-system-icon {
    width: 67px;
    height: 67px;
    border-radius: 22px;
  }

  .task-system-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .task-system-actions .task-system-dismiss {
    grid-column: 1 / -1;
  }

  .task-now-card {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 19px;
    border-radius: 18px;
  }

  .task-now-main h2 {
    margin-top: 14px;
    font-size: 1.45rem;
  }

  .task-now-actions {
    grid-template-columns: 1fr 1fr;
  }

  .task-now-complete {
    grid-column: 1 / -1;
    min-height: 53px;
  }

  .task-now-actions .task-now-start {
    grid-column: 1 / -1;
  }

  .task-now-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-now-empty {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
  }

  .task-now-empty .btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .task-library-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px;
  }

}

@media (max-width: 520px) {
  .task-focus-shell {
    margin-inline: -1px;
    padding: 14px;
  }

  .task-focus-kicker {
    font-size: .62rem;
  }

  .task-focus-day-head h3 {
    font-size: 1.06rem;
  }

  .task-focus-progress strong {
    font-size: .92rem;
  }

  .task-focus-progress span {
    font-size: .48rem;
  }

  .task-focus-progress-track {
    margin: 13px 0 15px;
  }

  .task-context-head {
    align-items: flex-start;
    margin-bottom: 13px;
  }

  .task-context-live {
    max-width: 116px;
    justify-content: flex-end;
    text-align: end;
  }

  .task-system-card {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 18px;
    text-align: center;
  }

  .task-system-visual {
    width: 94px;
    height: 94px;
  }

  .task-system-icon {
    width: 61px;
    height: 61px;
    border-radius: 20px;
  }

  .task-system-copy h2 {
    margin-top: 7px;
    font-size: 1.44rem;
    line-height: 1.42;
  }

  .task-system-copy>p {
    font-size: .78rem;
    line-height: 1.8;
  }

  .task-system-eyebrow {
    justify-content: center;
  }

  .task-system-meta {
    justify-content: center;
  }

  .task-system-window {
    margin-inline: auto;
  }

  .task-system-actions {
    grid-template-columns: 1fr;
  }

  .task-system-actions .task-system-dismiss {
    grid-column: auto;
  }

  .task-context-foot {
    align-items: flex-start;
    font-size: .65rem;
    text-align: start;
  }

  .task-now-card {
    padding: 16px;
  }

  .task-now-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .task-now-reasons {
    width: 100%;
  }

  .task-now-main h2 {
    font-size: 1.28rem;
    line-height: 1.45;
  }

  .task-now-description {
    font-size: .67rem;
  }

  .task-now-meta {
    gap: 5px;
    margin-top: 13px;
  }

  .task-now-meta span {
    padding: 5px 7px;
    font-size: .52rem;
  }

  .task-now-actions .btn {
    min-height: 43px;
  }

  .task-library-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .task-library-toggle-action {
    grid-column: 3;
    grid-row: 1;
  }

  .task-library-toggle-action {
    font-size: 0;
  }

  .task-library-toggle-action svg {
    width: 20px;
    height: 20px;
  }

  .task-library-content {
    padding-inline: 8px;
  }

  .task-library .filter-group-container {
    overflow: hidden;
  }

  .task-library .filter-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .task-library .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .task-library .filter-tab-btn {
    flex: 0 0 auto;
  }

  .task-library .task-row {
    align-items: flex-start;
    padding: 12px 10px;
  }

  .task-library .task-row-body {
    padding-top: 2px;
  }

  .task-row-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .task-row-action-menu {
    display: none;
    grid-template-columns: repeat(3, 1fr);
  }

  .task-row.actions-open .task-row-action-menu {
    display: grid;
  }

  .task-row-action-menu button {
    width: 100%;
    padding-inline: 6px;
  }

  .task-library .task-row .btn-icon-sm {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
}

/* Two-minute start — optional help, never a gate before focus */
.task-now-breaker {
  color: #b9b2ff !important;
  background: rgba(118, 103, 248, .09) !important;
}

.task-now-breaker:hover {
  color: #eeeaff !important;
  background: rgba(118, 103, 248, .16) !important;
}

.fb-micro-card {
  width: min(500px, calc(100vw - 28px));
  max-width: 500px;
  max-height: min(760px, calc(100dvh - 28px));
  padding: 28px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 10% 0, rgba(52, 211, 153, .12), transparent 31%),
    radial-gradient(circle at 95% 105%, rgba(129, 140, 248, .22), transparent 40%),
    linear-gradient(145deg, #171d30, #0d1322);
}

.fb-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  inset-inline-end: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #909db0;
  border: 0;
  border-radius: 11px;
  background: rgba(148, 163, 184, .075);
  cursor: pointer;
}

.fb-close:hover {
  color: #fff;
  background: rgba(148, 163, 184, .14);
}

.fb-micro-card .fb-timer-view {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.fb-micro-header {
  width: 100%;
  margin: 4px 0 16px;
}

.fb-micro-header h2 {
  margin: 6px 0 2px;
  font-size: 1.55rem;
}

.fb-micro-header p {
  margin-top: 2px;
  font-size: .72rem;
}

.fb-micro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #66dfba;
  font-size: .62rem;
  font-weight: 850;
}

.fb-first-step {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(148, 163, 184, .07);
  text-align: start;
}

.fb-first-step>span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #73e1bf;
  border-radius: 12px;
  background: rgba(52, 211, 153, .1);
}

.fb-first-step>div {
  display: grid;
  gap: 3px;
}

.fb-first-step small {
  color: #8f86e9;
  font-size: .55rem;
  font-weight: 850;
}

.fb-first-step strong {
  color: #edf2f8;
  font-size: .72rem;
  line-height: 1.65;
}

.fb-first-step p {
  margin: 0;
  color: #8996a9;
  font-size: .58rem;
  line-height: 1.7;
}

.fb-micro-timer-box {
  width: 178px;
  height: 178px;
  margin: 18px 0;
}

.fb-micro-timer-box .fb-time-display {
  font-size: 2.25rem;
}

.fb-micro-timer-box .fb-time-label {
  color: #6bdcba;
  font-size: .54rem;
}

.fb-micro-actions,
.fb-success-choices {
  flex-direction: column;
  gap: 8px;
}

.fb-micro-actions .btn,
.fb-success-choices .btn {
  width: 100%;
  min-height: 43px;
}

.fb-micro-success {
  padding-top: 12px;
}

.fb-micro-success .fb-success-icon {
  display: grid;
  place-items: center;
  color: #65dfba;
  border: 0;
}

.fb-micro-success .fb-success-title {
  margin-top: 8px;
}

.fb-micro-success .fb-success-desc {
  max-width: 360px;
}

.fb-micro-success .fb-xp-pill {
  border: 0;
}

@media (max-width: 760px) {
  .task-now-actions .task-now-breaker {
    grid-column: 1 / -1;
  }

  .fb-micro-card {
    max-height: calc(100dvh - 18px);
    padding: 22px 18px 20px;
    border-radius: 23px;
  }

  .fb-close {
    top: 12px;
    inset-inline-end: 12px;
  }

  .fb-micro-header {
    padding-inline: 32px;
  }

  .fb-micro-header h2 {
    font-size: 1.35rem;
  }

  .fb-first-step {
    padding: 12px;
  }

  .fb-micro-timer-box {
    width: 155px;
    height: 155px;
    margin-block: 14px;
  }

  .fb-micro-timer-box .fb-time-display {
    font-size: 2rem;
  }

  .fb-micro-actions .btn,
  .fb-success-choices .btn {
    min-height: 46px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Quick notes capture inbox — 2026-07-22
══════════════════════════════════════════════════════════════ */
#qn-drawer {
  width: min(480px, calc(100vw - 24px));
  overflow: hidden;
  border: 0 !important;
  background:
    radial-gradient(circle at 12% 0, rgba(139, 125, 246, .15), transparent 26%),
    linear-gradient(165deg, #151d30, #0d1423 68%);
  box-shadow: -26px 0 80px rgba(2, 6, 23, .4);
}

.qn-drawer-header {
  align-items: flex-start;
  padding: 20px 19px 14px;
  background: transparent;
}

.qn-drawer-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.qn-heading-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #c5beff;
  border-radius: 14px;
  background: rgba(139, 125, 246, .13);
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .12);
}

.qn-drawer-heading>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.qn-drawer-heading small {
  color: #59d0a7;
  font-size: .61rem;
  font-weight: 850;
}

.qn-drawer-heading p {
  margin: 0;
  color: #7d8ba0;
  font-size: .62rem;
  line-height: 1.55;
}

.qn-drawer-title {
  gap: 7px;
  color: #f5f7fb;
  font-size: 1rem;
  font-weight: 900;
}

.qn-count {
  min-width: 21px;
  height: 21px;
  background: rgba(139, 125, 246, .16);
  color: #bcb4ff;
}

.qn-close-btn {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  color: #8996aa;
  background: rgba(148, 163, 184, .055);
}

.qn-close-btn:hover {
  color: #fff;
  background: rgba(148, 163, 184, .11);
}

.qn-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 14px 10px;
}

.qn-overview article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(148, 163, 184, .045);
}

.qn-overview article>span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  color: #a99fff;
  border-radius: 9px;
  background: rgba(139, 125, 246, .09);
}

.qn-overview article:nth-child(2)>span {
  color: #e8b656;
  background: rgba(231, 166, 63, .09);
}

.qn-overview article:nth-child(3)>span {
  color: #52cea3;
  background: rgba(43, 190, 145, .09);
}

.qn-overview article>div {
  display: grid;
  gap: 1px;
}

.qn-overview strong {
  color: #eef2f8;
  font-size: .8rem;
  font-weight: 900;
}

.qn-overview small {
  color: #718097;
  font-size: .54rem;
}

.qn-input-area {
  flex: 0 0 auto;
  margin: 0 14px 11px;
  padding: 12px;
  border: 0 !important;
  border-radius: 16px;
  background: rgba(139, 125, 246, .06);
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .08), 0 12px 30px rgba(2, 6, 23, .1);
}

.qn-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.qn-compose-head>div {
  display: grid;
  gap: 1px;
}

.qn-compose-head>div>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c7c0ff;
  font-size: .64rem;
  font-weight: 850;
}

.qn-compose-head small {
  color: #728098;
  font-size: .53rem;
}

#qn-cancel-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  color: #a6b0c0;
  border: 0;
  border-radius: 8px;
  background: rgba(148, 163, 184, .07);
  cursor: pointer;
  font: inherit;
  font-size: .57rem;
  font-weight: 750;
}

#qn-cancel-edit[hidden] {
  display: none !important;
}

#qn-textarea {
  min-height: 105px;
  padding: 12px 13px;
  border: 0 !important;
  border-radius: 12px;
  background-color: rgba(4, 10, 21, .34) !important;
  color: #eef2f8;
  font-size: .75rem;
  line-height: 1.8;
  box-shadow: none !important;
}

#qn-textarea:focus {
  background-color: rgba(4, 10, 21, .5) !important;
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .1) !important;
}

#qn-textarea::placeholder {
  color: #65738a;
}

.qn-input-footer {
  gap: 10px;
  margin-top: 9px;
}

.qn-compose-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.qn-char-count {
  color: #68778e;
  font-size: .53rem;
  direction: ltr;
}

.qn-color-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qn-color-picker button {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

.qn-color-picker button.active {
  border-color: #fff;
  transform: scale(1.15);
}

.qn-save-btn {
  min-width: 88px;
  min-height: 37px;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7568ed, #6052df);
  font-size: .65rem;
  box-shadow: 0 8px 20px rgba(96, 82, 223, .2);
}

.qn-save-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
  box-shadow: none;
}

.qn-shortcut-hint {
  margin: 7px 0 -2px;
  color: #59677c;
  font-size: .49rem;
  text-align: end;
}

.qn-tools {
  display: grid;
  gap: 8px;
  padding: 0 14px 8px;
}

.qn-search-wrap {
  min-height: 39px;
  padding: 0 11px;
  color: #718097;
  border: 0 !important;
  border-radius: 11px;
  background-color: rgba(148, 163, 184, .05) !important;
  box-shadow: none !important;
}

.qn-search-wrap:focus-within {
  background-color: rgba(148, 163, 184, .075) !important;
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .08) !important;
}

.qn-search-wrap input {
  height: 39px;
  background: transparent !important;
  color: #e8edf5;
  font-size: .65rem;
  box-shadow: none !important;
}

.qn-filter-tabs {
  display: flex;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.qn-filter-tabs::-webkit-scrollbar {
  display: none;
}

.qn-filter-tabs button {
  min-height: 31px;
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #7e8ba0;
  border-radius: 9px;
  font-size: .59rem;
}

.qn-filter-tabs button.active {
  color: #d2cdff;
  background: rgba(139, 125, 246, .13);
}

.qn-results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 2px 0;
  color: #77859a;
  font-size: .56rem;
}

.qn-results-meta b {
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  color: #a9a0f6;
  border-radius: 7px;
  background: rgba(139, 125, 246, .08);
  font-size: .57rem;
}

.qn-notes-list {
  gap: 9px;
  padding: 1px 14px 20px;
}

.qn-note-item {
  min-width: 0;
}

.qn-note-card {
  overflow: hidden;
  padding: 13px 14px 12px;
  border: 0 !important;
  border-radius: 14px;
  background: rgba(148, 163, 184, .045);
  box-shadow: 0 10px 25px rgba(2, 6, 23, .1);
}

.qn-note-card:hover {
  background: rgba(148, 163, 184, .065);
  transform: translateY(-1px);
}

.qn-note-card.pinned {
  background: rgba(139, 125, 246, .07);
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .09), 0 12px 28px rgba(2, 6, 23, .1);
}

.qn-note-card.archived {
  opacity: .78;
}

.qn-note-card::before {
  width: 4px;
}

.qn-note-card-head {
  display: flex;
  min-height: 23px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.qn-note-badges {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.qn-note-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  color: #bdb5ff;
  border-radius: 7px;
  background: rgba(139, 125, 246, .1);
  font-size: .5rem;
  font-weight: 800;
}

.qn-note-badges .is-task {
  color: #59cfa7;
  background: rgba(43, 190, 145, .09);
}

.qn-note-badges .is-archived {
  color: #97a3b4;
  background: rgba(148, 163, 184, .08);
}

.qn-note-card-head time {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #66748a;
  font-size: .5rem;
  white-space: nowrap;
}

.qn-note-text {
  margin: 0 0 11px;
  color: #e4e9f1;
  font-size: .73rem;
  line-height: 1.8;
}

.qn-note-footer {
  align-items: center;
  gap: 8px;
}

.qn-note-primary {
  display: inline-flex;
  min-height: 33px;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  color: #c8c1ff;
  border: 0;
  border-radius: 9px;
  background: rgba(139, 125, 246, .1);
  cursor: pointer;
  font: inherit;
  font-size: .57rem;
  font-weight: 800;
}

.qn-note-primary:hover {
  color: #fff;
  background: rgba(139, 125, 246, .17);
}

.qn-note-primary.is-done {
  color: #61d0aa;
  background: rgba(43, 190, 145, .08);
  cursor: default;
}

.qn-note-primary.restore {
  color: #62d1ab;
  background: rgba(43, 190, 145, .08);
}

.qn-note-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qn-icon-btn {
  width: 31px;
  height: 31px;
  color: #8390a4;
  border-radius: 9px;
  background: rgba(148, 163, 184, .055);
}

.qn-icon-btn:hover {
  color: #f1f4f8;
  background: rgba(148, 163, 184, .1);
}

.qn-icon-btn.active {
  color: #e2b456;
  background: rgba(231, 166, 63, .1);
}

.qn-empty {
  min-height: 210px;
  justify-content: center;
  padding: 28px 18px;
}

.qn-empty-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #9e94ef;
  border-radius: 18px;
  background: rgba(139, 125, 246, .09);
}

.qn-empty .qn-empty-icon svg {
  opacity: 1;
}

.qn-empty p {
  color: #dce2eb;
  font-size: .78rem;
}

.qn-empty>span:not(.qn-empty-icon) {
  color: #718097;
  font-size: .61rem;
}

.qn-empty button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 8px 12px;
  color: #d1cbff;
  border: 0;
  border-radius: 10px;
  background: rgba(139, 125, 246, .11);
  cursor: pointer;
  font: inherit;
  font-size: .62rem;
  font-weight: 800;
}

html.light #qn-drawer {
  background: radial-gradient(circle at 12% 0, rgba(139, 125, 246, .11), transparent 27%), linear-gradient(165deg, #fff, #f5f7fb 70%);
  box-shadow: -24px 0 70px rgba(71, 85, 105, .17);
}

html.light .qn-heading-icon {
  color: #6557d7;
  background: rgba(101, 87, 215, .09);
}

html.light .qn-drawer-title,
html.light .qn-overview strong,
html.light .qn-note-text,
html.light .qn-empty p {
  color: #1d293c;
}

html.light .qn-drawer-heading p,
html.light .qn-drawer-heading small,
html.light .qn-overview small,
html.light .qn-note-card-head time,
html.light .qn-empty>span:not(.qn-empty-icon) {
  color: #718096;
}

html.light .qn-overview article,
html.light .qn-note-card {
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 9px 24px rgba(71, 85, 105, .075);
}

html.light .qn-note-card.pinned {
  background: #f7f5ff;
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .08), 0 10px 25px rgba(71, 85, 105, .07);
}

html.light .qn-input-area {
  background: rgba(139, 125, 246, .055);
  box-shadow: inset 0 0 0 1px rgba(139, 125, 246, .06), 0 10px 28px rgba(71, 85, 105, .07);
}

html.light #qn-textarea {
  background-color: rgba(255, 255, 255, .88) !important;
  color: #243047;
}

html.light #qn-textarea:focus {
  background-color: #fff !important;
}

html.light .qn-search-wrap {
  background-color: rgba(255, 255, 255, .72) !important;
}

html.light .qn-search-wrap input {
  color: #243047;
}

html.light .qn-close-btn {
  color: #69768a;
  background: rgba(71, 85, 105, .055);
}

html.light .qn-icon-btn {
  color: #718096;
  background: rgba(71, 85, 105, .055);
}

@media (max-width: 900px) {
  #qn-drawer {
    height: min(92dvh, calc(var(--qn-visual-height, 100dvh) - 6px)) !important;
    background: linear-gradient(165deg, #151d30, #0d1423 70%) !important;
    border: 0 !important;
    border-radius: 25px 25px 0 0 !important;
  }

  html.light #qn-drawer {
    background: linear-gradient(165deg, #fff, #f5f7fb 72%) !important;
  }

  #qn-drawer::before {
    margin: 8px auto 0 !important;
    background: rgba(148, 163, 184, .26) !important;
  }

  .qn-drawer-header {
    min-height: 0;
    padding: 8px 13px 8px !important;
  }

  .qn-drawer-heading {
    grid-template-columns: 37px minmax(0, 1fr);
    gap: 9px;
  }

  .qn-heading-icon {
    width: 37px;
    height: 37px;
    border-radius: 12px;
  }

  .qn-drawer-heading p {
    display: none;
  }

  .qn-drawer-title {
    font-size: .9rem;
  }

  .qn-overview {
    gap: 5px;
    padding: 0 10px 7px;
  }

  .qn-overview article {
    gap: 6px;
    padding: 7px 8px;
  }

  .qn-overview article>span {
    width: 26px;
    height: 26px;
  }

  .qn-input-area {
    margin: 0 10px 8px !important;
    padding: 10px !important;
  }

  #qn-textarea {
    min-height: 86px;
    padding: 10px 11px;
    font-size: 16px;
  }

  .qn-shortcut-hint {
    display: none;
  }

  .qn-tools {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 7px;
    padding: 0 10px 7px;
  }

  .qn-filter-tabs {
    width: 100%;
  }

  .qn-filter-tabs button {
    min-height: 35px;
  }

  .qn-results-meta {
    display: none;
  }

  .qn-notes-list {
    gap: 8px;
    padding: 1px 10px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .qn-note-card {
    padding: 12px;
    border-radius: 13px;
  }

  .qn-note-text {
    font-size: .8rem;
  }

  .qn-note-primary {
    min-height: 35px;
  }

  .qn-icon-btn {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 430px) {
  .qn-drawer-heading small {
    font-size: .56rem;
  }

  .qn-overview article>span {
    display: none;
  }

  .qn-overview article {
    justify-content: center;
    text-align: center;
  }

  .qn-input-footer {
    align-items: flex-end;
  }

  .qn-color-picker button {
    width: 17px;
    height: 17px;
  }

  .qn-note-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .qn-note-primary {
    justify-content: center;
  }

  .qn-note-actions {
    justify-content: flex-end;
  }
}

/* ══════════════════════════════════════════════════════════════
   Journal reading mode — 2026-07-22
══════════════════════════════════════════════════════════════ */
.journal-reader {
  display: grid;
  min-height: 560px;
  align-content: start;
  padding: 20px;
}

.journal-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 15px;
}

.journal-reader-back,
.journal-reader-edit {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 11px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: .63rem;
  font-weight: 800;
}

.journal-reader-back {
  color: #929fb1;
  background: rgba(148, 163, 184, .055);
}

.journal-reader-back svg {
  transform: scaleX(-1);
}

html.ltr .journal-reader-back svg {
  transform: none;
}

.journal-reader-back:hover {
  color: #e9edf4;
  background: rgba(148, 163, 184, .1);
}

.journal-reader-edit {
  color: #c8c1ff;
  background: rgba(139, 125, 246, .1);
}

.journal-reader-edit:hover {
  color: #fff;
  background: rgba(139, 125, 246, .17);
}

.journal-reader-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.journal-reader-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 19px;
  border-radius: 17px;
  background: radial-gradient(circle at 8% 0, rgba(43, 190, 145, .08), transparent 35%), rgba(139, 125, 246, .055);
}

.journal-reader-mood {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  font-size: 1.65rem;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .055);
}

.journal-reader-hero>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.journal-reader-hero small {
  color: #58cda5;
  font-size: .62rem;
  font-weight: 800;
}

.journal-reader-hero h2 {
  margin: 1px 0;
  color: #f0f4f9;
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.journal-reader-hero p {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: #78869b;
  font-size: .56rem;
}

.journal-reader-body {
  min-height: 270px;
  margin-top: 12px;
  padding: 21px 20px;
  color: #dfe6ef;
  border-radius: 16px;
  background: rgba(4, 10, 21, .19);
  font-size: .82rem;
  line-height: 2.05;
  overflow-wrap: anywhere;
}

.journal-reader-body>span {
  color: #718097;
}

.journal-reader-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.journal-reader-tags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  color: #a9a0f5;
  border-radius: 8px;
  background: rgba(139, 125, 246, .08);
  font-size: .55rem;
  font-weight: 750;
}

.journal-reader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  padding-top: 13px;
  color: #57cba3;
  font-size: .56rem;
}

.journal-reader-footer>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.journal-reader-footer small {
  color: #6e7c91;
  font-size: .54rem;
}

html.light .journal-reader-back {
  color: #657389;
  background: rgba(71, 85, 105, .055);
}

html.light .journal-reader-hero {
  background: radial-gradient(circle at 8% 0, rgba(43, 190, 145, .08), transparent 35%), #f7f6ff;
}

html.light .journal-reader-mood {
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 7px 18px rgba(71, 85, 105, .06);
}

html.light .journal-reader-hero h2 {
  color: #182337;
}

html.light .journal-reader-body {
  color: #334155;
  background: #f8f9fc;
}

html.light .journal-reader-body>span {
  color: #718096;
}

@media (max-width: 760px) {
  .journal-reader {
    min-height: 360px;
    padding: 13px;
  }

  .journal-reader-header {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 1px 0 11px;
    background: linear-gradient(180deg, rgba(14, 21, 36, .98) 72%, transparent);
  }

  html.light .journal-reader-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 72%, transparent);
  }

  .journal-reader-back,
  .journal-reader-edit {
    min-height: 39px;
    font-size: .68rem;
  }

  .journal-reader-hero {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 11px;
    padding: 15px;
  }

  .journal-reader-mood {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 1.45rem;
  }

  .journal-reader-hero h2 {
    font-size: 1.05rem;
  }

  .journal-reader-body {
    min-height: 230px;
    padding: 17px 15px;
    font-size: 16px;
    line-height: 2;
  }

  .journal-reader-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .journal-reader-back span {
    display: none;
  }

  .journal-reader-back {
    width: 39px;
    padding: 0;
  }

  .journal-reader-actions {
    margin-inline-start: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   Kinship relationship center — 2026-07-22
══════════════════════════════════════════════════════════════ */
.quick-reminder-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.quick-reminder-dialog.kinship-dialog-v2 {
  width: min(960px, calc(100vw - 28px));
  max-width: 960px;
}

.kinship-dialog-v2 .quick-reminder-head {
  background: radial-gradient(circle at 8% 0, rgba(236, 72, 153, .15), transparent 32%), radial-gradient(circle at 90% 100%, rgba(139, 92, 246, .14), transparent 38%);
}

.kinship-dialog-v2 .quick-reminder-eyebrow {
  color: #f093bd;
}

.kinship-reminder-content {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) minmax(270px, .72fr);
  grid-template-areas:
    "overview overview"
    "directory formintro"
    "directory name"
    "directory phone"
    "directory relation"
    "directory schedule"
    "upcoming upcoming";
  align-items: start;
  gap: 11px 14px;
}

.kinship-overview {
  display: grid;
  grid-area: overview;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kinship-overview article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(148, 163, 184, .045);
}

.kinship-overview article>span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #b9afff;
  border-radius: 11px;
  background: rgba(139, 125, 246, .09);
}

.kinship-overview article.is-due>span {
  color: #f28da1;
  background: rgba(240, 112, 141, .1);
}

.kinship-overview article.is-success>span {
  color: #58d0a7;
  background: rgba(43, 190, 145, .09);
}

.kinship-overview article>div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.kinship-overview strong {
  color: #edf2f8;
  font-size: .92rem;
  font-weight: 900;
}

.kinship-overview small {
  overflow: hidden;
  color: #76849a;
  font-size: .56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kinship-form-intro {
  display: flex;
  grid-area: formintro;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(236, 72, 153, .055);
}

.kinship-form-intro>div {
  display: grid;
  gap: 1px;
}

.kinship-form-intro small {
  color: #d884ad;
  font-size: .55rem;
  font-weight: 800;
}

.kinship-form-intro strong {
  color: #e9eef5;
  font-size: .72rem;
}

#kinship-form-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  color: #9aa6b7;
  border: 0;
  border-radius: 8px;
  background: rgba(148, 163, 184, .07);
  cursor: pointer;
  font: inherit;
  font-size: .55rem;
  font-weight: 750;
}

#kinship-form-reset[hidden] {
  display: none !important;
}

.kinship-name-field {
  grid-area: name;
}

.kinship-phone-field {
  grid-area: phone;
}

.kinship-relation-field {
  grid-area: relation;
}

.kinship-schedule-grid {
  grid-area: schedule;
}

.kinship-field {
  gap: 5px !important;
}

.kinship-field .form-input,
.kinship-schedule-grid .form-input {
  min-height: 41px;
  border: 0 !important;
  border-radius: 10px;
  background-color: rgba(148, 163, 184, .055) !important;
  box-shadow: none !important;
}

.kinship-field .form-input:focus,
.kinship-schedule-grid .form-input:focus {
  background-color: rgba(148, 163, 184, .08) !important;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .075) !important;
}

.kinship-relation-presets {
  display: flex;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 0 2px;
  scrollbar-width: none;
}

.kinship-relation-presets::-webkit-scrollbar {
  display: none;
}

.kinship-relation-presets button {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #7f8ba0;
  border: 0;
  border-radius: 8px;
  background: rgba(148, 163, 184, .045);
  cursor: pointer;
  font: inherit;
  font-size: .52rem;
  font-weight: 750;
}

.kinship-relation-presets button:hover,
.kinship-relation-presets button.active {
  color: #f3b6d3;
  background: rgba(236, 72, 153, .1);
}

.kinship-saved-panel {
  grid-area: directory;
  min-height: 420px;
  padding: 13px;
  border: 0 !important;
  border-radius: 16px;
  background: rgba(148, 163, 184, .035);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .055);
}

.kinship-saved-head {
  margin-bottom: 9px;
}

.kinship-saved-head>div {
  display: grid;
  gap: 1px;
}

.kinship-saved-head small {
  color: #d984ad;
  font-size: .54rem;
  font-weight: 800;
}

.kinship-saved-head strong {
  color: #edf2f8;
  font-size: .78rem;
}

.kinship-saved-head>span {
  color: #f0a9cb;
  background: rgba(236, 72, 153, .1);
}

.kinship-search {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  padding: 0 10px;
  color: #748198;
  border-radius: 10px;
  background-color: rgba(148, 163, 184, .05) !important;
}

.kinship-search:focus-within {
  background-color: rgba(148, 163, 184, .075) !important;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .07) !important;
}

.kinship-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  color: #e6ebf3;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-size: .64rem;
}

.kinship-empty-state {
  min-height: 275px;
  flex-direction: column;
  color: #738096;
}

.kinship-empty-state svg {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 13px;
  color: #d78aae;
  border-radius: 15px;
  background: rgba(236, 72, 153, .08);
  box-sizing: border-box;
}

.kinship-list {
  max-height: 365px;
  gap: 7px;
  padding-inline-end: 1px;
}

.kinship-contact-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 0 !important;
  border-radius: 13px;
  background: rgba(148, 163, 184, .045);
  box-shadow: none;
}

.kinship-contact-card[hidden] {
  display: none !important;
}

.kinship-contact-card::before {
  position: absolute;
  width: 3px;
  border-radius: 99px;
  background: #8b7df6;
  content: '';
  inset-block: 9px;
  inset-inline-start: 0;
}

.kinship-contact-card.is-due {
  background: rgba(240, 112, 141, .06);
}

.kinship-contact-card.is-due::before {
  background: #f0708d;
}

.kinship-contact-card.is-new::before {
  background: #e7ad4a;
}

.kinship-contact-main {
  gap: 9px;
}

.kinship-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e75e9f, #8b5cf6);
  font-size: .75rem;
}

.kinship-contact-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.kinship-contact-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.kinship-contact-name strong {
  overflow: hidden;
  color: #e7ecf3;
  font-size: .69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kinship-relation {
  margin: 0;
  flex: 0 0 auto;
  color: #d78caf;
  background: rgba(236, 72, 153, .08);
}

.kinship-last-contact {
  margin: 0 !important;
  color: #78869a !important;
  font-size: .54rem !important;
}

.kinship-due-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kinship-due-line b {
  display: inline-flex;
  padding: 3px 6px;
  color: #9e94ed;
  border-radius: 7px;
  background: rgba(139, 125, 246, .08);
  font-size: .49rem;
  font-weight: 850;
}

.kinship-due-line b[data-tone="due"] {
  color: #ef879b;
  background: rgba(240, 112, 141, .1);
}

.kinship-due-line b[data-tone="soon"] {
  color: #e3ad50;
  background: rgba(231, 166, 63, .09);
}

.kinship-due-line b[data-tone="ready"] {
  color: #57cda5;
  background: rgba(43, 190, 145, .08);
}

.kinship-due-line small {
  color: #68768b;
  font-size: .49rem;
}

.kinship-contact-actions {
  gap: 4px;
}

.kinship-contact-actions a,
.kinship-contact-actions button {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  padding: 0;
  color: #8491a5;
  border: 0;
  border-radius: 9px;
  background: rgba(148, 163, 184, .055);
  cursor: pointer;
  text-decoration: none;
}

.kinship-contact-actions .kinship-action-call {
  color: #5bd1aa;
  background: rgba(43, 190, 145, .09);
}

.kinship-contact-actions .kinship-action-whatsapp {
  color: #61d5ae;
  background: rgba(43, 190, 145, .075);
}

.kinship-contact-actions .kinship-contact-done {
  color: #c1b9ff !important;
  background: rgba(139, 125, 246, .09);
}

.kinship-contact-actions .kinship-action-delete {
  color: #d57b8d;
}

.kinship-contact-actions a:hover,
.kinship-contact-actions button:hover {
  color: #fff !important;
  transform: translateY(-1px);
}

.kinship-reminder-content>.quick-reminder-upcoming {
  grid-area: upcoming;
}

.kinship-dialog-v2 .modal-footer {
  padding-top: 12px;
}

.kinship-dialog-v2 #quick-reminder-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.light .kinship-dialog-v2 .quick-reminder-head {
  background: radial-gradient(circle at 8% 0, rgba(236, 72, 153, .11), transparent 34%), radial-gradient(circle at 90% 100%, rgba(139, 92, 246, .1), transparent 38%), #fbfcff;
}

html.light .kinship-overview article,
html.light .kinship-contact-card {
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 7px 18px rgba(71, 85, 105, .055);
}

html.light .kinship-overview strong,
html.light .kinship-form-intro strong,
html.light .kinship-saved-head strong,
html.light .kinship-contact-name strong {
  color: #1d293c;
}

html.light .kinship-form-intro {
  background: #fff5fa;
}

html.light .kinship-saved-panel {
  background: #f8f9fc;
  box-shadow: none;
}

html.light .kinship-search {
  background-color: #fff !important;
}

html.light .kinship-search input {
  color: #243047;
}

html.light .kinship-contact-card.is-due {
  background: #fff7f9;
}

html.light .kinship-field .form-input,
html.light .kinship-schedule-grid .form-input {
  background-color: #f7f9fc !important;
}

@media (max-width: 760px) {
  .quick-reminder-dialog.kinship-dialog-v2 {
    width: 100%;
    max-width: 100%;
    max-height: 95dvh;
    align-self: flex-end;
    border-radius: 24px 24px 0 0;
  }

  .kinship-dialog-v2 .quick-reminder-head {
    padding: 17px 15px 12px;
  }

  .kinship-dialog-v2 .quick-reminder-head p {
    max-width: 285px;
  }

  .kinship-dialog-v2 .modal-body {
    padding: 12px 12px 6px;
  }

  .kinship-reminder-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "overview"
      "directory"
      "formintro"
      "name"
      "phone"
      "relation"
      "schedule"
      "upcoming";
    gap: 9px;
  }

  .kinship-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .kinship-overview article {
    padding: 9px 10px;
  }

  .kinship-saved-panel {
    min-height: 0;
  }

  .kinship-list {
    max-height: 340px;
  }

  .kinship-dialog-v2 .modal-footer {
    position: sticky;
    z-index: 4;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 21, 36, .97);
  }

  html.light .kinship-dialog-v2 .modal-footer {
    background: rgba(255, 255, 255, .97);
  }
}

@media (max-width: 430px) {
  .kinship-contact-card {
    grid-template-columns: 1fr;
  }

  .kinship-contact-actions {
    justify-content: flex-end;
  }

  .kinship-contact-actions a,
  .kinship-contact-actions button {
    width: 36px;
    height: 36px;
  }

  .kinship-schedule-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kinship-dialog-v2 .modal-footer .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   Quick alarm command center — 2026-07-22
══════════════════════════════════════════════════════════════ */
.quick-reminder-dialog.alarm-dialog-v2 {
  width: min(860px, calc(100vw - 28px));
  max-width: 860px;
}

.alarm-dialog-v2 .quick-reminder-head {
  background: radial-gradient(circle at 9% 0, rgba(245, 158, 11, .16), transparent 32%), radial-gradient(circle at 90% 100%, rgba(239, 68, 68, .1), transparent 36%);
}

.alarm-dialog-v2 .quick-reminder-eyebrow {
  color: #eeb04a;
}

.alarm-reminder-content {
  display: grid;
  grid-template-columns: minmax(290px, .8fr) minmax(340px, 1.2fr);
  grid-template-areas:
    "overview overview"
    "formintro upcoming"
    "mode upcoming"
    "presets upcoming"
    "preview upcoming"
    "title upcoming"
    "schedule upcoming"
    "repeat upcoming";
  align-items: start;
  gap: 10px 14px;
}

.alarm-overview {
  display: grid;
  grid-area: overview;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.alarm-overview article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(148, 163, 184, .045);
}

.alarm-overview article>span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #efb550;
  border-radius: 11px;
  background: rgba(245, 158, 11, .09);
}

.alarm-overview article:nth-child(2)>span {
  color: #a89df7;
  background: rgba(139, 125, 246, .09);
}

.alarm-overview article:nth-child(3)>span {
  color: #59cfa7;
  background: rgba(43, 190, 145, .09);
}

.alarm-overview article:nth-child(4)>span {
  color: #ef8398;
  background: rgba(240, 112, 141, .09);
}

.alarm-overview article>div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.alarm-overview strong {
  overflow: hidden;
  color: #edf2f8;
  font-size: .83rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-overview small {
  overflow: hidden;
  color: #758398;
  font-size: .54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm-next-summary strong {
  font-size: .68rem !important;
}

.alarm-form-intro {
  display: flex;
  grid-area: formintro;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(245, 158, 11, .055);
}

.alarm-form-intro>div {
  display: grid;
  gap: 1px;
}

.alarm-form-intro small {
  color: #d7a34c;
  font-size: .55rem;
  font-weight: 800;
}

.alarm-form-intro strong {
  color: #e9eef5;
  font-size: .72rem;
}

#alarm-form-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  color: #9aa6b7;
  border: 0;
  border-radius: 8px;
  background: rgba(148, 163, 184, .07);
  cursor: pointer;
  font: inherit;
  font-size: .55rem;
  font-weight: 750;
}

#alarm-form-reset[hidden] {
  display: none !important;
}

.alarm-mode-switch {
  display: grid;
  grid-area: mode;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 11px;
  background: rgba(148, 163, 184, .045);
}

.alarm-mode-switch button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #7e8ba0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .59rem;
  font-weight: 800;
}

.alarm-mode-switch button.active {
  color: #f1bc60;
  background: rgba(245, 158, 11, .1);
}

.alarm-reminder-content>.quick-alarm-presets {
  grid-area: presets;
  padding: 9px;
  border: 0;
  background: rgba(148, 163, 184, .035);
}

.alarm-reminder-content>.quick-alarm-presets[hidden] {
  display: none !important;
}

.alarm-reminder-content>.quick-alarm-presets>span {
  flex-basis: 100%;
  color: #bd9654;
  font-size: .55rem;
}

.alarm-reminder-content>.quick-alarm-presets button {
  min-height: 31px;
  padding: 5px 8px;
  border: 0;
  font-size: .54rem;
}

.alarm-reminder-content>.quick-alarm-presets button.active {
  color: #f7c876;
  background: rgba(245, 158, 11, .11);
}

.alarm-due-preview {
  display: flex;
  grid-area: preview;
  min-height: 37px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  color: #e6b158;
  border-radius: 10px;
  background: rgba(245, 158, 11, .065);
  font-size: .57rem;
  font-weight: 750;
}

.alarm-title-field {
  grid-area: title;
  gap: 5px !important;
}

.alarm-title-field>.form-input,
.alarm-schedule-fields .form-input,
.alarm-repeat-field .form-input {
  min-height: 41px;
  border: 0 !important;
  border-radius: 10px;
  background-color: rgba(148, 163, 184, .055) !important;
  box-shadow: none !important;
}

.alarm-title-field>.form-input:focus,
.alarm-schedule-fields .form-input:focus,
.alarm-repeat-field .form-input:focus {
  background-color: rgba(148, 163, 184, .08) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .075) !important;
}

.alarm-title-suggestions {
  display: flex;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 0;
  scrollbar-width: none;
}

.alarm-title-suggestions::-webkit-scrollbar {
  display: none;
}

.alarm-title-suggestions button {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #7e8ba0;
  border: 0;
  border-radius: 8px;
  background: rgba(148, 163, 184, .045);
  cursor: pointer;
  font: inherit;
  font-size: .51rem;
  font-weight: 750;
}

.alarm-title-suggestions button:hover,
.alarm-title-suggestions button.active {
  color: #eab95f;
  background: rgba(245, 158, 11, .09);
}

.alarm-schedule-fields {
  grid-area: schedule;
}

.alarm-repeat-field {
  grid-area: repeat;
}

.alarm-schedule-fields[hidden],
.alarm-repeat-field[hidden] {
  display: none !important;
}

.alarm-reminder-content>.quick-reminder-upcoming {
  grid-area: upcoming;
  min-height: 390px;
  border: 0;
  border-radius: 16px;
  background: rgba(148, 163, 184, .035);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .055);
}

.alarm-reminder-content .quick-reminder-upcoming-head {
  padding: 13px 14px;
  border-bottom: 0;
}

.alarm-reminder-list {
  max-height: 355px;
  gap: 6px;
  padding: 0 10px 11px;
}

.alarm-reminder-card {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 12px;
  background: rgba(148, 163, 184, .045);
}

.alarm-reminder-card>span {
  width: 35px !important;
  height: 35px !important;
  color: #ecb351 !important;
  border-radius: 11px !important;
  background: rgba(245, 158, 11, .09) !important;
}

.alarm-reminder-card>div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.alarm-reminder-card strong {
  color: #e8edf4;
  font-size: .67rem;
}

.alarm-reminder-card small {
  color: #718096;
  font-size: .53rem;
}

.alarm-reminder-card b {
  width: fit-content;
  margin-top: 2px;
  padding: 3px 6px;
  color: #e6af51;
  border-radius: 7px;
  background: rgba(245, 158, 11, .075);
  font-size: .48rem;
}

.alarm-card-actions {
  display: flex !important;
  align-items: center;
  gap: 4px !important;
}

.alarm-card-actions button {
  display: grid !important;
  width: 31px !important;
  height: 31px !important;
  place-items: center;
  padding: 0 !important;
  color: #8491a5 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(148, 163, 184, .055) !important;
  cursor: pointer;
}

.alarm-card-actions button:first-child {
  color: #eab75f !important;
  background: rgba(245, 158, 11, .08) !important;
}

.alarm-card-actions button:last-child {
  color: #d7788b !important;
}

.alarm-card-actions button:hover {
  color: #fff !important;
  transform: translateY(-1px);
}

.alarm-dialog-v2 .modal-footer {
  padding-top: 12px;
}

.alarm-dialog-v2 #quick-reminder-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.light .alarm-dialog-v2 .quick-reminder-head {
  background: radial-gradient(circle at 9% 0, rgba(245, 158, 11, .12), transparent 34%), radial-gradient(circle at 90% 100%, rgba(239, 68, 68, .08), transparent 38%), #fbfcff;
}

html.light .alarm-overview article,
html.light .alarm-reminder-card {
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 7px 18px rgba(71, 85, 105, .055);
}

html.light .alarm-overview strong,
html.light .alarm-form-intro strong,
html.light .alarm-reminder-card strong {
  color: #1d293c;
}

html.light .alarm-form-intro {
  background: #fff9ee;
}

html.light .alarm-reminder-content>.quick-reminder-upcoming {
  background: #f8f9fc;
  box-shadow: none;
}

html.light .alarm-title-field>.form-input,
html.light .alarm-schedule-fields .form-input,
html.light .alarm-repeat-field .form-input {
  background-color: #f7f9fc !important;
}

@media (max-width: 760px) {
  .quick-reminder-dialog.alarm-dialog-v2 {
    width: 100%;
    max-width: 100%;
    max-height: 95dvh;
    align-self: flex-end;
    border-radius: 24px 24px 0 0;
  }

  .alarm-dialog-v2 .quick-reminder-head {
    padding: 17px 15px 12px;
  }

  .alarm-dialog-v2 .modal-body {
    padding: 12px 12px 6px;
  }

  .alarm-reminder-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "overview"
      "formintro"
      "mode"
      "presets"
      "preview"
      "title"
      "schedule"
      "repeat"
      "upcoming";
    gap: 9px;
  }

  .alarm-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .alarm-overview article {
    padding: 9px 10px;
  }

  .alarm-reminder-content>.quick-reminder-upcoming {
    min-height: 0;
  }

  .alarm-reminder-list {
    max-height: 350px;
  }

  .alarm-dialog-v2 .modal-footer {
    position: sticky;
    z-index: 4;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 21, 36, .97);
  }

  html.light .alarm-dialog-v2 .modal-footer {
    background: rgba(255, 255, 255, .97);
  }
}

@media (max-width: 430px) {
  .alarm-reminder-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .alarm-card-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .alarm-card-actions button {
    width: 36px !important;
    height: 36px !important;
  }

  .alarm-dialog-v2 .modal-footer .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   Start task — intentional focus launcher — 2026-07-22
══════════════════════════════════════════════════════════════ */
.start-task-modal-v2 {
  padding: 24px;
}

.start-task-dialog {
  display: grid;
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: min(880px, calc(100dvh - 40px));
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #111827;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .44);
}

.start-task-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
  align-items: start;
  gap: 13px;
  padding: 22px 24px 18px;
  background:
    radial-gradient(circle at 8% 0, rgba(16, 185, 129, .2), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(99, 102, 241, .14), transparent 38%),
    #141d2d;
}

.start-task-head-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #22c98b, #0f9f74);
  box-shadow: 0 10px 25px rgba(16, 185, 129, .22);
}

.start-task-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  color: #6ee7b7;
  font-size: .62rem;
  font-weight: 850;
}

.start-task-head h2 {
  margin: 0;
  color: #f5f8fc;
  font-size: 1.2rem;
  line-height: 1.35;
}

.start-task-head p {
  margin: 5px 0 0;
  color: #95a2b6;
  font-size: .68rem;
  line-height: 1.7;
}

.start-task-close {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #8d9aae;
  border: 0;
  border-radius: 12px;
  background: rgba(148, 163, 184, .07);
  cursor: pointer;
}

.start-task-close:hover {
  color: #fff;
  background: rgba(148, 163, 184, .12);
}

.start-task-body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .18) transparent;
}

.start-task-picker,
.start-task-duration {
  display: grid;
  gap: 10px;
}

.start-task-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.start-task-section-title>div {
  display: grid;
  gap: 2px;
}

.start-task-section-title strong {
  color: #e7edf5;
  font-size: .74rem;
}

.start-task-section-title span {
  color: #78869b;
  font-size: .55rem;
}

.start-task-section-title>small {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  color: #66dcb0;
  border-radius: 8px;
  background: rgba(16, 185, 129, .075);
  font-size: .5rem;
  font-weight: 800;
}

.start-task-options {
  display: grid;
  max-height: 280px;
  gap: 7px;
  overflow-y: auto;
  padding-inline-end: 2px;
}

.start-task-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  color: inherit;
  border: 0;
  border-radius: 14px;
  background: rgba(148, 163, 184, .05);
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.start-task-option:hover {
  background: rgba(148, 163, 184, .085);
  transform: translateY(-1px);
}

.start-task-option.is-selected {
  background: linear-gradient(135deg, rgba(16, 185, 129, .13), rgba(99, 102, 241, .08));
  box-shadow: inset 4px 0 #22c98b;
}

html[dir="rtl"] .start-task-option.is-selected {
  box-shadow: inset -4px 0 #22c98b;
}

.start-task-radio {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: rgba(148, 163, 184, .12);
}

.start-task-radio i {
  width: 8px;
  height: 8px;
  border-radius: inherit;
  background: transparent;
  transition: .18s ease;
}

.start-task-option.is-selected .start-task-radio {
  background: rgba(16, 185, 129, .2);
}

.start-task-option.is-selected .start-task-radio i {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .09);
}

.start-task-option-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.start-task-option-top {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.start-task-option-top strong {
  overflow: hidden;
  color: #e8eef6;
  font-size: .71rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-task-option-top em {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  color: #73e5bb;
  border-radius: 7px;
  background: rgba(16, 185, 129, .1);
  font-size: .45rem;
  font-style: normal;
  font-weight: 850;
}

.start-task-option-meta,
.start-task-reasons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.start-task-option-meta>span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #8794a8;
  font-size: .52rem;
}

.start-task-option-meta .priority-high {
  color: #fb7185;
}

.start-task-option-meta .priority-med {
  color: #f6be63;
}

.start-task-option-meta .priority-low {
  color: #73d7b1;
}

.start-task-reasons i {
  padding: 3px 6px;
  color: #8190a5;
  border-radius: 6px;
  background: rgba(148, 163, 184, .055);
  font-size: .44rem;
  font-style: normal;
  font-weight: 750;
}

.start-task-arrow {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #59687d;
  border-radius: 8px;
  background: rgba(148, 163, 184, .045);
}

.start-task-option.is-selected .start-task-arrow {
  color: #56d7a6;
  background: rgba(16, 185, 129, .09);
}

.start-task-duration {
  margin-top: 18px;
  padding-top: 2px;
}

.start-task-duration-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.start-task-duration-options button {
  position: relative;
  display: flex;
  min-height: 59px;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  padding: 10px 7px;
  color: #8c99ac;
  border: 0;
  border-radius: 13px;
  background: rgba(148, 163, 184, .05);
  cursor: pointer;
  font: inherit;
}

.start-task-duration-options button strong {
  color: #dce4ed;
  font-family: var(--font-numbers);
  font-size: .85rem;
}

.start-task-duration-options button span {
  font-size: .48rem;
}

.start-task-duration-options button small {
  position: absolute;
  inset-inline-end: 6px;
  top: 5px;
  padding: 2px 4px;
  color: #65ddb0;
  border-radius: 5px;
  background: rgba(16, 185, 129, .09);
  font-size: .36rem;
}

.start-task-duration-options button:hover,
.start-task-duration-options button.is-active {
  color: #70dfb5;
  background: rgba(16, 185, 129, .105);
}

.start-task-duration-options button.is-active strong {
  color: #67e3b5;
}

.start-task-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.start-task-empty>span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #55d6a7;
  border-radius: 18px;
  background: rgba(16, 185, 129, .09);
}

.start-task-empty h3 {
  margin: 3px 0 0;
  color: #e8eef6;
  font-size: .9rem;
}

.start-task-empty p {
  max-width: 340px;
  margin: 0 0 8px;
  color: #7e8ba0;
  font-size: .62rem;
}

.start-task-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #0e1624;
  box-shadow: 0 -12px 32px rgba(2, 6, 23, .12);
}

.start-task-choice-summary {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.start-task-choice-summary>span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5ed7aa;
  font-size: .48rem;
  font-weight: 800;
}

.start-task-choice-summary strong {
  overflow: hidden;
  color: #e7edf5;
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-task-choice-summary small {
  color: #738096;
  font-size: .5rem;
}

.start-task-footer-actions {
  display: flex;
  gap: 7px;
}

.start-task-footer-actions .btn {
  min-height: 40px;
  border: 0 !important;
  border-radius: 11px;
}

.start-task-footer-actions .btn-primary {
  background: linear-gradient(135deg, #16b981, #0c966d);
  box-shadow: 0 8px 20px rgba(16, 185, 129, .18);
}

.start-task-footer-actions .btn-secondary {
  color: #cabdfd;
  background: rgba(139, 125, 246, .09);
}

html.light .start-task-dialog {
  background: #fff;
  box-shadow: 0 28px 70px rgba(51, 65, 85, .2);
}

html.light .start-task-head {
  background: radial-gradient(circle at 8% 0, rgba(16, 185, 129, .14), transparent 34%), radial-gradient(circle at 92% 100%, rgba(99, 102, 241, .08), transparent 38%), #fbfcff;
}

html.light .start-task-head h2,
html.light .start-task-section-title strong,
html.light .start-task-option-top strong,
html.light .start-task-empty h3,
html.light .start-task-choice-summary strong {
  color: #1b293c;
}

html.light .start-task-head p,
html.light .start-task-section-title span,
html.light .start-task-empty p {
  color: #78869a;
}

html.light .start-task-option,
html.light .start-task-duration-options button {
  background: #f6f8fb;
}

html.light .start-task-option:hover {
  background: #f0f5f6;
}

html.light .start-task-option.is-selected {
  background: linear-gradient(135deg, #eafaf4, #f2f3ff);
}

html.light .start-task-duration-options button strong {
  color: #344256;
}

html.light .start-task-duration-options button.is-active strong {
  color: #16805c;
}

html.light .start-task-footer {
  background: #f8fafc;
  box-shadow: 0 -10px 28px rgba(71, 85, 105, .07);
}

@media (max-width: 760px) {
  .start-task-modal-v2 {
    align-items: flex-end;
    padding: 0;
  }

  .start-task-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 54px);
    border-radius: 25px 25px 0 0;
  }

  .start-task-head {
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 16px 15px 13px;
  }

  .start-task-head-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .start-task-head h2 {
    font-size: 1rem;
  }

  .start-task-head p {
    font-size: .59rem;
    line-height: 1.55;
  }

  .start-task-body {
    padding: 14px 13px;
  }

  .start-task-options {
    max-height: 250px;
  }

  .start-task-option {
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 11px 10px;
  }

  .start-task-arrow {
    display: none;
  }

  .start-task-option-top {
    align-items: flex-start;
  }

  .start-task-option-top strong {
    white-space: normal;
  }

  .start-task-section-title {
    align-items: center;
  }

  .start-task-section-title>small {
    padding: 4px 6px;
    font-size: .44rem;
  }

  .start-task-duration-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .start-task-duration-options button {
    min-height: 55px;
    padding: 9px 3px;
  }

  .start-task-duration-options button small {
    inset-inline-end: 3px;
    top: 3px;
    font-size: .32rem;
  }

  .start-task-footer {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 11px 13px calc(11px + env(safe-area-inset-bottom, 0px));
  }

  .start-task-choice-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }

  .start-task-choice-summary>span {
    display: none;
  }

  .start-task-choice-summary small {
    white-space: nowrap;
  }

  .start-task-footer-actions {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
  }

  .start-task-footer-actions .btn {
    width: 100%;
    justify-content: center;
    padding-inline: 8px;
    font-size: .58rem;
  }
}

@media (max-width: 390px) {
  .start-task-head p {
    display: none;
  }

  .start-task-duration-options button small {
    display: none;
  }

  .start-task-footer-actions {
    grid-template-columns: 1fr;
  }

  .start-task-footer-actions .btn {
    min-height: 42px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Daily task sharing center — 2026-07-22
══════════════════════════════════════════════════════════════ */
#share-today-tasks-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0 !important;
}

.task-share-modal-v2 {
  padding: 22px;
}

.task-share-dialog {
  display: grid;
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #111827;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .44);
}

.task-share-head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 38px;
  align-items: start;
  gap: 13px;
  padding: 22px 24px 18px;
  background: radial-gradient(circle at 8% 0, rgba(99, 102, 241, .2), transparent 34%), radial-gradient(circle at 92% 100%, rgba(16, 185, 129, .12), transparent 38%), #151d2d;
}

.task-share-head-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #7868f2, #5145dc);
  box-shadow: 0 10px 25px rgba(81, 69, 220, .25);
}

.task-share-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  color: #a99eff;
  font-size: .61rem;
  font-weight: 850;
}

.task-share-head h2 {
  margin: 0;
  color: #f4f7fb;
  font-size: 1.2rem;
  line-height: 1.35;
}

.task-share-head p {
  margin: 5px 0 0;
  color: #93a0b4;
  font-size: .67rem;
  line-height: 1.7;
}

.task-share-close {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #8e9aae;
  border: 0;
  border-radius: 12px;
  background: rgba(148, 163, 184, .07);
  cursor: pointer;
}

.task-share-close:hover {
  color: #fff;
  background: rgba(148, 163, 184, .13);
}

.task-share-body {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
  grid-template-areas: "preview settings" "result result" "history history";
  min-height: 0;
  gap: 13px;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .18) transparent;
}

.task-share-preview,
.task-share-settings,
.task-share-result,
.task-share-history {
  border: 0;
  border-radius: 18px;
  background: rgba(148, 163, 184, .045);
}

.task-share-preview {
  display: grid;
  grid-area: preview;
  align-content: start;
  gap: 12px;
  padding: 15px;
}

.task-share-settings {
  display: grid;
  grid-area: settings;
  align-content: start;
  gap: 11px;
  padding: 15px;
}

.task-share-result {
  grid-area: result;
}

.task-share-history {
  display: grid;
  grid-area: history;
  gap: 10px;
  padding: 14px 15px;
}

.task-share-preview-top,
.task-share-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-share-preview-top>div,
.task-share-section-title>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-share-preview-top>div>span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9184ee;
  font-size: .5rem;
  font-weight: 800;
}

.task-share-preview-top strong,
.task-share-section-title strong {
  color: #e7edf5;
  font-size: .7rem;
}

.task-share-preview-top>small {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  color: #5dd8ac;
  border-radius: 8px;
  background: rgba(16, 185, 129, .08);
  font-size: .46rem;
  font-weight: 850;
}

.task-share-section-title>div>span {
  color: #78869a;
  font-size: .52rem;
}

.task-share-section-title>svg {
  flex: 0 0 auto;
  color: #8f83ed;
}

.task-share-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.task-share-summary article {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 9px;
  border-radius: 11px;
  background: rgba(148, 163, 184, .05);
}

.task-share-summary article>span {
  display: grid;
  width: 28px;
  height: 28px;
  grid-row: 1 / 3;
  place-items: center;
  color: #a89ef7;
  border-radius: 8px;
  background: rgba(139, 125, 246, .09);
}

.task-share-summary article:nth-child(2)>span {
  color: #60d9ad;
  background: rgba(16, 185, 129, .09);
}

.task-share-summary article:nth-child(3)>span {
  color: #f0ba5c;
  background: rgba(245, 158, 11, .09);
}

.task-share-summary strong {
  color: #edf2f7;
  font-family: var(--font-numbers);
  font-size: .72rem;
  line-height: 1;
}

.task-share-summary small {
  color: #738197;
  font-size: .43rem;
}

.task-share-task-list {
  display: grid;
  gap: 6px;
}

.task-share-task {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(148, 163, 184, .04);
}

.task-share-task>span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #9489ed;
  border-radius: 8px;
  background: rgba(139, 125, 246, .08);
}

.task-share-task>div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-share-task strong {
  overflow: hidden;
  color: #dce4ed;
  font-size: .6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-share-task small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #6f7e93;
  font-size: .46rem;
}

.task-share-task.is-done {
  opacity: .58;
}

.task-share-task.is-done strong {
  text-decoration: line-through;
}

.task-share-more {
  padding: 3px 8px;
  color: #8378df;
  font-size: .46rem;
  font-weight: 750;
}

.task-share-empty-preview {
  display: flex;
  min-height: 116px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: #78869a;
  border-radius: 12px;
  background: rgba(148, 163, 184, .035);
  font-size: .55rem;
  text-align: center;
}

.task-share-empty-preview svg {
  color: #8f83ed;
}

.task-share-access-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.task-share-option {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 8px;
  min-height: 65px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(148, 163, 184, .05);
  cursor: pointer;
  transition: .18s ease;
}

.task-share-option>input,
.task-share-expiry-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.task-share-option.is-active {
  background: linear-gradient(135deg, rgba(139, 125, 246, .14), rgba(99, 102, 241, .07));
  box-shadow: inset 3px 0 #8b7df6;
}

html[dir="rtl"] .task-share-option.is-active {
  box-shadow: inset -3px 0 #8b7df6;
}

.task-share-option-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #a79cf7;
  border-radius: 10px;
  background: rgba(139, 125, 246, .1);
}

.task-share-option>span:nth-child(3) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-share-option strong {
  color: #dfe7f0;
  font-size: .58rem;
}

.task-share-option small {
  color: #718096;
  font-size: .44rem;
}

.task-share-option>i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(148, 163, 184, .14);
}

.task-share-option.is-active>i {
  background: #8b7df6;
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .1);
}

.task-share-password-wrap {
  display: grid;
  gap: 5px;
}

.task-share-password-wrap[hidden] {
  display: none !important;
}

.task-share-password-wrap label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8e9aaf;
  font-size: .5rem;
  font-weight: 750;
}

.task-share-password-wrap input {
  min-height: 40px;
  border: 0 !important;
  border-radius: 10px;
  background: rgba(148, 163, 184, .06) !important;
  box-shadow: none !important;
}

.task-share-password-wrap input:focus {
  background: rgba(148, 163, 184, .085) !important;
  box-shadow: 0 0 0 3px rgba(139, 125, 246, .08) !important;
}

.task-share-expiry-block {
  display: grid;
  gap: 8px;
  padding-top: 3px;
}

.task-share-expiry-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.task-share-expiry-options label {
  position: relative;
  display: grid;
  min-height: 48px;
  place-items: center;
  padding: 6px 3px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .05);
  cursor: pointer;
  text-align: center;
}

.task-share-expiry-options label>span {
  display: grid;
  gap: 1px;
}

.task-share-expiry-options strong {
  color: #d5dee9;
  font-size: .54rem;
}

.task-share-expiry-options small {
  color: #6f7d91;
  font-size: .38rem;
}

.task-share-expiry-options label.is-active {
  background: rgba(16, 185, 129, .1);
}

.task-share-expiry-options label.is-active strong {
  color: #64deb1;
}

.task-share-result {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(280px, .9fr);
  align-items: center;
  gap: 11px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .11), rgba(99, 102, 241, .07));
}

.task-share-result[hidden] {
  display: none !important;
}

.task-share-success-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border-radius: 13px;
  background: linear-gradient(135deg, #36d19a, #11a878);
  box-shadow: 0 8px 18px rgba(16, 185, 129, .18);
}

.task-share-result-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-share-result-copy>span {
  color: #5bd7aa;
  font-size: .48rem;
  font-weight: 850;
}

.task-share-result-copy strong {
  color: #e7eef6;
  font-size: .64rem;
}

.task-share-result-copy small {
  color: #718197;
  font-size: .45rem;
}

.task-share-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
}

.task-share-url-row input {
  min-width: 0;
  height: 38px;
  padding: 0 9px;
  color: #adb8c8;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background: rgba(2, 6, 23, .18);
  direction: ltr;
  font-size: .48rem;
  text-align: left;
}

.task-share-url-row button,
.task-share-result-actions button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  color: #c9c2ff;
  border: 0;
  border-radius: 9px;
  background: rgba(139, 125, 246, .1);
  cursor: pointer;
  font: inherit;
  font-size: .5rem;
  font-weight: 800;
}

.task-share-result-actions {
  display: flex;
  grid-column: 3;
  gap: 5px;
}

.task-share-result-actions button {
  flex: 1;
}

.task-share-result-actions button:first-child {
  color: #dffaf0;
  background: rgba(16, 185, 129, .12);
}

.task-share-history-list {
  display: grid;
  max-height: 155px;
  gap: 5px;
  overflow-y: auto;
}

.task-share-history-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .04);
}

.task-share-history-item.is-inactive {
  opacity: .55;
}

.task-share-history-status {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #8e83ec;
  border-radius: 9px;
  background: rgba(139, 125, 246, .08);
}

.task-share-history-item>div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-share-history-item strong {
  overflow: hidden;
  color: #d7e0ea;
  font-size: .54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-share-history-item small {
  color: #6f7d91;
  font-size: .43rem;
}

.task-share-history-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-share-history-actions button {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #8c99ac;
  border: 0;
  border-radius: 9px;
  background: rgba(148, 163, 184, .055);
  cursor: pointer;
}

.task-share-history-actions button:last-child {
  color: #e1788b;
  background: rgba(244, 63, 94, .07);
}

.task-share-history-actions>span {
  padding: 4px 7px;
  color: #7c899b;
  border-radius: 7px;
  background: rgba(148, 163, 184, .06);
  font-size: .42rem;
}

.task-share-history-loading,
.task-share-history-empty {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #748297;
  font-size: .5rem;
  text-align: center;
}

.task-share-history-loading>span {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(139, 125, 246, .18);
  border-top-color: #8b7df6;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

.task-share-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #0e1624;
  box-shadow: 0 -10px 30px rgba(2, 6, 23, .12);
}

.task-share-footer .btn {
  min-height: 40px;
  border: 0 !important;
  border-radius: 11px;
}

.task-share-footer .btn-primary {
  background: linear-gradient(135deg, #7061ed, #5145dc);
  box-shadow: 0 8px 20px rgba(81, 69, 220, .2);
}

html.light .task-share-dialog {
  background: #fff;
  box-shadow: 0 28px 70px rgba(51, 65, 85, .2);
}

html.light .task-share-head {
  background: radial-gradient(circle at 8% 0, rgba(99, 102, 241, .14), transparent 34%), radial-gradient(circle at 92% 100%, rgba(16, 185, 129, .08), transparent 38%), #fbfcff;
}

html.light .task-share-head h2,
html.light .task-share-preview-top strong,
html.light .task-share-section-title strong,
html.light .task-share-summary strong,
html.light .task-share-task strong,
html.light .task-share-option strong,
html.light .task-share-result-copy strong,
html.light .task-share-history-item strong {
  color: #1d2a3d;
}

html.light .task-share-preview,
html.light .task-share-settings,
html.light .task-share-history {
  background: #f7f9fc;
}

html.light .task-share-summary article,
html.light .task-share-task,
html.light .task-share-option,
html.light .task-share-expiry-options label,
html.light .task-share-history-item {
  background: #fff;
  box-shadow: 0 6px 16px rgba(71, 85, 105, .04);
}

html.light .task-share-option.is-active {
  background: linear-gradient(135deg, #f0eeff, #f3f4ff);
}

html.light .task-share-expiry-options label.is-active {
  background: #eafaf4;
  box-shadow: none;
}

html.light .task-share-password-wrap input {
  background: #fff !important;
}

html.light .task-share-result {
  background: linear-gradient(135deg, #eafaf4, #f1f2ff);
}

html.light .task-share-url-row input {
  color: #526176;
  background: rgba(255, 255, 255, .85);
}

html.light .task-share-footer {
  background: #f8fafc;
  box-shadow: 0 -10px 28px rgba(71, 85, 105, .07);
}

@media (max-width: 760px) {
  #share-today-tasks-btn>span {
    display: none;
  }

  .task-share-modal-v2 {
    align-items: flex-end;
    padding: 0;
  }

  .task-share-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 50px);
    border-radius: 25px 25px 0 0;
  }

  .task-share-head {
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 16px 14px 13px;
  }

  .task-share-head-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .task-share-head h2 {
    font-size: 1rem;
  }

  .task-share-head p {
    font-size: .58rem;
    line-height: 1.55;
  }

  .task-share-body {
    grid-template-columns: 1fr;
    grid-template-areas: "preview" "settings" "result" "history";
    gap: 9px;
    padding: 12px;
  }

  .task-share-preview,
  .task-share-settings {
    padding: 12px;
    border-radius: 15px;
  }

  .task-share-task-list {
    max-height: 155px;
    overflow-y: auto;
  }

  .task-share-result {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .task-share-success-icon {
    width: 38px;
    height: 38px;
  }

  .task-share-url-row,
  .task-share-result-actions {
    grid-column: 1 / -1;
  }

  .task-share-result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-share-history {
    padding: 12px;
  }

  .task-share-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .task-share-footer .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .task-share-head p {
    display: none;
  }

  .task-share-summary article {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 7px;
  }

  .task-share-summary article>span {
    width: 24px;
    height: 24px;
  }

  .task-share-access-options {
    grid-template-columns: 1fr;
  }

  .task-share-option {
    min-height: 58px;
  }

  .task-share-history-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .task-share-history-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .task-share-history-actions button {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================
   Focused task composer — 2026-07-22
   ========================================================== */
#task-modal {
  padding: 24px;
}

#task-modal .task-composer {
  width: min(760px, calc(100vw - 48px));
  max-width: 760px;
  max-height: min(90dvh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0 !important;
  border-radius: 28px;
  background: var(--clr-surface, #fff);
  box-shadow: 0 32px 90px rgba(36, 42, 75, .24);
}

#task-modal .task-composer::before {
  display: none !important;
}

#task-modal .task-composer-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 20px;
  border: 0 !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(106, 90, 249, .14), transparent 34%),
    linear-gradient(135deg, rgba(248, 247, 255, .98), rgba(250, 253, 255, .98));
}

#task-modal .task-composer-head .premium-form-icon {
  width: 50px;
  height: 50px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #7462f4, #4f46df);
  box-shadow: 0 12px 24px rgba(84, 70, 224, .24);
}

#task-modal .task-composer-head-copy {
  min-width: 0;
}

#task-modal .task-composer-kicker {
  display: block;
  margin-bottom: 3px;
  color: #6d5ce8;
  font-size: .72rem;
  font-weight: 800;
}

#task-modal .task-composer-head .modal-title {
  margin: 0;
  color: var(--clr-text, #182036);
  font-size: 1.35rem;
  line-height: 1.35;
}

#task-modal .task-composer-head-copy p {
  margin: 3px 0 0;
  color: var(--clr-text-muted, #7b849b);
  font-size: .78rem;
  line-height: 1.6;
}

#task-modal .task-composer-head .modal-desktop-close-btn {
  position: relative !important;
  width: 42px;
  height: 42px;
  border: 0 !important;
  border-radius: 14px;
  color: var(--clr-text-muted, #7b849b);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 6px 16px rgba(45, 49, 78, .06);
}

#task-modal .task-composer>form {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#task-modal .task-composer .modal-body {
  min-height: 0;
  padding: 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--clr-bg, #f5f6fb);
}

#task-modal .task-composer-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#task-modal .task-composer .form-group {
  margin: 0;
}

#task-modal .task-composer-title-group {
  padding: 18px;
  border-radius: 20px;
  background: var(--clr-surface, #fff);
  box-shadow: 0 8px 24px rgba(45, 49, 78, .055);
}

#task-modal .task-composer-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

#task-modal .task-composer-label-row .form-label {
  margin: 0;
  color: var(--clr-text, #182036);
  font-size: .86rem;
  font-weight: 800;
}

#task-modal #tf-title-count {
  direction: ltr;
  color: var(--clr-text-muted, #8a93a8);
  font-size: .68rem;
  font-weight: 700;
}

#task-modal .task-composer-title-input .form-input {
  height: 58px;
  padding-inline: 48px 16px !important;
  border: 0 !important;
  border-radius: 17px;
  color: var(--clr-text, #182036);
  background: var(--clr-bg, #f1f3f9) !important;
  box-shadow: none !important;
  font-size: 1rem;
  font-weight: 700;
}

#task-modal .task-composer-title-input .form-input:focus {
  background: rgba(111, 92, 244, .09) !important;
  box-shadow: inset 0 0 0 2px rgba(101, 84, 232, .16) !important;
}

#task-modal .task-composer-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#task-modal .task-composer-quick-block {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: var(--clr-surface, #fff);
  box-shadow: 0 7px 20px rgba(45, 49, 78, .045);
}

#task-modal .task-composer-field-title {
  display: block;
  margin-bottom: 10px;
  color: var(--clr-text-secondary, #596279);
  font-size: .73rem;
  font-weight: 800;
}

#task-modal .task-composer-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#task-modal .task-composer-chips button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 7px;
  border: 0;
  border-radius: 12px;
  color: var(--clr-text-muted, #7b849b);
  background: var(--clr-bg, #f1f3f9);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

#task-modal .task-composer-chips button:hover {
  transform: translateY(-1px);
}

#task-modal .task-composer-chips button.is-active {
  color: #5544d9;
  background: rgba(111, 92, 244, .13);
  box-shadow: inset 0 0 0 1px rgba(96, 77, 225, .14);
}

#task-modal .task-priority-chips button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#task-modal .task-priority-chips button i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #61bfa4;
}

#task-modal .task-priority-chips button[data-task-priority="med"] i {
  background: #f2b855;
}

#task-modal .task-priority-chips button[data-task-priority="high"] i {
  background: #f06e82;
}

#task-modal .task-composer-details-toggle {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border: 0;
  border-radius: 17px;
  color: var(--clr-text-secondary, #596279);
  background: rgba(111, 92, 244, .075);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

#task-modal .task-composer-details-toggle>span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#task-modal .task-composer-details-toggle>span>svg {
  flex: 0 0 auto;
  color: #6957e8;
}

#task-modal .task-composer-details-toggle strong,
#task-modal .task-composer-details-toggle small {
  display: block;
}

#task-modal .task-composer-details-toggle strong {
  color: var(--clr-text, #182036);
  font-size: .8rem;
}

#task-modal .task-composer-details-toggle small {
  margin-top: 2px;
  color: var(--clr-text-muted, #7b849b);
  font-size: .67rem;
}

#task-modal .task-composer-toggle-arrow {
  flex: 0 0 auto;
  transition: transform .2s ease;
}

[dir="rtl"] #task-modal .task-composer-details-toggle.is-open .task-composer-toggle-arrow {
  transform: rotate(-90deg);
}

[dir="ltr"] #task-modal .task-composer-details-toggle.is-open .task-composer-toggle-arrow {
  transform: rotate(90deg);
}

#task-modal .task-composer-details[hidden] {
  display: none !important;
}

#task-modal .task-composer-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 17px;
  border-radius: 20px;
  background: var(--clr-surface, #fff);
  box-shadow: 0 8px 24px rgba(45, 49, 78, .045);
  animation: taskComposerReveal .22s ease both;
}

@keyframes taskComposerReveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

#task-modal .task-composer-details .form-label {
  margin-bottom: 7px;
  color: var(--clr-text-secondary, #596279);
  font-size: .73rem;
  font-weight: 800;
}

#task-modal .task-composer-details .form-input,
#task-modal .task-composer-details .form-select,
#task-modal .task-composer-details .form-textarea {
  border: 0 !important;
  border-radius: 14px;
  color: var(--clr-text, #182036);
  background: var(--clr-bg, #f1f3f9) !important;
  box-shadow: none !important;
}

#task-modal .task-composer-details .form-input:focus,
#task-modal .task-composer-details .form-select:focus,
#task-modal .task-composer-details .form-textarea:focus {
  background: rgba(111, 92, 244, .09) !important;
  box-shadow: inset 0 0 0 2px rgba(101, 84, 232, .16) !important;
}

#task-modal .task-composer-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#task-modal .task-category-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

#task-modal .task-category-label-row .form-label {
  margin: 0;
}

#task-modal #task-category-add-toggle {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  color: #6655dc;
  border: 0;
  border-radius: 10px;
  background: rgba(111, 92, 244, .09);
  cursor: pointer;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
}

#task-modal #task-category-add-toggle.is-active {
  color: #fff;
  background: linear-gradient(135deg, #7765ef, #5a49d4);
}

#task-modal .task-category-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px;
  border-radius: 13px;
  background: rgba(111, 92, 244, .065);
}

#task-modal .task-category-create[hidden] {
  display: none !important;
}

#task-modal .task-category-create input {
  min-width: 0;
  min-height: 38px;
  padding: 8px 11px;
  color: var(--clr-text, #182036);
  border: 0;
  border-radius: 10px;
  outline: 0;
  background: var(--clr-surface, #fff);
  font: inherit;
  font-size: .75rem;
}

#task-modal .task-category-create input:focus {
  box-shadow: inset 0 0 0 2px rgba(101, 84, 232, .18);
}

#task-modal .task-category-create button {
  min-height: 38px;
  padding: 7px 12px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: #6856de;
  cursor: pointer;
  font: inherit;
  font-size: .7rem;
  font-weight: 850;
}

#task-modal #task-category-cancel {
  width: 38px;
  padding: 0;
  color: var(--clr-text-muted, #7b849b);
  background: rgba(148, 163, 184, .12);
  font-size: 1rem;
}

html:not(.light) #task-modal .task-category-create input {
  background: rgba(255, 255, 255, .065);
}

#task-modal .task-composer-priority-fallback {
  display: block !important;
}

#task-modal .task-composer-time-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#task-modal .task-composer-footer {
  flex: 0 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 24px;
  border: 0 !important;
  background: var(--clr-surface, #fff);
  box-shadow: 0 -8px 26px rgba(45, 49, 78, .05);
}

#task-modal .task-composer-summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--clr-text-muted, #7b849b);
  font-size: .72rem;
  font-weight: 800;
}

#task-modal .task-composer-summary i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7866ed;
}

#task-modal .task-composer-footer-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

#task-modal .task-composer-footer .btn {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0 !important;
  border-radius: 14px;
  padding: 10px 18px;
}

#task-modal .task-composer-footer .btn-primary {
  min-width: 150px;
  color: #fff;
  background: linear-gradient(135deg, #7160ee, #4e43d9);
  box-shadow: 0 10px 23px rgba(80, 67, 216, .22);
}

#task-modal .task-composer-footer .btn-secondary {
  color: var(--clr-text-secondary, #596279);
  background: var(--clr-bg, #f1f3f9);
}

html:not(.light) #task-modal .task-composer {
  background: #171b2b;
}

html:not(.light) #task-modal .task-composer-head {
  background: radial-gradient(circle at 12% 0%, rgba(117, 98, 246, .25), transparent 36%), linear-gradient(135deg, #20253a, #1b2032);
}

html:not(.light) #task-modal .task-composer-head .modal-desktop-close-btn {
  background: rgba(255, 255, 255, .065);
}

html:not(.light) #task-modal .task-composer .modal-body {
  background: #121624;
}

html:not(.light) #task-modal .task-composer-title-group,
html:not(.light) #task-modal .task-composer-quick-block,
html:not(.light) #task-modal .task-composer-details,
html:not(.light) #task-modal .task-composer-footer {
  background: #1c2133;
}

html:not(.light) #task-modal .task-composer-title-input .form-input,
html:not(.light) #task-modal .task-composer-chips button,
html:not(.light) #task-modal .task-composer-details .form-input,
html:not(.light) #task-modal .task-composer-details .form-select,
html:not(.light) #task-modal .task-composer-details .form-textarea,
html:not(.light) #task-modal .task-composer-footer .btn-secondary {
  background: #252b40 !important;
  color: #eef0ff;
}

@media (max-width: 900px) {
  #task-modal.mobile-fs {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #task-modal.mobile-fs .task-composer {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    transform: translateY(24px);
  }

  #task-modal.mobile-fs.open .task-composer {
    transform: none;
  }

  #task-modal.mobile-fs .task-composer::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: rgba(113, 122, 148, .25);
    transform: translateX(-50%);
  }

  #task-modal.mobile-fs .task-composer-head {
    grid-template-columns: 43px minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 22px 15px 14px;
  }

  #task-modal.mobile-fs .task-composer-head .premium-form-icon {
    width: 43px;
    height: 43px;
    border-radius: 14px;
  }

  #task-modal.mobile-fs .task-composer-kicker {
    font-size: .65rem;
  }

  #task-modal.mobile-fs .task-composer-head .modal-title {
    font-size: 1.08rem;
  }

  #task-modal.mobile-fs .task-composer-head-copy p {
    display: none;
  }

  #task-modal.mobile-fs #task-form {
    min-height: 0;
    overflow: hidden;
  }

  #task-modal.mobile-fs .task-composer .modal-body {
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
  }

  #task-modal.mobile-fs .task-composer-content {
    gap: 12px;
  }

  #task-modal.mobile-fs .task-composer-title-group {
    padding: 14px;
    border-radius: 18px;
  }

  #task-modal.mobile-fs .task-composer-title-input .form-input {
    height: 54px;
    font-size: .93rem;
  }

  #task-modal.mobile-fs .task-composer-quick-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #task-modal.mobile-fs .task-composer-quick-block {
    padding: 11px 12px;
    border-radius: 16px;
  }

  #task-modal.mobile-fs .task-composer-field-title {
    margin-bottom: 7px;
  }

  #task-modal.mobile-fs .task-composer-chips button {
    min-height: 42px;
    font-size: .73rem;
  }

  #task-modal.mobile-fs .task-composer-details-toggle {
    min-height: 54px;
  }

  #task-modal.mobile-fs .task-composer-details {
    padding: 14px;
  }

  #task-modal.mobile-fs .task-composer-fields-grid {
    grid-template-columns: 1fr;
  }

  #task-modal.mobile-fs .task-composer-time-grid {
    grid-template-columns: 1fr 1fr;
  }

  #task-modal.mobile-fs .task-composer-time-grid .form-group:first-child {
    grid-column: 1 / -1;
  }

  #task-modal.mobile-fs .task-composer-footer {
    min-height: 68px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  #task-modal.mobile-fs .task-composer-footer .btn {
    min-height: 44px;
    padding-inline: 14px;
  }

  #task-modal.mobile-fs .task-composer-footer .btn-primary {
    min-width: 140px;
  }
}

@media (max-width: 430px) {
  #task-modal.mobile-fs .task-composer-summary {
    display: none;
  }

  #task-modal.mobile-fs .task-composer-footer-actions {
    width: 100%;
    display: grid;
    grid-template-columns: .75fr 1.4fr;
  }

  #task-modal.mobile-fs .task-composer-footer .btn {
    width: 100%;
    min-width: 0;
  }

  #task-modal.mobile-fs .task-composer-label-row .form-label {
    font-size: .78rem;
  }
}

@media (max-width: 900px) {
  #task-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #task-modal .task-composer {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: 26px 26px 0 0 !important;
  }

  #task-modal .task-composer-head {
    grid-template-columns: 43px minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 22px 15px 14px;
  }

  #task-modal .task-composer-head .premium-form-icon {
    width: 43px !important;
    height: 43px !important;
    border-radius: 14px;
  }

  #task-modal .task-composer-head .modal-desktop-close-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: inline-flex !important;
  }

  #task-modal .task-composer-head-copy p {
    display: none;
  }

  #task-modal .task-composer .modal-body {
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
  }

  #task-modal .task-composer-content {
    gap: 12px;
  }

  #task-modal .task-composer-title-group {
    padding: 14px;
  }

  #task-modal .task-composer-quick-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #task-modal .task-composer-quick-block {
    padding: 11px 12px;
  }

  #task-modal .task-composer-fields-grid {
    grid-template-columns: 1fr;
  }

  #task-modal .task-composer-field-title {
    margin-bottom: 7px;
  }

  #task-modal .task-composer-chips button {
    min-height: 42px;
  }

  #task-modal .task-composer-footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 430px) {
  #task-modal .task-composer-summary {
    display: none;
  }

  #task-modal .task-composer-footer-actions {
    width: 100%;
    display: grid;
    grid-template-columns: .75fr 1.4fr;
  }

  #task-modal .task-composer-footer .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ================================================================
   Focused execution timer — 2026-07-22
   ================================================================ */
.focus-session-overlay.task-timer-card {
  --focus-mint: #75efc4;
  --focus-violet: #8277ff;
  --focus-ink: #f8fbff;
  --focus-muted: rgba(226, 234, 248, .68);
  position: fixed;
  inset: 0;
  z-index: 1300;
  width: 100%;
  height: 100dvh;
  padding: clamp(18px, 3vw, 42px);
  padding-top: max(clamp(18px, 3vw, 42px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(18px, 3vw, 42px), env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--focus-ink);
  background:
    radial-gradient(circle at 82% 12%, rgba(117, 239, 196, .14), transparent 28%),
    radial-gradient(circle at 15% 88%, rgba(130, 119, 255, .22), transparent 32%),
    linear-gradient(145deg, #101a2a 0%, #11172b 48%, #17142d 100%);
  border: 0;
  border-radius: 0;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.light .focus-session-overlay.task-timer-card {
  color: var(--focus-ink);
  background:
    radial-gradient(circle at 82% 12%, rgba(117, 239, 196, .14), transparent 28%),
    radial-gradient(circle at 15% 88%, rgba(130, 119, 255, .22), transparent 32%),
    linear-gradient(145deg, #101a2a 0%, #11172b 48%, #17142d 100%);
}

.focus-session-overlay.task-timer-card::before,
.focus-session-overlay.task-timer-card::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(44vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.focus-session-overlay.task-timer-card::before {
  inset-inline-start: -14vw;
  top: -24vw;
  background: radial-gradient(circle, rgba(117, 239, 196, .09), transparent 66%);
}

.focus-session-overlay.task-timer-card::after {
  inset-inline-end: -12vw;
  bottom: -25vw;
  background: radial-gradient(circle, rgba(130, 119, 255, .16), transparent 66%);
}

.focus-session-overlay.minimized {
  display: none !important;
}

.focus-session-shell {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  min-height: min(760px, calc(100dvh - 48px));
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: center;
  gap: clamp(18px, 2.5vh, 28px);
  padding: clamp(22px, 3.2vw, 36px);
  border: 0;
  border-radius: 34px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  box-shadow: 0 34px 90px rgba(3, 8, 24, .42), inset 0 1px rgba(255, 255, 255, .08);
  overflow: hidden;
}

.focus-session-shell::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  inset-inline-end: -155px;
  top: 95px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 34px rgba(255, 255, 255, .018), 0 0 0 72px rgba(255, 255, 255, .012);
  pointer-events: none;
}

.focus-session-overlay .focus-session-head {
  position: relative;
  inset: auto;
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
}

.focus-session-overlay #tt-minimize-btn,
.focus-session-overlay .focus-session-shield {
  position: relative;
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(239, 245, 255, .8);
  background: rgba(255, 255, 255, .075);
  border: 0;
  border-radius: 15px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07);
}

.focus-session-overlay #tt-minimize-btn {
  cursor: pointer;
  color: rgba(239, 245, 255, .8) !important;
  background: rgba(255, 255, 255, .075) !important;
  transition: transform .2s ease, background .2s ease;
}

.focus-session-overlay #tt-minimize-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .13) !important;
}

html body .focus-session-overlay#task-timer-card #tt-minimize-btn {
  color: rgba(239, 245, 255, .8) !important;
  background-color: rgba(255, 255, 255, .075) !important;
}

html body .focus-session-overlay#task-timer-card #tt-minimize-btn:hover {
  background-color: rgba(255, 255, 255, .13) !important;
}

.focus-session-status {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.focus-session-status>span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--focus-ink);
  font-size: .86rem;
  font-weight: 800;
}

.focus-session-status>span i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--focus-mint);
  box-shadow: 0 0 0 6px rgba(117, 239, 196, .1), 0 0 18px rgba(117, 239, 196, .58);
}

.focus-session-overlay.is-running .focus-session-status>span i {
  animation: focusStatusPulse 2s ease-in-out infinite;
}

.focus-session-overlay.is-paused .focus-session-status>span i {
  background: #ffc96b;
  box-shadow: 0 0 0 6px rgba(255, 201, 107, .11);
}

.focus-session-status small {
  max-width: 360px;
  overflow: hidden;
  color: var(--focus-muted);
  font-size: .72rem;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-session-task {
  position: relative;
  z-index: 1;
  width: min(590px, 100%);
  margin-inline: auto;
  padding: 16px 20px;
  text-align: center;
  border: 0;
  border-radius: 20px;
  background: rgba(6, 13, 28, .2);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.focus-session-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: var(--focus-mint);
  font-size: .75rem;
}

.focus-session-overlay .task-timer-title {
  margin: 0;
  color: var(--focus-ink);
  font-size: clamp(1.25rem, 3vw, 1.72rem);
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.focus-session-overlay .task-timer-subtitle {
  display: block;
  margin: 6px 0 0;
  color: var(--focus-muted);
  font-size: .78rem;
  line-height: 1.6;
}

.focus-session-overlay .focus-session-body {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-width: none;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(15px, 2vh, 21px);
}

.focus-session-overlay .task-timer-ring-container {
  position: relative;
  width: clamp(230px, 34vh, 290px);
  height: clamp(230px, 34vh, 290px);
  flex: 0 0 auto;
  filter: drop-shadow(0 22px 34px rgba(2, 8, 22, .28));
}

.focus-session-overlay .task-timer-ring-container::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 32%, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 68%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.focus-session-overlay .task-timer-ring-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.focus-session-overlay .task-timer-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .075);
  stroke-width: 4.5;
}

.focus-session-overlay .task-timer-ring-progress {
  fill: none;
  stroke: url(#task-timer-gradient);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(117, 239, 196, .36));
  transition: stroke-dashoffset .45s ease;
}

.focus-session-overlay.is-paused .task-timer-ring-progress {
  opacity: .62;
  filter: none;
}

.task-timer-time-wrap {
  position: absolute;
  z-index: 2;
  inset: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}

.task-timer-time-wrap>span,
.task-timer-time-wrap>small {
  color: var(--focus-muted);
  font-size: .7rem;
}

.focus-session-overlay .task-timer-time {
  position: static;
  inset: auto;
  display: block;
  color: var(--focus-ink);
  font-family: inherit;
  font-size: clamp(2.3rem, 8vw, 3.55rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1.14;
  direction: ltr;
}

.focus-session-linear-progress {
  width: min(360px, 82%);
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}

.focus-session-linear-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--focus-violet), var(--focus-mint));
  box-shadow: 0 0 16px rgba(117, 239, 196, .35);
  transition: width .45s ease;
}

.focus-session-overlay .task-timer-details {
  width: 100%;
  display: block;
}

.focus-session-overlay .task-timer-controls {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(165px, 1.55fr) repeat(3, minmax(90px, 1fr));
  gap: 10px;
}

.focus-session-overlay .task-timer-controls .btn {
  position: relative;
  min-width: 0;
  min-height: 54px;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(244, 248, 255, .84);
  font-family: inherit;
  font-size: .78rem;
  white-space: nowrap;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.focus-session-overlay .task-timer-controls .btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .12);
}

.focus-session-overlay .task-timer-controls .focus-session-primary {
  color: #102018;
  background: linear-gradient(135deg, #9af5d5, var(--focus-mint));
  box-shadow: 0 13px 28px rgba(46, 216, 157, .18), inset 0 1px rgba(255, 255, 255, .45);
}

.focus-session-overlay.is-paused .task-timer-controls .focus-session-primary {
  color: #fff;
  background: linear-gradient(135deg, #8074ff, #6558e8);
  box-shadow: 0 13px 30px rgba(101, 88, 232, .28);
}

.focus-session-overlay .task-timer-controls .is-complete {
  color: #9cf0ce;
  background: rgba(56, 210, 158, .1);
}

.focus-session-overlay .task-timer-controls .is-cancel {
  color: #ffbbc4;
  background: rgba(247, 102, 123, .09);
}

.focus-session-reassurance {
  margin: -2px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(226, 234, 248, .56);
  font-size: .69rem;
  line-height: 1.6;
  text-align: center;
}

@keyframes focusStatusPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(.76);
    opacity: .65;
  }
}

@media (max-height: 820px) and (min-width: 701px) {
  .focus-session-shell {
    min-height: 0;
    gap: 14px;
    padding-block: 20px;
  }

  .focus-session-task {
    padding-block: 11px;
  }

  .focus-session-overlay .task-timer-ring-container {
    width: 205px;
    height: 205px;
  }

  .focus-session-overlay .focus-session-body {
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .focus-session-overlay.task-timer-card {
    min-height: 100dvh;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    justify-content: flex-start;
    background:
      radial-gradient(circle at 90% 8%, rgba(117, 239, 196, .12), transparent 35%),
      radial-gradient(circle at 0% 90%, rgba(130, 119, 255, .18), transparent 38%),
      linear-gradient(160deg, #101928, #15152c);
  }

  .focus-session-shell {
    width: 100%;
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .focus-session-shell::before {
    display: none;
  }

  .focus-session-overlay .focus-session-head {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }

  .focus-session-overlay #tt-minimize-btn,
  .focus-session-overlay .focus-session-shield {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .focus-session-status>span {
    font-size: .77rem;
  }

  .focus-session-status small {
    max-width: 205px;
    font-size: .62rem;
  }

  .focus-session-task {
    width: 100%;
    padding: 13px 15px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .05);
  }

  .focus-session-eyebrow {
    margin-bottom: 5px;
    font-size: .67rem;
  }

  .focus-session-overlay .task-timer-title {
    font-size: clamp(1.06rem, 5vw, 1.35rem);
    line-height: 1.4;
  }

  .focus-session-overlay .task-timer-subtitle {
    margin-top: 4px;
    font-size: .68rem;
  }

  .focus-session-overlay .focus-session-body {
    flex: 1;
    width: 100%;
    min-height: 0;
    justify-content: space-evenly;
    gap: 12px;
  }

  .focus-session-overlay .task-timer-ring-container {
    width: clamp(196px, 30vh, 235px);
    height: clamp(196px, 30vh, 235px);
  }

  .focus-session-overlay .task-timer-time {
    font-size: clamp(2.15rem, 12vw, 3rem);
  }

  .task-timer-time-wrap>span,
  .task-timer-time-wrap>small {
    font-size: .63rem;
  }

  .focus-session-linear-progress {
    width: min(300px, 76%);
  }

  .focus-session-overlay .task-timer-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .focus-session-overlay .task-timer-controls .btn {
    min-height: 50px;
    padding: 8px 5px;
    gap: 5px;
    border-radius: 14px;
    font-size: .68rem;
  }

  .focus-session-overlay .task-timer-controls .focus-session-primary {
    grid-column: 1 / -1;
    min-height: 54px;
    font-size: .8rem;
  }

  .focus-session-reassurance {
    font-size: .61rem;
  }
}

@media (max-width: 390px),
(max-height: 690px) and (max-width: 700px) {
  .focus-session-shell {
    padding-inline: 13px;
    gap: 10px;
  }

  .focus-session-status small {
    display: none;
  }

  .focus-session-task {
    padding-block: 10px;
  }

  .focus-session-overlay .task-timer-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .focus-session-overlay .task-timer-ring-container {
    width: 188px;
    height: 188px;
  }

  .focus-session-overlay .focus-session-body {
    gap: 9px;
  }

  .focus-session-overlay .task-timer-controls .btn {
    min-height: 46px;
  }

  .focus-session-overlay .task-timer-controls .focus-session-primary {
    min-height: 50px;
  }

  .focus-session-reassurance {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .focus-session-overlay *,
  .focus-session-overlay *::before,
  .focus-session-overlay *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────
   iOS Apple Calendar Timeline Component
───────────────────────────────────────────────────────── */
.ios-calendar-timeline-wrapper {
  position: relative;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-lg, 16px);
  background: color-mix(in srgb, var(--v3-panel, rgba(18, 18, 30, 0.7)) 92%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px 12px 10px;
  backdrop-filter: blur(14px);
  scroll-behavior: smooth;
}

.ios-calendar-timeline-wrapper::-webkit-scrollbar {
  width: 5px;
}

.ios-calendar-timeline-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

.ios-timeline-body {
  position: relative;
  display: flex;
  height: 1440px;
  user-select: none;
}

.ios-timeline-hours-col {
  width: 62px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

.ios-timeline-hour-label {
  height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 11px;
  font-weight: 750;
  color: var(--clr-text-muted, #94a3b8);
  padding-top: 2px;
  box-sizing: border-box;
}

.ios-timeline-grid-area {
  position: relative;
  flex: 1;
  height: 1440px;
  cursor: pointer;
  box-sizing: border-box;
}

.ios-timeline-hour-slot {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  box-sizing: border-box;
}

.ios-timeline-hour-slot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
}

/* iOS Proportional Event Cards */
.ios-timeline-event {
  position: absolute;
  z-index: 2;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  background: var(--task-bg, rgba(81, 69, 220, 0.15));
  border-inline-start: 4px solid var(--task-accent, #818cf8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, z-index 0.15s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.ios-timeline-event:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
  z-index: 10 !important;
}

.ios-timeline-event.completed {
  opacity: 0.75;
  filter: grayscale(0.2);
}

.ios-event-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  gap: 2px;
}

.ios-event-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--clr-text, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-event-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}

.ios-event-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--task-color, var(--clr-text-muted, #94a3b8));
  opacity: 0.9;
}

.ios-event-duration {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 700;
}

/* Compact layout for short 15m/25m/30m tasks & system blocks */
.ios-timeline-event.is-compact .ios-event-body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ios-timeline-event.is-compact .ios-event-title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ios-timeline-event.is-compact .ios-event-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ios-timeline-event.is-compact .ios-event-time {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.9;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Dense timeline hours: split visually colliding short cards into clean lanes. */
.ios-timeline-event.is-crowded {
  padding-inline: 8px;
  box-shadow: 0 4px 13px rgba(0, 0, 0, 0.18);
}

.ios-timeline-event.is-crowded .ios-event-title,
.ios-timeline-event.is-crowded .ios-event-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-timeline-event.is-crowded .ios-event-time {
  min-width: 0;
  font-size: 9px;
}

@media (max-width: 900px) {
  .ios-timeline-event.is-crowded {
    padding-inline: 5px;
  }

  .ios-timeline-event.is-compact.is-crowded .ios-event-time {
    display: none;
  }

  .ios-timeline-event.is-compact.is-crowded .ios-event-body {
    justify-content: flex-start;
  }
}

/* Live Current Time Red Line Indicator */
.ios-timeline-now-line {
  position: absolute;
  left: -62px;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ef4444, #f43f5e);
  z-index: 8;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.ios-now-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  margin-inline-start: 56px;
  flex-shrink: 0;
  animation: iosNowPulse 1.8s ease-in-out infinite;
}

.ios-now-time {
  font-size: 10px;
  font-weight: 800;
  background: #ef4444;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 10px;
  margin-inline-start: 4px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

@keyframes iosNowPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px #ef4444;
  }

  50% {
    transform: scale(1.3);
    box-shadow: 0 0 14px #ef4444;
  }
}

/* Unscheduled tasks strip */
.ios-unscheduled-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md, 12px);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  overflow-x: auto;
}

.ios-unscheduled-title {
  font-weight: 700;
  color: var(--clr-text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ios-unscheduled-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(81, 69, 220, 0.12);
  border: 1px solid rgba(81, 69, 220, 0.25);
  color: var(--clr-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ios-unscheduled-chip:hover {
  background: rgba(81, 69, 220, 0.25);
  transform: translateY(-1px);
}

.calendar-routine-overview {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 95% 0%, rgba(139, 92, 246, .13), transparent 37%),
    rgba(148, 163, 184, .035);
}

.calendar-routine-overview>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-routine-overview>header>div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--clr-text);
  font-size: .66rem;
}

.calendar-routine-overview>header>div>span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #9b8ef2;
  border-radius: 9px;
  background: rgba(139, 125, 246, .1);
}

.calendar-routine-overview>header small {
  color: var(--clr-text-muted);
  font-size: .49rem;
}

.calendar-routine-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calendar-routine-legend span {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  color: var(--clr-text-muted);
  border-radius: 8px;
  background: rgba(148, 163, 184, .05);
  font-size: .48rem;
  font-weight: 750;
}

.calendar-routine-legend i {
  width: 7px;
  height: 7px;
  border-radius: 3px;
  background: #818cf8;
}

.calendar-routine-legend .is-habit i {
  background: #f59e0b;
}

.calendar-routine-legend .is-worship i {
  background: #10b981;
}

.calendar-routine-legend .is-sleep i {
  background: #6366f1;
}

.calendar-routine-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.calendar-routine-chips::-webkit-scrollbar {
  display: none;
}

.calendar-routine-chips>span {
  flex: 0 0 auto;
  color: var(--clr-text-muted);
  font-size: .48rem;
  font-weight: 800;
}

.calendar-routine-chips button {
  display: inline-flex;
  min-height: 29px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  color: var(--clr-text);
  border: 0;
  border-radius: 9px;
  background: rgba(245, 158, 11, .09);
  cursor: pointer;
  font: inherit;
  font-size: .5rem;
  font-weight: 750;
  transition: transform .16s ease, background .16s ease;
}

.calendar-routine-chips button:hover {
  background: rgba(245, 158, 11, .16);
  transform: translateY(-1px);
}

.calendar-routine-chips button.is-done {
  color: #1fb783;
  background: rgba(16, 185, 129, .09);
}

.calendar-routine-chips button svg {
  width: 11px;
  height: 11px;
}

.calendar-routine-sleep-setup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  color: var(--clr-text);
  border: 0;
  border-radius: 11px;
  background: rgba(99, 102, 241, .08);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.calendar-routine-sleep-setup>span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #8b8df4;
  border-radius: 9px;
  background: rgba(99, 102, 241, .12);
}

.calendar-routine-sleep-setup>div {
  display: grid;
  gap: 1px;
}

.calendar-routine-sleep-setup strong {
  font-size: .54rem;
}

.calendar-routine-sleep-setup small {
  color: var(--clr-text-muted);
  font-size: .44rem;
}

/* ─── Light Mode Overrides for iOS Apple Calendar Timeline ─── */
html.light .ios-calendar-timeline-wrapper {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

html.light .ios-calendar-timeline-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

html.light .ios-timeline-hours-col {
  border-inline-end-color: #e2e8f0;
}

html.light .ios-timeline-hour-label {
  color: #64748b;
}

html.light .ios-timeline-hour-slot {
  border-bottom-color: #f1f5f9;
}

html.light .ios-timeline-hour-slot::after {
  border-bottom-color: #f8fafc;
}

html.light .ios-timeline-hour-slot:hover {
  background: rgba(81, 69, 220, 0.03);
}

html.light .ios-timeline-event {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  border-inline-end-color: rgba(0, 0, 0, 0.05);
}

html.light .ios-timeline-event:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

html.light .ios-event-title {
  color: #0f172a;
}

html.light .ios-event-time {
  color: #475569;
}

html.light .ios-event-duration {
  background: rgba(0, 0, 0, 0.06);
  color: #334155;
}

html.light .ios-unscheduled-bar {
  background: #f8fafc;
  border-color: #cbd5e1;
}

html.light .ios-unscheduled-title {
  color: #475569;
}

html.light .ios-unscheduled-chip {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

html.light .ios-unscheduled-chip:hover {
  background: #e2e8f0;
}

html.light .calendar-routine-overview {
  background:
    radial-gradient(circle at 95% 0%, rgba(139, 92, 246, .11), transparent 38%),
    #f7f8fc;
}

html.light .calendar-routine-legend span {
  background: #fff;
}

html.light .calendar-routine-sleep-setup {
  background: #f0f0ff;
}

/* System Protected Blocks (Sleep & Prayers) */
.ios-timeline-event.is-system-block {
  border-style: dashed;
  border-width: 1px 1px 1px 4px;
}

.ios-timeline-event.is-system-sleep {
  background: rgba(99, 102, 241, 0.12) !important;
  border-inline-start-color: #6366f1 !important;
  border-color: rgba(99, 102, 241, 0.25);
}

.ios-timeline-event.is-system-prayer {
  background: rgba(16, 185, 129, 0.12) !important;
  border-inline-start-color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.25);
}

.ios-timeline-event.is-system-adhkar {
  background: rgba(139, 92, 246, 0.12) !important;
  border-inline-start-color: #8b5cf6 !important;
  border-color: rgba(139, 92, 246, 0.25);
}

.ios-timeline-event.is-habit-block {
  border-style: solid;
  border-width: 1px 1px 1px 4px;
}

.ios-timeline-event.is-system-block.completed {
  opacity: .72;
  border-style: solid;
}

.ios-timeline-event.is-system-block.completed .ios-event-title strong {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.ios-timeline-event.is-system-block.is-day-override {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .38), 0 7px 18px rgba(245, 158, 11, .08);
}

.ios-event-override-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  color: #fff !important;
  border-radius: 999px;
  background: #f59e0b;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1.2;
  text-decoration: none !important;
}

html.light .ios-timeline-event.is-system-sleep {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.3);
}

html.light .ios-timeline-event.is-system-prayer {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.3);
}

html.light .ios-timeline-event.is-system-adhkar {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.3);
}

/* System Block Action Modal */
.system-block-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 7, 17, 0.75);
  backdrop-filter: blur(14px);
}

.system-block-modal-backdrop.open {
  display: flex;
}

.system-block-modal-card {
  width: min(490px, 100%);
  border-radius: 24px;
  background: #17192a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text, #fff);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: sabiq-panel-in 0.25s ease;
}

html.light .system-block-modal-card {
  background: #ffffff;
  border-color: rgba(54, 47, 103, 0.15);
  color: #1f2437;
  box-shadow: 0 25px 70px rgba(25, 29, 53, 0.2);
}

.system-block-modal-card header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 21px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html.light .system-block-modal-card header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.system-block-modal-heading {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.system-block-modal-heading>span {
  color: #a99fff !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.system-block-modal-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  color: #8b7df6 !important;
  border-radius: 14px;
  background: rgba(139, 125, 246, .12);
}

.system-block-modal-card header h3 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 900;
}

.system-block-modal-card header span {
  font-size: 11px;
  color: #a0aec0;
  font-weight: 600;
}

.system-block-modal-card header button.close-sys-modal {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: none;
  border-radius: 11px;
  background: rgba(148, 163, 184, .09);
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.system-block-modal-body {
  padding: 21px;
}

.system-block-modal-body p {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--clr-text-muted, #a0aec0);
  line-height: 1.5;
}

.system-block-day-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 11px;
  padding: 6px 9px;
  color: #8b7df6;
  border-radius: 10px;
  background: rgba(139, 125, 246, .09);
  font-size: 11px;
  font-weight: 800;
}

.system-block-day-badge strong {
  padding: 2px 6px;
  color: #b7791f;
  border-radius: 999px;
  background: rgba(245, 158, 11, .13);
  font-size: 9px;
}

.system-block-time-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin: 18px 0 15px;
  padding: 15px;
  border-radius: 16px;
  background: rgba(148, 163, 184, .07);
}

.system-block-time-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.system-block-time-form label>span {
  color: var(--clr-text-muted, #a0aec0);
  font-size: 10px;
  font-weight: 750;
}

.system-block-time-form input {
  width: 100%;
  min-height: 45px;
  padding: 8px 11px;
  color: inherit;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: rgba(148, 163, 184, .11);
  box-sizing: border-box;
  font: inherit;
  font-family: var(--font-numbers);
  font-size: 14px;
  font-weight: 800;
}

html.light .system-block-time-form input {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(54, 47, 103, .08);
}

.system-block-time-form input:focus {
  box-shadow: 0 0 0 3px rgba(117, 104, 242, .15), inset 0 0 0 1px #7568f2;
}

.system-block-time-arrow {
  display: grid;
  width: 28px;
  height: 45px;
  place-items: center;
  color: #8b7df6;
}

.system-block-time-form>small {
  grid-column: 1 / -1;
  color: var(--clr-text-muted, #a0aec0);
  font-size: 10px;
  line-height: 1.55;
}

.system-block-time-form>button {
  grid-column: 1 / -1;
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7568f2, #5c51d4);
  box-shadow: 0 8px 20px rgba(117, 104, 242, .24);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.system-block-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.system-block-modal-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.system-block-modal-actions .btn-sys-primary {
  background: linear-gradient(135deg, #7568f2, #5c51d4);
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 18px rgba(117, 104, 242, 0.3);
}

.system-block-modal-actions .btn-sys-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.system-block-modal-actions .btn-sys-secondary.is-reset {
  color: #b7791f;
  background: rgba(245, 158, 11, .08);
  border-color: rgba(245, 158, 11, .2);
}

.system-block-modal-actions .btn-sys-link {
  min-height: 34px;
  padding-block: 5px;
  color: #8b7df6;
  border: 0;
  background: transparent;
  font-size: 11px;
}

html.light .system-block-modal-actions .btn-sys-secondary {
  background: #f0f2fa;
  border-color: rgba(54, 47, 103, 0.15);
  color: #1f2437;
}

@media (max-width: 520px) {
  .system-block-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .system-block-modal-card {
    width: 100%;
    max-height: min(88dvh, 760px);
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
  }

  .system-block-modal-card header {
    position: sticky;
    z-index: 2;
    top: 0;
    background: inherit;
  }

  .system-block-time-form {
    grid-template-columns: 1fr 1fr;
  }

  .system-block-time-arrow {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   Gold & silver wallet — premium visual system v10
   2026-07-28
══════════════════════════════════════════════════════════════ */
.metal-wallet-v10,
.metal-wallet-v10 #metal-wallet-content {
  gap: 16px;
  min-width: 0;
}

.metal-wallet-v10 .metal-wallet-hero {
  isolation: isolate;
  min-height: 286px;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: 34px;
  padding: 30px;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 16%, rgba(226, 179, 74, .21), transparent 30%),
    radial-gradient(circle at 91% 91%, rgba(119, 101, 225, .23), transparent 36%),
    linear-gradient(135deg, #182134 0%, #0c1424 58%, #11192b 100%);
  box-shadow: 0 24px 60px rgba(2, 6, 23, .2);
}

.metal-wallet-v10 .metal-wallet-hero::before {
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  opacity: .48;
  border: 1px solid rgba(230, 188, 87, .13);
  border-radius: 50%;
  content: '';
  inset-inline-end: -175px;
  top: -215px;
  box-shadow: 0 0 0 45px rgba(230, 188, 87, .025), 0 0 0 92px rgba(230, 188, 87, .016);
}

.metal-wallet-v10 .metal-wallet-hero::after {
  width: 260px;
  height: 260px;
  opacity: .5;
  border-color: rgba(151, 133, 248, .13);
  inset-inline-start: -150px;
  bottom: -190px;
  box-shadow: 0 0 0 46px rgba(151, 133, 248, .025), 0 0 0 88px rgba(151, 133, 248, .014);
}

.metal-wallet-v10 .metal-wallet-orbit {
  position: absolute;
  z-index: -1;
  width: 148px;
  height: 148px;
  opacity: .7;
  border: 1px solid rgba(230, 188, 87, .16);
  border-radius: 50%;
  inset-inline-start: 44%;
  top: 50%;
  transform: translateY(-50%);
}

.metal-wallet-v10 .metal-wallet-orbit::before,
.metal-wallet-v10 .metal-wallet-orbit::after {
  position: absolute;
  border: 1px solid rgba(151, 133, 248, .12);
  border-radius: 50%;
  content: '';
  inset: 18px;
}

.metal-wallet-v10 .metal-wallet-orbit::after {
  inset: 42px;
}

.metal-wallet-v10 .metal-wallet-orbit span,
.metal-wallet-v10 .metal-wallet-orbit i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfb952;
  box-shadow: 0 0 18px rgba(223, 185, 82, .65);
}

.metal-wallet-v10 .metal-wallet-orbit span {
  inset-inline-start: 12px;
  top: 25px;
}

.metal-wallet-v10 .metal-wallet-orbit i {
  inset-inline-end: 24px;
  bottom: 8px;
  background: #9585f0;
  box-shadow: 0 0 18px rgba(149, 133, 240, .65);
}

.metal-wallet-v10 .metal-wallet-hero-copy {
  align-content: center;
  gap: 10px;
}

.metal-wallet-v10 .metal-wallet-hero-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.metal-wallet-v10 .metal-wallet-eyebrow {
  padding: 7px 10px;
  color: #f0c866;
  border-radius: 999px;
  background: rgba(225, 181, 75, .09);
  font-size: .72rem;
}

.metal-wallet-v10 .metal-wallet-live {
  margin: 0;
  padding: 7px 9px;
  font-size: .66rem;
}

.metal-wallet-v10 .metal-wallet-live small {
  font-size: .61rem;
}

.metal-wallet-v10 .metal-wallet-hero h1 {
  max-width: 640px;
  margin-top: 5px;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.32;
  letter-spacing: -.035em;
}

.metal-wallet-v10 .metal-wallet-hero p {
  max-width: 630px;
  color: #aeb8c8;
  font-size: .84rem;
  line-height: 1.85;
}

.metal-wallet-v10 .metal-wallet-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 5px;
}

.metal-wallet-v10 .metal-wallet-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8997ac;
  font-size: .68rem;
}

.metal-wallet-v10 .metal-wallet-hero-value {
  gap: 7px;
  padding: 20px;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 20px 45px rgba(2, 6, 23, .14);
}

.metal-wallet-v10 .metal-wallet-hero-value>small {
  color: #abb5c4;
  font-size: .75rem;
  font-weight: 750;
}

.metal-wallet-v10 .metal-wallet-hero-value>strong {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.metal-wallet-v10 .metal-wallet-change {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .08);
  font-size: .66rem;
}

.metal-wallet-v10 .metal-wallet-change.neutral {
  color: #a5b0c0;
}

.metal-wallet-v10 .metal-wallet-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 4px;
}

.metal-wallet-v10 .metal-wallet-hero-stats>span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .045);
}

.metal-wallet-v10 .metal-wallet-hero-stats small {
  overflow: hidden;
  color: #7f8da2;
  font-size: .61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-wallet-v10 .metal-wallet-hero-stats b {
  overflow: hidden;
  color: #eef2f7;
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metal-wallet-v10 .metal-wallet-hero-value>.metal-hero-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 3px;
}

.metal-wallet-v10 .metal-wallet-hero-value button {
  min-height: 40px;
  padding: 8px 13px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #d7aa46, #b68728);
  box-shadow: 0 9px 20px rgba(190, 144, 42, .2);
  font-size: .68rem;
}

.metal-wallet-v10 .metal-wallet-hero-value button+button {
  min-width: 78px;
  color: #ead597;
  border: 0;
  background: rgba(228, 187, 86, .1);
  box-shadow: none;
}

.metal-wallet-v10 .metal-wallet-tabs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px;
  border: 0;
  border-radius: 17px;
  background: rgba(17, 24, 39, .72);
  box-shadow: 0 10px 30px rgba(2, 6, 23, .07);
}

.metal-wallet-v10 .metal-wallet-tab-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.metal-wallet-v10 .metal-wallet-tabs button {
  min-height: 40px;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: .68rem;
}

.metal-wallet-v10 .metal-wallet-tabs button strong {
  font: inherit;
  font-weight: 800;
}

.metal-wallet-v10 .metal-wallet-tabs button.active {
  color: #f1ce73;
  background: linear-gradient(145deg, rgba(218, 176, 81, .17), rgba(218, 176, 81, .08));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.metal-wallet-v10 .metal-wallet-tabs #metal-refresh-prices {
  flex: 0 0 auto;
  margin-inline-start: 0;
  color: #a79cf4;
  background: rgba(139, 125, 246, .07);
}

.metal-wallet-v10 .metal-wallet-kpis {
  gap: 11px;
}

.metal-wallet-v10 .metal-wallet-kpi {
  position: relative;
  min-height: 116px;
  align-items: flex-start;
  padding: 17px;
  overflow: hidden;
  border: 0;
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--tone), .11), transparent 42%),
    linear-gradient(145deg, rgba(23, 31, 49, .96), rgba(13, 20, 34, .92));
  box-shadow: 0 13px 32px rgba(2, 6, 23, .08);
}

.metal-wallet-v10 .metal-wallet-kpi::after {
  position: absolute;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: rgb(var(--tone));
  content: '';
  inset-inline-start: 17px;
  bottom: 0;
}

.metal-wallet-v10 .metal-wallet-kpi>span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.metal-wallet-v10 .metal-wallet-kpi>div {
  gap: 4px;
}

.metal-wallet-v10 .metal-wallet-kpi small {
  font-size: .68rem;
}

.metal-wallet-v10 .metal-wallet-kpi strong {
  font-size: 1.03rem;
}

.metal-wallet-v10 .metal-wallet-kpi em {
  font-size: .6rem;
}

.metal-wallet-v10 .metal-wallet-insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(139, 125, 246, .1), transparent 32%),
    linear-gradient(135deg, rgba(24, 32, 51, .94), rgba(15, 22, 37, .9));
  box-shadow: 0 14px 34px rgba(2, 6, 23, .07);
}

.metal-wallet-v10 .metal-wallet-insight-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #a79cf4;
  border-radius: 15px;
  background: rgba(139, 125, 246, .1);
}

.metal-wallet-v10 .metal-wallet-insight>div {
  display: grid;
  gap: 2px;
}

.metal-wallet-v10 .metal-wallet-insight small {
  color: #9b8ff0;
  font-size: .64rem;
  font-weight: 800;
}

.metal-wallet-v10 .metal-wallet-insight h2 {
  margin: 0;
  color: #e9edf4;
  font-size: .88rem;
  font-weight: 900;
}

.metal-wallet-v10 .metal-wallet-insight p {
  margin: 0;
  color: #7d8ba0;
  font-size: .66rem;
  line-height: 1.7;
}

.metal-wallet-v10 .metal-wallet-insight aside {
  display: grid;
  gap: 7px;
  min-width: 174px;
}

.metal-wallet-v10 .metal-wallet-insight aside span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  color: #8593a7;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  font-size: .6rem;
}

.metal-wallet-v10 .metal-wallet-insight aside b {
  color: #d9dfe8;
}

.metal-wallet-v10 .metal-wallet-grid {
  grid-template-columns: minmax(0, 1.38fr) minmax(320px, .62fr);
  gap: 12px;
}

.metal-wallet-v10 .metal-wallet-panel {
  padding: 19px;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(22, 30, 48, .95), rgba(13, 20, 34, .9));
  box-shadow: 0 15px 38px rgba(2, 6, 23, .07);
}

.metal-wallet-v10 .metal-wallet-panel>header span {
  font-size: .64rem;
}

.metal-wallet-v10 .metal-wallet-panel>header h2 {
  font-size: .88rem;
}

.metal-wallet-v10 .metal-wallet-panel>header>small,
.metal-wallet-v10 .metal-wallet-panel>header>button {
  font-size: .59rem;
}

.metal-wallet-v10 .metal-spot-cards {
  gap: 10px;
}

.metal-wallet-v10 .metal-spot-cards article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  padding: 15px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--tone), .12), transparent 45%),
    rgba(var(--tone), .04);
}

.metal-wallet-v10 .metal-spot-cards article>header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.metal-wallet-v10 .metal-spot-cards article>header>span {
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  color: rgb(var(--tone));
  border-radius: 12px;
  background: rgba(var(--tone), .11);
}

.metal-wallet-v10 .metal-spot-cards article>header>div {
  display: grid;
  gap: 1px;
}

.metal-wallet-v10 .metal-spot-cards article>header small {
  font-size: .62rem;
}

.metal-wallet-v10 .metal-spot-cards article>header strong {
  color: rgb(var(--tone));
  font-size: .76rem;
}

.metal-wallet-v10 .metal-spot-main {
  display: grid;
  gap: 3px;
}

.metal-wallet-v10 .metal-spot-main small {
  color: #6f7e93;
  font-size: .61rem;
}

.metal-wallet-v10 .metal-spot-main strong {
  color: #edf1f6;
  font-size: 1.06rem;
}

.metal-wallet-v10 .metal-spot-cards article>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  color: #6f7e93;
  border-top: 1px solid rgba(var(--tone), .09);
  font-size: .58rem;
}

.metal-wallet-v10 .metal-spot-cards article>footer b {
  color: #aab4c3;
}

.metal-wallet-v10 .metal-purity-strip {
  gap: 5px;
  padding-top: 9px;
}

.metal-wallet-v10 .metal-purity-strip span {
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  font-size: .55rem;
}

.metal-wallet-v10 .metal-allocation-ring.empty {
  background: conic-gradient(rgba(148, 163, 184, .15) 0 100%);
}

.metal-wallet-v10 .metal-allocation-ring div small {
  max-width: 75px;
  text-align: center;
}

.metal-wallet-v10 .metal-wallet-note {
  padding: 12px 14px;
  border: 0;
  border-radius: 13px;
  background: rgba(139, 125, 246, .045);
  font-size: .61rem;
}

.metal-wallet-v10 .metal-wallet-empty {
  border: 0;
  border-radius: 17px;
  background: rgba(139, 125, 246, .04);
}

html.light .metal-wallet-v10 .metal-wallet-hero {
  background:
    radial-gradient(circle at 12% 16%, rgba(226, 179, 74, .2), transparent 31%),
    radial-gradient(circle at 91% 91%, rgba(119, 101, 225, .15), transparent 37%),
    linear-gradient(135deg, #ffffff 0%, #f8f7f2 57%, #f2f1fb 100%);
  box-shadow: 0 22px 55px rgba(64, 61, 98, .1);
}

html.light .metal-wallet-v10 .metal-wallet-hero h1,
html.light .metal-wallet-v10 .metal-wallet-hero-value>strong,
html.light .metal-wallet-v10 .metal-wallet-hero-stats b {
  color: #20283a;
}

html.light .metal-wallet-v10 .metal-wallet-hero p,
html.light .metal-wallet-v10 .metal-wallet-hero-trust span,
html.light .metal-wallet-v10 .metal-wallet-live,
html.light .metal-wallet-v10 .metal-wallet-hero-value>small,
html.light .metal-wallet-v10 .metal-wallet-hero-stats small {
  color: #778397;
}

html.light .metal-wallet-v10 .metal-wallet-hero-value {
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 18px 38px rgba(64, 61, 98, .08);
}

html.light .metal-wallet-v10 .metal-wallet-hero-stats>span,
html.light .metal-wallet-v10 .metal-wallet-live {
  background: rgba(70, 78, 104, .045);
}

html.light .metal-wallet-v10 .metal-wallet-tabs {
  background: #fff;
  box-shadow: 0 10px 28px rgba(64, 61, 98, .07);
}

html.light .metal-wallet-v10 .metal-wallet-kpi,
html.light .metal-wallet-v10 .metal-wallet-panel {
  background:
    radial-gradient(circle at 100% 0, rgba(var(--tone, 139, 125, 246), .08), transparent 42%),
    #fff;
  box-shadow: 0 13px 32px rgba(64, 61, 98, .07);
}

html.light .metal-wallet-v10 .metal-wallet-kpi strong,
html.light .metal-wallet-v10 .metal-wallet-panel>header h2,
html.light .metal-wallet-v10 .metal-spot-main strong {
  color: #222a3b;
}

html.light .metal-wallet-v10 .metal-wallet-insight {
  background:
    radial-gradient(circle at 15% 20%, rgba(139, 125, 246, .1), transparent 34%),
    linear-gradient(135deg, #ffffff, #f7f6fe);
  box-shadow: 0 13px 32px rgba(64, 61, 98, .07);
}

html.light .metal-wallet-v10 .metal-wallet-insight h2 {
  color: #222a3b;
}

html.light .metal-wallet-v10 .metal-wallet-insight p,
html.light .metal-wallet-v10 .metal-wallet-insight aside span {
  color: #748197;
}

html.light .metal-wallet-v10 .metal-wallet-insight aside span {
  background: rgba(72, 79, 104, .04);
}

html.light .metal-wallet-v10 .metal-wallet-insight aside b {
  color: #31394b;
}

html.light .metal-wallet-v10 .metal-spot-cards article {
  background:
    radial-gradient(circle at 100% 0, rgba(var(--tone), .11), transparent 47%),
    rgba(var(--tone), .035);
}

html.light .metal-wallet-v10 .metal-spot-cards article>footer {
  color: #7c8799;
}

html.light .metal-wallet-v10 .metal-spot-cards article>footer b {
  color: #40495b;
}

@media (max-width: 1100px) {
  .metal-wallet-v10 .metal-wallet-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .metal-wallet-v10 .metal-wallet-orbit {
    inset-inline-start: auto;
    inset-inline-end: 28px;
    top: 105px;
  }

  .metal-wallet-v10 .metal-wallet-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metal-wallet-v10 .metal-wallet-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .metal-wallet-v10,
  .metal-wallet-v10 #metal-wallet-content {
    gap: 12px;
  }

  .metal-wallet-v10 .metal-wallet-hero {
    min-height: 0;
    gap: 12px;
    padding: 15px;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 15px 36px rgba(2, 6, 23, .15);
  }

  .metal-wallet-v10 .metal-wallet-orbit {
    display: none;
  }

  .metal-wallet-v10 .metal-wallet-hero-copy {
    display: block;
  }

  .metal-wallet-v10 .metal-wallet-hero-topline {
    display: flex;
  }

  .metal-wallet-v10 .metal-wallet-hero h1,
  .metal-wallet-v10 .metal-wallet-hero p,
  .metal-wallet-v10 .metal-wallet-hero-trust {
    display: none;
  }

  .metal-wallet-v10 .metal-wallet-eyebrow {
    padding: 6px 9px;
    font-size: .7rem;
  }

  .metal-wallet-v10 .metal-wallet-live {
    padding: 6px 8px;
    font-size: .62rem;
  }

  .metal-wallet-v10 .metal-wallet-live small {
    display: none;
  }

  .metal-wallet-v10 .metal-wallet-hero-value {
    gap: 6px;
    padding: 15px;
    border-radius: 18px;
  }

  .metal-wallet-v10 .metal-wallet-hero-value>small {
    font-size: .72rem;
  }

  .metal-wallet-v10 .metal-wallet-hero-value>strong {
    font-size: 1.55rem;
  }

  .metal-wallet-v10 .metal-wallet-change {
    font-size: .62rem;
  }

  .metal-wallet-v10 .metal-wallet-hero-stats {
    gap: 5px;
  }

  .metal-wallet-v10 .metal-wallet-hero-stats>span {
    padding: 8px 7px;
  }

  .metal-wallet-v10 .metal-wallet-hero-stats small {
    font-size: .58rem;
  }

  .metal-wallet-v10 .metal-wallet-hero-stats b {
    font-size: .7rem;
  }

  .metal-wallet-v10 .metal-wallet-tabs {
    position: sticky;
    z-index: 8;
    top: 68px;
    align-items: stretch;
    gap: 5px;
    padding: 6px;
    border-radius: 15px;
    backdrop-filter: blur(18px);
  }

  .metal-wallet-v10 .metal-wallet-tab-group {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }

  .metal-wallet-v10 .metal-wallet-tabs button {
    min-width: 0;
    min-height: 42px;
    gap: 4px;
    padding: 7px 5px;
    font-size: .62rem;
  }

  .metal-wallet-v10 .metal-wallet-tabs button strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .metal-wallet-v10 .metal-wallet-tabs button b {
    min-width: 16px;
    height: 16px;
    font-size: .45rem;
  }

  .metal-wallet-v10 .metal-wallet-tabs #metal-refresh-prices {
    width: 42px;
    flex: 0 0 42px;
    padding: 7px;
  }

  .metal-wallet-v10 .metal-wallet-tabs #metal-refresh-prices strong {
    display: none;
  }

  .metal-wallet-v10 .metal-wallet-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .metal-wallet-v10 .metal-wallet-kpi {
    min-height: 123px;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 17px;
  }

  .metal-wallet-v10 .metal-wallet-kpi>span {
    width: 38px;
    height: 38px;
  }

  .metal-wallet-v10 .metal-wallet-kpi small {
    font-size: .68rem;
  }

  .metal-wallet-v10 .metal-wallet-kpi strong {
    max-width: 100%;
    font-size: .9rem;
  }

  .metal-wallet-v10 .metal-wallet-kpi em {
    font-size: .58rem;
  }

  .metal-wallet-v10 .metal-wallet-insight {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 15px;
    border-radius: 18px;
  }

  .metal-wallet-v10 .metal-wallet-insight-icon {
    width: 42px;
    height: 42px;
  }

  .metal-wallet-v10 .metal-wallet-insight h2 {
    font-size: .82rem;
    line-height: 1.5;
  }

  .metal-wallet-v10 .metal-wallet-insight p {
    font-size: .64rem;
  }

  .metal-wallet-v10 .metal-wallet-insight aside {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    grid-column: 1 / -1;
  }

  .metal-wallet-v10 .metal-wallet-insight aside span {
    min-width: 0;
    flex: 1 1 140px;
    font-size: .58rem;
  }

  .metal-wallet-v10 .metal-wallet-panel {
    padding: 15px;
    border-radius: 19px;
  }

  .metal-wallet-v10 .metal-wallet-panel>header h2 {
    font-size: .84rem;
  }

  .metal-wallet-v10 .metal-spot-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .metal-wallet-v10 .metal-spot-cards article {
    gap: 11px;
    padding: 14px;
  }

  .metal-wallet-v10 .metal-purity-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metal-wallet-v10 .metal-allocation-body {
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 12px;
  }

  .metal-wallet-v10 .metal-allocation-ring {
    width: 118px;
    height: 118px;
  }

  .metal-wallet-v10 .metal-allocation-list article {
    padding: 9px;
  }

  .metal-wallet-v10 .metal-wallet-note {
    font-size: .6rem;
    line-height: 1.75;
  }

  .metal-wallet-v10 .metal-holdings-toolbar {
    gap: 13px;
  }
}

@media (max-width: 390px) {
  .metal-wallet-v10 .metal-wallet-hero-topline {
    gap: 6px;
  }

  .metal-wallet-v10 .metal-wallet-eyebrow {
    max-width: 54%;
  }

  .metal-wallet-v10 .metal-wallet-hero-value {
    padding: 13px;
  }

  .metal-wallet-v10 .metal-wallet-hero-value button {
    padding-inline: 10px;
  }

  .metal-wallet-v10 .metal-wallet-tabs button {
    flex-direction: column;
    font-size: .56rem;
  }

  .metal-wallet-v10 .metal-wallet-tabs button b {
    position: absolute;
    transform: translate(-14px, -11px);
  }

  .metal-wallet-v10 .metal-allocation-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .metal-wallet-v10 .metal-allocation-list {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   Quran reader — Madinah Mushaf experience v4
   The bundled Amiri Quran font is licensed under SIL OFL 1.1.
══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Sabiq Amiri Quran";
  src: url("../assets/fonts/AmiriQuran.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

.quran-reader-madina {
  --madina-paper: #fbf7e9;
  --madina-paper-deep: #f3ecd7;
  --madina-ink: #20170f;
  --madina-muted: #7f6d54;
  --madina-gold: #9b7838;
  --madina-gold-soft: rgba(155, 120, 56, .13);
  --madina-green: #236e58;
}

.quran-reader-madina .quran-reader-v3-reader {
  gap: 16px;
}

.quran-reader-madina .quran-reader-v3-controls {
  padding: 12px;
  border-radius: 17px;
}

.quran-reader-madina .quran-reader-v3-page-head {
  max-width: 860px;
  width: 100%;
  margin-inline: auto;
}

.quran-reader-madina .quran-reader-v3-page-head>button {
  min-height: 46px;
  border-radius: 15px;
}

.quran-reader-madina .quran-reader-v3-page-head>div {
  display: grid;
  gap: 2px;
}

.quran-reader-madina .quran-reader-v3-page-head>div span {
  color: var(--quran-accent);
  font-size: 11px;
  font-weight: 800;
}

.quran-reader-madina .quran-reader-v3-page-head>div strong {
  font-size: 16px;
}

.quran-reader-madina .quran-madina-page {
  position: relative;
  display: flex;
  width: min(100%, 860px);
  min-height: 930px;
  margin-inline: auto;
  padding: 34px 42px 27px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(115, 84, 34, .3);
  border-radius: 7px 18px 18px 7px;
  background:
    radial-gradient(circle at 0 0, rgba(170, 128, 55, .08), transparent 23%),
    radial-gradient(circle at 100% 100%, rgba(35, 110, 88, .06), transparent 28%),
    repeating-linear-gradient(0deg, rgba(92, 67, 28, .014) 0 1px, transparent 1px 5px),
    var(--madina-paper);
  color: var(--madina-ink);
  box-shadow:
    inset 7px 0 16px rgba(98, 70, 30, .045),
    inset 0 0 0 7px var(--madina-paper),
    inset 0 0 0 9px rgba(145, 108, 45, .34),
    inset 0 0 0 12px var(--madina-paper),
    inset 0 0 0 13px rgba(35, 110, 88, .22),
    0 22px 55px rgba(31, 24, 14, .14);
}

.quran-reader-madina .quran-madina-page::before,
.quran-reader-madina .quran-madina-page::after {
  position: absolute;
  z-index: 0;
  width: 94px;
  height: 94px;
  border: 1px solid rgba(155, 120, 56, .22);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.quran-reader-madina .quran-madina-page::before {
  inset-inline-start: -53px;
  top: -53px;
  box-shadow: 0 0 0 9px rgba(155, 120, 56, .025), 0 0 0 18px rgba(35, 110, 88, .025);
}

.quran-reader-madina .quran-madina-page::after {
  inset-inline-end: -53px;
  bottom: -53px;
  box-shadow: 0 0 0 9px rgba(155, 120, 56, .025), 0 0 0 18px rgba(35, 110, 88, .025);
}

.quran-reader-madina .quran-madina-page-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.4fr) 1fr;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  margin: 0 9px 22px;
  padding: 0 8px 8px;
  color: var(--madina-muted);
  border-bottom: 1px solid rgba(155, 120, 56, .3);
  font-family: "Sabiq Amiri Quran", "Amiri", serif;
  font-size: 13px;
}

.quran-reader-madina .quran-madina-page-meta::after {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35, 110, 88, .42), transparent);
  content: "";
  inset-inline: 16%;
  bottom: -4px;
}

.quran-reader-madina .quran-madina-page-meta span:last-child {
  text-align: end;
}

.quran-reader-madina .quran-madina-page-meta strong {
  overflow: hidden;
  color: var(--madina-green);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quran-reader-madina .quran-madina-page-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 12px;
}

.quran-reader-madina .quran-reader-v3-surah+.quran-reader-v3-surah {
  margin-top: 24px;
}

.quran-reader-madina .quran-reader-v3-surah>header {
  position: relative;
  display: grid;
  max-width: 590px;
  min-height: 58px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  margin: 0 auto 19px;
  padding: 7px 17px;
  border: 1px solid rgba(155, 120, 56, .42);
  border-radius: 4px 22px 4px 22px;
  background:
    linear-gradient(135deg, rgba(35, 110, 88, .055), rgba(155, 120, 56, .08)),
    var(--madina-paper-deep);
  color: var(--madina-gold);
  box-shadow: inset 0 0 0 3px var(--madina-paper-deep), inset 0 0 0 4px rgba(155, 120, 56, .14);
}

.quran-reader-madina .quran-reader-v3-surah>header::before,
.quran-reader-madina .quran-reader-v3-surah>header::after {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(35, 110, 88, .36);
  content: "";
  transform: rotate(45deg);
}

.quran-reader-madina .quran-reader-v3-surah>header::before {
  inset-inline-start: -8px;
}

.quran-reader-madina .quran-reader-v3-surah>header::after {
  inset-inline-end: -8px;
}

.quran-reader-madina .quran-reader-v3-surah>header>span {
  font-family: "Sabiq Amiri Quran", serif;
  font-size: 24px;
  text-align: center;
}

.quran-reader-madina .quran-reader-v3-surah>header>div {
  display: grid;
  gap: 0;
  text-align: center;
}

.quran-reader-madina .quran-reader-v3-surah>header h3 {
  margin: 0;
  color: var(--madina-ink);
  font-family: "Sabiq Amiri Quran", "Amiri", serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.35;
}

.quran-reader-madina .quran-reader-v3-surah>header small {
  color: var(--madina-muted);
  font-family: "Sabiq Amiri Quran", "Amiri", serif;
  font-size: 11px;
  line-height: 1.2;
}

.quran-reader-madina .quran-reader-v3-bismillah {
  margin: 2px 0 17px;
  color: var(--madina-ink);
  font-family: "Sabiq Amiri Quran", "Amiri", serif;
  font-size: calc(27px * var(--quran-font-scale));
  font-weight: 400;
  line-height: 1.85;
  text-align: center;
}

.quran-reader-madina .quran-reader-v3-ayahs {
  direction: rtl;
  color: var(--madina-ink);
  font-family: "Sabiq Amiri Quran", "Amiri", serif;
  font-size: calc(27px * var(--quran-font-scale));
  font-weight: 400;
  line-height: 2.25;
  text-align: justify;
  text-align-last: center;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
}

.quran-reader-madina .quran-reader-v3-ayah {
  border-radius: 4px;
}

.quran-reader-madina .quran-reader-v3-ayah>button:first-child {
  padding: 1px 0;
  border-radius: 4px;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.quran-reader-madina .quran-reader-v3-ayah>button:first-child:hover,
.quran-reader-madina .quran-reader-v3-ayah>button:first-child:focus-visible,
.quran-reader-madina .quran-reader-v3-ayah.is-selected>button:first-child {
  background: linear-gradient(transparent 68%, rgba(195, 157, 80, .2) 68%);
}

.quran-reader-madina .quran-reader-v3-ayah i {
  position: relative;
  display: inline-grid;
  width: 37px;
  height: 37px;
  place-items: center;
  margin: 0 3px;
  border-radius: 0;
  background: transparent;
  color: var(--madina-green);
  font-family: "Sabiq Amiri Quran", serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  vertical-align: -.12em;
}

.quran-reader-madina .quran-reader-v3-ayah i::before {
  position: absolute;
  z-index: -1;
  color: var(--madina-gold);
  content: "۝";
  font-family: "Sabiq Amiri Quran", serif;
  font-size: 39px;
  line-height: 1;
  inset: -1px;
}

.quran-reader-madina .quran-reader-v3-ayah-actions {
  display: inline-flex;
  gap: 5px;
  margin: 0 6px;
  vertical-align: middle;
}

.quran-reader-madina .quran-reader-v3-ayah-actions button {
  min-height: 31px;
  padding: 5px 8px;
  color: var(--madina-green);
  border: 1px solid rgba(35, 110, 88, .14);
  border-radius: 9px;
  background: rgba(255, 253, 246, .9);
  font-family: var(--font-family);
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(67, 48, 19, .08);
}

.quran-reader-madina .quran-madina-selection-tools {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 12px 0;
  padding: 9px 12px;
  border: 1px solid rgba(35, 110, 88, .12);
  border-radius: 12px;
  background: rgba(255, 253, 246, .76);
  color: var(--madina-muted);
  font-family: var(--font-family);
  font-size: 11px;
  backdrop-filter: blur(8px);
}

.quran-reader-madina .quran-madina-selection-tools>div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quran-reader-madina .quran-madina-selection-tools button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  background: rgba(35, 110, 88, .075);
  color: var(--madina-green);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.quran-reader-madina .quran-madina-selection-tools button.is-saved {
  background: rgba(155, 120, 56, .11);
  color: var(--madina-gold);
}

.quran-reader-madina .quran-madina-page[data-page="1"] .quran-madina-page-body {
  justify-content: flex-start;
  padding-top: 52px;
}

.quran-reader-madina .quran-madina-page[data-page="1"] .quran-reader-v3-ayahs {
  max-width: 650px;
  margin-inline: auto;
  text-align: center;
}

.quran-reader-madina .quran-madina-page[data-page="1"] .quran-reader-v3-ayah {
  display: block;
  margin-block: 2px;
  text-align: center;
}

.quran-reader-madina .quran-madina-page-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: auto 9px 0;
  padding-top: 23px;
}

.quran-reader-madina .quran-madina-page-footer span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155, 120, 56, .48));
}

.quran-reader-madina .quran-madina-page-footer span:last-child {
  background: linear-gradient(90deg, rgba(155, 120, 56, .48), transparent);
}

.quran-reader-madina .quran-madina-page-footer strong {
  display: grid;
  width: 44px;
  height: 31px;
  place-items: center;
  color: var(--madina-green);
  border: 1px solid rgba(155, 120, 56, .42);
  border-radius: 50%;
  font-family: "Sabiq Amiri Quran", serif;
  font-size: 14px;
  font-weight: 400;
  box-shadow: inset 0 0 0 3px var(--madina-paper), inset 0 0 0 4px rgba(35, 110, 88, .18);
}

.quran-reader-madina .quran-reader-v3-complete {
  border-radius: 16px;
}

html:not(.light) .quran-reader-madina .quran-madina-page {
  filter: brightness(.92) saturate(.9);
}

@media (max-width: 700px) {
  .quran-reader-madina {
    padding: 10px;
  }

  .quran-reader-madina .quran-reader-v3-controls {
    gap: 7px;
    padding: 9px;
  }

  .quran-reader-madina .quran-reader-v3-page-head {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 7px;
  }

  .quran-reader-madina .quran-reader-v3-page-head>button {
    min-height: 45px;
    padding: 6px;
  }

  .quran-reader-madina .quran-madina-page {
    width: 100%;
    min-height: 670px;
    padding: 24px 18px 20px;
    border-radius: 5px 14px 14px 5px;
    box-shadow:
      inset 4px 0 10px rgba(98, 70, 30, .04),
      inset 0 0 0 4px var(--madina-paper),
      inset 0 0 0 6px rgba(145, 108, 45, .3),
      inset 0 0 0 8px var(--madina-paper),
      inset 0 0 0 9px rgba(35, 110, 88, .2),
      0 16px 34px rgba(31, 24, 14, .13);
  }

  .quran-reader-madina .quran-madina-page-meta {
    grid-template-columns: 1fr 1.25fr 1fr;
    margin: 0 3px 17px;
    padding-inline: 3px;
    font-size: 10px;
  }

  .quran-reader-madina .quran-madina-page-meta strong {
    font-size: 13px;
  }

  .quran-reader-madina .quran-madina-page-body {
    padding: 0 6px;
  }

  .quran-reader-madina .quran-reader-v3-surah>header {
    min-height: 50px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 4px;
    margin-bottom: 14px;
    padding: 5px 10px;
    border-radius: 3px 17px 3px 17px;
  }

  .quran-reader-madina .quran-reader-v3-surah>header>span {
    font-size: 18px;
  }

  .quran-reader-madina .quran-reader-v3-surah>header h3 {
    font-size: 20px;
    white-space: nowrap;
  }

  .quran-reader-madina .quran-reader-v3-surah>header small {
    font-size: 9px;
  }

  .quran-reader-madina .quran-reader-v3-bismillah {
    margin-bottom: 12px;
    font-size: calc(23px * var(--quran-font-scale));
    line-height: 1.8;
  }

  .quran-reader-madina .quran-reader-v3-ayahs {
    font-size: calc(23px * var(--quran-font-scale));
    line-height: 2.28;
    text-align: justify;
    text-align-last: center;
  }

  .quran-reader-madina .quran-reader-v3-ayah i {
    width: 32px;
    height: 32px;
    margin-inline: 1px;
    font-size: 10px;
  }

  .quran-reader-madina .quran-reader-v3-ayah i::before {
    font-size: 34px;
  }

  .quran-reader-madina .quran-reader-v3-ayah-actions {
    display: flex;
    width: 100%;
    margin: 8px 0 10px;
  }

  .quran-reader-madina .quran-reader-v3-ayah-actions button {
    flex: 1;
    justify-content: center;
    min-height: 37px;
    font-size: 11px;
  }

  .quran-reader-madina .quran-madina-selection-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    margin: 17px 4px 0;
    font-size: 10px;
  }

  .quran-reader-madina .quran-madina-selection-tools>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quran-reader-madina .quran-madina-selection-tools button {
    justify-content: center;
    min-height: 36px;
  }

  .quran-reader-madina .quran-madina-page-footer {
    margin-inline: 3px;
    padding-top: 18px;
  }

  .quran-reader-madina .quran-madina-page[data-page="1"] .quran-madina-page-body {
    padding-top: 26px;
  }
}

@media (max-width: 390px) {
  .quran-reader-madina {
    margin-inline: -6px;
    padding-inline: 7px;
  }

  .quran-reader-madina .quran-madina-page {
    min-height: 620px;
    padding-inline: 14px;
  }

  .quran-reader-madina .quran-madina-page-body {
    padding-inline: 4px;
  }

  .quran-reader-madina .quran-reader-v3-ayahs {
    font-size: calc(22px * var(--quran-font-scale));
    line-height: 2.25;
  }
}

/* QuranFlash photographed Madinah Mushaf — primary online view */
.quran-reader-display-switch {
  display: flex;
  max-width: 960px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-inline: auto;
  padding: 11px 13px;
  border-radius: 17px;
  background: var(--quran-panel);
}

.quran-reader-display-switch>div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.quran-reader-display-switch>div:first-child>span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--quran-accent-soft);
  color: var(--quran-accent);
}

.quran-reader-display-switch>div:first-child>div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.quran-reader-display-switch strong {
  color: var(--worship-ink);
  font-size: 13px;
}

.quran-reader-display-switch small {
  color: var(--worship-muted);
  font-size: 10px;
}

.quran-reader-display-switch button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--worship-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.quran-reader-display-switch button.is-active {
  background: var(--worship-card);
  color: var(--quran-accent);
  box-shadow: 0 7px 18px rgba(21, 32, 51, .07);
}

.quran-reader-display-switch button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.quran-flash-embed {
  display: grid;
  max-width: 1100px;
  width: 100%;
  gap: 10px;
  margin-inline: auto;
  padding: 10px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--quran-panel) 92%, #fff 8%);
  box-shadow: 0 16px 40px rgba(18, 28, 46, .09);
}

.quran-flash-embed>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 4px;
}

.quran-flash-embed>header>div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.quran-flash-embed>header>div>span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, #b19451 11%, transparent);
  color: #aa8432;
}

.quran-flash-embed>header>div>div {
  display: grid;
  gap: 1px;
}

.quran-flash-embed>header strong {
  color: var(--worship-ink);
  font-size: 13px;
}

.quran-flash-embed>header small {
  color: var(--worship-muted);
  font-size: 10px;
}

.quran-flash-embed>header>a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--quran-accent-soft);
  color: var(--quran-accent);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.quran-flash-frame-wrap {
  position: relative;
  min-height: 740px;
  overflow: hidden;
  border-radius: 17px;
  background: #fff;
}

.quran-flash-frame-wrap::before {
  position: absolute;
  z-index: 0;
  display: grid;
  place-items: center;
  color: #778397;
  content: "جاري تجهيز صفحات المصحف…";
  font-family: var(--font-family);
  font-size: 13px;
  inset: 0;
}

.quran-flash-frame-wrap iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 740px;
  border: 0;
  background: #fff;
}

.quran-photo-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 3px;
  overflow: hidden;
  padding: 13px;
  border-radius: 17px;
  background:
    linear-gradient(90deg, #eeeae0 0, #fff 49.5%, #ded8cc 50%, #fff 50.5%, #eeeae0 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 86, 45, .1);
}

.quran-photo-spread figure {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 8px;
  background: #fff;
}

.quran-photo-spread figure:first-child {
  box-shadow: -11px 0 20px rgba(48, 39, 25, .06);
}

.quran-photo-spread figure:last-child {
  box-shadow: 11px 0 20px rgba(48, 39, 25, .06);
}

.quran-photo-spread a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

.quran-photo-spread img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 466 / 672;
  object-fit: contain;
  background: #fff;
}

.quran-photo-spread figcaption {
  position: absolute;
  z-index: 2;
  min-width: 58px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(18, 27, 39, .78);
  color: #fff;
  font-size: 9px;
  text-align: center;
  inset-inline-start: 18px;
  bottom: 18px;
  backdrop-filter: blur(8px);
}

/* Subscription plan entitlements inside site settings */
.admin-plan-entitlements {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--clr-primary, #5145dc) 7%, var(--bg-card, #151522));
}

.admin-plan-entitlements-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-plan-entitlements-head > div {
  display: grid;
  gap: 3px;
}

.admin-plan-entitlements-head strong {
  color: var(--text-primary, #f8fafc);
  font-size: .9rem;
}

.admin-plan-entitlements-head small {
  color: var(--text-muted, #94a3b8);
  font-size: .73rem;
}

.admin-plan-entitlements-head > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--clr-primary, #7367f0);
  background: color-mix(in srgb, var(--clr-primary, #5145dc) 12%, transparent);
  font-size: .7rem;
  font-weight: 700;
}

.admin-plan-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-plan-limit-grid label {
  display: grid;
  gap: 7px;
}

.admin-plan-limit-grid label > span {
  color: var(--text-secondary, #cbd5e1);
  font-size: .73rem;
}

.admin-plan-limit-grid .form-input {
  min-width: 0;
  height: 42px;
  margin: 0;
}

.admin-plan-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-plan-access-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-secondary, #0f172a) 76%, transparent);
  cursor: pointer;
}

.admin-plan-access-option > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary, #cbd5e1);
  font-size: .75rem;
  line-height: 1.4;
}

.admin-plan-access-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-plan-access-option > i {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #64748b) 25%, transparent);
  transition: .2s ease;
}

.admin-plan-access-option > i::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .22);
  transition: .2s ease;
}

.admin-plan-access-option input:checked + i {
  background: var(--clr-primary, #5145dc);
}

.admin-plan-access-option input:checked + i::after {
  inset-inline-start: calc(100% - 17px);
}

html.light .admin-plan-entitlements {
  background: color-mix(in srgb, var(--clr-primary, #5145dc) 6%, #f8fafc);
}

html.light .admin-plan-access-option {
  background: rgba(255, 255, 255, .78);
}

@media (max-width: 700px) {
  .admin-plan-entitlements-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-plan-limit-grid,
  .admin-plan-access-grid {
    grid-template-columns: 1fr;
  }
}

.quran-flash-embed>p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 5px;
  color: var(--worship-muted);
  font-size: 10px;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .quran-reader-display-switch {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
  }

  .quran-reader-display-switch>div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quran-reader-display-switch button {
    min-height: 42px;
    padding-inline: 7px;
    font-size: 10px;
  }

  .quran-flash-embed {
    padding: 7px;
    border-radius: 18px;
  }

  .quran-flash-embed>header {
    align-items: stretch;
    flex-direction: column;
  }

  .quran-flash-embed>header>a {
    width: 100%;
  }

  .quran-flash-frame-wrap,
  .quran-flash-frame-wrap iframe {
    height: 690px;
    min-height: 690px;
  }

  .quran-photo-spread {
    grid-template-columns: minmax(0, 1fr);
    padding: 7px;
    border-radius: 14px;
    background: #fff;
  }

  .quran-photo-spread figure {
    padding: 2px;
    box-shadow: none !important;
  }

  .quran-photo-spread figure.is-companion {
    display: none;
  }

  .quran-photo-spread img {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .quran-photo-spread figcaption {
    inset-inline-start: 12px;
    bottom: 12px;
  }

  .quran-flash-embed>p {
    align-items: flex-start;
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  .quran-flash-frame-wrap,
  .quran-flash-frame-wrap iframe {
    height: 640px;
    min-height: 640px;
  }
}