/* ============================================================
   KEYS Enrollment System — Frontend CSS
   Matching exact design from screenshots
   Fonts: Playfair Display (headings) | Poppins (body)
   Primary gold: #C8960A | Dark: #1a1a1a | White: #fff
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ──────────────────────────────────────── */
:root {
    --keys-gold:        #C8960A;
    --keys-gold-hover:  #a87c08;
    --keys-gold-light:  #FDF5DC;
    --keys-gold-border: #e8d48a;
    --keys-dark:        #1a1a1a;
    --keys-dark2:       #111111;
    --keys-text:        #333333;
    --keys-muted:       #777777;
    --keys-border:      #e0e0e0;
    --keys-border-light:#f0f0f0;
    --keys-bg:          #ffffff;
    --keys-bg-soft:     #f9f9f9;
    --keys-white:       #ffffff;
    --keys-success:     #2ecc71;
    --keys-success-dark:#27ae60;
    --keys-danger:      #e74c3c;
    --keys-info:        #3498db;
    --keys-warn:        #e67e22;
    --keys-radius:      6px;
    --keys-shadow:      0 1px 4px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.05);
}

/* ── Scoped Reset — prevent theme interference ──────────── */
.keys-wrap,
.keys-wrap *,
.keys-wrap *::before,
.keys-wrap *::after {
    box-sizing: border-box !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.keys-wrap {
    color: var(--keys-text) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 40px 20px 80px !important;
    background: transparent !important;
}

.keys-wrap h1, .keys-wrap h2, .keys-wrap h3, .keys-wrap h4 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--keys-dark) !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.keys-wrap p { margin: 0 0 12px !important; }

.keys-wrap a { color: var(--keys-gold) !important; }

/* ── Page Header ────────────────────────────────────────── */
.keys-page__header {
    text-align: center !important;
    margin-bottom: 36px !important;
}

.keys-page__header .keys-heading {
    text-align: center !important;
}

.keys-page__header .keys-subheading {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 680px !important;
}

.keys-heading {
    font-family: 'Playfair Display', serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 12px !important;
    line-height: 1.15 !important;
}

h2.keys-heading { font-size: 28px !important; }
h3.keys-heading { font-size: 22px !important; }

.keys-subheading {
    font-size: 14px !important;
    color: var(--keys-muted) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* ── Section Title ──────────────────────────────────────── */
.keys-section-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 32px 0 20px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* ── Container Card ─────────────────────────────────────── */
.keys-form {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 36px 40px !important;
    box-shadow: var(--keys-shadow) !important;
    margin-bottom: 24px !important;
}

/* ── Form Grid ──────────────────────────────────────────── */
.keys-form__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 24px !important;
}

.keys-form__grid--3 { grid-template-columns: 1fr 1fr 1fr !important; }
.keys-form__grid--1 { grid-template-columns: 1fr !important; }

/* ── Field ──────────────────────────────────────────────── */
.keys-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.keys-field--full { grid-column: 1 / -1 !important; }

.keys-field label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
    margin: 0 !important;
}

.keys-field input:not([type="checkbox"]):not([type="radio"]),
.keys-field select,
.keys-field textarea {
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 11px 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: var(--keys-text) !important;
    background: var(--keys-white) !important;
    transition: border-color .2s, box-shadow .2s !important;
    outline: none !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.keys-field input::placeholder,
.keys-field textarea::placeholder {
    color: #bbb !important;
    font-size: 13px !important;
}

.keys-field input:focus,
.keys-field select:focus,
.keys-field textarea:focus {
    border-color: var(--keys-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,150,10,.1) !important;
    outline: none !important;
}

.keys-field input.keys-disabled,
.keys-field input[disabled],
.keys-field select[disabled],
.keys-field textarea[disabled] {
    background: var(--keys-bg-soft) !important;
    color: var(--keys-text) !important;
    cursor: default !important;
    border-color: var(--keys-border) !important;
}

.keys-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
}

.keys-field textarea {
    resize: vertical !important;
    min-height: 100px !important;
}

/* ── Password field ─────────────────────────────────────── */
.keys-password-wrap { position: relative !important; }
.keys-password-wrap input { padding-right: 44px !important; }
.keys-eye {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: var(--keys-muted) !important;
    user-select: none !important;
    line-height: 1 !important;
}

/* ── Required star ──────────────────────────────────────── */
.req { color: var(--keys-gold) !important; }

/* ══════════════════════════════════════════════════════════
   BUTTONS — Fully isolated, no theme override possible
   ══════════════════════════════════════════════════════════ */

/* Base button reset + dark style (primary CTA) */
.keys-btn {
    display: inline-block !important;
    background: var(--keys-dark) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 28px !important;
    border: 2px solid var(--keys-dark) !important;
    border-radius: var(--keys-radius) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    vertical-align: middle !important;
}

.keys-btn:hover,
.keys-btn:focus {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}

.keys-btn:active {
    background: var(--keys-dark2) !important;
    transform: translateY(1px) !important;
}

/* Gold button — "Browse Files", "Request Profile Update", plan buttons */
.keys-btn--gold {
    background: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #ffffff !important;
}

.keys-btn--gold:hover,
.keys-btn--gold:focus {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(200,150,10,.35) !important;
}

/* Outline button — "Skip for Now", "Contact Admissions", "Save & Finish Later" */
.keys-btn--outline {
    background: transparent !important;
    border: 2px solid var(--keys-border) !important;
    color: var(--keys-dark) !important;
}

.keys-btn--outline:hover,
.keys-btn--outline:focus {
    background: var(--keys-bg-soft) !important;
    border-color: var(--keys-dark) !important;
    color: var(--keys-dark) !important;
    box-shadow: none !important;
}

/* Dark button alias */
.keys-btn--dark {
    background: var(--keys-dark) !important;
    border-color: var(--keys-dark) !important;
    color: #ffffff !important;
}

.keys-btn--dark:hover {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* Full-width block button */
.keys-btn--full {
    width: 100% !important;
    display: block !important;
}

/* Small button */
.keys-btn--sm {
    padding: 7px 16px !important;
    font-size: 12px !important;
}

/* Large button */
.keys-btn--lg {
    padding: 13px 36px !important;
    font-size: 15px !important;
}

/* Disabled */
.keys-btn:disabled,
.keys-btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Form actions row */
.keys-form__actions {
    display: flex !important;
    gap: 14px !important;
    margin-top: 28px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.keys-form__footer {
    font-size: 13px !important;
    color: var(--keys-muted) !important;
    margin-top: 16px !important;
    text-align: center !important;
}

.keys-form__footer a {
    color: var(--keys-gold) !important;
    font-weight: 500 !important;
}

/* ── Checkbox ────────────────────────────────────────────── */
.keys-checkbox-wrap { margin-top: 4px !important; }

.keys-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    color: var(--keys-text) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-checkbox-label input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    accent-color: var(--keys-gold) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* ── Notices / Alerts ───────────────────────────────────── */
.keys-notice {
    padding: 13px 18px !important;
    border-radius: var(--keys-radius) !important;
    font-size: 14px !important;
    border-left: 4px solid var(--keys-gold) !important;
    background: #fef9ec !important;
    color: var(--keys-dark) !important;
    margin: 16px 0 !important;
    line-height: 1.5 !important;
}

.keys-notice--success { border-left-color: var(--keys-success-dark) !important; background: #eafaf1 !important; color: #1e8449 !important; }
.keys-notice--error   { border-left-color: var(--keys-danger) !important; background: #fdf0ef !important; color: #922b21 !important; }
.keys-notice--warn    { border-left-color: var(--keys-warn) !important; background: #fef5ec !important; color: #7d4e00 !important; }
.keys-notice--info    { border-left-color: var(--keys-info) !important; background: #eaf4fb !important; color: #1a5276 !important; }

/* ── Badges ─────────────────────────────────────────────── */
.keys-badge {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-badge--success { background: #d4efdf !important; color: #1e8449 !important; }
.keys-badge--warn    { background: #fdebd0 !important; color: #a04000 !important; }
.keys-badge--danger  { background: #fadbd8 !important; color: #922b21 !important; }
.keys-badge--info    { background: #d6eaf8 !important; color: #1a5276 !important; }

/* ══════════════════════════════════════════════════════════
   UPLOAD / DROPZONE
   ══════════════════════════════════════════════════════════ */
.keys-doc-section { margin-bottom: 32px !important; }

.keys-doc-row {
    margin-bottom: 0 !important;
    padding-bottom: 28px !important;
    border-bottom: 1px solid var(--keys-border-light) !important;
}

.keys-doc-row:last-child { border-bottom: none !important; padding-bottom: 0 !important; }

.keys-doc-row > label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-dropzone {
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 28px 20px !important;
    text-align: center !important;
    background: var(--keys-white) !important;
    transition: border-color .2s, background .2s !important;
    cursor: pointer !important;
}

.keys-dropzone:hover,
.keys-dropzone.dragover {
    border-color: var(--keys-gold) !important;
    background: var(--keys-gold-light) !important;
}

.keys-upload-icon {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--keys-gold) !important;
    font-size: 0 !important; /* hide any text inside, rely on SVG */
}

.keys-upload-icon svg,
.keys-upload-icon img {
    width: 32px !important;
    height: 32px !important;
}

/* Upward arrow SVG placeholder if no img */
.keys-upload-icon::before {
    content: '' !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto 6px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8960A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.keys-dropzone p,
.keys-dropzone .keys-drop-text {
    font-size: 13px !important;
    color: var(--keys-muted) !important;
    margin: 0 0 4px !important;
}

.keys-divider {
    display: block !important;
    font-size: 12px !important;
    color: var(--keys-muted) !important;
    margin: 8px 0 !important;
    text-align: center !important;
}

/* The "Browse Files" button inside dropzone */
.keys-browse-btn {
    display: inline-block !important;
    background: var(--keys-gold) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
    border: 2px solid var(--keys-gold) !important;
    border-radius: var(--keys-radius) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .2s, border-color .2s !important;
    margin-top: 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.keys-browse-btn:hover {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #ffffff !important;
}

.keys-file-name {
    display: block !important;
    font-size: 13px !important;
    color: var(--keys-success-dark) !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
}

.keys-progress {
    height: 5px !important;
    background: var(--keys-border) !important;
    border-radius: 3px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
}

.keys-progress__bar {
    height: 100% !important;
    background: var(--keys-gold) !important;
    width: 0 !important;
    transition: width .3s !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */
.keys-card {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 28px 32px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--keys-shadow) !important;
}

.keys-card__title {
    font-family: 'Playfair Display', serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 20px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--keys-border-light) !important;
}

/* ── Info field (read-only, auto-filled look) ───────────── */
.keys-info-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.keys-info-field label {
    font-size: 13px !important;
    color: var(--keys-dark) !important;
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif !important;
    margin: 0 !important;
}

.keys-info-value {
    background: var(--keys-bg-soft) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--keys-text) !important;
    font-family: 'Poppins', sans-serif !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

/* Editable label badge */
.keys-editable {
    font-size: 11px !important;
    color: var(--keys-gold) !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
}

/* ══════════════════════════════════════════════════════════
   REVIEW & PLACEMENT PAGE
   ══════════════════════════════════════════════════════════ */
.keys-review-card { padding: 32px !important; }

.keys-review-docs { margin-top: 20px !important; }

.keys-review-docs > label {
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-doc-checklist {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.keys-doc-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
    color: var(--keys-text) !important;
}

.keys-doc-check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--keys-gold) !important;
    pointer-events: none !important;
}

.keys-status-box {
    margin-top: 20px !important;
    padding: 20px 24px !important;
    background: var(--keys-bg-soft) !important;
    border-radius: var(--keys-radius) !important;
    border: 1px solid var(--keys-border) !important;
}

.keys-status-box h4 {
    font-family: 'Playfair Display', serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    color: var(--keys-dark) !important;
}

.keys-status-msg {
    padding: 11px 16px !important;
    border-radius: var(--keys-radius) !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    color: var(--keys-text) !important;
    line-height: 1.5 !important;
}

.keys-status-msg--warn    { background: #fef5ec !important; border-left: 3px solid var(--keys-warn) !important; }
.keys-status-msg--info    { background: #eaf4fb !important; border-left: 3px solid var(--keys-info) !important; }
.keys-status-msg--success { background: #eafaf1 !important; border-left: 3px solid var(--keys-success-dark) !important; }

.keys-next-steps {
    margin-top: 16px !important;
    padding: 16px !important;
    background: #f5f9f5 !important;
    border-radius: var(--keys-radius) !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-review-actions { margin-top: 24px !important; }

/* ══════════════════════════════════════════════════════════
   STUDY MODE & PLAN PAGE
   ══════════════════════════════════════════════════════════ */

/* Current plan bar */
.keys-current-plan {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: var(--keys-gold-light) !important;
    border: 1px solid var(--keys-gold-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 18px 24px !important;
    margin-bottom: 40px !important;
}

.keys-current-plan__icon {
    width: 44px !important;
    height: 44px !important;
    background: var(--keys-gold) !important;
    border-radius: var(--keys-radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.keys-current-plan__info { flex: 1 !important; }

.keys-current-plan__info strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 6px !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-current-plan__meta {
    display: flex !important;
    gap: 28px !important;
    font-size: 12px !important;
    color: var(--keys-muted) !important;
    flex-wrap: wrap !important;
}

.keys-current-plan__meta strong {
    color: var(--keys-dark) !important;
    display: inline !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.keys-current-plan__status {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--keys-success-dark) !important;
}

/* Plan tabs toggle (Monthly / Yearly) */
.keys-tabs {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 28px !important;
    justify-content: center !important;
    border: none !important;
}

.keys-tab {
    padding: 9px 22px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1px solid var(--keys-border) !important;
    background: var(--keys-white) !important;
    cursor: pointer !important;
    color: var(--keys-muted) !important;
    font-family: 'Poppins', sans-serif !important;
    transition: background .2s, color .2s !important;
    border-radius: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.keys-tab:first-child { border-radius: 4px 0 0 4px !important; }
.keys-tab:last-child  { border-radius: 0 4px 4px 0 !important; border-left: none !important; }

.keys-tab.active,
.keys-tab--active {
    background: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #ffffff !important;
}

/* Plan cards grid */
.keys-plans {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 48px !important;
}

.keys-plan-card {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: var(--keys-shadow) !important;
    transition: box-shadow .2s, border-color .2s !important;
}

.keys-plan-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
    border-color: var(--keys-gold) !important;
}

.keys-plan-card.active {
    border-color: var(--keys-gold) !important;
    box-shadow: 0 0 0 2px var(--keys-gold) !important;
}

.keys-plan-card__name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 8px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-plan-card__desc {
    font-size: 13px !important;
    color: var(--keys-muted) !important;
    margin: 0 0 18px !important;
    line-height: 1.5 !important;
    flex: 0 !important;
}

.keys-plan-card__price {
    margin-bottom: 18px !important;
}

.keys-plan-card__amount {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1 !important;
}

.keys-plan-card__period {
    font-size: 13px !important;
    color: var(--keys-gold) !important;
    font-weight: 600 !important;
}

.keys-plan-card__features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    flex: 1 !important;
}

.keys-plan-card__features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--keys-text) !important;
    padding: 5px 0 !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.4 !important;
}

.keys-plan-card__features li::before {
    content: '✓' !important;
    color: var(--keys-gold) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.keys-plan-card .keys-btn {
    margin-top: auto !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    /* Upgrade Plan buttons are gold */
    background: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #fff !important;
}

.keys-plan-card .keys-btn:hover {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #fff !important;
}

/* Important info section */
.keys-info-section {
    display: flex !important;
    gap: 40px !important;
    align-items: flex-start !important;
    background: var(--keys-bg-soft) !important;
    border-radius: var(--keys-radius) !important;
    padding: 40px !important;
    margin: 40px 0 !important;
}

.keys-info-section__img {
    width: 280px !important;
    flex-shrink: 0 !important;
    border-radius: var(--keys-radius) !important;
    overflow: hidden !important;
}

.keys-info-section__img img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: var(--keys-radius) !important;
}

.keys-info-section__content h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 16px !important;
}

.keys-info-section__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.keys-info-section__list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: var(--keys-text) !important;
    padding: 6px 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-info-section__list li::before {
    content: '●' !important;
    color: var(--keys-gold) !important;
    font-size: 8px !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
}

/* CTA bar at bottom of plan page */
.keys-cta-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 20px 28px !important;
    margin-top: 20px !important;
    box-shadow: var(--keys-shadow) !important;
}

.keys-cta-bar__text h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-cta-bar__text p {
    font-size: 13px !important;
    color: var(--keys-muted) !important;
    margin: 0 !important;
}

.keys-cta-bar__actions {
    display: flex !important;
    gap: 12px !important;
}

/* ══════════════════════════════════════════════════════════
   STUDENT PROFILE PAGE
   ══════════════════════════════════════════════════════════ */

/* Profile layout: main content + sidebar */
.keys-profile-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 24px !important;
    align-items: start !important;
}

/* Profile header / hero */
.keys-profile-hero {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--keys-shadow) !important;
}

.keys-profile-hero__img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--keys-border) !important;
    flex-shrink: 0 !important;
    background: var(--keys-bg-soft) !important;
}

.keys-profile-hero__info { flex: 1 !important; }

.keys-profile-hero__name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 4px !important;
}

.keys-profile-hero__meta {
    display: flex !important;
    gap: 20px !important;
    font-size: 12px !important;
    color: var(--keys-muted) !important;
    flex-wrap: wrap !important;
}

.keys-profile-hero__meta span {
    font-weight: 500 !important;
    color: var(--keys-text) !important;
}

/* Quick Stats sidebar card */
.keys-stats-card {
    background: var(--keys-gold) !important;
    border-radius: var(--keys-radius) !important;
    padding: 20px !important;
    color: #fff !important;
    margin-bottom: 16px !important;
}

.keys-stats-card__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.85) !important;
    margin-bottom: 14px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-stat-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-stat-row:last-child { border-bottom: none !important; }

.keys-stat-row__label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255,255,255,.8) !important;
}

.keys-stat-row__value {
    font-weight: 700 !important;
    color: #fff !important;
    font-size: 14px !important;
}

/* Notification prefs */
.keys-notif-card {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

.keys-notif-card__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin-bottom: 14px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-notif-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--keys-border-light) !important;
}

.keys-notif-row:last-child { border-bottom: none !important; }

.keys-notif-row__info { flex: 1 !important; }

.keys-notif-row__label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-notif-row__sub {
    font-size: 11px !important;
    color: var(--keys-muted) !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Toggle switch */
.keys-toggle {
    position: relative !important;
    width: 42px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

.keys-toggle input { opacity: 0 !important; width: 0 !important; height: 0 !important; }

.keys-toggle__slider {
    position: absolute !important;
    cursor: pointer !important;
    inset: 0 !important;
    background: var(--keys-border) !important;
    border-radius: 24px !important;
    transition: .3s !important;
}

.keys-toggle__slider::before {
    content: '' !important;
    position: absolute !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: .3s !important;
}

.keys-toggle input:checked + .keys-toggle__slider {
    background: var(--keys-gold) !important;
}

.keys-toggle input:checked + .keys-toggle__slider::before {
    transform: translateX(18px) !important;
}

/* Actions sidebar card */
.keys-actions-card {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

.keys-actions-card__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin-bottom: 14px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-actions-card .keys-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    padding: 10px 16px !important;
}

.keys-actions-card .keys-btn:last-child { margin-bottom: 0 !important; }

.keys-actions-card__hint {
    font-size: 11px !important;
    color: var(--keys-muted) !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ── Document list (profile page) ───────────────────────── */
.keys-doc-list { margin-top: 8px !important; }

.keys-doc-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--keys-border-light) !important;
}

.keys-doc-list-item:last-child { border-bottom: none !important; }

.keys-doc-list-item__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.keys-doc-list-item__icon--pdf { background: #fde8e8 !important; }
.keys-doc-list-item__icon--img { background: #e8e8fd !important; }
.keys-doc-list-item__icon--green { background: #e8fde8 !important; }

.keys-doc-list-item__info { flex: 1 !important; min-width: 0 !important; }

.keys-doc-list-item__name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--keys-dark) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-doc-list-item__meta {
    font-size: 11px !important;
    color: var(--keys-muted) !important;
    margin-top: 2px !important;
}

.keys-doc-list-item__actions {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* View/Download buttons in document list */
.keys-doc-list-item__actions .keys-btn {
    margin: 0 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* ══════════════════════════════════════════════════════════
   ENROLLMENT CONFIRMATION PAGE
   ══════════════════════════════════════════════════════════ */

.keys-confirm-hero {
    text-align: center !important;
    padding: 40px 20px !important;
    position: relative !important;
}

.keys-confirm-hero .keys-heading { margin-bottom: 14px !important; }

.keys-confirm-card {
    max-width: 520px !important;
    margin: 0 auto 24px !important;
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 32px 36px !important;
    box-shadow: var(--keys-shadow) !important;
}

.keys-confirm-card__title {
    font-family: 'Playfair Display', serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .keys-profile-layout { grid-template-columns: 1fr !important; }
    .keys-plans { grid-template-columns: 1fr !important; }
    .keys-form { padding: 24px 20px !important; }
}

@media (max-width: 640px) {
    .keys-wrap { padding: 20px 14px 50px !important; }
    .keys-heading { font-size: 28px !important; }
    .keys-form__grid,
    .keys-form__grid--3 { grid-template-columns: 1fr !important; }
    .keys-profile-hero { flex-direction: column !important; text-align: center !important; }
    .keys-cta-bar { flex-direction: column !important; gap: 16px !important; }
    .keys-current-plan { flex-direction: column !important; }
    .keys-info-section { flex-direction: column !important; }
    .keys-info-section__img { width: 100% !important; }
    .keys-form__actions { flex-direction: column !important; }
    .keys-form__actions .keys-btn { width: 100% !important; }
}

/* ── Spinner ─────────────────────────────────────────────── */
.keys-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255,255,255,.3) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: keys-spin .7s linear infinite !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

@keyframes keys-spin { to { transform: rotate(360deg); } }

/* ── Loading state on buttons ───────────────────────────── */
.keys-btn.loading { pointer-events: none !important; opacity: .7 !important; }

/* ══════════════════════════════════════════════════════════
   OVERRIDE: "Browse Files" buttons inside dropzones = GOLD
   ══════════════════════════════════════════════════════════ */
.keys-dropzone .keys-btn,
.keys-dropzone button.keys-btn,
.keys-dropzone .keys-btn--outline,
.keys-dropzone .keys-browse-btn {
    background: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #ffffff !important;
    margin-top: 8px !important;
}

.keys-dropzone .keys-btn:hover,
.keys-dropzone button.keys-btn:hover,
.keys-dropzone .keys-browse-btn:hover {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   NUCLEAR WP THEME OVERRIDE
   Force-reset any WP/theme button styling that causes red
   ══════════════════════════════════════════════════════════ */
.keys-wrap button.keys-btn,
.keys-wrap a.keys-btn,
.keys-wrap input.keys-btn,
.keys-wrap .keys-btn {
    /* Force remove any theme color */
    background-color: var(--keys-dark) !important;
    color: #ffffff !important;
    border: 2px solid var(--keys-dark) !important;
    /* Remove all inherited WP styles */
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: var(--keys-radius) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 28px !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: background .2s, border-color .2s !important;
}

.keys-wrap button.keys-btn--gold,
.keys-wrap a.keys-btn--gold,
.keys-wrap .keys-btn--gold {
    background-color: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #ffffff !important;
}

.keys-wrap button.keys-btn--outline,
.keys-wrap a.keys-btn--outline,
.keys-wrap .keys-btn--outline {
    background-color: transparent !important;
    border-color: #cccccc !important;
    color: var(--keys-dark) !important;
}

.keys-wrap button.keys-btn--outline:hover,
.keys-wrap a.keys-btn--outline:hover {
    background-color: var(--keys-bg-soft) !important;
    border-color: var(--keys-dark) !important;
    color: var(--keys-dark) !important;
}

/* Dropzone browse button override (takes priority) */
.keys-wrap .keys-dropzone button.keys-btn,
.keys-wrap .keys-dropzone a.keys-btn,
.keys-wrap .keys-dropzone .keys-btn {
    background-color: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #ffffff !important;
    padding: 9px 22px !important;
    font-size: 13px !important;
}

/* Plan upgrade buttons */
.keys-wrap .keys-plan-card button.keys-btn,
.keys-wrap .keys-plan-card a.keys-btn,
.keys-wrap .keys-plan-card .keys-btn {
    background-color: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #ffffff !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}

/* "Change Plan" button */
.keys-current-plan .keys-btn {
    background-color: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #ffffff !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   UPGRADE / STUDY MODE & PLAN PAGE
   ══════════════════════════════════════════════════════════ */

/* Current plan bar */
.keys-current-plan-bar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #FDF8E8 !important;
    border: 1px solid #E8D48A !important;
    border-radius: var(--keys-radius) !important;
    padding: 18px 22px !important;
    margin-bottom: 0 !important;
}

.keys-current-plan-bar__icon {
    width: 44px !important;
    height: 44px !important;
    background: var(--keys-gold) !important;
    border-radius: var(--keys-radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}

.keys-current-plan-bar__body { flex: 1 !important; min-width: 0 !important; }

.keys-current-plan-bar__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin-bottom: 8px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-current-plan-bar__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.keys-current-plan-bar__meta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.keys-current-plan-bar__meta-label {
    font-size: 11px !important;
    color: var(--keys-muted) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-current-plan-bar__meta-value {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-current-plan-bar__status {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--keys-success-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Plan toggle (Monthly/Yearly tabs) */
.keys-plan-toggle-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 20px 0 28px !important;
}

.keys-plan-toggle {
    display: inline-flex !important;
    background: var(--keys-bg-soft) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: 6px !important;
    padding: 3px !important;
    gap: 3px !important;
}

.keys-plan-toggle__btn {
    padding: 8px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    border: none !important;
    background: transparent !important;
    color: var(--keys-muted) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background .2s, color .2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.keys-plan-toggle__btn.active {
    background: var(--keys-gold) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(200,150,10,.2) !important;
}

/* Plan cards grid */
.keys-plan-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 0 !important;
}

.keys-plan-card-new {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 26px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: var(--keys-shadow) !important;
    position: relative !important;
    transition: box-shadow .2s, border-color .2s !important;
}

.keys-plan-card-new:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
}

.keys-plan-card-new--active {
    border: 2px solid var(--keys-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,150,10,.08) !important;
}

.keys-plan-card-new__badge {
    display: inline-block !important;
    background: var(--keys-gold) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-bottom: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    width: fit-content !important;
}

.keys-plan-card-new__name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 8px !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.3 !important;
}

.keys-plan-card-new__desc {
    font-size: 13px !important;
    color: var(--keys-muted) !important;
    margin: 0 0 18px !important;
    line-height: 1.55 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Price: large number + gold /per month */
.keys-plan-card-new__price {
    margin-bottom: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
}

.keys-plan-price-amount {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1 !important;
}

.keys-plan-price-period {
    font-size: 13px !important;
    color: var(--keys-gold) !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Features list */
.keys-plan-card-new__features {
    flex: 1 !important;
    margin-bottom: 20px !important;
}

.keys-plan-card-new__features-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--keys-dark) !important;
    display: block !important;
    margin-bottom: 10px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-plan-card-new__features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.keys-plan-card-new__features-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--keys-text) !important;
    padding: 4px 0 !important;
    line-height: 1.45 !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-plan-card-new__features-list li::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C8960A'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

/* Plan card button */
.keys-plan-card-new .keys-btn {
    margin-top: auto !important;
    background: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #fff !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 12px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.keys-plan-card-new .keys-btn:hover {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #fff !important;
}

/* Important Information section */
.keys-info-section-wrap {
    display: flex !important;
    gap: 48px !important;
    align-items: flex-start !important;
    background: #FAF9F5 !important;
    border-radius: var(--keys-radius) !important;
    padding: 48px 40px !important;
    margin: 48px 0 !important;
}

.keys-info-section-img {
    width: 280px !important;
    flex-shrink: 0 !important;
    border-radius: var(--keys-radius) !important;
    overflow: hidden !important;
}

.keys-info-section-img img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--keys-radius) !important;
}

.keys-info-section-img--placeholder {
    height: 220px !important;
    background: var(--keys-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.keys-info-section-img--placeholder .keys-info-section-img__inner {
    text-align: center !important;
}

.keys-info-section-content { flex: 1 !important; }

.keys-info-section-heading {
    font-family: 'Playfair Display', serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 20px !important;
    line-height: 1.2 !important;
}

.keys-info-section-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.keys-info-section-list li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: var(--keys-text) !important;
    padding: 7px 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-info-section-list li::before {
    content: '●' !important;
    color: var(--keys-gold) !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
}

/* CTA bar at bottom */
.keys-cta-bar-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 22px 28px !important;
    box-shadow: var(--keys-shadow) !important;
    gap: 20px !important;
    margin-top: 0 !important;
}

.keys-cta-bar-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 4px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-cta-bar-sub {
    font-size: 13px !important;
    color: var(--keys-muted) !important;
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-cta-bar-actions {
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* Change plan button override */
.keys-change-plan-btn {
    flex-shrink: 0 !important;
    background: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
    color: #fff !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    border-radius: var(--keys-radius) !important;
}

/* ══════════════════════════════════════════════════════════
   STUDENT PROFILE PAGE
   ══════════════════════════════════════════════════════════ */

/* Two-column layout */
.keys-profile-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 24px !important;
    align-items: start !important;
}

.keys-profile-main { min-width: 0 !important; }
.keys-profile-sidebar { min-width: 0 !important; }

/* Profile Hero Card */
.keys-profile-hero-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--keys-shadow) !important;
}

/* Profile photo */
.keys-profile-photo-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 72px !important;
    height: 72px !important;
    display: inline-block !important;
}

.keys-profile-photo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--keys-border) !important;
    display: block !important;
}

.keys-profile-photo-placeholder {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: var(--keys-gold-light) !important;
    color: var(--keys-gold-hover) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--keys-gold-border) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-photo-upload-btn {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 22px !important;
    height: 22px !important;
    background: var(--keys-gold) !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
    transition: background .2s !important;
}

.keys-photo-upload-btn:hover {
    background: var(--keys-gold-hover) !important;
}

/* Profile hero info */
.keys-profile-hero-info { flex: 1 !important; min-width: 0 !important; }

.keys-profile-hero-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 8px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-profile-hero-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.keys-profile-hero-meta-row {
    display: flex !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-profile-hero-meta-label { color: var(--keys-muted) !important; }
.keys-profile-hero-meta-value { color: var(--keys-text) !important; font-weight: 500 !important; }
.keys-profile-hero-uid { font-family: monospace !important; font-size: 12px !important; }

/* Profile Sections */
.keys-profile-section {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 24px 26px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--keys-shadow) !important;
}

.keys-profile-section-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Profile form grid */
.keys-profile-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 20px !important;
    margin-bottom: 16px !important;
}

.keys-profile-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.keys-profile-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Editable tag (green checkmark label) */
.keys-editable-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--keys-success-dark) !important;
}

/* Profile input fields */
.keys-profile-input {
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    color: var(--keys-text) !important;
    background: var(--keys-white) !important;
    outline: none !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .2s !important;
    box-shadow: none !important;
}

.keys-profile-input:focus {
    border-color: var(--keys-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,150,10,.1) !important;
}

/* Read-only fields — lighter bg, slightly muted */
.keys-profile-input--readonly {
    background: #F8F8F8 !important;
    color: var(--keys-text) !important;
    cursor: default !important;
}

/* Save Changes button (dark, matches design) */
.keys-save-btn {
    display: inline-block !important;
    background: var(--keys-dark) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    border: 2px solid var(--keys-dark) !important;
    border-radius: var(--keys-radius) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    transition: background .2s !important;
    text-decoration: none !important;
}

.keys-save-btn:hover {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* Documents list */
.keys-profile-docs {
    display: flex !important;
    flex-direction: column !important;
}

.keys-profile-doc-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--keys-border-light) !important;
}

.keys-profile-doc-row:last-child { border-bottom: none !important; }

.keys-profile-doc-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.keys-profile-doc-info { flex: 1 !important; min-width: 0 !important; }

.keys-profile-doc-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--keys-dark) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-profile-doc-meta {
    font-size: 11px !important;
    color: var(--keys-muted) !important;
    margin-top: 2px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-profile-doc-actions {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* View and Download buttons (gold, matching design) */
.keys-doc-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 14px !important;
    border-radius: var(--keys-radius) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .2s, color .2s !important;
    -webkit-appearance: none !important;
    white-space: nowrap !important;
}

.keys-doc-action-btn--view,
.keys-doc-action-btn--view:link,
.keys-doc-action-btn--view:visited {
    background: var(--keys-gold) !important;
    color: #ffffff !important;
    border: 1.5px solid var(--keys-gold) !important;
    text-decoration: none !important;
}

.keys-doc-action-btn--view:hover,
.keys-doc-action-btn--view:focus,
.keys-doc-action-btn--view:active {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.keys-doc-action-btn--download,
.keys-doc-action-btn--download:link,
.keys-doc-action-btn--download:visited {
    background: var(--keys-gold) !important;
    color: #ffffff !important;
    border: 1.5px solid var(--keys-gold) !important;
    text-decoration: none !important;
}

.keys-doc-action-btn--download:hover,
.keys-doc-action-btn--download:focus,
.keys-doc-action-btn--download:active {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ─── SIDEBAR CARDS ─── */
.keys-sidebar-card {
    background: var(--keys-white) !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--keys-shadow) !important;
}

.keys-sidebar-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--keys-dark) !important;
    margin: 0 0 14px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Notification list */
.keys-notif-list { display: flex !important; flex-direction: column !important; }

.keys-notif-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--keys-border-light) !important;
    gap: 12px !important;
}

.keys-notif-item:last-child { border-bottom: none !important; }

.keys-notif-item-info { flex: 1 !important; }

.keys-notif-item-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--keys-dark) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-notif-item-sub {
    font-size: 11px !important;
    color: var(--keys-muted) !important;
    margin-top: 2px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Toggle switch */
.keys-toggle-switch {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.keys-toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

.keys-toggle-slider {
    position: absolute !important;
    inset: 0 !important;
    background: #D1D5DB !important;
    border-radius: 24px !important;
    transition: background .25s !important;
    cursor: pointer !important;
}

.keys-toggle-slider::before {
    content: '' !important;
    position: absolute !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform .25s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
}

.keys-toggle-switch input:checked + .keys-toggle-slider {
    background: var(--keys-gold) !important;
}

.keys-toggle-switch input:checked + .keys-toggle-slider::before {
    transform: translateX(20px) !important;
}

/* Quick Stats (GOLD background — matching design exactly) */
.keys-quick-stats-card {
    background: var(--keys-gold) !important;
    border-color: var(--keys-gold) !important;
}

.keys-quick-stats-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.9) !important;
    margin: 0 0 12px !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-quick-stat-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

.keys-quick-stat-row:last-child { border-bottom: none !important; }

.keys-quick-stat-icon {
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,.15) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,.9) !important;
    flex-shrink: 0 !important;
}

.keys-quick-stat-label {
    flex: 1 !important;
    font-size: 13px !important;
    color: rgba(255,255,255,.8) !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-quick-stat-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Sidebar action buttons */
.keys-sidebar-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.keys-sidebar-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 10px 14px !important;
    border-radius: var(--keys-radius) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .2s, color .2s, border-color .2s !important;
    -webkit-appearance: none !important;
    border: none !important;
}

.keys-sidebar-action-btn--outline {
    background: transparent !important;
    border: 1.5px solid var(--keys-border) !important;
    color: var(--keys-dark) !important;
}

.keys-sidebar-action-btn--outline:hover {
    border-color: var(--keys-dark) !important;
    background: var(--keys-bg-soft) !important;
    color: var(--keys-dark) !important;
    text-decoration: none !important;
}

.keys-sidebar-action-btn--gold {
    background: var(--keys-gold) !important;
    border: 1.5px solid var(--keys-gold) !important;
    color: #ffffff !important;
}

.keys-sidebar-action-btn--gold:hover {
    background: var(--keys-gold-hover) !important;
    border-color: var(--keys-gold-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.keys-sidebar-hint {
    font-size: 11px !important;
    color: var(--keys-muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Responsive for profile and plan */
@media (max-width: 1000px) {
    .keys-plan-cards-grid { grid-template-columns: 1fr !important; }
    .keys-profile-layout { grid-template-columns: 1fr !important; }
    .keys-profile-sidebar { order: -1 !important; }
    .keys-info-section-wrap { flex-direction: column !important; }
    .keys-info-section-img { width: 100% !important; }
    .keys-current-plan-bar { flex-direction: column !important; align-items: flex-start !important; }
}

@media (max-width: 640px) {
    .keys-profile-grid { grid-template-columns: 1fr !important; }
    .keys-plan-toggle__btn { padding: 8px 14px !important; font-size: 12px !important; }
    .keys-cta-bar-wrap { flex-direction: column !important; }
    .keys-cta-bar-actions { width: 100% !important; }
    .keys-cta-bar-actions .keys-btn { flex: 1 !important; justify-content: center !important; }
}

/* ══ CHECKBOX FIX — must override any theme that hides checkboxes ══ */
.keys-wrap input[type="checkbox"],
.keys-wrap input[type="radio"],
.keys-checkbox-label input[type="checkbox"],
.keys-checkbox-label input[type="radio"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 17px !important;
    height: 17px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: static !important;
    display: inline-block !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    accent-color: #C8960A !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #ccc !important;
    background: #fff !important;
    border-radius: 3px !important;
}

.keys-wrap input[type="checkbox"]:checked,
.keys-checkbox-label input[type="checkbox"]:checked {
    background: #C8960A !important;
    border-color: #C8960A !important;
}

/* Disabled checkboxes (doc checklist etc) */
.keys-wrap input[type="checkbox"][disabled] {
    cursor: default !important;
    opacity: 0.6 !important;
}

/* ══════════════════════════════════════════════════════════
   FAMILY REGISTER — Privacy checkbox row
   ══════════════════════════════════════════════════════════ */
.keys-privacy-row {
    margin: 20px 0 18px !important;
}

.keys-privacy-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: var(--keys-text) !important;
    font-family: 'Poppins', sans-serif !important;
    user-select: none !important;
}

.keys-privacy-label input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    position: static !important;
    flex-shrink: 0 !important;
    accent-color: #C8960A !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #bbb !important;
    background: #fff !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

.keys-privacy-label a {
    color: var(--keys-gold) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.keys-privacy-label a:hover { text-decoration: underline !important; }

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE — Clean centered card layout
   ══════════════════════════════════════════════════════════ */
.keys-login-wrap {
    max-width: 480px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 36px 40px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.07) !important;
}

.keys-login-form .keys-field label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--keys-dark) !important;
    margin-bottom: 5px !important;
    display: block !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-login-form .keys-field input {
    width: 100% !important;
    border: 1px solid var(--keys-border) !important;
    border-radius: var(--keys-radius) !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    color: var(--keys-text) !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.keys-login-form .keys-field input:focus {
    border-color: var(--keys-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,150,10,.1) !important;
}

.keys-login-form .keys-password-wrap {
    position: relative !important;
}
.keys-login-form .keys-password-wrap input {
    padding-right: 44px !important;
}
.keys-login-form .keys-eye {
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: #999 !important;
    line-height: 1 !important;
    user-select: none !important;
    pointer-events: auto !important;
}

/* Remember me + forgot password row */
.keys-login-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.keys-login-remember {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--keys-text) !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
}

.keys-login-remember input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    accent-color: #C8960A !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
}

.keys-login-forgot {
    font-size: 13px !important;
    color: var(--keys-gold) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif !important;
}
.keys-login-forgot:hover { text-decoration: underline !important; }

/* OR divider */
.keys-login-or {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 18px 0 !important;
    font-size: 13px !important;
    color: var(--keys-muted) !important;
    font-family: 'Poppins', sans-serif !important;
}
.keys-login-or::before,
.keys-login-or::after {
    content: '' !important;
    flex: 1 !important;
    border-top: 1px solid var(--keys-border) !important;
}

/* Password eye toggle — fix for keys-eye inside password wrap */
.keys-password-wrap {
    position: relative !important;
}
.keys-password-wrap input {
    padding-right: 44px !important;
}
.keys-password-wrap .keys-eye {
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: var(--keys-muted) !important;
    user-select: none !important;
    pointer-events: auto !important;
    line-height: 1 !important;
    z-index: 2 !important;
    background: transparent !important;
    border: none !important;
}

@media (max-width: 520px) {
    .keys-login-wrap { padding: 24px 18px !important; }
}

/* ── Profile photo fixes ────────────────────────────────────────── */
/* Hidden img must not reserve space */
.keys-profile-photo-wrap img.keys-profile-photo[src=""],
.keys-profile-photo-wrap img.keys-profile-photo:not([src]) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

/* Edit pencil button — keep inside the circle boundary */
.keys-photo-upload-btn {
    position: absolute !important;
    bottom: 1px !important;
    right: 1px !important;
    width: 22px !important;
    height: 22px !important;
    background: var(--keys-gold) !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
    transition: background .2s !important;
    z-index: 2 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

/* Nuclear fix: ensure ALL link/anchor text inside .keys-profile-docs is white when on gold btn */
.keys-wrap .keys-profile-docs a.keys-doc-action-btn,
.keys-wrap .keys-profile-docs a.keys-doc-action-btn:link,
.keys-wrap .keys-profile-docs a.keys-doc-action-btn:visited,
.keys-wrap .keys-profile-docs a.keys-doc-action-btn--view,
.keys-wrap .keys-profile-docs a.keys-doc-action-btn--download {
    color: #ffffff !important;
    background-color: var(--keys-gold) !important;
    text-decoration: none !important;
}

.keys-wrap .keys-profile-docs a.keys-doc-action-btn:hover,
.keys-wrap .keys-profile-docs a.keys-doc-action-btn:focus {
    color: #ffffff !important;
    background-color: var(--keys-gold-hover) !important;
    text-decoration: none !important;
}