*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f6f7f9;color:#111}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#fff;border-bottom:1px solid #e8e8e8;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.container{max-width:1080px;margin:24px auto;padding:0 16px}
.card{background:#fff;border:1px solid #ececec;border-radius:10px;padding:20px;margin-bottom:18px}

input,select{width:100%;padding:10px;border:1px solid #d7d7d7;border-radius:8px;margin-bottom:10px;background:#fff}
input:focus,select:focus{outline:none;border-color:#111}

.inline-form{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;align-items:start}
.btn{background:#111;color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}
.btn:hover{opacity:.92}
.btn:disabled{opacity:.65;cursor:not-allowed}
.btn.ghost{background:#eef1f5;color:#111}
.btn.danger{background:#bf1f1f}

.nav{display:flex;gap:8px;flex-wrap:wrap}
.hidden{display:none!important}

.ok,.err{padding:10px 12px;border-radius:8px;margin-bottom:12px}
.ok{background:#eaf9ee;color:#146c2e}
.err{background:#fdecec;color:#9b1d1d}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;font-size:14px;vertical-align:top}

small.code{font-family:Consolas,monospace;font-size:12px;word-break:break-all;display:inline-block;max-width:520px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef1f5;color:#333;font-size:12px}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.links-row{display:flex;gap:12px;flex-wrap:wrap}
.link-btn{background:none;border:none;color:#0b57d0;cursor:pointer;padding:0;font-size:14px}

.settings-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #eee}
.settings-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.plan-card{border:1px solid #e7e7e7;border-radius:10px;padding:14px;background:#fafafa}

.dialog{border:none;border-radius:12px;padding:18px;max-width:460px;width:calc(100% - 24px)}
.dialog::backdrop{background:rgba(0,0,0,.45)}
.qr-wrap img{width:180px;height:180px;border-radius:8px;border:1px solid #eee}
.qr-wrap{margin-bottom:10px}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end}

@media(max-width:860px){
	.inline-form{grid-template-columns:1fr}
	.plans-grid{grid-template-columns:1fr}
}