/* 象桃桃相册 · 2026.09 品牌：原版桃粉象形标志、墨黑文字、白色界面。 */
:root {
  --tx-accent: #fc8090;
  --tx-accent-hover: #f76c81;
  --tx-on-accent: #171719;
  --tx-accent-ink: #b83252;
  --tx-ink: #1c1c20;
  --tx-muted: #686870;
  --tx-subtle: #898990;
  --tx-surface: #ffffff;
  --tx-canvas: #f7f7f9;
  --tx-field: #f7f7f9;
  --tx-tint: #fffafb;
  --tx-soft: #fff0f3;
  --tx-pink-light: #ffd9e1;
  --tx-border: #eae9ed;
  --tx-border-pink: #f3d8df;
  --tx-shadow: 0 8px 30px rgba(28,28,32,.035);
}
html:root { --background: var(--tx-surface); --foreground: var(--tx-ink); --primary: var(--tx-accent); --radius: 1rem; color-scheme: light; }
html[data-theme=dark]:root {
  --tx-accent:#fc8090; --tx-accent-hover:#ff94a3; --tx-on-accent:#171719; --tx-accent-ink:#ff9eb0;
  --tx-ink:#f1f1f4; --tx-muted:#b3b3bf; --tx-subtle:#93939f;
  --tx-surface:#212228; --tx-canvas:#16171b; --tx-field:#292a32;
  --tx-tint:#282229; --tx-soft:#382730; --tx-pink-light:#55303e;
  --tx-border:#363740; --tx-border-pink:#5b3745; --tx-shadow:0 8px 30px rgba(0,0,0,.10);
  color-scheme:dark;
}
html body { color:var(--tx-ink); background:var(--tx-canvas); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
html body button,html body input,html body textarea,html body select { font-family:inherit; }
html body button:focus-visible,html body a:focus-visible { outline:2px solid var(--tx-accent-ink); outline-offset:3px; }

/* Navigation and desktop canvas share the same proportions in both clients. */
.website .web-app,.website .app-workspace,.admin-app,.customer-app { background:var(--tx-canvas); }
.website .app-sidebar,.admin-app .admin-sidebar { background:var(--tx-surface); border-color:var(--tx-border); }
.website .app-brand { gap:8px; padding:18px 16px; height:100px; }
.website .app-brand img { width:54px; height:54px; flex:none; object-fit:contain; border-radius:12px; }
.website .app-brand b { color:var(--tx-ink); font-size:19px; font-weight:750; letter-spacing:-.5px; }
.website .app-brand small { color:var(--tx-muted); line-height:1.6; font-size:10px; }
.website .app-sidebar nav button,.admin-app .admin-sidebar nav button { min-height:44px; border-radius:12px; transition:background-color .15s,color .15s; }
.website .app-sidebar nav button:hover,.admin-app .admin-sidebar nav button:hover { background:var(--tx-field); }
.website .app-sidebar nav button.selected,.website .app-sidebar nav button.active,.admin-app .admin-sidebar nav button.active { background:var(--tx-soft); color:var(--tx-accent-ink); font-weight:650; }
.website .app-topbar,.admin-app .admin-topbar,.cu-brand { border-color:var(--tx-border); background:var(--tx-surface); }
.website .app-topbar { height:72px; }
.website .app-topbar .primary { padding:11px 18px; border-radius:12px; font-weight:650; }
.website .screen { border-color:var(--tx-border); border-radius:20px; box-shadow:var(--tx-shadow); }
.website .screen .pagehead { border-color:var(--tx-border); }
.website .pagehead h2,.website .pagehead h3 { color:var(--tx-ink); letter-spacing:-.4px; }
.website .search { border:1px solid transparent; background:var(--tx-field); border-radius:12px; color:var(--tx-muted); }
.website .search:focus-within { border-color:var(--tx-border-pink); background:var(--tx-surface); }
.website .segments { padding:4px!important; border:1px solid var(--tx-border); background:var(--tx-field)!important; height:42px!important; border-radius:14px!important; }
.website .segments [data-slot=tabs-trigger] { border-radius:10px!important; color:var(--tx-muted)!important; font-weight:550; }
.website .segments [data-active] { background:var(--tx-accent)!important; color:var(--tx-on-accent)!important; }
.website .btn.primary,.website .pink,.website .app-topbar .primary { background:var(--tx-accent)!important; color:var(--tx-on-accent)!important; }
.website .btn.primary:hover { background:var(--tx-accent-hover)!important; }
.website .btn.soft { background:var(--tx-soft); color:var(--tx-accent-ink); }
.website .field input,.website .field textarea { border-color:var(--tx-border)!important; background:var(--tx-field)!important; border-radius:12px; color:var(--tx-ink); }
.website .field input:focus,.website .field textarea:focus { background:var(--tx-surface)!important; border-color:var(--tx-accent)!important; }
.website .person,.website .row,.website .friend-list-row { border-color:var(--tx-border); }
.website .person p,.website .person small { color:var(--tx-muted); }
.website .category-card,.website .album-card,.profile-list { border-radius:16px; }
.website .album-grid img { border-radius:14px; }
.website .message-stream { background:var(--tx-canvas); }
.website .message.own .bubble { background:var(--tx-pink-light); color:var(--tx-ink); }
.website .chat-composer input { background:var(--tx-field); color:var(--tx-ink); border:1px solid var(--tx-border); }
.website .bottomnav .selected { color:var(--tx-accent-ink)!important; }
.website em { background:var(--tx-accent); color:var(--tx-on-accent); font-weight:650; }

/* Account pages, system dialogs, QR cards and the corrected chat toggles. */
.taoxiang-dialog,.admin-dialog,.friend-details-dialog,.cu-dialog { border-color:var(--tx-border)!important; box-shadow:0 24px 80px rgba(28,28,32,.16); }
.taoxiang-dialog [data-slot=dialog-title],.admin-dialog h2 { color:var(--tx-ink); }
.chat-details .chat-details-header { background:var(--tx-tint); border-color:var(--tx-border); }
.chat-details .chat-details-body { background:var(--tx-canvas); }
.chat-details .chat-settings-switch[data-checked] { background:var(--tx-accent); }
.chat-details .chat-settings-thumb { background:#fff; }
html[data-theme=dark] .chat-details .chat-settings-switch:not([data-checked]) { background:#484952; }
html [data-slot=switch-thumb] { background:#fff; }
html[data-theme=dark] [data-slot=switch]:not([data-checked]) { background:#484952; }
.chat-details .chat-settings-switch:focus-visible { outline:2px solid var(--tx-accent-ink); outline-offset:3px; }
.website .login-page { padding:34px 22px; }
.website .login-page>img { width:112px; height:112px; object-fit:contain; background:white; border-radius:26px; margin-bottom:14px; }
.website .login-page h2 { color:var(--tx-ink); font-size:28px; letter-spacing:-.7px; }
.website .login-page .account-login-form { border-top:1px solid var(--tx-border); padding-top:22px; }
.profile-qr-card>img { border:1px solid var(--tx-border-pink); }
.about img,.qr-logo,.ios-install-logo { border-radius:18px; background:var(--tx-surface); }
.website .h5-brand img { width:48px; height:48px; border-radius:12px; background:var(--tx-surface); }
.cu-brand img { width:50px; height:50px; border-radius:12px; background:var(--tx-surface); }

/* Administrative tools retain semantic status colors, with the new brand on actions. */
.admin-app .admin-brand { gap:8px; padding:21px 14px; color:var(--tx-ink); }
.admin-app .admin-brand img { width:54px; height:54px; border-radius:12px; }
.admin-app .admin-brand b { letter-spacing:2px; color:var(--tx-muted); }
.admin-app .admin-stats>button,.admin-app .admin-card { border:1px solid var(--tx-border); border-radius:18px; box-shadow:var(--tx-shadow); }
.admin-app .admin-stats>button { border-top:3px solid var(--tx-pink-light); }
.admin-app .admin-stats b { color:var(--tx-ink); letter-spacing:-1px; }
.admin-app .admin-primary { background:var(--tx-accent)!important; color:var(--tx-on-accent)!important; border-radius:10px; font-weight:650; }
.admin-app .admin-table-scroll th { background:var(--tx-field); color:var(--tx-muted); }
.admin-app .admin-filters label,.admin-app .admin-filters select { border-radius:10px; border-color:var(--tx-border); }

/* Public brand, download and install pages. */
body.tx-brand-site { background:linear-gradient(150deg,var(--tx-tint),var(--tx-surface) 50%,var(--tx-soft)); }
.site-header .brand img,.site-footer .brand img { width:56px; height:56px; mix-blend-mode:normal; border-radius:14px; }
.site-header .brand span,.site-footer .brand span { color:var(--tx-ink); }
.site-header .brand small,.site-footer .brand small { color:var(--tx-muted); letter-spacing:1px; }
.site-header .header-web,.hero .button.primary,.download-card .button.primary,.connect-panel .button.primary,.version-grid .button.primary { background:var(--tx-accent); color:var(--tx-on-accent); border-color:transparent; font-weight:650; }
.hero .secondary { color:var(--tx-ink); border-color:var(--tx-border); }
.hero h1 { color:var(--tx-ink); letter-spacing:-2px; }
.hero h1 span,.customer-download-hero h1 span { color:var(--tx-accent-ink); }
.hero .floating-logo { border:1px solid var(--tx-border); border-radius:24px; padding:7px; transform:rotate(7deg); }
.hero .floating-logo img { width:88px; height:88px; border-radius:18px; }
.hero .orbit-one { background:var(--tx-pink-light); }
.hero .orbit-two { border-color:var(--tx-ink); opacity:.12; }
.hero .phone-preview { border-color:var(--tx-ink); box-shadow:0 20px 60px rgba(28,28,32,.12); }
.hero .floating-note { background:var(--tx-surface); }
.downloads { background:var(--tx-soft); }
.download-card,.version-grid article,.benefit-grid article,.customer-benefits article,.connect-panel { border-color:var(--tx-border); box-shadow:var(--tx-shadow); }
.download-card.web-card { border-color:var(--tx-accent); }
.site-footer { border-color:var(--tx-border); }

@media(max-width:1000px) and (min-width:701px) {
  .website .app-brand img,.admin-app .admin-brand img { width:44px; height:44px; }
  .website .app-brand b { font-size:16px; }
}
@media(max-width:700px) {
  html[data-mobile-client=true] .website .screen { border-radius:0; box-shadow:none; }
  html[data-mobile-client=true] .website .app-workspace { background:var(--tx-surface); }
  html[data-mobile-client=true] .website .segments { height:40px!important; }
  .website .login-page { padding:22px 4px; }
  .website .login-page>img { width:96px; height:96px; }
  .admin-app .admin-brand img { width:48px; height:48px; }
  .site-header .brand img,.site-footer .brand img { width:46px; height:46px; }
  .hero .floating-logo img { width:64px; height:64px; }
}
@media(prefers-reduced-motion:reduce) {
  .website .app-sidebar nav button,.admin-app .admin-sidebar nav button { transition:none; }
}

#app-startup,.app-recovery { background:var(--tx-canvas); color:var(--tx-ink); }
#app-startup .app-boot-card p,.app-recovery p { color:var(--tx-muted); }
#app-startup .app-boot-card img,.app-recovery img { background:white; border-radius:18px; width:88px; height:88px; }
#app-startup .app-boot-card button { background:var(--tx-accent); color:var(--tx-on-accent); }
/* Physical edges fill the viewport on older iOS/WebViews without dvh/inset. */
#app-startup,.app-boot-card-runtime {
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  z-index:99999;
  box-sizing:border-box;
  width:auto;
  height:auto;
  height:100dvh;
  min-height:0;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  display:block;
  background:var(--tx-canvas);
}
.app-boot-card-runtime { z-index:40; }
#app-startup {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:24px 20px;
  padding-top:calc(24px + env(safe-area-inset-top,0px));
  padding-right:calc(20px + env(safe-area-inset-right,0px));
  padding-bottom:calc(24px + 8vh + env(safe-area-inset-bottom,0px));
  padding-left:calc(20px + env(safe-area-inset-left,0px));
}
/* Center the complete logo/title/message stack, slightly above the midpoint.
   Auto margins collapse on short screens so recovery controls remain scrollable. */
#app-startup>.app-boot-card {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:none;
  gap:24px;
  box-sizing:border-box;
  width:100%;height:auto;
  max-width:420px;
  margin:auto 0;padding:0;
}
#app-startup .app-boot-logo,.app-boot-card-runtime .app-boot-logo {
  width:120px;height:120px;
}
#app-startup .app-boot-logo { flex:none; }
.app-boot-card-runtime .app-boot-logo {
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
#app-startup .app-boot-logo img,.app-boot-card-runtime .app-boot-logo img {
  display:block;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  object-fit:contain;
  background:var(--tx-surface);
  border-radius:24px;
  box-shadow:0 16px 38px #fc80902e;
  animation:tx-logo-pulse 1.8s ease-in-out infinite;
}
.app-boot-card-runtime .app-boot-announcement {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
#app-startup .app-boot-feedback {
  width:100%;
  min-width:0;
  text-align:center;
  overflow-wrap:anywhere;
}
#app-startup .app-boot-feedback>p { margin:0; }
#app-startup-actions { margin-top:24px; }
.app-boot-card-runtime .app-boot-feedback {
  position:absolute;
  top:calc(50% + 84px);right:20px;bottom:20px;left:20px;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  max-width:420px;
  margin:0 auto;
  overflow:auto;
  overscroll-behavior:contain;
  text-align:center;
}
.app-boot-card-runtime .app-boot-feedback p { margin:0 0 18px; }
.app-boot-card-runtime .app-boot-feedback button { width:100%;max-width:240px;margin:0 auto; }
@media (max-height:360px) {
  #app-startup { padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  #app-startup>.app-boot-card { gap:16px; }
  #app-startup .app-boot-logo,.app-boot-card-runtime .app-boot-logo { width:64px;height:64px; }
  .app-boot-card-runtime .app-boot-feedback {
    top:auto;bottom:8px;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    height:calc(50% - 48px);
    height:calc(50% - 48px - env(safe-area-inset-bottom,0px));
    min-height:44px;
  }
  .app-boot-card-runtime .app-boot-feedback { display:flex;align-items:center;justify-content:center;gap:12px; }
  .app-boot-card-runtime .app-boot-feedback p { min-width:0;margin:0;line-height:1.4; }
  .app-boot-card-runtime .app-boot-feedback button { flex:none;width:auto;min-height:44px;margin:0;padding:10px 18px; }
}
@keyframes tx-logo-pulse { 0%,100% { opacity:.76; transform:scale(.96); } 50% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { #app-startup .app-boot-logo img,.app-boot-card-runtime img { animation:none; } }
html[data-theme=dark] .website .message.own .bubble { color:var(--tx-ink); }
html[data-theme=dark] .website .a0,html[data-theme=dark] .website .a1,html[data-theme=dark] .website .a2,html[data-theme=dark] .website .a3,html[data-theme=dark] .website .a4,html[data-theme=dark] .website .a5 { background:var(--tx-soft); color:var(--tx-accent-ink); }
html[data-theme=dark] .website .member { background:#342c25; color:#f0c494; }
html[data-theme=dark] .website .member p,html[data-theme=dark] .website .member span { color:#c7b29e; }
html[data-theme=dark] .tx-member-hero.is-svip,html[data-theme=dark] .website .membership-hero { background:#342c25; border-color:#624c34; }
html[data-theme=dark] .tx-member-access-status>span.enabled { background:#263d35; color:#a2d4bd; }
html[data-theme=dark] .admin-status.pending { background:#413525; color:#e7c88e; }
html[data-theme=dark] .admin-status,html[data-theme=dark] .website .friend-kind,html[data-theme=dark] .website .source-tag { background:#263d35; color:#a2d4bd; }
html[data-theme=dark] .qr,html[data-theme=dark] .qr>img,html[data-theme=dark] .qr-code,html[data-theme=dark] .qr-wrap { background:white; }

/* Shared button geometry and optional skins, including portalled dialogs and guest pages.
   The extra root specificity wins legacy !important capsule/icon rules without changing size. */
html:root {
  --tx-button-radius:6px; --tx-button-detail-radius:4px;
  --tx-3d-edge:#c9c6ce; --tx-3d-shade:#35354926; --tx-3d-light:#ffffffd9;
  --tx-3d-shadow:0 3px 0 var(--tx-3d-edge),0 6px 9px var(--tx-3d-shade),-1px -1px 2px var(--tx-3d-light);
}
html:root[data-theme=dark] {
  --tx-3d-edge:#0e0f14; --tx-3d-shade:#00000066; --tx-3d-light:#ffffff24;
}
html:root[data-button-style=capsule] { --tx-button-radius:999px; --tx-button-detail-radius:999px; }
html:root[data-button-style=square] { --tx-button-radius:0px; --tx-button-detail-radius:0px; }
html:root[data-button-style] body :is(
  button,[role=button],[data-slot=button],input[type=button],input[type=submit],input[type=reset],
  a.btn,a.button,a.primary,a.secondary,a.profile-primary,a.profile-secondary,
  a.unified-button,a.unified-small-button,a.unified-platform-action,a[download],
  a.guest-download-link,a.public-product-download,a.personal-qr-download,a.app-version-download,
  a.customer-preview-primary,a.note-export-primary,a.tx-qr-save,a.product-share-open,
  a.text-action,:where(.message-context-menu) a[role=menuitem]
):not([data-button-style-ignore]):not(:where(.album-view-visual,.circle-cover,.collage,.media-grid button)) { border-radius:var(--tx-button-radius)!important; }
/* Base UI switches render a span, so their tracks need an explicit selector. */
html:root[data-button-style] body :is([role=switch],[data-slot=switch]) {
  border-radius:var(--tx-button-radius)!important;
}
/* Joined controls keep the same silhouette as their individual buttons. */
html:root[data-button-style] body :is(
  .segments,[data-slot=tabs-list],.settings-segments,.account-login-methods,
  .auth-tabs,.auth-switch,.friend-alphabet-rail
) { border-radius:var(--tx-button-radius)!important; }
html:root[data-button-style] body :is(button,[role=button]) :is(
  .ui-menu-icon,.settings-icon,.friend-hub-icon,.album-setting-icon,.call-circle
) { border-radius:var(--tx-button-radius)!important; }
html:root[data-button-style] body :is([data-slot=switch-thumb],.chat-settings-thumb,.settings-switch>span,[data-slot=slider-thumb]) {
  border-radius:var(--tx-button-detail-radius)!important;
}
html:root[data-button-style] body input[type=range]::-webkit-slider-thumb {
  border-radius:var(--tx-button-detail-radius)!important;
}
html:root[data-button-style] body input[type=range]::-moz-range-thumb {
  border-radius:var(--tx-button-detail-radius)!important;
}
html:root[data-button-style=neomorphic] body :is(
  button,[role=button],[data-slot=button],input[type=button],input[type=submit],input[type=reset],
  a.btn,a.button,a.primary,a.secondary,a.profile-primary,a.profile-secondary,
  a.unified-button,a.unified-small-button,a.unified-platform-action,a[download],
  a.guest-download-link,a.public-product-download,a.personal-qr-download,a.app-version-download,
  a.customer-preview-primary,a.note-export-primary,a.tx-qr-save,a.product-share-open,
  a.text-action,:where(.message-context-menu) a[role=menuitem]
):not([data-button-style-ignore]):not(:where(.album-view-visual,.circle-cover,.collage,.media-grid button)) {
  /* Retain the stored neomorphic id for compatibility; every state now stays raised. */
  box-shadow:var(--tx-3d-shadow)!important;
}

/* Keep the managed friend label identifiable while the optional 3D skin is active. */
html:root[data-button-style=neomorphic] body .friend-filters button.is-managed {
  box-shadow:0 0 0 2px var(--tx-surface),0 0 0 4px var(--tx-accent),var(--tx-3d-shadow)!important;
}

/* Multi-line content cards need room for text even with the capsule control style. */
html:root{--tx-content-radius:16px}
html:root[data-button-style=capsule]{--tx-content-radius:24px}
html:root[data-button-style=square]{--tx-content-radius:0px}
html:root[data-button-style] body :is(.website .album-card,.tx-member-plans>button,.album-home-search-category,.friend-album-category,.chat-list .chat-row,.website .chat-person):not([data-button-style-ignore]){border-radius:var(--tx-content-radius)!important}
html:root[data-button-style] body .website .album-card{height:auto;min-width:0;max-width:100%;align-self:start}
html:root[data-button-style] body .website .album-card :is(b,p,small){display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;max-width:100%;height:auto;-webkit-line-clamp:unset;line-clamp:unset}
html:root[data-button-style] body .website .album-card small{padding-bottom:16px}
/* Content sits inside a modest curve; only covers may be cropped. */
html:root[data-button-style=capsule] body .website .album-card :is(b,p,small){padding-inline:16px;text-align:center;line-height:1.5}
html:root[data-button-style=capsule] body .website .album-card>b{padding-top:14px;padding-bottom:6px}
html:root[data-button-style=capsule] body .website .album-card>small{padding-top:2px;padding-bottom:20px}
/* Chat (including guests), friends, circle and albums share one search skin.
   The wrapper owns the outline; a native input must not paint a square inside it. */
html:root[data-button-style] body :is(.website .search,.friend-search,.circle-search-field,.album-home-search-field){
  display:flex;align-items:center;gap:10px;box-sizing:border-box;
  width:100%;min-width:0;max-width:100%;height:auto;min-height:48px;
  padding:0 14px;border:1px solid var(--tx-border);border-radius:var(--tx-button-radius)!important;
  background:var(--tx-field);color:var(--tx-muted);
}
html:root[data-button-style] body :is(.website .search,.friend-search,.circle-search-field,.album-home-search-field)>svg{flex:none;align-self:center}
html:root[data-button-style] body :is(.website .search,.friend-search,.circle-search-field,.album-home-search-field) input{
  display:block;flex:1;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:46px;
  padding:9px 0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--tx-ink);
  font-size:max(16px,var(--tx-font-size,16px))!important;line-height:1.5;outline:0;
  appearance:none;-webkit-appearance:none;
}
html:root[data-button-style] body :is(.website .search,.friend-search,.circle-search-field,.album-home-search-field):focus-within{outline:2px solid var(--tx-accent-ink);outline-offset:2px}
html:root[data-button-style=capsule] body :is(.website .search,.friend-search,.circle-search-field,.album-home-search-field){padding-inline:18px}
html:root[data-button-style=neomorphic] body :is(.website .search,.friend-search,.circle-search-field,.album-home-search-field){box-shadow:var(--tx-3d-shadow)}