:root{--green:#006a4e;--green2:#009b72;--red:#d62828;--ink:#17312b;--muted:#667b75;--bg:#f3f7f5;--line:#dbe7e2;--card:#fff;--shadow:0 12px 30px rgba(19,68,54,.08)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Noto Sans Bengali",Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:20}.logo{display:flex;align-items:center;gap:10px}.logo>span{background:var(--green);color:#fff;border-radius:12px;padding:10px;font-weight:800}.logo div{display:flex;flex-direction:column}.logo small{color:var(--muted)}.topbar nav{display:flex;gap:22px;font-weight:650}.topbar nav a:hover{color:var(--green)}.container{max-width:1180px;margin:34px auto;padding:0 20px}.container.wide{max-width:1360px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);margin-bottom:22px}.button,button{border:0;border-radius:10px;padding:12px 18px;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--green);color:#fff}.primary:hover{background:#00543e}.secondary{background:#e8f1ee;color:var(--green)}.full{width:100%}.hidden{display:none!important}.muted,small{color:var(--muted)}.site-footer{text-align:center;color:var(--muted);padding:30px}.login-wrap{min-height:calc(100vh - 130px);display:grid;place-items:center;padding:30px}.login-card{width:min(440px,100%)}.brand-mark{width:70px;height:70px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;display:grid;place-items:center;border-radius:20px;font-weight:900;font-size:20px}.login-card label,.field{display:flex;flex-direction:column;gap:7px;margin:16px 0}.login-card input,.field input,.field select,.qual-item select{border:1px solid #cadbd4;border-radius:10px;padding:12px 13px;font-size:15px;background:#fff}.field i,.qual-item i{color:var(--red);font-style:normal}.alert{padding:13px;border-radius:10px;margin:14px 0}.alert.error{background:#ffe8e8;color:#8d1717}.dashboard-hero{background:linear-gradient(135deg,#064d3c,#008768);border-radius:24px;color:white;padding:46px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dashboard-hero h1{font-size:42px;margin:5px 0 10px}.dashboard-hero p{max-width:700px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800}.score-ring{width:160px;height:160px;border:12px solid rgba(255,255,255,.25);border-top-color:white;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-ring strong{font-size:44px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-grid .card{display:flex;flex-direction:column;gap:8px}.report-list a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.report-list a div{display:flex;flex-direction:column;gap:5px}.report-list span{color:var(--muted);font-size:13px}.empty{text-align:center;padding:40px;color:var(--muted)}.page-title,.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.page-title{margin-bottom:20px}.page-title h1,.section-head h2{margin:0 0 5px}.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px;position:sticky;top:82px;z-index:10;background:var(--bg);padding:8px 0}.step{background:#e6efeb;color:#536963;padding:9px;font-size:13px}.step span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d1dfda;margin-right:5px}.step.active{background:var(--green);color:white}.step.active span{background:white;color:var(--green)}.wizard-panel{display:none}.wizard-panel.active{display:block}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}.two-col,.year-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.year-grid{grid-template-columns:repeat(3,1fr)}.wizard-actions{position:sticky;bottom:0;background:#fff;border:1px solid var(--line);padding:14px;border-radius:14px;display:flex;box-shadow:0 -8px 24px rgba(0,0,0,.07);z-index:11}.spacer{flex:1}.financial-card{padding:0;overflow:hidden}.financial-card .section-head{padding:24px}.legend{display:flex;gap:12px;font-size:12px}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%}.req-dot{background:var(--green)}.opt-dot{background:#a6b5b0}.table-scroll{overflow:auto;max-height:calc(100vh - 270px)}.financial-table{width:100%;border-collapse:collapse}.financial-table th{position:sticky;top:0;background:#e8f2ee;padding:13px;text-align:right;z-index:2}.financial-table th:first-child{text-align:left;min-width:380px}.financial-table td{border-top:1px solid var(--line);padding:9px 13px;text-align:right}.financial-table td:first-child{text-align:left}.financial-table td:first-child span,.financial-table td:first-child small{display:block}.financial-table input{width:150px;border:1px solid #cfddd8;border-radius:8px;padding:9px;text-align:right}.required-row td:first-child{border-left:4px solid var(--green)}.optional-row{background:#fbfcfc}.qual-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.qual-item{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}.checklist{display:grid;gap:14px;margin:22px 0}.checklist label{background:#f6faf8;padding:13px;border-radius:10px}.note{padding:15px;background:#e7f5ef;border-left:4px solid var(--green);border-radius:8px}.note.warn{background:#fff7df;border-color:#e4a11b;margin-top:20px}.success-hero{display:flex;align-items:center;gap:20px}.check{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#daf3e8;color:var(--green);font-size:32px}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}.download-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}.download-card:hover{border-color:var(--green)}.download-card span{color:var(--muted);font-size:13px}.download-card.disabled{opacity:.55}.ratio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ratio{border:1px solid var(--line);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px}.ratio span{font-size:12px;color:var(--muted)}.ratio strong{font-size:22px}.actions{display:flex;justify-content:flex-end;gap:10px}@media(max-width:900px){.feature-grid,.form-grid,.year-grid,.qual-grid,.download-grid,.ratio-grid{grid-template-columns:1fr 1fr}.dashboard-hero{padding:28px}.score-ring{display:none}.steps{overflow:auto;display:flex}.step{min-width:145px}.two-col{grid-template-columns:1fr}}@media(max-width:600px){.topbar nav a:not(:last-child){display:none}.container{padding:0 12px}.dashboard-hero h1{font-size:30px}.feature-grid,.form-grid,.year-grid,.qual-grid,.download-grid,.ratio-grid{grid-template-columns:1fr}.page-title{flex-direction:column}.financial-table th:first-child{min-width:250px}.financial-table input{width:110px}}

.ratio-scroll{max-height:none;margin-top:20px}.ratio-table{width:100%;border-collapse:collapse}.ratio-table th,.ratio-table td{padding:11px 12px;border:1px solid var(--line);text-align:right}.ratio-table th:first-child,.ratio-table td:first-child{text-align:left}.ratio-table thead th{background:#e8f2ee;position:sticky;top:0}.ratio-table tbody tr:nth-child(even){background:#fafcfb}

.balance-validation{display:flex;flex-direction:column;gap:6px;padding:15px;border-radius:10px;margin:18px 0}.balance-validation.ok{background:#e4f6ed;color:#075f43}.balance-validation.bad{background:#ffe9e9;color:#8c1d1d}.balance-validation span{font-size:13px}
.financial-card.optional-hidden .optional-row{display:none}.optional-toggle{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:8px;padding:8px 11px;font-weight:700;cursor:pointer}.optional-toggle:hover{background:#f8fafc}

.check-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #e5e7eb}.check-row:last-child{border-bottom:0}

/* v1.3: input-to-score guidance */
.impact-note{display:block;color:#305e52!important;background:#eff8f4;border-left:3px solid #6fb69f;border-radius:6px;padding:7px 9px;margin-top:7px;line-height:1.45;font-size:11px}
.impact-note b{color:var(--green)}
.direction-help{max-width:820px;background:#f6faf8;border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:10px 0 0;font-size:12px;color:#4f6961}
.financial-table td:first-child{vertical-align:top}
.financial-table td:first-child .impact-note{max-width:520px}
.qual-item .impact-note{margin-top:0}
@media(max-width:600px){.impact-note{font-size:10.5px}.financial-table th:first-child{min-width:310px}}

/* v1.4: multi-user management */
.alert:not(.error){background:#e1f4eb;color:#075f43;border:1px solid #b7dfcd}
.topbar nav{align-items:center}
.account-link{display:flex!important;flex-direction:column;gap:1px;line-height:1.1;padding:7px 10px;background:#eef6f2;border-radius:10px;max-width:190px}
.account-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.account-link small{font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-primary{background:#fff;color:var(--green)}
.hero-primary:hover{background:#e9f7f1}
.hero-secondary{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.admin-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px;align-items:end}
.form-submit button{min-height:45px}
.users-list{display:grid;gap:14px}
.user-card{border:1px solid var(--line);border-radius:15px;padding:18px;background:#fbfdfc;display:grid;grid-template-columns:minmax(260px,1fr) minmax(430px,1.4fr);gap:22px}
.user-summary{display:flex;flex-direction:column;gap:8px}
.user-summary>div:first-child{display:flex;flex-direction:column;gap:3px}
.user-summary strong{font-size:18px}
.user-summary span{color:var(--muted)}
.user-badges{display:flex!important;flex-direction:row!important;gap:7px!important;flex-wrap:wrap}
.role-badge,.status-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;width:max-content}
.role-badge.admin{background:#e5e7ff;color:#3730a3}.role-badge.operator{background:#e0f2fe;color:#075985}
.status-badge.active{background:#dcfce7;color:#166534}.status-badge.inactive{background:#fee2e2;color:#991b1b}.status-badge.self{background:#fef3c7;color:#92400e}
.user-tools{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.user-tools details{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px}
.user-tools summary{cursor:pointer;font-weight:750;color:var(--green)}
.inline-admin-form{display:grid;grid-template-columns:1fr 150px auto;gap:10px;align-items:end;padding-top:12px}
.inline-admin-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:650}
.inline-admin-form input,.inline-admin-form select{border:1px solid #cadbd4;border-radius:8px;padding:9px;background:#fff}
.inline-admin-form .checkbox-label{flex-direction:row;align-items:center;padding-bottom:11px}
.danger-button{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;width:100%}
.danger-button:hover{background:#fecaca}
@media(max-width:1000px){.admin-form-grid{grid-template-columns:1fr 1fr}.user-card{grid-template-columns:1fr}.inline-admin-form{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.topbar{height:auto;min-height:72px;padding:10px 14px;align-items:flex-start}.topbar nav{gap:8px;flex-wrap:wrap;justify-content:flex-end}.topbar nav>a{font-size:12px}.account-link{order:-1}.admin-form-grid,.inline-admin-form{grid-template-columns:1fr}.inline-admin-form .checkbox-label{padding-bottom:0}.user-card{padding:13px}.hero-actions .button{width:100%}}
@media(max-width:600px){.topbar nav a{display:flex!important}}
.field textarea{border:1px solid #cadbd4;border-radius:10px;padding:12px 13px;font-size:15px;background:#fff;font-family:inherit;resize:vertical}.supplementary-table td:first-child{border-left:4px solid #2f80ed}.supplementary-table input{background:#f8fbff}
/* =========================================================
   Site Footer
   ========================================================= */

.site-footer {
    margin-top: 48px;
    padding: 34px 24px;
    color: #e8eef7;
    background:
        radial-gradient(
            circle at top right,
            rgba(56, 182, 255, 0.16),
            transparent 36%
        ),
        linear-gradient(135deg, #0f172a 0%, #111827 55%, #172033 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.footer-information {
    flex: 1;
    min-width: 0;
}

.footer-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.footer-disclaimer {
    margin: 0 0 14px;
    color: #b8c4d6;
    font-size: 14px;
    line-height: 1.7;
}

.footer-copyright {
    margin: 0;
    color: #91a0b5;
    font-size: 13px;
    line-height: 1.6;
}

.footer-copyright a {
    color: #72c8ff;
    font-weight: 700;
    text-decoration: none;
}

.footer-copyright a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-help-text {
    margin: 7px 0 0;
    color: #91a0b5;
    font-size: 13px;
}

.footer-contact-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 10px;
}

.footer-contact-button {
    min-height: 58px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.footer-contact-button:hover {
    color: #ffffff;
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.whatsapp-button {
    background: linear-gradient(135deg, #25d366, #128c4a);
}

.messenger-button {
    background: linear-gradient(135deg, #00b2ff, #5b4cff);
}

.email-button {
    background: linear-gradient(135deg, #334155, #1e293b);
}

.footer-contact-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 10px;
}

.footer-contact-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-contact-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.footer-contact-content small {
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.footer-contact-content strong {
    margin-top: 3px;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .footer-container {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-contact-buttons {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .site-footer {
        padding: 28px 16px;
    }

    .footer-contact-buttons {
        grid-template-columns: 1fr;
    }

    .footer-contact-button {
        width: 100%;
    }
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: #7b8798;
    font-size: 12px;
    font-weight: 700;
}

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

.g_id_signin {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}


/* Download card: left 60% text, right 40% icon area */
.download-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease;
  /* allow children to shrink on small widths */
  min-height: 84px;
}

/* left column: 60% */
.download-card .dl-body {
  flex: 0 0 60%;   /* fixed base 60% */
  min-width: 0;    /* allow child to truncate/wrap correctly */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ensure title and subtitle are block-level so they stack */
.download-card .dl-body b { display: block; font-size: 16px; color: var(--ink); }
.download-card .dl-body .muted { display: block; color: var(--muted); font-size: 13px; }

/* right column: 40% — center the icon inside this area */
.download-card .dl-icon-area {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
}

/* the circular icon itself */
.dl-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

/* filled and outline variants */
.dl-icon-circle.filled { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(0,106,78,0.12); }
.dl-icon-circle.outline { background: transparent; color: var(--green); border: 1.5px solid rgba(0,155,114,0.12); }

/* hover/focus visuals */
.download-card:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 16px 36px rgba(6,80,59,0.06); }
.download-card:focus-within { outline: 3px solid rgba(0,155,114,0.10); outline-offset: 3px; }
.download-card:hover .dl-icon-circle { transform: translateY(-3px); }

/* disabled */
.download-card[aria-disabled="true"], .download-card.disabled { opacity: .56; pointer-events: none; filter: grayscale(.06); }

/* responsive: on small screens stack vertically (icon below text) */
@media (max-width: 700px) {
  .download-card { flex-direction: column; align-items: flex-start; min-height: auto; }
  .download-card .dl-body { flex: none; width: 100%; }
  .download-card .dl-icon-area { flex: none; width: 100%; justify-content: flex-end; padding-top: 8px; }
  .dl-icon-circle { width: 44px; height: 44px; }
}
/* Force row layout and proper 60% / 40% split for download cards */
.download-grid .download-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;       /* vertical center the icon area */
  gap: 16px;
  padding: 20px;
  min-height: 120px;         /* increase if you want taller cards */
  box-shadow: var(--shadow);
}

/* Left column: 60% — stack title + subtitle, align to top */
.download-grid .download-card .dl-body {
  flex: 0 0 60%;
  min-width: 0;              /* allow text wrapping / truncation */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* keep text at top of left column */
  gap: 8px;
}

/* Make sure title/subtitle are block elements */
.download-grid .download-card .dl-body b { display:block; margin:0; font-size:16px; }
.download-grid .download-card .dl-body .muted { display:block; color:var(--muted); font-size:13px; }

/* Right column: 40% — center the circular icon */
.download-grid .download-card .dl-icon-area {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
}

/* Icon size & hover */
.download-grid .download-card .dl-icon-circle { width:56px; height:56px; border-radius:50%; display:inline-grid; place-items:center; transition:transform .12s ease, box-shadow .12s ease; }
.download-grid .download-card:hover .dl-icon-circle { transform: translateY(-3px); }

/* Smaller screens: stack vertically (original mobile behavior) */
@media (max-width: 700px) {
  .download-grid .download-card {
    flex-direction: column !important;
    align-items: flex-start;
    min-height: auto;
  }
  .download-grid .download-card .dl-body { width:100%; flex:none; }
  .download-grid .download-card .dl-icon-area { width:100%; justify-content:flex-end; padding-top:10px; }
  .download-grid .download-card .dl-icon-circle { width:44px; height:44px; }
}

/* =========================================================
   v2.1: Unified report and compact training dataset loader
   Three-column desktop layout:
   1) label/help, 2) amount input with Lakh suffix, 3) action
========================================================= */

.demo-loader {
  padding: 0;
  overflow: hidden;
  border: 1px solid #b9d9ce;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(19, 68, 54, 0.07);
}

.demo-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px 20px;
  background:
    radial-gradient(circle at top right, rgba(0, 155, 114, 0.08), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7fbf9 100%);
}

.demo-report-title {
  min-width: 0;
}

.demo-report-title h1 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.2;
}

.demo-report-title p {
  margin: 0;
  color: #415d55;
  font-size: 14px;
  line-height: 1.6;
}

.demo-report-title p b {
  color: var(--ink);
}

.demo-cancel-button {
  flex: 0 0 auto;
  min-width: 92px;
}

.demo-section-divider {
  height: 1px;
  margin: 0 26px;
  background: linear-gradient(
    90deg,
    transparent,
    #cfe1da 8%,
    #cfe1da 92%,
    transparent
  );
}

.demo-loader-body {
  padding: 20px 26px 24px;
}

.demo-loader-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.demo-loader-head > div {
  min-width: 0;
}

.demo-eyebrow {
  margin: 0 0 5px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.demo-loader-head h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
}

.demo-loader-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Three-column amount loader */
.training-panel {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(220px, 0.85fr)
    minmax(300px, 1.25fr)
    minmax(220px, 240px);
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
  padding: 16px 18px;
  background: #f8fbfa;
  border: 1px solid #d5e4de;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(19, 68, 54, 0.04);
}

.training-copy,
.training-input,
.training-button {
  min-width: 0;
}

.training-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.field-title {
  margin: 0;
  color: var(--green);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.field-description {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.training-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.amount-box {
  position: relative;
  width: 100%;
}

.amount-box input {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 76px 0 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  background: #ffffff;
  border: 1px solid #bfd2cb;
  border-radius: 9px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(19, 68, 54, 0.03);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.amount-box input::placeholder {
  color: #92a39d;
}

.amount-box input:focus {
  border-color: var(--green);
  box-shadow:
    0 0 0 3px rgba(0, 106, 78, 0.1),
    inset 0 1px 2px rgba(19, 68, 54, 0.03);
}

.amount-unit {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 57px;
  padding: 6px 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  background: #e8f3ef;
  border-radius: 6px;
  transform: translateY(-50%);
  pointer-events: none;
}

.demo-example {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.training-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.load-demo-btn {
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(135deg, #00795a, #005f48);
  border: 1px solid #005f48;
  border-radius: 9px;
  box-shadow: 0 6px 15px rgba(0, 95, 72, 0.2);
  cursor: pointer;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.load-demo-btn span {
  display: inline;
  color: inherit;
}

.load-demo-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.load-demo-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #006c50, #004f3c);
  border-color: #004f3c;
  box-shadow: 0 8px 19px rgba(0, 79, 60, 0.25);
  transform: translateY(-1px);
}

.load-demo-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 9px rgba(0, 79, 60, 0.2);
}

.load-demo-btn:focus-visible {
  outline: 3px solid rgba(0, 155, 114, 0.22);
  outline-offset: 3px;
}

.demo-status {
  min-height: 42px;
  margin: 0 0 14px;
  padding: 11px 14px;
  color: var(--muted);
  font-size: 14px;
  background: #eef3f1;
  border-radius: 10px;
}

.demo-status:empty {
  display: none;
}

.demo-status.loaded {
  color: #075f43;
  font-weight: 650;
  background: #daf3e8;
}

.demo-warning {
  margin: 0;
}

.demo-generated-warning {
  margin: 0 0 22px;
}

.demo-badge {
  margin-left: 5px;
  padding: 3px 7px;
  color: #8a5900;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.7px;
  vertical-align: middle;
  background: #fff0c9;
  border-radius: 999px;
}

@media (max-width: 980px) {
  .training-panel {
    grid-template-columns: minmax(190px, 0.8fr) minmax(260px, 1.2fr) 210px;
    gap: 14px;
  }

  .load-demo-btn {
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .demo-report-head,
  .demo-loader-head {
    align-items: stretch;
    flex-direction: column;
  }

  .demo-cancel-button,
  .demo-loader-head .button {
    width: 100%;
  }

  .training-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .training-button {
    justify-content: stretch;
  }

  .load-demo-btn {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .demo-report-head {
    padding: 19px 17px 17px;
  }

  .demo-report-title h1 {
    font-size: 24px;
  }

  .demo-section-divider {
    margin: 0 17px;
  }

  .demo-loader-body {
    padding: 18px 17px 20px;
  }

  .training-panel {
    padding: 14px;
  }
}