/* ==========================================================
   DairySync - Main Stylesheet (minimal, fast, clean)
   Created with love by M Sharjeel <sharjeel.mediapro@gmail.com>

   Design notes:
   - Flat, light cards instead of heavy blurred glassmorphism -> renders
     faster on low-end phones/tablets, looks cleaner and more minimal.
   - All motion uses only transform/opacity (GPU-accelerated) so it stays
     smooth even on modest hardware, and respects prefers-reduced-motion.
   - One consistent spacing/radius/shadow scale used everywhere.
   ========================================================== */

:root {
  --ds-primary: #2E7D6B;
  --ds-primary-dark: #1F5D4F;
  --ds-accent: #4FB0A5;
  --ds-bg: #F6F8F7;
  --ds-card-bg: #FFFFFF;
  --ds-text: #1E2A28;
  --ds-muted: #6B7C79;
  --ds-border: rgba(20, 40, 35, 0.09);
  --ds-sidebar-bg: #122320;
  --ds-sidebar-text: #C9D8D4;
  --ds-radius-sm: 10px;
  --ds-radius: 14px;
  --ds-shadow-sm: 0 1px 2px rgba(18, 35, 32, 0.04);
  --ds-shadow: 0 4px 16px rgba(18, 35, 32, 0.06);
  --ds-shadow-lg: 0 12px 32px rgba(18, 35, 32, 0.10);
  --ds-ease: cubic-bezier(.4, 0, .2, 1);
  --ds-fast: 140ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  font-size:0.906rem;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; transition: color var(--ds-fast) var(--ds-ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Layout ---------------------------------------------------- */
.ds-app { display: flex; min-height: 100vh; }

.ds-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--ds-sidebar-bg), #0B1613);
  color: var(--ds-sidebar-text);
  padding: 18px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: transform 220ms var(--ds-ease);
  scrollbar-width: thin;
}
.ds-sidebar::-webkit-scrollbar { width: 6px; }
.ds-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 10px; }

.ds-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 20px 8px;
}
.ds-brand-badge {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-primary));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size:1rem;
}
.ds-brand-name { font-weight: 700; font-size:1rem; color: #fff; letter-spacing: .2px; line-height: 1.2; }
.ds-brand-tag { font-size:0.625rem; color: #7fa89e; margin-top: -1px; }

.ds-nav-section { font-size:0.625rem; text-transform: uppercase; letter-spacing: .09em; color: #587169; margin: 16px 10px 5px; font-weight: 600; }

.ds-nav a.ds-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--ds-radius-sm); color: var(--ds-sidebar-text);
  font-size:0.831rem; margin-bottom: 1px;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease);
}
.ds-nav a.ds-nav-link:hover { background: rgba(255,255,255,0.07); color: #fff; transform: translateX(2px); }
.ds-nav a.ds-nav-link.active { background: linear-gradient(90deg, rgba(79,176,165,.22), rgba(79,176,165,.04)); color: #fff; box-shadow: inset 3px 0 0 var(--ds-accent); }
.ds-nav .bi { font-size:0.906rem; width: 17px; text-align: center; }

.ds-main { flex: 1; min-width: 0; }

.ds-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ds-border); position: sticky; top: 0; z-index: 20;
}
.ds-content {
  padding: 22px 24px 56px;
  animation: dsFadeIn 180ms var(--ds-ease);
}

@keyframes dsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cards ---------------------------------------------------- */
.ds-card {
  background: var(--ds-card-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
  padding: 18px;
  transition: box-shadow var(--ds-fast) var(--ds-ease);
}

.ds-stat {
  border-radius: var(--ds-radius);
  padding: 16px 18px;
  color: #fff;
  box-shadow: var(--ds-shadow);
  position: relative;
  overflow: hidden;
  transition: transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-stat:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); }
.ds-stat .ds-stat-value { font-size:1.5rem; font-weight: 700; line-height: 1.15; }
.ds-stat .ds-stat-label { font-size:0.75rem; opacity: .92; margin-top: 3px; }
.ds-stat .bi { position: absolute; right: 14px; top: 14px; font-size:1.625rem; opacity: .3; }

.ds-stat.bg-1 { background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-dark)); }
.ds-stat.bg-2 { background: linear-gradient(135deg, #3E8FBF, #2A628A); }
.ds-stat.bg-3 { background: linear-gradient(135deg, #C99A3B, #A9761F); }
.ds-stat.bg-4 { background: linear-gradient(135deg, #C1583F, #9B3A26); }
.ds-stat.bg-5 { background: linear-gradient(135deg, #7B5EC9, #5A3FA0); }
.ds-stat.bg-6 { background: linear-gradient(135deg, #4a5a63, #313e45); }

/* Badges ---------------------------------------------------- */
.badge-soft-success, .badge-soft-danger, .badge-soft-warning, .badge-soft-info,
.badge-soft-primary, .badge-soft-secondary, .badge-soft-dark {
  padding: 3px 10px; border-radius: 20px; font-weight: 600; font-size:0.688rem; white-space: nowrap;
}
.badge-soft-success { background: #E4F5EF; color: #1F7A5C; }
.badge-soft-danger  { background: #FBE7E5; color: #B4392A; }
.badge-soft-warning { background: #FBF1DC; color: #97701A; }
.badge-soft-info    { background: #E4EEFB; color: #24629E; }
.badge-soft-primary { background: #E4F0EE; color: #1F5D4F; }
.badge-soft-secondary{ background: #EDEFEF; color: #5C6664; }
.badge-soft-dark    { background: #E4E4E4; color: #333; }

/* Tables ---------------------------------------------------- */
.ds-table thead th {
  font-size:0.688rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ds-muted); border-bottom: 1px solid var(--ds-border); font-weight: 600;
  padding: 9px 12px;
}
.ds-table td { padding: 10px 12px; border-bottom: 1px solid var(--ds-border); vertical-align: middle; }
.ds-table tbody tr { transition: background var(--ds-fast) var(--ds-ease); }
.ds-table tbody tr:hover { background: rgba(46,125,107,0.035); }

/* Buttons ---------------------------------------------------- */
.btn-ds-primary {
  background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-dark));
  border: none; color: #fff; border-radius: var(--ds-radius-sm); padding: 8px 17px; font-weight: 600; font-size:0.831rem;
  transition: transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease), opacity var(--ds-fast) var(--ds-ease);
}
.btn-ds-primary:hover { opacity: .94; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31,93,79,.25); }
.btn-ds-primary:active { transform: translateY(0); }
.btn-ds-outline {
  border: 1px solid var(--ds-border); color: var(--ds-text); border-radius: var(--ds-radius-sm); background: #fff; font-size:0.831rem;
  transition: background var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}
.btn-ds-outline:hover { background: #F4F7F6; border-color: var(--ds-primary); }

.btn, .btn-sm { transition: transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease); }

/* Forms ---------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-border); font-size:0.831rem; padding: 8px 12px;
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.form-control:focus, .form-select:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px rgba(79,176,165,0.14); }
label.form-label { font-size:0.769rem; font-weight: 600; color: var(--ds-muted); margin-bottom: 4px; }

/* Modals - snappier, smaller motion distance ---------------------------------------------------- */
.modal-content { border-radius: var(--ds-radius); border: none; box-shadow: var(--ds-shadow-lg); }
.modal.fade .modal-dialog { transition: transform 160ms var(--ds-ease); }

/* Login page ---------------------------------------------------- */
.ds-auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at top left, #244F45, #0E1A17 70%);
  padding: 20px;
}
.ds-auth-card {
  width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 32px 28px; box-shadow: var(--ds-shadow-lg);
  animation: dsFadeIn 220ms var(--ds-ease);
}

/* Mobile ---------------------------------------------------- */
@media (max-width: 991.98px) {
  .ds-sidebar { position: fixed; z-index: 40; transform: translateX(-100%); }
  .ds-sidebar.open { transform: translateX(0); }
  .ds-content { padding: 14px; }
  .ds-topbar { padding: 10px 14px; }
}

.ds-footer-credit { text-align: center; font-size:0.719rem; color: var(--ds-muted); padding: 16px 0 4px; }

/* ==========================================================
   Dark mode — toggle by setting data-theme="dark" on <html>.
   Same class names throughout the app, just different variable values,
   so no HTML changes are needed anywhere else in the codebase.
   ========================================================== */
html[data-theme="dark"] {
  --ds-bg: #12181A;
  --ds-card-bg: #1B2426;
  --ds-text: #E7EFEC;
  --ds-muted: #9BB0AC;
  --ds-border: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] body { background: var(--ds-bg); color: var(--ds-text); }
html[data-theme="dark"] .ds-topbar { background: rgba(27, 36, 38, 0.9); border-bottom-color: var(--ds-border); }
html[data-theme="dark"] .ds-table thead th { color: var(--ds-muted); }
html[data-theme="dark"] .ds-table tbody tr:hover { background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background: #222E31; border-color: var(--ds-border); color: var(--ds-text);
}
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background: #222E31; color: var(--ds-text); }
html[data-theme="dark"] .btn-ds-outline { background: #1B2426; color: var(--ds-text); }
html[data-theme="dark"] .btn-ds-outline:hover { background: #222E31; }
html[data-theme="dark"] .modal-content { background: #1B2426; color: var(--ds-text); }
html[data-theme="dark"] .dropdown-menu { background: #1B2426; color: var(--ds-text); }
html[data-theme="dark"] .dropdown-item { color: var(--ds-text); }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.06); color: var(--ds-text); }
html[data-theme="dark"] .badge-soft-secondary { background: #2A3538; color: #B7C7C3; }
html[data-theme="dark"] .ds-auth-card { background: #1B2426; color: var(--ds-text); }

.ds-theme-toggle {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ds-border);
  background: var(--ds-card-bg); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ds-text); transition: background var(--ds-fast) var(--ds-ease);
}
.ds-theme-toggle:hover { background: rgba(79,176,165,0.12); }

/* AJAX navigation progress bar ---------------------------------------- */
#dsProgressBar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--ds-accent), var(--ds-primary));
  z-index: 9999; transition: width 180ms var(--ds-ease), opacity 220ms var(--ds-ease); opacity: 0;
}
#dsProgressBar.active { opacity: 1; }
.ds-nav-loading { cursor: progress; }

/* ==========================================================
   Easy-mode additions: big touch-friendly buttons, plain to-do list
   ========================================================== */
body { font-size:0.938rem; }
.btn, .form-control, .form-select { min-height: 40px; }
a.ds-stat { display: block; text-decoration: none; color: #fff; }
a.ds-stat:hover { color: #fff; }

.ds-section-title { font-size:0.812rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ds-muted); margin: 6px 2px 10px; }

.ds-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ds-quick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 112px; padding: 14px 10px; border-radius: 18px; text-align: center; text-decoration: none;
  color: #fff; font-weight: 700; font-size:0.938rem; box-shadow: var(--ds-shadow);
  transition: transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-quick .bi { font-size:2.125rem; line-height: 1; }
.ds-quick:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); }
.ds-quick:active { transform: scale(.97); }
.ds-quick.c-blue   { background: linear-gradient(135deg,#3E8FBF,#2A628A); }
.ds-quick.c-green  { background: linear-gradient(135deg,var(--ds-primary),var(--ds-primary-dark)); }
.ds-quick.c-purple { background: linear-gradient(135deg,#7B5EC9,#5A3FA0); }
.ds-quick.c-red    { background: linear-gradient(135deg,#D2634A,#9B3A26); }
.ds-quick.c-orange { background: linear-gradient(135deg,#E3902B,#B8680F); }
.ds-quick.c-teal   { background: linear-gradient(135deg,#3FA7A0,#2A7873); }
.ds-quick.c-pink   { background: linear-gradient(135deg,#CF5C8F,#A13A69); }
.ds-quick.c-slate  { background: linear-gradient(135deg,#566972,#36454c); }

.ds-todo { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--ds-border); border-left: 5px solid transparent; font-size:0.938rem; }
.ds-todo:last-child { border-bottom: 0; }
.ds-todo > .bi { font-size:1.5rem; }
.ds-todo-warn { border-left-color: #E3A92B; } .ds-todo-warn > .bi { color: #C98A10; }
.ds-todo-bad  { border-left-color: #D2503A; } .ds-todo-bad  > .bi { color: #D2503A; }
.ds-todo-info { border-left-color: #3E8FBF; } .ds-todo-info > .bi { color: #3E8FBF; }
.ds-todo-empty { padding: 22px; text-align: center; color: #1F7A5C; font-weight: 600; font-size:1rem; }
.ds-todo-empty .bi { margin-right: 6px; }
@media (max-width: 575.98px) {
  .ds-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-todo { flex-wrap: wrap; }
  .ds-todo .btn { width: 100%; }
}

/* ==========================================================
   v1.3 — Futuristic refresh, dashboards, Event Center
   ========================================================== */
:root {
  --ds-glow: 0 0 0 1px rgba(79,176,165,.25), 0 8px 30px rgba(46,125,107,.18);
  --ds-glass: rgba(255,255,255,.72);
}
body {
  background:
    radial-gradient(900px 500px at 8% -5%, rgba(79,176,165,.14), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(62,143,191,.10), transparent 55%),
    var(--ds-bg);
  background-attachment: fixed;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(900px 500px at 8% -5%, rgba(79,176,165,.12), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(62,143,191,.10), transparent 55%),
    var(--ds-bg);
}
.ds-card { border-radius: 20px; background: var(--ds-glass); backdrop-filter: blur(6px); }
html[data-theme="dark"] .ds-card { background: rgba(27,36,38,.8); }
.ds-topbar { backdrop-filter: blur(14px) saturate(1.3); }
.ds-sidebar { background: linear-gradient(185deg, #0F2A25 0%, #0A1815 60%, #081210 100%); }
.ds-nav a.ds-nav-link.active { box-shadow: inset 3px 0 0 var(--ds-accent), 0 0 22px rgba(79,176,165,.18); }
.ds-brand-badge { box-shadow: 0 0 18px rgba(79,176,165,.55); }
.btn-ds-primary { border-radius: 12px; box-shadow: 0 4px 14px rgba(31,93,79,.25); }
.ds-stat, .ds-quick { border-radius: 20px; }
.ds-quick small { font-weight: 500; opacity: .92; font-size:0.75rem; }
.ds-quick small.ur { font-size:0.875rem; }

/* Urdu text sits beside English, never replaces it */
.ur { font-family: 'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Noto Naskh Arabic','Segoe UI',serif; font-weight: 500; line-height: 1.9; }
span.ur, small.ur { margin-left: 6px; opacity: .85; font-size: .88em; }
.ds-quick small.ur { display: block; margin: 0; }

/* Dashboard switcher */
.ds-switcher { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.ds-switcher::-webkit-scrollbar { display: none; }
.ds-switch {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--ds-card-bg); border: 1px solid var(--ds-border); color: var(--ds-text); font-weight: 600; font-size:0.875rem;
  transition: transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-switch .bi { font-size:1.125rem; color: var(--ds-primary); }
.ds-switch small.ur { margin-left: 6px; font-size:0.75rem; }
.ds-switch:hover { transform: translateY(-1px); box-shadow: var(--ds-shadow); color: var(--ds-text); }
.ds-switch.active { background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-dark)); color: #fff; border-color: transparent; box-shadow: var(--ds-glow); }
.ds-switch.active .bi { color: #fff; }

/* Hero number */
.ds-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; border-radius: 24px; padding: 26px 30px; color: #fff; box-shadow: var(--ds-shadow-lg); }
.ds-hero-blue  { background: linear-gradient(135deg, #3E8FBF, #1F4E79); }
.ds-hero-green { background: linear-gradient(135deg, #2E9C80, #1F5D4F); }
.ds-hero-red   { background: linear-gradient(135deg, #D2634A, #8E2F1E); }
.ds-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.10); }
.ds-hero-label { font-size:0.875rem; opacity: .9; font-weight: 600; }
.ds-hero-value { font-size: clamp(34px, 7vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.ds-hero-value small { font-size: .4em; font-weight: 600; opacity: .85; }
.ds-hero-sub { opacity: .92; margin-top: 4px; }
.ds-hero-icon { font-size:4.5rem; opacity: .28; position: relative; z-index: 1; }

/* Simple rows */
.ds-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--ds-border); font-size:0.906rem; }
.ds-list-row:last-child { border-bottom: 0; }
.ds-list-row > .bi { font-size:1.125rem; }
.ds-list-row:hover { background: rgba(46,125,107,.05); border-radius: 10px; }
.ds-tone-warn > .bi { color: #C98A10; } .ds-tone-bad > .bi { color: #D2503A; } .ds-tone-good > .bi { color: #1F7A5C; } .ds-tone-info > .bi { color: #3E8FBF; }
.ds-list-empty { padding: 14px 6px; color: #1F7A5C; font-weight: 600; }
.ds-list-empty .bi { margin-right: 4px; }

/* CSS-only bar chart (no JS, instant) */
.ds-bars { display: flex; align-items: flex-end; gap: 10px; height: 170px; }
.ds-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ds-bar { width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #4FB0A5, #2E7D6B); }
.ds-bar-val { font-size:0.75rem; font-weight: 700; } .ds-bar-label { font-size:0.75rem; color: var(--ds-muted); }

/* Event Center */
.ds-ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ds-ev-card {
  background: var(--ds-card-bg); border: 1px solid var(--ds-border); border-radius: 22px; padding: 12px 12px 16px; text-align: center;
  box-shadow: var(--ds-shadow-sm); display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-ev-card:hover { transform: translateY(-4px); box-shadow: var(--ds-glow); }
.ds-ev-art { height: 130px; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; position: relative; }
.ds-ev-art.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.ds-ev-emoji { font-size:4rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.ds-ev-art.c-blue   { background: linear-gradient(135deg,#3E8FBF,#2A628A); } .ds-ev-art.c-green  { background: linear-gradient(135deg,#2E9C80,#1F5D4F); }
.ds-ev-art.c-purple { background: linear-gradient(135deg,#7B5EC9,#5A3FA0); } .ds-ev-art.c-red    { background: linear-gradient(135deg,#D2634A,#9B3A26); }
.ds-ev-art.c-orange { background: linear-gradient(135deg,#E3902B,#B8680F); } .ds-ev-art.c-teal   { background: linear-gradient(135deg,#3FA7A0,#2A7873); }
.ds-ev-art.c-pink   { background: linear-gradient(135deg,#CF5C8F,#A13A69); } .ds-ev-art.c-slate  { background: linear-gradient(135deg,#566972,#36454c); }
.ds-ev-title { font-size:1.062rem; font-weight: 700; color: var(--ds-primary-dark); }
html[data-theme="dark"] .ds-ev-title { color: #7fd1c6; }
.ds-ev-ur { font-size:0.938rem; margin: 0; }
.ds-ev-desc { font-size:0.812rem; color: var(--ds-muted); min-height: 36px; }
.ds-ev-go { margin-top: 6px; align-self: center; padding: 9px 22px; }
.ds-ev-section .bi { margin-right: 4px; }
.ds-ev-mini { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size:1.75rem; color: #fff; }
.ds-ev-mini.c-blue{background:#3E8FBF}.ds-ev-mini.c-green{background:#2E9C80}.ds-ev-mini.c-purple{background:#7B5EC9}.ds-ev-mini.c-red{background:#D2634A}
.ds-ev-mini.c-orange{background:#E3902B}.ds-ev-mini.c-teal{background:#3FA7A0}.ds-ev-mini.c-pink{background:#CF5C8F}.ds-ev-mini.c-slate{background:#566972}

/* Animal picker */
.ds-animal-pick { max-height: 380px; overflow-y: auto; border: 1px solid var(--ds-border); border-radius: 14px; }
.ds-animal-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ds-border); cursor: pointer; margin: 0; font-size:0.938rem; }
.ds-animal-opt:last-child { border-bottom: 0; }
.ds-animal-opt:hover { background: rgba(46,125,107,.07); }
.ds-animal-opt input { width: 20px; height: 20px; accent-color: var(--ds-primary); flex-shrink: 0; }

/* Role dashboard picker */
.ds-dash-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ds-dash-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 14px 46px; border: 2px solid var(--ds-border); border-radius: 16px; cursor: pointer; margin: 0; transition: border-color var(--ds-fast), background var(--ds-fast); }
.ds-dash-opt input { position: absolute; left: 14px; top: 16px; width: 20px; height: 20px; accent-color: var(--ds-primary); }
.ds-dash-opt > .bi { position: absolute; right: 12px; top: 10px; font-size:1.375rem; opacity: .35; }
.ds-dash-opt:has(input:checked) { border-color: var(--ds-primary); background: rgba(46,125,107,.08); }
.ds-dash-opt small { color: var(--ds-muted); }

/* Animal timeline */
.ds-timeline { position: relative; padding-left: 8px; }
.ds-timeline::before { content: ''; position: absolute; left: 29px; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(var(--ds-accent), transparent); border-radius: 3px; }
.ds-tl-item { display: flex; gap: 16px; padding: 8px 0; position: relative; }
.ds-tl-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--ds-card-bg); border: 2px solid var(--ds-accent); display: flex; align-items: center; justify-content: center; font-size:1.375rem; z-index: 1; flex-shrink: 0; box-shadow: var(--ds-shadow-sm); }
.ds-tl-item.ds-tone-bad .ds-tl-dot { border-color: #D2503A; } .ds-tl-item.ds-tone-warn .ds-tl-dot { border-color: #E3A92B; } .ds-tl-item.ds-tone-good .ds-tl-dot { border-color: #1F9C74; }
.ds-tl-body { background: var(--ds-card-bg); border: 1px solid var(--ds-border); border-radius: 16px; padding: 10px 16px; flex: 1; }

@media (max-width: 575.98px) {
  .ds-ev-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ds-ev-art { height: 96px; } .ds-ev-emoji { font-size:3rem; }
  .ds-hero { padding: 20px; } .ds-hero-icon { font-size:3rem; }
}


/* ===== v1.4 : text size, readability, Urdu / RTL ===== */
html{font-size:16px}
html[data-fs="2"]{font-size:18px}
html[data-fs="3"]{font-size:20px}
body{line-height:1.6}
.table td,.table th{padding:.8rem .9rem;vertical-align:middle}
.form-control,.form-select{min-height:2.75rem;font-size:1rem}
.btn{min-height:2.5rem}
.text-muted{color:#5b6670!important}
[data-theme="dark"] .text-muted{color:#a9b4be!important}
:focus-visible{outline:3px solid #2E7D6B;outline-offset:2px}

html[lang="ur"] body,html[lang="ur"] .btn,html[lang="ur"] .form-control,html[lang="ur"] .form-select,
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3,html[lang="ur"] h4,html[lang="ur"] h5,html[lang="ur"] h6{
  font-family:'Noto Naskh Arabic','Jameel Noori Nastaleeq','Segoe UI',Tahoma,serif}
html[lang="ur"] body{font-size:1.1rem;line-height:1.9}
html[lang="ur"] .ur{display:none!important}
html[lang="ur"] .bi-arrow-right:before{transform:scaleX(-1);display:inline-block}
html[lang="ur"] .bi-chevron-right:before{content:"\f284"}
html[lang="ur"] .ds-sidebar{border-left:1px solid var(--ds-border,#e5e7eb);border-right:0}
@media (max-width:991.98px){
  html[lang="ur"] .ds-sidebar{transform:translateX(100%);right:0;left:auto}
  html[lang="ur"] .ds-sidebar.open,html[lang="ur"] .ds-sidebar.show{transform:translateX(0)}
}
html[lang="ur"] .text-start{text-align:right!important}
html[lang="ur"] .text-end{text-align:left!important}
html[lang="ur"] input[type="number"],html[lang="ur"] input[type="tel"],html[lang="ur"] input[type="email"],
html[lang="ur"] input[type="date"],html[lang="ur"] input[type="time"]{direction:ltr;text-align:right}
html[lang="ur"] .ds-todo-warn,html[lang="ur"] .ds-todo-bad,html[lang="ur"] .ds-todo-info{border-left:0;border-right:5px solid transparent}
html[lang="ur"] .ds-todo-warn{border-right-color:#E3A92B}
html[lang="ur"] .ds-todo-bad{border-right-color:#D2503A}
html[lang="ur"] .ds-todo-info{border-right-color:#3E8FBF}
html[lang="ur"] .ds-timeline{padding-left:0;padding-right:8px}


/* ===== v1.5 : dashboard hub, withdrawal warning, theme page ===== */
.ds-hub { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.ds-hub-card { position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 16px 14px; border-radius:20px; color:#fff;
  overflow:hidden; box-shadow:var(--ds-shadow); min-height:150px; transition:transform .15s var(--ds-ease), box-shadow .15s var(--ds-ease); }
.ds-hub-card:hover { transform:translateY(-3px); box-shadow:var(--ds-shadow-lg); color:#fff; }
.ds-hub-card > .bi { font-size:2.6rem; opacity:.9; }
.ds-hub-card::after { content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.14); }
.ds-hub-title { font-weight:700; font-size:1.1rem; line-height:1.3; }
.ds-hub-title small { display:block; font-weight:500; opacity:.9; }
.ds-hub-desc { font-size:.82rem; opacity:.92; flex:1; }
.ds-hub-go { font-weight:700; font-size:.85rem; }
.ds-hub-card.c-green { background:linear-gradient(135deg,var(--ds-primary),var(--ds-primary-dark)); }
.ds-hub-card.c-blue { background:linear-gradient(135deg,#3E8FBF,#2A628A); }
.ds-hub-card.c-orange { background:linear-gradient(135deg,#E3902B,#B8680F); }
.ds-hub-card.c-purple { background:linear-gradient(135deg,#7B5EC9,#5A3FA0); }
.ds-hub-card.c-teal { background:linear-gradient(135deg,#3FA7A0,#2A7873); }
.ds-hub-card.c-pink { background:linear-gradient(135deg,#CF5C8F,#A13A69); }
.ds-hub-card.c-slate { background:linear-gradient(135deg,#566972,#36454c); }

.ds-wd-banner { background:#FDECEA; border:2px solid #E0574B; color:#8A1C14; border-radius:var(--ds-radius); padding:14px 16px; }
[data-theme="dark"] .ds-wd-banner { background:#3A1714; color:#FFB4AB; }
.ds-wd-row { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:8px 0; border-top:1px dashed rgba(224,87,75,.4); }
.ds-wd-box { background:#FFF7E6; border:1px solid #F0C36D; border-radius:var(--ds-radius); padding:14px; }
[data-theme="dark"] .ds-wd-box { background:#2E2614; border-color:#6b5524; }
.ds-wd-flag { display:inline-flex; align-items:center; gap:6px; background:#E0574B; color:#fff; border-radius:999px; padding:3px 10px; font-size:.78rem; font-weight:700; white-space:nowrap; }
tr.ds-wd-hold > td { background:rgba(224,87,75,.09); }

.ds-presets { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.ds-preset { display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:10px 12px; border:2px solid var(--ds-border); border-radius:14px; background:var(--ds-card-bg); color:var(--ds-text); font-weight:600; }
.ds-preset:hover { border-color:var(--ds-primary); }
.ds-preset-sw { display:flex; border-radius:8px; overflow:hidden; width:100%; height:26px; }
.ds-preset-sw i { flex:1; }
.ds-theme-preview { --tp:#2e7d6b; --ta:#4fb0a5; --ts:#122320; display:flex; height:120px; border-radius:14px; overflow:hidden; border:1px solid var(--ds-border); }
.tp-side { width:28%; background:var(--ts); }
.tp-main { flex:1; padding:18px; display:flex; gap:12px; align-items:flex-start; background:var(--ds-bg); flex-wrap:wrap; }
.tp-btn { background:var(--tp); color:#fff; padding:8px 18px; border-radius:10px; font-weight:700; }
.tp-badge { background:var(--ta); color:#fff; padding:8px 14px; border-radius:10px; font-weight:600; }

/* ===== v1.5 : phone layout ===== */
.ds-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:1030; display:flex; background:var(--ds-card-bg);
  border-top:1px solid var(--ds-border); box-shadow:0 -4px 18px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom); }
.ds-bottom-nav a, .ds-bottom-nav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 7px; background:none; border:0;
  color:var(--ds-muted); font-size:.72rem; font-weight:600; min-height:58px; justify-content:center; }
.ds-bottom-nav .bi { font-size:1.4rem; }
.ds-bottom-nav .active { color:var(--ds-primary); }
.ds-bottom-nav .active .bi { transform:translateY(-1px) scale(1.08); }

#dsOfflineBar { position:fixed; left:0; right:0; top:0; z-index:2000; display:none; align-items:center; gap:10px; padding:9px 14px; font-weight:600; font-size:.9rem; color:#fff; }
#dsOfflineBar.off,#dsOfflineBar.sync,#dsOfflineBar.warn { display:flex; }
#dsOfflineBar.off { background:#B3261E; } #dsOfflineBar.sync { background:#1F6FB2; } #dsOfflineBar.warn { background:#B8680F; }
#dsOfflineBar span { flex:1; } #dsOfflineBar button,#dsOfflineBar a { background:#fff; color:#222; border:0; border-radius:8px; padding:5px 12px; font-weight:700; }
body.ds-has-offbar { padding-top:42px; }
.ds-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:2100; max-width:92vw; padding:12px 18px; border-radius:14px;
  background:#1B7F5C; color:#fff; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.25); transition:opacity .4s; }
.ds-toast.bad { background:#B3261E; } .ds-toast.out { opacity:0; }

@media (max-width: 991.98px) {
  body { padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .ds-sidebar { width:min(86vw,300px); box-shadow:0 0 40px rgba(0,0,0,.4); top:0; bottom:0; left:0; }
  .ds-sidebar.open ~ .ds-main::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:39; }
  .ds-topbar { gap:6px; }
  .ds-topbar .btn { min-height:2.4rem; }
}
@media (max-width: 575.98px) {
  html { scroll-padding-top:70px; }
  .ds-content { padding:12px 12px 24px; }
  h3 { font-size:1.35rem; } h4 { font-size:1.2rem; }
  .form-control, .form-select { font-size:max(16px,1rem); min-height:3rem; }
  .btn { min-height:2.9rem; }
  .btn-sm { min-height:2.5rem; padding-inline:.9rem; }
  .ds-btn-block-sm { width:100%; }
  .ds-card { padding:14px; border-radius:16px; }
  .ds-stat { padding:14px 12px; } .ds-stat .ds-stat-value { font-size:1.3rem; }
  .ds-hub { grid-template-columns:1fr 1fr; gap:10px; } .ds-hub-card { min-height:130px; padding:14px 12px; }
  .ds-wd-row .badge { margin-inline-start:0 !important; }

  /* modals become full-screen sheets */
  .modal-dialog { margin:0; max-width:100%; min-height:100%; }
  .modal-content { min-height:100vh; border-radius:0; border:0; }
  .modal-body { overflow-y:auto; }

  /* tables turn into easy cards: each row is a card, each cell shows its label */
  .table-responsive { overflow:visible; }
  table.ds-table, table.ds-table tbody, table.ds-table tr, table.ds-table td { display:block; width:100%; }
  table.ds-table thead { position:absolute; left:-9999px; top:-9999px; }
  table.ds-table tr { border:1px solid var(--ds-border); border-radius:14px; margin-bottom:10px; padding:6px 12px; background:var(--ds-card-bg); }
  table.ds-table td { display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; border-bottom:1px dashed var(--ds-border); padding:9px 0 !important; text-align:right; width:100% !important; }
  table.ds-table td:last-child { border-bottom:0; }
  table.ds-table td[data-label]::before { content:attr(data-label); font-weight:600; color:var(--ds-muted); text-align:left; flex:0 0 38%; font-size:.85rem; }
  table.ds-table td[colspan] { display:block; text-align:center !important; }
  table.ds-table td input.form-control, table.ds-table td .form-select { max-width:60%; }
  html[lang="ur"] table.ds-table td { text-align:left; }
  html[lang="ur"] table.ds-table td[data-label]::before { text-align:right; }
}

/* ===== v1.6 : login, work-area chooser, switcher, steps ===== */
.ds-login-body { background:var(--ds-bg); }
.ds-login { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh; }
.ds-login-side { background:linear-gradient(150deg,var(--ds-primary) 0%,var(--ds-primary-dark) 55%,#0b1d19 100%); color:#fff; padding:48px 56px; display:flex; flex-direction:column; justify-content:center; gap:18px; position:relative; overflow:hidden; }
.ds-login-side::after { content:"🐄"; position:absolute; right:-30px; bottom:-40px; font-size:240px; opacity:.1; }
.ds-login-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; position:absolute; top:32px; left:56px; }
.ds-login-side h1 { font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:800; line-height:1.15; margin:0; max-width:520px; }
.ds-login-side p { font-size:1.1rem; opacity:.9; max-width:480px; margin:0; }
.ds-login-chips { display:flex; flex-wrap:wrap; gap:10px; max-width:520px; }
.ds-login-chips span { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:8px 14px; border-radius:999px; font-weight:600; font-size:.95rem; }
.ds-login-main { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; position:relative; }
.ds-login-lang { position:absolute; top:20px; right:20px; }
.ds-login-card { width:100%; max-width:430px; }
@media (max-width: 860px) {
  .ds-login { grid-template-columns:1fr; }
  .ds-login-side { padding:72px 24px 28px; min-height:0; gap:10px; }
  .ds-login-side p, .ds-login-chips { display:none; }
  .ds-login-brand { left:24px; top:22px; }
  .ds-login-main { padding:24px 18px 32px; align-items:stretch; }
  .ds-login-card { max-width:none; }
}
html[dir="rtl"] .ds-login-brand { left:auto; right:56px; }
html[dir="rtl"] .ds-login-lang { right:auto; left:20px; }

.ds-ws-page { background:linear-gradient(160deg,var(--ds-primary-dark),#0d2a4a 70%); min-height:100vh; color:#fff; }
.ds-ws-top { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; }
.ds-ws-wrap { max-width:1180px; margin:0 auto; padding:12px 20px 60px; }
.ds-ws-sub { opacity:.85; font-size:1.1rem; }
.ds-ws-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; }
.ds-ws-tile { position:relative; display:flex; flex-direction:column; background:#F8F8F8; color:#222; border:5px solid rgba(255,255,255,.55); border-radius:6px; overflow:hidden; min-height:380px; text-decoration:none; transition:transform .18s var(--ds-ease), box-shadow .18s var(--ds-ease); }
.ds-ws-tile:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.35); color:#222; }
.ds-ws-tile-head { padding:34px 16px 0; text-align:center; position:relative; z-index:2; }
.ds-ws-tile-title { color:#1CA0E0; font-weight:800; text-transform:uppercase; letter-spacing:.3px; font-size:1.15rem; line-height:1.45; }
.ds-ws-tile-for { color:#888; font-family:Georgia,serif; margin-top:6px; }
.ds-ws-tile-art { position:absolute; left:0; right:0; bottom:0; height:52%; clip-path:polygon(0 24%,100% 0,100% 100%,0 100%); background-size:cover; background-position:center; display:flex; align-items:flex-end; justify-content:center; background-color:var(--ds-primary); }
.ds-ws-tile-art span { font-size:5.2rem; margin-bottom:22px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.ds-ws-tile.c-green .ds-ws-tile-art { background-image:linear-gradient(135deg,var(--ds-primary),var(--ds-primary-dark)); }
.ds-ws-tile.c-blue .ds-ws-tile-art { background-image:linear-gradient(135deg,#59B7F0,#2A628A); }
.ds-ws-tile.c-orange .ds-ws-tile-art { background-image:linear-gradient(135deg,#F2A03A,#C3680F); }
.ds-ws-tile.c-pink .ds-ws-tile-art { background-image:linear-gradient(135deg,#E26FA0,#A13A69); }
.ds-ws-tile.c-purple .ds-ws-tile-art { background-image:linear-gradient(135deg,#9C82E0,#5A3FA0); }
.ds-ws-tile.c-teal .ds-ws-tile-art { background-image:linear-gradient(135deg,#4DC0B8,#2A7873); }
.ds-ws-tile.c-gold .ds-ws-tile-art { background-image:linear-gradient(135deg,#E8BE4E,#B58412); }
.ds-ws-tile.c-slate .ds-ws-tile-art { background-image:linear-gradient(135deg,#7C909A,#36454c); }
.ds-ws-tile.c-indigo .ds-ws-tile-art { background-image:linear-gradient(135deg,#6C7BE0,#3A459E); }
.ds-ws-tile-view { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; color:#fff; border:2px solid #fff; padding:7px 22px; font-weight:700; letter-spacing:2px; font-family:Georgia,serif; background:rgba(0,0,0,.18); }
.ds-ws-tile:hover .ds-ws-tile-view { background:#1CA0E0; border-color:#1CA0E0; }
.ds-ws-auto { display:flex; gap:10px; align-items:center; justify-content:center; margin-top:30px; font-size:1.05rem; cursor:pointer; }
.ds-ws-auto input { width:22px; height:22px; }
@media (max-width:575.98px) {
  .ds-ws-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .ds-ws-tile { min-height:270px; border-width:3px; } .ds-ws-tile-head { padding-top:20px; } .ds-ws-tile-title { font-size:.88rem; }
  .ds-ws-tile-art span { font-size:3.4rem; margin-bottom:14px; } .ds-ws-tile-view { padding:5px 14px; bottom:12px; font-size:.8rem; }
}

.ds-ws-card { display:flex; align-items:center; gap:10px; margin:6px 4px 14px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); color:#fff; }
.ds-ws-emoji { font-size:1.8rem; line-height:1; }
.ds-ws-name { font-weight:700; font-size:.95rem; line-height:1.2; }
.ds-ws-for { font-size:.74rem; opacity:.75; }
.ds-ws-switch { color:#fff; background:rgba(255,255,255,.16); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.ds-ws-switch:hover { background:rgba(255,255,255,.3); color:#fff; }
.ds-nav-all { display:flex; gap:8px; align-items:center; margin:18px 4px 6px; padding:10px 12px; border-radius:12px; border:1px dashed rgba(255,255,255,.3); color:var(--ds-sidebar-text); font-weight:600; font-size:.9rem; }
.ds-nav-all:hover { background:rgba(255,255,255,.08); color:#fff; }
.ds-ws-pill { display:flex; align-items:center; gap:8px; background:var(--ds-card-bg); border:1px solid var(--ds-border); color:var(--ds-text); border-radius:999px; padding:6px 12px; font-weight:700; font-size:.9rem; box-shadow:var(--ds-shadow-sm); }
.ds-ws-pill-emoji { font-size:1.2rem; line-height:1; }
.ds-ws-menu { min-width:250px; border-radius:14px; padding:8px; }
.ds-ws-menu .dropdown-item { border-radius:10px; padding:10px 12px; font-weight:600; }
.ds-ws-menu .dropdown-item.active { background:var(--ds-primary); }

.ds-steps { background:var(--ds-card-bg); border:1px solid var(--ds-border); border-radius:var(--ds-radius); padding:16px 18px; box-shadow:var(--ds-shadow-sm); }
.ds-steps-title { font-weight:700; margin-bottom:10px; }
.ds-steps ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ds-steps li { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; flex-wrap:wrap; }
.ds-steps li.next { background:rgba(46,125,107,.1); outline:2px solid var(--ds-primary); }
.ds-steps li.done { opacity:.7; }
.ds-steps li.done .ds-step-text { text-decoration:line-through; }
.ds-step-no { width:32px; height:32px; border-radius:50%; background:var(--ds-border); color:var(--ds-text); font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 32px; }
.ds-steps li.next .ds-step-no { background:var(--ds-primary); color:#fff; }
.ds-steps li.done .ds-step-no { background:#1B7F5C; color:#fff; }
.ds-step-text { flex:1; font-weight:600; min-width:140px; }
.ds-hub-card.c-gold { background:linear-gradient(135deg,#E8BE4E,#B58412); } .ds-hub-card.c-indigo { background:linear-gradient(135deg,#6C7BE0,#3A459E); }
html[lang="ur"] .ds-ws-tile-for, html[lang="ur"] .ds-ws-tile-view { font-family:inherit; }

/* ===== v1.7 : one language at a time, simple switcher, one big next step ===== */
html:not([data-lang="mix"]) .ur { display:none !important; }
.ur { font-family:'Noto Naskh Arabic','Jameel Noori Nastaleeq',serif; }
html[data-lang="mix"] .ur { opacity:.9; }

.ds-langpick { display:flex; background:var(--ds-bg); border:1px solid var(--ds-border); border-radius:12px; padding:3px; gap:3px; }
.ds-langpick a { flex:1; text-align:center; padding:8px 10px; border-radius:9px; font-weight:700; font-size:.88rem; color:var(--ds-text); white-space:nowrap; }
.ds-langpick a.on { background:var(--ds-primary); color:#fff; }
.ds-sizepick { display:flex; gap:8px; }
.ds-sizepick button { flex:1; border:1px solid var(--ds-border); background:var(--ds-card-bg); color:var(--ds-text); border-radius:10px; padding:6px 0; font-weight:800; }
html[data-fs="1"] .ds-sizepick [data-fs-set="1"], html[data-fs="2"] .ds-sizepick [data-fs-set="2"], html[data-fs="3"] .ds-sizepick [data-fs-set="3"] { background:var(--ds-primary); color:#fff; border-color:var(--ds-primary); }
.ds-display-menu { min-width:280px; border-radius:16px; }
.ds-theme-toggle { display:none; }

/* one-tap area switcher */
.ds-areas { display:flex; gap:10px; overflow-x:auto; padding:10px 16px 12px; background:var(--ds-card-bg); border-bottom:1px solid var(--ds-border); scrollbar-width:none; -webkit-overflow-scrolling:touch; position:sticky; top:0; z-index:30; }
.ds-areas::-webkit-scrollbar { display:none; }
.ds-area { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:9px 16px 9px 10px; border-radius:999px; background:var(--ds-bg); border:2px solid transparent; color:var(--ds-text); font-weight:700; font-size:.95rem; white-space:nowrap; transition:transform .12s; }
.ds-area:hover { transform:translateY(-1px); color:var(--ds-text); }
.ds-area-ico { width:34px; height:34px; border-radius:50%; background:color-mix(in srgb,var(--a) 18%,#fff); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.ds-area.on { background:var(--a); color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--a) 45%,transparent); }
.ds-area.on .ds-area-ico { background:rgba(255,255,255,.25); }
.ds-area.on:hover { color:#fff; }
html[data-theme="dark"] .ds-area-ico { background:color-mix(in srgb,var(--a) 30%,#1b2426); }
.ds-topbar { position:static; }
@media (max-width:575.98px) { .ds-areas { padding:8px 10px 10px; gap:8px; } .ds-area { padding:7px 12px 7px 7px; font-size:.88rem; } .ds-area-ico { width:30px; height:30px; } }

/* the one big next step */
.ds-next { position:relative; background:linear-gradient(135deg,var(--ds-primary),var(--ds-primary-dark)); color:#fff; border-radius:24px; padding:22px 24px 18px; box-shadow:var(--ds-glow); overflow:hidden; }
.ds-next::after { content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.1); }
.ds-next-tag { display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:1.5px; background:rgba(255,255,255,.2); padding:4px 12px; border-radius:999px; margin-bottom:10px; }
.ds-next-tag.ds-next-ok { background:rgba(255,255,255,.28); }
.ds-next-text { font-size:clamp(1.35rem,3.4vw,1.9rem); font-weight:800; line-height:1.25; max-width:640px; position:relative; z-index:1; }
.ds-next-btn { position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; margin-top:16px; background:#fff; color:var(--ds-primary-dark); font-weight:800; font-size:1.2rem; padding:15px 30px; border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.ds-next-btn:hover { color:var(--ds-primary-dark); transform:translateY(-2px); }
.ds-next-dots { display:flex; gap:6px; margin-top:16px; position:relative; z-index:1; }
.ds-next-dots i { width:26px; height:6px; border-radius:6px; background:rgba(255,255,255,.3); }
.ds-next-dots i.d { background:#fff; } .ds-next-dots i.n { background:rgba(255,255,255,.75); }
.ds-next-all { margin-top:10px; position:relative; z-index:1; }
.ds-next-all summary { cursor:pointer; font-weight:600; font-size:.88rem; opacity:.9; list-style:none; }
.ds-next-all summary::before { content:"▸ "; }
.ds-next-all[open] summary::before { content:"▾ "; }
.ds-next-all ol { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:6px; }
.ds-next-all li { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.12); padding:8px 10px; border-radius:12px; flex-wrap:wrap; }
.ds-next-all li.next { background:rgba(255,255,255,.28); }
.ds-next-all li.done .ds-step-text { text-decoration:line-through; opacity:.75; }
.ds-next-all .ds-step-no { background:rgba(255,255,255,.25); color:#fff; }
.ds-next-all .btn-ds-outline { background:#fff; border-color:#fff; color:var(--ds-primary-dark); }

/* folded details */
.ds-more { margin-bottom:24px; }
.ds-more > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border-radius:16px; background:var(--ds-card-bg); border:2px dashed var(--ds-border); font-weight:700; color:var(--ds-primary); }
.ds-more > summary::-webkit-details-marker { display:none; }
.ds-more[open] > summary .bi { transform:rotate(180deg); }
.ds-more[open] > summary span::after { content:" — tap to hide"; font-weight:500; color:var(--ds-muted); }
.ds-more-body { padding-top:16px; }

.ds-help-list { font-size:1.1rem; line-height:1.7; padding-inline-start:1.3rem; }
.ds-help-list li { margin-bottom:6px; font-weight:600; }

/* calmer sidebar */
.ds-sidebar { padding:16px 12px 24px; }
.ds-nav-link { padding:12px 14px !important; font-size:.98rem !important; border-radius:14px !important; margin-bottom:4px; gap:12px; }
.ds-nav-link .bi { font-size:1.25rem; width:1.5rem; text-align:center; }
.ds-nav-link.active { background:var(--ds-primary) !important; color:#fff !important; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.ds-ws-card { background:rgba(255,255,255,.08); border:0; margin:10px 2px 16px; padding:12px 14px; }
.ds-ws-emoji { font-size:2rem; }
.ds-ws-name { font-size:1.02rem; }

/* login slider */
.ds-slider { width:100%; max-width:480px; margin-top:20px; }
.ds-slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:28px; }
.ds-slides::-webkit-scrollbar { display:none; }
.ds-slide { flex:0 0 100%; scroll-snap-align:center; background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 55%,#000)); border-radius:28px; padding:30px 28px 28px; min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.25); }
.ds-slide-art { position:absolute; top:14px; right:20px; font-size:6.5rem; filter:drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.ds-slide-title { font-size:1.9rem; font-weight:800; }
.ds-slide-text { font-size:1.08rem; opacity:.95; max-width:300px; margin-top:4px; }
.ds-dots { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.ds-dots button { width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.4); padding:0; transition:width .2s; }
.ds-dots button.on { width:28px; border-radius:6px; background:#fff; }
.ds-login-side h1 { margin-top:10px; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.ds-login-side::after { display:none; }
.ds-langpick-light { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); }
.ds-langpick-light a { color:#fff; } .ds-langpick-light a.on { background:#fff; color:var(--ds-primary-dark); }
@media (max-width:860px) { .ds-slider { margin-top:6px; } .ds-slide { min-height:170px; padding:18px 18px 16px; border-radius:22px; } .ds-slide-art { font-size:4rem; top:10px; right:12px; } .ds-slide-title { font-size:1.35rem; } .ds-slide-text { font-size:.95rem; } .ds-login-side h1 { display:none; } .ds-login-side p { display:none; } }
html[dir="rtl"] .ds-slide-art { right:auto; left:20px; }
html[lang="ur"] .ds-more[open] > summary span::after { content:" — چھپانے کے لیے دبائیں"; }
html[lang="ur"] .ds-next-all summary::before { content:"◂ "; } html[lang="ur"] .ds-next-all[open] summary::before { content:"▾ "; }

/* v1.7.1 responsive polish */
@media (max-width:575.98px) {
  .ds-next { padding:18px 16px 14px; border-radius:20px; }
  .ds-next-btn { width:100%; justify-content:center; font-size:1.15rem; padding:16px; }
  .ds-stat .ds-stat-value { font-size:1.2rem; word-break:break-word; }
  .ds-topbar .btn { padding-inline:.6rem; }
  .ds-display-menu { min-width:min(92vw,300px); }
  .ds-langpick a { font-size:.8rem; padding:8px 6px; }
  h3.fw-bold { font-size:1.25rem; }
}
@media (min-width:992px) { .ds-areas { padding-inline:32px; } .ds-content { max-width:1400px; } }
.ds-areas { mask-image:linear-gradient(90deg,#000 92%,transparent); }
html[dir="rtl"] .ds-areas { mask-image:linear-gradient(270deg,#000 92%,transparent); }
img, canvas, video { max-width:100%; }
.table-responsive { -webkit-overflow-scrolling:touch; }