:root { --navy:#071629; --navy2:#0d2944; --gold:#f4b41a; --cream:#fffaf0; --text:#15263a; --muted:#627185; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; color:var(--text); background:#f3f6f9; }
.login-page { min-height:100vh; background:radial-gradient(circle at 15% 15%,#21496a 0,transparent 32%),linear-gradient(145deg,var(--navy),#0b243d 60%,#183952); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(440px,100%); background:rgba(255,255,255,.98); padding:42px 38px 34px; border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.32); text-align:center; }
.brand-mark,.brand-small { display:grid; place-items:center; background:var(--gold); color:var(--navy); font-weight:900; }
.brand-mark { width:70px; height:70px; margin:0 auto 22px; border-radius:20px; font-size:35px; box-shadow:0 10px 25px rgba(244,180,26,.3); }
.eyebrow { color:#b97800; font-weight:800; letter-spacing:.16em; font-size:12px; margin:0 0 10px; }
h1 { margin:0; color:var(--navy); font-size:clamp(30px,5vw,45px); letter-spacing:-.035em; }
.intro { color:var(--muted); line-height:1.6; margin:14px auto 26px; }
form { text-align:left; }
label { display:block; font-size:14px; font-weight:700; margin-bottom:8px; }
.password-row { position:relative; }
input { width:100%; border:1px solid #cbd4de; background:#fff; border-radius:12px; padding:15px 58px 15px 15px; font-size:16px; outline:none; transition:.2s; }
input:focus { border-color:#c98a00; box-shadow:0 0 0 4px rgba(244,180,26,.17); }
.show-password { position:absolute; right:7px; top:7px; bottom:7px; border:0; border-radius:8px; background:#eef2f6; color:#405165; font-weight:700; cursor:pointer; }
.primary-button { width:100%; margin-top:16px; padding:15px; border:0; border-radius:12px; background:var(--gold); color:var(--navy); font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 8px 18px rgba(244,180,26,.25); }
.primary-button:hover { background:#ffc332; transform:translateY(-1px); }
.secure-note { margin:22px 0 0; color:#7a8795; font-size:13px; }
.error { color:#a42020; background:#fff0f0; border:1px solid #ffcaca; padding:11px; border-radius:10px; margin:0 0 18px; text-align:left; }
.topbar { height:72px; padding:0 max(24px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; }
.brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-weight:800; }
.brand-small { width:36px; height:36px; border-radius:10px; font-size:19px; }
.logout { color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.25); border-radius:9px; padding:9px 14px; font-size:14px; }
.content { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:58px 0 50px; }
.hero { text-align:center; margin-bottom:36px; }
.hero p:last-child { color:var(--muted); font-size:17px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:22px; }
.search-box { flex:1; max-width:520px; position:relative; margin:0; }
.search-box span { position:absolute; left:15px; top:10px; font-size:25px; color:#778494; }
.search-box input { padding-left:45px; box-shadow:0 5px 18px rgba(24,48,72,.06); }
.site-count { color:var(--muted); font-size:14px; white-space:nowrap; }
.toolbar-actions { display:flex; align-items:center; gap:14px; }
.add-button { border:0; border-radius:11px; padding:12px 16px; background:var(--gold); color:var(--navy); font-weight:800; cursor:pointer; white-space:nowrap; }
.success { margin:0 0 18px; padding:12px 15px; color:#176b3a; background:#eaf8f0; border:1px solid #bfe8cf; border-radius:11px; }
.directory-error { margin:0 0 18px; }
.site-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.site-card { min-width:0; display:flex; align-items:center; gap:12px; padding:15px; border:1px solid #e0e6ec; border-radius:16px; background:#fff; color:inherit; box-shadow:0 5px 20px rgba(24,48,72,.055); transition:.2s; }
.site-card:hover { border-color:#e5ae2f; transform:translateY(-3px); box-shadow:0 13px 28px rgba(24,48,72,.12); }
.site-card[hidden] { display:none; }
.site-main { min-width:0; flex:1; display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none; }
.site-icon { position:relative; flex:0 0 52px; width:52px; height:52px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:var(--cream); font-size:25px; }
.site-icon img { display:none; position:absolute; inset:9px; width:34px; height:34px; object-fit:contain; border-radius:7px; background:#fff; }
.site-icon img.loaded { display:block; }
.site-info { min-width:0; display:flex; flex-direction:column; gap:5px; }
.site-info strong { color:var(--navy); font-size:17px; }
.site-info small { color:var(--muted); line-height:1.35; }
.site-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#a66d00; font-size:12px; }
.card-actions { flex:0 0 auto; display:flex; flex-direction:column; gap:7px; }
.preview-button,.open-button { min-width:73px; padding:7px 10px; border-radius:8px; font-size:12px; font-weight:750; text-align:center; cursor:pointer; }
.preview-button { border:1px solid #d7dee6; background:#f5f7f9; color:#405165; }
.open-button { border:1px solid rgba(244,180,26,.4); background:#fff9e9; color:#8a5b00; text-decoration:none; }
.empty-state { text-align:center; padding:50px; color:var(--muted); }
footer { text-align:center; color:#758292; font-size:13px; padding:8px 20px 32px; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(3,15,28,.72); backdrop-filter:blur(5px); }
.modal-backdrop[hidden] { display:none; }
.modal { position:relative; width:min(540px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:34px; border-radius:20px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.35); }
.modal h2 { margin:0; color:var(--navy); font-size:28px; }
.modal-intro { color:var(--muted); line-height:1.5; }
.modal-close { position:absolute; top:15px; right:15px; width:36px; height:36px; border:0; border-radius:50%; background:#edf1f5; color:#405165; font-size:24px; cursor:pointer; }
.add-form label { margin-top:15px; }
.add-form input { padding-right:15px; }
.form-actions { display:flex; justify-content:flex-end; gap:11px; margin-top:24px; }
.cancel-button { padding:13px 18px; border:1px solid #ccd5df; border-radius:11px; background:#fff; color:#405165; font-weight:700; cursor:pointer; }
.save-button { width:auto; margin:0; padding-inline:22px; }
.modal-open { overflow:hidden; }
.preview-backdrop { padding:28px; }
.preview-modal { width:min(1120px,100%); height:min(760px,calc(100vh - 56px)); display:flex; flex-direction:column; overflow:hidden; background:#fff; border-radius:20px; box-shadow:0 28px 80px rgba(0,0,0,.38); }
.preview-header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 20px; color:#fff; background:var(--navy); }
.preview-header small { color:#e7ae29; font-size:10px; font-weight:800; letter-spacing:.13em; }
.preview-header h2 { margin:3px 0 0; font-size:19px; }
.preview-actions { display:flex; align-items:center; gap:10px; }
.preview-actions a { padding:8px 12px; border-radius:8px; color:var(--navy); background:var(--gold); text-decoration:none; font-size:13px; font-weight:800; }
.preview-actions button { width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; background:transparent; font-size:23px; cursor:pointer; }
.preview-frame-wrap { position:relative; min-height:0; flex:1; background:#eef2f5; }
.preview-frame-wrap iframe { width:100%; height:100%; border:0; background:#fff; }
.preview-help { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); padding:7px 12px; border-radius:8px; color:#586879; background:rgba(255,255,255,.93); box-shadow:0 3px 12px rgba(0,0,0,.1); font-size:11px; pointer-events:none; }
@media (max-width:720px) { .site-grid{grid-template-columns:1fr}.content{width:min(100% - 28px,1180px);padding-top:38px}.toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{justify-content:space-between}.search-box{max-width:none;width:100%}.login-card{padding:34px 24px}.site-card{padding:13px}.site-icon{flex-basis:46px;width:46px;height:46px}.card-actions{gap:5px}.preview-button,.open-button{min-width:62px;padding:6px;font-size:11px}.topbar{padding:0 16px}.modal{padding:30px 22px}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.preview-backdrop{padding:10px}.preview-modal{height:calc(100vh - 20px)}.preview-help{white-space:normal;text-align:center}.preview-actions a{display:none} }