/* Reset + base */
       :root {
           --bg: #0b1020;
           --panel: #0f1724;
           --glass: rgba(255, 255, 255, 0.03);
           --accent: #7cf59a;
           --accent-2: #4ad0ff;
           --muted: #97a3b3;
           --success: #7cf59a;
           --danger: #ff6b6b;
           --radius: 14px;
           --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
       }

       * {
           box-sizing: border-box
       }

       html,
       body {
           height: 100%;
           margin: 0;
           font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
           color: #e7eef8;
           background: radial-gradient(1200px 600px at 10% 10%, rgba(74, 208, 255, 0.06), transparent), linear-gradient(180deg, #051022 0%, #071622 100%);
       }

       .wrap {
           max-width: 1100px;
           margin: 40px auto;
           padding: 28px;
           border-radius: 20px;
           background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
           box-shadow: 0 10px 40px rgba(2, 6, 23, 0.6);
           border: 1px solid rgba(255, 255, 255, 0.03);
       }

       header {
           display: flex;
           align-items: center;
           gap: 16px;
           margin-bottom: 18px
       }

       .logo {
           width: 80px;
           height: 80px;
           border-radius: 5px;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 6px 30px rgba(76, 200, 170, 0.08);
           overflow: hidden;
       }

       .logo img {
           width: 100%;
           height: 30%;
           object-fit: cover;
           border-radius: 5px;
       }

       h1 {
           font-size: 20px;
           margin: 0
       }

       p.lead {
           margin: 0;
           color: var(--muted);
           font-size: 13px
       }

       .grid {
           display: grid;
           grid-template-columns: 360px 1fr;
           gap: 20px
       }

       /* Controls panel */
       .panel {
           background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.01));
           padding: 18px;
           border-radius: var(--radius);
           border: 1px solid var(--glass)
       }

       label.small {
           display: block;
           font-size: 12px;
           color: var(--muted);
           margin-bottom: 6px
       }

       input[type=text],
       input[type=number],
       select {
           width: 100%;
           padding: 12px 14px;
           border-radius: 10px;
           border: 1px solid rgba(255, 255, 255, 0.035);
           background: transparent;
           color: inherit;
           font-size: 14px
       }

       .row {
           display: flex;
           gap: 10px;
           margin-top: 10px
       }

       .btn {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           padding: 10px 14px;
           border-radius: 10px;
           border: 0;
           cursor: pointer;
           font-weight: 600
       }

       .btn.primary {
           background: linear-gradient(90deg, var(--accent), var(--accent-2));
           color: #022;
           box-shadow: 0 8px 30px rgba(82, 230, 170, 0.06)
       }

       .btn.ghost {
           background: transparent;
           border: 1px solid rgba(255, 255, 255, 0.04);
           color: var(--muted)
       }

       .small {
           font-size: 13px;
           padding: 8px 10px
       }

       .meta {
           display: flex;
           flex-wrap: wrap;
           gap: 8px;
           margin-top: 14px
       }

       .meta .pill {
           background: rgba(255, 255, 255, 0.02);
           padding: 8px 10px;
           border-radius: 999px;
           font-size: 13px;
           color: var(--muted);
           border: 1px solid rgba(255, 255, 255, 0.02)
       }

       /* Terminal */
       .terminal {
           height: 520px;
           border-radius: 12px;
           overflow: hidden;
           border: 1px solid rgba(255, 255, 255, 0.03);
           display: flex;
           flex-direction: column;
           background: #04070a
       }

       .term-header {
           display: flex;
           align-items: center;
           gap: 12px;
           padding: 12px 14px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.02)
       }

       .dots {
           display: flex;
           gap: 8px
       }

       .dot {
           width: 12px;
           height: 12px;
           border-radius: 50%
       }

       .dot.red {
           background: #ff6b6b
       }

       .dot.yellow {
           background: #ffd166
       }

       .dot.green {
           background: #7cf59a
       }

       .term-body {
           flex: 1;
           padding: 16px;
           overflow: auto;
           font-family: var(--mono);
           font-size: 13px;
           line-height: 1.45;
           color: #cfeff7
       }

       .log {
           white-space: pre-wrap
       }

       .term-footer {
           padding: 12px 14px;
           border-top: 1px solid rgba(255, 255, 255, 0.02);
           display: flex;
           align-items: center;
           justify-content: space-between;
           color: var(--muted);
           font-size: 13px
       }

       .badge {
           background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
           padding: 6px 8px;
           border-radius: 8px;
           border: 1px solid rgba(255, 255, 255, 0.02)
       }

       /* Fancy text styles */
       .muted {
           color: var(--muted)
       }

       .ok {
           color: var(--success)
       }

       .warn {
           color: #ffd166
       }

       .err {
           color: var(--danger)
       }

       /* progress bar */
       .progress {
           height: 10px;
           background: rgba(255, 255, 255, 0.02);
           border-radius: 999px;
           overflow: hidden
       }

       .progress>i {
           display: block;
           height: 100%;
           width: 0%;
           background: linear-gradient(90deg, var(--accent), var(--accent-2));
           transition: width 0.8s linear
       }

       /* responsive */
       @media (max-width:980px) {
           .grid {
               grid-template-columns: 1fr;
           }

           .terminal {
               height: 420px
           }
       }

       /* small animations */
       .pulse {
           animation: pulse 2s infinite
       }

       @keyframes pulse {
           0% {
               box-shadow: 0 6px 30px rgba(76, 200, 170, 0.03)
           }

           50% {
               box-shadow: 0 12px 50px rgba(76, 200, 170, 0.06)
           }

           100% {
               box-shadow: 0 6px 30px rgba(76, 200, 170, 0.03)
           }
       }

       .visual img {
           width: 10%;
           height: 10%;
           max-height: 320px;
           object-fit: cover;
           border-radius: 10px;
           display: block;
       }