:root {
  color-scheme: dark;
  --bg: #0a111a;
  --panel: #111d29;
  --panel-2: #152434;
  --panel-3: #192b3c;
  --line: rgba(165, 195, 219, .12);
  --text: #edf5fa;
  --muted: #8da2b2;
  --soft: #b6c8d4;
  --cyan: #5dd7df;
  --mint: #82e0bb;
  --gold: #f3c66d;
  --pink: #d88bf1;
  --red: #ff8290;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: 'Noto Sans JP', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  background:
    radial-gradient(ellipse at 10% -10%, rgba(56, 131, 148, .18), transparent 42%),
    radial-gradient(ellipse at 94% 4%, rgba(92, 91, 157, .12), transparent 34%),
    var(--bg);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 1600px; margin: 0 auto; padding: 0 32px 20px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 39px; height: 39px; border: 1px solid rgba(93,215,223,.48); border-radius: 12px; display: grid; place-items: center; color: var(--cyan); font-size: 31px; line-height: 1; background: rgba(93,215,223,.08); box-shadow: 0 0 28px rgba(93,215,223,.08); }
.brand-name { font-size: 14px; font-weight: 800; letter-spacing: .17em; }
.brand-sub { color: #71899b; font: 9px var(--mono); letter-spacing: .09em; margin-top: 3px; }
.topbar-right { color: var(--muted); display: flex; gap: 9px; align-items: center; font-size: 11px; }
.status-dot, .host-state i, .live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(130,224,187,.7); display: inline-block; }
.version-pill, .small-chip, .counter { font: 9px var(--mono); letter-spacing: .08em; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); color: #9bb0bf; background: rgba(255,255,255,.025); }
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; padding-top: 26px; }
.world-column, .side-column { min-width: 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 17px; }
.eyebrow { margin: 0 0 6px; color: #6f94a8; font: 9px var(--mono); letter-spacing: .17em; }
h1, h2, p { margin-top: 0; }
h1 { margin: 0 0 5px; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.04em; }
h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.muted { color: var(--muted); margin: 0; font-size: 11px; line-height: 1.6; }
.tiny { font-size: 10px; }
.world-clock { text-align: right; padding-bottom: 3px; }
.clock-label { color: #678295; display: block; font: 8px var(--mono); letter-spacing: .15em; }
.world-clock strong { display: block; font: 15px var(--mono); color: var(--cyan); margin-top: 4px; }
.world-frame { overflow: hidden; border: 1px solid rgba(130,176,196,.2); border-radius: 13px; background: #13251f; box-shadow: 0 18px 55px rgba(0,0,0,.2); }
.canvas-toolbar, .canvas-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 13px; background: rgba(10,20,27,.94); }
.canvas-toolbar { border-bottom: 1px solid rgba(255,255,255,.07); }
.canvas-footer { border-top: 1px solid rgba(255,255,255,.07); min-height: 35px; color: #8da4ae; font-size: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 13px; color: #9db0b9; font-size: 9px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.legend-dot.creature { background: #d5eee0; box-shadow: 0 0 7px #b8edce; }
.legend-dot.safe { background: #9be27b; }
.legend-dot.unknown { background: #cc79f4; }
.legend-dot.remains { background: #ff92a5; }
.canvas-coords { color: #627e8b; font: 8px var(--mono); }
#worldCanvas { width: 100%; height: auto; display: block; aspect-ratio: 1000 / 620; background: #284d3c; cursor: crosshair; }
.live-indicator { color: var(--mint); font: 8px var(--mono); letter-spacing: .15em; display: flex; align-items: center; gap: 6px; }
.live-indicator i { width: 5px; height: 5px; }
.control-row { display: flex; justify-content: space-between; align-items: center; margin: 13px 0 15px; }
.control-buttons { display: flex; gap: 7px; flex-wrap: wrap; }
.button { min-height: 34px; border: 1px solid rgba(160,190,209,.17); border-radius: 7px; padding: 0 12px; color: #bbccd7; background: #152433; font-size: 10px; font-weight: 700; transition: .15s ease; }
.button:hover { border-color: rgba(93,215,223,.5); color: white; background: #1c3344; }
.button.primary { color: #092027; background: var(--cyan); border-color: var(--cyan); }
.button.primary:hover { background: #8aebec; border-color: #8aebec; }
.button.compact { min-height: 35px; padding: 0 15px; }
.button.danger-ghost { color: #d28e96; background: transparent; border-color: rgba(255,130,144,.2); }
.speed-control { color: var(--muted); font-size: 10px; display: flex; gap: 8px; align-items: center; }
select { border: 1px solid var(--line); color: #dce9ef; background: var(--panel); border-radius: 6px; padding: 7px 9px; font-size: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.stat-card, .panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(22,37,52,.96), rgba(15,27,39,.96)); border-radius: 10px; }
.stat-card { padding: 12px 13px 10px; min-width: 0; }
.stat-label { display: block; color: #a1b6c3; font-size: 10px; }
.stat-card strong { display: block; font: 700 25px var(--mono); color: #edf7fb; margin: 7px 0 3px; }
.stat-foot { display: block; font: 7px var(--mono); color: #607b8e; letter-spacing: .1em; white-space: nowrap; }
.lower-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 11px; }
.panel { padding: 15px; margin-bottom: 11px; min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.empty-profile { color: #8097a7; font-size: 10px; line-height: 1.8; padding: 9px 0 4px; }
.profile-top { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.profile-avatar { width: 32px; height: 32px; border: 1px solid rgba(130,224,187,.4); border-radius: 50%; display: grid; place-items: center; color: var(--mint); background: rgba(130,224,187,.1); font-size: 13px; }
.profile-title strong { display: block; font-size: 11px; }
.profile-title span { display: block; color: #7d95a4; font: 8px var(--mono); margin-top: 3px; }
.meter-row { display: grid; grid-template-columns: 45px 1fr 30px; align-items: center; gap: 7px; font-size: 9px; color: #9aafbb; margin: 7px 0; }
.meter { height: 5px; border-radius: 5px; background: #263b4b; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--mint); }
.profile-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.profile-meta span { padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,.045); color: #a8bbc7; font: 8px var(--mono); }
.event-log { max-height: 206px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 3px; }
.event-item { display: grid; grid-template-columns: 43px 1fr; gap: 8px; align-items: start; color: #a9bbc7; font-size: 9px; line-height: 1.55; }
.event-time { color: #628395; font: 8px var(--mono); padding-top: 2px; }
.event-item strong { color: #d8e6ed; font-weight: 600; }
.side-column { display: flex; flex-direction: column; }
.host-panel { border-color: rgba(93,215,223,.24); background: linear-gradient(145deg, rgba(22,48,60,.97), rgba(15,29,42,.98)); }
.host-heading { display: flex; align-items: center; gap: 10px; }
.host-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: #09242b; background: linear-gradient(145deg, #83e6d7, #62b9dc); font-weight: 800; font-size: 17px; box-shadow: 0 0 24px rgba(93,215,223,.13); }
.host-heading h2 { font-size: 17px; margin-bottom: 2px; }
.host-heading .eyebrow { margin-bottom: 4px; }
.host-state { margin-left: auto; color: var(--mint); font: 8px var(--mono); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.host-state i { width: 5px; height: 5px; }
.host-description { margin: 13px 0 14px; color: #9db2bf; font-size: 10px; line-height: 1.75; }
.host-flow { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: center; padding: 10px 8px; border-radius: 7px; background: rgba(4,16,25,.3); color: #a9bdc9; text-align: center; font-size: 8px; }
.host-flow div { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.host-flow b { color: #608b9d; }
.flow-number { color: var(--cyan); font: 9px var(--mono); }
.request-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.request-box label { display: block; color: #b6c8d2; font-size: 10px; margin-bottom: 7px; }
.request-input-row { display: flex; gap: 6px; }
input { width: 100%; min-width: 0; border: 1px solid rgba(158,188,207,.18); border-radius: 7px; padding: 0 10px; height: 35px; color: var(--text); background: rgba(5,15,24,.52); font-size: 10px; outline: none; }
input:focus { border-color: rgba(93,215,223,.65); box-shadow: 0 0 0 2px rgba(93,215,223,.08); }
.hint { color: #698394; font-size: 8px; margin: 6px 0 0; line-height: 1.5; }
.counter { color: var(--cyan); }
.module-list { display: flex; flex-direction: column; gap: 7px; }
.module-row { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 7px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.045); }
.module-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #718c9c; background: rgba(130,160,180,.08); font-size: 14px; filter: grayscale(.7); }
.module-row.installed { border-color: rgba(130,224,187,.14); background: rgba(130,224,187,.045); }
.module-row.installed .module-icon { color: var(--mint); background: rgba(130,224,187,.1); filter: none; }
.module-copy { min-width: 0; flex: 1; }
.module-copy strong { display: block; font-size: 9px; color: #bccbd4; }
.module-copy span { display: block; font-size: 8px; color: #718a99; margin-top: 2px; line-height: 1.4; }
.module-state { font: 7px var(--mono); color: #708795; }
.module-row.installed .module-state { color: var(--mint); }
.patch-log { display: flex; flex-direction: column; gap: 8px; max-height: 190px; overflow: auto; }
.patch-empty { color: #738b9a; text-align: center; padding: 20px 8px; font-size: 9px; line-height: 1.8; }
.patch-entry { border-left: 2px solid var(--cyan); padding: 2px 0 3px 9px; }
.patch-entry strong { display: block; color: #cce3e9; font-size: 9px; }
.patch-entry p { color: #829ba8; font-size: 8px; line-height: 1.5; margin: 4px 0 0; }
.patch-entry time { color: #5f7d8d; font: 7px var(--mono); }
.accent-chip { color: var(--mint); border-color: rgba(130,224,187,.18); }
.learning-list { display: flex; flex-direction: column; gap: 11px; }
.learning-list > div { display: flex; gap: 9px; align-items: flex-start; }
.learning-icon { color: var(--cyan); width: 18px; text-align: center; font-size: 15px; line-height: 1.1; }
.learning-list strong { display: block; color: #b9cad4; font-size: 9px; margin-bottom: 3px; }
.learning-list p { color: #738d9c; margin: 0; font-size: 8px; line-height: 1.5; }
.footer { display: flex; justify-content: space-between; color: #566f7e; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; font: 8px var(--mono); letter-spacing: .04em; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; color: #082027; background: var(--cyan); border-radius: 8px; padding: 10px 15px; font-size: 10px; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: .22s ease; z-index: 20; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .app-shell { padding: 0 19px 18px; }
  .main-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
  .lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .main-grid { grid-template-columns: 1fr; }
  .side-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .host-panel { grid-column: 1 / -1; }
  .topbar { height: 66px; }
  .app-shell { padding: 0 12px 16px; }
}
@media (max-width: 540px) {
  .brand-sub { display: none; }
  .topbar-right { font-size: 9px; }
  .version-pill { display: none; }
  .section-heading { align-items: flex-start; }
  .section-heading .muted { max-width: 245px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-column { display: flex; }
  .legend { gap: 7px 10px; }
  .canvas-coords { display: none; }
  .control-row { align-items: flex-start; gap: 10px; }
  .button { padding: 0 9px; }
  .footer { gap: 7px; flex-direction: column; }
}