html,body,#root{height:100%;width:100%}body{margin:0;padding:0;background:#f4f7fb;overflow-x:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}:root{--creci-blue: #005890;--creci-blue-2: #004F80;--creci-green: #A0C838;--creci-orange: #F09018;--creci-magenta: #C84080;--bg: #F4F7FB;--text: #0F172A;--muted: #6B7280;--border: #E6EDF6;--shadow: 0 14px 30px rgba(2, 25, 55, .1);--shadow-soft: 0 10px 22px rgba(2, 25, 55, .08);--radius: 16px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}.page{min-height:100vh;display:flex;justify-content:center}.shell{width:100%;max-width:1200px;padding:28px 24px 40px}.topbar{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:22px}.header{display:flex;justify-content:center;align-items:center;padding:18px 0 22px}.logo{display:block;margin:0 auto;width:min(220px,90vw);height:auto}.uploadCard{width:100%;max-width:520px;margin:0 auto 26px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}.uploadRow{width:100%;display:flex;align-items:center;gap:12px}.fileBtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;background:#f1f6fd;border:1px solid #D9E6F7;color:#0b2a4a;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.fileBtn input{display:none}.fileName{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px dashed #D3DEF0;background:#fafcff;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primaryBtn{width:100%;padding:12px 14px;border:0;border-radius:12px;cursor:pointer;font-weight:700;color:#fff;background:linear-gradient(180deg,var(--creci-blue),var(--creci-blue-2));box-shadow:0 12px 22px #0058902e;transition:transform .08s ease,filter .12s ease}.primaryBtn:hover{filter:brightness(1.03)}.primaryBtn:active{transform:translateY(1px)}.status{margin:0;color:var(--muted);font-size:14px;text-align:center}.grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:18px}.card h3{margin:0 0 12px;font-size:18px;color:var(--creci-blue-2)}.readonlyBox{height:420px;border-radius:14px;border:1px solid #E3EAF5;background:#fff;padding:14px;overflow:auto;line-height:1.5;font-size:14px;white-space:pre-wrap}.placeholder{color:#9aa7b6}@media(max-width:980px){.grid{grid-template-columns:1fr}.logo{height:56px}.readonlyBox{height:320px}}.fileBtn{overflow:hidden;transition:transform .1s ease,box-shadow .18s ease,filter .18s ease}.fileBtn:after{content:"";position:absolute;inset:-40% -30%;background:radial-gradient(circle,rgba(0,88,144,.22),transparent 60%);transform:translate(-70%) rotate(8deg);transition:transform .45s ease;pointer-events:none}.fileBtn:hover{transform:translateY(-1px);box-shadow:0 10px 24px #0058902e;filter:brightness(1.03)}.fileBtn:hover:after{transform:translate(35%) rotate(8deg)}.fileBtn:active{transform:translateY(0)}.fileBtn.isDisabled,.fileBtn.isDisabled:hover{opacity:.55;cursor:not-allowed;box-shadow:none;filter:none}.primaryBtn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}.primaryBtn:disabled:hover{filter:none}.progressWrap{width:100%;margin-top:6px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--border)}.progressHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.progressTitle{font-weight:700;color:var(--creci-blue-2);font-size:14px}.progressPct{font-size:13px;color:var(--muted)}.progressBar{height:10px;border-radius:999px;background:#e9f0fa;border:1px solid #D9E6F7;overflow:hidden}.progressFill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--creci-blue),var(--creci-blue-2));transition:width .25s ease}.progressStatus{margin-top:8px;font-size:13px;color:var(--muted)}.errorBox{width:100%;margin-top:10px;padding:12px 14px;border-radius:14px;background:#dc26260f;border:1px solid rgba(220,38,38,.25);color:#991b1b;font-size:14px}