/* profile.css — Profile page: identity (avatar card) + 3 stacked settings
   cards (Personal Information / IELTS Goal / Learning Preferences) + a
   lightweight Account & Security section at the bottom. Recent History and
   attempt counts live on My Progress now, not here — Profile is
   identity + goal + preferences, not performance data. */
.profile-main { max-width: 900px; }
.profile-main > h1 { margin: 0 0 2px; font-size: 24px; }
.profile-subtitle { color: var(--ielts-text-muted); font-size: 13.5px; margin: 0 0 22px; }

.profile-layout-v2 { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) {
  .profile-layout-v2 { grid-template-columns: 1fr; }
}
.profile-main-col { display: flex; flex-direction: column; gap: 16px; }

/* ---- Avatar card (left column) ---- */
.profile-card {
  background: var(--ielts-white);
  border: 1px solid var(--ielts-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.profile-card-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--unio-yellow);
  color: var(--unio-dark);
  font-weight: 800;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.profile-card-name { font-size: 16px; font-weight: 700; margin: 0; }
.profile-card-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--ielts-blue-light);
  color: var(--unio-blue);
  font-size: 11px;
  font-weight: 700;
}
.profile-card-member-since { font-size: 11.5px; color: var(--ielts-text-muted); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ielts-border); }

/* ---- Section cards (Personal Information / IELTS Goal / Learning
   Preferences) — same shell, different body content. ---- */
.profile-section-card {
  background: var(--ielts-white);
  border: 1px solid var(--ielts-border);
  border-radius: 12px;
  padding: 20px 22px;
}
.profile-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.profile-section-head h3 { margin: 0; font-size: 15px; }
.profile-section-edit-btn {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--unio-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.profile-section-edit-btn:hover { text-decoration: underline; }

.profile-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ielts-border);
  font-size: 13.5px;
}
.profile-info-row:last-child { border-bottom: none; }
.profile-info-label { color: var(--ielts-text-muted); flex-shrink: 0; }
.profile-info-value { font-weight: 600; color: var(--ielts-text); text-align: right; }
.profile-info-value.profile-info-empty { color: var(--ielts-text-muted); font-weight: 500; font-style: italic; }

.profile-goal-empty { padding: 6px 0 14px; color: var(--ielts-text-muted); font-size: 13.5px; }
.profile-goal-overall { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ielts-border); }
.profile-goal-overall-label { font-size: 13.5px; color: var(--ielts-text-muted); }
.profile-goal-overall-value { font-size: 22px; font-weight: 800; color: var(--unio-blue); }
.profile-goal-skills { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
.profile-goal-skill-chip {
  flex: 1 1 auto;
  min-width: 64px;
  text-align: center;
  background: var(--ielts-bg);
  border-radius: 8px;
  padding: 6px 10px;
}
.profile-goal-skill-chip-label { font-size: 10.5px; font-weight: 700; color: var(--ielts-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.profile-goal-skill-chip-value { font-size: 15px; font-weight: 800; color: var(--ielts-text); }
.profile-goal-focus { padding-top: 10px; border-top: 1px solid var(--ielts-border); font-size: 12.5px; color: var(--ielts-text-muted); }
.profile-goal-focus strong { color: var(--ielts-text); font-weight: 700; }

/* ---- Account & Security — same card shell as the settings cards above
   (not a bare text row), icon+label rows so each action reads as a real
   control; the destructive one sits below a divider, visually a step away
   from the routine actions. ---- */
.profile-security-card { margin-top: 16px; }
.profile-security-list { display: flex; flex-direction: column; }
.profile-security-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 6px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ielts-text);
  text-align: left;
  cursor: pointer;
}
.profile-security-item:hover { background: var(--ielts-bg); }
.profile-security-item .icon { width: 16px; height: 16px; color: var(--ielts-text-muted); flex-shrink: 0; }
.profile-security-item-danger { color: var(--ielts-incorrect); }
.profile-security-item-danger .icon { color: var(--ielts-incorrect); }
.profile-security-item-danger:hover { background: #fdecec; }
/* Dark mode — hardcoded light pastel, no theme-aware variant. */
body.dark-theme .profile-security-item-danger:hover { background: #3a2326; }
.profile-security-divider { height: 1px; background: var(--ielts-border); margin: 6px 0; }

/* ---- Modal form controls (Edit Personal Info / Goal / Preferences /
   Change Password / Delete Account) — share modal-box/.modal-actions from
   base.css; these are just the form-field styles inside. ---- */
.profile-form-row { margin-bottom: 14px; }
.profile-form-row label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ielts-text-secondary); margin-bottom: 5px; }
.profile-form-row input[type="text"],
.profile-form-row input[type="date"],
.profile-form-row input[type="number"],
.profile-form-row input[type="password"],
.profile-form-row select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--ielts-border);
  border-radius: 8px;
  font-size: 13.5px;
  background: var(--ielts-white);
  color: var(--ielts-text);
}
.profile-form-note { font-size: 11.5px; color: var(--ielts-text-muted); margin-top: 4px; }
.profile-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.profile-form-error { color: var(--ielts-incorrect); font-size: 12.5px; margin-top: -6px; margin-bottom: 12px; }
.profile-form-error.hidden { display: none; }
.profile-delete-confirm-btn { background: var(--ielts-incorrect); color: #fff; border-color: var(--ielts-incorrect); }
.profile-delete-confirm-btn:hover { opacity: 0.9; }

/* Password recovery starts inside Change Password, but the actual proof of
   ownership is the one-time Directus link delivered to the account email. */
.profile-password-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; }
.profile-password-label-row label { margin:0; }
.profile-forgot-password-btn { flex:0 0 auto; padding:2px 0; border:0; color:var(--unio-blue); background:none; font:inherit; font-size:11.5px; font-weight:750; cursor:pointer; }
.profile-forgot-password-btn:hover { text-decoration:underline; }
.profile-recovery-head { display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.profile-recovery-head h2 { margin:2px 0 0; padding:0; }
.profile-recovery-icon,
.profile-recovery-success-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:13px; color:var(--unio-blue); background:var(--ielts-blue-light); }
.profile-recovery-icon .icon,
.profile-recovery-success-icon .icon { width:19px; height:19px; }
.profile-recovery-kicker { color:#98700a; font-size:9.5px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.profile-recovery-intro { margin:0 0 17px; color:var(--ielts-text-secondary); font-size:13px; line-height:1.55; }
.profile-recovery-channel { display:flex; align-items:center; gap:11px; margin-bottom:16px; padding:12px; border:1px solid color-mix(in srgb,var(--unio-blue) 30%,var(--ielts-border)); border-radius:12px; background:linear-gradient(145deg,var(--ielts-blue-light),var(--ielts-white)); }
.profile-recovery-channel-icon { display:grid; width:32px; height:32px; flex:0 0 32px; place-items:center; border-radius:9px; color:var(--unio-blue); background:var(--ielts-white); }
.profile-recovery-channel-icon .icon { width:15px; height:15px; }
.profile-recovery-channel > span:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
.profile-recovery-channel strong { color:var(--ielts-text); font-size:12.5px; }
.profile-recovery-channel small { color:var(--ielts-text-muted); font-size:10.5px; }
.profile-recovery-channel > .icon { width:18px; height:18px; padding:3px; border-radius:50%; color:#fff; background:#2e8a6e; }
.profile-recovery-field { margin-bottom:12px; }
.profile-recovery-security-note { display:flex; align-items:flex-start; gap:8px; margin:0 0 15px; padding:9px 10px; border-radius:9px; color:var(--ielts-text-muted); background:var(--ielts-bg); font-size:10.5px; line-height:1.45; }
.profile-recovery-security-note .icon { width:13px; height:13px; flex:0 0 13px; margin-top:1px; }
.profile-recovery-actions { align-items:center; }
.profile-recovery-actions .btn-primary { min-width:174px; justify-content:center; }
.profile-recovery-success { display:flex; flex-direction:column; align-items:center; padding:8px 4px 2px; text-align:center; }
.profile-recovery-success-icon { margin-bottom:13px; color:#237b60; background:#e3f4ee; }
.profile-recovery-success h2 { margin:0 0 8px; padding:0; }
.profile-recovery-success p { margin:0; color:var(--ielts-text-secondary); font-size:13px; line-height:1.55; }
.profile-recovery-success > span:not(.profile-recovery-success-icon) { margin:10px 0 18px; color:var(--ielts-text-muted); font-size:11px; }
.profile-recovery-success .btn { min-width:125px; justify-content:center; }

.profile-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.profile-toggle-pill { display: inline-flex; border: 1px solid var(--ielts-border); border-radius: 20px; padding: 2px; }
.profile-toggle-pill button {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 18px;
  border: none;
  background: none;
  color: var(--ielts-text-muted);
  cursor: pointer;
}
.profile-toggle-pill button.active { background: var(--unio-dark); color: #fff; }

.profile-focus-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.profile-focus-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* Mobile-only settings (dark mode / language) — the desktop header already
   has these; the mobile drawer menu doesn't, so they live here instead on
   small screens. Logout is no longer duplicated here — it's a real,
   always-visible Account & Security action now. */
.profile-mobile-settings { display: none; }
@media (max-width: 760px) {
  .profile-mobile-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    background: var(--ielts-white);
    border: 1px solid var(--ielts-border);
    border-radius: 12px;
    padding: 8px;
  }
  .profile-settings-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ielts-text);
    text-align: left;
    cursor: pointer;
  }
  .profile-settings-row:not(.profile-settings-lang):hover { background: var(--ielts-bg); }
  .profile-settings-lang { justify-content: space-between; cursor: default; }
  .profile-settings-row .icon { width: 17px; height: 17px; color: var(--ielts-text-muted); flex-shrink: 0; }
}

/* ------------------------------------------------------------------
   Clear profile workspace: identity/security rail + focused content.
   ------------------------------------------------------------------ */
.profile-main { max-width: 1080px; padding-top: 28px; padding-bottom: 60px; }
.profile-main > h1,
.profile-main > .profile-subtitle { display: none; }

.profile-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 170px;
  margin-bottom: 22px;
  padding: 30px 35% 30px 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--unio-yellow) 42%, var(--ielts-border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 84% 26%, rgba(244, 190, 42, 0.28), transparent 27%),
    linear-gradient(132deg, #fff6d8, #fffdf7 54%, #eaf4ff);
  box-shadow: 0 14px 38px rgba(31, 39, 54, 0.075);
}
.profile-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -66px;
  bottom: -102px;
  width: 170px;
  height: 170px;
  border: 26px solid rgba(227, 166, 34, 0.1);
  border-radius: 50%;
}
.profile-hero-copy { position: relative; z-index: 2; }
.profile-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #87650b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.profile-hero-kicker .icon { width: 15px; height: 15px; }
.profile-hero h1 { margin: 0; color: #20293a; font-family: var(--font-heading); font-size: clamp(29px, 4vw, 41px); line-height: 1.08; }
.profile-hero .profile-subtitle { max-width: 540px; margin: 10px 0 0; color: #606a7a; font-size: 13.5px; line-height: 1.55; }
.profile-hero-visual { position: absolute; inset: 0 0 0 auto; width: 35%; pointer-events: none; }
.profile-hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 185px;
  height: 112px;
  border: 1px dashed rgba(48, 93, 144, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  animation: profileOrbit 17s linear infinite;
}
.profile-hero-orbit::before,
.profile-hero-orbit::after { content:""; position:absolute; border-radius:50%; box-shadow:0 4px 10px rgba(40,48,63,.13); }
.profile-hero-orbit::before { width:11px; height:11px; top:5px; left:38px; background:#df6847; }
.profile-hero-orbit::after { width:8px; height:8px; right:20px; bottom:15px; background:#377cb8; }
.profile-hero-mascot {
  position: absolute;
  z-index: 2;
  right: 48px;
  bottom: -18px;
  width: 128px;
  max-height: 165px;
  object-fit: contain;
  filter: drop-shadow(0 13px 11px rgba(31, 42, 58, 0.15));
  transform-origin: 50% 100%;
  animation: profileMascotFloat 3.8s ease-in-out infinite;
}

.profile-layout-v2 { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
.profile-side-col { position: sticky; top: 78px; display: grid; gap: 14px; min-width: 0; }
.profile-main-col { gap: 14px; }
.profile-card,
.profile-section-card {
  border-color: rgba(41, 50, 67, 0.11);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(31, 39, 53, 0.052);
  animation: profileCardEnter 460ms ease both;
}
.profile-main-col .profile-section-card:nth-child(2) { animation-delay: 65ms; }
.profile-main-col .profile-section-card:nth-child(3) { animation-delay: 130ms; }
.profile-section-card { padding: 18px; }

.profile-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px 18px 18px;
  background:
    radial-gradient(circle at 50% 8%, rgba(244,190,42,.23), transparent 34%),
    var(--ielts-white);
}
.profile-card::before,
.profile-card::after { content:""; position:absolute; z-index:-1; border-radius:50%; }
.profile-card::before { width:100px; height:100px; right:-58px; top:-45px; border:16px solid rgba(53,115,180,.07); }
.profile-card::after { width:70px; height:70px; left:-42px; bottom:-38px; background:rgba(244,190,42,.06); }
.profile-card-avatar-wrap { position:relative; width:92px; height:92px; margin:0 auto 12px; display:grid; place-items:center; }
.profile-card-avatar-ring { position:absolute; inset:0; border:1px dashed rgba(174,120,0,.38); border-radius:50%; animation:profileAvatarSpin 18s linear infinite; }
.profile-card-avatar-ring::before { content:""; position:absolute; top:4px; right:13px; width:8px; height:8px; border-radius:50%; background:#e76c49; }
.profile-card-avatar { width:70px; height:70px; margin:0; border:4px solid var(--ielts-white); background:linear-gradient(145deg,#ffd85f,var(--unio-yellow)); box-shadow:0 8px 18px rgba(151,109,12,.19); }
.profile-card-presence { position:absolute; right:10px; bottom:11px; width:13px; height:13px; border:3px solid var(--ielts-white); border-radius:50%; background:#22a875; }
.profile-card-name { font-family:var(--font-heading); font-size:18px; }
.profile-card-badge { margin-top:8px; border:1px solid rgba(42,120,214,.12); }
.profile-card-member-since { margin-top:16px; padding-top:13px; }

.profile-section-head { min-height:34px; margin-bottom:13px; gap:10px; }
.profile-section-head h3 { display:flex; align-items:center; gap:9px; font-size:15px; }
.profile-section-icon {
  display:grid;
  flex:0 0 30px;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:9px;
  color:#3978bb;
  background:#e9f3fd;
}
.profile-section-icon .icon { width:15px; height:15px; }
.profile-section-icon-goal { color:#af7600; background:#fff1c4; }
.profile-section-icon-prefs { color:#287b66; background:#e5f4ee; }
.profile-section-icon-security { color:#73549a; background:#eee8f6; }
.profile-section-edit-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border:1px solid var(--ielts-border);
  border-radius:9px;
  color:var(--ielts-text-secondary);
  background:var(--ielts-bg);
  font-size:11.5px;
  transition:color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.profile-section-edit-btn .icon { width:13px; height:13px; }
.profile-section-edit-btn:hover { color:var(--unio-blue); border-color:rgba(42,120,214,.3); background:var(--ielts-white); text-decoration:none; }

.profile-info-grid { display:grid; gap:8px; }
.profile-info-grid-personal { grid-template-columns:repeat(3, minmax(0,1fr)); }
.profile-info-row {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  min-width:0;
  padding:10px;
  border:1px solid var(--ielts-border);
  border-radius:11px;
  background:color-mix(in srgb, var(--ielts-bg) 60%, var(--ielts-white));
}
.profile-info-row:last-child { border-bottom:1px solid var(--ielts-border); }
.profile-info-icon { display:grid; flex:0 0 27px; width:27px; height:27px; place-items:center; border-radius:8px; color:var(--ielts-text-muted); background:var(--ielts-white); box-shadow:0 2px 7px rgba(35,43,56,.06); }
.profile-info-icon .icon { width:13px; height:13px; }
.profile-info-content { display:flex; min-width:0; flex-direction:column; gap:2px; }
.profile-info-label { overflow:hidden; color:var(--ielts-text-muted); font-size:10.5px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.profile-info-value { overflow:hidden; max-width:100%; color:var(--ielts-text); font-size:12.5px; line-height:1.35; text-align:left; text-overflow:ellipsis; white-space:nowrap; }

.profile-goal-summary { display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; }
.profile-goal-empty { margin:4px 0 0; padding:14px; border:1px dashed var(--ielts-border); border-radius:11px; background:var(--ielts-bg); line-height:1.5; }
.profile-goal-overall { position:relative; display:flex; min-height:95px; flex-direction:column; align-items:center; justify-content:center; padding:12px; border:1px solid rgba(218,163,27,.28); border-radius:13px; background:linear-gradient(145deg,#fff5ce,#fffdf3); }
.profile-goal-overall::after { content:""; position:absolute; inset:8px; border:1px dashed rgba(173,118,0,.16); border-radius:10px; }
.profile-goal-overall-label { position:relative; z-index:1; font-size:10.5px; }
.profile-goal-overall-value { position:relative; z-index:1; color:#ad7400; font-family:var(--font-heading); font-size:31px; line-height:1.05; }
.profile-goal-band-max { position:absolute; z-index:1; right:16px; bottom:12px; color:#a89772; font-size:9px; }
.profile-goal-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.profile-goal-meta .profile-info-row { padding:9px; }
.profile-goal-skills { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:10px 0; }
.profile-goal-skill-chip {
  --skill-color:#758091;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  padding:8px;
  border:1px solid color-mix(in srgb, var(--skill-color) 24%, var(--ielts-border));
  border-radius:11px;
  background:color-mix(in srgb, var(--skill-color) 6%, var(--ielts-white));
  text-align:left;
}
.profile-goal-skill-listening { --skill-color:#eb6834; }
.profile-goal-skill-reading { --skill-color:#2a78d6; }
.profile-goal-skill-writing { --skill-color:#1baf7a; }
.profile-goal-skill-speaking { --skill-color:#d99500; }
.profile-goal-skill-icon { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; border-radius:8px; color:var(--skill-color); background:color-mix(in srgb, var(--skill-color) 12%, var(--ielts-white)); }
.profile-goal-skill-icon .icon { width:13px; height:13px; }
.profile-goal-skill-chip-label { color:var(--skill-color); font-size:9px; }
.profile-goal-skill-chip-value { color:var(--skill-color); font-family:var(--font-heading); font-size:16px; line-height:1.1; }
.profile-goal-focus { display:flex; align-items:center; gap:8px; padding:9px 11px; border:0; border-radius:10px; background:var(--ielts-bg); }
.profile-goal-focus-icon { display:grid; flex:0 0 24px; width:24px; height:24px; place-items:center; border-radius:7px; color:#aa7100; background:#fff0bd; }
.profile-goal-focus-icon .icon { width:12px; height:12px; }

.profile-prefs-grid { grid-template-columns:1fr 1fr; }
.profile-prefs-grid .profile-info-row { min-height:56px; }
.profile-value-pill { width:max-content; padding:2px 7px; border-radius:999px; color:#287762; background:#e3f3ed; font-size:10.5px; }

.profile-security-card { margin:0; padding:15px; }
.profile-security-card .profile-section-head { margin-bottom:7px; }
.profile-security-item { gap:8px; padding:8px 7px; font-size:11.5px; line-height:1.35; }
.profile-security-item > span:nth-child(2) { flex:1; }
.profile-security-action-icon { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; border-radius:8px; color:var(--ielts-text-muted); background:var(--ielts-bg); }
.profile-security-action-icon .icon { width:13px; height:13px; }
.profile-security-chevron { width:12px !important; height:12px !important; opacity:.5; transition:transform 150ms ease; }
.profile-security-item:hover .profile-security-chevron { transform:translateX(2px); }
.profile-security-item-danger .profile-security-action-icon { color:var(--ielts-incorrect); background:#fdeceb; }
.profile-security-divider { margin:5px 7px; }

.profile-form-row input[type="text"],
.profile-form-row input[type="date"],
.profile-form-row input[type="number"],
.profile-form-row input[type="password"],
.profile-form-row select { min-height:40px; border-radius:10px; transition:border-color 150ms ease, box-shadow 150ms ease; }
.profile-form-row input:focus,
.profile-form-row select:focus { outline:none; border-color:var(--unio-blue); box-shadow:0 0 0 3px rgba(42,120,214,.11); }
.profile-toggle-pill { border-radius:10px; background:var(--ielts-bg); }
.profile-toggle-pill button { border-radius:8px; }

body.dark-theme .profile-hero { border-color:#4d493c; background:radial-gradient(circle at 84% 26%,rgba(244,190,42,.14),transparent 29%),linear-gradient(132deg,#312b1d,#242832 57%,#1d2c38); }
body.dark-theme .profile-hero h1 { color:#f4f2eb; }
body.dark-theme .profile-hero .profile-subtitle { color:#b9bec8; }
body.dark-theme .profile-hero-kicker { color:#efd172; }
body.dark-theme .profile-goal-overall { background:linear-gradient(145deg,#352e1b,#2b2922); }
body.dark-theme .profile-value-pill { color:#66c5a4; background:#1c392f; }
body.dark-theme .profile-security-item-danger .profile-security-action-icon { background:#3a2326; }
body.dark-theme .profile-recovery-channel { border-color:#465a70; background:linear-gradient(145deg,#26384a,#292d34); }
body.dark-theme .profile-recovery-channel-icon { background:#20252c; }
body.dark-theme .profile-recovery-success-icon { color:#68c5a5; background:#1d3a31; }

@keyframes profileMascotFloat { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@keyframes profileOrbit { to { transform:translate(-50%,-50%) rotate(348deg); } }
@keyframes profileAvatarSpin { to { transform:rotate(360deg); } }
@keyframes profileCardEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 880px) {
  .profile-layout-v2 { grid-template-columns:1fr; }
  .profile-side-col { position:static; grid-template-columns:240px minmax(0,1fr); }
  .profile-security-list:first-of-type { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
}
@media (max-width: 680px) {
  .profile-main { padding:18px 16px 42px; }
  .profile-hero { min-height:190px; padding:27px 34% 27px 23px; }
  .profile-hero-visual { width:35%; }
  .profile-hero-mascot { right:12px; width:108px; }
  .profile-side-col { grid-template-columns:1fr; }
  .profile-info-grid-personal,
  .profile-prefs-grid { grid-template-columns:1fr; }
  .profile-goal-summary { grid-template-columns:105px minmax(0,1fr); }
  .profile-goal-meta { grid-template-columns:1fr; }
  .profile-goal-skills { grid-template-columns:1fr 1fr; }
  .profile-security-list:first-of-type { grid-template-columns:1fr; }
}
@media (max-width: 460px) {
  .profile-hero { min-height:295px; align-items:flex-start; padding:25px 20px 135px; }
  .profile-hero-visual { inset:auto 0 0; width:100%; height:135px; }
  .profile-hero-mascot { right:calc(50% - 54px); width:108px; }
  .profile-goal-summary { grid-template-columns:1fr; }
  .profile-goal-overall { min-height:82px; }
  .profile-section-head { align-items:flex-start; }
  .profile-section-edit-btn span { display:none; }
  .profile-section-edit-btn { padding:7px; }
  .profile-form-grid-2,
  .profile-form-grid-4 { grid-template-columns:1fr 1fr; }
  .profile-toggle-row { align-items:flex-start; gap:10px; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-hero-orbit,
  .profile-hero-mascot,
  .profile-card-avatar-ring,
  .profile-card,
  .profile-section-card { animation:none !important; }
  .profile-section-edit-btn,
  .profile-security-chevron { transition:none; }
}