/* ============================================================
   Jackal — "Volta" boxed theme
   Warm cream paper · hard corners · hairline borders · serif display
   Loaded last so it overrides the inline skin.
   ============================================================ */

:root{
  --green:#0B4433;
  --emerald:#0B4433;
  --emerald2:#0E5742;
  --bg:#F2EEE3;            /* warm cream paper */
  --panel:#FAF7EE;         /* off-white card */
  --panel2:#EFE9D8;
  --surface:#FAF7EE;
  --surface2:#ECE5D3;
  --ink:#16251E;           /* near-black green-gray */
  --muted:#718279;
  --faint:#9BA69F;
  --line:#D8D0BC;          /* warm hairline */
  --amber:#D99A3D;
  --red:#C15B50;
  --radius:8px;
  --shadow:0 1px 0 rgba(22,37,30,.05);
}

/* soft corners — rounded dikit, tetap kesan kotak */
*{ border-radius:8px !important; }

/* saklar (toggle switch) tetap bulat penuh */
.foot-toggle .tk{ border-radius:999px !important; }
.foot-toggle .tk::after{ border-radius:50% !important; }

body{ background:var(--bg); }

/* ---- editorial serif display ---- */
.hero .big,
.hero .sub,
.datebar .val{
  font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
}
.hero .big{ color:#8FE8B1; }
.hero .sub{ color:#D9ECDF; }

/* ---- flat boxed surfaces, hairline borders, no soft shadow ---- */
.card,
.hero{
  box-shadow:none !important;
  border:1px solid var(--line);
}
.card{ background:var(--surface); }

.hero{
  background-color:var(--emerald);
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.055) 1px, transparent 1.2px),
    radial-gradient(circle at 17px 17px, rgba(255,255,255,.028) 1px, transparent 1.2px);
  background-size: 17px 17px, 34px 34px;
  border-color:#0E5742;
}
.hero::before{ background:none; }

/* ---- square controls with hairline borders ---- */
.btn,
.btn.primary,
.brand .dot,
.addbtn{ box-shadow:none !important; }

.btn{ border:1px solid var(--line); }
.btn.primary{ border-color:var(--emerald); background:var(--emerald); }
.btn.primary:active{ background:var(--emerald2); }
.btn.danger{ background:#F6E3DF; border-color:#E3B5AE; }
.btn.ghost{ background:var(--surface2); }

.field input,
.txt{
  border:1px solid var(--line);
  background:var(--surface);
}
.field input[readonly]{ background:var(--surface2); color:var(--emerald); }

/* ---- chips / tags / pills square ---- */
.datebar{ background:var(--surface2); border:1px solid var(--line); }

/* ---- tabbar flat + square ---- */
.tabbar{ background:var(--surface); }
.tabbar .tab.active{ background:var(--surface2); }

/* ---- toast square ---- */
#toast{ border-radius:0; }