/* ===================================================================
 * Vacuum Sealer Expert — tools.css
 * Engagement micro-apps (meal planner, waste calc, match quiz, etc.)
 * =================================================================== */

.vse-tools-page{padding:48px 0;}
.vse-tools-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:18px;}

.vse-tool{
  background:var(--vse-bg-elev);border:1px solid var(--vse-line);border-radius:18px;
  padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--vse-shadow-1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.vse-tool:hover{transform:translateY(-2px);box-shadow:var(--vse-shadow-2);}
.vse-tool__head{display:flex;align-items:center;gap:10px;}
.vse-tool__icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--vse-grad-accent);color:#fff;}
.vse-tool__title{font-family:var(--vse-head);font-size:18px;margin:0;}
.vse-tool__desc{color:var(--vse-text-soft);font-size:13px;margin:0 0 6px;}

.vse-tool__field{display:flex;flex-direction:column;gap:6px;}
.vse-tool__field label{font-size:12px;color:var(--vse-text-soft);text-transform:uppercase;letter-spacing:.14em;}
.vse-tool__field input,
.vse-tool__field select{padding:10px 12px;border-radius:10px;background:var(--vse-surface);border:1px solid var(--vse-line);color:var(--vse-text);}
.vse-tool__row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.vse-tool__output{background:var(--vse-surface);border:1px dashed var(--vse-line-2);border-radius:12px;padding:14px;text-align:center;}
.vse-tool__output strong{display:block;font-family:var(--vse-head);font-size:36px;color:var(--vse-accent);}
.vse-tool__output em{display:block;font-style:normal;color:var(--vse-text-soft);font-size:13px;margin-top:4px;}
.vse-tool__progress{height:6px;background:var(--vse-surface-2);border-radius:99px;overflow:hidden;}
.vse-tool__progress span{display:block;height:100%;width:0%;background:var(--vse-grad-accent);transition:width .6s ease;}

.vse-tool__chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--vse-surface-2);font-size:12px;color:var(--vse-text-soft);}
.vse-tool__hint{font-size:12.5px;color:var(--vse-text-soft);margin:6px 0 0;line-height:1.45;}
.vse-tool__head + .vse-tool__desc + .vse-tool__row,
.vse-tool__head + .vse-tool__row{margin-top:4px;}

.vse-tool__chips{display:flex;flex-wrap:wrap;gap:6px;}

/* Quiz */
.vse-quiz__step{display:none;}
.vse-quiz__step.is-active{display:block;animation:vseFade .3s ease;}
.vse-quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.vse-quiz__opt{padding:10px;border:1px solid var(--vse-line);border-radius:12px;background:var(--vse-surface);text-align:left;}
.vse-quiz__opt.is-selected{border-color:var(--vse-accent);background:linear-gradient(180deg, rgba(16,185,129,.12), transparent 70%);}
.vse-quiz__nav{display:flex;justify-content:space-between;margin-top:12px;}
.vse-quiz__result{padding:14px;border-radius:14px;background:var(--vse-surface);display:none;}
.vse-quiz__result.is-shown{display:block;animation:vseFade .3s ease;}
.vse-quiz__result h4{font-family:var(--vse-head);margin:0 0 6px;}

/* Meal planner table */
.vse-mp__table{width:100%;border-collapse:collapse;font-size:13px;}
.vse-mp__table th,.vse-mp__table td{padding:8px;border:1px solid var(--vse-line);text-align:left;}
.vse-mp__table th{background:var(--vse-surface);}

/* Visualizer */
.vse-viz{position:relative;width:100%;height:240px;border-radius:14px;overflow:hidden;background:var(--vse-bg-elev);border:1px solid var(--vse-line);}
.vse-viz__cell{position:absolute;border:1px solid var(--vse-line-2);background:var(--vse-surface);border-radius:8px;display:grid;place-items:center;font-size:12px;color:var(--vse-text-soft);}
.vse-viz__cell.is-on{background:var(--vse-grad-accent);color:#fff;border-color:transparent;}

/* Confetti */
.vse-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.vse-confetti__chip{position:absolute;width:8px;height:14px;background:var(--vse-accent);animation:vseConfetti 1.4s ease forwards;}
@keyframes vseConfetti{
  0%{transform:translateY(-20px) rotate(0);opacity:1;}
  100%{transform:translateY(220px) rotate(420deg);opacity:0;}
}