.cib-app { --px1: 4px; --px2: 8px; --px3: 12px; --accent1: #ff005c; --accent2: #00d2ff; --accent3: #ffc800; --accent4: #7cff00; --fg:#f2f2f7; --muted:#a2a2ad; color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto; }
.cib-note { font-size:.9rem; color:var(--muted); margin:0 0 var(--px2); padding:var(--px2); border-left: var(--px1) solid var(--accent2); background:rgba(255,255,255,.03); }
.cib-container { display:grid; gap:var(--px2); grid-template-columns:1fr; }
@media(min-width:1024px){ .cib-container{ grid-template-columns:1fr 1fr; align-items:start; } }
.cib-history { border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:var(--px2); background:rgba(16,16,20,.6); box-shadow:0 2px 8px rgba(0,0,0,.2); }
.cib-history-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--px2); }
.cib-copy{ font-size:.9rem; padding:6px 10px; border:0; border-radius:10px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#111; cursor:pointer; }
.cib-history-list{ max-height:300px; overflow:auto; display:flex; flex-direction:column-reverse; gap:8px; }
.cib-hitem{ display:grid; grid-template-columns: minmax(0,1fr) auto auto; gap:6px; background:rgba(255,255,255,.03); padding:8px; border-radius:8px; border:1px dashed rgba(255,255,255,.06); }
.cib-hitem .expr{ overflow-x:auto; white-space:nowrap; max-width:100%; }
.cib-calc{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:var(--px2); background:rgba(16,16,20,.6); box-shadow:0 2px 8px rgba(0,0,0,.2); position:relative; overflow:hidden; }
.cib-display{ display:grid; gap:6px; margin-bottom:var(--px2); }
.cib-input{ width:100%; font-size:1.4rem; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:#15151a; color:#fff; outline:none; }
.cib-result{ font-size:1.1rem; color:var(--muted); }
.cib-toggle-wrap{ display:flex; gap:8px; align-items:center; margin-bottom:var(--px2); position:relative; }
.cib-toggle{ padding:8px 12px; border-radius:10px; border:0; background:#1a1a22; color:#fff; cursor:pointer; position:relative; }
.cib-grid{ display:grid; grid-template-columns: repeat(4, minmax(56px,1fr)); gap:10px; justify-items:stretch; }
.cib-grid-advanced{ margin-top:var(--px2); grid-template-columns: repeat(4, minmax(56px,1fr)); display:none; }
.cib-btn{ padding:14px; font-size:1.1rem; border:0; border-radius:12px; background:#16171d; color:#fff; cursor:pointer; position:relative; outline:none; }
.cib-btn:hover{ background:#1d1e26; }
.cib-calc::before,.cib-calc::after{ content:""; position:absolute; width:64px; height:64px; pointer-events:none; image-rendering:pixelated; opacity:.35; }
.cib-calc::before{ left:-4px; top:-4px; background:
  linear-gradient(var(--accent1),var(--accent1)) 0 0 / 6px 6px no-repeat,
  linear-gradient(var(--accent2),var(--accent2)) 12px 6px / 4px 4px no-repeat,
  linear-gradient(var(--accent3),var(--accent3)) 6px 18px / 8px 8px no-repeat,
  linear-gradient(var(--accent4),var(--accent4)) 18px 0 / 5px 5px no-repeat; }
.cib-calc::after{ right:-4px; bottom:-4px; background:
  linear-gradient(var(--accent2),var(--accent2)) 46px 46px / 6px 6px no-repeat,
  linear-gradient(var(--accent1),var(--accent1)) 36px 52px / 4px 4px no-repeat,
  linear-gradient(var(--accent4),var(--accent4)) 52px 36px / 5px 5px no-repeat,
  linear-gradient(var(--accent3),var(--accent3)) 40px 40px / 8px 8px no-repeat; }