/* ============================================================
   心华.com shared UI primitives

   主站与 /<feature>/ 独立功能共同使用。这里只放可复用的原子组件；
   页面布局和业务视觉仍分别留在 style.css 与各 feature/style.css。
   ============================================================ */

.i{
  width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

.xh-brand{
  display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none;
  color:var(--rose-deep,#b01e5c);font-weight:800;letter-spacing:.3px;
}
.xh-brand__icon{
  width:40px;height:40px;flex:none;border:2px solid #fff;border-radius:12px;
  object-fit:cover;box-shadow:0 4px 14px rgba(224,64,126,.35);
}
.xh-brand__copy{display:flex;min-width:0;flex-direction:column;line-height:1.12}
.xh-brand__word{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.xh-brand__word b{
  /* 与大标题同款液态玻璃(缩小版: 光穹+果冻景深, 小字号省掉内反射回光);
     fallback 渐变 = 官方立绘取色, 与各站根变量保持一致 */
  color:transparent;font-size:1.34rem;font-weight:900;letter-spacing:1px;
  background:
    radial-gradient(95% 130% at var(--lg-x,32%) -24%,
      rgba(255,255,255,.9) 0%,rgba(255,255,255,.52) 30%,rgba(255,255,255,.22) 42%,rgba(255,255,255,0) 45.5%),
    linear-gradient(180deg,rgba(58,52,120,0) 46%,rgba(58,52,120,.22) 100%),
    var(--grad-glass,linear-gradient(115deg,rgba(244,80,150,.96) 0%,rgba(193,94,181,.95) 34%,rgba(112,130,219,.95) 68%,rgba(120,173,240,.96) 100%));
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))
    drop-shadow(var(--lg-sx,1px) 2px 4px rgba(96,92,185,.3));
}
.xh-brand__word em{
  padding:2px 8px;border-radius:999px;color:var(--rose-deep,#b01e5c);
  background:var(--fill-rose,linear-gradient(120deg,rgba(224,64,126,.13),rgba(139,58,166,.10)));
  box-shadow:0 3px 8px rgba(224,64,126,.14);font-size:.72rem;font-style:normal;
  font-weight:800;letter-spacing:.04em;transform:translateY(-2px);
}
.xh-brand__meta{margin-top:4px;color:var(--sub,#9a9ab0);font-size:10px;letter-spacing:.12em}

/* 输入框高度: 后台与「我的主页」一屏里常有十几个输入框, 11px 的上下内边距叠出
   ~45px 的行高, 成排排下来非常笨重。收到 8px(高约 39px), 仍高于 36px 的舒适下限;
   触屏另有 @media (pointer:coarse) 回到 44px 的点按安全高度(见下)。 */
.field{
  padding:8px 14px;border:1px solid var(--line,#f0dde6);
  border-radius:var(--r-sm,10px);color:var(--ink,#2b2b46);background:#fff;
  font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
@media (pointer:coarse){
  input.field,select.field{padding-top:11px;padding-bottom:11px}
}
.field:focus{
  outline:none;border-color:var(--rose,#e0407e);
  box-shadow:0 0 0 4px rgba(224,64,126,.12);
}
input.field,select.field{min-width:220px}
textarea.field{width:100%;resize:vertical;line-height:1.7}
select.field{
  appearance:none;-webkit-appearance:none;cursor:pointer;border-radius:999px;padding-right:38px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ab0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 15px center / 13px;
}
select.field:hover{border-color:rgba(224,64,126,.38)}
select.field:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0407e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;border-radius:var(--r-sm,10px);padding:11px 20px;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:700;line-height:1.25;text-decoration:none;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;
}
.btn:disabled{cursor:not-allowed;opacity:.5}
.btn-primary{
  color:var(--rose-deep,#b01e5c);
  border:1px solid var(--fill-rose-line,rgba(224,64,126,.35));
  background:var(--fill-rose,linear-gradient(120deg,rgba(224,64,126,.13),rgba(139,58,166,.10)));
  box-shadow:0 6px 16px rgba(224,64,126,.13);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-2,0 8px 30px rgba(176,30,92,.10))}
.btn-ghost{color:var(--indigo,#3d3f8f);border:1px solid var(--line,#f0dde6);background:#fff}
.btn-ghost:hover{border-color:var(--indigo,#3d3f8f);background:#f6f6fc}
.btn-danger{color:#e0396b;border:1px solid #f4c6d6;background:#fff}
.btn-danger:hover{border-color:#e0396b;background:#fdeaf1}
.btn-sm{padding:6px 13px;font-size:.82rem}
.btn-icon{width:36px;height:36px;padding:0}
.btn .i{width:1.05em;height:1.05em}

.xh-dialog{
  width:min(460px,calc(100vw - 28px));border:0;border-radius:22px;padding:0;
  color:var(--ink,#2b2b46);background:#fff;box-shadow:0 30px 80px rgba(51,31,67,.26);
}
.xh-dialog::backdrop{background:rgba(37,28,50,.4);backdrop-filter:blur(5px)}
.xh-dialog__body{position:relative;padding:28px}
.xh-dialog__close{position:absolute;right:12px;top:10px}
.xh-dialog__mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:15px;color:#fff;
  background:linear-gradient(135deg,var(--rose,#e0407e),#bd2d6b);
  box-shadow:0 8px 20px rgba(200,48,109,.22);
}
.xh-dialog__mark .i{width:22px;height:22px;stroke-width:2.5}
.xh-dialog__title{margin:16px 0 6px;font-size:20px}
.xh-dialog__copy{display:flex;gap:7px}
.xh-dialog__copy .field{min-width:0;flex:1}

.xh-spinner{
  display:inline-block;width:34px;height:34px;border:3px solid #f4cadb;
  border-top-color:var(--rose,#e0407e);border-radius:50%;animation:xh-spin .8s linear infinite;
}
@keyframes xh-spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed;z-index:1400;left:50%;top:calc(76px + env(safe-area-inset-top));
  max-width:88vw;padding:12px 24px;border:1px solid rgba(62,198,240,.3);
  border-radius:999px;color:#fff;background:rgba(38,38,74,.94);
  box-shadow:0 12px 40px rgba(38,38,74,.4);backdrop-filter:blur(8px);
  font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(-16px);
  transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  .xh-brand{gap:7px}.xh-brand__icon{width:34px;height:34px;border-radius:10px}
  .xh-brand__word b{font-size:1rem}.xh-brand__word em{padding:1px 6px;font-size:.62rem}
  .xh-brand__meta{display:none}
  .toast{top:calc(66px + env(safe-area-inset-top));padding:10px 16px;font-size:.82rem}
}

@media (prefers-reduced-motion:reduce){
  .btn,.field,.toast{transition-duration:.01ms!important}
  .xh-spinner{animation-duration:.01ms!important;animation-iteration-count:1!important}
}