/* Presentation only. Loaded after the existing PDD styles; no DOM/event changes. */
.fi-body,
.pdd-auth {
    --pdd-surface: #fff;
    --pdd-canvas: #f4f8f5;
    --pdd-ink: #0f172a;
    --pdd-muted: #475569;
    --pdd-line: #dce6e1;
    --pdd-accent: #15803d;
    --pdd-soft: #ecfdf5;
    --pdd-elevation: 0 8px 28px rgba(6, 78, 59, .06);
    --pdd-duration: 160ms;
    --pdd-ease: cubic-bezier(.2, .7, .3, 1);
}
.dark .fi-body {
    --pdd-surface: #111827;
    --pdd-canvas: #0b1220;
    --pdd-ink: #f8fafc;
    --pdd-muted: #a7b3c4;
    --pdd-line: #334155;
    --pdd-accent: #86efac;
    --pdd-soft: #163628;
    --pdd-elevation: 0 8px 28px rgba(0, 0, 0, .18);
}
.fi-body { background: var(--pdd-canvas); }
.fi-body .fi-main, .fi-body .fi-page { min-width: 0; }
.fi-body .fi-header { gap: 20px; }
.fi-body .fi-header-heading { line-height: 1.4; letter-spacing: normal; }
.fi-body .fi-header-subheading { color: var(--pdd-muted); line-height: 1.75; }
.fi-body .fi-sidebar { border-inline-end: 1px solid var(--pdd-line); }
.fi-body .fi-sidebar-item-btn { border-radius: 12px; min-height: 44px; }
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--pdd-soft);
    box-shadow: inset 0 0 0 1px var(--pdd-line);
}
.fi-body .fi-sidebar-group-label { font-weight: 700; }
.fi-body .fi-section-header-heading, .fi-body .fi-ta-header-heading { line-height: 1.6; }
.fi-body .fi-section-header-description { color: var(--pdd-muted); line-height: 1.75; }
.fi-body .fi-ta-content { overflow-x: auto; overscroll-behavior-inline: contain; }
.fi-body .fi-ta-header-cell { padding-block: 14px; }
.fi-body .fi-ta-cell { padding-block: 13px; }
.fi-body .fi-ta-header-cell-label { line-height: 1.6; font-weight: 700; }
.fi-body .fi-ta-empty-state { padding-block: 40px; }
.fi-body .fi-ta-empty-state-description { color: var(--pdd-muted); line-height: 1.8; }
.fi-body .fi-input-wrp { border-radius: 12px; }
.fi-body .fi-fo-field-label { line-height: 1.7; }
.fi-body .fi-fo-field-wrp-helper-text { line-height: 1.75; }
.fi-body .fi-modal-window, .fi-body .fi-dropdown-panel { border: 1px solid var(--pdd-line); }
.fi-body .fi-modal-heading { line-height: 1.5; }
.fi-body .fi-btn { min-height: 40px; }
.fi-body .fi-icon-btn { min-width: 36px; min-height: 36px; }
/* Preserve the existing three-column action grid in the dense course table. */
.fi-body .pdd-development-table .fi-icon-btn { min-width: 28px; min-height: 32px; }
.fi-body :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.pdd-auth :is(a, button, input):focus-visible {
    outline: 3px solid var(--pdd-accent);
    outline-offset: 3px;
}
/* Inset focus remains visible inside horizontally scrolling tables. */
.fi-body .fi-ta-content :is(a, button, input, [tabindex]):focus-visible {
    outline-offset: -3px;
}
.fi-body :is(.fi-btn, .pdd-experience-button, .pdd-support button):disabled,
.pdd-auth button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.fi-body .pdd-command { gap: 24px; }
.fi-body .pdd-command h1 { line-height: 1.3; letter-spacing: normal; }
.fi-body .pdd-command__main > p { line-height: 1.85; color: #ecfdf5; }
.fi-body .pdd-command__aside { min-width: 0; }
.fi-body .pdd-command__aside :is(small, span) { color: #d1fae5; }
.fi-body .pdd-command__aside strong { overflow-wrap: anywhere; }
.fi-body .pdd-launchpad :is(strong, small) {
    white-space: normal; overflow: visible; overflow-wrap: anywhere;
}
.fi-body .pdd-launchpad small { color: var(--pdd-muted); line-height: 1.6; }
.fi-body .pdd-ad-section-heading p { color: var(--pdd-muted); }
.fi-body .pdd-experience-card { box-shadow: var(--pdd-elevation); }
.fi-body .pdd-profile-grid > *, .fi-body .pdd-promotions > * { min-width: 0; }
.fi-body .pdd-experience-card dd { overflow-wrap: anywhere; }
.fi-body .pdd-experience-card input { box-sizing: border-box; min-height: 44px; }

/* Shared authentication shell; existing fields and submissions stay intact. */
.pdd-auth {
    margin: 0; box-sizing: border-box; min-height: 100vh; min-height: 100svh;
    display: grid; place-items: center; padding: 88px 24px 40px;
    background: radial-gradient(ellipse at 15% 10%, #16a34a55, transparent 50%),
        linear-gradient(135deg, #064e3b, #14532d);
    color: var(--pdd-ink); line-height: 1.7;
}
.pdd-auth main {
    position: relative; box-sizing: border-box; width: min(480px, 100%);
    padding: clamp(24px, 5vw, 40px); border-radius: 24px;
    border: 1px solid #dce6e1; background: var(--pdd-surface);
    box-shadow: 0 24px 64px #0003;
}
.pdd-auth main::before {
    content: ''; display: block; width: 44px; height: 5px;
    border-radius: 999px; background: #15803d; margin-bottom: 24px;
}
.pdd-auth h1 { margin: 0 0 12px; color: #14532d; font-size: clamp(1.4rem, 4vw, 1.75rem); line-height: 1.5; }
.pdd-auth main > p { color: var(--pdd-muted); margin: 0 0 22px; }
.pdd-auth label { display: block; margin-top: 18px; font-weight: 500; }
.pdd-auth input:not([type=checkbox]):not([type=hidden]) {
    box-sizing: border-box; display: block; width: 100%; min-height: 48px;
    padding: 12px 14px; margin-block: 8px 16px; border: 1px solid #94a3b8;
    border-radius: 12px; background: #f8fafc; color: #0f172a; font-size: 1rem;
}
.pdd-auth input::placeholder { color: #475569; }
.pdd-auth input[type=email] { direction: ltr; text-align: start; }
.pdd-auth input[name=code] { direction: ltr; text-align: center; font-size: 1.5rem; letter-spacing: .3em; }
.pdd-auth input[type=checkbox] { accent-color: #15803d; min-width: 18px; min-height: 18px; }
.pdd-auth button {
    box-sizing: border-box; width: 100%; min-height: 48px; margin-top: 16px;
    border: 1px solid transparent; border-radius: 12px; padding: 12px 18px;
    background: #15803d; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.pdd-auth button.secondary { background: #475569; }
.pdd-auth main a { color: #14532d; text-underline-offset: 4px; }
.pdd-auth .error { color: #b91c1c; line-height: 1.75; }
.pdd-auth .locale-switch { min-height: 28px; display: inline-flex; align-items: center; }

@media (hover: hover) and (pointer: fine) {
    .fi-body .fi-sidebar-item-btn:hover { background: var(--pdd-soft); }
    .pdd-auth button:not(:disabled):hover { box-shadow: 0 6px 18px #14532d26; }
    .pdd-auth button:not(.secondary):not(:disabled):hover { background: #14532d; }
}
@media (prefers-reduced-motion: no-preference) {
    .fi-body :is(.fi-sidebar-item-btn, .fi-input-wrp, .pdd-experience-button),
    .pdd-auth :is(button, input) {
        transition: background-color var(--pdd-duration) var(--pdd-ease),
            box-shadow var(--pdd-duration) var(--pdd-ease), border-color var(--pdd-duration) var(--pdd-ease);
    }
    .fi-body :is(.fi-btn, .pdd-command-btn, .pdd-launchpad > a):not(:disabled):active,
    .pdd-auth button:not(:disabled):active { transform: translateY(1px); }
    .pdd-auth main { animation: pdd-polish-arrive 200ms var(--pdd-ease); }
    @keyframes pdd-polish-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1100px) {
    .fi-body .pdd-command { grid-template-columns: minmax(0, 1fr); }
    .fi-body .pdd-command__aside { margin-top: 0; }
}
@media (max-width: 640px) {
    .fi-body .fi-header { flex-wrap: wrap; gap: 16px; }
    .fi-body .fi-header-heading { font-size: 1.5rem; }
    .fi-body .fi-icon-btn { min-width: 44px; min-height: 44px; }
    .fi-body .pdd-experience-card { padding: 20px; }
    .fi-body .pdd-command__brand { flex-wrap: wrap; }
    .fi-body .pdd-command__actions { width: 100%; }
    .fi-body .pdd-command-btn { box-sizing: border-box; white-space: normal; min-height: 48px; }
    .fi-body .pdd-promotion { grid-template-columns: minmax(0, 1fr); }
    .fi-body .pdd-ad-art, .fi-body .pdd-ad-image { min-height: 140px; max-height: 200px; }
    .pdd-auth { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .fi-body :is(.fi-btn, .pdd-command-btn, .pdd-launchpad > a, .locale-switch):hover,
    .pdd-auth .locale-switch:hover { transform: none !important; }
    .fi-body .pdd-welcome-dialog, .fi-body .pdd-welcome-emblem { animation: none; }
}