/* =================================================================
   RED SNAPPER GROUP — account hub brand layer
   Additive stylesheet for account.redsnappergroup.co.uk.
   Applies the rsg.ltd design system on top of BlankSlate + Ultimate
   Member. Loaded after UM styles (see functions.php rsg_account_enqueue).
   Tokens are lifted verbatim from the rsg theme styles.css (v3).
   Do not edit BlankSlate style.css; all brand styling lives here.
   ================================================================= */

:root{
  --ink:#15171c;--ink-soft:#3a3f49;--muted:#5f646e;--faint:#6e7480;
  --line:#e6e8ec;--line-2:#d8dbe2;--paper:#fff;--mist:#f5f6f9;--mist-2:#eef0f4;
  --red:#df2c23;--red-deep:#c11f17;--red-text:#bf2018;--red-soft:#fde7e4;
  --blue:#2348e6;--blue-text:#1f3fcc;--blue-soft:#e4e9fd;
  --teal:#0d9488;--teal-text:#0f766e;
  --amber:#f59e0b;--amber-text:#8a5800;--amber-soft:#fdeecd;
  --rec:#f5891f;--rec-deep:#9d5108;--rec-soft:#fdecd8;
  --mng:#34b233;--mng-deep:#1f7a2e;--mng-soft:#e2f4e1;
  --lrn:#2b8fd6;--lrn-deep:#1f6cab;--lrn-soft:#e2f0fb;
  --med:#7b2fbe;--med-deep:#6a23a8;--med-soft:#f0e6fb;
  --g-soft:radial-gradient(680px 460px at 84% -6%,rgba(232,54,45,.16),transparent 60%),
           radial-gradient(620px 460px at 4% 8%,rgba(35,72,230,.10),transparent 58%),
           radial-gradient(700px 520px at 50% 116%,rgba(124,58,237,.10),transparent 60%),
           linear-gradient(180deg,#ffffff,#f6f7fb);
  --g-mesh:radial-gradient(540px 360px at 12% 12%,rgba(232,54,45,.85),transparent 60%),
           radial-gradient(540px 360px at 88% 18%,rgba(35,72,230,.75),transparent 58%),
           radial-gradient(620px 420px at 60% 96%,rgba(124,58,237,.7),transparent 60%),
           linear-gradient(135deg,#2a0f3d,#3a0d2a);
  --radius:22px;--radius-sm:14px;
  --shadow:0 2px 6px rgba(21,23,28,.05), 0 18px 40px -26px rgba(21,23,28,.28);
  --shadow-lg:0 44px 100px -44px rgba(21,23,28,.40);
  --f:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- base ---------- */
body{font-family:var(--f);color:var(--ink-soft);background:var(--mist);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#wrapper{min-height:100vh;display:flex;flex-direction:column}
#container{flex:1 0 auto}
h1,h2,h3,h4{font-family:var(--f);color:var(--ink);line-height:1.12;letter-spacing:-.022em}
h1{font-weight:800}h2{font-weight:800}h3{font-weight:700}h4{font-weight:700}
a{color:var(--red-text);text-decoration:none}
.eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-text);font-weight:700}

/* hide the WordPress page-title heading + edit link on the account pages */
body.rsg-login .entry-title,
body.rsg-register .entry-title,
body.rsg-account .entry-title,
body.rsg-password .entry-title{display:none}
body.rsg-login .header,
body.rsg-register .header,
body.rsg-account .header,
body.rsg-password .header{margin:0;padding:0}

/* animated hover underline for textual links (buttons, pills and the account sidebar excluded) */
.back-link,
.um .um-form a:not(.um-button),
footer#footer.site .foot-links a,
footer#footer.site .fb-links a{position:relative}
.back-link::after,
.um .um-form a:not(.um-button)::after,
footer#footer.site .foot-links a::after,
footer#footer.site .fb-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:currentColor;border-radius:2px;transition:width .22s ease}
.back-link:hover::after,
.um .um-form a:not(.um-button):hover::after,
footer#footer.site .foot-links a:hover::after,
footer#footer.site .fb-links a:hover::after{width:100%}

/* content gets a comfortable container + page backdrop on inner pages */
#content{max-width:1180px;margin:0 auto;padding:34px 28px 60px;width:100%}

/* ---------- shared buttons (our own markup: header/footer/my-data) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f);font-weight:600;
  font-size:.96rem;padding:.85rem 1.5rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(232,54,45,.6)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-sm{padding:.55rem 1.05rem;font-size:.86rem}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--mist-2);color:var(--ink-soft)}
.tag.red{background:var(--red-soft);color:var(--red-text)}
.tag.mng{background:var(--mng-soft);color:var(--mng-deep)}
.tag.rec{background:var(--rec-soft);color:var(--rec-deep)}
.tag.lrn{background:var(--lrn-soft);color:var(--lrn-deep)}
.tag.med{background:var(--med-soft);color:var(--med-deep)}

/* ---------- header ---------- */
header#header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
header#header.site .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:70px;max-width:1180px;margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:38px;width:auto;display:block}
.brand .wm{font-weight:800;font-size:1.06rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.brand .wm small{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-top:3px}
.nav-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;color:var(--ink-soft)}
.back-link:hover{color:var(--red)}
.back-link svg{width:16px;height:16px}
.user-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 6px 5px 14px;font-size:.85rem;font-weight:600;color:var(--ink)}
.user-pill .av{width:30px;height:30px;border-radius:50%;background:var(--g-mesh);color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:800}

/* ---------- footer (mirrors staging.rsg.ltd) ---------- */
footer#footer.site{flex-shrink:0;background:var(--ink);color:#a7adb8;padding:72px 0 34px;font-size:.95rem}
footer#footer.site .foot-inner{max-width:1180px;margin:0 auto;padding:0 28px}
footer#footer.site a{color:#a7adb8}
footer#footer.site a:hover{color:#fff}
footer#footer.site h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:700;margin:0 0 18px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand img{height:42px;width:auto;margin-bottom:16px}
.foot-brand .wm{display:block;font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:14px;letter-spacing:-.02em}
.foot-brand p{max-width:38ch;color:#9aa0ab;margin:0}
.foot-co{margin-top:18px;font-size:.82rem;color:#7f8590;line-height:1.9}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin-bottom:11px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:24px;
  flex-wrap:wrap;font-size:.84rem;color:#7f8590}
.foot-bottom .fb-links{display:flex;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.socials{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:11px;display:grid;place-items:center;color:#fff}
.socials a:hover{border-color:var(--red);background:rgba(232,54,45,.16)}
.socials svg{width:18px;height:18px}

/* =================================================================
   ULTIMATE MEMBER — restyle by existing classes
   ================================================================= */

/* form fields */
.um input.um-form-field,
.um .um-form-field,
.um select.um-form-field,
.um textarea.um-form-field,
.um textarea{font-family:var(--f);font-size:.95rem;color:var(--ink);
  padding:.72rem .9rem;border:1px solid var(--line-2)!important;border-radius:10px!important;
  background:#fff;box-shadow:none!important;transition:border-color .18s ease,box-shadow .18s ease}
.um input.um-form-field:focus,
.um .um-form-field:focus,
.um select.um-form-field:focus,
.um textarea:focus{outline:none;border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-soft)!important}
.um .um-field-label label,
.um .um-field-label{font-size:.86rem;font-weight:600;color:var(--ink)}
.um .um-field-area{position:relative}

/* primary button */
.um .um-button,
.um a.um-button,
.um input[type=submit].um-button{display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem;
  background:var(--red)!important;color:#fff!important;font-family:var(--f);font-weight:700;font-size:.98rem;
  padding:.85rem 1.6rem!important;border:1.5px solid transparent!important;border-radius:999px!important;
  box-shadow:none!important;text-shadow:none!important;cursor:pointer;width:auto;
  transition:transform .16s ease,background .2s ease,box-shadow .2s ease}
.um .um-button:hover,
.um a.um-button:hover{background:var(--red-deep)!important;transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(232,54,45,.6)!important}
.um .um-button.um-alt{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}

/* validation states: legible soft error (UM default is a solid red block with a caret) */
.um .um-field-error{background:var(--red-soft)!important;color:var(--red-text)!important;
  border:1px solid #f4bcb7!important;border-radius:10px!important;padding:10px 14px!important;
  font-size:.86rem!important;font-weight:600;line-height:1.45!important;margin:8px 0 0!important}
.um .um-field-error a{color:var(--red-text)!important;text-decoration:underline!important}
.um .um-field-arrow{display:none!important}              /* drop the caret pointer */
.um .um-field-area input.um-error,
.um .um-field-area .um-error{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-soft)!important}

/* full-width soft backdrop on the account pages (fills page width, no rounded corners) */
body.rsg-login #container,
body.rsg-password #container,
body.rsg-register #container{background:var(--g-soft)}

/* ---------- login & password: compact centred card ---------- */
.um.um-login,
.um.um-password{max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:38px 36px}
.um.um-login .um-button,
.um.um-password .um-button{width:100%!important}
body.rsg-login #content,
body.rsg-password #content{min-height:62vh;display:flex;align-items:center;justify-content:center}

/* login page: stack the login card and a separate "register" block */
.rsg-auth-stack{display:flex;flex-direction:column;align-items:stretch;gap:18px;width:100%;max-width:460px;margin:0 auto}
.rsg-auth-stack .um.um-login{margin:0;width:100%}
.rsg-auth-alt{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  padding:22px 26px;text-align:center}
.rsg-auth-alt h3{font-size:1.05rem;margin:0 0 6px}
.rsg-auth-alt p{font-size:.9rem;color:var(--muted);margin:0 0 16px}
.rsg-auth-alt .btn{width:100%;font-weight:700}
/* hide UM's built-in secondary register button on login (replaced by the block above) */
.um.um-login .um-button.um-alt{display:none!important}
.um.um-register{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:40px 44px;
  font-size:.9rem;color:var(--muted)}                 /* applies to the trailing terms text */
.um.um-register .um-button{min-width:220px}

/* register step 1: the "choose a site" chooser (.registerForm in register.php) */
.registerForm{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 44px}
.registerForm h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 22px}
.registerForm h4{font-size:1.05rem;color:var(--ink);margin:28px 0 6px}
.registerForm p{color:var(--muted);margin:0 0 14px}
.registerForm ul{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;padding:0;list-style:none}
.registerForm ul li{margin:0}
.registerForm ul li a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.92rem;
  padding:.7rem 1.25rem;border-radius:999px;background:var(--red);color:#fff;
  transition:transform .16s ease,background .2s ease,box-shadow .2s ease}
.registerForm ul li a:hover{background:var(--red-deep);transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(232,54,45,.6)}

/* ---------- UM section dividers as branded section headings ---------- */
.um .um-field-divider{border:0!important;margin:30px 0 14px;padding:0}
.um .um-field-divider-text{display:flex;align-items:center;gap:12px}
.um .um-field-divider-text span{font-family:var(--f);font-weight:700;font-size:1.08rem;color:var(--ink);
  letter-spacing:-.01em}
.um .um-field-divider-text:after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- UM radio / checkbox options ----------
   IMPORTANT: UM also puts "um-field-radio"/"um-field-checkbox" on the OUTER field
   wrapper <div class="um-field um-field-radio ...">, not only on the option <label>s.
   So we neutralise the wrapper and scope the chip styling to options inside .um-field-area. */
.um .um-field.um-field-radio,
.um .um-field.um-field-checkbox{border:0!important;background:none!important;border-radius:0!important;padding:0!important;display:block;width:auto;float:none}

/* radio options (Regulatory / Professional Yes/No) as chips. UM positions the state
   circle absolutely (top:0;left:1px), so we re-centre it vertically and reserve left
   padding for it instead of relying on flex (the circle is out of flow). */
.um .um-field-area .um-field-radio{position:relative;display:inline-block!important;vertical-align:top;cursor:pointer;
  width:auto!important;float:none!important;
  margin:0 8px 8px 0!important;padding:8px 16px 8px 42px!important;
  border:1px solid var(--line-2)!important;border-radius:999px!important;background:#fff!important;
  font-size:.9rem;line-height:1.2;color:var(--ink-soft);box-shadow:none!important;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.um .um-field-area .um-field-radio:hover{border-color:var(--ink)!important}
.um .um-field-area .um-field-radio.active{border-color:var(--red)!important;background:var(--red-soft)!important;color:var(--red-text)}
.um .um-field-area .um-field-radio input{position:absolute!important;opacity:0;width:1px;height:1px;margin:0}
.um .um-field-area .um-field-radio .um-field-radio-state{position:absolute!important;top:50%!important;left:14px!important;
  transform:translateY(-50%);width:20px;height:20px;margin:0}
.um .um-field-area .um-field-radio .um-field-radio-state i{font-size:20px!important;line-height:20px!important;height:20px!important;color:var(--line-2)}
.um .um-field-area .um-field-radio.active .um-field-radio-state i{color:var(--red)}
.um .um-field-area .um-field-radio .um-field-radio-option{margin:0!important;display:inline;color:inherit!important;font-weight:600;line-height:1.2}
.um .um-field-area .um-clear{clear:none;display:none}    /* float cancelled, drop UM's clearfix spacers */

/* checkbox option (e.g. "Keep me signed in"): borderless, box vertically centred + left margin */
.um .um-field-area .um-field-checkbox{position:relative;display:inline-block!important;vertical-align:top;cursor:pointer;
  width:auto!important;float:none!important;
  margin:0!important;padding:2px 0 2px 30px!important;border:0!important;background:none!important;
  font-size:.9rem;line-height:1.4;color:var(--ink-soft)}
.um .um-field-area .um-field-checkbox:hover{color:var(--ink)}
.um .um-field-area .um-field-checkbox input{position:absolute!important;opacity:0;width:1px;height:1px;margin:0}
.um .um-field-area .um-field-checkbox .um-field-checkbox-state{position:absolute!important;top:50%!important;left:1px!important;
  transform:translateY(-50%);width:20px;height:20px;margin:0}
.um .um-field-area .um-field-checkbox .um-field-checkbox-state i{font-size:20px!important;line-height:20px!important;height:20px!important;color:var(--line-2)}
.um .um-field-area .um-field-checkbox.active .um-field-checkbox-state i{color:var(--red)}
.um .um-field-area .um-field-checkbox .um-field-checkbox-option{margin:0!important;display:inline;color:inherit!important;font-weight:500}

/* ---------- account: robust 2-column within UM's float markup ---------- */
.um-account .um-form>form{overflow:hidden}            /* contain the floated sidebar */

/* Scoped to .um-account so these beat UM's base rules on desktop, while still
   sitting below UM's higher-specificity .uimobNNN responsive rules on mobile. */
.um-account .um-account-side{float:left;width:300px;margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px}
/* main is NOT floated: explicitly cancel UM's float:left/width:70%. margin-left clears
   the sidebar; overflow:hidden makes a block formatting context so it can't wrap under
   the float; padding is even on all sides. */
.um-account .um-account-main{float:none;width:auto;clear:none;overflow:hidden;
  margin-left:328px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:22px 30px 30px}
/* hide UM's duplicate bottom "Back to home" (the one inside the sidebar card is kept) */
.um-account .um-form>form>.logout-wrap{display:none}

.um-account-side ul,.um-account-side li{list-style:none;margin:0!important;padding:0;background:transparent!important}
.um-account-side li{margin-bottom:3px!important}
.um-account-side li a,
.um-account-side li a.um-account-link{display:flex!important;align-items:center;gap:10px;padding:11px 12px!important;
  height:auto!important;border-radius:10px;font-weight:600;font-size:.93rem;color:var(--ink-soft);background:transparent;
  border:0;box-shadow:none;transition:background .15s ease,color .15s ease}
.um-account-side li a:hover{background:var(--mist);color:var(--ink)}
.um-account-side li a.current,
.um-account-side li a.current:hover{background:var(--red-soft)!important;color:var(--red-text)!important;box-shadow:none}
/* neutralise UM's icon cell: no 15px side padding, no right-hand divider line */
.um-account-side li a span.um-account-icon{float:none;width:22px!important;height:auto!important;
  padding:0!important;margin:0!important;border-right:0!important;text-align:center;box-sizing:content-box}
.um-account-side li a span.um-account-icon i{color:var(--faint);height:auto!important;line-height:1!important}
.um-account-side li a.current span.um-account-icon i{color:var(--red)}
.um-account-side li a span.um-account-title{float:none;padding-left:0!important;height:auto!important;line-height:1.25!important}
.um-account-side li a span.um-account-arrow{margin-left:auto;color:var(--faint);font-size:18px!important}

/* "back to home" / logout block in the sidebar template */
.um-account .logout-wrap{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.um-account .logout-wrap a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:10px;
  font-weight:600;font-size:.9rem;color:var(--muted)}
.um-account .logout-wrap a:hover{background:var(--mist);color:var(--ink)}

/* account headings inside the main panel */
.um-account-main div.um-account-heading{font-family:var(--f);color:var(--ink);font-weight:700;
  font-size:1.2rem;padding:18px 0 16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.um-account-main div.um-account-heading i{color:var(--red)}

/* mobile tab dropdowns (UM shows these on narrow containers) */
.um-account-nav a{font-family:var(--f);font-weight:600;border-radius:10px;border:1px solid var(--line)!important;
  background:#fff!important;color:var(--ink)!important}
.um-account-nav a.current{background:var(--red-soft)!important;color:var(--red-text)!important;border-color:var(--red-soft)!important}

/* ---------- profile: light touch ---------- */
.um-profile .um-profile-photo{border-radius:var(--radius-sm);overflow:hidden}
.um-profile .um-profile-body .um-field-label{color:var(--ink)}

/* =================================================================
   MY DATA TAB (markup added when tab-mydata.php is built — Phase 3)
   Styles are harmless until that template exists.
   ================================================================= */
.rsg-mydata .section-label{display:flex;align-items:center;gap:10px;margin:6px 0 16px}
.rsg-mydata .section-label h3{font-size:1.04rem;margin:0}
.rsg-mydata .section-label .ln{flex:1;height:1px;background:var(--line)}
.rsg-mydata .reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rsg-mydata .reg-card{border:1px solid var(--line);border-top:4px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:#fff;
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.rsg-mydata .reg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.rsg-mydata .reg-card.rec{border-top-color:var(--rec)}
.rsg-mydata .reg-card.mng{border-top-color:var(--mng)}
.rsg-mydata .reg-card.lrn{border-top-color:var(--lrn)}
.rsg-mydata .reg-card.med{border-top-color:var(--med)}
.rsg-mydata .reg-card .rc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rsg-mydata .reg-card h4{font-size:1rem;margin:0}
.rsg-mydata .reg-card .rc-meta{font-size:.82rem;color:var(--faint)}
.rsg-mydata .mini-tag{font-size:.72rem;font-weight:600;color:var(--ink-soft);background:var(--mist);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;display:inline-block}
.rsg-mydata .privacy-note{display:flex;gap:12px;align-items:flex-start;background:var(--blue-soft);
  border:1px solid #cdd8fb;border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:.86rem;color:#26356b}
.rsg-mydata .privacy-note svg{width:20px;height:20px;flex:0 0 20px;color:var(--blue-text);margin-top:1px}
.rsg-mydata .data-table{width:100%;border-collapse:collapse;font-size:.9rem}
.rsg-mydata .data-table tr{border-bottom:1px solid var(--line)}
.rsg-mydata .data-table tr:last-child{border-bottom:0}
.rsg-mydata .data-table td{padding:12px 4px}
.rsg-mydata .data-table td:first-child{color:var(--muted);width:42%}
.rsg-mydata .data-table td:last-child{color:var(--ink);font-weight:600;text-align:right}
.rsg-mydata .data-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:860px){
  #content{padding:24px 18px 48px}
  header#header.site .nav{padding:0 18px;min-height:62px}
  .brand .wm{font-size:1rem}
  /* stack the account columns on tablet (UM's uimob* still handles phones).
     Scoped to .um-account to match the desktop rule's specificity so these win. */
  .um-account .um-account-side{float:none;width:auto;margin-bottom:14px}
  .um-account .um-account-main{margin-left:0;padding-left:22px;padding-right:22px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .rsg-mydata .reg-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .user-pill{display:none}
  .um.um-login,.um.um-register,.um.um-password{margin:24px auto;padding:28px 22px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}