:root { color-scheme: light; --ink:#17231f; --muted:#6e7b76; --green:#177a62; --green-soft:#e8f2ee; --line:#dde4e0; --paper:#fff; --bg:#f4f5f1; --danger:#a23a3a; font-family: Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); }
button,input,select { font:inherit; }
button { border:0; border-radius:12px; padding:.78rem 1rem; color:white; background:var(--green); font-weight:700; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.ghost { color:var(--green); background:transparent; border:1px solid var(--line); }
.shell { width:min(1100px,100%); margin:auto; padding:0 22px 60px; }
.topbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; }
.brand>span { width:42px; height:42px; border-radius:11px; background:var(--green); color:white; display:grid; place-items:center; font:italic 700 25px Georgia,serif; }
.brand b,.brand small { display:block; }.brand small { margin-top:2px; color:var(--muted); }
.account { display:flex; align-items:center; gap:12px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 28px #23382e0c; }
.login { width:min(430px,100%); margin:10vh auto; padding:30px; }
h1,h2,h3,p { margin-top:0; } h1 { font:700 clamp(30px,5vw,44px) Georgia,serif; margin-bottom:12px; } h2 { font:700 28px Georgia,serif; margin-bottom:7px; }
.eyebrow { margin-bottom:10px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.muted,.section-head p { color:var(--muted); }
form label { display:grid; gap:7px; color:var(--muted); font-size:13px; font-weight:700; }
input,select { width:100%; padding:13px 14px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:12px; outline:none; }
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px #177a6218; }
.login form { display:grid; gap:16px; margin-top:24px; }
.intro { padding:40px 0 20px; display:flex; justify-content:space-between; align-items:end; }
.tabs { display:flex; gap:8px; padding:6px; background:#e9ece8; border-radius:15px; overflow:auto; }
.tabs button { min-width:max-content; flex:1; color:var(--muted); background:transparent; }.tabs button.active { color:var(--ink); background:white; box-shadow:0 2px 8px #152d2314; }
.panel { display:none; padding-top:30px; }.panel.active { display:block; }
.inline,.grid-form { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; padding:18px; margin:20px 0; }
.grid-form { grid-template-columns:repeat(4,1fr) auto; }
.stack { display:grid; gap:12px; }
.item { padding:18px; }.item-head { display:flex; justify-content:space-between; gap:14px; align-items:start; }.item h3 { margin-bottom:5px; }.meta { color:var(--muted); font-size:13px; }
.members { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }.member { display:flex; gap:8px; align-items:center; padding:9px 11px; border-radius:11px; background:var(--green-soft); color:var(--ink); font-size:14px; }.member input { width:auto; }
.badge { display:inline-flex; padding:5px 9px; border-radius:99px; color:var(--green); background:var(--green-soft); font-size:12px; font-weight:800; }
.empty { padding:28px; text-align:center; color:var(--muted); border:1px dashed #cbd4cf; border-radius:16px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,120px); max-width:calc(100% - 30px); padding:13px 18px; border-radius:12px; color:white; background:#17231f; opacity:0; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }.toast.error { background:var(--danger); }
@media (max-width:760px) { .shell{padding:0 14px 40px}.account span{display:none}.intro{padding-top:26px}.inline,.grid-form{grid-template-columns:1fr}.item-head{display:block}.item-head .badge{margin-top:8px} }