#palace-header, .logout-confirm-modal {--bg: #f7faff; --white: #ffffff; --ice: #eef6ff; --blue: #2f5f98; --blue-deep: #0d2b51; --blue-soft: #dcecff; --gold: #c9a75d; --gold-soft: #f3dfa5; --gold-deep: #9a7333; --text: #1e2d43; --muted: #6f7d91; --line: rgba(201, 167, 93, 0.42); --shadow: rgba(20, 58, 100, 0.10); color:var(--text); font-family:Georgia, "Times New Roman", "Noto Serif SC", serif; font-size:16px; line-height:normal; color-scheme:light;}
.palace-page {position: relative; z-index: 2; max-width: 1160px; margin: 0px auto; padding: 22px 22px 64px;}
#palace-header.nav {position: sticky; top: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; padding: 14px 16px; border: 1px solid rgba(201, 167, 93, 0.42); border-radius: 999px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(18px); box-shadow: 0 16px 42px var(--shadow);}
#palace-header .brand {display: flex; align-items: center; gap: 10px; min-width: 0px;}
#palace-header .brand-mark {width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-deep); background: linear-gradient(135deg, rgb(255, 249, 232), rgb(231, 242, 255) 58%, rgb(255, 255, 255)); border: 1px solid var(--gold); box-shadow: rgba(255, 255, 255, 0.72) 0px 0px 0px 3px inset; flex: 0 0 auto; position: relative;}
#palace-header .brand-mark::after {content: "past · present · future"; position: absolute; left: 50%; top: 46px; transform: translateX(-50%); width: max-content; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(201, 167, 93, 0.36); background: rgba(255, 255, 255, 0.84); color: var(--blue); font-size: 12px; letter-spacing: 0.08em; opacity: 0; pointer-events: none; transition: opacity 0.22s; box-shadow: 0 10px 24px var(--shadow);}
#palace-header .brand-mark:hover::after {opacity: 1;}
#palace-header .brand-name {font-size: 15px; letter-spacing: 0.08em; color: var(--blue-deep); white-space: nowrap;}
#palace-header .nav-links {display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px;}
#palace-header .nav-links a {text-decoration: none;}
#palace-header .nav-actions {display: flex; align-items: center; gap: 10px;}
#palace-header .nav-live-status {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0px 15px; border: 1px solid rgba(165, 66, 78, 0.34); border-radius: 999px; color: rgb(127, 47, 61); background: rgba(255, 247, 244, 0.88); box-shadow: rgba(113, 47, 58, 0.08) 0px 7px 18px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;}
#palace-header .nav-live-status[hidden] {display: none;}
#palace-header .nav-live-status:hover {transform: translate(-50%, -50%); border-color: rgba(165, 66, 78, 0.58); background: rgb(255, 245, 239);}
#palace-header .nav-live-dot {width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: rgb(195, 63, 82); box-shadow: rgba(195, 63, 82, 0.13) 0px 0px 0px 4px; animation: 1.8s ease-in-out 0s infinite normal none running nav-live-pulse;}
@keyframes nav-live-pulse { 
  50% { box-shadow: rgba(195, 63, 82, 0.04) 0px 0px 0px 7px; }
}
#palace-header .ghost-btn, #palace-header .solid-btn {display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0px 18px; border-radius: 999px; text-decoration: none; font-size: 14px; white-space: nowrap; transition: transform 0.18s, box-shadow 0.18s;}
#palace-header .ghost-btn:hover, #palace-header .solid-btn:hover {transform: translateY(-1px);}
#palace-header .ghost-btn {border: 1px solid rgba(47, 95, 152, 0.24); color: var(--blue-deep); background: rgba(255, 255, 255, 0.58);}
#palace-header .solid-btn {border: 1px solid rgba(13, 43, 81, 0.92); color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--blue), var(--blue-deep)); box-shadow: rgba(13, 43, 81, 0.18) 0px 12px 24px;}
@media (max-width: 640px) {.palace-page {padding: 14px 14px 46px;}}
@media (max-width: 640px) {#palace-header.nav {align-items: flex-start; border-radius: 24px; flex-direction: column;}}
@media (max-width: 640px) {#palace-header .nav-links {display: none;}}
@media (max-width: 640px) {#palace-header .nav-actions {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;}}
@media (max-width: 640px) {#palace-header .nav-live-status {left: auto; right: 15px; top: 15px; transform: none; min-height: 34px; padding: 0px 12px; font-size: 12px;}}
@media (max-width: 640px) {#palace-header .nav-live-status:hover {transform: none;}}
@media (max-width: 640px) {#palace-header .ghost-btn, #palace-header .solid-btn {width: 100%; padding: 0px 12px;}}
#palace-header .brand-mark {cursor: pointer; user-select: none;}
#palace-header .brand-mark.reveal::after {opacity: 1;}
#palace-header .user-menu {position: relative; display: inline-flex; align-items: center;}
#palace-header .user-menu-button {gap: 8px; user-select: none;}
#palace-header .user-menu-panel {position: absolute; top: calc(100% + 10px); right: 0px; min-width: 180px; padding: 10px; border-radius: 20px; border: 1px solid rgba(201, 167, 93, 0.36); background: rgba(255, 255, 255, 0.88); box-shadow: rgba(20, 58, 100, 0.14) 0px 18px 40px; backdrop-filter: blur(16px); display: none; z-index: 50;}
#palace-header .user-menu.open .user-menu-panel {display: grid; gap: 6px;}
#palace-header .user-menu-panel a {min-height: 38px; padding: 0px 12px; border-radius: 14px; color: var(--blue-deep); text-decoration: none; display: flex; align-items: center; justify-content: flex-start; border: 1px solid transparent; background: transparent; white-space: nowrap;}
#palace-header .user-menu-panel a:hover {border-color: rgba(201, 167, 93, 0.24); background: rgba(232, 242, 255, 0.58);}
#palace-header .user-menu-panel .logout-link {color: rgb(116, 49, 49);}
#palace-header .user-menu-arrow {font-size: 11px; color: var(--gold-deep); margin-left: 2px;}
@media (max-width: 760px) {#palace-header .user-menu-panel {right: auto; left: 0px;}}
#palace-header .menu-with-dot {position: relative; gap: 8px;}
#palace-header .mail-dot {display: none; min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 999px; background: rgb(179, 58, 58); color: rgb(255, 255, 255); font-size: 11px; line-height: 18px; text-align: center; margin-left: auto; box-shadow: rgba(255, 255, 255, 0.82) 0px 0px 0px 2px;}
#palace-header .mail-dot.show {display: inline-block;}
#palace-header .user-menu-button {position: relative;}
#palace-header .top-mail-dot {display: none; position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 999px; background: rgb(179, 58, 58); color: rgb(255, 255, 255); font-size: 11px; line-height: 18px; text-align: center; box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 2px; z-index: 2;}
#palace-header .top-mail-dot.show {display: inline-block;}
#palace-header .menu-with-dot {position: relative; gap: 8px;}
#palace-header .mail-dot {display: none; min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 999px; background: rgb(179, 58, 58); color: rgb(255, 255, 255); font-size: 11px; line-height: 18px; text-align: center; margin-left: auto; box-shadow: rgba(255, 255, 255, 0.82) 0px 0px 0px 2px;}
#palace-header .mail-dot.show {display: inline-block;}
.logout-confirm-modal {position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: 0.4s ease-in-out 0s 1 normal none running distortBlink;}
@keyframes distortBlink { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; transform: skewX(-2deg) skewY(1deg); }
}
.logout-confirm-box {background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 245, 255, 0.9)); border: 2px solid rgba(200, 160, 100, 0.5); border-radius: 20px; padding: 28px; max-width: 340px; text-align: center; box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 20px 60px, rgba(200, 160, 100, 0.2) 0px 0px 0px 2px; animation: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running distortScale;}
@keyframes distortScale { 
  0% { transform: scale(0.7) rotateX(15deg) rotateZ(-1deg); opacity: 0; }
  100% { transform: scale(1) rotateX(0deg) rotateZ(0deg); opacity: 1; }
}
.logout-confirm-box h3 {margin: 0px 0px 12px; color: rgb(58, 42, 26); font-size: 18px; font-weight: 500; letter-spacing: 0.05em; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 2px;}
.logout-confirm-box p {margin: 0px 0px 20px; color: rgb(111, 130, 151); font-size: 14px; line-height: 1.6;}
.logout-confirm-buttons {display: flex; gap: 10px; justify-content: center;}
.logout-confirm-btn {min-width: 100px; padding: 10px 18px; border-radius: 18px; border: 1px solid rgba(200, 160, 100, 0.3); background: rgba(255, 255, 255, 0.7); color: rgb(58, 42, 26); font-size: 13px; cursor: pointer; transition: 0.2s; font-weight: 500;}
.logout-confirm-btn:hover {background: rgba(255, 255, 255, 0.9); border-color: rgba(200, 160, 100, 0.6); transform: translateY(-1px); box-shadow: rgba(200, 160, 100, 0.15) 0px 4px 12px;}
.logout-confirm-btn.danger {background: linear-gradient(135deg, rgb(198, 83, 83), rgb(168, 66, 66)); color: rgb(255, 255, 255); border-color: rgba(200, 83, 83, 0.4);}
.logout-confirm-btn.danger:hover {background: linear-gradient(135deg, rgb(214, 101, 101), rgb(185, 84, 84)); border-color: rgba(200, 83, 83, 0.6); box-shadow: rgba(198, 83, 83, 0.25) 0px 6px 16px;}
#palace-header button, .logout-confirm-modal button {font-family:Arial;line-height:normal;}
#palace-header.nav {z-index:90;}