/* Responsive presentation only. Original pictures and saved colours remain untouched. */
#adminOpen { display:none !important; }
#qrUploadSection { padding:18px; margin:18px 0; border:2px solid #ad83c6; border-radius:12px; background:#21162c; }
#qrUploadSection > h3 { font-size:22px; margin:0 0 10px; }
#qrUploadSection .qr-editor { margin:14px 0; padding-top:14px; }
#qrUploadSection input[type=file] { display:block; width:100%; box-sizing:border-box; padding:14px; background:#30213f; color:#fff; }
#qrUploadSection input::file-selector-button { padding:10px; background:#8551ac; color:white; border:0; border-radius:6px; margin-right:8px; cursor:pointer; }
#profileModal { background:#0d0a12; overflow-y:auto !important; overflow-x:hidden; overscroll-behavior:contain; }
#profileModal.open { display:block !important; }
#profileModal .modal-card {
  box-sizing:border-box; width:100% !important; max-width:1740px; min-height:100vh !important;
  height:auto !important; margin:0 auto; padding:64px clamp(20px,3vw,56px) 48px !important;
  display:grid !important; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(260px,.68fr) !important;
  grid-template-rows:auto !important; gap:clamp(22px,2.2vw,38px) !important;
  align-items:start !important; align-content:start !important; justify-content:center !important;
  overflow:visible !important; background:radial-gradient(ellipse at 65% 0,#26132d66,transparent 55%),#0d0a12;
}
#profileModal .modal-close { position:fixed; z-index:2; top:12px; right:16px; width:40px; height:40px; background:#17101fe8; border:1px solid #65516e; cursor:pointer; }
#profileModal .modal-main { grid-column:1 !important; grid-row:1 !important; width:100% !important; min-width:0; }
#profileModal .modal-gallery { display:block !important; width:100% !important; max-width:none !important; margin:0 !important; }
#profileModal .modal-gallery img:first-child { display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; border-radius:12px !important; }
#profileModal .modal-info,#profileModal .modal-info.has-copy {
  display:flex !important; flex-direction:column; gap:0; min-width:0; width:100% !important;
  grid-column:2 !important; grid-row:1 !important; margin:0 !important;
}
#profileModal .modal-info .below-gallery {
  position:static !important; display:grid !important; width:100% !important; min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; margin:0 0 26px !important;
}
#profileModal .modal-info .below-gallery:empty { display:none !important; }
#profileModal .modal-info .below-gallery img {
  display:block; width:100% !important; min-width:0; min-height:0 !important;
  max-height:clamp(210px,23vw,340px) !important; aspect-ratio:auto !important;
  object-fit:contain !important; object-position:center !important; border-radius:10px !important; background:#17111d !important;
}
#profileModal .modal-info #modalName {
  position:static !important; width:100% !important; margin:0 0 14px !important; padding:0;
  font-size:clamp(36px,3.5vw,58px) !important; font-weight:600; line-height:1.08; letter-spacing:-.025em;
  overflow-wrap:anywhere; text-shadow:0 0 20px #b26dde38 !important;
}
#profileModal .modal-country { font-size:16px; font-weight:500; margin:0 0 22px; line-height:1.5; text-shadow:none !important; }
#profileModal .modal-info .modal-role {
  position:static !important; width:100% !important; max-width:none; margin:0 !important;
  font-size:17px; line-height:1.75 !important; text-shadow:0 0 12px #b56ce329 !important;
}
#profileModal .modal-info .profile-region { display:table; margin:22px 0 0 !important; padding:6px 12px !important; border-radius:5px; font-size:14px !important; line-height:1.5; background:#291b31; border:1px solid #73567b; color:inherit; text-shadow:none !important; box-shadow:none; }
#profileModal .modal-copy { width:100%; box-sizing:border-box; margin:24px 0 0; padding:20px 0 0; border:0; border-top:1px solid #65506c66; background:none; font-size:16px; line-height:1.75; text-shadow:none !important; }
#profileModal .main-under-copy { margin:18px 0 0; padding:16px 0 0; border:0; border-top:1px solid #65506c66; border-radius:0; background:none; font-size:16px; line-height:1.75; text-shadow:0 0 12px #b56ce329 !important; }
#profileModal #modalMainCopy { font-size:20px; }
#profileModal .profile-directory { grid-column:3; grid-row:1; min-width:0; margin:0; padding:0 0 24px 22px; border-left:1px solid #65506c55; }
#profileModal .profile-directory h2 { font-size:18px; font-weight:500; letter-spacing:.08em; margin:0 0 20px; text-shadow:none; }
#profileModal .profile-directory input { min-height:46px; padding:12px; font-size:16px; border:1px solid #66516f; border-radius:6px; background:#17121d; }
#profileModal .directory-regions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:12px 0 22px; }
#profileModal .directory-regions button { box-sizing:border-box; min-height:44px; padding:9px 6px; font-size:14px; line-height:1.35; background:#1c1523; border-color:#514058; border-radius:5px; overflow-wrap:anywhere; }
#profileModal .directory-regions button:last-child { grid-column:1 / -1; }
#profileModal .directory-regions button[aria-pressed=true] { background:#48304f; border-color:#bc8cca; }
#profileModal .directory-result-count { font-size:14px; line-height:1.5; margin:0 0 14px; }
#profileModal .directory-result { border:0; border-bottom:1px solid #65506c44; border-radius:0; background:transparent; padding:12px 0; gap:12px; min-width:0; }
#profileModal .directory-result img { width:70px; height:88px; flex:0 0 70px; border-radius:5px; }
#profileModal .directory-result strong { font-size:18px; font-weight:500; text-shadow:none; }
#profileModal .directory-result small { font-size:14px; opacity:.72; }
#profileModal .directory-results > p { padding:20px 0; margin:0; font-size:15px; line-height:1.7; opacity:.7; }
#profileModal .directory-result:hover { background:#23182e; }
#profileModal :is(button,input):focus-visible { outline:2px solid #d4a8df; outline-offset:3px; }
.shell :is(h1,h2,h3,p,a,.role,.meta,.count,.card-country) { text-shadow:0 0 18px #b36ce327 !important; }
.shell .card { border-radius:12px; }
@media (min-width:761px) and (max-width:1199px) {
  #profileModal .modal-card { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) !important; }
  #profileModal .profile-directory { grid-column:1 / -1; grid-row:2; padding:24px 0 0; border-left:0; border-top:1px solid #65506c55; }
  #profileModal .directory-results { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; }
}
@media (max-width:760px) {
  #profileModal .modal-card { display:flex !important; flex-direction:column; gap:26px !important; padding:62px 18px 32px !important; min-height:100dvh !important; }
  #profileModal .modal-main,#profileModal .modal-info,#profileModal .profile-directory { width:100% !important; min-width:0; box-sizing:border-box; }
  #profileModal .modal-info .below-gallery { display:flex !important; gap:10px !important; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:12px; margin:0 0 22px !important; }
  #profileModal .modal-info .below-gallery img { flex:0 0 44%; width:44% !important; max-height:300px !important; scroll-snap-align:start; }
  #profileModal .modal-info #modalName { font-size:40px !important; }
  #profileModal .modal-info .modal-role { font-size:16px; }
  #profileModal .profile-directory { padding:24px 0 0; border-left:0; border-top:1px solid #65506c55; }
  .admin-panel { width:calc(100% - 24px) !important; box-sizing:border-box; max-height:90dvh; padding:22px 18px; }
  .admin-panel :is(input,textarea,select) { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { #profileModal * { transition:none !important; scroll-behavior:auto !important; } }

/* Person first: one photo column, one biography column, discovery afterwards. */
#profileModal .modal-card { max-width:1280px; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) !important; column-gap:clamp(24px,4vw,56px) !important; }
#profileModal .profile-directory { grid-column:1 / -1; grid-row:2; padding:28px 0 0; border-left:0; border-top:1px solid #65506c55; }
#profileModal #modalBelowGallery { position:static !important; display:grid !important; width:100% !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; margin:20px 0 0 !important; }
#profileModal #modalBelowGallery:empty { display:none !important; }
#profileModal #modalBelowGallery img { width:100% !important; min-width:0; min-height:0 !important; max-height:280px !important; aspect-ratio:auto !important; object-fit:contain !important; border-radius:8px !important; background:#17111d !important; }
#profileModal .modal-info .modal-role { line-height:1.7 !important; }
#profileModal .profile-qr { display:flex; align-items:center; gap:20px; width:100%; box-sizing:border-box; margin:28px 0 0; padding:20px; border:1px solid #9570a3; border-radius:12px; background:linear-gradient(120deg,#2c1c37,#16101e); }
#profileModal .profile-qr[hidden] { display:none !important; }
#profileModal .profile-qr img { display:block; width:164px; height:164px; flex:0 0 164px; box-sizing:border-box; padding:12px; background:white; object-fit:contain; border-radius:4px; }
#profileModal .profile-qr div { min-width:0; }
#profileModal .profile-qr h4 { font-size:20px; font-weight:500; margin:0 0 10px; }
#profileModal .profile-qr p { font-size:15px; line-height:1.7; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
#profileModal .directory-results { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 28px; }
#profileModal .discovery-filters { margin:0 0 20px; max-width:620px; }
#profileModal .discovery-filters summary { min-height:44px; line-height:44px; cursor:pointer; font-size:15px; }
#profileModal .discovery-filters summary:focus-visible { outline:2px solid #d4a8df; }
.qr-editor { border-top:1px solid #65506c88; margin:22px 0; padding-top:18px; }
.qr-editor h4 { margin:0 0 10px; font-size:20px; }
.qr-editor p { font-size:14px; line-height:1.6; }
.qr-editor label { display:block; margin-top:14px; }
.qr-editor img { display:block; width:160px; height:160px; padding:12px; background:white; object-fit:contain; margin:12px 0; }
.qr-editor img[hidden] { display:none; }
.qr-editor textarea { box-sizing:border-box; width:100%; font:inherit; padding:12px; margin:8px 0; background:#15101e; color:#f4eaff; border:1px solid #826299; border-radius:8px; }
@media (min-width:761px) and (max-width:1000px) { #profileModal .profile-qr { flex-direction:column; align-items:flex-start; } }
@media (max-width:760px) {
  #profileModal #modalBelowGallery { display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; margin:0 !important; padding-bottom:12px; }
  #profileModal #modalBelowGallery img { flex:0 0 44%; width:44% !important; max-height:300px !important; scroll-snap-align:start; }
  #profileModal .profile-qr { gap:16px; padding:16px; }
  #profileModal .profile-qr img { width:144px; height:144px; flex-basis:144px; }
  #profileModal .directory-results { grid-template-columns:1fr; }
}
@media (max-width:380px) { #profileModal .profile-qr { flex-direction:column; align-items:center; text-align:center; } }

/* Mobile-only reading order; keep the desktop columns and DOM intact. */
@media (max-width:760px) {
  #profileModal .modal-main,
  #profileModal .modal-info,
  #profileModal .modal-info.has-copy { display:contents !important; }
  #profileModal .modal-card { gap:18px !important; }
  #profileModal #modalGallery { order:0; }
  #profileModal #modalBelowGallery { order:1; }
  #profileModal #modalName { order:2; }
  #profileModal .modal-country { order:3; margin:0 !important; }
  #profileModal #modalRole { order:4; }
  #profileModal #modalCopy { order:5; margin:6px 0 0; padding:18px; border:1px solid #73517e; border-radius:10px; background:#201428; }
  #profileModal .profile-qr { order:6; margin:0; }
  #profileModal #modalMainCopy { order:7; width:100%; box-sizing:border-box; }
  #profileModal #modalMainExtra { order:8; width:100%; box-sizing:border-box; }
  #profileModal .profile-directory { order:9; }
  .shell #grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px; }
  .shell #featuredTop > .feature { grid-column:1 / -1 !important; min-width:0; }
  .shell #grid > .card:not(.feature) { min-width:0; width:auto; box-sizing:border-box; padding:12px; }
  .shell #grid .card-photo { width:100%; min-height:0; height:auto; aspect-ratio:3/4; border-radius:8px; }
  .shell #grid .card h3 { font-size:20px; overflow-wrap:anywhere; }
  .shell #grid .card .meta { margin-top:14px; flex-wrap:wrap; }
  .shell #grid .card-country { font-size:14px; flex-wrap:wrap; }
}
@media (max-width:359px) { .shell #grid { grid-template-columns:minmax(0,1fr) !important; } }

#profileModal .profile-qr-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:20px; width:100%; }
#profileModal .profile-qr-pair[hidden] { display:none !important; }
#profileModal .profile-qr-pair .profile-qr { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin:0; padding:18px; }
#profileModal .profile-qr-pair .profile-qr h4 { margin:0; font-size:18px; }
#profileModal .profile-qr-pair a { display:block; width:100%; max-width:220px; border-radius:6px; background:white; }
#profileModal .profile-qr-pair img { width:100%; height:220px; padding:10px; object-fit:contain; }
#profileModal .profile-qr-pair p { font-size:14px; }
.platform-logo { display:inline-flex; align-items:center; gap:.35em; margin:0 .18em; font:inherit; font-weight:700; white-space:nowrap; vertical-align:baseline; }
.platform-mark { display:inline-grid; place-items:center; width:1.8em; height:1.8em; border-radius:6px; overflow:hidden; color:#fff; font-size:.9em; line-height:1; }
.platform-mark img { display:block; width:100%; height:100%; object-fit:cover; }
.platform-whatsapp .platform-mark { background:#25d366; }
.platform-wechat .platform-mark { background:#07c160; font-size:.9em; letter-spacing:0; }
.platform-telegram .platform-mark { background:#229ed9; }
.platform-tiktok .platform-mark { background:#111; box-shadow:2px 0 #fa2d55,-2px 0 #25f4ee; }
.platform-youtube .platform-mark { background:#f00; }
.platform-instagram .platform-mark { background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.platform-x .platform-mark { background:#000; }
.platform-facebook .platform-mark { background:#1877f2; }
.platform-line .platform-mark { background:#06c755; }
.platform-discord .platform-mark { background:#5865f2; }
.platform-snapchat .platform-mark { background:#fffc00; color:#111; }
.platform-reddit .platform-mark { background:#ff4500; }
.platform-linkedin .platform-mark { background:#0a66c2; font-size:.7em; }
.platform-twitch .platform-mark { background:#9146ff; }
.platform-xiaohongshu .platform-mark { background:#ff2442; font-size:.47em; font-weight:900; }
#profileModal .profile-region { display:block; margin-top:.85rem; padding-top:.25rem; white-space:nowrap; opacity:.9; font-style:normal !important; }
/* Modern editorial type scale, kept readable on both desktop and mobile. */
body, button, input, textarea, select { font-family:"Segoe UI","Noto Sans SC","Microsoft YaHei",Arial,sans-serif !important; }
#profileModal .modal-card { font-size:18px; }
#profileModal #modalName { font-family:"Segoe UI","Noto Sans SC","Microsoft YaHei",Arial,sans-serif !important; font-size:clamp(46px,5vw,72px) !important; letter-spacing:-.035em; }
#profileModal .modal-role, #profileModal .modal-country, #profileModal .modal-copy, #profileModal .main-under-copy { font-family:"Segoe UI","Noto Sans SC","Microsoft YaHei",Arial,sans-serif !important; font-size:18px; line-height:1.85; }
#profileModal .modal-role { font-weight:600; font-style:normal !important; }
#profileModal .modal-copy { font-size:18px; }
#profileModal .contact-link { color:#d9a9ff; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
#profileModal .contact-link:hover { color:#fff; }
/* Final typography hierarchy and contact sizing. */
body { font-family:"Segoe UI","Microsoft YaHei",sans-serif !important; font-size:18px; line-height:1.7; }
.shell h1,.shell h2,.shell .card h3,#profileModal .modal-info #modalName { font-family:Georgia,"Songti SC","Noto Serif CJK SC",serif !important; font-weight:400 !important; letter-spacing:.01em !important; }
#profileModal .modal-info #modalName { font-size:clamp(44px,5vw,68px) !important; line-height:1.12 !important; margin-bottom:22px !important; }
.shell p,.shell nav,.shell .meta,.shell .role { font-family:"Segoe UI","Microsoft YaHei",sans-serif !important; font-size:17px; }
#profileModal .modal-info #modalRole,#profileModal #modalCopy,#profileModal .main-under-copy { font-family:"Segoe UI","Microsoft YaHei",sans-serif !important; font-size:19px !important; font-weight:400 !important; font-style:normal !important; line-height:1.8 !important; }
#profileModal #modalRole .profile-region { display:block !important; width:fit-content; margin:28px 0 0 !important; padding:8px 16px !important; border:1px solid #86649480; border-radius:8px; background:#25172e; font:500 16px/1.6 "Segoe UI","Microsoft YaHei",sans-serif !important; white-space:normal; }
#profileModal .platform-logo { vertical-align:middle; margin:0 8px 0 0; }
#profileModal .platform-mark { width:32px !important; height:32px !important; min-width:32px; font-size:20px !important; }
#profileModal .platform-mark img { width:32px !important; height:32px !important; max-width:none; object-fit:contain; }
#profileModal .wechat-copy { display:inline; padding:6px 2px; border:0; border-bottom:1px dashed currentColor; border-radius:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
#profileModal .wechat-copy:focus-visible { outline:2px solid #d4a8df; outline-offset:4px; }
.color-effect-select { display:block; width:100%; margin:8px 0; padding:10px; color:#f4eaff; background:#25172e; border:1px solid #866494; border-radius:8px; font:inherit; }
.color-effect-preview { display:inline-block; margin:4px 0 10px; font-size:17px; }
.effect-ink[data-effect*="rainbow"] { background:linear-gradient(100deg,#ff7eb3,#ffbb70,#fff18a,#8cf3b0,#82d7ff,#c6acff,#ff7eb3); background-size:200% 100%; background-clip:text; -webkit-background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; text-shadow:none !important; }
.effect-ink[data-effect*="shimmer"] { animation:color-soft-shimmer 3s ease-in-out infinite; }
@keyframes color-soft-shimmer { 0%,100% { opacity:1; background-position:0% 50%; } 50% { opacity:.72; background-position:100% 50%; } }
#profileModal #modalRole .profile-region { background:var(--region-box-color,#25172e); color:var(--region-text-color,#f4eaff) !important; }
#profileModal #modalRole .profile-region[data-box-effect*="rainbow"] { background:linear-gradient(110deg,#773f5f,#765637,#626b39,#356957,#345c79,#594678); background-size:200% 100%; }
#profileModal #modalRole .profile-region[data-box-effect*="shimmer"] { animation:color-soft-shimmer 3s ease-in-out infinite; }
#profileModal .profile-qr-pair .profile-qr { background:none; border:0; border-radius:0; padding:0; gap:0; box-shadow:none; }
#profileModal .profile-qr-pair .profile-qr h4,#profileModal .profile-qr-pair .profile-qr p { display:none; }
#profileModal .profile-qr-pair { align-items:start; grid-template-columns:repeat(2,minmax(0,1fr)); }
#profileModal .profile-qr-pair a { max-width:220px; aspect-ratio:1; overflow:hidden; background:white; }
#profileModal .profile-qr-pair img { display:block; width:100%; height:100%; padding:8px; box-sizing:border-box; object-fit:contain; background:white; }
@media (prefers-reduced-motion:reduce) { .effect-ink[data-effect*="shimmer"],#profileModal #modalRole .profile-region[data-box-effect*="shimmer"] { animation:none !important; } }
.shell > header { height:124px; }
.shell > header .brand { flex-shrink:0; }
.brand-logo { display:block; width:112px; height:112px; object-fit:contain; border-radius:12px; }
@media(max-width:760px) {
  .shell > header { height:108px; }
  .brand-logo { width:96px; height:96px; }
}
.desktop-rail,.desktop-emblem,.desktop-wordmark { display:none; }
@media(min-width:761px) {
  body { background:radial-gradient(ellipse at 0% 28%,#53297925,transparent 42%),radial-gradient(ellipse at 100% 60%,#63388220,transparent 45%),#0b0911; }
  .shell { width:94%; max-width:none; box-sizing:border-box; padding:0 24px; }
  .shell > header .brand-logo { display:none; }
  .desktop-emblem { display:block; width:104px; height:104px; object-fit:contain; }
  .desktop-wordmark { display:block; font:500 clamp(24px,2.3vw,40px)/1.2 Georgia,serif; letter-spacing:.045em; color:#ffe3a4; text-shadow:0 0 2px #e7b1ff,0 0 12px #a247d9; white-space:nowrap; }
  .shell #grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important; gap:20px; }
  .shell #featuredTop > .feature { grid-column:1 / -1 !important; }
}
@media(min-width:1200px) {
  .shell { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:0 clamp(20px,2vw,44px); }
  .shell > header,.shell > footer { grid-column:1 / -1; }
  .shell > main { grid-column:1; min-width:0; }
  .desktop-rail { display:block; align-self:start; position:sticky; top:28px; margin-top:55px; padding:18px 14px; background:linear-gradient(145deg,#281c34e8,#14101eeb); border:1px solid #76548760; border-radius:18px; }
  .contact-rail { grid-column:2; grid-row:2; }
  .desktop-rail h2 { font:500 20px/1.4 Georgia,"Microsoft YaHei",serif; margin:0 0 18px; color:#eedcfa; }
  .quick-regions { display:grid; gap:8px; }
  .quick-regions button { text-align:left; padding:11px 10px; border-radius:9px; border:1px solid transparent; background:transparent; color:#d8cce5; font:15px/1.4 "Segoe UI",sans-serif; overflow-wrap:anywhere; }
  .quick-regions button:hover,.quick-regions button[aria-pressed=true] { background:#7042a84d; border-color:#b181d2; color:#fff; }
  .contact-rail a,.contact-rail button { display:flex; width:100%; box-sizing:border-box; align-items:center; gap:10px; padding:13px 0; background:none; border:0; border-bottom:1px solid #76548745; text-decoration:none; text-align:left; font:15px/1.4 "Segoe UI",sans-serif; color:#f4eaff; }
  .contact-rail img { width:30px; height:30px; object-fit:contain; flex-shrink:0; }
  .contact-rail small { display:block; margin-top:4px; color:#c6b7d4; font-size:13px; overflow-wrap:anywhere; }
  .rail-copy-status { display:block; font-size:13px; color:#efd49d; margin-top:10px; }
  .desktop-rail :is(a,button):focus-visible { outline:2px solid #d9adf3; outline-offset:3px; }
}
.shell #featuredTop .feature-photo { background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important; background-color:#120d1b; min-height:300px; }
@media(min-width:761px) {
  .shell #featuredTop > .feature { grid-template-columns:minmax(0,1fr) clamp(220px,19vw,320px); }
  .shell #featuredTop .feature-copy { min-width:0; }
  .shell #featuredTop .feature-photo { background-position:left center !important; margin:12px 12px 12px 0; }
}
.shell { display:block; }
.shell > header .brand-logo { display:none; }
.desktop-emblem { display:block; width:104px; height:104px; object-fit:contain; border-radius:14px; }
.desktop-wordmark { display:block; font:500 clamp(24px,2.3vw,40px)/1.2 Georgia,serif; letter-spacing:.045em; color:#ffe3a4; text-shadow:0 0 2px #e7b1ff,0 0 12px #a247d9; white-space:nowrap; }
.contact-dock { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom)); z-index:12; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.contact-toggle { min-height:48px; padding:10px 18px; border:1px solid #c799eb; border-radius:24px; background:#402552; color:#fff; font:16px/1.4 "Segoe UI","Microsoft YaHei",sans-serif; box-shadow:0 5px 22px #0008; }
.contact-dock.expanded .contact-toggle { width:52px; height:52px; padding:0; border-radius:50%; font-size:32px; background:#9670b1; }
.contact-icons { display:flex; flex-direction:column; gap:10px; padding:6px 0; transform-origin:bottom center; animation:contact-reveal .25s ease-out; }
.contact-icons[hidden] { display:none; }
.contact-icons a,.contact-icons button { position:relative; display:grid; place-items:center; width:52px; height:52px; box-sizing:border-box; padding:0; overflow:hidden; border:2px solid #ffffff35; border-radius:50%; background:#21152e; box-shadow:0 4px 16px #0007; }
.contact-icons img { width:100%; height:100%; object-fit:cover; }
.channel-badge { position:absolute; right:0; bottom:0; background:#422264; color:white; font:11px/1.4 sans-serif; padding:0 4px; border-radius:5px; }
.contact-dock .rail-copy-status:empty { display:none; }
.contact-dock .rail-copy-status { max-width:230px; padding:8px 12px; background:#261831; color:#fff; border-radius:10px; font-size:14px; }
.contact-dock :is(a,button):focus-visible { outline:3px solid #e5c0ff; outline-offset:3px; }
@keyframes contact-reveal { from { opacity:0; transform:scale(.85) translateY(12px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .contact-icons { animation:none; } }
@media(min-width:761px) {
  #profileModal .modal-card { width:94% !important; max-width:none !important; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) !important; }
  #profileModal .modal-role { max-width:none; }
}
@media(max-width:760px) {
  .shell > header { height:auto; min-height:88px; gap:10px; flex-wrap:wrap; padding:8px 0; }
  .shell > header .brand { gap:6px; max-width:100%; min-width:0; flex-shrink:1; }
  .desktop-emblem { width:64px; height:64px; flex-shrink:0; }
  .desktop-wordmark { font-size:clamp(18px,5.1vw,30px); letter-spacing:.015em; }
  .shell > header nav { margin-left:auto; }
  .shell #featuredTop .feature-photo { min-height:260px; }
  .contact-dock { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); }
}
.save-color { margin:8px 8px 8px 0; padding:7px 10px; font-size:13px; }
.saved-color-list { display:inline-flex; gap:7px; vertical-align:middle; flex-wrap:wrap; }
/* Desktop-only placement; mobile DOM and reading order stay unchanged. */
@media(min-width:761px) {
  #profileModal .modal-card { grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr) !important; gap:20px !important; }
  #profileModal .modal-main,#profileModal .modal-info,#profileModal .modal-info.has-copy { display:contents !important; }
  #profileModal #modalGallery { grid-column:1 !important; grid-row:1 / 7 !important; align-self:start; }
  #profileModal #modalGallery img:first-child { max-width:440px !important; max-height:720px !important; width:100% !important; height:auto !important; object-fit:contain !important; }
  #profileModal #modalName { grid-column:2; grid-row:1; margin:0 !important; }
  #profileModal .modal-country { grid-column:2; grid-row:2; margin:0 !important; }
  #profileModal #modalRole { grid-column:2; grid-row:3; margin:0 !important; }
  #profileModal #modalBelowGallery { grid-column:3 !important; grid-row:1 / 4 !important; align-self:start; max-width:900px; margin:0 !important; gap:10px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #profileModal #modalBelowGallery img { width:100% !important; height:clamp(210px,24vw,380px) !important; max-height:none !important; aspect-ratio:auto !important; object-fit:cover !important; border:0 !important; padding:0 !important; background:transparent !important; border-radius:6px !important; }
  #profileModal #modalCopy { grid-column:2; grid-row:4; align-self:start; margin:0 !important; padding:0 !important; border:0 !important; overflow-wrap:anywhere; }
  #profileModal .profile-qr-pair { grid-column:3; grid-row:4; align-self:start; margin:0 !important; gap:16px; grid-template-columns:repeat(2,minmax(0,220px)); justify-content:start; }
  #profileModal .profile-qr-pair .profile-qr { margin:0 !important; align-items:flex-start; }
  #profileModal #modalMainCopy { grid-column:2 / 4; grid-row:5; margin:0 !important; }
  #profileModal #modalMainExtra { grid-column:2 / 4; grid-row:6; margin:0 !important; }
  #profileModal .profile-directory { grid-column:1 / -1; grid-row:7; }
}
@media(min-width:1280px) {
  #profileModal .modal-card { grid-template-columns:minmax(220px,440px) minmax(200px,.8fr) minmax(280px,1.2fr) clamp(180px,14vw,260px) !important; }
  #profileModal .profile-directory { grid-column:4 !important; grid-row:1 / 7 !important; position:sticky; top:24px; max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain; padding:0 0 20px 16px; border-top:0; border-left:1px solid #65506c55; }
  #profileModal .directory-results { grid-template-columns:1fr !important; }
}
.saved-color { width:28px; height:28px; min-width:28px; padding:0; border:2px solid #d9b4ee; border-radius:50%; box-shadow:0 1px 5px #0008; }
/* Override legacy has-copy grid rules explicitly; never overlap the portrait. */
@media(min-width:761px) {
  #profileModal .modal-card { max-width:1920px !important; grid-template-columns:minmax(0,.85fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) !important; column-gap:24px !important; }
  #profileModal #modalName { grid-column:2 !important; grid-row:1 !important; align-self:start !important; }
  #profileModal .modal-info > .modal-country { grid-column:2 !important; grid-row:2 !important; }
  #profileModal #modalRole { grid-column:2 !important; grid-row:3 !important; }
  #profileModal #modalBelowGallery { grid-column:3 / 5 !important; grid-row:1 / 4 !important; }
  #profileModal .profile-qr-pair { grid-column:3 !important; grid-row:4 !important; gap:12px; }
  #profileModal #modalCopy { grid-column:4 !important; grid-row:4 !important; min-width:0; }
  #profileModal #modalMainCopy { grid-column:3 / 5 !important; grid-row:5 !important; }
  #profileModal #modalMainExtra { grid-column:3 / 5 !important; grid-row:6 !important; }
  #profileModal .profile-directory { grid-column:1 / -1 !important; grid-row:7 !important; position:static; max-height:none; border-left:0; border-top:1px solid #65506c55; padding:24px 0 0; }
}
@media(min-width:1600px) {
  #profileModal .modal-card { grid-template-columns:minmax(240px,360px) minmax(220px,280px) minmax(280px,440px) minmax(240px,360px) 200px !important; justify-content:start !important; }
  #profileModal .profile-directory { grid-column:5 !important; grid-row:1 / 7 !important; position:sticky; top:24px; max-height:calc(100dvh - 64px); border-top:0; border-left:1px solid #65506c55; padding:0 0 20px 14px; }
}
@media(max-width:760px) {
  #profileModal #modalMainCopy { order:5; }
  #profileModal #modalMainExtra { order:6; }
  #profileModal #modalCopy { order:7; }
  #profileModal .profile-qr-pair { order:8; margin-top:0; }
}
/* Reference layout: portrait and thumbnails on the left, biography and QR on the right. */
@media(min-width:761px) {
  #profileModal .modal-card { width:94% !important; max-width:1100px !important; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important; grid-template-rows:auto auto !important; gap:24px !important; padding:40px 28px !important; }
  #profileModal .modal-main { display:flex !important; flex-direction:column; gap:12px; grid-column:1 !important; grid-row:1 !important; min-width:0; }
  #profileModal .modal-info,#profileModal .modal-info.has-copy { display:flex !important; flex-direction:column; gap:18px; grid-column:2 !important; grid-row:1 !important; min-width:0; }
  #profileModal .profile-summary { display:flex; flex-direction:column; gap:16px; min-width:0; order:0; }
  #profileModal .profile-summary #modalName { margin:0 !important; font-size:clamp(44px,4vw,60px) !important; }
  #profileModal .profile-summary .modal-country { font-size:21px !important; margin:0 !important; }
  #profileModal .profile-summary #modalRole { font-size:21px !important; line-height:1.55 !important; margin:0 !important; }
  #profileModal #modalRole .profile-region { font-size:18px !important; margin:16px 0 0 !important; padding:7px 12px !important; }
  #profileModal #modalGallery { order:0; margin:0 !important; }
  #profileModal #modalGallery img:first-child { width:100% !important; max-width:none !important; height:auto !important; max-height:none !important; object-fit:contain !important; border-radius:8px !important; }
  #profileModal #modalBelowGallery { order:1; --detail-gallery-height:var(--profile-image-height,380px); max-width:none !important; margin:0 !important; padding:0 !important; gap:10px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #profileModal #modalBelowGallery img { height:var(--detail-gallery-height) !important; object-fit:contain !important; object-position:center center !important; border-radius:4px !important; }
  #profileModal #modalCopy { order:1; margin:0 !important; padding:12px 0 0 !important; border-top:1px solid #65506c66 !important; font-size:20px !important; line-height:1.5 !important; }
  #profileModal .profile-qr-pair { order:2; width:100%; margin:0 !important; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #profileModal .profile-qr-pair a { max-width:220px; }
  #profileModal #modalMainCopy { order:2; margin:0 !important; padding:12px 0 0 !important; font-size:21px !important; line-height:1.5 !important; }
  #profileModal #modalMainExtra { order:3; margin:0 !important; padding:12px 0 0 !important; font-size:21px !important; line-height:1.5 !important; }
  #profileModal .profile-directory { grid-column:1 / -1 !important; grid-row:2 !important; position:static; max-height:none; border-left:0; border-top:1px solid #65506c55; padding:20px 0 0; }
}
@media(max-width:760px) {
  #profileModal .profile-summary { display:contents; }
  #profileModal .modal-card { gap:12px !important; }
  #profileModal .modal-info #modalRole,#profileModal .modal-country { font-size:21px !important; }
  #profileModal #modalCopy { line-height:1.5 !important; }
}
/* Original proportions, a shared image height, and no letterbox frames. */
#profileModal #modalBelowGallery { display:grid !important; --detail-gallery-height:auto !important; align-items:start !important; gap:10px !important; }
#profileModal #modalBelowGallery img { display:block; width:100% !important; height:auto !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
@media(max-width:760px) {
  #profileModal #modalBelowGallery { gap:8px !important; overflow:visible; }
  #profileModal #modalBelowGallery img { flex:none; }
}
/* Make the region destination recognizable as an action. */
#profileModal #modalRole button.profile-region {
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:48px; max-width:100%; box-sizing:border-box;
  padding:12px 18px !important; border:2px solid #d5a4ed !important; border-radius:10px;
  font-weight:600 !important; line-height:1.5 !important; text-align:left;
  cursor:pointer; box-shadow:0 3px 14px #ac60dd35;
  text-decoration:underline; text-underline-offset:4px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
#profileModal #modalRole button.profile-region:hover { border-color:#fff !important; box-shadow:0 4px 22px #be76eb66; transform:translateY(-2px); }
#profileModal #modalRole button.profile-region:active { transform:translateY(0); }
#profileModal #modalRole button.profile-region:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { #profileModal #modalRole button.profile-region { transition:none; transform:none; } }

#qrUploadSection[hidden],.editor-internal,.color-effect-preview { display:none !important; }
.compact-editor { display:grid; gap:14px; }
.compact-editor .profile-visibility { display:flex!important; align-items:center; gap:10px; cursor:pointer; margin:0!important; }
.compact-editor .profile-visibility input { width:18px!important; height:18px; margin:0!important; flex:none; accent-color:#bb75ed; }
.admin-library .compact-field:has(.profile-visibility) { margin:10px 0; border-color:#9c66bd; background:#281832; }
.admin-library .compact-field[hidden],.admin-library .admin-choose-hint[hidden] { display:none!important; }
.admin-library .admin-choose-hint { margin:12px 0; color:#e1c0f2; font-size:14px; }
.admin-library .visibility-selected-name { display:block; margin-bottom:8px; color:#f1ddff; }
.admin-library .profile-visibility { display:flex; gap:10px; align-items:center; cursor:pointer; }
.admin-library .profile-visibility input { width:18px; height:18px; flex:none; accent-color:#bb75ed; }
#adminPanel .admin-person-row { display:flex; align-items:center; gap:4px; min-width:0; }
#adminPanel .admin-person-toggle { display:flex; align-items:center; gap:3px; flex:none; font-size:12px; cursor:pointer; }
#adminPanel .admin-person-toggle input { width:18px; height:18px; flex:none; margin:0; accent-color:#bb75ed; }
#adminPanel .admin-person-row>.admin-person { flex:1; }
@media(max-width:600px){#adminPanel .admin-person-row{flex:0 0 154px}#adminPanel .admin-person-row>.admin-person{flex:1 1 auto;min-width:0}}
.compact-selector { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.compact-selector #editorSearch { grid-column:1 / -1; }
.compact-field { min-width:0; padding:12px; border:1px solid #65506c66; border-radius:9px; }
.compact-field > label { display:block; margin:0 0 7px; font-size:16px; }
.compact-editor :is(input:not([type=color]),select,textarea) { box-sizing:border-box; width:100%; margin:0; }
.compact-editor textarea { min-height:90px !important; height:110px; padding:10px !important; resize:vertical; }
.compact-colors { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.compact-colors label { font-size:14px; }
.compact-colors input[type=color] { width:42px !important; height:34px; padding:2px; margin:0; flex:0 0 42px; }
.compact-colors .color-effect-select { width:auto; flex:1 1 130px; padding:6px 8px; margin:0; font-size:14px; }
.compact-colors .save-color { margin:0; padding:6px 8px; font-size:14px; }
.compact-colors .saved-color-list:empty { display:none; }
.compact-colors .saved-color-list { width:100%; margin:0; }
.compact-colors .quick-color-panel{width:100%;padding:10px;border:1px solid #a379b966;border-radius:10px;background:#1d1425}
.compact-colors .quick-color-panel[hidden]{display:none!important}
.compact-colors .quick-color-palette{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
#adminPanel .quick-color-toggle{padding:7px 12px;border:1px solid #9474ab;border-radius:8px;background:#30203b;color:#f0dcff;font-size:13px;cursor:pointer}
#adminPanel .quick-color-swatch{width:30px;height:30px;min-width:30px;padding:0;border:2px solid #ffffffa8;border-radius:9px;box-shadow:0 2px 8px #0008;cursor:pointer}
#adminPanel .quick-color-swatch:hover,#adminPanel .quick-color-swatch:focus-visible{transform:scale(1.12);outline:2px solid #e9c7ff;outline-offset:2px}
#adminPanel .quick-effect-options{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff20}
#adminPanel .quick-effect-title{width:100%;color:#dbc5e7;font-size:13px}
#adminPanel .quick-effect-button{padding:7px 10px;border:1px solid #846795;border-radius:8px;background:#291d33;color:#f1e5f7;font-size:13px;cursor:pointer}
#adminPanel .quick-effect-button[aria-pressed=true]{border-color:#d8a9ff;background:#503165;box-shadow:0 0 0 1px #c897ff88}
#adminPanel .compact-colors input[type=color]{width:46px!important;height:40px;flex-basis:46px;cursor:pointer}
.compact-save { position:sticky; bottom:0; padding:10px 0; background:#191121; z-index:3; }
.compact-save #saveProfile { width:100%; min-height:46px; }
.compact-settings { padding:12px; border-top:1px solid #65506c66; }
.compact-settings summary { cursor:pointer; font-size:16px; }
.compact-settings > :not(summary) { margin-top:12px; }
.auto-contact-note { margin:0; font-size:14px; line-height:1.5; }

#adminPanel .compact-editor textarea { min-height:64px !important; height:64px !important; max-height:none !important; overflow-y:hidden !important; resize:none !important; line-height:1.55 !important; }
#adminPanel .compact-save { display:flex; gap:10px; }
#adminPanel .compact-save #saveProfile { flex:1; width:auto; }
#adminPanel .compact-save #deleteProfile { flex:0 0 auto; min-height:46px; padding:8px 14px; border:1px solid #ec939f; background:#512630; color:#ffe4e8; }
#adminPanel #bannerEditor { display:block; margin:8px 0; padding:14px; border:1px solid #ae82c9; border-radius:10px; }
#adminPanel #bannerEditor > summary { font-size:19px; font-weight:600; cursor:pointer; }
#adminPanel .photo-drop-zone { border:2px dashed #9a78ad; transition:background .15s,border-color .15s; }
#adminPanel .photo-drop-zone.drag-over { border-color:#e8c8ff; background:#52315f; }
#adminPanel .photo-drop-hint { margin:6px 0 12px; color:#dbc4eb; font-size:15px; }

/* Compact editing controls: content stays in its existing order. */
#adminPanel .compact-field[hidden]{display:none!important}
#adminPanel .editor-color-options{margin-top:10px;border-top:1px solid #ffffff12;padding-top:8px}
#adminPanel .editor-color-options>summary{cursor:pointer;color:#cbb3df;font-size:14px;line-height:1.8;list-style-position:inside}
#adminPanel .editor-color-options[open]>summary{margin-bottom:10px}
#adminPanel .editor-color-options .color-effect-select{width:100%;margin-bottom:8px}
#adminPanel .editor-view-tools{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid #ffffff18;padding-top:12px}
#adminPanel .editor-view-tools input[type=search]{flex:1;min-width:180px}
#adminPanel .editor-view-tools label{display:flex;align-items:center;gap:7px;font-size:13px;margin:0;white-space:nowrap}
#adminPanel .editor-view-tools input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:#bc8fe4}
#adminPanel .editor-view-tools button{padding:9px 14px;font-size:13px}
#adminPanel .compact-field{padding:14px 16px}
#adminPanel .compact-field>label{font-size:16px;margin-bottom:8px}
#adminPanel .compact-colors{margin:0;padding:0}
#regionInput{cursor:pointer;min-height:44px;touch-action:manipulation}
#regionInput:focus-visible{outline:2px solid #cda4f0;outline-offset:4px}
/* Focused admin workspace, isolated from the public profile layout. */
#adminPanel.workspace-admin{inset:16px!important;width:auto!important;max-width:1600px!important;margin:auto!important;max-height:calc(100dvh - 32px)!important;padding:24px!important;box-sizing:border-box;overflow:auto!important;border:1px solid #674979;border-radius:18px;background:#17101f!important;z-index:10000!important}
#adminPanel.workspace-admin>h3{font-size:24px;text-shadow:none;margin:0 0 6px}
#adminPanel.workspace-admin #adminNote{font-size:14px;margin:0 80px 22px 0;color:#bfb2cb}
#adminPanel .admin-close{position:absolute;right:20px;top:20px}
#adminPanel .admin-workspace{display:grid;grid-template-columns:230px minmax(320px,1fr) minmax(300px,1fr);gap:20px;align-items:start}
#adminPanel .admin-library,#adminPanel .admin-preview{position:sticky;top:0;min-width:0;max-height:calc(100dvh - 150px);overflow:auto;background:#110c18;border:1px solid #ffffff16;border-radius:12px;padding:14px;box-sizing:border-box}
#adminPanel .admin-library h3{font-size:17px;margin:0 0 14px}
#adminPanel .compact-selector{display:flex;flex-direction:column;gap:10px}
#adminPanel .admin-people{display:grid;gap:6px;margin-top:14px}
#adminPanel button{cursor:pointer;border:1px solid #745188;border-radius:8px;padding:10px 14px;background:#302039;color:#f4eaff;font:inherit;font-size:14px}
#adminPanel button:disabled{opacity:.5;cursor:default}
#adminPanel button:focus-visible,#adminPanel summary:focus-visible{outline:2px solid #dcaaff;outline-offset:3px}
#adminPanel .admin-person{display:flex;align-items:center;gap:10px;padding:8px;text-align:left;background:transparent;border:1px solid transparent;min-width:0}
#adminPanel .admin-person[aria-pressed=true]{background:#3b254c;border-color:#b481d5}
#adminPanel .admin-person img,#adminPanel .admin-avatar{width:42px;height:54px;border-radius:6px;object-fit:cover;flex-shrink:0}
#adminPanel .admin-avatar{font-size:12px;display:grid;place-content:center;background:#302039}
#adminPanel .admin-person strong,#adminPanel .admin-person small{display:block;overflow-wrap:anywhere}
#adminPanel .admin-person small{color:#b7a6c3;font-size:12px;margin-top:4px}
#adminPanel .mobile-profile-picker{display:none}
#adminPanel .admin-forms{min-width:0}
#adminPanel .editor-view-tools{margin-bottom:14px;padding:0;border:0}
#adminPanel .compact-editor{gap:12px}
#adminPanel .admin-preview summary{cursor:pointer;font-size:14px;color:#cfb4e0;margin-bottom:14px}
#adminPanel .draft-preview{display:grid;grid-template-columns:1fr 1fr;gap:14px;overflow-wrap:anywhere;color:#f4eaff;font-size:14px}
#adminPanel .draft-preview>p{grid-column:1/-1;color:#bfb2cb}
#adminPanel .draft-preview img{display:block;width:100%;height:auto;border-radius:5px}
#adminPanel .draft-gallery{display:flex;align-items:flex-start;gap:5px;margin:6px 0}
#adminPanel .draft-gallery img{min-width:0;flex:1;width:0}
#adminPanel .draft-images>div:not(.draft-gallery){margin-top:12px}
#adminPanel .draft-info h2{font-size:30px;line-height:1.2;margin:0 0 12px}
#adminPanel .draft-info>div{margin:12px 0;line-height:1.6}
#adminPanel .draft-region{padding:6px 9px;border:1px solid #88629f;border-radius:8px}
#adminPanel .draft-qr{display:flex;gap:6px}
#adminPanel .draft-qr img{width:calc(50% - 3px);height:auto;object-fit:contain;align-self:flex-start}
#adminPanel .compact-save{position:sticky;bottom:-24px;display:flex;align-items:center;gap:14px;padding:14px 0;margin-top:18px;border-top:1px solid #654479;background:#17101f;z-index:10}
#adminPanel .admin-save-state{flex:1;color:#b8c9bf;font-size:14px}
#adminPanel .admin-save-state[data-dirty=true]{color:#ffd68d}
#adminPanel .compact-save #saveProfile{flex:0 0 auto;min-width:140px;background:#7950a0;border-color:#b888df}
#adminPanel .admin-more{position:relative}
#adminPanel .admin-more summary{cursor:pointer;font-size:14px;white-space:nowrap}
#adminPanel .admin-more #deleteProfile{position:absolute;bottom:35px;right:0;min-width:150px;box-shadow:0 8px 25px #0008}
@media(max-width:1200px){#adminPanel .admin-workspace{grid-template-columns:200px minmax(0,1fr)}#adminPanel .admin-preview{grid-column:2;position:static;max-height:none}}
@media(max-width:700px){#adminPanel.workspace-admin{inset:6px!important;padding:16px!important;max-height:calc(100dvh - 12px)!important}#adminPanel .admin-workspace{display:flex;flex-direction:column;gap:14px}#adminPanel .admin-library,#adminPanel .admin-forms,#adminPanel .admin-preview{width:100%;position:static;max-height:none}#adminPanel .admin-people{display:none}#adminPanel .mobile-profile-picker{display:block}#adminPanel .admin-library{padding:12px}#adminPanel .compact-save{bottom:-16px;gap:8px;flex-wrap:wrap}#adminPanel .admin-save-state{flex-basis:100%}#adminPanel .compact-save #saveProfile{flex:1}#adminPanel .admin-close{right:16px;top:16px}#adminPanel .draft-preview{font-size:14px}}
/* Stored colors must override historical presentation defaults. */
#profileModal #modalName{color:var(--name-text-color,#f4eaff)!important}
#profileModal #modalRole{color:var(--role-text-color,#f4eaff)!important}
#profileModal #modalCopy{color:var(--copy-text-color,#f4eaff)!important}
#profileModal #modalMainCopy{color:var(--main-copy-text-color,#f4eaff)!important}
#profileModal #modalMainExtra{color:var(--main-extra-text-color,#f4eaff)!important}
#profileModal #modalCopy a{color:inherit!important}
#adminPanel.workspace-admin{max-width:1320px!important}
#adminPanel .admin-workspace{grid-template-columns:210px minmax(280px,420px) minmax(260px,1fr)}
#adminPanel .compact-editor textarea{max-height:240px!important;overflow-y:auto!important}
#adminPanel .compact-editor textarea::placeholder{color:currentColor!important;opacity:.65}
#adminPanel .compact-editor #editRole{background:#110d19!important;border-color:#856b96!important}
#adminPanel :is(.admin-forms,.admin-preview,.admin-library) *{box-sizing:border-box}
@media(max-width:1200px){#adminPanel .admin-workspace{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:700px){#adminPanel .compact-editor textarea{max-height:200px!important}}

/* Constrain the workspace; only the working area scrolls above the save bar. */
#adminPanel.workspace-admin{height:calc(100dvh - 32px)!important;overflow:hidden!important;padding:18px!important}
#adminPanel.workspace-admin.open:has(#editor.show){display:flex!important;flex-direction:column}
#adminPanel.workspace-admin #editor.show{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#adminPanel .admin-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:12px}
#adminPanel .compact-save{position:relative;bottom:auto!important;flex-shrink:0;margin:0;padding:12px 0 0}
#adminPanel .admin-workspace{grid-template-columns:180px minmax(0,1fr) minmax(0,.85fr);gap:14px}
#adminPanel .admin-preview{grid-column:auto;position:sticky;top:0;max-height:calc(100dvh - 220px)}
#adminPanel :is(input,textarea,select){min-width:0;max-width:100%;box-sizing:border-box}
#adminPanel .compact-selector :is(input,select){width:100%}
#adminPanel .compact-colors .color-effect-select{flex:1 1 100%;width:100%}
#adminPanel .color-effect-preview{max-width:100%;overflow-wrap:anywhere}
#adminPanel .compact-editor textarea{max-height:160px!important}
#adminPanel .draft-preview{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#adminPanel .draft-preview .draft-region[data-box-effect*="rainbow"]{background:linear-gradient(110deg,#7b46af,#155c7d,#795617,#7b46af)!important}
#adminPanel .draft-preview .draft-region[data-box-effect*="shimmer"]{animation:color-soft-shimmer 3s ease-in-out infinite}
#profileModal #modalCopy :is(a,button){color:inherit!important}
@media(max-width:900px){#adminPanel .admin-workspace{grid-template-columns:155px minmax(0,1fr)}#adminPanel .admin-library{grid-row:1/3}#adminPanel .admin-preview{grid-column:2;position:static;max-height:none}}
@media(max-width:700px){#adminPanel.workspace-admin{height:calc(100dvh - 12px)!important;padding:12px!important}#adminPanel .admin-preview{position:static}#adminPanel .admin-people{display:flex;overflow-x:auto;max-height:100px}#adminPanel .admin-person{flex:0 0 150px}#adminPanel .admin-save-state{flex-basis:100%}#adminPanel .compact-save{padding-bottom:env(safe-area-inset-bottom)}}
@media(min-width:701px) and (max-width:900px){#adminPanel .admin-workspace{grid-template-columns:140px minmax(0,1fr) minmax(0,.85fr)}#adminPanel .admin-library{grid-row:auto}#adminPanel .admin-preview{grid-column:auto;position:sticky;top:0;max-height:calc(100dvh - 220px)}#adminPanel .draft-preview{grid-template-columns:minmax(0,1fr)}}

/* A compact translucent drawer leaves the public page visible. */
#adminPanel.workspace-admin{inset:6dvh 14px auto auto!important;width:min(680px,calc(100vw - 28px))!important;max-width:680px!important;height:88dvh!important;max-height:88dvh!important;margin:0!important;padding:16px!important;background:rgba(23,16,31,.82)!important;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 16px 60px #0006}
#adminPanel.workspace-admin>h3{font-size:21px!important}
#adminPanel.workspace-admin #adminNote{margin:0 90px 12px 0;font-size:13px;line-height:1.5}
#adminPanel .admin-workspace{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px}
#adminPanel .admin-library{grid-row:auto;padding:10px;max-height:calc(88dvh - 145px);background:#110c1880}
#adminPanel .admin-forms{min-width:0}
#adminPanel .admin-preview{position:static;grid-column:auto;max-height:280px;margin-bottom:12px;padding:10px;background:#110c18b8}
#adminPanel .admin-preview summary{margin-bottom:0}
#adminPanel .admin-preview[open] summary{margin-bottom:12px}
#adminPanel .draft-preview{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#adminPanel .compact-field{padding:10px 12px;background:#19112170}
#adminPanel .compact-field>label{font-size:14px}
#adminPanel :is(input:not([type=color]):not([type=checkbox]),textarea,select){background:#110d19ed!important;font-size:14px!important;padding:9px!important}
#adminPanel .compact-editor textarea{min-height:60px!important;max-height:140px!important}
#adminPanel .editor-view-tools{gap:6px}
#adminPanel .editor-view-tools input[type=search]{min-width:120px}
#adminPanel .editor-view-tools label{white-space:normal}
#adminPanel .compact-save{background:#17101fe8}
#adminPanel .admin-close{right:16px;top:16px}
#adminPanel .image-preview{max-height:210px;overflow:auto}
#adminPanel .photo-drop-zone{padding:10px 12px}
#adminPanel .admin-person{gap:6px;padding:6px}
#adminPanel .admin-person img{width:32px;height:42px}
#adminPanel .admin-person strong{font-size:14px}
#adminPanel .admin-library h3{font-size:15px}
/* All photo space exists before the first image download completes. */
#profileModal #modalGallery img:first-child{aspect-ratio:2/3!important;width:100%!important;height:auto!important;object-fit:contain!important;background:#17111d!important}
#profileModal #modalBelowGallery img{aspect-ratio:2/3!important;height:auto!important;object-fit:contain!important;background:#17111d!important}
.profile-qr img{aspect-ratio:1;object-fit:contain}
@media(max-width:600px){#adminPanel.workspace-admin{inset:8px 8px auto auto!important;width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important;padding:12px!important}#adminPanel .admin-workspace{display:flex;flex-direction:column}#adminPanel .admin-library{max-height:none;width:100%}#adminPanel .admin-people{display:flex;max-height:74px}#adminPanel .admin-person{flex:0 0 125px}#adminPanel .mobile-profile-picker{display:block}#adminPanel .admin-preview{max-height:240px}}
@media(min-width:601px){#adminPanel .admin-people{display:grid;overflow:visible;max-height:none}#adminPanel .mobile-profile-picker{display:none}#adminPanel .admin-library{position:sticky;top:0}#adminPanel .admin-forms{width:auto}}
#profileModal.profile-loading .modal-card>:not(.modal-close){visibility:hidden!important}#profileModal.profile-loading::before{content:"正在准备照片…";position:fixed;inset:45% 0 auto;text-align:center;color:#f4eaff;font:16px system-ui;z-index:2;pointer-events:none}#profileModal .image-unavailable{opacity:0!important}
#profileModal.profile-entering .modal-card{will-change:transform,opacity}#profileModal:is(.profile-loading,.profile-entering) .effect-ink{animation-play-state:paused!important}
/* Keep the editor near the My column on a wide directory, with preview visible. */
#adminPanel.workspace-admin{inset:6dvh auto auto clamp(16px,48vw,calc(100vw - 1076px))!important;width:min(1060px,calc(100vw - 32px))!important;max-width:1060px!important;background:rgba(23,16,31,.68)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#adminPanel .admin-workspace{display:grid;grid-template-columns:140px minmax(0,1.15fr) minmax(240px,.85fr);gap:14px}
#adminPanel .admin-preview{position:sticky;top:0;grid-column:auto;max-height:calc(88dvh - 160px);margin:0;background:#110c188c}
#adminPanel .compact-field{background:#19112140}
#adminPanel .compact-save{background:#17101fc4}
#adminPanel .image-preview{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important}
@media(max-width:900px){#adminPanel .admin-workspace{grid-template-columns:130px minmax(0,1fr)}#adminPanel .admin-library{grid-row:1/3}#adminPanel .admin-preview{grid-column:2;grid-row:1;position:static;max-height:250px}#adminPanel .admin-forms{grid-column:2;grid-row:2}}
@media(max-width:600px){#adminPanel.workspace-admin{inset:8px 8px auto auto!important;width:calc(100vw - 16px)!important}#adminPanel .admin-workspace{display:flex}#adminPanel .admin-library{order:0}#adminPanel .admin-preview{order:1}#adminPanel .admin-forms{order:2}}
@media(max-width:760px){#profileModal .profile-directory{content-visibility:auto;contain-intrinsic-size:auto 1600px}}
/* Keep every photo action visible and easy to tap in the narrow editor column. */
#adminPanel #imagePreview .image-slot-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%;}
#adminPanel #imagePreview .image-slot-actions button{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:7px 5px!important;white-space:normal;overflow-wrap:anywhere;word-break:normal;font-size:13px!important;line-height:1.3!important;}
#adminPanel #imagePreview .image-slot-actions .remove-image{grid-column:1/-1;}
#adminPanel #imagePreview{max-height:none!important;overflow:visible!important}
/* Keep the original search controls reachable throughout the directory. */
.shell .search-card{position:sticky!important;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:80;background:rgba(27,18,37,.97)!important;box-shadow:0 8px 28px #0005;padding:14px!important}
.shell .section-head{scroll-margin-top:calc(var(--pinned-search-height,130px) + 24px)}
.shell .home-button{flex-shrink:0;border:1px solid #a780be;border-radius:9px;background:#302039;color:#f4eaff;padding:10px 14px;font:14px system-ui;min-height:44px;cursor:pointer;text-shadow:none}
.shell .home-button:focus-visible{outline:2px solid #e4b9ff;outline-offset:3px}
.shell>header .brand{gap:12px;min-width:0}
@media(max-width:760px){.shell .search-card{padding:10px!important}.shell .search-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}.shell .search-row>.field:first-child{grid-column:1/-1}.shell .search-row>.field{min-height:44px!important;min-width:0;padding:0 10px}.shell .search-row :is(input,select){font-size:16px;min-width:0}.shell .search-btn{min-height:44px!important;padding:0 16px!important;width:auto}.shell .search-card .hint{display:none}.shell .home-button{padding:8px 10px}.shell>header .brand{flex-wrap:wrap}}

/* Keep visitors browsing when a search is empty, and navigation within reach. */
.shell{isolation:isolate}
.active-search,.search-recovery-actions,.search-recovery-regions{display:flex;flex-wrap:wrap;gap:10px}
.active-search{margin:0 0 20px}.active-search[hidden]{display:none}
.search-recovery-button{box-sizing:border-box;min-height:48px;padding:12px 18px;border:1px solid #9c72c4;border-radius:12px;background:#251a35;color:#f8f2ff!important;font:600 16px/1.5 system-ui;cursor:pointer;overflow-wrap:anywhere}
.search-recovery-button.primary{background:#713abd;border-color:#b98be9;box-shadow:0 5px 22px #9c5ae633}
.search-recovery-button:hover{background:#4b2b6a;border-color:#e2bfff}
.search-recovery-button:focus-visible{outline:3px solid #eedbff;outline-offset:3px}
#empty{background:linear-gradient(135deg,#21162e,#120e1a);border:1px solid #6e4c8e;padding:32px 24px;color:#dfcee9}
#empty h3{margin:0 0 10px;font:600 clamp(22px,3vw,28px)/1.4 system-ui;color:#fff}
#empty p{font:16px/1.7 system-ui;margin:12px 0 20px}
#empty .search-recovery-actions,#empty .search-recovery-regions{justify-content:center}
#empty .search-recovery-regions .search-recovery-button{font-weight:400;background:#1c1428}
#profileModal .profile-home{position:fixed;top:calc(12px + env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:4;min-height:48px;padding:12px 22px;border:1px solid #d3a5ff;border-radius:12px;background:#713abd;color:#fff!important;font:700 16px/1.5 system-ui;box-shadow:0 4px 20px #0008;cursor:pointer}
#profileModal .profile-home:hover{background:#8a4dd6}
#profileModal .modal-close{width:48px;height:48px;top:calc(12px + env(safe-area-inset-top))}
#profileModal .modal-card{padding-top:calc(84px + env(safe-area-inset-top))!important}
@media(max-width:480px){#empty{padding:26px 16px}.search-recovery-actions{flex-direction:column}.search-recovery-actions button{width:100%}.active-search .search-recovery-button{font-size:14px}#profileModal .profile-home{left:12px;padding:12px 18px}}
/* Photo controls stay separate from the scrolling, zoomable photograph. */
#modalGallery img,#modalBelowGallery img{cursor:zoom-in}
.photo-viewer{box-sizing:border-box;position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#0d0a12;color:#fff;overflow:hidden}
.photo-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.photo-viewer::backdrop{background:#0d0a12}
.photo-toolbar,.photo-navigation{display:flex;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:#21132e}
.photo-toolbar{padding-top:max(12px,env(safe-area-inset-top))}.photo-counter{margin-right:auto;font:16px system-ui}
.photo-navigation{justify-content:space-between;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.photo-viewer button{min-height:48px;padding:10px 16px;border:1px solid #a678ce;border-radius:10px;background:#653a8b;color:#fff;font:16px system-ui;cursor:pointer}
.photo-viewer button:disabled{opacity:.4;cursor:default}
.photo-stage{min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.photo-stage img{display:block;width:100%;height:100%;object-fit:contain}
.photo-viewer.zoomed .photo-stage img{width:200%;height:200%;max-width:none;object-fit:contain}
/* Keep the enlarged detail sheet centered on desktop and phones. */
@media(min-width:761px){#profileModal .modal-card{margin-left:auto!important;margin-right:auto!important;justify-self:center!important;}}
#directoryPagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:28px auto 48px}
#directoryPagination[hidden]{display:none!important}
#directoryPagination button{min-width:112px;min-height:48px;padding:10px 18px;border:1px solid #a678ce;border-radius:12px;background:#653a8b;color:#fff;font:600 16px system-ui;cursor:pointer}
#directoryPagination button:disabled{opacity:.42;cursor:default}
#directoryPagination span{min-width:100px;text-align:center;color:#f5eaff;font:16px system-ui}
@media(max-width:420px){#directoryPagination{gap:10px}#directoryPagination button{min-width:92px}}
@media(min-width:1600px){#profileModal .modal-card{box-sizing:border-box;width:calc(100vw - 48px)!important;max-width:none!important;grid-template-columns:minmax(180px,.8fr) minmax(180px,.7fr) minmax(240px,1fr) minmax(200px,.9fr) minmax(160px,.5fr)!important;justify-content:center!important;}}
/* Restore the balanced, centered desktop detail layout across wide screens. */
@media(min-width:761px){
  #profileModal .modal-card{box-sizing:border-box;width:min(calc(100% - 48px),1120px)!important;max-width:1120px!important;margin-inline:auto!important;justify-self:center!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;grid-template-rows:auto auto!important;column-gap:clamp(24px,3vw,48px)!important;justify-content:center!important;align-content:start!important}
  #profileModal .modal-main{display:flex!important;grid-column:1!important;grid-row:1!important;min-width:0!important}
  #profileModal .modal-info,#profileModal .modal-info.has-copy{display:flex!important;grid-column:2!important;grid-row:1!important;min-width:0!important}
  #profileModal .profile-directory{grid-column:1/-1!important;grid-row:2!important;position:static!important;max-height:none!important;border-left:0!important;border-top:1px solid #65506c55!important;padding:22px 0 0!important}
}
#profileModal .profile-person-navigation{position:fixed;z-index:5;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:8px}
#profileModal .profile-person-navigation button{min-height:48px;padding:9px 14px;border:1px solid #b88ce0;border-radius:12px;background:#291836f2;color:#fff;font:600 15px/1.3 system-ui;box-shadow:0 4px 18px #0007;cursor:pointer;white-space:nowrap}
#profileModal .profile-person-navigation button:disabled{opacity:.42;cursor:default}
#profileModal .modal-card{scroll-margin-top:0}
@media(max-width:420px){#profileModal .profile-person-navigation{gap:5px}#profileModal .profile-person-navigation button{min-height:44px;padding:7px 10px;font-size:14px}}
@media(min-width:761px){.photo-navigation{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-50%);justify-content:space-between;padding:0 24px;background:transparent;pointer-events:none}.photo-navigation button{pointer-events:auto;min-width:112px;box-shadow:0 5px 24px #0009}.photo-navigation button:disabled{visibility:hidden}.photo-stage{grid-row:2;min-height:0}.photo-viewer[open]{grid-template-rows:auto minmax(0,1fr) 0}}
@media(prefers-reduced-motion:reduce){#profileModal .modal-card{scroll-behavior:auto!important}}

/* Desktop refinement: graphite base with restrained violet accents. */
@media (min-width:1200px) {
  body {
    background:
      radial-gradient(ellipse 58% 520px at 8% 0%, rgba(112,78,145,.12), transparent 72%),
      radial-gradient(ellipse 44% 620px at 100% 38%, rgba(89,70,115,.10), transparent 74%),
      linear-gradient(180deg,#111216 0%,#0d0e12 58%,#101014 100%) !important;
    background-attachment:fixed !important;
  }
  .shell { width:96%; padding-inline:18px; gap:0 clamp(18px,1.5vw,30px); }
  .shell #grid { gap:15px; }
  .shell #grid > .profile-card,
  .shell #grid > .card { border-color:rgba(162,139,183,.20); box-shadow:0 8px 24px rgba(0,0,0,.24); }
  .desktop-rail { background:linear-gradient(145deg,rgba(35,34,41,.96),rgba(22,22,28,.96)); border-color:rgba(166,135,188,.28); }
}
@media (min-width:761px) and (max-width:1199px) {
  body {
    background:
      radial-gradient(ellipse at 8% 0%, rgba(112,78,145,.12), transparent 52%),
      linear-gradient(180deg,#111216 0%,#0d0e12 100%) !important;
  }
}


/* Give the region chip on each directory card a clear lavender-and-champagne finish. */
.shell #grid .card .meta > span {
  color:#f4e5c9 !important;
  background:linear-gradient(135deg,#432d59 0%,#30243d 58%,#25232f 100%) !important;
  border:1px solid rgba(214,184,239,.62) !important;
  border-radius:999px !important;
  padding:7px 16px !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:.025em !important;
  text-shadow:0 1px 3px rgba(0,0,0,.52) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 14px rgba(127,81,163,.28) !important;
}
.shell #grid .card .meta > span:hover { border-color:#f0d6ff !important; box-shadow:inset 0 1px rgba(255,255,255,.16),0 4px 18px rgba(161,104,201,.38) !important; }

/* Quiet luxury refresh: editorial graphite, muted plum and restrained champagne. */
:root {
  --ink:#f2f0f4;
  --muted:#b9b5c0;
  --line:#34323b;
  --paper:#101115;
  --white:#191a20;
}
body {
  background:
    radial-gradient(ellipse 62% 500px at 12% 0%,rgba(119,91,139,.11),transparent 72%),
    radial-gradient(ellipse 42% 600px at 100% 36%,rgba(108,91,122,.08),transparent 75%),
    linear-gradient(180deg,#111216 0%,#0e0f13 58%,#111116 100%) !important;
  color:#f2f0f4 !important;
}
header { border-bottom-color:rgba(207,185,141,.16) !important; }
.search-card {
  background:linear-gradient(135deg,rgba(30,29,36,.96),rgba(23,23,29,.98)) !important;
  border:1px solid rgba(177,157,190,.24) !important;
  border-radius:18px !important;
  box-shadow:0 14px 36px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035) !important;
}
.search-card::before { content:none !important; }
.field { background:#121318 !important; border-color:#45424d !important; border-radius:10px !important; }
.field:focus-within { border-color:#b39ac3 !important; outline-color:#b39ac3 !important; box-shadow:0 0 0 3px rgba(179,154,195,.12) !important; }
.search-btn {
  background:linear-gradient(135deg,#766182,#65536f) !important;
  border:1px solid rgba(220,201,229,.26) !important;
  border-radius:10px !important;
  box-shadow:0 5px 16px rgba(0,0,0,.2) !important;
}
.search-btn:hover { background:linear-gradient(135deg,#887194,#725d7f) !important; box-shadow:0 7px 20px rgba(0,0,0,.25) !important; }
.card {
  background:linear-gradient(155deg,#1c1d23 0%,#17181e 72%,#15161b 100%) !important;
  border:1px solid #373740 !important;
  border-radius:20px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}
.card:hover {
  transform:translateY(-3px) !important;
  border-color:rgba(190,166,205,.58) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.32) !important;
}
.card-photo {
  border-radius:15px !important;
  outline:1px solid rgba(225,216,231,.12) !important;
  outline-offset:-1px;
}
.card:not(.feature) h3 {
  color:#f1edf3 !important;
  text-shadow:0 1px 8px rgba(0,0,0,.28) !important;
  letter-spacing:.005em;
}
.shell #grid .card .meta > span {
  color:#e6d9eb !important;
  background:linear-gradient(135deg,#39313f,#292831) !important;
  border:1px solid rgba(182,157,195,.36) !important;
  border-radius:7px !important;
  padding:5px 10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.015em !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
.count { background:#1b1b21 !important; border-color:#3b3942 !important; color:#d3cbd8 !important; }
.feature {
  background:linear-gradient(110deg,rgba(82,64,91,.46),rgba(29,29,36,.96) 58%) !important;
  border-color:rgba(184,160,195,.28) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.2) !important;
}
.feature-copy h3 { color:#eee7f1 !important; text-shadow:none !important; }
.profile-modal { background:rgba(12,13,17,.96) !important; }
.profile-modal .modal-card {
  background:linear-gradient(145deg,#1a1a20,#14151a 72%) !important;
  border-color:#41404a !important;
  box-shadow:0 24px 76px rgba(0,0,0,.56) !important;
}
.profile-modal .modal-gallery img,
.profile-modal .modal-gallery img:first-child,
.profile-modal .modal-info .below-gallery img { border-radius:16px !important; outline-color:rgba(225,216,231,.14) !important; }
.modal-close { background:#25232b !important; border-color:#5a5360 !important; box-shadow:none !important; }
footer { border-color:#35343c !important; color:#aaa5b0 !important; }
@media(max-width:760px) {
  .search-card { padding:18px !important; border-radius:15px !important; }
  .card { border-radius:17px !important; }
  .card-photo { border-radius:13px !important; }
  .card:hover { transform:none !important; }
}
@media(prefers-reduced-motion:reduce) { .card { transition:none !important; } }

/* Restrained glass finish: translucent surfaces, fine highlights and soft blur. */
.search-card,
.shell #grid > .card:not(.feature),
.desktop-rail,
.count,
.contact-dock .contact-toggle,
.contact-dock .contact-icons a,
.contact-dock .contact-icons button,
.profile-modal .modal-card {
  background-color:rgba(27,28,35,.72) !important;
  border-color:rgba(225,218,233,.19) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 12px 32px rgba(0,0,0,.24) !important;
}
.search-card,
.shell #grid > .card:not(.feature),
.desktop-rail,
.profile-modal .modal-card { backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); }
.search-card {
  background:linear-gradient(135deg,rgba(47,43,55,.78),rgba(25,26,33,.68)) !important;
  border-color:rgba(219,205,230,.24) !important;
}
.shell #grid > .card:not(.feature) {
  background:linear-gradient(150deg,rgba(39,39,47,.78),rgba(23,24,30,.72)) !important;
  border-top-color:rgba(255,255,255,.22) !important;
}
.shell #grid > .card:not(.feature):hover {
  background:linear-gradient(150deg,rgba(49,45,57,.84),rgba(28,28,35,.78)) !important;
  border-color:rgba(213,190,226,.42) !important;
}
.shell #grid > .card:not(.feature) .meta > span,
.count {
  background:rgba(43,39,50,.66) !important;
  border-color:rgba(210,190,220,.26) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.field {
  background:rgba(15,16,21,.68) !important;
  border-color:rgba(196,184,205,.25) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.05) !important;
}
.search-btn,
.contact-dock .contact-toggle {
  background:linear-gradient(135deg,rgba(126,101,143,.84),rgba(83,72,98,.86)) !important;
  border-color:rgba(233,216,242,.32) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.desktop-rail {
  background:linear-gradient(145deg,rgba(40,39,47,.78),rgba(24,24,31,.74)) !important;
}
.contact-dock .contact-icons a,
.contact-dock .contact-icons button {
  background:rgba(38,35,46,.78) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.profile-modal .modal-card {
  background:linear-gradient(145deg,rgba(34,33,41,.94),rgba(20,21,27,.94)) !important;
  border-top-color:rgba(255,255,255,.19) !important;
}
@media(prefers-reduced-transparency:reduce) {
  .search-card,.shell #grid > .card:not(.feature),.desktop-rail,.profile-modal .modal-card { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .search-card,.shell #grid > .card:not(.feature),.desktop-rail,.profile-modal .modal-card { background-color:#1b1c23 !important; }
}

/* Higher-visibility glass pass: let ambient colour and light read through the surfaces. */
body {
  background:
    radial-gradient(ellipse 54% 480px at 9% 4%,rgba(142,105,172,.25),transparent 72%),
    radial-gradient(ellipse 44% 560px at 96% 32%,rgba(108,118,163,.19),transparent 74%),
    radial-gradient(ellipse 40% 420px at 48% 100%,rgba(103,75,120,.16),transparent 75%),
    linear-gradient(180deg,#17171e 0%,#111217 56%,#15141b 100%) !important;
  background-attachment:fixed !important;
}
.search-card,
.shell #grid > .card:not(.feature),
.desktop-rail,
.profile-modal .modal-card {
  background:linear-gradient(145deg,rgba(83,75,94,.56),rgba(40,41,52,.48) 48%,rgba(31,32,41,.58)) !important;
  border:1px solid rgba(244,237,250,.32) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.26),inset 1px 0 rgba(255,255,255,.08),0 16px 38px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(26px) saturate(165%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(165%) !important;
}
.search-card { background:linear-gradient(135deg,rgba(92,80,105,.64),rgba(45,43,56,.52) 60%,rgba(35,36,45,.60)) !important; }
.shell #grid > .card:not(.feature) { background:linear-gradient(145deg,rgba(76,70,86,.56),rgba(39,40,50,.48) 54%,rgba(29,30,38,.58)) !important; }
.shell #grid > .card:not(.feature):hover {
  background:linear-gradient(145deg,rgba(96,83,108,.68),rgba(47,46,59,.58) 55%,rgba(36,37,46,.65)) !important;
  border-color:rgba(247,239,252,.46) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 18px 42px rgba(0,0,0,.34) !important;
}
.desktop-rail { background:linear-gradient(145deg,rgba(74,68,83,.64),rgba(35,36,45,.58)) !important; }
.shell #grid > .card:not(.feature) .meta > span,
.count {
  background:linear-gradient(135deg,rgba(112,96,127,.64),rgba(62,60,73,.62)) !important;
  border-color:rgba(242,232,249,.35) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 4px 12px rgba(0,0,0,.14) !important;
  backdrop-filter:blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(160%) !important;
}
.field {
  background:rgba(21,22,29,.52) !important;
  border-color:rgba(241,235,247,.28) !important;
  backdrop-filter:blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
}
.search-btn,.contact-dock .contact-toggle,
.contact-dock .contact-icons a,.contact-dock .contact-icons button {
  border-color:rgba(247,239,252,.4) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 8px 22px rgba(0,0,0,.24) !important;
}
.profile-modal .modal-card { background:linear-gradient(145deg,rgba(71,65,81,.76),rgba(30,31,39,.78)) !important; }
@media(prefers-reduced-transparency:reduce) {
  .search-card,.shell #grid > .card:not(.feature),.desktop-rail,.profile-modal .modal-card { background-color:#24232b !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* Mirror-glass tuning: make the live page visibly show through the detail overlay. */
body {
  background:
    radial-gradient(ellipse 58% 520px at 8% 2%,rgba(164,126,188,.34),transparent 70%),
    radial-gradient(ellipse 46% 560px at 97% 32%,rgba(123,144,183,.27),transparent 72%),
    radial-gradient(ellipse 48% 480px at 46% 100%,rgba(142,106,154,.23),transparent 76%),
    linear-gradient(180deg,#24222d 0%,#171820 54%,#201d27 100%) !important;
  background-attachment:fixed !important;
}
#profileModal.profile-modal {
  background:rgba(18,17,25,.30) !important;
  -webkit-backdrop-filter:blur(8px) saturate(125%) !important;
  backdrop-filter:blur(8px) saturate(125%) !important;
}
#profileModal .modal-card {
  background:linear-gradient(135deg,rgba(104,91,119,.43),rgba(52,52,67,.34) 52%,rgba(38,40,53,.42)) !important;
  border:1px solid rgba(249,242,255,.48) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.42),inset 1px 0 rgba(255,255,255,.16),0 24px 70px rgba(0,0,0,.32) !important;
  -webkit-backdrop-filter:blur(30px) saturate(155%) !important;
  backdrop-filter:blur(30px) saturate(155%) !important;
}
.shell #grid > .card:not(.feature),
.search-card,
.desktop-rail {
  background:linear-gradient(145deg,rgba(104,92,119,.42),rgba(51,52,66,.32) 54%,rgba(36,38,51,.38)) !important;
  border-color:rgba(250,244,255,.40) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.35),inset 1px 0 rgba(255,255,255,.12),0 18px 42px rgba(0,0,0,.25) !important;
  -webkit-backdrop-filter:blur(30px) saturate(155%) !important;
  backdrop-filter:blur(30px) saturate(155%) !important;
}
.shell #grid > .card:not(.feature):hover { background:linear-gradient(145deg,rgba(124,108,141,.50),rgba(64,63,79,.4) 58%,rgba(43,45,60,.46)) !important; }
.shell #grid > .card:not(.feature) .meta > span,
.count {
  background:linear-gradient(135deg,rgba(143,125,159,.58),rgba(82,80,99,.48)) !important;
  border-color:rgba(255,250,255,.44) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.30),0 5px 15px rgba(0,0,0,.18) !important;
}
@media(prefers-reduced-transparency:reduce) {
  #profileModal.profile-modal { background:rgba(18,17,25,.82) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  #profileModal .modal-card,.shell #grid > .card:not(.feature),.search-card,.desktop-rail { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background-color:rgba(35,33,43,.94) !important; }
}

/* Obsidian mirror palette: luxury black glass with restrained champagne accents. */
body {
  background:
    radial-gradient(ellipse 58% 520px at 8% 2%,rgba(139,125,105,.16),transparent 70%),
    radial-gradient(ellipse 46% 560px at 97% 32%,rgba(92,94,104,.13),transparent 72%),
    radial-gradient(ellipse 48% 480px at 46% 100%,rgba(109,93,77,.11),transparent 76%),
    linear-gradient(180deg,#111113 0%,#090a0c 54%,#111113 100%) !important;
}
#profileModal.profile-modal { background:rgba(5,6,8,.32) !important; }
#profileModal .modal-card {
  background:linear-gradient(140deg,rgba(37,36,36,.45),rgba(14,15,17,.38) 52%,rgba(27,27,29,.46)) !important;
  border-color:rgba(232,222,203,.34) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.28),inset 1px 0 rgba(255,255,255,.10),0 24px 70px rgba(0,0,0,.4) !important;
}
.shell #grid > .card:not(.feature),
.search-card,
.desktop-rail {
  background:linear-gradient(145deg,rgba(39,38,38,.46),rgba(15,16,18,.36) 54%,rgba(25,25,27,.44)) !important;
  border-color:rgba(226,217,201,.28) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.24),inset 1px 0 rgba(255,255,255,.08),0 18px 42px rgba(0,0,0,.34) !important;
}
.shell #grid > .card:not(.feature):hover {
  background:linear-gradient(145deg,rgba(54,52,50,.55),rgba(22,23,25,.44) 54%,rgba(32,31,31,.52)) !important;
  border-color:rgba(236,224,202,.42) !important;
}
.shell #grid .card .meta > span,
#profileModal #modalRole button.profile-region {
  color:#e8dfcc !important;
  background:linear-gradient(135deg,rgba(54,52,49,.82),rgba(25,26,28,.78) 58%,rgba(39,38,36,.82)) !important;
  border:1px solid rgba(208,190,158,.52) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.19),0 4px 14px rgba(0,0,0,.26) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.6) !important;
  backdrop-filter:blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
}
.shell #grid .card .meta > span:hover,
#profileModal #modalRole button.profile-region:hover {
  background:linear-gradient(135deg,rgba(75,70,63,.88),rgba(35,35,36,.84)) !important;
  border-color:rgba(235,218,187,.76) !important;
}
.count {
  color:#ded7ca !important;
  background:rgba(30,30,31,.66) !important;
  border-color:rgba(214,202,181,.26) !important;
}
.search-btn,.contact-dock .contact-toggle {
  background:linear-gradient(135deg,rgba(76,72,65,.88),rgba(35,36,38,.92)) !important;
  border-color:rgba(228,215,190,.36) !important;
  color:#f1e9d8 !important;
}
.contact-dock .contact-icons a,.contact-dock .contact-icons button {
  background:rgba(26,27,28,.76) !important;
  border-color:rgba(224,216,201,.34) !important;
}

/* Wide-screen balance: useful region navigation fills the right rail. */
@media(min-width:1200px) {
  .shell {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 286px;
    align-items:start;
    column-gap:clamp(28px,3vw,52px) !important;
  }
  .shell > header,.shell > footer { grid-column:1 / -1; }
  .shell > main { grid-column:1; min-width:0; }
  .shell > .desktop-explore { grid-column:2; grid-row:2; }
  .shell #grid { width:100%; grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)) !important; gap:18px; }
  .desktop-explore {
    position:sticky;
    top:28px;
    box-sizing:border-box;
    margin-top:58px;
    padding:24px 20px 20px;
    overflow:hidden;
    border:1px solid rgba(232,223,206,.24);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(57,54,50,.76),rgba(23,24,26,.78));
    box-shadow:inset 0 1px rgba(255,255,255,.18),0 18px 42px rgba(0,0,0,.28);
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
  }
  .desktop-explore::before { content:""; display:block; width:46px; height:2px; margin-bottom:19px; background:linear-gradient(90deg,#d9c7a0,rgba(217,199,160,.08)); }
  .desktop-explore-kicker { color:#cbbb9e; font:600 10px/1.4 "Segoe UI",sans-serif; letter-spacing:.2em; }
  .desktop-explore-heading h2 { margin:7px 0 5px; color:#f4efe5; font:500 22px/1.35 "Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:.02em; text-shadow:none; }
  .desktop-explore-heading p { margin:0; color:#aaa69f; font:13px/1.7 "Segoe UI","Microsoft YaHei",sans-serif; text-shadow:none; }
  .desktop-explore-count { margin:21px 0 11px; padding-bottom:12px; border-bottom:1px solid rgba(228,217,197,.16); color:#c7bba7; font:12px/1.4 "Segoe UI",sans-serif; }
  .desktop-explore-regions { display:grid; gap:7px; }
  .desktop-explore-regions button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:42px; padding:9px 11px; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.025); color:#e7e2d9; text-align:left; font:14px/1.4 "Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
  .desktop-explore-regions button small { color:#aaa293; font:11px/1 "Segoe UI",sans-serif; letter-spacing:.08em; }
  .desktop-explore-regions button:hover:not(:disabled),.desktop-explore-regions button[aria-pressed=true] { background:rgba(189,168,134,.13); border-color:rgba(213,194,162,.28); color:#fff8eb; }
  .desktop-explore-regions button:hover:not(:disabled) { transform:translateX(2px); }
  .desktop-explore-regions button:disabled { opacity:.4; cursor:default; }
  .desktop-explore-regions .desktop-explore-all { margin-bottom:3px; background:rgba(192,172,139,.10); border-color:rgba(211,192,160,.19); color:#e7d9bd; }
  .desktop-explore-regions button:focus-visible { outline:2px solid #d9c6a2; outline-offset:2px; }
}
@media(max-width:1199px) { .desktop-explore { display:none; } }
@media(prefers-reduced-motion:reduce) { .desktop-explore-regions button { transition:none; } }

/* The right rail is a practical random picker, not a second region menu. */
.desktop-explore-heading h2 { font-size:25px !important; }
.desktop-explore-heading p { max-width:23em; }
.desktop-explore-count { margin:22px 0 16px !important; color:#d0c5b1 !important; }
.desktop-random-pick {
  display:grid;
  grid-template-columns:30px 1fr 20px;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:58px;
  padding:12px 14px;
  border:1px solid rgba(228,211,176,.48);
  border-radius:13px;
  background:linear-gradient(135deg,rgba(88,79,66,.86),rgba(39,39,39,.9));
  color:#f5eddd;
  text-align:left;
  font:600 15px/1.35 "Segoe UI","Microsoft YaHei",sans-serif;
  box-shadow:inset 0 1px rgba(255,255,255,.23),0 7px 18px rgba(0,0,0,.22);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.desktop-random-pick:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(246,226,189,.78); background:linear-gradient(135deg,rgba(111,97,76,.94),rgba(48,47,46,.94)); }
.desktop-random-pick:active:not(:disabled) { transform:translateY(0) scale(.985); }
.desktop-random-pick:disabled { opacity:.48; cursor:default; }
.random-pick-icon { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(239,222,188,.35); border-radius:50%; color:#e7d2a7; font-size:16px; }
.random-pick-arrow { justify-self:end; color:#d3c09c; font-size:17px; }
.desktop-explore-note { margin:12px 0 0; color:#a9a39a; font:12px/1.55 "Segoe UI","Microsoft YaHei",sans-serif; }
.desktop-random-pick.is-choosing .random-pick-icon { animation:random-pick-glint .55s ease-in-out infinite alternate; }
@keyframes random-pick-glint { from { transform:scale(.9) rotate(-12deg); opacity:.55; } to { transform:scale(1.12) rotate(12deg); opacity:1; } }
@media(prefers-reduced-motion:reduce) { .desktop-random-pick { transition:none; } .desktop-random-pick.is-choosing .random-pick-icon { animation:none; } }

.fate-draw[hidden] { display:none !important; }
.fate-draw { position:fixed; inset:0; z-index:10020; display:grid; place-items:center; padding:22px; overflow:auto; color:#f8f3e9; font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
.fate-draw-backdrop { position:fixed; inset:0; background:rgba(7,7,9,.78); backdrop-filter:blur(24px) saturate(125%); -webkit-backdrop-filter:blur(24px) saturate(125%); animation:fate-backdrop-in .35s ease both; }
.fate-draw-card { position:relative; box-sizing:border-box; width:min(100%,460px); padding:36px clamp(22px,6vw,44px) 26px; overflow:hidden; border:1px solid rgba(238,220,183,.25); border-radius:28px; background:linear-gradient(150deg,rgba(54,51,46,.94),rgba(17,18,20,.97) 54%,rgba(28,25,31,.96)); box-shadow:inset 0 1px rgba(255,255,255,.18),0 28px 100px rgba(0,0,0,.56); text-align:center; animation:fate-card-in .48s cubic-bezier(.2,.8,.2,1) both; }
.fate-draw-card::before { content:""; position:absolute; inset:0 18% auto; height:1px; background:linear-gradient(90deg,transparent,rgba(243,221,177,.75),transparent); }
.fate-draw-close { position:absolute; top:14px; right:16px; width:38px; height:38px; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:rgba(255,255,255,.055); color:#e8e1d5; font:300 26px/1 "Segoe UI",sans-serif; cursor:pointer; }
.fate-draw-kicker { color:#cbbb9e; font:600 10px/1.4 "Segoe UI",sans-serif; letter-spacing:.24em; }
.fate-draw-card h2 { margin:10px 0 5px; color:#f7f1e7; font:400 clamp(25px,5vw,32px)/1.35 "Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:.035em; }
.fate-draw-subtitle { min-height:24px; margin:0; color:#aaa69f; font-size:13px; line-height:1.7; }
.fate-slot { position:relative; display:grid; place-items:center; width:min(100%,340px); min-height:318px; margin:23px auto 19px; padding:13px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(229,213,179,.25); border-radius:22px; background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 38px rgba(0,0,0,.26); }
.fate-slot-glow { position:absolute; inset:10% 10% auto; height:45%; border-radius:50%; background:radial-gradient(ellipse,rgba(224,190,127,.17),transparent 68%); pointer-events:none; }
.fate-reel-viewport { position:relative; z-index:1; width:100%; height:286px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.fate-reel-viewport { perspective:850px; transform-style:preserve-3d; }
.fate-reel-viewport::before,.fate-reel-viewport::after { content:""; position:absolute; z-index:3; top:0; bottom:0; width:1px; background:linear-gradient(transparent,rgba(227,192,120,.72),transparent); pointer-events:none; }
.fate-reel-viewport::before { left:5%; } .fate-reel-viewport::after { right:5%; }
.fate-reel-track { position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; }
.fate-reel-card { flex:0 0 174px; display:grid; grid-template-rows:218px auto 18px; align-content:center; justify-items:center; gap:7px; height:270px; padding:8px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:linear-gradient(155deg,rgba(56,47,42,.96),rgba(24,22,24,.98)); box-shadow:0 10px 26px rgba(0,0,0,.3); color:#fff6e8; text-align:center; }
.fate-reel-card { position:absolute; top:-120px; left:-77px; width:154px; height:240px; grid-template-rows:184px auto 16px; gap:5px; padding:7px; backface-visibility:hidden; }
.fate-reel-card img { display:block; width:100%; height:218px; border-radius:10px; background:#242326; object-fit:cover; }
.fate-reel-card img { height:184px; }
.fate-reel-card strong { max-width:100%; overflow:hidden; color:#fff2cf; font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.fate-reel-card small { color:#c8bda8; font-size:11px; }
.fate-reel-card.no-image { background:radial-gradient(circle at 50% 38%,rgba(195,155,91,.25),transparent 45%),linear-gradient(155deg,#352841,#18161a); }
.fate-draw.is-spinning .fate-reel-card { box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 18px rgba(216,185,122,.12); }
.fate-reel-card.is-winner { z-index:2; border-color:#f3d993; box-shadow:0 0 0 2px rgba(235,202,130,.42),0 0 28px rgba(236,195,104,.72),0 12px 38px rgba(0,0,0,.42); animation:fate-winner-land .9s cubic-bezier(.16,1,.3,1) both,fate-winner-shine 1.8s ease-in-out .9s infinite; }
.fate-draw.is-revealed .fate-slot-glow { background:radial-gradient(ellipse,rgba(224,190,127,.42),transparent 70%); animation:fate-winner-burst .85s ease-out both; }
@keyframes fate-winner-land { 0% { filter:brightness(1.7); } 58% { filter:brightness(1.25); } 100% { filter:brightness(1); } }
@keyframes fate-winner-shine { 0%,100% { box-shadow:0 0 0 2px rgba(235,202,130,.35),0 0 20px rgba(236,195,104,.48),0 12px 38px rgba(0,0,0,.42); } 50% { box-shadow:0 0 0 4px rgba(247,220,159,.55),0 0 38px rgba(246,211,137,.86),0 12px 38px rgba(0,0,0,.42); } }
@keyframes fate-winner-burst { 0% { opacity:.3; transform:scale(.55); } 65% { opacity:1; transform:scale(1.14); } 100% { opacity:1; transform:scale(1); } }
.fate-draw-result { margin:-3px 0 16px; animation:fate-result-in .55s cubic-bezier(.16,1,.3,1) both; }
.fate-draw-result[hidden] { display:none; }
.fate-result-photo { display:block; width:min(100%,184px); height:220px; margin:12px auto 10px; border:1px solid rgba(243,217,147,.72); border-radius:17px; object-fit:cover; box-shadow:0 9px 32px rgba(225,186,99,.25); animation:fate-photo-grow 1.65s cubic-bezier(.16,1,.3,1) both; }
.fate-result-photo[hidden] { display:none; }
@keyframes fate-photo-grow { 0% { opacity:.25; transform:scale(.62); filter:blur(5px) brightness(1.35); } 65% { opacity:1; transform:scale(1.08); filter:blur(0) brightness(1.08); } 100% { opacity:1; transform:scale(1); filter:none; } }
.fate-result-caption { color:#cbbb9e; font-size:12px; letter-spacing:.12em; }
.fate-draw-result h3 { margin:6px 0 2px; color:#fff2cf; font-size:24px; font-weight:500; }
.fate-draw-result p { margin:0; color:#aaa69f; font-size:13px; }
.fate-today-status { margin:13px 0 8px; padding:12px 13px; border:1px solid; border-radius:12px; font-size:16px; font-weight:800; letter-spacing:.01em; }
.fate-today-status.is-on-duty { border-color:rgba(236,207,145,.86); background:linear-gradient(135deg,rgba(84,62,103,.88),rgba(31,24,43,.96)); color:#f5dfa6; box-shadow:0 0 22px rgba(177,137,220,.18),inset 0 1px rgba(255,255,255,.08); }
.fate-today-status.is-off-duty { border-color:rgba(255,160,115,.9); background:linear-gradient(135deg,rgba(131,48,37,.88),rgba(75,31,34,.96)); color:#fff0df; box-shadow:0 0 0 2px rgba(255,160,115,.16),0 0 28px rgba(255,106,72,.26); animation:fate-off-duty-pulse 1.05s ease-in-out 2; }
.fate-today-hint { margin:0 0 10px; color:#e3d6c3; font-size:13px; line-height:1.6; }
.fate-view-today { display:block; width:min(100%,260px); min-height:46px; margin:10px auto 0; padding:10px 15px; border:1px solid rgba(255,225,159,.92); border-radius:12px; background:linear-gradient(135deg,#f1d487,#bb873b); color:#241909; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 5px 20px rgba(236,187,91,.28); }
.fate-view-today:hover { filter:brightness(1.08); transform:translateY(-1px); }
@keyframes fate-off-duty-pulse { 50% { box-shadow:0 0 0 5px rgba(255,160,115,.11),0 0 34px rgba(255,106,72,.4); } }
.today-duty-attention { animation:today-duty-highlight 1.8s ease both; }
@keyframes today-duty-highlight { 0%,100% { filter:none; } 22%,70% { filter:drop-shadow(0 0 18px rgba(255,215,135,.72)); } }
.fate-start,.fate-view-profile { min-width:190px; min-height:48px; padding:11px 20px; border:1px solid rgba(232,210,163,.55); border-radius:14px; background:linear-gradient(135deg,#8f7950,#51483a 55%,#343333); box-shadow:inset 0 1px rgba(255,255,255,.25),0 8px 22px rgba(0,0,0,.24); color:#fff8e9; font:600 14px/1.35 "Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; transition:transform .2s ease,filter .2s ease; }
.fate-start:hover:not(:disabled),.fate-view-profile:hover { transform:translateY(-2px); filter:brightness(1.14); }
.fate-start:disabled { opacity:.65; cursor:wait; }
.fate-start span { margin-left:8px; color:#f1d89e; }
.fate-view-profile { min-width:142px; min-height:42px; margin-top:13px; }
.fate-draw-footnote { margin:14px 0 0; color:#858079; font-size:11px; }
body.fate-draw-open { overflow:hidden; }
@keyframes fate-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes fate-card-in { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes fate-photo-flash { from { opacity:.38; transform:scale(.97) rotate(-1deg); filter:blur(1px); } to { opacity:1; transform:scale(1) rotate(0); filter:blur(0); } }
@keyframes fate-name-flash { from { opacity:.4; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes fate-result-in { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:480px) { .fate-draw { padding:12px; } .fate-draw-card { padding-top:32px; border-radius:23px; } .fate-slot { min-height:292px; margin:18px auto 15px; padding:10px; } .fate-reel-viewport { height:266px; } .fate-reel-card { top:-112px; left:-70px; width:140px; height:224px; grid-template-rows:170px auto 16px; } .fate-reel-card img { height:170px; } .fate-result-photo { width:min(100%,166px); height:200px; } }
@media(prefers-reduced-motion:reduce) { .fate-draw-backdrop,.fate-draw-card,.fate-draw-result { animation:none; } .fate-start,.fate-view-profile { transition:none; } }
.floating-home-button { position:fixed; left:max(14px,env(safe-area-inset-left)); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:10030; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:94px; min-height:48px; padding:10px 16px; border:1px solid rgba(229,197,255,.76); border-radius:999px; background:linear-gradient(135deg,rgba(75,43,98,.97),rgba(38,27,49,.97)); box-shadow:0 7px 24px rgba(0,0,0,.42),0 0 17px rgba(192,143,231,.25),inset 0 1px rgba(255,255,255,.2); color:#fff4ff; font:700 14px/1 "Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; }
.floating-home-button span:first-child { color:#f0d596; font-size:20px; line-height:.8; }
.floating-home-button:hover { transform:translateY(-2px); border-color:#f1d997; background:linear-gradient(135deg,#684487,#33263d); }
.floating-home-button:focus-visible { outline:3px solid #f1d997; outline-offset:3px; }
@media(max-width:600px) { .floating-home-button { left:max(12px,env(safe-area-inset-left)); bottom:calc(12px + env(safe-area-inset-bottom)); min-width:86px; min-height:50px; padding:10px 15px; } }
@media(prefers-reduced-motion:reduce) { .fate-reel-card.is-winner,.fate-draw.is-revealed .fate-slot-glow { animation:none; } .floating-home-button { transition:none; } }
.mobile-fate-promo { display:none; }
@media(max-width:1199px) {
  .mobile-fate-promo { display:grid; justify-items:start; gap:7px; margin:24px 0 10px; padding:21px 20px 18px; border:1px solid rgba(232,223,206,.21); border-radius:19px; background:linear-gradient(145deg,rgba(57,54,50,.72),rgba(23,24,26,.79)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.18); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); }
  .mobile-fate-kicker { color:#cbbb9e; font:600 9px/1.4 "Segoe UI",sans-serif; letter-spacing:.2em; }
  .mobile-fate-promo h2 { margin:1px 0 0; color:#f4efe5; font:500 21px/1.35 "Segoe UI","Microsoft YaHei",sans-serif; }
  .mobile-fate-promo p { margin:0; color:#aaa69f; font:13px/1.6 "Segoe UI","Microsoft YaHei",sans-serif; }
  .mobile-fate-count { margin-top:4px; color:#c7bba7; font:11px/1.4 "Segoe UI",sans-serif; }
  .mobile-fate-open { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:46px; margin-top:5px; border:1px solid rgba(228,211,176,.48); border-radius:13px; background:linear-gradient(135deg,rgba(88,79,66,.86),rgba(39,39,39,.9)); color:#f5eddd; font:600 14px/1.35 "Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; }
  .mobile-fate-open span { color:#e7d2a7; }
}
@media(max-width:600px) { .mobile-fate-promo { margin-top:17px; padding:18px 16px 15px; } }
@media(prefers-reduced-motion:reduce) { .mobile-fate-open { transition:none; } }
.card { position:relative; }
.new-profile-badge { position:absolute; z-index:2; top:12px; left:12px; display:inline-flex; align-items:center; min-height:25px; padding:0 10px; border:1px solid rgba(255,245,212,.66); border-radius:999px; background:linear-gradient(135deg,#f5df9a,#c39a50 55%,#8d6d36); box-shadow:0 4px 15px rgba(218,179,99,.38),inset 0 1px rgba(255,255,255,.65); color:#20190d; font:800 10px/1 "Segoe UI",sans-serif; letter-spacing:.16em; text-shadow:0 1px rgba(255,255,255,.3); pointer-events:none; }
.desktop-feature-photo-launch,.mobile-feature-photo-launch { position:relative; display:block; width:100%; padding:7px; overflow:hidden; border:1px solid rgba(226,199,139,.56); border-radius:15px; background:linear-gradient(145deg,#251532,#16121d 58%,#342714); box-shadow:0 9px 28px rgba(0,0,0,.34),0 0 22px rgba(181,136,236,.12),inset 0 1px rgba(255,255,255,.17); color:#f4dfab; cursor:pointer; text-align:left; }
.desktop-feature-photo-launch img,.mobile-feature-photo-launch img { display:block; width:100%; height:clamp(220px,32vw,410px); border-radius:10px; background:linear-gradient(145deg,#342146,#17131d); object-fit:cover; opacity:1!important; filter:none!important; }
.desktop-feature-photo-launch span,.mobile-feature-photo-launch span { position:absolute; right:15px; bottom:15px; padding:8px 12px; border:1px solid rgba(245,221,169,.48); border-radius:999px; background:rgba(25,17,33,.88); box-shadow:0 5px 16px rgba(0,0,0,.35); color:#f5e4bb; font:600 12px/1.2 "Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:.08em; }
.desktop-feature-photo-launch:hover,.mobile-feature-photo-launch:hover { border-color:rgba(249,225,177,.92); transform:translateY(-2px); }
.desktop-feature-photo-launch:disabled,.mobile-feature-photo-launch:disabled { opacity:.5; cursor:default; }
.mobile-feature-photo-launch { display:none; }
@media(max-width:1199px) { .mobile-feature-photo-launch { display:block; margin-top:7px; } .mobile-feature-photo-launch img { height:clamp(210px,66vw,350px); } }
@media(prefers-reduced-motion:reduce) { .desktop-feature-photo-launch,.mobile-feature-photo-launch { transition:none; } }
@media(min-width:1200px) { .shell { grid-template-columns:minmax(0,1fr) !important; column-gap:0 !important; } .shell > main { grid-column:1 / -1 !important; } }
.shell #featuredTop .feature-photo { position:relative; cursor:pointer; opacity:1 !important; filter:none !important; outline:none; transition:filter .22s ease,transform .22s ease; }
.shell #featuredTop .feature-photo::after { content:var(--fate-entry-label,"✨ 点开看看 · 和谁有缘"); position:absolute; right:16px; bottom:16px; padding:12px 18px; border:1px solid rgba(255,231,176,.88); border-radius:999px; background:linear-gradient(135deg,rgba(50,29,66,.97),rgba(125,89,47,.96)); box-shadow:0 5px 24px rgba(0,0,0,.48),0 0 0 3px rgba(211,174,104,.18),0 0 22px rgba(212,176,104,.34); color:#fff4d4; font:700 14px/1.2 "Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:.045em; animation:fate-entry-pulse 2.2s ease-in-out infinite; }
@keyframes fate-entry-pulse { 0%,100% { box-shadow:0 5px 24px rgba(0,0,0,.48),0 0 0 3px rgba(211,174,104,.16),0 0 16px rgba(212,176,104,.24); } 50% { box-shadow:0 7px 29px rgba(0,0,0,.52),0 0 0 6px rgba(211,174,104,.24),0 0 27px rgba(230,194,124,.48); } }
.shell #featuredTop .feature-photo:hover { filter:brightness(1.08) !important; transform:scale(1.012); }
.shell #featuredTop .feature-photo:focus-visible { outline:3px solid #dfc174; outline-offset:3px; }
@media(max-width:760px) { .shell #featuredTop .feature-photo { min-height:250px; } .shell #featuredTop .feature-photo::after { right:13px; bottom:13px; padding:9px 13px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .shell #featuredTop .feature-photo,.shell #featuredTop .feature-photo::after { transition:none; animation:none; } }

/* Keep the hide control readable beside a full-width profile row at every drawer size. */
#adminPanel .admin-library { min-width:0; }
#adminPanel .admin-person-row { width:100%; flex:none; gap:8px; }
#adminPanel .admin-person-row>.admin-person { order:0; min-width:0; }
#adminPanel .admin-person-toggle { order:1; min-width:78px; min-height:42px; justify-content:center; gap:7px; padding:7px 9px; border:1px solid #9c66bd; border-radius:9px; background:#281832; color:#f0ddfb; font-size:13px; font-weight:700; white-space:nowrap; }
#adminPanel .admin-person-toggle input { width:21px; height:21px; }
#adminPanel .admin-person strong { overflow-wrap:anywhere; }
@media(min-width:901px) { #adminPanel .admin-workspace { grid-template-columns:220px minmax(0,1.15fr) minmax(240px,.85fr); } }
@media(min-width:601px) and (max-width:900px) { #adminPanel .admin-workspace { grid-template-columns:210px minmax(0,1fr); } #adminPanel .admin-preview { grid-column:2; } }
@media(max-width:600px) {
  #adminPanel .admin-workspace { display:flex!important; flex-direction:column!important; }
  #adminPanel .admin-library { width:100%!important; max-height:none!important; position:static!important; }
  #adminPanel .admin-people { display:grid!important; grid-template-columns:minmax(0,1fr); max-height:190px; overflow:auto; }
  #adminPanel .admin-person-row { flex:initial!important; }
  #adminPanel .admin-person { flex:1 1 auto!important; width:auto; }
  #adminPanel .admin-preview { width:100%; max-height:240px; }
}

#featuredTop { margin-bottom:28px; }
#featuredTop > .feature { width:100%; box-sizing:border-box; }

/* Keep discovery controls visible near the top without shrinking the daily roster. */
#featuredTop:not(:has(.feature-today-duty)) { margin-bottom:14px; }
#featuredTop:not(:has(.feature-today-duty)) > .feature { padding:16px !important; min-height:0 !important; }
#featuredTop:not(:has(.feature-today-duty)) .feature-copy { padding:14px !important; gap:8px !important; }
#featuredTop:not(:has(.feature-today-duty)) .feature-copy h3 { margin:0 0 8px !important; font-size:clamp(18px,2vw,25px) !important; }
#featuredTop:not(:has(.feature-today-duty)) .feature-photo { min-height:190px !important; }
#directory > h1 { margin:12px 0 6px !important; font-size:clamp(30px,4vw,54px) !important; line-height:1.1 !important; }
#directory > h1 br { display:none; }
#directory > .intro { margin:0 0 14px !important; }
.fate-draw-card { max-height:calc(100dvh - 36px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.fate-draw-close { position:sticky; top:0; float:right; z-index:5; margin:-18px -22px 0 0; background:#27232b; }
.new-badge-editor { display:flex; align-items:center; gap:10px; padding:12px 14px; margin:10px 0; border:1px solid #876aa0; border-radius:10px; background:#30213f; color:#f4e9ff; cursor:pointer; }
.new-badge-editor input { width:19px; height:19px; accent-color:#c7a45f; }
.new-arrival-overlay { position:fixed; inset:0; z-index:11000; display:grid; place-items:center; padding:20px; background:rgba(7,5,13,.78); backdrop-filter:blur(8px); }
.new-arrival-dialog { width:min(100%,420px); box-sizing:border-box; padding:26px; border:1px solid #b99a61; border-radius:18px; background:#241b30; box-shadow:0 22px 70px #0009; color:#fff; text-align:center; }
.new-arrival-dialog h3 { margin:0 0 10px; font-size:23px; }
.new-arrival-dialog p { margin:0 0 20px; color:#e2d3ec; line-height:1.5; }
.new-arrival-actions { display:grid; gap:10px; }
.new-arrival-actions button { min-height:48px; border:1px solid #a989c0; border-radius:10px; background:#3c2a50; color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.new-arrival-actions button:last-child { border-color:#e3c483; background:#684a28; color:#fff3d7; }
/* Directory cards stay at their normal size, regardless of result count. */
@media(min-width:761px) { .shell #grid { grid-template-columns:repeat(auto-fill,minmax(210px,245px)) !important; justify-content:start; } }
@media(max-width:760px) { #featuredTop:not(:has(.feature-today-duty)) .feature-photo { min-height:170px !important; } #directory > h1 { font-size:32px !important; } }

/* Keep the expanded roster in the same scroll area as the profile editor. */
#adminPanel .admin-scroll > .today-roster-editor { flex-shrink:0; width:100%; box-sizing:border-box; }
#adminPanel .today-roster-editor > summary { min-height:48px; touch-action:manipulation; }
#adminPanel .today-roster-editor > summary:focus-visible { outline:2px solid #d8b4fe; outline-offset:3px; }

/* Readable visibility cards: identity above, action below. */
#adminPanel .admin-person-row{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:9px;box-sizing:border-box;border:1px solid #67477b;border-radius:12px;background:#201429;min-width:0}
#adminPanel .admin-person-row>.admin-person{width:100%;flex:none!important;min-width:0;box-sizing:border-box;padding:0;gap:8px}
#adminPanel .admin-person img{width:38px;height:48px;flex:none;object-fit:cover;border-radius:6px}
#adminPanel .admin-person>span{min-width:0;flex:1}
#adminPanel .admin-person strong{display:block;font-size:14px;line-height:1.4;white-space:normal;word-break:normal;overflow-wrap:anywhere}
#adminPanel .admin-person small{display:block;font-size:12px;line-height:1.4;word-break:normal;overflow-wrap:normal}
#adminPanel .admin-person-toggle,#adminPanel .admin-person-restore{box-sizing:border-box;width:100%;min-width:0;min-height:40px;margin:0;padding:8px;white-space:nowrap;font-size:13px;border-radius:8px}
#adminPanel .admin-person-restore{border:1px solid #bd8be0;background:#754596;color:#fff;font-weight:700;cursor:pointer}
@media(max-width:600px){#adminPanel .admin-people{max-height:290px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#adminPanel .admin-person-row{flex:none!important}}