/* control/login/Default — port of CodyChat 11's Default login.css + the bits of
   its main.css the page relied on (large_button_rounded, centred card, fixed
   photo background, section). Themes repaint .cws-login-hero / .cws-login-card. */

/* #app is a 100vh flex column (control/head_load.php); let this page scroll inside it. */
#app:has(.cws-login-default) { overflow-y: auto; }
.cws-login-default { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }

#intro_top {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 14px 70px;
    box-sizing: border-box;
    background: #292929 url('images/background.jpg') center center / cover no-repeat fixed;
    isolation: isolate;
}
/* Themes' #intro_top::before art (translated to .cws-login-hero::before) needs this. */
#intro_top::before { position: absolute; inset: 0; }

#login_all {
    width: 800px;
    max-width: 94%;
    border-radius: 20px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
}

.ild-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
#login_logo { height: 70px; max-width: 100%; object-fit: contain; }
.ild-mark {
    width: 58px; height: 58px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff;
    background: var(--th-accent, #03add8);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.ild-name { font-size: 30px; font-weight: 800; letter-spacing: .2px; }

.ild-title { margin: 22px 0 10px; font-size: 26px; font-weight: 800; line-height: 1.25; }
.ild-text  { margin: 0 auto; max-width: 560px; font-size: 16px; line-height: 1.55; opacity: .92; }

.ild-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
/* CodyChat .large_button_rounded */
.ild-btn {
    min-width: 220px;
    padding: 12px 22px;
    border: none;
    border-radius: 25px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    transition: transform .12s ease, filter .12s ease;
}
.ild-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ild-btn:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }
/* CodyChat .ok_btn / .default_btn (themes override via .cws-login-primary) */
.ild-btn-main { background: #74b20e; color: #fff; }
.ild-btn-alt  { background: rgba(255,255,255,.14); color: #fff; }
.cws-themed .ild-btn-alt { background: var(--th-btn2-bg); color: var(--th-btn2-text); }

.ild-register { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ild-register span { font-size: 12px; opacity: .8; }
.ild-link { background: none; border: none; padding: 2px 4px; color: inherit; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.ild-more {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(0,0,0,.35); text-decoration: none;
    animation: ildBob 2.4s ease-in-out infinite;
}
@keyframes ildBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .ild-more { animation: none; } }

/* CodyChat .section / column3.php */
.ild-section { width: 100%; padding: 56px 16px 40px; box-sizing: border-box; }
.ild-cols { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ild-col { text-align: center; padding: 8px 10px; }
.ild-ico {
    width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    color: var(--th-accent, #03add8);
    background: color-mix(in srgb, var(--th-accent, #03add8) 14%, transparent);
}
.ild-col h2 { margin: 0 0 8px; font-size: 18px; }
.ild-col p  { margin: 0; font-size: 14px; line-height: 1.6; opacity: .8; }

@media (max-width: 760px) {
    #intro_top { background-attachment: scroll; }
    #login_all { padding: 24px 16px; }
    .ild-name { font-size: 24px; }
    .ild-title { font-size: 22px; }
    .ild-text { font-size: 15px; }
    .ild-btn { min-width: 0; width: 100%; max-width: 300px; }
    .ild-cols { grid-template-columns: 1fr; gap: 22px; }
}