@charset "UTF-8";
:root {
  --ink:#202024; --muted:#686870; --gold:#f6c42c; --gold-soft:#fff7d7;
  --paper:#f7f7f8; --line:#e5e5e9; --white:#fff; --red:#a02b36;
  --red-bg:#fff3f3; --green:#286348; --green-bg:#edf7f0; --radius:16px;
  --gutter:clamp(18px,3.5vw,64px);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; font-size:15px; line-height:1.55; }
body:has(dialog[open]) { overflow:hidden; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
a { color:inherit; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(25px,2.7vw,36px); line-height:1.2; letter-spacing:-1.2px; font-weight:750; }
h2 { font-size:20px; letter-spacing:-.4px; line-height:1.35; }
h3 { font-size:16px; line-height:1.5; }
button:focus-visible,a:focus-visible { outline:3px solid #9c7100; outline-offset:3px; }
.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; }
.skip-link { position:fixed; top:10px; left:20px; z-index:20; background:var(--ink); color:white; border-radius:8px; clip-path:inset(50%); width:1px; height:1px; padding:0; overflow:hidden; }
.skip-link:focus { clip-path:none; width:auto; height:auto; padding:12px 18px; overflow:visible; }
.site-header { height:96px; background:var(--white); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); gap:24px; }
.tiphie-brand { width:72px; height:72px; flex:none; background:#000; display:grid; place-items:center; }
.tiphie-logo { display:block; width:72px; height:72px; object-fit:contain; }
.sirom-logo { display:block; width:146px; height:58px; object-fit:contain; }
.page { width:100%; margin:0 auto; padding:28px var(--gutter) 22px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:20px; }
.eyebrow,.card-eyebrow { font-size:10px; font-weight:750; letter-spacing:1.6px; margin-bottom:7px; color:var(--muted); }
.intro { margin-top:8px; color:var(--muted); font-size:14px; }
.tester-summary { display:flex; align-items:center; justify-content:flex-end; gap:20px; min-width:0; }
.tester-identity { display:flex; align-items:center; gap:11px; border:1px solid transparent; background:transparent; border-radius:10px; padding:9px 10px; text-align:left; color:var(--ink); min-width:0; }
.tester-identity:hover:not(:disabled) { background:white; border-color:var(--line); }
.tester-identity:disabled { opacity:.8; }
.tester-avatar { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%; background:var(--gold-soft); color:#806100; font-size:12px; font-weight:750; }
.tester-details { display:flex; flex-direction:column; min-width:0; }
.tester-details strong { font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.tester-details>span { font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.identity-edit-icon { flex:none; color:var(--muted); }
.tester-count { flex:none; min-width:103px; padding-left:20px; border-left:1px solid #dcdce2; display:flex; flex-direction:column; text-align:center; }
.tester-count strong { font-size:28px; font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums; }
.tester-count span { margin-top:4px; font-size:10px; color:var(--muted); }
.tabs { display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.tab { background:none; border:0; padding:12px 0 14px; border-bottom:3px solid transparent; font-size:14px; font-weight:650; color:var(--muted); display:flex; gap:9px; align-items:center; }
.tab.active { color:var(--ink); border-bottom-color:var(--gold); }
.pending-marker { font-size:10px; padding:2px 6px; background:var(--red-bg); color:var(--red); border-radius:4px; }
.notice { padding:13px 17px; border:1px solid #e6d48c; border-radius:10px; background:var(--gold-soft); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; font-size:13px; }
.notice.error { background:var(--red-bg); border-color:#e7bcc1; color:#86232d; }
.notice.success { background:var(--green-bg); border-color:#b9d9c4; color:#215039; }
.notice-close { border:0; background:transparent; color:inherit; font-size:24px; line-height:1; padding:0 2px; }
.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 3px #20202403; min-width:0; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:18px; }
.section-heading p:not(.card-eyebrow) { font-size:13px; color:var(--muted); margin-top:5px; }
.small-status { display:inline-block; font-size:11px; font-weight:650; color:var(--muted); background:var(--paper); padding:5px 9px; border-radius:5px; white-space:nowrap; }
.small-status.ready { background:var(--green-bg); color:var(--green); }
.small-status.warning { background:var(--red-bg); color:var(--red); }
fieldset { padding:0; margin:0; border:0; min-width:0; }
label { display:block; font-size:12px; font-weight:650; color:#48484e; }
label>span { color:#9c7100; }
input,textarea { width:100%; border:1px solid #dcdce2; border-radius:9px; background:var(--white); color:var(--ink); padding:11px 13px; transition:border-color .15s,box-shadow .15s; }
input { margin-top:7px; min-height:44px; }
input::placeholder,textarea::placeholder { color:#909098; opacity:1; }
input:hover,textarea:hover { border-color:#b8b8c0; }
input:focus,textarea:focus { border-color:#c09a18; outline:none; box-shadow:0 0 0 3px #f6c42c26; }
input:disabled { background:#f7f7f8; color:#5a5a63; opacity:1; }
textarea { display:block; resize:vertical; min-height:120px; font-size:14px; line-height:1.75; }
textarea:read-only { background:#fafafa; color:#4c4c55; }
.workflow-bar { display:flex; gap:16px; align-items:center; margin:18px 1px; font-size:12px; font-weight:550; color:var(--muted); }
.workflow-bar>span:not(.step-line) { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.workflow-bar b { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:1px solid #dedee3; border-radius:50%; font-size:11px; color:var(--ink); background:white; }
.step-line { height:1px; background:var(--line); width:32px; }
.workspace { display:flex; flex-direction:column; gap:22px; }
.note-card,.results-card { width:100%; padding:25px 28px; }
.counter { font-size:11px; color:var(--muted); white-space:nowrap; align-self:flex-end; font-variant-numeric:tabular-nums; }
.note-card textarea { min-height:220px; }
.field-help { font-size:12px; color:var(--muted); margin-top:9px; }
.generation-actions { display:flex; align-items:center; gap:20px; margin-top:17px; }
.generation-actions .field-help { margin:0; }
.button { border:1px solid transparent; border-radius:9px; display:inline-flex; justify-content:center; align-items:center; gap:10px; font-size:13px; font-weight:650; min-height:44px; padding:11px 18px; transition:background .15s,transform .15s; line-height:1.35; }
.button-primary { background:var(--ink); color:var(--white); }
.button-primary:hover:not(:disabled) { background:#37373d; }
.button-primary:disabled { background:#e7e7eb; color:#8c8c94; }
.button-primary .button-arrow { color:var(--gold); font-size:19px; line-height:1; }
.button-primary:disabled .button-arrow { color:#8c8c94; }
.button-secondary { background:white; border-color:#dbdbe2; color:var(--ink); }
.button-secondary:hover:not(:disabled) { background:var(--paper); }
.button-secondary:disabled,.button-quiet:disabled { opacity:.45; }
.button-quiet { background:transparent; color:#50505b; border-color:var(--line); min-height:34px; padding:6px 11px; font-size:12px; }
.button-quiet:hover:not(:disabled) { background:var(--paper); }
.generation-actions .button { flex:none; min-width:225px; }
.note-card>#new-test,.note-card>#new-after-uncertain { margin-top:13px; }
.results-empty { min-height:175px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:10px 18px 18px; }
.empty-symbol { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--gold-soft); color:#917012; font-size:25px; margin-bottom:12px; }
.results-empty h3 { font-weight:650; margin-bottom:5px; }
.results-empty>p { font-size:13px; color:var(--muted); }
.rubric-preview { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:18px; }
.rubric-preview span { font-size:11px; background:var(--paper); color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:5px 10px; }
.result-block { padding:24px 0; border-bottom:1px solid var(--line); }
.result-block:first-child { padding-top:5px; }
.result-block:last-child { border:0; padding-bottom:0; }
.result-block h3 { display:flex; align-items:flex-start; gap:11px; margin-bottom:12px; font-size:15px; font-weight:700; }
.result-block h3 span { font-size:10px; background:var(--gold-soft); color:#8b6800; min-width:25px; display:inline-block; text-align:center; padding:3px 4px; border-radius:4px; letter-spacing:.2px; }
.rendered-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; color:#44444d; }
.essay-meta { font-size:11px; color:var(--muted); margin-bottom:15px; padding-bottom:12px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.essay-error,.identity-dialog-error { font-size:13px; color:#86232d; background:var(--red-bg); border:1px solid #e7bcc1; padding:12px 14px; border-radius:9px; margin-bottom:16px; overflow-wrap:anywhere; }
.comment-card { padding:25px 28px; margin-top:22px; border-top:3px solid var(--gold); }
.comment-card textarea { min-height:105px; }
.comment-actions { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:15px; }
.comment-actions .field-help { margin:0; }
.comment-actions .button { white-space:nowrap; }
.history-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:28px 0 18px; }
.history-heading p { font-size:13px; color:var(--muted); margin-top:5px; overflow-wrap:anywhere; }
.history-card { overflow:hidden; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; min-width:810px; }
th { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); background:#fafafa; padding:15px 18px; border-bottom:1px solid var(--line); font-weight:650; }
td { font-size:12px; padding:18px; border-bottom:1px solid var(--line); vertical-align:middle; }
th:nth-child(1) { width:140px; } th:nth-child(2) { width:30%; } th:nth-child(3) { width:180px; } th:nth-child(4) { width:25%; }
td:nth-child(5) { text-align:right; }
.history-note,.history-comment { white-space:normal; overflow-wrap:anywhere; max-width:330px; line-height:1.6; }
.history-date { white-space:nowrap; color:#666671; font-variant-numeric:tabular-nums; }
.status-chip { display:inline-block; font-size:10px; line-height:1.4; font-weight:650; padding:5px 8px; border-radius:5px; background:var(--paper); color:#62626e; }
.status-chip.success { background:var(--green-bg); color:var(--green); }
.status-chip.pending { background:#ffe3e6; color:var(--red); }
.status-chip.running { background:var(--gold-soft); color:#8b6500; }
.status-chip.failed { background:#f4eded; color:#80545b; }
.history-uncommented { background:#fff8f8; }
.history-uncommented td:first-child { box-shadow:inset 3px 0 var(--red); }
.comment-missing { color:var(--red); font-weight:600; }
.history-empty { text-align:center; padding:55px 20px; }
.history-empty p { font-size:13px; color:var(--muted); margin-top:8px; }
.pagination { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:11px; color:var(--muted); }
.pagination>div { display:flex; gap:8px; }
.history-explanation { font-size:11px; color:var(--muted); margin:14px 2px; display:flex; gap:8px; align-items:center; }
.legend-mark { display:inline-block; flex:none; width:7px; height:7px; background:var(--red); border-radius:50%; }
.page-footer { display:flex; justify-content:space-between; gap:20px; color:#8b8b94; font-size:11px; margin-top:32px; padding-top:18px; border-top:1px solid var(--line); }
.page-footer>span:first-child { font-weight:650; color:#6d6d77; }
.spinner { width:15px; height:15px; border:2px solid #ffffff66; border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.identity-dialog { border:1px solid var(--line); border-radius:20px; width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:32px; color:var(--ink); background:white; box-shadow:0 24px 100px #0003; }
.identity-dialog::backdrop { background:#1a1a22a6; backdrop-filter:blur(4px); }
.dialog-heading { margin-bottom:20px; }
.dialog-symbol { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--gold-soft); color:#907012; font-size:26px; margin-bottom:18px; }
.dialog-heading h2 { font-size:25px; margin-bottom:8px; }
.dialog-heading>p:last-child { font-size:13px; color:var(--muted); }
.identity-dialog .small-status { margin-bottom:16px; }
.identity-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; }
.identity-grid>label:first-child { grid-column:1/-1; }
.identity-help { font-size:11px; color:var(--muted); margin-top:15px; }
.identity-dialog-error { margin:15px 0 0; }
.identity-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.identity-actions .button-primary { min-width:140px; }
@media(max-width:1050px) {
  .page-heading { align-items:flex-start; }
  .tester-summary { gap:12px; }
  .tester-identity { padding:7px 0; gap:8px; }
  .tester-count { padding-left:12px; min-width:92px; }
  .tester-details { max-width:200px; }
  .identity-edit-icon { display:none; }
  .intro { font-size:13px; }
}
@media(max-width:760px) {
  :root { --gutter:18px; }
  .site-header { height:80px; }
  .tiphie-brand,.tiphie-logo { width:56px; height:56px; }
  .sirom-logo { width:122px; height:48px; }
  .page { padding-top:24px; }
  .page-heading { display:block; margin-bottom:12px; }
  .tester-summary { margin-top:20px; justify-content:space-between; gap:12px; }
  .tester-details { max-width:none; }
  .tester-count strong { font-size:25px; }
  .tester-count span { font-size:10px; }
  .tabs { margin-bottom:16px; }
  .workflow-bar { gap:8px; justify-content:space-between; font-size:10px; align-items:flex-start; }
  .workflow-bar>span:not(.step-line) { white-space:normal; align-items:flex-start; max-width:31%; gap:6px; }
  .workflow-bar b { flex:none; width:19px; height:19px; font-size:10px; }
  .step-line { display:none; }
  .workspace { gap:18px; }
  .note-card,.results-card,.comment-card { padding:20px; }
  .note-card textarea { min-height:230px; }
  .section-heading { gap:10px; }
  h2 { font-size:18px; }
  .counter { font-size:10px; }
  .generation-actions { display:block; }
  .generation-actions .button { width:100%; min-width:0; }
  .generation-actions .field-help { margin-top:10px; }
  .comment-actions { display:block; }
  .comment-actions .button { width:100%; margin-top:14px; white-space:normal; }
  .history-heading { align-items:flex-start; }
  .history-heading .button { font-size:12px; }
  .history-explanation { align-items:flex-start; }
  .page-footer { font-size:10px; }
  .page-footer>span:last-child { max-width:210px; text-align:right; }
  .pagination { align-items:flex-start; gap:10px; }
  .pagination>div { gap:5px; }
  .button { min-height:44px; }
  .identity-dialog { padding:25px 22px; }
  .identity-grid { gap:16px 12px; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }