.tool-cards {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
}
.tool-card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   min-height: 260px;
   padding: 30px;
   border: 1px solid #dce6f7;
   border-radius: 25px;
   background: #fff;
   transition:
      transform 0.25s,
      box-shadow 0.25s;
}
.tool-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 22px 35px -28px #244c9855;
}
.tool-card-mark {
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: #e8eeff;
   color: var(--blue);
   font-size: 22px;
}
.tool-card h2 {
   margin: 22px 0 0;
   font-size: 23px;
   line-height: 1.2;
   letter-spacing: -0.6px;
}
.tool-card p {
   margin: 12px 0 auto;
   padding-bottom: 22px;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.65;
}

.tool-workspace {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
   gap: 28px;
   align-items: start;
}
.wheel-panel,
.wheel-controls,
.goal-sphere,
.goals-preview,
.insight-card {
   border: 1px solid #dce6f7;
   border-radius: 26px;
   background: #fff;
}
.wheel-panel {
   position: sticky;
   top: 24px;
   padding: 22px 22px 26px;
   text-align: center;
}
.wheel-hint {
   margin: 6px 0 0;
   color: var(--muted);
   font-size: 14px;
}
.wheel-chart {
   display: block;
   width: 100%;
   height: auto;
   stroke: none;
}
.wheel-sector {
   transition: d 0.25s ease;
}
.wheel-label {
   fill: var(--ink);
   font-size: 14px;
   font-weight: 650;
}
.wheel-stats {
   display: flex;
   justify-content: center;
   gap: 34px;
   margin: 8px 0 0;
}
.wheel-stats div {
   display: flex;
   flex-direction: column-reverse;
   gap: 2px;
}
.wheel-stats dt {
   color: var(--muted);
   font-size: 12px;
}
.wheel-stats dd {
   margin: 0;
   font-size: 30px;
   font-weight: 750;
   letter-spacing: -1px;
}
.wheel-verdict {
   margin: 10px 0 0;
   color: var(--muted);
   font-size: 14px;
}

.wheel-controls {
   display: grid;
   gap: 6px;
   padding: 14px 18px;
}
.wheel-row {
   display: grid;
   grid-template-columns: 12px minmax(0, 1fr) minmax(0, 1.2fr) 28px;
   align-items: center;
   gap: 12px;
   min-height: 52px;
}
.wheel-row + .wheel-row {
   border-top: 1px solid #eef2fa;
}
.sphere-dot {
   display: inline-block;
   flex-shrink: 0;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--sphere-color);
}
.sphere-name {
   min-width: 0;
   color: var(--ink);
   font-size: 15px;
   font-weight: 600;
}
.goal-input {
   width: 100%;
   min-width: 0;
   border: 1px solid transparent;
   border-radius: 10px;
   padding: 9px 10px;
   background: transparent;
   color: var(--ink);
   font: inherit;
   font-size: 15px;
   font-weight: 600;
}
.goal-input:focus {
   border-color: #dce6f7;
   background: #f6f8ff;
   outline: none;
}
.sphere-score {
   width: 100%;
   height: 6px;
   margin: 0;
   border-radius: 999px;
   background: linear-gradient(to right, var(--sphere-color) var(--fill, 44%), #e6ecf7 var(--fill, 44%));
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
}
.sphere-score::-webkit-slider-thumb {
   width: 22px;
   height: 22px;
   border: 3px solid var(--sphere-color);
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 2px 6px #0b1b4d33;
   -webkit-appearance: none;
}
.sphere-score::-moz-range-thumb {
   width: 16px;
   height: 16px;
   border: 3px solid var(--sphere-color);
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 2px 6px #0b1b4d33;
}
.sphere-score:focus-visible {
   outline: 2px solid var(--sphere-color);
   outline-offset: 6px;
}
.sphere-value {
   font-size: 17px;
   font-weight: 750;
   text-align: right;
}

.wheel-insights {
   margin-top: var(--section-gap);
}
.wheel-insights h2,
.goals-preview h2,
.related-tools h2 {
   margin: 0 0 var(--heading-gap);
   font-size: 26px;
   letter-spacing: -0.8px;
}
.insight-cards {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px;
}
.insight-card {
   padding: 24px;
   border-top: 5px solid var(--sphere-color);
}
.insight-card h3 {
   margin: 0;
   font-size: 20px;
}
.insight-card p {
   margin: 10px 0 0;
   color: #576a8c;
   font-size: 15px;
   line-height: 1.7;
}
.insight-habit span {
   display: block;
   color: var(--muted);
   font-size: 12px;
   font-weight: 650;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}
.insight-card .insight-habit {
   color: var(--ink);
   font-weight: 650;
}

.tool-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 24px;
   margin-top: var(--block-gap);
}

.tool-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   margin: var(--section-gap) 0;
   padding: 34px 38px;
   border-radius: 28px;
   color: #fff;
   background:
      radial-gradient(80% 120% at 100% 100%, #22c3b5cc, transparent 60%),
      linear-gradient(135deg, #1b3fd6, #2962ff);
}
.tool-cta h2 {
   margin: 0;
   font-size: 26px;
   letter-spacing: -0.8px;
}
.tool-cta p {
   margin: 8px 0 0;
   max-width: 620px;
   opacity: 0.88;
   font-size: 15px;
   line-height: 1.6;
}
.tool-cta .button {
   flex-shrink: 0;
}

.tool-note {
   margin: 0 0 var(--block-gap);
   padding: 14px 18px;
   border-radius: 14px;
   background: #e8eeff;
   color: var(--blue-deep);
   font-size: 14px;
}

.goal-spheres {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: start;
   gap: 10px;
}
.goal-inputs { clear: both; display: grid; gap: 6px; padding-top: 4px; }
.goal-row { position: relative; min-width: 0; }
.goal-row .goal-input { min-width: 0; margin: 0; padding-right: 38px; }
.goal-add { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--blue); font-size: 12px; font-weight: 650; }
.goal-add > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #eaf0ff; font-size: 18px; line-height: 1; }
.goal-add:hover > span { background: #dce6ff; }
.goal-remove { display: grid; place-items: center; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #7786a0; line-height: 1; }
.goal-remove svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.goal-remove:hover { background: #fff0f0; color: #b44040; }
.goal-remove[hidden] { display: none; }
.goal-sphere {
   min-width: 0;
   margin: 0;
   padding: 0;
   border-radius: 16px;
}
.goal-sphere.is-focus {
   border-color: var(--sphere-color);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--sphere-color) 18%, transparent);
}
.goal-sphere-summary {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 54px;
   padding: 12px 14px;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   list-style: none;
}
.goal-sphere-summary::-webkit-details-marker { display: none; }
.goal-sphere-name { flex: 1; min-width: 0; }
.goal-count { padding: 4px 7px; border-radius: 8px; background: #f2f5fb; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.goal-chevron { width: 6px; height: 6px; flex: 0 0 6px; margin-left: 3px; border-right: 1.5px solid #7b8ba5; border-bottom: 1.5px solid #7b8ba5; transform: translateY(-2px) rotate(45deg); }
.goal-sphere[open] > .goal-sphere-summary .goal-chevron { transform: translateY(1px) rotate(225deg); }
.goal-sphere-summary .focus-badge { margin-left: 0; padding: 3px 6px; font-size: 10px; }
.goal-editor { min-width: 0; margin: 0; padding: 0 14px 12px; border: 0; }
.focus-badge {
   margin-left: auto;
   padding: 4px 9px;
   border-radius: 999px;
   background: var(--sphere-color);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
}
.goal-input {
   display: block;
   clear: both;
   margin-top: 6px;
   border-color: #e3e9f6;
   font-weight: 500;
}
.goal-examples {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   margin-top: 8px;
}
.goal-ideas { margin-top: 4px; }
.goal-ideas > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.goal-ideas > summary::-webkit-details-marker { display: none; }
.goal-ideas > summary:after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.goal-ideas[open] > summary:after { transform: translateY(1px) rotate(225deg); }
.goal-examples .example-chip {
   font-size: 12px;
}

.goals-preview {
   margin-top: 0;
   margin-bottom: 32px;
   padding: 22px;
}
.goals-page-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 14px;
}
.goals-page-header h1 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.9px; }
.tool-goals .site-header { height: 80px; }
.tool-goals .guide-main { padding-top: 12px; }
.tool-goals .goals-preview { margin: 0 0 18px; padding: 0; border: 0; border-radius: 0; background: none; }
.tool-goals .tool-actions { margin-top: 14px; }
.tool-goals .goal-themes { gap: 6px; }
.tool-goals .goal-themes button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.tool-goals .theme-swatch { width: 14px; height: 14px; }
@media (max-width: 600px) {
   .tool-goals .site-header { height: 72px; }
   .goals-page-header { gap: 10px; }
}
.goal-themes {
   display: flex;
   gap: 8px;
}
.goal-themes button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 38px;
   padding: 7px 13px;
   border: 1px solid #dce6f7;
   border-radius: 999px;
   background: #fff;
   color: var(--ink);
   font: inherit;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
}
.goal-themes button[aria-pressed='true'] {
   border-color: var(--blue);
   box-shadow: 0 0 0 2px #2962ff33;
}
.theme-swatch {
   width: 16px;
   height: 16px;
   border-radius: 50%;
}
.theme-swatch-aurora {
   background: linear-gradient(135deg, #1b3fd6, #22c3b5);
}
.theme-swatch-sunrise {
   background: linear-gradient(135deg, #ff8a65, #ffd194);
}
.theme-swatch-mint {
   background: linear-gradient(135deg, #b8ecdf, #e7fbf5);
   box-shadow: inset 0 0 0 1px #9fd8c9;
}

.goals-map {
   --map-text: #fff;
   --map-muted: rgba(255, 255, 255, 0.7);
   --map-cell: rgba(255, 255, 255, 0.13);
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
   padding: 14px;
   border-radius: 22px;
   background:
      radial-gradient(80% 80% at 100% 100%, rgba(34, 195, 181, 0.55), transparent 70%),
      linear-gradient(135deg, #1b3fd6, #2962ff);
   color: var(--map-text);
}
.goals-map[data-theme='sunrise'] {
   --map-text: #3b1a0f;
   --map-muted: rgba(59, 26, 15, 0.6);
   --map-cell: rgba(255, 255, 255, 0.55);
   background: linear-gradient(135deg, #ff8a65, #ffd194);
}
.goals-map[data-theme='mint'] {
   --map-text: #0b3b36;
   --map-muted: rgba(11, 59, 54, 0.6);
   --map-cell: rgba(255, 255, 255, 0.75);
   background: linear-gradient(135deg, #d9f7ef, #b8ecdf);
}
.goals-map-cell {
   min-width: 0;
   min-height: 110px;
   padding: 12px;
   border-radius: 16px;
   background: var(--map-cell);
}
.goals-map-name {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 8px;
   font-size: 14px;
   font-weight: 750;
}
.goals-map-name .sphere-dot {
   width: 9px;
   height: 9px;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.goals-map-cell ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.goals-map-cell li {
   font-size: 13px;
   line-height: 1.4;
   overflow-wrap: anywhere;
}
.goals-map-cell li + li {
   margin-top: 6px;
}
.goals-map-cell li:not(.goals-map-empty)::before {
   content: '• ';
}
.goals-map-empty {
   color: var(--map-muted);
}
.goals-map-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
}
.goals-map-center strong {
   font-size: 40px;
   letter-spacing: -1.5px;
}
.goals-map-center span {
   color: var(--map-muted);
   font-size: 13px;
   font-weight: 650;
}

@media (max-width: 900px) {
   .tool-cards,
   .tool-workspace,
   .insight-cards,
   .goal-spheres {
      grid-template-columns: minmax(0, 1fr);
   }
   .wheel-panel {
      position: static;
   }
   .tool-cta {
      flex-direction: column;
      align-items: flex-start;
      padding: 28px;
   }
}

@media (max-width: 600px) {
   .wheel-label {
      font-size: 19px;
   }
   .wheel-panel {
      padding: 14px 10px 22px;
   }
   .wheel-row {
      grid-template-columns: 12px minmax(0, 1fr) 28px;
      row-gap: 0;
   }
   .sphere-score {
      grid-column: 2 / 4;
      grid-row: 2;
      margin-bottom: 6px;
   }
   .goals-preview {
      padding: 16px;
   }
   .goals-map {
      gap: 6px;
      padding: 8px;
   }
   .goals-map-cell {
      min-height: 92px;
      padding: 9px;
      border-radius: 12px;
   }
   .goals-map-name {
      font-size: 11px;
   }
   .goals-map-cell li {
      font-size: 10px;
   }
   .goals-map-center strong {
      font-size: 26px;
   }
}

@media print {
   body.is-printing-goals * {
      visibility: hidden;
   }
   body.is-printing-goals .goals-map,
   body.is-printing-goals .goals-map * {
      visibility: visible;
   }
   body.is-printing-goals .goals-map {
      position: absolute;
      inset: 0 0 auto;
      border: 0;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
   }
   body.is-printing-goals .goals-map-cell {
      min-height: 280px;
   }
}

.tool-card h3 {
   margin: 22px 0 0;
   font-size: 21px;
   line-height: 1.2;
   letter-spacing: -0.5px;
}
.related-tools {
   margin-top: var(--section-gap);
}
.related-tools .tool-cards {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}
.related-tools .tool-card {
   min-height: 0;
}
@media (max-width: 900px) {
   .related-tools .tool-cards {
      grid-template-columns: minmax(0, 1fr);
   }
}

.wheel-controls-top {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: 4px 16px;
   padding: 6px 0 10px;
   border-bottom: 1px solid #eef2fa;
}
.wheel-prompt {
   margin: 0;
   color: var(--ink);
   font-size: 15px;
   font-weight: 700;
}
.wheel-progress {
   margin: 0;
   color: var(--blue);
   font-size: 13px;
   font-weight: 650;
}
.wheel-row.is-unrated .sphere-score {
   background: #e6ecf7;
}
.wheel-row.is-unrated .sphere-score::-webkit-slider-thumb {
   border-color: #c5d2ec;
}
.wheel-row.is-unrated .sphere-score::-moz-range-thumb {
   border-color: #c5d2ec;
}
.wheel-row.is-unrated .sphere-value {
   color: #b4bfd4;
}