/* ══ VIEW: ESSENTIAL ══ */
#view-essential { background: var(--blue-ice); }
.ess-hero { background: linear-gradient(135deg, #C62828, #E53935); padding: 20px 16px; color: #fff; flex-shrink: 0; }
.ess-hero h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.ess-hero p { font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 500; }
.sos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 8px; }
.sos-card { background: #fff; border-radius: var(--r-md); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none; border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sos-card:hover { transform: translateY(-2px); border-color: var(--sos-c, #0077B6); }
.sos-icon { font-size: 38px; }
.sos-icon .ma-icon { width: 1em; height: 1em; }
.sos-num { font-size: 22px; font-weight: 700; }
.sos-label { font-size: 10px; font-weight: 700; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.4px; }
.ess-sec { padding: 4px 16px 0; }
.ess-list { display: flex; flex-direction: column; gap: 9px; padding: 0 16px; }
.ess-item { background: #fff; border-radius: var(--r-md); padding: 13px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; border: 1px solid rgba(0,60,120,0.06); transition: transform 0.15s; }
.ess-item:hover { transform: translateX(3px); }
.ess-item-icon { font-size: 22px; }
.ess-item-name { font-size: 13px; font-weight: 700; color: var(--text); }
.ess-item-detail { font-size: 11px; color: var(--text-light); font-weight: 500; margin-top: 1px; }
.ess-item-action { margin-left: auto; font-size: 16px; color: var(--text-light); }

/* ── CURRENCY ── */
.ess-currency { padding: 0 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.curr-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.curr-tile { background: #fff; border-radius: 10px; padding: 10px 8px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,60,120,0.07); }
.curr-tile-code { font-size: 10px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.curr-tile-rate { font-size: 15px; font-weight: 800; color: var(--blue-deep); margin-top: 2px; }
.curr-loading, .curr-unavail { font-size: 12px; color: var(--text-light); padding: 8px 0; grid-column: span 3; text-align: center; }
.curr-converter { background: #fff; border-radius: 12px; padding: 14px 14px 12px; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,60,120,0.07); }
.curr-conv-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.curr-amount-input { flex: 1.2; min-width: 0; border: 1.5px solid var(--blue-wash, #dde8f5); border-radius: 8px; padding: 8px 10px; font-size: 15px; font-weight: 700; color: var(--text); outline: none; font-family: inherit; background: var(--blue-ice, #f0f5fb); }
.curr-amount-input:focus { border-color: var(--blue-main); }
.curr-select { flex: 1; min-width: 0; border: 1.5px solid var(--blue-wash, #dde8f5); border-radius: 8px; padding: 8px 4px; font-size: 13px; font-weight: 700; color: var(--text); outline: none; font-family: inherit; background: var(--blue-ice, #f0f5fb); cursor: pointer; text-align: center; }
.curr-arrow { font-size: 16px; color: var(--text-light); flex-shrink: 0; }
.curr-result { font-size: 26px; font-weight: 800; color: var(--blue-deep); text-align: center; margin: 4px 0 8px; letter-spacing: -0.5px; }
.curr-source { font-size: 9.5px; color: var(--text-light); text-align: center; font-weight: 600; }

/* ══ VIEW: YOU ══ */
#view-you { background: var(--blue-ice); }
.you-hero { background: linear-gradient(160deg, var(--blue-deep), var(--blue-mid)); padding: 20px 20px 18px; flex-shrink: 0; }
/* Logged-out: centered persona */
#you-hero-persona { display: flex; align-items: center; gap: 14px; }
.you-avatar { font-size: 44px; flex-shrink: 0; }
.you-persona-info { flex: 1; min-width: 0; }
.you-name { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.you-tagline { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 500; }
.you-hero-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.you-login-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.92); border-radius: 20px; padding: 7px 16px; font-size: 12px; font-weight: 700; color: var(--blue-deep); cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Logged-in */
#you-hero-account { display: flex; align-items: center; gap: 14px; }
.you-hero-avatar-wrap { position:relative; flex-shrink:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.you-account-avatar { width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,0.18); border:2.5px solid rgba(255,255,255,0.45); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; color:#fff; overflow:hidden; position:relative; }
.you-avatar-cam { position:absolute; bottom:0; right:0; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; font-size:11px; border:1.5px solid rgba(255,255,255,0.3); }
.you-hero-account-info { flex: 1; min-width: 0; }
.you-account-name { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.you-account-meta-row { font-size: 11px; color: rgba(255,255,255,0.52); margin-top: 3px; line-height: 1.5; }
.you-hero-action-row { display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:nowrap; overflow:hidden; }
.you-edit-pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.92); border-radius: 20px; padding: 5px 11px; font-size: 11px; font-weight: 700; color: var(--blue-deep); cursor: pointer; -webkit-tap-highlight-color: transparent; white-space:nowrap; flex-shrink:0; }
.you-signout-pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 20px; padding: 5px 11px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.65); cursor: pointer; -webkit-tap-highlight-color: transparent; white-space:nowrap; flex-shrink:0; }
.you-hero-chips { display: contents; }
.you-hero-chip { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 20px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); white-space:nowrap; flex-shrink:0; cursor:pointer; }
.you-hero-chip.persona-chip { border-style: dashed; }
.persona-pick-option { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; cursor:pointer; border:2px solid transparent; margin-bottom:8px; transition:all 0.15s; }
.persona-pick-option:hover, .persona-pick-option.active { border-color:var(--blue-main); background:var(--blue-pale,#e8f4ff); }
.persona-pick-emoji { font-size:28px; }
.persona-pick-label { font-size:15px; font-weight:700; color:var(--text); }
.persona-pick-sub { font-size:12px; color:var(--text-light); }
.you-sec { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.you-sec-title { font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.you-row { background: #fff; border-radius: var(--r-md); padding: 13px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); cursor: pointer; border: 1px solid rgba(0,60,120,0.06); transition: transform 0.15s; }
.you-row:hover { transform: translateX(3px); }
.you-row-icon { font-size: 20px; }
.you-row-label { font-size: 13px; font-weight: 700; color: var(--text); }
.you-row-sub { font-size: 11px; color: var(--text-light); font-weight: 500; }
.you-row-arrow { margin-left: auto; color: var(--text-light); font-size: 16px; }
.app-credit { text-align: center; padding: 20px 16px 8px; font-size: 10.5px; color: var(--text-light); font-weight: 500; line-height: 1.8; }
.app-credit span { color: var(--blue-main); font-weight: 700; }

/* ── ACCOUNT CARD (You tab) ── */
.you-account-card {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
  border-radius: var(--r-md); padding: 16px 16px 14px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-md);
}
.you-account-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.you-account-name { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
.you-account-email { font-size: 11px; color: rgba(255,255,255,0.58); margin-top: 2px; }
.you-account-meta { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 4px; line-height: 1.4; }

/* ── AUTH PROFILE FIELDS ── */
#auth-profile-fields { flex-direction: column; gap: 12px; }
.auth-section-label { font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.7px; margin-top: 4px; }

/* ── PROFILE SHEET (logged-in view) ── */
.profile-header { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; }
.profile-avatar-lg { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid)); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,60,120,0.22); cursor: pointer; position: relative; overflow: hidden; }
.profile-avatar-lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-avatar-camera { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.38); display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0; transition: opacity 0.18s; }
.profile-avatar-lg:active .profile-avatar-camera { opacity: 1; }
.profile-header-info { flex: 1; min-width: 0; }
.profile-display-name { font-size: 18px; font-weight: 700; color: var(--text); }
.profile-name-input { font-size: 18px; font-weight: 700; color: var(--text); border: none; border-bottom: 2px solid var(--blue-main); background: transparent; outline: none; width: 100%; padding: 2px 0; font-family: inherit; }
.profile-display-email { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 0 8px; }
.profile-chip { background: var(--blue-ice); border: 1px solid var(--blue-wash); border-radius: 20px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--blue-deep); display: flex; align-items: center; gap: 5px; }
.profile-section-label { font-size: 10.5px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 8px; }
.profile-bio-input { width: 100%; box-sizing: border-box; background: var(--blue-ice); border: 1.5px solid rgba(0,120,180,0.15); border-radius: var(--r-md); padding: 11px 14px; font-size: 13px; font-family: inherit; color: var(--text); outline: none; resize: none; line-height: 1.5; transition: border-color 0.2s; margin-bottom: 14px; }
.profile-bio-input:focus { border-color: var(--blue-main); }
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.profile-tag { background: var(--blue-ice); border: 1.5px solid rgba(0,120,180,0.15); border-radius: 20px; padding: 7px 13px; font-size: 12px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all 0.15s; user-select: none; -webkit-tap-highlight-color: transparent; }
.profile-tag.selected { background: var(--blue-main); border-color: var(--blue-main); color: #fff; }
.profile-save-btn { width: 100%; background: var(--blue-ice); color: var(--blue-deep); border: 1.5px solid var(--blue-wash); border-radius: var(--r-md); padding: 12px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; margin-bottom: 10px; transition: background 0.15s; }
.profile-save-btn:active { background: var(--blue-wash); }
.auth-select { width:100%;box-sizing:border-box;background:var(--blue-ice);border:1.5px solid rgba(0,120,180,0.15);border-radius:var(--r-md);padding:13px 16px;font-size:14px;font-family:inherit;color:var(--text);outline:none;transition:border-color 0.2s;appearance:none;-webkit-appearance:none;cursor:pointer; }
.auth-select:focus { border-color:var(--blue-main); }