/* Training Intelligence — PIN Lock Screen */
/* ===== PIN LOCK SCREEN - MODERN REDESIGN ===== */
.pin-overlay{position:fixed;inset:0;background:var(--bg-primary);z-index:9999;overflow:hidden}
.pin-overlay.hidden{display:none}
.pin-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(139,92,246,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(139,92,246,0.1) 0%,transparent 50%);pointer-events:none}
/* Desktop View (default) */
.pin-desktop-view{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--gap-lg);position:relative;z-index:1}
.pin-mobile-view{display:none}
.pin-container{text-align:center;max-width:360px;width:100%}
.pin-brand{margin-bottom:var(--gap-lg)}
.pin-logo-animated{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,var(--accent) 0%,#6d28d9 100%);border-radius:var(--radius-lg);margin-bottom:var(--gap-md);box-shadow:0 0 40px rgba(139,92,246,0.4),inset 0 1px 0 rgba(255,255,255,0.1);animation:logoPulse 3s ease-in-out infinite}
.pin-logo-animated.large{width:100px;height:100px}
.logo-letter{font-size:28px;font-weight:700;color:white;letter-spacing:-2px}
.pin-logo-animated.large .logo-letter{font-size:36px}
@keyframes logoPulse{0%,100%{box-shadow:0 0 40px rgba(139,92,246,0.4),inset 0 1px 0 rgba(255,255,255,0.1);transform:scale(1)}50%{box-shadow:0 0 60px rgba(139,92,246,0.6),inset 0 1px 0 rgba(255,255,255,0.1);transform:scale(1.02)}}
.pin-title{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:var(--gap-xs);letter-spacing:-0.5px}
.pin-subtitle{font-size:14px;color:var(--text-secondary)}
.pin-card{background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);padding:var(--gap-lg);margin-top:var(--gap-lg)}
.pin-dots{display:flex;justify-content:center;gap:16px;margin-bottom:var(--gap-lg)}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-color);background:transparent;transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}
.pin-dot.filled{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(139,92,246,0.5);animation:dotFill 0.2s ease-out}
.pin-dot.error{border-color:var(--error);background:var(--error);animation:shake 0.4s ease-out}
@keyframes dotFill{0%{transform:scale(0.8)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:260px;margin:0 auto}
.pin-key{width:72px;height:72px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-primary);font-size:26px;font-weight:600;cursor:pointer;transition:all 0.15s ease;font-family:inherit;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pin-key::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,var(--accent-muted) 0%,transparent 70%);opacity:0;transition:opacity 0.2s ease}
.pin-key:hover{border-color:var(--accent);transform:scale(1.05)}
.pin-key:hover::before{opacity:1}
.pin-key:active{transform:scale(0.95);background:var(--bg-surface-hover)}
.pin-key.action{font-size:14px;background:var(--bg-elevated)}
.pin-key.action svg{width:20px;height:20px}
.pin-key.action.accent{background:var(--accent);border-color:var(--accent);color:white}
.pin-key.action.accent:disabled{opacity:0.3;cursor:not-allowed;transform:none}
.pin-key.action.accent:not(:disabled):hover{background:var(--accent-hover);box-shadow:0 0 20px rgba(139,92,246,0.4)}
.pin-error{color:var(--error);font-size:13px;margin-top:var(--gap-md);min-height:20px;font-weight:500}
.pin-footer{margin-top:var(--gap-lg)}
.pin-version{font-size:11px;color:var(--text-tertiary)}
/* Mobile View */
.pin-mobile-view{display:none;align-items:center;justify-content:center;min-height:100vh;padding:var(--gap-lg);position:relative;z-index:1}
.pin-mobile-container{text-align:center;max-width:320px;width:100%}
.pin-mobile-logo{margin-bottom:var(--gap-lg)}
.pin-mobile-title{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:var(--gap-xs)}
.pin-mobile-tagline{font-size:13px;color:var(--text-secondary);margin-bottom:var(--gap-lg)}
.pin-mobile-card{background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);padding:var(--gap-lg)}
.pin-mobile-icon{color:var(--accent);margin-bottom:var(--gap-md)}
.pin-mobile-heading{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:var(--gap-sm)}
.pin-mobile-text{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--gap-md)}
.pin-mobile-hint{display:flex;align-items:center;justify-content:center;gap:var(--gap-sm);padding:var(--gap-sm) var(--gap-md);background:var(--accent-muted);border-radius:var(--radius-sm);font-size:12px;color:var(--accent)}
.pin-mobile-footer{margin-top:var(--gap-lg);font-size:11px;color:var(--text-tertiary)}
/* Buy Me A Coffee - Mobile Version (Subtle Purple) */
.bmc-mobile-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;margin-top:var(--gap-md);background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.25);border-radius:var(--radius-sm);color:var(--accent);font-size:11px;font-weight:500;text-decoration:none;transition:all var(--transition-fast)}
.bmc-mobile-btn:hover,.bmc-mobile-btn:active{background:rgba(139,92,246,0.2);border-color:rgba(139,92,246,0.4);color:var(--accent-hover)}
.bmc-mobile-btn svg{width:12px;height:12px;flex-shrink:0;opacity:0.8}
/* Mobile breakpoint */
@media(max-width:767px){.pin-desktop-view{display:none}.pin-mobile-view{display:flex}.app-container{display:none!important}}
/* Tablet adjustments */
@media(min-width:768px) and (max-width:1024px){.pin-key{width:64px;height:64px;font-size:24px}.pin-keypad{gap:10px;max-width:230px}}