:root{
  --bg: #ffffff;
  --text: #111217;
  --muted: #575a60;
  --accent: #0b5cff;
  --radius: 8px;
  --sidebar-w:280px;
  --blue-dark:#0d1b3d;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.container{
  max-width:900px;
  margin:48px auto;
  padding:32px;
}

.header .crumbs{
  color:var(--muted);
  font-size:13px;
  margin-bottom:8px;
}

.title{
  margin:0 0 6px 0;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.2px;
}

.subtitle{
  margin:0 0 20px 0;
  color:var(--muted);
  font-size:15px;
}

.lead{
  background:#fbfbfd;
  border:1px solid #eef0f4;
  padding:18px;
  border-radius:10px;
  margin:0 0 18px 0;
  font-size:15px;
  color:var(--text);
  box-shadow: 0 1px 0 rgba(16,24,40,0.02), 0 6px 18px rgba(11,28,61,0.04);
}

.callouts{
  display:flex;
  gap:14px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.callout{
  flex:1 1 240px;
  border:1px solid #eef0f4;
  padding:14px;
  border-radius:8px;
  background:#fff;
}

.callout strong{display:block;margin-bottom:8px;color:var(--text);font-weight:600}
.callout ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}

.actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:6px;
}

.btn{
  appearance:none;
  border:0;
  background:var(--accent);
  color:white;
  padding:10px 14px;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 6px 18px rgba(11,92,255,0.12);
}

.btn:active{transform:translateY(1px)}
.btn.muted{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(11,92,255,0.12);
  box-shadow:none;
}

.sr-only{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:#0b1f3b;color:#fff;padding:20px 14px;overflow:auto; transition: transform .2s ease; }
.nav-header{font-weight:700;margin:4px 0 10px}
.nav-sub{font-size:12px;opacity:.8;margin-bottom:8px}
.nav-item{display:block;color:#e6eefc;text-decoration:none;padding:8px 6px;border-radius:6px}
.nav-item.is-active,.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item[aria-current="page"]{
  background:rgba(255,255,255,.12);
  font-weight:700;
}

body.has-sidebar{padding-left:var(--sidebar-w)}
body.has-sidebar.sidebar-collapsed{padding-left:0}
.sidebar-collapsed .sidebar{transform:translateX(-100%)}
.about-band{background:var(--accent);color:#fff;border-bottom:6px solid #e5efff}
.about-band .band-inner{max-width:1000px;margin:0 auto;padding:18px 24px}
.sidebar-toggle{background:transparent;border:0;color:#fff;font-size:20px;margin-left:10px;cursor:pointer}

.header.hero{background:var(--blue-dark);color:#fff;border-radius:0;margin:0;padding:28px 0}
.hero-inner{max-width:1000px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.hero-illustration{width:140px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.15))}
.brand{opacity:.85;margin-bottom:10px}
.dash{display:block;width:28px;height:3px;background:#7aa2ff;border-radius:2px;margin-bottom:12px}

.section-title{font-size:18px;margin:22px 0 10px;color:var(--text)}
@media (max-width:900px){.sidebar{transform:translateX(-100%);transition:transform .2s ease}.nav-open .sidebar{transform:none}body.nav-open{overflow:hidden}body.has-sidebar{padding-left:0}}

.pdf-viewer{margin-top:16px;border:1px solid #eef0f4;border-radius:10px;padding:14px;background:#fff}
.pdf-file{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:14px;color:var(--muted)}
.pdf-list li{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.pdf-list .pdf-select{flex:1;appearance:none;border:0;background:transparent;color:#e6eefc;text-align:left;padding:6px 8px;border-radius:6px;cursor:pointer}
.pdf-list .pdf-select:hover{background:rgba(255,255,255,0.04)}
.pdf-list .pdf-edit{appearance:none;border:0;background:transparent;color:#9fb6ff;padding:6px;border-radius:6px;cursor:pointer;font-size:13px}
.pdf-selector {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.pdf-selector label {
  font-size: 14px;
  color: var(--muted);
}

.pdf-selector select {
  flex: 1;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

.pdf-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pdf-controls button {
  padding: 6px 10px;
  font-size: 13px;
}

.pdf-controls select{padding:8px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font-size:14px}
.pdf-controls input[type="url"]{flex:1;padding:8px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px}
.pdf-status{font-size:13px;color:var(--muted);margin-left:auto}
.pdf-canvas-wrap{display:flex;justify-content:center;align-items:center;background:#fbfbfd;border:1px dashed #eef0f4;border-radius:8px;min-height:200px;overflow:auto}
#pdfCanvas{max-width:100%;height:auto;display:block}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 400px;
}

.modal-content h3 {
  margin: 0 0 16px 0;
  color: var(--text);
}

.modal-content label {
  display: block;
  margin-bottom: 12px;
}

.modal-content span {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--muted);
}

.modal-content input {
  width: 100%;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}