:root {
    color-scheme:light;
    --bg:#f5f7fb;
    --surface:#fff;
    --ink:#192a43;
    --muted:#65748b;
    --border:#e3e9f1;
    --primary:#245ed9;
    --primary-hover:#194bb8;
    --soft:#edf3ff;
    --warn:#9b5d0a;
    --warn-bg:#fff6e5;
    --success:#157853;
    --success-bg:#eaf7f0;
    --danger:#b63737;
    --radius:12px;
    --shadow:0 4px 20px #20365b05;
    font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
    font-size:14px;
    line-height:1.6
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink)
}
button,input,textarea,select {
    font:inherit
}
button {
    border:1px solid transparent;
    background:var(--primary);
    color:#fff;
    border-radius:8px;
    padding:10px 18px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s
}
button:hover {
    background:var(--primary-hover)
}
button:disabled {
    opacity:.45;
    cursor:not-allowed
}
button.secondary {
    background:#fff;
    border-color:var(--border);
    color:var(--ink)
}
button.secondary:hover {
    background:#f1f5fb
}
button.danger {
    background:#fff1f1;
    border-color:#f0cece;
    color:var(--danger)
}
button.text-button {
    background:transparent;
    color:var(--muted);
    padding:6px 0;
    border:0
}
.compact {
    padding:7px 12px;
    font-size:13px
}
a {
    color:var(--primary);
    text-decoration:none
}
a:hover {
    text-decoration:underline
}
h1,h2,h3,p {
    margin:0
}
h1 {
    font-size:22px;
    letter-spacing:-.6px
}
h2 {
    font-size:22px;
    letter-spacing:-.5px
}
h3 {
    font-size:15px
}
p+ p {
    margin-top:8px
}
label {
    display:grid;
    gap:7px;
    color:#44526a;
    font-size:13px;
    font-weight:500
}
input,select,textarea {
    width:100%;
    min-width:0;
    border:1px solid #ccd6e4;
    border-radius:8px;
    padding:10px 12px;
    color:var(--ink);
    background:#fff;
    outline:none
}
input:focus,select:focus,textarea:focus {
    border-color:#658dea;
    box-shadow:0 0 0 3px #245ed915
}
button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid #90adf0;
    outline-offset:3px
}
input[type=checkbox],input[type=radio] {
    width:17px;
    height:17px;
    accent-color:var(--primary);
    margin:0;
    box-shadow:none
}
textarea {
    resize:vertical;
    min-height:96px
}
pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font:13px/1.75 Consolas,monospace
}
.muted {
    color:var(--muted)
}
.small {
    font-size:12px
}
.eyebrow {
    font-size:11px;
    color:var(--muted);
    letter-spacing:1px
}
.badge {
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    font-size:12px;
    line-height:22px;
    font-weight:500;
    padding:2px 9px;
    background:#eff3f8;
    color:#51627b;
    border-radius:5px
}
.badge.warn {
    background:var(--warn-bg);
    color:var(--warn)
}
.badge.success {
    background:var(--success-bg);
    color:var(--success)
}
.badge.danger {
    background:#fff0f0;
    color:var(--danger)
}
[hidden] {
    display:none!important
}
.check-label {
    display:flex;
    align-items:center;
    gap:9px;
    margin:15px 0
}
.notice:empty {
    display:none
}
.notice {
    padding:11px 14px;
    border-radius:8px;
    background:var(--soft);
    color:#31548f;
    margin-bottom:16px
}
.callout {
    padding:12px 16px;
    background:#f5f8fd;
    border:1px solid var(--border);
    border-radius:8px;
    color:#536780;
    font-size:13px;
    margin:14px 0
}
.panel {
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    margin-bottom:20px;
    box-shadow:var(--shadow);
    min-width:0
}
.panel-heading,.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px
}
.page-heading p {
    color:var(--muted);
    margin-top:5px
}
.panel-heading h3 {
    margin:0
}
.panel>h3 {
    margin-bottom:16px
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px
}
.span-two {
    grid-column:1/-1
}
.form-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:18px 0 0
}
.filter-bar {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-end;
    margin-bottom:20px
}
.filter-bar .grow {
    flex:1;
    min-width:180px
}
.filter-bar label:not(.grow) {
    max-width:200px
}
.filter-bar button {
    height:43px
}
.inline-filter {
    display:flex;
    align-items:center;
    gap:12px;
    max-width:250px;
    margin:16px 0
}
.detail-text {
    background:#f6f8fc;
    border:1px solid var(--border);
    border-radius:8px;
    padding:16px;
    margin:0;
    color:#4a5e78
}
.table-wrap {
    overflow-x:auto;
    width:100%;
    border-radius:7px
}
table {
    border-collapse:collapse;
    width:100%;
    text-align:left;
    font-size:13px
}
th {
    color:#718096;
    font-size:12px;
    font-weight:500;
    background:#f7f9fc;
    white-space:nowrap;
    padding:12px 14px;
    border-bottom:1px solid var(--border)
}
td {
    padding:15px 14px;
    border-bottom:1px solid #edf0f5;
    vertical-align:middle;
    max-width:340px;
    overflow-wrap:anywhere
}
tr:last-child td {
    border-bottom:0
}
td strong {
    display:block;
    font-weight:600
}
td small {
    display:block;
    color:var(--muted);
    margin-top:3px;
    font-size:11px
}
td .row-actions {
    display:flex;
    gap:6px
}
.table-wrap table {
    min-width:640px
}
.empty-state {
    text-align:center;
    padding:42px 18px;
    color:var(--muted);
    background:#fafbfd;
    border-radius:8px
}
.empty-state strong {
    display:block;
    color:#53647d;
    margin-bottom:7px
}
.pager {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-top:16px;
    color:var(--muted);
    font-size:12px
}
.key-values {
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px 24px;
    font-size:13px;
    margin:10px 0
}
.key-values dt {
    color:var(--muted)
}
.key-values dd {
    margin:0;
    text-align:right;
    overflow-wrap:anywhere
}
.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:20px
}
.metric {
    padding:21px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow)
}
.metric-label {
    color:var(--muted);
    font-size:12px
}
.metric-value {
    font-size:29px;
    line-height:1.35;
    font-weight:650;
    letter-spacing:-.6px;
    margin:8px 0
}
.metric-help {
    font-size:12px;
    color:#8290a5
}
.two-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.sidebar {
    width:224px;
    position:fixed;
    inset:0 auto 0 0;
    background:#fff;
    border-right:1px solid var(--border);
    padding:28px 16px;
    display:flex;
    flex-direction:column;
    z-index:10
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--ink);
    font-size:17px;
    font-weight:650;
    letter-spacing:-.4px
}
.brand:hover {
    text-decoration:none
}
.brand-mark {
    background:var(--primary);
    color:#fff;
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    border-radius:9px;
    font-size:21px
}
.brand small {
    display:block;
    color:#8a98ac;
    font-size:9px;
    letter-spacing:1.7px;
    margin-top:1px
}
.nav-caption {
    font-size:11px;
    color:#96a2b4;
    margin:38px 12px 10px
}
.sidebar nav {
    display:grid;
    gap:5px
}
.sidebar nav a {
    color:#607089;
    padding:11px 15px;
    border-radius:8px;
    display:flex;
    align-items:center;
    gap:13px
}
.sidebar nav a:hover {
    background:#f6f8fc;
    text-decoration:none
}
.sidebar nav a.active {
    color:var(--primary);
    background:var(--soft);
    font-weight:600
}
.nav-icon {
    font-size:18px;
    width:19px;
    text-align:center
}
.sidebar-foot {
    margin-top:auto;
    border-top:1px solid var(--border);
    padding:18px 12px 0;
    font-size:11px;
    color:var(--muted)
}
.sidebar-foot button {
    display:block;
    margin-top:6px
}
.secure-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#29a274;
    margin-right:3px
}
.admin-shell {
    margin-left:224px;
    min-width:0
}
.topbar {
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 36px;
    background:#ffffffc9;
    border-bottom:1px solid var(--border);
    gap:16px
}
.topbar-right {
    display:flex;
    align-items:center;
    gap:14px
}
.workspace {
    padding:30px 36px;
    max-width:1600px;
    margin:auto
}
.workspace-footer {
    font-size:11px;
    color:#94a0b0;
    text-align:center;
    padding:12px 0 0
}
summary {
    cursor:pointer;
    font-weight:600;
    padding:8px 0;
    color:#3a557c
}
details[open] summary {
    margin-bottom:14px
}
dialog {
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 24px 70px #182d4926;
    width:min(760px,94vw);
    max-height:88vh;
    padding:26px;
    color:var(--ink)
}
dialog::backdrop {
    background:#16253e66
}
dialog h3 {
    margin:20px 0 8px
}
.timeline-item {
    font-size:13px;
    border-left:2px solid #dce5f3;
    padding:6px 14px;
    color:#60718a
}
.timeline-item small {
    display:block;
    color:#8c99ab
}
#order-items pre {
    padding:16px;
    background:#f5f7fb;
    border-radius:8px
}
.customer-body {
    min-height:100vh;
    background:#f5f7fb
}
.customer-header {
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1080px;
    margin:auto;
    padding:0 26px
}
.customer-header .brand {
    font-size:16px
}
.customer-header .badge {
    background:#fff;
    border:1px solid var(--border)
}
.customer-main {
    max-width:650px;
    margin:40px auto;
    padding:0 22px
}
.customer-intro {
    text-align:center;
    margin-bottom:28px
}
.customer-intro h1 {
    font-size:30px;
    letter-spacing:-1px;
    margin-bottom:10px
}
.customer-intro p {
    color:var(--muted)
}
.customer-card {
    padding:28px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 8px 36px #263d5e06
}
.customer-card h2 {
    font-size:19px;
    margin-bottom:8px
}
#activation-modes {
    display:flex;
    background:#f0f3f8;
    padding:4px;
    border-radius:9px;
    margin-bottom:24px;
    gap:4px
}
#activation-modes label {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:1;
    padding:9px;
    border-radius:6px;
    cursor:pointer;
    color:var(--muted)
}
#activation-modes label:has(input:checked) {
    background:#fff;
    box-shadow:0 1px 4px #1528450f;
    color:var(--primary);
    font-weight:600
}
#activation-modes input {
    width:14px;
    height:14px
}
#activation-form>button[type=submit] {
    width:100%;
    margin-top:18px;
    padding:12px
}
#single-panel input {
    margin-top:8px;
    font-family:Consolas,monospace;
    font-size:15px
}
#batch-panel textarea {
    margin-top:8px;
    min-height:180px;
    font-family:Consolas,monospace
}
#batch-preview {
    margin-top:10px
}
#batch-summary {
    font-size:13px;
    color:var(--muted);
    margin-top:12px
}
#notice {
    margin:18px 0 0
}
#refresh {
    margin-top:16px;
    width:100%;
    font-size:13px
}
.footnote {
    font-size:12px;
    color:var(--muted);
    margin-top:20px;
    line-height:1.9
}
.customer-footer {
    text-align:center;
    font-size:12px;
    color:#94a0b0;
    padding:24px
}
.result-article {
    margin-top:20px;
    border:1px solid var(--border);
    border-radius:12px;
    padding:22px;
    background:#fff
}
.result-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px
}
.result-position {
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    letter-spacing:.5px
}
.result-article h2 {
    font-size:18px;
    margin:8px 0
}
.result-article>p {
    color:var(--muted);
    font-size:13px
}
.delivery-item {
    margin:16px 0
}
.delivery-item-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
    margin-bottom:8px
}
.delivery-item pre {
    margin:0;
    padding:16px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#f7f9fc;
    color:#243a57
}
.result-article>button {
    width:100%;
    margin-top:8px
}
.login-main {
    max-width:410px;
    margin:12vh auto;
    padding:0 20px
}
.login-main .brand {
    justify-content:center;
    margin-bottom:28px
}
.login-card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:30px
}
.login-card h1 {
    margin-bottom:8px
}
.login-card p {
    color:var(--muted);
    font-size:13px;
    margin-bottom:22px
}
.login-card button {
    width:100%;
    margin-top:20px
}
.login-card input {
    margin-top:7px
}
@media(min-width:1600px) {
    .workspace {
        padding-top:38px
    }
}
@media(max-width:1100px) {
    .metric-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .workspace {
        padding:24px
    }
    .topbar {
        padding:0 24px
    }
    .two-columns {
        gap:16px
    }
}
@media(max-width:760px) {
    .sidebar {
        position:static;
        width:100%;
        padding:16px 18px 0;
        border-right:0;
        border-bottom:1px solid var(--border)
    }
    .sidebar .brand {
        font-size:16px
    }
    .nav-caption,.sidebar-foot {
        display:none
    }
    .sidebar nav {
        display:flex;
        overflow-x:auto;
        margin-top:16px;
        gap:4px;
        padding-bottom:8px
    }
    .sidebar nav a {
        padding:8px 12px;
        font-size:12px;
        white-space:nowrap;
        gap:5px
    }
    .nav-icon {
        font-size:15px;
        width:15px
    }
    .admin-shell {
        margin-left:0
    }
    .topbar {
        height:76px;
        padding:0 18px
    }
    .topbar h1 {
        font-size:19px
    }
    .topbar .eyebrow {
        font-size:10px
    }
    .topbar-right {
        gap:8px
    }
    .topbar-right button {
        font-size:11px;
        padding:7px
    }
    .workspace {
        padding:20px 14px
    }
    .page-heading {
        align-items:flex-start
    }
    .page-heading h2 {
        font-size:20px
    }
    .page-heading p {
        font-size:12px
    }
    .page-heading>span {
        display:none
    }
    .page-heading>button {
        font-size:12px;
        white-space:nowrap;
        padding:9px 12px
    }
    .metric-grid {
        gap:10px
    }
    .metric {
        padding:16px
    }
    .metric-value {
        font-size:25px
    }
    .metric-help {
        font-size:10px
    }
    .two-columns {
        grid-template-columns:1fr;
        gap:0
    }
    .panel {
        padding:17px;
        margin-bottom:14px
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .span-two {
        grid-column:auto
    }
    .filter-bar {
        gap:10px
    }
    .filter-bar label {
        flex:1;
        min-width:120px;
        max-width:none!important
    }
    .filter-bar .grow {
        flex-basis:100%
    }
    .form-actions button {
        flex:1;
        font-size:12px;
        padding:10px;
        min-width:130px
    }
    .table-wrap table {
        min-width:620px
    }
    .pager {
        justify-content:space-between
    }
    .customer-header {
        height:68px;
        padding:0 20px
    }
    .customer-main {
        margin:24px auto;
        padding:0 14px
    }
    .customer-intro {
        margin-bottom:22px
    }
    .customer-intro h1 {
        font-size:26px
    }
    .customer-intro p {
        font-size:13px
    }
    .customer-card {
        padding:22px 18px
    }
    .result-article {
        padding:18px
    }
    .customer-header .badge {
        font-size:10px
    }
    .result-article h2 {
        font-size:17px
    }
    dialog {
        padding:20px
    }
    .key-values {
        gap:12px;
        font-size:12px
    }
}
.inline-filter {
    white-space:nowrap
}
.inline-filter select {
    width:auto;
    min-width:160px
}
.workspace>#admin-notice {
    position:sticky;
    top:12px;
    z-index:20
}
@media(max-width:760px) {
    .sidebar {
        position:relative
    }
    .sidebar-foot {
        display:block;
        position:absolute;
        right:18px;
        top:18px;
        margin:0;
        padding:0;
        border:0;
        font-size:0
    }
    .sidebar-foot .secure-dot {
        display:none
    }
    .sidebar-foot button {
        font-size:12px;
        margin:0
    }
}