:root {
    --ink: #173128;
    --muted: #687b71;
    --line: #dce9e2;
    --paper: #ffffff;
    --canvas: #f4f8f5;
    --green: #176b42;
    --green-dark: #0d4a2c;
    --mint: #edf7f1;
    --orange: #e7773f;
    --red: #bd3d45;
    --shadow: 0 16px 48px rgba(18, 73, 48, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    background: var(--canvas);
    line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }

.site-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.site-body { background: #fff; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(220, 233, 226, .9);
    backdrop-filter: blur(16px);
}
.site-header-inner { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.site-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.site-brand strong { display: block; font-size: 17px; }
.site-brand small { display: block; font-size: 9px; color: var(--accent, var(--green)); letter-spacing: 1.7px; }
.site-logo, .admin-brand > span, .system-logo, .mini-logo, .merchant-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #fff;
    background: var(--accent, var(--green));
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(23, 107, 66, .18);
}
.site-nav { display: flex; align-items: center; gap: 8px; flex: 1; }
.site-nav a { padding: 9px 12px; color: #52655b; font-size: 13px; border-radius: 9px; white-space: nowrap; }
.site-nav a:hover, .site-nav a.active { background: var(--accent-soft, var(--mint)); color: var(--accent, var(--green)); }
.site-actions { display: flex; gap: 8px; margin-left: auto; }

.btn {
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 17px;
    font-weight: 700;
    font-size: 13px;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent, var(--green)); color: #fff; box-shadow: 0 7px 18px rgba(23, 107, 66, .18); }
.btn-primary:hover { background: var(--accent-dark, var(--green-dark)); }
.btn-ghost { background: #fff; color: var(--accent, var(--green)); border: 1px solid #cfe1d7; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 12px; }
.btn-lg { min-height: 48px; padding: 0 23px; font-size: 14px; }

.kicker { color: var(--accent, var(--green)); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.hero {
    position: relative;
    overflow: hidden;
    padding: 84px 0 70px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.82) 0, rgba(255,255,255,0) 30%),
        linear-gradient(135deg, var(--accent-soft, var(--mint)), #fff 68%);
}
.hero:before { content: ""; position: absolute; right: -180px; top: -180px; width: 520px; height: 520px; border-radius: 50%; background: var(--accent, var(--green)); opacity: .06; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; position: relative; }
.hero h1 { font-size: clamp(42px, 5.4vw, 68px); line-height: 1.12; letter-spacing: -2.4px; margin: 20px 0 22px; max-width: 720px; }
.hero p { font-size: 16px; color: var(--muted); line-height: 1.9; max-width: 680px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-tags { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; color: #768a7e; font-size: 11px; }
.hero-tags span:before { content: "✓"; color: var(--accent, var(--green)); font-weight: 900; margin-right: 6px; }
.hero-board { background: rgba(255, 255, 255, .88); border: 1px solid rgba(210, 228, 217, .8); border-radius: 24px; padding: 28px; box-shadow: var(--shadow); }
.hero-board-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.hero-board-top span { color: var(--muted); font-size: 12px; }
.hero-board-top strong { color: var(--accent, var(--green)); font-size: 42px; line-height: 1; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0; }
.feature-pills span, .mini-tag { background: var(--accent-soft, var(--mint)); color: var(--accent, var(--green)); border-radius: 7px; padding: 5px 9px; font-size: 11px; font-weight: 700; }
.hero-notice { background: #f7faf8; border-left: 3px solid var(--accent, var(--green)); border-radius: 0 9px 9px 0; padding: 12px 14px; font-size: 12px; color: #60736a; }

.site-section { padding: 56px 0; }
.site-section:nth-of-type(even) { background: #f8fbf9; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.section-heading h2 { font-size: 30px; letter-spacing: -.7px; margin: 8px 0 4px; }
.section-heading p { color: var(--muted); font-size: 13px; margin: 0; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.content-card { background: #fff; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; box-shadow: 0 8px 26px rgba(23, 69, 46, .045); }
.visual { height: 170px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--accent-soft, var(--mint)), #fff); }
.product-visual span { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 26px; background: var(--accent, var(--green)); color: #fff; font-size: 32px; font-weight: 800; box-shadow: 0 18px 36px rgba(23, 107, 66, .16); }
.card-body { padding: 18px; }
.card-body h3 { font-size: 16px; margin: 10px 0 7px; }
.card-body p { color: var(--muted); font-size: 12px; line-height: 1.7; min-height: 42px; }
.card-bottom { display: flex; align-items: baseline; gap: 5px; padding-top: 12px; border-top: 1px solid #edf3ef; }
.card-bottom strong { color: var(--orange); font-size: 20px; }
.card-bottom small { color: #86968c; }
.push-right { margin-left: auto; font-size: 11px; color: var(--accent, var(--green)); font-weight: 700; }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 20px; display: flex; gap: 16px; }
.date-chip { flex: 0 0 auto; height: fit-content; background: var(--accent, var(--green)); color: #fff; border-radius: 8px; padding: 6px 8px; font-size: 10px; font-weight: 700; }
.news-card h3 { margin: 10px 0 6px; font-size: 15px; line-height: 1.5; }
.news-card p { color: var(--muted); font-size: 12px; margin-bottom: 0; }
.article-body { display: none; }
.merchant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.merchant-card { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 18px; }
.merchant-avatar { width: 48px; height: 48px; border-radius: 14px; }
.merchant-card h3 { margin-bottom: 4px; font-size: 15px; }
.merchant-card p { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.merchant-card small { color: #829289; font-size: 11px; }
.supply-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.supply-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 20px; }
.supply-type { display: inline-block; border-radius: 7px; padding: 3px 8px; font-size: 10px; font-weight: 800; background: var(--accent-soft, var(--mint)); color: var(--accent, var(--green)); }
.supply-type.demand { background: #fff0e9; color: #c95f2e; }
.supply-card h3 { margin: 10px 0 7px; font-size: 16px; }
.supply-card p { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.supply-card .card-bottom a { margin-left: auto; color: var(--accent, var(--green)); font-size: 11px; font-weight: 700; }
.feature-banner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft, var(--mint)), #fff); border: 1px solid var(--line); }
.feature-banner h3 { margin-bottom: 4px; }
.feature-banner p { color: var(--muted); margin: 0; font-size: 13px; }
.empty-state { padding: 30px; border: 1px dashed #c8d9d0; border-radius: 14px; color: #829289; text-align: center; }

.page-head { padding: 58px 0 42px; background: linear-gradient(135deg, var(--accent-soft, #edf7f1), #fff); }
.page-head h1 { font-size: 42px; margin: 12px 0 8px; letter-spacing: -1px; }
.page-head p { color: var(--muted); margin: 0; }
.filter-bar, .filter-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-bar input { flex: 1; min-width: 240px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
.filter-tabs a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; color: var(--muted); }
.filter-tabs a.active { background: var(--accent, var(--green)); color: #fff; border-color: transparent; }
.simple-panel { max-width: 720px; margin: 0 auto; padding: 38px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.simple-panel p { color: var(--muted); }

.site-footer { background: #112b20; color: #d9e8df; padding: 42px 0 20px; }
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.site-footer strong { color: #fff; }
.site-footer p { color: #9fb6a9; font-size: 12px; margin: 8px 0 0; }
.site-footer-label { display: block; color: #7f9c8c; font-size: 10px; margin-bottom: 5px; }
.site-copyright { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; padding-top: 17px; color: #7f9c8c; font-size: 10px; }

.directory-body { min-height: 100vh; background: linear-gradient(135deg, #eaf5ee, #f8fbf9 55%, #eef3fa); }
.directory-wrap { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 70px 0; }
.directory-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.directory-head h1 { font-size: 46px; letter-spacing: -1.5px; margin: 10px 0; }
.directory-head p { color: var(--muted); }
.directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.directory-card { position: relative; overflow: hidden; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.directory-card:before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--accent); }
.directory-index { position: absolute; right: 22px; top: 17px; font-size: 48px; font-weight: 900; opacity: .06; }
.mini-logo { width: 50px; height: 50px; border-radius: 16px; margin-bottom: 20px; }
.directory-card h2 { margin: 0 0 8px; }
.directory-card p { color: var(--muted); font-size: 13px; min-height: 44px; }
.directory-card b { color: var(--accent); font-size: 12px; }
.directory-meta { display: flex; gap: 8px; margin: 18px 0; }
.directory-meta span { background: #f2f7f4; border-radius: 7px; padding: 4px 8px; color: #687b71; font-size: 10px; }

.auth-body {
    --ink: #14233d;
    --muted: #697993;
    --line: #d8e3f2;
    --green: #2468dc;
    --green-dark: #174da9;
    --mint: #edf4ff;
    min-height: 100vh;
    background: linear-gradient(135deg, #edf4ff, #f8fbff 60%, #eef5ff);
}
.auth-wrap { min-height: 100vh; width: min(1120px, calc(100% - 36px)); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 50px; padding: 50px 0; }
.auth-intro { padding: 30px; }
.auth-intro h1 { font-size: clamp(46px, 6vw, 72px); line-height: 1.12; letter-spacing: -2px; margin: 16px 0 22px; }
.auth-intro p { max-width: 560px; color: var(--muted); line-height: 1.9; }
.auth-points { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.auth-points span { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: #547065; font-size: 11px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 36px; box-shadow: var(--shadow); }
.auth-card-head { margin: 36px 0 24px; }
.auth-card-head h2 { margin-bottom: 4px; }
.auth-card-head p { color: var(--muted); font-size: 12px; }
.auth-foot { display: block; color: #98a69e; margin-top: 18px; text-align: center; }
.form-stack { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-size: 12px; color: #51675c; font-weight: 700; }
input, select, textarea {
    width: 100%;
    border: 1px solid #d8e5dd;
    border-radius: 9px;
    background: #fbfdfc;
    padding: 10px 12px;
    color: var(--ink);
    outline: none;
    font-weight: 400;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent, var(--green)); box-shadow: 0 0 0 3px rgba(23,107,66,.08); }
input[type="color"] { height: 42px; padding: 4px; cursor: pointer; }
input[readonly] { background: #f2f5f3; color: #829289; }

.admin-body {
    --ink: #14233d;
    --muted: #697993;
    --line: #d8e3f2;
    --canvas: #f3f7fc;
    --green: #2468dc;
    --green-dark: #174da9;
    --mint: #edf4ff;
    min-height: 100vh;
    background: var(--canvas);
}
.admin-sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; padding: 22px 16px; background: linear-gradient(180deg, #10294f 0%, #163b70 100%); color: #fff; display: flex; flex-direction: column; z-index: 20; }
.admin-brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 26px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-brand > span { width: 38px; height: 38px; border-radius: 12px; background: #3b82f6; box-shadow: none; }
.admin-brand strong { display: block; font-size: 14px; }
.admin-brand small { display: block; color: #83b69e; font-size: 8px; letter-spacing: 1.5px; }
.admin-sidebar nav { display: grid; gap: 5px; margin-top: 22px; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; color: #bcd3c7; font-size: 12px; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(255,255,255,.1); color: #fff; }
.admin-sidebar nav i { font-style: normal; width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; display: grid; place-items: center; font-size: 9px; }
.admin-side-note { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding: 18px 7px 2px; }
.admin-side-note span, .admin-side-note strong, .admin-side-note a { display: block; font-size: 11px; }
.admin-side-note span { color: #7da994; }
.admin-side-note strong { margin: 4px 0 10px; }
.admin-side-note a { color: #9cc6b2; }
.admin-shell { margin-left: 238px; min-height: 100vh; }
.admin-topbar { height: 68px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.admin-top-actions { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
.admin-content { padding: 28px; max-width: 1380px; margin: 0 auto; }
.page-title-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.page-title-row h1 { margin: 6px 0 4px; font-size: 32px; letter-spacing: -.8px; }
.page-title-row p { margin: 0; color: var(--muted); font-size: 12px; }
.button-row { display: flex; gap: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 20px; }
.stat-card span { color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; font-size: 34px; margin: 4px 0; color: var(--ink); }
.stat-card small { color: #91a198; font-size: 10px; }
.stat-card.accent { background: var(--green); border-color: var(--green); color: #fff; }
.stat-card.accent span, .stat-card.accent small { color: #c5e4d4; }
.stat-card.accent strong { color: #fff; }
.admin-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 18px; }
.panel-head h2 { font-size: 17px; margin-bottom: 3px; }
.panel-head p { color: var(--muted); font-size: 11px; margin: 0; }
.system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.system-card { border: 1px solid var(--line); border-radius: 15px; padding: 18px; background: #fbfdfc; }
.system-card-head { display: flex; align-items: center; gap: 11px; }
.system-card-head div { flex: 1; min-width: 0; }
.system-card h3 { margin: 0; font-size: 15px; }
.system-card small { color: #89998f; font-size: 10px; }
.system-logo { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
.status-pill { padding: 3px 8px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.status-pill.on { background: #e9f8ef; color: #187043; }
.status-pill.off { background: #f1f2f2; color: #7a8580; }
.system-card > p { color: var(--muted); font-size: 11px; min-height: 36px; margin: 14px 0 12px; }
.system-meta { display: flex; gap: 7px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid #eaf0ec; }
.system-meta span { background: #f0f5f2; border-radius: 6px; padding: 3px 7px; color: #6f8177; font-size: 9px; }
.system-card-actions { display: flex; gap: 7px; }
.system-card-actions form { margin: 0; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.three-col > div { border: 1px solid #e6eee9; background: #f9fbfa; border-radius: 12px; padding: 16px; }
.three-col span { display: block; color: #819188; font-size: 10px; }
.three-col strong { display: block; margin: 5px 0 4px; font-size: 13px; }
.three-col p { margin: 0; color: var(--muted); font-size: 11px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.data-table th, .data-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #e8eef7; font-size: 11px; }
.data-table th { background: #f6f9fd; color: #65758e; font-weight: 700; }
.data-table td small { display: block; color: #8997aa; margin-top: 2px; }
.data-table code { color: #50637d; font-size: 10px; }
.table-link { color: #1e62d0; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.feature-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feature-config { border: 1px solid var(--line); border-radius: 12px; padding: 15px; background: #fbfdfc; }
.feature-config.selected { border-color: #9acdb3; background: #f3fbf6; }
.feature-check { display: flex; gap: 10px; align-items: start; }
.feature-check input { width: auto; margin-top: 3px; }
.feature-check span { flex: 1; }
.feature-check small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; margin-top: 2px; }
.feature-key { margin: 10px 0; font-family: Consolas, monospace; color: #6e8377; font-size: 10px; }
.dependency-line { margin-top: 7px; color: #9b7b43; font-size: 9px; }
.sticky-save { position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px rgba(23,69,46,.12); }
.sticky-save span { color: var(--muted); font-size: 11px; }
.admin-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nav-preview { display: grid; gap: 7px; }
.nav-preview a { display: flex; justify-content: space-between; padding: 9px 11px; border-radius: 8px; background: #f5f8f6; font-size: 12px; }
.nav-preview small { color: #899a90; font-family: Consolas, monospace; font-size: 9px; }
.detail-list { margin: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid #edf2ef; }
.detail-list dt { color: var(--muted); font-size: 11px; }
.detail-list dd { margin: 0; font-size: 12px; text-align: right; }
.section-list { display: grid; gap: 7px; }
.section-list div { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; background: #f6f9f7; padding: 10px 12px; border-radius: 8px; }
.section-list span { color: #97a79e; font-size: 10px; }
.section-list strong { font-size: 12px; }
.section-list small { color: #8a9a91; font-family: Consolas, monospace; font-size: 9px; }
.api-example { margin-top: 16px; background: #102e23; color: #d6ebdf; border-radius: 10px; padding: 13px 15px; display: flex; align-items: center; gap: 16px; }
.api-example span { color: #7fb89a; font-size: 9px; }
.api-example code { font-family: Consolas, monospace; font-size: 11px; }
.alert { border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; font-size: 12px; }
.alert.success { background: #eaf8ef; color: #176c42; border: 1px solid #c8ead5; }
.alert.error { background: #fff0f0; color: #a7353e; border: 1px solid #f0c7ca; }

@media (max-width: 1050px) {
    .site-nav { overflow-x: auto; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-board { max-width: 720px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; }
    .system-grid, .feature-config-grid { grid-template-columns: 1fr; }
    .admin-sidebar { width: 190px; }
    .admin-shell { margin-left: 190px; }
}
@media (max-width: 760px) {
    .site-container { width: min(100% - 24px, 1180px); }
    .site-header-inner { min-height: auto; padding: 12px 0; flex-wrap: wrap; gap: 12px; }
    .site-nav { order: 3; width: 100%; overflow-x: auto; }
    .site-actions { margin-left: 0; }
    .hero { padding: 54px 0; }
    .hero h1 { font-size: 40px; }
    .card-grid, .news-grid, .merchant-grid, .supply-grid, .directory-grid, .stat-grid, .system-grid, .form-grid, .feature-config-grid, .three-col, .admin-grid-2 { grid-template-columns: 1fr; }
    .site-footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .feature-banner, .page-title-row, .sticky-save { align-items: stretch; flex-direction: column; }
    .auth-wrap { grid-template-columns: 1fr; gap: 20px; }
    .auth-intro h1 { font-size: 43px; }
    .admin-sidebar { position: static; width: auto; }
    .admin-shell { margin-left: 0; }
    .admin-content { padding: 16px; }
    .admin-body { display: block; }
}

/* Admin refresh: light navigation, calmer typography and clearer hierarchy. */
.admin-body {
    background: #f5f8fd;
    font-family: "Microsoft YaHei UI", "PingFang SC", "Source Han Sans SC", "Segoe UI", sans-serif;
    font-size: 14px;
    color: #1e2c43;
    -webkit-font-smoothing: antialiased;
}
.admin-sidebar {
    width: 224px;
    padding: 20px 14px 18px;
    color: #23324b;
    background: #fff;
    border-right: 1px solid #e7edf6;
    box-shadow: 8px 0 28px rgba(35, 74, 132, .025);
}
.admin-brand {
    padding: 4px 8px 22px;
    border-bottom: 1px solid #edf1f7;
}
.admin-brand > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, #377ce7, #1c5bc6);
    box-shadow: 0 8px 18px rgba(52, 117, 224, .2);
    font-size: 15px;
}
.admin-brand strong {
    color: #17253d;
    font-size: 15px;
    letter-spacing: -.2px;
}
.admin-brand small {
    margin-top: 2px;
    color: #8a98ad;
    font-size: 8px;
    letter-spacing: .9px;
    text-transform: uppercase;
}
.admin-sidebar nav {
    gap: 6px;
    margin-top: 18px;
}
.admin-sidebar nav a {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 10px;
    color: #5e6f87;
    font-size: 13px;
    font-weight: 600;
}
.admin-sidebar nav a:hover {
    color: #275fbf;
    background: #f5f8fd;
}
.admin-sidebar nav a.active {
    color: #1d5dcc;
    background: #edf4ff;
    box-shadow: inset 0 0 0 1px #dce9ff;
}
.admin-sidebar nav i {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 7px;
    color: #7c8ca3;
    background: #f2f5fa;
    font-size: 10px;
}
.admin-sidebar nav a.active i {
    color: #2466d5;
    background: #dceaff;
}
.admin-side-caption {
    margin-top: auto;
    padding: 16px 8px 2px;
    color: #a2adbd;
    font-size: 10px;
    letter-spacing: .4px;
}
.admin-shell {
    margin-left: 224px;
}
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    height: 72px;
    padding: 0 32px;
    border-bottom: 1px solid #e8edf5;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
}
.admin-top-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-top-title span {
    color: #8a98ab;
    font-size: 12px;
}
.admin-top-title span:after {
    content: "/";
    margin-left: 10px;
    color: #c2ccda;
}
.admin-top-title strong {
    color: #1a2941;
    font-size: 15px;
    font-weight: 700;
}
.admin-top-actions {
    gap: 14px;
    color: #6f7f94;
    font-size: 12px;
}
.system-context {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f4f7fc;
    color: #53647a;
}
.system-context i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3e8c68;
}
.admin-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 14px;
    border-left: 1px solid #e7edf5;
}
.admin-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #e9f1ff;
    color: #2663c8;
    font-size: 12px;
    font-weight: 800;
}
.admin-user-copy strong,
.admin-user-copy small {
    display: block;
    line-height: 1.35;
}
.admin-user-copy strong {
    color: #26364f;
    font-size: 12px;
}
.admin-user-copy small {
    color: #94a0b1;
    font-size: 9px;
}
.logout-link {
    padding: 7px 11px;
    border: 1px solid #dce4f0;
    border-radius: 8px;
    color: #586980;
    background: #fff;
    font-size: 12px;
}
.logout-link:hover {
    color: #1f5dc4;
    border-color: #bed1ee;
    background: #f8fbff;
}
.admin-content {
    max-width: 1360px;
    padding: 32px 34px 56px;
}
.page-title-row {
    align-items: center;
    margin-bottom: 26px;
}
.page-title-row h1 {
    margin: 7px 0 5px;
    color: #182a45;
    font-size: 29px;
    letter-spacing: -.7px;
}
.page-title-row p {
    color: #7c8ba1;
    font-size: 12.5px;
}
.kicker {
    letter-spacing: 1.5px;
}
.admin-panel {
    padding: 24px 26px;
    border: 1px solid #e5ecf6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(41, 79, 132, .035);
}
.panel-head h2 {
    color: #1d2d47;
    font-size: 18px;
}
.panel-head p {
    color: #8290a4;
    font-size: 12px;
}
.stat-grid {
    gap: 16px;
}
.stat-card {
    min-height: 130px;
    padding: 20px 21px;
    border-color: #e6edf7;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(41, 79, 132, .025);
}
.stat-card span {
    color: #7b8ba0;
    font-size: 12px;
}
.stat-card strong {
    margin: 9px 0 7px;
    font-size: 32px;
}
.stat-card small {
    font-size: 11px;
}
.system-grid {
    gap: 15px;
}
.system-card {
    padding: 20px 21px;
    border-color: #e6edf6;
    border-radius: 14px;
    background: #fff;
}
.system-card-link {
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.system-card-link:hover,
.system-card-link:focus-visible {
    transform: translateY(-2px);
    border-color: #c7d8ee;
    box-shadow: 0 14px 34px rgba(35, 76, 134, .08);
    outline: none;
}
.system-name-link:hover {
    color: #1f62cf;
}
.system-card-head h3 {
    color: #1e2e48;
    font-size: 15px;
}
.system-card small {
    font-size: 10.5px;
}
.system-card > p {
    min-height: 34px;
    margin: 14px 0 12px;
    color: #7a899d;
    font-size: 12px;
}
.system-meta span {
    padding: 4px 8px;
    color: #73839a;
    background: #f4f7fb;
    font-size: 10px;
}
.system-card-actions {
    margin-top: 13px;
}
.status-pill {
    padding: 4px 9px;
    font-size: 10px;
}
.form-grid {
    gap: 18px;
}
label {
    color: #53647b;
    font-size: 12.5px;
}
input, select, textarea {
    min-height: 42px;
    padding: 9px 12px;
    border-color: #dce5f1;
    border-radius: 9px;
    background: #fbfcfe;
    font-size: 13px;
}
textarea {
    min-height: 88px;
    resize: vertical;
}
.feature-config-grid {
    gap: 14px;
}
.feature-group-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 4px 0 11px;
}
.feature-group-title:not(:first-of-type) {
    margin-top: 26px;
}
.feature-group-title strong {
    color: #263850;
    font-size: 14px;
}
.feature-group-title span {
    color: #8795a8;
    font-size: 11px;
}
.feature-config {
    padding: 17px;
    border-color: #e4ebf5;
    border-radius: 13px;
    background: #fbfcfe;
}
.feature-config.selected {
    border-color: #b9d1f2;
    background: #f7faff;
}
.feature-check strong {
    color: #253751;
    font-size: 13px;
}
.feature-check small {
    margin-top: 4px;
    color: #8794a7;
    font-size: 11px;
}
.feature-key {
    margin: 11px 0 12px;
    color: #7589a6;
    font-size: 10px;
}
.feature-alias {
    padding-top: 11px;
    border-top: 1px solid #e9eef6;
    color: #65758d;
    font-size: 11px;
}
.feature-alias input {
    min-height: 38px;
    margin-top: 5px;
}
.feature-alias textarea {
    min-height: 58px;
    margin-top: 5px;
    resize: vertical;
}
.palette-heading {
    margin: 24px 0 12px;
    padding-top: 20px;
    border-top: 1px solid #edf1f7;
}
.palette-heading h3 {
    margin: 0 0 3px;
    color: #253751;
    font-size: 14px;
}
.palette-heading p {
    margin: 0;
    color: #8794a7;
    font-size: 11.5px;
}
.palette-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(78px, 1fr));
    gap: 10px;
}
.palette-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 9px 10px;
    border: 1px solid #e3eaf4;
    border-radius: 11px;
    background: var(--swatch-soft);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.palette-option:hover {
    transform: translateY(-1px);
    border-color: #c9d7ea;
}
.palette-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.palette-option.selected {
    border-color: var(--swatch);
    box-shadow: 0 0 0 2px rgba(40, 103, 211, .09);
}
.palette-swatch {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--swatch);
    box-shadow: 0 5px 12px rgba(33, 60, 97, .16);
}
.palette-copy strong {
    display: block;
    color: #253751;
    font-size: 12px;
}
.palette-copy small {
    display: block;
    margin-top: 2px;
    color: #718198;
    font-size: 9.5px;
    font-weight: 400;
    line-height: 1.45;
}
.dependency-line {
    font-size: 10px;
}
.sticky-save {
    border-color: #e1e9f4;
    box-shadow: 0 14px 34px rgba(35, 76, 134, .1);
}
.sticky-save span {
    font-size: 12px;
}
.data-table th,
.data-table td {
    padding: 12px 13px;
    font-size: 12px;
}
.data-table code {
    font-size: 10.5px;
}
.three-col > div {
    padding: 18px;
    border-color: #e8eef7;
    background: #fafcff;
}
.three-col strong {
    font-size: 13px;
}
.three-col p {
    font-size: 11.5px;
}
.admin-topbar .btn {
    font-size: 12px;
}
.admin-body .btn-primary {
    background: #2468dc;
}
.admin-body .btn-primary:hover {
    background: #1956bb;
}
.admin-body .alert.success {
    border-color: #cfe5f9;
    color: #195d9e;
    background: #f1f8ff;
}

@media (max-width: 1050px) {
    .admin-sidebar { width: 196px; }
    .admin-shell { margin-left: 196px; }
    .admin-content { padding: 26px 22px 48px; }
    .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .admin-sidebar {
        position: static;
        width: auto;
        padding: 13px 14px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        border-right: 0;
        border-bottom: 1px solid #e7edf6;
    }
    .admin-brand {
        padding: 0;
        border: 0;
    }
    .admin-brand > span {
        width: 34px;
        height: 34px;
    }
    .admin-brand small,
    .admin-side-caption {
        display: none;
    }
    .admin-sidebar nav {
        display: flex;
        margin: 0 0 0 auto;
    }
    .admin-sidebar nav a {
        min-height: 36px;
        padding: 7px 9px;
        font-size: 11px;
    }
    .admin-sidebar nav i {
        display: none;
    }
    .admin-shell { margin-left: 0; }
    .admin-topbar {
        height: auto;
        min-height: 64px;
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .admin-top-title span {
        display: none;
    }
    .admin-top-title span:after {
        display: none;
    }
    .admin-top-actions {
        gap: 8px;
    }
    .admin-user-copy {
        display: none;
    }
    .admin-user {
        padding-left: 0;
        border-left: 0;
    }
    .admin-content {
        padding: 20px 14px 42px;
    }
    .page-title-row h1 {
        font-size: 25px;
    }
    .palette-grid { grid-template-columns: 1fr; }
}

/* Independent subsystem console */
.system-admin-body {
    min-height: 100vh;
    margin: 0;
    color: #1b2a42;
    background: #f5f8fc;
    font-family: "Microsoft YaHei UI", "PingFang SC", "Source Han Sans SC", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.system-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 238px;
    padding: 20px 14px;
    background: #fff;
    border-right: 1px solid #e5ebf4;
    box-shadow: 8px 0 28px rgba(31, 67, 119, .025);
}
.system-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 8px 22px;
    border-bottom: 1px solid #edf1f7;
}
.system-brand > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 7px 16px rgba(31, 83, 66, .18);
    font-weight: 800;
}
.system-brand strong,
.system-brand small {
    display: block;
}
.system-brand strong {
    color: #182940;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
}
.system-brand small {
    margin-top: 2px;
    color: #8c9aaf;
    font-size: 9px;
    letter-spacing: .5px;
}
.system-sidebar nav {
    display: grid;
    gap: 5px;
    margin-top: 18px;
}
.system-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 10px;
    color: #63748b;
    font-size: 13px;
    font-weight: 600;
}
.system-sidebar nav a:hover {
    background: #f7f9fc;
    color: var(--accent);
}
.system-sidebar nav a.active {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(27, 91, 62, .08);
}
.system-sidebar nav i {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: #f2f5f9;
    color: #7b8da4;
    font-size: 10px;
    font-style: normal;
}
.system-sidebar nav a.active i {
    background: #fff;
    color: var(--accent);
}
.system-back {
    margin-top: auto;
    padding: 16px 8px 2px;
    color: #8a98aa;
    font-size: 11px;
}
.system-back:hover {
    color: var(--accent);
}
.system-nav-disabled {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 10px;
    color: #9aa6b5;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
}
.system-nav-disabled i {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: #f2f5f9;
    color: #a8b2bf;
    font-style: normal;
}
.system-nav-disabled em {
    margin-left: auto;
    padding: 1px 5px;
    border-radius: 5px;
    background: #f3f5f8;
    color: #98a4b3;
    font-size: 8px;
    font-style: normal;
}
.plant-console-body {
    background: #f3f7f4;
}
.plant-console-body .system-sidebar {
    background: linear-gradient(180deg, #0b4930, #083825);
    border-right: 0;
    box-shadow: none;
}
.plant-console-body .system-brand {
    border-bottom-color: rgba(255,255,255,.1);
}
.plant-console-body .system-brand > span {
    color: var(--accent);
    background: #fff;
}
.plant-console-body .system-brand strong {
    color: #fff;
}
.plant-console-body .system-brand small {
    color: #91c1a6;
}
.plant-console-body .system-sidebar nav a {
    color: #c5dfd0;
}
.plant-console-body .system-sidebar nav a i {
    border: 1px solid rgba(255,255,255,.14);
    background: transparent;
    color: #d4e8dc;
}
.plant-console-body .system-sidebar nav a:hover,
.plant-console-body .system-sidebar nav a.active {
    color: #fff;
    background: rgba(255,255,255,.12);
    box-shadow: none;
}
.plant-console-body .system-sidebar nav a.active i {
    color: #fff;
    background: rgba(255,255,255,.1);
}
.plant-console-body .system-nav-disabled {
    color: #88aa97;
}
.plant-console-body .system-nav-disabled i {
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: #8fb19d;
}
.plant-console-body .system-nav-disabled em {
    color: #83a692;
    background: rgba(255,255,255,.07);
}
.plant-console-body .system-back {
    color: #8eb09e;
}
.system-shell {
    min-height: 100vh;
    margin-left: 238px;
}
.system-topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 32px;
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid #e7edf5;
    backdrop-filter: blur(14px);
}
.system-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
}
.system-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.system-all-apps {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    color: #52657e;
    background: #fff;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s;
}
.system-all-apps > span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 10px;
    line-height: 1;
}
.system-all-apps:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 24%, #dce5ef);
}
.system-all-apps.active {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}
.system-all-apps.active > span {
    color: #fff;
    background: rgba(255,255,255,.16);
}
.system-breadcrumb span {
    color: #8493a8;
    font-size: 12px;
}
.system-breadcrumb b {
    color: #c4cedb;
    font-weight: 400;
}
.system-breadcrumb strong {
    color: #1b2a42;
    font-size: 15px;
}
.system-user-area {
    display: flex;
    align-items: center;
    gap: 10px;
}
.system-user-copy strong,
.system-user-copy small {
    display: block;
    line-height: 1.35;
}
.system-user-copy strong {
    color: #2a3b54;
    font-size: 11.5px;
}
.system-user-copy small {
    color: #929fb0;
    font-size: 9px;
}
.system-user-area .admin-avatar {
    background: var(--accent-soft);
    color: var(--accent);
}
.system-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 20px 42px;
}
.system-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 180px;
    margin-bottom: 20px;
    padding: 30px 34px;
    border: 1px solid #e2eaf3;
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 20%, rgba(255,255,255,.95), transparent 32%),
        linear-gradient(135deg, var(--accent-soft), #fff 70%);
}
.system-welcome h1 {
    margin: 8px 0 7px;
    color: #172a40;
    font-size: 30px;
    letter-spacing: -.6px;
}
.system-welcome p {
    max-width: 760px;
    margin: 0;
    color: #718198;
    font-size: 13px;
}
.system-mode-pill {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 9px;
    background: #fff;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(29, 72, 53, .06);
}
.system-admin-body .stat-card.accent {
    background: var(--accent);
    border-color: var(--accent);
}
.system-admin-body .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.system-admin-body .btn-primary {
    background: var(--accent);
}
.system-admin-body .btn-primary:hover {
    background: var(--accent-dark);
}
.system-admin-body input:focus,
.system-admin-body select:focus,
.system-admin-body textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 101, 72, .07);
}
.system-admin-body .kicker {
    color: var(--accent);
}
.simple-record-list {
    display: grid;
    gap: 7px;
}
.simple-record-list > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 12px;
    border-radius: 9px;
    background: #f7f9fc;
}
.simple-record-list strong {
    color: #2a3b53;
    font-size: 12px;
}
.simple-record-list span {
    color: #8997aa;
    font-size: 11px;
}
.row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.row-actions form {
    margin: 0;
}
.row-actions a,
.row-actions button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #2463c5;
    font-size: 11px;
    cursor: pointer;
}
.row-actions button {
    color: #b44f59;
}
.inline-choice {
    display: flex;
    align-items: center;
    gap: 8px;
}
.inline-choice input {
    width: auto;
    min-height: auto;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf1f7;
}
.module-empty {
    text-align: center;
    margin: 10px auto;
}
.custom-config-list {
    display: grid;
    gap: 9px;
    margin-bottom: 10px;
}
.custom-config-row {
    display: grid;
    grid-template-columns: minmax(180px, .65fr) minmax(260px, 1.35fr) 36px;
    gap: 9px;
    align-items: center;
}
.custom-config-row input {
    min-height: 40px;
}
.remove-config {
    width: 36px;
    height: 36px;
    border: 1px solid #e0e7f1;
    border-radius: 9px;
    background: #fff;
    color: #a65b63;
    font-size: 18px;
    line-height: 1;
}
.remove-config:hover {
    border-color: #edc9cd;
    background: #fff7f8;
}
.config-api-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    padding: 11px 13px;
    border-radius: 9px;
    background: #f6f9fd;
    color: #718198;
    font-size: 11px;
}
.config-api-note code {
    color: #315c98;
    font-family: Consolas, monospace;
    font-size: 10.5px;
}

@media (max-width: 1050px) {
    .system-sidebar { width: 204px; }
    .system-shell { margin-left: 204px; }
    .system-content { padding: 18px 14px 40px; }
}
@media (max-width: 760px) {
    .system-sidebar {
        position: static;
        width: auto;
        padding: 12px 14px;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        border-right: 0;
        border-bottom: 1px solid #e7edf5;
    }
    .system-brand {
        padding: 0;
        border: 0;
    }
    .system-brand > span {
        width: 34px;
        height: 34px;
    }
    .system-brand small,
    .system-back {
        display: none;
    }
    .system-sidebar nav {
        display: flex;
        gap: 3px;
        margin: 0 0 0 auto;
        overflow-x: auto;
    }
    .system-sidebar nav a {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 11px;
        white-space: nowrap;
    }
    .system-sidebar nav i {
        display: none;
    }
    .system-shell { margin-left: 0; }
    .system-topbar {
        height: auto;
        min-height: 62px;
        padding: 11px 15px;
        flex-wrap: wrap;
        gap: 9px;
    }
    .system-user-copy,
    .system-user-area .btn {
        display: none;
    }
    .system-content { padding: 20px 14px 42px; }
    .system-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 23px 20px;
    }
    .system-welcome h1 { font-size: 25px; }
    .custom-config-row {
        grid-template-columns: 1fr;
    }
    .remove-config {
        width: 100%;
    }
}

/* Compact feature authorization */
.feature-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.feature-group-title {
    margin: 2px 0 8px;
}
.feature-group-title:not(:first-of-type) {
    margin-top: 18px;
}
.feature-config {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 8px 10px;
    padding: 12px 13px;
    border-radius: 10px;
}
.feature-check {
    grid-column: 1 / -1;
    gap: 8px;
}
.feature-check strong {
    font-size: 12.5px;
}
.feature-alias {
    padding-top: 0;
    border-top: 0;
    font-size: 10.5px;
}
.feature-alias input,
.feature-alias textarea {
    min-height: 32px;
    margin-top: 4px;
    padding: 7px 9px;
    font-size: 11.5px;
}
.feature-alias textarea {
    min-height: 36px;
    height: 36px;
}
.feature-config .dependency-line {
    grid-column: 1 / -1;
    margin-top: 0;
}
.feature-config .feature-description {
    grid-column: 1 / -1;
}
.preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.preset-option {
    display: block;
    position: relative;
    padding: 18px;
    border: 1px solid #dfe7f1;
    border-radius: 13px;
    background: #fbfcfe;
    cursor: pointer;
}
.preset-option.selected {
    border-color: #8fb5eb;
    background: #f3f8ff;
    box-shadow: 0 0 0 3px rgba(36, 104, 220, .07);
}
.preset-option input {
    position: absolute;
    top: 17px;
    right: 17px;
    width: auto;
}
.preset-option strong,
.preset-option span,
.preset-option small {
    display: block;
}
.preset-option strong {
    color: #253750;
    font-size: 15px;
}
.preset-option span {
    margin: 6px 38px 8px 0;
    color: #718198;
    font-size: 11.5px;
    line-height: 1.65;
}
.preset-option small {
    color: #2468dc;
    font-size: 10px;
}
.base-feature-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 6px 0 22px;
}
.base-feature-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 8px 0 10px;
}
.base-feature-heading strong {
    color: #263850;
    font-size: 14px;
}
.base-feature-heading span {
    color: #8795a8;
    font-size: 11px;
}
.base-alias-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.base-alias-card {
    padding: 13px;
    border: 1px solid #e4ebf5;
    border-radius: 11px;
    background: #fbfcfe;
}
.base-alias-card > strong {
    display: block;
    margin-bottom: 9px;
    color: #2b3d56;
    font-size: 12px;
}
.base-alias-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.base-alias-card label {
    color: #74849a;
    font-size: 10px;
}
.base-alias-card input,
.base-alias-card textarea {
    min-height: 34px;
    margin-top: 4px;
    padding: 7px 9px;
    font-size: 11px;
}
.base-alias-card textarea {
    min-height: 44px;
}
.feature-purchase-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 280px;
    gap: 24px;
    padding: 28px;
    border: 1px solid #e0e8f2;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(35, 73, 126, .06);
}
.feature-purchase-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    color: #2468dc;
    background: #edf4ff;
}
.feature-purchase-icon .mc-icon {
    width: 34px;
    height: 34px;
    stroke-width: 1.8;
}
.feature-purchase-copy > span {
    color: #2468dc;
    font-size: 10px;
    font-weight: 800;
}
.feature-purchase-copy h2 {
    margin: 7px 0;
    color: #263850;
    font-size: 24px;
}
.feature-purchase-copy p,
.feature-purchase-copy li {
    color: #718198;
    font-size: 12px;
}
.feature-purchase-copy ul {
    padding-left: 18px;
}
.feature-purchase-price {
    padding: 18px;
    border-radius: 13px;
    background: #f7faff;
}
.feature-purchase-price small,
.feature-purchase-price strong,
.feature-purchase-price > span {
    display: block;
}
.feature-purchase-price small {
    color: #8391a4;
    font-size: 10px;
}
.feature-purchase-price strong {
    margin-top: 5px;
    color: #2468dc;
    font-size: 32px;
}
.feature-purchase-price > span {
    color: #8391a4;
    font-size: 10px;
}
.feature-purchase-price form {
    margin-top: 14px;
}
.feature-purchase-price .btn {
    width: 100%;
    margin-top: 9px;
}
.purchase-pending {
    max-width: 760px;
    text-align: center;
}
.purchase-status {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    color: #a36512;
    background: #fff4dd;
    font-size: 9px;
    font-weight: 700;
}
@media (max-width: 900px) {
    .feature-purchase-card {
        grid-template-columns: 62px minmax(0, 1fr);
    }
    .feature-purchase-price {
        grid-column: 1 / -1;
    }
}
.base-feature-summary > div {
    padding: 13px 14px;
    border: 1px solid #e6ecf4;
    border-radius: 10px;
    background: #f8fafc;
}
.base-feature-summary strong {
    display: block;
    color: #2b3d56;
    font-size: 11.5px;
}
.base-feature-summary > div > span {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.base-feature-summary em {
    padding: 2px 7px;
    border-radius: 5px;
    color: #557292;
    background: #eef3f9;
    font-size: 9px;
    font-style: normal;
}

@media (max-width: 1050px) {
    .feature-config-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .feature-config { grid-template-columns: 1fr; }
    .feature-alias,
    .feature-check {
        grid-column: 1;
    }
}

.support-console {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 650px;
    overflow: hidden;
    border: 1px solid #e2eaf3;
    border-radius: 15px;
    background: #fff;
}
.support-conversation-list {
    overflow-y: auto;
    border-right: 1px solid #e7edf5;
    background: #fbfcfe;
}
.support-list-head {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #e7edf5;
    font-size: 11px;
}
.support-list-head span {
    color: #8896aa;
}
.support-conversation {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-bottom: 1px solid #edf1f7;
}
.support-conversation:hover,
.support-conversation.active {
    background: #eef5ff;
}
.support-conversation-copy {
    flex: 1;
    min-width: 0;
}
.support-conversation-copy strong,
.support-conversation-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.support-conversation-copy strong {
    color: #30425b;
    font-size: 11.5px;
}
.support-conversation-copy small {
    margin-top: 2px;
    color: #8997aa;
    font-size: 9.5px;
}
.support-chat-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.support-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 17px;
    border-bottom: 1px solid #e7edf5;
}
.support-chat-head strong,
.support-chat-head span {
    display: block;
}
.support-chat-head strong {
    color: #263951;
    font-size: 13px;
}
.support-chat-head span {
    margin-top: 2px;
    color: #8795a8;
    font-size: 9.5px;
}
.support-chat-main .chat-messages {
    flex: 1;
    min-height: 480px;
    padding: 17px;
    overflow-y: auto;
    background: #f8fafc;
}
.chat-bubble {
    max-width: 76%;
    margin: 10px 0;
    padding: 10px 13px;
    border: 1px solid #e3e9f2;
    border-radius: 14px;
    color: #2b3c54;
    background: #fff;
}
.chat-bubble.visitor {
    margin-right: auto;
    border-radius: 4px 14px 14px 14px;
}
.chat-bubble.admin {
    margin-left: auto;
    color: #fff;
    background: #2468dc;
    border-color: #2468dc;
    border-radius: 14px 4px 14px 14px;
}
.chat-bubble span {
    display: block;
    margin-bottom: 3px;
    font-size: 8.5px;
    opacity: .7;
}
.chat-bubble p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.65;
    white-space: pre-wrap;
}
.chat-bubble small {
    display: block;
    margin-top: 4px;
    font-size: 8px;
    text-align: right;
    opacity: .6;
}
.support-chat-main .chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 12px;
    border-top: 1px solid #e7edf5;
}
.support-chat-main .chat-compose textarea {
    flex: 1;
    min-height: 48px;
    resize: none;
}
.support-chat-main .chat-compose button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #2468dc;
    font-size: 11px;
    font-weight: 700;
}
.customer-chat-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 760px);
    justify-content: center;
    gap: 22px;
}
.customer-chat-help,
.customer-chat-panel {
    overflow: hidden;
    border: 1px solid #dfe8f2;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(33, 71, 122, .05);
}
.customer-chat-help {
    align-self: start;
    padding: 24px;
    background: var(--accent-soft);
}
.customer-chat-help h2 {
    margin: 10px 0 8px;
}
.customer-chat-help p,
.customer-chat-help li {
    color: #61748a;
    font-size: 11px;
}
.customer-chat-help ul {
    padding-left: 17px;
}
.customer-chat-guest {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}
.customer-chat-panel {
    display: flex;
    min-height: 620px;
    flex-direction: column;
}
.customer-chat-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 19px;
    border-bottom: 1px solid #e6edf5;
}
.customer-chat-panel > header strong,
.customer-chat-panel > header small {
    display: block;
}
.customer-chat-panel > header small {
    margin-top: 2px;
    color: #7c8ea3;
    font-size: 9px;
}
.customer-chat-panel > header small i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #2bb673;
}
.customer-chat-panel > header > span {
    color: #8d9bad;
    font-size: 9px;
}
.customer-chat-messages {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    background: #f8fafc;
}
.customer-chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 12px;
    border-top: 1px solid #e6edf5;
}
.customer-chat-compose textarea {
    flex: 1;
    min-height: 48px;
    resize: none;
}
.customer-chat-compose button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--accent);
    font-size: 11px;
    font-weight: 700;
}
.customer-chat-panel .chat-bubble.visitor {
    margin-left: auto;
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 15px 4px 15px 15px;
}
.customer-chat-panel .form-message {
    padding: 0 14px 12px;
    font-size: 10px;
}
@media (max-width: 850px) {
    .support-console {
        grid-template-columns: 1fr;
    }
    .support-conversation-list {
        max-height: 250px;
        border-right: 0;
        border-bottom: 1px solid #e7edf5;
    }
    .customer-chat-layout {
        grid-template-columns: 1fr;
    }
}

.page-title-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.feature-check {
    display: flex;
    align-items: center;
    gap: 9px;
}
.feature-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    border: 1.5px solid #b8c6d9;
    border-radius: 5px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.feature-check input[type="checkbox"]::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
}
.feature-check input[type="checkbox"]:checked {
    border-color: #2468dc;
    background: #2468dc;
    box-shadow: 0 3px 8px rgba(36, 104, 220, .2);
}
.feature-check input[type="checkbox"]:checked::before {
    opacity: 1;
}
.feature-check input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(36, 104, 220, .25);
    outline-offset: 2px;
}
.feature-key,
.dependency-line {
    display: none !important;
}

.app-center-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 2px 0 24px;
}
.app-center-copy {
    min-width: 0;
}
.app-center-head h1 {
    margin: 6px 0 4px;
    color: #1b2b44;
    font-size: 29px;
    letter-spacing: -.7px;
}
.app-center-head p {
    margin: 0;
    color: #8090a5;
    font-size: 12px;
}
.app-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    width: min(480px, 100%);
}
.app-search {
    flex: 1;
    width: auto;
    min-width: 210px;
    display: block;
    position: relative;
}
.app-search span {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 1;
    color: #96a3b5;
    font-size: 10px;
    transform: translateY(-50%);
}
.app-search input {
    padding-left: 48px;
    background: #fff;
}
.app-center {
    padding: 18px 16px 26px;
    border: 1px solid #e3eaf4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(41, 79, 132, .03);
}
.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f7;
}
.app-category {
    padding: 7px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #75859a;
    font-size: 12px;
}
.app-category:hover,
.app-category.active {
    color: var(--accent);
    background: var(--accent-soft);
}
.app-category-section {
    margin-top: 28px;
}
.app-category-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}
.app-category-heading h2 {
    margin: 0;
}
.app-category-heading span {
    color: #9aa7b8;
    font-size: 10px;
}
.app-category-section h2 {
    margin: 0 0 12px;
    color: #263750;
    font-size: 16px;
    font-weight: 700;
}
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.app-card {
    position: relative;
    display: block;
    min-height: 226px;
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(37, 69, 112, .035);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.app-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--app-color) 32%, #dfe7f1);
    box-shadow: 0 18px 38px rgba(31, 62, 105, .11);
}
a.app-card:focus-visible {
    outline: 2px solid var(--app-color);
    outline-offset: 2px;
}
.app-card-visual {
    position: relative;
    height: 92px;
    overflow: hidden;
    padding: 14px 15px;
    background:
        radial-gradient(circle at 82% 22%, rgba(255,255,255,.96), transparent 32%),
        linear-gradient(135deg, var(--app-bg), color-mix(in srgb, var(--app-bg) 48%, #fff));
    border-bottom: 1px solid color-mix(in srgb, var(--app-color) 10%, #edf1f6);
}
.app-card-visual:after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -48px;
    width: 120px;
    height: 120px;
    border: 18px solid color-mix(in srgb, var(--app-color) 8%, transparent);
    border-radius: 50%;
}
.app-product-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 6px;
    background: rgba(255,255,255,.68);
    color: var(--app-color);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .35px;
    backdrop-filter: blur(6px);
}
.app-icon {
    position: absolute;
    left: 15px;
    bottom: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 14px;
    color: var(--app-color);
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--app-color) 15%, transparent);
    font-size: 18px;
    font-weight: 800;
}
.app-card-orbit {
    position: absolute;
    right: 25px;
    top: 28px;
    width: 58px;
    height: 58px;
    border: 1px solid color-mix(in srgb, var(--app-color) 18%, transparent);
    border-radius: 50%;
}
.app-card-orbit:before,
.app-card-orbit:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--app-color);
    opacity: .22;
}
.app-card-orbit:before {
    right: 7px;
    top: -4px;
    width: 9px;
    height: 9px;
}
.app-card-orbit:after {
    left: -8px;
    bottom: 7px;
    width: 5px;
    height: 5px;
}
.app-card-copy {
    display: flex;
    flex-direction: column;
    min-height: 133px;
    padding: 14px 15px 13px;
}
.app-card-category {
    color: var(--app-color);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .25px;
}
.app-card-copy strong {
    display: block;
    margin: 4px 0 6px;
    color: #27384f;
    font-size: 15px;
    line-height: 1.35;
}
.app-card-copy p {
    margin: 0;
    color: #7d8ba0;
    font-size: 11px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid #edf1f6;
}
.app-card-access {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8997a9;
    font-size: 9px;
}
.app-card-access i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b9c3d0;
}
.app-card.is-ready .app-card-access {
    color: #328264;
}
.app-card.is-ready .app-card-access i {
    background: #2fa873;
    box-shadow: 0 0 0 3px #e5f6ee;
}
.app-card-cta {
    color: var(--app-color);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.app-card-cta b {
    margin-left: 2px;
    font-size: 12px;
}
.app-state {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 7px;
    font-size: 8px;
    font-weight: 700;
    backdrop-filter: blur(5px);
}
.app-state.ready {
    color: #287154;
    background: #eef8f2;
}
.app-state.planned {
    color: #8a7a61;
    background: #f8f4ed;
}
.app-state.building {
    color: #4f6f9e;
    background: #eef4fd;
}
.app-state.locked {
    color: #6f7f93;
    background: #f2f5f8;
}
.app-empty {
    margin-top: 20px;
}

.app-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 15px 18px;
    border: 1px solid #e2eaf4;
    border-radius: 13px;
    background:
        radial-gradient(circle at 92% 0, rgba(255,255,255,.9), transparent 38%),
        linear-gradient(135deg, var(--accent-soft), #fff 72%);
}
.app-overview > div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 4px 12px;
}
.app-overview > div:first-child > span {
    color: #8795a8;
    font-size: 10px;
}
.app-overview strong {
    color: #24364e;
    font-size: 14px;
}
.app-overview p {
    grid-column: 1 / -1;
    margin: 0;
    color: #8593a6;
    font-size: 10.5px;
}
.app-overview-stats {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}
.app-overview-stats span {
    min-width: 76px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 9px;
    background: rgba(255,255,255,.8);
    color: #8794a7;
    font-size: 9.5px;
    text-align: center;
}
.app-overview-stats b {
    display: block;
    color: var(--accent);
    font-size: 17px;
}
.app-market-button {
    flex: 0 0 auto;
    min-height: 42px;
}
.app-market-button span {
    font-size: 15px;
}
.market-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 14px 17px;
    border: 1px solid #dfeaf4;
    border-radius: 12px;
    background: #f8fbff;
}
.market-notice > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}
.market-notice-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}
.market-notice strong {
    display: block;
    color: #2a3c55;
    font-size: 12.5px;
}
.market-notice p {
    margin: 2px 0 0;
    color: #8493a6;
    font-size: 10.5px;
}
.market-count {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.market-count span {
    padding: 6px 9px;
    border-radius: 7px;
    background: #fff;
    color: #8493a6;
    font-size: 9.5px;
}
.market-count b {
    color: var(--accent);
    font-size: 12px;
}

.dashboard-heading {
    margin-bottom: 18px;
}
.system-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}
.system-metric-card {
    --metric: var(--accent);
    --metric-soft: var(--accent-soft);
    position: relative;
    overflow: hidden;
    min-height: 122px;
    padding: 16px 17px;
    border-color: #e4eaf3;
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--metric-soft) 55%, #fff));
}
.dashboard-stat-grid.mall {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.member-level-heading{display:flex;align-items:center;justify-content:space-between;color:#2e4259;font-size:13px;font-weight:800}.member-level-heading em{padding:3px 7px;border-radius:999px;color:#2b6bcf;background:#edf4ff;font-size:9px;font-style:normal}.inline-settings-form{display:flex;align-items:flex-end;gap:12px}.inline-settings-form label{display:grid;gap:5px;color:#68798d;font-size:10px}.inline-settings-form input{width:180px;height:38px;padding:0 11px;border:1px solid #dfe6ef;border-radius:8px}.merchant-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.merchant-profile-field{display:grid;gap:6px;color:#65758c;font-size:10px}.merchant-profile-field.full{grid-column:1/-1}.merchant-profile-field>span:first-child em{color:#cf5964;font-style:normal}.merchant-profile-field input,.merchant-profile-field select,.merchant-profile-field textarea{width:100%;min-height:38px;padding:8px 10px;border:1px solid #dfe6ef;border-radius:8px;background:#fbfcfe;color:#30445d;font:inherit;font-size:11px}.merchant-upload-field{display:grid;gap:5px;padding:10px;border:1px dashed #d6e0ec;border-radius:8px}.merchant-upload-field small{color:#8794a5}.merchant-upload-field a{color:#2d6dce;font-weight:700}.admin-merchant-fields{margin-bottom:18px}.admin-merchant-settings{padding-top:16px;border-top:1px solid #edf1f7}.merchant-field-table input:not([type="checkbox"]),.merchant-field-table select{min-width:120px;height:32px;padding:0 8px;border:1px solid #dfe6ef;border-radius:7px}.merchant-field-table input[type="checkbox"]{width:16px;height:16px}.merchant-custom-field-row td{background:#fffaf4}
.system-metric-card:after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -38px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--metric-soft);
    opacity: .65;
}
.system-metric-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.system-metric-top > span:last-child {
    color: #6f7f93;
    font-size: 11px;
}
.system-metric-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--metric-soft);
    color: var(--metric);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}
.system-metric-card strong {
    display: block;
    position: relative;
    z-index: 1;
    margin: 8px 0 1px;
    color: #22344d;
    font-size: 28px;
    line-height: 1.2;
}
.system-metric-card small {
    position: relative;
    z-index: 1;
    color: #95a1b1;
    font-size: 9.5px;
}
.system-metric-card.amber { --metric: #d97706; --metric-soft: #fff5e6; }
.system-metric-card.green { --metric: #18845a; --metric-soft: #eaf8f1; }
.system-metric-card.blue { --metric: #2f6fd8; --metric-soft: #edf4ff; }
.system-metric-card.teal { --metric: #0f8a82; --metric-soft: #e9f9f7; }
.system-metric-card.rose { --metric: #bd5b88; --metric-soft: #fdf0f6; }
.system-metric-card.red { --metric: #cf5964; --metric-soft: #fff0f2; }
.dashboard-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.dashboard-panel-grid .admin-panel {
    margin-bottom: 0;
    padding: 18px;
    border-radius: 13px;
}
.dashboard-panel .panel-head {
    margin-bottom: 12px;
}
.panel-link {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
}
.dashboard-record-list {
    display: grid;
    gap: 4px;
}
.dashboard-record-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 53px;
    padding: 8px 9px;
    border-radius: 9px;
    transition: background .15s;
}
.dashboard-record-list a:hover {
    background: #f7f9fc;
}
.dashboard-record-mark {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
}
.dashboard-record-copy {
    flex: 1;
    min-width: 0;
}
.dashboard-record-copy strong,
.dashboard-record-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-record-copy strong {
    color: #33465f;
    font-size: 11.5px;
}
.dashboard-record-copy small {
    margin-top: 2px;
    color: #98a4b4;
    font-size: 9.5px;
}
.dashboard-record-list i {
    flex: 0 0 auto;
    color: #7e8ea3;
    font-size: 9.5px;
    font-style: normal;
}
.dashboard-empty {
    padding: 26px 12px;
    color: #98a5b5;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 760px) {
    .app-center-head {
        align-items: stretch;
        flex-direction: column;
    }
    .app-head-actions {
        align-items: stretch;
        width: 100%;
    }
    .app-search {
        width: auto;
    }
    .app-market-button {
        min-width: 104px;
    }
    .app-overview,
    .market-notice {
        align-items: flex-start;
        flex-direction: column;
    }
    .app-overview-stats,
    .market-count {
        width: 100%;
    }
    .app-overview-stats span,
    .market-count span {
        flex: 1;
    }
    .app-center {
        padding: 16px;
    }
    .app-grid {
        grid-template-columns: 1fr;
    }
    .app-card {
        min-height: 212px;
    }
    .app-card-visual {
        height: 86px;
    }
    .app-card-copy {
        min-height: 125px;
    }
    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .dashboard-panel-grid {
        grid-template-columns: 1fr;
    }
    .system-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .app-head-actions {
        flex-direction: column;
    }
    .app-market-button {
        width: 100%;
    }
    .system-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Full-width application center */
.app-center-mode {
    min-height: 100vh;
    background: #f4f6fa;
}
.app-dark-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 18px;
    color: #fff;
    background: #191b1f;
    box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.app-dark-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    min-width: 160px;
}
.app-dark-brand strong {
    color: #f7f8fa;
    font-size: 14px;
    font-weight: 700;
}
.app-dark-logo {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: #f5b942;
    background: #272a30;
    font-size: 15px;
    line-height: 1;
}
.app-dark-search {
    position: relative;
    display: block;
    width: min(410px, 32vw);
    margin-left: auto;
    margin-right: 18px;
}
.app-dark-search > span {
    position: absolute;
    left: 10px;
    top: 50%;
    z-index: 1;
    color: #767b84;
    font-size: 14px;
    transform: translateY(-50%);
}
.app-dark-search input {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 0 11px 0 31px;
    border: 1px solid #33363c;
    border-radius: 5px;
    color: #e8ebef;
    background: #222429;
    font-size: 11px;
}
.app-dark-search input::placeholder {
    color: #777c85;
}
.app-dark-search input:focus {
    border-color: #555b66;
    box-shadow: 0 0 0 2px rgba(255,255,255,.04);
}
.app-dark-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}
.app-dark-actions > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 5px;
    color: #c9cdd3;
    font-size: 10px;
    white-space: nowrap;
}
.app-dark-actions > a:hover {
    color: #fff;
    background: #272a30;
}
.app-dark-actions i {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid #4a4e56;
    border-radius: 4px;
    font-size: 8px;
    font-style: normal;
}
.app-dark-user {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid #35383e;
}
.app-dark-user > b {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    color: #1d3145;
    background: linear-gradient(135deg, #b8e2ff, #7cc6ff);
    font-size: 9px;
}
.app-dark-user > span,
.app-dark-user strong,
.app-dark-user small {
    display: block;
}
.app-dark-user strong {
    color: #e7e9ed;
    font-size: 9.5px;
    font-weight: 600;
}
.app-dark-user small {
    max-width: 120px;
    margin-top: 1px;
    overflow: hidden;
    color: #777d87;
    font-size: 7.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-dark-actions > .app-dark-logout {
    margin-left: 3px;
}
.app-catalog-content {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 54px);
    padding: 0 18px 48px;
    background: #f4f6fa;
}
.app-catalog-content > .alert {
    margin: 14px 0 0;
}
.app-center.app-catalog {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.app-catalog .app-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    padding: 15px 0 19px;
    border: 0;
    scrollbar-width: thin;
}
.app-catalog .app-category {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 14px;
    border: 0;
    border-radius: 7px;
    color: #606b7b;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
}
.app-catalog .app-category:hover {
    color: #293545;
    background: #e9edf3;
}
.app-catalog .app-category.active {
    color: #3b4656;
    background: #e8ecf1;
}
.app-catalog .app-category-section {
    margin-top: 23px;
}
.app-catalog .app-category-heading {
    margin: 0 0 12px;
}
.app-catalog .app-category-heading h2,
.app-catalog .app-category-section h2 {
    margin: 0;
    color: #202b3b;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: -.25px;
}
.app-catalog .app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 13px;
}
.app-catalog .app-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    height: 76px;
    overflow: visible;
    padding: 12px 70px 12px 14px;
    border: 1px solid rgba(222, 228, 237, .85);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(27, 45, 71, .055);
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.app-catalog .app-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--app-color) 20%, #dfe5ee);
    box-shadow: 0 10px 24px rgba(29, 51, 82, .1);
}
.app-catalog .app-icon {
    position: static;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: var(--app-color);
    background: var(--app-bg);
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
}
.app-catalog .app-card-copy {
    display: block;
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
}
.app-catalog .app-card-copy strong {
    display: block;
    margin: 0 0 4px;
    overflow: hidden;
    color: #263446;
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-catalog .app-card-copy p {
    display: block;
    margin: 0;
    overflow: hidden;
    color: #8a94a3;
    font-size: 10px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-catalog .app-state {
    position: absolute;
    top: 9px;
    right: 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #9aa4b1;
    background: transparent;
    font-size: 8px;
    font-weight: 500;
    backdrop-filter: none;
}
.app-catalog .app-state i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c3cad2;
}
.app-catalog .app-state.ready {
    color: #3b8a6b;
    background: transparent;
}
.app-catalog .app-state.ready i {
    background: #36ae7e;
    box-shadow: 0 0 0 2px #e3f6ec;
}
.app-catalog .app-state.building {
    color: #6782a7;
    background: transparent;
}
.app-catalog .app-state.building i {
    background: #6f96c7;
}
.app-catalog .app-state.locked {
    color: #8b96a4;
    background: transparent;
}
.app-catalog .app-state.planned {
    color: #a08e76;
    background: transparent;
}
.app-catalog .app-state.planned i {
    background: #bfa77e;
}
.app-catalog .app-empty {
    margin-top: 28px;
    background: #fff;
}

@media (max-width: 1180px) {
    .app-dark-search {
        width: min(330px, 28vw);
    }
    .app-dark-user > span {
        display: none;
    }
    .app-catalog .app-grid {
        grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    }
}

@media (max-width: 840px) {
    .app-dark-topbar {
        flex-wrap: wrap;
        gap: 7px;
        padding: 8px 12px;
    }
    .app-dark-brand {
        min-width: 0;
    }
    .app-dark-search {
        order: 3;
        width: 100%;
        margin: 0;
    }
    .app-dark-actions {
        margin-left: auto;
    }
    .app-dark-actions > a > span {
        display: none;
    }
    .app-dark-user {
        margin-left: 2px;
        padding-left: 8px;
    }
    .app-catalog-content {
        padding: 0 12px 36px;
    }
    .app-catalog .app-category {
        padding: 6px 10px;
        font-size: 12px;
    }
    .app-catalog .app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .app-dark-logo,
    .app-dark-logout {
        display: none;
    }
    .app-dark-brand {
        padding-right: 5px;
        border-right: 1px solid #34373d;
    }
    .app-dark-brand strong {
        font-size: 12px;
    }
    .app-dark-actions > a {
        min-height: 30px;
        padding: 0 5px;
    }
    .app-dark-user {
        border-left: 0;
    }
    .app-catalog .app-grid {
        grid-template-columns: 1fr;
    }
    .app-catalog .app-card {
        height: 72px;
        min-height: 72px;
    }
}

/* Core commerce */
.feature-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.feature-dev-state {
    padding: 2px 7px;
    border-radius: 999px;
    color: #28745a;
    background: #eaf8f1;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}
.feature-dev-state.planned {
    color: #8a775f;
    background: #f3eee7;
}
.feature-config.is-planned {
    background: #fafafa;
    opacity: .88;
}
.feature-config.is-planned .feature-check input {
    cursor: not-allowed;
}

.admin-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
}
.admin-product-cell img,
.admin-product-cell > span {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    object-fit: cover;
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 800;
}
.admin-product-cell > div {
    min-width: 0;
}
.admin-product-cell strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
.order-status.pending { color: #b7671c; background: #fff4e8; }
.order-status.paid { color: #287059; background: #ebf8f1; }
.order-status.shipped { color: #2864ad; background: #edf4ff; }
.order-status.completed { color: #566273; background: #f0f3f6; }
.order-status.cancelled { color: #8a6b6e; background: #f6eef0; }

.order-detail-head {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.order-detail-head > div {
    padding: 14px;
    border-radius: 10px;
    background: #f7f9fc;
}
.order-detail-head span,
.order-detail-head strong {
    display: block;
}
.order-detail-head > div > span {
    color: #8391a4;
    font-size: 10px;
}
.order-detail-head > div > strong {
    margin-top: 5px;
    color: #253750;
    font-size: 16px;
}
.order-detail-grid,
.checkout-grid,
.order-public-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
    gap: 16px;
}
.order-item-list {
    display: grid;
    gap: 9px;
}
.order-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e9eef5;
    border-radius: 10px;
}
.order-item-row img {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
}
.order-item-row > div {
    flex: 1;
    min-width: 0;
}
.order-item-row strong,
.order-item-row small {
    display: block;
}
.order-item-row strong { color: #2a3b53; font-size: 12px; }
.order-item-row small { margin-top: 3px; color: #8a98aa; font-size: 10px; }
.order-item-row > span { color: #748397; font-size: 11px; }
.order-item-row > b { color: #2a3b53; font-size: 12px; }
.order-info-list {
    display: grid;
    gap: 0;
    margin: 0;
}
.order-info-list > div {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f6;
    font-size: 11px;
}
.order-info-list dt { color: #8a98aa; }
.order-info-list dd { margin: 0; color: #34445b; }
.order-action-row,
.shipping-form {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.shipping-form input {
    width: min(220px, 100%);
    min-height: 40px;
}

.product-cover {
    position: relative;
    display: grid;
    place-items: center;
    height: 190px;
    overflow: hidden;
    background: var(--accent-soft);
}
.product-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.product-card:hover .product-cover img {
    transform: scale(1.035);
}
.product-cover > span {
    color: var(--accent);
    font-size: 42px;
    font-weight: 800;
}
.product-cover > b {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 8px;
    border-radius: 7px;
    color: #fff;
    background: var(--orange);
    font-size: 9px;
}
.product-card h3 a:hover {
    color: var(--accent);
}
.product-card-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    color: #91a098;
    font-size: 9.5px;
}

.product-detail-head .back-link {
    display: inline-block;
    margin-bottom: 18px;
}
.back-link {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}
.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: start;
}
.product-detail-cover {
    display: grid;
    place-items: center;
    min-height: 450px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--accent-soft);
}
.product-detail-cover img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
}
.product-detail-cover > span {
    color: var(--accent);
    font-size: 80px;
    font-weight: 800;
}
.product-detail-info h2 {
    margin: 13px 0 12px;
    font-size: 34px;
    line-height: 1.3;
}
.product-detail-info > p {
    color: var(--muted);
    line-height: 1.8;
}
.product-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 24px 0;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.product-price strong {
    color: var(--orange);
    font-size: 36px;
}
.product-price span {
    color: #87948d;
    font-size: 12px;
}
.product-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0 0 22px;
}
.product-facts > div {
    padding: 11px 12px;
    border-radius: 9px;
    background: #f7faf8;
}
.product-facts dt {
    color: #8a968f;
    font-size: 9px;
}
.product-facts dd {
    margin: 3px 0 0;
    color: #34463c;
    font-size: 11px;
    font-weight: 700;
}
.buy-panel {
    display: flex;
    align-items: end;
    gap: 10px;
}
.buy-panel label {
    width: 130px;
}
.purchase-note {
    margin: 12px 0 0;
    color: #8a968f;
    font-size: 10px;
}
.rich-content {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: #46594e;
    line-height: 1.9;
}
.rich-content img {
    max-width: 100%;
    height: auto;
}

.site-auth-wrap {
    min-height: 680px;
    padding: 70px 20px;
    background: linear-gradient(135deg, var(--accent-soft), #f7fbf8 62%, #fff);
}
.site-auth-card {
    width: min(460px, 100%);
    margin: 0 auto;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
}
.site-auth-card-wide {
    width: min(650px, 100%);
}
.site-auth-card h1 {
    margin: 8px 0;
    font-size: 31px;
}
.site-auth-card > p {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 24px;
}
.site-auth-links {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    color: #89968e;
    font-size: 11px;
}
.site-auth-links a {
    color: var(--accent);
    font-weight: 700;
}
.site-logout-link {
    align-self: center;
    color: #829089;
    font-size: 10px;
}

.member-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 18px;
}
.member-main,
.member-side {
    display: grid;
    align-content: start;
    gap: 18px;
}
.site-panel {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 25px rgba(26, 75, 49, .035);
}
.site-panel .panel-head h2 {
    font-size: 18px;
}
.member-order-list {
    display: grid;
    gap: 6px;
}
.member-order-list > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 10px;
    background: #f8faf9;
}
.member-order-list > a:hover {
    background: var(--accent-soft);
}
.member-order-list strong,
.member-order-list small {
    display: block;
}
.member-order-list strong { font-size: 11px; }
.member-order-list small { margin-top: 2px; color: #8b9890; font-size: 9px; }
.member-order-list b { color: var(--orange); font-size: 12px; }
.member-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.member-address-card {
    position: relative;
    padding: 14px;
    border: 1px solid #e6eee9;
    border-radius: 11px;
    background: #fafcfb;
}
.member-address-card.default {
    border-color: color-mix(in srgb, var(--accent) 35%, #e6eee9);
    background: var(--accent-soft);
}
.member-address-card strong,
.member-address-card span {
    display: block;
}
.member-address-card strong { font-size: 12px; }
.member-address-card span { margin-top: 2px; color: #829087; font-size: 9px; }
.member-address-card p { margin: 8px 0 20px; color: #55665c; font-size: 10.5px; }
.member-address-card form {
    position: absolute;
    right: 9px;
    bottom: 7px;
}
.member-address-card button {
    border: 0;
    color: #a45d63;
    background: transparent;
    font-size: 9px;
}
.member-address-form {
    padding-top: 18px;
    border-top: 1px solid #edf2ef;
}
.member-logout {
    display: block;
    color: #9d6267;
    font-size: 11px;
    text-align: center;
}

.checkout-address-list {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
}
.checkout-address-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5ede8;
    border-radius: 10px;
    background: #fbfcfb;
}
.checkout-address-option input {
    width: auto;
    margin-top: 3px;
}
.checkout-address-option span strong,
.checkout-address-option span small {
    display: block;
}
.checkout-address-option span strong { font-size: 11px; }
.checkout-address-option span small { margin-top: 3px; color: #849188; font-size: 10px; }
.payment-method-note {
    display: grid;
    gap: 3px;
    margin-top: 18px;
    padding: 14px;
    border-left: 3px solid var(--accent);
    border-radius: 0 9px 9px 0;
    background: var(--accent-soft);
}
.payment-method-note strong { font-size: 12px; }
.payment-method-note span { color: #65756b; font-size: 10px; }
.checkout-summary {
    align-self: start;
    position: sticky;
    top: 96px;
}
.checkout-product {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.checkout-product img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}
.checkout-product strong,
.checkout-product span {
    display: block;
}
.checkout-product strong { font-size: 12px; }
.checkout-product span { margin-top: 8px; color: #8b9790; font-size: 10px; }
.checkout-totals {
    margin: 0;
}
.checkout-totals > div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid #edf2ef;
    font-size: 11px;
}
.checkout-totals dt { color: #7d8b83; }
.checkout-totals dd { margin: 0; font-weight: 700; }
.checkout-totals > div:last-child dd { color: var(--orange); font-size: 18px; }

.order-public-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.order-public-status > div {
    padding: 13px;
    border-radius: 10px;
    background: #f7faf8;
}
.order-public-status span,
.order-public-status strong {
    display: block;
}
.order-public-status span { color: #8b9890; font-size: 9px; }
.order-public-status strong { margin-top: 5px; font-size: 14px; }
.site-flash {
    padding-top: 16px;
}
.company-profile-section {
    background: #fff;
}
.company-profile-card {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 36px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent-soft), #fff 70%);
}
.company-profile-card h2 {
    margin: 8px 0 0;
    font-size: 26px;
}
.company-profile-card p {
    margin: 0 0 8px;
    color: #56685e;
    line-height: 1.9;
}
.company-profile-card > div:last-child > span {
    color: #8b9890;
    font-size: 10px;
}
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
    gap: 18px;
}
.about-main {
    padding: 34px;
}
.about-main h2 {
    margin: 8px 0 16px;
    font-size: 28px;
}
.about-main p {
    color: #52645a;
    line-height: 1.95;
}

@media (max-width: 900px) {
    .order-detail-grid,
    .checkout-grid,
    .order-public-grid,
    .product-detail-grid,
    .member-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .product-detail-cover {
        min-height: 320px;
    }
    .order-detail-head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .checkout-summary {
        position: static;
    }
    .about-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .member-address-grid,
    .product-facts,
    .order-detail-head,
    .order-public-status {
        grid-template-columns: 1fr;
    }
    .company-profile-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .member-order-list > a {
        grid-template-columns: 1fr auto;
    }
    .member-order-list .order-status {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .buy-panel {
        align-items: stretch;
        flex-direction: column;
    }
    .buy-panel label {
        width: 100%;
    }
}

.mc-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.mc-icon {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.system-sidebar nav i .mc-icon {
    width: 15px;
    height: 15px;
}
.system-all-apps > span .mc-icon {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}
.app-filter-search .mc-icon {
    width: 15px;
    height: 15px;
    stroke-width: 1.9;
}
.app-catalog .app-icon .mc-icon {
    width: 19px;
    height: 19px;
    stroke-width: 1.9;
}
.system-metric-icon .mc-icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.9;
}
.dashboard-record-mark .mc-icon {
    width: 15px;
    height: 15px;
    stroke-width: 1.9;
}

/* The application market keeps its own commerce palette. */
.system-all-apps {
    border-color: #f0d1b8;
    color: #6f4a32;
}
.system-all-apps > span {
    color: #d45b12;
    background: #fff1e6;
}
.system-all-apps:hover {
    color: #c5520d;
    border-color: #e9b88f;
    background: #fffaf6;
}
.system-all-apps.active {
    color: #fff;
    border-color: #de6418;
    background: linear-gradient(135deg, #ef7b22, #cb4e0b);
    box-shadow: 0 6px 16px rgba(207, 79, 12, .2);
}
.system-all-apps.active > span {
    color: #fff;
    background: rgba(255,255,255,.18);
}
.app-catalog {
    --market-accent: #d55a12;
    --market-dark: #b8490b;
    --market-soft: #fff2e8;
    --market-line: #efc6a8;
}
.app-catalog .app-category:hover {
    color: var(--market-accent);
    background: var(--market-soft);
}
.app-catalog .app-category.active {
    color: var(--market-accent);
    background: var(--market-soft);
}
.app-filter-search > span {
    color: #d06a2d;
}
.app-filter-search input:focus {
    border-color: #e3a476;
    box-shadow: 0 0 0 3px #fff1e6;
}
.app-catalog .app-category-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}
.app-catalog .app-category-heading h2:before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    border-radius: 3px;
    vertical-align: -2px;
    background: linear-gradient(180deg, #f3933d, #d5540b);
}
.app-catalog .app-card:hover {
    border-color: #edbf9e;
    box-shadow: 0 10px 25px rgba(128, 67, 27, .11);
}
.app-catalog .app-state.locked {
    color: #d15a17;
}
.app-catalog .app-state.locked i {
    background: #ed7a2e;
    box-shadow: 0 0 0 2px #fff1e6;
}
.app-catalog .app-state.planned {
    color: #a66d43;
}

.app-catalog-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 0 19px;
}
.app-catalog .app-catalog-nav .app-toolbar {
    flex: 1;
    min-width: 0;
    padding: 0;
}
.app-filter-search {
    position: relative;
    display: block;
    flex: 0 0 232px;
    width: 232px;
}
.app-filter-search > span {
    position: absolute;
    left: 11px;
    top: 50%;
    z-index: 1;
    color: #929caa;
    font-size: 13px;
    transform: translateY(-50%);
}
.app-filter-search input {
    width: 100%;
    height: 35px;
    min-height: 35px;
    padding: 0 11px 0 32px;
    border: 1px solid #dfe5ee;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    font-size: 10.5px;
    box-shadow: 0 2px 7px rgba(28, 48, 76, .035);
}
.app-filter-search input:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, #dfe5ee);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (max-width: 900px) {
    .app-catalog-nav {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 10px;
    }
    .app-catalog .app-catalog-nav .app-toolbar {
        order: 2;
        flex-basis: 100%;
    }
    .app-filter-search {
        order: 1;
        width: min(280px, 100%);
        flex-basis: 280px;
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    .app-filter-search {
        width: 100%;
        flex-basis: 100%;
        margin-left: 0;
    }
}

/* Commerce operations */
.compact-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 142px 142px auto auto;
    align-items: center;
    gap: 9px;
}
.compact-filter input,
.compact-filter select {
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe6ef;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 11px;
}
.compact-filter input {
    flex: 1 1 250px;
    min-width: 210px;
}
.compact-filter select {
    width: 100%;
    min-width: 128px;
}
.compact-filter input:focus,
.compact-filter select:focus {
    outline: 0;
    border-color: #83a9dc;
    box-shadow: 0 0 0 3px #edf4fd;
}
.member-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.member-level-card {
    display: flex;
    min-height: 290px;
    flex-direction: column;
    gap: 13px;
    padding: 20px;
    border: 1px solid #e2e9f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(25, 50, 84, .045);
}
.member-level-card > strong {
    color: #20364f;
    font-size: 17px;
}
.member-level-card label {
    display: grid;
    gap: 6px;
    color: #65758e;
    font-size: 10px;
}
.member-level-card input:not([type="checkbox"]) {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    background: #fbfcfe;
    color: #253b55;
    font: inherit;
    font-size: 11px;
}
.member-level-card .form-grid {
    gap: 10px;
}
.member-level-card .form-actions {
    margin-top: auto;
}
.member-level-card .inline-choice {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #52637a;
    font-size: 10px;
}
.payment-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
    align-items: start;
    gap: 18px;
}
.payment-settings-grid .admin-panel {
    margin: 0;
}
.payment-settings-grid textarea {
    min-height: 116px;
    resize: vertical;
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 10px;
    line-height: 1.55;
}
.payment-guide ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: payment-step;
}
.payment-guide li {
    position: relative;
    padding: 13px 0 13px 38px;
    border-bottom: 1px solid #edf1f6;
    counter-increment: payment-step;
}
.payment-guide li:before {
    content: counter(payment-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 13px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    background: #eef5ff;
    color: #2f65ac;
    font: 700 9px Consolas, monospace;
}
.payment-guide li strong,
.payment-guide li span {
    display: block;
}
.payment-guide li strong {
    color: #243a53;
    font-size: 11px;
}
.payment-guide li span {
    margin-top: 4px;
    color: #7d8b9e;
    font-size: 10px;
    line-height: 1.65;
}
.payment-guide li:last-child {
    border-bottom: 0;
}
@media (max-width: 1180px) {
    .member-level-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .payment-settings-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .member-level-grid {
        grid-template-columns: 1fr;
    }
    .compact-filter input,
    .compact-filter select {
        width: 100%;
        min-width: 0;
        flex-basis: 100%;
    }
    .compact-filter {
        grid-template-columns: 1fr;
    }
}

/* System type, basic features and paid add-ons */
.palette-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.theme-live-preview {
    --preview-accent: #0d3b66;
    --preview-soft: #edf4fa;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 2px 10px;
    min-width: 180px;
    padding: 9px 12px 9px 16px;
    border: 1px solid color-mix(in srgb, var(--preview-accent) 22%, #dfe6ef);
    border-radius: 10px;
    background: var(--preview-soft);
    position: relative;
    overflow: hidden;
}
.theme-live-preview:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--preview-accent);
}
.theme-live-preview span,
.theme-live-preview strong {
    grid-column: 1;
}
.theme-live-preview span {
    color: #7c899c;
    font-size: 9px;
}
.theme-live-preview strong {
    color: #26384f;
    font-size: 12px;
}
.theme-live-preview i {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--preview-accent);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--preview-accent) 28%, transparent);
}
.palette-option {
    padding-right: 30px;
}
.palette-check {
    position: absolute;
    top: 7px;
    right: 7px;
    display: none;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    background: var(--swatch);
    font-size: 10px;
    font-weight: 700;
}
.palette-option.selected .palette-check {
    display: grid;
}
.function-count-pill {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid #dfe7f2;
    border-radius: 999px;
    color: #718198;
    background: #f8fafd;
    font-size: 10px;
}
.function-count-pill b {
    color: #2866c8;
    font-size: 12px;
}
.base-feature-heading > div {
    display: grid;
    gap: 2px;
}
.base-feature-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.base-feature-card {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-height: 84px;
    padding: 13px;
    border: 1px solid #e2e9f3;
    border-radius: 11px;
    color: #8491a3;
    background: #fafbfd;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.base-feature-card.active {
    border-color: #9cc4ef;
    color: #52667f;
    background: #f3f8ff;
    box-shadow: inset 0 0 0 1px rgba(36, 104, 220, .04);
}
.base-feature-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #c7d3e2;
    border-radius: 6px;
    color: transparent;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
}
.base-feature-card.active .base-feature-icon {
    border-color: #2d6dce;
    color: #fff;
    background: #2d6dce;
}
.base-feature-card strong,
.base-feature-card small,
.base-feature-card em {
    display: block;
}
.base-feature-card strong {
    color: #40546f;
    font-size: 11.5px;
}
.base-feature-card small {
    margin-top: 3px;
    color: #8795a8;
    font-size: 9.5px;
    line-height: 1.55;
}
.base-feature-card em {
    grid-column: 2;
    margin-top: 3px;
    color: #98a4b4;
    font-size: 9px;
    font-style: normal;
}
.base-feature-card.active em {
    color: #2d6dce;
    font-weight: 700;
}
.base-alias-card[hidden] {
    display: none !important;
}
.feature-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 22px 0 10px;
    padding-top: 18px;
    border-top: 1px solid #edf1f7;
}
.feature-section-head .feature-group-title {
    display: grid;
    gap: 2px;
    margin: 0;
}
.feature-section-head .feature-group-title strong {
    color: #263850;
    font-size: 14px;
}
.feature-section-head .feature-group-title span {
    color: #8795a8;
    font-size: 10.5px;
}
.feature-section-head .function-count-pill {
    color: #9a6940;
    border-color: #f0d2b8;
    background: #fff8f1;
}
.feature-section-head .function-count-pill b {
    color: #d56a16;
}
#paidFeatures .feature-config.selected {
    border-color: #edc19b;
    background: #fff8f1;
    box-shadow: 0 5px 16px rgba(172, 94, 32, .07);
}
#paidFeatures .feature-check input[type="checkbox"]:checked {
    border-color: #d97706;
    background: #d97706;
    box-shadow: 0 3px 8px rgba(217, 119, 6, .2);
}
.preset-option input[type="radio"] {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.preset-radio {
    position: absolute;
    top: 17px;
    right: 17px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #b9c7d9;
    border-radius: 50%;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.preset-radio:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2d6dce;
    transform: scale(0);
    transition: transform .15s;
}
.preset-option.selected .preset-radio {
    border-color: #2d6dce;
    background: radial-gradient(circle, #2d6dce 0 4.5px, #fff 5px);
    box-shadow: 0 0 0 3px rgba(45, 109, 206, .1);
}
.preset-option.selected .preset-radio:after {
    transform: scale(1);
}
.basic-feature-panel {
    margin-top: 14px;
    border: 1px solid #e1e8f2;
    border-radius: 12px;
    background: #fbfcfe;
    overflow: hidden;
}
.basic-feature-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.basic-feature-panel > summary::-webkit-details-marker {
    display: none;
}
.basic-feature-panel > summary:before {
    content: "›";
    flex: 0 0 auto;
    color: #7c8ca2;
    font-size: 20px;
    line-height: 1;
    transform: rotate(0);
    transition: transform .16s;
}
.basic-feature-panel[open] > summary:before {
    transform: rotate(90deg);
}
.basic-feature-panel > summary > div {
    flex: 1;
    display: grid;
    gap: 3px;
}
.basic-feature-panel > summary strong {
    color: #263850;
    font-size: 13px;
}
.basic-feature-panel > summary div span {
    color: #8795a8;
    font-size: 10.5px;
}
.basic-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #73849a;
    font-size: 10px;
    white-space: nowrap;
}
.basic-summary-meta b {
    color: #2d6dce;
    font-size: 12px;
}
.basic-summary-meta i {
    color: #2d6dce;
    font-style: normal;
    font-weight: 700;
}
.basic-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}
.basic-feature-card {
    padding: 14px;
    border: 1px solid #e2e9f3;
    border-radius: 11px;
    background: #fff;
    transition: border-color .15s, background .15s, opacity .15s;
}
.basic-feature-card:not(.active) {
    opacity: .62;
    background: #f8fafc;
}
.basic-feature-card.active {
    border-color: #a8c8ec;
    background: #f7fbff;
}
.basic-feature-card header {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    margin-bottom: 11px;
}
.basic-feature-card header strong,
.basic-feature-card header small {
    display: block;
}
.basic-feature-card header strong {
    color: #344960;
    font-size: 12px;
}
.basic-feature-card header small {
    margin-top: 2px;
    color: #8795a8;
    font-size: 9.5px;
    line-height: 1.55;
}
.basic-feature-card header em {
    padding: 3px 7px;
    border-radius: 999px;
    color: #8d7a68;
    background: #f3eee8;
    font-size: 8.5px;
    font-style: normal;
    white-space: nowrap;
}
.basic-feature-card.active header em {
    color: #2866c8;
    background: #eaf3ff;
}
.basic-feature-card .base-feature-icon {
    border-color: #2d6dce;
    color: #fff;
    background: #2d6dce;
}
.basic-feature-card:not(.active) .base-feature-icon {
    border-color: #c7d3e2;
    color: transparent;
    background: #fff;
}
.basic-feature-card .base-alias-fields {
    grid-template-columns: 1fr;
    margin-bottom: 8px;
}
.basic-feature-card label {
    color: #74849a;
    font-size: 9.5px;
}
.basic-feature-card input,
.basic-feature-card textarea {
    min-height: 34px;
    margin-top: 4px;
    padding: 7px 9px;
    font-size: 11px;
}
.basic-feature-card textarea {
    min-height: 48px;
}
#paidFeatures .feature-config {
    grid-template-columns: 1fr;
}
#paidFeatures .feature-check,
#paidFeatures .feature-alias {
    grid-column: 1;
}
.dashboard-updated {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    color: #8290a2;
    background: #fff;
    font-size: 9.5px;
}
.dashboard-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.dashboard-chart-card {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border-radius: 13px;
}
.dashboard-chart-card.wide {
    grid-column: span 2;
}
.dashboard-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 2px;
}
.dashboard-chart-head h2 {
    margin: 0;
    color: #2d4059;
    font-size: 13px;
}
.dashboard-chart-head p {
    margin: 3px 0 0;
    color: #8b98aa;
    font-size: 9.5px;
}
.dashboard-chart-head > span {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 9px;
}
.dashboard-chart {
    width: 100%;
    height: 275px;
}
.dashboard-record-grid {
    margin-top: 14px;
}
.dashboard-record-grid .admin-panel {
    min-width: 0;
}
@media (max-width: 1080px) {
    .base-feature-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .basic-feature-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-chart-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-chart-card.wide {
        grid-column: auto;
    }
    .dashboard-stat-grid.mall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .palette-heading,
    .feature-section-head {
        align-items: stretch;
        flex-direction: column;
    }
    .theme-live-preview {
        min-width: 0;
    }
    .base-feature-selector {
        grid-template-columns: 1fr;
    }
    .basic-feature-panel > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .basic-summary-meta {
        width: 100%;
        padding-left: 28px;
    }
    .dashboard-updated {
        align-self: flex-start;
    }
    .dashboard-chart {
        height: 240px;
    }
    .dashboard-stat-grid.mall {
        grid-template-columns: 1fr;
    }
    .inline-settings-form{flex-direction:column;align-items:stretch}.inline-settings-form input{width:100%}.merchant-profile-grid{grid-template-columns:1fr}
}