:root {
  --bg: #0a0e14;
  --bg-card: #0f1419;
  --bg-hover: #151b23;
  --border: rgba(124,247,192,0.08);
  --border-hover: rgba(124,247,192,0.2);
  --accent: #00ff88;
  --accent-dim: #7cf7c0;
  --text: #e6edf3;
  --text-dim: rgba(230,237,243,0.5);
  --text-muted: rgba(230,237,243,0.3);
  --easy: #6bcb77;
  --medium: #ffd93d;
  --hard: #ff4757;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', system-ui, sans-serif;
  --radius: 12px;
  --max-w: 1000px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.6;}
a{color:var(--accent-dim);text-decoration:none;}a:hover{color:var(--accent);}

/* Nav */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0.8rem clamp(1rem,4vw,3rem);background:rgba(10,14,20,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-logo{font-family:var(--mono);font-weight:700;font-size:1.1rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
.nav-logo .accent{color:var(--accent);}
.nav-right{display:flex;align-items:center;gap:0.5rem;}
.cipher-count{font-family:var(--mono);font-size:0.7rem;color:var(--text-dim);padding:0.3rem 0.7rem;background:rgba(0,255,136,0.06);border:1px solid var(--border);border-radius:20px;}
.nav-links{display:flex;gap:0.25rem;}
.nav-link{padding:0.4rem 0.9rem;border-radius:8px;font-size:0.85rem;font-weight:500;color:var(--text-dim);cursor:pointer;transition:all 0.2s;}
.nav-link:hover{color:var(--text);background:rgba(124,247,192,0.06);}
.nav-link.active{color:var(--accent);background:rgba(124,247,192,0.1);}

/* Main */
main{position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;padding:0 clamp(1rem,4vw,3rem);min-height:80vh;}
.view{display:none;}.view.active{display:block;animation:fadeIn 0.3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Hero */
.hero{text-align:center;padding:4rem 0 2rem;position:relative;}
.hero::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(0,255,136,0.18) 0%,rgba(0,255,136,0.08) 30%,rgba(0,255,136,0.02) 55%,transparent 75%);pointer-events:none;z-index:-1;filter:blur(20px);}
.hero h1{font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.2;margin-bottom:1rem;}
.hero .thin{font-family:var(--sans);font-weight:300;letter-spacing:-0.02em;}
.hero .accent{font-family:var(--mono);font-weight:700;color:var(--accent);}
.hero .glow{text-shadow:0 0 7px #00ff88,0 0 15px #00ff88,0 0 30px #00ff88,0 0 60px rgba(0,255,136,0.5),0 0 100px rgba(0,255,136,0.3);}
.hero-sub{font-size:1rem;color:var(--text-dim);max-width:480px;margin:0 auto;line-height:1.7;}

/* Difficulty tabs */
.difficulty-tabs{display:flex;justify-content:center;gap:0.4rem;margin-bottom:2rem;}
.diff-tab{padding:0.4rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;color:var(--text-dim);font-family:var(--sans);font-size:0.8rem;font-weight:500;cursor:pointer;transition:all 0.2s;}
.diff-tab:hover{border-color:var(--border-hover);color:var(--text);}
.diff-tab.active{background:rgba(0,255,136,0.1);border-color:var(--accent);color:var(--accent);}

/* Tool sections */
.tool-section{margin-bottom:1rem;}
.section-header{display:flex;align-items:center;gap:0.8rem;margin-bottom:1.2rem;padding-bottom:0.8rem;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.section-icon{font-size:1.6rem;}
.section-title{font-family:var(--mono);font-weight:700;font-size:1.15rem;color:var(--text);margin:0;}
.section-desc{font-size:0.8rem;color:var(--text-muted);margin-left:auto;}
@media(max-width:600px){
  .section-header{flex-direction:column;align-items:flex-start;gap:0.3rem;}
  .section-desc{margin-left:0;font-size:0.75rem;}
  .section-title{font-size:1rem;}
}

/* Cipher grid */
.cipher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem;}
.cipher-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;cursor:pointer;transition:all 0.35s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.cipher-card:hover{border-color:color-mix(in srgb, var(--card-color,var(--accent)) 40%, transparent);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.4),0 0 20px color-mix(in srgb, var(--card-color,var(--accent)) 8%, transparent);}
.cipher-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-color,var(--accent));opacity:0.6;transition:opacity 0.3s;border-radius:var(--radius) var(--radius) 0 0;}
.cipher-card:hover::before{opacity:1;}
.cipher-card::after{content:'';position:absolute;bottom:-50%;right:-50%;width:120%;height:120%;background:radial-gradient(circle,color-mix(in srgb, var(--card-color,var(--accent)) 4%, transparent) 0%,transparent 60%);opacity:0;transition:opacity 0.35s;pointer-events:none;}
.cipher-card:hover::after{opacity:1;}
.cipher-card-icon{font-size:2rem;margin-bottom:0.6rem;display:block;transition:transform 0.3s ease;}
.cipher-card:hover .cipher-card-icon{transform:scale(1.15) rotate(-3deg);}
.cipher-card-name{font-family:var(--mono);font-weight:700;font-size:0.95rem;margin-bottom:0.3rem;color:var(--text);}
.cipher-card-desc{font-size:0.8rem;color:var(--text-dim);line-height:1.5;margin-bottom:0.8rem;}
.cipher-card-diff{font-family:var(--mono);font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;padding:0.2rem 0.6rem;border-radius:4px;display:inline-block;}
.cipher-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.cipher-card-cta{font-family:var(--mono);font-size:0.7rem;color:var(--text-muted);transition:color 0.2s,transform 0.2s;}
.cipher-card:hover .cipher-card-cta{color:var(--accent);transform:translateX(3px);}
.diff-easy{background:rgba(107,203,119,0.15);color:var(--easy);border:1px solid rgba(107,203,119,0.3);}
.diff-medium{background:rgba(255,217,61,0.15);color:var(--medium);border:1px solid rgba(255,217,61,0.3);}
.diff-hard{background:rgba(255,71,87,0.15);color:var(--hard);border:1px solid rgba(255,71,87,0.3);}

/* Back button */
.back-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-family:var(--mono);font-size:0.8rem;cursor:pointer;transition:all 0.2s;margin:1.5rem 0;}
.back-btn:hover{border-color:var(--accent);color:var(--accent);}

/* Cipher container */
#cipher-container{margin-bottom:3rem;}
.cipher-header{margin-bottom:2rem;}
.cipher-header h2{font-family:var(--mono);font-size:1.6rem;margin-bottom:0.5rem;}
.cipher-header .cipher-subtitle{color:var(--text-dim);font-size:0.95rem;line-height:1.6;max-width:700px;}

/* Input area */
.input-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.5rem;}
.input-group label{display:block;font-family:var(--mono);font-size:0.75rem;color:var(--accent-dim);margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.05em;}
.input-group input,.input-group textarea{width:100%;padding:0.7rem;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:var(--text);font-family:var(--mono);font-size:0.9rem;outline:none;transition:border-color 0.2s;}
.input-group input:focus,.input-group textarea:focus{border-color:var(--accent);}
.input-group textarea{resize:vertical;min-height:60px;}
.input-row{display:flex;gap:1rem;flex-wrap:wrap;}
.input-row .input-group{flex:1;min-width:200px;}

/* Action button */
.action-btn{padding:0.6rem 1.5rem;background:var(--accent);color:var(--bg);border:none;border-radius:8px;font-family:var(--mono);font-weight:600;font-size:0.85rem;cursor:pointer;transition:all 0.2s;margin:0.5rem 0.5rem 0 0;}
.action-btn:hover{background:var(--accent-dim);transform:translateY(-1px);}
.action-btn:active{transform:translateY(0);}
.action-btn.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent);}
.action-btn.secondary:hover{background:rgba(0,255,136,0.1);}

/* Visualization area */
.viz-area{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin:1.5rem 0;min-height:120px;overflow-x:auto;}

/* Result area */
.result-area{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;margin:1rem 0;}
.result-label{font-family:var(--mono);font-size:0.7rem;color:var(--accent-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.4rem;}
.result-text{font-family:var(--mono);font-size:1rem;color:var(--accent);word-break:break-all;line-height:1.5;}

/* ─── CAESAR WHEEL ───────────────────── */
.caesar-wheel{display:flex;justify-content:center;align-items:center;padding:1rem 0;}
.wheel-container{position:relative;width:280px;height:280px;}
.wheel-ring{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.outer-ring{width:280px;height:280px;border:2px solid rgba(124,247,192,0.2);}
.inner-ring{width:200px;height:200px;top:40px;left:40px;border:2px solid rgba(255,140,66,0.3);transition:transform 0.5s ease;}
.wheel-letter{position:absolute;font-family:var(--mono);font-weight:600;font-size:0.7rem;width:20px;height:20px;text-align:center;line-height:20px;}
.wheel-letter.outer{color:var(--accent);}
.wheel-letter.inner{color:#ff8c42;}
.wheel-letter.highlight{background:var(--accent);color:var(--bg);border-radius:50%;transform:scale(1.3);box-shadow:0 0 10px rgba(0,255,136,0.5);}
.wheel-letter.highlight-inner{background:#ff8c42;color:var(--bg);border-radius:50%;transform:scale(1.3);box-shadow:0 0 10px rgba(255,140,66,0.5);}

/* ─── LETTER GRID ────────────────────── */
.letter-grid{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;}
.letter-cell{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.8rem;font-weight:600;border-radius:4px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);transition:all 0.3s;}
.letter-cell.plain{color:var(--accent);border-color:rgba(0,255,136,0.2);}
.letter-cell.cipher{color:#ff8c42;border-color:rgba(255,140,66,0.2);}
.letter-cell.active{transform:scale(1.15);box-shadow:0 0 12px rgba(0,255,136,0.3);z-index:1;}
.letter-cell.arrow{background:none;border:none;color:var(--text-muted);font-size:1rem;}

/* ─── VIGENÈRE TABLE ─────────────────── */
.vigenere-table{display:grid;gap:1px;font-family:var(--mono);font-size:0.55rem;overflow-x:auto;}
.vigenere-table .cell{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02);border-radius:2px;transition:all 0.3s;}
.vigenere-table .cell.header{color:var(--accent);font-weight:700;background:rgba(0,255,136,0.06);}
.vigenere-table .cell.row-header{color:#ff8c42;font-weight:700;background:rgba(255,140,66,0.06);}
.vigenere-table .cell.highlight{background:var(--accent);color:var(--bg);font-weight:700;box-shadow:0 0 8px rgba(0,255,136,0.4);transform:scale(1.2);z-index:1;}
.vigenere-table .cell.path-col{background:rgba(0,255,136,0.05);}
.vigenere-table .cell.path-row{background:rgba(255,140,66,0.05);}

/* ─── XOR VISUALIZATION ─────────────── */
.xor-viz{display:flex;flex-direction:column;gap:0.5rem;align-items:center;}
.xor-row{display:flex;gap:2px;align-items:center;}
.xor-bit{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:0.75rem;border-radius:4px;transition:all 0.4s;}
.xor-bit.data{background:rgba(0,255,136,0.1);color:var(--accent);border:1px solid rgba(0,255,136,0.2);}
.xor-bit.key{background:rgba(255,140,66,0.1);color:#ff8c42;border:1px solid rgba(255,140,66,0.2);}
.xor-bit.result{background:rgba(78,168,222,0.1);color:#4ea8de;border:1px solid rgba(78,168,222,0.2);}
.xor-bit.active{transform:scale(1.2);box-shadow:0 0 10px currentColor;}
.xor-label{font-family:var(--mono);font-size:0.65rem;color:var(--text-muted);width:50px;text-align:right;margin-right:8px;}
.xor-op{font-family:var(--mono);font-size:0.8rem;color:var(--text-muted);padding:0.2rem 0;}

/* ─── RSA STEPS ──────────────────────── */
.rsa-steps{display:flex;flex-direction:column;gap:1rem;}
.rsa-step{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:1rem;opacity:0;transform:translateY(10px);transition:all 0.4s ease;}
.rsa-step.visible{opacity:1;transform:translateY(0);}
.rsa-step-title{font-family:var(--mono);font-size:0.8rem;color:var(--accent);margin-bottom:0.4rem;}
.rsa-step-math{font-family:var(--mono);font-size:0.9rem;color:var(--text);margin-bottom:0.3rem;}
.rsa-step-explain{font-size:0.8rem;color:var(--text-dim);}
.rsa-step .num{color:var(--accent);font-weight:700;}

/* ─── BASE64 VIZ ─────────────────────── */
.b64-groups{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;}
.b64-group{display:flex;flex-direction:column;align-items:center;gap:4px;}
.b64-bytes{display:flex;gap:2px;}
.b64-byte{font-family:var(--mono);font-size:0.7rem;padding:0.2rem 0.3rem;border-radius:3px;background:rgba(0,255,136,0.08);color:var(--accent);border:1px solid rgba(0,255,136,0.15);}
.b64-binary{font-family:var(--mono);font-size:0.6rem;color:var(--text-muted);letter-spacing:1px;}
.b64-sextets{display:flex;gap:2px;}
.b64-sextet{font-family:var(--mono);font-size:0.7rem;padding:0.2rem 0.3rem;border-radius:3px;background:rgba(255,140,66,0.08);color:#ff8c42;border:1px solid rgba(255,140,66,0.15);}
.b64-arrow{color:var(--text-muted);font-size:0.8rem;}
.b64-chars{display:flex;gap:2px;}
.b64-char{font-family:var(--mono);font-size:0.85rem;font-weight:700;padding:0.2rem 0.4rem;border-radius:3px;background:rgba(78,168,222,0.1);color:#4ea8de;border:1px solid rgba(78,168,222,0.2);}

/* ─── HASH VIZ ───────────────────────── */
.hash-avalanche{display:grid;grid-template-columns:repeat(32,1fr);gap:1px;}
.hash-bit{width:100%;aspect-ratio:1;border-radius:2px;transition:background 0.3s;min-width:6px;}
.hash-bit.on{background:var(--accent);}
.hash-bit.off{background:rgba(255,255,255,0.04);}
.hash-bit.changed{background:var(--hard);animation:bitFlash 0.5s ease;}
@keyframes bitFlash{0%{transform:scale(1.5);background:#fff;}100%{transform:scale(1);}}

/* ─── RAIL FENCE VIZ ─────────────────── */
.rail-fence-viz{display:flex;flex-direction:column;gap:2px;overflow-x:auto;padding:0.5rem 0;}
.rail-row{display:flex;gap:2px;}
.rail-cell{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.75rem;font-weight:600;border-radius:3px;transition:all 0.3s;}
.rail-cell.filled{background:rgba(0,255,136,0.1);color:var(--accent);border:1px solid rgba(0,255,136,0.2);}
.rail-cell.empty{background:rgba(255,255,255,0.01);}
.rail-cell.path{border:1px dashed rgba(255,255,255,0.1);}

/* ─── COMPLETION ─────────────────────── */
.completion-banner{text-align:center;padding:2rem;margin:1rem 0;border-radius:var(--radius);background:linear-gradient(135deg,rgba(0,255,136,0.08),rgba(0,255,136,0.02));border:1px solid rgba(0,255,136,0.2);animation:completePulse 2s ease infinite;}
.completion-banner .emoji{font-size:3rem;display:block;margin-bottom:0.5rem;}
.completion-banner .msg{font-family:var(--mono);font-size:1rem;color:var(--accent);}
@keyframes completePulse{0%,100%{box-shadow:0 0 20px rgba(0,255,136,0.05);}50%{box-shadow:0 0 40px rgba(0,255,136,0.15);}}

/* Footer */
.footer{display:flex;justify-content:center;align-items:center;gap:0.8rem;padding:2rem;font-size:0.75rem;color:var(--text-muted);border-top:1px solid var(--border);margin-top:3rem;}

/* Scrollbar */
::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:rgba(124,247,192,0.15);border-radius:4px;}

/* Responsive */
/* ─── Animation utilities ─────────────── */
@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(0,255,136,0.05);}50%{box-shadow:0 0 40px rgba(0,255,136,0.2);}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.animate-in{animation:slideUp 0.5s ease both;}

/* ─── Responsive: Tablet ─────────────── */
@media(max-width:900px){
  .cipher-grid{grid-template-columns:repeat(2,1fr);}
}

/* ─── Responsive: Mobile ─────────────── */
@media(max-width:600px){
  main{padding:0 1rem;}
  .nav{padding:0.6rem 1rem;}
  .nav-logo{font-size:0.95rem;}
  .hero{padding:2.5rem 0 1.5rem;}
  .hero h1{font-size:1.8rem;}
  .hero-sub{font-size:0.85rem;}
  .hero::before{width:350px;height:350px;}
  .cipher-grid{grid-template-columns:1fr;gap:0.8rem;}
  .cipher-card{padding:1.1rem;}
  .cipher-card-icon{font-size:1.6rem;margin-bottom:0.4rem;}
  .cipher-card-name{font-size:0.9rem;}
  .cipher-card-desc{font-size:0.78rem;}
  .difficulty-tabs{gap:0.3rem;flex-wrap:wrap;justify-content:center;}
  .diff-tab{padding:0.35rem 0.8rem;font-size:0.75rem;}
  .input-row{flex-direction:column;}
  .input-group{margin-bottom:0.5rem;}
  .input-group label{font-size:0.7rem;}
  .input-group input,.input-group textarea{font-size:0.82rem;padding:0.6rem;}
  .action-btn{font-size:0.8rem;padding:0.5rem 1.2rem;width:100%;text-align:center;margin:0.4rem 0;}
  .action-btn.secondary{width:100%;}
  .viz-area{padding:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .result-area{padding:1rem;}
  .result-text{font-size:0.85rem;}
  .cipher-header h2{font-size:1.3rem;}
  .cipher-header .cipher-subtitle{font-size:0.85rem;}
  .back-btn{font-size:0.75rem;margin:1rem 0;}
  .completion-banner{padding:1.5rem 1rem;}
  .footer{padding:1.5rem 1rem;flex-wrap:wrap;gap:0.4rem;}

  /* Caesar wheel */
  .caesar-wheel{padding:0.5rem 0;}
  .wheel-container{width:220px;height:220px;}
  .outer-ring{width:220px;height:220px;}
  .inner-ring{width:160px;height:160px;top:30px;left:30px;}
  .wheel-letter{font-size:0.6rem;width:18px;height:18px;line-height:18px;}

  /* Letter grids */
  .letter-grid{gap:3px;}
  .letter-cell{width:28px;height:28px;font-size:0.7rem;}

  /* Vigenere table */
  .vigenere-table .cell{width:14px;height:14px;font-size:0.4rem;}

  /* XOR */
  .xor-bit{width:24px;height:24px;font-size:0.65rem;}
  .xor-label{font-size:0.6rem;width:40px;}

  /* RSA / DH steps */
  .rsa-step{padding:0.8rem;}
  .rsa-step-title{font-size:0.75rem;}
  .rsa-step-math{font-size:0.8rem;word-break:break-all;}
  .rsa-step-explain{font-size:0.75rem;}

  /* Rail fence */
  .rail-cell{width:24px;height:24px;font-size:0.65rem;}

  /* Hash avalanche */
  .hash-avalanche{grid-template-columns:repeat(16,1fr);}
  .hash-bit{min-width:4px;}

  /* B64 groups */
  .b64-groups{gap:0.6rem;}
  .b64-byte,.b64-sextet{font-size:0.6rem;padding:0.15rem 0.25rem;}
  .b64-char{font-size:0.7rem;}
  .b64-binary{font-size:0.5rem;}
}

/* ─── HASHLAB ────────────────────────── */
.hash-detect-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }
.hash-detect-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; position: relative; overflow: hidden; }
.hash-detect-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; }
.hash-detect-card.weak::before { background: var(--hard); }
.hash-detect-card.moderate::before { background: var(--medium); }
.hash-detect-card.strong::before { background: var(--easy); }
.hash-detect-card.very-strong::before { background: #4ea8de; }
.hash-type-name { font-family: var(--mono); font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.hash-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.hash-badge { font-family: var(--mono); font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-dim); }
.hash-badge.security { font-weight: 600; }
.hash-badge.security.weak { background: rgba(255,71,87,0.15); color: var(--hard); }
.hash-badge.security.moderate { background: rgba(255,217,61,0.15); color: var(--medium); }
.hash-badge.security.strong { background: rgba(107,203,119,0.15); color: var(--easy); }
.hash-badge.security.very-strong { background: rgba(78,168,222,0.15); color: #4ea8de; }
.hash-desc { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 0.5rem; }
.hash-commands { font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted); }
.hash-commands code { color: var(--accent); background: rgba(0,255,136,0.06); padding: 0.1rem 0.4rem; border-radius: 3px; }

/* Hash generator results */
.hash-results-grid { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.hash-result-row { display: flex; align-items: center; gap: 0.8rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; transition: border-color 0.2s; }
.hash-result-row:hover { border-color: var(--border-hover); }
.hash-algo-name { font-family: var(--mono); font-weight: 600; font-size: 0.8rem; color: var(--accent-dim); min-width: 80px; }
.hash-output { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); word-break: break-all; flex: 1; user-select: all; }
.hash-bits-badge { font-family: var(--mono); font-size: 0.6rem; padding: 0.15rem 0.4rem; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-muted); white-space: nowrap; }
.hash-copy-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.75rem; color: var(--text-dim); transition: all 0.2s; }
.hash-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.hash-copy-btn.copied { border-color: var(--easy); color: var(--easy); }

/* Cracking guide */
.crack-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin: 0.8rem 0; }
.crack-section-title { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.crack-command { font-family: var(--mono); font-size: 0.8rem; background: rgba(0,0,0,0.4); padding: 0.8rem; border-radius: 6px; color: var(--accent); word-break: break-all; position: relative; margin: 0.3rem 0; }
.crack-command .copy-cmd { position: absolute; top: 0.4rem; right: 0.4rem; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.4rem; cursor: pointer; font-size: 0.7rem; color: var(--text-muted); }
.crack-command .copy-cmd:hover { color: var(--accent); border-color: var(--accent); }
.crack-time-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; }
.crack-time-label { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); min-width: 70px; }
.crack-time-fill { height: 8px; border-radius: 4px; transition: width 0.5s ease; }
.crack-time-value { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }
.attack-pipeline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.pipeline-step { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.8rem; font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); text-align: center; transition: all 0.3s; }
.pipeline-step.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(0,255,136,0.15); }
.pipeline-arrow { color: var(--text-muted); font-size: 0.8rem; }

/* Rainbow table */
.rainbow-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--mono); font-size: 0.75rem; }
.rainbow-table th { text-align: left; padding: 0.5rem 0.8rem; color: var(--accent-dim); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.rainbow-table td { padding: 0.4rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-dim); transition: all 0.3s; }
.rainbow-table tr.match td { background: rgba(0,255,136,0.08); color: var(--accent); }
.rainbow-table .hash-col { word-break: break-all; font-size: 0.65rem; }
.salt-demo { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: 1rem 0; }
.salt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.salt-card-label { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-dim); margin-bottom: 0.3rem; }
.salt-card-value { font-family: var(--mono); font-size: 0.7rem; color: var(--text); word-break: break-all; }
.salt-card-hash { font-family: var(--mono); font-size: 0.65rem; color: var(--accent); word-break: break-all; margin-top: 0.3rem; }

/* Collision explorer */
.collision-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.collision-input { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.collision-input-label { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-dim); margin-bottom: 0.3rem; }
.collision-input-data { font-family: var(--mono); font-size: 0.6rem; color: var(--text-dim); word-break: break-all; max-height: 80px; overflow-y: auto; }
.collision-hash { font-family: var(--mono); font-size: 0.75rem; color: var(--hard); margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); word-break: break-all; }
.collision-match { text-align: center; font-family: var(--mono); font-size: 0.9rem; color: var(--hard); padding: 0.5rem; margin-top: 0.5rem; animation: pulseGlow 2s ease infinite; }
.birthday-chart { width: 100%; height: 200px; margin: 1rem 0; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--mono); font-size: 0.7rem; margin: 1rem 0; }
.comparison-table th { text-align: left; padding: 0.5rem 0.6rem; color: var(--accent-dim); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 0.65rem; text-transform: uppercase; }
.comparison-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-dim); }
.comparison-table .status-broken { color: var(--hard); }
.comparison-table .status-weakened { color: var(--medium); }
.comparison-table .status-secure { color: var(--easy); }
.pigeonhole-viz { display: flex; justify-content: center; gap: 2rem; margin: 1rem 0; flex-wrap: wrap; }
.pigeonhole-col { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.pigeonhole-label { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.pigeon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }
.pigeon.input { background: rgba(0,255,136,0.15); border: 1px solid rgba(0,255,136,0.3); }
.pigeon.output { background: rgba(255,71,87,0.15); border: 1px solid rgba(255,71,87,0.3); }
.pigeon.collision { background: var(--hard); color: white; animation: bitFlash 0.5s ease; }

/* Responsive hashlab */
@media(max-width:600px) {
  .hash-detect-cards { grid-template-columns: 1fr; }
  .hash-result-row { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .hash-algo-name { min-width: auto; }
  .hash-bits-badge { align-self: flex-start; }
  .collision-pair { grid-template-columns: 1fr; }
  .salt-demo { grid-template-columns: 1fr; }
  .attack-pipeline { flex-direction: column; }
  .pipeline-arrow { transform: rotate(90deg); }
  .crack-command { font-size: 0.7rem; }
  .rainbow-table { font-size: 0.6rem; }
  .rainbow-table th, .rainbow-table td { padding: 0.3rem 0.4rem; }
}