/*! VIVA classroom | (c) 2026 VIVA classroom 運営 | All rights reserved. */
/* 💻 VIVA Code: コードスペースの 専用デザイン（暗い IDE 風・シアン→紫の 光）。body.vcode の ときだけ 効く */
body.vcode { --vc-bg: #090d14; --vc-bg2: #0e131c; --vc-panel: #111826; --vc-panel2: #161e2e; --vc-line: rgba(148, 163, 184, .14); --vc-line2: rgba(148, 163, 184, .26); --vc-text: #e6ebf2; --vc-muted: #8b96a8; --vc-faint: #5b6678; --vc-c1: #22d3ee; --vc-c2: #a78bfa; --vc-grad: linear-gradient(120deg, #22d3ee, #818cf8 55%, #a78bfa); --vc-glow: 0 0 0 1px rgba(34, 211, 238, .25), 0 10px 40px -10px rgba(34, 211, 238, .35); --vc-ok: #34d399; --vc-warn: #fbbf24; --vc-err: #fb7185;
  --bg: var(--vc-bg); --surface: var(--vc-panel); --surface-2: var(--vc-panel2); --surface-3: #1c2536; --line: var(--vc-line); --line-2: var(--vc-line2); --text: var(--vc-text); --muted: var(--vc-muted); --faint: var(--vc-faint); --accent: #22d3ee; --accent-hi: #67e8f9; --accent-soft: rgba(34, 211, 238, .12); --accent-line: rgba(34, 211, 238, .35); --on-accent: #06202a; --danger: var(--vc-err); --exam: var(--vc-warn);
  background: var(--vc-bg); color: var(--vc-text); color-scheme: dark; }
body.vcode .side, body.vcode .mobile-bar, body.vcode .site-foot, body.vcode .hub-tabs { display: none !important; }
body.vcode .shell { display: block; } body.vcode .main { padding: 0 !important; height: 100dvh; overflow: hidden; background: radial-gradient(1200px 600px at 80% -10%, rgba(167, 139, 250, .14), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, .12), transparent 60%), var(--vc-bg); }
body.vcode .main::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(148, 163, 184, .13) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%); }
/* ヘッダー */
.vc-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 14px 0 12px; border-bottom: 1px solid var(--vc-line); background: rgba(9, 13, 20, .72); backdrop-filter: blur(10px); }
.vc-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.vc-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--vc-grad); display: grid; place-items: center; font: 800 15px/1 ui-monospace, Menlo, Consolas, monospace; color: #06111a; box-shadow: var(--vc-glow); }
.vc-brand b { font: 700 16px/1 ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; letter-spacing: .02em; background: var(--vc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc-brand small { font-size: 11px; color: var(--vc-faint); margin-left: 2px; }
.vc-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--vc-muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 1px solid transparent; }
.vc-back:hover { color: var(--vc-text); border-color: var(--vc-line); background: var(--vc-panel); }
.vc-head .grow { flex: 1; } .vc-me { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vc-muted); }
.vc-me i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; font-size: 12px; }
.vc-pts { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--vc-line); color: var(--vc-muted); }
/* 本体 */
body.vcode .page { max-width: none; padding: 0 !important; margin: 0; height: calc(100dvh - 50px); } body.vcode .page-head { display: none; }
body.vcode #csApp, body.vcode .cs-wrap { height: 100%; } body.vcode .cs-wrap { grid-template-columns: 250px minmax(0, 1fr); gap: 0; min-height: 0; }
body.vcode .cs-side { border: 0; border-right: 1px solid var(--vc-line); border-radius: 0; background: rgba(14, 19, 28, .9); }
body.vcode .cs-side-head { padding: 12px; } body.vcode .cs-side-head .btn-primary { background: var(--vc-grad); color: #06111a; border: 0; box-shadow: var(--vc-glow); font-weight: 800; }
body.vcode .cs-list::before { content: "作品"; display: block; padding: 6px 10px 2px; font: 700 10.5px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--vc-faint); }
body.vcode .cs-item { border-radius: 9px; } body.vcode .cs-item.on { background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(167, 139, 250, .1)); box-shadow: inset 2px 0 0 var(--vc-c1); }
body.vcode .cs-main { border: 0; border-radius: 0; background: transparent; }
body.vcode .cs-top { background: rgba(14, 19, 28, .7); border-bottom: 1px solid var(--vc-line); padding: 8px 12px; }
body.vcode .cs-lang { background: rgba(167, 139, 250, .16); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, .3); font-family: ui-monospace, Menlo, Consolas, monospace; }
body.vcode .cs-title { font-size: 15px; } body.vcode .cs-title:focus { border-color: var(--vc-c1); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15); }
body.vcode #csRun { background: var(--vc-grad); color: #06111a; border: 0; font-weight: 800; box-shadow: var(--vc-glow); padding: 0 14px; }
body.vcode #csRun:hover { filter: brightness(1.08); } body.vcode #csRun:disabled { opacity: .6; box-shadow: none; }
body.vcode .cs-acts .btn:not(#csRun) { background: rgba(255, 255, 255, .03); border-color: var(--vc-line); }
body.vcode .cs-acts .btn:not(#csRun):hover { border-color: var(--vc-line2); background: var(--vc-panel2); }
body.vcode .cs-ed { border-right: 1px solid var(--vc-line); } body.vcode .cs-cm .CodeMirror { font-size: 14.5px; }
body.vcode .cs-cm .cm-s-material-darker.CodeMirror, body.vcode .cs-cm .cm-s-material-darker .CodeMirror-gutters { background: #0b1019; }
body.vcode .cs-cm .cm-s-material-darker .CodeMirror-activeline-background { background: rgba(34, 211, 238, .06); }
body.vcode .cs-cm .CodeMirror-linenumber { color: #3f4b5e; } body.vcode .cs-cm .cm-s-material-darker .CodeMirror-cursor { border-left: 2px solid var(--vc-c1); }
body.vcode .cs-out-head, body.vcode .cs-con-head { background: rgba(14, 19, 28, .7); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .04em; }
body.vcode .cs-con { background: #0b1019; } body.vcode .cs-stdin { background: #0b1019; border-color: var(--vc-line); color: var(--vc-text); }
body.vcode .cs-ln.ok { color: var(--vc-ok); } body.vcode .cs-ln.err { color: var(--vc-err); } body.vcode .cs-ln.warn { color: var(--vc-warn); }
body.vcode .cs-probs { background: rgba(251, 113, 133, .05); border-top: 1px solid rgba(251, 113, 133, .25); } body.vcode .cs-probs-head { background: rgba(14, 19, 28, .9); }
body.vcode .cs-status { background: linear-gradient(90deg, rgba(34, 211, 238, .14), rgba(167, 139, 250, .1)); border-top: 1px solid var(--vc-line); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--vc-muted); }
body.vcode .cs-ai { background: rgba(14, 19, 28, .97); backdrop-filter: blur(12px); border-left: 1px solid rgba(167, 139, 250, .35); box-shadow: -20px 0 60px -30px rgba(167, 139, 250, .5); }
body.vcode .cs-ai-head b { background: var(--vc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.vcode .cs-ai-text pre, body.vcode .cs-ai-code pre, body.vcode .cs-pre { background: #0b1019; border: 1px solid var(--vc-line); }
body.vcode .cs-tabs { background: rgba(14, 19, 28, .7); } body.vcode .cs-tabs button.on { color: var(--vc-text); border-bottom-color: var(--vc-c1); }
body.vcode .cs-empty-in h2 { font-size: 30px; background: var(--vc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.vcode .cs-empty-in .btn-primary { background: var(--vc-grad); color: #06111a; border: 0; box-shadow: var(--vc-glow); font-weight: 800; }
body.vcode .cs-gal { padding: 16px; gap: 12px; } body.vcode .cs-gcard { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--vc-panel); border-color: var(--vc-line); transition: transform .15s, border-color .15s; }
body.vcode .cs-gcard:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, .4); } body.vcode .cs-gl { color: #c4b5fd; }
body.vcode .cs-lb.on { background: var(--vc-grad); color: #06111a; } body.vcode .cs-tpl:hover { border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); }
body.vcode .modal { background: var(--vc-panel); border-color: var(--vc-line2); } body.vcode .toast { background: var(--vc-panel2); border: 1px solid var(--vc-line2); color: var(--vc-text); }
body.vcode .tag { background: rgba(148, 163, 184, .14); color: var(--vc-muted); } body.vcode .tag.green { background: rgba(52, 211, 153, .14); color: var(--vc-ok); }
body.vcode ::-webkit-scrollbar { width: 10px; height: 10px; } body.vcode ::-webkit-scrollbar-thumb { background: #243043; border-radius: 10px; border: 2px solid var(--vc-bg); } body.vcode ::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 760px) {
  body.vcode .main { height: 100dvh; } body.vcode .page { height: calc(100dvh - 50px); } body.vcode .cs-wrap { height: 100%; min-height: 0; }
  body.vcode .cs-side { top: 50px; background: var(--vc-bg2); } .vc-head { padding: 0 10px; } .vc-brand small, .vc-pts { display: none; } .vc-back span { display: none; }
}