.tool-widget:has(.cc-app) { padding: 0; border: 0; background: transparent; box-shadow: none; }
.cc-app { --cc-border: rgba(148,163,184,.18); --cc-card: rgba(15,23,42,.84); --cc-muted: #94a3b8; width: 100%; }
.cc-app [hidden] { display: none !important; }
.cc-shell {
    padding: 1.2rem; border: 1px solid var(--cc-border); border-radius: 20px;
    background: radial-gradient(circle at 0 0, rgba(56,189,248,.16), transparent 32%),
        radial-gradient(circle at 100% 0, rgba(236,72,153,.1), transparent 30%), linear-gradient(155deg,#111827,#080f1d);
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
}
.cc-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.cc-kicker { margin:0 0 .35rem; color:#7dd3fc; font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.cc-hero h2 { margin:0; color:#f8fafc; font-size:clamp(1.35rem,3vw,2rem); letter-spacing:-.035em; }
.cc-hero p:not(.cc-kicker) { max-width:650px; margin:.45rem 0 0; color:var(--cc-muted); font-size:.88rem; line-height:1.55; }
.cc-hero-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.cc-layout { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr); gap:1rem; }
.cc-card { padding:1rem; border:1px solid var(--cc-border); border-radius:16px; background:var(--cc-card); }
.cc-preview {
    display:flex; align-items:flex-end; min-height:190px; padding:1rem; border-radius:14px;
    background:#3b82f6; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.cc-preview-copy { display:flex; flex-direction:column; padding:.55rem .7rem; border-radius:9px; background:rgba(2,8,20,.7); color:#fff; backdrop-filter:blur(8px); }
.cc-preview-copy strong { font:800 1rem "JetBrains Mono",monospace; }
.cc-preview-copy span { margin-top:.15rem; color:#cbd5e1; font-size:.7rem; }
.cc-picker-row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:.75rem; color:#cbd5e1; font-size:.78rem; font-weight:750; }
.cc-picker-row input[type=color] { width:64px; height:36px; padding:.12rem; border:1px solid var(--cc-border); border-radius:9px; background:#07101e; cursor:pointer; }
.cc-label,.cc-format-panel label,.cc-contrast-controls label { display:block; margin:.65rem 0 .35rem; color:#cbd5e1; font-size:.75rem; font-weight:750; }
.cc-input { box-sizing:border-box; width:100%; min-height:41px; padding:.6rem .7rem; border:1px solid var(--cc-border); border-radius:9px; outline:0; background:rgba(2,8,20,.55); color:#f1f5f9; font:inherit; }
.cc-mono { font-family:"JetBrains Mono",ui-monospace,monospace; }
.cc-input:focus,.cc-tab:focus-visible,.cc-inline button:focus-visible,.cc-copy-format:focus-visible,.cc-swatches button:focus-visible {
    border-color:rgba(56,189,248,.65); box-shadow:0 0 0 3px rgba(14,165,233,.15);
}
.cc-inline { display:grid; grid-template-columns:1fr auto; gap:.45rem; }
.cc-inline button,.cc-copy-format {
    padding:.55rem .7rem; border:1px solid var(--cc-border); border-radius:9px; background:rgba(56,189,248,.09);
    color:#7dd3fc; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer;
}
.cc-alpha-row { margin-top:.75rem; }
.cc-alpha-row label { display:flex; justify-content:space-between; color:#cbd5e1; font-size:.75rem; font-weight:750; }
.cc-alpha-row input { width:100%; accent-color:#0ea5e9; }
.cc-status { margin-top:.65rem; padding:.55rem .65rem; border-radius:9px; background:rgba(52,211,153,.09); color:#a7f3d0; font-size:.75rem; }
.cc-status.is-error { background:rgba(248,113,113,.1); color:#fecaca; }
.cc-tabs { display:flex; gap:.25rem; margin-bottom:.8rem; padding:.25rem; border-radius:11px; background:rgba(2,8,20,.4); }
.cc-tab { flex:1; padding:.55rem .6rem; border:0; border-radius:8px; background:transparent; color:var(--cc-muted); font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; }
.cc-tab.active { background:rgba(56,189,248,.15); color:#e0f2fe; }
.cc-grid-3,.cc-grid-4 { display:grid; gap:.65rem; }
.cc-grid-3 { grid-template-columns:repeat(3,1fr); }
.cc-grid-4 { grid-template-columns:repeat(4,1fr); }
.cc-copy-format { width:100%; margin-top:.8rem; }
.cc-lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.cc-card-head,.cc-card-head>div { display:flex; align-items:center; gap:.5rem; }
.cc-card-head { justify-content:space-between; margin-bottom:.7rem; }
.cc-card-head h3 { margin:0; color:#e2e8f0; font-size:.9rem; }
.cc-step { display:grid; width:1.4rem; height:1.4rem; place-items:center; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#8b5cf6); color:#07101e; font-size:.7rem; font-weight:900; }
.cc-small { color:var(--cc-muted); font-size:.68rem; }
.cc-contrast-controls .cc-inline { grid-template-columns:48px 1fr; }
.cc-contrast-controls input[type=color] { width:48px; height:41px; padding:.12rem; border:1px solid var(--cc-border); border-radius:9px; background:#07101e; }
.cc-contrast-preview { margin:.75rem 0; padding:1rem; border-radius:10px; background:#fff; color:#3b82f6; font-size:1rem; font-weight:800; text-align:center; }
.cc-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.cc-metrics div { padding:.6rem .7rem; border:1px solid var(--cc-border); border-radius:10px; background:rgba(2,8,20,.32); }
.cc-metrics span,.cc-metrics strong { display:block; }
.cc-metrics span { color:var(--cc-muted); font-size:.68rem; }
.cc-metrics strong { margin-top:.2rem; color:#e2e8f0; font-size:.82rem; }
.cc-metrics .is-pass { color:#86efac; } .cc-metrics .is-fail { color:#fca5a5; }
.cc-swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.cc-swatches button { min-height:62px; padding:.45rem; border:0; border-radius:10px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.cc-swatches span { padding:.2rem .3rem; border-radius:5px; background:rgba(255,255,255,.28); font:700 .62rem "JetBrains Mono",monospace; }
@media(max-width:900px){.cc-layout,.cc-lower-grid{grid-template-columns:1fr;}}
@media(max-width:580px){
    .cc-shell{padding:.75rem;border-radius:14px}.cc-hero{flex-direction:column}.cc-card{padding:.8rem;border-radius:13px}
    .cc-grid-3,.cc-grid-4{grid-template-columns:1fr 1fr}.cc-tabs{overflow-x:auto}.cc-tab{min-width:64px}
    .cc-swatches{grid-template-columns:repeat(3,1fr)}.cc-preview{min-height:150px}
}