/* Page wrapper — centered row of: [nav] [content] */
.up-shell{
  display:flex;
  gap:28px;
  width:100%;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;

  box-sizing:border-box;
  justify-content:center;     /* center the group */
  align-items:flex-start;     /* top-align columns */
}

/* Left nav layout */
.up-nav{ width:240px; flex:0 0 240px; }
.up-nav ul{ list-style:none; margin:0; padding:0; }
.up-nav li + li{ margin-top:12px; }
.up-nav a{
  display:block; padding:12px 14px; border-radius:12px; background:#fff;
  border:1px solid #eee; color:#111; font-weight:700; text-decoration:none;
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}
.up-nav a:hover{ background:#f7f7f7; }
.up-nav .active > a{ background:#032a80; border-color:#032a80; color:#fff; }

/* Main column */
.up-main{ flex:1 1 720px; min-width:0; }  /* keeps content from stretching too wide */
.up-card{ background:#fff; border:1px solid #eee; box-shadow:0 2px 4px rgba(0,0,0,.04); border-radius:14px; padding:32px; }
.up-card h2{ margin:0 0 18px; font-size:28px; font-weight:800; color:#0f172a; }
.up-card-wide{ max-width:1240px; margin-left:auto; margin-right:auto; }

/* Responsive: stack on small screens */
@media (max-width: 900px){
  .up-shell{ flex-direction:column; align-items:stretch; }
  .up-nav{ width:100%; flex:0 0 auto; }
}


/* --- Modal shell --- */
.up-modal-wrap[hidden]{ display:none; }
.up-modal-wrap{ position:fixed; inset:0; background:rgba(17,17,17,.5); z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; }
.up-modal{ width:min(720px, 95vw); background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden; }
.up-modal-head, .up-modal-foot{ padding:14px 16px; display:flex; align-items:center; gap:8px; }
.up-modal-head h3{ margin:0; font-size:18px; }
.up-modal-head .up-x{ margin-left:auto; background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer; }
.up-modal-body{ padding:12px 16px 6px; }
.up-modal-foot{ justify-content:flex-end; gap:10px; border-top:1px solid rgba(0,0,0,.06); }

/* --- Crop stage --- */
.up-crop-stage{ width:100%; height:min(60vh,520px); background:#f4f4f7; border-radius:10px; overflow:hidden; position:relative; }
#up-crop-img{ display:block; max-width:100%; }

/* --- Controls --- */
.up-crop-controls{ display:flex; align-items:center; gap:8px; padding:10px 0 0; }
.up-crop-controls input[type="range"]{ width:240px; }
.up-flex-spacer{ flex:1; }

/* Buttons (inherits your up-btn styles) */
.up-btn.ghost{ background:#fff; border:1px solid rgba(0,0,0,.12); }



.unitypro-profile { --gap:28px; }
.unitypro-profile .up-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--gap); margin-bottom: 28px; }
.unitypro-profile .up-bio { grid-column:1 / -1; }
.unitypro-profile .up-photo { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.unitypro-profile .up-photo img { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#f2f2f2; border:1px solid #eee; }

.up-float { display:flex; flex-direction:column; gap:8px; }
.up-float .up-label { font-size:14px; font-weight:700; color:#4b5563; }
.unitypro-profile input, .unitypro-profile textarea, .unitypro-profile select {
  padding:14px 14px; border:1px solid #d7dbe0; border-radius:12px; background:#fff; outline:none; font-size:16px; color:#111827;
}
.unitypro-profile textarea { min-height:140px; }
.unitypro-profile input:focus, .unitypro-profile textarea:focus, .unitypro-profile select:focus {
  border-color:#3964ff; box-shadow:0 0 0 3px rgba(57,100,255,.16);
}
.up-help { margin:-16px 2px 20px; color:#6b7280; font-size:12px; }
.up-count { align-self:flex-end; font-size:12px; color:#6b7280; margin-top:6px; }

.up-switch { display:flex; align-items:center; gap:12px; font-weight:700; color:#111827; }
.up-switch input[type="checkbox"]{ -webkit-appearance:none; appearance:none; width:46px; height:26px; border-radius:9999px; background:#e5e7eb; position:relative; outline:none; border:none; cursor:pointer; transition: background .18s ease; }
.up-switch input[type="checkbox"]::after{ content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:#9ca3af; transition:left .18s ease, background .18s ease; }
.up-switch input[type="checkbox"]:checked{ background:#c9f2e0; }
.up-switch input[type="checkbox"]:checked::after{ left:24px; background:#059669; }
.up-switch input[type="checkbox"]:focus{ box-shadow:0 0 0 3px rgba(5,150,105,.25); }
.up-switch label { cursor:pointer; user-select:none; }

.up-mbti-desc { grid-column:1 / -1; padding:12px 14px; background:#f8fafc; border:1px dashed #e2e8f0; border-radius:12px; font-size:14px; color:#374151; }
.up-mbti-desc strong { color:#111827; }

.up-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:9999px; border:1px solid transparent; background:var(--avatar-ring); color:#fff; font-weight:800; cursor:pointer; text-decoration:none; transition:box-shadow .15s ease, transform .02s ease, background .15s ease; }
.up-btn:hover { background:var(--avatar-ring); }
.up-btn:active { transform:translateY(1px); }
.up-btn:focus { outline:none; box-shadow:0 0 0 3px rgba(31,41,55,.25); }

.up-accordion { margin:26px 2px; }
.up-accordion summary { cursor:pointer; font-weight:800; padding:10px 0; }
.up-accordion[open] summary { color:#1f2937; }

@media (max-width: 900px){
  .up-shell { flex-direction: column; padding: 0 12px; }
  .up-nav { width: auto; position: sticky; top: 0; z-index: 5; }
  .up-nav ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
  .up-nav a { padding: 10px 14px; white-space: nowrap; }
  .up-card { padding: 20px; border-radius: 12px; }
  .unitypro-profile .up-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .unitypro-profile textarea { min-height: 120px; }
  .up-accordion { margin: 18px 2px; }
}

/* MBTI header + inline info icon on Settings */
.up-mbti-title { font-weight:800; margin: 8px 2px 2px; }
.up-mbti-line { display:flex; align-items:center; gap:6px; font-weight:600; margin: 4px 2px 0; }
.up-mbti-info { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#e9ecef; color:#374151; font-size:12px; cursor:help; }


/* Typography tweaks */
.unitypro-profile { font-size:16px; }
.unitypro-profile .up-label { font-size:14px; }
.unitypro-profile input, .unitypro-profile textarea, .unitypro-profile select { font-size:16px; }


/* --- Toasts (bottom-left) --- */
.up-toasts{ position:fixed; left:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:10000; }
.up-toast{ background:#1f2937; color:#fff; border-radius:10px; padding:12px 14px; min-width:220px; max-width:360px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 8px 22px rgba(0,0,0,.28); opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; }
.up-toast.show{ opacity:1; transform:none; }
.up-toast .close{ background:transparent; border:0; color:#fff; font-size:18px; line-height:1; cursor:pointer; padding:0 4px 0 12px; opacity:.85; }
.up-toast .close:hover{ opacity:1; }


/* Container already centered by your .up-shell rules */

/* Card */
.up-card.up-card-wide { padding:24px 28px; border-radius:12px; }
.up-card h2 { margin:0 0 22px; font-size:22px; font-weight:700; }

/* Two-column rows: label stack (left) + button (right) */
.up-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px;
}
.up-col{ min-width:0; }
.up-field-title{ font-size:22px;font-weight:700; color:#111827; margin:0 0 6px; }
.up-muted{ color:#6b7280; }

/* Divider like screenshot */
.up-hr{
  border:0; height:1px; background:#e5e7eb;
  margin:18px 0;
}

/* Ghost buttons like the image */
.up-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  height:60px; padding:0 18px;
  background:#f7f7f9;
  border:1px solid #e5e7eb;
  border-radius:6px;
  text-transform:uppercase;
  font-weight:700; font-size:13px; letter-spacing:.02em;
  color:#6b7280;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  cursor:pointer;
}
.up-btn-ghost:hover{ background:#f3f4f6;border:0px; color:#333;}
.up-btn-ghost:active{ background:#f3f4f6; }

/* Details sections */
.up-accordion{ margin:8px 0 6px; }
.up-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:end;
}
.up-float .up-label{ display:block; font-weight:600; margin:0 0 6px; }
.up-float input{ width:100%; height:40px; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; }

/* Primary button (save) — keep your existing theme if present */
.up-btn.up-primary{
  background: var(--avatar-ring);color:#fff;height:60px; padding:0 18px; border-radius:8px; font-weight:700;
}
.up-btn.up-primary:hover{
  background: #0335a3;color:#fff;height:60px; padding:0 18px; border:0px!important;border-radius:8px; font-weight:700;
}

/* Accessibility helper */
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Form layout: each field its own row */
.up-form{ display:flex; flex-direction:column; gap:16px; margin-top:14px; }
.up-row-field{ display:flex; flex-direction:column; gap:6px; }
.up-label{ font-weight:600; color:#111827; }

/* Input with eye button */
.up-input{ position:relative; }
.up-input input{
  width:100%; height:44px; padding:10px 44px 10px 12px;
   box-sizing:border-box;
}
.up-eye{
  position:absolute; right:8px; top:40%; transform:translateY(-50%);
  width:34px; height:34px;
  background:#f7f7f9; display:grid; place-items:center; cursor:pointer;
}
.up-eye:hover{ background:#f7f7f9; }
.up-eye:active{ background: #f7f7f9 !important; } /* <-- no active background */
.up-eye .eye{ width:18px; height:18px; fill:#6b7280; }


/* Show only one icon depending on state */
.up-eye[aria-pressed="false"] .eye-off{ display:none; }
.up-eye[aria-pressed="true"]  .eye-on{  display:none; }

/* Success banner */
.up-alert{ padding:10px 12px; border-radius:8px; margin:10px 0; font-weight:600; }
.up-alert-success{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }