/* ============================================
   PIN Threat Simulator - Main Stylesheet
   Educational tool for demonstrating PIN authentication vulnerabilities
   Author: ipusiron
   License: MIT
   ============================================ */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
/* Dark Theme (Default) */
:root{
  /* Background colors */
  --bg:#0a0e17; /* Base background */
  --bg-gradient:linear-gradient(135deg, #0a0e17 0%, #141b2d 50%, #1a1f35 100%);

  /* Card/Panel colors */
  --card:rgba(20,27,45,0.6); /* Semi-transparent card background */
  --card-border:rgba(99,102,241,0.2); /* Card border with brand color */

  /* Text colors */
  --muted:#9ca3af; /* Secondary text */
  --accent:#e5e7eb; /* Primary text */

  /* Brand colors */
  --brand:#6366f1; /* Primary brand color (indigo) */
  --brand-glow:rgba(99,102,241,0.4); /* Glow effect for brand */
  --secondary:#8b5cf6; /* Secondary brand color (purple) */

  /* Status colors */
  --success:#10b981; /* Success/green */
  --warning:#f59e0b; /* Warning/amber */
  --error:#ef4444; /* Error/red */

  /* Layout */
  --gap:14px; /* Standard spacing unit */

  /* Ambient effects */
  --glow-ambient:radial-gradient(circle at 20% 50%, rgba(99,102,241,0.08) 0%, transparent 50%),radial-gradient(circle at 80% 80%, rgba(139,92,246,0.06) 0%, transparent 50%);

  /* Typography */
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--accent);
}

/* ============================================
   Light Theme Override
   ============================================ */
[data-theme="light"]{
  --bg:#f0f4ff;
  --bg-gradient:linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 50%, #dbeafe 100%);
  --card:rgba(255,255,255,0.8);
  --card-border:rgba(99,102,241,0.25);
  --muted:#64748b;
  --accent:#1e293b;
  --brand:#6366f1;
  --brand-glow:rgba(99,102,241,0.5);
  --secondary:#8b5cf6;
  --glow-ambient:radial-gradient(circle at 20% 50%, rgba(99,102,241,0.12) 0%, transparent 50%),radial-gradient(circle at 80% 80%, rgba(139,92,246,0.1) 0%, transparent 50%);
}

/* ============================================
   Base Layout & Typography
   ============================================ */
*{box-sizing:border-box} /* Include padding/border in element dimensions */
html,body{height:100%;margin:0}
body{
  display:flex; /* Flexbox for vertical layout */
  flex-direction:column; /* Stack header, main, footer vertically */
  background:var(--bg-gradient);
  background-attachment:fixed; /* Parallax effect - gradient doesn't scroll */
  -webkit-font-smoothing:antialiased; /* Better font rendering on macOS */
  padding:24px;
  align-items:center; /* Center content horizontally */
  position:relative; /* Positioning context for ::before overlay */
  transition:background 0.3s ease; /* Smooth theme transition */
}

/* Ambient glow overlay */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--glow-ambient);
  pointer-events:none; /* Don't block clicks */
  z-index:0;
  transition:background 0.3s ease;
}

/* ============================================
   Header and Navigation
   ============================================ */
/* Main content container - max width 1400px for readability */
body > *{
  width:100%;
  max-width:1400px; /* Prevents excessively wide layouts on large screens */
  position:relative;
  z-index:1; /* Above ambient overlay */
}

.header{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px;position:relative}
.title{text-align:center}
/* Gradient text effect for main title */
.title h1{margin:0;font-size:40px;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg, #818cf8 0%, #c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 40px rgba(99,102,241,0.3)}
.subtitle{margin:8px 0 0;font-size:16px;color:var(--muted);font-weight:400;line-height:1.6;letter-spacing:0.3px}
/* Actions area (theme toggle + export buttons) positioned absolutely in top-right */
.actions{position:absolute;top:0;right:0;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
/* Circular theme toggle button */
.theme-toggle{width:48px;height:48px;border-radius:50%;border:2px solid var(--card-border);background:var(--card);backdrop-filter:blur(10px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.1);color:#fbbf24;text-shadow:0 0 8px rgba(251,191,36,0.6)}
.theme-toggle:hover{box-shadow:0 0 20px var(--brand-glow);transform:scale(1.05)}

/* Dark mode: moon icon with blue glow */
[data-theme="dark"] .theme-toggle{color:#60a5fa;text-shadow:0 0 12px rgba(96,165,250,0.8)}
[data-theme="dark"] .theme-toggle:hover{color:#93c5fd;text-shadow:0 0 16px rgba(147,197,253,0.9)}

/* Light mode: sun icon with warm glow */
[data-theme="light"] .theme-toggle{color:#f59e0b;text-shadow:0 0 12px rgba(245,158,11,0.8)}
[data-theme="light"] .theme-toggle:hover{color:#fbbf24;text-shadow:0 0 16px rgba(251,191,36,0.9)}

/* Export buttons in actions area */
.actions button{padding:8px 12px;border-radius:8px;border:1px solid rgba(99,102,241,0.3);background:rgba(99,102,241,0.1);backdrop-filter:blur(10px);color:var(--accent);cursor:pointer;transition:all 0.3s;font-size:13px;white-space:nowrap;font-weight:500}
.actions button:hover{background:rgba(99,102,241,0.2);border-color:rgba(99,102,241,0.5);box-shadow:0 0 20px rgba(99,102,241,0.3);transform:translateY(-2px)}
.actions button:active{transform:translateY(0);box-shadow:0 0 10px rgba(99,102,241,0.2)}

/* ============================================
   Tab Navigation System
   ============================================ */
/* Main tabs with animated underline indicator */
.tabs{display:flex;gap:6px;margin-bottom:24px;border-bottom:2px solid var(--card-border);position:relative;--tab-indicator-left:0px;--tab-indicator-width:100px}
/* Animated underline that follows active tab */
.tabs::after{content:'';position:absolute;bottom:-2px;left:var(--tab-indicator-left);height:2px;width:var(--tab-indicator-width);background:linear-gradient(90deg, var(--brand), var(--secondary));transition:all 0.3s ease;box-shadow:0 0 10px var(--brand-glow)}
.tab{background:transparent;border:none;padding:14px 24px;cursor:pointer;transition:all 0.3s;font-weight:500;color:var(--muted);position:relative;font-size:14px}
.tab:hover{background:rgba(99,102,241,0.1);color:var(--accent);border-radius:8px 8px 0 0}
.tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* Keyboard navigation accessibility */
.tab.active{color:var(--brand);font-weight:600;z-index:1}

/* Subtabs (used in some layouts for secondary navigation) */
.subtabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.subtab{background:rgba(99,102,241,0.08);border:1px solid var(--card-border);padding:10px 20px;border-radius:8px;cursor:pointer;transition:all 0.3s;font-weight:500;color:var(--muted);font-size:13px}
.subtab:hover{background:rgba(99,102,241,0.15);color:var(--accent);border-color:var(--brand)}
.subtab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.subtab.active{background:linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2));color:var(--brand);border-color:var(--brand);font-weight:600;box-shadow:0 0 12px var(--brand-glow)}
.subtab-panel{display:block}
.subtab-panel.hidden{display:none}

/* ============================================
   Main Content Area
   ============================================ */
.main{background:transparent;padding:0;margin-bottom:40px}
.tab-panel{padding:12px 0}
.tab-panel h2{margin:0 0 24px;padding-bottom:12px;border-bottom:2px solid rgba(99,102,241,0.2);font-size:20px;font-weight:700;color:var(--accent);letter-spacing:-0.5px}
.hidden{display:none} /* Utility class for hiding elements */

/* ============================================
   Layout Containers
   ============================================ */
.panel{display:block;gap:16px}
/* Two-column responsive grid layout */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Three-column layout with specific width constraints */
.three-col{display:grid;grid-template-columns:minmax(240px, 1fr) minmax(280px, 1.5fr) minmax(300px, 1.2fr);gap:16px}
.sim-bottom{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}

/* ============================================
   Card Components
   ============================================ */
/* Primary card: semi-transparent with backdrop blur (glassmorphism effect) */
.card{background:var(--card);backdrop-filter:blur(10px);padding:20px;border-radius:12px;box-shadow:0 4px 16px rgba(99,102,241,0.15);border:1px solid var(--card-border)}
.card h3{margin-top:0;color:var(--accent);font-size:16px;font-weight:600}
/* Smaller inline cards for grouped content */
.card-mini{background:rgba(99,102,241,0.08);padding:12px;border-radius:10px;margin-bottom:10px;border:1px solid var(--card-border)}

/* ============================================
   Interactive UI Components
   ============================================ */
/* Digit picker: grid of selectable digit buttons (0-9) */
.digit-pick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.digit{width:44px;height:44px;border-radius:8px;border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;background:var(--card);backdrop-filter:blur(10px);color:var(--accent);cursor:pointer;transition:all 0.3s;font-size:16px;font-weight:700}
.digit:hover{background:rgba(99,102,241,0.15);border-color:var(--brand);box-shadow:0 0 16px var(--brand-glow);transform:scale(1.05)}
.digit:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Selected state: gradient background with glow */
.digit.on{background:linear-gradient(135deg, var(--brand), var(--secondary));color:#fff;border-color:var(--brand);box-shadow:0 0 20px var(--brand-glow)}

/* ============================================
   Form Controls and Buttons
   ============================================ */
.form-row{margin:10px 0;display:flex;flex-direction:column;gap:6px}
/* Horizontal button group with wrapping */
.buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Standard button styling */
.buttons button{padding:8px 12px;border-radius:8px;border:1px solid rgba(99,102,241,0.3);background:rgba(99,102,241,0.1);backdrop-filter:blur(10px);color:var(--accent);cursor:pointer;transition:all 0.3s;font-size:13px;white-space:nowrap;min-width:auto;font-weight:500}
.buttons button:hover{background:rgba(99,102,241,0.2);border-color:rgba(99,102,241,0.5);box-shadow:0 0 20px rgba(99,102,241,0.3);transform:translateY(-2px)}
.buttons button:active{transform:translateY(0);box-shadow:0 0 10px rgba(99,102,241,0.2)} /* Push down on click */
.buttons button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Primary action buttons: gradient with enhanced glow */
.buttons button.primary{background:linear-gradient(135deg, var(--brand), var(--secondary));color:#fff;border-color:var(--brand);font-weight:600;box-shadow:0 4px 12px var(--brand-glow)}
.buttons button.primary:hover{background:linear-gradient(135deg, #7c3aed, #a855f7);box-shadow:0 0 24px var(--brand-glow);transform:translateY(-2px) scale(1.02)}

/* ============================================
   Results Display Components
   ============================================ */
.result-row{margin:8px 0}
/* General result box for displaying analysis output */
.result-box{margin-top:12px;padding:12px;background:rgba(99,102,241,0.08);border:1px solid var(--card-border);border-radius:8px;min-height:40px;color:var(--accent);font-size:14px;line-height:1.6}
/* Calculation steps display with dashed border for visual distinction */
.steps{background:rgba(99,102,241,0.08);padding:16px;border-radius:8px;border:1px dashed var(--card-border);color:var(--accent);font-size:13px;line-height:1.8;max-height:400px;overflow-y:auto}

/* Candidates list frame with header */
.candidates-frame{margin-top:16px;border:1px solid var(--card-border);border-radius:10px;background:rgba(99,102,241,0.05);overflow:hidden}
.candidates-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--card-border);background:rgba(99,102,241,0.08)}
.candidates-header h4{margin:0;font-size:14px;font-weight:600;color:var(--accent)}
/* Compact CSV export button in candidates header */
.csv-export-btn{padding:6px 12px;border-radius:6px;border:1px solid rgba(99,102,241,0.3);background:rgba(99,102,241,0.1);color:var(--accent);cursor:pointer;transition:all 0.3s;font-size:12px;font-weight:600;white-space:nowrap}
.csv-export-btn:hover{background:rgba(99,102,241,0.2);border-color:var(--brand);box-shadow:0 0 12px rgba(99,102,241,0.3);transform:translateY(-1px)}

/* Scrollable candidates list */
.candidates{display:flex;flex-wrap:wrap;gap:6px;max-height:300px;overflow-y:auto;padding:12px}
/* Custom scrollbar styling for webkit browsers */
.candidates::-webkit-scrollbar{width:8px}
.candidates::-webkit-scrollbar-track{background:rgba(99,102,241,0.1);border-radius:4px}
.candidates::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.4);border-radius:4px}
.candidates::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,0.6)}
/* Individual candidate chip with monospace font for PIN display */
.candidate{background:rgba(99,102,241,0.15);padding:6px 10px;border-radius:6px;border:1px solid var(--card-border);font-family:'JetBrains Mono',Consolas,monospace;color:var(--accent);font-size:13px}

/* ============================================
   Keypad Simulation Components
   ============================================ */
/* Fingerprint analysis keypad: 3×4 grid layout */
.finger-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px;padding:6px}
.finger-key{height:56px;border-radius:10px;background:var(--card);backdrop-filter:blur(10px);border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all 0.3s;font-size:18px;font-weight:700;color:var(--accent)}
.finger-key:hover{border-color:var(--brand);box-shadow:0 0 20px var(--brand-glow);transform:scale(1.03)}
.finger-key:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Density value displayed in bottom-left corner of each key */
.finger-key .density{position:absolute;bottom:4px;left:4px;font-size:11px;color:var(--muted)}

/* Thermal analysis controls and canvas */
.thermal-controls{display:flex;align-items:center;gap:8px;margin-bottom:8px}
/* Thermal heatmap canvas with dark gradient background */
#thermal-canvas{background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);border-radius:12px;display:block;border:1px solid rgba(99,102,241,0.3);box-shadow:0 4px 16px rgba(0,0,0,0.4)}

/* Random keypad canvas - always clickable */
#random-keypad{cursor:pointer}

/* ============================================
   Footer
   ============================================ */
.app-footer{margin-top:auto;padding-top:24px} /* Push footer to bottom with flexbox */
.footer{color:var(--muted);font-size:14px;text-align:center;opacity:0.8;padding:20px 0 24px}
.footer a{color:var(--brand);text-decoration:none;transition:all 0.2s}
.footer a:hover{color:var(--secondary);text-shadow:0 0 8px rgba(99,102,241,0.5)}

/* ============================================
   Toast Notifications
   ============================================ */
/* Fixed position toast in top-right corner with slide-in animation */
.toast{position:fixed;top:24px;right:24px;background:rgba(99,102,241,0.95);backdrop-filter:blur(20px);color:#fff;padding:14px 20px;border-radius:12px;box-shadow:0 8px 32px rgba(99,102,241,0.5);border:1px solid rgba(99,102,241,0.6);z-index:1000;animation:slideIn 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);max-width:360px;font-weight:500}
/* Toast type variants with color-coded backgrounds */
.toast.info{background:rgba(99,102,241,0.95);border-color:rgba(99,102,241,0.6);box-shadow:0 8px 32px rgba(99,102,241,0.5);color:#fff}
.toast.error{background:rgba(239,68,68,0.95);border-color:rgba(239,68,68,0.6);box-shadow:0 8px 32px rgba(239,68,68,0.5);color:#fff}
.toast.success{background:rgba(16,185,129,0.95);border-color:rgba(16,185,129,0.6);box-shadow:0 8px 32px rgba(16,185,129,0.5);color:#fff}
.toast.warning{background:rgba(245,158,11,0.95);border-color:rgba(245,158,11,0.6);box-shadow:0 8px 32px rgba(245,158,11,0.5);color:#fff}
/* Toast animations with elastic easing for bounce effect */
@keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(400px);opacity:0}}

/* ============================================
   Form Input Elements
   ============================================ */
/* Text inputs, number inputs, and selects with consistent styling */
input[type="number"],input[type="text"],select{padding:10px 14px;border:1px solid var(--card-border);border-radius:8px;font-size:14px;transition:all 0.3s;width:100%;background:var(--card);backdrop-filter:blur(10px);color:var(--accent)}
input[type="number"]:focus,input[type="text"]:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 16px var(--brand-glow)}
/* Range slider with brand-colored track */
input[type="range"]{accent-color:var(--brand);height:6px;background:rgba(99,102,241,0.2);border-radius:3px}
/* Checkboxes with brand color */
input[type="checkbox"]{accent-color:var(--brand);width:18px;height:18px;cursor:pointer}
label{font-size:14px;font-weight:500;color:var(--accent)}
select{cursor:pointer}
option{background:var(--bg);color:var(--accent)}

/* ============================================
   Specialized UI Components
   ============================================ */
/* Security checklist with checkbox format */
.checklist{list-style:none;padding:0;margin:12px 0}
.checklist li{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;background:rgba(99,102,241,0.05);border:1px solid var(--card-border);border-radius:8px;transition:all 0.3s}
.checklist li:hover{background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.4)}
.checklist li input[type="checkbox"]{margin:0;flex-shrink:0}

/* ============================================
   Tooltip System
   ============================================ */
/* Help icon with question mark */
.help-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(99,102,241,0.2);border:1px solid rgba(99,102,241,0.4);color:var(--brand);font-size:12px;font-weight:700;cursor:help;margin-left:6px;transition:all 0.3s;flex-shrink:0}
.help-icon:hover{background:rgba(99,102,241,0.3);border-color:var(--brand);box-shadow:0 0 12px rgba(99,102,241,0.4);transform:scale(1.1)}
.tooltip-wrapper{position:relative;display:inline-flex;align-items:center;z-index:10}
/* Bring tooltip wrapper to front when hovering */
.tooltip-wrapper:hover{z-index:2000}
/* Tooltip bubble appears on hover with elastic animation */
.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(20,27,45,0.98);backdrop-filter:blur(20px);color:#e5e7eb;padding:12px 16px;border-radius:10px;border:1px solid rgba(99,102,241,0.4);box-shadow:0 8px 24px rgba(0,0,0,0.6);font-size:13px;line-height:1.6;white-space:normal;width:max-content;max-width:min(400px, calc(100vw - 48px));z-index:10001;opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(0.68,-0.55,0.265,1.55)}
/* Tooltip arrow pointing down */
.tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(20,27,45,0.98)}
/* Light theme tooltip variant */
[data-theme="light"] .tooltip{background:rgba(255,255,255,0.98);color:#1e293b;border-color:rgba(99,102,241,0.5);box-shadow:0 8px 24px rgba(99,102,241,0.25)}
[data-theme="light"] .tooltip::after{border-top-color:rgba(255,255,255,0.98)}
.tooltip-wrapper:hover .tooltip{opacity:1;bottom:calc(100% + 12px)} /* Slide up on hover */
.label-with-help{display:flex;align-items:center;gap:4px}

/* ============================================
   Attack Simulation Tab Layout
   ============================================ */
/* Two-column layout: attack methods grid on left, analysis panel on right */
.sim-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
/* 2×2 grid of attack method cards */
.attack-methods{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Color-coded left borders to visually distinguish attack types */
.attack-card{min-height:480px;border-left:3px solid transparent;transition:border-color 0.3s;position:relative;z-index:1}
.attack-card:hover{z-index:10002}
.attack-card:nth-child(1){border-left-color:rgba(99,102,241,0.5)} /* Blue - Fingerprint */
.attack-card:nth-child(2){border-left-color:rgba(239,68,68,0.5)} /* Red - Thermal */
.attack-card:nth-child(3){border-left-color:rgba(16,185,129,0.5)} /* Green - Acoustic */
.attack-card:nth-child(4){border-left-color:rgba(245,158,11,0.5)} /* Orange - Video */
.attack-card h3{font-size:15px;margin:0 0 12px}
/* Sticky analysis panel stays visible while scrolling */
.analysis-panel{position:sticky;top:20px}

/* Tooltip positioning fix for attack cards */
.attack-card .tooltip-wrapper{overflow:visible;z-index:10003}
.attack-card .tooltip-wrapper:hover{z-index:10003}
.attack-card .tooltip{left:0;transform:translateX(0);z-index:10003}
.attack-card:nth-child(2) .tooltip,
.attack-card:nth-child(4) .tooltip{left:auto;right:0}
.attack-card .tooltip::after{left:24px;transform:translateX(0)}
.attack-card:nth-child(2) .tooltip::after,
.attack-card:nth-child(4) .tooltip::after{left:auto;right:24px}

/* Dynamic tooltip positioning classes - high priority */
.tooltip.tooltip-left{left:0 !important;transform:translateX(0) !important;transition:opacity 0.3s cubic-bezier(0.68,-0.55,0.265,1.55), bottom 0.3s cubic-bezier(0.68,-0.55,0.265,1.55) !important}
.tooltip.tooltip-left::after{left:24px !important;right:auto !important;transform:translateX(0) !important}
.tooltip.tooltip-right{left:auto !important;right:0 !important;transform:translateX(0) !important;transition:opacity 0.3s cubic-bezier(0.68,-0.55,0.265,1.55), bottom 0.3s cubic-bezier(0.68,-0.55,0.265,1.55) !important}
.tooltip.tooltip-right::after{left:auto !important;right:24px !important;transform:translateX(0) !important}

/* PIN ranking list with scrollable container */
.pin-ranking{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;padding:4px}
.pin-rank-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(99,102,241,0.08);border:1px solid var(--card-border);border-radius:8px;transition:all 0.3s}
.pin-rank-item:hover{background:rgba(99,102,241,0.15);border-color:var(--brand);box-shadow:0 0 12px rgba(99,102,241,0.2)}
/* Circular rank number badge with gradient */
.pin-rank-number{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, var(--brand), var(--secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;box-shadow:0 2px 8px rgba(99,102,241,0.3)}
/* PIN value in monospace font */
.pin-rank-value{flex:1;font-family:'JetBrains Mono',Consolas,monospace;font-size:15px;font-weight:600;color:var(--accent);letter-spacing:1px}
/* Score badge */
.pin-rank-score{flex-shrink:0;padding:4px 10px;background:rgba(99,102,241,0.15);border-radius:6px;font-size:12px;font-weight:600;color:var(--brand)}

/* ============================================
   Responsive Design
   ============================================ */
/* Tablet breakpoint: stack simulation layout vertically */
@media (max-width:1200px){
  .sim-layout{grid-template-columns:1fr;gap:16px}
  .analysis-panel{position:relative;top:0} /* Disable sticky positioning on small screens */
  .attack-methods{grid-template-columns:1fr}
}

/* Mobile breakpoint: single column for all multi-column layouts */
@media (max-width:900px){
  .two-col,.three-col{grid-template-columns:1fr}
  .actions{flex-wrap:wrap;justify-content:center}
  .actions button{min-width:auto}
}

/* Small mobile breakpoint: stack header vertically */
@media (max-width:600px){
  .header{flex-direction:column;align-items:stretch;gap:16px;position:relative}
  .title{text-align:center;margin-bottom:8px}
  .title h1{font-size:32px}
  .subtitle{font-size:14px}
  .actions{position:static;flex-direction:row;justify-content:center;gap:12px;margin-top:8px}
  .actions button{font-size:12px;padding:6px 10px}
}