:root{
  --cream:#fbf7f1; --ink:#1a2420; --muted:#6b7a72;
  --sage:#4a7a5c; --sage-hover:#3d6149; --sage-soft:rgba(74,122,92,0.10);
  --line:#e5dfd3; --surface:#fff;
  --danger:#a64a40; --danger-soft:#fff5f5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",-apple-system,system-ui,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--sage);text-decoration:none}
a:hover{color:var(--sage-hover)}
h1{font-family:"DM Serif Display","DM Sans",serif;font-weight:400;font-size:28px;margin:0 0 16px;color:var(--ink)}
h2{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ink)}

.hdr{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.brand{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:18px;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand .slash{opacity:.55;color:var(--sage)}
.logout{margin:0}
.link{background:none;border:none;color:var(--sage);cursor:pointer;font:inherit;padding:0}
.link:hover{color:var(--sage-hover);text-decoration:underline}

main{max-width:520px;margin:0 auto;padding:32px 20px;min-height:calc(100vh - 260px)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:16px}
.muted{color:var(--muted);font-size:14px}

form label{display:block;margin:14px 0 4px;font-size:13px;color:var(--muted);font-weight:500}
form label:first-child{margin-top:0}
form input,form select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
form input:focus,form select:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}

form label.check-row{display:flex;align-items:flex-start;gap:8px;margin:18px 0 4px;font-size:13px;color:var(--ink);font-weight:400}
form label.check-row input[type=checkbox]{width:auto;margin:2px 0 0;flex:0 0 auto}
form label.check-row a{color:var(--sage)}
form label.check-row a:hover{color:var(--sage-hover)}

button,button.primary{margin-top:18px;background:var(--sage);color:#fff;border:none;padding:11px 18px;border-radius:8px;font:inherit;font-weight:500;cursor:pointer;transition:background .15s}
button:hover,button.primary:hover{background:var(--sage-hover)}
button:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
button.danger{background:var(--danger);color:#fff}
button.danger:hover{background:#8a3a32}

.flash{padding:10px 14px;border-radius:8px;margin-bottom:16px;border:1px solid var(--line);background:#fff;font-size:14px}
.flash.error{border-color:rgba(166,74,64,0.3);color:var(--danger);background:var(--danger-soft)}
.flash.info{border-color:rgba(74,122,92,0.3);background:var(--sage-soft);color:var(--sage-hover)}

.eyebrow{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:500}

.device-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.device-meta{color:var(--muted);font-size:13px;margin-top:2px}
.revoked-tag{color:var(--danger);font-size:13px;font-weight:500}

.site-footer{border-top:1px solid var(--line);padding:32px 24px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;font-size:13px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--sage)}
.footer-copy{width:100%;text-align:center;color:var(--muted);font-size:12px;margin-top:12px}

.harbor-help-fab{position:fixed;right:18px;bottom:18px;z-index:1500;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--sage);color:#fff;text-decoration:none;font-size:13px;font-weight:500;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.harbor-help-fab:hover{background:var(--sage-hover)}
@media print{.harbor-help-fab{display:none}}