.tr-page { --tr-ink:#172941; --tr-muted:#65758a; --tr-line:#dae3ed; --tr-blue:#0869bc; max-width:1390px; margin:0 auto; color:var(--tr-ink); font-size:14px; }
.tr-page * { box-sizing:border-box; }
.tr-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:27px 30px; background:linear-gradient(112deg,#f3f8fd,#fff 65%); border:1px solid var(--tr-line); border-radius:16px; }
.tr-eyebrow,.tr-section-title small { margin:0 0 9px; color:var(--tr-blue); font-size:11px; font-weight:750; letter-spacing:.08em; }
.tr-hero h1 { margin:0 0 10px; font-size:28px; line-height:1.2; letter-spacing:-.025em; }
.tr-hero p:last-child { margin:0; color:var(--tr-muted); line-height:1.7; }
.tr-test { display:inline-block; margin-left:8px; padding:2px 7px; border-radius:5px; background:#fff4e2; color:#9c5b0b; letter-spacing:0; }
.tr-status { flex:0 0 190px; display:flex; flex-direction:column; gap:5px; padding:16px 18px; background:#fff; border:1px solid var(--tr-line); border-radius:12px; box-shadow:0 6px 18px #1736560b; }
.tr-status small,.tr-status span { color:var(--tr-muted); font-size:12px; }.tr-status strong { color:#0a7c60; font-size:16px; }.tr-status-pending strong { color:#a56a0b; }.tr-status-rejected strong { color:#b43939; }.tr-status-unsubmitted strong { color:var(--tr-ink); }
.tr-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 12px; }.tr-toolbar label { display:flex; align-items:center; gap:10px; color:var(--tr-muted); font-size:12px; font-weight:650; }.tr-toolbar select { min-width:240px; max-width:440px; padding:9px 34px 9px 12px; border:1px solid #ccd8e5; border-radius:8px; background:#fff; color:var(--tr-ink); font:inherit; font-size:13px; }.tr-text-button,.tr-link { padding:6px 0; border:0; background:transparent; color:var(--tr-blue); font:inherit; font-weight:700; cursor:pointer; }.tr-text-button:hover,.tr-link:hover { text-decoration:underline; }
.tr-message { min-height:42px; margin:0 0 15px; padding:11px 15px; border-radius:9px; background:#eaf4fd; color:#155780; line-height:1.45; }.tr-message.tr-error { background:#fff0ed; color:#a13930; }
.tr-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.92fr); gap:18px; align-items:start; }.tr-read-column { display:grid; gap:18px; }.tr-card { padding:24px 26px; background:#fff; border:1px solid var(--tr-line); border-radius:13px; box-shadow:0 4px 16px #19395a07; }.tr-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:17px; margin-bottom:16px; border-bottom:1px solid #e8eef4; }.tr-section-title small { display:block; }.tr-section-title h2 { margin:0; font-size:18px; line-height:1.35; }.tr-pill { padding:5px 9px; border-radius:20px; background:#e9f5ef; color:#087a54; font-size:11px; font-weight:700; white-space:nowrap; }.tr-pill-warn { background:#fff3df; color:#a36a10; }
.tr-data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 21px; }.tr-data-row { min-width:0; display:flex; flex-direction:column; gap:5px; }.tr-data-row span { color:var(--tr-muted); font-size:12px; }.tr-data-row strong { overflow-wrap:anywhere; font-size:13px; font-weight:650; line-height:1.55; }.tr-card .tr-link { margin-top:18px; }.tr-pending { border-color:#eadab9; background:#fffdf9; }
.tr-history { display:grid; gap:0; margin:0; padding:0; list-style:none; }.tr-history li { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid #edf1f5; }.tr-history li:last-child { border-bottom:0; }.tr-history-dot { flex:0 0 7px; height:7px; margin-top:7px; border-radius:50%; background:#86a7c8; }.tr-history li div { min-width:0; }.tr-history strong { display:block; font-size:13px; font-weight:700; }.tr-history small { display:block; margin-top:5px; color:var(--tr-muted); line-height:1.5; }.tr-history-empty { color:var(--tr-muted); }
.tr-form-card { position:sticky; top:18px; }.tr-hint { margin:0 0 19px; color:var(--tr-muted); line-height:1.6; font-size:12px; }.tr-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.tr-field { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:12px; font-weight:700; }.tr-field:nth-child(-n+3) { grid-column:1 / -1; }.tr-field b,.tr-upload b { color:#c84747; }.tr-field input { width:100%; min-height:39px; padding:9px 11px; border:1px solid #cbd7e4; border-radius:7px; background:#fff; color:var(--tr-ink); font:inherit; font-size:13px; font-weight:450; }.tr-field input:focus,.tr-toolbar select:focus,.tr-upload input:focus { outline:2px solid #acd2f7; outline-offset:1px; border-color:#3c91d5; }.tr-field input:disabled { background:#f4f6f8; }
.tr-upload { margin-top:20px; padding:17px; border:1px dashed #b9ccdd; border-radius:10px; background:#f9fbfd; }.tr-upload > strong { display:block; font-size:13px; }.tr-upload p,.tr-upload small { display:block; margin:7px 0 11px; color:var(--tr-muted); font-size:12px; line-height:1.55; }.tr-upload input { max-width:100%; color:var(--tr-ink); font-size:12px; }.tr-upload-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }.tr-upload-actions button { padding:8px 11px; border:1px solid #b5c9db; border-radius:7px; background:#fff; color:#176395; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }.tr-upload-actions button:hover { background:#edf6fd; }.tr-upload-actions button:disabled { opacity:.5; cursor:default; }
.tr-submit-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:17px; border-top:1px solid #e8eef4; }.tr-submit-bar p { margin:0; color:var(--tr-muted); font-size:12px; line-height:1.45; }.tr-submit-bar button { flex:none; padding:10px 16px; border:1px solid #0965b4; border-radius:8px; background:#096dc2; color:#fff; font:inherit; font-weight:750; cursor:pointer; }.tr-submit-bar button:hover { background:#005ba5; }.tr-submit-bar button:disabled { opacity:.55; cursor:default; }.tr-loading { color:var(--tr-muted); }
@media(max-width:1100px) { .tr-layout { grid-template-columns:1fr; }.tr-form-card { position:static; } }
@media(max-width:650px) { .tr-hero { align-items:stretch; flex-direction:column; padding:20px; }.tr-status { flex:auto; }.tr-toolbar { align-items:stretch; flex-direction:column; }.tr-toolbar label { align-items:stretch; flex-direction:column; }.tr-toolbar select { max-width:none; }.tr-card { padding:19px; }.tr-data,.tr-fields { grid-template-columns:1fr; }.tr-field:nth-child(-n+3) { grid-column:auto; }.tr-submit-bar { align-items:stretch; flex-direction:column; }.tr-submit-bar button { width:100%; } }