#kra-root { max-width: 1560px; margin: 0 auto; padding-bottom: 4rem; }
#kra-root * { box-sizing: border-box; }
.kra-heading h2 { color: var(--primary); font-size: 1.45rem; margin-bottom: .25rem; }
.kra-heading { overflow-wrap: anywhere; }
.kra-mobile-menu { display: none; }
.kra-menu-backdrop { display: none; }
.kra-muted { color: var(--text-muted); font-size: .9rem; margin: .5rem 0; }
.kra-tabs,.kra-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: .8rem; }
.kra-tabs { margin: 1.1rem 0; }
.kra-panel { padding: 1.25rem; margin: 1rem 0; min-width: 0; }
.kra-panel h3 { margin: 1rem 0 .5rem; color: var(--primary); }
.kra-field { display: flex; flex-direction: column; gap: .35rem; color: var(--text-muted); font-size: .8rem; }
.kra-field input,.kra-field select,.kra-dialog input { border: 1px solid var(--border-color); border-radius: 8px; padding: .65rem .8rem; background: var(--bg-card, white); color: var(--text-main); min-height: 42px; min-width: 150px; font: inherit; }
.kra-field input[type=search] { min-width: 240px; }
.kra-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: .8rem; margin: 1rem 0; }
.kra-stat { text-align: left; display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-main); font: inherit; }
.kra-stat:disabled { opacity: 1; cursor: default; }
.kra-stat strong { color: var(--primary); font-size: 1.6rem; }
.kra-stat span { font-size: .8rem; color: var(--text-muted); }
.kra-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--border-color); border-radius: 8px; margin: 1rem 0; }
.kra-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kra-table td,.kra-table th { padding: .9rem; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.kra-table th { background: var(--bg-main, #f2f7fb); color: var(--primary); white-space: nowrap; }
.kra-table a { color: var(--primary); text-decoration: none; }
.kra-table small { display: block; color: var(--text-muted); margin-top: .3rem; }
.kra-result-row { cursor: pointer; }
.kra-result-row:hover,.kra-result-row:focus-within { background: rgba(0,88,148,.06); }
.kra-badge { display: inline-block; border-radius: 5px; padding: .3rem .45rem; background: #e9f5ee; color: #235e3e; font-size: .75rem; }
.kra-warning { background: #fff2d9; color: #815500; }
.kra-goals-wrap { max-height: 65vh; }
.kra-goals-panel { container-type: inline-size; }
.kra-goals { min-width: 0; table-layout: fixed; }
.kra-goals thead { position: sticky; top: 0; z-index: 2; }
.kra-goals th { vertical-align: middle; white-space: normal; }
.kra-goals td,.kra-goals th { padding: .65rem .4rem; }
.kra-goals td { white-space: pre-wrap; overflow-wrap: anywhere; }
.kra-goals col.kra-criterion { width: 16%; }
.kra-goals col.kra-target { width: 21%; }
.kra-goals col.kra-note { width: 20%; }
.kra-goals col.kra-result { width: 10%; }
.kra-goals col.kra-rate { width: 5%; }
.kra-goals col.kra-input-status { width: 8%; }
.kra-goals .kra-rate { text-align: center; font-variant-numeric: tabular-nums; }
.kra-goals th.kra-input-status { white-space: normal; }
.kra-goals .kra-number { font-variant-numeric: tabular-nums; }
.kra-goals .kra-number .kra-cell-value { font-size: .82rem; }
.kra-goals .kra-group-heading { text-align: center; }
.kra-goals .kra-group-start { border-left: 2px solid var(--border-color); }
.kra-self { background: var(--box-core); }
.kra-manager { background: var(--box-star); }
.kra-goals th.kra-self { background: #fff2c9; color: #6f4a00; }
.kra-goals th.kra-manager { background: #dceedd; color: #245c30; }
[data-theme="dark"] .kra-goals th.kra-self { background: #3a2e17; color: #ffd54f; }
[data-theme="dark"] .kra-goals th.kra-manager { background: #193326; color: #81c784; }
[data-theme="dark"] .kra-goals td { background: #141c2a; color: #e2e8f0; }
[data-theme="dark"] .kra-goals td.kra-self,[data-theme="dark"] .kra-stat.kra-self { background: #2b2519; color: #e2e8f0; }
[data-theme="dark"] .kra-goals td.kra-manager,[data-theme="dark"] .kra-stat.kra-manager { background: #182b20; color: #e2e8f0; }
[data-theme="dark"] .kra-goals th:not(.kra-self):not(.kra-manager),[data-theme="dark"] .kra-goals a { color: #90caf9; }
.kra-stat.kra-self { border-color: var(--box-core-border); }
.kra-stat.kra-manager { border-color: var(--box-star-border); }
.kra-stat.kra-self strong { color: #6f4a00; }
.kra-stat.kra-manager strong { color: #245c30; }
[data-theme="dark"] .kra-stat.kra-self strong { color: #ffd54f; }
[data-theme="dark"] .kra-stat.kra-manager strong { color: #81c784; }
.kra-goals-wrap:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.kra-card-group,.kra-cell-label { display: none; }
@container (max-width: 1120px) {
    .kra-goals-wrap { max-height: none; border: 0; }
    .kra-goals,.kra-goals tbody { display: block; }
    .kra-goals colgroup { display: none; }
    .kra-goals thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .kra-goals tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 8px; overflow: clip; }
    .kra-goals td { display: block; min-width: 0; text-align: left; border-left: 0; }
    .kra-goals .kra-criterion,.kra-goals .kra-target,.kra-goals td[data-field=weight],.kra-goals .kra-input-status { grid-column: 1 / -1; }
    .kra-goals td[data-field=selfResult] { grid-column: 1; grid-row: 4; }
    .kra-goals td[data-field=selfNote] { grid-column: 1; grid-row: 5; }
    .kra-goals td[data-field=selfPercent] { grid-column: 1; grid-row: 6; }
    .kra-goals td[data-field=managerResult] { grid-column: 2; grid-row: 4; }
    .kra-goals td[data-field=managerPercent] { grid-column: 2; grid-row: 5 / 7; }
    .kra-goals .kra-input-status { grid-row: 7; }
    .kra-card-group { display: block; margin-bottom: .65rem; white-space: normal; }
    .kra-cell-label { display: block; font-size: .75rem; font-weight: 600; margin-bottom: .25rem; white-space: normal; }
    .kra-goals .kra-number { white-space: pre-wrap; }
}
@container (max-width: 540px) {
    .kra-goals tbody tr { grid-template-columns: minmax(0,1fr); }
    .kra-goals td[data-field] { grid-column: 1; grid-row: auto; }
}
.kra-empty { min-height: 140px; display: grid; place-content: center; text-align: center; gap: .75rem; }
.kra-dialog { width: min(620px,94vw); max-height: 88vh; overflow: auto; border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; background: var(--bg-card,white); color: var(--text-main); box-shadow: 0 20px 60px #0003; }
.kra-dialog::backdrop { background: #0006; }
.kra-candidates { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; max-height: 250px; overflow: auto; }
.kra-dialog .kra-toolbar { margin-top: 1rem; }
.kra-dialog .kra-field input { width: 100%; }
.kra-job-dialog { margin-right: 1rem; min-height: 45vh; }
.kra-progress { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .85rem; padding: 1rem 1.2rem; margin: 1rem 0; border: 1px solid var(--primary); border-radius: 10px; background: var(--bg-card,white); color: var(--text-main); border-left-width: 4px; }
.kra-progress-content { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.kra-progress-content strong { color: var(--primary); }
.kra-progress-time { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kra-progress-spinner { flex: 0 0 22px; height: 22px; margin-top: .1rem; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: kra-spin .9s linear infinite; }
.kra-progress-icon { font-size: 1.2rem; font-weight: 700; }
.kra-progress-unknown { border-color: #b27b13; }
.kra-progress-failed { border-color: #bd3434; }
.kra-progress-success { border-color: #2b8250; }
[data-kra-update][aria-busy=true] { cursor: wait; opacity: .85; }
@keyframes kra-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kra-progress-spinner { animation: none; } }
#kra-root a:focus-visible,#kra-root button:focus-visible,.kra-dialog button:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
#kra-root.kra-list-view .kra-heading h2 { font-size: 1.2rem; margin: 0 0 .2rem; }
.kra-list-view .kra-muted { font-size: .78rem; margin: .25rem 0; }
.kra-list-view .kra-tabs { gap: .5rem; margin: .6rem 0; }
.kra-list-view .btn { min-height: 34px; padding: .4rem .75rem; font-size: .8rem; }
.kra-list-view .kra-panel { padding: .75rem; margin: .6rem 0; }
.kra-selection-row { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; }
.kra-selection-row .kra-muted { margin: 0 0 .45rem; flex: 1 1 160px; }
.kra-filter-row { display: grid; grid-template-columns: minmax(180px,1.6fr) repeat(4,minmax(0,1fr)); gap: .6rem; margin-top: .6rem; }
.kra-list-controls .kra-field { min-width: 0; font-size: .75rem; gap: .2rem; }
.kra-list-controls .kra-field input,.kra-list-controls .kra-field select { min-height: 34px; padding: .35rem .55rem; min-width: 0; width: 100%; }
.kra-selection-row .kra-field { width: 180px; }
.kra-list-view #kra-notice:empty { display: none; }
.kra-list-view .kra-progress { align-items: center; gap: .5rem; padding: .45rem .65rem; margin: .6rem 0 0; font-size: .8rem; }
.kra-list-view .kra-progress-content .kra-muted { display: inline; margin: 0 .4rem 0 0; }
.kra-list-view .kra-progress-content strong { display: block; margin-bottom: .15rem; }
.kra-list-view .kra-progress-spinner { flex-basis: 18px; height: 18px; }
.kra-list-view .kra-stats { gap: .5rem; margin: 0 0 .6rem; }
.kra-list-view .kra-stat { flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .65rem; }
.kra-list-view .kra-stat strong { font-size: 1.15rem; }
.kra-list-view .kra-stat span { font-size: .75rem; }
.kra-list-view .kra-table-wrap { margin: .6rem 0; }
.kra-list-view .kra-table { font-size: .8rem; table-layout: fixed; }
.kra-list-view .kra-table td,.kra-list-view .kra-table th { padding: .45rem .6rem; overflow-wrap: anywhere; }
.kra-list-view .kra-table th:first-child { width: 25%; }
.kra-list-view .kra-table th { white-space: normal; }
.kra-list-view .kra-table small { margin-top: .15rem; font-size: .72rem; overflow-wrap: anywhere; }
.kra-identity { display: flex; align-items: baseline; gap: .35rem; min-width: 0; white-space: nowrap; }
.kra-source-name { flex: 0 1 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.kra-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kra-list-view .kra-badge { padding: .2rem .35rem; font-size: .7rem; }
[data-theme="dark"] .kra-list-view .kra-panel { background: #141c2a; color: #e2e8f0; }
[data-theme="dark"] #kra-root.kra-list-view .kra-heading h2,
[data-theme="dark"] .kra-list-view .kra-table th,
[data-theme="dark"] .kra-list-view .kra-table a,
[data-theme="dark"] .kra-list-view .kra-stat strong,
[data-theme="dark"] .kra-list-view .kra-progress-content strong { color: #90caf9; }
[data-theme="dark"] .kra-list-view .kra-muted,
[data-theme="dark"] .kra-list-view .kra-field,
[data-theme="dark"] .kra-list-view .kra-table small,
[data-theme="dark"] .kra-list-view .kra-stat span,
[data-theme="dark"] .kra-list-view .kra-progress-time { color: #a8b8cf; }
[data-theme="dark"] .kra-list-view .btn-secondary { background: #1f2b3d; color: #e2e8f0; border-color: #3b4c63; }
[data-theme="dark"] .kra-list-controls input,[data-theme="dark"] .kra-list-controls select { color-scheme: dark; }
[data-theme="dark"] .kra-list-controls input::placeholder { color: #a8b8cf; opacity: 1; }
@media (max-width: 1100px) {
    .kra-filter-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .kra-filter-row .kra-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    body.kra-active header { padding: .6rem .8rem; }
    body.kra-active .logo-text { font-size: 1.1rem; white-space: nowrap; }
    body.kra-active #user-info-text { display: none; }
    body.kra-active .user-bar { gap: .4rem; }
    body.kra-active #app-sidebar { display: none !important; }
    body.kra-active.kra-menu-open #app-sidebar { display: flex !important; position: absolute; inset: 0 auto 0 0; width: min(280px,80vw); z-index: 40; box-shadow: 10px 0 40px #0003; }
    body.kra-active .main-content { padding: .8rem; }
    .kra-mobile-menu { display: inline-flex; margin-bottom: .8rem; }
    .kra-menu-backdrop { display: block; position: fixed; inset: var(--app-header-height) 0 0; z-index: 30; background: #0005; border: 0; color: transparent; }
    .kra-panel { padding: .8rem; }
    .kra-field { flex: 1 1 150px; }
    .kra-field input,.kra-field select { width: 100%; min-width: 0; }
    .kra-field input[type=search] { min-width: 0; }
    .kra-job-dialog { margin: auto; }
    .kra-table:not(.kra-goals) thead { display: none; }
    .kra-table:not(.kra-goals) tr { display: block; border-bottom: 1px solid var(--border-color); padding: .7rem; }
    .kra-table:not(.kra-goals) td { display: inline-block; border: 0; padding: .4rem; max-width: 100%; }
    .kra-table:not(.kra-goals) td:first-child { display: block; }
    .kra-table:not(.kra-goals) td:not(:first-child)::before { content: attr(data-label); display: block; color: var(--text-muted); font-size: .72rem; margin-bottom: .2rem; }
    .kra-list-view .btn,.kra-list-controls .kra-field input,.kra-list-controls .kra-field select { min-height: 40px; }
    .kra-list-view .kra-mobile-menu { margin-bottom: .4rem; }
    .kra-list-view .kra-tabs { gap: .35rem; }
    .kra-list-view .kra-tabs .btn { flex: 1 1 auto; padding: .4rem .5rem; }
    .kra-selection-row > .btn { flex: 1 1 150px; }
    .kra-selection-row .kra-muted { flex-basis: 100%; margin: 0; }
    .kra-list-view .kra-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .kra-list-view .kra-stat { padding: .4rem .5rem; }
    .kra-list-view .kra-table:not(.kra-goals) tr { padding: .35rem; }
    .kra-list-view .kra-table:not(.kra-goals) td { padding: .3rem; }
}