@font-face {
       font-family: 'Qurova';
       src: url('https://cdn.cosmocrypt.com/vendor/fonts/qurova-medium.otf') format('opentype');
       font-weight: 500;
       font-style: normal;
       font-display: swap;
   }

   /* =========================================================================
       1. DESIGN SYSTEM: MULTI-SHADE WINE & WARM PARCHMENT PALETTE
       Sophisticated tonal hierarchy for modals, dropdowns, drawer & icons
       ========================================================================= */
   :root {
       /* Curated Wine Palette Hierarchy */
       --color-twilight: #5A2132;
       /* Primary Brand Wine */
       --color-twilight-deep: #431623;
       /* Deep Burgundy Heading / Focus */
       --color-twilight-accent: #7D2D42;
       /* Warm Garnet Accent (Icons, Chevrons) */
       --color-twilight-light: #943E54;
       /* Rose-Wine Hover Tint */
       --color-twilight-muted: #7E4B59;
       /* Elegant Secondary / Subtitles */
       --color-twilight-subtle: #9E6C79;
       /* Tertiary Captions & Muted Text */

       /* Surfaces & Elevations */
       --color-twilight-surface: #EFE9E9;
       /* Base Canvas Background */
       --color-surface-elevated: #FAF7F7;
       /* Modal & Drawer Elevated Surface */
       --color-surface-dropdown: rgba(253, 250, 250, 0.97);
       /* Dropdown Card Glass */
       --color-surface-card: rgba(255, 255, 255, 0.65);
       /* Translucent Card */
       --color-surface-input: #FAF8F8;
       /* Input Box Crisp Canvas */

       /* Functional Semantic Harmony */
       --color-amber-accent: #A66528;
       /* Warm Amber / Warning */
       --color-emerald-accent: #23652E;
       /* Deep Forest Emerald / Valid */
       --color-rose-accent: #9E1F35;
       /* Crisp Rose-Ruby / Corrupt */
       --color-cyan-accent: #2B657A;
       /* Slate Azure / Info */

       /* Legacy Aliases */
       --color-earthy-slate: #7E4B59;
       --color-earthy-slate-light: #FAF7F7;
       --color-sage-mist: #EFE9E9;
       --color-sage-mist-bright: #FAF7F7;
       --color-sage-mist-dark: #7D2D42;
       --color-sage-mist-glow: rgba(140, 58, 78, 0.25);
       --color-sage-mist-subtle: rgba(140, 58, 78, 0.08);

       --text-main: #5A2132;
       --text-muted: #7E4B59;
       --text-subtle: #9E6C79;

       --font-display: 'Space Grotesk', -apple-system, sans-serif;
       --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;

       --radius-sm: 8px;
       --radius-md: 14px;
       --radius-lg: 20px;
       --radius-xl: 28px;
       --radius-full: 9999px;

       --card-glass: rgba(255, 255, 255, 0.65);
       --card-border: rgba(90, 33, 50, 0.16);
       --card-border-active: #7D2D42;
       --card-shadow: 0 20px 45px -12px rgba(90, 33, 50, 0.12), 0 0 1px 1px rgba(90, 33, 50, 0.06);
   }

   /* =========================================================================
       2. STRICT INTERACTION RESTRICTIONS (USER PROMPT SPECIFICATIONS):
          - Remove blue highlight on click in phone view
          - Remove scrollbar completely
          - Remove text selection to prevent copying result using finger, cursor, etc.
       ========================================================================= */
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       /* Remove blue highlight layer on tap/click across all browsers & phones */
       -webkit-tap-highlight-color: transparent !important;
       -webkit-touch-callout: none !important;
       outline: none;
       text-decoration: none !important;
   }

   *,
   *::before,
   *::after {
       text-decoration: none !important;
   }

   a,
   button,
   input,
   select,
   textarea,
   .nav-btn,
   .btn-secondary,
   .btn-sage-mist,
   .btn-danger,
   .about-mobile-card,
   .brand-group,
   .nav-sub-item {
       text-decoration: none !important;
   }

   a:hover,
   a:focus,
   a:active,
   a:visited,
   button:hover,
   button:focus {
       text-decoration: none !important;
   }

   /* Global suppression of text selection & dragging */
   html,
   body,
   button,
   a,
   input,
   textarea,
   div,
   span,
   p,
   h1,
   h2,
   h3,
   h4,
   label {
       -webkit-user-select: none !important;
       -moz-user-select: none !important;
       -ms-user-select: none !important;
       user-select: none !important;
   }

   /* Keep inputs focusable and typable while forbidding selection/copy of text */
   input[type="text"],
   input[type="password"] {
       -webkit-user-select: text !important;
       user-select: text !important;
   }

   /* Remove scrollbars entirely across Chrome, Safari, Firefox, Edge */
   html,
   body,
   div,
   main,
   nav,
   section,
   ul {
       scrollbar-width: none !important;
       -ms-overflow-style: none !important;
   }

   ::-webkit-scrollbar {
       display: none !important;
       width: 0 !important;
       height: 0 !important;
   }

   body {
       background-color: #EFE9E9 !important;
       background-image:
           radial-gradient(circle at 50% 0%, rgba(239, 233, 233, 0.8) 0%, transparent 60%),
           radial-gradient(circle at 10% 25%, rgba(239, 233, 233, 0.9) 0%, transparent 50%),
           radial-gradient(circle at 90% 75%, rgba(239, 233, 233, 0.5) 0%, transparent 50%),
           linear-gradient(180deg, #EFE9E9 0%, #EFE9E9 50%, #EFE9E9 100%) !important;
       background-attachment: fixed;
       color: #5A2132 !important;
       font-family: var(--font-body);
       min-height: 100vh;
       overflow-x: hidden;
       line-height: 1.5;
   }

   /* Typography Utilities */
   .font-qurova,
   .font-display {
       font-family: var(--font-display);
   }

   .font-mono {
       font-family: var(--font-mono);
   }

   /* Glassmorphism Classes */
   .glass-card {
       background: var(--card-glass);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       box-shadow: var(--card-shadow);
       transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .glass-card:hover {
       border-color: var(--card-border-active);
   }

   .glass-dropdown-card {
       background: rgba(253, 250, 250, 0.97);
       backdrop-filter: blur(28px);
       -webkit-backdrop-filter: blur(28px);
       border: 1.5px solid rgba(90, 33, 50, 0.16);
       box-shadow: 0 25px 60px -15px rgba(90, 33, 50, 0.18), 0 0 0 1px rgba(90, 33, 50, 0.06);
   }

   /* Primary Action Buttons */
   .btn-sage-mist {
       background: linear-gradient(135deg, #FAF7F7 0%, #F5ECEC 100%) !important;
       color: #5A2132 !important;
       border: 1.5px solid #5A2132 !important;
       font-weight: 700;
       padding: 10px 22px;
       border-radius: var(--radius-md);
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-family: var(--font-display);
       font-size: 13.5px;
       letter-spacing: 0.02em;
       transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
       box-shadow: 0 8px 24px -4px rgba(90, 33, 50, 0.2);
       text-decoration: none !important;
   }

   .btn-sage-mist svg {
       stroke: #5A2132 !important;
   }

   .btn-sage-mist:hover:not(:disabled) {
       transform: translateY(-2px);
       box-shadow: 0 12px 30px -4px rgba(90, 33, 50, 0.3);
       background: #5A2132 !important;
       color: #FAF7F7 !important;
       border-color: #5A2132 !important;
   }

   .btn-sage-mist:hover:not(:disabled) svg {
       stroke: #FAF7F7 !important;
   }

   .btn-sage-mist:active:not(:disabled) {
       transform: translateY(0);
   }

   .btn-sage-mist:disabled {
       opacity: 0.45;
       cursor: not-allowed;
       box-shadow: none;
   }

   .btn-secondary {
       background: rgba(140, 58, 78, 0.08) !important;
       border: 1.5px solid rgba(140, 58, 78, 0.22) !important;
       color: #72273B !important;
       padding: 9px 18px;
       border-radius: var(--radius-md);
       cursor: pointer;
       font-size: 13px;
       font-weight: 700;
       display: inline-flex;
       align-items: center;
       gap: 7px;
       transition: all 0.25s ease;
       text-decoration: none !important;
   }

   .btn-secondary:hover:not(:disabled) {
       background: #5A2132 !important;
       border-color: #5A2132 !important;
       color: #FAF7F7 !important;
       transform: translateY(-1px);
       box-shadow: 0 6px 16px -2px rgba(90, 33, 50, 0.25);
   }

   .btn-secondary:disabled {
       opacity: 0.35;
       cursor: not-allowed;
   }

   .btn-danger {
       background: rgba(158, 31, 53, 0.08) !important;
       border: 1.5px solid rgba(158, 31, 53, 0.25) !important;
       color: #9E1F35 !important;
       padding: 7px 14px;
       border-radius: var(--radius-sm);
       cursor: pointer;
       font-size: 12px;
       font-weight: 700;
       display: inline-flex;
       align-items: center;
       gap: 5px;
       transition: all 0.2s ease;
       text-decoration: none !important;
   }

   .btn-danger:hover:not(:disabled) {
       background: #9E1F35 !important;
       border-color: #9E1F35 !important;
       color: #FAF7F7 !important;
   }

   .btn-danger:disabled {
       opacity: 0.3;
       cursor: not-allowed;
   }

   /* Badges & Tags */
   .badge-pill {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 4px 12px;
       border-radius: var(--radius-full);
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.03em;
       border: 1px solid #c4b5fd;
       background: #ede9fe;
       color: #6d28d9;
   }

   .badge-valid {
       background: #dcfce7 !important;
       border-color: #86efac !important;
       color: #15803d !important;
       box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
   }

   .badge-error {
       background: #fee2e2 !important;
       border-color: #fca5a5 !important;
       color: #dc2626 !important;
       box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
   }

   .badge-warn {
       background: #fef3c7 !important;
       border-color: #fde68a !important;
       color: #b45309 !important;
       box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
   }

   .badge-msg-hint {
       display: inline;
   }

   /* Header & Navigation Styles */
   header.site-header {
       position: sticky;
       top: 0;
       z-index: 1000;
       width: 100%;
       padding: 16px 24px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #EFE9E9 !important;
       backdrop-filter: blur(24px);
       -webkit-backdrop-filter: blur(24px);
       border-bottom: 1.5px solid rgba(90, 33, 50, 0.15) !important;
   }

   @media (min-width: 1024px) {
       header.site-header {
           padding: 18px 48px;
       }
   }

   .brand-group {
       display: flex;
       align-items: center;
       gap: 12px;
       text-decoration: none;
       color: inherit;
   }

   .brand-logo-img {
       width: 32px;
       height: 32px;
       object-fit: cover;
       border-radius: 7px;
       box-shadow: 0 2px 8px rgba(90, 33, 50, 0.18);
       vertical-align: middle;
       flex-shrink: 0;
       position: relative;
       top: -0.5mm;
       transition: transform 0.2s ease;
   }

   .brand-group:hover .brand-logo-img {
       transform: scale(1.06);
   }

   .brand-title {
       font-family: 'Qurova', sans-serif !important;
       font-weight: 500 !important;
       font-size: 15px !important;
       letter-spacing: 0.16em !important;
       color: #5A2132 !important;
       text-transform: uppercase !important;
       line-height: 1.15;
   }

   .brand-subtitle {
       font-family: 'Qurova', sans-serif !important;
       font-size: 8.5px !important;
       color: #5A2132 !important;
       opacity: 0.85;
       letter-spacing: 0.10em !important;
       text-transform: uppercase !important;
       font-weight: 500 !important;
       line-height: 1.2;
       margin-top: 2px;
   }

   .drawer-brand-title {
       font-family: 'Qurova', sans-serif !important;
       font-weight: 500 !important;
       font-size: 13px !important;
       letter-spacing: 0.16em !important;
       color: #5A2132 !important;
       text-transform: uppercase !important;
       line-height: 1.2;
   }

   .drawer-brand-subtitle {
       font-family: 'Qurova', sans-serif !important;
       font-size: 8.5px !important;
       font-weight: 500 !important;
       color: #5A2132 !important;
       opacity: 0.85;
       letter-spacing: 0.10em !important;
       text-transform: uppercase !important;
       margin-top: 3px;
       line-height: 1.2;
   }

   /* Desktop Navigation Bar */
   .about-desktop-nav {
       display: none;
   }

   @media (min-width: 1220px) {
       .about-desktop-nav {
           display: flex;
           align-items: center;
           gap: 18px;
           background: rgba(90, 33, 50, 0.08) !important;
           backdrop-filter: blur(20px);
           -webkit-backdrop-filter: blur(20px);
           border: 1px solid rgba(90, 33, 50, 0.18) !important;
           border-radius: var(--radius-md);
           padding: 6px 18px;
       }
   }

   .nav-dropdown {
       position: relative;
   }

   .nav-btn {
       color: var(--color-twilight) !important;
       background: transparent;
       border: none;
       cursor: pointer;
       font-size: 12px;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 5px;
       padding: 6px 8px;
       transition: color 0.2s ease;
       font-family: var(--font-body);
   }

   .nav-btn svg {
       stroke: var(--color-twilight-accent) !important;
       transition: transform 0.25s ease, stroke 0.25s ease;
   }

   .nav-btn:hover {
       color: var(--color-twilight-deep) !important;
   }

   .nav-dropdown:hover .nav-btn svg {
       stroke: var(--color-twilight) !important;
       transform: rotate(180deg);
   }

   .nav-dropdown-menu {
       position: absolute;
       left: 50%;
       top: 100%;
       transform: translateX(-50%) translateY(8px);
       width: 580px;
       padding: 16px;
       border-radius: var(--radius-lg);
       opacity: 0;
       visibility: hidden;
       transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
       z-index: 1050;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 8px;
       pointer-events: none;
   }

   .nav-dropdown-menu.narrow {
       width: 360px;
       grid-template-columns: 1fr;
   }

   .nav-dropdown:hover .nav-dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateX(-50%) translateY(0);
       pointer-events: auto;
   }

   .nav-sub-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 9px 12px;
       border-radius: var(--radius-md);
       text-decoration: none;
       color: var(--color-twilight) !important;
       background: transparent;
       border: 1px solid transparent;
       transition: all 0.2s ease;
       cursor: pointer;
   }

   .nav-sub-item:hover {
       background: rgba(90, 33, 50, 0.06) !important;
       border-color: rgba(90, 33, 50, 0.18) !important;
       transform: translateY(-1px);
   }

   .nav-sub-item .item-icon {
       width: 34px;
       height: 34px;
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       flex-shrink: 0;
       transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .nav-sub-item:hover .item-icon {
       transform: scale(1.12);
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
   }

   /* Authentic Cosmo Crypt Multi-Color Category Palette */
   .icon-purple,
   .card-icon-box.icon-purple {
       background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
       color: #7c3aed !important;
       border: 1px solid rgba(124, 58, 237, 0.3) !important;
   }

   .icon-emerald,
   .card-icon-box.icon-emerald {
       background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
       color: #16a34a !important;
       border: 1px solid rgba(22, 163, 74, 0.3) !important;
   }

   .icon-cyan,
   .card-icon-box.icon-cyan {
       background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
       color: #0284c7 !important;
       border: 1px solid rgba(2, 132, 199, 0.3) !important;
   }

   .icon-fuchsia,
   .card-icon-box.icon-fuchsia {
       background: linear-gradient(135deg, #fae8ff 0%, #f5d0fe 100%) !important;
       color: #c026d3 !important;
       border: 1px solid rgba(192, 38, 211, 0.3) !important;
   }

   .icon-blue,
   .card-icon-box.icon-blue {
       background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
       color: #2563eb !important;
       border: 1px solid rgba(37, 99, 235, 0.3) !important;
   }

   .icon-teal,
   .card-icon-box.icon-teal {
       background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%) !important;
       color: #0d9488 !important;
       border: 1px solid rgba(13, 148, 136, 0.3) !important;
   }

   .icon-rose,
   .card-icon-box.icon-rose {
       background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%) !important;
       color: #e11d48 !important;
       border: 1px solid rgba(225, 29, 72, 0.3) !important;
   }

   .icon-orange,
   .card-icon-box.icon-orange {
       background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
       color: #ea580c !important;
       border: 1px solid rgba(234, 88, 12, 0.3) !important;
   }

   .icon-amber,
   .card-icon-box.icon-amber {
       background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
       color: #d97706 !important;
       border: 1px solid rgba(217, 119, 6, 0.3) !important;
   }

   .icon-crimson,
   .card-icon-box.icon-crimson {
       background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
       color: #dc2626 !important;
       border: 1px solid rgba(220, 38, 38, 0.3) !important;
   }

   .icon-lime,
   .card-icon-box.icon-lime {
       background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%) !important;
       color: #65a30d !important;
       border: 1px solid rgba(101, 163, 13, 0.3) !important;
   }

   .icon-indigo,
   .card-icon-box.icon-indigo {
       background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
       color: #4f46e5 !important;
       border: 1px solid rgba(79, 70, 229, 0.3) !important;
   }

   .nav-sub-item .item-title {
       font-size: 12.5px;
       font-weight: 700;
       color: var(--color-twilight-deep) !important;
       display: block;
       line-height: 1.2;
   }

   .nav-sub-item .item-desc {
       font-size: 10.5px;
       color: var(--color-twilight-muted) !important;
       display: block;
       margin-top: 2px;
       line-height: 1.2;
   }

   /* Mobile Hamburger Toggle */
   .mobile-menu-toggle {
       width: 38px;
       height: 38px;
       border-radius: var(--radius-md);
       background: rgba(140, 58, 78, 0.09) !important;
       border: 1.5px solid rgba(140, 58, 78, 0.24) !important;
       color: var(--color-twilight) !important;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 4px;
       cursor: pointer;
       transition: all 0.25s ease;
   }

   .mobile-menu-toggle:hover {
       background: rgba(90, 33, 50, 0.16) !important;
       border-color: var(--color-twilight) !important;
   }

   .mobile-menu-toggle span {
       width: 18px;
       height: 2px;
       background: var(--color-twilight) !important;
       border-radius: 2px;
       transition: all 0.25s ease;
   }

   @media (min-width: 1220px) {
       .mobile-menu-toggle {
           display: none;
       }
   }

   /* =========================================================================
       3. MOBILE SLIDING DRAWER SYSTEM (ABOUT TEMPLATE 4-PAGE ARCHITECTURE)
       ========================================================================= */
   #about-mobile-menu-backdrop {
       position: fixed;
       inset: 0;
       background: rgba(239, 233, 233, 0.65);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       z-index: 99990;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.35s ease;
   }

   body.about-menu-open #about-mobile-menu-backdrop {
       opacity: 1;
       pointer-events: auto;
   }

   #about-mobile-menu {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       width: 86%;
       max-width: 380px;
       background: linear-gradient(180deg, #FAF7F7 0%, #F5ECEC 100%) !important;
       backdrop-filter: blur(32px);
       -webkit-backdrop-filter: blur(32px);
       border-left: 1.5px solid rgba(90, 33, 50, 0.16) !important;
       z-index: 99995;
       transform: translateX(100%);
       transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
       display: flex;
       flex-direction: column;
       padding: 24px 20px;
       box-shadow: -20px 0 60px rgba(90, 33, 50, 0.22);
       overflow: hidden;
       color: var(--color-twilight) !important;
   }

   body.about-menu-open #about-mobile-menu {
       transform: translateX(0%);
   }

   .drawer-close-btn {
       position: absolute;
       top: 18px;
       right: 18px;
       width: 36px;
       height: 36px;
       border-radius: var(--radius-md);
       background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
       border: 1.5px solid rgba(220, 38, 38, 0.35) !important;
       color: #dc2626 !important;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       z-index: 50;
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15) !important;
   }

   .drawer-close-btn svg {
       stroke: #dc2626 !important;
       transition: stroke 0.2s ease;
   }

   .drawer-close-btn:hover {
       background: #dc2626 !important;
       color: #FAF7F7 !important;
       border-color: #dc2626 !important;
       transform: rotate(90deg) scale(1.05);
       box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
   }

   .drawer-close-btn:hover svg {
       stroke: #FAF7F7 !important;
   }

   #about-drawer-viewport {
       position: relative;
       width: 100%;
       height: 100%;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       padding-top: 36px;
   }

   #about-drawer-slider {
       width: 400%;
       height: 100%;
       display: flex;
       transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
       will-change: transform;
   }

   .drawer-page {
       width: 25%;
       height: 100%;
       display: flex;
       flex-direction: column;
       padding: 0 4px;
       overflow-y: auto;
   }

   /* Direct Text Back Link for Mobile Sub-Drawers (Zero Box, Zero Border) */
   .drawer-back-link {
       background: transparent !important;
       border: none !important;
       outline: none !important;
       box-shadow: none !important;
       padding: 6px 0 !important;
       margin-bottom: 14px !important;
       width: fit-content !important;
       display: inline-flex !important;
       align-items: center !important;
       gap: 7px !important;
       font-size: 13.5px !important;
       font-weight: 700 !important;
       color: #5A2132 !important;
       font-family: var(--font-display), sans-serif !important;
       cursor: pointer !important;
       text-decoration: none !important;
       transition: all 0.2s ease !important;
   }

   .drawer-back-link:hover {
       color: #8C3A4E !important;
       transform: translateX(-3px);
   }

   .drawer-back-link svg {
       stroke: #5A2132 !important;
       transition: transform 0.2s ease, stroke 0.2s ease;
   }

   .drawer-back-link:hover svg {
       stroke: #8C3A4E !important;
       transform: translateX(-2px);
   }

   .shard-label-desktop {
       display: inline;
   }

   .shard-label-mobile {
       display: none;
   }

   .about-mobile-card {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 13px 14px;
       background: rgba(255, 255, 255, 0.72) !important;
       border: 1px solid rgba(90, 33, 50, 0.13) !important;
       border-radius: var(--radius-md);
       margin-bottom: 8px;
       cursor: pointer;
       text-decoration: none;
       color: var(--color-twilight) !important;
       box-shadow: 0 4px 14px rgba(90, 33, 50, 0.05);
       transition: all 0.2s ease;
   }

   .about-mobile-card:hover {
       background: #FFFFFF !important;
       border-color: rgba(90, 33, 50, 0.28) !important;
       transform: translateY(-1px);
       box-shadow: 0 6px 18px rgba(90, 33, 50, 0.1);
   }

   .about-mobile-card .card-icon-box {
       width: 36px;
       height: 36px;
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       background: linear-gradient(135deg, rgba(140, 58, 78, 0.14) 0%, rgba(90, 33, 50, 0.05) 100%);
       border: 1px solid rgba(140, 58, 78, 0.22);
       color: var(--color-twilight-accent);
       flex-shrink: 0;
       transition: all 0.25s ease;
   }

   .card-icon-box .material-symbols-outlined {
       color: inherit !important;
   }

   .about-mobile-card .card-icon-box.icon-purple {
       background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
       color: #7c3aed !important;
       border: 1px solid rgba(124, 58, 237, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-emerald {
       background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
       color: #16a34a !important;
       border: 1px solid rgba(22, 163, 74, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-cyan {
       background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
       color: #0284c7 !important;
       border: 1px solid rgba(2, 132, 199, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-fuchsia {
       background: linear-gradient(135deg, #fae8ff 0%, #f5d0fe 100%) !important;
       color: #c026d3 !important;
       border: 1px solid rgba(192, 38, 211, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-blue {
       background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
       color: #2563eb !important;
       border: 1px solid rgba(37, 99, 235, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-teal {
       background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%) !important;
       color: #0d9488 !important;
       border: 1px solid rgba(13, 148, 136, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-rose {
       background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%) !important;
       color: #e11d48 !important;
       border: 1px solid rgba(225, 29, 72, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-orange {
       background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
       color: #ea580c !important;
       border: 1px solid rgba(234, 88, 12, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-amber {
       background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
       color: #d97706 !important;
       border: 1px solid rgba(217, 119, 6, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-crimson {
       background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
       color: #dc2626 !important;
       border: 1px solid rgba(220, 38, 38, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-lime {
       background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%) !important;
       color: #65a30d !important;
       border: 1px solid rgba(101, 163, 13, 0.3) !important;
   }

   .about-mobile-card .card-icon-box.icon-indigo {
       background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
       color: #4f46e5 !important;
       border: 1px solid rgba(79, 70, 229, 0.3) !important;
   }

   .about-mobile-card:hover .card-icon-box {
       transform: scale(1.08);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   .about-mobile-card svg {
       stroke: var(--color-twilight-accent) !important;
       transition: transform 0.2s ease, stroke 0.2s ease;
   }

   .about-mobile-card:hover svg {
       stroke: var(--color-twilight) !important;
       transform: translateX(3px);
   }

   .about-mobile-card div>div:first-child:not(.card-icon-box) {
       color: var(--color-twilight-deep) !important;
   }

   .about-mobile-card div>div:last-child:not(:first-child) {
       color: var(--color-twilight-muted) !important;
       opacity: 1 !important;
   }

   /* =========================================================================
       4. MAIN SHAMIR RECONSTRUCTION INTERFACE
       ========================================================================= */
   .app-container {
       max-width: 1180px;
       margin: 0 auto;
       padding: 32px 20px 0 20px;
   }

   @media (min-width: 768px) {
       .app-container {
           padding: 48px 32px 0 32px;
       }
   }

   .hero-section {
       text-align: center;
       margin-bottom: 40px;
   }

   .hero-title {
       font-size: 32px;
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-top: 14px;
       margin-bottom: 12px;
       color: #5A2132 !important;
       font-family: var(--font-display);
       line-height: 1.15;
   }

   @media (min-width: 768px) {
       .hero-title {
           font-size: 46px;
       }
   }

   .hero-subtitle {
       font-size: 14.5px;
       color: var(--color-twilight-muted) !important;
       max-width: 680px;
       margin: 0 auto;
       line-height: 1.6;
   }

   /* Reconstruction Hub Layout */
   .reconstruction-card {
       background: rgba(255, 255, 255, 0.58) !important;
       backdrop-filter: blur(28px);
       -webkit-backdrop-filter: blur(28px);
       border: 1.5px solid rgba(90, 33, 50, 0.16) !important;
       border-radius: var(--radius-xl);
       padding: 24px;
       margin-bottom: 0px;
       box-shadow: 0 20px 45px -12px rgba(90, 33, 50, 0.12) !important;
   }

   @media (min-width: 768px) {
       .reconstruction-card {
           padding: 36px;
       }
   }

   /* Quorum & Controls Bar */
   .controls-bar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       padding-bottom: 24px;
       margin-bottom: 24px;
       border-bottom: 1.5px solid rgba(90, 33, 50, 0.15) !important;
   }

   .quorum-gauge-wrapper {
       display: flex;
       align-items: center;
       gap: 16px;
       flex-wrap: wrap;
   }

   .quorum-header-row {
       display: flex;
       align-items: center;
       gap: 16px;
   }

   .quorum-label {
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--color-twilight-muted) !important;
       font-weight: 800;
   }

   .quorum-counter {
       font-size: 18px;
       font-weight: 800;
       font-family: var(--font-display);
       color: var(--color-twilight) !important;
   }

   .progress-bar-rail {
       width: 140px;
       height: 8px;
       background: rgba(90, 33, 50, 0.1) !important;
       border-radius: 999px;
       overflow: hidden;
       position: relative;
   }

   .progress-bar-fill {
       height: 100%;
       background: linear-gradient(90deg, var(--color-twilight-accent) 0%, var(--color-twilight) 100%) !important;
       border-radius: 999px;
       transition: width 0.3s ease;
       width: 0%;
   }

   .controls-btn-group {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
   }

   /* Shard Input Rows Container */
   .shard-rows-list {
       display: flex;
       flex-direction: column;
       gap: 16px;
       margin-bottom: 28px;
   }

   .shard-row-item {
       background: rgba(255, 255, 255, 0.65) !important;
       border: 1.5px solid rgba(90, 33, 50, 0.14) !important;
       border-radius: var(--radius-lg);
       padding: 16px 18px;
       transition: all 0.25s ease;
       position: relative;
       box-shadow: 0 4px 16px rgba(90, 33, 50, 0.04) !important;
   }

   .shard-row-item:hover,
   .shard-row-item:focus-within {
       border-color: var(--color-twilight-accent) !important;
       background: rgba(255, 255, 255, 0.85) !important;
       box-shadow: 0 10px 30px -10px rgba(90, 33, 50, 0.16) !important;
   }

   .shard-row-item.is-valid {
       border-color: var(--color-emerald-accent) !important;
   }

   .shard-row-item.is-corrupt {
       border-color: var(--color-rose-accent) !important;
   }

   .shard-row-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 10px;
       flex-wrap: nowrap;
       gap: 8px;
   }

   .shard-index-badge {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       font-weight: 700;
       color: var(--color-twilight) !important;
       font-family: var(--font-display);
   }

   .shard-input-wrapper {
       position: relative;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .shard-input-field {
       width: 100%;
       background: #FAF8F8 !important;
       border: 1.5px solid rgba(90, 33, 50, 0.2) !important;
       border-radius: var(--radius-md);
       padding: 12px 14px;
       color: var(--color-twilight-deep) !important;
       font-family: var(--font-mono);
       font-size: 13px;
       font-weight: 600 !important;
       caret-color: var(--color-twilight) !important;
       transition: all 0.2s ease;
   }

   .shard-input-field:focus {
       border-color: var(--color-twilight) !important;
       box-shadow: 0 0 0 3px rgba(90, 33, 50, 0.14) !important;
       background: #FFFFFF !important;
   }

   .shard-input-field::placeholder {
       color: var(--color-twilight-subtle) !important;
       font-family: var(--font-body);
       font-size: 12.5px;
   }

   .row-action-btn-group {
       display: flex;
       align-items: center;
       gap: 6px;
       flex-shrink: 0;
   }

   .row-action-btn-group button {
       background: rgba(140, 58, 78, 0.08) !important;
       border: 1.5px solid rgba(140, 58, 78, 0.22) !important;
       color: var(--color-twilight-accent) !important;
       transition: all 0.2s ease;
   }

   .row-action-btn-group button:hover:not(:disabled) {
       background: var(--color-twilight) !important;
       border-color: var(--color-twilight) !important;
       color: #FAF7F7 !important;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(90, 33, 50, 0.2);
   }

   /* Action Reconstruct Secret Button */
   #reconstruct-btn {
       background: var(--color-twilight) !important;
       color: #FAF7F7 !important;
       border: 1.5px solid var(--color-twilight) !important;
       font-weight: 800 !important;
       letter-spacing: 0.03em;
       box-shadow: 0 8px 24px -4px rgba(90, 33, 50, 0.28) !important;
       transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   }

   #reconstruct-btn svg {
       stroke: #FAF7F7 !important;
   }

   #reconstruct-btn:hover:not(:disabled) {
       background: var(--color-twilight-deep) !important;
       border-color: var(--color-twilight-deep) !important;
       color: #FFFFFF !important;
       transform: translateY(-2px);
       box-shadow: 0 12px 30px -4px rgba(90, 33, 50, 0.38) !important;
   }

   /* Result Panel */
   .reconstruction-result-box {
       margin-top: 32px;
       background: linear-gradient(145deg, #FAF7F7 0%, #F5ECEC 100%) !important;
       border: 1.5px solid rgba(90, 33, 50, 0.2) !important;
       border-radius: var(--radius-xl);
       padding: 28px;
       box-shadow: 0 25px 60px -15px rgba(90, 33, 50, 0.2) !important;
       animation: fadeInSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
       color: #5A2132 !important;
   }

   @keyframes fadeInSlide {
       from {
           opacity: 0;
           transform: translateY(12px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .secret-display-area {
       background: #FFFFFF !important;
       border: 2px dashed rgba(90, 33, 50, 0.4) !important;
       border-radius: var(--radius-md);
       padding: 18px;
       font-family: var(--font-mono);
       font-size: 15px;
       color: var(--color-twilight-deep) !important;
       font-weight: 700 !important;
       word-break: break-all;
       letter-spacing: 0.04em;
       position: relative;
       margin: 18px 0;
       min-height: 58px;
       display: flex;
       align-items: center;
       box-shadow: inset 0 2px 6px rgba(90, 33, 50, 0.05);
   }

   /* Protection Notice */
   .protection-banner {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 11.5px;
       color: var(--color-twilight-muted) !important;
       background: rgba(140, 58, 78, 0.07) !important;
       border: 1px solid rgba(140, 58, 78, 0.18) !important;
       padding: 8px 14px;
       border-radius: var(--radius-sm);
       border: 1px solid rgba(90, 33, 50, 0.15) !important;
   }

   .audit-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 12px;
       margin-top: 18px;
   }

   .audit-metric {
       background: rgba(239, 233, 233, 0.7) !important;
       border: 1px solid rgba(90, 33, 50, 0.16) !important;
       border-radius: var(--radius-md);
       padding: 12px;
   }

   .audit-metric-label {
       font-size: 10px;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: #5A2132;
       opacity: 0.85;
       font-weight: 700;
   }

   /* Distinct Vibrant Heading Colors for the 4 2x2 Metric Boxes */
   .audit-metric-label.label-quorum {
       color: #1D4ED8 !important;
       /* Royal Blue */
       opacity: 1 !important;
       font-weight: 800 !important;
   }

   .audit-metric-label.label-galois {
       color: #7E22CE !important;
       /* Vibrant Purple/Violet */
       opacity: 1 !important;
       font-weight: 800 !important;
   }

   .audit-metric-label.label-shards {
       color: #C2410C !important;
       /* Warm Amber-Bronze */
       opacity: 1 !important;
       font-weight: 800 !important;
   }

   .audit-metric-label.label-byzantine {
       color: #047857 !important;
       /* Emerald Forest Green */
       opacity: 1 !important;
       font-weight: 800 !important;
   }

   /* Subtle matching tinted borders for the 4 metric boxes */
   .audit-metric.metric-quorum {
       border-color: rgba(29, 78, 216, 0.28) !important;
       background: rgba(29, 78, 216, 0.035) !important;
   }

   .audit-metric.metric-galois {
       border-color: rgba(126, 34, 206, 0.28) !important;
       background: rgba(126, 34, 206, 0.035) !important;
   }

   .audit-metric.metric-shards {
       border-color: rgba(194, 65, 12, 0.28) !important;
       background: rgba(194, 65, 12, 0.035) !important;
   }

   .audit-metric.metric-byzantine {
       border-color: rgba(4, 120, 87, 0.28) !important;
       background: rgba(4, 120, 87, 0.035) !important;
   }

   .audit-metric-val {
       font-size: 13px;
       font-weight: 800;
       color: #5A2132 !important;
       margin-top: 4px;
       font-family: var(--font-mono);
   }

   /* Pulse animation */
   .pulse-glow {
       animation: pulseGlow 2.5s infinite;
   }

   @keyframes pulseGlow {

       0%,
       100% {
           box-shadow: 0 0 15px rgba(90, 33, 50, 0.2);
       }

       50% {
           box-shadow: 0 0 30px rgba(90, 33, 50, 0.4);
       }
   }

   /* =========================================================================
       MOBILE & PHONE VIEWPORT RESPONSIVE OPTIMIZATIONS (POCO, IPHONE, ANDROID)
       ========================================================================= */
   @media (max-width: 680px) {
       header.site-header {
           padding: 12px 14px !important;
       }

       .brand-group {
           gap: 8px !important;
       }

       .brand-logo-img {
           width: 28px !important;
           height: 28px !important;
       }

       .brand-title {
           font-size: 13.5px !important;
           letter-spacing: 0.14em !important;
       }

       .brand-subtitle {
           font-size: 7.5px !important;
           letter-spacing: 0.08em !important;
       }

       .app-container {
           padding: 14px 5px 0 5px !important;
       }

       .hero-section {
           padding: 0 8px !important;
           margin-bottom: calc(18px + 5mm) !important;
       }

       /* Hide ZERO LOCALSTORAGE ACTIVE on phone view only (stays visible on tablet & desktop) */
       .hero-badge-divider,
       .hero-badge-extra {
           display: none !important;
       }

       .hero-title {
           font-size: 22px !important;
           line-height: 1.2 !important;
           margin-top: 8px !important;
           margin-bottom: 6px !important;
       }

       .hero-subtitle {
           font-size: 12px !important;
           line-height: 1.5 !important;
       }

       /* Reconstruction Card Phone View - slightly wider with refined edge padding */
       .reconstruction-card {
           padding: 14px 8px !important;
           border-radius: var(--radius-lg) !important;
           margin-bottom: 0px !important;
           width: 100% !important;
       }

       /* Strictly for Phone: compact gap increased by 18mm (1cm + 8mm) */
       .vault-footer {
           margin-top: calc(24px + 18mm) !important;
       }

       /* Controls Bar Phone Layout */
       .controls-bar {
           display: flex !important;
           flex-direction: column !important;
           align-items: stretch !important;
           gap: 12px !important;
           padding-bottom: 14px !important;
           margin-bottom: 16px !important;
           border-bottom: 1.5px solid rgba(90, 33, 50, 0.15) !important;
       }

       .quorum-gauge-wrapper {
           display: flex !important;
           flex-direction: column !important;
           width: 100% !important;
           gap: 10px !important;
       }

       .quorum-header-row {
           display: flex !important;
           align-items: center !important;
           justify-content: space-between !important;
           width: 100% !important;
       }

       .quorum-label {
           font-size: 10.5px !important;
           font-weight: 700 !important;
           letter-spacing: 0.06em !important;
           text-transform: uppercase !important;
           color: #5A2132 !important;
           opacity: 0.8;
       }

       .quorum-counter {
           font-size: 16px !important;
           font-weight: 800 !important;
           color: #5A2132 !important;
       }

       .progress-bar-rail {
           width: 100% !important;
           height: 8px !important;
           background: rgba(90, 33, 50, 0.12) !important;
       }

       .controls-btn-group {
           display: flex !important;
           width: 100% !important;
       }

       .controls-btn-group button {
           width: 100% !important;
           justify-content: center !important;
           padding: 10px 14px !important;
           font-size: 12.5px !important;
           font-weight: 700 !important;
       }

       /* Shard Row Phone Layout */
       .shard-rows-list {
           gap: 10px !important;
           margin-bottom: 18px !important;
       }

       .shard-row-item {
           padding: 12px 10px !important;
           border-radius: var(--radius-md) !important;
           background: rgba(239, 233, 233, 0.8) !important;
       }

       .shard-label-desktop {
           display: none !important;
       }

       .shard-label-mobile {
           display: inline !important;
       }

       .shard-row-header {
           margin-bottom: 8px !important;
           display: flex !important;
           align-items: center !important;
           justify-content: space-between !important;
           flex-wrap: nowrap !important;
           gap: 8px !important;
       }

       .shard-index-badge {
           font-size: 11.5px !important;
           font-weight: 700 !important;
           color: #5A2132 !important;
           white-space: nowrap !important;
           flex-shrink: 0 !important;
       }

       .shard-row-header .badge-pill {
           font-size: 10px !important;
           padding: 3px 9px !important;
           white-space: nowrap !important;
           max-width: none !important;
           overflow: visible !important;
           text-overflow: clip !important;
           flex-shrink: 0 !important;
       }

       /* Hide verbose warning hints in phone view only (shows full on desktop/tablet) */
       .badge-msg-hint {
           display: none !important;
       }

       /* Input and Action Buttons Phone Layout */
       .shard-input-wrapper {
           display: flex !important;
           align-items: center !important;
           gap: 5px !important;
           width: 100% !important;
       }

       .shard-input-field {
           min-width: 0 !important;
           flex: 1 1 auto !important;
           width: 100% !important;
           background: #EFE9E9 !important;
           color: #5A2132 !important;
           border: 1.5px solid rgba(90, 33, 50, 0.25) !important;
           padding: 8px 10px !important;
           font-size: 12px !important;
           font-weight: 600 !important;
           caret-color: #5A2132 !important;
       }

       .shard-input-field::placeholder {
           font-size: 11px !important;
           color: rgba(90, 33, 50, 0.6) !important;
       }

       .row-action-btn-group {
           display: flex !important;
           align-items: center !important;
           gap: 3px !important;
           flex-shrink: 0 !important;
       }

       .row-action-btn-group button {
           width: 32px !important;
           height: 32px !important;
           padding: 0 !important;
           display: inline-flex !important;
           align-items: center !important;
           justify-content: center !important;
           border-radius: var(--radius-sm) !important;
           background: rgba(90, 33, 50, 0.08) !important;
           border: 1px solid rgba(90, 33, 50, 0.2) !important;
           color: #5A2132 !important;
       }

       /* Full-Width Reconstruct Secret Button on Mobile */
       #reconstruct-btn {
           width: 100% !important;
           max-width: 100% !important;
           padding: 13px 14px !important;
           font-size: 13px !important;
           font-weight: 700 !important;
           justify-content: center !important;
           background: #EFE9E9 !important;
           color: #5A2132 !important;
           border: 1.5px solid #5A2132 !important;
       }

       /* Result Box Phone View */
       .reconstruction-result-box {
           padding: 14px 10px !important;
           border-radius: var(--radius-lg) !important;
           background: rgba(239, 233, 233, 0.85) !important;
       }

       .secret-display-area {
           font-size: 12px !important;
           padding: 10px !important;
           word-break: break-all !important;
           background: #EFE9E9 !important;
           color: #5A2132 !important;
       }

       .audit-grid {
           grid-template-columns: 1fr 1fr !important;
           gap: 6px !important;
       }

       .audit-metric {
           padding: 8px 8px !important;
       }

       .audit-metric.metric-quorum {
           border-color: rgba(29, 78, 216, 0.28) !important;
           background: rgba(29, 78, 216, 0.05) !important;
       }

       .audit-metric.metric-galois {
           border-color: rgba(126, 34, 206, 0.28) !important;
           background: rgba(126, 34, 206, 0.05) !important;
       }

       .audit-metric.metric-shards {
           border-color: rgba(194, 65, 12, 0.28) !important;
           background: rgba(194, 65, 12, 0.05) !important;
       }

       .audit-metric.metric-byzantine {
           border-color: rgba(4, 120, 87, 0.28) !important;
           background: rgba(4, 120, 87, 0.05) !important;
       }

       .audit-metric-val {
           font-size: 11px !important;
           color: #5A2132 !important;
       }

       /* Hide VSS Envelope Verified tag on phone view only (stays visible on tablet & laptop/desktop) */
       .vss-envelope-tag {
           display: none !important;
       }

       /* Make Redirect Confirmation Modal wider on phone view */
       #redirect-modal-backdrop {
           padding: 10px !important;
       }

       #redirect-modal-card {
           width: 100% !important;
           max-width: 100% !important;
           padding: 30px 18px 24px 18px !important;
       }
   }

   /* =========================================================================
       DYNAMIC VAULT FOOTER (SAME EXACT AS API TERMINOLOGY)
       ========================================================================= */
   @font-face {
       font-family: 'Qurova';
       src: url('https://cdn.cosmocrypt.com/vendor/fonts/qurova-medium.otf') format('opentype');
       font-weight: 500;
       font-style: normal;
       font-display: swap;
   }

   .vault-footer {
       width: 100%;
       max-width: 1100px;
       margin: calc(18px + 2.3cm) auto 0 auto;
       padding: 12px clamp(20px, 4vw, 40px) 48px clamp(20px, 4vw, 40px);
       text-align: center;
       background: transparent;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 8px;
       position: relative;
       user-select: none;
       -webkit-user-select: none;
       box-sizing: border-box;
   }

   .footer-brand-row {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 12px;
       flex-wrap: wrap;
       margin-bottom: 2px;
   }

   .footer-brand-wrap {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       text-decoration: none !important;
       cursor: default !important;
       user-select: none;
   }

   .footer-logo {
       width: 22px;
       height: 22px;
       object-fit: cover;
       border-radius: 5px;
       box-shadow: 0 1px 3px rgba(90, 33, 50, 0.12);
       position: relative;
       top: -0.8px;
       vertical-align: middle;
   }

   .footer-cosmo-title {
       font-family: 'Qurova', sans-serif !important;
       font-weight: 500 !important;
       text-transform: uppercase !important;
       letter-spacing: 0.18em !important;
       font-size: 1.10rem !important;
       color: #5A2132 !important;
       line-height: 1;
   }

   .footer-badge-tag {
       font-family: var(--font-body), sans-serif !important;
       font-size: 0.68rem !important;
       font-weight: 600 !important;
       letter-spacing: 0.08em !important;
       text-transform: uppercase !important;
       color: #5A2132 !important;
       background: rgba(90, 33, 50, 0.06);
       border: 1px solid rgba(90, 33, 50, 0.22);
       padding: 3px 9px;
       border-radius: 999px;
       line-height: 1.25;
       position: relative;
       top: -0.8mm;
       transition: all 0.2s ease;
   }

   .footer-brand-row:hover .footer-badge-tag {
       background: rgba(90, 33, 50, 0.1);
       border-color: rgba(90, 33, 50, 0.35);
       color: #5A2132 !important;
   }

   .footer-links-row {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 1.25rem;
       flex-wrap: wrap;
       font-family: var(--font-body), sans-serif !important;
       font-size: 0.80rem !important;
       line-height: 1.4;
       margin: 3px 0;
   }

   .vault-footer a,
   .vault-footer a:hover,
   .vault-footer a:focus,
   .vault-footer a:active {
       text-decoration: none !important;
   }

   .footer-nav-link {
       color: #5A2132 !important;
       text-decoration: none !important;
       font-weight: 600 !important;
       padding: 3px 4px;
       border-radius: 4px;
       transition: color 0.2s ease, opacity 0.2s ease;
       opacity: 0.85;
       cursor: pointer !important;
   }

   .footer-nav-link:hover {
       color: #5A2132 !important;
       opacity: 1;
       text-decoration: none !important;
   }

   .footer-link-dot {
       color: #5A2132 !important;
       font-size: 1.15rem;
       font-weight: 900 !important;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       line-height: 0;
       user-select: none;
       opacity: 0.6;
       margin: 0 -0.45rem;
   }

   .footer-company-row {
       display: flex;
       align-items: center;
       justify-content: center;
       line-height: 1.4;
   }

   .footer-company-link {
       font-family: var(--font-body), sans-serif !important;
       font-size: 0.84rem !important;
       font-weight: 400 !important;
       color: #5A2132 !important;
       text-decoration: none !important;
       cursor: pointer !important;
       letter-spacing: 0.01em;
       opacity: 0.85;
       transition: opacity 0.2s ease;
   }

   .footer-company-name {
       font-weight: 700 !important;
       color: #5A2132 !important;
   }

   .footer-company-link:hover {
       opacity: 1;
   }

   .footer-standard-row {
       display: flex;
       align-items: center;
       justify-content: center;
       line-height: 1.4;
   }

   .footer-standard-note {
       font-family: var(--font-body), sans-serif !important;
       font-size: 0.80rem !important;
       font-weight: 500 !important;
       color: #5A2132 !important;
       opacity: 0.75;
       letter-spacing: 0.02em !important;
   }

   .footer-short-label {
       display: none;
   }

   .footer-full-label {
       display: inline;
   }

   @media (max-width: 640px) {
       .vault-footer {
           margin-top: calc(24px + 18mm) !important;
           padding: 12px 16px 40px 16px !important;
           gap: 10px;
       }

       .footer-short-label {
           display: inline !important;
       }

       .footer-full-label {
           display: none !important;
       }

       .footer-brand-row {
           flex-direction: column;
           align-items: center;
           gap: 8px;
           margin-bottom: 2px;
       }

       .footer-brand-wrap {
           gap: 10px;
       }

       .footer-logo {
           width: 25px;
           height: 25px;
           border-radius: 6px;
       }

       .footer-cosmo-title {
           font-size: 1.15rem !important;
           letter-spacing: 0.16em !important;
           line-height: 1.1;
       }

       .footer-badge-tag {
           font-size: 0.72rem !important;
           padding: 3.5px 11px;
           letter-spacing: 0.08em !important;
           font-weight: 600 !important;
       }

       .footer-links-row {
           gap: 0.4rem 0.9rem;
           font-size: 0.85rem !important;
           margin: 2px 0;
       }

       .footer-link-dot {
           margin: 0;
           font-size: 0.80rem;
       }

       .footer-company-link {
           font-size: 0.88rem !important;
       }

       .footer-standard-note {
           font-size: 0.82rem !important;
           text-align: center;
           line-height: 1.4;
       }
   }

   /* Strictly for Tablet Viewports (641px - 1024px) */
   @media (min-width: 641px) and (max-width: 1024px) {
       .hero-section {
           margin-bottom: calc(40px + 5mm) !important;
       }

       .app-container {
           padding-bottom: 0 !important;
       }

       .reconstruction-card {
           margin-bottom: 0 !important;
       }

       .vault-footer {
           margin-top: 32px !important;
       }
   }

   /* =========================================================================
       REDIRECT CONFIRMATION MODAL (SAGE MIST & TWILIGHT)
       ========================================================================= */
   #redirect-modal-backdrop {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       width: 100vw;
       height: 100vh;
       background: rgba(239, 233, 233, 0.72);
       backdrop-filter: blur(14px);
       -webkit-backdrop-filter: blur(14px);
       z-index: 100010;
       display: none !important;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease;
       align-items: center;
       justify-content: center;
       padding: 20px;
   }

   #redirect-modal-backdrop.is-open {
       display: flex !important;
       opacity: 1 !important;
       pointer-events: auto !important;
   }

   #redirect-modal-card {
       width: 100%;
       max-width: 480px;
       background: linear-gradient(165deg, #FCFAFA 0%, #FAF5F5 100%);
       border: 1.5px solid rgba(90, 33, 50, 0.18);
       border-radius: var(--radius-xl);
       padding: 34px 28px 28px 28px;
       box-shadow: 0 32px 80px -15px rgba(90, 33, 50, 0.22), 0 0 0 1px rgba(90, 33, 50, 0.06);
       position: relative;
       text-align: center;
       transform: scale(0.95) translateY(10px);
       transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
       color: var(--color-twilight) !important;
   }

   #redirect-modal-backdrop.is-open #redirect-modal-card {
       transform: scale(1) translateY(0);
   }

   .redirect-modal-icon-bubble {
       width: 68px;
       height: 68px;
       border-radius: 50%;
       background: linear-gradient(135deg, rgba(140, 58, 78, 0.14) 0%, rgba(90, 33, 50, 0.05) 100%);
       border: 1.5px solid rgba(140, 58, 78, 0.25);
       color: var(--color-twilight-accent) !important;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 18px auto;
       box-shadow: 0 6px 20px -4px rgba(90, 33, 50, 0.18);
   }

   .redirect-modal-icon-bubble svg {
       stroke: var(--color-twilight-accent) !important;
   }

   .redirect-modal-title {
       font-size: 20px;
       font-weight: 800;
       color: var(--color-twilight-deep) !important;
       font-family: var(--font-display);
       margin-bottom: 8px;
       letter-spacing: -0.01em;
   }

   .redirect-modal-desc {
       font-size: 13.5px;
       color: var(--color-twilight-muted) !important;
       line-height: 1.55;
       margin-bottom: 20px;
   }

   .redirect-modal-url-pill {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       background: rgba(140, 58, 78, 0.08);
       border: 1px solid rgba(140, 58, 78, 0.22);
       color: var(--color-twilight-accent) !important;
       font-family: var(--font-mono);
       font-size: 12px;
       font-weight: 700;
       padding: 6px 16px;
       border-radius: var(--radius-full);
       margin-bottom: 26px;
   }

   .redirect-modal-url-pill svg {
       stroke: var(--color-twilight-accent) !important;
   }

   .redirect-modal-actions {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .btn-redirect-primary {
       background: var(--color-twilight) !important;
       color: #FAF7F7 !important;
       border: 1.5px solid var(--color-twilight) !important;
       padding: 12px 20px;
       border-radius: var(--radius-md);
       font-weight: 700;
       font-size: 14px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       cursor: pointer;
       text-decoration: none !important;
       transition: all 0.25s ease;
       box-shadow: 0 6px 20px -3px rgba(90, 33, 50, 0.25);
   }

   .btn-redirect-primary svg {
       stroke: #FAF7F7 !important;
   }

   .btn-redirect-primary:hover {
       background: var(--color-twilight-deep) !important;
       border-color: var(--color-twilight-deep) !important;
       color: #FFFFFF !important;
       transform: translateY(-1px);
       box-shadow: 0 10px 25px -4px rgba(90, 33, 50, 0.35);
   }

   .btn-redirect-secondary {
       background: rgba(140, 58, 78, 0.06) !important;
       color: var(--color-twilight-accent) !important;
       border: 1.5px solid rgba(140, 58, 78, 0.2) !important;
       padding: 10px 18px;
       border-radius: var(--radius-md);
       font-size: 13px;
       font-weight: 700;
       cursor: pointer;
       text-decoration: none !important;
       transition: all 0.2s ease;
   }

   .btn-redirect-secondary:hover {
       background: rgba(90, 33, 50, 0.12) !important;
       color: var(--color-twilight) !important;
       border-color: var(--color-twilight) !important;
   }

   .redirect-modal-close-btn {
       position: absolute;
       top: 16px;
       right: 16px;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: rgba(140, 58, 78, 0.08);
       border: 1px solid rgba(140, 58, 78, 0.2);
       color: var(--color-twilight-accent) !important;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.25s ease;
   }

   .redirect-modal-close-btn:hover {
       background: var(--color-twilight);
       border-color: var(--color-twilight);
       color: #FAF7F7 !important;
       transform: rotate(90deg);
   }

   /* =========================================================================
       CUSTOM TOAST NOTIFICATION CONTAINER & ITEM (#EFE9E9 & #5A2132)
       Zero Default Chrome Alerts, Zero White Text Font Color, Centered Layout
       ========================================================================= */
   #custom-toast-container {
       position: fixed;
       top: 24px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 100020;
       display: flex;
       flex-direction: column;
       gap: 10px;
       align-items: center;
       pointer-events: none;
       width: fit-content;
       max-width: 92vw;
   }

   .custom-toast-item {
       pointer-events: auto;
       background: #EFE9E9 !important;
       backdrop-filter: blur(28px);
       -webkit-backdrop-filter: blur(28px);
       border: 1.5px solid #5A2132 !important;
       border-radius: var(--radius-lg);
       padding: 10px 14px;
       display: inline-flex;
       align-items: center;
       gap: 12px;
       box-shadow: 0 20px 50px -10px rgba(90, 33, 50, 0.4), 0 0 0 1px rgba(90, 33, 50, 0.15) !important;
       color: #5A2132 !important;
       font-size: 13px;
       line-height: 1.4;
       animation: toastSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
       transition: all 0.3s ease;
       width: fit-content !important;
       max-width: min(92vw, 460px);
   }

   .custom-toast-item.toast-leave {
       opacity: 0;
       transform: translateY(-12px) scale(0.95);
   }

   .custom-toast-item.toast-warn {
       border-color: #5A2132 !important;
   }

   .custom-toast-item.toast-error {
       border-color: #5A2132 !important;
   }

   .custom-toast-item.toast-success {
       border-color: #5A2132 !important;
   }

   /* Premium Icon Bubble */
   .toast-icon-wrapper {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: rgba(90, 33, 50, 0.12);
       border: 1.5px solid rgba(90, 33, 50, 0.25);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       color: #5A2132 !important;
   }

   /* Centered Text Column - Perfectly Balanced */
   .toast-content-wrapper {
       flex: 0 1 auto;
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 2px;
       min-width: 0;
   }

   .toast-title {
       font-size: 10px;
       font-weight: 800;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: #5A2132 !important;
       font-family: var(--font-display);
       line-height: 1.2;
       opacity: 0.85;
       white-space: nowrap;
   }

   .toast-msg {
       font-weight: 600;
       color: #5A2132 !important;
       font-size: 12.5px;
       line-height: 1.35;
       word-break: break-word;
   }

   .toast-actions-wrapper {
       display: flex;
       align-items: center;
       margin-left: 4px;
       flex-shrink: 0;
   }

   .toast-ok-btn {
       background: #EFE9E9 !important;
       color: #5A2132 !important;
       border: 1.5px solid #5A2132 !important;
       font-size: 11.5px;
       font-weight: 800;
       padding: 6px 16px;
       border-radius: var(--radius-sm);
       cursor: pointer;
       font-family: var(--font-display);
       letter-spacing: 0.05em;
       transition: all 0.2s ease;
       text-decoration: none !important;
       box-shadow: 0 4px 12px rgba(90, 33, 50, 0.25);
   }

   .toast-ok-btn:hover {
       background: #EFE9E9 !important;
       color: #5A2132 !important;
       transform: translateY(-1px);
   }

   .toast-close {
       cursor: pointer;
       color: #5A2132 !important;
       background: rgba(90, 33, 50, 0.08);
       border: 1px solid rgba(90, 33, 50, 0.2);
       border-radius: 50%;
       width: 26px;
       height: 26px;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0;
       transition: all 0.2s;
   }

   .toast-close:hover {
       background: rgba(90, 33, 50, 0.2);
       transform: scale(1.08);
   }