/* ==========================================================================
   准星站 · 战术规格书风
   --------------------------------------------------------------------------
   布局：左侧固定信息栏（标题 + 分面筛选 + 合计）  ⁄  右侧准星网格
   语言：切角几何、1px 冷灰描边、红色仅用于选中与悬停
   色板：深蓝灰底 + 瓦洛兰特红（参考 valte.cn）
   ========================================================================== */

:root{
  --color-primary:#E03030;          /* 承载白色文字的实心红（对比度 4.53:1） */
  --color-primary-bright:#FF4655;   /* 品牌红：描边 / 发光 / 强调 */
  --color-primary-soft:#FF7B7B;
  --color-on-primary:#FFFFFF;

  --color-background:#151C28;
  --color-foreground:#E7EDF5;
  --color-muted:#2A3042;
  --color-muted-foreground:#A0AEC0;
  --color-border:rgba(255,255,255,.10);
  --color-ring:#FF4655;

  --hair:rgba(255,255,255,.09);
  --preview-1:#6B737B;
  --preview-2:#4B5259;
  --preview-label:#0D131A;

  --font-display:'Russo One','Chakra Petch','Segoe UI',system-ui,sans-serif;
  --font-body:'Chakra Petch','Segoe UI',system-ui,-apple-system,'Microsoft YaHei',sans-serif;

  --t-fast:150ms cubic-bezier(.4,0,.2,1);
  --t:220ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  min-height:100%;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  color:var(--color-foreground);
  background:var(--color-background);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.02em;margin:0;}

button,input,textarea,output{font:inherit;color:inherit;}

:focus-visible{
  outline:2px solid var(--color-ring);
  outline-offset:2px;
  border-radius:6px;
}

[hidden]{display:none !important;}

.page-gallery{
  background:
    radial-gradient(880px 520px at 90% -10%, rgba(255,70,85,.10), transparent 62%),
    radial-gradient(700px 420px at 0% 100%, rgba(255,70,85,.045), transparent 60%),
    var(--color-background);
  background-attachment:fixed;
}

/* ==========================================================================
   两栏骨架
   ========================================================================== */
.layout{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:clamp(20px,2.6vw,34px);
  align-items:start;
  width:100%;                      /* 铺满左右两侧，不再居中收窄 */
  padding:0 clamp(16px,1.6vw,40px);
}

.sidebar{
  position:sticky;
  top:0;
  padding:clamp(38px,5vw,62px) 26px clamp(38px,5vw,62px) 0;
  border-right:1px solid var(--hair);
}

.content{
  padding:clamp(38px,5vw,62px) 0 clamp(48px,7vw,88px);
}

/* ==========================================================================
   侧栏：标题
   ========================================================================== */
.eyebrow{
  position:relative;
  margin:0 0 12px;
  padding-left:26px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3em;
  color:var(--color-primary-soft);
}
.eyebrow::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:18px; height:1px;
  background:var(--color-primary-bright);
  transform:translateY(-50%);
}

.site-title{
  margin:0 0 34px;
  padding-bottom:20px;
  font-size:clamp(38px,4.6vw,52px);
  line-height:1;
  letter-spacing:.02em;
  color:#fff;
  border-bottom:1px solid var(--hair);
}

/* ==========================================================================
   左侧模式入口
   ========================================================================== */
.side-modes{ display:grid; gap:8px; margin:0 0 28px; }
.side-mode{
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:9px 10px;
  color:var(--color-muted-foreground);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.side-mode::after{
  content:"";
  position:absolute;
  right:10px;
  top:10px;
  width:5px;
  height:5px;
  background:rgba(255,255,255,.14);
}
.side-mode:hover{ color:#fff; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.20); }
.side-mode.is-active{
  color:#fff;
  background:linear-gradient(135deg,rgba(224,48,48,.20),rgba(224,48,48,.05));
  border-color:rgba(255,70,85,.42);
  box-shadow:inset 0 0 0 1px rgba(255,70,85,.06);
}
.side-mode.is-active::after{ background:var(--color-primary-bright); box-shadow:0 0 0 4px rgba(255,70,85,.10); }
.side-mode:focus-visible{ outline:2px solid var(--color-ring); outline-offset:2px; }
.side-mode__icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  color:var(--color-muted-foreground);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
}
.side-mode__icon svg{ width:19px; height:19px; fill:currentColor; }
.side-mode__copy{ min-width:0; display:flex; flex-direction:column; }
.side-mode__copy strong{ font-size:13.5px; line-height:1.2; }
.side-mode__copy small{ margin-top:4px; color:var(--color-muted-foreground); font-size:11px; }
.side-mode.is-active .side-mode__icon,
.side-mode--builder:hover .side-mode__icon{ color:var(--color-primary-soft); border-color:rgba(255,70,85,.36); background:rgba(255,70,85,.10); }
@media (max-width:880px){
  .side-modes{ grid-template-columns:minmax(0,1fr); margin-bottom:22px; }
}

/* ==========================================================================
   侧栏：分面筛选
   ========================================================================== */
/* 侧栏：按名字搜索 */
.crosshair-search{ margin:0 0 24px; }
.crosshair-search__label{
  display:block;
  margin:0 0 9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  color:var(--color-muted-foreground);
  text-transform:uppercase;
}
.crosshair-search__field{
  position:relative;
  display:flex;
  align-items:center;
  min-height:42px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.13);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.crosshair-search__field:focus-within{
  border-color:rgba(255,70,85,.58);
  background:rgba(255,70,85,.055);
  box-shadow:0 0 0 3px rgba(255,70,85,.08);
}
.crosshair-search__icon{
  position:absolute;
  left:12px;
  width:16px;
  height:16px;
  color:var(--color-muted-foreground);
  pointer-events:none;
}
#crosshairSearch{
  width:100%;
  min-width:0;
  height:40px;
  padding:0 38px 0 36px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--color-foreground);
  font:500 13px/1 var(--font-body);
  -webkit-appearance:none;
  appearance:none;
}
#crosshairSearch::-webkit-search-cancel-button{ display:none; }
#crosshairSearch::placeholder{ color:#718096; }
.crosshair-search__clear{
  position:absolute;
  right:6px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0 0 2px;
  border:0;
  background:transparent;
  color:var(--color-muted-foreground);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.crosshair-search__clear:hover{ color:#fff; background:rgba(255,255,255,.07); }
@media (max-width:880px){ .crosshair-search{ margin-bottom:18px; } }

.filters{ display:grid; gap:2px; }

.filters__title{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  color:var(--color-muted-foreground);
  text-transform:uppercase;
}

.filter{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px 9px 14px;
  font-size:13.5px;
  font-weight:600;
  color:var(--color-muted-foreground);
  text-align:left;
  background:transparent;
  border:0;
  border-left:2px solid rgba(255,255,255,.10);
  cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}

.filter:hover{
  color:var(--color-foreground);
  background:rgba(255,255,255,.04);
  border-left-color:rgba(255,255,255,.26);
}

.filter.is-active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,70,85,.16),rgba(255,70,85,0));
  border-left-color:var(--color-primary-bright);
}

.filter__count{
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--color-muted-foreground);
}
.filter.is-active .filter__count{ color:var(--color-primary-soft); }

.sidebar__total{
  margin:26px 0 0;
  padding-top:18px;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--color-muted-foreground);
  border-top:1px solid var(--hair);
}
.sidebar__total span{ color:#fff; font-weight:700; }

.sidebar__source{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding:11px 12px;
  border:1px solid var(--hair);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:var(--color-muted-foreground);
  font-size:12px;
  text-decoration:none;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.sidebar__source:hover{
  color:#fff;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.22);
}
.sidebar__source-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
}
.sidebar__source-domain{
  color:#fff;
  font-weight:700;
  letter-spacing:.01em;
}
.sidebar__source::after{
  content:"↗";
  color:var(--color-primary-soft);
  font-size:13px;
  line-height:1;
}

/* ==========================================================================
   提示行 + 网格
   ========================================================================== */
.hint{
  margin:0 0 16px;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--color-muted-foreground);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
}

@media (min-width:1900px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
  .layout{ grid-template-columns:260px minmax(0,1fr); }
}

.empty{
  margin:40px 0;
  font-size:14px;
  color:var(--color-muted-foreground);
}

/* ==========================================================================
   卡片（左上 / 右下切角）
   ========================================================================== */
.card{
  --cut:14px;
  position:relative;
  padding:1px;
  background:var(--hair);
  clip-path:polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
  transition:background var(--t),filter var(--t);
}

.card:hover{
  background:rgba(255,70,85,.85);
  filter:drop-shadow(0 16px 30px rgba(255,70,85,.30));
}

.card__open{
  display:flex;
  flex-direction:column;
  width:100%;
  background:var(--preview-label);
  border:0;
  padding:0;
  cursor:pointer;
  text-align:center;
  clip-path:polygon(
    13px 0, 100% 0,
    100% calc(100% - 13px), calc(100% - 13px) 100%,
    0 100%, 0 13px);
}
.card__open:focus-visible{
  outline:2px solid var(--color-ring);
  outline-offset:-3px;
}

.card__preview{
  position:relative;
  display:block;
  aspect-ratio:5/3;
  background:#1E3F4C;
}

/* 四角取景框标记 */
.card__preview::before{
  content:"";
  position:absolute;
  inset:9px;
  opacity:.16;
  background:
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) left top/10px 1px no-repeat,
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) left top/1px 10px no-repeat,
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) right top/10px 1px no-repeat,
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) right top/1px 10px no-repeat,
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) left bottom/10px 1px no-repeat,
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) left bottom/1px 10px no-repeat,
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) right bottom/10px 1px no-repeat,
    linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) right bottom/1px 10px no-repeat;
  transition:opacity var(--t);
}
.card:hover .card__preview::before{ opacity:.34; }

.card__crosshair{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  transition:transform var(--t);
}

.card__label{
  display:block;
  padding:10px 12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--color-foreground);
  background:var(--preview-label);
  border-top:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card:hover .card__label{ color:#fff; }

/* ==========================================================================
   详情按钮 + 右侧抽屉
   ========================================================================== */
::selection{ background:rgba(255,70,85,.42); color:#fff; }

.card__details{
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  color:var(--color-foreground);
  background:rgba(13,19,26,.82);
  border:1px solid rgba(255,255,255,.16);
  opacity:.6;
  cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:opacity var(--t-fast),color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.card__details svg{ width:17px; height:17px; }
.card:hover .card__details,
.card__details:focus-visible{ opacity:1; }
.card__details:hover{
  color:#fff;
  background:rgba(224,48,48,.92);
  border-color:rgba(255,255,255,.34);
}
.card__details:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px var(--color-ring);
}

body.drawer-open{ overflow:hidden; }

.drawer{
  position:fixed;
  inset:0;
  z-index:100;
}
.drawer[hidden]{ display:none; }

.drawer__scrim{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  background:rgba(5,8,13,.68);
  border:0;
  opacity:0;
  cursor:default;
  transition:opacity var(--t);
}
.drawer.is-open .drawer__scrim{ opacity:1; }

.drawer__panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  width:min(50vw,720px);
  min-width:min(440px,100vw);
  background:
    radial-gradient(720px 420px at 100% 0%, rgba(255,70,85,.08), transparent 65%),
    linear-gradient(180deg,#101720 0%,#151C28 36%,#111821 100%);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-36px 0 90px -36px rgba(0,0,0,.96);
  clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);
  transform:translateX(100%);
  transition:transform 360ms cubic-bezier(.16,1,.3,1),opacity var(--t);
}
.drawer.is-open .drawer__panel{ transform:translateX(0); }
.drawer__panel:focus{ outline:none; }

.drawer__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex:none;
  padding:30px 30px 22px;
  background:rgba(13,19,26,.76);
  border-bottom:1px solid var(--hair);
}
.drawer__heading{ min-width:0; }
.drawer__title{
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.08;
  color:#fff;
  overflow-wrap:anywhere;
}
.drawer__kind{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.09em;
  color:var(--color-muted-foreground);
}
.drawer__kind span:first-child{ color:var(--color-primary-soft); }

.drawer__close{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:none;
  padding:0;
  color:var(--color-foreground);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.drawer__close svg{ width:20px; height:20px; }
.drawer__close:hover{ color:#fff; background:rgba(255,70,85,.15); border-color:rgba(255,70,85,.55); }
.drawer__close:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--color-ring); }

.drawer__body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:26px 30px calc(42px + env(safe-area-inset-bottom));
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.24) transparent;
}
.drawer__body::-webkit-scrollbar{ width:10px; }
.drawer__body::-webkit-scrollbar-track{ background:transparent; }
.drawer__body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border:3px solid transparent;
  background-clip:padding-box;
}

.drawer__preview{
  position:relative;
  min-height:clamp(240px,34vh,330px);
  overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(72% 72% at 50% 45%,rgba(255,70,85,.10),transparent 68%),
    #0D131A;
  border:1px solid rgba(255,255,255,.12);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.drawer__preview::before{
  content:"";
  position:absolute;
  inset:16px;
  opacity:.28;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) left top/18px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) left top/1px 18px no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) right top/18px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) right top/1px 18px no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) left bottom/18px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) left bottom/1px 18px no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) right bottom/18px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) right bottom/1px 18px no-repeat;
}
.drawer__crosshair{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
}

.drawer__meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:18px 0 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.drawer__meta > div{ padding:14px 0; }
.drawer__meta > div + div{
  padding-left:18px;
  border-left:1px solid var(--hair);
}
.drawer__meta dt{
  margin:0 0 5px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--color-muted-foreground);
  text-transform:uppercase;
}
.drawer__meta dd{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.drawer__section{ margin-top:28px; }
.drawer__section h3{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--color-muted-foreground);
  text-transform:uppercase;
}
.drawer__section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.drawer__copy{
  min-height:40px;
  padding:0 17px;
  color:var(--color-on-primary);
  background:var(--color-primary);
  border:1px solid rgba(255,255,255,.10);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background var(--t-fast),transform var(--t-fast);
}
.drawer__copy:hover{ background:#C9252B; }
.drawer__copy:active{ transform:translateY(1px); }
.drawer__copy:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--color-ring); }

.drawer__code{
  margin:12px 0 0;
  padding:15px 16px;
  max-height:156px;
  overflow:auto;
  color:#D8E1EC;
  background:#0A1017;
  border:1px solid rgba(255,255,255,.11);
  font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.24) transparent;
}
.drawer__code::-webkit-scrollbar{ width:9px; height:9px; }
.drawer__code::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border:2px solid transparent;
  background-clip:padding-box;
}

.drawer__section--import p{
  position:relative;
  margin:10px 0 0;
  padding-left:18px;
  color:var(--color-muted-foreground);
  line-height:1.7;
}
.drawer__section--import p::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  background:var(--color-primary-bright);
  box-shadow:0 0 0 4px rgba(255,70,85,.11);
}

@media (max-width:760px){
  .drawer__panel{
    width:100%;
    min-width:100%;
    border-left:0;
    clip-path:none;
  }
  .drawer__header{ padding:22px 18px 17px; }
  .drawer__title{ font-size:clamp(27px,9vw,36px); }
  .drawer__close{ width:40px; height:40px; }
  .drawer__body{ padding:18px 18px calc(34px + env(safe-area-inset-bottom)); }
  .drawer__preview{ min-height:230px; }
}

/* ==========================================================================
   Toast 提示卡
   ========================================================================== */
.toast{
  position:fixed;
  left:50%;
  bottom:30px;
  z-index:140;
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:min(92vw,420px);
  padding:13px 20px 13px 14px;
  background:linear-gradient(135deg,#1F2836,#151C26);
  border:1px solid var(--color-border);
  border-left:1px solid rgba(255,70,85,.64);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.92), 0 0 0 1px rgba(255,70,85,.06);
  opacity:0;
  transform:translate(-50%,20px);
  pointer-events:none;
  transition:opacity var(--t),transform var(--t);
}

.toast__icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:none;
  color:var(--color-primary-bright);
  background:rgba(255,70,85,.13);
  border:1px solid rgba(255,70,85,.32);
}
.toast__icon svg{ width:16px; height:16px; }

.toast__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.toast__title{
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
  color:#fff;
}

.toast__hint{
  font-size:11.5px;
  line-height:1.4;
  color:var(--color-muted-foreground);
}

.toast.is-on{ opacity:1; transform:translate(-50%,0); }

.toast--error{ border-left-color:#FF8A8A; }
.toast--error .toast__icon{ color:#FF8A8A; background:rgba(255,138,138,.13); border-color:rgba(255,138,138,.32); }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1180px){
  .layout{ grid-template-columns:208px minmax(0,1fr); gap:22px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
}

@media (max-width:880px){
  .layout{ grid-template-columns:minmax(0,1fr); gap:0; }
  .sidebar{ position:static; padding:34px 0 0; border-right:0; }
  .site-title{ margin-bottom:22px; padding-bottom:16px; }

  .filters{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .filters__title{ grid-column:1 / -1; }
  .filter{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:9px 10px;
    border-left:0;
    border-top:2px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
  }
  .filter:hover{ border-top-color:rgba(255,255,255,.26); }
  .filter.is-active{
    border-top-color:var(--color-primary-bright);
    background:linear-gradient(180deg,rgba(255,70,85,.18),rgba(255,70,85,0));
  }
  .sidebar__total{ margin-top:18px; padding-top:14px; }
  .content{ padding-top:26px; }
}

@media (max-width:560px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:10px; }
  .filter{ padding:8px 9px; font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   准星生成器抽屉
   ========================================================================== */
body.builder-drawer-open{ overflow:hidden; }
.builder-shell{
  position:fixed;
  inset:0;
  z-index:180;
}
.builder-shell[hidden]{ display:none; }
.builder-shell__scrim{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  background:rgba(4,7,11,.72);
  border:0;
  opacity:0;
  transition:opacity var(--t);
}
.builder-shell.is-open .builder-shell__scrim{ opacity:1; }
.builder-shell__panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  width:min(50vw,960px);
  min-width:min(680px,100vw);
  background:#111A24;
  border-left:1px solid #34414E;
  box-shadow:-40px 0 100px -48px rgba(0,0,0,.98);
  transform:translateX(100%);
  transition:transform 420ms cubic-bezier(.16,1,.3,1);
}
.builder-shell.is-open .builder-shell__panel{ transform:translateX(0); }
.builder-shell__panel:focus{ outline:none; }
.builder-shell__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:58px;
  flex:none;
  padding:0 16px 0 20px;
  background:#0C141D;
  border-bottom:1px solid #2A3745;
}
.builder-shell__header strong{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:400;
  color:#fff;
  letter-spacing:.03em;
}
.builder-shell__close{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  color:#E6EBEF;
  background:#1A2632;
  border:1px solid #35424F;
  cursor:pointer;
}
.builder-shell__close:hover{ color:#fff; background:#2A3744; }
.builder-shell__close svg{ width:19px; height:19px; }
#builderFrame{
  width:100%;
  min-height:0;
  flex:1;
  border:0;
  background:#151C28;
}
@media (max-width:900px){
  .builder-shell__panel{ width:100%; min-width:100%; border-left:0; }
  .builder-shell__header{ height:54px; padding:0 10px 0 14px; }
}

/* 与 WeGame 卡片预览保持一致 */
.card__preview::before{ content:none !important; }
.card__preview{ background:#1E3F4C !important; aspect-ratio:5/3; }

@media (hover:hover){
  .card__details{ opacity:0; }
  .card:hover .card__details,
  .card__details:focus-visible{ opacity:1; }
}

/* 主页卡片固定六列并放大准星预览 */
.grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:1280px){ .grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:880px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .grid{ grid-template-columns:minmax(0,1fr); } }




/* 分批加载 */
.load-wrap{display:flex;justify-content:center;margin:28px 0 14px;}
.load-more{min-height:42px;padding:0 22px;color:#fff;background:#1B2631;border:1px solid #44525F;cursor:pointer;font-size:13px;font-weight:600;}
.load-more:hover{background:#263440;border-color:#667481;}
.load-more:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;}