:root {
    --yl-black: #090909;
    --yl-green: #008c4a;
    --yl-plum: #70004d;
    --yl-gold: #e6bb55;
    --yl-cream: #fffaf0;
}

body {
    background: var(--yl-cream);
    color: #18151a;
}

.yl-theme-shell #content {
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
}

.yl-auth-bar,
.yl-public-bar {
    align-items: center;
    background: var(--yl-black);
    border-bottom: 3px solid var(--yl-green);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
    color: white;
    display: flex;
    gap: clamp(.75rem, 2vw, 1.75rem);
    min-height: 76px;
    padding: .65rem clamp(1rem, 3vw, 3.25rem);
    position: sticky;
    top: 0;
    z-index: 1025;
}

.yl-public-bar {
    background: linear-gradient(100deg, var(--yl-black), #28001c);
}

.yl-sign-in-link {
    background: var(--yl-green);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    color: white !important;
    font-weight: 750;
    padding: .65rem 1.15rem;
    text-decoration: none !important;
    white-space: nowrap;
}

.yl-sign-in-link:hover,
.yl-sign-in-link:focus {
    background: #00a85a;
    color: white !important;
}

.yl-auth-brand {
    align-items: center;
    color: white !important;
    display: inline-flex;
    font-size: 1.1rem;
    font-weight: 800;
    gap: .65rem;
    letter-spacing: .05em;
    text-decoration: none !important;
}

.yl-auth-brand img {
    background: white;
    border: 2px solid var(--yl-gold);
    border-radius: 50%;
    height: 50px;
    object-fit: contain;
    width: 50px;
}

.yl-main-nav {
    align-items: center;
    display: flex;
    flex: 1;
    gap: .15rem;
    justify-content: center;
}

.yl-main-nav a {
    border-radius: 999px;
    color: rgba(255,255,255,.9) !important;
    font-size: .88rem;
    font-weight: 650;
    padding: .58rem .7rem;
    text-decoration: none !important;
    white-space: nowrap;
}

.yl-main-nav a:hover,
.yl-main-nav a:focus {
    background: rgba(255,255,255,.12);
    color: white !important;
}

.yl-member-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.yl-dashboard-link,
.yl-join-link {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: white !important;
    font-size: .86rem;
    font-weight: 700;
    padding: .58rem .8rem;
    text-decoration: none !important;
    white-space: nowrap;
}

.yl-user-menu .user-avatar-link,
.yl-user-menu button {
    color: white !important;
}

body:has(.control-menu-container) .yl-auth-bar {
    top: 56px;
}

/* Page modules may hide the legacy banner, but must never remove Liferay's
   permission-aware administration control menu. */
body.signed-in .control-menu-container {
    display: block !important;
}

/* The theme owns global navigation. Page content must not render a second
   competing header. */
body:has(.yl-subpage) .yl-subpage__topbar {
    display: none !important;
}

@media (max-width: 720px) {
    .yl-auth-bar,
    .yl-public-bar { align-items: flex-start; flex-wrap: wrap; }
    .yl-main-nav { justify-content: flex-start; order: 3; overflow-x: auto; width: 100%; }
    .yl-member-actions { margin-left: auto; }
    .yl-user-menu { margin-left: auto; }
}

@media (min-width: 721px) and (max-width: 1120px) {
    .yl-main-nav a:nth-child(n+6) { display: none; }
}
.yl-bug-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.34);border-radius:999px;color:#fff!important;font-size:.84rem;font-weight:800;padding:.65rem 1rem;text-decoration:none!important;white-space:nowrap}.yl-bug-link:before{content:"!";display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;margin-right:.45rem;border-radius:50%;background:#f3b61f;color:#1b1000;font-weight:900}.yl-bug-link:hover{background:rgba(255,255,255,.12)}

.yl-error-page{align-items:center;background:radial-gradient(circle at 50% 0,rgba(112,0,77,.055),transparent 38%),#fffaf0;display:flex;justify-content:center;min-height:calc(100vh - 79px);padding:clamp(1.25rem,5vw,4rem)}
.yl-error-card{background:#fff;border:1px solid #e6ddd2;border-radius:24px;box-shadow:0 18px 55px rgba(44,25,17,.08);box-sizing:border-box;max-width:720px;padding:clamp(2rem,5vw,4rem);position:relative;text-align:center;width:100%}
.yl-error-card:before{background:linear-gradient(90deg,var(--yl-green) 0 38%,var(--yl-plum) 38% 72%,var(--yl-black) 72%);border-radius:24px 24px 0 0;content:"";height:6px;left:0;position:absolute;right:0;top:0}
.yl-error-mark{background:#fff;border:1px solid #dfd3c5;border-radius:50%;height:78px;margin:0 auto 1.5rem;object-fit:contain;padding:4px;width:78px}
.yl-error-eyebrow{align-items:center;color:#6e5c53;display:flex;font-size:.75rem;font-weight:850;gap:.55rem;justify-content:center;letter-spacing:.11em;margin:0;text-transform:uppercase}
.yl-error-eyebrow span{background:#f2e7d9;border-radius:999px;color:#4d3930;letter-spacing:.04em;padding:.3rem .55rem}
.yl-error-card h1{color:#1b100c;font-family:Georgia,serif;font-size:clamp(2.1rem,5vw,3.7rem);letter-spacing:-.035em;line-height:1.08;margin:1rem auto}
.yl-error-message{color:#65554d;font-size:1.06rem;line-height:1.65;margin:0 auto;max-width:580px}
.yl-error-actions{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin:2rem 0 1.5rem}
.yl-error-actions :is(a,button){background:#fff;border:1px solid #cfc3b8;border-radius:999px;color:#3e2920!important;cursor:pointer;font:inherit;font-weight:800;padding:.75rem 1.05rem;text-decoration:none!important}
.yl-error-actions :is(a,button):hover{border-color:var(--yl-plum);color:var(--yl-plum)!important}
.yl-error-actions .yl-error-primary{background:var(--yl-plum);border-color:var(--yl-plum);color:#fff!important}.yl-error-actions .yl-error-primary:hover{background:#57003c;color:#fff!important}
.yl-error-reference{border-top:1px solid #eee6de;color:#83736a;font-size:.79rem;margin:0;padding-top:1.15rem}.yl-error-reference a{color:var(--yl-plum);font-weight:800}
@media(max-width:620px){.yl-error-page{align-items:flex-start;padding:1rem}.yl-error-card{border-radius:18px;padding:2rem 1.15rem}.yl-error-card:before{border-radius:18px 18px 0 0}.yl-error-actions{display:grid}.yl-error-actions :is(a,button){width:100%}}
