:root{
  --page:#f3efe8;
  --page-deep:#efe8dd;
  --surface:#fffdf9;
  --surface-strong:#ffffff;
  --surface-muted:rgba(255,255,255,.72);
  --text:#172033;
  --muted:#63708a;
  --soft:#94a0b7;
  --line:rgba(30,43,70,.12);
  --line-strong:rgba(30,43,70,.18);
  --teal:#0f8d87;
  --teal-soft:rgba(15,141,135,.12);
  --coral:#dd6c52;
  --amber:#c58a1d;
  --blue:#426fce;
  --slate:#7d8799;
  --shadow:0 24px 80px rgba(18,32,55,.08);
  --shadow-soft:0 12px 28px rgba(18,32,55,.06);
  --radius:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(66,111,206,.14), transparent 30%),
    radial-gradient(circle at top left, rgba(15,141,135,.12), transparent 24%),
    linear-gradient(180deg, var(--page), var(--page-deep));
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}

.skip{
  position:absolute;
  left:-999px;
  top:12px;
  z-index:30;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-strong);
}
.skip:focus{left:12px}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.page-shell{
  width:min(1460px, calc(100% - 36px));
  margin:18px auto;
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,253,249,.84);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft);
}

.brand-block{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  font-family:"Manrope","Noto Sans SC",sans-serif;
  font-size:20px;
  font-weight:800;
}

.brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, #111827, #283a63);
  color:#fff;
  font-size:14px;
}

.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:14px;
}

.crumbs a:hover{color:var(--text)}

.key-panel{
  width:min(460px, 100%);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.auth-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

.auth-user{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.auth-logout{
  align-self:flex-end;
}

.field-label,
.mini-label{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.key-input-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:10px;
  padding:6px 8px 6px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-strong);
}

.field-icon{
  width:16px;
  height:16px;
  position:relative;
  display:block;
  color:var(--soft);
}

.icon-key::before,
.icon-key::after{
  content:"";
  position:absolute;
}

.icon-key::before{
  width:8px;
  height:8px;
  left:0;
  top:3px;
  border:2px solid currentColor;
  border-radius:50%;
}

.icon-key::after{
  width:10px;
  height:2px;
  right:0;
  top:7px;
  background:currentColor;
  box-shadow:-2px 4px 0 currentColor;
}

.text-input,
.textarea-input,
.select-input{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-strong);
  color:var(--text);
}

.text-input{
  min-height:46px;
  padding:0 14px;
}

.key-input{
  min-height:40px;
  padding:0;
  border:none;
  background:transparent;
}

.key-input:focus,
.text-input:focus,
.textarea-input:focus,
.select-input:focus{
  outline:none;
}

.key-input-wrap:focus-within,
.text-input:focus,
.textarea-input:focus,
.select-input:focus{
  border-color:rgba(66,111,206,.45);
  box-shadow:0 0 0 3px rgba(66,111,206,.12);
}

.textarea-input{
  resize:vertical;
  min-height:190px;
  padding:14px;
  line-height:1.7;
}

.field-hint{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.inline-action,
.icon-action,
.primary-button,
.ghost-button{
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.inline-action,
.ghost-button{
  min-height:40px;
  padding:0 14px;
  background:rgba(23,32,51,.06);
  color:var(--text);
}

.primary-button{
  min-height:44px;
  padding:0 16px;
  background:linear-gradient(135deg, var(--teal), #1b6785);
  color:#fff;
  box-shadow:0 12px 20px rgba(15,141,135,.22);
}

.inline-action:hover,
.ghost-button:hover,
.icon-action:hover,
.primary-button:hover{
  transform:translateY(-1px);
}

.icon-action{
  width:40px;
  height:40px;
  background:rgba(23,32,51,.04);
  color:var(--soft);
}

.icon-eye{
  width:16px;
  height:16px;
  position:relative;
  display:block;
}

.icon-eye::before,
.icon-eye::after{
  content:"";
  position:absolute;
}

.icon-eye::before{
  inset:2px 0;
  border:2px solid currentColor;
  border-radius:50% / 60%;
}

.icon-eye::after{
  width:4px;
  height:4px;
  left:6px;
  top:6px;
  border-radius:50%;
  background:currentColor;
}

.main-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) 380px;
  gap:20px;
  margin-top:18px;
}

.workspace,
.detail-panel{
  min-width:0;
}

.hero-band{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,249,255,.9)),
    var(--surface);
  box-shadow:var(--shadow);
}

.hero-band h1{
  margin-top:8px;
  font-family:"Manrope","Noto Sans SC",sans-serif;
  font-size:52px;
  line-height:.98;
  letter-spacing:0;
}

.eyebrow{
  margin:0;
  color:var(--teal);
  font-family:"Manrope","Noto Sans SC",sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero-copy{
  margin-top:14px;
  max-width:640px;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}

.hero-stat{
  min-width:160px;
  align-self:flex-end;
  padding:18px 18px 16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.86);
}

.hero-stat-label,
.hero-stat-copy{
  display:block;
  color:var(--muted);
  font-size:13px;
}

.hero-stat strong{
  display:block;
  margin:10px 0 4px;
  font-family:"Manrope","Noto Sans SC",sans-serif;
  font-size:44px;
  line-height:1;
}

.control-grid{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  gap:18px;
  margin-top:18px;
}

.dropzone-card,
.job-card,
.result-shell,
.detail-panel{
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,253,249,.88);
  box-shadow:var(--shadow-soft);
}

.dropzone-card,
.job-card,
.result-shell{
  padding:20px;
}

.dropzone{
  min-height:236px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:24px;
  border:1px dashed rgba(15,141,135,.36);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(15,141,135,.06), rgba(66,111,206,.04)),
    var(--surface-strong);
  outline:none;
}

.dropzone.is-dragover{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(15,141,135,.1);
}

.dropzone-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:var(--surface-strong);
  box-shadow:var(--shadow-soft);
}

.icon-upload{
  position:relative;
  width:22px;
  height:22px;
  display:block;
  color:var(--teal);
}

.icon-upload::before,
.icon-upload::after{
  content:"";
  position:absolute;
}

.icon-upload::before{
  left:8px;
  top:2px;
  width:6px;
  height:12px;
  background:currentColor;
  clip-path:polygon(50% 0, 100% 55%, 68% 55%, 68% 100%, 32% 100%, 32% 55%, 0 55%);
}

.icon-upload::after{
  left:2px;
  bottom:1px;
  width:18px;
  height:8px;
  border:2px solid currentColor;
  border-top:none;
  border-radius:0 0 6px 6px;
}

.dropzone-body h2,
.section-header h2,
.result-toolbar h2,
.detail-header h2{
  font-family:"Manrope","Noto Sans SC",sans-serif;
  font-size:24px;
  line-height:1.1;
}

.dropzone-body p{
  margin-top:10px;
  color:var(--muted);
  line-height:1.7;
}

.dropzone-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.file-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.native-file-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.format-chips,
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.format-chips span,
.tag-row span{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(23,32,51,.06);
  color:var(--muted);
  font-size:13px;
}

.file-queue{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.queue-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-strong);
}

.queue-name{
  font-weight:700;
}

.queue-meta{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

.queue-status{
  align-self:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.queue-status.done{background:rgba(15,141,135,.12);color:var(--teal)}
.queue-status.processing{background:rgba(66,111,206,.12);color:var(--blue)}
.queue-status.error{background:rgba(221,108,82,.14);color:var(--coral)}
.queue-status.pending{background:rgba(148,160,183,.16);color:var(--slate)}

.section-header,
.result-toolbar,
.detail-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.job-actions,
.toolbar-actions,
.detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.job-card .text-input{
  margin-top:18px;
}

.job-card .textarea-input{
  margin-top:12px;
}

.job-card .tag-row{
  margin-top:14px;
}

.result-shell{
  margin-top:18px;
}

.toolbar-actions{
  align-items:flex-end;
}

.toolbar-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}

.select-input{
  min-width:170px;
  min-height:44px;
  padding:0 12px;
}

.table-card{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--surface-strong);
}

.table-head,
.resume-row{
  display:grid;
  grid-template-columns:minmax(0, 2.2fr) 110px 120px minmax(0, 1.5fr) 100px 112px;
  gap:12px;
  align-items:center;
}

.table-head{
  padding:14px 18px;
  background:rgba(23,32,51,.04);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.table-body{
  display:flex;
  flex-direction:column;
}

.resume-row{
  width:100%;
  padding:16px 18px;
  border:none;
  border-top:1px solid var(--line);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.resume-row:hover,
.resume-row.is-active{
  background:linear-gradient(90deg, rgba(15,141,135,.08), rgba(66,111,206,.03));
}

.candidate-cell{
  min-width:0;
}

.candidate-trigger{
  padding:0;
  border:none;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.candidate-name{
  font-weight:700;
}

.candidate-meta{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

.candidate-error{
  margin-top:6px;
  color:var(--coral);
  font-size:12px;
  line-height:1.6;
}

.score-cell{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.score-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  font-weight:700;
}

.score-track,
.meter{
  height:8px;
  border-radius:999px;
  background:rgba(23,32,51,.08);
  overflow:hidden;
}

.score-fill,
.meter-bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--teal), var(--blue));
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.status-pill.done{background:rgba(15,141,135,.12);color:var(--teal)}
.status-pill.processing{background:rgba(66,111,206,.12);color:var(--blue)}
.status-pill.error{background:rgba(221,108,82,.14);color:var(--coral)}
.status-pill.pending{background:rgba(148,160,183,.16);color:var(--slate)}

.row-action{
  min-height:36px;
  padding:0 12px;
  border:none;
  border-radius:10px;
  background:rgba(23,32,51,.06);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.row-action:hover{
  background:rgba(66,111,206,.12);
}

.row-action:disabled{
  cursor:progress;
  color:var(--soft);
  background:rgba(148,160,183,.14);
}

.empty-state{
  padding:40px 18px;
  color:var(--muted);
  text-align:center;
  line-height:1.7;
}

.detail-panel{
  position:sticky;
  top:18px;
  height:fit-content;
  padding:20px;
}

.detail-header{
  align-items:flex-start;
}

.detail-score{
  min-width:74px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(15,141,135,.1);
  color:var(--teal);
  font-family:"Manrope","Noto Sans SC",sans-serif;
  font-size:28px;
  font-weight:800;
  line-height:1;
  text-align:center;
}

.detail-actions{
  margin-top:18px;
}

.detail-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
}

.detail-section{
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-strong);
}

.detail-section h3{
  font-family:"Manrope","Noto Sans SC",sans-serif;
  font-size:17px;
}

.detail-section-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.detail-section-head span{
  color:var(--muted);
  font-size:13px;
}

.detail-section .meter{
  margin-top:12px;
}

.detail-section .tag-row{
  margin-top:12px;
}

.detail-list{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.detail-list li{
  position:relative;
  padding-left:18px;
  color:var(--text);
  line-height:1.7;
}

.detail-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--teal);
}

.detail-checklist li::before{
  width:10px;
  height:10px;
  border-radius:3px;
  top:9px;
  background:linear-gradient(135deg, var(--amber), var(--coral));
}

.empty-list li{color:var(--muted)}
.empty-list li::before{background:var(--soft)}

.detail-paragraph{
  margin-top:12px;
  color:var(--muted);
  line-height:1.8;
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:40;
  max-width:320px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(23,32,51,.92);
  color:#fff;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:1180px){
  .main-layout{
    grid-template-columns:1fr;
  }

  .detail-panel{
    position:static;
  }
}

@media (max-width:960px){
  .topbar,
  .hero-band,
  .section-header,
  .result-toolbar{
    display:block;
  }

  .key-panel{
    width:100%;
    margin-top:18px;
  }

  .hero-stat{
    margin-top:18px;
  }

  .control-grid{
    grid-template-columns:1fr;
  }

  .toolbar-actions,
  .detail-actions{
    margin-top:16px;
  }

  .table-head{
    display:none;
  }

  .resume-row{
    grid-template-columns:1fr;
    gap:12px;
  }
}

@media (max-width:640px){
  .page-shell{
    width:min(100% - 20px, 1460px);
  }

  .topbar,
  .dropzone-card,
  .job-card,
  .result-shell,
  .detail-panel{
    padding:16px;
  }

  .hero-band{
    padding:20px;
  }

  .hero-band h1{
    font-size:40px;
  }

  .key-input-wrap{
    grid-template-columns:auto 1fr auto;
  }

  .inline-action{
    grid-column:1 / -1;
  }

  .toolbar-field{
    width:100%;
  }

  .select-input{
    min-width:0;
  }
}