:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#172033;
  background:#f5f7fb;
  line-height:1.45;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:#f5f7fb;
}

button,input,select{font:inherit}

.hidden{display:none!important}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 28px;
  background:#fff;
  border-bottom:1px solid #e6eaf0;
  position:sticky;
  top:0;
  z-index:10;
}

.brand{
  font-size:20px;
  font-weight:700;
}

.subtitle{
  margin-top:2px;
  color:#6c7689;
  font-size:13px;
}

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

.session-user{
  color:#465168;
  font-size:14px;
}

.layout{
  width:min(1240px,calc(100% - 32px));
  margin:28px auto 60px;
  display:grid;
  gap:20px;
}

.card{
  background:#fff;
  border:1px solid #e4e8ef;
  border-radius:16px;
  padding:24px;
  box-shadow:0 8px 30px rgba(20,31,50,.05);
}

.login-card{
  max-width:560px;
  margin:48px auto;
  width:100%;
}

h1,h2{
  margin:0;
  color:#111827;
}

h1{font-size:26px}
h2{font-size:21px}

p{margin:10px 0 0}

.google-button{
  min-height:44px;
  margin-top:24px;
}

.status{
  margin-top:16px;
  min-height:22px;
}

.muted{color:#6b7280}

.error{color:#b42318}
.success{color:#067647}

.button{
  appearance:none;
  border:0;
  border-radius:10px;
  padding:10px 15px;
  cursor:pointer;
  font-weight:600;
}

.button.secondary{
  background:#f0f3f7;
  color:#25314a;
  border:1px solid #dfe4eb;
}

.button:hover{filter:brightness(.98)}
.button:disabled{cursor:not-allowed;opacity:.55}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.filters{
  display:grid;
  grid-template-columns:minmax(260px,1.6fr) minmax(180px,.7fr) minmax(180px,.7fr);
  gap:14px;
  margin-top:22px;
}

.filters label{
  display:grid;
  gap:7px;
  color:#556176;
  font-size:13px;
  font-weight:600;
}

.filters input,
.filters select{
  width:100%;
  min-height:42px;
  border:1px solid #d8dee8;
  border-radius:10px;
  padding:9px 11px;
  background:#fff;
  color:#182235;
  outline:none;
}

.filters input:focus,
.filters select:focus{
  border-color:#8aa4d8;
  box-shadow:0 0 0 3px rgba(62,99,173,.12);
}

.table-wrap{
  margin-top:14px;
  overflow:auto;
  border:1px solid #e5e9ef;
  border-radius:12px;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:940px;
}

th,td{
  padding:13px 14px;
  border-bottom:1px solid #edf0f4;
  text-align:left;
  vertical-align:top;
}

th{
  background:#f8fafc;
  color:#667085;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

td{
  font-size:14px;
}

tbody tr:last-child td{border-bottom:0}

.order-number{
  font-weight:700;
  color:#111827;
}

.cell-sub{
  display:block;
  margin-top:3px;
  color:#7a8495;
  font-size:12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  border-radius:999px;
  padding:4px 9px;
  background:#eef2f7;
  color:#3a465b;
  font-size:12px;
  font-weight:700;
}

.badge.ok{
  background:#ecfdf3;
  color:#027a48;
}

.badge.warn{
  background:#fffaeb;
  color:#b54708;
}

.badge.bad{
  background:#fef3f2;
  color:#b42318;
}

.table-action{
  white-space:nowrap;
}

.link-button{
  border:0;
  background:transparent;
  color:#2855a6;
  padding:0;
  cursor:pointer;
  font-weight:600;
}

.load-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:16px;
}

.detail-grid{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:0;
  margin:20px 0 0;
  border:1px solid #e5e9ef;
  border-radius:12px;
  overflow:hidden;
}

.detail-grid dt,
.detail-grid dd{
  margin:0;
  padding:12px 14px;
  border-bottom:1px solid #edf0f4;
}

.detail-grid dt{
  background:#f8fafc;
  color:#667085;
  font-size:13px;
  font-weight:700;
}

.detail-grid dd{
  color:#1d2939;
  overflow-wrap:anywhere;
}

.detail-grid dt:last-of-type,
.detail-grid dd:last-of-type{
  border-bottom:0;
}

.empty-row{
  text-align:center;
  color:#7a8495;
  padding:28px;
}

@media(max-width:760px){
  .topbar{padding:15px 16px}
  .layout{width:min(100% - 20px,1240px);margin-top:14px}
  .card{padding:17px;border-radius:13px}
  .section-head{align-items:stretch;flex-direction:column}
  .filters{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .detail-grid dt{border-bottom:0;padding-bottom:4px}
  .detail-grid dd{padding-top:4px}
  .session-user{display:none}
}

.login-form{
  display:grid;
  gap:15px;
  margin-top:24px;
}

.login-form label{
  display:grid;
  gap:7px;
  color:#556176;
  font-size:13px;
  font-weight:600;
}

.login-form input{
  width:100%;
  min-height:44px;
  border:1px solid #d8dee8;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  color:#182235;
  outline:none;
}

.login-form input:focus{
  border-color:#8aa4d8;
  box-shadow:0 0 0 3px rgba(62,99,173,.12);
}

.button.primary{
  background:#2855a6;
  color:#fff;
}