:root {
  color-scheme: light;
  --ink: #1f2a44;
  --muted: #6b7890;
  --line: #dde3ee;
  --surface: #ffffff;
  --canvas: #f4f6fb;
  --brand: #5968e3;
  --brand-dark: #4b58ca;
  --brand-soft: #e9edff;
  --success: #13774c;
  --danger: #b42318;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }

.shell, .workspace { width: min(100% - 2rem, 860px); margin: 0 auto; }
.shell { min-height: 100vh; display: grid; align-content: center; gap: 1.5rem; padding: 2.6rem 0; }
.compact-shell { width: min(100% - 2rem, 500px); }
.workspace { padding: 2rem 0 3rem; }

body[data-page="login"] .shell { width: min(100% - 2rem, 500px); }

.topbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 3.8vw;
  background: #ffffff;
  border-bottom: 1px solid #e4eaf4;
}
.brand { color: inherit; display: inline-flex; align-items: center; gap: .65rem; font-weight: 780; text-decoration: none; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .75rem;
  color: #3745bf;
  background: var(--brand-soft);
  border: 1px solid #d6dcff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
}
.account { display: flex; align-items: center; gap: .9rem; font-size: .85rem; color: #4d5a74; }

.hero { max-width: 700px; }
body[data-page="login"] .hero { max-width: 470px; }
.workspace-hero { margin-bottom: 1.2rem; }
.eyebrow { margin: .3rem 0 .4rem; color: #4c5bd1; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h1, h2 { line-height: 1.16; letter-spacing: -.03em; }
h1 { margin: 0; font-size: clamp(1.9rem, 4.2vw, 2.4rem); }
h2 { margin: 0 0 .8rem; font-size: 1.25rem; }
.lede { margin: .68rem 0 0; color: var(--muted); font-size: .96rem; }

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgb(31 42 68 / 4%);
}
.login-card, .status-card { padding: clamp(1.4rem, 4vw, 1.9rem); }
.upload-card { padding: clamp(1.1rem, 2.8vw, 1.8rem); }
.status-card { text-align: center; }
.status-card .brand-mark { margin-bottom: 1.2rem; }

form { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; font-size: .83rem; font-weight: 700; color: #4f5c74; }
input, select {
  width: 100%;
  min-height: 2.9rem;
  padding: .68rem .8rem;
  border: 1px solid #ccd6e6;
  border-radius: .65rem;
  color: var(--ink);
  background: #fff;
}
input:focus, select:focus, button:focus-visible {
  outline: 3px solid #a2abf466;
  outline-offset: 1px;
  border-color: #9ca8d1;
}
button {
  min-height: 2.9rem;
  padding: .68rem 1rem;
  border: 1px solid var(--brand);
  border-radius: .65rem;
  color: white;
  background: var(--brand);
  cursor: pointer;
  font-weight: 760;
  transition: background .15s ease;
}
button:hover:not(:disabled) { background: var(--brand-dark); }
button:disabled { cursor: not-allowed; opacity: .55; }
.quiet-button {
  min-height: auto;
  padding: .25rem .35rem;
  border-radius: .5rem;
  background: transparent;
  border: 1px solid transparent;
  color: #5a6884;
  font-weight: 700;
}
.quiet-button:hover { color: #1f2a44; background: #eef2fa; border-color: #dde5f2; }
.login-card form { margin-bottom: .6rem; }
.hint { margin: 0; color: var(--muted); font-size: .81rem; }
.message { min-height: 1.4rem; margin: 0; color: #4d5b74; }
.message.success { color: var(--success); }
.message.error { color: var(--danger); }
.banner {
  border: 1px solid #dde7f6;
  border-radius: 10px;
  background: #f4f7fc;
  margin-bottom: 1rem;
  padding: .62rem .9rem;
}
.banner.success { border-color: #cdeedb; background: #effcf5; }
.banner.error { border-color: #fecaca; background: #fef2f2; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .72rem; }
legend { margin-bottom: .7rem; font-size: 1.1rem; font-weight: 780; }
.dropzone {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: .95rem 1rem;
  border: 1px dashed #b4c2d9;
  border-radius: .8rem;
  background: #fafcff;
  cursor: pointer;
}
.dropzone strong { color: #22314e; font-size: .9rem; }
.dropzone span { color: var(--muted); font-size: .8rem; font-weight: 500; }
.dropzone input { min-height: unset; padding: 0; border: 0; border-radius: 0; background: transparent; }
.upload-card { gap: 1.2rem; }
.file-rows { display: grid; gap: .85rem; }
.file-row {
  display: grid;
  gap: .75rem;
  padding: .92rem .98rem;
  border: 1px solid #e4eaf4;
  border-radius: .75rem;
  background: #fafcff;
}
.file-name { display: flex; align-items: baseline; gap: .45rem; min-width: 0; font-size: .88rem; font-weight: 730; overflow-wrap: anywhere; }
.file-name::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 2px;
  background: #6676eb;
  transform: translateY(-1px);
}
.file-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.file-fields label { font-size: .76rem; }

.ticket-input-row { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.ticket-input-row input { flex: 1 1 12rem; }
#validate-ticket {
  min-height: 2.9rem;
  flex: 0 0 auto;
  padding: 0 1.1rem;
  border-radius: .65rem;
  background: var(--brand-soft);
  color: #3040b6;
  border: 1px solid #ccd4ff;
}
#validate-ticket:hover:not(:disabled) { background: #dfe6ff; color: #2938ac; }
#validate-ticket:disabled { opacity: .55; cursor: default; }
.ticket-details {
  display: grid;
  gap: .55rem;
  margin: .35rem 0 0;
  border-radius: .8rem;
}
.ticket-detail {
  border: 1px solid #e5ebf4;
  border-radius: .75rem;
  background: #f8fafe;
  padding: .75rem .85rem;
}
.ticket-detail-label {
  color: #74839e;
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ticket-detail-value { display: block; font-size: .9rem; font-weight: 700; margin-top: .28rem; min-width: 0; overflow-wrap: anywhere; }
.ticket-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .16rem .58rem;
  border-radius: 1rem;
  background: #e7edf8;
  color: #334155;
  font-size: .75rem;
  font-weight: 750;
  text-transform: capitalize;
}
.ticket-status[data-status="open"], .ticket-status[data-status="new"] { background: #e7f0ff; color: #1d4ed8; }
.ticket-status[data-status="pending"], .ticket-status[data-status="hold"] { background: #fff4d8; color: #915f11; }
.ticket-status[data-status="solved"], .ticket-status[data-status="closed"] { background: #ddf9e8; color: var(--success); }
.cnn-cell { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.cnn-view { display: flex; align-items: center; gap: .45rem; min-width: 0; }
#ticket-detail-cnn[data-state="missing"] { color: var(--danger); }
#ticket-detail-cnn[data-state="set"] { color: var(--success); }
.cnn-validity {
  border-radius: 999px;
  cursor: help;
  display: inline-flex;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-left: .35rem;
  padding: .15rem .4rem;
  vertical-align: middle;
}
.cnn-validity.is-unvalidated { background: #fdf6e9; border: 1px solid #f0e0c0; color: #8a6316; }
.cnn-validity.is-validated { background: #eefaf3; border: 1px solid #d3ecdf; color: #15683f; }
.cnn-validity.is-unavailable { background: #fef4f3; border: 1px solid #f6d5d1; color: #a4342a; }
.cnn-error {
  color: #a4342a;
  flex: 1 1 100%;
  font-size: .8rem;
  font-weight: 500;
  margin: .35rem 0 0;
}
.cnn-cell { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.icon-button {
  min-height: 1.9rem;
  padding: .18rem .5rem;
  border: 1px solid #d4dceb;
  border-radius: 7px;
  background: #fff;
  color: #52617b;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.icon-button:hover { color: #1f2a44; border-color: #b9c6db; background: #f3f6fb; }
.cnn-edit { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cnn-edit input { min-width: 8rem; flex: 1 1 8rem; padding: .36rem .52rem; border: 1px solid #d6deeb; border-radius: 8px; }
.cnn-edit .quiet-button {
  border: 1px solid #d4dcff;
  color: #3444bd;
  background: #eff2ff;
  min-height: 1.95rem;
  padding: .2rem .6rem;
}
.cnn-edit .quiet-button:hover { color: #2535ad; background: #e4eaff; border-color: #c8d2ff; }
.ticket-ready {
  margin: .12rem 0 0;
  border: 1px solid #ccecd9;
  border-radius: 999px;
  background: #effcf5;
  color: var(--success);
  display: inline-flex;
  font-weight: 750;
  font-size: .76rem;
  padding: .2rem .56rem;
}

@media (max-width: 650px) {
  .shell { align-content: start; gap: 1.25rem; padding: 2rem 0; }
  h1 { font-size: 2.05rem; }
  .topbar { align-items: flex-start; padding: .8rem 1rem; }
  .account { align-items: flex-end; flex-direction: column; gap: .2rem; text-align: right; }
  .account span { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 560px) {
  .file-fields { grid-template-columns: 1fr; }
  .ticket-input-row input { flex: 1 1 100%; }
  #validate-ticket { flex: 1 1 100%; }
}