:root { color-scheme: light; --ink:#17342d; --muted:#6d7f79; --line:#dce6e1; --paper:#fff; --canvas:#f2f6f3; --green:#1e725d; --green-dark:#173f35; --mint:#dff4e9; --amber:#9c6a1b; --amber-soft:#fff2d9; --red:#b04e47; --red-soft:#fbe9e6; --blue:#557db8; --shadow:0 14px 38px rgba(28,64,54,.10); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 88% 0%,#dff4e9 0,transparent 20rem),var(--canvas); font-family:"Segoe UI",Tahoma,Arial,sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%,760px); min-height:100vh; margin:auto; padding:env(safe-area-inset-top) 16px calc(88px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 2px 16px; }
.topbar h1 { margin:0; font-size:25px; letter-spacing:-.03em; }.eyebrow { margin:0 0 3px; color:var(--green); font-size:12px; font-weight:700; }
.avatar-button,.icon-button { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:14px; color:var(--green-dark); background:rgba(255,255,255,.8); }
.command { display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:14px; }.search { width:100%; min-height:50px; padding:0 15px; border:1px solid var(--line); border-radius:15px; outline:0; color:var(--ink); background:var(--paper); box-shadow:var(--shadow); }.search:focus { border-color:#74aa97; }
.filter { min-height:50px; padding:0 12px; border:1px solid var(--line); border-radius:15px; color:var(--green-dark); background:var(--paper); }
.filters { display:flex; gap:8px; overflow-x:auto; padding:1px 0 12px; }.chip { flex:none; border:0; border-radius:99px; padding:8px 12px; color:var(--muted); background:transparent; }.chip.active { color:#fff; background:var(--green-dark); }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:3px 0 22px; }.summary article { min-width:0; padding:11px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.78); }.summary strong { display:block; font-size:21px; }.summary span { display:block; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.section-header { display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 10px; }.section-header h2 { margin:0; font-size:16px; }.section-header small { color:var(--muted); }
.project-list { display:grid; gap:9px; }.project-card { width:100%; padding:14px; border:1px solid var(--line); border-radius:18px; color:inherit; text-align:right; background:var(--paper); box-shadow:0 8px 22px rgba(28,64,54,.05); }.project-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.project-card h3 { margin:0; font-size:16px; }.meta { margin:4px 0 11px; color:var(--muted); font-size:11px; }.badge { display:inline-block; flex:none; border-radius:99px; padding:4px 7px; color:var(--amber); background:var(--amber-soft); font-size:10px; font-weight:700; }.badge.done { color:var(--green); background:var(--mint); }.badge.blocked { color:var(--red); background:var(--red-soft); }
.progress { height:6px; overflow:hidden; border-radius:99px; background:#e8efeb; }.progress > i { display:block; height:100%; border-radius:inherit; background:var(--green); }.card-footer { display:flex; justify-content:space-between; margin-top:8px; color:var(--muted); font-size:10px; }
.empty { padding:42px 16px; border:1px dashed #b8c9c2; border-radius:18px; color:var(--muted); text-align:center; background:rgba(255,255,255,.45); }.empty h2 { margin:0 0 6px; color:var(--ink); font-size:18px; }.empty p { margin:0; font-size:13px; }
.bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:5; display:flex; justify-content:center; padding:9px 16px calc(9px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.93); backdrop-filter:blur(16px); }.bottom-nav div { display:flex; width:min(100%,728px); justify-content:space-around; }.bottom-nav button { border:0; color:var(--muted); background:transparent; font-size:11px; }.bottom-nav button.active { color:var(--green); font-weight:700; }
.auth { display:grid; min-height:100vh; place-items:center; padding:24px; }.auth-card { width:min(100%,410px); padding:26px; border:1px solid var(--line); border-radius:24px; background:var(--paper); box-shadow:var(--shadow); }.auth-card h1 { margin:0 0 8px; font-size:25px; }.auth-card p { margin:0 0 20px; color:var(--muted); font-size:13px; }.field { display:grid; gap:6px; margin:12px 0; color:var(--muted); font-size:12px; font-weight:700; }.field input,.field textarea { min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--ink); background:#fff; }.field textarea { min-height:76px; resize:vertical; }.primary { min-height:47px; width:100%; border:0; border-radius:13px; color:#fff; background:var(--green); font-weight:700; }.primary:disabled { opacity:.55; cursor:wait; }.error { min-height:19px; margin:10px 0 0; color:var(--red); font-size:12px; }.notice { border:1px solid #e5cfa5; border-radius:13px; padding:11px; color:#79530f; background:var(--amber-soft); font-size:12px; line-height:1.6; }
.drawer { position:fixed; inset:0; z-index:10; display:flex; align-items:flex-end; background:rgba(15,37,29,.35); }.drawer[hidden] { display:none; }.sheet { width:min(100%,760px); max-height:92vh; margin:auto; overflow:auto; border-radius:24px 24px 0 0; background:var(--canvas); box-shadow:0 -18px 48px rgba(15,37,29,.20); }.sheet-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }.sheet-header h2 { margin:0; font-size:18px; }.sheet-body { padding:16px; }.stage-list { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--paper); }.stage-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:58px; padding:10px 13px; border:0; border-bottom:1px solid var(--line); color:var(--ink); text-align:right; background:transparent; }.stage-row:last-child { border-bottom:0; }.stage-label { display:grid; gap:3px; }.stage-label small { color:var(--muted); font-size:10px; }.stage-state { border-radius:99px; padding:5px 8px; color:var(--muted); background:#f0f4f2; font-size:10px; }.stage-row.completed .stage-state { color:var(--green); background:var(--mint); }.stage-row.blocked .stage-state { color:var(--red); background:var(--red-soft); }.panel-title { margin:22px 0 9px; font-size:15px; }.note { padding:11px 0; border-bottom:1px solid var(--line); }.note:last-child { border-bottom:0; }.note p { margin:0; line-height:1.6; }.note small { display:block; margin-top:5px; color:var(--muted); }.note-form { display:grid; gap:8px; }.note-form button { width:auto; justify-self:start; padding-inline:17px; }.toast { position:fixed; right:50%; bottom:84px; z-index:20; min-width:220px; max-width:calc(100% - 32px); transform:translateX(50%); padding:11px 13px; border-radius:12px; color:#fff; text-align:center; background:var(--green-dark); box-shadow:var(--shadow); font-size:12px; }.toast.error { background:var(--red); color:#fff; }
@media (min-width:760px) { .app-shell { padding-inline:24px; }.project-list { grid-template-columns:repeat(2,1fr); }.project-card { min-height:160px; }.sheet { border-radius:24px; margin:auto; }.drawer { align-items:center; padding:30px; } }