/* SebarinDonk! v7 · Greenhouse visual system. All controls remain native SVG. */
:root{
  --brand:#176749;--brand-2:#0c4434;--brand-soft:#e7f5ec;--primary:#176749;
  --accent:#b6db7f;--teal:#319a72;--ink:#123529;--text:#294a3b;--muted:#648272;
  --line:#dce9df;--line-2:#edf3ec;--surface:#fff;--surface-2:#f5f9f5;--surface-3:#eaf4eb;
  --good:#13825a;--warn:#ad781d;--danger:#bc4051;
  --shadow:0 20px 50px rgba(18,64,43,.095);--shadow-sm:0 8px 25px rgba(18,64,43,.07);
  --radius:20px;
}
body{background:#f6f9f6;color:var(--text)}
::selection{background:#9dd5b7;color:#082d20}
:focus-visible{outline:3px solid #70c89d!important;outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.6;transform:none!important}
.btn{border-radius:12px;min-height:38px;letter-spacing:-.01em;transition:transform .23s ease,background .23s ease,box-shadow .23s ease,border .23s ease}
.btn.primary{background:linear-gradient(135deg,#26805b,#104f38);box-shadow:0 5px 16px rgba(16,79,56,.16)}
.btn.primary:hover{background:linear-gradient(135deg,#31966b,#11593d);box-shadow:0 13px 26px rgba(16,79,56,.22)}
.btn.outline{background:#fff;border-color:#9ac4aa;color:#135439}
.btn.success{background:#e5f5e9;border-color:#a3d7b5;color:#0a6846}
.btn.danger{background:#fff3f3;color:#b93c4c;border-color:#f0ced2}
.btn.ghost{color:#194a37}
.btn:active,.nav:active,.wa-contact:active{transform:scale(.985)}
.badge,.status{border-radius:999px;font-weight:800}
.form input,.form select,.form textarea,.search{font-size:13px;border-radius:12px;border:1px solid #d3e6d9;background:#fcfefc;color:#153b2b}
.form input:focus,.form select:focus,.form textarea:focus,.search:focus{border-color:#61ad86;box-shadow:0 0 0 4px rgba(48,145,100,.11)}
.form label{font-size:12px;color:#365948;font-weight:750}
/* Public landing */
.public-view{background:#f9fbf8;overflow:hidden}
.public-nav{background:rgba(250,253,249,.88);border-bottom:1px solid #e1ece3;box-shadow:0 4px 20px rgba(15,60,38,.025)}
.public-brand strong{color:#0b3022;letter-spacing:-.055em;font-size:20px}
.public-brand small{color:#5b8c70;letter-spacing:.095em;text-transform:uppercase}
.brand-mark,.brand-lockup .brand-icon{background:linear-gradient(140deg,#27815b,#083e2c);border:1px solid #3c9a70;box-shadow:0 10px 25px rgba(12,73,42,.16);border-radius:14px}
.desktop-nav a{color:#335a43;font-weight:750}
.desktop-nav a:hover{color:#107348}
.hero{position:relative;padding-top:88px;padding-bottom:105px;isolation:isolate}
.hero:before{content:"";position:absolute;z-index:-1;inset:-10% -40vw 2% -40vw;pointer-events:none;background:radial-gradient(ellipse at 72% 38%,rgba(154,221,171,.28),transparent 43%),radial-gradient(ellipse at 24% 20%,rgba(196,230,187,.22),transparent 40%)}
.hero-copy{position:relative}
.hero .eyebrow{color:#136343;background:#e4f5e9;border:1px solid #c5e7d0;border-radius:999px;padding:9px 14px;letter-spacing:.13em}
.hero h1{font-size:clamp(43px,5.5vw,72px);line-height:1.08;letter-spacing:-.061em;color:#092d20;max-width:740px}
.hero p{color:#587b67;font-size:16px;line-height:1.85}
.trust-row{color:#457a59}
.trust-row span{display:flex;align-items:center;gap:7px}
.trust-row svg{color:#23895b}
.hero-visual:before{background:radial-gradient(circle,rgba(73,181,112,.22),transparent 69%);animation:sd-glow 7s ease-in-out infinite alternate}
.dashboard-mock{background:linear-gradient(160deg,#fff,#f3faf4);border:1px solid #bedbc5;box-shadow:0 38px 90px rgba(17,79,42,.17);transform:perspective(1100px) rotateY(-7deg) rotateX(4deg);animation:sd-float 7s ease-in-out infinite}
.mock-brand b{color:#163e2b}.mock-stat,.mock-wide{border-color:#e2efe5;background:#fff}.mock-bars i{background:linear-gradient(180deg,#46ad75,#125d40)}
.metric-strip{border-color:#d7e8da;box-shadow:0 20px 55px rgba(20,72,40,.065)}
.metric-strip strong{color:#123f2c;font-size:23px}
.section-title h2,.benefit-copy h2{color:#092f20;letter-spacing:-.045em}
.feature-card,.price-card,.benefit-panel,.steps article{border-color:#e0ecdf;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
.feature-card,.price-card{background:linear-gradient(170deg,#fff 20%,#fafdFA 100%)}
.feature-card:hover,.price-card:hover,.worker-card:hover,.kpi-card:hover{transform:translateY(-5px);border-color:#9ec9ac;box-shadow:0 18px 44px rgba(19,77,44,.13)}
.feature-icon,.feature-icon.orange,.feature-icon.teal{background:#e5f5e8;color:#147950;border:1px solid #c5e7d0}
.feature-card h3,.steps h3{color:#163e2b}
.feature-card p,.steps p{color:#648170}
.benefits-wrap,.pricing-section{background:linear-gradient(180deg,#f1f8f1,#eaf4ec)}
.benefit-panel{background:linear-gradient(155deg,#fff,#f7fcf7);box-shadow:var(--shadow)}
.benefit-rows>div{border-color:var(--line-2)}
.check-list span{color:#355d44}.steps article{border-top:2px solid #85ba97}
.price-card.featured{border-color:#4f9d72;box-shadow:0 19px 56px rgba(35,122,77,.15)}
.final-cta{position:relative;overflow:hidden;background:linear-gradient(125deg,#092a20,#15583e 68%,#24744b);box-shadow:0 25px 60px rgba(9,57,38,.23)}
.final-cta:before{content:"";position:absolute;width:480px;height:480px;right:-180px;top:-240px;border:1px solid rgba(194,244,207,.19);border-radius:50%;box-shadow:0 0 0 65px rgba(216,245,223,.025),0 0 0 130px rgba(216,245,223,.025);animation:sd-ring 14s linear infinite}
.final-cta>*{position:relative}.final-cta .btn.white{color:#10452f}
.public-footer{background:#0b261e;color:#c1d8c8}.footer-grid a{color:#a3c3ad}.footer-brand p{color:#9bbcac}
/* Authentication */
.auth-view{background:#f0f7f0}
.auth-visual,.register-visual{background:linear-gradient(135deg,#08291f,#0b3b2b 48%,#216b47)}
.auth-visual:before{animation:sd-glow 9s ease-in-out infinite alternate}
.auth-page .btn.primary{box-shadow:0 12px 27px rgba(15,80,48,.19)}
/* Dashboard + every Super Admin page */
.app{background:#f3f8f3}
.sidebar{background:linear-gradient(174deg,#0d3527,#0a271e 82%);border-right:1px solid #184b36;box-shadow:4px 0 30px rgba(6,36,22,.1)}
.side-head{border-bottom:1px solid rgba(197,240,211,.1)}
.sidebar .brand-lockup strong,.sidebar .brand-lockup small{color:#f1fff4}
.sidebar .brand-lockup small{opacity:.56}
.sidebar .nav-label{color:#93b7a3;font-size:10px;letter-spacing:.13em}
.sidebar .nav{color:#bbd6c6;border:1px solid transparent;font-size:12px;font-weight:700;padding:11px 12px}
.sidebar .nav svg{color:#91bca4;flex-shrink:0}
.sidebar .nav:hover{background:rgba(174,224,192,.09);color:#fff}
.sidebar .nav.active{background:linear-gradient(105deg,rgba(50,158,101,.30),rgba(81,187,123,.13));border-color:rgba(113,208,151,.28);color:#f4fff7;box-shadow:inset 3px 0 0 #74d799}
.sidebar .nav.active svg{color:#9df0b7}
.sidebar .side-foot{border-top-color:rgba(176,224,192,.14)}
.sidebar .system-chip{background:rgba(111,191,138,.08);border-color:rgba(153,218,174,.18);color:#effbf2}
.sidebar .system-chip small,.sidebar .system-chip b{color:#b5d6bd}
.topbar{background:rgba(247,251,247,.91);backdrop-filter:blur(20px);border-color:#dae9dd}
.topbar h2{color:#113a29;font-size:clamp(18px,2.2vw,23px);letter-spacing:-.04em}
.kicker{color:#2a8257}
.content{max-width:1760px;margin-inline:auto}
.section,.kpi-card,.stat,.worker-card,.mini-card{background:#fff;border:1px solid #dce9df;border-radius:18px;box-shadow:0 9px 30px rgba(21,67,40,.035)}
.stat,.kpi-card{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.stat:after,.kpi-card:after{content:"";position:absolute;right:-40px;top:-58px;width:115px;height:115px;border-radius:50%;background:radial-gradient(circle,rgba(94,185,113,.09),transparent 66%);pointer-events:none}
.stat strong,.kpi-card strong,.mini-card b{color:#123d2b}
.section-head{border-color:#eef4ee}.section-head h3{color:#143c2b;letter-spacing:-.025em}
.worker-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;gap:15px}
.worker-card .avatar{background:#e5f6e9;color:#0f744c}
.worker-card b{color:#17402d}
.data-table th{background:#f2f8f3;color:#497558;letter-spacing:.085em}
.data-table tbody tr:hover{background:#f6fbf6}
.admin-hero{background:linear-gradient(120deg,#ebf7ed,#fff);border-color:#d3e9d7}
.admin-hero h3{color:#133d2a}
.app-banner{background:#edf8ef;border-color:#c7e5d0;color:#245f3d}
.notification-icon{background:#e6f5eb;color:#24734b}
.toast{background:#fafffb;border-color:#cce2d1;font-size:12px}
.modal-backdrop{background:rgba(5,27,18,.66)}
.modal-card{border:1px solid #b9d6c1;box-shadow:0 28px 95px rgba(3,34,20,.31);border-radius:22px}
.modal-head{background:rgba(251,254,251,.96);border-color:#e2eee4}
.tabs{scrollbar-color:#9dc3a6 transparent}
.tab.active{color:#136746;border-color:#2b9b65}
.form .hint,.hint{line-height:1.5}
/* Realtime WhatsApp inbox */
.modal-card:has(.wa-inbox-body){width:min(1100px,100%)}
.wa-inbox-body{padding:0;overflow:hidden}
.wa-inbox-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;background:linear-gradient(135deg,#edf8ef,#fff)}
.wa-inbox-heading h3,.wa-auto-settings h3{display:flex;align-items:center;gap:8px;margin:0;font-size:17px;color:#114632}
.wa-inbox-heading h3 svg,.wa-auto-settings h3 svg{color:#217c53}
.wa-inbox-heading p{font-size:12px;color:#648371;margin:5px 0 0;line-height:1.5}
.wa-inbox{display:grid;grid-template-columns:310px minmax(0,1fr);height:min(59vh,575px);min-height:390px;border-top:1px solid #dceadf;border-bottom:1px solid #dceadf}
.wa-inbox-contacts{display:flex;flex-direction:column;min-width:0;border-right:1px solid #dbe9de;background:#f7fbf7}
.wa-inbox-panel-title{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;font-size:13px;font-weight:800;color:#1c4f37;border-bottom:1px solid #e4efe5}
.wa-inbox-panel-title span{font-weight:600;font-size:11px;color:#779983}
.wa-inbox-contact-list{overflow:auto;flex:1}
.wa-contact{display:flex;align-items:center;width:100%;gap:10px;padding:13px 12px;text-align:left;border:0;border-bottom:1px solid #e8f1e9;background:transparent;cursor:pointer;transition:background .2s}
.wa-contact:hover,.wa-contact.selected{background:#e6f5e9}
.wa-contact.selected{box-shadow:inset 3px 0 0 #24885a}
.wa-contact-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;color:#257650;background:#d6ebdc}
.wa-contact-icon svg{width:17px;height:17px}
.wa-contact-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.wa-contact-info b{font-size:12px;color:#1d4d34;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-contact-info small{font-size:11px;color:#6e8a75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-contact-meta{display:flex;align-items:end;gap:6px;flex-direction:column}.wa-contact-meta small{white-space:nowrap;font-size:10px;color:#75937d}.wa-unread{border-radius:999px;background:#218459;color:#fff;font-size:10px;min-width:20px;height:20px;display:grid;place-items:center}
.wa-chat-pane{display:flex;min-width:0;flex-direction:column;background:#f3f8f1}
.wa-chat-header{padding:15px 18px;background:#fff;border-bottom:1px solid #dfebe0;font-size:12px;font-weight:800;color:#1d5336;min-height:49px}
.wa-chat-thread{flex:1;overflow:auto;padding:20px 19px;display:flex;flex-direction:column;gap:12px;background-image:radial-gradient(#dce9d6 1px,transparent 1px);background-size:24px 24px}
.wa-inbox-empty{text-align:center;color:#829688;font-size:12px;line-height:1.6;padding:45px 18px;margin:auto}
.wa-bubble-row{display:flex;width:100%}.wa-bubble-row.out{justify-content:flex-end}.wa-bubble-row.in{justify-content:flex-start}
.wa-bubble{max-width:min(85%,440px);padding:10px 12px;border:1px solid #dce9dc;border-radius:15px 15px 15px 3px;background:#fff;box-shadow:0 3px 12px rgba(25,67,41,.07)}
.wa-bubble-row.out .wa-bubble{background:#d6efd9;border-color:#c1e2c7;border-radius:15px 15px 3px 15px}
.wa-msg-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-size:13px;color:#1e4030}
.wa-bubble>small:last-child{display:flex;align-items:center;justify-content:flex-end;gap:4px;color:#60866e;font-size:10px;margin-top:4px}
.wa-bubble>small svg{width:13px;height:13px}.wa-media-kind{display:block;color:#497556;font-weight:800;text-transform:uppercase;font-size:9px;letter-spacing:.06em;margin-bottom:4px}
.wa-compose{display:flex;align-items:center;gap:9px;padding:12px;background:#fff;border-top:1px solid #e3eee5}
.wa-compose input{flex:1;min-width:0;border:1px solid #d8e9dc;border-radius:12px;outline:none;padding:12px 14px;background:#f8fcf8;color:#173e2b;font-size:13px}
.wa-compose input:focus{border-color:#3ba06a;box-shadow:0 0 0 3px rgba(57,155,98,.13)}
.wa-inbox-tip{padding:12px 20px;background:#fbfdfb;font-size:11px}
.wa-auto-settings .section-head{padding:0 0 16px;border-color:#e5efe5;margin-bottom:18px}
.wa-auto-settings .form{max-width:750px}.wa-auto-settings .check-row{padding:14px 15px;border:1px solid #cfe3d4;border-radius:13px;background:#eff8f0;font-size:13px}
.inbox-shortcut{background:#e8f5ed;color:#176c47;border:1px solid #c9e6d3}
/* Lively but lightweight recurring animations */
@keyframes sd-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes sd-glow{0%{opacity:.48;scale:.93}100%{opacity:1;scale:1.07}}
@keyframes sd-ring{to{transform:rotate(360deg)}}
@keyframes sd-pulse{0%,100%{box-shadow:0 0 0 0 rgba(51,182,111,.25)}50%{box-shadow:0 0 0 8px rgba(51,182,111,0)}}
.pulse-dot{animation:sd-pulse 3s ease-in-out infinite}
.mock-bars i{transform-origin:bottom;animation:sd-bar 4s ease-in-out infinite alternate}
.mock-bars i:nth-child(2n){animation-delay:1s}.mock-bars i:nth-child(3n){animation-delay:2s}
@keyframes sd-bar{0%{transform:scaleY(.7)}100%{transform:scaleY(1)}}
@media(max-width:980px){.dashboard-mock{transform:none}.hero{padding-top:56px}.wa-inbox{grid-template-columns:255px minmax(0,1fr)}}
@media(max-width:760px){.sidebar{width:min(300px,88vw)}.public-brand strong{font-size:17px}.hero{padding-top:40px;padding-bottom:55px}.hero h1{font-size:clamp(35px,8vw,48px)}.dashboard-mock{animation:sd-float 8s ease-in-out infinite}.modal-card:has(.wa-inbox-body){max-height:94vh}.wa-inbox{grid-template-columns:1fr;grid-template-rows:150px minmax(0,1fr);height:65vh;min-height:440px}.wa-inbox-contacts{border-right:0;border-bottom:1px solid #dbe9de}.wa-inbox-contact-list{display:flex;overflow-x:auto;overflow-y:hidden}.wa-contact{min-width:180px;max-width:220px;border-right:1px solid #e6f0e7;border-bottom:0}.wa-inbox-panel-title{padding:8px 12px}.wa-chat-thread{padding:12px}.wa-inbox-heading{padding:13px 15px}.wa-inbox-heading h3{font-size:15px}.wa-compose{padding:8px}.wa-compose .btn{padding:10px 11px}}
@media(max-width:480px){.hero h1{font-size:36px}.feature-card{padding:21px}.wa-inbox{grid-template-rows:135px minmax(0,1fr);height:65vh}.wa-contact{min-width:175px;padding:10px}.wa-inbox-heading p{font-size:10px}.wa-bubble{max-width:90%}.wa-chat-header{padding:10px;font-size:11px;min-height:39px}}
@media(prefers-reduced-motion:reduce){.dashboard-mock,.hero-visual:before,.final-cta:before,.pulse-dot,.mock-bars i,.auth-visual:before{animation:none!important;translate:none!important}}
.wa-chat-count{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;padding:5px 8px;background:#dcf4e2;color:#14583b;border:1px solid #b7e1c3;border-radius:999px;font-weight:800}
.wa-chat-count svg{width:12px;height:12px}
.worker-card .card-top{flex-wrap:wrap}
.worker-card .card-top .identity{flex:1;min-width:180px}