/* Rang Infotech - Modern High-End Calculator Platform Stylesheet */
:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* Modern Unified Input & Select Focus Glow */
input[type="text"]:not(.calculator-search), input[type="number"], select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input[type="text"]:not(.calculator-search):focus, input[type="number"]:focus, select:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}
.dark input[type="text"]:not(.calculator-search):focus, .dark input[type="number"]:focus, .dark select:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.24) !important;
}

/* Ensure command-bar search input has zero borders or outlines */
input.calculator-search,
input.calculator-search:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Modern Card Transitions & Elevation */
.card-hover {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
}
.dark .card-hover:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* Bento Grid Cards & Elevation */
.bento-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 1.25rem;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 20px 30px -8px rgba(37, 99, 235, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
}
.dark .bento-card {
  background: #0f172a;
  border-color: rgba(30, 41, 59, 0.85);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
.dark .bento-card:hover {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.7), 0 0 20px -3px rgba(59, 130, 246, 0.2);
}

/* OLED Digital Screen & Glowing Readout */
.oled-screen {
  background: linear-gradient(180deg, #020617 0%, #090d16 100%);
  border: 1px solid rgba(30, 41, 59, 0.9);
  border-radius: 1.25rem;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(255, 255, 255, 0.05);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.oled-glow-green {
  color: #34d399;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.35);
}
.oled-glow-cyan {
  color: #38bdf8;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.35);
}

/* Tactile Soft-Touch Buttons */
.tactile-btn {
  transition: all 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
.tactile-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
}
.tactile-btn:active {
  transform: translateY(0.5px) scale(0.97);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
.dark .tactile-btn {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.dark .tactile-btn:hover {
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.dark .tactile-btn:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset;
}

/* Premium Gradient & Glass Utilities */
.hero-glow {
  background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.09) 0%, rgba(99, 102, 241, 0.04) 40%, transparent 70%);
}
.dark .hero-glow {
  background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.16) 0%, rgba(99, 102, 241, 0.08) 40%, transparent 75%);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.dark .glass-panel {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Category Dashboard Cards with Accent Stripes */
.cat-card-blue { border-top: 3.5px solid #2563eb; }
.cat-card-orange { border-top: 3.5px solid #f97316; }
.cat-card-emerald { border-top: 3.5px solid #10b981; }
.cat-card-purple { border-top: 3.5px solid #8b5cf6; }

/* Interactive Tile Link Hover */
.tile-link {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile-link:hover {
  transform: translateX(3px);
}

/* Premium Custom Range Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 9999px;
  outline: none;
  transition: background 0.15s ease;
}
.dark input[type="range"] {
  background: #334155;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
  border: 2.5px solid #ffffff;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.2);
}
.dark input[type="range"]::-webkit-slider-thumb {
  border-color: #0f172a;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
  border: 2.5px solid #ffffff;
}

/* Premium Primary Button Glow */
.btn-glow {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.35);
}
.btn-glow:hover {
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.5);
  transform: translateY(-1.5px);
}
.btn-glow:active {
  transform: translateY(0.5px);
}

/* Future-Proof Responsive Ad Containers (Zero Layout Shift) */
.ad-slot-leaderboard {
  width: 100%;
  max-width: 728px;
  margin: 1.25rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.ad-slot-sidebar {
  width: 100%;
  max-width: 336px;
  margin: 1.25rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.ad-slot-inarticle {
  width: 100%;
  margin: 1.5rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 3D Dice Styles (Luxury Casino Grade with Physical Depth) */
.dice-scene {
  perspective: 900px;
  width: 84px;
  height: 84px;
  margin: 14px 18px 24px 18px;
  display: inline-block;
  position: relative;
}

.dice-scene::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.22) 0%, rgba(15, 23, 42, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.dark .dice-scene::after {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 70%);
}

.dice-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.2, 0.85, 0.3, 1);
}

.dice-face {
  position: absolute;
  width: 84px;
  height: 84px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f8fafc 65%, #e2e8f0 100%);
  border: 1.5px solid #cbd5e1;
  border-radius: 18px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 0, 0, 0.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  padding: 10px;
  box-sizing: border-box;
}
.dark .dice-face {
  background: radial-gradient(circle at 35% 35%, #334155 0%, #1e293b 65%, #0f172a 100%);
  border-color: #475569;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -3px 6px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.dot {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #3b82f6 0%, #1d4ed8 70%, #172554 100%);
  border-radius: 50%;
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(255, 255, 255, 0.7);
  justify-self: center;
  align-self: center;
}
.dark .dot {
  background: radial-gradient(circle at 35% 35%, #93c5fd 0%, #3b82f6 70%, #1d4ed8 100%);
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(96, 165, 250, 0.4);
}

/* 3D Transformations with exact half-width translateZ (42px) */
.face-1 { transform: rotateY(0deg) translateZ(42px); display: flex; align-items: center; justify-content: center; }
.face-2 { transform: rotateY(180deg) translateZ(42px); display: flex; justify-content: space-between; flex-direction: column; }
.face-2 .dot:nth-child(2) { align-self: flex-end; }
.face-3 { transform: rotateY(-90deg) translateZ(42px); display: flex; justify-content: space-between; }
.face-3 .dot:nth-child(2) { align-self: center; }
.face-3 .dot:nth-child(3) { align-self: flex-end; }
.face-4 { transform: rotateY(90deg) translateZ(42px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.face-5 { transform: rotateX(90deg) translateZ(42px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; position: relative; }
.face-5 .center-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.face-6 { transform: rotateX(-90deg) translateZ(42px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

.rolling {
  animation: rollAnimation 0.8s cubic-bezier(0.35, 0, 0.25, 1) infinite;
}

@keyframes rollAnimation {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-8px); }
  50% { transform: rotateX(360deg) rotateY(180deg) rotateZ(180deg) translateY(-20px); }
  100% { transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg) translateY(-8px); }
}

/* Scientific Calculator Button Styling */
.sci-key {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.12s ease;
  user-select: none;
  cursor: pointer;
  height: 2.5rem;
}
.sci-key:active {
  transform: scale(0.95);
}

/* Print Friendly Bank-Grade Report */
.print-only {
  display: none !important;
}

@media print {
  header, footer, #back-to-top-btn, .no-print, #toast-container, .theme-toggle, button, input, select, textarea, #chart-tooltip, .btn-glow {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .grid {
    display: block !important;
  }
  .lg\:col-span-6, .lg\:col-span-7, .lg\:col-span-8, .lg\:col-span-12 {
    width: 100% !important;
    max-width: 100% !important;
  }
  .bento-card, .bg-white, .dark .bg-slate-900, .bg-slate-50, .dark .bg-slate-800 {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    color: #0f172a !important;
    break-inside: avoid;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
    font-size: 9pt !important;
  }
  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }
  th, td {
    border: 1px solid #cbd5e1 !important;
    padding: 5px 8px !important;
    color: #0f172a !important;
  }
  th {
    background: #f1f5f9 !important;
    font-weight: 700 !important;
  }
  a {
    text-decoration: none !important;
    color: inherit !important;
  }
}

/* Floating Back to Top Action Button - Always Prominent & Interactive */
#back-to-top-btn {
  position: fixed !important;
  bottom: 26px !important;
  right: 26px !important;
  z-index: 99999 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px -3px rgba(37, 99, 235, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: 2.5px solid rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#back-to-top-btn:hover {
  transform: translateY(-4px) scale(1.1) !important;
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 15px 30px -2px rgba(37, 99, 235, 0.75), 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

#back-to-top-btn:active {
  transform: scale(0.92) !important;
}

/* Mobile View Enhancements & Buttery Smooth Drawer */
#mobile-menu:not(.hidden) {
  animation: mobileDrawerSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mobileDrawerSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Touch targets and smooth scrolling */
* {
  -webkit-tap-highlight-color: transparent;
}

button, a, select, input {
  touch-action: manipulation;
}

/* Prevent auto-zoom on mobile inputs */
@media (max-width: 640px) {
  input[type="text"]:not(.calculator-search),
  input[type="number"],
  select {
    font-size: 16px !important;
  }
}

/* Responsive Table Wrapper */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}