/* global React, Icon, Origin, SyncChip, Meter, CB, JobChip, Portrait, Tag, Empty, Seg, useRoute */
// ============================================================
// Screens 3-4: Dashboard + Relic tracker (hero screens)
// ============================================================
const { useState: useS34, useMemo: useM34 } = React;

// -------------------- 3. Individual Dashboard --------------------
function ScreenDashboard({ density }) {
  const { go } = useRoute();
  const character = {
    name: "Aerith Nightsong",
    world: 'Sargatanas', dc: 'Aether',
    title: 'Warrior of Light',
    gc: 'Maelstrom · Storm Captain',
    fc: 'Whispers of Hydaelyn «WoH»',
    race: 'Au Ra · Xaela',
    ilvl: 720,
    bisTarget: 740,
  };

  const jobs = [
    { job: 'PLD', lvl: 100, cap: true }, { job: 'WAR', lvl: 100, cap: true }, { job: 'DRK', lvl: 92 }, { job: 'GNB', lvl: 90 },
    { job: 'WHM', lvl: 100, cap: true }, { job: 'SCH', lvl: 100, cap: true }, { job: 'AST', lvl: 88 }, { job: 'SGE', lvl: 92 },
    { job: 'NIN', lvl: 100, cap: true }, { job: 'SAM', lvl: 96 }, { job: 'BRD', lvl: 100, cap: true }, { job: 'BLM', lvl: 100, cap: true },
    { job: 'RDM', lvl: 95 }, { job: 'DNC', lvl: 88 }, { job: 'PCT', lvl: 94 }, { job: 'VPR', lvl: 91 },
  ];

  const relics = [
    { name: 'Zodiac · Animus', job: 'PLD', value: 7, total: 19 },
    { name: 'Anima · Reborn', job: 'BRD', value: 3, total: 12 },
    { name: 'Eureka · Pyros', job: 'WAR', value: 11, total: 14 },
    { name: 'Resistance · Recollection', job: 'BLM', value: 1, total: 5 },
  ];

  const collections = [
    { name: 'Mounts',       v: 184, t: 312 },
    { name: 'Minions',      v: 312, t: 540 },
    { name: 'Achievements', v: 1842, t: 3210 },
    { name: 'Orchestrion',  v: 218, t: 825 },
  ];

  return (
    <div className="dash">
      <div className="page-h">
        <div>
          <h1 className="page-h-title">Good evening, jakob</h1>
          <div className="page-h-sub">Here's where your characters and grinds stand tonight.</div>
        </div>
        <div className="row gap-8">
          <button className="btn small"><Icon.Refresh /> Refresh data</button>
          <button className="btn small primary"><Icon.Plus /> Track a new grind</button>
        </div>
      </div>

      {/* Character header card */}
      <section className="card char-card">
        <div className="char-card-body">
          <Portrait size={88} label="character" />
          <div className="char-info">
            <div className="row gap-8" style={{ marginBottom: 4 }}>
              <span className="muted" style={{ fontSize: 11.5 }}>{character.title}</span>
              <Origin kind="auto" />
            </div>
            <h2 className="char-name">{character.name}</h2>
            <div className="row gap-12 char-meta">
              <span>{character.world} · {character.dc}</span>
              <span className="faint">·</span>
              <span>{character.race}</span>
              <span className="faint">·</span>
              <span>{character.gc}</span>
            </div>
            <div className="row gap-12 char-meta" style={{ marginTop: 4 }}>
              <span><strong>FC</strong> {character.fc}</span>
            </div>
            <div className="row gap-8" style={{ marginTop: 14 }}>
              <SyncChip state="ok" />
              <span className="muted" style={{ fontSize: 11.5 }}>Next auto-sync in 2h 14m</span>
            </div>
          </div>
          <div className="char-stats">
            <div className="char-stat">
              <div className="char-stat-label">Item level <Origin kind="auto" /></div>
              <div className="char-stat-val num">720</div>
              <div className="char-stat-sub">→ 740 BiS · <Origin kind="diffed" /></div>
            </div>
            <div className="char-stat">
              <div className="char-stat-label">Jobs at cap <Origin kind="auto" /></div>
              <div className="char-stat-val num">7<span className="muted">/22</span></div>
              <div className="char-stat-sub">15 in progress</div>
            </div>
            <div className="char-stat">
              <div className="char-stat-label">Time played <Origin kind="auto" /></div>
              <div className="char-stat-val num">4,318<span className="muted" style={{ fontSize: 14 }}>h</span></div>
              <div className="char-stat-sub">since A Realm Reborn</div>
            </div>
          </div>
        </div>
        <div className="char-jobs">
          <div className="char-jobs-label">All jobs <Origin kind="auto" /></div>
          <div className="char-jobs-grid">
            {jobs.map(j => <JobChip key={j.job} {...j} />)}
          </div>
        </div>
      </section>

      {/* At-a-glance grid */}
      <div className="dash-grid">
        {/* Relics — hero */}
        <section className="card hero-card" onClick={() => go('relics')} style={{ cursor: 'pointer' }}>
          <div className="card-h">
            <Icon.Relic />
            <div className="card-h-title">Relics</div>
            <div className="card-h-sub"><Origin kind="manual" /></div>
            <button className="btn ghost small" onClick={(e) => { e.stopPropagation(); go('relics'); }}>
              View all <Icon.ChevR />
            </button>
          </div>
          <div className="card-b">
            <Meter value={22} total={50} label="Total relic progress (across all series)" size="lg" tone="status" />
            <ul className="relic-list">
              {relics.map(r => (
                <li key={r.name} className="relic-row">
                  <div className="relic-row-l">
                    <div className="relic-name">{r.name}</div>
                    <div className="relic-job"><JobChip job={r.job} lvl={ROLES[r.job] ? '' : ''} /></div>
                  </div>
                  <div className="relic-row-r">
                    <Meter value={r.value} total={r.total} size="sm" tone="status" showPct={true} />
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* Collections */}
        <section className="card">
          <div className="card-h">
            <Icon.Collections />
            <div className="card-h-title">Collections</div>
            <div className="card-h-sub"><Origin kind="auto" /></div>
            <button className="btn ghost small">View all <Icon.ChevR /></button>
          </div>
          <div className="card-b">
            <div className="col gap-16">
              {collections.map(c => (
                <Meter key={c.name} value={c.v} total={c.t} label={c.name} tone="status" />
              ))}
            </div>
            <div className="hr" style={{ margin: '14px -16px' }}></div>
            <div className="row" style={{ justifyContent: 'space-between', alignItems: 'center', padding: '4px 0' }}>
              <span className="muted" style={{ fontSize: 12 }}>2 niche trackers active <Origin kind="manual" /></span>
              <button className="btn ghost small"><Icon.Plus /> Add tracker</button>
            </div>
          </div>
        </section>

        {/* Current gear / BiS */}
        <section className="card">
          <div className="card-h">
            <Icon.Filter />
            <div className="card-h-title">Current gear</div>
            <div className="card-h-sub">PLD · Tank</div>
            <button className="btn ghost small">BiS plan <Icon.ChevR /></button>
          </div>
          <div className="card-b">
            <div className="row" style={{ justifyContent: 'space-between', marginBottom: 14 }}>
              <div>
                <div className="muted" style={{ fontSize: 11.5 }}>Average item level <Origin kind="auto" /></div>
                <div className="num" style={{ fontSize: 26, fontWeight: 600, color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>720</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="muted" style={{ fontSize: 11.5 }}>BiS target <Origin kind="manual" /></div>
                <div className="num" style={{ fontSize: 26, fontWeight: 600, color: 'var(--primary-hi)', letterSpacing: '-0.01em' }}>740</div>
              </div>
            </div>
            <Meter value={9} total={14} label="BiS pieces equipped" suffix={<span style={{ marginLeft: 8 }} className="diffed-label"><Origin kind="diffed" /></span>} tone="status" />
            <div className="bis-grid">
              {['MH','OH','HD','BD','HN','GV','BT','FT','EAR','NK','BR','RG','RG','WP'].map((s, i) => (
                <div key={i} className={`bis-slot ${i < 9 ? 'on' : ''}`}>{s}</div>
              ))}
            </div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 10 }}>
              5 pieces to go · Earrings, Necklace, Bracelet, Ring (×2)
            </div>
          </div>
        </section>

        {/* Statics */}
        <section className="card">
          <div className="card-h">
            <Icon.Static />
            <div className="card-h-title">My statics</div>
            <button className="btn ghost small" onClick={() => go('static')}>Open <Icon.ChevR /></button>
          </div>
          <div className="card-b">
            <div className="stc-card" onClick={() => go('static')}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <div>
                  <div className="strong" style={{ fontSize: 13.5 }}>Aether Crystals</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>M4S — Savage · Tue/Thu 8–11 PM ET</div>
                </div>
                <Tag kind="primary" dot>Active</Tag>
              </div>
              <div className="row gap-12" style={{ marginTop: 10 }}>
                <Meter value={62} label="Phase 3 prog" tone="status" suffix={<span style={{ marginLeft: 6 }}><Origin kind="manual" /></span>} />
              </div>
              <div className="row gap-6" style={{ marginTop: 10 }}>
                <RoleChip job="PLD" /><RoleChip job="WAR" />
                <RoleChip job="WHM" /><RoleChip job="SCH" />
                <RoleChip job="NIN" /><RoleChip job="SAM" />
                <RoleChip job="BRD" /><RoleChip job="BLM" />
              </div>
            </div>
            <div className="stc-empty">
              <div>
                <div className="strong" style={{ fontSize: 13 }}>Looking for a second static?</div>
                <div className="muted" style={{ fontSize: 12 }}>Create one or join with an invite code.</div>
              </div>
              <button className="btn small">Create</button>
            </div>
          </div>
        </section>
      </div>

      <style>{`
        .dash { max-width: 1320px; }
        .char-card { margin-bottom: 16px; }
        .char-card-body { display: flex; gap: 22px; padding: 20px; }
        .char-info { flex: 1; min-width: 0; }
        .char-name {
          font-size: 22px; font-weight: 600;
          margin: 0 0 6px;
          letter-spacing: -0.018em;
          color: var(--text-strong);
        }
        .char-meta { font-size: 12.5px; color: var(--text-muted); }
        .char-meta strong { color: var(--text); font-weight: 600; margin-right: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
        .char-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
          padding: 12px 12px 4px 0;
          border-left: 1px solid var(--border-soft);
          padding-left: 22px;
          min-width: 380px;
        }
        .char-stat-label { font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
        .char-stat-val { font-size: 26px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; line-height: 1.1; }
        .char-stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

        .char-jobs {
          border-top: 1px solid var(--border-soft);
          padding: 14px 20px 16px;
          background: var(--bg-elev);
        }
        .char-jobs-label {
          font-size: 11px; color: var(--text-faint);
          letter-spacing: 0.06em; text-transform: uppercase;
          display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
        }
        .char-jobs-grid { display: flex; flex-wrap: wrap; gap: 6px; }

        .dash-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 16px;
        }
        .hero-card .card-b { padding-top: 20px; }
        .hero-card:hover { border-color: var(--border-hi); }
        .relic-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
        .relic-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-soft); }
        .relic-row:first-child { border-top: none; padding-top: 4px; }
        .relic-row-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .relic-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .bis-grid {
          display: grid;
          grid-template-columns: repeat(14, 1fr);
          gap: 4px;
          margin-top: 14px;
        }
        .bis-slot {
          aspect-ratio: 1;
          background: var(--bg-elev);
          border: 1px solid var(--border-soft);
          border-radius: 4px;
          display: grid; place-items: center;
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 9px;
          color: var(--text-faint);
        }
        .bis-slot.on {
          background: var(--success-bg);
          border-color: oklch(0.50 0.13 152 / 0.45);
          color: var(--success);
        }

        .stc-card {
          padding: 14px;
          background: var(--bg-elev);
          border: 1px solid var(--border-soft);
          border-radius: 10px;
          cursor: pointer;
        }
        .stc-card:hover { background: var(--surface-2); border-color: var(--border); }
        .stc-empty {
          display: flex; align-items: center; justify-content: space-between; gap: 14px;
          padding: 12px 14px;
          border: 1px dashed var(--border);
          border-radius: 10px;
          margin-top: 10px;
        }

        @media (max-width: 1100px) {
          .dash-grid { grid-template-columns: 1fr; }
          .char-card-body { flex-direction: column; }
          .char-stats { border-left: none; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 14px; min-width: 0; }
        }
      `}</style>
    </div>
  );
}

// -------------------- 4. Relic tracker --------------------
function ScreenRelics() {
  const { go } = useRoute();
  const [activeStage, setActiveStage] = useS34(3); // 0..n
  const [activeJob, setActiveJob] = useS34('PLD');

  const stages = [
    { name: 'Relic', done: true,  pct: 100 },
    { name: 'Zenith', done: true, pct: 100 },
    { name: 'Atma',  done: true,  pct: 100 },
    { name: 'Animus', done: false, pct: 37, current: true },
    { name: 'Novus', done: false, pct: 0 },
    { name: 'Nexus', done: false, pct: 0 },
    { name: 'Braves', done: false, pct: 0 },
    { name: 'Zeta',  done: false, pct: 0 },
  ];

  const trackedJobs = ['PLD','WAR','DRK','BRD','WHM'];

  const tasks = [
    {
      zone: 'Northern Thanalan', region: 'Thanalan',
      items: [
        { name: 'Bomb baron', type: 'Enemy',  loc: 'X: 14.2  Y: 22.8', done: true },
        { name: 'Lampyre',    type: 'Enemy',  loc: 'X: 17.5  Y: 16.4', done: true },
        { name: 'FATE: Foul Play', type: 'FATE', loc: 'X: 21.3  Y: 24.0', done: false },
      ],
    },
    {
      zone: 'Eastern La Noscea', region: 'La Noscea',
      items: [
        { name: 'Sahuagin warrior', type: 'Enemy', loc: 'X: 31.1  Y: 30.4', done: true },
        { name: 'Sea wasp',         type: 'Enemy', loc: 'X: 25.6  Y: 33.2', done: true },
        { name: 'Levequest: Storm in a Teacup', type: 'Leve', loc: 'Costa del Sol', done: false },
        { name: 'FATE: A Pirate\'s Life',       type: 'FATE', loc: 'X: 33.6  Y: 31.8', done: false },
      ],
    },
    {
      zone: 'Coerthas Central Highlands', region: 'Coerthas',
      items: [
        { name: 'Biast',  type: 'Enemy', loc: 'X: 13.5  Y: 18.7', done: true },
        { name: 'FATE: The Boulder Beheld', type: 'FATE', loc: 'X: 20.2  Y: 21.6', done: false },
        { name: 'Dungeon: Stone Vigil',     type: 'Dungeon', loc: 'Level 41 · Trial', done: true },
      ],
    },
    {
      zone: 'Outer La Noscea', region: 'La Noscea',
      items: [
        { name: 'Goblin pugilist', type: 'Enemy', loc: 'X: 16.7  Y: 18.3', done: false },
        { name: 'FATE: Trial by Claw', type: 'FATE', loc: 'X: 14.4  Y: 20.2', done: true },
      ],
    },
    {
      zone: 'Mor Dhona', region: 'Mor Dhona',
      items: [
        { name: 'FATE: The Four Winds',   type: 'FATE', loc: 'X: 23.5  Y: 11.2', done: false },
        { name: 'Dungeon: Castrum Meridianum', type: 'Dungeon', loc: 'Level 50 · Trial', done: false },
      ],
    },
  ];
  const [done, setDone] = useS34(() => {
    const m = {};
    tasks.forEach((g, gi) => g.items.forEach((it, ii) => { m[`${gi}-${ii}`] = it.done; }));
    return m;
  });
  const totalCount = tasks.reduce((a, g) => a + g.items.length, 0);
  const doneCount = Object.values(done).filter(Boolean).length;

  return (
    <div className="relic">
      <div className="page-h">
        <div>
          <div className="row gap-8" style={{ marginBottom: 6 }}>
            <Tag>Series · Zodiac</Tag>
            <Tag dot>2.x · A Realm Reborn</Tag>
          </div>
          <h1 className="page-h-title">Zodiac weapon</h1>
          <div className="page-h-sub">The eight-stage relic chain. Stages complete left to right.</div>
        </div>
        <div className="row gap-8">
          <button className="btn small"><Icon.Copy /> Duplicate for another job</button>
          <button className="btn small"><Icon.Edit /> Manage tasks</button>
        </div>
      </div>

      {/* Job selector */}
      <div className="relic-jobs">
        <div className="relic-jobs-l">
          <span className="muted" style={{ fontSize: 11.5, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Tracking</span>
          <div className="row gap-6">
            {trackedJobs.map(j => (
              <button key={j} className={`relic-job-btn ${activeJob === j ? 'on' : ''}`} onClick={() => setActiveJob(j)}>
                <RoleChip job={j} />
              </button>
            ))}
            <button className="btn ghost small" style={{ marginLeft: 4 }}><Icon.Plus /> Track another job</button>
          </div>
        </div>
        <div className="muted" style={{ fontSize: 12 }}>Each job tracks its own task list.</div>
      </div>

      {/* Stage stepper */}
      <div className="card stage-card">
        <div className="stage-bar">
          {stages.map((s, i) => (
            <React.Fragment key={s.name}>
              <button
                className={`stage ${s.done ? 'done' : ''} ${i === activeStage ? 'active' : ''}`}
                onClick={() => setActiveStage(i)}
              >
                <div className="stage-circle">
                  {s.done ? <Icon.Check /> : <span className="num">{i + 1}</span>}
                </div>
                <div className="stage-name">{s.name}</div>
                <div className="stage-pct mono">{s.pct}%</div>
              </button>
              {i < stages.length - 1 && (
                <div className={`stage-conn ${stages[i].done ? 'done' : ''}`}></div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Active stage detail */}
      <div className="relic-detail">
        <div className="card detail-head">
          <div className="row gap-12" style={{ alignItems: 'flex-start', flex: 1 }}>
            <div className="stage-glyph">
              <span className="mono">{activeStage + 1}</span>
            </div>
            <div style={{ flex: 1 }}>
              <div className="row gap-8" style={{ marginBottom: 4 }}>
                <span className="muted" style={{ fontSize: 11.5 }}>Stage 4 of 8</span>
                <Origin kind="manual" />
              </div>
              <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: 'var(--text-strong)', letterSpacing: '-0.015em' }}>Animus</h2>
              <p className="muted" style={{ margin: '4px 0 0', fontSize: 13 }}>
                Twelve books, each unlocked by completing a list of tasks in a specific zone.
                Check tasks as you go — your progress is local to {activeJob}.
              </p>
            </div>
          </div>
          <div className="detail-meter">
            <Meter value={doneCount} total={totalCount} label="Animus progress" size="lg" tone="status" />
            <div className="muted" style={{ fontSize: 11.5, marginTop: 8 }}>
              Last updated 3m ago · <Origin kind="manual" />
            </div>
          </div>
        </div>

        <div className="zone-list">
          {tasks.map((zone, gi) => {
            const zDone = zone.items.filter((_, ii) => done[`${gi}-${ii}`]).length;
            return (
              <div key={gi} className="card zone-card">
                <div className="zone-h">
                  <div className="zone-h-l">
                    <div className="zone-region">{zone.region}</div>
                    <div className="zone-name">{zone.zone}</div>
                  </div>
                  <div className="zone-h-r">
                    <span className="num muted" style={{ fontSize: 12 }}>{zDone} / {zone.items.length}</span>
                    <Meter value={zDone} total={zone.items.length} size="sm" tone="status" showPct={false} />
                  </div>
                </div>
                <ul className="task-list">
                  {zone.items.map((it, ii) => {
                    const key = `${gi}-${ii}`;
                    const isDone = !!done[key];
                    return (
                      <li key={ii} className={`task ${isDone ? 'done' : ''}`}>
                        <CB on={isDone} onChange={(v) => setDone(d => ({ ...d, [key]: v }))} />
                        <div className="task-main">
                          <div className="task-name">{it.name}</div>
                          <div className="task-loc mono">{it.loc}</div>
                        </div>
                        <span className={`task-type t-${it.type.toLowerCase()}`}>{it.type}</span>
                      </li>
                    );
                  })}
                </ul>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        .relic-jobs {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 16px;
          background: var(--bg-elev);
          border: 1px solid var(--border-soft);
          border-radius: 10px;
          margin-bottom: 16px;
        }
        .relic-jobs-l { display: flex; align-items: center; gap: 14px; }
        .relic-job-btn {
          background: transparent;
          border: 1px solid transparent;
          border-radius: 6px;
          padding: 2px;
          cursor: pointer;
        }
        .relic-job-btn:hover { background: var(--surface); }
        .relic-job-btn.on { background: var(--primary-bg); border-color: oklch(0.55 0.13 275 / 0.4); }

        .stage-card { margin-bottom: 18px; }
        .stage-bar {
          display: flex; align-items: center;
          padding: 18px 14px;
          overflow-x: auto;
        }
        .stage {
          display: flex; flex-direction: column;
          align-items: center;
          gap: 8px;
          background: none; border: none; padding: 6px 4px;
          cursor: pointer;
          flex: 0 0 auto;
          min-width: 90px;
        }
        .stage-circle {
          width: 36px; height: 36px;
          border-radius: 50%;
          background: var(--surface-hi);
          border: 1.5px solid var(--border);
          display: grid; place-items: center;
          font-size: 13px;
          font-weight: 600;
          color: var(--text-muted);
        }
        .stage.done .stage-circle {
          background: var(--success-bg);
          border-color: oklch(0.50 0.13 152 / 0.55);
          color: var(--success);
        }
        .stage.done .stage-circle svg { width: 14px; height: 14px; }
        .stage.active .stage-circle {
          background: var(--primary);
          border-color: var(--primary);
          color: oklch(0.13 0.02 275);
          box-shadow: 0 0 0 4px var(--primary-bg);
        }
        .stage-name { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
        .stage.active .stage-name { color: var(--text-strong); font-weight: 600; }
        .stage.done .stage-name { color: var(--text); }
        .stage-pct { font-size: 10.5px; color: var(--text-faint); }
        .stage-conn {
          height: 2px;
          flex: 1;
          background: var(--border);
          border-radius: 999px;
          align-self: center;
          min-width: 12px;
          position: relative;
          top: -7px;
        }
        .stage-conn.done { background: var(--success); }

        .detail-head {
          display: flex; gap: 24px; padding: 20px;
          margin-bottom: 14px;
          align-items: center;
        }
        .stage-glyph {
          width: 64px; height: 64px;
          flex: 0 0 64px;
          border-radius: 14px;
          background: linear-gradient(135deg, var(--primary-bg) 0%, oklch(0.30 0.08 305 / 0.4) 100%);
          border: 1px solid oklch(0.55 0.13 275 / 0.4);
          display: grid; place-items: center;
          font-size: 26px; font-weight: 600;
          color: var(--primary-hi);
          letter-spacing: -0.02em;
        }
        .detail-meter {
          flex: 0 0 280px;
          padding-left: 24px;
          border-left: 1px solid var(--border-soft);
        }

        .zone-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .zone-card { padding: 0; }
        .zone-h {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 16px;
          background: var(--bg-elev);
          border-bottom: 1px solid var(--border-soft);
        }
        .zone-region { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
        .zone-name { font-size: 14px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.005em; margin-top: 2px; }
        .zone-h-r { min-width: 130px; text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
        .zone-h-r .meter { width: 100px; }

        .task-list { list-style: none; padding: 0; margin: 0; }
        .task {
          display: flex; align-items: center;
          gap: 12px;
          padding: 9px 16px;
          border-top: 1px solid var(--border-soft);
        }
        .task:first-child { border-top: none; }
        .task-main { flex: 1; min-width: 0; }
        .task-name { font-size: 13px; color: var(--text); font-weight: 500; }
        .task.done .task-name { color: var(--text-muted); text-decoration: line-through; }
        .task-loc { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
        .task-type {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 10px;
          font-weight: 500;
          padding: 3px 7px;
          border-radius: 4px;
          background: var(--surface-hi);
          color: var(--text-muted);
          border: 1px solid var(--border-soft);
        }
        .task-type.t-enemy   { color: var(--role-dps); background: var(--role-dps-bg); border-color: oklch(0.50 0.13 27 / 0.35); }
        .task-type.t-fate    { color: var(--warning); background: var(--warning-bg); border-color: oklch(0.50 0.10 75 / 0.35); }
        .task-type.t-leve    { color: var(--auto); background: var(--auto-bg); border-color: oklch(0.50 0.10 220 / 0.35); }
        .task-type.t-dungeon { color: var(--diffed); background: var(--diffed-bg); border-color: oklch(0.50 0.10 190 / 0.35); }

        @media (max-width: 1100px) {
          .zone-list { grid-template-columns: 1fr; }
          .detail-head { flex-direction: column; align-items: flex-start; }
          .detail-meter { padding-left: 0; border-left: none; border-top: 1px solid var(--border-soft); padding-top: 14px; flex: 1; width: 100%; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ScreenDashboard, ScreenRelics });