*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;color:#2d3748}.nickname-wrapper{max-width:900px;margin:0 auto;padding:30px 20px}.hero-section{text-align:center;margin-bottom:30px}.hero-title{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#3b82f6,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:-.02em}.hero-subtitle{font-size:.95rem;color:#64748b;font-weight:400}.input-section{margin-bottom:25px}.input-wrapper{position:relative;background:white;border-radius:50px;padding:18px 32px;box-shadow:0 4px 20px rgba(0,0,0,.08);border:2px solid transparent;transition:all .3s ease;min-height:60px;display:flex;align-items:center}.input-wrapper:focus-within{border-color:#e2e8f0;box-shadow:0 6px 24px rgba(0,0,0,.12)}.text-input{width:100%;border:none;outline:none;font-size:1.1rem;font-weight:500;font-family:inherit;background:transparent;padding:0;text-align:center;color:#1e293b}.text-input::-moz-placeholder{color:#cbd5e1;font-weight:400}.text-input::placeholder{color:#cbd5e1;font-weight:400}.results-section{background:white;border-radius:20px;padding:25px;box-shadow:0 10px 30px rgba(0,0,0,.08)}.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.nickname-card{background:#f8fafc;border:2px solid transparent;border-radius:10px;padding:16px 14px;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;text-align:center;position:relative}.nickname-card:hover{border-color:#e2e8f0;background:white;box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}.nickname-text{font-size:1.05rem;color:#1e293b;word-break:break-word;line-height:1.3;-webkit-user-select:all;-moz-user-select:all;user-select:all;font-weight:500}.copy-notification{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(16,185,129,.95);color:white;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s ease-out;will-change:opacity}.copy-notification.show{opacity:1}.notification{position:fixed;bottom:30px;right:30px;background:linear-gradient(135deg,#10b981,#10b981);color:white;padding:16px 28px;border-radius:12px;box-shadow:0 10px 40px rgba(16,185,129,.4);font-weight:600;transform:translateY(100px);opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:1000;display:flex;align-items:center;gap:10px}.notification.show{transform:translateY(0);opacity:1}.empty-state{text-align:center;padding:50px 20px;color:#94a3b8}.empty-icon{font-size:3rem;margin-bottom:15px;opacity:.5}@media (max-width:768px){.hero-title{font-size:2rem}.results-grid{grid-template-columns:1fr}.nickname-text{font-size:.95rem}}@media (max-width:479px){.hero-title{font-size:1.75rem;line-height:1.2}.main-input{padding:1rem 3rem 1rem 1rem;font-size:.95rem}.results-grid{gap:.75rem}.nickname-text{font-size:.875rem;padding:.875rem}.copy-btn{min-width:40px;min-height:40px;padding:.5rem}}@media (hover:none) and (pointer:coarse){.copy-btn{min-height:44px;min-width:44px}.result-card:hover{transform:none}.result-card:active{transform:scale(.98)}}.dark-mode body{background:linear-gradient(135deg,#1a1a1a,#2d3748)}.dark-mode .hero-title{background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dark-mode .hero-subtitle{color:#9ca3af}.dark-mode .input-wrapper{background:#1f2937;border-color:white}.dark-mode .input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 6px 24px rgba(59,130,246,.2)}.dark-mode .text-input{color:#e5e7eb}.dark-mode .text-input::-moz-placeholder{color:#6b7280}.dark-mode .text-input::placeholder{color:#6b7280}.dark-mode .results-section{background:#1f2937;box-shadow:0 10px 30px rgba(0,0,0,.3)}.dark-mode .nickname-card{background:#111827;border-color:#374151}.dark-mode .nickname-card:hover{background:#374151;border-color:#3b82f6;box-shadow:0 4px 12px rgba(59,130,246,.2)}.dark-mode .nickname-text{color:#e5e7eb}.dark-mode .empty-state{color:#6b7280}.dark-mode .notification{background:linear-gradient(135deg,#3b82f6,#3b82f6);box-shadow:0 10px 40px rgba(59,130,246,.4)}