/* <!-- v2.2 2025-09-09 --> */
/* g▦rid v0.22 (2025-08-18) - style sheet (merged + tips UI) */
/* ───────────────────────────────────────── */

:root{
  --bg:#000; --fg:#EDEDED; --muted:#BDBDBD; --green:#29f50e; /* 统一颜色变量 */
  --grid:#6B6B6B; --dim:#0b0b0b;

  --logo-size: clamp(0.8rem, 6vw, 1.8rem);
  --tile-scale:.100;
  --tile-y: 12em;

  --gap-1: clamp(8px, 2vw, 16px);
  --gap-2: clamp(16px, 4vw, 32px);
  --grid-gap: clamp(2px, 1vw, 8px);

  --tile-size: clamp(16px, 8vw, 30px);
  /* 中央方块字符（随时改，比如 '▣' '■' '▦' '▧' 等） */
  --tile-char: '▦';
  --brand-gap: 2px; /* g 与方块、方块与 rid 的间距 */

}
  
/* 如果页面里有文字 logo：<span class="brand">g<span class="tile"></span>rid</span> */
.brand .tile::before{
  content: var(--tile-char, '▦');
  margin: 0 var(--brand-gap);
}

*{box-sizing:border-box}

/* 替换这里：用 min-height 而不是固定 100% 高度 */

html, body{
  /* 用 JS 写入的 --vh，更准确适配移动端地址栏变化；无值时回退 1vh */
  min-height: calc(var(--vh, 1vh) * 100);
  height: auto; /* 内容更长时自然撑开 */
}

body{
  margin:0; background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased;
  font-family:"American Typewriter",Georgia,serif;
  display:flex; flex-direction:column; align-items:center;
}


/* ───────── 顶部 Logo / slogan ───────── */
.container{
  width:100%;max-width:980px;padding:20px 16px 24px;
  display:flex;flex-direction:column;align-items:center;
}
.brand{
  font-size:var(--logo-size);line-height:1.05;letter-spacing:1px;user-select:none;
  display:flex;align-items:center;gap:0.15em;
}
#tile{
  font-size:calc(var(--logo-size)*var(--tile-scale));
  line-height:1;
  transform:translateY(0.15em);
  opacity:.95;
  margin: 0 -0.1em;
}
.slogan{
  margin:var(--gap-1) 0 0;
  width:100%;text-align:center;
  font-size:clamp(12px);
  color:#ccc;user-select:none;
  white-space:nowrap;overflow:hidden;text-overflow:clip;
}

/* ───────── 信息条 ───────── */
#infoBar {
  margin: var(--gap-1) 0 0;
  width: 100%;
  text-align: center;
  user-select: none;
  font-family: "Courier New", monospace;
}

.countdown-display {
  color: var(--green);
  font-size: clamp(12px, 3vw, 16px);
  line-height: 1.4;
  letter-spacing: 1px;
  text-shadow: 0 0 5px var(--green), 0 0 10px rgba(60,223,1,.5);
}

.nickname-text {
  color: #fff;
  opacity: 0.8;
  margin-left: 1ch;
  font-family: "American Typewriter", serif;
}

/* ───────── 主 12×12 网格 ───────── */
.row-12{
  display:grid;
  grid-template-columns:repeat(12,var(--tile-size));
  grid-auto-rows:minmax(var(--tile-size), auto);  /* ✅ 允许某一行因内容变高 */
  gap:var(--grid-gap);
  justify-content:center; /* 让 12×12 轨道在容器内水平居中 */
  margin:var(--gap-2) auto 0; /* 水平居中主网格 */
}

.cell{
  width:var(--tile-size);height:var(--tile-size);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:var(--dim);
  color:#9a9a9a;font-size:clamp(1rem,4.2vw,1.25rem);
  user-select:none;cursor:pointer;
}

/* 其他格默认“彻底隐藏”：不占视觉、不响应悬停，但允许点击以触发“探测描边” */
.cell.is-hidden {
  opacity: 0 !important;
  pointer-events: auto;            /* 允许点击触发“探测描边” */
  border-color: transparent !important;
  background: transparent !important;
}

.is-reserved {
  color: transparent; /* 隐藏年份数字 */
  background: var(--dim);
  border-color: transparent; /* 完全隐藏边框 */
}
.is-reserved:hover {
  cursor: pointer;
  background: var(--dim);
  border-color: rgba(255, 255, 255, 0.1);
}

.is-lit{
  color:#fff;
  border-color:var(--green);
  box-shadow:0 0 10px rgba(60,223,1,.25)
}

.cell--n{
  color:var(--green);
  font-weight:700;
}

/* 注册后显示的年份格使用绿色虚线外框，无背景（统一定义） */
.cell--wire {
  background: transparent !important;
  border: 1px dashed #2e7d32 !important;
  box-shadow: 0 0 12px rgba(60, 223, 1, .18);
  color: var(--fg);
}
/* hover glow for wireframe cells */
.cell--wire:hover {
  box-shadow: 0 0 14px rgba(60, 223, 1, .35);
  color: #3cdf01; /* 鼠标悬停时更亮的绿色 */
}

/* N 格在注册展开时的绿色虚线外框（与 .reg-box 统一） */
.cell--n.n-dashed {
  border: 1px dashed #2e7d32 !important;
  box-shadow: 0 0 12px rgba(60,223,1,.18);
}

/* 锁格，与N格共用样式，但可能需要单独调整 */
.cell--lock {
  font-size: clamp(14px, 4.2vw, 22px);
}
.cell--lock.open{
  color:var(--green);
  transform:scale(1.05)
}

.cell--birth, .cell--age, .cell--year {
  transition:all .2s ease;
  background: var(--green);
  border-color: var(--green);
  color: #000;
  text-shadow: 0 0 5px #000, 0 0 10px rgba(0,0,0,0.5);
}

.cell--dimmed{
  opacity:.4 !important;
  border-color:#444 !important;
}

/* ───────── 占位行（注册 / 设置 / 月份）───────── */
/* 统一在后文的增强版 .expander 中定义过渡；
   这里移除早期的重复定义（grid-column 由 JS 内联设置） */

/* ───────── 注册面板 ───────── */
._X_START_.reg-box{
  width:100%;
  border:none;
  box-shadow:0 0 12px rgba(60,223,1,.18);
  background:#0b0b0b;
  border-radius:4px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Settings 容器里的注册样式保持扁平 */
.settings-box .reg-box{ border:none; box-shadow:none; }
.settings-box .reg-hint{ border:1px dashed #2e7d32; margin-bottom: 12px; }

/* 提示语块 */
.reg-hint{
  font-size:1rem;
  color:rgba(255,255,255,.75);
  margin:0;                     /* 先清零外边距… */
  background:#000;
  border:1px dashed #2e7d32;
  padding:10px 14px;
  width:100%;
  text-align:left;
  line-height:1.4;
}

/* ✅ 关键：只给“提示语后紧跟的 form”加额外顶边距，拉开与 username 的距离 */
.reg-box > .reg-hint + form{
  margin-top:12px;              /* 觉得还近就改 14~18px 均可 */
}

/* 表单本体 */
.reg-box form{
  display:grid;
  grid-template-columns:8em 1fr;
  gap:1.2rem;                   /* 行内控件之间的间距 */
  align-items:center;
  width:100%;
}

.reg-box label{
  text-align:right;
  line-height:1;
  color:#b9b9b9;
  font:500 .95rem "American Typewriter",monospace;
}

/* 输入框 */
.reg-input{
  background:#0f0f0f;
  color:#fff;
  border:1px solid #666;
  border-radius:3px;
  padding:10px 12px;
  font:500 1rem "American Typewriter",monospace;
  width:100%;
}

/* Settings: 线框风格 */
.settings-box .reg-input{
  border:1px dashed #2e7d32;
}
.settings-box .reg-input:focus,
.settings-box .reg-input:focus-visible{
  outline:none;
  border-color:#3cdf01;
  box-shadow:0 0 0 2px rgba(60,223,1,.20);
}

/* 底部按钮行 */
.reg-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  gap:2rem;
}

.btn{
  padding:8px 12px;
  border:1px solid #777;
  border-radius:4px;
  background:#101010;
  color:#ddd;
  cursor:pointer;
  font-family:"American Typewriter",serif;
}
.btn.ok{
  border-color:#8bd48b;
  color:#dfffd8;
  box-shadow:0 0 0 1px rgba(60,223,1,.15) inset;
}

/* 焦点态 / 校验态 */
.reg-input:focus-visible{
  outline:none;
  border-color:#8bd48b;
  box-shadow:0 0 0 2px rgba(60,223,1,.20);
}
.reg-input.is-invalid{
  border-color:#ff5a5a !important;
  box-shadow:0 0 0 2px rgba(255,90,90,.25) !important;
}

/* help 提示行再给一点上边距，避免贴着输入框（可选） */
.reg-hint--help {
  display:block;
  color: rgba(255,255,255,.55);
  font-size:.9rem;
  margin-top:8px;               /* 新增 */
}

/* 小屏稍微紧一点（可选） */
@media (max-width: 420px){
  .reg-box > .reg-hint + form{ margin-top:10px; }
}


/* ───────── 设置 / 月份 行 ───────── */
.s-cell,.mcell{
  border:1px solid #6B6B6B;
  background:#0b0b0b;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ddd;
  font-size:1rem;
}
.mcell.is-lit{
  color:#fff;
  border-color:#3CDF01;
  box-shadow:0 0 10px rgba(60,223,1,.25);
  font-weight:700;
}

/* ───────── 响应式 ───────── */
@media (min-width:768px){
  html{font-size:18px}
  :root{
    --logo-size:1.8rem;
    --grid-gap:8px
  }
  .container{
    padding:40px 40px 60px
  }
}
/* 新增：带图标的输入框容器 */
.input-with-icon {
  position: relative;
  width: 100%;              /* 占满右列 */
  display: block;           /* 明确块级，避免内联尺寸干扰 */
  min-inline-size: 0;       /* Grid/Flex 兼容：允许拉满列宽 */
  overflow: hidden;         /* 图标不应撑出可视宽度 */
}

/* 新增：日历图标的样式 */
.icon-calendar {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2329f50e' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2m0 16H5V10h14m0-12H5V6h14z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none; /* 确保点击能穿透图标，触发下方的输入框 */
  opacity: 0.8;
  display: none; /* 使用背景图方案：隐藏独立图标元素，避免撑宽 */
}

/* 优化：birthday 的日期文本整体靠左，且为右侧图标预留内边距（iOS Chrome/Safari 也生效） */
.input-with-icon .reg-input[type="date"]{
  -webkit-appearance: none;  /* 让宽度/对齐在 iOS 上生效 */
  appearance: none;
  display: block;
  width: 100%;               /* 与 username 同宽 */
  min-width: 0;
  text-align: left;
  /* 用背景图绘制日历，不再用独立元素，保证不会影响宽度 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2329f50e' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2m0 16H5V10h14m0-12H5V6h14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 1.25rem;
  padding-right: calc(1.25rem + 12px); /* 为背景图留空间 */
}
/* 移除 WebKit 原生日历/清除按钮的占位，避免右侧多出一截 */
.input-with-icon .reg-input[type="date"]::-webkit-calendar-picker-indicator{ display:none; }
.input-with-icon .reg-input[type="date"]::-webkit-clear-button{ display:none; }

/* 右列直接孩子：无论是 input 还是包裹容器，都拉满 */
.reg-box form > .reg-input,
.reg-box form > .input-with-icon{
  display: block;
  width: 100%;
  max-width: 100%;
  min-inline-size: 0;
  align-self: stretch;
}

/* 明确：hint 行（birthdayHelp）左对齐 */
#birthdayHelp.reg-hint--help{ text-align: left; }

/* pulsing glow for the current month */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 10px rgba(60,223,1,.28); transform: scale(1); }
  50%  { box-shadow: 0 0 18px rgba(60,223,1,.45); transform: scale(1.035); }
  100% { box-shadow: 0 0 10px rgba(60,223,1,.28); transform: scale(1); }
}

.cell--wire.is-lit.pulse {
  animation: pulseGlow 1.6s ease-in-out infinite;
}

/* 临时探测高亮：点击非核心格子时出现（可见） */
.cell.probe-wire{
  border: 1px dashed #2e7d32 !important;
  box-shadow: 0 0 12px rgba(60,223,1,.28);
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 无障碍：用户偏好减少动效时禁用动画 */
@media (prefers-reduced-motion: reduce) {
  .cell--wire.is-lit.pulse { animation: none; }
}

/* 加固，避免缩放抖动 */
.cell--wire,
.cell--wire.is-lit.pulse {
  transform-origin: center;
  will-change: transform, box-shadow;
}

/* 月份/日期面板用到的占位格 */
.ghost {
  border: 1px dashed transparent;
  background: transparent;
  pointer-events: none;
  visibility: hidden;
}

/* N 格在展开时绿色虚线边框 */
.n-dashed {
  border: 1px dashed #2e7d32 !important;
}

/* 让 textarea 看起来与 .reg-input 一致，并可拉伸（仅 reg） */
textarea.reg-input {
  background:#0f0f0f;
  color:#fff;
  border:1px solid #666;
  border-radius:3px;
  padding:10px 12px;
  font:500 1rem "American Typewriter",monospace;
  width:100%;
  min-height:6em;
  resize: vertical;
}

/* 任何年份格都必须可点 —— 防止动画/伪元素/叠层吞点击 */
#rowYears .cell { pointer-events: auto !important; position: relative; }
#rowYears .cell.is-lit,
#rowYears .cell.pulse { pointer-events: auto !important; }
#rowYears .cell::before,
#rowYears .cell::after { pointer-events: none !important; }

/* 展开层比格子低一层，避免未展开或收起动画时遮挡命中 —— 加上 tipsPanel */
#expander, #expanderDays, #tipsPanel { position: relative; overflow: visible; }


/* ========== Tips（即时帖）独立 UI：clone 注册面板但不混用 ========== */

/* 容器 */
.tips-box{
  width:100%;
  border:1px dashed #2e7d32;
  box-shadow:0 0 12px rgba(60,223,1,.18);
  background:#0b0b0b;
  border-radius:4px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tips-hint{
  font-size:1rem;
  color:rgba(255,255,255,.75);
  margin:0;
  background:#000;
  border:1px dashed #2e7d32;
  padding:10px 14px;
  width:100%;
  text-align:left;
  line-height:1.4;
}

/* 列表（在表单上方） */
.tips-list{
  display:flex; flex-direction:column; gap:10px;
  margin-top:2px;
}
.tip-item{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; border:1px dashed rgba(60,223,1,.25);
  background:#0e0e0e; border-radius:4px;
}
.tip-head{ display:flex; align-items:center; gap:10px; }
.tip-title{
  color:#e9ffe3; font-weight:700; letter-spacing:.2px;
  text-shadow:0 0 6px rgba(60,223,1,.25);
}
.tip-meta{ color:#9bdc8f; font-size:.85rem; opacity:.85; }
.tip-content{ color:#f4f4f4; white-space:pre-wrap; line-height:1.5; }
.tip-actions{ display:flex; gap:10px; margin-top:4px; }
.tip-actions .btn{ padding:6px 10px; font-size:.95rem; }

/* 表单（在列表下方） */
.tips-form{
  display:grid; grid-template-columns:8em 1fr; gap:1.2rem; align-items:center; width:100%;
}
.tips-label{
  text-align:right;
  line-height:1;
  color:#b9b9b9;
  font:500 .95rem "American Typewriter",monospace;
}
.tips-input{
  background:#0f0f0f;
  color:#fff;
  border:1px solid #666;
  border-radius:3px;
  padding:10px 12px;
  font:500 1rem "American Typewriter",monospace;
  width:100%;
}
.tips-input:focus-visible{
  outline:none;
  border-color:#8bd48b;
  box-shadow:0 0 0 2px rgba(60,223,1,.20);
}
.tips-textarea{ min-height:6em; resize:vertical; }
.tips-actions{ display:flex; justify-content:flex-end; gap:2rem; width:100%; }
.spacer{ flex:1; }

/* 额外的“脉冲”备用动画（如有直接 .pulse 类使用） */
@keyframes pulse {
  0%   { box-shadow: 0 0 6px rgba(60,223,1,.6); }
  50%  { box-shadow: 0 0 14px rgba(60,223,1,1); }
  100% { box-shadow: 0 0 6px rgba(60,223,1,.6); }
}
.pulse { animation: pulse 2s infinite; }
/* g░rid v0.23 — incremental style updates over v0.22 */

/* ── 新增通用变量（不影响旧变量） ── */
:root{
  --radius: 4px;
  --btn-h: 36px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow-wire: 0 0 12px rgba(60,223,1,.18);
  --shadow-wire-strong: 0 0 14px rgba(60,223,1,.35);
  --panel-gap-top: clamp(12px, 2.6vw, 28px);   /* g1 */
  --panel-gap-bottom: clamp(24px, 4.5vw, 40px);/* g2 */
}

/* tips 面板容器（已是 block） */
/* 月份、日期、tips 三个展开层都不加额外外边距 */
/* 合并“展开层不叠加外边距”的规则，仅保留一处定义 */
#expander, #expanderDays, #tipsPanel { margin: 0 !important; }

:root[data-density="compact"]{
  --grid-gap: clamp(1px, .6vw, 6px);
  --tile-size: clamp(16px, 8vw, 30px);
}

/* ── 网格格子：键盘可见焦点，不改变你原来的外观 ── */
.row-12 .cell{
  border-radius: var(--radius);
  outline: none;
}
.row-12 .cell:focus-visible{
  box-shadow: 0 0 0 2px rgba(60,223,1,.35);
  border-color:#3CDF01;
}

/* ── cell--wire 的 hover 强化（不改变原有颜色体系）── */
.cell--wire{ border-radius: var(--radius); box-shadow: var(--shadow-wire); }
.cell--wire:hover{ box-shadow: var(--shadow-wire-strong); }

/* ── 展开层：在你已有 max-height 过渡基础上，再叠加“淡入+下移” ── */
.expander{
  transition: max-height .4s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
  opacity:0; transform: translateY(-4px);
  will-change: max-height, opacity, transform;
  scroll-margin-top: 12px; /* 展开后滚入视口更舒服 */
}
/* 当 JS 设置了 max-height（你的逻辑里会设），我们同步显现透明度/位移 */
.expander[style*="max-height"]{ opacity:1; transform:none; }

/* ── tips：有内容的日格右上小点（需 JS 打上 data-has-tips="1"） ── */
#expanderDays .cell[data-day][data-has-tips="1"]::after{
  content:""; position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%;
  background:#3cdf01; box-shadow:0 0 6px rgba(60,223,1,.6);
  pointer-events:none;
}

/* ── tips 动作条：长列表时“粘滞”底部，操作更稳 ── */
.tips-actions{
  position: sticky; bottom:0;
  background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,.85) 50%, rgba(11,11,11,.96) 100%);
  padding-top:8px;
  backdrop-filter: blur(2px);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.tips-actions .spacer{ flex:1; }

/* ── 按钮状态增强：保持原有 .btn/.btn.ok 外观，只补充状态 ── */
.btn{
  min-height: var(--btn-h);
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35em;
  transition: border-color .2s var(--ease), transform .06s linear, box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  user-select:none; touch-action: manipulation;
}
.btn:hover{ border-color:#aaa; color:#fff; }
.btn:active{ transform: translateY(1px) scale(.995); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(60,223,1,.20); }
.btn.icon{ width: var(--btn-h); padding:0; font-size:1rem; }

/* ── 减少动效/打印/高对比（不影响默认） ── */
@media (prefers-reduced-motion: reduce){
  .expander{ transition:none; opacity:1; transform:none; }
}
@media print{
  *{ animation:none !important; transition:none !important; box-shadow:none !important; }
}

:root{
  /* 可留作文档/将来用途，但默认与 grid-gap 同步 */
  --panel-gap-top: var(--grid-gap);
  --panel-gap-bottom: var(--grid-gap);
}
/* #tipsPanel 不使用它们，交给 grid gap 统一管理 */

/* ========== Settings (四格标签面板) ========== */
.settings-box{
width:100%;
border:1px dashed #2e7d32;
box-shadow:0 0 12px rgba(60,223,1,.18);
background:#0b0b0b;
border-radius:4px;
padding:14px 16px;
display:flex;
flex-direction:column;
gap:14px;
}

.settings-tabs{
  display:flex;
  flex-wrap: nowrap;           /* 不换行 */
  gap: calc(var(--grid-gap) * 2.2); /* tabs spacing */
  align-self:flex-start;
  overflow-x: auto;            /* 超出时横向滚动 */
  overflow-y: visible;         /* 允许 pulse/阴影在垂直方向可见 */
  padding: 6px 0 6px 6px;      /* 上下左右为 glow 预留空间 */
  -webkit-overflow-scrolling: touch;
  padding-left: 6px;           /* 为左侧 pulse 预留空间，避免被边框覆盖 */

}
.settings-tabs .tab{
width:var(--tile-size);
height:var(--tile-size);
display:flex; align-items:center; justify-content:center;
}
/* Tabs: keep border hidden, keep neutral static shadow; only .pulse glows */
.settings-tabs .tab.cell--wire,
.settings-tabs .tab.cell--wire.is-lit{
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; /* neutral static shadow */
}
.settings-tabs .tab.pulse{
  box-shadow: 0 0 14px rgba(60,223,1,.35); /* glow only when pulsing */
}

.settings-body{ margin-top: var(--gap-1); }
/* tighten spacing between tabs and content in settings */
.settings-box .settings-body{ margin-top: 6px; }

/* 复用按钮区风格 */
.settings-actions{
display:flex; justify-content:flex-end; gap:2rem; width:100%;
}

.settings-actions #btnCloseSettings{
  border:1px dashed #2e7d32;
}
.settings-actions #btnCloseSettings:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(60,223,1,.20);
}
.reg-form-as-section .grid-form{   /* 让 key/alien 等内容沿用你的表单栅格 */
display:grid; grid-template-columns:8em 1fr; gap:1.2rem; align-items:center; width:100%;
}
.preview-inline{ color:#dfffd8; opacity:.9; }

/* Tips 表单：label 与输入框“吸附”；content: 与 textarea 首行齐；title 基线对齐 */
.tips-form{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .4rem;      /* 贴得更紧 */
  row-gap: 1rem;
  align-items: start;     /* 顶对齐 */
}
.tips-label{
  text-align: left;
  white-space: nowrap;
  margin: 0;
  line-height: 1.25;      /* 与输入框统一行高，避免细微偏差 */
}
/* content: 与 textarea 首行对齐（值应等于 .tips-input 的 padding-top） */
.tips-label[for="tipsContent"]{ padding-top: 10px; }

.tips-input,
.tips-textarea{
  width: 100%;
  line-height: 1.25;
}

/* 让 title: 与 “short title” 输入文字同一水平（以输入框文字为基准） */
.tips-label[for="tipsTitle"],
#tipsTitle{ align-self: baseline; }

/* 窄屏：单列堆叠；同时移除额外上边距和基线对齐 */
@media (max-width: 560px){
  .tips-form{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: .75rem;
  }
  .tips-label[for="tipsContent"]{ padding-top: 0; }
  .tips-label[for="tipsTitle"],
  #tipsTitle{ align-self: auto; }

  /* 你提供的 logo 尺寸覆盖（可保留在此断点内） */
  :root{
    --logo-size: clamp(0.8rem, 6vw, 1.8rem);
    --tile-scale: .48;
  }
}
/* 阅读态：标题独占一行，meta（#id · 时间）另起一行靠左 */
.tip-head{
  display: flex;
  flex-direction: column;     /* 垂直堆叠 */
  align-items: flex-start;
  gap: 2px;
}
.tip-title{
  color:#e9ffe3;
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 0 6px rgba(60,223,1,.25);
}
.tip-meta{
  color:#9bdc8f;
  font-size:.85rem;
  opacity:.85;
}
/* 标题+Meta 底部留一行空间（优先 1lh，回退 1em） */
.tip-head{
margin-block-end: 1em;   /* fallback */
margin-block-end: 1lh;   /* preferred: exactly one line */
}

/* 正文底部留一行空间（优先 1lh，回退 1em） */
.tip-content{
margin-block-end: 0.6em;   /* fallback */
margin-block-end: 0.6lh;   /* preferred */
}

/* 避免和上面的 margin 叠加造成过大间距 */
.tip-actions{
margin-top: 0;
}

/* 整条tips可点 */
.tip-item { cursor: pointer; }
.tip-actions .btn { cursor: pointer; }

/* ========== tips 角标：右下角小 “*”（覆盖原有 dot 样式） ========== */
:root{
/* 角标尺寸/间距可按需微调 */
--tip-asterisk-size: clamp(8px, calc(.18 * var(--tile-size)), 10px);
--tip-offset: 4px;
--tip-alpha: .9;
}

.cell--dot,
.has-tips { position: relative; }

/* 仅角标（用于“无数字”的幽灵月/日被点亮） */
.cell--dot::after{
content: "*";
position: absolute;
right: var(--tip-offset);
bottom: var(--tip-offset);
font-size: var(--tip-asterisk-size);
line-height: 1;
color: rgba(41,245,14,var(--tip-alpha)); /* 基于 var(--green) */
pointer-events: none;
text-shadow: 0 0 4px rgba(60,223,1,.25);
font-family: "Courier New", monospace;
font-weight: 700;
}

/* 保留数字的格（常规视图），右下角同样打 “*” 角标 */
.has-tips::after{
content: "*";
position: absolute;
right: var(--tip-offset);
bottom: var(--tip-offset);
font-size: var(--tip-asterisk-size);
line-height: 1;
color: rgba(41,245,14,var(--tip-alpha));
pointer-events: none;
text-shadow: 0 0 4px rgba(60,223,1,.25);
font-family: "Courier New", monospace;
font-weight: 700;
}

/* 呼吸态仅增强光晕，不做缩放，避免跳动 */
.cell--dot.pulse::after,
.has-tips.pulse::after{
text-shadow: 0 0 8px rgba(60,223,1,.45);
}


/* ===== v0.23 delta: 设置面板骨架 ===== */
.settings-box{
width:100%;
border:1px dashed #2e7d32;
box-shadow:0 0 12px rgba(60,223,1,.18);
background:#0b0b0b; border-radius:4px;
padding:14px 16px; display:flex; flex-direction:column; gap:14px;
}
.settings-tabs{
display:grid;
grid-template-columns: repeat(4, var(--tile-size));
gap: var(--grid-gap);
align-items:center;
}
.settings-tabs .tab.cell--wire,
.settings-tabs .tab.cell--wire.is-lit{ border-color: transparent !important; }
.settings-body{ margin-top: var(--gap-1); }
.settings-actions{ display:flex; gap:2rem; justify-content:flex-end; }
.spacer{ flex:1; }

/* 表单网格（沿用注册面板视觉） */
.grid-form{
display:grid;
grid-template-columns:8em 1fr;
gap:1.2rem;
align-items:center;
}

/* 行内预览块（👽 xxx） */
.preview-inline{
padding:8px 12px;
background:#0e0e0e;
border:1px dashed rgba(60,223,1,.25);
border-radius:4px;
}

/* ===== v0.23 delta: 展开层不叠加外边距 ===== */
/* 已合并到上方，移除重复项（保持文件靠后次序的可读性） */

/* 细节：按钮可见的键盘焦点 */
.btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* 幽灵格默认不可点；hot 时可点但不改变视觉（仍透明） */
.ghost.hot{
visibility: visible;      /* 必须可见才能接收点击，但无边框仍看不见 */
pointer-events: auto;     /* 允许点击 */
}
/* —— 年格数字稍小（只作用在年数字本身） —— */
:root{
--year-font-size: clamp(.6rem, 2.2vw, 0.8rem); /* 你可以按需再调小/调大 */
}

#rowYears > .cell.cell--yearnum{
font-size: var(--year-font-size);
letter-spacing: .5px; /* 更紧一点，看起来不臃肿 */
}
/* v0.23 hotfix: hide "Clear All" in tips panel */
.tips-box #btnClearAllTips{
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}

/* v0.23.1 — Tips 面板底部按钮：放大 Close/Save emoji，外框尺寸不变 */
:root{
--tips-emoji-size: 1.6em;  /* 想更大就调 2em / 2.2em；想更小改 1.6em */
}

.tips-actions .btn{
position: relative;
overflow: visible;          /* 确保放大后的 emoji 不被裁切 */
}

/* 隐掉原文字（保持按钮尺寸不变） */
#btnCloseTips,
#btnSaveTips{
color: transparent;
}

/* 用 ::after 放大 emoji，且显式给可见色，避免继承透明 */
#btnCloseTips::after,
#btnSaveTips::after{
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
line-height: 1;
font-size: var(--tips-emoji-size);
color: var(--fg);
z-index: 1;
}

/* 显示具体 emoji */
#btnCloseTips::after{ content: "✖️"; }
#btnSaveTips::after { content: "💾"; }

/* 轻微交互反馈（可选） */
.tips-actions .btn:hover::after{ transform: scale(1.06); }
.tips-actions .btn:active::after{ transform: scale(0.96); }
/* v0.23 — Tips 标题字号放大 */
:root{
--tips-title-size: clamp(1.2rem, 3.4vw, 1.35rem); /* 改这里调大小 */
}

.tip-title{
font-size: var(--tips-title-size);
line-height: 1.15;
}

.tip-head .tip-meta{
font-size: .85rem;   /* 保持副信息更小 */
opacity: .9;
}
/* v0.23 — Frameless Edit/Delete in Tips list */
:root{ --tips-icon-size: 1.1rem; }

.tips-list .tip-actions{ gap: .4rem; }

.tips-list .tip-actions .btn{
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 2px 4px;           /* keep click target reasonable */
min-width: auto;
color: var(--fg);
font-size: var(--tips-icon-size);
line-height: 1;
}

/* subtle affordances (optional) */
.tips-list .tip-actions .btn:hover{
transform: scale(1.1);
filter: drop-shadow(0 0 4px rgba(60,223,1,.35));
}
.tips-list .tip-actions .btn:active{ transform: scale(0.95); }

/* keep keyboard accessibility; remove if you truly want no frame at all */
.tips-list .tip-actions .btn:focus-visible{
outline: 2px dashed var(--green);
outline-offset: 2px;
border-radius: 4px;
}
.tip-content{ font-size: 1rem; }
/* === Global Responsive patch (480w–960w) === */
/* 基准：通用媒体断点变量（可选） */
:root{
--bp-xs:480px; --bp-sm:560px; --bp-md:768px; --bp-lg:960px;
}

/* 960↓：略收紧容器内边距 & 让格子随视口更灵敏 */
@media (max-width: 960px){
.container{ padding: 24px 14px 32px; }
:root{
  --tile-size: clamp(16px, 8vw, 30px);
  --grid-gap: clamp(2px, 0.9vw, 6px);
  --logo-size: clamp(0.8rem, 6vw, 1.8rem);
}
}

/* 768↓：再降一点字号与间距，避免 12 列过挤 */
@media (max-width: 768px){
:root{
  --tile-size: clamp(16px, 8vw, 30px);
  --grid-gap: clamp(2px, 1vw, 6px);
  --logo-size: clamp(0.8rem, 6vw, 1.8rem);
}
}

/* 560↓：切表单为单列；Logo 更紧凑；按钮更易点 */
@media (max-width: 560px){
:root{
  --tile-size: clamp(16px, 8vw, 30px);
  --logo-size: clamp(0.8rem, 6vw, 1.8rem);
}
.tips-form{
  grid-template-columns: 1fr;   /* 单列堆叠 */
  row-gap: .75rem;
  column-gap: 0;
}
.btn{ padding: 8px 10px; }      /* 手指更好点 */
}

/* 480↓：最后一档微调（不强行改变布局，只控密度） */
@media (max-width: 480px){
:root{
  --tile-size: clamp(16px, 8vw, 30px);
  --grid-gap: clamp(2px, 1.2vw, 5px);
}
.brand{ letter-spacing: .5px; }
}

/* 通用图像自适应（如有图片） */
img, svg, video{ max-width:100%; height:auto; }

/* 强制显示“导出卡片”按钮；有些自定义样式可能把图标或颜色置透明 */
.tip-actions .btn[data-act="share"]{
display: inline-flex !important;
align-items: center;
justify-content: center;
color: var(--fg) !important;
border: none;           /* 如果你去掉了编辑/删除的边框，这里也一致 */
background: transparent;
padding: 6px 10px;
font-size: 1rem;        /* 想更大比如 1.2rem 也可 */
}


/* 让画布自适应预览（导出仍是原尺寸） */
.card-canvas-wrap canvas{
width: min(100%, 680px);
height: auto;
}
#rowYears > .cell:first-child { display: grid !important; visibility: visible !important; opacity: 1 !important; }


/* 黯淡星标（非当天、有 tips 的日子）：右下角 *，无边框、淡绿色 */
/* 有 tips 且非“今天”的日格：右下角黯淡星标，保持原来位置与大小感 */
.cell.star-corner{
position: relative;
background: transparent !important;
border-color: transparent !important;
}

/* 星标本体：右下角，小而不抢戏 */
.cell.star-corner::after{
content: '*';
position: absolute;
/* 右下角的偏移：按格子尺寸自适应，接近你截图的视觉 */
right: calc(var(--tile-size, 64px) * 0.10);
bottom: calc(var(--tile-size, 64px) * 0.08);

/* 字号也随格子尺寸自适应，并限制上限/下限，匹配原来的感觉 */
font-size: clamp(11px, calc(var(--tile-size, 64px) * 0.26), 16px);
line-height: 1;

/* 黯淡绿色（与主题绿一致，但降低不透明度） */
color: rgba(41, 245, 14, 0.55);
/* 轻微发光，让黑底上更柔和一些；想更淡可以降到 0.25 */
text-shadow: 0 0 2px rgba(41, 245, 14, 0.35);

pointer-events: none; /* 不遮挡点击 */
}

/* 可选：紧凑密度时稍微再靠边一点点（如果你有 compact 模式） */
[data-density="compact"] .cell.star-corner::after{
right: calc(var(--tile-size, 48px) * 0.08);
bottom: calc(var(--tile-size, 48px) * 0.06);
}


/* ======= g▦rid — consolidated end-of-file CSS (concise, non-conflicting) ======= */

/* 1) 去除指定格的虚线 / 保留光晕（用于临时标记 .no-border / .no-border-with-star） */
#expander [data-month].no-border,
#expander .cell.no-border,
#expanderDays [data-month].no-border,
#expanderDays .cell.no-border {
  border: none !important;
  background: transparent !important;
  box-shadow: 0 0 18px rgba(41,245,14,0.28) !important;
}

/* 提升该格角标亮度（适用于 .no-border-with-star） */
#expander [data-month].no-border-with-star::after,
#expander .cell.no-border-with-star::after,
#expanderDays [data-day].no-border-with-star::after,
#expander .star-corner.no-border-with-star::after,
#expanderDays .star-corner.no-border-with-star::after,
#expander .cell--dot.no-border-with-star::after,
#expanderDays .cell--dot.no-border-with-star::after,
#expander .has-tips.no-border-with-star::after,
#expanderDays .has-tips.no-border-with-star::after {
  color: rgba(41,245,14,0.95) !important;
  text-shadow: 0 0 10px rgba(41,245,14,0.6), 0 0 4px rgba(41,245,14,0.45) !important;
  font-size: calc(var(--tip-asterisk-size) * 1.15) !important;
}

/* 年格层面的角标支持（仅角标、无边框） */
#rowYears .has-tips.no-border-with-star{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#rowYears .has-tips.no-border-with-star::after{
  color: rgba(41,245,14,0.9) !important;
  text-shadow: 0 0 8px rgba(41,245,14,0.45), 0 0 3px rgba(41,245,14,0.28) !important;
}

/* 2) 幽灵占位（ghost / star-corner / cell--dot）：透明、无边框、去掉阴影
   默认不可点（避免误触），热态 .hot 保持可交互（长按 / modifier 唤醒） */
#expander [data-month].ghost,
#expander .ghost[data-month],
#expanderDays [data-day].ghost,
#expanderDays .ghost[data-day],
#expander .star-corner,
#expander .cell--dot,
#expanderDays .star-corner,
#expanderDays .cell--dot {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  visibility: visible !important;
  pointer-events: none; /* 默认不接手点击，避免被误触发（.hot 覆盖） */
}

/* 允许热态幽灵接收交互（longpress / modifier click） */
#expander .ghost.hot,
#expanderDays .ghost.hot { pointer-events: auto !important; }

/* 角标仍然可见并在透明背景上增强可读性 */
#expander .star-corner::after,
#expander .cell--dot::after,
#expanderDays .star-corner::after,
#expanderDays .cell--dot::after,
#expander .has-tips.no-border-with-star::after,
#expanderDays .has-tips.no-border-with-star::after {
  color: rgba(41,245,14,0.9) !important;
  text-shadow: 0 0 8px rgba(41,245,14,0.45), 0 0 3px rgba(41,245,14,0.28) !important;
}

/* has-tips 在“仅角标”模式下去边框（与 star-corner/cell--dot 一致） */
#expander .has-tips.no-border-with-star,
#expanderDays .has-tips.no-border-with-star {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 防止幽灵上误打 .pulse 导致显示深色内核（避免灰块） */
#expander .ghost.pulse::before,
#expanderDays .ghost.pulse::before,
#expander .star-corner.pulse::before,
#expanderDays .star-corner.pulse::before {
  display: none !important;
  content: none !important;
}

/* 保险：覆盖任何残留的 dashed（极端情况） */
#expander .ghost,
#expanderDays .ghost { border: none !important; }

/* 3) pulse：全局去除任何格子上的虚线/边框（保留/由 ::before 负责芯片视觉） */

/* 仅对设置页 tab 的 pulse 去边框；网格里的 pulse 保持虚线 */
.settings-tabs .tab.pulse {  
  border: none !important;
  border-style: none !important;
  outline: none !important;
  background: transparent !important;
}

/* 即使存在 .cell--wire，也不要显示 dashed border 当它在 pulse 上 */
#rowYears .cell--wire.pulse,
#expander .cell--wire.pulse,
#expanderDays .cell--wire.pulse {
  border: none !important;
}

/* 注：保留 .pulse::before / ::after（如你用它实现芯片），不要全局清空伪元素内容。
   仅在极端需要隐藏伪元素时再启用下列规则（一般不需要）：
   .pulse::before, .pulse::after { border: none !important; box-shadow: none !important; }
*/

/* 极端保险：更高优先级覆盖（rare case） */
:root body #rowYears .cell.pulse,
:root body #expander .cell.pulse,
:root body #expanderDays .cell.pulse {
  border: none !important;
  border-style: none !important;
}

/* ===== Pip Confirm (Fallout) — v1.1.1 slim ===== */
:root{ --nuke-accent:#ff4d4d; }   /* 危险按钮主题色 */

.pip-confirm-overlay{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
  z-index: 10020;                 /* 高于分享卡片等层 */
}

.pip-confirm-modal{
  width: min(92vw, 480px);
  padding: 16px;
  background: #0b0b0b;
  border: 1px dashed #2e7d32;
  border-radius: var(--radius);
  box-shadow: var(--shadow-wire);
  color: var(--fg);
  text-align: center;             /* 头部置中：☢️/标题/日期 */
}

.pip-confirm-icon{
  display: inline-grid; place-items: center;
  font-size: 2.2rem; line-height: 1;
  margin: 4px auto 8px;
  filter: drop-shadow(0 0 8px rgba(60,223,1,.35));
}

.pip-confirm-title{
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 2.8vw, 1.35rem);
  line-height: 1.2;
}

.pip-confirm-meta{
  margin: 0 0 12px;
  font-family: "Courier New", monospace;
  opacity: .9;
}

.pip-confirm-snippet{
  margin: 0 0 12px;
  padding: 8px 10px;
  background: #0e0e0e;
  border: 1px dashed rgba(60,223,1,.25);
  border-radius: 4px;
  text-align: left;               /* 摘要仍左对齐，便于阅读 */
}

.pip-confirm-actions{ display: flex; align-items: center; gap: 12px; }
.pip-confirm-actions .spacer{ flex: 1; }

/* 复用全局 .btn 交互，仅定义危险按钮的“核弹风”差异 */
.pip-confirm-actions .btn.nuke{
  border-color: var(--nuke-accent);
  color: #ffecec;
  background: linear-gradient(180deg, #1a0000, #100000);
  box-shadow: 0 0 0 1px rgba(255,77,77,.18) inset, 0 0 12px rgba(255,77,77,.22);
}
.pip-confirm-actions .btn.nuke:hover{
  box-shadow: 0 0 0 1px rgba(255,77,77,.26) inset, 0 0 14px rgba(255,77,77,.35);
}

/* 打开弹窗时锁背景滚动（配合 JS 加/移除 .modal-open） */
body.modal-open{ overflow: hidden; }

/* === Numbers size for Year / Month / Day cells === */
:root{
  /* 自行按需调这三个值 */
  --year-num-size:  clamp(.50rem, 3vw, 1rem);
  --month-num-size: clamp(.50rem, 3vw, 1rem);
  --day-num-size:   clamp(.50rem, 3vw, 1rem);
}

/* 年：年份数字（仅 year 行显示数字时） */
#rowYears > .cell.cell--yearnum{
  font-size: var(--year-num-size);
}

/* 月：月份数字（仅 month 展开层内、显示数字的月格） */
#expander [data-month].cell{
  font-size: var(--month-num-size);
}

/* 日：日期数字（仅 day 展开层内、显示数字的日格） */
#expanderDays [data-day].cell{
  font-size: var(--day-num-size);
}
:root{
  --year-num-size: 12px;     /* 年格数字基准（包含出生年等） */
  --thisyear-num-size: 14px; /* 今年格单独字号 */
}

#rowYears > .cell.cell--yearnum{   font-size: var(--year-num-size); }
#rowYears > .cell.cell--thisyear{  font-size: var(--year-num-size); }
#expander     [data-month].cell{ font-size: 12px; }
#expanderDays [data-day].cell  { font-size: 12px; }

/* === 1) 全局可调的发光参数（只改这几个） === */
:root{
  --glow-color: rgba(60,223,1,.40);   /* 亮度/透明度 */
  --glow-r: 6px;                     /* 基础发光半径（.cell.is-lit） */
  --glow-r-pulse: calc(var(--glow-r) + 2px); /* 呼吸核更亮更大一点 */
  --glow-r-star: 6px;                 /* 角标 * 的小光晕半径 */
}

/* === 2) 统一：任何格子“点亮”就发光（年/月/日格、设置 tab、按钮都用 .cell.is-lit） === */
.cell{ box-shadow: none; } /* 默认不发光 */
.cell.is-lit{
  box-shadow: 0 0 var(--glow-r) var(--glow-color);
  text-shadow: 0 0 calc(var(--glow-r) * .33) var(--glow-color);
}

/* === 3) 呼吸态芯片（pulse）核心光强 —— 比静态多一点半径/强度 === */
.cell.pulse::before,
.pulse::before{
  box-shadow:
    0 0 var(--glow-r-pulse) var(--glow-color),  /* 外发光更大 */
    inset 0 0 2px rgba(0,0,0,.65);              /* 内阴影原样 */
}

/* === 4) 右下角星标 * 的发光（有 tips 的格子） === */
.star-corner::after,
.cell--dot::after{
  text-shadow:
    0 0 var(--glow-r-star) var(--glow-color),
    0 0 calc(var(--glow-r-star) * .4) var(--glow-color);
}

/* === 5) 信息条 / 倒计时（可选，想更亮就留着，不想亮就删） === */
#infoBar.active{ text-shadow: 0 0 calc(var(--glow-r) * .2) var(--glow-color); }

/* 建议：不要在别处单独给 .settings-tabs .tab 加 box-shadow，
   只让“被选中的 tab”加 .is-lit 类，这样发光就走统一口径 */

   /* 预览卡片宽度（只影响界面展示，不影响导出清晰度） */
:root { --card-preview-width: 560px; }   /* 改这个数就行 */

.card-overlay .card-canvas-wrap {
  width: var(--card-preview-width);
  max-width: 92vw;          /* 小屏别溢出 */
}

.card-overlay .card-canvas-wrap canvas {
  width: 100%;
  height: auto;             /* 保持比例 */
  display: block;
}
/* 让预览容器在 .card-modal（flex column）里水平居中，不再被拉伸 */
.card-overlay .card-canvas-wrap{
  align-self: center;   /* 关键：覆盖 stretch */
  flex: 0 0 auto;       /* 不增长不收缩，按自身宽度 */
}

/* 全局星标透明度开关 */
:root {
  --star-opacity: .48;           /* 调整这里，0~1；比如 .2 更淡，.5 更亮 */
  --star-opacity-hover: .88;     /* 悬停/聚焦时稍微亮一点（可选） */
}

/* 年/月/日三层的“有笔记”角标（has-notes）的透明度统一调低 */
#rowYears .has-notes::after,
#expander .has-notes::after,
#expanderDays .has-notes::after {
  opacity: var(--star-opacity);
}

/* 如果你还有 star-corner / cell--dot 这种星标实现，也一并降不透明度 */
#rowYears .star-corner::after,
#expander .star-corner::after,
#expanderDays .star-corner::after,
#rowYears .cell--dot::after,
#expander .cell--dot::after,
#expanderDays .cell--dot::after {
  opacity: var(--star-opacity);
}

/* 交互友好：鼠标悬停或键盘聚焦时稍微更亮（可选） */
#rowYears .has-notes:hover::after,
#rowYears .has-notes:focus-visible::after,
#expander .has-notes:hover::after,
#expander .has-notes:focus-visible::after,
#expanderDays .has-notes:hover::after,
#expanderDays .has-notes:focus-visible::after {
  opacity: var(--star-opacity-hover);
}

/* 视觉隐藏但屏读器可见 */
.sr-only{
  position:absolute!important;
  width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}

/* === Mobile safe area — minimal patch (drop-in) === */
/* 需要 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> */
:root{
  --safe-l: env(safe-area-inset-left);
  --safe-r: env(safe-area-inset-right);
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --page-gutter: clamp(8px, 4vw, 16px); /* 全局左右留白 */
}

html, body{ overflow-x:hidden; }

/* 1) 主容器：统一打安全区 + 左右留白 */
.page-gutters{
  /* 左右采用较大的一侧安全区，确保对称居中（iOS 上左右值偶尔不一致） */
  padding-left:  calc(max(var(--safe-l), var(--safe-r)) + var(--page-gutter));
  padding-right: calc(max(var(--safe-l), var(--safe-r)) + var(--page-gutter));
  max-width: 100%;
}

/* 2) 大面板稍作内缩，避免虚线贴边 */
.page-gutters #rowYears,
.page-gutters #expander,
.page-gutters #expanderDays,
.page-gutters #tipsPanel,
.page-gutters .settings-box,
.page-gutters .reg-box{
  padding-inline: max(0px, var(--page-gutter) * .25);
}

/* 3) 全屏遮罩：避开刘海与底部 Home 区 */
.card-overlay,
.pip-confirm-overlay{
  padding: var(--safe-t) calc(var(--safe-r) + var(--page-gutter))
           var(--safe-b) calc(var(--safe-l) + var(--page-gutter));
}

/* 强制主区块及其展开层水平居中（移动端看齐） */
.container{ margin-left:auto; margin-right:auto; }
#expander, #expanderDays, #tipsPanel{ margin-left:auto; margin-right:auto; }
/* 让月份/日期展开层的格子在可用宽度内居中（不改变现有网格尺寸） */
#expander, #expanderDays{ justify-content: center; }

/* 4) 遮罩内弹窗主体：给一点横向余量（不影响居中） */
.card-overlay .card-modal,
.pip-confirm-overlay .pip-confirm-modal{
  margin-inline: max(0px, var(--safe-l)) max(0px, var(--safe-r));
}

/* 设置/注册面板整体收缩并水平居中（与网格视觉对齐） */
.settings-box, .reg-box{
  max-width: min(100%, 680px);
  margin-left: auto;
  margin-right: auto;
}

/* 5) 底部粘滞操作条：避免被 Home 指示条挡住 */
.tips-actions{ padding-bottom: calc(8px + var(--safe-b)); }

/* 6) 浮动按钮/悬浮控件（如有），自动让位 */
.fab, .floating-btn, .floating-tool{
  right:  calc(12px + var(--safe-r));
  bottom: calc(12px + var(--safe-b));
}

/* 7) 通用工具类（可选）：需要时随用随加 */
.safe-x{ padding-left: var(--safe-l); padding-right: var(--safe-r); }
.safe-y{ padding-top:  var(--safe-t); padding-bottom: var(--safe-b); }

/* 小屏留白再紧一点（可选） */
@media (max-width: 380px){
  :root{ --page-gutter: clamp(8px, 5vw, 16px); }
}
/* 放在你的 CSS 末尾：让 12×12 的总宽刚好塞进可用宽度（含安全区与左右内边距） */
.page-gutters .row-12{
  /* 可用宽度（视口 - 安全区 - 两侧 page gutter） */
  --usable: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 2*var(--page-gutter));
  /* 反推每格大小： (可用宽度 - 11 个间隙) / 12 */
  --tile-size: clamp(14px, calc((var(--usable) - 11*var(--grid-gap)) / 12), 30px);
  /* 防止任何溢出 */
  max-width: 100%;
}