:root {
  --bg: #05091b;
  --bg2: #070d23;
  --surface: #0a1330;
  --surface2: #0d1838;
  --surface3: #111f45;
  --ink: #f6f7ff;
  --muted: #8c96b8;
  --muted2: #5f6b91;
  --line: #1b2952;
  --blue: #c63cff;
  --blue2: #9825e8;
  --blue3: #2a1552;
  --cyan: #20d7ff;
  --green: #20d6a1;
  --green2: #0b342f;
  --yellow: #f5c451;
  --yellow2: #352a15;
  --red: #ff668a;
  --red2: #3a1426;
  --purple: #c63cff;
  --shadow: 0 18px 46px rgba(0, 0, 0, .22);
  --glow: 0 0 32px rgba(198, 60, 255, .08);
  --radius: 14px;
  --radius-sm: 10px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--bg); }

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 70% -15%, rgba(37, 62, 138, .18), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 70%);
}

.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 28;
  width: 258px;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  background: #060b20;
  border-right: 1px solid #121e43;
  box-shadow: 16px 0 50px rgba(0,0,0,.16);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 0 8px 19px;
  border-bottom: 1px solid #151f40;
}

.sidebar-brand > span:nth-child(2) { min-width: 0; }
.sidebar-brand strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.sidebar-brand small { display: block; margin-top: 3px; color: #69749a; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.sidebar-brand-mark {
  position: relative;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
}

.sidebar-brand-mark::before,
.sidebar-brand-mark::after,
.sidebar-brand-mark i {
  content: "";
  position: absolute;
  width: 18px;
  height: 13px;
  border-radius: 6px;
}

.sidebar-brand-mark::before { left: 0; bottom: 2px; background: linear-gradient(135deg, #e647ff, #9d28f0); }
.sidebar-brand-mark::after { right: 0; top: 2px; background: linear-gradient(135deg, #22dfff, #2a9dff); }
.sidebar-brand-mark i { left: 6px; top: 8px; z-index: 2; width: 12px; height: 12px; background: #6b55ff; }

.sidebar-close { display: none; margin-left: auto; width: 34px; height: 34px; padding: 0; background: transparent; color: var(--muted); font-size: 22px; }

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 14px;
  padding: 11px 12px;
  border: 1px solid #1a2851;
  border-radius: 9px;
  background: #0a1431;
  color: #7883a7;
  font-size: 12px;
  font-weight: 700;
}

.sidebar-search kbd { margin-left: auto; padding: 2px 5px; border: 1px solid #29365e; border-radius: 4px; color: #5f6c94; font: 9px var(--font); }

.sidebar-nav { display: flex; flex: 1; flex-direction: column; gap: 4px; min-height: 0; overflow: auto; }
.sidebar-label { margin: 17px 10px 7px; color: #5f698d; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.sidebar-nav button,
.sidebar-settings {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #9da7c6;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}

.sidebar-nav button::before,
.sidebar-settings::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 3px;
  background: transparent;
}

.sidebar-nav button:hover,
.sidebar-settings:hover { background: #0a1430; color: #fff; filter: none; }
.sidebar-nav button.active { background: #0c1634; color: #e443ff; border-color: rgba(198,60,255,.08); }
.sidebar-nav button.active::before { background: linear-gradient(#ed4cff, #9d2cff); box-shadow: 0 0 12px rgba(214,60,255,.65); }
.nav-icon { width: 18px; color: #6f7b9f; font-size: 13px; text-align: center; }
.sidebar-nav button.active .nav-icon { color: #de42ff; }

.sidebar-bottom { padding-top: 14px; border-top: 1px solid #151f40; }
.sidebar-status { display: flex; gap: 9px; align-items: flex-start; margin: 12px 6px 0; padding: 11px; border-radius: 9px; background: #09132d; }
.sidebar-status > span { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(32,214,161,.7); }
.sidebar-status strong { display: block; font-size: 10px; }
.sidebar-status small { display: block; margin-top: 3px; color: #69749a; font-size: 9px; line-height: 1.35; }

.app-content { min-width: 0; margin-left: 258px; }
.wrap { max-width: 1680px; margin: 0 auto; padding: 30px 30px 64px; }

.hero {
  min-height: 0;
  padding: 0 0 24px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero::before,
.hero::after { display: none; }
.hero-grid { align-items: flex-start; gap: 24px; }
.brand { align-items: center; min-width: 0; }
.brand .logo { display: none; }
.hero h1 { margin: 1px 0 7px; color: #fff; font-size: 28px; font-weight: 850; letter-spacing: -.035em; }
.hero p { max-width: 730px; color: #7883a5; font-size: 12px; font-weight: 650; line-height: 1.55; }
.mobile-nav-toggle { display: none; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; }

.hero-side { min-width: 390px; align-items: flex-end; gap: 9px; }
.hero-side .page-switch { display: none; }
.upload-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.upload-actions button { height: 37px; padding: 7px 11px; border: 1px solid #202e58; border-radius: 8px; background: #0a1430; color: #aeb8d3; font-size: 11px; }
.upload-actions .upload-primary { border-color: transparent; background: linear-gradient(135deg, #cf38ff, #8b2be9); color: #fff; box-shadow: 0 8px 22px rgba(173,43,240,.22); }

.currency-switch { gap: 4px; padding: 4px; border: 1px solid #202e58; border-radius: 9px; background: #08122c; }
.currency-switch button { height: 28px; padding: 5px 9px; border-radius: 6px; color: #7e89ab; font-size: 10px; }
.currency-switch button.active { background: #19244a; color: #e9ecff; box-shadow: inset 0 0 0 1px rgba(198,60,255,.22); }
.hero-note { min-width: 240px; padding: 10px 12px; border: 1px solid #202e58; border-radius: 9px; background: #0a1430; backdrop-filter: none; }
.hero-note .big { color: #fff; font-size: 18px; }
.hero-note .small { color: #6e7a9e; font-size: 9px; }

.panel,
.card,
.kpi {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13,24,56,.98), rgba(9,17,42,.98));
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

.panel,
.card { border-radius: var(--radius); }
.card { padding: 19px; }
.card h3 { font-size: 15px; font-weight: 820; }
.section { margin-top: 18px; }
.section-head { margin-bottom: 11px; }
h2 { font-size: 19px; }
.sub { color: #7783a6; font-size: 11px; }

.filters {
  position: relative;
  top: auto;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
  padding: 14px;
}

.filters > div:first-child { grid-column: span 2; }
.filters > button { align-self: end; }
label { margin-bottom: 5px; color: #6e789a; font-size: 9px; letter-spacing: .08em; }

input,
select {
  height: 38px;
  padding: 9px 10px;
  border: 1px solid #202e58;
  border-radius: 8px;
  background: #071128;
  color: #e9ecfa;
  font-size: 11px;
  font-weight: 700;
}

input::placeholder { color: #505d80; }
input:focus,
select:focus { border-color: #ba38ef; box-shadow: 0 0 0 3px rgba(198,60,255,.10); }

button {
  height: 38px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #15234a;
  color: #dce1f5;
  font-size: 11px;
}

button.primary { background: linear-gradient(135deg, #d63cff, #8728e5); box-shadow: 0 9px 24px rgba(173,43,240,.20); }
button.ghost { border: 1px solid #202e58; background: #09132d; }

.kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.kpi { position: relative; min-height: 116px; padding: 17px; overflow: hidden; border-radius: 12px; }
.kpi::after { content: ""; position: absolute; right: -20px; top: -28px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(198,60,255,.13), transparent 68%); }
.kpi:nth-child(3n+2)::after { background: radial-gradient(circle, rgba(32,215,255,.13), transparent 68%); }
.kpi:nth-child(3n)::after { background: radial-gradient(circle, rgba(32,214,161,.11), transparent 68%); }
.kpi .label { color: #7d87a9; font-size: 9px; }
.kpi .value { margin-top: 10px; color: #fff; font-size: 23px; }
.kpi .hint { color: #647093; font-size: 10px; }
.kpi.money-kpi { border-color: #23305a; box-shadow: var(--shadow); }

.grid-2 { gap: 12px; }
.grid-3 { gap: 10px; }
.grid-4 { gap: 10px; }
.meta-box { border-color: #202e58; border-radius: 10px; background: #09142f; }
.m-label { color: #6f7a9c; font-size: 9px; }
.m-value { font-size: 17px; }

.tabs { gap: 3px; padding: 11px 12px 0; border-color: var(--line); overflow-x: auto; flex-wrap: nowrap; }
.tab { flex: 0 0 auto; padding: 9px 11px; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; background: transparent; color: #7682a4; }
.tab.active { border-color: #d43cff; background: rgba(198,60,255,.08); color: #e64bff; }
.tab-content { padding: 13px; }

.table-wrap { max-height: 680px; border-color: #1c2950; border-radius: 10px; background: #071027; }
table { font-size: 11px; }
th { padding: 10px; background: #0d1938; color: #707c9f; font-size: 9px; }
td { padding: 9px 10px; border-color: rgba(29,43,80,.68); color: #dce1f1; }
tr:hover td { background: rgba(198,60,255,.045); }
.clickable { color: #dd4aff; }

.pill { padding: 5px 8px; border-radius: 6px; font-size: 9px; }
.pill.transit { border-color: rgba(32,215,255,.24); background: rgba(18,94,124,.24); color: #5be5ff; }
.pill.arrived,
.pill.ok { color: #67e8bf; }
.pill.problem { color: #ff87a0; }
.pill.review { color: #f6cf75; }

.row-card { border-color: #1e2b52; border-radius: 10px; background: #09142f; }
.bar { height: 8px; border-color: #1e2b52; background: #071027; }
.bar > div,
.meter > span { background: linear-gradient(90deg, #c83cff, #20d7ff); }
.month-card { border-color: #1e2b52; border-radius: 11px; background: #09142f; }
.event-tag { border: 1px solid #25335a; background: #101d3f; color: #8e99b9; }

.analytics-grid { gap: 12px; }
.analytics-stats { gap: 8px; }
.eta-calendar { gap: 12px; }
.eta-calendar-month { border-color: #1e2b52; border-radius: 11px; background: #09142f; }
.eta-day.has-eta { border-color: rgba(198,60,255,.28); background: rgba(115,34,165,.18); }
.eta-day.has-eta:hover { border-color: #dc46ff; background: rgba(145,42,193,.24); }
.eta-dot { background: #e047ff; box-shadow: 0 0 8px rgba(224,71,255,.8); }
.eta-tooltip { border-color: rgba(198,60,255,.46); background: #071027; }
.eta-tooltip::after { border-top-color: #071027; }

.detail-panel { padding: 24px; border-color: #223059; background: #071027; }
.detail-panel .close { border: 1px solid #243158; background: #101b3b; }
.dim { background: rgba(1,4,15,.72); backdrop-filter: blur(3px); }

.operations-toolbar { grid-template-columns: 1.4fr repeat(4, minmax(120px, .75fr)); }
.ops-kpi,
.ops-container-card,
.ops-supplier-card,
.ops-action,
.ops-document-row,
.ops-economics-row,
.upload-step,
.draft-card { border-color: #1e2b52 !important; background: #09142f !important; box-shadow: none !important; }
.ops-progress { background: #071027 !important; }
.ops-progress span { background: linear-gradient(90deg, #c83cff, #20d7ff) !important; }

.upload-backdrop { background: rgba(1,4,15,.76) !important; backdrop-filter: blur(4px); }
.upload-modal { border-color: #223059 !important; border-radius: 14px !important; background: #071027 !important; box-shadow: 0 28px 90px rgba(0,0,0,.5) !important; }
.upload-head,
.upload-footer { border-color: #1b2952 !important; background: #09142f !important; }
.upload-step-title { color: #fff !important; }
.upload-badge { background: #cf3bff !important; color: #fff !important; }
.upload-drop { border-color: #293761 !important; background: #08132e !important; }
.upload-drop:hover { border-color: #d143ff !important; }

.footer { color: #596586; }
.money-secondary { color: #7b86a8; }
.rate-warning { color: #f4c96d; }
.rate-ok { color: #58ddb4; }
.currency-note { border-color: #223059; background: #09142f; color: #8994b5; }

@media (min-width: 1500px) {
  .wrap { padding-left: 36px; padding-right: 36px; }
  .filters { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 1220px) {
  .app-sidebar { width: 226px; }
  .app-content { margin-left: 226px; }
  .wrap { padding: 24px 22px 52px; }
  .hero-grid { flex-direction: column; }
  .hero-side { width: 100%; min-width: 0; align-items: flex-start; }
  .upload-actions { justify-content: flex-start; }
  .hero-note { text-align: left; }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .operations-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .app-sidebar { width: 268px; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 30px 0 80px rgba(0,0,0,.55); }
  body.nav-open .app-sidebar { transform: translateX(0); }
  body.nav-open::before { content: ""; position: fixed; inset: 0; z-index: 27; background: rgba(1,4,15,.68); backdrop-filter: blur(2px); }
  .sidebar-close { display: block; }
  .app-content { margin-left: 0; }
  .mobile-nav-toggle { display: block; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters > div:first-child { grid-column: 1 / -1; }
  .analytics-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .analytics-split,
  .eta-calendar { grid-template-columns: 1fr; }
  .operations-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .wrap { padding: 18px 13px 42px; }
  .hero h1 { font-size: 23px; }
  .hero p { font-size: 11px; }
  .filters,
  .kpi-grid,
  .operations-toolbar { grid-template-columns: 1fr; }
  .filters > div:first-child { grid-column: auto; }
  .upload-actions button:not(.upload-primary) { display: none; }
  .hero-note { min-width: 0; width: 100%; }
  .bar-row { grid-template-columns: 1fr; }
  .tab-content { padding: 9px; }
  .card { padding: 14px; }
  .kpi { min-height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}