:root {
  --bg: #f6f7fb; --card: #fff; --text: #101433; --muted: #5a6080; --border: #e6e8f2;
  --brand: #0b63d6; --brand2: #0a4fae; --accent: #12b886; --danger: #d64545;
  --shadow: 0 14px 40px rgba(16, 30, 80, .12);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1120; --card:#171a2b; --text:#eef1fb; --muted:#a2a8c8; --border:#272c45; --shadow:0 16px 44px rgba(0,0,0,.5); }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--brand); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.1rem; }

header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.logo .mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #4aa3ff); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; margin-left: 1.1rem; }
.top nav a:hover { color: var(--text); }

.hero { padding: 3.4rem 0 1.6rem; text-align: center; }
.hero .kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); padding: .3rem .7rem; border-radius: 999px; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; margin: .9rem 0 .5rem; letter-spacing: -.03em; }
.hero p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 1.4rem 0 3rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card .topic { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.card h3 { margin: .5rem 0 .4rem; font-size: 1.12rem; letter-spacing: -.01em; }
.card .sum { color: var(--muted); font-size: .92rem; flex: 1; }
.card .meta { display: flex; gap: .8rem; flex-wrap: wrap; margin: .9rem 0; font-size: .86rem; color: var(--muted); }
.card .meta b { color: var(--text); }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; }
.price { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.price small { font-size: .72rem; font-weight: 600; color: var(--muted); }

.btn { border: none; border-radius: 10px; padding: .62rem 1.05rem; font: inherit; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; box-shadow: 0 8px 20px rgba(11, 99, 214, .35); transition: transform .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--brand); box-shadow: none; border: 1.5px solid var(--border); }
.btn.danger { background: var(--danger); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .88rem; padding: 1.6rem 0; text-align: center; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(10, 14, 30, .55); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.overlay.open { display: flex; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem; width: 100%; max-width: 420px; box-shadow: var(--shadow); }
.modal h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
.modal .sub { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
label { display: block; font-size: .84rem; font-weight: 600; margin: .7rem 0 .25rem; }
input, textarea, select { width: 100%; padding: .6rem .7rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; }
.row { display: flex; gap: .6rem; }
.row > * { flex: 1; }
.note { font-size: .85rem; color: var(--muted); margin-top: .8rem; }
.err { color: var(--danger); font-size: .86rem; min-height: 1.1rem; margin-top: .5rem; }

/* admin */
.section { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.section h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.badge.ok { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.badge.no { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.badge.warn { background: color-mix(in srgb, #d99a00 20%, transparent); color: #d99a00; }
.center { text-align: center; padding: 3rem 1rem; color: var(--muted); }