:root {
  color-scheme: light;
  --green-950: #102d20;
  --green-900: #18452f;
  --green-700: #24724b;
  --green-600: #2d8b5d;
  --green-100: #dceee4;
  --green-50: #eef7f2;
  --ink: #17231b;
  --muted: #6f7972;
  --line: #e3e8e4;
  --canvas: #f5f6f3;
  --white: #ffffff;
  --amber: #bd7a13;
  --red: #b94242;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 7px; color: var(--green-600); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.brand-lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; letter-spacing: .16em; }
.brand-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: white; background: var(--green-600); font-size: 20px; font-weight: 900; box-shadow: 0 8px 18px rgba(45, 139, 93, .22); }

.auth-view { display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(420px, .9fr); min-height: 100vh; }
.auth-brand { display: flex; flex-direction: column; justify-content: center; padding: clamp(60px, 9vw, 150px); color: white; background: var(--green-950); position: relative; overflow: hidden; }
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.auth-brand::before { width: 540px; height: 540px; right: -290px; top: -180px; }
.auth-brand::after { width: 360px; height: 360px; right: -190px; bottom: -150px; }
.auth-brand .brand-lockup { margin-bottom: clamp(80px, 13vh, 150px); }
.auth-brand .brand-symbol { background: white; color: var(--green-900); }
.auth-brand .eyebrow { color: #9ed6b7; }
.auth-brand h1 { margin: 0; max-width: 650px; font-size: clamp(44px, 6vw, 82px); line-height: .98; letter-spacing: -.055em; }
.auth-brand h1 em { color: #7ed3a3; font-style: normal; }
.auth-lead { max-width: 560px; margin: 26px 0; color: #bbd0c3; font-size: 18px; line-height: 1.65; }
.auth-points { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; color: #d9e6dd; }
.auth-points li { display: flex; gap: 12px; align-items: center; }
.auth-points span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--green-950); background: #8ad5aa; font-size: 12px; font-weight: 900; }
.auth-panel { display: grid; place-items: center; padding: 40px; background: #f4f1e9; }
.auth-card { width: min(430px, 100%); padding: 42px; border: 1px solid rgba(20, 55, 37, .08); border-radius: 26px; background: white; box-shadow: 0 24px 70px rgba(22, 55, 37, .11); }
.auth-card h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.auth-card > .muted { margin: 10px 0 30px; line-height: 1.5; }
.mobile-brand { display: none; margin-bottom: 28px; }
label { display: grid; gap: 7px; color: #48534c; font-size: 13px; font-weight: 700; }
label + label { margin-top: 17px; }
input, select, textarea { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid #d9dfda; border-radius: 11px; color: var(--ink); background: white; outline: none; transition: border .15s, box-shadow .15s; }
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(45, 139, 93, .11); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 11px; color: var(--green-900); background: var(--green-100); font-weight: 800; cursor: pointer; text-decoration: none; }
.button:hover { filter: brightness(.97); }
.button:disabled { opacity: .55; cursor: wait; }
.button.primary { color: white; background: var(--green-600); box-shadow: 0 8px 18px rgba(45,139,93,.18); }
.button.danger { color: var(--red); background: #fff0f0; }
.button.ghost { border: 1px solid var(--line); background: white; }
.button.wide { width: 100%; margin-top: 26px; }
.form-message { min-height: 20px; margin: 14px 0 0; color: var(--red); font-size: 13px; }

.app-view { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100vh; padding: 25px 18px 18px; color: #dce9df; background: var(--green-950); }
.sidebar-brand { padding: 0 10px; color: white; }
.sidebar-brand small { margin-left: -5px; color: #92ac9a; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.sidebar nav { display: grid; gap: 4px; margin-top: 46px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 13px; border-radius: 11px; color: #aebfb3; text-decoration: none; font-size: 14px; font-weight: 650; }
.sidebar nav a span { width: 20px; color: #83aa91; font-size: 18px; text-align: center; }
.sidebar nav a:hover, .sidebar nav a.active { color: white; background: rgba(255,255,255,.085); }
.sidebar nav a.active span { color: #8ee0b0; }
.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); }
.user-button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px; border: 0; border-radius: 12px; color: white; background: transparent; text-align: left; cursor: pointer; }
.user-button:hover { background: rgba(255,255,255,.06); }
.user-button > span:last-child { display: grid; min-width: 0; }
.user-button strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.user-button small { margin-top: 2px; color: #89a092; }
.avatar { display: grid; flex: 0 0 34px; place-items: center; height: 34px; border-radius: 10px; color: var(--green-950); background: #91d8ae; font-size: 11px; font-weight: 900; }
.workspace { min-width: 0; background: var(--canvas); }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 91px; padding: 18px clamp(24px, 4vw, 56px); border-bottom: 1px solid var(--line); background: rgba(250,251,248,.93); backdrop-filter: blur(16px); }
.topbar h1 { margin: 0; font-size: 26px; letter-spacing: -.035em; }
.topbar .eyebrow { margin-bottom: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.date-label { color: var(--muted); font-size: 13px; }
.menu-button { display: none; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
.page { width: min(1500px, 100%); margin: 0 auto; padding: 34px clamp(24px, 4vw, 56px) 70px; outline: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-head h2 { margin: 0; font-size: 26px; letter-spacing: -.035em; }
.page-head p { margin: 7px 0 0; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 13px; }
.metric { min-height: 130px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.metric .metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--green-700); background: var(--green-50); font-weight: 900; }
.metric strong { display: block; margin-top: 16px; font-size: 28px; letter-spacing: -.04em; }
.metric small { color: var(--muted); }
.metric.attention .metric-icon { color: var(--amber); background: #fff5df; }
.metric.danger .metric-icon { color: var(--red); background: #fff0f0; }
.content-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 18px; }
.card { border: 1px solid var(--line); border-radius: 17px; background: white; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 15px 19px; border-bottom: 1px solid var(--line); }
.card-head h3 { margin: 0; font-size: 15px; }
.card-head a, .link-button { border: 0; color: var(--green-700); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: none; }
.empty { padding: 38px 20px; color: var(--muted); text-align: center; }
.list { display: grid; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 68px; padding: 12px 19px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.list-row small { display: block; margin-top: 4px; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; color: var(--green-700); background: var(--green-50); font-size: 11px; font-weight: 800; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.pending, .status.high, .status.new { color: var(--amber); background: #fff5df; }
.status.inactive, .status.rejected, .status.cancelled { color: var(--red); background: #fff0f0; }
.status.done, .status.verified, .status.converted { color: var(--green-700); }
.toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 180px 180px auto; gap: 10px; margin-bottom: 15px; }
.toolbar input, .toolbar select { min-height: 42px; }
.table-wrap { border: 1px solid var(--line); border-radius: 17px; background: white; overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th { padding: 12px 16px; color: var(--muted); background: #fafbf9; font-size: 10px; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 14px 16px; border-top: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #fbfdfb; }
.person { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.person .avatar { color: var(--green-700); background: var(--green-50); }
.person strong { display: block; }
.person small { display: block; max-width: 240px; margin-top: 3px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.progress { width: 74px; height: 6px; border-radius: 99px; background: #edf0ed; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--green-600); }
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; color: var(--muted); font-size: 12px; }
.pagination .button { min-height: 36px; padding: 0 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.stack { display: grid; gap: 16px; }
.inline-form { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: end; gap: 10px; padding: 18px; border-top: 1px solid var(--line); background: #fafbf9; }
.file-drop { padding: 28px; border: 1px dashed #bdc9c0; border-radius: 14px; background: #fbfdfb; text-align: center; }
.file-drop input { margin-top: 14px; border: 0; }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.report-card { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.report-card h3 { margin: 0 0 18px; font-size: 14px; }
.report-line { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.report-line:last-child { border-bottom: 0; }
.report-line strong { color: var(--ink); }
.notice { padding: 14px 16px; border: 1px solid #d8e7dd; border-radius: 12px; color: #315f46; background: var(--green-50); font-size: 13px; line-height: 1.5; }
.notice.warning { border-color: #f0d9ad; color: #7f571b; background: #fff7e8; }
.modal { width: min(800px, calc(100% - 30px)); max-height: calc(100vh - 36px); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 34px 90px rgba(15, 36, 24, .28); }
.modal::backdrop { background: rgba(11, 27, 18, .55); backdrop-filter: blur(3px); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); background: white; }
.modal-head h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.modal-body { padding: 24px; }
.modal-close { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }
.tabs button.active { border-color: var(--green-600); color: var(--green-700); font-weight: 800; }
.toast-region { position: fixed; z-index: 100; top: 18px; right: 18px; display: grid; gap: 9px; width: min(370px, calc(100% - 36px)); }
.toast { padding: 13px 15px; border-radius: 12px; color: white; background: var(--green-900); box-shadow: 0 14px 32px rgba(14,38,24,.25); font-size: 13px; animation: toast-in .18s ease-out; }
.toast.error { background: #8f3232; }
.skeleton { min-height: 160px; border-radius: 17px; background: linear-gradient(90deg,#eef1ee 25%,#f8f9f7 45%,#eef1ee 65%); background-size: 220% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1180px) { .metrics { grid-template-columns: repeat(3, 1fr); } .report-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .auth-view { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .mobile-brand { display: flex; }
  .app-view { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -260px; transition: left .2s; width: 244px; box-shadow: 18px 0 40px rgba(10,30,18,.2); }
  .app-view.menu-open .sidebar { left: 0; }
  .menu-button { display: block; }
  .topbar { justify-content: flex-start; gap: 16px; }
  .topbar-actions { margin-left: auto; }
  .date-label { display: none; }
  .content-grid { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .report-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .auth-panel { padding: 20px; }
  .auth-card { padding: 28px 22px; }
  .topbar { min-height: 76px; padding: 13px 16px; }
  .topbar .button { width: 42px; padding: 0; font-size: 0; }
  .topbar .button::first-letter { font-size: 18px; }
  .page { padding: 22px 16px 60px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 115px; }
  .toolbar { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .inline-form { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; flex-direction: column; }
}