.diy-hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 28px; border-radius: 24px; overflow: hidden; background: linear-gradient(120deg, #fb923c, #ea580c 60%, #c2410c); color: #fff; box-shadow: var(--shadow); }
.diy-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .22), transparent 40%); pointer-events: none; }
.diy-hero h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: .3em; } .diy-hero p { margin: 0; opacity: .92; max-width: 56ch; }
.diy-hero select { background: rgba(255, 255, 255, .95); color: #2b2118; border: 0; min-width: 240px; position: relative; z-index: 1; }
.diy-hero label { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; position: relative; z-index: 1; }
.diy-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.guide-list { display: grid; gap: 8px; }
.guide-btn { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); width: 100%; transition: .15s; }
.guide-btn:hover { border-color: var(--accent); transform: translateX(2px); } .guide-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.guide-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex: none; } .guide-ico .i { width: 24px; height: 24px; }
.guide-btn b { display: block; font-size: .95rem; } .guide-btn small { color: var(--muted); }
.guide-head { display: flex; gap: 16px; align-items: center; }
.guide-head .guide-ico { width: 64px; height: 64px; border-radius: 18px; } .guide-head .guide-ico .i { width: 34px; height: 34px; }
.progress { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #fbbf24); transition: width .3s; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: .15s; }
.steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); border: 1px solid var(--line-2); font-family: var(--font-display); }
.steps li.done { opacity: .62; } .steps li.done::before { content: '✓'; background: var(--good); color: #fff; border-color: transparent; } .steps li.done span { text-decoration: line-through; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; } .tools span { padding: 5px 11px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: .82rem; }
.pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .pro-grid div { padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); } .pro-grid b { display: block; margin-bottom: 4px; }
@media (max-width: 960px) { .diy-layout { grid-template-columns: 1fr; } .diy-hero { grid-template-columns: 1fr; } }