/* 開發站與本機才會用到的東西：模式標示（ribbon）、示範控制面板（aside.panel）、入口示意。正式站不載入面板的程式（`/src/demo/`），
   這份樣式只是樣式、沒有行為。從舊的 `styles.css` 搬出需要的部分，改成不依賴舊的深色版面（活動頁不再載入 `styles.css`）。 */
:root { --text-2: rgba(43, 26, 22, 0.8); --text-3: #6b5650; --gold-soft: #9a7a2c; }
.ribbon { position: sticky; top: 0; z-index: 210; display: flex; gap: 6px; align-items: baseline; padding: 7px 12px; font-size: 12.5px; line-height: 1.45; background: #f6f4f0; color: #1d1b18; border-bottom: 1px solid #e2ddd4; }
.ribbon b { font-weight: 800; white-space: nowrap; }
.ribbon.real { background: #ffe3a3; color: #3a2a00; border-bottom-color: #e2b54a; }
.dev-foot { margin: 20px 16px 0; font-size: 12px; color: var(--ink-2); text-align: center; }
.panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 220; width: auto; max-width: 480px; margin: 0 auto; max-height: 76dvh; overflow-y: auto; background: #f6f4f0; color: #1d1b18; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4); font-size: 13px; transform: translateY(105%); visibility: hidden; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s; }
.panel.open { transform: none; visibility: visible; transition-delay: 0s; }
.panel-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; background: #f6f4f0; border-bottom: 1px solid #e2ddd4; }
.panel-head b { display: block; font-size: 15px; }
.panel-head span { font-size: 12px; color: #6b655c; }
.panel-toggle { border: 1px solid #cfc8bc; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12px; }
.panel.collapsed .panel-body { display: block; }
.panel-body { padding: 4px 16px 16px; }
.panel-status { margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e2ddd4; font-size: 12.5px; line-height: 1.6; }
.p-group { margin-top: 14px; }
.p-group h4 { margin: 0 0 6px; font-size: 12px; color: #6b655c; font-weight: 700; letter-spacing: 0.04em; }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-grid-1 { grid-template-columns: 1fr; }
.p-grid button, .p-reset, .p-actions button { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid #d6d0c5; background: #fff; font-size: 12.5px; line-height: 1.35; }
.p-grid button[aria-pressed='true'], .p-actions button.primary { background: #1d1b18; color: #fff; border-color: #1d1b18; }
.p-reset { width: 100%; text-align: center; color: #b3261e; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { flex: 1 1 0; min-width: 0; padding: 7px 4px; border-radius: 8px; border: 1px solid #d6d0c5; background: #fff; font-size: 12.5px; white-space: nowrap; }
.seg button.on { background: #1d1b18; color: #fff; border-color: #1d1b18; }
.p-date { display: flex; gap: 6px; align-items: center; }
.p-date button { width: 36px; height: 34px; border-radius: 8px; border: 1px solid #d6d0c5; background: #fff; }
.p-date input { flex: 1; height: 34px; border-radius: 8px; border: 1px solid #d6d0c5; padding: 0 8px; font: inherit; background: #fff; color: inherit; }
.p-hint { margin: 6px 0 0; font-size: 12px; color: #6b655c; }
.p-check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
.p-foot { margin: 16px 0 0; font-size: 12px; color: #6b655c; }
.p-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-actions .wide { grid-column: 1 / -1; }
.panel-fab { display: block; position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 215; padding: 9px 14px; border-radius: 999px; border: 1px solid #cfc8bc; background: #f6f4f0; color: #1d1b18; font-size: 13px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.panel-fab[aria-expanded='true'] { display: none; }
.entry-mock { position: fixed; inset: 0; z-index: 205; background: #121212; color: #fff; overflow: auto; }
.entry-mock[hidden] { display: none; }
.wl { padding: 18px 16px 0; max-width: 480px; margin: 0 auto; }
.wl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wl-note { margin: 12px 0 0; font-size: 12px; color: #8a8a8a; }
.wl-close { position: fixed; right: 12px; bottom: 74px; padding: 6px 10px; border-radius: 8px; border: 1px solid #444; background: rgba(0, 0, 0, 0.6); color: #ddd; font-size: 12px; }
.entry-big, .entry-bar { position: fixed; left: 12px; bottom: 70px; }
.entry-big-main, .entry-bar-main { border-radius: 16px; border: 1px solid rgba(255, 184, 0, 0.6); background: #2b1608; color: #fff; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.entry-art, .entry-art-mini { width: 40px; height: 40px; }
.entry-fold, .entry-unfold { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #555; background: #222; color: #ddd; }
.entry-ph { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.55); }