/* ==================================================================
   easycard-demo · DEMO 控制台樣式
   ------------------------------------------------------------------
   刻意做成與 App 完全不同的深色風格，讓客戶一眼看出
   這一塊是示意用的操作面板，不屬於畫面設計。
   ================================================================== */

.demo-panel,
.demo-panel * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

.demo-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.demo-panel__fab {
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    background: #1f2430;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    cursor: pointer;
}

.demo-panel__fab:active { transform: translateY(1px); }

.demo-panel__body {
    width: min(19rem, calc(100vw - 24px));
    max-height: min(84vh, 44rem);
    overflow-y: auto;
    padding: 12px;
    border-radius: 12px;
    color: #e8eaf0;
    background: #1f2430;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .34);
}

.demo-panel__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
    font-weight: 700;
}

.demo-panel__head span {
    font-size: 11px;
    font-weight: 400;
    color: #99a1b3;
}

.demo-panel__sec { margin-bottom: 12px; }

.demo-panel__sec > b {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #99a1b3;
}

.demo-panel__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.demo-chip {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
    color: #e8eaf0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.demo-chip:hover { border-color: rgba(255, 255, 255, .38); }
.demo-chip.is-on { color: #12151c; background: #9ad7ff; border-color: #9ad7ff; }
.demo-chip.is-here { color: #12151c; background: #ffe08a; border-color: #ffe08a; }

.demo-panel__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.demo-panel__btn {
    flex: 1 1 0;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
    color: #e8eaf0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.demo-panel__btn:hover { border-color: rgba(255, 255, 255, .45); }

/* 手機寬度面板太窄，「回流程導覽」先藏起來 */
@media (max-width: 480px) {
    .demo-panel__btn--hub { display: none; }
}

/* 彈窗打開時蓋住整頁，DEMO 控制台先收起來 */
html.demo-sheet-open .demo-panel { display: none; }

/* 長按開選單：不要跳出系統的選字與預覽 */
[data-ec-card] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* 卡號格式錯誤：切版 form-word-link 沒有 red，比照 form-word.red 用 $error */
.form-word-link.red .warn { color: #E53F34; }

/* 表頭右上角有篩選、關閉鈕，頁籤也貼著表頭，DEMO 鈕改放右下、讓開底部按鈕列 */
.demo-panel { top: auto; bottom: 112px; flex-direction: column-reverse; }

/* 切版 .c-main 的 overflow-y: scroll 在桌機會吃掉 15px 並冒出橫向捲軸，手機的浮動捲軸才不佔寬 */
.c-main { overflow: visible; }