/* ==================== CSS VARIABLES ==================== */
    :root {
      --primary: #719D6E;
      --primary-dark: #5a7d58;
      --primary-light: #e8f3e7;
      --primary-soft: rgba(113, 157, 110, 0.1);
      --white: #ffffff;
      --white-soft: rgba(255, 255, 255, 0.9);
      --black: #1a1a1a;
      --gray-light: #f5f7fa;
      --gray: #e2e8f0;
      --gray-dark: #4a5568;
      --shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Light Mode (Default) */
    body {
      --bg-gradient-start: #ffffff;
      --bg-gradient-end: #f5f7fa;
      --text-primary: #1a1a1a;
      --text-secondary: #4a5568;
      --card-bg: #ffffff;
      --border-color: #e2e8f0;
    }

    /* Dark Mode */
    body.dark {
      --bg-gradient-start: #1a1a2e;
      --bg-gradient-end: #0f0f1a;
      --text-primary: #e0e0e0;
      --text-secondary: #b0b0c0;
      --card-bg: #2a2a35;
      --border-color: #3a3a45;
      --primary-light: #2a3a2a;
      --primary-soft: rgba(113, 157, 110, 0.2);
      --gray-light: #1e1e2a;
      --gray: #3a3a45;
      --gray-dark: #8a8aa0;
      --shadow: 0 2px 8px rgba(0,0,0,0.2);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    }

    /* ==================== RESET & BASE ==================== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
      min-height: 100vh;
      padding: 16px;
      transition: var(--transition);
    }

    /* ==================== HEADER ==================== */
    .qibla-header {
      margin-bottom: 20px;
    }

    .header-content {
      display: flex;
      align-items: center;
      gap: clamp(12px, 4vw, 15px);
      background: var(--card-bg);
      box-shadow: var(--shadow);
      padding: clamp(12px, 4vw, 15px) clamp(15px, 5vw, 20px);
      border-radius: 25px;
      transition: var(--transition);
      border: 1px solid var(--border-color);
    }

    .header-icon {
      width: clamp(40px, 10vw, 50px);
      height: clamp(40px, 10vw, 50px);
      background: var(--primary);
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(20px, 5vw, 24px);
      color: white;
      box-shadow: var(--shadow);
      flex-shrink: 0;
    }

    .header-title h1 {
      font-size: clamp(18px, 5vw, 22px);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .header-title h1 span {
      color: var(--primary);
    }

    .header-title p {
      font-size: clamp(10px, 3vw, 12px);
      color: var(--text-secondary);
    }

    /* ==================== COMPASS CARD ==================== */
    .compass-card {
      background: var(--card-bg);
      box-shadow: var(--shadow-md);
      border-radius: clamp(25px, 6vw, 30px);
      padding: clamp(15px, 4vw, 20px);
      margin-bottom: 20px;
      transition: var(--transition);
      border: 1px solid var(--border-color);
    }

    .compass-container {
      position: relative;
      width: min(280px, 70vw);
      height: min(280px, 70vw);
      margin: 0 auto;
    }

    .compass-outer-ring {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: var(--gray-light);
      box-shadow: 0 0 0 2px var(--border-color);
    }

    .compass-inner-ring {
      position: absolute;
      width: 90%;
      height: 90%;
      top: 5%;
      left: 5%;
      border-radius: 50%;
      background: var(--primary-soft);
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
    }

    /* Direction Labels */
    .compass-rose {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .direction-label {
      position: absolute;
      font-size: clamp(9px, 3vw, 12px);
      font-weight: 600;
      color: var(--text-primary);
      background: var(--card-bg);
      padding: 2px 4px;
      border-radius: 8px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
    }

    .direction-label.N { top: 5px; left: 50%; transform: translateX(-50%); }
    .direction-label.NE { top: 15%; right: 15%; }
    .direction-label.E { top: 50%; right: 5px; transform: translateY(-50%); }
    .direction-label.SE { bottom: 15%; right: 15%; }
    .direction-label.S { bottom: 5px; left: 50%; transform: translateX(-50%); }
    .direction-label.SW { bottom: 15%; left: 15%; }
    .direction-label.W { top: 50%; left: 5px; transform: translateY(-50%); }
    .direction-label.NW { top: 15%; left: 15%; }

    /* Needle (Jarum Kompas) */
    .needle-container {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: transform 0.2s ease-out;
    }

    .needle {
      position: absolute;
      width: 4px;
      height: 120px;
      background: linear-gradient(180deg, #ff4444 0%, #ff4444 50%, var(--text-primary) 50%, var(--text-primary) 100%);
      left: 50%;
      bottom: 50%;
      transform: translateX(-50%);
      transform-origin: 50% 100%;
      border-radius: 4px;
      z-index: 2;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .needle::before {
      content: '';
      position: absolute;
      bottom: -8px;
      left: -6px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 12px solid #ff4444;
    }

    .needle-center {
      position: absolute;
      width: 16px;
      height: 16px;
      background: var(--text-primary);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      box-shadow: 0 0 0 3px var(--border-color);
    }

    /* Qibla Pointer (Jarum Emas) */
    .qibla-pointer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      cursor: pointer;
    }

    .pointer-icon {
      position: absolute;
      top: -55px;
      left: -12px;
      width: 24px;
      height: 24px;
      background: #ffd700;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--primary);
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      animation: pulse 1.5s ease infinite;
    }

    .pointer-line {
      position: absolute;
      width: 2px;
      height: 100px;
      background: #ffd700;
      top: -30px;
      left: -1px;
      box-shadow: 0 0 4px #ffd700;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.2); opacity: 0.8; }
    }

    .compass-center {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .center-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #ffd700;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
    }

    /* Status Badge */
    .qibla-status {
      text-align: center;
      margin-top: 20px;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--primary-light);
      padding: 8px 16px;
      border-radius: 30px;
      font-size: 13px;
      color: var(--primary);
      font-weight: 500;
    }

    /* ==================== INFO PANEL ==================== */
    .info-panel {
      background: var(--card-bg);
      box-shadow: var(--shadow);
      border-radius: 20px;
      padding: clamp(12px, 4vw, 15px);
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: clamp(10px, 3vw, 15px);
      transition: var(--transition);
      border: 1px solid var(--border-color);
    }

    .info-item {
      display: flex;
      align-items: center;
      gap: clamp(8px, 3vw, 12px);
    }

    .info-item i {
      width: clamp(30px, 8vw, 35px);
      height: clamp(30px, 8vw, 35px);
      background: var(--primary-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(14px, 4vw, 16px);
      color: var(--primary);
      flex-shrink: 0;
    }

    .info-text {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    .info-label {
      font-size: clamp(9px, 3vw, 10px);
      opacity: 0.7;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .info-value {
      font-size: clamp(13px, 4vw, 15px);
      font-weight: 700;
      color: var(--text-primary);
      word-break: break-word;
    }

    /* ==================== STATUS SECTION ==================== */
    .status-section {
      background: var(--card-bg);
      box-shadow: var(--shadow);
      border-radius: 20px;
      padding: clamp(12px, 4vw, 15px);
      margin-bottom: 15px;
      transition: var(--transition);
      border: 1px solid var(--border-color);
    }

    .status-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 13px;
      color: var(--text-secondary);
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-color);
    }

    .status-header i {
      color: var(--primary);
    }

    .status-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .status-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: clamp(11px, 3.5vw, 13px);
      color: var(--text-secondary);
      flex-wrap: wrap;
    }

    .status-row span:first-of-type {
      flex: 1;
    }

    .status-led {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gray);
      flex-shrink: 0;
    }

    .status-led.active {
      background: #4caf50;
      box-shadow: 0 0 5px #4caf50;
      animation: blink 1s ease infinite;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .status-value {
      font-weight: 600;
      min-width: 30px;
      text-align: right;
    }

    /* ==================== CALIBRATION HINT ==================== */
    .calibration-hint {
      background: var(--primary-light);
      border-radius: 20px;
      padding: clamp(10px, 3.5vw, 12px) clamp(12px, 4vw, 15px);
      margin-bottom: 15px;
      font-size: clamp(10px, 3vw, 12px);
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-secondary);
    }

    .calibration-hint i {
      color: var(--primary);
      font-size: clamp(14px, 4vw, 16px);
    }

    /* ==================== REFRESH BUTTON ==================== */
    .refresh-btn {
      width: 100%;
      background: var(--primary);
      border: none;
      padding: clamp(12px, 4vw, 14px);
      border-radius: 30px;
      color: white;
      font-size: clamp(14px, 4vw, 16px);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 15px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--shadow);
    }

    .refresh-btn:active {
      transform: scale(0.97);
      background: var(--primary-dark);
    }

    /* ==================== FOOTER ==================== */
    .footer-note {
      text-align: center;
      font-size: clamp(10px, 3vw, 11px);
      opacity: 0.7;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: var(--text-secondary);
      flex-wrap: wrap;
      padding: 0 5px;
    }

    /* ==================== LOADING SCREEN ==================== */
    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      transition: opacity 0.5s;
    }

    body.dark .loading-screen {
      background: #1a1a2e;
    }

    .loading-screen.hide {
      opacity: 0;
      pointer-events: none;
    }

    .loading-content {
      text-align: center;
      color: var(--text-primary);
      padding: 20px;
    }

    .loading-icon {
      font-size: clamp(40px, 12vw, 50px);
      margin-bottom: 20px;
      animation: pulse 1.5s ease infinite;
      color: var(--primary);
    }

    .loading-content h3 {
      font-size: clamp(18px, 5vw, 20px);
      margin-bottom: 8px;
    }

    .loading-content p {
      font-size: clamp(12px, 3.5vw, 13px);
      color: var(--text-secondary);
      margin-bottom: 20px;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      margin: 0 auto;
      border: 3px solid var(--primary-light);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ==================== PERMISSION MODAL ==================== */
    .permission-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    .permission-modal.hide {
      display: none;
    }

    .modal-content {
      background: white;
      border-radius: clamp(25px, 6vw, 30px);
      padding: clamp(25px, 6vw, 30px) clamp(20px, 5vw, 25px);
      text-align: center;
      width: 85%;
      max-width: 320px;
      box-shadow: var(--shadow-md);
      margin: 20px;
    }

    body.dark .modal-content {
      background: #2a2a35;
    }

    .modal-icon {
      font-size: clamp(40px, 12vw, 50px);
      color: var(--primary);
      margin-bottom: 15px;
    }

    .modal-content h3 {
      font-size: clamp(18px, 5vw, 20px);
      margin-bottom: 10px;
      color: var(--text-primary);
    }

    .modal-content p {
      font-size: clamp(12px, 3.5vw, 14px);
      color: var(--gray-dark);
      margin-bottom: 25px;
      line-height: 1.5;
    }

    .modal-btn {
      width: 100%;
      padding: clamp(10px, 3.5vw, 12px);
      border: none;
      border-radius: 30px;
      font-size: clamp(14px, 4vw, 15px);
      font-weight: 600;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .modal-btn:active {
      transform: scale(0.97);
    }

    .modal-btn.primary {
      background: var(--primary);
      color: white;
    }

    .modal-btn.secondary {
      background: #f0f0f0;
      color: #666;
    }

    body.dark .modal-btn.secondary {
      background: #3a3a45;
      color: #b0b0c0;
    }

    /* ==================== TOAST NOTIFICATIONS ==================== */
    .custom-toast {
      position: fixed;
      bottom: 20px;
      left: 20px;
      right: 20px;
      padding: clamp(12px, 4vw, 14px) clamp(16px, 5vw, 20px);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      z-index: 3000;
      font-size: clamp(13px, 4vw, 14px);
      font-weight: 500;
      animation: slideUp 0.3s ease;
      box-shadow: var(--shadow-md);
    }

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

    .error-toast {
      background: #f44336;
      color: white;
    }

    .success-toast {
      background: #4caf50;
      color: white;
    }

    /* ==================== RESPONSIVE ==================== */
    @media (max-width: 480px) {
      body {
        padding: 12px;
      }
      
      .info-panel {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 380px) {
      body {
        padding: 10px;
      }
      
      .info-panel {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      
      .compass-container {
        width: min(250px, 75vw);
        height: min(250px, 75vw);
      }
      
      .pointer-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
        top: -45px;
        left: -10px;
      }
      
      .pointer-line {
        height: 80px;
      }
    }

    @media (min-width: 768px) {
      body {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .qibla-header,
      .compass-card,
      .info-panel,
      .status-section,
      .calibration-hint,
      .refresh-btn,
      .footer-note {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
      }
      
      .compass-container {
        width: 300px;
        height: 300px;
      }
      
      .info-panel {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
    }

    /* Safe Area untuk iOS */
    @supports (padding: max(0px)) {
      body {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
      }
    }