:root{--ink:#1a1f2b;--muted:#5b6475;--line:#d9deea;--bg:#f5f7fb;--panel:#fff;--accent:#2f4fd6;--accent-ink:#fff;--danger:#b42318;--ok:#067647;--warn:#8a5a00;--r:12px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#d6eed0;min-height:100vh}
/* Soft green cloud background on every page (fixed layer works on mobile too) */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(160deg,#e3f4de 0%,#cfeac8 55%,#bfe3b8 100%);background-image:url(/brand/bg-green.jpg),linear-gradient(160deg,#e3f4de 0%,#cfeac8 55%,#bfe3b8 100%);background-size:cover,cover;background-position:center,center;background-repeat:no-repeat}
a{color:var(--accent)}h1{font-size:1.7rem;margin:.2em 0 .5em}h2{font-size:1.15rem;margin:1.1em 0 .5em}h3{margin:.2em 0}
.wrap{max-width:1100px;margin:0 auto;padding:16px}.bare{max-width:560px;margin:0 auto;padding:12px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:800;color:var(--ink);text-decoration:none;display:flex;gap:8px;align-items:center}.dot{width:14px;height:14px;border-radius:4px;background:var(--accent);display:inline-block}
.links{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.links a{text-decoration:none;color:var(--ink);padding:4px 2px;border-bottom:2px solid transparent}.links a[aria-current=page]{border-color:var(--accent);font-weight:600}
.inline{display:inline;margin:0}.linkbtn{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:4px}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);padding:10px 16px;border-radius:10px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;min-height:44px}
.btn.small{padding:6px 12px;min-height:36px;font-size:.9rem}.btn.tiny{padding:2px 8px;min-height:28px;font-size:.8rem}.btn.ghost{background:transparent;color:var(--accent)}.btn.block{display:block;width:100%;margin-top:14px}
.btn.danger{background:var(--danger);border-color:var(--danger)}.btn.danger-ghost{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #8ea2ff;outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 16px}.panel.narrow{max-width:520px;margin:24px auto}.panel.center,.center{text-align:center}
.panel.danger{border-color:#f3b4ae}.panel.empty{text-align:center;padding:36px}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.muted{color:var(--muted)}.small{font-size:.875rem}.req{color:var(--danger)}.err{color:var(--danger);font-size:.9rem}.hint{color:var(--muted);font-size:.85rem}code{background:#eef1f8;padding:1px 5px;border-radius:5px;word-break:break-all}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:14px;background:#e7f6ee;border:1px solid #b6e2c9;color:#05603a}.flash.warn{background:#fff4dc;border-color:#f1d28a;color:var(--warn)}.flash.err{background:#fde8e6;border-color:#f3b4ae;color:var(--danger)}
.pill{display:inline-block;padding:1px 10px;border-radius:99px;background:#eceff5;font-size:.8rem}.pill.ok{background:#e0f4ea;color:var(--ok)}
.field{margin:0 0 10px}.field label{display:block;font-weight:600;margin-bottom:4px}
input:not([type=checkbox]):not([type=color]):not([type=file]),select,textarea{width:100%;padding:10px 12px;border:1px solid #b9c1d3;border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:44px}
input[type=color]{width:64px;height:40px;padding:2px;border:1px solid #b9c1d3;border-radius:8px;background:#fff}
.has-err input,.has-err textarea,.has-err select{border-color:var(--danger)}.msg{min-height:1.1em}
.check{display:flex;gap:10px;align-items:flex-start;margin:8px 0;cursor:pointer}.check input{margin-top:5px;width:18px;height:18px;flex:none}.check.inl{display:inline-flex;margin:0 8px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.row2{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-bottom:8px}.colors{display:flex;gap:18px;flex-wrap:wrap}
.split{display:grid;grid-template-columns:1fr;gap:16px}.split2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}.split2{grid-template-columns:1fr 1fr}.sticky{position:sticky;top:12px}}
.grid{display:grid;gap:12px}.cardrow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.qrbox{max-width:360px;margin:0 auto 10px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.qrbox svg{display:block;width:100%;height:auto}
.copyrow{display:flex;gap:6px}.copyrow input{flex:1}
/* card template — colours come only from the card's own data */
.vcard{--pt:color-mix(in srgb,var(--p) 76%,#000);--p:#1f3a5f;--s:#e8eef6;--t:#1a1a1a;--bg:#fff;background:var(--bg);color:var(--t);border:1px solid rgba(0,0,0,.12);border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.vc-head{background:var(--p);padding:20px;display:flex;justify-content:center;min-height:96px;align-items:center}
.vc-logo{max-height:72px;max-width:70%;object-fit:contain;background:var(--s);border-radius:10px;padding:6px}.vc-logo[hidden],.vc-initials[hidden]{display:none}
.vc-initials{width:68px;height:68px;border-radius:50%;background:var(--s);color:var(--p);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem}
.vc-body{padding:18px 20px 22px}.vc-name{margin:0;font-size:1.5rem;color:var(--t)}.vc-role{margin:2px 0;font-weight:600;color:var(--pt)}.vc-company{margin:0 0 12px}
.vc-list{list-style:none;margin:0;padding:0}.vc-list li{display:flex;gap:10px;padding:6px 0;border-top:1px solid rgba(0,0,0,.08);word-break:break-word}.ic{width:1.4em;text-align:center;color:var(--p)}
.vc-extra{margin:10px 0 0}.vc-extra div{display:flex;gap:8px;padding:4px 0;border-top:1px dashed rgba(0,0,0,.12)}.vc-extra dt{font-weight:600;min-width:7em}.vc-extra dd{margin:0}
.layout-centered .vc-head{background:var(--bg)}.layout-centered .vc-body{text-align:center}.layout-centered .vc-list li{justify-content:center}.layout-centered .vc-initials{background:var(--p);color:var(--s)}.layout-centered .vc-logo{background:transparent}
.layout-minimal .vc-head{background:var(--bg);justify-content:flex-start;border-bottom:4px solid var(--p);min-height:0}.layout-minimal .vc-logo{background:transparent;padding:0}.layout-minimal .vc-initials{background:var(--p);color:var(--s)}
.pubcard{--pt:color-mix(in srgb,var(--p) 76%,#000);margin:8px 0}.pubcard .panel{margin-top:14px}.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.act{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:10px;border-radius:12px;background:#fff;border:2px solid var(--p);color:var(--pt);font-weight:700;text-decoration:none;text-align:center}
.act.primary{background:var(--p);color:var(--on-p,#fff);grid-column:1/-1}.act.accent{grid-column:1/-1;background:var(--s);color:var(--pt)}
.consent{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:4px 14px;margin-bottom:12px}.consent h2{margin-top:.6em}fieldset.loc{border:1px solid var(--line);border-radius:10px;margin:10px 0}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}.filters input[type=search]{flex:2 1 280px}.filters select,.filters input[type=date]{flex:1 1 140px;width:auto}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}table.dir{width:100%;border-collapse:collapse}.dir th,.dir td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}.dir th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
@media(max-width:700px){.dir thead{display:none}.dir tr{display:block;padding:8px 4px;border-bottom:1px solid var(--line)}.dir td{display:flex;gap:8px;border:0;padding:3px 10px}.dir td::before{content:attr(data-l);min-width:6.5em;color:var(--muted);font-size:.8rem}.dir td:empty{display:none}}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0}
.kvs{margin:0}.kv{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}.kv dt{width:11em;color:var(--muted)}.kv dd{margin:0;flex:1;display:flex;gap:8px;align-items:center;justify-content:space-between;word-break:break-word}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:12px 0}.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}.kv-n{font-size:2rem;font-weight:800;line-height:1.1}.kv-l{font-weight:600}.kv-d{font-size:.78rem;color:var(--muted);margin-top:4px}
.chart{display:flex;align-items:flex-end;gap:2px;height:160px;border-bottom:1px solid var(--line)}.col{flex:1;height:100%;display:flex;align-items:flex-end}.col i{display:block;width:100%;background:var(--accent);min-height:2px;border-radius:3px 3px 0 0}.axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
.hbars{list-style:none;margin:0;padding:0}.hbars li{display:grid;grid-template-columns:minmax(80px,1.2fr) 2fr auto;gap:8px;align-items:center;padding:4px 0}.hbars .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar{background:#eceff5;border-radius:6px;height:12px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent)}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:8px 0;border-top:1px solid var(--line)}
.hero{text-align:center;padding:48px 8px 24px}.hero h1{font-size:2.3rem}.lead{max-width:640px;margin:0 auto 20px;color:var(--muted);font-size:1.1rem}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

/* ===== Theme layer: sand surfaces on green, raised 3D depth, minimal motion ===== */
:root{--ink:#1c2a21;--muted:#5d6650;--line:#d6c9a4;--panel:#f4ecd8;--accent:#17734a;--accent-ink:#fff;
--sand-hi:#faf4e4;--sand-lo:#ece0c3;--sand-edge:#d3c39a;--field:#fcf9ef;--shadow-g:30,70,40;--ease:cubic-bezier(.2,.7,.2,1)}
a{color:var(--accent)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid rgba(23,115,74,.45);outline-offset:2px}

/* navigation */
.nav{background:rgba(244,236,216,.9);border-bottom:1px solid var(--sand-edge);box-shadow:0 8px 18px -10px rgba(var(--shadow-g),.5);position:sticky;top:0;z-index:5}
.dot{background:linear-gradient(145deg,#2fb27a,#0f5a38);box-shadow:0 2px 0 #0a3d26,0 4px 8px rgba(var(--shadow-g),.35);transition:transform .3s var(--ease)}
.brand:hover .dot{transform:rotate(90deg) scale(1.1)}
.links a{transition:color .15s,border-color .15s}.links a:hover{color:var(--accent);border-color:rgba(23,115,74,.35)}
.links a.btn{color:#fff;border-bottom:1px solid #0f5a38}.links a.btn.ghost{color:var(--accent);border-bottom-color:#c9ba8f}.links a.btn:hover{color:#fff}.links a.btn.ghost:hover{color:var(--accent)}

/* raised slabs: panels, KPI tiles, tables */
.panel,.kpi,.tablewrap{background:linear-gradient(180deg,var(--sand-hi) 0%,var(--panel) 45%,var(--sand-lo) 100%);border:1px solid var(--sand-edge);
 box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 0 var(--sand-edge),0 14px 26px -10px rgba(var(--shadow-g),.45),0 3px 6px rgba(var(--shadow-g),.12)}
.panel.danger{border-color:#e0a79f;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 0 #e3b9b2,0 14px 26px -10px rgba(120,30,20,.3)}
.kpi{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.kpi:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 7px 0 var(--sand-edge),0 20px 30px -10px rgba(var(--shadow-g),.5)}
.kv-n{color:var(--accent);text-shadow:0 1px 0 rgba(255,255,255,.8)}
.dir th{background:rgba(214,201,164,.35)}
.dir tbody tr{transition:background .15s}.dir tbody tr:hover{background:rgba(23,115,74,.08)}
.consent{background:rgba(214,201,164,.28);border-color:var(--sand-edge);box-shadow:inset 0 2px 5px rgba(90,75,30,.1)}
fieldset.loc{border-color:var(--sand-edge)}
code{background:rgba(214,201,164,.5)}
.pill{background:rgba(214,201,164,.55);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}.pill.ok{background:#d3efdf}
.bar{background:rgba(214,201,164,.6);box-shadow:inset 0 2px 3px rgba(90,75,30,.18)}
.bar i,.col i{background:linear-gradient(180deg,#2fb27a,#17734a)}
.flash{box-shadow:0 6px 14px -8px rgba(var(--shadow-g),.5)}
/* QR must stay plain white for reliable scanning */
.qrbox{background:#fff;border:1px solid var(--sand-edge);box-shadow:0 4px 0 var(--sand-edge),0 12px 20px -10px rgba(var(--shadow-g),.45)}

/* inset form fields */
input:not([type=checkbox]):not([type=color]):not([type=file]),select,textarea{background:var(--field);border:1px solid #c9ba8f;
 box-shadow:inset 0 2px 4px rgba(90,75,30,.14),0 1px 0 rgba(255,255,255,.8);transition:border-color .15s,box-shadow .15s,background .15s}
input:not([type=checkbox]):not([type=color]):not([type=file]):hover,select:hover,textarea:hover{border-color:#b3a273}
input:not([type=checkbox]):not([type=color]):not([type=file]):focus,select:focus,textarea:focus{background:#fff;border-color:var(--accent);
 box-shadow:inset 0 2px 3px rgba(90,75,30,.08),0 0 0 4px rgba(23,115,74,.2)}
input[type=color]{background:var(--field);border-color:#c9ba8f;box-shadow:inset 0 1px 3px rgba(90,75,30,.15)}
.has-err input,.has-err textarea,.has-err select{border-color:var(--danger);box-shadow:inset 0 2px 4px rgba(180,35,24,.12),0 0 0 3px rgba(180,35,24,.12)}
.check input{accent-color:var(--accent)}

/* 3D buttons (edge = pressable thickness) */
.btn,.act{--e:4px;transition:transform .12s var(--ease),box-shadow .12s var(--ease),filter .15s}
.btn.small{--e:3px}.btn.tiny{--e:2px}
.btn{background:linear-gradient(180deg,#2fa571 0%,#17734a 100%);border:1px solid #0f5a38;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25);
 box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 var(--e) 0 #0c4a2e,0 calc(var(--e) + 6px) 14px rgba(12,74,46,.3)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 calc(var(--e) + 1px) 0 #0c4a2e,0 calc(var(--e) + 9px) 18px rgba(12,74,46,.34)}
.btn:active{transform:translateY(calc(var(--e) - 1px));filter:none;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 1px 0 #0c4a2e,0 2px 4px rgba(12,74,46,.3)}
.btn.ghost,.btn.danger-ghost{background:linear-gradient(180deg,var(--sand-hi),var(--sand-lo));text-shadow:none;border-color:#c9ba8f;
 box-shadow:0 1px 0 #fff inset,0 var(--e) 0 var(--sand-edge),0 calc(var(--e) + 6px) 12px rgba(var(--shadow-g),.22)}
.btn.ghost{color:var(--accent)}
.btn.ghost:hover,.btn.danger-ghost:hover{box-shadow:0 1px 0 #fff inset,0 calc(var(--e) + 1px) 0 var(--sand-edge),0 calc(var(--e) + 9px) 16px rgba(var(--shadow-g),.28)}
.btn.ghost:active,.btn.danger-ghost:active{box-shadow:0 1px 0 #fff inset,0 1px 0 var(--sand-edge),0 2px 3px rgba(var(--shadow-g),.2)}
.btn.danger{background:linear-gradient(180deg,#d9473a,#a8281c);border-color:#82190f;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 var(--e) 0 #6e140c,0 calc(var(--e) + 6px) 14px rgba(110,20,12,.3)}
.btn.danger:active{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 #6e140c}
.btn.danger-ghost{color:var(--danger);border-color:#d9a69f}
.linkbtn{transition:color .15s}.linkbtn:hover{color:var(--accent)}

/* public card: action buttons + card depth (card colours still come from the card's own data) */
.act{background:linear-gradient(180deg,var(--sand-hi),var(--sand-lo));
 box-shadow:0 1px 0 #fff inset,0 var(--e) 0 color-mix(in srgb,var(--p) 55%,#000),0 calc(var(--e) + 6px) 12px rgba(var(--shadow-g),.25)}
.act.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--p) 88%,#fff),var(--p));box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 var(--e) 0 color-mix(in srgb,var(--p) 55%,#000),0 calc(var(--e) + 6px) 14px rgba(var(--shadow-g),.3)}
.act.accent{background:linear-gradient(180deg,color-mix(in srgb,var(--s) 45%,var(--sand-hi)),color-mix(in srgb,var(--s) 45%,var(--sand-lo)))}
.act:hover{transform:translateY(-2px);filter:brightness(1.04)}
.act:active{transform:translateY(calc(var(--e) - 1px));box-shadow:0 1px 0 color-mix(in srgb,var(--p) 55%,#000),0 2px 4px rgba(var(--shadow-g),.25)}
.vcard{box-shadow:0 4px 0 rgba(0,0,0,.12),0 18px 34px -12px rgba(var(--shadow-g),.55),0 4px 10px rgba(var(--shadow-g),.15)}

/* minimal motion */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.panel,.kpi,.tablewrap,.vcard,.hero,.features>*,.flash,.actions-grid{animation:rise .5s var(--ease) backwards}
.kpis .kpi:nth-child(2),.features>*:nth-child(2){animation-delay:.06s}.kpis .kpi:nth-child(3),.features>*:nth-child(3){animation-delay:.12s}
.kpis .kpi:nth-child(4),.features>*:nth-child(4){animation-delay:.18s}.kpis .kpi:nth-child(n+5){animation-delay:.24s}
.wrap>.panel:nth-of-type(2){animation-delay:.07s}.wrap>.panel:nth-of-type(3){animation-delay:.14s}
.features>*{transition:transform .2s var(--ease)}.features>*:hover{transform:translateY(-3px)}
.col i{transform-origin:bottom;animation:growY .6s var(--ease) backwards}.bar i{transform-origin:left;animation:growX .7s var(--ease) backwards}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}