:root{
      --bg: #0a0f14;
      --ink: #e9eef5;
      --panel: rgba(15,20,26,.92);
      --card: rgba(18,24,31,.92);
      --cardBorder: rgba(255,255,255,.10);
      --inputBg: rgba(245,247,250,.96);
      --inputText: #101826;
      --inputBorder: rgba(0,0,0,.18);

      --accent: #7dd3fc;
      --btnBg: #7dd3fc;
      --btnBg2: #38bdf8;
      --btnText: #06121b;

      --btnRadius: 12px;
      --btnShadow: none;
      --btnBorder: 1px solid rgba(255,255,255,.12);
      --btnGradient: none;

      --radius: 14px;
      --textSize: 14px;

      /* textures / patterns */
      --bgTextureImg: none;
      --bgTextureOpacity: .18;
      --bgTexSize: 220px;

      --bgPatternImg: none;
      --bgPatternOpacity: .10;
      --bgPatternSize: 220px;
      --bgPatternAngle: 0deg;

      --cardTextureImg: none;
      --cardTextureOpacity: .12;
      --cardTexSize: 240px;

      --inputTextureImg: none;
      --inputTextureOpacity: .08;
      --inputTexSize: 180px;
      --fontFamily: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    }

    html, body { height: 100%; }
    body{
      margin:0;
      background: var(--bg);
      color: var(--ink);
      font-size: var(--textSize);
      font-family: 'Nunito', var(--fontFamily, system-ui, sans-serif);
      -webkit-font-smoothing: antialiased;
    }

    /* Global background layers */
    body::before{
      content:"";
      position: fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      background-image: var(--bgTextureImg);
      background-size: var(--bgTexSize) var(--bgTexSize);
      background-repeat: repeat;
      opacity: var(--bgTextureOpacity);
      mix-blend-mode: screen;
    }
    body::after{
      content:"";
      position: fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      background-image: var(--bgPatternImg);
      background-size: var(--bgPatternSize) var(--bgPatternSize);
      background-repeat: repeat;
      opacity: var(--bgPatternOpacity);
      transform: rotate(var(--bgPatternAngle));
      transform-origin: center;
      mix-blend-mode: screen;
    }

    #root{ position: relative; z-index:1; }

    .k20-panel{
      background: var(--panel);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      backdrop-filter: blur(8px);
    }
    .k20-card{
      background: var(--card);
      border: 1px solid var(--cardBorder);
      border-radius: var(--radius);
      box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.04) inset;
      position: relative;
      overflow: visible;
      transition: box-shadow 160ms ease, border-color 160ms ease;
    }
    /* Pointer-drag UX */
    .k20-card:hover {
      border-color: rgba(99,130,180,.22) !important;
      box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
    }
    body.k20-dragging{ user-select:none; cursor: grabbing; }
    body.k20-dragging *{ user-select:none; }

    .k20-drag-ghost{
      position: fixed;
      z-index: 99999;
      pointer-events: none;
      opacity: .92;
      transform: translate3d(0,0,0);
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
    }
    .k20-drag-ghost .k20-card{ margin:0; }

    .k20-drop-placeholder{
      /* behaves like a card-sized slot */
      box-sizing: border-box;
      border: 2px dashed var(--accent);
      border-radius: var(--radius);
      background: rgba(217,164,90,.06);
      overflow: hidden;

      width: 100%;
      justify-self: start;
      pointer-events: none;

      /* animate the "gap" so cards are smoothly pushed apart */
      --ph: 64px;              /* placeholder height (tweak if your cards are taller) */
      max-height: var(--ph);
      margin: 6px 0;

      opacity: 1;
      transform-origin: top;
      animation: k20PhIn 140ms ease-out both;
    }

    
    @media (min-width: 1024px){
      .k20-drop-placeholder{
        /* grid is 2 columns with gap-2 (8px): match one card width */
        width: auto;
      }
    }

@keyframes k20PhIn{
      from{
        max-height: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        opacity: 0;
        transform: scaleY(.6);
      }
      to{
        max-height: var(--ph);
        margin-top: 6px;
        margin-bottom: 6px;
        opacity: 1;
        transform: scaleY(1);
      }
    }

    .k20-card::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      background-image: var(--cardTextureImg);
      background-size: var(--cardTexSize) var(--cardTexSize);
      background-repeat: repeat;
      opacity: var(--cardTextureOpacity);
      border-radius: var(--radius);
      mix-blend-mode: screen;
    }
    .k20-card > *{ position: relative; z-index: 1; }

    .k20-avatar-empty{
    opacity: 0.4;
    transition: opacity var(--gt-t), background var(--gt-t);
  }
  .k20-avatar-empty:hover{
    opacity: 0.85;
    background: rgba(87,227,137,.08) !important;
    border-color: rgba(87,227,137,.30) !important;
  }

  /* Stat pills use DM Mono for crisp numbers */
  .k20-statpill b,
  .k20-statpill strong { font-weight: 500; color: var(--gt-ink); }
  .k20-statpill { font-family: var(--gt-mono) !important; }

  /* Zone tags */
  .k20-zone-tag{
    display:inline-flex;align-items:center;gap:3px;
    padding:1px 8px;border-radius:4px;
    font-family:var(--gt-mono);font-size:9px;font-weight:400;letter-spacing:.5px;
    line-height:1.8;cursor:pointer;user-select:none;opacity:.85;
    border:1px solid rgba(0,0,0,.25);transition:opacity var(--gt-t);
  }
  .k20-zone-tag:hover{opacity:1;filter:brightness(1.15);}

  /* Improved card head layout */
  .k20-cardhead{
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .k20-statrow{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 5px !important;
  }
  .k20-statpill{
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .k20-titleline{
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .k20-badge{
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  /* DM Stickers */
  .k20-sticky{
    position:relative;padding:8px 12px;border-radius:6px;
    font-size:11px;line-height:1.5;box-shadow:0 4px 16px rgba(0,0,0,.5);
    min-width:120px;white-space:pre-wrap;word-break:break-word;
    font-family:var(--gt-body);
    background:#2a2010;color:#e8d090;border-left:3px solid var(--gt-gold);
    border:1px solid rgba(240,180,41,.25);border-left:3px solid var(--gt-gold);
  }
  .k20-sticky-red{background:#2a1010!important;color:#ff9090!important;border-left-color:#f06060!important;border-color:rgba(240,96,96,.25)!important;}
  .k20-sticky-blue{background:#0e1a2a!important;color:#90c8f0!important;border-left-color:#60aadd!important;border-color:rgba(96,170,221,.25)!important;}
  .k20-sticky-green{background:#0e2015!important;color:#80e8a0!important;border-left-color:var(--gt-green)!important;border-color:rgba(87,227,137,.25)!important;}
  .k20-sticky-purple{background:#1a1028!important;color:#c090f0!important;border-left-color:#a060d8!important;border-color:rgba(160,96,216,.25)!important;}
  .k20-sticky-yellow{background:#2a2010!important;color:#e8d090!important;border-left-color:var(--gt-gold)!important;border-color:rgba(240,180,41,.25)!important;}

  /* Mobile responsive */
  @media(max-width:640px){
    .k20-card{padding:8px!important;}
    .k20-statrow{flex-wrap:wrap;gap:4px;}
    .k20-statpill{font-size:11px;padding:2px 6px;}
    .k20-title{font-size:13px;}
    .k20-cardhead{gap:6px!important;}
    .k20-badge{font-size:9px;padding:1px 5px;}
    .k20app{grid-template-columns:48px 1fr!important;}
    .k20railBtn{width:40px!important;height:34px!important;}
    .k20railIco{font-size:14px!important;}
    .k20railLbl{font-size:8px!important;}
    .k20content{padding:6px 6px 10px!important;}
    .k20-iconbtn{width:28px!important;height:28px!important;font-size:13px!important;}
  }

  .k20-accentbar{
      position:absolute;
      left:-1px;
      top:-1px;
      bottom:-1px;
      width: 4px;
      border-radius: 4px 0 0 4px;
      opacity: .85;
      pointer-events: none;
      filter: saturate(1.15) contrast(1.05);
    }

    .k20-acted{
      box-shadow: none !important;
      opacity: .55 !important;
      filter: saturate(.6);
    }
/* Players look different */
.k20-card.k20-player{
  border-color: rgba(120,180,255,.55) !important;
  box-shadow: 0 0 0 2px rgba(120,180,255,.18) inset;
}
.k20-card.k20-player .k20-title{
  color: rgba(185,220,255,1);
}

    .k20-acted.ring-2{
      /* если активный (ring-2) — рамки не конфликтуют */
      box-shadow: 0 0 0 2px rgba(217,164,90,.18), 0 0 0 1px rgba(0,0,0,.35) inset;
    }

    .k20-input, .k20-select, .k20-textarea{
      background: #0e1520;
      color: #c9d6e8;
      border: 1px solid rgba(99,130,180,.22);
      border-radius: 6px;
      outline: none;
      position: relative;
      background-image: var(--inputTextureImg);
      background-size: var(--inputTexSize) var(--inputTexSize);
      background-repeat: repeat;
      transition: border-color 150ms ease;
    }
    .k20-input:focus, .k20-select:focus, .k20-textarea:focus{
      box-shadow: 0 0 0 2px rgba(87,227,137,.12);
      border-color: rgba(87,227,137,.45);
    }

    .btn-k20{
      background: rgba(87,227,137,.10) !important;
      color: #57e389 !important;
      border: 1px solid rgba(87,227,137,.25) !important;
      border-radius: 5px !important;
      box-shadow: none !important;
      padding: 6px 12px;
      font-weight: 700;
    }
    .btn-k20:active{ transform: translateY(1px); }
    .btn-ghost{
      background: rgba(26,37,54,.6);
      color: #7a90b0;
      border: 1px solid rgba(99,130,180,.18);
      border-radius: 5px;
      padding: 5px 10px;
      font-weight: 700;
    }
    .tab{
      padding: 9px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.22);
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .02em;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, filter 120ms ease;
      user-select:none;
      white-space:nowrap;
    }
    .tab:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); filter: brightness(1.06); }
    .tab:active{ transform: translateY(0px) scale(.99); }
    .tab.active{
      background: linear-gradient(180deg, rgba(217,164,90,.98), rgba(180,123,44,.98));
      color: #23160a;
      border-color: rgba(0,0,0,.35);
      box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 20px rgba(0,0,0,.25);
    }

    .hpbar{
      height: 16px;
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    .hpfill{
      height: 100%;
      transition: width .25s ease;
    }
    .hpdivs{
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.18) 1px,
        transparent 1px,
        transparent calc(10% )
      );
      opacity: .45;
      mix-blend-mode: overlay;
    }

    .tooltip-layer{
      position: fixed;
      left: 0; top: 0;
      width: 100vw; height: 100vh;
      pointer-events: none;
      z-index: 9999;
    }
    .tooltip{
      position: fixed;
      max-width: min(520px, 92vw);
      background: rgba(15, 13, 12, .94);
      color: #f5f0e6;
      border: 1px solid rgba(217,164,90,.45);
      border-radius: var(--btnRadius);
      padding: 10px 12px;
      box-shadow: 0 14px 28px rgba(0,0,0,.45);
      pointer-events: none;
      white-space: pre-wrap;
      line-height: 1.25;
      font-size: 12px;
    }
    .k20-selected{ box-shadow: 0 0 0 2px var(--accent) inset, 0 0 0 2px var(--accent); }
    .k20-targetpill{
      font-size: 11px;
      line-height: 1;
      padding: 6px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.18);
      opacity: .9;
      user-select: none;
      white-space: nowrap;
    }
    .k20-targetpill.on{
      border-color: color-mix(in srgb, var(--accent) 70%, rgba(255,255,255,.16));
      box-shadow: 0 0 0 1px var(--accent) inset;
    }

.k20-multibar{
  position: sticky;
  bottom: 0;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--gt-r-lg, 12px);
  background: rgba(13,17,23,.95);
  border: 1px solid rgba(87,227,137,.20);
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  backdrop-filter: blur(10px);
}
.k20-multibar-title{ font-weight:700; opacity:.9; margin-bottom:6px; }
.k20-multibar-controls{ display:flex; align-items:center; gap:10px; }
.k20-multibar-left{ display:flex; flex-direction:column; }
.k20-multibar-right{ display:flex; align-items:center; gap:10px; }
.k20-btn-ghost.isOn{ box-shadow: 0 0 0 2px var(--accent) inset; }
  
/* Toast */
.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  background: rgba(0,0,0,.78);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  border-radius: var(--btnRadius);
  max-width: 420px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.toast.bad{
  border-color: rgba(255,60,60,.35);
}
.kv{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px;}
.kv .k{font-size:.78rem; opacity:.75; margin-bottom:4px;}
.kv .v{font-weight:700;}
.pill{padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-weight:700;}
.tag{padding:5px 9px; border-radius:999px; background:rgba(217,164,90,.14); border:1px solid rgba(217,164,90,.22); font-size:.85rem;}
.textBlock{line-height:1.35;}
.subTitle{font-weight:800; opacity:.95;}


    /* Spells list layout (one item per line) */
    .list{ display:block; }
    .listItem{
      display:block;
      width:100%;
      text-align:left;
      padding: 10px 12px;
      margin: 0 0 8px 0;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      cursor: pointer;
    }
    .listItem:hover{ background: rgba(0,0,0,.22); }
    .listItem.active{
      background: rgba(217,164,90,.14);
      border-color: rgba(217,164,90,.35);
      box-shadow: 0 0 0 1px rgba(217,164,90,.18) inset;
    }
    .listItemTitle{
      font-weight: 900;
      font-size: 14px;
      line-height: 1.15;
      margin-bottom: 4px;
    }
    .listItemMeta{
      opacity: .78;
      font-size: 12px;
      line-height: 1.2;
      white-space: normal;
    }


    /* Player screen (read-only) */
    .player-only .tab, .player-only .k20-multibar, .player-only .k20-side, .player-only .k20-toolbar { display:none !important; }
    /* Player screen gets DM theme via applyTheme -> --bg/--ink */
    .player-only{
      min-height: 100vh;
      background: var(--bg, #0d1117);
      color: var(--ink, #dde4ef);
    }
    .playerTopBar{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; padding:12px 16px;
      border-radius:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.10);
      color: var(--ink, #dde4ef);
      position: sticky; top:0; z-index:10;
    }
    .playerGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
      gap:10px;
    }

    @media (max-width: 767px) {
      .playerGrid{
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }
    }

    .pLocSection{
      margin-bottom: 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      overflow: hidden;
      background: rgba(0,0,0,0.20);
    }
    .pLocHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      font-weight:900;
      letter-spacing:.02em;
      border-bottom:1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.18);
    }
    .pLocMeta{
      font-size:12px;
      opacity:.75;
      font-weight:800;
    }
    .pLocBody{
      padding:10px;
    }
    .pLocBody .playerGrid{
      gap:10px;
    }
    .pCard{
      position:relative;
      border-radius:12px;
      padding:12px 14px;
      overflow:hidden;
      background: rgba(255,255,255,0.05);
      color: var(--ink, #dde4ef);
      border:1px solid rgba(255,255,255,0.10);
      transition: box-shadow 200ms ease, border-color 200ms ease;
    }
    .pCard:hover {
      border-color: rgba(255,255,255,0.18);
    }
    .pStripe{
      position:absolute; left:0; top:0; bottom:0; width:6px;
      background: var(--pstripe, rgba(217,164,90,60));
    }
    .pTitle{ font-weight:900; font-size:14px; line-height:1.1; }
    .pSub{ font-size:12px; opacity:.78; margin-top:2px; }
    .pRow{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
    .pPill{ padding:5px 9px; border-radius:999px; border:1px solid rgba(255,255,255,10); background: rgba(255,255,255,06); font-size:12px; font-weight:800; }
    .pAct{ opacity: 0.45; filter: saturate(0.4); }
    .pTurn{
      outline: 2px solid var(--accent, #f0b429);
      outline-offset: 2px;
      box-shadow: 0 0 20px rgba(240,180,41,.20);
      background: rgba(240,180,41,.06) !important;
    }
    .pCond{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
    .pCond .tag{ font-size:12px; }


    /* Field switcher dropdown */
    .k20-dd{ position: relative; display: inline-block; }
    .k20-dd-menu{
      display:none;
      position: absolute;
      left: 0;
      top: calc(100% + 8px);
      min-width: 280px;
      max-width: calc(100vw - 24px);
      z-index: 80;
      padding: 10px;
    }
    .k20-dd.isOpen .k20-dd-menu{ display:block; }
    .k20-dd-menu .k20-dd-item{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:6px;
    }
    .k20-dd-menu .k20-dd-item:first-child{ margin-top:0; }
    .k20-dd-menu .k20-dd-item .btn-ghost{ width:100%; text-align:left; }


    /* --- Modern UX additions (FIX19) --- */
    .k20-cardhead{
      display:flex;
      align-items:flex-start;
      gap:12px;
    }
    .k20-head-left{ flex: 1 1 auto; min-width: 0; }
    .k20-titleline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .k20-title{
      font-weight: 900;
      font-size: 18px;
      line-height: 1.15;
      letter-spacing: .2px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      cursor:text;
    }
    .k20-badge{
      font-size: 11px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      opacity: .92;
      user-select:none;
    }
    .k20-statrow{
      margin-top: 6px;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      font-size: 12px;
      opacity: .9;
    }
    .k20-statpill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
    }
    .k20-head-right{
      display:flex;
      align-items:center;
      gap:6px;
      flex: 0 0 auto;
    }
    .k20-iconbtn{
      height: 32px;
      min-width: 32px;
      padding: 0 10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      color: var(--ink);
      font-weight: 800;
      font-size: 12px;
      line-height: 1;
    }
    .k20-iconbtn:active{ transform: translateY(1px); }
    .k20-iconbtn.primary{
      border-color: rgba(217,164,90,.35);
      box-shadow: 0 0 0 2px rgba(217,164,90,.12) inset;
    }
    .k20-menupanel{
      margin-top: 6px;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid rgba(99,130,180,.28);
      background: #111720;
      box-shadow: 0 8px 32px rgba(0,0,0,.65);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .k20-menulabel{
      display:flex;
      align-items:center;
      gap:8px;
      font-size: 12px;
      opacity: .9;
    }

    .k20-round-controls{ margin-top: 10px; }

  

    /* Keyboard active selection + FLIP animation */
    .k20-unit-card{ will-change: transform; transition: transform 180ms ease, box-shadow 180ms ease, outline-color 180ms ease; }
    .k20-unit-card.k20-active {
      outline: 2px solid rgba(240,180,41,.55) !important;
      outline-offset: 2px !important;
      box-shadow: 0 0 16px rgba(240,180,41,.10) !important;
    }

    .k20-unit-card.k20-multi{
      outline: 2px dashed rgba(207,168,90,.95);
      outline-offset: 2px;
      box-shadow: 0 0 0 1px rgba(207,168,90,.25);
    }
    /* If active item is also multi-selected, make it solid */
    .k20-unit-card.k20-active.k20-multi{
      outline-style: solid;
    }

  
/* ==== Fullscreen layout override (fill entire viewport) ==== */
body { overflow: hidden; }
#root { display: flex; flex-direction: column; }
.k20-fullscreen, .min-h-screen { height: 100%; }
main { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
/* Ensure central area uses available width */
@media (min-width: 1024px){
  .max-w-\[1800px\]{ max-width: none !important; }
}
/* Allow main content to scroll beneath sticky header */
main{ flex: 1 1 auto; overflow: auto; }

    /* Spell slots emoji markers */
    .k20-slotRow{ display:flex; flex-direction:column; gap:6px; }
    .k20-slotEmojis{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
    .k20-slotEmojiBtn{
      appearance:none; border:none; background:transparent;
      padding:0; margin:0;
      font-size:20px; line-height:1;
      cursor:pointer;
      filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
      transform: translateZ(0);
      transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
    }
    .k20-slotEmojiBtn:hover{ transform: scale(1.08); filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
    .k20-slotEmojiBtn:active{ transform: scale(0.98); opacity:.85; }
    .k20-slotMeta{ font-size:11px; opacity:.75; }


    /* --- K20 2.0 Tactical: Search Palette --- */
    .k20paletteBackdrop{
      position: fixed; inset: 0;
      background: rgba(0,0,0,.62);
      display:flex; align-items:flex-start; justify-content:center;
      padding: 64px 14px 14px;
      z-index: 9999;
    }
    .k20palette{
      width: min(920px, 100%);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      background: rgba(12,16,22,.96);
      box-shadow: 0 24px 90px rgba(0,0,0,.60);
      overflow: hidden;
    }
    .k20paletteTop{
      display:flex; align-items:center; gap:10px;
      padding: 12px 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .k20paletteTop input{
      width: 100%;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(235,242,252,.96);
      border-radius: 12px;
      padding: 10px 12px;
      outline: none;
    }
    .k20paletteBody{
      max-height: min(64vh, 560px);
      overflow: auto;
      padding: 10px 10px 12px;
    }
    .k20resGroupTitle{
      font-size: 12px;
      opacity: .70;
      margin: 10px 6px 6px;
      letter-spacing: .02em;
    }
    .k20resItem{
      display:flex; align-items:flex-start; gap:10px;
      padding: 10px 10px;
      margin: 2px 0;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.03);
      cursor: pointer;
    }
    .k20resItem:hover{ background: rgba(255,255,255,.06); }
    .k20resItem.isActive{
      border-color: rgba(125,211,252,.35);
      background: rgba(125,211,252,.10);
    }
    .k20resIcon{ width: 22px; height: 22px; display:grid; place-items:center; opacity:.85; }
    .k20resMain{ flex: 1; min-width: 0; }
    .k20resName{ font-weight: 800; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
    .k20resMeta{ font-size: 12px; opacity:.68; margin-top: 2px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
    .k20badge{
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      opacity:.85;
      white-space: nowrap;
    }



/* =========================
   K20 2.0 Tactical Theme Plumbing (SCOPED)
   Apply vars to K20 UI only (avoid breaking inner widgets/iframes)
   ========================= */
.k20root, .k20app, #root .k20root, #root .k20app {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
.k20root *, .k20app * { border-color: var(--cardBorder); }

/* shells */
.k20topbar, header.k20topbar, .k20side, .k20rail, .k20nav {
  background: var(--panel) !important;
  color: var(--ink) !important;
}
.k20panel, .k20Pane, .k20PaneBody, .k20splitPane, .k20splitMain {
  background: var(--panel) !important;
  color: var(--ink) !important;
}
.k20card, .k20-unit-card, .k20box, .k20Box, .k20listItem {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--cardBorder) !important;
}

/* inputs in K20 only */
.k20root input, .k20root select, .k20root textarea,
.k20app input, .k20app select, .k20app textarea,
.k20-input, .k20-select, .k20-textarea {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.k20root input::placeholder, .k20app input::placeholder,
.k20root textarea::placeholder, .k20app textarea::placeholder {
  color: rgba(233,238,245,.55) !important;
}
/* buttons in K20 only */
.k20root button, .k20app button,
.k20btn, .k20-btn, .btn-k20, .k20iconBtn {
  background: var(--btnBg) !important;
  color: var(--btnText) !important;
  border: var(--btnBorder) !important;
  box-shadow: var(--btnShadow) !important;
  background-image: var(--btnGradient) !important;
  border-radius: var(--btnRadius) !important;
}
.k20app button.k20-slotEmojiBtn {
  background: unset !important;
  background-image: unset !important;
  box-shadow: unset !important;
}
.k20root button:hover, .k20app button:hover,
.k20btn:hover, .k20-btn:hover, .btn-k20:hover, .k20iconBtn:hover {
  filter: brightness(1.04);
}
.k20root .btn-ghost, .k20app .btn-ghost,
.k20root .k20-btn-ghost, .k20app .k20-btn-ghost, .k20ghost {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.k20-slotMeta {
  white-space: nowrap;
}
/* links + badges */
.k20root a, .k20app a { color: var(--accent) !important; }
.k20kbd { border-color: rgba(255,255,255,.16) !important; color: rgba(233,238,245,.85) !important; background: rgba(255,255,255,.06) !important; }




/* =========================
   K20 2.0 Tactical: Smooth UI motion + theme transitions
   ========================= */
.k20root, .k20app {
  transition: background-color 220ms ease, color 220ms ease;
}
.k20topbar, header.k20topbar, .k20side, .k20rail, .k20nav,
.k20panel, .k20Pane, .k20PaneBody, .k20splitPane, .k20splitMain,
.k20card, .k20-unit-card, .k20box, .k20Box, .k20listItem {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 180ms ease;
  will-change: background-color, color, border-color, box-shadow, transform;
}
.k20card:hover, .k20-unit-card:hover, .k20box:hover, .k20Box:hover, .k20listItem:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.k20root button, .k20app button,
.k20btn, .k20-btn, .btn-k20, .k20iconBtn,
.k20root input, .k20app input, .k20root select, .k20app select, .k20root textarea, .k20app textarea {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}
.k20root button:active, .k20app button:active { transform: translateY(1px); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .k20root, .k20app,
  .k20topbar, header.k20topbar, .k20side, .k20rail, .k20nav,
  .k20panel, .k20Pane, .k20PaneBody, .k20splitPane, .k20splitMain,
  .k20card, .k20-unit-card, .k20box, .k20Box, .k20listItem,
  .k20root button, .k20app button,
  .k20btn, .k20-btn, .btn-k20, .k20iconBtn,
  .k20root input, .k20app input, .k20root select, .k20app select, .k20root textarea, .k20app textarea {
    transition: none !important;
    transform: none !important;
  }
}


/* Panels: force to vars (covers legacy names that weren't mapped) */
.k20root .k20pane, .k20app .k20pane,
.k20root .k20Pane, .k20app .k20Pane,
.k20root .k20paneLeft, .k20app .k20paneLeft,
.k20root .k20paneRight, .k20app .k20paneRight,
.k20root .k20paneCenter, .k20app .k20paneCenter,
.k20root .k20section, .k20app .k20section,
.k20root .k20Section, .k20app .k20Section,
.k20root .k20modal, .k20app .k20modal,
.k20root .k20Modal, .k20app .k20Modal {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--cardBorder) !important;
}
.k20root .k20surface, .k20app .k20surface,
.k20root .k20Surface, .k20app .k20Surface {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--cardBorder) !important;
}


/* ===== Fix: legacy classnames not covered ===== */
.k20root .k20-panel, .k20app .k20-panel,
.k20root aside.k20-panel, .k20app aside.k20-panel {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--cardBorder) !important;
}
.k20root .k20-iconbtn, .k20app .k20-iconbtn,
.k20root .k20iconBtn, .k20app .k20iconBtn {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
/* ensure cards inside panels inherit */
.k20root .k20-panel .k20card, .k20app .k20-panel .k20card { background: var(--card) !important; }


/* ===== Smooth motion: include legacy selectors + modal open ===== */
.k20-panel, aside.k20-panel { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 180ms ease; }
.k20-iconbtn { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms ease; }
.k20-iconbtn:hover { filter: brightness(1.06); }
.k20-iconbtn:active { transform: translateY(1px); }

/* modal/palette animation */
@keyframes k20FadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes k20PopIn { from { transform: translateY(-6px) scale(.98); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } }
.k20paletteBackdrop { animation: k20FadeIn 160ms ease both; }
.k20palette { animation: k20PopIn 180ms ease both; }


/* =========================
   K20 2.1 Layout Redesign
   ========================= */
.k20fieldLayout{
  display:grid;
  grid-template-columns: var(--dockL, 310px) minmax(0, 1fr) var(--dockR, 340px);
  gap: 10px;
  align-items: start;
}

/* базовый док */
.k20dock{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(0,0,0,.32);
  min-width: 0;
}

/* левый док остаётся В СВОЕЙ колонке, но липнет при скролле k20content */
.k20dockLeft{
  position: sticky;
  top: 14px; /* совпадает с верхним padding у .k20content */
  align-self: start;
  max-height: calc(100vh - var(--gt-top) - 28px);
  transition: transform 220ms ease, opacity 220ms ease;
}

/* чтобы длинное содержимое левого дока скроллилось внутри него */
.k20dockLeft .k20dockBody{
  max-height: calc(100vh - var(--gt-top) - 28px - 53px); /* 53px ≈ header дока */
  overflow: auto;
}

/* правый док оставляем в потоке как был */
.k20dockRight{
  transition: transform 220ms ease, opacity 220ms ease;
}

.k20dockHiddenL{
  transform: translateX(-10px);
  opacity: 0;
  pointer-events: none;
}
.k20dockHiddenR{
  transform: translateX(10px);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1100px){
  .k20fieldLayout{
    grid-template-columns: 1fr;
  }

  .k20dockLeft,
  .k20dockRight{
    position: fixed;
    top: 56px;
    bottom: 12px;
    z-index: 60;
  }

  .k20dockLeft{
    left: 12px;
    width: min(360px, calc(100vw - 24px));
    max-height: none;
  }

  .k20dockLeft .k20dockBody{
    max-height: none;
    overflow: auto;
  }

  .k20dockRight{
    right: 12px;
    width: min(420px, calc(100vw - 24px));
  }
}

.monster__list:hover {
  background-color: var(--panel);
}

select option {
  color: #000;
}

.k20dockHeader{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.k20dockTitle{ font-weight:900; font-size:12px; opacity:.85; letter-spacing:.02em; }
.k20dockBody{ padding:10px; }
.k20dockTabs{ display:flex; gap:6px; margin-left:auto; }
.k20dockTab{
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-size:12px;
  opacity:.88;
}
.k20dockTab.isActive{ background: rgba(125,211,252,.16); border-color: rgba(125,211,252,.26); opacity:1; }
.k20dockClose{
  margin-left: auto;
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.k20dockClose:hover{ filter: brightness(1.06); }


/* topbar quick toggles */
.k20topToggles{ display:flex; gap:8px; align-items:center; margin-left:10px; }
.k20pillBtn{
  display:flex; gap:8px; align-items:center;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-size:12px;
  opacity:.9;
}
.k20pillBtn:hover{ filter: brightness(1.06); }

/* ════════════════════════════════════════════════
   K20 — Grimoire Terminal UI
   Fonts: DM Mono (mono/numbers) + Nunito (body)
   Accent: #57e389 green / #f0b429 gold / #f06060 red
   ════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --gt-bg:      #0d1117;
  --gt-s0:      #111720;
  --gt-s1:      #161d2b;
  --gt-s2:      #1c2536;
  --gt-s3:      #232e42;
  --gt-s4:      #2a3650;

  /* Borders */
  --gt-b0:      rgba(99,130,180,.10);
  --gt-b1:      rgba(99,130,180,.18);
  --gt-b2:      rgba(99,130,180,.28);

  /* Text */
  --gt-ink:     #c9d6e8;
  --gt-ink2:    #7a90b0;
  --gt-ink3:    #485870;

  /* Accents */
  --gt-green:   #57e389;
  --gt-green2:  #3ab868;
  --gt-gold:    #f0b429;
  --gt-gold2:   #ffd060;
  --gt-red:     #f06060;
  --gt-red2:    #ff8080;
  --gt-blue:    #60aadd;

  /* Typography */
  --gt-mono:    'DM Mono', 'Fira Code', ui-monospace, monospace;
  --gt-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* Geometry */
  --gt-r:       8px;
  --gt-r-sm:    5px;
  --gt-r-lg:    12px;
  --gt-rail:    64px;
  --gt-top:     52px;

  /* Animation */
  --gt-ease:    cubic-bezier(.4,0,.2,1);
  --gt-t:       150ms;
}

/* ─── Base ─── */
/* Body base — no !important so applyTheme inline vars win */
body {
  background: var(--bg, var(--gt-bg));
  color: var(--ink, var(--gt-ink));
  font-family: var(--gt-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* DM shell only gets gt-bg */
.k20app {
  background: var(--gt-bg) !important;
}

/* ─── App Shell ─── */
.k20app {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--gt-rail) 1fr;
  background: var(--gt-bg);
  overflow: hidden;
}

/* ─── Navigation Rail ─── */
.k20rail {
  width: var(--gt-rail);
  height: 100vh;
  background: var(--gt-s0);
  border-right: 1px solid var(--gt-b0);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.k20brand {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--gt-b0);
  flex-shrink: 0;
}
.k20brandMark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gt-green) 0%, var(--gt-green2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gt-mono);
  font-size: 11px; font-weight: 500;
  color: #0d1117;
  letter-spacing: 1px;
  box-shadow: 0 0 16px rgba(87,227,137,.25);
}
.k20brandTxt {
  font-family: var(--gt-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--gt-ink3);
  text-transform: uppercase;
}

.k20railBtns {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 0;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.k20railBtns::-webkit-scrollbar { display: none; }

.k20railBtn {
  width: 50px; height: 46px;
  border-radius: var(--gt-r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gt-ink3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
  transition: color var(--gt-t) var(--gt-ease),
              background var(--gt-t) var(--gt-ease),
              border-color var(--gt-t) var(--gt-ease);
  position: relative;
}
.k20railBtn:hover {
  background: var(--gt-s2);
  color: var(--gt-ink);
  border-color: var(--gt-b1);
}
.k20railBtn:active { transform: scale(.96); }
.k20railBtn.isActive {
  background: rgba(87,227,137,.08);
  border-color: rgba(87,227,137,.25);
  color: var(--gt-green);
}
.k20railBtn.isActive::after {
  content: "";
  position: absolute;
  right: -1px; top: 30%; bottom: 30%;
  width: 2px;
  background: var(--gt-green);
  border-radius: 2px 0 0 2px;
}
.k20railIco { font-size: 16px; line-height: 1; }
.k20railLbl {
  font-family: var(--gt-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
}

.k20railBottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 0 10px;
  width: 100%;
  border-top: 1px solid var(--gt-b0);
}

/* ─── Main ─── */
.k20main {
  height: 100vh;
  display: grid;
  grid-template-rows: var(--gt-top) 1fr;
  overflow: hidden;
}

/* ─── Topbar ─── */
.k20topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--gt-b0);
  background: rgba(13,17,23,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: var(--gt-top);
  z-index: 10;
}
.k20topTitle {
  font-family: var(--gt-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gt-ink);
}
.k20topMeta {
  font-family: var(--gt-mono);
  font-size: 10px;
  color: var(--gt-ink3);
  letter-spacing: .5px;
  margin-top: 2px;
}
.k20topGrow { flex: 1; min-width: 0; }

/* ─── Round badge ─── */
.k20-round-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(240,180,41,.08);
  border: 1px solid rgba(240,180,41,.22);
  border-radius: var(--gt-r);
  padding: 4px 14px;
  font-family: var(--gt-mono);
  font-size: 11px;
  color: var(--gt-gold);
  letter-spacing: .5px;
}

/* ─── Search ─── */
.k20search {
  width: min(400px, 36vw);
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gt-b1);
  background: var(--gt-s1);
  border-radius: var(--gt-r);
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color var(--gt-t) var(--gt-ease), box-shadow var(--gt-t) var(--gt-ease);
}
.k20search:hover {
  border-color: rgba(87,227,137,.30);
  box-shadow: 0 0 0 3px rgba(87,227,137,.06);
}
.k20search input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--gt-ink2);
  font-family: var(--gt-mono);
  font-size: 12px;
  cursor: pointer;
}
.k20kbd {
  font-family: var(--gt-mono);
  font-size: 9px;
  color: var(--gt-ink3);
  border: 1px solid var(--gt-b1);
  background: var(--gt-s2);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 1px;
}

/* ─── Pill buttons (topbar) ─── */
.k20topBtns, .k20topToggles { display: flex; align-items: center; gap: 5px; }
.k20pillBtn {
  border: 1px solid var(--gt-b1);
  background: var(--gt-s2);
  color: var(--gt-ink2);
  border-radius: var(--gt-r-sm);
  padding: 5px 12px;
  font-family: var(--gt-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all var(--gt-t) var(--gt-ease);
  white-space: nowrap;
}
.k20pillBtn:hover {
  background: var(--gt-s3);
  color: var(--gt-ink);
  border-color: var(--gt-b2);
}
.k20pillBtn.primary {
  background: rgba(87,227,137,.10);
  border-color: rgba(87,227,137,.28);
  color: var(--gt-green);
}
.k20pillBtn.primary:hover {
  background: rgba(87,227,137,.18);
  border-color: rgba(87,227,137,.45);
}

/* ─── Content ─── */
.k20content {
  overflow: auto;
  padding: 14px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--gt-s3) transparent;
}
.k20content::-webkit-scrollbar { width: 4px; }
.k20content::-webkit-scrollbar-thumb { background: var(--gt-s3); border-radius: 2px; }

/* ─── Panels & Cards ─── */
.k20-panel, .k20-card, .k20-unit-card {
  background: var(--gt-s1) !important;
  border: 1px solid var(--gt-b0) !important;
  border-radius: var(--gt-r) !important;
  box-shadow: none !important;
}
.k20-panel { background: var(--gt-s0) !important; }

/* ─── Buttons ─── */
.btn-k20, .k20-btn, .k20-btn.k20-btn-primary {
  background: rgba(87,227,137,.10) !important;
  border: 1px solid rgba(87,227,137,.25) !important;
  color: var(--gt-green) !important;
  border-radius: var(--gt-r-sm) !important;
  font-family: var(--gt-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .5px !important;
  box-shadow: none !important;
  background-image: none !important;
  cursor: pointer;
  padding: 6px 12px !important;
  transition: all var(--gt-t) var(--gt-ease);
  white-space: nowrap;
}
.btn-k20:hover, .k20-btn:hover {
  background: rgba(87,227,137,.18) !important;
  border-color: rgba(87,227,137,.45) !important;
}
.btn-ghost, .k20-btn.k20-btn-ghost {
  background: var(--gt-s2) !important;
  border: 1px solid var(--gt-b0) !important;
  color: var(--gt-ink2) !important;
  border-radius: var(--gt-r-sm) !important;
  font-family: var(--gt-mono) !important;
  font-size: 11px !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 5px 10px !important;
  transition: all var(--gt-t) var(--gt-ease);
}
.btn-ghost:hover, .k20-btn.k20-btn-ghost:hover {
  background: var(--gt-s3) !important;
  color: var(--gt-ink) !important;
  border-color: var(--gt-b1) !important;
}
.k20-iconbtn {
  width: 30px !important; height: 30px !important;
  font-size: 13px !important;
  background: var(--gt-s2) !important;
  border: 1px solid var(--gt-b0) !important;
  color: var(--gt-ink3) !important;
  border-radius: var(--gt-r-sm) !important;
  box-shadow: none !important;
  background-image: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all var(--gt-t) var(--gt-ease);
}
.k20-iconbtn:hover {
  background: var(--gt-s3) !important;
  color: var(--gt-ink) !important;
  border-color: var(--gt-b1) !important;
}
.k20-iconbtn.primary {
  background: rgba(87,227,137,.10) !important;
  border-color: rgba(87,227,137,.28) !important;
  color: var(--gt-green) !important;
}

/* ─── Inputs ─── */
.k20-input, .k20-select, .k20-textarea,
input[type="text"], input[type="number"], textarea, select {
  border-radius: var(--gt-r-sm) !important;
  background: var(--gt-s1) !important;
  border-color: var(--gt-b1) !important;
  color: var(--gt-ink) !important;
  font-family: var(--gt-body) !important;
}
.k20-input:focus, .k20-select:focus, .k20-textarea:focus,
input:focus, textarea:focus, select:focus {
  border-color: rgba(87,227,137,.45) !important;
  box-shadow: 0 0 0 2px rgba(87,227,137,.08) !important;
  outline: none !important;
}

/* ─── Card states ─── */
.k20-active {
  outline: 2px solid rgba(240,180,41,.55) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 16px rgba(240,180,41,.10) !important;
}
.k20-acted {
  opacity: .45 !important;
  filter: saturate(.5) !important;
  box-shadow: none !important;
}
.k20-card.k20-player {
  border-color: rgba(96,170,221,.25) !important;
  box-shadow: 0 0 0 1px rgba(96,170,221,.08) inset !important;
}
.k20-card.k20-player .k20-title { color: #93c5e8 !important; }

/* ─── Card typography ─── */
.k20-title {
  font-family: var(--gt-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  line-height: 1.25 !important;
  color: var(--gt-ink) !important;
}
.k20-badge {
  background: var(--gt-s3) !important;
  border: 1px solid var(--gt-b1) !important;
  border-radius: 4px !important;
  font-family: var(--gt-mono) !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--gt-ink3) !important;
  padding: 2px 5px !important;
}
.k20-statpill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  font-family: var(--gt-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  background: var(--gt-s2) !important;
  border: 1px solid var(--gt-b0) !important;
  color: var(--gt-ink2) !important;
}
.k20-statrow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-items: center !important;
}
.k20-titleline {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
.k20-cardhead {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* ─── Target pill ─── */
.k20-targetpill {
  font-family: var(--gt-mono) !important;
  font-size: 9px !important;
  letter-spacing: .5px !important;
}
.k20-targetpill.on {
  background: rgba(240,96,96,.18) !important;
  border-color: rgba(240,96,96,.35) !important;
  color: #ff9090 !important;
}

/* ─── Menu panel ─── */
.k20-menupanel {
  background: var(--gt-s1) !important;
  border: 1px solid var(--gt-b2) !important;
  border-radius: var(--gt-r) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 200px !important;
}
.k20-menulabel {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: var(--gt-r-sm) !important;
  font-family: var(--gt-body) !important;
  font-size: 12px !important;
  color: var(--gt-ink2) !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all var(--gt-t) var(--gt-ease);
}
.k20-menulabel:hover {
  background: var(--gt-s2) !important;
  border-color: var(--gt-b1) !important;
  color: var(--gt-ink) !important;
}

/* ─── Dock ─── */
.k20dock {
  background: var(--gt-s0) !important;
  border: 1px solid var(--gt-b0) !important;
  border-radius: var(--gt-r-lg) !important;
}
.k20dockHeader {
  border-bottom: 1px solid var(--gt-b0) !important;
  padding: 8px 12px !important;
  border-radius: var(--gt-r-lg) var(--gt-r-lg) 0 0 !important;
}
.k20dockTitle {
  font-family: var(--gt-mono) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--gt-ink3) !important;
}
.k20dockBody { padding: 10px !important; }
.k20dockClose {
  font-size: 12px !important;
  color: var(--gt-ink3) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  transition: color var(--gt-t) var(--gt-ease);
}
.k20dockClose:hover { color: var(--gt-ink) !important; }

/* ─── Dropdowns ─── */
.k20-dd-menu {
  background: var(--gt-s1) !important;
  border: 1px solid var(--gt-b2) !important;
  border-radius: var(--gt-r) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}

/* ─── Font headings ─── */
.font-extrabold, .font-bold, .font-black, .font-semibold {
  font-family: var(--gt-body) !important;
}

/* ─── Wider workspace ─── */
.max-w-7xl { max-width: 1900px !important; }
header.sticky.top-0 { display: none !important; }

/* ─── Scrollbars global ─── */
* { scrollbar-width: thin; scrollbar-color: var(--gt-s3) transparent; }
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-thumb { background: var(--gt-s3); border-radius: 2px; }

/* ─── Mobile ─── */
@media (max-width: 640px) {
  :root { --gt-rail: 48px; --gt-top: 48px; }
  .k20railBtn { width: 42px; height: 42px; }
  .k20railIco { font-size: 14px; }
  .k20railLbl { display: none; }
  .k20-title { font-size: 13px !important; }
  .k20-statpill { font-size: 10px !important; }
  .k20content { padding: 8px 10px !important; }
  .k20topbar { padding: 0 10px !important; }
  .k20search { width: 130px !important; }
  .k20-iconbtn { width: 26px !important; height: 26px !important; font-size: 12px !important; }
}