:root {
    color-scheme: light;
    --ink: #18332b;
    --muted: #61736d;
    --line: #dce8e2;
    --paper: #ffffff;
    --canvas: #f3f8f5;
    --green: #176b4a;
    --green-dark: #10543a;
    --mint: #d9f2e5;
    --lime: #c6ef73;
    --amber: #b87813;
    --red: #a83d3d;
    --shadow: 0 18px 48px rgba(29, 62, 47, .09);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(ellipse at 88% 4%, #e2f4e8 0, transparent 32rem), var(--canvas); line-height: 1.55; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
button, input, select, textarea { font: inherit; }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: 12px; padding: .7rem 1rem; background: var(--green); color: white; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .16s ease, transform .16s ease; }
button:hover, .button:hover { background: var(--green-dark); color: white; transform: translateY(-1px); }
.button.secondary, button.secondary { color: var(--ink); background: #edf4f0; border: 1px solid var(--line); }
.button.secondary:hover, button.secondary:hover { background: #e2eee7; color: var(--ink); }
.button.danger, button.danger { background: #a83d3d; }
input, select, textarea { width: 100%; max-width: 100%; min-height: 44px; padding: .68rem .8rem; color: var(--ink); background: white; border: 1px solid #cddbd3; border-radius: 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #55a67b; box-shadow: 0 0 0 3px rgba(52, 145, 95, .14); }
textarea { min-height: 120px; resize: vertical; }
label { display: block; margin: .8rem 0; color: #38544a; font-size: .93rem; font-weight: 650; }
label input, label select, label textarea { display: block; margin-top: .35rem; font-weight: 400; }
main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 72px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .55rem; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.045em; }
h2 { margin-bottom: .8rem; font-size: 1.3rem; letter-spacing: -.02em; }
p { color: var(--muted); }
.site-header { width: min(1120px, calc(100% - 40px)); margin: 0 auto; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(197, 216, 204, .7); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: -.025em; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--green); color: white; font-weight: 850; }
.top-nav, .nav-links { display: flex; align-items: center; gap: .55rem; }
.top-nav a, .nav-links a { padding: .55rem .75rem; border-radius: 9px; color: #426057; font-weight: 650; text-decoration: none; }
.top-nav a:hover, .nav-links a:hover, .nav-links a.active { background: #e7f2eb; color: var(--green-dark); }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); gap: 3rem; align-items: center; padding: clamp(2rem, 7vw, 5.5rem) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; color: var(--green); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.hero h1 { max-width: 700px; font-size: clamp(2.8rem, 7vw, 5.3rem); }
.hero-copy { max-width: 590px; font-size: 1.13rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-card, .card, .auth-card, .panel { border: 1px solid rgba(207, 223, 213, .9); border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.hero-card { position: relative; overflow: hidden; min-height: 320px; padding: 1.5rem; background: linear-gradient(145deg, #164e38, #247b54); color: white; }
.hero-card:after { content: ""; position: absolute; width: 230px; height: 230px; right: -55px; bottom: -90px; border: 1px solid rgba(220,255,232,.22); border-radius: 50%; box-shadow: 0 0 0 25px rgba(220,255,232,.05), 0 0 0 55px rgba(220,255,232,.04); }
.hero-card p { position: relative; z-index: 1; color: rgba(255,255,255,.75); }
.hero-card h2 { position: relative; z-index: 1; margin-top: 3.5rem; font-size: 1.75rem; color: white; }
.hero-card .pill { position: relative; z-index: 1; }
.pill, .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .65rem; border-radius: 999px; background: var(--mint); color: #176b4a; font-size: .78rem; font-weight: 750; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 1rem; }
.feature-grid, .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card, .panel { padding: 1.35rem; }
.card h3 { margin-bottom: .35rem; font-size: 1rem; }
.card p { margin-bottom: 0; font-size: .94rem; }
.auth-layout { width: min(950px, 100%); margin: 2rem auto; display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.auth-aside { padding: clamp(1.5rem, 4vw, 3rem); color: white; background: linear-gradient(145deg, #164e38, #247b54); }
.auth-aside h2 { margin-top: 3rem; color: white; font-size: 2rem; }
.auth-aside p { color: rgba(255,255,255,.76); }
.auth-card { padding: clamp(1.4rem, 4vw, 3rem); border: 0; border-radius: 0; box-shadow: none; }
.auth-card h1 { font-size: 2rem; }
.form-stack { display: grid; gap: .4rem; }
.alert { margin: .6rem 0; padding: .8rem 1rem; border: 1px solid #f0caca; border-radius: 11px; background: #fff1f1; color: #8b3030; }
.notice { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid #cce9d7; border-radius: 13px; background: #effaf2; color: #285d3e; }
.notice.warning { border-color: #f0dfb4; background: #fff8e8; color: #765011; }
.dashboard-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-head p { margin-bottom: 0; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 1rem; }
.steps { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.step { display: flex; align-items: center; gap: .85rem; padding: .9rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.step-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #edf2ef; color: #7b8d84; font-weight: 800; }
.step.complete .step-icon { background: var(--mint); color: var(--green); }
.step-copy { flex: 1; font-weight: 700; }
.step-state { color: var(--muted); font-size: .84rem; }
.status-card { display: flex; flex-direction: column; align-items: start; gap: .8rem; }
.status-card .button { margin-top: auto; }
.table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: 14px; background: white; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
th, td { padding: .75rem .8rem; border-bottom: 1px solid #e7eeea; vertical-align: top; }
th { background: #f4f8f5; color: #476056; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdfb; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: white; }
.toolbar label { flex: 1 1 170px; margin: 0; }
.toolbar button { flex: 0 0 auto; }
.toolbar-actions { display: flex; gap: .5rem; align-items: center; }
.review-form { display: grid; min-width: 160px; gap: .35rem; }
.review-form label { margin: 0; }
.review-form-actions { display: flex; gap: .35rem; }
.review-form button { min-height: 34px; padding: .4rem .6rem; font-size: .78rem; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1.4rem 0; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
fieldset { min-width: 0; margin: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: white; }
legend { padding: 0 .4rem; color: var(--green-dark); font-weight: 800; }
fieldset p { font-size: .9rem; }
.settings-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
code { overflow-wrap: anywhere; padding: .18rem .35rem; border-radius: 5px; background: #edf4f0; color: #315344; }
details summary { color: var(--green); cursor: pointer; font-weight: 700; }
pre { max-width: 420px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; }
.site-footer { width: min(1120px, calc(100% - 40px)); margin: 1rem auto 0; padding: 1.2rem 0 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.subtle { color: var(--muted); font-size: .9rem; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.2rem; }
.stack { display: grid; gap: 1rem; }
.family-content { padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: #f8fbf9; white-space: normal; overflow-wrap: anywhere; }
main > h1:first-child { margin-bottom: .35rem; }
main > nav { display: flex; gap: .5rem; margin: 1rem 0; }
main > nav a { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: white; text-decoration: none; font-weight: 700; }
main > ol { display: grid; gap: .6rem; max-width: 720px; margin: 1rem 0; padding: 1rem 1rem 1rem 2.6rem; border: 1px solid var(--line); border-radius: 16px; background: white; }
main > ol li { padding: .35rem; font-weight: 650; }
main > form[method="get"] { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: white; }
main > form[method="get"] label { flex: 1 1 175px; margin: 0; }
main > form[method="get"] button { flex: 0 0 auto; }
main > form:has(fieldset) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
main > form:has(fieldset) > fieldset:last-of-type { grid-column: 1 / -1; }
main > form:has(fieldset) > button { justify-self: end; min-width: 170px; }
main:has(> form[action="login.php"]) { max-width: 520px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }
main:has(> form[action="login.php"]) > form { display: grid; gap: .6rem; }
main table { display: block; width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: white; }
main table form { min-width: 155px; }
main table form input { min-width: 140px; }
main table button { min-height: 34px; padding: .38rem .55rem; font-size: .78rem; }
main > form + form { margin-top: 1rem; }
.auth-card .form-stack label { margin: .55rem 0; }
.auth-card .form-stack button { width: 100%; margin-top: .45rem; }
.panel > h1 { margin-bottom: 1rem; }
.panel .notice { margin-bottom: 1.2rem; }

@media (max-width: 760px) {
    main, .site-header, .site-footer { width: min(100% - 28px, 1120px); }
    main { padding-top: 28px; }
    .hero { grid-template-columns: 1fr; gap: 1.3rem; padding: 2.7rem 0; }
    .hero-card { min-height: 250px; }
    .hero-card h2 { margin-top: 2rem; }
    .feature-grid, .stat-grid { grid-template-columns: 1fr; }
    .auth-layout { grid-template-columns: 1fr; margin-top: .5rem; }
    .auth-aside { padding: 1.4rem; }
    .auth-aside h2 { margin-top: 1.5rem; }
    .dashboard-grid, .settings-grid, main > form:has(fieldset) { grid-template-columns: 1fr; }
    main > form:has(fieldset) > fieldset:last-of-type { grid-column: auto; }
    .dashboard-head { flex-direction: column; }
    .site-header { min-height: 66px; }
    .brand { font-size: .9rem; }
    .top-nav { gap: .15rem; }
    .top-nav a { padding: .45rem .5rem; font-size: .87rem; }
}

@media (max-width: 480px) {
    .top-nav a:first-child { display: none; }
    .hero-actions { display: grid; }
    .hero-actions .button { width: 100%; }
    .section-head { display: block; }
    .settings-actions { align-items: stretch; flex-direction: column; }
    .settings-actions button { width: 100%; }
    .toolbar { align-items: stretch; }
    .toolbar button { width: 100%; }
}