/* Generated by tools/lib/perf.js from fonts.css + main.css + nav.css + site-footer.css — edit those files, not this one */
/* Generated by tools/build-fonts.js — self-hosted Google Noto fonts (SIL Open Font License). Do not edit. */
/* Noto Sans · latin */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/noto-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Noto Sans · latin-ext */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/noto-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100, U+0101, U+0112, U+0113, U+012A, U+012B, U+014C, U+014D, U+015A, U+015B, U+016A, U+016B, U+1E0C, U+1E0D, U+1E24, U+1E25, U+1E36, U+1E37, U+1E38, U+1E39, U+1E3B, U+1E40, U+1E41, U+1E42, U+1E43, U+1E44, U+1E45, U+1E46, U+1E47, U+1E49, U+1E5A, U+1E5B, U+1E5C, U+1E5D, U+1E5F, U+1E62, U+1E63, U+1E6C, U+1E6D}
/* Noto Sans · devanagari */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/noto-sans-devanagari-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}
/* Noto Sans Devanagari · latin */
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/noto-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Noto Sans Devanagari · latin-ext */
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/noto-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100, U+0101, U+0112, U+0113, U+012A, U+012B, U+014C, U+014D, U+015A, U+015B, U+016A, U+016B, U+1E0C, U+1E0D, U+1E24, U+1E25, U+1E36, U+1E37, U+1E38, U+1E39, U+1E3B, U+1E40, U+1E41, U+1E42, U+1E43, U+1E44, U+1E45, U+1E46, U+1E47, U+1E49, U+1E5A, U+1E5B, U+1E5C, U+1E5D, U+1E5F, U+1E62, U+1E63, U+1E6C, U+1E6D}
/* Noto Sans Devanagari · devanagari */
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/noto-sans-devanagari-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}
/* Noto Serif · latin */
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:500 700;font-display:swap;src:url(../assets/fonts/noto-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Noto Serif · latin-ext */
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:500 700;font-display:swap;src:url(../assets/fonts/noto-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100, U+0101, U+0112, U+0113, U+012A, U+012B, U+014C, U+014D, U+015A, U+015B, U+016A, U+016B, U+1E0C, U+1E0D, U+1E24, U+1E25, U+1E36, U+1E37, U+1E38, U+1E39, U+1E3B, U+1E40, U+1E41, U+1E42, U+1E43, U+1E44, U+1E45, U+1E46, U+1E47, U+1E49, U+1E5A, U+1E5B, U+1E5C, U+1E5D, U+1E5F, U+1E62, U+1E63, U+1E6C, U+1E6D}
/* Noto Serif Devanagari · latin */
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:500 700;font-display:swap;src:url(../assets/fonts/noto-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Noto Serif Devanagari · latin-ext */
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:500 700;font-display:swap;src:url(../assets/fonts/noto-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100, U+0101, U+0112, U+0113, U+012A, U+012B, U+014C, U+014D, U+015A, U+015B, U+016A, U+016B, U+1E0C, U+1E0D, U+1E24, U+1E25, U+1E36, U+1E37, U+1E38, U+1E39, U+1E3B, U+1E40, U+1E41, U+1E42, U+1E43, U+1E44, U+1E45, U+1E46, U+1E47, U+1E49, U+1E5A, U+1E5B, U+1E5C, U+1E5D, U+1E5F, U+1E62, U+1E63, U+1E6C, U+1E6D}
/* Noto Serif Devanagari · devanagari */
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:500 700;font-display:swap;src:url(../assets/fonts/noto-serif-devanagari-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}

:root {
    /* Logo-matched palette */
    --navy: #0F2A5F;
    --navy-deep: #081A3D;
    --navy-light: #1E3A8A;
    --navy-pale: #E8EEF8;
    --orange: #F97316;
    --orange-bright: #FB923C;
    --orange-deep: #EA580C;
    --orange-pale: #FFF4E8;
    --gold: #D4A454;
    --gold-light: #E8C078;
    --cream: #FDFAF4;
    --cream-2: #F6F0E4;
    --white: #FFFFFF;
    --ink: #0A1428;
    --ink-soft: #2A3752;
    --muted: #5A6578;
    --muted-light: #8A94A8;
    --line: #E2E8F0;
    --line-soft: #EEF2F7;
    --green: #16A34A;
    --sky: #38BDF8;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-deva: 'Noto Sans Devanagari', serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 8px rgba(15, 42, 95, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 42, 95, 0.08);
    --shadow-lg: 0 20px 48px rgba(15, 42, 95, 0.12);
    --shadow-orange: 0 12px 32px rgba(249, 115, 22, 0.25);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }
  .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .deva { font-family: var(--font-deva); }
  .display { font-family: var(--font-display); }

  /* ======================================== */
  /* NAVIGATION */
  /* ======================================== */
  nav.main-nav {
    position: sticky; top: 0;
    background: rgba(253, 250, 244, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
    z-index: 100;
    transition: all 0.2s;
  }
  nav.main-nav .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  .brand {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--navy);
    letter-spacing: -0.01em;
  }
  .brand em { color: var(--orange); font-style: italic; }
  .brand .logo-mark {
    width: 48px; height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
  }
  .nav-links {
    display: flex; align-items: center; gap: 32px;
  }
  .nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--orange); }
  .hamburger {
    display: none;
    width: 32px; height: 32px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--navy);
    transition: all 0.2s;
  }

  /* ======================================== */
  /* BUTTONS */
  /* ======================================== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--orange);
    color: var(--white);
    box-shadow: var(--shadow-orange);
  }
  .btn-primary:hover { background: var(--orange-deep); transform: translateY(-2px); }
  .btn-ghost {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
  }
  .btn-ghost:hover { background: var(--navy); color: var(--white); }

  /* ======================================== */
  /* HERO */
  /* ======================================== */
  section.hero {
    position: relative;
    padding: 60px 0 100px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  }
  section.hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--orange-pale) 0%, transparent 60%);
    opacity: 0.6;
    pointer-events: none;
  }
  section.hero::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--navy-pale) 0%, transparent 60%);
    opacity: 0.5;
    pointer-events: none;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.5vw, 68px);
    line-height: 1.05;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .hero h1 em {
    color: var(--orange);
    font-style: italic;
    font-weight: 600;
  }
  .hero p.lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 36px;
    max-width: 540px;
  }
  .avatars {
    display: flex;
  }
  .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--cream);
    margin-left: -10px;
    font-family: var(--font-deva);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
  }
  .avatar:first-child { margin-left: 0; }
  .avatar.a1 { background: linear-gradient(135deg, var(--navy), var(--navy-light)); }
  .avatar.a2 { background: linear-gradient(135deg, var(--orange), var(--orange-bright)); }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* ======================================== */
  /* STATS STRIP */
  /* ======================================== */
  section.stats {
    background: var(--navy);
    color: var(--white);
    padding: 50px 0;
    position: relative;
    overflow: hidden;
  }
  section.stats::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(249, 115, 22, 0.15) 0%, transparent 50%);
    pointer-events: none;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
  }
  .stat {
    text-align: center;
  }
  .stat .num {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--orange-bright);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  /* ======================================== */
  /* SECTION HEADERS */
  /* ======================================== */
  section { padding: 100px 0; }
  .section-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
    display: inline-block;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
  }
  .section-title em {
    font-style: italic;
    color: var(--orange);
    font-weight: 600;
  }
  .section-sub {
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 640px;
    line-height: 1.6;
  }
  .section-head {
    text-align: center;
    margin-bottom: 60px;
  }
  .section-head.left {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
  }
  .section-head.left .section-sub { margin: 0; }

  /* ======================================== */
  /* TEMPLES SHOWCASE */
  /* ======================================== */
  section.temples {
    background: var(--cream);
  }

  /* ======================================== */
  /* LIVE PANCHANG WIDGET */
  /* ======================================== */
  section.panchang-live {
    background: var(--white);
  }
  .panchang-controls {
    background: linear-gradient(135deg, var(--cream) 0%, var(--navy-pale) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
  }
  .date-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .date-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--navy);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .date-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); transform: scale(1.08); }
  #pch-date {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--font-body);
    background: var(--white);
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.15s;
  }
  #pch-date:focus, #pch-date:hover { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-pale); }
  .btn-today {
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    background: var(--orange);
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.5px;
  }
  .btn-today:hover { background: var(--orange-deep); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .loc-select {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 2px 2px 2px 14px;
  }
  .loc-icon { font-size: 16px; }
  #pch-location {
    padding: 10px 32px 10px 8px;
    border: none;
    font-size: 14px;
    font-family: var(--font-body);
    background: transparent;
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3e%3cpath fill='%230F2A5F' d='M5 6L0 0h10z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
  }
  .pch-date-header {
    text-align: center;
    padding: 24px 0 32px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 32px;
  }
  .main-date {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .deva-date {
    font-family: var(--font-deva);
    font-size: 18px;
    color: var(--orange);
    margin-top: 8px;
    font-weight: 600;
  }
  .pch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .pch-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
  }
  .pch-card.samvat-card {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 70%, var(--navy-light) 100%);
    color: var(--white);
    border: none;
    position: relative;
    overflow: hidden;
  }
  .pch-card.samvat-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--orange) 0%, transparent 60%);
    opacity: 0.25;
  }
  .pch-card.samvat-card .pch-item-val {
    color: var(--white);
  }
  .pch-card.samvat-card .pch-item-lbl {
    color: var(--gold-light);
  }
  .pch-card.five-limbs {
    grid-row: span 1;
    background: linear-gradient(135deg, var(--cream) 0%, var(--orange-pale) 100%);
    border-color: var(--orange-pale);
  }
  .pch-right-col {
    display: grid;
    gap: 20px;
  }
  .pch-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--orange-deep);
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .pch-label.light { color: var(--orange-bright); }
  .pch-label.warn { color: #B8425A; }
  .pch-label.good { color: var(--green); }
  .samvat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
  }
  .samvat-item {
    text-align: left;
  }
  .pch-item-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.3px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .pch-item-val {
    font-family: var(--font-deva);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
  }
  .limb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(15, 42, 95, 0.12);
  }
  .limb-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .limb-row:first-of-type { padding-top: 0; }
  .limb-icon {
    font-family: var(--font-deva);
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    background: var(--white);
    border: 1.5px solid var(--orange);
    padding: 7px 10px;
    border-radius: 8px;
    min-width: 54px;
    text-align: center;
    flex-shrink: 0;
  }
  .limb-info { flex: 1; min-width: 0; }
  .limb-name {
    font-family: var(--font-deva);
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
  }
  .limb-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }
  .limb-time {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--navy);
    font-weight: 700;
    white-space: nowrap;
  }
  .limb-time.status { font-family: var(--font-body); color: var(--green); font-weight: 700; }
  .sun-moon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .sm-item {
    background: var(--cream);
    padding: 16px 12px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--line-soft);
  }
  .sm-icon { font-size: 20px; color: var(--orange); margin-bottom: 4px; }
  .sm-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.3px;
    color: var(--muted);
    font-weight: 700;
    margin: 4px 0 4px;
  }
  .sm-val {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
  }
  .time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(15, 42, 95, 0.08);
  }
  .time-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .time-row:first-of-type { padding-top: 0; }
  .time-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
  }
  .time-note {
    font-weight: 400;
    font-size: 11px;
    color: var(--muted);
  }
  .time-val {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    margin-left: 10px;
  }
  .pch-card.inauspicious {
    background: linear-gradient(135deg, #FEF5F5 0%, #FDE8E8 100%);
    border-color: #FDE8E8;
  }
  .pch-card.inauspicious .time-val { color: #B8425A; }
  .pch-card.auspicious {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border-color: #DCFCE7;
  }
  .pch-card.auspicious .time-val { color: var(--green); }
  .pch-disclaimer {
    margin-top: 32px;
    padding: 18px 22px;
    background: var(--cream);
    border-left: 4px solid var(--orange);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .pch-disclaimer strong { color: var(--navy); }

  @media (max-width: 980px) {
    .pch-grid { grid-template-columns: 1fr; }
    .pch-card.samvat-card { grid-column: span 1; }
    .samvat-grid { grid-template-columns: 1fr 1fr; }
    .panchang-controls { flex-direction: column; align-items: stretch; }
    .date-nav { justify-content: space-between; }
    .main-date { font-size: 26px; }
  }
  @media (max-width: 680px) {
    .samvat-grid { grid-template-columns: 1fr; gap: 14px; }
    .sun-moon-grid { grid-template-columns: 1fr; gap: 10px; }
  }

  /* ======================================== */
  /* VOLUNTEER SECTION */
  /* ======================================== */
  section.volunteer {
    background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  }

  /* ======================================== */
  /* FAQ */
  /* ======================================== */
  section.faq {
    background: var(--white);
    padding: 100px 0;
  }

  /* ======================================== */
  /* FOOTER */
  /* ======================================== */
  footer {
    background: var(--navy-deep);
    color: var(--gold-light);
    padding: 70px 0 32px;
  }
  .social {
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-light);
    font-size: 16px;
    transition: all 0.2s;
  }
  .social:hover { background: var(--orange); color: var(--white); transform: translateY(-2px); }

  /* ======================================== */
  /* RESPONSIVE */
  /* ======================================== */
  @media (max-width: 980px) {
    .hero-grid, .tours-intro, .panchang-grid, .vol-grid { grid-template-columns: 1fr; gap: 50px; }
    .features-grid, .tours-grid, .test-grid { grid-template-columns: 1fr 1fr; }
    .temples-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .section-head.left { grid-template-columns: 1fr; gap: 20px; }
    .split-grid { grid-template-columns: 1fr; }
    .cta-box { grid-template-columns: 1fr; text-align: center; padding: 48px 32px; }
    .cta-qr { margin: 0 auto; }
    .cta-content p { margin: 0 auto 28px; }
    .store-badges { justify-content: center; }
    section { padding: 70px 0; }
  }
  @media (max-width: 680px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .hero { padding: 40px 0 70px; }
    .section-title { font-size: 32px; }
  }
.ss-chip {
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
}
.ss-chip:hover { border-color: var(--navy); }
.ss-chip.ss-chip-active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Preview card (fakes the real reader for one verse) */
.ss-preview-card {
  background: #FDFAF4;
  color: #0A1428;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: background 0.3s ease, color 0.3s ease;
  border: 1px solid rgba(10, 20, 40, 0.08);
}
.ss-preview-card[data-ssth="night"]  { background: #0B1726; color: #F5F0E4; border-color: rgba(255,255,255,0.08); }
.ss-preview-card[data-ssth="sepia"]  { background: #F4E8CF; color: #4A3A1E; border-color: rgba(74,58,30,0.14); }
.ss-preview-card[data-ssth="oled"]   { background: #000000; color: #F0E7D5; border-color: rgba(255,255,255,0.06); }

/* Scripture Library Overlay (contains the embedded reader) */
#scripture-library-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--white);
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
}
#scripture-library-overlay.show { display: block; animation: slOverlayIn 0.3s ease; }
@keyframes slOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.sl-close-overlay {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 10001;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10, 20, 40, 0.75);
  color: white;
  font-size: 22px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#scripture-library-overlay.show ~ .sl-close-overlay { display: inline-flex; }


/* ===== SCRIPTURE LIBRARY EMBEDDED READER CSS ===== */

/* ============================================================
   DESIGN TOKENS — Themes, Font Scales, Line Spacing
   ============================================================ */
#sl-root {
  /* Brand constants (match TheHinduBook theme) */
  --navy: #0F2A5F;
  --navy-deep: #081A3D;
  --orange: #F97316;
  --orange-bright: #FB923C;
  --gold: #D4A454;

  /* Font families */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-dev-sans: 'Noto Sans Devanagari', 'Noto Sans', sans-serif;
  --font-dev-serif: 'Noto Serif Devanagari', 'Noto Serif', serif;
  --font-dev-kurale: 'Kurale', 'Noto Serif Devanagari', serif;

  /* Day theme — DEFAULT */
  --bg: #FDFAF4;
  --bg-elevated: #FFFFFF;
  --bg-soft: #F6F0E4;
  --ink: #0A1428;
  --ink-soft: #2A3752;
  --ink-muted: #5A6578;
  --accent: #F97316;
  --accent-soft: #FEF3C7;
  --highlight-current: #FDE68A;
  --highlight-matched: #BBF7D0;
  --highlight-missed: #FECACA;
  --line: rgba(10, 20, 40, 0.08);
  --line-strong: rgba(10, 20, 40, 0.15);
  --shadow-sm: 0 2px 8px rgba(10, 20, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 20, 40, 0.10);
  --shadow-lg: 0 16px 48px rgba(10, 20, 40, 0.14);
}

#sl-root[data-theme="night"] {
  --bg: #0B1726;
  --bg-elevated: #152235;
  --bg-soft: #1E2E44;
  --ink: #F5F0E4;
  --ink-soft: #D4C8B5;
  --ink-muted: #8A9BB0;
  --accent: #FB923C;
  --accent-soft: #4A3B20;
  --highlight-current: #78350F;
  --highlight-matched: #14532D;
  --highlight-missed: #7F1D1D;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
}

#sl-root[data-theme="sepia"] {
  --bg: #F4E8CF;
  --bg-elevated: #FAF2DE;
  --bg-soft: #EADDBB;
  --ink: #4A3A1E;
  --ink-soft: #6B5637;
  --ink-muted: #8A7555;
  --accent: #B4531A;
  --accent-soft: #F5DBB8;
  --highlight-current: #F4CE86;
  --highlight-matched: #B8D4A4;
  --highlight-missed: #E8A5A5;
  --line: rgba(74, 58, 30, 0.14);
  --line-strong: rgba(74, 58, 30, 0.22);
  --shadow-sm: 0 2px 8px rgba(74, 58, 30, 0.1);
  --shadow-md: 0 8px 24px rgba(74, 58, 30, 0.14);
  --shadow-lg: 0 16px 48px rgba(74, 58, 30, 0.18);
}

#sl-root[data-theme="oled"] {
  --bg: #000000;
  --bg-elevated: #0A0A0A;
  --bg-soft: #141414;
  --ink: #F0E7D5;
  --ink-soft: #BAAE97;
  --ink-muted: #7A7060;
  --accent: #FB923C;
  --accent-soft: #241812;
  --highlight-current: #3A2810;
  --highlight-matched: #0F2A17;
  --highlight-missed: #2A0F10;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 1);
}

/* Font size steps */
#sl-root[data-size="1"] { --fs-dev: 20px; --fs-trans: 12px; --fs-mean: 14px; --fs-title: 22px; }
#sl-root[data-size="2"] { --fs-dev: 26px; --fs-trans: 13px; --fs-mean: 15px; --fs-title: 26px; }
#sl-root[data-size="3"] { --fs-dev: 32px; --fs-trans: 14px; --fs-mean: 16px; --fs-title: 30px; }
#sl-root[data-size="4"] { --fs-dev: 40px; --fs-trans: 15px; --fs-mean: 17px; --fs-title: 34px; }

/* Line spacing */
#sl-root[data-line="compact"] { --lh-dev: 1.55; --lh-trans: 1.45; --lh-mean: 1.55; }
#sl-root[data-line="normal"]  { --lh-dev: 1.75; --lh-trans: 1.6;  --lh-mean: 1.72; }
#sl-root[data-line="relaxed"] { --lh-dev: 2.0;  --lh-trans: 1.8;  --lh-mean: 1.9;  }

/* Devanagari font family */
#sl-root[data-font="dev-sans"]   { --font-dev: var(--font-dev-sans); }
#sl-root[data-font="dev-serif"]  { --font-dev: var(--font-dev-serif); }
#sl-root[data-font="dev-kurale"] { --font-dev: var(--font-dev-kurale); }

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#sl-root {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

button {
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

a { color: var(--accent); text-decoration: none; }

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; min-height: 100vh; }
.screen.screen-active { display: block; }
.cat-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cat-continue, .cat-daily {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 20px;
}

.continue-card {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #F0E7D5;
  padding: 24px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-md);
}
.continue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.continue-cover {
  width: 70px; height: 90px;
  background: linear-gradient(135deg, var(--orange), var(--orange-bright));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-dev-sans);
  font-size: 36px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
}
.continue-info { flex: 1; min-width: 0; }
.continue-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-bright);
  margin-bottom: 4px;
}
.continue-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}
.continue-meta {
  font-size: 13px;
  color: rgba(240, 231, 213, 0.75);
  margin-bottom: 10px;
}
.continue-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.continue-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-bright));
  border-radius: 2px;
  transition: width 0.4s;
}
.continue-arrow {
  color: var(--orange-bright);
  font-size: 22px;
  flex-shrink: 0;
}

.cat-tabs {
  max-width: 1200px;
  margin: 24px auto 16px;
  padding: 0 20px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button {
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.cat-tabs button:hover { background: var(--bg-soft); }
.cat-tabs button.tab-active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

.cat-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.tile {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.tile-cover {
  width: 60px; height: 80px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-dev-sans);
  font-size: 30px;
  flex-shrink: 0;
  color: white;
}
.tile-cover.c-chalisa { background: linear-gradient(135deg, #F97316, #EA580C); }
.tile-cover.c-aarti   { background: linear-gradient(135deg, #D4A454, #B8862B); }
.tile-cover.c-mantra  { background: linear-gradient(135deg, #0F2A5F, #081A3D); }
.tile-cover.c-stotra  { background: linear-gradient(135deg, #7C2D12, #991B1B); }
.tile-cover.c-sukta   { background: linear-gradient(135deg, #4C1D95, #312E81); }

.tile-body { flex: 1; min-width: 0; }
.tile-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.25;
}
.tile-title-dev {
  font-family: var(--font-dev-sans);
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tile-meta span { white-space: nowrap; }
.tile-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
}
.tile-tag.tag-full { background: #D1FAE5; color: #065F46; }
.tile-tag.tag-preview { background: var(--accent-soft); color: var(--accent); }
.reader-title { flex: 1; min-width: 0; text-align: center; }
.reader-title h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-title small {
  display: block;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 2px;
}
.rpb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--orange-bright));
  transition: width 0.3s ease;
  width: 0%;
}

.reader-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 160px;
}

.scripture-intro {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.scripture-intro-dev {
  font-family: var(--font-dev);
  font-size: calc(var(--fs-title) + 8px);
  color: var(--ink);
  margin-bottom: 8px;
}
.scripture-intro-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.scripture-intro-author {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.scripture-intro-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}
.scripture-intro-divider {
  font-family: var(--font-dev);
  font-size: 20px;
  color: var(--accent);
  margin: 18px auto 0;
  letter-spacing: 1em;
  padding-left: 1em;
}

.verse {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
  transition: background 0.3s;
}
.verse:last-child { border-bottom: none; }
.verse.verse-active { }
.verse.verse-bookmarked { }

.verse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.verse-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.verse-num-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.verse-type-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.verse-type-tag.doha { background: #FEF3C7; color: #B45309; }
.verse-type-tag.chaupai { background: #DBEAFE; color: #1E40AF; }

.verse-actions {
  display: flex;
  gap: 6px;
}
.v-act {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--ink-muted);
  font-size: 14px;
  opacity: 0.7;
  transition: all 0.15s;
}
.v-act:hover { background: var(--bg-soft); opacity: 1; color: var(--accent); }
.v-act.active { color: var(--accent); opacity: 1; }

.verse-dev {
  font-family: var(--font-dev);
  font-size: var(--fs-dev);
  line-height: var(--lh-dev);
  color: var(--ink);
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.01em;
  white-space: pre-line;
  font-weight: 500;
}

.verse-trans {
  font-family: var(--font-body);
  font-size: var(--fs-trans);
  line-height: var(--lh-trans);
  color: var(--ink-muted);
  margin-bottom: 14px;
  font-style: italic;
  text-align: center;
  white-space: pre-line;
}

.verse-mean {
  font-family: var(--font-body);
  font-size: var(--fs-mean);
  line-height: var(--lh-mean);
  color: var(--ink-soft);
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 12px;
  border-left: 3px solid var(--accent);
}
.verse-mean-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: block;
}

/* View modes */
#sl-root[data-view="dev-only"] .verse-trans,
#sl-root[data-view="dev-only"] .verse-mean { display: none; }

#sl-root[data-view="side-by-side"] .verse-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
#sl-root[data-view="side-by-side"] .verse-dev { text-align: left; }
#sl-root[data-view="side-by-side"] .verse-trans { grid-column: 1 / -1; }
@media (max-width: 760px) {
  #sl-root[data-view="side-by-side"] .verse-content { grid-template-columns: 1fr; }
}

#sl-root[data-view="flowing"] .verse { border-bottom: none; padding: 12px 0; }
#sl-root[data-view="flowing"] .verse-head { display: none; }
#sl-root[data-view="flowing"] .verse-dev { text-align: left; margin-bottom: 8px; }
#sl-root[data-view="flowing"] .verse-mean { display: none; }

/* Hide controls based on state */
#sl-root[data-show-trans="false"] .verse-trans { display: none; }
#sl-root[data-show-mean="false"] .verse-mean { display: none; }

/* Word highlighting for mic reading */
.verse-trans .word {
  display: inline;
  padding: 1px 2px;
  margin: 0 1px;
  border-radius: 3px;
  transition: background 0.2s;
}
.word.word-current {
  background: var(--highlight-current);
  color: var(--ink);
  font-weight: 600;
  font-style: normal;
}
.word.word-matched {
  background: var(--highlight-matched);
  color: var(--ink);
}

/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 20, 40, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.overlay.show { display: flex; animation: fadeIn 0.25s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 760px) {
  .overlay { align-items: center; }
}

.panel {
  background: var(--bg);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 24px 24px 0 0;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: slideUp 0.3s ease;
}
@media (min-width: 760px) {
  .panel { border-radius: 24px; }
}
@keyframes slideUp { from { transform: translateY(40px); } to { transform: translateY(0); } }
.chip {
  padding: 10px 14px;
  border-radius: 100px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--line-strong); }
.chip.chip-active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.sl-toggle {
  position: relative;
  width: 44px; height: 24px;
  background: var(--line-strong);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.sl-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: white;
  border-radius: 50%;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.sl-toggle.on { background: var(--accent); }
.sl-toggle.on::after { left: 22px; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5); }
  50% { box-shadow: 0 0 0 24px rgba(249, 115, 22, 0); }
}
.mic-status {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.mic-hint {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Bookmarks panel */
.bm-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.bm-item:last-child { border-bottom: none; }
.bm-item:hover { background: var(--bg-soft); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.bm-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.bm-body { flex: 1; min-width: 0; }
.bm-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.bm-meta { font-size: 11px; color: var(--ink-muted); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.bm-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-muted);
}
.bm-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.streak-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 100px; left: 50%;
  transform: translateX(-50%);
  background: var(--navy-deep);
  color: white;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* Responsive tweaks */
@media (max-width: 500px) {
  .cat-nav h1 { font-size: 24px; }
  .reader-main { padding: 20px 16px 160px; }
  .scripture-intro-dev { font-size: calc(var(--fs-title) + 2px); }
  .verse { padding: 20px 0; }
  .continue-card { padding: 16px; gap: 14px; }
  .continue-cover { width: 56px; height: 72px; font-size: 28px; }
  .continue-title { font-size: 17px; }
  .reader-bottom { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .rb-btn { min-width: 42px; height: 42px; padding: 0 10px; font-size: 14px; }
  .rb-btn.rb-primary { padding: 0 14px; }
}

/* Season tabs */
.fv-season-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.fv-tab {
  padding: 9px 18px;
  border-radius: 100px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
}
.fv-tab:hover { border-color: var(--navy); }
.fv-tab.fv-tab-active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Month strip */
.fv-month-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  margin-bottom: 24px;
  scrollbar-width: thin;
}
.fv-month-strip::-webkit-scrollbar { height: 6px; }
.fv-month-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.fv-month-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  min-width: 90px;
  font-family: var(--font-body);
}
.fv-month-pill:hover { border-color: var(--navy); background: var(--white); }
.fv-month-pill.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.fv-month-pill .fv-m-name {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.fv-month-pill .fv-m-count {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-display);
}

/* Timeline grid */
.fv-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.fv-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.fv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--navy);
}

.fv-card-top {
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}
.fv-card-top::before {
  content: '';
  position: absolute;
  right: -20px; top: -20px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  pointer-events: none;
}
.fv-card-glyph {
  font-family: var(--font-deva);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.fv-card-date-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.fv-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fv-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}
.fv-card-name-dev {
  font-family: var(--font-deva);
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.fv-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.fv-card-sig {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fv-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

/* Modal */
.fv-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 20, 40, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fv-modal.show { display: flex; animation: fvFadeIn 0.25s; }
@keyframes fvFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fvSlideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }

.fv-hero {
  padding: 40px 32px 32px;
  color: white;
  position: relative;
  overflow: hidden;
}
.fv-hero::before {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 240px; height: 240px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.fv-hero-glyph {
  font-family: var(--font-deva);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.fv-hero-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.fv-hero-name {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.fv-hero-name-dev {
  font-family: var(--font-deva);
  font-size: 22px;
  opacity: 0.9;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.fv-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.fv-hero-chip {
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.fv-body { padding: 24px 32px 32px; }
.fv-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.fv-section:last-child { border-bottom: none; margin-bottom: 0; }
.fv-section h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fv-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.fv-section ul {
  padding-left: 20px;
  margin: 0;
}
.fv-section li {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 6px;
}

.fv-dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .fv-dodont { grid-template-columns: 1fr; }
}
.fv-dd-box {
  padding: 16px;
  border-radius: 12px;
}
.fv-dd-box.do { background: #D1FAE5; }
.fv-dd-box.dont { background: #FEE2E2; }
.fv-dd-box h5 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.fv-dd-box.do h5 { color: #065F46; }
.fv-dd-box.dont h5 { color: #991B1B; }
.fv-dd-box ul { padding-left: 18px; margin: 0; }
.fv-dd-box li { font-size: 13px; margin-bottom: 4px; }
.fv-dd-box.do li { color: #065F46; }
.fv-dd-box.dont li { color: #991B1B; }

@media (max-width: 500px) {
  .fv-hero { padding: 28px 20px 24px; }
  .fv-hero-name { font-size: 26px; }
  .fv-hero-glyph { font-size: 52px; }
  .fv-body { padding: 20px; }
  .fv-section h4 { font-size: 16px; }
}
.td-search {
  width: 100%;
  padding: 12px 44px 12px 16px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  background: var(--cream-2);
  color: var(--ink);
  box-sizing: border-box;
}
.td-search:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
}
.td-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 16px;
  display: none;
  color: var(--ink);
}
.td-search-clear.show { display: inline-flex; align-items: center; justify-content: center; }
.td-view-btn {
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.td-view-btn:hover { border-color: var(--navy); }
.td-view-btn.td-view-active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.td-sort {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  color: var(--ink);
}

.td-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.td-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
}

.td-card-top {
  padding: 16px;
  background: linear-gradient(135deg, var(--navy), #1a3a7a);
  color: white;
  position: relative;
}
.td-card.verified .td-card-top::after {
  content: '✓ Verified';
  position: absolute;
  top: 12px;
  right: 12px;
  background: #10b981;
  color: white;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.td-card:not(.verified) .td-card-top::after {
  content: 'Community';
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.2);
  color: white;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.td-card-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}

.td-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 4px;
  max-width: 80%;
}
.td-card-name-dev {
  font-family: var(--font-deva);
  font-size: 13px;
  opacity: 0.85;
}

.td-card-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.td-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.td-card-deity {
  color: var(--orange);
  font-weight: 600;
}
.td-card-sig {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  flex: 1;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.td-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.td-card-tag {
  background: var(--cream-2);
  color: var(--ink-soft);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.td-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.td-list-row:hover { background: var(--cream-2); }
.td-list-row:last-child { border-bottom: none; }
.td-list-main h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.td-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.td-list-aside {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.td-badge-v {
  display: inline-block;
  background: #10b981;
  color: white;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.td-badge-c {
  display: inline-block;
  background: var(--cream-2);
  color: var(--ink-soft);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}

/* Map view */
.td-map-view {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 24px;
}
.td-map-visual {
  background: linear-gradient(135deg, #f1f5f9, #e0e7ff);
  position: relative;
  overflow: hidden;
  padding: 20px;
}
.td-map-pin {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50% 50% 50% 0;
  background: var(--orange);
  transform: rotate(-45deg);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.15s;
}
.td-map-pin:hover { transform: rotate(-45deg) scale(1.5); z-index: 2; }
.td-map-pin.verified { background: #10b981; }

/* Pagination */
.td-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.td-page {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--font-body);
}
.td-page:hover { border-color: var(--navy); color: var(--navy); }
.td-page.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.td-page:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============ MODAL (detail) ============ */
.td-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 20, 40, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.td-modal.show { display: flex; animation: tdFadeIn 0.25s; }
@keyframes tdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tdSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Temple detail hero */
.td-detail-hero {
  padding: 40px 32px 32px;
  color: white;
  background: linear-gradient(135deg, var(--navy), #1a3a7a);
  position: relative;
  overflow: hidden;
}
.td-detail-hero.verified { background: linear-gradient(135deg, #065f46, #047857); }
.td-detail-hero::before {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 240px; height: 240px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.td-detail-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.2);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.td-detail-hero.verified .td-detail-badge { background: rgba(255,255,255,0.25); }
.td-detail-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.td-detail-name-dev {
  font-family: var(--font-deva);
  font-size: 20px;
  opacity: 0.9;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.td-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.td-detail-chip {
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.td-detail-body { padding: 24px 32px 32px; }
.td-detail-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.td-detail-section:last-child { border-bottom: none; }
.td-detail-section h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.td-detail-section p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.td-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.td-info-item {
  background: var(--cream-2);
  padding: 10px 14px;
  border-radius: 10px;
}
.td-info-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.td-info-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.td-aarti-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.td-aarti-chip {
  background: var(--navy);
  color: white;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.td-action-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.td-action-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.td-action-btn:hover { background: var(--navy); color: white; border-color: var(--navy); }
.td-action-btn.active { background: var(--orange); color: white; border-color: var(--orange); }

/* ============ ADD/EDIT FLOW ============ */
.td-add-step { padding: 32px; }

/* Admin queue */
.td-admin-queue {
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.td-queue-row {
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.td-queue-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--cream-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ink-soft);
}
.td-queue-type.new { background: #dbeafe; color: #1e40af; }
.td-queue-type.edit { background: #fef3c7; color: #92400e; }
.td-queue-type.photo { background: #e0e7ff; color: #4338ca; }
.td-queue-row h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}
.td-queue-info {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.td-queue-actions { display: flex; gap: 6px; }
.td-queue-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--font-body);
}
.td-queue-btn.approve { background: #10b981; color: white; border-color: #10b981; }
.td-queue-btn.reject { background: #ef4444; color: white; border-color: #ef4444; }

@media (max-width: 500px) {
  .td-detail-name { font-size: 24px; }
  .td-detail-hero { padding: 28px 20px; }
  .td-detail-body { padding: 20px; }
  .td-add-step { padding: 24px 20px; }
}



/* ===== USER ACCOUNT MODULE CSS ===== */

/* ============================================================
   USER ACCOUNT MODULE — STYLES
   ============================================================ */

/* ===== NAV AVATAR BUTTON ===== */
.user-nav-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
}
.user-nav-signin {
  padding: 7px 16px;
  border-radius: 100px;
  background: var(--orange);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 2px 6px rgba(249,115,22,0.25);
  transition: all 0.15s;
}
.user-nav-signin:hover { background: #ea580c; transform: translateY(-1px); }

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 100px;
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.user-avatar-btn:hover { border-color: var(--navy); }

/* ===== DROPDOWN MENU ===== */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 20px;
  width: 260px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  padding: 8px;
  display: none;
  z-index: 1000;
}
.user-dropdown.show { display: block; animation: udFade 0.2s; }
@keyframes udFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.user-dropdown-header {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.user-dropdown-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.user-dropdown-tier {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.user-dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background 0.1s;
}
.user-dropdown-menu-item:hover { background: var(--cream-2); }
.user-dropdown-menu-item.danger { color: #DC2626; }
.user-dropdown-menu-item .ud-icon { font-size: 16px; width: 20px; text-align: center; }
.user-dropdown-divider { height: 1px; background: var(--line); margin: 6px 0; }

/* ===== AUTH / SIGNUP OVERLAY ===== */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(10, 20, 40, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-overlay.show { display: flex; animation: udFade 0.3s; }

.auth-modal {
  background: var(--white);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: authSlide 0.3s ease;
}
@keyframes authSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.auth-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream-2);
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink);
  z-index: 2;
}

.auth-content {
  padding: 36px 32px 32px;
  max-height: 90vh;
  overflow-y: auto;
}
.auth-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.auth-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--navy);
  margin: 0 0 6px;
  font-weight: 700;
}
.auth-subtitle {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* ===== FORM FIELDS ===== */
.auth-field {
  margin-bottom: 14px;
}
.auth-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.auth-field input,
.auth-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--navy);
}

.auth-submit {
  width: 100%;
  padding: 13px 20px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
  margin-top: 6px;
}
.auth-submit:hover { background: #0a1f52; }
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-footer-note {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.auth-footer-note a { color: var(--navy); text-decoration: underline; cursor: pointer; }

.auth-switch {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.auth-switch a { color: var(--navy); font-weight: 600; cursor: pointer; }
.otp-digit {
  width: 48px;
  height: 56px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink);
  background: var(--white);
}
.otp-digit:focus {
  outline: none;
  border-color: var(--navy);
}

/* ===== PROFILE OVERLAY (full-screen) ===== */
.profile-overlay {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 11000;
  display: none;
  overflow-y: auto;
}
.profile-overlay.show { display: block; animation: udFade 0.3s; }

.profile-top-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.profile-back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-back:hover { background: var(--cream-2); }
.profile-top-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  flex: 1;
}

/* Profile layout: sidebar + content */
.profile-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 20px;
}
@media (max-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr;
    padding: 0 12px;
    gap: 16px;
  }
}

.profile-sidebar {
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  align-self: start;
  position: sticky;
  top: 80px;
}
@media (max-width: 900px) {
  .profile-sidebar { position: static; }
}

.profile-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all 0.1s;
  font-family: var(--font-body);
}
.profile-sidebar-nav-item:hover { background: var(--cream-2); color: var(--ink); }
.profile-sidebar-nav-item.active {
  background: var(--navy);
  color: white;
  font-weight: 600;
}
.profile-sidebar-nav-item.danger { color: #DC2626; }
.profile-sidebar-nav-item .psn-icon { font-size: 16px; width: 20px; text-align: center; }

.profile-content {
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid var(--line);
  min-height: 500px;
}
@media (max-width: 600px) { .profile-content { padding: 24px 20px; } }

.profile-page-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--navy);
  margin: 0 0 6px;
  font-weight: 700;
}
.profile-page-sub {
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ===== PROFILE HOME ===== */
.profile-hero {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--navy), #1a3a7a);
  border-radius: 16px;
  color: white;
  margin-bottom: 24px;
}
.profile-hero-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
}
.profile-hero-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  opacity: 0.9;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.profile-hero-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 100px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
}

/* Stats grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 600px) { .profile-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.profile-stat {
  background: var(--cream-2);
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--line);
}
.profile-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.profile-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* Section titles */
.profile-section {
  margin-bottom: 32px;
}
.profile-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tier progress bar */
.tier-progress-wrap {
  background: var(--cream-2);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.tier-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tier-progress-current {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}
.tier-progress-next {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tier-progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 100px;
  overflow: hidden;
}
.tier-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--orange));
  border-radius: 100px;
  transition: width 0.5s ease;
}

/* Badges grid */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.badge-item {
  background: var(--cream-2);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: transform 0.15s;
}
.badge-item:hover { transform: translateY(-2px); border-color: var(--navy); }
.badge-item.locked { opacity: 0.3; filter: grayscale(1); }
.badge-item.rare {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #D4A454;
}
.badge-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.badge-name {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}

/* Favorites list */
.fav-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.fav-item {
  background: var(--cream-2);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s;
}
.fav-item:hover { border-color: var(--navy); transform: translateY(-1px); }
.fav-item-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 600;
}
.fav-item-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== SETTINGS LIST ===== */
.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-title {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
  font-weight: 500;
}
.settings-row-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.settings-row-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  text-align: right;
}

/* Toggle switch */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--line);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on {
  background: var(--navy);
}
.toggle.on::after { transform: translateX(20px); }

/* Settings field inline */
.settings-field-inline {
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-body);
  cursor: pointer;
}

/* ===== DANGER / DELETE ===== */
.danger-zone {
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}
.danger-zone-title {
  font-weight: 700;
  color: #991B1B;
  margin: 0 0 8px;
  font-size: 15px;
}
.danger-zone-text {
  color: #7F1D1D;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.danger-btn {
  padding: 9px 16px;
  background: #DC2626;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}
.danger-btn:hover { background: #B91C1C; }

/* ===== PUBLIC PROFILE OVERLAY (viewing other users) ===== */
.pub-profile-hero {
  background: linear-gradient(135deg, var(--navy), var(--orange));
  padding: 40px 32px;
  color: white;
  text-align: center;
  border-radius: 16px 16px 0 0;
}
.pub-profile-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 14px;
}
.pub-profile-name {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0 0 4px;
  font-weight: 700;
}
.pub-profile-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.22);
  border-radius: 100px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
}

/* ===== LEADERBOARD ===== */
.leaderboard-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cream-2);
  margin-bottom: 8px;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.leaderboard-row:hover { background: var(--white); border: 1px solid var(--line); }
.leaderboard-row.me { background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.leaderboard-rank {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}
.leaderboard-rank.gold { color: #D4A454; }
.leaderboard-rank.silver { color: #9CA3AF; }
.leaderboard-rank.bronze { color: #B45309; }
.leaderboard-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.leaderboard-city {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.leaderboard-points {
  text-align: right;
}
.leaderboard-points-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--orange);
}
.leaderboard-points-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== TOAST ===== */
.auth-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: white;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  z-index: 20000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: udFade 0.3s;
}
.auth-toast.success { background: #10b981; }
.auth-toast.error { background: #DC2626; }

/* ===== BADGE UNLOCK CELEBRATION ===== */
.badge-unlock {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.85);
  backdrop-filter: blur(8px);
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.badge-unlock.show { display: flex; animation: udFade 0.3s; }
.badge-unlock-card {
  background: linear-gradient(135deg, var(--navy), var(--orange));
  color: white;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  max-width: 320px;
  animation: badgePop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes badgePop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.badge-unlock-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 10px;
}
.badge-unlock-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 10px;
}
.badge-unlock-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.badge-unlock-desc {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 20px;
  line-height: 1.5;
}
.badge-unlock-btn {
  padding: 10px 24px;
  background: white;
  color: var(--navy);
  border: none;
  border-radius: 100px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
}



/* ===== USER ACCOUNT MODULE CSS ===== */

/* ============================================================
   USER ACCOUNT MODULE — CSS
   ============================================================ */

/* ----- Nav profile button (replaces/adds to CTA) ----- */
.acc-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.15s;
}
.acc-nav-btn:hover { background: var(--white); border-color: var(--navy); }
.acc-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #ea580c);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.acc-nav-name {
  font-weight: 500;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-signin-btn {
  padding: 8px 18px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.acc-signin-btn:hover { background: #0a1f4a; }

/* ----- Overlay container ----- */
.acc-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(10,20,40,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.acc-overlay.show { display: flex; animation: accFadeIn 0.25s; }
@keyframes accFadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes accSlideUp { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }

/* ----- Sidebar (visible when logged in) ----- */
.acc-sidebar {
  width: 240px;
  background: linear-gradient(180deg, #0F2A5F 0%, #1a3a7a 100%);
  color: white;
  padding: 24px 16px;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.acc-side-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #ea580c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  color: white;
}
.acc-side-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-side-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}
.acc-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  margin-bottom: 2px;
  transition: all 0.15s;
}
.acc-nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
.acc-nav-item.active { background: var(--orange); color: white; }

/* ----- Main pane ----- */
.acc-main {
  flex: 1;
  overflow-y: auto;
  background: var(--white);
}
.acc-screen { display: none; padding: 40px 48px; animation: accFade 0.25s; }
.acc-screen.active { display: block; }
@keyframes accFade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

.acc-screen-head { margin-bottom: 28px; }
.acc-screen-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.acc-screen-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.15;
}
.acc-screen-sub {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  max-width: 600px;
}

.acc-btn-primary {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
  box-sizing: border-box;
}
.acc-btn-primary:hover { background: #0a1f4a; }
.acc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.acc-link-btn {
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
  text-decoration: underline;
  font-size: 13px;
  font-family: var(--font-body);
  padding: 4px;
}
.acc-otp-digit {
  width: 50px;
  height: 56px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-display);
  color: var(--ink);
}
.acc-otp-digit:focus { outline: none; border-color: var(--navy); }

/* ----- Dashboard screen ----- */
.acc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.acc-stat-card {
  background: var(--cream-2);
  padding: 18px 16px;
  border-radius: 14px;
  text-align: left;
}
.acc-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.acc-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.acc-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.acc-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.acc-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.acc-row:hover { background: var(--white); border: 1px solid var(--navy); padding: 13px 15px; }
.acc-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), #1a3a7a);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.acc-row-main { flex: 1; min-width: 0; }
.acc-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.acc-row-sub {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.acc-row-arrow { color: var(--muted); font-size: 20px; }
.acc-btn-secondary {
  padding: 12px 20px;
  background: var(--cream-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
}
.acc-btn-secondary:hover { border-color: var(--navy); }

.acc-btn-danger {
  padding: 12px 20px;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}
.acc-btn-danger:hover { background: #b91c1c; }
.acc-tag {
  padding: 8px 14px;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink-soft);
  transition: all 0.15s;
}
.acc-tag:hover { border-color: var(--navy); }
.acc-tag.selected {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.acc-tier-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
}
.acc-tier-dev {
  font-family: var(--font-deva);
  font-size: 18px;
  opacity: 0.8;
  margin-bottom: 16px;
}
.acc-tier-progress {
  background: linear-gradient(90deg, var(--orange), #fbbf24);
  height: 100%;
  border-radius: 100px;
  transition: width 0.4s ease;
}
.acc-tier-progress-text {
  font-size: 13px;
  opacity: 0.9;
}

.acc-tier-ladder {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 700px) {
  .acc-tier-ladder { grid-template-columns: repeat(3, 1fr); }
}
.acc-tier-step {
  text-align: center;
  padding: 12px 6px;
  background: var(--cream-2);
  border-radius: 10px;
  border: 2px solid transparent;
}
.acc-tier-step.achieved {
  background: #d1fae5;
  border-color: #10b981;
}
.acc-tier-step.current {
  background: #fef3c7;
  border-color: var(--orange);
  transform: scale(1.05);
}
.acc-tier-step-icon {
  font-size: 20px;
  margin-bottom: 4px;
}
.acc-tier-step-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.acc-tier-step-min {
  font-size: 9px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* Contributions timeline */
.acc-contrib-timeline { display: flex; flex-direction: column; gap: 10px; }
.acc-contrib-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-radius: 12px;
  align-items: center;
}
.acc-contrib-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--navy);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acc-contrib-icon.approved { background: #10b981; }
.acc-contrib-icon.pending { background: #f59e0b; }
.acc-contrib-icon.rejected { background: #ef4444; }
.acc-contrib-main h5 {
  margin: 0 0 2px;
  font-size: 14px;
  color: var(--ink);
}
.acc-contrib-main p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.acc-contrib-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}
.acc-contrib-status.approved { background: #d1fae5; color: #065f46; }
.acc-contrib-status.pending { background: #fef3c7; color: #92400e; }
.acc-contrib-status.rejected { background: #fee2e2; color: #991b1b; }

/* Notifications */
.acc-notif-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.acc-notif-item:hover { background: var(--white); border: 1px solid var(--navy); padding: 13px 15px; }
.acc-notif-item.unread { background: #fef3c7; }
.acc-notif-item.unread:hover { background: #fef3c7; border-color: var(--orange); }

.acc-notif-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), #1a3a7a);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.acc-notif-main { flex: 1; }
.acc-notif-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.acc-notif-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 4px; }
.acc-notif-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.acc-public-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #ea580c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  flex-shrink: 0;
}
.acc-public-tier {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Danger zone */
.acc-danger-zone {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}
.acc-danger-zone h4 {
  color: #991b1b;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 16px;
}
.acc-danger-zone p {
  color: #7f1d1d;
  font-size: 13px;
  margin: 0 0 14px;
}

/* Mobile */
@media (max-width: 760px) {
  .acc-shell { height: 100vh; max-height: 100vh; border-radius: 0; }
  .acc-sidebar { position: absolute; z-index: 100; left: -100%; transition: left 0.3s; height: 100%; width: 260px; }
  .acc-sidebar.mobile-open { left: 0; }
  .acc-screen { padding: 24px; }
  .acc-screen-title { font-size: 24px; }
  .acc-mobile-menu-btn {
    display: inline-flex !important;
    position: absolute;
    top: 16px; left: 16px;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 50;
  }
}
@keyframes ytFadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes ytSlideUp { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }

/* Mobile */
@media (max-width: 640px) {
  .yt-detail-hero { padding: 32px 24px 24px; }
  .yt-detail-name { font-size: 26px; }
  .yt-detail-pricing { padding: 20px 24px; }
  .yt-detail-body { padding: 20px 24px; }
  .yt-card-hero { padding: 20px 18px 16px; }
}
/* ========== MULTI-PAGE SITE ADDITIONS ========== */
/* Active nav link highlight */
.nav-links a.active {
  color: var(--orange);
  font-weight: 600;
  position: relative;
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

/* Mobile nav */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 20px;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-links.mobile-open {
    display: flex;
  }
  .nav-links a.active::after { display: none; }
  .hamburger { display: flex !important; }
}

/* Ensure footer has proper spacing from main content */
footer { margin-top: 40px; }

/* WebP wrapper added by tools/lib/perf.js: let the <img> keep its old place in the layout */
picture[data-webp]{display:contents}

:root{--f-serif:'Noto Serif','Noto Serif Devanagari',Georgia,serif;--f-sans:'Noto Sans','Noto Sans Devanagari',Arial,sans-serif}
/* Main menu — sliding hover pill, growing underline, current-page highlight.
   Classes are added by js/nav.js to either menu markup. */
.thb-menu{isolation:isolate;align-items:center}
/* Positioned only while shown as a horizontal bar (mobile dropdowns stay absolute) */
@media(min-width:761px){#mainNav.thb-menu{position:relative}}
@media(min-width:901px){.nav-links.thb-menu{position:relative}}
.thb-menu .thb-link{position:relative;z-index:1;display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;color:#06305e;font-weight:600;text-decoration:none;letter-spacing:.01em;transition:color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.thb-menu .thb-link::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#f59b3a,#d35f0b);transform:translateX(-50%);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.thb-menu .thb-link:hover,.thb-menu .thb-link:focus-visible{color:#b9520a;transform:translateY(-1px)}
.thb-menu .thb-link:hover::after,.thb-menu .thb-link:focus-visible::after{width:calc(100% - 32px)}
.thb-menu .thb-link:focus-visible{outline:2px solid #d35f0b;outline-offset:2px}

/* Current page: solid saffron pill with white text */
.thb-menu .thb-link.is-current{color:#fff;background:linear-gradient(135deg,#f59b3a,#d35f0b);box-shadow:0 6px 16px rgba(211,95,11,.28)}
.thb-menu .thb-link.is-current::after{display:none}
.thb-menu .thb-link.is-current:hover{color:#fff}
/* While JS moves the pill, the current link's own background hands over to the pill */
.thb-menu:has(.thb-pill.is-on) .thb-link.is-current{background:transparent;box-shadow:none}
.thb-menu:has(.thb-pill.is-on:not(.on-current)) .thb-link.is-current{color:#b9520a}

/* The sliding pill */
.thb-pill{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:#fff1e3;box-shadow:inset 0 0 0 1px #f6d2ad;opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.2,.9,.25,1.15),width .42s cubic-bezier(.2,.9,.25,1.15),background .3s,box-shadow .3s,opacity .25s}
.thb-pill.is-on{opacity:1}
.thb-pill.on-current{background:linear-gradient(135deg,#f59b3a,#d35f0b);box-shadow:0 6px 16px rgba(211,95,11,.28)}
.thb-menu:has(.thb-pill.on-current) .thb-link.is-current{color:#fff}

/* Gentle entrance */
@keyframes thb-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.thb-menu .thb-link{animation:thb-menu-in .45s cubic-bezier(.2,.8,.2,1) both}
.thb-menu .thb-link:nth-child(2){animation-delay:.04s}.thb-menu .thb-link:nth-child(3){animation-delay:.08s}.thb-menu .thb-link:nth-child(4){animation-delay:.12s}.thb-menu .thb-link:nth-child(5){animation-delay:.16s}.thb-menu .thb-link:nth-child(6){animation-delay:.2s}

/* Home page menu spacing (pill padding replaces the old gap) */
#mainNav.thb-menu{gap:4px}
#mainNav.thb-menu .thb-link{font-size:15px}

/* Stacked mobile menus: no sliding pill, full-width items */
@media(max-width:900px){.nav-links.thb-menu .thb-pill{display:none}.nav-links.thb-menu .thb-link{padding:12px 16px;border-radius:12px}}
@media(max-width:760px){
  .thb-pill{display:none}
  .thb-menu .thb-link{padding:12px 16px;border-radius:12px;width:100%}
  .thb-menu .thb-link::after{left:16px;transform:none}
  .thb-menu .thb-link:hover::after{width:40px}
  .thb-menu .thb-link:hover{background:#fff1e3;transform:none}
  .thb-menu:has(.thb-pill) .thb-link.is-current{color:#fff;background:linear-gradient(135deg,#f59b3a,#d35f0b)}
}
@media(prefers-reduced-motion:reduce){.thb-menu .thb-link,.thb-pill,.thb-menu .thb-link::after{transition:none;animation:none}}

/* Inner pages: header strip matching the home page */
nav.thb-site-nav{position:sticky;top:0;z-index:100;background:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #eef1f4;font-family:var(--f-sans)}
nav.thb-site-nav .inner{width:min(1180px,92%);max-width:none;margin:0 auto;padding:0;height:auto;min-height:74px;display:flex;align-items:center;justify-content:flex-start;gap:26px}
nav.thb-site-nav .thb-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
nav.thb-site-nav .thb-brand img{width:auto;height:56px;object-fit:contain}
nav.thb-site-nav .thb-brand-name{font-family:var(--f-serif);font-size:26px;font-weight:700;color:#06305e;white-space:nowrap;letter-spacing:-.01em;font-style:normal}
nav.thb-site-nav .thb-brand-name em{font-style:normal;color:#f07818}
nav.thb-site-nav .nav-links{margin-left:auto;gap:4px}
nav.thb-site-nav .nav-links .thb-link{font-family:var(--f-sans);font-size:15px;font-weight:600;color:#06305e}
nav.thb-site-nav .nav-links .thb-link.is-current{color:#fff}
nav.thb-site-nav .user-nav-wrap{display:flex;align-items:center}
nav.thb-site-nav .user-nav-signin{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border:1px solid transparent;border-radius:8px;background:linear-gradient(135deg,#f07818,#f59b3a);color:#fff;font:700 14px var(--f-sans);box-shadow:0 6px 14px rgba(240,120,24,.18);cursor:pointer;transition:transform .15s,filter .15s}
nav.thb-site-nav .user-nav-signin:hover{background:linear-gradient(135deg,#f07818,#f59b3a);filter:brightness(1.05);transform:translateY(-1px)}
nav.thb-site-nav .hamburger{margin-left:0}
@media(max-width:900px){
  nav.thb-site-nav .nav-links{margin-left:0;top:100%;background:#fff;padding:14px 4%;box-shadow:0 8px 18px #0001}
  nav.thb-site-nav .user-nav-wrap{margin-left:auto}
}
@media(max-width:760px){
  nav.thb-site-nav .inner{min-height:64px;gap:12px}
  nav.thb-site-nav .thb-brand img{height:44px}
  nav.thb-site-nav .thb-brand-name{font-size:21px}
  nav.thb-site-nav .user-nav-signin{padding:10px 14px;font-size:13px;white-space:nowrap}
}
@media(max-width:420px){
  nav.thb-site-nav .inner{gap:8px}
  nav.thb-site-nav .thb-brand{gap:6px}
  nav.thb-site-nav .thb-brand img{height:36px}
  nav.thb-site-nav .thb-brand-name{font-size:15px;white-space:nowrap}
}
/* narrow phones: logo alone, so search, bookmarks, Sign Up and the menu still fit (same as the home page) */
@media(max-width:389px){nav.thb-site-nav .thb-brand-name{display:none}}

/* Mid widths (tablet / small laptop): 7 menu items + logo + Sign Up must fit */
@media(min-width:761px) and (max-width:1100px){
  .thb-menu .thb-link,#mainNav.thb-menu .thb-link{padding:8px 10px;font-size:14px}
  .site-header .nav-wrap,nav.thb-site-nav .inner,.thb-hdr-wrap{gap:12px}
  .site-header .brand img,nav.thb-site-nav .thb-brand img,.thb-hdr-brand img{height:44px}
  .site-header .brand-name,nav.thb-site-nav .thb-brand-name,.thb-hdr-brand span{font-size:20px}
  .site-header .nav-actions .btn,nav.thb-site-nav .user-nav-signin,.thb-hdr-cta{padding:11px 14px;white-space:nowrap}
  nav.thb-site-nav .thb-brand,.site-header .brand{flex-shrink:0}
}
/* the full menu only fits beside the logo text from 1101 px: logo alone up to there */
@media(min-width:761px) and (max-width:1100px){
  .site-header .brand-name,.thb-hdr-brand span,nav.thb-site-nav .thb-brand-name{display:none}
}
@media(min-width:1101px) and (max-width:1279px){
  .thb-menu .thb-link,#mainNav.thb-menu .thb-link{padding:8px 11px;font-size:14.5px}
  .site-header .nav-wrap,nav.thb-site-nav .inner{gap:14px}
}
@media(min-width:761px){.site-header .nav-actions .btn,nav.thb-site-nav .user-nav-signin{white-space:nowrap}}

/* ---------- Bookmarks (js/bookmarks.js) — shared on every page ---------- */
.bm-nav{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;margin-right:8px;border-radius:50%;color:#06305e;text-decoration:none;transition:background .15s,color .15s}
.bm-nav:hover{background:#fff1e3;color:#d35f0b}
.bm-nav svg{width:22px;height:22px}
.bm-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#f07818;color:#fff;font:700 11px/18px 'Noto Sans',Arial,sans-serif;text-align:center}
.bm-count[hidden]{display:none}
.bm-btn svg,.bm-verse svg{width:18px;height:18px}
.bm-btn.is-saved svg path,.bm-verse.is-saved svg path{fill:currentColor}
.bm-verse{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #efe2d3;border-radius:50%;background:#fff;color:#a07a50;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.bm-verse:hover{border-color:#f59b3a;color:#d35f0b}
.bm-verse.is-saved{background:#fff1e3;border-color:#f59b3a;color:#d35f0b}
/* Save-to-favorites on list cards — js/bookmarks.js adds .bm-save to cards marked data-fav-title */
.fav-wrap{position:relative;display:grid}
.fav-wrap>a{min-width:0}
.fav-host{position:relative}
.bm-save{display:inline-grid;place-items:center;padding:0;border:1px solid #efe2d3;background:#fff;color:#a07a50;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s}
.bm-save svg{width:18px;height:18px}
.bm-save svg path{fill:none}
.bm-save.is-saved svg path{fill:currentColor}
.bm-save:hover{border-color:#f59b3a;color:#d35f0b}
.bm-save:active{transform:scale(.92)}
.bm-save.is-saved{background:#fff1e3;border-color:#f59b3a;color:#d35f0b}
.bm-float{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(6,30,58,.14)}
.bm-float:focus-visible{outline:3px solid #f6a457;outline-offset:2px}
.sb-card.fav-host,.fx-more.fav-host,.tx-row.fav-host{padding-right:60px}
.tx-row.is-target{background:#fff4e8;box-shadow:inset 3px 0 0 #f07818}
.tx-rows .fav-host .bm-float{top:50%;margin-top:-19px}
.sk-save,.pc-save{grid-auto-flow:column;gap:6px;height:36px;padding:0 14px;border-radius:999px;font:600 13px 'Noto Sans',Arial,sans-serif}
.sk-save{margin:12px 0 0}
.sk-save[hidden]{display:none}
.bm-toast{position:fixed;left:50%;bottom:24px;z-index:1000;transform:translate(-50%,20px);padding:12px 20px;border-radius:12px;background:#06305e;color:#fff;font:600 14px 'Noto Sans',Arial,sans-serif;box-shadow:0 12px 30px rgba(6,30,58,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.bm-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.bm-toast a{color:#ffc58f;text-decoration:underline}
@media(max-width:760px){.bm-nav{width:38px;height:38px;margin-right:2px}}
/* Resume prompt + continue-reading lists (js/bookmarks.js) */
.bm-resume{position:fixed;left:50%;bottom:20px;z-index:1000;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:10px 10px 10px 18px;border-radius:14px;background:#06305e;color:#fff;font:500 14px 'Noto Sans',Arial,sans-serif;box-shadow:0 14px 34px rgba(6,30,58,.35);transform:translate(-50%,30px);opacity:0;transition:opacity .25s,transform .25s}
.bm-resume.is-on{opacity:1;transform:translate(-50%,0)}
.bm-resume strong{color:#ffc58f}
.bm-resume-go{flex:none;padding:9px 14px;border:0;border-radius:10px;background:#f07818;color:#fff;font:700 14px 'Noto Sans',Arial,sans-serif;cursor:pointer}
.bm-resume-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.cr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cr-item{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;border-radius:14px;background:#fff;border:1px solid #efe2d3;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.cr-item:hover{border-color:#f59b3a;box-shadow:0 8px 20px rgba(138,90,43,.1)}
.cr-type{font:700 11px 'Noto Sans',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#d35f0b}
.cr-item strong{font-family:'Noto Serif',Georgia,serif;font-size:16px;color:#06305e}
.cr-item small{font:13px 'Noto Sans',Arial,sans-serif;color:#5b6b80}
.cr-bar{height:5px;margin-top:8px;border-radius:999px;background:#f4ece2;overflow:hidden}
.cr-bar i{display:block;height:100%;background:linear-gradient(90deg,#f07818,#f59b3a)}
@media(max-width:560px){.bm-resume{left:12px;right:12px;transform:translateY(30px);flex-wrap:wrap}.bm-resume.is-on{transform:none}.bm-resume span{flex:1 1 100%}}
@media(max-width:760px){.bm-resume{bottom:84px}}
/* ---------- share bar (js/bookmarks.js) ---------- */
.thb-sharebar{width:min(1180px,92%);margin:8px auto 28px;padding:0!important}
.tg-wrap .thb-sharebar,.gt-verse-wrap .thb-sharebar{width:auto;margin:22px 0 18px}
.thb-sharebar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:18px 22px;border-radius:18px;background:linear-gradient(135deg,#fff7ec,#fff 70%);border:1px solid #f3dcc2;box-shadow:0 6px 18px rgba(138,90,43,.07)}
.thb-sharebar-t{margin:0;display:flex;flex-direction:column;gap:2px}
.thb-sharebar-t b{font:700 18px 'Noto Serif',Georgia,serif;color:#06305e}
.thb-sharebar-t span{font:500 13.5px 'Noto Sans Devanagari','Noto Sans',sans-serif;color:#8a5a2b}
.thb-sharebar-b{display:flex;flex-wrap:wrap;gap:10px}
.thb-sharebar-b a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;color:#fff!important;font:700 14.5px 'Noto Sans',Arial,sans-serif;text-decoration:none!important;box-shadow:0 6px 14px rgba(0,0,0,.12);transition:transform .15s,filter .15s}
.thb-sharebar-b a:hover{transform:translateY(-2px);filter:brightness(1.06)}
.thb-sharebar-b a:focus-visible{outline:3px solid #f07818;outline-offset:2px}
.thb-sharebar-b svg{width:20px;height:20px;flex:none}
.thb-sharebar-b .sb-wa{background:#1fa855}
.thb-sharebar-b .sb-fb{background:#1877f2}
.thb-sharebar-b .sb-tg{background:#229ed9}
@media(max-width:580px){
  .thb-sharebar-in{padding:16px}
  .thb-sharebar-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .thb-sharebar-b a{flex-direction:column;justify-content:center;gap:4px;padding:10px 6px;border-radius:14px;font-size:12.5px}
}

/* ---------- print (every page) — clean devotional printout ----------
   Print-only header/footer are added by js/bookmarks.js. On-screen choices
   (e.g. transliteration or meaning switched off) carry over to the printout. */
.thb-print-head,.thb-print-foot{display:none}
@media print{
  @page{margin:16mm 14mm 18mm;
    @bottom-left{content:"thehindubook.com";font:9pt 'Noto Sans',Arial,sans-serif;color:#777}
    @bottom-right{content:"Page " counter(page) " of " counter(pages);font:9pt 'Noto Sans',Arial,sans-serif;color:#777}}
  html,body{background:#fff!important;color:#111!important;font-size:11pt;line-height:1.5}
  *,*::before,*::after{box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
  /* site chrome and interactive parts */
  .main-nav,.thb-site-nav,.thb-foot,footer,.hamburger,.tg-crumbs,.tg-actions,.tg-back,.tg-related,.tg-tabs,
  .sd-reader-bar,.sd-side,.sd-pager,.sd-verse-actions,.sd-v-tools,.sk-share,.thb-sharebar,.bm-btn,.bm-verse,.bm-save,.bm-resume,.bm-toast,
  .wj-overlay,.wj-fab,.thb-acct-menu,.vk-tools,.vk-mosaic,.sd-photo,.tg-photo,iframe,video,audio,form,button,select,input{display:none!important}
  /* single column, full width */
  .tg-wrap,.tx-wrap,.container{width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  .sd-hero,.sd-layout,.tg-hero,.tg-body,.acc-dash-grid{display:block!important}
  main,main section,.sd-body,.tg-card,.sd-v,.sd-verse,.vk-hero,.vk-legacy,.vk-stotra,.sd-quote{background:#fff!important}
  /* keep verses and cards whole, headings with their text */
  h1,h2,h3,h4{break-after:avoid;page-break-after:avoid;color:#111!important}
  .sd-v,.sd-verse,.sd-mean-card,.sd-more-card,.sd-opening,.sd-quote,.vk-block,.vk-legacy,.vk-stotra,.tg-card,.tg-faq details,li,figure,table,.sd-pose{break-inside:avoid;page-break-inside:avoid}
  .sd-v,.sd-verse,.sd-more-card,.sd-opening{border:0!important;border-left:2pt solid #999!important;border-radius:0!important;padding:4pt 0 4pt 10pt!important;margin:0 0 10pt!important}
  .sd-v-dev,.sd-dev,[lang="sa"]{font-size:14pt;line-height:1.7;color:#000!important}
  .sd-roman,.sd-iast,.sd-v-trans,.sd-opening .sd-roman{color:#444!important;opacity:1!important}
  .sd-when,.tg-tags em,.tx-card-tags em{border:1pt solid #bbb!important;color:#333!important}
  a,a:visited{color:#111!important;text-decoration:none!important}
  img{max-width:100%!important}
  details>summary{list-style:none;font-weight:700}
  /* print-only header and footer */
  .thb-print-head{display:flex!important;align-items:center;gap:10pt;flex-wrap:wrap;margin:0 0 14pt;padding:0 0 8pt;border-bottom:1pt solid #999}
  .thb-print-head img{height:28pt;width:auto}
  .thb-print-head span{font:9.5pt 'Noto Sans',Arial,sans-serif;color:#555}
  .thb-print-head strong{margin-left:auto;font:600 10pt 'Noto Sans',Arial,sans-serif;color:#555;text-align:right}
  .thb-print-foot{display:flex!important;align-items:center;gap:14pt;margin:18pt 0 0;padding:10pt 0 0;border-top:1pt solid #999;break-inside:avoid;page-break-inside:avoid}
  .thb-print-qr{flex:none;width:72pt;height:72pt}
  .thb-print-qr canvas,.thb-print-qr img{width:72pt!important;height:72pt!important}
  .thb-print-qr canvas{display:none!important}
  .thb-print-qr img{display:block!important}
  .thb-print-foot p{margin:0;display:flex;flex-direction:column;gap:2pt;font:10pt 'Noto Sans',Arial,sans-serif;color:#333}
  .thb-print-foot b{font-size:11pt;color:#111}
  .thb-print-foot span{font-family:'Noto Sans Mono',Consolas,monospace;font-size:10pt}
  .thb-print-foot small{color:#777}
}
/* ---------- "Next festival" bar under the header (js/bookmarks.js) ---------- */
.thb-fbar{background:linear-gradient(90deg,#fff4e6,#ffe9d1 60%,#fff4e6);border-bottom:1px solid #f3dcc2;font:500 13.5px 'Noto Sans','Noto Sans Devanagari',Arial,sans-serif;color:#1f3150}
.thb-fbar.is-today{background:linear-gradient(90deg,#f07818,#d35f0b);border-bottom-color:#c45708;color:#fff}
.thb-fbar-in{position:relative;display:flex;align-items:center;justify-content:center;width:min(1180px,92%);margin:0 auto;min-height:38px}
.thb-fbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 34px 7px 0;color:inherit!important;text-decoration:none!important;text-align:center;line-height:1.35}
.thb-fbar a:hover .thb-fbar-t b{text-decoration:underline}
.thb-fbar-ic{font-size:16px}
.thb-fbar b{color:#06305e;font-weight:700}
.thb-fbar.is-today b{color:#fff}
.thb-fbar [lang="hi"]{color:#8a5a2b;font-weight:600}
.thb-fbar.is-today [lang="hi"]{color:#ffe7c7}
.thb-fbar em{font-style:normal;font-weight:700;color:#d35f0b}
.thb-fbar small{font-size:12px;color:#7a6a5a}
.thb-fbar-go{font-weight:700;color:#d35f0b}
.thb-fbar.is-today .thb-fbar-go{color:#fff}
.thb-fbar-x{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.6}
.thb-fbar-x:hover,.thb-fbar-x:focus-visible{opacity:1;background:rgba(0,0,0,.06)}
@media(max-width:580px){.thb-fbar{font-size:12.5px}.thb-fbar small,.thb-fbar-go{display:none}.thb-fbar a{gap:6px}.thb-fbar.is-loading .thb-fbar-in{min-height:48px}}
.fbar-off .thb-fbar.is-loading{display:none}
@media print{.thb-fbar{display:none!important}}
/* ---------- installable app (js/bookmarks.js) ---------- */
.thb-foot-app{display:inline-flex;align-items:center;gap:10px;margin:10px 0 0 10px;padding:9px 16px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font:700 14px 'Noto Sans',Arial,sans-serif;cursor:pointer;text-align:left}
.thb-foot-app:hover{background:rgba(255,255,255,.16)}
.thb-foot-app[hidden]{display:none}
.thb-foot-app span:last-child{display:flex;flex-direction:column}
.thb-foot-app small{font-size:11px;font-weight:600;opacity:.8}
.thb-inst-banner{position:fixed;left:50%;bottom:16px;z-index:1100;display:flex;align-items:center;gap:12px;width:min(560px,calc(100% - 24px));padding:12px 12px 12px 14px;border-radius:16px;background:#fff;border:1px solid #f0dcc6;box-shadow:0 18px 44px rgba(6,30,58,.22);transform:translateX(-50%);font-family:'Noto Sans',Arial,sans-serif;animation:thbInstIn .3s ease-out}
@keyframes thbInstIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.thb-inst-banner img{flex:none;border-radius:12px}
.thb-inst-banner p{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.4;color:#4a5a70}
.thb-inst-banner b{font-size:14.5px;color:#06305e}
.thb-inst-go{flex:none;padding:10px 16px;border:0;border-radius:999px;background:linear-gradient(135deg,#f07818,#d35f0b);color:#fff;font:700 14px 'Noto Sans',Arial,sans-serif;cursor:pointer}
.thb-inst-no{flex:none;padding:8px;border:0;background:none;color:#7a8696;font:600 13px 'Noto Sans',Arial,sans-serif;cursor:pointer}
.thb-inst-sheet{position:fixed;inset:0;z-index:1200;display:grid;place-items:end center;background:rgba(6,30,58,.45);padding:12px}
.thb-inst-sheet[hidden]{display:none}
.thb-inst-card{position:relative;width:min(460px,100%);padding:24px 22px 20px;border-radius:20px;background:#fff;font-family:'Noto Sans',Arial,sans-serif;color:#1f3150;box-shadow:0 24px 60px rgba(6,30,58,.3);text-align:center}
.thb-inst-card img{border-radius:14px}
.thb-inst-card h2{margin:10px 0 12px;font:700 19px 'Noto Serif',Georgia,serif;color:#06305e}
.thb-inst-card ol{margin:0 0 12px;padding:0 0 0 20px;text-align:left;font-size:15px;line-height:1.7}
.thb-inst-card p{margin:0;font-size:13.5px;color:#5b6b80}
.thb-inst-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:none;font-size:22px;color:#7a8696;cursor:pointer}
@media(min-width:700px){.thb-inst-sheet{place-items:center}}
@media(max-width:580px){.thb-inst-banner{bottom:10px}.thb-inst-banner p span{display:none}.thb-foot-app{margin-left:0}}
@media print{.thb-inst-banner,.thb-inst-sheet,.thb-foot-app{display:none!important}}
/* Email sign-up messages (js/bookmarks.js) */
.thb-sub-msg{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:#eef7ee;color:#1d6b35;font:600 13.5px 'Noto Sans',Arial,sans-serif;line-height:1.45}
.thb-sub-msg.is-bad{background:#fdecea;color:#a12d22}
.thb-sub-msg[hidden]{display:none}
.thb-foot .thb-sub-msg{background:rgba(255,255,255,.12);color:#d9f7e2}
.thb-foot .thb-sub-msg.is-bad{background:rgba(255,120,100,.18);color:#ffd2cc}
/* ---------- site search (js/bookmarks.js) ---------- */
.thb-search-btn{display:inline-grid;place-items:center;width:42px;height:42px;margin-right:4px;border:0;border-radius:50%;background:none;color:#06305e;cursor:pointer;transition:background .15s}
.thb-search-btn:hover,.thb-search-btn:focus-visible{background:#fff1e3;outline:0}
.thb-search-btn svg{width:21px;height:21px}
.thb-search{position:fixed;inset:0;z-index:1300;display:flex;justify-content:center;align-items:flex-start;padding:9vh 16px 16px;background:rgba(6,30,58,.45);backdrop-filter:blur(2px)}
.thb-search[hidden]{display:none}
html.thb-search-open{overflow:hidden}
.thb-search-box{width:min(640px,100%);max-height:80vh;display:flex;flex-direction:column;border-radius:18px;background:#fff;box-shadow:0 30px 70px rgba(6,30,58,.35);overflow:hidden;font-family:'Noto Sans','Noto Sans Devanagari',Arial,sans-serif}
.thb-search-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #f0e2d2}
.thb-search-top svg{width:22px;height:22px;color:#b07a4a;flex:none}
.thb-search-top input{flex:1;min-width:0;border:0;outline:0;font:500 17px 'Noto Sans','Noto Sans Devanagari',Arial,sans-serif;color:#06305e;background:none}
.thb-search-top input::-webkit-search-cancel-button{display:none}
.thb-search-x{flex:none;padding:4px 8px;border:1px solid #e3d3c0;border-radius:6px;background:#fff;color:#7a8696;font:600 11.5px 'Noto Sans',Arial,sans-serif;cursor:pointer}
.thb-search-list{list-style:none;margin:0;padding:6px;overflow-y:auto}
.thb-search-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;color:#06305e;text-decoration:none}
.thb-search-list a:hover,.thb-search-list a.is-active{background:#fff4e8}
.thb-search-list b{font-weight:600}
.thb-search-list small{font-family:'Noto Serif Devanagari',serif;color:#8a5a2b}
.thb-search-list em{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:#d35f0b;background:#fff1e3;border-radius:999px;padding:2px 9px}
.thb-search-h{padding:8px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7a5a3c}
.thb-search-none{padding:14px 12px;color:#7a8696;font-size:14px}
.thb-search-tip{margin:0;padding:10px 16px;border-top:1px solid #f0e2d2;font-size:12.5px;color:#8a8f99}
/* smart search: answer cards, "did you mean", see all */
.thb-search-list .thb-search-card a{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;margin:2px 0 6px;padding:12px 14px;border:1px solid #f3d9bd;border-radius:14px;background:#fff8f0}
.thb-search-list .thb-search-card a:hover,.thb-search-list .thb-search-card a.is-active{background:#ffefdc}
.thb-search-card .ic{flex:none;font-size:22px;line-height:1.2}
.thb-search-card .bd{display:flex;flex-direction:column;gap:2px;min-width:0}
.thb-search-card .bd b{font-weight:700;color:#06305e}
.thb-search-card .bd span{font-size:14.5px;color:#33465e;line-height:1.45}
.thb-search-card .bd span.dv{font-family:'Noto Serif Devanagari',serif;color:#8a2f00;white-space:pre-line}
.thb-search-card .bd small{font-family:'Noto Sans',Arial,sans-serif;font-size:12.5px;color:#7a6a5a}
.thb-search-card .bd i{font-style:normal;font-size:13px;font-weight:700;color:#d35f0b}
.thb-search-dym{padding:8px 12px;font-size:14px;color:#5b6b80}.thb-search-dym button{padding:0;border:0;background:none;color:#d35f0b;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.thb-search-list .thb-search-all a{justify-content:center;font-size:14px;font-weight:700;color:#d35f0b}
@media(max-width:760px){.thb-search-btn{width:38px;height:38px;margin-right:0}.thb-search{padding:0}.thb-search-box{max-height:100vh;height:100%;border-radius:0}.thb-search-tip{display:none}}
@media print{.thb-search,.thb-search-btn{display:none!important}}
.thb-search-x .t{display:none}
@media(max-width:760px){.thb-search-x .k{display:none}.thb-search-x .t{display:inline}.thb-search-x{padding:6px 10px;font-size:13px}}
/* ---------- display settings (js/bookmarks.js) ---------- */
body{zoom:var(--thb-zoom,1)}
.thb-theme-btn{display:inline-grid;place-items:center;width:42px;height:42px;margin-right:2px;border:0;border-radius:50%;background:none;color:#06305e;cursor:pointer;transition:background .15s}
.thb-theme-btn:hover,.thb-theme-btn:focus-visible{background:#fff1e3;outline:0}
.thb-theme-btn svg{width:20px;height:20px}
.thb-display{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;width:min(1180px,92%);margin:0 auto;padding:14px 0 4px;border-top:1px solid rgba(255,255,255,.12);font:600 13px 'Noto Sans',Arial,sans-serif;color:rgba(255,255,255,.75)}
.thb-display-g{display:inline-flex;align-items:center;gap:4px}
.thb-display-g b{margin-right:4px;font-weight:700;color:rgba(255,255,255,.9)}
.thb-display button{padding:5px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:none;color:#fff;font:600 12.5px 'Noto Sans',Arial,sans-serif;cursor:pointer}
.thb-display button:hover{background:rgba(255,255,255,.1)}
.thb-display button[aria-pressed="true"]{background:#f07818;border-color:#f07818}
.thb-display small{margin-left:4px;color:rgba(255,255,255,.6)}
@media(max-width:760px){.thb-theme-btn{width:36px;height:36px;margin-right:0}}
@media print{.thb-theme-btn,.thb-display{display:none!important}}
/* phones: keep the header to logo · search · bookmarks · sign-in · menu (Light/Dark lives in the footer) */
@media(max-width:560px){.thb-theme-btn{display:none}.thb-search-btn{width:34px;height:34px}.bm-nav{width:34px;height:34px;margin-right:0}}
@media(max-width:380px){nav.thb-site-nav .thb-brand img{height:38px;width:auto}nav.thb-site-nav .thb-brand-name{font-size:16px}nav.thb-site-nav .user-nav-signin{padding:8px 10px;font-size:12.5px}.thb-search-btn,.bm-nav{width:32px;height:32px}}
@media(max-width:340px){nav.thb-site-nav .thb-brand-name{display:none}}
@media(max-width:560px){nav.thb-site-nav .thb-brand{gap:6px;flex:none}nav.thb-site-nav .thb-brand img{height:42px;width:auto}nav.thb-site-nav .thb-brand-name{font-size:18px}nav.thb-site-nav .user-nav-wrap{flex:none}}
@media(max-width:380px){nav.thb-site-nav .thb-brand-name{font-size:15px}}
/* phones: "Sign Up" becomes a round person icon (same link) to make room in the header */
@media(max-width:420px){
  nav.thb-site-nav .user-nav-signin{position:relative;width:36px;height:36px;padding:0!important;border-radius:50%;font-size:0!important;line-height:0}
  nav.thb-site-nav .user-nav-signin::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E")}
}

/* ---------- WhatsApp channel link in the menu (js/bookmarks.js) ---------- */
.nav-wa{display:inline-flex!important;align-items:center;gap:6px;color:#128c4b!important;font-weight:700}
.nav-wa svg{width:18px;height:18px;flex:none}
.nav-wa:hover{color:#0b6b38!important}
/* menu bar: icon only 1280–1439 px, with its label from 1440 px; no room for it between 901 and 1279 px (it stays in the phone menu) */
@media(min-width:901px) and (max-width:1359px){.nav-wa{display:none!important}}
@media(min-width:1360px) and (max-width:1439px){.nav-wa span{display:none}.nav-wa{padding-left:8px!important;padding-right:8px!important}.nav-wa svg{width:20px;height:20px}}

/* ---------- sign-up prompts: under the share bar, and after lighting a diya (js/bookmarks.js) ---------- */
.thb-subline,.thb-subask{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 0 0;padding:14px 44px 14px 18px;border:1px solid #f3dcc2;border-radius:16px;background:linear-gradient(135deg,#fff8ef,#fff3e3);font:500 14.5px/1.5 'Noto Sans','Noto Sans Devanagari',Arial,sans-serif;color:#1f3150}
.thb-subline p,.thb-subask p{flex:1 1 220px;min-width:0;margin:0}
.thb-subline b,.thb-subask b{color:#06305e}
.thb-subline form,.thb-subask form{display:flex;flex:1 1 220px;min-width:0;gap:8px}
.thb-subline input,.thb-subask input{flex:1;min-width:0;padding:10px 14px;border:1.5px solid #ecd9c4;border-radius:999px;font:500 15px 'Noto Sans',Arial,sans-serif;color:#06305e;background:#fff}
.thb-subline input:focus,.thb-subask input:focus{outline:0;border-color:#f07818;box-shadow:0 0 0 3px rgba(240,120,24,.15)}
.thb-subline button[type=submit],.thb-subask button[type=submit]{padding:10px 18px;border:0;border-radius:999px;background:linear-gradient(135deg,#f07818,#d35f0b);color:#fff;font:700 14px 'Noto Sans',Arial,sans-serif;cursor:pointer}
.thb-ask-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:#7a6a5a;font-size:20px;line-height:1;cursor:pointer}
.thb-ask-x:hover,.thb-ask-x:focus-visible{background:rgba(0,0,0,.06)}
.thb-subline+.thb-sub-msg,.thb-subask .thb-sub-msg,.thb-subline .thb-sub-msg{flex-basis:100%;margin:0;font-size:14px;color:#2f7d32}
.thb-sub-msg.is-bad{color:#b42318}
.thb-subask{max-width:640px}
html[data-theme="dark"] .thb-subline,html[data-theme="dark"] .thb-subask{background:#1d2738;border-color:#33445f;color:#e3e8f0}
html[data-theme="dark"] .thb-subline b,html[data-theme="dark"] .thb-subask b{color:#f0d3b0}
html[data-theme="dark"] .nav-wa{color:#4ade80!important}
@media print{.thb-subline,.thb-subask{display:none!important}}
/* home page header: more buttons than the shared menu, so the WhatsApp link stays in the phone menu only;
   between 761 and 900 px its menu is tightened to fit beside the logo */
@media(min-width:761px){#mainNav .nav-wa{display:none!important}}
@media(min-width:761px) and (max-width:900px){#mainNav.thb-menu .thb-link{padding:7px 8px;font-size:13.5px}.site-header .nav-wrap{gap:8px}.site-header .nav-actions{gap:2px}}
@media(min-width:761px) and (max-width:799px){#mainNav.thb-menu .thb-link{padding:6px 6px;font-size:13px}.site-header .brand img{height:38px;width:auto}}
@media(max-width:380px){.thb-subline,.thb-subask{padding:12px 40px 12px 14px}.thb-subline button[type=submit],.thb-subask button[type=submit]{padding:10px 14px}}

/* ---------- Deities dropdown (js/nav.js wraps the Deities link in .thb-dd) ---------- */
.thb-dd{display:inline-flex;align-items:center}
.thb-dd-btn{position:relative;z-index:2;display:grid;place-items:center;width:22px;height:30px;margin-left:-14px;padding:0;border:0;border-radius:6px;background:transparent;color:#06305e;cursor:pointer}
.thb-dd-btn svg{width:12px;height:12px;transition:transform .2s ease}
.thb-dd-btn:focus-visible{outline:2px solid #d35f0b;outline-offset:1px}
.thb-dd.is-open .thb-dd-btn svg{transform:rotate(180deg)}
.thb-menu .thb-dd .thb-link.is-current+.thb-dd-btn{color:#fff}
.thb-menu:has(.thb-pill.is-on:not(.on-current)) .thb-dd .thb-link.is-current+.thb-dd-btn{color:#b9520a}
.thb-dd-panel{display:none;position:absolute;top:calc(100% + 10px);z-index:60;width:min(540px,calc(100vw - 24px));padding:14px;border:1px solid #eadfcf;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(6,48,94,.16);text-align:left}
.thb-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.thb-dd.is-open .thb-dd-panel{display:block;animation:thb-menu-in .2s ease both}
.thb-dd-panel ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
.thb-menu .thb-dd-panel a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;color:#06305e;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;background:none;width:auto}
.thb-menu .thb-dd-panel a:hover,.thb-menu .thb-dd-panel a:focus-visible{background:#fff1e3;color:#b9520a}
.thb-menu .thb-dd-panel a[aria-current]{background:#fff1e3;color:#b9520a}
.thb-dd-panel img{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;background:#f6f0e4}
.thb-dd-panel small{display:block;margin-top:1px;font-size:12px;font-weight:500;color:#5a6578;font-family:'Noto Sans Devanagari',sans-serif}
.thb-menu .thb-dd-panel .thb-dd-all{display:block;margin-top:8px;padding:10px 8px 2px;border-top:1px solid #eef1f4;border-radius:0;color:#c2410c;font-size:13.5px}
/* phones / tablets: the menu is a column, so the list opens inline under Deities */
@media(max-width:900px){
  .nav-links .thb-dd{display:flex;flex-wrap:wrap;width:100%}
  .nav-links .thb-dd>.thb-link{flex:1}
  .nav-links .thb-dd-btn{width:44px;height:44px;margin:0}
  .nav-links .thb-dd-panel{position:static;width:100%;padding:2px 0 8px 10px;border:0;box-shadow:none;background:transparent}
  .nav-links .thb-dd-panel::before{display:none}
  .nav-links .thb-dd-panel ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  #mainNav .thb-dd{display:flex;flex-wrap:wrap;width:100%}
  #mainNav .thb-dd>.thb-link{flex:1}
  #mainNav .thb-dd-btn{width:44px;height:44px;margin:0}
  #mainNav .thb-dd-panel{position:static;width:100%;padding:2px 0 8px 10px;border:0;box-shadow:none;background:transparent}
  #mainNav .thb-dd-panel::before{display:none}
  #mainNav .thb-dd-panel ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){.thb-dd-panel ul{grid-template-columns:1fr!important}}
@media print{.thb-dd-btn,.thb-dd-panel{display:none!important}}
@media(max-width:900px){.thb-menu.nav-links .thb-dd .thb-link.is-current+.thb-dd-btn{color:#06305e}}
@media(max-width:760px){#mainNav.thb-menu .thb-dd .thb-link.is-current+.thb-dd-btn{color:#06305e}}
/* seven menu items (Deities added 2026-10): tighter items at every desktop width, logo alone below 1280 px */
@media(min-width:1280px){
  .thb-menu .thb-link,#mainNav.thb-menu .thb-link{padding:9px 12px}
  nav.thb-site-nav .nav-links,#mainNav.thb-menu{gap:2px}
  nav.thb-site-nav .inner,.site-header .nav-wrap{gap:18px}
}
@media(min-width:1101px) and (max-width:1279px){
  .site-header .brand-name,.thb-hdr-brand span,nav.thb-site-nav .thb-brand-name{display:none}
}
@media(min-width:761px) and (max-width:1100px){
  .thb-menu .thb-link,#mainNav.thb-menu .thb-link{padding:8px 8px;font-size:13.5px}
  #mainNav.thb-menu{gap:0}
}
@media(min-width:761px) and (max-width:1000px){
  .thb-menu .thb-link,#mainNav.thb-menu .thb-link{padding:8px 5px;font-size:13px}
  .thb-dd-btn{margin-left:-6px;width:18px}
  .site-header .nav-wrap,nav.thb-site-nav .inner{gap:8px}
}
nav.thb-site-nav .thb-brand,.site-header .brand{flex-shrink:0}
@media(min-width:1280px) and (max-width:1599px){
  nav.thb-site-nav .thb-brand-name,.site-header .brand-name{font-size:22px}
  nav.thb-site-nav .thb-brand img,.site-header .brand img{height:48px}
}
/* signed in on this browser (html.thb-in, set before drawing): no "Sign Up" flash while the session loads (js/thb-auth.js) */
html.thb-in nav.thb-site-nav .user-nav-signin,html.thb-in .site-header .nav-actions .btn-primary{visibility:hidden}

/* Shared site footer — same design on every page, self-contained */
footer.thb-foot{margin:0;background:linear-gradient(135deg,#0a3a6e,#042949);color:#fff;padding:34px 0 14px;font-family:'Noto Sans','Noto Sans Devanagari',Arial,sans-serif}
.thb-foot *,.thb-foot *::before,.thb-foot *::after{box-sizing:border-box}
.thb-foot-wrap{width:min(1180px,92%);margin:0 auto}
.thb-foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr) 1.25fr;gap:30px}
.thb-foot-logo{display:flex;align-items:center;gap:10px;margin:0 0 6px;text-decoration:none}
.thb-foot-logo img{height:56px;width:auto;background:#fff;border-radius:10px;padding:4px 6px;display:block}
.thb-foot-logo span{font-family:'Noto Serif','Noto Serif Devanagari',Georgia,serif;font-size:26px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:-.01em}
.thb-foot-logo em{font-style:normal;color:#f07818}
.thb-foot h4{margin:8px 0 14px;font-size:16px;font-weight:700;color:#fff;font-family:inherit}
.thb-foot a{display:block;color:#eef5fb;margin:8px 0;font-size:13px;text-decoration:none;transition:color .15s}
.thb-foot a:hover{color:#f59b3a}
.thb-foot p{margin:0;font-size:13px;line-height:1.5;color:#dbe7f2}
.thb-foot-brand p{margin-top:8px}
.thb-foot-social{display:flex;gap:10px;margin-top:14px}
.thb-foot-social span{width:26px;height:26px;border-radius:50%;background:#ffffff22;display:grid;place-items:center;font-size:11px;color:#fff}
.thb-foot-news{display:flex;margin-top:12px;background:#fff;border-radius:5px;overflow:hidden}
.thb-foot-news input{border:0;flex:1;padding:10px;min-width:0;font:13px inherit;font-family:inherit;color:#06305e;outline:0}
.thb-foot-news button{width:42px;border:0;background:#f07818;color:#fff;font-size:20px;cursor:pointer}
.thb-foot-news button:hover{background:#d35f0b}
.thb-foot-bottom{border-top:1px solid #ffffff40;margin-top:28px;padding-top:15px;display:flex;justify-content:space-between;gap:25px;font-size:11px;color:#cbd9e6}
.thb-foot-bottom span:last-child{max-width:420px;text-align:right}
.thb-foot a:focus-visible,.thb-foot button:focus-visible,.thb-foot input:focus-visible{outline:2px solid #f59b3a;outline-offset:2px}
@media(max-width:1050px){.thb-foot-grid{grid-template-columns:2fr 1fr 1fr}.thb-foot-grid>div:nth-child(4),.thb-foot-grid>div:nth-child(5){margin-top:10px}}
@media(max-width:760px){.thb-foot-grid{grid-template-columns:1fr 1fr}.thb-foot-brand{grid-column:1/-1}.thb-foot-bottom{flex-direction:column}.thb-foot-bottom span:last-child{text-align:left}}
@media(max-width:520px){.thb-foot-grid{grid-template-columns:1fr}.thb-foot-brand{grid-column:auto}.thb-foot-logo span{font-size:22px}}
.thb-foot a.thb-foot-logo{display:flex;margin:0 0 6px}
@media(max-width:520px){.thb-foot-grid{grid-template-columns:1fr 1fr;gap:6px 18px}.thb-foot-brand,.thb-foot-grid>div:nth-child(5){grid-column:1/-1}.thb-foot-grid>div:nth-child(4),.thb-foot-grid>div:nth-child(5){margin-top:0}.thb-foot-social span{width:32px;height:32px;font-size:12px}}
.thb-foot a.thb-foot-wa{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;padding:9px 16px 9px 12px;border-radius:12px;background:#25d366;color:#06301c;text-decoration:none;font-weight:700;font-size:14px;line-height:1.2;transition:background .15s,transform .15s}
.thb-foot a.thb-foot-wa:hover{background:#1fbe5a;color:#06301c;transform:translateY(-1px)}
.thb-foot-wa svg{width:24px;height:24px;flex:none}
.thb-foot-wa span{display:flex;flex-direction:column}
.thb-foot-wa small{font-size:11px;font-weight:600;opacity:.8}