@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');
@import url('/assets/css/tester-modal.css');

:root {
    --opacity-font-global: 1;
    --opacity-font-title: var(--opacity-font-global);
    --opacity-font-desc: var(--opacity-font-global);
    --opacity-font-meta: var(--opacity-font-global);
    --opacity-font-tech: var(--opacity-font-global);
    --opacity-font-button: var(--opacity-font-global);

    --app-bg: #050505;
    --app-surface: #000000;
    --app-panel: #0d1117;
    --app-panel-hover: #f9741605;
    --app-text: #f1ede4;
    --app-muted: #b29a7a;
    --app-dim: #8c7354;
    --app-border: #cfcfd3;
    --app-border-soft: #21262d;
    --app-accent: #ff7f00;
    --app-accent-2: #3b82f6;
    --app-success: #4ade80;
    --app-theme: var(--app-accent);
    --app-theme-rgb: 255, 127, 0;
    --app-theme-btn-bg: #f9741605;
    --app-theme-btn-border: rgba(249, 115, 22, 0.3);
    --app-title-color: #f97416d0;
    --app-desc-color: #71717a;
    --app-tech-color: #8b8b99;
    --app-btn-text: #f97316;
    --app-btn-hover-bg: rgba(249, 115, 22, 0.1);
    --app-page-title-size: 2rem;
    --app-page-desc-size: 12px;
    --app-section-title-size: 11px;
    --app-meta-size: 11px;
    --app-cta-size: 10px;
    --app-card-title-size: 11px;
    --app-card-text-size: 12px;
    --app-spec-size: 12px;
    --app-gallery-size: 11px;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background: var(--app-bg);
    color: var(--app-text);
}

/* Automatic theme per platform (future-ready for next app pages) */
body[data-platform="windows"] {
    --app-theme: #ff7f00;
    --app-theme-rgb: 255, 127, 0;
    --app-theme-btn-bg: #f9741605;
    --app-theme-btn-border: rgba(249, 115, 22, 0.3);
    --app-title-color: #f97416d0;
    --app-desc-color: #71717a;
    --app-tech-color: #8b8b99;
    --app-btn-text: #f97316;
    --app-btn-hover-bg: rgba(249, 115, 22, 0.1);
}

body[data-platform="android"] {
    --app-theme: #84cc16;
    --app-theme-rgb: 132, 204, 22;
    --app-panel-hover: #d5bb260a;
    --app-theme-btn-bg: #d5bb260a;
    --app-theme-btn-border: rgba(249, 227, 32, 0.468);
    --app-title-color: #d5bb26;
    --app-desc-color: #71717a;
    --app-tech-color: #8b8b99;
    --app-btn-text: #d5bb26;
    --app-btn-hover-bg: rgba(249, 227, 32, 0.1);
}

body[data-platform="web"] {
    --app-theme: #22d3ee;
    --app-theme-rgb: 34, 211, 238;
    --app-panel-hover: #00b5fc10;
    --app-theme-btn-bg: #00b5fc10;
    --app-theme-btn-border: rgba(0, 166, 249, 0.489);
    --app-title-color: #00b5fc;
    --app-desc-color: #71717a;
    --app-tech-color: #8b8b99;
    --app-btn-text: #00b5fc;
    --app-btn-hover-bg: rgba(0, 166, 249, 0.11);
}

.app-console {
    background: var(--app-surface);
    border: 1px solid var(--app-theme-btn-border);
    padding: 20px;
}

.app-section-title {
    color: var(--app-tech-color);
    letter-spacing: 0.11em;
    font-size: var(--app-section-title-size);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: var(--opacity-font-tech);
    /* Pozwala łamać długie "tokeny" (np. z `$`) na telefonach,
       żeby nie wychodziły poza ramkę w niektórych przeglądarkach (np. Samsung). */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.app-meta-line {
    font-size: var(--app-meta-size);
    color: var(--app-tech-color);
    opacity: var(--opacity-font-meta);
}

.app-meta-label {
    color: #52525b;
}

.app-status {
    color: var(--app-success);
    font-weight: 700;
}

.app-link {
    color: var(--app-btn-text);
    text-decoration: none;
    opacity: var(--opacity-font-meta);
}

.app-link:hover {
    text-decoration: none;
    color: #000000;
    background: var(--app-btn-hover-bg);
}

.app-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.app-cta-btn {
    border: 1px solid var(--app-theme-btn-border);
    background: transparent;
    color: var(--app-btn-text);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--app-cta-size);
    padding: 11px 14px;
    transition: all 0.2s ease;
    opacity: var(--opacity-font-button);
}

.app-cta-btn:hover {
    border-color: var(--app-theme-btn-border);
    background: var(--app-btn-hover-bg);
    color: #000000;
}

.app-cta-btn-primary {
    border-color: var(--app-theme-btn-border);
}

/* Disabled CTA (single source of truth) */
.app-cta-btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}

.app-grid {
    display: grid;
    gap: 12px;
}

.app-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-card {
    border: 1px solid var(--app-theme-btn-border);
    background: var(--app-panel);
    padding: 14px;
}

.app-card:hover {
    background: var(--app-panel-hover);
}

.app-card-title {
    color: var(--app-title-color);
    font-size: var(--app-card-title-size);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: var(--opacity-font-title);
}

.app-card-text {
    color: var(--app-desc-color);
    font-size: var(--app-card-text-size);
    line-height: 1.6;
    opacity: var(--opacity-font-desc);
}

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

.app-spec-table th,
.app-spec-table td {
    border: 1px solid var(--app-theme-btn-border);
    padding: 10px;
    font-size: var(--app-spec-size);
    text-align: left;
}

.app-spec-table th {
    color: var(--app-title-color);
    width: 220px;
    opacity: var(--opacity-font-title);
}

.app-faq details {
    border: 1px solid var(--app-theme-btn-border);
    background: var(--app-panel);
    padding: 10px 12px;
}

.app-faq details + details {
    margin-top: 10px;
}

.app-faq summary {
    color: var(--app-title-color);
    cursor: pointer;
    font-size: var(--app-card-text-size);
    opacity: var(--opacity-font-title);
}

.app-faq p {
    margin-top: 10px;
    color: var(--app-desc-color);
    font-size: var(--app-card-text-size);
    line-height: 1.6;
    opacity: var(--opacity-font-desc);
}

.gallery-slot {
    border: 1px dashed var(--app-theme-btn-border);
    background: #090d13;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--app-tech-color);
    font-size: var(--app-gallery-size);
    padding: 8px;
    opacity: var(--opacity-font-tech);
}

.gallery-slot:hover {
    background: var(--app-panel-hover);
}

.app-page-title {
    color: var(--app-title-color);
    opacity: var(--opacity-font-title);
    font-size: var(--app-page-title-size);
}

.app-page-desc {
    color: var(--app-desc-color);
    opacity: var(--opacity-font-desc);
    font-size: var(--app-page-desc-size);
}

@media (max-width: 900px) {
    .app-grid-two,
    .app-grid-three {
        grid-template-columns: 1fr;
    }

    .app-spec-table th {
        width: 150px;
    }
}

/* Zachowanie Enter w treściach z admin (page_desc, feature_*_text, faq_*_a) */
[data-i18n$="page_desc"],
[data-i18n*="feature_"][data-i18n$="_text"],
[data-i18n*="faq_"][data-i18n$="_a"] {
    white-space: pre-line;
}