/* ==========================================================================
   xiaolicat — home page layer (dashboard)
   与 sakura.css 共用变量，类名统一 sh- 前缀，只作用于 #/dashboard
   ========================================================================== */

/* 隐藏 Xboard 原生的 dashboard 卡片（订阅卡 / 快捷卡 / 公告轮播） */
.sh-native-hidden{ display:none !important; }

.sh-home{
  width:100%;
  max-width:1040px;
  min-width:0;
  box-sizing:border-box;
  margin:0 auto;
  padding:2px 0 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:sh-fade .28s ease both;
}
@keyframes sh-fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ------------------------------------------------------------- hero ------ */
.sh-hero{
  position:relative;
  min-height:188px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--sk-line);
  background:#fff url("/theme-ui/bn.jpg") right center / cover no-repeat;
  box-shadow:var(--sk-shadow);
  display:flex;
  align-items:center;
  padding:26px 28px;
}
.sh-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.35) 58%, rgba(255,255,255,0) 78%);
  pointer-events:none;
}
.sh-hero__inner{ position:relative; z-index:2; max-width:min(560px,62%); }
.sh-hero__ann{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px; border-radius:7px;
  background:var(--sk-red); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.2px;
}
.sh-hero__title{
  margin:12px 0 0;
  font-size:27px; line-height:1.28; font-weight:800;
  color:var(--sk-text);
  letter-spacing:-.3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sh-hero__line{ width:44px; height:3px; border-radius:2px; background:var(--sk-red); margin-top:12px; }
.sh-hero__btn{
  position:absolute; right:22px; bottom:20px; z-index:3;
  height:34px; padding:0 18px; border-radius:9px;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
  border:1px solid rgba(17,24,28,.12);
  color:var(--sk-text); font-size:13px; font-weight:600;
  cursor:pointer; transition:.16s;
}
.sh-hero__btn:hover{ background:#fff; border-color:rgba(17,24,28,.22); transform:translateY(-1px); }

/* ------------------------------------------------------------ cards ------ */
.sh-card{
  background:#fff;
  border:1px solid var(--sk-line);
  border-radius:16px;
  box-shadow:var(--sk-shadow);
  padding:16px 18px 18px;
}
.sh-card__head{
  display:flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; color:var(--sk-text);
  margin-bottom:14px;
}
.sh-card__head svg{ width:18px; height:18px; color:var(--sk-red); flex:none; }

/* ------------------------------------------------------- subscription ---- */
.sh-sub__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.sh-sub__plan{ font-size:19px; font-weight:800; letter-spacing:-.2px; }
.sh-sub__tag{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; margin-left:8px;
  border-radius:6px; background:var(--sk-red-ghost); color:var(--sk-red);
  font-size:11.5px; font-weight:700; vertical-align:2px;
}
.sh-sub__remain{ text-align:right; white-space:nowrap; }
.sh-sub__remain b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.2px; }
.sh-sub__remain span{ font-size:11.5px; color:var(--sk-muted); display:inline-flex; align-items:center; gap:4px; }
.sh-sub__remain span svg{ width:12px; height:12px; flex:none; }

.sh-bar{
  position:relative; height:10px; border-radius:99px;
  background:#EFEFF2; overflow:hidden; margin:16px 0 9px;
}
.sh-bar>i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--sk-red) 0%, #D8404A 100%);
  transition:width .5s ease;
}
.sh-sub__meta{ display:flex; justify-content:space-between; align-items:center; gap:4px 10px; flex-wrap:wrap; line-height:1.6; }
.sh-sub__meta small{ font-size:12px; color:var(--sk-muted); display:inline-flex; align-items:center; gap:4px; }
.sh-sub__meta small svg{ width:12px; height:12px; flex:none; }
.sh-sub__meta small em{ font-style:normal; color:var(--sk-red); font-weight:700; }
.sh-sub__warn{
  margin-top:10px; padding:9px 12px; border-radius:10px;
  background:#FFF4F4; border:1px solid #FBD9D9;
  font-size:12.5px; color:#9E1B1B;
}

/* ----------------------------------------------------------- buttons ----- */
.sh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 16px; border-radius:10px;
  font-size:13.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--sk-line); background:#fff; color:var(--sk-text);
  transition:.16s; white-space:nowrap; text-decoration:none;
}
.sh-btn:hover{ background:#F7F8FA; border-color:#E2E3E8; }
.sh-btn--primary{ background:var(--sk-red); border-color:var(--sk-red); color:#fff; }
.sh-btn--primary:hover{ background:var(--sk-red-600); border-color:var(--sk-red-600); }
.sh-btn--ghost{ background:#F5F6F8; border-color:transparent; }
.sh-btn--block{ width:100%; }
.sh-btn svg{ width:16px; height:16px; flex:none; }

/* -------------------------------------------------------- get started ---- */
.sh-start__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sh-start__actions .sh-btn:first-child{ grid-column:1 / -1; }

.sh-tabs{
  display:flex; gap:4px; margin:16px 0 12px;
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  border-bottom:1px solid var(--sk-line);
  overflow-x:auto; scrollbar-width:none;
}
.sh-tabs::-webkit-scrollbar{ display:none; }
.sh-tabs button{
  appearance:none; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; font-size:13px; font-weight:600; color:var(--sk-muted);
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:.15s;
}
.sh-tabs button svg{ width:14px; height:14px; flex:none; }
.sh-tabs button.on{ color:var(--sk-red); border-bottom-color:var(--sk-red); }

.sh-imports{ display:flex; flex-direction:column; gap:8px; }
.sh-imp{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:11px;
  background:#F7F8FA; border:1px solid transparent;
  cursor:pointer; transition:.15s; text-decoration:none; color:inherit;
}
.sh-imp:hover{ background:#fff; border-color:#E6E7EC; box-shadow:0 2px 10px rgba(17,24,28,.05); }
.sh-imp__ico{
  width:32px; height:32px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--sk-line); font-size:15px;
}
.sh-imp__ico svg{ width:17px; height:17px; }
.sh-imp__t{ flex:1; min-width:0; }
.sh-imp__t b{ display:block; font-size:13.5px; font-weight:600; }
.sh-imp__t small{ display:block; font-size:11.5px; color:var(--sk-muted); margin-top:1px; }
.sh-imp__go{ font-size:11.5px; color:var(--sk-red); font-weight:700; flex:none; }

/* ------------------------------------------------------------- grid ------ */
.sh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sh-tile{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  padding:16px; border-radius:15px; background:#fff;
  border:1px solid var(--sk-line); box-shadow:var(--sk-shadow);
  cursor:pointer; transition:.18s; text-decoration:none; color:inherit;
  overflow:hidden;
}
.sh-tile:hover{ transform:translateY(-2px); box-shadow:var(--sk-shadow-hover); }
.sh-tile__ico{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.sh-tile__ico svg{ width:19px; height:19px; }
.sh-tile__ico.i1{ background:#FDE8EC; color:#C62B3B; }
.sh-tile__ico.i2{ background:#EFE9FE; color:#6D4AC4; }
.sh-tile__ico.i3{ background:#E4F6EC; color:#1E8A56; }
.sh-tile__ico.i4{ background:#FDF1DE; color:#B7791F; }
.sh-tile__t b{ display:block; font-size:14px; font-weight:700; }
.sh-tile__t small{ display:block; font-size:12px; color:var(--sk-muted); margin-top:3px; line-height:1.45; }
.sh-tile__arrow{ position:absolute; right:13px; top:13px; color:#C9CCD3; font-size:14px; }

/* ------------------------------------------------------------- footer ---- */
.sh-foot{ text-align:center; font-size:11.5px; color:#A8ADB6; padding:8px 0 2px; }
.sh-foot a{ color:#A8ADB6; text-decoration:none; }

/* ---------------------------------------------------------- modal/qr ----- */
.sh-mask{
  position:fixed; inset:0; z-index:9999;
  background:rgba(17,24,28,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:sh-fade .16s ease both;
}
.sh-modal{
  width:min(400px,100%); background:#fff; border-radius:18px;
  padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.22);
  max-height:86vh; overflow:auto;
}
.sh-modal h3{ margin:0 0 14px; font-size:16px; font-weight:800; }
.sh-modal__body{ font-size:13.5px; line-height:1.7; color:#3A3F47; }
.sh-modal__body p{ margin:0 0 10px; }
.sh-qr{ display:flex; align-items:center; justify-content:center; padding:10px 0 14px; }
.sh-qr canvas{ width:210px; height:210px; border-radius:10px; }
.sh-link{
  display:flex; gap:8px; align-items:center;
  background:#F7F8FA; border:1px solid var(--sk-line);
  border-radius:10px; padding:9px 11px; margin-bottom:12px;
}
.sh-link code{
  flex:1; min-width:0; font-size:11.5px; color:#5A6068;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.sh-modal__row{ display:flex; gap:10px; }
.sh-modal__row .sh-btn{ flex:1; }

/* ------------------------------------------------------------- toast ----- */
.sh-toast{
  position:fixed; left:50%; bottom:86px; transform:translateX(-50%) translateY(10px);
  z-index:10000; background:rgba(17,24,28,.92); color:#fff;
  padding:10px 18px; border-radius:11px; font-size:13px; font-weight:500;
  opacity:0; transition:.22s; pointer-events:none; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.sh-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ----------------------------------------------------------- skeleton ---- */
.sh-skel{
  border-radius:16px; background:#fff; border:1px solid var(--sk-line);
  height:120px; overflow:hidden; position:relative;
}
.sh-skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#F4F5F7 25%,#EDEEF1 37%,#F4F5F7 63%);
  background-size:400% 100%; animation:sh-shine 1.3s infinite linear;
}
@keyframes sh-shine{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ------------------------------------------------------------ mobile ----- */
@media (max-width:820px){
  .sh-home{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); gap:12px; }
  .sh-hero{ min-height:158px; border-radius:14px; padding:18px 18px; background-position:70% center; }
  .sh-hero::before{ background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.85) 46%, rgba(255,255,255,.15) 78%); }
  .sh-hero__inner{ max-width:76%; }
  .sh-hero__title{ font-size:20px; margin-top:9px; }
  .sh-hero__ann{ height:22px; font-size:11.5px; }
  .sh-hero__btn{ right:14px; bottom:14px; height:30px; padding:0 13px; font-size:12px; }
  .sh-card{ border-radius:14px; padding:14px 14px 16px; }
  .sh-sub__plan{ font-size:17px; }
  .sh-sub__remain b{ font-size:15.5px; }
  .sh-start__actions .sh-btn{ height:40px; }
  .sh-grid{ grid-template-columns:1fr; gap:10px; }
  .sh-tile{ padding:14px; }
  .sh-qr canvas{ width:180px; height:180px; }
  .sh-tabs{ max-width:100%; gap:2px; margin:14px 0 10px; }
  .sh-tabs button{ padding:9px 9px; font-size:12.5px; gap:5px; }
  .sh-tabs button svg{ width:13px; height:13px; }
  .sh-imp__ico{ width:30px; height:30px; border-radius:9px; }
  .sh-imp__ico svg{ width:16px; height:16px; }
  .sh-imp{ padding:10px 11px; gap:9px; }
  .sh-sub__meta small{ font-size:11.5px; }
}
@media (max-width:380px){
  .sh-hero__title{ font-size:18px; }
  .sh-start__actions{ grid-template-columns:1fr; }
}

/* 暗色主题兜底（站点默认亮色，开关切换时不至于瞎） */
.dark .sh-card,.dark .sh-tile,.dark .sh-hero,.dark .sh-modal{ background-color:#1A1A1C; border-color:#2A2A2E; }
.dark .sh-hero{ background-image:url("/theme-ui/bn-dark.jpg") !important; background-color:#111113; }
.dark .sh-hero::before{ background:linear-gradient(90deg,#1A1A1C 0%,rgba(26,26,28,.9) 40%,rgba(26,26,28,.2) 80%); }
.dark .sh-hero__title,.dark .sh-card__head,.dark .sh-sub__plan,.dark .sh-tile__t b,.dark .sh-modal h3{ color:#F2F3F5; }
.dark .sh-imp,.dark .sh-btn{ background:#242427; border-color:#303035; color:#E8E9EC; }
.dark .sh-bar{ background:#2A2A2E; }