/* ==========================================================================
   CASEME —— 我的设计 / 登录与个人中心（两个页面共用）
   1. 页面头  2. 提示条  3. 工具条  4. 设计卡片  5. 空状态
   6. 登录卡片  7. 个人中心  8. 收藏 / 订单 / 地址  9. 对话框
   ========================================================================== */

/* ------------------------------------------------ 1. 页面头部 + 右侧动作 */
.pagehead__row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-6); flex-wrap:wrap;
}
.pagehead__side{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.pagehead__count{ font-size:.88rem; color:var(--ink-2); }
.pagehead__count .num{ font-size:1.5rem; font-weight:700; color:var(--ink); margin-right:2px; }
.pagehead__acts{ display:flex; gap:10px; flex-wrap:wrap; }

/* ------------------------------------------------------- 2. 柔和提示条 */
/* 不是警告，是“顺手说一句”的语气：奶油 / 雾粉的纸片 */
.notebar{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  padding:14px 16px 14px 20px; margin-bottom:var(--sp-6);
  background:var(--rose-soft); border:1px solid rgba(217,142,133,.3);
  border-radius:var(--r-lg); color:var(--rose-ink); box-shadow:var(--shadow-xs);
}
.notebar::before{
  content:""; width:9px; height:9px; flex:none; border-radius:50%;
  background:currentColor; opacity:.62;
}
.notebar--sage{ background:var(--sage-soft); border-color:rgba(126,148,112,.32); color:var(--sage-ink); }
.notebar__text{ flex:1; min-width:20ch; font-size:.9rem; line-height:1.7; }
.notebar__act{ flex:none; }
@media (max-width:560px){ .notebar__act{ width:100%; } }

/* ----------------------------------------------------------- 3. 工具条 */
.toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-5); }
.toolbar[hidden]{ display:none; }
.toolbar__label{ font-size:.74rem; letter-spacing:.16em; color:var(--ink-3); margin-right:4px; }
.toolbar__spacer{ flex:1; }

/* --------------------------------------------------------- 4. 设计网格 */
.dgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:var(--sp-5); }
.dgroup{ margin-bottom:var(--sp-8); }
.dgroup:last-child{ margin-bottom:0; }
.dgroup__head{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.dgroup__head::after{ content:""; flex:1; height:1px; background:var(--line); }

.dcard{ display:flex; flex-direction:column; overflow:hidden; }
.dcard__art{
  aspect-ratio:9/16; background:var(--paper-2);
  display:grid; place-items:center; padding:14px 14px 0; overflow:hidden;
}
/* 壳图是内联 SVG（width:100% / height:auto），max-height 兜底防止溢出裁切 */
.dcard__art svg{ width:100%; height:100%; max-height:100%; }
.dcard__fallback{ width:84px; opacity:.55; margin:auto; }
.dcard__body{ display:flex; flex-direction:column; gap:5px; padding:16px 18px 18px; flex:1; }
.dcard__top{ display:flex; align-items:flex-start; gap:10px; justify-content:space-between; }
.dcard__name{ font-size:1.06rem; line-height:1.45; }
.dcard__meta{ margin-top:2px; }
.dcard__acts{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);
}
.dcard__acts .dcard__push{ margin-left:auto; }
@media (max-width:400px){ .dcard__acts .btn{ flex:1; } }

/* ----------------------------------------------------------- 5. 空状态 */
.empty__acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:var(--sp-5); }
.empty--flush{ border:0; background:transparent; box-shadow:none; padding:var(--sp-4) var(--sp-3); }

/* ------------------------------------------------------- 6. 登录卡片 */
.view--off{ display:none !important; }
.auth{ width:min(580px,100%); margin-inline:auto; }
.auth__card{ padding:clamp(20px,4vw,32px); }
.auth__tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-5); }
.auth__pane{ display:flex; flex-direction:column; gap:var(--sp-4); }
.auth__pane[hidden]{ display:none; }
.auth__head{ margin-bottom:var(--sp-1); }
.auth__switch{ margin-top:2px; font-size:.86rem; color:var(--ink-2); text-align:center; }
.auth__switch .tlink{ font-size:.86rem; }
.auth__note{ margin-top:var(--sp-4); text-align:center; }

.field[hidden]{ display:none; }
.field__row{ display:flex; gap:8px; align-items:stretch; }
.field__row .input{ flex:1; min-width:0; }
.field__rowbtn{ flex:none; }

.oauth{ display:flex; flex-direction:column; gap:10px; }
.oauth__dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.oauth__dot--wx{ background:var(--sage); }
.oauth__dot--xhs{ background:var(--rose); }
.oauth__dot--apple{ background:var(--ink); }

/* -------------------------------------------------------- 7. 个人中心 */
.account{ display:grid; grid-template-columns:250px 1fr; gap:var(--sp-6); align-items:start; }
.account__side{ display:flex; flex-direction:column; gap:var(--sp-4); position:sticky; top:calc(var(--nav-h) + 20px); min-width:0; }
.account__who{ padding:18px 20px; background:var(--paper-2); border-color:transparent; box-shadow:none; }
.account__name{ font-family:var(--font-display); font-size:1.22rem; font-weight:700; margin-top:8px; line-height:1.4; }
.account__nav{ display:flex; flex-direction:column; gap:4px; }
.account__tab{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 18px; border-radius:var(--r-pill); font-size:.92rem; color:var(--ink-2);
  border:1px solid transparent;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.account__tab:hover{ background:var(--white); color:var(--ink); border-color:var(--line); transform:translateX(2px); }
.account__tab:active{ transform:scale(.985); }
.account__tab.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600; }

.account__panels{ min-width:0; }
.account__panel{ padding:clamp(20px,3.4vw,30px); }
.account__panel[hidden]{ display:none; }
.account__panelhead{ margin-bottom:var(--sp-5); }
.account__panelhead .tlink{ flex:none; }
@media (max-width:900px){
  .account{ grid-template-columns:1fr; gap:var(--sp-5); }
  .account__side{ position:static; }
  .account__nav{
    flex-direction:row; gap:8px; overflow-x:auto; padding:2px 2px 10px; min-width:0;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .account__tab{
    width:auto; white-space:nowrap; padding:9px 16px;
    background:var(--white); border-color:var(--line);
  }
  .account__tab:hover{ transform:none; }
  .account__tab.is-on{ background:var(--ink); border-color:var(--ink); }
}

/* 我的设计：个人中心里的迷你卡 */
.minilist{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:860px){ .minilist{ grid-template-columns:1fr; } }
.mini{
  display:flex; gap:14px; align-items:center; padding:12px;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--white);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mini:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--line); }
.mini__art{
  width:56px; height:92px; flex:none; border-radius:10px; overflow:hidden;
  background:var(--paper-2); display:grid; place-items:center; padding:4px;
}
.mini__art svg{ width:100%; height:100%; max-height:100%; }
.mini__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mini__name{ font-weight:600; font-size:.94rem; }

/* ------------------------------------------------- 8. 收藏 / 订单 / 地址 */
.likegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-4); }
.likecard{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--white);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.likecard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.likecard__art{ display:grid; place-items:center; aspect-ratio:3/4; background:var(--paper-2); padding:10px 18px 0; overflow:hidden; }
.likecard__art svg{ width:100%; height:100%; max-height:100%; }
.likecard__body{ display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px; flex:1; }
.likecard__name{ font-weight:600; font-size:.9rem; line-height:1.5; }
.likecard__del{ align-self:flex-start; margin-top:8px; font-size:.78rem; color:var(--ink-3); border-color:transparent; }
.likecard__del:hover{ color:var(--rose-ink); border-color:var(--rose); }

.orderrow{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  padding:16px 18px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--white);
}
.orderrow + .orderrow{ margin-top:12px; }
.orderrow__no{ font-weight:600; font-size:.92rem; }
.orderrow__total{ font-size:1.05rem; font-weight:600; }

.addr{ padding:18px 20px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--white); }
.addr__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.addr__name{ font-weight:600; }
.addr__line{ margin-top:4px; max-width:46ch; }
.addr__acts{ display:flex; gap:8px; align-items:center; flex:none; }
.addrform{ display:flex; flex-direction:column; gap:var(--sp-4); max-width:540px; }

/* ----------------------------------------------------------- 9. 对话框 */
.dialog__title{ padding-right:28px; }
.dialog__text{ margin-top:10px; font-size:.92rem; }
.dialog__acts{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:var(--sp-5); }
@media (max-width:480px){ .dialog__acts .btn{ flex:1; } }