.my-page { --my-line:#efdfd6; --my-muted:#857c75; padding:10px 0 4px; color:#342c29; container:my-page / inline-size; }
.my-page [hidden] { display:none !important; }
.my-heading,.my-records-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.my-heading { margin-bottom:23px; }
.my-heading h1 { margin:0; font-size:25px; letter-spacing:-.6px; }
.my-heading p,.my-records-heading p { margin:7px 0 0; font-size:13px; line-height:1.7; color:var(--my-muted); }
.my-heading>a { display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:12px; color:var(--my-muted); }
.my-heading>a svg { width:15px; height:15px; }
.my-welcome { position:relative; overflow:hidden; min-height:194px; padding:28px; border:1px solid #f3dace; border-radius:24px; background:linear-gradient(112deg,#fff0e4 0%,#fff7ed 55%,#ffe6e8 100%); }
.my-profile { position:relative; display:flex; align-items:center; gap:14px; z-index:1; padding-right:140px; }
.my-avatar { width:56px; height:56px; flex:0 0 56px; display:grid; place-items:center; color:#c57d60; background:#fffaf5; border:3px solid #fff; border-radius:50%; }
.my-avatar svg { width:27px; height:27px; }
.my-eyebrow { display:block; font-size:11px; color:#ab7966; letter-spacing:1px; }
.my-profile h2 { margin:6px 0; font-size:22px; overflow-wrap:anywhere; }
.my-profile p { margin:0; color:#92776b; font-size:12px; line-height:1.7; }
.my-account-actions { position:relative; z-index:1; margin-top:18px; padding-left:70px; }
.my-page .primary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:40px; padding:10px 19px; font-size:13px; line-height:1.4; cursor:pointer; }
.my-page .primary-button svg { width:16px; height:16px; }
.my-welcome-cat { position:absolute; right:20px; bottom:5px; width:155px; height:162px; object-fit:contain; filter:drop-shadow(0 7px 5px #deac8d15); pointer-events:none; }
.my-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 26px; }
.my-shortcut { --tile-bg:#fff5e6; --tile-accent:#b58135; display:grid; grid-template-columns:1fr auto; align-items:center; gap:11px 3px; text-align:left; padding:16px; border:1px solid transparent; border-radius:18px; background:var(--tile-bg); color:#3e3530; cursor:pointer; position:relative; }
.my-shortcut-history { --tile-bg:#eff6f1; --tile-accent:#528673; }
.my-shortcut-favorites { --tile-bg:#fff0f1; --tile-accent:#d46679; }
.my-shortcut-icon { grid-column:1; grid-row:1; }
.my-shortcut-copy { grid-column:1 / -1; grid-row:2; }
.my-shortcut>strong { grid-column:2; grid-row:1; justify-self:end; }
.my-shortcut-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:13px; background:#ffffffc9; color:var(--tile-accent); }
.my-shortcut-icon svg { width:23px; height:23px; }
.my-shortcut-copy b { display:block; font-size:14px; white-space:nowrap; }
.my-shortcut-copy small { display:block; margin-top:5px; color:#91877f; font-size:10px; white-space:nowrap; }
.my-shortcut>strong { color:var(--tile-accent); font-size:21px; font-weight:650; }
.my-shortcut[aria-selected="true"] { border-color:var(--tile-accent); }
.my-shortcut:hover { filter:brightness(.985); }
.my-records { padding:22px; border:1px solid var(--my-line); border-radius:22px; background:#fff; }
.my-records-heading { padding-bottom:18px; border-bottom:1px solid #f3ece6; }
.my-records-heading h2 { margin:0; font-size:18px; }
.my-records-heading p { font-size:12px; }
.my-text-button { border:0; padding:8px 0; background:none; font-size:12px; color:#a37766; cursor:pointer; white-space:nowrap; }
.my-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:31px 12px 17px; }
.my-empty-icon { display:grid; place-items:center; width:59px; height:59px; border-radius:20px; background:#fff3ef; color:#d99c8c; margin-bottom:14px; }
.my-empty-icon svg { width:28px; height:28px; stroke-width:1.4; }
.my-empty h3 { margin:0; font-size:16px; font-weight:650; }
.my-empty p { max-width:340px; margin:9px 0 19px; color:var(--my-muted); font-size:12px; line-height:1.8; }
.my-empty .primary-button { min-height:36px; padding:9px 19px; font-size:12px; }
.my-row { display:flex; align-items:center; gap:12px; padding:17px 0; border-bottom:1px solid #f3ece6; }
.my-row:last-child { border-bottom:0; }
.my-row-icon { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; overflow:hidden; border-radius:13px; background:#faf2e9; color:#b98e71; }
.my-row-icon svg { width:23px; height:23px; }
.my-row-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.my-row-copy { flex:1; min-width:0; }
.my-row-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.my-row-copy p { margin:7px 0 0; color:var(--my-muted); font-size:11px; line-height:1.7; }
.my-row-remove { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; color:#ba9184; background:#fff7f3; cursor:pointer; }
.my-row-remove svg { width:17px; height:17px; }
.my-row-remove.is-saved { color:#ed7c8b; }
.my-row-remove.is-saved svg { fill:#ed7c8b; }
.my-load-more { display:block; margin:16px auto 0; border:1px solid #eddfd5; border-radius:12px; padding:9px 20px; font-size:12px; background:#fffaf6; color:#9a7562; cursor:pointer; }
.my-page :is(a,button):focus-visible { outline:2px solid var(--coral, #f25564); outline-offset:3px; }
.my-page button:disabled { opacity:.6; cursor:wait; }
@container my-page (max-width:600px) {
  .my-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .my-shortcut { grid-template-columns:1fr auto; gap:11px 3px; padding:14px; }
  .my-shortcut-icon { grid-column:1; grid-row:1; }
  .my-shortcut>strong { grid-column:2; grid-row:1; font-size:20px; }
  .my-shortcut-copy { grid-column:1 / -1; }
  .my-profile { padding-right:95px; gap:10px; }
  .my-avatar { display:none; }
  .my-welcome { padding:23px 20px; min-height:196px; }
  .my-account-actions { padding-left:0; }
  .my-profile h2 { font-size:20px; }
  .my-welcome-cat { width:125px; height:135px; right:2px; bottom:12px; }
}
@container my-page (max-width:390px) {
  .my-heading h1 { font-size:23px; }
  .my-heading p { font-size:11px; }
  .my-heading>a { font-size:11px; }
  .my-shortcuts { gap:8px; }
  .my-shortcut { padding:12px; border-radius:16px; }
  .my-shortcut-copy b { font-size:13px; }
  .my-shortcut-copy small { font-size:10px; }
  .my-shortcut-icon { width:32px; height:32px; }
  .my-records { padding:18px 15px; }
  .my-records-heading { align-items:flex-start; }
  .my-records-heading h2 { font-size:17px; }
  .my-profile { padding-right:80px; }
  .my-profile p { font-size:11px; max-width:180px; }
  .my-welcome-cat { width:106px; }
}

.my-record-tabs { display:contents; }
.my-name-row { display:flex; align-items:center; gap:8px; }
.my-name-row h2 { min-width:0; }
.my-page .my-profile-edit { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:13px; margin-left:-6px; border:0; border-radius:8px; background:transparent; box-shadow:none; color:#907c72; cursor:pointer; }
.my-page .my-profile-edit:hover { color:var(--coral, #f25564); background:transparent; box-shadow:none; }
.my-profile-edit svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.my-page .my-profile-dialog { position:fixed; inset:0; width:calc(100% - 28px); max-width:480px; max-height:calc(100dvh - 40px); margin:auto; padding:28px; border:1px solid #eee0d7; border-radius:24px; background:#fffefd; color:#2c2928; box-shadow:0 24px 80px #49302530; overflow:auto; }
.my-profile-dialog::backdrop { background:rgba(44,35,31,.4); backdrop-filter:blur(3px); }
.my-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.my-page .my-dialog-heading h2 { margin:0; }
.my-page .my-dialog-close { min-width:44px; min-height:44px; border:0; border-radius:50%; background:#fff0eb; color:var(--coral, #f25564); font-size:26px; cursor:pointer; }
.my-page .my-profile-dialog form { grid-template-columns:minmax(0,1fr); margin-bottom:0; }
.my-page .my-profile-dialog .primary-button { width:100%; min-height:44px; background:linear-gradient(135deg,#ff857b,#f4516d); color:#fff; }
.my-password-setup { display:grid; gap:4px; margin-top:26px; padding-top:24px; border-top:1px solid #ebd8ce; }
.my-password-setup[hidden] { display:none; }
.my-password-setup h3 { margin:0 0 6px; font-size:17px; }
.my-password-setup p { margin:0; color:#706a66; font-size:13px; line-height:1.7; }
.my-password-setup [data-my-password-notice] { margin-top:12px; }
/* Step 4: implement the approved personal-center layout, not the legacy four tiles. */
.site-shell:has(.my-page) { display:block; max-width:none; width:100%; backdrop-filter:none; }
.site-shell:has(.my-page) > .sidebar { display:none; }
.main-content:has(.my-page) { background:transparent; }
.content-inner:has(.my-page) { max-width:1200px; margin:auto; padding:40px 24px 0; }
.my-page { display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px; padding:0; --my-muted:#706a66; --my-line:#eee9e5; container:none; }
.my-main { min-width:0; }
.my-sidebar { align-self:start; display:grid; gap:6px; padding:20px 14px; background:#fffefd; border:1px solid var(--my-line); border-radius:24px; }
.my-sidebar :is(button,a) { display:block; border:0; border-radius:12px; background:transparent; padding:12px; min-height:44px; font:inherit; font-size:14px; font-weight:700; text-align:left; color:#2c2928; cursor:pointer; }
.my-sidebar [aria-current=page] { background:#fff0f2; color:var(--coral, #f25564); }
.my-sidebar small { padding:20px 12px 0; margin-top:24px; border-top:1px solid var(--my-line); color:var(--my-muted); line-height:1.8; }
.my-heading h1 { font-size:28px; }
.my-welcome { min-height:185px; box-shadow:0 12px 34px rgba(111,77,54,.08); }
.my-avatar { display:none; }
.my-account-actions { display:flex; flex-wrap:wrap; gap:14px; padding-left:0; padding-right:135px; }
.my-welcome-cat { width:135px; height:160px; bottom:12px; }
.my-profile h2 { font-size:28px; }
.my-profile p { font-size:14px; color:var(--my-muted); }
.my-page .my-shortcuts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:22px 0; }
.my-page .my-shortcuts.has-hospitals { grid-template-columns:repeat(4,minmax(0,1fr)); }
.my-page a.my-shortcut-pending { text-decoration:none; background:#fff0e9; }
@media(max-width:720px) { .my-page .my-shortcuts, .my-page .my-shortcuts.has-hospitals { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.my-page .my-shortcut { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:22px; border:1px solid #ebdfd4; background:#fff4df; }
.my-page .my-shortcut-likes { background:#fff0ef; }
.my-page .my-shortcut-history { background:#eff6ef; }
.my-page .my-shortcut-icon,.my-page .my-shortcut-copy small { display:none; }
.my-page .my-shortcut>strong { color:#2c2928; font-size:28px; font-weight:650; }
.my-page .my-shortcut[aria-selected=true] { border-color:var(--coral, #f25564); }
.my-records { background:#fffefd; padding:28px; border-radius:24px; box-shadow:0 12px 34px rgba(111,77,54,.08); }
.my-row-remove { min-width:44px; min-height:44px; }
.my-empty p,.my-records-heading p { font-size:14px; }
.my-institution { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; padding:28px; border:1px solid var(--my-line); border-radius:24px; background:#fffefd; }
.my-institution h2,.my-profile-panel h2 { margin:0 0 8px; font-size:21px; }
.my-institution p,.my-muted { margin:0; color:var(--my-muted); line-height:1.8; }
.my-institution a { padding:12px 17px; border:1px solid var(--my-line); border-radius:12px; font-weight:700; }
.my-profile-panel { position:relative; z-index:1; margin-top:24px; padding-top:24px; border-top:1px solid #ebd8ce; }
.my-welcome-cat { top:12px; bottom:auto; }
.my-profile-panel form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.my-profile-panel form>label:last-of-type,.my-profile-panel form>.my-muted { grid-column:1 / -1; }
.my-profile-panel form>button { justify-self:start; }
@media(max-width:720px) { .my-profile-panel form { grid-template-columns:minmax(0,1fr); } }
.my-profile-panel form { display:grid; gap:20px; margin:24px 0; }
.my-profile-panel label { display:grid; gap:8px; font-size:14px; font-weight:700; }
.my-profile-panel input { min-width:0; width:100%; padding:12px 14px; min-height:48px; font:inherit; font-size:16px; border:1px solid #d8cfc9; border-radius:12px; background:#fff; }
.my-profile-panel input[readonly] { background:#f7f3ef; color:#706a66; }
.my-page :is(a,button):focus-visible { outline:3px solid var(--coral, #f25564); outline-offset:3px; }
.my-profile-panel input:focus { outline:0; border-color:var(--coral, #f25564); box-shadow:0 0 0 4px rgba(242,85,100,.09),0 8px 22px rgba(128,75,55,.13); }
@media(max-width:960px) { .my-page { grid-template-columns:180px minmax(0,1fr); } }
@media(max-width:720px) {
  .content-inner:has(.my-page) { padding:24px 14px 0; }
  .my-page { grid-template-columns:minmax(0,1fr); gap:20px; }
  .my-sidebar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0; border:0; border-bottom:1px solid #eadfd8; border-radius:0; background:transparent; }
  .my-sidebar small { display:none; }
  .my-sidebar :is(button,a) { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:48px; padding:10px 4px 15px; border-radius:0; background:transparent; color:#706a66; font-size:14px; font-weight:500; text-align:center; }
  .my-sidebar [aria-current=page] { background:transparent; color:var(--coral, #f25564); font-weight:700; }
  .my-sidebar [aria-current=page]::after { content:""; position:absolute; bottom:-1px; left:calc(50% - 12px); width:24px; height:3px; border-radius:3px; background:var(--coral, #f25564); }
  .my-sidebar :is(button,a):hover { color:var(--coral, #f25564); background:transparent; }
  .my-page .my-shortcuts { gap:8px; }
  .my-page .my-shortcut { padding:16px 10px; }
  .my-page .my-shortcut-copy b { font-size:13px; }
  .my-page .my-shortcut>strong { font-size:24px; }
  .my-welcome,.my-records,.my-institution { padding:24px 20px; }
  .my-profile { padding-right:75px; }
  .my-profile h2 { font-size:24px; }
  .my-welcome-cat { width:75px; height:110px; right:12px; top:30px; }
  .my-account-actions { padding-right:0; }
  .my-heading>a { display:none; }
}