:root { --ink:#172033; --muted:#687386; --line:#dce2ea; --paper:rgba(255,255,255,.92); --canvas:#f4f6fb; --blue:#335cff; --blue-soft:#e9edff; --green:#16845b; --red:#be3b3b; --shadow:0 18px 50px rgba(36,51,82,.09); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 90% 0,#e1e9ff 0,transparent 28rem),var(--canvas); font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; }
.shell { width:min(1040px,calc(100% - 40px)); margin:48px auto 80px; }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; max-width:930px; margin:0 auto 32px; }
.hero h1 { max-width:720px; margin:0; font-size:clamp(34px,5vw,55px); line-height:1.1; letter-spacing:-.045em; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:12px; font-weight:750; letter-spacing:.12em; }
.intro,.status { margin:16px 0 0; color:var(--muted); line-height:1.7; }.intro { max-width:650px; font-size:17px; }
.card { border:1px solid rgba(214,221,232,.9); border-radius:24px; background:var(--paper); box-shadow:var(--shadow); padding:28px; backdrop-filter:blur(18px); }
.upload-card { max-width:930px; margin:auto; }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }.section-heading h2 { margin:0; font-size:24px; letter-spacing:-.025em; }.section-heading .eyebrow { margin-bottom:5px; }
.tag { flex:none; border-radius:99px; padding:6px 10px; color:#4f5c70; background:#f2f5f9; font-size:12px; font-weight:650; }
.drop-zone { display:grid; min-height:220px; place-content:center; gap:9px; border:1.5px dashed #a9b5c9; border-radius:18px; padding:26px; color:var(--ink); background:#fbfcff; text-align:center; cursor:pointer; transition:.25s ease; }.drop-zone:hover,.drop-zone.dragging { border-color:var(--blue); background:var(--blue-soft); transform:translateY(-1px); }.drop-zone.locked { cursor:not-allowed; opacity:.62; }.drop-zone.locked:hover { border-color:#a9b5c9; background:#fbfcff; transform:none; }.drop-zone input { display:none; }.drop-zone strong { font-size:18px; }.drop-zone small { color:var(--muted); }.upload-icon { display:grid; width:44px; height:44px; place-items:center; margin:auto auto 4px; border-radius:14px; color:var(--blue); background:var(--blue-soft); font-size:27px; font-weight:500; }.file-name { max-width:100%; overflow:hidden; color:var(--blue); font-size:14px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.primary-button,.quiet-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:7px; border:0; border-radius:999px; padding:10px 17px; font-weight:650; text-decoration:none; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }.primary-button { margin-top:18px; color:#fff; background:var(--blue); box-shadow:0 8px 18px rgba(51,92,255,.25); }.primary-button:hover { transform:scale(1.02); box-shadow:0 10px 24px rgba(51,92,255,.3); }.primary-button:disabled { opacity:.55; cursor:wait; transform:none; }.quiet-button { flex:none; color:#314057; border:1px solid #d6dde8; background:#fff; }.quiet-button:hover { background:#f7f9fc; }.download { margin-top:0; }
.task-card,.history-card { margin-top:22px; }.hidden { display:none !important; }.progress-heading strong { color:var(--blue); font-size:28px; letter-spacing:-.04em; }
.flow { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:0; margin:0; list-style:none; }.flow li { position:relative; display:grid; justify-items:center; gap:8px; min-width:0; color:#8792a2; text-align:center; font-size:12px; font-weight:650; }.flow li:not(:last-child)::after { position:absolute; z-index:0; top:14px; left:calc(50% + 17px); width:calc(100% - 28px); height:2px; background:#e2e7ef; content:""; }.flow i { position:relative; z-index:1; display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:#778397; background:#e9edf3; font-style:normal; }.flow .done { color:#2b4778; }.flow .done i { color:#fff; background:var(--blue); }.flow .done:not(:last-child)::after { background:var(--blue); }.flow .active { color:var(--blue); }.flow .active i { color:var(--blue); background:#dce4ff; box-shadow:0 0 0 5px #eef1ff; }
.process-log { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; color:var(--muted); font-size:14px; }.process-log summary { cursor:pointer; }.process-log div { max-height:180px; overflow:auto; margin-top:10px; border-radius:12px; padding:10px 12px; color:#596578; background:#f7f9fc; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }.process-log p { margin:0 0 4px; }.error-log { color:var(--red); }
.result { margin-top:22px; border-radius:18px; padding:24px; background:linear-gradient(135deg,#eef2ff,#f9fbff); }.result-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }.result-heading > div { max-width:640px; }.result-heading .eyebrow { margin-bottom:6px; font-size:11px; }.result-heading h2 { max-width:620px; margin:0; color:#344156; font-size:17px; font-weight:500; line-height:1.68; letter-spacing:-.01em; }.score-orb { display:grid; flex:none; width:76px; height:76px; place-content:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#476cff,#2446db); text-align:center; box-shadow:0 10px 20px rgba(49,80,230,.22); }.score-orb strong { font-size:24px; line-height:1; }.score-orb span { margin-top:4px; font-size:11px; }.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0 14px; }.metrics div { min-width:0; border:1px solid #dce4f5; border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.75); }.metrics span { display:block; color:var(--muted); font-size:12px; }.metrics strong { display:block; overflow:hidden; margin-top:2px; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.question-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.question-summary article { position:relative; min-height:85px; border:1px solid #dce4f5; border-radius:12px; padding:12px 44px 11px 12px; background:rgba(255,255,255,.75); }.question-summary p { display:-webkit-box; overflow:hidden; margin:4px 0 0; color:#596578; font-size:13px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.question-summary span { position:absolute; top:12px; right:12px; color:var(--blue); font-weight:750; }.report-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }.report-actions .primary-button { margin-top:0; }.report-preview { display:block; width:100%; height:680px; margin-top:18px; border:1px solid #d7e0f5; border-radius:14px; background:#fff; }
.history-tabs { display:flex; gap:8px; margin:-6px 0 14px; border-bottom:1px solid var(--line); }.history-tab { border:0; border-bottom:2px solid transparent; padding:8px 4px 10px; color:var(--muted); background:transparent; font-weight:700; cursor:pointer; }.history-tab.active { border-color:var(--blue); color:var(--blue); }.history-list { display:grid; gap:10px; margin-top:16px; }.history-item { display:flex; justify-content:space-between; align-items:center; gap:16px; border:1px solid var(--line); border-radius:15px; padding:14px 16px; background:#fbfcfe; }.history-meta,.history-error,.history-reward { display:block; margin-top:3px; color:var(--muted); font-size:13px; }.history-error { max-width:620px; color:var(--red); }.history-reward { color:var(--green); font-weight:700; }.history-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; }.history-actions a,.history-action { border:0; padding:0; color:var(--blue); background:transparent; font:inherit; font-size:13px; font-weight:650; text-decoration:none; cursor:pointer; }.history-action.delete { color:var(--red); }.state { border-radius:999px; padding:4px 8px; color:#64748b; background:#e9edf2; font-size:12px; font-weight:700; }.state.completed { color:#126744; background:#dff7ea; }.state.running,.state.queued { color:#234fc5; background:#e6ecff; }.state.failed,.state.interrupted { color:#a82727; background:#ffe6e6; }
.admin-shell { width:min(900px,calc(100% - 40px)); }.admin-hero { margin-bottom:26px; }.admin-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.admin-grid .wide { grid-column:1/-1; }.role-list { display:grid; gap:10px; margin:0; }.role-list div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px; }.role-list div:last-child { border:0; padding-bottom:0; }.role-list dt { font-weight:650; }.role-list dd { margin:0; color:var(--muted); text-align:right; }.admin-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }.select-label { display:grid; gap:8px; font-weight:650; }.select-label select { min-height:44px; border:1px solid #cbd5e1; border-radius:12px; padding:0 12px; color:var(--ink); background:#fff; }.admin-output { max-height:260px; overflow:auto; margin:0; border-radius:14px; padding:16px; color:#dbeafe; background:#172033; font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }.danger { color:#b42b2b; }
.time-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0; }.time-summary div { border:1px solid #dce4f5; border-radius:14px; padding:13px 15px; background:#f7f9ff; }.time-summary span,.time-entry span,.time-entry small { display:block; color:var(--muted); font-size:13px; }.time-summary strong { display:block; margin-top:3px; color:var(--blue); font-size:22px; }.time-toolbar { max-width:240px; margin:16px 0; }.time-applications { display:grid; gap:10px; }.time-entry { display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--line); border-radius:14px; padding:13px 15px; background:#fbfcfe; }.time-entry strong { display:block; cursor:pointer; }.time-entry small { margin-top:4px; }.time-entry-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }.time-entry-actions em { font-style:normal; }.time-form { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; align-items:end; margin-top:16px; }.time-form .time-note { grid-column:1/-1; }.time-form .primary-button { width:max-content; margin-top:0; }.time-form input { min-height:44px; border:1px solid #cbd5e1; border-radius:12px; padding:0 12px; color:var(--ink); background:#fff; }
@media (min-width:721px) { .metrics { grid-template-columns:repeat(4,1fr); }.question-summary article { padding-right:104px; }.question-summary span { font-size:12px; }.report-preview { min-height:70vh; } }
@media (max-width:720px) { .shell,.admin-shell { width:min(100% - 24px,900px); margin-top:28px; }.hero { display:grid; gap:18px; }.hero h1 { font-size:36px; }.card { padding:20px; border-radius:20px; }.section-heading { gap:10px; }.tag { display:none; }.flow { grid-template-columns:1fr; gap:0; }.flow li { grid-template-columns:32px 1fr; justify-items:start; align-items:center; gap:10px; padding:0 0 13px; text-align:left; }.flow li:not(:last-child)::after { top:31px; left:14px; width:2px; height:calc(100% - 17px); }.result { padding:20px; }.result-heading { display:grid; grid-template-columns:1fr auto; gap:14px; }.result-heading h2 { font-size:16px; line-height:1.65; }.score-orb { width:68px; height:68px; }.score-orb strong { font-size:22px; }.metrics,.question-summary { grid-template-columns:1fr; }.report-preview { height:440px; min-height:60vh; }.history-item { align-items:flex-start; flex-direction:column; }.history-actions { justify-content:flex-start; }.admin-grid { grid-template-columns:1fr; }.admin-grid .wide { grid-column:auto; }.role-list div { display:grid; gap:3px; }.role-list dd { text-align:left; }.quiet-button { min-height:44px; }.time-entry { align-items:flex-start; flex-direction:column; }.time-entry-actions { justify-content:flex-start; }.time-form { grid-template-columns:1fr; }.time-form .time-note { grid-column:auto; } }