@charset "UTF-8";
/* Generated by npm run styles. Edit design/base.css and design/compact.css. */
@media (width > 1050px) {
:root{--paper:#f5f5ef;--white:#fff;--ink:#242b28;--muted:#768078;--line:#e1e5dc;--dark:#242b27;--gold:#aa8b5c;--pale:#f3ebda;--green:#416c54;--green-bg:#e9f1e9;--red:#ac5648;--red-bg:#f9eeea;--amber:#936e2c;--radius:18px;--shadow:0 27px 105px #1e2b2526;font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);font-size:21px;font-synthesis:none}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button,input,select,textarea{outline-offset:6px}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold)}
button{color:inherit}
svg{display:block}
h1,h2,h3,p{margin:0}
h1{font-size:45px;letter-spacing:-1.65px;font-weight:650}
h2{font-size:27px;letter-spacing:-0.6px;font-weight:650}
h3{font-size:22.5px;font-weight:650}
small{font-size:19.5px}
button,select{touch-action:manipulation}
.skip-link{position:fixed;top:-150px;left:30px;background:white;padding:21px;z-index:100}
.skip-link:focus{top:15px}

.shell{min-height:100vh;display:grid;grid-template-columns:336px minmax(0,1fr)}
.sidebar{background:var(--dark);color:#d0d5cc;padding:51px 30px 36px;position:fixed;inset:0 auto 0 0;width:336px;display:flex;flex-direction:column;z-index:35;border-right:1.5px solid #ffffff0a;overflow:auto}
.brand{padding:0 18px 45px}
.brand-en{font-size:31.5px;line-height:1.25;letter-spacing:2.1px;color:#f4f1e7;font-weight:650}
.brand-cn{font-size:21px;letter-spacing:6px;color:#bdb6a4;margin-top:13.5px}
.workspace{background:#ffffff06;border:1.5px solid #ffffff14;border-radius:13.5px;padding:18px;display:flex;align-items:center;gap:16.5px;margin-bottom:39px}
.workspace-logo{width:49.5px;height:49.5px;background:#c8b28c;color:#242b27;border-radius:10.5px;display:grid;place-items:center;font-family:Georgia,serif;font-size:34.5px}
.workspace strong{display:block;font-size:21px;color:#e9ebe4;font-weight:500}
.workspace small{display:block;font-size:16.5px;color:#89958b;letter-spacing:0.9px;margin-top:6px}
.nav-title{text-transform:uppercase;font-size:16.5px;letter-spacing:2.55px;color:#8c978e;padding:0 21px;margin:0 0 18px}
.nav{display:flex;flex-direction:column;gap:7.5px}
.nav-item{background:none;border:0;border-radius:10.5px;min-height:67.5px;text-align:left;color:#a6b2a8;padding:16.5px 21px;display:flex;align-items:center;gap:19.5px;position:relative}
.nav-item:hover{background:#ffffff08;color:#f3f0e7}
.nav-item.active{background:#e3d7bb;color:#2d342d}
.nav-item.active:before{content:"";height:27px;width:4.5px;background:#7b643e;position:absolute;left:-30px;border-radius:0 3px 3px 0}
.nav-item span{font-size:22.5px;letter-spacing:1.5px}
.nav-item small{margin-left:auto;font-size:16.5px;letter-spacing:0;color:inherit;opacity:.65}
.nav-item .icon{width:27px;height:27px}
.nav-divider{height:1.5px;background:#ffffff10;margin:36px 12px 30px}
.sidebar-extra{margin-top:30px}
.sidebar-footer{margin-top:auto;padding:48px 18px 0}
.sidebar-footer .version{font-size:16.5px;letter-spacing:1.5px;color:#7d8a80;margin-top:19.5px}
.sidebar-note{font-size:19.5px;line-height:1.65;color:#9ba79e}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:currentColor;flex:none}
.sidebar-note .dot{background:#bea678;margin-right:12px}
.main-wrap{grid-column:2;min-width:0}
.topbar{height:114px;background:#fafbf7;display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid var(--line);padding:0 54px;gap:24px}
.breadcrumbs{font-size:18px;color:#778277;letter-spacing:0.6px;display:flex;align-items:center;gap:18px}
.breadcrumbs b{font-weight:500;color:#384138}
.breadcrumbs span{color:#b5bbae}
.top-actions{display:flex;align-items:center;gap:27px}
.tag{display:inline-flex;align-items:center;gap:10.5px;padding:7.5px 13.5px;border-radius:7.5px;font-size:18px;white-space:nowrap;font-weight:500}
.tag.demo{background:#eee8d9;color:#80693d}
.tag.green{background:var(--green-bg);color:var(--green)}
.tag.red{background:var(--red-bg);color:var(--red)}
.tag.gray{background:#eff1ec;color:#768078}
.tag.amber{background:#f6eedc;color:var(--amber)}
.avatar{width:51px;height:51px;border-radius:50%;background:#e2e8dc;color:#485b43;display:grid;place-items:center;font-size:19.5px}
.user-label{font-size:19.5px;line-height:1.2}
.user-label small{color:var(--muted);font-size:16.5px;display:block;margin-top:7.5px}
.user{display:flex;align-items:center;gap:13.5px}
.main{padding:49.5px 54px 66px;max-width:2700px;margin:auto}
.page-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:40.5px}
.eyebrow{font-size:16.5px;letter-spacing:2.7px;color:#9a815a;margin-bottom:13.5px;font-weight:600}
.page-sub{font-size:21px;color:var(--muted);margin-top:15px;line-height:1.7}
.page-tools{display:flex;align-items:center;gap:13.5px;flex-wrap:wrap;padding-top:31.5px}
.btn{border:1.5px solid #d7ddd2;background:#fff;border-radius:10.5px;padding:15px 21px;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;line-height:1.35;font-size:19.5px;font-weight:500;min-height:58.5px}
.btn:hover{border-color:#a4b29f;background:#fafbf8}
.btn.primary{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn.primary:hover{background:#3f4b42}
.btn.gold{background:#e2d4b4;color:#3f412f;border-color:#dbcaab}
.btn.flat{border-color:transparent;background:transparent}
.btn.sm{padding:10.5px 15px;min-height:48px}
.btn .icon{width:24px;height:24px}
.icon{width:30px;height:30px;flex:none}
.icon-button{background:transparent;border:1.5px solid var(--line);padding:12px;border-radius:10.5px;display:grid;place-items:center}
.mobile-toggle{display:none}
.filterbar{display:flex;justify-content:space-between;align-items:center;gap:22.5px;margin-bottom:34.5px}
.filter-group{display:flex;gap:13.5px;flex-wrap:wrap}
.select-wrap{position:relative;display:flex;align-items:center;gap:13.5px;border:1.5px solid var(--line);border-radius:10.5px;background:#fff;padding:0 16.5px;color:#586559}
.select-wrap .icon{width:24px;height:24px}
.select-wrap select{border:0;background:none;min-height:55.5px;padding:0 22.5px 0 0;font-size:19.5px;color:#455244;max-width:285px}
.filter-info{font-size:18px;color:#8b9488;line-height:1.5;text-align:right}
.filter-info .dot{color:#9f875b;margin-right:9px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:34.5px}
.kpi{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:30px 31.5px;text-align:left;width:100%;position:relative}
.kpi:hover{border-color:#bdc7b8}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:7.5px;color:#70806e;font-size:19.5px}
.kpi-icon{color:#8f9e86;background:#f4f6f0;padding:12px;border-radius:12px}
.kpi-icon .icon{width:24px;height:24px}
.kpi-value{font-size:43.5px;font-weight:600;letter-spacing:-2.1px;margin:19.5px 0 16.5px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-value .unit{font-size:19.5px;font-weight:500;letter-spacing:0;margin-left:10.5px;color:#82907e}
.kpi-foot{display:flex;align-items:center;gap:12px;font-size:18px;color:#8a9385;line-height:1.4}
.kpi-trend{color:var(--green);display:flex;gap:6px;align-items:center;white-space:nowrap}
.kpi-trend.down{color:var(--red)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(420px,1fr);gap:31.5px}
.panel{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:33px 34.5px 0}
.panel-head p{font-size:18px;color:#889281;line-height:1.5;margin-top:9px}
.panel-body{padding:33px 34.5px}
.panel-head .link{font-size:18px}
.link{border:0;background:transparent;color:#617b59;display:inline-flex;align-items:center;gap:7.5px;padding:6px 0;font-size:19.5px}
.link:hover{text-decoration:underline}
.link .icon{width:21px;height:21px}
.legend{display:flex;gap:21px;align-items:center;font-size:18px;color:#83907e}
.legend i{width:12px;height:12px;display:inline-block;border-radius:3px;margin-right:7.5px}
.chart-wrap{padding:31.5px 22.5px 9px}
.chart{width:100%;height:321px;overflow:visible}
.chart text{font-size:12px;fill:#93a08b;font-family:inherit}
.chart line.grid{stroke:#edf0e9;stroke-dasharray:3 5}
.chart .chart-label{font-size:11px;fill:#74846e}
.chart-caption{padding:0 33px 27px;font-size:18px;color:#8d9589}
.source-row{display:flex;align-items:center;gap:18px;padding:19.5px 0;border-bottom:1.5px solid #f0f2ec}
.source-row:last-child{border-bottom:0}
.source-icon{width:55.5px;height:55.5px;border:1.5px solid #e2e7db;background:#f6f8f1;border-radius:12px;display:grid;place-items:center;color:#70805f}
.source-name{font-size:19.5px;font-weight:550}
.source-meta{font-size:16.5px;color:#8d9786;margin-top:6px}
.source-row .tag{margin-left:auto}
.source-summary{padding:22.5px 24px;background:#f5f7f0;border-radius:12px;display:flex;align-items:center;justify-content:space-between;margin-top:16.5px;font-size:19.5px;color:#737e69}
.source-summary b{color:#596c4c;font-size:30px;font-weight:600}
.section-header{display:flex;align-items:center;justify-content:space-between;margin:39px 0 22.5px;gap:15px}
.section-header h2{font-size:25.5px}
.section-header p{font-size:18px;color:#8d9686}
.attention-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22.5px;margin-bottom:36px}
.attention{display:flex;align-items:flex-start;gap:18px;background:#fff;border:1.5px solid var(--line);border-radius:15px;padding:25.5px;text-align:left}
.attention:hover{border-color:#b9c4ae}
.attention .attention-icon{color:#a98a53;background:#f7f0df;padding:13.5px;border-radius:12px}
.attention.red .attention-icon{color:#ab6556;background:#faefea}
.attention h3{font-size:21px;line-height:1.5}
.attention p{font-size:18px;color:#959b8f;margin-top:6px;line-height:1.6}
.attention .arrow{margin-left:auto;color:#a6ac9f;align-self:center}
.table-toolbar{display:flex;justify-content:space-between;gap:22.5px;align-items:center;padding:28.5px 34.5px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.table-toolbar h2{font-size:24px}
.table-toolbar .subtitle{font-size:18px;color:var(--muted);margin-top:6px}
.table-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.search-box{border:1.5px solid var(--line);border-radius:10.5px;display:flex;align-items:center;gap:10.5px;padding:0 15px;background:#fbfcf8}
.search-box .icon{color:#83917b;width:22.5px;height:22.5px}
.search-box input{border:0;background:none;min-height:49.5px;outline:none;max-width:255px;font-size:19.5px;width:100%;color:var(--ink)}
.search-box:focus-within{border-color:#a6b898}
.table-scroll{overflow:auto;width:100%}
table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:19.5px}
th{font-size:18px;color:#8b9583;font-weight:500;text-align:left;padding:19.5px 34.5px;background:#fafbf7;border-bottom:1.5px solid #e8ecdf}
td{padding:24px 34.5px;border-bottom:1.5px solid #eff1ea;color:#4a5744}
tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:#fafbf7}
td.numeric,th.numeric{text-align:right;font-variant-numeric:tabular-nums}
td strong{font-weight:550;color:#35422f}
td .cell-sub{display:block;color:#94a08a;font-size:16.5px;margin-top:7.5px}
td .link{padding:0}
.table-foot{padding:19.5px 34.5px;border-top:1.5px solid var(--line);display:flex;justify-content:space-between;font-size:18px;color:#8b9583;gap:15px}
.table-foot button{font-size:18px}
.empty{padding:67.5px 30px;text-align:center;color:#86907f;line-height:1.8}
.empty h3{color:#526149;margin-bottom:9px}
.module-note{font-size:18px;color:#8a9681;line-height:1.75;margin-top:24px}
.tabs{display:flex;gap:33px;border-bottom:1.5px solid var(--line);margin:0 0 30px;overflow:auto}
.tab{border:0;background:transparent;border-bottom:3px solid transparent;padding:18px 3px;color:#8a9781;white-space:nowrap;font-size:21px}
.tab.active{color:#405d36;border-color:#617d50;font-weight:600}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.spaced{margin-bottom:33px}
.bars{display:flex;flex-direction:column;gap:27px}
.bar-row{display:grid;grid-template-columns:112.5px 1fr 127.5px;align-items:center;gap:18px;font-size:19.5px}
.bar-track{background:#f0f3e9;height:10.5px;border-radius:6px;overflow:hidden}
.bar-fill{background:#78906a;height:100%;border-radius:6px}
.bar-row .numeric{font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
.customer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px}
.customer-card{background:#fff;border:1.5px solid var(--line);padding:34.5px;border-radius:var(--radius);text-align:left}
.customer-card:hover{border-color:#a5b697}
.customer-head{display:flex;align-items:center;gap:18px;margin-bottom:31.5px}
.customer-symbol{background:#eef2e7;color:#677d55;height:58.5px;width:58.5px;display:grid;place-items:center;border-radius:13.5px;font-size:24px}
.customer-card h3{font-size:22.5px}
.customer-card p{font-size:18px;color:#91a085;margin-top:9px}
.customer-metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px;border-top:1.5px solid #ecf0e3;padding-top:25.5px}
.customer-metrics small{font-size:18px;color:#85977a;display:block}
.customer-metrics strong{font-size:28.5px;letter-spacing:-0.75px;font-weight:550;display:block;margin-top:10.5px}
.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25.5px}
.device-card{padding:33px;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);text-align:left}
.device-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}
.device-illustration{height:67.5px;width:67.5px;display:grid;place-items:center;color:#677e5a;background:#f5f7ef;border-radius:12px}
.device-illustration .icon{height:36px;width:36px}
.device-card h3{font-size:22.5px}
.device-card p{color:#8e9b84;font-size:18px;margin-top:7.5px}
.device-values{display:grid;grid-template-columns:1fr 1fr;gap:22.5px;margin-top:34.5px}
.device-values small{font-size:18px;color:#8c9a82;display:block}
.device-values b{display:block;font-size:36px;font-weight:550;letter-spacing:-1.5px;margin-top:9px}
.device-values b span{font-size:18px;letter-spacing:0;margin-left:6px;font-weight:400;color:#87977d}
.device-card .bar-track{margin-top:27px}
.device-footer{display:flex;align-items:center;justify-content:space-between;margin-top:15px;color:#8d9885;font-size:16.5px}
.integration-hero{background:#e9eddf;border:1.5px solid #dce2d1;border-radius:18px;padding:39px;display:flex;align-items:center;justify-content:space-between;gap:33px;margin-bottom:34.5px}
.integration-hero h2{font-size:31.5px;line-height:1.5;color:#445538}
.integration-hero p{font-size:19.5px;line-height:1.8;max-width:1005px;color:#7c8a6f;margin-top:12px}
.connector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.connector-card{background:#fff;border:1.5px solid var(--line);border-radius:16.5px;padding:33px}
.connector-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}
.connector-top .source-icon{width:61.5px;height:61.5px}
.connector-card h3{font-size:24px}
.connector-card p{color:#8d9885;font-size:19.5px;line-height:1.75;margin-top:13.5px;min-height:66px}
.connector-foot{display:flex;align-items:center;justify-content:space-between;border-top:1.5px solid #edf0e6;margin-top:30px;padding-top:21px;font-size:16.5px;color:#9aa28f}
.connector-foot .link{font-size:18px}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{padding:21px 0;border-bottom:1.5px solid #edf1e5;display:flex;justify-content:space-between;gap:24px;font-size:19.5px;line-height:1.6}
.info-list li:last-child{border:0}
.info-list small{font-size:18px;color:#8f9b84}
.stat-inline{display:flex;gap:37.5px;flex-wrap:wrap}
.stat-inline div small{font-size:18px;color:#8a9680;display:block}
.stat-inline div b{font-size:34.5px;font-weight:550;display:block;margin-top:10.5px}
.custom-strip{border:1.5px solid var(--line);background:#fff;border-radius:15px;padding:25.5px 33px;display:flex;align-items:center;gap:27px;margin-top:19.5px}
.custom-strip .source-icon{flex:none}
.custom-strip .tag{margin-left:auto}
.custom-strip h3{font-size:21px}
.custom-strip p{font-size:18px;color:#939c8b;margin-top:7.5px}
.footnote{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:42px;color:#99a18e;font-size:16.5px;letter-spacing:0.45px}
.footnote strong{font-weight:500;letter-spacing:1.8px;color:#8a977e}
.overlay{position:fixed;inset:0;background:#18251e70;backdrop-filter:blur(4.5px);z-index:60;display:flex;align-items:center;justify-content:center;padding:36px;overflow:auto}
.modal{background:#fbfcf8;border:1.5px solid #e5e9df;box-shadow:var(--shadow);border-radius:22.5px;width:100%;max-width:1170px;max-height:calc(100dvh - 72px);overflow:auto;position:relative}
.modal.wide{max-width:1500px}
.modal-head{padding:37.5px 42px;display:flex;justify-content:space-between;align-items:flex-start;gap:30px;border-bottom:1.5px solid var(--line);position:sticky;top:0;background:#fbfcf8;z-index:2}
.modal-head h2{font-size:33px}
.modal-head p{font-size:19.5px;color:#8c9883;margin-top:12px;line-height:1.7}
.modal-body{padding:39px 42px}
.modal-footer{padding:27px 42px;border-top:1.5px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:21px;position:sticky;bottom:0;background:#fbfcf8}
.modal-footer small{color:#8c9683;font-size:18px;line-height:1.6}
.detail-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px;margin-bottom:34.5px}
.detail-stat{background:#f0f3e8;border:1.5px solid #e3e8d9;border-radius:13.5px;padding:25.5px}
.detail-stat span{font-size:18px;color:#849476}
.detail-stat b{font-size:36px;font-weight:550;display:block;margin-top:10.5px;letter-spacing:-1.2px}
.detail-stat.amber{background:#f7f0df;border-color:#e8dfc8}
.detail-info{display:grid;grid-template-columns:repeat(2,1fr);gap:25.5px 37.5px;margin:31.5px 0}
.detail-info small{display:block;font-size:18px;color:#939c87;margin-bottom:9px}
.detail-info strong{font-size:21px;font-weight:500}
.timeline{border-left:1.5px solid #d9e1ce;margin-left:10.5px;padding-left:36px}
.timeline-item{position:relative;margin-bottom:33px;font-size:19.5px;line-height:1.8}
.timeline-item:before{content:"";position:absolute;top:10.5px;left:-42px;width:10.5px;height:10.5px;background:#81976c;border-radius:50%;border:3px solid #fbfcf8;box-sizing:content-box}
.timeline-item small{display:block;color:#92a081;font-size:18px}
.notice{background:#f0f3e7;border:1.5px solid #dfe7d1;border-radius:12px;padding:21px 24px;font-size:19.5px;line-height:1.8;color:#6c8058;margin:24px 0}
.notice.amber{background:#f9f2e2;border-color:#eee0be;color:#96762f}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:12px;font-size:19.5px;color:#5c6a50}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{border:1.5px solid #dce2d3;border-radius:10.5px;background:#fff;padding:16.5px 18px;width:100%;min-height:61.5px;color:#3c4d32}
.field textarea{resize:vertical;min-height:240px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:18px}
.field small{font-size:18px;color:#8e9a82;line-height:1.6}
.upload-box{display:flex;flex-direction:column;align-items:center;gap:13.5px;border:1.5px dashed #b9c7a8;background:#f4f7ed;padding:36px;border-radius:15px;margin:24px 0}
.upload-box input{max-width:100%;font-size:19.5px}
.upload-box p{font-size:18px;color:#8e9b80}
.mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px;margin:27px 0}
.check-row{display:flex;align-items:center;gap:13.5px;font-size:19.5px;color:#758668;margin-top:24px}
.check-row input{accent-color:#67814f}
.import-errors{background:#fcf0eb;border:1.5px solid #ebd2c7;border-radius:13.5px;padding:24px;font-size:19.5px;color:#ae6551;line-height:1.9;margin-bottom:27px}
.toast{position:fixed;bottom:40.5px;left:50%;transform:translate(-50%,22.5px);background:#293729;color:#f0f4e9;padding:19.5px 30px;border-radius:13.5px;box-shadow:0 10.5px 37.5px #18261122;z-index:100;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:90vw;font-size:19.5px;line-height:1.6}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.steps{display:flex;gap:18px;align-items:center;margin-bottom:36px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:12px;font-size:19.5px;color:#9aa28d}
.step b{width:36px;height:36px;border:1.5px solid #dae2cd;border-radius:50%;font-size:18px;font-weight:500;display:grid;place-items:center}
.step.active{color:#607a49}
.step.active b{background:#e5ecd9;border-color:#c7d4b5}
.step-line{width:45px;height:1.5px;background:#dce3d0}
.scenario-option{display:flex;align-items:center;gap:22.5px;border:1.5px solid var(--line);background:#fff;border-radius:15px;padding:31.5px;margin-bottom:21px;text-align:left;width:100%}
.scenario-option:hover{border-color:#a5b992}
.scenario-option .source-icon{flex:none}
.scenario-option h3{font-size:22.5px}
.scenario-option p{font-size:19.5px;color:#89997a;margin-top:12px;line-height:1.7}
.scenario-option > .icon:last-child{margin-left:auto}
.pill-group{display:flex;gap:10.5px;flex-wrap:wrap}
.inline-count{background:#e9eedf;font-size:18px;color:#7b9065;padding:4.5px 12px;border-radius:6px;margin-left:10.5px}
.progress-label{display:flex;justify-content:space-between;gap:15px;font-size:18px;color:#91a080;margin-bottom:10.5px}
.progress-label b{color:#6e8858;font-weight:500}
.hidden{display:none!important}
.panel + .panel.stack{margin-top:30px}
.input-standalone{border:1.5px solid var(--line);border-radius:10.5px;background:#fff;min-height:51px;padding:9px 15px;font-size:19.5px}
.sr-only{position:absolute;width:1.5px;height:1.5px;padding:0;margin:-1.5px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:2400px){.main{padding:57px 72px}
.topbar{padding:0 72px}
.kpi-value{font-size:51px}
.chart{height:354px}
}

@media(max-width:1800px){.shell{grid-template-columns:292.5px minmax(0,1fr)}
.sidebar{width:292.5px;padding:42px 22.5px 30px}
.brand{padding-left:12px}
.brand-en{font-size:27px}
.workspace{padding:15px}
.nav-item{padding-left:18px}
.nav-item.active:before{left:-22.5px}
.main{padding:42px 34.5px}
.topbar{padding:0 34.5px}
.kpi-grid{gap:16.5px}
.kpi{padding:25.5px}
.kpi-value{font-size:37.5px}
.dashboard-grid{grid-template-columns:minmax(0,1.65fr) minmax(367.5px,1fr);gap:22.5px}
.attention-grid{gap:16.5px}
.attention{padding:19.5px;gap:13.5px}
.customer-grid,.connector-grid,.device-grid{gap:19.5px}
.page-head{gap:18px}
.page-tools{gap:9px}
.page-tools .btn{padding:13.5px 16.5px}
}

@media(max-width:1500px){.shell{grid-template-columns:267px minmax(0,1fr)}
.sidebar{width:267px;padding-left:18px;padding-right:18px}
.brand-en{font-size:24px;letter-spacing:1.5px}
.brand-cn{letter-spacing:4.5px;font-size:19.5px}
.workspace-logo{display:none}
.nav-item small{display:none}
.nav-item.active:before{left:-18px}
.topbar{height:97.5px}
.main{padding:39px 30px}
.page-head{flex-direction:column;gap:0}
.page-tools{padding-top:24px}
.kpi-value{font-size:36px}
.kpi{padding:24px 21px}
.kpi-icon{padding:9px}
.dashboard-grid{grid-template-columns:1fr}
.attention-grid{grid-template-columns:1fr}
.attention{padding:22.5px}
.customer-grid,.connector-grid,.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.source-panel .panel-body{display:grid;grid-template-columns:1fr 1fr;gap:0 33px}
.source-panel .source-summary{grid-column:1/-1}
.source-row:nth-child(3){border:0}
.two-col,.integration-grid{grid-template-columns:1fr}
.integration-hero{align-items:flex-start;flex-direction:column}
.top-actions{gap:18px}
}

@media(max-width:1050px){.shell{display:block}
.sidebar{transform:translateX(-100%);transition:transform .2s;width:336px;padding:45px 30px}
.shell.nav-open .sidebar{transform:translateX(0)}
.shell.nav-open:after{content:"";position:fixed;inset:0;background:#15221366;z-index:30}
.brand-en{font-size:31.5px}
.brand-cn{font-size:21px}
.workspace-logo{display:grid}
.nav-item small{display:block}
.main-wrap{width:100%}
.mobile-toggle{display:flex}
.topbar{padding:0 25.5px;height:97.5px;position:sticky;top:0;z-index:25}
.breadcrumbs{display:none}
.top-actions{gap:15px;margin-left:auto}
.user-label{display:none}
.main{padding:37.5px 25.5px 48px}
h1{font-size:40.5px}
.page-sub{font-size:19.5px}
.page-head{margin-bottom:30px}
.page-tools{width:100%}
.page-tools .btn{flex:1}
.filterbar{gap:16.5px;align-items:flex-start;flex-direction:column}
.filter-info{text-align:left}
.select-wrap{padding:0 13.5px}
.select-wrap select{max-width:217.5px;font-size:18px}
.filter-group{width:100%;flex-wrap:nowrap}
.filter-group .select-wrap{flex:1}
.filter-group .select-wrap select{width:100%}
.kpi-grid{grid-template-columns:1fr 1fr;gap:15px;margin-bottom:27px}
.kpi{padding:25.5px 22.5px}
.kpi-value{font-size:40.5px;letter-spacing:-1.5px}
.kpi-top{font-size:18px}
.kpi-icon{padding:7.5px}
.kpi-foot{font-size:16.5px;gap:7.5px}
.kpi-foot span:last-child{line-height:1.4}
.panel-head{padding:30px 27px 0}
.panel-body{padding:30px 27px}
.panel-head h2{font-size:24px}
.source-panel .panel-body{grid-template-columns:1fr}
.chart-wrap{padding-left:4.5px;padding-right:4.5px}
.chart{height:285px}
.legend{gap:12px;font-size:16.5px}
.chart-caption{font-size:16.5px;padding-left:27px}
.attention-grid{gap:15px;margin-bottom:27px}
.attention p{font-size:18px}
.table-toolbar{padding:24px 27px}
.table-toolbar .table-tools{width:100%}
.search-box{flex:1}
.search-box input{max-width:none}
.table-scroll table{min-width:975px}
.table-foot{padding:19.5px 27px;font-size:16.5px}
th,td{padding-left:27px;padding-right:27px}
.customer-grid,.connector-grid,.device-grid{grid-template-columns:1fr}
.customer-card{padding:30px}
.customer-metrics strong{font-size:34.5px}
.device-values b{font-size:42px}
.integration-hero{padding:33px}
.integration-hero h2{font-size:28.5px}
.connector-card{padding:30px}
.filter-info{font-size:16.5px}
.footnote{align-items:flex-start;flex-direction:column;line-height:1.8}
.overlay{padding:15px}
.modal{max-height:calc(100dvh - 30px);border-radius:18px}
.modal-head{padding:30px}
.modal-head h2{font-size:30px}
.modal-body{padding:30px}
.modal-footer{padding:24px 30px;align-items:flex-start;flex-wrap:wrap}
.modal-footer .btn{margin-left:auto}
.detail-summary{gap:12px}
.detail-stat{padding:18px 15px}
.detail-stat b{font-size:30px}
.detail-stat span{font-size:16.5px}
.form-grid,.mapping-grid{grid-template-columns:1fr}
.detail-info{gap:24px}
.custom-strip{padding:22.5px;gap:18px;flex-wrap:wrap}
.custom-strip .btn{margin-left:auto}
.custom-strip .tag{margin-left:0}
.top-actions .tag{font-size:16.5px}
.scenario-option{padding:25.5px;align-items:flex-start}
.scenario-option > .icon:last-child{display:none}
.steps{gap:12px}
.step{font-size:18px}
.step-line{width:22.5px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* Shared HTML spacing; kept here so it follows the client display scale. */
.nav-item .nav-source-label{font-size:19.5px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-note{margin-top:30px}
.first-import{margin-top:25.5px}
.integration-grid{margin-top:34.5px}
.customer-card .customer-transactions{margin-top:25.5px}
.finance-breakdown{margin-top:33px}

/* Elements used only by the dedicated compact layout. */
.mobile-brand,.mobile-status,.drawer-close,.nav-backdrop,.mobile-bottom-nav,.mobile-filter-toggle,.filter-label,.mobile-cell-label,.mobile-only,.table-scroll-hint,.chart-mobile{display:none}
.filter-fields,.cell-value{display:contents}
.table-region{min-width:0}

}
@media (width <= 1050px) {
:root{--paper:#f5f5ef;--white:#fff;--ink:#242b28;--muted:#768078;--line:#e1e5dc;--dark:#242b27;--gold:#aa8b5c;--pale:#f3ebda;--green:#416c54;--green-bg:#e9f1e9;--red:#ac5648;--red-bg:#f9eeea;--amber:#936e2c;--radius:12px;--shadow:0 18px 70px #1e2b2526;font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);font-size:14px;font-synthesis:none}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button,input,select,textarea{outline-offset:4px}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold)}
button{color:inherit}
svg{display:block}
h1,h2,h3,p{margin:0}
h1{font-size:30px;letter-spacing:-1.1px;font-weight:650}
h2{font-size:18px;letter-spacing:-.4px;font-weight:650}
h3{font-size:15px;font-weight:650}
small{font-size:13px}
button,select{touch-action:manipulation}
.skip-link{position:fixed;top:-100px;left:20px;background:white;padding:14px;z-index:100}
.skip-link:focus{top:10px}

.shell{min-height:100vh;display:grid;grid-template-columns:224px minmax(0,1fr)}
.sidebar{background:var(--dark);color:#d0d5cc;padding:34px 20px 24px;position:fixed;inset:0 auto 0 0;width:224px;display:flex;flex-direction:column;z-index:35;border-right:1px solid #ffffff0a;overflow:auto}
.brand{padding:0 12px 30px}
.brand-en{font-size:21px;line-height:1.25;letter-spacing:1.4px;color:#f4f1e7;font-weight:650}
.brand-cn{font-size:14px;letter-spacing:4px;color:#bdb6a4;margin-top:9px}
.workspace{background:#ffffff06;border:1px solid #ffffff14;border-radius:9px;padding:12px;display:flex;align-items:center;gap:11px;margin-bottom:26px}
.workspace-logo{width:33px;height:33px;background:#c8b28c;color:#242b27;border-radius:7px;display:grid;place-items:center;font-family:Georgia,serif;font-size:23px}
.workspace strong{display:block;font-size:14px;color:#e9ebe4;font-weight:500}
.workspace small{display:block;font-size:11px;color:#89958b;letter-spacing:.6px;margin-top:4px}
.nav-title{text-transform:uppercase;font-size:11px;letter-spacing:1.7px;color:#8c978e;padding:0 14px;margin:0 0 12px}
.nav{display:flex;flex-direction:column;gap:5px}
.nav-item{background:none;border:0;border-radius:7px;min-height:45px;text-align:left;color:#a6b2a8;padding:11px 14px;display:flex;align-items:center;gap:13px;position:relative}
.nav-item:hover{background:#ffffff08;color:#f3f0e7}
.nav-item.active{background:#e3d7bb;color:#2d342d}
.nav-item.active:before{content:"";height:18px;width:3px;background:#7b643e;position:absolute;left:-20px;border-radius:0 2px 2px 0}
.nav-item span{font-size:15px;letter-spacing:1px}
.nav-item small{margin-left:auto;font-size:11px;letter-spacing:0;color:inherit;opacity:.65}
.nav-item .icon{width:18px;height:18px}
.nav-divider{height:1px;background:#ffffff10;margin:24px 8px 20px}
.sidebar-extra{margin-top:20px}
.sidebar-footer{margin-top:auto;padding:32px 12px 0}
.sidebar-footer .version{font-size:11px;letter-spacing:1px;color:#7d8a80;margin-top:13px}
.sidebar-note{font-size:13px;line-height:1.65;color:#9ba79e}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor;flex:none}
.sidebar-note .dot{background:#bea678;margin-right:8px}
.main-wrap{grid-column:2;min-width:0}
.topbar{height:76px;background:#fafbf7;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 36px;gap:16px}
.breadcrumbs{font-size:12px;color:#778277;letter-spacing:.4px;display:flex;align-items:center;gap:12px}
.breadcrumbs b{font-weight:500;color:#384138}
.breadcrumbs span{color:#b5bbae}
.top-actions{display:flex;align-items:center;gap:18px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:5px;font-size:12px;white-space:nowrap;font-weight:500}
.tag.demo{background:#eee8d9;color:#80693d}
.tag.green{background:var(--green-bg);color:var(--green)}
.tag.red{background:var(--red-bg);color:var(--red)}
.tag.gray{background:#eff1ec;color:#768078}
.tag.amber{background:#f6eedc;color:var(--amber)}
.avatar{width:34px;height:34px;border-radius:50%;background:#e2e8dc;color:#485b43;display:grid;place-items:center;font-size:13px}
.user-label{font-size:13px;line-height:1.2}
.user-label small{color:var(--muted);font-size:11px;display:block;margin-top:5px}
.user{display:flex;align-items:center;gap:9px}
.main{padding:33px 36px 44px;max-width:1800px;margin:auto}
.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:27px}
.eyebrow{font-size:11px;letter-spacing:1.8px;color:#9a815a;margin-bottom:9px;font-weight:600}
.page-sub{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.7}
.page-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:21px}
.btn{border:1px solid #d7ddd2;background:#fff;border-radius:7px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;line-height:1.35;font-size:13px;font-weight:500;min-height:39px}
.btn:hover{border-color:#a4b29f;background:#fafbf8}
.btn.primary{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn.primary:hover{background:#3f4b42}
.btn.gold{background:#e2d4b4;color:#3f412f;border-color:#dbcaab}
.btn.flat{border-color:transparent;background:transparent}
.btn.sm{padding:7px 10px;min-height:32px}
.btn .icon{width:16px;height:16px}
.icon{width:20px;height:20px;flex:none}
.icon-button{background:transparent;border:1px solid var(--line);padding:8px;border-radius:7px;display:grid;place-items:center}
.mobile-toggle{display:none}
.filterbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:23px}
.filter-group{display:flex;gap:9px;flex-wrap:wrap}
.select-wrap{position:relative;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 11px;color:#586559}
.select-wrap .icon{width:16px;height:16px}
.select-wrap select{border:0;background:none;min-height:37px;padding:0 15px 0 0;font-size:13px;color:#455244;max-width:190px}
.filter-info{font-size:12px;color:#8b9488;line-height:1.5;text-align:right}
.filter-info .dot{color:#9f875b;margin-right:6px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:23px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 21px;text-align:left;width:100%;position:relative}
.kpi:hover{border-color:#bdc7b8}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#70806e;font-size:13px}
.kpi-icon{color:#8f9e86;background:#f4f6f0;padding:8px;border-radius:8px}
.kpi-icon .icon{width:16px;height:16px}
.kpi-value{font-size:29px;font-weight:600;letter-spacing:-1.4px;margin:13px 0 11px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-value .unit{font-size:13px;font-weight:500;letter-spacing:0;margin-left:7px;color:#82907e}
.kpi-foot{display:flex;align-items:center;gap:8px;font-size:12px;color:#8a9385;line-height:1.4}
.kpi-trend{color:var(--green);display:flex;gap:4px;align-items:center;white-space:nowrap}
.kpi-trend.down{color:var(--red)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);gap:21px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 23px 0}
.panel-head p{font-size:12px;color:#889281;line-height:1.5;margin-top:6px}
.panel-body{padding:22px 23px}
.panel-head .link{font-size:12px}
.link{border:0;background:transparent;color:#617b59;display:inline-flex;align-items:center;gap:5px;padding:4px 0;font-size:13px}
.link:hover{text-decoration:underline}
.link .icon{width:14px;height:14px}
.legend{display:flex;gap:14px;align-items:center;font-size:12px;color:#83907e}
.legend i{width:8px;height:8px;display:inline-block;border-radius:2px;margin-right:5px}
.chart-wrap{padding:21px 15px 6px}
.chart{width:100%;height:214px;overflow:visible}
.chart text{font-size:12px;fill:#93a08b;font-family:inherit}
.chart line.grid{stroke:#edf0e9;stroke-dasharray:3 5}
.chart .chart-label{font-size:11px;fill:#74846e}
.chart-caption{padding:0 22px 18px;font-size:12px;color:#8d9589}
.source-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #f0f2ec}
.source-row:last-child{border-bottom:0}
.source-icon{width:37px;height:37px;border:1px solid #e2e7db;background:#f6f8f1;border-radius:8px;display:grid;place-items:center;color:#70805f}
.source-name{font-size:13px;font-weight:550}
.source-meta{font-size:11px;color:#8d9786;margin-top:4px}
.source-row .tag{margin-left:auto}
.source-summary{padding:15px 16px;background:#f5f7f0;border-radius:8px;display:flex;align-items:center;justify-content:space-between;margin-top:11px;font-size:13px;color:#737e69}
.source-summary b{color:#596c4c;font-size:20px;font-weight:600}
.section-header{display:flex;align-items:center;justify-content:space-between;margin:26px 0 15px;gap:10px}
.section-header h2{font-size:17px}
.section-header p{font-size:12px;color:#8d9686}
.attention-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:24px}
.attention{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px;text-align:left}
.attention:hover{border-color:#b9c4ae}
.attention .attention-icon{color:#a98a53;background:#f7f0df;padding:9px;border-radius:8px}
.attention.red .attention-icon{color:#ab6556;background:#faefea}
.attention h3{font-size:14px;line-height:1.5}
.attention p{font-size:12px;color:#959b8f;margin-top:4px;line-height:1.6}
.attention .arrow{margin-left:auto;color:#a6ac9f;align-self:center}
.table-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:19px 23px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.table-toolbar h2{font-size:16px}
.table-toolbar .subtitle{font-size:12px;color:var(--muted);margin-top:4px}
.table-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search-box{border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:7px;padding:0 10px;background:#fbfcf8}
.search-box .icon{color:#83917b;width:15px;height:15px}
.search-box input{border:0;background:none;min-height:33px;outline:none;max-width:170px;font-size:13px;width:100%;color:var(--ink)}
.search-box:focus-within{border-color:#a6b898}
.table-scroll{overflow:auto;width:100%}
table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:13px}
th{font-size:12px;color:#8b9583;font-weight:500;text-align:left;padding:13px 23px;background:#fafbf7;border-bottom:1px solid #e8ecdf}
td{padding:16px 23px;border-bottom:1px solid #eff1ea;color:#4a5744}
tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:#fafbf7}
td.numeric,th.numeric{text-align:right;font-variant-numeric:tabular-nums}
td strong{font-weight:550;color:#35422f}
td .cell-sub{display:block;color:#94a08a;font-size:11px;margin-top:5px}
td .link{padding:0}
.table-foot{padding:13px 23px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:#8b9583;gap:10px}
.table-foot button{font-size:12px}
.empty{padding:45px 20px;text-align:center;color:#86907f;line-height:1.8}
.empty h3{color:#526149;margin-bottom:6px}
.module-note{font-size:12px;color:#8a9681;line-height:1.75;margin-top:16px}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow:auto}
.tab{border:0;background:transparent;border-bottom:2px solid transparent;padding:12px 2px;color:#8a9781;white-space:nowrap;font-size:14px}
.tab.active{color:#405d36;border-color:#617d50;font-weight:600}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.spaced{margin-bottom:22px}
.bars{display:flex;flex-direction:column;gap:18px}
.bar-row{display:grid;grid-template-columns:75px 1fr 85px;align-items:center;gap:12px;font-size:13px}
.bar-track{background:#f0f3e9;height:7px;border-radius:4px;overflow:hidden}
.bar-fill{background:#78906a;height:100%;border-radius:4px}
.bar-row .numeric{font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.customer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.customer-card{background:#fff;border:1px solid var(--line);padding:23px;border-radius:var(--radius);text-align:left}
.customer-card:hover{border-color:#a5b697}
.customer-head{display:flex;align-items:center;gap:12px;margin-bottom:21px}
.customer-symbol{background:#eef2e7;color:#677d55;height:39px;width:39px;display:grid;place-items:center;border-radius:9px;font-size:16px}
.customer-card h3{font-size:15px}
.customer-card p{font-size:12px;color:#91a085;margin-top:6px}
.customer-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid #ecf0e3;padding-top:17px}
.customer-metrics small{font-size:12px;color:#85977a;display:block}
.customer-metrics strong{font-size:19px;letter-spacing:-.5px;font-weight:550;display:block;margin-top:7px}
.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.device-card{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-align:left}
.device-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.device-illustration{height:45px;width:45px;display:grid;place-items:center;color:#677e5a;background:#f5f7ef;border-radius:8px}
.device-illustration .icon{height:24px;width:24px}
.device-card h3{font-size:15px}
.device-card p{color:#8e9b84;font-size:12px;margin-top:5px}
.device-values{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:23px}
.device-values small{font-size:12px;color:#8c9a82;display:block}
.device-values b{display:block;font-size:24px;font-weight:550;letter-spacing:-1px;margin-top:6px}
.device-values b span{font-size:12px;letter-spacing:0;margin-left:4px;font-weight:400;color:#87977d}
.device-card .bar-track{margin-top:18px}
.device-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;color:#8d9885;font-size:11px}
.integration-hero{background:#e9eddf;border:1px solid #dce2d1;border-radius:12px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:23px}
.integration-hero h2{font-size:21px;line-height:1.5;color:#445538}
.integration-hero p{font-size:13px;line-height:1.8;max-width:670px;color:#7c8a6f;margin-top:8px}
.connector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.connector-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:22px}
.connector-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.connector-top .source-icon{width:41px;height:41px}
.connector-card h3{font-size:16px}
.connector-card p{color:#8d9885;font-size:13px;line-height:1.75;margin-top:9px;min-height:44px}
.connector-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0e6;margin-top:20px;padding-top:14px;font-size:11px;color:#9aa28f}
.connector-foot .link{font-size:12px}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{padding:14px 0;border-bottom:1px solid #edf1e5;display:flex;justify-content:space-between;gap:16px;font-size:13px;line-height:1.6}
.info-list li:last-child{border:0}
.info-list small{font-size:12px;color:#8f9b84}
.stat-inline{display:flex;gap:25px;flex-wrap:wrap}
.stat-inline div small{font-size:12px;color:#8a9680;display:block}
.stat-inline div b{font-size:23px;font-weight:550;display:block;margin-top:7px}
.custom-strip{border:1px solid var(--line);background:#fff;border-radius:10px;padding:17px 22px;display:flex;align-items:center;gap:18px;margin-top:13px}
.custom-strip .source-icon{flex:none}
.custom-strip .tag{margin-left:auto}
.custom-strip h3{font-size:14px}
.custom-strip p{font-size:12px;color:#939c8b;margin-top:5px}
.footnote{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:28px;color:#99a18e;font-size:11px;letter-spacing:.3px}
.footnote strong{font-weight:500;letter-spacing:1.2px;color:#8a977e}
.overlay{position:fixed;inset:0;background:#18251e70;backdrop-filter:blur(3px);z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.modal{background:#fbfcf8;border:1px solid #e5e9df;box-shadow:var(--shadow);border-radius:15px;width:100%;max-width:780px;max-height:calc(100dvh - 48px);overflow:auto;position:relative}
.modal.wide{max-width:1000px}
.modal-head{padding:25px 28px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fbfcf8;z-index:2}
.modal-head h2{font-size:22px}
.modal-head p{font-size:13px;color:#8c9883;margin-top:8px;line-height:1.7}
.modal-body{padding:26px 28px}
.modal-footer{padding:18px 28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;bottom:0;background:#fbfcf8}
.modal-footer small{color:#8c9683;font-size:12px;line-height:1.6}
.detail-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:23px}
.detail-stat{background:#f0f3e8;border:1px solid #e3e8d9;border-radius:9px;padding:17px}
.detail-stat span{font-size:12px;color:#849476}
.detail-stat b{font-size:24px;font-weight:550;display:block;margin-top:7px;letter-spacing:-.8px}
.detail-stat.amber{background:#f7f0df;border-color:#e8dfc8}
.detail-info{display:grid;grid-template-columns:repeat(2,1fr);gap:17px 25px;margin:21px 0}
.detail-info small{display:block;font-size:12px;color:#939c87;margin-bottom:6px}
.detail-info strong{font-size:14px;font-weight:500}
.timeline{border-left:1px solid #d9e1ce;margin-left:7px;padding-left:24px}
.timeline-item{position:relative;margin-bottom:22px;font-size:13px;line-height:1.8}
.timeline-item:before{content:"";position:absolute;top:7px;left:-28px;width:7px;height:7px;background:#81976c;border-radius:50%;border:2px solid #fbfcf8;box-sizing:content-box}
.timeline-item small{display:block;color:#92a081;font-size:12px}
.notice{background:#f0f3e7;border:1px solid #dfe7d1;border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.8;color:#6c8058;margin:16px 0}
.notice.amber{background:#f9f2e2;border-color:#eee0be;color:#96762f}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#5c6a50}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{border:1px solid #dce2d3;border-radius:7px;background:#fff;padding:11px 12px;width:100%;min-height:41px;color:#3c4d32}
.field textarea{resize:vertical;min-height:160px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.field small{font-size:12px;color:#8e9a82;line-height:1.6}
.upload-box{display:flex;flex-direction:column;align-items:center;gap:9px;border:1px dashed #b9c7a8;background:#f4f7ed;padding:24px;border-radius:10px;margin:16px 0}
.upload-box input{max-width:100%;font-size:13px}
.upload-box p{font-size:12px;color:#8e9b80}
.mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.check-row{display:flex;align-items:center;gap:9px;font-size:13px;color:#758668;margin-top:16px}
.check-row input{accent-color:#67814f}
.import-errors{background:#fcf0eb;border:1px solid #ebd2c7;border-radius:9px;padding:16px;font-size:13px;color:#ae6551;line-height:1.9;margin-bottom:18px}
.toast{position:fixed;bottom:27px;left:50%;transform:translate(-50%,15px);background:#293729;color:#f0f4e9;padding:13px 20px;border-radius:9px;box-shadow:0 7px 25px #18261122;z-index:100;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:90vw;font-size:13px;line-height:1.6}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.steps{display:flex;gap:12px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:13px;color:#9aa28d}
.step b{width:24px;height:24px;border:1px solid #dae2cd;border-radius:50%;font-size:12px;font-weight:500;display:grid;place-items:center}
.step.active{color:#607a49}
.step.active b{background:#e5ecd9;border-color:#c7d4b5}
.step-line{width:30px;height:1px;background:#dce3d0}
.scenario-option{display:flex;align-items:center;gap:15px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:21px;margin-bottom:14px;text-align:left;width:100%}
.scenario-option:hover{border-color:#a5b992}
.scenario-option .source-icon{flex:none}
.scenario-option h3{font-size:15px}
.scenario-option p{font-size:13px;color:#89997a;margin-top:8px;line-height:1.7}
.scenario-option > .icon:last-child{margin-left:auto}
.pill-group{display:flex;gap:7px;flex-wrap:wrap}
.inline-count{background:#e9eedf;font-size:12px;color:#7b9065;padding:3px 8px;border-radius:4px;margin-left:7px}
.progress-label{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#91a080;margin-bottom:7px}
.progress-label b{color:#6e8858;font-weight:500}
.hidden{display:none!important}
.panel + .panel.stack{margin-top:20px}
.input-standalone{border:1px solid var(--line);border-radius:7px;background:#fff;min-height:34px;padding:6px 10px;font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:1600px){.main{padding:38px 48px}
.topbar{padding:0 48px}
.kpi-value{font-size:34px}
.chart{height:236px}
}

@media(max-width:1200px){.shell{grid-template-columns:195px minmax(0,1fr)}
.sidebar{width:195px;padding:28px 15px 20px}
.brand{padding-left:8px}
.brand-en{font-size:18px}
.workspace{padding:10px}
.nav-item{padding-left:12px}
.nav-item.active:before{left:-15px}
.main{padding:28px 23px}
.topbar{padding:0 23px}
.kpi-grid{gap:11px}
.kpi{padding:17px}
.kpi-value{font-size:25px}
.dashboard-grid{grid-template-columns:minmax(0,1.65fr) minmax(245px,1fr);gap:15px}
.attention-grid{gap:11px}
.attention{padding:13px;gap:9px}
.customer-grid,.connector-grid,.device-grid{gap:13px}
.page-head{gap:12px}
.page-tools{gap:6px}
.page-tools .btn{padding:9px 11px}
}

@media(max-width:1000px){.shell{grid-template-columns:178px minmax(0,1fr)}
.sidebar{width:178px;padding-left:12px;padding-right:12px}
.brand-en{font-size:16px;letter-spacing:1px}
.brand-cn{letter-spacing:3px;font-size:13px}
.workspace-logo{display:none}
.nav-item small{display:none}
.nav-item.active:before{left:-12px}
.topbar{height:65px}
.main{padding:26px 20px}
.page-head{flex-direction:column;gap:0}
.page-tools{padding-top:16px}
.kpi-value{font-size:24px}
.kpi{padding:16px 14px}
.kpi-icon{padding:6px}
.dashboard-grid{grid-template-columns:1fr}
.attention-grid{grid-template-columns:1fr}
.attention{padding:15px}
.customer-grid,.connector-grid,.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.source-panel .panel-body{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.source-panel .source-summary{grid-column:1/-1}
.source-row:nth-child(3){border:0}
.two-col,.integration-grid{grid-template-columns:1fr}
.integration-hero{align-items:flex-start;flex-direction:column}
.top-actions{gap:12px}
}

@media(max-width:700px){.shell{display:block}
.sidebar{transform:translateX(-100%);transition:transform .2s;width:224px;padding:30px 20px}
.shell.nav-open .sidebar{transform:translateX(0)}
.shell.nav-open:after{content:"";position:fixed;inset:0;background:#15221366;z-index:30}
.brand-en{font-size:21px}
.brand-cn{font-size:14px}
.workspace-logo{display:grid}
.nav-item small{display:block}
.main-wrap{width:100%}
.mobile-toggle{display:flex}
.topbar{padding:0 17px;height:65px;position:sticky;top:0;z-index:25}
.breadcrumbs{display:none}
.top-actions{gap:10px;margin-left:auto}
.user-label{display:none}
.main{padding:25px 17px 32px}
h1{font-size:27px}
.page-sub{font-size:13px}
.page-head{margin-bottom:20px}
.page-tools{width:100%}
.page-tools .btn{flex:1}
.filterbar{gap:11px;align-items:flex-start;flex-direction:column}
.filter-info{text-align:left}
.select-wrap{padding:0 9px}
.select-wrap select{max-width:145px;font-size:12px}
.filter-group{width:100%;flex-wrap:nowrap}
.filter-group .select-wrap{flex:1}
.filter-group .select-wrap select{width:100%}
.kpi-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.kpi{padding:17px 15px}
.kpi-value{font-size:27px;letter-spacing:-1px}
.kpi-top{font-size:12px}
.kpi-icon{padding:5px}
.kpi-foot{font-size:11px;gap:5px}
.kpi-foot span:last-child{line-height:1.4}
.panel-head{padding:20px 18px 0}
.panel-body{padding:20px 18px}
.panel-head h2{font-size:16px}
.source-panel .panel-body{grid-template-columns:1fr}
.chart-wrap{padding-left:3px;padding-right:3px}
.chart{height:190px}
.legend{gap:8px;font-size:11px}
.chart-caption{font-size:11px;padding-left:18px}
.attention-grid{gap:10px;margin-bottom:18px}
.attention p{font-size:12px}
.table-toolbar{padding:16px 18px}
.table-toolbar .table-tools{width:100%}
.search-box{flex:1}
.search-box input{max-width:none}
.table-scroll table{min-width:650px}
.table-foot{padding:13px 18px;font-size:11px}
th,td{padding-left:18px;padding-right:18px}
.customer-grid,.connector-grid,.device-grid{grid-template-columns:1fr}
.customer-card{padding:20px}
.customer-metrics strong{font-size:23px}
.device-values b{font-size:28px}
.integration-hero{padding:22px}
.integration-hero h2{font-size:19px}
.connector-card{padding:20px}
.filter-info{font-size:11px}
.footnote{align-items:flex-start;flex-direction:column;line-height:1.8}
.overlay{padding:10px}
.modal{max-height:calc(100dvh - 20px);border-radius:12px}
.modal-head{padding:20px}
.modal-head h2{font-size:20px}
.modal-body{padding:20px}
.modal-footer{padding:16px 20px;align-items:flex-start;flex-wrap:wrap}
.modal-footer .btn{margin-left:auto}
.detail-summary{gap:8px}
.detail-stat{padding:12px 10px}
.detail-stat b{font-size:20px}
.detail-stat span{font-size:11px}
.form-grid,.mapping-grid{grid-template-columns:1fr}
.detail-info{gap:16px}
.custom-strip{padding:15px;gap:12px;flex-wrap:wrap}
.custom-strip .btn{margin-left:auto}
.custom-strip .tag{margin-left:0}
.top-actions .tag{font-size:11px}
.scenario-option{padding:17px;align-items:flex-start}
.scenario-option > .icon:last-child{display:none}
.steps{gap:8px}
.step{font-size:12px}
.step-line{width:15px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* Shared HTML spacing; kept here so it follows the client display scale. */
.nav-item .nav-source-label{font-size:13px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-note{margin-top:20px}
.first-import{margin-top:17px}
.integration-grid{margin-top:23px}
.customer-card .customer-transactions{margin-top:17px}
.finance-breakdown{margin-top:22px}

/* Elements used only by the dedicated compact layout. */
.mobile-brand,.mobile-status,.drawer-close,.nav-backdrop,.mobile-bottom-nav,.mobile-filter-toggle,.filter-label,.mobile-cell-label,.mobile-only,.table-scroll-hint,.chart-mobile{display:none}
.filter-fields,.cell-value{display:contents}
.table-region{min-width:0}

/* Appended to the native base only inside (width <= 1050px).
   Shared compact navigation and controls come first; phones adapt content below.
   Keep these values in native CSS pixels: the generator never enlarges this file. */
:root { font-size: 15px; }
body { line-height: 1.5; }

/* Drawer navigation and a stable, compact top bar. */
.shell { display: block; }
.main-wrap { grid-column: auto; width: 100%; min-width: 0; }
.main { max-width: 920px; padding: 28px 24px 40px; }
.topbar {
  position: sticky; top: 0; z-index: 25;
  height: 64px; padding: 0 24px; gap: 12px;
}
.breadcrumbs, .top-actions .user, .top-actions .desktop-status { display: none; }
.mobile-toggle { display: grid; }
.mobile-brand { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mobile-brand strong { font-size: 16px; font-weight: 650; line-height: 1.4; }
.mobile-brand span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.top-actions { flex: none; gap: 10px; margin-left: auto; }
.top-actions .mobile-status { display: inline-flex; font-size: 12px; padding: 5px 8px; }
.icon-button { width: 44px; height: 44px; min-width: 44px; padding: 10px; flex: none; }
.icon-button .icon { width: 21px; height: 21px; }
.sidebar {
  width: min(320px, calc(100vw - 36px));
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 50; transform: translateX(-100%); transition: transform .2s;
  overflow-y: auto; overscroll-behavior: contain;
}
.shell.nav-open .sidebar { transform: translateX(0); }
.shell.nav-open:after { content: none; display: none; }
.drawer-close {
  display: grid; position: absolute; right: 16px;
  top: calc(16px + env(safe-area-inset-top, 0px));
  color: #d0d5cc; border-color: #ffffff26;
}
.sidebar .brand { padding: 8px 48px 26px 12px; }
.sidebar .brand-en { font-size: 21px; letter-spacing: 1.4px; }
.sidebar .brand-cn { font-size: 14px; letter-spacing: 4px; }
.sidebar .workspace { padding: 12px; }
.sidebar .workspace-logo { display: grid; flex: none; }
.sidebar .nav-item { min-height: 48px; padding: 12px 14px; }
.sidebar .nav-item span { font-size: 15px; }
.sidebar .nav-item small { display: block; }
.sidebar .nav-item.active:before { left: -20px; }
.sidebar-footer { padding: 26px 12px 0; }
.nav-backdrop { display: none; }
.shell.nav-open .nav-backdrop {
  display: block; position: fixed; inset: 0; z-index: 45;
  width: 100%; height: 100%; padding: 0; border: 0;
  background: #15221380; cursor: default;
}

/* Native reading density and controls that work with touch or a keyboard. */
.page-head { flex-direction: column; gap: 0; margin-bottom: 22px; }
.page-head > div, .panel-head > div, .section-header > div,
.customer-head > div, .source-row > div, .scenario-option > div,
.detail-info > div, .field, .customer-metrics > div, .device-values > div { min-width: 0; }
.page-sub { font-size: 15px; line-height: 1.75; }
.page-tools { gap: 8px; padding-top: 16px; width: 100%; }
.btn, .btn.sm { min-height: 44px; font-size: 14px; padding: 10px 14px; }
.page-tools .btn { padding: 10px 14px; }
.link { min-height: 44px; font-size: 14px; }
.panel-head .link { font-size: 13px; }
.tab { min-height: 44px; font-size: 15px; }
.btn, .link, .page-sub, .notice, .import-errors, .info-list,
.modal-head p, .modal-footer, .footnote { overflow-wrap: anywhere; }
.page-head h1, .panel-head h2, .table-toolbar h2, .modal-head h2 { overflow-wrap: anywhere; }
.panel-head, .section-header, .legend { flex-wrap: wrap; }
.panel-head h2, .section-header h2 { font-size: 18px; }
.panel-head p, .section-header p, .chart-caption,
.source-meta, .filter-info, .table-foot, .device-footer,
.customer-metrics small, .connector-foot, .info-list small,
.detail-info small, .detail-stat span, .field small, .timeline-item small,
.upload-box p, .custom-strip p, .attention p, .customer-card p,
.device-card p, .device-values small, .device-values b span,
.module-note, .table-toolbar .subtitle, .stat-inline div small,
.connector-foot .link, .table-foot button { font-size: 13px; }
.source-name, .custom-strip h3, .field, .info-list li { font-size: 15px; }
.source-icon { flex: none; }
.source-row .tag { flex: none; }
.source-row > div, .customer-head > div, .custom-strip > div { overflow-wrap: anywhere; }
.source-summary { gap: 12px; }
.source-summary b { flex: none; }
.legend { font-size: 13px; }
.notice, .import-errors, .timeline-item, .check-row { font-size: 14px; }
.check-row { min-height: 44px; }
.check-row input { width: 20px; height: 20px; flex: none; }
.search-box { min-width: 0; }
.search-box input, .input-standalone,
.field input, .field select, .field textarea { min-width: 0; min-height: 44px; font-size: 16px; }
.input-standalone, .field input, .field select, .field textarea { max-width: 100%; }
.field textarea { min-height: 160px; }
.upload-box input { width: 100%; min-width: 0; min-height: 44px; font-size: 14px; }
.upload-box input::file-selector-button { min-height: 44px; }
.table-tools, .table-toolbar { min-width: 0; }
.table-foot { flex-wrap: wrap; line-height: 1.6; }
.table-scroll { overscroll-behavior-x: contain; }
.table-scroll table { font-size: 14px; }
.table-scroll th, .table-scroll td .cell-sub { font-size: 13px; }
.table-scroll td .link { white-space: normal; }

/* Compact filters retain visible field names; phones collapse the whole group. */
.filterbar { display: block; margin-bottom: 20px; }
.filter-fields { display: block; min-width: 0; }
.filter-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.filter-group .select-wrap {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 8px;
  min-width: 0; padding: 9px 12px 3px; align-items: center;
}
.filter-label { display: block; grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.select-wrap > .icon { grid-column: 1; grid-row: 2; }
.filter-group .select-wrap select {
  grid-column: 2; grid-row: 2; min-width: 0; width: 100%; max-width: none;
  min-height: 44px; font-size: 16px; padding-right: 0;
}
.filter-info { text-align: left; margin-top: 9px; }
.dataset-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
.dataset-strip .filter-info { margin-top: 0; }

/* Two-column tablet cards, with dashboard charts spanning the full content. */
.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kpi { padding: 20px; min-width: 0; }
.kpi-top { font-size: 14px; }
.kpi-value {
  font-size: 30px; line-height: 1.2; letter-spacing: -1px;
  overflow-wrap: anywhere; white-space: normal;
}
.kpi-value .unit { display: inline-block; font-size: 13px; white-space: nowrap; }
.kpi-foot { flex-wrap: wrap; gap: 5px 8px; font-size: 13px; }
.kpi-icon { display: block; padding: 7px; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.attention { padding: 17px; min-width: 0; }
.attention:last-child:nth-child(odd) { grid-column: 1 / -1; }
.customer-grid, .connector-grid, .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.two-col, .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.source-panel .panel-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.source-panel .source-summary { grid-column: 1 / -1; }
.customer-card, .connector-card, .device-card { min-width: 0; padding: 22px; }
.customer-metrics strong, .device-values b, .detail-stat b, .stat-inline b { overflow-wrap: anywhere; }
.customer-metrics strong { font-size: 24px; }
.device-values b { font-size: 28px; }
.connector-foot { flex-wrap: wrap; gap: 10px; }
.integration-hero { align-items: flex-start; flex-direction: column; }
.integration-hero .btn { white-space: normal; }
.custom-strip { flex-wrap: wrap; min-width: 0; }
.custom-strip > div { min-width: 0; }
.custom-strip .btn { white-space: normal; }
.info-list li { flex-wrap: wrap; gap: 6px 12px; }
.info-list small { max-width: 100%; }
.bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; font-size: 14px; }
.bar-row > span:first-child { overflow-wrap: anywhere; }
.bar-row .numeric { grid-column: 2; grid-row: 1; font-size: 13px; }
.bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
.footnote { align-items: flex-start; flex-direction: column; font-size: 12px; line-height: 1.8; }

/* Tablet dialogs stay inset, with a separately scrollable body and touch targets. */
.overlay {
  padding: 24px; top: var(--visible-offset-top, 0px); bottom: auto;
  height: var(--visible-height, 100dvh);
}
.modal {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(var(--visible-height, 100dvh) - 48px); overflow: hidden;
}
.modal-head, .modal-footer { position: static; }
.modal-head { padding: 24px; gap: 12px; }
.modal-head > div { min-width: 0; }
.modal-body { padding: 24px; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-footer { padding: 18px 24px; flex-wrap: wrap; gap: 12px; }
.modal-footer small { min-width: 0; font-size: 13px; }
.modal-footer .btn { max-width: 100%; min-width: 0; white-space: normal; }
.detail-summary, .detail-info, .form-grid { min-width: 0; }
.detail-stat { min-width: 0; }
.detail-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-info strong { font-size: 15px; overflow-wrap: anywhere; }
.mapping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scenario-option { gap: 12px; padding: 20px; align-items: flex-start; }
.scenario-option p { font-size: 14px; }
.scenario-option .source-icon { width: 40px; height: 40px; }
.steps { gap: 10px; }
.step { font-size: 14px; }
.step-line { width: 20px; }
.toast { font-size: 14px; overflow-wrap: anywhere; }

@media (width <= 700px) {
  /* Phone shell: 16px content inset and persistent access to the main modules. */
  .main { padding: 24px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: 0 12px; gap: 8px; }
  .top-actions { gap: 6px; }
  .top-actions .mobile-status { font-size: 11px; padding: 5px 6px; }
  .mobile-brand span { font-size: 12px; }
  h1 { font-size: 27px; line-height: 1.3; letter-spacing: -.7px; }
  .eyebrow { font-size: 11px; margin-bottom: 8px; }
  .page-head { margin-bottom: 20px; }
  .page-sub { font-size: 15px; margin-top: 9px; }
  .page-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .page-tools .btn { min-width: 0; padding: 10px 8px; white-space: normal; }
  .page-tools .btn:only-child { grid-column: 1 / -1; }
  .mobile-bottom-nav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; inset: auto 0 0; z-index: 35;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: #fafbf7; border-top: 1px solid var(--line);
    box-shadow: 0 -5px 20px #1e2b2508;
  }
  .mobile-bottom-nav button {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; min-width: 0; min-height: 52px; padding: 4px 2px;
    border: 0; border-radius: 9px; background: transparent; color: var(--muted);
    font-size: 12px; line-height: 1.4;
  }
  .mobile-bottom-nav button .icon { width: 21px; height: 21px; }
  .mobile-bottom-nav button.active, .mobile-bottom-nav .bottom-nav-more[aria-expanded="true"] {
    color: #344e39; background: #edf0e4; font-weight: 600;
  }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); }

  /* Collapsed filters keep the current period and branch visible. */
  .filterbar:not(.dataset-strip) { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  .mobile-filter-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 52px; padding: 12px; text-align: left;
    border: 0; border-radius: 10px; background: transparent; font-size: 14px;
  }
  .mobile-filter-toggle > span:first-child { display: flex; align-items: center; gap: 7px; flex: none; }
  .mobile-filter-toggle > span:first-child .icon { width: 17px; height: 17px; }
  .filter-summary { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; font-size: 13px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
  .filter-summary .icon { width: 15px; height: 15px; transition: transform .2s; }
  .filterbar.is-open .filter-summary .icon { transform: rotate(90deg); }
  .filterbar .filter-fields { display: none; }
  .filterbar.is-open .filter-fields { display: block; padding: 0 12px 12px; }
  .filter-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filter-group .select-wrap { padding: 8px 9px 2px; gap: 0 5px; grid-template-columns: 16px minmax(0, 1fr); background: #fbfcf8; }
  .filter-period { grid-column: 1 / -1; }
  .filter-group .select-wrap select { min-height: 44px; font-size: 16px; }
  .filter-info { font-size: 13px; line-height: 1.65; margin-top: 10px; }

  /* Two clear KPI columns; business content continues as single cards. */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .kpi { padding: 15px 12px; }
  .kpi.kpi-wide { grid-column: 1 / -1; }
  .kpi-top { font-size: 13px; align-items: flex-start; }
  .kpi-icon { padding: 5px; }
  .kpi-icon .icon { width: 14px; height: 14px; }
  .kpi-value { font-size: clamp(24px, 6.6vw, 27px); line-height: 1.25; letter-spacing: -.8px; margin: 12px 0 10px; }
  .kpi-value .unit { margin-left: 4px; font-size: 13px; }
  .kpi-foot { font-size: 13px; gap: 4px; align-items: flex-start; }
  .kpi-trend { white-space: normal; }
  .dashboard-grid, .attention-grid, .two-col, .integration-grid,
  .customer-grid, .connector-grid, .device-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .attention:last-child:nth-child(odd) { grid-column: auto; }
  .attention { padding: 16px; gap: 12px; }
  .attention > div { min-width: 0; }
  .panel-head { padding: 18px 16px 0; gap: 10px; align-items: flex-start; }
  .panel-head h2, .section-header h2 { font-size: 18px; }
  .panel-body { padding: 18px 16px; }
  .source-panel .panel-body { grid-template-columns: minmax(0, 1fr); }
  .source-row { gap: 10px; }
  .source-row:nth-child(3) { border-bottom: 1px solid #f0f2ec; }
  .source-row:last-child { border-bottom: 0; }
  .source-summary { padding: 14px; }
  .section-header { margin-top: 24px; }
  .legend { gap: 8px 12px; font-size: 13px; }
  .chart-desktop { display: none; }
  .chart-mobile { display: block; }
  .chart-wrap { padding: 16px 8px 6px; }
  .chart-mobile .chart { width: 100%; height: auto; aspect-ratio: 360 / 210; }
  .chart-mobile .chart text { font-size: 15px; }
  .chart-caption { font-size: 13px; padding: 4px 16px 18px; line-height: 1.65; }
  .customer-card, .connector-card, .device-card { padding: 20px 16px; }
  .customer-head { margin-bottom: 18px; }
  .customer-metrics { gap: 12px; }
  .customer-metrics strong { font-size: 23px; }
  .device-values { gap: 16px; }
  .device-values b { font-size: 28px; }
  .device-footer { flex-wrap: wrap; gap: 6px; }
  .integration-hero { padding: 20px 16px; gap: 16px; }
  .integration-hero h2 { font-size: 21px; }
  .integration-hero .btn { width: 100%; }
  .custom-strip { padding: 16px; gap: 12px; }
  .custom-strip .tag { margin-left: 0; }
  .custom-strip .btn { width: 100%; margin-left: 0; }
  .info-list small { width: 100%; }
  .footnote { margin-top: 24px; font-size: 12px; }

  /* Known business tables become labelled records, with no clipped amounts.
     Arbitrary imported schemas retain their own horizontal scroll container. */
  .table-toolbar { padding: 16px; gap: 12px; align-items: flex-start; }
  .table-toolbar .table-tools { width: 100%; gap: 8px; }
  .table-tools .search-box { flex: 1 1 100%; width: 100%; }
  .search-box input { max-width: none; min-height: 44px; font-size: 16px; }
  .table-tools .btn { flex: 1; min-width: 0; white-space: normal; }
  .table-mobile-cards { overflow: visible; }
  .table-mobile-cards table { display: block; min-width: 0; width: 100%; white-space: normal; }
  .table-mobile-cards thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
  }
  .table-mobile-cards tbody { display: grid; gap: 12px; padding: 12px; }
  .table-mobile-cards tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px;
    background: #fff;
  }
  .table-mobile-cards tbody tr.mobile-row-hidden { display: none; }
  .table-mobile-cards td {
    display: block; min-width: 0; padding: 0; border: 0;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  .table-mobile-cards td:first-child { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid #edf0e9; }
  .table-mobile-cards .mobile-cell-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
  .table-mobile-cards .cell-value { display: block; min-width: 0; font-size: 15px; line-height: 1.65; }
  .table-mobile-cards td:first-child .cell-value { font-weight: 600; }
  .table-mobile-cards td.numeric .cell-value { font-size: 16px; font-variant-numeric: tabular-nums; }
  .table-mobile-cards td .cell-sub { margin-top: 3px; font-size: 13px; font-weight: 400; }
  .table-mobile-cards td .link { min-height: 44px; font-size: 15px; text-align: left; }
  .table-mobile-cards .tag { max-width: 100%; white-space: normal; }
  .table-more.mobile-only {
    display: flex; align-items: center; justify-content: center;
    width: calc(100% - 24px); margin: 0 12px 12px; padding: 12px;
    min-height: 44px; border: 1px solid var(--line); border-radius: 8px;
    background: #f7f9f1; color: var(--green); font-size: 14px; white-space: normal;
  }
  .table-more[hidden] { display: none; }
  .table-mobile-scroll { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; }
  .table-mobile-scroll table { min-width: 650px; }
  .table-scroll-hint { display: flex; align-items: center; gap: 7px; padding: 10px 16px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
  .table-scroll-hint .icon { width: 16px; height: 16px; }
  .table-foot { padding: 14px 16px; font-size: 13px; gap: 6px; }

  /* Full-height phone dialogs: only the body scrolls, controls stay reachable. */
  .overlay { padding: 0; overflow: hidden; }
  .modal, .modal.wide {
    width: 100%; max-width: none; height: 100%; max-height: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
  }
  .modal-head { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px; gap: 10px; }
  .modal-head h2 { font-size: 20px; line-height: 1.4; }
  .modal-head p { font-size: 13px; margin-top: 6px; line-height: 1.65; }
  .modal-body { padding: 18px 16px; min-height: 0; overflow-y: auto; }
  .modal-footer { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 10px; align-items: stretch; }
  .modal-footer small { flex: 1 1 100%; font-size: 13px; }
  .modal-footer .btn { flex: 1 1 120px; margin-left: 0; min-width: 0; white-space: normal; }
  .detail-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
  .detail-stat { padding: 14px 16px; }
  .detail-stat b { font-size: 26px; }
  .detail-stat span { font-size: 13px; }
  .detail-info, .form-grid, .mapping-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .notice, .import-errors { padding: 13px 14px; font-size: 14px; }
  .upload-box { padding: 18px 14px; align-items: stretch; text-align: center; }
  .upload-box > .icon { align-self: center; }
  .scenario-option { padding: 16px; gap: 12px; }
  .scenario-option h3 { font-size: 15px; }
  .scenario-option p { font-size: 14px; }
  .scenario-option > .icon:last-child { display: none; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .step { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 13px; text-align: center; }
  .step b { width: 28px; height: 28px; font-size: 13px; }
  .step-line { display: none; }
  .progress-label { font-size: 13px; flex-wrap: wrap; }
}

@media (width <= 340px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi { padding: 16px; }
  .kpi-value { font-size: 30px; }
  .filter-group { grid-template-columns: minmax(0, 1fr); }
  .filter-period { grid-column: auto; }
  .table-mobile-cards tbody tr { grid-template-columns: minmax(0, 1fr); }
  .customer-metrics { grid-template-columns: minmax(0, 1fr); }
}

}