:root {
    --lg-gold: #F0A500;
    --lg-gold-deep: #d98f00;
    --lg-ink: #14171f;
    --lg-dim: #6b7280;
    --lg-line: #e5e7eb;
    --lg-surface: #ffffff;
    --lg-page: #fbf8f1;
    --lg-danger: #b42318;
    --lg-danger-bg: #fef3f2;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--lg-ink);
    background: var(--lg-page);
    -webkit-font-smoothing: antialiased;
}
.lg-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.lg-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem clamp(2rem, 5vw, 5rem);
    background:
        radial-gradient(circle at 20% 15%, rgba(240,165,0,0.22), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(240,165,0,0.14), transparent 40%),
        linear-gradient(160deg, #fff7e0 0%, #fffdf7 60%, #fbf8f1 100%);
    overflow: hidden;
}
.lg-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 2.5rem; }
.lg-brand .jo { color: var(--lg-gold); }
.lg-brand .ia { font-size: 0.6em; vertical-align: super; margin-left: 0.15rem; color: var(--lg-dim); font-weight: 700; }
.lg-hero h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
    max-width: 16ch;
}
.lg-hero p { color: var(--lg-dim); font-size: 1.02rem; line-height: 1.6; max-width: 44ch; margin: 0 0 2rem; }
.lg-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; max-width: 40ch; }
.lg-points li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; font-weight: 500; }
.lg-points i {
    width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(240,165,0,0.16); color: var(--lg-gold-deep); flex-shrink: 0;
}
.lg-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}
.lg-card {
    width: 100%;
    max-width: 400px;
    background: var(--lg-surface);
    border: 1px solid var(--lg-line);
    border-radius: 18px;
    padding: 2.25rem 2rem;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 32px rgba(16,24,40,0.08);
}
.lg-card h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 0.35rem; }
.lg-card .lg-sub { color: var(--lg-dim); font-size: 0.92rem; margin: 0 0 1.5rem; }
.lg-alert {
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    font-size: 0.88rem;
    margin-bottom: 1.1rem;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}
.lg-alert-error { background: var(--lg-danger-bg); color: var(--lg-danger); border: 1px solid #fecdca; }
.lg-alert-success { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.lg-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.lg-field label { font-size: 0.85rem; font-weight: 600; color: var(--lg-ink); }
.lg-input {
    width: 100%;
    height: 46px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.97rem;
    color: var(--lg-ink);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lg-input:focus { outline: none; border-color: var(--lg-gold); box-shadow: 0 0 0 4px rgba(240,165,0,0.18); }
.lg-password { position: relative; }
.lg-password .lg-input { padding-right: 3rem; }
.lg-toggle {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: none; background: none; border-radius: 8px;
    color: var(--lg-dim); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lg-toggle:hover { color: var(--lg-ink); background: #f2f4f7; }
.lg-submit {
    width: 100%;
    height: 48px;
    margin-top: 0.4rem;
    border: none;
    border-radius: 10px;
    background: var(--lg-gold);
    color: #111;
    font: inherit;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,0.1), 0 6px 16px rgba(240,165,0,0.3);
    transition: background 0.15s, transform 0.05s;
}
.lg-submit:hover { background: var(--lg-gold-deep); }
.lg-submit:active { transform: translateY(1px); }
.lg-links { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; text-align: center; font-size: 0.9rem; color: var(--lg-dim); }
.lg-links a { color: var(--lg-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lg-links a:hover { color: var(--lg-gold-deep); text-decoration: underline; }
.lg-divider { height: 1px; background: var(--lg-line); margin: 1.25rem 0 0.25rem; }
@media (max-width: 860px) {
    .lg-shell { grid-template-columns: 1fr; }
    .lg-hero { padding: 2rem 1.25rem 0.5rem; }
    .lg-brand { margin-bottom: 1.25rem; }
    .lg-hero p, .lg-points { display: none; }
    .lg-hero h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
    .lg-form-side { padding: 1.25rem 1rem 2.5rem; }
    .lg-card { padding: 1.75rem 1.4rem; }
}
.cp-picker { position: relative; }
.cp-trigger {
    width: 100%; height: 46px;
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    border: 1px solid #d0d5dd; border-radius: 10px; padding: 0 0.9rem;
    background: #fff; color: var(--lg-ink); font: inherit; font-size: 0.97rem; text-align: left; cursor: pointer;
}
.cp-trigger:focus-visible, .cp-trigger[aria-expanded="true"] { outline: none; border-color: var(--lg-gold); box-shadow: 0 0 0 4px rgba(240,165,0,0.18); }
.cp-placeholder { color: #98a2b3; }
.cp-caret { font-size: 0.8rem; color: var(--lg-dim); transition: transform 0.15s; }
.cp-trigger[aria-expanded="true"] .cp-caret { transform: rotate(180deg); }
.cp-panel {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--lg-line); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16,24,40,0.16); overflow: hidden;
}
.cp-panel[hidden] { display: none; }
.cp-search { position: relative; padding: 0.6rem; border-bottom: 1px solid var(--lg-line); }
.cp-search i { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--lg-dim); font-size: 0.85rem; }
.cp-search input {
    width: 100%; height: 38px; border: 1px solid #e4e7ec; border-radius: 8px; padding: 0 0.7rem 0 2.1rem;
    font: inherit; font-size: 0.92rem; color: var(--lg-ink); background: #fbfbfc;
}
.cp-search input:focus { outline: none; border-color: var(--lg-gold); box-shadow: 0 0 0 3px rgba(240,165,0,0.18); }
.cp-list { max-height: 300px; overflow-y: auto; padding: 0.3rem; }
.cp-group { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lg-dim); padding: 0.6rem 0.6rem 0.3rem; }
.cp-item {
    width: 100%; display: flex; align-items: center; gap: 0.7rem; border: none; background: none;
    padding: 0.55rem 0.6rem; border-radius: 8px; font: inherit; font-size: 0.93rem; color: var(--lg-ink); cursor: pointer; text-align: left;
}
.cp-item:hover, .cp-item:focus-visible { background: #fff7e0; outline: none; }
.cp-item.active { font-weight: 700; background: rgba(240,165,0,0.14); }
.cp-flag { font-size: 1.15rem; line-height: 1; }
.cp-item[hidden], .cp-group[hidden] { display: none; }
a.lg-brand { color: inherit; text-decoration: none; display: inline-block; }
a.lg-brand:hover { opacity: 0.85; }