/* ===== BASE RESET & VARIABLES ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f0f4ff;
  --bg2: #ffffff;
  --bg3: #e8edf8;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border: #e2e8f0;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
  --accent: #4f46e5;
  --accent2: #7c3aed;
  --mt-color: #00a651;
  --or-color: #ff6600;
  --in-color: #e91e8c;
  --warn-color: #f59e0b;
  --radius: 16px;
  --radius-sm: 10px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark-mode {
  --bg: #0a0e1a; --bg2: #111827; --bg3: #1e2535; --text: #f1f5f9;
  --text2: #94a3b8; --text3: #64748b; --border: #1e2535;
  --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
}
body {
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; transition: var(--transition); overflow-x: hidden;
}
body::before {
  content:''; position:fixed; top:-50%; right:-50%; width:100%; height:100%;
  background: radial-gradient(ellipse at center, rgba(79,70,229,0.08) 0%, transparent 70%);
  animation: bgPulse 8s ease-in-out infinite alternate; pointer-events:none; z-index:0;
}
body::after {
  content:''; position:fixed; bottom:-30%; left:-30%; width:80%; height:80%;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.06) 0%, transparent 70%);
  animation: bgPulse 10s ease-in-out infinite alternate-reverse; pointer-events:none; z-index:0;
}
@keyframes bgPulse { from{transform:scale(1)} to{transform:scale(1.15)} }

/* ===== HEADER ===== */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border);
  transition:var(--transition);
}
body.dark-mode .header { background:rgba(10,14,26,0.85); }
.header-inner { max-width:900px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:8px; font-size:1.4rem; font-weight:900; letter-spacing:-0.5px; color:var(--text); }
.logo-icon { font-size:1.6rem; }
.accent { color:var(--accent); }
.theme-toggle {
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--border); background:var(--bg2);
  cursor:pointer; font-size:1.2rem; transition:var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover { transform:rotate(20deg) scale(1.1); border-color:var(--accent); }

/* ===== MAIN ===== */
.main { max-width:900px; margin:0 auto; padding:40px 20px 80px; position:relative; z-index:1; }

/* ===== HERO ===== */
.hero { text-align:center; padding:48px 0 40px; }
.hero-badge {
  display:inline-block; background:var(--bg2); border:1px solid var(--border);
  border-radius:999px; padding:6px 18px; font-size:0.85rem; font-weight:600;
  color:var(--text2); margin-bottom:20px; animation:fadeInDown 0.6s ease;
}
.hero-title { font-size:clamp(2rem,5vw,3.2rem); font-weight:900; line-height:1.25; margin-bottom:16px; animation:fadeInDown 0.7s ease; }
.gradient-text {
  background:linear-gradient(135deg, var(--accent), var(--accent2), #ec4899);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-subtitle { font-size:1rem; color:var(--text2); max-width:560px; margin:0 auto; line-height:1.7; animation:fadeInDown 0.8s ease; }

/* ===== SEARCH ===== */
.search-section { margin-bottom:40px; animation:fadeInUp 0.6s ease 0.2s both; }
.search-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-lg); }
.search-label { display:block; font-weight:700; font-size:1rem; margin-bottom:14px; color:var(--text); }
.input-wrapper { display:flex; gap:12px; align-items:stretch; }
.prefix-input {
  flex:1; height:60px; font-size:1.8rem; font-weight:700;
  font-family:'Cairo',monospace; text-align:center; letter-spacing:8px;
  border:2px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text); outline:none; transition:var(--transition); padding:0 20px;
}
.prefix-input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(79,70,229,0.15); background:var(--bg2); }
.prefix-input::placeholder { font-size:1.1rem; letter-spacing:2px; color:var(--text3); font-weight:400; }
.search-btn {
  height:60px; padding:0 28px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:white; border:none; border-radius:var(--radius-sm);
  font-family:'Cairo',sans-serif; font-size:1rem; font-weight:700;
  cursor:pointer; display:flex; align-items:center; gap:8px; transition:var(--transition); white-space:nowrap;
}
.search-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(79,70,229,0.4); }
.search-btn:active { transform:translateY(0); }
.input-hint { margin-top:10px; font-size:0.8rem; color:var(--text3); text-align:center; font-family:monospace; }

/* ===== RESULT ===== */
.result-container { margin-top:24px; animation:resultSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes resultSlideIn { from{opacity:0;transform:translateY(20px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.result-card {
  display:flex; align-items:center; gap:20px;
  padding:24px; border-radius:var(--radius-sm);
  border:2px solid transparent; position:relative; overflow:hidden; transition:var(--transition);
}
.result-card::before { content:''; position:absolute; inset:0; opacity:0.07; border-radius:inherit; }
.result-card.mt { border-color:var(--mt-color); background:rgba(0,166,81,0.06); }
.result-card.mt::before { background:var(--mt-color); }
.result-card.or { border-color:var(--or-color); background:rgba(255,102,0,0.06); }
.result-card.or::before { background:var(--or-color); }
.result-card.in { border-color:var(--in-color); background:rgba(233,30,140,0.06); }
.result-card.in::before { background:var(--in-color); }
.operator-logo { width:68px; height:68px; border-radius:14px; font-size:1.3rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:white; letter-spacing:-1px; }
.operator-logo.mt-bg { background:linear-gradient(135deg,#00a651,#007a3d); }
.operator-logo.or-bg { background:linear-gradient(135deg,#ff6600,#cc4400); }
.operator-logo.in-bg { background:linear-gradient(135deg,#e91e8c,#a0135f); }
.result-info { flex:1; }
.result-label { font-size:0.78rem; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.result-operator { font-size:1.5rem; font-weight:900; }
.result-prefix { font-size:0.9rem; color:var(--text2); margin-top:4px; }
.copy-btn { padding:10px 18px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text); font-family:'Cairo',sans-serif; font-size:0.9rem; font-weight:600; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.copy-btn:hover { border-color:var(--accent); color:var(--accent); transform:scale(1.05); }
.copy-btn.copied { background:#10b981; color:white; border-color:#10b981; }

/* ===== CONFIDENCE WARNINGS ===== */
.probable-warning,
.guess-warning {
  display:flex; align-items:flex-start; gap:12px;
  margin-top:12px; padding:14px 18px; border-radius:var(--radius-sm);
  font-size:0.87rem; line-height:1.6; font-weight:500;
  animation:fadeInUp 0.3s ease;
}
.probable-warning {
  background:rgba(245,158,11,0.10);
  border:1px solid rgba(245,158,11,0.40);
  color:#92400e;
}
body.dark-mode .probable-warning { color:#fbbf24; background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.25); }
.guess-warning {
  background:rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.35);
  color:#991b1b;
}
body.dark-mode .guess-warning { color:#f87171; background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.25); }
.warn-icon { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.probable-warning strong,
.guess-warning strong { font-weight:800; }

/* ===== ERROR ===== */
.error-container { margin-top:20px; animation:shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.error-card { display:flex; align-items:center; gap:12px; padding:16px 20px; background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.3); border-radius:var(--radius-sm); color:#dc2626; font-weight:600; font-size:0.95rem; }
body.dark-mode .error-card { color:#f87171; }
.error-card.error-invalid { background:rgba(120,0,0,0.10); border-color:rgba(180,0,0,0.4); align-items:flex-start; }
.error-sub { font-size:0.82rem; font-weight:500; color:#7f1d1d; margin-top:4px; }
body.dark-mode .error-sub { color:#fca5a5; }

/* ===== SOURCES BAR ===== */
.sources-bar { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:36px; animation:fadeInUp 0.5s ease; }
.src-badge { display:inline-flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--border); border-radius:999px; padding:5px 14px; font-size:0.8rem; font-weight:600; color:var(--text2); }
.src-sep { color:var(--text3); font-size:1rem; }

/* ===== INVALID dot in legend ===== */
.invalid-dot { background:#7f1d1d; }

/* ===== STATS ===== */
.stats-section { margin-bottom:40px; animation:fadeInUp 0.6s ease 0.3s both; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 20px; display:flex; align-items:center; gap:14px; transition:var(--transition); }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.mt-stat { border-top:3px solid var(--mt-color); }
.or-stat { border-top:3px solid var(--or-color); }
.in-stat { border-top:3px solid var(--in-color); }
.stat-logo { width:40px; height:40px; border-radius:8px; font-size:0.75rem; font-weight:900; display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0; }
.mt-logo-sm { background:linear-gradient(135deg,#00a651,#007a3d); }
.or-logo-sm { background:linear-gradient(135deg,#ff6600,#cc4400); }
.in-logo-sm { background:linear-gradient(135deg,#e91e8c,#a0135f); }
.stat-name { font-size:0.8rem; font-weight:700; color:var(--text2); }
.stat-count { font-size:1.1rem; font-weight:900; color:var(--text); margin-top:2px; }

/* ===== TABLE SECTION ===== */
.table-section { margin-bottom:50px; animation:fadeInUp 0.6s ease 0.4s both; }
.section-title { font-size:1.4rem; font-weight:800; margin-bottom:12px; text-align:center; }
.table-subtitle { display:flex; align-items:center; justify-content:center; gap:6px; font-size:0.85rem; color:var(--text3); margin-bottom:20px; flex-wrap:wrap; }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.confirmed-dot { background:var(--accent); }
.probable-dot { background:var(--warn-color); }
.table-wrapper { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:auto; box-shadow:var(--shadow); }
.prefix-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.prefix-table thead { background:var(--bg3); }
.prefix-table th { padding:12px 14px; font-weight:700; color:var(--text2); text-align:right; font-size:0.8rem; border-bottom:2px solid var(--border); }
.prefix-table td { padding:8px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.prefix-table tr:last-child td { border-bottom:none; }
.prefix-table tr:hover td { background:var(--bg3); }
.tbl-prefix { font-family:monospace; font-weight:700; font-size:0.95rem; color:var(--accent); cursor:pointer; letter-spacing:1px; }
.tbl-prefix:hover { text-decoration:underline; }
.tbl-probable { color:var(--warn-color) !important; }
.tbl-prob-dot { font-size:0.7rem; vertical-align:middle; }
.tbl-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:0.75rem; font-weight:700; color:white; }
.badge-mt { background:var(--mt-color); }
.badge-or { background:var(--or-color); }
.badge-in { background:var(--in-color); }

/* ===== HISTORY ===== */
.history-section { margin-bottom:30px; animation:fadeInUp 0.6s ease; }
.history-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.clear-history-btn { padding:8px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; color:var(--text2); font-family:'Cairo',sans-serif; font-size:0.85rem; font-weight:600; cursor:pointer; transition:var(--transition); }
.clear-history-btn:hover { border-color:#ef4444; color:#ef4444; }
.history-list { display:flex; flex-direction:column; gap:10px; }
.history-item { display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); animation:fadeInUp 0.3s ease; }
.history-item:hover { border-color:var(--accent); transform:translateX(-4px); }
.history-prefix { font-family:monospace; font-size:1.2rem; font-weight:800; letter-spacing:3px; color:var(--accent); }
.history-operator { flex:1; font-weight:600; color:var(--text2); font-size:0.95rem; }
.history-time { font-size:0.78rem; color:var(--text3); }
.history-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.history-dot.mt { background:var(--mt-color); }
.history-dot.or { background:var(--or-color); }
.history-dot.in { background:var(--in-color); }
.conf-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:0.68rem; font-weight:700; margin-right:4px; }
.conf-probable { background:rgba(245,158,11,0.15); color:#b45309; border:1px solid rgba(245,158,11,0.3); }
body.dark-mode .conf-probable { color:#fbbf24; }
.conf-guess { background:rgba(239,68,68,0.12); color:#dc2626; border:1px solid rgba(239,68,68,0.3); }
body.dark-mode .conf-guess { color:#f87171; }

/* ===== MNP NOTE ===== */
.mnp-note { display:flex; align-items:flex-start; gap:10px; padding:14px 18px; margin-bottom:40px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:0.83rem; color:var(--text3); line-height:1.6; }

/* ===== FOOTER ===== */
.footer { text-align:center; padding:32px 20px; color:var(--text3); font-size:0.9rem; position:relative; z-index:1; border-top:1px solid var(--border); }
.footer p:first-child { font-weight:700; color:var(--text2); margin-bottom:6px; }
.footer-sub { font-size:0.8rem; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ===== RESPONSIVE ===== */
@media (max-width:640px) {
  .search-card { padding:24px 16px; }
  .input-wrapper { flex-direction:column; }
  .search-btn { height:52px; justify-content:center; }
  .prefix-input { height:64px; font-size:2rem; }
  .result-card { flex-wrap:wrap; }
  .operator-logo { width:56px; height:56px; }
  .result-operator { font-size:1.2rem; }
  .copy-btn { width:100%; justify-content:center; }
  .stats-grid { grid-template-columns:1fr; }
  .prefix-table { font-size:0.78rem; }
  .prefix-table th, .prefix-table td { padding:6px 8px; }
  .table-subtitle { font-size:0.78rem; }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }