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


        body {
            font-family: Arial, Helvetica, sans-serif;
            min-height: 100vh;
            background: #f4f8f5;
            color: #26352b;
        }


        /* ==============================
           HEADER
        ============================== */

        header {
            background: #176b38;
            color: white;
            padding: 18px 7%;
        }


        .header {
            max-width: 1000px;
            margin: auto;

            display: flex;
            align-items: center;
            gap: 18px;
        }


        .logo {
            width: 70px;
            height: 70px;
            object-fit: contain;

            background: white;
            border-radius: 50%;
            padding: 5px;
        }


        .header h1 {
            font-size: 28px;
            margin-bottom: 5px;
        }


        .header p {
            font-size: 14px;
            opacity: 0.9;
        }


        /* ==============================
           MAIN
        ============================== */

        main {
            max-width: 900px;
            margin: 45px auto;
            padding: 0 20px;
        }


        .panel {
            background: white;

            border-radius: 14px;

            padding: 35px;

            box-shadow:
                0 8px 30px rgba(0,0,0,0.08);

            border: 1px solid #e0e8e2;
        }


        .panel-title {
            text-align: center;
            margin-bottom: 30px;
        }


        .panel-title h2 {
            color: #14532d;
            font-size: 32px;
            margin-bottom: 8px;
        }


        .panel-title p {
            color: #718078;
        }


        /* ==============================
           LOGIN
        ============================== */

        #loginSection {
            max-width: 450px;
            margin: auto;
            text-align: center;
        }


        #loginSection h3 {
            font-size: 22px;
            color: #14532d;
            margin-bottom: 10px;
        }


        #loginSection p {
            color: #6b7c71;
            margin-bottom: 20px;
            font-size: 14px;
        }


        label {
            display: block;
            text-align: left;
            font-weight: bold;
            margin-bottom: 7px;
        }


        input {
            width: 100%;
            padding: 13px;

            border: 1px solid #cbd5cf;
            border-radius: 7px;

            font-size: 15px;
            outline: none;
        }


        input:focus {
            border-color: #16803c;
            box-shadow:
                0 0 0 3px rgba(22,128,60,0.1);
        }


        button {
            border: none;

            padding: 12px 25px;

            border-radius: 7px;

            background: #16803c;
            color: white;

            font-size: 15px;
            font-weight: bold;

            cursor: pointer;

            transition: 0.25s;
        }


        button:hover {
            background: #0d5c2a;
            transform: translateY(-2px);
        }


        #loginMessage {
            margin-top: 15px;
            color: #c62828;
            font-weight: bold;
        }


        /* ==============================
           ADMIN CONTENT
        ============================== */

        #adminContent {
            display: none;
        }


        .welcome {
            background: #edf8f0;

            border-left: 5px solid #16803c;

            padding: 20px;

            border-radius: 8px;

            margin-bottom: 25px;
        }


        .welcome h3 {
            color: #14532d;
            margin-bottom: 5px;
        }


        .section {
            margin: 25px 0;
        }


        .section h3 {
            color: #14532d;
            font-size: 21px;
            margin-bottom: 12px;
        }


        .notice {
            background: #fff8df;

            border: 1px solid #f1d87a;

            border-radius: 10px;

            padding: 22px;
        }


        .notice h4 {
            color: #8a5b00;
            font-size: 19px;
            margin-bottom: 10px;
        }


        .notice p {
            color: #5f5132;
            line-height: 1.7;
        }


        .details {
            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 12px;
        }


        .detail {
            background: #f7faf8;

            padding: 15px;

            border-radius: 8px;

            border: 1px solid #e3ebe5;
        }


        .detail strong {
            color: #14532d;
        }


        ul {
            padding-left: 22px;
        }


        li {
            margin-bottom: 10px;
            color: #56645b;
        }


        hr {
            border: 0;
            border-top: 1px solid #e3e8e4;
            margin: 28px 0;
        }


        .logout {
            background: #b42318;
        }


        .logout:hover {
            background: #8d1c14;
        }


        /* ==============================
           FOOTER
        ============================== */

        footer {
            background: #10251a;
            color: white;

            text-align: center;

            padding: 30px 20px;
        }


        footer p {
            color: #bdcfc2;
            font-size: 13px;
            margin: 5px;
        }


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

        @media (max-width: 650px) {

            .header {
                flex-direction: column;
                text-align: center;
            }


            .header h1 {
                font-size: 23px;
            }


            .panel {
                padding: 22px;
            }


            .panel-title h2 {
                font-size: 27px;
            }


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

        }