:root {
    --lestiu-green: #006647;
    --lestiu-green-dark: #004d37;
    --lestiu-green-soft: #e7f0ec;
    --lestiu-ivory: #f7f5ef;
    --lestiu-paper: #fffefb;
    --lestiu-black: #101714;
    --lestiu-muted: #66706b;
    --lestiu-line: #cbd9d2;
    --lestiu-danger: #8a3f3f;
    --lestiu-serif: "Latin Modern Roman", "Times New Roman", Georgia, serif;
    --lestiu-korean: "Noto Serif KR", "Batang", serif;
}

.brand-section-number {
    margin: 0 0 12px;
    color: var(--lestiu-green);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Login */
body.login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow-x: hidden;
    padding: 42px 20px;
    color: white;
    background: var(--lestiu-green);
}

body.login-page::before,
body.login-page::after {
    position: fixed;
    width: 46vw;
    height: 46vw;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

body.login-page::before { top: -28vw; left: -16vw; }
body.login-page::after { right: -24vw; bottom: -31vw; }

.login-page .login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1050px, 100%);
    grid-template-columns: minmax(300px, 1.15fr) minmax(340px, .85fr);
    gap: clamp(40px, 8vw, 110px);
    align-items: center;
}

.login-page .login-brand { margin: 0; text-align: left; }
.login-page .login-brand img {
    display: block;
    width: min(520px, 100%);
    margin-left: -8%;
}

.login-kicker {
    margin: -11% 0 0;
    padding-top: 24px;
    color: rgba(255,255,255,.76);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,.25);
}

.login-page .login-card {
    padding: clamp(32px, 5vw, 54px);
    color: var(--lestiu-black);
    background: var(--lestiu-paper);
    border: 0;
    border-radius: 2px 2px 30px 2px;
    box-shadow: 0 34px 90px rgba(0,48,34,.27);
    backdrop-filter: none;
}

.login-page .login-card h1 {
    margin: 0;
    color: var(--lestiu-green-dark);
    font-family: var(--lestiu-serif);
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.045em;
}

.login-page .login-help { margin: 18px 0 30px; color: var(--lestiu-muted); }
.login-page .login-form { gap: 20px; }
.login-page .login-field label { color: var(--lestiu-green-dark); }
.login-page .login-field input {
    min-height: 58px;
    color: var(--lestiu-black);
    background: white;
    border: 1px solid var(--lestiu-line);
    border-radius: 9px;
}
.login-page .login-field input:focus { border-color: var(--lestiu-green); box-shadow: 0 0 0 3px rgba(0,102,71,.11); }
.login-page .login-button {
    min-height: 58px;
    color: white;
    background: var(--lestiu-green);
    border-radius: 9px;
}
.login-page .login-button:hover { background: var(--lestiu-green-dark); }
.login-page .login-error { color: var(--lestiu-danger); background: #fff0ef; border-color: #e3b6b3; }
.login-footer {
    position: absolute;
    right: 0;
    bottom: -42px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: .72rem;
    letter-spacing: .08em;
}

/* Dashboard */
body.brand-dashboard-page {
    color: var(--lestiu-black);
    background: var(--lestiu-ivory);
}

.brand-dashboard-page .brand-dashboard {
    width: min(1320px, calc(100% - 48px));
    padding: 24px 0 54px;
}

.brand-dashboard-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 46px;
    padding: 30px clamp(30px, 6vw, 80px) 38px;
    color: white;
    background: var(--lestiu-green);
    border-radius: 2px 2px 38px 2px;
}

.brand-dashboard-hero::after {
    position: absolute;
    right: -170px;
    bottom: -310px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    content: "";
}

.brand-dashboard-topline { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.24); }
.brand-dashboard-logo { width:170px; margin:-58px 0; }
.brand-dashboard-topline p { margin:0; color:rgba(255,255,255,.7); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.brand-dashboard-intro { max-width:850px; padding:70px 0 58px; }
.brand-dashboard-intro .brand-section-number { color:rgba(255,255,255,.7); }
.brand-dashboard-intro h1 { margin:0; font-family:var(--lestiu-serif); font-size:clamp(3rem,7vw,6.8rem); font-weight:500; line-height:.89; letter-spacing:-.055em; }
.brand-dashboard-intro > p:last-child { max-width:640px; margin:28px 0 0; color:rgba(255,255,255,.78); font-size:1.05rem; }

.brand-dashboard-page .session-bar {
    position:relative;
    z-index:1;
    margin:0;
    padding:17px 0 0;
    background:transparent;
    border:0;
    border-top:1px solid rgba(255,255,255,.24);
    border-radius:0;
}
.brand-dashboard-page .session-label,.brand-dashboard-page .session-role { color:rgba(255,255,255,.68); }
.brand-dashboard-page .session-role { color:white; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.brand-dashboard-page .logout-button { color:var(--lestiu-green-dark); background:white; border-radius:999px; }
.brand-dashboard-page .logout-button:hover { background:var(--lestiu-green-soft); }

.brand-modules-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:22px; padding:0 4px 20px; border-bottom:1px solid var(--lestiu-line); }
.brand-modules-heading h2 { margin:0; color:var(--lestiu-green-dark); font-family:var(--lestiu-serif); font-size:clamp(2rem,4vw,3.5rem); font-weight:500; }
.brand-modules-heading > p { margin:0 0 7px; color:var(--lestiu-muted); }

.brand-dashboard-page .menu-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.brand-dashboard-page .menu-card,
.brand-dashboard-page .menu-card.events-menu-card,
.brand-dashboard-page .menu-card.employees-menu-card,
.brand-dashboard-page .menu-card.table-service-menu-card {
    position:relative;
    min-height:220px;
    flex-direction:column;
    justify-content:space-between;
    padding:28px;
    color:var(--lestiu-black);
    background:var(--lestiu-paper);
    border:1px solid var(--lestiu-line);
    border-radius:2px 2px 22px 2px;
    box-shadow:none;
    backdrop-filter:none;
}
.brand-dashboard-page .menu-card:hover,
.brand-dashboard-page .menu-card.events-menu-card:hover,
.brand-dashboard-page .menu-card.employees-menu-card:hover,
.brand-dashboard-page .menu-card.table-service-menu-card:hover {
    transform:translateY(-4px);
    background:var(--lestiu-green);
    border-color:var(--lestiu-green);
    box-shadow:0 22px 45px rgba(0,77,55,.14);
}
.brand-dashboard-page .menu-card .icon { color:var(--lestiu-green); font-family:var(--lestiu-serif); font-size:1rem; }
.brand-dashboard-page .menu-card h2 { color:var(--lestiu-green-dark); font-family:var(--lestiu-serif); font-size:1.75rem; font-weight:500; }
.brand-dashboard-page .menu-card p { color:var(--lestiu-muted); }
.brand-dashboard-page .menu-card:hover .icon,
.brand-dashboard-page .menu-card:hover h2,
.brand-dashboard-page .menu-card:hover p { color:white; }
.brand-dashboard-page .menu-card::after { position:absolute; top:26px; right:28px; color:var(--lestiu-green); font-size:1.2rem; content:"↗"; }
.brand-dashboard-page .menu-card:hover::after { color:white; }
.brand-dashboard-page .menu-card-disabled { background:#efeee9; opacity:.62; }
.brand-dashboard-page .menu-card-disabled::after { content:"Soon"; }
.brand-dashboard-page .menu-card-disabled:hover { transform:none; color:inherit; background:#efeee9; border-color:var(--lestiu-line); box-shadow:none; }
.brand-dashboard-page .menu-card-disabled:hover .icon,
.brand-dashboard-page .menu-card-disabled:hover h2,
.brand-dashboard-page .menu-card-disabled:hover p { color:inherit; }

.brand-dashboard-footer { display:flex; justify-content:space-between; gap:20px; margin-top:36px; padding-top:18px; color:var(--lestiu-muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; border-top:1px solid var(--lestiu-line); }

@media (max-width: 950px) {
    .login-page .login-shell { grid-template-columns:1fr; width:min(560px,100%); gap:24px; }
    .login-page .login-brand img { width:330px; margin:-65px auto; }
    .login-kicker { margin:0; text-align:center; }
    .login-footer { position:static; margin-top:18px; text-align:center; }
    .brand-dashboard-page .menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
    body.login-page { padding:24px 14px; }
    .login-page .login-card { padding:30px 24px; border-radius:2px 2px 22px 2px; }
    .brand-dashboard-page .brand-dashboard { width:min(100% - 24px,1320px); padding-top:12px; }
    .brand-dashboard-hero { margin:0 -4px 34px; padding:24px 22px 28px; border-radius:0 0 28px 0; }
    .brand-dashboard-topline { align-items:flex-start; flex-direction:column; }
    .brand-dashboard-logo { width:145px; margin:-48px 0; }
    .brand-dashboard-intro { padding:58px 0 46px; }
    .brand-dashboard-intro h1 { font-size:3.2rem; }
    .brand-modules-heading { align-items:flex-start; flex-direction:column; gap:8px; }
    .brand-dashboard-page .menu-grid { grid-template-columns:1fr; }
    .brand-dashboard-page .menu-card { min-height:180px; }
}