:root {
  --ink: #171816;
  --muted: #6d7068;
  --line: #e5e2d9;
  --paper: #f7f5ef;
  --gold: #c99a35;
  --gold-deep: #8b6417;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 8% 5%, rgba(201,154,53,.12), transparent 23rem), var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}
[hidden] { display: none !important; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(420px, .95fr);
  background: #f5f3ed;
}
.login-brand-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(36px, 6vw, 76px);
  color: #fff;
  background: radial-gradient(circle at 18% 18%, rgba(213,171,77,.24), transparent 24rem), linear-gradient(145deg, #1b1c19, #292a25 62%, #151613);
  position: relative;
  overflow: hidden;
}
.login-brand-panel::after {
  content: "";
  position: absolute;
  right: -170px;
  bottom: -170px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(211,171,78,.28);
  transform: rotate(45deg);
}
.login-wordmark { width: min(330px, 70%); filter: brightness(1.45); position: relative; z-index: 1; }
.login-intro { max-width: 650px; position: relative; z-index: 1; }
.login-intro p { margin: 0 0 18px; color: #ddb75c; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.login-intro h1 { max-width: 620px; margin: 0; font-size: clamp(42px, 5.4vw, 74px); line-height: 1; letter-spacing: -.05em; }
.login-footnote { margin: 0; color: #aaa9a2; font-size: 12px; letter-spacing: .06em; position: relative; z-index: 1; }
.login-form-panel { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 34px; }
.login-card { width: min(470px, 100%); padding: clamp(32px, 5vw, 48px); border: 1px solid #dfddd5; border-radius: 24px; background: #fff; box-shadow: 0 22px 60px rgba(44,40,30,.1); }
.login-icon { width: 62px; height: 62px; object-fit: contain; border-radius: 13px; margin-bottom: 22px; }
.pilot-label { display: inline-block; margin: 0 0 20px; padding: 7px 10px; border: 1px solid #dcc078; border-radius: 999px; color: #75530f; background: #fff8e5; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.login-card h2 { margin: 0; font-size: clamp(31px, 4vw, 42px); letter-spacing: -.04em; }
.login-card-copy { margin: 15px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.microsoft-button { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid #242522; border-radius: 12px; color: #fff; background: #242522; text-decoration: none; font-size: 15px; font-weight: 700; transition: background .15s ease, transform .15s ease; }
.microsoft-button:hover { background: #0d0e0c; transform: translateY(-1px); }
.microsoft-mark { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.microsoft-mark i:nth-child(1) { background: #f25022; }
.microsoft-mark i:nth-child(2) { background: #7fba00; }
.microsoft-mark i:nth-child(3) { background: #00a4ef; }
.microsoft-mark i:nth-child(4) { background: #ffb900; }
.pilot-warning { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: #8a6a26; font-size: 11px; line-height: 1.5; }
.login-help { margin: 0; color: #7d7d77; font-size: 11px; }

.app-shell { min-height: 100vh; padding: 28px; }
.topbar { width: min(1120px, 100%); margin: 0 auto 24px; display: flex; align-items: center; justify-content: space-between; }
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-lockup > img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; }
.brand-wordmark { display: block; width: 185px; height: auto; }
.brand-lockup p { margin: 4px 0 0; color: var(--muted); font-size: 9px; letter-spacing: .23em; }
.top-actions { display: flex; align-items: center; gap: 13px; }
.admin-link { color: var(--gold-deep); font-size: 12px; font-weight: 700; text-decoration: none; }
.admin-link:hover { text-decoration: underline; }
.signout-link { color: #676960; font-size: 12px; text-decoration: none; }
.signout-link:hover { color: #181917; text-decoration: underline; }
.product-layout { width: min(920px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(41,37,27,.1); }
.product-content { padding: clamp(34px, 6vw, 64px); }
.product-heading { padding-bottom: 0; }
.section-label { margin: 0 0 20px; color: #9b6f17; font-size: 14px; font-weight: 800; letter-spacing: .14em; }
.section-label-spaced { margin-top: 30px; margin-bottom: 12px; }
.item-code-block, .item-name-block { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fbfaf7; }
.item-code-block { margin-bottom: 14px; }
.item-code-block span, .item-name-block span { color: #6f5a2b; font-size: 13px; font-weight: 700; }
.item-code-block span { display: block; margin-bottom: 9px; }
.item-code-block strong { color: var(--ink); font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .02em; }
.item-name-block span { display: block; margin-bottom: 9px; }
h1 { margin: 0; }
.item-name-block h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.015em; }
.details-grid, .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inventory-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.details-grid { margin-top: 0; }
.detail-card, .price-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fbfaf7; }
.detail-card p, .price-card p, .inventory-grid p { margin: 0 0 9px; color: #6f5a2b; font-size: 13px; font-weight: 700; }
.detail-card strong { font-size: clamp(18px, 2.4vw, 24px); }
.price-card { padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: #fbfaf7; }
.price-card strong { font-size: clamp(20px,3vw,28px); letter-spacing: -.035em; }
.inventory-grid article { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fbfaf7; }
.inventory-grid strong { font-size: 22px; }
.metric-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #30322e; font-size: 13px; font-weight: 800; }
.not-found { width: min(700px, 100%); margin: 90px auto; padding: 70px 30px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(41,37,27,.1); text-align: center; }
.not-found img { width: 66px; border-radius: 14px; }
.not-found p { margin: 24px 0 12px; color: var(--gold-deep); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.not-found h1 { font-size: clamp(34px, 7vw, 56px); }
.not-found span { display: block; margin-top: 16px; color: var(--muted); }

.admin-panel { width: min(760px, 100%); margin: 48px auto; padding: clamp(30px, 6vw, 58px); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(41,37,27,.1); }
.admin-panel h1 { max-width: 620px; font-size: clamp(36px, 6vw, 58px); }
.admin-intro { max-width: 650px; margin: 20px 0 32px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.file-drop { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border: 2px dashed #d8c9a4; border-radius: 20px; background: #fffaf0; text-align: center; cursor: pointer; }
.file-drop:hover { border-color: var(--gold); background: #fff7e4; }
.file-drop-title { color: var(--gold-deep); font-size: 18px; font-weight: 800; }
.file-drop span:last-of-type { color: var(--muted); font-size: 13px; }
.file-drop input { width: min(360px, 100%); margin-top: 8px; }
.primary-button { width: 100%; min-height: 56px; margin-top: 18px; border: 1px solid #242522; border-radius: 12px; color: #fff; background: #242522; font-size: 15px; font-weight: 800; cursor: pointer; }
.primary-button:hover:not(:disabled) { background: #0d0e0c; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.upload-status { margin-top: 18px; padding: 18px 20px; border: 1px solid #b8d8c3; border-radius: 14px; color: #265c39; background: #eff9f2; font-size: 14px; line-height: 1.5; }
.upload-status p { margin: 7px 0; }
.upload-status a { color: inherit; font-weight: 800; }
.upload-status.warning { border-color: #e3c879; color: #775612; background: #fff8e5; }
.upload-status.error { border-color: #e1aaa5; color: #8b2821; background: #fff1f0; }
.upload-status.working { border-color: #c9c6bc; color: #55564f; background: #f6f5f1; }

@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 38vh; padding: 30px; }
  .login-intro h1 { font-size: clamp(34px, 10vw, 48px); }
  .login-footnote { display: none; }
  .login-form-panel { min-height: 62vh; padding: 24px 18px 40px; }
  .login-card { padding: 28px 24px; }
  .app-shell { padding: 16px; }
  .topbar { align-items: flex-start; gap: 16px; }
  .brand-wordmark { width: 140px; }
  .brand-lockup > img { width: 42px; height: 42px; }
  .product-layout { border-radius: 20px; }
  .product-content { padding: 30px 22px; }
  .details-grid, .price-grid { grid-template-columns: 1fr; }
  .admin-panel { margin-top: 28px; }
}

@media (max-width: 430px) {
  .app-shell { padding: 14px; }
  .topbar { margin-bottom: 18px; }
  .brand-wordmark { width: 118px; }
  .brand-lockup > img { width: 38px; height: 38px; }
  .product-content { padding: 26px 18px; }
  .item-code-block { padding: 20px; }
}