:root {
--bg: #0f1220;
--card: #171a2b;
--muted: #98a2b3;
--text: #e6e7eb;
--accent: #7c5cff;
--accent-2: #22c55e;
--danger: #ef4444;
--border: #252846;
}
* { 
    box-sizing: border-box; 
}
body { 
    margin:0; 
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
header { 
    padding: 28px 20px; 
    text-align:center; 
}
h1 { 
    margin: 0; 
    font-size: clamp(22px, 4vw, 32px); 
}
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px 40px; 
}
.tabs { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
    padding: 10px; 
}
.tab { 
    padding: 12px 16px; 
    border-radius: 12px; 
    text-align: center; 
    cursor: pointer; 
    background: #12162a; 
    border: 1px solid var(--border); 
    transition: .2s; 
}
.tab.active { 
    background: linear-gradient(180deg, #1a1f3d, #12162a); 
    border-color: #3a3e6f; 
    box-shadow: inset 0 0 0 1px #2a2f59; 
}
.grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    gap: 18px; 
    margin-top: 16px; 
}
.card { 
    grid-column: span 12; 
    background: var(--card); 
    border: 1px solid var(--border); 
    border-radius: 16px; 
    padding: 18px; 
}
@media (min-width: 980px){ 
    .card.half { 
        grid-column: span 6; 
    } 
}
label { 
    display:block; 
    font-size: 13px; 
    color: var(--muted); 
    margin-bottom: 8px; 
}
textarea, input[type="password"], input[type="text"] {
    width:100%; 
    background:#0f1327; 
    color:var(--text); 
    border:1px solid var(--border); 
    border-radius:12px; 
    padding:12px; 
    outline:none; 
    min-height: 44px; 
}
textarea { 
    min-height: 120px; 
    resize: vertical; 
}
.row { 
    display:flex; 
    gap:10px; 
    flex-wrap: wrap; 
}
button { 
    background: var(--accent); 
    color: white; 
    border: none; 
    padding: 12px 16px; 
    border-radius: 12px; 
    cursor: pointer; 
    font-weight: 600; 
    transition: .2s; 
}
button:hover { 
    filter: brightness(1.05); 
}
button.ghost { 
    background: transparent; 
    border:1px solid var(--border); 
    color: var(--text); 
}
button.success { 
    background: var(--accent-2); 
}
button.danger { 
    background: var(--danger); 
}
.qr-box { 
    display:grid; 
    place-items:center; 
    background:#0f1327; 
    border:1px dashed #2b2f52; 
    border-radius: 16px; 
    min-height: 260px; 
    padding: 14px; 
}
.muted { 
    color: var(--muted); 
    font-size: 13px; 
}
.divider { 
    height: 1px; 
    background: var(--border); 
    margin: 16px 0; 
}
.hint { 
    background: #10142a; 
    border:1px solid var(--border); 
    padding: 10px 12px; 
    border-radius: 12px; 
    font-size: 13px; 
    color: #a5b4fc; 
}
.footer { 
    text-align:center; 
    font-size:12px; 
    color:var(--muted); 
    margin-top: 24px; 
}
.hidden { 
    display: none !important; 
}