/* ===== THEME VARIABLES ===== */

/* デフォルト: ライト（淡い水色系） */
:root{
  /* Base */
  --bg:#eef4f8;
  --panel:#dde6ef;           /* パネル/カード */
  --surface:#f6faff;         /* 入力面・コード面 */
  --ink:#222;                /* 主文字色 */
  --muted:#555;              /* 補助文字 */
  --border:#b7c4d4;          /* 枠線 */
  --gutter:#d4dee9;          /* 行番号エリア */
  --shadow: 0 1px 2px rgba(0,0,0,.06);

  /* UI */
  --btn:#cfd8e2;
  --btn2:#b5c3d4;            /* primary */
  --ok:#4caf50;

  /* Tabs */
  --tab-bg:#cfd8e2;
  --tab-border:#aeb9c7;
  --tab-active-bg:#b7c4d4;
  --tab-active-ring:#fff;

  /* Editor tokens */
  --kw:#1a73e8;
  --str:#0d8a4d;
  --num:#8e24aa;
  --com:#607d8b;
  --tag:#0288d1;
  --attr:#ef6c00;
  --pun:#444;

  /* Misc */
  --chip-bg:#e1e9f2;
  --chip-border:#cdd8e6;
  --toast-bg:#2a3c58;
  --toast-border:#3b5073;
  --toast-ink:#eef5ff;

  --danger:#d32f2f;
  --warn:#fbc02d;

  /* Debug/Preview surfaces */
  --preview-bg:#f0f6fb;
  --debug-bg:#f0f6fb;
  --log-bg:#e9f0f9;
  --log-border:#d2deee;
  --log-ink:#223;
}

/* ダーク */
body.dark{
  --bg:#0f1115;
  --panel:#161a22;
  --surface:#0e1220;
  --ink:#e6e6e6;
  --muted:#9aa3b2;
  --border:#263046;
  --gutter:#0b0f19;
  --shadow: 0 1px 2px rgba(0,0,0,.4);

  --btn:#232a36;
  --btn2:#2f3a4e;
  --ok:#2ea043;

  --tab-bg:#1b2130;
  --tab-border:#2a3446;
  --tab-active-bg:#233049;
  --tab-active-ring:#fff;

  --kw:#8ab4f8;
  --str:#a5d6a7;
  --num:#fcb8ff;
  --com:#6b7a93;
  --tag:#7dd3fc;
  --attr:#fbd38d;
  --pun:#cbd5e1;

  --chip-bg:#233049;
  --chip-border:#2e3c56;
  --toast-bg:#1f2a3e;
  --toast-border:#31405a;
  --toast-ink:#dfe7ff;

  --preview-bg:#0b0f16;
  --debug-bg:#0b0f16;
  --log-bg:#0f1420;
  --log-border:#1f2a3a;
  --log-ink:#e6eefb;
}

/* ===== RESET / BASE ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* ===== TOP BAR ===== */
header.top{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,var(--panel),color-mix(in oklab,var(--panel), transparent 35%));
  border-bottom:1px solid var(--border);
  padding:6px 8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  box-shadow:var(--shadow);
}
header.top.compact h1{font-size:15px;margin:0 2px 0 0;font-weight:700}
.grow{flex:1}
button,label.btn{
  appearance:none;border:1px solid var(--tab-border);background:var(--btn);color:var(--ink);
  padding:6px 8px;border-radius:8px;font-weight:600;letter-spacing:.1px;touch-action:manipulation;
  position: relative;
  overflow: hidden;                /* 後述リップルのため */
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
button:active, label.btn:active{
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 6px color-mix(in oklab, var(--ink) 12%, transparent);
  filter: brightness(0.98);
}

/* キーボード操作の見やすいフォーカス */
button:focus-visible, label.btn:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--ink) 35%, #6cf 20%);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--panel) 70%, transparent);
  border-color: var(--tab-active-ring);
}

/* 無効ボタン */
button:disabled{
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.15);
}

/* 好みでホバーも少しだけ明るく（マウス環境のみ） */
@media (hover:hover){
  button:hover:not(:disabled), label.btn:hover{
    filter: brightness(1.03);
  }
}

/* 視覚効果が苦手な人向けに配慮 */
@media (prefers-reduced-motion: reduce){
  button, label.btn{ transition: none; }
}
button.primary{background:var(--btn2)}
button.run{background:var(--ok);border-color:color-mix(in oklab,var(--ok), black 25%); color:#fff}
button.tog.on{outline:2px solid var(--ok)}
.badge{
  font-size:10px;padding:2px 8px;border-radius:999px;background:var(--chip-bg);
  border:1px solid var(--chip-border);color:color-mix(in oklab,var(--ink), #789 45%);
}

/* ===== TABS ===== */
nav.tabs{
  padding:6px 8px;border-bottom:1px solid var(--border);background:var(--panel);
  position:sticky;top:42px;z-index:9; box-shadow:var(--shadow)
}
nav.tabs.scrollable{overflow-x:auto; -webkit-overflow-scrolling:touch;}
nav.tabs .tabs-inner{display:inline-flex;gap:6px;white-space:nowrap; scroll-snap-type:x proximity; min-width:100%}
nav.tabs .tab{
  scroll-snap-align:center; padding:6px 10px;border-radius:8px;background:var(--tab-bg);
  border:1px solid var(--tab-border);color:var(--muted);font-weight:700;display:inline-flex;align-items:center
}
.tab.active{
  color:var(--ink);background:var(--tab-active-bg);border-color:var(--tab-active-ring);
  box-shadow:0 0 0 2px var(--tab-active-ring) inset
}

/* ===== PANES ===== */
main{padding:8px}
.pane{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.pane header{
  display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 8px;
  border-bottom:1px solid var(--border);color:var(--muted);font-weight:800;background:var(--panel)
}
.pane header .tools{display:flex;gap:6px;align-items:center;min-width:40%}
.pane header .tools input.find-input{
  min-width:8ch;max-width:40vw;padding:6px 8px;border-radius:8px;border:1px solid var(--tab-border);
  background:var(--surface);color:var(--ink)
}
.find-count{font-size:12px;color:var(--muted)}

/* ===== EDITOR ===== */
.editor{position:relative;height:60vh;min-height:300px}
.ed-wrap{display:flex;height:100%}
.gutter{
  width:44px;background:var(--gutter);border-right:1px solid var(--border);
  color:color-mix(in oklab,var(--ink), #8aa0b8 40%);text-align:right;padding:8px 6px;overflow:hidden;
  font:13px/1.5 ui-monospace,monospace;user-select:none
}
.ln{display:block;opacity:.7}

.code-scroller{position:relative;flex:1}
.codeview,.codeinput{
  position:absolute;inset:0;margin:0;padding:8px 10px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; tab-size:2;-moz-tab-size:2
}
/* 表示レイヤ（常に読みやすい色に） */
.codeview{
  overflow:auto; user-select:none;
  color:var(--ink);                 /* ← 固定白を撤廃 */
  background:var(--surface);
}
/* 入力レイヤ（通常は透明文字でオーバーレイ／手のひらツール時は非表示） */
.codeinput{
  background:transparent; color:var(--ink); caret-color:var(--ink);
  border:none;outline:none;resize:none;overflow:auto; -webkit-text-size-adjust:100%
}
/* 既存の “透明化” 仕様は、ライトでもダークでも機能するよう維持 */
body.enhanced .codeinput{color:transparent}
body.hand .codeinput{display:none}
body.hand .codeview{cursor:grab}

/* syntax tokens */
.tok-kw{color:var(--kw)} .tok-str{color:var(--str)} .tok-num{color:var(--num)} .tok-com{color:var(--com)}
.tok-tag{color:var(--tag)} .tok-attr{color:var(--attr)} .tok-pun{color:var(--pun)}
/* search highlight */
mark.find{background:#ffe08a;color:#111;padding:0 .1em;border-radius:3px}
mark.find.current{background:#ffd24a}

/* ===== PREVIEW / DEBUG ===== */
.preview{
  height:60vh;min-height:300px;background:var(--preview-bg);border-top:1px solid var(--border); color:var(--ink)
}
.debug-log{
  height:60vh;min-height:300px;background:var(--debug-bg);border-top:1px solid var(--border);
  font:13px/1.6 ui-monospace,Menlo,Consolas,monospace; padding:10px; overflow:auto; white-space:pre-wrap; color:var(--ink)
}
.log-item{margin:0 0 6px 0; padding:6px 8px; border-radius:6px; background:var(--log-bg); border:1px solid var(--log-border)}
.log-time{opacity:.7; margin-right:8px}
.log-log{color:var(--log-ink)}
.log-info{color:#2196f3}
.log-warn{color:#ef6c00}
.log-error{color:#ff5252}

/* ===== TOAST ===== */
.file-input{display:none}
.toast{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  background:var(--toast-bg);border:1px solid var(--toast-border);color:var(--toast-ink);
  padding:8px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s; font-size:13px
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-3px)}

/* ===== ASSETS ===== */
.log-src{display:inline-block;margin-right:8px;padding:0 6px;border-radius:6px;font-size:11px;opacity:.9}
.log-src.host{background:var(--chip-bg);color:var(--ink);border:1px solid var(--chip-border)}
.log-src.preview{background:color-mix(in oklab,var(--chip-bg), #0a6 25%);color:var(--ink);border:1px solid var(--chip-border)}

.asset-drop{
  margin:10px; padding:14px; text-align:center; border:2px dashed var(--tab-border); border-radius:10px; color:var(--muted);
}
.asset-drop.over{background:color-mix(in oklab,var(--panel), #000 8%)}
.assets-info{padding:10px;color:var(--muted)}
.asset-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:10px}
.asset-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.asset-card img{display:block;width:100%;height:90px;object-fit:cover;background:var(--panel)}
.asset-meta{padding:8px;display:flex;flex-direction:column;gap:4px}
.asset-name{font-size:12px;word-break:break-all;color:var(--ink)}
.asset-actions{display:flex;gap:6px;margin-top:4px}
.asset-actions button{padding:4px 6px;border-radius:6px;font-size:12px}
.badge-path{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--ink);padding:2px 6px;border-radius:6px;font-size:11px}

/* キーボード押下の見た目 */
button.is-pressed, label.btn.is-pressed{
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 6px color-mix(in oklab, var(--ink) 12%, transparent);
}

/* Ripple */
.ripple{
  position:absolute; border-radius:50%;
  background: currentColor;
  opacity:.25; transform: scale(0);
  animation: mcp-ripple .45s ease-out forwards;
  pointer-events:none; mix-blend-mode: multiply;
}
@keyframes mcp-ripple{
  to{ transform: scale(3.2); opacity: 0; }
}

.gutter .ln.cont { opacity: .35; }  /* うっすら枠感を出したい場合 */

/* エディター下配置用 */
.tools.under-editor {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 6px 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* === Lint badge === */
.lint-badge{
  font-size:11px; padding:2px 8px; border-radius:999px; margin-left:6px;
  border:1px solid var(--chip-border); background:var(--chip-bg); color:var(--ink);
}
.lint-badge.ok{ background:#1f8b4c20; border-color:#1f8b4c60; color:#1f8b4c; }
.lint-badge.warn{ background:#f59e0b20; border-color:#f59e0b60; color:#b45309; }
.lint-badge.err{ background:#ef444420; border-color:#ef444460; color:#b91c1c; }

/* === Lint marks === */
.lint-err{
  text-decoration: underline wavy var(--danger);
  background: color-mix(in oklab, var(--danger) 16%, transparent 90%);
  border-radius: 3px;
}
.lint-warn{
  text-decoration: underline wavy var(--warn);
  background: color-mix(in oklab, var(--warn) 20%, transparent 92%);
  border-radius: 3px;
}