/* Res Opera Tools - shared styles: theme, width, header, guide, resets.  v1.1 */

/* ---------- Theme variables (light is the default) ---------- */
.ro-tool,.ro-guide{
  --ro-primary:#0a4d8c;--ro-primary-dark:#06335e;--ro-accent:#f59e0b;
  --ro-ink:#0f172a;--ro-ink-soft:#334155;--ro-muted:#64748b;--ro-line:#e2e8f0;
  --ro-bg:#f8fafc;--ro-card:#ffffff;--ro-field:#ffffff;--ro-soft:#eff6ff;--ro-soft2:#dbeafe;
  --ro-link:var(--ro-primary);--ro-head:var(--ro-primary-dark);
  --ro-ok:#15803d;--ro-ok-bg:#dcfce7;--ro-bad:#b91c1c;--ro-bad-bg:#fee2e2;--ro-warn:#92400e;--ro-warn-bg:#fffbeb;
  --ro-glow:rgba(245,158,11,.38);
  --ro-radius:16px;--ro-radius-s:10px;
  --ro-w:1240px;
}
.ro-tool{
  color-scheme:light;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ro-ink);line-height:1.5;
  padding:16px;font-size:15px;box-sizing:border-box;
  width:min(var(--ro-w),calc(100vw - 32px));max-width:none;
  margin-left:calc(50% - min(var(--ro-w),calc(100vw - 32px)) / 2);margin-right:0;
  position:relative;
}
@supports (color:color-mix(in srgb,red,blue)){
  .ro-tool,.ro-guide{--ro-glow:color-mix(in srgb,var(--ro-accent) 40%,transparent)}
}
.ro-tool *,.ro-tool *::before,.ro-tool *::after,.ro-guide *,.ro-guide *::before,.ro-guide *::after{box-sizing:border-box}
.ro-tool [hidden],.ro-guide [hidden]{display:none!important}
.ro-tool.ro-corners-sharp,.ro-tool.ro-corners-sharp .ro-guide{--ro-radius:6px;--ro-radius-s:4px}
.ro-tool.ro-font-theme{font-family:inherit}

/* ---------- Width ---------- */
.ro-tool.ro-width-fit{width:auto;max-width:100%;margin-left:auto;margin-right:auto;--ro-w:1100px}
.ro-tool.ro-width-wide{--ro-w:1240px}
.ro-tool.ro-width-xwide{--ro-w:1480px}
.ro-tool.ro-width-full{--ro-w:4000px}
@media (max-width:640px){
  .ro-tool{padding:10px;width:calc(100vw - 20px);margin-left:calc(50% - (100vw - 20px) / 2)}
  .ro-tool.ro-width-fit{width:auto;margin-left:auto}
}

/* ---------- Dark theme (forced) ---------- */
.ro-tool.ro-theme-dark,.ro-tool.ro-theme-dark .ro-guide{
  --ro-ink:#e5e7eb;--ro-ink-soft:#cbd5e1;--ro-muted:#9ca9bd;--ro-line:#2a3650;
  --ro-bg:#0f172a;--ro-card:#131c31;--ro-field:#0b1324;--ro-soft:#16233f;--ro-soft2:#1d3059;
  --ro-link:#7cb7f5;--ro-head:#bfdbfe;
  --ro-ok:#86efac;--ro-ok-bg:#12351f;--ro-bad:#fca5a5;--ro-bad-bg:#3b1414;--ro-warn:#fcd34d;--ro-warn-bg:#33270b;
}
.ro-tool.ro-theme-dark{color-scheme:dark;background:#0a1020;border-radius:calc(var(--ro-radius) + 8px)}
@supports (color:color-mix(in srgb,red,blue)){
  .ro-tool.ro-theme-dark,.ro-tool.ro-theme-dark .ro-guide{--ro-link:color-mix(in srgb,var(--ro-primary) 40%,#ffffff)}
}

/* ---------- Dark theme (follows the visitor's device) ---------- */
@media (prefers-color-scheme:dark){
  .ro-tool.ro-theme-auto,.ro-tool.ro-theme-auto .ro-guide{
    --ro-ink:#e5e7eb;--ro-ink-soft:#cbd5e1;--ro-muted:#9ca9bd;--ro-line:#2a3650;
    --ro-bg:#0f172a;--ro-card:#131c31;--ro-field:#0b1324;--ro-soft:#16233f;--ro-soft2:#1d3059;
    --ro-link:#7cb7f5;--ro-head:#bfdbfe;
    --ro-ok:#86efac;--ro-ok-bg:#12351f;--ro-bad:#fca5a5;--ro-bad-bg:#3b1414;--ro-warn:#fcd34d;--ro-warn-bg:#33270b;
  }
  .ro-tool.ro-theme-auto{color-scheme:dark;background:#0a1020;border-radius:calc(var(--ro-radius) + 8px)}
  @supports (color:color-mix(in srgb,red,blue)){
    .ro-tool.ro-theme-auto,.ro-tool.ro-theme-auto .ro-guide{--ro-link:color-mix(in srgb,var(--ro-primary) 40%,#ffffff)}
  }
}

/* ---------- Header (gradient + icon beside the title) ---------- */
.ro-tool .ro-hero{
  position:relative;overflow:hidden;color:#fff;
  border-radius:calc(var(--ro-radius) + 6px);padding:36px 32px;margin-bottom:18px;
  background:
    radial-gradient(620px 260px at 96% -12%,var(--ro-glow),transparent 62%),
    radial-gradient(520px 320px at -4% 125%,rgba(125,190,255,.28),transparent 60%),
    linear-gradient(118deg,var(--ro-primary-dark) 0%,var(--ro-primary) 62%,var(--ro-primary) 100%);
  box-shadow:0 10px 30px -12px rgba(6,51,94,.55);
}
.ro-tool .ro-hero::after{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 38px rgba(255,255,255,.04),0 0 0 78px rgba(255,255,255,.025);
  pointer-events:none;
}
.ro-tool.ro-header-simple .ro-hero{background:linear-gradient(135deg,var(--ro-primary-dark),var(--ro-primary));box-shadow:none}
.ro-tool.ro-header-simple .ro-hero::after{display:none}
.ro-tool .ro-hero > *{position:relative;z-index:1}
.ro-tool .ro-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.15);padding:6px 12px;border-radius:999px;margin-bottom:14px}
.ro-tool .ro-hero__title{display:flex;align-items:center;gap:16px;margin:0 0 10px}
.ro-tool .ro-hero__icon{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:18px;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(0,0,0,.45);
}
.ro-tool .ro-hero__icon svg{width:32px;height:32px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ro-tool .ro-hero h1{margin:0;padding:0;font-size:clamp(26px,4vw,40px);line-height:1.14;color:#fff;font-weight:800;border:0}
.ro-tool .ro-hero p{margin:0 0 16px;max-width:820px;color:rgba(255,255,255,.92);font-size:16px}
.ro-tool .ro-badges{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:600;color:#fde68a}
@media (max-width:640px){
  .ro-tool .ro-hero{padding:24px 18px}
  .ro-tool .ro-hero__icon{width:46px;height:46px;border-radius:14px}
  .ro-tool .ro-hero__icon svg{width:25px;height:25px}
  .ro-tool .ro-hero__title{gap:12px}
}

/* ---------- Footer note ---------- */
.ro-tool .ro-foot{margin-top:16px;padding:16px 18px;border-radius:calc(var(--ro-radius) - 2px);background:var(--ro-card);border:1px solid var(--ro-line);font-size:13.5px;color:var(--ro-muted)}
.ro-tool .ro-foot b{color:var(--ro-ink)}

/* ---------- Keep theme styles from leaking into the tools ---------- */
.ro-tool button,
.ro-tool input,
.ro-tool select,
.ro-tool textarea {
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: 0;
}
.ro-tool button { min-height: 0; line-height: 1.3; }
.ro-tool a.ro-btn,
.ro-tool a.ro-btn:hover { text-decoration: none; box-shadow: none; }
.ro-tool h1, .ro-tool h2, .ro-tool h3 { text-transform: none; letter-spacing: normal; }

/* ---------- Guide ---------- */
.ro-guide {
  background: var(--ro-card, #fff);
  border: 1px solid var(--ro-line, #e2e8f0);
  border-radius: var(--ro-radius, 16px);
  padding: 20px;
  margin: 16px 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  color: var(--ro-ink, #0f172a);
  font-size: 15px;
  line-height: 1.55;
  box-sizing: border-box;
}
.ro-guide__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ro-guide .ro-guide__title { margin: 0; padding: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: inherit; }
.ro-guide .ro-guide__toggle {
  border: 1.5px solid var(--ro-link, var(--ro-primary, #0a4d8c));
  background: var(--ro-card, #fff);
  color: var(--ro-link, var(--ro-primary, #0a4d8c));
  padding: 6px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ro-guide .ro-guide__toggle:hover { background: var(--ro-bg, #f8fafc); }
.ro-guide .ro-guide__toggle:focus-visible,
.ro-guide summary:focus-visible,
.ro-guide a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.ro-guide__body { margin-top: 14px; }
.ro-guide__body p { margin: 0 0 8px; }
.ro-guide .ro-guide__h { margin: 18px 0 8px; padding: 0; font-size: 15px; font-weight: 700; color: var(--ro-head, var(--ro-primary-dark, #06335e)); }
.ro-guide__body ol, .ro-guide__body ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.ro-guide details {
  border: 1px solid var(--ro-line, #e2e8f0);
  border-radius: var(--ro-radius-s, 10px);
  padding: 10px 14px;
  background: var(--ro-bg, #f8fafc);
  margin: 0 0 8px;
}
.ro-guide summary { cursor: pointer; font-weight: 700; }
.ro-guide details p { margin: 8px 0 0; color: var(--ro-ink-soft, #334155); }
.ro-guide__rel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ro-guide .ro-guide__link {
  display: inline-block;
  border: 1.5px solid var(--ro-link, var(--ro-primary, #0a4d8c));
  background: var(--ro-card, #fff);
  color: var(--ro-link, var(--ro-primary, #0a4d8c));
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.ro-guide .ro-guide__link:hover { background: var(--ro-bg, #f8fafc); }