@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
:root { --paper:#f5efe5; --ink:#18201d; --muted:#70756d; --line:#d9d1c4; --green:#245b4a; --lime:#c5e267; --white:#fffdf8; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
.auth-loading-screen { align-items:center; color:var(--green); display:flex; font-size:28px; font-weight:800; inset:0; justify-content:center; letter-spacing:-1px; position:fixed; z-index:4; }.auth-loading-screen span { color:var(--lime); }
button,input,select { font:inherit; } button { cursor:pointer; }
.page-shell { max-width:1040px; margin:auto; padding:28px 24px 80px; }
.auth-gate { align-items:center; display:flex; min-height:100vh; justify-content:center; padding:24px; }.auth-card { background:var(--white); border:1px solid var(--line); border-radius:18px; max-width:470px; padding:38px; width:100%; }.auth-card h1 { font-size:clamp(32px,7vw,54px); letter-spacing:-2px; line-height:1; margin:0 0 18px; }.auth-card p:not(.eyebrow):not(.auth-error) { color:var(--muted); line-height:1.6; margin:0 0 24px; }.auth-card .primary-button { width:100%; }.auth-error { color:#a7654d; font-size:13px; margin-top:14px; }
.language-switch { align-items:center; display:flex; position:fixed; right:24px; top:20px; z-index:5; }.language-switch label { clip:rect(0,0,0,0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }.language-switch select { appearance:none; background:var(--white); border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:11px; padding:7px 11px; }.language-switch select:hover { border-color:var(--green); color:var(--green); }
.signed-in .language-switch { position:static; }.signed-in .language-switch label { display:none; }.signed-in .topbar { padding-right:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:18px; padding-right:110px; }
.brand { color:var(--ink); font-size:22px; font-weight:800; letter-spacing:-1px; text-decoration:none; }.brand span { color:var(--lime) !important; }
.topbar-tools { align-items:center; display:flex; gap:16px; }.topbar-note,.shortcut { color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; }.logout-button { background:transparent; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:11px; padding:7px 10px; }.logout-button:hover { border-color:var(--green); color:var(--green); }
.hero { display:flex; justify-content:space-between; align-items:end; padding:76px 0 54px; }.eyebrow { color:var(--green); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; margin:0 0 12px; }.hero h1 { font-size:clamp(36px,6vw,70px); letter-spacing:-3px; line-height:.98; margin:0; }.hero h1 em { color:var(--green); font-style:normal; }.hero-copy { color:var(--muted); line-height:1.6; margin:24px 0 0; max-width:480px; }.hero-mark { align-items:center; background:var(--lime); border-radius:50%; color:var(--green); display:flex; font-size:70px; height:150px; justify-content:center; transform:rotate(8deg); width:150px; }
.panel { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:26px; }.section-heading { align-items:start; display:flex; justify-content:space-between; gap:20px; }.section-heading h2 { font-size:22px; letter-spacing:-.8px; margin:0; }.new-promise form { margin-top:24px; }.new-promise input,.new-promise select,#result-text,input[type="url"] { background:#f8f5ee; border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:14px 15px; width:100%; }.new-promise form > input { font-size:17px; }.form-row { align-items:center; display:flex; gap:16px; justify-content:space-between; margin-top:12px; }.form-row label { color:var(--muted); font-size:12px; }.form-row label select { display:block; margin-top:5px; padding:10px; width:180px; }.primary-button,.secondary-button { border:0; border-radius:9px; font-weight:700; padding:12px 17px; }.primary-button { background:var(--green); color:#fff; }.primary-button span { color:var(--lime); }.secondary-button { background:var(--paper); color:var(--ink); }
.promises-section { margin-top:64px; }.list-heading { align-items:end; margin-bottom:16px; }.filters { display:flex; gap:5px; }.filter { background:transparent; border:1px solid transparent; border-radius:99px; color:var(--muted); font-size:12px; padding:7px 11px; }.filter.active { background:var(--white); border-color:var(--line); color:var(--ink); }.promise-list { display:grid; gap:10px; }.promise-card { align-items:center; background:var(--white); border:1px solid var(--line); border-radius:14px; display:flex; gap:20px; justify-content:space-between; padding:18px 20px; }.promise-meta { align-items:center; display:flex; gap:8px; }.status { background:#c7c8c0; border-radius:50%; height:8px; width:8px; }.status.open { background:#df9b46; }.status.done { background:#4e9a70; }.status.partial { background:#6f8fb1; }.status.failed { background:#b87676; }.timer { color:var(--green); font-family:'DM Mono',monospace; font-size:12px; font-weight:500; }.timer.expired { color:#a7654d; }.promise-card h3 { font-size:16px; line-height:1.4; margin:9px 0 0; }.result { color:var(--muted); font-size:13px; margin:7px 0 0; }.evidence { color:var(--green); display:inline-block; font-size:12px; margin-top:7px; }.promise-actions { align-items:center; display:flex; flex-wrap:wrap; gap:6px; justify-content:end; }.action,.delete-action { background:transparent; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:11px; padding:7px 9px; }.action:hover { border-color:var(--green); color:var(--green); }.delete-action { border:0; font-size:20px; padding:4px 7px; }.empty-state { border:1px dashed var(--line); color:var(--muted); padding:30px; text-align:center; }.sr-only { clip:rect(0,0,0,0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
dialog { background:var(--white); border:1px solid var(--line); border-radius:16px; color:var(--ink); max-width:460px; padding:26px; width:calc(100% - 32px); } dialog::backdrop { background:rgba(24,32,29,.35); }.dialog-close { background:none; border:0; float:right; font-size:24px; }#result-dialog h2 { font-size:24px; margin:0 0 20px; }#result-form input { margin-bottom:10px; }.dialog-actions { display:flex; gap:8px; justify-content:end; margin-top:8px; }
.done-action { background:rgba(36,91,74,.08); border-color:rgba(36,91,74,.35); color:var(--green); font-weight:700; }.fail-action { opacity:.7; }.dialog-help { color:var(--muted); font-size:13px; line-height:1.5; margin:0 0 18px; }
.more-actions { position:relative; }.more-action { letter-spacing:2px; padding-left:8px; padding-right:8px; }.action-menu { background:var(--white); border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 24px rgba(24,32,29,.12); display:grid; gap:3px; min-width:145px; padding:6px; position:absolute; right:0; top:calc(100% + 6px); z-index:3; }.menu-action { background:transparent; border:0; border-radius:6px; color:var(--muted); font-size:12px; padding:9px 10px; text-align:left; }.menu-action:hover { background:var(--paper); color:var(--ink); }.menu-action.fail-action { color:#9a6255; opacity:1; }.menu-action.delete-action { color:#9a6255; font-size:12px; padding:9px 10px; }
.menu-action { align-items:center; display:flex; gap:9px; }.menu-icon { align-items:center; border:1px solid var(--line); border-radius:50%; color:var(--green); display:inline-flex; font-size:11px; height:20px; justify-content:center; width:20px; }.menu-action.fail-action .menu-icon,.menu-action.delete-action .menu-icon { color:#9a6255; }.menu-action.delete-action { border-top:1px solid var(--line); border-radius:0 0 6px 6px; margin-top:4px; padding-top:11px; }
.share-action { align-items:center; display:inline-flex; gap:6px; }
.evidence-dropzone { align-items:center; border:1px dashed var(--line); border-radius:12px; color:var(--muted); display:grid; gap:4px 12px; grid-template-columns:34px 1fr auto; margin:8px 0 12px; padding:14px; text-align:left; }.evidence-dropzone:hover,.evidence-dropzone:focus { background:rgba(36,91,74,.03); border-color:var(--green); outline:0; }.evidence-symbol { align-items:center; background:rgba(197,226,103,.35); border-radius:9px; color:var(--green); display:flex; font-size:24px; height:34px; justify-content:center; width:34px; }.evidence-dropzone strong { color:var(--ink); display:block; font-size:13px; }.evidence-dropzone span { display:block; font-size:11px; line-height:1.4; }.evidence-buttons { display:flex; flex-wrap:wrap; gap:6px; justify-content:end; }.evidence-dropzone button { background:var(--white); border:1px solid var(--line); border-radius:7px; color:var(--green); font-size:11px; font-weight:700; padding:8px 10px; }.evidence-dropzone button:hover { border-color:var(--green); }.evidence-dropzone input { display:none; }.evidence-dropzone small { color:var(--green); font-size:11px; grid-column:2 / -1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.evidence-preview { align-items:start; display:flex; gap:10px; margin-bottom:12px; }.evidence-preview img { border-radius:8px; max-height:150px; max-width:100%; object-fit:contain; }.evidence-preview button { background:transparent; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:11px; padding:7px 9px; }.evidence-image { border-radius:8px; display:block; margin-top:10px; max-height:180px; max-width:100%; object-fit:contain; }
@media (max-width:650px) { .evidence-dropzone { grid-template-columns:34px 1fr; }.evidence-buttons { grid-column:2; justify-content:start; }.evidence-dropzone small { grid-column:2; } }
@media (max-width:650px) { .page-shell { padding:20px 16px 60px; }.topbar { padding-top:46px; }.topbar-note { display:none; }.language-switch { right:16px; top:16px; }.signed-in .topbar { padding-top:20px; padding-right:0; }.signed-in .language-switch { right:auto; top:auto; }.hero { align-items:start; gap:20px; padding:55px 0 38px; }.hero-mark { flex:none; font-size:42px; height:82px; width:82px; }.hero h1 { letter-spacing:-2px; }.shortcut { display:none; }.form-row,.promise-card { align-items:stretch; flex-direction:column; }.form-row label select { width:100%; }.primary-button { width:100%; }.promises-section { margin-top:46px; }.list-heading { align-items:start; flex-direction:column; gap:12px; }.promise-actions { justify-content:start; }.promise-card { gap:14px; } }