/* 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;
    }


    .board-columns {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      align-items: start;
    }

    .board-column {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      min-height: 12rem;
    }

    .board-column-head {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0 0.35rem 0.6rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 0.8rem;
      font-weight: 600;
      color: #c9c9c9;
    }

    .board-column-count {
      margin-left: auto;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.7rem;
      color: #5a5a5a;
    }

    .board-drop {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-height: 5rem;
      padding: 0.2rem;
      border-radius: 10px;
      transition: background-color 0.14s ease;
    }

    .board-drop-over { background: rgba(245, 165, 36, 0.06); }

    .board-card {
      cursor: grab;
      padding: 0.7rem 0.8rem;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-left: 3px solid #3f3f46;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.02);
      transition: border-color 0.14s ease, background-color 0.14s ease;
    }

    .board-card:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.14);
    }

    .board-card-dragging { opacity: 0.4; cursor: grabbing; }



    .board-card-title {
      font-size: 0.875rem;
      line-height: 1.45;
      color: #ffffff;
    }

    .board-card-labels {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.5rem;
    }

    .board-label {
      padding: 0.1rem 0.4rem;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      font-size: 0.64rem;
      letter-spacing: 0.03em;
      color: #b4b4b4;
    }

    .board-card-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.55rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.64rem;
      color: #6a6a6a;
    }

    .board-due-late { color: #e0645c; }
    .board-assignee {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin-left: auto;
      color: #9a9a9a;
    }

    .board-add {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.5rem;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 0.8rem;
      color: #6a6a6a;
      transition: border-color 0.14s ease, color 0.14s ease;
    }

    .board-add:hover { border-color: rgba(245, 165, 36, 0.5); color: #f5a524; }

    .board-field {
      display: block;
      margin-bottom: 1rem;
    }

    .board-field > span {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: #c9c9c9;
    }

    .board-field small {
      display: block;
      margin-top: 0.3rem;
      font-size: 0.72rem;
      color: #5a5a5a;
    }

    .board-field input,
    .board-field textarea,
    .board-field select {
      width: 100%;
      padding: 0.55rem 0.7rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      background: #0d0d0d;
      color: #ffffff;
      font-size: 0.875rem;
      outline: none;
      transition: border-color 0.14s ease;
    }

    .board-field textarea { resize: vertical; line-height: 1.6; }

    .board-field input:focus,
    .board-field textarea:focus,
    .board-field select:focus { border-color: rgba(245, 165, 36, 0.6); }

    .board-field-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    @media (max-width: 1100px) {
      .board-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      .board-columns { grid-template-columns: minmax(0, 1fr); }
      .board-field-row { grid-template-columns: minmax(0, 1fr); }
    }

    /* --- kategorijos --- */
    .cat-website  { --cat: #5c8bd6; }
    .cat-server   { --cat: #35b57e; }
    .cat-discord  { --cat: #7d6ff0; }
    .cat-other    { --cat: #8a8a8a; }
    .cat-all      { --cat: #f5a524; }

    .board-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.4rem;
    }

    .bfilter {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 0.8rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      font-size: 0.82rem;
      color: #9a9a9a;
      transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
    }

    .bfilter iconify-icon { color: var(--cat); }

    .bfilter:hover {
      border-color: color-mix(in srgb, var(--cat) 50%, transparent);
      color: #ffffff;
    }

    .bfilter-active {
      border-color: color-mix(in srgb, var(--cat) 60%, transparent);
      background: color-mix(in srgb, var(--cat) 12%, transparent);
      color: #ffffff;
    }

    .bfilter-count {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.68rem;
      color: #6a6a6a;
    }

    .board-cat {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      margin-bottom: 0.45rem;
      padding: 0.1rem 0.4rem;
      border-radius: 4px;
      background: color-mix(in srgb, var(--cat) 16%, transparent);
      color: color-mix(in srgb, var(--cat) 80%, white);
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .board-card { border-left-color: var(--cat, #3f3f46); }
    .board-card.prio-urgent { box-shadow: inset 0 0 0 1px rgba(224, 52, 44, 0.25); }

    .board-prio { color: #7a7a7a; }
    .board-card.prio-high .board-prio { color: #f5a524; }
    .board-card.prio-urgent .board-prio { color: #e0645c; }

    /* --- savas iškrentantis meniu --- */
    .bchoice { position: relative; }

    .bchoice-trigger {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.55rem 0.7rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      background: #0d0d0d;
      color: #ffffff;
      font-size: 0.875rem;
      text-align: left;
      transition: border-color 0.14s ease;
    }

    .bchoice-trigger:hover { border-color: rgba(255, 255, 255, 0.16); }
    .bchoice-open .bchoice-trigger { border-color: rgba(245, 165, 36, 0.6); }
    .bchoice-open .bchoice-chevron { transform: rotate(180deg); }
    .bchoice-chevron { color: #5a5a5a; transition: transform 0.16s ease; }

    .bchoice-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 0.35rem);
      z-index: 40;
      padding: 0.3rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      background: #141414;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
      animation: bchoiceIn 140ms cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    @keyframes bchoiceIn {
      from { opacity: 0; transform: translate3d(0, -4px, 0); }
      to { opacity: 1; transform: none; }
    }

    .bchoice-option {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem 0.55rem;
      border-radius: 7px;
      color: #b4b4b4;
      font-size: 0.85rem;
      text-align: left;
      transition: background-color 0.12s ease, color 0.12s ease;
    }

    .bchoice-option:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
    .bchoice-option .bchoice-tick { margin-left: auto; opacity: 0; color: #f5a524; }
    .bchoice-option-active { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
    .bchoice-option-active .bchoice-tick { opacity: 1; }

    .bchoice-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 999px;
      flex-shrink: 0;
      background: #5a5a5a;
    }

    .dot-todo { background: #5a5a5a; }
    .dot-doing { background: #5c8bd6; }
    .dot-review { background: #c9a227; }
    .dot-done { background: #35b57e; }
    .dot-low { background: #5a5a5a; }
    .dot-normal { background: #5c8bd6; }
    .dot-high { background: #f5a524; }
    .dot-urgent { background: #e0342c; }
    .board-card-desc {
      margin-top: 0.4rem;
      font-size: 0.78rem;
      line-height: 1.55;
      color: #8a8a8a;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .board-face {
      width: 1.05rem;
      height: 1.05rem;
      border-radius: 999px;
      flex-shrink: 0;
      object-fit: cover;
      background: #1c1c1c;
    }

    .board-face-empty {
      display: inline-block;
      border: 1px dashed rgba(255, 255, 255, 0.18);
      background: none;
    }

    .assign-menu {
      position: fixed;
      z-index: 95;
      min-width: 15rem;
      max-height: 22rem;
      overflow-y: auto;
      padding: 0.35rem;
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 11px;
      background: #141414;
      box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
      animation: bchoiceIn 130ms cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .assign-head {
      padding: 0.35rem 0.55rem 0.45rem;
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #5a5a5a;
    }

    .assign-option {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      width: 100%;
      padding: 0.42rem 0.55rem;
      border-radius: 8px;
      text-align: left;
      transition: background-color 0.12s ease;
    }

    .assign-option:hover { background: rgba(255, 255, 255, 0.05); }
    .assign-option-active { background: rgba(255, 255, 255, 0.06); }

    .assign-face {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 999px;
      flex-shrink: 0;
      object-fit: cover;
      background: #1c1c1c;
    }

    .assign-face-empty {
      display: inline-block;
      border: 1px dashed rgba(255, 255, 255, 0.18);
      background: none;
    }

    .assign-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.85rem;
      color: #e4e4e4;
    }

    .assign-role {
      flex-shrink: 0;
      max-width: 7rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.68rem;
      color: #7a7a7a;
    }

    .assign-tick { flex-shrink: 0; opacity: 0; color: #f5a524; }
    .assign-option-active .assign-tick { opacity: 1; }

    .assign-split {
      margin: 0.3rem 0.3rem;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .assign-empty {
      padding: 0.5rem 0.55rem 0.6rem;
      font-size: 0.74rem;
      line-height: 1.5;
      color: #7a7a7a;
    }

    .bchoice-avatar {
      display: inline-flex;
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 999px;
      flex-shrink: 0;
      overflow: hidden;
      background: #1c1c1c;
    }

    .bchoice-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .bchoice-avatar-empty {
      border: 1px dashed rgba(255, 255, 255, 0.18);
      background: none;
    }

    .profile-card {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin: -0.4rem 0 1rem;
      padding: 0.7rem 0.8rem;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.02);
    }

    .profile-face {
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 999px;
      flex-shrink: 0;
      object-fit: cover;
      background: #1c1c1c;
    }

    .profile-body { min-width: 0; }

    .profile-name {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: #ffffff;
    }

    .profile-owner {
      padding: 0.05rem 0.35rem;
      border-radius: 4px;
      background: rgba(245, 165, 36, 0.14);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: #f5a524;
    }

    .profile-meta {
      margin-top: 0.15rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.68rem;
      color: #6a6a6a;
    }

    .profile-roles {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.45rem;
    }

    .profile-role {
      padding: 0.08rem 0.4rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      font-size: 0.65rem;
      color: #b4b4b4;
    }

    .media-drop {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      cursor: pointer;
      padding: 2.4rem 1rem;
      border: 1px dashed rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.015);
      color: #6a6a6a;
      text-align: center;
      transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
    }

    .media-drop:hover,
    .media-drop-over {
      border-color: rgba(245, 165, 36, 0.55);
      background: rgba(245, 165, 36, 0.05);
      color: #f5a524;
    }

    .media-drop-title {
      font-size: 0.9rem;
      font-weight: 500;
      color: #c9c9c9;
    }

    .media-drop:hover .media-drop-title,
    .media-drop-over .media-drop-title { color: #ffffff; }

    .media-drop-hint {
      font-size: 0.75rem;
      color: #5a5a5a;
    }

    .media-progress {
      margin-top: 0.9rem;
      padding: 0.55rem 0.8rem;
      border: 1px solid rgba(245, 165, 36, 0.25);
      border-radius: 9px;
      background: rgba(245, 165, 36, 0.06);
      font-size: 0.8rem;
      color: #f5a524;
    }

    .media-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
      gap: 0.9rem;
      margin-top: 1.4rem;
    }

    .media-empty {
      grid-column: 1 / -1;
      padding: 2rem 0;
      font-size: 0.85rem;
      color: #5a5a5a;
      text-align: center;
    }

    .media-tile {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.02);
      transition: border-color 0.14s ease;
    }

    .media-tile:hover { border-color: rgba(255, 255, 255, 0.16); }

    .media-thumb {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 4 / 3;
      max-width: 100%;
      padding: 0.5rem;
      background:
        repeating-conic-gradient(#161616 0% 25%, #1c1c1c 0% 50%) 50% / 14px 14px;
    }

    .media-thumb img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .media-info {
      padding: 0.55rem 0.65rem 0.65rem;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .media-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.78rem;
      color: #e4e4e4;
    }

    .media-size {
      margin-top: 0.1rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.66rem;
      color: #6a6a6a;
    }

    .media-actions {
      position: absolute;
      top: 0.45rem;
      right: 0.45rem;
      display: flex;
      gap: 0.3rem;
      opacity: 0;
      transition: opacity 0.14s ease;
    }

    .media-tile:hover .media-actions,
    .media-tile:focus-within .media-actions { opacity: 1; }

    .media-action {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.85rem;
      height: 1.85rem;
      border-radius: 7px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(10, 10, 10, 0.85);
      color: #c9c9c9;
      transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
    }

    .media-action:hover {
      border-color: rgba(245, 165, 36, 0.6);
      color: #f5a524;
    }

    .media-action-danger:hover {
      border-color: rgba(224, 52, 44, 0.6);
      color: #e0645c;
    }

    @media (max-width: 640px) {
      .media-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
    }