.stock-usage-guide main { width:min(880px,calc(100% - 24px)); }
.stock-usage-guide section { margin-top:18px;padding:clamp(20px,4vw,30px);border:1px solid #e0e4e7;border-radius:15px;background:#fff;box-shadow:0 2px 9px rgba(20,28,38,.055);scroll-margin-top:100px; }
.stock-usage-guide h2 { margin:0 0 14px; }
.guide-nav { margin:28px 0 8px;padding:17px;border:1px solid #dfe4e7;border-radius:14px;background:#f5f7f8; }
.guide-nav-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px; }
.guide-nav-head p { margin:0;color:#555c65;font-size:.8rem;font-weight:900; }
.guide-nav-head > span { display:none;color:#747f86;font-size:.72rem;font-weight:800;white-space:nowrap; }
.guide-nav-track { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.guide-nav a { display:flex;align-items:center;min-height:44px;padding:9px 12px;border:1px solid #dce2e5;border-radius:9px;background:#fff;color:#273039;font-size:.82rem;font-weight:900;line-height:1.5;text-decoration:none; }
.guide-nav a:hover { border-color:#078b3b; }
.stock-usage-guide .feature-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0; }
.feature-summary > div { padding:14px;border:1px solid #dce8e1;border-radius:12px;background:#f2faf6; }
.feature-summary b { display:block;color:#087c40;font-size:.92rem;margin-bottom:6px; }
.feature-summary span { display:block;color:#555f59;font-size:.86rem;line-height:1.7; }
.instruction-steps { list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;margin:20px 0; }
.instruction-steps li { position:relative;margin:0;padding:18px 14px;border:1px solid #dce8e1;border-radius:12px;background:#f6fbf8;counter-increment:step; }
.instruction-steps li::before { content:counter(step);display:grid;place-items:center;width:32px;height:32px;margin-bottom:12px;border-radius:50%;background:#078b3b;color:#fff;font-size:.9rem;font-weight:900; }
.instruction-steps b { display:block;font-size:.92rem;margin-bottom:6px; }
.instruction-steps span { display:block;color:#5b655f;font-size:.86rem;line-height:1.7; }
.stock-usage-guide .note { padding:13px 15px;border-left:4px solid #15974f;border-radius:0 9px 9px 0;background:#eef9f2;color:#365443;font-size:.9rem;line-height:1.7; }
.stock-usage-guide .guide-action { display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid #9dceb0;border-radius:10px;background:#edf9f2;color:#087c40;font-weight:900;text-decoration:none; }
.stock-usage-guide a:focus-visible { outline:3px solid #f39800;outline-offset:3px; }
html[data-theme="dark"] .stock-usage-guide section { border-color:#2d3833;background:#151e1a; }
html[data-theme="dark"] .stock-usage-guide .guide-nav { border-color:#35433c;background:#18221d; }
html[data-theme="dark"] .stock-usage-guide .guide-nav-head p { color:#c9d4ce; }
html[data-theme="dark"] .stock-usage-guide .guide-nav a { border-color:#354a3e;background:#111b16;color:#e5f0e9; }
html[data-theme="dark"] .stock-usage-guide .feature-summary > div,html[data-theme="dark"] .stock-usage-guide .instruction-steps li { border-color:#354a3e;background:#14241b; }
html[data-theme="dark"] .stock-usage-guide .feature-summary b { color:#81e2a5; }
html[data-theme="dark"] .stock-usage-guide .feature-summary span,html[data-theme="dark"] .stock-usage-guide .instruction-steps span { color:#bccbc2; }
html[data-theme="dark"] .stock-usage-guide .note,html[data-theme="dark"] .stock-usage-guide .guide-action { border-color:#3e7652;background:#172c20;color:#b7e8c9; }
@media(max-width:620px) {
 .guide-nav-head > span { display:block; }
 .guide-nav-track { display:flex;overflow-x:auto;gap:8px;padding:3px 3px 8px;scroll-snap-type:x proximity; }
 .guide-nav a { flex:0 0 165px;scroll-snap-align:start; }
 .stock-usage-guide .feature-summary,.instruction-steps { grid-template-columns:1fr; }
 .instruction-steps li { display:grid;grid-template-columns:32px 1fr;gap:4px 12px; }
 .instruction-steps li::before { grid-row:1/3;margin:0; }
 .instruction-steps b { margin:0; }
}

.stock-usage-guide .guide-card-shot{width:min(100%,440px);margin:24px auto}
.stock-usage-guide .guide-card-shot img{display:block;width:100%;height:auto;border-radius:14px}
.stock-usage-guide .guide-instruction-shot{margin:22px 0;overflow:hidden;border:1px solid #d9e4de;border-radius:14px;background:#fff}
.stock-usage-guide .guide-instruction-shot img{display:block;width:100%;height:auto}
.stock-usage-guide figcaption{padding:12px 15px;color:#555d66;font-size:.86rem;line-height:1.7}
.stock-usage-guide .guide-card-shot figcaption{padding:10px 0 0}
.stock-usage-guide .guide-shot-note{color:#67746c;font-size:.84rem}
html[data-theme="dark"] .stock-usage-guide .guide-instruction-shot{border-color:#34443b;background:#182023}
html[data-theme="dark"] .stock-usage-guide figcaption,html[data-theme="dark"] .stock-usage-guide .guide-shot-note{color:#c6d4cc}

/* Shared BitBull install illustrations, with StockBull identity. */
.stock-usage-guide #home-screen .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
.stock-usage-guide #home-screen .step { position: relative; min-width: 0; padding: 18px 12px 14px; border: 1px solid #dce1e5; border-radius: 13px; background: #f8fafb; text-align: center; }
.stock-usage-guide #home-screen .step-number { position: absolute; top: -10px; left: -7px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #13934c; color: #fff; font-size: .85rem; font-weight: 900; box-shadow: 0 2px 7px rgba(0,0,0,.16); }
.stock-usage-guide #home-screen .step-visual { display: grid; min-height: 96px; place-items: center; margin-bottom: 10px; }
.stock-usage-guide #home-screen .safari-compass { position: relative; display: grid; width: 62px; height: 62px; place-items: center; border: 3px solid #fff; border-radius: 17px; background: radial-gradient(circle at center,#e9fbff 0 36%,#16b9f3 38% 68%,#087fd3 70% 100%); box-shadow: 0 2px 9px rgba(0,86,150,.24); }
.stock-usage-guide #home-screen .safari-compass::before { content: ""; width: 7px; height: 45px; border-radius: 5px; background: linear-gradient(180deg,#ef3f43 0 49%,#fff 50% 100%); transform: rotate(38deg); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.stock-usage-guide #home-screen .safari-compass::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #1474b9; }
.stock-usage-guide #home-screen .share-icon { position: relative; width: 62px; height: 62px; color: #087cde; }
.stock-usage-guide #home-screen .share-icon::before { content: ""; position: absolute; z-index: 1; left: 9px; bottom: 4px; width: 40px; height: 37px; border: 5px solid currentColor; border-top: 0; border-radius: 0 0 9px 9px; background: linear-gradient(currentColor,currentColor) left top / 13px 5px no-repeat, linear-gradient(currentColor,currentColor) right top / 13px 5px no-repeat; }
.stock-usage-guide #home-screen .share-icon::after { content: "↑"; position: absolute; z-index: 2; left: 50%; top: -12px; font-size: 3.2rem; font-weight: 500; line-height: 1; transform: translateX(-50%); }
.stock-usage-guide #home-screen .add-home { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #d7dce0; border-radius: 10px; background: #fff; font-size: .82rem; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.stock-usage-guide #home-screen .add-home b { display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #087cde; border-radius: 6px; color: #087cde; font-size: 1rem; }
.stock-usage-guide #home-screen .ios-steps { grid-template-columns: repeat(4,1fr); }
.stock-usage-guide #home-screen .home-screen { display: grid; width: 70px; height: 108px; padding: 8px 4px 6px; place-items: center; overflow: hidden; border: 3px solid #202328; border-radius: 15px; background: linear-gradient(#2672b4,#58a2df); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.stock-usage-guide #home-screen .home-app { display: grid; place-items: center; gap: 4px; color: #fff; font-size: .72rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.stock-usage-guide #home-screen .home-app img { display: block; width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.stock-usage-guide #home-screen .step strong { display: block; margin-bottom: 4px; }
.stock-usage-guide #home-screen .step p { margin: 0; color: #676e77; font-size: .86rem; line-height: 1.55; }
.stock-usage-guide #home-screen .ios-steps { grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin:28px 0 24px; }
.stock-usage-guide #home-screen .home-screen { width:84px;height:124px; }
.stock-usage-guide #home-screen .home-app { font-size:.68rem; }
html[data-theme="dark"] .stock-usage-guide #home-screen .step { background:#18251f;border-color:#354a3e; }
html[data-theme="dark"] .stock-usage-guide #home-screen .step p { color:#c6d4cc; }
.stock-usage-guide #home-screen .add-home { color:#202328; }
@media(max-width:620px) {
 .stock-usage-guide #home-screen .ios-steps { grid-template-columns:1fr; }
 .stock-usage-guide #home-screen .step { display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:14px;padding:22px 16px;text-align:left; }
 .stock-usage-guide #home-screen .step-visual { margin:0; }
 .stock-usage-guide #home-screen .add-home { font-size:.72rem;padding:9px;gap:5px; }
}

/* Shared light/dark mode button illustration. */
.stock-usage-guide .setting-guide-list { display: grid; gap: 14px; margin-top: 20px; }
.stock-usage-guide .setting-guide-card { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 22px; align-items: center; padding: 20px; border: 1px solid #dce4e0; border-radius: 13px; background: rgba(255,255,255,.88); scroll-margin-top: 18px; }
.stock-usage-guide .setting-guide-visual { display: grid; min-height: 112px; place-items: center; padding: 14px; border-radius: 11px; background: linear-gradient(145deg,#eef8f2,#f7faf8); }
.stock-usage-guide .setting-guide-kicker { margin: 0 0 4px; color: #078b3b; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.stock-usage-guide .setting-guide-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.stock-usage-guide .setting-guide-card p { margin: 0; color: #555e66; font-size: .92rem; line-height: 1.75; }
.stock-usage-guide .setting-guide-card p + p { margin-top: 8px; }
.stock-usage-guide .theme-preview { display: flex; align-items: center; gap: 9px; }
.stock-usage-guide .theme-preview span { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #d6dcdf; border-radius: 13px; background: #fff; color: #f39800; font-size: 1.45rem; box-shadow: 0 4px 10px rgba(20,28,38,.08); }
.stock-usage-guide .theme-preview span:last-child { border-color: #344047; background: #151b1e; color: #ffd260; }
.stock-usage-guide .theme-preview b { color: #99a29d; font-size: 1rem; }

html[data-theme="dark"] .stock-usage-guide .setting-guide-card { border-color:#354a3e;background:#14241b; }
html[data-theme="dark"] .stock-usage-guide .setting-guide-visual { background:linear-gradient(145deg,#20382b,#18251f); }
html[data-theme="dark"] .stock-usage-guide .setting-guide-card p { color:#c6d4cc; }
@media(max-width:620px) {
 .stock-usage-guide .setting-guide-card { grid-template-columns:1fr;gap:15px;padding:17px; }
 .stock-usage-guide .setting-guide-visual { min-height:92px; }
}