*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f3f4f6;
    color: #111827;
    line-height: 1.5;
}

/* =======================
   LOADING SCREEN
   ======================= */

#loadingScreen {
    position: fixed;
    inset: 0;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loadingScreen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.loading-logo-box {
    padding: 1rem;
    border-radius: 1rem;
    background: #020617;
    border: 4px solid #ef4444; /* pornește cu roșu */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.7);
    animation: boxBorderCycle 3s linear infinite;
}

.loading-logo {
    width: 140px;
    height: auto;
    display: block;
    /* animăm filtrul pentru a colora logo-ul în roșu, galben, albastru */
    animation: logoColorCycle 3s linear infinite;
}

.loading-text {
    color: #e5e7eb;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Animație pentru culoarea LOGO-ului:
   - Roșu -> Galben -> Albastru
   (efect de tintare prin filter; funcționează pe baza imaginii existente) */
@keyframes logoColorCycle {
    0% {
        filter: grayscale(1) brightness(0.4) sepia(1) hue-rotate(0deg) saturate(800%) contrast(1.2); /* roșu */
    }
    33% {
        filter: grayscale(1) brightness(0.7) sepia(1) hue-rotate(55deg) saturate(900%) contrast(1.1); /* galben */
    }
    66% {
        filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(210deg) saturate(900%) contrast(1.2); /* albastru */
    }
    100% {
        filter: grayscale(1) brightness(0.4) sepia(1) hue-rotate(0deg) saturate(800%) contrast(1.2); /* înapoi la roșu */
    }
}

/* Animație pentru culoarea chenarului (border) în același ritm R-G-A */
@keyframes boxBorderCycle {
    0% {
        border-color: #ef4444; /* roșu */
    }
    33% {
        border-color: #facc15; /* galben */
    }
    66% {
        border-color: #1d4ed8; /* albastru */
    }
    100% {
        border-color: #ef4444; /* roșu */
    }
}

/* =======================
   APP LAYOUT
   ======================= */

.app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Brand header */

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-logo {
    /* Responsiv: mic pe telefon, maxim ~52px pe ecrane mari */
    width: clamp(28px, 9vw, 52px);
    height: auto;
    display: block;
    /* Forțăm logo-ul din antet să fie galben */
    filter: grayscale(1) brightness(0.8) sepia(1) hue-rotate(55deg) saturate(900%) contrast(1.05);
}

.header-text h1 {
    font-size: 1.2rem;
    margin-bottom: 0.1rem;
}

.subtitle {
    font-size: 0.85rem;
    color: #4b5563;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Cards */

.card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
}

.card h2 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

/* Buttons */

.btn {
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    cursor: pointer;
    background: #e5e7eb;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
    white-space: nowrap;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.btn-secondary {
    background: #fbbf24;
    color: #111827;
}

/* Power button states */

.btn-power {
    font-weight: 600;
}

.btn-power-on {
    background: #ef4444;
    color: #ffffff;
}

.btn-power-off {
    background: #22c55e;
    color: #ffffff;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Status sections */

.status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.status-block h2 {
    margin-bottom: 0.5rem;
}

.preview-box {
    border-radius: 0.75rem;
    border: 2px dashed #d1d5db;
    background: #f9fafb;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    overflow: hidden;
}

.preview-box.empty {
    border-style: dashed;
}

.preview-header img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
}

.preview-photos {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.preview-photos img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

/* Empty text */

.empty-text {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* Info section */

.info ol {
    margin-left: 1.25rem;
    font-size: 0.9rem;
}

.info li + li {
    margin-top: 0.25rem;
}

.hint {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Footer */

.footer {
    margin-top: auto;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Responsive */

@media (max-width: 800px) {
    .app {
        padding: 1rem;
    }

    .status {
        grid-template-columns: 1fr;
    }

    .top-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-bar-right {
        align-self: stretch;
        display: flex;
        justify-content: flex-start;
    }

    .header-text h1 {
        font-size: 1.05rem;
    }
}