/* ==========================================================================
   STEP 2 — My Rhythm sync. Additive only: one panel on Profile, one banner,
   one dialog. Nothing existing is restyled, and My Rhythm itself is untouched.
   ========================================================================== */
#synSec, .syn-ov, .syn-banner{
  --sy-navy:#243447; --sy-navy2:#31465F; --sy-mut:#5A6B7D;
  --sy-line:#E7E1D6; --sy-cream:#FBF8F2; --sy-sage:#5F7350; --sy-sagel:#EDF2EA;
  --sy-amber:#8A6516; --sy-amberl:#FBF3E2; --sy-red:#9B3A45; --sy-redl:#FBEDEE;
  font-family:'Nunito',system-ui,sans-serif; color:var(--sy-navy);
}
#synSec *, .syn-ov *{ box-sizing:border-box; }

.syn-sec{
  max-width:1100px; margin:26px auto 0; padding:24px;
  background:#fff; border:1px solid var(--sy-line); border-radius:22px;
  box-shadow:0 6px 20px rgba(36,52,71,.05);
}
.syn-h{ font-family:'Playfair Display',Georgia,serif; font-size:1.4rem; font-weight:700;
  color:var(--sy-navy) !important; margin:0 0 10px; }
.syn-p{ margin:0 0 6px; font-size:.96rem; line-height:1.6; color:var(--sy-navy2); }
.syn-fine{ margin:12px 0 0; font-size:.82rem; line-height:1.55; color:var(--sy-mut); }
#synSec code, .syn-ov code{ font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.82em; background:rgba(36,52,71,.07); padding:1px 5px; border-radius:5px; }
.syn-state{ margin:0 0 14px; padding:12px 15px; border-radius:14px; font-size:.93rem;
  font-weight:700; }
.syn-state.syn-ok{ background:var(--sy-sagel); color:#3F5436; }
.syn-state.syn-warn{ background:var(--sy-amberl); color:var(--sy-amber); }
.syn-state.syn-bad{ background:var(--sy-redl); color:var(--sy-red); }
.syn-state.syn-off{ background:var(--sy-cream); color:var(--sy-navy2);
  border:1px solid var(--sy-line); }
.syn-keys{ list-style:none; margin:14px 0 0; padding:0; }
.syn-keys li{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px dashed var(--sy-line); font-size:.9rem; }
.syn-keys li span{ margin-left:auto; color:var(--sy-mut); font-size:.84rem; }
.syn-acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.syn-b{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:13px 22px; border-radius:50px; border:1px solid var(--sy-line);
  background:#fff !important; color:var(--sy-navy) !important; cursor:pointer;
  font:inherit; font-weight:700; font-size:.94rem;
}
.syn-b:hover{ background:var(--sy-sagel) !important; }
.syn-b.is-go{ background:var(--sy-sage) !important; color:#fff !important;
  border-color:var(--sy-sage); }
.syn-b.is-go:hover{ background:#4E6142 !important; }
.syn-b[disabled]{ opacity:.65; cursor:default; }
.syn-conf{ margin-top:14px; padding:16px; border-radius:16px; background:var(--sy-redl);
  border:1px solid #EBC6CA; }
.syn-conf b{ display:block; font-size:1rem; }
.syn-conf span{ display:block; font-size:.86rem; color:var(--sy-navy2); margin-top:4px; }

/* ---- table of what is on each side --------------------------------------- */
.syn-t{ width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:.9rem; }
.syn-t th{ text-align:left; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sy-mut); padding:6px 8px; border-bottom:1px solid var(--sy-line); }
.syn-t td{ padding:10px 8px; border-bottom:1px solid var(--sy-line); vertical-align:top; }
.syn-t td span{ display:block; font-size:.78rem; color:var(--sy-mut); margin-top:2px; }
.syn-t td code{ display:inline-block; margin-top:4px; }

/* ---- dialog --------------------------------------------------------------- */
.syn-ov{ position:fixed; inset:0; z-index:100004; background:rgba(36,52,71,.5);
  display:none; align-items:center; justify-content:center; padding:20px; }
.syn-ov.is-on{ display:flex; }
.syn-box{ position:relative; width:100%; max-width:620px;
  max-height:calc(100dvh - 48px); overflow-y:auto; background:var(--sy-cream);
  border-radius:22px; padding:24px; box-shadow:0 24px 60px rgba(36,52,71,.34); }
.syn-box h3{ font-family:'Playfair Display',Georgia,serif; font-size:1.35rem;
  font-weight:700; color:var(--sy-navy) !important; margin:0 0 10px; padding-right:48px; }
.syn-x{ min-width:44px; min-height:44px; padding:0; border:0; border-radius:50%;
  background:transparent !important; color:#fff !important; cursor:pointer; font-size:1rem; }
.syn-x-abs{ position:absolute; top:14px; right:14px; border:1px solid var(--sy-line);
  background:#fff !important; color:var(--sy-navy) !important; }
.syn-warn{ margin:14px 0; padding:15px; border-radius:14px; background:var(--sy-amberl);
  border:1px solid #E8D6AE; }
.syn-warn b{ display:block; margin-bottom:6px; color:var(--sy-amber); }
.syn-warn p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--sy-navy2); }
.syn-choices{ display:grid; gap:10px; margin-top:8px; }
.syn-choice{ text-align:left; padding:16px; border-radius:16px; border:2px solid var(--sy-line);
  background:#fff !important; cursor:pointer; font:inherit; color:var(--sy-navy); }
.syn-choice:hover{ border-color:var(--sy-sage); background:var(--sy-sagel) !important; }
.syn-choice b{ display:block; font-size:1rem; margin-bottom:4px; }
.syn-choice span{ display:block; font-size:.87rem; line-height:1.5; color:var(--sy-navy2); }
.syn-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; flex-wrap:wrap; }

/* ---- banner --------------------------------------------------------------- */
.syn-banner{
  position:fixed; z-index:100000; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  width:min(680px, calc(100vw - 24px)); display:none; gap:16px;
  padding:16px 16px 16px 20px; border-radius:20px; background:var(--sy-navy);
  color:#fff; box-shadow:0 16px 40px rgba(36,52,71,.36);
  align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.syn-banner.is-on{ display:flex; }
.syn-banner b{ display:block; font-size:1rem; margin-bottom:2px; }
.syn-banner span{ display:block; font-size:.88rem; line-height:1.45; opacity:.92; }
.syn-banner-b{ flex:1 1 300px; min-width:0; }
.syn-banner-a{ display:flex; gap:8px; align-items:center; }
.syn-banner-a button:not(.syn-x){
  min-height:44px; padding:11px 18px; border:0; border-radius:50px; cursor:pointer;
  font:inherit; font-weight:800; font-size:.86rem;
  background:#fff !important; color:var(--sy-navy) !important; white-space:nowrap;
}

@media (max-width:700px){
  .syn-sec{ margin:20px 12px 0; padding:18px 14px; border-radius:18px; }
  .syn-acts .syn-b, .syn-foot .syn-b{ flex:1 1 100%; }
  .syn-banner{ left:12px; right:12px; transform:none; width:auto; border-radius:18px; }
  .syn-banner-a{ width:100%; }
  .syn-banner-a button:not(.syn-x){ flex:1 1 auto; }
  .syn-box{ padding:18px 16px; }
  .syn-t{ font-size:.84rem; }
  .syn-t td, .syn-t th{ padding:8px 5px; }
}