:root{--blue:#0024D3;--sky:#00A9EB;--ink:#0b1030;--mute:#575757;--bg:#f4f6fb;--card:#fff;--line:#dfe4f2}
@media (prefers-color-scheme:dark){:root{--ink:#eef1ff;--mute:#a9b0cf;--bg:#080c24;--card:#10173a;--line:#232c5c}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 "Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:var(--blue);color:#fff}
.brand{display:flex;align-items:center;gap:16px;font-weight:700}
.brand img{height:22px}
button{font:inherit;cursor:pointer}
.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);border-radius:999px;padding:6px 16px}
.ghost:hover{background:rgba(255,255,255,.15)}
main{max-width:1280px;margin:0 auto;padding:24px 16px 48px}
.hero{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
h1{margin:0 0 4px;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800}
.quote{margin:0;color:var(--mute);font-style:italic;max-width:62ch}.quote span{font-style:normal;font-weight:600}
.days{display:flex;flex-wrap:wrap;gap:8px}
.days a{padding:5px 12px;border-radius:999px;border:2px solid var(--line);color:var(--ink);text-decoration:none;font-size:.875rem;font-weight:600}
.days a[aria-current]{background:var(--blue);border-color:var(--blue);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,36,211,.06)}
figure img{display:block;width:100%;height:auto}
figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-weight:600}
.btn{background:var(--blue);color:#fff;text-decoration:none;padding:8px 16px;border-radius:999px;font-size:.875rem;font-weight:700;white-space:nowrap}
.btn:hover,.btn:focus-visible{background:#0019a0}
.hint,.empty{color:var(--mute);margin-top:28px}
code{background:var(--card);padding:2px 6px;border-radius:6px}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0024D3,#00A9EB);padding:16px}
.card{background:var(--card);border-radius:20px;padding:36px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,40,.35)}
.card .logo{height:28px;display:block;margin-bottom:18px}
.card h1{font-size:1.5rem;margin-bottom:18px}
label{display:block;font-weight:600;margin-bottom:6px}
input[type=password]{width:100%;padding:12px 14px;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:10px}
input[type=password]:focus{outline:none;border-color:var(--blue)}
.card button{margin-top:16px;width:100%;padding:12px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-weight:700}
.err{color:#d32f2f;margin:10px 0 0;font-weight:600}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
.credit{display:block;font-weight:400;font-size:.72rem;color:var(--mute)}
figure{position:relative}
.rm{position:absolute;top:10px;right:10px;margin:0}
.rm button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,30,.62);color:#fff;font-size:15px;line-height:1;opacity:0;transition:opacity .15s}
figure:hover .rm button,.rm button:focus-visible{opacity:1}
@media (hover:none){.rm button{opacity:.9}}
.rm button:hover{background:#d32f2f}
.nav{display:flex;align-items:center;gap:16px}.nav a{color:#fff;font-weight:600;text-decoration:none}.nav a:hover{text-decoration:underline}.nav form{margin:0}
h2{font-size:1.25rem;margin:32px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.chip{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 16px;font-weight:600}
.chip form{margin:0}
.small{padding:6px 14px;border-radius:999px;border:2px solid var(--blue);background:transparent;color:var(--blue);font-weight:700;font-size:.8rem}
.small:hover{background:var(--blue);color:#fff}
.small.danger{border-color:#d32f2f;color:#d32f2f}.small.danger:hover{background:#d32f2f;color:#fff}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.lib figure.off img{filter:grayscale(1);opacity:.45}
.lib figcaption{flex-direction:column;align-items:stretch;gap:8px;font-size:.8rem}
.lib figcaption form{margin:0}.lib figcaption .small{width:100%}
.tag{font-weight:400;color:var(--mute);font-size:.72rem}