:root{--bg:#0b0b0e;--elev:#121217;--muted:#9aa0a6;--text:#e6eaf0;--accent:#7aa2ff;--accent-2:#65f0b1;--danger:#ff6b6b;--border:#1f2430;--radius:16px;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{margin:0;padding:0;color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}.container.narrow{max-width:560px}
.site-header{position:sticky;top:0;background:rgba(11,11,14,.75);backdrop-filter: blur(8px);border-bottom:1px solid var(--border);z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}.logo{width:28px;height:28px}.brand-name{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:#1a1b22;color:var(--text);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);cursor:pointer;white-space:nowrap;transition:.2s ease}
.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#081218;border-color:transparent;font-weight:700}
.btn.ghost{background:#121217}.btn.danger{background:#29171b;border-color:#3a1d24;color:#ffb1b1}
.hero{padding:30px 0 10px}.hero h1{font-size:clamp(28px,4vw,46px);line-height:1.1;margin:0 0 10px}
.hero .accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}.card{background:var(--elev);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:20px}
.grid{display:grid;gap:14px}.form-grid{grid-template-columns:repeat(12,1fr);align-items:end}
.span-12{grid-column:span 12}.span-8{grid-column:span 12}.span-4{grid-column:span 12}@media(min-width:720px){.span-8{grid-column:span 8}.span-4{grid-column:span 4}}
.field{display:flex;flex-direction:column;gap:6px}
input[type="url"],input[type="text"],input[type="password"]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0e0e13;color:var(--text);outline:none}
input:focus{border-color:var(--accent)}.alert{background:#221a14;border:1px solid #3a2b1c;border-radius:12px;color:#ffd9a0;padding:10px 12px;margin-top:12px}
.result{margin-top:16px}.result-row{display:flex;gap:10px;align-items:center}.result-row input{flex:1}
.features{grid-template-columns:repeat(3,1fr)}@media(max-width:820px){.features{grid-template-columns:1fr}}
.table .t-row{display:grid;grid-template-columns:1.1fr 3fr .7fr 1.6fr 1.3fr;gap:10px;padding:10px;border-bottom:1px dashed var(--border)}
.table .t-head{font-weight:700;color:#cdd7e3;background:#121219;border-radius:8px}
.table .t-row:nth-child(even){background:#0d0e13}.table.responsive .t-row .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-box{border:1px solid var(--border);border-radius:12px;padding:12px;background:#121219}
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:18px 0;color:var(--muted)}