/* Pagrindai, animacijos ir šoninė kategorijų juosta – css/shell.css */

    .field {
      width: 100%;
      background-color: #141414;
      border: 1px solid #1f1f1f;
      border-radius: 0.75rem;
      padding: 0.65rem 0.85rem;
      font-size: 0.875rem;
      color: #fff;
      transition: border-color 150ms ease;
    }
    .field:focus { border-color: rgba(229, 229, 229, 0.6); outline: none; }
    .field::placeholder { color: #555555; }
    .label { display: block; font-size: 0.75rem; font-weight: 500; color: #aaaaaa; margin-bottom: 0.4rem; }

    .choice-card {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      width: 100%;
      min-width: 0;
      padding: 0.7rem 0.85rem;
      text-align: left;
      background-color: rgba(13, 13, 13, 0.6);
      border: 1px solid #1f1f1f;
      border-radius: 0.75rem;
      transition: border-color 150ms ease, background-color 150ms ease;
    }
    .choice-card:hover { border-color: #2b2b2b; background-color: rgba(20, 20, 20, 0.9); }
    .choice-card-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 2.4rem;
      height: 2.4rem;
      border-radius: 0.6rem;
      border: 1px solid #1f1f1f;
      background-color: #0d0d0d;
      color: #666666;
      transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    }
    .choice-card-check { opacity: 0; transition: opacity 150ms ease; }
    .choice-card-active {
      border-color: rgba(229, 229, 229, 0.5);
      background-color: rgba(229, 229, 229, 0.07);
    }
    .choice-card-active .choice-card-icon {
      color: var(--accent);
      border-color: rgba(229, 229, 229, 0.3);
      background-color: rgba(229, 229, 229, 0.1);
    }
    .choice-card-active .choice-card-check { opacity: 1; }


    .app-switch {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.75rem;
      border-radius: 0.6rem;
      border: 1px solid #1f1f1f;
      background: rgba(13, 13, 13, 0.6);
      font-size: 0.82rem;
      font-weight: 500;
      color: #aaaaaa;
      transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
    }
    .app-switch:hover { border-color: #2b2b2b; color: #fff; }
    .app-switch-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 999px;
      background: #555555;
      box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.18);
      transition: background-color 150ms ease, box-shadow 150ms ease;
    }
    .app-switch-state {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #555555;
    }
    .app-switch-on {
      border-color: rgba(52, 211, 153, 0.45);
      background: rgba(52, 211, 153, 0.08);
      color: #fff;
    }
    .app-switch-on .app-switch-dot {
      background: #34d399;
      box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
    }
    .app-switch-on .app-switch-state { color: #34d399; }


    .clip-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
    }
    .clip-frame iframe,
    .clip-frame video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }










    /* ── Ta pati išvaizda kaip pagrindinėje panelėje ───────────────── */
    :root { --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

    #category-nav.panel-nav {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.15rem;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
    }
    #category-nav .panel-tab {
      width: 100%;
      gap: 0.7rem;
      padding: 0.55rem 0.75rem;
      border: 0;
      border-radius: 7px;
      color: #aaaaaa;
      font-size: 0.875rem;
      font-weight: 400;
      white-space: nowrap;
    }
    #category-nav .panel-tab:hover {
      background: rgba(255, 255, 255, 0.04);
      color: #ffffff;
    }
    #category-nav .panel-tab-active {
      color: #ffffff !important;
      background: rgba(245, 165, 36, 0.12) !important;
      border-color: transparent !important;
      font-weight: 500;
    }
    #category-nav .panel-tab-active iconify-icon { color: #f5a524; }
    #category-nav .panel-tab-count {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 0.68rem;
    }
    #category-nav .panel-tab-active .panel-tab-count { color: #f5a524; }
    #category-nav .panel-group-label {
      padding: 1.15rem 0.75rem 0.35rem;
      color: #555555;
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.16em;
    }
    #category-nav .panel-group-label:first-child { padding-top: 0; }
    #category-nav .panel-divider { display: none; }

    /* Duomenys monospace, kaip panelėje */

    .list-count {
      font-family: var(--mono);
      font-size: 0.72rem;
      color: #666666;
      font-variant-numeric: tabular-nums;
    }