.account-main { min-height: calc(100vh - 71px); padding: 90px 0; background: linear-gradient(115deg, #e6efed, #fafaf5 58%, #e6e8dc); }
.account-layout { max-width: 820px; }
.account-layout h1 { margin-bottom: 14px; font: 700 48px/1.1 "DM Sans", "Noto Sans Thai", sans-serif; }
.account-intro { margin-bottom: 28px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.account-panel { position: relative; padding: 37px 30px 30px; border: 1px solid #dfd484; border-radius: 0; background: var(--note-yellow); box-shadow: 10px 11px 0 rgba(16, 43, 62, .10); transform: rotate(-.35deg); }
.account-panel::before { content: ""; position: absolute; top: -9px; left: calc(50% - 42px); width: 84px; height: 21px; background: var(--tape); transform: rotate(2deg); }
.account-status { margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; }
.account-panel [hidden] { display: none; }
.account-profile { display: flex; align-items: center; gap: 19px; margin-top: 24px; padding: 21px 0 24px; border-top: 1px dashed #c8bb67; border-bottom: 1px dashed #c8bb67; }
.account-avatar-wrap { width: 68px; height: 68px; position: relative; flex: 0 0 68px; }
.account-avatar, .account-avatar-fallback { width: 100%; height: 100%; border-radius: 50%; }
.account-avatar { position: absolute; inset: 0; object-fit: cover; border: 2px solid #dcebea; background: var(--white); }
.account-avatar-fallback { display: grid; place-items: center; color: var(--white); background: var(--navy); font: 700 21px/1 "DM Sans", "Noto Sans Thai", sans-serif; }
.account-profile-label { margin: 0 0 6px; color: var(--teal); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .1em; }
.account-profile-name { display: block; margin-bottom: 9px; font-size: 21px; line-height: 1.2; }
.account-role-badge { display: inline-block; padding: 6px 8px; color: #075e5a; background: var(--note-blue); box-shadow: 2px 2px 0 rgba(16, 43, 62, .08); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .06em; transform: rotate(-1deg); }
.account-details { margin-top: 24px; border-top: 1px dashed #c8bb67; }
.account-details p { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 15px 0; border-bottom: 1px dashed #c8bb67; }
.account-details span { color: var(--muted); font-size: 13px; }.account-details strong { text-align: right; font-size: 14px; }.account-id { max-width: 310px; overflow-wrap: anywhere; font-family: "DM Mono", monospace; font-size: 11px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }.account-actions .primary-button, .account-actions .secondary-button { text-decoration: none; cursor: pointer; }
.message-center { position: relative; width: min(340px, 100%); margin: 32px auto 0 0; padding: 22px 20px 20px; border: 1px solid #ded07c; background: #fff6bd; box-shadow: 6px 7px 0 rgba(16, 43, 62, .10); transform: rotate(-1deg); }.message-center::before { content: ""; position: absolute; top: -8px; left: calc(50% - 33px); width: 66px; height: 18px; background: var(--tape); transform: rotate(3deg); }.message-center h2 { margin: 0 0 9px; font-size: 18px; }.message-center p:not(.account-profile-label) { margin: 0 0 17px; color: #56604a; font-size: 13px; line-height: 1.6; }.message-center .primary-button { border-radius: 0; font: 500 11px "DM Mono", monospace; text-decoration: none; }
.admin-management { position: relative; width: min(340px, 100%); margin: 32px 0 0 auto; padding: 22px 20px 20px; border: 1px solid #9fc8c7; background: var(--note-blue); box-shadow: 6px 7px 0 rgba(16, 43, 62, .10); transform: rotate(1deg); }.admin-management::before { content: ""; position: absolute; top: -8px; left: calc(50% - 33px); width: 66px; height: 18px; background: var(--tape); transform: rotate(-3deg); }.admin-management h2 { margin: 0 0 9px; font-size: 18px; }.admin-management p:not(.account-profile-label) { margin: 0 0 17px; color: #45636e; font-size: 13px; line-height: 1.6; }.admin-management .primary-button { border-radius: 0; font: 500 11px "DM Mono", monospace; text-decoration: none; }
.unread-badge { display: inline-grid; min-width: 19px; height: 19px; place-items: center; padding: 0 4px; vertical-align: middle; border-radius: 50%; color: var(--white); background: #b34532; font: 500 10px/1 "DM Mono", monospace; }
@media (hover: hover) and (pointer: fine) { .account-panel, .message-center, .admin-management { transition: transform .18s ease, box-shadow .18s ease; }.account-panel:hover { box-shadow: 13px 15px 0 var(--pinned-shadow); transform: translateY(-3px) rotate(-.35deg); }.message-center:hover { box-shadow: 9px 11px 0 var(--pinned-shadow); transform: translateY(-2px) rotate(-1deg); }.admin-management:hover { box-shadow: 9px 11px 0 var(--pinned-shadow); transform: translateY(-2px) rotate(1deg); } }
@media (max-width: 680px) { .account-main { min-height: calc(100vh - 63px); padding: 55px 0; }.account-layout h1 { font-size: 39px; }.account-panel { padding: 32px 22px 22px; transform: none; }.account-profile { align-items: flex-start; }.account-details p { align-items: flex-start; flex-direction: column; gap: 5px; }.account-details strong { text-align: left; }.account-id { max-width: 100%; } }