/* Printmedi — proof-sheet theme
   Signature: registration/crop marks + CMYK spine on clean paper. */

:root {
  --paper:    #f6f7f8;
  --card:     #ffffff;
  --ink:      #16181d;
  --ink-soft: #565b66;
  --line:     #dcdfe4;
  --line-2:   #eceef1;

  --cyan:     #00a6d6;
  --magenta:  #e5007e;
  --yellow:   #ffce1f;
  --key:      #16181d;

  --accent:   var(--cyan);
  --focus:    var(--magenta);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 10px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  /* faint halftone dot field */
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---- app layout: left sidebar + main sheet ---- */
.layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  max-width: 1040px;
  margin: 0 auto;
}

.sidebar {
  flex: 0 0 248px;
  width: 248px;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  min-height: 100vh;
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.brand-text { min-width: 0; }
.brand-logo-link { display: inline-flex; flex: 0 0 auto; }
.brand-logo { display: block; width: 40px; height: 40px; }

.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.side-link:hover { background: var(--paper); color: var(--ink); }
.side-link.is-active {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  font-weight: 600;
}
.side-link .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.side-link .dot.c { background: var(--cyan); }
.side-link .dot.m { background: var(--magenta); }
.side-link .dot.y { background: var(--yellow); }
.side-link .dot.k { background: var(--key); }
.side-link-root { color:var(--ink); font-weight:700; margin-bottom:3px; }
.side-subnav { display:flex; flex-direction:column; gap:2px; margin-left:10px; padding-left:10px; border-left:1px solid var(--line); }
.side-subnav .side-link { padding:9px 10px; font-size:12px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filter-chip {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--card);
}
.filter-chip:hover { border-color: var(--accent); color: var(--ink); }
.filter-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.badge-dev {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
}

.side-foot { margin-top: auto; padding-top: 18px; }
.user-chip { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); flex: 0 0 auto; }
.avatar-blank { background: var(--line-2); display: inline-block; }
.user-meta { min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mail { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-form { margin: 0; }
.logout-btn {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
}
.logout-btn:hover { color: var(--ink); border-color: var(--ink); }

/* ---- sheet / card ---- */
.sheet {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 28px 22px 40px;
}

/* registration marks in the four corners */
.reg {
  position: absolute;
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  opacity: .55;
  pointer-events: none;
}
.reg circle { stroke-width: 1; }
.reg-tl { top: 8px;  left: 8px; }
.reg-tr { top: 8px;  right: 8px; }
.reg-bl { bottom: 8px; left: 8px; }
.reg-br { bottom: 8px; right: 8px; }

/* ---- masthead ---- */
.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.cmyk-spine { display: flex; flex-direction: column; width: 8px; height: 42px; border-radius: 2px; overflow: hidden; flex: 0 0 auto; }
.cmyk-spine span { flex: 1; }
.cmyk-spine span:nth-child(1) { background: var(--cyan); }
.cmyk-spine span:nth-child(2) { background: var(--magenta); }
.cmyk-spine span:nth-child(3) { background: var(--yellow); }
.cmyk-spine span:nth-child(4) { background: var(--key); }

.masthead-text { flex: 1 1 auto; min-width: 0; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wordmark {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
}

.nav { display: flex; gap: 6px; flex: 0 0 auto; }
.nav-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.nav-link.is-active { color: var(--ink); border-color: var(--ink); }

/* ---- intro ---- */
.intro { margin-bottom: 24px; }
.intro h1, .confirm h1 {
  font-size: 25px;
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.lede { color: var(--ink-soft); margin: 0; font-size: 15px; }

/* ---- form blocks ---- */
.block { margin: 0 0 26px; }
.block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.block-head h2 { font-size: 14px; margin: 0; letter-spacing: .02em; }
.plate {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--key);
  width: 26px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.plate.c { background: var(--cyan); }
.plate.m { background: var(--magenta); }
.plate.y { background: var(--yellow); color: var(--ink); }
.plate.k { background: var(--key); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-2 > * { min-width:0; }
.label-axis-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.label-axis-group { min-width:0; border:1px solid var(--line-2); border-radius:9px; padding:14px; background:#fefefe; }
.label-axis-group h3 { margin:0 0 2px; font-size:13px; }
.label-axis-group > .field-note { margin-bottom:10px; }
.label-axis-flow { display:flex; flex-direction:column; }
.label-axis-flow > * { min-width:0; }
.label-axis-flow > .field,
.label-axis-flow .stage-row { min-height:58px; margin:0; padding:9px 0; border-bottom:1px solid var(--line-2); }
.label-axis-flow > :last-child { border-bottom:0; }
.label-axis-flow > .field { display:grid; grid-template-columns:minmax(190px,.3fr) minmax(0,1fr); gap:10px; align-items:center; }
.label-axis-flow > .field .field-label { margin:0; font-family:var(--sans); font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink); }
.label-axis-flow > .field input { width:160px; }
.label-axis-flow .stage-row { grid-template-columns:minmax(190px,.3fr) minmax(0,1fr); align-items:center; }
.label-axis-flow .stage-ctrl { width:100%; margin:0; justify-content:flex-start; flex-wrap:nowrap; }
.label-axis-flow .label-opt-controls select,
.label-axis-flow .label-opt-controls > input { width:160px !important; }

.field { display: block; margin-bottom: 14px; }
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.req { color: var(--magenta); }
.hint { text-transform: none; letter-spacing: 0; opacity: .8; }

input[type="text"], input[type="number"], input[type="time"], input[type="datetime-local"], select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  min-height: 46px;
  appearance: none;
  -webkit-appearance: none;
}
textarea { min-height: auto; resize: vertical; line-height: 1.45; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23565b66' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 9px;
  padding: 7px 30px 7px 10px;
  min-height: 38px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(229, 0, 126, .14);
  background: var(--card);
}

/* ---- dropzone ---- */
.dropzone {
  display: block;
  position: relative;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  padding: 26px 16px;
}
.dz-icon { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.4; }
.dz-text { font-size: 14px; }
.dz-hint { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .03em; }
.dropzone.drag, .dropzone.has-files { border-color: var(--accent); background: #f0fbff; }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thumb {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper);
}

/* ---- managed image uploader ---- */
.image-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.img-card {
  display: flex; gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  background: var(--card);
}
.img-thumb {
  width: 88px; height: 88px; object-fit: cover; flex: 0 0 auto;
  border-radius: 8px; border: 1px solid var(--line); background: var(--paper);
}
.img-body { flex: 1 1 auto; min-width: 0; }
.img-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.img-name { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-remove { border: none; background: none; color: var(--ink-soft); font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.img-remove:hover { color: var(--magenta); background: var(--paper); }
.img-status { display: inline-block; font-family: var(--mono); font-size: 11px; margin: 6px 0; }
.img-status.idle { color: var(--ink-soft); }
.img-status.processing { color: var(--magenta); }
.img-status.done { color: #0a7d3c; }
.img-status.error { color: #b3261e; }
.img-actions { margin-top: 8px; }
.ai-extract { margin: 8px 0 4px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ai-chip {
  font-family: var(--mono); font-size: 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 7px; color: var(--ink-soft);
}
.extract-btn:disabled, .submit:disabled, .img-remove:disabled { opacity: .5; cursor: not-allowed; }
.img-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- per-image info edit panel ---- */
.info-panel {
  margin: 10px 0 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.ip-field { display: block; margin-bottom: 10px; }
.ip-field > span {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;
}
.ip-field input, .ip-field select, .ip-field textarea {
  width: 100%; font-size: 14px; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
}
.ip-field textarea { min-height: auto; }
.ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ip-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 4px; }
.ip-check input { width: auto; min-height: 0; }

.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 6px 3px 8px;
}
.tag-chip button { border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: 11px; padding: 0; line-height: 1; }
.tag-chip button:hover { color: var(--magenta); }
.tag-add { display: inline-flex; gap: 6px; align-items: center; }
.tag-add input { font-size: 13px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.tag-add .btn-sm { padding: 6px 12px; }

@media (max-width: 520px) {
  .ip-grid { grid-template-columns: 1fr; }
}

/* ---- actions ---- */
.actions { margin-top: 28px; }
.submit {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 10px;
  padding: 15px 18px;
  cursor: pointer;
  text-decoration: none;
  /* CMYK underline accent */
  box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0);
  background-image: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: bottom;
}
.submit:hover { background-color: #000; }
.submit:active { transform: translateY(1px); }
.submit-secondary {
  background-color: var(--card);
  color: var(--ink);
  border: 1px solid var(--ink);
  margin-top: 22px;
}
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; }
.actions-row .submit { width: auto; flex: 1 1 0; }
.submit-ghost {
  background-color: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  background-image: none;
  flex: 0 1 auto;
}
.submit-ghost:hover { background-color: var(--paper); border-color: var(--ink); }
.actions-note { font-size: 13px; color: var(--ink-soft); margin: 12px 2px 0; text-align: center; }

/* ---- user-area sub navigation ---- */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.subnav-link {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subnav-link:hover { color: var(--ink); }
.subnav-link.is-active { color: var(--ink); border-bottom-color: var(--magenta); font-weight: 700; }

/* ---- confirmation ---- */
.confirm { text-align: left; }
.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #0a7d3c;
  border: 1.5px solid #0a7d3c;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 18px;
  transform: rotate(-1.5deg);
}
.stamp svg { width: 15px; height: 15px; fill: none; stroke: #0a7d3c; stroke-width: 2.2; }
.case-id { font-family: var(--mono); font-size: 13px; background: var(--paper); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; }

.summary { margin: 22px 0 0; border-top: 1px solid var(--line); }
.summary > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.summary dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.summary dd { margin: 0; }

/* ---- colophon ---- */
.colophon {
  display: flex; align-items: center; gap: 7px;
  margin-top: 36px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-soft);
}
.reg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* Exact CMYK colors taken from the logo (static/logo.svg). */
.reg-dot.c { background: #00FFFF; }
.reg-dot.m { background: #FF00FF; }
.reg-dot.y { background: #FFFF00; }
.reg-dot.k { background: #000000; }
.colophon span:last-child { margin-left: 4px; }

/* ---- responsive ---- */
@media (max-width: 520px) {
  .sheet { padding: 20px 14px 32px; border-left: none; border-right: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .label-axis-flow > .field,
  .label-axis-flow .stage-row { grid-template-columns:1fr; align-items:start; }
  .label-axis-flow .stage-ctrl { flex-wrap:wrap; }
  .masthead { flex-wrap: wrap; }
  .nav { width: 100%; }
  .reg { width: 20px; height: 20px; }
  .summary > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- status badges ---- */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.badge.pending  { color: #8a6d00; border-color: #e6c34d; background: #fff8e1; }
.badge.approved { color: #0a7d3c; border-color: #7bcfa0; background: #ecf9f1; }
.badge.rejected { color: #b3261e; border-color: #e7a39e; background: #fdeceb; }
.badge.draft    { color: #565b66; border-color: #d2d6dc; background: #f1f3f5; }
.badge.admin     { color: #b3261e; border-color: #e7a39e; background: #fdeceb; }
.badge.moderator { color: #0a4f8a; border-color: #8fb9e0; background: #eaf3fc; }
.badge.basic     { color: #565b66; border-color: #d2d6dc; background: #f1f3f5; }

/* ---- member management ---- */
.member-search { display: flex; gap: 8px; flex-wrap: wrap; }
.member-search input { flex: 1 1 240px; }
.member-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.member-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 14px; background: var(--card);
}
.member-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.member-name { font-weight: 600; }
.member-mail { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.member-actions form { margin: 0; }
.muted { font-size: 12px; color: var(--ink-soft); }

/* ---- case cards (review + my submissions) ---- */
.case-list { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.case-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  background: var(--card);
}
.case-card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.case-card .card-id { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.case-card h3 { font-size: 15px; margin: 0 0 6px; }
.case-card .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }
.case-card .sym { font-size: 14px; margin: 0 0 10px; }
.case-card .ai-desc { font-size: 13px; color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: 10px; margin: 8px 0; }
.reject-note { font-size: 13px; color: #b3261e; background: #fdeceb; border: 1px solid #e7a39e; border-radius: 7px; padding: 8px 10px; margin: 8px 0; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-sm {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  border-radius: 7px; padding: 8px 14px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--ink); color: var(--ink); background: var(--card);
}
.btn-sm.approve { background: #0a7d3c; border-color: #0a7d3c; color: #fff; }
.btn-sm.reject  { background: var(--card); border-color: #b3261e; color: #b3261e; }
.btn-sm:hover { filter: brightness(.96); }
.reject-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.reject-form input { flex: 1 1 200px; min-height: 40px; }
.section-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 26px 0 4px; }
.empty { color: var(--ink-soft); font-size: 14px; padding: 14px 0; }

/* ---- login page ---- */
.login-wrap { max-width: 420px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.login-wrap .cmyk-spine { width: 10px; height: 52px; margin: 0 auto 22px; }
.login-logo { display: block; width: 72px; height: 72px; margin: 0 auto 18px; }
.login-wrap h1 { font-size: 26px; margin: 0 0 8px; }
.login-wrap .lede { margin: 0 0 28px; }
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 18px; text-decoration: none; cursor: pointer;
}
.gbtn:hover { border-color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.gbtn svg { width: 20px; height: 20px; }

/* ---- in-app browser warning (Zalo/Messenger/... block Google OAuth) ---- */
.inapp-warning {
  text-align: left;
  background: #fff8e1; border: 1px solid #f0d27a; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 18px; font-size: 14px; line-height: 1.5;
}
.inapp-warning p { margin: 0 0 8px; }
.inapp-warning .gbtn { margin-top: 8px; }
.inapp-warning .copy-btn { background: var(--card); }

/* ---- responsive: sidebar → top bar ---- */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar {
    flex: none; width: 100%; min-height: 0;
    position: static;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 16px 14px;
  }
  .brand { margin-bottom: 14px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .side-link { padding: 9px 11px; }
  .side-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .user-chip { margin-bottom: 0; }
  .logout-form { flex: 0 0 auto; }
  .sheet { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================= */
/*  PrintMedi Engine — bổ sung cho màn tính toán in ấn           */
/* ============================================================= */

.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; }
.toolbar .spacer { flex:1 1 auto; }

/* nút nhỏ dạng mono */
.ebtn {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing:.03em; cursor:pointer; text-decoration:none;
  border:1px solid var(--ink); color:var(--ink); background:var(--card);
  border-radius:8px; padding:9px 14px; display:inline-flex; align-items:center; gap:7px;
}
.ebtn:hover { background:var(--paper); }
.ebtn.primary { background:var(--ink); color:#fff; }
.ebtn.primary:hover { background:#000; }
.ebtn.accent { border-color:var(--magenta); color:var(--magenta); }
.ebtn.accent:hover { background:#fdeef6; }
.ebtn:disabled { opacity:.5; cursor:not-allowed; }
.ebtn.sm { padding:6px 10px; font-size:11px; }

/* toggle segmented (cost/time, auto/manual) */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button {
  font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  background:var(--card); color:var(--ink-soft); border:none; padding:7px 12px; cursor:pointer;
}
.seg button.on { background:var(--ink); color:#fff; }

/* field with unit suffix */
.field .unit { text-transform:none; letter-spacing:0; color:var(--ink-soft); font-weight:400; }
.field-row { display:flex; gap:8px; align-items:center; }
.field-row input, .field-row select { flex:1 1 auto; }
.field-note { font-size:11px; color:var(--ink-soft); margin-top:4px; font-family:var(--mono); }
.config-field { min-width:0; }
.config-field .field { margin-bottom:0; }
.config-help { margin:6px 0 14px; border:1px solid var(--line-2); border-radius:7px; background:var(--paper); font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.config-help summary { cursor:pointer; padding:7px 10px; user-select:none; color:var(--ink); list-style:none; }
.config-help summary::-webkit-details-marker { display:none; }
.config-help summary::before { content:'＋'; display:inline-block; width:17px; color:var(--ink-soft); }
.config-help[open] summary::before { content:'−'; }
.config-help .help-less,.config-help[open] .help-more { display:none; }
.config-help[open] .help-less { display:inline; }
.config-help-body { padding:0 10px 10px 27px; line-height:1.55; max-width:72ch; }

/* stage manual override row */
.stage-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line-2); }
.stage-name { font-size:13px; }
.stage-name small { display:block; font-family:var(--mono); font-size:10px; color:var(--ink-soft); }
.stage-ctrl { display:flex; gap:8px; align-items:center; }
.stage-ctrl input { width:110px; min-height:38px; font-size:14px; }

/* Packaging mode switches: one clear control per decision, with the value field on the right. */
.pack-control-stack { display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; }
.pack-mode-toggle {
  display:flex; flex-direction:column; gap:5px; flex:0 0 auto;
}
.pack-mode-toggle.two { width:58px; }
.pack-mode-toggle.three { width:84px; }
.pack-toggle-track {
  position:relative; height:24px; border:1px solid var(--line); border-radius:999px;
  background:#e4e8ed; box-shadow:inset 0 1px 2px rgba(20,24,32,.08);
}
.pack-toggle-track button {
  position:absolute; z-index:2; top:0; bottom:0; border:0; padding:0;
  background:transparent; cursor:pointer;
}
.pack-toggle-track button::before {
  content:''; position:absolute; left:50%; top:50%; width:10px; height:10px;
  border-radius:50%; background:#aab2bc; opacity:.62;
  transform:translate(-50%,-50%);
}
.pack-toggle-track button[aria-pressed="true"]::before { opacity:0; }
.pack-toggle-track button::after {
  content:attr(data-label); position:absolute; z-index:10; left:50%; bottom:calc(100% + 7px);
  transform:translateX(-50%); padding:7px 10px; border-radius:7px;
  background:var(--ink); color:#fff; box-shadow:0 4px 12px rgba(20,24,32,.22);
  font-family:var(--mono); font-size:12px; font-weight:700; line-height:1.25;
  white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none;
}
.pack-toggle-track button:hover::after,
.pack-toggle-track button:focus-visible::after { opacity:1; visibility:visible; }
.pack-toggle-thumb {
  position:absolute; z-index:3; pointer-events:none; top:2px; left:var(--pack-toggle-left,3px);
  width:18px; height:18px; border-radius:50%; background:var(--cyan);
  box-shadow:0 1px 4px rgba(20,24,32,.25);
  transition:left .2s ease;
}
.pack-toggle-labels {
  display:block; color:var(--ink-soft); font-family:var(--mono);
  font-size:8px; line-height:1.2; text-align:center;
}
.pack-toggle-labels span { display:none; }
.pack-toggle-labels span.on { display:block; color:var(--ink); font-weight:700; }
.pack-toggle-track button:focus-visible {
  outline:2px solid var(--cyan); outline-offset:2px; border-radius:999px;
}
.pack-box-controls input:disabled,
.pack-sheet-controls select:disabled { background:var(--paper); color:var(--ink-soft); cursor:not-allowed; }
.pack-sheet-controls,.pack-box-controls { justify-content:flex-start; }
.pack-sheet-controls { flex-wrap:nowrap; width:100%; }
.pack-sheet-controls .pack-sheet-picker { width:150px !important; min-width:0; }
.pack-sheet-controls .pack-sheet-size { width:76px !important; min-width:0; }
.pack-sheet-size[readonly] { background:var(--paper); color:var(--ink); }
.pack-sheet-times { color:var(--ink-soft); font-family:var(--mono); }
.pack-setting-row { grid-template-columns:minmax(190px,.3fr) minmax(0,1fr); align-items:center; }

@media (max-width: 900px) {
  .pack-setting-row { grid-template-columns:1fr; align-items:start; }
  .pack-control-stack { align-items:stretch; }
  .pack-sheet-controls,.pack-box-controls { justify-content:flex-start; }
  .pack-mode-toggle.three { width:84px; }
}

@media (max-width: 620px) {
  .pack-mode-toggle.two { width:58px; }
  .pack-mode-toggle.three { width:84px; }
  .pack-sheet-controls { flex-wrap:wrap; }
  .pack-box-controls input { width:100% !important; }
  .pack-sheet-picker { width:100% !important; }
}

/* result cards */
.result-head { display:flex; flex-wrap:wrap; gap:14px; margin:6px 0 20px; }
.stat {
  flex:1 1 150px; border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; background:var(--card); position:relative;
}
.stat .k { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.stat .v { font-size:22px; font-weight:700; margin-top:6px; letter-spacing:-.01em; }
.stat .u { font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-left:4px; font-weight:400; }
.stat.cost .v { color:var(--ink); }
.stat.time .v { color:var(--cyan); }

/* readiness banner */
.ready-banner { border-radius:var(--r); padding:12px 16px; margin:0 0 18px; font-size:14px; }
.ready-banner.ok  { background:#ecf9f1; border:1px solid #7bcfa0; color:#0a5e2e; }
.ready-banner.bad { background:#fff8e1; border:1px solid #e6c34d; color:#8a6d00; }
.ready-banner ul { margin:8px 0 0; padding-left:20px; }

/* data table */
.dtable { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
.dtable th, .dtable td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-2); }
.dtable th { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.dtable td.num { text-align:right; font-variant-numeric:tabular-nums; }
.dtable tr.win { background:#ecf9f1; }
.dtable tr.bad td { color:var(--ink-soft); }
.dtable .tag { font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:4px; border:1px solid var(--line); }
.table-wrap { overflow-x:auto; }

/* collapsible */
details.sec { border:1px solid var(--line); border-radius:var(--r); padding:0 14px; margin-bottom:12px; background:var(--card); }
details.sec > summary { cursor:pointer; padding:12px 0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; font-weight:600; }
details.sec[open] > summary { border-bottom:1px dashed var(--line); margin-bottom:12px; }
.config-collapse > summary { display:flex; align-items:center; gap:9px; font-size:13px; }
.config-collapse > summary .plate { flex:0 0 auto; }
.config-collapse-body { padding-bottom:4px; }

/* list cards (orders / machines) */
.card-grid { display:flex; flex-direction:column; gap:12px; }
.lcard { border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--card);
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lcard .lc-main { min-width:0; }
.lcard .lc-title { font-weight:600; font-size:15px; }
.lcard .lc-sub { font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:3px; }
.lcard .lc-actions { display:flex; gap:6px; flex:0 0 auto; }

/* modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(20,22,28,.4); display:flex;
  align-items:flex-start; justify-content:center; padding:40px 16px; z-index:50; overflow:auto; }
.modal { background:var(--card); border-radius:14px; max-width:560px; width:100%; padding:22px;
  box-shadow:0 10px 40px rgba(0,0,0,.2); }
.modal h2 { margin:0 0 14px; font-size:18px; }
.modal .modal-list { display:flex; flex-direction:column; gap:8px; margin:0 0 16px; }
.modal .modal-list button { text-align:left; }
.sample-catalog { display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow:auto; padding-right:3px; }
.sample-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.sample-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.sample-copy strong { font-size:14px; }
.sample-copy span, .sample-copy small, .sample-origin span, .sample-origin small { color:var(--ink-soft); font-size:11px; }
.sample-copy small, .sample-origin small { font-family:var(--mono); }
.sample-card .ebtn { flex:0 0 auto; }
.sample-origin { display:flex; flex-direction:column; gap:4px; border-left:3px solid var(--cyan);
  background:var(--line-2); border-radius:0 var(--r) var(--r) 0; padding:10px 12px; margin-bottom:14px; }

.pill { display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); }
.pill.reviewed { color:#0a7d3c; border-color:#7bcfa0; background:#ecf9f1; }
.pill.provisional { color:#8a6d00; border-color:#e6c34d; background:#fff8e1; }

.hidden { display:none !important; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--magenta);
  border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:12px; padding:10px 16px; border-radius:8px; z-index:60; opacity:0;
  transition:opacity .2s; }
.toast.show { opacity:1; }

/* ---- production scheduler ---- */
.schedule-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.schedule-panel { border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:16px; }
.schedule-panel.full { grid-column:1 / -1; }
.schedule-panel .block-head { margin-bottom:12px; }
.schedule-orders { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.schedule-order { display:grid; grid-template-columns:auto 1fr minmax(170px, .7fr); gap:10px; align-items:center; border:1px solid var(--line-2); border-radius:8px; padding:10px; background:var(--paper); }
.schedule-order.selected { border-color:var(--cyan); background:#f0fbff; }
.schedule-order > input { width:17px; height:17px; }
.schedule-order-copy { min-width:0; }
.schedule-order-copy strong,.schedule-order-copy small { display:block; }
.schedule-order-copy small,.schedule-due-label span { font-family:var(--mono); font-size:10px; color:var(--ink-soft); margin-top:3px; }
.schedule-due-label input { display:block; width:100%; margin-top:3px; min-height:36px; font-size:12px; }
.schedule-choice-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.checkline { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line-2); border-radius:8px; padding:11px; margin:11px 0; cursor:pointer; }
.checkline input { width:17px; height:17px; margin-top:2px; }
.checkline span,.checkline small { display:block; }
.checkline small { color:var(--ink-soft); margin-top:3px; }
.field.compact { max-width:260px; }
.weekday-row { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.weekday-chip { cursor:pointer; }
.weekday-chip input { position:absolute; opacity:0; pointer-events:none; }
.weekday-chip span { display:block; min-width:42px; text-align:center; border:1px solid var(--line); border-radius:999px; padding:7px 10px; font-family:var(--mono); font-size:11px; }
.weekday-chip input:checked + span { background:var(--ink); border-color:var(--ink); color:white; }
.schedule-hours { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.schedule-shift { border:1px solid var(--line-2); border-radius:8px; padding:11px; background:var(--paper); }
.schedule-shift.is-disabled { opacity:.55; }
.schedule-shift-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.schedule-shift-head strong { font-size:13px; }
.schedule-shift-head .ip-check { margin:0; font-size:11px; }
.time-pair { display:flex; align-items:center; gap:8px; }
.time-pair input { flex:1 1 0; }
.time-pair b { color:var(--ink-soft); }
.blackout-row { display:grid; grid-template-columns:1.2fr auto 1.2fr 1fr 1fr auto; align-items:center; gap:7px; margin-bottom:8px; }
.blackout-row input,.blackout-row select { min-width:0; min-height:38px; font-size:12px; }
.blackout-row .arrow { color:var(--ink-soft); }
.schedule-actions { margin-top:18px; }
.schedule-result-head { margin:30px 0 14px; }
.schedule-result-head + .result-head .stat .v { font-size:16px; }
.gang-pill { color:#08785b; border-color:#57b89e; margin-left:6px; }
.gantt-legend { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 8px; }
.legend-chip { border:1px solid var(--line); border-radius:999px; padding:5px 9px; font-family:var(--mono); font-size:10px; background:var(--card); }
.legend-chip.cover { border-color:#42a985; box-shadow:inset 3px 0 #42a985; }.legend-chip.content { border-color:#4ca8c3; box-shadow:inset 3px 0 #4ca8c3; }
.gantt-scroll { overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:var(--r); background:var(--card); scrollbar-gutter:stable; }
.gantt-scroll::-webkit-scrollbar { height:12px; }.gantt-scroll::-webkit-scrollbar-track { background:var(--line-2); }.gantt-scroll::-webkit-scrollbar-thumb { background:#7d898f; border:3px solid var(--line-2); border-radius:999px; }
.gantt { min-width:100%; background:var(--card); padding:12px; overflow:visible; }
.gantt-axis { position:relative; height:34px; margin-left:175px; color:var(--ink-soft); font-family:var(--mono); font-size:9px; border-bottom:1px solid var(--line-2); }
.gantt-axis-tick { position:absolute; bottom:5px; transform:translateX(-50%); white-space:nowrap; }
.gantt-axis-tick.major { color:var(--ink); font-weight:700; }.gantt-axis-tick.edge-start { transform:none; }.gantt-axis-tick.edge-end { transform:translateX(-100%); }.gantt-bound { position:absolute; bottom:5px; }.gantt-bound.start { left:0; }.gantt-bound.end { right:0; }
.gantt-row { display:grid; grid-template-columns:165px 1fr; gap:10px; align-items:center; min-height:42px; border-bottom:1px solid var(--line-2); }
.gantt-row:last-child { border-bottom:none; }
.gantt-machine { position:sticky; left:0; z-index:4; align-self:stretch; display:flex; align-items:center; padding-right:8px; background:var(--card); font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gantt-lane { position:relative; height:28px; }
.gantt-gridline { position:absolute; top:0; bottom:0; width:1px; background:var(--line-2); pointer-events:none; }.gantt-gridline.major { background:#aab5ba; }
.gantt-bar { position:absolute; z-index:2; top:4px; height:20px; min-width:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#07141a; border-radius:4px; padding:3px 5px; font-family:var(--mono); font-size:9px; line-height:14px; }
.gantt-bar.c { background:#72e8f1; }.gantt-bar.m { background:#f3a3d0; }.gantt-bar.y { background:#f2dc63; }.gantt-bar.gang { background:#72d5af; outline:2px solid #167c60; }
.gantt-bar.part-print_cover:not(.gang) { box-shadow:inset 0 0 0 2px #167c60; }
.schedule-table-wrap { border:1px solid var(--line); border-radius:var(--r); margin-top:14px; }
.schedule-table { margin-top:0; min-width:920px; }

@media (max-width:900px) {
  .schedule-grid { grid-template-columns:1fr; }.schedule-panel.full { grid-column:auto; }
  .schedule-hours { grid-template-columns:1fr; }
  .blackout-row { grid-template-columns:1fr auto 1fr; }.blackout-row select,.blackout-row input[type=text] { grid-column:span 1; }
}
@media (max-width:620px) {
  .schedule-order { grid-template-columns:auto 1fr; }.schedule-due-label { grid-column:2; }
  .blackout-row { grid-template-columns:1fr; }.blackout-row .arrow { display:none; }
  .gantt-axis { margin-left:105px; }.gantt-row { grid-template-columns:95px 1fr; }
}

/* ---- catalog giấy: “Dùng cho” nhiều lựa chọn ---- */
.paper-use-checks { display:flex; flex-wrap:wrap; gap:6px 14px; }
.paper-use-checks .ip-check { margin-top:0; white-space:nowrap; }

/* ---- preview xếp hộp (Bao bì) ---- */
.modal.modal-preview { max-width:1040px; }
.pack-preview .pack-seg { display:flex; flex-wrap:wrap; gap:0; margin-bottom:14px; max-width:100%; }
.pack-preview .pack-seg button { border-right:1px solid var(--line); }
.pack-preview .pack-seg button:last-child { border-right:0; }
.pack-view { display:flex; flex-direction:column; gap:16px; }
.pack-svg { display:block; width:100%; max-height:58vh; background:var(--line-2); border-radius:10px; padding:10px; box-sizing:border-box; }
.pack-view .stats { margin:0; }

/* ===================================================== đăng nhập & tổ chức */
.session-bar { display:flex; flex-direction:column; gap:6px; margin-bottom:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.sess-scope { display:flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.sess-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.sess-dot.local { background:var(--ink-soft); }
.sess-dot.live { background:#0a7d3c; }
.org-select { width:100%; font-size:12px; padding:5px 6px; }
.sess-user { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; }
.sess-name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); font-weight:600; }
.sess-link { font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); }
.sess-link:hover { color:var(--magenta); border-color:var(--magenta); }
.only-logged-in { display:none; }
body.is-logged-in .only-logged-in { display:flex; }

.gbtn { display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.gmark { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:#fff; border:1px solid var(--line); font-weight:800; font-size:11px;
  color:#4285f4; font-family:var(--mono); }

.anon-note { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 18px;
  padding:12px 14px; border:1px solid #e6c34d; border-left:4px solid #e6c34d; background:#fff8e1;
  border-radius:0 var(--r) var(--r) 0; font-size:13px; line-height:1.5; }
.anon-note .ebtn { flex:0 0 auto; }

/* trạng thái đơn hàng */
.order-status { margin-bottom:16px; }
.ostatus-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ostatus-note { font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.pill.draft { color:var(--ink-soft); }
.pill.review { color:#8a4b00; border-color:#e6a34d; background:#fff3e0; }
.pill.warn { color:#8a6d00; border-color:#e6c34d; background:#fff8e1; }
.pill.note { color:#0b5e91; border-color:#7fb8dd; background:#eaf4fb; }
.pill.ok { color:#0a7d3c; border-color:#7bcfa0; background:#ecf9f1; }
.review-banner { margin-top:10px; padding:12px 14px; font-size:13px; line-height:1.55;
  border:1px solid #e6a34d; border-left:4px solid #e6a34d; background:#fff3e0;
  border-radius:0 var(--r) var(--r) 0; }

/* góp ý */
.cmt-list { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.cmt { border:1px solid var(--line); border-left:3px solid var(--cyan); border-radius:0 var(--r) var(--r) 0;
  padding:10px 12px; background:var(--paper); }
.cmt.is-done { border-left-color:#7bcfa0; opacity:.7; }
.cmt-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px; font-size:12px; }
.cmt-when { font-family:var(--mono); font-size:10px; color:var(--ink-soft); margin-left:auto; }
.cmt-text { font-size:13px; line-height:1.55; white-space:pre-wrap; }
.cmt-foot { display:flex; align-items:center; gap:12px; margin-top:8px; }
.cmt-foot .ip-check { margin:0; font-size:11px; }
.cmt-foot .ebtn { margin-left:auto; }
.cmt-new { display:flex; gap:8px; align-items:flex-start; }
.cmt-new textarea { flex:1 1 auto; }

/* trang tổ chức */
.invite-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.invite-row input[type=text] { flex:1 1 220px; }
.invite-row select { flex:0 0 140px; }
.role-select { font-size:12px; padding:4px 6px; }
.ebtn.ghost { color:var(--ink-soft); }
.ebtn.ghost:hover { color:var(--magenta); border-color:var(--magenta); }