@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

:root {
  --app-bg: #000000;
  --card-bg: #1c1c1e;
  --primary: #0a84ff;
  --success: #30d158;
  --danger: #ff453a;
  --warning: #ff9f0a;
  --text: #ffffff;
  --text-dim: #8e8e93;
  --nav-bg: rgba(28, 28, 30, 0.95);
  --notif-bg: rgba(44, 44, 46, 0.98);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body.app-theme {
  font-family: 'Cairo', sans-serif;
  background-color: var(--app-bg);
  color: var(--text);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
}

/* Splash Screen */
.splash-screen {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--app-bg); z-index: 9999;
  display: flex; justify-content: center; align-items: center;
  transition: opacity 0.5s ease;
}

.app-logo { text-align: center; }
.app-logo i { font-size: 5rem; color: var(--primary); margin-bottom: 1rem; }
.loader-bar { width: 150px; height: 4px; background: #333; border-radius: 2px; margin: 20px auto; position: relative; overflow: hidden; }
.loader-bar::after { content: ''; position: absolute; left: -100%; width: 100%; height: 100%; background: var(--primary); animation: loading 2s infinite; }
@keyframes loading { 0% { left: -100%; } 100% { left: 100%; } }

/* App Notification (Facebook Style) */
.app-notification {
  position: fixed;
  top: -120px; left: 10px; right: 10px;
  background: var(--notif-bg);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 15px;
  z-index: 9000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  border: 1px solid #333;
}

.app-notification.show { transform: translateY(130px); }

.notif-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.notif-app-info { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-dim); }
.notif-app-info i { color: var(--primary); }
.notif-time { font-size: 0.7rem; color: var(--text-dim); }

.notif-body strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.notif-body p { font-size: 0.85rem; color: var(--text-dim); }
.notif-handle { width: 40px; height: 4px; background: #444; border-radius: 2px; margin: 10px auto 0; }

/* Full Results Overlay */
.full-results-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 9500;
  display: none;
  justify-content: center;
  align-items: flex-end;
}

.results-modal {
  background: var(--card-bg);
  width: 100%;
  max-height: 90%;
  border-radius: 30px 30px 0 0;
  padding: 25px;
  overflow-y: auto;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 15px; }
.results-header h3 { font-size: 1.2rem; color: var(--success); }
.results-body { font-size: 0.9rem; line-height: 1.6; }
.results-body pre { background: #000; padding: 15px; border-radius: 12px; color: var(--success); overflow-x: auto; margin-top: 10px; }
.results-footer { margin-top: 25px; }

/* General UI */
.app-container { display: flex; flex-direction: column; height: 100%; padding-bottom: 80px; }
.app-header { padding: 20px; background: var(--app-bg); border-bottom: 1px solid #2c2c2e; }
.app-branding { display: flex; align-items: center; gap: 12px; }
.app-branding i { color: var(--primary); font-size: 1.5rem; }

.warning-box { background: rgba(255, 159, 10, 0.1); border: 1px solid var(--warning); padding: 15px; border-radius: 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--warning); font-weight: 700; font-size: 0.9rem; }
.device-info-card.advanced { background: var(--card-bg); border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.info-list { display: flex; flex-direction: column; gap: 10px; }
.info-row { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #2c2c2e; font-size: 0.9rem; }
.info-row span { color: var(--text-dim); }
.info-row b { color: var(--primary); }

.tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.tip-item { background: #1c1c1e; padding: 15px; border-radius: 12px; text-align: center; }
.tip-item i { font-size: 1.5rem; color: var(--success); margin-bottom: 10px; display: block; }
.tip-item p { font-size: 0.75rem; line-height: 1.4; }

.app-content { flex: 1; overflow-y: auto; padding: 20px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.scan-card { background: var(--card-bg); padding: 20px; border-radius: 16px; }
.app-input-group { margin-bottom: 15px; }
.app-input-group label { display: block; margin-bottom: 8px; font-size: 0.85rem; color: var(--text-dim); }
input, select { width: 100%; background: #2c2c2e; border: none; padding: 15px; border-radius: 12px; color: white; font-family: inherit; }
.app-primary-btn { width: 100%; background: var(--primary); color: white; border: none; padding: 18px; border-radius: 12px; font-weight: 800; margin-top: 10px; }

.bottom-nav { position: fixed; bottom: 0; width: 100%; height: 80px; background: var(--nav-bg); backdrop-filter: blur(20px); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #333; padding-bottom: 20px; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text-dim); }
.nav-item.active { color: var(--primary); }
.nav-item i { font-size: 1.4rem; }
.nav-item span { font-size: 0.75rem; font-weight: 700; }

.app-toast { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); background: var(--primary); color: white; padding: 10px 25px; border-radius: 25px; font-size: 0.9rem; font-weight: 700; z-index: 10000; }