/* ═══ Dopamine Design · 熵熵AI工资助手 ═══ */
:root{--pink:#FF6B9D;--pink-light:#FF8DB3;--pink-dark:#E8527E;--purple:#7C3AED;--purple-light:#A78BFA;--orange:#FF8A5C;--orange-light:#FFA87D;--yellow:#FFD93D;--yellow-light:#FFE680;--cyan:#00D2D3;--cyan-light:#64E3E4;--lime:#00F260;--lime-light:#5CF58A;--bg:#FFF8F0;--ink:#2D1B69;--ink-soft:#6B4F9E;--muted:#9B85B8;--line:rgba(124,58,237,0.12);--line-strong:rgba(124,58,237,0.22);--gradient-hero:linear-gradient(135deg,#FF6B9D,#7C3AED,#00D2D3);--gradient-accent:linear-gradient(135deg,#FF6B9D,#FF8A5C);--gradient-cool:linear-gradient(135deg,#7C3AED,#00D2D3);--gradient-warm:linear-gradient(135deg,#FFD93D,#FF8A5C);--gradient-green:linear-gradient(135deg,#00F260,#00D2D3);--gradient-card:linear-gradient(135deg,#FFF,#FFF5F9);--gradient-glass:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.6));--shadow-sm:0 2px 8px rgba(124,58,237,0.10);--shadow-md:0 4px 16px rgba(124,58,237,0.14);--shadow-lg:0 8px 32px rgba(124,58,237,0.18);--shadow-glow-pink:0 4px 20px rgba(255,107,157,0.35);--shadow-glow-purple:0 4px 20px rgba(124,58,237,0.35);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px}
*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}
body{position:relative;margin:0;min-height:100vh;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
body.payroll-upload-modal-open{overflow:hidden}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,107,157,0.06) 0%,transparent 40%),radial-gradient(circle at 85% 30%,rgba(124,58,237,0.05) 0%,transparent 40%),radial-gradient(circle at 50% 80%,rgba(255,217,61,0.06) 0%,transparent 40%),radial-gradient(circle at 20% 70%,rgba(0,210,211,0.05) 0%,transparent 40%);pointer-events:none;z-index:-1}
body::after{content:"";position:fixed;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan),var(--yellow),var(--orange),var(--pink));background-size:200% 100%;animation:rainbowSlide 8s linear infinite;z-index:100}
@keyframes rainbowSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
h1{background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
button,input,select{font:inherit}button{user-select:none;cursor:pointer}
.shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:18px 0 40px}
.workspace{display:grid;gap:22px;min-width:0}
.topbar{position:sticky;top:12px;z-index:50;display:flex;align-items:center;gap:12px;min-height:50px;border:1px solid var(--line);border-radius:var(--radius-xl);padding:6px 8px 6px 16px;background:var(--gradient-glass);backdrop-filter:blur(20px);box-shadow:var(--shadow-sm)}
.brand-mark{display:inline-flex;align-items:center;gap:2px;color:inherit;font-size:20px;font-weight:900;text-decoration:none;letter-spacing:-0.03em}
.brand-mark span:nth-child(1){color:var(--pink)}.brand-mark span:nth-child(2){color:var(--purple)}.brand-mark span:nth-child(3){color:transparent;background:var(--gradient-warm);-webkit-background-clip:text;background-clip:text}
.status-pill{position:relative;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-full);padding:8px 14px 8px 32px;color:var(--ink-soft);background:#fff;font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);margin-left:auto}
.status-pill::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--lime);transform:translateY(-50%);box-shadow:0 0 6px rgba(0,242,96,0.5);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;top:50%;transform:translateY(-50%) scale(1)}50%{opacity:0.6;top:50%;transform:translateY(-50%) scale(1.3)}}
.upload-panel{position:relative;display:grid;justify-items:center;align-content:center;min-height:min(620px,calc(100vh - 118px));padding:34px 0 76px}
.upload-panel::before{content:"";position:absolute;inset:46px max(0px,calc(50% - 430px)) 52px;border:2px dashed var(--line-strong);border-radius:var(--radius-lg);background:rgba(255,255,255,0.4);pointer-events:none}
.hero-copy{position:relative;display:grid;justify-items:center;gap:14px;margin-bottom:32px;text-align:center}
.hero-copy::after{content:"✨";font-size:24px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.eyebrow{margin:0;border:1px solid var(--line);border-radius:var(--radius-full);padding:7px 16px;color:var(--ink-soft);background:rgba(255,255,255,0.8);font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;backdrop-filter:blur(8px)}
h1{margin:0;font-size:48px;line-height:1;font-weight:900;text-shadow:0 8px 24px rgba(124,58,237,0.10)}
h2{margin:0;font-size:24px;line-height:1.25;font-weight:800}
h3{margin:0;font-size:18px;line-height:1.3;font-weight:700}
.dropzone{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 36px;align-items:center;gap:14px;width:min(680px,100%);min-height:64px;padding:10px 20px 10px 24px;border:2px dashed var(--line-strong);border-radius:var(--radius-xl);color:var(--muted);background:rgba(255,255,255,0.7);cursor:pointer;box-shadow:var(--shadow-sm);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1)}
.dropzone:hover{border-color:var(--pink);background:#fff;box-shadow:var(--shadow-glow-pink);transform:translateY(-2px) scale(1.01)}
.dropzone.dragging{border-color:var(--purple);background:rgba(124,58,237,0.04);box-shadow:var(--shadow-glow-purple);transform:scale(1.02)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.search-icon,.upload-icon{display:grid;place-items:center;font-size:22px}
.search-icon::before{content:"🔍"}.upload-icon::before{content:"📤"}
.drop-title{font-size:16px;font-weight:700;color:var(--ink-soft);text-align:center}
.recognition-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:min(500px,100%);margin-top:20px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 22px;background:#fff;box-shadow:var(--shadow-md);animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.recognition-mascot{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--gradient-hero);color:#fff;font-size:16px;font-weight:900;box-shadow:0 4px 12px rgba(124,58,237,0.25);animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}60%{transform:translateY(-2px)}}
.recognition-copy{display:grid;gap:4px}.recognition-copy strong{font-size:15px;color:var(--ink)}.recognition-copy span{font-size:13px;color:var(--muted)}
.recognition-progress{grid-column:1/-1;height:6px;border-radius:var(--radius-full);background:rgba(124,58,237,0.08);overflow:hidden}
.recognition-progress span{display:block;height:100%;border-radius:var(--radius-full);background:var(--gradient-hero);background-size:200% 100%;animation:shimmer 2s linear infinite;transition:width 0.3s ease}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.quick-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.quick-actions span{border:1px solid var(--line);border-radius:var(--radius-full);padding:5px 14px;background:#fff;color:var(--muted);font-size:12px;font-weight:600}
.review-panel{display:grid;gap:18px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-md);animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.review-title-group{display:grid;gap:8px}
.template-name-row{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.template-name-row label{font-size:13px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.template-name-row input{border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 12px;font-size:14px;outline:none;transition:all 0.2s ease}
.template-name-row input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,0.12)}
.actions{display:flex;gap:10px}
.preview-dock{position:sticky;top:72px;z-index:1;padding-top:6px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:#fff}
.table-wrap{overflow-x:auto;max-height:320px;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;z-index:1;text-align:left;padding:10px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft);background:linear-gradient(180deg,#FFF5F9,#fff);border-bottom:2px solid var(--line-strong)}
tbody td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
.columns-scroller{max-height:420px;overflow-y:auto}
.columns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.column-card{display:grid;gap:8px;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;background:var(--bg);transition:all 0.2s ease}
.column-card:hover{border-color:var(--purple-light);box-shadow:var(--shadow-sm)}
.column-card-header{display:flex;align-items:center;justify-content:space-between;gap:6px}
.column-card-header strong{font-size:14px;color:var(--ink);word-break:break-all}
.column-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;border-radius:var(--radius-full);padding:2px 8px;background:rgba(124,58,237,0.08);color:var(--purple);white-space:nowrap}
.column-card .hint-text{font-size:12px;color:var(--muted)}
.column-card .toggle-row{display:flex;gap:14px;flex-wrap:wrap}
.column-card .toggle-row label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-soft);cursor:pointer}
.column-card .toggle-row input[type="checkbox"]{accent-color:var(--purple)}
.samples-row{display:flex;flex-wrap:wrap;gap:4px}
.sample-pill{font-size:11px;border-radius:var(--radius-full);padding:2px 8px;background:rgba(255,107,157,0.08);color:var(--pink-dark);white-space:nowrap}
.payroll-upload-panel-inline{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:12px}
.payroll-upload-panel-inline .period-picker{margin-bottom:0}
.payroll-filter{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.payroll-list{display:grid;gap:10px}
.payroll-item{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 18px;background:#fff;transition:all 0.2s ease}
.payroll-item:hover{border-color:var(--purple-light);box-shadow:var(--shadow-sm)}
.payroll-item strong{font-size:14px;color:var(--ink)}
.payroll-item span{font-size:12px;color:var(--muted);font-weight:600}
.payroll-item .payroll-actions{display:flex;gap:8px}
.payroll-upload-panel{display:grid;gap:14px;border:2px dashed var(--line-strong);border-radius:var(--radius-lg);padding:22px;background:rgba(255,255,255,0.7);transition:all 0.25s ease}
.payroll-upload-panel:hover{border-color:var(--cyan);background:#fff}
.payroll-upload-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.payroll-upload-copy{display:grid;gap:6px}.payroll-upload-copy p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.payroll-upload-back{flex:0 0 auto}
.payroll-upload-actions{display:flex;gap:10px;flex-wrap:wrap}
.upload-data-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:var(--radius-full);padding:0 22px;cursor:pointer;font-weight:700;background:var(--gradient-green);color:#fff;border:none;transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1)}
.payroll-data-meta{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.payroll-data-table-wrap{border:1px solid var(--line);border-radius:var(--radius-md);max-height:520px}
.period-picker {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
}
.period-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
}
.period-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #666);
  letter-spacing: 0.3px;
}
.period-field select {
  padding: 8px 12px;
  border: 2px solid var(--line, #e8e0f0);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: var(--ink, #2d1b69);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: auto;
  -webkit-appearance: auto;
}
.period-field select:focus {
  outline: none;
  border-color: var(--accent, #6c4bf5);
  box-shadow: 0 0 0 3px rgba(108,75,245,0.15);
}
.upload-data-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,242,96,0.35)}
.upload-data-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.success-notice,.payroll-error-notice{border:1px solid;border-radius:var(--radius-md);padding:12px 16px;font-size:14px;line-height:1.5;animation:slideUp 0.3s ease}
.success-notice{color:#0D7A3E;background:#ECFDF5;border-color:rgba(0,242,96,0.25);font-weight:700}
.payroll-error-notice{display:grid;gap:8px;color:#B91C1C;background:#FEF2F2;border-color:rgba(255,107,157,0.3);overflow-wrap:anywhere}.payroll-error-notice strong{font-size:14px}
.payroll-error-notice ul{display:grid;gap:6px;margin:0;padding-left:18px}.payroll-error-notice li{color:var(--ink-soft);line-height:1.55}
.ai-validation-report{display:grid;gap:8px}.ai-validation-report p{margin:0;color:#7F1D1D;font-size:13px}.ai-validation-report-list{display:grid;gap:6px}.ai-validation-issue{display:grid;grid-template-columns:96px minmax(0,1fr);gap:3px 10px;padding:8px 10px;border:1px solid rgba(185,28,28,0.12);border-radius:var(--radius-sm);background:rgba(255,255,255,0.72);color:var(--ink-soft);line-height:1.45}.ai-validation-issue b{grid-row:span 3;color:#991B1B}.ai-validation-issue span{color:var(--ink);font-weight:700}.ai-validation-issue small{display:block;font-size:12px;color:var(--ink-soft)}.ai-validation-issue-more{display:block;color:#7F1D1D}
.primary-button,.secondary-button,.ghost-button{min-height:44px;border-radius:var(--radius-full);padding:0 24px;cursor:pointer;font-weight:800;font-size:14px;transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);border:none;letter-spacing:0.01em}
.primary-button{color:#fff;background:var(--gradient-accent);box-shadow:0 4px 14px rgba(255,107,157,0.3)}
.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,157,0.4)}
.secondary-button{color:var(--ink-soft);background:#fff;border:1px solid var(--line-strong)}
.secondary-button:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ghost-button{color:var(--purple);background:rgba(124,58,237,0.06)}
.ghost-button:hover{background:rgba(124,58,237,0.12);transform:translateY(-1px)}
.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled{cursor:not-allowed;opacity:0.5;transform:none;box-shadow:none}
.confirm-actions{display:flex;justify-content:flex-end}
.result-panel{display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-md);animation:slideUp 0.4s ease}
.api-list{display:grid;gap:10px}
.api-item{display:grid;gap:4px;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;background:var(--bg)}
.api-item code{color:var(--purple);white-space:normal;word-break:break-all;font-weight:600}
.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(45,27,105,0.25);backdrop-filter:blur(8px);animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{display:grid;gap:16px;width:min(440px,100%);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:#fff;box-shadow:var(--shadow-lg);animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.modal-card p:not(.eyebrow){margin:0;color:var(--ink-soft);line-height:1.6}.modal-card .primary-button{justify-self:end}
.app-confirm-dialog{grid-template-columns:auto minmax(0,1fr);gap:16px 18px;width:min(480px,100%);padding:26px}
.app-confirm-marker{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#5B21B6;background:#F3E8FF;font-weight:900;font-size:18px}
.app-confirm-danger .app-confirm-marker{color:#B91C1C;background:#FEE2E2}
.app-confirm-content{display:grid;gap:8px;min-width:0}.app-confirm-title{margin:0;color:var(--ink);font-size:20px;line-height:1.25}.app-confirm-message{margin:0;color:var(--ink);line-height:1.65}.app-confirm-detail{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6}
.app-confirm-actions{grid-column:2;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}.app-confirm-danger .app-confirm-primary{background:linear-gradient(135deg,#EF4444,#F97316);box-shadow:0 4px 14px rgba(239,68,68,0.26)}
.app-toast-stack{position:fixed;top:22px;right:22px;z-index:220;display:grid;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.app-toast{pointer-events:auto;border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 16px;background:#fff;color:var(--ink);box-shadow:var(--shadow-md);font-weight:700;line-height:1.5;animation:slideUp 0.22s ease;overflow-wrap:anywhere}
.app-toast-success{color:#047857;background:#ECFDF5;border-color:rgba(16,185,129,0.24)}.app-toast-error{color:#B91C1C;background:#FEF2F2;border-color:rgba(239,68,68,0.24)}.app-toast-warning{color:#92400E;background:#FFFBEB;border-color:rgba(245,158,11,0.28)}.app-toast-info{color:#5B21B6;background:#F5F3FF;border-color:rgba(124,58,237,0.18)}
.app-toast-leaving{opacity:0;transform:translateY(-6px);transition:all 0.18s ease}
#payrollUploadModal{place-items:center;overflow:hidden}
.payroll-upload-modal-card{position:relative;width:min(860px,calc(100vw - 48px));max-height:calc(100vh - 32px);grid-template-rows:auto auto auto auto auto auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
#payrollUploadModalError{overflow:visible;min-height:0}
.payroll-upload-modal-card .modal-actions{flex-shrink:0;min-height:52px;align-items:center;margin-top:0;padding-top:8px;background:#fff}
.payroll-upload-loading{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:24px;background:rgba(255,255,255,0.78);backdrop-filter:blur(6px);border-radius:inherit}
.payroll-upload-loading-box{display:grid;justify-items:center;gap:12px;width:min(360px,100%);padding:0 28px 24px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:0 16px 40px rgba(124,58,237,0.14);text-align:center}
.payroll-upload-loading-box strong{color:var(--ink);font-size:16px}.payroll-upload-loading-box small{color:var(--ink-soft);line-height:1.5}
.payroll-upload-progress-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;margin-top:10px}
.payroll-upload-progress{width:100%;height:6px;border-radius:var(--radius-full);background:rgba(17,17,17,0.12);overflow:hidden}
.payroll-upload-progress-fill{display:block;width:0;height:100%;border-radius:inherit;background:#111;transition:width 0.35s ease}
.payroll-upload-progress-meta{display:contents;color:#111;font-size:13px;font-weight:900;line-height:1.4}
.payroll-upload-progress-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.payroll-upload-visual{display:block;width:112px;height:112px;object-fit:contain;margin-top:-72px;border-radius:var(--radius-sm);box-shadow:0 10px 22px rgba(45,27,105,0.16)}
.manual-password-card{gap:14px}
.manual-password-value{padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--primary-soft);color:var(--ink);font-size:24px;font-weight:900;letter-spacing:0;text-align:center}
.manual-password-note{font-size:13px}
.auth-card{max-width:400px}
.auth-tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius-full);overflow:hidden;background:var(--bg)}
.auth-tab{flex:1;border:none;padding:10px 18px;cursor:pointer;font-size:14px;font-weight:700;color:var(--muted);background:transparent;transition:all 0.2s ease}
.auth-tab.active{color:#fff;background:var(--gradient-hero)}
.auth-form{display:grid;gap:14px;margin-top:4px}
.auth-field{display:grid;gap:5px}.auth-field label,.auth-field .field-label{font-size:13px;font-weight:700;color:var(--ink-soft)}
.auth-field input{border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 14px;font-size:15px;outline:none;transition:all 0.2s ease}
.auth-field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,0.12)}
.payroll-file-picker{display:flex!important;align-items:center;gap:12px;min-height:48px;border:1px dashed var(--line-strong);border-radius:var(--radius-md);padding:8px;background:#fafafa;cursor:pointer;transition:all 0.2s ease}
.payroll-file-picker:hover{border-color:var(--purple);background:rgba(124,58,237,0.05)}
.payroll-file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.payroll-file-button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;border-radius:var(--radius-full);padding:0 16px;color:#fff;background:var(--gradient-accent);font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 3px 10px rgba(255,107,157,0.24)}
.payroll-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);font-size:14px;font-weight:600}
.auth-error{font-size:13px;color:#B91C1C;padding:8px 12px;border-radius:var(--radius-sm);background:#FEF2F2;border:1px solid rgba(255,107,157,0.2)}
.auth-submit{width:100%;justify-self:stretch;min-height:46px;background:var(--gradient-hero);font-size:15px}
.auth-submit:hover{box-shadow:0 4px 20px rgba(124,58,237,0.35)}
.auth-hint{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.link-button{border:none;padding:0;background:none;color:var(--purple);cursor:pointer;font-size:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.link-button:hover{color:var(--pink)}
.admin-dashboard{display:grid;gap:24px;padding:8px 0;animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.admin-header{display:grid;gap:20px;text-align:center}
.admin-greeting h2{margin-top:10px;font-size:28px;background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.admin-summary{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.summary-item{display:grid;gap:4px;text-align:center;min-width:120px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 22px;background:#fff;box-shadow:var(--shadow-sm);transition:all 0.25s ease}
.summary-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.summary-item strong{font-size:30px;font-weight:900;line-height:1.2}
.summary-item span{font-size:13px;font-weight:600;color:var(--muted)}
.summary-item:nth-child(1) strong{background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.summary-item:nth-child(2) strong{background:var(--gradient-cool);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.summary-item:nth-child(3) strong{background:var(--gradient-green);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.admin-modules{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.admin-tabs{display:flex;background:var(--bg);border-bottom:1px solid var(--line);padding:4px;gap:4px}
.admin-tab{flex:1;border:none;padding:14px 20px;cursor:pointer;font-size:15px;font-weight:800;color:var(--muted);background:transparent;transition:all 0.2s ease;border-radius:var(--radius-md);letter-spacing:0.01em}
.admin-tab:hover{color:var(--ink-soft);background:rgba(124,58,237,0.04)}
.admin-tab.active{color:#fff;background:var(--gradient-hero);box-shadow:0 4px 14px rgba(124,58,237,0.25)}
.admin-module{display:none;gap:18px;padding:24px}.admin-module.active{display:grid}
.module-card{display:grid;gap:14px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;background:var(--gradient-card);transition:box-shadow 0.2s ease}
.module-card:hover{box-shadow:var(--shadow-sm)}.module-card h3{font-size:17px}
.module-hint{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.6}
.module-card-header{display:flex;align-items:center;justify-content:space-between}
.module-badge{font-size:12px;font-weight:800;color:var(--purple);border:1px solid var(--line);border-radius:var(--radius-full);padding:4px 12px;background:#fff}
.employee-list-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.employee-bulk-delete-btn{min-height:32px;padding:0 14px;font-size:12px;color:#B91C1C;border-color:rgba(185,28,28,0.24);background:#fff}
.employee-form{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.form-field{display:grid;gap:5px}.form-field label{font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:0.02em}
.form-field input{border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;font-size:14px;outline:none;transition:all 0.2s ease}
.form-field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,0.12)}
.form-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap;align-self:end}
.form-actions .primary-button,.form-actions .secondary-button{min-height:40px;padding:0 24px;white-space:nowrap}
.form-error{font-size:13px;color:#B91C1C;padding:10px 14px;border-radius:var(--radius-sm);background:#FEF2F2;border:1px solid rgba(255,107,157,0.2)}
.form-success{font-size:13px;color:#0D7A3E;padding:10px 14px;border-radius:var(--radius-sm);background:#ECFDF5;border:1px solid rgba(0,242,96,0.25);font-weight:600}
.employee-table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--line)}
.employee-table{width:100%;border-collapse:collapse;font-size:14px}
.employee-table th{text-align:left;padding:10px 14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft);background:linear-gradient(180deg,#FFF5F9,#fff);border-bottom:2px solid var(--line-strong)}
.employee-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.employee-select-cell{width:42px;text-align:center}.employee-select-cell input{width:16px;height:16px;accent-color:var(--purple);cursor:pointer}
.employee-table tr:last-child td{border-bottom:none}.employee-table tr:hover td{background:rgba(255,107,157,0.03)}
.employee-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sms-status-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--radius-full);font-size:12px;font-weight:800;white-space:nowrap}
.sms-status-success{color:#047857;background:#D1FAE5}
.sms-status-fail{color:#B91C1C;background:#FEE2E2}
.sms-status-muted{color:#6B7280;background:#F3F4F6}
.sms-status-cell{display:table-cell}
.employee-table .delete-btn{border:none;padding:5px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:700;color:#B91C1C;background:#FEF2F2;cursor:pointer;transition:all 0.2s ease}
.employee-table .delete-btn:hover{background:#FEE2E2;transform:scale(1.05)}
.employee-table .employee-edit-btn{border:none;padding:5px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:700;color:#5B21B6;background:#F3E8FF;cursor:pointer;transition:all 0.2s ease}
.employee-table .employee-edit-btn:hover{background:#E9D5FF;transform:scale(1.05)}
.employee-table .resend-sms-btn{border:none;padding:5px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:700;color:#075985;background:#E0F2FE;cursor:pointer;transition:all 0.2s ease}
.employee-table .resend-sms-btn:hover:not(:disabled){background:#BAE6FD;transform:scale(1.05)}
.employee-table .resend-sms-btn:disabled{opacity:.65;cursor:not-allowed}
.empty-state{display:grid;gap:6px;text-align:center;padding:36px 16px;color:var(--muted)}.empty-state p{margin:0;font-size:15px;font-weight:600}
.empty-hint{font-size:13px;color:var(--muted);font-weight:400}
.payroll-actions{display:flex;gap:12px;flex-wrap:wrap}
.template-list{display:grid;gap:10px}
.template-item{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 18px;background:#fff;transition:all 0.2s ease;gap:16px}
.template-item:hover{border-color:var(--purple-light);box-shadow:var(--shadow-sm);transform:translateX(3px)}
.template-item > div:first-child{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.template-item strong{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-item span{font-size:12px;color:var(--muted);font-weight:600;flex-shrink:0;white-space:nowrap}
.template-actions{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end;flex-shrink:0;min-width:0}
.template-actions .secondary-button{min-height:36px;padding:0 14px;flex-shrink:0;white-space:nowrap}
.admin-logout-btn{margin-left:auto;border:1px solid var(--line);border-radius:var(--radius-full);padding:7px 16px;background:#fff;color:var(--ink-soft);font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s ease;white-space:nowrap}
.admin-logout-btn:hover{color:#B91C1C;background:#FEF2F2;border-color:rgba(255,107,157,0.3);transform:translateY(-1px)}
.hidden{display:none!important}
@media(max-width:1180px){.columns-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.columns-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.shell{width:min(100% - 20px,1120px);padding:14px 0 28px}.upload-panel{min-height:calc(100vh - 92px);padding:18px 0 48px}.upload-panel::before{inset:32px 0 40px}.hero-copy{margin-bottom:20px}.dropzone{grid-template-columns:22px minmax(0,1fr) 30px;min-height:58px;padding:8px 14px 8px 18px}.drop-title{font-size:15px}.review-panel,.result-panel{padding:18px}.preview-dock{top:64px;padding-top:4px}.review-head,.actions,.confirm-actions,.payroll-upload-panel{display:grid}.columns-grid{grid-template-columns:1fr}.template-name-row{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.admin-summary{flex-direction:column;align-items:center}.summary-item{width:100%;max-width:200px}.admin-module{padding:16px}.topbar{padding:6px 8px 6px 12px}}

.auth-login-btn{border:1px solid var(--line);border-radius:var(--radius-full);padding:7px 16px;background:var(--gradient-accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;border:none;box-shadow:0 2px 8px rgba(255,107,157,0.25)}
.auth-login-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,107,157,0.35)}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}
.modal-actions .primary-button,
.modal-actions .secondary-button {
  flex: 0 1 auto;
  min-width: 120px;
}
.help-doc-btn {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  background: rgba(255,255,255,0.92);
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.help-doc-btn::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  color: var(--purple);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 1px 4px rgba(124,58,237,0.16);
}
.help-doc-btn:hover {
  background: rgba(124,58,237,0.12);
  border-color: var(--purple-light);
  box-shadow: 0 2px 8px rgba(124,58,237,0.18);
  transform: translateY(-1px);
}
@media(max-width:720px){
  .help-doc-btn{top:22px;right:12px;padding:7px 10px;font-size:12px}
  .admin-logout-btn{padding:7px 10px;font-size:12px}
}
/* ── 登录面板 ── */
.login-panel{position:relative;display:grid;justify-items:center;align-content:center;min-height:min(620px,calc(100vh - 118px));padding:34px 0 76px}
.login-card{width:min(400px,100%);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:#fff;box-shadow:var(--shadow-lg);animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1)}

/* ── 批量导入员工 ── */
.bulk-preview-card{width:min(640px,100%);max-height:90vh;overflow-y:auto}
.bulk-preview-card .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bulk-preview-card .modal-header h3{margin:0;font-size:18px}
.bulk-preview-card .modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft);padding:4px 8px}
.bulk-preview-summary{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:rgba(0,210,211,0.08);border-radius:var(--radius-sm);margin-bottom:12px;font-size:14px}
.shared-pw-display{color:#7C3AED;font-family:monospace;letter-spacing:0.05em}
.bulk-preview-error{padding:10px 14px;border-radius:var(--radius-sm);background:#FEF2F2;color:#B91C1C;font-size:13px;margin-top:8px}
.bulk-preview-progress{margin-top:12px}
.progress-bar{width:100%;height:8px;border-radius:4px;background:#e5e7eb;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#00D2D3,#6366F1);transition:width 0.3s ease}
#bulkProgressText{display:block;text-align:center;font-size:12px;color:var(--ink-soft);margin-top:4px}
.status-pending{color:#9B85B8;font-size:12px}
.status-loading{color:#5B52D6;font-size:12px;font-weight:600}
.status-ok{color:#059669;font-size:12px;font-weight:600}
.status-fail{color:#B91C1C;font-size:12px;font-weight:600}

/* ── 会员弹窗 ── */
.membership-card{width:min(420px,100%);text-align:center}
.membership-card .modal-header{display:flex;justify-content:space-between;align-items:center;text-align:left}
.membership-card .modal-header h3{margin:0;font-size:20px}
.membership-card .modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft);padding:4px 8px}
.membership-body{display:grid;gap:16px}
.membership-icon{font-size:48px}
.membership-desc{font-size:15px;color:var(--ink-soft);line-height:1.7;margin:0}
.membership-plan{background:linear-gradient(135deg,#FFF5F9,#F5F3FF);border-radius:var(--radius-md);padding:20px;border:2px solid rgba(124,58,237,0.15)}
.plan-price{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:12px}
.price-symbol{font-size:20px;font-weight:700;color:#7C3AED}
.price-amount{font-size:48px;font-weight:900;color:#7C3AED;line-height:1}
.price-unit{font-size:14px;color:#9B85B8;font-weight:600}
.plan-feature{font-size:13px;color:var(--ink-soft);margin:4px 0}
.membership-qr{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.qr-code-box{border:2px solid var(--line-strong);border-radius:var(--radius-md);padding:8px;background:#fff}
.qr-hint{font-size:13px;color:var(--ink-soft);writing-mode:vertical-lr}
.membership-actions{display:flex;justify-content:center;gap:12px;margin-top:8px}
.membership-actions .primary-button{display:inline-flex;align-items:center;gap:6px;cursor:pointer}

/* ── 会员徽章 ── */
.member-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:linear-gradient(135deg,#FFD700,#FFA500);color:#7C4A00;border-radius:var(--radius-full);font-size:13px;font-weight:800;box-shadow:0 2px 8px rgba(255,165,0,0.3);animation:pulse-gold 2s ease-in-out infinite}
@keyframes pulse-gold{0%,100%{box-shadow:0 2px 8px rgba(255,165,0,0.3)}50%{box-shadow:0 4px 20px rgba(255,165,0,0.5)}}