/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Mobile-first approach */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

:root {
    /* Light Theme Colors */
    --primary-color: #0088cc;
    --primary-dark: #006699;
    --primary-light: #33aadd;
    --secondary-color: #ff6b35;
    --accent-color: #7c3aed;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    --border-color: #e2e8f0;
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 10px 25px rgba(0, 0, 0, 0.15);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0088cc 0%, #7c3aed 100%);
    --gradient-secondary: linear-gradient(135deg, #ff6b35 0%, #f093fb 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Animations */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    
    --border-color: #334155;
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-large: 0 10px 25px rgba(0, 0, 0, 0.4);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color var(--transition-medium), color var(--transition-medium);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: all var(--transition-medium);
}

[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.95);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
    position: relative;
}

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

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-medium);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

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

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all var(--transition-medium);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-slow);
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-medium);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-large);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Main Content */
main {
    padding-top: 90px;
    min-height: calc(100vh - 70px);
}

/* Page Headers */
.page-header {
    background: var(--gradient-hero);
    color: white;
    padding: 3rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.page-description {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 600px;
}

/* Cards */
.card {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all var(--transition-medium);
    border: 1px solid var(--border-color);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-large);
}

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

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.card-content {
    color: var(--text-secondary);
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: all var(--transition-fast);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Tables */
.table-container {
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.table td {
    color: var(--text-secondary);
}

.table tr:hover {
    background: var(--bg-secondary);
}

/* Status Indicators */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

/* Alerts */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Loading States */
.loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: 4rem;
}

.footer-content {
    text-align: center;
    color: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Hide the top‑bar actions (login/register) on small screens.
       They will be shown inside the mobile menu via JavaScript. */
    .nav-actions {
        display: none;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Styling for cloned nav actions in the mobile menu. The
   JavaScript adds the class .mobile-nav-actions to a clone of
   .nav-actions and appends it to the nav menu.  These rules
   ensure the buttons stack vertically and span the full width of
   the menu while retaining the design language of the original
   actions. */
.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}
.mobile-nav-actions .btn {
    width: 100%;
    justify-content: center;
}
.mobile-nav-actions .btn + .btn {
    margin-top: 0.5rem;
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.75rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-up {
    animation: slideUp 0.5s ease-out;
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark theme specific adjustments */
[data-theme="dark"] .card {
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .table th {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .form-input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.2);
}


/* ===== MOBILE RESPONSIVENESS ===== */

/* Mobile Navigation */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        flex-direction: column;
        padding: 2rem;
        box-shadow: var(--shadow-large);
        z-index: 1000;
        border-top: 1px solid var(--border-color);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-link {
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
        text-align: center;
        font-size: 1.1rem;
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
}

/* Container Responsiveness */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 1.5rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .nav-container {
        padding: 0 1rem;
        height: 60px;
    }
    
    .nav-logo {
        font-size: 1.1rem;
    }
    
    .logo-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.75rem;
    }
    
    .nav-container {
        padding: 0 0.75rem;
    }
}

/* Grid Responsiveness */
@media (max-width: 768px) {
    .grid {
        gap: 1rem;
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid {
        gap: 0.75rem;
    }
    
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Card Responsiveness */
@media (max-width: 768px) {
    .card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .card-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
}

/* Page Header Responsiveness */
@media (max-width: 768px) {
    .page-header {
        padding: 2rem 0;
    }
    
    .page-title {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    .page-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 1.5rem 0;
    }
    
    .page-title {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }
    
    .page-description {
        font-size: 1rem;
    }
}

/* Form Responsiveness */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        padding: 0.875rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .form-textarea {
        min-height: 100px;
    }
}

@media (max-width: 480px) {
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        padding: 0.75rem;
    }
}

/* Button Responsiveness */
@media (max-width: 768px) {
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .btn-large {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .btn-small {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }
    
    .btn-large {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .btn-small {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        width: auto;
    }
}

/* Status and Alert Responsiveness */
@media (max-width: 768px) {
    .status {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }
    
    .alert {
        padding: 0.875rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .status {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .alert {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}

/* Table Responsiveness */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        min-width: 600px;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .table {
        min-width: 500px;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.85rem;
    }
}

/* Radio and Checkbox Card Responsiveness */
@media (max-width: 768px) {
    .radio-group,
    .checkbox-group {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .radio-card,
    .checkbox-card,
    .switch-card {
        padding: 0.875rem;
    }
    
    .radio-content h4,
    .checkbox-content h4,
    .switch-content h4 {
        font-size: 0.85rem;
    }
    
    .radio-content p,
    .checkbox-content p,
    .switch-content p {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .radio-card,
    .checkbox-card,
    .switch-card {
        padding: 0.75rem;
    }
}

/* Range Slider Responsiveness */
@media (max-width: 768px) {
    .form-range::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }
    
    .form-range::-moz-range-thumb {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .form-range::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
    
    .form-range::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }
}

/* Terminal Output Responsiveness */
@media (max-width: 768px) {
    .terminal-output {
        padding: 0.875rem;
        font-size: 0.8rem;
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .terminal-output {
        padding: 0.75rem;
        font-size: 0.75rem;
        max-height: 250px;
    }
}

/* Utility Classes for Mobile */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
    
    .block-mobile {
        display: block !important;
    }
    
    .flex-mobile {
        display: flex !important;
    }
    
    .text-center-mobile {
        text-align: center !important;
    }
    
    .w-full-mobile {
        width: 100% !important;
    }
}

/* Prevent horizontal scroll */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .container,
    .nav-container,
    .card,
    .form-input,
    .form-textarea,
    .form-select {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .card:hover,
    .nav-link:hover,
    .theme-toggle:hover {
        transform: none;
        box-shadow: var(--shadow-medium);
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .card:active {
        transform: translateY(1px);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .page-header {
        padding: 1rem 0;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .card {
        padding: 1rem;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .container {
        padding: 0 0.5rem;
    }
    
    .nav-container {
        padding: 0 0.5rem;
    }
    
    .card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-description {
        font-size: 0.9rem;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        padding: 0.625rem;
        font-size: 16px;
    }
    
    .btn {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
}

/* -------------------------------------------------------------------
   Custom additions for improved mobile responsiveness and consistency
   across legacy template pages. These rules extend the existing
   design system, offering responsive grids for the home page hero
   section, card styling for script pages, button styling for old
   templates, notice alerts, and a responsive table wrapper.  */

/*
 * Hero grid used on the landing page
 * Converts the two–column layout into a single column on tablets
 * and phones to ensure content remains legible on small screens.
 */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* -------------------------------------------------------------------
   Additional responsive tweaks for the landing page hero section.
   The hero area contains large headings, a pair of call‑to‑action
   buttons and a 3D dashboard preview. On smaller screens we
   reflow the layout into a single column, centre the text and
   convert the buttons into full‑width blocks. The heavy preview
   panel is hidden entirely on tablets and phones to prioritise
   content legibility. Font sizes are scaled down slightly to
   prevent overflowing lines on narrow devices.  */

@media (max-width: 768px) {
    /* Align hero content centrally and space it consistently */
    section.hero .hero-grid {
        text-align: center;
    }
    /* Ensure buttons in the hero section are easy to tap and stack vertically */
    section.hero .hero-grid .btn {
        width: 100%;
        justify-content: center;
    }
    section.hero .hero-grid .btn + .btn {
        margin-top: 1rem;
    }
    /* Hide the dashboard preview on smaller screens to avoid
       horizontal overflow and reduce visual clutter */
    section.hero .hero-visual {
        display: none;
    }
}

/* Reinstate the preview on wider viewports */
@media (min-width: 769px) {
    section.hero .hero-visual {
        display: block;
    }
}

/* Scale down hero headings and descriptions at different breakpoints */
@media (max-width: 768px) {
    section.hero h1 {
        font-size: 2.5rem !important;
    }
    section.hero p {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    section.hero h1 {
        font-size: 2rem !important;
    }
    section.hero p {
        font-size: 1rem !important;
    }
}

/*
 * Script card – used on legacy run_* pages. Wraps configuration forms
 * in a modern card with border radius, shadow and padding. This
 * definition mirrors the main .card styling to unify the look across
 * all pages.
 */
.script-card {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

/* Ensure inputs within script cards inherit consistent styling */
.script-card input,
.script-card select,
.script-card textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: all var(--transition-fast);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.script-card input:focus,
.script-card select:focus,
.script-card textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

/*
 * Legacy .button class – map old button usage to the new button
 * appearance. These classes appear in several legacy templates
 * (e.g. tasks.html, logs.html, run_auto_likes.html). The styling
 * mirrors .btn.btn-primary for primary actions and provides
 * hover/active states.
 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-medium);
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: var(--shadow-medium);
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-large);
}

/*
 * Notice component – used for success/error messages in legacy
 * run_* templates. Provides padding, rounded corners and
 * distinct colours for success and error states.
 */
.notice {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin: 1rem 0;
    display: block;
    line-height: 1.5;
}
.notice.success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.notice.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/*
 * Responsive table wrapper – applies modern table styling to
 * legacy templates using the .table-wrapper class. This wrapper
 * enables horizontal scrolling on small screens while retaining
 * consistent header/background styles. If a template instead uses
 * .table-container, the existing definitions above will take effect.
 */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: var(--bg-primary);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
}
.table-wrapper .table {
    min-width: 600px;
    width: 100%;
    border-collapse: collapse;
}
.table-wrapper th,
.table-wrapper td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.table-wrapper th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}
.table-wrapper tr:hover {
    background: var(--bg-secondary);
}

/*
 * Run output styling – used when displaying plain log output on
 * log_view.html. Ensures the text is scrollable and legible on
 * both desktop and mobile devices.
 */
.run-output {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid var(--border-color);
    margin-top: 1rem;
}