@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Press+Start+2P&family=Silkscreen&family=Tiny5&family=VT323&display=swap');

:root {
    /* Semantic Color Variables */
    /* Background colors */
    --bg-main: #f7a885;
    --bg-secondary: #f7b585;
    --bg-light: #fbf6cf;
    --bg-modal: #ede1e5;
    --bg-hover: #f5f5f5;
    
    /* Text colors */
    --text-primary: #090335;
    --text-secondary: #6c757d;
    --text-light: #9d9792;
    --text-white: #ffffff;
    
    /* Border colors */
    --border-primary: #090335;
    --border-light: #ddd;
    --border-lighter: #ccc;
    
    /* Button colors */
    --btn-primary: #F0797F;
    --btn-primary-hover: #F7A885;
    --btn-danger: #f66068;
    --btn-danger-hover: #ff4f59;
    --btn-warning: #ffc965;
    --btn-warning-hover: #ffbe44;
    --btn-cancel: #6c757d;
    --btn-cancel-hover: #5a6268;
    --btn-secondary: #9d9792;
    
    /* Status indicator colors */
    --status-running: #77d57c;
    --status-offline: #bfbfbf;
    --status-suspended: #e1a44a;
    --status-processing: #79b9ec;
    --status-failed: #fb8c84;
    
    /* Header colors */
    --header-bg: #f0797f;
    
    /* Alert colors */
    --alert-warning: orange;
    --alert-warning-border: orange;
    --alert-error: red;
    --alert-error-border: red;
    --alert-error-bg: #ffcdd2;
    
    /* Premium colors */
    --premium-gold: #ffd700;
    --premium-yellow: #ffed4a;
    
    /* Tooltip colors */
    --tooltip-bg: #333;
    --tooltip-text: #fff;
    
    /* Misc colors */
    --overlay-dark: rgba(9, 3, 53, 0.8);
    --shadow-soft: rgba(0, 0, 0, 0.2);
    --shadow-hard: rgba(0, 0, 0, 0.1);
    --shadow-inset-light: rgba(255, 255, 255, 1);
    --focus-ring: rgba(240, 121, 127, 0.3);
    --premium-shadow: rgba(255, 215, 0, 0.3);
    --tooltip-shadow: rgba(0, 0, 0, 0.3);

    /* Fonts */
    --f-main: 'vt323', monospace;
    --f-pixel: 'Silkscreen', monospace;

    /* Reusable Pixel Shadow */
    --pixel-shadow: 
        -0.2em 0 0 0 var(--border-primary), 
        0.2em 0 0 0 var(--border-primary), 
        0 -0.2em 0 0 var(--border-primary), 
        0 0.2em 0 0 var(--border-primary), 
        0.2em 0.4em 0 0 var(--shadow-soft), 
        0.4em 0.2em 0 0 var(--shadow-soft);
    
    --pixel-shadow-inset: 
        inset 0.1em 0.1em 0 0 var(--shadow-inset-light), 
        inset -0.1em -0.1em 0 0 var(--shadow-hard);
}

* {
    scrollbar-color: var(--btn-primary) var(--bg-modal);
    scrollbar-width: thin;
}

/* Make asterisks in required field labels red */
label .asterisk, label .required-asterisk, label.required-asterisk, label.required .asterisk, label.required .required-asterisk {
    color: var(--btn-danger);
}
label .asterisk, label .required-asterisk {
    margin-left: 0.2em;
}
/* --- Base Styles --- */
html, body {
    overflow-x: clip;
}

body {
    font-family: var(--f-main);
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text-primary);
    /* CSS-only Dithering Pattern */
    background-image: 
        linear-gradient(-45deg, var(--bg-secondary) 25%, transparent 25%), 
        linear-gradient(45deg, var(--bg-secondary) 25%, transparent 25%), 
        linear-gradient(-45deg, transparent 75%, var(--bg-secondary) 75%), 
        linear-gradient(45deg, transparent 75%, var(--bg-secondary) 75%);
    background-size: 1rem 1rem;
    background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0px;
}

a {
    color: var(--btn-primary);
    text-decoration: none;
}

h1, h2, h3 {
    margin-top: 0;
    margin-bottom: 0.7rem;
    line-height: 1.25;
}

h2 { font-size: 2.5rem; }
h4 { font-size: 2rem; }



/* --- Buttons --- */
.btn,
.auth-form .form-actions button,
.auth-form .form-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    margin: 0.5rem;
    box-sizing: border-box;
    border: none;
    background-color: var(--btn-primary);
    color: var(--text-primary);
    font-family: var(--f-pixel);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
    transition: background-color 0.2s ease;
}

.btn:hover,
.auth-form .form-actions button:hover,
.auth-form .form-actions a:hover {
    background-color: var(--btn-primary-hover);
}

.btn:active { 
    transform: translateY(0.2em); 
    box-shadow: -0.2em 0 0 0 var(--border-primary), 0.2em 0 0 0 var(--border-primary), 
                0 -0.2em 0 0 var(--border-primary), 0 0.2em 0 0 var(--border-primary); 
}

.btn-sm { padding: 5px 10px; font-size: 0.6rem; margin: 0.2rem; }

.btn-danger { background-color: var(--btn-danger); color: var(--text-white) !important; }
.btn-danger:hover { background-color: var(--btn-danger-hover); }

.btn-warning { background-color: var(--btn-warning); color: var(--text-primary) !important; }
.btn-warning:hover { background-color: var(--btn-warning-hover); }

.btn-cancel { background: var(--btn-cancel); color: var(--text-white) !important; }
.btn-cancel:hover { background: var(--btn-cancel-hover); }

.btn-secondary { background: var(--btn-secondary); color: var(--text-primary); border: 1px solid var(--border-primary); }
.btn-secondary:hover { background: var(--btn-primary-hover); }
/* --- Navigation --- */
.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--text-primary);
}

.navbar img { display: block; width: 100%; height: auto; }
.navbar .brand-link { display: flex; justify-content: center; width: 80%; }
.navbar a, .navbar a:visited, .navbar a:hover { color: var(--bg-light); }

.navbar button {
    padding: 0.7em 0.7rem;
    border: none !important;
    background-color: var(--text-primary);
    color: var(--bg-light);
    font-size: 2rem;
    font-family: inherit;
    cursor: pointer;
}
.navbar button:hover { background-color: var(--bg-light); color: var(--text-primary); }
.navbar .navbar-logout { display: contents; }

/* --- Layout & Content --- */
.banner { height: 40vh; overflow: hidden; image-rendering: pixelated; position: relative; }
.center { display: block; margin: 0 auto; width: 100%; image-rendering: pixelated; }


.parallax {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-attachment: scroll;
    background-position: center 20%;
    /* GPU acceleration hints */
    will-change: transform;
    backface-visibility: hidden;
    --layer-speed: 0;
    transform: translate3d(0, calc(var(--parallax-scroll, 0px) * var(--layer-speed)), 0);
}

/* Make the static background layer not parallax */
.parallax-static {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-attachment: scroll;
    background-position: center 20%;
    backface-visibility: hidden;
    transform: none;
    will-change: auto;
}

/* Disable parallax GPU hints on mobile to save battery */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .parallax {
        will-change: auto;
    }
}

.content {
    position: relative;
    caret-color: transparent;
    padding: 5rem;
    padding-top: 3rem;
    font-size: 1em;
    line-height: 1em;
    min-height: 78vh;
    max-width: 60rem;
    margin: 0 auto;
    z-index: 1;
    background-color: var(--bg-light);
    color: var(--text-primary);
    box-shadow: var(--pixel-shadow);
}

/* Pillars decoration */
.content::after,
.content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12rem;
    image-rendering: pixelated;
    background-image: url(../images/pillartop.png), url(../images/pillar.png);
    background-repeat: no-repeat, repeat-y;
    background-size: 12em auto;
    pointer-events: none;
    z-index: -1;
}

.content::before { left: -8em; }
.content::after { right: -8em; }

.footer {
    background-color: var(--text-primary);
    color: var(--bg-light);
    text-align: center;
    padding: 1rem;
}

.footer a {
    color: var(--btn-primary);
}
.footer a:hover {
    text-decoration: underline;
}

.froggy-ad-slot {
    margin: 1rem auto;
    max-width: 60rem;
    width: calc(100% - 2rem);
}

.froggy-ad-unit {
    min-height: 90px;
}

.froggy-ad-rails {
    display: none;
    pointer-events: none;
}

.froggy-page-shell {
    position: relative;
    --froggy-rail-top: 220px;
    --froggy-rail-bottom-gap: 1rem;
}

.froggy-ad-slot--left,
.froggy-ad-slot--right {
    position: sticky;
    top: var(--froggy-rail-top);
    width: 160px;
    max-width: 160px;
    height: calc(100vh - var(--froggy-rail-top) - var(--froggy-rail-bottom-gap));
    max-height: calc(100vh - var(--froggy-rail-top) - var(--froggy-rail-bottom-gap));
    min-height: 0;
    margin: 0;
    align-self: start;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 9;
}

.froggy-ad-slot--left {
    left: 0;
}

.froggy-ad-slot--right {
    right: 0;
}

.froggy-ad-unit--rail {
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

.froggy-ad-slot--left .froggy-ad-placeholder,
.froggy-ad-slot--right .froggy-ad-placeholder {
    min-height: 100%;
    height: 100%;
}

.froggy-ad-placeholder {
    min-height: 90px;
    border: 3px dashed var(--border-primary);
    background-color: var(--bg-light);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.75rem;
    box-sizing: border-box;
    box-shadow: var(--pixel-shadow);
}

.froggy-ad-slot--footer,
.footer {
    position: relative;
    z-index: 12;
}

.froggy-ad-placeholder strong {
    color: var(--text-primary);
}

/* --- Modals --- */
#server-modal .modal-body::after {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-1px);
    border-left: 3px dashed var(--border-primary);
    pointer-events: none;
}

/* --- Forms & Inputs --- */
.form-section {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    overflow-y: auto;
    font-size: 1.3rem;
    background: var(--bg-modal);
}
.form-section h4 { margin-top: 1px; }

.config-section {
    flex: 1;
    min-width: 0;
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-modal);
    border: 1px solid var(--border-light);
    box-shadow: var(--pixel-shadow);
}

.form-group { margin-bottom: 15px; font-size: 1.5rem; }
.form-group label { display: block; margin: 5px 0; color: var(--text-primary); }
.points-input-row { gap: 0.75rem; }
.points-input-row .proxy-domain-source-select .form-input { width: 100%; }
.points-euro-container { margin-top: 0; }
.points-euro-preview {
    color: var(--text-secondary);
    font-size: 1.2rem;
    white-space: nowrap;
}

.form-input,
input[type="email"],
select,
.ram-input,
.edit-text-input {
    width: 100%;
    padding: 8px;
    border: 3px solid var(--border-primary);
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
    color: var(--text-primary);
    background-color: var(--text-white);
    font-family: var(--f-main);
    font-size: 1.2rem;
    box-shadow: inset 0.1em 0.1em 0 0 var(--shadow-hard);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ram-input, .edit-text-input { width: auto; }

.form-input:focus,
input[type="email"]:focus,
select:focus {
    border-color: var(--btn-primary);
    box-shadow: inset 0.1em 0.1em 0 0 var(--shadow-hard), 0 0 0 3px var(--focus-ring);
}

.form-input:hover,
select:hover {
    border-color: var(--btn-primary-hover);
}

/* Enhance select dropdown styling */
select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23090335" d="M0 3h12L6 9z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 2rem;
}

.form-actions { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.form-note, .egg-var-description, #egg-description { color: var(--text-secondary); }
.egg-var-description { font-size: 1.2rem; margin-top: 0.2rem; display: block; }

#proxy-subdomain-help,
#proxy-dns-target {
    display: block;
    font-size: 1.2rem;
    line-height: 1.25;
    margin-top: 0.35rem;
}

.proxy-domain-source-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.proxy-domain-source-select {
    flex: 1 1 auto;
    min-width: 0;
}

.proxy-https-toggle-wrap {
    flex: 0 0 auto;
    padding-bottom: 0;
}

.proxy-https-toggle-wrap .switch-container {
    margin-top: 0;
}

/* Toggle Switch Component */
.switch-container { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.switch { position: relative; display: inline-block; width: 2.4rem; height: 1.4rem; flex-shrink: 0; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; }

.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--btn-cancel);
    transition: 0.3s;
    border: 1px solid var(--border-primary);
    box-shadow: -0.1em 0 0 0 var(--border-primary), 0.1em 0 0 0 var(--border-primary), 
                0 -0.1em 0 0 var(--border-primary), 0 0.1em 0 0 var(--border-primary);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 0.9rem;
    width: 0.9rem;
    left: 0.15rem;
    bottom: 0.15rem;
    background-color: var(--text-white);
    transition: 0.3s;
    border: 1px solid var(--border-primary);
}

.switch input:checked + .switch-slider { background-color: var(--btn-primary); }
.switch input:checked + .switch-slider:before { transform: translateX(1rem); }
.switch-label { font-size: 1.3rem; color: var(--text-primary); user-select: none; line-height: 1; margin-top: 0.1rem; }
/* Range Sliders */
input[type="range"] {
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--border-primary);
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}
input[type="range"]:hover { opacity: 1; }

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0;
    background: var(--btn-primary);
    cursor: pointer;
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: var(--btn-primary);
    cursor: pointer;
    border: none;
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
}

/* --- Tables --- */
.server-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.8rem;
    background: var(--bg-modal);
    overflow: hidden;
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
    table-layout: fixed;
}

.server-table th {
    background-color: var(--header-bg);
    text-shadow: -1px -1px 0 var(--text-primary), 1px -1px 0 var(--text-primary), 
                 -1px 1px 0 var(--text-primary), 1px 1px 0 var(--text-primary);
    color: var(--text-white);
    padding: 12px;
    text-align: left;
    font-size: 1.5rem;
    box-shadow: var(--pixel-shadow-inset);
}

.server-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.server-table tr:hover { background-color: var(--bg-hover); }

/* Column Sizing */
.server-table th:nth-child(1), .server-table td:nth-child(1) { width: 10%; }
.server-table th:nth-child(2), .server-table td:nth-child(2) { width: 25%; }
.server-table th:nth-child(3), .server-table td:nth-child(3) { width: 40%; }
.server-table th:nth-child(4), .server-table td:nth-child(4) { width: 10%; }
.server-table th:nth-child(5), .server-table td:nth-child(5) { width: 10%; }
.server-table th:nth-child(6), .server-table td:nth-child(6) { width: 10%; }
.server-table th:nth-child(7), .server-table td:nth-child(7) { width: 30%; }
.server-table th:nth-child(8), .server-table td:nth-child(8) { width: 15%; }

/* Proxy Routes table column sizing */
#proxy-routes-table th:nth-child(1), #proxy-routes-table td:nth-child(1) { width: 10%; }
#proxy-routes-table th:nth-child(2), #proxy-routes-table td:nth-child(2) { width: 40%; }
#proxy-routes-table th:nth-child(3), #proxy-routes-table td:nth-child(3) { width: 15%; }
#proxy-routes-table th:nth-child(4), #proxy-routes-table td:nth-child(4) { width: 40%; }
#proxy-routes-table th:nth-child(5), #proxy-routes-table td:nth-child(5) { width: 20%; }
#proxy-routes-table th:nth-child(6), #proxy-routes-table td:nth-child(6) { width: 15%; }

/* Server Status Badges */
.server-status {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 3px solid var(--border-primary);
    vertical-align: middle;
    text-indent: -9999px;
    overflow: hidden;
    box-shadow: -0.1em 0 0 0 var(--border-primary), 0.1em 0 0 0 var(--border-primary), 
                0 -0.1em 0 0 var(--border-primary), 0 0.1em 0 0 var(--border-primary);
}

.status-running { background-color: var(--status-running); }
.status-offline, .status-unknown { background-color: var(--status-offline); }
.status-suspended, .status-stopping { background-color: var(--status-suspended); }
.status-installing, .status-restoring, .status-starting { background-color: var(--status-processing); }
.status-failed { background-color: var(--status-failed); }

/* Server Buttons */
.suspend-server-btn, .delete-server-btn { width: 100%; }
.suspend-server-btn { margin-bottom: 0.3rem; }
.server-table td:nth-child(7) { flex-direction: column; align-items: stretch; }

/* Proxy route action buttons should match server table action button behavior */
.proxy-toggle-route-btn, .proxy-delete-route-btn { width: 100%; }
.proxy-toggle-route-btn { margin-bottom: 0.3rem; }

.server-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.6rem;
    font-size: 1rem;
    justify-items: center;
}
.server-buttons .btn { width: 100%; max-width: 16rem; text-align: center; }
.server-actions { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
#cost-display { background: var(--bg-light); }

.dashboard-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-header-row h2 {
    margin-bottom: 0;
}

.dashboard-points-panel {
    margin: 0 !important;
    padding: 0.7rem 1rem;
}

.dashboard-points-panel p {
    margin: 0;
    font-size: 2rem;
    line-height: 1;
}

.info-panel {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-modal);
    padding: 0.7rem;
    margin: 2rem 0;
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
}
.info-left, .info-right { flex: 1; display: flex; flex-direction: column; gap: 0; }
.info-left strong, .info-right strong { font-size: 1rem; }
.info-divider { width: 2px; border-left: 3px dashed var(--border-primary); margin: 0 1rem; }

/* --- Auth Pages --- */
.auth-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 30px;
    background: var(--bg-modal);
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
}
.auth-container h2 { margin-bottom: 30px; color: var(--text-primary); font-size: 2rem; text-align: center; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }

/* --- Landing Page --- */
.landing-hero {
    display: grid;
    grid-template-columns: 5fr 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
}
.hero-text h1 { font-size: 2.8rem; margin: 0 0 0.5rem; }
.hero-text p { font-size: 1.2rem; line-height: 1.4; margin: 0 0 1rem; }
.hero-media { background: var(--bg-modal); box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset); padding: 0.6rem; }
.hero-media img { width: 100%; display: block; object-fit: cover; image-rendering: pixelated; }

.solar-highlight {
    display: block;
    background: var(--bg-modal);
    padding: 1rem;
    margin: 1.5rem 0;
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
}
.solar-highlight::after { content: ""; display: block; clear: both; }
.solar-highlight img {
    float: left;
    margin: 0 1rem 0.5rem 0;
    width: 100%;
    max-width: 15em;
    height: auto;
    image-rendering: pixelated;
    object-fit: cover;
    background: var(--bg-light);
}
.solar-highlight p { margin: 0; line-height: 1.4; font-size: 1rem; }

.how-to { margin-top: 1rem; }
.how-to h2 { text-align: center; }

.toggle-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; justify-content: stretch; }
.toggle-buttons button { flex: 1 1 12rem; min-width: 10rem; }

.toggle-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
    padding: 0 0.4rem;
    background: var(--bg-modal);
    box-shadow: var(--pixel-shadow);
}
.toggle-panel.open { opacity: 1; padding: 1rem; max-height: 100em; }
.toggle-panel .panel-body { display: flex; flex-direction: column; gap: 1rem; }

.panel-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.panel-row:last-child { margin-bottom: 0; }

.toggle-panel img { width: 100%; height: 220px; object-fit: cover; background: var(--bg-light); }
.toggle-panel video { width: 100%; max-width: 100%; max-height: 240px; object-fit: cover; display: block; }

/* --- Utilities & Status --- */
.text-center { text-align: center; }
.hidden-container { display: none; }
.result-container { margin-top: 15px; }

/* Alerts */
.alert-warning { padding: 10px; margin: 10px 0; border: 1px solid var(--alert-warning-border); color: var(--alert-warning); }
.alert-error, .alert-danger { padding: 10px; margin: 10px 0; border: 1px solid var(--alert-error-border); color: var(--alert-error); }
.alert-success { padding: 10px; margin: 10px 0; border: 1px solid #28a745; color: #1e7b34; }
#points-error {
    margin-top: 0.7rem;
    padding: 0.7rem;
    background: var(--alert-error-bg);
    color: var(--text-primary);
    font-size: 1.2rem;
    box-shadow: var(--pixel-shadow), var(--pixel-shadow-inset);
}
#points-error:empty { display: none; }
.error-message { color: var(--alert-error); }
.config-message { font-style: italic; }

/* Editing UI Helpers */
.editable-field { cursor: pointer; border-bottom: 1px dotted var(--border-lighter); }

.ram-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.ram-controls input[type="range"] { flex: 1 1 auto; min-width: 0; }
.ram-controls .ram-input { width: 5rem; text-align: center; }
.ram-labels { display: flex; justify-content: space-between; font-size: 1rem; color: var(--text-light); }

.edit-ram-controls { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
.edit-ram-slider { width: 100%; height: 6px; }
.edit-ram-input { width: 50px; text-align: center; }
.edit-text-controls { display: flex; align-items: center; gap: 5px; }

/* Premium & Tooltips */
.premium-badge {
    background: linear-gradient(45deg, var(--premium-gold), var(--premium-yellow));
    color: var(--tooltip-bg);
    padding: 4px 8px;
    font-size: 1em;
    margin-left: 10px;
    display: inline-block;
    box-shadow: 0 2px 4px var(--premium-shadow);
}

.premium-badge-img {
    height: 32px;
    width: auto;
    margin-left: 10px;
    vertical-align: middle;
    image-rendering: pixelated;
    transform: scale(1.5);
    transform-origin: left center;
}

.tooltip { position: relative; display: inline-block; cursor: help; text-decoration: underline dotted; }
.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    text-align: left;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -150px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 1em;
    line-height: 1.4;
    box-shadow: 0 4px 8px var(--tooltip-shadow);
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--tooltip-bg) transparent transparent transparent;
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

#dark-mode-toggle {
    background-color: var(--text-primary);
    color: var(--bg-light);
    border: none;
    padding: 0.7rem;
    font-size: 1.5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Media Queries --- */
@media only screen and (max-width: 600px), only screen and (orientation: portrait) {
    .content { padding: 2rem; padding-top: 1rem; }
    .dashboard-header-row {
        flex-direction: column;
        align-items: stretch;
    }
    .dashboard-points-panel {
        width: fit-content;
        align-self: flex-end;
    }
    .content::after, .content::before { width: 8rem; background-size: 8em auto; }
    .content::before { left: -5em; }
    .content::after { right: -5em; }
    .content::before,
    .content::after {
        display: none;
        width: 0;
        background-image: none;
    }
    .navbar .brand-link { display: flex; justify-content: center; width: 95%; }
    .auth-container { margin: 20px; padding: 20px; max-width: none; }
    .landing-hero { grid-template-columns: 1fr 0fr; gap: 0; align-items: start; }
    .hero-media { display: none; }
    .toggle-panel .panel-body { flex-direction: column; }
    .auth-form .form-actions { gap: 10px; }
    .panel-row { display: flex; flex-direction: column; }
    .panel-row > div { order: 1; }
    .panel-row img, .panel-row video { order: 2; }
}

@media only screen and (min-width: 80rem) {
    .froggy-ad-slot--header,
    .froggy-ad-slot--footer {
        display: none;
    }

    .froggy-ad-rails {
        display: grid;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        grid-template-columns: 160px minmax(0, 1fr) 160px;
        align-items: start;
    }

    .froggy-ad-slot--left {
        grid-column: 1;
        justify-self: start;
    }

    .froggy-ad-slot--right {
        grid-column: 3;
        justify-self: end;
    }
}

/* Shake animation for validation feedback */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake { animation: shake 0.5s; }