:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #5b5cf0;
  --primary-dark: #4445d5;
  --danger: #c0392b;
  --shadow: 0 20px 60px rgba(17, 24, 39, .08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.topbar {
  height: 72px; background: #fff; border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px;
  position:sticky; top:0; z-index:30;
}
.brand { display:flex; align-items:center; gap:11px; font-weight:800; }
.logo {
  width:36px; height:36px; border-radius:11px; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-weight:900;
}
.nav { display:flex; gap:10px; align-items:center; }
.nav button, .ghost {
  border:0; background:transparent; padding:9px 12px; border-radius:9px; color:#4b5563;
}
.nav button.active, .nav button:hover, .ghost:hover { background:#f0f1ff; color:var(--primary); }
.user-chip { display:flex; gap:9px; align-items:center; }
.avatar { width:34px; height:34px; border-radius:50%; background:#e9e9ff; color:var(--primary); display:grid; place-items:center; font-weight:800; }
.container { max-width:1180px; margin:0 auto; padding:38px 24px 70px; }
.hero {
  background:linear-gradient(135deg,#111827,#2d2e83); color:#fff; border-radius:24px; padding:34px;
  box-shadow:var(--shadow); margin-bottom:28px;
}
.hero h1 { margin:0 0 9px; font-size:32px; letter-spacing:-.7px; }
.hero p { margin:0; color:#d9dcff; max-width:650px; line-height:1.6; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px;
  box-shadow:0 8px 28px rgba(17,24,39,.04);
}
.material { min-height:210px; display:flex; flex-direction:column; }
.pdf-icon { width:52px; height:52px; border-radius:14px; background:#fff0ee; color:#d14a3c; display:grid; place-items:center; font-weight:900; margin-bottom:18px; }
.material h3 { margin:0 0 7px; }
.material p { color:var(--muted); font-size:14px; line-height:1.5; margin:0; flex:1; }
.meta { color:#9ca3af; font-size:12px; margin:12px 0; }
.btn {
  border:0; border-radius:10px; padding:11px 15px; font-weight:700; background:var(--primary); color:#fff;
}
.btn:hover { background:var(--primary-dark); }
.btn.secondary { background:#eef0ff; color:var(--primary); }
.btn.danger { background:#fff0ef; color:var(--danger); }
.row { display:flex; gap:10px; align-items:center; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(430px,100%); background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px; box-shadow:var(--shadow); }
.login-card h1 { margin:0 0 7px; }
.label { display:block; font-size:13px; font-weight:700; margin:17px 0 7px; }
.input, textarea {
  width:100%; border:1px solid #d7dbe4; border-radius:10px; padding:12px 13px; outline:none; background:#fff;
}
.input:focus, textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px #ececff; }
.alert { padding:11px 13px; border-radius:10px; background:#fff0ef; color:#a5362a; font-size:14px; margin-top:15px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.toolbar h2 { margin:0; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:#6b7280; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.modal {
  position:fixed; inset:0; background:rgba(17,24,39,.7); display:grid; place-items:center; z-index:100; padding:18px;
}
.modal-box { width:min(1100px,100%); height:min(88vh,900px); background:#fff; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }
.modal-head { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); }
.viewer { position:relative; flex:1; background:#24262c; overflow:auto; display:grid; place-items:start center; padding:24px; }
.pdf-frame { width:min(900px,100%); height:100%; border:0; background:#fff; }
.watermark-layer {
  pointer-events:none; position:absolute; inset:0; overflow:hidden; z-index:5;
  background-image:repeating-linear-gradient(-28deg, transparent 0 90px, rgba(255,255,255,.13) 90px 92px, transparent 92px 180px);
}
.watermark-text {
  position:absolute; inset:-15%; display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-28deg); font-weight:800; font-size:20px; line-height:2.2;
  color:rgba(255,255,255,.30); text-shadow:0 1px 2px rgba(0,0,0,.4);
  white-space:pre-wrap; user-select:none;
}
.notice {
  margin-top:16px; padding:13px 15px; border-radius:12px; background:#fff8e8; color:#805b16;
  font-size:13px; line-height:1.5;
}
@media (max-width: 850px) {
  .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
  .topbar { padding:0 14px; }
  .nav { display:none; }
  .container { padding:22px 14px 50px; }
  .hero { padding:25px; }
  .grid { grid-template-columns:1fr; }
  .hero h1 { font-size:26px; }
}

/* Full-screen protected viewer */
.modal{position:fixed;inset:0;background:#111827;display:grid;place-items:stretch;z-index:100;padding:0}
.modal-box{width:100vw;height:100dvh;min-height:100vh;background:#fff;border-radius:0;overflow:hidden;display:flex;flex-direction:column}
.viewer{position:relative;flex:1;min-height:0;background:#24262c;overflow:hidden;display:block;padding:0}
.pdf-frame{width:100%;height:100%;border:0;background:#fff;display:block}
.watermark-layer{pointer-events:none;position:absolute;inset:-12%;overflow:hidden;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));grid-auto-rows:92px;align-content:center;transform:rotate(-24deg);transform-origin:center;background:none}
.watermark-item{display:flex;align-items:center;justify-content:center;padding:8px 14px;color:rgba(35,55,78,.20);font-size:clamp(13px,1.45vw,19px);font-weight:700;letter-spacing:.035em;white-space:nowrap;user-select:none;text-shadow:0 1px 0 rgba(255,255,255,.34)}
.privacy-shield{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#05070b;color:rgba(255,255,255,.72);opacity:0;visibility:hidden;transition:opacity .08s linear;pointer-events:none;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.privacy-shield.active{opacity:1;visibility:visible}
@media print{.viewer{visibility:hidden!important;background:#000!important}.privacy-shield{opacity:1!important;visibility:visible!important}}