.cc-header { text-align:center; padding:1.6rem 1rem .4rem; }
.cc-header-emoji { font-size:2.4rem; display:block; }
.cc-header h1 { font-size:1.5rem; font-weight:800; margin:.3rem 0 .2rem; }
.cc-header p { color:var(--bs-secondary,#6b7280); margin:0; font-size:.9rem; }

.cc-shell { max-width:720px; margin:0 auto; padding:1rem; }
.cc-card { border-radius:16px; background:var(--bs-body-bg,#fff); box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.07); padding:1.2rem; }

.cc-palette { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
.cc-sw { width:30px; height:30px; border-radius:7px; border:2px solid rgba(0,0,0,.15); cursor:pointer; position:relative; }
.cc-sw:hover { transform:scale(1.1); }
.cc-sw .lab { position:absolute; bottom:-2px; right:1px; font-size:.6rem; color:#fff; text-shadow:0 0 2px #000; font-weight:700; }

.cc-fmt { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.cc-fbtn { border:1px solid rgba(0,0,0,.18); background:var(--bs-body-bg,#fff); border-radius:8px; padding:.35rem .7rem; font-size:.82rem; cursor:pointer; color:var(--bs-body-color,#111); }
.cc-fbtn:hover { border-color:#6366f1; }

.cc-area { width:100%; min-height:80px; padding:.65rem .8rem; border-radius:10px; border:1px solid rgba(0,0,0,.18);
           font-size:.98rem; font-family:ui-monospace,Consolas,monospace; resize:vertical; }
.cc-area:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }

.cc-preview { margin:.9rem 0; border-radius:10px; padding:1rem 1.1rem; min-height:54px;
              background:#2b2b2b url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="%232b2b2b"/></svg>');
              font-family:'Minecraft','Segoe UI',monospace; font-size:1.25rem; line-height:1.6; white-space:pre-wrap; word-break:break-word;
              box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.cc-preview .b { font-weight:700; } .cc-preview .i { font-style:italic; }
.cc-preview .u { text-decoration:underline; } .cc-preview .s { text-decoration:line-through; }
.cc-preview .us { text-decoration:underline line-through; }

.cc-out-row { display:flex; align-items:center; gap:.6rem; background:var(--bs-secondary-bg,#f4f5f7); border-radius:10px; padding:.55rem .7rem; margin-top:.5rem; }
.cc-out-row .k { font-size:.74rem; color:var(--bs-secondary,#6b7280); width:60px; flex-shrink:0; font-weight:700; }
.cc-out-row .v { font-family:ui-monospace,Consolas,monospace; font-size:.92rem; word-break:break-all; flex:1; }
.cc-copy { border:none; background:transparent; cursor:pointer; color:#6366f1; font-size:.8rem; padding:.15rem .45rem; border-radius:6px; font-weight:600; }
.cc-copy:hover { background:rgba(99,102,241,.12); }