.guide-hero { padding-bottom: 42px; }
.guide-hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr); gap:clamp(24px,5vw,64px); align-items:center; }
.guide-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.ready-card { padding:24px; border:1px solid rgba(54,96,96,.18); border-radius:24px; background:rgba(255,253,248,.93); box-shadow:0 18px 45px rgba(42,65,67,.09); }
.ready-card h2 { margin:.6rem 0 1rem; font-size:clamp(1.35rem,3vw,1.8rem); }
.ready-card .small { margin-bottom:0; }
.narrow-guide { max-width:1040px; }
.calm-route { margin-bottom:32px; padding:16px 20px; border-left:5px solid var(--gold); border-radius:0 14px 14px 0; background:#fff8e6; color:var(--teal-deep); line-height:1.65; }
.guide-step { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(380px,1.28fr); gap:clamp(24px,5vw,56px); align-items:start; padding:46px 0; border-top:1px solid rgba(43,87,88,.15); scroll-margin-top:90px; }
.guide-step:first-of-type { border-top:0; }
.step-copy { position:sticky; top:90px; }
.step-number { display:inline-block; margin:0 0 10px; padding:5px 10px; border-radius:999px; background:var(--plum); color:#fff; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.step-copy h2 { margin:.15rem 0 .85rem; color:var(--teal-deep); font-size:clamp(1.55rem,3.3vw,2.3rem); line-height:1.08; }
.step-copy p { line-height:1.65; }
.done-check { margin-top:18px; padding:14px 16px; border-radius:14px; background:#e9f4ef; color:#214d48; }
.tiny-warning { padding:12px 14px; border-radius:12px; background:#fff4d7; color:#634b16; }
.screen-guide { margin:0; overflow:hidden; border:1px solid rgba(28,55,58,.19); border-radius:20px; background:#eef2f4; box-shadow:0 18px 45px rgba(30,49,52,.12); }
.screen-guide figcaption { padding:14px 18px 16px; background:#fffdf8; color:#455d5d; line-height:1.45; }
.screen-guide figcaption span { display:inline-block; margin-right:7px; padding:3px 8px; border-radius:999px; background:#f6e5b5; color:#5b4517; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.sites-home,.editor-shot,.modal-stage { min-height:390px; color:#3c4043; font:14px/1.35 Arial,sans-serif; }
.sites-home { padding-bottom:28px; background:#f8f9fa; }
.screen-top,.editor-bar { display:flex; align-items:center; gap:18px; min-height:58px; padding:0 20px; border-bottom:1px solid #dadce0; background:#fff; }
.sites-mark { font-size:21px; color:#5f6368; }
.sites-mark::before { content:""; display:inline-block; width:19px; height:24px; margin-right:10px; border-radius:3px; background:linear-gradient(135deg,#77568b 0 64%,#f3bd57 64%); vertical-align:middle; }
.screen-search { flex:1; max-width:440px; padding:12px 18px; border-radius:8px; background:#f1f3f4; color:#777; }
.screen-avatar { width:32px; height:32px; margin-left:auto; border-radius:50%; background:#c8d5d5; }
.template-label { margin:34px auto 18px; width:min(86%,760px); font-size:16px; font-weight:700; }
.blank-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; width:150px; height:124px; margin-left:7%; border:1px solid #dadce0; border-radius:8px; background:#fff; }
.plus { font-size:52px; font-weight:200; color:#77568b; line-height:.7; }
.recent-strip { margin:45px 7% 0; padding-top:20px; border-top:1px solid #dadce0; font-weight:700; }
.focus-ring { outline:4px solid #f2ad3e !important; outline-offset:3px; }
.editor-shot { background:#fff; }
.editor-bar { gap:14px; }
.editor-bar button,.modal-actions button { border:0; border-radius:4px; background:#1a73e8; color:#fff; padding:9px 18px; font-weight:700; }
.toolbar-space { flex:1; }
.field-focus { padding:7px 10px; border-bottom:2px solid #1a73e8; }
.editor-body { display:grid; grid-template-columns:1fr 230px; min-height:332px; }
.editor-body.no-panel { grid-template-columns:1fr; }
.page-canvas { padding:30px; background:linear-gradient(#f5f6f7 0 32%,#fff 32%); }
.page-title { display:flex; align-items:center; justify-content:center; min-height:90px; margin-top:34px; color:#4d5156; font-size:28px; }
.side-panel { padding:16px 14px; border-left:1px solid #dadce0; background:#fff; }
.tabs { display:flex; justify-content:space-between; gap:10px; padding-bottom:18px; border-bottom:1px solid #eee; font-size:12px; }
.tabs strong,.tab-focus { color:#77568b; border-bottom:3px solid #77568b; }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.tool-grid span { display:flex; min-height:58px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #dadce0; border-radius:6px; text-align:center; font-size:12px; }
.embed-tool { color:#5d3e70; }
.embed-tool b { margin-top:4px; }
.modal-stage { display:flex; align-items:center; justify-content:center; padding:26px; background:rgba(60,64,67,.5); }
.sites-modal { width:min(100%,520px); padding:24px; border-radius:9px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.sites-modal h3 { margin:0 0 20px; font-size:21px; }
.modal-tabs { display:flex; gap:26px; margin-bottom:18px; border-bottom:1px solid #dadce0; }
.modal-tabs span,.modal-tabs strong { padding:8px 4px 11px; }
.focus-underline { color:#1a73e8; border-bottom:3px solid #1a73e8; }
.code-area { min-height:150px; padding:16px; border:1px solid #9aa0a6; border-radius:4px; background:#fafafa; color:#5f6368; font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:18px; margin-top:22px; color:#1a73e8; font-weight:700; }
.resource-preview { overflow:hidden; min-height:190px; border:1px solid #c7d1d2; border-radius:5px; background:#f7f2e8; }
.preview-banner { padding:22px; background:#315f60; color:#fff; font-size:19px; font-weight:700; text-align:center; }
.preview-cards { display:flex; gap:10px; padding:22px; }
.preview-cards span { flex:1; height:70px; border-radius:8px; background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.preview-button { padding:7px 9px; border-radius:4px; }
.embed-frame { position:relative; margin-top:50px; min-height:190px; border:3px solid #1a73e8; background:#f7f2e8; }
.handle { position:absolute; width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:#1a73e8; }
.h1{left:-7px;top:-7px}.h2{right:-7px;top:-7px}.h3{left:-7px;bottom:-7px}.h4{right:-7px;bottom:-7px}
.resize-arrow { position:absolute; right:18px; bottom:14px; padding:4px 10px; border-radius:999px; background:#fff; color:#1a73e8; font-size:25px; font-weight:700; }
.publish-modal label { display:block; margin:16px 0; color:#5f6368; font-size:12px; font-weight:700; }
.fake-input,.fake-select { display:block; margin-top:7px; padding:11px 12px; border:1px solid #9aa0a6; border-radius:4px; color:#3c4043; font-size:14px; font-weight:400; }
.finish-line { margin-top:24px; padding:20px; border-radius:16px; background:#fff; color:var(--teal-deep); font-size:1.1rem; }
.source-note { margin-top:18px; color:#5c6d6c; font-size:.9rem; }

@media (max-width:820px) {
  .guide-hero-grid,.guide-step { grid-template-columns:1fr; }
  .step-copy { position:static; }
  .guide-step { padding:36px 0; }
}

@media (max-width:560px) {
  .screen-guide { border-radius:14px; }
  .sites-home,.editor-shot,.modal-stage { min-height:310px; font-size:11px; }
  .screen-top,.editor-bar { min-height:46px; padding:0 10px; gap:8px; }
  .screen-search { padding:8px; }
  .editor-body { grid-template-columns:1fr 118px; min-height:265px; }
  .page-canvas { padding:14px; }
  .page-title { font-size:18px; }
  .side-panel { padding:9px 6px; }
  .tabs { gap:4px; font-size:9px; }
  .tool-grid { gap:7px; }
  .tool-grid span { min-height:46px; font-size:9px; }
  .modal-stage { padding:14px; }
  .sites-modal { padding:18px; }
  .code-area { min-height:125px; font-size:10px; }
  .guide-actions .button { width:100%; text-align:center; }
}