/* ===== GLOBAL COMPONENTS ===== */

      /* Ensure a visible gap between label text and the amount (₹...) in summary pills (global) */
      .rc-summary > span b,
      .apy-summary > span b,
      .epf-summary > span b,
      .nps-summary > span b,
      .swp-summary > span b,
      .re-summary > span b,
      .emi-summary > span b,
      .elig-summary > span b {
         display: inline-block;
         margin-left: 4px;
      }

      /* ===== EMPTY HERO BAR ===== */
      .global-hero-bar{
         margin:0 auto;
         max-width:970px;
         min-height:10px;
         padding:6px 2px 0;
         position:relative;
      }
      .hero-bar-inner{
         align-items:center;
         background:var(--bg-hero);
         border:1px solid var(--border-soft);
         border-radius:10px;
         display:flex;
         min-height:27px;
         overflow:hidden;
         padding:0;
      }
      .hero-bar-panel{
         align-items:center;
         display:flex;
         min-height:27px;
         min-width:0;
         padding:0 16px;
      }
      .hero-bar-panel-left{
         flex:0 1 52%;
      }
      .hero-bar-panel-right{
         border-left:none;
         flex:1 1 48%;
         padding-left:18px;
         position:relative;
      }
      .hero-bar-panel-right::before{
         background:linear-gradient(180deg, rgba(190,18,60,0) 0%, rgba(190,18,60,.45) 18%, rgba(255,255,255,.92) 50%, rgba(190,18,60,.45) 82%, rgba(190,18,60,0) 100%);
         box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 10px rgba(190,18,60,.14);
         content:"";
         left:0;
         opacity:.9;
         position:absolute;
         top:12%;
         bottom:12%;
         width:1px;
      }
      .hero-bar-text{
         color:#0f172a;
         font-size:clamp(10px, 4vw, 19px);
         font-weight:800;
         line-height:1.3;
         text-align:left;
      }
      .hero-bar-points{
         display:grid;
         gap:12px;
         grid-template-columns:repeat(3, minmax(0, 1fr));
         width:100%;
      }
      .hero-bar-point{
         color:#374151;
         font-size:13px;
         font-weight:400;
         line-height:1.3;
         text-align:center;
      }
      .hero-bar-check{
         color:#16a34a;
      }
      html.dark .hero-bar-panel-right{
         border-left:none;
      }
      html.dark .hero-bar-panel-right::before{
         background:linear-gradient(180deg, rgba(248,250,252,0) 0%, rgba(248,250,252,.24) 18%, rgba(248,250,252,.72) 50%, rgba(248,250,252,.24) 82%, rgba(248,250,252,0) 100%);
         box-shadow:0 0 0 1px rgba(15,23,42,.25), 0 0 10px rgba(248,250,252,.08);
      }
      html.dark .hero-bar-text{
         color:#f8fafc;
      }
      html.dark .hero-bar-point{
         color:#cbd5e1;
      }
      html.dark .hero-bar-check{
         color:#4ade80;
      }
      html.dark .hero-bar-point{
         color:#94a3b8;
      }

      /* ===== GLOBAL SETTINGS BAR ===== */
      .global-settings{
         margin:0 auto;
         max-width:970px;
         min-height:10px; 
         padding:5px 2px;
         position:relative;
      }
      .settings-inner{
         align-items:center;
         background:var(--bg-card);
         border:1px solid var(--border-soft);
         border-radius:10px;
         display:flex;
         gap:0;
         justify-content:space-between;
         padding:1px 4px;
      }
      .settings-block{
         align-items:center;
         display:flex;
         min-width:0;
         padding:0 12px;
         position:relative;
      }
      .settings-block + .settings-block{
         border-left:none;
      }
      .settings-block + .settings-block::before{
         background:rgba(203,213,225,.95);
         border-radius:999px;
         content:"";
         height:28px;
         left:0;
         position:absolute;
         top:50%;
         transform:translateY(-50%);
         width:1px;
      }
      .settings-message + .settings-quote-block::before{
         left:2px;
      }
      .settings-quote-block + .settings-actions::before{
         left:12px;
      }
      .settings-message{
         flex:0 0 auto;
         overflow:hidden;
         padding-right:10px;
      }
      .settings-tagline{
         color:#334155;
         font-size:13px;
         font-weight:700;
         line-height:1.35;
      }
      .settings-tagline-light{
         font-weight:400;
      }
      .settings-quote-block{
         flex:1 1 auto;
         display:flex;
         justify-content:center;
         padding-left:0;
         padding-right:0;
      }
      .setting-item{
         align-items:center;
         display:flex;
         gap:4px;
      }
      .settings-actions{
         flex:0 0 auto;
         margin-left:2px;
         justify-content:flex-end;
      }
      .settings-actions > #globalClock,
      .settings-actions > #ambientToggle{
         margin-left:0;
         transform:translateX(14px);
      }

      .global-quote{
         color:#475569;
         flex:1 1 auto;
         font-size:13px;
         font-style:italic;
         line-height:1.35;
         min-width:0;
         overflow:hidden;
         padding:0 4px;
         text-align:center;
         text-overflow:ellipsis;
         white-space:nowrap;
      }
      html.dark .settings-block + .settings-block{
         border-left-color:transparent;
      }
      html.dark .settings-block + .settings-block::before{
         background:rgba(148,163,184,.55);
      }
      html.dark .settings-tagline{
         color:#94a3b8;
      }
      html.dark .global-quote{
         color:#cbd5e1;
      }

      .ambient-ticker{
         background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
         border:1px solid #d7dee8;
         border-radius:999px;
         box-shadow:0 4px 12px rgba(15,23,42,.08);
         cursor:pointer;
         display:block;
         margin:0;
         opacity:0;
         overflow:hidden;
         padding:1px 0;
         pointer-events:none;
         position:absolute;
         right:6px;
         text-decoration:none;
         top:calc(100% - 2px);
         transform:translateY(-4px);
         transition:opacity .2s ease, transform .25s ease, box-shadow .2s ease;
         visibility:hidden;
         width:3.8cm;
         z-index:2;
      }
      .ambient-ticker.active{
         opacity:1;
         pointer-events:auto;
         transform:translateY(0);
         visibility:visible;
      }
      .ambient-ticker.active:hover,
      .ambient-ticker.active:focus-visible{
         box-shadow:0 6px 14px rgba(15,23,42,.1);
         opacity:.92;
      }
      .ambient-ticker-track{
         align-items:center;
         color:#334155;
         display:flex;
         justify-content:center;
         min-width:100%;
         padding:0 8px;
         white-space:nowrap;
      }
      .ambient-ticker-text,
      .ambient-ticker-separator{
         font-size:10px;
         font-weight:700;
         letter-spacing:.02em;
         line-height:1.1;
      }
      .ambient-ticker-separator{
         color:#94a3b8;
      }
      html.dark .ambient-ticker{
         background:linear-gradient(180deg,#1f2937 0%,#111827 100%);
         border-color:#334155;
         box-shadow:0 8px 18px rgba(0,0,0,.28);
      }
      html.dark .ambient-ticker.active:hover,
      html.dark .ambient-ticker.active:focus-visible{
         box-shadow:0 10px 20px rgba(0,0,0,.34);
         opacity:.94;
      }
      html.dark .ambient-ticker-track{
         color:#cbd5e1;
      }
      html.dark .ambient-ticker-separator{
         color:#64748b;
      }

      /* DIGITAL CLOCK */
      .global-clock{
         align-items:center;
         background:#ffffff;
         color:#020617;
         border:1px solid #e5e7eb;
         border-radius:12px;
         box-shadow:
         0 4px 12px rgba(2,6,23,0.08);
         display:inline-flex;
         font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
         font-size:16px;
         gap:4px;
         font-weight:700;
         letter-spacing:0.6px;
         min-width:80px;
         padding:3px 14px;
         text-align:center;
      }
      .global-clock-icon{
         font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
         font-size:15px;
         line-height:1;
      }
      .global-clock-time{
         display:inline-block;
      }
      body.dark .global-clock{
         background:#020617;
         border:1px solid #1e293b;
         box-shadow: 0 4px 14px rgba(0,0,0,0.6);
         color:#e5e7eb;
      }

      @media (max-width: 680px){
         .settings-inner{
            gap:0;
         }
         .settings-block{
            padding:0 8px;
         }
         .settings-message{
            flex:0 1 40%;
         }
         .settings-tagline,
         .global-quote{
            font-size:12px;
         }
         .ambient-ticker{
            right:2px;
            width:min(3.5cm, calc(100vw - 28px));
         }
         .ambient-ticker-text,
         .ambient-ticker-separator{
            font-size:10px;
         }
         .global-clock{
            min-width:74px;
            padding:3px 10px;
         }

         /* Ensure a visible gap between label text and the amount (₹...) in summary pills */
         .rc-summary > span b,
         .apy-summary > span b,
         .epf-summary > span b,
         .nps-summary > span b,
         .swp-summary > span b,
         .re-summary > span b {
            display: inline-block;
            margin-left: 4px;
         }
      }

      @media (max-width: 767.98px){
         /* Use fluid spacing so the hero adapts cleanly across mobile widths. */
         .global-hero-bar{
            padding-left:clamp(4px, 1.8vw, 8px);
            padding-right:clamp(4px, 1.8vw, 8px);
         }
         .hero-bar-inner{
            align-items:stretch;
            display:grid;
            grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
         }
         .hero-bar-panel{
            align-items:flex-start;
            min-height:auto;
            padding:clamp(8px, 2.2vw, 12px) clamp(10px, 3vw, 14px);
         }
         .hero-bar-panel-left,
         .hero-bar-panel-right{
            flex:none;
         }
         .hero-bar-panel-right{
            align-items:center;
            justify-content:center;
            padding-left:clamp(10px, 2.8vw, 14px);
         }
         .hero-bar-panel-right::before{
            top:16%;
            bottom:16%;
         }
         .hero-bar-text{
            font-size:clamp(15px, 4.6vw, 18px);
            line-height:1.22;
         }
         .hero-bar-points{
            align-content:center;
            gap:clamp(6px, 1.8vw, 8px);
            grid-template-columns:1fr;
            justify-items:center;
            width:100%;
         }
         .hero-bar-point{
            font-size:clamp(12px, 2.9vw, 13px);
            line-height:1.3;
            text-align:center;
            white-space:normal;
         }

         /* Keep the compact settings row fluid instead of sizing it for one device. */
         .global-settings{
            padding-left:clamp(4px, 1.8vw, 8px);
            padding-right:clamp(4px, 1.8vw, 8px);
         }
         .settings-inner{
            align-items:center;
            background:var(--bg-card);
            border:1px solid var(--border-soft);
            border-radius:10px;
            display:grid;
            gap:clamp(2px, .8vw, 6px);
            grid-template-columns:minmax(0, 1fr) auto;
            padding:clamp(3px, 1.2vw, 5px) clamp(8px, 2.4vw, 12px);
         }
         .settings-block{
            background:transparent;
            border:none;
            border-radius:0;
            min-height:auto;
            padding:0;
            width:auto;
         }
         .settings-block + .settings-block::before{
            display:none;
         }
         .settings-message{
            overflow:visible;
            min-width:0;
            width:100%;
         }
         .settings-tagline{
            font-size:clamp(12px, 3vw, 13px);
            line-height:1.2;
         }
         .settings-quote-block,
         #globalClock{
            display:none;
         }
         .settings-quote-block{
            width:0;
         }
         .settings-actions{
            align-items:center;
            display:flex;
            gap:clamp(0px, .6vw, 4px);
            justify-content:flex-end;
            margin-left:0;
            padding-right:clamp(2px, 1vw, 8px);
            width:auto;
         }
         .settings-actions > #globalClock,
         .settings-actions > #ambientToggle{
            margin-left:0;
            transform:none;
         }
         .settings-actions > #ambientToggle{
            margin-left:clamp(2px, 1vw, 6px);
         }
         .theme-switch{
            transform:none;
            margin-right:0;
         }

         /* Hide the optional ambient ticker in compact mobile mode. */
         .ambient-ticker{
            display:none;
         }
      }

      @media (max-width: 480px){
         /* Small phones need slightly tighter proportions without changing the layout model. */
         .hero-bar-inner{
            grid-template-columns:minmax(0, 1fr) minmax(0, .92fr);
         }
         .hero-bar-text{
            font-size:clamp(14px, 4.4vw, 16px);
         }
         .hero-bar-point{
            font-size:clamp(11px, 2.8vw, 12px);
         }
         .settings-inner{
            padding:3px 8px;
         }
      }


      /* AMBIENT MUSIC BUTTON */
      /* Base button */
      .ambient-btn{
         cursor: pointer;
         background: none;
         border: none;
         font-size: 16px;
         padding: 4px;
         position: relative;
         transition: opacity 0.15s ease, filter 0.15s ease;
      }
      /* 1️⃣ Disabled: grey, crossed */
      .ambient-btn.disabled{
         cursor: not-allowed;
         opacity: 0.35;
      }
      /* 2️⃣ Enabled but NOT playing: colorful + crossed */
      .ambient-btn.ready{
         filter: saturate(1.2);
         opacity: 1;
      }
      /* 3️⃣ Playing: colorful, NO slash */
      .ambient-btn.playing{
         filter: saturate(1.2);
         opacity: 1;
      }
      /* Slash (used for disabled, enabled, paused) */
      .ambient-btn .slash{
         background: #dc2626; /* red slash */
         height: 2px;
         left: 50%;
         pointer-events: none;
         position: absolute;
         top: 50%;
         transform: translate(-50%, -50%) rotate(-45deg);
         width: 18px;
      }
      /* Hide slash ONLY when playing */
      .ambient-btn.playing .slash{
         display: none;
      }


      /* ===== THEME SWITCH (Light/Dark Mode Toggle) ===== */
      .theme-switch{
         background:linear-gradient(180deg,#87ceeb,#e0f2fe); /* day */
         border:none;
         border-radius:999px;
         cursor:pointer;
         height:30px;   /* enough room for moon */
         overflow:hidden; 
         padding:0;
         position:relative;
         transform:translateX(14px);
         transition:background .3s ease, box-shadow .3s ease;
         width:56px;
      }
      /* Dark background + beveled track */
      html.dark .theme-switch{
         background:linear-gradient(180deg,#020617,#0f172a);
         border:1px solid #1e293b;
         box-shadow:
            inset 0 1px 0 #334155,    /* top highlight */
            inset 0 -1px 0 #020617,   /* bottom shadow */
            0 1px 3px #020617;        /* outer lift */
      }
      /* ===== SIDES (inactive replacements) ===== */
      .theme-switch .side{
         align-items:center;
         display:flex;
         height:100%;
         justify-content:center;
         pointer-events:none;
         position:absolute;
         top:0;
         width:50%;
      }
      .theme-switch .left{ left:0; }
      .theme-switch .right{ right:0; }
      .theme-switch .side .icon{
         font-size:14px;
         opacity:0;
         transition:opacity .2s ease, transform .2s ease;
      }
      /* Light mode → flower on right */
      .theme-switch .side.right .flower{
         font-size:18px;
         opacity:1;
         transform:translate(-2px, -2px); /* toward knob + slightly up */
      }
      /* Dark mode → star on left */
      html.dark .theme-switch .side.right .flower{
         opacity:0;
      }
      html.dark .theme-switch .side.left .star{
         opacity:1;
      }
      /* ===== KNOB (active control) ===== */
      .theme-switch .knob{
         align-items:center;
         background:linear-gradient(#ffffff,#f1f5f9);
         border-radius:50%;
         box-shadow: 0 2px 4px #020617, inset 0 1px 0 #ffffff;
         display:flex;
         height:24px;
         justify-content:center;
         left:3px;
         position:absolute;
         top:3px;
         transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
         width:24px;
      }
      /* Dark mode knob */
      html.dark .theme-switch .knob{
         background:linear-gradient(#1e293b,#020617);
         border:1px solid #334155;
      }
      /* Knob movement (math-safe) */
      html.dark .theme-switch .knob{
         transform:translateX(26px);
      }
      /* ===== KNOB ICONS ===== */
      .theme-switch .knob .icon{
         display:none;
         font-size:16px;
         line-height:1;
      }
      /* Light mode → sun */
      .theme-switch .knob .sun{
         color:#f59e0b;
         display:block;
      }
      /* Dark mode → moon */
      html.dark .theme-switch .knob .sun{
         display:none;
      }
      html.dark .theme-switch .knob .moon{
         color:#f8fafc;
         display:block;
      }

      /* ===== BREADCRUMB ===== */
      .breadcrumb{
         color:#64748b;
         font-size:13px;
         margin-bottom:8px;
      }
      .breadcrumb a{
         color:#2563eb;
         text-decoration:none;
      }
      .breadcrumb a:hover{
         text-decoration:underline;
      }

       /* Description Line - custom margin to avoid layout shift */
      .current-calc-desciption-line {
         font-size: 15px;
         color: #60708a;
         font-weight: 400;
         text-align: left;
         margin-top: -10px;
         margin-bottom: -10px;
      }

      /* ===== DIVIDER ===== */
      .divider{
         background:#e2e8f0;
         border:none;
         height:1px;
         margin:14px 0;
      }

      /* ===== SOFT DIVIDER ===== */
      .soft-divider{
         background:linear-gradient(to right,transparent,#e5e7eb,transparent);
         border:none;
         height:1px;
         margin:30px 0;
      }

      /* ===== BADGE =====*/
      .badge{
         border-radius:999px;
         font-size:11px;
         font-weight:700;
         letter-spacing:.2px;
         padding:4px 8px;
         position:absolute;
         right:12px;
         top:12px;  
      }
      .badge.popular{
         background:#e0e7ff;
         color:#3730a3;
      }
      .badge.new{
         background:#dcfce7;
         color:#166534;
      }

      /* ===== LOAD MORE BUTTON ===== */
      .load-more-btn{
         background:#64748b;
         border:none;
         border-radius:999px;
         box-shadow:0 4px 10px rgba(0,0,0,.18);
         color:#ffffff;
         cursor:pointer;
         font-size:12.5px;
         font-weight:600;
         letter-spacing:.2px;
         padding:8px 18px;
         transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
      }
      .load-more-btn:hover{
         background:#334155;
         box-shadow:0 6px 14px rgba(0,0,0,.25);
         transform:translateY(-1px);
      }
      .load-more-btn:active{
         transform:translateY(0);
      }
      
      /* ===== BACK BUTTON ===== */
      .back-icon-btn{
         align-items:center;
         background:#4c729b;  
         border:1px solid #e2e8f0;
         border-radius:50%;
         color:#ffffff; 
         cursor:pointer;
         display:inline-flex;
         margin-left:5px;
         margin-top:8px;
         height:40px;
         justify-content:center;
         width:40px;
      }
      .back-icon-btn svg{
         height:24px;
         width:24px;
      }