:root { --navy: #102334; --gold: #C5A059; --bg-dark: #020617; }
        body { background: var(--bg-dark); color: white; font-family: Arial, Helvetica, sans-serif; min-height: 100vh; margin: 0; padding: 3rem 1.5rem; }
        .glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2.5rem; }
        #login-card, #welcome-card { max-width: 600px; margin: 4rem auto; text-align: center; }
        #dashboard-view { max-width: 900px; margin: 0 auto; }
        .section { margin-bottom: 2rem; }
        .section h3 { color: var(--gold); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
        .row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .row:last-child { border-bottom: none; }
        select, input, textarea { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 0.5rem 0.75rem; border-radius: 8px; font-family: inherit; }
        /* A <select>'s OPEN option list is rendered natively by the browser/OS and
           ignores the semi-transparent background above, making option text
           invisible (white-on-white). Force a solid, lighter-navy background. */
        select { background-color: #1e2b3d; }
        select option { background-color: #1e2b3d; color: white; }
        .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
        .badge-gray { background: rgba(148,163,184,0.15); color: #cbd5e1; }
        .badge-amber { background: rgba(245,158,11,0.15); color: #fcd34d; }
        .badge-green { background: rgba(34,197,94,0.15); color: #86efac; }
        .progress-track { background: rgba(255,255,255,0.08); border-radius: 999px; height: 10px; overflow: hidden; margin: 0.5rem 0 1.5rem; }
        .progress-fill { background: var(--gold); height: 100%; }
        .btn-gold { background: var(--gold); color: #000; font-weight: 700; padding: 0.6rem 1.2rem; border-radius: 8px; border: none; cursor: pointer; }
        .btn-gold:hover { background: #d8b06c; }
        .btn-gold:disabled { opacity: 0.5; cursor: not-allowed; }
        .portal-file-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0.85rem; }
        .portal-file-card { border:1px solid rgba(255,255,255,0.10); border-radius:12px; overflow:hidden; background:rgba(255,255,255,0.025); }
        .portal-file-thumb { height:140px; background:rgba(0,0,0,0.22); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
        .portal-file-thumb img { width:100%; height:100%; object-fit:cover; }
        .portal-file-card-body { padding:0.8rem; }
        .portal-file-name { font-weight:700; overflow-wrap:anywhere; }
        .portal-file-meta { color:#94a3b8; font-size:0.72rem; margin-top:0.25rem; }
        .portal-file-badges { position:absolute; left:0.45rem; top:0.45rem; display:flex; gap:0.3rem; flex-wrap:wrap; }
        .portal-file-actions { display:flex; gap:0.4rem; flex-wrap:wrap; margin-top:0.7rem; }
        .portal-file-viewer-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.94); display:flex; flex-direction:column; }
        .portal-file-viewer-head { padding:0.7rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; border-bottom:1px solid rgba(255,255,255,0.12); background:#07101c; }
        .portal-file-viewer-body { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0.75rem; }
        .portal-file-viewer-body img { max-width:100%; max-height:100%; object-fit:contain; }
        .portal-file-viewer-body iframe { width:100%; height:100%; border:0; background:white; border-radius:8px; }
        .portal-file-pano { width:100%; height:100%; min-height:420px; }
        .portal-file-compare { width:100%; height:100%; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
        .portal-file-compare-pane { min-width:0; min-height:0; display:flex; flex-direction:column; gap:0.35rem; }
        .portal-file-compare-pane > div:last-child { flex:1; min-height:360px; }
        @media (max-width: 760px) {
            .portal-file-compare { grid-template-columns:1fr; overflow-y:auto; }
            .portal-file-compare-pane > div:last-child { min-height:55vh; }
        }