:root {
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: #d8dee4;
    --color-neutral-muted: #57606a;
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-accent-muted: #ddf4ff;
    --color-fg-default: #1f2328;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
    --color-success-subtle: #dafbe1;
    --color-danger-fg: #cf222e;
    --color-danger-emphasis: #d1242f;
    --color-danger-subtle: #ffebe9;
    --color-header-bg: #24292f;
    --color-header-text: #ffffff;
    --color-btn-text: #ffffff;
    --color-btn-primary-bg: #1f883d;
    --color-btn-primary-hover-bg: #1a7f37;
    --color-btn-primary-border: rgba(27,31,36,0.15);
    --color-btn-outline-text: #0969da;
    --color-btn-outline-hover-text: #ffffff;
    --color-btn-outline-hover-bg: #0969da;
    --color-btn-outline-hover-border: rgba(27,31,36,0.15);
    --color-btn-border: rgba(27,31,36,0.15);

    --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --fontSize-small: 12px;
    --fontSize-base: 14px;
    --fontSize-medium: 16px;
    --fontSize-large: 20px;
    --fontSize-xl: 24px;

    --spacing-condensed: 8px;
    --spacing-normal: 16px;
    --spacing-spacious: 24px;

    --borderRadius-small: 3px;
    --borderRadius-medium: 6px;
    --borderRadius-large: 12px;
    --borderRadius-full: 50%;

    --shadow-small: 0 1px 0 rgba(27,31,36,0.04);
    --shadow-medium: 0 3px 6px rgba(140,149,159,0.15);
    --shadow-large: 0 8px 24px rgba(140,149,159,0.2);

    --color-accent-fg-rgb: 9, 105, 218;
    --color-success-fg-rgb: 26, 127, 55;
    --color-danger-fg-rgb: 207, 34, 46;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-canvas-default: #0d1117;
        --color-canvas-subtle: #161b22;
        --color-border-default: #30363d;
        --color-border-muted: #21262d;
        --color-neutral-muted: #6e7781;
        --color-accent-fg: #58a6ff;
        --color-accent-emphasis: #58a6ff;
        --color-accent-muted: rgba(56,139,253,0.15);
        --color-fg-default: #c9d1d9;
        --color-fg-muted: #8b949e;
        --color-fg-subtle: #6e7781;
        --color-success-fg: #3fb950;
        --color-success-emphasis: #238636;
        --color-success-subtle: rgba(46,160,67,0.15);
        --color-danger-fg: #f85149;
        --color-danger-emphasis: #da3633;
        --color-danger-subtle: rgba(248,81,73,0.1);
        --color-header-bg: #161b22;
        --color-header-text: #f0f6fc;
        --color-btn-text: #c9d1d9;
        --color-btn-primary-bg: #238636;
        --color-btn-primary-hover-bg: #2ea043;
        --color-btn-primary-border: #30363d;
        --color-btn-outline-text: #58a6ff;
        --color-btn-outline-hover-text: #c9d1d9;
        --color-btn-outline-hover-bg: #58a6ff;
        --color-btn-outline-hover-border: #30363d;
        --color-btn-border: #30363d;

        --color-accent-fg-rgb: 88, 166, 255;
        --color-success-fg-rgb: 63, 185, 80;
        --color-danger-fg-rgb: 248, 81, 73;
    }
}

/* Base & Global Styles */
body {
    font-family: var(--fontStack-system);
    font-size: var(--fontSize-base);
    line-height: 1.5;
    color: var(--color-fg-default);
    background-color: var(--color-canvas-default);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-accent-fg);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

p { margin-top: 0; margin-bottom: var(--spacing-normal); }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5em; font-weight: 600; }
h1 { font-size: var(--fontSize-xl); }
h2 { font-size: var(--fontSize-large); }
h3 { font-size: var(--fontSize-medium); }
h4 { font-size: 1.15em; }
.f5 { font-size: var(--fontSize-small) !important; }


/* Layout */
.PageLayout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.PageLayout-content {
    flex-grow: 1;
    padding-top: var(--spacing-spacious);
    padding-bottom: var(--spacing-spacious);
}
.container-md {
    width: 100%;
    max-width: 768px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--spacing-normal);
    padding-left: var(--spacing-normal);
    box-sizing: border-box;
}
@media (min-width: 1012px) {
    .container-lg { max-width: 1012px; }
}


/* App Header */
.AppHeader {
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
    padding: var(--spacing-normal) var(--spacing-normal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border-default);
}
.AppHeader-item { display: flex; align-items: center; }
.AppHeader-item--leading { flex-grow: 0; }
.AppHeader-item--middle { flex-grow: 1; text-align: center; }
.AppHeader-item--trailing { flex-grow: 0; }
.AppHeader-title {
    font-size: var(--fontSize-large);
    font-weight: 600;
    margin: 0;
    color: inherit;
}
.AppHeader-logo { font-size: 28px !important; }


.Box {
    background-color: var(--color-canvas-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: var(--borderRadius-medium);
}
.Box--spacious {
    margin-bottom: var(--spacing-spacious);
}
.Box-header {
    padding: var(--spacing-normal);
    border-bottom: 1px solid var(--color-border-muted);
    background-color: var(--color-canvas-subtle);
    border-top-left-radius: var(--borderRadius-medium);
    border-top-right-radius: var(--borderRadius-medium);
}
.Box-title {
    font-size: var(--fontSize-medium);
    font-weight: 600;
    margin: 0;
}
.Box-body {
    padding: var(--spacing-normal);
}
.Box-footer {
    padding: var(--spacing-normal);
    border-top: 1px solid var(--color-border-muted);
    background-color: var(--color-canvas-subtle);
    border-bottom-left-radius: var(--borderRadius-medium);
    border-bottom-right-radius: var(--borderRadius-medium);
    color: var(--color-fg-muted);
}


.form-group {
    margin-bottom: var(--spacing-normal);
}
.form-label {
    display: block;
    margin-bottom: var(--spacing-condensed);
    font-weight: 600;
}
.form-control {
    display: block;
    width: 100%;
    padding: 5px 12px;
    font-size: var(--fontSize-base);
    line-height: 20px;
    color: var(--color-fg-default);
    background-color: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--borderRadius-medium);
    box-shadow: var(--shadow-small);
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
    border-color: var(--color-accent-fg);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-accent-fg-rgb), 0.3);
}
.form-control.is-invalid,
.form-control.is-invalid:focus {
    border-color: var(--color-danger-fg);
    box-shadow: 0 0 0 3px rgba(var(--color-danger-fg-rgb), 0.3);
}

.input-group {
    display: flex;
    align-items: stretch;
}
.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex-grow: 1;
}
.input-group-button {
    display: flex;
}
.input-group-button .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.input-group-button .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    font-size: var(--fontSize-base);
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--color-btn-border);
    border-radius: var(--borderRadius-medium);
    appearance: none;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    text-decoration: none;
}
.btn .material-symbols-outlined {
    margin-right: 4px;
    font-size: 16px !important;
    line-height: 1;
}
.btn.btn-block {
    display: flex;
    width: 100%;
    margin-top: var(--spacing-normal);
}

.btn-primary {
    color: var(--color-btn-text);
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-border);
    box-shadow: var(--shadow-small);
}
.btn-primary:hover {
    background-color: var(--color-btn-primary-hover-bg);
    text-decoration: none;
}
.btn-octicon {
    padding: 5px;
    color: var(--color-fg-muted);
    background-color: var(--color-canvas-subtle);
    border-color: var(--color-btn-border);
}
.btn-octicon .material-symbols-outlined { margin-right: 0; }
.btn-octicon:hover {
    color: var(--color-accent-fg);
    background-color: var(--color-canvas-default);
    border-color: var(--color-border-default);
    text-decoration: none;
}

.text-gray { color: var(--color-fg-muted) !important; }
.text-gray-light { color: var(--color-fg-subtle) !important; }
.text-bold { font-weight: 600 !important; }
.mb-2 { margin-bottom: var(--spacing-condensed) !important; }
.mb-3 { margin-bottom: var(--spacing-normal) !important; }
.mt-4 { margin-top: var(--spacing-spacious) !important; }
.mr-2 { margin-right: var(--spacing-condensed) !important; }
.p-3 { padding: var(--spacing-normal) !important; }

.d-flex { display: flex !important; }
.flex-items-center { align-items: center !important; }
.flex-auto { flex: 1 1 auto !important; }

.Layout {
    display: flex;
    flex-wrap: wrap;
}
.Layout--gutter {
    margin: calc(var(--spacing-normal) / -2);
}
.Layout--gutter > .Layout-item {
    padding: calc(var(--spacing-normal) / 2);
    box-sizing: border-box;
}
.Layout-item {
    flex-basis: 100%; 
    max-width: 100%;
    flex-grow: 1;
    min-width: 0;
}
@media (min-width: 768px) {
    .Layout-item.col-md-6 {
        flex-basis: 50%;
        max-width: 50%;
    }
}

.flash-container {
    position: fixed;
    top: var(--spacing-spacious);
    right: var(--spacing-spacious);
    z-index: 1000;
    width: auto;
    max-width: 400px; 
    bottom: auto;
    left: auto;
    transform: none;
    padding: 0; 

    display: flex;
    flex-direction: column;
    align-items: flex-end; 
}

.flash {
    position: relative;
    padding: var(--spacing-normal);
    margin-bottom: var(--spacing-condensed); 
    font-size: var(--fontSize-base);
    border: 1px solid var(--color-border-default);
    border-radius: var(--borderRadius-medium);
    color: var(--color-fg-default);
    background-color: var(--color-canvas-subtle);
    box-shadow: var(--shadow-medium);

    animation: flash-fadeIn 0.3s ease-out forwards, flash-fadeOut 0.5s 2.5s ease-in forwards;

    width: 100%; 
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.flash .material-symbols-outlined {
    margin-right: var(--spacing-condensed);
    vertical-align: text-bottom;
    flex-shrink: 0;
}

.flash--success {
    color: var(--color-success-fg);
    background-color: var(--color-success-subtle);
    border-color: rgba(var(--color-success-fg-rgb), 0.4);
}

.flash--error {
    color: var(--color-danger-fg);
    background-color: var(--color-danger-subtle);
    border-color: rgba(var(--color-danger-fg-rgb), 0.4);
}

@keyframes flash-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes flash-fadeOut {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

.version-badge {
    position: fixed;
    bottom: var(--spacing-normal);
    right: var(--spacing-normal);
    padding: 4px 8px;
    font-size: var(--fontSize-small);
    font-weight: 500;
    color: var(--color-fg-muted);
    background-color: var(--color-canvas-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: var(--borderRadius-full);
    box-shadow: var(--shadow-small);
    z-index: 999;
}

.AppFooter {
    padding: var(--spacing-spacious) 0;
    margin-top: var(--spacing-spacious);
    font-size: var(--fontSize-small);
    text-align: center;
    color: var(--color-fg-subtle);
    border-top: 1px solid var(--color-border-default);
}
.AppFooter .Link--secondary {
    color: var(--color-fg-muted);
}
.AppFooter .Link--secondary:hover {
    color: var(--color-accent-fg);
}