/* === CiCC 6S TV Board — Large Format Display CSS === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Segoe UI',Arial,Helvetica,sans-serif;background:#0d1117;color:#f1f5f9}
#app{width:100vw;height:100vh;display:flex;flex-direction:column;background:#0d1117}
.board-hidden{opacity:0!important;pointer-events:none}
.photo-progress i.running{animation-duration:5s!important}
#loadingOverlay{position:fixed;inset:0;background:#0d1117;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s}
.loader{text-align:center}.loader-ring{width:80px;height:80px;margin:0 auto 20px;border:6px solid rgba(245,158,11,.15);border-top-color:#f59e0b;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader p{font-size:24px;color:#64748b;letter-spacing:2px}
#headerBar{display:flex;align-items:center;justify-content:space-between;padding:12px 32px;background:linear-gradient(135deg,#0a0e27 0%,#1a1f4e 50%,#0a0e27 100%);border-bottom:2px solid rgba(245,158,11,.3);flex-shrink:0;height:72px}
.header-left{display:flex;align-items:center;gap:16px}.header-logo{font-size:36px}
#headerBar h1{font-size:28px;font-weight:800;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px}
.header-location{font-size:20px;font-weight:600;color:#94a3b8;padding:4px 16px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.header-right{display:flex;align-items:center;gap:20px}
.header-time{font-size:32px;font-weight:700;color:#f1f5f9;font-variant-numeric:tabular-nums}
.header-status{font-size:20px;color:#4ade80}.header-status.offline{color:#ef4444}
.tag-spotlight{position:fixed;z-index:10010;left:50%;top:88px;width:min(1100px,90vw);display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:18px;padding:18px 22px;border:1px solid rgba(96,165,250,.55);border-radius:17px;background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,58,138,.96));color:#fff;text-align:left;box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 35px rgba(59,130,246,.18);cursor:pointer;animation:spotIn .45s cubic-bezier(.2,.9,.2,1)}.tag-spotlight.hide{animation:spotOut .8s forwards}.spot-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:15px;background:rgba(255,255,255,.1);font-size:34px}.tag-spotlight small{display:block;color:#93c5fd;font-size:12px;font-weight:900;letter-spacing:.1em}.tag-spotlight strong{display:block;margin:5px 0;font-size:21px}.tag-spotlight em{color:#cbd5e1;font-size:14px;font-style:normal}.spot-open{padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.1);font-size:13px;font-weight:800}@keyframes spotIn{from{opacity:0;transform:translate(-50%,-25px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes spotOut{to{opacity:0;transform:translate(-50%,-16px) scale(.98)}}
.header-data-source{padding:5px 11px;border:1px solid;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em}.header-data-source.live{color:#86efac;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}.header-data-source.derived{color:#93c5fd;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.12)}.header-data-source.sample{color:#fcd34d;border-color:rgba(245,158,11,.42);background:rgba(245,158,11,.11)}
.tv-menu-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.07);color:#f8fafc;font-size:22px;cursor:pointer}.tv-menu-button:hover,.tv-menu-button:focus-visible{border-color:#f59e0b;background:rgba(245,158,11,.14);outline:none}.tv-menu-backdrop{position:fixed;inset:0;z-index:10020;display:flex;justify-content:flex-end;background:rgba(2,6,23,.72);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .24s}.tv-menu-backdrop.open{opacity:1;pointer-events:auto}.tv-menu-drawer{width:min(720px,92vw);height:100%;display:flex;flex-direction:column;padding:26px;background:linear-gradient(160deg,#111827,#0b1220);border-left:1px solid rgba(148,163,184,.22);box-shadow:-28px 0 80px rgba(0,0,0,.45);transform:translateX(30px);transition:transform .24s}.tv-menu-backdrop.open .tv-menu-drawer{transform:none}.tv-menu-drawer>header,.tv-menu-drawer>footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.tv-menu-drawer>header small{color:#60a5fa;font-size:12px;font-weight:800;letter-spacing:.12em}.tv-menu-drawer h2{margin-top:5px;font-size:30px}.tv-menu-drawer button{border:1px solid #334155;border-radius:10px;background:#1e293b;color:#fff;padding:11px 15px;font-size:15px;font-weight:700;cursor:pointer}.tv-menu-drawer>header>button{width:46px;height:46px;padding:0;font-size:20px}.tv-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1;align-content:start;overflow:auto;margin:22px 0;padding-right:4px}.tv-menu-item{display:flex;align-items:center;gap:13px;min-height:68px;text-align:left}.tv-menu-item .menu-index{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#0f172a;color:#93c5fd;font-size:12px}.tv-menu-item strong{font-size:16px}.tv-menu-item.active{border-color:#f59e0b;background:rgba(245,158,11,.13)}.tv-menu-drawer>footer{padding-top:16px;border-top:1px solid rgba(148,163,184,.16);color:#64748b;font-size:13px}.tv-menu-drawer>footer button{border-color:#2563eb;background:#2563eb}@media(max-width:700px){.tv-menu-grid{grid-template-columns:1fr}.tv-menu-drawer{padding:18px}.tv-menu-drawer>footer span{display:none}}
.tv-timing-config{margin-top:16px;padding:14px;border:1px solid rgba(59,130,246,.38);border-radius:13px;background:linear-gradient(135deg,rgba(30,58,138,.28),rgba(15,23,42,.8))}.tv-timing-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.tv-timing-title small{display:block;color:#60a5fa;font-size:9px;font-weight:900;letter-spacing:.12em}.tv-timing-title strong{display:block;margin-top:3px;color:#fff;font-size:17px}.tv-timing-title button{padding:6px 9px;font-size:10px}.tv-timing-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:11px 0}.tv-timing-fields label{padding:9px;border-radius:9px;background:#0b1322;color:#94a3b8;font-size:10px;font-weight:800}.tv-timing-fields span{display:flex;align-items:center;gap:5px;margin-top:6px;color:#cbd5e1;white-space:nowrap}.tv-timing-fields input{width:58px;padding:6px;border:1px solid #334155;border-radius:6px;background:#111827;color:#fff;font:900 15px ui-monospace,monospace;text-align:center}.tv-menu-drawer .tv-timing-save{width:100%;padding:9px;border-color:#2563eb;background:#2563eb;font-size:12px}@media(max-width:700px){.tv-timing-fields{grid-template-columns:1fr}}
#pageContainer{flex:1;position:relative;overflow:hidden}
.board-page{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:scale(.97) translateY(8px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);pointer-events:none}
.board-page.active{opacity:1;transform:scale(1) translateY(0);pointer-events:all}
.page-content{flex:1;padding:20px 32px 16px;display:flex;flex-direction:column;overflow:hidden}
.page-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-shrink:0}
.page-title{font-size:26px;font-weight:700;color:#f59e0b}
#navBar{display:flex;align-items:center;justify-content:space-between;padding:10px 32px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;height:52px}
.nav-dots{display:flex;align-items:center;gap:6px}
.nav-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15);cursor:pointer;transition:all .3s;border:1px solid transparent}
.nav-dot.active{background:#f59e0b;border-color:#fbbf24;box-shadow:0 0 12px rgba(245,158,11,.5)}
.nav-dot:hover{background:rgba(245,158,11,.4)}
.nav-info{display:flex;align-items:center;gap:12px;font-size:16px;color:#64748b}
.traffic-countdown{position:relative;display:grid;place-items:center;width:42px;height:42px;border:2px solid currentColor;border-radius:50%;background:#07111f;box-shadow:0 0 0 3px rgba(255,255,255,.04),0 0 16px currentColor;transition:color .2s,box-shadow .2s}.traffic-countdown i{position:absolute;inset:4px;border-radius:50%;background:currentColor;opacity:.2}.traffic-countdown b{position:relative;color:#fff;font:900 17px ui-monospace,monospace}.traffic-countdown.green{color:#22c55e}.traffic-countdown.amber{color:#f59e0b;animation:trafficWarn .8s ease-in-out infinite}.traffic-countdown.red{color:#ef4444;animation:trafficUrgent .45s ease-in-out infinite}.traffic-countdown.paused{color:#64748b;box-shadow:0 0 0 3px rgba(255,255,255,.03)}@keyframes trafficWarn{50%{box-shadow:0 0 0 3px rgba(245,158,11,.12),0 0 24px #f59e0b}}@keyframes trafficUrgent{50%{transform:scale(1.08);box-shadow:0 0 0 4px rgba(239,68,68,.18),0 0 30px #ef4444}}
.nav-sep{color:rgba(255,255,255,.1)}
/* PAGE 1: KPI Dashboard */
.kpi-top-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px;flex-shrink:0}
.kpi-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 16px;text-align:center;position:relative;overflow:hidden}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kpi-card:nth-child(1)::before{background:#3b82f6}
.kpi-card:nth-child(2)::before{background:#22c55e}
.kpi-card:nth-child(3)::before{background:#f59e0b}
.kpi-card:nth-child(4)::before{background:#ef4444}
.kpi-card:nth-child(5)::before{background:#a78bfa}
.kpi-card:nth-child(6)::before{background:#60a5fa}
.kpi-num{font-size:52px;font-weight:800;line-height:1.1;margin-bottom:4px}
.kpi-card:nth-child(1) .kpi-num{color:#60a5fa}
.kpi-card:nth-child(2) .kpi-num{color:#4ade80}
.kpi-card:nth-child(3) .kpi-num{color:#fbbf24}
.kpi-card:nth-child(4) .kpi-num{color:#f87171}
.kpi-card:nth-child(5) .kpi-num{color:#c084fc}
.kpi-card:nth-child(6) .kpi-num{color:#93c5fd}
.kpi-label{font-size:16px;color:#94a3b8;font-weight:600;letter-spacing:1px}
.kpi-sub{font-size:14px;color:#64748b;margin-top:4px}
.kpi-bottom-row{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;flex:1;min-height:0}
.kpi-chart-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column}
.box-title{font-size:16px;font-weight:700;color:#94a3b8;margin-bottom:8px;flex-shrink:0}
#radarContainer canvas{flex:1;width:100%!important;height:auto!important;max-height:340px}
.tag-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.tag-list-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.03);border-radius:8px;border-left:3px solid;font-size:15px}
.tag-list-item .tl-code{font-weight:700;color:#e2e8f0;min-width:130px}
.tag-list-item .tl-s{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px}
.tag-list-item .tl-desc{flex:1;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-list-item .tl-status{font-size:13px;font-weight:600;min-width:80px;text-align:right}
/* PAGE 2: Tag Board */
.page-filters{display:flex;align-items:center;gap:8px}
.filter-btn{padding:6px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#94a3b8;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.filter-btn:hover{border-color:rgba(245,158,11,.4);color:#fcd34d}
.filter-btn.active{background:rgba(245,158,11,.2);border-color:#f59e0b;color:#fcd34d}
.filter-sep{color:rgba(255,255,255,.08);font-size:20px}
.tag-table-wrapper,.plan-table-wrapper{flex:1;overflow-y:auto}
.tag-table,.plan-table{width:100%;border-collapse:collapse;font-size:17px}
.tag-table thead,.plan-table thead{position:sticky;top:0;z-index:2}
.tag-table th,.plan-table th{background:#1a1f4e;color:#94a3b8;font-weight:700;font-size:15px;padding:12px 10px;text-align:left;border-bottom:2px solid rgba(245,158,11,.2)}
.tag-table td,.plan-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.04);color:#e2e8f0}
.tag-table tbody tr:hover{background:rgba(255,255,255,.04)}
.tag-table .td-code{font-weight:700;font-size:15px}
.tag-badge{display:inline-block;padding:2px 12px;border-radius:6px;font-weight:700;font-size:13px}
.tag-badge.yellow{background:rgba(245,158,11,.2);color:#fcd34d}
.tag-badge.red{background:rgba(239,68,68,.2);color:#fca5a5}
.status-badge{display:inline-block;padding:3px 12px;border-radius:6px;font-weight:600;font-size:13px}
.status-badge.open{background:rgba(245,158,11,.15);color:#fcd34d}
.status-badge.processing{background:rgba(59,130,246,.15);color:#93c5fd}
.status-badge.closed{background:rgba(34,197,94,.15);color:#86efac}
/* PAGE 3: Assessment */
.assess-kpi-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:14px;flex-shrink:0}
.assess-kpi-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 10px;text-align:center}
.assess-kpi-card .ak-num{font-size:36px;font-weight:800}.assess-kpi-card .ak-label{font-size:13px;color:#64748b;font-weight:600}
.assess-table-wrapper{flex:1;overflow-y:auto}
.assess-table{width:100%;border-collapse:collapse;font-size:16px}
.assess-table th{background:#1a1f4e;color:#94a3b8;font-weight:700;font-size:14px;padding:10px;text-align:left;border-bottom:2px solid rgba(245,158,11,.2)}
.assess-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:#e2e8f0}
.assess-bar{height:20px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.assess-bar-fill{height:100%;border-radius:4px;transition:width 1s ease}
.assess-bar-fill.self{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.assess-bar-fill.cross{background:linear-gradient(90deg,#22c55e,#4ade80)}
.assess-bar-fill.expert{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.assess-bar-fill.avg{background:linear-gradient(90deg,#a78bfa,#c084fc)}
/* PAGE 4: Photos */
.photo-showcase{flex:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto 4px;gap:10px;width:100%;min-height:0;padding:0 2.2vw 12px}
.photo-casebar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:10px 14px;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:rgba(15,23,42,.72)}.photo-casebar>div:first-child{display:flex;align-items:center;gap:10px}.photo-casebar span{padding:5px 8px;border-radius:7px;background:#1d4ed8;color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em}.photo-casebar strong{font:900 15px ui-monospace,monospace;color:#bfdbfe}.photo-case-title{overflow:hidden;color:#fff;font-size:18px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.photo-casebar button{padding:8px 11px;border:1px solid #334155;border-radius:8px;background:#1e293b;color:#e2e8f0;font-weight:800;cursor:pointer}
.photo-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;min-height:0}
.photo-pair:after{content:'⇆';position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;border:4px solid #0f172a;border-radius:50%;background:#f8fafc;color:#0f172a;font-size:24px;font-weight:900;transform:translate(-50%,-35%);box-shadow:0 8px 25px rgba(0,0,0,.4)}
.photo-before,.photo-after{display:flex;min-height:0;flex-direction:column;text-align:center}
.photo-label{font-size:16px;font-weight:800;margin-bottom:7px}
.photo-before .photo-label{color:#f87171}.photo-after .photo-label{color:#4ade80}
.photo-frame{min-height:0;height:100%;aspect-ratio:4/3;background:#020617;border:2px solid rgba(255,255,255,.1);border-radius:13px;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo-before .photo-frame{border-color:rgba(248,113,113,.45)}.photo-after .photo-frame{border-color:rgba(74,222,128,.45)}
.photo-frame img{width:100%;height:100%;object-fit:contain}
.photo-placeholder{color:#475569;font-size:20px}
.photo-storyline{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:12px}.photo-caption{overflow:hidden;font-size:16px;font-weight:700;color:#e2e8f0;text-overflow:ellipsis;white-space:nowrap}.photo-facts{display:flex;justify-content:flex-end;gap:7px}.photo-facts span{padding:6px 9px;border-radius:8px;background:#172033;color:#cbd5e1;font-size:10px;font-weight:800}.photo-filmstrip{display:flex;justify-content:center;gap:8px;min-height:42px}.photo-thumb{position:relative;width:76px;overflow:hidden;border:2px solid transparent;border-radius:8px;background:#111827;cursor:pointer;opacity:.55}.photo-thumb.active{border-color:#f59e0b;opacity:1}.photo-thumb img{width:100%;height:38px;object-fit:cover}.photo-thumb b{position:absolute;right:3px;bottom:2px;padding:1px 3px;border-radius:3px;background:rgba(2,6,23,.8);color:#fff;font-size:7px}.photo-progress{overflow:hidden;border-radius:99px;background:#1e293b}.photo-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#3b82f6,#22c55e)}.photo-progress i.running{animation:photoRun 12s linear forwards}@keyframes photoRun{to{width:100%}}.photo-showcase.live-pulse .photo-casebar{animation:gembaPulse .8s ease-in-out 3}@keyframes gembaPulse{50%{border-color:#f59e0b;box-shadow:0 0 32px rgba(245,158,11,.38)}}
/* PAGE 5: Plan */
.plan-table td{font-size:14px;vertical-align:middle}
.plan-gantt{display:flex;gap:2px}.plan-gantt-bar{flex:1;height:22px;border-radius:3px;background:rgba(255,255,255,.06)}
.plan-gantt-bar.done{background:#22c55e}
.plan-gantt-bar.active{background:#f59e0b;animation:pulseGantt 1.5s infinite}
.plan-gantt-bar.pending{background:rgba(255,255,255,.06)}
@keyframes pulseGantt{0%,100%{opacity:1}50%{opacity:.5}}
.plan-current{margin-top:10px;padding:10px 16px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:8px;font-size:18px;font-weight:600;color:#fcd34d;text-align:center;flex-shrink:0}
.plan-master-meta{display:grid;grid-template-columns:2fr 1.25fr 1.1fr 1fr;gap:10px;margin-top:10px;flex-shrink:0}.plan-master-meta>div{min-width:0;padding:13px 16px;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:linear-gradient(145deg,rgba(30,41,59,.92),rgba(15,23,42,.82));display:flex;flex-direction:column;gap:4px}.plan-master-meta small{font-size:11px;letter-spacing:.11em;color:#94a3b8;font-weight:800}.plan-master-meta strong{font-size:18px;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plan-master-meta span{font-size:13px;color:#94a3b8}.pm-identity{border-color:rgba(245,158,11,.38)!important}.pm-identity strong{color:#fbbf24;font-size:21px}.pm-progress strong{font-size:24px;color:#4ade80}.pm-progress div,.plan-line{height:6px;border-radius:99px;background:rgba(148,163,184,.16);overflow:hidden}.pm-progress i,.plan-line i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#22c55e)}.pm-empty{grid-column:1/-1;text-align:center}.pm-empty strong{color:#fbbf24}.plan-live-row td{padding:14px 12px}.plan-live-row td>strong,.plan-live-row td small{display:block}.plan-live-row td small{color:#64748b;margin-top:4px}.plan-due{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px}.plan-due b{color:#4ade80}.plan-due.overdue span{color:#f87171;font-weight:800}.plan-empty-row{text-align:center!important;padding:36px!important;color:#94a3b8!important}
/* PAGE 6: Forms */
.forms-grid{flex:1;overflow-y:auto}.forms-group{margin-bottom:14px}
.forms-group-title{font-size:15px;font-weight:700;color:#94a3b8;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.06)}
.forms-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.form-card{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;gap:4px;color:inherit;text-align:left;font:inherit}
.form-card:hover{background:rgba(255,255,255,.08);border-color:rgba(245,158,11,.3);transform:translateY(-2px)}
.form-card .fc-icon{font-size:26px;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.form-card .fc-code{font-size:10px;color:#64748b;font-weight:600}
.form-card .fc-name{font-size:13px;font-weight:700;color:#e2e8f0}
.form-card .fc-desc{font-size:11px;color:#64748b;line-height:1.3}.forms-count{font-size:14px;color:#64748b;font-weight:600}
.fc-footer{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:5px}.fc-footer b{margin-left:auto;color:#93c5fd;font-size:11px}.fc-source{font-size:9px;font-weight:900;letter-spacing:.04em}.fc-source.live{color:#4ade80}.fc-source.derived{color:#60a5fa}.fc-source.sample{color:#64748b}
/* PAGE 7: OKR */
.okr-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;flex:1;align-content:start}
.okr-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;border-top:3px solid #f59e0b}
.okr-card .okr-objective{font-size:22px;font-weight:700;color:#f1f5f9;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.okr-kr{margin-bottom:10px}.okr-kr .kr-title{font-size:16px;color:#94a3b8;margin-bottom:4px}
.okr-kr .kr-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.okr-kr .kr-fill{height:100%;border-radius:4px;transition:width 1s}
.okr-kr .kr-meta{display:flex;justify-content:space-between;font-size:13px;color:#64748b;margin-top:2px}
/* PAGE 8: Performance */
.perf-top-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;flex-shrink:0}
.perf-table-wrapper{flex:1;overflow-y:auto}
.perf-table{width:100%;border-collapse:collapse;font-size:18px}
.perf-table th{background:#1a1f4e;color:#94a3b8;font-weight:700;padding:10px;text-align:left;border-bottom:2px solid rgba(245,158,11,.2)}
.perf-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.04);color:#e2e8f0}
.perf-table .rank-badge{display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-weight:700;font-size:14px}
.rank-1{background:rgba(255,215,0,.2);color:#ffd700}
.rank-2{background:rgba(192,192,192,.2);color:#c0c0c0}
.rank-3{background:rgba(205,127,50,.2);color:#cd7f32}
.perf-bar{height:20px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.perf-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#f59e0b,#fbbf24);transition:width 1s}
/* PAGE 9: Kaizen */
.kaizen-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;align-content:start;overflow-y:auto}
.kaizen-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;border-left:4px solid #22c55e;display:flex;flex-direction:column}
.kaizen-card .kz-title{font-size:18px;font-weight:700;color:#e2e8f0;margin-bottom:6px}
.kaizen-card .kz-before{font-size:14px;color:#f87171;margin-bottom:4px}
.kaizen-card .kz-after{font-size:14px;color:#4ade80;margin-bottom:6px}
.kaizen-card .kz-meta{display:flex;gap:12px;font-size:13px;color:#64748b;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.kaizen-card .kz-badge{display:inline-block;padding:2px 10px;border-radius:6px;font-size:12px;font-weight:600}
.kaizen-card .kz-badge.approved{background:rgba(34,197,94,.2);color:#86efac}
.kaizen-card .kz-badge.pending{background:rgba(245,158,11,.2);color:#fcd34d}
/* Skeleton */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
/* Responsive */
.check-assignment-table{width:100%;border-collapse:collapse;font-size:16px}.check-assignment-table th{padding:12px;background:#1a1f4e;color:#94a3b8;text-align:left}.check-assignment-table td{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#e2e8f0}.check-assignment-table tr[data-assignment]{cursor:pointer}.check-assignment-table tr[data-assignment]:hover{background:rgba(59,130,246,.09)}.check-assignment-table td strong,.check-assignment-table td small{display:block}.check-assignment-table td small{margin-top:3px;color:#64748b}.check-status{display:inline-flex;padding:5px 9px;border-radius:99px;background:rgba(100,116,139,.15);color:#94a3b8;font-weight:700}.check-status.pending{background:rgba(245,158,11,.14);color:#fbbf24}.check-status.in_progress{background:rgba(59,130,246,.14);color:#60a5fa}.check-status.completed{background:rgba(34,197,94,.14);color:#4ade80}.check-detail>small{color:#60a5fa;font-weight:800}.check-detail h2{margin:6px 0 18px}.check-detail>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #334155}.check-detail span{color:#94a3b8}.check-detail button{margin-top:18px;padding:10px 16px}

.act-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}.act-kpis>div{padding:10px 14px;border:1px solid rgba(148,163,184,.14);border-radius:10px;background:rgba(30,41,59,.72);display:flex;align-items:center;justify-content:space-between}.act-kpis small{color:#94a3b8;font-weight:800;letter-spacing:.06em}.act-kpis b{font-size:25px;color:#f8fafc}.act-kpis .danger{border-color:rgba(239,68,68,.38);background:rgba(127,29,29,.16)}.act-kpis .danger b{color:#f87171}.act-table{width:100%;border-collapse:collapse;font-size:15px}.act-table th{padding:10px;background:#1a1f4e;color:#94a3b8;text-align:left}.act-table td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.055);color:#e2e8f0}.act-table tr{cursor:pointer}.act-table tr:hover{background:rgba(245,158,11,.07)}.act-table td strong,.act-table td small{display:block}.act-table td small{max-width:410px;margin-top:3px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.act-overdue{color:#f87171!important}.act-status{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.act-status span{color:#cbd5e1}.act-status b{color:#4ade80}.act-line{height:6px;border-radius:99px;background:rgba(148,163,184,.16);overflow:hidden}.act-line i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#22c55e)}

.perf-drill-row{cursor:pointer}.perf-drill-row:hover{background:rgba(59,130,246,.08)}.kaizen-card[data-kaizen-tag]{cursor:pointer;transition:transform .18s,border-color .18s}.kaizen-card[data-kaizen-tag]:hover{transform:translateY(-3px);border-color:rgba(96,165,250,.55)}

.tag-cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 15px}.tag-cycle>div{padding:11px;border:1px solid #334155;border-radius:9px;background:rgba(15,23,42,.7)}.tag-cycle small{display:block;color:#64748b;font-size:11px;font-weight:800}.tag-cycle b{display:block;margin-top:4px;color:#60a5fa}

.tv-floor-head{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;margin-bottom:10px;border:1px solid rgba(59,130,246,.25);border-radius:10px;background:rgba(30,58,138,.12);color:#93c5fd}.tv-floor-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.tv-floor-asset{min-height:135px;padding:13px;border:1px solid var(--asset-color);border-top:4px solid var(--asset-color);border-radius:12px;background:color-mix(in srgb,var(--asset-color) 11%,#111827);color:#fff;text-align:center;cursor:pointer}.tv-floor-asset:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.25)}.floor-machine{display:block;font-size:28px}.tv-floor-asset strong,.tv-floor-asset em,.tv-floor-asset small{display:block}.tv-floor-asset strong{margin:3px 0;color:var(--asset-color);font-size:16px}.tv-floor-asset em{font-style:normal;font-size:13px}.tv-floor-asset small{margin-top:7px;color:#94a3b8}.floor-asset-detail>small{color:#60a5fa;font-weight:800}.floor-asset-detail>div{display:grid;grid-template-columns:140px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #334155}.floor-asset-detail span{color:#94a3b8}.floor-asset-detail img{display:block;width:180px;height:180px;margin:16px auto;border-radius:10px;background:#fff;padding:8px}.floor-asset-detail button{padding:10px 16px}

.tv-floor-grid.positioned{position:relative;display:block;flex:1;min-height:510px;border:1px solid rgba(148,163,184,.2);border-radius:14px;overflow:hidden;background-color:#0f172a;background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);background-size:30px 30px;background-position:center}.tv-floor-grid.positioned .tv-floor-asset{position:absolute;min-height:92px;padding:8px;transform:translate(-50%,-50%)}.tv-floor-grid.positioned .tv-floor-asset:hover{transform:translate(-50%,-50%) scale(1.05);z-index:3}.tv-floor-grid.positioned .floor-machine{font-size:20px}.tv-floor-grid.positioned .tv-floor-asset em{display:none}

.velocity-live{color:#4ade80;font-size:14px;font-weight:800}.velocity-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0}.velocity-kpis>div{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border:1px solid rgba(148,163,184,.14);border-radius:11px;background:rgba(30,41,59,.72)}.velocity-kpis small{color:#94a3b8;font-weight:800}.velocity-kpis b{font-size:27px;color:#f8fafc}.velocity-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;color:#64748b;font-size:12px}.velocity-toolbar>div{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.velocity-toggle{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #334155;border-radius:8px;background:#111827;color:#64748b;font-size:11px;cursor:pointer}.velocity-toggle i{width:9px;height:9px;border-radius:50%}.velocity-toggle.active{color:#e2e8f0;border-color:#64748b;background:#1e293b}.velocity-chart{flex:1;min-height:430px;padding:8px;border:1px solid rgba(148,163,184,.13);border-radius:13px;background:rgba(15,23,42,.66)}.velocity-chart svg{width:100%;height:100%}.vel-grid{stroke:rgba(148,163,184,.14);stroke-width:1}.vel-axis,.vel-label{fill:#64748b;font:12px Inter,system-ui}.vel-label{font-size:11px}.tv-kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex:1;min-height:0;overflow:hidden}.tv-kanban[hidden]{display:none}.tv-kanban-col{display:flex;flex-direction:column;min-width:0;border:1px solid #334155;border-radius:12px;background:#111827;overflow:hidden}.tv-kanban-col>header{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-top:4px solid var(--kanban-tone);border-bottom:1px solid #334155}.tv-kanban-col>header strong{font-size:14px}.tv-kanban-col>header b{padding:3px 8px;border-radius:99px;background:#0b1322}.tv-kanban-list{display:grid;gap:8px;align-content:start;padding:9px;overflow-y:auto}.tv-tag-card{position:relative;padding:10px;border:1px solid #334155;border-left:4px solid var(--tag-tone);border-radius:9px;background:#1e293b;color:#fff;text-align:left;cursor:pointer}.tv-tag-card:hover{border-color:#64748b;transform:translateY(-2px)}.tv-tag-card.overdue:after{content:'QUÁ HẠN';position:absolute;right:7px;top:7px;padding:2px 5px;border-radius:4px;background:rgba(239,68,68,.17);color:#fca5a5;font-size:8px;font-weight:900}.tv-tag-card small{color:#93c5fd;font-weight:800}.tv-tag-card>strong{display:block;margin:6px 0;font-size:13px;line-height:1.3}.tv-tag-card>span{display:block;margin-top:3px;color:#94a3b8;font-size:11px}.tv-tag-card footer{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(148,163,184,.12)}.tv-tag-card em{color:#fbbf24;font-style:normal;font-size:10px}.tv-tag-card footer i{color:#94a3b8;font-style:normal;font-size:10px}.tv-kanban-empty{padding:25px 6px;text-align:center;color:#475569}.view-btn{border-color:#334155!important}.view-btn.active{border-color:#60a5fa!important;color:#bfdbfe!important;background:rgba(59,130,246,.14)!important}

.tv-kanban-intel{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr) 1.5fr;gap:8px}.tv-kanban-intel>div,.tv-kanban-intel>button{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:8px 11px;border:1px solid rgba(148,163,184,.14);border-radius:9px;background:#1e293b;color:#fff}.tv-kanban-intel small{color:#64748b;font-size:9px;font-weight:900}.tv-kanban-intel b{font-size:15px}.tv-kanban-intel>button{cursor:pointer;border-color:rgba(245,158,11,.28)}.tv-kanban-intel>button b{color:#fbbf24;font-size:12px}

.db-action-plan{margin-bottom:9px;border:1px solid rgba(96,165,250,.22);border-radius:10px;background:rgba(30,58,138,.09);overflow:hidden}.db-action-plan header{display:flex;justify-content:space-between;padding:8px 11px;color:#93c5fd}.db-action-plan header span{font-size:11px}.db-action-plan>div{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(148,163,184,.08)}.db-action-plan article{display:flex;gap:7px;min-width:0;padding:8px;background:#111827}.db-action-plan article i{flex:0 0 7px;height:7px;margin-top:4px;border-radius:50%;background:#64748b}.db-action-plan article i.processing{background:#f59e0b}.db-action-plan article i.done{background:#22c55e}.db-action-plan article span,.db-action-plan article b,.db-action-plan article small{display:block;min-width:0}.db-action-plan article b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.db-action-plan article small{margin-top:3px;color:#64748b;font-size:9px}

@media(max-width:1366px){
    .kpi-num{font-size:38px}
    #headerBar h1{font-size:22px}
    .header-time{font-size:26px}
    .tag-table,.plan-table{font-size:14px}
    .assess-table{font-size:14px}
    .perf-table{font-size:15px}
    .assess-kpi-card .ak-num{font-size:28px}
    .kpi-bottom-row{grid-template-columns:1.3fr 1fr}
    .okr-grid{grid-template-columns:1fr 1fr}
    .kaizen-grid{grid-template-columns:1fr}
    .nav-dot{width:7px;height:7px}
    .nav-dots{gap:4px}
}
@media(max-width:1024px){
    .kpi-top-row{grid-template-columns:repeat(3,1fr)}
    .kpi-bottom-row{grid-template-columns:1fr}
    .assess-kpi-row{grid-template-columns:repeat(4,1fr)}
    .photo-pair{grid-template-columns:1fr;width:95%}
    .okr-grid{grid-template-columns:1fr}
    .perf-top-row{grid-template-columns:repeat(2,1fr)}
    .kaizen-grid{grid-template-columns:1fr}
    .nav-dots{gap:4px}
    .nav-dot{width:6px;height:6px}
}