@font-face {
    font-family: Figtree;
    src: url("/static/fonts/figtree-regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: Figtree;
    src: url("/static/fonts/figtree-medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: Figtree;
    src: url("/static/fonts/figtree-semibold.ttf");
    font-weight: 600;
}

/* CSS Variables - Light Mode (default) */
:root {
    /* Primary blues */
    --primary-50: #EFF6FF;
    --primary-100: #DBEAFE;
    --primary-200: #BFDBFE;
    --primary-300: #93C5FD;
    --primary-400: #60A5FA;
    --primary-500: #3B82F6;
    --primary-600: #2563EB;
    --primary-700: #1D4ED8;
    --primary-800: #1E40AF;
    --primary-900: #1E3A8A;

    /* Neutral grays */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Semantic colors - Light mode */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-tertiary: #6B7280;
    --text-muted: #9CA3AF;
    --border-primary: #E5E7EB;
    --border-secondary: #F3F4F6;

    /* Button colors */
    --btn-primary-bg: #1F2937;
    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-text: #374151;
    --btn-secondary-border: #E5E7EB;

    /* Status colors */
    --status-success: #10B981;
    --status-success-light: #D1FAE5;
    --status-error: #EF4444;
    --status-error-light: #FEE2E2;
    --status-warning: #F59E0B;
    --status-warning-light: #FEF3C7;
    --status-info: #3B82F6;
    --status-info-light: #DBEAFE;

    /* Alert severity colors */
    --red: #EF4444;
    --amber: #F59E0B;
    --blue: #3B82F6;

    /* Accent colors */
    --accent-teal: #14B8A6;
    --accent-teal-dark: #0D9488;

    /* Shadows */
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Input specific */
    --input-bg: #FFFFFF;
    --input-border: #E5E7EB;
    --input-focus-border: #3B82F6;
    --input-placeholder: #9CA3AF;

    /* Dialog/Modal */
    --dialog-bg: #FFFFFF;
    --dialog-backdrop: rgba(0, 0, 0, 0.5);
}

/* Dark Mode */
[data-theme="dark"] {
    /* Semantic colors - Dark mode */
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-muted: #64748B;
    --border-primary: #475569;
    --border-secondary: #334155;

    /* Button colors - Dark mode */
    --btn-primary-bg: #3B82F6;
    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: #1E293B;
    --btn-secondary-text: #E2E8F0;
    --btn-secondary-border: #334155;

    /* Status colors - Dark mode (slightly adjusted for visibility) */
    --status-success: #34D399;
    --status-success-light: #064E3B;
    --status-error: #F87171;
    --status-error-light: #7F1D1D;
    --status-warning: #FBBF24;
    --status-warning-light: #78350F;
    --status-info: #60A5FA;
    --status-info-light: #1E3A8A;

    /* Alert severity colors - Dark mode */
    --red: #F87171;
    --amber: #FBBF24;
    --blue: #60A5FA;

    /* Accent colors - Dark mode */
    --accent-teal: #2DD4BF;
    --accent-teal-dark: #14B8A6;

    /* Shadows - Dark mode */
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.4), 0px 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.4), 0px 4px 6px -2px rgba(0, 0, 0, 0.3);

    /* Input specific - Dark mode */
    --input-bg: #1E293B;
    --input-border: #334155;
    --input-focus-border: #60A5FA;
    --input-placeholder: #64748B;

    /* Dialog/Modal - Dark mode */
    --dialog-bg: #1E293B;
    --dialog-backdrop: rgba(0, 0, 0, 0.7);
}

/* Theme transition effects */
body,
.page,
.root,
input,
textarea,
button,
.nav,
.nav a,
.status-header,
.alerts-container,
.alerts-container > a,
.services-container,
.services-container > div,
.monitors-container,
.monitors-container > a,
.notifications-list,
.notifications-list > *,
.entity-empty-state,
.admin-nav-header,
.auth-dialog,
.menu > dialog,
.modal,
dialog,
.banner,
.alert,
.checkbox-group label,
.radio-group {
    transition: background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out,
                color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
}

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body, button, textarea {
    font-family: Figtree;
}

button, input[type="checkbox"], input[type="radio"], a[hx-post], label:has(input) {
    cursor: pointer;
}

input, textarea {
    box-sizing: border-box;
    margin-top: 1.0rem;
    margin-bottom: 3.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    padding: 1.0rem;
    width: 100%;
    display: block;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 1.4rem;
}

input::placeholder, textarea::placeholder {
    color: var(--input-placeholder);
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--input-focus-border);
}

/* form button:disabled {
    opacity: 0.5;
    pointer-events: none;
} */

form.htmx-request button, form.htmx-request input, a.htmx-request {
    opacity: 0.5;
    pointer-events: none;
}

textarea {
    min-height: 16rem;
}

/* Quick message select dropdown */
.quick-message-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-message-select option {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.5rem;
}

[data-theme="dark"] .quick-message-select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .quick-message-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
}

.banner {
    background-color: var(--status-error-light);
    border: 1px solid var(--status-error);
    color: var(--status-error);
    margin-bottom: 0;
    margin-top: 1.0rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    font-size: 1.4rem;
    padding: 1.0rem;
    border-radius: var(--radius-md);
}

.banner:empty {
    display: none;
}

.page > .banner {
    margin-top: 7.2rem;
}

.banner .title {
    font-weight: 500;
}

.banner a {
    text-decoration: underline;
    color: inherit;
}

.banner--info {
    border: 1px solid var(--status-info);
    background: var(--status-info-light);
    color: var(--primary-700);
}

.alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--status-error);
    background: var(--status-error);
    box-shadow: var(--shadow-sm);
    font-size: 1.4rem;
    font-weight: 500;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 3.6rem;
    text-align: center;
    padding: 0.8rem 1.2rem;
}

.alert--field {
    margin-bottom: 1.4rem;
    align-items: flex-start;
}

.alert--success {
    border: 1px solid var(--status-success);
    background: var(--status-success);
}

.alert--info {
    border: 1px solid var(--status-info);
    background: var(--status-info);
}

.alert:empty {
    display: none;
}

.root {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 1.8rem;
}

.page {
    max-width: 74.6rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2.4rem;
    padding-top: 0;
    margin-top: 4.8rem;
    margin-bottom: 4.8rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-lg), 0 0 25px rgba(0, 0, 0, 0.2);
}

.hide {
    position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* form */
.checkbox-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 3.6rem;
}

.checkbox-group label {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-weight: 400;
}

.checkbox-group input, .radio-group input {
    margin: 0;
    width: auto;
    margin-right: 1.2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    appearance: none;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    box-shadow: var(--shadow-sm);
}

.checkbox-group input:checked {
    background-color: var(--primary-500);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'><path fill-rule='evenodd' d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z' clip-rule='evenodd' /></svg>");
}

.radio-group {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
}

.radio-group legend {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0;
}

.radio-group input {
    margin-right: 0.8rem;
    margin-top: 1.0rem;
    display: inline-block;
}

.radio-group input:checked {
    border-color: var(--text-secondary);
}
/* form */

/* live */
.live {
    display: inline-block;
    width: fit-content;
    background-color: var(--status-error);
    color: var(--btn-primary-text);
    border-radius: 0.2rem;
    font-weight: 600;
    font-size: 1.0rem;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.8rem;
}

.active {
    display: inline-block;
    width: fit-content;
    background-color: #4CAF50;
    color: #000000;
    border-radius: 0.2rem;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.8rem;
}

.resolved {
    display: inline-block;
    width: fit-content;
    background-color: var(--gray-400);
    color: #333333;
    border-radius: 0.2rem;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.8rem;
}

.live-badge,
.active-badge,
.resolved-badge {
    margin-left: 0.6rem;
    border-radius: 0.2rem;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    color: var(--btn-primary-text);
    letter-spacing: 0.03em;
}

.live-badge {
    background-color: var(--status-error);
}

.active-badge {
    background-color: #4CAF50;
    color: #000000;
}

.resolved-badge {
    background-color: var(--gray-400);
    color: #333333;
}
/* live */

/* status header */
.status-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4.2rem;
    margin-bottom: 2.4rem;
    padding: 2.4rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    margin-left: 1.2rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.theme-toggle:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* Show moon icon in light mode, sun icon in dark mode */
.theme-icon-dark {
    display: none;
}

.theme-icon-light {
    display: block;
}

[data-theme="dark"] .theme-icon-dark {
    display: block;
}

[data-theme="dark"] .theme-icon-light {
    display: none;
}

.homepage-logo-dark {
    display: none;
}

[data-theme="dark"] .homepage-logo {
    display: none;
}

[data-theme="dark"] .homepage-logo-dark {
    display: block;
}

.homepage-divider {
    border: none;
    border-top: 1px solid var(--border-primary);
    margin: 0 auto 6rem;
    width: 80%;
}

.homepage-creators {
    display: flex;
    justify-content: center;
    gap: 7rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    font-size: 1.25rem;
}

.homepage-creators__entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.homepage-creators__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-primary);
}

.homepage-creators__name {
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--text-primary);
}

.homepage-creators__link {
    color: var(--text-secondary);
    text-decoration: none;
}

.homepage-creators__link:hover {
    color: var(--accent-teal);
}

.homepage-info-panel {
    display: flex;
    padding: 2.4rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2.4rem;
}

.homepage-info-panel__section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-right: 3rem;
}

.homepage-info-panel__section--contact {
    border-left: 1px solid var(--border-primary);
    padding-left: 3rem;
    padding-right: 0;
}

.homepage-info-panel__label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.homepage-info-panel__row {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    color: var(--text-secondary);
}

.homepage-info-panel__row span:first-child {
    color: var(--text-primary);
}

.homepage-info-panel__item {
    font-size: 1.4rem;
    color: var(--text-secondary);
}

.homepage-footer {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-tertiary);
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.homepage-footer a {
    color: var(--text-tertiary);
    text-decoration: none;
}

.homepage-footer a:hover {
    color: var(--accent-teal);
}

.settings-textarea-hint {
    font-size: 1.2rem;
    color: var(--text-tertiary);
    margin-top: 0.4rem;
}

.settings-textarea-hint code {
    background-color: var(--bg-tertiary);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
}

.settings-save-button {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 2.4rem;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 2.4rem;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.15s ease;
}

.settings-save-button:hover {
    opacity: 0.85;
}

@media (max-width: 840px) {
    .theme-toggle {
        order: 1;
    }
}

#nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
}

#nav-toggle+label {
    display: none;
    width: 2.2rem;
    color: var(--text-secondary);
}

@media (max-width: 840px) {
    .status-header > div:first-of-type {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-basis: 100%;
    }

    #nav-toggle+label {
        display: block;
    }

    #nav-toggle+label svg {
        display: block;
    }

    #nav-toggle:checked+label+div {
        display: flex;
    }

    .nav:not(.nav--mobile) {
        display: none;
    }

    .digital-clock {
        font-size: 1.1rem;
        right: 1rem;
    }

    .digital-clock--inline {
        right: auto;
        margin-right: 1rem;
    }
}

.status-header > div:first-of-type > a {
    margin: 0;
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
}

.status-header > div {
    display: flex;
    align-items: center;
}

.status-badge {
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    font-size: 1rem;
    color: var(--btn-primary-text);
    padding: 0.4rem 1.4rem;
    margin-right: 1.4rem;
}

.status-header .icon-button {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    width: 2.2rem;
    height: 2.2rem;
    margin-left: 1.5rem;
    box-sizing: border-box;
    color: var(--text-secondary);
}

.status-header .icon-button > svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
}

.digital-clock {
    position: absolute;
    right: 2.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-family: monospace;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.digital-clock--inline {
    position: static;
    transform: none;
    margin-right: 1.5rem;
}

.get-updates-container {
    position: relative;
}

.get-updates {
    border: none;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center;
    padding: 0;
    border: 1px solid var(--accent-teal-dark);
    border-radius: var(--radius-lg);
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, #4CD8C7 50%);
    font-size: 1.2rem;
    font-weight: 500;
}

.get-updates::before {
    content: "";
    background-color: var(--accent-teal);
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
}

.get-updates svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.4rem;
}

.get-updates span:first-of-type {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    z-index: 1;
    width: max-content;
}

.get-updates span:nth-of-type(2) {
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background-color: var(--accent-teal);
    left: 1px;
    top: 1px;
    border-radius: 4px;
}

.get-updates-container > div:first-of-type  {
   padding-bottom: 1.0rem;
}

.get-updates-container dialog {
    border: none;
    padding: 0;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    flex-direction: column;
    margin-top: 1.0rem;
    z-index: 1;
}

.get-updates-container:hover dialog::before {
    content: "";
    padding-top: 1.2rem;
    top: -12px;
    position: absolute;
    left: 0;
    width: 100%;
}

.get-updates-container:hover dialog, .get-updates-container:focus-within dialog {
    display: flex;
    left: 100%;
    transform: translateX(-100%);
    min-width: 11.0rem;
    font-size: 1.4rem;
}

.get-updates-container > dialog :first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.get-updates-container > dialog :last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

.get-updates-container > dialog :first-child:last-child {
    border-radius: var(--radius-lg);
}

.get-updates-container dialog button {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 1.2rem;
    font-size: inherit;
}

.get-updates-container dialog button:hover {
    background-color: var(--bg-secondary);
    transition: background-color 0.06s ease-in;
}

.get-updates-container dialog a {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 1.2rem;
    text-decoration: none;
}

.get-updates-container dialog a:hover {
    background-color: var(--bg-secondary);
    transition: background-color 0.06s ease-in;
}
 
.get-updates-container dialog svg {
   width: 1.4rem;
   height: 1.4rem;
   margin-right: 0.6rem;
   color: var(--text-secondary);
}

.get-updates-container dialog hr {
    background-color: var(--bg-secondary);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: none;
    height: 0.1rem;
 }
/* status header */

/* admin navigation header */
.nav {
    display: flex;
    align-items: center;
}

.nav--mobile {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1.8rem;
    row-gap: 0.8rem;
    display: none;
}

.nav > a {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-left: 3.6rem;
    text-decoration: none;
}

.nav--mobile > a {
    margin: 0;
    font-weight: 400;
}

.nav > a.active-nav {
    color: var(--text-primary);
}

.nav > a:first-of-type {
    margin: 0;
}

.nav > a:last-of-type {
    margin-right: 3.6rem;
}

.nav svg {
    color: var(--text-tertiary);
    width: 1.2rem;
}

.admin-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.0rem;
}

.admin-nav-header h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}


.admin-nav-header > div:first-of-type {
    display: flex;
    align-items: center;
    column-gap: 1.0rem;
}

.admin-nav-header > div:first-of-type a {
    display: flex;
    align-items: center;
}

.admin-nav-header > div:first-of-type svg {
    width: 2rem;
    height: 2rem;
    color: var(--text-secondary);
}

.admin-nav-header > div:nth-child(2) svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.admin-nav-header > div:nth-child(2) > a {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
}

.admin-nav-header > div:nth-of-type(2) {
    display: flex;
    column-gap: 0.8rem;
}

.admin-nav-header > div:nth-child(2) > a:not([href]) {
    opacity: 0.4;
    box-shadow: none;
}

.admin-nav-header .menu {
    margin-left: 3.6rem;
}
/* admin navigation header */

/* param box */
.param-box {
    margin: 0;
    padding: 0;
    border: none;
}

.param-box legend {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
    margin-bottom: 1.0rem;
}

.param-box__inputs {
    margin: 0;
    padding: 0;
    border: none;
}

.param-box__inputs:not(.view-only):disabled {
    display: none;
}

.param-box__list {
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    margin-bottom: 1.6rem;
}

.param-box__item {
    display: flex;
    column-gap: 1.4rem;
}

.param-box__item input {
    margin: 0;
}

.param-box__item button[type="button"] {
    background: transparent;
    border: none;
}

.param-box__item svg {
    width: 1.0rem;
    color: var(--text-secondary);
    pointer-events: none;
}

.param-box__add {
    display: flex;
    align-items: center;
    background: none;
    border: none;
}

.param-box__add div:first-of-type {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
    margin-right: 1.4rem;
}

.param-box__add svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}
/* param box */

/* index */
.success-modal {
    border: 1px solid var(--border-primary);
    padding: 2.4rem;
    border-radius: var(--radius-xl);
    max-width: 26rem;
    text-align: center;
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.services-list {
    margin-bottom: 2.4rem;
    padding: 2.4rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.4rem;
    margin-bottom: 2.4rem;
    border-bottom: 2px solid var(--border-primary);
}

.service-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.service-row div {
    display: flex;
    flex-direction: column;
}

.service-row span:first-of-type {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-primary);
}

.service-row span:nth-of-type(2) {
    font-size: 1.4rem;
    color: var(--text-tertiary);
    margin-top: 0.5rem;
}

.service-row svg {
    width: 2.0rem;
    color: var(--status-success);
}

.index-alert-container {
    margin-bottom: 2.4rem;
    padding: 2.4rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.index-alert-container .index-alert-container__header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 3.0rem;
}

.index-alert-container .index-alert-container__header div {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}


.index-alert-container .index-alert-container__header svg {
    width: 2.0rem;
    margin-right: 0.8rem;
}

.index-alert-container .index-alert-container__header div span {
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.index-alert-container .index-alert-container__header > span {
    font-size: 1.4rem;
    color: var(--text-tertiary);
}

.index-alert-container .index-alert-container__row {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.2rem;
}

.index-alert-container .index-alert-container__row span:first-of-type {
    font-size: 1.4rem;
    color: var(--text-tertiary);
    margin-bottom: 0.6rem;
}

.index-alert-container .index-alert-container__row span:nth-of-type(2) {
    font-size: 1.6rem;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.index-alert-container hr {
    margin-top: 3.8rem;
    margin-bottom: 3.8rem;
    background-color: var(--border-primary);
    border: none;
    height: 2px;
}

.index-alert-container hr:last-of-type {
    display: none;
}

.index-link {
    color: var(--primary-500);
    text-decoration: none;
    text-align: center;
    font-size: 1.4rem;
    display: block;
    margin-bottom: 1.2rem;
    padding: 1.4rem 2.4rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.index-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-300);
}

.index-link--secondary {
    color: var(--text-muted);
}

.success-modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.success-modal > div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.success-modal > div > div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    padding: 0.4rem;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    margin-bottom: 1.0rem;
}

.success-modal svg {
    width: 1.4rem;
    height: 1.4rem;
}

.success-modal span {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2.6rem;
}

.success-modal button {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    width: 100%;
}

.email-updates-modal {
    border: 1px solid var(--border-primary);
    padding: 2.4rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.email-updates-modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.email-updates-modal span {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
}

.email-updates-modal > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.email-updates-modal > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.6rem;
}

.email-updates-modal > div > button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border: none;
    background-color: transparent;
}

.email-updates-modal > div svg {
    width: 1.6rem;
    height: 1.6rem;
}

.email-updates-modal > form input {
    min-width: 25.0rem;
}

.email-updates-modal > form > button {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    width: 100%;
}
/* index */

/* history */
.history-container .admin-nav-header {
    margin-bottom: 2.4rem;
    padding: 2.4rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.history-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.history-container h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.history-container .admin-nav-header div:nth-of-type(2) {
    display: flex;
    align-items: center;
    column-gap: 1.0rem;
}

.history-container .admin-nav-header span {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 400;
}

.history-container > div:not(:first-of-type) {
    margin-bottom: 5.2rem;
}

.history-container h3 {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 2.0rem;
    margin-top: 0;
}
/* history */

/* admin index */
.admin-index-container h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

.admin-index-container > div:first-of-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-index-container > div:first-of-type > div {
    display: flex;
    column-gap: 0.8rem;
}

.admin-index-container a {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
}

.admin-index-container > div:first-child {
    margin-bottom: 2.0rem;
}

.admin-index-container > div:first-child a svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.admin-index-link-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2.0rem;
}

.admin-index-link-container div {
    position: relative;
}

.admin-index-link-container a {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    font-size: 1.6rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 12rem;
    min-height: 12rem;
    text-decoration: none;
}

.admin-index-link-container div.disabled a {
    opacity: 0.4;
}

.admin-index-link-container svg {
    color: var(--text-secondary);
    width: 2.0rem;
    margin-bottom: 1.4rem;
}
/* admin index */

/* auth dialog */
.auth-dialog-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 7.2rem);
    padding-top: 7.2rem;
    box-sizing: border-box;
}

.auth-dialog {
    width: 100%;
    max-width: 32.5rem;
    color: var(--text-primary);
    padding: 3.2rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}


.auth-dialog > div:first-child {
    margin-bottom: 3.0rem;
    text-align: center;
}

.auth-dialog > div:first-child > div {
    border-radius: 0.552rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    display: inline-flex;
    padding: 0.4rem;
}

.auth-dialog h1 {
    font-weight: 600;
    font-size: 1.8rem;
}

.auth-dialog svg {
    width: 1.2rem;
    height: 1.2rem;
}

.auth-dialog form {
    display: flex;
    flex-direction: column;
}

.auth-dialog button, .auth-dialog-continue {
    border-radius: var(--radius-md);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-weight: 600;
    padding: 0.75rem;
    border: none;
    font-size: 1.4rem;
    text-align: center;
    text-decoration: none;
}

.auth-dialog-continue {
    margin-top: 3.6rem;
}

.auth-dialog p {
    color: var(--text-secondary);
    font-size: 1.4rem;
    margin-bottom: 2.4rem;
}
/* auth dialog */

/* setup domain */
.setup-domain-description {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.2rem;
}

.setup-domain-description p {
    margin-bottom: 0;
}

.setup-domain .loader {
    display: none;
    margin-left: auto;
    margin-right: auto;
}

.setup-domain label {
    margin-top: 3.8rem;
}

.setup-domain.htmx-request button {
    display: none;
}

.setup-domain .auth-dialog-continue {
    display: none;
}

.setup-domain.htmx-request .loader {
    display: block;
}

.domain-alerts {
    display: flex;
    flex-direction: column;
    row-gap: 1.0rem;
}

.domain-alert {
    margin-bottom: 0;
}

.domain-alert:first-of-type:not(:empty) {
    margin-top: 3.8rem;
}

.domain-alert span:not(:first-of-type) {
    margin-top: 0.8rem;
}

.skip-domain-setup {
    margin-top: 7.4rem;
}

.skip-domain-setup p {
    text-align: center;
}

.skip-domain-setup button {
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    align-self: center;
    font-weight: 500;
}
/* setup domain */

/* entity-empty-state */
.entity-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    padding: 3.6rem;
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.entity-empty-state > .icon {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
    margin-bottom: 2.0rem;
}

.entity-empty-state > .icon > svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--text-secondary);
    padding: 0.4rem;
}

.entity-empty-state span {
    color: var(--text-primary);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    max-width: 22.1rem;
    margin-bottom: 3.6rem;
}

.entity-empty-state .actions {
    display: flex;
    align-items: stretch;
    column-gap: 1.4rem;
}

.entity-empty-state .action {
    display: flex;
    padding: 1rem;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--btn-primary-bg);
    box-shadow: var(--shadow-sm);
    color: #FFF;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
}

.entity-empty-state--secondary .action {
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    min-width: 12rem;
}

.entity-empty-state .action svg {
    width: 1.4rem;
}

.empty-state-refresh {
    border: 1px solid var(--primary-500);
    color: var(--primary-500);
    padding: 1rem;
    border-radius: var(--radius-md);
    background-color: var(--primary-50);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.empty-state-refresh svg {
    width: 1.2rem;
    margin-right: 0.6rem;
}

.empty-state-refresh.htmx-request {
    opacity: 0.5;
}

.empty-state-refresh.htmx-request svg {
    animation: rotation 1s linear infinite;
    opacity: 0.5;
}
/* entity-empty-state */

 /* services */
.services-container {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}


.services-container > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-secondary);
    padding: 1.6rem;
    min-height: 7.4rem;
    box-sizing: border-box;
}

.services-container > div:last-of-type {
    border: none;
}

.services-container > div > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
}


.services-container > div > div > span {
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: 500;
}

.services-container .menu button {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
}

.services-container .menu svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--text-secondary);
}

.services-container > div > div > span:nth-of-type(2) {
    color: var(--text-muted);
    font-size: 1.4rem;
    margin-top: 0.5rem;
}

.services-container .modal {
    width: 36rem;
}

.services-container .modal {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
}

.services-container .modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.services-container .modal span {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.services-container .modal > form {
    margin-top: 6.6rem;
}

.services-container .modal > form > div {
    display: flex;
    gap: 1rem;
}

.services-container .modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.services-container .modal > form button:first-of-type {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.services-container .modal > form button:nth-of-type(2) {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}
/* services */

/* create service */
.create-service-container form > div:last-of-type {
    display: flex;
    justify-content: center;
    margin-top: 6.8rem;
}

.create-service-container form button[type="submit"] {
    border-radius: var(--radius-md);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-weight: 600;
    padding: 0.75rem 3.8rem;
    border: none;
    font-size: 1.4rem;
}
/* create service */

/* alerts */
.alerts-container {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.alerts-container > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--border-secondary);
    padding: 1.6rem;
    min-height: 6.9rem;
    box-sizing: border-box;
    transition: background-color 0.06s ease-in;
    text-decoration: none;
}

.alerts-container > a:first-of-type {
    border-radius: 0.6rem 0.6rem 0 0;
}

.alerts-container > a:last-of-type {
    border-radius: 0 0 0.6rem 0.6rem;
}


.alerts-container > a:hover {
    background-color: var(--bg-secondary);
    transition: background-color 0.06s ease-in;
}

.alerts-container > a:last-of-type {
    border: none;
}

.alerts-container > a > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.alerts-container > a > div > div {
    display: flex;
    column-gap: 1.0rem;
    align-items: center;
}

.alerts-container .swatch {
    width: 2.5rem;
    height: 0.7rem;
    border-radius: var(--radius-full);
}

.alerts-container > a > div > div > span {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 1.2rem;
}

.alerts-container > a > span:first-of-type {
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: 500;
}

.alerts-container > a > span:nth-of-type(2) {
    color: var(--text-muted);
    font-size: 1.4rem;
}
/* alerts */

/* alert notifications */
.subtext {
    font-size: 1.4rem;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-top: 0.4rem;
    display: block;
}
/* alert notifications */

/* view alert */
.alert-public-url {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2.0rem;
    padding: 1.2rem;
    background-color: var(--bg-secondary);
    border-radius: 0.6rem;
    border: 1px solid var(--border-primary);
}

.alert-public-url span {
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--text-secondary);
}

.alert-public-url code {
    font-family: monospace;
    font-size: 1.3rem;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    word-break: break-all;
}

.alert-services {
    display: flex;
    flex-direction: column;
    margin-bottom: 4.0rem;
}

.alert-services h2 {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    margin-top: 0;
}

.alert-services > div {
    display: flex;
    column-gap: 1.2rem;
}


.alert-services > div > span {
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--text-secondary);
}


.alert-container-messages h2 {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 0;
}

.alert-container-messages > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.0rem;
}

.alert-container-messages > div:first-child a {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
}

.alert-container-messages > div:first-child svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.alert-container-messages > div:nth-of-type(2) {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.alert-container-messages > div:nth-of-type(2) > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--border-secondary);
    padding: 1.6rem;
    min-height: 6.9rem;
    box-sizing: border-box;
    transition: background-color 0.06s ease-in;
    text-decoration: none;
}

.alert-container-messages > div:nth-of-type(2) > div > div > span {
    color: var(--text-muted);
    font-size: 1.2rem;
}

.alert-container-messages > div:nth-of-type(2) > div > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.alert-container-messages > div:nth-of-type(2) > div > div > div {
    display: flex;
    align-items: center;
    column-gap: 1.4rem;
}

.alert-container-messages .menu svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--text-secondary);
}

.alert-container-messages > div:nth-of-type(2) > div > span {
    color: var(--text-secondary);
    font-size: 1.4rem;
    white-space: pre-wrap;
}

.menu {
    position: relative;
    display: flex;
    align-items: center;
}

.menu > dialog {
    overflow: hidden;
    position: absolute;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    flex-direction: column;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.8rem;
    padding: 0;
    z-index: 1;
    width: max-content;
}

.menu > button {
    background-color: transparent;
    display: flex;
    align-items: center;
    border: none;
}

.menu-button svg {
    pointer-events: none;
}

.menu > dialog > button, .menu > dialog > a {
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 500;
    border: none;
    background: var(--bg-primary);
    text-align: left;
    transition: background-color 0.06s ease-in;
    padding: 1.4rem 2rem;
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-decoration: none;
}

.menu > dialog > :first-child {
    border-radius: 0.4rem 0.4rem 0 0;
}

.menu > dialog > :last-child {
    border-radius: 0 0 0.4rem 0.4rem;
}

.menu > dialog > button:hover, .menu > dialog > a:hover {
    background-color: var(--bg-secondary);
    transition: background-color 0.06s ease-in;
}

.alert-container .modal {
    width: 36rem;
}

.alert-container .modal {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
}

.alert-container .modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.alert-container .modal span {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.alert-container .modal > form {
    margin-top: 6.6rem;
}

.alert-container .modal > form > div {
    display: flex;
    gap: 1rem;
}

.alert-container .modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.alert-container .modal > form button:first-of-type {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.alert-container .modal > form button:nth-of-type(2) {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}

.alert-container .modal > form.htmx-request button:nth-of-type(2) span {
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid white;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* view alert */

/* create monitor */
.create-monitor-container form > div:first-of-type {
    display: flex;
    column-gap: 3.6rem;
}

.create-monitor-container form > div:last-of-type {
    display: flex;
    justify-content: center;
    margin-top: 6.8rem;
}

.create-monitor-container form button[type="submit"] {
    border-radius: var(--radius-md);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-weight: 600;
    padding: 0.75rem 3.8rem;
    border: none;
    font-size: 1.4rem;
}

.create-monitor-container form > label > span {
    display: block;
    color: var(--status-error);
    margin-top: 0.4rem;
}

.create-monitor-container form > label > span:empty {
    display: none;
}

#request-body-container {
    width: 100%;
    margin-bottom: 3.6rem;
}

.create-monitor-container .request-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.0rem;
}

.create-monitor-container .request-body div div {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    padding: 0.4rem 0.6rem;
    font-size: 1.2rem;
    appearance: none;
    position: relative;
    border-radius: var(--radius-md);
}

.create-monitor-container .request-body div div:first-of-type,
.create-monitor-container .request-body div div:first-of-type input {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.create-monitor-container .request-body div div:last-of-type,
.create-monitor-container .request-body div div:last-of-type input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.create-monitor-container .request-body div div span {
    z-index: 1;
    pointer-events: none;
}

.create-monitor-container .request-body div input {
    appearance: none;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
    border: none;
    border-radius: inherit;
}

.create-monitor-container .request-body div input:checked {
    background-color: var(--bg-secondary);
}

.create-monitor-container .request-body div {
    display: flex;
}

.request-headers-container {
    margin-bottom: 3.6rem;
}

.notification-channels {
    border: none;
    padding: 0;
    margin: 0;
}

.notification-channels legend {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
}

.notification-channels-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3.6rem;
}

.notification-channels-group label {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-secondary);
    font-weight: 400;
    position: relative;
    margin-right: 1.2rem;
    padding: 1.0rem 2.0rem;
}

.notification-channels-group label:not(:has(input:checked)) {
    opacity: 0.5;
}

.notification-channels-group input {
    margin: 0;
    width: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    appearance: none;
    width: 100%;
    height: 100%;
    padding: 0;
    box-shadow: var(--shadow-sm);
    position: absolute;
}

.notification-channels-group input:checked {
    border: 1px solid var(--primary-500);
}

.notification-channels-group span {
    display: flex;
    align-items: center;
}

.notification-channels-group span svg {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.8rem;
}

.notification-mail-groups {
    border: none;
    padding: 0;
    margin: 0;
}

.notification-mail-groups legend {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
}

.notification-mail-groups-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3.6rem;
}

.notification-mail-groups-group label {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-secondary);
    font-weight: 400;
    position: relative;
    margin-right: 1.2rem;
}

.notification-mail-groups-group input {
    margin: 0;
    width: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    appearance: none;
    width: 100%;
    height: 100%;
    padding: 0;
    box-shadow: var(--shadow-sm);
    position: absolute;
}

.notification-mail-groups-group label:not(:has(input:checked)) {
    opacity: 0.5;
}

.notification-mail-groups-group input:checked {
    border: 1px solid var(--primary-500);
}

.notification-mail-groups-group label > span {
    display: flex;
    flex-direction: column;
    padding: 1.0rem 2.0rem;
}

.notification-mail-groups-group label > span > span:nth-of-type(1) {
    font-weight: 500;
}

.notification-mail-groups-group label > span > span:nth-of-type(2) {
    color: var(--text-muted);
}

.notification-mail-groups-group svg {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 0.8rem;
}
/* create monitor */

/* list monitors */
.monitors-container {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.monitors-container > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-secondary);
    padding: 1.6rem;
    min-height: 6.9rem;
    box-sizing: border-box;
    transition: background-color 0.06s ease-in;
    text-decoration: none;
}

.monitors-container > a:first-of-type {
    border-radius: 0.6rem 0.6rem 0 0;
}

.monitors-container > a:last-of-type {
    border-radius: 0 0 0.6rem 0.6rem;
}

.monitors-container > a:hover {
    background-color: var(--bg-secondary);
    transition: background-color 0.06s ease-in;
}

.monitors-container > a:last-of-type {
    border: none;
}

.monitors-container > a div > span:first-of-type {
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.monitors-container > a > div > span:nth-of-type(2) {
    color: var(--text-muted);
    font-size: 1.4rem;
}

.monitors-container > a > div {
    display: flex;
    flex-direction: column;
}

.monitors-container > a > .badge {
    background-color: var(--status-success);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--btn-primary-text);
    padding: 0.2rem 0.6rem;
    display: inline-block;
    border-radius: 0.2rem;
    margin-right: 1.0rem;
    min-width: 2.6rem;
    text-align: center;
}

.monitors-container > a > .badge--error {
    background-color: var(--status-error);
}
/* list monitors */

/* view monitor */
.monitor-header {
    margin-bottom: 5.6rem;
}

.monitor-header > div:nth-of-type(2) {
    display: flex;
    align-items: center;
}

.monitor-header .next-refresh {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-variant: tabular-nums;
}
.monitor-header .badge {
    background-color: var(--status-success);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--btn-primary-text);
    padding: 0.2rem 0.6rem;
    display: inline-block;
    border-radius: 0.2rem;
    margin-right: 1.0rem;
}

.monitor-header .badge--error {
    background-color: var(--status-error);
}

.monitor-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.4rem;
    margin-bottom: 2.0rem;
}

.monitor-log-header form { 
    position: relative;
}

.monitor-container h3 {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 0;
}

.monitor-container .modal {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
    width: 36rem;
}

.monitor-container .modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.monitor-container .modal span {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.monitor-container .modal > form {
    margin-top: 6.6rem;
}

.monitor-container .modal > form > div {
    display: flex;
    gap: 1rem;
}

.monitor-container .modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.monitor-container .modal > form button:first-of-type {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.monitor-container .modal > form button:nth-of-type(2) {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}

.monitor-container .modal > form.htmx-request button:nth-of-type(2) span {
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid white;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}


.monitor-logs-container {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.monitor-logs-container > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-secondary);
    padding: 1.6rem;
    min-height: 6.9rem;
    box-sizing: border-box;
    transition: background-color 0.06s ease-in;
    text-decoration: none;
}

.monitor-logs-container > div span:first-of-type {
    min-width: 20.0rem;
}

.monitor-logs-container > div span:nth-of-type(2) {
    width: 20.0rem;
    margin-left: auto;
}

.monitor-logs-container > div:first-of-type {
    border-radius: 0.6rem 0.6rem 0 0;
}

.monitor-logs-container > div:last-of-type {
    border-radius: 0 0 0.6rem 0.6rem;
}

.monitor-logs-container span {
	color: var(--text-secondary);
	font-size: 1.4rem;
	font-weight: 500;
}

.monitor-logs-container .badge {
    background-color: var(--status-success);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--btn-primary-text);
    padding: 0.2rem 0.6rem;
    display: inline-block;
    border-radius: 0.2rem;
    margin-right: 1.0rem;
    margin-left: auto;
    margin-right: 0;
    min-width: 4.34rem;
    text-align: center;
}

.monitor-logs-container .badge--error {
    background-color: var(--status-error);
}

.monitor-time {
    position: fixed;
    bottom: 2.0rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
}

.monitor-time form {
    display: flex;
}

.monitor-time input {
    margin: 0;
    border: none;
    border-radius: 0.5rem 0 0 0.5rem;
}

.monitor-time button {
    border: none;
    border-left: 1px solid var(--border-primary);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    padding: 0.8rem;
}

.monitor-time button svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.date-picker {
    position: absolute;
    visibility: hidden;
    padding: 0;
}

.date-picker-button {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    padding: 0;
}

.date-picker-button svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.loader {
    width: 1.2rem;
    height: 1.2rem;
    border: 0.2rem solid var(--text-secondary);
    margin: 1.25rem;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
/* view monitor */

/* notifications */
.notification-channels-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.0rem;
  align-items: center;
}

.notification-channels-header h2 {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 0;
}

.notification-channels-header a {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
}

.notification-channels-header a svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.notifications-list {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.notifications-list > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-secondary);
    padding: 1.6rem;
    min-height: 7.4rem;
    box-sizing: border-box;
    text-decoration: none;
}

.notifications-list > :first-child {
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
}

.notifications-list > :last-child {
    border-bottom-right-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
}

.notifications-list > a:hover {
    background-color: var(--bg-secondary);
    transition: background-color 0.06s ease-in;
}

.notifications-list > *:last-of-type {
    border-bottom: none;
}

.notifications-list > * > div {
    display: flex;
    text-decoration: none;
}

.notifications-list > * > div > svg {
    width: 2.2rem;
    height: 2.2rem;
    margin-right: 1.6rem;
    color: var(--text-secondary);
}

.notifications-list > * > div > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 0.5rem;
}

.notifications-list > * > div > div > span {
    color: var(--text-muted);
    font-size: 1.4rem;
}

.notifications-list > * > div > div > span:first-of-type {
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: 500;
}


.notifications-list .menu button {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
}

.notifications-list .menu svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--text-secondary);
}

.notifications-container .modal {
    width: 36rem;
}

.notifications-container .modal {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
}

.notifications-container .modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.notifications-container .modal span {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.notifications-container .modal > form {
    margin-top: 6.6rem;
}

.notifications-container .modal > form > div {
    display: flex;
    gap: 1rem;
}

.notifications-container .modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.notifications-container .modal > form button:first-of-type {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.notifications-container .modal > form button:nth-of-type(2) {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}
/* notifications */

/* create notification channel */
.notification-type-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3.6rem;
}

.notification-type-group label {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-secondary);
    font-weight: 400;
    position: relative;
    margin-right: 1.2rem;
    width: 7.0rem;
    height: 7.0rem;
}

.notification-type-group input {
    margin: 0;
    width: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    appearance: none;
    width: 100%;
    height: 100%;
    padding: 0;
    box-shadow: var(--shadow-sm);
}

.notification-type-group input:checked {
    border: 1px solid var(--primary-500);
}

.notification-type-group span {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.notification-type-group svg {
    margin-bottom: 1.0rem;
    width: 2.0rem;
    height: 2.0rem;
}

.smtp-container {
    display: none;
    flex-wrap: wrap;
    column-gap: 4.2rem;
    margin: 0;
    padding: 0;
    border: none;
}

.smtp-container--visible {
    display: flex;
}

.smtp-container label {
    flex-basis: calc(50% - 2.1rem);
}

.smtp-headers-container {
    width: 100%;
    margin-top: 1.0rem;
    margin-bottom: 3.6rem;
}

.header-input-container {
    display: flex;
    flex-direction: column;
    row-gap: 2.8rem;
}

.github-tutorial-container {
    display: none;
    margin: 0;
    padding: 0;
    border: none
}

.github-tutorial-container--visible {
    display: block;
}

.github-tutorial-container img {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-primary);
    margin-bottom: 2.0rem;
}

.github-tutorial-container p {
    margin-top: 0;
    font-size: 1.4rem;
    color: var(--text-secondary);
}

.help {
    display: flex;
    align-items: center;
    color: var(--primary-500);
    border: none;
    background: transparent;
    text-decoration: none;
    padding: 0;
    font-size: 1.3rem;
    margin-bottom: 1.6rem;
}

.help svg {
    width: 1.4rem;
    margin-left: 0.4rem;
}

.github-pat-tutorial, .github-webhook-tutorial {
    display: none;
    margin-top: 0.8rem;
    margin-bottom: 3.6rem;
}

.github-pat-tutorial :last-child {
    margin: 0;
}

.github-pat-tutorial--visible, .github-webhook-tutorial--visible {
    display: block;
}

.github-pat-tutorial a, .github-webhook-tutorial a {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    margin-bottom: 2.0rem;
    border: 1px solid var(--border-primary);
    padding: 0.8rem 1.4rem;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.github-pat-tutorial a svg:nth-of-type(1) {
    width: 2rem;
    margin-right: 0.8rem;
}

.github-pat-tutorial a svg:nth-of-type(2) {
    width: 1.4rem;
    margin-left: 0.4rem;
}

.postmark {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border: none;
}
/* create notification channel */

/* update */
.update-container > div:first-of-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.4rem;
}

.update-container > div:first-of-type > span {
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 500;
}

.new-update-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.6rem;
}

.new-update-title > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-update-title .icon {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    display: flex;
    margin-right: 1.0rem;
}

.new-update-title .icon > svg {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.new-update-title .icon--rotate svg {
    animation: rotation 1s linear infinite;
}

.new-update-title > div > span:first-of-type {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
}

.new-update-title > button {
    background-color: #0085FF;
    border: 1px solid #2582D9;
    padding: 0.4rem 1.4rem;
    font-size: 1.4rem;
    color: white;
    font-weight: 500;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.new-update-title > button::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.0) 50%);
}

.new-update-title > button::after {
    content: "";
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 1px);
    top: 1px;
    left: 1px;
    background-color: #0085FF;
    border-radius: 0.2rem;
}

.new-update-title > button > span {
    z-index: 1;
    position: relative;
}
  
.new-update-details {
    display: flex;
    align-items: center;
    margin-bottom: 1.4rem;
    color: #2F2F2F;
}

.new-update-details > div {
    display: flex;
    align-items: center;
 }

.new-update-details svg {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.6rem;
}

.new-update-details span {
    font-size: 1.4rem;
    margin-right: 1.4rem;
}

.new-update-notes {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    white-space: pre-wrap;
    font-size: 1.4rem;
    color: var(--text-secondary);
}

.update-container .modal {
    width: 36rem;
}

.update-container .modal {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
}

.update-container .modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.update-container .modal span {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.update-container .modal > form {
    margin-top: 6.6rem;
}

.update-container .modal > form > div {
    display: flex;
    gap: 1rem;
}

.update-container .modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.update-container .modal > form button:first-of-type {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.update-container .modal > form button:nth-of-type(2) {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}

.update-container hr {
    border: 1px solid var(--border-secondary); 
    margin: 3.2rem 0;
}

@keyframes logo-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

#update-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    z-index: 2;
    flex-direction: column;
}

#update-overlay svg {
    margin-bottom: 8.0rem;
    animation: logo-scale 2s linear infinite;
}

#update-overlay img {
    margin-bottom: 8.0rem;
}

#update-overlay .loader {
    width: 2.4rem;
    height: 2.4rem;
    border-color: #A8A8A8;
    border-bottom-color: transparent;
}

#update-overlay span {
    color: var(--text-secondary);
    font-size: 2.0rem;
    margin-bottom: 6.4rem;
    font-weight: 500;
}

#update-overlay button {
    background-color: var(--text-primary);
    padding: 0.75rem 3.8rem;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

#update-overlay button span {
  z-index: 1;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
}
/* update */

/* settings */
.settings-container .edit-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 3.6rem;
    margin-top: 1.0rem;
}

.settings-container .edit-row input {
    margin: 0;
    margin-right: 0.6rem;
}

.settings-container .edit-row input:disabled {
    border: none;
    background-color: transparent;
    padding: 0;
    color: var(--text-primary);
    box-shadow: none;
    margin-bottom: 0;
}
.settings-container .edit-button {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: none;
    padding: 0;
}

.settings-container .edit-button svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: #595959
}

.settings-container .confirm-button {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    padding: 0;
    margin-left: 1.4rem;
}

.settings-container .confirm-button svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: #595959
}

.settings-container .edit-row .confirm-button, .settings-container .edit-row .cancel-button  {
   display: none;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-primary);
   background-color: var(--bg-secondary);
   box-shadow: var(--shadow-sm);
   padding: 0;
   margin-left: 1.0rem;
   padding: 0 2.0rem;
   align-items: center;
   color: var(--text-secondary);
}

.settings-container .edit-row input:not(:disabled) + .edit-button + .confirm-button {
    display: flex;
}

.settings-container .edit-row input:not(:disabled) + .edit-button + .confirm-button + .cancel-button {
    display: flex;
}

.settings-container .edit-row input:disabled + .edit-button {
    display: flex;
}

.settings-container .banner {
    margin-bottom: 1.8rem;
}

.settings-container .domain-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 3.6rem;
    margin-top: 1.0rem;
}

.settings-container .domain-row input {
    margin: 0;
}

.settings-container .domain-row .confirm-button {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    padding: 0;
    margin-left: 1.4rem;
    padding: 0 2.0rem;
    color: var(--text-secondary);
}

.settings-container h3 {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.settings-users-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.0rem;
    align-items: center;
}
  
.settings-users-header h2 {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 0;
}

.settings-users-header > div {
    display: flex;
    align-items: center;
}
  
.settings-users-header > a {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
    padding: 0;
}

.settings-users-header > a svg, .settings-users-header button svg {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.4rem;
    color: var(--text-secondary);
}

.settings-users-header dialog {
    z-index: 36;
}

.settings-users-header__git {
    display: flex;
    align-items: center;
    margin-right: 1.2rem;
}

.settings-users-header__git svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.6rem;
    color: #1AD47B;
}

.settings-users-header__git a {
    color: var(--text-muted);
    font-size: 1.2rem;
    text-decoration: none;
}

.users-container {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 3.6rem;
}

.users-container > div:not(.entity-empty-state) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-secondary);
    padding: 1.6rem;
    min-height: 6.0rem;
    box-sizing: border-box;
}

.users-container > div:last-of-type {
    border: none;
}

.users-container > div > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.users-container > div > div > span {
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: 500;
}

.users-container .menu button {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
}

.users-container .menu svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--text-secondary);
}

.users-container > div > div > span:nth-of-type(2) {
    color: var(--text-muted);
    font-size: 1.4rem;
    margin-top: 0.5rem;
}

.users-container .modal {
    width: 36rem;
}

.users-container .modal {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
}

.users-container .modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.users-container .modal span {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.users-container .modal > form {
    margin-top: 6.6rem;
}

.users-container .modal > form > div {
    display: flex;
    gap: 1rem;
}

.users-container .modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.users-container .modal > form button:first-of-type {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.users-container .modal > form button:nth-of-type(2) {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}

.modal.secrets-modal {
    width: 36rem;
}

.modal.secrets-modal {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
}

.modal.secrets-modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.modal.secrets-modal > div {
    display: flex;
    justify-content: space-between;
}

.modal.secrets-modal > div button {
    display: flex;
    align-items: center;
    padding: 0;
    background-color: transparent;
    border: none;
}

.modal.secrets-modal > div svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--text-tertiary);
}

.modal.secrets-modal span {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.modal.secrets-modal > form {
    margin-top: 2.8rem;
}

.modal.secrets-modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 1.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.modal.secrets-modal > form > div:last-of-type > button:first-of-type {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}

.modal.secrets-modal > form button:nth-of-type(2) {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.secrets-modal form > div:first-of-type {
    display: flex;
    flex-direction: column;
    margin-bottom: 4.6rem;
}

.secrets-modal form > div:first-of-type div {
    margin-top: 1.0rem;
    display: flex;
    gap: 1.0rem;
}

.secrets-modal form > div:first-of-type button {
    display: flex;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 1.0rem;
    align-self: flex-start;
    transition: transform 200ms, background-color 100ms;
    width: auto;
}


.secrets-modal form > div:first-of-type button:hover {
    background-color: var(--bg-secondary);
}

.secrets-modal form > div:first-of-type button svg:nth-of-type(2) {
    display: none;
}

.secrets-modal form > div:first-of-type button.copy-success svg:first-of-type {
    display: none;
}

.secrets-modal form > div:first-of-type button.copy-success svg:nth-of-type(2) {
    display: block;
}

.secrets-modal form > div:first-of-type svg {
    width: 1.8rem;
    height: 1.8rem;
}

.secrets-modal form > div:nth-of-type(2) {
    display: flex;
    gap: 1rem;
    height: 100%;
}

.secrets-modal form input {
   margin: 0;
}

.save-overlay {
    display: none;
    gap: 4.0rem;
    align-items: center;
    font-size: 1.4rem;
    position: absolute;
    z-index: 5;
    background-color: #252526;
    right: 14px;
    top: 14px;
    border-radius: 0.2rem;
    padding: 0.8rem;
    color: #cccccc;
    font-weight: 500;
    border-left: 2px solid #314fee;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.36)
}

.save-overlay--error {
    border-color: #ee3131;
    position: static;
    display: flex;
    max-width: 32rem;
}

.save-overlay-errors {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 14px;
    top: 66px;
    z-index: 5;
    gap: 0.8rem;
}

.save-overlay button {
    border-radius: var(--radius-lg);
    display: flex;
    padding: 0;
    border: none;
    background-color: transparent;
}

.save-overlay button:hover {
    background-color: #363737;
}

.save-overlay button svg {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.3rem;
    color: #cccccc;
}

.github-webhook-secret-container {
    display: flex;
    gap: 1.0rem;
    margin: 1.0rem 0 3.6rem 0;
}

.github-webhook-secret-container > input {
    margin: 0;
}


.github-webhook-secret-container > button, .github-webhook-secret-container > .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.0rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 1.0rem;
    transition: transform 200ms, background-color 100ms;
}


.github-webhook-secret-container > button:hover, .github-webhook-secret-container > .checkbox:hover {
    background-color: var(--bg-secondary);
}

.github-webhook-secret-container button svg {
    width: 1.4rem;
    height: 1.4rem;
}

.generate-new-webhook-secret.modal {
    width: 36rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
}

.generate-new-webhook-secret.modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(4px);
}

.generate-new-webhook-secret.modal span:first-of-type {
    display: block;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.0rem;
}

.generate-new-webhook-secret.modal span:nth-of-type(2) {
    display: block;
    color: var(--text-tertiary);
    font-size: 1.4rem;
    font-weight: 400;
}

.generate-new-webhook-secret.modal > form {
    margin-top: 6.6rem;
}

.generate-new-webhook-secret.modal > form > div {
    display: flex;
    gap: 1rem;
}

.generate-new-webhook-secret.modal > form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 3.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    gap: 1rem;
}

.generate-new-webhook-secret.modal > form button:first-of-type {
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.generate-new-webhook-secret.modal > form button:nth-of-type(2) {
    background: var(--btn-primary-bg);
    color: #FFF;
    border: none;
}

.github-config {
    margin: 0;
    padding: 0;
    border: none;
}

.github-config:disabled {
    display: none;
}
/* settings */