/* ==========================================================================
   1. Variables (:root)
   ========================================================================== */
:root {
    --primary-color: #0A84FF;
    --primary-rgb: 10, 132, 255;
    --primary-hover: #3B9EFF;
    --background-color: #121212;
    --surface-color: #1E1E1E;
    --surface-hover-color: #2A2A2A;
    --text-color: #E1E1E6;
    --text-muted-color: #8A8A8E;
    --border-color: #333333;
    --border-muted-color: #3A3A3C;
    --success-color: #30D158;
    --success-rgb: 48, 209, 88;
    --danger-color: #FF453A;
    --danger-rgb: 255, 69, 58;
    --warning-color: #FF9F0A;
    --warning-rgb: 255, 159, 10;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --header-height: 3.5rem;
    --border-radius: 0.5rem;
    --shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.15);
    --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
    --logo-ai-color: #808080;
    --code-background: #252525; /* Added for consistency */
    --input-background-color: #151515; /* Darker input background */
}

/* ==========================================================================
   2. Global Resets & Base Styles
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem); /* Adjusted from 4rem */
    scrollbar-width: thin;
    scrollbar-color: var(--surface-hover-color) var(--background-color);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.6em;
    letter-spacing: -0.015em;
    color: var(--text-color);
}

h1 { font-size: 2.2em; font-weight: 700; }
h2 { font-size: 1.8em; font-weight: 800; }
h3 { font-size: 1.4em; font-weight: 700; }
h4 { font-size: 1.1em; font-weight: 600; }

p {
    margin-bottom: 1em;
}

/* Links */
a:not(.cta-button) {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.15s ease-out;
}

a:not(.cta-button):hover {
    color: var(--primary-hover);
}

/* Lists */
ul, ol {
    margin-bottom: 1em;
    padding-left: 1.25rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 0.625rem;
    height: 0.625rem;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 0.3125rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--surface-hover-color);
    border-radius: 0.3125rem;
    border: 0.125rem solid var(--background-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted-color);
}

/* Code */
code {
    background-color: var(--code-background);
    color: var(--text-color);
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 0.1875rem; /* 3px */
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

pre {
    background-color: var(--code-background);
    padding: 1em;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin-bottom: 1em;
    border: 1px solid var(--border-color);
}

pre code {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: inherit;
    border-radius: 0;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* Header */
header {
    background-color: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    padding: 0 1.5rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.0625rem solid var(--border-muted-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header h1 {
    margin: 0;
    font-size: 1.5em;
    color: var(--text-color);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.header-logo-link {
    text-decoration: none;
    position: relative;
}

.logo-ai {
    color: var(--logo-ai-color);
}

header nav {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out, visibility 0s linear 0.1s;
}

header nav.auth-determined {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.1s ease-in-out, visibility 0s linear 0s;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

header nav ul li {
    margin-left: 1.25rem;
}

header nav ul li a {
    text-decoration: none;
    color: var(--text-muted-color);
    font-weight: 500;
    padding: 0.375rem 0.25rem;
    border-bottom: 0.125rem solid transparent;
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
    position: relative;
}

header nav ul li a:hover {
    color: var(--text-color);
}

header nav ul li a.active {
    color: var(--text-color);
}

header nav ul li a.active:hover {
    color: var(--text-color); /* Keep color on hover for active */
}

header nav ul li a.active::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0.25rem;
     right: 0.25rem;
     height: 0.125rem;
     background-color: var(--primary-color);
     border-radius: 0.0625rem;
}

/* Mobile Menu Button */
.mobile-menu-button {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 1100;
}

.mobile-menu-button .icon-bar {
    display: block;
    width: 1.375rem;
    height: 0.125rem;
    background-color: var(--text-color);
    border-radius: 0.0625rem;
    margin: 0.25rem 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.mobile-menu-button.active .icon-bar:nth-child(1) {
    transform: translateY(0.375rem) rotate(45deg);
}
.mobile-menu-button.active .icon-bar:nth-child(2) {
    opacity: 0;
}
.mobile-menu-button.active .icon-bar:nth-child(3) {
    transform: translateY(-0.375rem) rotate(-45deg);
}

/* Main Content Area */
main {
    flex-grow: 1;
    padding: 2rem 1.5rem;
    max-width: 68.75rem; /* 1100px */
    margin: 0 auto;
    width: 100%;
}

.resource-create-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .resource-create-buttons {
        flex-direction: column;
    }
}

/* Sections */
section {
    background-color: transparent;
    /* padding: 2rem 0; */
    border-radius: 0;
    /* margin-bottom: 2rem; */
    border: none;
}

section h2, section h3 {
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}

/* Footer */
footer {
    background-color: var(--surface-color);
    color: var(--text-muted-color);
    padding: 2.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    font-size: 0.9em;
    text-align: left;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 2rem;
    max-width: 68.75rem;
    margin: 0 auto 2rem auto;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-muted-color);
}

.footer-column h4 {
    color: var(--text-color);
    font-size: 1em;
    margin-bottom: 0.75rem;
    font-weight: 600;
    border-bottom: none;
    padding-bottom: 0;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column ul li a {
    color: var(--text-muted-color);
    text-decoration: none;
    transition: color 0.15s ease-out;
}

.footer-column ul li a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.footer-column ul li a.active {
    color: var(--primary-color);
    font-weight: 500;
}

.footer-bottom {
    max-width: 68.75rem;
    margin: 0 auto;
    font-size: 0.85em;
    color: var(--text-muted-color);
}

.footer-bottom p {
    margin: 0;
}

/* Docs Layout */
.docs-container {
    display: flex;
    height: calc(100vh - var(--header-height));
    width: 100%;
    margin: 0 auto; /* Center container */
    max-width: none; /* Override main max-width */
    padding: 0; /* Override main padding */
}

.docs-sidebar {
    width: 16.25rem; /* 260px */
    background-color: var(--background-color);
    padding: 1.25rem;
    height: 100%;
    overflow-y: auto;
    flex-shrink: 0;
    border-right: 0.0625rem solid var(--border-color);
    z-index: 900;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
}

.docs-content {
    flex-grow: 1;
    padding: 1.875rem 2.5rem; /* 30px 40px */
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    max-width: 56.25rem; /* 900px, constrain content width */
    margin: 0 auto; /* Center content within its area */
}

.docs-content section {
    margin-bottom: 2.5em;
    padding-bottom: 1.5em;
    border-bottom: 0.0625rem solid var(--border-muted-color);
}
.docs-content section:last-child { border-bottom: none; }

.docs-content [id] {
     scroll-margin-top: calc(var(--header-height) + 1.25rem);
}
.docs-content ul, .docs-content ol { margin-left: 1.5em; margin-bottom: 1em; }
.docs-content li { margin-bottom: 0.5em; }

.docs-content footer { /* Footer specific to docs content */
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-top: 0.0625rem solid var(--border-muted-color);
    background: none; /* Override global footer styles */
    text-align: center; /* Override global footer styles */
    font-size: 0.8em; /* Override global footer styles */
}

/* Mobile Docs Layout Toggles */
.mobile-docs-toggle {
    display: none; /* Hidden by default */
    position: fixed;
    top: calc((var(--header-height) - 2.25rem) / 2);
    left: 1rem;
    z-index: 1011;
    background: var(--surface-color);
    color: var(--text-color);
    border: 0.0625rem solid var(--border-color);
    padding: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    height: 2.25rem;
    width: 2.25rem;
    line-height: 2.25rem;
    text-align: center;
}
.mobile-docs-toggle svg {
    width: 1.25rem; height: 1.25rem;
    stroke: currentColor; stroke-width: 2;
    vertical-align: middle;
}
.mobile-docs-toggle .icon-close { display: none; }
body.docs-sidebar-open .mobile-docs-toggle .icon-menu { display: none; }
body.docs-sidebar-open .mobile-docs-toggle .icon-close { display: inline-block; }

.mobile-docs-toggle:hover,
.mobile-docs-toggle:active {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.docs-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: 999;
}

/* ==========================================================================
   4. Common Components
   ========================================================================== */

/* Buttons */
button, .cta-button {
    background-image: linear-gradient(to bottom, var(--primary-color), #0071E3);
    background-color: #0071E3; /* Fallback */
    color: #ffffff;
    border: none;
    text-decoration: none;
    padding: 0.5rem 1.125rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.1s ease-out, box-shadow 0.2s ease-out;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.05);
}

button:hover, .cta-button:hover {
    background-image: linear-gradient(to bottom, var(--primary-hover), #007BFF);
    transform: none; /* Keep hover state flat */
    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.15), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.05);
}

button:active, .cta-button:active {
    transform: translateY(0rem); /* No movement on active */
    background-color: var(--primary-color); /* Use base color for active */
    box-shadow: var(--shadow-sm);
}

button:disabled, .cta-button:disabled {
    cursor: not-allowed;
    background-image: linear-gradient(to bottom, var(--surface-hover-color), var(--surface-hover-color));
    color: var(--text-muted-color);
    box-shadow: none;
    transform: none;
    opacity: 0.5; /* Added opacity for disabled state */
    transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.1s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
}

button:disabled:hover, .cta-button:disabled:hover,
button:disabled:active, .cta-button:disabled:active {
    opacity: 0.5;
    cursor: not-allowed;
    background-image: none;
    background-color: var(--surface-hover-color);
    color: var(--text-muted-color);
    box-shadow: none;
    transform: none;
}

/* Secondary Button */
.cta-button.secondary {
    background-color: transparent;
    background-image: none;
    color: var(--primary-color);
    border: 0.0625rem solid var(--primary-color);
    box-shadow: none;
    padding: 0.4375rem 1.0625rem; /* Adjusted padding for border */
}
.cta-button.secondary:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-0.0625rem); /* Slight lift on hover */
    box-shadow: none;
}
.cta-button.secondary:active {
    transform: translateY(0rem);
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}

/* Danger Button */
button.danger, .cta-button.danger {
    background-image: none;
    background-color: var(--danger-color);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}
button.danger:hover, .cta-button.danger:hover {
    background-color: #FF6961; /* Lighter red on hover */
    color: #ffffff;
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}
button.danger:active, .cta-button.danger:active {
    transform: translateY(0rem);
    background-color: var(--danger-color);
    box-shadow: var(--shadow-sm);
}

/* Large Button */
.cta-button-large {
    padding: 0.9375rem 2rem;
    font-size: 1.1em;
    font-weight: 600;
}

/* Forms */
form {
    padding: 0;
    border-radius: 0;
    margin-bottom: 1.5rem;
    border: none;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-section small {
    font-style: italic;
    font-size: .9rem;
    color: var(--text-muted-color);
    padding-left: 0.3125rem;
}

.form-section.inline {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}
.form-section.inline label {
    margin-bottom: 0;
    flex-shrink: 0;
}
.form-section.inline input,
.form-section.inline select,
.form-section.inline textarea {
    margin-bottom: 0;
    flex-grow: 1;
}
.form-section.inline input[type="checkbox"] {
    flex-grow: 0;
    flex-basis: auto;
}
/* Row for side-by-side form elements */
.form-row {
    display: flex;
    gap: 1.25rem; /* Match form-container gap */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.form-row > .form-section {
    flex: 1; /* Allow sections to grow and share space */
    min-width: 150px; /* Prevent sections from becoming too narrow */
}

.form-section input:not([type="range"]),
.form-section select,
.form-section textarea {
    margin-bottom: 0;
}

.form-section-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.form-section-disabled label,
.form-section-disabled span {
     color: var(--text-muted-color);
}
.form-section-disabled input[type="checkbox"] {
    background-color: var(--surface-color);
    border-color: var(--border-muted-color);
}
.form-section-disabled input[type="checkbox"]:checked {
    background-color: var(--text-muted-color);
    border-color: var(--border-muted-color);
}
.form-section-disabled input[type="checkbox"]:checked::after {
    border-color: var(--surface-color);
}

.form-group { /* Legacy? Keep for now */
    margin-bottom: 1rem;
}

label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    padding-left: 0.3125rem; /* Added small margin */
    font-size: .9rem;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"], /* Added date */
select,
textarea {
    width: 100%;
    padding: 0.625rem;
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--input-background-color);
    color: var(--text-color);
    font-size: 0.9375rem;
    line-height: 1.4;
    resize: none;
    box-shadow: none;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
    box-sizing: border-box; /* Ensure padding is included in width */
}

/* Style for date input calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(60%) sepia(7%) saturate(1002%) hue-rotate(200deg) brightness(90%) contrast(88%); /* Adjust to match --text-muted-color approx #8A8A8E */
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease-out, filter 0.15s ease-out;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(48%) sepia(88%) saturate(2000%) hue-rotate(190deg) brightness(100%) contrast(101%); /* Adjust to match --primary-color approx #0A84FF */
}

html.light-theme input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(40%) sepia(11%) saturate(300%) hue-rotate(200deg) brightness(90%) contrast(85%); /* Adjust to match light theme --text-muted-color approx #6E6E73 */
}

html.light-theme input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(35%) sepia(90%) saturate(2000%) hue-rotate(195deg) brightness(100%) contrast(101%); /* Adjust to match light theme --primary-color approx #007AFF */
}


input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.3);
    background-color: var(--input-background-color); /* Keep background on focus */
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted-color);
    opacity: 0.8;
    font-family: var(--font-family);
    font-style: italic;
}

input:disabled,
select:disabled,
textarea:disabled { /* General disabled style */
    background-color: var(--surface-color);
    color: var(--text-muted-color);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Select Specific Styles */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A8A8E'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem 1rem;
    padding-right: 2.5rem; /* Space for arrow */
    cursor: pointer;
}

/* Checkbox Specific Styles */
input[type="checkbox"] {
    margin-right: 0.3125rem;
    width: 1.5rem; /* Larger touch target */
    height: 1.5rem;
    position: relative;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--input-background-color);
    border: 0.0625rem solid var(--border-color);
    border-radius: 0.1875rem; /* Slightly rounded */
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
    display: inline-block; /* Align properly */
    vertical-align: middle; /* Align with text */
}

form input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

form input[type="checkbox"]::after { /* Checkmark */
    content: '';
    display: block;
    width: 0.25rem;
    height: 0.5rem;
    border: solid var(--background-color); /* Checkmark color */
    border-width: 0 0.125rem 0.125rem 0; /* 0 2px 2px 0 */
    transform: translate(-50%, -60%) rotate(45deg);
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

form input[type="checkbox"]:checked::after {
    opacity: 1;
}

form input[type="checkbox"]:focus-visible { /* Focus outline for accessibility */
    outline: 0.125rem solid var(--primary-color); /* 2px */
    outline-offset: 0.125rem; /* 2px */
}

form input[type="checkbox"]:disabled {
     cursor: not-allowed;
     /* Disabled styles handled by .form-section-disabled */
}

form input[type="checkbox"]:disabled::after {
    border-color: var(--surface-color); /* Ensure checkmark is visible if checked & disabled */
}

.checkbox-group {
    margin-top: 0.9375rem;
    display: flex;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    width: auto; /* Override fixed size if needed */
    margin-right: 0.5rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
    color: var(--text-color);
}

/* Radio Button Group */
.radio-group {
    margin-top: 0.9375rem;
}
/* (Add specific radio styles if needed, often similar to checkboxes) */

/* Input Helpers */
.input-description, .form-hint {
    display: block;
    color: var(--text-muted-color);
    font-size: 0.75rem;
    /* margin-top: 0.3125rem; */
    padding-left: 0.3125rem;
}

/* Form Status Messages */
.form-status-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.9em;
    text-align: center;
    display: none; /* Hidden by default */
    border: 1px solid transparent;
}

.form-status-message:not(:empty) {
    display: block; /* Show when it has content */
}

.form-status-message.success {
    color: var(--success-color);
    background-color: rgba(var(--success-rgb), 0.1);
    border-color: rgba(var(--success-rgb), 0.2);
}

.form-status-message.error {
    color: var(--danger-color);
    background-color: rgba(var(--danger-rgb), 0.1);
    border-color: rgba(var(--danger-rgb), 0.2);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
}

table th, table td {
    padding: 0.75rem 0.9375rem;
    text-align: left;
    border-bottom: 0.0625rem solid var(--border-muted-color);
    vertical-align: middle; /* Align content vertically */
}

table th {
    background-color: var(--surface-color);
    color: var(--text-muted-color);
    font-weight: 500;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 0.0625rem solid var(--border-color); /* Stronger border for header */
}

table tbody tr:hover {
    background-color: var(--surface-hover-color);
}

/* Sortable Table Headers */
th.sortable-header {
    cursor: pointer;
    position: relative;
    padding-right: 1.25rem; /* Space for icons */
    user-select: none;
}

th.sortable-header::before,
th.sortable-header::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    width: 0;
    height: 0;
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    opacity: 0.4;
    transition: opacity 0.15s ease-out, border-color 0.15s ease-out;
}

th.sortable-header::before { /* Up arrow */
    top: calc(50% - 0.375rem);
    border-bottom: 0.3125rem solid var(--text-muted-color);
}

th.sortable-header::after { /* Down arrow */
    top: calc(50% + 0.0625rem);
    border-top: 0.3125rem solid var(--text-muted-color);
}

th.sortable-header.sort-asc::before,
th.sortable-header.sort-desc::after {
    opacity: 1; /* Highlight active direction */
}
th.sortable-header.sort-asc::before {
    border-bottom-color: var(--primary-color);
}
th.sortable-header.sort-desc::after {
    border-top-color: var(--primary-color);
}

/* Lists (Generic Item List) */
.item-list {
    list-style: none;
    padding: 0;
    margin-top: 0.625rem;
}

.list-item {
    background-color: var(--surface-color);
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    border-radius: var(--border-radius);
    border: 0.0625rem solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
    transition: background-color 0.15s ease-out;
}
.list-item:hover {
    background-color: var(--surface-hover-color);
}

.list-item span strong { /* Emphasize key info */
    color: var(--text-color);
}

/* Cards (Pricing, Use Case, Testimonial) */
.pricing-card,
.use-case-item,
.testimonial-item {
    background-image: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    background-color: var(--surface-color);
    padding: 1.5rem; /* Consistent padding */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-muted-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    display: flex; /* Enable flexbox for layout */
    flex-direction: column; /* Stack content vertically */
}

.pricing-card:hover,
.use-case-item:hover,
.testimonial-item:hover {
    transform: translateY(-0.1875rem);
    box-shadow: var(--shadow-md);
}

.pricing-card h4,
.use-case-item h4 {
    margin-top: 0;
    margin-bottom: 0.625rem;
    color: var(--text-color); /* Default text color */
}
.pricing-card h4 { /* Specific override for pricing */
    color: var(--primary-color);
    font-size: 1.1em;
    text-align: center;
    flex-shrink: 0;
}

.testimonial-item {
    padding: 1.75rem; /* Slightly more padding */
    border-left: 0.25rem solid var(--primary-color); /* Accent border */
    margin: 0; /* Reset margin if needed */
}
.testimonial-item p {
    margin-bottom: 0.625rem;
    font-style: italic;
    color: var(--text-color);
}
.testimonial-item footer { /* Specific footer style */
    font-size: 0.9em;
    color: var(--text-muted-color);
    text-align: right;
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.625rem;
}

/* Tabs (General - for Account Page) */
.tab-container {
    margin-top: 1.25rem;
}

.tab-nav {
    display: flex;
    border-bottom: 0.0625rem solid var(--border-color);
    margin-bottom: 1.5rem;
}

.tab-nav button.tab-button {
    background-color: transparent;
    background-image: none;
    color: var(--primary-color);
    border: none;
    border-bottom: 0.125rem solid transparent;
    outline: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    margin-bottom: -0.0625rem; /* Overlap border */
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
    font-size: 1.125rem;
    font-weight: 600;
    box-shadow: none;
    border-radius: 0;
    position: relative;
}

.tab-nav button.tab-button:hover {
    color: var(--primary-hover);
    transform: none;
    box-shadow: none;
}

.tab-nav button.tab-button.active {
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
    transform: none;
    box-shadow: none;
}

.tab-content {
    display: none;
    padding: 0; /* Content padding handled by inner elements */
}

.tab-content.active {
    display: block;
}

.tab-content section { /* Sections within tabs */
    margin-bottom: 2rem;
    padding-bottom: 0;
    /*border-bottom: none;*/ /* Remove default section border */
}
.tab-content section:first-child {
     border-top: none;
     padding-top: 0;
}

.tab-content > h3, 
.tab-content > section > h3,
.tab-content > h4,
.tab-content > section > h4 { /* Headers within tabs (but not in dialogs) */
     margin-top: 0;
     border-bottom: 0.0625rem solid var(--border-muted-color);
     padding-bottom: 0.625rem;
     margin-bottom: 1.25rem;
}

/* Specific max-width for profile and credit distribution sections */
#user-detail-tabs #user-profile-section,
#user-detail-tabs #admin-distribute-credits-user {
    max-width: 43.75rem; /* 700px at 16px base */
    margin-left: auto;
    margin-right: auto;

    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--surface-color);
    box-shadow: var(--shadow-sm);
}

/* Admin Page Navigation */
.admin-nav {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    justify-content: center; /* Center the nav items */
}

.admin-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem; /* Space between nav items */
}

.admin-nav ul li {
    margin: 0; /* Remove default li margin */
}

.admin-nav ul li a.nav-button {
    display: inline-block;
    background-color: transparent;
    background-image: none; /* Ensure no gradient from general button styles */
    color: var(--primary-color);
    border: none;
    border-bottom: 2px solid transparent;
    outline: none;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px; /* Overlap border for active state simulation */
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    box-shadow: none; /* Ensure no shadow from general button styles */
    border-radius: 0; /* Ensure no radius from general button styles */
}

.admin-nav ul li a.nav-button:hover {
    color: var(--primary-hover);
    border-bottom-color: var(--primary-hover);
    background-color: transparent; /* Ensure no background on hover */
    transform: none; /* Ensure no transform from general button styles */
    box-shadow: none; /* Ensure no shadow from general button styles */
}

.admin-nav ul li a.nav-button.active {
    color: var(--text-color); /* Or your desired active text color */
    border-bottom-color: var(--primary-color); /* Or your desired active border color */
    font-weight: 700; /* Make active link bolder */
}


/* Light theme adjustments for admin-nav */
html.light-theme .admin-nav {
    border-bottom-color: var(--border-color);
}

html.light-theme .admin-nav ul li a.nav-button {
    color: var(--primary-color);
}

html.light-theme .admin-nav ul li a.nav-button:hover {
    color: var(--primary-hover);
    border-bottom-color: var(--primary-hover);
}

html.light-theme .admin-nav ul li a.nav-button.active {
    color: var(--text-color); /* Or your desired light theme active text color */
    border-bottom-color: var(--primary-color); /* Or your desired light theme active border color */
}

/* Admin Dashboard Summary Cards */
.admin-dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.summary-card {
    background-color: var(--background-offset);
    padding: 1.5rem;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-elevation-low);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.summary-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    color: var(--text-color);
    border-bottom: none; /* Override general h3/h4 styles if they have a border */
}

.summary-card .metric-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.summary-card .card-link {
    margin-top: auto; /* Pushes link to the bottom */
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease-out;
}

.summary-card .card-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Light theme adjustments for summary cards */
html.light-theme .summary-card {
    background-color: var(--background-offset);
    border-color: var(--border-color);
}

html.light-theme .summary-card h3 {
    color: var(--text-color);
}

html.light-theme .summary-card .metric-value {
    color: var(--primary-color);
}

html.light-theme .summary-card .card-link {
    color: var(--primary-color);
}

html.light-theme .summary-card .card-link:hover {
    color: var(--primary-hover);
}

/* Admin Stats Grid (for resource limits summary) */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.admin-stats-card {
    background-color: var(--background-offset);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    text-align: center;
}

.admin-stats-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.admin-stats-value {
    display: block;
    font-size: 1.125rem;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.4;
}

/* Info Box */
.info-box {
    background-color: var(--background-offset);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.info-box p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.95rem;
}

.info-box strong {
    color: var(--primary-color);
}

/* Form Row for multiple inputs in a line */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-row .form-section {
    margin-bottom: 0;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Light theme adjustments */
html.light-theme .admin-stats-card {
    background-color: var(--background-offset);
    border-color: var(--border-color);
}

html.light-theme .info-box {
    background-color: var(--background-offset);
    border-color: var(--border-color);
}

/* Field Help Text */
.field-help {
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.field-help.text-danger {
    color: #d32f2f;
}

/* Code inline styling */
code {
    background-color: var(--background-offset);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
    color: var(--primary-color);
}

/* Cookie Consent Banner */
#cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(0.3125rem);
    -webkit-backdrop-filter: blur(0.3125rem);
    color: var(--text-color);
    padding: 0.9375rem 1.25rem;
    box-shadow: 0 -0.125rem 0.625rem rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    box-sizing: border-box;
}

#cookie-consent-banner p {
    margin: 0;
    margin-right: auto;
}

#cookie-consent-banner a {
    color: var(--primary-color);
    text-decoration: underline;
}

#cookie-consent-banner button {
    margin-left: 0.625rem;
    cursor: pointer;
}

#cookie-consent-banner #cookie-accept-btn { /* Primary accept button */
    background-image: linear-gradient(to bottom, var(--primary-color), #0071E3);
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color); /* Ensure border matches */
}
#cookie-consent-banner #cookie-accept-btn:hover {
    background-image: linear-gradient(to bottom, var(--primary-hover), #007BFF);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Status Messages (General) */
.status-message {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    border: 0.0625rem solid transparent;
}

.status-message.success {
    color: var(--success-color);
    background-color: rgba(var(--success-rgb), 0.1);
    border-color: rgba(var(--success-rgb), 0.2);
}

.status-message.error {
    color: var(--danger-color);
    background-color: rgba(var(--danger-rgb), 0.1);
    border-color: rgba(var(--danger-rgb), 0.2);
}
.status-message.warning {
    color: var(--warning-color);
    background-color: rgba(var(--warning-rgb), 0.1);
    border-color: rgba(var(--warning-rgb), 0.2);
}

/* Status indicator text colors */
.status-synced { color: var(--success-color); }
.status-error { color: var(--danger-color); }
.status-pending { color: var(--warning-color); }
.status-unknown { color: var(--text-muted-color); }
.status-skipped { color: var(--text-muted-color); font-style: italic; }
/* Also used in instance list */
.status-running { color: var(--success-color); }
.status-stopped { color: var(--warning-color); } /* Can also be text-muted-color depending on context */
.status-disabled { color: var(--text-muted-color); }
.status-failed { color: var(--danger-color); }
.status-success { color: var(--success-color); }

/* Status badge for transfers and other inline status indicators */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
}
.status-badge.status-success {
    background-color: rgba(52, 211, 153, 0.1);
    color: var(--success-color);
}
.status-badge.status-pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

/* API Key Status Styles */
.revoked-key {
    opacity: 0.6;
}

.revoked-key td {
    color: var(--text-muted-color);
}

.revoked-status {
    color: var(--danger-color);
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--danger-color);
    border-radius: var(--border-radius);
    display: inline-block;
    font-size: 0.875em;
}

/* Light theme adjustments for API key status */
html.light-theme .revoked-key td {
    color: var(--text-muted-color);
}

html.light-theme .revoked-status {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

/* API Key Creation Dialog */
#create-api-key-dialog {
    max-width: 700px; /* Wider to accommodate permissions */
    width: 90%;
}

#create-api-key-dialog .modal-content {
    max-height: calc(100vh - 2rem);
    overflow: visible;
}

#create-api-key-dialog .dialog-scrollable-content {
    max-height: calc(100vh - 10rem); /* Account for header and some margin */
    overflow-y: auto;
}

/* API Key Permissions Styles */
.permissions-groups {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--input-background-color);
}

.quick-select-permissions {
    margin-bottom: 1rem;
}

.quick-select-permissions button {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.permission-group {
    padding: 1rem;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.permission-group h5 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.permission-item label {
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: background-color 0.15s ease;
}

.permission-item label:hover {
    background-color: var(--surface-hover-color);
}

.permission-item input[type="checkbox"]:disabled + div {
    opacity: 0.5;
}

/* Light theme adjustments for permissions */
html.light-theme .permissions-groups {
    background-color: var(--background-color);
}

html.light-theme .permission-group {
    background-color: var(--surface-color);
}


.hidden { /* General utility to hide elements */
    display: none;
}

/* Icons */
.icon {
  display: inline-block;
  vertical-align: -0.175em; /* Fine-tune vertical alignment */
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  width: 1em; /* Default size relative to font */
  height: 1em;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon variations */
.step-icon .icon { /* Icons used in steps */
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  stroke-width: 1.5;
}
.step-icon { /* Container for step icons */
  font-size: 3em;
  color: var(--primary-color);
  margin-bottom: 0.625rem;
  line-height: 1;
}

.feature-icon .icon,
.use-case-item h4 .icon,
.auth-icon .icon,
button .icon,
.status-message .icon { /* Common icon usage */
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4em; /* Space after icon */
  vertical-align: -0.2em; /* Adjust alignment */
}

.feature-icon { /* Container for feature icons */
  color: var(--success-color);
  margin-right: 0.75rem;
  font-size: 1.5em;
  line-height: 1.2;
  flex-shrink: 0;
}
.feature-icon .icon {
  stroke-width: 2;
}

.use-case-item h4 .icon {
   width: 0.9em;
   height: 0.9em;
   vertical-align: -0.1em;
}

.auth-icon { /* Container for auth provider icons */
    margin-right: 0.625rem;
    line-height: 1;
    flex-shrink: 0;
}
.auth-icon .icon {
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: -0.25em;
}
.icon.icon-google, /* Specific filled icons */
.icon.icon-github {
  fill: currentColor;
  stroke: none;
}
.auth-icon .icon.icon-github {
  fill: var(--text-color); /* Override for GitHub icon */
}

.status-message .icon {
    stroke-width: 2;
}
.status-message.success .icon { stroke: var(--success-color); }
.status-message.error .icon { stroke: var(--danger-color); }
.status-message.warning .icon { stroke: var(--warning-color); }

/* Help Icon Link */
.header-with-help {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
h2.header-with-help { margin-bottom: 0.5em; } /* Adjust spacing */

.help-icon-link {
  display: inline-flex;
  vertical-align: middle;
  color: var(--text-muted-color); /* Muted by default */
  transition: color 0.2s ease;
  line-height: 1;
  margin-left: 0.2em;
}
.help-icon-link:hover { color: var(--primary-color); }

.help-icon {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  margin-top: .25rem; /* Align with text */
}

/* Number Input Controls (e.g., for quantity) */
.number-input-controls {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.number-input-controls input[type="number"] {
    max-width: 5rem;
    text-align: center;
    margin-bottom: 0;
    -moz-appearance: textfield; /* Hide spinners in Firefox */
}
.number-input-controls input[type="number"]::-webkit-outer-spin-button,
.number-input-controls input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide spinners in Chrome/Safari */
    margin: 0;
}

.control-button { /* +/- buttons */
    background-color: var(--surface-hover-color);
    color: var(--text-color);
    border: 0.0625rem solid var(--border-color);
    padding: 0;
    width: 2.375rem; /* Fixed size */
    height: 2.375rem;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 2.25rem; /* Center content */
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
    box-shadow: none;
    flex-shrink: 0;
}

.control-button:hover {
    background-color: #3C3C3E; /* Darker hover */
    border-color: var(--primary-color);
    transform: none;
    box-shadow: none;
}

.control-button:active {
    background-color: var(--surface-color); /* Lighten on active */
    transform: none;
    box-shadow: none;
}

.control-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--surface-hover-color); /* Keep base color */
    border-color: var(--border-color);
}

.admin-actions { /* For admin page action bars, e.g., user detail page */
    margin-bottom: 1.25rem; /* 20px */
    padding: 0.75rem; /* Add some padding */
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center; /* Vertically align items */
    background-color: var(--surface-color); /* Give it a slight background */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-muted-color);
}

.admin-actions button,
.admin-actions .cta-button {
    margin: 0; /* Remove default button margins if any */
    min-width: 6rem; /* Ensure buttons have a decent minimum width */
}

.admin-controls { /* For filter/search bars in admin tables */
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    align-items: center;
}

.admin-controls input[type="search"],
.admin-controls input[type="date"],
.admin-controls input[type="text"],
.admin-controls select {
    flex-grow: 1; /* Allow inputs to take available space */
    min-width: 10rem; /* Minimum width for inputs */
    margin-bottom: 0; /* Remove bottom margin if they are in a flex row */
}


/* ==========================================================================
   5. Page-Specific Styles
   ========================================================================== */

/* Homepage Styles */
.hero-section {
    background-color: var(--background-color); /* Match body background */
    padding-bottom: 5rem;
    border-bottom: 0.0625rem solid var(--border-muted-color);
    text-align: center;
}

.hero-title {
    font-size: 3.5em;
    color: var(--text-color);
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 1.2em;
    color: var(--text-muted-color);
    max-width: 43.75rem; /* 700px */
    margin: 0 auto 2rem auto;
    line-height: 1.65;
}

.hero-subtext {
    font-size: 1.2em;
    margin-top: 0.9375rem;
    color: var(--text-muted-color);
}

/* Animated Word in Hero */
.animated-word-container {
    display: inline-block;
    text-align: center;
    width: 14rem; /* Adjust width as needed */
    vertical-align: bottom;
}
#hero-animated-word {
    display: inline-block;
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}
#hero-animated-word.fade-out {
    opacity: 0;
    transform: scale(0.925);
    filter: blur(.35rem);
}

/* Hero Deploy Input */
.hero-deploy-input-container {
    margin-top: 2.5rem;
    background-color: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    max-width: 45rem; /* 720px */
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-muted-color);
}

.deploy-mode-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.mode-button {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.5rem 1rem;
    margin-bottom: -1px; /* Overlap border */
    border: none;
    border-bottom: 0.125rem solid transparent;
    background-color: transparent;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0;
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
    box-shadow: none;
    background-image: none;
    text-align: center;
}

.mode-button:hover {
    color: var(--primary-hover);
    background-color: transparent;
    transform: none;
    box-shadow: none;
    background-image: none;
}

.mode-button.active {
    background-color: transparent;
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
    box-shadow: none;
    transform: none;
    background-image: none;
    border-radius: 0;
}

.deploy-input-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.deploy-input-group {
    display: none; /* Hide inactive groups */
}

.deploy-input-group.active {
    display: block; /* Show active group */
}

.deploy-input-area input[type="url"],
.deploy-input-area textarea {
    width: 100%;
    padding: 0.625rem;
    margin-bottom: 0;
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--input-background-color);
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
    font-family: var(--font-family);
}

.deploy-input-area textarea {
    resize: none;
    height: 4.175rem; /* Approx 3 lines */
}

.deploy-input-area input[type="url"]:focus,
.deploy-input-area textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.3);
    background-color: var(--input-background-color);
}

.deploy-input-area input[type="url"]::placeholder,
.deploy-input-area textarea::placeholder {
    color: var(--text-muted-color);
    opacity: 0.8;
}

#hero-deploy-button {
    width: auto; /* Don't force full width */
    display: inline-block;
    margin-top: 0.75rem;
}

/* Icon Suggestions for Describe Mode */
.env-icon-suggestions {
    display: none; /* Hidden by default */
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-deploy-input-container[data-active-mode="describe"] .deploy-input-describe .env-icon-suggestions {
    display: flex; /* Show only in describe mode */
}

.icon-suggestion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-muted-color);
    color: var(--text-color);
    padding: 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.75rem;
    width: 70px; /* Fixed width */
    text-align: center;
    box-shadow: none;
    background-image: none;
    transition: border-color 0.15s ease-out, color 0.15s ease-out; /* Add transition */
}
.icon-suggestion:hover, .icon-suggestion:active { /* Add hover state */
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-image: none;
    background-color: transparent;
}

.icon-suggestion i { /* Assuming FontAwesome or similar */
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-bottom: 4px;
    color: currentColor; /* Inherit color */
}

.icon-suggestion span {
    display: block;
    line-height: 1.2;
}

/* How It Works Section */
#how-it-works { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* Spacing */

.steps-container {
    display: flex;
    gap: 1.875rem;
    text-align: center;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 1.25rem;
}

.step-item {
    flex: 1;
    min-width: 15.625rem; /* 250px */
    padding: 0.9375rem;
}
/* .step-icon handled in Components */

/* Features Section */
#features { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* Spacing */

.feature-list {
    list-style: none;
    padding: 0;
    max-width: 50rem; /* 800px */
    margin: 0 auto;
}

.feature-item {
    margin-bottom: 0.9375rem;
    display: flex;
    align-items: flex-start;
    font-size: 1.05em;
}
/* .feature-icon handled in Components */

/* Use Cases Section */
#use-cases { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* Spacing */

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* Responsive grid */
    gap: 1.5rem;
    margin-top: 1.5rem;
}
/* .use-case-item handled in Components */

/* Pricing Section */
#pricing { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* Spacing */

.pricing-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); /* Responsive grid */
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
/* .pricing-card handled in Components */

.pricing-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 0.625rem 0;
    font-size: 0.9em;
    color: var(--text-muted-color);
    flex-grow: 1; /* Allow specs to take available space */
    flex-shrink: 0;
}

.pricing-specs li {
    margin-bottom: 0.1875rem;
    display: flex;
    justify-content: space-between;
}
.pricing-specs li strong {
    color: var(--text-color);
    margin-right: 0.5rem;
    white-space: nowrap;
}

.pricing-cost-wrapper {
    flex-shrink: 0;
    margin-top: auto; /* Push to bottom */
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pricing-cost {
    border-top: 0.0625rem solid var(--border-muted-color);
    padding-top: 0.625rem;
    text-align: center;
}
.pricing-cost.custom-pricing { /* For contact button */
    border-top: none;
    padding-top: 0.25rem;
    margin-top: auto;
}

.pricing-cost .cost-label {
    display: block;
    font-size: 0.8em;
    color: var(--text-muted-color);
    margin-bottom: 0.125rem;
}

.cost-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    margin-top: 0.25rem;
}
.cost-details-custom { /* For contact button */
    margin-top: 0.5rem;
    text-align: center;
}
.cost-details-custom .cta-button.secondary {
    padding: 0.4rem 0.9rem;
    font-size: 0.85em;
    width: 100%;
}

.cost-figures {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.cost-credits,
.cost-dollars {
    display: block;
    font-weight: 600;
}

.cost-credits {
    font-size: 1.0em;
    color: var(--text-color);
}
.cost-dollars {
    font-size: 0.8em;
    color: #666666; /* Muted dollar amount */
    font-style: italic;
}

.cost-unit {
    font-size: 0.85em;
    color: var(--text-muted-color);
    white-space: nowrap;
}

.pricing-cost.gpu-cost .cost-credits { /* Highlight GPU cost */
    color: var(--primary-color);
}
.pricing-cost.gpu-cost .cost-dollars {
    font-size: 0.8em;
    color: #666666;
    font-style: italic;
}

.pricing-highlight { /* Standalone pricing text */
    margin: 1.25rem 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center; /* Center highlight */
}

#pricing .cta-button.secondary { /* Button within pricing section */
    margin-top: 0.9375rem;
}

/* Pricing Examples Section */
#pricing-examples { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* Spacing */

#pricing-examples p { /* Description text */
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: var(--text-muted-color);
    margin-bottom: 1.25rem;
}

.pricing-table-container { /* Allow horizontal scroll on small screens */
    overflow-x: auto;
    margin: 1.25rem 0;
}

#pricing-examples table {
    margin-bottom: 0.625rem;
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Clip corners */
}

#pricing-examples th {
    background-color: var(--surface-color);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
}

#pricing-examples td {
    font-size: 0.95em;
}

#pricing-examples tbody tr:hover {
    background-color: var(--surface-color); /* No hover effect */
}

#pricing-examples td:nth-child(1) { /* First column (scenario) */
    font-weight: 600;
    color: var(--text-color);
}

#pricing-examples td:nth-child(5), /* Cost columns */
#pricing-examples td:nth-child(6) {
    font-weight: 600;
    color: var(--primary-color);
}

.pricing-footnote {
    font-size: 0.85em !important; /* Override p */
    color: var(--text-muted-color) !important; /* Override p */
    text-align: center;
    margin-top: 0.625rem;
}
#pricing-examples .pricing-footnote { /* Specific footnote */
    margin-top: 0.9375rem;
}

/* Testimonials Section */
#testimonials { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* Spacing */

.testimonials-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); /* Responsive grid */
    gap: 1.25rem;
    margin-top: 1.25rem;
}
/* .testimonial-item handled in Components */

/* Final CTA Section */
#final-cta { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* Spacing */

.final-cta-section {
    background-color: var(--surface-color);
    color: var(--text-color);
    padding: 3.125rem 1.5rem; /* Adjusted padding */
    margin-top: 3.5rem; /* Adjusted margin */
    border-radius: var(--border-radius);
    border: 0.0625rem solid var(--border-muted-color); /* Added border */
    text-align: center;
}

.final-cta-title {
    color: var(--text-color);
    margin-bottom: 0.9375rem;
}

/* Deploy Simulator Section (if separate from final CTA) */
#deploy-simulator {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 2.5rem 1.5rem;
    border: 0.0625rem solid var(--border-muted-color);
    margin-top: 2rem;
}

/* Terminal Demo on Homepage */
.terminal-demo-wrapper {
    position: relative;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.terminal-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
    z-index: 5;
    border-radius: var(--border-radius);
}

.terminal-deploy-button {
    position: absolute;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s 0.3s, transform 0.3s ease-out;
    padding: 0.75rem 1.5rem;
    font-size: 1.1em;
    background-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: scale(0.95);
    background-image: none; /* Override default button gradient */
}

.terminal-backdrop.visible,
.terminal-deploy-button.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out, visibility 0s 0s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1);
}

.terminal-deploy-button:hover {
    background-color: var(--primary-hover);
    transform: scale(1.05); /* Slight grow on hover */
}

/* Auth Page Styles */
.auth-section {
    max-width: 25rem; /* 400px */
    margin: 0 auto; /* Center vertically and horizontally */
    padding: 2.5rem;
    background-color: var(--surface-color);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.auth-section h2 {
    margin-bottom: 0.625rem;
    font-size: 1.8em;
    text-align: center; /* Center heading */
}

.auth-section > p:first-of-type { /* Subtitle */
    margin-bottom: 1.5625rem;
    color: var(--text-muted-color);
    text-align: center; /* Center subtitle */
}

.auth-provider-prompt {
    color: var(--text-muted-color);
    font-size: 0.9em;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem; /* Add space above */
    border-top: 0.0625rem solid var(--border-muted-color);
    padding-top: 1.25rem;
    text-align: center; /* Center prompt */
}

.auth-options {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    align-items: center;
}

.auth-options .cta-button { /* Provider buttons */
    background-color: var(--surface-hover-color);
    color: var(--text-color);
    box-shadow: none;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: background-color 0.15s ease-out, transform 0.1s ease-out, box-shadow 0.15s ease-out;
}
.auth-options .cta-button:hover {
    background-color: #3C3C3E; /* Darker hover */
    color: var(--text-color);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-sm);
}
.auth-options .cta-button:active {
    transform: translateY(0rem);
    background-color: var(--surface-hover-color);
    box-shadow: none;
}
/* .auth-icon handled in Components */

.auth-terms {
    margin-top: 2.1875rem;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    line-height: 1.4;
    text-align: center; /* Center terms */
}

.auth-terms a {
    color: var(--text-muted-color);
    text-decoration: underline;
}
.auth-terms a:hover {
    color: var(--primary-color);
}

/* Account Page Styles */
.page-description { /* General description for account pages */
    color: var(--text-muted-color);
    margin-bottom: 1.25rem;
    font-size: 1.1em;
}

/* Billing Section */
.credit-balance-display {
    font-size: 2.5em;
    color: var(--primary-color);
    margin: 0.625rem 0;
    font-weight: 600;
}

.balance-description {
    color: var(--text-muted-color);
    font-size: 0.9em;
}

.top-up-form {
    max-width: 25rem;
    margin: 1.5rem auto 0 auto; /* Add top margin */
}

.top-up-form label {
    margin-bottom: 0.5rem;
}

.top-up-form select {
    margin-bottom: 1.25rem;
}

.top-up-form .cta-button {
    width: 100%;
}

/* Custom Amount Input (Billing) */
.custom-amount-section {
    margin-top: 1rem; /* Adjusted margin */
    padding: 0.9375rem;
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color); /* Use surface color */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.custom-amount-section label {
    font-weight: bold;
    margin-bottom: 0;
}

.custom-amount-section input[type="number"] {
    padding: 0.625rem;
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #252525; /* Match other inputs */
    color: var(--text-color);
    width: auto;
    max-width: 9.375rem; /* Limit width */
    -moz-appearance: textfield;
}

.custom-amount-section input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.3);
}

.custom-amount-section input[type="number"]::-webkit-outer-spin-button,
.custom-amount-section input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-amount-section .input-description {
    font-size: 0.85em;
    color: var(--text-muted-color);
}

/* Billing History Table */
#history-table td, #history-table th {
    vertical-align: middle;
}
#history-table td:nth-child(3), /* Align numeric columns right */
#history-table td:nth-child(4),
#history-table td:nth-child(5) {
    text-align: right;
    font-family: monospace; /* Use monospace for numbers */
}
#history-table th:nth-child(3),
#history-table th:nth-child(4),
#history-table th:nth-child(5) {
    text-align: right;
}

#billing-history {
    max-width: 100%;
}
#billing-history .no-items-message { /* Message when table is empty */
    padding: 1.25rem;
    text-align: center;
    border: 0.0625rem solid var(--border-muted-color);
    border-top: none; /* Attach to table header */
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin-top: -0.0625rem; /* Overlap border */
    color: var(--text-muted-color);
}

/* Connections (Account Settings) */
#connections-list .cta-button.secondary { /* Style for GitHub connect button */
    background-color: #21262d; /* GitHub dark button color */
    color: #c9d1d9; /* GitHub light text */
    border-color: rgba(240, 246, 252, 0.1); /* GitHub border */
}
#connections-list .cta-button.secondary:hover {
    background-color: #30363d; /* GitHub dark hover */
    border-color: #8b949e; /* GitHub border hover */
    color: #c9d1d9;
}

/* Danger Zone (Account Settings) */
.danger-zone {
    border: 0.0625rem solid var(--danger-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-top: 1.875rem;
    background-color: rgba(var(--danger-rgb), 0.05); /* Subtle red background */
}

.danger-zone-title {
    color: var(--danger-color);
    border-bottom: 1px solid rgba(var(--danger-rgb), 0.3); /* Red border */
    padding-bottom: 0.5rem; /* Add padding */
    margin-bottom: 1rem; /* Add margin */
}

.danger-zone p {
    color: var(--text-muted-color);
}

.danger-zone strong {
    color: var(--danger-color);
}

#delete-account-btn.cta-button.danger { /* Specific delete button style */
     background-color: #da3633; /* GitHub danger color */
    color: #ffffff;
    border-color: rgba(240, 246, 252, 0.1);
    margin-bottom: 1rem;
}
#delete-account-btn.cta-button.danger:hover {
    background-color: #f85149; /* GitHub danger hover */
    border-color: rgba(240, 246, 252, 0.1);
    color: #ffffff;
}

/* Sign Out Section */
#sign-out {
    margin-top: 1.875rem;
    padding-top: 1.25rem;
    border-top: 0.0625rem solid var(--border-color);
}

/* Repos Page Styles */
#repo-list ul { /* Reset list styles */
    list-style: none;
    padding: 0;
}

#repo-list li { /* Style list items */
    background-color: transparent; /* Use main background */
    padding: 1rem 1.5rem;
    margin-bottom: 0; /* Remove bottom margin */
    border-radius: 0; /* Remove radius */
    border: none; /* Remove border */
    border-top: 0.0625rem solid var(--border-muted-color); /* Use top border as separator */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.15s ease-out;
}
#repo-list li:hover {
    background-color: var(--surface-hover-color);
}
#repo-list li:first-child {
    border-top: none; /* Remove top border for first item */
}

#repo-list li > div:first-child { /* Allow repo name/desc to grow */
    flex-grow: 1;
    margin-right: 1rem; /* Add space before actions */
}

#repo-list li a:not(.cta-button) { /* Repo name link */
    font-weight: 600;
    color: var(--primary-color);
}

.repo-description {
    font-size: 0.875rem;
    color: var(--text-muted-color);
    margin: 0.25rem 0 0 0;
}

.repo-actions {
    text-align: right;
    margin-left: 1rem;
    white-space: nowrap; /* Prevent wrapping */
    flex-shrink: 0; /* Prevent shrinking */
}

.repo-actions span { /* Last updated text */
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

#repo-list .cta-button.secondary { /* Smaller buttons in list */
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

/* Repo Detail Page Styles */
#repo-title .repo-owner,
#repo-title .repo-name { /* Style owner/name in title */
    font-weight: 400;
    color: var(--primary-color);
}

#launch-resource-btn { /* Button specific to repo detail */
    margin-bottom: 0.625rem;
}

/* Deployments & Resources List (Shared Styles) */
#resource-list ul { /* Reset list styles */
    list-style: none;
    padding: 0;
}

#resource-list li { /* Style list items */
    background-color: transparent;
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-top: 0.0625rem solid var(--border-muted-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to top */
    transition: background-color 0.15s ease-out;
}
#resource-list li:hover {
    background-color: var(--surface-hover-color);
}
#resource-list li:first-child {
    border-top: none;
}

.resource-item { /* Alias for #resource-list li */
    align-items: flex-start;
}

.resource-details {
    flex-grow: 1;
    margin-right: 1rem;
}

.instance-details strong { /* Instance name/ID */
    color: var(--text-color);
}

.instance-details .status {
    display: inline-block;
    margin: 0.25rem 0;
    font-weight: 600;
}
.status-running { color: var(--success-color); }
.status-stopped { color: var(--warning-color); }
.status-disabled { color: var(--text-muted-color); }

.instance-details .instance-created { /* Timestamp */
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.instance-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center; /* Align buttons vertically */
    margin-top: 0.25rem; /* Align with status text */
}

#instance-list .cta-button { /* Smaller buttons in list */
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

/* Deployment Detail Page Styles */
#deployment-config-display { /* Display config */
    background-color: var(--surface-color);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.9375rem;
    font-family: monospace;
    color: var(--text-muted-color);
    white-space: pre-wrap; /* Wrap long lines */
    word-break: break-all; /* Break long words */
}

.logs-container { /* Display logs */
    background-color: var(--surface-color);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.9375rem;
    height: 18.75rem; /* 300px */
    overflow-y: scroll;
    font-family: monospace;
    font-size: 0.8125rem; /* Smaller font for logs */
    color: var(--text-muted-color);
    white-space: pre-wrap;
    word-break: break-all;
}

/* VM Detail Page Styles */
.stats-list { /* VM stats */
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1.5625rem;
    flex-wrap: wrap;
    color: var(--text-muted-color);
    margin-bottom: 1.5rem; /* Add margin below stats */
}

.stats-item strong {
    color: var(--text-color);
    font-weight: 600;
    margin-left: 0.3125rem;
}

/* Comments (VM Detail) */
.comment {
    background-color: var(--surface-color);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    border: 0.0625rem solid var(--border-color);
    position: relative;
    box-shadow: var(--shadow-sm);
}

.comment p {
    margin-bottom: 0.3125rem;
}

.comment span { /* Timestamp/author */
    font-size: 0.85em;
    color: var(--text-muted-color);
}

#new-comment-form {
    margin-top: 1.25rem;
}

#new-comment-form textarea {
    min-height: 6.25rem; /* 100px */
    margin-bottom: 0.625rem;
}

/* Create VM Page Styles */
#create-vm-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}
#add-repo-form { /* Style added for consistency with create-vm-form */
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

#create-vm-form label {
    display: block;
    font-weight: bold;
    color: var(--text-color);
}

/* Config Sliders (Create VM) */
.config-slider {
    width: 100%;
    cursor: pointer;
    height: 8px;
    background: var(--background-color);
    border-radius: calc(var(--border-radius) / 2);
    border: 1px solid var(--border-color);
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease-out;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.config-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    /* border: 2px solid var(--background-color); */
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.config-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    /* border: 2px solid var(--background-color); */
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.gpu-requirement { /* Text next to GPU slider */
    font-size: 0.85em;
    color: var(--text-muted-color);
    margin-left: auto; /* Push to the right */
}

/* Cost Estimator (Create VM) */
#cost-estimator {
    padding: 1rem 1.5rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    margin-top: 1.5rem; /* Add space above */
}

#cost-estimator h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
    border-bottom: none;
    padding-bottom: 0;
}

#cost-estimator p {
    margin: 0.25rem 0;
    font-size: 1.1em;
    color: var(--text-color);
}

#cost-estimator span { /* Highlighted cost */
    font-weight: bold;
    color: var(--primary-color);
}

#cost-estimator p:last-child { /* Fine print */
    font-size: 0.9em;
    color: var(--text-muted-color);
}

#create-vm-form button[type="submit"] {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1.1em;
    margin-top: 1rem;
}

/* VMs Page Styles */
.vm-create-button { /* Button to navigate to create page */
    margin-bottom: 1.25rem;
}

.vm-specs { /* Specs shown in VM list */
    font-size: 0.75em;
    color: var(--text-muted-color);
    line-height: 1.3;
    white-space: normal; /* Allow wrapping */
    display: block; /* Ensure it takes full width */
    margin-top: 0.25rem;
}

/* Terminal Page Styles */
.terminal-section { /* Container for terminal */
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 2rem 1.5rem;
    border: 0.0625rem solid var(--border-muted-color);
    margin-top: 3.5rem;
}

.terminal-section h3 {
    margin-bottom: 1rem;
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
}

#terminal-container { /* xterm.js container */
    border: 0.0625rem solid var(--border-muted-color);
    border-radius: calc(var(--border-radius) - 0.125rem); /* Inner radius */
    overflow: hidden;
    min-height: 15.625rem; /* 250px */
    box-shadow: inset 0 0.0625rem 0.1875rem rgba(0,0,0,0.2);
}

#terminal-container .xterm-viewport { /* xterm viewport */
    border-radius: calc(var(--border-radius) - 0.125rem);
}

/* Terminal Scrollbar */
#terminal-container ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
#terminal-container ::-webkit-scrollbar-thumb {
    background-color: var(--text-muted-color);
    border-radius: 0.25rem;
    border: 0.125rem solid var(--surface-color); /* Match terminal background */
}
#terminal-container ::-webkit-scrollbar-track {
    background: var(--surface-color);
    border-radius: 0.25rem;
}
#terminal-container .xterm-viewport { /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted-color) var(--surface-color);
}

/* Hero Terminal Carousel */
.hero-ai-demo {
    margin: 2rem auto;
    max-width: 900px;
}

.hero-terminal-container {
    background-color: transparent;
    border-radius: 8px;
    padding: 0;
    text-align: left;
}

#hero-terminal-carousel {
    width: 100%;
    min-height: 450px;
}

/* Override carousel styles for hero section */
#hero-terminal-carousel .terminal-carousel {
    background: #1a1a1a;
    border: 1px solid rgba(26, 115, 232, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#hero-terminal-carousel .carousel-player-container {
    min-height: 400px;
    background: #000;
}

/* Ensure asciinema player fits properly */
#hero-terminal-carousel .asciinema-player-wrapper {
    width: 100% !important;
    height: 400px !important;
}

#hero-terminal-carousel .asciinema-terminal {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Hide asciinema controls in hero carousel */
#hero-terminal-carousel .asciinema-player-wrapper .control-bar {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #hero-terminal-carousel .carousel-player-container {
        min-height: 300px;
    }
    
    #hero-terminal-carousel .asciinema-player-wrapper {
        height: 300px !important;
    }
    
    #hero-terminal-carousel .asciinema-terminal {
        font-size: 12px !important;
    }
}

/* Hide xterm helper textarea - using general selector since it might be appended to body */
.xterm-helper-textarea {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    resize: none !important;
    z-index: -10 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Hide cursor in hero terminal */
#hero-terminal .xterm-cursor-layer {
    display: none !important;
}

#hero-terminal .xterm-cursor {
    display: none !important;
    visibility: hidden !important;
}


.hero-ai-prompt {
    margin-bottom: 1rem;
}

.hero-ai-prompt-label {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--primary-color);
}

.hero-ai-prompt-text {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.75rem;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
}

.hero-terminal-label {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--primary-color);
}

.hero-terminal-status {
    color: var(--primary-color);
    margin: 0.75rem 0 0 0;
    font-weight: 600;
    text-align: center;
}

.terminal-back-link { /* Link to go back from terminal */
    color: var(--text-muted-color);
    display: block; /* Make it block level */
    margin-bottom: 1rem; /* Add space below */
}

/* Contact Page Styles */
.contact-page-main { /* Specific main adjustments if needed */
    /* Example: max-width: 60rem; */
}

.contact-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.contact-header h2 {
    font-size: 2.5em;
    margin-bottom: 0.5rem;
}

.contact-header .page-description {
    font-size: 1.1em;
    color: var(--text-muted-color);
    max-width: 40rem; /* Limit width */
    margin-left: auto;
    margin-right: auto;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr; /* Two columns */
    gap: 3rem;
    align-items: start; /* Align tops */
}

.contact-info h3,
.contact-form-section h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.6em;
    border-bottom: 1px solid var(--border-muted-color);
    padding-bottom: 0.5rem;
}

.contact-info > p { /* Description in info section */
    color: var(--text-muted-color);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.contact-options { /* Grid for email/discord */
    margin-top: 1.5rem;
    display: grid;
    gap: 2rem;
}

.contact-option {
    display: grid;
    grid-template-columns: auto 1fr; /* Icon | Content */
    gap: 1rem;
    align-items: start;
}

.contact-option svg.icon { /* Style contact icons */
    width: 1.75rem;
    height: 1.75rem;
    stroke: var(--primary-color);
    stroke-width: 1.5;
    align-self: start;
    margin-top: 0.1em;
}

.contact-option h4 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-size: 1.1em;
    color: var(--text-color);
    border-bottom: none;
    padding-bottom: 0;
}

.contact-option p {
    margin-bottom: 0.25rem;
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--text-muted-color);
}
.contact-option p a {
    font-weight: 500;
    color: var(--primary-color);
}

.response-time-note {
    margin-top: 2rem;
    font-size: 0.85em;
    font-style: italic;
    color: var(--text-muted-color);
}

.contact-form-section #contact-form {
    margin-top: 0; /* Reset form margin */
}

.contact-form-section select {
    margin-bottom: 1rem; /* Ensure spacing below select */
}

/* Docs Page Styles */
.docs-sidebar h3 { /* Sidebar section titles */
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.1em;
}

.docs-sidebar ul { list-style: none; padding-left: 0; margin-left: 0; }
.docs-sidebar ul ul { /* Nested lists */
    margin-left: 1em;
    padding-left: 0.5em;
    border-left: 0.0625rem solid var(--border-muted-color);
    margin-top: 0.5em;
}
.docs-sidebar li { margin-bottom: 0.1em; }

.docs-sidebar a { /* Sidebar links */
    display: block; padding: 0.4em 0.6em; text-decoration: none;
    color: var(--text-muted-color);
    font-size: 0.95em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border-left: 0.125rem solid transparent;
    padding-left: calc(0.6em - 0.125rem); /* Account for border */
}
.docs-sidebar a:hover {
    background-color: var(--surface-hover-color);
    color: var(--text-color);
}
.docs-sidebar a.sidebar-active { /* Active link */
     font-weight: 600;
     color: var(--primary-color);
     border-left-color: var(--primary-color);
     background-color: transparent; /* Remove hover background */
}

.docs-sidebar > ul > li > a { /* Top-level links */
    font-weight: 500;
    color: var(--text-color);
}
.docs-sidebar > ul > li > a.sidebar-active {
    font-weight: 600; /* Ensure active top-level is bold */
}

/* Docs Search */
.docs-search-input {
    width: 100%;
    margin-bottom: 0.9375rem;
    /*
    width: 100%;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.9375rem;
    border: 0.0625rem solid var(--border-color);
    border-radius: 0.25rem;
    background-color: var(--surface-color);
    color: var(--text-color);
    box-sizing: border-box;
    font-size: 0.9em;
    */
}
/*.docs-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.3);
} */
.docs-search-input::-webkit-search-cancel-button { /* Clear button */
    -webkit-appearance: none; appearance: none;
    height: 1.125rem; width: 1.125rem;
    margin-left: 0.3125rem; margin-right: -0.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888888'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 0.625rem 0.625rem;
    cursor: pointer; padding: 0.25rem; box-sizing: content-box;
    opacity: 0.7; transition: opacity 0.15s ease-out;
}
.docs-search-input::-webkit-search-cancel-button:hover { opacity: 1; }

.highlight { /* Search result highlighting */
     background-color: rgba(var(--primary-rgb), 0.3);
     color: var(--text-color);
     font-weight: normal;
     padding: 0.0625rem 0;
}
.toc-item-hidden { /* Hide non-matching TOC items */
    display: none;
}

/* Generic "No Items" Message */
.no-items-message {
    color: var(--text-muted-color);
    padding: 1rem;
    text-align: center;
    border-top: 0.0625rem solid var(--border-muted-color);
}
#instances .no-items-message { /* Specific styling for instances */
    padding: 1.25rem;
    border: 0.0625rem solid var(--border-muted-color);
    border-radius: var(--border-radius);
    margin-top: 0.625rem;
}

/* ==========================================================================
   X. Dialog Styles (using HTML <dialog> element)
   ========================================================================== */
/* Ensure dialogs that are not open do not intercept clicks */
dialog:not([open]) {
    display: none;
    pointer-events: none;
}

/* Basic Dialog Styling */
dialog {
    padding: 0; /* Remove default padding */
    border: none; /* Remove default border */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    background-color: transparent; /* Dialog itself is transparent, content has background */
    max-width: 500px; /* Default max-width, can be overridden */
    width: 80%;
    margin: auto; /* Centering */
    overflow: visible; /* Allow dialog to grow */
    max-height: calc(100vh - 2rem); /* Leave some margin from viewport edges */
    display: flex; /* Make dialog a flex container */
    flex-direction: column; /* Stack its children (modal-content) vertically */
}

/* Dialog Backdrop */
dialog::backdrop {
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Dialog Open/Close Animations */
dialog {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, display 0.2s allow-discrete;
    /* 'display' transition for when dialog is removed from DOM */
}

dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* When dialog is about to be closed by browser (e.g. ESC key) */
dialog.closing {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
}

/* Ensure modal-content is still relatively positioned for the close button */
dialog .modal-content {
    position: relative;
    /* other styles for modal-content are below */
}

/* Styling for the cancel button added to forms */
dialog .modal-content form .dialog-cancel-button {
    margin-top: 0.5rem; /* Align with submit button if it has margin-top */
    width: 100%;
}

/* Adjust form button layout if both submit and cancel are present */
/* Billing Transaction Detail Dialog Specific Styles */
#billing-transaction-detail-dialog { /* Target the dialog element itself for width */
    max-width: 700px; /* Allow billing dialog to be wider */
}
/* No need for #billing-transaction-detail-dialog .modal-content max-width, it will fill its parent dialog */

.transaction-details-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: 0.75rem 1.5rem; /* Row and column gap */
    font-size: 0.95em;
    margin-top: 1rem;
}

.transaction-details-container .detail-item {
    padding: 0.3rem 0;
    display: flex; /* Use flex for better alignment of label and value */
    flex-direction: column; /* Stack label and value */
    /* border-bottom: 1px solid var(--border-muted-color); */ /* Optional: line between items */
}
/* .transaction-details-container .detail-item:last-child {
    border-bottom: none;
} */


.transaction-details-container .detail-label {
    font-weight: 600;
    color: var(--text-muted-color);
    margin-bottom: 0.2rem;
    font-size: 0.9em;
    display: block;
}

.transaction-details-container .detail-value {
    color: var(--text-color);
    word-break: break-all; /* Break long strings like IDs */
}
.transaction-details-container .detail-value.numeric {
    font-family: monospace;
    font-weight: 500;
}
.transaction-details-container .detail-value a {
    color: var(--primary-color);
    text-decoration: underline;
}
.transaction-details-container .detail-value a:hover {
    color: var(--primary-hover);
}

.transaction-details-container .user-detail-item .user-name,
.transaction-details-container .user-detail-item .user-id {
    display: block; /* Make them take full width to appear on separate lines */
}

.transaction-details-container .user-detail-item .user-id {
    font-size: 0.85em; /* Smaller font for the ID */
    color: var(--text-muted-color); /* Muted color for the ID */
}

.transaction-details-container .code-block {
    background-color: var(--code-background);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.85em;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
}

.transaction-details-container hr {
    grid-column: 1 / -1; /* Make hr span all columns */
    border: none;
    border-top: 1px solid var(--border-muted-color);
    margin: 0.5rem 0;
}
dialog .modal-content form button[type="submit"] + .dialog-cancel-button {
    margin-top: 0.5rem; /* Add some space if they are stacked */
}

/* If buttons are side-by-side, you might need a container or flex display on the form */
dialog .modal-content form {
    /* display: flex; flex-direction: column; gap: ... */
    /* If you want buttons side-by-side: */
    /* & > div.form-actions { display: flex; gap: 0.5rem; } */
    /* & > div.form-actions > button { flex: 1; } */
}
/*
   The old .modal class (which was the backdrop and container) is removed.
   The <dialog> element itself handles modal behavior and its ::backdrop.
*/

dialog .modal-content {
    background-color: var(--surface-color);
    color: var(--text-color); /* Ensure text uses theme color */
    padding: 0; /* Remove padding, header/content/footer will have their own */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 100%;
    /* height: 100%; -- Replaced by flex-grow and min-height */
    flex-grow: 1; /* Allow modal-content to grow within the dialog flex container */
    min-height: 0; /* Allow modal-content to shrink if dialog is very short */
    overflow: hidden; /* Prevent modal-content itself from scrolling */
    box-shadow: var(--shadow-md);
    position: relative;
    display: flex;
    flex-direction: column;
}

.dialog-header {
    padding: 1rem 1.5rem; /* Adjust padding as needed */
    padding-right: 3.5rem; /* Space for close button */
    border-bottom: 1px solid var(--border-muted-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Header should not shrink */
    position: relative; /* For absolute positioning of close button if needed, though flex handles it here */
}

.dialog-header h4 {
    margin: 0; /* Remove default h4 margins */
    font-size: 1.25em; /* Adjust title size */
    line-height: 1.3;
}

/* Reposition close button within the header */
dialog .dialog-close-button {
    position: absolute; /* Position relative to .dialog-header or .modal-content */
    top: 0.75rem; /* Adjust to vertically align with header padding */
    right: 1rem; /* Adjust as needed */
    /* Other styles for .dialog-close-button remain the same */
}


.dialog-scrollable-content {
    padding: 1.5rem; /* Padding for the content area */
    overflow-y: auto; /* This is the main scrollable area */
    flex-grow: 1; /* Allows this area to take up available space */
    min-height: 0; /* Allow it to shrink to content, flex-grow will expand it */
}

.dialog-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-muted-color);
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 0.75rem; /* Space between buttons */
    flex-shrink: 0; /* Footer should not shrink */
    background-color: var(--surface-color); /* Match modal content bg */
}

/* Ensure form inside scrollable content doesn't add extra margins that break layout */
.dialog-scrollable-content form {
    margin-bottom: 0; /* Remove default form margin if it exists */
}

html.light-theme dialog .modal-content {
    background-color: var(--background-color); /* White background for light theme modal content */
    border-color: var(--border-muted-color);
}

/* dialog .modal-content h4 is now .dialog-header h4 */

/* dialog .dialog-close-button is now positioned relative to .dialog-header or .modal-content */
/* Styles for color, font-size etc. are still valid */
dialog .dialog-close-button {
    color: var(--text-muted-color);
    /* position: absolute; -- already handled by being inside header or directly in modal-content */
    /* top: 1rem; right: 1.5rem; -- adjusted above */
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

dialog .dialog-close-button:hover,
dialog .dialog-close-button:focus {
    color: var(--text-color);
    text-decoration: none;
}

/* Modal Form specific adjustments */
dialog .modal-content form { /* Target forms directly within dialog content */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Space between form elements */
    /* flex-grow: 1; -- No longer needed here, .dialog-scrollable-content handles growth */
}

/* ==========================================================================
   6. Message Notifications
   ========================================================================== */

/* Message area for inline messages */
.message-area {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    display: none;
    animation: slideDown 0.3s ease-out;
}

.message-area.success-message {
    background-color: rgba(var(--success-rgb), 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.message-area.error-message {
    background-color: rgba(var(--danger-rgb), 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.message-area.warning-message {
    background-color: rgba(var(--warning-rgb), 0.1);
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
}

.message-area.info-message {
    background-color: rgba(var(--primary-rgb), 0.1);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

/* Floating message banner */
.message-banner {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    z-index: 10000;
    box-shadow: var(--shadow-md);
    max-width: 90%;
    text-align: center;
    animation: slideDown 0.3s ease-out;
    color: white;
    font-weight: 500;
}

.message-banner.success-message {
    background-color: var(--success-color);
}

.message-banner.error-message {
    background-color: var(--danger-color);
}

.message-banner.warning-message {
    background-color: var(--warning-color);
}

.message-banner.info-message {
    background-color: var(--primary-color);
}

.message-banner.dismissing {
    animation: slideUp 0.3s ease-out;
}

/* Account Deletion Page */
.deletion-container {
    max-width: 37.5rem; /* 600px */
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
}

.deletion-icon {
    width: 5rem; /* 80px */
    height: 5rem;
    margin: 0 auto 2rem;
    background-color: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deletion-icon svg {
    width: 3rem; /* 48px */
    height: 3rem;
    color: white;
}

.deletion-message {
    margin-bottom: 2rem;
}

.deletion-message h1 {
    color: var(--text-color);
    margin-bottom: 1rem;
}

.deletion-message p {
    color: var(--text-muted-color);
    line-height: 1.6;
}

.deletion-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.deletion-footer-info {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.deletion-footer-info p {
    color: var(--text-muted-color);
    font-size: 0.875rem;
}

/* Notification Preferences */
.notification-group {
    margin-bottom: 1.5rem;
}

.notification-group > p {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.notification-group .form-section.inline {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.notification-group input[type="checkbox"] {
    margin-right: 0.75rem;
}

.notification-group label {
    cursor: pointer;
    user-select: none;
}

/* Security alerts (always enabled) */
.notification-group.security-alerts {
    opacity: 0.7;
}

.notification-group.security-alerts input[type="checkbox"] {
    cursor: not-allowed;
    pointer-events: none;
}

.notification-group.security-alerts label {
    font-size: 0.9em;
    cursor: not-allowed;
}

.notification-section-title {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Email verification badge */
.verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: calc(var(--border-radius) / 2);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.verification-badge.verified {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.verification-badge.unverified {
    background-color: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

/* Link button for resend verification */
.link-button {
    background: none;
    border: none;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.link-button:hover {
    color: var(--primary-hover);
}

/* Animations for messages */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-1.25rem);
    }
}

/* ==========================================================================
   7. Utility Classes
   ========================================================================== */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

.text-muted { color: var(--text-muted-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }

.nav-link-disabled { /* Disabled navigation links */
    color: var(--text-muted-color);
    pointer-events: none;
    opacity: 0.6;
}

/* ==========================================================================
   8. Light Theme Overrides
   ========================================================================== */
html.light-theme {
    --primary-color: #007AFF;
    --primary-rgb: 0, 122, 255;
    --primary-hover: #0056b3; /* Darker blue for hover */
    --background-color: #FFFFFF;
    --surface-color: #F2F2F7; /* Light gray surface */
    --surface-hover-color: #E5E5EA; /* Slightly darker gray */
    --text-color: #1D1D1F; /* Near black */
    --text-muted-color: #6E6E73; /* Medium gray */
    --border-color: #D1D1D6; /* Light gray border */
    --border-muted-color: #E5E5EA; /* Very light gray border */
    --success-color: #34C759;
    --danger-color: #FF3B30;
    --warning-color: #FF9500;
    --code-background: #EAEAEA; /* Light gray for code */
    --active-background: rgba(0, 122, 255, 0.1); /* Light blue active state */
    --active-text-color: var(--primary-color);
    --sidebar-bg: #F9F9F9; /* Slightly off-white sidebar */
    --sidebar-link-color: #3C3C43; /* Dark gray links */
    --sidebar-link-hover-bg: #E5E5EA; /* Match surface hover */
    --sidebar-link-active-bg: rgba(0, 122, 255, 0.1); /* Match active bg */
    --logo-ai-color: #6E6E73; /* Match muted text */

    --shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05); /* Lighter shadows */
    --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);

    scrollbar-color: #C1C1C1 #F1F1F1; /* Light scrollbar */
    --input-background-color: #FFFFFF; /* White input background for light theme */
}

/* Light Theme Base & Layout */
html.light-theme body {
    background-color: var(--background-color);
    color: var(--text-color);
}
html.light-theme header {
    background-color: rgba(249, 249, 249, 0.85); /* Slightly transparent white */
    border-bottom-color: var(--border-color);
}
html.light-theme header h1,
html.light-theme header nav ul li a {
    color: var(--text-color); /* Ensure header text is dark */
}
html.light-theme header nav ul li a:hover,
html.light-theme header nav ul li a.active {
    color: var(--primary-color); /* Use primary color for hover/active */
}
html.light-theme header nav ul li a.active::after {
    background-color: var(--primary-color);
}
html.light-theme footer {
    background-color: var(--surface-color);
    border-top-color: var(--border-color);
    color: var(--text-muted-color);
}
html.light-theme .footer-container { border-bottom-color: var(--border-muted-color); }
html.light-theme .footer-column h4 { color: var(--text-color); }
html.light-theme .footer-column ul li a { color: var(--text-muted-color); }
html.light-theme .footer-column ul li a:hover { color: var(--primary-color); }
html.light-theme .footer-column ul li a.active { color: var(--primary-color); }
html.light-theme .footer-bottom { color: var(--text-muted-color); }

/* Light Theme Scrollbar */
html.light-theme ::-webkit-scrollbar-track { background: #F1F1F1; }
html.light-theme ::-webkit-scrollbar-thumb {
    background-color: #C1C1C1;
    border-color: #F1F1F1;
}
html.light-theme ::-webkit-scrollbar-thumb:hover { background-color: #A8A8A8; }

/* Light Theme Components */
html.light-theme code, html.light-theme pre {
    background-color: var(--code-background);
    color: #333; /* Darker code text */
    border-color: var(--border-color);
}
html.light-theme pre code { background-color: transparent; }

html.light-theme input,
html.light-theme select,
html.light-theme textarea {
    /* background-color is now handled by --input-background-color variable */
    border-color: #C6C6C8; /* Slightly darker border */
    color: var(--text-color);
}
html.light-theme input:focus,
html.light-theme select:focus,
html.light-theme textarea:focus {
    /* background-color is now handled by --input-background-color variable */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.2);
}
html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
    color: var(--text-muted-color);
    opacity: 0.8;
}
html.light-theme input:disabled,
html.light-theme select:disabled,
html.light-theme textarea:disabled {
     background-color: var(--surface-color); /* Gray disabled background */
     color: var(--text-muted-color);
     border-color: var(--border-color); /* Match border */
}
html.light-theme select { /* Select arrow for light theme */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236E6E73'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
html.light-theme form input[type="checkbox"] {
    background-color: #FFFFFF;
    border: 0.0625rem solid #C6C6C8;
}
html.light-theme form input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
html.light-theme form input[type="checkbox"]::after {
    border-color: var(--background-color); /* White checkmark */
}
html.light-theme form input[type="checkbox"]:disabled {
    background-color: var(--surface-color);
    border-color: var(--border-muted-color);
}
html.light-theme form input[type="checkbox"]:disabled::after {
    border-color: var(--surface-color);
}
html.light-theme .form-section-disabled { opacity: 0.5; }
html.light-theme .form-section-disabled label,
html.light-theme .form-section-disabled span { color: var(--text-muted-color); }
html.light-theme .form-section-disabled input[type="checkbox"] {
    background-color: var(--surface-color);
    border-color: var(--border-muted-color);
}
html.light-theme .form-section-disabled input[type="checkbox"]:checked {
    background-color: var(--text-muted-color);
    border-color: var(--border-muted-color);
}
html.light-theme .form-section-disabled input[type="checkbox"]:checked::after {
    border-color: var(--surface-color);
}

html.light-theme table th {
    background-color: #F9F9F9; /* Very light header */
    border-bottom-color: var(--border-color);
    color: var(--text-muted-color);
}
html.light-theme table tbody tr:hover { background-color: var(--surface-hover-color); }
html.light-theme .list-item {
    background-color: #FFFFFF;
    border-color: var(--border-color);
}
html.light-theme .list-item:hover { background-color: var(--surface-hover-color); }
html.light-theme .pricing-card,
html.light-theme .use-case-item,
html.light-theme .testimonial-item {
    background-color: #FFFFFF;
    border-color: var(--border-color);
}
html.light-theme .pricing-card h4 { color: var(--primary-color); }
html.light-theme .pricing-specs li strong { color: var(--text-color); }
html.light-theme .pricing-cost .cost-credits { color: var(--text-color); }
html.light-theme .pricing-cost .cost-dollars { color: var(--text-muted-color); }
html.light-theme .pricing-cost.gpu-cost .cost-credits { color: var(--primary-color); }
html.light-theme .pricing-cost.gpu-cost .cost-dollars { color: #555555; } /* Darker gray */

/* Light Theme Tabs */
html.light-theme .tab-nav { border-bottom-color: var(--border-color); }
html.light-theme .tab-nav button.tab-button { color: var(--primary-color); border-bottom-color: transparent; }
html.light-theme .tab-nav button.tab-button:hover { color: var(--primary-hover); }
html.light-theme .tab-nav button.tab-button.active { color: var(--text-color); border-bottom-color: var(--primary-color); }
html.light-theme .tab-content h3, html.light-theme .tab-content h4 { border-bottom-color: var(--border-muted-color); }


html.light-theme .danger-zone {
    background-color: rgba(255, 59, 48, 0.05); /* Subtle red */
    border-color: var(--danger-color);
}
html.light-theme .danger-zone-title { border-bottom-color: rgba(255, 59, 48, 0.3); }
html.light-theme .control-button {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
html.light-theme .control-button:hover {
    background-color: var(--surface-hover-color);
    border-color: var(--primary-color);
}
html.light-theme .control-button:active { background-color: var(--surface-color); }
html.light-theme #cookie-consent-banner {
    background-color: rgba(242, 242, 247, 0.9); /* Light background */
    box-shadow: 0 -0.125rem 0.625rem rgba(0,0,0,0.1);
    color: var(--text-color);
}
html.light-theme #cookie-consent-banner #cookie-accept-btn {
    /* Styles already defined for primary button, should work */
}

/* Light Theme Page Specific */
html.light-theme .hero-deploy-input-container {
    background-color: #FFFFFF;
    border-color: var(--border-color);
}
html.light-theme .deploy-mode-selector {
    border-bottom-color: var(--border-color);
    background-color: transparent;
}
html.light-theme .mode-button {
    color: var(--primary-color);
    background-color: transparent;
}
html.light-theme .mode-button:hover {
    color: var(--primary-hover);
    background-color: transparent;
}
html.light-theme .mode-button.active {
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
    background-color: transparent;
}
/* Light theme override removed - handled by --input-background-color variable */
/*
html.light-theme .deploy-input-area input[type="url"],
html.light-theme .deploy-input-area textarea {
    border-color: #C6C6C8;
    color: var(--text-color);
}
*/
/* Light theme override removed - handled by --input-background-color variable */
/*
html.light-theme .deploy-input-area input[type="url"]:focus,
html.light-theme .deploy-input-area textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.2);
}
*/
html.light-theme .auth-section {
    background-color: #FFFFFF;
    border-color: var(--border-color);
}
html.light-theme .auth-options .cta-button {
    background-color: var(--surface-color);
    color: var(--text-color);
}
html.light-theme .auth-options .cta-button:hover { background-color: var(--surface-hover-color); }
html.light-theme .contact-option svg.icon { stroke: var(--primary-color); }
html.light-theme .contact-info > p,
html.light-theme .contact-option p,
html.light-theme .response-time-note { color: var(--text-muted-color); }
html.light-theme .contact-option h4 { color: var(--text-color); }
html.light-theme .contact-option p a { color: var(--primary-color); }
html.light-theme #create-vm-form {
    background-color: var(--background-color);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}
html.light-theme #create-vm-form label { color: var(--text-color); }
html.light-theme .config-slider::-webkit-slider-thumb { background: var(--primary-color); border-color: var(--background-color); }
html.light-theme .config-slider::-moz-range-thumb { background: var(--primary-color); border-color: var(--background-color); }
html.light-theme .gpu-requirement { color: var(--text-muted-color); }
html.light-theme #cost-estimator { background-color: var(--surface-color); border-color: var(--border-color); }
html.light-theme #cost-estimator h4 { color: var(--primary-color); }
html.light-theme #cost-estimator p { color: var(--text-color); }
html.light-theme #cost-estimator span { color: var(--primary-color); }
html.light-theme #cost-estimator p:last-child { color: var(--text-muted-color); }
html.light-theme .input-description { color: var(--text-muted-color); }

/* Light Theme Docs */
html.light-theme .docs-sidebar {
    background-color: var(--sidebar-bg);
    border-right-color: var(--border-color);
}
html.light-theme .docs-sidebar a { color: var(--sidebar-link-color); }
html.light-theme .docs-sidebar a:hover { background-color: var(--sidebar-link-hover-bg); color: var(--text-color); }
html.light-theme .docs-sidebar a.sidebar-active {
     color: var(--active-text-color);
     background-color: var(--sidebar-link-active-bg);
     border-left-color: var(--primary-color);
}
html.light-theme .mobile-docs-toggle {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}
html.light-theme .docs-search-input {
    background-color: #FFFFFF;
    border-color: #C6C6C8;
}
html.light-theme .docs-search-input:focus {
    background-color: #FFFFFF;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.2);
}
html.light-theme .highlight {
    background-color: rgba(var(--primary-rgb), 0.2);
    color: var(--text-color);
}

/* ==========================================================================
   8. Media Queries (Responsive Styles)
   ========================================================================== */

/* Medium Screens & Smaller (Tablets, Large Phones) */
@media (max-width: 62rem) { /* 992px */
    .contact-container {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 2.5rem;
    }
}

/* Smaller Screens (Mobile Phones) */
@media (max-width: 48rem) { /* 768px */
    /* Layout Adjustments */
    header {
        padding: 0 1rem;
        height: var(--header-height);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    header h1 { margin-bottom: 0; }

    main { padding: 1.5rem 1rem; }
    section { padding-top: 1.5rem; margin-bottom: 1.5rem; }
    section h2, section h3 { margin-bottom: 1rem; padding-bottom: 0.5rem; }

    /* Mobile Navigation */
    .mobile-menu-button { display: block; }
    .mobile-menu-button:hover,
    .mobile-menu-button:active { /* Remove button styles */
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    header nav { /* Mobile nav panel */
        display: none; /* Hidden until active */
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        /* background-color: rgba(28, 28, 30, 0.95); */
        background-color: var(--surface-color);
        border-top: 0.0625rem solid var(--border-muted-color);
        padding: 0;
        box-shadow: var(--shadow-md);
        z-index: 1050;
        transition: opacity 0.1s ease-out, visibility 0s linear 0.1s;
    }

    header nav.mobile-nav-active { /* Show mobile nav */
        display: block;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.1s ease-out, visibility 0s linear 0s;
    }

    header nav ul { /* Stack nav items */
        flex-direction: column;
        width: 100%;
        margin-top: 0;
        padding: 0;
        flex-wrap: nowrap;
    }

    header nav ul li { margin: 0; width: 100%; }

    header nav ul li a { /* Style mobile nav links */
        display: block;
        padding: 0.75rem 1rem;
        border-bottom: 0.0625rem solid var(--border-muted-color);
        margin: 0;
        border-radius: 0;
        color: var(--primary-color); /* Use primary color for links */
        border-left: 0.125rem solid transparent; /* For active state */
        padding-left: calc(1rem - 0.125rem);
    }
     header nav ul li:last-child a { border-bottom: none; }

    header nav ul li a:hover { /* Mobile link hover */
        background-color: transparent !important; /* No background */
        color: var(--primary-hover);
        transform: none;
    }

    header nav ul li a.active { /* Mobile active link */
        background-color: transparent;
        color: #ffffff; /* White active text */
        font-weight: 600;
        border-left-color: var(--primary-color);
        transform: none;
    }
    header nav ul li a.active::after { display: none; } /* Hide desktop underline */

    /* Component Adjustments */
    #repo-list li, #instance-list li { padding: 1rem 0; } /* Reduce padding */
    .repo-actions { margin-left: 0; margin-top: 0.75rem; text-align: left; }
    .instance-actions { margin-top: 0.75rem; width: 100%; justify-content: flex-start; }
    .auth-section { margin: 2.5rem auto; padding: 1.5rem; }

    /* Homepage Adjustments */
    .hero-section { padding: 3rem 0; }
    .hero-title { font-size: 2em; line-height: 1.2; }
    .animated-word-container { width: 8rem; }
    .hero-subtitle { font-size: 1em; max-width: 90%; margin-left: auto; margin-right: auto; }
    .hero-deploy-input-container { padding: 1rem; margin-top: 1.5rem; }
    .deploy-mode-selector { /* Stack mode buttons */
        padding: 0;
        flex-direction: column;
        gap: 0.5rem;
        background-color: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
        margin-bottom: 1rem; /* Add margin below */
    }
    .mode-button {
        padding: 0.5rem 1rem;
        font-size: 1em;
        flex-basis: auto;
        border: 1px solid var(--border-color);
        margin-bottom: -1px; /* Overlap borders */
        background-color: var(--surface-color);
        color: var(--primary-color);
        border-radius: 0;
        text-align: center;
        font-weight: 500;
        position: relative;
        border-bottom-width: 1px; /* Reset bottom border */
        border-bottom-color: var(--border-color);
    }
    .mode-button:first-child { border-radius: var(--border-radius) var(--border-radius) 0 0; }
    .mode-button:last-child { border-radius: 0 0 var(--border-radius) var(--border-radius); margin-bottom: 0; }
    .mode-button.active {
        background-color: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-color);
        font-weight: 600;
        border-color: var(--primary-color);
        z-index: 1;
        margin-bottom: -1px;
        border-bottom-color: var(--primary-color); /* Ensure active border shows */
    }
    .mode-button:last-child.active { margin-bottom: 0; }
    .deploy-input-area { gap: 0.75rem; }
    #hero-deploy-button.cta-button-large { padding: 0.75rem 1.25rem; font-size: 1em; margin-top: 0.5rem; }
    .hero-subtext { font-size: 1em; margin-top: 0.75rem; }
    .use-case-grid { grid-template-columns: 1fr; }
    .testimonials-container { grid-template-columns: 1fr; }

    /* Contact Page Adjustments */
    .contact-header h2 { font-size: 2em; }
    .contact-header .page-description { font-size: 1em; }
    .contact-container { gap: 2rem; }
    .contact-info h3, .contact-form-section h3 { font-size: 1.4em; }

    /* Footer Adjustments */
    .footer-container {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        gap: 1.5rem;
        text-align: center;
    }
    .footer-column h4 { margin-bottom: 0.5rem; }
    .footer-column ul li { margin-bottom: 0.3rem; }
    footer { padding: 2rem 1rem 1rem; }

    /* Cookie Banner Adjustments */
    #cookie-consent-banner { justify-content: center; flex-wrap: wrap; }
    #cookie-consent-banner p { margin-right: 0; margin-bottom: 0.625rem; }
    #cookie-consent-banner button { margin: 0.3125rem; }

    /* Light Theme Mobile Adjustments */
    html.light-theme .deploy-mode-selector {
        background-color: #FFFFFF;
        border: 1px solid var(--border-color); /* Add border back */
        border-radius: var(--border-radius); /* Add radius back */
        padding: 0.5rem; /* Add padding */
    }
    html.light-theme .mode-button {
        border-color: var(--border-muted-color);
        color: var(--primary-color);
        background-color: transparent;
    }
     html.light-theme .mode-button:last-child { border-bottom-color: var(--border-muted-color); } /* Ensure last border */
    html.light-theme .mode-button.active {
        background-color: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-color);
        border-color: var(--primary-color); /* Highlight active border */
    }
}

/* Docs Mobile Layout */
@media (max-width: 56.25rem) { /* 900px */
    /* Adjust header for docs toggle */
    header {
        padding-left: 3.75rem; /* Space for toggle */
        padding-right: 3.75rem; /* Balance padding */
        justify-content: center; /* Center title */
    }
    header h1 { flex-grow: 1; text-align: center; }
    .mobile-menu-button { /* Position main menu toggle */
        position: absolute;
        right: 1rem;
        top: calc((var(--header-height) - 2.25rem) / 2);
    }

    .mobile-docs-toggle { display: block; } /* Show docs toggle */

    .docs-sidebar { /* Make sidebar overlay */
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        max-width: 80%;
        transform: translateX(-100%); /* Hide off-screen */
        z-index: 1000;
        border-right: 0.0625rem solid var(--border-color);
        padding-top: var(--header-height); /* Space below header */
    }

    .docs-content { padding: 1.25rem; } /* Reduce content padding */

    body.docs-sidebar-open .docs-sidebar { transform: translateX(0); } /* Slide in */
    body.docs-sidebar-open .docs-overlay { display: block; } /* Show overlay */
    body.docs-sidebar-open { overflow: hidden; } /* Prevent body scroll */
}
/* Header Logo Icon Styling */
.header-logo-link {
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Center items vertically */
    gap: 0.25rem; /* Add some space between icon and text */
}

.header-logo-icon {
    height: 1.25rem; /* Set height relative to parent font size */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align icon nicely with text */
    opacity: .9;
}

/* Light theme icon inversion */
.light-theme .header-logo-icon {
    filter: invert(1);
}
/* ==========================================================================
   9. FAQ Page Styles
   ========================================================================== */

.faq-page-container {
    max-width: 56.25rem; /* 900px */
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-muted-color);
}

.faq-header h2 {
    font-size: 2.5em;
    margin-bottom: 0.5rem;
}

.faq-header .page-description {
    font-size: 1.1em;
    color: var(--text-muted-color);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.faq-page-container section {
    margin-bottom: 2.5rem;
}

.faq-page-container section h3 {
    font-size: 1.6em;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-muted-color);
}

.faq-item { /* Styling for <details> */
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    transition: background-color 0.15s ease-out;
}
.faq-item:last-of-type {
    margin-bottom: 0;
}
html.light-theme .faq-item {
    background-color: #FFFFFF;
    border-color: var(--border-color);
}

.faq-item summary {
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    list-style: none; /* Remove default marker */
    position: relative;
    transition: background-color 0.15s ease-out;
    border-radius: var(--border-radius); /* Apply radius here for hover */
}
.faq-item summary:hover {
    background-color: var(--surface-hover-color);
}
html.light-theme .faq-item summary:hover {
    background-color: var(--surface-hover-color);
}
.faq-item[open] summary {
    border-bottom: 1px solid var(--border-color);
    border-bottom-left-radius: 0; /* Flatten bottom corners when open */
    border-bottom-right-radius: 0;
}
html.light-theme .faq-item[open] summary {
    border-bottom-color: var(--border-color);
}

/* Custom Arrow Marker */
.faq-item summary::before {
    content: '';
    display: block;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 0.5em;
    height: 0.5em;
    border-style: solid;
    border-color: var(--primary-color);
    border-width: 0 2px 2px 0; /* Right and bottom borders */
    transform: translateY(-60%) rotate(45deg); /* Point down */
    transition: transform 0.2s ease-in-out;
}
.faq-item[open] summary::before {
    transform: translateY(-40%) rotate(-135deg); /* Point up */
}

.faq-answer { /* Styling for the answer div */
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    color: var(--text-muted-color);
    line-height: 1.6;
}
html.light-theme .faq-answer {
    color: var(--text-muted-color);
}

.faq-answer p:last-child {
    margin-bottom: 0;
}
.faq-answer ul, .faq-answer ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}
.faq-answer li {
    margin-bottom: 0.25rem;
}

.faq-contact-prompt {
    margin-top: 3rem;
    padding: 1.5rem;
    text-align: center;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
html.light-theme .faq-contact-prompt {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}
.faq-contact-prompt h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.4em;
}
.faq-contact-prompt p {
    margin-bottom: 0;
    color: var(--text-muted-color);
}
html.light-theme .faq-contact-prompt p {
    color: var(--text-muted-color);
}
/* Prompt link to FAQ page */
.faq-link-prompt {
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-size: 1.25rem;
    color: var(--text-muted-color);
    font-weight: 600;
}
html.light-theme .faq-link-prompt {
    color: var(--text-muted-color);
}

/* Nested lists for SSH credentials */
.nested-list {
    margin-top: 0.5rem;
    margin-left: 1.5rem;
    list-style-type: none;
}

.nested-list li {
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    font-family: monospace;
    word-break: break-all;
}

.nested-list li strong {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

/* Light theme overrides for nested list */
html.light-theme .nested-list li {
    background-color: var(--surface-color);
}

html.light-theme .nested-list li strong {
    color: var(--primary-color);
}
/* =========================================
   Account Page Card Styling
   ========================================= */

/* Apply card styles only to sections within Settings and Preferences tabs */
.tab-container .tab-content[data-tab="settings"] > section,
.tab-container .tab-content[data-tab="preferences"] > section {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius); /* Use standard radius */
    padding: 1.5rem;
    margin-bottom: 1.5rem; /* Space between cards */
    background-color: var(--surface-color); /* Use surface color for cards */
    max-width: 700px; /* Maximum width for cards on larger screens */
    margin-left: auto;  /* Center the card horizontally */
    margin-right: auto; /* Center the card horizontally */
    box-shadow: var(--shadow-sm); /* Use smaller shadow */
}

/* Ensure sections take full width below max-width */
@media (max-width: 768px) { /* Adjust breakpoint if needed */
    .tab-container .tab-content[data-tab="settings"] > section,
    .tab-container .tab-content[data-tab="preferences"] > section {
        max-width: 100%; /* Allow full width on smaller screens */
        margin-left: 0;
        margin-right: 0;
    }
}

/* Specific styling for the danger zone section within Settings */
.tab-container .tab-content[data-tab="settings"] > section.danger-zone {
    border-color: var(--danger-color);
    background-color: rgba(var(--danger-rgb), 0.05); /* Use subtle danger background */
}

.tab-container .tab-content[data-tab="settings"] > section.danger-zone .danger-zone-title {
    color: var(--danger-color);
}

/* Adjust spacing for elements within these specific cards */
.tab-container .tab-content[data-tab="settings"] > section h3,
.tab-container .tab-content[data-tab="preferences"] > section h3,
.tab-container .tab-content[data-tab="settings"] > section h4,
.tab-container .tab-content[data-tab="preferences"] > section h4 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 1rem;
    border-bottom: none; /* Remove bottom border from headers inside cards */
    padding-bottom: 0;
}

.tab-container .tab-content[data-tab="settings"] > section p,
.tab-container .tab-content[data-tab="preferences"] > section p {
    margin-bottom: 1rem; /* Consistent paragraph spacing */
}
.tab-container .tab-content[data-tab="settings"] > section p:last-child,
.tab-container .tab-content[data-tab="preferences"] > section p:last-child {
    margin-bottom: 0; /* Remove margin from last paragraph if needed */
}

.tab-container .tab-content[data-tab="settings"] > section .form-container,
.tab-container .tab-content[data-tab="preferences"] > section .form-container {
   margin-top: 1rem; /* Add some space above forms within cards */
}

.tab-container .tab-content[data-tab="settings"] > section button,
.tab-container .tab-content[data-tab="preferences"] > section button {
    margin-top: 0.5rem; /* Space above buttons */
}
.tab-container .tab-content[data-tab="settings"] > section button:not(:last-child),
.tab-container .tab-content[data-tab="preferences"] > section button:not(:last-child) {
    margin-right: 0.5rem; /* Space between adjacent buttons if any */
}

/* Remove bottom margin from the last section in these specific tabs */
.tab-container .tab-content[data-tab="settings"] > section:last-child,
.tab-container .tab-content[data-tab="preferences"] > section:last-child {
    margin-bottom: 0;
}

/* --- General Info/Warning Dialog --- */
#general-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 2000; /* Ensure it's on top of other elements */
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

#general-dialog-overlay.visible {
    display: flex;
    opacity: 1;
}

#general-dialog {
    background-color: var(--surface-color);
    color: var(--text-color);
    padding: 0; /* Header/content/footer will have padding */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    max-width: 450px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

#general-dialog-overlay.visible #general-dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.general-dialog-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-muted-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.general-dialog-header h4 {
    margin: 0;
    font-size: 1.2em;
}

.general-dialog-close-button {
    background: none;
    border: none;
    color: var(--text-muted-color);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.general-dialog-close-button:hover {
    color: var(--text-color);
}

.general-dialog-content {
    padding: 1.5rem;
    overflow-y: auto;
    line-height: 1.6;
}
.general-dialog-content p:first-child {
    margin-top: 0;
}
.general-dialog-content p:last-child {
    margin-bottom: 0;
}

.general-dialog-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-muted-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Light theme for general dialog */
html.light-theme #general-dialog {
    background-color: var(--background-color);
    border-color: var(--border-muted-color);
}
html.light-theme .general-dialog-header {
    border-bottom-color: var(--border-color);
}
html.light-theme .general-dialog-footer {
    border-top-color: var(--border-color);
}
/* --- End General Info/Warning Dialog --- */

/* Apply card styles to sections within Billing and Affiliate tabs */
.tab-container .tab-content[data-tab="billing"] > section,
.tab-container .tab-content[data-tab="affiliate"] > section {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem; /* Space between cards */
    background-color: var(--surface-color);
    max-width: 700px; /* Consistent max width */
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-sm);
}

/* Ensure sections take full width below max-width */
@media (max-width: 768px) { /* Adjust breakpoint if needed */
    .tab-container .tab-content[data-tab="billing"] > section,
    .tab-container .tab-content[data-tab="affiliate"] > section {
        max-width: 100%; /* Allow full width on smaller screens */
        margin-left: 0;
        margin-right: 0;
    }
}

/* Adjust spacing for elements within these specific cards */
.tab-container .tab-content[data-tab="billing"] > section h3,
.tab-container .tab-content[data-tab="affiliate"] > section h3,
.tab-container .tab-content[data-tab="billing"] > section h4,
.tab-container .tab-content[data-tab="affiliate"] > section h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: none; /* Remove bottom border from headers inside cards */
    padding-bottom: 0;
}

/* Remove bottom margin from the last section in these tabs */
.tab-container .tab-content[data-tab="billing"] > section:last-child,
.tab-container .tab-content[data-tab="affiliate"] > section:last-child {
    margin-bottom: 0;
}
/* =========================================
   Account Page - Billing Top Up Refactor
   ========================================= */

.top-up-input-group {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.top-up-input-group input[type="number"] {
    flex: 0 0 auto;
    width: 0;
    min-width: 6rem;
}
.top-up-input-group input[type="number"]::-webkit-outer-spin-button,
.top-up-input-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.quick-select-buttons {
    display: flex;
    gap: 0.5rem; /* Space between buttons */
    flex: 1 1 auto;
}

.quick-select-btn.cta-button.primary.small {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    text-align: center;
    flex: 0 0 3rem;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out;
}

.quick-select-btn.cta-button.primary.small:hover {
    background-color: rgba(var(--primary-rgb), 0.1); /* Subtle background on hover */
    border-color: var(--primary-color);
    transform: translateY(-1px); /* Slight lift */
}

/* Adjust spacing for the form */
#top-up-form .form-section {
    margin-bottom: 1rem; /* Ensure consistent spacing */
}

#top-up-form .input-description {
    text-align: center;
}

#top-up-form #checkout-button {
    margin-top: 0.5rem; /* Space above checkout button */
}
/* Media Query for Mobile Wrapping */
@media (max-width: 48rem) { /* Adjust breakpoint as needed */
    .top-up-input-group {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }
    .top-up-input-group input[type="number"] {
        flex-basis: 100%; /* Make input take full width when wrapped */
        min-width: auto; /* Reset min-width */
    }
    .quick-select-buttons {
        width: 100%; /* Allow button group to take full width */
        justify-content: center; /* Distribute buttons evenly */
    }
    .quick-select-btn.cta-button.secondary.small {
        flex-grow: 1; /* Allow buttons to grow to fill space */
        flex-basis: 0; /* Allow shrinking below auto size if needed */
    }
}
/* --- Create Instance Layout --- */
.create-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
    gap: 1rem; /* Space between cards */
    margin-top: 1.5rem;
}

/* Problematic padding rule removed. Cards define their own padding. */

.form-card {
    flex: 2; /* Form takes up more space */
    min-width: 300px; /* Minimum width before wrapping */
    background-color: var(--surface-color); /* Match account card */
    padding: 1.5rem; /* Match account card */
    border-radius: var(--border-radius); /* Match account card */
    box-shadow: var(--shadow-sm); /* Match account card */
    border: 1px solid var(--border-color);
}

.cost-card {
    flex: 1; /* Cost takes less space */
    min-width: 250px; /* Minimum width */
    background-color: var(--surface-color); /* Match account card */
    padding: 1.5rem; /* Match account card */
    border-radius: var(--border-radius); /* Match account card */
    box-shadow: var(--shadow-sm); /* Match account card */
    border: 1px solid var(--border-color);
    height: fit-content; /* Make card only as tall as its content */
    position: sticky; /* Make it stick when scrolling */
    top: 2rem; /* Adjust top spacing as needed */
}

.cost-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-color-primary);
}

.cost-card p {
    margin: 0.5rem 0;
    color: var(--text-color-secondary);
}
.cost-card p.monthly-cost {
    font-weight: bold; /* Make monthly cost stand out a bit */
    color: var(--text-color-primary);
}

.cost-card hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

.cost-card #reserve-button {
    width: 100%;
    margin-bottom: 0.5rem;
}
.cost-card .reserve-info {
    font-size: 0.85em;
    color: var(--text-muted-color);
    text-align: center;
}

/* --- Instance Actions Card --- */
.actions-card {
    flex: 1; /* Takes less space than the details */
    min-width: 250px; /* Minimum width */
    background-color: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    height: fit-content; /* Make card only as tall as its content */
}

.actions-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.actions-card .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.actions-card .action-buttons button {
    flex: 0 0 0;
}

/* Divider styling for action buttons */
.actions-card .action-buttons hr,
.actions-card .action-buttons .divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0.5rem 0;
    width: 100%;
}

.actions-card hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

.info-card {
    flex: 1; /* Takes less space */
    min-width: 250px; /* Minimum width */
    background-color: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    height: fit-content; /* Make card only as tall as its content */
}

.info-card h3 { /* Consistent h3 styling within info-card */
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-color);
}


/* Responsive adjustments */
@media (max-width: 720px) { /* Adjust breakpoint as needed */
    .create-layout {
        flex-direction: column; /* Normal order: form first, then cost card */
    }
    .form-card {
        order: 1; /* Ensure form appears first */
        margin-bottom: 1rem; /* Add space below form card */
    }
    .cost-card {
        position: static; /* Remove sticky positioning on mobile */
        width: 100%; /* Take full width */
        order: 2; /* Ensure cost card appears last */
        margin-top: 0; /* Reset margin since form-card has margin-bottom */
    }
    .actions-card {
        position: static; /* Remove sticky positioning on mobile */
        width: 100%; /* Take full width */
        margin-bottom: 1rem; /* Add space below actions card */
    }
    .actions-card .action-buttons {
        flex-direction: row; /* Display buttons in a row */
        flex-wrap: wrap; /* Allow wrapping to next line if needed */
        gap: 0.5rem; /* Smaller gap between buttons */
    }
    .actions-card .action-buttons button {
        flex: 1 1 0;
        font-size: 0.9rem; /* Slightly smaller font */
        padding: 0.4rem 0.5rem; /* Smaller padding */
    }
    /* Transform horizontal divider to vertical in mobile view */
    .actions-card .action-buttons hr,
    .actions-card .action-buttons .divider {
        width: 100%;
        height: auto;
        align-self: stretch;
        margin: 0.5rem 0;
        border-top: 1px solid var(--border-color);
    }
}

/* Ensure form container within card doesn't add extra padding if not needed */
.form-card .form-container {
    padding: 0; /* Remove padding if form-container class adds it */
    border: none; /* Remove border if form-container class adds it */
    box-shadow: none; /* Remove shadow if form-container class adds it */
}

/* Style optgroups */
optgroup {
  font-weight: bold;
  font-style: italic;
  color: var(--primary-color); /* Or another distinct color */
}

/* Style disabled form sections (like GPU when RAM is too low) */
.form-section-disabled {
    opacity: 0.6;
    pointer-events: none; /* Prevent interaction */
}

.form-section-disabled label,
.form-section-disabled .input-description,
.form-section-disabled .gpu-requirement {
    color: var(--text-muted-color); /* Mute text */
}
/* --- Cost Card Enhancements --- */
.cost-card .cost-group {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem; /* Space between hourly/monthly groups */
    padding: 0.5rem 0; /* Add some vertical padding */
    border-bottom: 1px solid var(--border-muted-color); /* Separator line */
}
.cost-card .cost-group:last-of-type {
    margin-bottom: 1.25rem; /* More space before the hr */
    border-bottom: none; /* No border for the last group */
}

.cost-card .cost-label {
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 800;
}

.cost-card .cost-value {
    text-align: right;
}

.cost-card .cost-line {
    display: block; /* Ensure this takes its own line */
    font-size: 1.1em; /* Adjust overall size if needed */
    color: var(--text-color);
    font-weight: 500;
}

.cost-card .cost-credits {
    font-size: 1.1em; /* Match parent or adjust slightly */
    font-weight: 600;
    color: var(--text-color);
    margin-right: 0.25rem; /* Space before 'Credits' text */
    display: inline; /* Ensure it's inline */
}

.cost-card .cost-dollars {
    font-size: 0.85em;
    color: var(--text-muted-color);
    font-style: italic;
    display: block; /* Put dollar estimate on new line */
    margin-top: 0.1rem;
}

/* Remove old paragraph styling if it exists */
.cost-card p {
    /* Reset or remove styles previously applied directly to p tags if needed */
    /* margin: 0; padding: 0; etc. */
}
.cost-card p.monthly-cost {
    /* Reset or remove styles previously applied directly to p.monthly-cost tags if needed */
}

/* Ensure hr has appropriate margin */
.cost-card hr {
    margin: 1.25rem 0; /* Adjust margin */
}

/* Cost breakdown styles */
.cost-breakdown {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--hover-color);
    border-radius: 0.5rem;
    font-size: 0.9em;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    color: var(--text-muted-color);
}

.breakdown-label {
    font-weight: 400;
}

.breakdown-value {
    font-family: 'Courier New', monospace;
    color: var(--text-color);
}

.breakdown-separator {
    border-top: 1px solid var(--border-color);
    margin: 0.5rem 0;
    opacity: 0.5;
}
/* =========================================
   Instance Action Buttons (from instances/index.html)
   ========================================= */
.actions-cell {
    text-align: center; /* Center the content */
}
.action-button-icon-row {
    display: flex;
    justify-content: space-between; /* Use space-between */
    margin-bottom: .5rem; /* Space below icon row */
}
.action-button-icon-row .cta-button.action-button-icon {
    width: 2rem; /* Fixed width */
    height: 2rem; /* Fixed height */
    padding: 0 !important; /* Remove padding to rely on flex centering, !important to override base */
    line-height: 1; /* Reset line-height */
    min-width: auto !important; /* Override any min-width from base .cta-button */
    display: inline-flex !important; /* Force flexbox for centering */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.action-button-icon svg {
    width: 18px; /* Adjust icon size */
    height: 18px;
    stroke: #ffffff; /* Assuming icons are white on colored buttons */
}
.action-button-manage { /* For the text button below icons */
    width: 100%; /* Full width */
    margin-top: 5px; /* Space above manage button */
    text-align: center;
    padding: 6px 12px; /* Adjust padding as needed */
    font-size: 0.875rem; /* Match other small buttons */
}

/* Ensure primary and danger icon buttons have correct icon color if not default */
.action-button-icon-row .cta-button.primary .action-button-icon svg,
.action-button-icon-row .cta-button.danger .action-button-icon svg {
    stroke: #ffffff;
}
.action-button-icon-row .cta-button.secondary .action-button-icon svg {
    stroke: var(--primary-color); /* For secondary buttons, icon color should match text */
}
html.light-theme .action-button-icon-row .cta-button.secondary .action-button-icon svg {
    stroke: var(--primary-color); /* Ensure light theme secondary icon color */
}