/* ==========================================================================
   PROBELIKA KNOWLEDGE CONSTELLATION V2
   ========================================================================== */

.km-page{
  --km-line:rgba(255,255,255,.085);
  --km-muted:#929cb6;
  --km-muted2:#66718d;
  --km-blue:#7787ff;
  --km-cyan:#59d8ff;
  --km-violet:#ad75ff;
  --km-green:#61e6b2;
  --km-yellow:#ffd269;
  --km-red:#ff7188;

  max-width:1240px;
  margin:0 auto;
  padding:40px 0 90px;
}

.km-page *{
  box-sizing:border-box;
}

.km-card{
  position:relative;
  border:1px solid var(--km-line);
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.018)
    ),
    rgba(8,12,24,.72);
  box-shadow:0 24px 74px rgba(0,0,0,.24);
  overflow:hidden;
}

.km-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      520px circle at 20% -15%,
      rgba(112,127,255,.075),
      transparent 55%
    );
}

/* Header */

.km-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:24px;
}

.km-head-copy{
  max-width:760px;
}

.km-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(125,140,255,.18);
  border-radius:999px;
  color:#b7bfff;
  background:rgba(108,124,255,.075);
  font-size: 12px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.km-eyebrow i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--km-cyan);
  box-shadow:0 0 14px var(--km-cyan);
}

.km-head h1{
  margin:12px 0 9px;
  font-size:clamp(36px,5.4vw,67px);
  line-height:.98;
  letter-spacing:-3px;
}

.km-head p{
  max-width:720px;
  margin:0;
  color:var(--km-muted);
  font-size:14px;
  line-height:1.66;
}

.km-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.km-back,
.km-action{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border:1px solid var(--km-line);
  border-radius:13px;
  color:#cbd1e4;
  background:rgba(255,255,255,.035);
  text-decoration:none;
  font-size: 12px;
  font-weight:800;
  transition:.17s ease;
}

.km-back:hover,
.km-action:hover{
  transform:translateY(-1px);
  border-color:rgba(126,141,255,.26);
  background:rgba(108,124,255,.06);
}

.km-action.primary{
  color:white;
  border:0;
  background:
    linear-gradient(
      135deg,
      #6d7cff,
      #9a70ff 56%,
      #4bd4ff
    );
  box-shadow:0 12px 32px rgba(94,109,255,.22);
}

/* Hero stats */

.km-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:12px;
  margin-bottom:12px;
}

.km-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:150px;
}

.km-summary-item{
  position:relative;
  padding:24px;
  border-right:1px solid var(--km-line);
}

.km-summary-item:last-child{
  border-right:0;
}

.km-summary-item span{
  display:block;
  color:var(--km-muted2);
  font-size: 12px;
  font-weight:750;
}

.km-summary-item strong{
  display:block;
  margin-top:9px;
  font-size:31px;
  line-height:1;
  letter-spacing:-1.4px;
}

.km-summary-item small{
  display:block;
  margin-top:6px;
  color:#75809b;
  font-size: 12px;
  line-height:1.4;
}

.km-focus{
  min-height:150px;
  padding:22px;
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(108,124,255,.16),
      transparent 44%
    ),
    rgba(8,12,24,.72);
}

.km-focus-label{
  color:#9da7ff;
  font-size: 12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.km-focus h3{
  margin:9px 0 5px;
  font-size:19px;
  letter-spacing:-.45px;
}

.km-focus p{
  margin:0 0 13px;
  color:var(--km-muted);
  font-size: 12px;
  line-height:1.5;
}

.km-focus-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.km-mini-pill{
  padding:5px 7px;
  border-radius:8px;
  color:#98a3bf;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.055);
  font-size: 12px;
}

/* Workbench */

.km-workbench{
  display:grid;
  grid-template-columns:minmax(0,1fr) 315px;
  gap:12px;
  align-items:start;
}

.km-main{
  min-width:0;
}

.km-toolbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  margin-bottom:8px;
}

.km-filter-row{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}

.km-filter{
  height:34px;
  padding:0 10px;
  border:1px solid var(--km-line);
  border-radius:10px;
  color:#77829f;
  background:rgba(255,255,255,.025);
  font:inherit;
  font-size: 12px;
  font-weight:850;
  cursor:pointer;
}

.km-filter.active{
  color:#d6dbff;
  border-color:rgba(124,140,255,.25);
  background:rgba(108,124,255,.09);
}

.km-search{
  width:190px;
  height:34px;
  padding:0 11px;
  border:1px solid var(--km-line);
  border-radius:10px;
  outline:none;
  color:white;
  background:rgba(255,255,255,.025);
  font:inherit;
  font-size: 12px;
}

.km-search:focus{
  border-color:rgba(124,140,255,.30);
}

/* Canvas */

.km-viewport{
  position:relative;
  height:720px;
  overflow:hidden;
}

.km-space{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(100,116,255,.055),
      transparent 40%
    ),
    radial-gradient(
      circle at 14% 22%,
      rgba(72,211,255,.035),
      transparent 22%
    );
}

.km-space:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.22) 0 1px,
      transparent 1.3px
    );
  background-size:43px 43px;
  mask-image:
    radial-gradient(
      circle at center,
      black,
      transparent 78%
    );
}

.km-world{
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  transition:transform .25s ease;
}

.km-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

.km-line{
  stroke:rgba(120,136,255,.20);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}

.km-line.strong{
  stroke:rgba(106,221,255,.29);
  stroke-width:1.7;
}

.km-line.hidden{
  display:none;
}

/* Nodes */

.km-node{
  --node:#737f9c;

  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  width:126px;
  min-height:76px;
  padding:11px 11px 10px;
  transform:translate(-50%,-50%);
  border:1px solid var(--km-line);
  border-radius:15px;
  outline:none;
  color:#e9ecf6;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--node) 10%,#111625),
      rgba(11,15,28,.95)
    );
  box-shadow:
    0 12px 30px rgba(0,0,0,.30);
  text-align:left;
  cursor:pointer;
  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease,
    opacity .17s ease;
  z-index:2;
}

.km-node:hover,
.km-node.selected{
  transform:
    translate(-50%,-50%)
    translateY(-3px)
    scale(1.035);
  border-color:
    color-mix(
      in srgb,
      var(--node) 54%,
      white
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.38),
    0 0 32px
      color-mix(
        in srgb,
        var(--node) 19%,
        transparent
      );
  z-index:5;
}

.km-node.hidden{
  opacity:.065;
  pointer-events:none;
}

.km-node[data-state="mastered"]{
  --node:var(--km-green);
}

.km-node[data-state="learning"]{
  --node:var(--km-blue);
}

.km-node[data-state="gap"]{
  --node:var(--km-red);
}

.km-node[data-state="review"]{
  --node:var(--km-yellow);
}

.km-node[data-state="unknown"]{
  --node:#717b94;
}

.km-node.recommended{
  border-color:rgba(124,140,255,.46);
  box-shadow:
    0 0 0 1px rgba(124,140,255,.11),
    0 0 38px rgba(108,124,255,.20),
    0 16px 38px rgba(0,0,0,.34);
}

.km-node.recommended:after{
  content:"SMART";
  position:absolute;
  right:-7px;
  top:-8px;
  padding:4px 6px;
  border-radius:7px;
  color:white;
  background:
    linear-gradient(
      135deg,
      #6878ff,
      #a36dff
    );
  box-shadow:0 6px 18px rgba(108,124,255,.25);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
}

.km-node-top{
  display:flex;
  justify-content:space-between;
  gap:7px;
  align-items:center;
  margin-bottom:6px;
}

.km-node-grade{
  color:#626e89;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.km-node-value{
  color:var(--node);
  font-size: 12px;
  font-weight:950;
}

.km-node-title{
  display:block;
  max-height:31px;
  overflow:hidden;
  font-size: 12px;
  font-weight:800;
  line-height:1.35;
}

.km-node-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:5px;
  margin-top:7px;
}

.km-node-state{
  color:#69748e;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.km-node-points{
  color:#74e6b6;
  font-size:12px;
  font-weight:900;
}

/* Zoom */

.km-zoom{
  position:absolute;
  right:12px;
  bottom:12px;
  display:grid;
  grid-template-columns:repeat(3,34px);
  gap:5px;
  z-index:10;
}

.km-zoom button{
  width:34px;
  height:34px;
  border:1px solid var(--km-line);
  border-radius:10px;
  color:#9da7c1;
  background:rgba(8,12,23,.90);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

/* Inspector */

.km-inspector{
  position:sticky;
  top:18px;
  min-height:460px;
  padding:22px;
}

.km-orb-wrap{
  position:relative;
  height:110px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
}

.km-orb{
  --orb:#7787ff;

  position:relative;
  width:72px;
  height:72px;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 30% 26%,
      white,
      var(--orb) 23%,
      color-mix(in srgb,var(--orb) 50%,#23145e) 61%,
      transparent 64%
    );
  box-shadow:
    0 0 50px
      color-mix(
        in srgb,
        var(--orb) 30%,
        transparent
      );
  transition:.25s ease;
}

.km-orb:before,
.km-orb:after{
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid
    color-mix(
      in srgb,
      var(--orb) 24%,
      transparent
    );
  border-radius:50%;
  animation:kmOrbit 8s linear infinite;
}

.km-orb:after{
  inset:-26px;
  opacity:.48;
  animation-duration:13s;
  animation-direction:reverse;
}

@keyframes kmOrbit{
  to{transform:rotate(360deg)}
}

.km-inspector-kicker{
  color:#8f99b7;
  font-size: 12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.km-inspector h2{
  margin:7px 0 6px;
  font-size:24px;
  line-height:1.08;
  letter-spacing:-.8px;
}

.km-inspector-summary{
  min-height:40px;
  margin:0 0 17px;
  color:var(--km-muted);
  font-size: 12px;
  line-height:1.55;
}

.km-inspector-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.km-inspector-stat{
  padding:10px;
  border-radius:11px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.045);
}

.km-inspector-stat span{
  display:block;
  color:#5f6a85;
  font-size:12px;
}

.km-inspector-stat strong{
  display:block;
  margin-top:3px;
  color:#d5dae9;
  font-size: 12px;
}

.km-exam-impact{
  margin-top:13px;
  padding:13px;
  border-radius:13px;
  border:1px solid rgba(89,230,178,.10);
  background:rgba(89,230,178,.04);
}

.km-exam-impact span{
  display:block;
  color:#698a7d;
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
}

.km-exam-impact strong{
  display:block;
  margin-top:4px;
  color:#7ceabe;
  font-size:15px;
}

.km-exam-impact small{
  display:block;
  margin-top:3px;
  color:#61746c;
  font-size: 12px;
  line-height:1.4;
}

.km-inspector-actions{
  display:grid;
  gap:7px;
  margin-top:15px;
}

/* Legend */

.km-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 13px;
  padding:12px 15px;
  margin-top:8px;
}

.km-legend span{
  display:flex;
  align-items:center;
  gap:5px;
  color:#68738d;
  font-size: 12px;
}

.km-legend i{
  width:7px;
  height:7px;
  border-radius:50%;
}

.km-legend .mastered i{background:var(--km-green)}
.km-legend .learning i{background:var(--km-blue)}
.km-legend .gap i{background:var(--km-red)}
.km-legend .review i{background:var(--km-yellow)}
.km-legend .unknown i{background:#717b94}

/* Honest graph note */

.km-graph-note{
  margin-top:8px;
  padding:11px 14px;
  color:#65708c;
  font-size: 12px;
  line-height:1.5;
}

.km-graph-note strong{
  color:#8792ad;
}

/* Subject index */

.km-index-section{
  margin-top:26px;
}

.km-index-label{
  margin-bottom:10px;
  color:#78839e;
  font-size: 12px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.km-subject-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.km-subject-card{
  position:relative;
  min-height:190px;
  display:flex;
  flex-direction:column;
  padding:21px;
  border:1px solid var(--km-line);
  border-radius:20px;
  color:#edf0fb;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(108,124,255,.10),
      transparent 38%
    ),
    rgba(12,16,30,.68);
  text-decoration:none;
  overflow:hidden;
  transition:
    transform .18s ease,
    border-color .18s ease;
}

.km-subject-card:hover{
  transform:translateY(-3px);
  border-color:rgba(124,140,255,.25);
}

.km-subject-card.chosen{
  border-color:rgba(124,140,255,.24);
}

.km-subject-exam{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  color:#77819c;
  font-size: 12px;
  font-weight:850;
  text-transform:uppercase;
}

.km-subject-card.chosen .km-subject-exam:after{
  content:"ТВОЙ ЭКЗАМЕН";
  padding:4px 6px;
  border-radius:7px;
  color:#b7bfff;
  background:rgba(108,124,255,.09);
}

.km-subject-card h3{
  margin:27px 0 8px;
  font-size:20px;
  letter-spacing:-.5px;
}

.km-subject-card p{
  margin:0;
  color:#717c98;
  font-size: 12px;
}

.km-subject-progress{
  margin-top:auto;
}

.km-subject-track{
  height:5px;
  margin-top:14px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  overflow:hidden;
}

.km-subject-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      #6c7cff,
      #a970ff,
      #51d6ff
    );
}

.km-subject-footer{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  color:#69748f;
  font-size: 12px;
}

/* Empty */

.km-empty{
  padding:50px 25px;
  text-align:center;
}

.km-empty strong{
  display:block;
  font-size:22px;
}

.km-empty p{
  max-width:540px;
  margin:8px auto 0;
  color:var(--km-muted);
  font-size: 12px;
  line-height:1.55;
}

/* Responsive */

@media(max-width:1050px){
  .km-hero{
    grid-template-columns:1fr;
  }

  .km-workbench{
    grid-template-columns:1fr;
  }

  .km-inspector{
    position:relative;
    top:auto;
    min-height:0;
  }

  .km-subject-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:760px){
  .km-page{
    padding-top:25px;
  }

  .km-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .km-head h1{
    letter-spacing:-2px;
  }

  .km-summary{
    grid-template-columns:1fr 1fr;
  }

  .km-summary-item:nth-child(2){
    border-right:0;
  }

  .km-summary-item:nth-child(-n+2){
    border-bottom:1px solid var(--km-line);
  }

  .km-toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  .km-search{
    width:100%;
  }

  .km-viewport{
    height:auto;
    min-height:0;
    overflow:visible;
    padding:10px;
  }

  .km-space,
  .km-lines,
  .km-zoom{
    display:none;
  }

  .km-world{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    transform:none !important;
  }

  .km-node{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    min-height:92px;
    transform:none;
  }

  .km-node:hover,
  .km-node.selected{
    transform:translateY(-2px);
  }

  .km-subject-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:470px){
  .km-world{
    grid-template-columns:1fr;
  }

  .km-summary{
    grid-template-columns:1fr 1fr;
  }

  .km-summary-item{
    padding:17px;
  }
}

@media(prefers-reduced-motion:reduce){
  .km-orb:before,
  .km-orb:after{
    animation:none;
  }
}