:root{--bg:linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);--container-bg:#fff;--shadow:0 20px 60px #00000026;--text-primary:#333;--text-secondary:#666;--info-item-bg:#f8f9fa;--info-border:#6b6b6b;--copy-btn-color:#999;--copy-btn-hover:#333}[data-theme=dark]{--bg:linear-gradient(135deg, #1a1a1a 0%, #111 100%);--container-bg:#222;--shadow:0 20px 60px #00000080;--text-primary:#f0f0f0;--text-secondary:#aaa;--info-item-bg:#2d2d2d;--info-border:#888;--copy-btn-color:#666;--copy-btn-hover:#ccc}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;transition:background .3s;display:flex}.app{width:100%;max-width:600px;margin:0 auto}.container{background:var(--container-bg);box-shadow:var(--shadow);border-radius:20px;padding:40px;transition:background .3s,box-shadow .3s;animation:.4s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}header{text-align:center;margin-bottom:32px}.header-top{justify-content:center;align-items:center;gap:12px;margin-bottom:8px;display:flex}header h1{color:var(--text-primary);font-size:2.2rem;font-weight:700}.theme-toggle{background:var(--info-item-bg);cursor:pointer;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;transition:transform .2s;display:flex}.theme-toggle:hover{transform:scale(1.15)}.subtitle{color:var(--text-secondary);font-size:1rem}.last-refreshed{color:var(--text-secondary);opacity:.7;margin-top:4px;font-size:.8rem}.ip-cards{grid-template-columns:1fr;gap:16px;margin-bottom:32px;display:grid}.ip-card{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4a4a4a 0%,#2d2d2d 100%);border-radius:14px;padding:24px 28px;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}.ip-card:after{content:"";opacity:0;background:#ffffff14;transition:opacity .25s;position:absolute;inset:0}.ip-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #00000040}.ip-card:hover:after{opacity:1}.ip-card.ipv6{background:linear-gradient(135deg,#5a5a5a 0%,#3d3d3d 100%)}.ip-card.rdns{background:linear-gradient(135deg,#3a4a5a 0%,#1e2d3d 100%)}.ip-label{opacity:.85;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;font-size:.8rem;font-weight:600}.ip-value{word-break:break-all;font-family:Courier New,monospace;font-size:1.4rem;font-weight:700}.copy-hint{opacity:.7;margin-top:6px;font-family:inherit;font-size:.7rem;font-style:italic;font-weight:400;display:block}.info-section{margin-bottom:28px}.info-section h2{color:var(--text-primary);margin-bottom:14px;font-size:1.2rem;font-weight:700}.info-grid{flex-direction:column;gap:10px;display:flex}.info-item{background:var(--info-item-bg);border-left:3px solid var(--info-border);border-radius:10px;padding:14px 16px;transition:background .3s}.info-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;font-size:.75rem;font-weight:600;display:block}.info-value-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.info-value{color:var(--text-primary);word-break:break-word;flex:1;align-items:center;gap:8px;font-size:.95rem;display:flex}.live-time{font-family:Courier New,monospace;font-size:1.05rem;font-weight:600}.flag{border-radius:2px;flex-shrink:0}.map-link{color:var(--text-primary);border-bottom:1px dashed var(--info-border);font-weight:600;text-decoration:none}.map-link:hover{border-bottom-style:solid}.copy-btn{cursor:pointer;color:var(--copy-btn-color);background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;transition:color .2s,transform .2s;display:flex}.copy-btn:hover{color:var(--copy-btn-hover);transform:scale(1.15)}.copy-btn svg{width:15px;height:15px}.geo-error{color:#856404;background:#fff3cd;border:1px solid #ffc107;border-radius:10px;margin-bottom:20px;padding:12px 16px;font-size:.9rem}.refresh-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4a4a4a 0%,#2d2d2d 100%);border:none;border-radius:10px;width:100%;margin-top:8px;padding:14px;font-size:1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.refresh-btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #0003}.refresh-btn:active{transform:translateY(0)}.loading,.error{text-align:center;padding:60px 20px}.spinner{border:4px solid #f3f3f3;border-top-color:#4a4a4a;border-radius:50%;width:48px;height:48px;margin:0 auto 20px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading p,.error p{color:var(--text-secondary);font-size:1rem}.error h2{color:var(--text-secondary);margin-bottom:10px}.toast{z-index:1000;animation:.3s ease-out toastSlideIn,.3s ease-in 2.7s forwards toastSlideOut;position:fixed;top:20px;left:50%;transform:translate(-50%)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(-50%)translateY(-16px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-16px)}}.toast-content{color:#fff;background:#2d2d2d;border-radius:12px;align-items:center;gap:10px;min-width:180px;padding:14px 22px;font-size:.9rem;font-weight:500;display:flex;box-shadow:0 8px 24px #0000004d}.toast-icon{flex-shrink:0;width:18px;height:18px;animation:.3s ease-out popIn}@keyframes popIn{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@media (width<=600px){.container{padding:24px 20px}header h1{font-size:1.8rem}.ip-value{font-size:1.1rem}}