:root { --ink:#183029; --muted:#6b7772; --cream:#f5f2eb; --paper:#fffefa; --line:#dedfd8; --green:#167854; --green-dark:#0e5e41; --green-soft:#e3f2eb; --red:#c84843; --red-soft:#f9e8e5; --gold:#d6a94c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 10% 0%,#fff 0,transparent 28%),var(--cream); font-family:"DM Sans",sans-serif; }
button,a { font:inherit; }
button { cursor:pointer; }
.site-header { min-height:82px; padding:15px max(20px,calc((100% - 820px)/2)); display:flex; align-items:center; gap:13px; background:rgba(255,254,250,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.brand-mark { width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); border:3px solid #b9ddcd; font-family:Manrope,sans-serif; font-weight:800; font-size:15px; }
.eyebrow { margin:0 0 2px; color:var(--green); font-weight:800; font-size:11px; letter-spacing:.13em; }
h1 { margin:0; font:800 clamp(17px,4vw,22px)/1.15 Manrope,sans-serif; }
.save-state { margin-left:auto; color:var(--muted); font-size:13px; white-space:nowrap; }
.save-state span { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#36a47b; }
.save-state.saving span { background:var(--gold); }
.save-state.error span { background:var(--red); }
.app-shell { width:min(100% - 32px,720px); margin:0 auto; padding:26px 0 40px; }
.intro>p { margin:0 0 18px; color:#4c5d57; font-size:clamp(16px,3vw,18px); }
.filters { display:flex; gap:8px; padding:5px; overflow:auto; border:1px solid var(--line); border-radius:16px; background:#ece9e2; }
.filter { min-height:46px; flex:1; padding:8px 12px; color:#58655f; background:transparent; border:0; border-radius:11px; font-weight:700; white-space:nowrap; }
.filter span { margin-left:5px; font-size:11px; color:#7c8782; }
.filter.active { color:var(--green-dark); background:var(--paper); box-shadow:0 2px 8px #18302912; }
.progress-row { margin:24px 2px 8px; display:flex; justify-content:space-between; color:var(--muted); font-size:14px; font-weight:600; }
.progress-track { height:8px; overflow:hidden; border-radius:10px; background:#dedfd9; }
.progress-bar { width:0; height:100%; border-radius:10px; background:linear-gradient(90deg,var(--green),#49a77e); transition:width .3s; }
.company-card { min-height:350px; margin-top:18px; padding:clamp(24px,5vw,38px); border:1px solid #deded5; border-radius:24px; background:var(--paper); box-shadow:0 16px 38px #22382f12; touch-action:pan-y; transition:transform .2s,opacity .2s; }
.company-card.slide-left { transform:translateX(-50px) rotate(-2deg); opacity:.25; }
.company-card.slide-right { transform:translateX(50px) rotate(2deg); opacity:.25; }
.card-top { display:flex; justify-content:space-between; align-items:center; min-height:28px; }
.badge,.vote-badge { display:inline-block; padding:7px 10px; border-radius:8px; background:#eaf0eb; color:#4c6258; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.badge.ccg { color:#735a20; background:#f7edcf; }
.vote-badge.yes { color:var(--green); background:var(--green-soft); }.vote-badge.no { color:var(--red); background:var(--red-soft); }
.company-card h2 { margin:20px 0 27px; max-width:590px; font:800 clamp(25px,6vw,38px)/1.15 Manrope,sans-serif; letter-spacing:-.025em; }
.details { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
.detail { display:flex; gap:11px; min-width:0; }
.detail-icon { width:30px; height:30px; flex:none; display:grid; place-items:center; color:var(--green); background:var(--green-soft); border-radius:50%; font-size:13px; font-weight:800; }
.detail small { color:#84908b; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.detail p,.detail a { display:block; overflow-wrap:anywhere; margin:3px 0 0; color:#374b43; font-size:15px; line-height:1.35; text-decoration:none; }
.detail a:hover { text-decoration:underline; }
.vote-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.vote-button { min-height:92px; display:grid; grid-template-columns:36px auto; grid-template-rows:auto auto; align-content:center; justify-content:center; column-gap:8px; border:0; border-radius:18px; color:white; box-shadow:0 8px 20px transparent; transition:transform .12s,box-shadow .12s; }
.vote-button:hover { transform:translateY(-2px); }.vote-button:active { transform:scale(.98); }
.vote-button>span { grid-row:1/3; align-self:center; font-size:31px; }.vote-button strong { text-align:left; font:800 24px Manrope,sans-serif; }.vote-button small { text-align:left; opacity:.85; }
.vote-button.no { background:var(--red); }.vote-button.yes { background:var(--green); }.vote-button.no:hover { box-shadow:0 8px 20px #c8484333; }.vote-button.yes:hover { box-shadow:0 8px 20px #16785433; }
.navigation { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:14px; }
.navigation button { min-height:48px; border:0; background:transparent; color:#65716c; font-weight:700; }.navigation button:last-child { text-align:right; }.navigation button:disabled { opacity:.3; cursor:default; }.skip-button { text-decoration:underline; }
.swipe-hint { margin:10px 0 0; color:#929b97; text-align:center; font-size:12px; }
.done-view { padding:44px clamp(20px,6vw,56px); text-align:center; border:1px solid var(--line); border-radius:24px; background:var(--paper); box-shadow:0 16px 38px #22382f12; }
.done-icon { width:72px; height:72px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); font-size:38px; }
.done-view h2 { margin:8px 0; font:800 40px Manrope,sans-serif; }.done-view>p:not(.eyebrow) { color:var(--muted); }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:30px 0; }.summary { padding:18px 6px; border-radius:15px; }.summary strong,.summary span { display:block; }.summary strong { font:800 30px Manrope,sans-serif; }.summary span { margin-top:4px; font-weight:700; }.yes-summary { color:var(--green); background:var(--green-soft); }.no-summary { color:var(--red); background:var(--red-soft); }.pending-summary { color:#775c20; background:#f8edcf; }
.primary-action,.secondary-action,.text-action { width:100%; min-height:54px; display:grid; place-items:center; margin:10px 0; border-radius:13px; font-weight:800; text-decoration:none; }.primary-action { color:white; background:var(--green); }.secondary-action { color:var(--green); background:white; border:2px solid var(--green); }.text-action { color:var(--muted); background:transparent; border:0; }
.toast { position:fixed; left:50%; bottom:20px; z-index:10; padding:12px 18px; color:white; background:#20352d; border-radius:10px; opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:.2s; box-shadow:0 6px 25px #0003; }.toast.show { opacity:1; transform:translate(-50%,0); }
.hidden { display:none!important; }
@media (max-width:560px) { .site-header { padding:12px 16px; }.brand-mark { width:43px;height:43px; }.save-state { font-size:0; }.save-state span { width:10px;height:10px; }.app-shell { width:min(100% - 22px,720px); padding-top:20px; }.filters { margin-inline:-1px; }.filter { padding-inline:8px; font-size:13px; }.company-card { min-height:330px; border-radius:20px; }.details { grid-template-columns:1fr; gap:15px; }.vote-button { min-height:84px; }.vote-button small { font-size:11px; }.swipe-hint { display:none; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }