@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap');

:root {
    --kl-ink: #20150e;        /* 主文字 深棕 */
    --kl-accent: #8a4c0e;     /* 強調色 */
    --kl-accent-soft: #b5793a;
    --kl-muted: #8b7b70;      /* 次要文字 */
    --kl-line: #e1e0e0;       /* 淺灰線 */
    --kl-panel: rgba(255, 255, 255, 0.92);
    --kl-panel-solid: #ffffff;
}

* {
    box-sizing: border-box;
}

body.kl-tools {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    color: var(--kl-ink);
    background-image: url('/legacy/images/default_bg_1920x1080.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* ---------- 頂部列 ---------- */
.kl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 4px solid #ffffff;
    box-shadow: 0 2px 14px rgba(32, 21, 14, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.kl-topbar .kl-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--kl-ink);
}

.kl-topbar .kl-brand img {
    height: 46px;
}

.kl-topbar .kl-brand .kl-brand-text {
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.1;
}

.kl-topbar .kl-brand .kl-brand-text small {
    display: block;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 12px;
    color: var(--kl-muted);
    letter-spacing: 1px;
}

.kl-topnav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.kl-topnav a {
    color: var(--kl-ink);
    text-decoration: none;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 30px;
    transition: all .2s ease;
    white-space: nowrap;
}

.kl-topnav a:hover,
.kl-topnav a.active {
    color: #fff;
    background: var(--kl-accent);
}

/* ---------- 內容容器 ---------- */
.kl-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.kl-page-title {
    text-align: center;
    margin-bottom: 12px;
}

.kl-page-title h1 {
    font-family: 'Noto Serif TC', serif;
    font-size: 40px;
    letter-spacing: 4px;
    margin: 0 0 8px;
    color: var(--kl-ink);
}

.kl-page-title p {
    color: var(--kl-muted);
    letter-spacing: 2px;
    margin: 0;
}

.kl-page-title .kl-eng {
    display: block;
    font-family: 'Noto Serif TC', serif;
    color: var(--kl-accent);
    letter-spacing: 5px;
    font-size: 13px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

/* ---------- 工具清單卡片 ---------- */
.kl-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
    margin-top: 40px;
}

.kl-tool-card {
    display: flex;
    flex-direction: column;
    background: var(--kl-panel);
    border: 3px solid #ffffff;
    border-radius: 22px;
    padding: 32px 26px;
    text-decoration: none;
    color: var(--kl-ink);
    box-shadow: 0 8px 26px rgba(32, 21, 14, 0.1);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
    min-height: 210px;
}

.kl-tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(138, 76, 14, 0.22);
    color: var(--kl-ink);
}

.kl-tool-card.kl-soon {
    opacity: .6;
    pointer-events: none;
}

.kl-tool-card .kl-tool-icon {
    font-size: 46px;
    line-height: 1;
    margin-bottom: 18px;
}

.kl-tool-card h3 {
    font-family: 'Noto Serif TC', serif;
    font-size: 24px;
    letter-spacing: 2px;
    margin: 0 0 10px;
}

.kl-tool-card p {
    color: var(--kl-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

.kl-tool-card .kl-tool-go {
    margin-top: 16px;
    color: var(--kl-accent);
    font-size: 14px;
    letter-spacing: 2px;
}

.kl-tool-card .kl-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--kl-accent);
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
}

.kl-tool-card.kl-soon .kl-badge {
    background: var(--kl-muted);
}

/* ---------- 通用面板/按鈕 ---------- */
.kl-panel {
    background: var(--kl-panel);
    border: 3px solid #ffffff;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 8px 26px rgba(32, 21, 14, 0.1);
}

.kl-panel h2 {
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kl-panel h2 .kl-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kl-accent);
    color: #fff;
    font-size: 15px;
    font-family: 'Noto Sans TC', sans-serif;
    flex: 0 0 auto;
}

.kl-field {
    margin-bottom: 18px;
}

.kl-field:last-child {
    margin-bottom: 0;
}

.kl-field label {
    display: block;
    font-size: 14px;
    color: var(--kl-ink);
    margin-bottom: 7px;
    letter-spacing: 1px;
}

.kl-input,
.kl-textarea {
    width: 100%;
    border: 1px solid var(--kl-line);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--kl-ink);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.kl-input:focus,
.kl-textarea:focus {
    outline: none;
    border-color: var(--kl-accent);
    box-shadow: 0 0 0 3px rgba(138, 76, 14, 0.12);
}

.kl-textarea {
    resize: vertical;
    min-height: 150px;
    line-height: 1.6;
}

.kl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 2px;
    padding: 12px 24px;
    border-radius: 30px;
    background: var(--kl-accent);
    color: #fff;
    transition: all .2s ease;
    text-decoration: none;
}

.kl-btn:hover {
    background: #6f3c0a;
    color: #fff;
}

.kl-btn:disabled {
    background: var(--kl-muted);
    cursor: not-allowed;
    opacity: .7;
}

.kl-btn.kl-btn-lg {
    font-size: 18px;
    padding: 15px 40px;
    width: 100%;
}

.kl-btn.kl-btn-ghost {
    background: transparent;
    color: var(--kl-accent);
    border: 1px solid var(--kl-accent);
}

.kl-btn.kl-btn-ghost:hover {
    background: var(--kl-accent);
    color: #fff;
}

.kl-btn.kl-btn-sm {
    font-size: 13px;
    padding: 8px 16px;
    letter-spacing: 1px;
}

.kl-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- 開關/勾選 ---------- */
.kl-check {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 14px;
    color: var(--kl-ink);
    user-select: none;
}

.kl-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--kl-accent);
    cursor: pointer;
}

.kl-inline-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
}

/* ---------- 抽獎版面 ---------- */
.kl-draw-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 26px;
    align-items: start;
}

.kl-config-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 獎項列 */
.kl-prize-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

.kl-prize-row .kl-input {
    padding: 9px 12px;
}

.kl-prize-row .kl-prize-name {
    flex: 1 1 auto;
}

.kl-prize-row .kl-prize-qty {
    width: 88px;
    flex: 0 0 auto;
    text-align: center;
}

.kl-prize-row .kl-prize-del {
    flex: 0 0 auto;
    border: none;
    background: #f2eee9;
    color: var(--kl-muted);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all .2s;
}

.kl-prize-row .kl-prize-del:hover {
    background: #e5a; /* fallback */
    background: #e0b8a0;
    color: var(--kl-accent);
}

.kl-count-tip {
    font-size: 13px;
    color: var(--kl-muted);
    margin-top: 6px;
}

.kl-count-tip b {
    color: var(--kl-accent);
    font-size: 15px;
}

/* 舞台 */
.kl-stage {
    background: var(--kl-panel);
    border: 3px solid #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 26px rgba(32, 21, 14, 0.1);
    padding: 30px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

.kl-stage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 10px;
    flex-wrap: wrap;
}

.kl-stage-head .kl-theme-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 24px;
    letter-spacing: 3px;
    margin: 0;
}

.kl-stage-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kl-icon-btn {
    border: 1px solid var(--kl-line);
    background: #fff;
    color: var(--kl-muted);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.kl-icon-btn:hover,
.kl-icon-btn.active {
    border-color: var(--kl-accent);
    color: var(--kl-accent);
}

/* 滾動顯示 */
.kl-roller {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(160deg, #fbf8f4 0%, #f3ece3 100%);
    border: 1px dashed #d9cdbf;
    min-height: 280px;
    position: relative;
    overflow: hidden;
}

.kl-roller .kl-prize-label {
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--kl-accent);
    margin-bottom: 14px;
    min-height: 24px;
}

.kl-roller .kl-roll-names {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: center;
    align-items: center;
}

.kl-roller .kl-roll-name {
    font-family: 'Noto Serif TC', serif;
    font-size: 54px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--kl-ink);
    line-height: 1.2;
    transition: transform .1s;
}

.kl-roller.rolling .kl-roll-name {
    color: var(--kl-accent-soft);
}

.kl-roller .kl-roll-name.pop {
    animation: kl-pop .5s ease;
    color: var(--kl-accent);
}

@keyframes kl-pop {
    0% { transform: scale(.3); opacity: 0; }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); opacity: 1; }
}

.kl-roller .kl-idle-hint {
    color: var(--kl-muted);
    letter-spacing: 2px;
}

.kl-roller .kl-idle-hint .big {
    font-family: 'Noto Serif TC', serif;
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
    color: var(--kl-ink);
}

/* 結果清單 */
.kl-results {
    margin-top: 22px;
}

.kl-result-group {
    border: 1px solid var(--kl-line);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: #fff;
}

.kl-result-group h4 {
    font-family: 'Noto Serif TC', serif;
    font-size: 17px;
    letter-spacing: 2px;
    margin: 0 0 12px;
    color: var(--kl-accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kl-result-group h4 .kl-qty-pill {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 12px;
    background: #f3ece3;
    color: var(--kl-muted);
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
}

.kl-winner-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kl-winner-chip {
    background: #f7f1e9;
    border: 1px solid #e8dcc9;
    color: var(--kl-ink);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 15px;
    letter-spacing: 1px;
}

.kl-results-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* 全螢幕 */
.kl-stage:fullscreen {
    background: var(--kl-ink);
    color: #fff;
    justify-content: center;
    padding: 4vh 4vw;
}

.kl-stage:fullscreen .kl-theme-title {
    color: #fff;
}

.kl-stage:fullscreen .kl-roller {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    min-height: 60vh;
}

.kl-stage:fullscreen .kl-roll-name {
    color: #fff;
    font-size: min(12vw, 130px);
}

.kl-stage:fullscreen .kl-roller.rolling .kl-roll-name {
    color: #f0c896;
}

.kl-stage:fullscreen .kl-idle-hint,
.kl-stage:fullscreen .kl-idle-hint .big {
    color: #fff;
}

.kl-stage:fullscreen .kl-results {
    display: none;
}

/* 提示訊息 */
.kl-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%) translateY(20px);
    background: var(--kl-ink);
    color: #fff;
    padding: 12px 26px;
    border-radius: 30px;
    font-size: 15px;
    letter-spacing: 1px;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.kl-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.kl-footer {
    text-align: center;
    color: var(--kl-muted);
    font-size: 13px;
    letter-spacing: 1px;
    padding: 30px 20px;
}

.kl-test-flag {
    display: none;
    background: #f3ece3;
    color: var(--kl-accent);
    border: 1px dashed var(--kl-accent-soft);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 16px;
    text-align: center;
}

.kl-test-flag.show {
    display: block;
}

/* ---------- RWD ---------- */
/* ---------- 單欄工具（亂數 / 今天吃什麼 / 分組） ---------- */
.kl-tool-single {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.kl-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.kl-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kl-radio {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--kl-line);
    border-radius: 12px;
    padding: 11px 14px;
    cursor: pointer;
    transition: all .2s;
    font-size: 14px;
    user-select: none;
}

.kl-radio:hover {
    border-color: var(--kl-accent-soft);
}

.kl-radio input {
    accent-color: var(--kl-accent);
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.kl-radio.checked {
    border-color: var(--kl-accent);
    background: #faf5ee;
}

/* 大結果顯示 */
.kl-big-result {
    background: linear-gradient(160deg, #fbf8f4 0%, #f3ece3 100%);
    border: 1px dashed #d9cdbf;
    border-radius: 16px;
    padding: 34px 24px;
    text-align: center;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kl-big-result .kl-idle-hint {
    color: var(--kl-muted);
    letter-spacing: 2px;
}

.kl-num-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.kl-num-chip {
    font-family: 'Noto Serif TC', serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--kl-accent);
    background: #fff;
    border: 2px solid #ecdcc6;
    border-radius: 14px;
    min-width: 66px;
    padding: 10px 18px;
    text-align: center;
    animation: kl-pop .4s ease;
}

.kl-eat-result {
    font-family: 'Noto Serif TC', serif;
    font-size: 56px;
    font-weight: 700;
    color: var(--kl-ink);
    letter-spacing: 4px;
    line-height: 1.3;
}

.kl-eat-result.rolling {
    color: var(--kl-accent-soft);
}

.kl-eat-result.pop {
    animation: kl-pop .5s ease;
    color: var(--kl-accent);
}

/* 分組結果 */
.kl-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.kl-group-card {
    border: 1px solid var(--kl-line);
    border-radius: 14px;
    padding: 16px 18px;
    background: #fff;
}

.kl-group-card h4 {
    font-family: 'Noto Serif TC', serif;
    font-size: 17px;
    letter-spacing: 2px;
    margin: 0 0 12px;
    color: var(--kl-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kl-group-card h4 .kl-qty-pill {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 12px;
    background: #f3ece3;
    color: var(--kl-muted);
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
}

/* ---------- SEO 內文 / FAQ / 關於公司 ---------- */
.kl-content {
    max-width: 900px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.kl-prose {
    color: var(--kl-ink);
    line-height: 1.9;
    font-size: 15px;
}

.kl-prose h2,
.kl-faq h2,
.kl-about-company h2 {
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    letter-spacing: 2px;
    margin: 0 0 14px;
    color: var(--kl-ink);
}

.kl-prose p {
    margin: 0 0 12px;
    text-align: justify;
}

.kl-prose ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.kl-prose li {
    margin-bottom: 6px;
}

.kl-prose strong {
    color: var(--kl-accent);
}

/* FAQ 手風琴（原生 details，利於 SEO） */
.kl-faq details {
    border: 1px solid var(--kl-line);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}

.kl-faq summary {
    cursor: pointer;
    padding: 15px 18px;
    font-size: 15px;
    letter-spacing: 1px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--kl-ink);
    transition: background .2s;
}

.kl-faq summary::-webkit-details-marker { display: none; }

.kl-faq summary::after {
    content: '＋';
    color: var(--kl-accent);
    font-size: 18px;
    flex: 0 0 auto;
}

.kl-faq details[open] summary::after { content: '－'; }

.kl-faq summary:hover { background: #faf5ee; }

.kl-faq .kl-faq-body {
    padding: 0 18px 16px;
    color: var(--kl-muted);
    line-height: 1.85;
    font-size: 14px;
}

/* 關於公司曝光區 */
.kl-about-company {
    border-left: 4px solid var(--kl-accent);
}

.kl-about-company .kl-svc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.kl-about-company .kl-svc span {
    background: #f7f1e9;
    border: 1px solid #e8dcc9;
    color: var(--kl-ink);
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 13px;
    letter-spacing: 1px;
}

.kl-about-company .kl-contact-line {
    font-size: 14px;
    color: var(--kl-muted);
    margin: 0 0 16px;
    line-height: 1.8;
}

.kl-about-company .kl-contact-line a {
    color: var(--kl-accent);
    text-decoration: none;
}

.kl-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 900px) {
    .kl-draw-layout {
        grid-template-columns: 1fr;
    }
    .kl-content {
        margin-top: 28px;
    }
    .kl-page-title h1 {
        font-size: 30px;
    }
    .kl-roller .kl-roll-name {
        font-size: 40px;
    }
    .kl-topbar {
        padding: 14px 18px;
    }
    .kl-topbar .kl-brand .kl-brand-text {
        font-size: 17px;
    }
    .kl-wrap {
        padding: 26px 14px 60px;
    }
}

@media (max-width: 560px) {
    .kl-topnav a {
        padding: 6px 11px;
        font-size: 13px;
    }
    .kl-roller .kl-roll-name {
        font-size: 32px;
    }
    .kl-stage {
        padding: 20px 16px;
    }
}

/* ---------- 密碼產生器 ---------- */
.kl-pwd-result {
    font-family: 'Courier New', monospace;
    font-size: 26px;
    letter-spacing: 2px;
    word-break: break-all;
    color: var(--kl-ink);
    background: #fff;
    border: 1px solid var(--kl-line);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    min-height: 64px;
}

.kl-strength {
    margin-top: 14px;
}

.kl-strength-track {
    height: 8px;
    background: #efe8df;
    border-radius: 6px;
    overflow: hidden;
}

.kl-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width .3s ease, background .3s ease;
}

.kl-strength-bar.weak { background: #c0563a; }
.kl-strength-bar.fair { background: #d59a3a; }
.kl-strength-bar.good { background: #b5793a; }
.kl-strength-bar.strong { background: #6a8a3a; }

.kl-strength-text {
    font-size: 13px;
    color: var(--kl-muted);
    margin-top: 8px;
}

.kl-range {
    width: 100%;
    accent-color: var(--kl-accent);
    cursor: pointer;
}

.kl-len-badge {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    background: var(--kl-accent);
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 14px;
    margin-left: 8px;
}

/* ---------- 計算機類結果（分帳 / 發票） ---------- */
.kl-bill-main {
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    letter-spacing: 1px;
    text-align: center;
    color: var(--kl-ink);
    margin: 6px 0 4px;
}

.kl-bill-main b {
    font-size: 34px;
    color: var(--kl-accent);
}

.kl-bill-rows {
    margin: 14px 0 4px;
}

.kl-bill-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 4px;
    border-bottom: 1px dashed var(--kl-line);
    font-size: 15px;
}

.kl-bill-row:last-child { border-bottom: none; }

.kl-bill-row span:first-child { color: var(--kl-muted); }
.kl-bill-row span:last-child { color: var(--kl-ink); font-weight: bold; }

/* ---------- 轉盤 ---------- */
.kl-wheel-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 6px;
}

.kl-wheel-stage {
    position: relative;
    display: inline-block;
}

.kl-wheel-stage canvas {
    display: block;
    filter: drop-shadow(0 6px 16px rgba(32, 21, 14, 0.18));
}

.kl-wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 26px solid var(--kl-accent);
    z-index: 3;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.kl-winner {
    font-family: 'Noto Serif TC', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--kl-accent);
    letter-spacing: 2px;
    min-height: 42px;
    text-align: center;
    margin-top: 14px;
}

/* ---------- QR / 條碼 ---------- */
.kl-code-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #fbf8f4 0%, #f3ece3 100%);
    border: 1px dashed #d9cdbf;
    border-radius: 16px;
    padding: 24px;
    min-height: 220px;
}

.kl-code-result img,
.kl-code-result canvas {
    max-width: 100%;
    background: #fff;
    border-radius: 8px;
}

.kl-code-result .kl-idle-hint { color: var(--kl-muted); letter-spacing: 1px; }

/* ---------- 圖片工具（拖放 / 預覽） ---------- */
.kl-drop {
    border: 2px dashed #d9cdbf;
    border-radius: 16px;
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(160deg, #fbf8f4 0%, #f3ece3 100%);
    transition: border-color .2s, background .2s;
}

.kl-drop:hover,
.kl-drop.over {
    border-color: var(--kl-accent);
    background: #faf5ee;
}

.kl-drop .kl-drop-icon { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.kl-drop .kl-drop-title { font-size: 16px; color: var(--kl-ink); letter-spacing: 1px; }
.kl-drop .kl-drop-sub { font-size: 13px; color: var(--kl-muted); margin-top: 6px; }

.kl-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.kl-img-box {
    text-align: center;
}

.kl-img-box h4 {
    font-family: 'Noto Serif TC', serif;
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--kl-accent);
    margin: 0 0 10px;
}

.kl-img-preview {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--kl-line);
    background: #faf8f5;
}

.kl-drop svg {
    width: 46px;
    height: 46px;
    color: var(--kl-accent);
    margin-bottom: 8px;
}

.kl-drop .kl-drop-btn {
    display: inline-block;
    margin-top: 12px;
    background: var(--kl-accent);
    color: #fff;
    padding: 9px 22px;
    border-radius: 30px;
    font-size: 15px;
    letter-spacing: 1px;
    pointer-events: none;
    /* 視覺按鈕；整個拖放區皆可點 */
}

.kl-drop:hover .kl-drop-btn { background: #6f3c0a; }

.kl-img-meta {
    font-size: 13px;
    color: var(--kl-muted);
    margin-top: 8px;
    letter-spacing: .5px;
}

@media (max-width: 640px) {
    .kl-img-grid { grid-template-columns: 1fr; }
}

/* ---------- 字數統計 ---------- */
.kl-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}
.kl-stat {
    background: linear-gradient(160deg, #fbf8f4 0%, #f3ece3 100%);
    border: 1px solid #ecdcc6;
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
}
.kl-stat .kl-stat-num {
    font-family: 'Noto Serif TC', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--kl-accent);
    line-height: 1.1;
}
.kl-stat .kl-stat-label { font-size: 13px; color: var(--kl-muted); margin-top: 5px; letter-spacing: 1px; }

/* ---------- 骰子 / 硬幣 ---------- */
.kl-dice-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kl-die {
    font-family: 'Noto Serif TC', serif;
    min-width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid #ecdcc6; border-radius: 14px;
    font-size: 30px; font-weight: 700; color: var(--kl-accent);
    box-shadow: 0 4px 12px rgba(32, 21, 14, 0.1);
}
.kl-die .kl-die-pip { font-size: 46px; line-height: 1; }
.kl-die.pop { animation: kl-pop .4s ease; }
.kl-dice-sum { text-align: center; margin-top: 14px; font-size: 18px; color: var(--kl-ink); }
.kl-dice-sum b { font-size: 26px; color: var(--kl-accent); }
.kl-coin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e6c58a, #b5793a);
    color: #fff; font-family: 'Noto Serif TC', serif; font-size: 40px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(138, 76, 14, 0.3);
}
.kl-coin.pop { animation: kl-pop .5s ease; }

/* ---------- 顏色轉換 ---------- */
.kl-swatch {
    display: flex; align-items: center; justify-content: center;
    height: 150px; border-radius: 16px; border: 1px solid var(--kl-line);
    font-family: 'Courier New', monospace; font-size: 24px; letter-spacing: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.kl-color-picker {
    width: 100%; height: 54px; border: 1px solid var(--kl-line);
    border-radius: 12px; cursor: pointer; padding: 4px; background: #fff;
}
.kl-color-row { display: flex; gap: 8px; align-items: flex-end; }
.kl-color-row .kl-field { flex: 1 1 auto; margin: 0; }

/* ---------- 工具搜尋 ---------- */
.kl-search-wrap {
    max-width: 520px;
    margin: 0 auto 16px;
}

.kl-search {
    text-align: center;
    font-size: 16px;
    border-radius: 30px;
    padding: 13px 20px;
}

/* ---------- 工具分類選單 ---------- */
.kl-cat-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 34px;
    max-width: 720px;
    padding: 0 12px;
}

.kl-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #ece4d8;
    background: #fff;
    color: #6f6152;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    padding: 9px 17px;
    border-radius: 22px;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s;
    white-space: nowrap;
    letter-spacing: .3px;
}

.kl-cat-chip:hover {
    background: #f7f1e8;
    border-color: #e0d3c0;
    color: var(--kl-ink);
}

.kl-cat-chip:active {
    transform: translateY(1px);
}

.kl-cat-chip.active {
    background: linear-gradient(135deg, #9a5810, #7a4109);
    border-color: #7a4109;
    color: #fff;
    box-shadow: 0 4px 12px rgba(138, 76, 14, 0.26);
}

.kl-search-empty {
    display: none;
    text-align: center;
    color: var(--kl-muted);
    letter-spacing: 1px;
    padding: 30px 0;
}

/* ---------- 圖片批次處理 ---------- */
.kl-batch-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kl-batch-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--kl-line);
    border-radius: 12px;
    background: #fff;
}

.kl-batch-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--kl-line);
    background: #faf8f5;
    flex: 0 0 auto;
}

.kl-batch-info { flex: 1 1 auto; min-width: 0; }
.kl-batch-name { font-size: 14px; color: var(--kl-ink); word-break: break-all; }
.kl-batch-meta { font-size: 13px; color: var(--kl-muted); margin-top: 3px; }
.kl-batch-meta b { color: var(--kl-accent); }

.kl-batch-summary {
    font-size: 14px;
    color: var(--kl-ink);
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.kl-batch-summary b { color: var(--kl-accent); }

/* ---------- 計時器類（倒數 / 碼錶 / 番茄鐘） ---------- */
.kl-timer-wrap {
    text-align: center;
    padding: 12px 0 4px;
}

/* 圓形進度環 */
.kl-ring-wrap {
    position: relative;
    width: 300px;
    max-width: 82vw;
    aspect-ratio: 1;
    margin: 8px auto 0;
}

.kl-ring {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
    overflow: visible;
}

.kl-ring-bg {
    fill: none;
    stroke: #efe7db;
    stroke-width: 8;
}

.kl-ring-fg {
    fill: none;
    stroke: var(--kl-accent);
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 5px rgba(138, 76, 14, 0.25));
    transition: stroke-dashoffset .4s linear, stroke .3s ease;
}

.kl-ring-wrap.rest .kl-ring-fg { stroke: #6a8a3a; }
.kl-ring-wrap.warn .kl-ring-fg { stroke: #c0563a; }

.kl-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 0 30px;
}

.kl-ring-center .kl-timer {
    font-size: clamp(26px, 6.6vw, 44px);
    letter-spacing: 0;
    line-height: 1;
    max-width: 100%;
}

/* ---------- 時區世界時鐘 ---------- */
.kl-tz-clock {
    text-align: center;
    background: linear-gradient(150deg, #20150e 0%, #4a3117 60%, #6f3c0a 100%);
    color: #fff;
    border-radius: 18px;
    padding: 26px 20px;
    box-shadow: 0 10px 30px rgba(32, 21, 14, 0.28);
}

.kl-tz-clock .kl-tz-zonename {
    font-size: 14px;
    letter-spacing: 3px;
    color: #e8cba3;
    margin-bottom: 6px;
}

.kl-tz-clock .kl-tz-big {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: clamp(44px, 12vw, 76px);
    letter-spacing: 3px;
    line-height: 1.05;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.kl-tz-clock .kl-tz-date {
    font-size: 14px;
    letter-spacing: 2px;
    color: #d9c3a6;
    margin-top: 6px;
}

.kl-tz-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    transition: background .15s;
}

.kl-tz-item:nth-child(odd) { background: #faf6f0; }
.kl-tz-item:hover { background: #f3ece3; }

.kl-tz-item .kl-tz-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kl-tz-item .kl-tz-daynight { font-size: 18px; }
.kl-tz-item .kl-tz-city { font-weight: bold; color: var(--kl-ink); }

.kl-tz-item .kl-tz-off {
    font-size: 11px;
    letter-spacing: .5px;
    background: #efe4d4;
    color: var(--kl-accent);
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.kl-tz-item .kl-tz-when {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    color: var(--kl-ink);
    text-align: right;
    white-space: nowrap;
}

.kl-tz-item .kl-tz-when small { color: var(--kl-muted); }

.kl-timer {
    font-family: 'Courier New', 'Consolas', monospace;
    font-weight: 700;
    font-size: clamp(46px, 13vw, 96px);
    letter-spacing: 2px;
    line-height: 1.1;
    color: var(--kl-ink);
}

.kl-timer.warn { color: #c0563a; }
.kl-timer.run { color: var(--kl-accent); }

.kl-phase {
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--kl-accent);
    margin-bottom: 4px;
    min-height: 30px;
}

.kl-dots {
    display: flex;
    gap: 9px;
    justify-content: center;
    margin-top: 14px;
}

.kl-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #e2d8ca;
    transition: background .3s;
}

.kl-dot.done { background: var(--kl-accent); }
.kl-dot.active { background: var(--kl-accent-soft); box-shadow: 0 0 0 4px rgba(138, 76, 14, 0.15); }

.kl-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}

.kl-lap-num { color: var(--kl-muted); }

.kl-tz-time { font-family: 'Courier New', monospace; }

.kl-tz-row .kl-tz-zone { color: var(--kl-ink); font-weight: bold; }

/* ---------- 開發者工具（輸出區 / 錯誤訊息） ---------- */
.kl-mono {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 14px;
    letter-spacing: .3px;
}

textarea.kl-textarea[readonly] {
    background: #faf8f5;
    color: var(--kl-ink);
}

.kl-err-msg {
    display: none;
    background: #faeae6;
    color: #c0563a;
    border: 1px solid #e3b8ab;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    margin-top: 10px;
    word-break: break-word;
}

.kl-io-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}

.kl-io-label label { margin: 0; }

/* JSON 樹狀檢視 */
.kl-jt {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.75;
    color: var(--kl-ink);
    overflow-x: auto;
    padding: 4px 2px;
}

.kl-jt-children {
    padding-left: 20px;
    margin-left: 6px;
    border-left: 1px dashed #e0d6c8;
}

.kl-jt-head { border-radius: 5px; }
.kl-jt-head:hover { background: #faf5ee; }

.kl-jt-toggle {
    display: inline-block;
    width: 15px;
    color: var(--kl-accent);
    user-select: none;
    font-size: 11px;
}

.kl-jt-key { color: #8a4c0e; }
.kl-jt-brace, .kl-jt-close { color: var(--kl-muted); }
.kl-jt-count { color: #b3a795; font-size: 12px; }
.kl-jt-val-string { color: #3a7a3a; }
.kl-jt-val-number { color: #1f6feb; }
.kl-jt-val-boolean { color: var(--kl-accent-soft); }
.kl-jt-val-null { color: #a99; }

.kl-jt-node.collapsed > .kl-jt-children,
.kl-jt-node.collapsed > .kl-jt-close { display: none; }
.kl-jt-node.collapsed .kl-jt-count::after { content: ' … '; color: var(--kl-muted); }

/* JSON 深色背景（開發者友善，黑底白字） */
.kl-code-dark {
    background: #1e1e2e !important;
    color: #e6e6ea !important;
    border-color: #3a3a52 !important;
}
.kl-code-dark::placeholder { color: #6f6f82; }
.kl-code-dark .kl-jt-key { color: #9cdcfe; }
.kl-code-dark .kl-jt-brace,
.kl-code-dark .kl-jt-close { color: #c8c8dc; }
.kl-code-dark .kl-jt-count { color: #7a7a90; }
.kl-code-dark .kl-jt-val-string { color: #ce9178; }
.kl-code-dark .kl-jt-val-number { color: #b5cea8; }
.kl-code-dark .kl-jt-val-boolean { color: #569cd6; }
.kl-code-dark .kl-jt-val-null { color: #909090; }
.kl-code-dark .kl-jt-children { border-color: #3a3a52; }
.kl-code-dark .kl-jt-head:hover { background: #2a2a3e; }
.kl-code-dark .kl-jt-toggle { color: #d7a86e; }

/* JSON 比對差異 */
.kl-diff {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.7;
    overflow-x: auto;
}
.kl-diff-summary {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 12px;
    color: var(--kl-ink);
}
.kl-diff-item {
    display: flex;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 3px;
    align-items: baseline;
}
.kl-diff-sign { flex: 0 0 auto; font-weight: bold; }
.kl-diff-path { color: var(--kl-ink); font-weight: bold; word-break: break-all; }
.kl-diff-val { color: var(--kl-muted); word-break: break-all; }
.kl-diff-add { background: #e8f8ea; }
.kl-diff-add .kl-diff-sign { color: #2e7d32; }
.kl-diff-del { background: #fdeceb; }
.kl-diff-del .kl-diff-sign { color: #c0392b; }
.kl-diff-chg { background: #fbf5e3; }
.kl-diff-chg .kl-diff-sign { color: #b8860b; }
.kl-diff-arrow { color: var(--kl-muted); }
.kl-diff-same { color: #2e7d32; font-size: 16px; text-align: center; padding: 20px; }

.kl-code-dark.kl-diff .kl-diff-path { color: #e6e6ea; }
.kl-code-dark.kl-diff .kl-diff-add { background: #16311b; }
.kl-code-dark.kl-diff .kl-diff-add .kl-diff-sign { color: #7ee787; }
.kl-code-dark.kl-diff .kl-diff-del { background: #3a1618; }
.kl-code-dark.kl-diff .kl-diff-del .kl-diff-sign { color: #ff9492; }
.kl-code-dark.kl-diff .kl-diff-chg { background: #33290f; }
.kl-code-dark.kl-diff .kl-diff-chg .kl-diff-sign { color: #e3b341; }
.kl-code-dark.kl-diff .kl-diff-val { color: #9a9ab0; }

/* 頁尾免責聲明 */
.kl-disclaimer {
    max-width: 880px;
    margin: 12px auto 0;
    padding: 12px 20px 0;
    border-top: 1px solid rgba(139, 123, 112, 0.2);
    font-size: 12px;
    line-height: 1.8;
    color: var(--kl-muted);
    text-align: center;
}

/* ---------- 進位轉換 ---------- */
.kl-conv-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.kl-conv-row .kl-input {
    flex: 1 1 auto;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.kl-copy-btn {
    flex: 0 0 auto;
    border: 1px solid var(--kl-accent);
    background: transparent;
    color: var(--kl-accent);
    border-radius: 12px;
    padding: 0 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 1px;
    transition: all .2s;
}

.kl-copy-btn:hover { background: var(--kl-accent); color: #fff; }

.kl-input.kl-err {
    border-color: #c0563a;
    box-shadow: 0 0 0 3px rgba(192, 86, 58, 0.12);
}

/* ===== 格式化工具 訊息列（XML/SQL 共用） ===== */
.kl-fmt-msg {
    display: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    margin-top: 12px;
    word-break: break-word;
}
.kl-fmt-msg.ok { background: #eaf4ec; color: #2f7d46; border: 1px solid #b9dcc2; }
.kl-fmt-msg.err { background: #faeae6; color: #c0563a; border: 1px solid #e3b8ab; }

/* ===== Markdown 預覽 ===== */
.kl-md-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.kl-md-grid .kl-field { margin: 0; }
.kl-md-grid textarea.kl-textarea {
    min-height: 440px;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
}
.kl-md-preview {
    min-height: 440px;
    max-height: 640px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--kl-line, #e6ddd2);
    border-radius: 12px;
    padding: 18px 22px;
    color: var(--kl-ink);
    line-height: 1.75;
    word-wrap: break-word;
}
.kl-md-preview h1, .kl-md-preview h2, .kl-md-preview h3,
.kl-md-preview h4, .kl-md-preview h5, .kl-md-preview h6 {
    margin: 1.1em 0 .5em; line-height: 1.35; font-weight: 700;
}
.kl-md-preview h1 { font-size: 1.7em; border-bottom: 2px solid var(--kl-line, #e6ddd2); padding-bottom: .25em; }
.kl-md-preview h2 { font-size: 1.4em; border-bottom: 1px solid var(--kl-line, #e6ddd2); padding-bottom: .2em; }
.kl-md-preview h3 { font-size: 1.2em; }
.kl-md-preview p { margin: .7em 0; }
.kl-md-preview ul, .kl-md-preview ol { margin: .6em 0; padding-left: 1.6em; }
.kl-md-preview li { margin: .25em 0; }
.kl-md-preview a { color: var(--kl-accent); text-decoration: underline; }
.kl-md-preview code {
    background: #f3ede4; color: #8a4c0e; padding: 2px 6px;
    border-radius: 5px; font-family: 'Courier New', monospace; font-size: .92em;
}
.kl-md-preview pre.kl-md-pre {
    background: #20150e; color: #f0e9df; padding: 14px 16px;
    border-radius: 10px; overflow-x: auto; margin: .9em 0;
}
.kl-md-preview pre.kl-md-pre code { background: none; color: inherit; padding: 0; font-size: .9em; }
.kl-md-preview blockquote {
    margin: .8em 0; padding: .3em 1em; border-left: 4px solid var(--kl-accent);
    background: #faf6f0; color: #6b5a48;
}
.kl-md-preview hr { border: none; border-top: 1px solid var(--kl-line, #e6ddd2); margin: 1.4em 0; }
.kl-md-preview img { max-width: 100%; border-radius: 8px; }
.kl-md-table { border-collapse: collapse; width: 100%; margin: .9em 0; font-size: .95em; }
.kl-md-table th, .kl-md-table td { border: 1px solid var(--kl-line, #e6ddd2); padding: 7px 11px; }
.kl-md-table th { background: #f3ede4; font-weight: 700; }
.kl-md-table tr:nth-child(even) td { background: #faf8f5; }

/* ===== 純文字 Diff 比對 ===== */
.kl-td-summary { display: none; gap: 10px; align-items: center; margin: 4px 0 14px; }
.kl-td-badge { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.kl-td-badge.add { background: #eaf4ec; color: #2f7d46; }
.kl-td-badge.del { background: #faeae6; color: #c0563a; }
.kl-td-same { font-size: 14px; color: #2f7d46; font-weight: 600; }
.kl-td-wrap { overflow-x: auto; border: 1px solid var(--kl-line, #e6ddd2); border-radius: 12px; }
.kl-td-table {
    border-collapse: collapse; width: 100%;
    font-family: 'Courier New', 'Consolas', monospace; font-size: 13px; line-height: 1.55;
}
.kl-td-table td { padding: 1px 8px; vertical-align: top; }
.kl-td-ln {
    text-align: right; color: #b0a494; width: 1%; white-space: nowrap;
    user-select: none; background: #faf8f5; border-right: 1px solid #efe7db;
}
.kl-td-sign { text-align: center; width: 1%; color: #a09482; user-select: none; }
.kl-td-code { white-space: pre-wrap; word-break: break-word; color: var(--kl-ink); }
.kl-td-add { background: #eaf7ee; }
.kl-td-add .kl-td-sign { color: #2f7d46; font-weight: 700; }
.kl-td-del { background: #fcece7; }
.kl-td-del .kl-td-sign { color: #c0563a; font-weight: 700; }

/* ===== 線上 HTML 編輯器 ===== */
.kl-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 10px;
    background: #faf7f2;
    border: 1px solid var(--kl-line, #e6ddd2);
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}

.kl-editor-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #e6ddd2;
    background: #fff;
    color: var(--kl-ink);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.kl-editor-btn:hover { background: var(--kl-accent); border-color: var(--kl-accent); color: #fff; }
.kl-editor-btn b { font-weight: 800; }
.kl-editor-btn i { font-style: italic; }
.kl-editor-btn u { text-decoration: underline; }
.kl-editor-btn s { text-decoration: line-through; }

.kl-editor-sep { width: 1px; height: 22px; background: #e0d5c6; margin: 0 4px; }

.kl-editor-color {
    width: 34px; height: 34px; padding: 2px;
    border: 1px solid #e6ddd2; border-radius: 8px; cursor: pointer; background: #fff;
}
.kl-editor-select {
    height: 34px; border: 1px solid #e6ddd2; border-radius: 8px;
    padding: 0 8px; font-size: 13px; font-family: inherit; background: #fff; color: var(--kl-ink); cursor: pointer;
}

.kl-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--kl-line, #e6ddd2);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.kl-editor {
    min-height: 420px;
    max-height: 640px;
    overflow: auto;
    padding: 16px 18px;
    background: #fff;
    color: var(--kl-ink);
    line-height: 1.7;
    outline: none;
    border-right: 1px solid var(--kl-line, #e6ddd2);
}
.kl-editor:focus { box-shadow: inset 0 0 0 2px rgba(138, 76, 14, .12); }
.kl-editor h1 { font-size: 1.6em; margin: .5em 0 .4em; }
.kl-editor h2 { font-size: 1.35em; margin: .5em 0 .4em; }
.kl-editor h3 { font-size: 1.15em; margin: .5em 0 .4em; }
.kl-editor p { margin: .6em 0; }
.kl-editor ul, .kl-editor ol { margin: .6em 0; padding-left: 1.6em; }
.kl-editor a { color: var(--kl-accent); }
.kl-editor blockquote { margin: .8em 0; padding: .3em 1em; border-left: 4px solid var(--kl-accent); background: #faf6f0; color: #6b5a48; }
.kl-editor img { max-width: 100%; }
.kl-editor table { border-collapse: collapse; }
.kl-editor table td, .kl-editor table th { border: 1px solid #ccc; padding: 6px; }

.kl-editor-source {
    min-height: 420px;
    max-height: 640px;
    border: none;
    border-radius: 0;
    resize: none;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
    background: #20150e;
    color: #f0e9df;
    padding: 16px 18px;
}
.kl-editor-source:focus { outline: none; box-shadow: none; }

@media (max-width: 760px) {
    .kl-editor-grid { grid-template-columns: 1fr; }
    .kl-editor { border-right: none; border-bottom: 1px solid var(--kl-line, #e6ddd2); min-height: 260px; }
    .kl-editor-source { min-height: 220px; }
}

/* ===== 透明背景棋盤格（去背預覽） ===== */
.kl-checker {
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    background-color: #fff;
}
.kl-pickable { cursor: crosshair; }
.kl-opt-hint { font-size: 13px; color: #8a7a66; margin: 2px 0 12px; }

@media (max-width: 720px) {
    .kl-md-grid { grid-template-columns: 1fr; }
    .kl-md-grid textarea.kl-textarea, .kl-md-preview { min-height: 240px; }
}

@media (max-width: 560px) {
    .kl-pwd-result { font-size: 20px; }
    .kl-bill-main b { font-size: 28px; }
    .kl-winner { font-size: 24px; }
}