/* ESG & CO₂ Plattform — Demo
   Design system faithful to shadcn/ui tokens (neutral palette, 0.5rem radius,
   1px borders, tight tracking). No build step: plain CSS variables. */

:root{
  --background:0 0% 100%;
  --foreground:240 10% 3.9%;
  --card:0 0% 100%;
  --card-foreground:240 10% 3.9%;
  --popover:0 0% 100%;
  --popover-foreground:240 10% 3.9%;
  --primary:240 5.9% 10%;
  --primary-foreground:0 0% 98%;
  --secondary:240 4.8% 95.9%;
  --secondary-foreground:240 5.9% 10%;
  --muted:240 4.8% 95.9%;
  --muted-foreground:240 3.8% 46.1%;
  --accent:240 4.8% 95.9%;
  --accent-foreground:240 5.9% 10%;
  --destructive:0 72% 51%;
  --destructive-foreground:0 0% 98%;
  --success:142 71% 45%;
  --warning:38 92% 50%;
  --info:221 83% 53%;
  --border:240 5.9% 90%;
  --input:240 5.9% 90%;
  --ring:240 10% 3.9%;
  --radius:0.5rem;
}
[data-theme="dark"]{
  --background:240 10% 3.9%;
  --foreground:0 0% 98%;
  --card:240 10% 3.9%;
  --card-foreground:0 0% 98%;
  --popover:240 10% 3.9%;
  --popover-foreground:0 0% 98%;
  --primary:0 0% 98%;
  --primary-foreground:240 5.9% 10%;
  --secondary:240 3.7% 15.9%;
  --secondary-foreground:0 0% 98%;
  --muted:240 3.7% 15.9%;
  --muted-foreground:240 5% 64.9%;
  --accent:240 3.7% 15.9%;
  --accent-foreground:0 0% 98%;
  --destructive:0 62.8% 50%;
  --destructive-foreground:0 0% 98%;
  --success:142 69% 58%;
  --warning:38 92% 60%;
  --info:217 91% 65%;
  --border:240 3.7% 15.9%;
  --input:240 3.7% 15.9%;
  --ring:240 4.9% 83.9%;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:hsl(var(--background));color:hsl(var(--foreground));
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04","cv11";
}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-ligatures:none}
::selection{background:hsl(var(--foreground));color:hsl(var(--background))}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 24px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
.grow{flex:1}
.wrapf{flex-wrap:wrap}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.025em;line-height:1.2}
h1{font-size:30px}
h2{font-size:22px}
h3{font-size:16px}
.h-xl{font-size:clamp(30px,4.5vw,44px);font-weight:600;letter-spacing:-0.035em;line-height:1.1}
.lead{font-size:16px;color:hsl(var(--muted-foreground));line-height:1.65}
.muted{color:hsl(var(--muted-foreground))}
.small{font-size:13px}
.tiny{font-size:12px}
.micro{font-size:11px;letter-spacing:.04em}
.label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.big-num{font-size:clamp(34px,5vw,52px);font-weight:600;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:hsl(var(--background)/0.85);backdrop-filter:blur(8px);
  border-bottom:1px solid hsl(var(--border));
}
.top-in{display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:600;letter-spacing:-0.02em}
.brand-mark{
  width:26px;height:26px;border-radius:6px;flex:none;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:-0.03em;
}

/* ---------- card ---------- */
.card{
  background:hsl(var(--card));color:hsl(var(--card-foreground));
  border:1px solid hsl(var(--border));border-radius:var(--radius);
}
.card-pad{padding:20px}
.card-head{padding:18px 20px;border-bottom:1px solid hsl(var(--border))}
.card-title{font-size:15px;font-weight:600;letter-spacing:-0.015em}
.card-desc{font-size:13px;color:hsl(var(--muted-foreground));margin-top:3px}

/* ---------- button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 15px;border-radius:calc(var(--radius) - 2px);
  font-size:13.5px;font-weight:500;font-family:inherit;letter-spacing:-0.005em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s,opacity .15s;
}
.btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-primary:hover:not(:disabled){background:hsl(var(--primary)/0.9)}
.btn-outline{border-color:hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground))}
.btn-outline:hover:not(:disabled){background:hsl(var(--accent))}
.btn-ghost{background:transparent;color:hsl(var(--foreground))}
.btn-ghost:hover:not(:disabled){background:hsl(var(--accent))}
.btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.btn-secondary:hover:not(:disabled){background:hsl(var(--secondary)/0.8)}
.btn-sm{height:30px;padding:0 11px;font-size:12.5px}
.btn-lg{height:42px;padding:0 20px;font-size:14.5px}
.btn-icon{width:36px;padding:0}

/* ---------- badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:9999px;font-size:11.5px;font-weight:500;
  border:1px solid transparent;white-space:nowrap;line-height:1.5;
}
.badge-default{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.badge-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.badge-outline{border-color:hsl(var(--border));color:hsl(var(--foreground))}
.badge-success{background:hsl(var(--success)/0.12);color:hsl(var(--success));border-color:hsl(var(--success)/0.25)}
.badge-warning{background:hsl(var(--warning)/0.14);color:hsl(var(--warning));border-color:hsl(var(--warning)/0.3)}
.badge-destructive{background:hsl(var(--destructive)/0.12);color:hsl(var(--destructive));border-color:hsl(var(--destructive)/0.25)}
.badge-info{background:hsl(var(--info)/0.12);color:hsl(var(--info));border-color:hsl(var(--info)/0.25)}
.dot{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}

/* ---------- separator / misc ---------- */
.sep{height:1px;background:hsl(var(--border));border:0;width:100%}
.sep-v{width:1px;background:hsl(var(--border));align-self:stretch}
kbd{
  font-family:ui-monospace,monospace;font-size:11px;padding:1px 5px;
  border:1px solid hsl(var(--border));border-bottom-width:2px;border-radius:4px;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));
}

/* ---------- table ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{
  text-align:left;font-weight:500;color:hsl(var(--muted-foreground));
  font-size:12px;padding:0 12px 10px;border-bottom:1px solid hsl(var(--border));white-space:nowrap;
}
table.tbl td{padding:11px 12px;border-bottom:1px solid hsl(var(--border));vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr.hoverable:hover td{background:hsl(var(--muted)/0.5)}
td.r,th.r{text-align:right}

/* ---------- progress ---------- */
.progress{height:6px;background:hsl(var(--secondary));border-radius:9999px;overflow:hidden}
.progress > i{display:block;height:100%;background:hsl(var(--primary));border-radius:9999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.progress.warn > i{background:hsl(var(--warning))}
.progress.dest > i{background:hsl(var(--destructive))}

/* ---------- steps ---------- */
.steps{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{display:flex;align-items:center;gap:8px;padding:6px 0;white-space:nowrap;flex:none}
.step + .step::before{content:"";width:22px;height:1px;background:hsl(var(--border));margin:0 10px;flex:none}
.step-n{
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:11px;font-weight:600;border:1px solid hsl(var(--border));
  color:hsl(var(--muted-foreground));background:hsl(var(--background));
}
.step-t{font-size:12.5px;color:hsl(var(--muted-foreground))}
.step.active .step-n{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}
.step.active .step-t{color:hsl(var(--foreground));font-weight:500}
.step.done .step-n{background:hsl(var(--success)/0.15);border-color:hsl(var(--success)/0.4);color:hsl(var(--success))}

/* ---------- dropzone ---------- */
.drop{
  border:1.5px dashed hsl(var(--border));border-radius:var(--radius);
  padding:44px 24px;text-align:center;cursor:pointer;
  transition:border-color .2s,background-color .2s;
  background:hsl(var(--muted)/0.3);
}
.drop:hover,.drop.over{border-color:hsl(var(--ring)/0.5);background:hsl(var(--accent))}
.drop.over{border-style:solid}

/* ---------- code / xml viewer ---------- */
.code{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;line-height:1.75;
  background:hsl(var(--muted)/0.5);border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 2px);padding:14px 16px;
  overflow:auto;white-space:pre;tab-size:2;max-height:420px;
}
.code .tag{color:hsl(var(--muted-foreground))}
.code .hl{
  background:hsl(var(--warning)/0.22);border-radius:3px;
  box-shadow:0 0 0 1px hsl(var(--warning)/0.45);
  padding:1px 2px;font-weight:600;color:hsl(var(--foreground));
}
.code .hl-strong{
  background:hsl(var(--success)/0.2);box-shadow:0 0 0 1px hsl(var(--success)/0.5);
  border-radius:3px;padding:1px 2px;font-weight:600;color:hsl(var(--foreground));
}

/* ---------- KPI ---------- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.kpi .card-pad{padding:16px 18px}
.kpi .v{font-size:24px;font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin-top:6px}
.kpi .d{font-size:12px;color:hsl(var(--muted-foreground));margin-top:3px}

/* ---------- compare (the money screen) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.compare{grid-template-columns:1fr}}
.compare .card{position:relative;overflow:hidden}
.compare .card.ours{border-color:hsl(var(--success)/0.45)}
.compare .card.ours::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:hsl(var(--success));
}
.compare .card.theirs::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:hsl(var(--muted-foreground)/0.4);
}
.calc-line{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:10px 12px;border-radius:6px;background:hsl(var(--muted)/0.6);
}

/* ---------- ledger ---------- */
.ledger-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:12px 0;border-bottom:1px solid hsl(var(--border));
}
.ledger-row:last-child{border-bottom:0}
.hash{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  color:hsl(var(--muted-foreground));word-break:break-all;
}

/* ---------- animation ---------- */
.fade-in{animation:fade .4s cubic-bezier(.16,1,.3,1) both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pulse{animation:pl 1.6s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.45}}
.spin{animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .fade-in,.pulse,.spin{animation:none}
  .progress > i{transition:none}
}

/* ---------- utility ---------- */
.hidden{display:none !important}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}