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

    body {
        /* Gradijent na bazi boje #425C33 i #6F8F5A */
        background: linear-gradient(145deg, #425C33 0%, #6F8F5A 100%);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem;
        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    }

    /* Glavni kontejner */
    .main-card {
        background: rgba(255, 250, 240, 0.95);
        backdrop-filter: blur(2px);
        border-radius: 2rem;
        box-shadow: 0 25px 40px -12px rgba(30, 40, 20, 0.4);
        padding: 1.5rem;
        width: 100%;
        max-width: 1400px;
        transition: all 0.2s ease;
        border: 1px solid rgba(90, 110, 70, 0.2);
    }

    /* TABELA */
    .responsive-table {
        width: 100%;
        border-collapse: collapse;
        font-family: inherit;
        background-color: #ffffff;
        border-radius: 1.25rem;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        border: none;
    }

    /* Ćelije tabele - BEZ BORDERA */
    .responsive-table th,
    .responsive-table td {
        border: none;
        padding: 1rem;
        text-align: center;
        vertical-align: top;
        transition: all 0.2s ease;
    }

    /* Zaglavlje tabele */
    .responsive-table th {
        background-color: #2e4a22;
        color: #fef7e0;
        font-weight: 600;
        font-size: 1.2rem;
        border: none;
        padding: 1rem;
    }

    /* Ćelije sadržaja */
    .responsive-table td {
        background-color: #fffcf7;
        color: #2c3a1f;
        border: none;
    }

    /* Hover efekat na svakoj ćeliji ponaosob */
    .responsive-table td:hover {
        background-color: #cbe5b4 !important;
        color: #1d3e10;
        transform: scale(1.01);
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(70, 100, 50, 0.2);
    }

    /* Onemogućavamo hover na nivou reda */
    .responsive-table tr:hover td {
        background-color: inherit;
    }

    /* Kartice unutar ćelija */
    .inner-card {
        background: white;
        border-radius: 1rem;
        padding: 1rem;
        text-align: left;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        height: 100%;
    }

    .inner-card h3 {
        color: #2e4a22;
        border-bottom: 2px solid #cbe5b4;
        padding-bottom: 0.5rem;
        margin-bottom: 0.8rem;
        font-size: 1.1rem;
    }

    .inner-card a {
        display: block;
        text-decoration: none;
        color: #2c5a1f;
        padding: 0.3rem 0;
        font-weight: 500;
        transition: 0.2s;
    }

    .inner-card a:hover {
        color: #425C33;
        padding-left: 0.3rem;
    }

    .inner-card br {
        display: none;
    }

    .inner-card .menu-item {
        margin: 0.2rem 0;
    }

    /* Status uređaja */
    .device-status {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.85rem;
        background: #f4f8efdd;
        backdrop-filter: blur(4px);
        padding: 0.5rem 1rem;
        border-radius: 60px;
        display: inline-block;
        width: auto;
        font-weight: 500;
        color: #2b3b1f;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        border: 1px solid #bdd8a6;
    }

    .status-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    footer {
        text-align: center;
        margin-top: 1rem;
        font-size: 0.7rem;
        color: #2c3a1f;
        opacity: 0.8;
        font-weight: 500;
    }

    .th-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* RESPONZIVNOST */
    @media (min-width: 1025px) {
        body {
            padding: 2rem;
        }
        .responsive-table td,
        .responsive-table th {
            padding: 1.2rem;
        }
    }

    @media (min-width: 601px) and (max-width: 1024px) {
        body {
            padding: 1rem;
        }
        .responsive-table td,
        .responsive-table th {
            padding: 0.8rem;
        }
        .inner-card {
            padding: 0.8rem;
        }
        .inner-card h3 {
            font-size: 1rem;
        }
    }

    @media (max-width: 600px) {
        body {
            padding: 0.5rem;
        }
        .main-card {
            padding: 0.8rem;
        }
        .responsive-table td,
        .responsive-table th {
            padding: 0.5rem;
            display: block;
            width: 100%;
        }
        .responsive-table tr {
            display: block;
            margin-bottom: 1rem;
        }
        .responsive-table tbody {
            display: block;
        }
        .responsive-table td {
            width: 100%;
            display: block;
        }
        .inner-card h3 {
            font-size: 0.95rem;
        }
        .inner-card a {
            font-size: 0.85rem;
        }
        .th-title {
            flex-direction: column;
            gap: 0.3rem;
            text-align: center;
        }
    }

    @media (max-width: 480px) {
        .inner-card {
            padding: 0.6rem;
        }
        .inner-card h3 {
            font-size: 0.9rem;
        }
        .inner-card a {
            font-size: 0.8rem;
        }
    }

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

    .main-card {
        animation: fadeSlideUp 0.4s ease-out;
    }
    
    .text-green {
        color: green;
        font-weight: bold;
    }
    
    .text-red {
        color: red;
        font-weight: bold;
    }
    
    .cambria-style {
    font-family: 'Cambria', 'Crimson Pro', Georgia, serif;
    font-style: italic;
    font-weight: normal;
    color: #F0A500;      /* 🟡 zlatno žuta - zrelo žito */
    font-size: 32px;
    }