/* =====================================================================
   VTU Developer — Lab Manual (Coding Programs)
   - Professor upload form extras
   - Student program viewer (matches the neon code-card reference)
   - Per-language accents + a shared neon syntax-highlight theme
   ===================================================================== */
 
/* ---------- per-language accent tokens ---------- */
.lang-c          { --accent:#5c6bc0; --accent-2:#8a94e0; }
.lang-cpp        { --accent:#38bdf8; --accent-2:#7dd3fc; }
.lang-java       { --accent:#f89820; --accent-2:#ffb457; }
.lang-python     { --accent:#ffd43b; --accent-2:#7fb3ff; }
.lang-html       { --accent:#e44d26; --accent-2:#ff7a54; }
.lang-css        { --accent:#3b82f6; --accent-2:#6ea8fe; }
.lang-javascript { --accent:#f7df1e; --accent-2:#fde047; }
.lang-php        { --accent:#8892d6; --accent-2:#b0b7ee; }
.lang-mysql      { --accent:#00a0b6; --accent-2:#3fd0e0; }
.lang-web_tech   { --accent:#a855f7; --accent-2:#e879f9; }
.lang-iot        { --accent:#14b8a6; --accent-2:#2dd4bf; }
 
/* =====================================================================
   PROFESSOR FORM
   ===================================================================== */
.field textarea{
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.9rem;line-height:1.55;tab-size:4;resize:vertical;
}
#labForm .field textarea[name="question"]{font-family:inherit;font-size:.95rem}
 
.code-block{margin-top:6px}
.code-block.extra{
  border:1px solid var(--line-2);border-radius:12px;padding:12px;margin-top:14px;
  background: black ;
}
.cb-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cb-tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--sky);font-size:.86rem}
.cb-remove{background:none;border:1px solid var(--line-2);color:var(--bad);border-radius:8px;
  width:30px;height:30px;cursor:pointer;transition:.15s}
.cb-remove:hover{background:rgba(248,113,113,.12);border-color:var(--bad)}
.cb-title{margin-bottom:8px}
 
/* output segmented control */
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg-opt{
  flex:1;min-width:150px;display:flex;align-items:center;gap:10px;justify-content:center;
  padding:13px 14px;border:1px solid var(--line-2);border-radius:12px;cursor:pointer;
  color:var(--muted);font-weight:700;font-size:.92rem;transition:.18s;background:#000
}
.seg-opt i{color:var(--sky)}
.seg-opt:hover{border-color:var(--blue-2);color:#fff}
.seg-opt.on{border-color:var(--blue-2);color:#fff;background:var(--grad-soft);box-shadow:0 6px 18px rgba(29,78,216,.25)}
.seg-opt input{display:none}
 
.img-preview{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.img-preview .thumb{position:relative;width:104px;height:104px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2)}
.img-preview .thumb img{width:100%;height:100%;object-fit:cover}
.img-preview .ord{position:absolute;top:6px;left:6px;z-index:2;background:var(--grad);color:#fff;
  font-size:.72rem;font-weight:800;min-width:22px;height:22px;border-radius:999px;display:grid;
  place-items:center;padding:0 6px;box-shadow:0 4px 10px rgba(0,0,0,.4)}
 
/* manager list */
.lab-manage{display:flex;flex-direction:column;gap:12px}
.lab-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#000;border:1px solid var(--glass-border);border-radius:14px;padding:14px 16px}
.lab-row-main{display:flex;align-items:center;gap:14px;min-width:0}
.lab-row-main strong{color:#fff}
.lab-sub{color:var(--muted);font-size:.85rem;margin-left:8px}
.lab-q{color:var(--muted-2);font-size:.84rem;margin-top:3px}
.lab-row-side{display:flex;align-items:center;gap:10px}
.vlink{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--sky);
  border:1px solid var(--line-2);background:none;cursor:pointer;transition:.15s}
.vlink:hover{border-color:var(--blue-2);color:#fff}
.vlink.danger{color:var(--bad)}
.vlink.danger:hover{background:rgba(248,113,113,.12);border-color:var(--bad)}
 
/* language badge (used in form + user list) */
.lang-badge{display:inline-flex;align-items:center;font-weight:800;font-size:.74rem;letter-spacing:.4px;
  padding:6px 11px;border-radius:999px;color:#0a0e1e;background:var(--accent,#3b82f6);
  box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap}
.lang-javascript.lang-badge,.lang-python.lang-badge{color:#0a0e1e}
 
/* =====================================================================
   STUDENT — PROGRAM LIST
   ===================================================================== */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.prog-card{
  position:relative;display:block;padding:22px;border-radius:18px;cursor:pointer;
  background:#000;
  border:1px solid var(--glass-border);transition:.2s;overflow:hidden
}
.prog-card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 160px at 100% 0,rgba(59,130,246,.14),transparent 60%);opacity:.7;pointer-events:none}
.prog-card:hover{transform:translateY(-6px);border-color:var(--accent,#3b82f6);
  box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 26px color-mix(in srgb,var(--accent,#3b82f6) 35%,transparent)}
.prog-card>*{position:relative;z-index:1}
.prog-no{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;color:var(--sky)}
.prog-card h3{color:#fff;font-size:1.25rem;font-weight:800;margin:6px 0 10px}
.prog-card p{color:var(--muted);font-size:.9rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prog-card .foot{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
 
/* =====================================================================
   STUDENT — PROGRAM VIEWER  (matches the neon reference)
   ===================================================================== */
.lab-page{width:min(920px,94%);margin:0 auto;padding:26px 0 60px}
.lab-topnav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.lab-topnav .back{display:inline-flex;align-items:center;gap:9px;color:var(--text);
  border:1px solid var(--glass-border);background:#000;padding:9px 15px;border-radius:11px;font-weight:700}
.lab-topnav .back:hover{border-color:var(--blue-2);color:#fff}
.lab-topnav .crumb-lang{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}
 
.lab-panel{position:relative;border-radius:22px;padding:22px;margin-bottom:24px;
  background:#000;
  border:1.5px solid rgba(96,165,250,.32);
  box-shadow:0 0 0 1px rgba(59,130,246,.06),0 22px 50px rgba(0,0,0,.5),0 0 46px rgba(37,99,235,.16);
}
.lab-panel.accent{border-color:color-mix(in srgb,var(--accent,#3b82f6) 55%,transparent);
  box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 46px color-mix(in srgb,var(--accent,#3b82f6) 30%,transparent)}
.lab-panel.output-panel{border-color:rgba(52,211,153,.4);
  box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 46px rgba(16,185,129,.22)}
 
.panel-head{display:flex;align-items:center;gap:15px;margin-bottom:16px}
.panel-icon{width:56px;height:56px;flex:0 0 56px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;
  border:1.5px solid rgba(96,165,250,.45);color:#ffd54a;
  background:#000;
  box-shadow:0 0 22px rgba(37,99,235,.35),inset 0 0 16px rgba(59,130,246,.25)}
.panel-icon.code{color:#5eead4}
.panel-icon.term{color:#34d399;border-color:rgba(52,211,153,.5);
  background:#000;
  box-shadow:0 0 22px rgba(16,185,129,.4),inset 0 0 16px rgba(16,185,129,.25)}
.panel-icon.viva{color:#c084fc;border-color:rgba(192,132,252,.5);
  background:#000;
  box-shadow:0 0 22px rgba(168,85,247,.4),inset 0 0 16px rgba(168,85,247,.25)}
.panel-icon.iot{color:#2dd4bf;border-color:rgba(20,184,166,.5);
  background:#000;
  box-shadow:0 0 22px rgba(20,184,166,.4),inset 0 0 16px rgba(20,184,166,.25)}
.panel-head h2{font-size:1.4rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#ffd54a;margin:0}
.panel-head .sub{display:block;font-size:.8rem;font-weight:600;letter-spacing:.5px;color:var(--muted);text-transform:none;margin-top:3px}
 
.problem-text{color:#eaf1ff;font-size:1.14rem;line-height:1.62;font-weight:500}
 
/* code card */
.code-card{border-radius:15px;overflow:hidden;background:#000;margin-top:10px;
  border:1.5px solid color-mix(in srgb,var(--accent,#3b82f6) 45%,#0b1224);
  box-shadow:0 0 26px color-mix(in srgb,var(--accent,#3b82f6) 16%,transparent)}
.code-card+.code-card{margin-top:18px}
.output-panel .code-card{border-color:rgba(52,211,153,.45);box-shadow:0 0 26px rgba(16,185,129,.14)}
 
/* filename tab now starts at the top-left (was flex-end / right-aligned) */
.code-tabs{display:flex;justify-content:flex-start;padding:8px 12px 0}
.code-tab{display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,monospace;
  font-size:.82rem;font-weight:600;color:#bcd3ff;padding:7px 15px;border-radius:10px 10px 0 0;
  border:1px solid color-mix(in srgb,var(--accent,#3b82f6) 40%,#141b30);border-bottom:none;
  background:#000}
.code-tab i{color:var(--accent-2,#7cc4ff)}
.output-panel .code-tab i{color:#6ee7b7}
 
.code-toolbar{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid rgba(120,150,220,.14);
  background:#000}
.code-dots{display:flex;gap:8px}
.code-dots span{width:13px;height:13px;border-radius:50%;display:block}
.dot-r{background:#ff5f56}.dot-y{background:#ffbd2e}.dot-g{background:#27c93f}
 
.copy-btn{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;
  color:#bcd3ff;background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.28);
  padding:6px 12px;border-radius:9px;cursor:pointer;transition:.15s}
.copy-btn:hover{background:rgba(96,165,250,.2);color:#fff}
.copy-btn.copied{color:#7ee787;border-color:rgba(126,231,135,.5);background:rgba(126,231,135,.12)}
.output-panel .copy-btn{color:#a7f3d0;border-color:rgba(52,211,153,.35);background:rgba(16,185,129,.12)}
.output-panel .copy-btn:hover{background:rgba(16,185,129,.22);color:#fff}
 
/* code + gutter */
.code-scroll{display:flex;overflow-x:auto;font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.6}
.code-scroll .gutter{flex:0 0 auto;text-align:right;padding:16px 12px 16px 18px;
  color:#41507e;user-select:none;border-right:1px solid rgba(120,150,220,.12);background:#000}
.code-scroll .gutter span{display:block}
.code-scroll pre{margin:0;padding:16px 18px;flex:1;min-width:0}
.code-scroll code{font:inherit;background:none;padding:0;white-space:pre;display:block;color:#d6e4ff}
 
/* output image gallery */
.out-gallery{margin-top:12px;display:flex;flex-direction:column;gap:16px}
.out-shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(52,211,153,.3);
  background:#000}
.out-shot img{width:100%;display:block;user-select:none;-webkit-user-drag:none}
.out-shot .idx{position:absolute;top:10px;left:10px;background:rgba(16,185,129,.9);color:#04120c;
  font-weight:800;font-size:.76rem;min-width:24px;height:24px;border-radius:999px;display:grid;
  place-items:center;padding:0 8px;z-index:2}
.out-shot .wm{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;z-index:1;
  background:repeating-linear-gradient(-30deg,transparent,transparent 120px,rgba(255,255,255,.02) 120px,rgba(255,255,255,.02) 240px)}
.out-shot .wm span{color:rgba(255,255,255,.14);font-weight:900;font-size:1.4rem;letter-spacing:3px;
  transform:rotate(-18deg);text-transform:uppercase}
 
.out-buy{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:15px 18px;border-radius:14px;border:1px dashed rgba(52,211,153,.4);background:#000}
.out-buy .lbl{color:#c7f9e5;font-size:.92rem}
.out-buy .lbl b{color:#fff}
.dl-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:12px;font-weight:800;
  color:#04120c;border:none;cursor:pointer;
  background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 10px 26px rgba(16,185,129,.4)}
.dl-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(16,185,129,.55)}
.dl-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
 
.lab-foot{text-align:center;color:var(--muted-2);font-size:.82rem;margin-top:10px}
.lab-foot i{color:var(--sky)}
 
/* ---- email modal (reused pattern) ---- */
.em-overlay{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.72);backdrop-filter:blur(2px)}
.em-overlay.show{display:flex}
.em-box{width:min(420px,100%);background:#000;border:1px solid var(--glass-border);
  border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.6);color:#fff}
.em-box h3{margin:0 0 6px;font-size:1.15rem;font-weight:800}
.em-box h3 i{color:#34d399;margin-right:6px}
.em-box p{margin:0 0 14px;color:#9ca3af;font-size:.9rem;line-height:1.45}
.em-box input{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px;
  border:1px solid #2a3450;background:#000;color:#fff;font-size:1rem;outline:none}
.em-box input:focus{border-color:#34d399}
.em-err{color:#f87171;font-size:.82rem;min-height:18px;margin:6px 2px 2px}
.em-actions{display:flex;gap:10px;margin-top:8px}
.em-actions button{flex:1;justify-content:center;padding:11px;border-radius:10px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;border:1px solid transparent}
.em-ok{background:linear-gradient(135deg,#34d399,#10b981);color:#04120c}
.em-cancel{background:#000;border:1px solid #2a3450;color:#cbd5e1}
 
/* =====================================================================
   RESPONSIVE — tablet, mobile, small-mobile
   ===================================================================== */
 
/* ---- Tablet / small laptop ---- */
@media (max-width:1024px){
  .lab-page{width:min(760px,94%)}
}
 
/* ---- Tablet portrait / large phone ---- */
@media (max-width:768px){
  .lab-page{padding:18px 0 46px}
  .lab-panel{padding:18px;border-radius:18px}
  .panel-head h2{font-size:1.22rem}
  .panel-icon{width:50px;height:50px;flex:0 0 50px;font-size:1.3rem;border-radius:14px}
  .problem-text{font-size:1.05rem}
  .code-scroll{font-size:.76rem}
  .out-buy{padding:14px}
}
 
/* ---- Mobile ---- */
@media (max-width:640px){
  .lab-topnav{gap:10px}
  .lab-topnav .back{padding:8px 13px;font-size:.88rem}
  .lab-topnav .crumb-lang{font-size:.82rem;gap:8px}
  .panel-head{gap:11px;margin-bottom:12px}
  .panel-head h2{font-size:1.15rem}
  .panel-head .sub{font-size:.74rem}
  .panel-icon{width:44px;height:44px;flex-basis:44px;font-size:1.15rem;border-radius:12px}
  .problem-text{font-size:1.02rem;line-height:1.55}
  .code-scroll{font-size:.72rem}
  .code-tab{font-size:.76rem;padding:6px 12px}
  .copy-btn{font-size:.74rem;padding:5px 10px}
  .code-toolbar{padding:9px 12px}
  .out-buy{flex-direction:column;align-items:stretch;text-align:center}
  .dl-btn{width:100%;justify-content:center}
  .em-box{padding:18px}
}
 
/* ---- Small mobile ---- */
@media (max-width:420px){
  .lab-page{width:100%;padding:14px 12px 40px}
  .lab-topnav{flex-direction:column;align-items:flex-start}
  .lab-panel{padding:14px;border-radius:14px;margin-bottom:16px}
  .panel-head h2{font-size:1.05rem;letter-spacing:.3px}
  .panel-icon{width:38px;height:38px;flex-basis:38px;font-size:1rem;border-radius:10px}
  .problem-text{font-size:.96rem}
  .code-scroll{font-size:.68rem;-webkit-overflow-scrolling:touch}
  .code-scroll .gutter{padding:12px 8px 12px 12px}
  .code-scroll pre{padding:12px 14px}
  .code-tab{font-size:.72rem;padding:5px 10px}
  .out-shot .wm span{font-size:1rem;letter-spacing:2px}
  .em-actions{flex-direction:column}
}
 
/* =====================================================================
   ONE DARK PRO — syntax theme (Atom One Dark Pro palette)
   Applied consistently across every language via highlight.js classes.
   Core roles (same everywhere, just mapped onto each language's own
   grammar): keyword=purple, function=blue, class/type=yellow,
   string=green, number/constant=orange, comment=grey italic,
   tag=red, attribute=orange, punctuation/operator=cyan, plain text=fg.
   ===================================================================== */
:root{
  --odp-bg:#282c34;
  --odp-fg:#abb2bf;      /* default text */
  --odp-mono:#5c6370;    /* comments */
  --odp-red:#e06c75;     /* tags, this/self, deletions */
  --odp-orange:#d19a66;  /* numbers, constants, attributes */
  --odp-yellow:#e5c07b;  /* classes, types */
  --odp-green:#98c379;   /* strings, regex */
  --odp-cyan:#56b6c2;    /* operators, escapes, punctuation */
  --odp-blue:#61afef;    /* functions, methods */
  --odp-purple:#c678dd;  /* keywords, tags in JSX, meta */
}
 
.lab-page .hljs{color:var(--odp-fg);background:transparent}
.lab-page .hljs-keyword,
.lab-page .hljs-selector-tag,
.lab-page .hljs-keyword.hljs-storage{color:var(--odp-purple)}
.lab-page .hljs-literal{color:var(--odp-orange)}
.lab-page .hljs-built_in{color:var(--odp-cyan)}
.lab-page .hljs-type,
.lab-page .hljs-title.class_,
.lab-page .hljs-class .hljs-title{color:var(--odp-yellow)}
.lab-page .hljs-symbol,
.lab-page .hljs-bullet{color:var(--odp-cyan)}
.lab-page .hljs-number{color:var(--odp-orange)}
.lab-page .hljs-string,
.lab-page .hljs-regexp,
.lab-page .hljs-addition{color:var(--odp-green)}
.lab-page .hljs-attr,
.lab-page .hljs-attribute{color:var(--odp-orange)}
.lab-page .hljs-title,
.lab-page .hljs-title.function_,
.lab-page .hljs-section{color:var(--odp-blue)}
.lab-page .hljs-comment,
.lab-page .hljs-quote{color:var(--odp-mono);font-style:italic}
.lab-page .hljs-tag{color:var(--odp-fg)}
.lab-page .hljs-name{color:var(--odp-red)}
.lab-page .hljs-meta,
.lab-page .hljs-meta .hljs-keyword{color:var(--odp-purple)}
.lab-page .hljs-variable,
.lab-page .hljs-template-variable{color:var(--odp-red)}
.lab-page .hljs-property{color:var(--odp-red)}
.lab-page .hljs-operator,
.lab-page .hljs-punctuation{color:var(--odp-cyan)}
.lab-page .hljs-selector-class{color:var(--odp-yellow)}
.lab-page .hljs-selector-id{color:var(--odp-yellow)}
.lab-page .hljs-params{color:var(--odp-red)}
.lab-page .hljs-deletion{color:var(--odp-red)}
.lab-page .hljs-emphasis{font-style:italic}
.lab-page .hljs-strong{font-weight:700}
.lab-page .hljs-doctag{color:var(--odp-purple)}
.lab-page .hljs-formula{color:var(--odp-cyan)}
 
/* ---------- MySQL — keywords read better bold + uppercase ---------- */
.lab-page.lang-mysql .hljs-keyword{font-weight:700;text-transform:uppercase}
 
/* ---------- HTML — tag brackets muted, tag name red, attrs orange ---------- */
.lab-page.lang-html .hljs-tag{color:var(--odp-fg)}
.lab-page.lang-html .hljs-name{color:var(--odp-red)}
.lab-page.lang-html .hljs-attr{color:var(--odp-orange)}
.lab-page.lang-html .hljs-string{color:var(--odp-green)}
.lab-page.lang-html .hljs-doctype{color:var(--odp-purple)}
 
/* ---------- CSS — selectors yellow, properties red, values green ---------- */
.lab-page.lang-css .hljs-selector-tag,
.lab-page.lang-css .hljs-selector-class,
.lab-page.lang-css .hljs-selector-id{color:var(--odp-yellow)}
.lab-page.lang-css .hljs-attribute{color:var(--odp-red)}
.lab-page.lang-css .hljs-string,
.lab-page.lang-css .hljs-number{color:var(--odp-green)}
.lab-page.lang-css .hljs-built_in{color:var(--odp-orange)}
 
/* ---------- PHP — $variables in red like other scripting langs ---------- */
.lab-page.lang-php .hljs-variable{color:var(--odp-red)}
.lab-page.lang-php .hljs-meta{color:var(--odp-purple)}
 
/* ---------- Java / C / C++ — annotations & preprocessor as purple meta ---------- */
.lab-page.lang-java .hljs-meta,
.lab-page.lang-c .hljs-meta,
.lab-page.lang-cpp .hljs-meta{color:var(--odp-purple)}

/* =====================================================================
   Lab upload form — IoT + sub-program (8a, 8b …) builder
   ===================================================================== */
.part{
  position:relative;
  border:1.5px solid rgba(96,165,250,.28);
  border-radius:16px;
  padding:16px 16px 4px;
  margin:16px 0;
  background: black ;
  box-shadow:inset 0 0 22px rgba(37,99,235,.10);
}
.part + .part{margin-top:20px}
.part-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-4px 0 8px;
}
.part-title{display:inline-flex;align-items:center;gap:8px;font-weight:800;
  letter-spacing:.4px;color:#cfe0ff;font-size:.95rem}
.part-title i{color:var(--sky,#60a5fa)}
.part-letter-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:800;
  background:var(--grad-soft,rgba(29,78,216,.25));
  border:1px solid rgba(96,165,250,.45);color:#fff;text-transform:uppercase;
}
.part-letter{text-transform:lowercase}
.part-remove{
  background:transparent;border:1px solid rgba(248,113,113,.4);
  color:#fca5a5;border-radius:10px;width:32px;height:32px;cursor:pointer;
  display:grid;place-items:center;transition:.15s;
}
.part-remove:hover{background:rgba(127,29,29,.4);color:#fecaca;border-color:#f87171}
.iot-only,.coding-only{display:block}
.live-no,.live-letter{color:#fff}