:root{
     --bg:#ffffff;
     --panel:#ffffff;
     --muted:#6b7280;
     --accent:#FF7A00;
     --accent-light:#fff8f0;
     --shadow: 0 20px 40px rgba(15,23,42,0.10);
     --radius:14px;
     --divider: #f0f2f6;
     --text:#111827;
   }

   /* Remove bullets everywhere inside panel */
   .mobile-panel ul{ list-style:none; margin:0; padding:0; }

   /* ---------- Mobile panel base (hidden by default) ---------- */
   .mobile-panel-overlay{
     display:none;
     position:fixed;
     inset:0;
     z-index:900;
     background: rgba(10,15,25,0.45);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     transition: opacity .28s ease;
     opacity:0;
     pointer-events:none;
   }
   .mobile-panel{
     position:fixed;
     right:0;
     top:0;
     height:100dvh;
     height:100vh;
     width:88%;
     max-width:400px;
     background:var(--panel);
     box-shadow: -8px 0 40px rgba(15,23,42,0.14);
     border-top-left-radius:20px;
     border-bottom-left-radius:20px;
     transform:translateX(105%);
     transition: transform .38s cubic-bezier(.2,.9,.25,1);
     display:flex;
     flex-direction:column;
     overflow:hidden;
     z-index:901;
   }
   .mobile-panel.open{ transform:translateX(0); }
   .mobile-panel-overlay.open{ display:block; opacity:1; pointer-events:auto; }

   /* panel header */
   .panel-head{
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:16px 18px;
     border-bottom:1px solid var(--divider);
     background: linear-gradient(135deg, #fff9f0 0%, #ffffff 100%);
     flex-shrink:0;
   }
   .panel-brand{
     display:flex;
     gap:10px;
     align-items:center;
   }
   .panel-brand .brand-title{
     font-weight:800;
     font-size:17px;
     background: linear-gradient(135deg, #FF7A00, #FFC700);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   .panel-close{
     background: #f4f5f7;
     border:0;
     width:34px;
     height:34px;
     border-radius:50%;
     font-size:16px;
     cursor:pointer;
     display:flex;
     align-items:center;
     justify-content:center;
     color:#6b7280;
     transition: background 0.2s ease, color 0.2s ease;
     flex-shrink:0;
   }
   .panel-close:hover{ background:#fee2d5; color:#FF7A00; }

   /* scrollable content area */
   .panel-body{
     overflow-y:auto;
     overflow-x:hidden;
     flex:1;
     -webkit-overflow-scrolling:touch;
   }

   /* section group */
   .panel-section{ padding:8px 0; }

   .panel-item{
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:14px 20px;
     cursor:pointer;
     transition: background 0.15s ease;
     gap:12px;
   }
   .panel-item:hover{ background: #f9fafb; }
   .panel-item:active{ background: var(--accent-light); }

   .panel-item > div { flex:1; min-width:0; }
   .panel-item h4{
     margin:0;
     font-size:15px;
     font-weight:700;
     color:var(--text);
     line-height:1.3;
   }
   .panel-item .subtext{
     font-size:12px;
     color:var(--muted);
     font-weight:500;
     margin:2px 0 0;
   }

   /* right arrow/chevron */
   .chev{
     font-size:15px;
     color:#c4c9d4;
     flex-shrink:0;
     transition: transform .2s ease, color .2s ease;
     line-height:1;
   }
   .chev.rotate{ transform:rotate(180deg); color:var(--accent); }

   /* divider between items */
   .panel-item + .panel-item,
   .submenu + .panel-item {
     border-top:1px solid var(--divider);
   }

   /* CTA row at bottom */
   .panel-cta-row{
     display:flex;
     gap:10px;
     padding:16px 18px;
     border-top:1px solid var(--divider);
     background: #ffffff;
     flex-shrink:0;
   }
   .panel-cta-row .btn-ghost,
   .panel-cta-row .btn-primary {
     flex:1;
     text-align:center;
     cursor:pointer;
     font-size:14px;
   }

   .btn-ghost{
     padding:11px 14px;
     background:transparent;
     border-radius:10px;
     border:1.5px solid #e5e7eb;
     font-weight:700;
     color:#374151;
     transition: border-color 0.2s ease, color 0.2s ease;
   }
   .btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }

   .btn-primary{
     background: linear-gradient(135deg, #FF7A00, #FF9E3B);
     color:#fff;
     padding:11px 16px;
     border-radius:999px;
     font-weight:700;
     border:0;
     box-shadow: 0 6px 20px rgba(255,122,0,0.28);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
   .btn-primary:hover{
     transform: translateY(-1px);
     box-shadow: 0 10px 28px rgba(255,122,0,0.36);
   }

   /* submenu accordion */
   .submenu{
     max-height:0;
     overflow:hidden;
     transition: max-height .3s ease;
     background: #f9fafb;
   }
   .submenu.open{ max-height:600px; }

   .submenu li a{
     display:flex;
     align-items:center;
     gap:8px;
     padding:11px 28px;
     color:#374151;
     text-decoration:none;
     font-weight:600;
     font-size:14px;
     border-top:1px solid #eef0f3;
     transition: background 0.15s ease, color 0.15s ease;
   }
   .submenu li:first-child a{ border-top:none; }
   .submenu li a:hover{ background:#fff3e6; color:var(--accent); }

   /* panel-list spacing */
   .panel-list{ padding:0; }

   /* tiny caption */
   .panel-subtitle{ font-size:12px; color:var(--muted); margin-top:4px; }

   /* ---------- Mobile-only: show button and panel ---------- */
   @media (max-width: 768px){
     .mobile-panel-overlay{ display:block; opacity:0; pointer-events:none; }
   }

   /* Desktop fallback: always hide panel */
   @media (min-width: 769px){
     .mobile-panel-overlay{ display:none !important; }
     .mobile-panel{ display:none !important; }
   }