* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Segoe UI", Arial, sans-serif;
}

body {
    background: radial-gradient( circle at 10% 20%, rgba(120, 180, 255, .35), transparent 35% ), radial-gradient( circle at 90% 10%, rgba(180, 150, 255, .30), transparent 35% ), radial-gradient( circle at 50% 100%, rgba(80, 210, 190, .25), transparent 40% ), linear-gradient( 135deg, #eef5ff, #f7f9ff );
    color: #1d2738;
    min-height: 100vh;
}


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

.page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 25px;
}


/* ========================================
   GLASS CARD
   ======================================== */

.glass-card {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(60, 80, 120, .15), inset 0 1px 0 rgba(255, 255, 255, .8);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}


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

.header {
    padding: 30px 35px;
    margin-bottom: 25px;
}

.title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.subtitle {
    font-size: 15px;
    color: #718096;
}


/* ========================================
   TABLE
   ======================================== */

.table-card {
    overflow: hidden;
}

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

    .update-table th {
        padding: 18px 22px;
        text-align: left;
        font-size: 13px;
        color: #667085;
        background: rgba(255,255,255,.45);
        border-bottom: 1px solid rgba(100,120,150,.12);
    }

    .update-table td {
        padding: 20px 22px;
        border-bottom: 1px solid rgba(100,120,150,.10);
        vertical-align: top;
    }

    .update-table tr:last-child td {
        border-bottom: none;
    }

    .update-table tbody tr {
        transition: all .2s ease;
    }

        .update-table tbody tr:hover {
            background: rgba(255,255,255,.55);
        }


/* ========================================
   VERSION
   ======================================== */

.version {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(70,130,255,.10);
    color: #2864d7;
    font-weight: 600;
    font-size: 13px;
}


/* ========================================
   DATE
   ======================================== */

.date {
    color: #4b5565;
    white-space: nowrap;
}


/* ========================================
   MULTILINE UPDATE
   ======================================== */

.updates {
    line-height: 1.7;
    color: #374151;
    white-space: normal;
    word-break: break-word;
}


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

.admin-card {
    padding: 35px;
    margin-bottom: 25px;
}

.form-row {
    margin-bottom: 22px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}


/* ========================================
   INPUT
   ======================================== */

.input,
.select,
.textarea {
    width: 100%;
    padding: 13px 15px;
    border-radius: 13px;
    border: 1px solid rgba(100,120,150,.20);
    background: rgba(255,255,255,.75);
    outline: none;
    font-family: inherit;
    font-size: 14px;
    transition: .2s;
}

    .input:focus,
    .select:focus,
    .textarea:focus {
        border-color: rgba(50,110,240,.55);
        box-shadow: 0 0 0 4px rgba(50,110,240,.08);
    }

.textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
}


/* ========================================
   BUTTON
   ======================================== */

.btn {
    border: none;
    padding: 13px 24px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient( 135deg, #4c8dff, #6b65e8 );
    color: white;
    box-shadow: 0 8px 20px rgba(70,110,230,.25);
    transition: .2s;
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(70,110,230,.32);
    }


.btn-cancel {
    margin-left: 10px;
    background: rgba(100,110,125,.12);
    color: #4b5563;
    box-shadow: none;
}


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

.login-card {
    max-width: 430px;
    margin: 100px auto;
    padding: 35px;
}


/* ========================================
   MESSAGE
   ======================================== */

.message {
    display: block;
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 12px;
    background: rgba(255,80,80,.08);
    color: #c0392b;
}

.success {
    background: rgba(50,180,110,.10);
    color: #218c57;
}


/* ========================================
   ADMIN HISTORY
   ======================================== */

.admin-history {
    overflow: hidden;
}


/* ========================================
   ACTION
   ======================================== */

.action-edit,
.action-delete {
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.action-edit {
    color: #2864d7;
}

.action-delete {
    color: #d64545;
}

    .action-edit:hover,
    .action-delete:hover {
        text-decoration: underline;
    }


/* ========================================
   EMPTY
   ======================================== */

.empty-message {
    padding: 50px 20px;
    text-align: center;
    color: #7a8495;
    font-size: 15px;
}


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

@media(max-width: 700px) {

    .page {
        padding: 20px 12px;
    }

    .title {
        font-size: 25px;
    }

    .update-table th,
    .update-table td {
        padding: 14px 12px;
    }

        .update-table th:nth-child(1),
        .update-table td:nth-child(1) {
            display: none;
        }

    .admin-card {
        padding: 22px;
    }
}