*{box-sizing:border-box}:root{--bg:#f5f7fb;--card:#fff;--text:#172033;--muted:#667085;--border:#e4e7ec;--primary:#2563eb;--soft:#eff6ff}[data-theme=dark]{--bg:#0f172a;--card:#182235;--text:#f1f5f9;--muted:#a8b3c4;--border:#2a374c;--primary:#60a5fa;--soft:#172b49}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}header,main{max-width:980px;margin:auto;padding:28px 18px}.brand{font-size:26px;font-weight:800;color:var(--text);text-decoration:none}.brand span{color:var(--primary)}header{display:flex;justify-content:space-between}.theme{width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer;font-size:18px}.hero{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:42px;box-shadow:0 14px 40px #0000000d}.tag{display:inline-block;font-size:11px;font-weight:800;color:var(--primary);background:var(--soft);padding:7px 10px;border-radius:999px}h1{font-size:42px;margin:18px 0 12px}.hero>p{color:var(--muted);font-size:17px;margin-bottom:28px}form{display:flex;gap:10px}input{flex:1;min-width:0;padding:17px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:13px;font-size:16px}form button{border:0;background:var(--primary);color:#fff;font-weight:800;padding:0 24px;border-radius:13px;cursor:pointer}#msg{display:none;margin-top:15px;padding:12px;border-radius:10px;background:var(--soft)}#msg.show{display:block}#result{margin-top:18px;padding:18px;background:var(--soft);border:1px solid #bfdbfe;border-radius:14px}#result small{display:block;color:var(--muted);margin-bottom:6px}#short{display:block;color:var(--primary);font-size:20px;font-weight:800;word-break:break-all;text-decoration:none}#copy{margin-top:12px;padding:11px 15px;background:var(--text);color:var(--card);border:0;border-radius:10px;font-weight:700;cursor:pointer}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.cards article{background:var(--card);border:1px solid var(--border);border-radius:17px;padding:20px}.cards p{margin:7px 0 0;color:var(--muted);font-size:14px;line-height:1.5}footer{text-align:center;color:var(--muted);font-size:13px;padding:25px}@media(max-width:700px){.hero{padding:27px}h1{font-size:32px}form{flex-direction:column}form button{height:52px}.cards{grid-template-columns:1fr}}