/* ============================================================
   NEXT Bedrijfsartsen — Rekentools  v6
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Play:wght@400;700&display=swap');

/* ── 1. TOKENS ──────────────────────────────────────────────── */
:root {
  --brand:    #332f83;
  --brand-2:  #2781c4;
  --brand-3:  #5aa6dc;

  /* Sidebar */
  --sb-a: #0d0b28;
  --sb-b: #16144a;
  --sb-c: #0e2248;
  --sb-w: 232px;

  /* Content */
  --bg:      #f2f5f9;
  --white:   #ffffff;
  --soft:    #f7f9fc;

  /* Text */
  --tx:   #0f172a;
  --tx-2: #334155;
  --tx-3: #64748b;

  /* Lines */
  --ln:   #e2e8f0;
  --ln-2: #cbd5e1;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(15,23,42,.06);
  --sh:    0 4px 20px rgba(15,23,42,.08);
  --sh-lg: 0 12px 40px rgba(15,23,42,.12);
  --sh-br: 0 6px 24px rgba(51,47,131,.24);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl:28px;
  --r-f:  9999px;

  /* Motion */
  --e:  cubic-bezier(.4,0,.2,1);
  --sp: cubic-bezier(.34,1.56,.64,1);
  --d:  .18s;
  --ds: .3s;
}

/* ── 2. BASE ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Play',Inter,system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;color:var(--tx);
  background:var(--bg);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button,input,select{font:inherit}
a{color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:#eef2fa;padding:.1em .38em;border-radius:5px}

/* ── 3. SKIP LINK ───────────────────────────────────────────── */
.skip-link{
  position:absolute;top:-100%;left:16px;
  padding:8px 20px;border-radius:var(--r-md);
  background:var(--brand);color:#fff;
  font-weight:700;font-size:.84rem;text-decoration:none;
  z-index:10000;transition:top .1s;
}
.skip-link:focus{top:8px}

/* ── 4. SHELL ───────────────────────────────────────────────── */
.app-shell{
  display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  min-height:100vh;
}

/* ── 5. SIDEBAR ─────────────────────────────────────────────── */
.sidebar{
  background:linear-gradient(168deg,var(--sb-a) 0%,var(--sb-b) 55%,var(--sb-c) 100%);
  position:relative;overflow:hidden;
}
.sidebar::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 22% 15%,rgba(39,129,196,.16),transparent 44%),
    radial-gradient(circle at 80% 78%,rgba(51,47,131,.2),transparent 40%);
}
.sidebar__inner{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
  padding:24px 12px 20px;gap:2px;
  scrollbar-width:none;z-index:1;
}
.sidebar__inner::-webkit-scrollbar{display:none}

/* Logo */
.brand{
  display:flex;justify-content:center;align-items:center;
  padding:8px;margin-bottom:24px;text-decoration:none;
}
.brand__logo{
  width:80%;max-width:150px;height:auto;
  filter:brightness(0) invert(1);opacity:.9;
  transition:opacity var(--d) var(--e),transform var(--d) var(--e);
}
.brand:hover .brand__logo{opacity:1;transform:scale(1.02)}

/* Divider + label */
.sb-divider{height:1px;background:rgba(255,255,255,.07);margin:10px 8px}
.sb-label{
  padding:2px 10px;margin-bottom:2px;
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
}

/* Home link */
.sb-home{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);text-decoration:none;
  font-weight:600;font-size:.88rem;
  transition:background var(--d),color var(--d);
  margin-bottom:6px;
}
.sb-home:hover{background:rgba(255,255,255,.11);color:#fff}
.sb-home__icon{
  width:26px;height:26px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.09);display:grid;place-items:center;
  flex-shrink:0;font-size:.9rem;
}

/* Nav buttons */
.tool-nav{
  display:flex;flex-direction:column;gap:1px;
  flex:1;min-height:0;overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.13) transparent;
  padding-right:2px;
}
.tool-nav::-webkit-scrollbar{width:3px}
.tool-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:9px}
.tool-nav::-webkit-scrollbar-track{background:transparent}

.tool-nav__button{
  appearance:none;width:100%;text-align:left;border:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-md);
  background:transparent;color:rgba(255,255,255,.52);
  font-weight:600;font-size:.88rem;
  transition:background var(--d),color var(--d),transform var(--d) var(--sp);
  position:relative;overflow:hidden;
}
.tool-nav__button:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);transform:translateX(2px)}
.tool-nav__button.is-active{
  background:rgba(255,255,255,.12);color:#fff;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.5),0 2px 10px rgba(0,0,0,.15);
}

/* Sweep on hover */
.tool-nav__button::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transform:skewX(-18deg);transition:left .35s var(--e);
}
.tool-nav__button:hover::after{left:140%}

.tool-nav__icon{
  width:26px;height:26px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);
  display:grid;place-items:center;flex-shrink:0;
  font-size:.72rem;font-weight:800;color:rgba(255,255,255,.5);
  transition:background var(--d),color var(--d);
}
.tool-nav__button.is-active .tool-nav__icon{background:rgba(255,255,255,.2);color:#fff}
.tool-nav__text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-nav__shortcut{
  flex-shrink:0;width:17px;height:17px;border-radius:4px;
  border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;
  font-size:.58rem;font-weight:700;color:rgba(255,255,255,.2);
  transition:all var(--d);
}
.tool-nav__button:hover .tool-nav__shortcut,
.tool-nav__button.is-active .tool-nav__shortcut{color:rgba(255,255,255,.45);border-color:rgba(255,255,255,.22)}

/* Footer */
.sb-footer{
  flex-shrink:0;margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.2);font-size:.7rem;text-align:center;line-height:1.6;
}

/* Per-tool active accents */
.tool-nav__button.is-active[data-tool="zw"]{
  box-shadow:inset 3px 0 0 #2781c4,0 2px 10px rgba(0,0,0,.15);
}
.tool-nav__button.is-active[data-tool="wia"]{
  box-shadow:inset 3px 0 0 #5249c4,0 2px 10px rgba(0,0,0,.15);
}
.tool-nav__button.is-active[data-tool="pw"]{
  box-shadow:inset 3px 0 0 #1475b5,0 2px 10px rgba(0,0,0,.15);
}
.tool-nav__button.is-active[data-tool="zw"]  .tool-nav__icon{background:rgba(39,129,196,.25);color:#7dc5ed}
.tool-nav__button.is-active[data-tool="wia"] .tool-nav__icon{background:rgba(82,73,196,.25);color:#a09ae8}
.tool-nav__button.is-active[data-tool="pw"]  .tool-nav__icon{background:rgba(20,117,181,.25);color:#5ab3e8}

/* ── 6. MAIN ────────────────────────────────────────────────── */
.main{min-height:100vh;padding:28px 28px 48px;background:var(--bg)}

/* Tool bar */
.tool-bar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:20px;
}
.tool-bar__label{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);
}
.tool-bar__name{
  font-size:.84rem;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--brand);
}

/* ── 7. TOOL HOST ───────────────────────────────────────────── */
.tool-host{max-width:820px;margin-inline:auto}

/* ── 8. MOBILE TABS ─────────────────────────────────────────── */
.mobile-tabs{
  display:none;gap:6px;overflow-x:auto;padding:2px 0 10px;margin-bottom:16px;
  scrollbar-width:none;scroll-snap-type:x proximity;
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(242,245,249,.9);padding-top:10px;margin-top:-4px;
}
.mobile-tabs::-webkit-scrollbar{display:none}
.mobile-tabs__button{
  appearance:none;flex-shrink:0;scroll-snap-align:start;
  white-space:nowrap;border-radius:var(--r-f);
  padding:8px 16px;background:var(--white);color:var(--tx);
  font-weight:600;font-size:.84rem;border:1px solid var(--ln);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  box-shadow:var(--sh-xs);transition:all var(--d) var(--e);
}
.mobile-tabs__button:hover{border-color:var(--brand-2);color:var(--brand)}
.mobile-tabs__button.is-active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:var(--sh-br)}

/* ── 8. TOOL CARD ───────────────────────────────────────────── */
.tool-card{
  background:var(--white);border:1px solid var(--ln);border-radius:var(--r-xl);
  padding:28px 32px;box-shadow:var(--sh);
  position:relative;overflow:hidden;
  animation:cardIn var(--ds) var(--e) both;
}
.tool-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.tool-theme--blue::before  {background:linear-gradient(90deg,#1a6fae,var(--brand-2),var(--brand-3))}
.tool-theme--purple::before{background:linear-gradient(90deg,var(--brand),#5249c4)}
.tool-theme--cyan::before  {background:linear-gradient(90deg,#1060a0,#1475b5,#3b9de2)}

.tool-card--loading{display:grid;place-items:center;min-height:280px}

/* ── 9. TOOL HEAD ───────────────────────────────────────────── */
.tool-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:20px;
  padding-bottom:20px;border-bottom:1px solid var(--ln);
}
.tool-kicker{
  margin:0 0 3px;color:var(--brand-2);
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.tool-title{
  margin:0 0 6px;
  font-family:'Play',Inter,system-ui,sans-serif;
  font-size:clamp(1.3rem,2vw,1.65rem);font-weight:700;letter-spacing:-.01em;line-height:1.2;
  background:linear-gradient(135deg,var(--brand) 20%,var(--brand-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--brand);
}
.tool-copy{margin:0;color:var(--tx-3);font-size:.88rem;line-height:1.6;max-width:460px}
.tool-badge{
  flex-shrink:0;display:inline-flex;align-items:center;
  height:30px;padding:0 12px;border-radius:var(--r-f);
  font-weight:700;font-size:.76rem;border:1px solid transparent;white-space:nowrap;
}
.tool-theme--blue   .tool-badge{background:rgba(39,129,196,.09);color:#1668a3;border-color:rgba(39,129,196,.16)}
.tool-theme--purple .tool-badge{background:rgba(51,47,131,.07);color:var(--brand);border-color:rgba(51,47,131,.13)}
.tool-theme--cyan   .tool-badge{background:rgba(20,117,181,.09);color:#1668a3;border-color:rgba(20,117,181,.16)}

/* ── 10. FORM ───────────────────────────────────────────────── */
.field__date-wrap{display:flex;gap:8px;align-items:stretch}
.field__date-wrap input{flex:1}
.btn-today{
  flex-shrink:0;height:46px;padding:0 14px;
  appearance:none;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;
  background:rgba(39,129,196,.07);border:1.5px solid rgba(39,129,196,.16);
  color:var(--brand-2);font-size:.8rem;font-weight:700;
  transition:background var(--d),border-color var(--d);
}
.btn-today:hover{background:rgba(39,129,196,.14);border-color:rgba(39,129,196,.28)}
.btn-today:active{transform:scale(.97)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field--full{grid-column:1/-1}

.field label{
  display:block;font-weight:600;font-size:.82rem;
  color:var(--tx-2);margin-bottom:7px;
}
.field input,.field select{
  width:100%;min-height:46px;padding:10px 14px;
  border:1.5px solid var(--ln-2);border-radius:var(--r-md);
  background:var(--white);color:var(--tx);font-size:15px;
  transition:border-color var(--d),box-shadow var(--d),background var(--d);
  appearance:none;-webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:40px;cursor:pointer;
}
.field input:hover,.field select:hover{border-color:var(--brand-3)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--brand-2);
  box-shadow:0 0 0 3px rgba(39,129,196,.1);
  background:linear-gradient(180deg,#fafcff,#f5f8fd);
}
.field-hint{margin:7px 0 0;color:var(--tx-3);font-size:.8rem;line-height:1.5}

/* ── 11. BUTTON ─────────────────────────────────────────────── */
.tool-actions{display:flex;gap:10px;margin-top:20px}
.button{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;min-height:46px;padding:0 24px;
  border:none;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand),#403aa0 55%,var(--brand-2));
  color:#fff;font-weight:700;font-size:.9rem;
  cursor:pointer;
  transition:transform var(--d) var(--sp),box-shadow var(--d) var(--e);
  box-shadow:0 3px 14px rgba(51,47,131,.22);
  position:relative;overflow:hidden;
}
.button::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 55%);
  opacity:0;transition:opacity var(--d);
}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(51,47,131,.3)}
.button:hover::after{opacity:1}
.button:active{transform:translateY(0)}

/* Ghost variant */
.button--ghost{
  background:transparent;color:var(--tx-3);
  border:1.5px solid var(--ln-2);box-shadow:none;
}
.button--ghost:hover{background:var(--soft);color:var(--tx-2);border-color:var(--brand-3);box-shadow:none;transform:none}
.button--ghost:active{transform:none}

/* Ripple */
.ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.35);
  transform:scale(0);animation:rippleOut .52s linear forwards;pointer-events:none;
}
@keyframes rippleOut{to{transform:scale(4);opacity:0}}

/* ── 12. RESULT ─────────────────────────────────────────────── */
.result{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--ln);
}
.result:empty{border-top:none;padding-top:0;margin-top:0}

.result-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;
}
.result-card{
  padding:18px 20px;border-radius:var(--r-lg);
  background:linear-gradient(145deg,var(--white),var(--soft));
  border:1px solid var(--ln);border-left:3px solid var(--brand-2);
  box-shadow:var(--sh-xs);
  animation:slideUp var(--ds) var(--e) both;
  transition:box-shadow var(--d),transform var(--d) var(--sp);
}
.result-card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.result-card:nth-child(even){border-left-color:var(--brand-3)}

/* Fatal result card variant */
.result-card--fatal{border-left-color:#dc2626}
.result-card--fatal .badge-fatal{margin-left:5px}

/* Fatal + deadline badges */
.badge-fatal{
  display:inline-flex;align-items:center;
  padding:1px 6px;border-radius:4px;
  background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.16);
  color:#dc2626;font-size:.59rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;vertical-align:middle;white-space:nowrap;
}

/* Field optional label */
.field-optional{font-size:.78rem;font-weight:500;color:var(--tx-3)}

.result-card strong{
  display:block;color:var(--tx-3);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;
}
.result-val{
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
}
.result-val__text{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--brand);font-size:1.08rem;font-weight:800;letter-spacing:-.01em;
}
.copy-hint{
  font-size:.78rem;color:var(--tx-3);-webkit-text-fill-color:var(--tx-3);
  opacity:0;transition:opacity .15s;flex-shrink:0;
}
.result-val:hover .copy-hint{opacity:.65}
.result-val:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:4px}
.result-card .result-note{margin:6px 0 0;color:var(--tx-3);font-size:.78rem;line-height:1.5}

.empty-state{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;border:1.5px dashed var(--ln-2);
  border-radius:var(--r-lg);background:var(--soft);
  color:var(--tx-3);font-size:.88rem;
}
.empty-state__icon{font-size:1.4rem;flex-shrink:0;line-height:1}
.empty-state--error{
  border-color:rgba(220,38,38,.2);background:rgba(254,242,242,.6);
  color:#b91c1c;
}
.empty-state--error .empty-state__icon::before{content:'⚠️'}

/* ── 13. MILESTONE (Poortwachter) ───────────────────────────── */
.milestone-list{display:flex;flex-direction:column;gap:0}

.milestone-item{
  display:grid;grid-template-columns:auto 1fr;gap:0;
  animation:slideUp var(--ds) var(--e) both;
  position:relative;
}

/* Timeline track */
.milestone-track{
  display:flex;flex-direction:column;align-items:center;
  width:32px;flex-shrink:0;padding-top:4px;
}
.milestone-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  background:var(--ln-2);border:2px solid var(--white);
  box-shadow:0 0 0 2px var(--ln-2);
  transition:background var(--d),box-shadow var(--d);
  z-index:1;
}
.milestone-item--hl .milestone-dot{
  background:var(--brand-2);
  box-shadow:0 0 0 2px var(--brand-2),0 0 0 4px rgba(39,129,196,.18);
  animation:milePulse 2s var(--e) 1s infinite;
}
@keyframes milePulse{
  0%,100%{box-shadow:0 0 0 2px var(--brand-2),0 0 0 4px rgba(39,129,196,.18)}
  50%    {box-shadow:0 0 0 2px var(--brand-2),0 0 0 7px rgba(39,129,196,.0)}
}
.milestone-line{
  width:2px;flex:1;background:var(--ln);margin-top:2px;min-height:12px;
}
.milestone-item:last-child .milestone-line{display:none}

/* Timeline content */
.milestone-content{
  padding:4px 0 20px 12px;
}
.milestone-item:last-child .milestone-content{padding-bottom:4px}
.milestone-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:3px;
}
.milestone-week{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);
}
.milestone-date{
  color:var(--brand-2);font-weight:700;font-size:.9rem;white-space:nowrap;
}
.milestone-item--hl .milestone-date{color:var(--brand)}
.milestone-title{
  color:var(--tx);font-size:.92rem;font-weight:700;margin-bottom:3px;
}
.milestone-item--hl .milestone-title{color:var(--brand)}
.milestone-copy{color:var(--tx-3);font-size:.8rem;line-height:1.55}

/* Milestone today marker */
.milestone-today{
  display:flex;align-items:center;gap:10px;
  margin:2px 0 2px 0;padding-left:16px;
}
.milestone-today__line{flex:1;height:1px;background:rgba(39,129,196,.25)}
.milestone-today__badge{
  flex-shrink:0;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-2);white-space:nowrap;
  padding:2px 9px;border-radius:var(--r-f);
  background:rgba(39,129,196,.08);border:1px solid rgba(39,129,196,.2);
}

/* Milestone status variants */
.milestone-item--past{opacity:.5}
.milestone-item--past .milestone-dot{background:var(--ln-2);box-shadow:0 0 0 2px var(--ln-2);animation:none}
.milestone-item--past .milestone-title{color:var(--tx-3)}
.milestone-item--past .milestone-date{color:var(--tx-3);font-weight:600}

.milestone-item--soon .milestone-dot{
  background:#d97706;
  box-shadow:0 0 0 2px #d97706,0 0 0 4px rgba(217,119,6,.22);
  animation:milePulse 1.3s var(--e) infinite;
}
.milestone-item--soon .milestone-date{color:#b45309}
.milestone-item--soon .milestone-title{color:#92400e}
.milestone-item--soon.milestone-item--hl .milestone-dot{background:#dc2626;box-shadow:0 0 0 2px #dc2626,0 0 0 4px rgba(220,38,38,.22)}
.milestone-item--soon.milestone-item--hl .milestone-date{color:#b91c1c}
.milestone-item--soon.milestone-item--hl .milestone-title{color:#991b1b}

/* Days annotations */
.days-left{font-size:.69rem;font-weight:700;color:#b45309}
.days-past{font-size:.69rem;font-weight:600;color:var(--tx-3)}

/* Next deadline banner */
.next-deadline{
  padding:14px 18px;margin-bottom:18px;
  background:rgba(39,129,196,.06);border:1px solid rgba(39,129,196,.14);
  border-radius:var(--r-md);
  animation:slideUp var(--ds) var(--e) both;
}
.next-deadline--soon{background:rgba(217,119,6,.06);border-color:rgba(217,119,6,.22)}
.next-deadline__label{
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:4px;
}
.next-deadline__title{font-weight:700;font-size:.9rem;color:var(--tx);margin-bottom:3px}
.next-deadline__meta{font-size:.82rem;color:var(--tx-3)}
.next-deadline__meta strong{color:var(--tx-2)}
.next-deadline--soon .next-deadline__meta strong{color:#b45309}

/* ── 14. COMPOUND / WIA ─────────────────────────────────────── */
.compound-periods{display:grid;gap:12px}
.compound-period{
  padding:18px;border:1px solid var(--ln);border-radius:var(--r-lg);background:var(--soft);
}
.compound-period__head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;
}
.compound-period__title{color:var(--brand);font-weight:700;font-size:.9rem}
.compound-period__badge{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--r-f);background:rgba(51,47,131,.06);border:1px solid rgba(51,47,131,.11);
  color:var(--brand);font-size:.75rem;font-weight:700;
}

/* ── 15. INFO BOX / SHIFT BADGE ─────────────────────────────── */
.info-box{
  display:flex;gap:10px;padding:12px 16px;
  background:rgba(39,129,196,.06);border:1px solid rgba(39,129,196,.12);
  border-radius:var(--r-md);margin-top:10px;
}
.info-box__icon{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:var(--brand-2);display:grid;place-items:center;
  color:#fff;font-size:.65rem;font-weight:900;margin-top:1px;
}
.info-box__text{color:var(--tx-2);font-size:.84rem;line-height:1.55}
.info-box--warn{background:rgba(217,119,6,.06);border-color:rgba(217,119,6,.2)}
.info-box--warn .info-box__icon{background:#d97706}

.shift-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:var(--r-f);
  background:rgba(13,107,63,.1);border:1px solid rgba(13,107,63,.18);
  color:#0d6b3f;font-size:.8rem;font-weight:700;margin-top:12px;
  animation:badgePop .38s var(--sp) both;
}

/* ── Accessible helpers ─────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.result-actions{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--ln);
  display:flex;gap:8px;flex-wrap:wrap;
}

/* ── 16. SKELETON / LOADING ─────────────────────────────────── */
.tool-loading{display:grid;gap:14px;padding:4px 0}
.skel{
  border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--ln) 25%,var(--soft) 50%,var(--ln) 75%);
  background-size:200% 100%;animation:shimmer 1.3s infinite;
}
.skel-h{height:48px}
.skel-sm{height:24px}

/* ── 17. PROGRESS BAR ───────────────────────────────────────── */
.nbar{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3));
  border-radius:0 2px 2px 0;
  transition:width .25s var(--e);
  box-shadow:0 0 8px rgba(39,129,196,.5);pointer-events:none;
}
.nbar.nbar--done{opacity:0;transition:width .2s var(--e),opacity .35s var(--e) .1s}

/* ── 18. HOMEPAGE (standalone) ──────────────────────────────── */
.hp-body{
  min-height:100vh;display:flex;flex-direction:column;
  background:#09091a;font-family:inherit;overflow-x:hidden;color:#fff;
}

/* Aurora blobs */
.hp-aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hp-aurora__a,.hp-aurora__b,.hp-aurora__c{position:absolute;border-radius:50%}
.hp-aurora__a{
  width:700px;height:600px;top:-15%;left:-8%;
  background:radial-gradient(circle,rgba(51,47,131,.4),transparent 68%);
  filter:blur(52px);animation:auroraA 14s ease-in-out infinite alternate;
}
.hp-aurora__b{
  width:600px;height:700px;top:10%;right:-10%;
  background:radial-gradient(circle,rgba(20,117,181,.24),transparent 68%);
  filter:blur(62px);animation:auroraB 18s ease-in-out infinite alternate;
}
.hp-aurora__c{
  width:500px;height:500px;bottom:-5%;left:35%;
  background:radial-gradient(circle,rgba(51,47,131,.2),transparent 68%);
  filter:blur(56px);animation:auroraC 16s ease-in-out infinite alternate;
}
@keyframes auroraA{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,60px) scale(1.12)}}
@keyframes auroraB{from{transform:translate(0,0)}to{transform:translate(-70px,50px) scale(1.15)}}
@keyframes auroraC{from{transform:translate(0,0)}to{transform:translate(-50px,-70px) scale(1.1)}}

/* Dot grid */
.hp-body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle,rgba(255,255,255,.036) 1px,transparent 1px);
  background-size:44px 44px;
  animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:44px 44px}}

/* Cursor glow */
.hp-cursor{
  position:fixed;pointer-events:none;z-index:3;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,129,196,.09) 0%,transparent 65%);
  transform:translate(-50%,-50%);
}

/* Bar */
.hp-bar{
  position:relative;z-index:20;flex-shrink:0;height:64px;
  padding:0 36px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(9,9,26,.65);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  animation:hpBarIn .6s var(--e) both;
}
@keyframes hpBarIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
.hp-bar__logo{height:30px;filter:brightness(0) invert(1);opacity:.88}
.hp-bar__label{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 14px;border-radius:99px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  font-size:.7rem;font-weight:700;color:rgba(255,255,255,.32);
  letter-spacing:.1em;text-transform:uppercase;
}

/* Hero */
.hp-hero{
  position:relative;z-index:10;flex-shrink:0;
  padding:88px 40px 64px;text-align:center;
}
.hp-hero__title{
  margin:0 0 28px;
  font-family:'Play',Inter,system-ui,sans-serif;
  font-size:clamp(1.8rem,5.2vw,4.4rem);
  font-weight:700;line-height:1.15;letter-spacing:-.01em;
  white-space:nowrap;
  animation:hpFadeUp .7s var(--e) .18s both;
}
.hp-hero__accent{
  display:inline;
  font-style:normal;
  background:linear-gradient(90deg,#7bc3e8,#2781c4,#5249c4,#2781c4,#7bc3e8);
  background-size:300% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradShift 5s linear .6s infinite;
}
@keyframes gradShift{0%{background-position:0%}100%{background-position:300%}}
.hp-hero__sub{
  max-width:500px;margin:0 auto;
  font-size:.97rem;line-height:1.72;color:rgba(255,255,255,.35);
  animation:hpFadeUp .7s var(--e) .44s both;
}

/* Cards grid */
.hp-cards{
  position:relative;z-index:10;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;padding:0 36px 64px;
  max-width:1160px;width:100%;margin:0 auto;
}

.hp-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:28px 28px 32px;
  background:rgba(255,255,255,.044);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  text-decoration:none;color:#fff;
  will-change:transform;
  transition:box-shadow .4s var(--e),border-color .3s;
  animation:hpCardIn .8s var(--e) both;
}
.hp-card:nth-child(1){animation-delay:.52s}
.hp-card:nth-child(2){animation-delay:.65s}
.hp-card:nth-child(3){animation-delay:.78s}
@keyframes hpCardIn{
  from{opacity:0;transform:translateY(36px) scale(.97);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
.hp-card:hover{
  box-shadow:0 24px 60px rgba(0,0,0,.38),0 0 0 1px rgba(39,129,196,.3),0 0 40px rgba(39,129,196,.1);
  border-color:rgba(39,129,196,.32);
}

/* Card overlays */
.hp-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,0);transition:background .25s;z-index:0;
}
.hp-card:hover::after{background:rgba(255,255,255,.022)}
.panel-glow{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(39,129,196,.14),transparent 52%);
  opacity:0;transition:opacity .3s;
}
.hp-card:hover .panel-glow{opacity:1}
.hp-panel__shine{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.07) 50%,transparent 64%);
  transform:translateX(-130%);
}
.hp-card:nth-child(1) .hp-panel__shine{animation:panelShine .85s var(--e) 1.2s both}
.hp-card:nth-child(2) .hp-panel__shine{animation:panelShine .85s var(--e) 1.35s both}
.hp-card:nth-child(3) .hp-panel__shine{animation:panelShine .85s var(--e) 1.5s both}
@keyframes panelShine{to{transform:translateX(230%)}}

/* Ghost number */
.hp-panel__num{
  position:absolute;top:-16px;right:-6px;
  font-size:min(9vw,108px);font-weight:900;line-height:1;
  letter-spacing:-.06em;color:rgba(255,255,255,.05);
  pointer-events:none;user-select:none;z-index:4;transition:color .22s;
}
.hp-card:hover .hp-panel__num{color:rgba(255,255,255,.09)}

/* Content above overlays */
.hp-card>*:not(.panel-glow):not(.hp-panel__shine):not(.hp-panel__num){
  position:relative;z-index:5;
}

/* Num badge */
.hp-card__num-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  font-size:.72rem;font-weight:800;color:rgba(255,255,255,.42);
  flex-shrink:0;align-self:flex-start;
}

/* Card text */
.hp-panel__kicker{
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin:20px 0 8px;
}
.hp-panel__title{
  font-family:'Play',Inter,system-ui,sans-serif;
  font-size:clamp(1.2rem,1.7vw,1.55rem);font-weight:700;
  letter-spacing:-.01em;line-height:1.2;margin:0 0 12px;
}
.hp-panel__desc{
  font-size:.86rem;line-height:1.65;color:rgba(255,255,255,.4);
  margin:0 0 28px;flex:1;
}
.hp-panel__cta{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  padding:9px 18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);
  border-radius:9px;font-weight:700;font-size:.83rem;
  transition:background .18s,gap .18s var(--sp),border-color .18s;
}
.hp-card:hover .hp-panel__cta{background:rgba(255,255,255,.14);gap:12px;border-color:rgba(255,255,255,.2)}

/* Per-card accent top line */
.hp-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  border-radius:20px 20px 0 0;opacity:.38;
  transition:opacity .3s;z-index:6;pointer-events:none;
}
.hp-card:hover::before{opacity:1}
.hp-card:nth-child(1)::before{background:linear-gradient(90deg,transparent,#2781c4 30%,#2781c4 70%,transparent)}
.hp-card:nth-child(2)::before{background:linear-gradient(90deg,transparent,#5249c4 30%,#5249c4 70%,transparent)}
.hp-card:nth-child(3)::before{background:linear-gradient(90deg,transparent,#1475b5 30%,#1475b5 70%,transparent)}

/* Per-card hover glow */
.hp-card:nth-child(1):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(39,129,196,.38),0 0 50px rgba(39,129,196,.14);border-color:rgba(39,129,196,.38)}
.hp-card:nth-child(2):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(82,73,196,.38),0 0 50px rgba(82,73,196,.14);border-color:rgba(82,73,196,.38)}
.hp-card:nth-child(3):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(20,117,181,.38),0 0 50px rgba(20,117,181,.14);border-color:rgba(20,117,181,.38)}

/* Per-card internal glow color */
.hp-card:nth-child(1) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(39,129,196,.16),transparent 52%)}
.hp-card:nth-child(2) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(82,73,196,.18),transparent 52%)}
.hp-card:nth-child(3) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(20,117,181,.16),transparent 52%)}

/* Per-card num badge */
.hp-card:nth-child(1) .hp-card__num-badge{background:rgba(39,129,196,.12);border-color:rgba(39,129,196,.22);color:#5aa6dc}
.hp-card:nth-child(2) .hp-card__num-badge{background:rgba(82,73,196,.12);border-color:rgba(82,73,196,.22);color:#8b88e0}
.hp-card:nth-child(3) .hp-card__num-badge{background:rgba(20,117,181,.12);border-color:rgba(20,117,181,.22);color:#4da6dc}

/* Film grain texture */
.hp-body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;background-repeat:repeat;
}

/* Footer */
.hp-footer{
  position:relative;z-index:10;flex-shrink:0;
  padding:24px 36px 28px;
  border-top:1px solid rgba(255,255,255,.05);
}
.hp-footer__inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;max-width:720px;margin:0 auto;
}
.hp-footer__logo{
  height:28px;width:auto;
  filter:brightness(0) invert(1);opacity:.22;
  flex-shrink:0;margin-top:2px;
}
.hp-footer__text{display:flex;flex-direction:column;gap:6px}
.hp-footer__disclaimer{
  font-size:.73rem;color:rgba(255,255,255,.22);line-height:1.6;font-weight:500;
}
.hp-footer__disclaimer strong{color:rgba(255,255,255,.32);font-weight:700}
.hp-footer__copy{
  font-size:.67rem;color:rgba(255,255,255,.13);font-weight:500;letter-spacing:.02em;
}

/* Content stagger */
.hp-card:nth-child(1) .hp-card__num-badge{animation:hpFadeUp .5s var(--e) .57s both}
.hp-card:nth-child(1) .hp-panel__kicker  {animation:hpFadeUp .5s var(--e) .64s both}
.hp-card:nth-child(1) .hp-panel__title   {animation:hpFadeUp .6s var(--e) .70s both}
.hp-card:nth-child(1) .hp-panel__desc    {animation:hpFadeUp .6s var(--e) .76s both}
.hp-card:nth-child(1) .hp-panel__cta     {animation:hpFadeUp .6s var(--e) .82s both}
.hp-card:nth-child(2) .hp-card__num-badge{animation:hpFadeUp .5s var(--e) .70s both}
.hp-card:nth-child(2) .hp-panel__kicker  {animation:hpFadeUp .5s var(--e) .77s both}
.hp-card:nth-child(2) .hp-panel__title   {animation:hpFadeUp .6s var(--e) .83s both}
.hp-card:nth-child(2) .hp-panel__desc    {animation:hpFadeUp .6s var(--e) .89s both}
.hp-card:nth-child(2) .hp-panel__cta     {animation:hpFadeUp .6s var(--e) .95s both}
.hp-card:nth-child(3) .hp-card__num-badge{animation:hpFadeUp .5s var(--e) .83s both}
.hp-card:nth-child(3) .hp-panel__kicker  {animation:hpFadeUp .5s var(--e) .90s both}
.hp-card:nth-child(3) .hp-panel__title   {animation:hpFadeUp .6s var(--e) .96s both}
.hp-card:nth-child(3) .hp-panel__desc    {animation:hpFadeUp .6s var(--e) 1.02s both}
.hp-card:nth-child(3) .hp-panel__cta     {animation:hpFadeUp .6s var(--e) 1.08s both}

@keyframes hpFadeUp{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:none}
}

/* ── 19. FOCUS VISIBLE ──────────────────────────────────────── */
:focus-visible{
  outline:2.5px solid var(--brand-2);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.tool-nav__button:focus-visible{outline-color:rgba(255,255,255,.55)}
.button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(39,129,196,.5),0 8px 28px rgba(51,47,131,.3)}
.field input:focus-visible,.field select:focus-visible{outline:none}

/* ── 20. REDUCED MOTION ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hp-aurora__a,.hp-aurora__b,.hp-aurora__c{animation:none}
  .hp-body::before,.hp-body::after{animation:none}
  .hp-hero__accent{animation:none}
  .hp-card{animation:none;opacity:1;transform:none;filter:none}
  .hp-card__num-badge,.hp-panel__kicker,.hp-panel__title,
  .hp-panel__desc,.hp-panel__cta{animation:none;opacity:1}
  .hp-panel__shine{display:none}
  .tool-entering,.tool-exiting{animation:none!important}
  .milestone-item--hl .milestone-dot{animation:none}
  .skel{animation:none;background:var(--ln)}
  .nbar{transition:none}
  .button{transition:box-shadow var(--d)}
}

/* ── 22. KEYFRAMES ──────────────────────────────────────────── */
@keyframes cardIn{
  from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes badgePop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes toolEnterFX{
  from{opacity:0;transform:translateY(18px) scale(.978);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes toolExitFX{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-10px)}
}
.tool-entering{animation:toolEnterFX .28s var(--e) both!important}
.tool-exiting {animation:toolExitFX .13s var(--e) both!important}

/* ── 23. RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:960px){
  :root{--sb-w:210px}
  .main{padding:22px 20px 40px}
  .tool-card{padding:24px 22px}
}
@media(max-width:760px){
  .app-shell{display:block}
  .sidebar{background:linear-gradient(to right,var(--sb-a),var(--sb-b),var(--sb-c))}
  .sidebar__inner{
    position:static;height:auto;flex-direction:row;align-items:center;
    padding:12px 14px;gap:10px;overflow-x:auto;
  }
  .sb-divider,.tool-nav,.sb-footer,.sb-label{display:none}
  .brand{margin-bottom:0;flex-shrink:0}
  .brand__logo{max-width:110px}
  .sb-home{display:none}
  .mobile-tabs{display:flex}
  .main{padding:14px 14px 32px}
}
@media(max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr}
  .tool-head{flex-direction:column;gap:8px}
  .tool-card{padding:20px 16px}
  .button{width:100%}
}

/* Homepage responsive */
@media(max-width:960px){
  .hp-hero{padding:68px 28px 48px}
  .hp-cards{padding:0 24px 52px;gap:14px}
}
@media(max-width:760px){
  .hp-cursor,.hp-aurora{display:none}
  .hp-body::before,.hp-body::after{animation:none}
  .hp-bar{padding:0 20px;height:56px}
  .hp-hero{padding:52px 20px 36px}
  .hp-hero__title{font-size:clamp(1rem,4.5vw,2.2rem);white-space:nowrap}
  .hp-hero__sub br{display:none}
  .hp-cards{grid-template-columns:1fr;padding:0 16px 40px;gap:12px}
  .hp-card{will-change:auto;transform:none!important}
  .hp-panel__num{display:none}
  .hp-footer{padding:18px 20px 22px}
}
@media(max-width:480px){
  .hp-hero{padding:40px 16px 28px}
  .hp-hero__title{font-size:clamp(.9rem,7vw,1.5rem);white-space:normal}
  .hp-cards{padding:0 12px 32px}
}

/* ── 24. NEW TOOL THEMES ────────────────────────────────────── */
.tool-theme--green::before  {background:linear-gradient(90deg,#15803d,#16a34a,#4ade80)}
.tool-theme--orange::before {background:linear-gradient(90deg,#c2410c,#ea580c,#fb923c)}
.tool-theme--teal::before   {background:linear-gradient(90deg,#0e7490,#0891b2,#22d3ee)}

.tool-theme--green  .tool-badge{background:rgba(22,163,74,.09);color:#15803d;border-color:rgba(22,163,74,.16)}
.tool-theme--orange .tool-badge{background:rgba(234,88,12,.09);color:#c2410c;border-color:rgba(234,88,12,.16)}
.tool-theme--teal   .tool-badge{background:rgba(8,145,178,.09);color:#0e7490;border-color:rgba(8,145,178,.16)}

/* Sidebar accents per tool */
.tool-nav__button.is-active[data-tool="ri"] {box-shadow:inset 3px 0 0 #16a34a,0 2px 10px rgba(0,0,0,.15)}
.tool-nav__button.is-active[data-tool="oz"] {box-shadow:inset 3px 0 0 #ea580c,0 2px 10px rgba(0,0,0,.15)}
.tool-nav__button.is-active[data-tool="riv"]{box-shadow:inset 3px 0 0 #0891b2,0 2px 10px rgba(0,0,0,.15)}
.tool-nav__button.is-active[data-tool="ri"]  .tool-nav__icon{background:rgba(22,163,74,.25);color:#4ade80}
.tool-nav__button.is-active[data-tool="oz"]  .tool-nav__icon{background:rgba(234,88,12,.25);color:#fb923c}
.tool-nav__button.is-active[data-tool="riv"] .tool-nav__icon{background:rgba(8,145,178,.25);color:#22d3ee}

/* ── 25. ROLE BADGES ────────────────────────────────────────── */
.role-badge{
  display:inline-flex;align-items:center;
  padding:1px 7px;border-radius:4px;
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;margin-right:5px;vertical-align:middle;border:1px solid transparent;
}
.role-badge--wg {background:rgba(39,129,196,.1);color:#1668a3;border-color:rgba(39,129,196,.18)}
.role-badge--ba {background:rgba(82,73,196,.1);color:var(--brand);border-color:rgba(82,73,196,.18)}
.role-badge--cm {background:rgba(22,163,74,.1);color:#15803d;border-color:rgba(22,163,74,.18)}
.role-badge--wn {background:rgba(217,119,6,.1);color:#b45309;border-color:rgba(217,119,6,.18)}
.role-badge--ad {background:rgba(8,145,178,.1);color:#0e7490;border-color:rgba(8,145,178,.18)}

/* ── 26. CHECKLIST ──────────────────────────────────────────── */
.checklist-progress{
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;padding:12px 16px;
  background:var(--soft);border:1px solid var(--ln);border-radius:var(--r-md);
}
.checklist-progress__bar-wrap{
  flex:1;height:6px;border-radius:var(--r-f);
  background:var(--ln);overflow:hidden;
}
.checklist-progress__bar{
  height:100%;border-radius:var(--r-f);
  background:linear-gradient(90deg,#0891b2,#22d3ee);
  transition:width .3s var(--e);
}
.checklist-progress__label{
  flex-shrink:0;font-size:.78rem;font-weight:700;color:var(--tx-3);white-space:nowrap;
}

.checklist{display:flex;flex-direction:column;gap:18px}

.checklist-section{
  border:1px solid var(--ln);border-radius:var(--r-lg);overflow:hidden;
}
.checklist-section__title{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;margin:0;
  background:var(--soft);border-bottom:1px solid var(--ln);
  font-size:.84rem;font-weight:700;color:var(--tx-2);
}
.checklist-section__sub{
  padding:6px 16px 10px;
  font-size:.75rem;color:var(--tx-3);
  background:var(--soft);border-bottom:1px solid var(--ln);
  margin:0;
}

.checklist-list{list-style:none;padding:0;margin:0}
.checklist-item{border-bottom:1px solid var(--ln)}
.checklist-item:last-child{border-bottom:none}

.checklist-label{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;cursor:pointer;
  transition:background var(--d);
}
.checklist-label:hover{background:var(--soft)}

.checklist-cb{
  position:absolute;opacity:0;width:0;height:0;
}
.checklist-check{
  flex-shrink:0;width:18px;height:18px;margin-top:1px;
  border:1.5px solid var(--ln-2);border-radius:4px;
  background:var(--white);
  display:grid;place-items:center;
  transition:background var(--d),border-color var(--d);
}
.checklist-check::after{
  content:'';width:5px;height:9px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg) translateY(-1px);
  opacity:0;transition:opacity .12s;
}
.checklist-cb:checked + .checklist-check{
  background:var(--brand-2);border-color:var(--brand-2);
}
.checklist-cb:checked + .checklist-check::after{opacity:1}
.checklist-cb:focus-visible + .checklist-check{
  outline:2.5px solid var(--brand-2);outline-offset:2px;
}
.checklist-label span:last-child{
  font-size:.88rem;color:var(--tx-2);line-height:1.55;flex:1;
}
.checklist-cb:checked ~ span:last-child{
  color:var(--tx-3);text-decoration:line-through;
}

/* ── 27. HOMEPAGE CARDS 4-6 ─────────────────────────────────── */
.hp-card:nth-child(4){animation-delay:.91s}
.hp-card:nth-child(5){animation-delay:1.04s}
.hp-card:nth-child(6){animation-delay:1.17s}

.hp-card:nth-child(4)::before{background:linear-gradient(90deg,transparent,#16a34a 30%,#16a34a 70%,transparent)}
.hp-card:nth-child(5)::before{background:linear-gradient(90deg,transparent,#ea580c 30%,#ea580c 70%,transparent)}
.hp-card:nth-child(6)::before{background:linear-gradient(90deg,transparent,#0891b2 30%,#0891b2 70%,transparent)}

.hp-card:nth-child(4):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(22,163,74,.38),0 0 50px rgba(22,163,74,.14);border-color:rgba(22,163,74,.38)}
.hp-card:nth-child(5):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(234,88,12,.38),0 0 50px rgba(234,88,12,.14);border-color:rgba(234,88,12,.38)}
.hp-card:nth-child(6):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(8,145,178,.38),0 0 50px rgba(8,145,178,.14);border-color:rgba(8,145,178,.38)}

.hp-card:nth-child(4) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(22,163,74,.16),transparent 52%)}
.hp-card:nth-child(5) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(234,88,12,.18),transparent 52%)}
.hp-card:nth-child(6) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(8,145,178,.16),transparent 52%)}

.hp-card:nth-child(4) .hp-card__num-badge{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.22);color:#4ade80}
.hp-card:nth-child(5) .hp-card__num-badge{background:rgba(234,88,12,.12);border-color:rgba(234,88,12,.22);color:#fb923c}
.hp-card:nth-child(6) .hp-card__num-badge{background:rgba(8,145,178,.12);border-color:rgba(8,145,178,.22);color:#22d3ee}

/* ── 28. FEESTDAG / WERKDAG INDICATOR ───────────────────────── */
.holiday-note{
  display:block;margin-top:4px;
  font-size:.72rem;font-weight:600;color:#b45309;
}

/* ── 28b. DOSSIER PANEL ─────────────────────────────────────── */
.dossier-panel{display:flex;flex-direction:column;gap:5px;padding:1px 0}
.dossier-input{
  width:100%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);
  color:rgba(255,255,255,.7);font-size:.74rem;padding:6px 9px;
  transition:border-color var(--d),background var(--d);outline:none;
}
.dossier-input::placeholder{color:rgba(255,255,255,.22)}
.dossier-input:focus{border-color:rgba(39,129,196,.5);background:rgba(255,255,255,.1)}

/* Print-only dossier header */
.print-dossier{display:none}

/* ── 29. PRINT ──────────────────────────────────────────────── */
@media print {
  .sidebar,.mobile-tabs,.tool-bar,.tool-actions,.result-actions,
  .nbar,.btn-today,.skip-link,.app-footer { display:none!important }
  .app-shell{display:block}
  .main{padding:0;background:#fff}
  body{background:#fff;color:#000;font-size:13px}
  .tool-card{
    box-shadow:none;border:1px solid #ddd;border-radius:0;
    padding:16px;page-break-inside:avoid;
  }
  .tool-card::before{display:none}
  .tool-head{border-bottom:1px solid #ddd}
  .tool-title{-webkit-text-fill-color:#000;background:none;color:#000}
  .tool-kicker,.tool-bar__name{-webkit-text-fill-color:inherit}
  .result-card{break-inside:avoid;border-left-width:2px}
  .result-val__text{-webkit-text-fill-color:#1a1a1a;color:#1a1a1a;background:none}
  .copy-hint{display:none}
  .milestone-item{break-inside:avoid}
  .info-box,.next-deadline{break-inside:avoid}
  .shift-badge{background:none;border:1px solid #888;color:#333}
  .badge-fatal{background:none;border:1px solid #dc2626;color:#dc2626}
  .checklist-progress__bar{background:#0891b2}
  .print-dossier{
    display:block;border-bottom:2px solid #ddd;padding-bottom:10px;margin-bottom:16px;
  }
  .print-dossier__inner{
    display:flex;gap:16px;align-items:baseline;font-size:.82rem;color:#333;flex-wrap:wrap;
  }
  .print-dossier__naam{font-weight:700;font-size:1rem;color:#000}
  .print-dossier__ref{color:#666}
  .print-dossier__date{margin-left:auto;color:#999;font-size:.72rem}
  @page{margin:18mm}
}

/* ── 29. DARK MODE (via .dark class op body) ─────────────────── */
body.dark{
  --bg:    #0f1117;
  --white: #1a1d27;
  --soft:  #151820;
  --tx:    #e2e8f0;
  --tx-2:  #94a3b8;
  --tx-3:  #64748b;
  --ln:    rgba(255,255,255,.08);
  --ln-2:  rgba(255,255,255,.13);
  --sh:    0 4px 20px rgba(0,0,0,.35);
  --sh-lg: 0 12px 40px rgba(0,0,0,.45);
  background:var(--bg);
}
body.dark .tool-card{background:var(--white);border-color:var(--ln)}
body.dark .result-card{background:linear-gradient(145deg,#1e2235,var(--white));border-color:var(--ln)}
body.dark .field input,
body.dark .field select{background:#1e2235;border-color:var(--ln-2);color:var(--tx)}
body.dark .field input:focus,
body.dark .field select:focus{background:#222640}
body.dark .compound-period,
body.dark .checklist-section,
body.dark .checklist-progress{background:var(--soft);border-color:var(--ln)}
body.dark .checklist-section__title,
body.dark .checklist-section__sub{background:var(--soft)}
body.dark .checklist-check{background:#1e2235;border-color:var(--ln-2)}
body.dark .mobile-tabs{background:rgba(15,17,23,.92)}
body.dark .mobile-tabs__button{background:var(--white);border-color:var(--ln);color:var(--tx)}
body.dark .mobile-tabs__button.is-active{background:var(--brand);color:#fff}
body.dark code{background:rgba(255,255,255,.08);color:var(--tx-2)}
body.dark .empty-state{background:var(--soft);border-color:var(--ln-2)}
body.dark .info-box{background:rgba(39,129,196,.08);border-color:rgba(39,129,196,.15)}
body.dark .info-box--warn{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.2)}
body.dark .next-deadline{background:rgba(39,129,196,.07);border-color:rgba(39,129,196,.16)}
body.dark .next-deadline--soon{background:rgba(217,119,6,.07);border-color:rgba(217,119,6,.18)}
body.dark .tool-card--loading{background:var(--white)}

/* ── Dark toggle button ──────────────────────────────────────── */
.btn-darkmode{
  appearance:none;width:100%;text-align:left;border:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.5);font-weight:600;font-size:.82rem;
  transition:background var(--d),color var(--d);
  margin-top:8px;flex-shrink:0;
}
.btn-darkmode:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.btn-darkmode__icon{
  width:26px;height:26px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);display:grid;place-items:center;
  flex-shrink:0;font-size:.88rem;
  transition:background var(--d);
}
.btn-darkmode__track{
  margin-left:auto;width:32px;height:18px;border-radius:var(--r-f);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
  position:relative;transition:background var(--d);flex-shrink:0;
}
.btn-darkmode__track::after{
  content:'';position:absolute;top:2px;left:2px;
  width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:transform var(--d) var(--sp),background var(--d);
}
body.dark .btn-darkmode__track{background:var(--brand-2);border-color:var(--brand-2)}
body.dark .btn-darkmode__track::after{transform:translateX(14px);background:#fff}

/* ── 30. NEW TOOL THEMES (v8) ───────────────────────────────── */
.tool-theme--rose::before   {background:linear-gradient(90deg,#b91c1c,#dc2626,#f87171)}
.tool-theme--violet::before {background:linear-gradient(90deg,#3730a3,#4f46e5,#818cf8)}
.tool-theme--emerald::before{background:linear-gradient(90deg,#065f46,#059669,#34d399)}

.tool-theme--rose   .tool-badge{background:rgba(220,38,38,.09);color:#b91c1c;border-color:rgba(220,38,38,.18)}
.tool-theme--violet .tool-badge{background:rgba(79,70,229,.09);color:#3730a3;border-color:rgba(79,70,229,.18)}
.tool-theme--emerald .tool-badge{background:rgba(5,150,105,.09);color:#065f46;border-color:rgba(5,150,105,.18)}

.tool-nav__button.is-active[data-tool="ls"] {box-shadow:inset 3px 0 0 #dc2626,0 2px 10px rgba(0,0,0,.15)}
.tool-nav__button.is-active[data-tool="os"] {box-shadow:inset 3px 0 0 #4f46e5,0 2px 10px rgba(0,0,0,.15)}
.tool-nav__button.is-active[data-tool="wu"] {box-shadow:inset 3px 0 0 #059669,0 2px 10px rgba(0,0,0,.15)}
.tool-nav__button.is-active[data-tool="ls"]  .tool-nav__icon{background:rgba(220,38,38,.22);color:#fca5a5}
.tool-nav__button.is-active[data-tool="os"]  .tool-nav__icon{background:rgba(79,70,229,.22);color:#a5b4fc}
.tool-nav__button.is-active[data-tool="wu"]  .tool-nav__icon{background:rgba(5,150,105,.22);color:#6ee7b7}

/* ── 31. TOOLTIP ────────────────────────────────────────────── */
.tip-btn{
  appearance:none;border:none;cursor:help;
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;
  background:var(--brand-2);color:#fff;
  font-size:.58rem;font-weight:900;line-height:1;
  vertical-align:middle;margin-left:4px;flex-shrink:0;
  position:relative;
  transition:background var(--d);
}
.tip-btn:hover{background:var(--brand)}
.tip-btn::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%);
  min-width:200px;max-width:280px;
  background:#1e293b;color:#e2e8f0;
  font-size:.76rem;font-weight:400;line-height:1.55;
  padding:9px 13px;border-radius:9px;
  pointer-events:none;
  opacity:0;transition:opacity .15s;
  z-index:200;white-space:normal;text-align:left;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.tip-btn::before{
  content:'';position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#1e293b;
  pointer-events:none;opacity:0;transition:opacity .15s;z-index:200;
}
.tip-btn:hover::after,.tip-btn:focus::after{opacity:1}
.tip-btn:hover::before,.tip-btn:focus::before{opacity:1}
.tip-btn:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

/* ── 32. SIDEBAR ZOEKBALK ───────────────────────────────────── */
.sb-search{padding:0 2px;margin-bottom:6px}
.sb-search__input{
  width:100%;min-height:36px;padding:7px 10px 7px 32px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);color:rgba(255,255,255,.75);font-size:.82rem;
  transition:background var(--d),border-color var(--d);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='rgba(255,255,255,.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px center;
}
.sb-search__input::placeholder{color:rgba(255,255,255,.3)}
.sb-search__input:focus{
  outline:none;background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);
  color:#fff;
}

/* ── 33. RECENT BEREKENINGEN ────────────────────────────────── */
.sb-recent-list{display:flex;flex-direction:column;gap:1px}
.sb-recent-item{
  appearance:none;width:100%;text-align:left;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:var(--r-md);
  background:transparent;color:rgba(255,255,255,.42);
  font-size:.78rem;font-weight:500;
  transition:background var(--d),color var(--d);
}
.sb-recent-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.sb-recent-icon{
  flex-shrink:0;width:22px;height:22px;border-radius:5px;
  background:rgba(255,255,255,.08);display:grid;place-items:center;
  font-size:.6rem;font-weight:800;color:rgba(255,255,255,.35);
}
.sb-recent-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-recent-date{flex-shrink:0;font-size:.68rem;color:rgba(255,255,255,.22)}

/* ── 34. DOSSIERNOTITIE ─────────────────────────────────────── */
.note-section{
  max-width:820px;margin-inline:auto;
  margin-top:16px;
}
.note-label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:7px;
}
.note-field{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--ln-2);border-radius:var(--r-md);
  background:var(--white);color:var(--tx);font-size:.88rem;
  font-family:inherit;line-height:1.6;resize:vertical;
  transition:border-color var(--d),box-shadow var(--d);
}
.note-field:focus{
  outline:none;border-color:var(--brand-2);
  box-shadow:0 0 0 3px rgba(39,129,196,.1);
}
.note-field::placeholder{color:var(--tx-3)}
.note-saved{
  font-size:.72rem;color:var(--tx-3);margin-top:4px;
  min-height:1em;transition:opacity .3s;
}
body.dark .note-field{background:#1e2235;border-color:var(--ln-2);color:var(--tx)}

/* ── 35. SCHEMA TABEL (opbouwschema) ────────────────────────── */
.schema-table-wrap{overflow-x:auto;margin-top:16px;border-radius:var(--r-md);border:1px solid var(--ln)}
.schema-table{
  width:100%;border-collapse:collapse;font-size:.84rem;
}
.schema-table th{
  padding:10px 14px;text-align:left;
  background:var(--soft);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);
  border-bottom:1px solid var(--ln);white-space:nowrap;
}
.schema-table td{
  padding:9px 14px;border-bottom:1px solid var(--ln);color:var(--tx-2);
  vertical-align:middle;
}
.schema-table tbody tr:last-child td{border-bottom:none}
.schema-table tbody tr:hover td{background:var(--soft)}
.schema-bar-wrap{
  display:flex;align-items:center;gap:8px;
}
.schema-bar{
  height:8px;border-radius:var(--r-f);
  background:linear-gradient(90deg,#4f46e5,#818cf8);
  min-width:2px;transition:width .3s var(--e);
}
.schema-bar-label{font-size:.78rem;font-weight:700;color:var(--brand);white-space:nowrap}
body.dark .schema-table th{background:var(--soft)}
body.dark .schema-table tbody tr:hover td{background:var(--soft)}

/* ── 36. HOMEPAGE CARDS 7-9 ─────────────────────────────────── */
.hp-card:nth-child(7){animation-delay:1.30s}
.hp-card:nth-child(8){animation-delay:1.43s}
.hp-card:nth-child(9){animation-delay:1.56s}

.hp-card:nth-child(7)::before{background:linear-gradient(90deg,transparent,#dc2626 30%,#dc2626 70%,transparent)}
.hp-card:nth-child(8)::before{background:linear-gradient(90deg,transparent,#4f46e5 30%,#4f46e5 70%,transparent)}
.hp-card:nth-child(9)::before{background:linear-gradient(90deg,transparent,#059669 30%,#059669 70%,transparent)}

.hp-card:nth-child(7):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(220,38,38,.38),0 0 50px rgba(220,38,38,.14);border-color:rgba(220,38,38,.38)}
.hp-card:nth-child(8):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(79,70,229,.38),0 0 50px rgba(79,70,229,.14);border-color:rgba(79,70,229,.38)}
.hp-card:nth-child(9):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(5,150,105,.38),0 0 50px rgba(5,150,105,.14);border-color:rgba(5,150,105,.38)}

.hp-card:nth-child(7) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(220,38,38,.16),transparent 52%)}
.hp-card:nth-child(8) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(79,70,229,.18),transparent 52%)}
.hp-card:nth-child(9) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(5,150,105,.16),transparent 52%)}

.hp-card:nth-child(7) .hp-card__num-badge{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.22);color:#fca5a5}
.hp-card:nth-child(8) .hp-card__num-badge{background:rgba(79,70,229,.12);border-color:rgba(79,70,229,.22);color:#a5b4fc}
.hp-card:nth-child(9) .hp-card__num-badge{background:rgba(5,150,105,.12);border-color:rgba(5,150,105,.22);color:#6ee7b7}

/* ── Tool 10 — Amber theme ───────────────────────────────────── */
.tool-theme--amber::before  {background:linear-gradient(90deg,#b45309,#d97706,#fbbf24)}
.tool-theme--amber          {--tool-accent:#d97706}
.tool-theme--amber .tool-badge{background:rgba(217,119,6,.09);color:#b45309;border-color:rgba(217,119,6,.18)}
.tool-nav__button.is-active[data-tool="rp"]{box-shadow:inset 3px 0 0 #d97706,0 2px 10px rgba(0,0,0,.15)}
.tool-nav__button.is-active[data-tool="rp"] .tool-nav__icon{background:rgba(217,119,6,.22);color:#fcd34d}

/* Homepage card 10 */
.hp-card:nth-child(10){animation-delay:1.69s}
.hp-card:nth-child(10)::before{background:linear-gradient(90deg,transparent,#d97706 30%,#d97706 70%,transparent)}
.hp-card:nth-child(10):hover{box-shadow:0 28px 64px rgba(0,0,0,.42),0 0 0 1px rgba(217,119,6,.38),0 0 50px rgba(217,119,6,.14);border-color:rgba(217,119,6,.38)}
.hp-card:nth-child(10) .panel-glow{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(217,119,6,.18),transparent 52%)}
.hp-card:nth-child(10) .hp-card__num-badge{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.22);color:#fcd34d}

/* ── App footer (tools page) ─────────────────────────────────── */
.app-footer{
  border-top:1px solid var(--ln);
  padding:24px 32px 28px;
  background:var(--soft);
  text-align:center;
}
.app-footer__inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:720px;margin:0 auto;
}
.app-footer__logo{
  height:22px;width:auto;opacity:.22;
}
body.dark .app-footer__logo{filter:brightness(0) invert(1)}
.app-footer__text{display:flex;flex-direction:column;gap:5px;text-align:center}
.app-footer__disclaimer{
  font-size:.73rem;color:var(--tx-3);line-height:1.6;font-weight:500;
}
.app-footer__disclaimer strong{color:var(--tx-2);font-weight:700}
.app-footer__copy{
  font-size:.67rem;color:var(--tx-3);opacity:.6;font-weight:500;letter-spacing:.02em;
}
@media(max-width:600px){
  .app-footer{padding:20px 18px 22px}
  .hp-footer__inner{flex-direction:column;align-items:center;gap:10px}
}