:root { --ink:#14213d; --paper:#f7f9fc; --card:#fff; --accent:#1463ff; --line:#dce3f0; --danger:#a71d31; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
.site-header { min-height:64px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fff; color:#5d6980; }
.brand { color:var(--ink); text-decoration:none; font-size:1.25rem; font-weight:800; letter-spacing:-.03em; }
.admin-nav { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.admin-nav a { color:#40506b; font-size:.92rem; text-decoration:none; font-weight:700; }
.admin-nav a[aria-current="page"] { color:var(--accent); }
.instruction { width:min(1120px, 100% - 32px); margin:clamp(28px, 5vw, 72px) auto; }
.intro { max-width:720px; margin-bottom:36px; }
.eyebrow, .step-number { margin:0 0 8px; color:var(--accent); font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2rem, 5vw, 3.8rem); line-height:1.05; letter-spacing:-.045em; }
h2 { margin:0 0 10px; font-size:clamp(1.2rem, 2vw, 1.5rem); line-height:1.2; }
p { line-height:1.6; }
.command-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap:20px; counter-reset:commands; }
.command-card { overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 35px rgba(21, 44, 88, .06); }
.command-card img { width:100%; height:auto; display:block; background:#e9f0ff; }
.command-card div { padding:22px; }
.command-card p:last-child { margin-bottom:0; color:#4d5a71; }
.login-page { min-height:100svh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at top right, #dceaff, transparent 42%), var(--paper); }
.login-card { width:min(460px, 100%); padding:clamp(24px, 7vw, 44px); background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 55px rgba(21, 44, 88, .12); }
.login-card h1 { font-size:clamp(1.8rem, 6vw, 2.6rem); }
label { display:block; margin:24px 0 7px; font-weight:700; }
input { width:100%; padding:14px; border:1px solid #aebbd1; border-radius:10px; color:var(--ink); font:inherit; text-transform:uppercase; letter-spacing:.06em; }
input:focus { outline:3px solid #b9d2ff; border-color:var(--accent); }
button { width:100%; margin-top:16px; padding:14px; border:0; border-radius:10px; color:#fff; background:var(--accent); font:inherit; font-weight:800; cursor:pointer; }
button:hover { background:#0c4ed3; }
.admin-page { width:min(960px, 100% - 32px); margin:clamp(28px, 5vw, 72px) auto; }
.admin-card { margin-top:22px; padding:clamp(20px, 4vw, 32px); background:var(--card); border:1px solid var(--line); border-radius:18px; }
.admin-card h2 { margin-top:0; }
.admin-form textarea { width:100%; padding:12px; border:1px solid #aebbd1; border-radius:10px; color:var(--ink); font:inherit; resize:vertical; }
.admin-form select { width:100%; padding:12px; border:1px solid #aebbd1; border-radius:10px; color:var(--ink); background:#fff; font:inherit; }
.admin-list { display:grid; gap:16px; }
.admin-record { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.admin-record h3 { margin:0; font-size:1.1rem; }
.admin-actions { display:flex; gap:10px; flex-wrap:wrap; }
.admin-actions button { width:auto; flex:1 1 160px; }
.danger-button { background:var(--danger); }
.danger-button:hover { background:#7f1022; }
.notice { padding:12px; border-radius:10px; color:var(--danger); background:#fff0f2; }
code { white-space:nowrap; }
@media (max-width: 480px) { .site-header { padding:0 16px; } .instruction { width:min(100% - 24px, 1120px); } .command-list { gap:14px; } .command-card div { padding:18px; } }
@media (prefers-reduced-motion: no-preference) { .command-card { transition:transform .18s ease, box-shadow .18s ease; } .command-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(21,44,88,.12); } }