/* ============================================================
   Toolbox + Iran Resources — Material 3 Expressive UI
   Vazirmatn · RTL · No External Dependencies
   ============================================================ */

/* --------------------------------------------------------------------------
   0. TYPOGRAPHY
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('Vazirmatn-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════
   1. M3 EXPRESSIVE DESIGN TOKENS (LIGHT THEME)
   ════════════════════════════════════════════════════════════ */
:root {
  /* --- Brand Palette --- */
  --m3-primary:                    #006874;
  --m3-on-primary:                 #ffffff;
  --m3-primary-container:          #97f0ff;
  --m3-on-primary-container:       #001f24;

  --m3-secondary:                  #4a6267;
  --m3-on-secondary:               #ffffff;
  --m3-secondary-container:        #cde7ec;
  --m3-on-secondary-container:     #051f23;

  --m3-tertiary:                   #525e7d;
  --m3-on-tertiary:                #ffffff;
  --m3-tertiary-container:         #dae2ff;
  --m3-on-tertiary-container:      #0d1b37;

  /* --- Semantic Palette --- */
  --m3-error:                      #ba1a1a;
  --m3-on-error:                   #ffffff;
  --m3-error-container:            #ffdad6;
  --m3-on-error-container:         #410002;

  --m3-warning:                    #7a5900;
  --m3-on-warning:                 #ffffff;
  --m3-warning-container:          #ffdea5;
  --m3-on-warning-container:       #261a00;

  --m3-success:                    #006e2c;
  --m3-on-success:                 #ffffff;
  --m3-success-container:          #98f7ae;
  --m3-on-success-container:       #002108;

  /* --- M3E Surface & Containers --- */
  --m3-surface:                    #fafdfd;
  --m3-surface-dim:                #d6dbdb;
  --m3-surface-bright:             #fafdfd;
  
  --m3-surface-container-lowest:   #ffffff;
  --m3-surface-container-low:      #f0f4f4;
  --m3-surface-container:          #e4e9e9;
  --m3-surface-container-high:     #dfe3e3;
  --m3-surface-container-highest:  #d9dddd;
  
  --m3-on-surface:                 #191c1c;
  --m3-on-surface-variant:         #3f4949;

  --m3-inverse-surface:            #2d3131;
  --m3-inverse-on-surface:         #eff1f1;
  --m3-inverse-primary:            #4fd8eb;

  /* --- Borders & Outlines --- */
  --m3-outline:                    #6f797a;
  --m3-outline-variant:            #bec8c9;

  /* --- Expressive Shapes --- */
  --m3-shape-none:  0px;
  --m3-shape-xs:    4px;
  --m3-shape-sm:    8px;
  --m3-shape-md:    12px;
  --m3-shape-lg:    16px;  /* Inputs, FABs */
  --m3-shape-xl:    24px;  /* Expressive Cards */
  --m3-shape-xxl:   32px;  /* Modals, Bottom Sheets */
  --m3-shape-full:  9999px; /* Pills (Buttons, Chips) */

  /* --- M3E Tonal Elevations --- 
         Instead of flat black shadows, M3 blends the shadow color for softness */
  --m3-shadow-color: #000000;
  --m3-elevation-1: 0 1px 3px 1px color-mix(in srgb, var(--m3-shadow-color) 12%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--m3-shadow-color) 24%, transparent);
  --m3-elevation-2: 0 2px 6px 2px color-mix(in srgb, var(--m3-shadow-color) 12%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--m3-shadow-color) 24%, transparent);
  --m3-elevation-3: 0 4px 8px 3px color-mix(in srgb, var(--m3-shadow-color) 12%, transparent), 0 1px 3px 0 color-mix(in srgb, var(--m3-shadow-color) 24%, transparent);

  /* --- Expressive Motion (Easing & Durations) --- */
  --m3-duration-fast:     150ms;
  --m3-duration-normal:   300ms; /* Slightly longer for expressive fluidity */
  --m3-duration-slow:     500ms;
  
  --m3-ease-standard:     cubic-bezier(0.2, 0.0, 0, 1.0);
  --m3-ease-emphasized:   cubic-bezier(0.2, 0.0, 0, 1.0); /* M3E signature curve */
  --m3-ease-accelerated:  cubic-bezier(0.3, 0.0, 1, 1.0);
  --m3-ease-decelerated:  cubic-bezier(0.0, 0.0, 0, 1.0);

  /* --- Spacing System --- */
  --m3-spacing-4: 4px;   --m3-spacing-8: 8px;   --m3-spacing-12: 12px;
  --m3-spacing-16: 16px; --m3-spacing-20: 20px; --m3-spacing-24: 24px;
  --m3-spacing-32: 32px; --m3-spacing-48: 48px; --m3-spacing-64: 64px;

  /* --- Layout & Utilities --- */
  --nav-rail-width:     80px;
  --bottom-nav-height:  80px;
  --m3-focus-ring:      0 0 0 3px color-mix(in srgb, var(--m3-primary) 30%, transparent);
}

/* ════════════════════════════════════════════════════════════
   2. DARK THEME
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* --- Surfaces --- */
  --m3-surface:                    #131c1e;
  --m3-surface-container-lowest:   #0e1516;
  --m3-surface-container-low:      #161f21;
  --m3-surface-container:          #1b2527;
  --m3-surface-container-high:     #212f32;
  --m3-surface-container-highest:  #2a3b3e;
  
  --m3-on-surface:                 #dce4e6;
  --m3-on-surface-variant:         #98adb0;
  
  /* --- Primary --- */
  --m3-primary:                    #4fd8eb;
  --m3-on-primary:                 #003640;
  --m3-primary-container:          #004f5d;
  --m3-on-primary-container:       #a2edf7;
  
  /* --- Secondary --- */
  --m3-secondary:                  #7ecfde;
  --m3-on-secondary:               #003640;
  --m3-secondary-container:        #004f5a;
  --m3-on-secondary-container:     #9ee8f6;
  
  /* --- Semantic --- */
  --m3-error:                      #ffb4ab;
  --m3-on-error:                   #690005;
  --m3-error-container:            #93000a;
  --m3-on-error-container:         #ffdad6;
  
  --m3-outline:                    #4a6366;
  --m3-outline-variant:            #2d4144;
  
  --m3-inverse-surface:            #dce4e6;
  --m3-inverse-on-surface:         #2a3b3e;
  --m3-inverse-primary:            #006874;

  /* --- Dark Mode Shadows --- 
         Shadows in dark mode need to be significantly darker and more spread
         to simulate depth effectively against dark surfaces. */
  --m3-shadow-color: #000000;
  --m3-elevation-1: 0 1px 3px 1px color-mix(in srgb, var(--m3-shadow-color) 40%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--m3-shadow-color) 50%, transparent);
  --m3-elevation-2: 0 2px 6px 2px color-mix(in srgb, var(--m3-shadow-color) 40%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--m3-shadow-color) 50%, transparent);
  --m3-elevation-3: 0 4px 8px 3px color-mix(in srgb, var(--m3-shadow-color) 40%, transparent), 0 1px 3px 0 color-mix(in srgb, var(--m3-shadow-color) 50%, transparent);
}

/* ════════════════════════════════════════════════════════════
   3. BASE RESET & GLOBALS
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* M3E transitions for fluid theme switching */
  transition: background-color var(--m3-duration-normal) var(--m3-ease-standard),
              color var(--m3-duration-normal) var(--m3-ease-standard);
}

[data-theme="dark"] html, html[data-theme="dark"] { 
  color-scheme: dark; 
}

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  accent-color: var(--m3-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { 
  color: var(--m3-primary); 
  text-decoration: none; 
  transition: color var(--m3-duration-fast) var(--m3-ease-standard), 
              opacity var(--m3-duration-fast) var(--m3-ease-standard); 
}

a:hover { opacity: 0.8; }

a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--m3-focus-ring);
  border-radius: var(--m3-shape-sm);
}

img, svg, video, canvas { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

button, input, select, textarea { font: inherit; }

[hidden] { display: none !important; }

::selection { 
  background-color: color-mix(in srgb, var(--m3-primary) 24%, transparent); 
  color: var(--m3-on-surface); 
}

/* Expressive Design favors bolder headings */
h1, h2, h3, h4, h5, h6 { 
  font-weight: 800; 
  margin: 0; 
}


/* ════════════════════════════════════════════════════════════
   4. TYPOGRAPHY (M3E Roles)
   ════════════════════════════════════════════════════════════ */
/* M3E introduces tighter tracking for large text and looser for body */

.headline-large { 
  font-size: 2rem; /* 32px */
  font-weight: 800; 
  line-height: 1.25; 
  letter-spacing: -0.02em; 
  color: var(--m3-on-surface);
}

.body-large { 
  font-size: 1rem; /* 16px */
  font-weight: 400; 
  line-height: 1.50; 
  letter-spacing: 0.01em;
  color: var(--m3-on-surface-variant);
}

.body-medium { 
  font-size: 0.875rem; /* 14px */
  font-weight: 400; 
  line-height: 1.43; 
  letter-spacing: 0.015em;
  color: var(--m3-on-surface-variant);
}


/* ════════════════════════════════════════════════════════════
   5. LAYOUT & CONTAINERS
   ════════════════════════════════════════════════════════════ */
.page-wrapper {
  flex: 1;
  /* RTL semantic alignment: Rail goes on the 'end' (right side visually) */
  margin-inline-start: var(--nav-rail-width); 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-inline-end var(--m3-duration-normal) var(--m3-ease-standard);
}

.main-content { 
  flex: 1; 
  padding-bottom: var(--m3-spacing-32); 
}

.container { 
  max-width: 760px; 
  margin: 0 auto; 
  padding: 0 var(--m3-spacing-24); 
}

.section { 
  padding: var(--m3-spacing-32) 0; 
}

/* --- Info Card Components --- */
.info-card__divider {
  height: 1px;
  margin: var(--m3-spacing-20) 0;
  background-color: var(--m3-outline-variant);
  border: none;
  border-radius: 1px;
}

.info-card__note {
  display: flex;
  align-items: flex-start;
  gap: var(--m3-spacing-12);
  padding: var(--m3-spacing-16) var(--m3-spacing-20);
  border-radius: var(--m3-shape-lg);
  /* Replaced hardcoded rgba with dynamic M3 Surface Containers */
  background-color: var(--m3-surface-container);
  border: 1px solid var(--m3-outline-variant);
  margin-top: var(--m3-spacing-8);
  font-size: 0.9rem;
  box-sizing: border-box;
  color: var(--m3-on-surface-variant);
  transition: background-color var(--m3-duration-normal) var(--m3-ease-standard),
              border-color var(--m3-duration-normal) var(--m3-ease-standard);
}

/* Highlight the icon slightly with the primary color for an expressive touch */
.info-card__note > span:first-child { 
  font-size: 1.3rem; 
  flex-shrink: 0; 
  margin-top: 2px; 
  color: var(--m3-primary); 
}

.info-card__note p { 
  margin: 0; 
  line-height: 1.6; 
}

/* ════════════════════════════════════════════════════════════
   6. NAV RAIL (Desktop Navigation)
   ════════════════════════════════════════════════════════════ */
.nav-rail {
  width: var(--nav-rail-width);
  height: 100vh;
  background-color: var(--m3-surface-container);
  border-inline-end: 1px solid var(--m3-outline-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--m3-spacing-32) 0 var(--m3-spacing-16);
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 1000;
  flex-shrink: 0;
  transition: background-color var(--m3-duration-normal) var(--m3-ease-standard);
}

.rail-header { 
  margin-bottom: var(--m3-spacing-16); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: var(--m3-spacing-16); 
}

.rail-items { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: var(--m3-spacing-12); 
  width: 100%; 
  flex: 1; 
}

.rail-item {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: 4px; 
  width: 100%; 
  cursor: pointer; 
  text-decoration: none; 
  color: var(--m3-on-surface-variant); 
  padding: 0 4px;
  position: relative;
}

.rail-item-icon {
  width: 56px; 
  height: 32px; 
  border-radius: var(--m3-shape-full); /* M3 Active Indicator Pill */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.5rem;
  transition: background-color var(--m3-duration-fast) var(--m3-ease-standard), 
              color var(--m3-duration-fast) var(--m3-ease-standard);
}

.rail-item-label {
  font-size: 0.75rem; 
  font-weight: 600; 
  text-align: center;
  opacity: 0.8;
  transition: color var(--m3-duration-fast) var(--m3-ease-standard), 
              opacity var(--m3-duration-fast), 
              font-weight var(--m3-duration-fast);
}

/* M3 State Layers for Hover/Active */
.rail-item:hover .rail-item-icon { 
  background-color: color-mix(in srgb, var(--m3-on-surface) 8%, transparent); 
  color: var(--m3-on-surface); 
}
.rail-item:hover .rail-item-label { 
  color: var(--m3-on-surface); 
  opacity: 1; 
}

.rail-item.active .rail-item-icon { 
  background-color: var(--m3-secondary-container); 
  color: var(--m3-on-secondary-container); 
}
.rail-item.active .rail-item-label { 
  color: var(--m3-on-surface); 
  font-weight: 800; 
  opacity: 1; 
}

.rail-footer { 
  margin-top: auto; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: var(--m3-spacing-16); 
  padding-bottom: var(--m3-spacing-24); 
}

/* ════════════════════════════════════════════════════════════
   7. BOTTOM NAV BAR & FABS (Mobile)
   ════════════════════════════════════════════════════════════ */
.bottom-navigation-bar {
  display: none; 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  width: 100%;
  height: var(--bottom-nav-height); 
  background-color: var(--m3-surface-container);
  border-top: 1px solid var(--m3-outline-variant); 
  z-index: 1000;
  flex-direction: row; 
  justify-content: space-around; 
  align-items: center;
  padding: 0 8px; 
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: var(--m3-elevation-2);
  transition: background-color var(--m3-duration-normal) var(--m3-ease-standard);
}

.bottom-nav-item {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: 4px; 
  flex: 1; 
  height: 100%; 
  cursor: pointer; 
  text-decoration: none;
  color: var(--m3-on-surface-variant); 
  padding: 12px 0 16px;
}

.bottom-nav-icon {
  width: 64px; 
  height: 32px; 
  border-radius: var(--m3-shape-full); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.5rem;
  transition: background-color var(--m3-duration-fast) var(--m3-ease-standard), 
              color var(--m3-duration-fast) var(--m3-ease-standard);
}

.bottom-nav-label { 
  font-size: 0.75rem; 
  font-weight: 600; 
  transition: color var(--m3-duration-fast), font-weight var(--m3-duration-fast); 
}

/* State Layers */
.bottom-nav-item:hover .bottom-nav-icon { 
  background-color: color-mix(in srgb, var(--m3-on-surface) 8%, transparent); 
}
.bottom-nav-item.active .bottom-nav-icon { 
  background-color: var(--m3-secondary-container); 
  color: var(--m3-on-secondary-container); 
}
.bottom-nav-item.active .bottom-nav-label { 
  color: var(--m3-on-surface); 
  font-weight: 800; 
}

/* Shared Theme Toggle Styles (Rail & FAB) */
.theme-toggle-rail,
.theme-toggle-fab,
.theme-fab {
  position: fixed; 
  bottom: 22px;
  inset-inline-start: var(--m3-spacing-16);
  width: 52px; 
  height: 52px; 
  border-radius: var(--m3-shape-lg);
  background-color: var(--m3-primary-container); 
  color: var(--m3-on-primary-container);
  border: none; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.4rem;
  cursor: pointer; 
  box-shadow: var(--m3-elevation-3);
  z-index: 1100;
  transition: background-color var(--m3-duration-fast) var(--m3-ease-standard), 
              box-shadow var(--m3-duration-fast) var(--m3-ease-standard), 
              transform var(--m3-duration-fast) var(--m3-ease-standard);
}

.theme-toggle-fab {
  position: fixed; 
  bottom: calc(var(--bottom-nav-height) + var(--m3-spacing-16)); 
  inset-inline-start: var(--m3-spacing-16);
  display: none; 
  z-index: 1100; 
}

.theme-toggle-rail:hover,
.theme-toggle-fab:hover { 
  background-color: color-mix(in srgb, var(--m3-on-tertiary-container) 8%, var(--m3-tertiary-container));
  transform: translateY(-2px); 
  box-shadow: var(--m3-elevation-3); 
}
.theme-toggle-rail:active,
.theme-toggle-fab:active {
  transform: translateY(0);
  box-shadow: var(--m3-elevation-1);
}

@media (min-width: 1025px) {
  .theme-toggle-rail,
  .theme-toggle-fab {
    display: flex;
    bottom: 22px;
    inset-inline-start: calc(var(--nav-rail-width) + var(--m3-spacing-16));
  }
  .theme-fab {
    display: flex;
    bottom: 22px;
    inset-inline-start: var(--m3-spacing-16);
  }
}

@media (max-width: 768px) {
  .theme-fab {
    display: flex;
    bottom: 18px;
    inset-inline-start: 14px;
  }
}

.theme-toggle-rail:hover,
.theme-toggle-fab:hover,
.theme-fab:hover { 
  background-color: color-mix(in srgb, var(--m3-on-primary-container) 8%, var(--m3-primary-container));
  transform: scale(1.08); 
  box-shadow: var(--m3-elevation-4); 
}
.theme-toggle-rail:active,
.theme-toggle-fab:active,
.theme-fab:active {
  transform: scale(1);
  box-shadow: var(--m3-elevation-2);
}

/* ════════════════════════════════════════════════════════════
   8. COPY TOAST (Snackbars)
   ════════════════════════════════════════════════════════════ */
#copy-toast {
  position: fixed; 
  bottom: calc(var(--bottom-nav-height) + var(--m3-spacing-24)); 
  inset-inline-end: var(--m3-spacing-24);
  padding: 12px 24px; 
  border-radius: var(--m3-shape-full); /* Pill shape for single-line toasts */
  background-color: var(--m3-inverse-surface); 
  color: var(--m3-inverse-on-surface);
  font-size: 0.875rem; 
  font-weight: 600;
  box-shadow: var(--m3-elevation-3);
  opacity: 0; 
  transform: translateY(16px); 
  pointer-events: none;
  transition: opacity var(--m3-duration-normal) var(--m3-ease-standard), 
              transform var(--m3-duration-normal) var(--m3-ease-standard); 
  z-index: 9999;
}

#copy-toast.copy-toast--visible { 
  opacity: 1; 
  transform: translateY(0); 
}

@media (min-width: 769px) { 
  #copy-toast { bottom: var(--m3-spacing-32); } 
}

/* ════════════════════════════════════════════════════════════
   9. UNIFIED HERO SECTION (For Index & Iran)
   ════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative; 
  overflow: hidden; 
  /* Expressive Gradient: Blends from a tinted primary into the main surface */
  background: linear-gradient(180deg, color-mix(in srgb, var(--m3-primary) 8%, var(--m3-surface)) 0%, var(--m3-surface) 100%);
  padding: 80px 24px 64px; 
  text-align: center; 
  min-height: 340px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  border-bottom: 1px solid var(--m3-outline-variant);
}

/* Expressive Animated Background Blobs */
.hero-bg-shape { 
  position: absolute; 
  border-radius: 50%; 
  pointer-events: none; 
  filter: blur(50px);
}
.hero-bg-shape--1 { 
  width: 480px; 
  height: 480px; 
  background-color: color-mix(in srgb, var(--m3-primary) 15%, transparent); 
  top: -160px; 
  left: -80px; 
  animation: floatBlob 12s ease-in-out infinite alternate;
}
.hero-bg-shape--2 { 
  width: 360px; 
  height: 360px; 
  background-color: color-mix(in srgb, var(--m3-tertiary) 15%, transparent); 
  bottom: -120px; 
  right: -60px; 
  animation: floatBlob 15s ease-in-out infinite alternate-reverse;
}

@keyframes floatBlob {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(30px) scale(1.05); }
}

.hero-content { 
  position: relative; 
  z-index: 1; 
  max-width: 600px; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-icon-wrap {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  width: 250px; 
  height: 250px; 
  background-color: var(--m3-surface-container-high);
  border-radius: var(--m3-shape-xl); /* Squircle */
  margin-bottom: var(--m3-spacing-24); 
  box-shadow: var(--m3-elevation-2);
  border: 1px solid var(--m3-outline-variant);
}

.hero-emoji { 
  font-size: 3rem; 
  line-height: 1; 
}

.hero-title { 
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--m3-on-surface); 
  margin-bottom: var(--m3-spacing-16); 
}

.hero-subtitle { 
  font-size: 1.15rem;
  color: var(--m3-on-surface-variant); 
  margin-bottom: var(--m3-spacing-32); 
  max-width: 480px; 
  line-height: 1.6;
}

/* Hero Search Bar */
.hero-search-wrapper { 
  display: flex; 
  justify-content: center; 
  width: 100%; 
}

.hero-search-bar {
  display: flex; 
  align-items: center; 
  max-width: 520px; 
  width: 100%;
  background-color: var(--m3-surface-container-highest); 
  border: 2px solid transparent; /* Prepare for focus ring */
  border-radius: var(--m3-shape-full); 
  padding: 6px 24px; 
  gap: 12px; 
  transition: background-color var(--m3-duration-fast), 
              border-color var(--m3-duration-fast), 
              box-shadow var(--m3-duration-fast);
}

.hero-search-bar:focus-within { 
  background-color: var(--m3-surface);
  border-color: var(--m3-primary); 
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--m3-primary) 15%, transparent);
}

.search-icon { 
  font-size: 1.2rem; 
  color: var(--m3-on-surface-variant); 
  flex-shrink: 0; 
}

.search-input { 
  flex: 1; 
  border: none; 
  background: transparent; 
  color: var(--m3-on-surface); 
  font-size: 1.05rem; 
  padding: 12px 0; 
  outline: none; 
}

.search-input::placeholder { color: var(--m3-on-surface-variant); opacity: 0.8; }

.search-clear { 
  background: transparent; 
  border: none; 
  font-size: 1.2rem; 
  cursor: pointer; 
  color: var(--m3-on-surface-variant); 
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--m3-duration-fast), color var(--m3-duration-fast);
}

.search-clear:hover { 
  background-color: var(--m3-surface-container-highest);
  color: var(--m3-on-surface);
}

.search-results-count { 
  text-align: center; 
  margin-top: 12px; 
  font-size: 0.85rem; 
  font-weight: 600;
  color: var(--m3-on-surface-variant); 
  min-height: 20px; 
}

/* ════════════════════════════════════════════════════════════
   10. BUTTONS (M3E State Layers)
   ════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  gap: var(--m3-spacing-8); 
  padding: 10px 24px; 
  min-height: 40px; 
  border: none;
  border-radius: var(--m3-shape-full); /* M3E Pill Shape */
  font-family: 'Vazirmatn', sans-serif;
  font-size: 0.9rem; 
  font-weight: 700; /* Expressive buttons are bolder */
  cursor: pointer; 
  text-decoration: none;
  white-space: nowrap; 
  letter-spacing: 0.1px;
  transition: background-color var(--m3-duration-fast) var(--m3-ease-standard), 
              box-shadow var(--m3-duration-fast) var(--m3-ease-standard), 
              transform var(--m3-duration-fast) var(--m3-ease-standard);
}

.btn:disabled { 
  opacity: 0.38; 
  cursor: not-allowed; 
  transform: none !important; 
  box-shadow: none !important; 
}

.btn-filled { 
  background-color: var(--m3-primary); 
  color: var(--m3-on-primary); 
}

/* M3E Standard: Use color-mix for precise State Layers */
.btn-filled:hover:not(:disabled) { 
  background-color: color-mix(in srgb, var(--m3-on-primary) 8%, var(--m3-primary)); 
  box-shadow: var(--m3-elevation-1); 
  transform: translateY(-1px); 
}

.btn-filled:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--m3-on-primary) 12%, var(--m3-primary)); 
  box-shadow: none;
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════
   11. ALERTS (Dynamic Notifications)
   ════════════════════════════════════════════════════════════ */
.alert { 
  display: flex; 
  align-items: flex-start; 
  gap: var(--m3-spacing-16); 
  padding: var(--m3-spacing-16) var(--m3-spacing-20); 
  border-radius: var(--m3-shape-xl); /* Softer expressive geometry */
  margin-bottom: var(--m3-spacing-16); 
  font-size: 0.9rem; 
  line-height: 1.6; 
}

.alert-emoji { 
  font-size: 1.4rem; 
  flex-shrink: 0; 
  line-height: 1.2; 
}

.alert-warning { 
  background-color: var(--m3-warning-container); 
  color: var(--m3-on-warning-container); 
  border: 1px solid color-mix(in srgb, var(--m3-warning) 40%, transparent); 
}

.alert-info { 
  background-color: var(--m3-primary-container); 
  color: var(--m3-on-primary-container); 
  border: 1px solid color-mix(in srgb, var(--m3-primary) 40%, transparent); 
}


/* ════════════════════════════════════════════════════════════
   12. INFO CARDS & SEARCH UTILITIES (iran.html)
   ════════════════════════════════════════════════════════════ */
.info-card {
  background-color: var(--m3-surface-container-low); 
  /* Expressive cards use subtle tonal borders rather than harsh 1px solids */
  border: 1px solid color-mix(in srgb, var(--m3-outline-variant) 50%, transparent);
  border-radius: var(--m3-shape-xl); 
  padding: var(--m3-spacing-32); 
  transition: box-shadow var(--m3-duration-normal) var(--m3-ease-standard),
              transform var(--m3-duration-normal) var(--m3-ease-standard);
}

.info-card:hover { 
  box-shadow: var(--m3-elevation-2); 
  transform: translateY(-4px); /* Adds organic tactile feedback */
}

.info-card__header { 
  display: flex; 
  align-items: flex-start; 
  gap: var(--m3-spacing-16); 
  margin-bottom: var(--m3-spacing-24); 
}

.info-card__emoji { 
  font-size: 2rem; 
  flex-shrink: 0; 
  line-height: 1.2; 
  margin-top: 2px; 
}

.info-card__sub { 
  font-size: 0.85rem; 
  color: var(--m3-on-surface-variant); 
  font-weight: 500;
}

.info-card__title { 
  font-size: 1.25rem; 
  font-weight: 800; /* Heavier M3E weighting */
  color: var(--m3-on-surface);
  letter-spacing: -0.01em;
}

/* --- Search & Empty States --- */
.search-hidden { display: none !important; }

.search-highlight { 
  background-color: var(--m3-tertiary-container); 
  color: var(--m3-on-tertiary-container); 
  border-radius: var(--m3-shape-xs); 
  padding: 0 4px; 
  font-weight: 700;
}

.search-empty__icon { 
  font-size: 4rem; /* Larger, more expressive empty state icon */
  margin-bottom: var(--m3-spacing-16); 
  opacity: 0.6;
}

.search-empty__title { 
  font-size: 1.25rem; 
  font-weight: 800; 
  margin-bottom: var(--m3-spacing-8); 
  color: var(--m3-on-surface);
}

.search-empty__sub { 
  color: var(--m3-on-surface-variant); 
  font-size: 0.95rem; 
  margin-bottom: var(--m3-spacing-24); 
}

.search-empty__btn { margin-top: var(--m3-spacing-8); }

.section-result-badge {
  display: inline-flex; 
  align-items: center;
  font-size: 0.75rem; 
  font-weight: 800; 
  padding: 4px 12px;
  border-radius: var(--m3-shape-full); 
  background-color: var(--m3-primary-container);
  color: var(--m3-on-primary-container); 
  margin-inline-start: var(--m3-spacing-12); 
  vertical-align: middle;
}


/* ════════════════════════════════════════════════════════════
   13. CARDS GRIDS & LINK CARDS (Unified)
   ════════════════════════════════════════════════════════════ */
.cards-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: var(--m3-spacing-16); 
  margin-bottom: var(--m3-spacing-24); 
}

.cards-grid--narrow { 
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
}

/* Expressive Link Card Base */
.link-card {
  display: flex; 
  flex-direction: column; 
  gap: var(--m3-spacing-8);
  background-color: var(--m3-surface-container-low); 
  /* Subtle tonal border instead of harsh solid lines */
  border: 1px solid color-mix(in srgb, var(--m3-outline-variant) 40%, transparent);
  border-radius: var(--m3-shape-xl); /* Expressive 24px radius */
  padding: var(--m3-spacing-20); 
  cursor: pointer; 
  user-select: none;
  transition: background-color var(--m3-duration-normal) var(--m3-ease-standard), 
              border-color var(--m3-duration-normal) var(--m3-ease-standard), 
              transform var(--m3-duration-normal) var(--m3-ease-standard), 
              box-shadow var(--m3-duration-normal) var(--m3-ease-standard);
}

.link-card:hover { 
  background-color: var(--m3-surface-container-high); 
  border-color: color-mix(in srgb, var(--m3-primary) 50%, transparent); 
  transform: translateY(-4px); /* Organic tactile lift */
  box-shadow: var(--m3-elevation-2); 
}

.link-card:active {
  transform: translateY(0);
  box-shadow: var(--m3-elevation-1);
}

.link-card.search-hidden { display: none !important; }

/* Card Internals */
.link-card__top   { display: flex; align-items: center; justify-content: space-between; gap: var(--m3-spacing-8); }
.link-card__icon, 
.link-card__emoji { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.link-card__name  { font-size: 0.9rem; font-weight: 700; color: var(--m3-on-surface); }
.link-card__title { font-size: 1rem; font-weight: 800; color: var(--m3-on-surface); letter-spacing: -0.01em; }
.link-card__desc, 
.link-card__label { font-size: 0.8rem; color: var(--m3-on-surface-variant); line-height: 1.5; }

.link-card__url { 
  font-size: 0.75rem; 
  color: var(--m3-primary); 
  font-family: 'Courier New', monospace; 
  direction: ltr; 
  text-align: left; 
  background-color: var(--m3-surface-container-highest);
  padding: 4px 8px;
  border-radius: var(--m3-shape-sm);
}

.link-card__visit { font-size: 0.8rem; color: var(--m3-primary); font-weight: 700; white-space: nowrap; }

/* Badges */
.link-card__badge { 
  display: inline-flex; 
  align-items: center; 
  font-size: 0.7rem; 
  font-weight: 800; 
  padding: 2px 8px; 
  border-radius: var(--m3-shape-full); /* Pill */
  background-color: var(--m3-primary-container); 
  color: var(--m3-on-primary-container); 
  white-space: nowrap; 
}

.link-card__badge--warning { 
  background-color: var(--m3-warning-container); 
  color: var(--m3-on-warning-container); 
}


/* ════════════════════════════════════════════════════════════
   14. DOWNLOAD CARDS (Horizontal Layouts)
   ════════════════════════════════════════════════════════════ */
.dl-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: var(--m3-spacing-16); 
  margin-top: var(--m3-spacing-20); 
}

.dl-card {
  display: flex; 
  align-items: center; 
  gap: var(--m3-spacing-16); 
  padding: var(--m3-spacing-16) var(--m3-spacing-20);
  background-color: var(--m3-surface-container-low); 
  border: 1px solid color-mix(in srgb, var(--m3-outline-variant) 40%, transparent);
  border-radius: var(--m3-shape-xl) !important; 
  text-decoration: none; 
  color: var(--m3-on-surface);
  cursor: pointer; 
  overflow: hidden;
  transition: background-color var(--m3-duration-normal) var(--m3-ease-standard), 
              border-color var(--m3-duration-normal) var(--m3-ease-standard), 
              transform var(--m3-duration-normal) var(--m3-ease-standard), 
              box-shadow var(--m3-duration-normal) var(--m3-ease-standard);
}

.dl-card:hover { 
  background-color: var(--m3-surface-container-high); 
  border-color: color-mix(in srgb, var(--m3-primary) 50%, transparent); 
  transform: translateY(-4px); 
  /* Expressive shadow tinted with primary color */
  box-shadow: 0 8px 24px color-mix(in srgb, var(--m3-primary) 15%, transparent); 
}

.dl-card:active { 
  transform: translateY(0); 
  box-shadow: var(--m3-elevation-1); 
}

.dl-card__icon  { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.dl-card__body  { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dl-card__title { font-size: 1.05rem; font-weight: 800; color: var(--m3-on-surface); }
.dl-card__sub   { font-size: 0.8rem; color: var(--m3-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dl-card__arrow { 
  font-size: 1.2rem; 
  color: var(--m3-primary); 
  font-weight: 800; 
  flex-shrink: 0; 
  opacity: 0.6; 
  margin-inline-start: auto; 
  transition: opacity var(--m3-duration-normal) var(--m3-ease-standard), 
              transform var(--m3-duration-normal) var(--m3-ease-standard); 
}

.dl-card:hover .dl-card__arrow { 
  opacity: 1; 
  transform: translateX(-4px); /* Slight directional nudge */
}


/* ════════════════════════════════════════════════════════════
   15. MISC COMPONENTS (Steps, Progress, Typography)
   ════════════════════════════════════════════════════════════ */

/* Setup Steps */
.steps-list { list-style: none; display: flex; flex-direction: column; gap: var(--m3-spacing-16); margin: var(--m3-spacing-16) 0; }
.step-item  { display: flex; align-items: flex-start; gap: var(--m3-spacing-16); }
.step-num   { 
  display: inline-flex; align-items: center; justify-content: center; 
  min-width: 32px; height: 32px; 
  background-color: var(--m3-primary-container); 
  color: var(--m3-on-primary-container); 
  border-radius: var(--m3-shape-full); 
  font-size: 0.9rem; font-weight: 800; flex-shrink: 0; 
}
.step-text  { line-height: 1.6; color: var(--m3-on-surface); padding-top: 4px; font-weight: 500; }
.step-code  { 
  font-family: 'Courier New', monospace; font-size: 0.85rem; 
  background-color: var(--m3-surface-container-high); 
  color: var(--m3-primary); 
  padding: 2px 8px; 
  border-radius: var(--m3-shape-xs); 
  border: 1px solid var(--m3-outline-variant); 
}

/* Progress Bars */
.prog-wrap  { margin: var(--m3-spacing-16) 0; }
.prog-lbl   { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--m3-on-surface-variant); margin-bottom: 8px; }
.prog-bar   { height: 12px; background-color: var(--m3-surface-container-highest); border-radius: var(--m3-shape-full); overflow: hidden; }
.prog-fill  { height: 100%; background-color: var(--m3-primary); border-radius: var(--m3-shape-full); transition: width var(--m3-duration-slow) var(--m3-ease-standard); }

/* Data Visualization Typography */
.big-num    { font-size: 3rem; font-weight: 800; color: var(--m3-primary); line-height: 1; letter-spacing: -0.02em; }
.result-big { font-size: 2rem; font-weight: 800; color: var(--m3-primary); margin: var(--m3-spacing-12) 0; letter-spacing: -0.01em; }

/* Swatches & Checkboxes */
.color-swatch { display: inline-block; width: 24px; height: 24px; border-radius: var(--m3-shape-sm); border: 1px solid var(--m3-outline-variant); vertical-align: middle; margin-inline-end: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
/* ══════════════════════════════════════════════════════════════
   M3 EXPRESSIVE — SLIDER  (input[type="range"])
   Spec: https://m3.material.io/components/sliders/specs
   Track: 16dp height, full pill. Thumb: 4×44dp pill, morphs to
   12px on press. Fill via --val (0–100) set by JS per slider.
   Direction forced ltr so fill always goes left→right correctly.
   ══════════════════════════════════════════════════════════════ */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  flex: 1;
  /* Force LTR so the fill gradient always runs left→right,
     regardless of the page's RTL layout direction. */
  direction: ltr;
}

/* ── WEBKIT TRACK ── */
input[type="range"]::-webkit-slider-runnable-track {
  height: 16px;
  border-radius: var(--m3-shape-full);
  /* Fill from left edge up to thumb position.
     --val (0–100) is set via JS on each slider. */
  background: linear-gradient(
    to right,
    var(--m3-primary)             calc(var(--val, 0) * 1%),
    var(--m3-secondary-container) calc(var(--val, 0) * 1%)
  );
}

/* ── FIREFOX TRACK + FILL ── */
input[type="range"]::-moz-range-track {
  height: 16px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-secondary-container);
  border: none;
}
input[type="range"]::-moz-range-progress {
  height: 16px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-primary);
}

/* ── WEBKIT THUMB ── */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 44px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-primary);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  margin-top: calc((16px - 44px) / 2);
  transition: width var(--m3-duration-fast) var(--m3-ease-emphasized);
  cursor: grab;
}

/* ── FIREFOX THUMB ── */
input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 44px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-primary);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: grab;
  transition: width var(--m3-duration-fast) var(--m3-ease-emphasized);
}

/* ── HOVER — thumb slightly wider, no glow ── */
input[type="range"]:hover::-webkit-slider-thumb { width: 6px; }
input[type="range"]:hover::-moz-range-thumb     { width: 6px; }

/* ── FOCUS — no outline, thumb slightly wider ── */
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { width: 6px; }
input[type="range"]:focus-visible::-moz-range-thumb     { width: 6px; }

/* ── ACTIVE / DRAGGING — expressive widen (M3 shape morph) ── */
input[type="range"]:active::-webkit-slider-thumb {
  width: 12px;
  cursor: grabbing;
}
input[type="range"]:active::-moz-range-thumb {
  width: 12px;
  cursor: grabbing;
}

/* ── DISABLED ── */
input[type="range"]:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── ROW LAYOUT ── */
.range-row {
  display: flex;
  align-items: center;
  gap: var(--m3-spacing-12);
  margin: var(--m3-spacing-12) 0;
}
.range-row label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--m3-on-surface-variant);
  white-space: nowrap;
  min-width: 60px;
}
.range-val {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--m3-primary);
  min-width: 44px;
  text-align: center;
  background: color-mix(in srgb, var(--m3-primary) 10%, transparent);
  border-radius: var(--m3-shape-full);
  padding: 2px 8px;
}

/* ── RANGE NUM INPUT (inline number beside slider) ── */
.range-num-input {
  width: 56px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 6px 6px;
  border-radius: var(--m3-shape-sm);
  border: 1.5px solid var(--m3-outline-variant);
  background: var(--m3-surface-container-low);
  color: var(--m3-on-surface);
  transition: border-color var(--m3-duration-fast) var(--m3-ease-standard);
  -moz-appearance: textfield;
  appearance: textfield;
}
.range-num-input:focus {
  outline: none;
  border-color: var(--m3-primary);
  box-shadow: var(--m3-focus-ring);
}
.range-num-input::-webkit-inner-spin-button,
.range-num-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.check-row  { display: flex; align-items: center; gap: var(--m3-spacing-12); margin: var(--m3-spacing-8) 0; }
.check-lbl  { font-size: 0.9rem; font-weight: 600; color: var(--m3-on-surface); cursor: pointer;}

/* Code Blocks */
.css-code-box { 
  background-color: var(--m3-surface-container-highest); 
  border: 1px solid color-mix(in srgb, var(--m3-outline-variant) 50%, transparent); 
  border-radius: var(--m3-shape-lg); 
  padding: var(--m3-spacing-16) var(--m3-spacing-20); 
  font-family: 'Courier New', monospace; font-size: 0.85rem; 
  direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-all; 
  margin-top: var(--m3-spacing-12); 
}
.css-preview  { border-radius: var(--m3-shape-lg); overflow: hidden; margin: var(--m3-spacing-16) 0; border: 1px solid var(--m3-outline-variant); }

/* Animation States */
.copy-flash { animation: copyFlash var(--m3-duration-slow) var(--m3-ease-standard); }
@keyframes copyFlash { 
  0%   { background-color: var(--m3-primary-container); } 
  100% { background-color: transparent; } 
}

/* Interaction States */
.drag-over  { 
  border-color: var(--m3-primary) !important; 
  background-color: color-mix(in srgb, var(--m3-primary) 8%, var(--m3-surface-container)) !important; 
}
.visible    { visibility: visible !important; opacity: 1 !important; }
.is-stuck   { box-shadow: var(--m3-elevation-2); border-bottom: 1px solid var(--m3-surface-container-highest); }
.is-searching .section-heading { opacity: 0.4; }


/* ════════════════════════════════════════════════════════════
   16. FOOTER
   ════════════════════════════════════════════════════════════ */
.footer { 
  background-color: var(--m3-surface-container-low); 
  /* Subtle border using color-mix */
  border-top: 1px solid color-mix(in srgb, var(--m3-outline-variant) 40%, transparent); 
  padding: var(--m3-spacing-48) 0; 
  margin-top: auto; /* Pushes footer to bottom if content is short */
}

.footer-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  flex-wrap: wrap; 
  gap: var(--m3-spacing-16); 
  padding: 0 var(--m3-spacing-24);
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo { font-size: 2rem; line-height: 1; }
.footer-title { font-weight: 800; font-size: 1.1rem; color: var(--m3-on-surface); margin-bottom: 4px; }
.footer-subtitle,
.footer-muted { color: var(--m3-on-surface-variant); font-size: 0.85rem; font-weight: 500;}

.footer-inner > div { display: flex; flex-direction: column; gap: 4px; }

/* ════════════════════════════════════════════════════════════
   17. RESPONSIVE & ACCESSIBILITY
   ════════════════════════════════════════════════════════════ */

/* --- Tablet & Mobile (< 768px) --- */
@media (max-width: 768px) {
  /* Navigation Swap */
  .nav-rail              { display: none; }
  .bottom-navigation-bar { display: flex; }
  .theme-toggle-fab      { display: flex; }
  .theme-toggle-rail     { display: none; }

  .page-wrapper {
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-bottom: var(--bottom-nav-height);
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* clip ≠ hidden: doesn't create a scroll container, so position:sticky still works */
  }
  body { overflow-x: clip; }

  /* Hero Section Scaling */
  .hero-section { 
    padding: var(--m3-spacing-48) var(--m3-spacing-16); 
    min-height: 280px; 
  }
  .hero-title     { font-size: 2rem; }
  .hero-subtitle  { font-size: 1rem; }
  .hero-icon-wrap { width: 250px; height: 250px; border-radius: var(--m3-shape-lg); }
  .hero-emoji     { font-size: 2.5rem; }

  /* Grid Adjustments */
  .cards-grid         { grid-template-columns: 1fr; }
  .cards-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .dl-grid            { grid-template-columns: 1fr; } /* 1-col for M3 touch targets */
  
  /* Responsive Geometry (Slightly tighter radii on mobile) */
  .info-card,
  .link-card,
  .tool-card,
  .dl-card {
    border-radius: var(--m3-shape-lg) !important; 
  }

  .info-card { padding: var(--m3-spacing-24) var(--m3-spacing-16); }
  .tool-card { padding: var(--m3-spacing-24) var(--m3-spacing-16); margin: 0 16px var(--m3-spacing-24); }

  /* Tool-Specific Scaling */
  .big-num { font-size: 3.2rem; }
  .calc-btn { padding: 16px; font-size: 1.2rem; }
  
  /* Footer */
  .footer-inner { 
    flex-direction: column; 
    text-align: center; 
    gap: var(--m3-spacing-16);
  }
}

/* --- Small Mobile (< 480px) --- */
@media (max-width: 480px) { 
  .hero-title { font-size: 1.75rem; }
  .hero-search-bar { padding: 6px 16px; }
  .calc-grid { gap: var(--m3-spacing-8); }
  .calc-btn { padding: 12px; font-size: 1.1rem; }
}

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  
  *, *::before, *::after { 
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════
   18. TOP APP BAR & SIDE DRAWER (Mobile Navigation)
   ════════════════════════════════════════════════════════════ */

.top-bar {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--m3-spacing-16);
  background-color: color-mix(in srgb, var(--m3-surface) 85%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: var(--m3-spacing-16);
  border-bottom: 1px solid color-mix(in srgb, var(--m3-outline-variant) 40%, transparent);
  transition: background-color var(--m3-duration-normal) var(--m3-ease-standard);
}

.hamburger-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--m3-on-surface);
  width: 48px;
  height: 48px;
  border-radius: var(--m3-shape-full); /* Pill */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--m3-duration-fast) var(--m3-ease-standard);
}

.hamburger-btn:hover { background-color: var(--m3-surface-container-high); }
.hamburger-btn:active { background-color: var(--m3-surface-container-highest); }

.top-bar__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--m3-on-surface);
  flex: 1;
}

/* Side Drawer Modal */
.drawer-overlay {
  position: fixed; inset: 0;
  background-color: color-mix(in srgb, var(--m3-scrim) 50%, transparent);
  z-index: 300; opacity: 0; pointer-events: none;
  transition: opacity var(--m3-duration-normal) var(--m3-ease-standard);
  backdrop-filter: blur(2px);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.side-drawer {
  position: fixed; top: 0; right: 0;
  height: 100dvh; width: 320px; max-width: 85vw;
  background-color: var(--m3-surface-container-low);
  /* Expressive rounding only on the inner edge */
  border-radius: var(--m3-shape-xl) 0 0 var(--m3-shape-xl);
  z-index: 400; display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--m3-duration-normal) var(--m3-ease-standard);
  box-shadow: var(--m3-elevation-3);
  overflow: hidden;
}
.side-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; gap: var(--m3-spacing-16);
  padding: var(--m3-spacing-24) var(--m3-spacing-24) var(--m3-spacing-16);
  border-bottom: 1px solid var(--m3-outline-variant);
  flex-shrink: 0;
}
.drawer-brand-icon { font-size: 2.2rem; line-height: 1; }
.drawer-brand-text { font-size: 1.25rem; font-weight: 800; color: var(--m3-primary); letter-spacing: 0.02em; }

.drawer-close {
  margin-right: auto; background: transparent; border: none; font-size: 1.5rem;
  cursor: pointer; color: var(--m3-on-surface-variant);
  width: 44px; height: 44px; border-radius: var(--m3-shape-full);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--m3-duration-fast);
}
.drawer-close:hover { background-color: var(--m3-surface-container-high); }

.drawer-scroll { overflow-y: auto; flex: 1; padding: var(--m3-spacing-16) 0 var(--m3-spacing-32); }

.drawer-section-label {
  font-size: 0.8rem; font-weight: 800; color: var(--m3-primary);
  padding: var(--m3-spacing-16) var(--m3-spacing-28) var(--m3-spacing-8); display: block;
}

.drawer-item {
  display: flex; align-items: center; gap: var(--m3-spacing-16);
  padding: 14px 28px; cursor: pointer;
  border-radius: 50px 0 0 50px; margin-left: var(--m3-spacing-16);
  color: var(--m3-on-surface); font-weight: 600; font-size: 1rem;
  transition: background-color var(--m3-duration-fast);
}
.drawer-item:hover { background-color: var(--m3-surface-container-high); }
.drawer-item.active { background-color: var(--m3-secondary-container); color: var(--m3-on-secondary-container); font-weight: 800; }
.drawer-item__icon { font-size: 1.4rem; width: 28px; text-align: center; flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════
   19. MAIN TOOL INTERFACE & FORMS
   ════════════════════════════════════════════════════════════ */

.tool-container { padding-bottom: 96px; padding-top: 0; }

.tool-card {
  background-color: var(--m3-surface-container-low);
  border-radius: var(--m3-shape-xl); /* Expressive Card */
  padding: var(--m3-spacing-32);
  margin: 0 auto var(--m3-spacing-32);
  display: none;
  max-width: 900px;
  box-shadow: var(--m3-elevation-1);
}
.tool-card.active { display: block; animation: toolFadeIn 0.3s var(--m3-ease-standard); margin-top: var(--m3-spacing-24); }

@keyframes toolFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.tool-title { font-size: 1.6rem; font-weight: 900; color: var(--m3-on-surface); margin-bottom: var(--m3-spacing-24); }

/* ─── Form Layout Helpers ─────────────────────────────── */
.field-row { display: flex; gap: var(--m3-spacing-16); flex-wrap: wrap; margin-bottom: 16px; }
.field-col  { flex: 1; min-width: 200px; }

/* ─── Legacy label (standalone label outside the field wrapper) ─── */
.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--m3-on-surface-variant);
}


/* ════════════════════════════════════════════════════════════
   M3 OUTLINED TEXT FIELD
   Anatomy (from spec image):
     1. Container outline (1px → 2px on focus)
     2. Label text — floats from inside to the notch
     3. Leading icon (optional, .field--leading-icon)
     4. Trailing icon (optional, .field--trailing-icon)
     5. Input / caret
     6. Supporting text (below container)

   Usage:
     <div class="field">
       <div class="field__container">
         <input class="field__input" id="x" placeholder=" ">
         <label class="field__label" for="x">Label text</label>
       </div>
       <span class="field__support">Supporting text</span>
     </div>

   For textarea:  add class "field--textarea" on .field
   For select:    use <select class="field__input">
   With icons:    add "field--leading-icon" or "field--trailing-icon" on .field,
                  then <span class="field__icon field__icon--lead">…</span>
                       <span class="field__icon field__icon--trail">…</span>
   Error state:   add "field--error" on .field
   Disabled:      add "disabled" attr on the input + "field--disabled" on .field
   ════════════════════════════════════════════════════════════ */

/* Spec measurements:
   Container height:       56px (text) | auto (textarea)
   Corner radius:          4px  (M3 spec for outlined)
   Outline width:          1px enabled, 2px focused/error
   Label size idle:        16px (body-large)
   Label size floating:    12px (body-small)
   Label float translate:  -50% from container top
   Horizontal padding:     16px
   Label-to-text gap:      0 (label IS the placeholder concept)
   Supporting text:        12px, 16px below container
*/

:root {
  --field-height:          56px;
  --field-radius:          4px;      /* M3 spec: 4dp for outlined */
  --field-pad-h:           16px;
  --field-outline:         var(--m3-outline);
  --field-outline-focused: var(--m3-primary);
  --field-label-color:     var(--m3-on-surface-variant);
  --field-label-focused:   var(--m3-primary);
  --field-input-color:     var(--m3-on-surface);
  --field-support-color:   var(--m3-on-surface-variant);
  --field-bg:              transparent; /* Outlined fields: transparent bg */
  /* Label float destination: sits centred on the top outline stroke */
  --field-label-float-y:   -50%;
}

/* ── Wrapper ─────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* margin-bottom pushed to callers via .field-row or direct margin */
}

.field + .field,
.field-row .field { margin-bottom: 0; }  /* rows control spacing */

/* ── Container (the visible outlined box) ─────────────── */
.field__container {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--field-height);
  border-radius: var(--field-radius);
  /* The outline is simulated with box-shadow so we can animate width cleanly */
  box-shadow: inset 0 0 0 1px var(--field-outline);
  background-color: var(--field-bg);
  transition:
    box-shadow var(--m3-duration-fast) var(--m3-ease-standard);
  cursor: text;
}

/* Textarea variant: auto-height */
.field--textarea .field__container {
  height: auto;
  align-items: flex-start;
}

/* ── The outline notch for the floating label ─────────── */
/* We use a CSS clip trick: a pseudo-element "cuts" the top border where
   the label sits. Works by placing a background-coloured element behind
   the label text, exactly as wide as the label, that masks the outline. */

/* ── Input element ────────────────────────────────────── */
.field__input {
  width: 100%;
  height: 100%;
  padding: 0 var(--field-pad-h);
  border: none;
  outline: none;
  background: transparent;
  color: var(--field-input-color);
  font: inherit;
  font-size: 1rem;          /* body-large / 16sp */
  font-weight: 400;
  line-height: 1.5;
  caret-color: var(--field-outline-focused);
  /* Ensure input text doesn't sit under the floating label */
  padding-top: 0;
}

/* Textarea */
.field--textarea .field__input {
  height: auto;
  min-height: 120px;
  resize: vertical;
  padding-top: 20px;
  padding-bottom: 12px;
  align-self: stretch;
}

/* Select arrow */
.field__input[type=""] ,
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  /* space for custom arrow */
  padding-inline-end: 40px;
  cursor: pointer;
}

/* ── Floating Label ───────────────────────────────────── */
.field__label {
  /* Absolute, vertically centred inside the container at rest */
  position: absolute;
  inset-inline-start: var(--field-pad-h);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;

  /* Typography: body-large at rest */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--field-label-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 2 * var(--field-pad-h));

  /* Notch background: masks the outline behind the label when floating */
  padding: 0 4px;
  margin-inline-start: -4px;
  background: transparent; /* filled in when floating */

  /* Transition: position + size + color */
  transition:
    top var(--m3-duration-fast) var(--m3-ease-standard),
    transform var(--m3-duration-fast) var(--m3-ease-standard),
    font-size var(--m3-duration-fast) var(--m3-ease-standard),
    color var(--m3-duration-fast) var(--m3-ease-standard),
    background-color var(--m3-duration-fast) var(--m3-ease-standard),
    letter-spacing var(--m3-duration-fast) var(--m3-ease-standard);
}

/* Textarea: label anchored near top */
.field--textarea .field__label {
  top: 20px;
  transform: none;
}

/* ── Floating state triggers ──────────────────────────── */
/* Label floats when: (a) input has focus, OR (b) input has a value
   We use placeholder=" " (a single space) trick so :placeholder-shown
   tells us the field is empty vs. filled.                            */

/* When the field has content (not showing placeholder = has value) */
.field__input:not(:placeholder-shown) ~ .field__label,
/* When focused */
.field__input:focus ~ .field__label,
/* Autofill */
.field__input:-webkit-autofill ~ .field__label {
  /* Float to the top outline */
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;       /* body-small / 12sp */
  letter-spacing: 0.04em;
  font-weight: 500;
  /* Notch mask: use the card/surface background color to cut the outline */
  background-color: var(--m3-surface-container-low);
  color: var(--field-label-color);
}

/* For textarea: float differently */
.field--textarea .field__input:not(:placeholder-shown) ~ .field__label,
.field--textarea .field__input:focus ~ .field__label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--m3-surface-container-low);
}

/* ── Focus state ─────────────────────────────────────── */
.field__container:focus-within {
  box-shadow: inset 0 0 0 2px var(--field-outline-focused);
}

.field__input:focus ~ .field__label {
  color: var(--field-label-focused);
}

/* ── Hover state ─────────────────────────────────────── */
.field__container:not(:focus-within):hover {
  box-shadow: inset 0 0 0 1px var(--m3-on-surface);
}
.field__container:not(:focus-within):hover .field__label {
  color: var(--m3-on-surface);
}

/* ── Supporting text ──────────────────────────────────── */
.field__support {
  display: block;
  padding: 4px var(--field-pad-h) 0;
  font-size: 0.75rem;       /* 12sp */
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: 0.04em;
  color: var(--field-support-color);
  min-height: 20px; /* reserve space even if empty */
}

/* ── Icons ────────────────────────────────────────────── */
.field__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;        /* 20dp icon */
  color: var(--m3-on-surface-variant);
  width: 48px;               /* 48dp touch target */
  height: var(--field-height);
  transition: color var(--m3-duration-fast) var(--m3-ease-standard);
}

.field__icon--lead {
  padding-inline-end: 0;
  padding-inline-start: 4px;
}

.field__icon--trail {
  padding-inline-start: 0;
  padding-inline-end: 4px;
  cursor: pointer;
}

/* Adjust input padding when icons present */
.field--leading-icon .field__input {
  padding-inline-start: 4px;
}
.field--leading-icon .field__label {
  inset-inline-start: 52px; /* 48px icon + 4px gap */
}
.field--trailing-icon .field__input {
  padding-inline-end: 4px;
}

/* Icon color on focus */
.field__container:focus-within .field__icon--trail {
  color: var(--m3-on-surface-variant);
}

/* ── Error state ──────────────────────────────────────── */
.field--error .field__container {
  box-shadow: inset 0 0 0 1px var(--m3-error);
}
.field--error .field__container:focus-within {
  box-shadow: inset 0 0 0 2px var(--m3-error);
}
.field--error .field__label,
.field--error .field__input:focus ~ .field__label,
.field--error .field__input:not(:placeholder-shown) ~ .field__label {
  color: var(--m3-error);
}
.field--error .field__support {
  color: var(--m3-error);
}
.field--error .field__icon {
  color: var(--m3-error);
}

/* ── Disabled state ───────────────────────────────────── */
.field--disabled .field__container {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m3-on-surface) 38%, transparent);
  pointer-events: none;
}
.field--disabled .field__input {
  color: color-mix(in srgb, var(--m3-on-surface) 38%, transparent);
  cursor: not-allowed;
}
.field--disabled .field__label {
  color: color-mix(in srgb, var(--m3-on-surface) 38%, transparent);
}
.field--disabled .field__support {
  color: color-mix(in srgb, var(--m3-on-surface) 38%, transparent);
}

/* ── Dark theme notch background override ─────────────── */
[data-theme="dark"] .field__input:not(:placeholder-shown) ~ .field__label,
[data-theme="dark"] .field__input:focus ~ .field__label,
[data-theme="dark"] .field__input:-webkit-autofill ~ .field__label,
[data-theme="dark"] .field--textarea .field__input:not(:placeholder-shown) ~ .field__label,
[data-theme="dark"] .field--textarea .field__input:focus ~ .field__label {
  background-color: var(--m3-surface-container-low);
}

/* ── Select chevron (custom arrow) ───────────────────────── */
.field__container:has(select.field__input)::after {
  content: '▾';
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--m3-on-surface-variant);
  pointer-events: none;
  transition: color var(--m3-duration-fast);
}
.field__container:has(select.field__input):focus-within::after {
  color: var(--m3-primary);
}

/* ════════════════════════════════════════════════════════════
   BREADCRUMB NAVIGATION (Material 3 Expressive)
   ════════════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--m3-spacing-8);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--m3-on-surface-variant);
  direction: rtl;
  unicode-bidi: bidi-override;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--m3-spacing-4);
}

.breadcrumb__link {
  cursor: pointer;
  color: var(--m3-primary);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--m3-duration-fast) var(--m3-ease-standard);
  padding: var(--m3-spacing-4) var(--m3-spacing-8);
  border-radius: var(--m3-shape-sm);
  margin: 0 calc(var(--m3-spacing-4) * -1);
}

.breadcrumb__link:hover {
  background-color: color-mix(in srgb, var(--m3-primary) 10%, transparent);
  color: var(--m3-primary);
}

.breadcrumb__link:active {
  background-color: color-mix(in srgb, var(--m3-primary) 20%, transparent);
}

.breadcrumb__separator {
  color: var(--m3-outline-variant);
  font-weight: 400;
}

.breadcrumb__text {
  color: var(--m3-on-surface);
  font-weight: 600;
}

/* ── Backward-compat shims ────────────────────────────────
   The old .text-input / .text-area / .select-input classes
   still exist so un-migrated tools degrade gracefully.
   They now render as M3 outlined fields without the floating
   label (label is rendered as .field-label above the box).   */
.text-input, .text-area, .select-input {
  width: 100%;
  padding: 12px var(--field-pad-h);
  border-radius: var(--field-radius);
  border: 1px solid var(--m3-outline);
  background-color: var(--m3-surface-container);
  color: var(--m3-on-surface);
  font: inherit;
  font-size: 1rem;
  box-sizing: border-box;
  transition:
    border-color var(--m3-duration-fast) var(--m3-ease-standard),
    box-shadow var(--m3-duration-fast) var(--m3-ease-standard);
}
.select-input {
  -webkit-appearance: auto;
  appearance: auto;
}
.text-input:hover, .text-area:hover, .select-input:hover {
  border-color: var(--m3-on-surface);
}
.text-input:focus, .text-area:focus, .select-input:focus {
  border: 2px solid var(--m3-primary);
  padding: 14px var(--field-pad-h);  /* compensate for extra border px */
  outline: none;
}
.text-area { resize: vertical; min-height: 120px; }

.text-input--large { font-size: 2rem; text-align: left; direction: ltr; font-weight: 800; padding: 24px; }
.text-input--ro { border-color: var(--m3-outline-variant); cursor: default; color: var(--m3-on-surface-variant); }

/* ── Tool-card surface context: adjust notch bg ───────── */
/* When the field is inside a .tool-card, the notch should match
   the card background, not the page background.                  */
.tool-card .field__input:not(:placeholder-shown) ~ .field__label,
.tool-card .field__input:focus ~ .field__label,
.tool-card .field--textarea .field__input:not(:placeholder-shown) ~ .field__label,
.tool-card .field--textarea .field__input:focus ~ .field__label {
  background-color: var(--m3-surface-container-low);
}

/* ── Inline / compact variant ─────────────────────────── */
.field--compact .field__container { height: 44px; }
.field--compact .field__input { font-size: 0.875rem; }
.field--compact .field__label { font-size: 0.875rem; }
.field--compact .field__input:not(:placeholder-shown) ~ .field__label,
.field--compact .field__input:focus ~ .field__label {
  font-size: 0.7rem;
}


/* ════════════════════════════════════════════════════════════
   20. SPECIFIC TOOL WIDGETS (Calc, Upload, Data Lists)
   ════════════════════════════════════════════════════════════ */

/* Calculator */
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--m3-spacing-12); }
.calc-btn {
  padding: 20px; font-size: 1.4rem; border-radius: var(--m3-shape-lg);
  border: none; background-color: var(--m3-surface-container-high);
  color: var(--m3-on-surface); font-weight: 800; cursor: pointer;
  transition: background-color var(--m3-duration-fast), transform var(--m3-duration-fast);
}
.calc-btn:hover { background-color: var(--m3-surface-container-highest); }
.calc-btn:active { transform: scale(0.95); }
.calc-btn--op { background-color: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
.calc-btn--op:hover { background-color: color-mix(in srgb, var(--m3-on-secondary-container) 8%, var(--m3-secondary-container)); }
.calc-btn--prim { background-color: var(--m3-primary); color: var(--m3-on-primary); }
.calc-btn--prim:hover { background-color: color-mix(in srgb, var(--m3-on-primary) 10%, var(--m3-primary)); }

/* File Upload Zone */
.upload-zone {
  border: 2px dashed var(--m3-outline);
  border-radius: var(--m3-shape-xl);
  padding: 40px 24px; text-align: center; cursor: pointer;
  background-color: var(--m3-surface-container);
  transition: all var(--m3-duration-fast) var(--m3-ease-standard);
  margin-bottom: var(--m3-spacing-16);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--m3-primary);
  background-color: color-mix(in srgb, var(--m3-primary) 8%, var(--m3-surface-container));
}
.upload-zone input[type="file"] { display: none; }
.upload-zone__icon  { font-size: 3rem; color: var(--m3-primary); margin-bottom: var(--m3-spacing-12); }
.upload-zone__text  { font-size: 1.15rem; font-weight: 800; color: var(--m3-on-surface); margin-bottom: 4px; }
.upload-zone__limit { font-size: 0.85rem; color: var(--m3-on-surface-variant); }

.file-info-bar {
  padding: 12px 20px; background-color: var(--m3-surface-container-high);
  border-radius: var(--m3-shape-lg); font-size: 0.95rem; font-weight: 600;
  color: var(--m3-on-surface); margin-top: var(--m3-spacing-16);
}

/* Data Lists & Stopwatches */
.data-list { background-color: var(--m3-surface-container); border-radius: var(--m3-shape-lg); overflow: hidden; margin-bottom: var(--m3-spacing-16); }
.data-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--m3-outline-variant); font-size: 1rem; gap: 16px; }
.data-row:last-child { border-bottom: none; }
.data-row__key { color: var(--m3-on-surface-variant); font-weight: 600; flex-shrink: 0; }
.data-row__val { color: var(--m3-on-surface); font-weight: 800; text-align: left; word-break: break-all; }
.data-row--head { background-color: color-mix(in srgb, var(--m3-primary) 10%, transparent); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--m3-primary); border-bottom: 1px solid var(--m3-primary-container); }

.lap-list { max-height: 250px; overflow-y: auto; background-color: var(--m3-surface-container); border-radius: var(--m3-shape-lg); padding: 8px; margin-top: var(--m3-spacing-16); }
.lap-item { padding: 12px 20px; display: flex; justify-content: space-between; font-weight: 700; color: var(--m3-on-surface); border-bottom: 1px solid var(--m3-outline-variant); font-variant-numeric: tabular-nums; }


/* ════════════════════════════════════════════════════════════
   21. PWA INSTALL & SHARE MODALS
   ════════════════════════════════════════════════════════════ */

.share-install-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m3-spacing-16); margin-bottom: var(--m3-spacing-32); }
@media (max-width: 540px) { .share-install-row { grid-template-columns: 1fr; } }

.share-card {
  background-color: var(--m3-surface-container-low);
  border: 1px solid color-mix(in srgb, var(--m3-outline-variant) 50%, transparent);
  border-radius: var(--m3-shape-xl); padding: var(--m3-spacing-24);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--m3-spacing-12);
  cursor: pointer; transition: all var(--m3-duration-normal) var(--m3-ease-standard);
}
.share-card:hover { border-color: var(--m3-primary); transform: translateY(-4px); box-shadow: var(--m3-elevation-2); background-color: var(--m3-surface-container-high); }
.share-card__icon  { font-size: 2.5rem; }
.share-card__title { font-size: 1.1rem; font-weight: 800; color: var(--m3-on-surface); }
.share-card__desc  { font-size: 0.85rem; color: var(--m3-on-surface-variant); line-height: 1.5; }

/* PWA Bottom Sheet Modal */
#pwa-popup { display: none; position: fixed; inset: 0; background-color: color-mix(in srgb, var(--m3-scrim) 60%, transparent); z-index: 9000; align-items: flex-end; justify-content: center; backdrop-filter: blur(4px); }
#pwa-popup.show { display: flex; }
#pwa-popup-box {
  background-color: var(--m3-surface-container-low);
  border-radius: var(--m3-shape-xxl) var(--m3-shape-xxl) 0 0; /* Bottom sheet curve */
  padding: 40px 32px; width: 100%; max-width: 640px;
  animation: popupSlideUp 0.4s var(--m3-ease-standard); box-shadow: 0 -8px 24px rgba(0,0,0,0.2);
}
@keyframes popupSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

#pwa-popup-box h3 { font-size: 1.4rem; font-weight: 900; color: var(--m3-on-surface); margin-bottom: var(--m3-spacing-24); }
.pwa-step { display: flex; align-items: center; gap: var(--m3-spacing-20); padding: var(--m3-spacing-16) 0; border-bottom: 1px solid var(--m3-outline-variant); font-size: 1rem; font-weight: 600; color: var(--m3-on-surface); }
.pwa-step:last-child { border-bottom: none; }
.pwa-step-num { width: 40px; height: 40px; border-radius: var(--m3-shape-full); background-color: var(--m3-primary); color: var(--m3-on-primary); font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════
   22. RECENT & FAVORITE CHIPS
   ════════════════════════════════════════════════════════════ */

.recent-strip { display: flex; gap: var(--m3-spacing-8); flex-wrap: wrap; padding: 0 0 var(--m3-spacing-12); }
.recent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background-color: var(--m3-surface-container);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-full); /* Pill */
  padding: 6px 16px; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; color: var(--m3-on-surface);
  transition: all var(--m3-duration-fast) var(--m3-ease-standard); user-select: none;
}
.recent-chip:hover { background-color: var(--m3-surface-container-high); border-color: var(--m3-primary); color: var(--m3-primary); }
.recent-chip:active { background-color: color-mix(in srgb, var(--m3-primary) 12%, var(--m3-surface-container-highest)); }

.fav-btn {
  position: absolute; top: 12px; left: 12px;
  background: transparent; border: none; font-size: 1.3rem;
  cursor: pointer; color: var(--m3-on-surface-variant);
  padding: 4px; border-radius: 50%; z-index: 2;
  transition: transform var(--m3-duration-fast), color var(--m3-duration-fast);
}
.fav-btn:hover { transform: scale(1.2); color: var(--m3-on-surface); }
.fav-btn.active { color: #f59e0b; /* Golden star for fav */ }
.use-badge { display:none; position:absolute; top:8px; left:8px; background-color:var(--m3-primary); color:var(--m3-on-primary); font-size:0.7rem; padding:2px 8px; border-radius:var(--m3-shape-full); font-weight:800; }



/* ════════════════════════════════════════════════════════════
   23. UTILITIES & FLOATING ACTIONS (iran.html specifics)
   ════════════════════════════════════════════════════════════ */

/* --- Section Dividers --- */
.section-hr { 
  border: none; 
  /* Soft, tonal divider instead of harsh opacity shifts */
  border-top: 1px solid color-mix(in srgb, var(--m3-outline-variant) 40%, transparent); 
  margin: 0; 
}

/* --- Search State Overrides --- */
/* Hide tables entirely if they don't match search */
.table-card.search-hidden { 
  display: none !important; 
}

/* Dim headings when searching to focus attention on results */
body.is-searching .section-heading { 
  opacity: 0.5; 
  transition: opacity var(--m3-duration-normal) var(--m3-ease-standard);
}

/* Fix for the Empty Search Button (Removed 'filter: brightness') */
.search-empty__btn {
  margin-top: var(--m3-spacing-12);
  padding: 10px 24px;
  border-radius: var(--m3-shape-full); /* Pill */
  border: none;
  background-color: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--m3-duration-fast) var(--m3-ease-standard),
              transform var(--m3-duration-fast) var(--m3-ease-standard);
}

.search-empty__btn:hover { 
  /* M3E State Layer */
  background-color: color-mix(in srgb, var(--m3-on-primary-container) 8%, var(--m3-primary-container)); 
  transform: translateY(-1px);
}

.search-empty__btn:active {
  background-color: color-mix(in srgb, var(--m3-on-primary-container) 12%, var(--m3-primary-container)); 
  transform: translateY(0);
}

/* --- Back to Top Button (M3E Secondary FAB) --- */
#back-to-top {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--m3-spacing-16));
  inset-inline-end: var(--m3-spacing-20);
  width: 48px; 
  height: 48px;
  border-radius: var(--m3-shape-lg); /* Expressive Squircle shape */
  background-color: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex; 
  align-items: center; 
  justify-content: center;
  box-shadow: var(--m3-elevation-2);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.85);
  transition: opacity var(--m3-duration-normal) var(--m3-ease-standard), 
              transform var(--m3-duration-normal) var(--m3-ease-standard),
              background-color var(--m3-duration-fast) var(--m3-ease-standard),
              box-shadow var(--m3-duration-fast) var(--m3-ease-standard);
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#back-to-top:hover { 
  background-color: color-mix(in srgb, var(--m3-on-secondary-container) 8%, var(--m3-secondary-container));
  box-shadow: var(--m3-elevation-3);
  transform: translateY(-2px) scale(1);
}

#back-to-top:active {
  background-color: color-mix(in srgb, var(--m3-on-secondary-container) 12%, var(--m3-secondary-container));
  box-shadow: var(--m3-elevation-1);
  transform: translateY(0) scale(1);
}

/* Ensure it sits above the mobile bottom nav */
@media (min-width: 769px) {
  #back-to-top {
    bottom: var(--m3-spacing-24);
  }
}


/* ════════════════════════════════════════════════════════════
   24. M3 OUTLINED TEXT FIELDS (Material 3 Expressive)
   Spec: https://m3.material.io/components/text-fields/specs
   ════════════════════════════════════════════════════════════

   Structure:
   <div class="m3-field [m3-field--error] [m3-field--populated]">
     <div class="m3-field__container">
       <span class="m3-field__leading-icon">🔍</span>  <!-- optional -->
       <label class="m3-field__label">Label text</label>
       <input  class="m3-field__input" ... />
       <span class="m3-field__trailing-icon">✕</span> <!-- optional -->
     </div>
     <span class="m3-field__support">Supporting text</span> <!-- optional -->
   </div>
   ════════════════════════════════════════════════════════════ */

/* ── Container ── */
.m3-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-bottom: var(--m3-spacing-12);
  position: relative;
}

.m3-field__container {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;               /* M3 spec: 56dp tall */
  border-radius: var(--m3-shape-md); /* 12px = M3 Expressive outlined shape */
  border: 1px solid var(--m3-outline);
  padding: 0 16px;
  gap: 12px;
  background: transparent;
  cursor: text;
  /* Smooth border transition */
  transition:
    border-color var(--m3-duration-fast) var(--m3-ease-standard),
    border-width  var(--m3-duration-fast) var(--m3-ease-standard);
}

/* ── Floating Label ── */
.m3-field__label {
  position: absolute;
  /* Resting position: vertically centred inside the container */
  top: 50%;
  transform: translateY(-50%);
  /* In RTL layout the label starts at the inline-start side.
     We use `inset-inline-start` so it works for both LTR and RTL pages. */
  inset-inline-start: 16px;
  color: var(--m3-on-surface-variant);
  font-size: 1rem;            /* body-large resting */
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  /* Smooth float animation */
}

/* ════════════════════════════════════════════════════════════
   SHARED PAGE LAYOUTS & COMPONENTS
   ════════════════════════════════════════════════════════════ */

/* Main content layout */
.main-content { flex: 1; padding-bottom: 48px; }

/* ════════════════════════════════════════════════════════════
   SECTION HEADINGS
   ════════════════════════════════════════════════════════════ */
.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.section-heading-icon {
    width: 48px; height: 48px;
    background-color: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    border-radius: var(--m3-shape-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.section-heading h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m3-on-surface);
    margin: 0;
}
.section-heading p {
    font-size: 0.875rem;
    color: var(--m3-on-surface-variant);
    margin: 2px 0 0;
}

/* ════════════════════════════════════════════════════════════
   CARDS GRID
   ════════════════════════════════════════════════════════════ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.cards-grid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cards-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ════════════════════════════════════════════════════════════
   LINK CARD
   ════════════════════════════════════════════════════════════ */
.link-card {
    background-color: var(--m3-surface-container-low);
    border: 1.5px solid var(--m3-outline-variant);
    border-radius: var(--m3-shape-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}
.link-card:hover {
    background-color: var(--m3-surface-container);
    border-color: var(--m3-primary);
    transform: translateY(-3px);
    box-shadow: var(--m3-elevation-2);
    text-decoration: none;
}
.link-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.link-card__emoji {
    font-size: 24px;
    line-height: 1;
    width: 40px; height: 40px;
    background-color: var(--m3-primary-container);
    border-radius: var(--m3-shape-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.link-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--m3-on-surface);
}
.link-card__url {
    font-size: 0.78rem;
    color: var(--m3-primary);
    word-break: break-all;
    direction: ltr;
    text-align: left;
    font-family: 'Courier New', monospace;
    background-color: var(--m3-surface-container-highest);
    padding: 4px 8px;
    border-radius: var(--m3-shape-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.link-card__url:hover {
    background-color: var(--m3-primary-container);
}
.link-card__desc {
    font-size: 0.82rem;
    color: var(--m3-on-surface-variant);
    line-height: 1.5;
}
.link-card__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--m3-shape-full);
    background-color: var(--m3-tertiary-container);
    color: var(--m3-on-tertiary-container);
    align-self: flex-start;
}
.link-card__badge--warning {
    background-color: var(--m3-warning-container, #ffd8a8);
    color: var(--m3-on-warning-container, #4a2800);
}
.link-card__badge--error {
    background-color: var(--m3-error-container);
    color: var(--m3-on-error-container);
}
.link-card__badge--ok {
    background-color: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

/* ════════════════════════════════════════════════════════════
   INFO CARD
   ════════════════════════════════════════════════════════════ */
.info-card {
    background-color: var(--m3-surface-container-low);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-shape-xl);
    padding: 28px;
    transition: box-shadow 0.2s ease;
    margin-bottom: 16px;
}
.info-card:hover { box-shadow: var(--m3-elevation-1); }
.info-card__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.info-card__emoji { font-size: 28px; flex-shrink: 0; line-height: 1.2; }
.info-card__title { font-size: 1.1rem; font-weight: 700; color: var(--m3-on-surface); }
.info-card__sub { font-size: 0.85rem; color: var(--m3-on-surface-variant); margin-top: 2px; }
.info-card__divider { height: 1px; background: var(--m3-outline-variant); margin: 16px 0; border-radius: 1px; }
.info-card__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--m3-shape-lg);
    background: rgba(0,0,0,0.06);
    border: 1px solid var(--m3-outline-variant);
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.6;
}
[data-theme="dark"] .info-card__note { background: rgba(255,255,255,0.06); }

/* ════════════════════════════════════════════════════════════
   SETUP STEPS
   ════════════════════════════════════════════════════════════ */
.steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--m3-surface-container);
    border-radius: var(--m3-shape-lg);
    border: 1px solid var(--m3-outline-variant);
}
.step-num {
    min-width: 28px;
    height: 28px;
    background: var(--m3-primary);
    color: var(--m3-on-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.step-text {
    font-size: 0.9rem;
    color: var(--m3-on-surface);
    line-height: 1.6;
}
.step-code {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    background: var(--m3-surface-container-highest);
    color: var(--m3-primary);
    padding: 3px 8px;
    border-radius: var(--m3-shape-sm);
    margin-top: 6px;
    cursor: pointer;
    direction: ltr;
    transition: background 0.15s;
}
.step-code:hover {
    background: var(--m3-primary-container);
}

/* ════════════════════════════════════════════════════════════
   TABLE CARD (Chabokan commands)
   ════════════════════════════════════════════════════════════ */
.table-card {
    background-color: var(--m3-surface-container-low);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-shape-xl);
    overflow: hidden;
    margin-bottom: 16px;
}
.table-card__header {
    padding: 14px 20px;
    background-color: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.table-rows { display: flex; flex-direction: column; }
.table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--m3-outline-variant);
    transition: background-color 0.15s ease;
    flex-wrap: wrap;
}
.table-row:last-child { border-bottom: none; }
.table-row:hover { background-color: var(--m3-surface-container); }
.table-row__name {
    font-weight: 600;
    font-size: 0.88rem;
    min-width: 140px;
    flex-shrink: 0;
    color: var(--m3-on-surface);
}
.table-row__link {
    font-size: 0.8rem;
    color: var(--m3-primary);
    direction: ltr;
    text-align: left;
    font-family: 'Courier New', monospace;
    background: var(--m3-surface-container-highest);
    padding: 4px 10px;
    border-radius: var(--m3-shape-sm);
    cursor: pointer;
    transition: background 0.15s;
    word-break: break-all;
}
.table-row__link:hover { background: var(--m3-primary-container); }

/* ════════════════════════════════════════════════════════════
   ALERTS
   ════════════════════════════════════════════════════════════ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--m3-shape-lg);
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.6;
}
.alert-emoji { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.alert-info {
    background-color: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    border: 1px solid var(--m3-primary);
}
.alert-warning {
    background-color: var(--m3-warning-container, #ffd8a8);
    color: var(--m3-on-warning-container, #4a2800);
    border: 1px solid var(--m3-warning, #e65100);
}

/* ════════════════════════════════════════════════════════════
   DL CARDS
   ════════════════════════════════════════════════════════════ */
.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.dl-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--m3-surface-container);
    border: 1.5px solid var(--m3-outline-variant);
    border-radius: var(--m3-shape-xl);
    text-decoration: none;
    color: var(--m3-on-surface);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.dl-card:hover {
    background: var(--m3-surface-container-high);
    border-color: var(--m3-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--m3-primary) 20%, transparent);
    text-decoration: none;
}
.dl-card__icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.dl-card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.dl-card__title { font-size: 0.9rem; font-weight: 600; }
.dl-card__sub { font-size: 0.72rem; color: var(--m3-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-card__arrow { font-size: 1rem; color: var(--m3-primary); flex-shrink: 0; opacity: 0.7; margin-inline-start: auto; }
.dl-card:hover .dl-card__arrow { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.footer {
    background-color: var(--m3-surface-container);
    border-top: 1px solid var(--m3-outline-variant);
    padding: 32px 0;
    text-align: center;
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-logo { font-size: 32px; }
.footer-title { font-size: 1rem; font-weight: 700; }
.footer-subtitle { font-size: 0.82rem; color: var(--m3-on-surface-variant); }

/* ════════════════════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════════════════════ */
.hero-section {
    position: relative;
    overflow: hidden;
    padding: 72px 24px 56px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--m3-primary) 10%, var(--m3-surface)) 0%,
        var(--m3-surface) 55%,
        color-mix(in srgb, var(--m3-secondary, var(--m3-primary)) 6%, var(--m3-surface)) 100%);
    border-bottom: 1px solid var(--m3-outline-variant);
}
.hero-bg-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero-bg-shape--1 {
    width: 520px; height: 520px;
    background: var(--m3-primary);
    opacity: 0.07;
    top: -180px; right: -140px;
    animation: heroFloat 9s ease-in-out infinite;
}
.hero-bg-shape--2 {
    width: 340px; height: 340px;
    background: var(--m3-secondary, var(--m3-primary));
    opacity: 0.05;
    bottom: -150px; left: -90px;
    animation: heroFloat 12s ease-in-out infinite reverse;
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-18px) scale(1.03); }
}
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: heroIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-icon-wrap {
    width: 250px; height: 250px;
    border-radius: 20%;
    background: color-mix(in srgb, var(--m3-primary) 14%, var(--m3-surface));
    border: 2px solid color-mix(in srgb, var(--m3-primary) 22%, transparent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--m3-primary) 16%, transparent);
}
.hero-emoji { font-size: 44px; line-height: 1; }
.hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--m3-on-surface);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.hero-subtitle {
    font-size: 1rem;
    color: var(--m3-on-surface-variant);
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 500px;
}

/* ════════════════════════════════════════════════════════════
   SEARCH STYLES
   ════════════════════════════════════════════════════════════ */
.hero-search-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.hero-search-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--m3-surface-container-high);
    border: 2px solid transparent;
    border-radius: 28px;
    padding: 0.6rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-search-bar:focus-within {
    border-color: var(--m3-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-primary) 15%, transparent);
}
.search-icon { color: var(--m3-on-surface-variant); display: flex; flex-shrink: 0; }
.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: var(--m3-on-surface);
    direction: rtl;
    text-align: right;
}
.search-input::placeholder { color: var(--m3-on-surface-variant); opacity: 0.8; }
.search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--m3-on-surface-variant);
    display: flex;
    border-radius: 50%;
    transition: background 0.15s;
}
.search-clear:hover {
    background: color-mix(in srgb, var(--m3-on-surface) 10%, transparent);
}
.search-results-count {
    font-size: 0.85rem;
    color: var(--m3-on-surface-variant);
    direction: rtl;
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ════════════════════════════════════════════════════════════
   SEARCH — HIDDEN STATE
   ════════════════════════════════════════════════════════════ */
.link-card.search-hidden,
.info-card.search-hidden {
    display: none !important;
}
.section.search-hidden {
    display: none !important;
}
.search-highlight {
    background: color-mix(in srgb, var(--m3-primary) 25%, transparent);
    border-radius: 3px;
    padding: 0 2px;
}

/* ════════════════════════════════════════════════════════════
   SECTION HR & HEADINGS
   ════════════════════════════════════════════════════════════ */
.section-hr { border: none; border-top: 1px solid var(--m3-outline-variant); margin: 0; opacity: 0.4; }

.section-heading {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--m3-surface);
    padding-top: 20px;
    padding-bottom: 14px;
    transition: box-shadow 0.2s, background 0s;
}
.section-heading.is-stuck {
    box-shadow: 0 2px 10px color-mix(in srgb, var(--m3-shadow, #000) 10%, transparent),
                0 1px 0 var(--m3-outline-variant);
}

/* ════════════════════════════════════════════════════════════
   RESULT COUNT BADGE ON HEADINGS
   ════════════════════════════════════════════════════════════ */
.section-result-badge {
    display: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--m3-on-primary-container);
    background: var(--m3-primary-container);
    border-radius: 99px;
    padding: 2px 10px;
    line-height: 1.7;
    margin-inline-start: auto;
    animation: badgePop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes badgePop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
body.is-searching .section-result-badge { display: inline-flex; }

/* ════════════════════════════════════════════════════════════
   COPY FLASH
   ════════════════════════════════════════════════════════════ */
@keyframes copyFlash {
    0%   { background-color: inherit; }
    25%  { background-color: color-mix(in srgb, var(--m3-primary) 12%, transparent); }
    100% { background-color: inherit; }
}
.copy-flash { animation: copyFlash 0.5s ease-out; }

/* ════════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ════════════════════════════════════════════════════════════ */
#back-to-top {
    position: fixed;
    bottom: 24px;
    inset-inline-end: var(--m3-spacing-24);
    width: 44px; height: 44px;
    border-radius: var(--m3-shape-lg); /* Expressive Squircle shape */
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--m3-shadow,#000) 18%, transparent);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.85);
    transition: opacity 0.22s, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
#back-to-top:hover { filter: brightness(1.07); }

/* ════════════════════════════════════════════════════════════
   SEARCH EMPTY STATE
   ════════════════════════════════════════════════════════════ */
#search-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    gap: 10px;
}
#search-empty.visible { display: flex; }
.search-empty__icon { font-size: 3rem; opacity: 0.4; line-height: 1; }
.search-empty__title { font-size: 1.05rem; font-weight: 700; color: var(--m3-on-surface); margin: 0; }
.search-empty__sub   { font-size: 0.88rem; color: var(--m3-on-surface-variant); margin: 0; }
.search-empty__btn {
    margin-top: 8px;
    padding: 9px 22px;
    border-radius: 99px;
    border: none;
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s;
}
.search-empty__btn:hover { filter: brightness(0.94); }

/* ════════════════════════════════════════════════════════════
   TABLE CARD SEARCH HIDDEN
   ════════════════════════════════════════════════════════════ */
.table-card.search-hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Medium Screens
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .page-wrapper {
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-bottom: var(--bottom-nav-height);
        width: 100%;
        max-width: 100%;
        overflow-x: clip; /* clip doesn't create a scroll container; sticky works */
    }
    body { overflow-x: clip; }
    .main-content { padding-bottom: 0; } /* page-wrapper padding-bottom already handles bottom-nav clearance */
    .hero-section { padding: 40px 16px; min-height: 240px; }
    .hero-title { font-size: 1.6rem; }
    .hero-icon-wrap { width: 150px; height: 150px; }
    .hero-emoji { font-size: 36px; }
    .cards-grid { grid-template-columns: 1fr; }
    .cards-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .info-card { padding: 20px 16px; }
    .dl-grid { grid-template-columns: 1fr 1fr; }
    .table-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .table-row__name { min-width: unset; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Small Screens
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .dl-grid { grid-template-columns: 1fr; }
}

/* When the field has a leading icon, push label to the right */
.m3-field--has-leading .m3-field__label {
  inset-inline-start: calc(16px + 24px + 12px); /* icon(24) + gap(12) */
}

/* ── Floated state: focus OR populated ── */
.m3-field__container:focus-within .m3-field__label,
.m3-field--populated .m3-field__label,
.m3-field__input:not(:placeholder-shown) ~ .m3-field__label,
.m3-field__container:has(.m3-field__input:not(:placeholder-shown)) .m3-field__label,
.m3-field__container:has(select.m3-field__input) .m3-field__label {
  /* Float up to sit on the top border */
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;          /* label-small: 12sp */
  font-weight: 500;
  /* The notch: give the label a background that "cuts" the border */
  background: var(--m3-surface);
  padding: 0 4px;
  /* When inside a tool-card, the background behind the label is the card surface */
}

/* Adjust notch background for dark containers */
[data-theme="dark"] .m3-field__container:focus-within .m3-field__label,
[data-theme="dark"] .m3-field--populated .m3-field__label,
[data-theme="dark"] .m3-field__container:has(.m3-field__input:not(:placeholder-shown)) .m3-field__label,
[data-theme="dark"] .m3-field__container:has(select.m3-field__input) .m3-field__label {
  background: var(--m3-surface);
}

/* Floated label inside tool-card gets the card's background */
.tool-card .m3-field__container:focus-within .m3-field__label,
.tool-card .m3-field--populated .m3-field__label,
.tool-card .m3-field__container:has(.m3-field__input:not(:placeholder-shown)) .m3-field__label,
.tool-card .m3-field__container:has(select.m3-field__input) .m3-field__label {
  background: var(--m3-surface-container-low);
}

/* When leading icon present and label is floated, reset the indent */
.m3-field--has-leading .m3-field__container:focus-within .m3-field__label,
.m3-field--has-leading .m3-field--populated .m3-field__label,
.m3-field--has-leading .m3-field__container:has(.m3-field__input:not(:placeholder-shown)) .m3-field__label {
  inset-inline-start: 16px; /* floated label goes back to container edge */
}

/* ── Focus state: thicker primary border + primary label ── */
.m3-field__container:focus-within {
  border-width: 2px;
  border-color: var(--m3-primary);
}

.m3-field__container:focus-within .m3-field__label {
  color: var(--m3-primary);
}

/* ── Error state ── */
.m3-field--error .m3-field__container {
  border-color: var(--m3-error);
}
.m3-field--error .m3-field__container:focus-within {
  border-color: var(--m3-error);
  border-width: 2px;
}
.m3-field--error .m3-field__label,
.m3-field--error .m3-field__container:focus-within .m3-field__label {
  color: var(--m3-error);
}
.m3-field--error .m3-field__support {
  color: var(--m3-error);
}

/* ── Disabled state ── */
.m3-field--disabled .m3-field__container {
  border-color: color-mix(in srgb, var(--m3-on-surface) 12%, transparent);
  cursor: not-allowed;
  opacity: 0.38;
}
.m3-field--disabled .m3-field__input {
  pointer-events: none;
}

/* ── The actual input / textarea / select ── */
.m3-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--m3-on-surface);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 1rem;            /* body-large: 16sp */
  font-weight: 400;
  line-height: 1.5;
  padding: 16px 0 4px;        /* top padding so text clears the floated label */
  caret-color: var(--m3-primary);
  /* hide the default placeholder (we use the floating label) */
}

/* Placeholder is kept transparent so label acts as placeholder */
.m3-field__input::placeholder {
  color: transparent;
}

/* After focus, if user wants a real placeholder shown, reveal it */
.m3-field__container:focus-within .m3-field__input::placeholder {
  color: var(--m3-on-surface-variant);
  opacity: 0.7;
}

/* Textarea variant */
textarea.m3-field__input {
  resize: vertical;
  min-height: 96px;
  padding-top: 24px;          /* more top pad for multiline */
  align-self: stretch;
}

/* Select variant */
select.m3-field__input {
  cursor: pointer;
  /* Remove default appearance but keep it functional */
  -webkit-appearance: none;
  appearance: none;
}

/* Custom select arrow (RTL-aware) */
.m3-field__container:has(select) {
  /* add padding-inline-end to make room for custom arrow */
  padding-inline-end: 40px;
}
.m3-field__container:has(select)::after {
  content: '▾';
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m3-on-surface-variant);
  font-size: 1rem;
  pointer-events: none;
  transition: transform var(--m3-duration-fast) var(--m3-ease-standard);
}
.m3-field__container:has(select:focus)::after {
  color: var(--m3-primary);
  transform: translateY(-50%) rotate(180deg);
}

/* ── Icons ── */
.m3-field__leading-icon,
.m3-field__trailing-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--m3-on-surface-variant);
  font-size: 1.1rem;
  line-height: 1;
  transition: color var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-field__container:focus-within .m3-field__leading-icon {
  color: var(--m3-primary);
}

button.m3-field__trailing-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  margin: 0;
  width: 32px;
  height: 32px;
  transition:
    background-color var(--m3-duration-fast) var(--m3-ease-standard),
    color             var(--m3-duration-fast) var(--m3-ease-standard);
}

button.m3-field__trailing-icon:hover {
  background-color: color-mix(in srgb, var(--m3-on-surface) 8%, transparent);
  color: var(--m3-on-surface);
}

/* ── Supporting text ── */
.m3-field__support {
  font-size: 0.75rem;         /* body-small: 12sp */
  font-weight: 400;
  line-height: 1.33;
  color: var(--m3-on-surface-variant);
  padding: 0 16px;
}

/* ── Read-only variant ── */
.m3-field__input[readonly],
.m3-field__input[readonly]:focus {
  color: var(--m3-on-surface-variant);
  caret-color: transparent;
  cursor: default;
}

.m3-field--readonly .m3-field__container {
  border-color: var(--m3-outline-variant);
  background: color-mix(in srgb, var(--m3-on-surface) 4%, transparent);
}

.m3-field--readonly .m3-field__container:focus-within {
  border-color: var(--m3-outline-variant);
  border-width: 1px;
}

/* ── Large variant (calculator-style display) ── */
.m3-field--large .m3-field__input {
  font-size: 1.9rem;
  font-weight: 800;
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
  padding-top: 20px;
}

/* ── Monospace variant ── */
.m3-field--mono .m3-field__input {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  direction: ltr;
  text-align: left;
}

/* ── Center variant (time inputs etc.) ── */
.m3-field--center .m3-field__input {
  text-align: center;
}

/* ── Legacy compatibility: field-label + text-input siblings
   (for elements NOT yet wrapped in .m3-field, keep old look
   but still improved) ── */
.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  letter-spacing: 0.02em;
}

/* Number input: hide spin buttons */
.m3-field__input[type="number"]::-webkit-inner-spin-button,
.m3-field__input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.m3-field__input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Focus ring for keyboard nav */
.m3-field__container:focus-within {
  box-shadow: none; /* border handles focus indication per M3 */
}

/* Hover state */
.m3-field__container:not(:focus-within):hover {
  border-color: var(--m3-on-surface);
}

/* Remove focus-ring on the native input since the container handles it */
.m3-field__input:focus {
  outline: none;
  box-shadow: none;
}