/* GalaxyDresser admin console components — GENERATED by tools/web/sync-design.mjs from design/components/admin.css.
 * Do not edit here. The console's own glue is web/admin/admin.css. */

/* ===== design/components/admin.css ===== */
/* GalaxyDresser — "Silver Night" · admin.css
 * Operator console only. Dense, quiet, no motion. Needs tokens.css + base.css.
 * Korean text never goes under 12px here either; 11px is for digits/codes in mono.
 */

.console { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; font-size: .875rem; line-height: 1.55; }
.adm-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s-5); padding: 18px 14px; background: rgb(5 5 6 / .94); border-right: 1px solid var(--line); }
.adm-rail .brand-word { font-size: .875rem; }     /* GD Logo is wide: the wordmark and the ADMIN tag share the 244px rail */
.adm-rail .brand-mark { width: 26px; height: 26px; }
.adm-rail .brand { gap: 8px; min-width: 0; }
.adm-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-tag { flex: none; font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); border: 1px solid var(--line-3); padding: 4px 6px; border-radius: 2px; }
.adm-nav { display: grid; gap: 1px; }
.adm-nav .group { padding: 14px 10px 6px; font: 600 .8125rem/1.3 var(--font-body); color: var(--silver-3); }
.adm-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--silver-2); text-decoration: none; border-radius: var(--r-sm); white-space: nowrap; }
.adm-nav a svg { width: 16px; height: 16px; opacity: .85; flex: none; }
.adm-nav a:hover { background: var(--night-3); color: var(--silver); }
.adm-nav a[aria-current="page"] { background: var(--night-3); color: var(--silver); box-shadow: inset 2px 0 0 var(--accent); }
.adm-nav .count { margin-left: auto; font: 600 var(--fs-micro)/1 var(--font-mono); color: var(--silver-3); }
.adm-nav .count--hot { color: var(--no); }
.adm-rail-foot { margin-top: auto; padding: 12px 10px; border-top: 1px dashed var(--line); font: 500 var(--fs-micro)/1.7 var(--font-mono); color: var(--silver-3); }
.adm-rail-foot .ok { color: var(--ok); }
.adm-main { min-width: 0; }
.adm-top { position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--s-4); padding: 12px clamp(16px, 2.4vw, 28px); background: rgb(10 11 13 / .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.adm-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 40px; background: var(--night-3); border: 1px solid var(--ctl); border-radius: var(--r-sm); }
.adm-search svg { width: 16px; height: 16px; color: var(--silver-3); flex: none; }
.adm-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 .875rem var(--font-body); color: var(--silver); }
.adm-search input::placeholder { color: var(--silver-3); opacity: 1; }
.adm-search input:focus-visible { box-shadow: none; outline: none; }
.adm-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(156 196 255 / .2); }
.adm-search kbd { font: 600 var(--fs-micro)/1 var(--font-mono); padding: 3px 6px; border: 1px solid var(--line-3); border-radius: 3px; color: var(--silver-3); }
.env { font: 700 var(--fs-micro)/1 var(--font-mono); letter-spacing: .16em; color: var(--warn); border: 1px solid var(--warn); padding: 5px 7px; border-radius: 2px; }
.adm-top .who { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: .8125rem; color: var(--silver-2); white-space: nowrap; }
.adm-top .who .avatar { width: 28px; height: 28px; }
.adm-body { padding: clamp(16px, 2.4vw, 28px); display: grid; gap: clamp(16px, 2vw, 24px); }
.adm-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); }
.adm-title h1 { font-size: 2rem; letter-spacing: -.02em; }
.adm-title .when { display: block; margin-bottom: 6px; font-size: .8125rem; color: var(--silver-3); }
.seg { display: inline-flex; border: 1px solid var(--ctl); border-radius: var(--r-sm); overflow: hidden; }
.seg a { padding: 8px 14px; font: 600 .8125rem/1 var(--font-body); color: var(--silver-2); text-decoration: none; }
.seg a + a { border-left: 1px solid var(--line-2); }
.seg a[aria-current="true"] { background: var(--silver); color: var(--night-1); }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kpi { position: relative; padding: 16px 18px 26px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi::after {     /* tape ticks along the bottom of the strip */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 40px) left bottom / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px) left bottom / 100% 5px no-repeat;
}
.kpi-name { font: 600 .8125rem/1.3 var(--font-body); color: var(--silver-3); }
.kpi-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.kpi-val b { font: var(--fw-num) 2.1rem/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi-val .delta { font: 600 .8125rem/1.2 var(--font-body); color: var(--ok); }
.kpi-val .delta--bad { color: var(--no); }
.spark { width: 100%; height: 26px; margin-top: 10px; }
.spark polyline { fill: none; stroke: var(--silver-2); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.spark .hot { stroke: var(--no); }

/* Left: the work (jobs, then webhooks). Right: the selected job and the reply queue. */
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(16px, 2vw, 24px); align-items: start; }
.adm-col { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; }
.panel { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font: 700 .9375rem/1.3 var(--font-body); letter-spacing: 0; }
.panel-head .meta { font-size: .8125rem; color: var(--silver-3); }
/* Horizontal scroll with edge shadows that appear only where there is more to see. */
.scroll-x {
  overflow-x: auto;
  background:
    linear-gradient(90deg, var(--night-2) 30%, rgb(17 19 22 / 0)) left / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--night-2) 30%, rgb(17 19 22 / 0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .65), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .65), transparent) right / 14px 100% no-repeat scroll;
}
.dtable { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.dtable th { position: sticky; top: 0; text-align: left; padding: 9px 12px; font: 600 .75rem/1.3 var(--font-body); color: var(--silver-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.dtable td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--silver-2); }
.dtable tbody tr:hover td { background: rgb(24 26 31 / .8); }
.dtable tr[aria-selected="true"] td { background: var(--night-4); color: var(--silver); }
.dtable tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.dtable .mono { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; }
.dtable .r { text-align: right; }
.dtable .strong { color: var(--silver); font-weight: 600; }
.dtable .chip { padding: 0 7px; font-size: .75rem; }
.panel-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: .8125rem; color: var(--silver-3); }
.panel-foot .link-arrow { font-size: .8125rem; color: var(--silver-2); }

.job-tag { position: relative; padding: 46px 22px 20px; clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%, 0 36px);
  -webkit-mask: radial-gradient(circle 6px at 50% 22px, #0000 96%, #000 100%); mask: radial-gradient(circle 6px at 50% 22px, #0000 96%, #000 100%); }
.job-tag::after { content: ""; position: absolute; left: 50%; top: 22px; width: 20px; height: 20px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, transparent 5.5px, #6B717C 6px, #E6E9EE 7.5px, #9AA1AD 9.5px, transparent 10px); }
.job-tag .job-id { font: 600 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .08em; color: var(--silver-3); }
.job-tag h3 { font-size: 1.0625rem; margin: 6px 0 12px; }
.kv { display: grid; grid-template-columns: 76px 1fr; gap: 6px 10px; font-size: .8125rem; margin: 0; }
.kv dt { font: 600 .8125rem/1.75 var(--font-body); color: var(--silver-3); }
.kv dd { margin: 0; color: var(--silver); font-weight: 500; word-break: break-all; }
.kv dd.mono { font-family: var(--font-mono); font-size: .75rem; }
.kv .refund { color: var(--warn); font-weight: 700; }
.job-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.log { font: 500 .75rem/1.6 var(--font-mono); }
.log li { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--silver-2); }
.log li:last-child { border-bottom: 0; }
.log time { color: var(--silver-3); }
.log .ko { font-family: var(--font-body); font-size: .8125rem; }
.log .ok { color: var(--ok); } .log .no { color: var(--no); } .log .warn { color: var(--warn); }
.mini-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list b { font-weight: 600; color: var(--silver); font-size: .875rem; }
.mini-list small { grid-column: 1 / -1; font-size: .8125rem; color: var(--silver-3); }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 1100px) {
  .adm-grid { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-right: 0; }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 960px) {
  /* Rail → two rows: brand row, then the nav as a scrolling strip with a fade at the edge. */
  .console { grid-template-columns: minmax(0, 1fr); }
  .adm-rail { position: static; height: auto; gap: 10px; padding: 12px 14px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .adm-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent); }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav .group, .adm-rail-foot { display: none; }
  .adm-nav a:last-child { margin-right: 36px; }
}
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { border-right: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi:nth-child(3) { border-right: 1px solid var(--line); }
  .kpi:last-child { grid-column: 1 / -1; border-right: 0; }
  .adm-top .who, .adm-search kbd { display: none; }
}