:root {
    --bg:#0f1117; --panel:#171a23; --panel2:#202431; --text:#f3f5f9; --muted:#9aa3b2;
    --accent:#8fd3ff; --class-color:#8fd3ff; --theme-rgb:143,211,255; --good:#7ee787; --warn:#ffd166; --bad:#ff7b72; --border:#2d3342;
  }
  * { box-sizing:border-box; }
  body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:radial-gradient(circle at 50% -10%, rgba(var(--theme-rgb),.24), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--class-color) 18%, #0f1117) 0%, #0f1117 46%, #0b0d13 100%); color:var(--text); transition:background .35s ease; }
  header { position:sticky; top:0; z-index:10; background:linear-gradient(180deg, color-mix(in srgb, var(--class-color) 18%, #171a23) 0%, #12151d 100%); border-bottom:1px solid color-mix(in srgb, var(--class-color) 35%, var(--border)); padding:14px 14px 10px; transition:background .35s ease, border-color .35s ease; }
  .title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  h1 { font-size:20px; margin:0; line-height:1.1; }
  .subtitle { font-size:12px; color:var(--muted); margin-top:3px; }
  .pill { border:1px solid var(--border); color:var(--muted); padding:6px 9px; border-radius:999px; font-size:12px; white-space:nowrap; }
  .class-pill { color:var(--class-color,#8fd3ff); border-color:var(--class-color,#8fd3ff); background:color-mix(in srgb, var(--class-color,#8fd3ff) 14%, transparent); font-weight:900; }
  .tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
  .tab { background:var(--panel2); border:1px solid var(--border); color:var(--text); padding:10px 6px; border-radius:12px; font-weight:700; font-size:13px; }
  .tab.active { border-color:var(--class-color); box-shadow:0 0 0 1px rgba(var(--theme-rgb),.28) inset; background:color-mix(in srgb, var(--class-color) 13%, var(--panel2)); }
  main { padding:14px; max-width:900px; margin:0 auto 76px; }
  .card { background:linear-gradient(180deg, color-mix(in srgb, var(--class-color) 7%, var(--panel)) 0%, var(--panel) 100%); border:1px solid color-mix(in srgb, var(--class-color) 17%, var(--border)); border-radius:16px; padding:14px; margin-bottom:12px; transition:background .35s ease, border-color .35s ease; }
  .row { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
  input, select, textarea, button { font:inherit; }
  input, select, textarea { width:100%; background:#0d1017; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:11px; }
  button { cursor:pointer; }
  .btn { background:var(--panel2); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:12px; font-weight:700; }
  .btn.primary { border-color:var(--class-color); background:color-mix(in srgb, var(--class-color) 17%, var(--panel2)); box-shadow:0 0 0 1px rgba(var(--theme-rgb),.16) inset; }
  .btn.danger { border-color:var(--bad); color:#ffd9d7; }
  .controls { display:grid; gap:10px; grid-template-columns:1fr; }
  @media (min-width:720px){ .controls{ grid-template-columns:2fr 1fr 1fr 1fr 1fr; } }
  .zone-grid { display:block; }
  @media (min-width:1000px){
    main{ max-width:1180px; }
    .region-body{ display:block; }
    details.zone{ margin:8px 0; }
    .zone-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 10px 10px; }
    .zone-grid .relic{ margin:0; }
  }
  @media (min-width:1400px){
    main{ max-width:1440px; }
    .zone-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (min-width:1800px){
    main{ max-width:1680px; }
    .zone-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  }
  .progress { height:12px; background:#0d1017; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
  .bar { height:100%; background:linear-gradient(90deg, var(--class-color), color-mix(in srgb, var(--class-color) 55%, white)); width:0%; transition:width .25s ease, background .35s ease; }
  .stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  @media (min-width:720px){ .stats-grid{ grid-template-columns:repeat(5,1fr); } }
  .statbox { background:#0d1017; border:1px solid var(--border); border-radius:14px; padding:12px; }
  .statbox .big { font-size:24px; font-weight:800; }
  .statbox .small { color:var(--muted); font-size:12px; }
  details.region { background:var(--panel); border:1px solid var(--border); border-radius:16px; margin-bottom:10px; overflow:hidden; }
  details.region > summary { list-style:none; cursor:pointer; padding:14px; font-weight:800; display:flex; justify-content:space-between; gap:8px; }
  details.region > summary::-webkit-details-marker { display:none; }
  .region-body { padding:0 10px 10px; }
  details.zone { background:#0d1017; border:1px solid var(--border); border-radius:14px; margin:8px 0; overflow:hidden; }
  details.zone > summary { list-style:none; cursor:pointer; padding:12px; font-weight:700; display:flex; justify-content:space-between; }
  details.zone > summary::-webkit-details-marker { display:none; }
  .relic { position:relative; display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:stretch; border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 26%, var(--border)); border-radius:16px; padding:0 10px 0 0; margin:9px 0; overflow:hidden; background:linear-gradient(135deg, color-mix(in srgb, var(--element-color,#8fd3ff) 5%, #12151d) 0%, #0d1017 74%); box-shadow:0 8px 22px rgba(0,0,0,.12); min-height:112px; }
  .relic:first-of-type { margin-top:4px; }
  .relic.owned { border-color:color-mix(in srgb, var(--good) 36%, var(--element-color,#8fd3ff)); background:linear-gradient(135deg, color-mix(in srgb, var(--good) 8%, #12100d) 0%, #0d1017 72%); }
  .relic-name { font-weight:850; position:relative; z-index:2; margin-top:4px; }
  .relic-meta { font-size:12px; color:var(--muted); margin-top:3px; position:relative; z-index:2; }
  .tag { display:inline-block; font-size:11px; border:1px solid var(--border); border-radius:999px; padding:3px 7px; color:var(--muted); margin:4px 4px 0 0; position:relative; z-index:2; }
  .element-badge.empty { opacity:.18; }
  .element-badge { width:72px; min-height:112px; border-radius:0; display:grid; place-items:center; color:var(--element-color,#8fd3ff); border-right:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 32%, var(--border)); background:linear-gradient(180deg, #121722 0%, #0a0d14 100%); box-shadow:inset -5px 0 12px rgba(0,0,0,.30), inset 1px 0 0 rgba(255,255,255,.04); position:relative; z-index:2; }
  .element-badge svg { width:52px; height:84px; filter:none; opacity:.98; }
  .element-badge path { vector-effect:non-scaling-stroke; }
  .element-watermark { display:none; }
  .element-label { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:color-mix(in srgb, var(--element-color,#8fd3ff) 72%, var(--muted)); font-weight:900; margin-top:3px; }

  .quick-obtained { min-width:112px; min-height:48px; padding:12px 14px; border-radius:14px; border:1px solid var(--good); background:color-mix(in srgb, var(--good) 18%, #10141d); color:#d7ffdd; font-weight:900; position:relative; z-index:3; }
  .rank-chip { min-width:112px; min-height:48px; display:grid; place-items:center; border-radius:14px; border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 45%, var(--border)); background:rgba(0,0,0,.22); color:var(--warn); font-weight:900; letter-spacing:.06em; position:relative; z-index:3; }
  .relic { cursor:pointer; }
  .relic:focus-within, .relic:hover { border-color:color-mix(in srgb, var(--element-color,#8fd3ff) 54%, var(--border)); }
  .sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.58); display:none; align-items:flex-end; justify-content:center; z-index:99; padding:14px; }
  .sheet-backdrop.open { display:flex; }
  .sheet { width:min(560px,100%); max-height:88dvh; overflow:auto; background:linear-gradient(180deg, color-mix(in srgb, var(--element-color,#8fd3ff) 12%, var(--panel)) 0%, #10141d 100%); border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 38%, var(--border)); border-radius:22px; padding:16px; box-shadow:0 -18px 50px rgba(0,0,0,.45); }
  @media (min-width:800px){ .sheet-backdrop{ align-items:center; } .sheet{ border-radius:22px; } }
  .rank-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }
  .rank-btn { min-height:58px; border-radius:15px; border:1px solid var(--border); background:#0d1017; color:var(--text); font-weight:900; font-size:16px; }
  .rank-btn.active { border-color:var(--element-color,#8fd3ff); background:color-mix(in srgb, var(--element-color,#8fd3ff) 18%, #0d1017); color:var(--warn); }
  .sheet-actions { display:flex; gap:10px; margin-top:14px; }
  .sheet-actions .btn { flex:1; min-height:48px; }

  .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
  .detail-box { background:#0d1017; border:1px solid var(--border); border-radius:14px; padding:10px; }
  .detail-box .label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
  .detail-box .value { margin-top:4px; font-weight:850; }
  .set-panel { margin-top:12px; background:#0d1017; border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 30%, var(--border)); border-radius:16px; padding:12px; }
  .set-progress-row { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; margin:8px 0 6px; }
  .bonus-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .bonus-chip { border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 35%, var(--border)); background:rgba(0,0,0,.18); border-radius:999px; padding:5px 8px; font-size:12px; color:var(--text); }
  .member-list { display:grid; gap:6px; margin-top:10px; }
  .member-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:7px 8px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.02); font-size:13px; }
  .member-row.current { border-color:color-mix(in srgb, var(--element-color,#8fd3ff) 48%, var(--border)); background:color-mix(in srgb, var(--element-color,#8fd3ff) 10%, transparent); }
  .member-rank { color:var(--warn); font-weight:900; white-space:nowrap; }
  .sheet-hero { display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; margin-bottom:10px; }
  .sheet-hero h2 { margin:2px 0 4px; line-height:1.08; }
  .sheet-hero-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:5px; }
  .element-mini { border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 38%, var(--border)); color:var(--element-color,#8fd3ff); background:rgba(0,0,0,.20); border-radius:999px; padding:4px 8px; font-size:12px; font-weight:900; }
  .set-progress-card { min-width:96px; text-align:center; padding:10px; border-radius:14px; border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 35%, var(--border)); background:rgba(0,0,0,.22); }
  .set-progress-card .big { font-size:22px; font-weight:950; color:var(--text); }
  .set-progress-card .small { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:900; }
  .bonus-cards { display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }
  @media (min-width:560px){ .bonus-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .bonus-card { border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 30%, var(--border)); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.10)); padding:10px; min-height:74px; }
  .bonus-card .label { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:color-mix(in srgb, var(--element-color,#8fd3ff) 70%, var(--muted)); font-weight:950; }
  .bonus-card .value { margin-top:6px; font-weight:900; line-height:1.18; }
  .bonus-card.pending .value { color:var(--muted); font-weight:700; }
  .relic-info-line { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
  @media (max-width:520px){ .detail-grid{ grid-template-columns:1fr; } .member-row{ font-size:12px; } }

  .dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
  .element-stat-card { border:1px solid color-mix(in srgb, var(--element-color) 28%, var(--border)); background:linear-gradient(135deg, color-mix(in srgb, var(--element-color) 8%, var(--panel)) 0%, var(--panel) 78%); border-radius:16px; padding:12px; }
  .element-stat-head { display:grid; grid-template-columns:34px 1fr; gap:9px; align-items:center; margin-bottom:8px; }
  .element-stat-glyph { width:34px; height:42px; display:grid; place-items:center; color:var(--element-color); background:#0b0f17; border:1px solid color-mix(in srgb, var(--element-color) 35%, var(--border)); border-radius:11px; }
  .element-stat-glyph svg { width:30px; height:38px; }
  .mini-meter { height:8px; background:#0a0d13; border:1px solid var(--border); border-radius:999px; overflow:hidden; margin:7px 0; }
  .mini-meter > div { height:100%; width:0%; background:linear-gradient(90deg, var(--element-color), color-mix(in srgb, var(--element-color) 70%, white)); }
  .stat-lines { display:grid; gap:4px; margin-top:8px; }
  .stat-line { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
  .stat-line strong { color:var(--text); }
  .quality-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
  .quality-pill { background:#0d1017; border:1px solid var(--border); border-radius:14px; padding:10px; }
  .quality-pill .num { font-size:20px; font-weight:950; color:var(--text); }
  .quality-pill.good { border-color:rgba(83,214,191,.36); }
  .quality-pill.warn { border-color:rgba(255,209,102,.36); }
  .global-stat-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .global-stat { border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background:rgba(0,0,0,.16); border-radius:999px; padding:7px 10px; font-size:12px; font-weight:800; }
  .set-card { --element-color:#8fd3ff; background:linear-gradient(135deg, color-mix(in srgb, var(--element-color) 5%, var(--panel)) 0%, var(--panel) 76%); border:1px solid color-mix(in srgb, var(--element-color) 25%, var(--border)); border-radius:16px; padding:14px; margin-bottom:12px; position:relative; overflow:hidden; }
  .set-head { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; }
  .set-glyph { width:42px; height:52px; display:grid; place-items:center; color:var(--element-color); background:#0b0f17; border:1px solid color-mix(in srgb, var(--element-color) 30%, var(--border)); border-radius:13px; }
  .set-glyph svg { width:34px; height:46px; }
  .rarity-pill { display:inline-flex; align-items:center; gap:5px; width:max-content; border-radius:999px; padding:3px 8px; font-size:10px; text-transform:uppercase; font-weight:950; letter-spacing:.075em; border:1px solid var(--rarity-color,#777); color:color-mix(in srgb, var(--rarity-color,#aaa) 88%, white); background:color-mix(in srgb, var(--rarity-color,#777) 16%, #0b0f17); box-shadow:0 0 0 1px color-mix(in srgb, var(--rarity-color,#777) 11%, transparent) inset; }
  .rarity-mythic { --rarity-color:#fff16a; }
  .rarity-legendary { --rarity-color:#ff8f3f; }
  .rarity-epic { --rarity-color:#b778ff; }
  .rarity-rare { --rarity-color:#4ea8ff; }
  .rarity-unknown { --rarity-color:#9aa3b2; }
  .score { font-size:22px; font-weight:900; color:var(--warn); }
  .tiny-list { margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:13px; }
  .priority { color:var(--warn); border-color:rgba(255,209,102,.55); }
  .hidden { display:none !important; }
  .muted { color:var(--muted); }
  .note { font-size:13px; color:var(--muted); line-height:1.35; }
  .setup { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:18px; }
  .setup .card { max-width:520px; width:100%; }
  .class-grid, .stat-picker { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .pick { background:#0d1017; border:1px solid var(--border); border-radius:14px; padding:12px; text-align:center; font-weight:700; color:var(--text); }
  .pick.class-pick { color:var(--class-color,#f3f5f9); border-color:color-mix(in srgb, var(--class-color,#8fd3ff) 45%, var(--border)); }
  .pick.class-pick.active { border-color:var(--class-color,#8fd3ff); background:color-mix(in srgb, var(--class-color,#8fd3ff) 16%, #0d1017); box-shadow:0 0 0 1px color-mix(in srgb, var(--class-color,#8fd3ff) 30%, transparent) inset; }
  .pick.active { border-color:var(--accent); }

/* v1.1 polish: cleaner oversized glyph rail + richer sets/planner */
.relic{ grid-template-columns:72px 1fr auto; }
.element-badge{ width:72px; }
.element-badge svg{ width:52px; height:84px; }
@media (max-width:520px){
  .relic{ grid-template-columns:66px 1fr auto; }
  .element-badge{ width:66px; }
  .element-badge svg{ width:48px; height:78px; }
}
.set-list-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:900px){ .set-list-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1450px){ .set-list-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.set-card{ margin-bottom:0; padding:0; }
.set-card-inner{ padding:14px; position:relative; z-index:2; }
.set-card:before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,var(--element-color),transparent 84%); opacity:.85; }
.set-head strong{ font-size:17px; }
.set-summary-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.set-mini{ background:rgba(0,0,0,.18); border:1px solid color-mix(in srgb, var(--element-color) 22%, var(--border)); border-radius:12px; padding:8px; text-align:center; }
.set-mini b{ display:block; font-size:18px; }
.set-mini span{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.planner-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:900px){ .planner-grid{ grid-template-columns:1.1fr .9fr; } }
.planner-target{ border:1px solid color-mix(in srgb, var(--element-color,#8fd3ff) 32%, var(--border)); border-radius:16px; padding:12px; background:linear-gradient(135deg,color-mix(in srgb,var(--element-color,#8fd3ff) 8%,#11151e),#0d1017 78%); margin:10px 0; }
.planner-target .target-title{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.planner-target .target-title strong{ font-size:16px; }
.planner-badge{ border:1px solid color-mix(in srgb,var(--element-color,#8fd3ff) 40%,var(--border)); color:var(--element-color,#8fd3ff); border-radius:999px; padding:4px 8px; font-size:11px; font-weight:900; }

/* v1.2 icon color pass: make solid SVG emblems inherit element color everywhere */
.element-badge svg,
.set-glyph svg,
.element-stat-glyph svg,
.planner-target svg { color: var(--element-color,#8fd3ff); fill: currentColor; }
.element-badge svg path,
.set-glyph svg path,
.element-stat-glyph svg path,
.planner-target svg path { fill: currentColor; stroke: none; }
.element-badge { color: var(--element-color,#8fd3ff); }
.set-glyph { color: var(--element-color,#8fd3ff); }
.element-stat-glyph { color: var(--element-color,#8fd3ff); }