@font-face {
    font-family:Inter;
    src:url('/fonts/Inter.ttf') format('truetype');
    font-weight:100 900;
    font-display:swap;
}

@font-face {
    font-family:'JetBrains Mono';
    src:url('/fonts/JetBrainsMono.ttf') format('truetype');
    font-weight:100 800;
    font-display:swap;
}

:root {
    color-scheme:light;
    --bg:#f5f6f7;
    --ink:#24313d;
    --muted:#596673;
    --blue:#285b83;
    --blue-soft:#edf3f7;
    --line:#dce1e5;
    --green:#247044;
    --red:#b33737;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-synthesis:none;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    font-size:14px;
    line-height:1.5;
}

a {
    color:var(--blue);
    text-decoration:none;
    text-underline-offset:3px;
}

a:hover {
    text-decoration:underline;
}

button,input,select {
    font:inherit;
}

button,a,input,select {
    -webkit-tap-highlight-color:transparent;
}

:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:3px;
}

main:focus {
    outline:none;
}

[hidden] {
    display:none!important;
}

h1,h2,h3,p {
    margin-top:0;
}

h1 {
    font-size:28px;
    line-height:1.25;
    letter-spacing:-.6px;
    margin-bottom:12px;
    overflow-wrap:anywhere;
}

h2 {
    font-size:18px;
    line-height:1.4;
    margin-bottom:10px;
}

p {
    line-height:1.6;
}

strong,b {
    font-weight:650;
}

.muted {
    color:var(--muted);
}

.blue {
    color:var(--blue);
}

.mono {
    font-family:'JetBrains Mono',Consolas,monospace;
}

.icon {
    width:20px;
    height:20px;
    flex-shrink:0;
    vertical-align:middle;
}

.site-header {
    background:#fff;
    border-bottom:1px solid var(--line);
}

.header-inner,.site-footer>div {
    max-width:1248px;
    padding:18px 24px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:24px;
}

.header-inner {
    flex-wrap:wrap;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-size:18px;
    font-weight:700;
    flex-shrink:0;
}

.brand:hover {
    text-decoration:none;
}

.brand small {
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:400;
    margin-top:2px;
}

.brand-mark {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:6px;
    background:var(--blue);
    color:#fff;
}

.main-nav {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.main-nav a {
    display:flex;
    align-items:center;
    min-height:44px;
    padding:10px 12px;
    color:var(--muted);
    border-radius:5px;
    font-size:13px;
    font-weight:600;
}

.main-nav a[aria-current] {
    background:var(--blue-soft);
    color:var(--blue);
}

.account {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

.account-label {
    font-size:12px;
    max-width:170px;
    overflow-wrap:anywhere;
}

.account-label small {
    display:block;
    color:var(--muted);
}

.account form {
    margin:0;
}

.page {
    width:100%;
    max-width:1200px;
    padding:32px 24px 48px;
    margin:0 auto;
    flex:1;
    min-width:0;
}

.page-kicker {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    color:var(--muted);
    font-size:13px;
    margin-bottom:20px;
}

.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:24px;
    min-width:0;
}

.page>section.card+section.card {
    margin-top:24px;
}

.badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:4px;
    font-size:11px;
    font-weight:600;
    line-height:1.5;
}

.badge-blue,.status-waiting {
    background:var(--blue-soft);
    color:var(--blue);
}

.badge-yes {
    background:#eaf4ed;
    color:var(--green);
}

.badge-no {
    background:#fbeeee;
    color:var(--red);
}

.badge-neutral,.status-ended {
    background:#eef0f2;
    color:var(--muted);
}

.status-active {
    background:#fff3dc;
    color:#805a16;
}

.dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
    flex-shrink:0;
}

button,.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:10px 16px;
    border:1px solid transparent;
    border-radius:5px;
    background:var(--blue);
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

button:hover,.button:hover {
    background:#204969;
    text-decoration:none;
}

button:disabled {
    cursor:not-allowed;
    opacity:.55;
}

.secondary {
    background:#fff;
    border-color:#bdc7ce;
    color:var(--ink);
}

.secondary:hover {
    background:var(--blue-soft);
}

.quiet {
    background:transparent;
    color:var(--muted);
    padding:8px;
    font-size:12px;
    white-space:nowrap;
}

.quiet:hover {
    background:var(--blue-soft);
    color:var(--ink);
}

.danger {
    background:var(--red);
}

.danger:hover {
    background:#922d2d;
}

.actions,.dialog-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.round-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}

.round-title {
    min-width:0;
}

.round-title h1 {
    margin:12px 0 8px;
}

.round-title p {
    font-size:13px;
    margin-bottom:0;
}

.round-meta,.round-status {
    display:flex;
    align-items:center;
    gap:12px;
}

.round-meta {
    font-size:12px;
}

.round-status {
    flex-wrap:wrap;
    justify-content:flex-end;
}

.round-card,.results-heading {
    margin-bottom:24px;
}

.timer-box,.round-activity {
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:5px;
    white-space:nowrap;
}

.timer-box>span,.round-activity>span {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
}

.timer-box .icon,.round-activity .icon {
    width:16px;
    height:16px;
}

.timer-box strong,.round-activity strong {
    font-size:23px;
    font-variant-numeric:tabular-nums;
}

.timer-box strong {
    color:var(--blue);
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:16px;
}

.section-heading h2 {
    margin:0;
}

.section-heading p {
    margin:6px 0 0;
    font-size:13px;
}

.section-heading a {
    font-size:13px;
}

.vote-options {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.vote-option {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:left;
    padding:22px;
    min-height:210px;
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:8px;
    font-weight:400;
}

.vote-option:hover {
    background:#f8fafb;
    border-color:var(--blue);
}

.vote-option:disabled {
    opacity:1;
    color:var(--muted);
    background:#f8f9fa;
}

.option-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}

.option-icon {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:5px;
    background:#eef1f3;
    color:var(--muted);
}

.option-title {
    font-size:21px;
    text-transform:none;
}

.option-description {
    font-size:13px;
    color:var(--muted);
    margin-top:6px;
}

.option-action {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    margin-top:auto;
    padding-top:20px;
    color:var(--muted);
}

.option-action .icon {
    width:16px;
    height:16px;
}

.selection-badge {
    font-size:10px;
    font-weight:600;
    color:var(--blue);
}

.vote-option.is-selected {
    border:2px solid var(--blue);
    padding:21px;
    background:var(--blue-soft);
}

.vote-poolt.is-selected .option-icon {
    background:#e0efe5;
    color:var(--green);
}

.vote-vastu.is-selected .option-icon {
    background:#f7e3e3;
    color:var(--red);
}

.vote-option.is-pending {
    border-color:var(--blue);
    outline:2px solid var(--blue);
    outline-offset:2px;
}

.vote-guidance {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin:24px 0 16px;
}

.vote-guidance p {
    display:flex;
    gap:8px;
    align-items:center;
    margin:0;
    font-size:13px;
    color:var(--muted);
}

.decision {
    font-size:13px;
}

.voting-live {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font-size:13px;
}

.voting-live p {
    margin:0;
}

.sync-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 20px;
    font-size:12px;
    color:var(--muted);
}

.sync-strip>span {
    display:flex;
    align-items:center;
    gap:8px;
}

.sync-strip>a {
    white-space:nowrap;
}

.sync-strip .icon {
    width:16px;
    height:16px;
}

.metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px;
}

.metric-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:var(--muted);
    font-size:13px;
    margin-bottom:16px;
}

.metric strong {
    display:block;
    font-size:30px;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
}

.metric-number {
    display:flex;
    align-items:baseline;
    gap:8px;
}

.metric-number>span {
    font-size:12px;
    color:var(--muted);
}

.metric-foot {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
    margin-top:14px;
    font-size:12px;
    color:var(--muted);
}

.metric-yes .metric-number strong {
    color:var(--green);
}

.metric-no .metric-number strong {
    color:var(--red);
}

.info-icon {
    display:inline-grid;
    place-items:center;
    color:var(--muted);
    flex-shrink:0;
}

.metric-yes .info-icon {
    color:var(--green);
}

.metric-no .info-icon {
    color:var(--red);
}

.results-grid {
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:24px;
    margin-bottom:24px;
}

.distribution-card {
    display:flex;
    flex-direction:column;
}

.distribution-card>p,.participation-card>p {
    font-size:13px;
    color:var(--muted);
}

.vote-bar {
    display:flex;
    height:28px;
    border-radius:4px;
    background:#edf0f2;
    overflow:hidden;
    margin:24px 0;
}

.bar-yes {
    background:var(--green);
}

.bar-no {
    background:var(--red);
}

.bar-neutral {
    background:#8a939d;
}

.chart-legend {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.chart-legend>div {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
}

.chart-legend strong {
    display:block;
    font-size:11px;
    font-weight:500;
    color:var(--muted);
    margin-top:4px;
}

.legend-dot {
    width:9px;
    height:9px;
    border-radius:50%;
    flex-shrink:0;
}

.legend-dot.yes {
    background:var(--green);
}

.legend-dot.no {
    background:var(--red);
}

.legend-dot.neutral {
    background:#8a939d;
}

.chart-note {
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:12px!important;
    color:var(--muted);
    padding-top:24px;
    margin:auto 0 0;
}

.chart-note .icon {
    width:16px;
    height:16px;
}

.participation-ring {
    width:146px;
    height:146px;
    border-radius:50%;
    padding:10px;
    background:conic-gradient(var(--blue) var(--participation),#edf0f2 0);
    margin:20px auto;
}

.participation-ring>div,.vote-ring>div {
    height:100%;
    background:#fff;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.participation-ring strong {
    font-size:32px;
    font-variant-numeric:tabular-nums;
}

.participation-ring span {
    font-size:10px;
    color:var(--muted);
}

.participation-caption {
    font-size:12px;
    border-top:1px solid var(--line);
    padding-top:16px;
}

.participation-caption p {
    margin:10px 0 0;
}

.progress-track {
    height:6px;
    border-radius:3px;
    background:#edf0f2;
    overflow:hidden;
    margin-top:12px;
}

.progress-track>span {
    display:block;
    height:100%;
    background:var(--blue);
}

.progress-track>.bar-yes {
    background:var(--green);
}

.progress-track>.bar-no {
    background:var(--red);
}

.progress-track>.bar-neutral {
    background:#8a939d;
}

.admin-overview {
    margin-bottom:24px;
}

.admin-actions,.start-action {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}

.start-action .muted {
    font-size:12px;
}

.admin-actions {
    padding-top:20px;
    border-top:1px solid var(--line);
    justify-content:space-between;
}

.admin-metrics {
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.admin-metrics .metric>p {
    font-size:13px;
    margin-bottom:0;
}

.admin-distribution {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    align-items:center;
    gap:24px;
    margin:16px 0 24px;
}

.vote-ring {
    width:140px;
    aspect-ratio:1;
    border-radius:50%;
    padding:16px;
    background:conic-gradient(var(--green) 0 var(--yes),var(--red) var(--yes) var(--yes-no),#8a939d var(--yes-no) 100%);
    margin:auto;
}

.vote-ring strong {
    font-size:28px;
}

.vote-ring span {
    font-size:10px;
    color:var(--muted);
}

.ring-note {
    text-align:center;
    font-size:12px;
    color:var(--muted);
    margin:12px 0 0;
}

.distribution-rows {
    display:grid;
    gap:16px;
}

.distribution-row>div:first-child {
    display:flex;
    justify-content:space-between;
    font-size:13px;
}

.distribution-row .legend-dot {
    display:inline-block;
    margin-right:6px;
}

.distribution-row small {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:6px;
}

.protocol-download {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    border-top:1px solid var(--line);
    padding-top:20px;
    margin-top:auto;
}

.protocol-download b {
    font-size:13px;
}

.protocol-download p {
    font-size:12px;
    color:var(--muted);
    margin:4px 0 0;
}

.protocol-download .button {
    font-size:12px;
}

.events-card>p {
    font-size:13px;
}

.event-list {
    display:grid;
    margin-top:12px;
}

.event {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    min-width:0;
}

.event>div {
    min-width:0;
}

.event b {
    font-size:13px;
    overflow-wrap:anywhere;
}

.event small {
    display:block;
    font-size:12px;
    color:var(--muted);
    overflow-wrap:anywhere;
}

.event time {
    font-size:11px;
    color:var(--muted);
    margin-left:auto;
    white-space:nowrap;
}

.waiting-event {
    font-size:12px;
    color:var(--muted);
}

.table-scroll {
    overflow-x:auto;
    max-width:100%;
}

table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

th,td {
    text-align:left;
    padding:14px 12px;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
}

th {
    background:#f5f6f7;
    font-size:12px;
    color:var(--muted);
    font-weight:600;
}

.table-person {
    display:flex;
    align-items:center;
    gap:10px;
}

.initials {
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    flex-shrink:0;
    background:#eef1f3;
    border-radius:5px;
    color:var(--muted);
    font-size:11px;
}

.table-empty {
    text-align:center;
    color:var(--muted);
    padding:32px 12px;
}

.table-empty .icon {
    display:block;
    margin:0 auto 8px;
}

.audit-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding-top:16px;
    font-size:12px;
    color:var(--muted);
}

.audit-footer>span {
    display:flex;
    gap:8px;
    align-items:center;
}

.pagination {
    display:flex;
    justify-content:flex-end;
    gap:20px;
    margin-top:16px;
}

.audit-card {
    scroll-margin-top:24px;
}

label {
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-weight:600;
    margin-bottom:8px;
}

.label-note {
    font-size:12px;
    font-weight:400;
    color:var(--muted);
}

input,select {
    width:100%;
    min-height:44px;
    border:1px solid #bbc5cd;
    border-radius:5px;
    padding:10px 12px;
    color:var(--ink);
    background:#fff;
}

input::placeholder {
    color:#667583;
}

input[aria-invalid="true"] {
    border:2px solid var(--red);
}

.field-error {
    color:var(--red);
    font-size:12px;
    margin:8px 0;
}

.input-help {
    display:flex;
    gap:6px;
    align-items:flex-start;
    font-size:12px;
    color:var(--muted);
    margin:10px 0 20px;
}

.notice {
    background:#edf5ef;
    border:1px solid #bfd8c7;
    border-radius:5px;
    padding:14px 16px;
    line-height:1.6;
    margin-bottom:20px;
    font-size:13px;
    overflow-wrap:anywhere;
}

.error {
    background:#fff1f0;
    border-color:#edc4c0;
    color:#962b2b;
}

.notice ul {
    margin:8px 0 0;
    padding-left:18px;
}

.auth-main {
    max-width:488px;
    padding-top:48px;
    padding-bottom:48px;
}

.auth-card {
    padding:28px;
}

.auth-intro {
    margin-bottom:24px;
}

.auth-intro h1 {
    font-size:26px;
}

.auth-intro p {
    color:var(--muted);
    font-size:13px;
    margin:0;
}

.role-tabs {
    display:flex;
    border-bottom:1px solid var(--line);
    gap:12px;
    margin-bottom:24px;
}

.role-tabs a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:1;
    min-height:44px;
    padding:10px 4px;
    font-size:12px;
    color:var(--muted);
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
}

.role-tabs a[aria-current] {
    border-bottom-color:var(--blue);
    color:var(--blue);
    font-weight:600;
}

.role-tabs .icon {
    width:16px;
    height:16px;
}

.auth-card label {
    margin-top:20px;
}

.login-button {
    width:100%;
    margin-top:24px;
}

.auth-card .input-help {
    margin-bottom:0;
}

.welcome-hero {
    max-width:700px;
    margin:48px auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:36px;
}

.welcome-hero h1 {
    font-size:30px;
}

.welcome-hero>p {
    color:var(--muted);
    max-width:560px;
}

.welcome-hero .actions {
    margin:24px 0;
}

.welcome-details {
    border-top:1px solid var(--line);
    padding-top:20px;
    font-size:13px;
}

.welcome-details h2 {
    font-size:15px;
}

.welcome-details ol {
    padding-left:20px;
    margin:0;
    color:var(--muted);
}

.welcome-details li+li {
    margin-top:8px;
}

.empty-state {
    text-align:center;
    padding:24px;
}

.auth-symbol {
    display:inline-flex;
    margin-bottom:16px;
    color:var(--blue);
}

.site-footer {
    border-top:1px solid var(--line);
    font-size:12px;
    color:var(--muted);
}

.site-footer>div {
    justify-content:space-between;
}

.skip {
    position:absolute;
    top:-100px;
    left:16px;
    padding:14px;
    background:#fff;
    z-index:20;
    border-radius:5px;
}

.skip:focus {
    top:10px;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
}

dialog {
    width:min(520px,calc(100% - 32px));
    max-height:90vh;
    overflow:auto;
    border:1px solid var(--line);
    border-radius:8px;
    padding:28px;
    color:var(--ink);
    background:#fff;
    box-shadow:0 16px 48px #18232f33;
}

dialog::backdrop {
    background:#18232f80;
}

dialog p {
    color:var(--muted);
    font-size:14px;
}

.dialog-actions {
    justify-content:flex-end;
    margin-top:24px;
}

.danger-icon {
    color:var(--red);
    margin-bottom:16px;
}

.checkbox-label {
    justify-content:flex-start;
    align-items:center;
    font-size:13px;
    margin-top:20px;
}

.checkbox-label input {
    width:20px;
    min-height:20px;
    flex-shrink:0;
}

.sql-source {
    position:relative;
    overflow-x:auto;
    max-width:100%;
    background:#f5f7f9;
    border:1px solid var(--line);
    border-radius:5px;
    padding:20px;
    font:12px/1.7 'JetBrains Mono',Consolas,monospace;
    tab-size:2;
}

@media(max-width:1100px) {
    .header-inner {
        flex-wrap:wrap;
        gap:12px;
    }
    .main-nav {
        order:3;
        width:100%;
    }
    .account-label {
        display:none;
    }
    .admin-distribution {
        grid-template-columns:1fr;
    }
    .metric {
        padding:20px;
    }
}

@media(max-width:767px) {
    .header-inner,.site-footer>div {
        padding:16px;
    }
    .page {
        padding:24px 16px 36px;
    }
    .brand {
        font-size:17px;
    }
    .main-nav {
        border-top:1px solid var(--line);
        padding-top:8px;
    }
    .main-nav a {
        padding:8px 10px;
    }
    .card {
        padding:20px;
    }
    h1 {
        font-size:24px;
    }
    .round-heading {
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }
    .round-status {
        justify-content:flex-start;
    }
    .timer-box strong,.round-activity strong {
        font-size:20px;
    }
    .vote-options {
        grid-template-columns:1fr;
        gap:12px;
    }
    .vote-option {
        min-height:0;
        padding:18px;
    }
    .vote-option.is-selected {
        padding:17px;
    }
    .option-top {
        margin-bottom:8px;
    }
    .option-action {
        padding-top:12px;
    }
    .vote-guidance {
        flex-direction:column;
        align-items:stretch;
    }
    .metrics {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    .metric strong {
        font-size:26px;
    }
    .metric-label {
        font-size:12px;
    }
    .metric-foot {
        font-size:11px;
    }
    .results-grid,.admin-metrics {
        grid-template-columns:1fr;
    }
    .chart-legend {
        grid-template-columns:1fr;
        gap:14px;
    }
    .chart-legend strong {
        display:inline;
        margin-left:8px;
    }
    .admin-distribution {
        grid-template-columns:1fr 1.3fr;
        gap:16px;
    }
    .admin-actions {
        align-items:stretch;
        flex-direction:column;
    }
    .sync-strip {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:8px;
    }
    .auth-main {
        max-width:488px;
    }
    .auth-card {
        padding:24px;
    }
    .welcome-hero {
        margin:12px auto;
        padding:24px;
    }
    .welcome-hero h1 {
        font-size:26px;
    }
    .welcome-hero .actions {
        flex-direction:column;
    }
    .site-footer>div {
        flex-wrap:wrap;
        gap:8px;
    }
    .protocol-download .button {
        width:100%;
    }
}

@media(max-width:380px) {
    .brand {
        font-size:15px;
    }
    .brand small {
        font-size:10px;
    }
    .header-inner {
        gap:8px;
    }
    .account {
        gap:0;
    }
    .metric {
        padding:16px;
    }
    .metric .info-icon {
        display:none;
    }
    .admin-distribution {
        grid-template-columns:1fr;
    }
    .dialog-actions button {
        width:100%;
    }
    .role-tabs {
        gap:4px;
    }
}

.sql-nav {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px;
}

.sql-nav a {
    font-size:13px;
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:5px;
    color:var(--blue);
}

.sql-nav a:hover {
    background:var(--blue-soft);
}

.db-facts {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:6px 18px;
    margin:20px 0 4px;
    font-size:13px;
}

.db-facts dt {
    color:var(--muted);
}

.db-facts dd {
    margin:0;
    overflow-wrap:anywhere;
}

.db-objects {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:14px 0 28px;
}

.db-object {
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
}

.db-object>summary {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    padding:14px 18px;
    cursor:pointer;
    list-style:none;
}

.db-object>summary::-webkit-details-marker {
    display:none;
}

.db-object>summary::before {
    content:"▸";
    color:var(--blue);
    font-size:13px;
}

.db-object[open]>summary::before {
    content:"▾";
}

.db-object[open]>summary {
    border-bottom:1px solid var(--line);
}

.db-object>summary:hover {
    background:var(--blue-soft);
}

.db-object>summary:focus-visible {
    outline:2px solid var(--blue);
    outline-offset:-2px;
}

.db-object-meta {
    color:var(--muted);
    font-size:12px;
    margin-right:auto;
}

.db-object>p,.db-object>pre {
    margin:14px 18px;
}

.admin-page h3 {
    font-size:16px;
    color:var(--ink);
    margin:26px 0 0;
}

.admin-page h3 .muted {
    text-transform:none;
    letter-spacing:0;
    font-weight:400;
}

@media(max-width:767px) {
    .db-facts {
        grid-template-columns:1fr;
        gap:2px 0;
    }
    .db-facts dt {
        margin-top:8px;
    }
    .db-object>summary {
        padding:13px 15px;
        gap:9px;
    }
    .db-object>p,.db-object>pre {
        margin:12px 15px;
    }
}

.sql-search {
    margin:22px 0 4px;
    max-width:520px;
}

.sql-search label {
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
}

.sql-search input {
    width:100%;
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:14px;
}

.sql-search input:focus-visible {
    outline:2px solid var(--blue);
    outline-offset:1px;
    border-color:var(--blue);
}

.sql-search p {
    margin:8px 0 0;
    font-size:12px;
    color:var(--muted);
    min-height:1em;
}

.sql-source {
    position:relative;
}

.sql-source.has-gutter {
    padding-left:64px;
}

.sql-gutter {
    position:absolute;
    left:0;
    top:20px;
    width:44px;
    text-align:right;
    color:#9aa4b8;
    user-select:none;
    -webkit-user-select:none;
    white-space:pre;
    border-right:1px solid var(--line);
    padding-right:10px;
}

.sql-source .sql-copy {
    position:absolute;
    top:8px;
    right:8px;
    font-size:11px;
    padding:5px 11px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:5px;
    color:var(--muted);
}

.sql-source .sql-copy:hover {
    color:var(--blue);
    border-color:var(--blue);
}

.sql-source mark {
    background:#ffe08a;
    color:inherit;
    border-radius:2px;
}

.tok-kw {
    color:#1d4ed8;
    font-weight:600;
}

.tok-str {
    color:#0b7a4b;
}

.tok-num {
    color:#a3520c;
}

.tok-com {
    color:#7a8496;
    font-style:italic;
}

.tok-ident {
    color:#6b21a8;
}

@media(prefers-contrast:more) {
    .tok-kw {
        color:#0b2f9e;
    }
    .tok-str {
        color:#065f38;
    }
    .tok-ident {
        color:#4c1d77;
    }
}

@media(max-width:767px) {
    .sql-source.has-gutter {
        padding-left:50px;
    }
    .sql-gutter {
        width:34px;
        padding-right:7px;
    }
}

.query-row {
    border:1px solid var(--line);
    border-radius:8px;
    padding:16px 18px;
    margin-bottom:12px;
}

.query-row>header {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.query-time {
    font-size:12px;
    color:var(--muted);
}

.query-ms {
    font-size:12px;
    color:var(--muted);
    margin-left:auto;
}

.query-bindings,.query-triggers {
    margin:12px 0 0;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.chip {
    border:1px solid var(--line);
    border-radius:5px;
    padding:3px 10px;
    font-size:11px;
    background:#fff;
}

.chip-blue {
    border-color:#c7d9fb;
    background:var(--blue-soft);
    color:#1d4ed8;
}

@media(max-width:767px) {
    .query-row {
        padding:14px 15px;
    }
    .query-ms {
        margin-left:0;
    }
}