:root{--blue:#1687e8;--blue2:#126fd0;--ink:#27313d;--muted:#8793a2;--line:#e8edf3;--bg:#f3f6f9;--card:#fff;--green:#20bea5;--red:#ef646b;--purple:#6964bd}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}
button,input{font:inherit}button{cursor:pointer}[hidden]{display:none!important}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,#dff2ff 0,transparent 35%),linear-gradient(145deg,#f7fbff,#edf2f7)}
.login-card{width:min(390px,calc(100vw - 32px));padding:38px 42px;background:#fff;border:1px solid #e5ebf2;border-radius:16px;box-shadow:0 22px 70px rgba(32,54,82,.14)}
.login-logo{width:50px;height:50px;display:grid;place-items:center;margin:auto;border-radius:14px;background:linear-gradient(135deg,var(--blue),#65baff);color:#fff;font-size:19px;font-weight:800}
.login-card h1{text-align:center;margin:14px 0 2px;font-size:24px}.login-card>p{text-align:center;color:var(--muted);margin:0 0 24px}
.login-card label{display:block;margin:15px 0 6px;color:#5e6977;font-weight:600}.login-card input{display:block;width:100%;height:42px;margin-top:7px;padding:0 12px;border:1px solid #dbe2ea;border-radius:7px;outline:0}.login-card input:focus{border-color:#72b6ef;box-shadow:0 0 0 3px #1687e812}
.primary-btn{border:0;border-radius:6px;padding:10px 18px;background:var(--blue);color:#fff;font-weight:600}.primary-btn:hover{background:var(--blue2)}.wide{width:100%;margin-top:16px}.form-error{min-height:22px;margin-top:10px;color:var(--red)}
.portal{min-height:100vh}.portal-head{height:64px;position:sticky;top:0;z-index:30;display:flex;align-items:center;padding:0 max(28px,calc((100vw - 1440px)/2));background:#fff;border-top:4px solid #303840;box-shadow:0 2px 10px rgba(30,50,70,.07)}
.portal-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.portal-brand span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--blue);color:#fff;font-weight:800}.portal-brand b{font-size:16px}.head-nav{margin-left:auto}.head-nav a{padding:20px;color:#596575;text-decoration:none}
.account-menu{display:flex;align-items:center;gap:10px;margin-left:22px;padding-left:20px;border-left:1px solid var(--line)}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eaf4ff;color:var(--blue);font-weight:700}.account-menu div{display:flex;flex-direction:column;min-width:92px}.account-menu small{color:var(--muted)}.account-menu button{border:0;background:transparent;color:#8793a2;padding:7px}.account-menu button:hover{color:var(--red)}
.mobile-menu{display:none;border:0;background:transparent;font-size:20px;margin-right:8px}
.portal-shell{width:min(1420px,calc(100% - 40px));margin:28px auto;display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px}
.customer-sidebar{align-self:start;background:#fff;border:1px solid var(--line);border-radius:5px;padding:18px 0;box-shadow:0 6px 24px rgba(35,55,80,.04)}.sidebar-title{padding:0 24px 14px;color:#9aa4b1;font-size:12px}.nav-item{width:100%;height:48px;display:flex;align-items:center;gap:12px;padding:0 24px;border:0;border-left:3px solid transparent;background:transparent;color:#626d7b;text-align:left}.nav-item span{width:20px;text-align:center}.nav-item:hover{background:#f7faff;color:var(--blue)}.nav-item.active{background:#f4f9ff;border-left-color:var(--blue);color:var(--blue);font-weight:600}
.customer-main{min-width:0}.view-box{min-height:500px}.page-card{background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 6px 24px rgba(35,55,80,.04)}.page-card+.page-card{margin-top:18px}.page-head{min-height:66px;display:flex;align-items:center;gap:10px;padding:17px 22px;border-bottom:1px solid var(--line)}.page-head h1{margin:0;font-size:20px;font-weight:600}.page-head .sub{color:var(--red);font-size:13px}.page-head-actions{margin-left:auto;display:flex;gap:8px}.page-body{padding:22px}.page-loading,.empty-state{padding:70px 20px;text-align:center;color:var(--muted);background:#fff;border:1px solid var(--line)}
.summary-hero{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:linear-gradient(135deg,#9187ca,#5d59af);color:#fff;border-radius:4px;overflow:hidden}.summary-half{padding:24px 28px;min-height:125px}.summary-half:first-child{border-right:1px solid #ffffff2b}.summary-half>span{font-size:13px}.summary-values{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}.summary-values b{display:block;font-size:28px;font-weight:500}.summary-values small{opacity:.85}
.quick-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}.quick-stat{padding:17px 18px;border:1px solid var(--line);border-radius:6px;background:#fff}.quick-stat span{display:block;color:var(--muted);font-size:12px}.quick-stat b{font-size:22px;font-weight:600}.trend-card{border:1px solid var(--line);border-radius:5px;padding:18px}.trend-title{text-align:center;color:#778495;margin-bottom:8px}.trend-chart{width:100%;height:240px;display:block}.trend-grid{stroke:#e9edf2;stroke-width:1}.trend-line{fill:none;stroke:var(--green);stroke-width:2.5}.trend-dot{fill:#fff;stroke:var(--green);stroke-width:2}.trend-label{font-size:11px;fill:#8b95a2}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.toolbar .search{margin-left:auto;display:flex;gap:7px}.toolbar input{height:36px;width:300px;padding:0 11px;border:1px solid #dce3eb;border-radius:5px;outline:0}.tool-btn,.small-btn{border:1px solid #dce3eb;background:#fff;color:#596575;border-radius:5px}.tool-btn{height:36px;padding:0 13px}.tool-btn:hover,.small-btn:hover{border-color:#9dc6eb;color:var(--blue)}.tool-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.table-scroll{width:100%;overflow:auto;scrollbar-color:#98a2ad #e8ebee;scrollbar-width:auto}.table-scroll::-webkit-scrollbar{height:14px;width:14px}.table-scroll::-webkit-scrollbar-track{background:#e8ebee;border-top:1px solid #d5dbe1}.table-scroll::-webkit-scrollbar-thumb{background:#98a2ad;border:3px solid #e8ebee;border-radius:8px}.customer-table{width:100%;min-width:850px;border-collapse:collapse}.customer-table th,.customer-table td{padding:12px 13px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:middle}.customer-table th{background:#fafbfc;color:#67717e;font-weight:600;white-space:nowrap}.customer-table tr:hover td{background:#fbfdff}.customer-table .number{font-weight:600;color:#3c4655}.apps-table{min-width:980px}.apps-table.wide{min-width:1280px}.apps-table th:last-child,.apps-table td:last-child{position:sticky;right:0;z-index:2;background:#fff;box-shadow:-7px 0 12px -10px #26384b}.apps-table th:last-child{z-index:3;background:#fafbfc}.apps-table tr:hover td:last-child{background:#fbfdff}.app-cell{display:flex;align-items:center;gap:11px;min-width:210px}.app-icon{width:40px;height:40px;flex:0 0 40px;border-radius:8px;object-fit:cover;background:#edf2f7}.app-icon-fallback{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#49a8ef,#6964bd);font-weight:700}.app-text b{display:block}.app-text small{display:block;color:#98a2af;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-link{display:flex;align-items:center;gap:5px;min-width:260px}.download-link input,.spare-input{height:32px;min-width:0;flex:1;border:1px solid #dfe5ec;border-radius:4px;padding:0 9px;background:#fff}.small-btn{min-height:30px;padding:4px 9px;text-decoration:none;white-space:nowrap}.small-btn.primary{background:#4e587b;border-color:#4e587b;color:#fff}.small-btn.danger{color:var(--red)}.ops{display:flex;gap:6px;white-space:nowrap}
.plain-download-link{display:block;max-width:320px;color:#277dcc;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plain-download-link:hover{text-decoration:underline}.date-filter{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.date-filter label{display:grid;gap:4px;color:#6f7b88;font-size:12px}.date-filter input,.date-filter select{height:36px;border:1px solid #dfe5ec;border-radius:4px;padding:0 9px;background:#fff;color:var(--ink)}.log-toolbar{align-items:flex-end}
.modal-log-tools{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:12px;background:#f7f9fc;border:1px solid #e5eaf0;border-radius:5px}.modal-log-tools label{display:grid;gap:4px;color:#6f7b88;font-size:12px}.modal-log-tools input,.modal-log-tools select{height:36px;border:1px solid #dfe5ec;border-radius:4px;padding:0 9px;background:#fff}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:#eaf8f5;color:#168b76;font-size:12px}.status-pill.off{background:#f1f3f5;color:#7d8792}.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pager{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:15px;color:#75808d}.pager button:disabled{opacity:.45;cursor:not-allowed}.amount-plus{color:#159477}.amount-minus{color:#e25d68}.muted{color:var(--muted)}
.customer-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:#17212c80}.customer-modal-card{width:min(780px,96vw);max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 24px 80px #14202f55}.customer-modal-card>header{height:54px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--line)}.customer-modal-card>header button{margin-left:auto;border:0;background:transparent;font-size:24px}.customer-modal-body{padding:18px;overflow:auto}.toast{position:fixed;z-index:200;right:24px;bottom:24px;max-width:420px;padding:11px 16px;border-radius:6px;background:#283542;color:#fff;box-shadow:0 12px 30px #17212c44}
@media(max-width:900px){.portal-head{padding:0 14px}.mobile-menu{display:block}.head-nav{display:none}.account-menu{margin-left:auto;border:0;padding:0}.account-menu div{display:none}.portal-shell{width:100%;margin:0;display:block}.customer-sidebar{position:fixed;z-index:40;left:0;top:64px;bottom:0;width:250px;border-radius:0;transform:translateX(-105%);transition:.2s;box-shadow:8px 0 25px #17212c22}.customer-sidebar.open{transform:none}.customer-main{padding:16px}.quick-stats{grid-template-columns:1fr}.summary-hero{grid-template-columns:1fr}.summary-half:first-child{border-right:0;border-bottom:1px solid #ffffff2b}.page-body{padding:14px}.toolbar .search{width:100%;margin-left:0}.toolbar input{width:auto;flex:1}}
@media(max-width:520px){.portal-brand b{display:none}.account-menu{gap:5px}.page-head{align-items:flex-start;flex-wrap:wrap}.page-head-actions{width:100%;margin-left:0}.summary-values b{font-size:23px}.customer-main{padding:10px}.login-card{padding:30px 24px}}