@layer components{.ph-gold{background:var(--gold);color:var(--ink)}.ph-gold:before{display:none}.ph-gold .page-title{color:var(--ink)}.x-wrap{max-width:900px}.x-gate{max-width:620px;margin:0 auto}.x-gate h2{margin-bottom:12px;font-size:clamp(24px,2.6vw,32px)}.x-bar{border-radius:var(--r-m);background:var(--ink);color:var(--on-ink-ui);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-bottom:24px;padding:16px 20px;display:flex}.x-bar b{font-family:var(--font-display);color:var(--paper)}.x-who>span{font-size:14px;display:block}.x-left b{margin-right:4px;font-size:20px}.x-steps{counter-reset:x;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:30px;list-style:none;display:grid}.x-steps li{border-top:4px solid var(--line);font:600 14px/1.3 var(--font-display);color:var(--muted);counter-increment:x;padding-top:12px}.x-steps li:before{content:counter(x) ". "}.x-steps li.is-on{border-color:var(--green);color:var(--ink)}.x-steps li.is-done{border-color:var(--green-text);color:var(--green-text)}.x-panel h2,.x-done h2{margin-bottom:18px;font-size:clamp(22px,2.4vw,28px)}.x-panel h2:focus,.x-done h2:focus,.x-done:focus{outline:none}.x-share .check{margin-bottom:12px}.cat-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.cat{border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--paper);text-align:left;cursor:pointer;flex-direction:column;align-items:flex-start;gap:6px;min-height:96px;padding:18px;transition:border-color .15s,background-color .15s;display:flex}.cat:hover{border-color:var(--ink);background:var(--fog)}.cat b{font:700 16px/1.3 var(--font-display);color:var(--ink)}.cat span{color:var(--muted);font-size:14.5px}.panel-head{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px;display:flex}.panel-head h2{margin:0}.back{border:1.5px solid var(--line);border-radius:var(--pill);background:var(--paper);min-height:40px;font:600 14px var(--font-display);cursor:pointer;align-items:center;padding:0 16px;display:inline-flex}.back:hover{border-color:var(--ink)}.co-list{border-top:1px solid var(--line);margin-top:14px;list-style:none}.co{border-bottom:1px solid var(--line);align-items:center;gap:14px;padding:14px 4px;display:flex}.co-av{background:var(--mist);width:44px;height:44px;color:var(--green-text);font:700 14px var(--font-display);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.co div{flex:1;min-width:0}.co b{font:700 16px var(--font-display);color:var(--ink);display:block}.co span{color:var(--muted);font-size:14.5px}.x-wrap .chip{border-radius:var(--pill);background:var(--mist);color:var(--green-text);font:700 11.5px/1.5 var(--font-display);vertical-align:.1em;margin-left:8px;padding:2px 8px;display:inline-block}.x-wrap .empty{color:var(--muted);padding:28px 4px}.chosen{border-radius:var(--r-m);background:var(--fog);align-items:center;gap:14px;margin-bottom:24px;padding:16px 18px;display:flex}.x-done .tick{background:linear-gradient(90deg, var(--green) 0 22%, transparent 22% 26%, var(--gold) 26% 48%, transparent 48% 52%, var(--crimson) 52% 74%, transparent 74% 78%, var(--tick-4) 78% 100%);transform-origin:0;width:60px;height:5px;margin-bottom:22px;display:block;transform:skew(-28deg)}.x-foot{margin-top:32px}#xApp dialog{border-radius:var(--r-l);width:min(92vw,480px);box-shadow:0 40px 80px -30px color-mix(in srgb, var(--ink) 60%, transparent);color:var(--slate);border:0;padding:28px}#xApp dialog::backdrop{background:color-mix(in srgb, var(--ink) 55%, transparent)}#xApp .dlg-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:22px;display:flex}}