/* Generated by scripts/build-frontend.js. Edit source files, then rebuild. */

/* source: style.css */
/* ===========================================================
   快抄 v0.8 Alpha
   Daily / Accessible / Comfortable
   =========================================================== */


:root {

    --ui-scale: 1;
    --order-scale: 1.2;

    /* 背景不是純白 */

    --bg: #EFF1F2;
    --bg-warm: #F2F1ED;

    --surface: #FFFFFF;
    --surface-soft: #F6F7F8;
    --surface-hover: #ECEFF2;

    --paper: #FFFDF7;

    --text: #20252B;
    --text-2: #505B67;
    --muted: #707B86;

    --border: #D7DDE2;
    --border-strong: #B8C2CB;

    /* 穩重主藍 */

    --primary: #3E609B;
    --primary-hover: #325284;
    --primary-soft: #E8EEF7;

    /* 部門 */

    --dept12: #3E6493;
    --dept12-bg: #E7EEF7;

    --dept11: #287061;
    --dept11-bg: #E2F1EC;

    /* 品牌辨識 */

    --orange: #C96E39;
    --orange-soft: #FFF0E5;

    --baby: #347D77;
    --baby-soft: #E5F3F1;

    /* 狀態 */

    --danger: #B7484F;
    --danger-soft: #FBE9EA;

    --success: #287459;

    --shadow:
        0 7px 24px
        rgba(34,47,60,.06);

    --shadow-hover:
        0 12px 30px
        rgba(34,47,60,.11);
}


/* ===========================================================
   深色
   =========================================================== */

html[data-theme="dark"] {

    --bg: #171C23;
    --bg-warm: #171C23;

    --surface: #202833;
    --surface-soft: #293340;
    --surface-hover: #323D4B;

    --paper: #222A34;

    --text: #F5F7FA;
    --text-2: #D0D7DF;
    --muted: #A1ACB8;

    --border: #394553;
    --border-strong: #657383;

    --primary: #7890CF;
    --primary-hover: #899FDC;
    --primary-soft: #2B3852;

    --dept12: #BDC9FF;
    --dept12-bg: #2B3757;

    --dept11: #A9E3D2;
    --dept11-bg: #213F39;

    --orange: #FFC19B;
    --orange-soft: #493229;

    --baby: #A6E1D9;
    --baby-soft: #25413F;

    --danger: #FF9EA3;
    --danger-soft: #4D292D;

    --success: #7AD0AD;

    --shadow:
        0 9px 28px
        rgba(0,0,0,.18);

    --shadow-hover:
        0 14px 35px
        rgba(0,0,0,.27);
}


/* 柔暗＝偏暖米灰，不是科技灰 */

html[data-theme="soft"] {

    --bg: #E8E5DF;
    --bg-warm: #E8E5DF;

    --surface: #FBFAF7;
    --surface-soft: #F2F0EA;
    --surface-hover: #E9E6DF;

    --paper: #FFFDF6;

    --text: #292B2D;
    --text-2: #555A5E;
    --muted: #777C80;

    --border: #D5D0C8;
    --border-strong: #B5AEA4;

    --primary: #526B8C;
    --primary-hover: #435B7A;
    --primary-soft: #E2E7ED;
}


/* ===========================================================
   高對比
   =========================================================== */

html[data-contrast="true"] {

    --text: #000000;
    --text-2: #171717;
    --muted: #3E444A;

    --border: #858F98;
    --border-strong: #535D66;
}


html[data-theme="dark"][data-contrast="true"] {

    --text: #FFFFFF;
    --text-2: #FFFFFF;
    --muted: #D6DCE3;

    --border: #7A8695;
    --border-strong: #AFB8C3;
}


/* ===========================================================
   Base
   =========================================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    min-height: 100%;
}


html {

    background:
        var(--bg);
}


body {

    margin: 0;

    color:
        var(--text);

    background:
        linear-gradient(
            180deg,
            var(--bg-warm) 0,
            var(--bg) 420px
        );

    font-family:
        "PingFang TC",
        "Noto Sans TC",
        "Microsoft JhengHei",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        calc(
            17px *
            var(--ui-scale)
        );

    line-height: 1.5;

    -webkit-font-smoothing:
        antialiased;
}


button,
input {

    font:
        inherit;
}


button {

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform .08s ease,
        background .13s ease,
        border-color .13s ease,
        box-shadow .13s ease,
        color .13s ease;
}


button:active {

    transform:
        scale(.955);
}


button:focus-visible,
input:focus-visible {

    outline:
        3px solid
        rgba(62,96,155,.25);

    outline-offset:
        2px;
}


.ambient {

    display:
        none;
}


/* ===========================================================
   Header
   =========================================================== */

.app-header {

    position:
        sticky;

    top: 0;

    z-index: 50;

    background:
        color-mix(
            in srgb,
            var(--surface) 96%,
            transparent
        );

    border-bottom:
        1px solid
        var(--border);

    box-shadow:
        0 2px 9px
        rgba(30,40,50,.045);

    backdrop-filter:
        blur(14px);
}


.header-inner {

    width:
        min(1480px,100%);

    min-height:
        76px;

    margin:
        0 auto;

    padding:
        max(
            11px,
            env(safe-area-inset-top)
        )
        20px
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.brand-logo {

    width: 48px;
    height: 48px;

    border-radius:
        13px;

    box-shadow:
        0 5px 15px
        rgba(44,60,80,.13);
}


.brand-title {

    color:
        var(--text);

    font-size:
        1.2em;

    font-weight:
        900;
}


.brand-title span {

    margin-left:
        6px;

    color:
        var(--muted);

    font-size:
        .54em;

    font-weight:
        700;
}


.brand-subtitle {

    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        .67em;
}


/*
 * Header 內按鈕自動排在右側
 */

.header-inner > .toolbar-button {

    margin-left:
        auto;
}


.header-inner > .toolbar-button
+
.toolbar-button {

    margin-left:
        0;
}


.toolbar-button {

    min-height:
        calc(
            46px *
            var(--ui-scale)
        );

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .78em;

    font-weight:
        800;
}


.toolbar-button:hover {

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}


.large-quick-button {

    color:
        var(--primary);

    border-color:
        #C9D4E6;

    background:
        var(--primary-soft);
}


.large-quick-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


/* ===========================================================
   Main Layout
   =========================================================== */

.app-shell {

    width:
        min(1480px,100%);

    margin:
        0 auto;

    padding:
        20px;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(375px,420px);

    gap:
        20px;
}


.main-column {

    min-width:
        0;
}


.setup-card,
.filter-card,
.order-panel {

    border:
        1px solid
        var(--border);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


/* ===========================================================
   Setup
   =========================================================== */

.setup-card {

    padding:
        18px;

    border-radius:
        17px;
}


.setup-main {

    display:
        grid;

    grid-template-columns:
        minmax(280px,.9fr)
        minmax(205px,.55fr)
        minmax(205px,.55fr);

    align-items:
        start;

    gap:
        16px;
}


.section-label,
.date-field > span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text-2);

    font-size:
        .76em;

    font-weight:
        850;
}


/* ===========================================================
   Channel
   =========================================================== */

.channel-switch {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    padding:
        5px;

    border-radius:
        13px;

    background:
        var(--surface-soft);
}


.channel-button {

    min-height:
        calc(
            52px *
            var(--ui-scale)
        );

    border:
        2px solid
        transparent;

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        transparent;

    font-size:
        .96em;

    font-weight:
        900;
}


.channel-button:hover {

    background:
        var(--surface-hover);
}


.channel-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);

    box-shadow:
        0 5px 14px
        rgba(62,96,155,.16);
}


.channel-button.active::before {

    content:
        "✓";

    margin-right:
        7px;

    font-weight:
        950;
}


/* ===========================================================
   Date
   =========================================================== */

.date-field {

    min-width:
        0;
}


.date-field input {

    width:
        100%;

    min-height:
        calc(
            47px *
            var(--ui-scale)
        );

    padding:
        0 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    outline:
        0;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .78em;
}


.date-field input:focus {

    border-color:
        var(--primary);
}


html[data-theme="dark"]
input[type="date"] {

    color-scheme:
        dark;
}


.date-readable {

    margin-top:
        7px;

    min-height:
        29px;

    display:
        flex;

    align-items:
        center;

    color:
        var(--text);

    font-size:
        1em;

    font-weight:
        900;

    letter-spacing:
        .01em;
}


.date-readable[data-empty="true"] {

    color:
        var(--danger);

    font-size:
        .84em;
}


.arrival-shortcuts {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        13px;

    overflow-x:
        auto;

    padding-bottom:
        2px;
}


.arrival-shortcuts > span {

    flex:
        0 0 auto;

    margin-right:
        3px;

    color:
        var(--muted);

    font-size:
        .7em;

    font-weight:
        750;
}


.arrival-shortcuts button {

    flex:
        0 0 auto;

    min-width:
        59px;

    min-height:
        calc(
            40px *
            var(--ui-scale)
        );

    padding:
        0 11px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .72em;

    font-weight:
        850;
}


.arrival-shortcuts button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


/* ===========================================================
   Search / Filter
   =========================================================== */

.filter-card {

    margin-top:
        14px;

    padding:
        16px;

    border-radius:
        17px;
}


.search-box {

    min-height:
        calc(
            55px *
            var(--ui-scale)
        );

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        2px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--surface-soft);
}


.search-box:focus-within {

    border-color:
        var(--primary);

    background:
        var(--surface);
}


.search-box > span {

    font-size:
        1.08em;
}


.search-box input {

    flex:
        1;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    color:
        var(--text);

    background:
        transparent;

    font-size:
        .93em;
}


.search-box input::placeholder {

    color:
        var(--muted);
}


.tabs-row,
.brand-tabs {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    overflow-x:
        visible;
}


.tabs-row {

    margin-top:
        13px;
}


.brand-tabs {

    margin-top:
        9px;
}


.smart-tab,
.brand-tab {

    min-height:
        calc(
            44px *
            var(--ui-scale)
        );

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .77em;

    font-weight:
        850;
}


.smart-tab:hover,
.brand-tab:hover {

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}


.smart-tab.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


.brand-tab.active {

    color:
        var(--primary);

    border:
        2px solid
        var(--primary);

    background:
        var(--primary-soft);
}


.brand-tab[data-brand="果漾工坊"].active {

    color:
        var(--orange);

    border-color:
        var(--orange);

    background:
        var(--orange-soft);
}


.brand-tab[data-brand="小星星"].active {

    color:
        var(--baby);

    border-color:
        var(--baby);

    background:
        var(--baby-soft);
}


/* ===========================================================
   Product Section
   =========================================================== */

.section-heading {

    min-height:
        59px;

    padding:
        0 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.section-heading strong {

    font-size:
        1em;

    font-weight:
        900;
}


.section-heading span {

    color:
        var(--muted);

    font-size:
        .7em;
}


.product-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        11px;
}


/* ===========================================================
   Product Card
   =========================================================== */

.product-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        150px;

    padding:
        14px 15px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        2px solid
        var(--border);

    border-radius:
        15px;

    background:
        var(--surface);

    box-shadow:
        0 4px 13px
        rgba(35,48,60,.035);
}


.product-card::before {

    content:
        "";

    position:
        absolute;

    left: 0;
    top: 13px;
    bottom: 13px;

    width:
        4px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--dept12);

    opacity:
        .8;
}


.product-card.brand-orange::before {

    background:
        var(--orange);
}


.product-card.brand-nac::before {

    background:
        var(--baby);
}


.product-card:hover {

    border-color:
        var(--border-strong);

    box-shadow:
        var(--shadow-hover);
}


.product-card.selected {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.07),
        var(--shadow);
}


.product-top {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;
}


.product-emoji {

    flex:
        0 0 auto;

    margin-top:
        1px;

    font-size:
        1.18em;

    line-height:
        1.2;
}


.product-name {

    flex:
        1;

    min-width:
        0;

    color:
        var(--text);

    font-size:
        1.08em;

    font-weight:
        950;

    line-height:
        1.35;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow:
        hidden;
}


.favorite {

    flex:
        0 0 auto;

    width:
        calc(
            40px *
            var(--ui-scale)
        );

    height:
        calc(
            40px *
            var(--ui-scale)
        );

    border:
        0;

    border-radius:
        9px;

    color:
        #9B9EA2;

    background:
        transparent;

    font-size:
        1em;
}


.favorite:hover {

    background:
        var(--surface-soft);
}


.favorite.active {

    color:
        #C08A18;

    background:
        #FFF5D9;
}


html[data-theme="dark"]
.favorite.active {

    color:
        #FFD66F;

    background:
        #493D23;
}


.product-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        8px;
}


.code-chip,
.department-chip {

    min-height:
        30px;

    padding:
        0 10px;

    display:
        inline-flex;

    align-items:
        center;

    border-radius:
        8px;

    font-weight:
        900;
}


.department-chip {

    font-size:
        .72em;
}


.code-chip {

    color:
        var(--primary);

    border:
        1px solid
        #C9D5E8;

    background:
        var(--primary-soft);

    font-family:
        Consolas,
        "SFMono-Regular",
        "Roboto Mono",
        monospace;

    font-size:
        .86em;

    font-weight:
        950;

    letter-spacing:
        .035em;
}


html[data-theme="dark"]
.code-chip {

    border-color:
        #445472;
}


.department-chip.paper {

    color:
        var(--dept12);

    background:
        var(--dept12-bg);
}


.department-chip.clean {

    color:
        var(--dept11);

    background:
        var(--dept11-bg);
}


/*
 * v0.8 拿掉沒有幫助的品牌分類小字
 */

.product-brand {

    display:
        none !important;
}


/* ===========================================================
   Quantity
   =========================================================== */

.quantity-row {

    margin-top:
        10px;

    padding-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-top:
        1px solid
        var(--border);
}


.quick-buttons {

    display:
        none !important;
}


.qty-main {

    width:
        min(
            280px,
            100%
        );

    display:
        grid;

    grid-template-columns:
        59px
        minmax(74px,1fr)
        59px;

    gap:
        8px;
}


.qty-button {

    min-height:
        calc(
            52px *
            var(--ui-scale)
        );

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    color:
        var(--text);

    background:
        var(--surface-soft);

    font-size:
        1.3em;

    font-weight:
        950;
}


.qty-button:hover {

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}


.qty-button.plus {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);

    box-shadow:
        0 5px 12px
        rgba(62,96,155,.14);
}


.qty-button.plus:hover {

    background:
        var(--primary-hover);
}


.qty-input {

    width:
        100%;

    min-width:
        0;

    min-height:
        calc(
            52px *
            var(--ui-scale)
        );

    padding:
        0 5px;

    border:
        2px solid
        var(--border);

    border-radius:
        11px;

    outline:
        0;

    text-align:
        center;

    color:
        var(--text);

    background:
        var(--surface);

    font-size:
        1.28em;

    font-weight:
        950;
}


.qty-input:focus {

    border-color:
        var(--primary);
}


/* ===========================================================
   Order Paper
   =========================================================== */

.order-panel {

    position:
        sticky;

    top:
        96px;

    align-self:
        start;

    padding:
        19px;

    border-radius:
        17px;

    background:
        var(--paper);

    border-color:
        #D7D4CB;
}


html[data-theme="dark"]
.order-panel {

    border-color:
        var(--border);
}


.order-head {

    padding-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        2px solid
        var(--border);
}


.order-head strong {

    display:
        block;

    font-size:
        1.05em;

    font-weight:
        950;
}


.order-head span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--primary);

    font-size:
        .73em;

    font-weight:
        850;
}


.clear-button {

    min-height:
        43px;

    padding:
        0 13px;

    border:
        1px solid
        #E3C7CA;

    border-radius:
        9px;

    color:
        var(--danger);

    background:
        var(--danger-soft);

    font-size:
        .73em;

    font-weight:
        850;
}


.clear-button:hover {

    border-color:
        var(--danger);
}


.order-preview {

    margin-top:
        16px;

    font-size:
        calc(
            1em *
            var(--order-scale)
        );
}


.empty-state {

    padding:
        48px 10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


.empty-state > span {

    width:
        48px;

    height:
        48px;

    margin-bottom:
        11px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size:
        1.1em;

    font-weight:
        950;
}


.empty-state strong {

    font-size:
        .76em;
}


.empty-state small {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        .59em;
}


.preview-header {

    padding:
        3px 0 14px;

    border-bottom:
        1px solid
        var(--border);

    color:
        var(--text);

    font-size:
        .73em;

    font-weight:
        900;

    line-height:
        1.75;
}


.department-heading {

    margin:
        18px 0 8px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--text-2);

    font-size:
        .69em;

    font-weight:
        950;
}


.department-heading::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        var(--border);
}


/*
 * 扣號是主資訊
 * 商品名稱改成下面的小備註
 */

.order-line {

    min-height:
        56px;

    padding:
        8px 0;

    display:
        block;

    border-bottom:
        1px dashed
        color-mix(
            in srgb,
            var(--border) 70%,
            transparent
        );
}


.order-code {

    color:
        var(--text);

    font-family:
        Consolas,
        "SFMono-Regular",
        "Roboto Mono",
        monospace;

    font-size:
        1em;

    font-weight:
        950;

    letter-spacing:
        .045em;
}


.order-note {

    margin-top:
        3px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--muted);

    font-size:
        .59em;

    user-select:
        none;
}


/* ===========================================================
   Stats
   =========================================================== */

.stats-grid {

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        8px;
}


.stats-grid > div {

    min-height:
        70px;

    padding:
        11px 13px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--surface-soft);
}


.stats-grid span {

    color:
        var(--muted);

    font-size:
        .62em;

    font-weight:
        700;
}


.stats-grid strong {

    margin-top:
        1px;

    color:
        var(--text);

    font-size:
        1.12em;

    font-weight:
        950;
}


.preview-tip {

    margin-top:
        12px;

    color:
        var(--muted);

    font-size:
        .63em;
}


/* ===========================================================
   Copy
   =========================================================== */

.copy-button {

    width:
        100%;

    min-height:
        calc(
            58px *
            var(--ui-scale)
        );

    margin-top:
        14px;

    border:
        2px solid
        var(--primary);

    border-radius:
        12px;

    color:
        #FFFFFF;

    background:
        var(--primary);

    font-size:
        .95em;

    font-weight:
        950;

    box-shadow:
        0 6px 16px
        rgba(62,96,155,.16);
}


.copy-button:hover:not(:disabled) {

    background:
        var(--primary-hover);

    box-shadow:
        0 9px 21px
        rgba(62,96,155,.23);
}


.copy-button.success {

    border-color:
        var(--success);

    background:
        var(--success);
}


.copy-button:disabled {

    opacity:
        .4;

    cursor:
        default;

    box-shadow:
        none;
}


/* ===========================================================
   History
   =========================================================== */

.history {

    margin-top:
        16px;

    padding-top:
        13px;

    border-top:
        1px solid
        var(--border);

    color:
        var(--text-2);

    font-size:
        .68em;
}


.history-item {

    margin-top:
        8px;

    padding:
        10px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        var(--surface-soft);
}


.history-item small {

    color:
        var(--muted);
}


.history-item pre {

    margin:
        6px 0 0;

    white-space:
        pre-wrap;

    color:
        var(--text-2);

    font-size:
        .92em;
}


/* ===========================================================
   Settings
   =========================================================== */

.mobile-bar {

    display:
        none;
}


.overlay {

    position:
        fixed;

    z-index:
        100;

    inset:
        0;

    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(22,28,34,.45);

    backdrop-filter:
        blur(5px);
}


.hidden {

    display:
        none !important;
}


.settings-panel {

    width:
        min(470px,100%);

    max-height:
        88vh;

    overflow-y:
        auto;

    padding:
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    color:
        var(--text);

    background:
        var(--surface);

    box-shadow:
        0 25px 65px
        rgba(20,30,40,.2);
}


.settings-head {

    padding-bottom:
        14px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        var(--border);
}


.settings-head strong {

    display:
        block;

    font-size:
        1.05em;
}


.settings-head small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);
}


.settings-head > button {

    width:
        45px;

    height:
        45px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text);

    background:
        var(--surface-soft);

    font-size:
        1.15em;
}


.setting-block {

    margin-top:
        18px;
}


.setting-block > label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text-2);

    font-size:
        .75em;

    font-weight:
        850;
}


.theme-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        7px;
}


.theme-grid button,
.scale-row button {

    min-height:
        48px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-weight:
        850;
}


.theme-grid button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


.scale-row {

    display:
        grid;

    grid-template-columns:
        63px
        1fr
        63px;

    align-items:
        center;

    gap:
        8px;
}


.scale-row strong {

    text-align:
        center;
}


.contrast-row {

    min-height:
        72px;

    margin-top:
        16px;

    padding:
        12px 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        var(--surface-soft);
}


.contrast-row strong,
.contrast-row small {

    display:
        block;
}


.contrast-row small {

    margin-top:
        2px;

    color:
        var(--muted);
}


.contrast-row input {

    width:
        25px;

    height:
        25px;

    flex:
        0 0 auto;

    accent-color:
        var(--primary);
}


.setting-input {

    width:
        100%;

    min-height:
        49px;

    padding:
        0 13px;

    border:
        2px solid
        var(--border);

    border-radius:
        10px;

    outline:
        0;

    color:
        var(--text);

    background:
        var(--surface-soft);
}


.setting-input:focus {

    border-color:
        var(--primary);
}


.reset-button {

    width:
        100%;

    min-height:
        48px;

    margin-top:
        18px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-weight:
        800;
}


/* ===========================================================
   Toast
   =========================================================== */

.toast {

    position:
        fixed;

    z-index:
        200;

    left:
        50%;

    bottom:
        24px;

    padding:
        11px 18px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        var(--text);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-hover);

    font-size:
        .75em;

    font-weight:
        800;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translate(-50%,15px);

    transition:
        .18s ease;
}


.toast.show {

    opacity:
        1;

    transform:
        translate(-50%,0);
}


/* ===========================================================
   Large Mode
   =========================================================== */

html[data-large="true"] body {

    font-size:
        calc(
            19px *
            var(--ui-scale)
        );
}


html[data-large="true"]
.app-shell {

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,460px);
}


html[data-large="true"]
.product-card {

    min-height:
        170px;
}


html[data-large="true"]
.product-name {

    font-size:
        1.13em;
}


html[data-large="true"]
.code-chip {

    font-size:
        .92em;
}


html[data-large="true"]
.qty-main {

    grid-template-columns:
        67px
        minmax(85px,1fr)
        67px;
}


html[data-large="true"]
.qty-button,
html[data-large="true"]
.qty-input {

    min-height:
        calc(
            61px *
            var(--ui-scale)
        );
}


html[data-large="true"]
.order-code {

    font-size:
        1.08em;
}


/* ===========================================================
   Tablet
   =========================================================== */

@media (max-width: 1100px) {

    .app-shell,
    html[data-large="true"]
    .app-shell {

        grid-template-columns:
            1fr;

        padding-bottom:
            96px;
    }


    .order-panel {

        position:
            static;
    }
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 720px) {

    body {

        font-size:
            calc(
                17px *
                var(--ui-scale)
            );
    }


    html[data-large="true"] body {

        font-size:
            calc(
                19px *
                var(--ui-scale)
            );
    }


    .header-inner {

        min-height:
            69px;

        padding-left:
            11px;

        padding-right:
            11px;

        gap:
            6px;
    }


    .brand-logo {

        width:
            43px;

        height:
            43px;
    }


    .brand-title span,
    .brand-subtitle {

        display:
            none;
    }


    .toolbar-button {

        min-height:
            43px;

        padding:
            0 10px;

        font-size:
            .71em;
    }


    .app-shell {

        padding:
            11px;

        padding-bottom:
            96px;

        gap:
            12px;
    }


    .setup-card,
    .filter-card,
    .order-panel {

        border-radius:
            14px;
    }


    .setup-card {

        padding:
            14px;
    }


    .setup-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            11px;
    }


    .setup-main > div:first-child {

        grid-column:
            1 / -1;
    }


    .channel-button {

        min-height:
            54px;
    }


    .date-field input {

        min-height:
            44px;

        font-size:
            .72em;
    }


    .date-readable {

        font-size:
            .9em;
    }


    .filter-card {

        padding:
            13px;
    }


    .search-box {

        min-height:
            57px;
    }


    .tabs-row,
    .brand-tabs {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .tabs-row::-webkit-scrollbar,
    .brand-tabs::-webkit-scrollbar {

        display:
            none;
    }


    .smart-tab,
    .brand-tab {

        flex:
            0 0 auto;
    }


    .product-grid,
    html[data-large="true"]
    .product-grid {

        grid-template-columns:
            1fr;
    }


    .product-card,
    html[data-large="true"]
    .product-card {

        min-height:
            150px;
    }


    .product-name {

        font-size:
            1.08em;
    }


    .qty-main,
    html[data-large="true"]
    .qty-main {

        width:
            100%;

        grid-template-columns:
            64px
            1fr
            64px;
    }


    .qty-button,
    .qty-input,
    html[data-large="true"]
    .qty-button,
    html[data-large="true"]
    .qty-input {

        min-height:
            58px;
    }


    .mobile-bar {

        position:
            fixed;

        z-index:
            45;

        left:
            9px;

        right:
            9px;

        bottom:
            max(
                9px,
                env(safe-area-inset-bottom)
            );

        min-height:
            66px;

        padding:
            8px 9px 8px 14px;

        display:
            grid;

        grid-template-columns:
            1fr auto auto;

        align-items:
            center;

        gap:
            7px;

        border:
            1px solid
            var(--border);

        border-radius:
            14px;

        background:
            var(--surface);

        box-shadow:
            0 8px 28px
            rgba(30,45,60,.18);
    }


    .mobile-bar small,
    .mobile-bar strong {

        display:
            block;
    }


    .mobile-bar small {

        color:
            var(--muted);

        font-size:
            .67em;
    }


    .mobile-bar strong {

        font-size:
            .98em;
    }


    .mobile-preview,
    .mobile-copy {

        min-height:
            49px;

        padding:
            0 16px;

        border-radius:
            10px;

        font-size:
            .79em;

        font-weight:
            900;
    }


    .mobile-preview {

        border:
            1px solid
            var(--border);

        color:
            var(--text-2);

        background:
            var(--surface-soft);
    }


    .mobile-copy {

        border:
            1px solid
            var(--primary);

        color:
            #FFFFFF;

        background:
            var(--primary);
    }


    .overlay {

        padding:
            0;

        align-items:
            flex-end;
    }


    .settings-panel {

        width:
            100%;

        max-height:
            92vh;

        border-radius:
            20px 20px 0 0;

        padding-bottom:
            max(
                22px,
                env(safe-area-inset-bottom)
            );
    }
}


@media (max-width: 430px) {

    .brand-title {

        font-size:
            1.05em;
    }


    .toolbar-button span {

        display:
            none;
    }


    .toolbar-button {

        padding:
            0 9px;
    }


    .setup-main {

        grid-template-columns:
            1fr 1fr;
    }


    .date-field input {

        padding:
            0 7px;
    }


    .order-line {

        min-height:
            54px;
    }
}

/* ===========================================================
   v0.10 商品名稱精細化
   =========================================================== */

.product-name {

    -webkit-line-clamp:
        2;

    line-height:
        1.32;

    overflow:
        hidden;
}


/*
 * 果漾 / 小星星 名稱較長，
 * 卡片允許稍微增加高度，
 * 但不回到以前的大空白卡片。
 */

.product-card.brand-orange,
.product-card.brand-nac {

    min-height:
        150px;
}


/*
 * 手機寬度允許完整兩行
 */

@media (max-width: 720px) {

    .product-card.brand-orange,
    .product-card.brand-nac {

        min-height:
            154px;
    }


    .product-name {

        font-size:
            1.04em;
    }

}


/*
 * 大字模式下給長名稱多一點空間
 */

html[data-large="true"]
.product-card.brand-orange,
html[data-large="true"]
.product-card.brand-nac {

    min-height:
        170px;
}

/* ===========================================================
   快抄 v0.11
   現場快速操作版
   =========================================================== */


/* ===========================================================
   已選統計
   =========================================================== */

.field-selection-summary {

    min-height: 38px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .72em;

    white-space:
        nowrap;
}


.field-selection-summary strong {

    color:
        var(--primary);

    font-size:
        1em;
}


.field-selection-summary
.field-empty {

    color:
        var(--muted);
}


.field-selected-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--success) 15%,
            transparent
        );
}


/* ===========================================================
   已選商品卡
   =========================================================== */

.product-card {

    overflow:
        hidden;
}


.product-card.field-has-qty {

    border-color:
        var(--primary);

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 26%,
            var(--surface)
        );

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.06),
        var(--shadow);
}


.field-selected-badge {

    position:
        absolute;

    top:
        8px;

    right:
        50px;

    min-height:
        27px;

    padding:
        0 8px;

    display:
        inline-flex;

    align-items:
        center;

    border-radius:
        7px;

    color:
        var(--success);

    background:
        color-mix(
            in srgb,
            var(--success) 10%,
            var(--surface)
        );

    font-size:
        11px;

    font-weight:
        900;

    pointer-events:
        none;
}


/* ===========================================================
   數量：現場操作重點
   =========================================================== */

.qty-main {

    grid-template-columns:
        62px
        minmax(86px,1fr)
        62px;

    gap:
        9px;
}


.qty-button {

    min-height:
        calc(
            55px *
            var(--ui-scale)
        );

    touch-action:
        manipulation;

    user-select:
        none;
}


.qty-button.plus {

    font-size:
        1.4em;
}


.qty-input {

    min-height:
        calc(
            55px *
            var(--ui-scale)
        );

    font-size:
        1.4em;

    caret-color:
        var(--primary);
}


.qty-input:focus {

    border-color:
        var(--primary);

    background:
        var(--primary-soft);

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.08);
}


/*
 * 已有箱數時，
 * 數字更加醒目
 */

.field-has-qty
.qty-input {

    color:
        var(--primary);

    border-color:
        var(--primary);

    font-weight:
        950;
}


/* ===========================================================
   搜尋清除
   =========================================================== */

.search-box {

    position:
        relative;
}


.search-box input {

    padding-right:
        45px;
}


.field-search-clear {

    position:
        absolute;

    right:
        8px;

    top:
        50%;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    display:
        none;

    place-items:
        center;

    transform:
        translateY(-50%);

    border:
        0;

    border-radius:
        50%;

    color:
        var(--text-2);

    background:
        var(--surface-hover);

    font-size:
        1.35em;

    font-weight:
        500;

    line-height:
        1;
}


.field-search-clear.show {

    display:
        grid;
}


.field-search-clear:hover {

    color:
        var(--text);

    background:
        var(--border);
}


.field-search-clear:active {

    transform:
        translateY(-50%)
        scale(.94);
}


/* ===========================================================
   商品名稱
   =========================================================== */

.product-name {

    /*
     * v0.10 清潔用品名稱較長，
     * 現場版確保兩行仍能完整掃視。
     */

    min-height:
        2.58em;
}


/* ===========================================================
   手機
   =========================================================== */

@media (max-width: 720px) {

    .section-heading {

        min-height:
            64px;
    }


    .field-selection-summary {

        min-height:
            40px;

        padding:
            0 11px;
    }


    .qty-main {

        grid-template-columns:
            68px
            1fr
            68px;

        gap:
            9px;
    }


    .qty-button,
    .qty-input {

        min-height:
            61px;
    }


    .qty-input {

        font-size:
            1.46em;
    }


    .field-selected-badge {

        right:
            47px;
    }

}


/* ===========================================================
   大字
   =========================================================== */

html[data-large="true"]
.qty-main {

    grid-template-columns:
        72px
        minmax(95px,1fr)
        72px;
}


html[data-large="true"]
.qty-button,
html[data-large="true"]
.qty-input {

    min-height:
        calc(
            64px *
            var(--ui-scale)
        );
}


/* ===========================================================
   快抄 v0.12
   現場缺量換算版
   =========================================================== */


/* ===========================================================
   Top mode
   =========================================================== */

.restock-mode-area {

    margin-top:
        13px;

    padding:
        11px
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--surface-soft);
}


.restock-mode-copy {

    min-width:
        0;
}


.restock-mode-copy strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        .76em;

    font-weight:
        900;
}


.restock-mode-copy small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        .65em;
}


.restock-mode-button {

    flex:
        0 0 auto;

    min-height:
        43px;

    padding:
        0
        14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .73em;

    font-weight:
        900;
}


.restock-mode-button:hover {

    border-color:
        var(--primary);

    color:
        var(--primary);

    background:
        var(--primary-soft);
}


.restock-mode-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--success);

    background:
        var(--success);

    box-shadow:
        0 5px 12px
        color-mix(
            in srgb,
            var(--success) 18%,
            transparent
        );
}


.restock-toggle-icon {

    font-size:
        1.02em;
}


/* ===========================================================
   Helper
   =========================================================== */

.restock-helper {

    display:
        none;

    margin-top:
        10px;

    padding:
        10px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 35%,
            var(--surface)
        );
}


html[data-restock-helper="true"]
.restock-helper {

    display:
        block;
}


/*
 * 開啟換算模式才讓商品卡稍微增高。
 * 關閉時完全維持 v0.11。
 */

html[data-restock-helper="true"]
.product-card {

    min-height:
        205px;
}


.restock-helper-main {

    display:
        grid;

    grid-template-columns:
        minmax(105px,1fr)
        24px
        minmax(120px,1fr)
        auto;

    align-items:
        center;

    gap:
        8px;
}


/* ===========================================================
   Missing input
   =========================================================== */

.restock-missing-field label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-2);

    font-size:
        .63em;

    font-weight:
        850;
}


.restock-input-wrap {

    min-height:
        43px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    overflow:
        hidden;

    border:
        2px solid
        var(--border);

    border-radius:
        9px;

    background:
        var(--surface);
}


.restock-input-wrap:focus-within {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.07);
}


.restock-missing-input {

    width:
        100%;

    min-width:
        0;

    height:
        40px;

    padding:
        0
        5px
        0
        11px;

    border:
        0;

    outline:
        0;

    color:
        var(--text);

    background:
        transparent;

    font-size:
        1.08em;

    font-weight:
        950;

    text-align:
        center;
}


.restock-case-unit {

    padding:
        0
        10px
        0
        4px;

    color:
        var(--text-2);

    font-size:
        .75em;

    font-weight:
        850;
}


/* ===========================================================
   Arrow
   =========================================================== */

.restock-arrow {

    color:
        var(--muted);

    text-align:
        center;

    font-size:
        1.1em;

    font-weight:
        900;
}


/* ===========================================================
   Result
   =========================================================== */

.restock-result {

    min-width:
        0;
}


.restock-result small {

    display:
        block;

    color:
        var(--muted);

    font-size:
        .6em;

    font-weight:
        750;
}


.restock-result-value {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--primary);

    font-size:
        1.03em;

    font-weight:
        950;
}


.restock-result-detail {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--text-2);

    font-size:
        .58em;

    white-space:
        nowrap;
}


/* ===========================================================
   Apply
   =========================================================== */

.restock-apply {

    min-width:
        85px;

    min-height:
        46px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--primary);

    border-radius:
        9px;

    color:
        #FFFFFF;

    background:
        var(--primary);

    font-size:
        .69em;

    font-weight:
        900;
}


.restock-apply:hover:not(:disabled) {

    background:
        var(--primary-hover);
}


.restock-apply:disabled {

    color:
        var(--muted);

    border-color:
        var(--border);

    background:
        var(--surface);

    opacity:
        .72;

    cursor:
        default;
}


.restock-apply.success {

    color:
        #FFFFFF;

    border-color:
        var(--success);

    background:
        var(--success);
}


/* ===========================================================
   Quantity separation
   =========================================================== */

html[data-restock-helper="true"]
.restock-helper
+
.quantity-row {

    margin-top:
        9px;

    padding-top:
        9px;
}


/* ===========================================================
   Large mode
   =========================================================== */

html[data-large="true"]
.restock-mode-copy strong {

    font-size:
        .8em;
}


html[data-large="true"]
.restock-helper-main {

    grid-template-columns:
        minmax(120px,1fr)
        28px
        minmax(135px,1fr)
        auto;
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 720px) {

    .restock-mode-area {

        padding:
            11px;
    }


    .restock-mode-copy small {

        line-height:
            1.35;
    }


    .restock-mode-button {

        min-height:
            46px;

        padding:
            0
            12px;
    }


    html[data-restock-helper="true"]
    .product-card {

        min-height:
            235px;
    }


    .restock-helper {

        padding:
            10px;
    }


    .restock-helper-main,
    html[data-large="true"]
    .restock-helper-main {

        grid-template-columns:
            minmax(105px,1fr)
            22px
            minmax(110px,1fr);

        gap:
            7px;
    }


    .restock-apply {

        grid-column:
            1 / -1;

        width:
            100%;

        min-height:
            48px;

        margin-top:
            2px;

        font-size:
            .75em;
    }


    .restock-missing-input {

        font-size:
            1.12em;
    }


    .restock-result-value {

        font-size:
            1.08em;
    }

}


/* ===========================================================
   Narrow mobile
   =========================================================== */

@media (max-width: 430px) {

    .restock-mode-copy small {

        display:
            none;
    }


    .restock-mode-button {

        font-size:
            .68em;
    }


    .restock-result-detail {

        font-size:
            .54em;
    }

}

/* ===========================================================
   v0.12.2 缺量換算按鈕點擊修正
   =========================================================== */

.restock-mode-button {

    position: relative !important;

    z-index: 5 !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    touch-action: manipulation !important;

    user-select: none !important;

    -webkit-user-select: none !important;
}


/*
 * 關鍵修正：
 *
 * 圖示與文字全部不能成為 pointer target。
 * 不論點文字、Emoji、空白，
 * event.target 永遠會落在 button。
 */

.restock-mode-button *,
.restock-mode-button span,
.restock-toggle-icon,
.restock-toggle-label {

    pointer-events: none !important;

    user-select: none !important;

    -webkit-user-select: none !important;
}


/*
 * 確保沒有其他透明元素蓋住按鈕
 */

.restock-mode-area {

    position: relative !important;

    z-index: 2 !important;
}


/* ===========================================================
   快抄 v0.13
   現場效率精修
   =========================================================== */


/* ===========================================================
   1. 草稿狀態
   =========================================================== */

.draft-status {

    min-height:
        34px;

    margin-top:
        10px;

    padding:
        0
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    color:
        var(--muted);

    background:
        var(--surface-soft);

    font-size:
        .62em;

    font-weight:
        750;
}


.draft-status-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--muted);
}


.draft-status[data-state="saved"]
.draft-status-dot {

    background:
        var(--success);
}


.draft-status[data-state="saving"]
.draft-status-dot {

    background:
        #C18A20;
}


.draft-status[data-state="restored"] {

    color:
        var(--primary);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 28%,
            var(--border)
        );

    background:
        var(--primary-soft);
}


.draft-status[data-state="restored"]
.draft-status-dot {

    background:
        var(--primary);
}


.draft-status[data-state="error"] {

    color:
        var(--danger);

    background:
        var(--danger-soft);
}


.draft-status[data-state="error"]
.draft-status-dot {

    background:
        var(--danger);
}


/* ===========================================================
   2. 只看已選
   =========================================================== */

.selected-only-area {

    margin-top:
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.selected-only-button {

    min-height:
        44px;

    padding:
        0
        14px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .74em;

    font-weight:
        900;
}


.selected-only-button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


.selected-only-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


.selected-only-check {

    font-weight:
        950;
}


.selected-only-count {

    min-width:
        24px;

    min-height:
        24px;

    padding:
        0
        6px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size:
        .95em;
}


.selected-only-button.active
.selected-only-count {

    color:
        var(--primary);

    background:
        #FFFFFF;
}


.selected-only-info {

    color:
        var(--muted);

    font-size:
        .68em;

    font-weight:
        700;
}


/*
 * 只看已選時，
 * 沒有數量的商品直接隱藏。
 */




/* ===========================================================
   3. 沒有已選商品
   =========================================================== */

.selected-only-empty {

    display:
        none;

    margin-top:
        12px;

    padding:
        46px
        20px;

    align-items:
        center;

    flex-direction:
        column;

    text-align:
        center;

    border:
        1px dashed
        var(--border-strong);

    border-radius:
        15px;

    background:
        var(--surface);
}


.selected-only-empty.show {

    display:
        flex;
}


.selected-empty-icon {

    width:
        46px;

    height:
        46px;

    margin-bottom:
        10px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-weight:
        950;
}


.selected-only-empty strong {

    color:
        var(--text);

    font-size:
        .88em;
}


.selected-only-empty span {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        .7em;
}


.selected-only-empty button {

    min-height:
        44px;

    margin-top:
        15px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--primary);

    border-radius:
        9px;

    color:
        #FFFFFF;

    background:
        var(--primary);

    font-size:
        .73em;

    font-weight:
        900;
}


/* ===========================================================
   4. 已選商品再清楚一點
   =========================================================== */

.product-card.v13-selected-card {

    border-color:
        var(--primary);

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 23%,
            var(--surface)
        );
}


/* ===========================================================
   5. 缺量換算瘦身
   =========================================================== */

/*
 * v0.12 開啟後卡片大約 205px，
 * v0.13 壓回約 180px。
 */

html[data-restock-helper="true"]
.product-card {

    min-height:
        180px;
}


.restock-helper {

    margin-top:
        8px;

    padding:
        7px
        8px;

    border-radius:
        9px;
}


.restock-helper-main {

    grid-template-columns:
        minmax(92px,.8fr)
        18px
        minmax(115px,1fr)
        auto;

    gap:
        6px;
}


/*
 * 「現場少」改成小標示，
 * 不再佔一整層。
 */

.restock-missing-field label {

    margin-bottom:
        3px;

    font-size:
        .57em;
}


.restock-input-wrap {

    min-height:
        38px;
}


.restock-missing-input {

    height:
        36px;

    font-size:
        1em;
}


.restock-case-unit {

    padding-right:
        8px;

    font-size:
        .68em;
}


.restock-arrow {

    font-size:
        .9em;
}


.restock-result small {

    font-size:
        .54em;
}


.restock-result-value {

    font-size:
        .95em;
}


.restock-result-detail {

    margin-top:
        0;

    font-size:
        .52em;
}


.restock-apply {

    min-width:
        76px;

    min-height:
        40px;

    padding:
        0
        9px;

    font-size:
        .64em;
}


/*
 * 換算與正常箱數輸入靠近，
 * 不讓卡片像兩套功能。
 */

html[data-restock-helper="true"]
.restock-helper
+
.quantity-row {

    margin-top:
        7px;

    padding-top:
        7px;
}


/* ===========================================================
   6. Desktop
   =========================================================== */

@media (min-width: 721px) {

    html[data-restock-helper="true"]
    .product-card.brand-orange,

    html[data-restock-helper="true"]
    .product-card.brand-nac {

        min-height:
            190px;
    }

}


/* ===========================================================
   7. Mobile
   =========================================================== */

@media (max-width: 720px) {

    .selected-only-area {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            6px;
    }


    .selected-only-button {

        width:
            100%;

        min-height:
            48px;

        justify-content:
            center;
    }


    .selected-only-info {

        padding-left:
            2px;
    }


    html[data-restock-helper="true"]
    .product-card {

        min-height:
            215px;
    }


    .restock-helper-main {

        grid-template-columns:
            minmax(92px,1fr)
            18px
            minmax(110px,1fr);

        gap:
            6px;
    }


    .restock-apply {

        grid-column:
            1 / -1;

        width:
            100%;

        min-height:
            43px;

        margin-top:
            1px;
    }


    .draft-status {

        min-height:
            37px;

        font-size:
            .65em;
    }

}


/* ===========================================================
   8. 大字模式
   =========================================================== */

html[data-large="true"]
.selected-only-button {

    min-height:
        50px;
}


html[data-large="true"]
.draft-status {

    font-size:
        .66em;
}


/* ===========================================================
   快抄 v0.14
   貨架順序 / 現場找品效率
   =========================================================== */


/* ===========================================================
   商品區工具列
   =========================================================== */

.kc14-shelf-toolbar {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.kc14-toolbar-button {

    min-height:
        40px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .68em;

    font-weight:
        850;
}


.kc14-toolbar-button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


.kc14-toolbar-button.active {

    color:
        var(--primary);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 45%,
            var(--border)
        );

    background:
        var(--primary-soft);
}


/* ===========================================================
   搜尋下一項
   =========================================================== */

.kc14-next-search-row {

    display:
        none;

    margin-top:
        9px;

    justify-content:
        flex-end;
}


.kc14-next-search-row.show {

    display:
        flex;
}


#kc14NextSearchButton {

    min-height:
        42px;

    padding:
        0 14px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--success) 45%,
            var(--border)
        );

    border-radius:
        9px;

    color:
        var(--success);

    background:
        color-mix(
            in srgb,
            var(--success) 7%,
            var(--surface)
        );

    font-size:
        .72em;

    font-weight:
        900;
}


#kc14NextSearchButton:hover {

    color:
        #FFFFFF;

    border-color:
        var(--success);

    background:
        var(--success);
}


/* ===========================================================
   Editor Overlay
   =========================================================== */

.kc14-shelf-overlay {

    position:
        fixed;

    z-index:
        300;

    inset:
        0;

    padding:
        20px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(23,30,38,.48);

    backdrop-filter:
        blur(5px);
}


.kc14-shelf-overlay.show {

    display:
        flex;
}


body.kc14-order-editor-open {

    overflow:
        hidden;
}


.kc14-shelf-panel {

    width:
        min(
            720px,
            100%
        );

    max-height:
        88vh;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    color:
        var(--text);

    background:
        var(--surface);

    box-shadow:
        0 30px 80px
        rgba(20,30,40,.28);
}


/* ===========================================================
   Editor Header
   =========================================================== */

.kc14-shelf-head {

    min-height:
        74px;

    padding:
        14px 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-bottom:
        1px solid
        var(--border);
}


.kc14-shelf-head strong {

    display:
        block;

    font-size:
        1.05em;

    font-weight:
        950;
}


.kc14-shelf-head small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--primary);

    font-size:
        .7em;

    font-weight:
        800;
}


.kc14-shelf-close {

    width:
        44px;

    height:
        44px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        1.35em;
}


/* ===========================================================
   Help
   =========================================================== */

.kc14-shelf-help {

    padding:
        10px 17px;

    color:
        var(--muted);

    background:
        var(--surface-soft);

    border-bottom:
        1px solid
        var(--border);

    font-size:
        .7em;

    line-height:
        1.5;
}


/* ===========================================================
   List
   =========================================================== */

.kc14-shelf-list {

    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        9px;
}


.kc14-shelf-row {

    min-height:
        66px;

    padding:
        8px
        9px;

    display:
        grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        9px;

    border-bottom:
        1px solid
        var(--border);
}


.kc14-shelf-row:last-child {

    border-bottom:
        0;
}


.kc14-shelf-number {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size:
        .73em;

    font-weight:
        950;
}


.kc14-shelf-product {

    min-width:
        0;
}


.kc14-shelf-product strong {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--text);

    font-size:
        .82em;

    font-weight:
        900;
}


.kc14-shelf-product small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-family:
        Consolas,
        monospace;

    font-size:
        .65em;

    font-weight:
        750;
}


/* ===========================================================
   Move buttons
   =========================================================== */

.kc14-shelf-controls {

    display:
        flex;

    gap:
        5px;
}


.kc14-shelf-controls button {

    width:
        42px;

    height:
        42px;

    padding:
        0;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .95em;

    font-weight:
        900;
}


.kc14-shelf-controls button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


/* ===========================================================
   Editor actions
   =========================================================== */

.kc14-shelf-actions {

    padding:
        12px
        14px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    gap:
        8px;

    border-top:
        1px solid
        var(--border);

    background:
        var(--surface);
}


.kc14-shelf-actions button {

    min-height:
        48px;

    padding:
        0
        15px;

    border-radius:
        10px;

    font-size:
        .75em;

    font-weight:
        900;
}


.kc14-reset-order {

    color:
        var(--text-2);

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);
}


.kc14-cancel-order {

    justify-self:
        end;

    color:
        var(--text-2);

    border:
        1px solid
        var(--border);

    background:
        var(--surface);
}


.kc14-save-order {

    color:
        #FFFFFF;

    border:
        1px solid
        var(--primary);

    background:
        var(--primary);
}


.kc14-save-order:hover {

    background:
        var(--primary-hover);
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 720px) {

    .section-heading {

        flex-wrap:
            wrap;

        padding-top:
            7px;

        padding-bottom:
            7px;
    }


    .kc14-shelf-toolbar {

        width:
            100%;

        margin-left:
            0;
    }


    .kc14-toolbar-button {

        flex:
            1;

        min-height:
            44px;
    }


    .kc14-next-search-row {

        justify-content:
            stretch;
    }


    #kc14NextSearchButton {

        width:
            100%;

        min-height:
            46px;

        justify-content:
            center;
    }


    .kc14-shelf-overlay {

        padding:
            0;

        align-items:
            flex-end;
    }


    .kc14-shelf-panel {

        width:
            100%;

        max-height:
            92vh;

        border-radius:
            20px
            20px
            0
            0;
    }


    .kc14-shelf-row {

        grid-template-columns:
            39px
            minmax(0,1fr)
            auto;

        padding-left:
            7px;

        padding-right:
            7px;
    }


    .kc14-shelf-controls {

        gap:
            4px;
    }


    .kc14-shelf-controls button {

        width:
            40px;

        height:
            44px;
    }


    .kc14-shelf-actions {

        grid-template-columns:
            1fr
            1fr;

        padding-bottom:
            max(
                13px,
                env(safe-area-inset-bottom)
            );
    }


    .kc14-reset-order {

        grid-column:
            1 / -1;
    }


    .kc14-cancel-order {

        justify-self:
            stretch;
    }


    .kc14-save-order {

        width:
            100%;
    }

}


/* ===========================================================
   Narrow mobile
   =========================================================== */

@media (max-width: 430px) {

    .kc14-shelf-row {

        grid-template-columns:
            34px
            minmax(0,1fr);
    }


    .kc14-shelf-number {

        width:
            32px;

        height:
            32px;
    }


    .kc14-shelf-controls {

        grid-column:
            1 / -1;

        padding-left:
            43px;
    }


    .kc14-shelf-controls button {

        flex:
            1;

        width:
            auto;
    }

}






/* ===========================================================
   v0.14.3
   JS 直接控制只看已選
   =========================================================== */

.product-card {

    /*
     * 不使用 display 動畫，
     * 避免只看已選切換時閃爍。
     */

    animation: none !important;
}

/* ===========================================================
   快抄 v0.16 Alpha
   手機首屏壓縮 / 不改業務邏輯
   =========================================================== */

@media (max-width: 720px) {

    /* -------------------------------------------------------
       1. 固定底欄安全距離
       ------------------------------------------------------- */

    body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .app-shell {
        padding-top: 9px;
        padding-bottom: calc(118px + env(safe-area-inset-bottom));
        gap: 10px;
    }

    .product-grid {
        padding-bottom: 26px;
    }

    .order-panel {
        margin-bottom: calc(26px + env(safe-area-inset-bottom));
    }


    /* -------------------------------------------------------
       2. Header 壓薄
       ------------------------------------------------------- */

    .header-inner {
        min-height: 62px;
        padding-top: max(7px, env(safe-area-inset-top));
        padding-bottom: 7px;
        gap: 6px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .toolbar-button {
        min-height: 42px;
    }


    /* -------------------------------------------------------
       3. 通路 / 日期：只留一層日期顯示
       原生 date input 仍覆蓋在日期卡上，功能完全保留。
       ------------------------------------------------------- */

    .setup-card {
        padding: 11px 12px;
    }

    .setup-main {
        grid-template-columns: 1fr 1fr;
        gap: 8px 9px;
    }

    .setup-main > div:first-child {
        grid-column: 1 / -1;
    }

    .section-label,
    .date-field > span {
        margin-bottom: 5px;
        font-size: .69em;
    }

    .channel-switch {
        padding: 4px;
        gap: 4px;
    }

    .channel-button {
        min-height: 47px;
        font-size: .88em;
    }

    .kc16-date-field {
        position: relative;
        min-height: 65px;
    }

    .kc16-date-field input[type="date"] {
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        top: 25px;
        width: 100%;
        height: 42px;
        min-height: 42px;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .kc16-date-field .date-readable {
        min-height: 42px;
        margin: 0;
        padding: 0 9px;
        display: flex;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 9px;
        color: var(--text);
        background: var(--surface-soft);
        font-size: .88em;
        font-weight: 950;
    }

    .kc16-date-field .date-readable::after {
        content: "▾";
        margin-left: auto;
        padding-left: 6px;
        color: var(--muted);
        font-size: .72em;
    }

    .kc16-date-field .date-readable[data-empty="true"] {
        color: var(--danger);
        font-size: .72em;
    }

    .arrival-shortcuts {
        width: 100%;
        margin-top: 3px;
        padding: 0;
        display: grid;
        grid-template-columns: auto repeat(5, minmax(0,1fr));
        gap: 4px;
        align-items: center;
        overflow: visible;
    }

    .arrival-shortcuts > span {
        margin: 0 2px 0 0;
        font-size: .60em;
        white-space: nowrap;
    }

    .arrival-shortcuts button {
        min-width: 0;
        min-height: 37px;
        padding: 0 3px;
        font-size: .62em;
    }


    /* -------------------------------------------------------
       4. 搜尋 / 常用 / 品牌：全部一次看完，不橫向切半
       ------------------------------------------------------- */

    .filter-card {
        margin-top: 9px;
        padding: 10px 11px;
    }

    .search-box {
        min-height: 49px;
        padding: 0 12px;
    }

    .search-box input {
        font-size: .84em;
    }

    .tabs-row {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 5px;
        overflow: visible;
    }

    .smart-tab {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 0 3px;
        border-radius: 9px;
        font-size: .65em;
        white-space: nowrap;
    }

    .brand-tabs {
        margin-top: 6px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 5px;
        overflow: visible;
    }

    .brand-tab {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 0 3px;
        border-radius: 9px;
        font-size: .63em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* -------------------------------------------------------
       5. 現場缺量換算：一列完成
       ------------------------------------------------------- */

    .restock-mode-area {
        min-height: 52px;
        margin-top: 7px;
        padding: 6px 8px;
        gap: 7px;
        border-radius: 9px;
    }

    .restock-mode-copy strong {
        font-size: .70em;
        white-space: nowrap;
    }

    .restock-mode-copy small {
        display: none;
    }

    .restock-mode-button {
        min-height: 38px;
        padding: 0 9px;
        gap: 5px;
        border-radius: 8px;
        font-size: .62em;
        white-space: nowrap;
    }


    /* -------------------------------------------------------
       6. 「只看已選」搬到商品標題旁
       field summary 在手機已被底部 bar 重複顯示，因此隱藏。
       ------------------------------------------------------- */

    .section-heading {
        min-height: 0;
        padding: 6px 2px;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 6px;
    }

    .section-heading > div:first-child {
        min-width: 0;
    }

    .section-heading > #currentChannelHint,
    .section-heading > .field-selection-summary {
        display: none !important;
    }

    .kc16-selected-inline {
        width: auto;
        margin: 0;
        display: block;
    }

    .kc16-selected-inline .selected-only-button {
        width: auto;
        min-height: 39px;
        padding: 0 9px;
        justify-content: center;
        gap: 5px;
        font-size: .64em;
        white-space: nowrap;
    }

    .kc16-selected-inline .selected-only-count {
        min-width: 21px;
        min-height: 21px;
        padding: 0 5px;
    }

    .kc16-selected-inline .selected-only-info {
        display: none !important;
    }

    .kc14-shelf-toolbar {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .kc14-toolbar-button {
        min-height: 40px;
        padding: 0 8px;
        font-size: .64em;
    }

    #kc14NextSearchRow {
        margin-top: 5px;
    }

    #kc14NextSearchButton {
        min-height: 41px;
        font-size: .67em;
    }


    /* -------------------------------------------------------
       7. 商品卡略壓縮，但不犧牲數量按鈕
       ------------------------------------------------------- */

    .product-grid {
        gap: 8px;
    }

    .product-card,
    html[data-large="true"] .product-card {
        min-height: 146px;
        padding: 12px 13px;
    }

    .product-card.brand-orange,
    .product-card.brand-nac,
    html[data-large="true"] .product-card.brand-orange,
    html[data-large="true"] .product-card.brand-nac {
        min-height: 150px;
    }

    .product-name,
    html[data-large="true"] .product-name {
        font-size: 1.02em;
    }

    .product-meta {
        margin-top: 6px;
    }

    .quantity-row {
        margin-top: 7px;
        padding-top: 7px;
    }

    .qty-main,
    html[data-large="true"] .qty-main {
        grid-template-columns: 60px minmax(0,1fr) 60px;
        gap: 7px;
    }

    .qty-button,
    .qty-input,
    html[data-large="true"] .qty-button,
    html[data-large="true"] .qty-input {
        min-height: 56px;
    }

    .qty-input {
        font-size: 1.36em;
    }


    /* 缺量換算開啟時，原本 v0.13 的 215px 太高。 */
    html[data-restock-helper="true"] .product-card {
        min-height: 198px;
    }


    /* -------------------------------------------------------
       8. 固定底欄：保留，但不遮商品
       ------------------------------------------------------- */

    .mobile-bar {
        left: 8px;
        right: 8px;
        bottom: max(7px, env(safe-area-inset-bottom));
        min-height: 68px;
        padding: 7px 8px 7px 12px;
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(30,42,54,.20);
    }

    .mobile-bar small {
        font-size: .62em;
    }

    .mobile-bar strong {
        font-size: .98em;
    }

    .mobile-preview,
    .mobile-copy {
        min-height: 50px;
        padding: 0 14px;
    }
}


@media (max-width: 430px) {

    .header-inner {
        padding-left: 9px;
        padding-right: 9px;
    }

    .arrival-shortcuts {
        gap: 3px;
    }

    .arrival-shortcuts > span {
        font-size: .56em;
    }

    .arrival-shortcuts button {
        font-size: .58em;
    }

    .smart-tab,
    .brand-tab {
        font-size: .60em;
    }

    .restock-mode-button {
        padding-left: 7px;
        padding-right: 7px;
        font-size: .59em;
    }
}


/* KC17 MOBILE START */

/* ===========================================================
   快抄 v0.17 Alpha
   商品操作列放大 + 手機置頂鍵
   =========================================================== */


@media (max-width: 720px) {


    /*
     * -------------------------------------------------------
     * 商品標題
     * -------------------------------------------------------
     */

    .kc17-product-heading {

        min-height:
            54px !important;

        padding:
            4px 3px !important;

        align-items:
            center !important;
    }


    .kc17-product-count {

        color:
            var(--text) !important;

        font-size:
            1.05em !important;

        font-weight:
            950 !important;
    }


    /*
     * -------------------------------------------------------
     * 商品操作按鈕
     * -------------------------------------------------------
     *
     * 原本手機版字太小。
     */

    .kc17-product-tool {

        min-height:
            49px !important;

        padding:
            0 15px !important;

        border-radius:
            11px !important;

        font-size:
            .83em !important;

        font-weight:
            900 !important;

        line-height:
            1.2 !important;

        letter-spacing:
            .01em !important;
    }


    .kc17-favorite-first,
    .kc17-product-order {

        font-size:
            .86em !important;
    }


    .kc17-selected-only {

        min-height:
            48px !important;

        font-size:
            .82em !important;
    }


    /*
     * 數字 0 / 1 / 2 ...
     * 如果原版用了 span 小徽章，
     * 一併放大。
     */

    .kc17-selected-only span {

        font-size:
            1em !important;
    }


    /*
     * -------------------------------------------------------
     * 浮動置頂鍵
     * -------------------------------------------------------
     */

    .kc17-back-top {

        position:
            fixed;

        z-index:
            90;

        right:
            15px;

        bottom:
            calc(
                94px +
                env(safe-area-inset-bottom)
            );

        width:
            58px;

        height:
            58px;

        padding:
            4px 0 3px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            0;

        border:
            1px solid
            rgba(62,96,155,.32);

        border-radius:
            50%;

        color:
            #FFFFFF;

        background:
            var(--primary);

        box-shadow:
            0 7px 22px
            rgba(38,55,80,.24);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(
                12px
            )
            scale(.92);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease,
            background .13s ease;

        -webkit-tap-highlight-color:
            transparent;
    }


    .kc17-back-top.show {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateY(0)
            scale(1);
    }


    .kc17-back-top:active {

        transform:
            scale(.91);
    }


    .kc17-top-arrow {

        display:
            block;

        height:
            27px;

        font-size:
            1.42em;

        line-height:
            25px;

        font-weight:
            900;
    }


    .kc17-top-text {

        display:
            block;

        margin-top:
            -1px;

        font-size:
            .56em;

        line-height:
            1;

        font-weight:
            900;

        letter-spacing:
            .03em;
    }


    /*
     * 防止浮動置頂鍵和底部複製按鈕互相重疊
     */

    .mobile-bar {

        z-index:
            80;
    }


}


/*
 * 超窄手機略微調整
 */

@media (max-width: 430px) {

    .kc17-product-tool {

        padding:
            0 11px !important;

        font-size:
            .79em !important;
    }


    .kc17-back-top {

        right:
            13px;

        width:
            56px;

        height:
            56px;
    }

}


/*
 * 桌機不顯示置頂鍵
 */

@media (min-width: 721px) {

    .kc17-back-top {

        display:
            none !important;
    }

}

/* KC17 MOBILE END */


/* KC18 START */

/* ===========================================================
   快抄 v0.18 Alpha
   Mobile Order Bottom Sheet
   =========================================================== */


.kc18-order-sheet {

    display:
        none;
}


/* ===========================================================
   手機
   =========================================================== */

@media (max-width: 720px) {


    /*
     * 原本頁面最下面的 order-panel
     * 手機不用再佔整段長頁面。
     *
     * app.js 還是會正常更新它，
     * v0.18 Bottom Sheet 再複製內容。
     */

    #orderPanel {

        display:
            none !important;
    }


    body.kc18-sheet-open {

        overflow:
            hidden !important;

        touch-action:
            none;
    }


    .kc18-order-sheet {

        position:
            fixed;

        z-index:
            300;

        inset:
            0;

        display:
            flex;

        align-items:
            flex-end;

        justify-content:
            center;

        visibility:
            hidden;

        pointer-events:
            none;
    }


    .kc18-sheet-backdrop {

        position:
            absolute;

        inset:
            0;

        background:
            rgba(
                18,
                24,
                31,
                .46
            );

        opacity:
            0;

        transition:
            opacity .2s ease;

        backdrop-filter:
            blur(3px);
    }


    .kc18-sheet-panel {

        position:
            relative;

        z-index:
            1;

        width:
            100%;

        max-height:
            min(
                82dvh,
                760px
            );

        padding:
            8px
            16px
            calc(
                16px +
                env(
                    safe-area-inset-bottom
                )
            );

        display:
            flex;

        flex-direction:
            column;

        border:
            1px solid
            var(--border);

        border-bottom:
            0;

        border-radius:
            22px
            22px
            0
            0;

        color:
            var(--text);

        background:
            var(--paper);

        box-shadow:
            0
            -16px
            50px
            rgba(
                20,
                28,
                38,
                .24
            );

        transform:
            translateY(
                105%
            );

        transition:
            transform .24s
            cubic-bezier(
                .22,
                .75,
                .22,
                1
            );
    }


    .kc18-order-sheet.show {

        visibility:
            visible;

        pointer-events:
            auto;
    }


    .kc18-order-sheet.show
    .kc18-sheet-backdrop {

        opacity:
            1;
    }


    .kc18-order-sheet.show
    .kc18-sheet-panel {

        transform:
            translateY(0);
    }


    /*
     * 上方拖曳把手
     */

    .kc18-sheet-handle {

        width:
            44px;

        height:
            5px;

        margin:
            0 auto
            8px;

        border-radius:
            999px;

        background:
            var(--border-strong);

        opacity:
            .8;
    }


    /*
     * Header
     */

    .kc18-sheet-head {

        min-height:
            58px;

        padding-bottom:
            10px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            12px;

        border-bottom:
            1px solid
            var(--border);
    }


    .kc18-sheet-head strong {

        display:
            block;

        color:
            var(--text);

        font-size:
            1.08em;

        font-weight:
            950;
    }


    .kc18-sheet-head span {

        display:
            block;

        margin-top:
            2px;

        color:
            var(--primary);

        font-size:
            .74em;

        font-weight:
            850;
    }


    #kc18SheetClose {

        flex:
            0 0 auto;

        width:
            46px;

        height:
            46px;

        border:
            1px solid
            var(--border);

        border-radius:
            12px;

        color:
            var(--text-2);

        background:
            var(--surface-soft);

        font-size:
            1.45em;

        font-weight:
            500;
    }


    /*
     * 訂單內容自己捲動
     */

    .kc18-sheet-content {

        flex:
            1;

        min-height:
            110px;

        margin:
            4px -3px
            0;

        padding:
            8px
            3px
            12px;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    /*
     * Bottom Sheet 裡扣號再稍微加大。
     */

    .kc18-sheet-content
    .order-code {

        font-size:
            1.05em;

        font-weight:
            950;
    }


    .kc18-sheet-content
    .order-note {

        font-size:
            .63em;
    }


    .kc18-sheet-content
    .empty-state {

        padding:
            30px
            10px;
    }


    /*
     * 統計
     */

    .kc18-sheet-summary {

        flex:
            0 0 auto;

        margin-top:
            3px;

        padding:
            10px 0;

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            8px;

        border-top:
            1px solid
            var(--border);
    }


    .kc18-sheet-summary > div {

        min-height:
            58px;

        padding:
            8px 12px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        border:
            1px solid
            var(--border);

        border-radius:
            11px;

        background:
            var(--surface-soft);
    }


    .kc18-sheet-summary small {

        color:
            var(--muted);

        font-size:
            .72em;

        font-weight:
            800;
    }


    .kc18-sheet-summary strong {

        color:
            var(--text);

        font-size:
            1.2em;

        font-weight:
            950;
    }


    /*
     * 複製訂單
     */

    .kc18-sheet-copy {

        flex:
            0 0 auto;

        width:
            100%;

        min-height:
            58px;

        border:
            2px solid
            var(--primary);

        border-radius:
            13px;

        color:
            #FFFFFF;

        background:
            var(--primary);

        box-shadow:
            0 6px 17px
            rgba(
                62,
                96,
                155,
                .18
            );

        font-size:
            .94em;

        font-weight:
            950;
    }


    .kc18-sheet-copy:disabled {

        opacity:
            .4;

        box-shadow:
            none;
    }


    .kc18-sheet-copy.success {

        border-color:
            var(--success);

        background:
            var(--success);
    }


    /*
     * 既然手機 orderPanel 已不在頁尾，
     * 商品最後一張只需要避開固定 mobile bar。
     */

    .product-grid {

        padding-bottom:
            calc(
                92px +
                env(
                    safe-area-inset-bottom
                )
            ) !important;
    }

}


/* ===========================================================
   Desktop 不變
   =========================================================== */

@media (min-width: 721px) {

    .kc18-order-sheet {

        display:
            none !important;
    }

}

/* KC18 END */


/* KC19 START */

/* ===========================================================
   快抄 v0.19 Alpha
   Bottom Sheet 視覺精修
   =========================================================== */


@media (max-width: 720px) {


    /* =======================================================
       Sheet 高度
       ======================================================= */

    .kc18-sheet-panel {

        max-height:
            74dvh !important;

        transition:
            transform .24s
            cubic-bezier(
                .22,
                .75,
                .22,
                1
            ),
            max-height .22s ease !important;
    }


    .kc18-sheet-panel.kc19-expanded {

        max-height:
            92dvh !important;
    }


    /*
     * 把手變成真的可操作區
     */

    .kc18-sheet-handle {

        width:
            60px !important;

        height:
            22px !important;

        margin:
            -3px auto
            2px !important;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            transparent !important;

        cursor:
            pointer;
    }


    .kc18-sheet-handle::before {

        content:
            "";

        width:
            46px;

        height:
            5px;

        border-radius:
            999px;

        background:
            var(--border-strong);
    }


    /* =======================================================
       訂單日期標題
       ======================================================= */

    .kc18-sheet-content
    .preview-header {

        padding:
            13px 0
            15px !important;

        line-height:
            1.45 !important;
    }


    .kc19-order-date-main {

        color:
            var(--text);

        font-size:
            1.02em;

        font-weight:
            950;
    }


    .kc19-order-date-arrival {

        margin-top:
            5px;

        color:
            var(--text-2);

        font-size:
            .78em;

        font-weight:
            800;
    }


    /* =======================================================
       11 / 12 部門
       ======================================================= */

    .kc18-sheet-content
    .department-heading {

        margin:
            18px 0
            7px !important;

        min-height:
            34px;

        gap:
            9px !important;

        color:
            var(--text-2);

        font-size:
            .76em !important;

        font-weight:
            950 !important;
    }


    .kc18-sheet-content
    .department-heading::before {

        padding:
            5px 10px;

        border-radius:
            8px;

        white-space:
            nowrap;
    }


    .kc18-sheet-content
    .kc19-dept-12 {

        color:
            var(--dept12) !important;
    }


    .kc18-sheet-content
    .kc19-dept-12::before {

        content:
            "12部門";

        color:
            var(--dept12);

        background:
            var(--dept12-bg);
    }


    .kc18-sheet-content
    .kc19-dept-11 {

        color:
            var(--dept11) !important;
    }


    .kc18-sheet-content
    .kc19-dept-11::before {

        content:
            "11部門";

        color:
            var(--dept11);

        background:
            var(--dept11-bg);
    }


    /*
     * 原本標題文字隱藏，
     * 改由 ::before 當 badge。
     */

    .kc18-sheet-content
    .kc19-dept-11,
    .kc18-sheet-content
    .kc19-dept-12 {

        font-size:
            0 !important;
    }


    .kc18-sheet-content
    .kc19-dept-11::before,
    .kc18-sheet-content
    .kc19-dept-12::before {

        font-size:
            13px !important;

        font-weight:
            950;
    }


    .kc18-sheet-content
    .department-heading::after {

        opacity:
            .8;
    }


    /* =======================================================
       訂單商品
       ======================================================= */

    .kc18-sheet-content
    .order-line {

        min-height:
            61px !important;

        padding:
            10px 0 !important;
    }


    /*
     * 扣號 / 箱數是第一視覺
     */

    .kc18-sheet-content
    .order-code {

        color:
            var(--text);

        font-size:
            1.09em !important;

        font-weight:
            950 !important;

        letter-spacing:
            .055em !important;
    }


    /*
     * 商品名稱只是核對用
     */

    .kc18-sheet-content
    .order-note {

        display:
            block;

        max-width:
            100%;

        margin-top:
            4px !important;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        color:
            var(--muted);

        font-size:
            .59em !important;

        font-weight:
            650;

        opacity:
            .9;
    }


    /* =======================================================
       頂部 Header
       ======================================================= */

    .kc18-sheet-head {

        min-height:
            61px !important;
    }


    .kc18-sheet-head strong {

        font-size:
            1.1em !important;
    }


    .kc18-sheet-head span {

        margin-top:
            1px !important;

        font-size:
            .76em !important;
    }


    /* =======================================================
       統計卡
       ======================================================= */

    .kc18-sheet-summary {

        padding:
            9px 0 !important;
    }


    .kc18-sheet-summary > div {

        min-height:
            61px !important;
    }


    .kc18-sheet-summary small {

        font-size:
            .72em !important;
    }


    .kc18-sheet-summary strong {

        font-size:
            1.28em !important;
    }


    /* =======================================================
       複製
       ======================================================= */

    .kc18-sheet-copy {

        min-height:
            60px !important;

        font-size:
            .96em !important;
    }

}


/* 桌機完全不受影響 */

@media (min-width: 721px) {

    .kc19-order-date-main,
    .kc19-order-date-arrival {

        display:
            initial;
    }

}

/* KC19 END */


/* KC21 VISUAL START */

/* ===========================================================
   快抄 v0.21 Alpha
   高對比視覺重構
   =========================================================== */


/* ===========================================================
   全站新色盤
   =========================================================== */

:root {

    --bg: #E9EEF5;
    --bg-warm: #F7F4EE;

    --surface: #FFFFFF;
    --surface-soft: #F2F5F9;
    --surface-hover: #E8EDF4;

    --paper: #FFFEFA;

    --text: #172033;
    --text-2: #425069;
    --muted: #66738A;

    --border: #C9D2DF;
    --border-strong: #98A7BA;

    /* 皇家藍 */
    --primary: #2858D7;
    --primary-hover: #1E47B5;
    --primary-soft: #E8EEFF;

    /* 部門 */
    --dept12: #2855C7;
    --dept12-bg: #E4ECFF;

    --dept11: #14734F;
    --dept11-bg: #DFF5EB;

    /* 品牌 */
    --kc21-brand-g: #078C8A;
    --kc21-brand-b: #3158C8;
    --kc21-soft: #7857C6;
    --kc21-brand-a: #C24773;
    --kc21-orange: #E87822;
    --kc21-nac: #198763;

    /* 功能 */
    --success: #168A59;
    --success-soft: #E1F6EC;

    --danger: #C83F4D;
    --danger-soft: #FCE7E9;

    --warning: #B97800;
    --warning-soft: #FFF2CE;

    --purple: #704FC4;
    --purple-soft: #EEE8FF;

    --shadow:
        0 7px 23px
        rgba(30, 43, 66, .08);

    --shadow-hover:
        0 12px 32px
        rgba(30, 43, 66, .14);
}


/* ===========================================================
   Dark Mode 仍然保留，但顏色也拉開
   =========================================================== */

html[data-theme="dark"] {

    --bg: #111722;
    --bg-warm: #151B27;

    --surface: #1C2532;
    --surface-soft: #263140;
    --surface-hover: #303D4D;

    --paper: #202936;

    --text: #F7F9FC;
    --text-2: #D6DDEA;
    --muted: #A5B0C1;

    --border: #3A485B;
    --border-strong: #68798E;

    --primary: #7898FF;
    --primary-hover: #91AAFF;
    --primary-soft: #28385F;

    --dept12: #B3C4FF;
    --dept12-bg: #29365E;

    --dept11: #9BE2C8;
    --dept11-bg: #203E36;

    --success: #65D2A3;
    --success-soft: #203E34;

    --danger: #FF9EA8;
    --danger-soft: #4B282E;

    --warning: #FFD36E;
    --warning-soft: #44391D;

    --purple: #C2B0FF;
    --purple-soft: #332A50;
}


/* ===========================================================
   網頁背景
   =========================================================== */

body {

    background:
        linear-gradient(
            180deg,
            #F8F4EC 0px,
            #EDF1F7 360px,
            #E9EEF5 100%
        );
}


html[data-theme="dark"] body {

    background:
        linear-gradient(
            180deg,
            #171E2A 0,
            #111722 100%
        );
}


/* ===========================================================
   HEADER
   =========================================================== */

.app-header {

    border-bottom:
        2px solid
        #D3DAE6;

    box-shadow:
        0 3px 13px
        rgba(30, 43, 66, .08);
}


html[data-theme="dark"]
.app-header {

    border-bottom-color:
        #3B4758;
}


/* 大字 */

.large-quick-button {

    color:
        #5F42A9;

    border-color:
        #C8BAEF;

    background:
        #F0EBFF;
}


.large-quick-button.active {

    color:
        #FFFFFF;

    border-color:
        #704FC4;

    background:
        #704FC4;
}


/* ===========================================================
   三大主區塊分色
   =========================================================== */

.setup-card {

    border-top:
        4px solid
        #2858D7 !important;
}


.filter-card {

    border-top:
        4px solid
        #704FC4 !important;
}


.order-panel {

    border-top:
        4px solid
        #168A59 !important;

    background:
        var(--paper);
}


/* ===========================================================
   通路
   =========================================================== */

.channel-switch {

    border:
        1px solid
        var(--border);

    background:
        #EEF2F7;
}


html[data-theme="dark"]
.channel-switch {

    background:
        #242E3B;
}


/* 示範通路A */

.channel-button[data-channel="wan"].active {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;

    box-shadow:
        0 5px 16px
        rgba(40, 88, 215, .25);
}


/* 示範通路B */

.channel-button[data-channel="px"].active {

    color:
        #FFFFFF !important;

    border-color:
        #704FC4 !important;

    background:
        #704FC4 !important;

    box-shadow:
        0 5px 16px
        rgba(112, 79, 196, .25);
}


/* ===========================================================
   日期
   =========================================================== */

.date-field input,
.kc09-date-field .date-readable {

    border-color:
        #AAB7C8 !important;

    background:
        #FFFFFF !important;
}


html[data-theme="dark"]
.date-field input,
html[data-theme="dark"]
.kc09-date-field .date-readable {

    color:
        var(--text) !important;

    border-color:
        #58697D !important;

    background:
        #25303E !important;
}


.arrival-shortcuts button {

    color:
        #2858D7 !important;

    border-color:
        #B7C5E8 !important;

    background:
        #EDF2FF !important;
}


.arrival-shortcuts button:hover {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;
}


/* ===========================================================
   搜尋
   =========================================================== */

.search-box {

    border-color:
        #9DABC0 !important;

    background:
        #FFFFFF !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.7);
}


.search-box:focus-within {

    border-color:
        #2858D7 !important;

    box-shadow:
        0 0 0 4px
        rgba(40,88,215,.10);
}


html[data-theme="dark"]
.search-box {

    border-color:
        #526379 !important;

    background:
        #202B38 !important;
}


/* ===========================================================
   全部 / 常用 / 最近 / 最常用
   每一種模式都有辨識色
   =========================================================== */

.smart-tab {

    color:
        #43516A;

    border-color:
        #C5CEDA;

    background:
        #FFFFFF;
}


.smart-tab[data-mode="all"].active {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;
}


.smart-tab[data-mode="favorite"].active {

    color:
        #FFFFFF !important;

    border-color:
        #B97800 !important;

    background:
        #B97800 !important;
}


.smart-tab[data-mode="recent"].active {

    color:
        #FFFFFF !important;

    border-color:
        #704FC4 !important;

    background:
        #704FC4 !important;
}


.smart-tab[data-mode="frequent"].active {

    color:
        #FFFFFF !important;

    border-color:
        #078C8A !important;

    background:
        #078C8A !important;
}


/* ===========================================================
   品牌分類
   =========================================================== */

html:not([data-theme="dark"])
.brand-tab[data-brand="雲柔"] {

    color:
        #05706F;

    border-color:
        #8ED2D0;

    background:
        #E7F7F6;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="晨光"] {

    color:
        #294CA6;

    border-color:
        #9DB2ED;

    background:
        #EBF0FF;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="青禾"] {

    color:
        #6646AA;

    border-color:
        #BAAAE6;

    background:
        #F0ECFC;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="森語"] {

    color:
        #A43860;

    border-color:
        #E5A5BC;

    background:
        #FDEBF2;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="果漾工坊"] {

    color:
        #B9530B;

    border-color:
        #EDAF80;

    background:
        #FFF0E4;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="小星星"] {

    color:
        #116F51;

    border-color:
        #8CCEB6;

    background:
        #E6F6F0;
}


/* 品牌啟用後直接實心 */

.brand-tab[data-brand="雲柔"].active {

    color:
        #FFFFFF !important;

    border-color:
        #078C8A !important;

    background:
        #078C8A !important;
}


.brand-tab[data-brand="晨光"].active {

    color:
        #FFFFFF !important;

    border-color:
        #3158C8 !important;

    background:
        #3158C8 !important;
}


.brand-tab[data-brand="青禾"].active {

    color:
        #FFFFFF !important;

    border-color:
        #7857C6 !important;

    background:
        #7857C6 !important;
}


.brand-tab[data-brand="森語"].active {

    color:
        #FFFFFF !important;

    border-color:
        #C24773 !important;

    background:
        #C24773 !important;
}


.brand-tab[data-brand="果漾工坊"].active {

    color:
        #FFFFFF !important;

    border-color:
        #E87822 !important;

    background:
        #E87822 !important;
}


.brand-tab[data-brand="小星星"].active {

    color:
        #FFFFFF !important;

    border-color:
        #198763 !important;

    background:
        #198763 !important;
}


/* 深色模式品牌 */

html[data-theme="dark"]
.brand-tab {

    color:
        var(--text-2);

    background:
        #242F3D;
}


/* ===========================================================
   現場缺量換算
   =========================================================== */

.restock-mode-area,
.kc09-shortage-card {

    border-color:
        #E0BE66 !important;

    background:
        #FFF8E5 !important;
}


.restock-mode-copy strong,
.kc09-shortage-title {

    color:
        #6E4A00 !important;
}


.restock-mode-button,
.kc09-shortage-toggle {

    color:
        #875A00 !important;

    border-color:
        #E0B64F !important;

    background:
        #FFF0BF !important;
}


.restock-mode-button.active,
.kc09-shortage-toggle.active {

    color:
        #FFFFFF !important;

    border-color:
        #168A59 !important;

    background:
        #168A59 !important;
}


html[data-theme="dark"]
.restock-mode-area,
html[data-theme="dark"]
.kc09-shortage-card {

    border-color:
        #76602C !important;

    background:
        #332D1D !important;
}


/* ===========================================================
   商品工具
   =========================================================== */

.kc14-toolbar-button {

    border-width:
        1.5px !important;

    font-weight:
        850 !important;
}


/* 常用優先 */

#kc14FavoriteFirst {

    color:
        #805500 !important;

    border-color:
        #DCBD67 !important;

    background:
        #FFF3CE !important;
}


#kc14FavoriteFirst.active {

    color:
        #FFFFFF !important;

    border-color:
        #B97800 !important;

    background:
        #B97800 !important;
}


/* 商品順序 */

#kc14EditShelf {

    color:
        #5E42A4 !important;

    border-color:
        #B7A7E4 !important;

    background:
        #EFEAFF !important;
}


/* 只看已選 */

#selectedOnlyButton,
.kc17-selected-only {

    color:
        #2450B5 !important;

    border-color:
        #A7BAE8 !important;

    background:
        #E9F0FF !important;
}


#selectedOnlyButton.active,
#selectedOnlyButton[aria-pressed="true"],
.kc17-selected-only.active,
.kc17-selected-only[aria-pressed="true"] {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;
}


/* ===========================================================
   商品卡片
   =========================================================== */

.product-card {

    border-color:
        #C4CEDB !important;

    background:
        #FFFFFF;

    box-shadow:
        0 4px 13px
        rgba(31,44,66,.055);
}


.product-card:hover {

    border-color:
        #8F9FB3 !important;

    box-shadow:
        var(--shadow-hover);
}


/* 品牌左側辨識條 */

.product-card[data-kc21-brand="雲柔"]::before {

    background:
        #078C8A !important;
}


.product-card[data-kc21-brand="晨光"]::before {

    background:
        #3158C8 !important;
}


.product-card[data-kc21-brand="青禾"]::before {

    background:
        #7857C6 !important;
}


.product-card[data-kc21-brand="森語"]::before {

    background:
        #C24773 !important;
}


.product-card[data-kc21-brand="果漾工坊"]::before {

    background:
        #E87822 !important;
}


.product-card[data-kc21-brand="小星星"]::before {

    background:
        #198763 !important;
}


/* Emoji 做成一個真正的辨識 Icon */

.product-emoji {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #D5DCE6;

    border-radius:
        10px;

    background:
        #F2F5F9;

    font-size:
        1.05em !important;
}


/* 已經選入訂單 */

.product-card.selected {

    border-color:
        #168A59 !important;

    background:
        #F1FFF7 !important;

    box-shadow:
        0 0 0 3px
        rgba(22,138,89,.10),
        0 7px 18px
        rgba(30,60,45,.08) !important;
}


html[data-theme="dark"]
.product-card {

    border-color:
        #3E4C5E !important;

    background:
        #1D2633;
}


html[data-theme="dark"]
.product-card.selected {

    border-color:
        #5FD29F !important;

    background:
        #1C342B !important;
}


/* ===========================================================
   部門 / 扣號
   =========================================================== */

.department-chip.paper {

    color:
        #2349AA !important;

    background:
        #E4ECFF !important;
}


.department-chip.clean {

    color:
        #116B4B !important;

    background:
        #DFF5EB !important;
}


.code-chip {

    color:
        #173C86 !important;

    border-color:
        #A9BCE8 !important;

    background:
        #EAF0FF !important;

    font-weight:
        950 !important;
}


/* ===========================================================
   + / - / 數量
   =========================================================== */

/* 減少 */

.qty-button[data-add="-1"] {

    color:
        #B83242 !important;

    border-color:
        #E3A6AD !important;

    background:
        #FFF0F2 !important;
}


/* 增加 */

.qty-button.plus,
.qty-button[data-add="1"] {

    color:
        #FFFFFF !important;

    border-color:
        #168A59 !important;

    background:
        #168A59 !important;

    box-shadow:
        0 5px 12px
        rgba(22,138,89,.17) !important;
}


.qty-button.plus:hover,
.qty-button[data-add="1"]:hover {

    border-color:
        #107347 !important;

    background:
        #107347 !important;
}


.qty-input {

    border-color:
        #9BAABC !important;

    background:
        #FFFFFF !important;
}


.product-card.selected
.qty-input {

    border-color:
        #63B994 !important;
}


html[data-theme="dark"]
.qty-button[data-add="-1"] {

    color:
        #FFABB3 !important;

    border-color:
        #74404A !important;

    background:
        #40272D !important;
}


html[data-theme="dark"]
.qty-input {

    color:
        #FFFFFF !important;

    border-color:
        #607085 !important;

    background:
        #202B39 !important;
}


/* ===========================================================
   收藏星號
   =========================================================== */

.favorite.active {

    color:
        #A96E00 !important;

    border-color:
        #E4BE5C !important;

    background:
        #FFF0B9 !important;
}


/* ===========================================================
   清空
   =========================================================== */

.clear-button {

    color:
        #B62F3E !important;

    border-color:
        #E2A5AC !important;

    background:
        #FDE9EB !important;
}


.clear-button:hover {

    color:
        #FFFFFF !important;

    border-color:
        #C83F4D !important;

    background:
        #C83F4D !important;
}


/* ===========================================================
   訂單
   =========================================================== */

.order-code {

    color:
        #142A55 !important;
}


html[data-theme="dark"]
.order-code {

    color:
        #FFFFFF !important;
}


/* 複製是最後主要動作 → 綠色 */

.copy-button,
.kc18-sheet-copy {

    color:
        #FFFFFF !important;

    border-color:
        #168A59 !important;

    background:
        #168A59 !important;

    box-shadow:
        0 7px 18px
        rgba(22,138,89,.21) !important;
}


.copy-button:hover:not(:disabled),
.kc18-sheet-copy:hover:not(:disabled) {

    border-color:
        #107347 !important;

    background:
        #107347 !important;
}


/* ===========================================================
   手機固定操作 Bar
   =========================================================== */

@media (max-width: 720px) {

    .mobile-bar {

        border:
            1px solid
            #243B65 !important;

        background:
            #172A4D !important;

        box-shadow:
            0 9px 30px
            rgba(13,28,52,.28) !important;
    }


    .mobile-bar small {

        color:
            #BFCBE0 !important;
    }


    .mobile-bar strong {

        color:
            #FFFFFF !important;
    }


    .mobile-preview {

        color:
            #244AA6 !important;

        border-color:
            #C3D0EA !important;

        background:
            #FFFFFF !important;
    }


    .mobile-copy {

        color:
            #FFFFFF !important;

        border-color:
            #20A86D !important;

        background:
            #20A86D !important;

        box-shadow:
            0 4px 13px
            rgba(32,168,109,.24);
    }


    /*
     * 置頂不跟複製用同色
     */

    .kc17-back-top {

        color:
            #FFFFFF !important;

        border-color:
            #775ED2 !important;

        background:
            #694BC4 !important;

        box-shadow:
            0 7px 22px
            rgba(78,55,151,.30) !important;
    }


    /*
     * Bottom Sheet
     */

    .kc18-sheet-panel {

        background:
            #FFFEFA !important;

        border-top:
            3px solid
            #2858D7 !important;
    }


    html[data-theme="dark"]
    .kc18-sheet-panel {

        background:
            #202936 !important;
    }


    .kc18-sheet-summary > div {

        border-color:
            #C7D0DD !important;

        background:
            #F1F4F8 !important;
    }


    html[data-theme="dark"]
    .kc18-sheet-summary > div {

        border-color:
            #445266 !important;

        background:
            #273241 !important;
    }


    /*
     * 手機商品工具列字更有層次
     */

    .kc17-product-count {

        color:
            #172033 !important;

        font-weight:
            950 !important;
    }


    html[data-theme="dark"]
    .kc17-product-count {

        color:
            #FFFFFF !important;
    }

}


/* ===========================================================
   設定視窗
   =========================================================== */

.settings-panel {

    border-top:
        4px solid
        #704FC4 !important;
}


.reset-button {

    color:
        #B83242 !important;

    border-color:
        #E0A6AD !important;

    background:
        #FCEAEC !important;
}


/* ===========================================================
   Focus
   =========================================================== */

button:focus-visible,
input:focus-visible {

    outline:
        3px solid
        rgba(40,88,215,.30) !important;

    outline-offset:
        2px;
}


/* KC21 VISUAL END */


/* KC211 START */

/* ===========================================================
   快抄 v0.21.1
   低彩度 / 高對比 / 無咖啡色
   =========================================================== */

:root {

    --kc211-blue: #2F61D5;
    --kc211-blue-dark: #214BAF;
    --kc211-blue-soft: #EDF3FF;

    --kc211-navy: #18335E;

    --kc211-bg: #F2F5F9;
    --kc211-card: #FFFFFF;
    --kc211-soft: #F7F9FC;

    --kc211-text: #172033;
    --kc211-text2: #4B5870;
    --kc211-muted: #728096;

    --kc211-border: #CBD4E0;
    --kc211-border2: #AEBAC9;

    --kc211-green: #168A59;
    --kc211-green-soft: #EAF8F1;

    --kc211-red: #C84552;
    --kc211-red-soft: #FDECEF;

    --kc211-cyan: #1688A6;
    --kc211-cyan-soft: #EAF7FA;

    --kc211-yellow: #F5C518;

}


/* ===========================================================
   背景
   不再使用暖米色 / 咖啡色
   =========================================================== */

body {

    background:
        linear-gradient(
            180deg,
            #F7F9FC 0,
            #EEF2F7 100%
        ) !important;
}


/* ===========================================================
   主卡片
   =========================================================== */

.setup-card,
.filter-card,
.order-panel {

    background:
        #FFFFFF !important;

    border-color:
        #CBD4E0 !important;

    box-shadow:
        0 5px 16px
        rgba(23,32,51,.06) !important;
}


/* 三大區全部統一藍色辨識線 */

.setup-card,
.filter-card,
.order-panel {

    border-top:
        4px solid
        #2F61D5 !important;
}


/* ===========================================================
   通路
   =========================================================== */

.channel-switch {

    background:
        #EEF2F7 !important;

    border-color:
        #C5CEDB !important;
}


.channel-button {

    color:
        #3E4C63 !important;

    background:
        transparent !important;
}


.channel-button.active {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;

    box-shadow:
        0 5px 15px
        rgba(47,97,213,.20) !important;
}


/* 示範通路B也不要另外使用紫色 */

.channel-button[data-channel="px"].active {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;
}


/* ===========================================================
   日期 / 快捷到貨
   =========================================================== */

.date-field input,
.kc09-date-field .date-readable {

    color:
        #172033 !important;

    background:
        #F7F9FC !important;

    border-color:
        #B9C4D2 !important;
}


.arrival-shortcuts button {

    color:
        #2F61D5 !important;

    background:
        #F4F7FC !important;

    border-color:
        #BCC9DC !important;
}


.arrival-shortcuts button:hover {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;
}


/* ===========================================================
   搜尋框
   =========================================================== */

.search-box {

    background:
        #FFFFFF !important;

    border:
        2px solid
        #AEBAC9 !important;

    box-shadow:
        none !important;
}


.search-box:focus-within {

    border-color:
        #2F61D5 !important;

    box-shadow:
        0 0 0 3px
        rgba(47,97,213,.10) !important;
}


/* ===========================================================
   全部 / 常用 / 最近 / 最常用
   未啟用全部白色
   啟用全部統一藍色
   =========================================================== */

.smart-tab {

    color:
        #3F4D64 !important;

    background:
        #FFFFFF !important;

    border-color:
        #CBD4E0 !important;
}


.smart-tab.active,
.smart-tab[data-mode="all"].active,
.smart-tab[data-mode="favorite"].active,
.smart-tab[data-mode="recent"].active,
.smart-tab[data-mode="frequent"].active {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;
}


/* ===========================================================
   品牌列
   不再七顆不同底色
   =========================================================== */

.brand-tab {

    color:
        #354258 !important;

    background:
        #FFFFFF !important;

    border:
        1.5px solid
        #CBD4E0 !important;

    box-shadow:
        none !important;
}


/*
   品牌色只剩左側細線
*/

.brand-tab[data-brand="雲柔"] {

    box-shadow:
        inset 4px 0 0
        #28A6A2 !important;
}


.brand-tab[data-brand="晨光"] {

    box-shadow:
        inset 4px 0 0
        #5375D8 !important;
}


.brand-tab[data-brand="青禾"] {

    box-shadow:
        inset 4px 0 0
        #9279D5 !important;
}


.brand-tab[data-brand="森語"] {

    box-shadow:
        inset 4px 0 0
        #D86C91 !important;
}


.brand-tab[data-brand="果漾工坊"] {

    box-shadow:
        inset 4px 0 0
        #F08A42 !important;
}


.brand-tab[data-brand="小星星"] {

    box-shadow:
        inset 4px 0 0
        #36A47E !important;
}


/*
   任何品牌被選中
   都統一使用主藍
*/

.brand-tab.active {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;

    box-shadow:
        none !important;
}


/*
   全部品牌
*/

.brand-tab[data-brand="all"],
.brand-tab:first-child {

    box-shadow:
        none !important;
}


/* ===========================================================
   現場缺量換算
   原本黃色區塊 → 改成冰藍色
   =========================================================== */

.restock-mode-area,
.kc09-shortage-card {

    color:
        #244158 !important;

    background:
        #EDF7FA !important;

    border-color:
        #A9D5E0 !important;
}


.restock-mode-copy strong,
.kc09-shortage-title {

    color:
        #244158 !important;
}


.restock-mode-button,
.kc09-shortage-toggle {

    color:
        #176B82 !important;

    background:
        #FFFFFF !important;

    border-color:
        #8DC5D3 !important;
}


.restock-mode-button.active,
.kc09-shortage-toggle.active {

    color:
        #FFFFFF !important;

    background:
        #1688A6 !important;

    border-color:
        #1688A6 !important;
}


/* ===========================================================
   商品工具列
   =========================================================== */

.kc14-toolbar-button {

    color:
        #3C4960 !important;

    background:
        #FFFFFF !important;

    border:
        1.5px solid
        #C5CFDC !important;

    box-shadow:
        none !important;
}


/*
   常用優先：
   不再使用咖啡色 / 土黃色大底
*/

#kc14FavoriteFirst {

    color:
        #354258 !important;

    background:
        #FFFFFF !important;

    border-color:
        #C5CFDC !important;
}


#kc14FavoriteFirst::first-letter {

    color:
        #F5C518 !important;
}


#kc14FavoriteFirst.active {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;
}


/*
   商品順序
   不再用紫底
*/

#kc14EditShelf {

    color:
        #354258 !important;

    background:
        #FFFFFF !important;

    border-color:
        #C5CFDC !important;
}


/*
   只看已選
*/

#selectedOnlyButton,
.kc17-selected-only {

    color:
        #354258 !important;

    background:
        #FFFFFF !important;

    border-color:
        #C5CFDC !important;
}


#selectedOnlyButton.active,
#selectedOnlyButton[aria-pressed="true"],
.kc17-selected-only.active,
.kc17-selected-only[aria-pressed="true"] {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;
}


/* ===========================================================
   商品卡片
   =========================================================== */

.product-card {

    background:
        #FFFFFF !important;

    border:
        1.5px solid
        #C7D1DE !important;

    box-shadow:
        0 4px 13px
        rgba(26,39,60,.05) !important;
}


.product-card:hover {

    border-color:
        #9EADBF !important;
}


/*
   品牌色只保留非常細的左側線
*/

.product-card::before {

    width:
        4px !important;
}


/*
   被選取時只使用非常淡的綠
*/

.product-card.selected {

    background:
        #F3FBF7 !important;

    border-color:
        #63B893 !important;

    box-shadow:
        0 0 0 2px
        rgba(22,138,89,.08) !important;
}


/* ===========================================================
   商品 icon
   =========================================================== */

.product-emoji {

    background:
        #F5F7FA !important;

    border-color:
        #D5DDE7 !important;
}


/* ===========================================================
   部門 Badge
   只有小面積分色
   =========================================================== */

.department-chip.paper {

    color:
        #234AA8 !important;

    background:
        #EAF0FF !important;
}


.department-chip.clean {

    color:
        #137252 !important;

    background:
        #E6F7EF !important;
}


/* ===========================================================
   扣號
   =========================================================== */

.code-chip {

    color:
        #173C86 !important;

    background:
        #EDF3FF !important;

    border-color:
        #B6C6E9 !important;
}


/* ===========================================================
   數量操作
   =========================================================== */

.qty-button {

    box-shadow:
        none !important;
}


/* 減 */

.qty-button[data-add="-1"] {

    color:
        #BB3545 !important;

    background:
        #FFF3F4 !important;

    border-color:
        #E5A7AF !important;
}


/* 加 */

.qty-button.plus,
.qty-button[data-add="1"] {

    color:
        #FFFFFF !important;

    background:
        #168A59 !important;

    border-color:
        #168A59 !important;
}


/* ===========================================================
   收藏
   黃色只留在星號本身
   =========================================================== */

.favorite {

    background:
        transparent !important;
}


.favorite.active {

    color:
        #F5C518 !important;

    background:
        transparent !important;

    border-color:
        transparent !important;
}


/* ===========================================================
   清空
   =========================================================== */

.clear-button {

    color:
        #B93645 !important;

    background:
        #FFFFFF !important;

    border-color:
        #E0ADB4 !important;
}


.clear-button:hover {

    color:
        #FFFFFF !important;

    background:
        #C84552 !important;

    border-color:
        #C84552 !important;
}


/* ===========================================================
   複製
   =========================================================== */

.copy-button,
.kc18-sheet-copy {

    color:
        #FFFFFF !important;

    background:
        #168A59 !important;

    border-color:
        #168A59 !important;

    box-shadow:
        none !important;
}


/* ===========================================================
   大字按鈕
   不再紫色
   =========================================================== */

.large-quick-button {

    color:
        #2F61D5 !important;

    background:
        #FFFFFF !important;

    border-color:
        #AFC0E8 !important;
}


.large-quick-button.active {

    color:
        #FFFFFF !important;

    background:
        #2F61D5 !important;

    border-color:
        #2F61D5 !important;
}


/* ===========================================================
   手機底部操作區
   =========================================================== */

@media (max-width: 720px) {

    .mobile-bar {

        background:
            #18335E !important;

        border:
            1px solid
            #18335E !important;

        box-shadow:
            0 8px 25px
            rgba(13,31,59,.22) !important;
    }


    .mobile-preview {

        color:
            #244DA8 !important;

        background:
            #FFFFFF !important;

        border-color:
            #FFFFFF !important;
    }


    .mobile-copy {

        color:
            #FFFFFF !important;

        background:
            #168A59 !important;

        border-color:
            #168A59 !important;
    }


    /*
       置頂也統一藍色
       不用紫色
    */

    .kc17-back-top {

        color:
            #FFFFFF !important;

        background:
            #2F61D5 !important;

        border-color:
            #2F61D5 !important;

        box-shadow:
            0 6px 18px
            rgba(47,97,213,.22) !important;
    }


    /*
       Bottom Sheet
    */

    .kc18-sheet-panel {

        background:
            #FFFFFF !important;

        border-top:
            3px solid
            #2F61D5 !important;
    }


    .kc18-sheet-summary > div {

        background:
            #F3F6FA !important;

        border-color:
            #CCD5E1 !important;
    }

}


/* ===========================================================
   設定視窗
   =========================================================== */

.settings-panel {

    border-top:
        4px solid
        #2F61D5 !important;
}


/* ===========================================================
   Dark Mode
   同樣取消暖咖啡色
   =========================================================== */

html[data-theme="dark"] body {

    background:
        #111823 !important;
}


html[data-theme="dark"]
.setup-card,

html[data-theme="dark"]
.filter-card,

html[data-theme="dark"]
.order-panel,

html[data-theme="dark"]
.product-card {

    background:
        #1C2633 !important;

    border-color:
        #3E4B5C !important;
}


html[data-theme="dark"]
.brand-tab,

html[data-theme="dark"]
.kc14-toolbar-button,

html[data-theme="dark"]
#kc14FavoriteFirst,

html[data-theme="dark"]
#kc14EditShelf,

html[data-theme="dark"]
#selectedOnlyButton {

    color:
        #D7DFEA !important;

    background:
        #222D3A !important;

    border-color:
        #465567 !important;
}


html[data-theme="dark"]
.brand-tab.active,

html[data-theme="dark"]
.smart-tab.active {

    color:
        #FFFFFF !important;

    background:
        #557BE4 !important;

    border-color:
        #557BE4 !important;
}


html[data-theme="dark"]
.restock-mode-area,

html[data-theme="dark"]
.kc09-shortage-card {

    color:
        #C4E5EC !important;

    background:
        #19313A !important;

    border-color:
        #376A78 !important;
}


/* KC211 END */


/* KC023 START */

/* ===========================================================
   快抄 v0.23
   視覺精修
   =========================================================== */

:root {

    --kc23-blue: #2F61D5;
    --kc23-blue-dark: #214BAF;

    --kc23-navy: #18335E;

    --kc23-white: #FFFFFF;
    --kc23-bg: #F2F5F9;
    --kc23-soft: #F6F8FB;

    --kc23-text: #172033;
    --kc23-text2: #566277;

    --kc23-border: #CDD5E0;

    --kc23-green: #168A59;

    --kc23-red: #C84552;
}


/* ===========================================================
   基本視覺再簡化
   =========================================================== */

.setup-card,
.filter-card,
.order-panel {

    border-radius:
        18px !important;

    box-shadow:
        0 3px 12px
        rgba(25,39,60,.045) !important;
}


.product-card {

    border-radius:
        17px !important;

    box-shadow:
        0 2px 9px
        rgba(25,39,60,.04) !important;
}


/*
   選取商品：
   不再整張綠色
*/

.product-card.selected {

    background:
        #FFFFFF !important;

    border-color:
        #87BEA8 !important;

    box-shadow:
        inset 5px 0 0
        #168A59 !important;
}


/* 商品工具列不要太厚 */

.kc14-toolbar-button {

    min-height:
        48px !important;

    border-radius:
        13px !important;
}


/* ===========================================================
   門市工作模式
   =========================================================== */

.kc23-store-panel {

    margin:
        12px 18px;

    border:
        1px solid
        var(--kc23-border);

    border-radius:
        17px;

    background:
        #FFFFFF;

    overflow:
        hidden;

    box-shadow:
        0 3px 12px
        rgba(25,39,60,.045);
}


.kc23-store-summary {

    width:
        100%;

    min-height:
        52px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        0;

    color:
        var(--kc23-text);

    background:
        #FFFFFF;

    font:
        inherit;

    font-weight:
        850;

    cursor:
        pointer;
}


.kc23-store-summary:hover {

    background:
        #F7F9FC;
}


.kc23-store-arrow {

    transition:
        transform .18s ease;
}


.kc23-store-panel.open
.kc23-store-arrow {

    transform:
        rotate(180deg);
}


.kc23-store-content {

    display:
        none;

    padding:
        0 14px 14px;
}


.kc23-store-panel.open
.kc23-store-content {

    display:
        block;
}


.kc23-store-input-row {

    margin-bottom:
        10px;
}


.kc23-store-input {

    width:
        100%;

    min-height:
        48px;

    box-sizing:
        border-box;

    padding:
        0 14px;

    border:
        1.5px solid
        #B9C5D4;

    border-radius:
        13px;

    outline:
        0;

    color:
        var(--kc23-text);

    background:
        #F8FAFC;

    font:
        inherit;

    font-size:
        16px;

    font-weight:
        750;
}


.kc23-store-input:focus {

    border-color:
        var(--kc23-blue);

    box-shadow:
        0 0 0 3px
        rgba(47,97,213,.10);
}


.kc23-store-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.kc23-store-actions
.kc23-btn:last-child {

    grid-column:
        1 / -1;
}


.kc23-btn {

    min-height:
        46px;

    padding:
        8px 12px;

    border:
        1.5px solid
        #C7D1DE;

    border-radius:
        12px;

    color:
        #344159;

    background:
        #FFFFFF;

    font:
        inherit;

    font-weight:
        850;

    cursor:
        pointer;
}


.kc23-btn-primary {

    color:
        #FFFFFF;

    border-color:
        var(--kc23-blue);

    background:
        var(--kc23-blue);
}


.kc23-backup-actions {

    margin-top:
        12px;

    padding-top:
        11px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    border-top:
        1px solid
        #E1E6ED;

    color:
        #68758A;

    font-size:
        13px;
}


.kc23-backup-actions > span {

    margin-right:
        auto;

    font-weight:
        800;
}


.kc23-mini-btn {

    min-height:
        34px;

    padding:
        5px 10px;

    border:
        1px solid
        #C9D2DE;

    border-radius:
        10px;

    color:
        #425069;

    background:
        #FFFFFF;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        800;
}


/* ===========================================================
   手機查看訂單
   =========================================================== */

.kc23-sheet-actions {

    margin:
        10px 0 9px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.kc23-sheet-clear,
.kc23-sheet-share {

    min-height:
        48px;

    border-radius:
        13px;

    font:
        inherit;

    font-weight:
        900;

    cursor:
        pointer;
}


.kc23-sheet-clear {

    color:
        #B93645;

    border:
        1.5px solid
        #E0AAB1;

    background:
        #FFFFFF;
}


.kc23-sheet-share {

    color:
        #244DA8;

    border:
        1.5px solid
        #AFC0E5;

    background:
        #FFFFFF;
}


/*
   複製仍是唯一強綠色 CTA
*/

.kc18-sheet-copy {

    min-height:
        52px !important;

    border-radius:
        14px !important;
}


/* ===========================================================
   桌面分享
   =========================================================== */

.kc23-desktop-share {

    min-height:
        46px;

    margin-right:
        8px;

    padding:
        8px 15px;

    border:
        1.5px solid
        #AFC0E5;

    border-radius:
        12px;

    color:
        #244DA8;

    background:
        #FFFFFF;

    font:
        inherit;

    font-weight:
        850;
}


/* ===========================================================
   Toast
   =========================================================== */

.kc23-toast {

    position:
        fixed;

    z-index:
        10050;

    left:
        50%;

    bottom:
        105px;

    width:
        max-content;

    max-width:
        calc(100vw - 32px);

    min-height:
        48px;

    padding:
        8px 10px 8px 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        1px solid
        #344967;

    border-radius:
        14px;

    color:
        #FFFFFF;

    background:
        #18335E;

    box-shadow:
        0 10px 28px
        rgba(16,35,66,.24);

    opacity:
        0;

    transform:
        translate(-50%, 10px);

    transition:
        .18s ease;

    font-weight:
        800;
}


.kc23-toast.show {

    opacity:
        1;

    transform:
        translate(-50%, 0);
}


.kc23-toast-action {

    min-height:
        34px;

    padding:
        5px 11px;

    border:
        0;

    border-radius:
        9px;

    color:
        #173C86;

    background:
        #FFFFFF;

    font:
        inherit;

    font-weight:
        950;
}


/* ===========================================================
   歷史訂單
   =========================================================== */

.kc23-history-overlay {

    position:
        fixed;

    z-index:
        11000;

    inset:
        0;

    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(15,25,40,.48);

    backdrop-filter:
        blur(5px);
}


.kc23-history-panel {

    width:
        min(620px, 100%);

    max-height:
        min(760px, 90vh);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #FFFFFF;

    box-shadow:
        0 20px 60px
        rgba(15,25,40,.28);
}


.kc23-history-head {

    min-height:
        58px;

    padding:
        0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        #E0E5EC;

    color:
        #172033;

    font-size:
        18px;
}


.kc23-history-close {

    width:
        38px;

    height:
        38px;

    border:
        0;

    border-radius:
        10px;

    color:
        #556277;

    background:
        #F2F5F9;

    font-size:
        18px;
}


.kc23-history-note {

    padding:
        9px 17px;

    color:
        #68758A;

    background:
        #F7F9FC;

    font-size:
        13px;
}


.kc23-history-body {

    padding:
        12px;

    overflow:
        auto;
}


.kc23-history-empty {

    padding:
        35px 15px;

    text-align:
        center;

    color:
        #768297;
}


.kc23-history-card {

    margin-bottom:
        10px;

    padding:
        13px;

    border:
        1px solid
        #D4DCE6;

    border-radius:
        14px;

    background:
        #FFFFFF;
}


.kc23-history-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        #172033;
}


.kc23-history-card-top span {

    color:
        #7A8699;

    font-size:
        12px;
}


.kc23-history-meta {

    margin-top:
        5px;

    color:
        #526078;

    font-size:
        13px;

    font-weight:
        750;
}


.kc23-history-preview {

    max-height:
        105px;

    margin:
        10px 0;

    padding:
        10px;

    overflow:
        auto;

    border-radius:
        10px;

    color:
        #28354C;

    background:
        #F4F7FA;

    white-space:
        pre-wrap;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size:
        12px;
}


.kc23-history-copy {

    min-height:
        38px;

    padding:
        6px 12px;

    border:
        1px solid
        #B6C5E4;

    border-radius:
        10px;

    color:
        #244DA8;

    background:
        #FFFFFF;

    font:
        inherit;

    font-weight:
        850;
}


/* ===========================================================
   手機精修
   =========================================================== */

@media (max-width: 720px) {

    .kc23-store-panel {

        margin:
            10px 17px;
    }


    /*
       底部操作列略縮
       但不犧牲手指點擊範圍
    */

    .mobile-bar {

        min-height:
            76px !important;

        padding-top:
            8px !important;

        padding-bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            ) !important;
    }


    .mobile-preview,
    .mobile-copy {

        min-height:
            48px !important;
    }


    /*
       商品卡稍微再收緊
    */

    .product-card {

        margin-bottom:
            10px !important;
    }


    .kc23-history-overlay {

        padding:
            0;

        align-items:
            flex-end;
    }


    .kc23-history-panel {

        width:
            100%;

        max-height:
            86vh;

        border-radius:
            21px 21px 0 0;
    }


    .kc23-toast {

        bottom:
            calc(
                96px +
                env(safe-area-inset-bottom)
            );
    }

}


/* ===========================================================
   Dark mode
   =========================================================== */

html[data-theme="dark"]
.kc23-store-panel,

html[data-theme="dark"]
.kc23-store-summary,

html[data-theme="dark"]
.kc23-store-input,

html[data-theme="dark"]
.kc23-btn,

html[data-theme="dark"]
.kc23-mini-btn,

html[data-theme="dark"]
.kc23-history-panel,

html[data-theme="dark"]
.kc23-history-card {

    color:
        #EAF0F7;

    border-color:
        #435166;

    background:
        #1D2734;
}


html[data-theme="dark"]
.kc23-store-summary:hover {

    background:
        #25313F;
}


html[data-theme="dark"]
.kc23-backup-actions {

    border-color:
        #3A4759;

    color:
        #AEB9C8;
}


html[data-theme="dark"]
.kc23-history-note,
html[data-theme="dark"]
.kc23-history-preview {

    color:
        #C7D0DC;

    background:
        #26313F;
}


/* KC023 END */





/* KC0234 START */

/* ===========================================================
   快抄 v0.23.4
   手機底部浮動操作列精修
   =========================================================== */

@media (max-width: 720px) {

    /*
     * -------------------------------------------------------
     * 整體浮動列
     * -------------------------------------------------------
     *
     * 原本主要問題：
     * - 高度太厚
     * - 左側資訊偏上
     * - safe-area + padding 疊加造成大量空白
     *
     * 改用 Grid：
     *
     * [ 統計資訊 ] [ 查看 ] [ 複製 ]
     */

    .mobile-bar {

        left:
            12px !important;

        right:
            12px !important;

        bottom:
            max(
                9px,
                env(safe-area-inset-bottom)
            ) !important;


        width:
            auto !important;

        height:
            auto !important;

        min-height:
            86px !important;

        max-height:
            none !important;


        box-sizing:
            border-box !important;


        padding:
            10px 12px !important;


        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            88px
            88px !important;

        align-items:
            center !important;

        justify-content:
            stretch !important;

        gap:
            10px !important;


        border-radius:
            22px !important;


        overflow:
            hidden !important;
    }


    /*
     * -------------------------------------------------------
     * 左側統計
     * -------------------------------------------------------
     *
     * 不論舊版裡面是 div / span 結構，
     * 第一個區塊一律真正垂直置中。
     */

    .mobile-bar > :first-child {

        min-width:
            0 !important;

        height:
            100% !important;

        align-self:
            stretch !important;


        display:
            flex !important;

        flex-direction:
            column !important;

        justify-content:
            center !important;

        align-items:
            flex-start !important;


        gap:
            4px !important;


        padding:
            0 4px !important;

        margin:
            0 !important;


        box-sizing:
            border-box !important;
    }


    /*
     * 「3 品項」
     */

    .mobile-bar small {

        display:
            block !important;

        margin:
            0 !important;

        padding:
            0 !important;


        line-height:
            1.05 !important;

        font-size:
            16px !important;

        font-weight:
            650 !important;
    }


    /*
     * 「3 箱」
     */

    .mobile-bar strong {

        display:
            block !important;

        margin:
            2px 0 0 !important;

        padding:
            0 !important;


        line-height:
            .98 !important;

        font-size:
            31px !important;

        font-weight:
            950 !important;

        white-space:
            nowrap !important;
    }


    /*
     * -------------------------------------------------------
     * 查看 / 複製
     * -------------------------------------------------------
     */

    .mobile-preview,
    .mobile-copy {

        width:
            88px !important;

        min-width:
            88px !important;

        max-width:
            88px !important;


        height:
            64px !important;

        min-height:
            64px !important;

        max-height:
            64px !important;


        padding:
            0 8px !important;

        margin:
            0 !important;


        align-self:
            center !important;


        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;


        box-sizing:
            border-box !important;


        border-radius:
            18px !important;


        line-height:
            1 !important;

        font-size:
            21px !important;

        font-weight:
            950 !important;


        white-space:
            nowrap !important;
    }


    /*
     * 查看
     */

    .mobile-preview {

        color:
            #2854A8 !important;

        background:
            #FFFFFF !important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .85
            ) !important;
    }


    /*
     * 複製
     */

    .mobile-copy {

        color:
            #FFFFFF !important;

        background:
            #19945F !important;

        border:
            1px solid
            #19945F !important;
    }


    /*
     * -------------------------------------------------------
     * 小尺寸手機
     * -------------------------------------------------------
     */

    @media (max-width: 390px) {

        .mobile-bar {

            left:
                9px !important;

            right:
                9px !important;


            grid-template-columns:
                minmax(0, 1fr)
                80px
                80px !important;


            gap:
                8px !important;


            min-height:
                82px !important;


            padding:
                9px 10px !important;
        }


        .mobile-preview,
        .mobile-copy {

            width:
                80px !important;

            min-width:
                80px !important;

            max-width:
                80px !important;


            height:
                60px !important;

            min-height:
                60px !important;

            max-height:
                60px !important;


            border-radius:
                16px !important;


            font-size:
                19px !important;
        }


        .mobile-bar strong {

            font-size:
                29px !important;
        }


        .mobile-bar small {

            font-size:
                15px !important;
        }

    }

}


/* KC0234 END */


/* KC0235 START */

/* ===========================================================
   v0.23.5
   手機底部操作列 — 精簡尺寸
   =========================================================== */

@media (max-width: 720px) {

    .mobile-bar {

        left: 10px !important;
        right: 10px !important;

        bottom:
            max(
                7px,
                env(safe-area-inset-bottom)
            ) !important;

        min-height: 72px !important;

        padding:
            7px 9px !important;

        grid-template-columns:
            minmax(0,1fr)
            74px
            74px !important;

        gap: 7px !important;

        border-radius:
            18px !important;
    }


    /* 左側統計 */

    .mobile-bar > :first-child {

        gap:
            2px !important;

        padding:
            0 3px !important;
    }


    .mobile-bar small {

        font-size:
            14px !important;

        line-height:
            1 !important;

        font-weight:
            650 !important;
    }


    .mobile-bar strong {

        margin:
            1px 0 0 !important;

        font-size:
            26px !important;

        line-height:
            1 !important;
    }


    /* 查看 / 複製 */

    .mobile-preview,
    .mobile-copy {

        width:
            74px !important;

        min-width:
            74px !important;

        max-width:
            74px !important;

        height:
            54px !important;

        min-height:
            54px !important;

        max-height:
            54px !important;

        padding:
            0 5px !important;

        border-radius:
            14px !important;

        font-size:
            17px !important;
    }


    /* 再小尺寸手機 */

    @media (max-width: 390px) {

        .mobile-bar {

            left:
                8px !important;

            right:
                8px !important;

            min-height:
                68px !important;

            padding:
                6px 8px !important;

            grid-template-columns:
                minmax(0,1fr)
                68px
                68px !important;

            gap:
                6px !important;

            border-radius:
                17px !important;
        }


        .mobile-preview,
        .mobile-copy {

            width:
                68px !important;

            min-width:
                68px !important;

            max-width:
                68px !important;

            height:
                50px !important;

            min-height:
                50px !important;

            max-height:
                50px !important;

            border-radius:
                13px !important;

            font-size:
                16px !important;
        }


        .mobile-bar small {

            font-size:
                13px !important;
        }


        .mobile-bar strong {

            font-size:
                24px !important;
        }
    }
}

/* KC0235 END */


/* KC0236 START */

/* ===========================================================
   快抄 v0.23.6
   獨立訂單編輯器
   =========================================================== */


/*
 * features-v023 舊版 Bottom Sheet 功能列隱藏。
 * 門市工作模式、備份、紀錄等其他功能不受影響。
 */

.kc23-sheet-actions {

    display:
        none !important;
}


/* ===========================================================
   查看訂單底部功能
   =========================================================== */

.kc236-actions {

    margin:
        12px 0 9px;
}


.kc236-edit-order {

    width:
        100%;

    min-height:
        48px;

    margin-bottom:
        8px;

    border:
        1.5px solid
        #AEBFE4;

    border-radius:
        12px;

    color:
        #2854B8;

    background:
        #F7F9FC;

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        900;
}


.kc236-actions-secondary {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.kc236-actions-secondary button {

    min-height:
        48px;

    padding:
        7px;

    border-radius:
        12px;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        900;
}


.kc236-clear-order {

    color:
        #B93645;

    border:
        1.5px solid
        #DDA8AF;

    background:
        #FFFFFF;
}


.kc236-share-order {

    color:
        #2854B8;

    border:
        1.5px solid
        #AEBFE4;

    background:
        #FFFFFF;
}


/* ===========================================================
   Editor Overlay
   =========================================================== */

body.kc236-editor-open {

    overflow:
        hidden !important;
}


.kc236-editor-overlay {

    position:
        fixed;

    z-index:
        30000;

    inset:
        0;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    background:
        rgba(
            15,
            25,
            40,
            .54
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.kc236-editor-panel {

    width:
        min(
            680px,
            100%
        );

    max-height:
        90vh;

    padding-bottom:
        env(
            safe-area-inset-bottom
        );

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border-radius:
        22px 22px 0 0;

    background:
        #FFFFFF;

    box-shadow:
        0 -12px 40px
        rgba(
            18,
            31,
            52,
            .22
        );
}


/* ===========================================================
   Header
   =========================================================== */

.kc236-editor-head {

    min-height:
        66px;

    padding:
        11px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border-bottom:
        1px solid
        #DCE3EC;
}


.kc236-editor-head > div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.kc236-editor-head strong {

    color:
        #172033;

    font-size:
        21px;

    font-weight:
        950;
}


.kc236-editor-head span {

    color:
        #738096;

    font-size:
        12px;

    font-weight:
        700;
}


.kc236-editor-close {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 auto;

    border:
        1px solid
        #CCD5E1;

    border-radius:
        12px;

    color:
        #4D5A70;

    background:
        #F6F8FB;

    font:
        inherit;

    font-size:
        20px;

    font-weight:
        900;
}


/* ===========================================================
   Summary
   =========================================================== */

.kc236-editor-summary {

    padding:
        10px 16px 8px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    background:
        #FFFFFF;
}


.kc236-editor-summary > div {

    min-height:
        54px;

    padding:
        7px 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        1px solid
        #D5DDE7;

    border-radius:
        12px;

    background:
        #F7F9FC;
}


.kc236-editor-summary span {

    color:
        #67748A;

    font-size:
        13px;

    font-weight:
        800;
}


.kc236-editor-summary strong {

    color:
        #172033;

    font-size:
        24px;

    font-weight:
        950;
}


/* ===========================================================
   Tip
   =========================================================== */

.kc236-editor-tip {

    margin:
        0 16px 8px;

    padding:
        7px 10px;

    border-radius:
        9px;

    color:
        #526078;

    background:
        #F2F5F9;

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        750;
}


/* ===========================================================
   List
   =========================================================== */

.kc236-editor-list {

    min-height:
        0;

    padding:
        0 14px 12px;

    flex:
        1 1 auto;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;
}


.kc236-editor-row {

    padding:
        12px 2px;

    border-bottom:
        1px solid
        #E0E5EC;

    transition:
        opacity .15s ease;
}


.kc236-editor-row:last-child {

    border-bottom:
        0;
}


.kc236-editor-product {

    margin-bottom:
        8px;

    min-width:
        0;
}


.kc236-editor-name {

    overflow:
        hidden;

    color:
        #172033;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        16px;

    font-weight:
        900;
}


.kc236-editor-code {

    margin-top:
        2px;

    color:
        #31559C;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size:
        13px;

    font-weight:
        850;
}


/* ===========================================================
   Editor controls
   =========================================================== */

.kc236-editor-controls {

    display:
        grid;

    grid-template-columns:
        48px
        minmax(
            68px,
            1fr
        )
        48px
        70px;

    gap:
        7px;
}


.kc236-editor-controls button,
.kc236-editor-controls input {

    height:
        46px;

    box-sizing:
        border-box;

    border-radius:
        11px;

    font:
        inherit;

    font-size:
        16px;

    font-weight:
        950;
}


.kc236-editor-minus {

    color:
        #B93645;

    border:
        1.5px solid
        #DCA7AE;

    background:
        #FFFFFF;
}


.kc236-editor-plus {

    color:
        #FFFFFF;

    border:
        1.5px solid
        #168A59;

    background:
        #168A59;
}


.kc236-editor-qty {

    width:
        100%;

    min-width:
        0;

    padding:
        0 5px;

    outline:
        none;

    border:
        1.5px solid
        #9EB1CC;

    color:
        #172033;

    background:
        #FFFFFF;

    text-align:
        center;

    -moz-appearance:
        textfield;
}


.kc236-editor-qty::-webkit-inner-spin-button,
.kc236-editor-qty::-webkit-outer-spin-button {

    margin:
        0;

    -webkit-appearance:
        none;
}


.kc236-editor-qty:focus {

    border-color:
        #2F61D5;

    box-shadow:
        0 0 0 3px
        rgba(
            47,
            97,
            213,
            .11
        );
}


.kc236-editor-delete {

    color:
        #B93645;

    border:
        1.5px solid
        #DCA7AE;

    background:
        #FFFFFF;
}


.kc236-editor-delete.restore {

    color:
        #2854B8;

    border-color:
        #AFC0E5;

    background:
        #FFFFFF;
}


/* ===========================================================
   Delete state
   =========================================================== */

.kc236-delete-note {

    display:
        none;

    margin-top:
        7px;

    color:
        #B93645;

    font-size:
        12px;

    font-weight:
        800;
}


.kc236-will-delete {

    opacity:
        .62;
}


.kc236-will-delete
.kc236-editor-product {

    text-decoration:
        line-through;
}


.kc236-will-delete
.kc236-delete-note {

    display:
        block;
}


.kc236-will-delete
.kc236-editor-minus {

    opacity:
        .4;

    pointer-events:
        none;
}


/* ===========================================================
   Footer
   =========================================================== */

.kc236-editor-footer {

    padding:
        10px 14px
        max(
            10px,
            env(
                safe-area-inset-bottom
            )
        );

    display:
        grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap:
        9px;

    border-top:
        1px solid
        #DCE3EC;

    background:
        #FFFFFF;
}


.kc236-editor-footer button {

    min-height:
        50px;

    border-radius:
        13px;

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        950;
}


.kc236-editor-cancel {

    color:
        #536078;

    border:
        1.5px solid
        #C8D1DD;

    background:
        #FFFFFF;
}


.kc236-editor-apply {

    color:
        #FFFFFF;

    border:
        1.5px solid
        #2F61D5;

    background:
        #2F61D5;
}


/* ===========================================================
   Toast
   =========================================================== */

.kc236-toast {

    position:
        fixed;

    z-index:
        32000;

    left:
        50%;

    bottom:
        calc(
            88px +
            env(
                safe-area-inset-bottom
            )
        );

    max-width:
        calc(
            100vw - 32px
        );

    padding:
        10px 14px;

    border-radius:
        11px;

    color:
        #FFFFFF;

    background:
        #18335E;

    box-shadow:
        0 7px 22px
        rgba(
            18,
            37,
            69,
            .22
        );

    opacity:
        0;

    transform:
        translate(
            -50%,
            8px
        );

    transition:
        .16s ease;

    font-size:
        14px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.kc236-toast.show {

    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );
}


/* ===========================================================
   Small phone
   =========================================================== */

@media (max-width: 380px) {

    .kc236-editor-controls {

        grid-template-columns:
            44px
            minmax(
                58px,
                1fr
            )
            44px
            64px;

        gap:
            5px;
    }


    .kc236-editor-controls button,
    .kc236-editor-controls input {

        height:
            44px;

        font-size:
            15px;
    }

}


/* ===========================================================
   Dark
   =========================================================== */

html[data-theme="dark"]
.kc236-editor-panel,
html[data-theme="dark"]
.kc236-editor-head,
html[data-theme="dark"]
.kc236-editor-summary,
html[data-theme="dark"]
.kc236-editor-footer {

    background:
        #1D2734;
}


html[data-theme="dark"]
.kc236-editor-head {

    border-color:
        #405064;
}


html[data-theme="dark"]
.kc236-editor-head strong,
html[data-theme="dark"]
.kc236-editor-name,
html[data-theme="dark"]
.kc236-editor-summary strong {

    color:
        #FFFFFF;
}


html[data-theme="dark"]
.kc236-editor-summary > div,
html[data-theme="dark"]
.kc236-editor-tip {

    border-color:
        #435166;

    background:
        #26313F;
}


html[data-theme="dark"]
.kc236-editor-row {

    border-color:
        #394759;
}


html[data-theme="dark"]
.kc236-editor-minus,
html[data-theme="dark"]
.kc236-editor-delete,
html[data-theme="dark"]
.kc236-editor-delete.restore,
html[data-theme="dark"]
.kc236-editor-qty,
html[data-theme="dark"]
.kc236-editor-cancel {

    background:
        #202A37;
}


html[data-theme="dark"]
.kc236-editor-qty {

    color:
        #FFFFFF;

    border-color:
        #596A80;
}


/* KC0236 END */


/* KC025 START */

/* ===========================================================
   快抄 v0.25
   =========================================================== */


/* ===========================================================
   Update banner
   =========================================================== */

.kc237-update-banner {

    position:
        fixed;

    z-index:
        40000;

    left:
        50%;

    top:
        14px;

    width:
        min(
            520px,
            calc(
                100vw - 28px
            )
        );

    box-sizing:
        border-box;

    padding:
        10px;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        38px;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        #B9C8E8;

    border-radius:
        15px;

    background:
        #FFFFFF;

    box-shadow:
        0 12px 34px
        rgba(
            20,
            38,
            72,
            .20
        );

    opacity:
        0;

    transform:
        translate(
            -50%,
            -10px
        );

    transition:
        .18s ease;
}


.kc237-update-banner.show {

    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );
}


.kc237-update-banner > div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.kc237-update-banner strong {

    color:
        #172033;

    font-size:
        14px;

    font-weight:
        950;
}


.kc237-update-banner span {

    overflow:
        hidden;

    color:
        #6A7689;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        11px;
}


.kc237-update-now {

    min-height:
        38px;

    padding:
        6px 12px;

    border:
        0;

    border-radius:
        10px;

    color:
        #FFFFFF;

    background:
        #2F61D5;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        900;
}


.kc237-update-later {

    width:
        38px;

    height:
        38px;

    border:
        0;

    border-radius:
        10px;

    color:
        #536078;

    background:
        #F1F4F8;

    font:
        inherit;

    font-weight:
        900;
}


/* ===========================================================
   Recovery
   =========================================================== */

.kc237-recovery-toast,
.kc024-undo {

    position:
        fixed;

    z-index:
        39000;

    left:
        50%;

    bottom:
        calc(
            86px +
            env(
                safe-area-inset-bottom
            )
        );

    max-width:
        calc(
            100vw - 30px
        );

    padding:
        8px 9px
        8px 14px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border-radius:
        13px;

    color:
        #FFFFFF;

    background:
        #18335E;

    box-shadow:
        0 8px 26px
        rgba(
            18,
            37,
            69,
            .22
        );

    opacity:
        0;

    transform:
        translate(
            -50%,
            7px
        );

    transition:
        .16s ease;

    font-size:
        13px;

    font-weight:
        850;
}


.kc237-recovery-toast.show {

    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );
}


.kc237-recovery-toast button,
.kc024-undo button {

    min-height:
        34px;

    padding:
        5px 11px;

    border:
        0;

    border-radius:
        9px;

    color:
        #244DA8;

    background:
        #FFFFFF;

    font:
        inherit;

    font-weight:
        950;
}


/* ===========================================================
   Repeat bar
   =========================================================== */

.kc024-repeat-bar {

    margin:
        10px 17px;

    padding:
        9px 10px;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        auto;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        #CCD6E3;

    border-radius:
        14px;

    background:
        #FFFFFF;
}


.kc024-repeat-info {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.kc024-repeat-info strong {

    color:
        #26344C;

    font-size:
        13px;

    font-weight:
        900;
}


.kc024-repeat-info span {

    overflow:
        hidden;

    color:
        #748095;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        11px;
}


.kc024-repeat-bar button {

    min-height:
        36px;

    padding:
        5px 10px;

    border:
        1px solid
        #BBC8DC;

    border-radius:
        10px;

    color:
        #3156A8;

    background:
        #F8FAFD;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        900;
}


.kc024-repeat-apply {

    color:
        #FFFFFF !important;

    border-color:
        #2F61D5 !important;

    background:
        #2F61D5 !important;
}


/* ===========================================================
   Quick tools
   =========================================================== */

.kc025-tools {

    margin:
        10px 17px;

    padding:
        10px;

    border:
        1px solid
        #CBD5E2;

    border-radius:
        14px;

    background:
        #FFFFFF;
}


.kc025-quick-row {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        68px;

    gap:
        7px;
}


.kc025-quick-field {

    min-width:
        0;

    height:
        44px;

    padding:
        0 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    box-sizing:
        border-box;

    border:
        1.5px solid
        #B2BED0;

    border-radius:
        11px;

    background:
        #F8FAFD;
}


.kc025-quick-field > span {

    flex:
        0 0 auto;

    font-size:
        14px;
}


.kc025-quick-input {

    width:
        100%;

    min-width:
        0;

    height:
        100%;

    padding:
        0;

    border:
        0;

    outline:
        0;

    color:
        #172033;

    background:
        transparent;

    font:
        inherit;

    font-size:
        16px;

    font-weight:
        750;
}


.kc025-quick-input::placeholder {

    color:
        #8994A5;

    font-size:
        13px;

    font-weight:
        650;
}


.kc025-quick-submit {

    border:
        0;

    border-radius:
        11px;

    color:
        #FFFFFF;

    background:
        #2F61D5;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        900;
}


.kc025-smart-row {

    margin-top:
        8px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.kc025-smart-toggle {

    min-height:
        35px;

    padding:
        5px 10px;

    flex:
        0 0 auto;

    border:
        1px solid
        #BCC8D8;

    border-radius:
        10px;

    color:
        #3F4D64;

    background:
        #FFFFFF;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        900;
}


.kc025-smart-toggle.active {

    color:
        #FFFFFF;

    border-color:
        #2F61D5;

    background:
        #2F61D5;
}


.kc025-smart-row > span {

    min-width:
        0;

    overflow:
        hidden;

    color:
        #7B8799;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        10px;

    font-weight:
        650;
}


/* ===========================================================
   Product highlight
   =========================================================== */

@keyframes kc025Flash {

    0% {

        box-shadow:
            0 0 0 0
            rgba(
                47,
                97,
                213,
                .0
            );
    }

    35% {

        box-shadow:
            0 0 0 4px
            rgba(
                47,
                97,
                213,
                .20
            );
    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(
                47,
                97,
                213,
                0
            );
    }
}


.product-card.kc025-flash {

    animation:
        kc025Flash
        .8s ease;
}


/* ===========================================================
   History / chooser overlay
   =========================================================== */

.kc024-history-overlay,
.kc025-chooser-overlay {

    position:
        fixed;

    z-index:
        41000;

    inset:
        0;

    padding:
        14px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    background:
        rgba(
            15,
            25,
            40,
            .50
        );

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);
}


.kc024-history-panel,
.kc025-chooser-panel {

    width:
        min(
            600px,
            100%
        );

    max-height:
        78vh;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #FFFFFF;

    box-shadow:
        0 18px 50px
        rgba(
            17,
            30,
            50,
            .25
        );
}


.kc024-history-panel header,
.kc025-chooser-panel header {

    min-height:
        58px;

    padding:
        9px 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border-bottom:
        1px solid
        #DFE5ED;
}


.kc024-history-panel header > div,
.kc025-chooser-panel header > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.kc024-history-panel header strong,
.kc025-chooser-panel header strong {

    color:
        #172033;

    font-size:
        18px;

    font-weight:
        950;
}


.kc024-history-panel header span,
.kc025-chooser-panel header span {

    color:
        #7B8799;

    font-size:
        11px;
}


.kc024-history-close,
.kc025-chooser-close {

    width:
        40px;

    height:
        40px;

    border:
        0;

    border-radius:
        10px;

    color:
        #566277;

    background:
        #F2F5F9;

    font:
        inherit;

    font-weight:
        900;
}


.kc024-history-list,
.kc025-chooser-list {

    min-height:
        0;

    padding:
        10px;

    overflow-y:
        auto;
}


.kc024-history-card {

    margin-bottom:
        7px;

    padding:
        10px;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        58px;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        #D6DEE8;

    border-radius:
        12px;
}


.kc024-history-info {

    min-width:
        0;
}


.kc024-history-info > div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;
}


.kc024-history-info strong {

    overflow:
        hidden;

    color:
        #26344C;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;
}


.kc024-history-info span {

    flex:
        0 0 auto;

    color:
        #8893A3;

    font-size:
        10px;
}


.kc024-history-info p {

    margin:
        4px 0 0;

    color:
        #69768A;

    font-size:
        11px;
}


.kc024-history-card > button {

    height:
        38px;

    border:
        0;

    border-radius:
        10px;

    color:
        #FFFFFF;

    background:
        #2F61D5;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        900;
}


.kc024-history-empty {

    padding:
        35px 10px;

    color:
        #778397;

    text-align:
        center;
}


.kc025-chooser-item {

    width:
        100%;

    min-height:
        58px;

    margin-bottom:
        7px;

    padding:
        8px 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border:
        1px solid
        #D5DDE7;

    border-radius:
        11px;

    color:
        #172033;

    background:
        #FFFFFF;

    text-align:
        left;

    font:
        inherit;
}


.kc025-chooser-item > div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.kc025-chooser-item strong {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;

    font-weight:
        900;
}


.kc025-chooser-item span {

    color:
        #4864A0;

    font-size:
        11px;

    font-weight:
        750;
}


.kc025-chooser-item em {

    flex:
        0 0 auto;

    color:
        #67748A;

    font-size:
        12px;

    font-style:
        normal;

    font-weight:
        850;
}


/* ===========================================================
   v0.25 Toast
   =========================================================== */

.kc024-toast,
.kc025-toast {

    position:
        fixed;

    z-index:
        42000;

    left:
        50%;

    bottom:
        calc(
            86px +
            env(
                safe-area-inset-bottom
            )
        );

    max-width:
        calc(
            100vw - 30px
        );

    padding:
        10px 14px;

    border-radius:
        11px;

    color:
        #FFFFFF;

    background:
        #18335E;

    box-shadow:
        0 8px 24px
        rgba(
            18,
            37,
            69,
            .22
        );

    opacity:
        0;

    transform:
        translate(
            -50%,
            7px
        );

    transition:
        .16s ease;

    font-size:
        13px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.kc024-toast.show,
.kc025-toast.show {

    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 390px) {

    .kc024-repeat-bar,
    .kc025-tools {

        margin-left:
            12px;

        margin-right:
            12px;
    }


    .kc024-repeat-bar {

        grid-template-columns:
            minmax(0,1fr)
            auto
            auto;

        padding:
            8px;
    }


    .kc024-repeat-bar button {

        padding:
            4px 8px;
    }


    .kc025-quick-row {

        grid-template-columns:
            minmax(0,1fr)
            60px;
    }

}


/* ===========================================================
   Dark mode
   =========================================================== */

html[data-theme="dark"]
.kc024-repeat-bar,
html[data-theme="dark"]
.kc025-tools,
html[data-theme="dark"]
.kc237-update-banner,
html[data-theme="dark"]
.kc024-history-panel,
html[data-theme="dark"]
.kc025-chooser-panel {

    color:
        #EAF0F7;

    border-color:
        #425166;

    background:
        #1D2734;
}


html[data-theme="dark"]
.kc025-quick-field,
html[data-theme="dark"]
.kc025-smart-toggle,
html[data-theme="dark"]
.kc024-repeat-bar button,
html[data-theme="dark"]
.kc025-chooser-item {

    color:
        #EAF0F7;

    border-color:
        #495A70;

    background:
        #222D3A;
}


html[data-theme="dark"]
.kc025-quick-input {

    color:
        #FFFFFF;
}


/* KC025 END */


/* KC0251 START */

/* ===========================================================
   v0.25.1 Bottom Sheet Scroll Guard
   =========================================================== */

.kc251-scroll-guard {

    /*
     * 捲到頂 / 底後，不讓 overscroll 繼續傳給外層。
     */

    overscroll-behavior-y:
        contain !important;

    touch-action:
        pan-y !important;
}


/*
 * Sheet 內真正可捲動的區塊一樣限制 overscroll。
 */

.kc251-scroll-guard
.kc18-sheet-body,

.kc251-scroll-guard
.kc18-sheet-content,

.kc251-scroll-guard
.order-sheet-content {

    overscroll-behavior-y:
        contain !important;

    -webkit-overflow-scrolling:
        touch;
}


/*
 * 最上方灰色拉桿仍然保留「可拖」的視覺暗示。
 *
 * 內容本身完全不需要顯示拖曳提示。
 */

.kc251-scroll-guard::before {

    pointer-events:
        none;
}


/* KC0251 END */

/* KC028 FINAL START */
/* KC028 START */

.kc0252-x-only {
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

.kc0252-close {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

.kc028-store-flow,
.kc028-tools {
  margin: 10px 17px;
  padding: 10px;
  border: 1px solid #CBD5E2;
  border-radius: 14px;
  background: #FFFFFF;
}

.kc028-store-header {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 9px;
  align-items: center;
}

.kc028-store-nameblock {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc028-store-header strong {
  color: #28354C;
  font-size: 13px;
  font-weight: 950;
}

.kc028-current-store {
  overflow: hidden;
  color: #315BB6;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.kc028-store-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) 54px;
  gap: 6px;
}

.kc028-store-input {
  width: 100%;
  min-width: 0;
  height: 42px;
  box-sizing: border-box;
  padding: 0 9px;
  outline: none;
  border: 1.5px solid #B6C1D1;
  border-radius: 10px;
  color: #172033;
  background: #F8FAFD;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
}

.kc028-store-set,
.kc028-quick-go {
  border: 0;
  border-radius: 10px;
  color: #FFFFFF;
  background: #2F61D5;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.kc028-recent-stores {
  margin-top: 7px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kc028-recent-stores::-webkit-scrollbar {
  display: none;
}

.kc028-recent-stores button {
  min-height: 30px;
  padding: 4px 9px;
  flex: 0 0 auto;
  border: 1px solid #C4CFDE;
  border-radius: 999px;
  color: #526078;
  background: #FFFFFF;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

.kc028-recent-stores button.active {
  color: #FFFFFF;
  border-color: #2F61D5;
  background: #2F61D5;
}

.kc028-store-last {
  min-height: 40px;
  margin-top: 7px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  box-sizing: border-box;
  border-radius: 10px;
  color: #738095;
  background: #F4F7FB;
  font-size: 11px;
  font-weight: 700;
}

.kc028-store-last > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kc028-store-last button {
  min-height: 34px;
  padding: 4px 8px;
  flex: 0 0 auto;
  border: 1px solid #B1C1E2;
  border-radius: 9px;
  color: #2854B8;
  background: #FFFFFF;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
}

.kc028-check-status {
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 9px;
  color: #687589;
  background: #F5F7FA;
  font-size: 11px;
  font-weight: 800;
}

.kc028-check-status.ok {
  color: #176A49;
  background: #EFF8F3;
}

.kc028-check-status.warn {
  color: #A55228;
  background: #FFF3EC;
}

.kc028-store-actions {
  margin-top: 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.kc028-store-actions button {
  min-height: 42px;
  padding: 6px;
  border-radius: 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.kc028-complete {
  color: #176A49;
  border: 1px solid #A8CDB9;
  background: #F2FAF5;
}

.kc028-complete-next {
  color: #2854B8;
  border: 1px solid #B5C4E2;
  background: #F5F8FE;
}

.kc028-quick-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 62px;
  gap: 7px;
}

.kc028-quick-field {
  min-width: 0;
  height: 42px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  border: 1.5px solid #B4C0D1;
  border-radius: 10px;
  background: #F8FAFD;
}

.kc028-quick-input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  outline: 0;
  border: 0;
  color: #172033;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
}

.kc028-quick-input::placeholder {
  color: #8B95A5;
  font-size: 12px;
}

.kc028-smart-row {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.kc028-smart-toggle {
  min-height: 34px;
  padding: 5px 9px;
  flex: 0 0 auto;
  border: 1px solid #BDC8D8;
  border-radius: 9px;
  color: #455268;
  background: #FFFFFF;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.kc028-smart-toggle.active {
  color: #FFFFFF;
  border-color: #2F61D5;
  background: #2F61D5;
}

.kc028-smart-row > span {
  min-width: 0;
  overflow: hidden;
  color: #7A8698;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.kc028-lastqty {
  min-height: 25px;
  margin-left: 5px;
  padding: 3px 7px;
  border: 1px solid #B8C6DF;
  border-radius: 999px;
  color: #365BA6;
  background: #F5F8FE;
  vertical-align: middle;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
}

.kc028-toast {
  position: fixed;
  z-index: 50000;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 28px);
  padding: 8px 9px 8px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  color: #FFFFFF;
  background: #18335E;
  box-shadow: 0 8px 24px rgba(18,37,69,.23);
  opacity: 0;
  transform: translate(-50%,7px);
  transition: .16s ease;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.kc028-toast.show {
  opacity: 1;
  transform: translate(-50%,0);
}

.kc028-toast button {
  min-height: 34px;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  color: #2854B8;
  background: #FFFFFF;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

@media (max-width: 430px) {
  .kc028-store-flow,
  .kc028-tools {
    margin-left: 12px;
    margin-right: 12px;
  }

  .kc028-store-header {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .kc028-store-flow,
html[data-theme="dark"] .kc028-tools {
  color: #EAF0F7;
  border-color: #435166;
  background: #1D2734;
}

html[data-theme="dark"] .kc028-store-input,
html[data-theme="dark"] .kc028-quick-field,
html[data-theme="dark"] .kc028-store-last,
html[data-theme="dark"] .kc028-smart-toggle {
  color: #EAF0F7;
  border-color: #4A5A70;
  background: #222D3A;
}

html[data-theme="dark"] .kc028-store-input,
html[data-theme="dark"] .kc028-quick-input {
  color: #FFFFFF;
}

/* KC028 END */
/* KC028 FINAL END */


/* source: v029-ui.css */
/* ============================================================
   快抄 v0.29
   Mobile Clean UI
   ============================================================ */

#kc029-brand-picker {
    display: none;
}


/* Toast */

#kc029-toast {
    position: fixed;
    left: 50%;
    bottom: calc(
        96px + env(safe-area-inset-bottom)
    );
    transform:
        translate(-50%, 12px);
    z-index: 99999;

    padding: 11px 16px;

    border-radius: 999px;

    background:
        rgba(15, 23, 42, .92);

    color: white;

    font-size: 14px;
    font-weight: 700;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease;
}

#kc029-toast.show {
    opacity: 1;

    transform:
        translate(-50%, 0);
}


@media (max-width: 768px) {

    /*
     * 整體篩選區：
     * 不再讓品牌按鈕佔掉一大區。
     */

    .filter-card {
        padding:
            12px !important;

        border-radius:
            18px !important;
    }


    /*
     * 品牌舊 Tabs：
     * 邏輯仍保留，
     * UI 不顯示。
     */

    #brandTabs.kc029-brand-tabs-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }


    /*
     * 新品項主題下拉
     */

    #kc029-brand-picker {
        display: block;

        margin-top:
            10px;
    }

    .kc029-brand-label {
        display: block;

        margin:
            0 0 6px 2px;

        color:
            #64748b;

        font-size:
            13px;

        font-weight:
            700;
    }

    .kc029-select-wrap {
        position: relative;
    }

    #kc029-brand-select {
        width: 100%;
        min-height: 50px;

        padding:
            0 44px 0 14px;

        appearance: none;
        -webkit-appearance: none;

        border:
            1px solid #cbd5e1;

        border-radius:
            14px;

        background:
            #ffffff;

        color:
            #0f172a;

        font-size:
            17px;

        font-weight:
            700;

        outline: none;
    }

    #kc029-brand-select:focus {
        border-color:
            #3b82f6;

        box-shadow:
            0 0 0 3px
            rgba(59,130,246,.12);
    }

    .kc029-select-arrow {
        position: absolute;

        top: 50%;
        right: 16px;

        transform:
            translateY(-50%);

        color:
            #64748b;

        font-size:
            17px;

        pointer-events: none;
    }


    /*
     * 搜尋框優先
     */

    .search-box {
        margin-bottom:
            8px !important;
    }


    /*
     * 全部 / 常用 / 最近 / 最常用
     * 降低存在感
     */

    .tabs-row {
        display: flex !important;

        gap:
            6px !important;

        overflow-x: auto;

        padding:
            1px 0 3px;

        scrollbar-width: none;
    }

    .tabs-row::-webkit-scrollbar {
        display: none;
    }

    .smart-tab {
        flex:
            0 0 auto !important;

        min-height:
            38px !important;

        padding:
            0 12px !important;

        border-radius:
            11px !important;

        font-size:
            14px !important;
    }


    /*
     * 商品卡片視覺降噪
     */

    .product-card {
        border-radius:
            16px !important;

        box-shadow:
            none !important;
    }

    .product-card:not(.selected) {
        background:
            #ffffff !important;
    }

    .product-brand {
        opacity:
            .72;
    }


    /*
     * 不讓品牌主題色大面積染色。
     */

    .product-card[class*="brand-"] {
        border-color:
            #dbe3ee !important;
    }

    .product-card.selected {
        border-left:
            4px solid #22a06b !important;

        background:
            #ffffff !important;
    }

}


/* Dark mode */

html[data-theme="dark"]
#kc029-brand-select,

html[data-theme="soft"]
#kc029-brand-select {
    background:
        #111827;

    color:
        #f8fafc;

    border-color:
        #334155;
}

/* source: v030-ui.css */
/* 快抄 v0.30｜首頁 UI 精簡 */

@media (max-width:768px){

  /* 主題選單：醒目 + Sticky */
  #kc029-brand-picker{
    display:block !important;
    position:sticky;
    top:6px;
    z-index:40;
    margin:8px 0 12px !important;
    padding:10px !important;
    border:1px solid #b8cbea !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 4px 14px rgba(15,23,42,.06) !important;
  }

  #kc029-brand-picker .kc029-brand-label{
    display:block;
    margin:0 0 6px 2px !important;
    font-size:13px !important;
    font-weight:700 !important;
    color:#64748b !important;
  }

  #kc029-brand-select{
    width:100% !important;
    min-height:54px !important;
    padding:0 46px 0 14px !important;
    border:1px solid #9bb7e5 !important;
    border-radius:13px !important;
    background:#f8fbff !important;
    color:#17376d !important;
    font-size:18px !important;
    font-weight:800 !important;
  }

  #kc029-brand-picker .kc029-select-arrow{
    right:16px !important;
    font-size:20px !important;
    color:#315fae !important;
  }

  /* 舊主題按鈕不再佔畫面 */
  #brandTabs{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
  }

  /* 商品區雙欄 */
  #productGrid,
  .product-grid,
  .products-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  /* 如果實際容器不是上述 class，就利用 has() 補抓 */
  main:has(.product-card) .product-card{
    min-width:0 !important;
  }

  .product-card{
    margin:0 !important;
    padding:11px !important;
    border:1px solid #dbe3ee !important;
    border-left:1px solid #dbe3ee !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  /* 移除品牌彩色側邊裝飾 */
  .product-card::before,
  .product-card::after{
    display:none !important;
  }

  .product-card[class*="brand-"],
  .product-card[data-brand]{
    border-color:#dbe3ee !important;
  }

  .product-card.selected{
    background:#f8fbff !important;
    border-color:#91afe0 !important;
  }

  /* 品名 */
  .product-card .product-name,
  .product-card .item-name,
  .product-card h3,
  .product-card h4{
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* 品牌資訊弱化 */
  .product-card .product-brand{
    font-size:11px !important;
    opacity:.62 !important;
  }

  /* 扣號 / 規格 */
  .product-card .product-code,
  .product-card .code-chip{
    font-size:13px !important;
  }

  /* 數量列 */
  .product-card .quantity-row,
  .product-card .qty-main{
    width:100% !important;
    gap:5px !important;
    margin-top:8px !important;
  }

  .product-card .qty-button{
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:11px !important;
    font-size:19px !important;
  }

  .product-card .qty-input{
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    text-align:center !important;
    font-size:18px !important;
    font-weight:800 !important;
  }

  /* 門店 / 工作環境視覺降噪 */
  .kc028-store-panel,
  #kc028-store-panel,
  .kc028-workflow,
  #kc028-workflow{
    margin:8px 0 12px !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }
}

/* 太窄就退回單欄 */
@media (max-width:365px){
  #productGrid,
  .product-grid,
  .products-grid{
    grid-template-columns:1fr !important;
  }
}

/* 大字體也退回單欄 */
@media (max-width:768px){
  html[data-ui-scale="large"] #productGrid,
  html[data-ui-scale="large"] .product-grid,
  html[data-ui-scale="large"] .products-grid{
    grid-template-columns:1fr !important;
  }
}
/* ===== v0.30 第二階段：實際品項容器 ===== */

@media (max-width:768px){

  .kc030-product-grid-live{
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    align-items:stretch !important;
  }

  .kc030-product-grid-live > .product-card{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .kc030-store-workspace{
    order:initial !important;
    margin:6px 0 10px !important;
    padding-top:0 !important;
    box-shadow:none !important;
  }

  .kc030-store-workspace + #kc029-brand-picker,
  .kc030-store-workspace + .kc030-theme-section{
    margin-top:6px !important;
  }
}

@media (max-width:365px){
  .kc030-product-grid-live{
    grid-template-columns:1fr !important;
  }
}

html[data-ui-scale="large"]
.kc030-product-grid-live{
  grid-template-columns:1fr !important;
}


/* source: v0301-card.css */
/* ============================================================
   快抄 v0.30.1 STEP 1
   High Density Product Card
   ============================================================ */

@media (max-width:768px){

    .kc0301-card{
        padding:10px !important;
        min-height:0 !important;
        gap:5px !important;
    }


    /* 品名 */

    .kc0301-card .product-name,
    .kc0301-card .item-name,
    .kc0301-card h3,
    .kc0301-card h4{
        margin:0 !important;

        font-size:15px !important;
        line-height:1.3 !important;
        font-weight:800 !important;

        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;

        overflow:hidden;
    }


    /* 星號縮小 */

    .kc0301-card
    button[class*="favorite"],
    .kc0301-card
    .favorite-button{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        min-height:36px !important;

        padding:0 !important;

        font-size:20px !important;
    }


    /* 部門 / 扣號 */

    .kc0301-card
    .product-code,
    .kc0301-card
    .code-chip{
        font-size:13px !important;
        line-height:1 !important;
    }


    /* 舊的大「加入」按鈕直接取消 */

    .kc0301-card
    .kc0301-hide-add{
        display:none !important;
    }


    /* 缺量換算收合 */

    .kc0301-restock-toggle{
        width:100%;

        min-height:34px;

        margin:5px 0 2px;

        padding:0 9px;

        border:
            1px solid #d5dfec;

        border-radius:
            10px;

        background:
            #f8fafc;

        color:
            #52677f;

        font-size:
            12px;

        font-weight:
            700;

        text-align:left;
    }


    .kc0301-restock-panel{
        display:none !important;

        margin-top:
            5px !important;
    }


    .kc0301-restock-panel.kc0301-open{
        display:block !important;
    }


    /*
     * 真正主要操作：
     * − / 數量 / ＋
     */

    .kc0301-card
    .quantity-row,
    .kc0301-card
    .qty-main{
        margin-top:
            5px !important;

        gap:
            5px !important;
    }


    .kc0301-card
    .qty-button{
        min-width:
            42px !important;

        height:
            42px !important;

        min-height:
            42px !important;

        border-radius:
            11px !important;

        font-size:
            19px !important;
    }


    .kc0301-card
    .qty-input{
        height:
            42px !important;

        min-height:
            42px !important;

        padding:
            0 4px !important;

        font-size:
            18px !important;

        font-weight:
            800 !important;
    }


    /* 卡片裡過大的分隔空間 */

    .kc0301-card hr{
        margin:
            5px 0 !important;
    }


    /* 次要說明縮小 */

    .kc0301-card
    small,
    .kc0301-card
    .secondary-info,
    .kc0301-card
    .product-note{
        font-size:
            11px !important;

        line-height:
            1.25 !important;
    }

}


/* 365px 以下仍維持 v0.30 的單欄保護 */

@media (max-width:365px){

    .kc0301-card{
        padding:
            11px !important;
    }

}

/* source: v0301-workspace.css */
/* ============================================================
   v0.30.1 STEP 2
   Workspace / Sort Compact
   ============================================================ */

@media (max-width:768px){

    #kc0301-workspace{
        margin:
            8px 0 10px;

        border:
            1px solid #d6e0ed;

        border-radius:
            15px;

        background:
            #fff;

        overflow:
            hidden;
    }


    .kc0301-workspace-head{
        width:
            100%;

        min-height:
            58px;

        padding:
            10px 13px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            10px;

        border:
            0;

        background:
            #fff;

        color:
            #10233f;

        text-align:
            left;
    }


    .kc0301-workspace-main{
        display:
            flex;

        flex-direction:
            column;

        gap:
            2px;

        min-width:
            0;
    }


    .kc0301-workspace-main strong{
        font-size:
            15px;

        font-weight:
            800;
    }


    .kc0301-workspace-summary{
        color:
            #64748b;

        font-size:
            12px;

        line-height:
            1.25;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .kc0301-workspace-arrow{
        flex:
            0 0 auto;

        font-size:
            28px;

        color:
            #4b6ea8;

        transition:
            transform .16s ease;
    }


    #kc0301-workspace.kc0301-open
    .kc0301-workspace-arrow{
        transform:
            rotate(90deg);
    }


    .kc0301-workspace-body{
        padding:
            0 10px 10px;
    }


    .kc0301-workspace-body
    > *{
        margin:
            7px 0 !important;

        box-shadow:
            none !important;
    }


    /* 排序縮成小控制 */

    .kc0301-sort-compact{
        display:
            flex !important;

        align-items:
            center !important;

        gap:
            6px !important;

        margin:
            4px 0 8px !important;

        padding:
            0 !important;
    }


    .kc0301-sort-button{
        min-height:
            38px !important;

        padding:
            0 11px !important;

        border-radius:
            10px !important;

        font-size:
            13px !important;

        font-weight:
            700 !important;
    }


    /*
     * 門店工具裡原本的大卡片
     * 取消多餘陰影和大 margin
     */

    #kc0301-workspace
    section,

    #kc0301-workspace
    article,

    #kc0301-workspace
    .card{
        box-shadow:
            none !important;

        margin:
            6px 0 !important;
    }

}


/* Dark */

html[data-theme="dark"]
#kc0301-workspace,

html[data-theme="soft"]
#kc0301-workspace,

html[data-theme="dark"]
.kc0301-workspace-head,

html[data-theme="soft"]
.kc0301-workspace-head{
    background:
        #111827;

    color:
        #f8fafc;

    border-color:
        #334155;
}

/* source: v0302-stability.css */
/* ============================================================
   快抄 v0.30.2
   Stability + Neutral Selected State
   ============================================================ */

@media (max-width:768px){

    /*
     * --------------------------------------------------------
     * 連續按 + 時避免卡片動畫 / transition 閃爍
     * --------------------------------------------------------
     */

    .product-card,
    .product-card *,
    .qty-button,
    .qty-input{
        animation:none !important;
    }

    .product-card{
        transition:none !important;
    }

    .product-card .qty-button,
    .product-card .qty-input{
        transition:
            background-color .08s linear,
            border-color .08s linear !important;
    }


    /*
     * --------------------------------------------------------
     * 所有舊「選中」顏色徹底中性化
     * --------------------------------------------------------
     */

    .product-card,
    .product-card.selected,
    .product-card.v13-selected-card,
    .product-card[class*="selected"],
    .product-card[class*="brand-"],
    .product-card[data-brand]{
        border:
            1px solid #d7e0ea !important;

        border-left:
            1px solid #d7e0ea !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }


    /*
     * 選取後只用非常輕微的藍灰框
     * 不整張上色
     */

    .product-card.selected,
    .product-card.v13-selected-card{
        border-color:
            #9db4d4 !important;

        outline:
            1px solid rgba(69,104,151,.08);

        outline-offset:
            -1px;
    }


    /*
     * 舊版可能使用 ::before / ::after 畫色條
     */

    .product-card::before,
    .product-card::after,
    .product-card.selected::before,
    .product-card.selected::after,
    .product-card.v13-selected-card::before,
    .product-card.v13-selected-card::after{
        content:none !important;

        display:none !important;

        background:none !important;

        box-shadow:none !important;
    }


    /*
     * 舊已選 Badge 不再用大片顏色
     */

    .product-card
    .field-selected-badge{
        background:
            #eef3f8 !important;

        color:
            #52677f !important;

        border:
            1px solid #d6e0ea !important;

        box-shadow:
            none !important;
    }


    /*
     * --------------------------------------------------------
     * v0301 大加入按鈕繼續隱藏
     * --------------------------------------------------------
     */

    .kc0302-hide-add,
    .kc0301-hide-add{
        display:none !important;
    }


    /*
     * --------------------------------------------------------
     * 數量操作保持穩定尺寸
     * 不因 9 → 10 → 11 改變寬度
     * --------------------------------------------------------
     */

    .product-card
    .qty-main,

    .product-card
    .quantity-row{
        display:grid !important;

        grid-template-columns:
            minmax(44px,1fr)
            minmax(50px,.85fr)
            minmax(44px,1fr) !important;

        gap:
            6px !important;

        width:
            100% !important;
    }


    .product-card
    .qty-button{
        width:
            100% !important;

        min-width:
            0 !important;

        height:
            44px !important;

        min-height:
            44px !important;
    }


    .product-card
    .qty-input{
        width:
            100% !important;

        min-width:
            0 !important;

        height:
            44px !important;

        min-height:
            44px !important;
    }


    /*
     * --------------------------------------------------------
     * Favorite 星號降低搶眼程度
     * --------------------------------------------------------
     */

    .product-card
    .favorite-button,

    .product-card
    button[class*="favorite"]{
        opacity:
            .55 !important;

        transform:
            scale(.88);

        transform-origin:
            center;
    }


    .product-card
    .favorite-button:active,

    .product-card
    button[class*="favorite"]:active{
        opacity:
            .85 !important;
    }


    /*
     * --------------------------------------------------------
     * 缺量換算再弱化
     * --------------------------------------------------------
     */

    .kc0301-restock-toggle{
        min-height:
            32px !important;

        margin:
            4px 0 0 !important;

        background:
            transparent !important;

        border:
            0 !important;

        padding:
            0 2px !important;

        color:
            #64748b !important;

        font-size:
            11px !important;

        font-weight:
            700 !important;
    }


    /*
     * --------------------------------------------------------
     * 商品卡間距再收一點
     * --------------------------------------------------------
     */

    .kc030-product-grid-live{
        gap:
            8px !important;
    }


    .kc0302-card{
        padding:
            10px !important;

        border-radius:
            14px !important;
    }

}


/* 深色 */

html[data-theme="dark"]
.product-card,

html[data-theme="soft"]
.product-card{
    background:
        #111827 !important;

    border-color:
        #334155 !important;
}

html[data-theme="dark"]
.product-card.selected,

html[data-theme="soft"]
.product-card.selected,

html[data-theme="dark"]
.product-card.v13-selected-card,

html[data-theme="soft"]
.product-card.v13-selected-card{
    background:
        #111827 !important;

    border-color:
        #526982 !important;
}

/* source: v0303-polish.css */
/* ============================================================
   快抄 v0.30.3
   Final Mobile Polish
   ============================================================ */

@media (max-width:768px){

    /*
     * ========================================================
     * 商品卡：已選 Badge 改位置
     * 不再卡在品名旁
     * ========================================================
     */

    .product-card{
        position:relative !important;
    }

    .product-card .field-selected-badge{
        position:absolute !important;

        top:72px !important;
        right:12px !important;

        z-index:3;

        min-height:28px !important;

        padding:3px 8px !important;

        border:1px solid #d3dde9 !important;
        border-radius:9px !important;

        background:#f2f6fa !important;

        color:#52677f !important;

        font-size:11px !important;
        line-height:1 !important;
        font-weight:800 !important;

        box-shadow:none !important;

        white-space:nowrap;
    }


    /*
     * 若卡片名稱較短，
     * Badge 仍保持在扣號列右側。
     */

    .product-card .code-chip,
    .product-card .product-code{
        margin-right:64px !important;
    }


    /*
     * 品名右側只留星號空間，
     * 不再替已選 Badge 留空。
     */

    .product-card .product-name,
    .product-card .item-name,
    .product-card h3,
    .product-card h4{
        padding-right:38px !important;
    }


    /*
     * 星號再小一點
     */

    .product-card .favorite-button,
    .product-card button[class*="favorite"]{
        transform:scale(.80) !important;
        opacity:.48 !important;
    }


    /*
     * ========================================================
     * 商品卡留白再收一點
     * ========================================================
     */

    .kc0302-card,
    .kc0301-card,
    .product-card{
        padding:9px !important;
    }

    .kc030-product-grid-live{
        gap:7px !important;
    }

    .product-card hr{
        margin:4px 0 !important;
    }


    /*
     * ========================================================
     * 數量區
     * ========================================================
     */

    .product-card .qty-main,
    .product-card .quantity-row{
        gap:5px !important;
        margin-top:4px !important;
    }

    .product-card .qty-button{
        height:42px !important;
        min-height:42px !important;
    }

    .product-card .qty-input{
        height:42px !important;
        min-height:42px !important;
    }


    /*
     * ========================================================
     * 底部固定訂單列瘦身
     * ========================================================
     */

    .mobile-bar{
        min-height:62px !important;

        padding:6px 8px !important;

        grid-template-columns:
            1fr 68px 68px !important;

        gap:6px !important;

        border-radius:16px !important;
    }

    .mobile-bar small{
        font-size:12px !important;
    }

    .mobile-bar strong{
        font-size:22px !important;
        line-height:1.05 !important;
    }

    .mobile-preview,
    .mobile-copy{
        width:68px !important;
        height:48px !important;

        min-height:48px !important;

        border-radius:12px !important;

        font-size:16px !important;
    }


    /*
     * ========================================================
     * 置頂按鈕縮小
     * ========================================================
     */

    .scroll-top,
    .back-to-top,
    #scrollTopBtn,
    .mobile-top-button{
        width:58px !important;
        height:58px !important;

        min-width:58px !important;
        min-height:58px !important;

        right:12px !important;
        bottom:88px !important;

        font-size:13px !important;
    }


    /*
     * ========================================================
     * 門店工作環境再降存在感
     * ========================================================
     */

    #kc0301-workspace{
        margin:6px 0 8px !important;
    }

    .kc0301-workspace-head{
        min-height:52px !important;
        padding:8px 11px !important;
    }

    .kc0301-workspace-main strong{
        font-size:14px !important;
    }

    .kc0301-workspace-summary{
        font-size:11px !important;
    }


    /*
     * ========================================================
     * 排序列再緊湊
     * ========================================================
     */

    .kc0301-sort-compact{
        gap:5px !important;
        margin:3px 0 6px !important;
    }

    .kc0301-sort-button{
        min-height:34px !important;
        padding:0 9px !important;
        font-size:12px !important;
    }

}


/* 365px 以下：Badge 更靠下避免撞文字 */

@media (max-width:365px){

    .product-card .field-selected-badge{
        top:76px !important;
        right:10px !important;
    }

}


/* Dark mode */

html[data-theme="dark"]
.product-card .field-selected-badge,

html[data-theme="soft"]
.product-card .field-selected-badge{
    background:#182334 !important;
    color:#cbd5e1 !important;
    border-color:#3b4a5f !important;
}

/* source: v0304-polish.css */
/* ============================================================
   快抄 v0.30.4
   Final Alignment / Card Consistency
   ============================================================ */

@media (max-width:768px){

    /* ========================================================
       1. 原始順序 / 商品順序 / 只看已選
       同一水平列、同尺寸
       ======================================================== */

    .kc0301-sort-compact{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:7px !important;
        width:100% !important;
        margin:4px 0 8px !important;
        padding:0 !important;
        align-items:stretch !important;
    }

    .kc0301-sort-compact > *{
        min-width:0 !important;
    }

    .kc0301-sort-button,
    #selectedOnlyButton{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;
        height:48px !important;

        padding:0 8px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        border-radius:12px !important;

        font-size:14px !important;
        line-height:1 !important;
        font-weight:700 !important;

        white-space:nowrap !important;
    }

    #selectedOnlyButton{
        margin:0 !important;
    }

    #selectedOnlyButton .selected-only-label{
        font-size:14px !important;
        font-weight:700 !important;
    }

    #selectedOnlyButton .selected-only-count{
        min-width:22px !important;
        height:22px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:999px !important;

        font-size:12px !important;
        line-height:1 !important;
    }

    /* 如果「只看已選」外層本身佔整行 */
    #selectedOnlyArea{
        display:contents !important;
    }


    /* ========================================================
       2. 商品卡第二列
       部門 / 扣號 / 已選 同一水平
       ======================================================== */

    .product-card{
        position:relative !important;
    }

    /*
     * 取消 v0.30.3 的 absolute 已選位置
     */
    .product-card .field-selected-badge{
        position:static !important;

        top:auto !important;
        right:auto !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:28px !important;

        padding:3px 7px !important;

        margin-left:auto !important;

        border:1px solid #d6e0ea !important;
        border-radius:9px !important;

        background:#f2f6fa !important;

        color:#52677f !important;

        font-size:11px !important;
        line-height:1 !important;
        font-weight:800 !important;

        box-shadow:none !important;

        white-space:nowrap !important;
    }

    /*
     * 找到卡片裡同時含有部門 / 扣號的資訊列
     * 讓它以 flex 方式排列
     */
    .product-card .meta-row,
    .product-card .product-meta,
    .product-card .code-row,
    .product-card .product-info-row{
        display:flex !important;
        align-items:center !important;
        gap:6px !important;
        width:100% !important;
        min-width:0 !important;
        flex-wrap:nowrap !important;
    }

    /*
     * 沒有明確 meta-row class 時，
     * 常見 badge / code 元素仍保持 inline-flex
     */
    .product-card .dept-badge,
    .product-card [class*="department"],
    .product-card .code-chip,
    .product-card .product-code{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:30px !important;

        margin:0 !important;
    }

    .product-card .code-chip,
    .product-card .product-code{
        margin-right:0 !important;
    }


    /* ========================================================
       3. 品名區固定高度
       ======================================================== */

    .product-card .product-name,
    .product-card .item-name,
    .product-card h3,
    .product-card h4{
        min-height:40px !important;
        max-height:40px !important;

        padding-right:32px !important;

        margin:0 !important;

        font-size:15px !important;
        line-height:1.32 !important;
        font-weight:800 !important;

        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }


    /* ========================================================
       4. 收藏星號
       ======================================================== */

    .product-card .favorite-button,
    .product-card button[class*="favorite"]{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        min-height:32px !important;

        padding:0 !important;

        transform:scale(.78) !important;
        opacity:.42 !important;

        transform-origin:center !important;
    }

    .product-card .favorite-button.is-active,
    .product-card button[class*="favorite"].is-active,
    .product-card .favorite-button.active,
    .product-card button[class*="favorite"].active{
        opacity:.82 !important;
    }


    /* ========================================================
       5. 卡片內距與雙欄一致性
       ======================================================== */

    .kc0302-card,
    .kc0301-card,
    .product-card{
        padding:9px !important;
        border-radius:14px !important;
    }

    .kc030-product-grid-live{
        gap:7px !important;
        align-items:stretch !important;
    }

    .kc030-product-grid-live > .product-card{
        height:100% !important;
    }


    /* ========================================================
       6. 底部固定訂單列
       ======================================================== */

    .mobile-bar{
        min-height:60px !important;

        padding:5px 7px !important;

        grid-template-columns:
            1fr 68px 68px !important;

        gap:6px !important;

        border-radius:15px !important;
    }

    .mobile-bar small{
        font-size:12px !important;
    }

    .mobile-bar strong{
        font-size:21px !important;
        line-height:1 !important;
    }

    .mobile-preview,
    .mobile-copy{
        width:68px !important;
        height:48px !important;
        min-height:48px !important;

        border-radius:12px !important;

        font-size:16px !important;
    }


    /* ========================================================
       7. 置頂按鈕
       ======================================================== */

    .scroll-top,
    .back-to-top,
    #scrollTopBtn,
    .mobile-top-button{
        width:54px !important;
        height:54px !important;

        min-width:54px !important;
        min-height:54px !important;

        right:10px !important;
        bottom:80px !important;

        font-size:12px !important;
    }

}


/* ============================================================
   360px 以下 / 大字模式
   排序列退回兩排
   ============================================================ */

@media (max-width:365px){

    .kc0301-sort-compact{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    #selectedOnlyButton{
        grid-column:1 / -1 !important;
    }

}


/* Dark */

html[data-theme="dark"]
.product-card .field-selected-badge,

html[data-theme="soft"]
.product-card .field-selected-badge{
    background:#182334 !important;
    color:#cbd5e1 !important;
    border-color:#3b4a5f !important;
}

/* source: v0305-dom-align.css */
/* ============================================================
   快抄 v0.30.5
   DOM Real Alignment
   ============================================================ */

@media (max-width:768px){

  /* ========================================================
     上方三個控制同一排
     ======================================================== */

  #kc0305-control-row{
    display:grid !important;
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap:7px !important;

    width:100% !important;

    margin:
      6px 0 10px !important;
  }

  #kc0305-control-row
  .kc0305-control-btn{
    width:100% !important;

    min-width:0 !important;
    min-height:48px !important;
    height:48px !important;

    margin:0 !important;
    padding:0 6px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;

    border-radius:12px !important;

    font-size:13px !important;
    line-height:1 !important;
    font-weight:700 !important;

    white-space:nowrap !important;
  }

  #kc0305-control-row
  .selected-only-count{
    min-width:22px !important;
    height:22px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:12px !important;
  }


  /* ========================================================
     商品卡第二列真正同一水平
     ======================================================== */

  .kc0305-meta-row{
    display:grid !important;

    grid-template-columns:
      auto minmax(0,1fr) auto !important;

    align-items:center !important;

    gap:6px !important;

    width:100% !important;

    margin:
      6px 0 8px !important;
  }

  .kc0305-meta-row > *{
    margin:0 !important;
  }

  .kc0305-meta-row
  .field-selected-badge{
    position:static !important;

    top:auto !important;
    right:auto !important;

    min-height:28px !important;

    padding:
      3px 7px !important;

    border-radius:
      9px !important;

    font-size:
      11px !important;

    white-space:
      nowrap !important;

    justify-self:end !important;
  }

  .kc0305-meta-row
  .code-chip,

  .kc0305-meta-row
  .product-code{
    min-width:0 !important;
    width:auto !important;

    margin:0 !important;

    justify-self:start !important;
  }


  /*
   * v0.30.3 / 0.30.4 殘留定位全部覆蓋
   */

  .product-card
  .field-selected-badge{
    position:static !important;

    top:auto !important;
    right:auto !important;

    margin-left:auto !important;
  }

}


/* 365px 仍保持三顆，
   若真的太窄才稍縮字 */

@media (max-width:365px){

  #kc0305-control-row
  .kc0305-control-btn{
    font-size:12px !important;
    padding:0 4px !important;
  }

}

/* source: v0306-product-layout.css */
/* ============================================================
   快抄 v0.30.6
   Product Section Final Layout
   ============================================================ */

@media (max-width:768px){

    /* ========================================================
       商品標題下方的排序列
       ======================================================== */

    #kc0305-control-row.kc0306-control-row{
        display:grid !important;

        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        gap:6px !important;

        width:100% !important;

        margin:
            8px 0 10px !important;

        padding:0 !important;
    }

    #kc0305-control-row
    .kc0305-control-btn{
        min-width:0 !important;
        width:100% !important;

        height:46px !important;
        min-height:46px !important;

        padding:
            0 5px !important;

        margin:0 !important;

        border-radius:
            11px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        gap:3px !important;

        white-space:
            nowrap !important;

        font-size:
            12.5px !important;

        line-height:
            1 !important;

        font-weight:
            700 !important;
    }

    #kc0305-control-row
    .selected-only-label{
        font-size:
            inherit !important;
    }

    #kc0305-control-row
    .selected-only-count{
        flex:
            0 0 auto !important;

        min-width:
            20px !important;

        height:
            20px !important;

        font-size:
            11px !important;
    }


    /* ========================================================
       Metadata 同一水平
       ======================================================== */

    .product-card
    .kc0306-meta-row{
        display:flex !important;

        align-items:center !important;

        flex-wrap:nowrap !important;

        gap:6px !important;

        width:100% !important;
        min-width:0 !important;

        margin:
            6px 0 7px !important;

        padding:
            0 !important;

        overflow:
            hidden !important;
    }

    .kc0306-meta-row > *{
        flex:
            0 0 auto !important;

        min-width:
            0 !important;

        margin:
            0 !important;
    }


    /*
     * 部門
     */

    .kc0306-meta-row
    .dept-badge,

    .kc0306-meta-row
    [class*="department"]{
        min-height:
            30px !important;

        padding:
            0 7px !important;

        display:inline-flex !important;

        align-items:center !important;
        justify-content:center !important;

        white-space:
            nowrap !important;
    }


    /*
     * 扣號
     */

    .kc0306-meta-row
    .code-chip,

    .kc0306-meta-row
    .product-code{
        min-height:
            30px !important;

        padding:
            0 7px !important;

        margin:
            0 !important;

        display:inline-flex !important;

        align-items:center !important;
        justify-content:center !important;

        white-space:
            nowrap !important;
    }


    /*
     * 已選自然靠右：
     * 關鍵是 margin-left:auto，
     * 不使用 absolute。
     */

    .kc0306-meta-row
    .field-selected-badge{
        position:
            static !important;

        top:
            auto !important;

        right:
            auto !important;

        margin:
            0 0 0 auto !important;

        flex:
            0 0 auto !important;

        min-height:
            28px !important;

        padding:
            0 6px !important;

        display:inline-flex !important;

        align-items:center !important;
        justify-content:center !important;

        border-radius:
            8px !important;

        font-size:
            10.5px !important;

        line-height:
            1 !important;

        white-space:
            nowrap !important;
    }


    /*
     * v0.30.3 / 0.30.4 舊定位完全失效
     */

    .product-card
    .field-selected-badge{
        top:
            auto !important;

        right:
            auto !important;
    }


    /* ========================================================
       商品卡其他結構不碰
       ======================================================== */

    .product-card
    .quantity-row,

    .product-card
    .qty-main{
        width:
            100% !important;

        margin-top:
            4px !important;
    }

}


/* ============================================================
   超窄手機仍維持三顆同排
   只縮 gap / 字，不換行
   ============================================================ */

@media (max-width:340px){

    #kc0305-control-row.kc0306-control-row{
        gap:
            4px !important;
    }

    #kc0305-control-row
    .kc0305-control-btn{
        height:
            44px !important;

        min-height:
            44px !important;

        padding:
            0 3px !important;

        font-size:
            11px !important;
    }

    .product-card
    .kc0306-meta-row{
        gap:
            4px !important;
    }

    .kc0306-meta-row
    .field-selected-badge{
        padding:
            0 5px !important;

        font-size:
            10px !important;
    }

}

/* source: v0307-product-name.css */
/* ============================================================
   快抄 v0.30.7
   Product Name Readability
   ============================================================ */

@media (max-width:768px){

    /*
     * 雙欄商品名稱：
     * 原本最多 2 行容易把名稱吃掉。
     * 改成最多 3 行，並使用 responsive 字級。
     */

    .product-card .product-name,
    .product-card .item-name,
    .product-card h3,
    .product-card h4{
        min-height:0 !important;
        max-height:none !important;

        height:auto !important;

        margin:0 !important;

        padding-right:26px !important;

        font-size:
            clamp(13px,3.55vw,15px) !important;

        line-height:
            1.26 !important;

        font-weight:
            800 !important;

        display:-webkit-box !important;

        -webkit-box-orient:
            vertical !important;

        -webkit-line-clamp:
            3 !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;

        word-break:
            break-word !important;

        overflow-wrap:
            anywhere !important;
    }


    /*
     * 圖片稍微收小，
     * 把橫向空間還給商品名稱。
     */

    .product-card
    .product-image,

    .product-card
    .product-icon,

    .product-card
    img{
        max-width:
            46px !important;

        max-height:
            46px !important;
    }


    /*
     * 收藏星號再縮一點，
     * 避免長名稱被它提前截斷。
     */

    .product-card
    .favorite-button,

    .product-card
    button[class*="favorite"]{
        width:
            28px !important;

        height:
            28px !important;

        min-width:
            28px !important;

        min-height:
            28px !important;

        transform:
            scale(.76) !important;
    }


    /*
     * 卡片內 metadata 保持原 v0.30.6 水平排列。
     */

    .product-card
    .kc0306-meta-row{
        margin:
            5px 0 7px !important;
    }

}


/*
 * 320~340px：
 * 這種寬度如果仍是雙欄會太擠，
 * 優先使用單欄，而不是把名稱縮到看不清楚。
 */

@media (max-width:340px){

    .kc030-product-grid-live{
        grid-template-columns:
            1fr !important;
    }

    .product-card .product-name,
    .product-card .item-name,
    .product-card h3,
    .product-card h4{
        font-size:
            15px !important;

        -webkit-line-clamp:
            3 !important;
    }

}

/* source: v0308-qty-colors.css */
/* ============================================================
   快抄 v0.30.8
   Quantity Button Color Balance
   ============================================================ */

@media (max-width:768px){

    /*
     * 減少
     * 原本太淡 → 改成中等柔和紅
     */

    .product-card .qty-button:first-of-type,
    .product-card button[data-action="decrease"],
    .product-card .qty-minus,
    .product-card .minus-btn{
        background:#D96868 !important;
        border-color:#D96868 !important;
        color:#FFFFFF !important;

        box-shadow:none !important;
    }

    .product-card .qty-button:first-of-type:active,
    .product-card button[data-action="decrease"]:active,
    .product-card .qty-minus:active,
    .product-card .minus-btn:active{
        background:#C95757 !important;
        border-color:#C95757 !important;
    }


    /*
     * 增加
     * 原本太深 → 改成比較舒服的中階綠
     */

    .product-card .qty-button:last-of-type,
    .product-card button[data-action="increase"],
    .product-card .qty-plus,
    .product-card .plus-btn{
        background:#2E9B71 !important;
        border-color:#2E9B71 !important;
        color:#FFFFFF !important;

        box-shadow:none !important;
    }

    .product-card .qty-button:last-of-type:active,
    .product-card button[data-action="increase"]:active,
    .product-card .qty-plus:active,
    .product-card .plus-btn:active{
        background:#25845F !important;
        border-color:#25845F !important;
    }


    /*
     * 兩邊視覺重量統一
     */

    .product-card .qty-button{
        font-weight:800 !important;
        text-shadow:none !important;

        transition:
            background-color .08s linear,
            border-color .08s linear !important;
    }

}

/* source: v0309-color-layer.css */
/* ============================================================
   快抄 v0.30.9
   Soft Visual Hierarchy
   ============================================================ */

:root{
    --kc-page:#F5F7FA;
    --kc-zone:#F8FAFD;
    --kc-zone-blue:#F6F9FE;

    --kc-card:#FFFFFF;

    --kc-line:#D8E1EB;
    --kc-line-soft:#E5EBF2;

    --kc-blue:#2F66D8;
    --kc-blue-soft:#EDF4FF;

    --kc-green:#2E9B71;
    --kc-red:#D96868;

    --kc-text:#13213A;
    --kc-muted:#65758B;
}


/* ============================================================
   頁面底色
   ============================================================ */

html,
body{
    background:
        var(--kc-page) !important;
}


/* ============================================================
   工作環境 / 主題
   用非常淡的藍灰區分，避免整站只有白色
   ============================================================ */

#kc0301-workspace,
#kc029-brand-picker,
.kc030-theme-section{
    background:
        var(--kc-zone-blue) !important;

    border-color:
        #D5E1F1 !important;

    box-shadow:
        none !important;
}


/* ============================================================
   商品區
   ============================================================ */

.product-card{
    background:
        var(--kc-card) !important;

    border-color:
        var(--kc-line) !important;

    box-shadow:
        none !important;
}


/*
 * 已選商品不再整張染色。
 * 只靠稍明顯邊框 + Badge + 數量判斷。
 */

.product-card.selected,
.product-card.v13-selected-card{
    background:
        #FFFFFF !important;

    border-color:
        #A7B9CF !important;
}


/* ============================================================
   排序 / 篩選
   ============================================================ */

#kc0305-control-row button,
.kc0301-sort-button{
    background:
        #FFFFFF !important;

    border-color:
        #C9D5E3 !important;

    color:
        #52657E !important;

    box-shadow:
        none !important;
}


/*
 * active 狀態只使用很淡的藍色。
 */

#kc0305-control-row button.active,
#kc0305-control-row button[aria-pressed="true"],
.kc0301-sort-button.active{
    background:
        var(--kc-blue-soft) !important;

    border-color:
        #9EB8E4 !important;

    color:
        #2859A8 !important;
}


/* ============================================================
   Department / Code / Selected Badge
   ============================================================ */

.product-card .dept-badge,
.product-card [class*="department"]{
    background:
        #EDF3FC !important;

    color:
        #315D9C !important;

    border-color:
        transparent !important;
}


.product-card .code-chip,
.product-card .product-code{
    background:
        #F7F9FC !important;

    color:
        #244A7E !important;

    border-color:
        #B8CAE3 !important;
}


.product-card .field-selected-badge{
    background:
        #EEF3F8 !important;

    color:
        #536B84 !important;

    border-color:
        #D5DFE9 !important;
}


/* ============================================================
   + / -
   沿用 v0.30.8 平衡後顏色
   ============================================================ */

.product-card button[data-action="increase"],
.product-card .qty-plus,
.product-card .plus-btn{
    background:
        var(--kc-green) !important;

    border-color:
        var(--kc-green) !important;

    color:
        #FFFFFF !important;
}


.product-card button[data-action="decrease"],
.product-card .qty-minus,
.product-card .minus-btn{
    background:
        var(--kc-red) !important;

    border-color:
        var(--kc-red) !important;

    color:
        #FFFFFF !important;
}


/* 常見 qty-button 第一 / 最後一顆 fallback */

.product-card .qty-button:first-of-type{
    background:
        var(--kc-red) !important;

    border-color:
        var(--kc-red) !important;

    color:
        #FFFFFF !important;
}

.product-card .qty-button:last-of-type{
    background:
        var(--kc-green) !important;

    border-color:
        var(--kc-green) !important;

    color:
        #FFFFFF !important;
}


/* ============================================================
   數量中央欄
   ============================================================ */

.product-card .qty-input{
    background:
        #FFFFFF !important;

    border-color:
        #A8B8CA !important;

    color:
        #15396E !important;
}


/* ============================================================
   底部訂單列
   保留品牌深藍，但降低整頁白藍單調感
   ============================================================ */

.mobile-bar{
    background:
        #1F4479 !important;
}


/* ============================================================
   連續操作期間
   禁止不必要動畫，減少商品跳動感
   ============================================================ */

html.kc0309-order-locked
.product-card{
    transition:
        none !important;

    animation:
        none !important;
}


/* ============================================================
   Dark mode 不強套淺色
   ============================================================ */

html[data-theme="dark"],
html[data-theme="dark"] body{
    background:
        #0F172A !important;
}

html[data-theme="dark"]
.product-card{
    background:
        #111827 !important;

    border-color:
        #334155 !important;
}


/* source: integration-v1.css */
/* 快抄整合版：統一視覺層級與行動鍵盤適配 */
:root {
  --kc-accent: #235fc7;
  --kc-accent-strong: #174a9e;
  --kc-accent-soft: #eaf2ff;
  --kc-ink: #17233a;
  --kc-subtle: #64748b;
  --kc-canvas: #f1f5f9;
  --kc-panel: rgba(255, 255, 255, 0.96);
  --kc-radius: 16px;
  --kc-shadow: 0 12px 32px rgba(30, 48, 78, 0.08);
  --kc-visual-height: 100dvh;
  --kc-keyboard-height: 0px;
}

html { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

body {
  color: var(--kc-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(58, 122, 224, 0.11), transparent 29rem),
    linear-gradient(180deg, #f8fbff 0, var(--kc-canvas) 34rem) !important;
}

.ambient { opacity: 0.35; filter: blur(22px); }

.app-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(248, 251, 255, 0.88) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.brand-logo { border-radius: 14px; box-shadow: 0 7px 18px rgba(35, 95, 199, 0.17); }
.brand-title { letter-spacing: -0.02em; }
.brand-title span {
  color: var(--kc-accent);
  background: var(--kc-accent-soft);
  border: 1px solid #cfdef7;
  border-radius: 999px;
  padding: 3px 8px;
}

.setup-card,
.filter-card,
.order-panel,
.product-card {
  border-color: rgba(148, 163, 184, 0.36) !important;
  border-radius: var(--kc-radius) !important;
  box-shadow: var(--kc-shadow) !important;
}

.setup-card,
.filter-card,
.order-panel { background: var(--kc-panel) !important; }

.channel-button,
.smart-tab,
.brand-tab,
.arrival-shortcuts button,
.toolbar-button {
  min-height: 42px;
  border-radius: 11px !important;
  transition: transform 130ms ease, border-color 130ms ease, background 130ms ease;
}

.channel-button:active,
.smart-tab:active,
.brand-tab:active,
.arrival-shortcuts button:active,
.toolbar-button:active { transform: translateY(1px) scale(0.985); }

.channel-button.active,
.smart-tab.active,
.brand-tab.active {
  background: var(--kc-accent-soft) !important;
  border-color: #9ebcf0 !important;
  color: var(--kc-accent-strong) !important;
}

.search-box:focus-within,
.date-field:focus-within {
  border-color: #7aa6eb !important;
  box-shadow: 0 0 0 4px rgba(35, 95, 199, 0.12) !important;
}

input,
textarea,
select,
button { font: inherit; }

input,
textarea,
select { font-size: max(16px, 1em) !important; }

.product-card {
  overflow: clip;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-2px);
    border-color: #aebfd3 !important;
    box-shadow: 0 16px 36px rgba(30, 48, 78, 0.12) !important;
  }
}

.product-card.selected,
.product-card.v13-selected-card {
  border-color: #79a4e8 !important;
  box-shadow: 0 0 0 3px rgba(35, 95, 199, 0.08), var(--kc-shadow) !important;
}

.copy-button,
.mobile-copy {
  background: linear-gradient(135deg, #286dd9, #174da5) !important;
  box-shadow: 0 9px 22px rgba(35, 95, 199, 0.25) !important;
}

.mobile-bar {
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: transform 180ms ease, bottom 180ms ease;
}

.kc-keyboard-open .mobile-bar {
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  transform: translateY(0) !important;
}

.kc-keyboard-open .app-shell {
  padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
}

.kc-keyboard-open .order-panel { max-height: calc(var(--kc-visual-height) - 24px); }

@media (max-width: 760px) {
  html, body { min-height: var(--kc-visual-height); }
  body { overscroll-behavior-y: contain; }

  .app-header { position: sticky; top: 0; z-index: 80; }
  .header-inner { gap: 8px; }
  .brand-subtitle { display: none; }
  .brand-title span { font-size: 10px; }

  .app-shell {
    padding-inline: 10px !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }

  .setup-card,
  .filter-card { border-radius: 14px !important; }

  .setup-main { gap: 10px !important; }
  .search-box { min-height: 48px; }
  #searchInput { height: 46px; }

  .tabs-row,
  .brand-tabs {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .tabs-row::-webkit-scrollbar,
  .brand-tabs::-webkit-scrollbar { display: none; }
  .tabs-row > *,
  .brand-tabs > * { scroll-snap-align: start; }

  .product-grid { gap: 10px !important; }
  .product-card { min-width: 0; }

  .mobile-bar {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    border-radius: 17px !important;
    padding: 10px !important;
    box-shadow: 0 18px 46px rgba(15, 31, 55, 0.2) !important;
  }

  .mobile-preview,
  .mobile-copy { min-height: 46px; min-width: 72px; border-radius: 12px !important; }

  body.kc-input-active .ambient { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 手機設定視窗：不能被固定頁首遮住，關閉鈕始終可見。 */
#settingsOverlay {
  z-index: 2200 !important;
}

@media (max-width: 700px) {
  #settingsOverlay {
    align-items: flex-end !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  #settingsOverlay .settings-panel {
    width: 100% !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 22px !important;
    padding: 0 16px max(22px, env(safe-area-inset-bottom)) !important;
  }

  #settingsOverlay .settings-head {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -16px;
    padding: max(16px, env(safe-area-inset-top)) 16px 14px;
    background: var(--surface, #ffffff);
    box-shadow: 0 1px 0 var(--border, #d8e1dc);
  }

  #settingsOverlay #closeSettings {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    margin: 0;
    border-radius: 14px;
    font-size: 26px;
    line-height: 1;
    touch-action: manipulation;
  }
}