Module:GameInfo/styles.css

/* Module:GameInfo/styles.css */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped, mobile-safe) */

/* ----------------------------------------------------------------------------
   0) PALETTE (fallback, non-Citizen / non-token contexts)
   - Uses the same “Blue System” values as Common.css fallback tokens.
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   1) BASE CARD + SAFETY
---------------------------------------------------------------------------- */

.sv-gi-card,
.sv-skill-card{
  max-width:600px;
  margin:18px auto;

  border-radius:22px;
  border:1px solid rgba(75,99,136,0.55);

  background-color:#0f172a;
  background-image:
    radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #0f172a, #0b1324);

  box-shadow:0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:visible;

  color:rgba(245,249,255,0.94);
  font-size:15px;
  line-height:1.35;
}

/* Locked split zones */
.sv-gi-top,
.sv-skill-top{
  padding:14px 14px 4px;
  border-radius:22px 22px 0 0;
  overflow:visible;
}

.sv-gi-bottom,
.sv-skill-bottom{
  padding:10px 14px 12px;
  border-top:1px solid rgba(59,75,99,0.80);
  border-radius:0 0 22px 22px;
  background-image:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.10));
}

/* Predictable sizing */
.sv-gi-card,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card *{
  box-sizing:border-box;
}

.sv-gi-card a,
.sv-skill-card a{
  color:rgba(106,166,255,0.95);
  text-decoration:none;
}

.sv-gi-card a:hover,
.sv-skill-card a:hover{
  text-decoration:underline;
}

.sv-gi-error{
  max-width:600px;
  margin:18px auto;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;
  color:rgba(245,249,255,0.92);
}

/* Remove default details marker */
.sv-gi-card summary,
.sv-skill-card summary{
  list-style:none;
}

/* NOTE:
   - .sv-hidden + [hidden] are global in Common.css
   - .sv-miss, .sv-img, .sv-pill, .sv-tabs, .sv-tabpanel, .sv-disclose* are global
*/

/* ----------------------------------------------------------------------------
   2) ICON-TEXT HARDENING (prevents clipped link/text inside icon squares)
---------------------------------------------------------------------------- */

.sv-skill-icon,
.sv-meta-icon,
.sv-ref-ico{
  font-size:0;
  line-height:0;
}

.sv-skill-icon a,
.sv-meta-icon a,
.sv-ref-ico a{
  text-decoration:none;
}

/* Size bumps for “?” badge inside icon boxes */
.sv-skill-icon .sv-miss{
  width:22px;
  height:22px;
  font-size:13px;
  line-height:1;
}

.sv-meta-icon .sv-miss,
.sv-ref-ico .sv-miss{
  width:18px;
  height:18px;
  font-size:12px;
  line-height:1;
}

/* Card image enhancement (global .sv-img handles rounding) */
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img{
  box-shadow:0 10px 18px rgba(0,0,0,0.30);
}

/* Focus outline (no markup changes required) */
.sv-gi-card .sv-tip-btn:focus,
.sv-skill-card .sv-tip-btn:focus,
.sv-gi-card .sv-disclose-btn:focus,
.sv-skill-card .sv-disclose-btn:focus,
.sv-gi-card .sv-tab:focus,
.sv-skill-card .sv-tab:focus,
.sv-gi-card .sv-level-range--custom:focus,
.sv-skill-card .sv-level-range--custom:focus{
  outline:2px solid rgba(106,166,255,0.85);
  outline-offset:2px;
}

/* ----------------------------------------------------------------------------
   3) SKILL HEADER (ICON + TITLE + NOTES + DESCRIPTION)
---------------------------------------------------------------------------- */

.sv-skill-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:2px 0 10px;
}

.sv-skill-icon{
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-skill-headtext{
  min-width:0;
  flex:1 1 auto;
}

.sv-skill-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.sv-skill-title{
  font-weight:900;
  letter-spacing:0.2px;
  font-size:22px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}

.sv-skill-desc{
  margin-top:6px;
  color:rgba(215,226,244,0.92);
  font-size:14px;
  line-height:1.35;
  word-wrap:break-word;
}

/* ----------------------------------------------------------------------------
   4) NOTES TIP (span button + div popover) — SCOPED
---------------------------------------------------------------------------- */

.sv-gi-card .sv-tip,
.sv-skill-card .sv-tip{
  position:relative;
  flex:0 0 auto;
}

.sv-gi-card .sv-tip-btn,
.sv-skill-card .sv-tip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
  cursor:pointer;
}

.sv-gi-card .sv-tip-btn:hover,
.sv-skill-card .sv-tip-btn:hover{
  background:#2e3f59;
}

.sv-gi-card .sv-tip-btn[aria-expanded="true"],
.sv-skill-card .sv-tip-btn[aria-expanded="true"]{
  background:#2e3f59;
  border-color:rgba(106,166,255,0.70);
}

.sv-gi-card .sv-ico,
.sv-skill-card .sv-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  color:rgba(245,249,255,0.96);
  background:rgba(15,23,42,0.35);
  border:1px solid rgba(75,99,136,0.55);
}

/* IMPORTANT: do NOT use display:none here; JS controls via .sv-hidden + [hidden] */
.sv-gi-card .sv-tip-pop,
.sv-skill-card .sv-tip-pop{
  display:block;
  position:absolute;
  z-index:50;
  top:34px;
  right:0;
  width:360px;
  max-width:92vw;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
  background-image:radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
  overflow:hidden;
}

.sv-gi-card .sv-tip-pop-head,
.sv-skill-card .sv-tip-pop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  cursor:pointer;
}

.sv-gi-card .sv-tip-pop-title,
.sv-skill-card .sv-tip-pop-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:0.2px;
  color:rgba(245,249,255,0.96);
}

.sv-gi-card .sv-tip-pop-hint,
.sv-skill-card .sv-tip-pop-hint{
  font-size:12px;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-tip-pop-body,
.sv-skill-card .sv-tip-pop-body{
  padding:10px 12px;
  font-size:13px;
  color:rgba(215,226,244,0.92);
  line-height:1.4;
  word-wrap:break-word;
}

/* ----------------------------------------------------------------------------
   5) META ROW
   - Works with either the “meta-card” structure OR “pill” structure
---------------------------------------------------------------------------- */

.sv-skill-meta{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin:8px 0 10px;
}

/* If meta row uses global .sv-pill */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill{
  width:100%;
  justify-content:flex-start;
  gap:10px;
  padding:9px 12px;
  border-radius:18px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);

  font-weight:900;
  font-size:15px;
  text-transform:none;
  letter-spacing:0;
  color:rgba(245,249,255,0.96);
}

/* If meta row uses .sv-meta-card */
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-meta-icon,
.sv-skill-card .sv-meta-icon{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-gi-card .sv-meta-textwrap,
.sv-skill-card .sv-meta-textwrap{
  min-width:0;
  flex:1 1 auto;
}

.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text{
  font-weight:900;
  color:rgba(245,249,255,0.96);
  font-size:15px;
  line-height:1.10;
  letter-spacing:0.2px;
  min-width:0;
  word-wrap:break-word;
}

.sv-gi-card .sv-meta-lines span,
.sv-skill-card .sv-meta-lines span{
  display:block;
}

/* ----------------------------------------------------------------------------
   6) REQUIREMENTS / USERS ROW
   - Layout only; the disclosure component itself is global in Common.css
---------------------------------------------------------------------------- */

.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 8px;
}

.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose{
  flex:1 1 220px;
  min-width:220px;
}

/* ----------------------------------------------------------------------------
   7) LEVEL SELECTOR (module-owned)
---------------------------------------------------------------------------- */

.sv-skill-level{
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-level-ui,
.sv-skill-card .sv-level-ui{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
}

.sv-gi-card .sv-level-label,
.sv-skill-card .sv-level-label{
  font-weight:900;
  color:rgba(245,249,255,0.94);
}

.sv-gi-card .sv-level-num,
.sv-skill-card .sv-level-num{
  font-weight:900;
  color:rgba(245,249,255,0.98);
}

.sv-gi-card .sv-level-slider,
.sv-skill-card .sv-level-slider{
  position:relative;
}

.sv-gi-card .sv-level-range,
.sv-skill-card .sv-level-range{
  width:100%;
  margin:0;
}

.sv-gi-card .sv-level-range--custom,
.sv-skill-card .sv-level-range--custom{
  display:block;
  position:relative;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
  cursor:pointer;
}

.sv-gi-card .sv-level-track,
.sv-skill-card .sv-level-track{
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  margin-top:-4px;
  height:8px;
  border-radius:999px;
  background:#273449;
  overflow:hidden;
}

.sv-gi-card .sv-level-fill,
.sv-skill-card .sv-level-fill{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(106,166,255,0.85), rgba(245,249,255,0.22));
}

.sv-gi-card .sv-level-thumb,
.sv-skill-card .sv-level-thumb{
  position:absolute;
  left:0%;
  top:50%;
  margin-top:-9px;
  margin-left:-9px;
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(75,99,136,0.55);
  background:rgba(245,249,255,0.92);
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
}

.sv-gi-card .sv-level-ticklabels,
.sv-skill-card .sv-level-ticklabels{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  font-weight:900;
  font-size:12px;
  color:rgba(182,198,224,0.95);
  line-height:1.1;
  min-height:12px;
}

/* ----------------------------------------------------------------------------
   8) SCALING TOP
---------------------------------------------------------------------------- */

.sv-skill-scaling{
  margin:10px 0 10px;
}

.sv-gi-card .sv-scaling-row,
.sv-skill-card .sv-scaling-row{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-scaling-grid,
.sv-skill-card .sv-scaling-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}

.sv-gi-card .sv-scaling-col--scaling,
.sv-skill-card .sv-scaling-col--scaling{
  grid-column:1 / -1;
}

.sv-gi-card .sv-scaling-value,
.sv-skill-card .sv-scaling-value{
  font-weight:900;
  font-size:18px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}

.sv-gi-card .sv-scaling-label,
.sv-skill-card .sv-scaling-label{
  margin-top:3px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-scaling-list,
.sv-skill-card .sv-scaling-list{
  display:grid;
  gap:6px;
  margin-top:2px;
}

.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  color:rgba(215,226,244,0.92);
  font-weight:800;
  font-size:13px;
}

/* ----------------------------------------------------------------------------
   9) CORE STATS GRID
---------------------------------------------------------------------------- */

.sv-skill-core{
  margin:10px 0 10px;
}

.sv-gi-card .sv-core-row,
.sv-skill-card .sv-core-row{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-core-grid,
.sv-skill-card .sv-core-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-core-cell,
.sv-skill-card .sv-core-cell{
  padding:10px 10px 9px;
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  min-width:0;
}

.sv-gi-card .sv-core-top,
.sv-skill-card .sv-core-top{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}

.sv-gi-card .sv-core-num,
.sv-skill-card .sv-core-num{
  font-weight:900;
  font-size:17px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}

.sv-gi-card .sv-core-unit,
.sv-skill-card .sv-core-unit{
  font-weight:900;
  font-size:12px;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-core-label,
.sv-skill-card .sv-core-label{
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-core-label--tight,
.sv-skill-card .sv-core-label--tight{
  letter-spacing:0.12px;
}

/* ----------------------------------------------------------------------------
   10) TABS + PANELS (tabs component is global; content layouts are module-owned)
---------------------------------------------------------------------------- */

.sv-skill-tabs{
  margin:10px 0 0;
}

/* Mechanics grid (tabpanel content) */
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell{
  padding:10px 10px 9px;
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-kw-value,
.sv-skill-card .sv-kw-value{
  margin-top:6px;
  font-size:15px;
  font-weight:900;
  color:rgba(245,249,255,0.96);
  word-wrap:break-word;
}

/* Keyword pills panel */
.sv-gi-card .sv-tab-pills,
.sv-skill-card .sv-tab-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ----------------------------------------------------------------------------
   11) EFFECT / EVENT CARDS
---------------------------------------------------------------------------- */

.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  color:rgba(245,249,255,0.94);
  min-width:0;
}

.sv-gi-card .sv-ref-ico,
.sv-skill-card .sv-ref-ico{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-gi-card .sv-ref-text,
.sv-skill-card .sv-ref-text{
  min-width:0;
  flex:1 1 auto;
}

.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title{
  font-weight:900;
  font-size:15px;
  line-height:1.15;
  color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}

.sv-gi-card .sv-ref-stats,
.sv-skill-card .sv-ref-stats{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}

.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  font-weight:900;
  font-size:12px;
  color:rgba(215,226,244,0.92);
}

.sv-gi-card .sv-ref-sub,
.sv-skill-card .sv-ref-sub{
  margin-top:6px;
  font-weight:900;
  font-size:13px;
  color:rgba(182,198,224,0.95);
}

/* ----------------------------------------------------------------------------
   12) THEME OVERRIDES (Citizen only)
   - Day: switch to light palette for readability.
   - Night: keep base (already dark), but align borders/accents lightly.
---------------------------------------------------------------------------- */

:root.skin-theme-clientpref-day .sv-gi-card,
:root.skin-theme-clientpref-day .sv-skill-card{
  border-color:#9fc4ff;
  background-color:#dbeaff;
  background-image:
    radial-gradient(900px 360px at 40% -10%, rgba(11,99,240,0.14), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20)),
    linear-gradient(180deg, #cfe3ff, #f3f8ff);
  box-shadow:0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
  color:#1f3556;
}

:root.skin-theme-clientpref-day .sv-gi-card a,
:root.skin-theme-clientpref-day .sv-skill-card a{
  color:#0b63f0;
}

:root.skin-theme-clientpref-day .sv-gi-bottom,
:root.skin-theme-clientpref-day .sv-skill-bottom{
  border-top-color:#bdd7ff;
}

:root.skin-theme-clientpref-day .sv-skill-title{
  color:#0b1a33;
}

:root.skin-theme-clientpref-day .sv-skill-desc{
  color:#1f3556;
}

/* Light surfaces */
:root.skin-theme-clientpref-day .sv-skill-icon,
:root.skin-theme-clientpref-day .sv-gi-card .sv-meta-card,
:root.skin-theme-clientpref-day .sv-skill-card .sv-meta-card,
:root.skin-theme-clientpref-day .sv-skill-level,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-row,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-row,
:root.skin-theme-clientpref-day .sv-gi-card .sv-core-row,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-row,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-card,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-card,
:root.skin-theme-clientpref-day .sv-gi-card .sv-tabpanel,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tabpanel{
  border-color:#bdd7ff;
  background-color:#e8f2ff;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.15));
  color:#1f3556;
}

:root.skin-theme-clientpref-day .sv-skill-card .sv-skill-meta .sv-pill,
:root.skin-theme-clientpref-day .sv-gi-card .sv-skill-meta .sv-pill{
  border-color:#bdd7ff;
  background:#f3f8ff;
  color:#0b1a33;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-core-cell,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-cell,
:root.skin-theme-clientpref-day .sv-gi-card .sv-kw-cell,
:root.skin-theme-clientpref-day .sv-skill-card .sv-kw-cell,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-item,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-item,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-stat,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-stat{
  border-color:#bdd7ff;
  background:#f3f8ff;
  color:#1f3556;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-core-num,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-num,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-value,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-value,
:root.skin-theme-clientpref-day .sv-gi-card .sv-kw-value,
:root.skin-theme-clientpref-day .sv-skill-card .sv-kw-value,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-title,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-title,
:root.skin-theme-clientpref-day .sv-gi-card .sv-meta-text,
:root.skin-theme-clientpref-day .sv-skill-card .sv-meta-text{
  color:#0b1a33;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-core-label,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-label,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-label,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-label,
:root.skin-theme-clientpref-day .sv-gi-card .sv-kw-label,
:root.skin-theme-clientpref-day .sv-skill-card .sv-kw-label,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-sub,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-sub{
  color:#456083;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-level-range--custom,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-range--custom{
  border-color:#bdd7ff;
  background:#e8f2ff;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-level-track,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-track{
  background:#cfe3ff;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-level-fill,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-fill{
  background:#0b63f0;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-level-thumb,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-thumb{
  border-color:#9fc4ff;
  background:#0b1a33;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-level-ticklabels,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-ticklabels{
  color:#456083;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-btn,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-btn{
  border-color:#bdd7ff;
  background:#cfe3ff;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-ico,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ico{
  border-color:#bdd7ff;
  background:#e8f2ff;
  color:#0b1a33;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop{
  border-color:#bdd7ff;
  background:#f3f8ff;
  color:#0b1a33;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop-head,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop-head{
  background:#e8f2ff;
  border-bottom-color:#bdd7ff;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop-hint,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop-hint{
  color:#456083;
}

:root.skin-theme-clientpref-day .sv-gi-card .sv-tab:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tab:focus,
:root.skin-theme-clientpref-day .sv-gi-card .sv-disclose-btn:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-disclose-btn:focus,
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-btn:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-btn:focus,
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-range--custom:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-range--custom:focus{
  outline-color:#0b63f0;
}

/* Citizen OS: follow system */
@media (prefers-color-scheme: light){
  :root.skin-theme-clientpref-os .sv-gi-card,
  :root.skin-theme-clientpref-os .sv-skill-card{
    border-color:#9fc4ff;
    background-color:#dbeaff;
    background-image:
      radial-gradient(900px 360px at 40% -10%, rgba(11,99,240,0.14), rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20)),
      linear-gradient(180deg, #cfe3ff, #f3f8ff);
    box-shadow:0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
    color:#1f3556;
  }
  :root.skin-theme-clientpref-os .sv-gi-card a,
  :root.skin-theme-clientpref-os .sv-skill-card a{ color:#0b63f0; }
}

@media (prefers-color-scheme: dark){
  :root.skin-theme-clientpref-os .sv-gi-card,
  :root.skin-theme-clientpref-os .sv-skill-card{
    border-color:rgba(75,99,136,0.55);
    background-color:#0f172a;
    background-image:
      radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
      linear-gradient(180deg, #0f172a, #0b1324);
    color:rgba(245,249,255,0.94);
  }
  :root.skin-theme-clientpref-os .sv-gi-card a,
  :root.skin-theme-clientpref-os .sv-skill-card a{ color:rgba(106,166,255,0.95); }
}

/* ----------------------------------------------------------------------------
   13) RESPONSIVE (popover repositioning + layout tightening)
---------------------------------------------------------------------------- */

@media (max-width:720px){
  .sv-gi-card,
  .sv-skill-card{
    margin:14px 10px;
    border-radius:20px;
  }

  .sv-gi-top,
  .sv-skill-top{
    padding:12px 12px 4px;
    border-radius:20px 20px 0 0;
  }

  .sv-gi-bottom,
  .sv-skill-bottom{
    padding:10px 12px 12px;
    border-radius:0 0 20px 20px;
  }

  .sv-skill-title{ font-size:20px; }

  .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .sv-gi-card .sv-core-grid,
  .sv-skill-card .sv-core-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .sv-gi-card .sv-ref-grid,
  .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }

  .sv-gi-card .sv-tip-pop,
  .sv-skill-card .sv-tip-pop,
  .sv-gi-card .sv-disclose-pop,
  .sv-skill-card .sv-disclose-pop{
    right:0;
    left:auto;
    width:92vw;
    max-width:520px;
  }
}

@media (max-width:520px){
  .sv-skill-head{ gap:10px; }

  .sv-skill-icon{
    width:56px;
    height:56px;
    border-radius:14px;
  }

  .sv-skill-title{ font-size:18px; }
  .sv-skill-desc{ font-size:13px; }

  .sv-gi-card .sv-scaling-grid,
  .sv-skill-card .sv-scaling-grid{ grid-template-columns:1fr; }

  .sv-gi-card .sv-kw-grid,
  .sv-skill-card .sv-kw-grid{ grid-template-columns:1fr; }

  .sv-gi-card .sv-disclose,
  .sv-skill-card .sv-disclose{
    min-width:0;
    flex:1 1 100%;
  }
}