1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,300&display=swap');

    :root {
      --green: #a8cf22;
      --green-2: #b7dd2e;
      --green-dark: #5a7a09;
      --green-glow: rgba(168,207,34,.18);
      --white: #ffffff;
      --paper: #f8faf3;
      --text: #0f1a06;
      --muted: rgba(15,26,6,.52);
      --line: rgba(168,207,34,.2);
      --card-bg: rgba(255,255,255,.85);
      --card-border: rgba(168,207,34,.22);
      --shadow-sm: 0 8px 32px rgba(43,70,8,.08);
      --shadow-md: 0 24px 72px rgba(43,70,8,.12);
      --shadow-lg: 0 48px 120px rgba(43,70,8,.16);
      --ease: cubic-bezier(.16,1,.3,1);
      --font-display: 'DM Serif Display', Georgia, serif;
      --font-body: 'DM Sans', system-ui, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--paper);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── NOISE TEXTURE ── */
    body::before {
      content: '';
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 0;
      opacity: .06;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 180px;
      mix-blend-mode: multiply;
    }

    /* ── BG ORBS ── */
    .orb {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      filter: blur(80px);
      opacity: .55;
    }
    .orb-1 { width: 700px; height: 700px; top: -200px; left: -150px; background: radial-gradient(circle, rgba(168,207,34,.22), transparent 70%); }
    .orb-2 { width: 500px; height: 500px; bottom: -100px; right: -100px; background: radial-gradient(circle, rgba(168,207,34,.14), transparent 70%); }

    /* ═══════════════════════════════════
       LOGIN SCREEN
    ═══════════════════════════════════ */
    #login-screen {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--paper);
      padding: 24px;
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    #login-screen.hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(1.04);
    }

    .login-card {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 460px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 40px;
      padding: 52px 48px 44px;
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(24px);
    }

    .login-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 40px;
    }
    .login-logo {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      background: var(--green);
      display: grid;
      place-items: center;
      color: white;
      font-family: var(--font-display);
      font-size: 28px;
      box-shadow: 0 16px 40px rgba(168,207,34,.35);
    }
    .login-brand-text { line-height: 1.2; }
    .login-brand-text strong { font-family: var(--font-display); font-size: 22px; display: block; }
    .login-brand-text span { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

    .login-title { font-family: var(--font-display); font-size: 32px; margin-bottom: 8px; line-height: 1.15; }
    .login-sub { color: var(--muted); font-size: 14px; margin-bottom: 36px; line-height: 1.6; }

    .field-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }

    .field-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--green-dark);
      margin-bottom: 7px;
    }

    .field-wrap { position: relative; }
    .field-icon {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      pointer-events: none;
    }

    input[type="text"], input[type="password"] {
      width: 100%;
      background: rgba(255,255,255,.9);
      border: 1.5px solid var(--card-border);
      border-radius: 18px;
      padding: 17px 18px 17px 48px;
      font: inherit;
      font-size: 15px;
      color: var(--text);
      outline: none;
      transition: border .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
    }
    input[type="text"]:focus, input[type="password"]:focus {
      border-color: rgba(168,207,34,.55);
      box-shadow: 0 0 0 4px rgba(168,207,34,.1);
      transform: translateY(-1px);
    }

    .login-hint {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 28px;
      padding: 14px 18px;
      background: rgba(168,207,34,.07);
      border: 1px solid rgba(168,207,34,.15);
      border-radius: 14px;
      line-height: 1.6;
    }
    .login-hint strong { color: var(--green-dark); }

    .btn-login {
      width: 100%;
      background: var(--green);
      color: white;
      border: none;
      border-radius: 18px;
      padding: 18px 24px;
      font: inherit;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .04em;
      cursor: pointer;
      box-shadow: 0 16px 44px rgba(168,207,34,.3);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
      position: relative;
      overflow: hidden;
    }
    .btn-login::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.18), transparent);
    }
    .btn-login:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(168,207,34,.4); }
    .btn-login:active { transform: translateY(0); }

    .login-error {
      display: none;
      color: #c0392b;
      font-size: 13px;
      margin-top: 14px;
      text-align: center;
      padding: 10px;
      background: rgba(192,57,43,.06);
      border-radius: 12px;
      border: 1px solid rgba(192,57,43,.15);
    }
    .login-error.show { display: block; }

    /* ═══════════════════════════════════
       MAIN APP
    ═══════════════════════════════════ */
    #app { display: none; position: relative; z-index: 1; min-height: 100vh; }
    #app.show { display: block; }

    /* ── SIDEBAR ── */
    .sidebar {
      position: fixed;
      left: 0; top: 0; bottom: 0;
      width: 270px;
      background: rgba(255,255,255,.88);
      border-right: 1px solid var(--card-border);
      backdrop-filter: blur(24px);
      z-index: 100;
      display: flex;
      flex-direction: column;
      padding: 32px 20px;
      box-shadow: 4px 0 40px rgba(43,70,8,.06);
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 8px;
      margin-bottom: 36px;
    }
    .sb-logo {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: var(--green);
      display: grid;
      place-items: center;
      color: white;
      font-family: var(--font-display);
      font-size: 22px;
      box-shadow: 0 8px 24px rgba(168,207,34,.3);
      flex-shrink: 0;
    }
    .sb-brand-text strong { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
    .sb-brand-text span { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

    .sidebar-farmer-card {
      background: linear-gradient(135deg, rgba(168,207,34,.12), rgba(168,207,34,.04));
      border: 1px solid rgba(168,207,34,.22);
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 28px;
    }
    .sfc-id { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark); font-weight: 700; margin-bottom: 4px; }
    .sfc-name { font-family: var(--font-display); font-size: 20px; margin-bottom: 2px; }
    .sfc-since { font-size: 12px; color: var(--muted); }
    .sfc-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      background: rgba(168,207,34,.14);
      border: 1px solid rgba(168,207,34,.25);
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 11px;
      font-weight: 700;
      color: var(--green-dark);
    }
    .sfc-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: block; box-shadow: 0 0 6px var(--green); }

    .nav-section-label {
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
      padding: 0 10px;
      margin-bottom: 8px;
    }

    .nav-links { display: flex; flex-direction: column; gap: 3px; margin-bottom: 28px; }
    .nav-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      transition: all .25s var(--ease);
      border: 1px solid transparent;
      user-select: none;
    }
    .nav-link .nav-icon { font-size: 18px; width: 22px; text-align: center; }
    .nav-link:hover { background: rgba(168,207,34,.08); color: var(--text); }
    .nav-link.active {
      background: rgba(168,207,34,.12);
      border-color: rgba(168,207,34,.22);
      color: var(--green-dark);
      font-weight: 700;
    }

    .sidebar-footer {
      margin-top: auto;
      border-top: 1px solid var(--line);
      padding-top: 20px;
    }
    .btn-logout {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 14px;
      border-radius: 14px;
      background: none;
      border: 1px solid rgba(200,50,50,.15);
      color: rgba(180,40,40,.7);
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all .25s var(--ease);
    }
    .btn-logout:hover { background: rgba(200,50,50,.06); border-color: rgba(200,50,50,.3); }

    /* ── MAIN CONTENT ── */
    .main-content {
      margin-left: 270px;
      padding: 40px 40px 60px;
      min-height: 100vh;
    }

    /* ── TOP BAR ── */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 36px;
    }
    .topbar-left h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.1; }
    .topbar-left p { color: var(--muted); font-size: 14px; margin-top: 4px; }
    .topbar-date {
      font-size: 13px;
      color: var(--muted);
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      padding: 9px 16px;
    }

    /* ── PANELS ── */
    .panel { display: none; }
    .panel.active { display: block; }

    /* ── STAT CARDS ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 28px;
    }
    .stat-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 24px;
      padding: 26px 24px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(16px);
      transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    }
    .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .stat-icon { font-size: 26px; margin-bottom: 14px; }
    .stat-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
    .stat-value { font-family: var(--font-display); font-size: 32px; line-height: 1; }
    .stat-sub { font-size: 12px; color: var(--green-dark); margin-top: 6px; font-weight: 600; }

    /* ── SECTION CARD ── */
    .section-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 28px;
      padding: 32px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(16px);
      margin-bottom: 20px;
    }
    .section-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .section-card-title { font-family: var(--font-display); font-size: 22px; }
    .section-card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .badge-green { background: rgba(168,207,34,.14); color: var(--green-dark); border: 1px solid rgba(168,207,34,.25); }
    .badge-blue { background: rgba(50,130,220,.1); color: #1a5fa8; border: 1px solid rgba(50,130,220,.2); }
    .badge-orange { background: rgba(230,140,40,.1); color: #a05c10; border: 1px solid rgba(230,140,40,.2); }
    .badge-gray { background: rgba(100,100,100,.08); color: #555; border: 1px solid rgba(100,100,100,.15); }

    /* ── TABLE ── */
    .data-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
    .data-table thead th {
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
      padding: 8px 16px;
      text-align: left;
    }
    .data-table tbody tr {
      background: rgba(255,255,255,.7);
      border-radius: 14px;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }
    .data-table tbody tr:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
    .data-table tbody td {
      padding: 15px 16px;
      font-size: 14px;
      border-top: 1px solid rgba(168,207,34,.1);
      border-bottom: 1px solid rgba(168,207,34,.1);
    }
    .data-table tbody td:first-child {
      border-left: 1px solid rgba(168,207,34,.1);
      border-radius: 14px 0 0 14px;
    }
    .data-table tbody td:last-child {
      border-right: 1px solid rgba(168,207,34,.1);
      border-radius: 0 14px 14px 0;
    }
    .td-num { font-family: var(--font-display); font-weight: 400; }
    .td-muted { color: var(--muted); font-size: 13px; }

    /* ── TIMELINE ── */
    .timeline { display: flex; flex-direction: column; gap: 0; }
    .tl-item {
      display: grid;
      grid-template-columns: 140px auto 1fr;
      gap: 0 20px;
      align-items: start;
      padding-bottom: 28px;
      position: relative;
    }
    .tl-item::before {
      content: '';
      position: absolute;
      left: 140px;
      top: 10px;
      bottom: -6px;
      width: 1px;
      background: linear-gradient(to bottom, rgba(168,207,34,.4), transparent);
      transform: translateX(19px);
    }
    .tl-item:last-child::before { display: none; }
    .tl-date { font-size: 12px; color: var(--muted); padding-top: 6px; text-align: right; line-height: 1.4; }
    .tl-dot {
      width: 40px; height: 40px;
      border-radius: 14px;
      background: rgba(168,207,34,.12);
      border: 1.5px solid rgba(168,207,34,.25);
      display: grid;
      place-items: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .tl-dot.highlight { background: var(--green); border-color: var(--green); }
    .tl-body { padding-top: 6px; }
    .tl-type { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); font-weight: 700; margin-bottom: 4px; }
    .tl-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
    .tl-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
    .tl-amount { display: inline-block; margin-top: 8px; font-family: var(--font-display); font-size: 18px; color: var(--green-dark); }

    /* ── DOCUMENTS GRID ── */
    .docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .doc-card {
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 20px;
      background: rgba(255,255,255,.7);
      display: flex;
      align-items: center;
      gap: 14px;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
      cursor: pointer;
    }
    .doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
    .doc-icon {
      width: 44px; height: 44px;
      border-radius: 13px;
      background: rgba(168,207,34,.1);
      border: 1px solid rgba(168,207,34,.2);
      display: grid;
      place-items: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .doc-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
    .doc-meta { font-size: 11px; color: var(--muted); }

    /* ── CHART BARS ── */
    .chart-wrap { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin-top: 8px; }
    .chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .chart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
    .chart-bar {
      width: 100%;
      border-radius: 10px 10px 0 0;
      background: linear-gradient(to top, rgba(168,207,34,.5), rgba(168,207,34,.15));
      border: 1px solid rgba(168,207,34,.25);
      transition: height .8s var(--ease);
      position: relative;
    }
    .chart-bar::after {
      content: attr(data-val);
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      color: var(--green-dark);
      white-space: nowrap;
    }
    .chart-label { font-size: 10px; color: var(--muted); font-weight: 600; text-align: center; }

    /* ── PROFILE PAGE ── */
    .profile-header {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 24px;
      align-items: center;
      margin-bottom: 28px;
    }
    .profile-avatar {
      width: 80px; height: 80px;
      border-radius: 24px;
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      display: grid;
      place-items: center;
      color: white;
      font-family: var(--font-display);
      font-size: 34px;
      box-shadow: 0 16px 44px rgba(168,207,34,.3);
    }
    .profile-name { font-family: var(--font-display); font-size: 26px; }
    .profile-id { font-size: 13px; color: var(--muted); margin-top: 4px; }
    .profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .profile-field { }
    .pf-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
    .pf-value { font-size: 15px; font-weight: 500; }

    /* ── FILTER BAR ── */
    .filter-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
    .filter-btn {
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid var(--card-border);
      background: rgba(255,255,255,.8);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: all .25s var(--ease);
    }
    .filter-btn:hover, .filter-btn.active { background: rgba(168,207,34,.12); border-color: rgba(168,207,34,.3); color: var(--green-dark); }


    /* ── PRODUCT POLISH ── */
    .login-card::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(168,207,34,.52), rgba(255,255,255,.9), rgba(168,207,34,.12));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .login-card::after {
      content: '';
      position: absolute;
      width: 220px; height: 220px;
      right: -95px; top: -95px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(168,207,34,.22), transparent 70%);
      pointer-events: none;
    }
    .dashboard-split { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
    .portal-intro {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 26px;
      margin-bottom: 18px;
      padding: 30px 32px;
      border-radius: 28px;
      color: #fff;
      background: linear-gradient(135deg, #142006, #314c0a 56%, #789a14);
      box-shadow: 0 28px 70px rgba(43,70,8,.18);
    }
    .portal-intro::after {
      content: '';
      position: absolute;
      right: -80px; top: -120px;
      width: 330px; height: 330px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200,235,85,.42), transparent 66%);
    }
    .portal-intro > * { position: relative; z-index: 2; }
    .portal-kicker { display:block; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.56); margin-bottom:10px; }
    .portal-intro h2 { font-family:var(--font-display); font-size:31px; line-height:1.02; font-weight:400; }
    .portal-intro p { margin-top:10px; max-width:660px; color:rgba(255,255,255,.64); font-size:13px; line-height:1.6; }
    .portal-intro-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; max-width:270px; }
    .portal-intro-tags span { padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); font-size:10px; font-weight:700; white-space:nowrap; }
    .stat-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(168,207,34,.1); border:1px solid rgba(168,207,34,.16); }
    .section-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
    .section-card:hover { box-shadow: var(--shadow-md); }

    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .docs-grid { grid-template-columns: repeat(2, 1fr); }
      .dashboard-split { grid-template-columns: 1fr; }
      .portal-intro { align-items:flex-start; flex-direction:column; }
      .portal-intro-tags { justify-content:flex-start; max-width:none; }
    }
    @media (max-width: 780px) {
      body { padding-bottom: 92px; }
      .sidebar {
        left: 12px; right: 12px; top: auto; bottom: 12px;
        width: auto; height: auto;
        padding: 8px;
        border: 1px solid rgba(168,207,34,.18);
        border-radius: 22px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 20px 55px rgba(43,70,8,.18);
        backdrop-filter: blur(22px);
      }
      .sidebar-brand, .sidebar-farmer-card, .nav-section-label, .sidebar-footer { display:none; }
      .nav-links { flex-direction: row; gap: 3px; margin: 0; }
      .nav-link { flex:1; min-width:0; padding:9px 5px; border-radius:14px; flex-direction:column; gap:4px; text-align:center; font-size:9px; line-height:1.1; }
      .nav-link .nav-icon { width:auto; font-size:17px; }
      .main-content { margin-left: 0; padding: 22px 14px 36px; }
      .topbar { align-items:flex-start; gap:12px; margin-bottom:20px; }
      .topbar-left h1 { font-size:26px; }
      .topbar-date { flex-shrink:0; padding:8px 10px; font-size:11px; }
      .portal-intro { padding:24px 22px; border-radius:24px; }
      .portal-intro h2 { font-size:27px; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap:10px; }
      .stat-card { border-radius:20px; padding:20px 17px; }
      .stat-value { font-size:27px; }
      .section-card { padding:20px; border-radius:23px; overflow-x:auto; }
      .section-card-header { align-items:flex-start; gap:10px; }
      .data-table { min-width:720px; }
      .docs-grid { grid-template-columns: 1fr; }
      .profile-header { grid-template-columns:auto 1fr; }
      .profile-header > .badge { grid-column:1 / -1; justify-self:start; }
      .profile-grid { grid-template-columns:1fr; }
      .tl-item { grid-template-columns:82px auto 1fr; gap:0 11px; }
      .tl-item::before { left:82px; }
      .tl-date { font-size:10px; }
      .chart-wrap { min-width:420px; }
      .login-card { padding:40px 26px 32px; border-radius:30px; }
      .login-title { font-size:29px; }
    }
    @media (max-width: 480px) {
      .stats-grid { grid-template-columns:1fr; }
      .topbar { display:block; }
      .topbar-date { display:inline-block; margin-top:10px; }
      .portal-intro-tags span { font-size:9px; }
      .nav-link { font-size:8px; }
      .login-card { padding:34px 20px 28px; }
      .login-brand { margin-bottom:30px; }
      .login-logo { width:50px; height:50px; }
    }


    .giant-return { position: fixed; right: 18px; top: 18px; z-index: 350; display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:999px; background:rgba(15,26,6,.88); color:#fff; border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 42px rgba(43,70,8,.18); backdrop-filter:blur(18px); text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .giant-return:hover { transform:translateY(-1px); }
    @media (max-width:780px) { .giant-return { right:14px; top:14px; padding:9px 11px; font-size:9px; } }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp .6s var(--ease) both; }
    .fade-up-2 { animation: fadeUp .6s .1s var(--ease) both; }
    .fade-up-3 { animation: fadeUp .6s .2s var(--ease) both; }
    .fade-up-4 { animation: fadeUp .6s .3s var(--ease) both; }
  
.xyz-return{position:fixed;bottom:18px;left:18px;z-index:99999;padding:12px 20px;border-radius:24px;background:#17191f;color:white;font:700 14px Arial,sans-serif;box-shadow:0 4px 24px #0003;text-decoration:none}