/* =========================================================
   CLASS MEMORY
   Main stylesheet
   Version 1.0
========================================================= */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    /* Colors */

    --bg-main: #0b0b0d;
    --bg-secondary: #111114;
    --bg-card: #151519;
    --bg-soft: #1b1b20;

    --text-primary: #f5f5f5;
    --text-secondary: #a7a7ad;
    --text-muted: #6f6f77;

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --accent: #d8b56a;
    --accent-light: #f1d58e;
    --accent-dark: #a98238;

    --danger: #ef6b6b;

    /* Layout */

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 82px;

    --header-height: 76px;

    --content-max-width: 1400px;

    /* Radius */

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;

    /* Shadow */

    --shadow-soft:
        0 10px 40px rgba(0, 0, 0, 0.20);

    --shadow-large:
        0 25px 80px rgba(0, 0, 0, 0.45);

    /* Transition */

    --transition-fast: 0.2s ease;

    --transition:
        0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================================================
   02. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(216, 181, 106, 0.055),
            transparent 30%
        ),
        var(--bg-main);

    color: var(--text-primary);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

}


button,
input,
textarea {
    font: inherit;
}


button {
    border: 0;
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   03. WEBSITE
========================================================= */

.website {
    min-height: 100vh;
}


/* =========================================================
   04. HEADER
========================================================= */

.header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 32px
        0 calc(var(--sidebar-width) + 32px);

    background:
        rgba(11, 11, 13, 0.78);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid var(--border);

    z-index: 1000;

}


/* =========================================================
   05. BRAND
========================================================= */

.brand {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    white-space: nowrap;

}


.brand-icon {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(216, 181, 106, 0.4);

    border-radius: 50%;

    color: var(--accent);

    font-size: 15px;

}


.brand-name {

    color: var(--text-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.22em;

}


/* =========================================================
   06. SEARCH
========================================================= */

.search-container {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}


/* Search closed */

.search-button {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--border);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.035);

    color: var(--text-secondary);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition);

}


.search-button:hover {

    color: var(--accent);

    border-color:
        rgba(216, 181, 106, 0.4);

    background:
        rgba(216, 181, 106, 0.07);

    transform: translateY(-2px);

}


/* Search opened */

.search-bar {

    position: absolute;

    top: 50%;

    right: 0;

    width: 0;

    height: 46px;

    display: flex;

    align-items: center;

    gap: 10px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-50%)
        scaleX(0.85);

    transform-origin: right center;

    background:
        rgba(24, 24, 28, 0.96);

    border:
        1px solid var(--border-strong);

    border-radius: 999px;

    box-shadow:
        var(--shadow-soft);

    transition:
        width var(--transition),
        opacity var(--transition),
        transform var(--transition);

}


.search-container.search-open
.search-button {

    opacity: 0;

    pointer-events: none;

}


.search-container.search-open
.search-bar {

    width: min(
        380px,
        55vw
    );

    padding:
        0 8px
        0 17px;

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(-50%)
        scaleX(1);

}


.search-icon {

    flex-shrink: 0;

    color: var(--accent);

}


.search-bar input {

    min-width: 0;

    flex: 1;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text-primary);

}


.search-bar input::placeholder {

    color:
        var(--text-muted);

}


.search-close {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

    color:
        var(--text-secondary);

    transition:
        var(--transition-fast);

}


.search-close:hover {

    color: white;

    background:
        rgba(255, 255, 255, 0.12);

}


/* =========================================================
   07. DESKTOP SIDEBAR
========================================================= */

.desktop-sidebar {

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sidebar-width);

    display: flex;

    flex-direction: column;

    padding: 24px 16px;

    background:
        rgba(14, 14, 17, 0.96);

    border-right:
        1px solid var(--border);

    z-index: 1100;

    transition:
        width var(--transition);

}


/* =========================================================
   08. SIDEBAR TOGGLE
========================================================= */

.sidebar-toggle {

    position: absolute;

    top: 22px;
    right: -17px;

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--border-strong);

    border-radius: 50%;

    background:
        var(--bg-secondary);

    color:
        var(--text-secondary);

    box-shadow:
        var(--shadow-soft);

    z-index: 5;

    transition:
        transform var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.sidebar-toggle:hover {

    color: var(--accent);

    border-color:
        rgba(216, 181, 106, 0.5);

}


/* =========================================================
   09. SIDEBAR BRAND
========================================================= */

.sidebar-brand {

    height: 52px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        0 12px;

    margin-bottom: 40px;

    overflow: hidden;

}


.sidebar-logo {

    min-width: 38px;
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    border:
        1px solid
        rgba(216, 181, 106, 0.35);

    color:
        var(--accent);

}


.sidebar-title {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.17em;

    white-space: nowrap;

}


/* =========================================================
   10. DESKTOP NAVIGATION
========================================================= */

.desktop-menu {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.nav-item {

    position: relative;

    height: 52px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        0 14px;

    border-radius:
        var(--radius-small);

    color:
        var(--text-secondary);

    overflow: hidden;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

}


.nav-item:hover {

    color:
        var(--text-primary);

    background:
        rgba(255, 255, 255, 0.045);

}


.nav-item.active {

    color:
        var(--accent-light);

    background:
        linear-gradient(
            90deg,
            rgba(216, 181, 106, 0.12),
            rgba(216, 181, 106, 0.035)
        );

}


.nav-item.active::before {

    content: "";

    position: absolute;

    left: 0;
    top: 10px;
    bottom: 10px;

    width: 3px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--accent);

}


.nav-icon {

    width: 25px;

    flex-shrink: 0;

    text-align: center;

    font-size: 20px;

}


.nav-text {

    white-space: nowrap;

    font-size: 14px;

}


/* =========================================================
   11. SIDEBAR FOOTER
========================================================= */

.sidebar-footer {

    margin-top: auto;

}


.settings-button {

    width: 100%;

    height: 48px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        0 14px;

    border-radius:
        var(--radius-small);

    background:
        transparent;

    color:
        var(--text-muted);

    text-align: left;

    transition:
        var(--transition-fast);

}


.settings-button:hover {

    color:
        var(--text-primary);

    background:
        rgba(255, 255, 255, 0.045);

}


/* =========================================================
   12. MAIN CONTENT
========================================================= */

.main-content {

    min-height: 100vh;

    margin-left:
        var(--sidebar-width);

    padding-top:
        var(--header-height);

    transition:
        margin-left var(--transition);

}


/* =========================================================
   13. PAGE SECTIONS
========================================================= */

.page-section {

    display: none;

    width: 100%;

    max-width:
        var(--content-max-width);

    margin:
        0 auto;

    padding:
        56px 48px 100px;

}


.page-section.active-section {

    display: block;

}


/* =========================================================
   14. HERO
========================================================= */

.hero {

    position: relative;

    min-height:
        min(
            680px,
            calc(100vh - 130px)
        );

    display: flex;

    align-items: flex-end;

    padding:
        70px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    background:

        radial-gradient(
            circle at 70% 25%,
            rgba(216, 181, 106, 0.20),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #151518,
            #0c0c0e 70%
        );

    box-shadow:
        var(--shadow-large);

}


/*
    Sau này bạn có thể thay background
    bằng ảnh lớp thật:

    background:
        linear-gradient(...),
        url("assets/images/class.jpg")
        center / cover;
*/


.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            135deg,
            transparent 40%,
            rgba(216, 181, 106, 0.08)
        );

    pointer-events: none;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0.08)
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

}


.hero-small-title {

    margin-bottom: 16px;

    color:
        var(--accent);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.28em;

}


.hero-title {

    margin-bottom: 22px;

    font-size:
        clamp(
            60px,
            9vw,
            128px
        );

    font-weight: 300;

    line-height: 0.88;

    letter-spacing:
        -0.06em;

}


.hero-title span {

    display: block;

    color:
        var(--accent-light);

    font-weight: 600;

}


.hero-description {

    max-width: 520px;

    margin-bottom: 30px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 16px;

}


.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        14px 20px;

    border:
        1px solid
        rgba(216, 181, 106, 0.45);

    border-radius:
        999px;

    background:
        rgba(216, 181, 106, 0.09);

    color:
        var(--accent-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        0.12em;

    transition:
        var(--transition);

}


.hero-button:hover {

    background:
        rgba(216, 181, 106, 0.16);

    border-color:
        rgba(216, 181, 106, 0.75);

    transform:
        translateY(-3px);

}


/* =========================================================
   15. CLASS INFORMATION
========================================================= */

.class-information {

    display: grid;

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

    margin-top: 24px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.025);

}


.info-item {

    min-height: 125px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        25px 30px;

    border-right:
        1px solid var(--border);

}


.info-item:last-child {

    border-right: 0;

}


.info-label {

    margin-bottom: 7px;

    color:
        var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.2em;

}


.info-value {

    color:
        var(--text-primary);

    font-size: 20px;

    font-weight: 500;

}


/* =========================================================
   16. INTRODUCTION
========================================================= */

.intro-section {

    padding:
        130px 0 100px;

}


.intro-content {

    max-width:
        850px;

}


.section-label {

    margin-bottom: 15px;

    color:
        var(--accent);

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;

}


.section-title {

    margin-bottom: 24px;

    color:
        var(--text-primary);

    font-size:
        clamp(
            36px,
            5vw,
            68px
        );

    font-weight: 300;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;

}


.section-title span {

    display: block;

    color:
        var(--accent-light);

}


.section-description {

    max-width:
        650px;

    color:
        var(--text-secondary);

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
   17. SECTION HEADER
========================================================= */

.section-header {

    max-width:
        800px;

    margin-bottom:
        55px;

}


.section-header .section-title {

    margin-bottom:
        18px;

}


/* =========================================================
   18. SUBSECTION TITLE
========================================================= */

.subsection-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom:
        28px;

}


.subsection-title span {

    color:
        var(--accent);

    font-size: 18px;

}


.subsection-title h3 {

    font-size: 22px;

    font-weight: 500;

}


/* =========================================================
   19. MESSAGE AREA
========================================================= */

.message-area {

    margin-bottom:
        100px;

}


.message-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                280px,
                1fr
            )
        );

    gap: 18px;

}


/* =========================================================
   20. EMPTY STATES
========================================================= */

.empty-message,
.empty-memory {

    padding:
        70px 25px;

    text-align: center;

    border:
        1px dashed
        var(--border-strong);

    border-radius:
        var(--radius-medium);

    background:
        rgba(255, 255, 255, 0.018);

}


.empty-message-icon,
.empty-wishes-icon,
.empty-icon {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    margin:
        0 auto 20px;

    border:
        1px solid
        rgba(216, 181, 106, 0.3);

    border-radius: 50%;

    color:
        var(--accent);

    font-size: 24px;

}


.empty-message h3,
.empty-memory h3 {

    margin-bottom:
        8px;

    font-size: 19px;

    font-weight: 500;

}


.empty-message p,
.empty-memory p {

    max-width:
        440px;

    margin:
        0 auto 25px;

    color:
        var(--text-muted);

}


.add-message-button,
.empty-add-button {

    padding:
        12px 19px;

    border:
        1px solid
        rgba(216, 181, 106, 0.35);

    border-radius:
        999px;

    background:
        rgba(216, 181, 106, 0.07);

    color:
        var(--accent-light);

    font-size: 12px;

    transition:
        var(--transition-fast);

}


.add-message-button:hover,
.empty-add-button:hover {

    background:
        rgba(216, 181, 106, 0.14);

    border-color:
        rgba(216, 181, 106, 0.6);

}


/* =========================================================
   21. MEMORY TOOLBAR
========================================================= */

.memory-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        28px;

}


.album-filter {

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;

}


.filter-button,
.create-album-button {

    min-height: 38px;

    padding:
        0 15px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--text-secondary);

    font-size: 12px;

    transition:
        var(--transition-fast);

}


.filter-button:hover {

    color:
        var(--text-primary);

    border-color:
        var(--border-strong);

}


.filter-button.active {

    color:
        #111;

    background:
        var(--accent);

    border-color:
        var(--accent);

}


.create-album-button {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        var(--accent-light);

    border-color:
        rgba(216, 181, 106, 0.3);

}


.create-album-button:hover {

    background:
        rgba(216, 181, 106, 0.08);

    border-color:
        rgba(216, 181, 106, 0.6);

}


.add-memory-button {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(216, 181, 106, 0.45);

    border-radius:
        999px;

    background:
        var(--accent);

    color:
        #111;

    font-size: 12px;

    font-weight: 700;

    transition:
        var(--transition);

}


.add-memory-button:hover {

    background:
        var(--accent-light);

    transform:
        translateY(-2px);

}


/* =========================================================
   22. MEMORY GALLERY
========================================================= */

.memory-gallery {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 14px;

}


.memory-card {

    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius:
        var(--radius-medium);

    background:
        var(--bg-card);

    cursor: pointer;

}


.memory-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.memory-card:hover img {

    transform:
        scale(1.06);

}


.memory-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.45),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity var(--transition);

    pointer-events:
        none;
}


.memory-card:hover::after {

    opacity: 1;

}


/* =========================================================
   23. PAGINATION
========================================================= */

.memory-pagination {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top:
        35px;

    padding:
        0 8px;

}


/* =========================================================
   MEMORY PAGINATION BUTTONS
========================================================= */

.memory-page-button {

    min-width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    padding:
        0 11px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--text-secondary);

    font-size:
        12px;

    font-weight:
        500;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);

}


/* =========================================================
   HOVER
========================================================= */

.memory-page-button:hover:not(:disabled) {

    color:
        var(--text-primary);

    border-color:
        rgba(216, 181, 106, 0.45);

    background:
        rgba(216, 181, 106, 0.07);

    transform:
        translateY(-1px);

}


/* =========================================================
   ACTIVE PAGE
========================================================= */

.memory-page-button.active {

    color:
        #111;

    background:
        var(--accent);

    border-color:
        var(--accent);

    font-weight:
        700;

    box-shadow:
        0 6px 18px
        rgba(216, 181, 106, 0.14);

}


/* =========================================================
   DISABLED
========================================================= */

.memory-page-button:disabled {

    opacity:
        0.35;

    cursor:
        not-allowed;

    transform:
        none;

}


/* =========================================================
   PAGE ELLIPSIS
========================================================= */

.memory-page-ellipsis {

    min-width:
        24px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-muted);

    font-size:
        13px;

    user-select:
        none;

}


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

@media (max-width: 700px) {

    .memory-pagination {

        gap:
            6px;

        margin-top:
            25px;

        padding:
            0 2px;

    }


    .memory-page-button {

        min-width:
            40px;

        height:
            40px;

        padding:
            0 8px;

        border-radius:
            10px;

    }


    .memory-page-ellipsis {

        min-width:
            18px;

        height:
            40px;

        font-size:
            12px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .memory-pagination {

        gap:
            4px;

    }


    .memory-page-button {

        min-width:
            36px;

        height:
            36px;

        padding:
            0 7px;

        border-radius:
            9px;

        font-size:
            11px;

    }


    .memory-page-ellipsis {

        min-width:
            14px;

        height:
            36px;

        font-size:
            11px;
    }
}


/* =========================================================
   24. MODAL
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 3000;

    transition:
        opacity var(--transition),
        visibility var(--transition);

}


.modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.78);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.modal-content {

    position: relative;

    z-index: 2;

    width: min(
        520px,
        100%
    );

    padding:
        38px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-large);

    background:
        #141418;

    box-shadow:
        var(--shadow-large);

    transform:
        translateY(25px)
        scale(0.97);

    transition:
        transform var(--transition);

}


.modal.active
.modal-content {

    transform:
        translateY(0)
        scale(1);

}


.modal-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        var(--text-secondary);

    font-size: 22px;

    transition:
        var(--transition-fast);

}


.modal-close:hover {

    color: white;

    background:
        rgba(255, 255, 255, 0.10);

}


.modal-header {

    margin-bottom:
        30px;

}


.modal-header h2 {

    margin-bottom:
        10px;

    font-size:
        32px;

    font-weight: 400;

}


.modal-header p:last-child {

    color:
        var(--text-secondary);

}


/* =========================================================
   25. FORM
========================================================= */

.modal-form {

    display: flex;

    flex-direction: column;

    gap: 22px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.form-group label {

    color:
        var(--text-primary);

    font-size: 12px;

    font-weight: 600;

}


.form-group label span {

    color:
        var(--text-muted);

    font-weight: 400;

}


.form-group input,
.form-group textarea {

    width: 100%;

    padding:
        13px 15px;

    border:
        1px solid var(--border);

    outline: none;

    border-radius:
        var(--radius-small);

    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--text-primary);

    resize: vertical;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);

}


.form-group input:focus,
.form-group textarea:focus {

    border-color:
        rgba(216, 181, 106, 0.65);

    background:
        rgba(216, 181, 106, 0.035);

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        var(--text-muted);

}


/* =========================================================
   26. MODAL ACTIONS
========================================================= */

.modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding-top:
        5px;

}


.button-secondary,
.button-primary {

    min-height: 42px;

    padding:
        0 18px;

    border-radius:
        999px;

    font-size: 12px;

    font-weight: 600;

}


.button-secondary {

    border:
        1px solid var(--border);

    background:
        transparent;

    color:
        var(--text-secondary);

}


.button-secondary:hover {

    color:
        var(--text-primary);

    border-color:
        var(--border-strong);

}


.button-primary {

    background:
        var(--accent);

    color:
        #111;

}


.button-primary:hover {

    background:
        var(--accent-light);

}

/* =========================================================
   SETTINGS MODAL
========================================================= */

.settings-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 5000;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


.settings-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.settings-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.70);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.settings-modal-card {

    position: relative;

    z-index: 2;

    width:
        min(
            520px,
            100%
        );

    padding:
        30px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-large);

    background:
        var(--bg-secondary);

    box-shadow:
        var(--shadow-large);

    transform:
        translateY(18px)
        scale(0.98);

    transition:
        transform var(--transition);
}


.settings-modal.active
.settings-modal-card {

    transform:
        translateY(0)
        scale(1);
}


/* -----------------------------------------
   HEADER
----------------------------------------- */

.settings-modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        24px;
}


.settings-modal-header h2 {

    margin: 0;

    color:
        var(--text-primary);

    font-size:
        26px;

    font-weight:
        600;
}


/* -----------------------------------------
   DESCRIPTION
----------------------------------------- */

.settings-description {

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.7;
}

/* -----------------------------------------
   SETTINGS OPTIONS
----------------------------------------- */

.settings-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding:
        16px 17px;
    border:
        1px solid var(--border);
    border-radius:
        var(--radius-medium);
    background:
        rgba(255, 255, 255, 0.025);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}


.settings-option:hover {
    background:
        rgba(255, 255, 255, 0.045);
    border-color:
        var(--border-strong);
}


.settings-option-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.settings-option-text strong {
    color:
        var(--text-primary);
    font-size:
        13px;
    font-weight:
        600;
}


.settings-option-text span {
    color:
        var(--text-muted);
    font-size:
        11px;
    line-height:
        1.6;
}


/* -----------------------------------------
   SWITCH
----------------------------------------- */

.settings-switch {
    position: relative;
    flex-shrink: 0;
    width:
        46px;
    height:
        26px;
    display:
        block;
    cursor:
        pointer;
}


.settings-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}


.settings-switch-track {
    position: absolute;
    inset: 0;
    border:
        1px solid var(--border-strong);
    border-radius:
        999px;
    background:
        rgba(255, 255, 255, 0.08);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}


.settings-switch-track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius:
        50%;
    background:
        var(--text-secondary);
    transition:
        transform var(--transition),
        background var(--transition);
}


.settings-switch input:checked
+ .settings-switch-track {
    background:
        rgba(216, 181, 106, 0.18);
    border-color:
        rgba(216, 181, 106, 0.55);
}

.settings-switch input:checked
+ .settings-switch-track::before {
    transform:
        translateX(20px);
    background:
        var(--accent-light);
}


/* -----------------------------------------
   KEYBOARD FOCUS
----------------------------------------- */

.settings-switch input:focus-visible
+ .settings-switch-track {
    outline:
        2px solid
        rgba(216, 181, 106, 0.55);
    outline-offset:
        3px;
}


@media (max-width: 600px) {

    .settings-option {
        align-items:
            flex-start;

        padding:
            14px;
    }
}

/* -----------------------------------------
   FOOTER
----------------------------------------- */

.settings-footer {

    display: flex;

    justify-content:
        flex-end;

    margin-top:
        28px;
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 600px) {

    .settings-modal {

        padding:
            14px;

    }


    .settings-modal-card {

        padding:
            22px;

    }


    .settings-modal-header h2 {

        font-size:
            22px;

    }

}


/* =========================================================
   27. PHOTO VIEWER
========================================================= */

.photo-viewer {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px;

    background:
        rgba(0, 0, 0, 0.92);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 4000;

    transition:
        opacity var(--transition),
        visibility var(--transition);

}


.photo-viewer.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.photo-viewer img {

    max-width:
        min(
            90vw,
            1300px
        );

    max-height:
        78vh;

    object-fit: contain;

    border-radius:
        var(--radius-small);

    box-shadow:
        var(--shadow-large);

}


.photo-viewer-close {

    position: absolute;

    top: 25px;
    right: 30px;

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color:
        white;

    font-size: 27px;

}


.photo-viewer-controls {

    position: absolute;

    left: 50%;
    bottom: 28px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

}


.viewer-prev,
.viewer-next,
.viewer-download {

    min-width: 44px;
    height: 44px;

    padding:
        0 14px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--border-strong);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.07);

    color:
        white;

}


.viewer-download {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;

}


.viewer-prev:hover,
.viewer-next:hover,
.viewer-download:hover {

    border-color:
        rgba(216, 181, 106, 0.55);

    color:
        var(--accent-light);

}


/* =========================================================
   28. MOBILE NAVIGATION
========================================================= */

.mobile-navigation {

    display: none;

}


/* =========================================================
   29. SIDEBAR COLLAPSED STATE
========================================================= */

.desktop-sidebar.collapsed {

    width:
        var(--sidebar-collapsed-width);

}


.main-content.sidebar-collapsed {

    margin-left:
        var(--sidebar-collapsed-width);

}


.header.sidebar-collapsed {

    padding-left:
        calc(
            var(--sidebar-collapsed-width)
            + 32px
        );

}


.desktop-sidebar.collapsed
.sidebar-brand {

    justify-content: center;

    padding: 0;

}


.desktop-sidebar.collapsed
.sidebar-title {

    width: 0;

    opacity: 0;

}


.desktop-sidebar.collapsed
.nav-item {

    justify-content: center;

    padding:
        0 10px;

}


.desktop-sidebar.collapsed
.nav-text {

    width: 0;

    opacity: 0;

}


.desktop-sidebar.collapsed
.settings-button {

    justify-content: center;

    padding:
        0 10px;

}


.desktop-sidebar.collapsed
.sidebar-toggle {

    transform:
        rotate(180deg);

}


/* =========================================================
   30. TABLET
========================================================= */

@media (max-width: 1024px) {

    :root {

        --header-height: 68px;

    }


    .desktop-sidebar {

        display: none;

    }


    .header {

        padding:
            0 22px;

    }


    .main-content {

        margin-left: 0;

        padding-bottom:
            90px;

    }


    .page-section {

        padding:
            40px 28px 70px;

    }


    .mobile-navigation {

        position: fixed;

        left: 16px;
        right: 16px;
        bottom: 16px;

        height: 68px;

        display: flex;

        align-items: center;

        justify-content: space-around;

        padding:
            6px;

        border:
            1px solid var(--border-strong);

        border-radius:
            22px;

        background:
            rgba(18, 18, 21, 0.92);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        box-shadow:
            var(--shadow-large);

        z-index: 2000;

    }


    .mobile-nav-item {

        position: relative;

        flex: 1;

        height: 56px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 2px;

        color:
            var(--text-muted);

        border-radius:
            17px;

        transition:
            var(--transition);

    }


    .mobile-nav-icon {

        font-size: 20px;

        line-height: 1;

    }


    .mobile-nav-text {

        font-size: 9px;

        letter-spacing:
            0.04em;

    }


    .mobile-nav-item.active {

        color:
            var(--accent-light);

        transform:
            translateY(-8px);

    }


    .mobile-nav-item.active::before {

        content: "";

        position: absolute;

        width: 46px;
        height: 46px;

        top: -2px;

        border:
            1px solid
            rgba(216, 181, 106, 0.35);

        border-radius: 50%;

        background:
            rgba(216, 181, 106, 0.07);

        z-index: -1;

    }


    .hero {

        min-height:
            600px;

        padding:
            50px;

    }


    .memory-gallery {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }

}


/* =========================================================
   31. MOBILE
========================================================= */

@media (max-width: 700px) {

    :root {

        --header-height: 64px;

    }


    body {

        font-size: 14px;

    }


    .header {

        padding:
            0 16px;

    }


    .brand-name {

        font-size: 10px;

        letter-spacing:
            0.16em;

    }


    .brand-icon {

        width: 31px;
        height: 31px;

    }


    .search-container.search-open
    .search-bar {

        width:
            calc(
                100vw - 32px
            );

        position: fixed;

        top: 32px;

        right: 16px;

    }


    .page-section {

        padding:
            25px 16px 100px;

    }


    .hero {

        min-height:
            560px;

        padding:
            32px 25px;

        border-radius:
            20px;

    }


    .hero-title {

        font-size:
            clamp(
                48px,
                17vw,
                78px
            );

    }


    .hero-description {

        font-size: 14px;

    }


    .hero-button {

        font-size: 9px;

    }


    .class-information {

        grid-template-columns:
            1fr;

    }


    .info-item {

        min-height: 90px;

        border-right: 0;

        border-bottom:
            1px solid var(--border);

    }


    .info-item:last-child {

        border-bottom: 0;

    }


    .intro-section {

        padding:
            90px 0 70px;

    }


    .section-title {

        font-size:
            39px;

    }


    .section-description {

        font-size: 14px;

        line-height: 1.8;

    }


    .memory-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .album-filter {

        width: 100%;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;

        scrollbar-width: none;

    }


    .album-filter::-webkit-scrollbar {

        display: none;

    }


    .filter-button,
    .create-album-button {

        flex-shrink: 0;

    }


    .add-memory-button {

        width: 100%;

        justify-content:
            center;

    }


    .memory-gallery {

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

        gap: 9px;

    }


    .memory-card {

        border-radius:
            12px;

    }


    .modal-content {

        padding:
            30px 22px;

    }


    .modal-header h2 {

        font-size:
            27px;

    }


    .photo-viewer {

        padding:
            20px;

    }


    .photo-viewer img {

        max-width:
            96vw;

        max-height:
            72vh;

    }


    .photo-viewer-close {

        top: 15px;
        right: 15px;

    }


    .photo-viewer-controls {

        bottom: 20px;

    }

}


/* =========================================================
   32. SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .brand-name {

        display: none;

    }


    .hero {

        min-height:
            520px;

    }


    .mobile-navigation {

        left: 10px;
        right: 10px;
        bottom: 10px;

    }


    .page-section {

        padding-left:
            12px;

        padding-right:
            12px;

    }

}


/* =========================================================
   33. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}

/* =========================================================
   USER REDUCED MOTION
========================================================= */

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {

    animation-duration:
        0.001ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        0.001ms !important;

    scroll-behavior:
        auto !important;

}


/* =========================================================
   CLASS MEMORY
   Main stylesheet
   Version 1.0
========================================================= */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    /* Colors */

    --bg-main: #0b0b0d;
    --bg-secondary: #111114;
    --bg-card: #151519;
    --bg-soft: #1b1b20;

    --text-primary: #f5f5f5;
    --text-secondary: #a7a7ad;
    --text-muted: #6f6f77;

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --accent: #d8b56a;
    --accent-light: #f1d58e;
    --accent-dark: #a98238;

    --danger: #ef6b6b;

    /* Layout */

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 82px;

    --header-height: 76px;

    --content-max-width: 1400px;

    /* Radius */

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;

    /* Shadow */

    --shadow-soft:
        0 10px 40px rgba(0, 0, 0, 0.20);

    --shadow-large:
        0 25px 80px rgba(0, 0, 0, 0.45);

    /* Transition */

    --transition-fast: 0.2s ease;

    --transition:
        0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================================================
   02. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(216, 181, 106, 0.055),
            transparent 30%
        ),
        var(--bg-main);

    color: var(--text-primary);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

}


button,
input,
textarea {
    font: inherit;
}


button {
    border: 0;
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   03. WEBSITE
========================================================= */

.website {
    min-height: 100vh;
}


/* =========================================================
   04. HEADER
========================================================= */

.header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 32px
        0 calc(var(--sidebar-width) + 32px);

    background:
        rgba(11, 11, 13, 0.78);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid var(--border);

    z-index: 1000;

}


/* =========================================================
   05. BRAND
========================================================= */

.brand {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    white-space: nowrap;

}


.brand-icon {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(216, 181, 106, 0.4);

    border-radius: 50%;

    color: var(--accent);

    font-size: 15px;

}


.brand-name {

    color: var(--text-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.22em;

}


/* =========================================================
   06. SEARCH
========================================================= */

.search-container {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}


/* Search closed */

.search-button {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--border);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.035);

    color: var(--text-secondary);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition);

}


.search-button:hover {

    color: var(--accent);

    border-color:
        rgba(216, 181, 106, 0.4);

    background:
        rgba(216, 181, 106, 0.07);

    transform: translateY(-2px);

}


/* Search opened */

.search-bar {

    position: absolute;

    top: 50%;

    right: 0;

    width: 0;

    height: 46px;

    display: flex;

    align-items: center;

    gap: 10px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-50%)
        scaleX(0.85);

    transform-origin: right center;

    background:
        rgba(24, 24, 28, 0.96);

    border:
        1px solid var(--border-strong);

    border-radius: 999px;

    box-shadow:
        var(--shadow-soft);

    transition:
        width var(--transition),
        opacity var(--transition),
        transform var(--transition);

}


.search-container.search-open
.search-button {

    opacity: 0;

    pointer-events: none;

}


.search-container.search-open
.search-bar {

    width: min(
        380px,
        55vw
    );

    padding:
        0 8px
        0 17px;

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(-50%)
        scaleX(1);

}


.search-icon {

    flex-shrink: 0;

    color: var(--accent);

}


.search-bar input {

    min-width: 0;

    flex: 1;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text-primary);

}


.search-bar input::placeholder {

    color:
        var(--text-muted);

}


.search-close {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

    color:
        var(--text-secondary);

    transition:
        var(--transition-fast);

}


.search-close:hover {

    color: white;

    background:
        rgba(255, 255, 255, 0.12);

}


/* =========================================================
   07. DESKTOP SIDEBAR
========================================================= */

.desktop-sidebar {

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sidebar-width);

    display: flex;

    flex-direction: column;

    padding: 24px 16px;

    background:
        rgba(14, 14, 17, 0.96);

    border-right:
        1px solid var(--border);

    z-index: 1100;

    transition:
        width var(--transition);

}


/* =========================================================
   08. SIDEBAR TOGGLE
========================================================= */

.sidebar-toggle {

    position: absolute;

    top: 22px;
    right: -17px;

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--border-strong);

    border-radius: 50%;

    background:
        var(--bg-secondary);

    color:
        var(--text-secondary);

    box-shadow:
        var(--shadow-soft);

    z-index: 5;

    transition:
        transform var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.sidebar-toggle:hover {

    color: var(--accent);

    border-color:
        rgba(216, 181, 106, 0.5);

}


/* =========================================================
   09. SIDEBAR BRAND
========================================================= */

.sidebar-brand {

    height: 52px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        0 12px;

    margin-bottom: 40px;

    overflow: hidden;

}


.sidebar-logo {

    min-width: 38px;
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    border:
        1px solid
        rgba(216, 181, 106, 0.35);

    color:
        var(--accent);

}


.sidebar-title {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.17em;

    white-space: nowrap;

}


/* =========================================================
   10. DESKTOP NAVIGATION
========================================================= */

.desktop-menu {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.nav-item {

    position: relative;

    height: 52px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        0 14px;

    border-radius:
        var(--radius-small);

    color:
        var(--text-secondary);

    overflow: hidden;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

}


.nav-item:hover {

    color:
        var(--text-primary);

    background:
        rgba(255, 255, 255, 0.045);

}


.nav-item.active {

    color:
        var(--accent-light);

    background:
        linear-gradient(
            90deg,
            rgba(216, 181, 106, 0.12),
            rgba(216, 181, 106, 0.035)
        );

}


.nav-item.active::before {

    content: "";

    position: absolute;

    left: 0;
    top: 10px;
    bottom: 10px;

    width: 3px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--accent);

}


.nav-icon {

    width: 25px;

    flex-shrink: 0;

    text-align: center;

    font-size: 20px;

}


.nav-text {

    white-space: nowrap;

    font-size: 14px;

}


/* =========================================================
   11. SIDEBAR FOOTER
========================================================= */

.sidebar-footer {

    margin-top: auto;

}


.settings-button {

    width: 100%;

    height: 48px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        0 14px;

    border-radius:
        var(--radius-small);

    background:
        transparent;

    color:
        var(--text-muted);

    text-align: left;

    transition:
        var(--transition-fast);

}


.settings-button:hover {

    color:
        var(--text-primary);

    background:
        rgba(255, 255, 255, 0.045);

}


/* =========================================================
   12. MAIN CONTENT
========================================================= */

.main-content {

    min-height: 100vh;

    margin-left:
        var(--sidebar-width);

    padding-top:
        var(--header-height);

    transition:
        margin-left var(--transition);

}


/* =========================================================
   13. PAGE SECTIONS
========================================================= */

.page-section {

    display: none;

    width: 100%;

    max-width:
        var(--content-max-width);

    margin:
        0 auto;

    padding:
        56px 48px 100px;

}


.page-section.active-section {

    display: block;

}


/* =========================================================
   14. HERO
========================================================= */

.hero {

    position: relative;

    min-height:
        min(
            680px,
            calc(100vh - 130px)
        );

    display: flex;

    align-items: flex-end;

    padding:
        70px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    background:

        radial-gradient(
            circle at 70% 25%,
            rgba(216, 181, 106, 0.20),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #151518,
            #0c0c0e 70%
        );

    box-shadow:
        var(--shadow-large);

}


/*
    Sau này bạn có thể thay background
    bằng ảnh lớp thật:

    background:
        linear-gradient(...),
        url("assets/images/class.jpg")
        center / cover;
*/


.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            135deg,
            transparent 40%,
            rgba(216, 181, 106, 0.08)
        );

    pointer-events: none;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0.08)
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

}


.hero-small-title {

    margin-bottom: 16px;

    color:
        var(--accent);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.28em;

}


.hero-title {

    margin-bottom: 22px;

    font-size:
        clamp(
            60px,
            9vw,
            128px
        );

    font-weight: 300;

    line-height: 0.88;

    letter-spacing:
        -0.06em;

}


.hero-title span {

    display: block;

    color:
        var(--accent-light);

    font-weight: 600;

}


.hero-description {

    max-width: 520px;

    margin-bottom: 30px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 16px;

}


.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        14px 20px;

    border:
        1px solid
        rgba(216, 181, 106, 0.45);

    border-radius:
        999px;

    background:
        rgba(216, 181, 106, 0.09);

    color:
        var(--accent-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        0.12em;

    transition:
        var(--transition);

}


.hero-button:hover {

    background:
        rgba(216, 181, 106, 0.16);

    border-color:
        rgba(216, 181, 106, 0.75);

    transform:
        translateY(-3px);

}


/* =========================================================
   15. CLASS INFORMATION
========================================================= */

.class-information {

    display: grid;

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

    margin-top: 24px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.025);

}


.info-item {

    min-height: 125px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        25px 30px;

    border-right:
        1px solid var(--border);

}


.info-item:last-child {

    border-right: 0;

}


.info-label {

    margin-bottom: 7px;

    color:
        var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.2em;

}


.info-value {

    color:
        var(--text-primary);

    font-size: 20px;

    font-weight: 500;

}


/* =========================================================
   16. INTRODUCTION
========================================================= */

.intro-section {

    padding:
        130px 0 100px;

}


.intro-content {

    max-width:
        850px;

}


.section-label {

    margin-bottom: 15px;

    color:
        var(--accent);

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;

}


.section-title {

    margin-bottom: 24px;

    color:
        var(--text-primary);

    font-size:
        clamp(
            36px,
            5vw,
            68px
        );

    font-weight: 300;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;

}


.section-title span {

    display: block;

    color:
        var(--accent-light);

}


.section-description {

    max-width:
        650px;

    color:
        var(--text-secondary);

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
   17. SECTION HEADER
========================================================= */

.section-header {

    max-width:
        800px;

    margin-bottom:
        55px;

}


.section-header .section-title {

    margin-bottom:
        18px;

}


/* =========================================================
   18. SUBSECTION TITLE
========================================================= */

.subsection-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom:
        28px;
    flex-wrap: wrap;
}


.subsection-title span {

    color:
        var(--accent);

    font-size: 18px;

}


.subsection-title h3 {
    font-size: 22px;

    font-weight: 500;
}

.subsection-title
.add-message-button {

    margin-left:
        auto;

    flex-shrink:
        0;
}

/* =========================================================
   19. MESSAGE AREA
========================================================= */

.message-area {

    margin-bottom:
        100px;

}


.message-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                280px,
                1fr
            )
        );

    gap: 18px;

}


/* =========================================================
   20. EMPTY STATES
========================================================= */

.empty-message,
.empty-memory {

    padding:
        70px 25px;

    text-align: center;

    border:
        1px dashed
        var(--border-strong);

    border-radius:
        var(--radius-medium);

    background:
        rgba(255, 255, 255, 0.018);

}


.empty-message-icon,
.empty-wishes-icon,
.empty-icon {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    margin:
        0 auto 20px;

    border:
        1px solid
        rgba(216, 181, 106, 0.3);

    border-radius: 50%;

    color:
        var(--accent);

    font-size: 24px;

}


.empty-message h3,
.empty-memory h3 {

    margin-bottom:
        8px;

    font-size: 19px;

    font-weight: 500;

}


.empty-message p,
.empty-memory p {

    max-width:
        440px;

    margin:
        0 auto 25px;

    color:
        var(--text-muted);

}


.add-message-button,
.empty-add-button {

    padding:
        12px 19px;

    border:
        1px solid
        rgba(216, 181, 106, 0.35);

    border-radius:
        999px;

    background:
        rgba(216, 181, 106, 0.07);

    color:
        var(--accent-light);

    font-size: 12px;

    transition:
        var(--transition-fast);

}


.add-message-button:hover,
.empty-add-button:hover {

    background:
        rgba(216, 181, 106, 0.14);

    border-color:
        rgba(216, 181, 106, 0.6);

}


/* =========================================================
   21. MEMORY TOOLBAR
========================================================= */

.memory-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        28px;

}


.album-filter {

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;

}


.filter-button,
.create-album-button {

    min-height: 38px;

    padding:
        0 15px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--text-secondary);

    font-size: 12px;

    transition:
        var(--transition-fast);

}


.filter-button:hover {

    color:
        var(--text-primary);

    border-color:
        var(--border-strong);

}


.filter-button.active {

    color:
        #111;

    background:
        var(--accent);

    border-color:
        var(--accent);

}


.create-album-button {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        var(--accent-light);

    border-color:
        rgba(216, 181, 106, 0.3);

}


.create-album-button:hover {

    background:
        rgba(216, 181, 106, 0.08);

    border-color:
        rgba(216, 181, 106, 0.6);

}


.add-memory-button {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(216, 181, 106, 0.45);

    border-radius:
        999px;

    background:
        var(--accent);

    color:
        #111;

    font-size: 12px;

    font-weight: 700;

    transition:
        var(--transition);

}


.add-memory-button:hover {

    background:
        var(--accent-light);

    transform:
        translateY(-2px);

}


/* =========================================================
   22. MEMORY GALLERY
========================================================= */

.memory-gallery {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 14px;

}


.memory-card {

    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius:
        var(--radius-medium);

    background:
        var(--bg-card);

    cursor: pointer;

}


.memory-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.memory-card:hover img {

    transform:
        scale(1.06);

}


.memory-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.45),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity var(--transition);

}


.memory-card:hover::after {

    opacity: 1;

}

/* =========================================================
   MEMORY DELETE BUTTON
========================================================= */

.memory-delete-button {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    background:
        rgba(10, 10, 12, 0.72);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 20px;

    line-height: 1;

    opacity: 0;

    transform:
        scale(0.9);

    z-index: 5;

    pointer-events:
        auto;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}


/* -----------------------------------------
   HIỆN KHI HOVER ẢNH
----------------------------------------- */

.memory-card:hover
.memory-delete-button {

    opacity: 1;

    transform:
        scale(1);

}


/* -----------------------------------------
   HOVER NÚT XÓA
----------------------------------------- */

.memory-delete-button:hover {

    background:
        rgba(239, 107, 107, 0.18);

    border-color:
        rgba(239, 107, 107, 0.55);

    color:
        #ff9b9b;

    transform:
        scale(1.08);

}


/* -----------------------------------------
   ACTIVE / CLICK
----------------------------------------- */

.memory-delete-button:active {

    transform:
        scale(0.94);

}


/* -----------------------------------------
   MOBILE / TABLET
----------------------------------------- */

@media (max-width: 1024px) {

    .memory-delete-button {

        opacity: 1;

        transform:
            scale(1);

    }

}


/* -----------------------------------------
   SMALL SCREEN
----------------------------------------- */

@media (max-width: 700px) {

    .memory-delete-button {

        top: 7px;
        right: 7px;

        width: 32px;
        height: 32px;

        font-size: 18px;

    }

}

/* =========================================================
   ALBUM MANAGEMENT
========================================================= */

.album-generated-button {

    display: inline-flex;

    align-items: stretch;

    gap: 3px;

    flex-shrink: 0;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.025);

    overflow: hidden;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.album-generated-button:hover {

    border-color:
        var(--border-strong);

}

/* -----------------------------------------
   ALBUM SELECT
----------------------------------------- */

.album-generated-button
.album-select-button {

    min-height: 38px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        0 10px 0 15px;

    border: 0;

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--text-secondary);
}

.album-generated-button
.album-select-button:hover {

    color:
        var(--text-primary);

    background:
        rgba(255, 255, 255, 0.04);

}

.album-generated-button
.album-select-button.active {

    color:
        #111;

    background:
        var(--accent);
}

/* -----------------------------------------
   PHOTO COUNT
----------------------------------------- */

.album-generated-button
.album-photo-count {

    color:
        var(--text-muted);

    font-size:
        10px;

    white-space:
        nowrap;
}


.album-generated-button
.album-select-button.active
.album-photo-count {

    color:
        rgba(17, 17, 17, 0.65);
}


/* -----------------------------------------
   MANAGEMENT BUTTON
----------------------------------------- */

.album-manage-button {

    width:
        34px;

    min-height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-left:
        1px solid
        var(--border);

    background:
        transparent;

    color:
        var(--text-muted);

    font-size:
        18px;

    line-height:
        1;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.album-manage-button:hover {

    background:
        rgba(216, 181, 106, 0.10);

    color:
        var(--accent-light);
}

.album-manage-button:active {

    background:
        rgba(216, 181, 106, 0.16);

}

/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .album-generated-button
    .album-select-button {

        padding:
            0 9px 0 13px;

    }


    .album-manage-button {

        width:
            32px;

    }

}

/* =========================================================
   23. PAGINATION
========================================================= */

.memory-pagination {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top:
        35px;

}


/* =========================================================
   24. MODAL
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 3000;

    transition:
        opacity var(--transition),
        visibility var(--transition);

}


.modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.78);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.modal-content {

    position: relative;

    z-index: 2;

    width: min(
        520px,
        100%
    );

    padding:
        38px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-large);

    background:
        #141418;

    box-shadow:
        var(--shadow-large);

    transform:
        translateY(25px)
        scale(0.97);

    transition:
        transform var(--transition);

}


.modal.active
.modal-content {

    transform:
        translateY(0)
        scale(1);

}


.modal-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        var(--text-secondary);

    font-size: 22px;

    transition:
        var(--transition-fast);

}


.modal-close:hover {

    color: white;

    background:
        rgba(255, 255, 255, 0.10);

}


.modal-header {

    margin-bottom:
        30px;

}


.modal-header h2 {

    margin-bottom:
        10px;

    font-size:
        32px;

    font-weight: 400;

}


.modal-header p:last-child {

    color:
        var(--text-secondary);

}


/* =========================================================
   25. FORM
========================================================= */

.modal-form {

    display: flex;

    flex-direction: column;

    gap: 22px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.form-group label {

    color:
        var(--text-primary);

    font-size: 12px;

    font-weight: 600;

}


.form-group label span {

    color:
        var(--text-muted);

    font-weight: 400;

}


.form-group input,
.form-group textarea {

    width: 100%;

    padding:
        13px 15px;

    border:
        1px solid var(--border);

    outline: none;

    border-radius:
        var(--radius-small);

    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--text-primary);

    resize: vertical;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);

}


.form-group input:focus,
.form-group textarea:focus {

    border-color:
        rgba(216, 181, 106, 0.65);

    background:
        rgba(216, 181, 106, 0.035);

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        var(--text-muted);

}


/* =========================================================
   26. MODAL ACTIONS
========================================================= */

.modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding-top:
        5px;

}


.button-secondary,
.button-primary {

    min-height: 42px;

    padding:
        0 18px;

    border-radius:
        999px;

    font-size: 12px;

    font-weight: 600;

}


.button-secondary {

    border:
        1px solid var(--border);

    background:
        transparent;

    color:
        var(--text-secondary);

}


.button-secondary:hover {

    color:
        var(--text-primary);

    border-color:
        var(--border-strong);

}


.button-primary {

    background:
        var(--accent);

    color:
        #111;

}


.button-primary:hover {

    background:
        var(--accent-light);

}

/* =========================================================
   TOAST NOTIFICATION
========================================================= */

.toast-container {

    position: fixed;

    top: 92px;

    right: 24px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;

    width:
        min(
            360px,
            calc(100vw - 32px)
        );

    z-index: 7000;

    pointer-events: none;

}


.toast {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        13px 14px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-medium);

    background:
        rgba(20, 20, 24, 0.94);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        var(--shadow-large);

    color:
        var(--text-primary);

    opacity: 0;

    transform:
        translateX(25px)
        scale(0.96);

    pointer-events:
        auto;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;

}


.toast.show {

    opacity: 1;

    transform:
        translateX(0)
        scale(1);

}


/* -----------------------------------------
   ICON
----------------------------------------- */

.toast-icon {

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(216, 181, 106, 0.35);

    border-radius:
        50%;

    background:
        rgba(216, 181, 106, 0.08);

    color:
        var(--accent-light);

    font-size:
        13px;

    font-weight:
        700;

}


/* -----------------------------------------
   MESSAGE
----------------------------------------- */

.toast-message {

    flex: 1;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height:
        1.5;

}


/* -----------------------------------------
   CLOSE
----------------------------------------- */

.toast-close {

    width:
        26px;

    height:
        26px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--text-muted);

    font-size:
        18px;

    transition:
        var(--transition-fast);

}


.toast-close:hover {

    background:
        rgba(255, 255, 255, 0.07);

    color:
        var(--text-primary);

}


/* -----------------------------------------
   ERROR
----------------------------------------- */

.toast-error {

    border-color:
        rgba(239, 107, 107, 0.35);

}


.toast-error .toast-icon {

    border-color:
        rgba(239, 107, 107, 0.40);

    background:
        rgba(239, 107, 107, 0.08);

    color:
        #ff9b9b;

}


/* -----------------------------------------
   WARNING
----------------------------------------- */

.toast-warning {

    border-color:
        rgba(216, 181, 106, 0.35);

}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .toast-container {

        top:
            76px;

        right:
            16px;

        left:
            16px;

        width:
            auto;

        align-items:
            stretch;

    }


    .toast {

        transform:
            translateY(-10px)
            scale(0.98);

    }


    .toast.show {

        transform:
            translateY(0)
            scale(1);

    }

}

/* =========================================================
   CONFIRM MODAL
========================================================= */

.confirm-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 8000;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


.confirm-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.confirm-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.74);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.confirm-modal-card {

    position: relative;

    z-index: 2;

    width:
        min(
            480px,
            100%
        );

    padding:
        30px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-large);

    background:
        var(--bg-secondary);

    box-shadow:
        var(--shadow-large);

    transform:
        translateY(18px)
        scale(0.97);

    transition:
        transform var(--transition);
}


.confirm-modal.active
.confirm-modal-card {

    transform:
        translateY(0)
        scale(1);

}


/* -----------------------------------------
   HEADER
----------------------------------------- */

.confirm-modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        20px;

}


.confirm-modal-header h2 {

    margin: 0;

    color:
        var(--text-primary);

    font-size:
        24px;

    font-weight:
        600;

}


/* -----------------------------------------
   BODY
----------------------------------------- */

.confirm-modal-body p {

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.75;

}


/* -----------------------------------------
   ACTIONS
----------------------------------------- */

.confirm-modal-actions {

    display: flex;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        28px;
}

.confirm-modal-actions
.secondary-button {

    min-height:
        42px;

    padding:
        0 18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        transparent;

    color:
        var(--text-secondary);

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        var(--transition-fast);

}


.confirm-modal-actions
.secondary-button:hover {

    color:
        var(--text-primary);

    border-color:
        var(--border-strong);

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

}


.danger-button {

    min-height:
        42px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(239, 107, 107, 0.38);

    border-radius:
        var(--radius-small);

    background:
        rgba(239, 107, 107, 0.10);

    color:
        #ff9b9b;

    font-size:
        12px;

    font-weight:
        600;

    transition:
        var(--transition-fast);

}


.danger-button:hover {

    background:
        rgba(239, 107, 107, 0.18);

    border-color:
        rgba(239, 107, 107, 0.60);

}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 600px) {

    .confirm-modal {

        padding:
            14px;

    }


    .confirm-modal-card {

        padding:
            22px;

    }


    .confirm-modal-actions {

        flex-direction:
            column-reverse;

        align-items:
            stretch;

    }


    .confirm-modal-actions
    .secondary-button,
    .confirm-modal-actions
    .danger-button {

        width:
            100%;

    }

}

/* =========================================================
   PROMPT MODAL
========================================================= */

.prompt-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 8100;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


.prompt-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.prompt-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.74);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.prompt-modal-card {

    position: relative;

    z-index: 2;

    width:
        min(
            500px,
            100%
        );

    padding:
        30px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-large);

    background:
        var(--bg-secondary);

    box-shadow:
        var(--shadow-large);

    transform:
        translateY(18px)
        scale(0.97);

    transition:
        transform var(--transition);
}


.prompt-modal.active
.prompt-modal-card {

    transform:
        translateY(0)
        scale(1);
}


/* -----------------------------------------
   HEADER
----------------------------------------- */

.prompt-modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        24px;
}


.prompt-modal-header h2 {

    margin: 0;

    color:
        var(--text-primary);

    font-size:
        24px;

    font-weight:
        600;
}


/* -----------------------------------------
   BODY
----------------------------------------- */

.prompt-modal-body {

    display: flex;

    flex-direction: column;

    gap:
        9px;
}


.prompt-modal-body label {

    color:
        var(--text-secondary);

    font-size:
        11px;

    font-weight:
        600;
}


.prompt-modal-body input {

    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    outline:
        none;

    background:
        var(--bg-card);

    color:
        var(--text-primary);

    font-family:
        inherit;

    font-size:
        13px;

    transition:
        var(--transition-fast);
}


.prompt-modal-body input:focus {

    border-color:
        rgba(216, 181, 106, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(216, 181, 106, 0.07);
}


/* -----------------------------------------
   ACTIONS
----------------------------------------- */

.prompt-modal-actions {

    display: flex;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        28px;
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 600px) {

    .prompt-modal {

        padding:
            14px;

    }


    .prompt-modal-card {

        padding:
            22px;

    }


    .prompt-modal-actions {

        flex-direction:
            column-reverse;

        align-items:
            stretch;

    }


    .prompt-modal-actions
    .secondary-button,
    .prompt-modal-actions
    .button-primary {

        width:
            100%;

    }

}

/* =========================================================
   ALBUM ACTION MODAL
========================================================= */

.album-action-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 8050;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


.album-action-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* -----------------------------------------
   BACKDROP
----------------------------------------- */

.album-action-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.72);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* -----------------------------------------
   CARD
----------------------------------------- */

.album-action-modal-card {

    position: relative;

    z-index: 2;

    width:
        min(
            500px,
            100%
        );

    padding:
        30px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-large);

    background:
        var(--bg-secondary);

    box-shadow:
        var(--shadow-large);

    transform:
        translateY(20px)
        scale(0.97);

    transition:
        transform var(--transition);
}


.album-action-modal.active
.album-action-modal-card {

    transform:
        translateY(0)
        scale(1);
}


/* -----------------------------------------
   HEADER
----------------------------------------- */

.album-action-modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        18px;
}


.album-action-modal-header h2 {

    margin: 0;

    color:
        var(--text-primary);

    font-size:
        25px;

    font-weight:
        600;
}


/* -----------------------------------------
   ALBUM NAME
----------------------------------------- */

.album-action-modal-name {

    margin:
        0 0 22px;

    padding:
        11px 14px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--accent-light);

    font-size:
        13px;

    font-weight:
        500;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


/* -----------------------------------------
   ACTION LIST
----------------------------------------- */

.album-action-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


/* -----------------------------------------
   ACTION ITEM
----------------------------------------- */

.album-action-item {

    width:
        100%;

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        12px 14px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--text-primary);

    text-align:
        left;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.album-action-item:hover {

    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        var(--border-strong);

    transform:
        translateY(-1px);
}


/* -----------------------------------------
   ICON
----------------------------------------- */

.album-action-icon {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(216, 181, 106, 0.30);

    border-radius:
        12px;

    background:
        rgba(216, 181, 106, 0.06);

    color:
        var(--accent-light);

    font-size:
        17px;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}


/* -----------------------------------------
   TEXT
----------------------------------------- */

.album-action-content {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.album-action-content strong {

    color:
        var(--text-primary);

    font-size:
        13px;

    font-weight:
        600;
}


.album-action-content small {

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.5;
}


/* -----------------------------------------
   ARROW
----------------------------------------- */

.album-action-arrow {

    flex-shrink:
        0;

    color:
        var(--text-muted);

    font-size:
        16px;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.album-action-item:hover
.album-action-arrow {

    color:
        var(--accent-light);

    transform:
        translateX(3px);
}


/* -----------------------------------------
   DELETE / DANGER
----------------------------------------- */

.album-action-danger {

    border-color:
        rgba(239, 107, 107, 0.18);

}


.album-action-danger
.album-action-icon {

    border-color:
        rgba(239, 107, 107, 0.28);

    background:
        rgba(239, 107, 107, 0.055);

    color:
        #ff9b9b;
}


.album-action-danger:hover {

    border-color:
        rgba(239, 107, 107, 0.42);

    background:
        rgba(239, 107, 107, 0.07);
}


.album-action-danger:hover
.album-action-icon {

    border-color:
        rgba(239, 107, 107, 0.42);

    background:
        rgba(239, 107, 107, 0.10);
}


/* -----------------------------------------
   FOOTER
----------------------------------------- */

.album-action-modal-footer {

    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        24px;
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 600px) {

    .album-action-modal {

        padding:
            14px;

    }


    .album-action-modal-card {

        padding:
            22px;

        border-radius:
            var(--radius-medium);

    }


    .album-action-modal-header h2 {

        font-size:
            22px;

    }


    .album-action-item {

        min-height:
            64px;

    }


    .album-action-modal-footer
    .secondary-button {

        width:
            100%;

    }

}


/* =========================================================
   27. PHOTO VIEWER
========================================================= */

.photo-viewer {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px;

    background:
        rgba(0, 0, 0, 0.92);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 4000;

    transition:
        opacity var(--transition),
        visibility var(--transition);

}


.photo-viewer.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.photo-viewer img {

    max-width:
        min(
            90vw,
            1300px
        );

    max-height:
        78vh;

    object-fit: contain;

    border-radius:
        var(--radius-small);

    box-shadow:
        var(--shadow-large);

}


.photo-viewer-close {

    position: absolute;

    top: 25px;
    right: 30px;

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color:
        white;

    font-size: 27px;

}


.photo-viewer-controls {

    position: absolute;

    left: 50%;
    bottom: 28px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

}


.viewer-prev,
.viewer-next,
.viewer-download {

    min-width: 44px;
    height: 44px;

    padding:
        0 14px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--border-strong);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.07);

    color:
        white;

}


.viewer-download {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;

}


.viewer-prev:hover,
.viewer-next:hover,
.viewer-download:hover {

    border-color:
        rgba(216, 181, 106, 0.55);

    color:
        var(--accent-light);

}


/* =========================================================
   28. MOBILE NAVIGATION
========================================================= */

.mobile-navigation {

    display: none;

}


/* =========================================================
   29. SIDEBAR COLLAPSED STATE
========================================================= */

.desktop-sidebar.collapsed {

    width:
        var(--sidebar-collapsed-width);

}


.main-content.sidebar-collapsed {

    margin-left:
        var(--sidebar-collapsed-width);

}


.header.sidebar-collapsed {

    padding-left:
        calc(
            var(--sidebar-collapsed-width)
            + 32px
        );

}


.desktop-sidebar.collapsed
.sidebar-brand {

    justify-content: center;

    padding: 0;

}


.desktop-sidebar.collapsed
.sidebar-title {

    width: 0;

    opacity: 0;

}


.desktop-sidebar.collapsed
.nav-item {

    justify-content: center;

    padding:
        0 10px;

}


.desktop-sidebar.collapsed
.nav-text {

    width: 0;

    opacity: 0;

}


.desktop-sidebar.collapsed
.settings-button {

    justify-content: center;

    padding:
        0 10px;

}


.desktop-sidebar.collapsed
.sidebar-toggle {

    transform:
        rotate(180deg);

}


/* =========================================================
   30. TABLET
========================================================= */

@media (max-width: 1024px) {

    :root {

        --header-height: 68px;

    }


    .desktop-sidebar {

        display: none;

    }


    .header {

        padding:
            0 22px;

    }


    .main-content {

        margin-left: 0;

        padding-bottom:
            90px;

    }


    .main-content.sidebar-collapsed {

        margin-left:
            0 !important;

    }


    .header.sidebar-collapsed {

        padding-left:
            22px !important;

    }


    .page-section {

        padding:
            40px 28px 70px;

    }


    .mobile-navigation {

        position: fixed;

        left: 16px;
        right: 16px;
        bottom: 16px;

        height: 68px;

        display: flex;

        align-items: center;

        justify-content: space-around;

        padding:
            6px;

        border:
            1px solid var(--border-strong);

        border-radius:
            22px;

        background:
            rgba(18, 18, 21, 0.92);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        box-shadow:
            var(--shadow-large);

        z-index: 2000;

    }


    .mobile-nav-item {

        position: relative;

        flex: 1;

        height: 56px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 2px;

        color:
            var(--text-muted);

        border-radius:
            17px;

        transition:
            var(--transition);

    }


    .mobile-nav-icon {

        font-size: 20px;

        line-height: 1;

    }


    .mobile-nav-text {

        font-size: 9px;

        letter-spacing:
            0.04em;

    }


    .mobile-nav-item.active {

        color:
            var(--accent-light);

        transform:
            translateY(-8px);

    }


    .mobile-nav-item.active::before {

        content: "";

        position: absolute;

        width: 46px;
        height: 46px;

        top: -2px;

        border:
            1px solid
            rgba(216, 181, 106, 0.35);

        border-radius: 50%;

        background:
            rgba(216, 181, 106, 0.07);

        z-index: -1;

    }


    .hero {

        min-height:
            600px;

        padding:
            50px;

    }


    .memory-gallery {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }

}


/* =========================================================
   31. MOBILE
========================================================= */

@media (max-width: 700px) {

    :root {

        --header-height: 64px;

    }


    body {

        font-size: 14px;

    }


    .header {

        padding:
            0 16px;

    }


    .brand-name {

        font-size: 10px;

        letter-spacing:
            0.16em;

    }


    .brand-icon {

        width: 31px;
        height: 31px;

    }


    .search-container.search-open
    .search-bar {

        width:
            calc(
                100vw - 32px
            );

        position: fixed;

        top: 32px;

        right: 16px;

    }


    .page-section {

        padding:
            25px 16px 100px;

    }


    .hero {

        min-height:
            560px;

        padding:
            32px 25px;

        border-radius:
            20px;

    }


    .hero-title {

        font-size:
            clamp(
                48px,
                17vw,
                78px
            );

    }


    .hero-description {

        font-size: 14px;

    }


    .hero-button {

        font-size: 9px;

    }


    .class-information {

        grid-template-columns:
            1fr;

    }


    .info-item {

        min-height: 90px;

        border-right: 0;

        border-bottom:
            1px solid var(--border);

    }


    .info-item:last-child {

        border-bottom: 0;

    }


    .intro-section {

        padding:
            90px 0 70px;

    }


    .section-title {

        font-size:
            39px;

    }


    .section-description {

        font-size: 14px;

        line-height: 1.8;

    }


    .memory-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .album-filter {

        width: 100%;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;

        scrollbar-width: none;

    }


    .album-filter::-webkit-scrollbar {

        display: none;

    }


    .filter-button,
    .create-album-button {

        flex-shrink: 0;

    }


    .add-memory-button {

        width: 100%;

        justify-content:
            center;

    }


    .memory-gallery {

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

        gap: 9px;

    }


    .memory-card {

        border-radius:
            12px;

    }


    .modal-content {

        padding:
            30px 22px;

    }


    .modal-header h2 {

        font-size:
            27px;

    }


    .photo-viewer {

        padding:
            20px;

    }


    .photo-viewer img {

        max-width:
            96vw;

        max-height:
            72vh;

    }


    .photo-viewer-close {

        top: 15px;
        right: 15px;

    }


    .photo-viewer-controls {

        bottom: 20px;

    }

}


/* =========================================================
   32. SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .brand-name {

        display: none;

    }


    .hero {

        min-height:
            520px;

    }


    .mobile-navigation {

        left: 10px;
        right: 10px;
        bottom: 10px;

    }


    .page-section {

        padding-left:
            12px;

        padding-right:
            12px;

    }

}


/* =========================================================
   33. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}

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

.message-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 4000;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

}


.message-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   BACKDROP
========================================================= */

.message-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.62);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

}


/* =========================================================
   MODAL CARD
========================================================= */

.message-modal-card {

    position: relative;

    width: min(
        520px,
        100%
    );

    max-height: calc(
        100vh - 48px
    );

    overflow-y: auto;

    padding: 28px;

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-large);

    background:
        var(--bg-secondary);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.45);

    transform:
        translateY(18px)
        scale(0.98);

    transition:
        transform 0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.message-modal.active
.message-modal-card {

    transform:
        translateY(0)
        scale(1);

}


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

.message-modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;

}


.modal-eyebrow {

    margin: 0 0 6px;

    color:
        var(--accent);

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        0.16em;

}


.message-modal-header h2 {

    margin: 0;

    color:
        var(--text-primary);

    font-size: 25px;

    font-weight: 600;

}


.modal-close {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border:
        1px solid var(--border);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--text-secondary);

    font-size: 23px;

    transition:
        var(--transition-fast);

}


.modal-close:hover {

    color:
        var(--text-primary);

    border-color:
        var(--border-strong);

    transform:
        rotate(90deg);

}


/* =========================================================
   FORM
========================================================= */

.message-form {

    display: flex;

    flex-direction: column;

    gap: 22px;

}


.form-field {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.form-field label {

    color:
        var(--text-secondary);

    font-size: 11px;

    font-weight: 600;

}


.form-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


#messageCounter {

    color:
        var(--text-muted);

    font-size: 10px;

}


.form-field input,
.form-field textarea {

    width: 100%;

    box-sizing: border-box;

    padding:
        13px 14px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    outline: none;

    background:
        var(--bg-card);

    color:
        var(--text-primary);

    font-family: inherit;

    font-size: 13px;

    transition:
        var(--transition-fast);

}


.form-field textarea {

    min-height: 140px;

    resize: vertical;

    line-height: 1.65;

}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        var(--text-muted);

}


.form-field input:focus,
.form-field textarea:focus {

    border-color:
        rgba(216, 181, 106, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(216, 181, 106, 0.07);

}


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

.message-form-footer {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    padding-top: 4px;

}


/* =========================================================
   BUTTONS
========================================================= */

.message-form-footer
.primary-button,
.message-form-footer
.secondary-button {

    min-height: 42px;

    padding:
        0 18px;

    border-radius:
        var(--radius-small);

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

}


.message-form-footer
.secondary-button {

    border:
        1px solid var(--border);

    background:
        transparent;

    color:
        var(--text-secondary);

}


.message-form-footer
.secondary-button:hover {

    color:
        var(--text-primary);

    border-color:
        var(--border-strong);

}


.message-form-footer
.primary-button {

    border:
        1px solid
        rgba(216, 181, 106, 0.45);

    background:
        var(--accent-soft);

    color:
        var(--accent);

}


.message-form-footer
.primary-button:hover {

    background:
        rgba(216, 181, 106, 0.18);

    border-color:
        var(--accent);

}


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

.message-card {

    position: relative;

    padding:
        22px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    background:
        var(--bg-card);

    animation:
        messageAppear
        0.45s ease both;

}


@keyframes messageAppear {

    from {

        opacity: 0;

        transform:
            translateY(12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.message-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;

}


.message-author {

    color:
        var(--text-primary);

    font-size: 13px;

    font-weight: 600;

}


.message-date {

    color:
        var(--text-muted);

    font-size: 10px;

}


.message-card-content {

    margin: 0;

    color:
        var(--text-secondary);

    font-size: 13px;

    line-height: 1.75;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

}


.message-delete {

    position: absolute;

    top: 17px;

    right: 17px;

    width: 28px;

    height: 28px;

    display: grid;

    place-items: center;

    border:
        1px solid transparent;

    border-radius: 50%;

    background: transparent;

    color:
        var(--text-muted);

    opacity: 0;

    cursor: pointer;

    transition:
        var(--transition-fast);

}


.message-card:hover
.message-delete {

    opacity: 1;

}


.message-delete:hover {

    color:
        #e58b8b;

    border-color:
        rgba(229, 139, 139, 0.2);

    background:
        rgba(229, 139, 139, 0.06);

}


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

@media (max-width: 600px) {

    .message-modal {

        padding: 14px;

    }


    .message-modal-card {

        padding: 22px;

        border-radius:
            var(--radius-medium);

    }


    .message-modal-header h2 {

        font-size: 21px;

    }


    .message-form-footer {

        flex-direction: column-reverse;

        align-items: stretch;

    }


    .message-form-footer
    .primary-button,
    .message-form-footer
    .secondary-button {

        width: 100%;

    }


    .message-delete {

        opacity: 1;

    }

}

/* =========================================================
   34. RESPONSIVE FINAL POLISH
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .section-header {

        margin-bottom:
            40px;

    }


    .memory-toolbar {

        gap:
            14px;

    }


    .photo-viewer-controls {

        max-width:
            calc(100vw - 32px);

        flex-wrap:
            wrap;

        justify-content:
            center;

    }


    .album-action-modal-card,
    .prompt-modal-card {

        width:
            min(
                520px,
                calc(100vw - 32px)
            );

    }

}


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

@media (max-width: 700px) {

    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    .header {

        min-height:
            var(--header-height);

    }


    .search-container.search-open
    .search-bar {

        width:
            calc(100vw - 32px);

        max-width:
            none;

    }


    /* -----------------------------------------
       SECTION HEADER
    ----------------------------------------- */

    .section-header {

        margin-bottom:
            32px;

    }


    .section-title {

        line-height:
            1.05;

    }


    /* -----------------------------------------
       ALBUM TOOLBAR
    ----------------------------------------- */

    .memory-toolbar {

        width:
            100%;

    }


    .album-filter {

        width:
            100%;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;

    }


    .album-filter::-webkit-scrollbar {

        display:
            none;

    }


    /* -----------------------------------------
       ALBUM ACTION MODAL
    ----------------------------------------- */

    .album-action-modal {

        padding:
            12px;

    }


    .album-action-modal-card {

        width:
            100%;

        max-height:
            calc(100vh - 24px);

        overflow-y:
            auto;

        padding:
            22px 18px;

        border-radius:
            20px;

    }


    .album-action-modal-header {

        margin-bottom:
            14px;

    }


    .album-action-modal-header h2 {

        font-size:
            22px;

    }


    .album-action-modal-name {

        margin-bottom:
            18px;

    }


    .album-action-item {

        min-height:
            68px;

        padding:
            11px 12px;

    }


    .album-action-content strong {

        font-size:
            12px;

    }


    .album-action-content small {

        font-size:
            10px;

    }


    /* -----------------------------------------
       PROMPT MODAL
    ----------------------------------------- */

    .prompt-modal {

        padding:
            12px;

    }


    .prompt-modal-card {

        width:
            100%;

        max-height:
            calc(100vh - 24px);

        overflow-y:
            auto;

        padding:
            22px 18px;

        border-radius:
            20px;

    }


    .prompt-modal-header h2 {

        font-size:
            22px;

    }


    .prompt-modal-actions {

        flex-direction:
            column-reverse;

    }


    .prompt-modal-actions
    button {

        width:
            100%;

        min-height:
            46px;

    }


    /* -----------------------------------------
       CONFIRM MODAL
    ----------------------------------------- */

    .confirm-modal {

        padding:
            12px;

    }


    .confirm-modal-card {

        width:
            100%;

        max-height:
            calc(100vh - 24px);

        overflow-y:
            auto;

    }


    /* -----------------------------------------
       PHOTO VIEWER
    ----------------------------------------- */

    .photo-viewer {

        padding:
            14px;

    }


    .photo-viewer img {

        max-width:
            calc(100vw - 28px);

        max-height:
            68vh;

    }


    .photo-viewer-controls {

        width:
            calc(100vw - 28px);

        gap:
            8px;

        bottom:
            calc(
                18px
                + env(safe-area-inset-bottom)
            );

    }


    .viewer-prev,
    .viewer-next,
    .viewer-download {

        min-height:
            46px;

    }


    .viewer-download {

        flex:
            1;

    }


    /* -----------------------------------------
       MESSAGE MODAL
    ----------------------------------------- */

    .message-modal {

        padding:
            12px;

    }


    .message-modal-card {

        width:
            100%;

        max-height:
            calc(100vh - 24px);

    }


    /* -----------------------------------------
       BOTTOM NAV
    ----------------------------------------- */

    .mobile-navigation {

        bottom:
            calc(
                10px
                + env(safe-area-inset-bottom)
            );

    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .hero {

        min-height:
            500px;

    }


    .hero-title {

        font-size:
            clamp(
                44px,
                16vw,
                70px
            );

    }


    .section-title {

        font-size:
            35px;

    }


    .memory-gallery {

        gap:
            7px;

    }


    .album-action-modal-card,
    .prompt-modal-card {

        padding:
            18px 15px;

    }


    .album-action-item {

        min-height:
            62px;

    }


    .album-action-icon {

        width:
            34px;

        height:
            34px;

    }


    .photo-viewer-controls {

        gap:
            6px;

    }


    .viewer-prev,
    .viewer-next,
    .viewer-download {

        min-height:
            44px;

        height:
            44px;

        padding:
            0 10px;

    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .memory-card:hover img {

        transform:
            none;

    }


    .memory-card:hover::after {

        opacity:
            0;

    }


    .album-action-item:hover {

        transform:
            none;

    }


    .message-delete {

        opacity:
            1;

    }

}

/* =========================================================
   35. MOBILE / TABLET VISUAL POLISH
========================================================= */


/* =========================================================
   TABLET — iPad
========================================================= */

@media (min-width: 701px) and (max-width: 1024px) {

    .page-section {

        padding:
            36px 24px 90px;

    }


    .hero {

        min-height:
            620px;

        padding:
            52px;

    }


    .hero-content {

        max-width:
            680px;

    }


    .hero-title {

        font-size:
            clamp(
                58px,
                10vw,
                94px
            );

        max-width:
            100%;

    }


    .class-information {

        margin-top:
            20px;

    }


    .intro-section {

        padding:
            100px 8px 80px;

    }


    .memory-gallery {

        gap:
            12px;

    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       PAGE
    ----------------------------------------- */

    .page-section {

        width:
            100%;

        padding:
            22px 12px 108px;

    }


    .main-content,
    .main-content.sidebar-collapsed {

        margin-left:
            0 !important;

    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {

        width:
            100%;

        min-height:
            540px;

        padding:
            30px 22px;

        border-radius:
            20px;

    }


    .hero-content {

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

    }


    .hero-small-title {

        font-size:
            9px;

        letter-spacing:
            0.20em;

        margin-bottom:
            14px;

    }


    .hero-title {

        width:
            100%;

        max-width:
            100%;

        font-size:
            clamp(
                42px,
                13vw,
                62px
            );

        line-height:
            0.92;

        letter-spacing:
            -0.045em;

        word-break:
            normal;

        overflow-wrap:
            normal;

    }


    .hero-title span {

        display:
            block;

        width:
            max-content;

        max-width:
            100%;

    }


    .hero-description {

        max-width:
            100%;

        margin-bottom:
            26px;

        font-size:
            13px;

        line-height:
            1.75;

    }


    .hero-button {

        min-height:
            44px;

        padding:
            0 17px;

        font-size:
            9px;

    }


    /* -----------------------------------------
       CLASS INFORMATION
    ----------------------------------------- */

    .class-information {

        width:
            100%;

        margin-top:
            14px;

    }


    .info-item {

        padding:
            20px 22px;

    }


    .info-value {

        font-size:
            17px;

        line-height:
            1.45;

    }


    /* -----------------------------------------
       INTRO
    ----------------------------------------- */

    .intro-section {

        padding:
            76px 4px 65px;

    }


    .section-title {

        font-size:
            clamp(
                32px,
                9.5vw,
                42px
            );

    }


    .section-description {

        max-width:
            100%;

        font-size:
            13px;

    }


    /* -----------------------------------------
       MOBILE NAVIGATION
    ----------------------------------------- */

    .mobile-navigation {

        left:
            12px;

        right:
            12px;

        bottom:
            calc(
                10px +
                env(safe-area-inset-bottom)
            );

        height:
            66px;

        padding:
            5px;

        border-radius:
            20px;

    }


    .mobile-nav-item {

        height:
            54px;

        border-radius:
            15px;

        -webkit-tap-highlight-color:
            transparent;

    }


    .mobile-nav-item:focus {

        outline:
            none;

    }


    .mobile-nav-item:focus-visible {

        outline:
            2px solid
            rgba(
                216,
                181,
                106,
                0.55
            );

        outline-offset:
            2px;

    }


    .mobile-nav-icon {

        font-size:
            19px;

    }


    .mobile-nav-text {

        font-size:
            9px;

    }


    .mobile-nav-item.active {

        transform:
            translateY(-6px);

    }


    .mobile-nav-item.active::before {

        width:
            42px;

        height:
            42px;

        top:
            1px;

    }


    /* -----------------------------------------
       MEMORY GALLERY
    ----------------------------------------- */

    .memory-gallery {

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

        gap:
            8px;

    }


    /* -----------------------------------------
       MEMORY TOOLBAR
    ----------------------------------------- */

    .memory-toolbar {

        gap:
            12px;

        margin-bottom:
            22px;

    }


    .album-filter {

        width:
            calc(
                100vw - 24px
            );

        max-width:
            100%;

        padding-bottom:
            3px;

    }


    /* -----------------------------------------
       MODALS
    ----------------------------------------- */

    .album-action-modal-card,
    .prompt-modal-card,
    .confirm-modal-card,
    .message-modal-card {

        width:
            calc(
                100vw - 24px
            );

        max-width:
            none;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .page-section {

        padding-left:
            10px;

        padding-right:
            10px;

    }


    .hero {

        min-height:
            500px;

        padding:
            28px 18px;

    }


    .hero-title {

        font-size:
            clamp(
                40px,
                12.8vw,
                54px
            );

    }


    .hero-description {

        font-size:
            12px;

    }


    .mobile-navigation {

        left:
            10px;

        right:
            10px;

    }

}


/* =========================================================
   SEARCH RESULT INFO
========================================================= */

.search-result-info {

    width:
        100%;

    margin:
        0 0 22px;

    text-align:
        center;

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        500;

    letter-spacing:
        0.2px;

}


/* =========================================================
   SEARCH EMPTY STATE
========================================================= */

.search-empty-state {

    width:
        min(
            100%,
            520px
        );

    margin:
        45px auto;

    padding:
        42px 24px;

    text-align:
        center;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );

}


/* =========================================================
   SEARCH EMPTY ICON
========================================================= */

.search-empty-icon {

    width:
        58px;

    height:
        58px;

    margin:
        0 auto 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            216,
            181,
            106,
            0.25
        );

    border-radius:
        50%;

    background:
        rgba(
            216,
            181,
            106,
            0.06
        );

    font-size:
        22px;

}


/* =========================================================
   SEARCH EMPTY TITLE
========================================================= */

.search-empty-state h3 {

    margin:
        0 0 10px;

    color:
        var(--text-primary);

    font-size:
        18px;

    font-weight:
        700;

}


/* =========================================================
   SEARCH EMPTY DESCRIPTION
========================================================= */

.search-empty-state p {

    margin:
        0 auto 22px;

    max-width:
        380px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.7;

}


.search-empty-keyword {

    color:
        var(--accent);

    font-weight:
        600;

}


/* =========================================================
   SEARCH EMPTY RESET BUTTON
========================================================= */

.search-empty-reset {

    min-height:
        40px;

    padding:
        0 18px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color:
        var(--text-primary);

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);

}


.search-empty-reset:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(
            216,
            181,
            106,
            0.45
        );

    background:
        rgba(
            216,
            181,
            106,
            0.07
        );

}


/* =========================================================
   SEARCH EMPTY MOBILE
========================================================= */

@media (max-width: 700px) {

    .search-result-info {

        margin:
            0 0 18px;

        font-size:
            12px;

    }


    .search-empty-state {

        width:
            calc(
                100% - 24px
            );

        margin:
            30px auto;

        padding:
            34px 18px;

        border-radius:
            16px;

    }


    .search-empty-state h3 {

        font-size:
            17px;

    }


    .search-empty-state p {

        font-size:
            12px;

    }

}



/* =========================================================
   18.6 RESPONSIVE FINAL HARDENING

   Mục tiêu:
   - Ổn định trên màn hình rất nhỏ.
   - Tối ưu viewport mobile hiện đại (dvh + safe-area).
   - Giữ modal / viewer không vượt màn hình.
   - Đảm bảo touch target đủ lớn.
   - Không thay đổi layout desktop đang ổn định.
========================================================= */

/* ---------------------------------------------------------
   VERY SMALL PHONES — 320px → 389px
--------------------------------------------------------- */

@media (max-width: 389px) {

    .header {
        padding:
            0 12px;
    }

    .search-button {
        width:
            42px;
        height:
            42px;
    }

    .page-section {
        padding-left:
            10px;
        padding-right:
            10px;
    }

    .hero {
        padding:
            28px 18px;
        min-height:
            500px;
    }

    .hero-title {
        font-size:
            clamp(
                42px,
                15.5vw,
                68px
            );
    }

    .hero-description {
        max-width:
            100%;
    }

    .memory-gallery {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap:
            7px;
    }

    .mobile-navigation {
        left:
            8px;
        right:
            8px;
        width:
            auto;
        border-radius:
            20px;
    }
}


/* ---------------------------------------------------------
   MOBILE VIEWPORT HARDENING
--------------------------------------------------------- */

@media (max-width: 700px) {

    .mobile-navigation {
        bottom:
            calc(
                10px + env(safe-area-inset-bottom)
            );
    }

    .photo-viewer,
    .confirm-modal,
    .prompt-modal,
    .album-action-modal,
    .message-modal,
    .settings-modal {
        min-height:
            100vh;
        min-height:
            100dvh;
    }

    .confirm-modal-card,
    .prompt-modal-card,
    .album-action-modal-card,
    .message-modal-card,
    .settings-modal-card {
        max-height:
            calc(100dvh - 24px);
    }

    .photo-viewer {
        padding-bottom:
            calc(
                14px + env(safe-area-inset-bottom)
            );
    }

    .photo-viewer-controls {
        bottom:
            calc(
                18px + env(safe-area-inset-bottom)
            );
    }
}


/* ---------------------------------------------------------
   TOUCH TARGETS
--------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {

    .mobile-nav-item,
    .modal-close,
    .photo-viewer-close,
    .viewer-prev,
    .viewer-next,
    .viewer-download,
    .confirm-modal-actions button,
    .prompt-modal-actions button,
    .message-form-footer button,
    .album-action-item,
    .search-close {
        min-height:
            44px;
    }

    .modal-close,
    .photo-viewer-close,
    .search-close {
        min-width:
            44px;
    }
}


/* ---------------------------------------------------------
   LANDSCAPE PHONES
--------------------------------------------------------- */

@media (max-width: 700px) and (orientation: landscape) {

    .hero {
        min-height:
            430px;
    }

    .page-section {
        padding-top:
            18px;
    }

    .photo-viewer img {
        max-height:
            58dvh;
    }

    .photo-viewer-controls {
        bottom:
            calc(
                10px + env(safe-area-inset-bottom)
            );
    }
}


/* ---------------------------------------------------------
   ACCESSIBILITY — FOCUS VISIBILITY
--------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
        outline:
            2px solid var(--accent);
        outline-offset:
            3px;
    }
}