.guide-page{--g-navy:#071526;--g-ink:#10233d;--g-muted:#61728b;--g-line:#dbe4ee;--g-soft:#f5f8fc;--g-cyan:#25d5d1;--g-blue:#4d7cff;--g-green:#26b879;--g-red:#db4a57;--g-purple:#7357e8;background:linear-gradient(180deg,#f8fbff 0,#fff 24%,#f8fbff 100%);color:var(--g-ink);min-height:100vh;padding:46px 20px 70px}.guide-shell{max-width:1180px;margin:0 auto}.guide-hero{text-align:center;max-width:970px;margin:0 auto 34px}.guide-kicker{display:inline-block;font:700 12px/1.2 'Inter Tight','Noto Sans JP',sans-serif;letter-spacing:.16em;color:#167d8c;margin-bottom:12px}.guide-hero h1{font:700 clamp(34px,5vw,64px)/1.04 'Inter Tight','Noto Sans JP',sans-serif;letter-spacing:-.04em;color:#0b1b32;margin:0}.guide-hero>p{max-width:850px;margin:18px auto 0;color:var(--g-muted);font-size:17px;line-height:1.8}.guide-principle{margin:22px auto 0;padding:15px 18px;border:1px solid #a9e9e5;background:#edfffd;border-radius:14px;text-align:left;line-height:1.7;max-width:900px}.guide-principle strong{color:#087c7a}.guide-jumps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.guide-jumps a{padding:9px 14px;border:1px solid var(--g-line);border-radius:999px;background:#fff;color:#27405f;text-decoration:none;font-weight:700;font-size:13px}.guide-jumps a:hover{border-color:#86cfd4;color:#087c7a}.guide-before{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;margin:36px 0 18px;padding:26px 30px;background:var(--g-navy);color:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(9,28,55,.14)}.guide-before>div{display:flex;gap:14px;align-items:center}.guide-section-no{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#64f1e9;font-weight:800}.guide-before h2{margin:0;font-size:26px}.guide-before ul{margin:0;padding:0;display:grid;gap:10px;list-style:none}.guide-before li{position:relative;padding-left:27px;color:#dfeaf8;line-height:1.55}.guide-before li:before{content:'✓';position:absolute;left:0;color:#64f1e9;font-weight:800}.guide-step{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:42px;align-items:center;padding:54px 0;border-bottom:1px solid #e7edf4}.guide-step.reverse .guide-copy{order:2}.guide-step.reverse .guide-visual{order:1}.guide-step-tag{display:inline-flex;padding:7px 10px;border-radius:8px;background:#0c2747;color:#fff;font-weight:800;letter-spacing:.08em;font-size:11px}.guide-copy h2{font:700 clamp(28px,3.5vw,42px)/1.15 'Inter Tight','Noto Sans JP',sans-serif;letter-spacing:-.025em;margin:14px 0;color:#10223b}.guide-copy>p{font-size:16px;line-height:1.85;color:var(--g-muted);margin:0 0 15px}.guide-do,.guide-note{display:grid;gap:4px;margin-top:18px;padding:15px 17px;border:1px solid var(--g-line);background:var(--g-soft);border-radius:13px;line-height:1.6}.guide-do strong{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#2a5579}.guide-do span,.guide-note{font-size:14px}.guide-note.strong{border-color:#9ddfd9;background:#effcf9;color:#145e5b;font-weight:700}.guide-small{font-size:12px!important;color:#7d8ca1!important}.guide-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}.guide-links a{color:#165eae;font-weight:700}.guide-visual{position:relative}.guide-visual-label{display:block;color:#58708c;font-size:12px;font-weight:700;margin:0 0 9px}.guide-browser{border:1px solid #d3dde8;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 22px 60px rgba(13,41,77,.14)}.guide-browser-bar{height:38px;background:#f3f6fa;border-bottom:1px solid #dfe6ef;display:flex;align-items:center;gap:6px;padding:0 12px;color:#7b8ba0;font-size:10px}.guide-browser-bar i{width:7px;height:7px;background:#c5ced9;border-radius:50%}.guide-browser-bar span{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mock-auth{display:grid;grid-template-columns:.42fr .58fr;min-height:330px}.mock-brand{background:linear-gradient(150deg,#0a1a31,#113052);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;color:#cfe1f5;text-align:center}.mock-brand img{width:150px;max-width:90%;filter:brightness(0) invert(1);opacity:.95;margin-bottom:18px}.mock-brand small{line-height:1.55}.mock-form{padding:26px;display:grid;align-content:center;gap:12px}.mock-form>b{font-size:21px}.mock-form label,.mock-panel label{display:grid;gap:6px;font-size:11px;font-weight:700;color:#556a84}.mock-form label span,.mock-panel label span{display:block;border:1px solid #d8e1eb;border-radius:8px;padding:9px 10px;color:#263a55;background:#fbfdff;font-weight:600}.mock-check{font-size:11px;color:#286a65}.mock-form button,.mock-panel button,.mock-connect button,.sync-panel button{border:0;border-radius:9px;padding:10px 13px;background:linear-gradient(90deg,#1ca8aa,#4c74df);color:#fff;font-weight:800;font-size:11px}.mock-app{display:grid;grid-template-columns:128px 1fr;min-height:345px;background:#f7f9fc}.mock-app aside{background:#081a32;padding:17px 10px;display:flex;flex-direction:column;gap:7px}.mock-app aside img{width:94px;filter:brightness(0) invert(1);margin:1px auto 14px}.mock-app aside em{font-style:normal;color:#8ea5bf;padding:8px 9px;border-radius:8px;font-size:10px}.mock-app aside em.on{background:#17345d;color:#fff}.mock-app main{padding:24px;min-width:0}.mock-eyebrow{font-size:10px;letter-spacing:.08em;color:#179b9a;font-weight:800}.mock-app h3{margin:6px 0 18px;font-size:22px;color:#122641}.mock-panel{background:#fff;border:1px solid #dce4ed;border-radius:13px;padding:17px;display:grid;gap:10px;box-shadow:0 8px 24px rgba(28,59,95,.05)}.mock-panel b{color:#18314f}.mock-panel p{font-size:11px;color:#65758a;margin:0;line-height:1.5}.mock-panel small{font-size:10px;color:#738397;line-height:1.45}.mock-connect{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid #dce4ed;border-radius:13px;padding:14px;margin-bottom:12px}.mock-connect img{width:35px;height:35px;object-fit:contain}.mock-connect div{display:grid;gap:4px}.mock-connect b{font-size:13px}.mock-connect small{font-size:10px;color:#78889d}.mock-connect button{white-space:nowrap}.mock-connect button.danger,.mock-panel button.danger{background:#fff;color:var(--g-red);border:1px solid #edb8bd}.mock-panel button.danger.wide{background:#c93e4c;color:#fff;border-color:#c93e4c}.mock-panel button.danger.ghost{background:#fff;color:#c53a49}.sync-panel{gap:14px}.mock-row{display:flex;justify-content:space-between;gap:14px;align-items:center}.mock-row>div{display:grid;gap:4px}.mock-row small{color:#75879a}.toggle{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 8px 4px 5px;font-size:9px;font-weight:800;color:#fff}.toggle i{display:block;width:14px;height:14px;background:#fff;border-radius:50%}.toggle.off{background:#7b8795}.toggle.on{background:#1aa16a;flex-direction:row-reverse}.mock-consent{padding:11px;border:1px solid #aee2d2;border-radius:9px;background:#effbf7;color:#276d59;font-size:10px;line-height:1.55}.mock-history{display:grid;grid-template-columns:1fr auto;gap:0;border:1px solid #dce4ed;border-radius:12px;overflow:hidden;background:#fff}.mock-history>*{padding:11px 12px;border-bottom:1px solid #edf1f5;font-size:10px}.mock-history>*:nth-last-child(-n+2){border-bottom:0}.mock-history b.good{color:#16845f}.mock-history b.warn{color:#bd7a16}.oauth-example .guide-real-shot{margin:0;border:1px solid #d3dde8;border-radius:18px;background:#f7f9fc;padding:16px;text-align:center;box-shadow:0 22px 60px rgba(13,41,77,.14)}.guide-real-shot img{display:block;width:auto;max-width:100%;max-height:650px;margin:0 auto;border-radius:14px;box-shadow:0 10px 28px rgba(21,42,68,.12)}.guide-real-shot figcaption{font-size:12px;color:#718196;margin-top:12px;line-height:1.55}.guide-divider{display:flex;align-items:center;gap:18px;padding-top:34px}.guide-divider:before,.guide-divider:after{content:'';height:1px;background:#dce5ee;flex:1}.guide-divider span{font-size:11px;letter-spacing:.18em;font-weight:800;color:#1f6973}.important-step{border-radius:22px;padding-left:26px;padding-right:26px;background:linear-gradient(135deg,#f4fffd,#f7f9ff);border:1px solid #d9efec;margin-top:28px}.guide-end{margin-top:54px;padding:36px;border-radius:24px;background:linear-gradient(145deg,#071728,#112c50);color:#fff;text-align:center}.guide-end>span{font-size:11px;letter-spacing:.16em;color:#64f1e9;font-weight:800}.guide-end h2{max-width:820px;margin:10px auto 24px;font:700 clamp(27px,4vw,42px)/1.15 'Inter Tight','Noto Sans JP',sans-serif}.guide-control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.guide-control-grid>div{padding:16px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);border-radius:13px;display:grid;gap:5px}.guide-control-grid b{color:#fff}.guide-control-grid small{color:#b9cadf;line-height:1.45}.guide-end-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}.guide-end-actions .btn.ghost{border-color:rgba(255,255,255,.25);color:#fff}.guide-page .btn{text-decoration:none}.guide-page a:focus-visible{outline:3px solid rgba(37,213,209,.35);outline-offset:3px}
@media(max-width:900px){.guide-step,.guide-before{grid-template-columns:1fr}.guide-step.reverse .guide-copy,.guide-step.reverse .guide-visual{order:initial}.guide-step{gap:24px}.guide-control-grid{grid-template-columns:repeat(2,1fr)}.mock-app{grid-template-columns:105px 1fr}.mock-app aside{padding-left:7px;padding-right:7px}.mock-app aside em{font-size:9px}.important-step{padding-left:18px;padding-right:18px}}
@media(max-width:620px){.guide-page{padding:26px 14px 50px}.guide-hero{text-align:left}.guide-hero h1{font-size:36px}.guide-hero>p{font-size:15px}.guide-jumps{justify-content:flex-start}.guide-before{padding:22px}.guide-step{padding:38px 0}.guide-copy h2{font-size:29px}.mock-app{grid-template-columns:76px 1fr;min-height:310px}.mock-app aside img{width:64px}.mock-app aside em{padding:7px 5px;font-size:7px}.mock-app main{padding:16px 12px}.mock-app h3{font-size:18px}.mock-connect{grid-template-columns:34px 1fr}.mock-connect button{grid-column:1/-1}.mock-auth{grid-template-columns:1fr}.mock-brand{min-height:135px}.mock-form{padding:20px}.guide-control-grid{grid-template-columns:1fr}.guide-end{padding:26px 18px}.important-step{margin-left:-4px;margin-right:-4px}.guide-real-shot img{max-height:540px}}


/* ======================================================================
   YA Social Sync Guide — COLOR OPTION B
   Brand-aligned dark/navy theme.
   COLOR ONLY: layout, wording, spacing and guide structure are unchanged.
   ====================================================================== */
.guide-page{
  --g-navy:#061425;
  --g-ink:#eaf4ff;
  --g-muted:#9fb1c7;
  --g-line:rgba(145,180,216,.18);
  --g-soft:#0b1b2e;
  --g-cyan:#35ddd7;
  --g-blue:#4c7fff;
  --g-green:#35c98c;
  --g-red:#ef6671;
  --g-purple:#8a72ff;
  background:
    radial-gradient(circle at 82% 7%,rgba(76,127,255,.12),transparent 28%),
    radial-gradient(circle at 15% 38%,rgba(53,221,215,.07),transparent 32%),
    linear-gradient(180deg,#06111f 0%,#071526 45%,#06111f 100%);
  color:var(--g-ink);
}

.guide-kicker{color:#4fe8e0}
.guide-hero h1{color:#f4f8ff}
.guide-hero>p{color:var(--g-muted)}

.guide-principle{
  border-color:rgba(53,221,215,.28);
  background:rgba(20,62,72,.44);
  color:#cce9eb;
}
.guide-principle strong{color:#5aeee6}

.guide-jumps a{
  border-color:rgba(141,174,210,.22);
  background:#0b1c30;
  color:#c9d8e9;
}
.guide-jumps a:hover{
  border-color:#42d9d4;
  color:#5aeee6;
  background:#0d2639;
}

.guide-before{
  background:linear-gradient(145deg,#07182b,#0b2540);
  box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.guide-before li{color:#c7d7e9}

.guide-step{border-bottom-color:rgba(145,180,216,.13)}
.guide-step-tag{
  background:#102d4d;
  color:#dff6ff;
  border:1px solid rgba(53,221,215,.15);
}
.guide-copy h2{color:#f3f8ff}
.guide-copy>p{color:#9fb1c7}

.guide-do,.guide-note{
  border-color:rgba(145,180,216,.16);
  background:#0b1b2e;
  color:#c8d6e7;
}
.guide-do strong{color:#68d9df}
.guide-note.strong{
  border-color:rgba(53,221,215,.30);
  background:rgba(18,74,73,.38);
  color:#aef2ea;
}
.guide-small{color:#7f93aa!important}
.guide-links a{color:#68a8ff}

.guide-visual-label{color:#8aa0b8}
.guide-browser{
  border-color:rgba(145,180,216,.22);
  background:#0b1b2e;
  box-shadow:0 24px 65px rgba(0,0,0,.34);
}
.guide-browser-bar{
  background:#0d2036;
  border-bottom-color:rgba(145,180,216,.14);
  color:#8398b0;
}
.guide-browser-bar i{background:#60748b}

/* Mock screens: same structure, brand-aligned darker surfaces */
.mock-auth{background:#091a2d}
.mock-brand{background:linear-gradient(150deg,#071526,#102f50)}
.mock-form{
  background:#0c1d31;
  color:#edf6ff;
}
.mock-form>b{color:#f3f8ff}
.mock-form label,.mock-panel label{color:#9eb2c8}
.mock-form label span,.mock-panel label span{
  border-color:rgba(145,180,216,.20);
  color:#dbe7f4;
  background:#10243a;
}
.mock-check{color:#6ddbd3}

.mock-app{background:#081727}
.mock-app aside{background:#061426}
.mock-app aside em{color:#829ab5}
.mock-app aside em.on{
  background:#13365b;
  color:#fff;
}
.mock-app main{background:#09192b}
.mock-eyebrow{color:#45ddd7}
.mock-app h3{color:#f0f7ff}

.mock-panel{
  background:#0e2238;
  border-color:rgba(145,180,216,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.15);
}
.mock-panel b{color:#eaf4ff}
.mock-panel p{color:#9fb1c7}
.mock-panel small{color:#8296ad}

.mock-connect{
  background:#0e2238;
  border-color:rgba(145,180,216,.18);
}
.mock-connect b{color:#edf6ff}
.mock-connect small{color:#8ea2b8}
.mock-connect button.danger,.mock-panel button.danger{
  background:#0e2238;
  color:#ff7e88;
  border-color:rgba(239,102,113,.45);
}
.mock-panel button.danger.wide{
  background:#c74654;
  color:#fff;
  border-color:#c74654;
}
.mock-panel button.danger.ghost{
  background:#0e2238;
  color:#ff7e88;
}

.mock-row small{color:#869cb3}
.toggle.off{background:#647486}
.toggle.on{background:#22a873}
.mock-consent{
  border-color:rgba(53,201,140,.28);
  background:rgba(22,94,72,.32);
  color:#b9f0d7;
}

.mock-history{
  border-color:rgba(145,180,216,.18);
  background:#0e2238;
}
.mock-history>*{
  border-bottom-color:rgba(145,180,216,.10);
  color:#cbd8e6;
}
.mock-history b.good{color:#55d8a4}
.mock-history b.warn{color:#f0b45c}

.oauth-example .guide-real-shot{
  border-color:rgba(145,180,216,.20);
  background:#0b1b2e;
  box-shadow:0 24px 65px rgba(0,0,0,.32);
}
.guide-real-shot figcaption{color:#879bb3}

.guide-divider:before,.guide-divider:after{background:rgba(145,180,216,.16)}
.guide-divider span{color:#4fded8}

.important-step{
  background:
    linear-gradient(135deg,rgba(14,54,57,.70),rgba(14,28,50,.92));
  border-color:rgba(53,221,215,.20);
}

.guide-end{
  background:linear-gradient(145deg,#07182a,#102c4b);
  box-shadow:0 20px 55px rgba(0,0,0,.24);
}
.guide-control-grid>div{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}
.guide-control-grid small{color:#aebfd2}

/* Keep the actual Google OAuth screenshot unmodified for authenticity */
.guide-real-shot img{
  background:#fff;
}