/* ========================================
   facetooface - Tool-Specific UI Themes
   Each tool category gets unique visual style
   ======================================== */

/* ==========================================
   🌐 Network Tools - Tech/Data Theme
   ========================================== */
.tool-panel-body.tool-theme-network {
  background: radial-gradient(ellipse at 20% 50%, rgba(108,99,255,0.08), transparent 60%);
}
.tool-theme-network .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 16px 0;
  animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(108,99,255,0.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(108,99,255,0.6)); }
}
.tool-theme-network .form-control {
  border-color: rgba(108,99,255,0.3);
  background: rgba(108,99,255,0.05);
}
.tool-theme-network .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(108,99,255,0.15), inset 0 0 20px rgba(108,99,255,0.05);
}
.tool-theme-network .btn-primary {
  background: linear-gradient(135deg, #6C63FF, #4A42DB);
  box-shadow: 0 4px 20px rgba(108,99,255,0.3);
}
.tool-theme-network .result-area {
  border-color: rgba(108,99,255,0.3);
  background: rgba(108,99,255,0.05);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ==========================================
   🌍 DNS Tools - Server/Infrastructure Theme
   ========================================== */
.tool-panel-body.tool-theme-dns {
  background: radial-gradient(ellipse at 80% 30%, rgba(0,212,170,0.08), transparent 60%);
}
.tool-theme-dns .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 16px 0;
  animation: dnsPulse 4s ease-in-out infinite;
}
@keyframes dnsPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}
.tool-theme-dns .form-control {
  border-color: rgba(0,212,170,0.3);
  background: rgba(0,212,170,0.05);
  border-radius: 8px 8px 8px 0;
}
.tool-theme-dns .form-control:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 4px rgba(0,212,170,0.15);
}
.tool-theme-dns .btn-primary {
  background: linear-gradient(135deg, #00D4AA, #00A885);
  box-shadow: 0 4px 20px rgba(0,212,170,0.3);
}
.tool-theme-dns .result-area {
  border-color: rgba(0,212,170,0.3);
  background: rgba(0,212,170,0.05);
  font-family: 'JetBrains Mono', monospace;
}
.tool-theme-dns label::before {
  content: '🌐 ';
  font-size: 14px;
}

/* ==========================================
   🔒 Security Tools - Alert/Warning Theme
   ========================================== */
.tool-panel-body.tool-theme-security {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,101,132,0.08), transparent 60%);
}
.tool-theme-security .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 16px 0;
  animation: shieldPulse 2s ease-in-out infinite;
}
@keyframes shieldPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,101,132,0.4)); }
  50% { filter: drop-shadow(0 0 25px rgba(255,101,132,0.7)); }
}
.tool-theme-security .form-control {
  border-color: rgba(255,101,132,0.3);
  background: rgba(255,101,132,0.05);
}
.tool-theme-security .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,101,132,0.15), inset 0 0 20px rgba(255,101,132,0.05);
}
.tool-theme-security .btn-primary {
  background: linear-gradient(135deg, #FF6584, #E53935);
  box-shadow: 0 4px 20px rgba(255,101,132,0.3);
}
.tool-theme-security .result-area {
  border-color: rgba(255,101,132,0.3);
  background: rgba(255,101,132,0.05);
}

/* ==========================================
   📍 IP Tools - Map/Globe Theme
   ========================================== */
.tool-panel-body.tool-theme-ip {
  background: radial-gradient(ellipse at 30% 70%, rgba(255,193,7,0.08), transparent 60%);
}
.tool-theme-ip .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 16px 0;
}
.tool-theme-ip .form-control {
  border-color: rgba(255,193,7,0.3);
  background: rgba(255,193,7,0.05);
}
.tool-theme-ip .form-control:focus {
  border-color: #FFC107;
  box-shadow: 0 0 0 4px rgba(255,193,7,0.15);
}
.tool-theme-ip .btn-primary {
  background: linear-gradient(135deg, #FFC107, #FF9800);
  color: #1a1a2e;
  box-shadow: 0 4px 20px rgba(255,193,7,0.3);
}
.tool-theme-ip .result-area {
  border-color: rgba(255,193,7,0.3);
}

/* ==========================================
   📦 WHOIS - Paper/Document Theme
   ========================================== */
.tool-panel-body.tool-theme-whois {
  background: radial-gradient(ellipse at 50% 80%, rgba(156,39,176,0.08), transparent 60%);
}
.tool-theme-whois .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 16px 0;
}
.tool-theme-whois .form-control {
  border-color: rgba(156,39,176,0.3);
  background: rgba(156,39,176,0.05);
}
.tool-theme-whois .form-control:focus {
  border-color: #9C27B0;
  box-shadow: 0 0 0 4px rgba(156,39,176,0.15);
}
.tool-theme-whois .btn-primary {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
  box-shadow: 0 4px 20px rgba(156,39,176,0.3);
}
.tool-theme-whois .result-area {
  border-color: rgba(156,39,176,0.3);
}

/* ==========================================
   🚀 Pentest Tools - Tactical/Hacker Theme
   ========================================== */
.tool-panel-body.tool-theme-pentest {
  background: radial-gradient(ellipse at 20% 20%, rgba(255,87,34,0.1), transparent 60%);
}
.tool-theme-pentest .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 16px 0;
  animation: hackGlitch 5s ease-in-out infinite;
}
@keyframes hackGlitch {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(2px, -1px); }
  96% { transform: translate(-1px, 2px); }
  98% { transform: translate(1px, -2px); }
}
.tool-theme-pentest .form-control {
  border-color: rgba(255,87,34,0.3);
  background: rgba(0,0,0,0.3);
  color: #00ff00;
  font-family: 'JetBrains Mono', monospace;
}
.tool-theme-pentest .form-control:focus {
  border-color: #FF5722;
  box-shadow: 0 0 0 4px rgba(255,87,34,0.15), 0 0 20px rgba(0,255,0,0.1);
}
.tool-theme-pentest .btn-primary {
  background: linear-gradient(135deg, #FF5722, #BF360C);
  box-shadow: 0 4px 20px rgba(255,87,34,0.3);
}
.tool-theme-pentest .result-area {
  border-color: rgba(0,255,0,0.2);
  background: rgba(0,0,0,0.4);
  color: #00ff00;
  font-family: 'JetBrains Mono', monospace;
}
.tool-theme-pentest label {
  color: #00ff00 !important;
}
.tool-theme-pentest label::after {
  content: ' $';
  color: rgba(0,255,0,0.5);
}

/* ==========================================
   🛠 Dev Tools - Code/IDE Theme
   ========================================== */
.tool-panel-body.tool-theme-dev {
  background: radial-gradient(ellipse at 50% 0%, rgba(33,150,243,0.08), transparent 60%);
}
.tool-theme-dev .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 8px 0;
}
.tool-theme-dev .form-control {
  border-color: rgba(33,150,243,0.3);
  background: #1a1a2e;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
}
.tool-theme-dev .form-control:focus {
  border-color: #2196F3;
  box-shadow: 0 0 0 4px rgba(33,150,243,0.15);
}
.tool-theme-dev .btn-primary {
  background: linear-gradient(135deg, #2196F3, #1565C0);
  box-shadow: 0 4px 20px rgba(33,150,243,0.3);
}
.tool-theme-dev .btn-secondary {
  border-color: rgba(33,150,243,0.3);
  color: #64B5F6;
}
.tool-theme-dev .result-area {
  border-color: rgba(33,150,243,0.2);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
}
.tool-theme-dev .form-group label {
  color: #64B5F6 !important;
}

/* ==========================================
   🔐 Crypto Tools - Secure/Vault Theme
   ========================================== */
.tool-panel-body.tool-theme-crypto {
  background: radial-gradient(ellipse at 80% 20%, rgba(233,30,99,0.08), transparent 60%);
}
.tool-theme-crypto .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 8px 0;
}
.tool-theme-crypto .form-control {
  border-color: rgba(233,30,99,0.3);
  background: rgba(233,30,99,0.05);
}
.tool-theme-crypto .form-control:focus {
  border-color: #E91E63;
  box-shadow: 0 0 0 4px rgba(233,30,99,0.15);
}
.tool-theme-crypto .btn-primary {
  background: linear-gradient(135deg, #E91E63, #AD1457);
  box-shadow: 0 4px 20px rgba(233,30,99,0.3);
}
.tool-theme-crypto .result-area {
  border-color: rgba(233,30,99,0.3);
}

/* ==========================================
   🖼 Media Tools - Creative/Art Theme
   ========================================== */
.tool-panel-body.tool-theme-media {
  background: radial-gradient(ellipse at 50% 50%, rgba(255,152,0,0.08), transparent 60%);
}
.tool-theme-media .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 8px 0;
}
.tool-theme-media .form-control {
  border-color: rgba(255,152,0,0.3);
  background: rgba(255,152,0,0.05);
  border-radius: 12px;
}
.tool-theme-media .form-control:focus {
  border-color: #FF9800;
  box-shadow: 0 0 0 4px rgba(255,152,0,0.15);
}
.tool-theme-media .btn-primary {
  background: linear-gradient(135deg, #FF9800, #E65100);
  box-shadow: 0 4px 20px rgba(255,152,0,0.3);
}
.tool-theme-media .result-area {
  border-color: rgba(255,152,0,0.3);
}

/* ==========================================
   🤖 AI Tools - Futuristic/Neon Theme
   ========================================== */
.tool-panel-body.tool-theme-ai {
  background: radial-gradient(ellipse at 50% 30%, rgba(0,188,212,0.08), transparent 60%);
}
.tool-theme-ai .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 8px 0;
  animation: aiBrain 4s ease-in-out infinite;
}
@keyframes aiBrain {
  0%, 100% { filter: hue-rotate(0deg) drop-shadow(0 0 8px rgba(0,188,212,0.3)); }
  50% { filter: hue-rotate(30deg) drop-shadow(0 0 20px rgba(0,188,212,0.6)); }
}
.tool-theme-ai .form-control {
  border-color: rgba(0,188,212,0.3);
  background: rgba(0,188,212,0.05);
}
.tool-theme-ai .form-control:focus {
  border-color: #00BCD4;
  box-shadow: 0 0 0 4px rgba(0,188,212,0.15), 0 0 30px rgba(0,188,212,0.1);
}
.tool-theme-ai .btn-primary {
  background: linear-gradient(135deg, #00BCD4, #00838F);
  box-shadow: 0 4px 20px rgba(0,188,212,0.3);
}
.tool-theme-ai .result-area {
  border-color: rgba(0,188,212,0.3);
}

/* ==========================================
   🧹 Utility Tools - Clean/Minimal Theme
   ========================================== */
.tool-panel-body.tool-theme-life {
  background: radial-gradient(ellipse at 30% 40%, rgba(76,175,80,0.08), transparent 60%);
}
.tool-theme-life .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 8px 0;
}
.tool-theme-life .form-control {
  border-color: rgba(76,175,80,0.3);
  background: rgba(76,175,80,0.05);
}
.tool-theme-life .form-control:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 4px rgba(76,175,80,0.15);
}
.tool-theme-life .btn-primary {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  box-shadow: 0 4px 20px rgba(76,175,80,0.3);
}
.tool-theme-life .result-area {
  border-color: rgba(76,175,80,0.3);
}

/* ==========================================
   🏠 Daily Tools - Warm/Home Theme
   ========================================== */
.tool-panel-body.tool-theme-daily {
  background: radial-gradient(ellipse at 70% 30%, rgba(255,152,0,0.08), transparent 60%);
}
.tool-theme-daily .tool-header-icon {
  font-size: 48px;
  text-align: center;
  padding: 8px 0;
}
.tool-theme-daily .form-control {
  border-color: rgba(255,152,0,0.3);
  background: rgba(255,152,0,0.05);
  border-radius: 12px;
}
.tool-theme-daily .form-control:focus {
  border-color: #FF9800;
  box-shadow: 0 0 0 4px rgba(255,152,0,0.1);
}
.tool-theme-daily .btn-primary {
  background: linear-gradient(135deg, #FF9800, #F57C00);
  box-shadow: 0 4px 20px rgba(255,152,0,0.3);
}
.tool-theme-daily .result-area {
  border-color: rgba(255,152,0,0.3);
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
}

/* ==========================================
   Tool-specific Calculator Theme
   ========================================== */
.tool-theme-daily .calc-btn {
  font-size: 18px;
  min-height: 52px;
}
.tool-theme-daily .calc-btn.op {
  background: linear-gradient(135deg, rgba(255,152,0,0.4), rgba(255,152,0,0.2));
}
.tool-theme-daily .calc-btn.eq {
  background: linear-gradient(135deg, #FF9800, #E65100);
}
.tool-theme-daily .calc-display {
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,152,0,0.3);
  box-shadow: inset 0 0 20px rgba(255,152,0,0.1);
}

/* ==========================================
   Tool-specific Weather Theme
   ========================================== */
.tool-theme-daily #weatherResult {
  background: linear-gradient(135deg, rgba(0,188,212,0.1), rgba(76,175,80,0.1));
  border-color: rgba(0,188,212,0.3);
}

/* ==========================================
   Tool-specific Notes Theme
   ========================================== */
.tool-theme-daily #notesList {
  background: transparent !important;
}
.tool-theme-daily #notesList > div {
  border-left: 3px solid var(--primary) !important;
  transition: transform 0.2s ease;
}
.tool-theme-daily #notesList > div:hover {
  transform: translateX(4px);
}