.cj-app { max-width: 1360px; margin: 20px auto; padding: 0 16px 28px; color: #e8f0ff; }
.cc-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.cc-header h1 { margin: 0; font-size: 34px; line-height: 1.05; color: #f8fbff; }
.cc-sub { margin: 8px 0 0; color: #b2c4dd; font-size: 15px; max-width: 860px; line-height: 1.45; }

.cc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-presets button {
  border: 1px solid #315378; background: #071528; color: #d8e8ff; border-radius: 10px;
  padding: 7px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.cc-presets button:hover { border-color: #53a6ff; background: #0b223b; }

.cc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.cc-tabs button {
  border: 1px solid #2a4667; background: #061222; color: #a7c1df; border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cc-tabs button.active { border-color: #4ea6ff; color: #eaf5ff; background: #0e2944; }

.cc-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; }
.cc-controls, .cc-main, .cc-report { border: 1px solid #243e5d; border-radius: 14px; background: #041121; }
.cc-controls { padding: 14px; }
.cc-controls h2 { margin: 0 0 11px; color: #f3f8ff; font-size: 18px; }
.cc-controls label { display: grid; gap: 6px; margin-bottom: 10px; color: #c7daf1; font-size: 13px; }
.cc-controls select, .cc-controls input[type="range"] { width: 100%; }
.cc-controls select {
  border: 1px solid #35597f; background: #061326; color: #deebfb; border-radius: 9px; padding: 7px 8px;
}
.cc-check { grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.cc-primary {
  margin: 8px 0; border: 1px solid #1780dc; background: #0e66b6; color: #f2f9ff;
  border-radius: 10px; font-size: 13px; font-weight: 800; padding: 10px 12px; cursor: pointer;
}
.cc-hint { margin: 0; color: #9fb7d4; font-size: 12px; line-height: 1.5; }

.cc-main { padding: 12px; min-height: 590px; }
.cc-panel { display: none; }
.cc-panel.active { display: block; }
.cc-panel h2 { margin: 0 0 10px; font-size: 21px; color: #eff7ff; }

.cc-scene-host { margin-bottom: 10px; }
.scene-board {
  position: relative; height: 390px; border: 1px solid #355476; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, rgba(12,36,65,.95), rgba(4,12,24,.95) 56%, rgba(11,31,53,.95));
}
.scene-browser {
  position: absolute; left: 12px; top: 10px; border: 1px solid #52779f; border-radius: 999px;
  background: rgba(4,16,30,.85); padding: 5px 11px; font-size: 12px; color: #c7d8ec;
}
.scene-frame {
  position: absolute; right: 12px; top: 10px; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700;
}
.frame-open { border: 1px solid #cb4b5f; color: #ffd4dc; background: rgba(124,24,42,.42); }
.frame-closed { border: 1px solid #2fb26f; color: #d3ffe8; background: rgba(13,86,47,.42); }
.scene-target {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #2ec068; color: #032113; font-weight: 900; font-size: 13px;
  box-shadow: 0 8px 26px rgba(20,148,74,.35);
}
.scene-overlay {
  position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center;
  border: 2px dashed #f25a70; border-radius: 10px; background: rgba(250,101,124,.14);
  color: #ffdce1; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; cursor: grab; user-select: none;
}
.scene-overlay.dragging { cursor: grabbing; }
.scene-packet {
  position: absolute; left: 6%; top: 86%; width: 12px; height: 12px; border-radius: 999px;
  background: #78dbff; box-shadow: 0 0 16px rgba(120,219,255,.92);
}
.cc-scene-hint {
  border: 1px solid #335373; border-left: 3px solid #4cb0ff; border-radius: 10px; background: #08182b;
  padding: 9px 11px; color: #d5e8ff; font-size: 13px;
}

#matrix-root { display: grid; gap: 10px; }
.mx-row { border: 1px solid #2c4869; border-radius: 10px; padding: 10px; background: rgba(8,25,45,.6); }
.mx-main { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 6px; }
.mx-main b { font-size: 14px; color: #e9f3ff; }
.mx-state { font-size: 11px; border: 1px solid #405f80; border-radius: 999px; padding: 3px 8px; text-transform: uppercase; letter-spacing: .04em; }
.state-enforced,.state-restricted,.state-clear { color: #c9ffdd; border-color: #2da367; }
.state-failing,.state-open,.state-missing,.state-collided { color: #ffd2d9; border-color: #bd4257; }
.mx-row p { margin: 0 0 8px; color: #c3d7ef; font-size: 13px; line-height: 1.45; }
.mx-bar { height: 8px; border-radius: 999px; background: #14273e; overflow: hidden; }
.mx-bar span { display: block; height: 100%; background: linear-gradient(90deg,#3e8dff,#72d4ff); }

#trace-graph { border: 1px solid #2d4b6d; border-radius: 10px; background: #07162b; padding: 8px; margin-bottom: 10px; }
.trace-svg { width: 100%; height: auto; display: block; }
.trace-svg text { fill: #e8f2ff; font-size: 18px; text-anchor: middle; font-weight: 700; }
.trace-svg line { stroke-width: 5; stroke-linecap: round; }
.trace-svg line.ok { stroke: #2b8cff; }
.trace-svg line.bad { stroke: #7a2431; }
#trace-list { display: grid; gap: 8px; }
.trace-item { border: 1px solid #2a4868; border-radius: 10px; padding: 9px 10px; }
.trace-item b { display: block; margin-bottom: 5px; color: #eaf3ff; font-size: 13px; }
.trace-item p { margin: 0; color: #bdd1e8; font-size: 13px; line-height: 1.45; }
.trace-ok { background: rgba(15,73,126,.26); }
.trace-bad { background: rgba(99,37,46,.33); }

.status-card { border: 1px solid #2d4d70; border-radius: 10px; padding: 10px; display: grid; gap: 6px; margin-bottom: 10px; }
.status-card strong { font-size: 18px; letter-spacing: .03em; }
.sev-critical { border-color: #cb4158; color: #ffd4dc; background: rgba(104,19,34,.42); }
.sev-high { border-color: #cf7d33; color: #ffe5bd; background: rgba(92,46,9,.38); }
.sev-medium { border-color: #b89d35; color: #fff3c5; background: rgba(92,74,9,.33); }
.sev-low { border-color: #2ba969; color: #d5ffe7; background: rgba(8,71,40,.35); }

#recommendations { margin: 0; padding-left: 18px; }
#recommendations li { margin-bottom: 8px; color: #d9e9fb; font-size: 13px; line-height: 1.46; }

.cc-report { margin-top: 14px; padding: 12px; }
.cc-report h3 { margin: 0 0 10px; color: #f2f8ff; font-size: 17px; }
#practice-output {
  margin: 0; min-height: 180px; border: 1px solid #2b4a6b; border-radius: 10px; background: #03101d;
  color: #b4ead8; padding: 12px; font-size: 13px; line-height: 1.46; white-space: pre-wrap;
}

@media (max-width: 1180px) {
  .cc-layout { grid-template-columns: 1fr; }
  .cc-main { min-height: 520px; }
}