:root{
  --pdb-blue:#222b53;
  --pdb-blue-700:#0f3370;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#fff;
  --card:#ffffff;
  --line:#e2e8f0;
  --chip:#eef2ff;
  --shadow:0 10px 25px rgba(2, 6, 23, 0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;color:var(--ink);background:linear-gradient(180deg,#f5f7fb 0%,#fafcff 100%)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.header-flex{display:flex;align-items:center;gap:20px}
.pdb-header{background:radial-gradient(1200px 400px at 10% -20%, #2c3266 0%, var(--pdb-blue) 70%, var(--pdb-blue-700) 100%);color:#fff;padding:28px 0;box-shadow:var(--shadow)}
.pdb-logo{width:96px;height:auto;border-radius:50%;background:#fff;padding:4px;box-shadow:0 0 10px rgba(0,0,0,0.15)}
.titles h1{margin:0;font-size:1.35rem;line-height:1.2}
.subtitle{margin:4px 0 0 0;opacity:.9}
.chip{display:inline-block;margin-top:8px;background:var(--chip);color:#1e293b;border:1px solid #c7d2fe;padding:6px 10px;border-radius:999px;font-size:.85rem}
.notice{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px;margin:22px 0;box-shadow:var(--shadow)}
.notice p{margin:.4rem 0 0 0}
.controls{display:flex;justify-content:flex-end;margin:14px 0 8px}
button{border:0;background:var(--pdb-blue);color:#fff;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
button.ghost{background:#f8fafc;color:#0f172a;border:1px solid var(--line)}
.pdb-footer{margin:30px 0 60px;color:var(--muted)}

/* Deadline */
.deadline{background:#ffffff;border:2px solid var(--pdb-blue);border-radius:16px;padding:18px;margin:22px 0;box-shadow:var(--shadow)}
.deadline h2{margin:0 0 6px 0;color:var(--pdb-blue)}
.deadline p{margin:0;font-size:1.05rem}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px,1fr));gap:16px;margin:24px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:1.1rem;color:var(--pdb-blue)}
.kv{display:flex;gap:6px;flex-wrap:wrap;color:#334155;font-size:.95rem}
.kv span.label{color:#64748b}
.card .spacer{flex:1}
.card .actions{display:flex;justify-content:flex-end}
.card button{background:var(--pdb-blue)}
.badge{display:inline-block;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:2px 8px;font-size:.8rem;color:#1e293b}

/* Modal */
.modal{border:none;border-radius:16px;padding:0;width:min(720px, 92vw)}
.modal::backdrop{background:rgba(2,6,23,.45)}
.modal-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;position:relative}
.icon-btn{position:absolute;top:10px;right:10px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;border-radius:10px;padding:6px 10px;cursor:pointer}
.modal-body{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:12px;margin-top:10px}
.field{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px}
.field .label{font-size:.8rem;color:#64748b;margin:0 0 4px 0}
.field .value{font-size:.95rem;color:#0f172a;word-break:break-word}