/* =====================================================================
   Plastex Kalkulator — Design System
   ===================================================================== */

:root {
  /* Plastex Brand — olive/lime green derived from logo (#9EAB05) */
  --brand-50:  #FAFCEB;
  --brand-100: #F2F6CC;
  --brand-200: #E5EE9A;
  --brand-300: #D2E058;
  --brand-400: #B9CC1F;
  --brand-500: #9EAB05;   /* logo green */
  --brand-600: #889505;
  --brand-700: #6E7806;
  --brand-800: #555B0C;
  --brand-900: #3F4309;

  /* Accent — Plastex steel grey from logo (#636B70) */
  --accent-50:  #F2F4F5;
  --accent-100: #E1E5E7;
  --accent-200: #C4CACE;
  --accent-300: #9AA3A8;
  --accent-400: #7A8389;
  --accent-500: #636B70;   /* logo grey */
  --accent-600: #4F575C;
  --accent-700: #3F464A;
  --accent-800: #2F3438;
  --accent-900: #1F2326;

  /* Slate (neutral) */
  --slate-50:  #F7F8FA;
  --slate-100: #EDEFF2;
  --slate-200: #DDE0E5;
  --slate-300: #C2C7CD;
  --slate-400: #8E959D;
  --slate-500: #636B70;
  --slate-600: #4B5258;
  --slate-700: #363B40;
  --slate-800: #23272B;
  --slate-900: #14171A;

  /* Semantic */
  --success-50:  #ECFDF5;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;
  --warning-50:  #FFFBEB;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --danger-50:   #FEF2F2;
  --danger-500:  #EF4444;
  --danger-600:  #DC2626;
  --danger-700:  #B91C1C;

  /* Surfaces */
  --bg:           #F6F7F4;
  --bg-radial:    radial-gradient(1200px 600px at 0% -10%, #F2F6CC 0%, transparent 55%),
                  radial-gradient(900px  500px at 100% -10%, #E1E5E7 0%, transparent 55%),
                  #F6F7F4;
  --surface:      #FFFFFF;
  --surface-alt:  #F7F8FA;
  --border:       #E4E7EA;
  --border-strong:#CFD3D8;
  --text:         #14171A;
  --text-muted:   #4F575C;
  --text-subtle:  #8E959D;

  /* Effects */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow:     0 4px 14px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .06);
  --shadow-xl:  0 24px 60px rgba(15, 23, 42, .18);
  --ring:       0 0 0 4px rgba(158, 171, 5, .22);
  --ring-danger:0 0 0 4px rgba(239, 68, 68, .15);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t:      180ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-radial);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0; }
small, .small { font-size: .8125rem; }
.mute   { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.num    { font-variant-numeric: tabular-nums; text-align: right; }

/* =================== Layout =================== */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.app-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: .65rem;
  color: var(--text); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
  box-shadow: 0 4px 14px rgba(158, 171, 5, .35);
}
.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}
.brand-divider {
  display: inline-block;
  width: 1px; height: 24px;
  background: var(--border-strong);
  margin: 0 .25rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; gap: 2px; }
.brand-name  { font-weight: 600; font-size: .92rem; color: var(--text); letter-spacing: -.005em; }
.brand-sub   { font-size: .68rem; color: var(--text-muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 600px) {
  .brand-divider, .brand-text .brand-sub { display: none; }
  .brand-text { display: none; }
}

.app-nav { display: flex; align-items: center; gap: .35rem; }
.app-nav a { color: var(--text-muted); padding: .5rem .85rem; border-radius: 8px;
             font-size: .88rem; font-weight: 500; text-decoration: none; transition: all var(--t-fast); }
.app-nav a:hover { background: var(--slate-100); color: var(--text); }
.app-nav a.active { background: var(--brand-50); color: var(--brand-800); font-weight: 600; }

.user-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .25rem .65rem .25rem .3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem; color: var(--text-muted); font-weight: 500;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 2px 6px rgba(158, 171, 5, .3);
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
  width: 100%;
}

/* =================== Hero =================== */

.hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.hero h1 { font-size: 2.05rem; }
.hero .lede { color: var(--text-muted); margin-top: .35rem; font-size: 1rem; }
.kbd {
  display: inline-block;
  padding: .1rem .4rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .75rem;
  background: #fff;
  color: var(--text-muted);
}

/* =================== Pipeline (step indicator) =================== */

.pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .6rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 800px) { .pipeline { grid-template-columns: 1fr 1fr; } }

.step {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: transparent;
  transition: background var(--t);
}
.step .dot {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--slate-100);
  color: var(--text-muted);
  font-weight: 600; font-size: .8rem;
  border: 1px solid var(--border);
  transition: all var(--t);
}
.step .label { font-size: .82rem; font-weight: 500; color: var(--text-muted); }
.step.active {
  background: var(--brand-50);
}
.step.active .dot {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(158, 171, 5, .4);
  animation: pulse-brand 2s ease-in-out infinite;
}
.step.active .label { color: var(--brand-800); font-weight: 600; }

@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 4px 12px rgba(158, 171, 5, .4); }
  50%      { box-shadow: 0 4px 12px rgba(158, 171, 5, .6), 0 0 0 6px rgba(158, 171, 5, .12); }
}
.step.done .dot {
  background: var(--success-500); color: #fff; border-color: transparent;
}
.step.done .label { color: var(--success-700); }

/* =================== Cards =================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow var(--t);
}
.card:hover { box-shadow: var(--shadow); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-head h2 { display: flex; align-items: center; gap: .65rem; }
.card-head .desc { color: var(--text-muted); font-size: .88rem; margin-top: .15rem; }

.card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
  color: var(--brand-800);
  flex: 0 0 38px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.card-icon svg { width: 19px; height: 19px; }
.card-icon.icon-grey   { background: linear-gradient(135deg, var(--accent-100), var(--accent-200)); color: var(--accent-700); }
.card-icon.icon-orange { background: linear-gradient(135deg, var(--accent-100), var(--accent-200)); color: var(--accent-700); }
.card-icon.icon-green  { background: linear-gradient(135deg, var(--success-50), #BBF7D0); color: var(--success-700); }
.card-icon.icon-slate  { background: linear-gradient(135deg, var(--slate-100), var(--slate-200)); color: var(--slate-700); }
.card-icon.icon-warn   { background: linear-gradient(135deg, var(--warning-50), #FDE68A); color: var(--warning-600); }

/* =================== Drop zone =================== */

.dropzone {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, var(--surface-alt), #fff);
  cursor: pointer;
  transition: all var(--t);
}
.dropzone:hover { border-color: var(--brand-500); background: linear-gradient(180deg, var(--brand-50), #fff); }
.dropzone.drag { border-color: var(--brand-600); background: var(--brand-50); transform: translateY(-1px); box-shadow: var(--ring); }
.dropzone .icon-cloud {
  width: 60px; height: 60px; margin: 0 auto .85rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
  color: var(--brand-700);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(158, 171, 5, .22), inset 0 1px 0 rgba(255,255,255,.5);
}
.dropzone .icon-cloud svg { width: 26px; height: 26px; }
.dropzone .ttl { font-weight: 600; font-size: 1.02rem; margin-bottom: .15rem; }
.dropzone .sub { color: var(--text-muted); font-size: .87rem; }
.dropzone .types {
  display: inline-flex; gap: .25rem; margin-top: .75rem; flex-wrap: wrap; justify-content: center;
}

.dropzone-sm {
  padding: 1.25rem 1rem;
}
.dropzone-sm .icon-cloud {
  width: 42px; height: 42px;
  margin-bottom: .5rem;
  box-shadow: 0 2px 8px rgba(158, 171, 5, .2);
}

/* =================== Excel flow (3-step download/edit/upload) =================== */

.excel-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.excel-step {
  display: flex; gap: 1rem;
  padding: 1rem 0;
  position: relative;
}
.excel-step:not(:last-child)::after {
  content: ""; position: absolute;
  left: 17px; top: 42px; bottom: 0;
  width: 2px;
  background: var(--border-strong);
}
.excel-step.done:not(:last-child)::after,
.excel-step.active:not(:last-child)::after {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-300));
}
.excel-step-num {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  color: var(--text-muted);
  display: grid; place-items: center;
  font-weight: 700; font-size: .92rem;
  z-index: 1;
  transition: all var(--t);
}
.excel-step.active .excel-step-num {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(158, 171, 5, .35);
  animation: pulse-brand 2s ease-in-out infinite;
}
.excel-step.done .excel-step-num {
  background: var(--success-500);
  color: transparent;
  border-color: transparent;
  position: relative;
}
.excel-step.done .excel-step-num::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.excel-step-body {
  flex: 1;
  padding-top: .35rem;
}
.excel-step-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: .2rem;
}
.excel-step.active .excel-step-title { color: var(--brand-800); }
.excel-step.done .excel-step-title { color: var(--success-700); }
.excel-step-desc {
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.55;
}
.excel-step.done .excel-step-desc { color: var(--text-subtle); }
.chip {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--text-muted);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* =================== Buttons =================== */

.btn {
  display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
  background: linear-gradient(180deg, var(--brand-600), var(--brand-800));
  color: #fff;
  padding: .55rem 1.05rem;
  border-radius: 10px;
  border: 1px solid var(--brand-800);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  transition: all var(--t-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(158, 171, 5, .35), inset 0 1px 0 rgba(255, 255, 255, .18); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { width: 16px; height: 16px; }

.btn-sec {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-sec:hover { background: var(--slate-50); color: var(--text); box-shadow: var(--shadow-sm); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover { background: var(--slate-100); color: var(--text); box-shadow: none; }

.btn-sm { padding: .35rem .7rem; font-size: .82rem; border-radius: 8px; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1rem; border-radius: 12px; }

/* =================== Grids / stats =================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}
.grid-2  { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .95rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
  transition: all var(--t);
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.stat-label {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.stat-val {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: .78rem; color: var(--text-subtle); margin-top: .15rem; }

.stat.accent {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px rgba(158, 171, 5, .3);
  position: relative; overflow: hidden;
}
.stat.accent::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.2), transparent 50%);
  pointer-events: none;
}
.stat.accent > * { position: relative; z-index: 1; }
.stat.accent .stat-label, .stat.accent .stat-sub { color: rgba(255, 255, 255, .75); }
.stat.accent .stat-val { color: #fff; }

.stat.dark {
  background: linear-gradient(135deg, var(--accent-700), var(--accent-900));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px rgba(31, 35, 38, .25);
}
.stat.dark .stat-label, .stat.dark .stat-sub { color: rgba(255, 255, 255, .65); }
.stat.dark .stat-val { color: #fff; }

.stat.success {
  background: linear-gradient(135deg, var(--success-500), var(--success-700));
  border-color: transparent; color: #fff;
}
.stat.success .stat-label, .stat.success .stat-sub { color: rgba(255, 255, 255, .8); }
.stat.success .stat-val { color: #fff; }

/* =================== Tables =================== */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
table.t {
  width: 100%; border-collapse: collapse;
  font-size: .88rem;
}
table.t th, table.t td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
table.t thead th {
  background: var(--surface-alt);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover { background: var(--slate-50); }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =================== Misc =================== */

.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .02em;
}
.badge-ok    { background: var(--success-50); color: var(--success-700); }
.badge-warn  { background: var(--warning-50); color: var(--warning-600); }
.badge-info  { background: var(--brand-50); color: var(--brand-700); }
.badge-mute  { background: var(--slate-100); color: var(--slate-600); }

.divider { height: 1px; background: var(--border); margin: 1rem 0; }

.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2.5px solid var(--brand-100);
  border-top-color: var(--brand-600);
  border-radius: 50%;
  vertical-align: -3px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.err {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid #FCA5A5;
  padding: .75rem .9rem;
  border-radius: 10px;
  font-size: .88rem;
}
.success-banner {
  display: flex; gap: .65rem; align-items: center;
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid #A7F3D0;
  padding: .65rem .9rem;
  border-radius: 10px;
  font-size: .9rem;
}

pre.code {
  background: var(--slate-900);
  color: #E2E8F0;
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.55;
  max-height: 360px;
}

label { display: block; font-size: .82rem; color: var(--text-muted); margin: 0 0 .35rem; font-weight: 500; }

input[type="text"], input[type="password"], input[type="email"], textarea, select {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font: inherit; font-size: .95rem;
  background: #fff;
  color: var(--text);
  transition: all var(--t-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}

details { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem; }
details summary { cursor: pointer; font-weight: 500; color: var(--text-muted); user-select: none; }
details[open] summary { margin-bottom: .75rem; }

.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li {
  padding: .85rem .25rem;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
}
.file-list li:last-child { border-bottom: 0; }
.file-list .fname { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.file-list .ficon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--success-50); color: var(--success-600);
  display: grid; place-items: center; flex: 0 0 36px;
}
.file-list .fname strong { display: block; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50ch; }
.file-list .fname .meta { font-size: .78rem; color: var(--text-muted); }

/* =================== Two col responsive =================== */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* =================== Footer =================== */

.app-foot {
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .82rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* =================== Helpers =================== */

.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.items-c   { align-items: center; }
.justify-b { justify-content: space-between; }
.gap-1     { gap: .5rem; }
.gap-2     { gap: .85rem; }
.mt-1      { margin-top: .5rem; }
.mt-2      { margin-top: 1rem; }
.mt-3      { margin-top: 1.5rem; }
.mb-1      { margin-bottom: .5rem; }
.hidden    { display: none !important; }

/* =================== Login (full-screen) =================== */

.auth-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--brand-200) 0%, transparent 55%),
    radial-gradient(800px 500px at 100% 110%, var(--accent-200) 0%, transparent 55%),
    radial-gradient(600px 400px at 50% 50%, rgba(158, 171, 5, .04) 0%, transparent 60%),
    #FAFBF6;
  position: relative;
}
.auth-shell::before {
  content: ""; position: fixed; inset: 0;
  background-image: radial-gradient(rgba(99, 107, 112, .08) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}
.auth-shell > * { position: relative; z-index: 1; }
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-xl);
}
.auth-card .brand-mark { width: 48px; height: 48px; font-size: 1.2rem; margin: 0 auto .9rem; }
.auth-logo {
  display: block;
  height: 50px; width: auto;
  margin: 0 auto 1rem;
}
.auth-card h1 { text-align: center; font-size: 1.45rem; letter-spacing: -.015em; }
.auth-card .lede { text-align: center; color: var(--text-muted); font-size: .88rem; margin-top: .35rem; margin-bottom: 1.75rem; }
.auth-foot {
  text-align: center; color: var(--text-subtle);
  font-size: .72rem; margin-top: 1.5rem;
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.field { margin-bottom: .9rem; }

/* =================== Bars / chart =================== */

.daily-chart {
  display: flex; gap: .35rem; align-items: flex-end;
  height: 140px; padding: 1rem 0 0;
}
.daily-bar {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font-size: .7rem; color: var(--text-muted);
}
.daily-bar .bar {
  width: 100%; max-width: 30px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  transition: all var(--t);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.daily-bar:hover .bar { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(158, 171, 5, .25); }

.hbar {
  display: inline-block;
  height: 7px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: 4px;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

/* =================== Toast / status =================== */

.status-line {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; color: var(--text-muted);
}