@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#17212b; --muted:#697782; --line:#dfe7ea; --paper:#f6faf9; --white:#fff; --teal:#087f78; --teal-dark:#075e5a; --blue:#e6f1f5; --green:#e7f5ed; --red:#fff0ef; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 4%, #dff5f1 0, transparent 28%), var(--paper); font-family:'DM Sans', sans-serif; }
h1,h2 { margin:0; font-family:'Space Grotesk', sans-serif; letter-spacing:-.04em; }
h1 { font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.05; }
h2 { font-size:1.25rem; }
.shell { min-height:100vh; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; background:rgba(255,255,255,.86); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:'Space Grotesk'; font-weight:700; font-size:1.08rem; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:white; background:var(--teal); }
.topbar-actions { display:flex; align-items:center; gap:18px; }
.status-dot { color:var(--muted); font-size:.82rem; }
.status-dot:before { content:''; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#34b878; }
.page { width:min(1120px, 90%); margin:0 auto; padding:58px 0 80px; }
.page-centered { display:grid; place-items:center; min-height:100vh; padding:24px; }
.eyebrow { color:var(--teal); font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:12px; }
.muted { color:var(--muted); line-height:1.65; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 17px; border:1px solid transparent; border-radius:11px; font:600 .9rem 'DM Sans'; text-decoration:none; cursor:pointer; transition:.2s ease; }
.button-primary { color:#fff; background:var(--teal); box-shadow:0 8px 18px rgba(8,127,120,.15); }
.button-primary:hover { background:var(--teal-dark); transform:translateY(-1px); }
.button-ghost { color:var(--ink); background:#fff; border-color:var(--line); }
.button-ghost:hover { border-color:#abc4c4; background:#f8fcfb; }
.button-wide { width:100%; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.page-heading.compact { align-items:center; }
.alert { margin:0 0 20px; padding:13px 16px; border-radius:10px; font-size:.9rem; }
.alert-error { color:#943e3a; background:var(--red); border:1px solid #f4c9c5; }
.alert-success { color:#216f47; background:var(--green); border:1px solid #c5e8d3; }
.alert ul { margin:8px 0 0; padding-left:18px; }
.table-card,.form-card { background:var(--white); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 45px rgba(25,57,63,.06); overflow:hidden; }
.table-wrap { overflow-x:auto; }
table { width:100%; min-width:760px; border-collapse:collapse; }
th,td { padding:18px 22px; text-align:left; border-bottom:1px solid #edf1f2; font-size:.9rem; }
th { color:var(--muted); background:#fbfdfd; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
tbody tr:last-child td { border-bottom:0; }
.client-cell { display:flex; align-items:center; gap:12px; }
.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--teal-dark); background:#dff3ef; font-weight:700; }
small { display:block; color:var(--muted); margin-top:3px; }
code { padding:5px 8px; color:var(--teal-dark); background:#eef8f6; border-radius:6px; }
.url-cell { max-width:230px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill { display:inline-block; padding:5px 9px; border-radius:999px; font-size:.7rem; font-weight:700; }
.pill-blue { color:#27627b; background:var(--blue); }
.pill-green { color:#217148; background:var(--green); }
.pill-gray { color:#68737a; background:#edf0f1; }
.empty-state { padding:80px 24px; text-align:center; }
.empty-icon { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 16px; border-radius:15px; color:var(--teal); background:#e2f4f1; font-size:1.7rem; }
.empty-state .button { margin-top:10px; }
.login-card { width:min(430px, 100%); padding:42px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 60px rgba(25,57,63,.1); }
.login-card h1 { font-size:2.25rem; }
.form-stack { display:grid; gap:18px; margin-top:28px; }
label { display:grid; gap:8px; color:#41515a; font-size:.85rem; font-weight:600; }
label span { color:var(--teal); }
input,select { width:100%; height:45px; padding:0 13px; color:var(--ink); background:#fcfefe; border:1px solid #cfdcdf; border-radius:9px; outline:none; font:400 .92rem 'DM Sans'; }
input:focus,select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,127,120,.11); }
.form-card { padding:30px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.full { grid-column:1 / -1; }
.checkbox-label { display:flex; align-items:center; gap:10px; }
.checkbox-label input { width:18px; height:18px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:8px; }
@media (max-width:700px) { .topbar { padding:0 5%; } .status-dot { display:none; } .page { padding-top:38px; } .page-heading { align-items:flex-start; flex-direction:column; } .form-grid { grid-template-columns:1fr; } .full { grid-column:auto; } .form-actions { justify-content:stretch; } .form-actions .button { flex:1; } .login-card { padding:30px 24px; } }