.header{text-align:center;color:#fff;margin-bottom:40px}.header-icon{opacity:.9;justify-content:center;margin-bottom:20px;display:flex}.header-title{text-shadow:0 2px 4px rgba(0,0,0,.3);margin-bottom:10px;font-size:2.5rem;font-weight:700}.header-subtitle{opacity:.8;font-size:1.1rem;font-weight:300}@media (max-width:768px){.header-title{font-size:2rem}.header-subtitle{font-size:1rem}}
.url-input{padding:30px}.input-section{margin-bottom:25px}.input-label{color:#374151;margin-bottom:12px;font-size:14px;font-weight:500;display:block}.url-textarea{resize:vertical;border:2px solid #e5e7eb;border-radius:8px;outline:none;width:100%;min-height:120px;padding:15px;font-family:inherit;font-size:16px;transition:border-color .2s}.url-textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.url-textarea:disabled{cursor:not-allowed;opacity:.6;background-color:#f9fafb}.url-textarea::placeholder{color:#9ca3af;opacity:1}.shorten-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;outline:none;width:100%;padding:15px 20px;font-size:16px;font-weight:600;transition:all .2s}.shorten-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.4)}.shorten-button:active:not(:disabled){transform:translateY(0)}.shorten-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.result-display{background:#f0fdf4;border-top:1px solid #e5e7eb}.result-header{padding:20px 30px 0}.result-title{color:#166534;margin-bottom:15px;font-size:18px;font-weight:600}.result-content{padding:0 30px 30px}.url-container{align-items:stretch;gap:10px;margin-bottom:20px;display:flex}.result-url{color:#374151;background:#fff;border:2px solid #bbf7d0;border-radius:8px;outline:none;flex:1;padding:12px 15px;font-family:Courier New,monospace;font-size:16px}.result-url:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.1)}.copy-button{color:#fff;cursor:pointer;white-space:nowrap;background:#16a34a;border:none;border-radius:8px;outline:none;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.copy-button:hover{background:#15803d;transform:translateY(-1px)}.copy-button:active{transform:translateY(0)}.reset-button{color:#166534;cursor:pointer;background:0 0;border:none;outline:none;padding:5px 0;font-size:14px;font-weight:500;text-decoration:underline;transition:color .2s}.reset-button:hover{color:#15803d}.reset-button:focus{outline-offset:2px;outline:2px solid #16a34a}@media (max-width:480px){.url-container{flex-direction:column}.copy-button{justify-content:center}}
.url-shortener{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.2)}