:root {
  --cos-brand: #2563eb;
  --cos-brand-dark: #1d4ed8;
  --cos-brand-soft: #eff6ff;
  --cos-ink: #0f172a;
  --cos-text: #24324a;
  --cos-muted: #64748b;
  --cos-muted-2: #94a3b8;
  --cos-bg: #f3f6fb;
  --cos-card: #ffffff;
  --cos-line: #e4eaf2;
  --cos-line-strong: #cfd8e6;
  --cos-sidebar: #0b1220;
  --cos-sidebar-soft: #121c2e;
  --cos-green: #087a4b;
  --cos-green-bg: #e9f8f1;
  --cos-orange: #b45309;
  --cos-orange-bg: #fff4e5;
  --cos-red: #b42318;
  --cos-red-bg: #feeeee;
  --cos-purple: #6d4aff;
  --cos-shadow-sm: 0 4px 16px rgba(15, 23, 42, .055);
  --cos-shadow: 0 18px 45px rgba(15, 23, 42, .085);
  --cos-shadow-lg: 0 28px 70px rgba(15, 23, 42, .15);
  --cos-radius-sm: 11px;
  --cos-radius: 17px;
  --cos-radius-lg: 24px;
  --cos-sidebar-width: 278px;
  --cos-ease: cubic-bezier(.2, .75, .25, 1);
}

.cos-shell,
.cos-shell * { box-sizing: border-box; }
.cos-shell { color: var(--cos-text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; }
.cos-shell button,
.cos-shell input,
.cos-shell select,
.cos-shell textarea { font: inherit; }
.cos-shell h1,
.cos-shell h2,
.cos-shell h3,
.cos-shell h4,
.cos-shell p { margin-top: 0; }
.cos-shell h1,
.cos-shell h2,
.cos-shell h3 { color: var(--cos-ink); letter-spacing: -.035em; }
.cos-shell a { text-underline-offset: 3px; }
.cos-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.cos-eyebrow { display: block; margin: 0 0 6px; color: var(--cos-brand); font-size: 10px; font-weight: 850; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }

/* App shell */
.cos-app {
  width: min(1600px, calc(100vw - 28px));
  max-width: 1600px;
  min-height: min(900px, calc(100vh - 44px));
  margin: 22px auto;
  display: grid;
  grid-template-columns: var(--cos-sidebar-width) minmax(0, 1fr);
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 26px;
  background: var(--cos-bg);
  box-shadow: var(--cos-shadow-lg);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.cos-sidebar {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 21px 16px 17px;
  background:
    radial-gradient(circle at 15% 0%, rgba(37, 99, 235, .27), transparent 31%),
    linear-gradient(180deg, var(--cos-sidebar) 0%, #0a101c 100%);
  color: #d8e2f1;
  position: relative;
  z-index: 30;
  transition: width .28s var(--cos-ease), transform .28s var(--cos-ease), padding .28s var(--cos-ease);
}
.cos-sidebar:after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); pointer-events: none; }
.cos-sidebar-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 1px 22px; }
.cos-brand { min-width: 0; display: flex; align-items: center; gap: 11px; color: #fff !important; text-decoration: none !important; }
.cos-brand-symbol { width: 43px; height: 43px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: linear-gradient(145deg, #2f71ff, #1954d8); box-shadow: 0 10px 24px rgba(37, 99, 235, .26), inset 0 1px 0 rgba(255,255,255,.25); }
.cos-brand-symbol .cos-icon { width: 25px; height: 25px; }
.cos-brand-copy { min-width: 0; display: flex; flex-direction: column; }
.cos-brand-copy strong { max-width: 180px; color: #fff; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-brand-copy small { margin-top: 3px; color: #8292aa; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.cos-sidebar-close { display: none !important; color: #fff !important; }
.cos-nav { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.cos-nav-heading { margin: 17px 11px 5px; color: #607089; font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.cos-nav-heading:first-child { margin-top: 2px; }
.cos-nav-link { min-height: 45px; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; color: #aebbd0 !important; font-size: 12px; font-weight: 720; text-decoration: none !important; white-space: nowrap; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.cos-nav-link:hover { color: #fff !important; background: rgba(255,255,255,.065); transform: translateX(2px); }
.cos-nav-link.is-active { color: #fff !important; border-color: rgba(96, 165, 250, .22); background: linear-gradient(90deg, rgba(37,99,235,.32), rgba(37,99,235,.12)); box-shadow: inset 3px 0 0 #60a5fa; }
.cos-nav-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.045); color: #8ea0ba; transition: .2s ease; }
.cos-nav-link:hover .cos-nav-icon,
.cos-nav-link.is-active .cos-nav-icon { color: #fff; background: rgba(96,165,250,.15); }
.cos-nav-icon .cos-icon { width: 18px; height: 18px; }
.cos-nav-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.cos-nav-arrow { display: inline-flex; color: #52627b; opacity: 0; transform: translateX(-4px); transition: .2s ease; }
.cos-nav-arrow .cos-icon { width: 13px; height: 13px; }
.cos-nav-link:hover .cos-nav-arrow,
.cos-nav-link.is-active .cos-nav-arrow { opacity: 1; transform: translateX(0); }
.cos-sidebar-footer { margin-top: 18px; padding: 13px 9px 0; border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.cos-sidebar-user { min-width: 0; display: flex; align-items: center; gap: 9px; }
.cos-sidebar-user-copy { min-width: 0; display: flex; flex-direction: column; }
.cos-sidebar-user-copy strong { color: #eef4ff; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-sidebar-user-copy small { margin-top: 2px; color: #75859d; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: linear-gradient(145deg, #dbeafe, #bfdbfe); color: #1e40af; font-size: 11px; font-weight: 900; letter-spacing: .02em; }
.cos-logout { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #8191aa !important; text-decoration: none !important; transition: .2s ease; }
.cos-logout:hover { color: #fff !important; background: rgba(239, 68, 68, .16); }
.cos-logout span { display: none; }
.cos-logout .cos-icon { width: 17px; height: 17px; }
.cos-sidebar-backdrop { display: none; }

.cos-workspace { min-width: 0; display: flex; flex-direction: column; background: var(--cos-bg); }
.cos-topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 25px; border-bottom: 1px solid var(--cos-line); background: rgba(255,255,255,.87); backdrop-filter: blur(15px); position: relative; z-index: 15; }
.cos-topbar-left,
.cos-topbar-right { min-width: 0; display: flex; align-items: center; gap: 12px; }
.cos-topbar-left > div:last-child { min-width: 0; }
.cos-topbar-kicker { display: block; margin-bottom: 2px; color: var(--cos-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cos-topbar h1 { margin: 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.2; }
.cos-icon-btn { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--cos-line); border-radius: 11px; background: #fff; color: var(--cos-text); cursor: pointer; box-shadow: var(--cos-shadow-sm); transition: .2s ease; }
.cos-icon-btn:hover { color: var(--cos-brand); border-color: #b9cffd; transform: translateY(-1px); }
.cos-icon-btn .cos-icon { width: 18px; height: 18px; }
.cos-mobile-menu { display: none; }
.cos-live-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; border: 1px solid #bce7d2; border-radius: 999px; background: #f1fbf6; color: var(--cos-green); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.cos-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 5px rgba(16,185,129,.12); animation: cosPulse 2s infinite; }
.cos-clock { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; color: var(--cos-muted); font-size: 11px; font-weight: 700; }
.cos-clock .cos-icon { width: 16px; height: 16px; }
.cos-topbar-user { display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid var(--cos-line); }
.cos-topbar-user > span:last-child { display: flex; flex-direction: column; }
.cos-topbar-user strong { max-width: 135px; color: var(--cos-ink); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-topbar-user small { margin-top: 2px; color: var(--cos-muted); font-size: 9px; }
.cos-content { min-width: 0; padding: 22px; }
.cos-main { min-height: 450px; }

/* Collapsed desktop sidebar */
.cos-app.is-sidebar-collapsed { grid-template-columns: 84px minmax(0,1fr); }
.cos-app.is-sidebar-collapsed .cos-sidebar { padding-left: 13px; padding-right: 13px; }
.cos-app.is-sidebar-collapsed .cos-brand-copy,
.cos-app.is-sidebar-collapsed .cos-nav-heading,
.cos-app.is-sidebar-collapsed .cos-nav-label,
.cos-app.is-sidebar-collapsed .cos-nav-arrow,
.cos-app.is-sidebar-collapsed .cos-sidebar-user-copy { display: none; }
.cos-app.is-sidebar-collapsed .cos-sidebar-head { justify-content: center; }
.cos-app.is-sidebar-collapsed .cos-nav-link { justify-content: center; padding: 7px; }
.cos-app.is-sidebar-collapsed .cos-nav-icon { width: 39px; height: 39px; }
.cos-app.is-sidebar-collapsed .cos-sidebar-footer { grid-template-columns: 1fr; justify-items: center; padding-left: 0; padding-right: 0; }
.cos-app.is-sidebar-collapsed .cos-sidebar-user { justify-content: center; }

/* Welcome and dashboard */
.cos-welcome { min-height: 225px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: stretch; margin-bottom: 18px; border-radius: var(--cos-radius-lg); background:
  radial-gradient(circle at 87% 10%, rgba(96,165,250,.23), transparent 24%),
  radial-gradient(circle at 66% 110%, rgba(124,58,237,.2), transparent 31%),
  linear-gradient(126deg, #0f172a 0%, #172554 58%, #1e3a8a 100%);
  color: #dce8ff; overflow: hidden; position: relative; box-shadow: 0 18px 48px rgba(30,58,138,.22); }
.cos-welcome:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.cos-welcome-copy { align-self: center; padding: 33px 35px; position: relative; z-index: 2; }
.cos-welcome .cos-eyebrow { color: #93c5fd; }
.cos-welcome h2 { max-width: 680px; margin-bottom: 10px; color: #fff; font-size: clamp(25px, 3vw, 38px); line-height: 1.08; }
.cos-welcome p { max-width: 670px; margin-bottom: 21px; color: #b9c8df; font-size: 13px; line-height: 1.65; }
.cos-quick-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.cos-welcome-visual { min-height: 225px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.cos-welcome-icon { width: 94px; height: 94px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); color: #fff; box-shadow: 0 22px 55px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(10px); position: relative; z-index: 3; transform: rotate(-5deg); }
.cos-welcome-icon .cos-icon { width: 54px; height: 54px; }
.cos-orbit { position: absolute; border: 1px solid rgba(147,197,253,.22); border-radius: 50%; }
.cos-orbit-one { width: 210px; height: 210px; animation: cosSpin 18s linear infinite; }
.cos-orbit-two { width: 150px; height: 150px; border-style: dashed; animation: cosSpin 13s linear infinite reverse; }
.cos-welcome-stat { min-width: 112px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(15,23,42,.56); backdrop-filter: blur(8px); position: absolute; right: 24px; bottom: 21px; z-index: 4; }
.cos-welcome-stat span,
.cos-welcome-stat strong { display: block; }
.cos-welcome-stat span { color: #9fb2ce; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.cos-welcome-stat strong { margin-top: 3px; color: #fff; font-size: 22px; line-height: 1; }
.cos-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cos-metric { min-width: 0; min-height: 168px; padding: 18px; border: 1px solid var(--cos-line); border-radius: var(--cos-radius); background: linear-gradient(160deg, #fff 0%, #fbfcff 100%); box-shadow: var(--cos-shadow-sm); position: relative; overflow: hidden; transition: transform .22s var(--cos-ease), box-shadow .22s ease, border-color .22s ease; }
.cos-metric:after { content: ""; position: absolute; width: 95px; height: 95px; right: -34px; bottom: -39px; border-radius: 50%; background: var(--cos-brand-soft); opacity: .85; }
.cos-metric:hover { transform: translateY(-3px); border-color: #c9d8f1; box-shadow: var(--cos-shadow); }
.cos-metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cos-metric-icon { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--cos-brand-soft); color: var(--cos-brand); }
.cos-metric-icon .cos-icon { width: 20px; height: 20px; }
.cos-metric-trend { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f8fafc; color: #a5b4c8; }
.cos-metric-trend .cos-icon { width: 13px; height: 13px; transform: rotate(-35deg); }
.cos-metric > strong { display: block; margin-bottom: 3px; color: var(--cos-ink); font-size: clamp(23px, 2.1vw, 31px); line-height: 1.05; letter-spacing: -.045em; position: relative; z-index: 1; }
.cos-metric-label { display: block; color: #334155; font-size: 11px; font-weight: 850; position: relative; z-index: 1; }
.cos-metric small { display: block; margin-top: 5px; color: var(--cos-muted-2); font-size: 9px; font-weight: 600; position: relative; z-index: 1; }
.cos-metric-fyco .cos-metric-icon { background: var(--cos-red-bg); color: var(--cos-red); }
.cos-metric-finished .cos-metric-icon,
.cos-metric-customs_cleared .cos-metric-icon { background: var(--cos-green-bg); color: var(--cos-green); }
.cos-metric-waiting_scanning .cos-metric-icon { background: var(--cos-orange-bg); color: var(--cos-orange); }
.cos-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 18px; align-items: start; }
.cos-recent-panel,
.cos-status-panel { margin-bottom: 0 !important; }
.cos-status-list { display: flex; flex-direction: column; gap: 18px; }
.cos-status-row > div { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.cos-status-row-icon { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--cos-brand-soft); color: var(--cos-brand); }
.cos-status-row-icon .cos-icon { width: 17px; height: 17px; }
.cos-status-row strong,
.cos-status-row small { display: block; }
.cos-status-row strong { color: var(--cos-ink); font-size: 11px; }
.cos-status-row small { margin-top: 2px; color: var(--cos-muted); font-size: 9px; }
.cos-status-row b { color: var(--cos-muted); font-size: 10px; }
.cos-progress { height: 6px; display: block; margin-top: 8px; border-radius: 999px; background: #edf1f6; overflow: hidden; }
.cos-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #60a5fa); transition: width .6s var(--cos-ease); }
.cos-system-note { display: flex; gap: 10px; margin-top: 22px; padding: 13px; border: 1px solid #cfe0fd; border-radius: 13px; background: #f5f9ff; color: var(--cos-brand); }
.cos-system-note .cos-icon { width: 19px; height: 19px; margin-top: 1px; }
.cos-system-note strong,
.cos-system-note span { display: block; }
.cos-system-note strong { color: #1e3a8a; font-size: 10px; }
.cos-system-note span { margin-top: 3px; color: #64748b; font-size: 9px; line-height: 1.45; }

/* General content */
.cos-section { margin-bottom: 18px; padding: 21px; border: 1px solid var(--cos-line); border-radius: var(--cos-radius); background: var(--cos-card); box-shadow: var(--cos-shadow-sm); }
.cos-section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.cos-section-title h2,
.cos-section-title h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.cos-live-dot { display: inline-flex; align-items: center; gap: 7px; min-height: 29px; padding: 0 10px; border-radius: 999px; background: var(--cos-green-bg); color: var(--cos-green); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.cos-live-dot:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(8,122,75,.12); }
.cos-text-link,
.cos-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cos-brand) !important; font-size: 10px; font-weight: 800; text-decoration: none !important; }
.cos-text-link:hover,
.cos-link:hover { color: var(--cos-brand-dark) !important; }
.cos-text-link .cos-icon { width: 14px; height: 14px; transition: transform .2s ease; }
.cos-text-link:hover .cos-icon { transform: translateX(3px); }
.cos-alert { display: flex; align-items: center; min-height: 46px; margin: 0 0 17px; padding: 11px 14px; border-radius: 12px; font-size: 11px; font-weight: 720; box-shadow: var(--cos-shadow-sm); }
.cos-success { border: 1px solid #b7e7ce; background: var(--cos-green-bg); color: var(--cos-green); }
.cos-error { border: 1px solid #f0b9b5; background: var(--cos-red-bg); color: var(--cos-red); }
.cos-info { margin: 5px 0 17px; padding: 13px 15px; border: 1px solid #cfddf7; border-left: 4px solid var(--cos-brand); border-radius: 10px; background: #f6f9ff; color: #475569; font-size: 11px; line-height: 1.65; }
.cos-empty { padding: 38px 18px; border: 1.5px dashed #ccd6e4; border-radius: 14px; background: #fbfcfe; color: var(--cos-muted); font-size: 11px; text-align: center; }

/* Buttons */
.cos-btn { min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--cos-line-strong); border-radius: 10px; background: #fff; color: #26354d !important; font-size: 10px; font-weight: 820; line-height: 1.2; text-decoration: none !important; cursor: pointer; box-shadow: 0 3px 9px rgba(15,23,42,.035); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.cos-btn:hover { border-color: #aebcd0; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(15,23,42,.09); }
.cos-btn:active { transform: translateY(0) scale(.985); }
.cos-btn .cos-icon { width: 16px; height: 16px; }
.cos-btn-primary { border-color: var(--cos-brand); background: linear-gradient(145deg, #3173ff, #1f5be0); color: #fff !important; box-shadow: 0 8px 18px rgba(37,99,235,.19); }
.cos-btn-primary:hover { border-color: var(--cos-brand-dark); background: linear-gradient(145deg, #2563eb, #1d4ed8); }
.cos-btn-light { background: #f8fafc; }
.cos-btn-dark { border-color: rgba(255,255,255,.1); background: #fff; color: #14213a !important; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.cos-btn-glass { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff !important; box-shadow: none; backdrop-filter: blur(8px); }
.cos-btn-glass:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.13); }

/* Forms */
.cos-form { display: flex; flex-direction: column; gap: 15px; }
.cos-grid { display: grid; gap: 14px; }
.cos-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cos-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cos-form label,
.cos-filter label { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cos-form label > span,
.cos-filter label > span,
.cos-readonly > span { color: #475569; font-size: 10px; font-weight: 800; }
.cos-form input,
.cos-form select,
.cos-form textarea,
.cos-filter input,
.cos-filter select,
.cos-search input,
.cos-track-form input,
.cos-login-card input[type=text],
.cos-login-card input[type=password] { width: 100%; min-height: 43px; padding: 9px 12px; border: 1px solid var(--cos-line-strong) !important; border-radius: 10px !important; background: #fff !important; color: var(--cos-ink) !important; font-size: 11px !important; line-height: 1.35 !important; outline: none; box-shadow: 0 1px 2px rgba(15,23,42,.025) !important; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.cos-form textarea { min-height: 102px; resize: vertical; }
.cos-form input:hover,
.cos-form select:hover,
.cos-form textarea:hover { border-color: #aebcd0 !important; }
.cos-form input:focus,
.cos-form select:focus,
.cos-form textarea:focus,
.cos-filter input:focus,
.cos-filter select:focus,
.cos-search input:focus,
.cos-track-form input:focus,
.cos-login-card input:focus { border-color: var(--cos-brand) !important; box-shadow: 0 0 0 4px rgba(37,99,235,.1) !important; }
.cos-form input::placeholder,
.cos-search input::placeholder,
.cos-track-form input::placeholder { color: #9aa8ba; }
.cos-readonly { min-height: 65px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px 12px; border: 1px dashed #c9d4e3; border-radius: 10px; background: #f8fafc; }
.cos-readonly strong { color: var(--cos-ink); font-size: 11px; overflow-wrap: anywhere; }
.cos-inline-form { display: grid; grid-template-columns: repeat(4, minmax(125px,1fr)) auto; align-items: end; }
.cos-inline-form .cos-btn { margin-bottom: 1px; }
.cos-compact-form { margin-top: 12px; }
.cos-search,
.cos-track-form,
.cos-filter { display: flex; align-items: end; gap: 10px; margin-bottom: 17px; }
.cos-search input,
.cos-track-form input { flex: 1; }
.cos-filter label { min-width: 145px; }
.cos-upload { min-height: 145px; align-items: center; justify-content: center; padding: 25px !important; border: 1.5px dashed #b9c6d8; border-radius: 15px; background: linear-gradient(180deg,#fbfdff,#f6f9fc); text-align: center; cursor: pointer; transition: .2s ease; }
.cos-upload:hover { border-color: var(--cos-brand); background: var(--cos-brand-soft); }
.cos-upload input { min-height: 32px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }

/* Tasks and statuses */
.cos-task { margin-top: 14px; padding: 19px; border: 1px solid var(--cos-line); border-radius: 15px; background: linear-gradient(160deg,#fff,#fbfcff); box-shadow: 0 5px 16px rgba(15,23,42,.035); transition: .2s ease; }
.cos-task:hover { border-color: #cbd6e5; box-shadow: var(--cos-shadow-sm); }
.cos-task:first-of-type { margin-top: 0; }
.cos-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cos-task-head h3,
.cos-task-head h4 { margin: 0; font-size: 16px; }
.cos-status-stack { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.cos-facts { display: flex; flex-wrap: wrap; gap: 11px 25px; margin-bottom: 15px; color: #526076; font-size: 10px; }
.cos-status { display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 4px 9px; border-radius: 999px; font-size: 8px; font-weight: 880; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.cos-status:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cos-completed { background: var(--cos-green-bg); color: var(--cos-green); }
.cos-pending { background: var(--cos-orange-bg); color: var(--cos-orange); }
.cos-fyco { background: var(--cos-red-bg); color: var(--cos-red); }
.cos-pallet-summary { display: inline-flex; margin: 3px 0 9px; padding: 6px 9px; border-radius: 8px; background: var(--cos-brand-soft); color: var(--cos-brand); font-size: 9px; font-weight: 850; }
.cos-pallet-progress { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 15px; }
.cos-pallet-progress span { padding: 6px 9px; border-radius: 8px; background: var(--cos-orange-bg); color: var(--cos-orange); font-size: 9px; font-weight: 800; }
.cos-pallet-progress span.done { background: var(--cos-green-bg); color: var(--cos-green); }
.cos-pallet-move { margin-top: 12px; padding-top: 13px; border-top: 1px dashed var(--cos-line); }
.cos-label-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.cos-label-actions form { margin: 0; }

/* Tables */
.cos-table-wrap { width: 100%; overflow: auto; border: 1px solid var(--cos-line); border-radius: 13px; background: #fff; scrollbar-width: thin; scrollbar-color: #c7d2e2 transparent; }
.cos-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 10px; }
.cos-table th { padding: 11px 12px; background: #f7f9fc; color: #64748b; font-size: 8px; font-weight: 850; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cos-table td { padding: 12px; border-top: 1px solid var(--cos-line); color: #425069; vertical-align: middle; }
.cos-table td strong,
.cos-table td small { display: block; }
.cos-table td strong { color: var(--cos-ink); font-size: 10px; }
.cos-table td small { margin-top: 3px; color: var(--cos-muted-2); font-size: 8px; }
.cos-table tbody tr { transition: background .16s ease; }
.cos-table tbody tr:hover td { background: #f9fbff; }

/* Details, timeline, docs */
.cos-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 20px; }
.cos-detail-grid > div { min-width: 0; padding: 13px; border: 1px solid var(--cos-line); border-radius: 11px; background: #fafcff; }
.cos-detail-grid span,
.cos-detail-grid strong { display: block; }
.cos-detail-grid span { margin-bottom: 5px; color: var(--cos-muted); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.cos-detail-grid strong { color: var(--cos-ink); font-size: 10px; overflow-wrap: anywhere; }
.cos-shipment-barcode { max-width: 520px; margin: 17px 0; padding: 13px; border: 1px solid var(--cos-line); border-radius: 12px; background: #fff; text-align: center; }
.cos-shipment-barcode > span { display: block; margin-bottom: 8px; color: var(--cos-muted); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.cos-timeline { display: grid; grid-template-columns: repeat(7,minmax(100px,1fr)); gap: 8px; margin: 19px 0 25px; }
.cos-step { min-height: 76px; display: flex; gap: 9px; padding: 11px; border: 1px solid var(--cos-line); border-radius: 11px; background: #fff; position: relative; }
.cos-step i { width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf1f6; color: #536176; font-size: 9px; font-style: normal; font-weight: 850; }
.cos-step strong,
.cos-step span { display: block; }
.cos-step strong { color: var(--cos-ink); font-size: 9px; line-height: 1.35; }
.cos-step span { margin-top: 5px; color: var(--cos-muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.cos-step.cos-completed { border-color: #b9e2cd; background: var(--cos-green-bg); }
.cos-step.cos-completed i { background: var(--cos-green); color: #fff; }
.cos-step.cos-pending { border-color: #efd8b8; background: var(--cos-orange-bg); }
.cos-step.cos-pending i { background: var(--cos-orange); color: #fff; }
.cos-step.cos-fyco { border-color: #efbdb8; background: var(--cos-red-bg); }
.cos-step.cos-fyco i { background: var(--cos-red); color: #fff; }
.cos-pallet-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 12px 0 20px; }
.cos-pallet-cards article { display: flex; flex-direction: column; gap: 5px; padding: 13px; border: 1px solid var(--cos-line); border-radius: 11px; background: #fafcff; }
.cos-pallet-cards article strong { color: var(--cos-ink); font-size: 11px; }
.cos-pallet-cards article span { color: var(--cos-muted); font-size: 9px; }
.cos-docs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.cos-docs a { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--cos-line); border-radius: 10px; color: var(--cos-text) !important; text-decoration: none !important; transition: .2s ease; }
.cos-docs a:hover { border-color: #b7caf0; background: var(--cos-brand-soft); }
.cos-docs a strong { font-size: 10px; }
.cos-docs a span { color: var(--cos-muted); font-size: 8px; }
.cos-report { margin-top: 22px; }
.cos-report h4 { margin-bottom: 9px; font-size: 13px; }

/* Login */
.cos-login-shell { width: min(1080px, calc(100vw - 28px)); min-height: 620px; display: grid; grid-template-columns: 1.12fr .88fr; margin: 35px auto; border: 1px solid var(--cos-line); border-radius: 28px; background: #fff; box-shadow: var(--cos-shadow-lg); overflow: hidden; }
.cos-login-visual { min-height: 620px; display: flex; flex-direction: column; justify-content: space-between; padding: 35px; background:
  radial-gradient(circle at 85% 5%, rgba(96,165,250,.28), transparent 28%),
  radial-gradient(circle at 5% 95%, rgba(124,58,237,.25), transparent 32%),
  linear-gradient(140deg,#0b1220,#172554 62%,#1d4ed8); color: #d8e5fb; position: relative; overflow: hidden; }
.cos-login-visual:after { content: ""; position: absolute; width: 330px; height: 330px; right: -150px; bottom: -150px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.018); }
.cos-login-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 12px; font-weight: 850; position: relative; z-index: 1; }
.cos-login-brand .cos-icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: #2563eb; }
.cos-login-visual > div:nth-child(2) { max-width: 530px; position: relative; z-index: 1; }
.cos-login-visual .cos-eyebrow { color: #93c5fd; }
.cos-login-visual h2 { margin-bottom: 15px; color: #fff; font-size: clamp(30px,4vw,48px); line-height: 1.04; }
.cos-login-visual p { color: #b9c8df; font-size: 13px; line-height: 1.75; }
.cos-login-features { display: flex; flex-wrap: wrap; gap: 9px; position: relative; z-index: 1; }
.cos-login-features span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.07); color: #d7e3f7; font-size: 9px; font-weight: 700; }
.cos-login-features .cos-icon { width: 15px; height: 15px; color: #93c5fd; }
.cos-login-card { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.cos-login-card h2 { margin-bottom: 8px; font-size: 26px; }
.cos-login-card > p { margin-bottom: 25px; color: var(--cos-muted); font-size: 11px; }
.cos-login-card form p { margin-bottom: 14px; }
.cos-login-card label { display: block; margin-bottom: 6px; color: #475569; font-size: 10px; font-weight: 800; }
.cos-login-card .login-remember label { display: inline-flex; align-items: center; gap: 7px; }
.cos-login-card input[type=checkbox] { width: 15px; height: 15px; }
.cos-login-card input[type=submit] { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: linear-gradient(145deg,#3173ff,#1f5be0); color: #fff; font-size: 10px; font-weight: 850; cursor: pointer; box-shadow: 0 9px 20px rgba(37,99,235,.2); transition: .2s ease; }
.cos-login-card input[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 12px 25px rgba(37,99,235,.27); }

/* Tracking */
.cos-tracking { width: min(1060px, calc(100vw - 28px)); margin: 30px auto; }
.cos-tracking .cos-section { padding: clamp(22px,4vw,42px); border-radius: 23px; box-shadow: var(--cos-shadow); }
.cos-track-form { padding: 8px; border: 1px solid var(--cos-line); border-radius: 14px; background: #f8fafc; }
.cos-track-form input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.cos-track-card { margin-top: 19px; padding: 19px; border: 1px solid var(--cos-line); border-radius: 15px; background: linear-gradient(160deg,#fff,#fbfcff); }
.cos-track-loading { padding: 25px; color: var(--cos-muted); text-align: center; font-size: 11px; }

/* WordPress admin plugin screens */
.cos-admin { max-width: none; margin: 18px 20px 0 0; }
.cos-admin .cos-portal-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 21px 23px; border: 1px solid var(--cos-line); border-radius: var(--cos-radius); background: linear-gradient(135deg,#fff,#f7faff); box-shadow: var(--cos-shadow-sm); }
.cos-admin .cos-portal-header h1 { margin: 0; padding: 0; font-size: 25px; }
.cos-admin .cos-metrics { margin-top: 0; }
.cos-admin-columns { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); gap: 18px; margin-top: 18px; }

/* Loading and smooth state */
.cos-btn.is-loading,
.cos-form.is-submitting .cos-btn[type=submit] { pointer-events: none; opacity: .72; }
.cos-form.is-submitting .cos-btn[type=submit]:after { content: ""; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; border-radius: 50%; animation: cosSpin .75s linear infinite; }
.cos-form.is-submitting .cos-btn:not(.cos-btn-primary)[type=submit]:after { border-color: rgba(37,99,235,.2); border-top-color: var(--cos-brand); }

@keyframes cosPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes cosSpin { to { transform: rotate(360deg); } }

@media (max-width: 1240px) {
  .cos-app { grid-template-columns: 250px minmax(0,1fr); }
  .cos-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cos-dashboard-layout { grid-template-columns: 1fr; }
  .cos-timeline { grid-template-columns: repeat(4,minmax(100px,1fr)); }
  .cos-detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cos-inline-form { grid-template-columns: repeat(2,minmax(145px,1fr)); }
  .cos-inline-form .cos-btn { align-self: end; }
  .cos-admin-columns { grid-template-columns: 1fr; }
  .cos-clock { display: none; }
}

@media (max-width: 980px) {
  .cos-app { width: min(100%, calc(100vw - 18px)); min-height: calc(100vh - 18px); margin: 9px auto; display: block; border-radius: 19px; }
  .cos-sidebar { width: min(310px, calc(100vw - 42px)); height: 100%; min-height: 100%; position: fixed; top: 0; left: 0; transform: translateX(-104%); box-shadow: 24px 0 55px rgba(0,0,0,.28); z-index: 100010; }
  .cos-app.is-sidebar-open .cos-sidebar { transform: translateX(0); }
  .cos-sidebar-close { display: inline-flex !important; border-color: rgba(255,255,255,.1) !important; background: rgba(255,255,255,.07) !important; box-shadow: none !important; }
  .cos-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(2,6,23,.58); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; z-index: 100000; transition: .25s ease; }
  .cos-app.is-sidebar-open .cos-sidebar-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  body.cos-sidebar-lock { overflow: hidden; }
  .cos-desktop-collapse { display: none; }
  .cos-mobile-menu { display: inline-flex; }
  .cos-topbar { min-height: 73px; padding: 13px 17px; }
  .cos-content { padding: 16px; }
  .cos-topbar-user > span:last-child { display: none; }
  .cos-topbar-user { padding-left: 8px; }
  .cos-welcome { grid-template-columns: 1fr .58fr; }
  .cos-welcome-copy { padding: 27px; }
  .cos-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cos-login-shell { grid-template-columns: 1fr; }
  .cos-login-visual { min-height: 390px; }
}

@media (max-width: 720px) {
  .cos-topbar-right .cos-live-pill { display: none; }
  .cos-topbar { gap: 10px; }
  .cos-topbar h1 { font-size: 18px; }
  .cos-content { padding: 12px; }
  .cos-welcome { min-height: 0; grid-template-columns: 1fr; }
  .cos-welcome-copy { padding: 24px 21px; }
  .cos-welcome-visual { min-height: 155px; border-top: 1px solid rgba(255,255,255,.09); }
  .cos-welcome-icon { width: 75px; height: 75px; border-radius: 23px; }
  .cos-welcome-icon .cos-icon { width: 41px; height: 41px; }
  .cos-welcome-stat { right: 17px; bottom: 16px; }
  .cos-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .cos-metric { min-height: 153px; padding: 15px; }
  .cos-grid-2,
  .cos-grid-3 { grid-template-columns: 1fr; }
  .cos-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cos-timeline { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cos-pallet-cards,
  .cos-docs { grid-template-columns: 1fr; }
  .cos-filter,
  .cos-search,
  .cos-track-form { align-items: stretch; flex-direction: column; }
  .cos-filter label { width: 100%; }
  .cos-inline-form { grid-template-columns: 1fr; }
  .cos-section { padding: 16px; }
  .cos-section-title { align-items: flex-start; }
  .cos-task-head { flex-direction: column; }
  .cos-table { min-width: 720px; }
  .cos-login-shell { margin: 10px auto; }
  .cos-login-visual { min-height: 330px; padding: 26px; }
  .cos-login-visual h2 { font-size: 31px; }
  .cos-login-features { display: none; }
  .cos-login-card { padding: 32px 24px; }
  .cos-admin { margin-right: 10px; }
  .cos-admin .cos-portal-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .cos-app { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .cos-topbar { padding: 11px 12px; }
  .cos-topbar-kicker { display: none; }
  .cos-topbar-user { display: none; }
  .cos-content { padding: 10px; }
  .cos-welcome h2 { font-size: 25px; }
  .cos-quick-actions { flex-direction: column; }
  .cos-quick-actions .cos-btn { width: 100%; }
  .cos-metrics { grid-template-columns: 1fr; }
  .cos-metric { min-height: 142px; }
  .cos-section-title { flex-direction: column; }
  .cos-detail-grid,
  .cos-timeline { grid-template-columns: 1fr; }
  .cos-label-actions > *,
  .cos-label-actions form,
  .cos-label-actions form .cos-btn { width: 100%; }
  .cos-btn { width: 100%; }
  .cos-sidebar-footer .cos-logout { width: 35px; }
  .cos-login-visual { min-height: 280px; padding: 22px; }
  .cos-login-card { padding: 28px 20px; }
  .cos-tracking { width: 100%; margin: 0; }
  .cos-tracking .cos-section { min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cos-shell *,
  .cos-shell *:before,
  .cos-shell *:after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Backward-compatible metric layout used by WordPress admin screens. */
.cos-admin .cos-metric > span:first-child { display: block; margin-bottom: 16px; color: var(--cos-muted); font-size: 10px; font-weight: 800; }
.cos-admin .cos-metric > strong { margin-top: auto; }

/* =========================================================
   Version 1.2.0 — responsive and admin readability upgrade
   ========================================================= */

/* Let the portal safely break out of narrow WordPress/theme containers. */
.cos-app,
.cos-login-shell,
.cos-tracking {
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.cos-app {
  width: min(1600px, calc(100vw - 24px));
  margin-top: 12px;
  margin-bottom: 12px;
}
.cos-login-shell {
  width: min(1080px, calc(100vw - 24px));
}
.cos-tracking {
  width: min(1060px, calc(100vw - 24px));
}
.cos-workspace,
.cos-content,
.cos-main,
.cos-section,
.cos-dashboard-layout > *,
.cos-grid > *,
.cos-task,
.cos-table-wrap {
  min-width: 0;
}
.cos-shell img,
.cos-shell svg,
.cos-shell video,
.cos-shell canvas {
  max-width: 100%;
}
.cos-shell input,
.cos-shell select,
.cos-shell textarea,
.cos-shell button {
  max-width: 100%;
}

/* More readable portal typography without making the interface heavy. */
.cos-app .cos-nav-link { font-size: 13px; }
.cos-app .cos-brand-copy strong { font-size: 15px; }
.cos-app .cos-brand-copy small,
.cos-app .cos-nav-heading { font-size: 10px; }
.cos-app .cos-topbar-kicker { font-size: 10px; }
.cos-app .cos-topbar-user strong { font-size: 13px; }
.cos-app .cos-topbar-user small { font-size: 11px; }
.cos-app .cos-live-pill,
.cos-app .cos-clock { font-size: 11px; }
.cos-app .cos-welcome p { font-size: 14px; }
.cos-app .cos-metric-label { font-size: 13px; }
.cos-app .cos-metric small { font-size: 11px; }
.cos-app .cos-status-row strong { font-size: 13px; }
.cos-app .cos-status-row small { font-size: 11px; }
.cos-app .cos-status-row b { font-size: 12px; }
.cos-app .cos-system-note strong { font-size: 12px; }
.cos-app .cos-system-note span { font-size: 11px; }
.cos-app .cos-btn { font-size: 13px; }
.cos-app .cos-form label > span,
.cos-app .cos-filter label > span,
.cos-app .cos-readonly > span { font-size: 12px; }
.cos-app .cos-form input,
.cos-app .cos-form select,
.cos-app .cos-form textarea,
.cos-app .cos-filter input,
.cos-app .cos-filter select,
.cos-app .cos-search input,
.cos-app .cos-track-form input { font-size: 14px !important; }
.cos-app .cos-facts { font-size: 12px; }
.cos-app .cos-status { font-size: 10px; }
.cos-app .cos-table { font-size: 13px; }
.cos-app .cos-table th { font-size: 10px; }
.cos-app .cos-table td strong { font-size: 13px; }
.cos-app .cos-table td small { font-size: 11px; }
.cos-app .cos-detail-grid span { font-size: 10px; }
.cos-app .cos-detail-grid strong { font-size: 13px; }
.cos-app .cos-step strong { font-size: 11px; }
.cos-app .cos-step span { font-size: 9px; }
.cos-app .cos-pallet-cards article strong { font-size: 13px; }
.cos-app .cos-pallet-cards article span { font-size: 11px; }
.cos-app .cos-docs a strong { font-size: 12px; }
.cos-app .cos-docs a span { font-size: 10px; }

/* WordPress admin: intentionally larger and easier to scan. */
.cos-admin {
  color: var(--cos-text);
  font-size: 14px;
  line-height: 1.55;
}
.cos-admin .cos-portal-header {
  padding: 25px 27px;
}
.cos-admin .cos-portal-header h1 {
  font-size: 30px;
  line-height: 1.18;
}
.cos-admin .cos-eyebrow {
  margin-bottom: 8px;
  font-size: 12px;
}
.cos-admin .cos-section {
  padding: 24px;
}
.cos-admin .cos-section-title h2,
.cos-admin .cos-section-title h3 {
  font-size: 21px;
}
.cos-admin h4 {
  font-size: 17px;
}
.cos-admin .cos-btn {
  min-height: 44px;
  padding: 10px 17px;
  font-size: 13px;
}
.cos-admin .cos-link,
.cos-admin .cos-text-link {
  font-size: 13px;
}
.cos-admin .cos-form label > span,
.cos-admin .cos-filter label > span,
.cos-admin .cos-readonly > span {
  font-size: 13px;
}
.cos-admin .cos-form input,
.cos-admin .cos-form select,
.cos-admin .cos-form textarea,
.cos-admin .cos-filter input,
.cos-admin .cos-filter select,
.cos-admin .cos-search input {
  min-height: 46px;
  padding: 10px 13px;
  font-size: 14px !important;
}
.cos-admin .cos-form textarea {
  min-height: 120px;
}
.cos-admin .cos-info,
.cos-admin .cos-alert,
.cos-admin .cos-empty {
  font-size: 13px;
}
.cos-admin .cos-metric {
  min-height: 176px;
  padding: 21px;
}
.cos-admin .cos-metric > span:first-child {
  margin-bottom: 18px;
  font-size: 13px;
}
.cos-admin .cos-metric > strong {
  font-size: clamp(27px, 2.1vw, 35px);
}
.cos-admin .cos-table {
  font-size: 14px;
}
.cos-admin .cos-table th {
  padding: 13px 14px;
  font-size: 11px;
}
.cos-admin .cos-table td {
  padding: 14px;
  font-size: 14px;
}
.cos-admin .cos-table td strong {
  font-size: 14px;
}
.cos-admin .cos-table td small {
  font-size: 12px;
}
.cos-admin .cos-status {
  min-height: 29px;
  padding: 5px 10px;
  font-size: 10px;
}
.cos-admin .cos-step {
  min-height: 90px;
  padding: 13px;
}
.cos-admin .cos-step strong { font-size: 12px; }
.cos-admin .cos-step span { font-size: 10px; }

/* Tablet refinements. */
@media (max-width: 1100px) {
  .cos-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cos-pallet-cards,
  .cos-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cos-topbar { gap: 12px; }
  .cos-topbar-right { gap: 8px; }
}

@media (max-width: 980px) {
  .cos-app {
    width: calc(100vw - 12px);
    min-height: calc(100vh - 12px);
    margin: 6px 0;
  }
  .cos-workspace { width: 100%; }
  .cos-topbar {
    position: sticky;
    top: 0;
    flex-wrap: nowrap;
  }
  .cos-content { width: 100%; }
  .cos-welcome { grid-template-columns: 1fr; }
  .cos-welcome-visual {
    min-height: 150px;
    border-top: 1px solid rgba(255,255,255,.09);
  }
  .cos-dashboard-layout { grid-template-columns: 1fr; }
  .cos-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cos-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cos-admin .cos-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cos-app,
  .cos-login-shell,
  .cos-tracking {
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .cos-app { margin-top: 0; margin-bottom: 0; }
  .cos-content { padding: 13px; }
  .cos-topbar { min-height: 68px; padding: 11px 13px; }
  .cos-topbar-right { margin-left: auto; }
  .cos-topbar-user,
  .cos-topbar-right .cos-live-pill,
  .cos-clock { display: none; }
  .cos-topbar h1 {
    max-width: calc(100vw - 120px);
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cos-welcome-copy { padding: 24px 20px; }
  .cos-welcome-visual { min-height: 135px; }
  .cos-metrics { grid-template-columns: 1fr; }
  .cos-metric { min-height: 142px; }
  .cos-grid-2,
  .cos-grid-3,
  .cos-inline-form,
  .cos-pallet-cards,
  .cos-docs,
  .cos-detail-grid { grid-template-columns: 1fr; }
  .cos-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cos-section { padding: 16px; }
  .cos-section-title {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .cos-search,
  .cos-track-form,
  .cos-filter {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
  .cos-search > *,
  .cos-track-form > *,
  .cos-filter > * { width: 100%; }
  .cos-filter label { min-width: 0; }

  /* Mobile table cards: no clipped columns and no sideways page scrolling. */
  .cos-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .cos-table.is-cos-responsive,
  .cos-table.is-cos-responsive tbody,
  .cos-table.is-cos-responsive tr,
  .cos-table.is-cos-responsive td {
    width: 100%;
    display: block;
  }
  .cos-table.is-cos-responsive {
    min-width: 0;
    border: 0;
    background: transparent;
  }
  .cos-table.is-cos-responsive thead {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cos-table.is-cos-responsive tbody {
    display: grid;
    gap: 12px;
  }
  .cos-table.is-cos-responsive tbody tr {
    padding: 7px 14px;
    border: 1px solid var(--cos-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--cos-shadow-sm);
  }
  .cos-table.is-cos-responsive tbody td {
    min-height: 43px;
    display: grid;
    grid-template-columns: minmax(105px, 39%) minmax(0, 61%);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--cos-line);
    overflow-wrap: anywhere;
    text-align: right;
  }
  .cos-table.is-cos-responsive tbody td:first-child { border-top: 0; }
  .cos-table.is-cos-responsive tbody td:before {
    content: attr(data-cos-label);
    color: var(--cos-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .065em;
    line-height: 1.35;
    text-align: left;
    text-transform: uppercase;
  }
  .cos-table.is-cos-responsive tbody td[data-cos-label=""],
  .cos-table.is-cos-responsive tbody td[colspan] {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .cos-table.is-cos-responsive tbody td[data-cos-label=""]:before,
  .cos-table.is-cos-responsive tbody td[colspan]:before { display: none; }
  .cos-table.is-cos-responsive td strong,
  .cos-table.is-cos-responsive td small { text-align: right; }
  .cos-table.is-cos-responsive td .cos-link,
  .cos-table.is-cos-responsive td .cos-btn { justify-self: end; }

  .cos-admin {
    margin: 12px 10px 0 0;
  }
  .cos-admin .cos-portal-header {
    padding: 20px;
  }
  .cos-admin .cos-portal-header h1 { font-size: 25px; }
  .cos-admin .cos-section { padding: 18px; }
  .cos-admin .cos-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .cos-sidebar { width: min(88vw, 330px); }
  .cos-content { padding: 10px; }
  .cos-welcome-copy { padding: 22px 17px; }
  .cos-welcome h2 { font-size: 25px; }
  .cos-welcome p { font-size: 13px; }
  .cos-welcome-visual { min-height: 120px; }
  .cos-orbit-one { width: 170px; height: 170px; }
  .cos-orbit-two { width: 115px; height: 115px; }
  .cos-welcome-icon { width: 70px; height: 70px; border-radius: 21px; }
  .cos-welcome-icon .cos-icon { width: 38px; height: 38px; }
  .cos-welcome-stat { right: 12px; bottom: 12px; }
  .cos-quick-actions { flex-direction: column; }
  .cos-quick-actions .cos-btn,
  .cos-form > .cos-btn,
  .cos-label-actions > .cos-btn,
  .cos-label-actions > form,
  .cos-label-actions form .cos-btn,
  .cos-search .cos-btn,
  .cos-track-form .cos-btn { width: 100%; }
  .cos-btn { width: auto; }
  .cos-timeline { grid-template-columns: 1fr; }
  .cos-task { padding: 15px; }
  .cos-task-head { flex-direction: column; }
  .cos-login-shell { min-height: 100vh; margin: 0; }
  .cos-login-visual { min-height: 260px; padding: 22px 18px; }
  .cos-login-card { padding: 28px 18px; }
  .cos-tracking .cos-section { min-height: 100vh; }
  .cos-admin .cos-portal-header .cos-btn { width: 100%; }
}

/* Shipment notes: daily AWB history. */
.cos-notes-panel {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--cos-line);
}
.cos-notes-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.cos-notes-heading h4 {
  margin: 3px 0 5px;
  font-size: 21px;
  line-height: 1.25;
}
.cos-notes-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--cos-muted);
  font-size: 13px;
  line-height: 1.65;
}
.cos-note-count {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid #d8e2ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.cos-note-form {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid #dbe5ef;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fbff, #ffffff);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .045);
}
.cos-note-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.cos-note-text {
  display: block;
  margin-top: 14px;
}
.cos-note-text textarea {
  min-height: 118px;
  resize: vertical;
}
.cos-note-visibility-info {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}
.cos-note-visibility-info strong { color: #1d4ed8; font-size: 13px; }
.cos-note-visibility-info span { color: #64748b; font-size: 11px; line-height: 1.5; }
.cos-note-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}
.cos-note-form-footer > span {
  color: var(--cos-muted);
  font-size: 11px;
  line-height: 1.5;
}
.cos-note-history {
  display: grid;
  gap: 18px;
}
.cos-note-day {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
}
.cos-note-day-head {
  position: sticky;
  top: 86px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--cos-brand);
  border-radius: 0 12px 12px 0;
  background: #f8fafc;
}
.cos-note-day-head span {
  color: var(--cos-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cos-note-day-head strong { color: var(--cos-ink); font-size: 13px; }
.cos-note-day-items {
  position: relative;
  display: grid;
  gap: 12px;
}
.cos-note-day-items:before {
  content: '';
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: -9px;
  width: 1px;
  background: #dbe5ef;
}
.cos-note-card {
  position: relative;
  padding: 15px 16px;
  border: 1px solid #dbe5ef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(15, 23, 42, .04);
}
.cos-note-card:before {
  content: '';
  position: absolute;
  top: 19px;
  left: -13px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--cos-brand);
  box-shadow: 0 0 0 1px #cbd5e1;
}
.cos-note-card-head,
.cos-note-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cos-note-card-head > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cos-note-card-head strong { color: var(--cos-ink); font-size: 13px; }
.cos-note-card-head span { color: var(--cos-muted); font-size: 10px; }
.cos-note-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.cos-note-type,
.cos-note-visibility {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .035em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.cos-note-type { background: #eef2ff; color: #4338ca; }
.cos-note-internal { background: #fff7ed; color: #c2410c; }
.cos-note-customer { background: #ecfdf5; color: #047857; }
.cos-note-body {
  margin-top: 13px;
  color: #334155;
  font-size: 13px;
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.cos-note-card-foot {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #eef2f7;
  color: var(--cos-muted);
  font-size: 10px;
}
.cos-note-card-foot form { margin-left: auto; }
.cos-note-delete {
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.cos-note-delete:hover { color: #991b1b; text-decoration: underline; }
.cos-notes-empty { margin-top: 12px; }
.cos-note-filter { margin-bottom: 18px; }
.cos-notes-table .cos-note-snippet {
  min-width: 220px;
  max-width: 460px;
  color: #334155;
  line-height: 1.55;
}
.cos-admin .cos-notes-panel { margin-top: 30px; }
.cos-admin .cos-notes-heading h4 { font-size: 22px; }
.cos-admin .cos-note-body { font-size: 14px; }
.cos-admin .cos-note-card-head strong { font-size: 14px; }

@media (max-width: 980px) {
  .cos-note-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cos-note-day { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cos-notes-heading,
  .cos-note-form-footer,
  .cos-note-card-head { align-items: flex-start; flex-direction: column; }
  .cos-note-form-grid { grid-template-columns: 1fr; }
  .cos-note-form-footer .cos-btn { width: 100%; }
  .cos-note-day { grid-template-columns: 1fr; gap: 10px; }
  .cos-note-day-head {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-left: 0;
    border-bottom: 2px solid var(--cos-brand);
    border-radius: 10px 10px 0 0;
  }
  .cos-note-day-items:before,
  .cos-note-card:before { display: none; }
  .cos-note-badges { justify-content: flex-start; }
  .cos-note-card-foot form { margin-left: 0; }
}
@media (max-width: 520px) {
  .cos-note-form { padding: 14px; border-radius: 14px; }
  .cos-note-card { padding: 14px; }
  .cos-note-card-foot { align-items: flex-start; flex-direction: column; }
}

/* Cargo Operations Suite v1.5 operational additions */
.cos-remaining-collector{margin-top:16px;border:1px solid rgba(15,23,42,.1);border-radius:18px;padding:12px;background:rgba(255,255,255,.72)}
.cos-remaining-collector summary{display:inline-flex;cursor:pointer;list-style:none;user-select:none}
.cos-remaining-collector summary::-webkit-details-marker{display:none}
.cos-remaining-collector[open] summary{margin-bottom:12px}
.cos-remaining-collector .cos-form{margin-top:6px}
.cos-label-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
@media (max-width: 680px){.cos-label-actions .cos-btn{width:100%;justify-content:center}.cos-remaining-collector summary{width:100%;justify-content:center}}

/* Cargo Operations Suite v1.6 driver receipt, warehouse edit and pallet box planner */
.cos-edit-panel {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.95));
  box-shadow: 0 14px 36px rgba(15,23,42,.07);
}
.cos-edit-panel > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cos-edit-panel > summary::-webkit-details-marker { display: none; }
.cos-edit-panel[open] > summary { margin-bottom: 16px; }
.cos-collection-history {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(37,99,235,.10);
  border-radius: 18px;
  background: rgba(248,250,252,.82);
}
.cos-collection-title { margin-bottom: 12px; }
.cos-empty-small { padding: 12px; font-size: 13px; }
.cos-pallet-uid {
  display: block;
  margin-top: 6px;
  color: var(--cos-muted);
  font-size: 12px;
  font-weight: 700;
}
.cos-pallet-boxes { font-weight: 800; }
@media (max-width: 760px) {
  .cos-edit-panel { padding: 12px; border-radius: 16px; }
  .cos-collection-history { padding: 12px; }
}

/* Cargo Operations Suite v1.7 cache-safe UI; v1.8 restores direct per-pallet scanning layout */
.cos-scanning-section .cos-section-title p {
  margin: 6px 0 0;
  color: var(--cos-muted);
  font-size: 14px;
}
.cos-scan-cockpit {
  border: 1px solid rgba(37,99,235,.14);
  background:
    linear-gradient(135deg, rgba(37,99,235,.045), transparent 38%),
    var(--cos-card);
}
.cos-scan-head p { margin: 6px 0 0; color: var(--cos-muted); font-size: 13px; font-weight: 700; }
.cos-scan-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 15px 0 12px;
}
.cos-scan-overview > div,
.cos-selected-pallet-stats > div {
  padding: 12px 13px;
  border: 1px solid rgba(203,213,225,.78);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 22px rgba(15,23,42,.045);
}
.cos-scan-overview span,
.cos-selected-pallet-stats span {
  display: block;
  margin-bottom: 3px;
  color: var(--cos-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cos-scan-overview strong,
.cos-selected-pallet-stats strong { color: var(--cos-ink); font-size: 18px; font-weight: 900; }
.cos-scan-progress {
  height: 9px;
  border-radius: 999px;
  background: #e8eef7;
  overflow: hidden;
  margin: 4px 0 14px;
}
.cos-scan-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cos-brand), #22c55e);
  transition: width .28s var(--cos-ease);
}
.cos-pallet-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 17px;
}
.cos-pallet-card-select {
  min-width: 0;
  min-height: 132px;
  appearance: none;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 18px;
  padding: 13px;
  background: rgba(255,255,255,.92);
  color: var(--cos-text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 9px 24px rgba(15,23,42,.055);
  transition: transform .18s var(--cos-ease), border-color .18s var(--cos-ease), box-shadow .18s var(--cos-ease), background .18s var(--cos-ease);
}
.cos-pallet-card-select:hover,
.cos-pallet-card-select.is-active {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 16px 34px rgba(37,99,235,.12);
  background: linear-gradient(180deg, #fff, var(--cos-brand-soft));
}
.cos-pallet-card-select.is-complete { border-color: rgba(8,122,75,.35); background: linear-gradient(180deg, #fff, var(--cos-green-bg)); }
.cos-pallet-card-select span,
.cos-pallet-card-select em,
.cos-pallet-card-select small { display: block; }
.cos-pallet-card-select span { color: var(--cos-muted); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.cos-pallet-card-select strong { display: block; margin: 7px 0 3px; color: var(--cos-ink); font-size: 24px; font-weight: 950; letter-spacing: -.04em; }
.cos-pallet-card-select em { color: var(--cos-orange); font-size: 12px; font-style: normal; font-weight: 850; }
.cos-pallet-card-select small { margin-top: 9px; overflow-wrap: anywhere; color: var(--cos-muted); font-size: 11px; font-weight: 800; }
.cos-pallet-card-label {
  align-self: end;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  margin-top: -7px;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 13px;
  background: #fff;
  color: var(--cos-brand);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none !important;
}
.cos-scan-panel {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(37,99,235,.16);
  border-radius: 22px;
  background: rgba(248,250,252,.86);
}
.cos-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}
.cos-panel-title h5 { margin: 0; color: var(--cos-ink); font-size: 18px; font-weight: 950; letter-spacing: -.03em; }
.cos-selected-pallet {
  max-width: 420px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--cos-brand-soft);
  color: var(--cos-brand);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.cos-selected-pallet-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cos-latest-scans {
  margin: 16px 0;
  padding: 15px;
  border: 1px solid rgba(203,213,225,.75);
  border-radius: 20px;
  background: rgba(255,255,255,.82);
}
.cos-latest-scans h5,
.cos-movement-title h5 { margin: 0; color: var(--cos-ink); font-size: 16px; font-weight: 950; }
.cos-scan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.cos-scan-list div { padding: 10px 12px; border: 1px solid rgba(203,213,225,.7); border-radius: 14px; background: #fff; }
.cos-scan-list strong { display: block; overflow-wrap: anywhere; color: var(--cos-ink); font-size: 13px; font-weight: 950; }
.cos-scan-list span { display: block; margin-top: 3px; color: var(--cos-muted); font-size: 12px; font-weight: 700; }
.cos-pallet-movement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cos-pallet-movement-grid .cos-pallet-move {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(203,213,225,.8);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
}
.cos-pallet-movement-grid .cos-pallet-move > strong { display: block; color: var(--cos-ink); font-size: 14px; overflow-wrap: anywhere; }
.cos-pallet-movement-grid .cos-pallet-move > small { display: block; margin-bottom: 8px; color: var(--cos-muted); font-size: 12px; font-weight: 800; }
.cos-scan-form button[disabled] { opacity: .52; cursor: not-allowed; }
@media (max-width: 1100px) {
  .cos-scan-overview,
  .cos-pallet-cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cos-scan-overview,
  .cos-pallet-cockpit-grid,
  .cos-selected-pallet-stats,
  .cos-scan-list,
  .cos-pallet-movement-grid { grid-template-columns: 1fr; }
  .cos-panel-title { align-items: flex-start; flex-direction: column; }
  .cos-selected-pallet { width: 100%; max-width: none; border-radius: 14px; }
  .cos-scan-panel { padding: 13px; border-radius: 18px; }
  .cos-pallet-card-select { min-height: 118px; }
}
.cos-pallet-card-wrap { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.cos-pallet-card-wrap .cos-pallet-card-select { width: 100%; }

/* Cargo Operations Suite v1.8 restored v1.6 scanning flow with direct per-pallet box quantities */
.cos-pallet-direct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 16px;
}
.cos-pallet-direct-card {
  border: 1px solid var(--cos-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 14px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}
.cos-pallet-direct-card.is-complete {
  border-color: rgba(8, 122, 75, .28);
  background: linear-gradient(180deg, #ffffff 0%, #f1fbf6 100%);
}
.cos-pallet-direct-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cos-pallet-direct-head strong {
  display: block;
  color: var(--cos-ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.cos-pallet-direct-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.cos-pallet-direct-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--cos-muted);
  font-size: 11px;
  font-weight: 800;
}
.cos-pallet-box-count-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--cos-line);
}
.cos-pallet-direct-scan {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cos-pallet-direct-scan .cos-label-actions {
  grid-column: 1 / -1;
}
@media (max-width: 920px) {
  .cos-pallet-direct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cos-pallet-direct-card { padding: 12px; border-radius: 16px; }
  .cos-pallet-direct-head { flex-direction: column; }
  .cos-pallet-box-count-form,
  .cos-pallet-direct-scan { grid-template-columns: 1fr; }
  .cos-pallet-direct-scan .cos-label-actions { flex-direction: column; align-items: stretch; }
}

/* v1.9.0 barcode register and warehouse quantity controls */
.cos-barcode-upload-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:18px 0;padding:20px;border:1px solid var(--cos-border,#dfe5ee);border-radius:18px;background:linear-gradient(135deg,#f8fbff,#fff)}
.cos-barcode-upload-box h4{margin:3px 0 6px;font-size:18px}.cos-barcode-upload-box p{margin:0;color:var(--cos-muted,#667085)}.cos-barcode-upload-box .cos-upload{grid-column:1/-1}
.cos-count-compare{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.cos-count-compare>div{padding:14px 16px;border:1px solid var(--cos-border,#dfe5ee);border-radius:14px;background:#fff}.cos-count-compare span{display:block;color:var(--cos-muted,#667085);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.cos-count-compare strong{display:block;margin-top:5px;font-size:22px;line-height:1.1}
.cos-warehouse-count-form{margin:16px 0;padding:18px;border:1px solid var(--cos-border,#dfe5ee);border-radius:16px;background:#f8fafc}.cos-count-history{margin:16px 0}.cos-count-history .cos-table small{display:block;margin-top:4px}.cos-barcode-register{margin-top:20px}.cos-barcode-register .cos-table strong{word-break:break-all}
@media(max-width:900px){.cos-count-compare{grid-template-columns:repeat(2,minmax(0,1fr))}.cos-barcode-upload-box{grid-template-columns:1fr}.cos-barcode-upload-box .cos-upload{grid-column:auto}}
@media(max-width:560px){.cos-count-compare{grid-template-columns:1fr}.cos-barcode-upload-box{padding:15px}.cos-warehouse-count-form{padding:14px}}

@media (max-width: 680px) { .cos-status-stack { width: 100%; justify-content: flex-start; } }

/* v2.0 protected editing, deletion, FYCO and smart pallet workflow */
.cos-edit-lock{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid rgba(245,158,11,.3);border-radius:16px;background:#fff9eb;color:#7c4a03}
.cos-delete-zone{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:22px;padding:20px;border:1px solid rgba(220,38,38,.25);border-radius:18px;background:linear-gradient(135deg,#fff7f7,#fff)}
.cos-delete-zone h4{margin:3px 0 7px;font-size:19px;color:#7f1d1d}.cos-delete-zone p{max-width:760px;margin:0;color:#7f1d1d;line-height:1.6}
.cos-delete-zone .cos-inline-form{min-width:300px}.cos-btn-danger{background:#b42318!important;border-color:#b42318!important;color:#fff!important}.cos-btn-danger:hover{background:#912018!important}
.cos-pallet-direct-card[open]{box-shadow:0 18px 38px rgba(15,23,42,.1)}
.cos-pallet-direct-card>summary{list-style:none;cursor:pointer}.cos-pallet-direct-card>summary::-webkit-details-marker{display:none}
.cos-pallet-direct-card>summary:after{content:'+';display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#eef2f7;color:var(--cos-ink);font-size:20px;font-weight:800}
.cos-pallet-direct-card[open]>summary:after{content:'−'}.cos-pallet-direct-card.is-complete>summary:after{content:'✓';background:#e6f7ef;color:#087a4b;font-size:15px}
.cos-collecting-party-auto.is-autofilled{border-color:#9bd7ba!important;background:#f0fbf5!important}
.cos-box-outbound{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr) minmax(180px,.8fr) auto;gap:12px;align-items:end;margin:14px 0;padding:16px;border:1px solid rgba(21,94,239,.18);border-radius:16px;background:#f7faff}
.cos-box-outbound>strong,.cos-box-outbound>small{grid-column:1/-1}.cos-box-outbound>small{margin-top:-8px;color:var(--cos-muted)}
.cos-fyco-control{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:14px;border:1px solid rgba(220,38,38,.2);border-radius:14px;background:#fff8f8}.cos-fyco-control label{min-width:220px;flex:1}.cos-fyco-control .cos-status{align-self:center}
.cos-barcode-register .cos-fyco{box-shadow:0 0 0 3px rgba(220,38,38,.08)}
@media(max-width:900px){.cos-delete-zone{grid-template-columns:1fr}.cos-delete-zone .cos-inline-form{min-width:0}.cos-box-outbound{grid-template-columns:1fr 1fr}.cos-box-outbound>strong,.cos-box-outbound>small{grid-column:1/-1}}
@media(max-width:620px){.cos-delete-zone{padding:15px}.cos-box-outbound{grid-template-columns:1fr}.cos-box-outbound>strong,.cos-box-outbound>small{grid-column:auto}.cos-fyco-control{align-items:stretch}.cos-fyco-control label{min-width:0;width:100%}}

/* v2.0.1 — numbered warehouse locations and simplified OTP deletion */
.is-hidden { display: none !important; }
.cos-location-board { overflow: hidden; }
.cos-location-warehouse { margin-top: 22px; }
.cos-location-warehouse + .cos-location-warehouse { padding-top: 24px; border-top: 1px solid var(--cos-line); }
.cos-location-warehouse-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cos-location-warehouse-title h4 { margin: 2px 0 0; color: var(--cos-ink); font-size: 22px; line-height: 1.15; }
.cos-location-warehouse-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--cos-brand-soft); color: var(--cos-brand); }
.cos-location-warehouse-icon .cos-icon { width: 23px; height: 23px; }
.cos-location-line { margin: 0 0 16px; padding: 16px; border: 1px solid var(--cos-line); border-radius: 16px; background: #fbfcfe; }
.cos-location-line-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.cos-location-line-head strong { display: block; color: var(--cos-ink); font-size: 16px; }
.cos-location-line-head span:not(.cos-location-count) { display: block; margin-top: 3px; color: var(--cos-muted); font-size: 12px; font-weight: 700; }
.cos-location-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #eef2f7; color: var(--cos-ink); font-size: 11px; font-weight: 850; }
.cos-position-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.cos-position-card { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 11px; align-items: center; min-width: 0; padding: 13px; border: 1px solid var(--cos-line); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.04); }
.cos-position-card.is-available { border-style: dashed; background: #fffaf0; }
.cos-position-number { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--cos-brand-soft); color: var(--cos-brand); font-size: 18px; font-weight: 950; letter-spacing: -.02em; }
.cos-position-card.is-available .cos-position-number { background: #fff1d6; color: #9a5b00; }
.cos-position-copy { min-width: 0; }
.cos-position-copy strong,.cos-position-copy span,.cos-position-copy small { display: block; overflow-wrap: anywhere; }
.cos-position-copy strong { color: var(--cos-ink); font-size: 13px; line-height: 1.35; }
.cos-position-copy span { margin-top: 3px; color: var(--cos-muted); font-size: 11px; font-weight: 720; }
.cos-position-copy small { margin-top: 5px; color: #64748b; font-size: 10px; }
.cos-pallet-direct-meta { grid-template-columns: repeat(4,minmax(0,1fr)); }
.cos-pallet-direct-meta span b { color: var(--cos-ink); font-weight: 850; }

.cos-delete-zone { align-items: stretch; }
.cos-delete-copy { align-self: center; }
.cos-delete-email { display: inline-flex; margin-top: 10px; padding: 6px 9px; border-radius: 8px; background: rgba(180,35,24,.08); color: #7f1d1d; font-size: 11px; font-weight: 850; }
.cos-delete-actions { display: flex; min-width: 330px; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.cos-delete-request-form { margin: 0; }
.cos-delete-request-form .cos-btn { width: 100%; }
.cos-delete-confirm-form { display: grid; grid-template-columns: minmax(130px,1fr) auto; gap: 9px; align-items: end; margin: 0; }
.cos-delete-confirm-form .cos-field { margin: 0; }
.cos-delete-confirm-form input[name="delete_otp"] { min-height: 45px; text-align: center; font-size: 20px; font-weight: 900; letter-spacing: .3em; }
.cos-delete-feedback { min-height: 0; padding: 0; border-radius: 10px; font-size: 12px; font-weight: 750; line-height: 1.45; }
.cos-delete-feedback:not(:empty) { min-height: 18px; padding: 9px 11px; }
.cos-delete-feedback.is-success { background: #e8f7ef; color: #087a4b; }
.cos-delete-feedback.is-error { background: #fff0f0; color: #b42318; }

@media(max-width:1180px){
  .cos-position-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
  .cos-position-grid { grid-template-columns: 1fr; }
  .cos-location-line-head { align-items: flex-start; flex-direction: column; }
  .cos-position-card { grid-template-columns: 44px minmax(0,1fr); }
  .cos-position-card>.cos-status { grid-column: 2; justify-self: start; }
  .cos-position-number { width: 44px; height: 44px; }
  .cos-pallet-direct-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cos-delete-actions { min-width: 0; width: 100%; }
  .cos-delete-confirm-form { grid-template-columns: 1fr; }
}
@media(max-width:480px){
  .cos-pallet-direct-meta { grid-template-columns: 1fr; }
}


/* v2.0.3 pallet lookup */
.cos-location-lookup{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:12px;align-items:end;margin:18px 0 20px;padding:16px;border:1px solid var(--cos-border,#e5e7eb);border-radius:16px;background:var(--cos-surface,#fff)}
.cos-location-lookup label{display:grid;gap:7px;margin:0}.cos-location-lookup label span{font-weight:700;font-size:14px}.cos-location-lookup input{width:100%;min-height:46px;border:1px solid var(--cos-border,#d9dee8);border-radius:12px;padding:0 14px;font-size:15px;background:#fff}.cos-location-lookup-count{font-size:13px;font-weight:700;color:var(--cos-muted,#64748b);white-space:nowrap;padding-bottom:13px}.cos-position-copy .cos-link{margin-top:4px;display:inline-flex}.cos-location-board .is-hidden{display:none!important}
@media (max-width:782px){.cos-location-lookup{grid-template-columns:1fr}.cos-location-lookup .cos-btn{width:100%}.cos-location-lookup-count{padding-bottom:0;white-space:normal}}

/* v2.1.0 — professional warehouse line, capacity and slot allocation */
.cos-location-capacity-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.cos-location-capacity-summary>div{padding:15px 16px;border:1px solid var(--cos-line);border-radius:15px;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 5px 16px rgba(15,23,42,.04)}
.cos-location-capacity-summary span{display:block;color:var(--cos-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.cos-location-capacity-summary strong{display:block;margin-top:5px;color:var(--cos-ink);font-size:25px;line-height:1;font-weight:950}
.cos-location-line-stats{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.cos-capacity-bar{height:9px;margin:13px 0 7px;border-radius:999px;background:#eaf0f7;overflow:hidden}
.cos-capacity-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#155eef,#38bdf8);transition:width .3s ease}
.cos-capacity-bar.is-warning span{background:linear-gradient(90deg,#d97706,#fbbf24)}
.cos-capacity-bar.is-critical span{background:linear-gradient(90deg,#dc2626,#fb7185)}
.cos-capacity-copy{display:flex;justify-content:space-between;gap:12px;margin-bottom:13px;color:var(--cos-muted);font-size:11px;font-weight:700}
.cos-position-card.is-reserved{border-color:#bfdbfe;background:#f5f9ff}
.cos-position-card.is-occupied{border-color:#bbf7d0;background:#f5fff8}
.cos-position-card.is-outbound_pending{border-color:#fed7aa;background:#fffaf3}
.cos-position-card.is-blocked{border-color:#fecaca;background:#fff7f7}
.cos-position-card.is-reserved .cos-position-number{background:#dbeafe;color:#1d4ed8}
.cos-position-card.is-occupied .cos-position-number{background:#dcfce7;color:#15803d}
.cos-position-card.is-outbound_pending .cos-position-number{background:#ffedd5;color:#c2410c}
.cos-position-card.is-blocked .cos-position-number{background:#fee2e2;color:#b91c1c}
.cos-status-info{background:#e0e7ff;color:#3730a3}
.cos-position-admin{grid-column:1/-1;border-top:1px dashed var(--cos-line);padding-top:8px}
.cos-position-admin summary{cursor:pointer;color:var(--cos-brand);font-size:11px;font-weight:850}
.cos-position-admin form{display:grid;grid-template-columns:150px minmax(160px,1fr) auto;gap:8px;margin-top:8px}
.cos-position-admin select,.cos-position-admin input{min-height:38px;border:1px solid var(--cos-line);border-radius:9px;padding:7px 10px;background:#fff;font-size:12px}
.cos-location-metrics{margin-bottom:18px}
.cos-pallet-history{margin:4px 0 18px;padding:0 14px;border:1px solid var(--cos-line);border-radius:13px;background:#fff}
.cos-pallet-history>summary{padding:12px 0;cursor:pointer;color:var(--cos-brand);font-size:12px;font-weight:850}
.cos-audit-list{display:grid;gap:8px;padding:0 0 13px}
.cos-audit-list>div{padding:10px 12px;border:1px solid var(--cos-line);border-radius:10px;background:#f8fafc}
.cos-audit-list strong,.cos-audit-list span,.cos-audit-list small{display:block}
.cos-audit-list strong{font-size:12px;color:var(--cos-ink)}
.cos-audit-list span{margin-top:3px;font-size:11px;color:#334155;overflow-wrap:anywhere}
.cos-audit-list small{margin-top:4px;color:var(--cos-muted);font-size:10px}
.cos-pallet-move{grid-template-columns:minmax(220px,1.2fr) minmax(190px,1fr) minmax(160px,.8fr) minmax(190px,.9fr) auto!important}
.cos-pallet-move>strong,.cos-pallet-move>small{grid-column:1/-1}
.cos-pallet-direct-meta span:last-child{overflow-wrap:anywhere}
@media(max-width:1100px){.cos-location-capacity-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cos-pallet-move{grid-template-columns:1fr 1fr!important}.cos-pallet-move>strong,.cos-pallet-move>small{grid-column:1/-1}}
@media(max-width:700px){.cos-location-capacity-summary{grid-template-columns:1fr 1fr}.cos-capacity-copy{display:grid}.cos-position-admin form{grid-template-columns:1fr}.cos-pallet-move{grid-template-columns:1fr!important}.cos-pallet-move>strong,.cos-pallet-move>small{grid-column:auto}}
@media(max-width:440px){.cos-location-capacity-summary{grid-template-columns:1fr}}

/* Protected deletion OTP email change */
.cos-email-change-zone{border:1px solid rgba(37,99,235,.2);background:linear-gradient(135deg,#f8fbff,#fff);box-shadow:0 18px 45px rgba(15,23,42,.06)}
.cos-email-change-zone .cos-section-title p{margin:7px 0 0;max-width:820px;color:var(--cos-muted,#64748b);line-height:1.6}
.cos-email-change-summary{align-items:stretch;margin-bottom:18px}
.cos-email-change-summary input[readonly]{background:#f8fafc;color:#334155;font-weight:750;cursor:not-allowed}
.cos-security-state{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:76px;padding:15px 17px;border:1px solid rgba(16,185,129,.24);border-radius:14px;background:#ecfdf5;color:#065f46}
.cos-security-state strong{font-size:15px}.cos-security-state span{font-size:13px;line-height:1.5}
.cos-email-change-request,.cos-email-change-confirm{margin-top:14px}
.cos-email-change-zone .cos-inline-form{grid-template-columns:minmax(260px,1fr) auto;max-width:820px}
.cos-email-change-zone .cos-delete-feedback{max-width:820px;margin-top:12px}
.cos-otp-test-form{margin-top:18px!important;padding-top:18px;border-top:1px solid var(--cos-border,#e2e8f0);grid-template-columns:auto!important}
@media(max-width:700px){.cos-email-change-zone .cos-inline-form{grid-template-columns:1fr}.cos-email-change-zone .cos-inline-form .cos-btn{width:100%}}

/* v2.2.0 — administrator backup and restore */
.cos-backup-page{max-width:1500px}
.cos-backup-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:20px;align-items:center;margin:0 0 20px;padding:28px;border:1px solid #cfe0ff;border-radius:22px;background:linear-gradient(135deg,#f7faff 0%,#eef5ff 56%,#fff 100%);box-shadow:0 14px 36px rgba(15,23,42,.07)}
.cos-backup-hero h2{max-width:720px;margin:5px 0 10px;color:var(--cos-ink);font-size:clamp(27px,3vw,42px);line-height:1.08;letter-spacing:-.035em}
.cos-backup-hero p{max-width:760px;margin:0;color:#526174;font-size:15px;line-height:1.7}
.cos-backup-shield{display:grid;justify-items:center;text-align:center;gap:7px;padding:24px 18px;border:1px solid rgba(21,94,239,.15);border-radius:19px;background:rgba(255,255,255,.82);box-shadow:0 10px 25px rgba(21,94,239,.08)}
.cos-backup-shield .dashicons{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#e8f0ff;color:#155eef;font-size:32px;line-height:56px}
.cos-backup-shield strong{color:var(--cos-ink);font-size:16px}.cos-backup-shield small{max-width:230px;color:var(--cos-muted);font-size:12px;line-height:1.5}
.cos-backup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.cos-backup-grid>.cos-section{margin:0;min-height:100%}
.cos-btn-large{min-height:50px;padding:0 19px!important;font-size:14px!important;font-weight:850!important;gap:8px}
.cos-btn-large .dashicons{font-size:19px;width:19px;height:19px}
.cos-check-card,.cos-radio-card{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:flex-start;margin:0!important;padding:15px!important;border:1px solid var(--cos-line)!important;border-radius:14px;background:#f8fafc;cursor:pointer}
.cos-check-card input,.cos-radio-card input{width:18px!important;height:18px!important;min-height:0!important;margin:2px 0 0!important;padding:0!important;flex:0 0 auto}
.cos-check-card span,.cos-radio-card span{display:block!important}.cos-check-card strong,.cos-check-card small,.cos-radio-card strong,.cos-radio-card small{display:block}
.cos-check-card strong,.cos-radio-card strong{color:var(--cos-ink);font-size:14px;line-height:1.35}.cos-check-card small,.cos-radio-card small{margin-top:5px;color:var(--cos-muted);font-size:11px;line-height:1.5}
.cos-radio-card:has(input:checked),.cos-check-card:has(input:checked){border-color:#9dbbff!important;background:#f2f7ff;box-shadow:0 0 0 3px rgba(21,94,239,.07)}
.cos-radio-danger:has(input:checked){border-color:#f4a6a1!important;background:#fff6f5;box-shadow:0 0 0 3px rgba(180,35,24,.06)}
.cos-restore-modes{display:grid;gap:10px}
.cos-backup-restore .cos-warning{margin-top:14px}
.cos-backup-create .cos-info{margin-top:14px}
.cos-backup-page .cos-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.cos-backup-page .cos-actions form{margin:0}
.cos-backup-audit{max-height:500px;overflow:auto}.cos-backup-audit>div{border-left:4px solid #9dbbff}
@media(max-width:1050px){.cos-backup-grid{grid-template-columns:1fr}.cos-backup-hero{grid-template-columns:1fr}.cos-backup-shield{justify-items:start;text-align:left;grid-template-columns:auto minmax(0,1fr)}.cos-backup-shield small{grid-column:2}}
@media(max-width:620px){.cos-backup-hero{padding:19px;border-radius:17px}.cos-backup-shield{grid-template-columns:1fr;justify-items:center;text-align:center}.cos-backup-shield small{grid-column:auto}.cos-backup-page .cos-btn-large{width:100%;justify-content:center}.cos-backup-page .cos-actions{align-items:stretch;flex-direction:column}.cos-backup-page .cos-actions .cos-btn,.cos-backup-page .cos-actions form,.cos-backup-page .cos-actions form button{width:100%}}