:root {
    --bg: #f4f4f5;
    --card: #ffffff;
    --ink: #111111;
    --muted: #5f6b7a;
    --line: #d8dde5;
    --header: #bebec3;
    --dark: #3f3f3f;
    --brand: #0d6efd;
    --ok: #168754;
    --warn: #f59e0b;
    --danger: #dc3545;
    --shadow: 0 6px 18px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: #f4f4f5;
}

.app-body {
    background-color: #f4f4f5;
    background-image:
        linear-gradient(rgba(244,244,245,.86), rgba(244,244,245,.86)),
        var(--app-bg, none);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ==============================
   Fixed KCG-style logged-in layout
   ============================== */
.app-body {
    padding-top: 76px;
    padding-bottom: 74px;
}
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 76px;
    z-index: 1000;
    background: var(--header);
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    padding: 0 22px;
}
.app-logo {
    min-width: 265px;
    height: 64px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #242424;
}
.app-logo img {
    max-height: 62px;
    max-width: 265px;
    object-fit: contain;
    display: block;
}
.pn-logo-mark {
    width: 40px;
    height: 40px;
    border: 3px solid #222;
    border-radius: 10px;
    display: grid;
    place-items: center;
    transform: rotate(30deg);
    font-size: 17px;
    margin-right: 10px;
}
.pn-logo-text { display: flex; flex-direction: column; line-height: 1; letter-spacing: 1px; }
.pn-logo-text strong { font-size: 28px; font-weight: 800; }
.pn-logo-text span { font-size: 13px; letter-spacing: 7px; margin-left: 4px; }
.app-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 28px;
    height: 100%;
}
.app-nav a,
.nav-drop-btn {
    color: #333;
    text-decoration: none;
    font-size: 19px;
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    padding: 26px 0;
    white-space: nowrap;
}
.app-nav a:hover,
.nav-drop-btn:hover { color: #000; }
.nav-dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.nav-drop-menu {
    display: none;
    position: absolute;
    top: 76px;
    right: 0;
    min-width: 230px;
    background: #2d3136;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.nav-dropdown:hover .nav-drop-menu { display: block; }
.nav-drop-menu a {
    display: block;
    color: #fff;
    font-size: 15px;
    padding: 13px 16px;
}
.nav-drop-menu a:hover { background: var(--brand); color: #fff; }

.app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    min-height: 58px;
    background: rgba(63,63,63,.96);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 12px;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 -3px 10px rgba(0,0,0,.12);
}
.app-footer a { color: #5fffe2; font-size: 17px; font-weight: 600; }

.page {
    padding: 24px;
    max-width: 100%;
}
.dashboard-title {
    text-align: center;
    font-size: 34px;
    font-weight: 500;
    margin: 4px 0 22px;
}
.dashboard-meta {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    font-size: 22px;
}
.dashboard-meta .date-range {
    justify-self: center;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-width: 275px;
    padding: 13px 18px;
    text-align: center;
    color: #6b7280;
}
.dashboard-meta .clock {
    justify-self: end;
    color: #850000;
    font-weight: 700;
    font-size: 20px;
}
.panel-shell {
    background: rgba(255,255,255,.85);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow);
}
.grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px; }
.grid.two { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
.metric {
    background: #f8f9fb;
    border: 1px solid #e2e6ee;
    border-radius: 13px;
    min-height: 118px;
    padding: 22px;
}
.metric .label { font-size: 18px; color: #343a40; margin-bottom: 8px; }
.metric .value { font-size: 43px; font-weight: 800; line-height: 1; }
.metric .value.small-value { font-size: 31px; }
.card,
.stat-card {
    background: var(--card);
    border-radius: 13px;
    border: 1px solid #e2e6ee;
    padding: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 22px;
}
.card h2, .card h3, .stat-card h3 { margin: 0 0 18px; }
.stat-card h3 {
    font-size: 26px;
    text-align: center;
    font-weight: 800;
}
.section-heading {
    text-align: center;
    font-size: 27px;
    font-weight: 800;
    margin: 22px 0 22px;
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: white; }
th {
    background: #424242;
    color: white;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
}
th, td {
    border: 1px solid var(--line);
    padding: 13px 12px;
    vertical-align: top;
}
td { font-size: 16px; }
tr:nth-child(even) td { background: #fafafa; }
.td-center { text-align: center; }
.bold { font-weight: 800; }
.badge { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: white; background: var(--muted); }
.badge.ok { background: var(--ok); }
.badge.warn { background: var(--warn); }
.badge.danger { background: var(--danger); }
.btn { display: inline-block; border: 0; border-radius: 6px; padding: 10px 15px; background: var(--brand); color: white; text-decoration: none; cursor: pointer; font-size: 14px; margin: 2px; }
.btn.secondary { background: #374151; }
.btn.danger { background: var(--danger); }
.btn.ok { background: var(--ok); }
.btn.light { background: #e5e7eb; color: #111827; }
input, select, textarea { border: 1px solid #cbd5e1; border-radius: 5px; padding: 10px; font-size: 15px; }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.video-thumb { width: 220px; max-width: 100%; background: #111; border-radius: 8px; }
.defect-img { width: 180px; max-height: 120px; object-fit: contain; border-radius: 8px; border: 1px solid #ddd; background: #f9fafb; }
.alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; background: #fff7ed; border: 1px solid #fdba74; }
.small, .hint { font-size: 12px; color: var(--muted); }

/* ==============================
   KCG-style login / OTP screen
   Upload real assets as:
   assets/plusnode_logo.png
   assets/login_bg.jpg
   ============================== */
.login-page {
    min-height: 100vh;
    overflow: hidden;
    background-color: #eef0f3;
    background-image:
        linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)),
        var(--login-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}
.login-logo-wrap {
    position: fixed;
    top: 42px;
    left: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    color: #222;
}
.login-logo-wrap img {
    max-width: 245px;
    max-height: 78px;
    object-fit: contain;
}
.login-shell {
    position: relative;
    z-index: 2;
    width: min(780px, calc(100vw - 40px));
    margin: 100px auto 0;
}
.product-title-box {
    width: min(610px, 100%);
    margin: 0 auto 4px;
    background: rgba(30,30,30,.95);
    border-radius: 5px;
    color: #fff;
    text-align: center;
    padding: 14px 26px 18px;
}
.product-title-box h1 {
    font-size: 46px;
    line-height: 1;
    margin: 0 0 5px;
    font-weight: 800;
    text-shadow: 2px 2px 1px rgba(0,0,0,.5);
}
.product-subtitle {
    border-top: 3px solid #fff;
    padding-top: 8px;
    font-size: 20px;
    font-weight: 800;
    text-shadow: 1px 1px 1px rgba(0,0,0,.7);
}
.kcg-login-card {
    background: rgba(255,255,255,.95);
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.kcg-card-head {
    text-align: center;
    font-weight: 800;
    padding: 15px;
    border-bottom: 1px solid #d0d0d0;
    font-size: 19px;
}
.kcg-card-body { padding: 22px 20px 20px; }
.kcg-card-body label { display: block; font-size: 20px; margin: 0 0 10px; }
.kcg-card-body input { width: 100%; background: #e8f1ff; height: 46px; margin-bottom: 8px; }
.kcg-card-body .hint { display: block; margin: 0 0 26px; font-size: 16px; color: #6b7280; }
.kcg-btn { font-size: 20px; padding: 10px 17px; border-radius: 5px; }
.login-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    min-height: 78px;
    background: rgba(63,63,63,.96);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-weight: 800;
    font-size: 28px;
    text-shadow: 1px 1px rgba(0,0,0,.5);
}
.login-footer a { color: #5fffe2; font-size: 18px; font-weight: 600; }

@media (max-width: 1050px) {
    .app-header { height: auto; min-height: 76px; align-items: flex-start; padding: 8px 14px; }
    .app-body { padding-top: 132px; }
    .app-logo { min-width: 230px; height: 58px; }
    .app-nav { flex-wrap: wrap; gap: 16px; align-content: center; padding: 8px 0; }
    .app-nav a, .nav-drop-btn { font-size: 16px; padding: 8px 0; }
    .nav-drop-menu { top: 36px; right: auto; left: 0; }
    .dashboard-meta { grid-template-columns: 1fr; font-size: 18px; }
    .dashboard-meta .date-range, .dashboard-meta .clock { justify-self: start; }
    .grid, .grid.two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .login-logo-wrap { top: 20px; left: 18px; }
    .login-logo-wrap img { max-width: 190px; }
    .login-shell { margin-top: 110px; }
    .product-title-box h1 { font-size: 36px; }
    .product-subtitle { font-size: 15px; }
    .login-footer, .app-footer { font-size: 20px; }
}

/* v7 home date range + KCG train summary controls */
.date-range-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px !important;
    min-width: 430px !important;
}
.date-range-form input[type="date"] {
    max-width: 138px;
    padding: 8px;
    font-size: 14px;
}
.date-range-form button,
.date-range-form a {
    border: 0;
    border-radius: 5px;
    background: #e5e7eb;
    color: #111827;
    padding: 8px 10px;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}
.train-table-card {
    background: rgba(255,255,255,.95);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
    margin-top: 22px;
}
.summary-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.summary-header-row p { margin: 0; font-size: 16px; }
.export-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 18px;
}
.table-toolbar select { min-width: 76px; }
.search-label { margin-left: auto; }
.search-label input { min-width: 260px; }
.kcg-summary-table th {
    font-size: 18px;
    position: relative;
    white-space: nowrap;
}
.kcg-summary-table td {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
}
.kcg-summary-table th:nth-child(7),
.kcg-summary-table th:nth-child(8) {
    background: #0ee5c6;
    color: #111827;
}
.inline-form { display: inline-flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.small-btn { padding: 7px 10px !important; font-size: 13px !important; }
code { background: #f3f4f6; padding: 3px 5px; border-radius: 4px; }
@media print {
    .app-nav, .app-footer, .dashboard-meta, .grid, .section-heading, .metric, .stat-card:not(.train-summary-card), .export-actions, .table-toolbar, .small { display: none !important; }
    .page { padding: 0; }
    .panel-shell, .train-table-card { box-shadow: none; padding: 0; }
    .kcg-summary-table th, .kcg-summary-table td { font-size: 12px; padding: 5px; }
}
@media (max-width: 900px) {
    .date-range-form { min-width: 100% !important; }
    .search-label { margin-left: 0; }
    .search-label input { min-width: 180px; }
}

/* v8 session/device alerts */
.flash-alert {
    padding: 12px 14px;
    border-radius: 8px;
    margin: 12px 0;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 15px;
}
.flash-alert.warn {
    border-color: #fbbf24;
    background: #fffbeb;
    color: #92400e;
}
.flash-alert.info {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1e40af;
}

/* v10 security management forms */
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px 16px;
    align-items: end;
}
.admin-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 700;
}
.admin-form-grid input,
.admin-form-grid select {
    width: 100%;
    font-weight: 400;
}
.admin-form-grid .checkline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-bottom: 11px;
}
.admin-form-grid .checkline input { width: auto; }
.admin-form-grid .form-actions { padding-bottom: 2px; }
.user-actions-cell { min-width: 430px; }
.reset-form { margin-top: 8px; }
.reset-form input[type="password"] { width: 150px; padding: 7px 9px; font-size: 13px; }
.alert.warning { background: #fff7ed; border-color: #fdba74; }
.alert.info { background: #eff6ff; border-color: #bfdbfe; }
@media (max-width: 1100px) {
    .admin-form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 640px) {
    .admin-form-grid { grid-template-columns: 1fr; }
    .user-actions-cell { min-width: 280px; }
}

/* V13 Info page */
.info-hero-card h1 { margin: 0 0 8px; font-size: 30px; }
.info-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 18px; margin: 16px 0; }
.profile-form { display: grid; gap: 14px; }
.profile-form label { display: grid; gap: 7px; font-weight: 700; color: #111827; }
.profile-form input, .profile-form select { width: 100%; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 10px; font-size: 15px; background: #eef5ff; }
.profile-form input:disabled { background: #f3f4f6; color: #475569; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.readonly-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 4px; }
.readonly-info-grid div { border: 1px solid #dbe4ee; background: #f8fafc; border-radius: 8px; padding: 10px 12px; }
.readonly-info-grid span { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.readonly-info-grid strong { font-size: 15px; color: #111827; word-break: break-word; }
.status-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px; }
.status-mini-card { border: 1px solid #dbe4ee; background: #f8fafc; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status-mini-card span { font-weight: 700; color: #334155; }
.status-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; color: #fff; }
.status-online { background: #0f8f56; }
.status-offline { background: #dc3545; }
.status-warning { background: #f59e0b; color: #1f2937; }
.status-unknown { background: #334155; }
.compact-table th { width: 220px; }
.muted-text { color: #64748b; font-size: 14px; }
.btn { border: none; border-radius: 6px; padding: 10px 16px; cursor: pointer; font-weight: 700; color: #fff; text-decoration: none; display: inline-block; }
.btn-primary { background: #0d6efd; }
.btn-success { background: #0f8f56; }
.btn:hover { filter: brightness(0.95); }
@media (max-width: 1000px) {
  .info-grid { grid-template-columns: 1fr; }
  .form-grid-2, .readonly-info-grid, .status-card-grid { grid-template-columns: 1fr; }
}

/* V14 Info page role-specific layout */
.page-title-card h1 { margin: 0 0 8px 0; }
.info-grid.two-col { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 18px; }
.form-card { background: rgba(255,255,255,0.84); border: 1px solid #d8dee8; border-radius: 12px; padding: 18px; }
.form-card label { display: block; margin: 10px 0; font-weight: 600; }
.form-card input, .form-card select { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 15px; box-sizing: border-box; }
.compact-table th { width: 18%; }
.status-badge { display: inline-block; min-width: 82px; text-align: center; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: white; }
.status-online { background: #0f8c52; }
.status-offline { background: #6b7280; }
.status-warning { background: #dc2626; }
.status-unknown { background: #334155; }
.small-value { font-size: 24px !important; }
.muted { color: #64748b; font-size: 13px; }
.alert { margin: 12px 0; padding: 12px 16px; border-radius: 8px; border: 1px solid #cbd5e1; background: #eef2ff; }
.alert.success { background: #dcfce7; border-color: #86efac; }
.alert.error { background: #fee2e2; border-color: #fca5a5; }
@media (max-width: 900px) { .info-grid.two-col { grid-template-columns: 1fr; } }

/* V16 readable Info page styling */
.info-page-v16 {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 6px 24px;
}
.info-hero-v16,
.info-card-v16 {
    background: rgba(255,255,255,0.94);
    border: 1px solid #dfe6ef;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.08);
    margin: 18px 0;
}
.info-hero-v16 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
}
.info-hero-v16 h1 {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    color: #020617;
}
.info-hero-v16 p,
.info-section-head-v16 p,
.info-note-v16 {
    margin: 0;
    color: #475569;
    font-size: 15px;
}
.info-refresh-v16 {
    min-width: 190px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: right;
}
.info-refresh-v16 span,
.account-grid-v16 span,
.resource-grid-v16 span,
.system-card-v16 span {
    display: block;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
}
.info-refresh-v16 strong { font-size: 14px; color: #0f172a; }
.info-card-v16 { padding: 24px 26px; }
.info-section-head-v16 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #e5eaf2;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.info-section-head-v16 h2 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: #020617;
}
.profile-layout-v16 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
.profile-form-v16 {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
}
.profile-form-v16 h3 {
    margin: 0 0 14px;
    font-size: 20px;
    color: #0f172a;
}
.form-grid-v16 {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px 16px;
    align-items: end;
}
.form-grid-v16.three { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.form-grid-v16 label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #1f2937;
    font-weight: 700;
    font-size: 14px;
}
.form-grid-v16 input {
    width: 100%;
    min-height: 42px;
    background: #eef5ff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px 11px;
    color: #0f172a;
    font-size: 15px;
}
.form-grid-v16 input:disabled { background: #f1f5f9; color: #475569; }
.info-btn-v16 {
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-top: 16px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    background: #0d6efd;
}
.info-btn-v16.dark { background: #334155; }
.info-btn-v16:hover { filter: brightness(.95); }
.account-grid-v16,
.resource-grid-v16,
.system-card-grid-v16 {
    display: grid;
    gap: 14px;
}
.account-grid-v16 {
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    margin-top: 18px;
}
.account-grid-v16 div,
.resource-grid-v16 div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px 14px;
    min-height: 68px;
}
.account-grid-v16 strong,
.resource-grid-v16 strong {
    color: #0f172a;
    font-size: 15px;
    word-break: break-word;
}
.system-card-grid-v16 {
    grid-template-columns: repeat(4, minmax(210px, 1fr));
}
.system-card-v16 {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    min-height: 118px;
}
.system-card-v16 strong {
    display: block;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.1;
    margin: 7px 0 8px;
}
.system-card-v16 small { color: #64748b; font-size: 13px; }
.resource-grid-v16 {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin-top: 18px;
}
.info-table-wrap-v16 { border-radius: 12px; border: 1px solid #dbe3ee; overflow: hidden; }
.info-table-v16 {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.info-table-v16 th {
    background: #424242;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    padding: 14px 12px;
}
.info-table-v16 td {
    padding: 14px 12px;
    border: 1px solid #e2e8f0;
    font-size: 16px;
    vertical-align: middle;
    background: rgba(255,255,255,.96);
}
.info-table-v16 td:nth-child(2),
.info-table-v16 td:nth-child(3),
.info-table-v16 td:nth-child(4) { text-align: center; }
.info-table-v16 td span { color: #64748b; font-size: 13px; }
.info-alert-v16 {
    margin: 14px 0;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
}
.info-alert-v16.success { background: #dcfce7; border-color: #86efac; color: #14532d; }
.info-alert-v16.error { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.info-page-v16 .status-badge {
    min-width: 92px;
    padding: 7px 12px;
    font-size: 12px;
}
@media (max-width: 1250px) {
    .form-grid-v16 { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .form-grid-v16.three { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .account-grid-v16 { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
    .system-card-grid-v16 { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
    .resource-grid-v16 { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 760px) {
    .info-hero-v16 { flex-direction: column; align-items: flex-start; }
    .info-refresh-v16 { width: 100%; text-align: left; }
    .form-grid-v16, .form-grid-v16.three, .account-grid-v16, .system-card-grid-v16, .resource-grid-v16 { grid-template-columns: 1fr; }
    .info-card-v16 { padding: 18px; }
}

/* ================= V18 Wagon inspection review workflow ================= */
.page-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}.hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.train-hero-card{padding:24px 28px}.train-static-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:18px}.train-static-grid>div{background:#f7f9fc;border:1px solid #dce4ef;border-radius:10px;padding:12px 14px}.train-static-grid span{display:block;color:#50627d;font-size:13px;margin-bottom:5px}.train-static-grid strong{display:block;color:#07152c;font-size:18px;line-height:1.25;word-break:break-word}.train-remarks{margin-top:12px;background:#fff8e5;border:1px solid #ead79b;border-radius:10px;padding:10px 14px}.train-remarks span{font-size:13px;color:#695c28;display:block}.wagon-card{overflow:auto}.wagon-table th,.wagon-table td{vertical-align:top}.wagon-pos{font-size:17px}.clip-cell{min-width:120px}.link-btn{background:none;border:0;color:#0d6efd;text-decoration:underline;font-weight:700;cursor:pointer;font-size:15px;padding:4px}.link-btn:hover{color:#084298}.muted{color:#6c7686}.hint-text{margin-top:12px;color:#56657d}.defect-card-inline{border:1px solid #d7e1ee;border-radius:10px;background:#fff;padding:10px;margin-bottom:12px;max-width:260px}.defect-title-row{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}.image-open-btn{border:0;background:transparent;padding:0;cursor:pointer;display:block}.image-open-btn:hover .defect-img{outline:3px solid #0d6efd}.defect-img{max-width:180px;max-height:140px;border-radius:8px;border:1px solid #ccd6e2;object-fit:contain;background:#f3f5f8}.manual-img{max-width:150px;max-height:110px;border-radius:8px;border:1px solid #ccd6e2;margin-top:8px}.manual-defect-item{border:1px solid #ead79b;background:#fffdf4;border-radius:10px;padding:10px;margin-bottom:10px}.validation-state{margin-top:8px}.badge.pending{background:#344054;color:#fff}.badge.ok{background:#138a50;color:#fff}.badge.danger{background:#dc3545;color:#fff}.badge.warn{background:#ffbf00;color:#18212f}.modal-overlay{position:fixed;z-index:3000;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:22px}.modal-box{background:#fff;border-radius:14px;box-shadow:0 22px 70px rgba(0,0,0,.35);max-height:94vh;overflow:auto}.clip-modal-box{width:min(1180px,96vw)}.ai-modal-box{width:min(1100px,96vw)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid #dce4ef}.modal-head h3{margin:0}.modal-close{border:0;background:#edf1f6;border-radius:8px;font-size:28px;line-height:1;cursor:pointer;padding:4px 12px}.clip-stage-wrap{position:relative;background:#111;margin:18px auto 10px;max-width:1100px;width:calc(100% - 36px);display:flex;justify-content:center}.clip-modal-video{max-width:100%;max-height:62vh;background:#000}.clip-draw-canvas{position:absolute;left:50%;top:0;transform:translateX(-50%);cursor:crosshair;max-height:62vh}.modal-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 22px;border-top:1px solid #eef1f5}.manual-save-grid{display:grid;grid-template-columns:150px 1fr 90px 1fr auto;gap:10px;align-items:center;padding:14px 22px 22px}.manual-save-grid input,.manual-save-grid select,.ai-validation-panel textarea{border:1px solid #bfcadd;border-radius:8px;padding:10px;font-size:15px}.ai-image-wrap{padding:18px;background:#f5f7fb;text-align:center}.ai-image-wrap img{max-width:100%;max-height:68vh;object-fit:contain;border-radius:8px;border:1px solid #d6deeb;background:#fff}.ai-validation-panel{padding:14px 22px 22px;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}.ai-validation-panel textarea{grid-column:1/2;resize:vertical}.player-control-card{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.full-train-grid{display:grid;grid-template-columns:1fr;gap:18px}.full-video-card h3{margin-top:0}.full-train-video{width:100%;max-height:58vh;background:#000;border-radius:10px}.compact-player-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}@media (min-width:1200px){.full-train-grid{grid-template-columns:repeat(3,1fr)}.full-train-video{max-height:36vh}}@media (max-width:800px){.manual-save-grid{grid-template-columns:1fr}.ai-validation-panel{grid-template-columns:1fr}.page-title-row{display:block}.hero-actions{margin-top:12px}.defect-img{max-width:140px}}

/* ================= V19 Wagon inspection player fixes ================= */
body.modal-open { overflow: hidden; }
.wagon-table-v19 th { position: sticky; top: 0; z-index: 2; }
.wagon-table-v19 .clip-cell-v19 { min-width: 220px; }
.clip-thumb {
    position: relative;
    width: 210px;
    height: 128px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    overflow: hidden;
    background: #111827;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(15,23,42,.12);
    display: block;
}
.clip-thumb:focus,
.clip-thumb:hover { outline: 3px solid #0d6efd; outline-offset: 2px; }
.clip-thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    pointer-events: none;
}
.clip-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.72));
    pointer-events: none;
}
.clip-thumb-overlay span {
    background: rgba(13,110,253,.95);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 999px;
}
.defect-cell-v19 { min-width: 300px; }
.manual-cell-v19 { min-width: 250px; }
.defect-card-v19 {
    max-width: 280px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
}
.image-open-btn {
    position: relative;
    display: inline-block;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.image-open-btn:focus,
.image-open-btn:hover { outline: 3px solid #0d6efd; outline-offset: 3px; border-radius: 8px; }
.defect-img-v19 {
    width: 210px;
    max-width: 100%;
    height: 150px;
    object-fit: contain;
    background: #f8fafc;
}
.open-image-hint {
    display: block;
    margin-top: 5px;
    color: #0d6efd;
    font-size: 12px;
    font-weight: 800;
}
.modal-overlay {
    position: fixed;
    z-index: 10000;
    inset: 0;
    background: rgba(0,0,0,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.modal-box {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 22px 80px rgba(0,0,0,.42);
    max-height: 96vh;
    overflow: auto;
}
.clip-modal-box { width: min(1300px, 98vw); }
.ai-modal-box { width: min(1200px, 98vw); }
.clip-stage-wrap {
    position: relative;
    background: #000;
    margin: 16px auto 10px;
    width: calc(100% - 32px);
    max-width: 1240px;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}
.clip-modal-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: #000;
}
.clip-draw-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: crosshair;
    z-index: 2;
}
.modal-controls-v19 select,
.individual-player-controls-v19 select {
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 10px;
    background: #fff;
}
.ai-image-wrap img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #d6deeb;
    background: #fff;
}

/* Full train player vertical layout */
.full-player-hero-v19 { margin-bottom: 18px; }
.full-train-stack-v19 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 8px 24px;
}
.full-video-card-v19 {
    padding: 20px;
    width: 100%;
}
.full-video-head-v19 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.full-video-head-v19 h3 { margin: 0 0 4px; font-size: 24px; }
.individual-player-controls-v19 {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.single-train-video-v19 {
    width: 100%;
    height: min(70vh, 760px);
    min-height: 430px;
    display: block;
    object-fit: contain;
    background: #000;
    border-radius: 12px;
    border: 1px solid #111827;
}
.no-download-video::-webkit-media-controls-enclosure { overflow: hidden; }
@media (max-width: 900px) {
    .clip-thumb { width: 170px; height: 105px; }
    .single-train-video-v19 { min-height: 260px; height: 52vh; }
    .full-video-card-v19 { padding: 14px; }
    .individual-player-controls-v19 { width: 100%; }
    .clip-modal-box, .ai-modal-box { width: 99vw; }
}

/* ================= Wagon v20 table layout ================= */
.wagon-table-v20 {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
.wagon-table-v20 th:nth-child(1) { width: 90px; }
.wagon-table-v20 th:nth-child(2),
.wagon-table-v20 th:nth-child(3),
.wagon-table-v20 th:nth-child(4) { width: 230px; }
.wagon-table-v20 th:nth-child(5),
.wagon-table-v20 th:nth-child(6) { width: 290px; }
.wagon-table-v20 th:nth-child(7) { width: 140px; }
.wagon-table-v20 td,
.wagon-table-v20 th {
    vertical-align: middle;
}
.wagon-detail-row-v20 td {
    min-height: 260px;
    padding: 14px 12px;
}
.wagon-cont-row-v20 td {
    border-top: 1px dashed #d8e0ec;
}
.wagon-pos-v20,
.final-status-cell-v20,
.clip-cell-v20 {
    text-align: center;
    background: rgba(255,255,255,.72);
}
.wagon-pos-v20 strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}
.final-status-cell-v20 .badge {
    font-size: 13px;
    padding: 9px 13px;
}
.clip-thumb-card-v20 {
    width: 210px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
}
.clip-thumb-card-v20:focus .clip-open-btn-v20,
.clip-thumb-card-v20:hover .clip-open-btn-v20 {
    background: #0b5ed7;
}
.clip-thumb-video-v20 {
    width: 210px;
    height: 165px;
    border-radius: 10px;
    object-fit: cover;
    background: #111;
    border: 1px solid #d5deea;
    box-shadow: 0 2px 8px rgba(15,23,42,.13);
}
.clip-open-btn-v20 {
    width: 210px;
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: #0d6efd;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}
.defect-cell-v20,
.manual-cell-v20 {
    text-align: center;
}
.defect-tile-v20 {
    width: 260px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #cfd9e8;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.defect-tile-v20:hover {
    box-shadow: 0 8px 22px rgba(15,23,42,.18);
    transform: translateY(-1px);
}
.defect-tile-head-v20 {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px 5px;
    background: #fff;
    color: #111827;
}
.defect-tile-head-v20.centered {
    justify-content: center;
}
.defect-tile-head-v20 strong {
    font-size: 18px;
    line-height: 1.05;
    text-align: left;
}
.defect-tile-head-v20 span {
    font-size: 15px;
    color: #111827;
    white-space: nowrap;
}
.defect-tile-img-v20 {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: #f8fafc;
    border-top: 1px solid #e4eaf3;
    border-bottom: 1px solid #e4eaf3;
}
.defect-image-missing-v20 {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #64748b;
}
.defect-footer-v20,
.manual-footer-v20 {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #111;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    background: #f8fafc;
}
.defect-footer-v20.ok { background: #168b55; border-color: #168b55; color: #fff; }
.defect-footer-v20.danger { background: #e3344c; border-color: #e3344c; color: #fff; }
.defect-footer-v20.pending { background: #f8fafc; border-color: #111; color: #111; }
.manual-footer-v20 { background: #ffc107; border-color: #111; color: #111; }
.manual-footer-v20.modal-status { max-width: 260px; margin: 0 auto 10px; }
.defect-status-line-v20 {
    font-size: 13px;
    font-weight: 700;
    padding: 5px 8px 7px;
}
.defect-status-line-v20.ok { color: #168b55; }
.defect-status-line-v20.danger { color: #e3344c; }
.defect-status-line-v20.warn { color: #b7791f; }
.defect-status-line-v20.pending { color: #344054; }
.defect-comment-v20 {
    padding: 0 10px 8px;
    font-size: 12px;
    color: #334155;
    text-align: left;
    word-break: break-word;
}
.defect-empty-v20,
.manual-empty-v20 {
    min-height: 236px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    text-align: center;
}
.manual-empty-v20 small { max-width: 230px; line-height: 1.35; }
.ai-image-wrap img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #d6deeb;
    background: #fff;
}
@media (max-width: 1200px) {
    .wagon-table-v20 { min-width: 1500px; }
    .table-wrap { overflow-x: auto; }
}
@media (max-width: 900px) {
    .clip-thumb-card-v20, .clip-thumb-video-v20, .clip-open-btn-v20 { width: 190px; }
    .clip-thumb-video-v20 { height: 145px; }
    .defect-tile-v20 { width: 240px; }
    .defect-tile-img-v20 { height: 155px; }
}