:root {
  color-scheme: light;
  --bg: #f3f6f4;
  --surface: #ffffff;
  --ink: #14221c;
  --muted: #728078;
  --line: #dfe7e2;
  --brand: #147a58;
  --brand-soft: #e6f3ed;
  --high: #c33b45;
  --high-soft: #fae9eb;
  --low: #2468b1;
  --low-soft: #e8f1fb;
  --normal: #278157;
  --normal-soft: #e7f4ed;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh; }
button, select { font: inherit; }
.auth-view { min-height: 100vh; display: grid; place-items: center; padding: 24px 18px; }
.auth-card { width: min(430px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 18px 60px rgba(20,34,28,.10); }
.auth-intro { margin-top: 10px; color: var(--muted); line-height: 1.45; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 24px 0 18px; padding: 4px; border-radius: 13px; background: var(--bg); }
.auth-tabs button { border: 0; border-radius: 10px; padding: 10px 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; }
.auth-tabs button.active { background: var(--surface); color: var(--brand); box-shadow: 0 2px 8px rgba(20,34,28,.08); }
.auth-form { display: grid; gap: 14px; }
.auth-form p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.auth-form input { width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 12px 13px; outline: 0; background: white; color: var(--ink); font: inherit; }
.auth-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-submit { margin-top: 2px; border: 0; border-radius: 13px; padding: 13px; background: var(--brand); color: white; font-weight: 800; }
.auth-submit:disabled { opacity: .6; }
.auth-error { margin-top: 14px; padding: 11px 12px; border-radius: 11px; background: var(--high-soft); color: var(--high); font-size: 12px; }
.shell { width: min(760px, 100%); margin: 0 auto; padding: 24px 18px 108px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.eyebrow { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 32px; letter-spacing: -.04em; }
h2 { font-size: 26px; letter-spacing: -.03em; margin-top: 2px; }
.profile-picker { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.profile-picker select { min-width: 120px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 32px 10px 12px; background: var(--surface); color: var(--ink); font-weight: 700; }
.top-actions { display: flex; align-items: end; gap: 8px; }
.admin-button { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); color: var(--brand); font-size: 12px; font-weight: 800; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.summary-card { display: grid; gap: 3px; padding: 15px 14px; border: 2px solid transparent; border-radius: 16px; text-align: left; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.summary-card:active { transform: scale(.98); }
.summary-card[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 5px 16px rgba(20,34,28,.12); }
.summary-card[aria-pressed="true"]::after { content: "Показаны только эти"; margin-top: 4px; font-size: 9px; font-weight: 800; }
.summary-card b { font-size: 25px; line-height: 1; }.summary-card span { font-size: 12px; font-weight: 700; }
.summary-card.danger { color: var(--high); background: var(--high-soft); }
.summary-card.low { color: var(--low); background: var(--low-soft); }
.summary-card.normal { color: var(--normal); background: var(--normal-soft); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 28px 2px 14px; }
.section-heading + .summary { margin-bottom: 14px; }
.reminders-block { margin-bottom: 22px; }.reminder-list { display: grid; gap: 9px; margin-top: 9px; }.reminder-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: #fff7df; border: 1px solid #efdfad; }.reminder-date { min-width: 54px; color: #8a6417; font-size: 12px; font-weight: 800; }.reminder-card h3 { font-size: 14px; }.reminder-card p { margin-top: 3px; color: var(--muted); font-size: 12px; }.reminder-done { border: 0; border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.75); color: #8a6417; font-weight: 800; }
.icon-button { border: 0; background: var(--surface); color: var(--brand); width: 42px; height: 42px; border-radius: 14px; font-size: 23px; }
.search-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0 12px; min-height: 48px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--muted); }
.search-box input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.search-box button { border: 0; background: transparent; color: var(--muted); font-size: 22px; }
.filter-row { display: flex; gap: 8px; margin: -4px 0 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 800; }
.filter-chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.lab-groups { display: grid; gap: 14px; }
.lab-group { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.lab-group h3 { padding: 17px 18px 12px; font-size: 17px; }
.lab-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; width: 100%; padding: 14px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.lab-row:active { background: #f5f8f6; }
.lab-name { font-weight: 700; }.lab-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.lab-value { text-align: right; }.lab-value strong { display: inline-block; padding: 5px 8px; border-radius: 9px; font-size: 15px; }
.lab-value small { display: block; margin-top: 5px; color: var(--muted); }
.status-high strong { color: var(--high); background: var(--high-soft); }
.status-low strong { color: var(--low); background: var(--low-soft); }
.status-normal strong { color: var(--normal); background: var(--normal-soft); }
.status-unknown strong { color: var(--ink); background: #eef1ef; }
.document-list { display: grid; gap: 10px; }
.document-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 14px; background: var(--surface); color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; }
.document-card:active { background: #f5f8f6; }.open-mark { color: var(--brand); font-size: 22px; }
.document-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-weight: 800; }
.document-card h3 { font-size: 14px; overflow-wrap: anywhere; }.document-card p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.empty { text-align: center; padding: 48px 28px; color: var(--muted); }.empty h3 { color: var(--ink); margin: 12px 0 6px; }.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: auto; border-radius: 18px; background: var(--brand-soft); color: var(--brand); font-size: 27px; }
.view { display: none; }.view.active { display: block; }.hidden { display: none !important; }
.bottom-nav { position: fixed; z-index: 10; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); width: min(760px, 100%); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); border-top: 1px solid var(--line); backdrop-filter: blur(16px); }
.bottom-nav.with-pain { grid-template-columns: repeat(6, 1fr); }
.home-list { display:grid; gap:10px; }.home-card,.quiet-card { padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }.home-card h3 { margin:5px 0 7px; }.home-card p { margin-top:5px; color:var(--muted); font-size:13px; }.person-tag { color:var(--brand); font-size:11px; font-weight:800; }.quiet-card { color:var(--muted); text-align:center; }.course-done { margin-top:12px; border:0; border-radius:10px; padding:8px 11px; background:var(--brand-soft); color:var(--brand); font-weight:800; }
.nav-item { display: grid; place-items: center; gap: 2px; border: 0; background: transparent; color: var(--muted); padding: 8px; font-size: 11px; font-weight: 700; }.nav-item span { font-size: 20px; }.nav-item.active { color: var(--brand); }
.pain-create { display:grid; gap:12px; margin-bottom:18px; padding:17px; border:1px solid #b9d9ca; border-radius:18px; background:#f7fffb; }
.pain-create label,.pain-toolbar label,.pain-report-controls label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:750; }
.pain-create input,.pain-create select,.pain-create textarea,.pain-toolbar input,.pain-report-controls input { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:var(--surface); color:var(--ink); font:inherit; }
.pain-create textarea { min-height:76px; resize:vertical; }
.pain-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:17px; padding:4px; border-radius:14px; background:#e6ece8; }
.pain-actions button { min-width:0; border:0; border-radius:10px; padding:10px 5px; background:transparent; color:var(--muted); font-size:11px; font-weight:800; }
.pain-actions button.active { background:var(--surface); color:var(--brand); box-shadow:0 2px 8px rgba(20,34,28,.08); }
.pain-form-head,.pain-card-head,.pain-score-row,.pain-archive-card { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pain-toolbar { display:grid; grid-template-columns:minmax(145px, 1fr) minmax(180px, 1.2fr); gap:10px; align-items:end; margin-bottom:14px; }
.pain-period { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:13px; background:#e6ece8; }
.pain-period button { border:0; border-radius:10px; padding:11px; background:transparent; color:var(--muted); font-weight:800; }
.pain-period button.active { background:var(--surface); color:var(--brand); box-shadow:0 2px 8px rgba(20,34,28,.08); }
.pain-entry-list,.pain-archive-list { display:grid; gap:12px; }
.pain-entry-card { padding:17px; border:1px solid var(--line); border-radius:19px; background:var(--surface); }
.pain-card-head h3,.pain-archive-card h3 { font-size:17px; }
.pain-card-head span,.pain-archive-card p { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.pain-finish,.pain-clear { border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:750; }
.pain-score-row { min-height:33px; margin-top:18px; }
.pain-score-row output { color:var(--muted); font-size:14px; font-weight:850; }
.pain-score-row output.filled { color:var(--brand); font-size:22px; }
.pain-slider { width:100%; margin:8px 0 2px; accent-color:#b8c5be; opacity:.55; }
.pain-slider.filled { accent-color:var(--brand); opacity:1; }
.pain-scale { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-weight:700; }
.pain-entry-card details { margin-top:14px; border-top:1px solid var(--line); padding-top:11px; }
.pain-entry-card summary { color:var(--brand); cursor:pointer; font-size:12px; font-weight:800; }
.pain-entry-card textarea { width:100%; min-height:70px; margin-top:10px; padding:11px; border:1px solid var(--line); border-radius:12px; resize:vertical; color:var(--ink); font:inherit; }
.pain-save { width:100%; margin-top:14px; padding:13px; }
.pain-archive-block { margin-top:28px; }
.pain-archive-card { padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.pain-activity-list { display:grid; gap:10px; }
.pain-activity-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.pain-activity-card h3 { font-size:16px; }.pain-activity-card p { margin-top:5px; color:var(--muted); font-size:12px; }
.pain-activity-actions { display:flex; flex:0 0 auto; gap:6px; }.pain-activity-actions button { padding:7px 9px; font-size:11px; }
.pain-duration-field { display:grid; align-content:start; gap:8px; min-width:0; }
.pain-duration-options { margin:0; }
.pain-duration-options .filter-chip { flex:1 1 0; min-width:0; padding-inline:7px; }
.pain-admin-catalog { margin:0 0 22px; color:var(--brand); font-size:12px; font-weight:800; }
.pain-admin-catalog > summary { cursor:pointer; }
.pain-admin-catalog .pain-create { margin-top:10px; color:var(--ink); }
.pain-check { display:grid !important; grid-template-columns:auto 1fr; align-items:center; justify-content:start; }
.pain-check input { width:18px !important; height:18px; padding:0; }
.pain-report-controls { display:grid; gap:12px; margin-bottom:14px; }
.pain-report-diaries { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.pain-report-diaries label { position:relative; display:block; flex:0 0 auto; }
.pain-report-diaries input { position:absolute; opacity:0; pointer-events:none; }
.pain-report-diaries span { display:block; border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:var(--surface); color:var(--muted); font-size:12px; font-weight:800; }
.pain-report-diaries input:checked + span { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.pain-report-mode { grid-template-columns:repeat(4,1fr); }.pain-report-mode button { min-width:0; padding:9px 4px; font-size:10px; }
.pain-report-scale { grid-template-columns:repeat(2,1fr); }.pain-report-scale button { padding:9px 8px; font-size:11px; }
.pain-report-chart { overflow-x:auto; padding:8px; border:1px solid var(--line); border-radius:18px; background:var(--surface); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.pain-chart { display:block; max-width:none; height:280px; }.pain-chart-grid { stroke:#e2e9e5; stroke-width:1; }.pain-chart-label { fill:var(--muted); font-size:10px; }
.pain-report-legend { display:flex; flex-wrap:wrap; gap:9px 14px; margin:11px 2px 0; color:var(--muted); font-size:11px; }
.pain-report-legend span { display:flex; align-items:center; gap:6px; font-weight:750; }.pain-report-legend i,.pain-report-legend b { display:inline-block; width:10px; height:10px; border-radius:50%; }
.pain-report-legend small { flex-basis:100%; }
.pain-report-activities article { display:grid; gap:4px; padding:11px 14px; border-top:1px solid var(--line); background:var(--surface); }.pain-report-activities article:first-of-type { border-radius:16px 16px 0 0; }.pain-report-activities article:last-child { border-radius:0 0 16px 16px; }
.pain-report-activities span { color:var(--muted); font-size:12px; }
.medication-list { display:grid; gap:10px; }.medication-card { padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }.medication-card h3 { margin:6px 0; }.medication-card p,.medication-dates { color:var(--muted); font-size:13px; }.medication-dates { margin-top:7px; }.medication-category { display:inline-block; padding:5px 9px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:800; }.course-status { display:inline-block; margin-top:12px; color:var(--muted); font-size:12px; font-weight:800; }
.error-box { position: fixed; left: 18px; right: 18px; bottom: 90px; max-width: 700px; margin: auto; padding: 13px 15px; border-radius: 13px; background: #3b2225; color: white; font-size: 13px; }
.modal { position: fixed; z-index: 30; inset: 0; display: grid; align-items: end; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(18,34,27,.46); }
.modal-sheet { position: relative; width: min(760px, 100%); max-height: 88vh; margin: 0 auto; padding: 8px 18px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 24px 24px 0 0; background: var(--bg); box-shadow: 0 -12px 40px rgba(18,34,27,.18); }
.modal-handle { width: 42px; height: 5px; margin: 2px auto 14px; border-radius: 9px; background: #c8d2cc; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.history-loading { padding: 42px 0; text-align: center; color: var(--muted); }
.chart-wrap { padding: 12px 8px 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.chart { display: block; width: 100%; min-width: 310px; height: auto; overflow: visible; }
.chart-grid { stroke: #e6ece8; stroke-width: 1; }.chart-band { fill: var(--normal-soft); }.chart-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.chart-point { stroke: white; stroke-width: 3; }.chart-point.high { fill: var(--high); }.chart-point.low { fill: var(--low); }.chart-point.normal { fill: var(--normal); }.chart-point.unknown { fill: var(--ink); }.chart-label { fill: var(--muted); font-size: 10px; }.chart-value { fill: var(--ink); font-size: 11px; font-weight: 800; }
.history-list { display: grid; gap: 8px; margin-top: 12px; }.history-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }.history-date { font-weight: 700; }.history-ref { margin-top: 3px; color: var(--muted); font-size: 12px; }.history-result { text-align: right; font-weight: 800; }
.source-button { grid-column: 1 / -1; justify-self: start; border: 0; padding: 7px 10px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.event-list { display: grid; gap: 12px; }.event-card { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }.event-top { display: flex; justify-content: space-between; gap: 12px; }.event-date { color: var(--muted); font-size: 12px; font-weight: 700; }.event-card h3 { margin-top: 3px; }.event-specialty { margin-top: 4px; color: var(--brand); font-size: 13px; font-weight: 700; }.event-section { margin-top: 13px; }.event-section b { display: block; margin-bottom: 5px; font-size: 12px; text-transform: uppercase; color: var(--muted); }.event-section ul { margin: 0; padding-left: 18px; }
body.modal-open { overflow: hidden; }
.edit-sheet { max-height: 92vh; overflow-y: auto; }
.edit-form { display: grid; gap: 14px; padding: 4px 0 18px; }
.edit-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 650; }
.edit-form input, .edit-form textarea, .edit-form select { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 12px; font: inherit; }
.edit-form textarea { min-height: 78px; resize: vertical; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edit-actions { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; }
.edit-button, .save-button, .danger-button { border: 0; border-radius: 11px; padding: 9px 13px; font: inherit; font-weight: 700; cursor: pointer; }
.edit-button { background: var(--brand-soft); color: var(--brand); }
.save-button { background: var(--brand); color: white; }
.danger-button { background: #fff0ef; color: #a93a32; }
.drafts-block { margin-bottom: 22px; }
.draft-card { border-color: #b9d9ca; background: #f7fffb; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.family-content { display: block; }
.family-card { display: grid; gap: 12px; margin-bottom: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.family-card h3 { margin: 0; }.family-card p { margin: 0; color: var(--muted); font-size: 13px; }
.family-card label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.family-card input, .family-card select { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.family-inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.invite-profiles { display: grid; gap: 8px; }.invite-profile { grid-template-columns: auto 1fr !important; align-items: center; }.invite-profile input { width: 20px; height: 20px; }
.invite-code { padding: 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: 20px; font-weight: 850; letter-spacing: .05em; text-align: center; }
.family-members { display: grid; gap: 9px; }.family-member { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }.family-member p { margin-top: 5px; }
.help-content { display: grid; gap: 12px; }
.help-card { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.help-card > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 850; }
.help-card h3 { margin: 0 0 7px; }.help-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.48; }
.help-action { margin-top: 12px; border: 0; border-radius: 10px; padding: 9px 12px; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.capability-list { display: grid; gap: 8px; }.capability-item { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }.capability-item b { white-space: nowrap; }.capability-item .enabled { color: var(--normal); }.capability-item .disabled { color: var(--muted); }
@media (max-width: 480px) { .edit-grid { grid-template-columns: 1fr; } .pain-toolbar { grid-template-columns:1fr; } .bottom-nav.with-pain .nav-item { padding:8px 3px; font-size:9px; } .pain-activity-card { align-items:flex-start; flex-direction:column; } }
.document-modal { position: fixed; z-index: 50; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.document-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.viewer-close { border: 0; border-radius: 11px; padding: 9px 12px; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.document-modal iframe { width: 100%; height: 100%; border: 0; background: white; }
.admin-modal { position: fixed; z-index: 50; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.admin-content { width: min(760px, 100%); margin: 0 auto; padding: 18px 18px calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; }
.admin-hint { margin-bottom: 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.admin-controls { display: grid; gap: 9px; margin-bottom: 14px; }
.admin-search { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); }
.admin-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.admin-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-selects select { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 30px 10px 10px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; }
.admin-users { display: grid; gap: 12px; }
.admin-user-card { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.admin-user-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.admin-user-head h3 { font-size: 17px; }.admin-user-head p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.admin-badge { padding: 5px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 800; }
.permission-list { display: grid; gap: 1px; border-top: 1px solid var(--line); }
.permission-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 650; }
.permission-row input { position: absolute; opacity: 0; pointer-events: none; }
.permission-row i { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 99px; background: #cbd4cf; transition: background .15s ease; }
.permission-row i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(20,34,28,.25); transition: transform .15s ease; }
.permission-row input:checked + i { background: var(--brand); }.permission-row input:checked + i::after { transform: translateX(18px); }
.permission-row input:disabled + i { opacity: .55; }
@media (max-width: 430px) { .shell { padding-top: 18px; }.topbar { align-items: center; }.summary-card { padding: 13px 10px; }.summary-card span { font-size: 10px; } h1 { font-size: 28px; } }