.sk-user-state { border-color: #b9cce6; background: linear-gradient(180deg, #f7faff 0%, #fff 52%); }
.sk-user-state-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.sk-user-state-head h2 { margin: 0; font-size: 1.2rem; line-height: 1.45; }
.sk-user-state-eyebrow { margin: 0 0 3px; color: #1a5fb4; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.sk-user-state-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border-radius: 999px; background: #e3edfb; color: #103a70; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.sk-user-state-intro { margin: 0 0 14px; color: #3d4a5c; font-size: .9rem; line-height: 1.7; }
.sk-user-state-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid #d9e3f0; border-radius: 10px; background: #fff; }
.sk-user-state-form > label, .sk-user-state-form > div > label { display: block; margin-bottom: 5px; color: #3d4a5c; font-size: .82rem; font-weight: 700; }
.sk-user-state-form select, .sk-user-state-form input[type="date"] { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #bac6d5; border-radius: 7px; background: #fff; color: #1b1f24; }
.sk-user-state-form input[type="range"] { width: 100%; min-height: 30px; accent-color: #1a5fb4; }
.sk-user-state-form select:focus-visible, .sk-user-state-form input:focus-visible, .sk-user-state-form button:focus-visible, .sk-user-state-guidance a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.sk-user-state-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-user-state-actions button { min-height: 44px; padding: 9px 16px; border-radius: 7px; cursor: pointer; font-weight: 700; }
.sk-user-state-save { border: 1px solid #1a5fb4; background: #1a5fb4; color: #fff; }
.sk-user-state-save:hover { background: #103a70; border-color: #103a70; }
.sk-user-state-clear { border: 1px solid #bac6d5; background: #fff; color: #3d4a5c; }
.sk-user-state-clear:hover { border-color: #5a6472; background: #f7f8fa; }
.sk-user-state-feedback { grid-column: 1 / -1; min-height: 1.3em; margin: 0; color: #2e6b34; font-size: .82rem; font-weight: 600; }
.sk-user-state-guidance { margin-top: 13px; padding: 12px 14px; border-left: 4px solid #1a5fb4; border-radius: 0 8px 8px 0; background: #eef5ff; font-size: .88rem; line-height: 1.7; }
.sk-user-state-guidance p { margin: 0 0 5px; }
.sk-user-state-guidance a { color: #104f9c; font-weight: 700; }
.sk-user-state-privacy { margin: 11px 0 0; color: #5a6472; font-size: .75rem; line-height: 1.6; }
.sk-user-state-dashboard { margin: 14px 0; padding: 18px; border: 1px solid #b9cce6; border-radius: 12px; background: linear-gradient(180deg, #f7faff 0%, #fff 58%); box-shadow: 0 8px 24px rgba(16,58,112,.06); }
.sk-user-state-dashboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sk-user-state-dashboard h2 { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.sk-user-state-local { margin: 0; padding: 4px 10px; border-radius: 999px; background: #edf2f7; color: #44546a; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.sk-user-state-counts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.sk-user-state-counts span { padding: 9px 8px; border: 1px solid #d9e3f0; border-radius: 9px; background: #fff; color: #5a6472; font-size: .75rem; text-align: center; }
.sk-user-state-counts strong { display: block; color: #103a70; font-size: 1.15rem; line-height: 1.2; }
.sk-user-state-filter { display: grid; grid-template-columns: minmax(150px,auto) minmax(190px,1fr); align-items: center; gap: 8px 12px; }
.sk-user-state-filter label { color: #3d4a5c; font-size: .82rem; font-weight: 700; }
.sk-user-state-filter select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #bac6d5; border-radius: 7px; background: #fff; color: #1b1f24; }
.sk-user-state-filter p { grid-column: 1 / -1; min-height: 1.25em; margin: 0; color: #5a6472; font-size: .76rem; }
.sk-user-state-routes { margin-top: 14px; padding: 14px; border: 1px solid #d9e3f0; border-radius: 10px; background: #fff; }
.sk-user-state-routes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sk-user-state-routes h3 { margin: 0; color: #173b65; font-size: 1rem; line-height: 1.5; }
.sk-user-state-routes-head > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid #1a5fb4; border-radius: 8px; color: #104f9c; font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sk-user-state-routes-head > a:hover { background: #eef5ff; }
.sk-user-state-route-note, .sk-user-state-routes > [role="status"] { margin: 8px 0 0; color: #5a6472; font-size: .75rem; line-height: 1.6; }
.sk-user-state-route-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.sk-user-state-route-card { min-width: 0; padding: 12px; border: 1px solid #dce6f2; border-radius: 9px; background: #f9fbfe; }
.sk-user-state-route-kind { display: inline-flex; margin: 0 0 5px; padding: 2px 7px; border-radius: 999px; background: #e6effb; color: #174b87; font-size: .68rem; font-weight: 700; }
.sk-user-state-route-name { display: block; color: #104f9c; font-size: .9rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.sk-user-state-route-reason { margin: 7px 0 0; color: #3d4a5c; font-size: .75rem; line-height: 1.65; }
.sk-user-state-route-source { margin: 7px 0 0; color: #69778a; font-size: .68rem; line-height: 1.55; }
.sk-user-state-dashboard details { margin-top: 10px; border-top: 1px solid #e1e8f1; padding-top: 10px; }
.sk-user-state-dashboard summary { min-height: 44px; padding: 10px 2px; color: #104f9c; cursor: pointer; font-size: .84rem; font-weight: 700; }
.sk-user-state-manager-body { padding: 8px 0 2px; }
.sk-user-state-manager-body > p { margin: 0 0 10px; color: #5a6472; font-size: .78rem; line-height: 1.65; }
.sk-user-state-manager-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-user-state-manager-actions button, .sk-user-state-file { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 13px; border: 1px solid #bac6d5; border-radius: 7px; background: #fff; color: #104f9c; cursor: pointer; font-size: .8rem; font-weight: 700; }
.sk-user-state-manager-actions button:hover, .sk-user-state-file:hover { border-color: #1a5fb4; background: #f5f9ff; }
.sk-user-state-manager-actions button:disabled { cursor: not-allowed; opacity: .5; }
.sk-user-state-manager-actions .is-danger { border-color: #d2a5a5; color: #8a2c2c; }
.sk-user-state-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sk-user-state-list-badge { display: inline-flex; align-items: center; min-height: 26px; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: #eee8f8; color: #63448a; font-size: .72rem; font-weight: 700; }
.sk-user-state-list-badge.is-active, .sk-user-state-map-key.is-active { background: #fff0d9; color: #8a5200; }
.sk-user-state-list-badge.is-passed, .sk-user-state-map-key.is-passed { background: #e2f4e6; color: #23652e; }
.sk-user-state-map-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: #b9cce6 !important; background: #f7faff !important; }
.sk-user-state-map-summary p { margin: 0; }
.sk-user-state-map-copy { color: #3d4a5c; font-size: .82rem; line-height: 2; }
.sk-user-state-map-key { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #eee8f8; color: #63448a; font-size: .7rem; font-weight: 700; }
.sk-user-state-map-summary > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid #1a5fb4; border-radius: 8px; color: #104f9c; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sk-user-state-map-summary > a:hover { background: #eef5ff; }
.skm-user-state-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 999px; background: #eee8f8; color: #63448a; font-size: .72rem; font-weight: 700; }
.skm-user-state-badge.is-active { background: #fff0d9; color: #8a5200; }
.skm-user-state-badge.is-passed { background: #e2f4e6; color: #23652e; }
.sk-user-state-form select:focus-visible, .sk-user-state-form input:focus-visible, .sk-user-state-form button:focus-visible, .sk-user-state-guidance a:focus-visible,
.sk-user-state-dashboard select:focus-visible, .sk-user-state-dashboard summary:focus-visible, .sk-user-state-manager-actions button:focus-visible, .sk-user-state-file:focus-within, .sk-user-state-map-summary > a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.sk-user-state-routes a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
@media (max-width: 600px) {
  .sk-user-state-head { display: block; }
  .sk-user-state-badge { margin-top: 8px; }
  .sk-user-state-form { grid-template-columns: 1fr; padding: 12px; }
  .sk-user-state-actions { grid-column: 1; }
  .sk-user-state-actions button { flex: 1 1 100%; }
  .sk-user-state-feedback { grid-column: 1; }
  .sk-user-state-dashboard { padding: 14px; }
  .sk-user-state-dashboard-head, .sk-user-state-map-summary { display: block; }
  .sk-user-state-local { display: inline-flex; margin-top: 7px; }
  .sk-user-state-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sk-user-state-filter { grid-template-columns: 1fr; }
  .sk-user-state-filter p { grid-column: 1; }
  .sk-user-state-routes-head { display: block; }
  .sk-user-state-routes-head > a { width: 100%; margin-top: 8px; box-sizing: border-box; white-space: normal; }
  .sk-user-state-route-list { grid-template-columns: 1fr; }
  .sk-user-state-manager-actions > * { flex: 1 1 100%; }
  .sk-user-state-map-summary > a { width: 100%; margin-top: 10px; box-sizing: border-box; white-space: normal; }
}