:root {
  font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;
  color:#17213a;
  background:#f3f5f9;
  font-size:16px;
  --blue:#3458eb;
  --muted:#728098;
  --line:#e4e9f1;
  --navy:#162039;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  outline-offset:4px;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
  opacity:.55;
}

a {
  color:var(--blue);
}

button {
  border:0;
  border-radius:8px;
  padding:11px 17px;
  font-weight:600;
  background:#eaf0ff;
  color:var(--blue);
}

button.primary {
  color:white;
  background:var(--blue);
}

button.secondary {
  color:#485671;
  background:white;
  border:1px solid var(--line);
}

button.ghost {
  background:transparent;
  color:var(--muted);
  padding:8px;
}

h1,h2,h3,p {
  margin-top:0;
}

h1 {
  font-size:1.8rem;
  letter-spacing:-.04em;
}

h2 {
  font-size:1.3rem;
}

h3 {
  font-size:1rem;
}

small,.muted {
  color:var(--muted);
}

label {
  display:block;
  font-size:.875rem;
  font-weight:600;
  margin-bottom:7px;
}

input,select,textarea {
  width:100%;
  color:#17213a;
  background:white;
  border:1px solid #d6dfec;
  border-radius:8px;
  padding:11px 12px;
  line-height:1.5;
}

input:focus,textarea:focus,select:focus {
  border-color:var(--blue);
  outline:3px solid #3458eb18;
}

textarea {
  resize:vertical;
  min-height:90px;
}

input[type=checkbox] {
  width:auto;
}

input[type=file] {
  padding:10px;
  background:#f8faff;
}

form {
  margin:0;
}

.field {
  margin-bottom:19px;
}

.field small {
  display:block;
  font-size:.8125rem;
  margin-top:6px;
}

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

.between {
  justify-content:space-between;
}

.stack {
  display:grid;
  gap:12px;
}

.grid-two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

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

.brand-mark {
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:var(--blue);
  width:42px;
  height:42px;
  color:#fff;
  border-radius:11px;
  font-size:1.3rem;
  font-weight:700;
}

.boot-screen {
  min-height:100vh;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:18px;
}

.auth-layout {
  display:grid;
  grid-template-columns:minmax(300px, .9fr) minmax(440px,1.1fr);
  min-height:100vh;
}

.auth-aside {
  background:var(--navy);
  color:white;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.auth-aside .brand-mark {
  background:#4569ff;
}

.auth-aside .muted {
  color:#a4b1cc;
}

.auth-aside h2 {
  font-size:2.15rem;
  line-height:1.5;
  max-width:420px;
  letter-spacing:.02em;
}

.auth-process {
  display:grid;
  gap:0;
  max-width:350px;
  margin:35px 0;
}

.auth-process div {
  padding:18px 0;
  border-top:1px solid #ffffff20;
  display:flex;
  justify-content:space-between;
  gap:24px;
}

.auth-process span {
  color:#99a8c5;
  font-size:.875rem;
}

.auth-panel {
  display:grid;
  align-content:center;
  justify-items:center;
  padding:40px;
}

.auth-card {
  width:100%;
  max-width:410px;
}

.eyebrow {
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:16px;
}

.auth-card h1 {
  margin-bottom:12px;
}

.auth-card>p {
  line-height:1.7;
  margin-bottom:28px;
  color:var(--muted);
}

.auth-card .primary {
  width:100%;
  margin-top:8px;
  padding:13px;
}

.form-error {
  color:#b33b48;
  background:#fff0f2;
  border:1px solid #ffdae0;
  padding:12px 14px;
  border-radius:8px;
  margin-bottom:17px;
  font-size:.875rem;
  line-height:1.6;
}

.form-error:empty {
  display:none;
}

.shell {
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  min-height:100vh;
}

.sidebar {
  padding:28px 20px;
  background:var(--navy);
  color:white;
  display:flex;
  flex-direction:column;
  gap:30px;
  position:sticky;
  top:0;
  height:100vh;
}

.sidebar .brand {
  font-size:1.05rem;
}

.sidebar .brand-mark {
  width:36px;
  height:36px;
  font-size:1.1rem;
}

.sidebar nav {
  display:grid;
  gap:7px;
}

.nav-button {
  background:transparent;
  color:#a8b6d0;
  text-align:left;
  font-weight:500;
  padding:13px 14px;
}

.nav-button.active {
  color:white;
  background:#ffffff13;
  border-left:3px solid #6482ff;
  border-radius:5px;
}

.sidebar-footer {
  margin-top:auto;
  padding:14px 8px;
  font-size:.8125rem;
  line-height:1.8;
  color:#899bbd;
}

.workspace {
  min-width:0;
}

.topbar {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:white;
  padding:0 40px;
  gap:15px;
}

.topbar-label {
  font-size:.875rem;
  color:var(--muted);
}

.user-button {
  padding:6px;
  background:transparent;
  color:#46526a;
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:500;
}

.avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  background:#ecf0ff;
  color:var(--blue);
  display:grid;
  place-items:center;
  font-size:.875rem;
  font-weight:700;
}

.page {
  padding:34px 40px 45px;
  max-width:1600px;
  margin:auto;
}

.page-heading {
  margin-bottom:26px;
}

.page-heading h1 {
  margin-bottom:7px;
}

.page-heading p {
  margin:0;
  font-size:.875rem;
  color:var(--muted);
}

.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:26px;
}

.stat {
  padding:21px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
}

.stat-label {
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:12px;
}

.stat-number {
  font-size:1.9rem;
  font-weight:650;
  line-height:1;
}

.stat small {
  font-size:.75rem;
  margin-left:9px;
  font-weight:400;
}

.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.panel-title {
  padding:22px 24px;
  border-bottom:1px solid var(--line);
}

.panel-title h2 {
  margin:0;
  font-size:1rem;
}

.table-wrap {
  overflow-x:auto;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
  text-align:left;
}

th {
  padding:14px 20px;
  color:#7a879b;
  background:#fafbfe;
  font-weight:500;
  white-space:nowrap;
  border-bottom:1px solid var(--line);
}

td {
  padding:20px;
  border-bottom:1px solid #edf0f5;
  vertical-align:middle;
}

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

td strong {
  display:block;
  font-weight:600;
  margin-bottom:5px;
}

td small {
  font-size:.75rem;
  display:block;
  line-height:1.6;
}

.clickable-row {
  cursor:pointer;
}

.clickable-row:hover {
  background:#f8faff;
}

.status {
  display:inline-flex;
  align-items:center;
  border-radius:5px;
  padding:5px 9px;
  font-size:.75rem;
  font-weight:600;
  white-space:nowrap;
}

.status.auto_selected {
  color:#237962;
  background:#e8f6f0;
}

.status.needs_review {
  color:#a57417;
  background:#fff5dc;
}

.status.no_match,.status.missing_logo {
  color:#a74c55;
  background:#fff0f1;
}

.empty-state {
  padding:65px 24px;
  text-align:center;
}

.empty-icon {
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:13px;
  background:#f0f3fb;
  color:#6b80b7;
  font-size:1.5rem;
}

.empty-state h3 {
  font-size:1.1rem;
  margin-bottom:8px;
}

.empty-state p {
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:22px;
}

.info-note {
  font-size:.8125rem;
  color:#8290a6;
  line-height:1.7;
  margin-top:18px;
}

.link-button {
  border:0;
  background:none;
  color:var(--blue);
  padding:4px;
  font-size:.875rem;
}

dialog {
  width:min(740px,calc(100vw - 32px));
  border:0;
  border-radius:15px;
  padding:0;
  max-height:90vh;
  color:#17213a;
  box-shadow:0 24px 100px #17213a44;
}

dialog::backdrop {
  background:#101a35aa;
  backdrop-filter:blur(3px);
}

.modal-head {
  padding:24px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.modal-head h2 {
  margin:0;
}

.modal-content {
  padding:26px 28px;
  max-height:calc(90vh - 87px);
  overflow:auto;
}

.modal-footer {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  padding-top:20px;
  margin-top:5px;
  border-top:1px solid var(--line);
}

.close-button {
  background:transparent;
  color:var(--muted);
  font-size:1.4rem;
  padding:0 6px;
}

.paste-block {
  padding:16px;
  background:#f5f7fc;
  border:1px solid var(--line);
  border-radius:9px;
  margin-bottom:23px;
}

.paste-block summary {
  cursor:pointer;
  font-size:.875rem;
  font-weight:600;
  color:#425576;
}

.paste-block textarea {
  margin:14px 0 10px;
  min-height:140px;
}

.upload-box {
  padding:19px;
  border:1px dashed #bdcbee;
  background:#f8faff;
  border-radius:9px;
}

.upload-box.dragging {
  border-color:var(--blue);
  background:#eef2ff;
}

.upload-box p {
  font-size:.875rem;
  font-weight:600;
  margin-bottom:7px;
}

.upload-box small {
  display:block;
  line-height:1.7;
  margin-bottom:12px;
}

.upload-list {
  font-size:.8125rem;
  color:var(--muted);
  margin-top:10px;
  line-height:1.8;
  overflow-wrap:anywhere;
}

.match-box {
  padding:15px 17px;
  border-radius:8px;
  background:#f5f7fc;
  font-size:.875rem;
  line-height:1.7;
  margin-top:16px;
}

.match-box strong {
  display:block;
}

.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:21px;
  margin-bottom:25px;
}

.detail-label {
  color:var(--muted);
  font-size:.8125rem;
  margin-bottom:6px;
}

.detail-value {
  font-size:.9375rem;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.detail-wide {
  grid-column:1/-1;
}

.attachments {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:14px 0 20px;
}

.attachment {
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
}

.attachment img {
  display:block;
  width:100%;
  height:145px;
  object-fit:contain;
  background:repeating-conic-gradient(#f5f7fa 0% 25%,#fff 0% 50%) 50%/16px 16px;
}

.attachment-info {
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.attachment-info span {
  font-size:.8125rem;
  overflow-wrap:anywhere;
}

.attachment-info small {
  display:block;
  font-size:.75rem;
  margin-top:4px;
}

.template-controls {
  background:#f5f7fc;
  border-radius:8px;
  padding:17px;
  margin:20px 0;
}

.template-controls label {
  font-size:.8125rem;
}

.template-controls .row {
  margin-top:13px;
}

.checkbox-label {
  font-weight:400;
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.6;
}

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

.user-actions button {
  font-size:.8125rem;
  padding:7px 10px;
}

#toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  background:#17213a;
  color:white;
  border-radius:10px;
  box-shadow:0 8px 30px #17213a25;
  padding:14px 22px;
  font-size:.875rem;
  z-index:5;
  max-width:90vw;
  line-height:1.6;
}

[hidden] {
  display:none!important;
}

@media(max-width:1050px) {
  .sidebar {
    padding:24px 14px;
  }
  .shell {
    grid-template-columns:190px minmax(0,1fr);
  }
  .page {
    padding:28px 24px;
  }
  .topbar {
    padding:0 24px;
  }
  .auth-aside {
    padding:35px;
  }
  .auth-aside h2 {
    font-size:1.8rem;
  }
}

@media(max-width:720px) {
  .auth-layout {
    grid-template-columns:1fr;
  }
  .auth-aside {
    padding:22px;
  }
  .auth-aside>div:not(:first-child),.auth-aside>small {
    display:none;
  }
  .auth-panel {
    padding:38px 24px;
  }
  .auth-card {
    max-width:440px;
  }
  .shell {
    grid-template-columns:1fr;
  }
  .sidebar {
    height:auto;
    position:static;
    padding:16px 20px;
    gap:14px;
  }
  .sidebar nav {
    display:flex;
  }
  .sidebar .sidebar-footer {
    display:none;
  }
  .sidebar .brand-mark {
    width:30px;
    height:30px;
  }
  .nav-button {
    padding:9px 12px;
    font-size:.875rem;
  }
  .topbar {
    height:66px;
    padding:0 20px;
  }
  .page {
    padding:25px 16px;
  }
  .page-heading {
    align-items:flex-start;
  }
  .page-heading h1 {
    font-size:1.5rem;
  }
  .page-heading .primary {
    padding:11px;
    font-size:.875rem;
  }
  .stats {
    gap:9px;
  }
  .stat {
    padding:16px 12px;
  }
  .stat-number {
    font-size:1.5rem;
  }
  .stat-label {
    font-size:.75rem;
  }
  .stat small {
    display:none;
  }
  .grid-two {
    grid-template-columns:1fr;
    gap:0;
  }
  .modal-head {
    padding:21px;
  }
  .modal-content {
    padding:22px;
  }
  .detail-grid {
    gap:18px;
  }
  .attachments {
    grid-template-columns:1fr;
  }
  td,th {
    padding:14px 16px;
  }
  .topbar-label {
    font-size:.8125rem;
  }
  .row.mobile-stack {
    align-items:stretch;
    flex-direction:column;
  }
  .user-name {
    max-width:90px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

.upload-box + .field {
  margin-top:20px;
}

.upload-list {
  white-space:pre-line;
}

.cdr-panel {
  margin-top:24px;
  padding:20px;
  border:1px solid #dce3ef;
  border-radius:12px;
  background:#f8faff;
}
.cdr-preview {
  display:block;
  width:100%;
  max-height:480px;
  object-fit:contain;
  margin:16px 0;
  background:white;
  border:1px solid #dce3ef;
}
.cdr-download { text-decoration:none; }
.cdr-panel h3 { margin:0; }
.cdr-panel form { margin-top:16px; }

.order-progress-cell {
  min-width:195px;
}
.order-progress-cell .status {
  margin-bottom:7px;
  white-space:normal;
  line-height:1.5;
}
.order-reason-cell {
  min-width:210px;
  max-width:310px;
  line-height:1.7;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  color:#60708a;
}
.processing-error { color:#b33b48; }
.order-quantity { white-space:nowrap; }
.status.processing { color:#3458eb; background:#edf1ff; }
.progress-time { margin-top:4px; }
.cdr-current-step { margin-top:12px; color:#60708a; font-size:.8125rem; line-height:1.7; }
.cdr-current-step small { display:block; }
.cdr-current-step p { margin:8px 0 0; }
.artwork-summary{margin:16px 0;padding:14px 16px;border:1px solid #dce5f0;border-radius:10px;background:#f8faff}
.artwork-summary h4{margin:0 0 8px}.artwork-summary p{margin:6px 0;overflow-wrap:anywhere}
.processed-logo-preview{display:block;max-width:100%;max-height:240px;margin:12px 0;border:1px solid #e3e8f0;border-radius:6px;background:#fff;object-fit:contain}
.artwork-editor:empty{display:none}
.artwork-editor{margin:18px 0;padding:18px;border:1px solid #c9d5ed;border-radius:12px;background:#fff}
.artwork-editor h4{margin:0;font-size:1rem}
.text-edit-row{margin:16px 0;padding:16px;border:1px solid #dce3ef;border-radius:10px;background:#f8faff}
.text-edit-row .field{margin-top:12px;margin-bottom:0}
.text-edit-row textarea{min-height:80px}
.text-style-controls{gap:16px;margin-top:16px;flex-wrap:wrap}
.text-style-controls select{flex:1;min-width:160px}
.text-font-sample{margin-top:14px;padding:14px;border:1px dashed #cbd5e5;border-radius:6px;background:white;white-space:pre-wrap;overflow-wrap:anywhere;max-height:150px;overflow:auto}
.text-font-sample:empty{display:none}
.text-editor-note{font-size:.8125rem;line-height:1.7;margin-top:16px}
.batch-order-row { margin:20px 0; padding:18px; border:1px solid #dce3ef; border-radius:12px; background:#f8faff; }
.batch-order-row h3 { margin:0 0 16px; }
.batch-share { display:flex; gap:10px; align-items:center; margin:16px 0; }
.batch-share input { width:auto; }
[hidden] { display:none !important; }
@media(max-width:600px){.artwork-editor{padding:12px}.text-edit-row{padding:12px}.text-style-controls{gap:10px}}