:root { color-scheme: light; --ink:#142822; --sea:#0b5c50; --foam:#edf5f1; --line:#ccd9d4; --red:#a7352b; --sand:#f4efe5; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(145deg,#f8f6ef 0 56%,#e8f1ed 100%); min-height:100vh; }
header,main,footer { width:min(1080px,calc(100% - 40px)); margin:auto; }
header { height:118px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
h1,h2,p { margin-top:0; } h1 { font:600 1.15rem Georgia,serif; margin:.2rem 0 0; } h2 { font:500 clamp(2rem,5vw,4.2rem)/1.02 Georgia,serif; letter-spacing:-.035em; }
.eyebrow,.kicker { color:var(--sea); font-size:.72rem; font-weight:800; letter-spacing:.16em; }
main { padding:72px 0 100px; } #welcome { max-width:760px; } #welcome>p:not(.kicker) { max-width:600px; font-size:1.15rem; line-height:1.65; }
button { border:0; border-radius:3px; padding:.82rem 1.1rem; background:var(--sea); color:white; font:700 .9rem inherit; cursor:pointer; }
button:hover { filter:brightness(.92); } button:focus-visible,input:focus-visible { outline:3px solid #e3a52d; outline-offset:2px; }
button.secondary { color:var(--sea); background:transparent; border:1px solid var(--sea); } button.danger { background:var(--red); } button:disabled { cursor:not-allowed; opacity:.45; }
nav { display:flex; gap:8px; margin-bottom:25px; } .tab { color:var(--sea); background:transparent; border-bottom:2px solid transparent; border-radius:0; } .tab.active { border-color:var(--sea); }
.panel { padding:34px; background:#fffefa; border:1px solid var(--line); box-shadow:0 18px 60px #1c4b3b14; }
form { display:grid; gap:22px; } label { display:grid; gap:7px; font-size:.82rem; font-weight:750; } input { width:100%; border:1px solid #aebdb7; border-radius:3px; padding:.8rem; background:white; color:var(--ink); font:1rem inherit; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } fieldset { border:0; padding:0; margin:0; } legend { font-weight:750; margin-bottom:10px; } .hint { color:#586963; font-size:.82rem; }
.check { display:flex; align-items:center; gap:8px; margin:8px 0; font-weight:500; } .check input { width:auto; }
#notice { min-height:24px; color:var(--sea); font-weight:650; } #notice.error { color:var(--red); }
#user { margin-top:35px; padding-top:30px; border-top:1px solid var(--line); } #user h2 { font-size:2.2rem; margin-bottom:5px; } #user-meta { color:#53645e; }
.user-heading,.actions { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } #user-status { background:var(--foam); padding:6px 9px; font-size:.75rem; font-weight:800; text-transform:uppercase; }
#groups-form { margin:24px 0; } .actions { justify-content:flex-start; } .danger-zone { margin-top:22px; padding:20px; background:#fbebe8; }
.protected { padding:14px; background:var(--sand); font-weight:650; } footer { padding:22px 0 35px; border-top:1px solid var(--line); color:#61716b; font-size:.78rem; }
[hidden] { display:none!important; }
@media (max-width:640px) { header { height:90px; } main { padding-top:42px; } .panel { padding:22px; } .grid { grid-template-columns:1fr; } .actions,.user-heading { flex-direction:column; } }