/* ============================================================
   KidDaily 共享新增组件（5 页通用，配合各页原型 CSS 使用）
   顶栏登录态 / 头像下拉 / 骨架 / 裁剪弹窗 / 空状态 / 确认弹窗 / 通用按钮
   全部颜色经 var() Token 引用
   ============================================================ */

/* 全局护栏：hidden 属性优先于组件 display（原型 CSS 多为 display:flex/grid，
   会覆盖 UA 的 [hidden] 隐藏，导致空状态/骨架/图片占位意外显示） */
[hidden]{display:none !important;}

/* ---------- 顶栏登录态（DESIGN §9.8） ---------- */
.auth-area{display:flex;align-items:center;gap:10px;min-width:180px;justify-content:flex-end;}
.auth-skel{display:flex;align-items:center;gap:10px;}
.auth-skel .sk{border-radius:999px;background:var(--line);
  animation:kdSkel 1.2s ease-in-out infinite;}
.auth-skel .sk--btn{width:76px;height:38px;}
.auth-skel .sk--circle{width:38px;height:38px;border-radius:50%;}
@keyframes kdSkel{0%,100%{opacity:.55;}50%{opacity:1;}}

.kd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--radius-pill);cursor:pointer;user-select:none;
  font-family:inherit;border:none;text-decoration:none;
  transition:transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.kd-btn:active{transform:translateY(1px) scale(.985);}
.kd-btn:focus-visible{box-shadow:var(--focus-ring);outline:none;}
.kd-btn[disabled]{opacity:.5;cursor:not-allowed;}
.kd-btn--primary{background:var(--coral);color:#fff;}
.kd-btn--primary:hover{background:var(--coral-hover);box-shadow:var(--shadow-btn-hover);}
.kd-btn--primary:active{background:var(--coral-active);}
.kd-btn--ghost{background:var(--card);color:var(--ink-3);border:1px solid var(--line-soft);}
.kd-btn--ghost:hover{border-color:var(--ghost-hover-border);background:var(--ghost-hover-bg);}
.kd-btn--danger{background:var(--danger);color:#fff;}
.kd-btn--danger:hover{background:var(--coral-active);}
.kd-btn--md{height:38px;padding:0 18px;font-size:13.5px;font-weight:500;}
.kd-btn--lg{height:44px;padding:0 24px;font-size:14px;font-weight:500;}

/* 按钮内 loading spinner（16px border 动画，文字不变） */
.kd-btn .kd-spin{width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:kdSpin .7s linear infinite;}
.kd-btn--ghost .kd-spin{border-color:var(--faded);border-top-color:var(--muted);}
@keyframes kdSpin{to{transform:rotate(360deg);}}

/* ---------- 头像 + 下拉菜单 ---------- */
.avatar-wrap{position:relative;}
.avatar-btn{display:flex;align-items:center;gap:6px;padding:0;background:none;border:none;cursor:pointer;}
.avatar-btn:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-pill);outline:none;}
.avatar-btn .avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;}
.avatar-btn .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar-btn .avatar span{font-size:16px;font-weight:600;color:var(--coral-deep);}
.avatar-btn svg{color:var(--muted);transition:transform var(--motion-fast) var(--ease-standard);}
.avatar-wrap.is-open .avatar-btn svg{transform:rotate(180deg);}
.avatar-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:168px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);padding:6px;display:none;flex-direction:column;
}
.avatar-wrap.is-open .avatar-menu{display:flex;}
.avatar-menu button{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:none;
  background:none;border-radius:8px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:500;color:var(--ink-2);text-align:left;
  transition:background-color var(--motion-fast) var(--ease-standard);
}
.avatar-menu button:hover{background:var(--field);}
.avatar-menu button svg{color:var(--muted);flex:0 0 auto;}
.avatar-menu button.is-danger{color:var(--danger);}
.avatar-menu button.is-danger svg{color:var(--danger);}
.avatar-menu .menu-sep{height:1px;background:var(--line);margin:4px 6px;}

/* ---------- 空状态（DESIGN §8：插画小图 + 具体文案 + 主按钮） ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:24px 12px;}
.empty-state img{width:120px;height:120px;border-radius:50%;object-fit:cover;
  background:var(--field);}
.empty-state p{font-size:13.5px;color:var(--muted);line-height:20px;max-width:34ch;}
.empty-state .kd-btn{margin-top:4px;}

/* ---------- 行内表单错误（贴近字段，不清空已填） ---------- */
.field-err{display:none;font-size:12.5px;color:var(--danger);line-height:17px;
  align-items:center;gap:5px;}
.field-err.is-show{display:flex;}
.field.has-error input,.field.has-error textarea{border-color:var(--danger) !important;}

/* ---------- 通用弹层（确认框 / 裁剪，独立于各页 .mask 体系） ---------- */
.kd-mask{position:fixed;inset:0;z-index:70;background:var(--mask-bg);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;}
.kd-mask.is-open{opacity:1;visibility:visible;}
.kd-modal{width:560px;max-width:calc(100vw - 48px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-modal);padding:28px;display:flex;flex-direction:column;gap:18px;
  transform:translateY(12px) scale(.98);
  transition:transform var(--motion-slow) var(--ease-out-expo);}
.kd-mask.is-open .kd-modal{transform:translateY(0) scale(1);}
.kd-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.kd-modal-head h3{font-size:20px;font-weight:700;color:var(--ink);line-height:28px;}
.kd-modal-head p{font-size:12.5px;color:var(--muted);line-height:18px;margin-top:4px;}
.kd-modal-close{width:30px;height:30px;border-radius:50%;background:var(--field);border:none;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;
  color:var(--ink-3);transition:background-color var(--motion-fast) var(--ease-standard);}
.kd-modal-close:hover{background:var(--icon-btn-hover);}
.kd-modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.kd-modal-text{font-size:14px;color:var(--ink-2);line-height:22px;}

/* ---------- 裁剪（cropperjs 2.2.0 Web Components，弹窗 + 内联两态） ---------- */
.crop-stage,.crop-stage-host{position:relative;height:320px;
  border-radius:var(--radius-md);overflow:hidden;background:var(--field);}
.crop-stage cropper-canvas,.crop-stage-host cropper-canvas{display:block;width:100%;height:320px;}
/* 竖版（宝贝档案照 227:403）：选区与档案卡同形状、同圆角，加高操作区 */
.crop-stage.is-portrait,.crop-stage-host.is-portrait{height:360px;}
.crop-stage.is-portrait cropper-canvas,.crop-stage-host.is-portrait cropper-canvas{height:360px;}
.crop-modal.is-circle cropper-selection,
.crop-stage-host.is-circle cropper-selection{border-radius:50%;overflow:hidden;}
.crop-modal.is-portrait cropper-selection,
.crop-stage-host.is-portrait cropper-selection{border-radius:16px;overflow:hidden;}
.crop-bottom{display:flex;align-items:center;gap:16px;}
.crop-preview,.crop-live{width:96px;height:96px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:var(--field);border:1px solid var(--line);}
.crop-live{border-radius:var(--radius-md);}
.crop-live cropper-viewer{display:block;width:100%;height:100%;}
.crop-tip{font-size:12px;color:var(--muted);line-height:18px;flex:1 1 auto;}

/* ---------- 密码可见切换 / 输入框行内图标（登录注册页） ---------- */
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap > svg{position:absolute;left:14px;color:var(--label);pointer-events:none;}
.input-wrap input{padding-left:40px !important;}
.input-eye{position:absolute;right:10px;width:32px;height:32px;border:none;background:none;
  border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--muted);transition:background-color var(--motion-fast) var(--ease-standard);}
.input-eye:hover{background:var(--field);}
.input-eye:focus-visible{box-shadow:var(--focus-ring);outline:none;}

/* ---------- 子页返回首页（arrow-left 20px） ---------- */
.btn-back{width:38px;height:38px;border-radius:50%;background:var(--card);
  border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-3);text-decoration:none;flex:0 0 auto;
  transition:border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);}
.btn-back:hover{border-color:var(--ghost-hover-border);background:var(--ghost-hover-bg);}
.btn-back:focus-visible{box-shadow:var(--focus-ring);outline:none;}

/* ---------- 卡片内图标按钮（20px 工具位） ---------- */
.icon-btn{width:36px;height:36px;border-radius:10px;background:var(--field);border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
  color:var(--ink-3);transition:background-color var(--motion-fast) var(--ease-standard);}
.icon-btn:hover{background:var(--icon-btn-hover);}
.icon-btn:focus-visible{box-shadow:var(--focus-ring);outline:none;}

/* ---------- 角色标签（admin / viewer，DESIGN §5.8） ---------- */
.role-tag{display:inline-flex;align-items:center;gap:5px;height:22px;border-radius:999px;
  padding:0 9px;font-size:11px;font-weight:500;line-height:15px;white-space:nowrap;}
.role-tag--admin{background:var(--coral-soft);color:var(--coral-deep);}
.role-tag--viewer{background:var(--field);color:var(--muted);}

/* ---------- Toast 图标（配合各页 .toast 文本） ---------- */
.toast{display:flex;align-items:center;gap:8px;}
.toast svg{flex:0 0 auto;}