/* NexUZ Toolkit: page styles + the small home-page block */
:root{
  --tk-accent:#2f8a00;
  --tk-accent-dark:#236b00;
  --tk-accent-soft:rgba(47,138,0,.12);
  --tk-gold:#d98a00;
  --tk-line:rgba(22,53,43,.14);
  --tk-on-accent:#fff;
}
[data-theme="dark"]{
  --tk-accent:#6fd43a;
  --tk-accent-dark:#4aa31f;
  --tk-accent-soft:rgba(111,212,58,.14);
  --tk-gold:#f5b73d;
  --tk-line:rgba(231,237,245,.16);
  --tk-on-accent:#0b1f06;
}

/* ---------- home block ---------- */
.tk-home-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tk-home-card{
  display:flex; flex-direction:column; gap:8px; padding:24px 22px; text-decoration:none;
  transition:transform .2s ease;
}
.tk-home-card:hover{ transform:translateY(-3px); }
.tk-home-card strong{ font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; color:var(--pine-deep); }
.tk-home-card span:last-child{ color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
.tk-home-num{
  width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--tk-accent); color:var(--tk-on-accent); font-weight:800; font-size:.95rem;
}
.tk-home-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:26px; }
.tk-credit{ font-size:.9rem; color:var(--ink-soft); }
.tk-credit a{ font-weight:700; color:var(--ink); }
@media (max-width:900px){ .tk-home-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tk-home-grid{ grid-template-columns:1fr; } .tk-home-foot{ flex-direction:column; align-items:flex-start; } }

/* ---------- page head ---------- */
.tk-head{ padding-top:56px; }
.tk-head .section-head{ margin-bottom:22px; }
.tk-how{ max-width:700px; color:var(--ink-soft); }
.tk-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 18px; }
.tk-pill{
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 10px; border-radius:100px;
  border:1.5px solid var(--control-border); background:var(--control-bg); text-decoration:none; font-weight:700; font-size:.92rem;
  transition:transform .15s ease, background .15s ease;
}
.tk-pill:hover{ transform:translateY(-2px); background:var(--tk-accent-soft); }
.tk-pill-n{
  width:26px; height:26px; border-radius:50%; background:var(--tk-accent); color:var(--tk-on-accent);
  display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:800;
}
.tk-disc{ font-size:.86rem; color:var(--ink-soft); max-width:700px; opacity:.9; }

/* ---------- steps ---------- */
.tk-steps{ display:flex; flex-direction:column; gap:34px; padding:34px 0 70px; }
.tk-step{ padding:44px; scroll-margin-top:90px; }
.tk-step-top{ display:flex; align-items:center; gap:16px; }
.tk-badge{
  flex-shrink:0; width:52px; height:52px; border-radius:16px; background:var(--tk-accent); color:var(--tk-on-accent);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:1.7rem; font-weight:600;
  box-shadow:0 4px 0 var(--tk-accent-dark);
}
.tk-kicker{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.tk-step h3{ font-size:clamp(1.6rem,2.6vw,2.1rem); }
.tk-q{
  margin-top:22px; font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.35; color:var(--ink);
  padding-left:16px; border-left:4px solid var(--tk-accent);
}
.tk-desc{ margin-top:18px; max-width:720px; color:var(--ink-soft); font-size:1.03rem; }
.tk-small{ font-size:.88rem; color:var(--ink-soft); margin-top:10px; }
.tk-label{ display:block; font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 8px; }

/* step 1 */
.tk-hooks{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }
.tk-hook{ position:relative; padding:20px 20px 20px 60px; border-radius:18px; border:1.5px solid var(--tk-line); background:var(--control-bg); }
.tk-hook-n{
  position:absolute; left:18px; top:20px; width:28px; height:28px; border-radius:50%; background:var(--tk-accent-soft); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem;
}
.tk-hook h4{ font-family:'Fraunces',serif; font-weight:500; font-size:1.12rem; margin:0 0 6px; color:var(--pine-deep); }
.tk-hook p{ font-size:.96rem; color:var(--ink-soft); line-height:1.55; }
.tk-research{ margin-top:22px; max-width:760px; font-size:.97rem; color:var(--ink-soft); }
.tk-research a{ font-weight:700; color:var(--ink); }
.tk-activity{ margin-top:30px; padding:26px; border-radius:20px; background:var(--tk-accent-soft); border:1.5px dashed var(--tk-accent); }
.tk-activity h4, .tk-tool h4, .plan-box h4, .tk-end h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.25rem; margin:0 0 8px; color:var(--pine-deep); }
.tk-checks{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; }
.tk-check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; line-height:1.4; }
.tk-check input{ position:absolute; opacity:0; width:1px; height:1px; }
.tk-box{
  flex-shrink:0; width:26px; height:26px; border-radius:8px; border:2px solid var(--control-border); border-bottom-width:4px; background:var(--control-bg);
  display:flex; align-items:center; justify-content:center; margin-top:1px; transition:background .15s ease, border-color .15s ease;
}
.tk-check input:checked + .tk-box{ background:var(--tk-accent); border-color:var(--tk-accent-dark); }
.tk-check input:checked + .tk-box::after{ content:"✓"; color:var(--tk-on-accent); font-weight:900; font-size:.95rem; }
.tk-check input:focus-visible + .tk-box{ outline:3px solid var(--tk-accent); outline-offset:2px; }
.tk-check-t{ font-size:.96rem; }
.tk-result{ margin-top:16px; font-weight:700; min-height:1.4em; }
.tk-reflect{ margin-top:12px; font-style:italic; color:var(--ink-soft); }
.tk-take{ margin-top:28px; padding:20px 22px; border-radius:16px; background:var(--control-bg); border-left:5px solid var(--tk-accent); font-weight:600; line-height:1.55; }

/* step 2: challenge */
.tk-challenge{ border:2px solid var(--tk-accent); }
.tk-note{ margin-top:22px; padding:18px 20px; border-radius:16px; background:var(--tk-accent-soft); border:1.5px solid var(--tk-accent); }
.tk-note strong{ display:block; margin-bottom:6px; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase; }
.tk-note p{ font-size:.98rem; line-height:1.6; }
.ch-stats{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.ch-chip{ padding:10px 16px; border-radius:100px; font-weight:800; font-size:.95rem; border:2px solid var(--tk-line); border-bottom-width:4px; background:var(--control-bg); }
.ch-streak.on{ border-color:var(--tk-gold); color:var(--tk-gold); }
.ch-xp{ border-color:var(--tk-accent-dark); }
.ch-bar{ margin-top:16px; height:14px; border-radius:100px; background:var(--tk-line); overflow:hidden; }
.ch-bar-fill{ height:100%; width:0; border-radius:100px; background:var(--tk-accent); transition:width .5s ease; }
.ch-xpnote{ font-size:.84rem; color:var(--ink-soft); margin-top:10px; }
.ch-path{
  --amp:min(64px,15vw);
  list-style:none; margin:42px 0 10px; padding:0; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ch-path li{ display:flex; flex-direction:column; align-items:center; position:relative; }
.ch-path li:nth-child(2){ transform:translateX(calc(var(--amp) * .6)); }
.ch-path li:nth-child(3){ transform:translateX(var(--amp)); }
.ch-path li:nth-child(4){ transform:translateX(calc(var(--amp) * .6)); }
.ch-path li:nth-child(6){ transform:translateX(calc(var(--amp) * -.6)); }
.ch-path li:nth-child(7){ transform:translateX(calc(var(--amp) * -1)); }
.ch-node{
  width:66px; height:66px; border-radius:50%; border:0; cursor:pointer; font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem;
  background:var(--tk-line); color:var(--ink-soft); box-shadow:0 6px 0 rgba(0,0,0,.12); transition:transform .12s ease, box-shadow .12s ease;
}
.ch-node:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.12); }
.ch-node.done{ background:var(--tk-accent); color:var(--tk-on-accent); box-shadow:0 6px 0 var(--tk-accent-dark); font-family:'Manrope',sans-serif; font-weight:900; }
.ch-node.current{ background:var(--tk-accent); color:var(--tk-on-accent); box-shadow:0 6px 0 var(--tk-accent-dark); animation:chPulse 1.8s ease-in-out infinite; }
.ch-node.wait{ background:var(--tk-gold); color:#2b1b00; box-shadow:0 6px 0 rgba(0,0,0,.2); }
.ch-node.sel{ outline:4px solid var(--tk-accent-soft); outline-offset:3px; }
.ch-node:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.ch-day{ position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:14px; white-space:nowrap; font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.ch-start{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%); padding:4px 12px; border-radius:10px; background:var(--tk-gold); color:#2b1b00;
  font-weight:900; font-size:.74rem; letter-spacing:.06em; white-space:nowrap;
}
.ch-start::after{ content:""; position:absolute; bottom:-5px; left:50%; width:10px; height:10px; background:var(--tk-gold); transform:translateX(-50%) rotate(45deg); }
@keyframes chPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.ch-card{ margin-top:34px; padding:26px; border-radius:22px; border:2px solid var(--tk-line); border-bottom-width:6px; background:var(--control-bg); }
.ch-tag{ display:inline-block; padding:4px 12px; border-radius:100px; background:var(--tk-accent); color:var(--tk-on-accent); font-weight:900; font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; }
.ch-card h4{ font-family:'Fraunces',serif; font-weight:500; font-size:1.5rem; margin:14px 0 10px; color:var(--pine-deep); }
.ch-card p{ line-height:1.6; }
.ch-tip{ margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--tk-accent-soft); font-size:.92rem; }
.ch-q{ margin-top:22px; font-weight:800; font-size:1.05rem; }
.ch-answers{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.ch-btn{
  font:inherit; font-weight:800; font-size:.95rem; padding:13px 18px; border-radius:16px; cursor:pointer; color:var(--ink);
  background:var(--control-bg); border:2px solid var(--control-border); border-bottom-width:5px; transition:transform .1s ease;
}
.ch-btn:hover{ background:var(--tk-accent-soft); }
.ch-btn:active{ transform:translateY(3px); border-bottom-width:2px; }
.ch-btn:focus-visible{ outline:3px solid var(--tk-accent); outline-offset:2px; }
.ch-btn-primary{ background:var(--tk-accent); color:var(--tk-on-accent); border-color:var(--tk-accent-dark); }
.ch-btn-primary:hover{ background:var(--tk-accent); filter:brightness(1.06); }
.ch-honest{ margin-top:14px; font-style:italic; color:var(--ink-soft); font-weight:700; }
.ch-fb{ margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--tk-accent-soft); border:1.5px solid var(--tk-accent); font-weight:700; }
.ch-locked{ color:var(--ink-soft); font-weight:700; }
.ch-summary{ margin-top:26px; padding:26px; border-radius:22px; background:var(--tk-accent-soft); border:2px solid var(--tk-accent); }
.ch-summary h4{ font-family:'Fraunces',serif; font-weight:500; font-size:1.4rem; margin:0 0 8px; color:var(--pine-deep); }
.ch-dots{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.ch-dot{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--control-bg); border:2px solid var(--tk-line); }
.ch-dot.less{ background:var(--tk-accent); border-color:var(--tk-accent-dark); color:var(--tk-on-accent); }
.ch-dot.same{ background:var(--control-bg); border-color:var(--tk-accent); }
.ch-dot.more{ background:var(--control-bg); border-color:var(--tk-gold); }
.ch-summary .btn{ margin-top:14px; }
.ch-reset{ margin-top:26px; background:none; border:0; font:inherit; font-size:.85rem; color:var(--ink-soft); text-decoration:underline; cursor:pointer; padding:4px 0; }

/* step 3 */
.tk-tool{ margin-top:34px; padding-top:28px; border-top:1.5px solid var(--tk-line); }
.tk-tool > p{ max-width:720px; color:var(--ink-soft); }
.tk-input, .if-txt, .if-sel{
  font:inherit; color:var(--ink); background:var(--control-bg); border:2px solid var(--control-border); border-bottom-width:4px; border-radius:14px; padding:12px 14px; width:100%;
}
.tk-input:focus, .if-txt:focus, .if-sel:focus{ outline:3px solid var(--tk-accent-soft); border-color:var(--tk-accent); }
.tk-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.tk-chip{
  font:inherit; font-size:.9rem; font-weight:600; padding:9px 14px; border-radius:100px; cursor:pointer; color:var(--ink);
  background:var(--control-bg); border:1.5px solid var(--control-border); text-align:left;
}
.tk-chip:hover{ background:var(--tk-accent-soft); border-color:var(--tk-accent); }
.if-rows{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.if-row{ display:grid; grid-template-columns:auto minmax(150px,1fr) auto minmax(180px,1.4fr); gap:10px; align-items:center; }
.if-w{ font-weight:800; }
.tk-rules{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.tk-rule{ padding:18px; border-radius:16px; border:1.5px solid var(--tk-line); background:var(--control-bg); }
.tk-rule h4{ font-family:'Fraunces',serif; font-weight:500; font-size:1.1rem; margin:0 0 6px; color:var(--pine-deep); }
.tk-rule p{ font-size:.94rem; color:var(--ink-soft); }
.plan-box{ margin-top:34px; padding:26px; border-radius:22px; background:var(--tk-accent-soft); border:2px dashed var(--tk-accent); }
.plan-text{ white-space:pre-line; line-height:1.7; margin:10px 0 16px; min-height:1.6em; }
.plan-text.empty{ color:var(--ink-soft); font-style:italic; }
.plan-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* step 4 */
.m-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.m-tab{
  font:inherit; font-weight:700; font-size:.92rem; padding:10px 16px; border-radius:100px; cursor:pointer; color:var(--ink);
  background:var(--control-bg); border:2px solid var(--control-border); border-bottom-width:4px;
}
.m-tab[aria-selected="true"]{ background:var(--tk-accent); color:var(--tk-on-accent); border-color:var(--tk-accent-dark); }
.m-panel{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.m-panel[hidden]{ display:none; }
.m-panel li{ padding:16px 18px; border-radius:14px; border:1.5px solid var(--tk-line); background:var(--control-bg); line-height:1.5; }
.m-surprise{ margin-top:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.m-out{ font-weight:700; max-width:560px; }
.tk-list{ margin:14px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:10px; color:var(--ink); }
.tk-list li::marker{ color:var(--tk-accent); font-weight:800; }
.buddy-msg{ margin-top:22px; padding:22px; border-radius:18px; background:var(--control-bg); border:1.5px solid var(--tk-line); }
.buddy-msg > p{ color:var(--ink); line-height:1.65; margin-bottom:16px; }
.buddy-msg .tk-label{ margin-top:0; }
.tk-end{ padding:40px 44px; text-align:left; }
.tk-end p{ margin-top:8px; color:var(--ink-soft); max-width:700px; }
.tk-end-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.tk-end .tk-credit{ margin-top:14px; }

@media (max-width:760px){
  .tk-step{ padding:26px 20px; }
  .tk-hooks, .tk-checks, .m-panel{ grid-template-columns:1fr; }
  .ch-answers{ grid-template-columns:1fr; }
  .tk-rules{ grid-template-columns:1fr; }
  .if-row{ grid-template-columns:1fr; gap:6px; padding:12px; border-radius:14px; border:1.5px solid var(--tk-line); }
  .tk-end{ padding:28px 22px; }
  .ch-card, .ch-summary, .plan-box{ padding:20px; }
}
@media (prefers-reduced-motion:reduce){ .ch-node.current{ animation:none; } .ch-bar-fill{ transition:none; } }