/* Deep Learning Studio — styles. Loaded globally by Dash from /assets, so every
   rule is scoped under .dls-app (Dash pages) or .dlx (graph editor). Tokens follow
   the shared node style: panels rgba(0,0,0,0.6), chips rgba(255,255,255,0.06),
   radius 10px, text #e8e8e8, muted #9fb3c8, headings #cfefff, accent #f0a030. */

.dls-app { color: #e8e8e8; font-size: 13px; height: 100%; display: flex; flex-direction: column; }
.dls-app * { box-sizing: border-box; }

/* ---------- header + stepper ------------------------------------------------ */
.dls-top { display: flex; align-items: center; gap: 18px; padding: 0 44px 10px 0; }
.dls-brand { min-width: 190px; }
.dls-brand h3 { margin: 0; font-size: 1.25rem; color: #cfefff; font-weight: 600; letter-spacing: .2px; }
.dls-brand div { color: #9fb3c8; font-size: .72rem; }
.dls-steps { display: flex; gap: 6px; flex: 1; align-items: stretch; overflow-x: auto; }
.dls-step { flex: 1 1 0; min-width: 120px; text-align: left; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px; color: #e8e8e8; padding: 6px 10px 7px; cursor: pointer; position: relative; transition: background .15s; }
.dls-step:hover { background: rgba(255,255,255,0.07); }
.dls-step.active { background: rgba(240,160,48,0.10); border-color: rgba(240,160,48,0.65); }
.dls-step .dls-sn { font-size: .66rem; color: #9fb3c8; text-transform: uppercase; letter-spacing: .6px; }
.dls-step .dls-st { font-weight: 600; color: #cfefff; font-size: .86rem; white-space: nowrap; }
.dls-step .dls-ss { color: #9fb3c8; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dls-step.lib { flex: 0 0 auto; min-width: 96px; border-style: dashed; }
.dls-step .dls-badge { position: absolute; top: 6px; right: 8px; font-size: .64rem; padding: 0 6px; border-radius: 8px; }
.dls-arrow { color: #45596d; align-self: center; font-size: .9rem; }

.dls-page { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; }
.dls-grid { display: grid; gap: 12px; }
.dls-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dls-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dls-grid.c3, .dls-grid.c2 { grid-template-columns: 1fr; } }

/* ---------- cards / sections ------------------------------------------------ */
.dls-card { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 12px 14px; }
.dls-card h5 { font-size: .92rem; color: #cfefff; margin: 0 0 2px; font-weight: 600; }
.dls-card .dls-sub { color: #9fb3c8; font-size: .72rem; margin-bottom: 10px; }
.dls-role { display: inline-block; font-size: .62rem; text-transform: uppercase; letter-spacing: .7px; padding: 1px 7px;
            border-radius: 8px; margin-bottom: 6px; border: 1px solid currentColor; }
.dls-lbl { color: #9fb3c8; font-size: .72rem; display: block; margin: 8px 0 3px; }
.dls-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.dls-row > * { flex: 1 1 90px; }
.dls-note { color: #9fb3c8; font-size: .74rem; line-height: 1.45; margin-top: 8px; }
.dls-note b { color: #cfefff; font-weight: 600; }
.dls-hr { border-top: 1px solid rgba(255,255,255,0.08); margin: 12px 0 4px; }
.dls-chipline { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dls-chip { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 2px 9px; font-size: .74rem; color: #e8e8e8; }
.dls-chip.acc { color: #f0a030; }
.dls-tensor { font-family: Consolas, 'Courier New', monospace; color: #cfefff; background: rgba(255,255,255,0.06);
              border-radius: 10px; padding: 8px 12px; font-size: .85rem; margin-top: 8px; }
.dls-tensor span { color: #9fb3c8; }

/* ---------- form controls (dark) ------------------------------------------- */
.dls-app input[type=number], .dls-app input[type=text], .dls-app textarea {
  background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  padding: 4px 8px; width: 100%; font-size: .8rem; outline: none; }
.dls-app input:focus { border-color: #f0a030; }
.dls-app input:disabled { opacity: .45; }
.dls-app .Select-control { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important;
                           border-radius: 8px !important; min-height: 30px; height: 30px; }
.dls-app .Select-value-label, .dls-app .Select-input > input { color: #e8e8e8 !important; font-size: .8rem; }
.dls-app .Select-placeholder, .dls-app .Select--single > .Select-control .Select-value { line-height: 28px !important; }
.dls-app .Select-menu-outer { background: #141a21 !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 8px !important;
                              z-index: 10060 !important; }
.dls-app .VirtualizedSelectOption { color: #e8e8e8; font-size: .8rem; }
.dls-app .VirtualizedSelectFocusedOption { background: rgba(240,160,48,0.18) !important; }
.dls-app .VirtualizedSelectDisabledOption { color: #5d6b78 !important; }
.dls-app .Select-arrow { border-top-color: #9fb3c8 !important; }

/* tiles (RadioItems / Checklist restyled as cards) */
.dls-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dls-tiles.wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.dls-tiles.narrow { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.dls-tiles > label, .dls-tiles label.dls-tile { display: block; margin: 0; cursor: pointer; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 8px 10px; transition: all .12s; }
.dls-tiles > label:hover { background: rgba(255,255,255,0.09); }
.dls-tiles > label:has(input:checked) { border-color: #f0a030; background: rgba(240,160,48,0.10); }
.dls-tiles > label:has(input:disabled) { opacity: .33; cursor: not-allowed; }
.dls-tiles input { display: none; }
.dls-tt { font-weight: 600; color: #cfefff; font-size: .82rem; }
.dls-tt i { margin-right: 6px; color: #f0a030; width: 14px; }
.dls-td { color: #9fb3c8; font-size: .7rem; line-height: 1.35; margin-top: 2px; }
.dls-tag { font-size: .6rem; color: #d0a0e0; border: 1px solid rgba(208,160,224,.5); border-radius: 6px; padding: 0 4px; margin-left: 5px;
           vertical-align: middle; font-weight: 400; }

.dls-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dls-pills > label { margin: 0; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
                     border-radius: 14px; padding: 3px 11px; font-size: .76rem; color: #e8e8e8; }
.dls-pills > label:has(input:checked) { border-color: #f0a030; color: #f0a030; background: rgba(240,160,48,0.08); }
.dls-pills > label:has(input:disabled) { opacity: .3; cursor: not-allowed; }
.dls-pills input { display: none; }

.dls-checks label { display: flex; align-items: center; gap: 6px; font-size: .78rem; margin: 3px 12px 3px 0; color: #e8e8e8; }
.dls-checks { display: flex; flex-wrap: wrap; }
.dls-checks input { accent-color: #f0a030; }

/* param forms */
.dls-pform { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 6px 10px; }
.dls-pform .dls-lbl { margin-top: 2px; }
.dls-pform .dls-checks label { margin-top: 4px; }

/* architecture page */
.dls-archbar { display: flex; gap: 12px; align-items: stretch; margin-bottom: 10px; }
.dls-archbar .dls-card { padding: 8px 12px; }
#dls_editor_root { flex: 1; min-height: 440px; }

/* review */
.dls-pre { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; color: #cfefff; font-size: .72rem;
           padding: 10px 12px; max-height: 58vh; overflow: auto; white-space: pre; font-family: Consolas, 'Courier New', monospace; margin: 0; }
.dls-msg { font-size: .76rem; padding: 4px 9px; border-radius: 8px; margin: 3px 0; }
.dls-msg.err { background: rgba(255,90,80,0.12); color: #ff9b92; }
.dls-msg.warn { background: rgba(240,160,48,0.10); color: #f0c080; }
.dls-msg.ok { background: rgba(80,200,120,0.10); color: #8fe0a8; }
.dls-kv { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; font-size: .78rem; }
.dls-kv div:nth-child(odd) { color: #9fb3c8; }
.dls-btn { border-radius: 10px !important; font-size: .8rem !important; }

/* ================= graph editor ============================================ */
.dlx { display: flex; height: 100%; gap: 10px; user-select: none; }
.dlx-pal { width: 232px; flex: 0 0 232px; background: rgba(0,0,0,0.6); border-radius: 10px; display: flex; flex-direction: column;
           border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.dlx-ph { color: #cfefff; font-weight: 600; font-size: .85rem; padding: 9px 12px 4px; }
.dlx-search { margin: 4px 10px 8px; width: calc(100% - 20px) !important; }
.dlx-pal-list { overflow-y: auto; flex: 1; padding: 0 6px 10px; }
.dlx-cat { display: flex; align-items: center; gap: 7px; padding: 6px 6px; cursor: pointer; border-radius: 8px; font-size: .78rem; color: #cfefff; }
.dlx-cat:hover { background: rgba(255,255,255,0.05); }
.dlx-cl { flex: 1; }
.dlx-cn { color: #6f8295; font-size: .68rem; }
.dlx-chev { color: #6f8295; width: 10px; }
.dlx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.dlx-items { padding: 0 0 6px 10px; }
.dlx-item { display: flex; align-items: center; gap: 7px; padding: 3px 6px; margin: 2px 0; border-radius: 7px; cursor: grab; font-size: .76rem;
            background: rgba(255,255,255,0.035); color: #e8e8e8; }
.dlx-item:hover { background: rgba(255,255,255,0.09); }
.dlx-item > span:nth-child(2) { flex: 1; }
.dlx-bar { width: 3px; height: 14px; border-radius: 2px; flex: 0 0 3px; }
.dlx-add { color: #6f8295; font-weight: 700; padding: 0 3px; cursor: pointer; }
.dlx-add:hover { color: #f0a030; }
.dlx-ext { font-size: .58rem; color: #d0a0e0; border: 1px solid rgba(208,160,224,.45); border-radius: 5px; padding: 0 3px; line-height: 1.3; }

.dlx-centre { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dlx-bar2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.dlx-tabs { display: flex; gap: 2px; }
.dlx-tab { background: rgba(0,0,0,0.45); color: #9fb3c8; border: 1px solid rgba(255,255,255,0.08); border-bottom: none;
           border-radius: 10px 10px 0 0; padding: 5px 14px; font-size: .8rem; position: relative; }
.dlx-tab.on { background: rgba(0,0,0,0.6); color: #cfefff; border-color: rgba(240,160,48,0.6); font-weight: 600; }
.dlx-tabdot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ff7b72; }
.dlx-tools { display: flex; gap: 4px; align-items: center; padding-bottom: 4px; }
.dlx-tb { background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
          padding: 2px 9px; font-size: .74rem; }
.dlx-tb:hover { border-color: #f0a030; }
.dlx-tb.danger:hover { border-color: #ff7b72; color: #ff9b92; }
.dlx-zoom { color: #9fb3c8; font-size: .72rem; min-width: 36px; text-align: center; }
.dlx-canvas { flex: 1; position: relative; overflow: hidden; border-radius: 0 10px 10px 10px; outline: none; cursor: default;
              background-color: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07);
              background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px); }
.dlx-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dlx-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.dlx-edge { fill: none; stroke-width: 2; opacity: .75; pointer-events: none; }
.dlx-edge.sel { stroke-width: 3; opacity: 1; }
.dlx-edge.temp { stroke-dasharray: 5 4; opacity: 1; }
.dlx-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.dlx-nodes { position: absolute; left: 0; top: 0; }
.dlx-node { position: absolute; background: #151c24; border: 1px solid rgba(255,255,255,0.12); border-top: 3px solid; border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,.45); cursor: move; }
.dlx-node.sel { box-shadow: 0 0 0 2px #f0a030, 0 3px 12px rgba(0,0,0,.5); }
.dlx-node.bad { border-color: rgba(255,123,114,.8); }
.dlx-node.warn .dlx-nf { color: #f0c080; }
.dlx-nh { display: flex; align-items: center; gap: 6px; padding: 4px 8px 0; }
.dlx-nt { flex: 1; font-weight: 600; color: #e8f4ff; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-nb { color: #9fb3c8; font-size: .68rem; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-nf { display: flex; justify-content: space-between; gap: 6px; font-family: Consolas, monospace; font-size: .66rem; color: #cfefff;
          padding: 2px 8px; white-space: nowrap; overflow: hidden; }
.dlx-nf span:first-child { overflow: hidden; text-overflow: ellipsis; }
.dlx-node.bad .dlx-nf { color: #ff9b92; }
.dlx-pc { color: #6f8295; }
.dlx-port { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #0c1116; border: 2px solid #9fb3c8; }
.dlx-port.in { top: -7px; }
.dlx-port.in.multi { border-radius: 3px; }
.dlx-port.in.opt { border-style: dashed; }
.dlx-port.out { bottom: -7px; cursor: crosshair; border-color: #f0a030; }
.dlx-port:hover { background: #f0a030; }
.dlx-plbl { position: absolute; top: -21px; width: 60px; text-align: center; font-size: .6rem; color: #9fb3c8; pointer-events: none; }
.dlx-emptyhint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #45596d; font-size: 1rem; pointer-events: none; }
.dlx-flash { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(255,90,80,.18); color: #ffb4ac;
             border-radius: 10px; padding: 4px 12px; font-size: .78rem; opacity: 0; transition: opacity .3s; pointer-events: none; }

.dlx-insp { width: 292px; flex: 0 0 292px; background: rgba(0,0,0,0.6); border-radius: 10px; border: 1px solid rgba(255,255,255,0.07);
            padding: 10px 12px; overflow-y: auto; user-select: text; }
.dlx-ih { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.dlx-chip { font-size: .64rem; text-transform: uppercase; letter-spacing: .6px; border: 1px solid; border-radius: 8px; padding: 0 7px; }
.dlx-title-in { font-weight: 600; font-size: .92rem !important; color: #cfefff !important; }
.dlx-code { font-family: Consolas, monospace; font-size: .72rem; color: #f0a030; margin: 6px 0 4px; word-break: break-word; }
.dlx-desc { color: #9fb3c8; font-size: .74rem; line-height: 1.4; margin: 4px 0; }
.dlx-desc b { color: #cfefff; }
.dlx-sec { color: #cfefff; font-size: .7rem; text-transform: uppercase; letter-spacing: .7px; margin: 12px 0 5px;
           border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 3px; }
.dlx-row { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 6px; margin: 3px 0; font-size: .74rem; }
.dlx-rl { color: #9fb3c8; }
.dlx-in { background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px;
          padding: 2px 6px; font-size: .76rem; width: 100%; outline: none; }
.dlx-in:focus { border-color: #f0a030; }
select.dlx-in option { background: #141a21; }
.dlx-chk { accent-color: #f0a030; justify-self: start; }
.dlx-shape { font-family: Consolas, monospace; font-size: .72rem; color: #cfefff; background: rgba(255,255,255,0.05);
             border-radius: 7px; padding: 3px 7px; margin: 3px 0; }
.dlx-shape.bad { color: #ff9b92; }
.dlx-io { color: #6f8295; margin-right: 8px; }
.dlx-btns { display: flex; gap: 6px; margin-top: 12px; }
.dlx-btn { flex: 1; background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
           padding: 4px; font-size: .75rem; }
.dlx-btn:hover { border-color: #f0a030; }
.dlx-btn.danger:hover { border-color: #ff7b72; color: #ff9b92; }
.dlx-note { background: rgba(240,160,48,0.08); border-radius: 8px; padding: 6px 8px; font-size: .74rem; color: #e8e8e8; margin: 6px 0; }
.dlx-kpis { display: flex; gap: 6px; }
.dlx-kpi { flex: 1; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 5px 6px; text-align: center; }
.dlx-kv { font-size: 1rem; font-weight: 600; color: #cfefff; }
.dlx-kl { font-size: .62rem; color: #9fb3c8; }
.dlx-msg { font-size: .72rem; padding: 3px 7px; border-radius: 7px; margin: 3px 0; cursor: pointer; }
.dlx-msg.err { background: rgba(255,90,80,0.12); color: #ff9b92; }
.dlx-msg.warn { background: rgba(240,160,48,0.10); color: #f0c080; }
.dlx-msg.ok { background: rgba(80,200,120,0.10); color: #8fe0a8; cursor: default; }
.dlx-help { color: #9fb3c8; font-size: .72rem; line-height: 1.55; }
.dlx-help b { color: #cfefff; font-weight: 600; }

/* training runs (Review step) */
.dls-rtable { width: 100%; border-collapse: collapse; font-size: .74rem; margin-top: 4px; }
.dls-rtable th { color: #cfefff; font-weight: 600; text-align: left; padding: 4px 8px; background: rgba(255,255,255,0.06); }
.dls-rtable td { color: #e8e8e8; padding: 3px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dls-ta { background: rgba(0,0,0,0.45); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
          font-size: .78rem; padding: 6px 8px; }