.tool-intro { display:grid; grid-template-columns:1.15fr .85fr; gap:1.5rem; align-items:center; margin:0 0 2rem; padding:clamp(1.4rem,4vw,2.5rem); border-radius:24px; background:linear-gradient(135deg,#eaf7fc,#fff 58%,#f6f1e8); box-shadow:var(--shadow); }
.tool-intro__visual { min-height:250px; border-radius:18px; background:center/cover no-repeat; }
.tool-intro__visual--alcohol { background-image:linear-gradient(135deg,rgba(5,41,60,.1),rgba(5,41,60,.62)),url("../images/card-alcohol-v2.webp"); }
.tool-intro__visual--weight { background-image:linear-gradient(135deg,rgba(5,41,60,.04),rgba(5,41,60,.45)),url("../images/service-weight-v1.webp"); }
.tool-privacy { display:inline-flex; gap:.45rem; align-items:center; color:var(--color-primary-dark); font-size:.88rem; font-weight:750; }
.tool-privacy::before { content:"✓"; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff; }
.tool-app { width:100%; max-width:100%; min-width:0; margin:2rem 0 3rem; overflow-wrap:anywhere; }
.tool-app * { min-width:0; }
.tool-choice { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.25rem 0 2rem; }
.tool-choice > br,.tool-grid > br,.tool-results > br,.tool-goals > br,.tool-habit-list > br,.tool-tag-list > br,.tools-links > br{display:none}
.tool-choice--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tool-choice__button { width:100%; min-height:132px; padding:1.15rem; border:1px solid var(--color-border); border-radius:16px; background:#fff; color:var(--color-text); text-align:left; white-space:normal; overflow-wrap:anywhere; font:inherit; cursor:pointer; box-shadow:0 10px 30px rgba(14,82,117,.07); transition:.18s ease; }
.tool-choice__button:hover,.tool-choice__button.is-active { border-color:var(--color-primary); background:var(--color-mint); transform:translateY(-2px); }
.tool-choice__button strong { display:block; margin-bottom:.4rem; color:var(--color-primary-dark); font-size:1.04rem; }
.tool-choice__button span { color:var(--color-muted); font-size:.86rem; line-height:1.45; }
.tool-panel { padding:clamp(1.25rem,4vw,2.25rem); border:1px solid var(--color-border); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.tool-panel[hidden],.tool-subpanel[hidden] { display:none; }
.tool-panel h2:first-child { margin-top:0; }
.tool-step { display:flex; align-items:flex-start; width:100%; max-width:100%; gap:.65rem; margin-bottom:1.2rem; color:var(--color-muted); font-size:.85rem; font-weight:800; letter-spacing:.05em; line-height:1.45; text-transform:uppercase; white-space:normal; overflow-wrap:anywhere; }
.tool-step b { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--color-primary); color:#fff; }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.tool-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tool-field { display:grid; gap:.4rem; font-weight:750; }
.tool-field small { color:var(--color-muted); font-weight:500; }
.tool-field input,.tool-field select { display:block; width:100%; max-width:100%; min-height:52px; padding:.72rem .8rem; border:1px solid #afc4cc; border-radius:10px; background:#fff; color:var(--color-text); font:inherit; }
.tool-field input:focus,.tool-field select:focus { outline:3px solid rgba(39,170,224,.2); border-color:var(--color-primary); }
.tool-toggle { display:flex; gap:.7rem; align-items:flex-start; margin:1rem 0; padding:1rem; border-radius:12px; background:var(--color-mint); font-weight:700; }
.tool-toggle input { width:22px; height:22px; margin-top:.1rem; }
.tool-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.tool-button-secondary { min-height:48px; padding:.75rem 1rem; border:1px solid var(--color-primary); border-radius:10px; background:#fff; color:var(--color-primary-dark); white-space:normal; overflow-wrap:anywhere; font:inherit; font-weight:750; cursor:pointer; }
.tool-results { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin:1.5rem 0; }
.tool-result { min-height:120px; padding:1.05rem; border-radius:14px; background:linear-gradient(145deg,var(--color-primary-dark),#073a57); color:#fff; }
.tool-result span { display:block; color:rgba(255,255,255,.7); font-size:.8rem; }
.tool-result strong { display:block; margin-top:.35rem; color:#fff; font-size:clamp(1.25rem,2.4vw,1.9rem); line-height:1.1; }
.tool-result--accent { background:linear-gradient(145deg,var(--color-primary),#167aab); }
.tool-summary { padding:1.2rem; border-left:4px solid var(--color-accent); border-radius:0 12px 12px 0; background:var(--color-sand); }
.tool-goals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.tool-goal { padding:1rem; border:1px solid var(--color-border); border-radius:14px; background:#fff; }
.tool-goal input { width:100%; margin-top:.4rem; padding:.55rem; border:1px solid #afc4cc; border-radius:8px; font:inherit; }
.tool-goal strong { display:block; margin-top:.65rem; color:var(--color-primary-dark); }
.tool-progress { height:12px; overflow:hidden; border-radius:999px; background:#dcecf2; }
.tool-progress span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--color-primary),var(--color-accent)); transition:width .35s ease; }
.tool-milestones { display:flex; justify-content:space-between; gap:.4rem; margin-top:.7rem; color:var(--color-muted); font-size:.73rem; }
.tool-milestones b.is-done { color:var(--color-primary-dark); }
.tool-habit-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.tool-habit { display:flex; gap:.65rem; align-items:flex-start; padding:.9rem; border:1px solid var(--color-border); border-radius:12px; }
.tool-habit input { width:21px; height:21px; flex:0 0 auto; }
.tool-tag-list { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0; }
.tool-tag { padding:.45rem .7rem; border-radius:999px; background:var(--color-mint); color:var(--color-primary-dark); font-size:.85rem; font-weight:750; }
.tool-warning { margin:1.25rem 0; padding:1rem 1.1rem; border:1px solid #ecc9b3; border-radius:12px; background:#fff4ec; }
.tools-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.tools-link { display:flex; flex-direction:column; min-height:220px; padding:1.25rem; border:1px solid var(--color-border); border-radius:18px; background:linear-gradient(145deg,#fff,var(--color-mint)); text-decoration:none; box-shadow:var(--shadow); }
.tools-link strong { color:var(--color-primary-dark); font-size:1.2rem; }
.tools-link span { margin-top:.65rem; color:var(--color-muted); }
.tools-link b { margin-top:auto; color:var(--color-primary); }
.tools-links--compact { margin:0 0 2.5rem; }
.tools-links--compact .tools-link { min-height:165px; }
@media(max-width:900px){.tool-intro{grid-template-columns:1fr}.tool-choice--four{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-results{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-goals,.tools-links{grid-template-columns:1fr}.tool-intro__visual{min-height:210px}}
@media(max-width:680px){.tool-intro{padding:1rem;border-radius:18px}.tool-intro__visual{min-height:0;aspect-ratio:4/3;background-position:center}.tool-intro__visual--weight{background-position:72% center}.tool-choice,.tool-choice--four,.tool-grid,.tool-grid--3,.tool-results,.tool-habit-list{grid-template-columns:1fr;gap:.65rem}.tool-choice{margin:.85rem 0 1.25rem}.tool-choice__button{min-height:88px;padding:.85rem}.tool-panel{padding:.85rem;border-radius:16px}.tool-field{gap:.25rem}.tool-field input,.tool-field select{min-height:48px;padding:.6rem .7rem}.tool-actions{display:grid;margin-top:.9rem}.tool-actions .button,.tool-actions button{width:100%}.tool-result{min-height:96px;padding:.85rem}.tool-results{margin:1rem 0}.tool-milestones{flex-wrap:wrap;justify-content:flex-start;gap:.65rem 1rem;font-size:.68rem}.tool-milestones b{flex:0 0 auto}.tools-link{min-height:170px}}