:root{
  --bg:#0b0f14;
  --card:#0f1520;
  --muted:#a7b1c2;
  --text:#eaf0ff;
  --accent:#7aa2ff;
  --accent-2:#6ee7b7;
  --border:#1b2330;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #142036 0, transparent 60%), var(--bg);
}

.container{max-width:1000px;margin:0 auto;padding:20px}
.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--border);padding-block:18px;margin-bottom:8px;
}
.header h1{margin:0;font-size:28px;letter-spacing:.3px}
.subtitle{color:var(--muted);margin:.2rem 0 0}
.links a{color:var(--muted);text-decoration:none;margin-left:16px}
.links a:hover{color:var(--text)}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  margin-top:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card h2{margin-top:0}

.row{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.search{
  min-width:260px;flex:1;
  background:#0c121b;border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:10px 12px;outline:none;
}
.search::placeholder{color:#6c7a90}

.grid{
  display:grid;gap:14px;margin-top:16px;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
.doc{
  border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--card);
}
.doc h3{margin:0 0 6px;font-size:16px}
.doc p{margin:0 0 10px;color:var(--muted);font-size:14px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  appearance:none;cursor:pointer;border:none;
  background:var(--accent);color:#0b0f14;font-weight:700;
  padding:8px 12px;border-radius:10px;text-decoration:none;
}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{
  background:transparent;color:var(--accent);
  border:1px solid var(--accent);
}
.btn.ghost:hover{background:rgba(122,162,255,.12)}

.footer{color:var(--muted);text-align:center;margin:24px 0 40px}

.modal{position:fixed;inset:0;display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.modal-content{
  position:relative;z-index:1;margin:40px auto;padding:0;background:#0c121b;
  width:min(1000px,92%);height:min(80vh,800px);border-radius:12px;overflow:hidden;
  border:1px solid var(--border);
}
#previewFrame{width:100%;height:100%;background:#101826}
.close{
  position:absolute;right:10px;top:8px;border:none;background:transparent;
  color:#b7c2d7;font-size:28px;cursor:pointer;line-height:1;
}
.close:hover{color:#fff}