:root {
  --TMV-0: #000;
  --TMV-1: #111;
  --TMV-2: #161616;
  --TMV-3: #333;
  --TMV-f: #fff;
  --TMV-blue: #4aa3ff;
  --TMV-red: #ff4a4a;
  --TMV-yel: #ffcc66;

  --TMV-radius: 10px;
  --TMV-gap: 12px;

  --TMV-topbar-h: 50px;
  --TMV-status-h: 50px;

  --TMV-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans",
    sans-serif;

  /* Scrollbars */
  --TMV-scroll-track: var(--TMV-1);
  --TMV-scroll-thumb: var(--TMV-2);
  --TMV-scroll-thumb-hover: var(--TMV-3);
  --TMV-scroll-border: var(--TMV-1);

  /* Ranges */
  --TMV-range-track: var(--TMV-1);
  --TMV-range-track-border: var(--TMV-1);
  --TMV-range-fill: var(--TMV-2);
  --TMV-range-thumb: var(--TMV-2);
  --TMV-range-thumb-hover: var(--TMV-blue);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--TMV-font);
  background: var(--TMV-0);
  color: var(--TMV-f);
}
.TMV_App {
  height: 100vh;
  display: grid;
  grid-template-rows: var(--TMV-topbar-h) 1fr var(--TMV-status-h);
  min-height: 0;
}

.TMV_TopBar {
  height: var(--TMV-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--TMV-gap);
  background: var(--TMV-1);
  min-width: 0;
}

.TMV_TopBarLeft,
.TMV_TopBarRight {
  display: flex;
  align-items: center;
  min-width: 0;
}

.TMV_Menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.TMV_MenuBtn {
  appearance: none;
  border: none;
  background: none;
  color: var(--TMV-f);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.TMV_MenuBtn:hover {
  background: var(--TMV-3);
}
.TMV_MenuBtn--panic:hover {
  color: var(--TMV-0);
  background: var(--TMV-yel);
}

.TMV_Main {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "player folders"
    "playlist folders";
  gap: var(--TMV-gap);
  padding: var(--TMV-gap);
}

.TMV_Col--player {
  grid-area: player;
}
.TMV_Col--playlist {
  grid-area: playlist;
}
.TMV_Col--folders {
  grid-area: folders;
}

.TMV_Col {
  border: none;
  border-radius: var(--TMV-radius);
  background: var(--TMV-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.TMV_ColHeader {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.TMV_ColTitle {
  font-weight: 800;
  font-size: 14px;
  color: var(--TMV-f);
  white-space: nowrap;
}

.TMV_ColMeta {
  font-size: 12px;
  color: var(--TMV-f);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.TMV_NowPlaying {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.TMV_Col--player {
  align-self: start;
}
.TMV_Player {
  flex: 1;
  padding: var(--TMV-gap);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.TMV_Audio {
  width: 100%;
  display: none;
}

.TMV_PlayerRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.TMV_PlayerRow--controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.TMV_PlayerRow--controls > div:nth-child(2) {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.TMV_PlayerRow--controls > div:last-child {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.TMV_Btn {
  text-align: center;
  appearance: none;
  border: 1px solid var(--TMV-1);
  background: var(--TMV-1);
  color: var(--TMV-f);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.TMV_Btn:hover {
  background: var(--TMV-3);
}
.TMV_Btn:active {
  transform: translateY(1px);
}

.TMV_Btn--mini {
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 14px;
}

.TMV_Btn--primary {
  border-color: var(--TMV-1);
}
.TMV_Btn--primary:hover {
  background: var(--TMV-blue);
}

.TMV_Btn--primary.TMV_Btn--primary-armed {
  border-color: var(--TMV-blue);
  animation: TMV_PrimaryBlink 1.8s ease-in-out infinite;
}
.TMV_Btn--primary.TMV_Btn--primary-armed:hover {
  animation-duration: 1.2s;
}

@keyframes TMV_PrimaryBlink {
  0% {
    background: rgba(74, 163, 255, 0.1);
  }
  50% {
    background: rgba(74, 163, 255, 0.5);
  }
  100% {
    background: rgba(74, 163, 255, 0.1);
  }
}

.TMV_Btn--danger {
  border-color: var(--TMV-1);
}
.TMV_Btn--danger:hover {
  border: 1px solid var(--TMV-red);
  background: var(--TMV-red);
}

.TMV_Btn--danger.TMV_Btn--danger-armed {
  border-color: var(--TMV-red);
  animation: TMV_DangerBlink 1.8s ease-in-out infinite;
}
.TMV_Btn--danger.TMV_Btn--danger-armed:hover {
  animation-duration: 1.2s;
}

@keyframes TMV_DangerBlink {
  0% {
    background: rgba(255, 74, 74, 0.1);
  }
  50% {
    background: rgba(255, 74, 74, 0.5);
  }
  100% {
    background: rgba(255, 74, 74, 0.1);
  }
}

.TMV_Btn--active {
  border-color: var(--TMV-blue);
  background: var(--TMV-1);
}
.TMV_Seek {
  flex: 1;
}

.TMV_Time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--TMV-f);
}

.TMV_VolWrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.TMV_Label {
  color: var(--TMV-f);
}
.TMV_Volume {
  width: 160px;
}

.TMV_Playlist {
  flex: 1;
  overflow: auto;
  padding: 8px;
  min-height: 0;
}
.TMV_PlayRow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.TMV_PlayRow .TMV_PlayItem {
  flex: 1 1 auto;
  min-width: 0;
}

.TMV_DownloadBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--TMV-2);
  color: var(--TMV-f);
  text-decoration: none;
  cursor: pointer;
  font-size: 9px;
}

.TMV_DownloadBtn:hover {
  background: var(--TMV-1);
}
.tmv-download {
  font-size: 14px;
}
.TMV_PlayItem {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
  background: var(--TMV-2);
}
.TMV_PlayItem:hover {
  background: var(--TMV-1);
}
.TMV_PlayItem:focus {
  outline: none;
  border-color: var(--TMV-3);
}

.TMV_PlayItem--active {
  border-color: var(--TMV-1);
  background: var(--TMV-2);
}
.TMV_PlayItem--playing {
  border-color: transparent;
  background: var(--TMV-0);
}

.TMV_PlayItemMain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.TMV_PlayItemName {
  font-size: 13px;
  color: var(--TMV-f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}
.TMV_PlayItemOrd {
  color: var(--TMV-f);
  font-weight: bold;
  min-width: 28px;
  text-align: right;
}
.TMV_PlayItemTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.TMV_Empty {
  padding: 14px;
  border: none;
  background: var(--TMV-2);
}
.TMV_EmptyTitle {
  font-weight: 800;
  margin-bottom: 6px;
}
.TMV_EmptyText {
  color: var(--TMV-f);
  font-size: 13px;
  line-height: 1.4;
}
.TMV_Path {
  color: var(--TMV-f);
  font-weight: 700;
}
.TMV_Kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 2px 6px;
  border: 1px solid var(--TMV-1);
  border-radius: 6px;
  background: var(--TMV-1);
  color: var(--TMV-f);
}

.TMV_Folders {
  flex: 1;
  overflow: auto;
  padding: 8px;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  align-content: start;
}

.TMV_Folder {
  border: 1px solid var(--TMV-1);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--TMV-2);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.TMV_Folder:hover {
  background: var(--TMV-1);
}
.TMV_Folder:focus {
  outline: none;
  border-color: var(--TMV-blue);
}

.TMV_Folder--armed {
  border-color: var(--TMV-3);
}
.TMV_Folder--select {
  border-color: var(--TMV-blue);
}

.TMV_FolderName {
  font-size: 13px;
  color: var(--TMV-f);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.TMV_FolderSlug {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.TMV_FolderCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  color: var(--TMV-f);
  font-size: 12px;
  flex: 0 0 auto;
  margin-left: auto;
}
.TMV_StatusBar {
  height: var(--TMV-status-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--TMV-gap);
  padding: 0 var(--TMV-gap);
  background: var(--TMV-1);
  min-width: 0;
}

.TMV_StatusText {
  justify-self: start;
  min-width: 0;
  font-size: 13px;
  color: var(--TMV-f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.TMV_Specs {
  justify-self: right;
  min-width: 0;
  font-size: 12px;
  color: var(--TMV-f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.TMV_VolWrap {
  justify-self: end;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.TMV_Playlist,
.TMV_Folders,
.TMV_LogBox {
  scrollbar-width: thin;
  scrollbar-color: var(--TMV-scroll-thumb) var(--TMV-scroll-track);
}

.TMV_Playlist::-webkit-scrollbar,
.TMV_Folders::-webkit-scrollbar,
.TMV_LogBox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.TMV_Playlist::-webkit-scrollbar-track,
.TMV_Folders::-webkit-scrollbar-track,
.TMV_LogBox::-webkit-scrollbar-track {
  background: var(--TMV-scroll-track);
  border-left: 1px solid var(--TMV-scroll-border);
}

.TMV_Playlist::-webkit-scrollbar-thumb,
.TMV_Folders::-webkit-scrollbar-thumb,
.TMV_LogBox::-webkit-scrollbar-thumb {
  background: var(--TMV-1);
  border-radius: 999px;
  border: 2px solid var(--TMV-scroll-track);
  min-height: 32px;
}

.TMV_Playlist::-webkit-scrollbar-thumb:hover,
.TMV_Folders::-webkit-scrollbar-thumb:hover,
.TMV_LogBox::-webkit-scrollbar-thumb:hover {
  background: var(--TMV-1);
}

.TMV_Playlist::-webkit-scrollbar-thumb:active,
.TMV_Folders::-webkit-scrollbar-thumb:active,
.TMV_LogBox::-webkit-scrollbar-thumb:active {
  background: var(--TMV-1);
}

.TMV_Playlist::-webkit-scrollbar-corner,
.TMV_Folders::-webkit-scrollbar-corner,
.TMV_LogBox::-webkit-scrollbar-corner {
  background: var(--TMV-1);
}

.TMV_Seek,
.TMV_Volume {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

.TMV_Seek::-webkit-slider-runnable-track,
.TMV_Volume::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--TMV-0);
  border: none;
}

.TMV_Seek::-webkit-slider-thumb,
.TMV_Volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--TMV-3);
  border: none;
}

.TMV_Seek:hover::-webkit-slider-thumb,
.TMV_Volume:hover::-webkit-slider-thumb {
  background: var(--TMV-range-thumb-hover);
}

/* Firefox */
.TMV_Seek::-moz-range-track,
.TMV_Volume::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--TMV-0);
  border: none;
}

.TMV_Seek::-moz-range-progress,
.TMV_Volume::-moz-range-progress {
  height: 6px;
  background: var(--TMV-0);
  border: none;
}

.TMV_Seek::-moz-range-thumb,
.TMV_Volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--TMV-0);
  border: none;
}

/* --------------------------------------------------------------------------
   Login page
-------------------------------------------------------------------------- */

.TMV_Body--login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.TMV_LoginWrap {
  width: 100%;
  max-width: 384px;
  padding: 20px;
}

.TMV_LoginCard {
  border: 1px solid var(--TMV-1);
  border-radius: var(--TMV-radius);
  background: var(--TMV-1);
  padding: 18px;
}

.TMV_Form {
  margin-top: 14px;
}
.TMV_Field {
  margin-bottom: 12px;
}
.TMV_Field--actions {
  margin-top: 0;
  text-align: right;
  margin-bottom: 0;
}
.g-recaptcha {
  display: flex;
  justify-content: end;
}
.TMV_Input {
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--TMV-1);
  background: var(--TMV-0);
  color: var(--TMV-f);
}
.TMV_Input:focus {
  outline: none;
  border-color: var(--TMV-blue);
}
/* Placeholder */
.TMV_Input::placeholder {
  color: var(--TMV-f);
  opacity: 1;
}

/* Autofill (Chrome / Edge / Brave) */
.TMV_Input:-webkit-autofill,
.TMV_Input:-webkit-autofill:hover,
.TMV_Input:-webkit-autofill:focus,
.TMV_Input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--TMV-f) !important;
  caret-color: var(--TMV-f);
  border: 1px solid var(--TMV-1);
  transition: background-color 9999s ease-out;
}

/* Firefox autofill */
.TMV_Input:autofill {
  background-color: var(--TMV-1) !important;
  color: var(--TMV-f) !important;
}

/* Disabled / readonly consistency */
.TMV_Input:disabled,
.TMV_Input[readonly] {
  background-color: var(--TMV-1);
  color: var(--TMV-f);
  cursor: not-allowed;
}
.TMV_Alert {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--TMV-1);
  background: var(--TMV-3);
  font-size: 13px;
}
.TMV_Alert--error {
  border-color: var(--TMV-red);
  background: var(--TMV-0);
  color: var(--TMV-f);
}

.TMV_Notice {
  font-size: 12px;
  color: var(--TMV-f);
}

/* --------------------------------------------------------------------------
   Refresh page
-------------------------------------------------------------------------- */

.TMV_Body--refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.TMV_RefreshWrap {
  max-width: 980px;
  padding: 20px;
}

.TMV_RefreshCard {
  border: 1px solid var(--TMV-1);
  border-radius: var(--TMV-radius);
  background: var(--TMV-1);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.TMV_RefreshTitle {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
}

.TMV_RefreshSub {
  font-size: 13px;
  color: var(--TMV-f);
  line-height: 1.45;
}

.TMV_RefreshHint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--TMV-f);
}

.TMV_RefreshActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.TMV_LogBox {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--TMV-1);
  border-radius: 10px;
  background: var(--TMV-1);
  max-height: 420px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.TMV_LogLine {
  color: var(--TMV-f);
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.TMV_LogLine--ok {
  color: #b6f2c2;
}
.TMV_LogLine--err {
  color: #ffb3b3;
}

.TMV_LogTs {
  color: var(--TMV-f);
  margin-right: 6px;
}
@font-face {
  font-family: "tmv";
  src: url("fonts/tmv.eot?63n01a");
  src:
    url("fonts/tmv.eot?63n01a#iefix") format("embedded-opentype"),
    url("fonts/tmv.ttf?63n01a") format("truetype"),
    url("fonts/tmv.woff?63n01a") format("woff"),
    url("fonts/tmv.svg?63n01a#tmv") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="tmv-"],
[class*=" tmv-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "tmv" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tmv-f10:before {
  content: "\e901";
}
.tmv-f30:before {
  content: "\e902";
}
.tmv-b10:before {
  content: "\e903";
}
.tmv-b30:before {
  content: "\e904";
}
.tmv-move:before {
  content: "\e95f";
}
.tmv-refresh:before {
  content: "\e984";
}
.tmv-delete:before {
  content: "\e9ac";
}
.tmv-panic:before {
  content: "\ea07";
}
.tmv-logout:before {
  content: "\ea14";
}
.tmv-play:before {
  content: "\ea1c";
}
.tmv-pause:before {
  content: "\ea1d";
}
.tmv-stop:before {
  content: "\ea1e";
}
.tmv-prev:before {
  content: "\ea23";
}
.tmv-next:before {
  content: "\ea24";
}
.tmv-unload:before {
  content: "\ea25";
}
.tmv-volume:before {
  content: "\ea27";
}
/* --------------------------------------------------------------------------
   Responsive layout (mobile / narrow screens)
-------------------------------------------------------------------------- */
@media (max-width: 1450px) {
  .TMV_Main {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1000px) {
  .TMV_Main {
    grid-template-columns: 2fr 1fr;
  }
}
@media (max-width: 900px) {
  :root {
    --TMV-topbar-h: 44px; /* smaller TopBar height */
    --TMV-gap: 10px;
  }
  /* Main becomes single column, full width */
  .TMV_Main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "player"
      "stack";
    padding: 0;
    gap: 0;
  }
  .TMV_ColHeader {
    display: none !important;
  }
  .TMV_Col--player {
    grid-area: player;
    width: 100%;
  }

  /* Both live in the same “stack” row */
  .TMV_Col--playlist,
  .TMV_Col--folders {
    grid-area: stack;
    width: 100%;

    /* keep them in layout so we can animate */
    display: flex;

    /* animation */
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      max-height 220ms ease;
    will-change: opacity, transform, max-height;

    overflow: hidden; /* for max-height animation */
  }

  /* Default (moveMode inactive): playlist visible, folders hidden */
  .TMV_Col--playlist {
    opacity: 1;
    transform: translateY(0);
    max-height: 200vh;
    pointer-events: auto;
  }

  .TMV_Col--folders {
    opacity: 0;
    transform: translateY(8px);
    max-height: 0;
    pointer-events: none;
  }

  /* moveMode active: folders visible, playlist hidden */
  body.TMV_MoveMode .TMV_Col--folders {
    opacity: 1;
    transform: translateY(0);
    max-height: 200vh;
    pointer-events: auto;
  }

  body.TMV_MoveMode .TMV_Col--playlist {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    pointer-events: none;
  }

  .TMV_Col--folders.TMV_Col--armed {
    box-shadow: none;
  }
  .TMV_Folder {
    padding: 12px 10px;
  }
  .TMV_FolderCount {
    padding: 0;
    background: none;
    border: none;
  }

  /* Main becomes single column, full width */
  .TMV_Col {
    border-radius: 0;
    border: none;
  }
  #TMV_NowPlaying {
    font-size: 11px;
    display: block;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ensure flex containers allow shrinking (needed for ellipsis) */
  .TMV_TopBarLeft {
    min-width: 0;
    flex: 1 1 auto;
  }

  .TMV_TopBarRight {
    flex: 0 0 auto;
  }
  /* Player full browser width (within the padded main area) */
  .TMV_Col--player {
    width: 100%;
  }

  .TMV_FolderName {
    font-size: 12px;
  }
  /* Folders grid becomes exactly 2 columns */
  .TMV_Folders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .TMV_Seek {
    min-width: 160px;
  }
  .TMV_StatusBar {
    display: none !important;
  }

  /* Reclaim the space it occupied */
  .TMV_App {
    grid-template-rows: var(--TMV-topbar-h) 1fr;
  }
}
@media (max-width: 550px) {
  .TMV_TimeSep,
  .TMV_TimeDur {
    display: none !important;
  }
}
@media (max-width: 420px) {
  :root {
    --TMV-topbar-h: 40px;
    --TMV-gap: 8px;
  }

  .TMV_TopBar {
    padding: 0 var(--TMV-gap);
  }

  .TMV_Folders {
    gap: 8px;
    padding: 8px;
  }
}
/* --------------------------------------------------------------------------
   Responsive: Login + Refresh pages (match index.php rules)
-------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Login */
  .TMV_Body--login {
    padding: var(--TMV-gap);
    align-items: center;
  }

  .TMV_LoginWrap {
    padding: 0;
  }
  .TMV_LoginTitle {
    text-align: right;
  }
  .TMV_LoginCard {
    border: none;
    background: none;
  }

  /* Refresh */
  .TMV_Body--refresh {
    padding: var(--TMV-gap);
    align-items: center;
  }

  .TMV_RefreshWrap {
    max-width: 980px; /* keep same cap, but let it shrink */
    padding: 0;
  }

  .TMV_RefreshCard {
    border: none;
    background: none;
    padding: 0;
  }

  .TMV_RefreshTitle {
    font-size: 16px;
  }

  .TMV_RefreshSub {
    font-size: 12px;
  }

  .TMV_RefreshActions {
    gap: 8px;
    justify-content: end;
  }

  /* LogBox: fit on mobile without forcing page overflow */
  .TMV_LogBox {
    max-height: calc(100vh - 200px);
  }
}

@media (max-width: 420px) {
  /* Login */
  .TMV_LoginWrap {
    max-width: 100%;
  }

  .TMV_LoginCard {
    padding: 12px;
  }

  .TMV_Field--actions .TMV_Btn {
    width: 100%;
  }

  /* Refresh */
  .TMV_RefreshWrap {
    max-width: 100%;
  }

  .TMV_RefreshCard {
    padding: 12px;
  }

  .TMV_RefreshActions {
    flex-direction: column;
  }

  .TMV_RefreshActions .TMV_Btn {
    width: 100%;
  }

  .TMV_LogBox {
    max-height: calc(100vh - 170px);
  }
  .g-recaptcha {
    display: flex;
    justify-content: center;
  }
}