:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#202841;background:#f5f7fb;font-synthesis:none;--primary:#4059e8;--muted:#8790a5;--line:#e9edf5;--surface:#fff}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9dacff;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:27px;letter-spacing:-.6px;line-height:1.4}h2{font-size:20px;line-height:1.5}h3{font-size:15px}small{font-size:12px}.muted{color:var(--muted);font-size:13px;line-height:1.8}.eyebrow{font-size:11px;letter-spacing:2px;color:#8290bf;font-weight:700;margin-bottom:10px}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.brand{display:flex;align-items:center;gap:12px;font-weight:750;font-size:18px;letter-spacing:.5px}.brand-logo{display:grid;place-items:center;width:39px;height:39px;background:var(--primary);color:white;border-radius:13px;box-shadow:0 5px 14px #4059e82b}.brand-logo .icon{width:24px;height:24px}.brand-sub{font-size:10px;color:#9aa4bb;letter-spacing:2px;margin-top:4px;font-weight:500}.sidebar{overflow-y:auto;position:fixed;left:0;top:0;bottom:0;width:238px;background:#fff;border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column;z-index:20}.sidebar .brand{padding-left:8px;margin-bottom:43px}.nav-label{font-size:10px;color:#a1a9ba;letter-spacing:1.8px;padding:0 15px;margin:16px 0 10px}.nav{display:flex;flex-direction:column;gap:6px}.nav a{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:10px;color:#7a8399;font-size:13px;transition:.15s}.nav a:hover{background:#f6f8fe;color:var(--primary)}.nav a.active{color:var(--primary);background:#edf1ff;font-weight:650}.nav a.active:after{content:'';margin-left:auto;width:5px;height:5px;background:var(--primary);border-radius:50%}.sidebar-bottom{margin-top:auto}.sidebar-note{padding:16px;background:#f7f9ff;border:1px solid #eef1f9;border-radius:12px}.sidebar-note strong{display:flex;gap:7px;align-items:center;font-size:12px;margin-bottom:6px}.dot{display:inline-block;width:6px;height:6px;background:#28b58b;border-radius:50%}.sidebar-version{display:flex;justify-content:space-between;color:#a6afc2;font-size:10px;margin-top:19px;padding:0 5px}.shell{margin-left:238px;min-height:100vh}.topbar{height:83px;background:#ffffffd9;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;gap:20px}.breadcrumb{font-size:12px;color:#9ca5b8;display:flex;align-items:center;gap:12px}.breadcrumb strong{color:#505a75;font-weight:500}.top-actions{display:flex;align-items:center;gap:18px}.top-status{font-size:11px;color:#8790a5;display:flex;align-items:center;gap:6px}.user-chip{display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:20px}.avatar{width:33px;height:33px;background:#eaf0ff;color:var(--primary);display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:12px}.user-chip strong{font-size:12px}.icon-button{background:none;border:0;color:#8992a6;padding:6px;display:grid;place-items:center;border-radius:6px}.icon-button:hover{background:#edf1ff;color:var(--primary)}.main{max-width:1560px;margin:auto;padding:33px 38px 40px}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px}.page-heading p{margin-top:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);border:1px solid var(--primary);color:#fff;border-radius:9px;padding:11px 18px;font-weight:550;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 4px 10px #4059e81a}.button .icon{width:16px;height:16px}.button:hover{filter:brightness(.97)}.button.secondary{background:#fff;color:#64708b;border-color:#e3e8f2;box-shadow:none}.button.danger{background:#df5861;border-color:#df5861}.button.small{font-size:11px;padding:7px 10px}.text-button{border:0;background:none;color:var(--primary);padding:4px;font-size:12px;cursor:pointer}.banner{display:flex;align-items:flex-start;gap:10px;border:1px solid #e5eafa;background:#f0f4ff;color:#6578a7;padding:12px 16px;border-radius:9px;font-size:12px;line-height:1.7;margin-bottom:22px}.banner .icon{height:17px;width:17px;margin-top:2px}.banner.warning{background:#fff8ec;border-color:#f6e6c9;color:#a9792f}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:30px}.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;position:relative;min-height:128px}.stat-label{font-size:12px;color:#929bb0;display:flex;align-items:center;gap:8px}.stat-number{font-size:30px;font-weight:650;letter-spacing:-1px;line-height:1.3;margin-top:14px;font-variant-numeric:tabular-nums}.stat-number small{font-size:11px;letter-spacing:0;color:#a2aabc;margin-left:8px;font-weight:400}.stat-foot{font-size:10px;color:#a6afbf;margin-top:10px}.stat-mark{position:absolute;right:19px;top:21px;width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:#eef2ff;color:#6a7fed}.stat-mark.green{background:#edfaf5;color:#4aaf91}.stat-mark.orange{background:#fff5e9;color:#dbab5a}.stat-mark.purple{background:#f4efff;color:#a18ad5}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.tabs{display:flex;gap:5px;flex-wrap:wrap}.tab{padding:8px 13px;font-size:12px;border:0;border-radius:7px;color:#969eb0;background:transparent}.tab.active{color:var(--primary);background:#eaf0ff;font-weight:600}.search{position:relative;min-width:250px}.search .icon{position:absolute;left:12px;top:10px;width:16px;height:16px;color:#a6aec0}.search input{padding:10px 13px 10px 36px;font-size:11px;border-radius:8px;margin:0;background:#fff}.section-heading{display:flex;align-items:center;gap:10px;margin:22px 0 15px}.section-heading h2{font-size:15px}.section-count{padding:3px 6px;background:#e9eefb;color:#8594b8;border-radius:5px;font-size:9px}.section-description{margin-left:auto;color:#adb5c6;font-size:10px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.feature-card{position:relative;text-align:left;border:1px solid #e5eaf4;background:#fff;border-radius:12px;padding:21px;min-height:164px;transition:transform .15s,box-shadow .15s}.feature-card:hover{transform:translateY(-3px);box-shadow:0 9px 25px #253b7810;border-color:#cbd5fb}.feature-card:disabled{opacity:.5;cursor:not-allowed;transform:none}.feature-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.feature-icon{width:36px;height:36px;display:grid;place-items:center;background:#eef3ff;border-radius:10px;color:#6b89ed}.feature-icon.purple{background:#f4efff;color:#aa8ae2}.feature-icon.green{background:#edf9f4;color:#62b69b}.feature-icon.orange{background:#fff4e6;color:#dea95d}.feature-arrow{color:#bdc5d5}.feature-arrow .icon{width:15px;height:15px}.feature-card h3{font-size:13px;font-weight:650;margin-bottom:7px}.feature-card p{color:#9aa3b6;font-size:10px;line-height:1.6}.feature-footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a4aec2;margin-top:15px;border-top:1px solid #f0f3f8;padding-top:11px}.feature-price{color:#6c7bb5}.feature-price strong{font-size:12px;font-weight:600}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:24px}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 23px;border-bottom:1px solid #f0f2f7}.panel-heading h2{font-size:14px}.panel-body{padding:24px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap;text-align:left}th{color:#9da7b9;background:#fafbfe;font-size:10px;letter-spacing:.4px;font-weight:500;padding:13px 20px;border-bottom:1px solid #f0f2f7}td{padding:16px 20px;border-bottom:1px solid #f1f3f8;color:#68748e}tbody tr:last-child td{border:0}td strong{color:#4b5670;font-weight:500}.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;border-radius:5px;padding:4px 7px;color:#8490a8;background:#f0f3f8}.badge.green{color:#40a682;background:#edf9f3}.badge.blue{color:#5d80d4;background:#edf3ff}.badge.orange{color:#c29445;background:#fff6e6}.badge.red{color:#d47980;background:#fff0f1}.mono{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px}.empty{text-align:center;padding:46px 20px;color:#a4aec0;font-size:12px;line-height:2}.empty .icon{width:30px;height:30px;margin-bottom:12px;color:#bfc8db}.page-foot{display:flex;justify-content:space-between;color:#b0b8c8;font-size:10px;margin-top:32px}.auth-page{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff}.auth-art{padding:46px 58px;background:#f0f3ff;position:relative;overflow:hidden;display:flex;flex-direction:column}.auth-art:after{content:'';position:absolute;width:680px;height:680px;border:1px solid #dce3fc;border-radius:50%;left:-140px;top:300px;box-shadow:0 0 0 60px #e9eeff,0 0 0 61px #dfe6fd,0 0 0 120px #edf1ff;pointer-events:none}.auth-title{margin-top:110px;z-index:1}.auth-title h1{font-size:39px;font-weight:650;line-height:1.6}.auth-title h1 span{color:var(--primary)}.auth-title p{font-size:13px;color:#8896b9;line-height:2;margin-top:18px}.auth-preview{margin-top:43px;z-index:1;background:#ffffffd9;border:1px solid white;box-shadow:0 18px 55px #384e9a10;border-radius:16px;padding:22px;max-width:430px}.auth-preview-top{display:flex;justify-content:space-between;align-items:center;color:#9aa5c3;font-size:10px}.auth-preview-number{font-size:32px;color:#455989;margin:15px 0}.auth-preview-row{display:flex;align-items:center;gap:12px;font-size:11px;color:#8794b3;border-top:1px solid #edf0f9;padding:14px 0 0}.auth-preview-row .feature-icon{width:31px;height:31px}.auth-preview-row .badge{margin-left:auto}.auth-art-foot{margin-top:auto;padding-top:60px;font-size:10px;color:#a1adcb;z-index:1}.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:50px}.auth-form{width:100%;max-width:355px}.auth-form h2{font-size:25px;font-weight:650;margin-bottom:9px}.auth-form>.muted{margin-bottom:30px}.auth-form .button{width:100%;margin-top:14px;padding:13px}.auth-switch{font-size:12px;color:#98a2b7;text-align:center;margin-top:23px}.auth-security{margin-top:35px;display:flex;justify-content:center;align-items:center;gap:6px;color:#a9b3c8;font-size:10px}.auth-security .icon{width:13px;height:13px}label{display:block;font-size:12px;color:#68748e;margin:16px 0 0;line-height:1.6}input,textarea,select{display:block;width:100%;padding:11px 12px;border:1px solid #e0e6f0;border-radius:8px;background:#fff;color:#34415f;font-size:12px;margin-top:7px;transition:border-color .15s}input:hover,textarea:hover,select:hover{border-color:#bec9e4}input::placeholder,textarea::placeholder{color:#bdc5d5}textarea{resize:vertical;min-height:95px;line-height:1.8}input[type=checkbox]{display:inline-block;width:15px;height:15px;margin:0;accent-color:var(--primary)}.check-label{display:flex;align-items:center;gap:9px;line-height:1.8;padding:9px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 19px}.form-grid .wide{grid-column:1/-1}.form-error{font-size:12px;color:#d66069;margin:14px 0;line-height:1.7;min-height:0}.hint{font-size:11px;color:#a2acbf;line-height:1.8;margin-top:9px}.card-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:25px;align-items:start}.credit-card{border-radius:15px;padding:29px;background:#455be0;color:#fff;position:relative;overflow:hidden;min-height:200px}.credit-card:after{content:'';position:absolute;border:1px solid #ffffff20;width:300px;height:300px;border-radius:50%;right:-130px;top:0;box-shadow:0 0 0 30px #ffffff06,0 0 0 60px #ffffff04}.credit-card p{font-size:11px;color:#c4ceff}.credit-card strong{font-size:37px;display:block;margin:23px 0 20px;letter-spacing:1px}.credit-card footer{display:flex;justify-content:space-between;font-size:10px;color:#c7d0ff}.steps{padding:0;list-style:none;margin:0;counter-reset:steps}.steps li{position:relative;padding:3px 0 25px 41px;counter-increment:steps}.steps li:before{content:counter(steps);position:absolute;left:0;top:0;width:26px;height:26px;border:1px solid #e7ebf6;background:#f4f7ff;color:#8697c6;border-radius:50%;display:grid;place-items:center;font-size:11px}.steps h3{font-size:12px;margin-bottom:7px}.steps p{font-size:11px;color:#9da7ba;line-height:1.8}.inline-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.inline-form label{flex:1;min-width:100px}.inline-form .button{margin-top:20px}.settings-form{max-width:650px}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:20px;border-bottom:1px solid var(--line)}.settings-row h3{font-size:12px;margin-bottom:4px}.settings-row p{font-size:11px;color:#9da7ba}.settings-row:last-child{border:0}.status-summary{display:flex;align-items:center;gap:8px;font-size:11px;color:#99a4ba}.link-row{display:flex;gap:10px;flex-wrap:wrap}.copy-area{font-family:ui-monospace,monospace;background:#f8faff;font-size:11px;min-height:160px}.loading{padding:15vh 20px;text-align:center;color:#9ba7c0;font-size:13px}dialog{border:1px solid #e6ebf5;border-radius:17px;padding:29px;width:min(650px,calc(100vw - 36px));max-height:88vh;overflow:auto;color:#27334f;box-shadow:0 25px 100px #14264b30}dialog::backdrop{background:#19223a66;backdrop-filter:blur(3px)}dialog h2{margin-bottom:8px}.dialog-top{display:flex;align-items:start;justify-content:space-between}.dialog-top .icon-button{margin:-5px -8px 0 10px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px;padding-top:18px;border-top:1px solid #edf0f7}.dialog-price{display:flex;align-items:center;justify-content:space-between;background:#f5f7ff;padding:14px;border:1px solid #e9edff;border-radius:9px;margin-top:18px;font-size:12px;color:#7d8db5}.dialog-price strong{font-size:17px;color:var(--primary)}.result-data{white-space:pre-wrap;word-break:break-all;background:#f7f9fd;padding:18px;border-radius:8px;font-size:11px;line-height:1.9;max-height:45vh;overflow:auto}#toasts{position:fixed;right:25px;bottom:25px;z-index:1000;display:flex;flex-direction:column;gap:10px}.toast{border:1px solid #dce4f8;background:#fff;padding:13px 20px;border-radius:10px;box-shadow:0 7px 25px #25345817;font-size:12px;color:#617499;max-width:360px;line-height:1.7}.toast.error{color:#c86a75;border-color:#f1d5d9}.mobile-menu{display:none}.no-margin{margin:0}.space-top{margin-top:22px}.danger-text{color:#cb6d77}.positive{color:#3baf87}.right{text-align:right}.truncate{max-width:280px;white-space:normal;overflow-wrap:anywhere}.tag-row{display:flex;gap:8px;flex-wrap:wrap}.wide-button{width:100%;margin-top:20px}.auth-tabs{display:flex;gap:12px;margin:20px 0 5px}.audit-detail{max-width:340px;white-space:normal;word-break:break-all}.small-note{font-size:10px;color:#a5aec2;line-height:1.8}.column{display:flex;flex-direction:column;gap:8px}
@media(min-width:1500px){.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1150px){.sidebar{width:205px;padding:26px 15px}.shell{margin-left:205px}.main{padding:28px 24px}.topbar{padding:0 24px}.stat{padding:18px}.stat-mark{display:none}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-art{padding:40px}.auth-title h1{font-size:32px}}@media(max-width:800px){.sidebar{width:185px}.shell{margin-left:185px}.main{padding:25px 20px}.topbar{padding:0 20px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.top-status{display:none}.card-layout{grid-template-columns:1fr}.toolbar{align-items:start;flex-direction:column;gap:12px}.search{width:100%}.auth-page{grid-template-columns:1fr}.auth-art{display:none}.auth-form-wrap{min-height:100vh;padding:30px}.feature-grid{gap:10px}.feature-card{padding:16px}.section-description{display:none}}@media(max-width:600px){.sidebar{display:none;width:230px;box-shadow:5px 0 30px #23334b20}.sidebar.mobile-open{display:flex}.shell{margin-left:0}.mobile-menu{display:grid}.topbar{height:66px;padding:0 16px}.top-actions{gap:8px}.user-chip{padding-left:10px}.main{padding:24px 16px}.page-heading{gap:8px;align-items:start}h1{font-size:23px}.page-heading .button{padding:9px 11px}.stats{margin-bottom:24px}.stat-number{font-size:27px}.feature-grid{grid-template-columns:1fr 1fr}.feature-card{min-height:173px;padding:14px}.feature-card h3{font-size:12px}.feature-card p{font-size:10px}.feature-footer{font-size:9px}.feature-footer .badge{display:none}.form-grid{grid-template-columns:1fr}.panel-heading{padding:17px}.panel-body{padding:19px}.page-foot{gap:10px;font-size:9px}.breadcrumb{gap:8px}.user-chip strong{display:none}.stat{min-height:110px;padding:17px}.stat-foot{font-size:9px}.credit-card{min-height:185px}.auth-form h2{font-size:25px}dialog{padding:23px}.topbar .icon-button{padding:4px}.tabs{gap:0}.tab{padding:8px 10px}.page-heading p{font-size:11px}}

.sidebar-close{position:absolute;right:10px;top:27px}

/* Dashboard proportions: keep cards readable while using the available width. */
@media (min-width: 1151px) {
  .sidebar { width: 220px; }
  .shell { margin-left: 220px; }
  .main { max-width: 1480px; padding: 28px 32px 40px; }
  .topbar { height: 72px; padding: 0 32px; }
  .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .stats { gap: 14px; margin-bottom: 24px; }
  .stat { min-height: 116px; padding: 18px; }
  .stat-number { margin-top: 10px; font-size: 28px; }
  .stat-foot { margin-top: 7px; }
  .stat-mark { right: 17px; top: 17px; }
  .feature-card { min-height: 150px; padding: 18px; }
  .feature-card-top { margin-bottom: 11px; }
  .feature-footer { margin-top: 12px; }
  .toolbar { margin-bottom: 18px; }
  .section-heading { margin: 18px 0 12px; }
}
@media (min-width: 801px) and (max-width: 1150px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-card { min-height: 152px; }
}
@media (max-width: 420px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 136px; }
}

/* Function desk */
.feature-hub { min-width: 0; }
.feature-hub-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 15px; }
.feature-hub-heading .eyebrow { display: block; margin-bottom: 5px; font-size: 9px; }
.feature-hub-heading h2 { font-size: 18px; line-height: 1.35; }
.feature-hub-heading > p { color: #9aa5bb; font-size: 11px; padding-bottom: 3px; }
.feature-toolbar { min-width: 0; padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; gap: 12px; }
.feature-toolbar .tabs { min-width: 0; gap: 3px; }
.feature-toolbar .tab { white-space: nowrap; padding: 8px 10px; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: #f0f3f9; color: #9aa5bb; font-size: 10px; }
.tab.active .tab-count { background: #dbe4ff; color: var(--primary); }
.feature-toolbar .search { flex: 0 1 245px; min-width: 190px; }
.feature-toolbar .search input { margin: 0; padding-right: 34px; }
.search-clear { position: absolute; right: 5px; top: 4px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; color: #8d98ad; background: transparent; font-size: 19px; }
.search-clear:hover { color: var(--primary); background: #eef2ff; }
.search-clear[hidden] { display: none; }
.feature-result-count { color: #98a4b8; font-size: 10px; margin: 0 0 3px; }
.feature-result-count strong { color: #5d6c91; font-weight: 650; }
.feature-grid { align-items: stretch; }
.feature-card { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.feature-card-copy { min-width: 0; flex: 1; }
.feature-card h3 { line-height: 1.45; }
.feature-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 32px; }
.feature-footer { gap: 8px; }
.feature-footer > span:last-child { flex: none; }
.feature-card-status { margin-left: auto; padding-left: 8px; color: #9a7840; font-size: 10px; }
.feature-card-status:empty { display: none; }
.feature-card-status + .feature-arrow { margin-left: 8px; }
.feature-grid-all { margin-top: 10px; }
.feature-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; border: 1px dashed #dce4f3; border-radius: 12px; background: #fff; text-align: center; color: #929fb6; }
.feature-empty .icon { width: 27px; height: 27px; margin-bottom: 11px; }
.feature-empty strong { color: #4c5871; font-size: 13px; }
.feature-empty p { font-size: 11px; margin: 8px 0 15px; }
@media (max-width: 1120px) {
  .feature-toolbar { align-items: stretch; flex-direction: column; }
  .feature-toolbar .search { flex: none; width: 100%; }
}
@media (max-width: 600px) {
  .feature-hub-heading > p { display: none; }
  .feature-toolbar { padding: 10px; }
  .feature-toolbar .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .feature-toolbar .tab { flex: none; }
  .feature-card p { min-height: 30px; }
}

/* Keep the ordinary pages focused on one job each. */
.feature-hub-heading > p a { color: var(--primary); font-weight: 600; }
.task-filter-bar { display: flex; gap: 7px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--line); background: #fff; border-radius: 11px; width: fit-content; max-width: 100%; }
.task-filter { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #8490a8; padding: 9px 13px; border-radius: 7px; font-size: 12px; }
.task-filter.active { background: #eaf0ff; color: var(--primary); font-weight: 650; }
.task-filter span { min-width: 17px; padding: 2px 5px; background: #f0f3f8; border-radius: 8px; font-size: 10px; text-align: center; }
.task-filter.active span { background: #dbe4ff; }
.list-count { color: #97a2b8; font-size: 11px; font-weight: 400; margin-left: 7px; }
.recharge-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(270px,.8fr); gap: 20px; align-items: start; }
.recharge-layout .panel { margin-top: 0; }
.recharge-side { display: grid; gap: 20px; min-width: 0; }
.recharge-form-panel .panel-body { padding: 26px; }
.recharge-form-panel form { max-width: 550px; }
.recharge-note { border-top: 1px solid var(--line); padding-top: 17px; color: #8995ab; font-size: 11px; }
.recharge-note a { color: var(--primary); font-weight: 600; }
.recharge-info .panel-body p { color: #8c98af; font-size: 12px; line-height: 1.8; margin-bottom: 13px; }
.ledger-summary { display: flex; gap: 14px; flex-wrap: wrap; }
.ledger-summary > div { display: flex; flex-direction: column; gap: 5px; min-width: 185px; padding: 15px 18px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }
.ledger-summary span { color: #9aa4b8; font-size: 11px; }
.ledger-summary strong { color: #293550; font-size: 20px; font-variant-numeric: tabular-nums; }
@media (max-width: 850px) {
  .recharge-layout { grid-template-columns: 1fr; }
  .recharge-side { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 600px) {
  .task-filter-bar { width: 100%; justify-content: space-between; gap: 2px; }
  .task-filter { padding: 8px 6px; gap: 4px; font-size: 10px; }
  .recharge-side { grid-template-columns: 1fr; }
  .ledger-summary > div { flex: 1; min-width: 135px; }
}

/* Keep ordinary pages readable without making the whole page wider than its window. */
.shell,.main,#page-content,.panel,.panel-body { min-width: 0; }
.breadcrumb { min-width: 0; flex: 1 1 0; }
.breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { flex: none; gap: 14px; }
.user-chip { min-width: 0; }
.user-chip strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-heading > div:first-child,.settings-row > div { min-width: 0; }
.page-heading p,.settings-row p,.recharge-note { overflow-wrap: anywhere; }
.page-foot { flex-wrap: wrap; gap: 8px 18px; }
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.credit-card footer { gap: 12px; flex-wrap: wrap; }
.credit-card footer span:first-child { min-width: 0; overflow-wrap: anywhere; }
.credit-card strong { font-size: clamp(26px,4vw,37px); overflow-wrap: anywhere; }
.recharge-layout .button { min-height: 36px; }
@media (max-width: 850px) {
  .recharge-side { grid-template-columns: 1fr; }
  .top-actions { gap: 10px; }
}
@media (max-width: 600px) {
  .page-heading { flex-wrap: wrap; gap: 12px; }
  .settings-row p { line-height: 1.7; }
  .top-actions { gap: 6px; }
  .recharge-form-panel .panel-body { padding: 19px; }
}

/* Bulk feature pricing */
.pricing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line); color: #7b879d; font-size: 12px; }
.pricing-toolbar > div { display: flex; align-items: center; gap: 12px; }
.pricing-toolbar strong { color: var(--primary); }
.price-select-label { display: inline-flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; font-size: 11px; cursor: pointer; }
tr.pricing-selected td { background: #f5f7ff; }
.pricing-dialog { width: min(900px, calc(100vw - 36px)); }
.pricing-dialog .form-grid { gap: 0 18px; }
.pricing-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 22px 0 10px; }

/* Shared display polish across the desk, account pages, and admin tables. */
.main { width: 100%; }
.page-heading { align-items: flex-start; }
.page-heading h1 { line-height: 1.25; }
.page-heading .muted { max-width: 680px; line-height: 1.7; }
.panel { box-shadow: 0 3px 16px #273a6510; }
.panel-heading { min-height: 59px; }
.panel-heading h2 { line-height: 1.45; }
.table-wrap { border-radius: 0 0 12px 12px; }
.table-wrap tbody tr:hover td { background: #f8faff; }
.table-wrap td { vertical-align: middle; }
.table-wrap td strong { font-weight: 600; }
.task-list-page .panel { margin-top: 18px; }
.task-list-page table { white-space: normal; min-width: 750px; }
.task-list-page th,.task-list-page td { padding: 14px 16px; }
.task-list-page td:first-child { min-width: 155px; }
.task-list-page td:nth-last-child(4) { min-width: 180px; max-width: 300px; }
.task-row-info { max-width: 270px; margin-top: 7px; color: #7d8ba5; font-size: 10px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-list-page td .small-note { line-height: 1.6; }
.task-list-page td .text-button { white-space: nowrap; }
.task-filter-bar { margin-bottom: 0; }
.task-filter:focus-visible,.feature-card:focus-visible { outline-offset: 2px; }

@media (max-width: 700px) {
  .main { padding-bottom: 30px; }
  .page-heading { margin-bottom: 19px; }
  .page-heading .button { min-height: 38px; }
  .task-list-page .panel-heading { padding: 15px 17px; }
  .task-list-page .table-wrap { overflow: visible; padding: 0 12px 12px; }
  .task-list-page table,.task-list-page tbody { display: block; min-width: 0; width: 100%; }
  .task-list-page thead { display: none; }
  .task-list-page tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 14px; border: 1px solid #e9eef7; border-radius: 10px; padding: 13px 15px; margin-top: 11px; box-shadow: 0 2px 9px #273a6509; }
  .task-list-page tbody tr:last-child { margin-bottom: 0; }
  .task-list-page td,.task-list-page td:first-child,.task-list-page td:nth-last-child(4) { display: block; min-width: 0; max-width: none; width: auto; border: 0; padding: 0; font-size: 11px; overflow-wrap: anywhere; }
  .task-list-page td:first-child,.task-list-page td[data-label="状态"] { grid-column: 1 / -1; }
  .task-list-page td:first-child { border-bottom: 1px solid #edf1f8; padding-bottom: 10px; margin-bottom: 2px; }
  .task-list-page td:before { content: attr(data-label); display: block; margin-bottom: 4px; color: #98a5bd; font-size: 10px; }
  .task-list-page td:first-child:before { display: none; }
  .task-list-page td:first-child strong { color: #2e3b5e; font-size: 13px; }
  .task-list-page td[data-label="状态"] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .task-list-page td[data-label="状态"]:before { width: 100%; margin-bottom: 0; }
  .task-row-info { max-width: none; margin-top: 0; }
  .task-list-page td[data-label="操作"] .text-button { padding: 0; min-height: 27px; }
}
.pricing-preview-heading h3 { font-size: 13px; }
.pricing-preview-heading span { color: #96a1b5; font-size: 10px; }
.pricing-preview .table-wrap { max-height: 280px; border: 1px solid var(--line); border-radius: 9px; }
.pricing-preview th { position: sticky; top: 0; z-index: 1; }
.pricing-preview th, .pricing-preview td { padding: 11px 14px; }
.pricing-diff-arrow { padding: 0 3px; color: #a3adc0; }
.pricing-preview .pricing-new-value { color: var(--primary); font-weight: 600; }
@media (max-width: 600px) {
  .pricing-toolbar { padding: 12px 15px; gap: 10px; flex-wrap: wrap; }
  .pricing-toolbar > div { margin-left: auto; gap: 6px; }
  .pricing-toolbar .button { padding: 8px 10px; }
  .pricing-preview-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .pricing-preview .table-wrap { max-height: 240px; }
}

/* Function desk: clear hierarchy and viewport-aware gutters. */
.main:has(.feature-list) {
  max-width: none;
  padding: clamp(18px, 2.2vw, 36px) clamp(16px, 2.4vw, 42px) 40px;
}
.feature-list { min-width: 0; }
.feature-list .feature-result-count {
  color: #71809d;
  font-size: 12px;
  margin: 0 0 18px;
}
.feature-list .feature-result-count strong { color: #34456b; font-weight: 700; }
.feature-list .feature-section + .feature-section { margin-top: 28px; }
.feature-list .section-heading { margin: 0 0 13px; gap: 9px; }
.feature-list .section-heading h2 { color: #24324e; font-size: 17px; font-weight: 700; }
.feature-list .section-count { color: #6479ad; background: #e9eefc; font-size: 10px; padding: 3px 7px; }
.feature-list .feature-grid { gap: clamp(12px, 1.2vw, 20px); }
.feature-list .feature-card {
  min-height: 174px;
  padding: clamp(16px, 1.4vw, 24px);
  border-color: #dce5f4;
  box-shadow: 0 2px 8px #334a7910;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.feature-list .feature-card:hover { border-color: #a9bbf4; box-shadow: 0 9px 24px #304a891c; }
.feature-list .feature-card-top { margin-bottom: 12px; }
.feature-list .feature-card h3 { color: #253452; font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.feature-list .feature-card p { color: #72809a; font-size: 11px; line-height: 1.65; }
.feature-list .feature-footer { margin-top: 14px; padding-top: 12px; color: #7b8bad; font-size: 11px; }
.feature-list .feature-price { color: #3659c6; font-weight: 600; }
.feature-list .feature-price strong { color: #2f50ce; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.feature-list .feature-arrow { color: #8495b6; }
@media (max-width: 1150px) {
  .feature-list .feature-card { min-height: 166px; }
}
@media (max-width: 800px) {
  .main:has(.feature-list) { padding: 20px clamp(14px, 3vw, 24px) 30px; }
  .feature-list .feature-section + .feature-section { margin-top: 24px; }
}
@media (max-width: 600px) {
  .feature-list .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-list .feature-card { padding: 14px; min-height: 170px; }
  .feature-list .feature-card h3 { font-size: 13px; }
  .feature-list .feature-card p { font-size: 10px; }
  .feature-list .feature-footer { font-size: 10px; gap: 5px; }
  .feature-list .feature-price strong { font-size: 15px; }
}
@media (max-width: 420px) {
  .feature-list .feature-grid { grid-template-columns: 1fr; }
  .feature-list .feature-card { min-height: 145px; }
}

/* Fit the complete function desk to a desktop browser's available height. */
@media (min-width: 1100px) and (min-height: 620px) {
  .shell:has(.feature-list) { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  .shell:has(.feature-list) > .topbar { flex: none; height: 56px; }
  .main:has(.feature-list) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    padding: clamp(12px, 2dvh, 22px) clamp(20px, 2vw, 36px) 12px;
  }
  .main:has(.feature-list) > .banner { flex: none; margin-bottom: 8px; padding-block: 7px; }
  .main:has(.feature-list) > #page-content { display: flex; flex: 1 1 0; min-height: 0; }
  .feature-list {
    display: grid;
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.5dvh, 16px);
    flex: 1 1 0;
    min-height: 0;
  }
  .feature-list .feature-result-count { margin: 0; font-size: 11px; line-height: 16px; }
  .feature-list .feature-section { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; }
  .feature-list .feature-section + .feature-section { margin: 0; }
  .feature-list .section-heading { margin: 0; }
  .feature-list .section-heading h2 { font-size: 15px; line-height: 22px; }
  .feature-list .section-count { padding-block: 2px; }
  .feature-list .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-height: 0; }
  .feature-list .feature-card { min-height: 0; padding: clamp(12px, 1.7dvh, 18px) 17px; }
  .feature-list .feature-card-top { margin-bottom: 8px; }
  .feature-list .feature-icon { width: 30px; height: 30px; border-radius: 9px; }
  .feature-list .feature-icon .icon { width: 18px; height: 18px; }
  .feature-list .feature-card h3 { font-size: 14px; margin-bottom: 5px; }
  .feature-list .feature-card p { min-height: 0; font-size: 11px; line-height: 1.5; }
  .feature-list .feature-footer { flex: none; margin-top: 8px; padding-top: 8px; font-size: 10px; }
  .feature-list .feature-price strong { font-size: 16px; }
  .main:has(.feature-list) > .page-foot { flex: none; margin-top: 10px; font-size: 9px; line-height: 14px; }
}
@media (min-width: 1100px) and (min-height: 620px) and (max-height: 800px) {
  .feature-list .feature-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 10px; align-items: start; }
  .feature-list .feature-card-top { margin: 0; }
  .feature-list .feature-card-top .feature-arrow { display: none; }
  .feature-list .feature-card-top .feature-card-status { position: absolute; top: 10px; right: 12px; max-width: calc(100% - 65px); background: #fff; }
  .feature-list .feature-card:has(.feature-card-status:not(:empty)) .feature-card-copy { padding-top: 17px; }
  .feature-list .feature-footer { grid-column: 1 / -1; width: 100%; margin: 0; }
}
@media (min-width: 601px) and (max-height: 900px) {
  .sidebar { padding: 14px; }
  .sidebar .brand { flex: none; padding-left: 6px; margin-bottom: 12px; font-size: 17px; }
  .sidebar .brand-logo { width: 34px; height: 34px; border-radius: 10px; }
  .sidebar .brand-sub { font-size: 9px; letter-spacing: 1.5px; }
  .sidebar .nav-label { flex: none; margin: 10px 0 6px; padding-inline: 10px; font-size: 9px; letter-spacing: 1px; line-height: 14px; }
  .sidebar .nav { flex: none; gap: 2px; }
  .sidebar .nav a { padding: clamp(3px, calc((100dvh - 500px) / 30), 8px) 10px; gap: 10px; font-size: 12px; line-height: 20px; border-radius: 8px; }
  .sidebar .nav .icon { width: 18px; height: 18px; }
  .sidebar-bottom { flex: none; padding-top: 10px; }
  .sidebar-note { padding: 8px 10px; border-radius: 8px; }
  .sidebar-note strong { margin: 0; font-size: 10px; }
  .sidebar-note p { display: none; }
  .sidebar-version { margin-top: 8px; padding: 0 2px; font-size: 9px; }
}
@media (min-width: 601px) and (max-height: 740px) {
  .sidebar { padding: 10px 12px; }
  .sidebar .brand { margin-bottom: 6px; }
  .sidebar .brand-sub { display: none; }
  .sidebar .nav-label { margin: 8px 0 4px; line-height: 12px; }
  .sidebar .nav { gap: 1px; }
  .sidebar .nav a { padding-block: 3px; line-height: 18px; }
  .sidebar-bottom { padding-top: 8px; }
  .sidebar-note { padding-block: 6px; }
}

/* Keep the action and price readable without changing the desktop card grid. */
.feature-list .section-heading h2 { font-size: 18px; line-height: 26px; }
.feature-list .section-count { font-size: 11px; }
.feature-list .feature-card h3 {
  color: #203252;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.4;
  margin-bottom: 6px;
}
.feature-list .feature-card p { color: #617391; font-size: 13px; line-height: 1.5; }
.feature-list .feature-footer { color: #62799e; font-size: 12px; line-height: 1.5; gap: 8px; }
.feature-list .feature-price { color: #3154c8; font-size: 12px; font-weight: 650; white-space: nowrap; }
.feature-list .feature-price strong { color: #2d50db; font-size: 20px; font-weight: 750; line-height: 1.1; }
@media (min-width: 1100px) and (min-height: 620px) {
  .feature-list .feature-card-top { margin-bottom: 8px; }
  .feature-list .feature-footer { margin-top: 7px; padding-top: 8px; }
}
@media (min-width: 1100px) and (min-height: 620px) and (max-height: 800px) {
  .feature-list .feature-section { gap: 6px; }
  .feature-list .feature-card { padding: 10px 14px; gap: 6px 8px; }
  .feature-list .feature-card h3 { font-size: 16px; margin-bottom: 4px; line-height: 1.35; }
  .feature-list .feature-card p { font-size: 12px; line-height: 1.45; }
  .feature-list .feature-footer { margin-top: 0; padding-top: 7px; }
}
@media (max-width: 600px) {
  .feature-list .feature-card { min-height: 190px; }
  .feature-list .feature-card h3 { font-size: 16px; }
  .feature-list .feature-card p { font-size: 12px; min-height: 36px; }
  .feature-list .feature-footer { font-size: 11px; gap: 5px; }
}
@media (max-width: 420px) {
  .feature-list .feature-card { min-height: 176px; }
}

.feature-list .feature-use-note { display: block; margin-top: 4px; color: #a46724; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }

/* Standalone sign-in card. Account/session behavior is shared with the app. */
.auth-page.auth-centered {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 32px 20px; background: #f7f8fa;
}
.auth-centered .auth-card {
  width: 100%; max-width: 560px; min-width: 0;
  padding: 40px 44px 30px; border: 1px solid #e1e6ef; border-radius: 30px;
  background: #fff; box-shadow: 0 22px 60px #25334a12;
}
.auth-card-header { text-align: center; }
.auth-card-logo {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px;
  border-radius: 18px; color: #5043ee; background: #efedff;
}
.auth-card-logo .icon { width: 33px; height: 33px; stroke-width: 1.65; }
.auth-system-name { margin-bottom: 8px; color: #6f6d80; font-size: 13px; font-weight: 600; }
.auth-card #auth-heading { color: #202b3e; font-size: 36px; font-weight: 750; line-height: 1.35; letter-spacing: .5px; }
.auth-card-subtitle { margin-top: 10px; color: #9693a4; font-size: 13px; line-height: 1.6; }
.auth-card #auth-form { margin-top: 28px; }
.auth-card .auth-field + .auth-field { margin-top: 19px; }
.auth-card .auth-field > label { margin: 0 0 9px; color: #4e5c72; font-size: 15px; font-weight: 650; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > .icon { position: absolute; left: 16px; width: 21px; height: 21px; color: #8297b4; pointer-events: none; }
.auth-card .auth-input-wrap input {
  width: 100%; min-width: 0; height: 58px; margin: 0; padding: 0 49px 0 48px;
  border: 1px solid #dfe5f0; border-radius: 13px; background: #fff; color: #263348; font-size: 17px;
}
.auth-card .auth-input-wrap input::placeholder { color: #b2aebe; }
.auth-card .auth-input-wrap input:focus { border-color: #786ff4; background: #fff; outline: 3px solid #efedff; outline-offset: 0; }
.auth-password-toggle {
  position: absolute; right: 10px; top: 10px; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 7px; color: #a39caf; background: transparent;
}
.auth-password-toggle:hover { color: #5043ee; background: #efedff; }
.auth-password-toggle .icon { width: 19px; height: 19px; }
.auth-card .auth-submit {
  width: 100%; min-height: 56px; margin-top: 20px; padding: 13px 18px;
  border: 1px solid #5043ee; border-radius: 13px; color: #fff; background: #5043ee;
  box-shadow: 0 8px 22px #5043ee24; font-size: 18px; font-weight: 700; letter-spacing: .5px;
}
.auth-card .auth-submit .icon { width: 18px; height: 18px; }
.auth-card .auth-switch { margin-top: 20px; color: #9691a5; font-size: 12px; }
.auth-card .auth-switch .text-button { margin-left: 3px; color: #5043ee; font-weight: 600; }
.auth-card .form-error { margin: 12px 0 0; color: #cf5d6e; overflow-wrap: anywhere; }
.auth-card .form-error:empty { display: none; }
.auth-card-footer { margin-top: 24px; padding-top: 17px; border-top: 1px solid #f0edf5; color: #9993a6; text-align: center; font-size: 11px; line-height: 1.8; }
.auth-card-footer .auth-identity { margin-top: 2px; color: #aaa4b4; }
.auth-card-footer a { display: inline-flex; align-items: center; justify-content: center; gap: 3px; margin-top: 6px; color: #8b79ae; }
.auth-card-footer a:hover { text-decoration: underline; }
.auth-card-footer a .icon { width: 11px; height: 11px; }
.auth-register-hint { margin-top: 10px; color: #9993a6; font-size: 11px; line-height: 1.8; }
.auth-mode-note { margin-top: 20px; padding: 8px; border-radius: 8px; background: #fff7e8; color: #b0803e; text-align: center; font-size: 11px; }
@media (max-width: 520px) {
  .auth-page.auth-centered { padding: 20px 16px; }
  .auth-centered .auth-card { padding: 28px 24px 23px; border-radius: 21px; }
  .auth-card-logo { width: 54px; height: 54px; margin-bottom: 13px; }
  .auth-card #auth-heading { font-size: 27px; }
  .auth-card #auth-form { margin-top: 24px; }
  .auth-card .auth-input-wrap input { font-size: 16px; }
}
@media (max-height: 800px) and (min-width: 521px) {
  .auth-page.auth-centered { padding-block: 20px; }
  .auth-centered .auth-card { padding-block: 25px 20px; }
  .auth-card-logo { width: 48px; height: 48px; margin-bottom: 10px; }
  .auth-card #auth-form { margin-top: 22px; }
  .auth-card-footer { margin-top: 19px; padding-top: 13px; }
}