/* Syndico — Grass-style light neo-brutalist theme (loaded AFTER page styles) */
:root{
  --ink:#0d1d0f;                 /* dark text on lime accents */
  --panel:#ffffff;
  --panel2:#f2f8e9;
  --fg:#17251b;
  --muted:#5f7264;
  --border:rgba(13,29,15,.28);
  --line:rgba(13,29,15,.1);
  --lime:#9fe60e;
  --green:#00bf72;
  --teal:#008793;
}
body{background:#f4f6ec !important;color:var(--fg)}
::selection{background:var(--lime);color:var(--ink)}
::-webkit-scrollbar-thumb{background:rgba(13,29,15,.25)}

/* ---- neo-brutalist card system ---- */
.panel,.kpi,.dev-card,.modal,.plat,.app-card,.typecard,.tour-card,
.side-foot,.side-net,.mini-tile,.step,.card,.stat,.qa,.ptcard,.preview,.cta-box{
  border:2px solid #0d1d0f !important;
  box-shadow:4px 4px 0 rgba(13,29,15,.9) !important;
  background:var(--panel) !important;
}
.kpi:hover{transform:translateY(-3px) !important;border-color:#0d1d0f !important}

/* ---- buttons: lime fill, black border, hard shadow ---- */
.btn{
  background:var(--lime) !important;color:#0d1d0f !important;
  border:2px solid #0d1d0f !important;
  box-shadow:3px 3px 0 rgba(13,29,15,.9) !important;
  font-weight:700 !important;
}
.btn:hover{transform:translate(-1px,-1px) !important;box-shadow:4px 4px 0 rgba(13,29,15,.9) !important}
.btn.ghost{background:var(--panel) !important;color:var(--fg) !important;border:2px solid #0d1d0f !important}
.btn.ghost:hover{color:#0d1d0f !important;background:var(--panel2) !important}
.btn.danger{background:var(--panel) !important;color:#c2321f !important;border-color:#c2321f !important}

/* ---- inputs ---- */
.input{background:#fff !important;border:2px solid #0d1d0f !important;color:var(--fg) !important}
.input:focus{border-color:var(--green) !important;background:#fff !important}
.field label{color:var(--muted) !important}

/* ---- sidebar ---- */
aside{background:#fbfdf6 !important;border-right:2px solid #0d1d0f !important;backdrop-filter:none !important}
.nav a{color:#3c4a3f !important}
.nav a:hover{color:#0d1d0f !important;background:rgba(159,230,14,.15) !important}
.nav a.active{background:var(--lime) !important;color:#0d1d0f !important;border:2px solid #0d1d0f !important;box-shadow:3px 3px 0 rgba(13,29,15,.9) !important}
.nav a.active .sicon{stroke:#0d1d0f}
.side-net{background:#eef7e2 !important;border:2px solid #0d1d0f !important;box-shadow:4px 4px 0 rgba(13,29,15,.9) !important}
.side-foot{background:#e4f5d4 !important;border:2px solid #0d1d0f !important;box-shadow:4px 4px 0 rgba(13,29,15,.9) !important}
.side-foot .v,.side-net .k{color:#3f6212 !important}
.side-foot .bar{background:rgba(13,29,15,.12) !important}
.side-foot small{color:var(--muted) !important}
.logo .mark{background:linear-gradient(135deg,#00bf72,#9fe60e) !important;border:2px solid #0d1d0f}
.logo,footer .logo{color:#0d1d0f !important}
.nav .sicon{stroke:#3c4a3f}
.nav a.active .sicon,.logo .sicon{stroke:#0d1d0f}

/* ---- text accents readable on light ---- */
.kpi.hero-kpi .v,.big-num,.score,.ring-label .pct,.kpi .v{color:#3f6212 !important}
.kpi .k,.panel .ph .act,.hint,.kpi .d,.stat .lbl{color:var(--muted) !important}
.kpi .d.up{color:#15803d !important}
.tier-note,.side-foot small{color:var(--muted)}

/* ---- topbar ---- */
.topbar h1{color:#0d1d0f !important}
.avatar{border:2px solid #0d1d0f;color:#0d1d0f !important}
#balChip{background:#fff !important;border:2px solid #0d1d0f !important;box-shadow:3px 3px 0 rgba(13,29,15,.9) !important;color:#0d1d0f !important}
.dot-btn{background:#fff !important;border:2px solid #0d1d0f !important;color:#0d1d0f !important}

/* ---- status strip ---- */
.status{background:#e4f5d4 !important;border:2px solid #0d1d0f !important;box-shadow:4px 4px 0 rgba(13,29,15,.9) !important;color:#0d1d0f !important}
.status .b-dot{background:#15803d !important;box-shadow:0 0 6px rgba(21,128,61,.6) !important}
.chip{border:2px solid #0d1d0f !important;color:#3f6212 !important;background:#f0fae0 !important}
.chip i{background:#15803d !important}
.chip.paused{color:var(--muted) !important;background:#eef0ea !important}
.chip.paused i{background:var(--muted) !important}

/* ---- tables ---- */
.tbl th{color:var(--muted) !important;border-bottom:2px solid #0d1d0f !important}
.tbl td{border-bottom:1px solid rgba(13,29,15,.12) !important;color:var(--fg)}
.tbl tbody tr:hover{background:#f2f8e9 !important}

/* ---- charts ---- */
.chart-wrap svg text{fill:#5f7264 !important}
#chartTip{background:#0d1d0f !important;color:#eaf6ee !important;border:2px solid #0d1d0f !important}

/* ---- modals ---- */
.modal-back{background:rgba(13,29,15,.45) !important}
.tour-back{background:rgba(13,29,15,.5) !important}
.modal,.tour-card{color:var(--fg)}
.modal h3,.tour-card h3{color:#0d1d0f !important}
.tour-card p{color:var(--muted) !important}
.reflink{background:#fff !important;border:2px solid #0d1d0f !important}
.reflink code{color:#3f6212 !important}

/* ---- dev cards / type cards ---- */
.dev-card .dico,.typecard .tico,.plat .pico{background:#e4f5d4 !important;border:2px solid #0d1d0f !important}
.dev-card .stats div{border:1.5px solid rgba(13,29,15,.2) !important}
.dev-card .stats .v{color:#3f6212 !important}
.tbadge{background:var(--lime) !important;color:#0d1d0f !important;border:2px solid #0d1d0f}
.typecard:hover{background:#f2f8e9 !important;transform:translateY(-3px)}
.typecard b{color:#0d1d0f}

/* ---- rings & svg strokes ---- */
.ring-bg{stroke:rgba(13,29,15,.12) !important}
.ring-meta b{color:#0d1d0f !important}
.sicon{stroke:url(#syg)}
/* darken svg icon strokes for light bg via filter trick not possible; recolor via CSS variable fallback */
.side-net .g-row b{color:#0d1d0f !important}
.side-net .g-row{color:var(--muted) !important}

/* ---- misc ---- */
.empty{color:var(--muted) !important}
.mono{color:var(--muted) !important}
#toast{background:#0d1d0f !important;color:#eaf6ee !important;border:2px solid #0d1d0f !important;box-shadow:4px 4px 0 rgba(159,230,14,.7) !important}
#toast b{color:var(--lime) !important}
.hamb{background:#fff !important;color:#0d1d0f !important;border:2px solid #0d1d0f !important}
.seg{background:rgba(13,29,15,.08) !important}
.seg button.on{background:var(--lime) !important;color:#0d1d0f !important;border:2px solid #0d1d0f}
.legend{color:var(--muted) !important}
.slider{accent-color:#00bf72}
.qa button{color:#0d1d0f !important}
.qa .a p{color:var(--muted) !important}
.step .badge,.how3 .num,.step .num{border:2px solid #0d1d0f;color:#0d1d0f !important;box-shadow:2px 2px 0 rgba(13,29,15,.9)}
footer{background:#fbfdf6 !important;border-top:2px solid #0d1d0f !important}
