:root{--ink:#18222f;--muted:#687587;--paper:#f5f1e8;--card:#fffdf8;--line:#ddd5c7;--accent:#2e5b4f;--gold:#b7893f;--danger:#9d3d3d}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#ece7dc,#f8f6ef 55%,#e7eee9);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}.shell{max-width:1180px;margin:auto;padding:42px 24px 80px}.hero{display:flex;justify-content:space-between;align-items:center;padding:34px 0 28px}.eyebrow{letter-spacing:.16em;font-size:.75rem;font-weight:800;color:var(--accent)}h1{font-family:Georgia,serif;font-size:clamp(2.4rem,6vw,4.7rem);margin:.16em 0 .12em;line-height:.95}.hero p{max-width:720px;color:var(--muted);font-size:1.08rem}.crest{width:100px;height:100px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:2rem;color:var(--gold);box-shadow:inset 0 0 0 8px #ffffff80}.grid{display:grid;grid-template-columns:1.6fr .8fr;gap:22px}.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 18px 50px #24352d12}.card h2{font-family:Georgia,serif;margin:0 0 20px;font-size:1.55rem}label{display:grid;gap:7px;font-weight:700;font-size:.88rem;margin-bottom:16px}input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.drop{border:1.5px dashed #9eaa9e;padding:26px;text-align:center;border-radius:15px;cursor:pointer;background:#f4f7f2}.drop input{display:none}.drop strong,.drop span{display:block}.drop span{font-weight:400;color:var(--muted);margin-top:5px}.drop.drag{background:#e8f0eb;border-color:var(--accent)}button{width:100%;border:0;border-radius:12px;padding:14px;background:var(--accent);color:#fff;font-weight:800;font-size:1rem;cursor:pointer}.metric{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}.metric b{color:var(--gold);font-family:Georgia,serif;font-size:1.25rem}.metric span{color:var(--muted)}.note{color:var(--muted);font-size:.85rem;line-height:1.5}.recent{margin-top:22px}.section-head{display:flex;justify-content:space-between;align-items:center}.section-head span{color:var(--muted);font-size:.85rem}.job{display:grid;grid-template-columns:1fr minmax(180px,280px);gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}.job h3{margin:0 0 5px}.job p{margin:0;color:var(--muted);font-size:.88rem}.job-right{text-align:right}.status{display:inline-block;text-transform:capitalize;font-size:.75rem;font-weight:800;padding:5px 9px;border-radius:999px;background:#e9ecef}.status.completed{background:#dcece4;color:#205e45}.status.failed{background:#f2dddd;color:var(--danger)}.progress{height:6px;background:#ece8df;border-radius:9px;margin:9px 0;overflow:hidden}.progress i{display:block;height:100%;background:var(--gold)}a{color:var(--accent);font-weight:800;font-size:.85rem}.message{margin-top:12px;padding:12px;border-radius:10px;background:#eef2ee}.message.error{background:#f6e3e3;color:var(--danger)}@media(max-width:760px){.grid{grid-template-columns:1fr}.crest{display:none}.two{grid-template-columns:1fr}.job{grid-template-columns:1fr}.job-right{text-align:left}.shell{padding:24px 14px 50px}}

.section-head>div{display:grid;gap:3px}.section-head h2{margin-bottom:0}.secondary{width:auto;padding:9px 13px;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:.84rem}.secondary:hover{background:#f5f1e8}.secondary.danger{color:var(--danger);border-color:#d8aaaa}.secondary.danger:hover{background:#f8eaea}.secondary:disabled{opacity:.6;cursor:wait}@media(max-width:560px){.section-head{align-items:flex-start;gap:12px}.secondary{padding:8px 10px}}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logout-button {
  padding: 10px 16px;
  border: 1px solid #c9bda9;
  border-radius: 10px;
  background: #fffdf8;
  color: #173247;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.logout-button:hover {
  background: #f3eee4;
}

@media (max-width: 700px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .logout-button {
    padding: 8px 12px;
    font-size: 14px;
  }
}