@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #edf5ef;
    --bg-strong: #dfeee3;
    --card: #ffffff;
    --card-alt: #f8faf8;
    --ink: #143421;
    --ink-soft: #4d6753;
    --line: rgba(20, 52, 33, 0.09);
    --green: #1e5d35;
    --green-2: #2d7b46;
    --green-3: #e3f7ea;
    --amber: #fff0ce;
    --blue: #e6f0ff;
    --red: #ffe8e8;
    --shadow: 0 18px 42px rgba(17, 44, 27, 0.09);
    --brand-font: "Poppins", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { overflow-x: hidden; }
#marketplace, #ecosystem, #about, #supplier-requests { scroll-margin-top: 82px; }
body {
    margin: 0;
    background: linear-gradient(180deg, var(--bg) 0%, #f8faf8 100%);
    color: var(--ink);
    font-family: var(--brand-font);
    line-height: 1.5;
    letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6, .btn, .tag, .eyebrow, .hero-kicker, .stat-value, .landing-topbar nav a {
    font-family: var(--brand-font);
}
h1, h2, h3, h4, h5, h6 { font-weight: 800; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea {
    font: inherit;
}
.topbar {
    background: linear-gradient(135deg, #0d2517 0%, #173f28 100%);
    color: #fff;
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 25px rgba(20, 52, 32, 0.12);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar h1 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: -0.04em;
}
.topbar h1 a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.topbar nav {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.topbar nav a {
    color: #ebf7ee;
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.2s ease;
}
.topbar nav a:hover { opacity: 0.8; }
.portal-topbar .topbar-nav { display: none; }
.portal-topbar { justify-content: space-between; }
.topbar .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.topbar .nav-actions .btn { padding: 9px 14px; }
.portal-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 210px;
    height: 40px;
}
.portal-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.portal-search input {
    width: 100%;
    height: 100%;
    padding: 0 40px 0 14px;
    border: 1px solid rgba(235, 247, 238, 0.2);
    border-radius: 11px;
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.75rem;
}
.portal-search input::placeholder { color: rgba(235, 247, 238, 0.62); }
.portal-search input:focus { border-color: #9bc7a3; background: rgba(255, 255, 255, 0.13); }
.portal-search button {
    position: absolute;
    right: 5px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d9efdd;
    cursor: pointer;
}
.portal-search button:hover { background: rgba(229, 246, 232, 0.14); color: #fff; }
.portal-search button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.search-result-note { margin: 0 0 16px; color: #5d725d; font-size: 0.88rem; }
.listing-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 190px;
    margin-bottom: 24px;
    padding: 32px 36px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0d3321 0%, #1a5c35 40%, #2d8a52 70%, #3ba462 100%);
    color: #fff;
    box-shadow: 0 16px 48px rgba(18, 60, 32, 0.28);
    overflow: hidden;
    position: relative;
}
.listing-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.listing-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 30%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
}
.listing-hero > div {
    position: relative;
    z-index: 1;
}
.listing-hero h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.06em; }
.listing-hero p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; line-height: 1.6; }
.listing-hero .dashboard-kicker { 
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #a9d8b1;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.listing-hero-action { 
    display: grid;
    justify-items: end;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.listing-hero-action span { 
    color: rgba(255, 255, 255, 0.7); 
    font-size: 0.72rem;
    text-align: right;
}
.light-btn { 
    background: #e5f6e8; 
    color: #173f28; 
    box-shadow: 0 8px 24px rgba(7, 35, 18, 0.25);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.82rem;
    transition: all 0.3s ease;
}
.light-btn:hover { 
    background: #fff; 
    color: #173f28;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(7, 35, 18, 0.3);
}
.listing-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.listing-summary article { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid #dfebe1; border-radius: 12px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 8px 20px rgba(17, 55, 29, 0.04); }
.listing-summary article > span:last-child { display: grid; gap: 2px; }
.listing-summary small { color: #789080; font-size: 0.64rem; }
.listing-summary strong { color: #205b36; font-size: 1.22rem; letter-spacing: -0.04em; }
.summary-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #e8f5e9; color: #267044; font-size: 0.51rem; font-weight: 800; }
.summary-icon.open-icon { background: #e3f0ff; color: #356aa0; }
.summary-icon.pending-icon { background: #fff1d4; color: #a47720; }
.summary-icon.verified-icon { background: #def5e5; color: #2b7d49; }
.listing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 13px; }
.toolbar-label { display: block; margin-bottom: 6px; color: #7a907f; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.listing-toolbar .filter-row { margin: 0; }
.listing-toolbar-note { color: #8a9b8e; font-size: 0.68rem; white-space: nowrap; }
.supplier-filter-panel { 
    margin-bottom: 24px; 
    padding: 22px 24px; 
    border: none;
    border-radius: 18px; 
    background: #fff;
    box-shadow: 0 8px 32px rgba(17,55,29,0.1);
}
.supplier-filter-head { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef3ee;
}
.supplier-filter-head h2 { 
    margin: 0; 
    color: #1a5c35; 
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.supplier-filter-head > span { 
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #e8f5ec;
    color: #2d8a52; 
    font-size: 0.72rem;
    font-weight: 700;
}
.supplier-filter-grid { 
    display: grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 14px; 
    margin-bottom: 16px;
}
.supplier-filter-grid label { 
    display: grid; 
    gap: 6px; 
    color: #54705c; 
    font-size: 0.7rem; 
    font-weight: 700;
}
.supplier-filter-grid select { 
    width: 100%; 
    padding: 11px 14px; 
    border: 1px solid #e0ebe1; 
    border-radius: 10px; 
    background: #fafefb; 
    color: #2c5639; 
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.supplier-filter-grid select:focus {
    outline: none;
    border-color: #2d8a52;
    box-shadow: 0 0 0 3px rgba(45, 138, 82, 0.1);
}
.supplier-filter-grid .btn {
    align-self: flex-end;
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    background: linear-gradient(135deg, #2d8a52, #3ba462);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(45, 138, 82, 0.3);
}
.supplier-filter-grid .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(45, 138, 82, 0.4);
}
.conversation-list { display: grid; gap: 4px; }
.conversation-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; color: inherit; text-decoration: none; }
.conversation-item:hover, .conversation-item.active { background: #edf7ee; }
.conversation-item > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.conversation-item strong { color: #285f40; font-size: 0.78rem; }
.conversation-item small, .conversation-item time { color: #789080; font-size: 0.68rem; }
.conversation-item time { margin-left: auto; white-space: nowrap; }
.chat-thread { display: grid; gap: 10px; min-height: 145px; padding: 10px 0; }
.chat-message { max-width: 80%; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 0.78rem; }
.chat-message.incoming { justify-self: start; background: #edf7ee; color: #315b3e; }
.chat-message.outgoing { justify-self: end; background: #dff2e2; color: #245638; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid #dbe9dd; border-radius: 8px; }
.quality-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.quality-preview span { display: grid; min-height: 110px; place-items: center; border: 1px dashed #abd5b4; border-radius: 11px; background: linear-gradient(135deg, #edf8ee, #d9efdd); color: #4b8d5b; font-size: 0.65rem; font-weight: 800; }
.filter-chip b { margin-left: 4px; color: inherit; opacity: 0.62; font-size: 0.62rem; }
.listing-table-wrap { padding: 20px; }
.listing-table-wrap .easybone-table {
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0 7px;
}
.listing-table-wrap .easybone-table thead th {
    padding: 11px 14px;
    border: 0;
    background: #edf6ee;
    color: #5f7967;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}
.listing-table-wrap .easybone-table thead th:first-child {
    border-radius: 10px 0 0 10px;
}
.listing-table-wrap .easybone-table thead th:last-child {
    border-radius: 0 10px 10px 0;
}
.listing-table-wrap .easybone-table tbody tr {
    background: #fff;
    box-shadow: 0 5px 14px rgba(17, 55, 29, 0.045);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.listing-table-wrap .easybone-table tbody tr:hover {
    background: #fbfefb;
    box-shadow: 0 8px 18px rgba(17, 55, 29, 0.09);
    transform: translateY(-2px);
}
.listing-table-wrap .easybone-table tbody td {
    padding: 15px 14px;
    border: 0;
    border-top: 1px solid #e8f0e9;
    border-bottom: 1px solid #e8f0e9;
    color: #365440;
    font-size: 0.82rem;
    white-space: nowrap;
}
.listing-table-wrap .easybone-table tbody td:first-child {
    position: relative;
    border-left: 1px solid #e8f0e9;
    border-radius: 11px 0 0 11px;
    color: #245b38;
    font-weight: 700;
}
.listing-table-wrap .easybone-table tbody td:first-child::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -1px;
    width: 3px;
    border-radius: 4px;
    background: #58aa6c;
}
.listing-table-wrap .easybone-table tbody td:last-child {
    border-right: 1px solid #e8f0e9;
    border-radius: 0 11px 11px 0;
}
.listing-table-wrap .easybone-table .badge {
    padding: 5px 9px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
}
.listing-table-wrap .easybone-table .link {
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #cfe6d3;
    border-radius: 8px;
    background: #f1faf2;
    color: #267044;
    font-size: 0.68rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.listing-table-wrap .easybone-table .link:hover {
    background: #267044;
    color: #fff;
    text-decoration: none;
}
.table-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 15px; }
.table-heading h2 { margin: 3px 0 0; color: #245638; font-size: 1.1rem; letter-spacing: -0.04em; }
.table-count { padding: 6px 9px; border-radius: 7px; background: #edf7ee; color: #3a7650; font-size: 0.67rem; font-weight: 700; }
.notification-button {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(235, 247, 238, 0.24);
    border-radius: 11px;
    color: #e5f6e8;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.notification-button:hover,
.notification-button:focus-visible {
    background: rgba(229, 246, 232, 0.14);
    color: #fff;
    transform: translateY(-1px);
}
.notification-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}
.notification-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border: 1px solid #173f28;
    border-radius: 50%;
    background: #8ed19a;
}
.profile-menu { position: relative; }
.profile-menu-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 164px;
    padding: 4px 6px 4px 5px;
    border: 1px solid rgba(235, 247, 238, 0.2);
    border-radius: 12px;
    background: rgba(229, 246, 232, 0.08);
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.profile-menu-trigger:hover,
.profile-menu-trigger:focus-visible { background: rgba(229, 246, 232, 0.15); }
.profile-avatar {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid #d7eedb;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8f7e9, #9dccaa);
    color: #1b5633;
    font-size: 0.58rem;
    font-weight: 800;
}
.profile-copy { display: grid; gap: 1px; min-width: 0; }
.profile-copy strong { overflow: hidden; color: #fff; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { color: rgba(235, 247, 238, 0.68); font-size: 0.57rem; white-space: nowrap; }
.profile-caret { flex: 0 0 15px; width: 15px; height: 15px; margin-left: auto; fill: none; stroke: #d9efdd; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-menu-trigger[aria-expanded="true"] .profile-caret { transform: rotate(180deg); }
.profile-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 150px;
    padding: 6px;
    border: 1px solid #dceae0;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17, 55, 29, 0.16);
}
.profile-dropdown[hidden] { display: none; }
.profile-dropdown a { padding: 9px 10px; border-radius: 7px; color: #285f40; font-size: 0.76rem; text-decoration: none; }
.profile-dropdown a:hover { background: #edf7ee; }
.portal-shell {
    display: flex;
    min-height: calc(100vh - 78px);
    background: linear-gradient(135deg, #edf5ef 0%, #f8faf8 58%, #e5f2e7 100%);
}
.portal-sidebar {
    position: sticky;
    top: 78px;
    display: flex;
    flex: 0 0 258px;
    flex-direction: column;
    align-self: flex-start;
    width: 258px;
    min-height: calc(100vh - 78px);
    padding: 26px 16px 20px;
    background: linear-gradient(165deg, #102d1b 0%, #173f28 62%, #235837 100%);
    color: #fff;
    box-shadow: 12px 0 28px rgba(20, 52, 33, 0.08);
}
.sidebar-context {
    display: grid;
    gap: 4px;
    padding: 4px 12px 24px;
    border-bottom: 1px solid rgba(231, 247, 234, 0.14);
}
.sidebar-context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sidebar-toggle {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(235, 247, 238, 0.22);
    border-radius: 9px;
    background: transparent;
    color: #d9efdd;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
    background: rgba(229, 246, 232, 0.14);
    color: #fff;
}
.sidebar-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform 0.2s ease;
}
.sidebar-kicker {
    color: #9bc7a3;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sidebar-context strong {
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}
.sidebar-context small {
    color: rgba(235, 247, 238, 0.62);
    font-size: 0.72rem;
}
.sidebar-nav {
    display: grid;
    gap: 5px;
    margin-top: 20px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 43px;
    padding: 9px 11px;
    border-radius: 10px;
    color: rgba(235, 247, 238, 0.76);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sidebar-link:hover {
    background: rgba(229, 246, 232, 0.1);
    color: #fff;
    transform: translateX(2px);
}
.sidebar-link.active {
    background: #e5f6e8;
    color: #173f28;
    box-shadow: 0 8px 18px rgba(5, 28, 14, 0.18);
}
.sidebar-icon {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(235, 247, 238, 0.28);
    border-radius: 6px;
    color: #bfe2c4;
}
.sidebar-icon svg {
    width: 14px !important;
    height: 14px !important;
}
.sidebar-link.active .sidebar-icon {
    border-color: #b8dcbc;
    background: #cdebd1;
    color: #1e5d35;
}
.sidebar-link.active .sidebar-icon svg {
    color: #1e5d35;
}
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 18px 12px 0;
    border-top: 1px solid rgba(231, 247, 234, 0.14);
    color: rgba(235, 247, 238, 0.62);
    font-size: 0.7rem;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7dc88a;
    box-shadow: 0 0 0 4px rgba(125, 200, 138, 0.14);
}
.portal-content {
    flex: 1;
    min-width: 0;
}
.portal-shell.sidebar-collapsed .portal-sidebar {
    flex-basis: 82px;
    width: 82px;
    padding-right: 12px;
    padding-left: 12px;
}
.portal-shell.sidebar-collapsed .sidebar-context {
    justify-items: center;
    padding-right: 0;
    padding-left: 0;
}
.portal-shell.sidebar-collapsed .sidebar-context-head {
    justify-content: center;
}
.portal-shell.sidebar-collapsed .sidebar-kicker,
.portal-shell.sidebar-collapsed .sidebar-context strong,
.portal-shell.sidebar-collapsed .sidebar-context small,
.portal-shell.sidebar-collapsed .sidebar-link span:last-child,
.portal-shell.sidebar-collapsed .sidebar-footer span:last-child {
    display: none;
}
.portal-shell.sidebar-collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}
.portal-shell.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-right: 6px;
    padding-left: 6px;
}
.portal-shell.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
}
.easybone-demo, .module-page, .auth-page {
    padding: 30px;
}
.hero {
    background: linear-gradient(135deg, #163f2b 0%, #2e6f3f 100%);
    color: #fff;
    padding: 48px 36px;
    border-radius: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 55%);
}
.hero > * {
    position: relative;
    z-index: 1;
}
.hero h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin: 0 0 14px;
    line-height: 1.1;
    letter-spacing: -0.05em;
}
.hero p {
    margin: 0;
    max-width: 760px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
}
.tag {
    display: inline-block;
    background: rgba(213, 245, 219, 0.95);
    color: #163f2b;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.metrics-grid, .stats-grid, .demo-grid, .module-grid, .kpi-grid, .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.stat-card, .card, .listing-card, .request-card, .panel, .mini-card, .report-card {
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.stat-card::before, .listing-card::before, .report-card::before, .panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--green), #78bb87);
}
.stat-card { min-height: 150px; }
.stat-label {
    display: block;
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.stat-value {
    display: block;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.05em;
}
.stat-trend {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 9px;
    background: var(--green-3);
    color: var(--green);
    font-size: 0.75rem;
    border-radius: 999px;
    font-weight: 700;
}
.card h3, .panel h3, .listing-card h3, .request-card h3 {
    margin-top: 0;
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}
.card a, .link {
    display: inline-block;
    color: var(--green);
    text-decoration: none;
    margin: 8px 0;
    font-weight: 600;
}
.listing-card {
    padding: 0;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8efe8;
    box-shadow: 0 4px 20px rgba(17, 55, 29, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.listing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(17, 55, 29, 0.14);
}
.listing-card::before {
    height: 4px;
    background: linear-gradient(90deg, #2d8a52, #3bbd6a);
}
.listing-card .card-image {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: #e8efe8;
}
.listing-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.listing-card:hover .card-image img {
    transform: scale(1.05);
}
.listing-card .card-image-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.listing-card .card-image-badge.open { background: #e8f4ff; color: #1a5c9e; }
.listing-card .card-image-badge.pending { background: #fff4e3; color: #a87820; }
.listing-card .card-image-badge.verified { background: #e4f6ea; color: #1b6d42; }
.listing-card .card-image-badge.approved { background: #e8f0fb; color: #2563a8; }
.listing-card .card-body {
    padding: 20px;
}
.listing-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    color: #5b735d;
    font-size: 0.86rem;
}
.listing-card .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.listing-card .badge.open { background: #e8f4ff; color: #1a5c9e; }
.listing-card .badge.pending { background: #fff4e3; color: #a87820; }
.listing-card .badge.verified { background: #e4f6ea; color: #1b6d42; }
.listing-card .badge.approved { background: #e8f0fb; color: #2563a8; }
.listing-card .category-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f0f7f2;
    color: #4a6b52;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: capitalize;
}
.listing-card h3 {
    margin: 12px 0 6px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #1a5c35;
    letter-spacing: -0.02em;
}
.listing-card p {
    margin: 0 0 14px;
    color: #5a7a5e;
    font-size: 0.85rem;
}
.listing-card .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8faf8;
    border-top: 1px solid #eef3ee;
}
.listing-card .price-row strong {
    color: #1a5c35;
    font-size: 1.15rem;
    font-weight: 800;
}
.listing-card .price-row span {
    color: #789080;
    font-size: 0.68rem;
}
.listing-card .updated-time {
    color: #9aaa9c;
    font-size: 0.65rem;
}
.listing-card .card-actions {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #eef3ee;
}
.listing-card .btn.ghost {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #2d8a52;
    background: transparent;
    color: #2d8a52;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
}
.listing-card .btn.ghost:hover {
    background: #2d8a52;
    color: #fff;
}
.listing-card button.link {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #e0ebe1;
    background: #f5f9f6;
    color: #2d8a52;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.listing-card button.link:hover {
    background: #e8f5ec;
    border-color: #2d8a52;
}
.module-page {
    max-width: 1280px;
    margin: 0 auto;
}
.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding: 28px 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1a5c35 0%, #2d8a52 50%, #3ba462 100%);
    color: #fff;
    box-shadow: 0 12px 40px rgba(18, 60, 32, 0.25);
    position: relative;
    overflow: hidden;
}
.dashboard-welcome::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}
.dashboard-welcome::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.dashboard-welcome > div {
    position: relative;
    z-index: 1;
}
.welcome-actions {
    position: relative;
    z-index: 1;
}
.welcome-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    background: #fff;
    color: #1a5c35;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.welcome-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.dashboard-welcome h1 {
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    letter-spacing: -0.04em;
}
.dashboard-welcome p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}
.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.dashboard-metric {
    position: relative;
    min-height: 138px;
    padding: 18px 16px;
    border: none;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(17, 55, 29, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.dashboard-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2d8a52, #3ba462);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.dashboard-metric:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(17, 55, 29, 0.15);
}
.dashboard-metric:hover::before {
    opacity: 1;
}
.dashboard-metric .metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f5ec, #d4eddb);
    color: #2d8a52;
}
.dashboard-metric .metric-icon svg {
    width: 22px;
    height: 22px;
}
.dashboard-metric .stat-label {
    display: block;
    margin-bottom: 6px;
    color: #789080;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.dashboard-metric > strong {
    display: block;
    color: #1a5c35;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.dashboard-metric > small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #e8f5ec;
    color: #2d8a52;
    font-size: 0.65rem;
    font-weight: 700;
}
.dashboard-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 18px;
    margin-top: 20px;
}
.dashboard-panel {
    min-width: 0;
    padding: 22px;
    border: none;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(17, 55, 29, 0.08);
}
.dashboard-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef3ee;
}
.dashboard-panel-heading h2 {
    margin: 0;
    color: #1a5c35;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.dashboard-panel-heading a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #e8f5ec;
    color: #2d8a52;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.dashboard-panel-heading a:hover {
    background: #2d8a52;
    color: #fff;
    transform: translateX(2px);
}
.admin-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 188px;
    margin-bottom: 16px;
    padding: 28px 32px;
    border-radius: 18px;
    background: radial-gradient(circle at 82% 10%, rgba(155, 219, 165, 0.22), transparent 27%), linear-gradient(132deg, #123520 0%, #1f6339 72%, #367e4a 100%);
    color: #fff;
    box-shadow: 0 20px 42px rgba(18, 57, 32, 0.14);
    overflow: hidden;
}
.admin-dashboard-hero .dashboard-kicker { color: #a9d8b1; }
.admin-dashboard-hero h1 { margin: 5px 0 8px; color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -0.06em; }
.admin-dashboard-hero p { max-width: 620px; margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.88rem; }
.admin-dashboard-hero-actions { display: grid; justify-items: end; gap: 14px; }
.admin-dashboard-hero-actions > span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.75); font-size: 0.7rem; }
.admin-dashboard-hero-actions .status-dot { background: #a9e0b1; border-color: #d9f4dd; }
.admin-dashboard-hero-actions .light-btn { white-space: nowrap; }
.admin-dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-dashboard-metrics .dashboard-metric { min-height: 126px; }
.admin-dashboard-metrics .metric-attention { border-color: #ead6a4; background: linear-gradient(150deg, #fffdf7, #fff8e9); }
.admin-dashboard-metrics .metric-attention .metric-icon { background: #fff0cc; color: #a8781d; }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 14px; margin-top: 16px; }
.admin-dashboard-lower-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.admin-queue-list { display: grid; gap: 4px; }
.admin-queue-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef3ee; color: inherit; text-decoration: none; }
.admin-queue-item:last-child { border-bottom: 0; }
.admin-queue-item > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.admin-queue-item strong, .admin-action-grid strong { overflow: hidden; color: #285f40; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-queue-item small, .admin-action-grid small { overflow: hidden; color: #789080; font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-queue-item .badge { margin: 0; white-space: nowrap; }
.admin-empty-state { margin: 0; color: #789080; font-size: 0.78rem; }
.health-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #eef3ee; }
.health-score div { display: grid; gap: 1px; }
.health-score strong { color: #1d5333; font-size: 2.2rem; letter-spacing: -0.06em; line-height: 1; }
.health-score span { color: #789080; font-size: 0.65rem; }
.health-score .health-status { padding: 5px 9px; border-radius: 999px; background: #e3f7ea; color: #2d7b46; font-size: 0.64rem; font-weight: 700; }
.health-bars { display: grid; gap: 13px; padding-top: 16px; }
.health-bars > div { display: grid; gap: 6px; }
.health-bars span { display: flex; justify-content: space-between; gap: 12px; color: #66806d; font-size: 0.68rem; }
.health-bars b { font-weight: 600; }
.health-bars strong { color: #285f40; }
.health-bars i { display: block; height: 7px; border-radius: 999px; background: #e8f0e9; overflow: hidden; }
.health-bars em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #64b777, #267044); }
.admin-actions-panel { min-width: 0; }
.admin-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.admin-action-grid a { display: grid; gap: 3px; min-width: 0; padding: 12px; border: 1px solid #e1ece3; border-radius: 11px; background: #fbfefb; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.admin-action-grid a:hover { border-color: #b5d6bc; box-shadow: 0 8px 16px rgba(17, 55, 29, 0.07); transform: translateY(-2px); }
.admin-action-grid a > span { display: grid; width: 25px; height: 25px; place-items: center; margin-bottom: 5px; border-radius: 7px; background: #e5f5e8; color: #267044; font-size: 0.5rem; font-weight: 800; }
.admin-action-grid a:nth-child(2) > span { background: #fff0cc; color: #a8781d; }
.admin-action-grid a:nth-child(3) > span { background: #e6f0ff; color: #356aa0; }
.admin-action-grid a:nth-child(4) > span { background: #f0eafa; color: #6d5a9d; }
.dashboard-activity-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dashboard-activity-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid #eef3ee;
}
.dashboard-activity-list li:last-child { border-bottom: 0; }
.activity-avatar {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 0.51rem;
    font-weight: 800;
}
.activity-avatar.listing { background: #45a568; }
.activity-avatar.offer { background: #2b8e69; }
.activity-avatar.pickup { background: #72b746; }
.activity-avatar.transaction { background: #7fc79a; }
.dashboard-activity-list li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.dashboard-activity-list strong { color: #315b3e; font-size: 0.78rem; }
.dashboard-activity-list small,
.dashboard-activity-list time { color: #7d9584; font-size: 0.64rem; }
.dashboard-activity-list time { font-size: 0.58rem; }
.chart-period {
    padding: 5px 8px;
    border: 1px solid #e0ebe1;
    border-radius: 7px;
    color: #76907d;
    font-size: 0.6rem;
}
.bar-chart {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 10px;
    min-height: 190px;
}
.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    color: #9aac9e;
    font-size: 0.55rem;
    text-align: right;
}
.chart-plot {
    position: relative;
    min-width: 0;
    border-bottom: 1px solid #cfe0d2;
}
.chart-grid-lines {
    position: absolute;
    inset: 0 0 21px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.chart-grid-lines i {
    display: block;
    border-top: 1px dashed #e4eee5;
}
.chart-bars {
    position: absolute;
    inset: 0 8px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
}
.chart-column {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.chart-bar {
    display: block;
    width: min(28px, 65%);
    min-height: 10px;
    border-radius: 5px 5px 1px 1px;
    background: linear-gradient(180deg, #55ae6c, #26814b);
    box-shadow: 0 5px 10px rgba(38, 129, 75, 0.14);
}
.chart-column:nth-child(even) .chart-bar { background: linear-gradient(180deg, #8ac992, #3f9a59); }
.chart-column small { color: #8aa08e; font-size: 0.6rem; }
.chart-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    color: #789080;
    font-size: 0.65rem;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 50%; background: #319053; }
.chart-legend strong { color: #309054; }
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.page-header h1 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.7rem);
    letter-spacing: -0.05em;
}
.page-header .subtitle {
    color: #5d725d;
    margin: 8px 0 0;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #143420, #2a5b35);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 12px 20px rgba(23, 50, 30, 0.14);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 22px rgba(23, 50, 30, 0.18);
}
.btn.secondary {
    background: #edf6ee;
    color: var(--ink);
    box-shadow: none;
}
.btn.ghost {
    background: transparent;
    border: 1px solid rgba(23, 50, 30, 0.18);
    color: var(--ink);
    box-shadow: none;
}
.table-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    overflow-x: auto;
    box-shadow: var(--shadow);
}
.easybone-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
.easybone-table th {
    background: var(--ink);
    color: #fff;
    padding: 14px 12px;
    text-align: left;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.easybone-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #ebf0eb;
    color: #2d3b2d;
}
.easybone-table tbody tr:hover {
    background: #f7faf7;
}
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--green-3);
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.badge.pending { background: var(--amber); color: #8a6700; }
.badge.open { background: var(--blue); color: #214e8d; }
.badge.approved { background: #def8e8; color: #1b6d42; }
.badge.verified { background: #e4f6ea; color: #1b6d42; }
.badge.rejected { background: var(--red); color: #882a2a; }
.listing-card .meta, .request-card .meta, .panel .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: #5b735d;
    font-size: 0.86rem;
}
.listing-card p, .request-card p, .panel p { margin: 12px 0; color: #445a45; }
.form-grid {
    display: grid;
    gap: 18px;
    max-width: 700px;
}
.form-grid label {
    display: grid;
    gap: 8px;
    font-weight: 600;
    color: #20402a;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    border: 1px solid rgba(23, 50, 30, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 1rem;
    background: #fff;
    color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
.alert {
    background: #fff0eb;
    border: 1px solid #f6c5b3;
    color: #8b3b2c;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-weight: 600;
}
.auth-page {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 90px);
}
.auth-card {
    width: min(100%, 520px);
    background: rgba(255,255,255,0.96);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.08);
}
.auth-card h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2rem;
}
.filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-top: 4px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    background: #f5f9f6;
    color: #4a6b52;
    font-weight: 700;
    font-size: 0.78rem;
    border: 1px solid #e0ebe1;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}
.filter-chip:hover {
    background: #e8f5ec;
    border-color: #c4deca;
    color: #2d8a52;
    transform: translateY(-1px);
}
.filter-chip.active {
    background: linear-gradient(135deg, #1a5c35, #2d8a52);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(26, 92, 53, 0.3);
}
.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #edf7ef;
    border-radius: 999px;
    color: #245b31;
    font-weight: 700;
}
.report-card .amount {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 8px;
}
.admin-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.admin-summary-grid article { min-width: 0; }
.admin-listing-toolbar { margin-bottom: 14px; }
.admin-listing-toolbar > div { min-width: 0; }
.admin-listing-toolbar .filter-row { margin: 0; }
.table-secondary-text { display: block; margin-top: 3px; color: #8aa08e; font-size: 0.63rem; }
.table-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.table-actions form { margin: 0; }
.table-actions .action-approve { border-color: #c8e3cf; background: #e9f7ec; color: #277044; }
.table-empty { padding: 30px !important; color: #789080 !important; text-align: center; }
.admin-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-report-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 14px; margin-bottom: 16px; }
.impact-bars { display: grid; gap: 15px; }
.impact-bars > div { display: grid; gap: 7px; }
.impact-bars span { display: flex; justify-content: space-between; gap: 12px; color: #66806d; font-size: 0.7rem; }
.impact-bars b { font-weight: 600; }
.impact-bars strong { color: #285f40; }
.impact-bars i { display: block; height: 9px; border-radius: 999px; background: #e8f0e9; overflow: hidden; }
.impact-bars em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55ae6c, #267044); }
.report-status-list { display: grid; gap: 9px; }
.report-status-list > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #eef3ee; }
.report-status-list > div:last-child { border-bottom: 0; }
.report-status-list strong { color: #285f40; font-size: 1rem; text-align: right; }
.report-status-list small { color: #789080; font-size: 0.67rem; }
.workflow-state { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border-radius: 999px; background: #edf4ee; color: #557762; font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.workflow-state.pending { background: #fff1d4; color: #a47720; }
.workflow-state.approved { background: #e3f7ea; color: #2d7b46; }
.admin-workflow-list { gap: 13px; }
.admin-workflow-list li { display: grid; gap: 3px; padding: 11px 0 11px 28px; border-bottom: 1px solid #eef3ee; position: relative; }
.admin-workflow-list li:last-child { border-bottom: 0; }
.admin-workflow-list li::before { content: ""; position: absolute; top: 15px; left: 2px; width: 14px; height: 14px; border: 2px solid #b9d8bf; border-radius: 50%; background: #fff; }
.admin-workflow-list li.complete::before { border-color: #4aa667; background: #4aa667; box-shadow: inset 0 0 0 3px #e5f5e8; }
.admin-workflow-list strong { color: #285f40; font-size: 0.76rem; }
.admin-workflow-list span { color: #789080; font-size: 0.68rem; line-height: 1.5; }
.global-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 80;
}
.global-modal.is-open {
    display: flex;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 26, 17, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 480px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 40px 100px rgba(12, 26, 17, 0.25);
    padding: 0;
    animation: modalSlideUp 0.35s ease;
    overflow: hidden;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
    position: relative;
    padding: 20px 20px 16px;
    background: linear-gradient(135deg, #0d3321 0%, #1a5c35 50%, #2d8a52 100%);
    border-radius: 20px 20px 0 0;
    color: #fff;
}
.modal-header::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}
.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.modal-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7dd987;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.modal-close {
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}
.modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: #fff;
}
.modal-body {
    padding: 18px;
}
.modal-form-grid {
    display: grid;
    gap: 10px;
}
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.form-group {
    background: #f8fbf8;
    border: 1px solid #e8efe8;
    border-radius: 10px;
    padding: 10px 12px;
}
.form-group.full-width {
    grid-column: 1 / -1;
}
.form-label {
    display: block;
    color: #789080;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    font-weight: 600;
}
.form-value {
    color: #1a5c35;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}
.form-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef3ee;
}
.form-section-title {
    margin: 0 0 10px;
    color: #1a5c35;
    font-size: 0.8rem;
    font-weight: 700;
}
.form-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.form-timeline li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fbf8;
    border-radius: 8px;
    color: #4a6b52;
    font-size: 0.75rem;
    line-height: 1.3;
}
.form-timeline li::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #2d8a52;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
}
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef3ee;
}
.modal-actions .btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.25s ease;
    text-align: center;
}
.modal-actions .btn.ghost {
    border: 2px solid #e0ebe1;
    background: transparent;
    color: #4a6b52;
}
.modal-actions .btn.ghost:hover {
    background: #f5f9f6;
    border-color: #2d8a52;
    color: #2d8a52;
}
.modal-actions .btn:not(.ghost) {
    background: linear-gradient(135deg, #2d8a52, #3ba462);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(45, 138, 82, 0.35);
}
.modal-actions .btn:not(.ghost):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(45, 138, 82, 0.45);
}
    letter-spacing: -0.02em;
}
.detail-section {
    border-top: 1px solid #eef3ee;
    padding-top: 20px;
}
.detail-section h4 {
    margin: 0 0 14px;
    color: #1a5c35;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.detail-section p {
    color: #4a6b52;
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0;
}
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.timeline-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #4a6b52;
    font-size: 0.85rem;
    line-height: 1.5;
}
.timeline-list li::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f5ec, #d4eddb);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d8a52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eef3ee;
}
.modal-actions .btn {
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}
.modal-actions .btn.ghost {
    border: 2px solid #e0ebe1;
    background: transparent;
    color: #4a6b52;
}
.modal-actions .btn.ghost:hover {
    background: #f5f9f6;
    border-color: #2d8a52;
    color: #2d8a52;
}
.modal-actions .btn:not(.ghost) {
    background: linear-gradient(135deg, #2d8a52, #3ba462);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(45, 138, 82, 0.35);
}
.modal-actions .btn:not(.ghost):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(45, 138, 82, 0.45);
}
.landing-hero {
    max-width: 1280px;
    min-height: 620px;
    margin: 0 auto 34px;
    padding: 78px 7vw 70px;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    align-items: center;
    gap: 5vw;
    border-radius: 28px;
    color: #fff;
    background: radial-gradient(circle at 82% 12%, rgba(142, 213, 149, 0.23), transparent 25%), linear-gradient(132deg, #0f2c1b 0%, #1e5d35 63%, #387b49 100%);
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 60px rgba(18, 57, 32, 0.2);
}
.landing-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -270px; border: 1px solid rgba(255,255,255,0.13); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,0.04), 0 0 0 64px rgba(255,255,255,0.03); }
.landing-hero-copy, .landing-visual { position: relative; z-index: 1; }
.landing-hero h2 { max-width: 690px; margin: 0 0 22px; font-size: clamp(2.7rem, 5.2vw, 5.5rem); line-height: 0.98; letter-spacing: -0.065em; }
.landing-hero p { max-width: 570px; font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.78); }
.landing-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.landing-actions .btn { background: #e5f6e8; color: #173f28; box-shadow: 0 12px 25px rgba(0,0,0,0.16); }
.landing-text-link { color: #fff; text-decoration: none; font-weight: 700; }
.landing-text-link span, .role-card a span { margin-left: 7px; transition: margin 0.2s ease; }
.landing-text-link:hover span, .role-card a:hover span { margin-left: 12px; }
.landing-proof { display: flex; align-items: center; gap: 12px; margin-top: 48px; color: rgba(255,255,255,0.72); font-size: 0.78rem; line-height: 1.4; }
.landing-proof strong { color: #fff; font-size: 0.85rem; }
.proof-avatars { display: flex; padding-left: 8px; }
.proof-avatars i { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -8px; border: 2px solid #1d5733; border-radius: 50%; background: #b9dfbe; color: #173f28; font-size: 0.58rem; font-style: normal; font-weight: 800; }
.proof-avatars i:nth-child(2) { background: #e9cc9b; }
.proof-avatars i:nth-child(3) { background: #e3e8b0; }
.landing-visual { min-height: 430px; display: grid; place-items: center; }
.visual-orbit { position: absolute; border: 1px solid rgba(255,255,255,0.16); border-radius: 50%; transform: rotate(-17deg); }
.visual-orbit-one { width: 490px; height: 190px; }
.visual-orbit-two { width: 460px; height: 280px; transform: rotate(32deg); }
.dashboard-preview { width: min(100%, 480px); padding: 18px; border: 1px solid rgba(255,255,255,0.34); border-radius: 19px; background: rgba(246, 252, 247, 0.96); color: var(--ink); box-shadow: 0 30px 60px rgba(7, 35, 18, 0.28); transform: rotate(3deg); }
.preview-topline, .preview-heading, .chart-label, .chart-days, .preview-activity { display: flex; align-items: center; justify-content: space-between; }
.preview-brand { font-size: 0.9rem; font-weight: 800; letter-spacing: -0.04em; }
.preview-brand b { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50% 50% 50% 0; background: var(--green-2); transform: rotate(-45deg); }
.preview-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #d9efdd; color: var(--green); font-size: 0.58rem; font-weight: 800; }
.preview-heading { align-items: flex-end; margin: 28px 0 18px; }
.preview-heading small, .preview-kpis small, .floating-stat small, .preview-activity small { display: block; color: #718374; font-size: 0.62rem; }
.preview-heading strong { display: block; margin-top: 3px; font-size: 1.2rem; letter-spacing: -0.04em; }
.preview-date { padding: 6px 9px; border: 1px solid #dfeae0; border-radius: 7px; color: #617764; font-size: 0.6rem; }
.preview-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-kpis > div { padding: 13px; border-radius: 11px; background: #edf6ee; }
.preview-kpis strong { display: block; margin: 4px 0; font-size: 1.5rem; letter-spacing: -0.05em; }
.preview-kpis em { color: #2b7a45; font-size: 0.62rem; font-style: normal; font-weight: 700; }
.preview-chart { margin-top: 12px; padding: 14px; border: 1px solid #e1eae2; border-radius: 11px; background: #fff; }
.chart-label { color: #537058; font-size: 0.65rem; font-weight: 700; }
.chart-label b { color: #2d7b46; }
.chart-bars { height: 96px; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; padding-top: 14px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, #edf3ed 24px); }
.chart-bars i { display: block; width: 18px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #77b984, #2d7b46); }
.chart-bars i:nth-child(2n) { background: #b8dcbc; }
.chart-days { color: #8a9b8e; font-size: 0.55rem; }
.preview-activity { justify-content: flex-start; gap: 9px; margin-top: 12px; padding: 11px; border-radius: 10px; background: #f5faf5; }
.preview-activity > strong { margin-left: auto; color: #91a093; font-size: 0.58rem; font-weight: 500; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: #47a45d; box-shadow: 0 0 0 4px #dff3e2; }
.preview-activity b { display: block; font-size: 0.68rem; }
.floating-stat { position: absolute; right: 0; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 12px 15px; border: 1px solid rgba(255,255,255,0.35); border-radius: 12px; background: rgba(255,255,255,0.94); color: var(--ink); box-shadow: 0 14px 28px rgba(0,0,0,0.15); transform: rotate(-4deg); }
.floating-stat strong { display: block; font-size: 0.83rem; }
.floating-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #dff3e2; color: #2d7b46; font-size: 1.2rem; font-weight: 300; }
.landing-metrics { max-width: 1120px; margin: 0 auto 96px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-metrics article { padding: 25px 24px; border-right: 1px solid var(--line); }
.landing-metrics article:last-child { border-right: 0; }
.landing-metrics .stat-value { font-size: 2.5rem; margin-bottom: 2px; }
.metric-note { color: #758679; font-size: 0.75rem; }
.landing-section { max-width: 1120px; margin: 0 auto 110px; }
.section-intro { max-width: 650px; margin-bottom: 34px; }
.section-intro h2, .process-heading h2 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.03; letter-spacing: -0.06em; }
.section-intro p { max-width: 520px; color: var(--ink-soft); }
.landing-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.role-card { min-height: 315px; padding: 25px; border-radius: 18px; position: relative; overflow: hidden; }
.role-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -55px; bottom: -75px; border: 1px solid rgba(20,52,33,0.14); border-radius: 50%; box-shadow: 0 0 0 20px rgba(20,52,33,0.035); }
.role-producer { background: #e5f3e5; }
.role-supplier { background: #f4ecd9; }
.role-admin { background: #e7edf4; }
.role-number { color: #6b7d6d; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; }
.role-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 42px 0 24px; border-radius: 11px; background: rgba(255,255,255,0.55); color: var(--ink); font-size: 1.35rem; }
.role-card h3 { margin: 0 0 10px; font-size: 1.35rem; letter-spacing: -0.04em; }
.role-card p { max-width: 260px; min-height: 68px; margin: 0 0 18px; color: #526553; font-size: 0.9rem; }
.role-card a { position: relative; z-index: 1; color: var(--ink); text-decoration: none; font-size: 0.8rem; font-weight: 800; }
.process-heading { max-width: 590px; margin-bottom: 34px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.process-grid article { padding: 28px 28px 10px 0; border-right: 1px solid var(--line); }
.process-grid article:not(:first-child) { padding-left: 28px; }
.process-grid article:last-child { border-right: 0; }
.process-grid article > span { color: #4b9b5f; font-size: 0.75rem; font-weight: 800; }
.process-grid h3 { margin: 33px 0 8px; font-size: 1.35rem; letter-spacing: -0.04em; }
.process-grid p { max-width: 250px; margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.landing-cta { max-width: 1120px; margin: 0 auto 60px; padding: 38px 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 18px; background: #173f28; color: #fff; }
.landing-cta .tag { margin-bottom: 10px; background: #dcefdc; }
.landing-cta h2 { max-width: 540px; margin: 0; font-size: clamp(1.7rem, 3vw, 2.65rem); line-height: 1.05; letter-spacing: -0.05em; }
.landing-cta .btn.secondary { background: #e5f6e8; white-space: nowrap; }
@media (max-width: 768px) {
    .easybone-demo, .module-page, .auth-page { padding: 20px; }
    .topbar { padding: 16px 20px; }
    .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .topbar nav { width: 100%; justify-content: space-between; }
    .portal-shell { display: block; }
    .portal-sidebar {
        position: static;
        width: 100%;
        min-height: 0;
        padding: 14px 14px 12px;
    }
    .portal-shell.sidebar-collapsed .portal-sidebar {
        width: 100%;
        min-height: 0;
        padding: 10px 14px;
    }
    .sidebar-context { padding: 2px 6px 12px; }
    .sidebar-nav {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        margin-top: 12px;
        padding-bottom: 3px;
    }
    .sidebar-link { flex: 0 0 auto; min-height: 38px; padding: 7px 9px; }
    .sidebar-link span:last-child { white-space: nowrap; }
    .sidebar-footer { display: none; }
    .portal-shell.sidebar-collapsed .sidebar-nav { display: none; }
    .portal-shell.sidebar-collapsed .sidebar-context { border-bottom: 0; padding-bottom: 2px; }
    .portal-shell.sidebar-collapsed .sidebar-context-head { justify-content: space-between; }
    .portal-shell.sidebar-collapsed .sidebar-kicker { display: inline; }
    .portal-search { width: min(100%, 190px); }
    .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-panels { grid-template-columns: 1fr; }
    .dashboard-welcome { align-items: flex-start; flex-direction: column; }
    .notification-item { grid-template-columns: auto 1fr; }
    .notification-item time { grid-column: 2; }
    .profile-data-grid { grid-template-columns: 1fr; }
    .data-table-list > div { grid-template-columns: 1fr; gap: 3px; }
    .dashboard-metrics { grid-template-columns: 1fr; }
    .admin-dashboard-hero { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
    .admin-dashboard-hero-actions { justify-items: start; }
    .admin-dashboard-grid, .admin-dashboard-lower-grid { grid-template-columns: 1fr; }
    .admin-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-summary-grid, .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-report-grid { grid-template-columns: 1fr; }
    .listing-table-wrap { overflow-x: auto; }
    .listing-table-wrap .easybone-table { min-width: 760px; }
    .listing-hero { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
    .listing-hero-action { justify-items: start; }
    .listing-hero h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
    .listing-hero p { font-size: 0.85rem; }
    .listing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .listing-toolbar { align-items: flex-start; flex-direction: column; }
    .listing-toolbar-note { align-self: flex-end; }
    .table-heading { align-items: flex-start; }
    .supplier-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .supplier-filter-head { align-items: flex-start; flex-direction: column; }
    .module-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
    .page-header { align-items: flex-start; }
    .hero { padding: 28px 20px; }
    .modal-panel { padding: 20px 18px 16px; }
    .landing-hero { grid-template-columns: 1fr; min-height: auto; padding: 52px 24px 38px; gap: 30px; }
    .landing-hero h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
    .landing-visual { min-height: 360px; }
    .dashboard-preview { transform: rotate(0); }
    .floating-stat { right: 2px; bottom: 4px; }
    .landing-metrics { grid-template-columns: 1fr 1fr; margin-bottom: 70px; }
    .landing-metrics article:nth-child(2) { border-right: 0; }
    .landing-metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .landing-section { margin-bottom: 75px; }
    .landing-role-grid, .process-grid { grid-template-columns: 1fr; gap: 14px; }
    .role-card { min-height: 270px; }
    .process-grid { gap: 0; }
    .process-grid article, .process-grid article:not(:first-child) { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .process-grid article:last-child { border-bottom: 0; }
    .process-grid h3 { margin-top: 16px; }
    .landing-cta { align-items: flex-start; flex-direction: column; margin-bottom: 32px; padding: 30px 24px; }
}

/* Dashboard visual system: keeps the existing PHP modules and interactions intact. */
.portal-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 258px;
    z-index: 40;
    height: 76px;
    padding: 0 30px;
    border-bottom: 1px solid #e4eee6;
    background: rgba(255, 255, 255, 0.96);
    color: #173f28;
    box-shadow: 0 5px 18px rgba(20, 52, 33, 0.05);
    backdrop-filter: blur(12px);
}
.portal-topbar h1 {
    position: fixed;
    top: 21px;
    left: 23px;
    z-index: 42;
    margin: 0;
    font-size: 1.24rem;
}
.portal-topbar h1 a { color: #fff; gap: 9px; }
.portal-topbar h1 .brand-mark { width: 24px; height: 24px; background: #9bd1a2; }
.portal-topbar .nav-actions { width: 100%; justify-content: flex-end; }
.portal-topbar .portal-search { width: min(310px, 36vw); margin-right: auto; }
.portal-topbar .portal-search input {
    border-color: #e1ece3;
    background: #f5faf6;
    color: #245638;
}
.portal-topbar .portal-search input::placeholder { color: #8aa090; }
.portal-topbar .portal-search input:focus { border-color: #8fc99a; background: #fff; }
.portal-topbar .portal-search button { color: #5a8667; }
.portal-topbar .notification-button { color: #356549; }
.portal-topbar .notification-button:hover { background: #edf7ee; }
.portal-topbar .profile-menu-trigger { color: #245638; }
.portal-topbar .profile-copy strong { color: #245638; }
.portal-topbar .profile-copy small { color: #789080; }
.portal-topbar .profile-caret { stroke: #477254; }
.portal-shell {
    display: block;
    min-height: 100vh;
    padding: 76px 0 0 258px;
    background: #f4faf5;
}
.portal-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 41;
    width: 258px;
    min-height: 100vh;
    padding: 20px 15px 20px;
    border-radius: 0;
    background: linear-gradient(180deg, #075b3d 0%, #064d35 58%, #073f2e 100%);
    box-shadow: 5px 0 20px rgba(7, 63, 46, 0.15);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px 22px;
}
.sidebar-brand a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none;
}
.sidebar-brand .brand-mark {
    width: 25px;
    height: 25px;
    background: #a8dcae;
    box-shadow: 0 0 0 5px rgba(168, 220, 174, 0.12);
}
.sidebar-brand .brand-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}
.sidebar-brand strong {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.04em;
}
.portal-sidebar .sidebar-context { padding: 11px 12px 22px; }
.portal-sidebar .sidebar-kicker { color: #b2e1bb; font-size: 0.6rem; }
.portal-sidebar .sidebar-context strong { font-size: 0.98rem; }
.portal-sidebar .sidebar-context small { color: rgba(235, 247, 238, 0.68); }
.portal-sidebar .sidebar-nav { gap: 4px; margin-top: 18px; }
.portal-sidebar .sidebar-nav {
    min-height: 0;
    max-height: calc(100vh - 225px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(190, 232, 197, 0.45) transparent;
    scrollbar-width: thin;
}
.portal-sidebar .sidebar-nav::-webkit-scrollbar { width: 6px; height: 6px; }
.portal-sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.portal-sidebar .sidebar-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(190, 232, 197, 0.45); }
.portal-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(223, 247, 226, 0.72); }
.portal-sidebar .sidebar-link {
    min-height: 40px;
    border-radius: 8px;
    color: rgba(241, 252, 243, 0.76);
    font-size: 0.74rem;
}
.portal-sidebar .sidebar-link:hover { background: rgba(182, 236, 193, 0.13); transform: none; }
.portal-sidebar .sidebar-link:hover,
.portal-sidebar .sidebar-link:focus-visible {
    background: #117f4b;
    color: #fff;
    box-shadow: 0 6px 14px rgba(2, 35, 23, 0.18);
    outline: none;
}
.portal-sidebar .sidebar-link.active {
    background: #159447;
    color: #fff;
    box-shadow: 0 7px 15px rgba(2, 35, 23, 0.2);
}
.portal-sidebar .sidebar-icon { width: 22px; height: 22px; border: 0; color: #bce8c5; }
.portal-sidebar .sidebar-link.active .sidebar-icon { background: transparent; border: 0; color: #fff; }
.portal-sidebar .sidebar-icon svg { width: 14px !important; height: 14px !important; }
.portal-shell.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
}
.portal-shell.sidebar-collapsed .sidebar-brand strong { display: none; }
.portal-content { min-height: calc(100vh - 76px); }
.module-page { max-width: 1360px; padding: 31px 34px 46px; }
.dashboard-welcome { margin-bottom: 21px; }
.dashboard-welcome h1 { font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -0.045em; }
.dashboard-welcome p { color: #7d9183; font-size: 0.75rem; }
.dashboard-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.dashboard-metric {
    min-height: 124px;
    padding: 15px 16px;
    border: 1px solid #e1ece3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(20, 72, 42, 0.045);
}
.dashboard-metric .metric-icon { width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(135deg, #e8f5ec, #d4eddb); color: #2d8a52; }
.dashboard-metric .metric-icon svg { width: 22px; height: 22px; }
.dashboard-metric .stat-label { color: #789080; font-size: 0.68rem; font-weight: 600; }
.dashboard-metric > strong { color: #1a5c35; font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 800; }
.dashboard-metric > small { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 3px 8px; border-radius: 6px; background: #e8f5ec; color: #2d8a52; font-size: 0.65rem; font-weight: 700; }
.dashboard-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; margin-top: 20px; }
.dashboard-panel {
    padding: 22px;
    border: none;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(17, 55, 29, 0.08);
}
.dashboard-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eef3ee; }
.dashboard-panel-heading h2 { margin: 0; color: #1a5c35; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.03em; }
.dashboard-panel-heading a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; background: #e8f5ec; color: #2d8a52; font-size: 0.7rem; font-weight: 700; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; }
.dashboard-panel-heading a:hover { background: #2d8a52; color: #fff; transform: translateX(2px); }
.dashboard-activity-list { gap: 0; list-style: none; padding: 0; margin: 0; }
.dashboard-activity-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f7f2; transition: background 0.2s ease; }
.dashboard-activity-list li:first-child { padding-top: 0; }
.dashboard-activity-list li:last-child { border-bottom: none; padding-bottom: 0; }
.dashboard-activity-list li:hover { background: #fafffb; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.activity-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, #e8f5ec, #d4eddb); color: #2d8a52; }
.activity-avatar svg { width: 18px; height: 18px; }
.activity-avatar.listing { background: linear-gradient(135deg, #e8f5ec, #d4eddb); color: #2d8a52; }
.activity-avatar.offer { background: linear-gradient(135deg, #fef3e2, #fde8cc); color: #c9871a; }
.activity-avatar.pickup { background: linear-gradient(135deg, #e8f0fb, #d0e0f5); color: #2563a8; }
.activity-avatar.transaction { background: linear-gradient(135deg, #f3e8fc, #ead6f8); color: #7c3aad; }
.dashboard-activity-list > li > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.dashboard-activity-list strong { display: block; color: #1a5c35; font-size: 0.8rem; font-weight: 700; }
.dashboard-activity-list small { display: block; color: #789080; font-size: 0.68rem; }
.dashboard-activity-list time { display: block; color: #9aaa9c; font-size: 0.62rem; margin-top: 2px; }
.chart-panel .bar-chart { min-height: 200px; padding: 10px 0; }
.chart-panel .chart-bar { width: 18px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #3bbd6a, #2d8a52); }
.chart-panel .chart-legend { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #eef3ee; color: #789080; font-size: 0.72rem; }
.chart-panel .chart-legend strong { color: #2d8a52; }
.admin-dashboard-hero {
    min-height: 150px;
    margin-bottom: 15px;
    padding: 25px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #075b3d, #117b47);
    box-shadow: 0 12px 28px rgba(7, 91, 61, 0.14);
}
.admin-dashboard-hero h1 { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.admin-dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-dashboard-grid { gap: 13px; margin-top: 14px; }
.admin-dashboard-grid .dashboard-panel { min-height: 0; }
.admin-action-grid a { border-color: #e6efe7; border-radius: 10px; background: #fbfefb; }
@media (max-width: 900px) and (min-width: 769px) {
    .portal-topbar { left: 220px; }
    .portal-sidebar { width: 220px; }
    .portal-shell { padding-left: 220px; }
    .module-page { padding-right: 24px; padding-left: 24px; }
    .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .portal-topbar { position: sticky; left: 0; height: auto; min-height: 68px; padding: 14px 16px; }
    .portal-topbar .nav-actions { width: 100%; justify-content: space-between; gap: 8px; }
    .portal-topbar .portal-search { width: min(62vw, 245px); margin-right: 0; }
    .portal-topbar .profile-copy { display: none; }
    .portal-shell { padding: 0; }
    .portal-sidebar { position: static; width: 100%; min-height: 0; padding: 12px 14px; }
    .sidebar-brand { min-height: 34px; padding: 0 6px 10px; }
    .sidebar-brand strong { font-size: 1rem; }
    .portal-shell.sidebar-collapsed .sidebar-brand { justify-content: flex-start; padding-right: 6px; padding-left: 6px; }
    .portal-shell.sidebar-collapsed .sidebar-brand strong { display: inline; }
    .portal-sidebar .sidebar-context { padding: 2px 6px 10px; }
    .portal-sidebar .sidebar-nav { overflow-x: auto; }
    .portal-sidebar .sidebar-nav {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: rgba(190, 232, 197, 0.55) transparent;
    }
    .portal-sidebar .sidebar-link { flex: 0 0 auto; }
    .portal-content { min-height: 0; }
    .module-page { padding: 23px 16px 32px; }
    .dashboard-metrics, .admin-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-panels, .admin-dashboard-grid, .admin-dashboard-lower-grid { grid-template-columns: 1fr; }
    .dashboard-metric { min-height: 118px; }
}
@media (max-width: 430px) {
    .portal-topbar .portal-search { width: 54vw; }
    .dashboard-metrics, .admin-dashboard-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dashboard-metric { padding: 13px 12px; }
    .dashboard-metric > strong { font-size: 0.98rem; }
    .dashboard-panel { padding: 15px; }
}

/* Readability overrides for the reference landing page */
body .landing-topbar nav a { font-size: 0.78rem; }
body .landing-topbar nav { gap: 18px; }
body .landing-topbar { padding-top: 14px; padding-bottom: 14px; }
body .landing-topbar h1 { font-size: 1.38rem; }
body .landing-topbar h1 .brand-mark { width: 24px; height: 29px; }
body .landing-topbar nav a { font-size: 1rem; line-height: 1.25; }
body .landing-topbar .nav-search { font-size: 1.45rem; line-height: 1; }
body .landing-topbar .nav-search { position: relative; left: -5px; }
body .landing-topbar .btn { font-size: 0.92rem; line-height: 1.2; padding: 11px 18px; }
body .landing-topbar .btn { font-size: 0.76rem; padding: 9px 16px; }
body .hero-kicker { font-size: 1rem; line-height: 1.35; letter-spacing: 0.045em; }
body .eyebrow { font-size: 0.86rem; line-height: 1.35; }
body .reference-hero .btn.outline { background: linear-gradient(135deg, #fff8df 0%, #e8f8ec 100%); border-color: #4ba979; color: #17654b; box-shadow: 0 8px 18px rgba(52, 139, 91, 0.12); }
body .reference-hero .btn.outline:hover { background: linear-gradient(135deg, #ffefbf 0%, #d7f1df 100%); border-color: #27885f; color: #0f5039; }
body .reference-hero .landing-actions > .btn:not(.outline) { background: linear-gradient(135deg, #16845d 0%, #0d6349 100%); color: #fff; box-shadow: 0 10px 20px rgba(18, 117, 79, 0.22); }
body .reference-hero .landing-actions > .btn:not(.outline):hover { background: linear-gradient(135deg, #1b966b 0%, #0b573f 100%); box-shadow: 0 13px 24px rgba(18, 117, 79, 0.28); }
body .reference-hero .landing-actions .btn > span { display: inline-flex; align-items: center; margin-left: 8px; font-size: 1.15em; line-height: 1; transform: translateY(-1px); }
body .reference-metrics { font-family: var(--brand-font); }
body .reference-metrics article { min-height: 104px; }
body .reference-metrics .metric-icon { width: 46px; min-width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 6px 14px rgba(29, 119, 78, 0.14), inset 0 1px 2px rgba(255,255,255,0.8); font-size: 1.15rem; }
body .reference-metrics article:nth-child(1) .metric-icon { background: linear-gradient(145deg, #e5fae9, #acdcbc); color: #14704d; }
body .reference-metrics article:nth-child(2) .metric-icon { background: linear-gradient(145deg, #e5f6ff, #acd7e8); color: #27758a; }
body .reference-metrics article:nth-child(3) .metric-icon { background: linear-gradient(145deg, #fff5d9, #efd39a); color: #9b6b25; }
body .reference-metrics article:nth-child(4) .metric-icon { background: linear-gradient(145deg, #e9f5f0, #b6d9ca); color: #237358; }
body .reference-metrics article:nth-child(4) .metric-icon { display: flex; align-items: center; justify-content: center; white-space: nowrap; background: linear-gradient(145deg, #1c8068 0%, #075342 100%); border-color: #d8f4e2; color: #fff; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.04em; box-shadow: 0 7px 16px rgba(14, 100, 72, 0.25), inset 0 1px 2px rgba(255,255,255,0.32); }
body .reference-metrics article:nth-child(4) .metric-icon sub { position: relative; top: 0.2em; margin-left: 1px; font-size: 0.62em; line-height: 1; }
body .reference-metrics strong { font-family: var(--brand-font); font-size: 1.42rem; font-weight: 800; letter-spacing: -0.04em; }
body .reference-metrics small { font-size: 0.76rem; font-weight: 700; line-height: 1.3; }
body .reference-metrics em { font-size: 0.62rem; line-height: 1.35; }
body .reference-hero p { max-width: 560px; font-size: 0.98rem; line-height: 1.72; }
body .reference-hero .btn { font-size: 0.8rem; padding: 12px 18px; }
body .hero-benefits { gap: 24px; color: #286c57; font-size: 0.82rem; line-height: 1.35; }
body .hero-benefits span { gap: 7px; }
body .hero-benefits b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,0.9); border-radius: 9px; background: linear-gradient(145deg, #e8faed 0%, #bde5cc 100%); color: #126e4e; box-shadow: 0 4px 10px rgba(25, 119, 76, 0.16), inset 0 1px 1px rgba(255,255,255,0.8); font-size: 0; line-height: 1; }
body .hero-benefits b::before { display: block; font-size: 0.95rem; font-weight: 700; line-height: 1; }
body .hero-benefits span:nth-child(1) b::before { content: "▤"; }
body .hero-benefits span:nth-child(2) b::before { content: "⌖"; }
body .hero-benefits span:nth-child(3) b::before { content: "➤"; }
body .hero-benefits span:nth-child(4) b::before { content: "✓"; }
body .hero-benefits span:nth-child(2) b { border-radius: 50%; background: linear-gradient(145deg, #e4f6ff 0%, #bbdfed 100%); color: #23728c; }
body .hero-benefits span:nth-child(3) b { background: linear-gradient(145deg, #fff3d8 0%, #f0d59a 100%); color: #986b22; }
body .hero-benefits span:nth-child(4) b { background: linear-gradient(145deg, #e4f8ef 0%, #a9dcbc 100%); color: #176b49; }
body .cycle-node { font-size: 0.66rem; }
body .cycle-node { font-size: 0.78rem; line-height: 1.3; }
body .cycle-node b { font-size: 0.82rem; line-height: 1.18; }
body .cycle-node small { color: #3f6d5b; font-size: 0.72rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
body .cycle-node .node-photo { width: 78px; height: 78px; margin-bottom: 8px; }
body .circle-core { width: 132px; height: 132px; }
body .circle-core small { color: #3f6d5b; font-size: 0.64rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
body .cycle-node b { font-size: 0.72rem; }
body .cycle-node small { font-size: 0.58rem; }
body .reference-metrics small { font-size: 0.66rem; }
body .reference-metrics em { font-size: 0.54rem; }
body .section-heading p { font-size: 0.82rem; }
body .four-step-grid h3 { font-size: 0.98rem; }
body .four-step-grid p { max-width: 210px; font-size: 0.72rem; line-height: 1.6; }
body .market-search { font-size: 0.66rem; }
body .market-search button { font-size: 0.68rem; }
body .select-pill { font-size: 0.64rem; }
body .market-card b { font-size: 0.76rem; }
body .market-card small { font-size: 0.62rem; }
body .market-card strong { font-size: 0.72rem; }
body .market-card em { font-size: 0.62rem; }
body .market-card a { font-size: 0.64rem; }
body .map-preview h3 { font-size: 0.94rem; }
body .map-preview p { font-size: 0.62rem; }
body .map-preview li { font-size: 0.64rem; }
body .map-preview li small { font-size: 0.54rem; }
body .role-cta h3 { font-size: 1.08rem; }
body .role-cta p { max-width: 250px; font-size: 0.7rem; }
body .role-cta .btn { font-size: 0.68rem; }
body .quality-copy p { font-size: 0.72rem; }
body .quality-steps article span { width: 42px; height: 42px; font-size: 0.78rem; }
body .quality-steps b { font-size: 0.68rem; }
body .quality-steps small { font-size: 0.56rem; }
body .ecosystem-line b { font-size: 0.6rem; }
body .reference-cta h2 { font-size: 1.28rem; }
body .landing-footer strong { font-size: 0.95rem; }
body .landing-footer small { font-size: 0.6rem; }
body .landing-footer nav a { font-size: 0.65rem; }
body .landing-footer > div:nth-child(3) { font-size: 0.65rem; }

/* Reference landing page visual system */
.landing-page { max-width: 1440px; margin: 0 auto; padding: 0 42px 30px; background: #fff; }
.landing-topbar { max-width: 1440px; margin: 0 auto; padding: 12px 56px; background: rgba(255,255,255,0.98); color: #165c43; border-bottom: 1px solid #edf3ee; box-shadow: none; overflow: hidden; }
.landing-topbar h1 { font-size: 1.25rem; }
.landing-topbar h1 a { color: #187154; display: inline-flex; align-items: center; gap: 8px; }
.landing-topbar nav { gap: 25px; }
.landing-topbar nav a { position: relative; color: #658177; font-size: 0.7rem; }
.landing-topbar nav a.active, .landing-topbar nav a:hover { color: #13805b; }
.landing-topbar nav a { transition: color 0.2s ease, transform 0.2s ease; }
.landing-topbar nav a:hover { transform: translateY(-1px); }
.landing-topbar nav a.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -17px; background: #13805b; }
.landing-topbar .nav-actions { gap: 8px; }
.landing-topbar .btn { padding: 8px 15px; border-radius: 7px; font-size: 0.68rem; box-shadow: none; }
.landing-topbar .btn.secondary { background: #fff; border: 1px solid #13805b; color: #13805b; }
body .landing-topbar .btn.secondary { background: linear-gradient(135deg, #f4fff5 0%, #d9f3e2 100%); border-color: #42a878; color: #126448; box-shadow: 0 6px 14px rgba(31, 123, 81, 0.12); }
body .landing-topbar .btn.secondary:hover { background: linear-gradient(135deg, #e4f9e8 0%, #c7ecd4 100%); border-color: #20845b; color: #0d5039; box-shadow: 0 9px 18px rgba(31, 123, 81, 0.2); }
.nav-search { color: #247b62; text-decoration: none; font-size: 1.15rem; transform: rotate(-20deg); }
.brand-mark { display: inline-block; width: 22px; height: 27px; border-radius: 70% 25% 70% 25%; background: linear-gradient(145deg, #45a56e 0 44%, #147453 45% 100%); transform: rotate(35deg); position: relative; }
.brand-mark::after { content: ""; position: absolute; width: 2px; height: 20px; left: 10px; top: 4px; background: #e8f7ec; transform: rotate(-28deg); }
.landing-hero.reference-hero { max-width: none; min-height: 470px; margin: 0 -42px 0; padding: 42px 9% 48px; border-radius: 0; color: #15523d; background: radial-gradient(circle at 9% 58%, rgba(121,193,142,0.18), transparent 26%), linear-gradient(112deg, #f1fbf0 0%, #fff 57%, #eaf7ed 100%); box-shadow: none; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(450px, 1.12fr); gap: 5vw; overflow: hidden; }
.reference-hero::before { width: 600px; height: 600px; right: -210px; bottom: -390px; border-color: rgba(62,153,95,0.13); box-shadow: 0 0 0 44px rgba(62,153,95,0.045), 0 0 0 88px rgba(62,153,95,0.025); }
.reference-hero .landing-hero-copy { align-self: center; }
.hero-kicker, .eyebrow { display: block; color: #268a64; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; }
.hero-kicker { margin-bottom: 13px; }
.reference-hero h2 { max-width: 620px; margin: 0 0 12px; color: #164f3c; font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: 1.01; letter-spacing: -0.065em; }
.reference-hero h2 em { color: #15996a; font-style: normal; }
.reference-hero p { max-width: 525px; margin: 0; color: #42665a; font-size: 0.85rem; line-height: 1.65; }
.reference-hero .landing-actions { margin-top: 22px; gap: 12px; }
.reference-hero .btn { padding: 11px 17px; border-radius: 6px; font-size: 0.7rem; box-shadow: none; }
.reference-hero .btn.outline, .btn.outline { border: 1px solid #218966; color: #218966; background: transparent; }
.hero-benefits { display: flex; gap: 21px; flex-wrap: wrap; margin-top: 27px; color: #4a8370; font-size: 0.58rem; font-weight: 700; }
.hero-benefits span { display: inline-flex; align-items: center; gap: 5px; }
.hero-benefits b { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #d7f1df; color: #17825b; font-size: 0.62rem; }
.circular-visual { position: relative; min-height: 390px; align-self: center; }
.circle-ring { position: absolute; border: 1px dashed rgba(41,137,96,0.52); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ring-outer { width: 365px; height: 365px; }
.ring-inner { width: 260px; height: 260px; border-style: solid; border-color: rgba(41,137,96,0.16); }
.circle-core { position: absolute; width: 122px; height: 122px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%; background: rgba(255,255,255,0.96); box-shadow: 0 7px 25px rgba(27,109,75,0.15); color: #157052; text-align: center; }
.circle-core .brand-mark { width: 21px; height: 25px; margin-bottom: 3px; }
.circle-core strong { font-size: 1.1rem; letter-spacing: -0.06em; }
.circle-core small { color: #6d8d80; font-size: 0.48rem; line-height: 1.3; }
.cycle-node { position: absolute; z-index: 2; color: #1a6048; font-size: 0.58rem; line-height: 1.22; }
.cycle-node b, .cycle-node small { display: block; }
.cycle-node b { font-size: 0.62rem; }
.cycle-node small { color: #6f8b80; font-size: 0.5rem; }
.node-photo, .listing-photo, .cta-photo, .eco-photo { display: block; background-position: center; background-size: cover; }
.node-photo { width: 68px; height: 68px; margin-bottom: 5px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 7px 18px rgba(18,93,60,0.16); }
.node-waste { left: 8%; top: 12%; }
.node-collector { right: 6%; top: 9%; }
.node-fertilizer { right: -3%; top: 48%; }
.node-soil { right: 19%; bottom: 2%; }
.node-farm { left: 5%; bottom: 1%; }
.photo-bones { background-image: url("https://images.unsplash.com/photo-1604503468506-a8da13d82791?auto=format&fit=crop&w=300&q=80"); }
.photo-truck { background-image: url("https://loremflickr.com/300/300/garbage,truck?lock=42"); background-position: center; }
.photo-factory { background-image: url("https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=300&q=80"); }
.photo-soil { background-image: url("https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=300&q=80"); }
.photo-farm { background-image: url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=300&q=80"); }
.photo-fresh { background-image: url("https://images.unsplash.com/photo-1604503468506-a8da13d82791?auto=format&fit=crop&w=500&q=80"); }
.photo-frozen { background-image: url("https://images.unsplash.com/photo-1587593810167-a84920ea0781?auto=format&fit=crop&w=500&q=80"); }
.photo-dry { background-image: url("https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=500&q=80"); }
.photo-eggs { background-image: url("https://images.unsplash.com/photo-1582722872445-44dc5f7e3c8f?auto=format&fit=crop&w=300&q=80"); }
.reference-metrics { max-width: 1120px; margin: 0 auto 68px; padding: 15px 0; border: 0; border-radius: 11px; background: linear-gradient(100deg,#f5fcf6,#fff); box-shadow: 0 8px 25px rgba(43,121,76,0.07); }
.reference-metrics article { display: flex; align-items: center; gap: 10px; padding: 10px 21px; border-right: 1px solid #e2efe5; }
.reference-metrics .metric-icon { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: #dff3e5; color: #208a61; font-size: 0.72rem; font-weight: 800; }
.reference-metrics article > span:last-child { display: block; }
.reference-metrics strong, .reference-metrics small, .reference-metrics em { display: block; }
.reference-metrics strong { color: #176b4e; font-size: 1.15rem; line-height: 1; }
.reference-metrics small { margin-top: 4px; color: #3c745f; font-size: 0.57rem; font-weight: 800; }
.reference-metrics em { margin-top: 3px; color: #88a395; font-size: 0.45rem; font-style: normal; }
.landing-section { max-width: 1120px; }
.reference-process { margin-bottom: 70px; }
.section-heading h2 { margin: 4px 0 3px; color: #174f3d; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.055em; }
.section-heading p { margin: 0; color: #789186; font-size: 0.72rem; }
.four-step-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 30px; }
.four-step-grid article { position: relative; padding: 0 25px; border-right: 1px solid #e4eee7; }
.four-step-grid article:first-child { padding-left: 0; }
.four-step-grid article:last-child { padding-right: 0; border: 0; }
.step-bubble { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 19px; border: 1px solid #bdddcc; border-radius: 50%; background: #1b825d; color: #fff; font-size: 0.6rem; font-weight: 800; box-shadow: 0 0 0 6px #edf8ef; }
.four-step-grid h3 { margin: 0 0 6px; color: #17664b; font-size: 0.82rem; }
.four-step-grid p { max-width: 180px; margin: 0; color: #779087; font-size: 0.62rem; line-height: 1.55; }
.marketplace-section { padding: 32px 0; margin-bottom: 53px; max-width: none; background: linear-gradient(100deg,#f3faf4,#fff); }
.marketplace-heading, .marketplace-grid { max-width: 1120px; margin-left: auto; margin-right: auto; }
.marketplace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.market-search { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid #e0ebe2; border-radius: 7px; background: #fff; color: #9aada2; font-size: 0.55rem; white-space: nowrap; }
.market-search button { padding: 8px 14px; border: 0; border-radius: 5px; background: #16835d; color: #fff; font-size: 0.58rem; }
.select-pill { padding: 8px 9px; border-left: 1px solid #edf2ee; color: #638173; }
.marketplace-grid { display: grid; grid-template-columns: 1.45fr 0.95fr; gap: 15px; margin-top: 21px; }
.listing-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.market-card { padding: 9px; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(24,90,57,0.08); }
.listing-photo { height: 92px; margin: -9px -9px 9px; border-radius: 8px 8px 4px 4px; }
.market-card b, .market-card small, .market-card strong, .market-card em { display: block; }
.market-card b { color: #286c55; font-size: 0.65rem; }
.market-card small { margin-top: 5px; color: #7c9a8c; font-size: 0.5rem; }
.market-card strong { margin-top: 14px; color: #c58024; font-size: 0.62rem; }
.market-card em { margin: 8px 0; color: #789286; font-size: 0.5rem; font-style: normal; }
.market-card a { display: block; padding: 7px; border-radius: 4px; background: #15825b; color: #fff; text-align: center; text-decoration: none; font-size: 0.53rem; }
.map-preview { padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(24,90,57,0.08); }
.map-art { position: relative; height: 122px; overflow: hidden; border-radius: 6px; background-color: #e7f1e5; background-image: linear-gradient(28deg, transparent 45%, #b9d8b8 46%, transparent 48%), linear-gradient(110deg, transparent 43%, #c7dec0 44%, transparent 46%), repeating-linear-gradient(160deg, transparent 0 18px, rgba(89,160,101,0.15) 19px 20px); }
.map-art span, .map-art i { position: absolute; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: #12845c; transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.map-art span { left: 50%; top: 47%; width: 15px; height: 15px; background: #2d9bdb; }
.map-art i:nth-child(2) { left: 23%; top: 22%; }.map-art i:nth-child(3) { left: 70%; top: 25%; }.map-art i:nth-child(4) { left: 61%; top: 67%; }.map-art i:nth-child(5) { left: 29%; top: 76%; }
.map-preview h3 { margin: 10px 0 2px; color: #17694e; font-size: 0.82rem; }.map-preview p { margin: 0 0 8px; color: #91a69a; font-size: 0.52rem; }.map-preview ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.map-preview li { padding-left: 9px; border-left: 2px solid #42a676; color: #4c7866; font-size: 0.54rem; }.map-preview li small { display: block; margin-top: 2px; color: #91a69a; font-size: 0.46rem; }
.role-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 42px; }
.role-cta { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 23px 28px; overflow: hidden; border-radius: 9px; background: #eef9ef; }
.supplier-cta { background: #f0f9f0; }.role-cta h3 { margin: 4px 0; color: #216a51; font-size: 0.95rem; }.role-cta p { max-width: 220px; margin: 0 0 12px; color: #769487; font-size: 0.59rem; }.role-cta .btn { padding: 8px 13px; border-radius: 5px; font-size: 0.58rem; box-shadow: none; }.role-cta .cta-photo { width: 145px; height: 125px; border-radius: 50%; opacity: 0.85; }
.quality-section { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 35px; padding: 28px 34px; margin-bottom: 65px; border-radius: 10px; background: #f1faf2; }.quality-copy h2 { max-width: 300px; margin: 5px 0 8px; color: #17684d; font-size: 1.3rem; letter-spacing: -0.05em; }.quality-copy p { max-width: 260px; margin: 0; color: #769387; font-size: 0.62rem; }.quality-steps { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr; align-items: center; gap: 4px; }.quality-steps article { text-align: center; }.quality-steps article span { display: grid; place-items: center; width: 37px; height: 37px; margin: auto auto 9px; border: 1px solid #bce1c8; border-radius: 50%; color: #18825b; font-size: 0.7rem; font-weight: 800; }.quality-steps b, .quality-steps small { display: block; }.quality-steps b { color: #39755f; font-size: 0.58rem; }.quality-steps small { margin-top: 4px; color: #90a99a; font-size: 0.46rem; }.quality-steps > i { color: #56a478; font-size: 1.6rem; font-style: normal; text-align: center; }
.ecosystem-section { margin-bottom: 48px; }.ecosystem-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; }.ecosystem-line article { text-align: center; }.eco-photo { width: 57px; height: 57px; margin: auto auto 6px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 10px rgba(25,103,69,0.14); }.ecosystem-line b { color: #638476; font-size: 0.5rem; }.ecosystem-line > i { color: #3d9c6d; font-style: normal; }.reference-cta { max-width: 1120px; min-height: 89px; margin: 0 auto 30px; padding: 19px 27px; border-radius: 8px; background: linear-gradient(100deg, #176244, #318752); }.reference-cta > div { display: flex; align-items: center; gap: 14px; }.reference-cta .brand-mark { flex: 0 0 auto; background: #e9f8e9; }.reference-cta h2 { margin: 3px 0 0; color: #fff; font-size: 1.1rem; letter-spacing: -0.04em; }.reference-cta .eyebrow { color: #d8f2d9; }.reference-cta .btn { padding: 10px 16px; box-shadow: none; }.landing-footer { max-width: 1440px; margin: 0 -42px; padding: 33px 9% 22px; display: grid; grid-template-columns: 1.2fr 1.5fr 1.3fr; gap: 25px; position: relative; background: #0e3d32; color: #cfe6d7; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; }
.footer-brand div { display: flex; flex-direction: column; gap: 2px; }
.footer-brand strong { color: #fff; font-size: 0.9rem; }
.footer-brand small { color: #91b6a3; font-size: 0.55rem; }
.footer-nav { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 16px; }
.footer-nav a { color: #d6eadd; font-size: 0.6rem; text-decoration: none; transition: color 0.2s; }
.footer-nav a:hover { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.contact-item { display: flex; align-items: center; gap: 8px; font-size: 0.55rem; color: #cfe6d7; }
.contact-icon { font-size: 0.7rem; }
.landing-footer strong { color: #fff; font-size: 0.85rem; }
.landing-footer small { color: #91b6a3; font-size: 0.5rem; }
.landing-footer .copyright { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 0.5rem; color: #6b8f7a; }
@media (max-width: 900px) { .landing-page { padding: 0 20px 20px; }.landing-topbar { padding: 12px 20px; }.landing-topbar nav { gap: 12px; }.landing-topbar nav a.active::after { bottom: -12px; }.landing-hero.reference-hero { margin: 0 -20px; padding: 42px 30px; grid-template-columns: 1fr; }.circular-visual { min-height: 350px; }.landing-footer { margin: 0 -20px; padding: 28px 30px 35px; } }
@media (max-width: 900px) { body .landing-topbar nav { gap: 10px; } body .landing-topbar nav a { font-size: 0.9rem; } body .landing-topbar .btn { font-size: 0.78rem; padding-left: 13px; padding-right: 13px; } }
@media (max-width: 650px) { .landing-topbar nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-top: 7px; }.landing-topbar .nav-actions { margin-left: auto; }.landing-topbar .nav-search { display: none; }.landing-hero.reference-hero { padding: 38px 20px 25px; }.reference-hero h2 { font-size: clamp(2.35rem, 12vw, 3.5rem); }.hero-benefits { gap: 10px; }.circular-visual { min-height: 310px; transform: scale(0.82); transform-origin: top center; margin-bottom: -55px; }.ring-outer { width: 330px; height: 330px; }.ring-inner { width: 230px; height: 230px; }.reference-metrics { grid-template-columns: 1fr 1fr; }.reference-metrics article { padding: 10px; border-bottom: 1px solid #e2efe5; }.reference-metrics article:nth-child(2) { border-right: 0; }.reference-metrics article:nth-child(n+3) { border-bottom: 0; }.reference-metrics strong { font-size: 0.95rem; }.four-step-grid, .marketplace-grid, .role-cta-grid, .quality-section { grid-template-columns: 1fr; }.four-step-grid article, .four-step-grid article:first-child, .four-step-grid article:last-child { padding: 16px 0; border-right: 0; border-bottom: 1px solid #e4eee7; }.four-step-grid article:last-child { border-bottom: 0; }.marketplace-heading { display: block; }.market-search { margin-top: 17px; overflow-x: auto; }.listing-preview-grid { grid-template-columns: 1fr 1fr; }.listing-preview-grid .market-card:last-child { display: none; }.role-cta { padding: 20px; }.quality-section { gap: 24px; padding: 24px 20px; }.quality-steps { grid-template-columns: 1fr 20px 1fr; row-gap: 18px; }.quality-steps article:nth-of-type(3), .quality-steps article:nth-of-type(4), .quality-steps > i:nth-of-type(3) { display: none; }.ecosystem-line { overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; }.ecosystem-line article { min-width: 70px; }.reference-cta > div { align-items: flex-start; }.reference-cta { padding: 20px; }.reference-cta .brand-mark { display: none; }.landing-footer { display: block; }.landing-footer nav { margin: 22px 0; }.landing-footer > div:nth-child(3) { justify-items: start; }.landing-footer .copyright { position: static; display: block; margin-top: 24px; } }

/* Landing-page aligned authentication screen */
.auth-topbar { display: none !important; }
.login-page {
    min-height: calc(100vh - 84px);
    padding: 40px 20px 70px;
    background:
    radial-gradient(circle at 12% 10%, rgba(195, 157, 72, 0.12), transparent 22%),
    radial-gradient(circle at 90% 90%, rgba(77, 175, 113, 0.14), transparent 30%),
    linear-gradient(180deg, #f5faf5 0%, #eaf5ed 100%);
}
.admin-login-page {
    background:
    radial-gradient(circle at 8% 12%, rgba(40, 92, 140, 0.13), transparent 24%),
    radial-gradient(circle at 92% 86%, rgba(20, 106, 76, 0.14), transparent 30%),
    linear-gradient(180deg, #f2f7fa 0%, #eaf3ef 100%);
}

.login-shell {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    background: #fff;
    border: 1px solid #dbe9df;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(17, 71, 52, 0.13), 0 2px 5px rgba(17, 71, 52, 0.04);
    overflow: hidden;
}

.login-intro-panel {
    padding: clamp(32px, 4vw, 58px);
    background: linear-gradient(145deg, #e6f3e8 0%, #f8fcf8 63%, #fff 100%);
    border-right: 1px solid #ebf2ed;
}

.login-intro-panel .eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #9a7025;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-intro-panel h1 {
    margin: 0 0 16px;
    color: #123f31;
    font-size: clamp(2.5rem, 4vw, 4.2rem);
    line-height: 1.03;
    letter-spacing: -0.065em;
}

.login-intro-panel h1 em {
    color: #16845e;
    font-style: normal;
}

.login-intro-panel p {
    max-width: 520px;
    margin: 0;
    color: #3f6253;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0;
}
.admin-login-intro-panel {
    background: linear-gradient(145deg, #e4edf3 0%, #f4f9f7 62%, #fff 100%);
    border-right-color: #dce8e4;
}
.admin-login-intro-panel .eyebrow { color: #3d6d83; }
.admin-login-intro-panel h1 em { color: #216e61; }
.admin-login-promise { display: grid; gap: 10px; max-width: 500px; margin-top: 30px; }
.admin-login-promise article { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #d5e4e2; border-radius: 11px; background: rgba(255, 255, 255, 0.64); }
.admin-promise-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #dcecf0; color: #306a78; font-size: 0.57rem; font-weight: 800; }
.admin-login-promise article:nth-child(2) .admin-promise-icon { background: #e4f1df; color: #39714e; }
.admin-login-promise article:nth-child(3) .admin-promise-icon { background: #f5ead1; color: #987128; }
.admin-login-promise strong, .admin-login-promise small { display: block; }
.admin-login-promise strong { color: #285648; font-size: 0.77rem; }
.admin-login-promise small { margin-top: 2px; color: #6d837b; font-size: 0.66rem; line-height: 1.4; }
.admin-portal-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px; color: #55776b; font-size: 0.68rem; font-weight: 700; }
.admin-portal-note .status-dot { background: #63b67b; border-color: #c4e5ca; }

.login-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
    max-width: 500px;
}

.login-benefits span {
    display: block;
    padding: 16px 14px;
    border: 1px solid #d5e6da;
    border-radius: 10px;

.alert.success {
    background: #e8f7ed;
    border-color: #b8e2c5;
    color: #226b40;
}

.workflow-form {
    align-items: start;
}

.workflow-form .panel {
    min-width: 0;
}

.form-grid.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
}

.form-hint {
    margin: 0;
    color: #66806f;
    font-size: 0.88rem;
}

.checkbox-line {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 10px !important;
}

.checkbox-line input {
    width: 16px;
    height: 16px;
    accent-color: #16845e;
}

.workflow-panel {
    margin-top: 24px;
}

.workflow-list,
.check-list,
.action-list,
.activity-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-data-grid div {
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid #e5eee6;
    border-radius: 9px;
    background: #f8fbf8;
}

.profile-data-grid span,
.data-table-list em {
    color: #789080;
    font-size: 0.72rem;
    font-style: normal;
}

.profile-data-grid strong {
    color: #285f40;
    font-size: 0.86rem;
}

.profile-identity-panel { display: grid; justify-items: center; align-content: center; min-height: 280px; text-align: center; }
.large-profile-avatar { display: grid; width: 78px; height: 78px; place-items: center; border: 4px solid #d8efdc; border-radius: 50%; background: linear-gradient(145deg, #e8f7e9, #9dccaa); color: #1b5633; font-size: 1.15rem; font-weight: 800; box-shadow: 0 10px 20px rgba(35, 110, 63, 0.12); }
.profile-identity-panel h3 { margin: 14px 0 0; color: #245638; }
.profile-identity-panel p { margin: 3px 0 12px; color: #789080; }
.settings-list { display: grid; gap: 0; max-width: 700px; }
.settings-list > label,
.settings-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid #edf2ed; color: #315b3e; }
.settings-list > label:last-of-type,
.settings-list > div:last-child { border-bottom: 0; }
.settings-list label > span,
.settings-list div > span:first-child { display: grid; gap: 3px; }
.settings-list strong { font-size: 0.84rem; }
.settings-list small { color: #789080; font-size: 0.75rem; }
.settings-list input[type="checkbox"] { width: 18px; height: 18px; accent-color: #287d49; }
.settings-list .btn { margin-top: 16px; justify-self: start; }
.settings-value { color: #2b7d49; font-size: 0.76rem; font-weight: 800; }

.activity-list li {
    display: grid;
    gap: 3px;
    padding: 12px 0;
    border-bottom: 1px solid #edf2ed;
}

.activity-list li:last-child { border-bottom: 0; }
.activity-list strong { color: #285f40; }
.activity-list span { color: #718576; font-size: 0.8rem; }

.data-table-list {
    display: grid;
    gap: 2px;
}

.data-table-list > div {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #edf2ed;
}

.data-table-list > div:last-child { border-bottom: 0; }
.data-table-list span { color: #365b40; font-weight: 600; }
.data-table-list strong { color: #1e5d35; font-size: 0.86rem; }

.workflow-list li,
.action-item {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 12px 14px 12px 42px;
    border: 1px solid #e0ebe2;
    border-radius: 10px;
    color: #2f513b;
    text-decoration: none;
}

.workflow-list li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 16px;
    width: 12px;
    height: 12px;
    border: 2px solid #b7cbbd;
    border-radius: 50%;
}

.workflow-list li.complete::before {
    border-color: #16845e;
    background: #16845e;
    box-shadow: inset 0 0 0 3px #fff;
}

.workflow-list li.current {
    border-color: #8ac9a5;
    background: #f0faf3;
}

.workflow-list strong,
.action-item strong {
    color: #1d5e43;
}

.workflow-list span,
.action-item span {
    color: #6a8474;
    font-size: 0.86rem;
}

.action-item {
    padding-left: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.action-item:hover {
    border-color: #8ac9a5;
    background: #f5fbf6;
}

.notification-list {
    display: grid;
    gap: 10px;
    max-width: 900px;
}

.notification-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    border: 1px solid #e0ebe2;
    border-radius: 12px;
    background: #fff;
    color: #2f513b;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(17, 44, 27, 0.04);
}

.notification-item.unread {
    border-color: #a9d8b5;
    background: #f4fbf5;
}

.notification-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: #e1f3e5;
    color: #1e6a3c;
    font-size: 0.62rem;
    font-weight: 800;
}

.notification-item strong,
.notification-item small {
    display: block;
}

.notification-item small {
    margin-top: 3px;
    color: #6a8474;
    font-size: 0.82rem;
}

.notification-item time {
    color: #829487;
    font-size: 0.72rem;
    white-space: nowrap;
}

.check-list li {
    padding: 10px 12px 10px 34px;
    border-bottom: 1px solid #edf2ed;
    color: #45654e;
}

.check-list li::before {
    content: "✓";
    margin-left: -22px;
    margin-right: 10px;
    color: #16845e;
    font-weight: 800;
}
    background: rgba(255, 255, 255, 0.72);
    color: #2b6854;
}

.login-benefits b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f9edc9, #e8d298);
    color: #83601f;
    font-size: 0.9rem;
}

.login-benefits strong,
.login-benefits small {
    display: block;
}

.login-benefits strong {
    font-size: 0.78rem;
    color: #164f3e;
}

.login-benefits small {
    margin-top: 4px;
    color: #617d70;
    font-size: 0.58rem;
    line-height: 1.45;
}

.login-orbit {
    position: relative;
    min-height: 320px;
    max-width: 530px;
    margin: 18px auto 0;
}

.login-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(41, 137, 96, 0.42);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.login-orbit-ring-outer {
    width: 286px;
    height: 286px;
}

.login-orbit-ring-inner {
    width: 190px;
    height: 190px;
    border-style: solid;
    border-color: rgba(41, 137, 96, 0.14);
}

.login-orbit-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: 106px;
    height: 106px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 9px 28px rgba(27, 109, 75, 0.16);
    color: #157052;
    text-align: center;
    transform: translate(-50%, -50%);
}

.login-orbit-core .brand-mark {
    width: 20px;
    height: 24px;
    margin-bottom: 3px;
}

.login-orbit-core strong {
    font-size: 1rem;
    letter-spacing: -0.06em;
}

.login-orbit-core small {
    color: #6d8d80;
    font-size: 0.45rem;
    line-height: 1.3;
}

.login-orbit-node {
    position: absolute;
    z-index: 3;
    min-width: 132px;
    padding: 11px 12px;
    border: 1px solid #d5e6da;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 18px rgba(24, 90, 57, 0.08);
    color: #1a6048;
    text-align: center;
}

.login-orbit-node b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 6px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f9edc9, #e8d298);
    color: #83601f;
    font-size: 0.86rem;
}

.login-orbit-node b svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-orbit-node strong,
.login-orbit-node small {
    display: block;
}

.login-orbit-node strong {
    font-size: 0.68rem;
    line-height: 1.2;
}

.login-orbit-node small {
    margin-top: 4px;
    color: #6f8b80;
    font-size: 0.54rem;
    line-height: 1.3;
}

.login-orbit-node-market { top: 3%; left: 5%; }
.login-orbit-node-map { top: 3%; right: 5%; }
.login-orbit-node-request { bottom: 3%; right: 5%; }
.login-orbit-node-verified { bottom: 3%; left: 5%; }

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(26px, 3vw, 48px);
    background: #fbfdfb;
}

.login-card {
    width: min(100%, 470px);
    margin: 0 auto;
    padding: 30px 28px 24px;
    border: 1px solid #dbe9df;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(20, 67, 50, 0.1);
}

.login-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 6px 0;
    color: #5d8172;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.login-back-link:hover {
    color: #147855;
    transform: translateX(-2px);
}

.login-back-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-card-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-bottom: 18px;
}

.login-card-brand .brand-mark {
    width: 28px;
    height: 34px;
}

.login-card-brand strong {
    display: block;
    color: #154b3a;
    font-size: 1.4rem;
    letter-spacing: -0.05em;
}

.login-card-brand small {
    display: block;
    margin-top: 4px;
    color: #547265;
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.admin-login-card { border-color: #d5e5e0; box-shadow: 0 18px 38px rgba(25, 74, 77, 0.1); }
.admin-login-label { display: block; margin-bottom: 8px; color: #4b7f7f; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }
.admin-login-card h2 { font-size: clamp(1.45rem, 2vw, 1.95rem); }
.admin-login-panel { background: #f9fcfb; }
.admin-role-choice { min-height: 104px; }
.admin-role-choice.active, .admin-role-choice:has(input:checked) { border-color: #27766e; background: linear-gradient(135deg, #205b59 0%, #2f8172 100%); box-shadow: 0 8px 18px rgba(32, 91, 89, 0.2); }
.admin-role-choice:hover { border-color: #9ec8c1; }
.admin-role-choice .role-choice-icon { background: #e2f0ed; color: #287166; }
.admin-role-choice.active .role-choice-icon, .admin-role-choice:has(input:checked) .role-choice-icon { color: #27766e; }
.admin-login-submit { background: linear-gradient(135deg, #1e4f4e 0%, #287b6d 100%); box-shadow: 0 13px 25px rgba(30, 79, 78, 0.22); }
.admin-login-submit:hover { background: linear-gradient(135deg, #173e3e 0%, #21685d 100%); }
.admin-login-switch { margin-bottom: 0; }
.admin-portal-link { margin: 9px 0 0; color: #638075; font-size: 0.68rem; text-align: center; }
.admin-portal-link a { color: #236f62; font-weight: 700; text-decoration: none; }
.admin-portal-link a:hover { text-decoration: underline; }
.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; }

.login-card h2 {
    margin: 0;
    text-align: center;
    color: #123f31;
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    letter-spacing: -0.06em;
}

.login-intro {
    margin: 10px 0 20px;
    text-align: center;
    color: #527064;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0;
}

.role-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.role-choice {
    position: relative;
    display: flex !important;
    min-height: 94px;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 12px;
    border: 1px solid #e1e9e4;
    border-radius: 8px;
    background: #fff;
    color: #285c4a !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(20, 67, 50, 0.05);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.role-choice:hover {
    border-color: #b8d3c1;
    background: #fbfefb;
    transform: translateY(-1px);
}

.role-choice.active,
.role-choice:has(input[value="waste_producer"]:checked) {
    border-color: #0e7655;
    background: linear-gradient(135deg, #087553 0%, #158b64 100%);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(13, 113, 80, 0.2);
    transform: translateY(0);
}

.role-choice.active:has(input[value="supplier"]),
.role-choice:has(input[value="supplier"]:checked) {
    border-color: #0e7655;
    background: linear-gradient(135deg, #087553 0%, #158b64 100%);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(13, 113, 80, 0.2);
}

.role-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-choice-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #e7f4ea;
    color: #147855;
    font-size: 0.72rem;
}

.role-choice-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.role-choice strong,
.role-choice small {
    display: block;
}

.role-choice strong {
    color: #164f3e;
    font-size: 0.78rem;
    line-height: 1.25;
}

.role-choice.active strong,
.role-choice:has(input:checked) strong {
    color: #fff;
}

.role-choice small {
    margin-top: 5px;
    color: #6f8b80;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
}

.role-choice.active small,
.role-choice:has(input:checked) small {
    color: rgba(255, 255, 255, 0.78);
}

.role-choice.active .role-choice-icon,
.role-choice:has(input:checked) .role-choice-icon {
    background: rgba(255, 255, 255, 0.96);
    color: #147855;
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-form label {
    display: grid;
    gap: 9px;
    color: #173f31;
    font-size: 0.82rem;
    font-weight: 700;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 15px;
    border: 1px solid #b9d2c0;
    border-radius: 9px;
    background: #f3f8f4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrap:focus-within {
    border-color: #16845e;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(24, 137, 92, 0.13);
}

.input-wrap::before {
    content: "";
    position: absolute;
    left: 46px;
    width: 1px;
    height: 22px;
    background: #d6e4da;
    transition: background 0.2s ease;
}

.input-wrap:focus-within::before {
    background: #8fc7a4;
}

.input-wrap svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    stroke: #2e6e56;
    fill: none;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
}

.input-wrap:focus-within svg {
    stroke: #147855;
}

.login-form input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #123b2c;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    outline: none;
    box-shadow: none;
}

.login-form input::placeholder {
    color: #718e80;
    font-weight: 500;
}

.password-toggle {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6a8b7c;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: #147855;
}

.password-toggle:focus-visible {
    outline: 2px solid #8fc7a4;
    outline-offset: 2px;
    border-radius: 4px;
}

.password-toggle svg {
    width: 17px;
    height: 17px;
    margin: 0;
    border: 0;
    stroke: currentColor;
}

.password-eye-hidden,
.password-toggle.is-visible .password-eye-visible {
    display: none;
}

.password-toggle.is-visible .password-eye-hidden {
    display: block;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    color: #4c6e5f;
    font-size: 0.62rem;
}

.login-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 600;
}

.login-options input[type="checkbox"] {
    accent-color: #1f855d;
    width: 13px;
    height: 13px;
}

.login-options a,
.register-prompt a {
    color: #106c50;
    text-decoration: none;
    font-weight: 700;
}

.login-submit {
    width: 100%;
    margin-top: 2px;
    padding: 15px 18px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #0d4b37 0%, #187a57 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 13px 25px rgba(13, 75, 55, 0.25);
}

.login-submit:hover {
    background: linear-gradient(135deg, #083c2c 0%, #126647 100%);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: #7a9088;
    font-size: 0.62rem;
    text-transform: lowercase;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e1ece4;
}

.google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #b9d2c0;
    border-radius: 8px;
    background: #fff;
    color: #173f31;
    font-weight: 600;
}

.google-login b {
    display: inline-grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #e6f5eb;
    color: #177b5b;
    font-weight: 800;
}

.register-prompt {
    margin: 18px 0 0;
    text-align: center;
    color: #6d837b;
    font-size: 0.74rem;
    line-height: 1.45;
}

.alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #f0c6bf;
    border-radius: 10px;
    background: #fff3f0;
    color: #b63b35;
    font-size: 0.72rem;
}

@media (max-width: 900px) {
    .login-page {
        padding-top: 28px;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-intro-panel {
        border-right: 0;
        border-bottom: 1px solid #ebf2ed;
    }

    .login-benefits {
        max-width: 100%;
    }

    .login-orbit {
        max-width: 470px;
    }
}

@media (max-width: 560px) {
    .login-page {
        padding: 18px 14px 40px;
    }

    .login-intro-panel,
    .login-panel {
        padding: 22px 18px;
    }

    .login-intro-panel h1 {
        font-size: 2.3rem;
    }

    .login-orbit { min-height: 300px; transform: scale(0.88); transform-origin: top center; margin-bottom: -32px; }

    .login-card {
        padding: 22px 18px 18px;
    }

    .role-picker {
        grid-template-columns: 1fr;
    }
}

/* Screenshot-aligned registration form */
.register-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding: 22px 18px 28px;
    background: #07100b url("https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=1800&q=82") center/cover fixed;
}

.register-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(231, 246, 235, 0.08));
}

.register-card {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 28px 30px 20px;
    border: 1px solid #dceae0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 22px 52px rgba(17, 71, 52, 0.1), 0 2px 5px rgba(17, 71, 52, 0.04);
    color: #174f3d;
}

.register-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.register-brand .brand-mark {
    width: 38px;
    height: 46px;
}

.register-brand strong {
    display: block;
    color: #126448;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.06em;
}

.register-brand small {
    display: block;
    margin-top: 4px;
    color: #347361;
    font-size: 0.7rem;
    line-height: 1.3;
}

.register-card h1 {
    margin: 0;
    color: #126448;
    font-size: clamp(2rem, 4vw, 2.7rem);
    letter-spacing: -0.06em;
    line-height: 1.05;
}

.register-lead {
    margin: 4px 0 14px;
    color: #417461;
    font-size: 0.92rem;
}

.register-form {
    display: grid;
    gap: 12px;
}

.register-role-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.register-role-card {
    position: relative;
    display: flex;
    min-height: 104px;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #d8e5dd;
    border-radius: 8px;
    background: #fff;
    color: #17664b;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(22, 91, 59, 0.04);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.register-role-card:hover {
    border-color: #16845e;
    background: #f0faf3;
    box-shadow: 0 5px 14px rgba(24, 132, 94, 0.1);
}

.register-role-card.active {
    background: linear-gradient(135deg, #087553 0%, #158b64 100%);
    color: #fff;
    box-shadow: 0 6px 15px rgba(13, 113, 80, 0.16);
}

.register-role-card input,
.register-category-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.register-role-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: #e6f5eb;
    color: #137957;
}

.register-role-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-role-card.active .register-role-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.register-role-card strong,
.register-role-card small {
    display: block;
}

.register-role-card strong {
    font-size: 0.9rem;
}

.register-role-card small {
    max-width: 260px;
    margin-top: 6px;
    color: #6b9080;
    font-size: 0.64rem;
    line-height: 1.35;
}

.register-role-card.active small {
    color: rgba(255, 255, 255, 0.82);
}

.register-role-card i,
.register-category-card i {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 13px;
    height: 13px;
    border: 1.5px solid #c7d6ce;
    border-radius: 50%;
}

.register-role-card.active i,
.register-category-card.active i {
    border: 4px solid #147855;
}

.register-role-card.active i {
    border-color: #fff;
}

.register-category-section,
.register-section,
.register-consent {
    margin: 0;
    padding: 0;
    border: 0;
}

.register-category-section[hidden] {
    display: none;
}

.register-form:has(.register-category-card input[value="food_stall"]:checked) #registerBusinessLicenseField,
.register-form:has(.register-category-card input[value="household"]:checked) #registerBusinessLicenseField {
    display: none;
}

.register-form:has(.register-category-card input[value="food_stall"]:checked) .register-legal-section .register-field-row,
.register-form:has(.register-category-card input[value="household"]:checked) .register-legal-section .register-field-row {
    grid-template-columns: 1fr;
}

.register-category-section legend,
.register-section h2,
.register-consent h2 {
    margin: 0;
    color: #185c47;
    font-size: 1rem;
    font-weight: 800;
}

.register-section-note {
    display: block;
    margin: 2px 0 8px;
    color: #759487;
    font-size: 0.7rem;
}

.register-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.register-category-grid[hidden] {
    display: none;
}

.register-category-card {
    position: relative;
    display: grid;
    min-height: 84px;
    place-items: center;
    gap: 7px;
    padding: 11px;
    border: 1px solid #d8e5dd;
    border-radius: 8px;
    background: #fff;
    color: #286c55;
    cursor: pointer;
}

.register-category-card.active {
    border-color: #0e7655;
    background: linear-gradient(135deg, #087553 0%, #158b64 100%);
    color: #fff;
    box-shadow: 0 6px 15px rgba(13, 113, 80, 0.16);
}

.register-category-card svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #147855;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-category-card.active svg {
    stroke: #fff;
}

.register-category-card.active i {
    border-color: #fff;
}

.register-category-card strong {
    font-size: 0.78rem;
    line-height: 1.2;
}

.register-section {
    display: grid;
    gap: 8px;
}

.register-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.register-field {
    display: grid;
    gap: 4px;
    color: #286450;
    font-size: 0.74rem;
    font-weight: 700;
}

.register-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 11px;
    border: 1px solid #d8e5dd;
    border-radius: 7px;
    background: #fbfdfc;
}

.register-input:focus-within {
    border-color: #58ac80;
    box-shadow: 0 0 0 3px rgba(24, 137, 92, 0.08);
}

.register-input svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #24785d;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-input > svg {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    padding: 4px;
    border-radius: 7px;
    background: #eaf6ef;
    stroke: #176f53;
    stroke-width: 1.8;
}

.register-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #174b39;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    outline: none;
}

.register-input input::placeholder {
    color: #829b8f;
    font-weight: 500;
    opacity: 1;
}

.register-input .password-toggle {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.register-input .password-toggle svg {
    width: 15px;
    height: 15px;
}

.register-consent {
    display: grid;
    gap: 6px;
}

.register-consent label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #54786a;
    font-size: 0.7rem;
    line-height: 1.4;
}

.register-consent input {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #16845e;
}

.register-consent a {
    color: #147855;
    font-weight: 700;
}

.register-submit {
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, #0c7b55, #168f61);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 8px 16px rgba(13, 113, 80, 0.16);
}

.register-submit:hover {
    background: linear-gradient(135deg, #086746, #117a52);
}

.register-page .register-prompt {
    margin-top: 12px;
    font-size: 0.72rem;
}

.register-home-link {
    display: block;
    margin-top: 8px;
    color: #147855;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.register-home-link:hover,
.register-home-link:focus-visible {
    color: #0b5f43;
    text-decoration: underline;
}

@media (max-width: 620px) {
    .register-page { padding: 18px 12px 26px; }
    .register-card { padding: 22px 16px 18px; }
    .register-role-picker,
    .register-category-grid,
    .register-field-row { grid-template-columns: 1fr; }
    .register-role-card {
        min-height: 92px;
        gap: 13px;
        padding: 13px 15px;
    }

    .register-role-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .register-role-icon svg {
        width: 26px;
        height: 26px;
    }

    .form-grid.two-column {
        grid-template-columns: 1fr;
    }
}