*{
  box-sizing:border-box
}

:root{
  --red:#c8102e;
  --red2:#e11d48;
  --bg:#f6f7f9;
  --line:#e5e7eb;
  --text:#20242c;
  --muted:#6b7280;
}

body{
  margin:0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:var(--bg);
  color:var(--text);
}

.hidden{
  display:none!important
}

.loading-screen,
.login-screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
}

.loader{
  width:38px;
  height:38px;
  border:4px solid #eee;
  border-top-color:var(--red);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.login-card{
  background:white;
  padding:40px;
  border-radius:20px;
  box-shadow:0 15px 50px rgba(0,0,0,.08);
  text-align:center;
  width:min(420px,90vw)
}

.brand-mark{
  width:68px;
  height:68px;
  border-radius:18px;
  background:var(--red);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:24px;
  margin:0 auto 20px
}

.topbar{
  height:84px;
  background:white;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 34px;
  position:sticky;
  top:0;
  z-index:20;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}

.brand-logo{
  width:46px;
  height:46px;
  background:var(--red);
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
}

.brand-title{
  font-size:18px;
  font-weight:800;
  color:var(--red);
}

.brand-sub{
  font-size:11px;
  letter-spacing:3px;
  color:#8b919d;
  font-weight:700;
  margin-top:2px;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:20px
}

.workspace-link{
  color:#4b5563;
  text-decoration:none;
  font-weight:600
}

.user-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:20px;
  border-left:1px solid var(--line)
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff1f2;
  color:var(--red);
  font-weight:800;
}

.user-name{
  font-weight:700;
  font-size:14px
}

.user-role{
  color:var(--muted);
  font-size:12px;
  margin-top:2px
}

.icon-btn,
.close-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:22px;
  color:#6b7280;
}

.content{
  max-width:1500px;
  margin:auto;
  padding:34px;
}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px;
}

.page-head h1{
  margin:0;
  font-size:28px
}

.page-head p{
  margin:6px 0 0;
  color:var(--muted)
}

.primary-btn,
.secondary-btn{
  border:0;
  border-radius:10px;
  padding:11px 18px;
  font-weight:700;
  cursor:pointer;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.primary-btn{
  color:#fff;
  background:var(--red)
}

.primary-btn:hover{
  background:#a80c26
}

.secondary-btn{
  background:#fff;
  border:1px solid var(--line);
  color:#333
}

.stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin-bottom:22px;
}

.stat-card{
  background:#fff;
  padding:20px;
  border-radius:14px;
  border:1px solid #eceef1;
}

.stat-label{
  color:var(--muted);
  font-size:13px;
  font-weight:600
}

.stat-value{
  font-size:30px;
  font-weight:800;
  margin-top:6px
}

.panel{
  background:#fff;
  border:1px solid #eceef1;
  border-radius:15px;
  overflow:hidden;
}

.toolbar{
  padding:18px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:12px
}

.input{
  width:100%;
  border:1px solid #dfe3e8;
  border-radius:9px;
  padding:11px 12px;
  font:inherit;
  background:#fff;
  outline:none;
}

.input:focus{
  border-color:#d35b70;
  box-shadow:0 0 0 3px rgba(200,16,46,.08)
}

.search{
  max-width:430px
}

.toolbar select{
  max-width:230px
}

.table-wrap{
  min-height:350px;
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th{
  text-align:left;
  color:#6b7280;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:13px 16px;
  background:#fafafa;
  border-bottom:1px solid var(--line);
}

td{
  padding:15px 16px;
  border-bottom:1px solid #f0f1f3;
  font-size:14px;
}

.code{
  color:var(--red);
  font-weight:700
}

.badge{
  display:inline-flex;
  align-items:center;
  border-radius:20px;
  padding:5px 9px;
  font-size:12px;
  font-weight:700;
  background:#f3f4f6;
}

.status-DRAFT{background:#f3f4f6}
.status-READY{background:#fff7ed;color:#c2410c}
.status-CREATED{background:#eff6ff;color:#1d4ed8}
.status-PICKING{background:#fefce8;color:#a16207}
.status-IN_TRANSIT{background:#eef2ff;color:#4338ca}
.status-DELIVERED{background:#ecfdf5;color:#047857}
.status-DELIVERY_FAILED{background:#fef2f2;color:#b91c1c}
.status-RETURNING{background:#fff7ed;color:#c2410c}
.status-RETURNED{background:#fef2f2;color:#991b1b}
.status-CANCELLED{background:#f3f4f6;color:#6b7280}

.empty{
  text-align:center;
  padding:70px 20px;
  color:var(--muted)
}

.empty-icon{
  font-size:46px;
  margin-bottom:10px
}

.empty h3{
  color:#333;
  margin:0
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.4);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:7vh 20px;
  z-index:100;
  overflow:auto;
}

.modal-card{
  width:min(800px,96vw);
  background:#fff;
  border-radius:18px;
  padding:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.18)
}

.modal-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:22px
}

.modal-head h2{
  margin:0
}

.modal-head p{
  color:var(--muted);
  margin:5px 0 0
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.form-grid label span{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:7px
}

.full{
  grid-column:1/-1
}

.modal-actions{
  margin-top:24px;
  display:flex;
  justify-content:flex-end;
  gap:10px
}

.toast{
  position:fixed;
  right:25px;
  bottom:25px;
  background:#111827;
  color:#fff;
  padding:13px 18px;
  border-radius:10px;
  z-index:200;
  box-shadow:0 8px 30px rgba(0,0,0,.2)
}

@media(max-width:900px){
  .stats{
    grid-template-columns:repeat(2,1fr)
  }

  .topbar{
    padding:0 18px
  }

  .workspace-link{
    display:none
  }

  .content{
    padding:20px
  }

  .page-head{
    gap:20px
  }
}

@media(max-width:650px){
  .stats{
    grid-template-columns:1fr
  }

  .form-grid{
    grid-template-columns:1fr
  }

  .full{
    grid-column:auto
  }

  .page-head{
    align-items:flex-start;
    flex-direction:column
  }

  .toolbar{
    flex-direction:column
  }

  .search,
  .toolbar select{
    max-width:none
  }

  .user-box>div:nth-child(2){
    display:none
  }
}

.page-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.carrier-modal-card{
  width:min(900px,96vw);
}

.carrier-list{
  display:grid;
  gap:12px;
}

.carrier-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:15px 16px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}

.carrier-card h4{
  margin:0 0 4px;
}

.carrier-card p{
  margin:0;
  color:#6b7280;
  font-size:13px;
}

.carrier-card-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.connection-on{
  color:#047857;
  font-weight:700;
}

.connection-off{
  color:#6b7280;
  font-weight:700;
}

.separator{
  border:0;
  border-top:1px solid #e5e7eb;
  margin:24px 0;
}