:root { --ink:#172033; --muted:#718096; --line:#e7ebf2; --surface:#fff; --canvas:#f5f7fb; --blue:#2f6fed; --blue-soft:#edf4ff; --purple:#7667d9; --green:#16966b; --green-soft:#eaf8f2; --orange:#db8b22; --orange-soft:#fff5e5; --red:#d95555; --red-soft:#fff0f0; --shadow:0 7px 22px rgba(29,46,82,.05); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--canvas); font:14px/1.55 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { border:0; cursor:pointer; }
h1,h2,h3,p { margin:0; }
small { display:block; color:var(--muted); font-size:12px; }
code { color:#536179; background:#f4f6f9; border-radius:4px; padding:2px 5px; font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }
.entry-page { min-height:100vh; display:grid; place-items:center; padding:30px 18px; background:linear-gradient(145deg,#f5f8ff,#f8f9fc 54%,#f4f6fb); }
.entry-shell { width:min(760px,100%); }
.entry-brand { display:flex; align-items:center; gap:12px; margin-bottom:48px; color:var(--ink); }
.entry-brand strong { display:block; font-size:18px; letter-spacing:.02em; }
.entry-brand small { margin-top:2px; }
.brand-mark { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:var(--blue); font-weight:800; font-size:20px; box-shadow:0 7px 16px rgba(47,111,237,.2); }
.entry-shell h1 { font-size:32px; letter-spacing:-.02em; }
.entry-desc { max-width:580px; margin-top:10px; color:var(--muted); font-size:15px; }
.entry-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:30px; }
.entry-card { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:22px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); transition:transform .18s,box-shadow .18s,border .18s; }
.entry-card:hover { transform:translateY(-3px); border-color:#cbd9f4; box-shadow:0 14px 28px rgba(29,46,82,.1); }
.entry-card h2 { font-size:17px; }.entry-card p { margin-top:5px; color:var(--muted); font-size:13px; }.entry-arrow { color:var(--blue); font-size:13px; white-space:nowrap; }.entry-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; font-weight:800; }.user-icon { color:var(--blue); background:var(--blue-soft); }.admin-icon { color:var(--purple); background:#f1efff; }.entry-note { display:flex; align-items:center; gap:8px; margin-top:20px; color:var(--muted); font-size:12px; }.dot { width:7px;height:7px;border-radius:50%; }.dot-blue { background:var(--blue); }
.app-shell { min-height:100vh; display:flex; }.sidebar { position:fixed; z-index:20; inset:0 auto 0 0; display:flex; flex-direction:column; width:242px; padding:22px 14px; background:#182337; color:#cbd5e5; }.sidebar-brand { display:flex; align-items:center; gap:10px; padding:0 11px 26px; color:#fff; font-size:16px; font-weight:700; }.sidebar-brand .brand-mark { width:32px;height:32px;border-radius:8px;font-size:17px;box-shadow:none; }.sidebar-user { display:flex; align-items:center; gap:10px; padding:13px 10px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(255,255,255,.045); }.sidebar-user strong { display:block; color:#f8fafc; font-size:13px; }.sidebar-user small { color:#8b9bb4; margin-top:2px; }.avatar { display:grid; place-items:center; flex:none; width:30px;height:30px;border-radius:9px;font-weight:700; }.avatar-blue { color:#2d62ca;background:#dbeafe; }.avatar-dark { color:#e6edff;background:#384965; }.avatar-purple { color:#6d5cd4;background:#e9e5ff; }.avatar-orange { color:#bc7418;background:#ffecd0; }.avatar-sm { width:28px;height:28px;border-radius:8px;font-size:12px; }.main-nav { flex:1; margin-top:17px; }.nav-label { margin:18px 10px 7px; color:#697b98; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.nav-item { display:flex; align-items:center; gap:11px; margin:2px 0; padding:10px 11px; border-radius:7px; color:#aebbd0; font-size:13px; }.nav-item:hover { color:#fff; background:rgba(255,255,255,.055); }.nav-item.active { color:#fff; background:#2a62bd; box-shadow:0 4px 11px rgba(0,0,0,.11); }.nav-icon { width:18px; color:#9baac1; text-align:center; font-size:16px; }.nav-item.active .nav-icon { color:#fff; }.sidebar-footer { border-top:1px solid rgba(255,255,255,.09); padding:15px 10px 0; color:#8191aa; font-size:12px; }.sidebar-footer a:hover { color:#fff; }
.main-area { min-width:0; width:calc(100% - 242px); margin-left:242px; }.topbar { position:sticky; z-index:10; top:0; display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:0 34px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(10px); }.breadcrumb { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }.breadcrumb b { color:#c5ccd7; font-weight:400; }.breadcrumb strong { color:var(--ink); font-weight:650; }.topbar-actions { display:flex; align-items:center; gap:21px; }.icon-button { position:relative; display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 5px; border-radius:6px; color:#7d8aa0; background:transparent; }.icon-button:hover { background:#f1f4f8; color:var(--ink); }.notification-dot { position:absolute; top:3px; right:4px; width:5px;height:5px;border-radius:50%; background:var(--red); }.topbar-profile { display:flex; align-items:center; gap:8px; color:#4a586d; font-size:13px; }.topbar-profile .avatar { width:28px;height:28px; }.chevron { color:#9ba7b8; }.mobile-menu { display:none; }.page-wrap { max-width:1600px; margin:auto; padding:22px 34px 54px; }.demo-banner { display:flex; align-items:center; gap:10px; margin-bottom:26px; padding:9px 12px; color:#5d6d84; border:1px solid #dce7fa; border-radius:7px; background:#f7faff; font-size:12px; }.banner-tag { padding:2px 6px; border-radius:4px; color:var(--blue); background:#e4edff; font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; }.banner-close { margin-left:auto; color:#9aabc0; background:transparent; font-size:18px; }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }.page-heading h1 { font-size:27px; letter-spacing:-.025em; }.page-heading p:not(.eyebrow) { margin-top:6px; color:var(--muted); }.eyebrow { margin-bottom:5px; color:var(--blue); font-size:10px; font-weight:750; letter-spacing:.13em; }.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:0 14px; border:1px solid transparent; border-radius:6px; white-space:nowrap; font-size:13px; font-weight:650; transition:background .15s,border .15s,transform .15s; }.btn:active { transform:translateY(1px); }.btn-primary { color:#fff; background:var(--blue); box-shadow:0 4px 10px rgba(47,111,237,.16); }.btn-primary:hover { background:#245fd4; }.btn-ghost { color:#53627a; border-color:#dbe2eb; background:#fff; }.btn-ghost:hover { color:var(--blue); border-color:#bfd0ed; background:#f8fbff; }.btn-warning { color:#a86a14; background:#fff; border-color:#f0cd92; }.btn-small { min-height:30px; padding:0 10px; font-size:12px; }.text-button { padding:3px 0; color:var(--blue); background:transparent; font-size:12px; }.text-button:hover { text-decoration:underline; }.select,.input,.textarea { width:100%; border:1px solid #dce2eb; border-radius:6px; color:#334157; background:#fff; outline:none; }.select:focus,.input:focus,.textarea:focus { border-color:#94b5f1; box-shadow:0 0 0 3px #edf4ff; }.select { height:36px; padding:0 10px; }.select.compact { width:auto; min-width:115px; height:31px; font-size:12px; }.input { height:39px; padding:0 11px; }.textarea { min-height:90px; padding:10px 11px; resize:vertical; }.field { display:block; margin-bottom:16px; }.field>span { display:block; margin-bottom:6px; color:#58667a; font-size:12px; font-weight:650; }.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.panel { min-width:0; margin-bottom:16px; padding:20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); box-shadow:var(--shadow); }.panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:18px; }.panel-header h2,.panel h2 { font-size:15px; }.panel-header p,.panel-intro { margin-top:4px; color:var(--muted); font-size:12px; }.content-grid { display:grid; gap:16px; }.content-grid-2-1 { grid-template-columns:minmax(0,2fr) minmax(300px,1fr); }.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }.stat-card { position:relative; min-height:132px; overflow:hidden; padding:17px 18px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:var(--shadow); }.stat-label { color:#718096; font-size:12px; }.stat-value { position:relative; z-index:1; margin-top:9px; color:#1b2a42; font-size:27px; font-weight:750; letter-spacing:-.04em; }.stat-value span { color:#7c899c; font-size:12px; font-weight:500; letter-spacing:0; }.text-warning { color:#d4871b!important; }.stat-foot { margin-top:7px; color:#6f7e92; font-size:11px; }.stat-foot.positive { color:var(--green); }.stat-foot.muted { color:#98a4b4; }.stat-watermark { position:absolute; right:13px; bottom:-7px; color:#eef2f8; font-size:64px; font-weight:800; }.notice { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:13px 15px; border:1px solid #f1d6a6; border-radius:8px; background:var(--orange-soft); }.notice-symbol { display:grid; place-items:center; flex:none; width:22px;height:22px;border-radius:50%;color:#a96914;background:#ffe7b5;font-weight:800; }.notice strong { display:block; color:#8d5c19; font-size:13px; }.notice p { margin-top:3px; color:#9a7139; font-size:12px; }.notice .btn { margin-left:auto; }.notice-close { align-self:flex-start; color:#b38b57; background:transparent; font-size:18px; }.progress { width:92px; height:4px; margin-top:6px; overflow:hidden; border-radius:4px; background:#edf0f4; }.progress i { display:block; height:100%; border-radius:4px; background:var(--blue); }.progress-lg { width:100%; height:6px; margin-top:18px; }.tag,.status { display:inline-flex; align-items:center; min-height:21px; padding:0 7px; border-radius:4px; font-size:11px; white-space:nowrap; }.tag-blue { color:#356dcf; background:#edf4ff; }.tag-purple { color:#6f61c8; background:#f0edff; }.tag-gray { color:#68768b; background:#f1f3f6; }.tag-green { color:#21835f; background:#eaf8f2; }.status-green { color:#16865f; background:var(--green-soft); }.status-yellow { color:#a86c16; background:#fff3dc; }.status-red { color:#c64646; background:var(--red-soft); }.status-blue { color:#356dcf; background:var(--blue-soft); }.status-gray { color:#78869a; background:#f0f2f5; }.cell-title { display:flex; align-items:center; gap:9px; }.cell-title strong { display:block; font-size:12px; font-weight:650; }.service-mark { display:inline-grid; place-items:center; flex:none; width:28px;height:28px;border-radius:8px;color:#fff;font-size:13px;font-weight:800; }.service-mark.large { width:38px;height:38px;border-radius:10px;font-size:18px; }.service-blue { background:#3677df; }.service-purple { background:#7768d8; }.service-orange { background:#e39a37; }.service-gray { color:#78869a;background:#eef1f5; }.table-wrap { overflow-x:auto; }.table-wrap table { width:100%; min-width:680px; border-collapse:collapse; }.table-wrap th { padding:9px 10px; color:#8a96a7; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; text-align:left; white-space:nowrap; }.table-wrap td { padding:13px 10px; border-bottom:1px solid #eef1f5; color:#536176; font-size:12px; vertical-align:middle; white-space:nowrap; }.table-wrap tr:last-child td { border-bottom:0; }.table-wrap td strong { color:#2d3a4f; }.table-wrap td small { margin-top:2px; }.chart-area { display:flex; height:230px; }.chart-y { display:flex; flex:0 0 35px; flex-direction:column; justify-content:space-between; padding:2px 8px 22px 0; color:#a0abba; font-size:10px; text-align:right; }.chart { position:relative; flex:1; min-width:0; padding-bottom:22px; }.chart-grid { position:absolute; inset:0 0 22px; display:flex; flex-direction:column; justify-content:space-between; }.chart-grid i { display:block; height:1px; background:#edf0f5; }.line-chart { position:absolute; inset:0 0 22px; width:100%; height:calc(100% - 22px); overflow:visible; }.chart-line { fill:none; stroke:var(--blue); stroke-width:2.5; vector-effect:non-scaling-stroke; }.chart-fill { fill:url(#fillBlue); }.chart-line-purple { stroke:#786ad5; }.chart-fill-purple { fill:#786ad5; opacity:.1; }.chart-x { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#a0abba; font-size:10px; }.legend { display:flex; gap:12px; color:#7d8a9c; font-size:11px; }.legend i { display:inline-block; width:7px;height:7px;margin-right:4px;border-radius:50%; }.legend-blue { background:var(--blue); }.legend-purple { background:#786ad5; }.todo-list,.alert-list { display:flex; flex-direction:column; gap:4px; }.todo-item,.alert-list button { display:flex; align-items:center; gap:10px; width:100%; padding:11px 5px; color:var(--ink); border-bottom:1px solid #eef1f5; background:transparent; text-align:left; }.todo-item:last-child,.alert-list button:last-child { border-bottom:0; }.todo-item:hover,.alert-list button:hover { background:#fafbfc; }.todo-item>span:nth-child(2),.alert-list button div { flex:1; }.todo-item strong,.alert-list strong { display:block; font-size:12px; }.todo-item small,.alert-list small { margin-top:2px; }.todo-item b,.alert-list b { color:#a1adbc; font-weight:400; }.todo-item.done { opacity:.72; }.todo-item.done b { font-size:11px; }.todo-icon { display:grid; place-items:center; flex:none; width:24px;height:24px;border-radius:7px;font-size:12px;font-weight:750; }.todo-red { color:#c65050;background:#ffeded; }.todo-orange { color:#b9761c;background:#fff1d7; }.todo-green { color:#188462;background:#e7f8f0; }.todo-blue { color:#356dcf;background:#eaf2ff; }.realname-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; padding:22px 25px; border:1px solid #f2d9aa; border-radius:10px; background:linear-gradient(100deg,#fffaf0,#fffdf9); }.realname-status { display:flex; align-items:center; gap:13px; }.realname-badge { display:grid; place-items:center; width:43px;height:43px;border-radius:13px;color:#b16e17;background:#ffedc8;font-size:24px;font-weight:800; }.realname-status h2 { margin:2px 0 2px;font-size:19px; }.realname-rule { display:flex; align-items:center; gap:10px; color:#9c7b4a; font-size:12px; }.realname-rule b { padding:4px 7px;border-radius:4px;color:#a56816;background:#ffefce;font-size:11px; }.form-panel { max-width:800px; }.consent-line { display:flex; align-items:flex-start; gap:8px; margin:5px 0 18px; color:#748196; font-size:12px; }.consent-line input { margin-top:3px;accent-color:var(--blue); }.plain-list { display:flex; flex-direction:column; gap:13px; margin:0; padding:0; color:#69788d; list-style:none; font-size:12px; }.plain-list li { position:relative; padding-left:15px; }.plain-list li:before { position:absolute; left:0; top:8px; width:5px;height:5px;border-radius:50%; background:#90a0b5; content:""; }.filter-row { display:flex; gap:6px; }.filter-chip { padding:7px 11px; border:1px solid #dce3ed; border-radius:5px; color:#758298; background:#fff; font-size:12px; }.filter-chip.active { border-color:#c9dafe; color:var(--blue); background:#eef4ff; }.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }.product-card { padding:20px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:var(--shadow); }.product-head { display:flex; align-items:center; justify-content:space-between; }.product-card h2 { margin-top:17px; font-size:17px; }.product-card>p { min-height:44px; margin-top:7px; color:var(--muted); font-size:12px; }.product-meta { display:flex; gap:8px; margin-top:15px; color:#7a8798; font-size:11px; }.product-meta span { padding-right:8px; border-right:1px solid #e2e7ee; }.product-meta span:last-child { border:0; }.product-foot { display:flex; align-items:center; justify-content:space-between; margin-top:19px; padding-top:14px; border-top:1px solid #edf0f4; color:#718096; font-size:12px; }.catalog-plans { margin-top:10px; }.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.plan-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:17px; border:1px solid var(--line); border-radius:8px; background:#fbfcfe; }.plan-card.featured { border-color:#b8cdf7; background:#f7faff; }.plan-label { color:#718096; font-size:11px; }.plan-card strong { margin-top:10px; color:#1d2c43; font-size:23px; }.plan-card small { margin:3px 0 15px; }.plan-card .btn { width:100%; }.entitlement-list { display:flex; flex-direction:column; gap:14px; }.entitlement-card { padding:20px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:var(--shadow); }.entitlement-top,.entitlement-numbers { display:flex; align-items:center; justify-content:space-between; gap:20px; }.entitlement-numbers { align-items:flex-end; margin-top:22px; }.entitlement-numbers small { margin-bottom:4px; }.entitlement-numbers strong { color:#263650; font-size:17px; }.entitlement-numbers em { color:#9aa6b6; font-size:11px; font-style:normal; font-weight:400; }.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }.search-box { display:flex; align-items:center; width:270px; height:36px; padding:0 10px; border:1px solid #dce2eb; border-radius:6px; background:#fff; }.search-box span { color:#95a2b4; font-size:19px; transform:rotate(-20deg); }.search-box input { width:100%; padding-left:7px; border:0; outline:0; color:#4b5a70; font-size:12px; }.security-strip,.info-callout { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:13px 15px; border:1px solid #dbe7fb; border-radius:8px; background:#f7faff; }.strip-icon,.callout-icon { display:grid; place-items:center; flex:none; width:26px;height:26px;border-radius:8px;color:var(--blue);background:#e5efff;font-weight:800; }.security-strip strong,.info-callout strong { display:block; color:#3e5d94; font-size:12px; }.security-strip p,.info-callout p { margin-top:2px;color:#6d7f9d;font-size:11px; }.plugin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }.plugin-card { padding:20px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:var(--shadow); }.plugin-top { display:flex; align-items:flex-start; gap:11px; }.plugin-top>div:nth-child(2) { flex:1; }.plugin-top h2 { font-size:15px; }.plugin-code { display:block; margin-top:3px;color:#8996a8;font:11px ui-monospace,monospace; }.plugin-avatar { display:grid; place-items:center; width:39px;height:39px;border-radius:10px;color:#fff;font-size:18px;font-weight:800; }.plugin-tencent { background:linear-gradient(145deg,#377ee8,#5fa4f3); }.plugin-alipay { background:linear-gradient(145deg,#1a9bdd,#60c6ef); }.plugin-card>p { min-height:39px; margin-top:17px;color:#718096;font-size:12px; }.plugin-author { display:flex; align-items:center; gap:8px; padding:11px 0; border-top:1px solid #eef1f5; border-bottom:1px solid #eef1f5; font-size:11px; }.plugin-author span { color:#9aa6b4; }.plugin-author a { margin-left:auto;color:var(--blue); }.plugin-tags { display:flex; gap:6px; margin-top:12px; }.plugin-config { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding:11px; border-radius:7px;background:#fafbfc; }.plugin-config strong { display:block; margin-top:3px;color:#4e5d73;font-size:12px; }.plugin-actions { display:flex; gap:7px; margin-top:14px; }.plugin-actions .icon-button { margin-left:auto; }.metric-strip { display:grid; grid-template-columns:repeat(5,1fr); margin-bottom:16px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:var(--shadow); }.metric-strip>div { display:flex; align-items:center; gap:10px; padding:14px 17px; border-right:1px solid #eef1f5; }.metric-strip>div:last-child { border:0; }.strip-dot { width:8px;height:8px;border-radius:50%; }.strip-dot.green { background:#32b984; }.strip-dot.blue { background:#4d82ea; }.strip-dot.orange { background:#e7a142; }.strip-dot.red { background:#dc6161; }.strip-dot.purple { background:#8476d9; }.metric-strip small { white-space:nowrap; }.metric-strip strong { display:block; margin-top:3px;color:#2d3a4f;font-size:17px; }.metric-strip em { color:#9aa6b5;font-size:10px;font-style:normal;font-weight:400; }.health-list { display:flex; flex-direction:column; gap:3px; }.health-item { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid #eef1f5; }.health-item:last-child { border:0; }.health-item>div { flex:1; }.health-item strong { display:block; font-size:12px; }.health-item .status { margin-left:auto; }.date-control { display:flex; align-items:center; gap:9px; color:#8290a3;font-size:12px; }.settings-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:start; }.settings-nav { display:flex; flex-direction:column; gap:3px; padding:6px; border:1px solid var(--line); border-radius:8px;background:#fff;box-shadow:var(--shadow); }.settings-tab { padding:10px; border-radius:5px;color:#69788d;background:transparent;text-align:left;font-size:12px; }.settings-tab:hover { background:#f6f8fb; }.settings-tab.active { color:var(--blue);background:var(--blue-soft);font-weight:650; }.settings-panel { margin:0; }.settings-form { display:grid; grid-template-columns:repeat(2,1fr); column-gap:18px; }.settings-form .full { grid-column:1/-1; }.settings-panel hr { margin:10px 0 22px;border:0;border-top:1px solid #edf0f4; }.switch-list { display:flex; flex-direction:column; gap:2px; margin-top:14px; }.switch-row { position:relative; display:flex; align-items:center; justify-content:space-between; padding:13px 0;border-bottom:1px solid #eef1f5; }.switch-row span { display:flex; flex-direction:column; gap:3px; }.switch-row input { position:absolute; opacity:0; }.switch-row i { position:relative; display:block;width:38px;height:21px;border-radius:20px;background:#d3dbe7;transition:.2s; }.switch-row i:after { position:absolute; top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #b3bdca;content:"";transition:.2s; }.switch-row input:checked+i { background:var(--blue); }.switch-row input:checked+i:after { transform:translateX(17px); }.security-status { padding:14px 0;border-bottom:1px solid #eef1f5; }.security-status p { margin-top:7px;color:#718096;font-size:12px; }.security-stat { display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #eef1f5;color:#718096;font-size:12px; }.security-stat strong { color:#48566b;font-weight:550;text-align:right; }.captcha-placeholder { display:flex;align-items:center;gap:10px;margin:6px 0 18px;padding:12px;border:1px dashed #cbd8ee;border-radius:7px;background:#f8fbff; }.captcha-placeholder>span { color:var(--blue);font-size:25px; }.captcha-placeholder div { flex:1; }.captcha-placeholder strong { display:block;font-size:12px; }.role-avatar { display:inline-grid;place-items:center;width:20px;height:20px;margin-right:5px;border-radius:5px;font-size:10px;font-weight:700; }.role-admin { color:#6a5cc4;background:#eeeaff; }.role-user { color:#2e6ac9;background:#e7f0ff; }
.modal-backdrop { position:fixed;z-index:50;inset:0;display:none;place-items:center;padding:18px;background:rgba(12,23,44,.44); }.modal-backdrop.open { display:grid; }.modal { position:relative;width:min(520px,100%);max-height:90vh;overflow:auto;padding:25px;border-radius:11px;background:#fff;box-shadow:0 24px 60px rgba(13,27,52,.2); }.modal-close { position:absolute;top:12px;right:13px;color:#9ca8b8;background:transparent;font-size:23px; }.modal h2 { padding-right:28px;font-size:18px; }.modal p { margin-top:6px;color:var(--muted);font-size:12px; }.modal-form { margin-top:20px; }.modal-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:20px; }.toast { position:fixed;z-index:70;right:24px;bottom:24px;max-width:320px;transform:translateY(15px);padding:11px 15px;border:1px solid #ccebdd;border-radius:7px;color:#167a58;background:#f0fbf6;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;font-size:12px; }.toast.show { transform:translateY(0);opacity:1; }
@media (max-width:1100px) { .sidebar { width:220px; }.main-area { width:calc(100% - 220px);margin-left:220px; }.page-wrap { padding-left:22px;padding-right:22px; }.metric-strip { grid-template-columns:repeat(3,1fr); }.metric-strip>div:nth-child(3) { border-right:0; }.metric-strip>div:nth-child(n+4) { border-top:1px solid #eef1f5; }.metric-strip>div:nth-child(4) { border-right:1px solid #eef1f5; } }
@media (max-width:820px) { .sidebar { transform:translateX(-100%);transition:transform .2s;box-shadow:10px 0 30px rgba(0,0,0,.12); }.sidebar.open { transform:translateX(0); }.main-area { width:100%;margin-left:0; }.mobile-menu { display:inline-grid; }.topbar { padding:0 18px; }.topbar-profile span:not(.chevron) { display:none; }.page-wrap { padding:18px 15px 40px; }.content-grid-2-1,.plugin-grid { grid-template-columns:1fr; }.stat-grid { grid-template-columns:repeat(2,1fr); }.catalog-grid { grid-template-columns:1fr; }.settings-layout { grid-template-columns:1fr; }.settings-nav { display:grid;grid-template-columns:repeat(2,1fr); }.settings-tab { font-size:11px; }.settings-panel { min-height:500px; } }
@media (max-width:560px) { .entry-brand { margin-bottom:34px; }.entry-shell h1 { font-size:27px; }.entry-grid { grid-template-columns:1fr; }.entry-card { padding:17px; }.breadcrumb span,.breadcrumb b { display:none; }.page-heading { align-items:flex-start;flex-direction:column; }.page-heading h1 { font-size:24px; }.page-heading>.btn,.page-heading>.status { align-self:flex-start; }.stat-grid { gap:9px; }.stat-card { min-height:118px;padding:14px; }.stat-value { font-size:23px; }.stat-foot { font-size:10px; }.stat-watermark { font-size:48px; }.field-grid,.settings-form { grid-template-columns:1fr; }.settings-form .full { grid-column:auto; }.realname-hero { align-items:flex-start;flex-direction:column;padding:18px; }.realname-rule { flex-wrap:wrap; }.entitlement-numbers { align-items:flex-start;flex-wrap:wrap; }.entitlement-numbers>div { min-width:42%; }.entitlement-numbers .btn { width:100%; }.filter-row { width:100%; }.filter-chip { flex:1; }.plan-grid { grid-template-columns:1fr; }.toolbar { align-items:stretch; }.search-box { width:100%; }.toolbar>.select,.toolbar>.btn { flex:1; }.metric-strip { grid-template-columns:repeat(2,1fr); }.metric-strip>div { padding:12px 13px; }.metric-strip>div:nth-child(3) { border-right:1px solid #eef1f5; }.metric-strip>div:nth-child(even) { border-right:0; }.metric-strip>div:nth-child(n+3) { border-top:1px solid #eef1f5; }.panel { padding:15px; }.panel-header { align-items:flex-start; }.notice { align-items:flex-start;flex-wrap:wrap; }.notice .btn { margin-left:0; }.notice-close { margin-left:auto; }.topbar { min-height:58px; }.topbar-actions { gap:8px; }.demo-banner { align-items:flex-start; }.demo-banner .banner-close { margin-top:-3px; }.plugin-actions { flex-wrap:wrap; }.plugin-actions .icon-button { margin-left:0; }.chart-area { height:195px; } }