.ciq{--bg:#07111f;--panel:#0d1b2d;--panel2:#13243a;--line:#24405f;--text:#eef6ff;--muted:#9fb3c8;--accent:#37c6a4;--accent2:#4f8cff;--green:#35d07f;--yellow:#f4c24b;--red:#f66;--grey:#8a97a6;--blue:#5d9cff;color:var(--text);background:linear-gradient(#06101d,#0a1626);font-family:Inter,Segoe UI,Arial,sans-serif}.ciq *{box-sizing:border-box}.ciq button,.ciq select,.ciq input{font:inherit}.ciq .app{grid-template-columns:250px 1fr;min-height:100vh;display:grid}.ciq .sidebar{border-right:1px solid var(--line);background:#081423;height:100vh;padding:22px 16px;position:sticky;top:0}.ciq .brand{align-items:center;gap:12px;margin-bottom:26px;display:flex}.ciq .logo{background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:12px;place-items:center;width:42px;height:42px;font-weight:800;display:grid}.ciq .brand h1{margin:0;font-size:18px}.ciq .brand p{color:var(--muted);margin:3px 0 0;font-size:12px}.ciq .nav button{text-align:left;width:100%;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;margin:4px 0;padding:12px}.ciq .nav button.active,.ciq .nav button:hover{background:var(--panel2);border-color:var(--line);color:var(--text)}.ciq .sidebar-footer{color:var(--muted);font-size:12px;position:absolute;bottom:20px;left:16px;right:16px}.ciq .main{padding:24px}.ciq .topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;display:flex}.ciq .topbar h2{margin:0;font-size:28px}.ciq .topbar p{color:var(--muted);margin:5px 0 0}.ciq .demo-badge{color:#8cf3d2;background:#173b35;border:1px solid #28594f;border-radius:999px;padding:8px 12px;font-size:13px}.ciq .view{display:none}.ciq .view.active{display:block}.ciq .grid{gap:16px;display:grid}.ciq .g4{grid-template-columns:repeat(4,1fr)}.ciq .g3{grid-template-columns:repeat(3,1fr)}.ciq .g2{grid-template-columns:repeat(2,1fr)}.ciq .card{background:linear-gradient(180deg,var(--panel),#0a1828);border:1px solid var(--line);border-radius:16px;padding:18px}.ciq .metric .label{color:var(--muted);font-size:13px}.ciq .metric .value{margin-top:8px;font-size:28px;font-weight:700}.ciq .metric .sub{color:var(--muted);margin-top:4px;font-size:12px}.ciq .section-title{justify-content:space-between;align-items:center;margin:24px 0 12px;display:flex}.ciq .section-title h3{margin:0}.ciq .section-title span{color:var(--muted);font-size:13px}.ciq .module{cursor:pointer;transition:all .2s}.ciq .module:hover{border-color:#3d638a;transform:translateY(-2px)}.ciq .module h3{margin:6px 0}.ciq .module p{color:var(--muted);font-size:14px;line-height:1.5}.ciq .pill{border-radius:999px;padding:5px 9px;font-size:12px;display:inline-block}.ciq .p-green{color:#74efa9;background:#163d2a}.ciq .p-yellow{color:#ffd86b;background:#473916}.ciq .p-red{color:#ff9b9b;background:#4b1f25}.ciq .p-grey{color:#c4ccd6;background:#2b333d}.ciq .p-blue{color:#9ac1ff;background:#1c3357}.ciq .table{border-collapse:collapse;width:100%}.ciq .table th,.ciq .table td{border-bottom:1px solid var(--line);text-align:left;padding:12px 10px;font-size:13px}.ciq .table th{color:var(--muted);font-weight:500}.ciq .btn{cursor:pointer;background:var(--accent);color:#06231b;border:0;border-radius:10px;padding:10px 14px;font-weight:700}.ciq .btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line)}.ciq .btn.danger{color:#2c0a0a;background:#ff6d6d}.ciq .toolbar{flex-wrap:wrap;gap:10px;margin-bottom:14px;display:flex}.ciq .element-list{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.ciq .element{background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:14px;padding:15px}.ciq .element:hover{border-color:#4d7ca8}.ciq .element small{color:var(--muted)}.ciq .drawing{border:1px solid var(--line);background-color:#071425;background-image:linear-gradient(#4f8cff14 1px,#0000 1px),linear-gradient(90deg,#4f8cff14 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border-radius:14px;height:360px;position:relative;overflow:hidden}.ciq .beam,.ciq .column,.ciq .slab{color:#dceaff;cursor:pointer;background:#4f8cff14;border:2px solid #6ea3ff;padding:5px;font-size:12px;position:absolute}.ciq .beam{height:28px}.ciq .column{width:48px;height:48px}.ciq .slab{border-style:dashed}.ciq .capture{border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,#22394d,#0a131f 65%);border-radius:14px;height:330px;position:relative;overflow:hidden}.ciq .capture:before{content:"";border:2px dashed #ffffff59;border-radius:12px;position:absolute;inset:30px}.ciq .capture .scan{background:var(--accent);height:3px;box-shadow:0 0 18px var(--accent);animation:2s linear infinite ciq-scan;display:none;position:absolute;top:20%;left:0;right:0}.ciq .capture .scan.on{display:block}@keyframes ciq-scan{0%{top:15%}50%{top:80%}to{top:15%}}.ciq .rebar{background:#aab7c4;border-radius:3px;position:absolute}.ciq .hbar{height:7px;left:12%;right:12%}.ciq .vbar{width:7px;top:15%;bottom:15%}.ciq .result-row{border-bottom:1px solid var(--line);grid-template-columns:120px 1fr 120px;align-items:center;gap:12px;padding:12px 0;display:grid}.ciq .progress{background:#17283a;border-radius:999px;height:10px;overflow:hidden}.ciq .progress i{background:var(--accent);height:100%;display:block}.ciq .timeline{border-left:2px solid var(--line);padding-left:18px}.ciq .timeline div{margin:0 0 20px}.ciq .timeline b{display:block}.ciq .timeline span{color:var(--muted);font-size:13px}.ciq .hidden{display:none!important}.ciq .toast{color:#b6f6e4;background:#183b34;border:1px solid #2f665a;border-radius:12px;padding:13px 16px;display:none;position:fixed;bottom:24px;right:24px}.ciq .toast.on{display:block}@media (width<=980px){.ciq .app{grid-template-columns:1fr}.ciq .sidebar{border-right:0;border-bottom:1px solid var(--line);height:auto;position:static}.ciq .sidebar-footer{display:none}.ciq .nav{gap:6px;display:flex;overflow:auto}.ciq .nav button{min-width:140px}.ciq .g4,.ciq .g3,.ciq .g2,.ciq .element-list{grid-template-columns:1fr 1fr}}@media (width<=640px){.ciq .main{padding:16px}.ciq .g4,.ciq .g3,.ciq .g2,.ciq .element-list{grid-template-columns:1fr}.ciq .topbar{flex-direction:column;align-items:flex-start}.ciq .result-row{grid-template-columns:1fr}}
