:root{
  --radius: 14px;
  --border: rgba(0,0,0,.08);
  --card: rgba(255,255,255,1);
  --focus-ring: 0 0 0 2px rgba(0,0,0,.08);
  --primary: var(--palette-color-1, #1E3A8A);
}
.spc{ width: 100%; margin-inline:auto; }
/* Inherit Blocksy container width when inside .ct-container */
.ct-container .spc { max-width: 100%; }

/* Fallback when not inside Blocksy container: use Blocksy/CSS vars if available */
.spc--inherit, .spc--content {
  max-width: var(--container-max-width,
              var(--wp--style--global--content-size,
              var(--theme-content-width,
              var(--content-width, 760px))));
  margin-inline: auto;
}

/* Wide uses Blocksy wide container var if present */
.spc--wide {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
}

.spc--narrow{ max-width: 720px; margin-inline: auto; }
.spc--wide{ max-width: 1200px; margin-inline: auto; }
.spc--full{ max-width: none; }
.spc-toast{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px); background: #000; color:#fff; padding:10px 14px; border-radius: 999px; opacity:0; pointer-events:none; transition: .2s ease; font-size:.9rem; z-index: 1000; }
.spc-toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

.spc-cards{ display:grid; grid-template-columns: 1fr; gap:12px; }
.spc-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }
.spc-card-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.spc-title{ margin:0; font-size:.95rem; color:rgba(0,0,0,.6); }
.spc-actions{ display:flex; gap:8px; }
.spc-pill{ padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:.85rem; color:rgba(0,0,0,.7); cursor:pointer; }
.spc-pill:hover{ border-color: var(--primary); color: var(--primary); }
.spc-grid{ display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap:8px; padding: 12px; }
@media (max-width:1080px){ .spc-grid{ grid-template-columns: repeat(10, 1fr);} }
@media (max-width:900px){ .spc-grid{ grid-template-columns: repeat(8, 1fr);} }
@media (max-width:720px){ .spc-grid{ grid-template-columns: repeat(6, 1fr);} }
@media (max-width:520px){ .spc-grid{ grid-template-columns: repeat(4, 1fr);} }
.spc-cell{ display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; cursor:pointer; user-select:none; font-size: 18px; }
.spc-cell:focus{ outline:none; box-shadow: var(--focus-ring); }
.spc-cell:hover{ border-color: var(--primary); }

/* 空狀態也保留卡片框與高度 */
.spc-empty{ display:flex; align-items:center; justify-content:center; height:96px; width:100%; border:1px dashed var(--border); border-radius:var(--radius); color: rgba(0,0,0,.45); grid-column: 1 / -1; }

/* 與 Blocksy 調和：繼承字型/圓角 */
.spc *{ border-radius: inherit; font-family: inherit; }