/* =============================================================================
* Lucent UI · lucent-ui.css · v1.1
* SketchUp 材質庫外掛設計系統 — 語意化 class 元件庫（含響應式 utility）
*
* 用法：像 Bootstrap / Tailwind 一樣，工程師只需寫 class，不用寫 CSS。
*
*
* …
*
* 所有數值皆由下方 :root 的 design tokens 驅動，改一處即可全站換色/換字。
* Tokens 來源：Figma「sketchup_設計元件」檔全元件庫逐一萃取校準（v1.1）。
*
* 響應式斷點（mobile-first；media query 無法用 CSS 變數，修改請全域搜尋替換）：
* sm ≥ 480px md ≥ 768px lg ≥ 1024px
* 響應式 utility 前綴寫法同 Tailwind：class="lct-hidden md:lct-flex"
* ========================================================================== */
/* 中文字型（可自行改成本地字型以離線使用）*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
/* -----------------------------------------------------------------------------
* 1. Design Tokens
* -------------------------------------------------------------------------- */
:root {
/* 品牌主色（Figma: #d32f2f）*/
--lct-primary: #d32f2f;
--lct-primary-hover: #b71c1c;
--lct-primary-active: #a31515;
--lct-primary-soft: rgba(211, 47, 47, 0.30); /* disabled / 次要 */
--lct-primary-tint: rgba(211, 47, 47, 0.08); /* 淡背景 */
/* 文字 */
--lct-ink: #2b2b2b; /* 主要文字 / 深色按鈕底 */
--lct-ink-hover: #000000; /* 深色按鈕 hover 底（Figma 搜尋鈕）*/
--lct-text-secondary: #5b5b5b; /* 次要文字（項數等）*/
--lct-muted: #8a8278; /* placeholder / 停用 */
--lct-placeholder: rgba(91, 91, 91, 0.7); /* 輸入框 placeholder（Figma）*/
--lct-footer-ink: #5a4a36; /* Footer 按鈕文字（Figma footer-btn）*/
/* 介面 */
--lct-surface: #ffffff; /* 卡片 / 面板 */
--lct-surface-hover: #fafafa; /* 次要按鈕 hover 底 */
--lct-bg: #f6f6f8; /* 頁面底（Figma --背景色）*/
--lct-border: #d2d2d7; /* 標準邊框（卡片 / 輸入框）*/
--lct-border-soft: #ececef; /* 淺邊框（搜尋框 / 選單，Figma）*/
--lct-border-strong: #b8b8bf;
--lct-line-soft: #ece6dc; /* 看板卡空格底（Figma --line-soft）*/
--lct-white: #ffffff;
--lct-hover-tint: rgba(91, 91, 91, 0.05); /* 選單 / 透明 hover 底（Figma）*/
--lct-cell-tint: rgba(91, 91, 91, 0.10); /* 報價表格頭底 / 框線（Figma）*/
--lct-scrim-bg: rgba(0, 0, 0, 0.4); /* 遮罩底 */
/* 語意色（通知列，Figma 校準：底 / 邊框 / 文字三件組）*/
--lct-success: #1e8e3e; /* 邊框 / 圖示 */
--lct-success-text: #137333;
--lct-success-bg: #e9f4ea;
--lct-error: #d93025; /* 邊框 / 圖示 */
--lct-error-text: #c5221f;
--lct-error-bg: #fcebea;
--lct-warning: #ed6c02;
--lct-warning-text: #9a4a00;
--lct-warning-bg: #fff4e5;
--lct-info: #0288d1;
--lct-info-text: #01579b;
--lct-info-bg: #e5f4fd;
/* 字級 / 行高（Figma: 10/11/12/13/14/16）*/
--lct-font-family: 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
--lct-fs-caption: 11px; --lct-lh-caption: 16px;
--lct-fs-sm: 12px; --lct-lh-sm: 18px;
--lct-fs-md: 13px; --lct-lh-md: 18px; /* 按鈕 / 選單 / 對話框內文 */
--lct-fs-base: 14px; --lct-lh-base: 20px;
--lct-fs-title: 16px; --lct-lh-title: 22px;
--lct-fw-regular: 400;
--lct-fw-medium: 500;
--lct-fw-bold: 700;
/* 間距（4 的倍數階梯）*/
--lct-space-1: 4px;
--lct-space-2: 6px;
--lct-space-3: 8px;
--lct-space-4: 10px;
--lct-space-5: 12px;
--lct-space-6: 16px;
--lct-space-7: 20px;
--lct-space-8: 24px;
/* 圓角（Figma: panel/toast/dialog 4 / sm 6 / md 8 / cover 16）*/
--lct-radius-panel: 4px;
--lct-radius-sm: 6px;
--lct-radius-md: 8px;
--lct-radius-lg: 16px;
--lct-radius-pill: 999px;
/* 陰影（Figma Drop Shadow/100 = 0 1px 2px rgba(12,12,13,.05)）*/
--lct-shadow-sm: 0 1px 2px rgba(12, 12, 13, 0.05);
--lct-shadow-up: 0 -1px 2px rgba(12, 12, 13, 0.05); /* Footer 動作列 */
--lct-shadow-md: 0 4px 12px rgba(12, 12, 13, 0.10);
--lct-shadow-lg: 0 8px 24px rgba(12, 12, 13, 0.14);
--lct-shadow-dialog: 0 10px 30px rgba(0, 0, 0, 0.25); /* 確認對話框（Figma）*/
--lct-shadow-float: 0 1px 2px rgba(0, 0, 0, 0.15); /* 愛心浮鈕（Figma）*/
/* 尺寸（元件高度 / 寬度）*/
--lct-shell-width: 420px; /* 面板寬度（外掛殼層 --panel 模式）*/
--lct-header-h: 68px; /* Header 高度 */
--lct-control-h: 32px; /* 搜尋框 / 搜尋鈕等控制項高度 */
--lct-footer-h: 80px; /* Footer 動作列高度（Figma）*/
/* z-index */
--lct-z-dropdown: 1000;
--lct-z-scrim: 1040;
--lct-z-modal: 1050;
--lct-z-toast: 1080;
}
/* -----------------------------------------------------------------------------
* 2. 基礎 (scoped，避免污染宿主頁面；套用範圍以 .lct-root 或元件自身為主)
* -------------------------------------------------------------------------- */
.lct-root,
[class*="lct-"] {
box-sizing: border-box;
}
.lct-root {
font-family: var(--lct-font-family);
font-size: var(--lct-fs-base);
line-height: var(--lct-lh-base);
color: var(--lct-ink);
-webkit-font-smoothing: antialiased;
}
/* 文字輔助 class */
.lct-title { font-size: var(--lct-fs-title); line-height: var(--lct-lh-title); font-weight: var(--lct-fw-bold); color: var(--lct-ink); margin: 0; }
.lct-subtitle { font-size: var(--lct-fs-base); line-height: var(--lct-lh-base); font-weight: var(--lct-fw-medium); color: var(--lct-ink); margin: 0; }
.lct-text { font-size: var(--lct-fs-base); line-height: var(--lct-lh-base); color: var(--lct-ink); margin: 0; }
.lct-text-muted{ color: var(--lct-text-secondary); }
.lct-caption { font-size: var(--lct-fs-caption); line-height: var(--lct-lh-caption); color: var(--lct-text-secondary); margin: 0; }
/* -----------------------------------------------------------------------------
* 3. 外掛殼層 & Header
* -------------------------------------------------------------------------- */
/* 預設流動寬度（響應式）；要固定 420px 面板寬加 .lct-shell--panel */
.lct-shell {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: var(--lct-bg);
font-family: var(--lct-font-family);
color: var(--lct-ink);
overflow: hidden;
}
.lct-shell--panel { width: var(--lct-shell-width); max-width: 100%; }
.lct-shell__body { flex: 1 1 auto; overflow-y: auto; }
/* Header（Figma 6:7：白底、16px 內距、Drop Shadow/100）*/
.lct-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--lct-space-3);
height: var(--lct-header-h);
padding: 0 var(--lct-space-6);
background: var(--lct-surface);
box-shadow: var(--lct-shadow-sm);
position: relative;
z-index: 1;
}
.lct-header__title { font-size: var(--lct-fs-title); font-weight: var(--lct-fw-bold); }
.lct-header__logo { height: 30px; display: block; }
.lct-header__actions { display: flex; align-items: center; gap: var(--lct-space-3); }
/* -----------------------------------------------------------------------------
* 4. 按鈕
* -------------------------------------------------------------------------- */
/* 基準：Figma Auth Button（padding 6/14、radius 6、13px Medium、行高 18）*/
.lct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--lct-space-2);
padding: var(--lct-space-2) 14px;
font-family: var(--lct-font-family);
font-size: var(--lct-fs-md);
line-height: var(--lct-lh-md);
font-weight: var(--lct-fw-medium);
border: 1px solid transparent;
border-radius: var(--lct-radius-sm);
cursor: pointer;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
user-select: none;
}
.lct-btn:disabled,
.lct-btn.is-disabled { cursor: not-allowed; opacity: 1; }
/* 主要（紅底白字，Figma 登入鈕）*/
.lct-btn--primary { background: var(--lct-primary); color: var(--lct-white); }
.lct-btn--primary:hover { background: var(--lct-primary-hover); }
.lct-btn--primary:active { background: var(--lct-primary-active); }
.lct-btn--primary:disabled,
.lct-btn--primary.is-disabled{ background: var(--lct-primary-soft); }
/* 深色（墨底白字，Figma 登出鈕 / 搜尋鈕同色系；hover 變全黑）*/
.lct-btn--dark { background: var(--lct-ink); color: var(--lct-white); }
.lct-btn--dark:hover { background: var(--lct-ink-hover); }
/* Ghost（透明底、紅框紅字 — 補充變體，Figma 無此元件）*/
.lct-btn--ghost { background: transparent; color: var(--lct-primary); border-color: var(--lct-primary); }
.lct-btn--ghost:hover { background: var(--lct-primary-tint); }
/* 次要（白底灰框，Figma 對話框「取消」鈕）*/
.lct-btn--secondary { background: var(--lct-surface); color: var(--lct-ink); border-color: var(--lct-border); }
.lct-btn--secondary:hover { border-color: var(--lct-border-strong); background: var(--lct-surface-hover); }
/* 危險確認（Figma「確認移除」鈕，同主色）*/
.lct-btn--danger { background: #d32f2f; color: var(--lct-white); }
.lct-btn--danger:hover { background: var(--lct-primary-hover); }
/* 尺寸 */
.lct-btn--sm { padding: 5px var(--lct-space-5); font-size: var(--lct-fs-sm); line-height: var(--lct-lh-sm); }
.lct-btn--lg { padding: 9px var(--lct-space-6); font-size: var(--lct-fs-base); line-height: var(--lct-lh-base); }
.lct-btn--block { display: flex; width: 100%; }
/* Icon Button（純圖示方鈕，Figma：36px、padding 6、radius 8、icon 20）*/
.lct-icon-btn {
--lct-icon-btn-size: 36px; /* 可覆寫 */
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--lct-icon-btn-size);
height: var(--lct-icon-btn-size);
padding: 0;
border: none;
border-radius: var(--lct-radius-md);
background: transparent;
color: var(--lct-ink);
cursor: pointer;
transition: background-color .15s ease;
}
.lct-icon-btn:hover { background: var(--lct-hover-tint); }
.lct-icon-btn--active { color: var(--lct-primary); }
.lct-icon-btn .lct-icon { --lct-icon-size: 20px; }
/* 浮起（白底 + 陰影，Figma 收藏夾詳情「更多」鈕：30px、radius 6）*/
.lct-icon-btn--raised {
background: var(--lct-surface);
border-radius: var(--lct-radius-sm);
box-shadow: var(--lct-shadow-sm);
}
.lct-icon-btn--raised:hover { background: var(--lct-surface-hover); }
/* 返回鈕（Figma 收藏夾詳情：白底、高 32、radius 6、icon 14 + 12px Medium）*/
.lct-back-btn {
display: inline-flex;
align-items: center;
gap: 2px;
height: var(--lct-control-h);
padding: 5px 12px 5px 8px;
border: none;
border-radius: var(--lct-radius-sm);
background: var(--lct-surface);
box-shadow: var(--lct-shadow-sm);
color: var(--lct-ink);
font-family: var(--lct-font-family);
font-size: var(--lct-fs-sm);
font-weight: var(--lct-fw-medium);
cursor: pointer;
transition: background-color .15s ease;
}
.lct-back-btn:hover { background: var(--lct-surface-hover); }
.lct-back-btn .lct-icon { --lct-icon-size: 14px; }
/* -----------------------------------------------------------------------------
* 5. 圖示
* -------------------------------------------------------------------------- */
.lct-icon {
display: inline-block;
width: var(--lct-icon-size, 18px);
height: var(--lct-icon-size, 18px);
vertical-align: middle;
fill: currentColor;
flex-shrink: 0;
}
.lct-icon--sm { --lct-icon-size: 15px; }
.lct-icon--lg { --lct-icon-size: 28px; }
/* 收藏愛心（Figma：28px 圓形白底浮鈕 + 陰影、icon 15px）*/
.lct-favorite {
--lct-fav-size: 28px; /* 可覆寫 */
--lct-fav-bg: rgba(255, 255, 255, 0.9); /* 可覆寫；設 transparent 變純圖示 */
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--lct-fav-size);
height: var(--lct-fav-size);
border: none;
border-radius: var(--lct-radius-pill);
background: var(--lct-fav-bg);
box-shadow: var(--lct-shadow-float);
color: var(--lct-ink);
cursor: pointer;
transition: color .15s ease, transform .1s ease;
}
.lct-favorite .lct-icon { --lct-icon-size: 15px; }
.lct-favorite:hover { transform: scale(1.08); }
.lct-favorite.is-active,
.lct-favorite[aria-pressed="true"] { color: var(--lct-primary); }
.lct-favorite--bare { --lct-fav-bg: transparent; box-shadow: none; }
/* -----------------------------------------------------------------------------
* 6. Tab Bar（Figma 5:2 校準：頂部橫向、白底、padding 10、gap 4、
* 底線 1px #f6f6f8 + Drop Shadow/100；item 高 24、padding 4/7、
* icon 16 + 12px Medium；active = 灰膠囊底 + 墨色字）
* -------------------------------------------------------------------------- */
.lct-tabbar {
display: flex;
align-items: center;
gap: var(--lct-space-1);
padding: var(--lct-space-4);
background: var(--lct-surface);
border-bottom: 1px solid var(--lct-bg);
box-shadow: var(--lct-shadow-sm);
position: relative;
z-index: 1;
}
.lct-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--lct-space-1);
height: 24px;
padding: var(--lct-space-1) 7px;
border: none;
background: transparent;
color: var(--lct-placeholder);
font-family: var(--lct-font-family);
font-size: var(--lct-fs-sm);
line-height: var(--lct-lh-sm);
font-weight: var(--lct-fw-medium);
white-space: nowrap;
border-radius: var(--lct-radius-panel);
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
.lct-tab .lct-icon { --lct-icon-size: 16px; }
.lct-tab:hover { color: var(--lct-ink); }
.lct-tab.is-active,
.lct-tab[aria-selected="true"] { color: var(--lct-ink); background: var(--lct-cell-tint); }
/* 平均撐滿變體（需要類底部導覽的分佈時使用）*/
.lct-tabbar--justified .lct-tab { flex: 1 1 0; }
/* -----------------------------------------------------------------------------
* 7. 搜尋列（Figma 76:266：白底輸入框 + 墨色搜尋鈕，高 32、radius 4）
* -------------------------------------------------------------------------- */
.lct-searchbar {
display: flex;
align-items: center;
gap: var(--lct-space-3);
padding: var(--lct-space-4);
background: var(--lct-surface);
}
.lct-search {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: var(--lct-space-2);
height: var(--lct-control-h);
padding: 0 var(--lct-space-4);
background: var(--lct-surface);
border: 1px solid var(--lct-border-soft);
border-radius: var(--lct-radius-panel);
box-shadow: var(--lct-shadow-sm);
}
.lct-search .lct-icon { --lct-icon-size: 16px; color: var(--lct-muted); }
.lct-search input {
flex: 1 1 auto;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-family: var(--lct-font-family);
font-size: var(--lct-fs-md);
color: var(--lct-ink);
}
.lct-search input::placeholder { color: var(--lct-placeholder); }
/* 搜尋按鈕（Figma：墨底 #2b2b2b、hover 全黑、padding 7/18、radius 4、13px Medium）*/
.lct-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--lct-space-2);
height: var(--lct-control-h);
padding: 0 18px;
border: none;
border-radius: var(--lct-radius-panel);
background: var(--lct-ink);
color: var(--lct-white);
font-family: var(--lct-font-family);
font-size: var(--lct-fs-md);
font-weight: var(--lct-fw-medium);
cursor: pointer;
transition: background-color .15s ease;
}
.lct-search-btn:hover { background: var(--lct-ink-hover); }
/* -----------------------------------------------------------------------------
* 8. 表單輸入
* -------------------------------------------------------------------------- */
.lct-input {
width: 100%;
padding: var(--lct-space-3) var(--lct-space-4);
font-family: var(--lct-font-family);
font-size: var(--lct-fs-base);
line-height: var(--lct-lh-base);
color: var(--lct-ink);
background: var(--lct-surface);
border: 1px solid var(--lct-border);
border-radius: var(--lct-radius-sm);
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.lct-input::placeholder { color: var(--lct-muted); }
.lct-input:focus { border-color: var(--lct-primary); box-shadow: 0 0 0 2px var(--lct-primary-tint); }
/* Checkbox（Figma：18px、radius 4、勾選 = 紅底無框）*/
.lct-checkbox { --lct-checkbox-size: 18px; display: inline-flex; align-items: center; gap: var(--lct-space-3); cursor: pointer; user-select: none; }
.lct-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.lct-checkbox__box {
width: var(--lct-checkbox-size); height: var(--lct-checkbox-size);
border: 1px solid var(--lct-border);
border-radius: 4px;
background: var(--lct-surface);
display: inline-flex; align-items: center; justify-content: center;
transition: background-color .15s ease, border-color .15s ease;
}
.lct-checkbox__box::after {
/* 勾勾隨 --lct-checkbox-size 等比縮放 */
content: "";
width: calc(var(--lct-checkbox-size) * 0.56);
height: calc(var(--lct-checkbox-size) * 0.33);
border-left: 2px solid var(--lct-white);
border-bottom: 2px solid var(--lct-white);
transform: rotate(-45deg) translateY(-1px);
opacity: 0;
}
.lct-checkbox input:checked + .lct-checkbox__box {
background: var(--lct-primary);
border-color: var(--lct-primary);
}
.lct-checkbox input:checked + .lct-checkbox__box::after { opacity: 1; }
/* -----------------------------------------------------------------------------
* 9. 卡片
* -------------------------------------------------------------------------- */
.lct-card {
background: var(--lct-surface);
border: 1px solid var(--lct-border);
border-radius: var(--lct-radius-md);
overflow: hidden;
}
/* 材質卡（Figma 139:198：縮圖滿版、名稱壓底半透明黑條、radius 6、
* 選取 = 邊框換墨色 #2b2b2b、愛心浮鈕右上內縮 6px）
* 寬度不寫死：單獨使用時由 --lct-mcard-min / --lct-mcard-max 夾住；
* 放進 .lct-material-grid 時寬度完全交給格線。 */
.lct-material-card {
/* 可覆寫參數 */
--lct-mcard-min: 96px; /* 最小寬 */
--lct-mcard-max: 160px; /* 最大寬 */
--lct-mcard-bg: var(--lct-surface); /* 卡片底色 */
--lct-mcard-border: var(--lct-border); /* 邊框色 */
--lct-mcard-radius: var(--lct-radius-sm); /* 圓角（Figma: 6px）*/
--lct-mcard-thumb-ratio: 1 / 1; /* 縮圖比例 */
--lct-mcard-label-bg: rgba(0, 0, 0, 0.45); /* 名稱條底（Figma）*/
--lct-mcard-label-fs: var(--lct-fs-sm); /* 名稱字級 12px */
--lct-mcard-selected: var(--lct-ink); /* 選取邊框色（Figma: #2b2b2b）*/
--lct-mcard-fav-offset: 6px; /* 收藏鈕內縮 */
position: relative;
width: 100%;
min-width: var(--lct-mcard-min);
max-width: var(--lct-mcard-max);
background: var(--lct-mcard-bg);
border: 1px solid var(--lct-mcard-border);
border-radius: var(--lct-mcard-radius);
overflow: hidden;
cursor: pointer;
padding: 0;
transition: border-color .15s ease, box-shadow .15s ease;
}
.lct-material-card:hover { box-shadow: var(--lct-shadow-md); }
.lct-material-card.is-selected { border-color: var(--lct-mcard-selected); }
.lct-material-card__thumb {
width: 100%; aspect-ratio: var(--lct-mcard-thumb-ratio);
background: var(--lct-bg) center/cover no-repeat;
display: block;
}
/* 名稱條：壓在縮圖底部（Figma：高 26、padding 6/8、白字 12px）*/
.lct-material-card__label {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex; align-items: center;
min-height: 26px;
padding: var(--lct-space-2) var(--lct-space-3);
background: var(--lct-mcard-label-bg);
font-size: var(--lct-mcard-label-fs);
line-height: 1.2;
color: var(--lct-white);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lct-material-card__fav { position: absolute; top: var(--lct-mcard-fav-offset); right: var(--lct-mcard-fav-offset); }
/* 材質卡格線容器（父元素）
* 預設 auto 模式：依 --lct-mgrid-min 自動決定一行幾張、卡片平均撐滿；
* 搭配 .lct-cols-N（含 sm:/md:/lg: 響應式變體）固定一行 N 張。
* Figma 材料庫實際版面：3 欄、gap 12(直) × 10(橫)。 */
.lct-material-grid {
--lct-mgrid-cols: auto-fill; /* 一行幾張；auto-fill = 依寬度自動 */
--lct-mgrid-min: 96px; /* auto 模式：每張卡最小寬 */
--lct-mgrid-gap-y: var(--lct-space-5); /* 直向間距（Figma: 12px）*/
--lct-mgrid-gap-x: var(--lct-space-4); /* 橫向間距（Figma: 10px）*/
display: grid;
gap: var(--lct-mgrid-gap-y) var(--lct-mgrid-gap-x);
grid-template-columns: repeat(var(--lct-mgrid-cols), minmax(var(--lct-mgrid-min), 1fr));
}
/* 格線內的卡片（材質卡 / 看板卡…）寬度交給格線決定 */
.lct-material-grid > * { min-width: 0; max-width: none; }
/* 收藏看板卡（Figma 143:232：無底無框、封面 radius 16、直向 gap 8、
* 名稱 14 Medium、項數 12px 灰）*/
.lct-board-card {
/* 可覆寫參數 */
--lct-bcard-min: 140px; /* 最小寬 */
--lct-bcard-max: 220px; /* 最大寬 */
--lct-bcard-radius: var(--lct-radius-lg); /* 封面圓角（Figma: 16px）*/
--lct-bcard-cover-ratio: 4 / 3; /* 封面比例（Figma 184:137）*/
display: flex;
flex-direction: column;
gap: var(--lct-space-3);
width: 100%;
min-width: var(--lct-bcard-min);
max-width: var(--lct-bcard-max);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
text-align: left;
font-family: var(--lct-font-family);
}
.lct-board-card__cover {
width: 100%; aspect-ratio: var(--lct-bcard-cover-ratio);
border-radius: var(--lct-bcard-radius);
overflow: hidden;
background: var(--lct-line-soft) center/cover no-repeat;
}
.lct-board-card__meta { display: flex; flex-direction: column; gap: 2px; }
.lct-board-card__name { font-size: var(--lct-fs-base); font-weight: var(--lct-fw-medium); color: var(--lct-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lct-board-card__count { font-size: var(--lct-fs-sm); color: var(--lct-text-secondary); }
/* 材料列（Figma 145:246：白底、框 #d2d2d7、radius 8、padding 12/16、
* 縮圖 40 radius 6、名稱 14 Medium、尾端 checkbox）*/
.lct-row {
display: flex;
align-items: center;
gap: var(--lct-space-3);
padding: var(--lct-space-5) var(--lct-space-6);
background: var(--lct-surface);
border: 1px solid var(--lct-border);
border-radius: var(--lct-radius-md);
}
.lct-row + .lct-row { margin-top: var(--lct-space-2); }
.lct-row__thumb { width: var(--lct-row-thumb, 40px); height: var(--lct-row-thumb, 40px); border-radius: var(--lct-radius-sm); background: var(--lct-bg) center/cover no-repeat; flex-shrink: 0; }
.lct-row__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--lct-space-4); }
.lct-row__main--stack { flex-direction: column; align-items: flex-start; gap: 0; }
.lct-row__title { font-size: var(--lct-fs-base); font-weight: var(--lct-fw-medium); color: var(--lct-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lct-row__meta { font-size: var(--lct-fs-caption); color: var(--lct-text-secondary); }
.lct-row__count { font-size: var(--lct-fs-caption); color: var(--lct-text-secondary); white-space: nowrap; }
/* Badge / 徽章（項數）*/
.lct-badge {
display: inline-flex; align-items: center;
padding: 1px var(--lct-space-2);
font-size: var(--lct-fs-caption); line-height: var(--lct-lh-caption);
color: var(--lct-text-secondary);
}
.lct-badge--pill { background: var(--lct-bg); border-radius: var(--lct-radius-pill); padding: 2px var(--lct-space-3); }
/* -----------------------------------------------------------------------------
* 10. Footer 動作列 & Footer 按鈕（Figma 校準：無框無底、純 icon+文字、
* hover 只變紅；容器高 80、padding 8/32、向上陰影、平均分佈）
* -------------------------------------------------------------------------- */
.lct-footer-actions {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--lct-footer-h);
padding: var(--lct-space-3) 32px;
background: var(--lct-surface);
box-shadow: var(--lct-shadow-up);
position: relative;
z-index: 1;
}
.lct-footer-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--lct-space-3);
padding: 0;
border: none;
background: transparent;
color: var(--lct-footer-ink);
font-family: var(--lct-font-family);
font-size: var(--lct-fs-sm);
line-height: 1;
font-weight: var(--lct-fw-medium);
cursor: pointer;
transition: color .15s ease;
}
.lct-footer-btn .lct-icon { --lct-icon-size: 24px; }
.lct-footer-btn:hover { color: var(--lct-primary); }
/* 強調（常駐紅字，如 Figma Footer Action Row Variant2 的「匯出報價」）*/
.lct-footer-btn--primary { color: var(--lct-primary); }
.lct-footer-btn:disabled,
.lct-footer-btn.is-disabled { color: var(--lct-muted); cursor: not-allowed; }
/* -----------------------------------------------------------------------------
* 11. 報價 / 材料資訊
* -------------------------------------------------------------------------- */
/* 單列 label/value（通用）*/
.lct-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--lct-space-3);
padding: var(--lct-space-4) var(--lct-space-6);
background: var(--lct-surface);
border: 1px solid var(--lct-border);
border-radius: var(--lct-radius-md);
}
.lct-info__label { font-size: var(--lct-fs-base); color: var(--lct-text-secondary); }
.lct-info__value { font-size: var(--lct-fs-title); font-weight: var(--lct-fw-bold); color: var(--lct-ink); }
/* 報價表格（Figma 78:141：白卡 radius 8、padding 12、Drop Shadow/100；
* 表頭列底 & 框線 rgba(91,91,91,.1)、字 11 Medium；資料列字 12）
* 欄數由 --lct-table-cols 控制（預設 5）。 */
.lct-quote-card {
background: var(--lct-surface);
border-radius: var(--lct-radius-md);
padding: var(--lct-space-5);
box-shadow: var(--lct-shadow-sm);
}
.lct-table {
--lct-table-cols: 5; /* 可覆寫 */
display: grid;
grid-template-columns: repeat(var(--lct-table-cols), minmax(0, 1fr));
width: 100%;
}
.lct-table__th,
.lct-table__td {
display: flex;
align-items: center;
justify-content: flex-end; /* 數值靠右（Figma）*/
padding: 2px var(--lct-space-3);
border: 1px solid var(--lct-cell-tint);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.2;
min-height: 22px;
}
.lct-table__th {
background: var(--lct-cell-tint);
font-size: var(--lct-fs-caption);
font-weight: var(--lct-fw-medium);
color: var(--lct-ink);
}
.lct-table__td { font-size: var(--lct-fs-sm); color: var(--lct-ink); }
.lct-table__th:first-child,
.lct-table__td:first-child { justify-content: flex-start; }
/* -----------------------------------------------------------------------------
* 12. Modal（面板彈窗，如「加入收藏夾」；Figma 8:11 全對齊）
* -------------------------------------------------------------------------- */
.lct-scrim {
position: fixed;
inset: 0;
background: var(--lct-scrim-bg);
z-index: var(--lct-z-scrim);
display: flex;
align-items: center;
justify-content: center;
padding: var(--lct-space-7);
opacity: 0;
visibility: hidden;
transition: opacity .18s ease, visibility .18s ease;
}
.lct-scrim.is-open { opacity: 1; visibility: visible; }
.lct-modal {
--lct-modal-w: 360px; /* 可覆寫 */
display: flex;
flex-direction: column;
gap: var(--lct-space-7);
width: var(--lct-modal-w);
max-width: 100%;
padding: var(--lct-space-6);
background: var(--lct-surface);
border-radius: var(--lct-radius-panel);
box-shadow: var(--lct-shadow-lg);
transform: translateY(8px) scale(.98);
transition: transform .18s ease;
}
.lct-scrim.is-open .lct-modal { transform: none; }
.lct-modal__header { display: flex; align-items: center; justify-content: space-between; }
.lct-modal__title { font-size: var(--lct-fs-title); line-height: var(--lct-lh-title); font-weight: var(--lct-fw-bold); color: var(--lct-ink); margin: 0; }
.lct-modal__close {
--lct-modal-close-size: 16px; /* 可覆寫 */
width: var(--lct-modal-close-size); height: var(--lct-modal-close-size);
padding: 0; border: none; background: transparent;
color: var(--lct-text-secondary); cursor: pointer; line-height: 0;
}
.lct-modal__close:hover { color: var(--lct-ink); }
.lct-modal__subtitle { font-size: var(--lct-fs-base); font-weight: var(--lct-fw-medium); color: var(--lct-ink); margin: 0; }
.lct-modal__body { display: flex; flex-direction: column; gap: var(--lct-space-2); }
.lct-modal__footer { display: flex; align-items: center; gap: var(--lct-space-3); }
/* Modal 內的可選列（如收藏夾清單；Figma：padding 7/10、radius 8）*/
.lct-option-row {
display: flex;
align-items: center;
gap: var(--lct-space-3);
padding: 7px var(--lct-space-4);
border: 1px solid var(--lct-border);
border-radius: var(--lct-radius-md);
}
.lct-option-row__name { flex: 1 1 auto; min-width: 0; font-size: var(--lct-fs-base); color: var(--lct-ink); }
.lct-option-row__count { font-size: var(--lct-fs-caption); color: var(--lct-text-secondary); white-space: nowrap; }
/* -----------------------------------------------------------------------------
* 13. Dialog（置中確認框；Figma 216:1115 校準：radius 4、陰影 0 10 30 /.25、
* padding 20/20/16、標題 16 Bold、內文 13 灰 1.55、按鈕等寬 radius 8）
* -------------------------------------------------------------------------- */
.lct-dialog {
--lct-dialog-w: 300px; /* 可覆寫 */
width: var(--lct-dialog-w);
max-width: 100%;
padding: var(--lct-space-7) var(--lct-space-7) var(--lct-space-6);
background: var(--lct-surface);
border-radius: var(--lct-radius-panel);
box-shadow: var(--lct-shadow-dialog);
transform: translateY(8px) scale(.98);
transition: transform .18s ease;
}
.lct-scrim.is-open .lct-dialog { transform: none; }
.lct-dialog__title { font-size: var(--lct-fs-title); font-weight: var(--lct-fw-bold); color: var(--lct-ink); margin: 0 0 var(--lct-space-3); }
.lct-dialog__text { font-size: var(--lct-fs-md); line-height: 1.55; color: var(--lct-text-secondary); margin: 0 0 var(--lct-space-6); }
.lct-dialog__btns { display: flex; gap: var(--lct-space-3); }
.lct-dialog__btns .lct-btn {
flex: 1 1 0;
border-radius: var(--lct-radius-md);
padding-top: 9px; padding-bottom: 9px;
font-size: var(--lct-fs-base);
line-height: var(--lct-lh-base);
}
/* -----------------------------------------------------------------------------
* 14. Toast / 通知列（Figma 校準：彩底 + 1px 彩框 + radius 4、
* icon 24、字 14 Medium 行高 18、高約 47）
* -------------------------------------------------------------------------- */
.lct-bar {
display: flex;
align-items: center;
gap: var(--lct-space-6);
padding: var(--lct-space-5) var(--lct-space-6);
font-size: var(--lct-fs-base);
line-height: var(--lct-lh-md);
font-weight: var(--lct-fw-medium);
border: 1px solid transparent;
border-radius: var(--lct-radius-panel);
color: var(--lct-ink);
background: var(--lct-bg);
}
.lct-bar .lct-icon { --lct-icon-size: 24px; }
.lct-bar__msg { flex: 1 1 auto; min-width: 0; }
.lct-bar__close { border: none; background: transparent; cursor: pointer; color: inherit; opacity: .6; line-height: 0; padding: 0; }
.lct-bar__close:hover { opacity: 1; }
.lct-bar--success { background: var(--lct-success-bg); border-color: var(--lct-success); color: var(--lct-success-text); }
.lct-bar--error { background: var(--lct-error-bg); border-color: var(--lct-error); color: var(--lct-error-text); }
.lct-bar--warning { background: var(--lct-warning-bg); border-color: var(--lct-warning); color: var(--lct-warning-text); }
.lct-bar--info { background: var(--lct-info-bg); border-color: var(--lct-info); color: var(--lct-info-text); }
/* 純色 Toast（實心，用於浮出提示）*/
.lct-toast {
display: flex;
align-items: center;
gap: var(--lct-space-3);
padding: var(--lct-space-3) var(--lct-space-5);
font-size: var(--lct-fs-sm);
color: var(--lct-white);
background: var(--lct-ink);
border-radius: var(--lct-radius-panel);
box-shadow: var(--lct-shadow-md);
}
.lct-toast--success { background: var(--lct-success); }
.lct-toast--error { background: var(--lct-error); }
.lct-toast--warning { background: var(--lct-warning); }
/* Toast 容器（Figma Toast Overlay 225:1115：貼齊面板頂部 18px、
* 左右各 16px 近全寬；大螢幕上限 480px 置中）*/
.lct-toast-container {
position: fixed;
top: 18px;
left: 50%;
transform: translateX(-50%);
z-index: var(--lct-z-toast);
display: flex;
flex-direction: column;
gap: var(--lct-space-2);
pointer-events: none;
width: calc(100% - 32px);
max-width: 480px;
}
.lct-toast-container > * { pointer-events: auto; width: 100%; }
.lct-toast-container .lct-bar,
.lct-toast-container .lct-toast {
animation: lct-toast-in .2s ease;
}
/* 退場：宣告在進場規則之後且特異度不低於它，確保能蓋過進場動畫
* （v1.1 修正：原本 .lct-toast-item--out 特異度不足，退場動畫永不執行，
* JS 等待的 animationend 不觸發 → toast 不會自動消失）*/
.lct-toast-item--out,
.lct-toast-container .lct-toast-item--out { animation: lct-toast-out .2s ease forwards; }
@keyframes lct-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes lct-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
/* -----------------------------------------------------------------------------
* 15. 選單 / 下拉（Figma 校準：項目 padding 8/12、radius 4、13px、
* hover 底 rgba(91,91,91,.05)、危險 #d32f2f）
* -------------------------------------------------------------------------- */
.lct-menu {
--lct-menu-min-w: 130px; /* 可覆寫（Figma Export Menu: 130px）*/
min-width: var(--lct-menu-min-w);
padding: var(--lct-space-1);
background: var(--lct-surface);
border: 1px solid var(--lct-border-soft);
border-radius: var(--lct-radius-md);
box-shadow: var(--lct-shadow-md);
}
.lct-menu-item {
display: flex;
align-items: center;
gap: var(--lct-space-3);
width: 100%;
padding: var(--lct-space-3) var(--lct-space-5);
border: none;
background: transparent;
border-radius: var(--lct-radius-panel);
font-family: var(--lct-font-family);
font-size: var(--lct-fs-md);
color: var(--lct-ink);
text-align: left;
cursor: pointer;
transition: background-color .12s ease;
}
.lct-menu-item .lct-icon { --lct-icon-size: 16px; }
.lct-menu-item:hover { background: var(--lct-hover-tint); }
.lct-menu-item--danger { color: #d32f2f; }
.lct-menu-item--danger:hover { background: var(--lct-error-bg); }
.lct-menu-item--bold { font-weight: var(--lct-fw-bold); justify-content: center; } /* Figma Export Menu 樣式 */
.lct-menu__divider { height: 1px; margin: var(--lct-space-1) 0; background: var(--lct-border-soft); }
/* 下拉容器（配合 JS）*/
.lct-dropdown { position: relative; display: inline-block; }
.lct-dropdown__menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: var(--lct-z-dropdown);
display: none;
}
.lct-dropdown.is-open .lct-dropdown__menu { display: block; }
/* -----------------------------------------------------------------------------
* 16. Utility classes（Tailwind 風格；響應式變體見第 17 節）
* -------------------------------------------------------------------------- */
/* display（.lct-hidden 放最後宣告：同時掛上顯示類時以隱藏優先；
* 響應式變體宣告在更後面，因此 "lct-hidden md:lct-flex" 可正常運作）*/
.lct-block { display: block; }
.lct-inline-block { display: inline-block; }
.lct-flex { display: flex; }
.lct-inline-flex { display: inline-flex; }
.lct-flex-col { display: flex; flex-direction: column; }
.lct-grid { display: grid; gap: var(--lct-grid-gap, var(--lct-space-4)); grid-template-columns: repeat(var(--lct-cols, 1), minmax(0, 1fr)); }
.lct-hidden { display: none; }
/* flexbox */
.lct-flex-row { flex-direction: row; }
.lct-flex-wrap { flex-wrap: wrap; }
.lct-items-start { align-items: flex-start; }
.lct-items-center { align-items: center; }
.lct-items-end { align-items: flex-end; }
.lct-justify-start { justify-content: flex-start; }
.lct-justify-center { justify-content: center; }
.lct-justify-end { justify-content: flex-end; }
.lct-justify-between { justify-content: space-between; }
.lct-grow { flex: 1 1 auto; }
.lct-shrink-0 { flex-shrink: 0; }
/* 欄數（作用於 .lct-grid 與 .lct-material-grid）*/
.lct-cols-1 { --lct-cols: 1; --lct-mgrid-cols: 1; --lct-mgrid-min: 0; }
.lct-cols-2 { --lct-cols: 2; --lct-mgrid-cols: 2; --lct-mgrid-min: 0; }
.lct-cols-3 { --lct-cols: 3; --lct-mgrid-cols: 3; --lct-mgrid-min: 0; }
.lct-cols-4 { --lct-cols: 4; --lct-mgrid-cols: 4; --lct-mgrid-min: 0; }
.lct-cols-5 { --lct-cols: 5; --lct-mgrid-cols: 5; --lct-mgrid-min: 0; }
.lct-cols-6 { --lct-cols: 6; --lct-mgrid-cols: 6; --lct-mgrid-min: 0; }
/* gap（同時作用於 flex / grid / material-grid）*/
.lct-gap-0 { gap: 0; --lct-grid-gap: 0; --lct-mgrid-gap-y: 0; --lct-mgrid-gap-x: 0; }
.lct-gap-1 { gap: var(--lct-space-1); --lct-grid-gap: var(--lct-space-1); --lct-mgrid-gap-y: var(--lct-space-1); --lct-mgrid-gap-x: var(--lct-space-1); }
.lct-gap-2 { gap: var(--lct-space-2); --lct-grid-gap: var(--lct-space-2); --lct-mgrid-gap-y: var(--lct-space-2); --lct-mgrid-gap-x: var(--lct-space-2); }
.lct-gap-3 { gap: var(--lct-space-3); --lct-grid-gap: var(--lct-space-3); --lct-mgrid-gap-y: var(--lct-space-3); --lct-mgrid-gap-x: var(--lct-space-3); }
.lct-gap-4 { gap: var(--lct-space-4); --lct-grid-gap: var(--lct-space-4); --lct-mgrid-gap-y: var(--lct-space-4); --lct-mgrid-gap-x: var(--lct-space-4); }
.lct-gap-5 { gap: var(--lct-space-5); --lct-grid-gap: var(--lct-space-5); --lct-mgrid-gap-y: var(--lct-space-5); --lct-mgrid-gap-x: var(--lct-space-5); }
.lct-gap-6 { gap: var(--lct-space-6); --lct-grid-gap: var(--lct-space-6); --lct-mgrid-gap-y: var(--lct-space-6); --lct-mgrid-gap-x: var(--lct-space-6); }
.lct-gap-7 { gap: var(--lct-space-7); --lct-grid-gap: var(--lct-space-7); --lct-mgrid-gap-y: var(--lct-space-7); --lct-mgrid-gap-x: var(--lct-space-7); }
.lct-gap-8 { gap: var(--lct-space-8); --lct-grid-gap: var(--lct-space-8); --lct-mgrid-gap-y: var(--lct-space-8); --lct-mgrid-gap-x: var(--lct-space-8); }
/* padding（p / px / py / pt / pr / pb / pl，0–8 對應間距階梯）*/
.lct-p-0 { padding: 0; } .lct-p-1 { padding: var(--lct-space-1); } .lct-p-2 { padding: var(--lct-space-2); } .lct-p-3 { padding: var(--lct-space-3); } .lct-p-4 { padding: var(--lct-space-4); } .lct-p-5 { padding: var(--lct-space-5); } .lct-p-6 { padding: var(--lct-space-6); } .lct-p-7 { padding: var(--lct-space-7); } .lct-p-8 { padding: var(--lct-space-8); }
.lct-px-0 { padding-left: 0; padding-right: 0; } .lct-px-2 { padding-left: var(--lct-space-2); padding-right: var(--lct-space-2); } .lct-px-3 { padding-left: var(--lct-space-3); padding-right: var(--lct-space-3); } .lct-px-4 { padding-left: var(--lct-space-4); padding-right: var(--lct-space-4); } .lct-px-5 { padding-left: var(--lct-space-5); padding-right: var(--lct-space-5); } .lct-px-6 { padding-left: var(--lct-space-6); padding-right: var(--lct-space-6); } .lct-px-8 { padding-left: var(--lct-space-8); padding-right: var(--lct-space-8); }
.lct-py-0 { padding-top: 0; padding-bottom: 0; } .lct-py-2 { padding-top: var(--lct-space-2); padding-bottom: var(--lct-space-2); } .lct-py-3 { padding-top: var(--lct-space-3); padding-bottom: var(--lct-space-3); } .lct-py-4 { padding-top: var(--lct-space-4); padding-bottom: var(--lct-space-4); } .lct-py-5 { padding-top: var(--lct-space-5); padding-bottom: var(--lct-space-5); } .lct-py-6 { padding-top: var(--lct-space-6); padding-bottom: var(--lct-space-6); }
.lct-pt-3 { padding-top: var(--lct-space-3); } .lct-pt-6 { padding-top: var(--lct-space-6); }
.lct-pb-3 { padding-bottom: var(--lct-space-3); } .lct-pb-6 { padding-bottom: var(--lct-space-6); }
/* margin */
.lct-m-0 { margin: 0; } .lct-mx-auto { margin-left: auto; margin-right: auto; }
.lct-mt-1 { margin-top: var(--lct-space-1); } .lct-mt-2 { margin-top: var(--lct-space-3); } .lct-mt-4 { margin-top: var(--lct-space-6); } .lct-mt-6 { margin-top: var(--lct-space-8); }
.lct-mb-1 { margin-bottom: var(--lct-space-1); } .lct-mb-2 { margin-bottom: var(--lct-space-3); } .lct-mb-4 { margin-bottom: var(--lct-space-6); } .lct-mb-6 { margin-bottom: var(--lct-space-8); }
/* 寬度 / 文字 */
.lct-w-full { width: 100%; }
.lct-w-auto { width: auto; }
.lct-max-w-full{ max-width: 100%; }
.lct-text-left { text-align: left; }
.lct-text-center { text-align: center; }
.lct-text-right { text-align: right; }
.lct-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* -----------------------------------------------------------------------------
* 17. 響應式變體（mobile-first；前綴同 Tailwind：sm: / md: / lg:）
* 涵蓋版面關鍵 utility：display / 欄數 / flex 方向 / gap / 文字對齊 / 寬度
* 用法：
* -------------------------------------------------------------------------- */
@media (min-width: 480px) {
.sm\:lct-block { display: block; }
.sm\:lct-flex { display: flex; }
.sm\:lct-inline-flex { display: inline-flex; }
.sm\:lct-flex-col { display: flex; flex-direction: column; }
.sm\:lct-flex-row { flex-direction: row; }
.sm\:lct-grid { display: grid; gap: var(--lct-grid-gap, var(--lct-space-4)); grid-template-columns: repeat(var(--lct-cols, 1), minmax(0, 1fr)); }
.sm\:lct-hidden { display: none; }
.sm\:lct-cols-1 { --lct-cols: 1; --lct-mgrid-cols: 1; --lct-mgrid-min: 0; }
.sm\:lct-cols-2 { --lct-cols: 2; --lct-mgrid-cols: 2; --lct-mgrid-min: 0; }
.sm\:lct-cols-3 { --lct-cols: 3; --lct-mgrid-cols: 3; --lct-mgrid-min: 0; }
.sm\:lct-cols-4 { --lct-cols: 4; --lct-mgrid-cols: 4; --lct-mgrid-min: 0; }
.sm\:lct-cols-5 { --lct-cols: 5; --lct-mgrid-cols: 5; --lct-mgrid-min: 0; }
.sm\:lct-cols-6 { --lct-cols: 6; --lct-mgrid-cols: 6; --lct-mgrid-min: 0; }
.sm\:lct-gap-2 { gap: var(--lct-space-2); --lct-grid-gap: var(--lct-space-2); --lct-mgrid-gap-y: var(--lct-space-2); --lct-mgrid-gap-x: var(--lct-space-2); }
.sm\:lct-gap-4 { gap: var(--lct-space-4); --lct-grid-gap: var(--lct-space-4); --lct-mgrid-gap-y: var(--lct-space-4); --lct-mgrid-gap-x: var(--lct-space-4); }
.sm\:lct-gap-6 { gap: var(--lct-space-6); --lct-grid-gap: var(--lct-space-6); --lct-mgrid-gap-y: var(--lct-space-6); --lct-mgrid-gap-x: var(--lct-space-6); }
.sm\:lct-text-left { text-align: left; }
.sm\:lct-text-center { text-align: center; }
.sm\:lct-w-full { width: 100%; }
.sm\:lct-w-auto { width: auto; }
}
@media (min-width: 768px) {
.md\:lct-block { display: block; }
.md\:lct-flex { display: flex; }
.md\:lct-inline-flex { display: inline-flex; }
.md\:lct-flex-col { display: flex; flex-direction: column; }
.md\:lct-flex-row { flex-direction: row; }
.md\:lct-grid { display: grid; gap: var(--lct-grid-gap, var(--lct-space-4)); grid-template-columns: repeat(var(--lct-cols, 1), minmax(0, 1fr)); }
.md\:lct-hidden { display: none; }
.md\:lct-cols-1 { --lct-cols: 1; --lct-mgrid-cols: 1; --lct-mgrid-min: 0; }
.md\:lct-cols-2 { --lct-cols: 2; --lct-mgrid-cols: 2; --lct-mgrid-min: 0; }
.md\:lct-cols-3 { --lct-cols: 3; --lct-mgrid-cols: 3; --lct-mgrid-min: 0; }
.md\:lct-cols-4 { --lct-cols: 4; --lct-mgrid-cols: 4; --lct-mgrid-min: 0; }
.md\:lct-cols-5 { --lct-cols: 5; --lct-mgrid-cols: 5; --lct-mgrid-min: 0; }
.md\:lct-cols-6 { --lct-cols: 6; --lct-mgrid-cols: 6; --lct-mgrid-min: 0; }
.md\:lct-gap-2 { gap: var(--lct-space-2); --lct-grid-gap: var(--lct-space-2); --lct-mgrid-gap-y: var(--lct-space-2); --lct-mgrid-gap-x: var(--lct-space-2); }
.md\:lct-gap-4 { gap: var(--lct-space-4); --lct-grid-gap: var(--lct-space-4); --lct-mgrid-gap-y: var(--lct-space-4); --lct-mgrid-gap-x: var(--lct-space-4); }
.md\:lct-gap-6 { gap: var(--lct-space-6); --lct-grid-gap: var(--lct-space-6); --lct-mgrid-gap-y: var(--lct-space-6); --lct-mgrid-gap-x: var(--lct-space-6); }
.md\:lct-text-left { text-align: left; }
.md\:lct-text-center { text-align: center; }
.md\:lct-w-full { width: 100%; }
.md\:lct-w-auto { width: auto; }
}
@media (min-width: 1024px) {
.lg\:lct-block { display: block; }
.lg\:lct-flex { display: flex; }
.lg\:lct-inline-flex { display: inline-flex; }
.lg\:lct-flex-col { display: flex; flex-direction: column; }
.lg\:lct-flex-row { flex-direction: row; }
.lg\:lct-grid { display: grid; gap: var(--lct-grid-gap, var(--lct-space-4)); grid-template-columns: repeat(var(--lct-cols, 1), minmax(0, 1fr)); }
.lg\:lct-hidden { display: none; }
.lg\:lct-cols-1 { --lct-cols: 1; --lct-mgrid-cols: 1; --lct-mgrid-min: 0; }
.lg\:lct-cols-2 { --lct-cols: 2; --lct-mgrid-cols: 2; --lct-mgrid-min: 0; }
.lg\:lct-cols-3 { --lct-cols: 3; --lct-mgrid-cols: 3; --lct-mgrid-min: 0; }
.lg\:lct-cols-4 { --lct-cols: 4; --lct-mgrid-cols: 4; --lct-mgrid-min: 0; }
.lg\:lct-cols-5 { --lct-cols: 5; --lct-mgrid-cols: 5; --lct-mgrid-min: 0; }
.lg\:lct-cols-6 { --lct-cols: 6; --lct-mgrid-cols: 6; --lct-mgrid-min: 0; }
.lg\:lct-gap-2 { gap: var(--lct-space-2); --lct-grid-gap: var(--lct-space-2); --lct-mgrid-gap-y: var(--lct-space-2); --lct-mgrid-gap-x: var(--lct-space-2); }
.lg\:lct-gap-4 { gap: var(--lct-space-4); --lct-grid-gap: var(--lct-space-4); --lct-mgrid-gap-y: var(--lct-space-4); --lct-mgrid-gap-x: var(--lct-space-4); }
.lg\:lct-gap-6 { gap: var(--lct-space-6); --lct-grid-gap: var(--lct-space-6); --lct-mgrid-gap-y: var(--lct-space-6); --lct-mgrid-gap-x: var(--lct-space-6); }
.lg\:lct-text-left { text-align: left; }
.lg\:lct-text-center { text-align: center; }
.lg\:lct-w-full { width: 100%; }
.lg\:lct-w-auto { width: auto; }
}