/* ============================================================
   R51 — Vaidkhoj SKEUOMORPHIC THEME (poore app par, sabse aakhir me load)
   • Medical blue / teal rang
   • Cards = soft 3D (ubhre hue, mulayam shadow)
   • Buttons = chamakdaar 3D (gloss + neeche ka kinara, dabane par andar jaata hai)
   • Inputs = andar dabe hue (inset)
   • Dark mode: theme.js poora page ulta (invert) karta hai — yahan shadow ke
     rang badal dete hain aur rangeen cheezen (header, buttons) wapas seedhi.
   Har selector "html ..." se shuru — taaki baad me JS se aane wali CSS se na hare.
   ============================================================ */

html:root {
    --sk-primary: #0a7ea4;
    --sk-primary-dark: #075e7d;
    --sk-teal: #13a9b5;
    --sk-navy: #0b3a55;
    --sk-text: #16324a;
    --sk-muted: #5b7286;
    --sk-bg: #e3ebf0;
    --sk-card1: #fbfdfe;
    --sk-card2: #ecf2f6;
    --sk-lo: rgba(132, 156, 177, 0.5);
    --sk-hi: rgba(255, 255, 255, 0.96);
    --sk-edge: rgba(176, 195, 209, 0.75);
    --sk-well1: #e1e9ef;
    --sk-well2: #f4f7fa;
    --sk-well-line: #bfcdd7;
    --sk-raise: 6px 6px 14px var(--sk-lo), -5px -5px 12px var(--sk-hi), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --sk-raise-sm: 3px 3px 8px var(--sk-lo), -3px -3px 7px var(--sk-hi), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --sk-press: inset 3px 3px 7px var(--sk-lo), inset -3px -3px 7px var(--sk-hi);
    --sk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .16 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

    /* purane naam bhi naye rang par */
    --primary: #0a7ea4;
    --primary-dark: #075e7d;
    --accent: #13a9b5;
    --background: #e3ebf0;
    --surface: #f7fafc;
    --text: #16324a;
    --muted: #5b7286;
    --border: #d1dde5;
    --success: #13804a;
    --danger: #c62f3f;
    --shadow: 6px 6px 14px rgba(132, 156, 177, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.96);
    background: #dfe8ee;
}

/* dark mode: page ulta hota hai — shadow (gehra) ko safed likho to ulat kar gehra dikhega */
html.vk-dark:root {
    --sk-lo: rgba(255, 255, 255, 0.85);
    --sk-hi: rgba(120, 140, 160, 0.35);
    --sk-edge: rgba(255, 255, 255, 0.6);
}

/* ---------- BODY: halka kapde/kaagaz jaisa texture ---------- */
html body {
    font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", Arial, sans-serif;
    color: var(--sk-text);
    background-color: var(--sk-bg);
    background-image: var(--sk-noise), radial-gradient(900px 420px at 50% -120px, #f6fafc 0%, rgba(246, 250, 252, 0) 70%), linear-gradient(180deg, #e8eff3 0%, #dce6ec 100%);
    -webkit-font-smoothing: antialiased;
}

/* ---------- letterpress (kaagaz par chhapa) headings ---------- */
html .page-title,
html .panel h2,
html .section-heading h2,
html .greeting h1,
html .chats-top h1,
html .quick-links > h2 {
    color: var(--sk-navy);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
html .page-title { font-size: 25px; letter-spacing: -0.3px; }
html .page-subtitle, html .hint { color: var(--sk-muted); }

/* ============================================================
   HEADER — chamakdaar neela bar (purane iPhone jaisa)
   ============================================================ */
html .header,
html .topbar,
html .ch-head {
    background: linear-gradient(180deg, #34b6dc 0%, #1393bf 48%, #0a82ad 52%, #087199 100%);
    border-bottom: 1px solid #05506e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 10px rgba(5, 60, 85, 0.3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
}
html .header .brand,
html .topbar .brand {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 45, 66, 0.55);
}
html .header .brand-dot,
html .topbar .brand span { color: #f0fdff; }
html .header .brand-icon,
html .topbar .brand-icon {
    background: linear-gradient(180deg, #ffffff 0%, #eaf8fc 50%, #d3eef7 51%, #e9f7fb 100%);
    color: var(--sk-primary);
    border: 1px solid rgba(0, 60, 85, 0.45);
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0, 40, 60, 0.35);
    text-shadow: 0 1px 0 #fff;
}
html .header .portal-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 -1px 0 rgba(0, 45, 66, 0.4);
}
/* "← Profile" = header ka 3D back button */
html .header .back-link,
html .topbar .back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 13px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(0, 40, 60, 0.08) 51%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(0, 45, 66, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.5);
    white-space: nowrap;
}
html .header .back-link:active,
html .topbar .back-link:active { box-shadow: inset 0 2px 5px rgba(0, 30, 45, 0.45); }

/* header ke gol buttons: profile / chat / bell — safed moti jaise */
html .header .profile-button,
html .header .vk-chat-btn,
html .header .bell-button,
html .topbar .profile-button,
html .topbar .bell-button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(0, 55, 80, 0.55);
    background-color: #e6f5fa;
    background-image: linear-gradient(180deg, #ffffff 0%, #e9f6fb 50%, #d2ebf4 51%, #e8f5fa 100%);
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0, 40, 60, 0.38);
    color: var(--sk-primary);
}
html .header .profile-button:active,
html .header .vk-chat-btn:active,
html .header .bell-button:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 40, 60, 0.35); }

/* ============================================================
   CARDS — soft 3D (ubhre hue)
   ============================================================ */
html .panel,
html .item-card,
html .doctor-card,
html .stat-card,
html .address-card,
html .sos-card:not(.main),
html .appointment-card,
html .service-card,
html .greeting,
html .vk-info,
html .acc-box,
html .faq-wrap {
    background: linear-gradient(160deg, var(--sk-card1) 0%, var(--sk-card2) 100%);
    border-top-color: rgba(255, 255, 255, 0.95);
    border-right-color: var(--sk-edge);
    border-bottom-color: var(--sk-edge);
    box-shadow: var(--sk-raise);
}
html .panel { border-radius: 22px; }
html .item-card, html .doctor-card, html .address-card { border-radius: 18px; }
html .panel .item-card, html .panel .address-card, html .panel .acc-box, html .panel .vk-info { box-shadow: var(--sk-raise-sm); }
html .panel h2 { font-size: 17.5px; }
html .item-card h3, html .doctor-info h3 { color: var(--sk-navy); }

/* empty state = andar dabi hui jagah */
html .empty-state {
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--sk-well1), var(--sk-well2));
    box-shadow: var(--sk-press);
    color: var(--sk-muted);
}

/* avatar = ubhra hua gol */
html .doctor-avatar,
html .chat-av,
html .avatar-sm {
    background-color: #dcecf3;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(40, 70, 95, 0.3), inset 0 -2px 4px rgba(0, 60, 90, 0.12);
    color: var(--sk-primary);
}

/* ============================================================
   INPUTS — andar dabe hue
   ============================================================ */
html :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"])),
html :where(select, textarea) {
    background: linear-gradient(180deg, var(--sk-well1) 0%, var(--sk-well2) 100%);
    border: 1px solid var(--sk-well-line);
    border-radius: 12px;
    color: var(--sk-text);
    box-shadow: inset 0 2px 4px rgba(80, 110, 135, 0.22), 0 1px 0 rgba(255, 255, 255, 0.9);
}
html :where(input, select, textarea):focus {
    border-color: var(--sk-primary);
    box-shadow: inset 0 2px 4px rgba(80, 110, 135, 0.18), 0 0 0 3px rgba(10, 126, 164, 0.18);
    outline: none;
}
html :where(input, select, textarea):disabled { opacity: 0.75; }
html input[type="checkbox"], html input[type="radio"] { accent-color: var(--sk-primary); }

/* search box = ek gehra khaancha, andar input saaf */
html .search-box,
html .search-bar,
html .chats-search,
html .ch-box {
    background: linear-gradient(180deg, var(--sk-well1) 0%, var(--sk-well2) 100%);
    border: 1px solid var(--sk-well-line);
    box-shadow: inset 0 2px 5px rgba(80, 110, 135, 0.25), 0 1px 0 rgba(255, 255, 255, 0.9);
}
html .search-box:focus-within,
html .search-bar:focus-within,
html .chats-search:focus-within,
html .ch-box:focus-within {
    border-color: var(--sk-primary);
    box-shadow: inset 0 2px 5px rgba(80, 110, 135, 0.2), 0 0 0 3px rgba(10, 126, 164, 0.16);
}
html .search-box input, html .search-bar input, html .chats-search input, html .ch-box textarea {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* OTP ke khaane */
html .otp-box {
    background: linear-gradient(180deg, var(--sk-well1), var(--sk-well2));
    border: 1px solid var(--sk-well-line);
    box-shadow: inset 0 2px 5px rgba(80, 110, 135, 0.28), 0 1px 0 #fff;
    color: var(--sk-navy);
}
html .otp-box:focus { border-color: var(--sk-primary); box-shadow: inset 0 2px 5px rgba(80, 110, 135, 0.2), 0 0 0 3px rgba(10, 126, 164, 0.2); }
html .otp-box.filled { border-color: #6fb9d2; background: linear-gradient(180deg, #e3f3f9, #f6fbfd); }

/* password strength = andar dabi patti */
html .strength-bar {
    background: linear-gradient(180deg, #d5dfe6, #e8eef2);
    box-shadow: inset 0 1px 3px rgba(60, 85, 105, 0.35);
}

/* ============================================================
   BUTTONS — chamakdaar 3D
   ============================================================ */
html .primary-button,
html button.login-btn,
html .login-box > form > button,
html #registerForm > button,
html .forgot-box button:not(.resend-link):not(.otp-box),
html .adm-btn.primary,
html .ch-send,
html .visit-otp-btn {
    color: #fff;
    border: 1px solid #06668a;
    background: linear-gradient(180deg, #52d0ec 0%, #17a1ca 46%, #0b89b4 54%, #0a7aa2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 40, 60, 0.18), 0 3px 0 #05587a, 0 6px 12px rgba(5, 70, 100, 0.28);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.45);
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
html .primary-button,
html .secondary-button,
html .danger-button { min-height: 46px; margin-bottom: 3px; }

html .secondary-button,
html .adm-btn:not(.primary):not(.ghost):not(.danger):not(.ok) {
    color: var(--sk-text);
    border: 1px solid #b6c5cf;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f8 46%, #e2eaef 54%, #edf2f5 100%);
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b0bfca, 0 4px 9px rgba(70, 95, 115, 0.18);
    text-shadow: 0 1px 0 #fff;
    border-radius: 14px;
    font-weight: 800;
    transition: transform 0.08s, box-shadow 0.08s;
}

html .danger-button,
html .adm-btn.danger {
    color: #fff;
    border: 1px solid #9b1d2c;
    background: linear-gradient(180deg, #f47c86 0%, #dc4252 46%, #c72f40 54%, #b42535 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(80, 0, 10, 0.18), 0 3px 0 #821625, 0 6px 12px rgba(130, 22, 37, 0.25);
    text-shadow: 0 -1px 0 rgba(80, 0, 10, 0.45);
    border-radius: 14px;
    font-weight: 800;
}
html .adm-btn.ok {
    color: #fff;
    border: 1px solid #0d6b3a;
    background: linear-gradient(180deg, #5fd892 0%, #22a95c 46%, #179149 54%, #13803f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #0b5a2c, 0 4px 9px rgba(11, 90, 44, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 50, 20, 0.4);
}

/* dabane par button andar jaata hai */
html .primary-button:active,
html button.login-btn:active,
html #registerForm > button:active,
html .forgot-box button:not(.resend-link):active,
html .adm-btn.primary:active,
html .visit-otp-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 2px 6px rgba(0, 40, 60, 0.35), 0 1px 0 #05587a;
}
html .secondary-button:active,
html .adm-btn:not(.primary):not(.ghost):active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 5px rgba(70, 95, 115, 0.3), 0 0 0 #b0bfca;
}
html .danger-button:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(80, 0, 10, 0.4), 0 1px 0 #821625; }
html .primary-button:disabled,
html .secondary-button:disabled,
html .danger-button:disabled,
html button.login-btn:disabled { filter: saturate(0.45); opacity: 0.65; transform: none; cursor: not-allowed; }

/* chhote text buttons = ubhri goli (pill) */
html .text-button,
html .small-action,
html .vk-tools button,
html .vk-tools a,
html .ch-more,
html .rx-suggest button,
html .ch-quick button {
    color: var(--sk-primary);
    border: 1px solid #c3d2dc;
    background: linear-gradient(180deg, #ffffff 0%, #eaf1f5 100%);
    box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b9c8d2, 0 2px 5px rgba(70, 95, 115, 0.15);
    text-shadow: 0 1px 0 #fff;
}
html .text-button:active,
html .small-action:active,
html .vk-tools button:active,
html .ch-quick button:active { box-shadow: inset 0 2px 4px rgba(70, 95, 115, 0.3); transform: translateY(1px); }
html .vk-tools .vk-danger { color: #b42535; }

/* chips (filter) */
html .chip {
    color: var(--sk-muted);
    border: 1px solid #c3d2dc;
    background: linear-gradient(180deg, #ffffff 0%, #e9f0f4 100%);
    box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b9c8d2, 0 2px 4px rgba(70, 95, 115, 0.14);
    text-shadow: 0 1px 0 #fff;
}
html .chip.active {
    color: #fff;
    border-color: #06668a;
    background: linear-gradient(180deg, #52d0ec 0%, #17a1ca 46%, #0b89b4 54%, #0a7aa2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 4px rgba(0, 40, 60, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.45);
}

/* badges = chhoti chamakdaar goliyan */
html .badge,
html .countdown,
html .vk-chip,
html .availability-chip,
html .vk-booked {
    border: 1px solid rgba(0, 40, 60, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(40, 70, 95, 0.15);
}
html .badge.confirmed { background: linear-gradient(180deg, #e9f9f0, #cdeedb); color: #13804a; }
html .badge.completed { background: linear-gradient(180deg, #f3f6f8, #dfe6eb); color: #4f6476; }
html .badge.cancelled { background: linear-gradient(180deg, #fff0f2, #f9d3d8); color: #b42535; }
html .badge.mode { background: linear-gradient(180deg, #ebf7fc, #cfe9f4); color: var(--sk-primary-dark); }

/* lal ginti (notification / chat) — iPhone wala chamakdaar badge */
html .bell-badge,
html .vk-badge,
html .chat-count,
html .ch-down span,
html .adm-side nav .cnt {
    background: radial-gradient(circle at 50% 25%, #ff8e8e 0%, #ef3b3b 45%, #c81e1e 100%);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(90, 0, 0, 0.4);
    text-shadow: 0 -1px 0 rgba(90, 0, 0, 0.4);
    color: #fff;
}
html .vk-badge, html .chat-count { background: radial-gradient(circle at 50% 25%, #8ef0b0 0%, #25b45c 50%, #158a42 100%); text-shadow: 0 -1px 0 rgba(0, 60, 25, 0.4); }

/* ============================================================
   SWITCH — asli on/off switch (dabi patti + chamakdaar goli)
   ============================================================ */
html .switch { width: 54px; height: 31px; }
html .switch .slider {
    background: linear-gradient(180deg, #c4ced6 0%, #e2e8ec 100%);
    border: 1px solid #a9b8c3;
    box-shadow: inset 0 2px 4px rgba(50, 70, 90, 0.35), 0 1px 0 #fff;
}
html .switch .slider::before {
    width: 27px;
    height: 27px;
    left: 1px;
    top: 1px;
    border: 1px solid #aebbc5;
    background: radial-gradient(circle at 50% 28%, #ffffff 0%, #f1f4f6 45%, #d3dbe1 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32), inset 0 -1px 1px rgba(0, 0, 0, 0.08);
}
html .switch input:checked + .slider {
    background: linear-gradient(180deg, #087aa0 0%, #19a9cf 55%, #41c4e3 100%);
    border-color: #06668a;
    box-shadow: inset 0 2px 5px rgba(0, 35, 55, 0.45), 0 1px 0 #fff;
}
html .switch input:checked + .slider::before { transform: translateX(23px); }
html .switch input:focus-visible + .slider { outline: 3px solid rgba(10, 126, 164, 0.4); outline-offset: 2px; }
html .switch input:disabled + .slider { opacity: 0.7; }

/* settings rows: beech me khudi hui line (engraved) */
html .setting-row {
    border-bottom: 1px solid rgba(150, 172, 188, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
html .setting-row:last-child { box-shadow: none; }
html .setting-row p { font-size: 14.5px; color: var(--sk-navy); }
html .setting-row small { font-size: 12px; }

/* ============================================================
   BOTTOM NAV — ubhri patti, chuna hua tab andar dabaa hua
   ============================================================ */
html .bottom-nav,
html .adm-bnav {
    background: linear-gradient(180deg, #f9fbfd 0%, #e2eaf0 100%);
    border-top: 1px solid #fff;
    box-shadow: 0 -1px 0 #bfcdd7, 0 -6px 18px rgba(70, 95, 115, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html .nav-item {
    border-radius: 16px;
    color: #5a6e80;
    text-shadow: 0 1px 0 #fff;
    margin: 0 3px;
}
html .nav-item span { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)); }
html .nav-item.active {
    color: var(--sk-primary);
    background: linear-gradient(180deg, #dbe5ec 0%, #eaf0f4 100%);
    box-shadow: inset 2px 2px 5px rgba(110, 135, 155, 0.45), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}
html .nav-item.active small { color: var(--sk-primary); }
html .nav-item:active { box-shadow: inset 2px 2px 5px rgba(110, 135, 155, 0.45); }

/* ============================================================
   HOME (patient)
   ============================================================ */
html .greeting { border-radius: 24px; }
html .greeting::before { color: rgba(10, 126, 164, 0.07); }
html .greeting::after { background: rgba(19, 169, 181, 0.08); }
html .eyebrow { color: var(--sk-primary); text-shadow: 0 1px 0 #fff; letter-spacing: 1.2px; }

/* emergency = lal chamakdaar plate */
html .emergency-card {
    background: var(--sk-noise), radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.28), transparent 38%), linear-gradient(180deg, #ef5b67 0%, #d43546 52%, #b8263a 100%);
    border: 1px solid #921c2c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 8px rgba(80, 0, 15, 0.25), 0 10px 22px rgba(150, 25, 40, 0.3);
    text-shadow: 0 -1px 0 rgba(80, 0, 15, 0.35);
}
html .emergency-icon {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px rgba(80, 0, 15, 0.3);
}
html .emergency-button {
    color: #b8263a;
    border: 1px solid #a01f30;
    background: linear-gradient(180deg, #ffffff 0%, #fff3f4 50%, #ffe0e3 51%, #fff0f1 100%);
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 #8a1726, 0 6px 12px rgba(80, 0, 15, 0.3);
    text-shadow: 0 1px 0 #fff;
}
html .emergency-button:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(80, 0, 15, 0.3), 0 1px 0 #8a1726; }

html .service-card { border-radius: 22px; }
html .service-card:active { box-shadow: var(--sk-press); transform: scale(0.99); }
html .service-title { color: var(--sk-navy); }
html .service-arrow {
    background: linear-gradient(180deg, #fff, #e6eef3);
    border: 1px solid #c8d6df;
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(70, 95, 115, 0.2);
    color: var(--sk-primary);
}
/* service icon = chamakdaar app-icon */
html .service-icon,
html .appointment-icon,
html .tip-icon {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: linear-gradient(180deg, #8fe3f4 0%, #2bb2d6 55%, #1497bf 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.14), 0 3px 7px rgba(20, 60, 85, 0.28);
}
html .service-icon::after,
html .appointment-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
    border-radius: inherit;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
    pointer-events: none;
}
html .service-icon.home-icon { background: linear-gradient(180deg, #8ff0e2 0%, #1fbfab 55%, #10a08f 100%); }
html .service-icon.doctor-icon { background: linear-gradient(180deg, #a9d6ff 0%, #3d93ea 55%, #2275cf 100%); }
html .service-icon.medicine-icon { background: linear-gradient(180deg, #b6f3b8 0%, #46c45a 55%, #2ea545 100%); }
html .service-icon.video-icon { background: linear-gradient(180deg, #d6c6ff 0%, #8c6cf0 55%, #6d4ed6 100%); }

/* health tip = peela notepad kaagaz */
html .health-tip {
    background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(170, 140, 60, 0.18) 25px 26px), linear-gradient(180deg, #fffbe3 0%, #fff4c2 100%);
    border: 1px solid #ecdc9a;
    border-top: 6px solid #f1c94e;
    box-shadow: 0 1px 1px rgba(120, 95, 20, 0.15), 4px 8px 14px rgba(120, 95, 20, 0.18);
}
html .health-tip h3 { color: #6b5208; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
html .health-tip p { color: #6f5c25; }

/* ============================================================
   DOCTOR portal
   ============================================================ */
html .stat-card { border-radius: 18px; }
html .stat-card .stat-value { color: var(--sk-primary); text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0, 60, 90, 0.08); }
html .stat-card .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff, #dcebf2);
    border: 1px solid #c6d6e0;
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(40, 70, 95, 0.2);
}
/* online / offline batti (LED) */
html .availability-dot {
    background: radial-gradient(circle at 40% 35%, #c9ffd8 0%, #2fd06a 40%, #12863e 100%);
    box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(47, 208, 106, 0.85), inset 0 -1px 2px rgba(0, 60, 20, 0.4);
}
html .availability-toggle.is-offline .availability-dot,
html .availability-toggle.is-busy .availability-dot {
    background: radial-gradient(circle at 40% 35%, #ffd2d2 0%, #ef4444 40%, #a51616 100%);
    box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(239, 68, 68, 0.6), inset 0 -1px 2px rgba(80, 0, 0, 0.4);
}
html .countdown { background: linear-gradient(180deg, #fff7e8, #ffe6bd); color: #9a4b05; }
html .countdown.urgent { background: linear-gradient(180deg, #fff0f2, #f9cfd5); color: #b42535; }

/* SOS cards */
html .sos-card.main {
    background: linear-gradient(180deg, #ef5b67 0%, #d43546 52%, #b8263a 100%);
    border: 1px solid #921c2c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #821625, 0 8px 16px rgba(130, 22, 37, 0.3);
    text-shadow: 0 -1px 0 rgba(80, 0, 15, 0.35);
}
html .sos-card:active { transform: translateY(2px); }
html .sos-button,
html .emergency-fab {
    background: radial-gradient(circle at 50% 30%, #ff8a93 0%, #e03445 55%, #b11f30 100%);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 #821625, 0 8px 18px rgba(130, 22, 37, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 -1px 0 rgba(80, 0, 15, 0.4);
}

/* live banner / visit OTP */
html .live-banner {
    background: linear-gradient(180deg, #2bb2d6 0%, #0b86b1 55%, #086c90 100%);
    border: 1px solid #05506e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(5, 60, 85, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.4);
}
html .visit-otp-show {
    background: linear-gradient(180deg, var(--sk-well1), var(--sk-well2));
    box-shadow: var(--sk-press);
    border: 1px solid var(--sk-well-line);
}

/* ============================================================
   PROFILE pages
   ============================================================ */
html .profile-hero {
    background: var(--sk-noise), radial-gradient(circle at 85% 0, rgba(255, 255, 255, 0.3), transparent 40%), linear-gradient(180deg, #3fc0e0 0%, #128fbb 50%, #0a789f 100%);
    border: 1px solid #05506e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 10px rgba(0, 40, 60, 0.2), 0 12px 26px rgba(5, 70, 100, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.45);
}
html .profile-hero p { color: #fff; }
html .footer-note { color: #5f7486; text-shadow: 0 1px 0 #fff; }
html .doctor-specialty { color: #0b7a86; }
html .rating { color: #a66300; }
html .avatar {
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 40, 60, 0.4), inset 0 -3px 8px rgba(0, 40, 60, 0.2);
}
/* list rows (My Activities / Account & Support) */
html .quick-links a,
html .quick-links .danger-row,
html .quick-links button {
    border-bottom: 1px solid rgba(150, 172, 188, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 0;
}
html .quick-links a:last-of-type, html .quick-links > :last-child { box-shadow: none; }
html .quick-links a:active, html .quick-links button:active { background: linear-gradient(180deg, #d8e5ec, #e6eef3); }
html .quick-links b { color: #9cb0bf; text-shadow: 0 1px 0 #fff; }
/* skeuo.js: emoji ko chamakdaar tile me rakhta hai */
html .sk-qi {
    position: relative;
    overflow: hidden;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    background: var(--qi, #1497bf);
    background: linear-gradient(180deg, color-mix(in srgb, var(--qi, #1497bf) 55%, #fff) 0%, var(--qi, #1497bf) 100%);
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 30, 50, 0.3);
    margin-right: 4px;
}

/* ============================================================
   NOTIFICATION center / bottom sheet / toast
   ============================================================ */
html .nc-panel,
html .vk-sheet {
    background: var(--sk-noise), linear-gradient(180deg, #f8fbfd 0%, #e8eff4 100%);
    border-top: 1px solid #fff;
    box-shadow: 0 -10px 30px rgba(10, 30, 50, 0.3), inset 0 1px 0 #fff;
}
html .nc-head h2, html .vk-sheet-head h3 { color: var(--sk-navy); text-shadow: 0 1px 0 #fff; }
html .nc-item { border-bottom: 1px solid rgba(150, 172, 188, 0.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
html .nc-item.unread { background: linear-gradient(90deg, rgba(10, 126, 164, 0.08), transparent); }
html .nc-icon {
    background: linear-gradient(180deg, #fff, #dfeaf1);
    border: 1px solid #c6d5df;
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(40, 70, 95, 0.2);
}
html .nc-readall, html .nc-close, html .vk-x {
    background: linear-gradient(180deg, #fff, #e4ecf1);
    border: 1px solid #c3d2dc;
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(70, 95, 115, 0.2);
    color: var(--sk-text);
}
html .vk-radio {
    background: linear-gradient(180deg, #fff, #eef3f6);
    border-color: #c8d6df;
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(70, 95, 115, 0.14);
}
html .vk-sheet input:not([type="checkbox"]):not([type="radio"]),
html .vk-sheet select,
html .vk-sheet textarea {
    background: linear-gradient(180deg, var(--sk-well1), var(--sk-well2));
    border: 1px solid var(--sk-well-line);
    box-shadow: inset 0 2px 4px rgba(80, 110, 135, 0.22), 0 1px 0 #fff;
}
html .vk-chat-menu { background: linear-gradient(180deg, #fbfdfe, #edf2f6); box-shadow: 0 12px 30px rgba(15, 35, 70, 0.25), inset 0 1px 0 #fff; }
html .vk-chat-menu button { background: transparent; }

html .toast {
    background: linear-gradient(180deg, rgba(40, 62, 82, 0.96) 0%, rgba(18, 36, 52, 0.97) 100%);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 30px rgba(0, 20, 40, 0.4);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* ============================================================
   CHAT
   ============================================================ */
html .ch-scroll {
    background-color: #e3ebf0;
    background-image: var(--sk-noise), linear-gradient(180deg, #e8eff3, #dde7ed);
    background-size: auto;
}
html body.chat-body { background: #e3ebf0; }
html .ch-msg {
    border: 1px solid #ccd8e0;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f6 100%);
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(40, 70, 95, 0.2);
}
html .ch-msg.me {
    border-color: #9fd486;
    background: linear-gradient(180deg, #e9fbdc 0%, #cdf0b4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(40, 90, 20, 0.22);
}
html .ch-msg.failed { background: linear-gradient(180deg, #fff3f5, #ffdfe4); border-color: #f1b5be; }
html .ch-day, html .ch-visit {
    background: linear-gradient(180deg, #f5f8fa, #dce5eb);
    border: 1px solid #c8d5de;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(40, 70, 95, 0.15);
    text-shadow: 0 1px 0 #fff;
}
html .ch-sys { background: linear-gradient(180deg, #fffbe6, #fff1bf); border: 1px solid #ecdc9a; }
html .ch-icon, html .ch-back {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(0, 45, 66, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.5);
}
html .ch-av { border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 40, 60, 0.35); }
html .ch-foot { background: linear-gradient(180deg, #f3f7f9, #dfe7ed); border-top: 1px solid #fff; box-shadow: 0 -1px 0 #bfcdd7; }
html .ch-send { border-radius: 50%; }
html .ch-down { background: linear-gradient(180deg, #fff, #e3ecf1); border: 1px solid #c3d2dc; }
html .chats-list {
    background: linear-gradient(160deg, var(--sk-card1), var(--sk-card2));
    border: 0;
    border-radius: 20px;
    margin: 8px 12px;
    overflow: hidden;
    box-shadow: var(--sk-raise);
}
html .chat-row { border-bottom: 1px solid rgba(150, 172, 188, 0.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
html .chat-row:active { background: linear-gradient(180deg, #d8e5ec, #e6eef3); }

/* ============================================================
   LOGIN / REGISTER / FORGOT — ab halka, kaagaz jaisa card
   ============================================================ */
html body:has(.login-container),
html body:has(.forgot-container) {
    color: var(--sk-text);
    background-color: #dfe8ee;
    background-image: var(--sk-noise), radial-gradient(700px 380px at 15% 0%, rgba(71, 198, 228, 0.28), transparent 70%), radial-gradient(700px 380px at 100% 100%, rgba(19, 169, 181, 0.22), transparent 70%), linear-gradient(180deg, #e9f0f4, #d9e4ea);
}
html .background .circle { opacity: 0.18; filter: blur(70px); }
html .login-box,
html .forgot-box {
    color: var(--sk-text);
    background: var(--sk-noise), linear-gradient(170deg, #fdfefe 0%, #edf3f6 100%);
    border: 1px solid #fff;
    border-bottom-color: #c6d4dd;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 10px 12px 28px rgba(90, 115, 135, 0.4), -8px -8px 20px rgba(255, 255, 255, 0.85), inset 0 1px 0 #fff;
}
html .login-box .logo,
html .forgot-box .logo {
    position: relative;
    overflow: hidden;
    border: 1px solid #06668a;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(180deg, #5ad3ee 0%, #17a1ca 50%, #0a7aa2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 8px rgba(0, 40, 60, 0.25), 0 6px 14px rgba(5, 70, 100, 0.35);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.45);
    animation: none;
}
html .login-box .logo::after,
html .forgot-box .logo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06));
    border-bottom-left-radius: 50% 22%;
    border-bottom-right-radius: 50% 22%;
}
html .login-box h1,
html .forgot-box h1 {
    color: var(--sk-navy);
    text-shadow: 0 1px 0 #fff;
    letter-spacing: 2px;
}
html .login-box h2, html .forgot-box h2 { color: var(--sk-navy); text-shadow: 0 1px 0 #fff; }
html .login-box .welcome,
html .login-box .subtitle,
html .forgot-box .subtitle,
html .login-box .options,
html .register,
html .back-login { color: var(--sk-muted); }
html .input-group label { color: var(--sk-primary-dark); text-shadow: 0 1px 0 #fff; letter-spacing: 0.8px; }
html .input-group input,
html .input-group select {
    color: var(--sk-text);
    background: linear-gradient(180deg, var(--sk-well1) 0%, var(--sk-well2) 100%);
    border: 1px solid var(--sk-well-line);
    box-shadow: inset 0 2px 4px rgba(80, 110, 135, 0.24), 0 1px 0 #fff;
}
html .input-group input::placeholder { color: #8a9cab; }
html .input-group input:focus,
html .input-group select:focus {
    background: linear-gradient(180deg, #e6f2f7 0%, #f7fbfd 100%);
    border-color: var(--sk-primary);
    box-shadow: inset 0 2px 4px rgba(80, 110, 135, 0.2), 0 0 0 3px rgba(10, 126, 164, 0.18);
}
html .input-group select option { background: #fff; color: var(--sk-text); }
html .password-box button { color: var(--sk-primary); background: transparent; border: 0; box-shadow: none; text-shadow: none; }
html .password-box button:hover { background: rgba(10, 126, 164, 0.08); }
html .login-box a, html .forgot-box a, html .register a, html .back-login a { color: var(--sk-primary); }
html .login-box a:hover, html .forgot-box a:hover { color: var(--sk-primary-dark); text-shadow: none; }
html .login-box .form-error, html .forgot-box .form-error { color: #c62f3f; }
html .login-box .form-success, html .forgot-box .form-success { color: #13804a; }
html .login-box .resend-link, html .forgot-box .resend-link { color: var(--sk-primary); background: none; border: 0; box-shadow: none; text-shadow: none; }
html .login-box::-webkit-scrollbar-thumb { background: #a9bccb; }

/* ============================================================
   ADMIN panel (vk-control)
   ============================================================ */
html .adm-side {
    background: var(--sk-noise), linear-gradient(180deg, #0f3550 0%, #0a2537 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06), 4px 0 14px rgba(0, 20, 35, 0.25);
}
html .adm-side nav a.on {
    background: linear-gradient(180deg, #3fc0e0 0%, #128fbb 50%, #0a789f 100%);
    border: 1px solid #05506e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 8px rgba(0, 0, 0, 0.35);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.5);
}
html .adm-side nav a .ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3); }
html .adm-brand::before {
    background: linear-gradient(180deg, #5ad3ee 0%, #17a1ca 50%, #0a7aa2 100%);
    border: 1px solid #06668a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 8px rgba(5, 70, 100, 0.35);
}
html .card {
    background: linear-gradient(160deg, var(--sk-card1) 0%, var(--sk-card2) 100%);
    border-color: rgba(255, 255, 255, 0.95) var(--sk-edge) var(--sk-edge) rgba(255, 255, 255, 0.95);
    box-shadow: var(--sk-raise-sm);
}
html .adm-top { background: linear-gradient(180deg, #fbfdfe, #e9f0f4); box-shadow: 0 1px 0 #c3d1da, 0 4px 10px rgba(70, 95, 115, 0.12); }
html .adm-login { background: var(--sk-noise), radial-gradient(900px 500px at 10% -10%, #1a9cc6 0, transparent 60%), radial-gradient(800px 500px at 110% 110%, #13a9b5 0, transparent 55%), #0a2537; }
html .adm-login-box { background: var(--sk-noise), linear-gradient(170deg, #fdfefe, #edf3f6); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 #fff; }
html .tabs button.on, html .tabs button[aria-selected="true"] { box-shadow: var(--sk-press); }

/* ============================================================
   SETTINGS — phone jaisa menu (skeuo.js banata hai)
   ============================================================ */
html body.sk-on main.page > section.panel { display: none; }
html body.sk-on.sk-sub main.page > section.panel.sk-show { display: block; animation: sk-in 0.26s ease both; }
html body.sk-on.sk-sub .page-title,
html body.sk-on.sk-sub .page-subtitle,
html body.sk-on.sk-sub .sk-menu { display: none; }
html body.sk-on:not(.sk-sub) .sk-subbar { display: none; }
html body.sk-on .sk-menu { animation: sk-back 0.24s ease both; }
html body.sk-on.sk-sub .sk-show > h2:first-child { display: none; }
@keyframes sk-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes sk-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

html .sk-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 4px 0 6px;
    border-radius: 20px;
    text-decoration: none;
    color: var(--sk-text);
    background: linear-gradient(160deg, var(--sk-card1), var(--sk-card2));
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-right-color: var(--sk-edge);
    border-bottom-color: var(--sk-edge);
    box-shadow: var(--sk-raise);
}
html .sk-profile:active { box-shadow: var(--sk-press); }
html .sk-av {
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #2fb4d8 0%, #0b86b1 50%, #075e7d 100%) center / cover no-repeat;
    border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(30, 60, 85, 0.35), inset 0 -3px 6px rgba(0, 40, 60, 0.2);
    text-shadow: 0 -1px 0 rgba(0, 40, 60, 0.4);
}
html .sk-av.has-photo { color: transparent; text-shadow: none; }
html .sk-pmid { flex: 1; min-width: 0; }
html .sk-pmid b { display: block; font-size: 18px; color: var(--sk-navy); text-shadow: 0 1px 0 #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .sk-pmid small { display: block; color: var(--sk-muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

html .sk-gtitle {
    margin: 20px 16px 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #6f8597;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
html .sk-group {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--sk-card1), var(--sk-card2));
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-right-color: var(--sk-edge);
    border-bottom-color: var(--sk-edge);
    box-shadow: var(--sk-raise);
}
html .sk-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sk-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
}
html .sk-row + .sk-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 59px;
    right: 0;
    height: 1px;
    background: rgba(150, 172, 188, 0.4);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
html .sk-row:active { background: linear-gradient(180deg, #d4e2ea 0%, #e4edf2 100%); box-shadow: inset 0 2px 5px rgba(90, 115, 135, 0.25); }
html .sk-row:focus-visible { outline: 3px solid rgba(10, 126, 164, 0.4); outline-offset: -3px; }
html .sk-ico {
    position: relative;
    overflow: hidden;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--c1, #5ac8fa) 0%, var(--c2, #0a84d6) 100%);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 30, 50, 0.3);
    font-size: 17px;
}
html .sk-ico::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08));
    border-bottom-left-radius: 50% 25%;
    border-bottom-right-radius: 50% 25%;
    pointer-events: none;
}
html .sk-ico svg {
    position: relative;
    z-index: 1;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.25));
}
html .sk-rtext { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--sk-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .sk-row.danger .sk-rtext { color: #c62f3f; }
html .sk-val { flex: none; max-width: 42%; color: var(--sk-muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .sk-val.sk-pill {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #2fae62 0%, #0f7a3c 100%);
    border: 1px solid #0b5e2e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    text-shadow: 0 -1px 0 rgba(0, 50, 20, 0.4);
}
html .sk-val.sk-pill.off { background: linear-gradient(180deg, #8d9daa 0%, #5d6d7a 100%); border-color: #4f5d68; }
html .sk-chev { flex: none; color: #9db0bf; font-size: 24px; line-height: 1; margin-top: -2px; text-shadow: 0 1px 0 #fff; }
html .sk-foot { text-align: center; color: #5f7486; font-size: 12px; margin: 22px 0 6px; text-shadow: 0 1px 0 #fff; }

/* andar ke page ka upar wala bar: "‹ Settings" + naam */
html .sk-subbar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
html .sk-backbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    min-height: 38px;
    padding: 0 14px 0 10px;
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    color: var(--sk-primary);
    border: 1px solid #b6c5cf;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f8 46%, #e2eaef 54%, #edf2f5 100%);
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b0bfca, 0 4px 8px rgba(70, 95, 115, 0.16);
    text-shadow: 0 1px 0 #fff;
}
html .sk-backbtn b { font-size: 22px; line-height: 1; margin-top: -2px; }
html .sk-backbtn:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(70, 95, 115, 0.3); }
html .sk-subtitle { flex: 1; min-width: 0; margin: 0; font-size: 21px; color: var(--sk-navy); text-shadow: 0 1px 0 #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   DARK MODE — rangeen cheezen ulti na hon (wapas seedhi)
   ============================================================ */
html.vk-dark .header,
html.vk-dark .topbar,
html.vk-dark .ch-head,
html.vk-dark .primary-button,
html.vk-dark .danger-button,
html.vk-dark button.login-btn,
html.vk-dark #registerForm > button,
html.vk-dark .chip.active,
html.vk-dark .emergency-card,
html.vk-dark .profile-hero,
html.vk-dark .sos-card.main,
html.vk-dark .sos-button,
html.vk-dark .emergency-fab,
html.vk-dark .live-banner,
html.vk-dark .ch-send,
html.vk-dark .service-icon,
html.vk-dark .sk-ico,
html.vk-dark .sk-qi,
html.vk-dark .sk-av,
html.vk-dark .sk-val.sk-pill,
html.vk-dark .bell-badge,
html.vk-dark .vk-badge,
html.vk-dark .chat-count,
html.vk-dark .availability-dot,
html.vk-dark .switch input:checked + .slider,
html.vk-dark .login-box .logo,
html.vk-dark .adm-btn.primary,
html.vk-dark .adm-side nav a.on {
    filter: invert(1) hue-rotate(180deg);
}
/* upar wale ke andar ki photo dobara ulti na ho */
html.vk-dark :is(.header, .topbar, .ch-head, .profile-hero, .emergency-card) :is(img, video, canvas, .vk-photo, .bell-badge, .vk-badge, .sk-av) { filter: none; }
html.vk-dark .chats-list .chat-count { filter: invert(1) hue-rotate(180deg); }

/* ============================================================
   PRINT — kaagaz par saaf (shadow / texture nahi)
   ============================================================ */
@media print {
    html, html body { background: #fff !important; }
    html * { box-shadow: none !important; text-shadow: none !important; }
    html .panel, html .item-card { background: #fff !important; }
}

@media (prefers-reduced-motion: reduce) {
    html body.sk-on .sk-menu, html body.sk-on.sk-sub main.page > section.panel.sk-show { animation: none; }
}

/* R47.9: location bar — pata upar poori line, buttons neeche saath-saath; andaze wali location ki chetavni */
html .location-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html .location-bar .location-label { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
html .location-bar .loc-approx { flex: 1 1 100%; font-size: 12.5px; line-height: 1.45; color: #8a5a00; background: #fff6e0; border: 1px solid #f0d48a; border-radius: 10px; padding: 6px 10px; }

/* R47.11: LAPTOP / MOUSE — button kinare par click "miss" hota tha.
   Hover par card upar uthta (translateY / scale) aur dabane par 4% chhota (scale .96) ho jaata —
   mouse ka "down" button par aur "up" bahar padta = click hi nahi. Mouse wale device par
   button / card apni jagah se nahi hilte; dabane ka ehsaas shadow + halka andhera se. (Phone par pehle jaisa.) */
@media (hover: hover) and (pointer: fine) {
    html :is(button, a, [role="button"], input[type="submit"], .primary-button, .secondary-button, .danger-button, .text-button,
        .chip, .service-card, .sos-card, .doctor-card, .item-card, .address-card, .appointment-card, .emergency-button,
        .emergency-card, .profile-button, .nav-item, .login-btn, .sos-button, .photo-preview, .sk-row, .sk-profile,
        .sk-backbtn, .chat-row, .bell-button, .vk-chat-btn, .back-link, .tap-target, .nc-item):is(:hover, :active, .is-pressed) {
        transform: none !important;
    }
    html :is(button, a, [role="button"], .primary-button, .secondary-button, .danger-button, .text-button, .chip,
        .service-card, .sos-card, .doctor-card, .item-card, .emergency-button, .sk-row, .chat-row, .nav-item, .nc-item):is(:active, .is-pressed) {
        filter: brightness(0.94);
    }
}

/* ============================================================
   R47.11 — notification tap: item chamkana, toast/list tap
   (transform nahi — laptop par click na chhoote)
   ============================================================ */
@keyframes vkFocusGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(19, 169, 181, 0.85), 0 0 0 9px rgba(19, 169, 181, 0.18), 0 8px 22px rgba(10, 60, 90, 0.18); }
    50% { box-shadow: 0 0 0 3px rgba(10, 126, 164, 0.95), 0 0 0 14px rgba(19, 169, 181, 0.08), 0 8px 22px rgba(10, 60, 90, 0.18); }
}
html .vk-focus { animation: vkFocusGlow 1.1s ease-in-out 3; outline: none; scroll-margin: 90px; }
html .toast.toast-tap { cursor: pointer; }
html .toast.toast-tap .toast-message::after { content: "  ›"; font-weight: 800; opacity: 0.85; }
html .nc-item { cursor: pointer; }
html .nc-go { align-self: center; margin-left: auto; padding-left: 6px; color: #8aa0b2; font-size: 22px; line-height: 1; }