/* ============================================================
   Web Dev Glossary · 視覺演示元件樣式
   來源：原始 index.html <style>（line 9-364）
   作用域：所有 token 與元件樣式限定在 .cgx wrapper 內，
           避免污染 LearnRFID 衍生的 site.css 全域變數。
   ============================================================ */

/* ── Design Tokens（作用域限定在 .cgx）─────────────── */
.cgx{
  --g:#10b981;--gd:#059669;--gl:#ecfdf5;--gb:#d1fae5;
  --bl:#3b82f6;--pu:#8b5cf6;--or:#f59e0b;--re:#ef4444;
  --tx:#0f172a;--ts:#475569;--tm:#94a3b8;
  --bd:#e2e8f0;--bg:#f1f5f9;--card:#ffffff;
  --hdr:#0f172a;--side:#1e293b;
  --r8:8px;--r12:12px;--r16:16px;--r20:20px;
  --sh1:0 1px 4px rgba(0,0,0,.07);
  --sh2:0 4px 16px rgba(0,0,0,.08);
  --sh3:0 8px 32px rgba(0,0,0,.12);
  color:var(--tx);
}
.cgx code{font-family:'Fira Code','Courier New',monospace;font-size:12.5px;background:#f1f5f9;padding:1px 5px;border-radius:4px;color:var(--bl);}

/* ── Component Grid ─────────────────────────────── */
.cgx .comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;}
.cgx .comp-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r16);overflow:hidden;transition:box-shadow .2s,transform .2s;}
.cgx .comp-card:hover{box-shadow:var(--sh3);transform:translateY(-2px);}
.cgx .comp-preview{min-height:180px;background:var(--bg);border-bottom:1px solid var(--bd);padding:24px;display:flex;align-items:center;justify-content:center;}
.cgx .comp-info{padding:16px 20px 18px;}
.cgx .comp-zh{font-size:15px;font-weight:800;color:var(--tx);}
.cgx .comp-en{font-family:'Fira Code','Courier New',monospace;font-size:12px;color:var(--bl);margin-top:3px;}
.cgx .comp-desc{font-size:13px;color:var(--ts);margin-top:7px;line-height:1.55;}

/* ── Highlight Box ───────────────────────────────── */
.cgx .hl-box{border-left:4px solid var(--g);background:var(--gl);border-radius:0 12px 12px 0;padding:14px 18px;font-size:14px;color:#065f46;margin-top:20px;}
.cgx .hl-box strong{display:block;font-size:15px;margin-bottom:4px;color:#064e3b;}

/* ── Layout Diagram ─────────────────────────────── */
.cgx .layout-demo{border:2px solid var(--bd);border-radius:var(--r16);overflow:hidden;background:var(--card);}
.cgx .ldd-topbar{background:var(--hdr);color:#fff;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;}
.cgx .ldd-body{display:flex;min-height:200px;}
.cgx .ldd-sidebar{width:160px;min-width:160px;background:var(--side);padding:14px;}
.cgx .ldd-sidebar-label{background:rgba(16,185,129,.15);color:var(--g);border:1px solid rgba(16,185,129,.3);border-radius:5px;padding:3px 8px;font-size:10px;font-weight:700;display:block;text-align:center;margin-bottom:10px;}
.cgx .ldd-mi{padding:6px 10px;font-size:12px;color:#94a3b8;border-radius:5px;margin-bottom:3px;cursor:pointer;}
.cgx .ldd-mi.a{background:rgba(16,185,129,.2);color:#fff;}
.cgx .ldd-grp{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#475569;padding:8px 10px 4px;}
.cgx .ldd-main{flex:1;background:#f8fafc;padding:18px;}
.cgx .ldd-bc{font-size:12px;color:#94a3b8;display:flex;align-items:center;gap:5px;margin-bottom:14px;}
.cgx .ldd-bc .cur{color:var(--tx);font-weight:700;}
.cgx .ldd-content{background:#eff6ff;border:2px dashed #93c5fd;border-radius:10px;padding:20px;text-align:center;color:var(--bl);font-weight:700;margin-bottom:14px;}
.cgx .ldd-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.cgx .ldd-kpi{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px;text-align:center;}
.cgx .ldd-kpi-val{font-size:20px;font-weight:800;color:var(--g);}
.cgx .ldd-kpi-lab{font-size:10px;color:var(--tm);margin-top:1px;}
.cgx .ldd-footer{background:#f1f5f9;padding:10px 18px;text-align:center;color:var(--tm);font-size:12px;border-top:1px solid var(--bd);}
.cgx .zone-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.cgx .zone-chip{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:5px 12px;font-size:13px;font-weight:600;}
.cgx .dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0;}

/* ── Demo Elements ───────────────────────────────── */
/* --- Topbar --- */
.cgx .dm-topbar{background:var(--hdr);border-radius:var(--r8);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;width:100%;}
.cgx .dm-topbar-logo{display:flex;align-items:center;gap:8px;}
.cgx .dm-topbar-logo .icon{width:26px;height:26px;background:var(--g);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;}
.cgx .dm-topbar-logo span{color:#fff;font-weight:700;font-size:14px;}
.cgx .dm-topbar-actions{display:flex;align-items:center;gap:8px;}
.cgx .dm-topbar-actions .notif{width:32px;height:32px;background:rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:15px;}
.cgx .dm-topbar-actions .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gd));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;}
/* --- Sidebar --- */
.cgx .dm-sidebar{background:var(--side);border-radius:var(--r8);padding:12px;width:150px;}
.cgx .dm-sidebar .grp{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#475569;padding:6px 8px 3px;}
.cgx .dm-sidebar .mi{padding:7px 10px;font-size:12px;color:#94a3b8;border-radius:5px;display:flex;align-items:center;gap:7px;cursor:pointer;margin-bottom:1px;}
.cgx .dm-sidebar .mi i{font-size:13px;}
.cgx .dm-sidebar .mi.a{background:rgba(16,185,129,.2);color:#e2e8f0;}
/* --- Breadcrumb --- */
.cgx .dm-bc{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--tm);}
.cgx .dm-bc .sep{color:#d1d5db;}
.cgx .dm-bc .cur{color:var(--tx);font-weight:700;}
.cgx .dm-bc .home{display:flex;align-items:center;gap:4px;color:var(--g);}
/* --- Tabs --- */
.cgx .dm-tabs{width:100%;}
.cgx .dm-tab-bar{display:flex;border-bottom:2px solid var(--bd);}
.cgx .dm-tab{padding:9px 16px;font-size:13px;color:var(--tm);border-bottom:2.5px solid transparent;margin-bottom:-2px;cursor:pointer;font-weight:600;white-space:nowrap;}
.cgx .dm-tab.a{color:var(--g);border-bottom-color:var(--g);}
.cgx .dm-tab-content{background:var(--card);border:1px solid var(--bd);border-top:none;border-radius:0 0 var(--r8) var(--r8);padding:14px 16px;font-size:13px;color:var(--ts);}
/* --- Stepper --- */
.cgx .dm-steps{display:flex;align-items:center;width:100%;}
.cgx .dm-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;}
.cgx .dm-step-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.cgx .dm-step-circle.done{background:var(--g);color:#fff;}
.cgx .dm-step-circle.cur{background:var(--bl);color:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.2);}
.cgx .dm-step-circle.todo{background:var(--bd);color:var(--tm);}
.cgx .dm-step-label{font-size:11px;font-weight:600;white-space:nowrap;}
.cgx .dm-step-label.done{color:var(--g);}
.cgx .dm-step-label.cur{color:var(--bl);}
.cgx .dm-step-label.todo{color:var(--tm);}
.cgx .dm-step-line{flex:1;height:2.5px;min-width:20px;}
.cgx .dm-step-line.done{background:var(--g);}
.cgx .dm-step-line.todo{background:var(--bd);}
/* --- Dropdown --- */
.cgx .dm-dd{display:inline-block;}
.cgx .dm-dd-btn{display:flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid var(--bd);border-radius:var(--r8);font-size:13.5px;background:var(--card);cursor:pointer;font-weight:500;}
.cgx .dm-dd-menu{background:var(--card);border:1px solid var(--bd);border-radius:var(--r8);box-shadow:var(--sh2);padding:5px 0;min-width:160px;margin-top:4px;}
.cgx .dm-dd-item{padding:8px 14px;font-size:13px;color:var(--tx);display:flex;align-items:center;gap:8px;cursor:pointer;}
.cgx .dm-dd-item:hover,.cgx .dm-dd-item.a{background:var(--gl);color:var(--g);}
.cgx .dm-dd-item.a::before{content:'✓';font-weight:700;margin-right:2px;}
/* --- Drawer --- */
.cgx .dm-drawer-wrap{border:1.5px solid var(--bd);border-radius:var(--r8);overflow:hidden;width:100%;height:130px;display:flex;}
.cgx .dm-drawer-bg{flex:1;background:rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--tm);}
.cgx .dm-drawer-panel{width:120px;background:var(--card);border-left:2px solid var(--g);padding:12px;display:flex;flex-direction:column;gap:5px;}
.cgx .dm-drawer-panel .dpi{background:var(--bg);border-radius:5px;padding:6px 8px;font-size:12px;color:var(--tx);}
/* --- Pagination --- */
.cgx .dm-pg{display:flex;gap:4px;align-items:center;}
.cgx .dm-pgb{width:36px;height:36px;border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;border:1.5px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer;}
.cgx .dm-pgb.a{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.3);}
.cgx .dm-pgb.nav{color:var(--tm);}
/* --- Card --- */
.cgx .dm-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r12);overflow:hidden;width:200px;box-shadow:var(--sh1);}
.cgx .dm-card-hd{padding:12px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px;}
.cgx .dm-card-hd .icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.cgx .dm-card-hd .title{font-weight:700;font-size:13.5px;}
.cgx .dm-card-bd{padding:12px 16px;font-size:12.5px;color:var(--ts);line-height:1.5;}
.cgx .dm-card-ft{padding:10px 16px;border-top:1px solid var(--bd);display:flex;gap:6px;}
/* --- KPI card --- */
.cgx .dm-kpi{background:var(--card);border:1px solid var(--bd);border-radius:var(--r12);padding:18px 20px;text-align:center;min-width:110px;}
.cgx .dm-kpi-icon{font-size:22px;color:var(--g);margin-bottom:5px;}
.cgx .dm-kpi-val{font-size:32px;font-weight:800;color:var(--g);line-height:1;}
.cgx .dm-kpi-label{font-size:12px;color:var(--tm);margin-top:4px;}
.cgx .dm-kpi-trend{display:flex;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:600;margin-top:5px;color:#10b981;}
/* --- Badges --- */
.cgx .dm-badge{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block;}
.cgx .dm-badge-g{background:var(--gl);color:#065f46;}
.cgx .dm-badge-r{background:#fef2f2;color:#b91c1c;}
.cgx .dm-badge-b{background:#eff6ff;color:#1d4ed8;}
.cgx .dm-badge-o{background:#fff7ed;color:#c2410c;}
.cgx .dm-badge-gray{background:#f1f5f9;color:#475569;border:1px solid var(--bd);}
/* --- Chips --- */
.cgx .dm-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:12.5px;font-weight:600;}
.cgx .dm-chip-g{background:var(--gl);color:#065f46;}
.cgx .dm-chip-b{background:#eff6ff;color:#1d4ed8;}
.cgx .dm-chip-p{background:#faf5ff;color:#7c3aed;}
.cgx .dm-chip-x{color:var(--tm);cursor:pointer;font-size:11px;}
/* --- Avatar --- */
.cgx .dm-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;border:2px solid #fff;flex-shrink:0;}
.cgx .dm-av-g{background:linear-gradient(135deg,var(--g),var(--gd));}
.cgx .dm-av-b{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.cgx .dm-av-o{background:linear-gradient(135deg,#f59e0b,#d97706);}
.cgx .dm-av-p{background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
.cgx .dm-av-r{background:linear-gradient(135deg,#ef4444,#b91c1c);}
/* --- Timeline --- */
.cgx .dm-tl{display:flex;flex-direction:column;}
.cgx .dm-tl-row{display:flex;gap:10px;}
.cgx .dm-tl-left{display:flex;flex-direction:column;align-items:center;width:16px;}
.cgx .dm-tl-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.cgx .dm-tl-line{width:2px;flex:1;min-height:16px;}
.cgx .dm-tl-body{padding-bottom:14px;}
.cgx .dm-tl-time{font-size:11px;color:var(--tm);font-weight:600;}
.cgx .dm-tl-title{font-size:13px;font-weight:700;color:var(--tx);}
.cgx .dm-tl-desc{font-size:12px;color:var(--ts);margin-top:1px;}
/* --- Accordion --- */
.cgx .dm-acc{border:1.5px solid var(--bd);border-radius:var(--r8);overflow:hidden;width:100%;}
.cgx .dm-acc-hd{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:13.5px;font-weight:700;background:var(--card);}
.cgx .dm-acc-hd:not(:first-child){border-top:1px solid var(--bd);}
.cgx .dm-acc-hd.open{background:var(--gl);color:var(--g);}
.cgx .dm-acc-bd{padding:12px 16px;font-size:13px;color:var(--ts);background:var(--card);border-top:1px solid var(--bd);}
/* --- Modal --- */
.cgx .dm-modal-wrap{position:relative;width:100%;height:160px;}
.cgx .dm-modal-bg{position:absolute;inset:0;background:rgba(15,23,42,.35);border-radius:var(--r8);display:flex;align-items:center;justify-content:center;}
.cgx .dm-modal{background:var(--card);border-radius:var(--r16);box-shadow:0 12px 40px rgba(0,0,0,.2);width:220px;overflow:hidden;}
.cgx .dm-modal-hd{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bd);}
.cgx .dm-modal-hd-title{font-weight:800;font-size:14px;}
.cgx .dm-modal-bd{padding:14px 18px;font-size:12.5px;color:var(--ts);}
.cgx .dm-modal-ft{padding:12px 18px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end;}
/* --- Chart --- */
.cgx .dm-chart{display:flex;align-items:flex-end;gap:5px;height:90px;padding:4px 4px 0;}
.cgx .dm-bar{border-radius:4px 4px 0 0;flex:1;}
/* --- Progress --- */
.cgx .dm-prog-wrap{width:100%;}
.cgx .dm-prog-row{margin-bottom:12px;}
.cgx .dm-prog-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ts);margin-bottom:4px;font-weight:600;}
.cgx .dm-prog-track{background:var(--bd);border-radius:4px;height:8px;overflow:hidden;}
.cgx .dm-prog-fill{height:100%;border-radius:4px;}
/* --- Skeleton --- */
.cgx .dm-skel{width:100%;}
.cgx .dm-skel-line{border-radius:5px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:skel 1.5s infinite;margin-bottom:8px;}
.cgx .dm-skel-circle{border-radius:50%;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:skel 1.5s infinite;}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* --- Tooltip --- */
.cgx .dm-tip-wrap{display:flex;flex-direction:column;align-items:center;gap:0;}
.cgx .dm-tip{background:var(--hdr);color:#fff;padding:7px 14px;border-radius:7px;font-size:12.5px;white-space:nowrap;box-shadow:var(--sh2);}
.cgx .dm-tip-arrow{width:0;height:0;border:6px solid transparent;border-top-color:var(--hdr);border-bottom:none;}
.cgx .dm-tip-target{margin-top:4px;padding:8px 16px;border:1.5px solid var(--bd);border-radius:var(--r8);font-size:13px;background:var(--card);cursor:pointer;color:var(--ts);}
/* --- Popover --- */
.cgx .dm-pop{background:var(--card);border:1px solid var(--bd);border-radius:var(--r12);box-shadow:var(--sh2);padding:14px 16px;width:200px;}
.cgx .dm-pop-title{font-weight:800;font-size:14px;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.cgx .dm-pop-body{font-size:12.5px;color:var(--ts);line-height:1.5;}
.cgx .dm-pop-foot{margin-top:10px;display:flex;gap:6px;}
/* --- Buttons --- */
.cgx .dm-btn{padding:8px 18px;border-radius:var(--r8);font-size:13.5px;font-weight:700;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.cgx .dm-btn-primary{background:var(--g);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.25);}
.cgx .dm-btn-outline{background:var(--card);color:var(--g);border:1.5px solid var(--g);}
.cgx .dm-btn-ghost{background:var(--bg);color:var(--ts);}
.cgx .dm-btn-danger{background:var(--re);color:#fff;}
/* --- Form Elements --- */
.cgx .dm-input{border:1.5px solid var(--bd);border-radius:var(--r8);padding:9px 13px;font-size:13.5px;color:var(--tx);background:var(--card);width:100%;outline:none;display:block;}
.cgx .dm-input.focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(16,185,129,.12);}
.cgx .dm-input-wrap{position:relative;}
.cgx .dm-input-wrap .icon-left{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tm);font-size:14px;}
.cgx .dm-input-wrap .dm-input{padding-left:36px;}
.cgx .dm-label{font-size:12.5px;font-weight:700;color:var(--ts);margin-bottom:6px;display:block;}
.cgx .dm-select{border:1.5px solid var(--bd);border-radius:var(--r8);padding:9px 34px 9px 13px;font-size:13.5px;color:var(--tx);background:var(--card);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:11px;width:100%;}
.cgx .dm-toggle-row{display:flex;align-items:center;gap:10px;}
.cgx .dm-sw{width:40px;height:22px;border-radius:11px;background:var(--g);position:relative;cursor:pointer;transition:background .2s;}
.cgx .dm-sw.off{background:var(--bd);}
.cgx .dm-sw::after{content:'';width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:3px;right:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.cgx .dm-sw.off::after{right:auto;left:3px;}
.cgx .dm-toggle-label{font-size:13px;font-weight:600;}
.cgx .dm-check-group{display:flex;flex-direction:column;gap:8px;}
.cgx .dm-check-row{display:flex;align-items:center;gap:9px;font-size:13.5px;}
.cgx .dm-check{width:17px;height:17px;border-radius:4px;border:2px solid var(--g);background:var(--g);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;flex-shrink:0;}
.cgx .dm-check-empty{width:17px;height:17px;border-radius:4px;border:2px solid var(--bd);flex-shrink:0;}
.cgx .dm-radio{width:17px;height:17px;border-radius:50%;border:2px solid var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cgx .dm-radio::after{content:'';width:7px;height:7px;background:var(--g);border-radius:50%;}
.cgx .dm-radio-empty{width:17px;height:17px;border-radius:50%;border:2px solid var(--bd);flex-shrink:0;}
/* slider */
.cgx .dm-slider-wrap{width:100%;}
.cgx .dm-slider-track{background:var(--bd);border-radius:4px;height:6px;position:relative;margin:10px 0;}
.cgx .dm-slider-fill{background:var(--g);height:100%;border-radius:4px;width:65%;}
.cgx .dm-slider-thumb{width:18px;height:18px;background:var(--g);border-radius:50%;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.2);position:absolute;top:-6px;left:calc(65% - 9px);}
/* tag input */
.cgx .dm-tagwrap{border:1.5px solid var(--g);border-radius:var(--r8);padding:6px 10px;display:flex;gap:5px;align-items:center;flex-wrap:wrap;background:var(--card);}
.cgx .dm-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:5px;font-size:12.5px;font-weight:600;}
.cgx .dm-tag-g{background:var(--gl);color:#065f46;}
.cgx .dm-tag-b{background:#eff6ff;color:#1d4ed8;}
.cgx .dm-tag-p{background:#faf5ff;color:#7c3aed;}
.cgx .dm-tag-x{color:var(--tm);cursor:pointer;font-size:11px;}
.cgx .dm-tag-input{border:none;outline:none;font-size:13px;color:var(--ts);min-width:60px;}
/* autocomplete */
.cgx .dm-ac-menu{background:var(--card);border:1px solid var(--bd);border-radius:0 0 var(--r8) var(--r8);box-shadow:var(--sh2);padding:4px 0;}
.cgx .dm-ac-item{padding:8px 14px;font-size:13px;color:var(--tx);cursor:pointer;display:flex;align-items:center;gap:8px;}
.cgx .dm-ac-item.a{background:var(--gl);color:var(--g);}
/* file upload */
.cgx .dm-upload{border:2px dashed #d1d5db;border-radius:var(--r12);padding:20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;}
.cgx .dm-upload:hover{border-color:var(--g);background:var(--gl);}
.cgx .dm-upload i{font-size:28px;color:#d1d5db;display:block;margin-bottom:6px;}
.cgx .dm-upload .main{font-size:13.5px;color:var(--ts);font-weight:600;}
.cgx .dm-upload .sub{font-size:12px;color:var(--tm);margin-top:2px;}
/* color picker */
.cgx .dm-cp-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.cgx .dm-swatch{width:24px;height:24px;border-radius:6px;cursor:pointer;transition:transform .15s;}
.cgx .dm-swatch:hover{transform:scale(1.15);}
.cgx .dm-swatch.sel{outline:3px solid var(--hdr);outline-offset:2px;}
/* feedback demos */
.cgx .dm-toast{background:var(--hdr);color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--sh3);}
.cgx .dm-toast-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.cgx .dm-toast-close{color:#64748b;font-size:14px;margin-left:4px;cursor:pointer;}
.cgx .dm-alert{padding:12px 16px;border-left:4px solid;border-radius:0 var(--r8) var(--r8) 0;font-size:13.5px;display:flex;align-items:flex-start;gap:10px;width:100%;}
.cgx .dm-alert-s{background:#f0fdf4;border-color:var(--g);color:#065f46;}
.cgx .dm-alert-w{background:#fffbeb;border-color:var(--or);color:#92400e;}
.cgx .dm-alert-e{background:#fef2f2;border-color:var(--re);color:#b91c1c;}
.cgx .dm-alert-i{background:#eff6ff;border-color:var(--bl);color:#1d4ed8;}
.cgx .dm-confirm{background:var(--card);border:1.5px solid #fca5a5;border-radius:var(--r16);padding:18px 20px;width:230px;box-shadow:var(--sh2);}
.cgx .dm-confirm-icon{font-size:24px;color:var(--re);margin-bottom:8px;}
.cgx .dm-confirm-title{font-weight:800;font-size:15px;color:var(--re);margin-bottom:6px;}
.cgx .dm-confirm-body{font-size:13px;color:var(--ts);line-height:1.5;margin-bottom:14px;}
.cgx .dm-confirm-btns{display:flex;gap:8px;}
.cgx .dm-spinner{width:36px;height:36px;border:4px solid var(--bd);border-top-color:var(--g);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.cgx .dm-empty{text-align:center;color:var(--tm);}
.cgx .dm-empty i{font-size:40px;color:var(--bd);display:block;margin-bottom:10px;}
.cgx .dm-empty-title{font-size:14px;font-weight:700;color:var(--ts);margin-bottom:4px;}
.cgx .dm-empty-sub{font-size:13px;}
.cgx .dm-cta{background:linear-gradient(135deg,var(--g),var(--gd));color:#fff;padding:12px 28px;border-radius:var(--r12);font-size:15px;font-weight:800;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(16,185,129,.3);cursor:pointer;}
.cgx .dm-btngroup{display:inline-flex;border:1.5px solid var(--bd);border-radius:var(--r8);overflow:hidden;}
.cgx .dm-bgb{padding:9px 16px;font-size:13px;font-weight:600;background:var(--card);color:var(--ts);border-right:1px solid var(--bd);cursor:pointer;}
.cgx .dm-bgb:last-child{border-right:none;}
.cgx .dm-bgb.a{background:var(--g);color:#fff;}
.cgx .dm-autodismiss{background:var(--card);border-radius:var(--r16);padding:20px 22px 14px;width:220px;box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center;}
.cgx .dm-autodismiss-icon{width:48px;height:48px;border-radius:50%;background:#d1fae5;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.cgx .dm-autodismiss-track{background:#e5e7eb;border-radius:4px;height:4px;margin-bottom:8px;overflow:hidden;}
.cgx .dm-autodismiss-fill{width:35%;height:100%;background:var(--g);border-radius:4px;}
.cgx .dm-autodismiss-footer{display:flex;align-items:center;justify-content:space-between;}

/* ── Term Table（analytics/auth/backend/system 視覺示例）── */
.cgx .vis-cell{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r12);padding:12px;display:flex;align-items:center;justify-content:center;min-height:90px;}
/* 分類 tag（來源管道）*/
.cgx .ctag{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;white-space:nowrap;}
.cgx .ct-sys{background:#f8fafc;color:#475569;border:1px solid var(--bd);}
.cgx .ct-ana{background:var(--gl);color:#065f46;}
.cgx .ct-auth{background:#fef2f2;color:#b91c1c;}
.cgx .ct-data{background:#f0f9ff;color:#0369a1;}
/* pulse 動畫（實時監控 / 健康檢查）*/
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5);}70%{box-shadow:0 0 0 8px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}

/* ── Responsive ─────────────────────────────────── */
@media(max-width:768px){
  .cgx .comp-grid{grid-template-columns:1fr;}
  .cgx .ldd-body{flex-direction:column;}
  .cgx .ldd-sidebar{width:100%;}
}

/* ── LINE 社群 CTA（QR + 文案 + 按鈕；只用版型 token） ── */
.line-cta{ gap:20px; }
.line-qr{ width:96px; height:96px; border-radius:8px; border:1px solid var(--line2); background:var(--card); flex-shrink:0; }
.line-cta .ctatext{ flex:1; min-width:200px; line-height:1.6; }