:root{--dark:#171615;--surface:#fff;--bg:#efefee;--text:#1d1c1b;--muted:#696663;--border:#d8d5d2;--danger:#a52f2f}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
body.modal-open{overflow:hidden}
.topbar{height:94px;background:#111;display:flex;align-items:center;gap:14px;padding:0 34px;color:#fff}
.logo-box{width:46px;height:46px;border-radius:4px;background:#111;display:grid;place-items:center}
.logo-box img{width:100%;height:100%;object-fit:contain}
.topbar strong{display:block;font-size:24px}.topbar small{color:#aaa}
.page{min-height:calc(100vh - 94px);padding:64px 20px;display:grid;place-items:start center}
.card{width:min(100%,620px);padding:44px;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.14)}
.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:800;color:#6e6b68}
h1{font-size:44px;margin:9px 0}.intro{color:var(--muted);margin:0 0 30px}
label{display:block;margin:18px 0 8px;font-weight:700}
input{width:100%;height:52px;padding:0 15px;border:1px solid var(--border);border-radius:6px;font-size:16px;outline:none}
input::placeholder{color:#bbb}
input:focus{border-color:#222;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
#searchButton{width:100%;height:52px;margin-top:25px;border:0;border-radius:6px;background:#222;color:#fff;font-size:16px;font-weight:800;cursor:pointer}
#searchButton:disabled{opacity:.7}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid #888;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.message{margin-top:18px;padding:13px;border:1px solid #efc2c2;background:#fff1f1;color:var(--danger);border-radius:6px}
.modal{position:fixed;inset:0;z-index:1000;display:none}.modal.open{display:grid;place-items:center}
.backdrop{position:absolute;inset:0;background:rgba(20,19,18,.65);backdrop-filter:blur(2px)}
.modal-panel{position:relative;width:min(92vw,980px);height:min(88vh,820px);background:#fff;border-radius:8px;overflow:hidden;display:grid;grid-template-rows:70px 1fr 76px;box-shadow:0 30px 100px rgba(0,0,0,.35)}
.modal-header{background:#1d1b1a;color:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.modal-header h2{margin:0;font-size:23px;font-weight:600}.close-x{position:absolute;right:16px;top:12px;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer}
.viewer{padding:22px;background:#f1f1f0;min-height:0}.viewer iframe{width:100%;height:100%;border:0;background:#3a3a3a}
.modal-footer{display:flex;align-items:center;justify-content:center}.close-button{min-width:110px;height:44px;border:1px solid #222;border-radius:6px;background:#fff;font-weight:700;cursor:pointer}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:640px){.topbar{height:78px;padding:0 18px}.page{padding:26px 12px}.card{padding:28px 20px}h1{font-size:34px}.modal-panel{width:100vw;height:100vh;border-radius:0}.viewer{padding:8px}}