/* =========================================================
   Farmer ID Card Generator
   ========================================================= */

:root {
    --ink: #10261c;
    --ink-soft: #52685c;
    --muted: #7b9186;
    --line: #e1ebe4;
    --bg: #f2f7f3;
    --green-900: #063e29;
    --green-800: #084a2d;
    --green-700: #0b6b45;
    --green-600: #12855a;
    --green-500: #1a9c69;
    --green-050: #eaf7ef;
    --gold: #d5a54a;
    --gold-soft: #e7c07a;
    --danger: #b3352c;
    --radius: 20px;
    --shadow-panel: 0 24px 48px -38px rgba(6, 52, 31, .55), 0 1px 2px rgba(6, 52, 31, .05);
    --font-ui: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-card: Verdana, Tahoma, 'DejaVu Sans', 'Segoe UI', sans-serif;
    --font-hi: 'Noto Sans Devanagari', 'Nirmala UI', ui-sans-serif, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--ink);
    background: radial-gradient(900px 460px at 8% -8%, #e6f2e9 0%, rgba(230, 242, 233, 0) 60%), radial-gradient(760px 420px at 96% 2%, #edf4e7 0%, rgba(237, 244, 231, 0) 62%), var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

img {
    display: block;
    max-width: 100%;
}

svg {
    display: block;
}

[hidden] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

h1,
h2,
h3,
p {
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.wrap {
    width: min(1230px, calc(100% - 40px));
    margin-inline: auto;
}

/* =========================== HEADER =========================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e3ede6;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 66px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.brand-logo img {
    width: auto;
    height: 40px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-text strong {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.brand-text small {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6d8478;
    margin-top: 2px;
}

.site-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.site-nav a {
    font-size: 13px;
    font-weight: 500;
    color: #415a4c;
    padding: 7px 12px;
    border-radius: 999px;
    transition: background .18s, color .18s;
}

.site-nav a:hover {
    background: #eef6f0;
    color: var(--green-700);
}

.header-pill {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #0b6b45;
    background: #e9f6ee;
    border: 1px solid #c8e7d4;
    border-radius: 999px;
    padding: 6px 11px;
    white-space: nowrap;
}

/* =========================== HERO =========================== */

.hero {
    padding: 46px 0 24px;
}

.hero-inner {
    text-align: center;
}

.hero h1 {
    font-size: clamp(1.95rem, 4.2vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.14;
    background: linear-gradient(120deg, #0d2a1e 20%, #0b6b45 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    max-width: 660px;
    margin: 14px auto 0;
    font-size: clamp(.94rem, 1.5vw, 1.04rem);
    color: var(--ink-soft);
    line-height: 1.7;
}

.hero-owner {
    color: #0b6b45;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.hero-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 760px;
    margin: 18px auto 0;
    padding: 9px 15px;
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
    color: #7a5a14;
    background: #fffaf0;
    border: 1px solid #f0e0ba;
    border-radius: 12px;
}

.hero-note svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
    fill: #b98a26;
}

/* =========================== TOOL SHELL =========================== */

.tool {
    padding: 21px 0 58px;
}

.tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.panel {
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    padding: 25px 26px 22px;
}

/* accent strip across the top of the Farmer Details panel */

.panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, var(--green-700), var(--green-500) 45%, var(--gold));
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf3ee;
}

.panel-head>div:first-child {
    position: relative;
    padding-left: 44px;
}

.panel-head h2 {
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

/* leading badge icon on the panel title */

.panel-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid #d3ecdc;
    background: #eaf7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230b6b45'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm2 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-1 6h6v1.5H5V14Zm8-5h4v1.5h-4V11Zm0 3h4v1.5h-4V14Z'/%3E%3C/svg%3E") center / 19px no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.panel-head p {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
}

.autosave-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 11px;
    font-weight: 500;
    color: #5c7a68;
    background: #f2f8f4;
    border: 1px solid #dfebe3;
    border-radius: 999px;
    padding: 5px 10px;
    transition: color .2s, background .2s;
}

.autosave-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f9e68;
}

.autosave-dot.is-saving {
    background: #fff8e8;
    color: #8a6a1c;
}

.autosave-dot.is-saving::before {
    background: #d3a24a;
}

.sub-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green-700);
}

.sub-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3fbf6, #e8f5ec);
    border: 1px solid #d5eadd;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.sub-head span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-600);
    box-shadow: 0 0 0 3px rgba(18, 133, 90, .15);
}

.sub-head::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #dceee3, rgba(220, 238, 227, 0));
}

/* =========================== FIELDS =========================== */

.field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field.span-2 {
    grid-column: span 2;
}

.label {
    font-size: 12px;
    font-weight: 600;
    color: #3d5749;
    letter-spacing: .01em;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="date"],
.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    background-color: #f8fbf9;
    border: 1px solid #dbe6de;
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 42px;
    transition: border-color .16s, box-shadow .16s, background .16s;
}

.field input[type="text"]:hover,
.field input[type="tel"]:hover,
.field input[type="date"]:hover,
.field textarea:hover {
    border-color: #c5dccd;
}

.field textarea {
    min-height: 72px;
    resize: vertical;
    line-height: 1.55;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #a3b5aa;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--green-600);
    box-shadow: 0 0 0 4px rgba(18, 133, 90, .13);
}

.hint {
    font-size: 11px;
    color: var(--muted);
}

/* grouped fieldset panels */

.form-group {
    margin-top: 18px;
    padding: 18px 18px 20px;
    border: 1px solid #e4eee7;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbf9 0%, #f2f8f4 100%);
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(6, 52, 31, .03);
}

.form-group .sub-head {
    margin: 0 0 14px;
}

.form-group .field-grid {
    gap: 14px 16px;
}

.form-group .section-head {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.form-group--land {
    background: linear-gradient(180deg, #fbfdfc 0%, #f6faf7 100%);
}

/* leading icons inside the inputs */

.field[class*="ic-"] input[type="text"],
.field[class*="ic-"] input[type="tel"],
.field[class*="ic-"] input[type="date"],
.field[class*="ic-"] textarea {
    padding-left: 36px;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
}

.field.ic-pin textarea {
    background-position: 12px 12px;
}

.ic-user input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f948a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5.2 20c.6-3.4 3.5-5.2 6.8-5.2s6.2 1.8 6.8 5.2'/%3E%3C/svg%3E");
}

.ic-calendar input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f948a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v3.2M16 3v3.2'/%3E%3C/svg%3E");
}

.ic-phone input[type="tel"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f948a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3.2l1.6 3.9-2 1.5a11.5 11.5 0 0 0 4.8 4.8l1.5-2 3.9 1.6v3.2a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5Z'/%3E%3C/svg%3E");
}

.ic-card input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f948a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.4'/%3E%3Cpath d='M3 10h18M7 14.5h5.5'/%3E%3C/svg%3E");
}

.ic-pin textarea {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f948a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6.2 6.2 0 0 0-6.2 6.2C5.8 14 12 21 12 21s6.2-7 6.2-11.8A6.2 6.2 0 0 0 12 3Z'/%3E%3Ccircle cx='12' cy='9.2' r='2.3'/%3E%3C/svg%3E");
}

.field[class*="ic-"]:focus-within input,
.field[class*="ic-"]:focus-within textarea {
    background-position: 12px center;
}

.field.ic-pin:focus-within textarea {
    background-position: 12px 12px;
}

/* colour the icon when the field is focused */

.ic-user:focus-within input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312855a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5.2 20c.6-3.4 3.5-5.2 6.8-5.2s6.2 1.8 6.8 5.2'/%3E%3C/svg%3E");
}

.ic-calendar:focus-within input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312855a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v3.2M16 3v3.2'/%3E%3C/svg%3E");
}

.ic-phone:focus-within input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312855a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3.2l1.6 3.9-2 1.5a11.5 11.5 0 0 0 4.8 4.8l1.5-2 3.9 1.6v3.2a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5Z'/%3E%3C/svg%3E");
}

.ic-card:focus-within input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312855a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.4'/%3E%3Cpath d='M3 10h18M7 14.5h5.5'/%3E%3C/svg%3E");
}

.ic-pin:focus-within textarea {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312855a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6.2 6.2 0 0 0-6.2 6.2C5.8 14 12 21 12 21s6.2-7 6.2-11.8A6.2 6.2 0 0 0 12 3Z'/%3E%3Ccircle cx='12' cy='9.2' r='2.3'/%3E%3C/svg%3E");
}

/* gender chips */

.chips {
    display: flex;
    gap: 8px;
}

.chip {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    font-size: 13px;
    font-weight: 500;
    color: #3d5749;
    background: #f8fbf9;
    border: 1px solid #dbe6de;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: border-color .16s, background .16s, color .16s, box-shadow .16s, transform .16s;
}

.chip:hover {
    border-color: #b9d7c4;
    background: #f1f9f4;
}

.chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.chip:has(input:checked) {
    color: #08543a;
    font-weight: 600;
    background: linear-gradient(180deg, #eaf7ef, #dcefe3);
    border-color: #9fceb2;
    box-shadow: inset 0 0 0 1.5px #12855a;
    transform: translateY(-1px);
}

.chip:has(input:focus-visible) {
    box-shadow: inset 0 0 0 1px #12855a, 0 0 0 3px rgba(18, 133, 90, .16);
}

/* photo picker */

.photo-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #f9fcfa;
    border: 1.5px dashed #c9dcd1;
    border-radius: 14px;
    transition: border-color .18s, background .18s, box-shadow .18s;
}

.photo-drop:hover {
    border-color: #a9d3b8;
    background: #f3faf5;
    box-shadow: inset 0 0 0 1px rgba(18, 133, 90, .08);
}

.photo-drop.is-dragging {
    border-color: var(--green-600);
    background: #eef8f2;
}

.photo-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 11px;
    overflow: hidden;
    background: #eaf3ec;
    border: 1px solid #d8e7dd;
}

.photo-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.photo-meta strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34ch;
}

.photo-meta span {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
}

.photo-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================== LAND FORM =========================== */

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #edf3ee;
}

.section-head h2 {
    font-size: 1.02rem;
    font-weight: 600;
}

.section-head p {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}

.land-form-wrap {
    margin-top: 13px;
    max-width: 100%;
    border: 1px solid #e2ebe4;
    border-radius: 12px;
    overflow-x: auto;
    background: #fff;
    scrollbar-width: thin;
}

.land-form {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.land-form th {
    padding: 9px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: left;
    color: #5c7468;
    background: #f4f9f5;
    border-bottom: 1px solid #e2ebe4;
    white-space: nowrap;
}

.land-form td {
    padding: 0;
    border-bottom: 1px solid #edf3ee;
    border-right: 1px dashed #eef4ef;
}

.land-form tr:last-child td {
    border-bottom: 0;
}

.land-form th:last-child,
.land-form td:last-child {
    border-right: 0;
}

.land-form th:nth-child(1) {
    width: 100px;
}

.land-form th:nth-child(2) {
    width: 96px;
}

.land-form th:nth-child(3) {
    width: 104px;
}

.land-form th:nth-child(4) {
    width: 92px;
}

.land-form th:nth-child(5) {
    width: 72px;
}

.land-form th:nth-child(6) {
    width: 128px;
}

.land-form th:nth-child(7) {
    width: 158px;
}

.land-form th:nth-child(8) {
    width: 132px;
}

.land-form th:nth-child(9) {
    width: 42px;
}

.land-form td input {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.land-form td input::placeholder {
    color: #b3c3b9;
}

.land-form td input:focus {
    outline: none;
    background: #f2fbf6;
    box-shadow: inset 0 0 0 1.5px var(--green-600);
}

.land-form .row-actions {
    text-align: center;
}

.table-hint {
    display: none;
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
}

@media (max-width: 1000px) {
    .table-hint {
        display: block;
    }
}

.row-remove {
    width: 26px;
    height: 26px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
    color: #b3352c;
    background: #fdf4f3;
    border: 1px solid #f0d8d5;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.row-remove:hover {
    background: #f9e6e4;
    color: #8f271f;
}

.row-remove:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* =========================== BUTTONS =========================== */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 17px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 11px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .16s, box-shadow .16s, background .16s, border-color .16s, color .16s;
}

.btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: .92;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #159467, #0a6b46);
    box-shadow: 0 12px 22px -14px rgba(10, 107, 70, .95), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.btn-dark {
    color: #fff;
    background: var(--green-900);
    box-shadow: 0 12px 22px -16px rgba(6, 62, 41, .95);
}

.btn-dark:hover {
    background: #082f20;
    transform: translateY(-1px);
}

.btn-ghost {
    color: #294436;
    background: #fff;
    border-color: #dde8e0;
}

.btn-ghost:hover {
    background: #f4f9f5;
    border-color: #c9dbd1;
}

.btn-outline {
    color: #0b6b45;
    background: #f2faf5;
    border-color: #bfe0cd;
}

.btn-outline:hover {
    background: #e8f6ee;
}

.btn-sm {
    height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 9px;
}

.btn-sm svg {
    width: 14px;
    height: 14px;
}

/* =========================== PREVIEW =========================== */

.preview-panel {
    position: relative;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
}

.preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.preview-head h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.preview-head p {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    color: #0b6b45;
    background: #eaf7ef;
    border: 1px solid #c6e6d2;
    border-radius: 999px;
    padding: 5px 10px;
}

.live-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #21a065;
    box-shadow: 0 0 0 0 rgba(33, 160, 101, .5);
    animation: livePulse 2.4s infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 160, 101, .45);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(33, 160, 101, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(33, 160, 101, 0);
    }
}

.card-stage {
    display: grid;
    gap: 18px;
}

/* =================================================================
   THE CARDS
   Every size inside a card is expressed in cqw (1% of card width),
   so the identical artwork scales from a phone preview to A4 print.
   ================================================================= */

.card {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    border: 2px solid #2e6b44;
    border-radius: 4px;
    box-shadow: 0 22px 44px -30px rgba(6, 52, 31, .55), 0 2px 5px rgba(6, 52, 31, .07);
}

/* ---- card header: flat AgriStack band ---- */

.card-head {
    position: relative;
    z-index: 2;
    flex: none;
    height: 10cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqw;
    padding: 0 3.2cqw 0 4.2cqw;
    background: #2e6b44;
}

.card-logo {
    flex: none;
    width: auto;
    height: 7.6cqw;
}

.card-farmer {
    flex: none;
    align-self: flex-end;
    width: auto;
    height: 9.4cqw;
}

/* ---- card front body ---- */

.card-body {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4.3cqw 5.5cqw 2.2cqw;
    background: #fff;
}

/* Watermark: traditional bullock ploughing, centred behind the front details.
   The asset is transparent ink, so only the line work shows on the white card. */

.card-body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../img/bg-plough.webp') center center / auto 74% no-repeat;
    opacity: .16;
    pointer-events: none;
}

.card-ident,
.card-content {
    position: relative;
    z-index: 1;
}

.card-ident {
    flex: none;
    margin-bottom: 3.4cqw;
    font-family: var(--font-card);
    font-size: 2.9cqw;
    font-weight: 700;
    letter-spacing: .005em;
    color: #2f2f2f;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-ident b {
    color: #000000;
    font-weight: 700;
}

.card-content {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 21cqw minmax(0, 1fr);
    gap: 9.5cqw;
    align-items: start;
}

.photo-col {
    min-width: 0;
}

.photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 25.5;
    overflow: hidden;
    border-radius: 1px;
    background: #ededed;
    border: 1px solid #dedede;
}

.photo-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: .8cqw;
    padding: 0 1.1cqw;
    font-family: var(--font-card);
    font-size: 1.5cqw;
    font-weight: 700;
    color: #8b8b8b;
    white-space: nowrap;
}

.photo-empty svg {
    flex: none;
    width: 1.9cqw;
    height: 1.9cqw;
    fill: #a7a7a7;
}

.details {
    min-width: 0;
    padding-top: .25cqw;
}

.row {
    display: flex;
    align-items: baseline;
    gap: 1.5cqw;
    min-width: 0;
    font-family: var(--font-card);
    font-size: 2.7cqw;
    font-weight: 700;
    line-height: 1.6;
    color: #2f2f2f;
}

.row .k {
    flex: none;
    white-space: nowrap;
}

.row .k.hi-k {
    font-family: var(--font-hi);
    font-weight: 600;
}

.row .v {
    min-width: 0;
    font-weight: 700;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row .v.hi {
    font-family: var(--font-hi);
    font-weight: 600;
    font-size: 2.55cqw;
}

/* ---- front card QR badge (bottom-right) ---- */

.card-qr {
    position: absolute;
    z-index: 3;
    right: 5.5cqw;
    bottom: 2.6cqw;
    width: 15cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6cqw;
    padding: 1cqw;
    background: #fff;
    border: .4cqw solid #2e6b44;
    border-radius: 1.1cqw;
    box-shadow: 0 .8cqw 1.8cqw -1cqw rgba(6, 52, 31, .55);
}

.card-qr-box {
    width: 100%;
    line-height: 0;
}

.card-qr-box img,
.card-qr-box canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.card-qr-cap {
    font-family: var(--font-card);
    font-size: 1.4cqw;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #2e6b44;
    white-space: nowrap;
}

/* ---- card footer ---- */

.card-foot {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqw;
    height: 8cqw;
    padding: 0 4.6cqw;
    color: #fff;
    background: #5cae76;
}

.gen-note {
    font-family: var(--font-card);
    font-style: italic;
    font-size: 2.02cqw;
    font-weight: 700;
    letter-spacing: -.005em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foot-id {
    flex: none;
    font-family: var(--font-card);
    font-size: 1.98cqw;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* back-card footer: a stacked band holding the disclaimer strip + the note */

.card-foot-back {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 1.1cqw;
    padding: 1.5cqw 3.4cqw 1.7cqw;
}

.card-foot-back .card-disclaimer {
    width: 100%;
}

/* ---- card back: green header carrying the enrollment number ---- */

.card-head-enroll {
    height: auto;
    min-height: 10cqw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25cqw;
    padding: 1.5cqw 3.4cqw;
    text-align: center;
}

.enroll-title {
    font-family: var(--font-card);
    font-size: 3.1cqw;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .01em;
    color: #fff;
}

.enroll-no {
    display: block;
    max-width: 100%;
    font-family: var(--font-card);
    font-size: 3.7cqw;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .015em;
    color: #fff;
    /* long numbers wrap rather than being cut off */
    overflow-wrap: anywhere;
}

.enroll-no.is-long {
    font-size: 3cqw;
}

.enroll-no.is-xlong {
    font-size: 2.5cqw;
}

/* ---- card back ---- */

.back-body {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4cqw;
    padding: 2.7cqw 4.4cqw 1.4cqw;
    background: #fff;
    overflow: hidden;
}

/* The Farmer ID strip was dropped from the back card: the number already
   prints on the front, and the space now belongs to the land table. */

.addr {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 1.2cqw;
    min-width: 0;
}

.addr span {
    flex: none;
    font-family: var(--font-card);
    font-size: 1.75cqw;
    font-weight: 700;
    color: #2f2f2f;
}

.addr p {
    flex: 1;
    min-width: 0;
    font-family: var(--font-card);
    /* --addr-fs is set by app.js so the address always stays on one line */
    font-size: var(--addr-fs, 1.85cqw);
    line-height: 1.3;
    font-weight: 700;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    /* only an extreme address ever loses its tail; normal ones shrink to fit */
    text-overflow: ellipsis;
}

.land-block {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.land-title {
    flex: none;
    font-family: var(--font-card);
    font-size: 1.85cqw;
    font-weight: 700;
    color: #2f2f2f;
    margin-bottom: .9cqw;
}

.land-card {
    /* --land-fs is set by app.js to the largest size that still fits */
    --land-fs: 1.55cqw;
    width: 100%;
    border-collapse: collapse;
    /* auto layout: every column sizes itself to the longest value it holds */
    table-layout: auto;
    font-family: var(--font-card);
    font-size: var(--land-fs);
    line-height: 1.25;
}

.land-card th {
    padding: calc(var(--land-fs) * .58) calc(var(--land-fs) * .39);
    font-size: calc(var(--land-fs) * .84);
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
    color: #fff;
    background: #2e6b44;
    border-right: 1px solid rgba(255, 255, 255, .22);
    /* one line per plot: app.js shrinks --land-fs until nothing has to wrap */
    white-space: nowrap;
}

.land-card th:last-child {
    border-right: 0;
}

.land-card td {
    padding: calc(var(--land-fs) * .62) calc(var(--land-fs) * .39);
    color: #111111;
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    border-right: 1px solid #ececec;
    vertical-align: middle;
    white-space: nowrap;
}

/* Fallback app.js applies when even the smallest size cannot keep every plot
   on one line: wrapping beats clipping the value at the card edge. */

.land-card.is-wrapped th,
.land-card.is-wrapped td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.land-card tbody tr:nth-child(even) td {
    background: #fafafa;
}

.land-card td:last-child {
    border-right: 0;
}

.land-card .empty-cell {
    text-align: center;
    color: #8a8a8a;
    font-style: italic;
    padding: calc(var(--land-fs) * 1.4) calc(var(--land-fs) * .31);
    white-space: normal;
}

.land-card .more-cell {
    text-align: right;
    font-weight: 700;
    color: #2e6b44;
    background: #eef6f0;
}

.land-card tfoot td {
    padding: calc(var(--land-fs) * .62) calc(var(--land-fs) * .39);
    font-size: calc(var(--land-fs) * .875);
    font-weight: 700;
    color: #2e6b44;
    background: #eaf3ec;
    border-top: 1px solid #cfe0d5;
    border-bottom: 0;
}

.land-card tfoot .total-label {
    text-align: right;
    letter-spacing: .04em;
}

.land-card tfoot .total-label b {
    color: #1f5236;
}

.land-card tfoot .total-area {
    text-align: left;
    border-left: 1px solid #d7e4da;
}

/* Column widths are left to the content (table-layout: auto) so nothing on
   the card is shortened; only the totals footer keeps its own rhythm. */

/* Disclaimer sits directly on the green footer band: no plate, larger type,
   wraps onto more than one line so it stays comfortably readable. */

.card-disclaimer {
    flex: none;
    font-family: var(--font-card);
    font-size: 1.5cqw;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .004em;
    text-align: center;
    color: #fff;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.print-tip {
    margin-top: 15px;
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.55;
    color: #647c6f;
    background: #f7fbf8;
    border: 1px dashed #d5e6db;
    border-radius: 10px;
}

.print-tip strong {
    color: #3d5749;
}

/* =========================== INFO SECTIONS =========================== */

.info-section {
    padding: 10px 0 34px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 20px;
}

.info-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 36px -34px rgba(6, 52, 31, .55);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--green-600);
}

.info-card h2 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

.info-card p {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--ink-soft);
}

.info-lead {
    color: #eaf6ee;
    background: radial-gradient(120% 130% at 100% 0%, rgba(26, 156, 105, .55) 0%, rgba(26, 156, 105, 0) 55%), linear-gradient(150deg, #0a5f3e 0%, #063e29 62%, #042a1b 100%);
    border-color: #0b5136;
}

.info-lead::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 240px;
    height: 240px;
    background: url("../img/favicon.svg") center / contain no-repeat;
    opacity: .08;
    pointer-events: none;
}

.info-lead .eyebrow {
    color: var(--gold-soft);
}

.info-lead h2 {
    color: #fff;
}

.info-lead p {
    color: #c3ddcd;
}

.info-lead p:last-child {
    margin-bottom: 0;
}

.feature-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.tick {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 700;
    color: #0b6b45;
    background: #eaf7ef;
    border: 1px solid #c6e6d2;
    border-radius: 50%;
}

.feature-list strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #1c3a2b;
}

.feature-list p {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #70887c;
}

/* disclaimer + footer */

.disclaimer-bar {
    padding: 16px 0;
    font-size: 12px;
    line-height: 1.6;
    color: #6f5a20;
    background: #fffaf0;
    border-block: 1px solid #f0e2c0;
}

.disclaimer-bar strong {
    color: #5c4a17;
}

.site-footer {
    padding: 30px 0;
    color: #cfe6d8;
    background: #063e29;
    font-size: 12.5px;
}

.footer-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.brand-footer .brand-text strong {
    color: #fff;
}

.brand-footer .brand-text small {
    color: #9fc3ae;
}

.footer-logo {
    flex: none;
    width: auto;
    height: 30px;
}

.footer-inner p {
    color: #a9c9b6;
    max-width: 540px;
}

.footer-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-note p {
    margin: 0;
}

.footer-note .footer-provider {
    color: #e7c07a;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.footer-note .footer-provider strong {
    color: #fff;
    font-weight: 700;
}

.site-footer nav {
    display: flex;
    gap: 16px;
}

.site-footer nav a {
    color: #cfe6d8;
}

.site-footer nav a:hover {
    color: #fff;
    text-decoration: underline;
}

/* toast */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 200;
    max-width: calc(100% - 32px);
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: #073f28;
    border: 1px solid rgba(231, 192, 122, .35);
    border-radius: 999px;
    box-shadow: 0 18px 34px -18px rgba(4, 42, 27, .9);
    opacity: 0;
    transform: translate(-50%, 16px);
    pointer-events: none;
    transition: opacity .26s, transform .26s;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* =========================== NOTICE POPUP =========================== */

.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 18px;
}

.notice-modal[hidden] {
    display: none;
}

.notice-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 26, 17, .62);
    backdrop-filter: blur(2px);
}

.notice-card {
    position: relative;
    width: min(520px, 94vw);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    border-top: 6px solid #c0392b;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .32);
    padding: 26px 24px 22px;
    font-family: 'Noto Sans Bengali', 'Poppins', var(--font-card);
    animation: notice-in .22s ease-out;
}

@keyframes notice-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.notice-x {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #9aada2;
    cursor: pointer;
}

.notice-x:hover {
    color: #c0392b;
}

.notice-title {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #c0392b;
}

.notice-body {
    font-size: 16px;
    line-height: 1.75;
    color: #263029;
}

.notice-body p {
    margin: 0 0 12px;
}

.notice-body strong {
    color: #b02a20;
}

.notice-ok {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: #0b6b45;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.notice-ok:hover {
    background: #095c3b;
}

@media (max-width: 480px) {
    .notice-card {
        padding: 22px 16px 18px;
    }
    .notice-title {
        font-size: 19px;
    }
    .notice-body {
        font-size: 15px;
    }
}

/* =========================== RESPONSIVE =========================== */

@media (min-width: 1000px) {
    .card-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 1080px) {
    .tool-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .site-nav {
        display: none;
    }
    .header-pill {
        margin-left: auto;
    }
    .hero {
        padding: 32px 0 18px;
    }
    .tool {
        padding-top: 12px;
    }
    .info-card {
        padding: 24px;
    }
}

@media (max-width: 640px) {
    .wrap {
        width: calc(100% - 28px);
    }
    .panel {
        padding: 18px 16px;
    }
    .preview-panel {
        padding: 16px;
    }
    .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .field.span-2 {
        grid-column: auto;
    }
    .photo-drop {
        flex-wrap: wrap;
    }
    .photo-actions {
        margin-left: 0;
        width: 100%;
    }
    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .actions .btn {
        flex: 1 1 100%;
    }
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .hero-note {
        font-size: 11.5px;
    }
}

/* =========================== PRINT =========================== */

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }
    html,
    body {
        background: #fff !important;
    }
    .site-header,
    .hero,
    .form-panel,
    .info-section,
    .disclaimer-bar,
    .site-footer,
    .print-tip,
    .preview-head,
    .notice-modal,
    .toast {
        display: none !important;
    }
    .tool,
    .preview-panel,
    .tool-grid {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: none !important;
        display: block !important;
        position: static !important;
        width: auto !important;
        overflow: visible !important;
    }
    .tool .wrap {
        width: auto;
        margin: 0;
    }
    .card-stage {
        display: block !important;
        overflow: visible !important;
    }
    .card {
        width: 174mm;
        height: 108.75mm;
        min-width: 0;
        margin: 0 auto;
        border-radius: 4px;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .card-front {
        break-after: page;
        page-break-after: always;
    }
    .card-back {
        break-before: page;
        page-break-before: always;
    }
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}