/* css/styles.css */
:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --accent: #0b74de;
  --muted: #6b7280;
  --radius: 8px;
  --shadow: 0 6px 18px rgba(11, 116, 222, 0.06);
  --maxw: 420px;
  --maxw-admin: 1000px;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font);background:var(--bg);color:#111}
.center-viewport{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;width:100%;max-width:var(--maxw)}
h1{font-size:18px;margin:0 0 10px}
label{display:block;font-size:13px;margin-top:10px;color:#222}
.input{width:100%;padding:10px;margin-top:6px;border:1px solid #e6e9ee;border-radius:6px;font-size:14px}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;width:100%}
.note{font-size:12px;color:var(--muted);margin-top:10px}

/* admin panel */
.admin-wrap{max-width:var(--maxw-admin);margin:20px auto}
.topbar{display:flex;justify-content:space-between;align-items:center}
.topbar .meta{font-size:14px;color:var(--muted)}
.link-btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none;display:inline-block}

/* small helpers */
.row{display:flex;gap:12px;align-items:center}
.col{flex:1}
footer{margin-top:12px;font-size:13px;color:var(--muted)}