:root {
      --bg-main: #0f1e2e;
      --bg-panel: #13263a;
      --bg-right: #102235;
      --line: #284763;
      --text: #d8e8f7;
      --muted: #9db7cf;
      --chip: #11273d;
      --chip-border: #345676;
      --chip-active: #9dc7e8;
      --chip-active-text: #0c1f31;
      --ok: #89d59f;
      --bad: #ff9f9f;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      height: 100%;
      color: var(--text);
      background: radial-gradient(1200px 700px at 25% 20%, #1b3550 0%, var(--bg-main) 55%, #0a1522 100%);
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    .app {
      display: flex;
      min-height: 100vh;
    }

    .left-panel {
      width: 380px;
      border-right: 1px solid var(--line);
      background: linear-gradient(160deg, rgba(24, 48, 74, 0.92), rgba(14, 31, 49, 0.96));
      padding: 18px 16px;
      overflow-y: auto;
    }

    .right-panel {
      flex: 1;
      background:
        radial-gradient(900px 500px at 68% 28%, rgba(64, 106, 146, 0.22), transparent 60%),
        linear-gradient(170deg, #132b42, var(--bg-right) 62%, #0e1f31);
      padding: 18px;
    }

    h1 {
      margin: 0 0 8px;
      font-size: 18px;
      letter-spacing: 0.01em;
    }

    h2 {
      margin: 0 0 10px;
      font-size: 18px;
      color: #d7ebff;
    }

    .desc {
      margin: 0 0 14px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .section {
      margin-top: 14px;
    }

    .section-label {
      margin: 0 0 6px;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #b6cfe4;
    }

    .row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .chip {
      min-width: 46px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid var(--chip-border);
      background: var(--chip);
      color: #b9d7f2;
      font-size: 13px;
      cursor: pointer;
      transition: 120ms ease;
    }

    .chip:hover {
      border-color: #4f7da5;
      color: #d7ecff;
      background: #16324e;
    }

    .chip.active {
      border-color: #72a9d6;
      color: var(--chip-active-text);
      background: var(--chip-active);
    }

    .assessment-box {
      border: 1px solid #2d4b69;
      border-radius: 9px;
      padding: 10px 9px;
      background: rgba(11, 25, 39, 0.55);
    }

    .assessment-title {
      margin: 0 0 8px;
      font-size: 13px;
      color: #d4e8fb;
      font-weight: 600;
    }

    .assess-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 7px;
    }

    .assess-row:first-of-type {
      margin-top: 0;
    }

    .assess-row label {
      width: 90px;
      font-size: 12px;
      color: #d4e8fb;
      font-weight: 600;
    }

    .assess-select {
      flex: 1;
      min-width: 0;
      border-radius: 7px;
      border: 1px solid #385a7b;
      background: #10273c;
      color: #d5eafc;
      padding: 6px 8px;
      font-size: 12px;
      outline: none;
    }

    .assess-select:focus {
      border-color: #7eb0d8;
      box-shadow: 0 0 0 2px rgba(126, 176, 216, 0.18);
    }

    .mark {
      min-width: 120px;
      font-size: 11px;
      text-align: right;
      color: #97b3cb;
    }

    .mark.ok {
      color: var(--ok);
      font-weight: 700;
    }

    .mark.bad {
      color: var(--bad);
      font-weight: 700;
    }

    .actions {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .btn {
      border: 1px solid #4b6f91;
      border-radius: 8px;
      background: #12304b;
      color: #d5eafd;
      padding: 7px 10px;
      font-size: 12px;
      cursor: pointer;
      transition: 120ms ease;
    }

    .btn:hover {
      border-color: #7fa9cc;
      background: #173a5a;
    }

    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .result {
      margin: 0;
      font-size: 12px;
      color: #b8d3e9;
    }

    .result.ok {
      color: var(--ok);
      font-weight: 700;
    }

    .result.bad {
      color: var(--bad);
      font-weight: 700;
    }

    .reset-wrap {
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px solid #2b4966;
    }

    .reset-btn {
      width: 100%;
      padding: 9px 11px;
      border-radius: 9px;
      border: 1px solid #4b6f91;
      background: linear-gradient(180deg, #183651, #122b43);
      color: #d5eafd;
      font-size: 13px;
      cursor: pointer;
      transition: 120ms ease;
    }

    .reset-btn:hover {
      border-color: #7fa9cc;
      background: linear-gradient(180deg, #1d4262, #14304a);
    }

    .table-card {
      border: 1px solid #2b4966;
      border-radius: 12px;
      background: rgba(11, 24, 37, 0.72);
      padding: 12px;
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 580px;
    }

    th,
    td {
      border: 1px solid #304f6c;
      padding: 8px 10px;
      text-align: center;
      font-size: 13px;
    }

    th {
      color: #d7ebff;
      background: rgba(25, 52, 79, 0.66);
      font-weight: 600;
    }

    td:first-child,
    th:first-child {
      text-align: left;
      min-width: 110px;
    }

    .table-note {
      margin: 10px 2px 0;
      font-size: 12px;
      color: #a8c4de;
      line-height: 1.4;
    }

    .viewer-card {
      margin-top: 14px;
      border: 1px solid #2b4966;
      border-radius: 12px;
      background: rgba(11, 24, 37, 0.72);
      padding: 12px;
    }

    .viewer-heading {
      margin: 0 0 8px;
      font-size: 14px;
      color: #d7ebff;
      font-weight: 600;
    }

    #viewer-canvas {
      position: relative;
      width: 100%;
      height: 320px;
      border: 1px solid #304f6c;
      border-radius: 10px;
      overflow: hidden;
      background: radial-gradient(700px 380px at 65% 28%, rgba(64, 106, 146, 0.22), #102235 60%, #0d1d2d);
    }

    .viewer-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      color: #b8d3e9;
      font-size: 13px;
      text-align: center;
    }

    .viewer-note {
      margin: 8px 2px 0;
      font-size: 12px;
      color: #a8c4de;
      line-height: 1.35;
    }

    #degeneracy-dialog {
      border: 1px solid #3a5d7e;
      border-radius: 12px;
      background: #10283e;
      color: #d7ebff;
      width: min(520px, 92vw);
      padding: 0;
    }

    #degeneracy-dialog::backdrop {
      background: rgba(7, 15, 24, 0.62);
    }

    .dialog-inner {
      padding: 14px 14px 12px;
    }

    .dialog-title {
      margin: 0 0 8px;
      font-size: 15px;
      color: #d7ebff;
      font-weight: 600;
    }

    .dialog-text {
      margin: 0;
      font-size: 13px;
      color: #b8d3e9;
      line-height: 1.45;
    }

    .dialog-actions {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }

    @media (max-width: 980px) {
      .app {
        flex-direction: column;
      }

      .left-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
      }
    }