/* ====================================================================
   nx-player · една карта: полето, времето, пусни·назад·напред,
   запис·снимка·прати — един мащаб с плочките и със sidebar-а (T137)
   ==================================================================== */
.nx-pl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;border-radius:16px;
  border:1px solid var(--nx-line);background:var(--nx-surface-1)}
.nx-pl__write{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-height:48px;padding:0 6px 0 14px;
  border-radius:12px;background:var(--nx-surface-2);border:1px solid var(--nx-line);transition:border-color .15s}
.nx-pl__write:focus-within{border-color:var(--nx-accent)}
.nx-pl__field{flex:1;min-width:0;height:44px;border:0;background:none;color:var(--nx-text);font:inherit;font-size:15px;outline:none}
.nx-pl__time{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-height:28px;padding:0 6px;font-size:12px;
  color:var(--nx-text-3);font-variant-numeric:tabular-nums}
.nx-pl__time[hidden]{display:none}
.nx-pl__what{font-weight:600;color:var(--nx-text)}
.nx-pl__track{position:relative;flex:1;height:24px;cursor:pointer}
.nx-pl__track::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--nx-surface-3)}
.nx-pl__track b{position:absolute;left:0;top:10px;height:4px;border-radius:2px;background:var(--nx-accent)}
.nx-pl__track i{position:absolute;top:5px;width:14px;height:14px;margin-left:-7px;border-radius:7px;background:var(--nx-accent)}
.nx-pl__key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:6px;
  border-radius:12px;border:1px solid var(--nx-line);background:var(--nx-surface-2);color:var(--nx-text);font-size:11.5px;
  transition:background .15s,border-color .15s,color .15s}
.nx-pl__key svg{width:20px;height:20px}
.nx-pl__key:active{transform:scale(.97)}
.nx-pl__key span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx-pl__key[data-id="play"]{border-color:var(--nx-ok);color:var(--nx-ok)}
.nx-pl__key[data-id="rec"]{border:1.5px solid var(--nx-err);color:var(--nx-err);background:var(--nx-err-bg)}
.nx-pl__key[data-id="rec"] svg{fill:var(--nx-err);stroke:none}
.nx-pl[data-state="записва"] .nx-pl__key[data-id="rec"]{background:var(--nx-err);color:#fff;font-variant-numeric:tabular-nums;animation:nx-pl-ring 1.4s ease-out infinite}
.nx-pl[data-state="записва"] .nx-pl__key[data-id="rec"] svg{fill:#fff}
@keyframes nx-pl-ring{0%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}100%{box-shadow:0 0 0 10px rgba(220,38,38,0)}}
.nx-pl__key[data-id="send"].is-ready{background:var(--nx-accent);border-color:var(--nx-accent);color:#fff}
.nx-pl[data-state="праща"] .nx-pl__key[data-id="send"]{opacity:.6}
.nx-pl__key.is-done{background:var(--nx-ok-bg)!important;border-color:var(--nx-ok)!important;color:var(--nx-ok)!important}
.nx-pl__key.is-done svg{fill:none!important;stroke:currentColor}
/* без външната рамка на картата — отделяше повече от нужното (owner 17:06); ако не хареса, връща се */
.nx-pl{border:0;padding:0;background:none;border-radius:0}
/* лентата на времето — винаги там, цялата е цел за пръста (T162 6) */
.nx-pl__time{min-height:36px;cursor:pointer}
.nx-pl__track{height:32px}
.nx-pl__track::before{top:14px}
.nx-pl__track b{top:14px}
.nx-pl__track i{top:9px}
.nx-pl__now{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.nx-pl[data-state="записва"] .nx-pl__what{color:#dc2626}
.nx-pl[data-state="свири"] .nx-pl__what{color:var(--nx-ok)}