:root { color: #1a2923; background: #f4f7f3; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button, input { font: inherit; } button { cursor: pointer; }
.onboarding-shell { min-height: 100vh; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at top right, #e6f2d9 0, transparent 38%), #f4f7f3; }.onboarding-topbar { width: min(680px, 100%); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; }.onboarding-card { width: min(520px, 100%); margin: clamp(42px, 15vh, 130px) auto 0; padding: clamp(25px, 7vw, 40px); border: 1px solid #dce7dd; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 16px 42px rgba(29,63,42,.09); }.onboarding-card h1 { margin: 0; color: #18281f; font-size: clamp(28px, 8vw, 38px); letter-spacing: -1px; line-height: 1.08; }.onboarding-card > p:not(.onboarding-eyebrow):not(.onboarding-error) { margin: 13px 0 0; color: #66766c; font-size: 14px; line-height: 1.55; }.onboarding-eyebrow { margin: 0 0 10px; color: #4f8364; font-size: 10px; font-weight: 800; letter-spacing: 1.25px; }.onboarding-retry { margin-top: 24px; }.onboarding-spinner { display: block; width: 27px; height: 27px; margin-top: 24px; border: 3px solid #dce9df; border-top-color: #327153; border-radius: 50%; animation: onboarding-spin .8s linear infinite; }.profile-card form { display: grid; gap: 15px; margin-top: 24px; }.profile-card label { display: grid; gap: 7px; color: #405548; font-size: 12px; font-weight: 750; }.profile-card input, .profile-card select { width: 100%; min-height: 44px; border: 1px solid #cedbd0; border-radius: 9px; padding: 10px 11px; color: #23382a; background: #fff; outline: none; }.profile-card input:focus, .profile-card select:focus { border-color: #397753; box-shadow: 0 0 0 3px rgba(83,173,113,.18); }.profile-card button { margin-top: 7px; min-height: 45px; }.profile-card button:disabled { cursor: wait; opacity: .7; }.onboarding-error { margin: 17px 0 0; border-radius: 9px; padding: 10px 12px; color: #9a3d36; background: #fff0ed; font-size: 12px; line-height: 1.4; }
.profile-summary { display: grid; gap: 12px; margin: 24px 0; }.profile-summary div { padding: 12px 0; border-bottom: 1px solid #e6ece6; }.profile-summary dt { color: #7a8c7f; font-size: 11px; }.profile-summary dd { margin: 4px 0 0; color: #25382c; font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }.authenticated-placeholder { border-radius: 10px; padding: 13px; color: #426250 !important; background: #edf7ee; font-size: 12px !important; }
@keyframes onboarding-spin { to { transform: rotate(360deg); } }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); background: #f5f7f3; }
.sidebar { background: #142820; color: #dce8df; padding: 28px 16px 18px; display: flex; flex-direction: column; min-height: 100vh; }
.brand { color: #f6f5ed; text-decoration: none; display: flex; align-items: center; gap: 9px; padding: 0 11px; font-size: 24px; letter-spacing: -1.3px; font-weight: 750; }.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px 9px 9px 2px; background: #d8f36a; color: #142820; font-size: 16px; letter-spacing: 0; }
.workspace-label { color: #82998c; font-size: 10px; font-weight: 750; letter-spacing: 1px; margin: 48px 12px 12px; } nav { display: grid; gap: 4px; }.nav-item { color: #aec0b4; border: 0; background: transparent; padding: 12px; display: flex; align-items: center; gap: 12px; text-align: left; border-radius: 9px; font-size: 14px; }.nav-item span { width: 17px; text-align: center; color: #7f9689; }.nav-item:hover { background: #1c342a; }.nav-item.is-active { color: #f6f8ef; background: #294436; font-weight: 650; }.nav-item.is-active span { color: #d8f36a; }
.sidebar-footer { margin-top: auto; border-top: 1px solid #2b4035; padding: 18px 8px 0; }.team-card { display: flex; align-items: center; gap: 9px; }.avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #183126; background: #d8f36a; font-size: 10px; font-weight: 800; }.team-card div { min-width: 0; flex: 1; }.team-card strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #f0f5ef; }.team-card small { display: block; white-space: normal; overflow: visible; color: #809588; font-size: 10px; line-height: 1.3; }.sidebar-footer p { color: #809588; font-size: 10px; line-height: 1.5; }.team-card button { color: #93a99c; background: none; border: 0; }.sidebar-footer p { margin: 17px 0 0; }
.main-area { min-width: 0; }.topbar { min-height: 69px; padding: 10px 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e9e4; background: rgba(255,255,255,.72); }.crumb { font-size: 13px; color: #57675e; }.crumb span { padding: 0 7px; color: #9ca9a0; }.topbar-actions { display: flex; align-items: center; gap: 15px; }.language-switcher { display: inline-flex; padding: 3px; border: 1px solid #d9e1da; background: #fff; border-radius: 8px; }.language-button { min-width: 31px; padding: 5px 6px; border: 0; border-radius: 5px; color: #708076; background: transparent; font-size: 10px; font-weight: 800; letter-spacing: .25px; }.language-button:hover { color: #264d39; background: #edf5ee; }.language-button.is-active { color: #fff; background: #1e4e39; }.icon-button, .help-button, .mobile-menu { background: transparent; border: 0; color: #5a685f; }.icon-button { font-size: 20px; position: relative; }.icon-button b { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ef7652; top: 1px; right: 1px; }.help-button { border: 1px solid #d9e1da; padding: 7px 12px; border-radius: 7px; font-size: 12px; }.mobile-menu { display: none; }
.main-area { min-width: 0; }.topbar { min-height: 69px; padding: 10px 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e9e4; background: rgba(255,255,255,.72); }.crumb { font-size: 13px; color: #57675e; }.crumb span { padding: 0 7px; color: #9ca9a0; }.topbar-actions { display: flex; align-items: center; gap: 15px; }.language-switcher { display: inline-flex; }.language-select { display: inline-flex; align-items: center; }.language-select > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.language-select select { max-width: 145px; border: 1px solid #d9e1da; border-radius: 8px; background: #fff; color: #29483a; padding: 7px 27px 7px 10px; font-size: 11px; font-weight: 700; outline: none; }.language-select select:focus-visible { border-color: #397753; box-shadow: 0 0 0 3px rgba(83,173,113,.2); }.icon-button, .help-button, .mobile-menu { background: transparent; border: 0; color: #5a685f; }.icon-button { font-size: 20px; position: relative; }.icon-button b { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ef7652; top: 1px; right: 1px; }.help-button { border: 1px solid #d9e1da; padding: 7px 12px; border-radius: 7px; font-size: 12px; }.mobile-menu { display: none; }
.auth-status { border-radius: 999px; padding: 5px 8px; color: #52705e; background: #edf3ee; font-size: 10px; font-weight: 750; white-space: nowrap; }.auth-telegram { color: #28734a; background: #e1f5e7; }.auth-error, .auth-telegram-without-init-data { color: #93613c; background: #fff0e3; }
.content { max-width: 1440px; margin: 0 auto; padding: 42px 48px 60px; }.workspace-header { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }.eyebrow { color: #6e8977; font-weight: 800; font-size: 10px; letter-spacing: 1.15px; margin: 0 0 9px; }.workspace-header h1 { color: #18281f; margin: 0; letter-spacing: -1.15px; font-size: clamp(27px, 3vw, 36px); line-height: 1.1; }.subtitle { color: #68776e; margin: 9px 0 0; font-size: 14px; }.primary-button, .secondary-button { border: 0; border-radius: 8px; white-space: nowrap; padding: 11px 15px; font-size: 13px; font-weight: 700; }.primary-button { background: #1e4e39; color: white; box-shadow: 0 6px 13px rgba(30,78,57,.16); }.primary-button span { font-size: 17px; margin-left: 8px; line-height: 0; }.secondary-button { color: #27533f; background: #e4f1e7; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 22px; }.metric-card { position: relative; overflow: hidden; min-height: 139px; border: 1px solid #e1e8e1; background: #fff; border-radius: 11px; padding: 20px; box-shadow: 0 2px 5px rgba(22,47,35,.025); }.metric-card::before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 4px; background: #70be90; }.accent-blue::before { background: #80b1d7; }.accent-orange::before { background: #f1ae63; }.accent-red::before { background: #e57b72; }.metric-card span, .metric-card small { color: #708076; display: block; font-size: 12px; }.metric-card strong { display: block; color: #1a2c23; margin: 15px 0 12px; font-size: 31px; letter-spacing: -.7px; }.metric-card small { font-size: 11px; }
.split-grid, .operational-grid { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(320px, .85fr); gap: 22px; }.operational-grid { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.35fr); }.panel { overflow: hidden; border: 1px solid #e0e7e0; border-radius: 11px; background: #fff; box-shadow: 0 2px 5px rgba(22,47,35,.025); }.panel-heading { padding: 21px 22px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.panel-heading h2 { color: #213126; font-size: 15px; margin: 0; }.panel-heading p { color: #78857c; font-size: 11px; margin: 5px 0 0; }.text-button { border: 0; background: transparent; color: #387152; font-size: 12px; font-weight: 700; padding: 3px; }
.table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; min-width: 540px; } th { background: #f8faf8; color: #819087; text-align: left; font-size: 10px; letter-spacing: .55px; text-transform: uppercase; font-weight: 750; padding: 11px 22px; } td { color: #53625a; font-size: 12px; padding: 15px 22px; border-top: 1px solid #edf1ed; } td strong { display: block; color: #25362c; font-size: 12px; } td small { display: block; margin-top: 4px; color: #90a097; font-size: 10px; }.status, .severity { display: inline-flex; width: max-content; border-radius: 99px; padding: 3px 7px; font-size: 10px; font-weight: 750; margin-top: 5px; }.status-published { background: #e4f5e9; color: #34734c; }.status-draft, .status-muted { background: #edf0ee; color: #758278; }.severity-high { background: #fff0e8; color: #bd5d39; }.severity-medium { background: #fff7de; color: #a47620; }
.activity-panel { padding-bottom: 7px; }.activity-item { display: flex; gap: 11px; margin: 4px 22px 17px; }.activity-item .dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; flex: 0 0 auto; }.dot-orange { background: #e8a13d; }.dot-red { background: #e26a5e; }.dot-green { background: #53ad71; }.activity-item strong { color: #33453a; font-size: 12px; }.activity-item p { color: #75827a; margin: 4px 0; line-height: 1.42; font-size: 11px; }.activity-item time { color: #a0aaa3; font-size: 10px; }.toolbar-panel { padding-top: 17px; }.toolbar { display: flex; gap: 9px; padding: 0 20px 17px; }.search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 350px; padding: 0 10px; border: 1px solid #dce5dd; border-radius: 7px; color: #809087; }.search input { width: 100%; outline: none; border: 0; padding: 9px 0; font-size: 12px; }.filter-button { border: 1px solid #dce5dd; color: #57675e; border-radius: 7px; background: white; padding: 0 11px; font-size: 11px; }.info-banner { border: 1px solid #d8e9dc; background: #edf8ef; color: #385b45; padding: 13px 16px; display: flex; gap: 9px; border-radius: 9px; margin: -10px 0 20px; font-size: 12px; }.info-banner span { color: #4c9b64; }.info-banner p { margin: 0; }.route-card { padding-bottom: 23px; }.route-line { display: flex; align-items: center; gap: 12px; color: #315442; padding: 20px 23px 29px; font-size: 12px; font-weight: 700; }.route-line i { display: block; height: 2px; flex: 1; background: linear-gradient(90deg,#7ebf92 0 42%,#dbe8dd 42% 100%); position: relative; }.route-line i::after { content: ''; position: absolute; left: 41%; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #367858; }.route-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 23px; border-top: 1px solid #edf1ed; padding-top: 17px; gap: 8px; }.route-stats small { display: block; color: #8c9991; font-size: 10px; }.route-stats strong { display: block; color: #3b4e43; font-size: 11px; margin-top: 5px; }
.shipper-home { max-width: 980px; }.shipper-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 22px; }.shipper-hero h1 { max-width: 620px; color: #18281f; margin: 0; letter-spacing: -1.15px; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; }.shipper-greeting { color: #456154; margin: -2px 0 8px; font-size: 13px; font-weight: 700; }.shipper-identity { display: flex; align-items: center; gap: 9px; color: #506158; font-size: 12px; font-weight: 700; white-space: nowrap; }.shipper-primary-action { width: 100%; border: 0; border-radius: 12px; padding: 16px 18px; background: #1e4e39; color: #fff; box-shadow: 0 9px 18px rgba(30,78,57,.18); font-size: 14px; font-weight: 800; text-align: left; }.shipper-primary-action span { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 9px; border-radius: 50%; background: #d8f36a; color: #173325; font-size: 18px; line-height: 1; }.shipper-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; margin: 18px 0 28px; }.shipper-summary-card { display: flex; align-items: center; gap: 10px; border: 1px solid #e0e7e0; border-radius: 12px; background: #fff; padding: 15px; text-align: left; box-shadow: 0 2px 5px rgba(22,47,35,.025); }.shipper-summary-card > span:nth-child(2) { min-width: 0; flex: 1; }.shipper-summary-card strong, .shipper-summary-card small { display: block; }.shipper-summary-card strong { color: #1d3025; font-size: 22px; line-height: 1; }.shipper-summary-card small { color: #6d7e73; font-size: 11px; margin-top: 5px; }.summary-icon { display: grid; place-items: center; flex: 0 0 auto; width: 33px; height: 33px; border-radius: 10px; font-size: 16px; }.summary-icon-green { color: #397753; background: #e6f6eb; }.summary-icon-orange { color: #bc7429; background: #fff1df; }.shipper-summary-card i { color: #6a8675; font-size: 23px; font-style: normal; }.home-section { margin-top: 2px; }.home-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }.home-section-heading h2, .home-offer-card h2 { color: #213126; margin: 0; font-size: 18px; letter-spacing: -.25px; }.home-section-heading p, .home-offer-card p { color: #78857c; margin: 5px 0 0; font-size: 11px; }.home-load-list { display: grid; gap: 11px; }.home-load-card { border: 1px solid #e0e7e0; border-radius: 12px; background: #fff; padding: 15px; box-shadow: 0 2px 5px rgba(22,47,35,.025); }.home-load-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }.home-load-top .status { margin: 0; }.load-offers { color: #387152; font-size: 11px; font-weight: 750; }.home-load-card h3 { color: #25362c; font-size: 15px; margin: 14px 0 4px; }.home-load-card p { color: #596a60; margin: 0; font-size: 12px; }.home-load-meta { display: flex; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf1ed; color: #85928a; font-size: 10px; }.home-load-meta strong { color: #43564a; font-size: 11px; }.home-offer-card { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 18px; border: 1px solid #dcebdc; border-radius: 12px; background: #f3faf3; }.home-offer-card .eyebrow { margin-bottom: 5px; }.home-offer-card .text-button { margin-top: 10px; }.offer-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #377955; background: #dff1e3; font-size: 20px; }.mobile-bottom-nav { display: none; }
.load-workspace-state { margin: 0; padding: 13px 20px; color: #5c6d62; font-size: 12px; line-height: 1.45; }.load-workspace-state[role="alert"] { color: #9a3d36; background: #fff4f1; }.load-workspace-success { color: #34734c; background: #edf8ef; border-radius: 9px; margin: 0 0 18px; }.load-form-panel { margin-bottom: 18px; }.load-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 0 22px 19px; }.load-form-grid label { display: grid; gap: 6px; color: #53655a; font-size: 11px; font-weight: 700; }.load-form-grid input { min-width: 0; min-height: 39px; border: 1px solid #dce5dd; border-radius: 7px; padding: 8px 10px; color: #25362c; background: #fff; outline: none; }.load-form-grid input:focus { border-color: #397753; box-shadow: 0 0 0 3px rgba(83,173,113,.18); }.load-form-actions { padding: 0 22px 21px; }.load-form-actions button:disabled, .toolbar button:disabled, .workspace-header button:disabled { cursor: not-allowed; opacity: .6; }
.load-detail-panel { margin-bottom: 18px; }.load-detail-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.load-detail-panel dl > div { padding: 16px 22px; border-top: 1px solid #edf1ed; }.load-detail-panel dt { color: #829089; font-size: 10px; font-weight: 750; text-transform: uppercase; }.load-detail-panel dd { margin: 7px 0 0; color: #2f4337; font-size: 12px; line-height: 1.4; }.load-detail-actions { padding: 0 22px 20px; }.load-transition-panel, .load-offers-panel { margin-top: 18px; }.load-transition-panel .load-form-actions { display: flex; flex-wrap: wrap; gap: 9px; }.load-offer { display: grid; gap: 5px; padding: 15px 22px; border-top: 1px solid #edf1ed; color: #53625a; font-size: 12px; }.load-offer strong { color: #25362c; }.load-offer span { color: #397753; font-size: 11px; font-weight: 700; }.load-offer small { color: #819087; font-size: 10px; }.load-offer p { margin: 0; }
@media (max-width: 1000px) { .metric-grid { grid-template-columns: repeat(2,1fr); }.split-grid, .operational-grid { grid-template-columns: 1fr; }.content { padding: 31px 27px; } }
@media (max-width: 720px) { .app-shell { display: block; }.sidebar { display: none; }.main-area { min-height: 100vh; }.topbar { position: sticky; top: 0; z-index: 10; min-height: 58px; padding: 8px 16px; }.mobile-menu { display: inline-grid; place-items: center; padding: 0; }.mobile-menu .brand-mark { width: 28px; height: 28px; }.crumb { display: none; }.content { padding: 24px 16px 95px; }.workspace-header { display: block; }.workspace-header button { margin-top: 18px; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.metric-card { min-height: 119px; padding: 15px; }.metric-card strong { margin: 11px 0 7px; font-size: 26px; }.toolbar { flex-wrap: wrap; }.search { min-width: 100%; max-width: none; }.topbar-actions { gap: 4px; }.help-button, .icon-button { display: none; }.language-select select { max-width: 133px; padding: 7px 22px 7px 8px; font-size: 10px; }.shipper-hero { display: block; margin-bottom: 18px; }.shipper-hero h1 { font-size: 31px; }.shipper-hero .subtitle { max-width: 340px; line-height: 1.45; }.shipper-identity { display: none; }.shipper-summary { margin-bottom: 25px; }.shipper-summary-card { padding: 13px 11px; gap: 8px; }.shipper-summary-card strong { font-size: 20px; }.shipper-summary-card small { line-height: 1.25; }.summary-icon { width: 29px; height: 29px; }.home-offer-card { margin-top: 17px; }.load-form-grid { grid-template-columns: 1fr; padding: 0 16px 17px; }.load-form-actions { padding: 0 16px 18px; }.load-detail-panel dl { grid-template-columns: 1fr; }.load-detail-panel dl > div { padding: 14px 16px; }.load-detail-actions { padding: 0 16px 18px; }.mobile-bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #dce5dd; background: rgba(255,255,255,.96); box-shadow: 0 -6px 18px rgba(23,44,33,.07); }.mobile-nav-item { display: grid; justify-items: center; gap: 3px; border: 0; background: transparent; color: #809087; font-size: 10px; padding: 3px; }.mobile-nav-item span { font-size: 16px; }.mobile-nav-item.is-active { color: #1e6844; font-weight: 800; } }