/* CHZ Web 2.0.1 — unified shell based on the agreed GoldPack manager-app UI principles.
   Official logos are not recolored or synthesized. */
:root{
  --nav-expanded:208px;
  --nav-collapsed:76px;
  --topbar-h:60px;
  --radius:13px;
  --shadow:0 3px 16px #25294208;
}
body{background:#f5f6f9}

/* Desktop shell: compact, persistent, collapsible. */
.app-nav{
  width:var(--nav-expanded);
  padding:20px 12px 14px;
  background:#252438;
  transition:width .18s ease,transform .2s ease;
}
.page-frame{margin-left:var(--nav-expanded);transition:margin-left .18s ease}
.app-nav .brand{height:45px;margin-bottom:22px;padding:0 8px;gap:10px}
.app-nav .brand .gp-nav-logo{width:38px;height:38px;padding:6px;border-radius:9px}
.app-nav .brand strong{font-size:15px}
.app-nav .brand small{font-size:8px;letter-spacing:.75px}
.nav-label{margin:0 12px 7px;font-size:9px}
.nav-menu{gap:4px}
.nav-menu a{padding:10px 11px;border-radius:9px;gap:10px;font-size:12px;min-height:40px}
.nav-menu a .icon{width:17px;height:17px}
.nav-menu a.active{box-shadow:none;background:#6552be}
.nav-note{padding:14px 11px;font-size:10px;line-height:1.5}
.user-chip{padding:13px 4px 2px;gap:8px}
.avatar{width:32px;height:32px;border-radius:9px;font-size:11px}
.user-details strong,.user-details small{font-size:10px}
.nav-collapse-toggle{display:inline-flex}

/* Collapsed desktop rail. */
body.nav-collapsed .app-nav{width:var(--nav-collapsed);padding-left:10px;padding-right:10px}
body.nav-collapsed .page-frame{margin-left:var(--nav-collapsed)}
body.nav-collapsed .app-nav .brand{justify-content:center;padding:0;margin-bottom:22px}
body.nav-collapsed .app-nav .brand span,
body.nav-collapsed .nav-label,
body.nav-collapsed .nav-menu a span,
body.nav-collapsed .nav-note,
body.nav-collapsed .user-details{display:none}
body.nav-collapsed .nav-menu a{justify-content:center;padding:10px}
body.nav-collapsed .nav-bottom{display:grid;justify-items:center}
body.nav-collapsed .user-chip{flex-direction:column;border-top:1px solid #ffffff14;padding-top:12px}
body.nav-collapsed .user-chip .icon-button{padding:5px}

/* Header / content density. */
.topbar{
  height:var(--topbar-h);
  padding:0 26px;
  gap:12px;
  background:#fffffff0;
  backdrop-filter:blur(12px);
}
.topbar .icon-button{width:34px;height:34px}
.breadcrumb{font-size:11px;gap:8px}
.top-actions{gap:9px}
.status-pill{font-size:10px;padding:5px 9px}
.web-tag{font-size:9px;letter-spacing:.55px;white-space:nowrap}
.workspace{max-width:1480px;padding:24px 28px 34px}
.page-heading{margin-bottom:18px;gap:16px}
.page-heading h1{font-size:24px;letter-spacing:-.45px}
.page-heading p{margin-top:5px;font-size:12px}
.page-foot{margin-top:17px;padding-top:12px;border-top:1px solid var(--line);font-size:9px}

/* One component language. */
.panel{padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-title{margin-bottom:14px;gap:12px}
.panel-title h2{font-size:16px}
.panel-title p{font-size:11px;margin-top:3px}
.stack{gap:16px}.columns{gap:16px}
.btn,.button{min-height:37px;padding:8px 13px;border-radius:9px;font-size:11px}
.btn.small{min-height:29px;padding:5px 9px;font-size:10px}
.actions{gap:7px}
.field{gap:6px;margin-bottom:13px;font-size:11px}
.field input,.field select,.field textarea,input.input{min-height:39px;padding:9px 11px;border-radius:9px}
.notice{padding:10px 13px;border-radius:9px;font-size:11px}
.empty{padding:34px 18px}

.metrics-row{gap:12px;margin-bottom:18px}
.metric-card{padding:15px 17px;border-radius:12px;min-height:128px}
.metric-card span{font-size:10px}
.metric-card strong{font-size:27px;margin-top:6px}
.metric-card small{font-size:9px;line-height:1.45}
.metric-card.metric-link .metric-go{padding-top:8px;font-size:10px}
.metric-link .metric-title{min-height:2.5em}

.hero{padding:23px 25px;border-radius:16px;margin-bottom:18px;gap:20px}
.hero h1{font-size:27px}
.hero p{margin:9px 0 16px;font-size:12px}
.hero.branded-hero{grid-template-columns:minmax(0,1fr) 220px;gap:18px}
.hero.branded-hero .official-brands{min-height:116px;padding:13px;gap:12px;border-radius:13px}
.hero.branded-hero .goldpack img{width:53px}
.hero.branded-hero .chz img{width:116px}
.hero.branded-hero .brand-separator{height:46px}
.hero-brand-note{margin-top:7px;font-size:9px}
.hero.branded-hero p.hero-developer{margin-top:11px;font-size:10px}

.mode-cards{gap:13px;margin-bottom:18px}
.mode-card{min-height:168px;padding:18px;border-radius:13px}
.mode-icon{width:35px;height:35px;margin-bottom:12px;border-radius:9px}
.mode-card h3{font-size:14px}.mode-card p{font-size:11px;line-height:1.55}
.mode-card small{font-size:10px;padding-top:11px}

/* Tables are consistent and denser, but remain horizontally contained. */
.table-scroll{border-radius:10px;max-width:100%}
.data-table{font-size:11px}
.data-table th{
  position:sticky;top:0;z-index:1;
  padding:9px 12px;font-size:9px;background:#f7f8fb;
}
.data-table td{padding:10px 12px}
.file-name,.code-text{font-size:10px}
.badge,.q-badge{
  display:inline-flex;align-items:center;
  min-height:23px;padding:3px 7px;border-radius:6px;
  font-size:9px;font-weight:600;line-height:1.25;white-space:nowrap;
}
.q-badge{background:#eef1f6;color:var(--muted)}
.q-recognized,.q-finished{background:var(--ok-bg);color:var(--ok)}
.q-working,.q-retry,.q-queued{background:var(--soft);color:var(--accent)}
.q-partial,.q-not_found,.q-unsupported_profile,.q-ambiguous{background:var(--warn-bg);color:var(--warn)}
.q-error,.q-cancelled{background:var(--bad-bg);color:var(--bad)}

/* Queue/history follow the same spacing and cards as the shell. */
.workspace .q-layout{gap:16px}
.workspace .q-panel{margin-top:16px}
.workspace .q-actions{margin:13px 0}
.workspace .q-note{font-size:10px;line-height:1.5}
.workspace .q-metrics{gap:9px;margin:14px 0}
.workspace .q-metric{padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fafafd}
.workspace .q-metric small{font-size:9px;color:var(--muted)}
.workspace .q-metric strong{font-size:22px;margin-top:5px}
.workspace .q-batch-button{padding:10px;border-radius:8px}
.workspace .q-batch-button strong{font-size:11px}
.workspace .q-batch-button small{font-size:9px;margin-top:3px}
.workspace .q-drop{min-height:92px;padding:15px;border-radius:11px}
.workspace .q-review-grid{gap:16px}
.workspace .q-preview-pair{gap:8px}
.workspace .q-wide .modal{max-width:1260px}
.workspace .h-filters{gap:9px;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.workspace .h-results{margin-top:14px}
.dashboard-actions,.dashboard-filters{margin-bottom:13px}
.dashboard-filters a{min-height:37px}

/* Modals and toasts use the same geometry. */
.modal{border-radius:14px;padding:20px;box-shadow:0 22px 70px #1113272c}
.modal-head{margin-bottom:16px}.modal h2{font-size:17px}
.modal .actions{margin-top:16px}
.toast{bottom:18px;right:18px;padding:10px 14px;border-radius:9px;font-size:11px}

/* Login: refined, less massive, same verified official marks. */
.branded-auth .login-intro{padding:34px clamp(28px,4vw,68px);background:radial-gradient(ellipse at 16% 8%,#6552be38,transparent 58%),linear-gradient(150deg,#252438,#3b3155)}
.branded-auth .official-brands{max-width:382px;min-height:108px;padding:13px 20px;border-radius:14px;gap:20px}
.branded-auth .goldpack img{width:59px}.branded-auth .chz img{width:154px}.branded-auth .brand-separator{height:52px}
.branded-auth .intro-copy{margin:34px 0;max-width:480px}
.branded-auth .intro-copy h1{font-size:clamp(34px,3vw,46px);line-height:1.1}
.branded-auth .intro-copy p{font-size:13px;line-height:1.65}
.branded-auth .login-form-side{padding:34px clamp(24px,4vw,64px)}
.branded-auth .login-card{max-width:390px}
.branded-auth .login-card h2{font-size:27px;margin-top:14px}
.branded-auth .field{font-size:12px;margin-bottom:16px}
.branded-auth .field input{min-height:44px;font-size:14px}
.branded-auth #login-submit{min-height:44px;font-size:13px}
.branded-auth .form-credit{font-size:10px!important}

/* Legacy compare/reference pages inherit the same compact component scale. */
#root .content-column,#root .sidebar{gap:15px}
#root .main-grid{gap:15px;grid-template-columns:minmax(0,1fr) 250px}
#root .card{border-radius:var(--radius)}
#root .card-header{padding:16px 18px 0}
#root .card-body{padding:16px 18px}
#root .card-hint{padding:0 18px 13px}
#root .metrics{gap:8px;margin-bottom:14px}
#root .metric{padding:10px}
#root .metric strong{font-size:19px}

/* Medium screens stay compact without changing component language. */
@media(max-width:1150px) and (min-width:801px){
  .app-nav{width:190px}
  .page-frame{margin-left:190px}
  body.nav-collapsed .app-nav{width:var(--nav-collapsed)}
  body.nav-collapsed .page-frame{margin-left:var(--nav-collapsed)}
  .workspace{padding:22px}
  .topbar{padding:0 22px}
}

/* Mobile: drawer, minimal header, same content hierarchy. */
@media(max-width:800px){
  body.nav-collapsed .page-frame,.page-frame{margin-left:0}
  .app-nav,body.nav-collapsed .app-nav{width:220px;padding:18px 12px}
  body.nav-collapsed .app-nav .brand span,
  body.nav-collapsed .nav-label,
  body.nav-collapsed .nav-menu a span,
  body.nav-collapsed .nav-note,
  body.nav-collapsed .user-details{display:initial}
  body.nav-collapsed .nav-menu a{justify-content:flex-start}
  body.nav-collapsed .user-chip{flex-direction:row;justify-content:flex-start}
  .nav-collapse-toggle{display:none!important}
  .topbar{height:56px;padding:0 14px}
  .workspace{padding:18px 14px 26px}
  .metrics-row{gap:8px;margin-bottom:14px}
  .metric-card{min-height:112px;padding:13px}
  .metric-card strong{font-size:24px}
  .hero{padding:19px}
  .hero.branded-hero{grid-template-columns:1fr}
  .mode-cards{gap:10px}
  .panel{padding:15px}
  .page-heading{margin-bottom:14px}
  .page-heading h1{font-size:22px}
  .page-foot{gap:5px}
  .branded-auth .login-intro{padding:18px 20px 20px}
  .branded-auth .official-brands{min-height:82px;padding:10px 14px}
  .branded-auth .goldpack img{width:47px}.branded-auth .chz img{width:132px}
  .branded-auth .brand-separator{height:42px}
  .branded-auth .intro-copy{margin:15px auto 0}
  .branded-auth .intro-copy h1{font-size:24px}
}
@media(max-width:480px){
  .metrics-row{grid-template-columns:1fr 1fr}
  .metric-link .metric-title{min-height:2.35em}
  .workspace .q-metrics{grid-template-columns:1fr 1fr}
  .web-tag{display:none}
}
@media(prefers-reduced-motion:reduce){
  .app-nav,.page-frame{transition:none}
}
.topbar-left{display:flex;align-items:center;gap:8px;min-width:0}
@media(max-width:800px){.topbar-left{gap:5px}}

/* Transport-code comparison: KITU / SSCC */
.transport-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.transport-side textarea{min-height:220px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.55;resize:vertical}
.transport-mode{max-width:360px;margin-top:14px;margin-bottom:0}
.transport-drop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border:1px dashed #cfd3dd;border-radius:10px;background:#fafafd;transition:.15s ease}
.transport-drop.drag{border-color:var(--accent);background:var(--soft)}
.transport-drop>div{display:grid;gap:3px}.transport-drop strong{font-size:11px}.transport-drop span{font-size:9px;color:var(--muted)}
.transport-files{display:grid;gap:6px;margin-top:10px}.transport-file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:10px}.transport-file-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transport-action{display:flex;align-items:center;justify-content:space-between;gap:18px}.transport-action strong{font-size:13px}.transport-action p{margin:4px 0 0}
.transport-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.transport-metrics .metric-card{min-height:98px}.transport-metrics .metric-card strong{font-size:24px}
.transport-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px}.transport-tab{border:1px solid var(--line);background:#fff;color:var(--muted);padding:7px 10px;border-radius:8px;font:inherit;font-size:10px;cursor:pointer}.transport-tab:hover{border-color:#bbb7dc}.transport-tab.active{background:var(--soft);border-color:#c9c1ef;color:var(--accent);font-weight:700}
.transport-result-body{min-width:0}
@media(max-width:1000px){.transport-grid{grid-template-columns:1fr}.transport-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.transport-drop,.transport-action{align-items:stretch;flex-direction:column}.transport-drop .btn,.transport-action .btn{width:100%}.transport-metrics{grid-template-columns:1fr 1fr}.transport-side textarea{min-height:180px}}
.transport-grid>*{min-width:0}
.transport-side textarea{width:100%;max-width:100%;box-sizing:border-box}
.transport-result-body,.transport-result-body .table-scroll{max-width:100%;min-width:0}
.transport-result-body .table-scroll{overflow-x:auto;overscroll-behavior-inline:contain}
.transport-result-body .data-table{width:max-content;min-width:100%;max-width:none}
@media(max-width:600px){
  .transport-tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
  .transport-tab{flex:0 0 auto}
  .transport-result-body .table-scroll{max-width:calc(100vw - 58px)}
}
.transport-root{min-width:0;max-width:100%}
.transport-root>.stack{min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr)}
.transport-root .panel{min-width:0;max-width:100%}
.transport-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;max-width:100%}
.transport-tabs{width:100%;min-width:0;max-width:100%}
@media(max-width:1000px){.transport-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .transport-tabs{overflow-x:visible;flex-wrap:wrap}
  .transport-tab{flex:0 1 auto;max-width:100%;white-space:normal}
}
@media(max-width:800px){
  .page-frame,body.nav-collapsed .page-frame{margin-left:0!important;transition:none}
}
/* Prevent transport-code min-content from widening the whole document. */
#root,#root>.stack,#workspace-content{min-width:0;max-width:100%;width:100%}
.transport-grid,.transport-grid>.panel,.transport-action,#t-results,#t-results>.panel,.transport-tabs,.transport-result-body{min-width:0;max-width:100%;width:100%}
.transport-result-body>.table-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible}
.transport-result-body>.table-scroll>.data-table{width:max-content;min-width:100%;max-width:none}
@media(max-width:600px){
  .transport-grid,.transport-grid>.panel,.transport-action,#t-results,#t-results>.panel{width:100%;max-width:100%}
  .transport-tabs{display:flex;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
  .transport-result-body>.table-scroll{max-width:100%}
}

/* CHZ Web 3.0 — universal code reconciliation */
.universal-module,.universal-module>*{min-width:0}
.universal-options,.universal-box-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}
.universal-options .field,.universal-box-options .field{margin-bottom:0}
.universal-box-options{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);grid-template-columns:220px minmax(0,1fr) minmax(0,1fr)}
.universal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}
.universal-side{min-width:0}
.universal-side textarea{width:100%;max-width:100%;min-height:230px;box-sizing:border-box;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.55}
.universal-drop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px dashed #c9c3df;border-radius:11px;background:#fbfaff;transition:.15s ease;min-width:0}
.universal-drop.drag{border-color:var(--accent);background:var(--soft)}
.universal-drop-copy{display:grid;gap:4px;min-width:0}.universal-drop-copy strong{font-size:12px}.universal-drop-copy span{font-size:10px;color:var(--muted)}
.universal-files{display:grid;gap:6px;margin-top:11px;min-width:0}.universal-files>p{margin:0;font-size:10px}
.universal-file-summary{font-size:10px;color:var(--muted);font-weight:600}
.universal-file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:0}
.universal-file-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.universal-action{display:flex;align-items:center;justify-content:space-between;gap:18px}.universal-action strong{font-size:13px}.universal-action p{margin:4px 0 0}
.universal-result-panel{min-width:0}.universal-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.universal-metrics .metric-card{min-height:94px}.universal-metrics .metric-card strong{font-size:24px}
.universal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 12px;min-width:0}
.universal-tab{border:1px solid var(--line);background:#fff;color:var(--muted);padding:7px 10px;border-radius:8px;font:inherit;font-size:10px;cursor:pointer;white-space:nowrap}
.universal-tab:hover{border-color:#bbb7dc}.universal-tab.active{background:var(--soft);border-color:#c9c1ef;color:var(--accent);font-weight:700}
.universal-result-body{min-width:0;max-width:100%}.universal-table{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}.universal-table .data-table{width:max-content;min-width:100%;max-width:none}
@media(max-width:1000px){.universal-grid{grid-template-columns:1fr}.universal-box-options{grid-template-columns:1fr 1fr}.universal-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .universal-options,.universal-box-options{grid-template-columns:1fr}.universal-grid{grid-template-columns:1fr}
 .universal-drop,.universal-action{align-items:stretch;flex-direction:column}.universal-drop .actions,.universal-action .actions{width:100%}.universal-drop .btn,.universal-action .btn{flex:1}
 .universal-side textarea{min-height:180px}.universal-metrics{grid-template-columns:1fr 1fr}
 .universal-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:3px}.universal-tab{flex:0 0 auto}
 .universal-result-body>.table-scroll{max-width:100%}
}