/**
 * DaminSec Portfolio Website - Stylesheet
 * =======================================
 * 
 * This file contains all the styling for the DaminSec portfolio website
 * including responsive design, animations, and cyberpunk aesthetic.
 * 
 * DESIGN PRINCIPLES:
 * - Cyberpunk aesthetic with neon colors and dark theme
 * - Responsive design for all device sizes
 * - Accessibility considerations (WCAG 2.1)
 * - Performance optimization with efficient CSS
 * 
 * SECURITY CONSIDERATIONS:
 * - No external font or resource dependencies
 * - Self-contained styling to prevent XSS
 * - No data URIs that could contain malicious content
 * 
 * COMPLIANCE:
 * - WCAG 2.1 AA color contrast requirements
 * - Responsive design for mobile accessibility
 * - Keyboard navigation support
 * 
 * Author: Damin Mohsin
 * Version: 1.0.0
 * Last Updated: 2025
 */

/* ====== DaminSec Portfolio Styles ====== */
:root{
  --bg:#0B0F14; --panel:#0F141B; --panel-2:#121923; --text:#E3E7ED; --muted:#9AA5B1; --accent:#39D0FF;
  --success:#23D18B; --warn:#FFD166; --danger:#EF476F; --shadow:0 14px 48px rgba(0,0,0,.45); --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; color:var(--text);
  background:radial-gradient(1200px 800px at 10% -10%,rgba(57,208,255,.08),transparent 60%),
             radial-gradient(900px 600px at 90% 10%,rgba(57,208,255,.05),transparent 60%), var(--bg);
  background-attachment:fixed}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}

.app{display:flex; flex-direction:column; min-height:100vh; opacity:0; transform:translateY(6px); filter:blur(6px); transition:all 700ms ease}
.app.reveal{opacity:1; transform:none; filter:none}

.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px; padding:12px 20px;
  background:rgba(15,20,27,.6); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
.logo{display:flex; align-items:center; user-select:none; cursor:pointer}
.extended-logo{display:flex; align-items:center; transition:all 0.3s ease}
.extended-logo:hover{transform:scale(1.05); filter:brightness(1.1)}
.extended-logo[data-char]:hover{transform:scale(1.1); filter:brightness(1.2); box-shadow:0 0 20px rgba(57,208,255,0.3)}
.nav{margin-left:auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.nav-link{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px; transition:all 0.2s ease}
.nav-link:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav-link.active{color:var(--accent); background:rgba(57,208,255,.1); border:1px solid rgba(57,208,255,.3)}
.btn{border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer}
.btn:hover{border-color:rgba(255,255,255,.28)}
.btn.primary{background:linear-gradient(180deg,rgba(57,208,255,.22),rgba(57,208,255,.12)); border-color:rgba(57,208,255,.45)}
.btn.primary:hover{filter:brightness(1.1)}

/* Master Key Section */
.master-key-section {
  background: rgba(57, 208, 255, 0.05);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.master-key-section h3 {
  color: #39D0FF;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.master-key-section p {
  color: #E0E6ED;
  margin: 0 0 15px 0;
  font-size: 14px;
}

.master-key-form .form-group {
  margin-bottom: 15px;
}

.master-key-form .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #39D0FF;
  font-weight: 500;
  font-size: 14px;
}

.master-key-form .form-group input {
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(57, 208, 255, 0.3);
  border-radius: 4px;
  color: #E0E6ED;
  font-size: 14px;
}

.master-key-form .form-group input:focus {
  outline: none;
  border-color: #39D0FF;
  box-shadow: 0 0 10px rgba(57, 208, 255, 0.3);
}

/* Password Toggle Styles */
.password-toggle {
  transition: all 0.2s ease;
  opacity: 0.7;
}

.password-toggle:hover {
  opacity: 1;
  transform: scale(1.1);
}

.password-input-container {
  position: relative;
}

.password-input-container input {
  padding-right: 40px !important;
}

/* Exclusive Vault Content Styles */
.exclusive-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 20px 0;
}

.exclusive-section {
  background: rgba(57, 208, 255, 0.05);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 12px;
  padding: 25px;
}

.exclusive-section h4 {
  color: #39D0FF;
  margin: 0 0 20px 0;
  font-size: 20px;
  border-bottom: 2px solid rgba(57, 208, 255, 0.3);
  padding-bottom: 10px;
}

.exclusive-projects {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.exclusive-project {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(57, 208, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.exclusive-project h5 {
  color: #39D0FF;
  margin: 0 0 15px 0;
  font-size: 18px;
}

.exclusive-project p {
  margin: 8px 0;
  color: #E0E6ED;
  line-height: 1.6;
}

.exclusive-project strong {
  color: #39D0FF;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.metric-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.metric-card h5 {
  color: #39D0FF;
  margin: 0 0 10px 0;
  font-size: 16px;
}

.metric-value {
  font-size: 32px;
  font-weight: bold;
  color: #00ff00;
  margin: 10px 0;
}

.metric-card p {
  color: #E0E6ED;
  font-size: 14px;
  margin: 0;
}

/* Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.skill-category {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(57, 208, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.skill-category h5 {
  color: #39D0FF;
  margin: 0 0 15px 0;
  font-size: 16px;
}

.skill-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill-category li {
  color: #E0E6ED;
  padding: 5px 0;
  border-bottom: 1px solid rgba(57, 208, 255, 0.1);
}

.skill-category li:last-child {
  border-bottom: none;
}

/* Threat Hunting */
.threat-hunting {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.hunting-method {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(57, 208, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.hunting-method h5 {
  color: #39D0FF;
  margin: 0 0 10px 0;
  font-size: 16px;
}

.hunting-method p {
  color: #E0E6ED;
  margin: 0;
  line-height: 1.6;
}

/* Contact Details */
.contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.contact-method {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(57, 208, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.contact-method h5 {
  color: #39D0FF;
  margin: 0 0 10px 0;
  font-size: 16px;
}

.contact-method p {
  color: #E0E6ED;
  margin: 10px 0;
  font-size: 16px;
}

.contact-method small {
  color: #B0B0B0;
  font-size: 12px;
  display: block;
  margin-top: 10px;
}

/* Vault Actions */
.vault-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(57, 208, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .metrics-grid,
  .skills-grid,
  .threat-hunting,
  .contact-details {
    grid-template-columns: 1fr;
  }
  
  .vault-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .exclusive-section {
    padding: 15px;
  }
}

/* Welcome Popup Styles */
.welcome-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  margin: 0;
}

.welcome-content {
  background: linear-gradient(135deg, rgba(57, 208, 255, 0.1), rgba(0, 0, 0, 0.8));
  border: 2px solid rgba(57, 208, 255, 0.3);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: popupSlideIn 0.3s ease-out;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Ensure perfect centering on all devices */
.welcome-popup {
  align-items: center;
  justify-content: center;
}

.welcome-popup[style*="display: block"], 
.welcome-popup[style*="display: flex"] {
  display: flex !important;
}

/* Additional centering for mobile devices */
@media (max-width: 768px) {
  .welcome-popup {
    padding: 10px;
    align-items: center;
    justify-content: center;
  }
  
  .welcome-content {
    margin: 0;
    width: calc(100% - 20px);
    max-width: none;
  }
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid rgba(57, 208, 255, 0.2);
}

.welcome-header h2 {
  margin: 0;
  color: #39D0FF;
  font-size: 24px;
}

.close-welcome {
  background: none;
  border: none;
  color: #39D0FF;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-welcome:hover {
  background: rgba(57, 208, 255, 0.2);
  transform: scale(1.1);
}

.welcome-body {
  padding: 25px;
  color: #E0E6ED;
  line-height: 1.6;
}

.welcome-body h3 {
  color: #39D0FF;
  margin: 20px 0 10px 0;
  font-size: 18px;
}

.welcome-body ul {
  margin: 10px 0;
  padding-left: 20px;
}

.welcome-body li {
  margin: 8px 0;
}

.welcome-body code {
  background: rgba(57, 208, 255, 0.2);
  color: #39D0FF;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

.privacy-note {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
}

.privacy-note p {
  margin: 0;
  color: #FFC107;
}

.welcome-footer {
  padding: 20px 25px;
  border-top: 1px solid rgba(57, 208, 255, 0.2);
  text-align: center;
}

.welcome-footer small {
  display: block;
  margin-top: 10px;
  color: #B0B0B0;
  font-size: 12px;
}

.terminal-tip {
  background: rgba(57, 208, 255, 0.1);
  border: 1px solid rgba(57, 208, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
}

.terminal-tip p {
  margin: 0;
  color: #E0E6ED;
}

.terminal-tip code {
  background: rgba(57, 208, 255, 0.2);
  color: #39D0FF;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

/* ============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================================ */

/* Focus indicators for keyboard navigation */
*:focus {
  outline: 2px solid #39D0FF;
  outline-offset: 2px;
}

/* Skip links for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #39D0FF;
  color: #0B0F14;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --text: #FFFFFF;
    --muted: #CCCCCC;
    --accent: #00FFFF;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Field help text */
.field-help {
  display: block;
  color: #9AA5B1;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.4;
}

/* Checkbox styling for accessibility */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.checkbox-label .checkmark {
  display: none;
}

/* Privacy policy styling */
.privacy-content {
  color: #E0E6ED;
  line-height: 1.6;
}

.privacy-content h4 {
  color: #39D0FF;
  margin: 20px 0 10px 0;
  font-size: 16px;
}

.privacy-content ul {
  margin: 10px 0;
  padding-left: 20px;
}

.privacy-content li {
  margin: 5px 0;
}

.privacy-content strong {
  color: #39D0FF;
}

.privacy-link {
  color: #39D0FF;
  text-decoration: underline;
}

.privacy-link:hover {
  color: #00FFFF;
}

.privacy-update {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(57, 208, 255, 0.2);
  font-style: italic;
  color: #9AA5B1;
}

/* Form error styling */
.field-error {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

/* Form validation states */
input:invalid, textarea:invalid {
  border-color: #ff6b6b;
}

input:valid, textarea:valid {
  border-color: #23D18B;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ARIA live regions */
[aria-live] {
  position: relative;
}

/* High contrast focus for better visibility */
.btn:focus, .nav-link:focus, input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(57, 208, 255, 0.3);
}

/* Ensure sufficient color contrast */
.btn.primary {
  background: #39D0FF;
  color: #0B0F14;
  font-weight: 600;
}

.btn.primary:hover {
  background: #00FFFF;
  color: #0B0F14;
}

/* Responsive text sizing */
@media (max-width: 768px) {
  .privacy-content {
    font-size: 14px;
  }
  
  .privacy-content h4 {
    font-size: 15px;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .welcome-content {
    margin: 10px;
    max-height: 90vh;
  }
  
  .welcome-header h2 {
    font-size: 20px;
  }
  
  .welcome-body {
    padding: 20px;
  }
  
  .welcome-body h3 {
    font-size: 16px;
  }
}

/* Word Bank Styles */
.word-bank {
  background: rgba(57, 208, 255, 0.05);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  display: block !important;
  visibility: visible !important;
}

.word-bank p {
  color: #E0E6ED;
  margin: 0 0 15px 0;
}

.word-bank-display {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(57, 208, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
  min-height: 50px;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  visibility: visible !important;
}

.word-placeholder {
  color: #B0B0B0;
  font-style: italic;
}

.word-character {
  background: rgba(57, 208, 255, 0.2);
  color: #39D0FF;
  border: 1px solid rgba(57, 208, 255, 0.4);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 16px;
  min-width: 30px;
  text-align: center;
  animation: characterGlow 2s ease-in-out infinite alternate;
}

@keyframes characterGlow {
  from {
    box-shadow: 0 0 5px rgba(57, 208, 255, 0.3);
  }
  to {
    box-shadow: 0 0 15px rgba(57, 208, 255, 0.6);
  }
}

.word-bank-hint {
  color: #B0B0B0;
  font-size: 14px;
  margin: 10px 0 0 0;
  font-style: italic;
}

/* Auth Indicator */
.auth-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-badge {
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 20px;
  padding: 8px 16px;
  color: #00ff00;
  font-size: 14px;
  font-weight: bold;
  animation: authPulse 2s ease-in-out infinite alternate;
}

@keyframes authPulse {
  from {
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
  }
  to {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
  }
}

.logout-btn-small {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 15px;
  padding: 6px 12px;
  color: #ff6b6b;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn-small:hover {
  background: rgba(255, 107, 107, 0.2);
  transform: translateY(-1px);
}

/* Employers section follows standard tab behavior */

.content{width:100%; max-width:1200px; margin:24px auto; padding:0 20px; flex:1}

.grid{display:grid; gap:20px}
@media (min-width:1024px){ .grid{grid-template-columns:repeat(12,1fr)} }

.panel{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; position:relative}
.panel h3{margin:0 0 10px 0; font-size:14px; letter-spacing:.3px; color:#cfd6df; display:flex; align-items:center; justify-content:space-between}
.status-dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 12px rgba(35,209,139,.7)}
.muted{color:var(--muted)}

.hero{display:grid; gap:20px; margin-bottom:20px}
@media (min-width:1024px){ .hero{grid-template-columns:6fr 6fr} }
.hero .headline{padding:24px; border-radius:var(--radius); background:linear-gradient(180deg,rgba(57,208,255,.08),rgba(57,208,255,.03)); border:1px solid rgba(57,208,255,.25)}
.headline h1{margin:0 0 8px 0; font-family:"Space Grotesk",Inter,system-ui,sans-serif; font-size:clamp(28px,3.6vw,44px)}
.headline p{margin:0; color:#c7d0da}

.hero .monitor{min-height:180px}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.metric{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px}
.metric .label{font-size:12px; color:var(--muted)}
.metric .value{font-size:20px; font-weight:700}

.list{display:flex; flex-direction:column; gap:10px; max-height:260px; overflow:auto}
.item{display:flex; align-items:flex-start; gap:10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:10px; border-radius:10px}
.badge{font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.15)}
.sev-high{color:#fff; background:linear-gradient(180deg,rgba(239,71,111,.35),rgba(239,71,111,.2)); border-color:rgba(239,71,111,.6)}
.sev-med{color:#fff; background:linear-gradient(180deg,rgba(255,209,102,.35),rgba(255,209,102,.2)); border-color:rgba(255,209,102,.6)}
.sev-low{color:#0b0f14; background:linear-gradient(180deg,rgba(35,209,139,.6),rgba(35,209,139,.4)); border-color:rgba(35,209,139,.8)}

.terminal{background:#0a0f14; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; height:220px; display:flex; flex-direction:column}
.term-log{flex:1; overflow:auto; white-space:pre-wrap}
.term-input{display:flex; gap:8px; margin-top:8px}
.term-input input{flex:1; background:#0d141b; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 10px}
.term-input button{padding:8px 12px}

.files{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.file{padding:10px; border:1px dashed rgba(255,255,255,.2); border-radius:10px; cursor:pointer}
.file:hover{background:rgba(255,255,255,.03)}

.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); z-index:100}
.modal[open]{display:flex}
.sheet{width:100%; max-width:520px; background:var(--panel-2); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.sheet h2{margin:6px 0 16px; font-family:"Space Grotesk",Inter,sans-serif}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field label{font-size:12px; color:var(--muted)}
.field input{padding:10px 12px; border-radius:12px; background:#0d141b; color:var(--text); border:1px solid rgba(255,255,255,.14)}
.actions{display:flex; gap:10px; justify-content:flex-end; margin-top:12px}
.hint{font-size:12px; color:var(--muted)}

.vault{display:none} .vault.active{display:block}
.vault .hero{grid-template-columns:1fr}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.03); font-size:12px; color:#cfd6df}
.cards{display:grid; gap:16px}
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px}
.card h4{margin:0 0 6px 0} .card p{margin:0; color:#cfd6df}
.card .tag{display:inline-block; margin-top:10px; font-size:11px; color:#0b0f14; background:linear-gradient(180deg,rgba(35,209,139,.6),rgba(35,209,139,.4)); padding:4px 8px; border-radius:999px}

/* PII Section */
.pii-section{margin-top:20px; padding:16px; background:rgba(239,71,111,.05); border:1px solid rgba(239,71,111,.2); border-radius:12px}
.pii-links{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.pii-link{color:var(--danger); text-decoration:none; padding:8px 16px; border:1px solid rgba(239,71,111,.3); border-radius:8px; background:rgba(239,71,111,.1); transition:all 0.2s ease; font-weight:600}
.pii-link:hover{background:rgba(239,71,111,.2); border-color:rgba(239,71,111,.5); transform:translateY(-1px); box-shadow:0 4px 12px rgba(239,71,111,.2)}

/* PII Modal */
.pii-sheet{
  max-width:600px; 
  text-align:center;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.pii-content{
  padding:40px 20px;
}
.pii-title{
  font-size:clamp(32px,6vw,48px); 
  font-weight:700; 
  color:var(--danger); 
  margin:0 0 16px 0; 
  text-shadow:0 0 20px rgba(239,71,111,.3);
}
.pii-subtitle{
  font-size:18px; 
  color:var(--muted); 
  margin:0 0 24px 0;
}

/* Ensure PII modal is perfectly centered */
#piiModal {
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
}

#piiModal[style*="display: block"], 
#piiModal[style*="display: flex"] {
  display: flex !important;
}

/* Documentation Popup Modal */
.docs-sheet {
  max-width: 500px;
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid rgba(57, 208, 255, 0.3);
  border-radius: 16px;
  overflow-y: auto;
  box-shadow: var(--shadow);
  text-align: center;
  padding: 40px;
  position: relative;
}

.docs-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.docs-title {
  color: #39D0FF;
  font-size: 24px;
  margin: 0;
  text-align: center;
}

.docs-subtitle {
  color: var(--text);
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.cookie-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
}

.cookie {
  font-size: 60px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
}

.cookie:hover {
  transform: scale(1.2);
  filter: brightness(1.2);
}

.cookie-text {
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Privacy Policy Modal */
.privacy-sheet {
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
  position: relative;
}

.privacy-sheet::-webkit-scrollbar {
  width: 8px;
}

.privacy-sheet::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 4px;
}

.privacy-sheet::-webkit-scrollbar-thumb {
  background: #39D0FF;
  border-radius: 4px;
}

.privacy-sheet::-webkit-scrollbar-thumb:hover {
  background: #2bb8e6;
}

/* CTF Progress Display */
.ctf-progress {
  margin-top: 20px;
  padding: 15px;
  background: rgba(57, 208, 255, 0.1);
  border: 1px solid #39D0FF;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.ctf-progress h4 {
  color: #39D0FF;
  margin: 0 0 10px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-info {
  font-size: 14px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
}

.progress-bar div {
  height: 100%;
  background: linear-gradient(90deg, #39D0FF, #00ff00);
  transition: width 0.3s ease;
  border-radius: 4px;
}

#wordBank {
  font-family: 'Courier New', monospace;
  color: #39D0FF;
  font-size: 14px;
  letter-spacing: 2px;
  margin: 10px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  text-align: center;
}

/* CTF Notification */
.ctf-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(15, 20, 27, 0.95);
  border: 1px solid #39D0FF;
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--text);
  font-size: 14px;
  z-index: 10001;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  animation: slideInRight 0.3s ease-out;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctf-notification .badge {
  background: #39D0FF;
  color: #0B0F14;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  margin-right: 8px;
  display: inline-block;
}

.ctf-notification .muted {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.char-badge {
  display: inline-block;
  background: #39D0FF;
  color: #000;
  padding: 2px 6px;
  margin: 0 2px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 12px;
}

.privacy-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  color: #39D0FF;
  margin: 0 0 20px 0;
  text-align: center;
}

.privacy-body {
  color: #E0E6ED;
  line-height: 1.6;
  margin-bottom: 20px;
}

.privacy-body h4 {
  color: #39D0FF;
  margin: 20px 0 10px 0;
  font-size: 18px;
}

.privacy-body ul {
  margin: 10px 0;
  padding-left: 20px;
}

.privacy-body li {
  margin: 8px 0;
}

.privacy-body a {
  color: #39D0FF;
  text-decoration: none;
}

.privacy-body a:hover {
  text-decoration: underline;
}

.privacy-update {
  font-style: italic;
  color: #888;
  margin-top: 20px;
  text-align: center;
}

/* Ensure privacy modal is perfectly centered when visible */
#privacyModal {
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
}

#privacyModal[style*="display: block"], 
#privacyModal[style*="display: flex"] {
  display: flex !important;
}

/* Projects Section */
.project-showcase{margin-top:16px}
.project-item{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:20px; margin-bottom:16px}
.project-item h4{margin:0 0 8px 0; color:var(--text)}
.project-item p{margin:0 0 12px 0; color:var(--muted); line-height:1.5}
.project-tech{display:flex; gap:8px; flex-wrap:wrap}
.tech-tag{background:rgba(57,208,255,.1); color:var(--accent); padding:4px 8px; border-radius:6px; font-size:11px; font-weight:500; border:1px solid rgba(57,208,255,.2)}

footer{opacity:.8; font-size:12px; color:var(--muted); text-align:center; padding:30px 10px}
.kbd{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; border:1px solid rgba(255,255,255,.2); padding:2px 6px; border-radius:6px}

/* ===== PRELOADER SCENE ===== */
.preloader{position:fixed; inset:0; background:#0B0F14; z-index:9999; display:flex; align-items:center; justify-content:center; overflow:hidden; --sceneBaseW:960; --sceneBaseH:560; --sceneScale:1; --scenePad:24; padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}
.preloader .scene{position:relative; width:calc(var(--sceneBaseW)*1px); height:calc(var(--sceneBaseH)*1px); border-radius:18px; border:1px solid rgba(255,255,255,.06);
  background:radial-gradient(60% 80% at 50% 28%,rgba(57,208,255,.10),transparent 70%), linear-gradient(180deg,#0B0F14 0%,#0B0F14 45%,#0F141B 100%);
  box-shadow:0 40px 140px rgba(0,0,0,.6), inset 0 0 80px rgba(57,208,255,.06); transform-origin:50% 36%; transform:scale(var(--sceneScale,1)); 
  /* Ensure consistent scaling and prevent distortion */
  max-width: 100vw; max-height: 100vh; aspect-ratio: 960/560;}

/* Ensure the preloader container scales properly */
.preloader{min-height: 100vh; min-width: 100vw; box-sizing: border-box;}

/* Force hardware acceleration for smooth scaling */
.preloader .scene{will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;}

.preloader .desk{position:absolute; left:50%; transform:translateX(-50%); bottom:8%; width:90%; height:14%; background:#0a0f14; border-top:1px solid rgba(255,255,255,.06); box-shadow:0 -20px 60px rgba(0,0,0,.5) inset}

.preloader .monitor{position:absolute; background:#0B0F14; border:1px solid rgba(255,255,255,.08); box-shadow:0 0 40px rgba(57,208,255,.18), inset 0 0 40px rgba(57,208,255,.04); border-radius:10px}
.preloader .monitor:after{content:""; position:absolute; inset:6% 6%; background:linear-gradient(180deg,rgba(57,208,255,.10),rgba(57,208,255,.03)); filter:blur(.2px); border-radius:8px}
.preloader .m-left{width:22%; height:28%; left:8%; top:26%}
.preloader .m-center{width:40%; height:34%; left:30%; top:20%}
.preloader .m-right{width:22%; height:28%; right:8%; top:26%}
.preloader .stand{position:absolute; width:4px; height:10%; background:#0b0f14; left:50%; transform:translateX(-50%); bottom:-10%}

.screen-text{position:absolute; inset:10% 8%; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font:600 clamp(10px,2.6vw,13px)/1.25 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.6px; text-shadow:0 0 10px rgba(255,255,255,.35)}
.screen-text.center{color:#ffffff; text-shadow:0 0 12px rgba(255,255,255,.55)}
.screen-text.right{color:#ffd4d9; text-shadow:0 0 10px rgba(239,71,111,.35)}
.caret{display:inline-block; width:10px; height:16px; background:rgba(255,255,255,.9); margin-left:4px; animation:blink .8s steps(1,end) infinite}
@keyframes blink{50%{opacity:.15}}

.scan{position:absolute; inset:0; background:linear-gradient(180deg,rgba(57,208,255,0) 0%,rgba(57,208,255,.16) 50%,rgba(57,208,255,0) 100%); mix-blend-mode:screen; transform:translateY(-100%); animation:scan 3.2s ease-in-out infinite}
@keyframes scan{0%{transform:translateY(-120%)}50%{transform:translateY(0%)}100%{transform:translateY(120%)}}

.crt{animation:crtFlicker 2.2s ease-in-out infinite}
@keyframes crtFlicker{0%,100%{opacity:.96; transform:none}10%{opacity:.88}22%{opacity:.98; transform:translateY(-.2px)}37%{opacity:.9}51%{opacity:.99; transform:translateY(.2px)}68%{opacity:.93}83%{opacity:.97}}

/* Back monitors */
.back-monitor{position:absolute; bottom:17.5%; width:16%; height:18%; background:#0B0F14; border:1px solid rgba(255,255,255,.12); border-radius:10px; box-shadow:0 10px 32px rgba(0,0,0,.55), inset 0 0 36px rgba(57,208,255,.06); overflow:hidden; z-index:1}
.back-monitor:after{content:""; position:absolute; inset:8% 7%; border-radius:8px; background:linear-gradient(180deg, rgba(57,208,255,.14), rgba(57,208,255,.05)); opacity:.85; pointer-events:none}
.back-monitor.left{left:16%}
.back-monitor.right{right:16%}

.radar{position:absolute; inset:12% 10%; border-radius:50%; border:1px solid rgba(57,208,255,.35); background:
  radial-gradient(circle at 50% 50%,rgba(57,208,255,.12) 1px,transparent 1px) 0 0/16px 16px,
  radial-gradient(circle at 50% 50%,rgba(57,208,255,.08) 2px,transparent 2px) 0 0/40px 40px,
  radial-gradient(closest-side,rgba(57,208,255,.06),transparent 65%); overflow:hidden}
.radar .sweep{position:absolute; left:50%; top:50%; width:60%; height:2px; transform-origin:0% 50%; background:linear-gradient(90deg,rgba(57,208,255,.8),rgba(57,208,255,0)); animation:sweep 2.6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}

.hacktext{position:absolute; inset:14% 10%; font:600 9px/1.22 "JetBrains Mono",ui-monospace,monospace; color:#FFF6A3; text-shadow:0 0 4px rgba(255,246,163,.6), 0 0 8px rgba(255,246,163,.25); white-space:pre-line; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; max-height:72%; border-radius:8px}
.hacktext .line{opacity:.95; margin:.5px 0}

/* Keyboard + hands (+ silhouette) */
.keyboard{position:absolute; left:50%; transform:translateX(-50%); bottom:16%; width:36%; height:5%; background:#0a0f14; border:1px solid rgba(255,255,255,.14); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 0 30px rgba(57,208,255,.07); z-index:1}
.keyboard:before{content:""; position:absolute; inset:10% 6%; border-radius:6px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,transparent 2px 12px); opacity:.26}
.keyboard:after{content:""; position:absolute; inset:10% 6%; border-radius:6px; background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 2px,transparent 2px 12px); opacity:.22}

.hands{position:absolute; left:50%; transform:translateX(-50%); bottom:17.5%; width:36%; height:5%; z-index:3; pointer-events:none}
.hands .hand{position:absolute; width:26px; height:26px; background:#05090d; border-radius:50%; box-shadow:inset 0 0 24px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.45)}
.hands .hand.left{left:26%; top:-6px}
.hands .hand.right{right:26%; top:-6px}

.person{position:absolute; left:50%; transform:translateX(-50%); width:120px; height:190px; bottom:-1%; z-index:2}
.head{width:56px; height:56px; background:#04070a; border-radius:50%; margin:0 auto 4px auto; box-shadow:0 0 32px rgba(0,0,0,.6)}
.body{width:120px; height:120px; background:#05090d; border-radius:60px 60px 16px 16px; box-shadow:0 0 60px rgba(0,0,0,.7) inset}

/* Wires */
.wires, .wires-mobile{position:absolute; inset:0; z-index:0}
.wires-mobile{display:none}
.wire{stroke:rgba(57,208,255,.55); stroke-width:2; fill:none; filter:drop-shadow(0 0 6px rgba(57,208,255,.25)); animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{stroke-opacity:.55}50%{stroke-opacity:.2}}

/* Transitions */
.preloader.zoom .scene{animation:zoom-in 900ms cubic-bezier(.2,.7,.2,1) forwards}
@keyframes zoom-in{0%{transform:translateY(0) scale(var(--sceneScale,1))}100%{transform:translateY(-13%) scale(calc(var(--sceneScale,1) * 2.5))}}
.preloader.fade{animation:fade-out 600ms ease forwards 780ms}
@keyframes fade-out{to{opacity:0; visibility:hidden}}

/* Left monitor alternating fade animation */
@keyframes nwFadeSwap{0%{opacity:0}12%{opacity:1}50%{opacity:1}88%{opacity:0}100%{opacity:0}}

/* Enhanced Responsive Design for Cross-Device Compatibility */
@media (max-width: 480px) {
  /* Very small mobile devices */
  .preloader{cursor:pointer}
  .preloader .scene{width:95vw; height:65vw; border-radius:10px; transform-origin:50% 40%}
  .preloader .m-left{left:4%; width:18%; height:24%; top:30%}
  .preloader .m-center{left:20%; width:60%; height:28%; top:24%}
  .preloader .m-right{right:4%; width:18%; height:24%; top:30%}
  .back-monitor.left{left:6%; bottom:18%; width:24%; height:14%}
  .back-monitor.right{right:6%; bottom:18%; width:24%; height:14%}
  .wires{display:none}
  .wires-mobile{display:block}
  .screen-text{font-size: clamp(8px, 2.2vw, 10px)}
  .hacktext{font-size: 7px}
  .content{padding:0 12px}
  .sheet{width:94vw}
}

@media (min-width: 481px) and (max-width: 600px) {
  /* Small mobile devices */
  .preloader{cursor:pointer}
  .preloader .scene{width:96vw; height:60vw; border-radius:12px; transform-origin:50% 42%}
  .preloader .m-left{left:6%; width:20%; height:26%; top:28%}
  .preloader .m-center{left:21%; width:58%; height:30%; top:22%}
  .preloader .m-right{right:6%; width:20%; height:26%; top:28%}
  .back-monitor.left{left:8%; bottom:16%; width:22%; height:16%}
  .back-monitor.right{right:8%; bottom:16%; width:22%; height:16%}
  .wires{display:none}
  .wires-mobile{display:block}
  .screen-text{font-size: clamp(9px, 2.4vw, 11px)}
  .hacktext{font-size: 8px}
  .content{padding:0 14px}
  .sheet{width:92vw}
}

@media (min-width: 601px) and (max-width: 768px) {
  /* Medium mobile/tablet */
  .preloader .scene{width:90vw; height:56vw; border-radius:14px; transform-origin:50% 38%}
  .preloader .m-left{left:7%; width:21%; height:27%; top:27%}
  .preloader .m-center{left:22%; width:56%; height:31%; top:21%}
  .preloader .m-right{right:7%; width:21%; height:27%; top:27%}
  .back-monitor.left{left:10%; bottom:17%; width:20%; height:17%}
  .back-monitor.right{right:10%; bottom:17%; width:20%; height:17%}
  .wires{display:none}
  .wires-mobile{display:block}
  .screen-text{font-size: clamp(10px, 2.5vw, 12px)}
  .hacktext{font-size: 8px}
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Large tablet/small laptop */
  .preloader .scene{width:85vw; height:53vw; border-radius:16px; transform-origin:50% 36%}
  .preloader .m-left{left:8%; width:22%; height:28%; top:26%}
  .preloader .m-center{left:30%; width:44%; height:32%; top:20%}
  .preloader .m-right{right:8%; width:22%; height:28%; top:26%}
  .back-monitor.left{left:16%; bottom:17.5%; width:16%; height:18%}
  .back-monitor.right{right:16%; bottom:17.5%; width:16%; height:18%}
  .wires{display:block}
  .wires-mobile{display:none}
  .screen-text{font-size: clamp(11px, 2.6vw, 13px)}
  .hacktext{font-size: 9px}
}

@media (min-width: 1025px) and (max-width: 1440px) {
  /* Small desktop */
  .preloader .scene{width:80vw; height:50vw; border-radius:18px; transform-origin:50% 36%}
  .preloader .m-left{left:8%; width:22%; height:28%; top:26%}
  .preloader .m-center{left:30%; width:40%; height:34%; top:20%}
  .preloader .m-right{right:8%; width:22%; height:28%; top:26%}
  .back-monitor.left{left:16%; bottom:17.5%; width:16%; height:18%}
  .back-monitor.right{right:16%; bottom:17.5%; width:16%; height:18%}
  .wires{display:block}
  .wires-mobile{display:none}
  .screen-text{font-size: 13px}
  .hacktext{font-size: 9px}
}

@media (min-width: 1441px) {
  /* Large desktop - maintain original proportions */
  .preloader .scene{width:960px; height:560px; transform-origin:50% 36%}
  .preloader .m-left{left:8%; width:22%; height:28%; top:26%}
  .preloader .m-center{left:30%; width:40%; height:34%; top:20%}
  .preloader .m-right{right:8%; width:22%; height:28%; top:26%}
  .back-monitor.left{left:16%; bottom:17.5%; width:16%; height:18%}
  .back-monitor.right{right:16%; bottom:17.5%; width:16%; height:18%}
  .wires{display:block}
  .wires-mobile{display:none}
  .screen-text{font-size: 13px}
  .hacktext{font-size: 9px}
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .preloader .scene{width:70vw; height:45vw; transform-origin:50% 35%}
  .preloader .m-left{left:6%; width:20%; height:26%; top:28%}
  .preloader .m-center{left:20%; width:60%; height:30%; top:22%}
  .preloader .m-right{right:6%; width:20%; height:26%; top:28%}
  .back-monitor.left{left:8%; bottom:16%; width:22%; height:16%}
  .back-monitor.right{right:8%; bottom:16%; width:22%; height:16%}
}

/* High DPI display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .preloader .scene{border-width: 0.5px}
  .preloader .monitor{border-width: 0.5px}
  .preloader .back-monitor{border-width: 0.5px}
  .preloader .keyboard{border-width: 0.5px}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .crt,.scan,.wire{animation:none!important}
  .preloader.zoom .scene{animation:zoom-in 0ms!important}
  .preloader.fade{animation:fade-out 0ms!important}
  .radar .sweep{animation:none!important}
  .caret{animation:none!important}
}

/* Dark mode support for systems that prefer it */
@media (prefers-color-scheme: dark) {
  .preloader{background:#0B0F14}
}

/* Light mode fallback (though not recommended for this theme) */
@media (prefers-color-scheme: light) {
  .preloader{background:#0B0F14}
}

/* Extended Logo Responsive Design */
@media (max-width: 768px) {
  .extended-logo svg{width:130px; height:32px}
  .extended-logo text{font-size:14px}
}

@media (max-width: 480px) {
  .extended-logo svg{width:120px; height:28px}
  .extended-logo text{font-size:12px}
}

/* Project Category Filtering */
.category-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: rgba(57, 208, 255, 0.1);
  border: 1px solid rgba(57, 208, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.category-item:hover {
  background: rgba(57, 208, 255, 0.2);
  border-color: rgba(57, 208, 255, 0.5);
  transform: translateY(-2px);
}

.category-item.selected {
  background: rgba(57, 208, 255, 0.3);
  border-color: #39D0FF;
  box-shadow: 0 0 20px rgba(57, 208, 255, 0.3);
}

.category-badge {
  background: linear-gradient(135deg, #39D0FF, #00FFFF);
  color: #0B0F14;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 12px;
  min-width: 50px;
  text-align: center;
}

.category-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #E0E6ED;
}

.category-count {
  background: rgba(57, 208, 255, 0.2);
  color: #39D0FF;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.selected-categories {
  margin-top: 20px;
  padding: 16px;
  background: rgba(57, 208, 255, 0.05);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 8px;
}

.selected-categories h4 {
  margin: 0 0 12px 0;
  color: #39D0FF;
  font-size: 14px;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-tag {
  display: flex;
  align-items: center;
  background: rgba(57, 208, 255, 0.2);
  border: 1px solid rgba(57, 208, 255, 0.4);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  color: #E0E6ED;
}

.selected-tag .remove-btn {
  margin-left: 8px;
  background: none;
  border: none;
  color: #FF6B6B;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.selected-tag .remove-btn:hover {
  background: rgba(255, 107, 107, 0.2);
  color: #FF4444;
}

.project-item.hidden {
  display: none;
}

/* Project badges container */
.project-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.project-badges .badge {
  margin: 0;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
}

/* Responsive category filters */
@media (max-width: 768px) {
  .category-filters {
    grid-template-columns: 1fr;
  }
  
  .category-item {
    padding: 10px 12px;
  }
  
  .category-badge {
    font-size: 10px;
    padding: 3px 6px;
    margin-right: 8px;
    min-width: 40px;
  }
  
  .category-name {
    font-size: 13px;
  }
  
  .category-count {
    font-size: 11px;
    padding: 3px 6px;
  }
}

/* FAQ Styles */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  background: rgba(57, 208, 255, 0.05);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
}

.faq-item h4 {
  color: #39D0FF;
  margin: 0 0 10px 0;
  font-size: 16px;
}

.faq-item p {
  margin: 0;
  color: #E0E6ED;
  line-height: 1.6;
}

/* Employer Verification Styles */
.verification-form, .feedback-form {
  background: rgba(57, 208, 255, 0.05);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #39D0FF;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(57, 208, 255, 0.3);
  border-radius: 4px;
  color: #E0E6ED;
  font-size: 14px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #39D0FF;
  box-shadow: 0 0 10px rgba(57, 208, 255, 0.3);
}

.form-group textarea {
  height: 80px;
  resize: vertical;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.benefit-item {
  background: rgba(57, 208, 255, 0.05);
  border: 1px solid rgba(57, 208, 255, 0.2);
  border-radius: 6px;
  padding: 15px;
}

.benefit-item h4 {
  color: #39D0FF;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.benefit-item p {
  margin: 0;
  color: #E0E6ED;
  font-size: 13px;
  line-height: 1.4;
}

/* TOTP Styles */
.totp-display {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(57, 208, 255, 0.3);
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
}

#totpCode {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}