/* Behfarm — design system for both panels. samin = side-menu admin (Bizlyt-style), customer = top pill menu (PolicyPilot-style).
   Day is the default; night via html[data-theme="dark"]. Author: SPSDEVNIC.NET */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-wght.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bg: #eceef3;
    --card: #ffffff;
    --soft: #f5f6f9;
    --ink: #1b2130;
    --mute: #6a7386;
    --line: #e5e8ef;
    --pri: #2b7bf0;
    --pri-2: #1f62cc;
    --pri-soft: #e6f0fe;
    --on-pri: #ffffff;
    --ok: #16a05b;  --ok-soft: #e1f6ea;
    --warn: #d98a00; --warn-soft: #fdf1d6;
    --bad: #d6403a;  --bad-soft: #fde7e5;
    --k1: #eff2c9;  --k2: #fcf4dc;  --k3: #e0f6ea;  --k4: #e1edfd;
    --shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 6px 20px rgba(20, 30, 60, .05);
    --r: 18px;
    --r-s: 12px;
    color-scheme: light;
}
html[data-theme="dark"] {
    --bg: #0f1218;
    --card: #181c25;
    --soft: #1e2330;
    --ink: #e8ebf2;
    --mute: #99a2b5;
    --line: #272d3a;
    --pri: #4d94ff;
    --pri-2: #3b82f0;
    --pri-soft: #1a2a45;
    --on-pri: #0b1220;
    --ok: #3ccf8a;  --ok-soft: #12291f;
    --warn: #f0b441; --warn-soft: #2e2512;
    --bad: #ff7a73;  --bad-soft: #321a19;
    --k1: #24281a;  --k2: #2a2517;  --k3: #14281f;  --k4: #14233a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    color-scheme: dark;
}
body.customer { --bg: #ececee; --pri: #1b5ce0; --pri-2: #1649b8; --pri-soft: #e4ecfd; }
html[data-theme="dark"] body.customer { --bg: #0e1015; --pri: #4d86f5; --pri-soft: #17243f; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 400 15px/1.7 'Vazirmatn', Tahoma, sans-serif;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 700; line-height: 1.4; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; margin: 18px 0 6px; }
a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
.ic { flex: none; }
.num { font-variant-numeric: tabular-nums; }
.grow { flex: 1; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 6px; }

/* ---- controls ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 20px;
    border: 1px solid transparent; border-radius: 999px; background: var(--pri); color: var(--on-pri);
    font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s, transform .05s;
}
.btn:hover { background: var(--pri-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--soft); }
.btn.light { background: rgba(255, 255, 255, .18); color: #fff; }
.btn.block { width: 100%; }
.btn.disabled { opacity: .55; pointer-events: none; }
.btn em { font-style: normal; font-weight: 400; font-size: 12px; opacity: .8; }
.iconbtn {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
}
.iconbtn:hover { background: var(--soft); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--pri); font: inherit; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.when-dark { display: none; line-height: 0; } .when-light { line-height: 0; }
html[data-theme="dark"] .when-dark { display: inline; }
html[data-theme="dark"] .when-light { display: none; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--mute); }
.field small { color: var(--mute); font-weight: 400; }
input, select, textarea {
    width: 100%; min-height: 44px; padding: 8px 14px; background: var(--soft); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-s); font: inherit; font-size: 15px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pri); outline-offset: 0; background: var(--card); }
input[readonly] { opacity: .7; }
input[type=checkbox] { width: 18px; min-height: 18px; accent-color: var(--pri); }
.check { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; cursor: pointer; }
.otp { text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { color: var(--mute); font-size: 13px; margin-bottom: 12px; }
.err-text { color: var(--bad); }
.alt { margin-top: 18px; color: var(--mute); font-size: 14px; text-align: center; }
.inline-form { margin-top: 14px; text-align: center; color: var(--mute); font-size: 14px; }

/* ---- cards, tables ---- */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-h a { font-size: 13px; }
.stack { display: grid; gap: 16px; }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 14px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: right; font-weight: 600; font-size: 12.5px; color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--soft); }
.empty-note { color: var(--mute); text-align: center; padding: 28px 0; }
.card.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; color: var(--mute); }
.card.empty h2 { color: var(--ink); font-size: 18px; }
.card.empty p { max-width: 46ch; }

.badge { display: inline-block; padding: 2px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--soft); color: var(--mute); }
.badge.green { background: var(--ok-soft); color: var(--ok); }
.badge.amber { background: var(--warn-soft); color: var(--warn); }
.badge.red { background: var(--bad-soft); color: var(--bad); }
.badge.blue { background: var(--pri-soft); color: var(--pri); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.filters select { width: auto; min-width: 150px; }
.search { position: relative; flex: 1 1 240px; display: block; }
.search .ic { position: absolute; inset-inline-start: 12px; top: 13px; color: var(--mute); }
.search input { padding-inline-start: 40px; }
.pager { display: flex; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pager a, .pager b, .pager span:not(.total) { min-width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; font-size: 13px; }
.pager a { border: 1px solid var(--line); color: var(--ink); } .pager a:hover { background: var(--soft); text-decoration: none; }
.pager b { background: var(--pri); color: var(--on-pri); }
.pager .total { margin-inline-start: auto; color: var(--mute); font-size: 13px; }

.flash { position: relative; padding: 12px 44px 12px 16px; margin-bottom: 14px; border-radius: var(--r-s); font-size: 14px; background: var(--pri-soft); color: var(--pri); }
.flash.ok { background: var(--ok-soft); color: var(--ok); }
.flash.err { background: var(--bad-soft); color: var(--bad); }
.flash .x { position: absolute; inset-inline-end: 12px; top: 6px; background: none; border: 0; font-size: 22px; color: inherit; cursor: pointer; }

/* ---- page head, KPIs ---- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sub { color: var(--mute); font-size: 14px; margin-top: 2px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi { border-radius: var(--r); padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent); }
.kpi.k1 { background: var(--k1); } .kpi.k2 { background: var(--k2); } .kpi.k3 { background: var(--k3); } .kpi.k4 { background: var(--k4); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; color: var(--mute); font-size: 14px; }
.kpi-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--card); color: var(--pri); font-style: normal; }
.kpi-val { font-size: 32px; font-weight: 600; margin: 10px 0 2px; line-height: 1.2; }
.kpi-note { font-size: 12.5px; color: var(--mute); }

.status-list { list-style: none; margin: 0 0 16px; padding: 0; }
.status-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.status-list li:last-child { border-bottom: 0; }
.status-list span { color: var(--mute); }

.plan-card { background: linear-gradient(160deg, #3a86ff 0%, #1d4fd8 100%); color: #fff; }
.plan-card .card-h h2 { color: #fff; }
.plan-card .badge { background: rgba(255, 255, 255, .2); color: #fff; }
.plan-name { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.plan-feat { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; font-size: 14px; }
.plan-feat li { display: flex; gap: 8px; align-items: center; }
.plan-meta { font-size: 12.5px; opacity: .8; margin-bottom: 16px; }

/* ---- brand, menus, avatar ---- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--pri); color: var(--on-pri); }
.menu { position: relative; }
.menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 30; }
.menu-pop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: 14px; }
.menu-pop a:hover { background: var(--soft); text-decoration: none; }
.userchip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; background: transparent; border: 0; color: var(--ink); font: inherit; cursor: pointer; border-radius: 999px; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pri-soft); color: var(--pri); font-weight: 700; }
.who { display: grid; text-align: right; line-height: 1.35; }
.who b { font-size: 14px; } .who small { color: var(--mute); font-size: 12px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- samin shell: side menu ---- */
.shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; padding: 18px; min-height: 100vh; }
.side { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 22px 16px; position: sticky; top: 18px; height: calc(100vh - 36px); overflow-y: auto; }
.side .brand { padding: 0 8px 14px; }
.navgroup { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--mute); padding: 16px 10px 8px; }
.side nav { display: grid; gap: 4px; }
.navlink { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; color: var(--ink); font-size: 14.5px; font-weight: 500; }
.navlink:hover { background: var(--soft); text-decoration: none; }
.navlink.on { background: var(--pri); color: var(--on-pri); }
.navlink em { margin-inline-start: auto; font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--mute); }
.navlink.on em { background: rgba(255, 255, 255, .2); color: inherit; }
.main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.top { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 10px 14px 10px 18px; }
.crumb { font-weight: 700; font-size: 16px; }
.menubtn, .scrim { display: none; }
.samin .content { padding: 0 2px 24px; }

/* ---- customer shell: top pill menu ---- */
.cshell { max-width: 1280px; margin: 0 auto; padding: 18px 20px 40px; }
.ctop { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 26px; box-shadow: var(--shadow); padding: 12px 18px; margin-bottom: 26px; }
.pills { display: flex; gap: 4px; margin-inline-start: 24px; overflow-x: auto; scrollbar-width: none; }
.pill { padding: 9px 18px; border-radius: 999px; color: var(--mute); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.pill:hover { background: var(--soft); text-decoration: none; color: var(--ink); }
.pill.on { background: var(--soft); color: var(--ink); font-weight: 700; }
html[data-theme="light"] .pill.on { background: #eceef2; }

/* ---- auth screens ---- */
.authwrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.authcard { width: 100%; max-width: 440px; background: var(--card); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; display: grid; }
.authcard.has-side { max-width: 900px; grid-template-columns: 1fr 1fr; }
.authform { padding: 34px 34px 30px; }
.authtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.authform h1 { font-size: 22px; margin-bottom: 4px; }
.authform .sub { margin-bottom: 22px; }
.authside { background: linear-gradient(160deg, #3a86ff 0%, #1d4fd8 100%); color: #fff; padding: 40px 34px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.authside h2 { font-size: 22px; line-height: 1.6; }
.promo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.promo li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.promo .ic { margin-top: 3px; padding: 2px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.samin .authcard { max-width: 420px; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
    .cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; padding: 12px; }
    .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 284px; height: 100vh; border-radius: 0 24px 24px 0; z-index: 50; transform: translateX(110%); transition: transform .22s; }
    body.side-open .side { transform: none; }
    .scrim { display: block; position: fixed; inset: 0; background: rgba(10, 14, 24, .45); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
    body.side-open .scrim { opacity: 1; pointer-events: auto; }
    .menubtn { display: inline-grid; }
    .who { display: none; }
    .ctop { flex-wrap: wrap; border-radius: 22px; }
    .pills { order: 5; width: 100%; margin: 0; }
    .authcard.has-side { grid-template-columns: 1fr; max-width: 440px; }
    .authside { display: none; }
}
@media (max-width: 560px) {
    h1 { font-size: 21px; }
    .row2 { grid-template-columns: 1fr; }
    .authform { padding: 26px 20px; }
    .cshell { padding: 12px 12px 32px; }
    .kpi-val { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .side, .top, .ctop, .iconbtn, .actions { display: none !important; } body { background: #fff; } .shell { display: block; padding: 0; } }

/* ---- phase 1: plans, invoice, farms, tickets ---- */
textarea { min-height: 110px; resize: vertical; line-height: 1.8; }
.sub-state { margin-bottom: 16px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.planbox h2 { font-size: 20px; }
.planbox .hint { margin: 2px 0 12px; }
.planrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.planrow div { display: grid; line-height: 1.5; }
.planrow small { color: var(--mute); font-size: 13px; }
.planrow .btn { min-height: 38px; padding: 0 18px; }
.invoice .inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; padding: 14px; background: var(--soft); border-radius: var(--r-s); }
.inv-meta div { display: grid; line-height: 1.5; } .inv-meta span { color: var(--mute); font-size: 12.5px; }
.invoice tfoot td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--mute); }
.invoice tfoot .grand td { color: var(--ink); font-weight: 700; font-size: 16px; border-top: 2px solid var(--ink); }
.invoice td.num, .invoice th:last-child { text-align: left; }
.inv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.farm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.farm { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--soft); border-radius: var(--r-s); }
.farm div { display: grid; flex: 1; line-height: 1.5; } .farm small { color: var(--mute); font-size: 12.5px; }
.farm-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--k4); color: var(--pri); }
.empty-inner { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 30px 12px; color: var(--mute); }
.empty-inner h2 { color: var(--ink); }
.thread { display: grid; gap: 12px; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 16px; background: var(--soft); }
.msg.mine { margin-inline-start: auto; background: var(--pri-soft); }
.msg-h { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 13px; }
.msg-h small { color: var(--mute); }
.msg-b { font-size: 14.5px; }
.plans-admin input:not([type=checkbox]) { min-height: 38px; padding: 4px 10px; }
.plans-admin input[name=price] { min-width: 130px; }
@media print { .pagehead .actions, .inv-actions, .ctop, .top { display: none !important; } .card { box-shadow: none; } }
.kpi-val.sm { font-size: 20px; line-height: 1.5; margin: 14px 0 4px; }

/* ======================================================================
   Customer panel = farm theme: warm cream, orange accent, big friendly targets, illustrations.
   (samin keeps the cool admin look.)
   ====================================================================== */
body.customer {
    --bg: #fff7e8; --card: #ffffff; --soft: #fff1da; --ink: #3a2a1b; --mute: #856f5a; --line: #f1e1c8;
    --pri: #d9480f; --pri-2: #b83a08; --pri-soft: #ffe6d3; --on-pri: #ffffff;
    --k1: #fff0b3; --k2: #ffe1cf; --k3: #dff3d0; --k4: #dcecf8;
    --shadow: 0 1px 2px rgba(120, 70, 20, .06), 0 8px 24px rgba(120, 70, 20, .08);
    --r: 22px; --r-s: 16px;
    font-size: 16px;
    background: var(--bg) url('../img/pattern.svg') repeat;
}
html[data-theme="dark"] body.customer {
    --bg: #1c150f; --card: #2a2018; --soft: #352a20; --ink: #f7ebdb; --mute: #bfa78d; --line: #433327;
    --pri: #ff8a3d; --pri-2: #ff9d5c; --pri-soft: #3f2a1a; --on-pri: #2a1200;
    --k1: #3a3115; --k2: #3d2619; --k3: #1f3320; --k4: #1b2c3a;
    background-image: none;
}
body.customer h1 { font-size: 28px; }
body.customer h2 { font-size: 18px; }
body.customer .btn { min-height: 50px; padding: 0 26px; font-size: 16px; box-shadow: 0 3px 0 var(--pri-2); }
body.customer .btn.ghost, body.customer .btn.light { box-shadow: none; }
body.customer .btn:active { box-shadow: none; transform: translateY(3px); }
body.customer input, body.customer select, body.customer textarea { min-height: 50px; font-size: 16px; background: #fffdf8; }
html[data-theme="dark"] body.customer input, html[data-theme="dark"] body.customer select, html[data-theme="dark"] body.customer textarea { background: var(--soft); }
body.customer .card { border: 1px solid var(--line); }
body.customer .brand .mark { width: 46px; height: 46px; border-radius: 50%; background: #ffe08a; padding: 4px; overflow: hidden; }
body.customer .brand .mark img { width: 100%; height: 100%; display: block; }
body.customer .ctop { border: 1px solid var(--line); }
body.customer .pill { font-size: 15.5px; padding: 11px 20px; }
body.customer .pill.on { background: var(--pri); color: var(--on-pri); }
html[data-theme="light"] body.customer .pill.on { background: var(--pri); }
body.customer .pill .ic { display: none; }
body.customer .kpi { border: 0; box-shadow: var(--shadow); }
body.customer .kpi-val { font-size: 34px; }
body.customer .plan-card { background: linear-gradient(155deg, #f59f00 0%, #d9480f 100%); border: 0; }
body.customer .authside { background: linear-gradient(170deg, #ffd98a 0%, #ffb55c 55%, #ff9442 100%); color: #3a2a1b; padding: 34px 30px 0; justify-content: flex-start; gap: 14px; overflow: hidden; }
body.customer .authside h2 { font-size: 24px; color: #4a2a0c; }
body.customer .promo .ic { background: rgba(255, 255, 255, .6); color: #b83a08; }
body.customer .promo-art { margin: auto -30px 0; width: calc(100% + 60px); max-width: none; display: block; }
body.customer .authcard { border: 1px solid var(--line); }

/* hero banner of the customer dashboard */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 12px; margin-bottom: 20px; overflow: hidden; border-radius: 28px;
    background: linear-gradient(135deg, #ffe08a 0%, #ffc069 100%); box-shadow: var(--shadow); min-height: 230px; }
html[data-theme="dark"] .hero { background: linear-gradient(135deg, #4a3415 0%, #5c3414 100%); }
.hero-text { padding: 28px 30px; align-self: center; position: relative; z-index: 1; }
.hero-text h1 { color: #4a2a0c; font-size: 30px; }
html[data-theme="dark"] .hero-text h1 { color: #ffe9c9; }
.hero-text p { color: #6b4520; margin: 6px 0 16px; font-size: 16px; }
html[data-theme="dark"] .hero-text p { color: #e6caa6; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; min-height: 230px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tile { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); transition: transform .12s; }
.tile:hover { transform: translateY(-3px); text-decoration: none; }
.tile .t-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; flex: none; }
.tile.t1 .t-ic { background: var(--k1); color: #b36b00; } .tile.t2 .t-ic { background: var(--k2); color: #c2410c; }
.tile.t3 .t-ic { background: var(--k3); color: #2b8a3e; } .tile.t4 .t-ic { background: var(--k4); color: #1971c2; }
.tile b { display: block; font-size: 17px; line-height: 1.4; } .tile small { color: var(--mute); font-size: 13px; }
.tile.off { opacity: .55; pointer-events: none; }

/* farm workspace */
.farmbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.farmbar .fb-art { width: 62px; height: 54px; flex: none; }
.farmbar h1 { font-size: 22px; } .farmbar small { color: var(--mute); }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.subnav a { padding: 9px 16px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 14.5px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.subnav a:hover { text-decoration: none; background: var(--pri-soft); }
.subnav a.on { background: var(--pri); color: var(--on-pri); }
.subnav a.soon { opacity: .5; pointer-events: none; }
.bigact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.bigact a { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: var(--r); color: #fff; font-weight: 700; font-size: 18px; box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.bigact a:hover { text-decoration: none; filter: brightness(1.05); }
.bigact .a1 { background: linear-gradient(135deg, #e8590c, #c2410c); } .bigact .a2 { background: linear-gradient(135deg, #2f9e44, #237a35); }
.bigact .a3 { background: linear-gradient(135deg, #1c7ed6, #1864ab); } .bigact .a4 { background: linear-gradient(135deg, #f08c00, #d9730d); }
.bigact small { display: block; font-weight: 400; font-size: 13px; opacity: .9; }
.progress { height: 14px; border-radius: 999px; background: var(--soft); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffc53d, #2f9e44); }
.progress.warn > i { background: linear-gradient(90deg, #ffc53d, #e8590c); }
.stat3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.stat3 div { background: var(--soft); border-radius: var(--r-s); padding: 12px 14px; } .stat3 span { display: block; color: var(--mute); font-size: 13px; } .stat3 b { font-size: 21px; }
.datefield { display: grid; grid-template-columns: 78px 1fr 100px; gap: 8px; }
.chart { width: 100%; min-height: 240px; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--mute); margin-top: 6px; } .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-inline-end: 6px; vertical-align: -1px; }
.salon-card { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-s); background: var(--soft); }
.salon-card h3 { margin: 0; font-size: 16px; }
.salon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { padding: 8px 16px; border-radius: 999px; background: var(--soft); color: var(--ink); font-weight: 600; font-size: 14px; border: 2px solid transparent; }
.chip:hover { text-decoration: none; background: var(--pri-soft); } .chip.on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri); }
.empty-art { width: 150px; height: auto; margin-bottom: 4px; }
.card.empty img.empty-art, .empty-inner img.empty-art { display: block; }

/* mobile tab bar (farmers mostly use a phone) */
.tabbar { display: none; }
@media (max-width: 860px) {
    .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(120, 70, 20, .1); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
    .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; color: var(--mute); font-size: 11.5px; font-weight: 600; }
    .tabbar a:hover { text-decoration: none; }
    .tabbar a.on { color: var(--pri); background: var(--pri-soft); }
    body.customer .pills { display: none; }
    body.customer .cshell { padding-bottom: 96px; }
    .hero { grid-template-columns: 1fr; } .hero-art { height: 150px; min-height: 150px; order: -1; }
    .hero-text { padding: 18px 20px 24px; } .hero-text h1 { font-size: 24px; }
    .subnav { margin-inline-start: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .subnav a { white-space: nowrap; }
    .datefield { grid-template-columns: 70px 1fr 90px; }
}

.bignum { font-size: 26px !important; font-weight: 700; text-align: center; min-height: 58px !important; }
.steps { display: grid; gap: 12px; }
.step { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r); background: var(--soft); border: 2px solid transparent; color: var(--ink); }
.step:hover { text-decoration: none; background: var(--pri-soft); }
.step.now { border-color: var(--pri); background: var(--pri-soft); }
.step.done { opacity: .75; }
.step-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--card); color: var(--pri); font-weight: 800; font-size: 20px; flex: none; }
.step.done .step-n { background: #2f9e44; color: #fff; }
.step b { display: block; font-size: 17px; } .step small { color: var(--mute); }

a.farm { color: var(--ink); } a.farm:hover { text-decoration: none; background: var(--pri-soft); }
.farm-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.farm { flex-wrap: wrap; } .farm div { min-width: 0; flex: 1 1 120px; } .farm div b { font-size: 16px; }
body.customer img { max-width: 100%; }