:root {
color-scheme: light;
--page: #f2f7eb;
--card: #ffffff;
--text: #20291b;
--muted: #5c6755;
--accent: #5f9e16;
--accent-hover: #4d8410;
--border: #dce6d2;
--danger: #a52b2b;
--shadow: 0 14px 38px rgba(40, 62, 24, .12), 0 3px 10px rgba(40, 62, 24, .06);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
margin: 0;
min-height: 100vh;
padding: clamp(16px, 4vw, 48px) 16px;
background: radial-gradient(ellipse at top, #fbfdf7 0, var(--page) 70%);
color: var(--text);
font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.box {
width: min(100%, 680px);
margin: 0 auto;
padding: clamp(22px, 5vw, 40px);
background: var(--card);
border: 1px solid rgba(220, 230, 210, .9);
border-radius: 20px;
box-shadow: var(--shadow);
}
h1, h2 { color: var(--text); line-height: 1.25; }
h1 { margin: 0 0 1.15rem; font-size: clamp(1.65rem, 5vw, 2.15rem); letter-spacing: -.025em; }
h2 { margin: 1.5rem 0 .8rem; font-size: clamp(1.2rem, 4vw, 1.45rem); }
p { margin: .65rem 0; }
label { display: block; margin: 1rem 0 .4rem; font-weight: 650; }
input {
display: block;
width: 100%;
min-height: 46px;
padding: 11px 13px;
color: var(--text);
background: #fff;
border: 1px solid #cbd7c1;
border-radius: 10px;
font: inherit;
}
input::placeholder { color: #77816f; opacity: 1; }
button, .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
max-width: 100%;
padding: 10px 18px;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 10px;
font: inherit;
font-weight: 700;
line-height: 1.3;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active, .btn:active { transform: translateY(1px); }
a { color: #477b0c; text-underline-offset: 3px; }
a:hover { color: #315b06; }
:focus-visible { outline: 3px solid #8abf45; outline-offset: 3px; }
input:focus-visible { border-color: var(--accent); }
.danger { color: var(--danger); }
button.danger, .btn.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
button.danger:hover, .btn.danger:hover { color: #fff; background: #862323; border-color: #862323; }
.msg {
margin: 1rem 0;
padding: 12px 14px;
color: #334326;
background: #f1f8e9;
border: 1px solid #d5e8bf;
border-radius: 10px;
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
form { min-width: 0; }
form button, form .btn { margin-top: 1rem; }
details {
margin: 1rem 0;
padding: 12px 14px;
background: #f8faf5;
border: 1px solid var(--border);
border-radius: 10px;
}
details > summary { cursor: pointer; font-weight: 650; }
@media (max-width: 600px) {
body { padding: 14px 12px; font-size: 16px; }
.box { padding: 22px 18px; border-radius: 16px; }
.row { align-items: stretch; }
.row > button, .row > .btn { flex: 1 1 100%; }
button, .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}Вход администратораВход администратора