:root {
  --colorPrimary: #2457d6;
  --colorPrimarySoft: #eaf0ff;
  --colorBackground: #f5f7fb;
  --colorSurface: #ffffff;
  --colorText: #182336;
  --colorMuted: #57667a;
  --colorBorder: #dce3ed;
  --colorSidebar: #132137;
  --colorSidebarMuted: #adbbd0;
  --colorSuccess: #126343;
  --colorSuccessSoft: #e7f5ed;
  --colorWarning: #845309;
  --colorWarningSoft: #fff4da;
  --colorDanger: #a82431;
  --colorDangerSoft: #fff0f1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}
.appBody { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-size: 1rem; line-height: 1.6; color: var(--colorText); background: var(--colorBackground); }
.appRoot { min-height: 100dvh; }
.shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100dvh; }
.sidebar { background: var(--colorSidebar); color: white; padding: 1.8rem 1rem; display: flex; flex-direction: column; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .75rem; padding: 0 .6rem; }
.brandMark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--colorPrimary); color: white; font-weight: var(--font-weight-bold); }
.brandName { font-size: 1.05rem; font-weight: var(--font-weight-semibold); letter-spacing: .02em; }
.brandCaption { display: block; font-size: .75rem; color: var(--colorSidebarMuted); }
.nav { display: flex; flex-direction: column; gap: .35rem; }
.navLink { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-radius: .5rem; color: var(--colorSidebarMuted); text-decoration: none; min-height: 1.5rem; transition: background 160ms, color 160ms; }
.navLink:hover { color: white; background: #1d304c; }
.navLink.active { color: white; background: #28405f; }
.navNumber { font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .8; }
.sidebarFooter { margin-top: auto; padding: 1rem .6rem; color: var(--colorSidebarMuted); font-size: .8rem; }
.workspace { min-width: 0; }
.topbar { min-height: 4.8rem; padding: .5rem 2.25rem; background: var(--colorSurface); border-bottom: .0625rem solid var(--colorBorder); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.topbarGroup { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.identity { font-size: .85rem; color: var(--colorMuted); }
.main { max-width: 94rem; padding: 2rem 2.25rem 4rem; outline: none; }
.pageHeader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.eyebrow { margin: 0 0 .35rem; color: var(--colorMuted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.heading { margin: 0; font-size: 1.75rem; line-height: 1.3; font-weight: var(--font-weight-semibold); text-wrap: balance; }
.description { margin: .6rem 0 0; color: var(--colorMuted); font-size: .9rem; max-width: 58rem; }
.sectionTitle { margin: 0 0 .75rem; font-size: 1.08rem; font-weight: var(--font-weight-semibold); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem .95rem; font: inherit; font-size: .85rem; font-weight: var(--font-weight-medium); border: .0625rem solid var(--colorBorder); border-radius: .5rem; color: var(--colorText); background: var(--colorSurface); cursor: pointer; text-decoration: none; transition: background 160ms, border-color 160ms; }
.button:hover { background: var(--colorPrimarySoft); border-color: var(--colorPrimary); }
.button.primary { background: var(--colorPrimary); color: white; border-color: var(--colorPrimary); }
.button.danger { color: var(--colorDanger); border-color: #e9b8be; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button:focus-visible, .navLink:focus-visible, .input:focus-visible, .skipLink:focus-visible { outline: .2rem solid #6c94f4; outline-offset: .18rem; }
.badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: .35rem; padding: .25rem .55rem; color: var(--colorMuted); background: #edf1f6; font-size: .75rem; font-weight: var(--font-weight-medium); white-space: normal; }
.badge.success { color: var(--colorSuccess); background: var(--colorSuccessSoft); }
.badge.warning { color: var(--colorWarning); background: var(--colorWarningSoft); }
.badge.danger { color: var(--colorDanger); background: var(--colorDangerSoft); }
.notice { padding: .9rem 1.15rem; border: .0625rem solid #ebd8a2; border-radius: .6rem; color: var(--colorWarning); background: var(--colorWarningSoft); font-size: .85rem; margin-bottom: 1.5rem; }
.panel { background: var(--colorSurface); border: .0625rem solid var(--colorBorder); border-radius: .8rem; padding: 1.3rem; margin-bottom: 1.25rem; min-width: 0; }
.statGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.statCard { background: var(--colorSurface); border: .0625rem solid var(--colorBorder); border-radius: .8rem; padding: 1.2rem; }
.statLabel { color: var(--colorMuted); font-size: .85rem; }
.statValue { display: block; font-size: 2rem; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; margin: .5rem 0; }
.statHint { color: var(--colorMuted); font-size: .75rem; }
.cardGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; }
.productCard { background: var(--colorSurface); border: .0625rem solid var(--colorBorder); border-radius: .8rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.productTop { display: flex; justify-content: space-between; gap: .5rem; }
.productTitle { margin: 0; font-size: 1.15rem; font-weight: var(--font-weight-semibold); }
.productSpec { color: var(--colorMuted); font-size: .85rem; margin: 0; }
.price { font-size: 1.8rem; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.currency { color: var(--colorMuted); font-size: .8rem; margin-left: .4rem; }
.tableWrap { width: 100%; overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tableHead { text-align: left; padding: .8rem .75rem; color: var(--colorMuted); background: #f8fafc; font-size: .75rem; font-weight: var(--font-weight-medium); border-bottom: .0625rem solid var(--colorBorder); white-space: nowrap; }
.tableCell { padding: 1rem .75rem; border-bottom: .0625rem solid #e9edf3; vertical-align: middle; overflow-wrap: anywhere; max-width: 24rem; }
.tableRow:hover { background: #fafcff; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; overflow-wrap: anywhere; }
.muted { color: var(--colorMuted); font-size: .85rem; }
.empty { padding: 3rem 1.5rem; text-align: center; color: var(--colorMuted); background: var(--colorSurface); border: .0625rem dashed var(--colorBorder); border-radius: .8rem; }
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.label { font-size: .85rem; font-weight: var(--font-weight-medium); }
.input { box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: .65rem .8rem; border: .0625rem solid #b9c5d4; border-radius: .45rem; color: var(--colorText); background: white; font: inherit; font-size: 1rem; }
.textarea { min-height: 8rem; resize: vertical; }
.helper { color: var(--colorMuted); font-size: .8rem; margin: 0; }
.error { color: var(--colorDanger); background: var(--colorDangerSoft); padding: .8rem; border-radius: .5rem; font-size: .85rem; overflow-wrap: anywhere; }
.modal { box-sizing: border-box; width: min(40rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem); overflow: auto; padding: 1.5rem; color: var(--colorText); border: .0625rem solid var(--colorBorder); border-radius: .9rem; box-shadow: 0 1.5rem 5rem #13213733; }
.modal::backdrop { background: #13213788; }
.modalHeader { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modalTitle { margin: 0; font-size: 1.25rem; }
.detailText { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--colorBackground); padding: 1rem; border-radius: .5rem; font-size: .85rem; }
.message { border-left: .15rem solid var(--colorBorder); padding: .7rem 1rem; margin: 1rem 0; }
.messageBody { white-space: pre-wrap; overflow-wrap: anywhere; }
.loginPage { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; box-sizing: border-box; }
.loginCard { width: min(28rem, 100%); box-sizing: border-box; background: white; border: .0625rem solid var(--colorBorder); border-radius: 1rem; padding: 2rem; box-shadow: 0 .8rem 3rem #1321370b; }
.loginBrand { margin-bottom: 1.8rem; }
.loginIntro { margin: 1rem 0 1.5rem; color: var(--colorMuted); font-size: .9rem; }
.loginDivider { margin: 1.5rem 0; border-top: .0625rem solid var(--colorBorder); padding-top: 1.5rem; }
.toast { position: fixed; right: 1.5rem; bottom: 1.5rem; max-width: min(30rem, calc(100vw - 5rem)); padding: .9rem 1.2rem; background: var(--colorSidebar); color: white; border-radius: .6rem; z-index: 20; box-shadow: 0 .4rem 2rem #13213722; overflow-wrap: anywhere; }
.skipLink { position: absolute; left: 1rem; top: -5rem; z-index: 30; padding: .75rem; background: white; color: var(--colorPrimary); }
.skipLink:focus { top: 1rem; }
.checkboxLabel { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; }
.checkbox { width: 1.1rem; height: 1.1rem; }
@media(max-width: 70rem) { .shell { grid-template-columns: 12rem minmax(0, 1fr); } .main, .topbar { padding-left: 1.25rem; padding-right: 1.25rem; } .statGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 48rem) { .shell { display: block; } .sidebar { padding: 1rem; gap: 1rem; } .nav { flex-direction: row; flex-wrap: wrap; gap: .25rem; } .navLink { padding: .5rem .7rem; min-height: 1.75rem; } .navNumber, .sidebarFooter { display: none; } .topbar { padding: .75rem 1rem; } .main { padding: 1.4rem 1rem 4rem; } .heading { font-size: 1.5rem; } .statGrid { gap: .75rem; } .statCard { padding: .9rem; } .statValue { font-size: 1.6rem; } .panel { padding: 1rem; } .tableCell { min-width: 6rem; } }
@media(prefers-reduced-motion: reduce) { .button, .navLink { transition: none; } }