/* === 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}
#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}
#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}
.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:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:80%;max-width:1200px}
.photo-before,.photo-after{text-align:center}
.photo-label{font-size:20px;font-weight:700;margin-bottom:10px}
.photo-before .photo-label{color:#f87171}.photo-after .photo-label{color:#4ade80}
.photo-frame{width:100%;aspect-ratio:16/9;background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.1);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-placeholder{color:#475569;font-size:20px}
.photo-caption{font-size:22px;font-weight:600;color:#94a3b8;text-align:center}
/* 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}
/* 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{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}
.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}
/* 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 */
@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}
}