.materials-body {
  min-height:100vh;
  background:
    radial-gradient(circle at 83% -5%,rgba(54,119,189,.18),transparent 32%),
    #07101f;
}

.materials-topbar {
  position:sticky;
  top:0;
  z-index:40;
  min-height:64px;
  display:flex;
  align-items:center;
  gap:34px;
  padding:0 max(24px,5vw);
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(7,16,31,.89);
  backdrop-filter:blur(18px);
}

.materials-topbar .brand {
  margin-right:auto;
}

.materials-topbar nav {
  display:flex;
  gap:25px;
  color:#9eafc2;
  font-size:14px;
}

.materials-topbar nav a {
  padding:21px 0 18px;
  border-bottom:2px solid transparent;
}

.materials-topbar nav a:hover,
.materials-topbar nav a.active {
  color:#f4f8ff;
  border-bottom-color:#a9d3ff;
}

.preview-badge {
  padding:6px 9px;
  border:1px solid rgba(151,202,255,.2);
  border-radius:999px;
  color:#acd1f4;
  background:rgba(96,160,224,.08);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}

.materials-shell {
  width:min(1320px,94vw);
  margin:auto;
  padding:22px 0 70px;
}

.materials-heading {
  min-height:105px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:20px 27px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  background:
    radial-gradient(circle at 90% 0%,rgba(88,158,229,.17),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
}

.materials-heading h1 {
  margin:0;
  font-size:35px;
}

.materials-heading > div > p:last-child {
  margin:7px 0 0;
  color:#91a6bc;
  font-size:13px;
}

.back-button,
.download-button,
.result-actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:11px;
  color:#d0e4f7;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  font:inherit;
  font-size:12px;
  text-decoration:none;
}

.warehouse-card {
  min-height:76px;
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:13px;
  padding:15px 19px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(255,255,255,.033);
}

.warehouse-dot {
  display:block;
  width:11px;
  height:11px;
  border-radius:50%;
}

.warehouse-dot.unknown {
  background:#899bac;
}

.warehouse-dot.missing {
  background:#e4bb68;
  box-shadow:0 0 13px rgba(228,187,104,.34);
}

.warehouse-dot.ready {
  background:#6ed79b;
  box-shadow:0 0 13px rgba(110,215,155,.35);
}

.small-label {
  display:block;
  color:#73889e;
  font-size:9px;
  letter-spacing:.11em;
}

.warehouse-card strong {
  display:block;
  margin-top:3px;
  font-size:14px;
}

.warehouse-card p {
  margin:4px 0 0;
  color:#8397ab;
  font-size:11px;
}

.upload-section {
  margin-top:13px;
}

.drop-zone {
  min-height:270px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:35px;
  border:1px dashed rgba(144,197,249,.3);
  border-radius:21px;
  outline:none;
  background:
    radial-gradient(circle at 50% 20%,rgba(78,150,222,.09),transparent 43%),
    rgba(255,255,255,.022);
  cursor:pointer;
  transition:.2s ease;
}

.drop-zone:hover,
.drop-zone.dragging,
.drop-zone:focus {
  border-color:rgba(135,198,255,.62);
  background:
    radial-gradient(circle at 50% 20%,rgba(78,150,222,.14),transparent 43%),
    rgba(255,255,255,.032);
}

.upload-symbol {
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border:1px solid rgba(161,207,250,.22);
  border-radius:16px;
  color:#c6e2fb;
  background:rgba(105,170,232,.08);
  font-size:28px;
  font-weight:300;
}

.drop-zone h2 {
  margin:0;
  font-size:23px;
}

.drop-zone p {
  margin:10px 0 0;
  color:#9db1c5;
  font-size:13px;
}

.drop-zone small {
  margin-top:16px;
  color:#667c92;
  font-size:10px;
}

.selected-file {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:10px;
  padding:14px 17px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.selected-file div {
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.selected-file span {
  color:#778ca1;
  font-size:10px;
}

.selected-file strong {
  overflow:hidden;
  color:#e1edf9;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.selected-file small {
  color:#7b90a5;
  font-size:10px;
}

.selected-file button {
  flex:0 0 auto;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  color:#b9cce0;
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

.parse-button {
  width:100%;
  margin-top:10px;
  padding:13px;
  border:0;
  border-radius:13px;
  color:#07101f;
  background:#e6f3ff;
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:650;
}

.progress-card {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:10px;
  padding:18px;
  border:1px solid rgba(111,177,241,.17);
  border-radius:14px;
  background:rgba(65,134,202,.06);
}

.progress-card strong {
  font-size:13px;
}

.progress-card p {
  margin:4px 0 0;
  color:#8198ad;
  font-size:11px;
}

.spinner {
  width:23px;
  height:23px;
  border:2px solid rgba(255,255,255,.12);
  border-top-color:#9dcdf8;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

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

.error-message {
  margin-top:10px;
  padding:14px 16px;
  border:1px solid rgba(223,92,92,.2);
  border-radius:12px;
  color:#efa2a2;
  background:rgba(193,55,55,.06);
  font-size:12px;
}

.result-section {
  margin-top:18px;
}

.result-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px 17px 0 0;
  background:rgba(255,255,255,.035);
}

.result-head h2 {
  margin:0;
  font-size:25px;
}

.result-meta {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:10px;
  color:#7e93a8;
  font-size:10px;
}

.result-meta strong {
  margin-left:4px;
  color:#c7d8e9;
}

.result-actions {
  display:flex;
  gap:8px;
}

.download-button {
  color:#07101f;
  background:#e5f2ff;
}

.table-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 13px;
  border-left:1px solid rgba(255,255,255,.09);
  border-right:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.022);
}

.table-tools input {
  width:min(390px,60vw);
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  outline:none;
  color:#e7f1fb;
  background:rgba(4,11,21,.4);
}

.table-tools span {
  color:#74899f;
  font-size:10px;
}

.table-wrap {
  overflow:auto;
  max-height:540px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:0 0 17px 17px;
}

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

th {
  position:sticky;
  top:0;
  z-index:2;
  padding:11px 13px;
  color:#95abc0;
  background:#0d1a2a;
  border-bottom:1px solid rgba(255,255,255,.09);
  text-align:left;
  font-size:10px;
  font-weight:600;
}

td {
  padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:#c9d8e7;
  font-size:12px;
}

tbody tr:hover {
  background:rgba(119,180,238,.035);
}

.status-unfinished {
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  color:#eda5a5;
  background:rgba(196,72,72,.08);
  font-size:10px;
}

.no-results {
  padding:30px;
  text-align:center;
  color:#8297aa;
}

.notice-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:15px;
  padding:20px;
  border:1px solid rgba(222,173,74,.18);
  border-radius:15px;
  background:rgba(187,133,30,.05);
}

.notice-card p {
  margin:5px 0 0;
  color:#879aad;
}

.notice-card a {
  padding:9px 13px;
  border-radius:9px;
  color:#07101f;
  background:#e5f2ff;
}

.hidden {
  display:none !important;
}

@media(max-width:760px) {
  .materials-topbar {
    padding:0 17px;
  }

  .materials-topbar nav {
    display:none;
  }

  .materials-heading,
  .result-head {
    align-items:flex-start;
    flex-direction:column;
  }

  .result-actions {
    width:100%;
  }

  .result-actions > * {
    flex:1;
  }

  .drop-zone {
    min-height:230px;
    padding:25px 18px;
    text-align:center;
  }

  .selected-file div {
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
}

/* Completion state: text + background only, no dots/icons */
.status-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:66px;
  padding:5px 10px;
  border-radius:7px;
  font-size:10px;
  line-height:1.2;
}

.status-box::before,
.status-unfinished::before,
.status-progress::before,
.status-complete::before {
  content:none !important;
  display:none !important;
}

.status-unfinished {
  color:#e9b0b0;
  background:#5a2d32;
}

.status-progress {
  color:#ead7a1;
  background:#594c27;
}

.status-complete {
  color:#adddbc;
  background:#28503a;
}


.project-name-box {
  margin-bottom:10px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.project-name-box label {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.project-name-box label > span {
  color:#b8c9da;
  font-size:12px;
  font-weight:600;
}

.project-name-box label > span strong {
  color:#e6a0a0;
}

.project-name-box input {
  width:100%;
  box-sizing:border-box;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  outline:none;
  color:#edf5ff;
  background:rgba(3,10,20,.38);
  font:inherit;
  font-size:13px;
}

.project-name-box input:focus {
  border-color:rgba(121,190,255,.5);
}

.project-name-box small {
  color:#71859a;
  font-size:10px;
}

.tencent-button {
  color:#d8f0e3;
  border-color:rgba(77,187,126,.25);
  background:rgba(53,158,99,.1);
}

.tencent-button:disabled {
  cursor:wait;
  opacity:.65;
}