:root{
  --brand-blue:#17308C;
  --grad-start:#EE3C16;
  --grad-end:#FA7D05;
  --bg:#f7f9fc;
  --text:#1f2937;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html, body{height:100%}
body{font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; margin:0; background:var(--bg); color:var(--text);}    
.page{min-height:100vh; display:flex; flex-direction:column}
.main{flex:1; display:flex; align-items:center; justify-content:center; padding:1rem}
.a11y-hidden{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
a{color:var(--brand-blue); text-decoration:none}
a:hover{text-decoration:underline}
.logout-link{color:#fff; text-decoration:underline}
.topbar{background:var(--brand-blue); color:#fff;}
.topbar-inner{max-width:960px; margin:0 auto; padding:0.75rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:0.75rem; font-weight:700; letter-spacing:.2px}
.brand img{height:56px; width:auto}
.user{font-size:.95rem}
.container{max-width:960px; margin:0 auto; padding:0 1rem; display:flex; flex-direction:column; align-items:center; min-height:calc(100vh - 64px)}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.25rem 1.25rem; box-shadow:0 6px 20px rgba(0,0,0,.04); margin:auto 0; width:100%}
h1,h2{margin:.25rem 0 1rem}
p{color:var(--muted)}
label{font-weight:600; color:#111827}
input, textarea{width:100%; padding:.65rem .75rem; margin:.4rem 0 0.9rem; border:1px solid var(--border); border-radius:8px; background:#fff}
input:focus, textarea:focus{outline:2px solid rgba(23,48,140,.25); border-color:#c7d2fe}
.btn{display:inline-flex; align-items:center; gap:.5rem; border:none; border-radius:999px; padding:.65rem 1.1rem; color:#fff; font-weight:600; cursor:pointer; background:linear-gradient(135deg, var(--grad-start), var(--grad-end)); box-shadow:0 6px 16px rgba(250,125,5,.25)}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.flash{margin:0 0 .75rem; padding:.6rem .8rem; border-radius:8px; border:1px solid #F3F4F6}
.flash-error{background:#FEF2F2; color:#991B1B; border-color:#FECACA}
.flash-success{background:#ECFDF5; color:#065F46; border-color:#A7F3D0}
.helper{margin-top:0.5rem; font-size:.9rem; color:var(--muted)}
.footer{margin-top:auto; text-align:center; color:var(--muted); font-size:.85rem; padding:1rem 0}
.filelist{margin:.25rem 0 .75rem; color:var(--muted); font-size:.92rem}
.filelist .item{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.35rem .5rem; border:1px dashed var(--border); border-radius:8px; margin:.35rem 0; background:#fff}
.filelist .name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filelist .actions{display:flex; gap:.5rem}
.filelist .remove{background:#fff; border:1px solid #ef4444; color:#ef4444; border-radius:999px; padding:.25rem .6rem; cursor:pointer}
progress{width:100%; height:10px}
.hidden{display:none !important}
.mt-2{margin-top:.5rem}
.dropzone{height:5rem;margin-top:.25rem; margin-bottom: 1.75rem; border:2px dashed var(--brand-blue); border-radius:12px; padding-top:1.75rem; text-align:center; color:var(--brand-blue); background:rgba(23,48,140,.04); cursor:pointer}
.dropzone.dragover{background:rgba(23,48,140,.12)}
.pt-2{padding:0.5rem;}