/* CARGO.RUN: shared visual identity for the customer and staff workspaces. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --brand-yellow: #ffb200;
  --brand-yellow-hover: #ffc329;
  --brand-charcoal: #262626;
  --brand-soft: #fff7e3;
  --bg: #f5f5f5;
  --paper: #fff;
  --ink: #303030;
  --muted: #737373;
  --line: #e6e6e6;
  --green: var(--brand-charcoal);
  --accent: var(--brand-yellow);
  --soft: var(--brand-soft);
  --radius: 12px;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 500;
}
body { background: var(--bg); }
::selection { background: #ffe4a3; color: #262626; }
h1, h2, h3 { color: var(--brand-charcoal); font-weight: 700; letter-spacing: -.5px; }
h1 { font-size: 28px; line-height: 1.3; }
.page-head p, .page-head .page-subtitle { color: var(--muted); line-height: 1.7; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }
button, input, select, textarea { accent-color: var(--brand-yellow); }
input, select, textarea { color: var(--ink); border-color: #dcdcdc; border-radius: 8px; }
input::placeholder, textarea::placeholder { color: #838383; }
label, .muted, td small, .table-foot, .breadcrumb, .breadcrumb strong,
.user-label small, .staff-chip small, .dialog-head p, .dialog-note,
.status-note, .station-item p, .station-price, .station-quote-note, .station-last-price,
.station-empty-price, .station-directory-note, .station-history > p, .station-history-note,
.station-history td, .pricing-note, .price-explain, .audit-details, .note-footer,
.admin-footer, .admin-form small, .limit-cell > .muted { color: var(--muted); }
.topbar { background: #fff; border-color: var(--line); }
.panel, .admin-stat { border-color: var(--line); border-radius: var(--radius); box-shadow: 0 2px 8px #00000003; }
.panel-head { border-color: var(--line); }
.btn, .admin-app .btn {
  background: var(--brand-yellow); color: #262626; border: 1px solid transparent;
  border-radius: 24px; font-weight: 650; box-shadow: none;
}
.btn:hover, .admin-app .btn:hover { background: var(--brand-yellow-hover); color: #1a1a1a; }
.btn.secondary, .admin-app .btn.secondary {
  background: #fff; color: #434242; border-color: #d8d8d8;
}
.btn.secondary:hover, .admin-app .btn.secondary:hover { background: #fff9eb; border-color: var(--brand-yellow); }
.btn.ghost, .admin-app .btn.ghost { background: transparent; color: #434242; border-color: transparent; }
.btn.ghost:hover, .admin-app .btn.ghost:hover { color: #805900; background: #fff7e3; }
.btn.light, .admin-app .btn.light { background: var(--brand-yellow); color: #262626; }
.row-action, .admin-app .row-action { color: #434242; background: #fff; border-color: #dedede; border-radius: 8px; font-weight: 600; }
.row-action:hover, .admin-app .row-action:hover { background: #fff7e3; border-color: var(--brand-yellow); }
.icon-btn, .logout, .staff-chip button { color: #626262; }
.icon-btn:hover, .logout:hover { color: #262626; background: #fff7e3; }
.avatar { background: #fff0c7; color: #665019; font-weight: 700; }
.sidebar, .admin-app .sidebar { background: var(--brand-charcoal); color: #fff; border-color: #333; }
.cargorun-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin: 0 10px 24px; letter-spacing: 0;
}
.cargorun-brand img { width: 148px; height: 102px; object-fit: contain; background: transparent; }
.cargorun-brand small { display: block; font-size: 9px; font-weight: 500; color: #bdbdbd; letter-spacing: 0; line-height: 1.6; }
.admin-app .cargorun-brand { margin: 0 10px 20px; }
.admin-app .cargorun-brand img { width: 128px; height: 88px; }
.sidebar .company { border-color: #484848; background: #303030; }
.sidebar .company-icon { background: #424242; color: var(--brand-yellow); flex-shrink: 0; }
.sidebar .company strong, .sidebar .support strong { color: #f3f3f3; }
.sidebar .company small, .sidebar .support small, .sidebar .support .overline,
.sidebar .nav-label { color: #b5b5b5; }
.sidebar .support { border-color: #454545; }
.sidebar .nav-item, .admin-app .sidebar .nav-item { color: #d1d1d1; line-height: 1.5; }
.sidebar .nav-item:hover, .admin-app .sidebar .nav-item:hover { background: #353535; color: #fff; }
.sidebar .nav-item.selected, .admin-app .sidebar .nav-item.selected { background: var(--brand-yellow); color: #262626; font-weight: 700; }
.admin-app .nav-item .nav-glyph { flex-shrink: 0; }
.sidebar .env-pill { background: #303030; border-color: #515151; color: #e0e0e0; }
.sidebar .env-pill .dot { color: var(--brand-yellow); }
.sidebar .sidebar-bottom > .row-action { background: transparent; color: #eee; border-color: #555; }
.sidebar .sidebar-bottom > .row-action:hover { border-color: var(--brand-yellow); color: var(--brand-yellow); }
.admin-role { color: #f4c760; background: #34312a; border-color: #5c5038; }
.admin-label { color: #777; font-weight: 600; letter-spacing: 1.1px; }
.context-picker label { color: #777; }
.balance-card { background: var(--brand-charcoal); border: 1px solid #333; }
.balance-card:after { border-color: #ffb20020; box-shadow: 0 0 0 35px #ffb20006, 0 0 0 70px #ffb20004; }
.balance-top, .balance-note, .balance-bottom { color: #c5c5c5; }
.balance-top .icon { color: var(--brand-yellow); }
.balance-amount, .balance-amount span { color: var(--brand-yellow); font-weight: 600; }
.balance-bottom { border-color: #4b4b4b; }
.balance-bottom b { color: #fff; }
.admin-grid .admin-stat:first-child { background: var(--brand-charcoal); border-color: var(--brand-charcoal); }
.admin-grid .admin-stat:first-child strong { color: var(--brand-yellow); }
.admin-grid .admin-stat:first-child .stat-label, .admin-grid .admin-stat:first-child .stat-note { color: #d2d2d2; }
.admin-stat .stat-label, .admin-stat .stat-note { color: #777; }
.metric-icon, .metric:nth-child(2) .metric-icon, .metric:nth-child(3) .metric-icon { background: #fff2cf; color: #805e0f; border-radius: 10px; }
.metric .label, .metric .value small, .stat-note, .system-row .badge { color: #747474; }
.metric .value { color: #303030; font-weight: 650; }
.provider { color: #505050; }
.provider b, .provider.physical b { background: #ececec; color: #505050; }
.provider.virtual b { background: #fff0c7; color: #805900; }
.card-product { color: #666; font-weight: 600; }
.card-num, .vehicle { color: #454545; }
.progress { background: #ececec; }
.progress i { background: var(--brand-yellow); }
.progress i.high { background: #c58700; }
.limit-values span, .limit-values > span { color: #777; }
th { background: #f8f8f8; color: #666; border-color: var(--line); font-weight: 650; }
td { border-color: #efefef; }
tbody tr:hover { background: #fffcf4; }
.column-filters th { background: #fafafa; }
.daily-scroll > .daily-table > thead { background: #f8f8f8; }
.tabs { background: #e9e9e9; }
.tab { color: #626262; font-weight: 600; }
.tab.selected { background: var(--brand-charcoal); color: #fff; box-shadow: none; }
.tab.selected span { color: #ffcd57; }
.pagination button { color: #555; border-color: #ddd; }
.pagination button.current { background: var(--brand-yellow); color: #262626; border-color: var(--brand-yellow); }
.notice, .vat-preview, .preview-panel { color: #66521e; background: #fff8e8; border-color: #efdfb8; }
.notice.warning { color: #795b17; background: #fff2cf; border-color: #eed197; }
.preview-panel h3 { color: #434242; }
.tariff-section { background: #fcfcfc; border-color: #dedede; }
.section-result { border-color: #ddd; }
.section-tools button { color: #555; background: #eee; }
.section-tools button:hover { background: #ffe5a6; }
.condition-row .group-hint { color: #737373; }
.read-only { color: #626262; background: #f0f0f0; border-color: #dedede; }
.selected-card, .demo-controls, .demo-accounts, .price-calculation { background: #fafafa; border-color: #e2e2e2; }
.limit-input input, .change-preview strong { color: #303030; border-color: #d2b46e; }
.presets button { color: #626262; border-color: #ddd; }
.presets button:hover { background: #fff2cf; }
.dialog-result .result-icon { background: #fff0c7; color: #6b5112; }
.station-map, .real-map { background: #ededed; }
.station-item.selected { background: #fff7e3; border-left-color: var(--brand-yellow); }
.station-item:hover { background: #fffcf5; }
.station-price strong, .station-list .station-price strong,
.final-station-price strong, .station-pricing .final-station-price strong { color: #303030; }
.station-history > p, .map-load-note, .map-title { color: #747474; }
.price-calculation span { color: #777; }
.daily-totals { background: #fafafa; }
.login-art, .admin-login-art { background: var(--brand-charcoal); color: #fff; }
.login-art h1, .admin-login-art h1 { color: #fff; font-weight: 700; letter-spacing: -1px; }
.login-art h1 em, .admin-login-art h1 em { color: var(--brand-yellow); }
.login-art > p, .admin-login-art > p { color: #d1d1d1; }
.login-art .cargorun-brand { margin: 0; gap: 12px; }
.login-art .cargorun-brand img { width: 156px; height: 107px; }
.login-art .cargorun-brand small { color: #bbb; font-size: 10px; }
.login-art .art-footer { color: #bbb; }
.admin-login-art > img { width: 156px; height: 107px; object-fit: contain; background: transparent; border-radius: 0; }
.login-box > p, .login-footnote, .admin-login-box > p { color: #737373; }
.demo-accounts h3, .demo-accounts code, .demo-accounts p { color: #6c6c6c; }
.overline, .login-box .overline { color: #737373; }
#toast { background: #262626; color: #fff; border-left: 4px solid var(--brand-yellow); box-shadow: 0 8px 30px #0002; }
@media (max-width: 700px) {
  h1 { font-size: 24px; }
  .cargorun-brand img { width: 128px; height: 88px; }
  .login-art .cargorun-brand { flex-direction: row; align-items: center; gap: 20px; }
  .login-art .cargorun-brand img, .admin-login-art > img { width: 102px; height: 70px; }
  .login-art h1, .admin-login-art h1 { font-size: 30px; }
  .balance-amount { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}