:root {
    --tjkt-navy: #0b2f4f;
    --tjkt-navy-2: #123f67;
    --tjkt-blue: #2d7fb8;
    --tjkt-sky: #dceffc;
    --tjkt-sky-2: #eef7fd;
    --tjkt-gray-50: #f7f9fb;
    --tjkt-gray-100: #eef2f5;
    --tjkt-gray-200: #dde4ea;
    --tjkt-gray-500: #6b7785;
    --tjkt-gray-700: #394653;
    --tjkt-black: #171b1f;
    --tjkt-yellow: #f2c94c;
    --tjkt-yellow-dark: #d9ac28;
    --tjkt-white: #ffffff;
    --tjkt-shadow: 0 8px 28px rgba(11, 47, 79, .08);
}

html { min-height: 100%; }

body {
    min-height: 100vh;
    background: var(--tjkt-gray-50);
    color: var(--tjkt-gray-700);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a {
    color: var(--tjkt-blue);
    text-decoration-color: rgba(45, 127, 184, .35);
}

a:hover { color: var(--tjkt-navy); }

/* Header / navigation */
.navbar.bg-dark {
    background: linear-gradient(100deg, var(--tjkt-navy) 0%, var(--tjkt-navy-2) 72%, #174e78 100%) !important;
    border-bottom: 3px solid var(--tjkt-yellow) !important;
    box-shadow: 0 4px 18px rgba(11, 47, 79, .16);
}

.navbar-brand {
    color: var(--tjkt-white) !important;
    letter-spacing: .25px;
}

.navbar-brand::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -4px;
    border-radius: 3px;
    background: var(--tjkt-yellow);
}

.navbar .btn-outline-light {
    color: #edf7fe;
    border-color: rgba(220, 239, 252, .35);
    background: rgba(255,255,255,.03);
}

.navbar .btn-outline-light:hover,
.navbar .btn-outline-light:focus {
    color: var(--tjkt-navy);
    background: var(--tjkt-sky);
    border-color: var(--tjkt-sky);
}

/* Buttons */
.btn-warning {
    --bs-btn-color: var(--tjkt-black);
    --bs-btn-bg: var(--tjkt-yellow);
    --bs-btn-border-color: var(--tjkt-yellow);
    --bs-btn-hover-color: var(--tjkt-black);
    --bs-btn-hover-bg: #f6d66f;
    --bs-btn-hover-border-color: #f6d66f;
    --bs-btn-active-color: var(--tjkt-black);
    --bs-btn-active-bg: var(--tjkt-yellow-dark);
    --bs-btn-active-border-color: var(--tjkt-yellow-dark);
    font-weight: 650;
}

.btn-primary {
    --bs-btn-bg: var(--tjkt-navy-2);
    --bs-btn-border-color: var(--tjkt-navy-2);
    --bs-btn-hover-bg: var(--tjkt-navy);
    --bs-btn-hover-border-color: var(--tjkt-navy);
    --bs-btn-active-bg: #082740;
    --bs-btn-active-border-color: #082740;
}

.btn-outline-primary {
    --bs-btn-color: var(--tjkt-navy-2);
    --bs-btn-border-color: var(--tjkt-blue);
    --bs-btn-hover-bg: var(--tjkt-navy-2);
    --bs-btn-hover-border-color: var(--tjkt-navy-2);
}

/* Main content */
main { min-height: calc(100vh - 145px); }

.hero {
    background:
        radial-gradient(circle at 85% 18%, rgba(45,127,184,.12), transparent 27%),
        linear-gradient(180deg, var(--tjkt-white) 0%, var(--tjkt-sky-2) 100%);
    border-bottom: 1px solid var(--tjkt-gray-200);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tjkt-navy);
}

.text-secondary { color: var(--tjkt-gray-500) !important; }

/* Cards */
.card {
    border-radius: 14px;
    border-color: var(--tjkt-gray-200);
    background: var(--tjkt-white);
}

.card.border-0,
.card.shadow-sm,
.card.shadow {
    box-shadow: var(--tjkt-shadow) !important;
}

.card-body { position: relative; }

.dashboard-module-card,
.row.g-3 > [class*="col-"] > .card {
    border-top: 3px solid var(--tjkt-blue) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.row.g-3 > [class*="col-"] > .card:hover {
    transform: translateY(-2px);
    border-top-color: var(--tjkt-yellow) !important;
    box-shadow: 0 12px 32px rgba(11, 47, 79, .12) !important;
}

/* Forms */
.form-label {
    color: var(--tjkt-gray-700);
    font-weight: 600;
}

.form-control,
.form-select {
    border-color: var(--tjkt-gray-200);
    background-color: var(--tjkt-white);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tjkt-blue);
    box-shadow: 0 0 0 .22rem rgba(45, 127, 184, .14);
}

/* Tables */
.table {
    --bs-table-color: var(--tjkt-gray-700);
    --bs-table-bg: transparent;
}

.table thead th {
    color: var(--tjkt-navy);
    background: var(--tjkt-sky-2);
    border-bottom-color: var(--tjkt-gray-200);
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.table-hover tbody tr:hover > * {
    --bs-table-bg-state: var(--tjkt-sky-2);
}

/* Badges */
.badge.text-bg-dark {
    background: var(--tjkt-navy) !important;
}

.badge.text-bg-light {
    color: var(--tjkt-navy) !important;
    background: var(--tjkt-sky-2) !important;
    border-color: #cce3f2 !important;
}

/* Alerts */
.alert-info {
    --bs-alert-color: #164f76;
    --bs-alert-bg: var(--tjkt-sky-2);
    --bs-alert-border-color: #c8e2f3;
}

.alert-success {
    border-left: 4px solid #2f855a;
}

.alert-danger {
    border-left: 4px solid #b42318;
}

/* Pagination */
.pagination {
    --bs-pagination-color: var(--tjkt-navy-2);
    --bs-pagination-hover-color: var(--tjkt-navy);
    --bs-pagination-focus-color: var(--tjkt-navy);
    --bs-pagination-active-bg: var(--tjkt-navy-2);
    --bs-pagination-active-border-color: var(--tjkt-navy-2);
}

/* Login emphasis without adding another layout dependency */
.container[style*="max-width:520px"] .card {
    overflow: hidden;
    border-top: 5px solid var(--tjkt-blue) !important;
}

.container[style*="max-width:520px"] .card::before {
    content: "";
    display: block;
    width: 88px;
    height: 5px;
    margin-top: -5px;
    background: var(--tjkt-yellow);
}

.container[style*="max-width:520px"] .btn-warning {
    box-shadow: 0 5px 14px rgba(242, 201, 76, .24);
}

/* Footer */
footer {
    color: var(--tjkt-gray-500);
    background: var(--tjkt-gray-100);
    border-top-color: var(--tjkt-gray-200) !important;
}

/* Selection and accessibility */
::selection {
    color: var(--tjkt-black);
    background: #f8df86;
}

:focus-visible {
    outline: 3px solid rgba(45, 127, 184, .32);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .navbar .btn-outline-light,
    .navbar .btn-warning { width: 100%; }
}

/* Role & Permission matrix */
.role-permission-card {
    overflow: hidden;
}

.role-permission-table-wrap {
    max-height: 68vh;
}

.role-permission-table {
    min-width: 1050px;
}

.role-permission-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    vertical-align: middle;
    background: var(--tjkt-sky-2);
    box-shadow: inset 0 -1px 0 var(--tjkt-gray-200);
}

.role-permission-table .permission-col {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 230px;
    width: 230px;
    background: var(--tjkt-white);
    box-shadow: 1px 0 0 var(--tjkt-gray-200);
}

.role-permission-table thead .permission-col {
    z-index: 6;
    background: var(--tjkt-sky-2);
}

.role-permission-table .description-col {
    min-width: 300px;
    width: 34%;
}

.role-permission-table .role-col {
    min-width: 145px;
    width: 145px;
    white-space: normal;
}

.role-permission-table .role-name {
    color: var(--tjkt-navy);
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

.role-permission-table .role-code {
    display: inline-block;
    margin-top: .25rem;
    color: var(--tjkt-blue);
    font-size: .75rem;
    text-transform: none;
}

.role-permission-table tbody th,
.role-permission-table tbody td {
    border-color: var(--tjkt-gray-200);
}

.role-permission-table tbody tr:nth-child(even) > * {
    background-color: #fbfcfd;
}

.role-permission-table tbody tr:nth-child(even) > .permission-col {
    background-color: #fbfcfd;
}

.role-permission-table tbody tr:hover > * {
    background-color: var(--tjkt-sky-2);
}

.role-permission-table tbody tr:hover > .permission-col {
    background-color: var(--tjkt-sky-2);
}

.role-permission-cell {
    vertical-align: middle;
}

.role-permission-check {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    border-color: #9bb4c7;
}

.role-permission-check:checked {
    background-color: var(--tjkt-navy-2);
    border-color: var(--tjkt-navy-2);
}

.role-permission-check:disabled {
    cursor: not-allowed;
    opacity: .65;
    background-color: var(--tjkt-yellow);
    border-color: var(--tjkt-yellow-dark);
}

.role-permission-actions {
    background: var(--tjkt-gray-50);
}

@media (max-width: 767.98px) {
    .role-permission-table-wrap {
        max-height: 62vh;
    }

    .role-permission-table .permission-col {
        min-width: 190px;
        width: 190px;
    }

    .role-permission-table .description-col {
        min-width: 260px;
    }
}

/* Module 01 — Subnetting & VLSM Workbench */
.subnet-workbench { --wb-navy: var(--tjkt-navy, #0b2741); --wb-blue: var(--tjkt-blue, #1261a0); --wb-sky: var(--tjkt-sky-2, #eef7fd); }
.workbench-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.workbench-nav-item { display:flex; gap:.8rem; align-items:center; padding:1rem; border:1px solid var(--tjkt-gray-200,#dee2e6); border-radius:1rem; background:#fff; color:var(--wb-navy); text-decoration:none; transition:.2s ease; }
.workbench-nav-item:hover { transform:translateY(-2px); border-color:#88bde0; box-shadow:0 .5rem 1.25rem rgba(11,39,65,.08); }
.workbench-nav-item small { display:block; color:#6c757d; margin-top:.1rem; }
.workbench-number { display:grid; place-items:center; width:2.25rem; height:2.25rem; flex:0 0 2.25rem; border-radius:.7rem; background:var(--wb-navy); color:#fff; font-weight:800; }
.workbench-section { scroll-margin-top:1rem; overflow:hidden; }
.workbench-section-header { display:flex; align-items:flex-start; justify-content:space-between; padding:1.25rem 1.5rem; background:linear-gradient(135deg,var(--wb-sky),#fff); border-left:5px solid var(--wb-blue)!important; }
.section-kicker { display:inline-block; color:var(--wb-blue); font-size:.72rem; font-weight:800; letter-spacing:.12em; margin-bottom:.25rem; }
.result-panel { padding:1.25rem; border-radius:1rem; background:#f8fafc; border:1px solid var(--tjkt-gray-200,#dee2e6); }
.result-card { padding:1rem; border:1px solid #dce7ef; border-radius:.85rem; background:#fff; }
.result-card span { display:block; color:#6c757d; font-size:.78rem; text-transform:uppercase; font-weight:700; letter-spacing:.04em; margin-bottom:.3rem; }
.result-card strong { display:block; color:var(--wb-navy); font-size:1.02rem; overflow-wrap:anywhere; }
.binary-panel { background:var(--wb-navy); color:#fff; border-radius:.9rem; padding:1rem 1.1rem; }
.binary-row { display:grid; grid-template-columns:150px 1fr; gap:1rem; align-items:center; padding:.55rem 0; border-top:1px solid rgba(255,255,255,.12); }
.binary-row:first-of-type { border-top:0; }
.binary-row span { color:#c7d8e5; font-size:.85rem; }
.binary-row code { color:#ffe082; white-space:nowrap; overflow-x:auto; }
.vlsm-result-table { min-width:1250px; }
.vlsm-result-table code { color:var(--wb-navy); }
.challenge-box { padding:1.25rem; border-radius:1rem; border:1px solid #9ed2ee; background:linear-gradient(135deg,#edf8ff,#fff); }
.practice-empty { border:2px dashed #c7d6e0; border-radius:1rem; background:#fafcfd; }
.practice-score { display:grid; place-items:center; min-width:84px; height:64px; padding:0 .75rem; border-radius:1rem; background:var(--wb-navy); color:#fff; font-weight:800; font-size:1.4rem; }
.practice-result { border-top:1px solid #dee2e6; padding-top:1.25rem; }
@media(max-width:991.98px){.workbench-nav{grid-template-columns:1fr}.binary-row{grid-template-columns:1fr;gap:.25rem}.binary-row code{font-size:.8rem}}

/* Module activity landing & focused activity pages */
.module-activity-grid .activity-card { display:block; position:relative; padding:1.5rem; border:1px solid var(--tjkt-gray-200,#dee2e6); border-radius:1.1rem; background:#fff; color:var(--tjkt-navy,#0b2741); box-shadow:0 .35rem 1rem rgba(11,39,65,.06); transition:.2s ease; overflow:hidden; }
.module-activity-grid .activity-card:hover { transform:translateY(-3px); border-color:#88bde0; box-shadow:0 .8rem 1.7rem rgba(11,39,65,.12); }
.activity-number { position:absolute; top:1rem; right:1rem; font-size:.75rem; font-weight:800; color:#8293a2; letter-spacing:.08em; }
.activity-icon { display:inline-flex; align-items:center; justify-content:center; min-width:58px; height:42px; padding:0 .8rem; margin-bottom:1.25rem; border-radius:.75rem; background:var(--tjkt-sky-2,#eef7fd); color:var(--tjkt-blue,#1261a0); font-weight:800; letter-spacing:.04em; }
.activity-card p { color:#6c757d; min-height:4.5rem; }
.activity-link { display:inline-block; color:var(--tjkt-blue,#1261a0); font-weight:700; margin-top:.5rem; }
.activity-page-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem; }
@media(max-width:767.98px){ .activity-page-header{align-items:flex-start;flex-direction:column} .activity-card p{min-height:auto} }

/* Module 02 — IPv6 Workbench */
.ipv6-workbench { --ipv6-navy: var(--tjkt-navy,#0b2741); --ipv6-blue: var(--tjkt-blue,#1261a0); }
.ipv6-workbench code { color: var(--ipv6-navy); overflow-wrap:anywhere; }
.ipv6-workbench .font-monospace { overflow-wrap:anywhere; }
.ipv6-plan-table { min-width: 1050px; }
.ipv6-plan-table code { font-size:.88rem; }
.ipv6-workbench .alert-warning { border-left:4px solid var(--tjkt-yellow-dark,#d6a800); }
@media(max-width:767.98px){ .ipv6-workbench .result-card strong{font-size:.92rem} }

/* Module 03 — VLAN Designer */
.vlan-workbench { --vlan-navy: var(--tjkt-navy,#0b2741); --vlan-blue: var(--tjkt-blue,#1261a0); }
.vlan-workbench code { color:var(--vlan-navy); overflow-wrap:anywhere; }
.vlan-input-table { min-width:980px; }
.vlan-matrix { min-width:760px; }
.vlan-matrix thead th { background:var(--tjkt-sky-2,#eef7fd); color:var(--vlan-navy); }
.vlan-state { display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:.55rem; font-weight:800; }
.vlan-state-t { background:#d8eefb; color:#0d5f94; border:1px solid #9ccde9; }
.vlan-state-u { background:#fff3bf; color:#755900; border:1px solid #eed36b; }
.vlan-state-none { background:#f1f3f5; color:#8b949e; border:1px solid #dee2e6; }
.routeros-config { max-height:520px; overflow:auto; padding:1.25rem; border-radius:1rem; background:#091d2d; color:#e8f3f8; border-left:5px solid var(--tjkt-yellow,#f4c430); }
.routeros-config code { color:#e8f3f8; white-space:pre; font-size:.88rem; }
@media(max-width:767.98px){ .routeros-config{font-size:.8rem} }

/* Module 04 — MikroTik Configuration Lab */
.mikrotik-workbench { --mt-navy: var(--tjkt-navy,#0b2741); --mt-blue: var(--tjkt-blue,#1261a0); }
.mikrotik-workbench code { overflow-wrap:anywhere; }
.activity-card-upcoming { opacity:.78; cursor:default; background:linear-gradient(135deg,#f8fafc,#fff)!important; }
.activity-card-upcoming:hover { transform:none!important; border-color:var(--tjkt-gray-200,#dee2e6)!important; box-shadow:0 .35rem 1rem rgba(11,39,65,.06)!important; }
.config-section { padding:1.25rem 0; border-top:1px solid var(--tjkt-gray-200,#dee2e6); }
.config-section:first-of-type { padding-top:0; border-top:0; }
.config-section-title { display:flex; align-items:flex-start; gap:.85rem; }
.config-section-title > span { display:grid; place-items:center; width:2.35rem; height:2.35rem; flex:0 0 2.35rem; border-radius:.75rem; background:var(--mt-navy); color:#fff; font-weight:800; font-size:.82rem; }
.mikrotik-script { min-height:280px; }
.mikrotik-workbench .form-switch .form-check-input:checked { background-color:var(--mt-blue); border-color:var(--mt-blue); }

/* Module 04 — Basic Configuration section separation refinement */
.mikrotik-workbench .config-section {
    position: relative;
    padding: 0 0 1.65rem;
    margin: 0 0 1.65rem;
    border-top: 0;
    border-bottom: 1px solid var(--tjkt-gray-200,#dee2e6);
}
.mikrotik-workbench .config-section:last-of-type {
    margin-bottom: 1.25rem;
}
.mikrotik-workbench .config-section-title {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: .95rem;
    padding: .85rem 1rem;
    border: 1px solid #d9e8f2;
    border-left: 4px solid var(--mt-blue);
    border-radius: .8rem;
    background: linear-gradient(90deg, var(--tjkt-sky-2,#eef7fd), #fff 72%);
}
.mikrotik-workbench .config-section-title > span {
    margin-top: .05rem;
    box-shadow: 0 .2rem .5rem rgba(11,39,65,.10);
}
.mikrotik-workbench .config-section-title h2 {
    color: var(--mt-navy);
}
.mikrotik-workbench .config-section > .row,
.mikrotik-workbench .config-section > .form-check {
    margin-left: .15rem;
    margin-right: .15rem;
}
@media (max-width: 767.98px) {
    .mikrotik-workbench .config-section {
        padding-bottom: 1.35rem;
        margin-bottom: 1.35rem;
    }
    .mikrotik-workbench .config-section-title {
        padding: .75rem .8rem;
    }
}

/* Module 05 - Packet Flow Explorer */
.packet-flow-workbench .activity-card { position: relative; }
.packet-facility-map { display: grid; gap: 12px; }
.packet-facility-stage { display:flex; gap:16px; align-items:flex-start; padding:18px; background:#fff; border:1px solid var(--tjkt-gray-200,#dce3ea); border-left:4px solid var(--tjkt-blue,#2c8ed6); border-radius:12px; box-shadow:0 4px 14px rgba(18,49,75,.05); }
.packet-stage-number { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:10px; background:var(--tjkt-navy,#0b2740); color:#fff; font-weight:800; }
.packet-stage-body { min-width:0; }
.packet-facility-pill { display:inline-flex; padding:.32rem .6rem; background:#eaf5fc; border:1px solid #c9e5f7; border-radius:999px; color:#12314b; font-size:.82rem; font-weight:600; }
.packet-decision-card { min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-radius:12px; background:linear-gradient(145deg,#0b2740,#164f78); color:#fff; padding:16px; border-bottom:4px solid #f3c94b; }
.packet-decision-card span { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.75; }
.packet-decision-card strong { margin-top:4px; }
.packet-flow-track { display:flex; gap:10px; overflow-x:auto; padding:8px 2px 16px; scroll-snap-type:x proximity; }
.packet-flow-node { min-width:175px; max-width:200px; min-height:118px; position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:5px; padding:14px; border:1px solid #d9e2e9; border-radius:12px; background:#f8fafc; color:#193247; scroll-snap-align:start; transition:.18s ease; }
.packet-flow-node::after { content:'→'; position:absolute; right:-10px; top:44%; color:#8aa0b2; font-weight:800; z-index:2; }
.packet-flow-node:last-child::after { display:none; }
.packet-flow-node:hover { border-color:#7fc0ea; transform:translateY(-2px); }
.packet-flow-node.is-active { background:#e8f5fd; border-color:#2588cb; box-shadow:0 0 0 3px rgba(37,136,203,.12); }
.packet-flow-node.is-key { border-bottom:4px solid #f3c94b; }
.packet-flow-index { position:absolute; right:10px; top:8px; font-size:.72rem; color:#7890a2; font-weight:800; }
.packet-flow-code { font-size:.68rem; letter-spacing:.06em; color:#2477ac; font-weight:800; }
.packet-flow-node strong { font-size:.9rem; line-height:1.2; padding-right:18px; }
.packet-flow-explanation { background:#f8fafc; border-left:4px solid #f3c94b; padding:14px 16px; border-radius:0 10px 10px 0; min-height:92px; }
.packet-practice-option { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin:8px 0; border:1px solid #dce4eb; border-radius:10px; cursor:pointer; background:#fff; }
.packet-practice-option:hover { border-color:#7fc0ea; background:#f4faff; }
@media(max-width:767.98px){ .packet-facility-stage{padding:14px;gap:10px}.packet-flow-node{min-width:155px}.packet-decision-card{min-height:92px} }

/* Module 06 - Network Troubleshooting Simulator */
.trouble-case-card{display:block;padding:1.25rem;border:1px solid var(--tjkt-border,#d7dee8);border-radius:1rem;background:#fff;box-shadow:0 .25rem .75rem rgba(15,42,70,.05);transition:.18s ease;color:inherit}
.trouble-case-card:hover{transform:translateY(-2px);border-color:#7bbbe7;box-shadow:0 .5rem 1.25rem rgba(15,42,70,.10)}
.diagnostic-console{background:#0d1b2a;color:#dbeafe;border-radius:.8rem;padding:.9rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:.9rem}
.diagnostic-console>div{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.09)}
.diagnostic-console>div:last-child{border-bottom:0}.diagnostic-console span{color:#9fb3c8}.diagnostic-console strong{text-align:right;color:#fff}
@media(max-width:576px){.diagnostic-console>div{display:block}.diagnostic-console strong{display:block;text-align:left;margin-top:.2rem}}

/* Module 11 — Digital Network Lab */
.network-lab-workbench .hairline-flex{height:1px;flex:1;background:var(--tjkt-gray-200,#dee2e6)}
.network-lab-progress{height:.42rem;background:#e9eef2}.network-lab-progress-lg{height:.7rem;background:#e9eef2}
.lab-meta-card{height:100%;padding:1rem 1.05rem;border:1px solid var(--tjkt-gray-200,#dee2e6);border-radius:.9rem;background:#fff;box-shadow:0 .25rem .8rem rgba(11,39,65,.05)}
.lab-meta-card span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:#6c7f90;font-weight:700;margin-bottom:.25rem}.lab-meta-card strong{color:var(--tjkt-navy,#0b2741)}
.lab-section{padding:1.35rem 0;border-top:1px solid var(--tjkt-gray-200,#dee2e6)}.lab-section:first-of-type{border-top:0}
.lab-topology{margin:0;padding:1.15rem 1.25rem;border-radius:.9rem;background:#0c2031;color:#eaf4fa;overflow:auto;border-left:4px solid var(--tjkt-yellow,#f4c430);font-size:.92rem;line-height:1.55}
.lab-steps{display:grid;gap:.85rem}.lab-step{display:flex;gap:.9rem;padding:1rem;border:1px solid #dce5ec;border-radius:.85rem;background:#fff}.lab-step>span{display:grid;place-items:center;width:2.35rem;height:2.35rem;flex:0 0 2.35rem;border-radius:.7rem;background:var(--tjkt-navy,#0b2741);color:#fff;font-weight:800;font-size:.8rem}.lab-step p{color:#324b60}
.lab-checklist{display:grid;gap:.65rem}.lab-check-item{margin:0}.lab-check-button{width:100%;display:flex;gap:.85rem;align-items:flex-start;text-align:left;padding:.9rem 1rem;border:1px solid #dce5ec;border-radius:.85rem;background:#fff;color:#17324a;transition:.15s ease}.lab-check-button:hover{border-color:#7fc0ea;background:#f6fbff}.lab-check-button>span:first-child{display:grid;place-items:center;width:1.75rem;height:1.75rem;flex:0 0 1.75rem;border-radius:50%;border:1px solid #aebdca;color:#668094;font-weight:800}.lab-check-button small{display:block;color:#6f8292;margin-top:.2rem}.lab-check-button.is-checked{background:#eef9f1;border-color:#9dd5aa}.lab-check-button.is-checked>span:first-child{background:#218739;color:#fff;border-color:#218739}
.instructor-solution{padding:1.25rem;border:1px solid #eed36b;border-radius:1rem;background:#fffdf4}.instructor-solution .routeros-config{margin-bottom:1rem}
@media(max-width:767.98px){.lab-step{padding:.85rem}.lab-topology{font-size:.8rem}}

.lab-check-button.disabled{opacity:.68;cursor:not-allowed;background:#f7f9fb}.lab-check-button.disabled:hover{border-color:#dce5ec;background:#f7f9fb}

/* Module 11 — Dynamic Topology Diagram */
.network-topology-panel{overflow-x:auto;padding:.75rem;border:1px solid #dce5ec;border-radius:1rem;background:linear-gradient(180deg,#fbfdff 0%,#f3f8fc 100%)}
.network-topology-svg{display:block;width:100%;min-width:720px;height:auto;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.network-topology-svg .topo-zone rect{fill:#f6f9fc;stroke:#cbd9e5;stroke-width:1.5;stroke-dasharray:7 5}.network-topology-svg .topo-zone text{fill:#62798c;font-size:13px;font-weight:700;letter-spacing:.02em}
.network-topology-svg .topo-zone-vlan rect{fill:#fffaf0;stroke:#e7c960}.network-topology-svg .topo-zone-p2p rect{fill:#f4f8fb;stroke:#93b8d1}.network-topology-svg .topo-zone-ospf rect{fill:#f4f7ff;stroke:#8ca6d9}.network-topology-svg .topo-zone-wan rect{fill:#f7f3fa;stroke:#a58bb8}.network-topology-svg .topo-zone-wireless rect{fill:#faf6ff;stroke:#b292cf}.network-topology-svg .topo-zone-fiber rect{fill:#f2fbf8;stroke:#80baa9}
.network-topology-svg .topo-link line{stroke:#526e82;stroke-width:3;stroke-linecap:round}.network-topology-svg .topo-link-trunk line{stroke:#b58a13;stroke-width:5;stroke-dasharray:11 6}.network-topology-svg .topo-link-p2p line{stroke:#287eae;stroke-width:4}.network-topology-svg .topo-link-access line{stroke:#647b8b}.network-topology-svg .topo-link-wireless line{stroke:#7a59a8;stroke-width:3;stroke-dasharray:6 5}.network-topology-svg .topo-link-fiber line{stroke:#2b8c74;stroke-width:4}.network-topology-svg .topo-arrow{fill:#526e82}
.network-topology-svg .topo-link-label-bg{fill:#fff;stroke:#d9e3ea;stroke-width:1}.network-topology-svg .topo-link-label{fill:#16364f;font-size:12px;font-weight:800}.network-topology-svg .topo-link-sub{fill:#61798c;font-size:11px}
.network-topology-svg .topo-node rect{fill:#fff;stroke:#214f70;stroke-width:2.4}.network-topology-svg .topo-node path,.network-topology-svg .topo-node line{fill:none;stroke:#214f70;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.network-topology-svg .topo-node .topo-ports circle{fill:#214f70}
.network-topology-svg .topo-node-router rect{fill:#eaf5fc;stroke:#177bb5}.network-topology-svg .topo-node-router path{stroke:#177bb5}.network-topology-svg .topo-node-switch rect{fill:#f3f5f7;stroke:#536a7b}.network-topology-svg .topo-node-pc rect{fill:#fff;stroke:#344f63}.network-topology-svg .topo-node-ap rect{fill:#f2f8ff;stroke:#537dae}.network-topology-svg .topo-node-ap path{stroke:#537dae}.network-topology-svg .topo-node-cloud path{fill:#f6f8fb;stroke:#75899a;stroke-width:2.4}.network-topology-svg .topo-node-olt rect{fill:#f3f7fb;stroke:#315d7b}.network-topology-svg .topo-node-onu rect{fill:#f8fafc;stroke:#5b7284}.network-topology-svg .topo-node-label{fill:#0b2741;font-size:14px;font-weight:800}.network-topology-svg .topo-node-meta{fill:#526d81;font-size:11px;font-weight:600}
@media(max-width:767.98px){.network-topology-panel{padding:.5rem}.network-topology-svg{min-width:660px}}
.lab-manage-form .card{border:1px solid #e2e9ef!important}.lab-manage-form .card-body{padding:1.25rem}.lab-manage-form h2{color:var(--tjkt-navy,#0b2741);padding-bottom:.65rem;border-bottom:1px solid #e2e9ef}.lab-manage-form textarea.font-monospace{font-size:.86rem;line-height:1.5}.lab-manage-form .form-label{font-weight:600;color:#29465e}

/* Module 11 — Dynamic Parameter Builder */
.parameter-builder .parameter-rule{padding:1rem;border:1px solid #dce5ec;border-radius:.9rem;background:#fbfdff}
.parameter-builder .parameter-rule:nth-child(even){background:#f7fafc}
.parameter-builder .parameter-placeholder{display:inline-flex;align-items:center;padding:.35rem .55rem;border:1px solid #cfe1ee;border-radius:.55rem;background:#eef7fd;color:#174b70;font-size:.8rem;font-weight:700}
.parameter-builder .input-group-text{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;color:#547084;background:#f2f6f9}
.parameter-builder [data-param-field].d-none{display:none!important}
@media(max-width:767.98px){.parameter-builder .parameter-rule{padding:.85rem}}

/* Module 11 — Visual Topology Builder */
.topology-builder-page .topology-builder-toolbar-card{border:1px solid #e1e9ef!important}
.topology-builder-canvas-card{border:1px solid #dce5ec!important}
.topology-builder-canvas-wrap{overflow:auto;border:1px solid #cfdce6;border-radius:1rem;background:linear-gradient(180deg,#fbfdff,#f3f8fc);background-image:radial-gradient(#cfdae3 1px,transparent 1px);background-size:20px 20px}
.topology-builder-canvas{display:block;width:100%;min-width:720px;height:auto;min-height:430px;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none}
.topology-builder-node{cursor:grab;touch-action:none}.topology-builder-node:active{cursor:grabbing}.topology-builder-node:focus{outline:none}
.topology-builder-node-shape{fill:#fff;stroke:#234f6d;stroke-width:2.4}.topology-builder-node-detail{fill:none;stroke:#234f6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.topology-builder-port{fill:#234f6d}
.topology-builder-node-router .topology-builder-node-shape{fill:#eaf5fc;stroke:#177bb5}.topology-builder-node-router .topology-builder-node-detail{stroke:#177bb5}
.topology-builder-node-switch .topology-builder-node-shape{fill:#f3f5f7;stroke:#536a7b}.topology-builder-node-ap .topology-builder-node-shape{fill:#f2f8ff;stroke:#537dae}.topology-builder-node-cloud .topology-builder-node-shape{fill:#f6f8fb;stroke:#75899a}
.topology-builder-node.is-selected .topology-builder-node-shape,.topology-builder-node.is-link-source .topology-builder-node-shape{stroke:#d89b00;stroke-width:4}.topology-builder-node.is-link-source .topology-builder-node-shape{fill:#fff8dc}
.topology-builder-node-label{fill:#0b2741;font-size:14px;font-weight:800}.topology-builder-node-meta{fill:#536d80;font-size:11px;font-weight:600}
.topology-builder-link-line{stroke:#526e82;stroke-width:3;stroke-linecap:round}.topology-builder-link-hit{stroke:transparent;stroke-width:18;cursor:pointer}.topology-builder-link-trunk .topology-builder-link-line{stroke:#ae8210;stroke-width:5;stroke-dasharray:11 6}.topology-builder-link-p2p .topology-builder-link-line{stroke:#287eae;stroke-width:4}.topology-builder-link-wireless .topology-builder-link-line{stroke:#7a59a8;stroke-width:3;stroke-dasharray:6 5}.topology-builder-link-fiber .topology-builder-link-line{stroke:#2b8c74;stroke-width:4}.topology-builder-link.is-selected .topology-builder-link-line{stroke:#d89b00;stroke-width:5}
.topology-builder-link-label-bg{fill:#fff;stroke:#d6e1e9}.topology-builder-link-label{fill:#15364e;font-size:12px;font-weight:800}.topology-builder-link-sub{fill:#61798c;font-size:11px}
.topology-builder-zone rect{fill:#f6f9fc;stroke:#cbd9e5;stroke-width:1.5;stroke-dasharray:7 5;cursor:pointer}.topology-builder-zone-label{fill:#62798c;font-size:13px;font-weight:700}.topology-builder-zone-vlan rect{fill:#fffaf0;stroke:#e7c960}.topology-builder-zone-p2p rect{fill:#f4f8fb;stroke:#93b8d1}.topology-builder-zone-ospf rect{fill:#f4f7ff;stroke:#8ca6d9}.topology-builder-zone-wan rect{fill:#f7f3fa;stroke:#a58bb8}.topology-builder-zone-wireless rect{fill:#faf6ff;stroke:#b292cf}.topology-builder-zone-fiber rect{fill:#f2fbf8;stroke:#80baa9}.topology-builder-zone.is-selected rect{stroke:#d89b00;stroke-width:3;stroke-dasharray:none}
.topology-inspector-card{position:sticky;top:1rem;border:1px solid #dce5ec!important}.topology-inspector-card .form-label{font-size:.78rem;font-weight:700;color:#486174;margin-bottom:.25rem}.topology-canvas-settings label{min-width:90px;color:#617688}.topology-placeholder-bank .btn{font-size:.73rem;background:#f7fbfe}.topology-placeholder-bank .btn:hover{background:#eaf5fc}
@media(max-width:1199.98px){.topology-inspector-card{position:static}.topology-builder-canvas{min-width:680px}}
@media(max-width:767.98px){.topology-builder-canvas{min-width:640px}.topology-builder-page .card-body{padding:1rem}}

/* Module 11 — Visual Topology Builder v1.1 */
.topology-builder-editbar{padding-top:.85rem;border-top:1px solid #e4ebf0}
.topology-builder-editbar .btn:disabled{opacity:.45;cursor:not-allowed}
.topology-grid-controls .form-select{width:92px;min-width:92px}
.topology-grid-controls .form-check-label{font-weight:700;color:#536d80}
.topology-builder-canvas:focus{outline:3px solid rgba(31,111,164,.18);outline-offset:-3px;border-radius:.85rem}
@media(max-width:767.98px){.topology-builder-editbar{align-items:flex-start!important}.topology-grid-controls{width:100%;justify-content:space-between}}

/* Module 11 — Lab Submission & Instructor Review */
.lab-submission-form .form-label{font-weight:700;color:#29465e}.submission-send-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border:1px solid #cfe1ee;border-radius:.9rem;background:#f6fbff}
.lab-evidence-list{display:grid;gap:.65rem}.lab-evidence-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem .9rem;border:1px solid #dce5ec;border-radius:.8rem;background:#fff}.lab-evidence-item small{display:block;color:#728696;margin-top:.15rem}
.network-lab-review .lab-review-table{min-width:900px}.network-lab-review .lab-review-table thead th{background:#f5f9fc;color:#24445d;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}.review-content-block{padding:1rem;border:1px solid #dce5ec;border-radius:.9rem;background:#fbfdff}.review-content-block>span{display:block;margin-bottom:.55rem;color:#5d7487;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.review-content-block pre{white-space:pre-wrap;word-break:break-word;font-size:.86rem;color:#17324a}
.instructor-review-box{border:1px solid #d8e6ef;background:linear-gradient(180deg,#fbfdff,#f5faff)}.submission-history{display:grid;gap:.75rem}.submission-history-item{position:relative;padding:.85rem 1rem .85rem 1.15rem;border-left:4px solid #91b8d2;background:#f8fbfd;border-radius:0 .75rem .75rem 0}.submission-history-item>span{display:block;color:#718696;font-size:.8rem}.submission-history-item p{margin:.45rem 0 0;color:#334e63}
@media(max-width:767.98px){.lab-evidence-item,.submission-send-box{align-items:flex-start;flex-direction:column}.lab-evidence-item>.d-flex{width:100%}}