:root {
--bg:#f4f6f8;
--panel:#fff;
--ink:#172033;
--muted:#687386;
--line:#dce2e8;
--accent:#2563eb;
--accent-dark:#174bb8;
--soft:#eaf1ff;
--danger:#b42318;
--ok:#087a4b;
--radius:18px;
--shadow:0 12px 32px rgba(23,32,51,.07)}
* {
box-sizing:border-box}
body {
margin:0;
background:var(--bg);
color:var(--ink);
font-family:Inter,Segoe UI,Arial,sans-serif;
line-height:1.5}
a {
color:var(--accent);
text-decoration:none}
button,input,select,textarea {
font:inherit}
.site-header {
height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 max(28px,calc((100vw - 1180px)/2));
background:rgba(255,255,255,.92);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:5;
backdrop-filter:blur(10px)}
.brand {
font-size:23px;
font-weight:800;
color:var(--ink);
letter-spacing:-1px}
.brand span {
color:var(--accent)}
.container {
max-width:1180px;
min-height:calc(100vh - 150px);
margin:auto;
padding:48px 28px}
footer {
max-width:1180px;
margin:auto;
padding:28px;
display:flex;
justify-content:space-between;
gap:20px;
color:var(--muted);
font-size:14px;
border-top:1px solid var(--line)}
h1,h2,h3,p {
margin-top:0}
h1 {
font-size:clamp(34px,5vw,56px);
letter-spacing:-2.2px;
line-height:1.05;
margin-bottom:14px}
h2 {
letter-spacing:-.6px}
.eyebrow {
text-transform:uppercase;
letter-spacing:1.7px;
color:var(--accent);
font-size:12px;
font-weight:800}
.muted,.hint {
color:var(--muted)}
.hint {
font-size:13px}
.panel {
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:26px;
box-shadow:var(--shadow)}
.button,button {
border:0;
border-radius:10px;
padding:11px 17px;
font-weight:700;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center}
.primary {
background:var(--accent);
color:#fff}
.primary:hover {
background:var(--accent-dark)}
.secondary {
background:#fff;
color:var(--ink);
border:1px solid var(--line)}
.full {
width:100%}
.link-button {
background:none;
padding:0;
color:var(--muted)}
.danger {
color:var(--danger)}
button:disabled {
opacity:.45;
cursor:not-allowed}
.stack {
display:flex;
flex-direction:column;
gap:17px}
.gap-lg {
gap:24px}
label {
display:flex;
flex-direction:column;
gap:7px;
font-size:14px;
font-weight:650}
input,select,textarea {
width:100%;
padding:11px 13px;
border:1px solid #cfd7e1;
border-radius:10px;
background:#fff;
color:var(--ink);
outline:none}
input:focus,select:focus,textarea:focus {
border-color:var(--accent);
box-shadow:0 0 0 3px var(--soft)}
textarea {
resize:vertical}
.admin-nav {
display:flex;
align-items:center;
gap:22px}
.admin-nav a {
color:var(--ink);
font-size:14px;
font-weight:650}
.page-head {
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin-bottom:30px}
.page-head h1 {
font-size:42px;
margin:0}
.alert {
padding:13px 15px;
border-radius:10px;
background:#f0f3f6;
margin-bottom:18px}
.alert.error {
background:#fff0ee;
color:#8f1d14}
.alert.success {
background:#e8f8f0;
color:var(--ok)}
.login-shell {
min-height:65vh;
display:grid;
place-items:center}
.login-panel {
width:min(420px,100%)}
.admin-list {
display:grid;
gap:12px}
.admin-card {
display:flex;
justify-content:space-between;
align-items:center;
color:var(--ink);
background:#fff;
border:1px solid var(--line);
border-radius:14px;
padding:20px 22px}
.admin-card:hover {
border-color:#b7c4d5;
box-shadow:var(--shadow)}
.admin-card h2 {
margin:9px 0 4px}
.admin-card p {
margin:0;
color:var(--muted)}
.admin-card>strong {
font-size:27px;
text-align:right}
.admin-card small {
display:block;
font-size:11px;
color:var(--muted);
font-weight:500}
.status {
display:inline-block;
border-radius:99px;
padding:4px 9px;
background:#eef1f4;
color:#586274;
font-size:11px;
font-weight:800;
text-transform:uppercase}
.status.published {
background:#e6f7ef;
color:var(--ok)}
.status.paused {
background:#fff4dc;
color:#8a5a00}
.empty {
text-align:center;
padding:90px 20px;
color:var(--muted)}
.settings-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:14px}
.wide {
grid-column:1/-1}
.event-layout {
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:24px}
.preview {
position:sticky;
top:98px;
height:max-content;
text-align:center}
.portrait {
width:108px;
height:108px;
border-radius:50%;
overflow:hidden;
background:#e7ebf0;
margin:0 auto 18px;
display:grid;
place-items:center;
color:var(--muted)}
.portrait img {
width:100%;
height:100%;
object-fit:cover}
.check-grid,.form-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:15px}
.check-grid label,.consent {
flex-direction:row;
align-items:flex-start;
font-weight:500}
.check-grid input,.consent input {
width:auto;
margin-top:4px}
.form-actions {
display:flex;
justify-content:flex-end;
gap:10px}
.stats {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-bottom:20px}
.stats div {
background:var(--ink);
color:#fff;
border-radius:14px;
padding:20px}
.stats strong {
font-size:32px;
display:block}
.stats span {
opacity:.7;
font-size:13px}
.detail-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:20px}
.section-head,.row {
display:flex;
justify-content:space-between;
align-items:center;
gap:15px}
.inline {
display:flex;
gap:9px;
margin:15px 0}
.inline>* {
min-width:0}
.row {
border-top:1px solid var(--line);
padding:11px 0}
.row small {
color:var(--muted)}
dl {
display:grid;
grid-template-columns:110px 1fr;
margin-bottom:0}
dt {
color:var(--muted)}
dd {
margin:0}
.registrations {
margin-top:20px}
.table-wrap {
overflow:auto}
table {
border-collapse:collapse;
width:100%;
font-size:14px}
th,td {
text-align:left;
padding:13px;
border-bottom:1px solid var(--line);
vertical-align:top}
.hero {
max-width:820px;
margin:35px 0 52px}
.hero p:last-child {
font-size:20px;
color:var(--muted)}
.event-cards {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:22px}
.event-card {
background:#fff;
border:1px solid var(--line);
border-radius:22px;
padding:30px;
box-shadow:var(--shadow)}
.event-card .portrait {
margin:0 0 25px;
width:92px;
height:92px}
.event-card h2 {
font-size:27px;
margin-bottom:8px}
.event-card h3 {
margin-bottom:5px}
.event-card .button {
margin-top:15px}
.location {
padding:11px 13px;
background:var(--bg);
border-radius:10px;
font-size:14px}
.back {
display:inline-block;
margin-bottom:35px}
.registration-layout {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:60px;
align-items:start}
.slot-list {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
max-height:270px;
overflow:auto}
.slot {
display:block}
.slot input {
position:absolute;
opacity:0}
.slot span {
border:1px solid var(--line);
border-radius:10px;
padding:10px;
display:flex;
flex-direction:column;
text-align:center;
cursor:pointer}
.slot input:checked+span {
border-color:var(--accent);
background:var(--soft);
color:var(--accent)}
.slot small {
color:var(--muted)}
.success-page {
text-align:center;
max-width:560px;
margin:70px auto}
.success-mark {
width:68px;
height:68px;
border-radius:50%;
display:grid;
place-items:center;
margin:0 auto 20px;
background:#e6f7ef;
color:var(--ok);
font-size:34px}
.confirmation {
display:flex;
justify-content:center;
gap:15px;
font-size:27px;
margin:25px}
.legal {
max-width:850px;
margin:auto}
.legal-text {
white-space:pre-wrap;
line-height:1.8}
@media(max-width:800px) {
.site-header {
padding:0 18px}
.container {
padding:32px 18px}
.admin-nav a {
display:none}
.settings-grid,.event-layout,.detail-grid,.registration-layout {
grid-template-columns:1fr}
.preview {
position:static}
.stats {
grid-template-columns:1fr}
.check-grid,.form-grid {
grid-template-columns:1fr}
.wide {
grid-column:auto}
.slot-list {
grid-template-columns:repeat(2,1fr)}
.page-head {
align-items:flex-start;
flex-direction:column}
.event-card {
padding:23px}
footer {
flex-direction:column;
padding:24px 18px}
}
/* QEntry v0.9: базовые токены и компоненты расположены раньше экранных правил.
   Последний блок содержит только точечные уточнения текущего интерфейса. */
.event-cards {
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:start}
.event-card {
height:100%;
display:flex;
flex-direction:column}
.event-card .card-body {
display:flex;
flex-direction:column;
align-items:flex-start;
flex:1}
.event-card .card-body>.button {
margin-top:auto}
.location {
width:100%;
display:grid;
gap:8px}
.location div+div {
border-top:1px solid var(--line);
padding-top:8px}
.location span {
color:var(--muted)}
.event-person-head {
display:flex;
align-items:center;
gap:18px}
.event-person-head .portrait.small {
width:74px;
height:74px;
margin:0;
flex:0 0 auto}
.head-actions {
display:flex;
gap:9px}
.exclusion-form {
display:grid;
grid-template-columns:1fr 1fr;
gap:12px}
.exclusion-form .consent,.exclusion-form button {
grid-column:1/-1}
.exclusion-form button {
width:100%}
.schedule-list {
display:grid;
gap:12px}
.schedule-row {
display:grid;
grid-template-columns:80px 105px 105px 100px minmax(180px,1fr) 34px;
gap:9px;
align-items:end;
padding:14px;
border:1px solid var(--line);
border-radius:12px;
background:var(--bg)}
.schedule-row .remove-schedule {
width:34px;
height:42px;
padding:0;
background:#fff;
color:var(--danger);
border:1px solid var(--line)}
.compact {
padding:8px 12px}
.registration-photo {
width:116px;
height:116px;
margin:0 0 24px}
.slot em {
font-size:11px;
color:var(--muted);
font-style:normal;
margin-top:5px}
@media(max-width:1000px) {
.event-cards {
grid-template-columns:repeat(2,minmax(0,1fr))}
.schedule-row {
grid-template-columns:repeat(2,1fr)}
.schedule-row .location-field {
grid-column:1/-1}
.schedule-row .remove-schedule {
position:absolute;
margin-left:calc(100% - 66px)}
}
@media(max-width:650px) {
.event-cards {
grid-template-columns:1fr}
.head-actions {
width:100%;
flex-direction:column}
.event-person-head {
align-items:flex-start}
.exclusion-form {
grid-template-columns:1fr}
.schedule-row {
grid-template-columns:1fr}
.schedule-row .location-field {
grid-column:auto}
.registration-photo {
width:88px;
height:88px}
}
html,body {
max-width:100%;
overflow-x:hidden}
.hero {
max-width:1050px;
margin-top:20px}
.hero h1 {
font-family:Segoe UI Variable Display,Segoe UI,Arial,sans-serif;
font-size:clamp(38px,4.6vw,68px);
font-weight:720;
letter-spacing:-2.8px;
max-width:1050px}
.event-card .card-body>h2 {
margin-top:4px}
.registration-layout>* {
min-width:0}
.registration-layout form {
width:100%}
.event-type-dialog {
width:min(760px,calc(100% - 32px));
border:0;
border-radius:20px;
padding:28px;
box-shadow:0 24px 80px rgba(23,32,51,.25)}
.event-type-dialog::backdrop {
background:rgba(16,24,40,.45);
backdrop-filter:blur(3px)}
.dialog-head {
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-start}
.dialog-head h2 {
font-size:28px}
.dialog-close {
background:var(--bg);
color:var(--muted);
width:38px;
height:38px;
padding:0;
font-size:24px}
.event-type-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-top:14px}
.event-type-card {
border:1px solid var(--line);
border-radius:14px;
padding:20px;
color:var(--ink);
display:flex;
flex-direction:column;
gap:8px}
.event-type-card:hover {
border-color:var(--accent);
background:var(--soft)}
.event-type-card strong {
font-size:19px}
.event-type-card span {
color:var(--muted);
font-size:14px}
.event-type-card em {
color:var(--accent);
font-style:normal;
font-weight:700;
margin-top:8px}
@media(max-width:650px) {
.event-type-grid {
grid-template-columns:1fr}
.hero h1 {
letter-spacing:-1.7px}
.container {
padding-top:28px}
}
.container,footer {
width:100%}
.hero {
max-width:980px;
margin:22px auto 48px;
text-align:center}
.hero h1 {
font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
font-size:clamp(38px,4.2vw,62px);
font-weight:700;
line-height:1.08;
letter-spacing:-1.9px;
margin-left:auto;
margin-right:auto}
.hero p:last-child {
font-size:18px}
.event-cards {
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
gap:22px}
.event-card {
flex:0 1 350px;
width:350px;
min-width:0}
.slot-groups {
display:grid;
gap:12px;
max-height:330px;
overflow-y:auto;
padding-right:7px}
.slot-day {
border:1px solid var(--line);
border-radius:13px;
padding:14px;
background:#fff}
.slot-day-head {
display:flex;
justify-content:space-between;
align-items:baseline;
gap:14px;
margin-bottom:11px}
.slot-day-head strong {
font-size:15px}
.slot-day-head span {
color:var(--muted);
font-size:12px;
text-align:right}
.slot-times {
display:flex;
flex-wrap:wrap;
gap:8px}
.slot-time {
display:block}
.slot-time input {
position:absolute;
opacity:0;
pointer-events:none}
.slot-time span {
display:block;
min-width:72px;
padding:9px 13px;
text-align:center;
border:1px solid #cfd7e1;
border-radius:9px;
cursor:pointer;
font-weight:750;
color:var(--ink);
background:var(--bg)}
.slot-time span:hover {
border-color:var(--accent)}
.slot-time input:checked+span {
background:var(--accent);
border-color:var(--accent);
color:#fff}
.registration-layout {
gap:42px}
.registration-layout>section,.registration-layout>form {
min-width:0;
max-width:100%}
@media(max-width:800px) {
.hero {
text-align:center;
margin-top:8px}
.event-card {
flex-basis:min(100%,360px)}
.slot-day-head {
align-items:flex-start;
flex-direction:column;
gap:3px}
.slot-day-head span {
text-align:left}
.registration-layout {
gap:25px}
}
.event-card {
align-self:stretch;
height:auto}
.event-card .card-body {
height:100%}
.event-card .card-body>.button {
margin-top:auto}
.consent {
position:relative;
z-index:1;
line-height:1.45;
margin:4px 0 8px}
.policy-link,.footer-policy-link {
display:inline;
padding:0;
border:0;
border-radius:0;
background:none;
color:var(--accent);
font-weight:inherit;
line-height:inherit;
vertical-align:baseline}
.policy-link:hover,.footer-policy-link:hover {
text-decoration:underline;
background:none}
.footer-policy-link {
font-size:14px}
.policy-dialog {
position:relative;
width:min(760px,calc(100% - 32px));
max-height:86vh;
margin:auto;
border:1px solid rgba(255,255,255,.65);
border-radius:22px;
padding:30px 34px;
background:rgba(255,255,255,.94);
color:var(--ink);
box-shadow:0 28px 90px rgba(16,24,40,.28);
backdrop-filter:blur(16px)}
.policy-dialog::backdrop {
background:rgba(16,24,40,.48);
backdrop-filter:blur(5px)}
.policy-dialog h2 {
font-size:clamp(24px,4vw,32px);
margin-right:38px}
.policy-close {
position:absolute;
right:18px;
top:17px;
width:40px;
height:40px;
padding:0;
border-radius:50%;
background:var(--bg);
color:var(--ink);
font-size:27px;
font-weight:400}
.policy-close:hover {
background:var(--soft);
color:var(--accent)}
.policy-scroll {
max-height:58vh;
overflow:auto;
padding-right:14px;
white-space:pre-wrap;
line-height:1.75;
color:#344054;
scrollbar-gutter:stable}
@media(max-width:650px) {
.policy-dialog {
padding:25px 20px}
.policy-close {
right:12px;
top:12px}
.policy-scroll {
max-height:65vh}
.event-card {
width:100%}
}
.card-photo-slot {
min-height:117px;
display:flex;
align-items:flex-start}
.event-card .card-photo-slot .portrait {
margin-bottom:0}
.event-card .card-body {
display:grid;
grid-template-rows:minmax(72px,auto) minmax(58px,auto) minmax(42px,auto) minmax(46px,auto) minmax(54px,auto) minmax(38px,auto) auto;
align-content:start;
width:100%}
.card-title-slot,.card-name-slot,.card-role-slot,.card-description-slot,.card-location-slot,.card-email-slot {
min-width:0}
.card-title-slot {
display:flex;
align-items:flex-start}
.card-title-slot h2,.card-name-slot h3,.card-role-slot p,.card-description-slot p {
margin-bottom:0}
.card-name-slot {
padding-top:4px}
.card-role-slot {
padding-top:3px}
.card-role-slot p+p {
margin-top:7px}
.card-description-slot,.card-location-slot,.card-email-slot {
padding-top:10px}
.card-email-slot {
overflow-wrap:anywhere}
.event-card .card-body>.button {
justify-self:start;
align-self:end;
margin-top:14px}
@media(max-width:650px) {
.card-photo-slot {
min-height:110px}
.event-card .card-body {
grid-template-rows:auto}
.card-title-slot,.card-name-slot,.card-role-slot,.card-email-slot {
min-height:0}
.card-title-slot,.card-name-slot,.card-role-slot {
padding-bottom:8px}
}
.event-card .card-body {
display:flex;
flex-direction:column}
.card-title-slot {
min-height:72px}
.event-cards.has-photo .card-photo-slot {
min-height:117px}
.event-cards:not(.has-photo) .card-photo-slot {
min-height:0}
.event-cards.has-name .card-name-slot {
min-height:58px}
.event-cards.has-role .card-role-slot {
min-height:42px}
.event-cards.has-description .card-description-slot {
min-height:46px}
.event-cards.has-location .card-location-slot {
min-height:54px}
.event-cards.has-email .card-email-slot {
min-height:38px}
.event-card .card-body>.button {
margin-top:auto}
@media(max-width:650px) {
.event-card .card-body {
display:flex}
.card-title-slot,.event-cards.has-name .card-name-slot,.event-cards.has-role .card-role-slot,.event-cards.has-description .card-description-slot,.event-cards.has-location .card-location-slot,.event-cards.has-email .card-email-slot {
min-height:0}
.event-cards:not(.has-photo) .card-photo-slot {
min-height:0}
}
.event-card .card-title-slot {
min-height:84px}
.event-card .card-title-slot h2 {
font-size:27px;
font-weight:760;
line-height:1.16;
letter-spacing:-.8px;
color:var(--ink)}
.event-cards.has-name .card-name-slot {
min-height:62px;
padding-top:8px}
.event-card .card-name-slot h3 {
font-size:17px;
font-weight:650;
line-height:1.45;
letter-spacing:-.15px;
color:#344054}
.event-card .card-role-slot {
padding-top:8px}
.event-card .card-role-slot p {
font-size:14px;
font-weight:450;
line-height:1.5;
color:var(--muted)}
.event-card .card-email-slot {
font-size:14px;
font-weight:450;
line-height:1.45}
.event-card .card-email-slot a {
color:var(--accent)}
@media(max-width:650px) {
.event-card .card-title-slot {
min-height:0;
padding-bottom:15px}
.event-cards.has-name .card-name-slot {
min-height:0;
padding-top:0;
padding-bottom:13px}
}
.person-name {
display:flex;
flex-direction:column;
gap:1px}
.person-name-main {
white-space:nowrap}
.person-name-patronymic {
display:block}
.form-message {
min-height:64px;
}
.form-message .alert {
margin-bottom:16px;
}
.error-page {
max-width:680px;
margin:8vh auto;
text-align:center;
padding:clamp(28px,6vw,58px);
}
.error-page h1 {
font-size:clamp(32px,5vw,48px);
}
.error-page p {
max-width:520px;
margin:0 auto 24px;
color:var(--muted);
}
.error-code {
display:inline-block;
margin-bottom:12px;
color:var(--accent);
font-size:14px;
font-weight:800;
letter-spacing:1.5px;
}
@media(max-width:390px) {
.person-name-main {
white-space:normal}
}